/* ════════════════════════════════════════════════════════════════
   guide.css — Aussehen der drei SEO-Unterseiten
   ────────────────────────────────────────────────────────────────
   Geladen von gantt-online.php sowie über seo/_seo_helper.php von
   ohne-anmeldung.php und projektplan-kostenlos.php. Die drei sehen
   dadurch gleich aus; eine Änderung hier betrifft alle drei — und
   sonst nichts.

   Farbgebung: dieselben zwei Variablen wie die Startseite.
     --accent-blue  kommt aus app_settings.primary_color
     --landing-bg   kommt aus app_settings.landing_bg_color
   Beide werden von der Seite gesetzt, nicht hier fest verdrahtet —
   wer die Farben im Adminpanel ändert, ändert sie überall mit.

   Bewusst ohne Schattenwürfe. Tiefe entsteht über Flächen, feine
   Linien und Abstand. Weiche Schlagschatten auf jeder Karte sind
   das, woran man Baukasten-Seiten sofort erkennt.
   ════════════════════════════════════════════════════════════════ */

/* Die Farbwerte liegen am body, NICHT an .guide.
   ────────────────────────────────────────────────────────────────
   Grund: Die Kopfzeile braucht dieselben Farben, darf aber nicht in
   .guide stehen. Dort gilt `.guide a { color: … ; underline }` für
   jeden Link — das hatte das Logo eingefärbt und von der Kopfzeile
   der Startseite abweichen lassen, weil `.guide a` (Klasse+Element)
   spezifischer ist als `.g-logo` (nur Klasse).

   Variablen unten, Fliesstext-Regeln in .guide: So bekommt die
   Kopfzeile die Farben, ohne die Textregeln des Artikels zu erben. */
body {
    --g-ink:        #1d1d1f;
    --g-ink-soft:   #4a4a55;
    --g-ink-mute:   #6f6f7d;
    --g-line:       rgba(29, 29, 31, 0.12);
    --g-line-soft:  rgba(29, 29, 31, 0.07);
    --g-card:       rgba(255, 255, 255, 0.62);
    --g-card-solid: #ffffff;
    --g-accent:     var(--accent-blue, #938FC5);
    --g-accent-ink: #4a4570;
    --g-maxw:       1120px;
}

.guide {
    color: var(--g-ink);
    font-size: 17px;
    line-height: 1.7;
}

/* ─── Grundraster ──────────────────────────────────────────────── */
.g-wrap { max-width: var(--g-maxw); margin: 0 auto; padding: 0 24px; }
.g-wrap-narrow { max-width: 800px; margin: 0 auto; padding: 0 24px; }

.g-section { padding: 72px 0; border-top: 1px solid var(--g-line-soft); }
.g-section:first-of-type { border-top: 0; }
.g-section.g-tint { background: rgba(255, 255, 255, 0.42); }

.guide h2 {
    font-size: clamp(28px, 3.6vw, 40px);
    line-height: 1.18;
    letter-spacing: -0.9px;
    font-weight: 900;
    margin: 0 0 14px;
    color: var(--g-ink);
}
.guide h3 {
    font-size: clamp(20px, 2.4vw, 25px);
    line-height: 1.3;
    letter-spacing: -0.4px;
    font-weight: 800;
    margin: 34px 0 10px;
    color: var(--g-ink);
}
.guide h4 { font-size: 17px; font-weight: 800; margin: 22px 0 6px; }
.guide p  { margin: 0 0 16px; color: var(--g-ink-soft); }
.guide strong { color: var(--g-ink); font-weight: 700; }
.guide a { color: var(--g-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.guide a:hover { text-decoration-thickness: 2px; }

.g-lead {
    font-size: clamp(18px, 2vw, 21px);
    line-height: 1.6;
    color: var(--g-ink-soft);
    max-width: 62ch;
}
.g-kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--g-accent-ink);
    margin-bottom: 12px;
}

/* ─── Kopfbereich ──────────────────────────────────────────────── */
.g-hero { padding: 56px 0 60px; }
.g-hero h1 {
    font-size: clamp(38px, 6vw, 66px);
    line-height: 1.05;
    letter-spacing: -2px;
    font-weight: 900;
    margin: 0 0 18px;
    color: var(--g-ink);
    max-width: 16ch;
}
.g-hero h1 em {
    font-style: normal;
    color: var(--g-accent-ink);
}
.g-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.g-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 15px; font-weight: 800;
    font-family: inherit;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.g-btn-primary { background: var(--g-accent); color: #fff; }
.g-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
.g-btn-ghost {
    background: transparent; color: var(--g-ink);
    border-color: var(--g-line);
}
.g-btn-ghost:hover { border-color: var(--g-accent); background: rgba(255,255,255,0.5); }
.guide .g-btn { text-decoration: none; }

/* Kennzahlen unter dem Titel */
.g-facts {
    display: flex; flex-wrap: wrap; gap: 10px 28px;
    margin-top: 30px; padding-top: 22px;
    border-top: 1px solid var(--g-line-soft);
    font-size: 14px; color: var(--g-ink-mute);
}
.g-facts b { color: var(--g-ink); font-weight: 800; }

/* ─── Inhaltsverzeichnis ───────────────────────────────────────── */
.g-toc {
    background: var(--g-card);
    border: 1px solid var(--g-line);
    border-radius: 16px;
    padding: 24px 26px;
}
.g-toc-title { font-size: 13px; font-weight: 800; letter-spacing: 1px;
               text-transform: uppercase; color: var(--g-ink-mute); margin-bottom: 14px; }
.g-toc ol { margin: 0; padding: 0; list-style: none;
            columns: 2; column-gap: 34px; }
.g-toc li { break-inside: avoid; margin-bottom: 9px; font-size: 15px; }
.g-toc a { color: var(--g-ink-soft); text-decoration: none; }
.g-toc a:hover { color: var(--g-accent-ink); text-decoration: underline; }
.g-toc-num { color: var(--g-accent-ink); font-weight: 800; margin-right: 8px; }
@media (max-width: 620px) { .g-toc ol { columns: 1; } }

/* ─── Wechselseitige Abschnitte: Text ↔ Bild ───────────────────── */
.g-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.g-split + .g-split { margin-top: 84px; }
.g-split-media { min-width: 0; }
.g-split-text  { min-width: 0; }
/* Jede zweite Reihe dreht die Seiten. Über order statt über eine
   zweite Rasterdefinition — so bleibt die Lesereihenfolge im
   Quelltext für Vorleseprogramme immer Text vor Bild. */
.g-split.g-rev .g-split-media { order: -1; }
@media (max-width: 900px) {
    .g-split { grid-template-columns: 1fr; gap: 30px; }
    .g-split + .g-split { margin-top: 56px; }
    .g-split.g-rev .g-split-media { order: 0; }
}

/* ─── Die sieben Schritte ──────────────────────────────────────── */
/* Zwei Spalten statt einer langen Kolonne: Sieben Absätze untereinander
   lesen sich wie eine Wand, nebeneinander erkennt man auf einen Blick,
   dass es eine überschaubare Folge ist. */
.g-steps {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 34px 48px;
    margin-top: 40px;
}
.g-step { position: relative; padding-left: 52px; }
.g-step h3 { margin: 0 0 8px; font-size: 20px; }
.g-step p  { margin: 0 0 12px; font-size: 16px; }
.g-step .g-list { margin-bottom: 0; }
.g-step .g-list li { font-size: 15px; }
.g-step-no {
    position: absolute; left: 0; top: 1px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 11px;
    background: var(--g-accent); color: #fff;
    font-size: 15px; font-weight: 900;
}
@media (max-width: 820px) {
    .g-steps { grid-template-columns: 1fr; gap: 28px; }
}

/* ─── Bildschirmaufnahmen ──────────────────────────────────────── */
/* Die Aufnahmen bringen ihre Gerätedarstellung selbst mit (iMac,
   MacBook Pro, iPad Pro). Die Seite zeichnet deshalb keine Rahmen
   mehr — vorher standen hier nachgebaute Gehäuse in CSS, die jetzt
   ein Gerät im Gerät ergeben hätten.

   Geblieben ist nur, was die Bilder nicht selbst mitbringen: leicht
   abgerundete Ecken für die beiden Aufnahmen ohne Gehäuse. */
.g-shot { width: 100%; }
.g-shot img { display: block; width: 100%; height: auto; }

/* Aufnahmen mit Gerät sind bis zum Rand belichtet und brauchen nichts.
   Die beiden ohne Gerät bekommen die Ecken, die sonst das Gehäuse
   gäbe. */
.g-shot img.g-blank { border-radius: 12px; }

/* Das Telefonbild ist eine reine Bildschirmaufnahme, die iPad-Aufnahme
   enthält ein Gerät mit breitem weissem Rand. Gäbe man beiden gleich
   viel Platz, wäre das iPad IM Bild kaum grösser als das Telefon
   daneben — die Grössenordnung stünde auf dem Kopf.

   Deshalb bekommt das Telefon eine feste, kleine Breite. Vom iPad-Bild
   entfallen rund 24 % auf den Rand; bei 372 px Bildbreite bleiben also
   etwa 283 px Gerät gegenüber 120 px Telefon — rund 2,4 : 1 und damit
   nahe am echten Verhältnis von iPad Pro zu Telefon. */
.g-shot-hoch { max-width: 120px; margin: 0 auto; }

/* Hochformat neben Querformat: Das Telefonbild ist schmal und hoch,
   die Tablet-Aufnahme breit und flach. Unten ausgerichtet stehen sie
   auf einer Linie statt in der Mitte zu schweben. */
.g-devices-pair {
    display: grid; grid-template-columns: 1fr 120px;
    gap: 16px; align-items: end;
}
@media (max-width: 560px) {
    .g-devices-pair { grid-template-columns: 1fr; justify-items: center; }
}

/* Ausschnitt ohne Gerät — schmaler Rahmen statt voller Spaltenbreite,
   sonst würde der kleine Fensterausschnitt hochskaliert und unscharf. */
.g-inset-frame {
    border: 1px solid var(--g-line);
    border-radius: 14px;
    background: #fff;
    padding: 14px;
    max-width: 480px;
}
.g-inset-frame img { display: block; width: 100%; height: auto; border-radius: 8px; }

.g-caption {
    font-size: 13px; color: var(--g-ink-mute);
    margin-top: 12px; line-height: 1.5;
}

/* ─── Karten, Listen, Tabellen ─────────────────────────────────── */
.g-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px; margin-top: 26px;
}
.g-card {
    background: var(--g-card);
    border: 1px solid var(--g-line);
    border-radius: 14px;
    padding: 22px 24px;
}
.g-card h3 { margin: 0 0 8px; font-size: 18px; }
.g-card p  { margin: 0; font-size: 15px; }

.g-list { margin: 0 0 16px; padding-left: 0; list-style: none; }
.g-list li {
    position: relative; padding-left: 26px; margin-bottom: 10px;
    color: var(--g-ink-soft);
}
.g-list li::before {
    content: ""; position: absolute; left: 6px; top: 11px;
    width: 7px; height: 7px; border-radius: 2px;
    background: var(--g-accent);
}
.g-list-num { counter-reset: gl; }
.g-list-num li { padding-left: 34px; }
.g-list-num li::before {
    counter-increment: gl; content: counter(gl);
    left: 0; top: 2px; width: 22px; height: 22px; border-radius: 7px;
    background: rgba(147, 143, 197, 0.18);
    color: var(--g-accent-ink);
    font-size: 12px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}

/* Vor- und Nachteile — bewusst nebeneinander statt untereinander,
   damit man sie tatsächlich vergleicht statt nacheinander liest. */
.g-pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 26px; }
@media (max-width: 780px) { .g-pros-cons { grid-template-columns: 1fr; } }
.g-pc {
    border: 1px solid var(--g-line);
    border-radius: 14px;
    padding: 24px 26px;
    background: var(--g-card);
}
.g-pc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.g-pc-badge {
    width: 26px; height: 26px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 900; color: #fff;
}
.g-pc-pro .g-pc-badge { background: #3f8f6b; }
.g-pc-con .g-pc-badge { background: #b06a4c; }
.g-pc h3 { margin: 0; font-size: 18px; }
.g-pc li::before { background: #3f8f6b; }
.g-pc-con li::before { background: #b06a4c; }

.g-table-wrap { overflow-x: auto; margin-top: 24px; }
.g-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 620px; }
.g-table th, .g-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--g-line-soft); }
.g-table th {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--g-ink-mute); font-weight: 800;
    border-bottom: 2px solid var(--g-line);
}
.g-table td { color: var(--g-ink-soft); }
.g-table tbody tr:hover td { background: rgba(255,255,255,0.5); }
.g-table .g-yes { color: #3f8f6b; font-weight: 800; }
.g-table .g-no  { color: var(--g-ink-mute); }

/* Hervorgehobener Merksatz */
.g-note {
    border-left: 3px solid var(--g-accent);
    padding: 4px 0 4px 20px;
    margin: 24px 0;
    color: var(--g-ink-soft);
    font-size: 16px;
}
.g-note strong { color: var(--g-ink); }

/* ─── FAQ ──────────────────────────────────────────────────────── */
.g-faq { margin-top: 26px; border-top: 1px solid var(--g-line-soft); }
.g-faq details {
    border-bottom: 1px solid var(--g-line-soft);
}
.g-faq summary {
    cursor: pointer; list-style: none;
    padding: 18px 40px 18px 0;
    font-size: 17px; font-weight: 700; color: var(--g-ink);
    position: relative;
}
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::after {
    content: "+"; position: absolute; right: 6px; top: 15px;
    font-size: 22px; font-weight: 400; color: var(--g-accent-ink);
    transition: transform 0.18s ease;
}
.g-faq details[open] summary::after { transform: rotate(45deg); }
.g-faq details p { margin: 0 0 18px; padding-right: 40px; font-size: 16px; }

/* ─── Abschluss ────────────────────────────────────────────────── */
.g-final {
    background: var(--g-card);
    border: 1px solid var(--g-line);
    border-radius: 20px;
    padding: 46px 40px;
    text-align: center;
}
.g-final h2 { margin-bottom: 10px; }
.g-final .g-lead { margin: 0 auto 26px; }
.g-final .g-hero-cta { justify-content: center; }

/* ─── Kopfzeile ────────────────────────────────────────────────── */
/* Nachbau der Startseiten-Kopfzeile mit denselben Werten (Glas-Fläche,
   Pillen-Knopf, Abstände). Bewusst NACHGEBAUT statt landing.css
   eingebunden: Die Datei bringt das komplette Startseiten-Layout mit,
   inklusive einer body-Regel mit !important — die würde diese Seite
   überschreiben. Ein Dutzend Zeilen Wiederholung ist billiger als
   diese Abhängigkeit.

   Die weiche Fläche mit ihrem leichten Schein ist hier gewollt: Sie
   ist das Erkennungszeichen der Startseite. Der Rest der Seite bleibt
   schattenfrei. */
.g-topbar { padding: 16px 24px 0; }
.g-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    max-width: 1240px; margin: 0 auto;
    padding: 14px 28px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(30, 60, 120, 0.18), 0 1px 0 rgba(255,255,255,0.7) inset;
}
.g-logo {
    font-size: 24px; font-weight: 900; letter-spacing: -0.6px;
    color: #1d1d1f; text-decoration: none;
}
.g-header-nav { display: flex; gap: 30px; align-items: center; }
.g-header-nav a {
    text-decoration: none;
    color: rgba(29, 29, 31, 0.78);
    font-weight: 600;
    font-size: 14px;
    transition: color 0.18s;
}
.g-header-nav a:hover { color: #1d1d1f; }
.g-login {
    padding: 9px 20px;
    border-radius: 999px;
    border: 1px solid rgba(29, 29, 31, 0.18);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #1d1d1f;
    font-size: 13px; font-weight: 700;
    font-family: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s, transform 0.12s;
}
.g-login:hover { background: rgba(255, 255, 255, 0.85); transform: translateY(-1px); }
@media (max-width: 820px) {
    .g-header { padding: 12px 18px; }
    .g-header-nav { display: none; }
    .g-logo { font-size: 21px; }
}

/* Abschnittsmarke — gibt der langen Seite ein sichtbares Raster */
.g-eyebrow {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px;
}
.g-eyebrow span {
    font-size: 12px; font-weight: 800; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--g-accent-ink);
    white-space: nowrap;
}
.g-eyebrow::after {
    content: ""; flex: 1; height: 1px; background: var(--g-line);
}

/* Sprungmarken sollen nicht unter der Kopfzeile verschwinden */
.guide [id] { scroll-margin-top: 24px; }

/* ─── Fusszeile ────────────────────────────────────────────────── */
.g-footer {
    border-top: 1px solid var(--g-line-soft);
    padding: 34px 0 60px;
    font-size: 14px; color: var(--g-ink-mute);
}
.g-footer a { color: var(--g-ink-mute); }
.g-footer-links { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; }

/* ─── Bewegung reduzieren ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .g-btn, .g-faq summary::after { transition: none; }
    .g-btn-primary:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   SEO-UNTERSEITEN (ohne-anmeldung.php, projektplan-kostenlos.php)
   ──────────────────────────────────────────────────────────────────
   Der Inhalt dieser beiden Seiten liegt fertig in den Dateien und
   nutzt .seo-content-block und .seo-lead. Statt beide Seiten
   umzuschreiben, bekommen die vorhandenen Klassen hier das Aussehen
   der Ratgeberseite. Das hält den Eingriff klein: An den Texten und
   damit an den Suchergebnissen ändert sich nichts.
   ══════════════════════════════════════════════════════════════════ */

/* Zurück-Verweis über der Überschrift */
.g-zurueck {
    display: inline-block;
    font-size: 13px;
    color: var(--g-ink-mute);
    text-decoration: none;
    margin-bottom: 18px;
}
.guide .g-zurueck { text-decoration: none; }
.g-zurueck:hover { color: var(--g-ink); }

/* Die Blöcke waren für weissen Text auf dunklem Grund gebaut —
   halbtransparentes Weiss mit Weichzeichner. Auf hellem Untergrund
   ergibt das eine kaum sichtbare Fläche mit unlesbarer Schrift.
   Jetzt dieselbe ruhige Karte wie im Ratgeber. */
.g-seotext .seo-content-block {
    background: var(--g-card);
    border: 1px solid var(--g-line);
    border-radius: 14px;
    padding: 26px 28px;
    margin-bottom: 18px;
    color: var(--g-ink-soft);
    line-height: 1.7;
    backdrop-filter: none;
}
.g-seotext .seo-content-block h2 {
    font-size: clamp(22px, 3vw, 28px);
    line-height: 1.25;
    letter-spacing: -0.6px;
    font-weight: 900;
    color: var(--g-ink);
    margin: 0 0 12px;
}
.g-seotext .seo-content-block h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--g-ink);
    margin: 22px 0 8px;
}
.g-seotext .seo-content-block p { margin: 0 0 14px; }
.g-seotext .seo-content-block p:last-child { margin-bottom: 0; }
.g-seotext .seo-content-block strong { color: var(--g-ink); font-weight: 700; }
.g-seotext .seo-content-block ul,
.g-seotext .seo-content-block ol { margin: 12px 0 16px; padding-left: 22px; }
.g-seotext .seo-content-block li { margin-bottom: 7px; }
.g-seotext .seo-content-block a { color: var(--g-accent-ink); }

/* Der Vorspann steht ausserhalb der Karten und trägt die Seite an. */
.g-seotext .seo-lead {
    font-size: clamp(17px, 2vw, 20px);
    line-height: 1.6;
    color: var(--g-ink-soft);
    max-width: 62ch;
    margin: 0 0 30px;
    text-align: left;
}
.g-seotext .seo-lead strong { color: var(--g-ink); }

/* Reste des alten dunklen Aufbaus neutralisieren, falls in den
   Inhalten noch Knöpfe der Startseite stecken. */
.g-seotext .action-btn,
.g-seotext .landing-cta-btn { all: unset; }