/* ============================================================================
   GEOPHORA — Das Feldbuch (Blog) · css/gp-blog.css
   Eingeführt am 2026-08-12 (Feldbuch-Umzug E11, Entscheidungen B1–B7):
   Die Ortstermin-Folgen ziehen von retteten.de hierher; der Ortstermin ist
   der Angelpunkt jeder Folge (1 m · Verstehen), die übrigen Höhen kreisen
   darum. Die Skala endet bei 0 m — das „Innen" wohnt bewusst nicht hier.

   Lädt NACH css/geophora-demo.css und nutzt ausschließlich dessen Tokens.
   Die Folgen-Innereien behalten die bewährten Klassennamen der alten
   feldbuch.css (folge__*, leg-*, auf-abschnitt), damit die Texte beim Umzug
   wortgleich bleiben konnten; Register und Rahmen sind neu (fb-*).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Register (blog/index.php) — „Das Feldbuch"
   ------------------------------------------------------------------------- */
.fb-kopf { display: flex; gap: 22px; align-items: flex-start; max-width: 720px; margin: 0 0 8px; }
.fb-kopf__lot { flex: 0 0 auto; color: var(--gp-akzent); margin-top: 6px; }
.fb-kopf__ey {
    font-family: var(--gp-mono); font-size: .72rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--gp-akzent-tief); margin: 0 0 8px;
}
.fb-kopf h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.6rem); letter-spacing: -.015em; margin: 0 0 10px; }
.fb-kopf__sub { font-size: 1.06rem; color: var(--gp-text-soft); margin: 0 0 10px; max-width: 56ch; }
.fb-kopf__intro { font-size: .98rem; color: var(--gp-text-soft); margin: 0; max-width: 58ch; }

/* (Die frühere Höhen-Leiste .fb-hoehen ist am 13.08.2026 dem
   Doppelseiten-Kopf .fb-buch gewichen — Regeln entfernt.) */

/* Doppelseiten-Kopf (Roberts Wahl 13.08.2026, ersetzt die Höhen-Leiste):
   Das Register beginnt als aufgeschlagenes Feldbuch — links die Titelseite
   mit dem Zoomtrichter (Familienzeichen: von 700 km Breite zum 0-m-Punkt,
   Sprossen wie am Lot), rechts die drei Anker als gleichwertige
   Registereinträge mit Höhen-Marginalie. Kein Anker ist betont. */
.fb-buch {
    display: grid; grid-template-columns: 1fr 1.25fr;
    background: var(--gp-surface); border: 1px solid var(--gp-border);
    border-radius: var(--gp-r-lg); overflow: hidden; margin: 6px 0 34px;
}
.fb-buch__titel {
    padding: 30px 34px 28px; border-right: 1px solid var(--gp-border);
    /* Falz: weicher Innenschatten zur Buchmitte */
    box-shadow: inset -14px 0 18px -16px rgba(var(--gp-ink-rgb), .20);
}
.fb-buch__titel h1 { margin: 0; }
.fb-trichter { display: block; color: var(--gp-border); margin: 0 0 14px; }
.fb-buch__anker { padding: 10px 30px; }
.fb-buch__eintrag {
    display: grid; grid-template-columns: 118px 1fr; gap: 18px;
    padding: 15px 0;
}
.fb-buch__eintrag + .fb-buch__eintrag { border-top: 1px dashed var(--gp-border); }
.fb-buch__marge {
    font-family: var(--gp-mono); font-size: .72rem; letter-spacing: .05em;
    color: var(--gp-akzent-tief); padding-top: 2px;
}
.fb-buch__name { font-size: .98rem; font-weight: 600; letter-spacing: -.005em; }
.fb-buch__eintrag p { font-size: .88rem; color: var(--gp-text-soft); margin: 4px 0 0; }
@media (max-width: 720px) {
    .fb-buch { grid-template-columns: 1fr; }
    .fb-buch__titel { border-right: 0; border-bottom: 1px solid var(--gp-border);
                      box-shadow: inset 0 -14px 18px -16px rgba(var(--gp-ink-rgb), .20); }
    .fb-buch__eintrag { grid-template-columns: 108px 1fr; gap: 12px; }
}
@media (max-width: 420px) {
    .fb-buch__eintrag { grid-template-columns: 1fr; gap: 4px; }
}

/* Flughöhen-Zeile darf auf schmalen Geräten umbrechen (Basisregel: nowrap). */
.gp-spanne a { white-space: normal; }

/* Leitsatz (in der linken Buchseite). */
.fb-leitsatz {
    margin: 18px 0 0; font-size: .95rem; color: var(--gp-text-soft);
    max-width: 72ch;
}

/* Sprachumschalter des Blogs: dieselbe gp-lang-Optik wie die Startseite,
   aber als Links (echte Adressen /blog/ ↔ /blog/en/ — Sprachobjekte,
   kein JS-Wörterbuch). */
.gp-lang a.gp-lang__btn { text-decoration: none; display: inline-block; }

/* Beitragsliste — chronologisch, neueste zuerst */
.fb-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; max-width: 860px; }
.fb-eintrag {
    display: flex; gap: 22px; align-items: flex-start;
    background: var(--gp-surface); border: 1px solid rgba(var(--gp-ink-rgb), .10);
    border-radius: var(--gp-r-lg); padding: 20px 22px;
    box-shadow: var(--gp-shadow-sm);
    transition: transform var(--gp-base), box-shadow var(--gp-base), border-color var(--gp-base);
}
.fb-eintrag:hover { transform: translateY(-2px); box-shadow: var(--gp-shadow); border-color: rgba(var(--gp-akzent-rgb), .4); }
.fb-eintrag__bild { flex: 0 0 132px; }
.fb-eintrag__bild img { width: 132px; height: 88px; object-fit: cover; border-radius: var(--gp-r-sm); border: 1px solid var(--gp-border); }
.fb-eintrag__meta {
    font-family: var(--gp-mono); font-size: .74rem; letter-spacing: .04em;
    color: var(--gp-text-soft); margin: 0 0 6px;
}
.fb-eintrag__meta b { color: var(--gp-akzent-tief); font-weight: 600; }
.fb-eintrag h2 { font-size: 1.2rem; margin: 0 0 6px; letter-spacing: -.01em; }
.fb-eintrag h2 a { color: var(--gp-text); }
.fb-eintrag h2 a:hover { color: var(--gp-akzent-tief); }
.fb-eintrag p { font-size: .92rem; color: var(--gp-text-soft); margin: 0; max-width: 60ch; }
.fb-leer { color: var(--gp-text-soft); font-size: .95rem; }

@media (max-width: 560px) {
    .fb-eintrag { flex-direction: column; gap: 12px; }
    .fb-eintrag__bild, .fb-eintrag__bild img { width: 100%; height: auto; }
}

/* ---------------------------------------------------------------------------
   2. Folge (blog/<slug>/index.php) — Lesefläche auf Kreide
   ------------------------------------------------------------------------- */
.folge { max-width: 720px; margin: 0 auto; padding: 40px 20px 96px; }
.folge h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.7rem); letter-spacing: -.015em; margin: 0 0 8px; }
.folge__meta {
    font-family: var(--gp-mono); font-size: .78rem; letter-spacing: .04em;
    color: var(--gp-text-soft); margin: 0 0 26px;
}
.folge__meta b { color: var(--gp-akzent-tief); font-weight: 600; }
.folge p { line-height: 1.7; }
.folge a { text-decoration: none; border-bottom: 1px solid var(--gp-border); }
.folge a:hover { border-color: var(--gp-akzent-tief); }

/* Rückweg zum Register — schlicht, oberhalb des Titels */
.folge__zurueck {
    display: inline-block; font-family: var(--gp-mono); font-size: .78rem;
    letter-spacing: .04em; color: var(--gp-akzent-tief); margin: 0 0 22px;
    border-bottom: 1px solid var(--gp-border);
}
.folge__zurueck:hover { color: var(--gp-text); border-color: var(--gp-akzent-tief); }

/* Abschnitte mit Höhen-Anker: <h2><span class="folge__hoehe">700 km</span> Sehen</h2> */
.auf-abschnitt { margin: 40px 0 0; }
.auf-abschnitt h2 { font-size: 1.3rem; letter-spacing: -.01em; margin: 0 0 14px; }
.folge__hoehe {
    display: inline-block; font-family: var(--gp-mono); font-size: .74rem;
    font-weight: 600; letter-spacing: .05em; color: var(--gp-akzent-tief);
    background: rgba(var(--gp-akzent-rgb), .10); border-radius: 999px;
    padding: .3em .75em; margin-right: .6em; vertical-align: .18em;
    white-space: nowrap;
}

/* Bilder: exakte Maße kommen aus width/height-Attributen (CLS-Regel) */
.folge figure { margin: 22px 0; }
.folge figure img {
    width: 100%; height: auto; border-radius: var(--gp-r);
    border: 1px solid var(--gp-border);
}
.folge figcaption {
    font-size: .8rem; color: var(--gp-text-faint); line-height: 1.55; margin-top: 8px;
}
.folge figcaption a { border-bottom-width: 1px; }

/* Bildlegenden mit Farbrampe (Muster aus dem alten feldbuch.css, auf Tokens) */
.folge__legende {
    margin: 12px 0 4px; padding: 12px 14px;
    background: var(--gp-surface); border: 1px solid var(--gp-border);
    border-radius: var(--gp-r-sm);
}
.folge__legende h3 {
    font-family: var(--gp-mono); font-size: .7rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--gp-text-faint); margin: 0 0 8px;
}
.leg-rampe { height: 11px; border-radius: 3px; border: 1px solid var(--gp-border); }
.leg-achse {
    display: flex; justify-content: space-between; gap: 10px;
    font-size: .72rem; color: var(--gp-text-soft); margin-top: 5px;
}
.leg-chips { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.leg-chips li { display: flex; gap: .55em; align-items: baseline; font-size: .8rem; color: var(--gp-text-soft); }
.leg-chips i { flex: none; width: 13px; height: 13px; border-radius: 3px; transform: translateY(2px); }
.leg-kreis { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--gp-text); background: transparent; transform: translateY(2px); }
.folge__legende p { font-size: .82rem; color: var(--gp-text-soft); margin: 10px 0 0; line-height: 1.55; }

/* Zahlentabellen: Haarlinien, Zahlen rechtsbündig, Beschriftung oben links */
.folge__tabelle { overflow-x: auto; margin: 18px 0; }
.folge__tabelle table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.folge__tabelle caption {
    caption-side: top; text-align: left; font-size: .8rem;
    color: var(--gp-text-soft); padding-bottom: 8px; line-height: 1.5;
}
@media (max-width: 720px) {
    /* Die Beschriftung bricht an der Viewportbreite um statt an der Scrollbreite
       der Tabelle. display bleibt table-caption — display:block würde die caption
       in Chromium als anonyme Zelle zwischen Kopf- und Datenzeilen rendern. */
    .folge__tabelle caption { width: calc(100vw - 48px); }
}
.folge__tabelle th, .folge__tabelle td {
    text-align: left; padding: 7px 12px 7px 0;
    border-bottom: 1px solid var(--gp-border); vertical-align: top;
}
.folge__tabelle th {
    font-family: var(--gp-mono); font-size: .68rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--gp-text-faint);
}
.folge__tabelle td + td, .folge__tabelle th + th,
.folge__tabelle th[scope="row"] + td {
    text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.folge__tabelle tr.hervor td { background: rgba(var(--gp-akzent-rgb), .07); font-weight: 600; }

/* Pointe: der eine Satz, der sitzt — Akzentkante, keine Box */
.folge__pointe {
    border-left: 3px solid var(--gp-akzent); padding-left: 14px;
    font-size: 1.08em; color: var(--gp-text); margin: 22px 0;
}

/* „Der erste Schritt" (0 m) — schlichter Dreizeilen-Kasten. Bewusst OHNE das
   Wand-Vokabular von retteten (E11: die Wand bleibt drüben). */
.folge__schritt {
    background: var(--gp-surface); border: 1px solid rgba(var(--gp-ink-rgb), .10);
    border-radius: var(--gp-r); padding: 16px 18px; margin: 18px 0;
    display: grid; gap: 8px;
}
.folge__schritt p { margin: 0; font-size: .95rem; line-height: 1.55; }
.folge__schritt b {
    font-family: var(--gp-mono); font-size: .7rem; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase; color: var(--gp-akzent-tief);
    display: block; margin-bottom: 2px;
}

/* Werkzeug-Kasten „Selbst nachsehen" — das neue Herzstück: jede Folge
   verlinkt die Stelle in den eigenen Werkzeugen. */
.fb-werkzeug {
    background: var(--gp-surface); border: 1px solid rgba(var(--gp-ink-rgb), .10);
    border-left: 3px solid var(--gp-akzent); border-radius: 0 var(--gp-r) var(--gp-r) 0;
    padding: 14px 18px; margin: 24px 0;
}
.fb-werkzeug .k {
    font-family: var(--gp-mono); font-size: .68rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--gp-akzent-tief); margin: 0 0 8px; font-weight: 600;
}
.fb-werkzeug p { font-size: .9rem; color: var(--gp-text-soft); margin: 0; line-height: 1.6; }
.fb-werkzeug a { color: var(--gp-akzent-tief); border-bottom: 1px solid var(--gp-border); }
.fb-werkzeug a:hover { color: var(--gp-text); border-color: var(--gp-akzent-tief); }

/* Quellen-Abspann */
.folge__quellen {
    margin: 44px 0 0; padding-top: 20px; border-top: 1px solid var(--gp-border);
    font-size: .84rem; color: var(--gp-text-soft);
}
.folge__quellen strong {
    font-family: var(--gp-mono); font-size: .7rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--gp-text-faint);
}
.folge__quellen ul { margin: 10px 0 16px; padding-left: 1.2em; }
.folge__quellen li { margin-bottom: 8px; line-height: 1.55; }
/* Lange Quellen-Links und Code-Pfade dürfen überall brechen. */
.folge__quellen li, .folge__quellen a { overflow-wrap: anywhere; }
.folge code { overflow-wrap: anywhere; }

/* Entwurfs-Hinweis: eine Folge existiert unter ihrer Adresse, ist aber noch
   nicht publiziert (status='entwurf' — nicht in Register, Feed, Sitemap). */
.fb-entwurf {
    background: rgba(var(--gp-akzent-rgb), .08);
    border: 1px dashed rgba(var(--gp-akzent-rgb), .5);
    border-radius: var(--gp-r); padding: 12px 16px; margin: 0 0 26px;
    font-family: var(--gp-mono); font-size: .78rem; color: var(--gp-akzent-tief);
}

/* Teil-Zwischentitel der Methodik-Seite: gliedert die Verfahren in
   Werkzeugkästen (Teil 1 = NDVI-Zeitreihen; weitere folgen mit neuen
   Datenarten). Gleiche Stimme wie fb-kopf__eyebrow, mit Haarlinie darüber. */
.fb-teil {
    margin: 44px 0 -6px; padding-top: 18px;
    border-top: 1px solid var(--gp-border);
    font-family: var(--gp-mono); font-size: .74rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--gp-akzent-tief); font-weight: 600;
}