/* ===================================================================
   kampagne.css — „wir retteten…"  ·  retteten.de
   Kampagnenseite, eigenständig (lädt NICHT style.css/brand_colors.css).
   Farbwelt aus dem Logo-Paket „Offenes Ende":
     Papierweiß #F6F4EE · Tiefes Pinie #16302A · Grün #2C8A6B
     Blattgrün #8FC08E · Bernstein #E8A13C (die Ellipse „…")
   Typografie: Fraunces (selbst gehostet, SIL OFL) für Slogan & Dreizeiler,
   System-Sans für alles Funktionale. Mobile first, kein JavaScript nötig.
   =================================================================== */

/* ---------- Fonts ---------- */
@font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces-latin.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces-latin-italic.woff2") format("woff2");
    font-weight: 300 700;
    font-style: italic;
    font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
    --papier:      #F6F4EE;
    --karte:       #FDFCF8;
    --pinie:       #16302A;
    --pinie-weich: #48584F;
    --gedeckt:     #5A6B60;   /* Sekundärtext, AA auf Papier */
    --gruen:       #2C8A6B;   /* Marken-Grün (dekorativ) */
    --gruen-tief:  #1F6B51;   /* Links/Interaktives (AA) */
    --blatt:       #8FC08E;
    --bernstein:   #E8A13C;   /* die Ellipse „…" — der eine Akzent */
    --bernstein-tief: #B36F14;
    --linie:       #E2DDD0;
    --serif: "Fraunces", Georgia, "Iowan Old Style", "Times New Roman", serif;
    --sans:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --radius: 0;   /* Notizzettel: alle Kartenflächen eckig */
}

/* ---------- Reset / Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--pinie);
    background: var(--papier);
}
img, svg { display: block; max-width: 100%; }
a { color: var(--gruen-tief); text-underline-offset: 3px; }
a:hover { color: var(--pinie); }
:focus-visible {
    outline: 3px solid var(--bernstein);
    outline-offset: 3px;
    border-radius: 4px;
}
::selection { background: var(--bernstein); color: var(--pinie); }

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--pinie);
    color: var(--papier);
    padding: 0.6rem 1rem;
    z-index: 10;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; color: var(--papier); }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.container {
    width: min(100% - 2.5rem, 68rem);
    margin-inline: auto;
}

/* Dezenter Sprachumschalter, oben rechts — stört den Hook nicht */
.lang-switch {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    z-index: 5;
    display: flex;
    gap: 0.35rem;
}
.lang-switch a {
    position: relative;   /* Anker für die unsichtbare Tap-Fläche */
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    color: var(--gedeckt);
    text-decoration: none;
    border: 1px solid var(--linie);
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    background: var(--karte);
}
/* Unsichtbar vergrößerte Tap-Fläche — ändert die Optik nicht */
.lang-switch a::after { content: ""; position: absolute; inset: -6px; }
.lang-switch a:hover, .lang-switch a:focus-visible { color: var(--pinie); border-color: var(--bernstein); }
.schmal { width: min(100% - 2.5rem, 36rem); margin-inline: auto; }

/* ===================================================================
   Stufe 1 — Der Hook
   =================================================================== */
.hook {
    min-height: 100vh;   /* Fallback ohne svh-Support */
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.25rem 4rem;
}
.hook__wortmarke {
    font-family: var(--serif);
    font-weight: 560;
    font-variation-settings: "opsz" 100;
    font-size: clamp(2.8rem, 11.5vw, 8.5rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--pinie);
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 0.18em;
}
/* Die offene Ellipse: das Signet als Schriftzeichen.
   Größe koppelt an die Schriftgröße, Grundlinie leicht abgesenkt. */
.hook__signet {
    width: 0.92em;
    height: 0.46em;
    overflow: visible;
    transform: translateY(0.04em);
}
/* „…als würde jemand gleich weiterschreiben": die Punkte erscheinen
   nacheinander, das Blatt wächst zuletzt AUS dem dritten Punkt —
   und reift dabei langsam von Bernstein zu Grün. Ruhige 6s-Schleife. */
.hook__signet .p1, .hook__signet .p2, .hook__signet .p3,
.hook__signet .blatt { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
    .hook__signet .p1   { animation: punkt 6s ease-in-out infinite; }
    .hook__signet .p2   { animation: punkt 6s ease-in-out 0.55s infinite; }
    .hook__signet .p3   { animation: punkt 6s ease-in-out 1.1s infinite; }
    .hook__signet .blatt {
        /* Drehpunkt = Blattansatz (unten Mitte der Blattform) — genau
           die Stelle, an der das Blatt auf dem Punkt sitzt. */
        transform-box: fill-box;
        transform-origin: 50% 100%;
        animation: blatt 6s ease-in-out 1.5s infinite;
    }
    .hook__signet .blatt path {
        animation: blattfarbe 6s ease-in-out 1.5s infinite;
    }
}
@keyframes punkt {
    0%, 6%   { opacity: 0.18; }
    14%, 82% { opacity: 1; }
    96%, 100%{ opacity: 0.18; }
}
/* Wachsen aus dem Punkt: klein und steil beginnen, zur Seite entfalten */
@keyframes blatt {
    0%, 5%   { opacity: 0; transform: scale(0.1) rotate(4deg); }
    24%      { opacity: 1; transform: scale(1.04) rotate(24deg); }
    30%, 80% { opacity: 1; transform: scale(1) rotate(22deg); }
    95%,100% { opacity: 0; transform: scale(0.1) rotate(4deg); }
}
/* Reifen: Bernstein -> langsam Grün, am Ende zurück */
@keyframes blattfarbe {
    0%, 24%  { fill: #E8A13C; }
    55%, 80% { fill: #2C8A6B; }
    100%     { fill: #E8A13C; }
}

/* Brückentext: die Übersetzung des Slogans, genau einmal, leise */
.hook__bruecke {
    font-family: var(--sans);
    font-size: clamp(0.85rem, 1.8vw, 1rem);
    color: var(--gedeckt);
    margin-top: 0.6rem;
}
.hook__frage {
    font-family: var(--sans);
    font-size: clamp(1.15rem, 2.6vw, 1.45rem);
    color: var(--pinie-weich);
    margin-top: clamp(1.5rem, 4vh, 2.5rem);
}
/* Beispielzeile: löst die Mehrdeutigkeit auf, verbreitert die Einladung */
.hook__beispiele {
    font-family: var(--sans);
    font-size: clamp(0.85rem, 1.9vw, 1rem);
    color: var(--gedeckt);
    margin-top: 0.5rem;
    max-width: 30rem;
}
.hook__cta {
    display: inline-block;
    margin-top: 1.6rem;
    background: var(--bernstein);
    color: var(--pinie);
    font-family: var(--sans);
    font-size: 1.05rem;
    font-weight: 650;
    text-decoration: none;
    padding: 0.85rem 1.9rem;
    border-radius: 999px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hook__cta:hover, .hook__cta:focus-visible {
    color: var(--pinie);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(22, 48, 42, 0.18);
}
/* stiller Hinweis, dass unten etwas ist */
.hook__weiter {
    margin-top: clamp(2.5rem, 8vh, 5rem);
    color: var(--bernstein);
    font-family: var(--serif);
    font-size: 1.6rem;
    letter-spacing: 0.3em;
    user-select: none;
}

/* ===================================================================
   Stufe 2 — Die Wand
   =================================================================== */
.wand {
    padding: 1rem 0 4rem;
}
.wand__spalten {
    columns: 1;
    column-gap: 1.25rem;
}
@media (min-width: 640px)  { .wand__spalten { columns: 2; } }
@media (min-width: 1000px) { .wand__spalten { columns: 3; } }

/* Einmaliger, kleiner Hinweis vor der ersten Karte:
   Originalsprache + Browser-Übersetzung + Absprung zum Maschinenraum */
.wand__hinweis {
    text-align: center;
    font-family: var(--sans);
    font-size: 0.8rem;
    color: var(--gedeckt);
    margin-top: 1.5rem;
}
.wand__hinweis--oben {
    margin-top: 0;
    margin-bottom: 1.5rem;
    max-width: 38rem;
    margin-inline: auto;
}
.wand__hinweis .tr {
    color: var(--bernstein-tief);
    letter-spacing: 0.1em;
    padding-inline: 0.25rem;
}

.karte {
    position: relative;   /* Anker für Eselsohr und Blatt-Stempel */
    overflow-wrap: break-word;   /* Schutz vor überlangen Wörtern in Beiträgen */
    break-inside: avoid;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 1.5rem 1.6rem 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(22, 48, 42, 0.05);
}

/* Notizzettel: umgeknickte Ecke unten rechts (Eselsohr). Ein einziger
   CSS-Verlauf: Seitengrund schneidet die Ecke ab, dünne Knicklinie,
   dann die hellere Rückseite des Papiers. */
.karte::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 1.15rem;
    height: 1.15rem;
    background: linear-gradient(315deg,
        var(--papier) 0 49%,
        rgba(22, 48, 42, 0.16) 49% 53%,
        #EFEBDF 53%, #E4DFD0 100%);
}
.karte__zeile {
    font-family: var(--serif);
    font-size: 1.16rem;
    line-height: 1.45;
    margin-bottom: 0.65rem;
}
.karte__zeile:last-of-type { margin-bottom: 0; }
.karte__stamm {
    color: var(--gedeckt);
    font-weight: 380;
}
.karte__wert { font-weight: 560; }
.karte__wert--offen { color: var(--bernstein-tief); letter-spacing: 0.15em; }
.karte__fuss {
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--gedeckt);
    margin-top: 1rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--linie);
}
.karte__fuss .tr { color: var(--bernstein-tief); letter-spacing: 0.1em; padding-inline: 0.15rem; }

/* Vollzogene Rettung — invertiert, Kampagnenstimme */
.karte--vollzug {
    background: var(--pinie);
    border-color: var(--pinie);
    color: var(--papier);
    box-shadow: 0 4px 14px rgba(22, 48, 42, 0.22);
}
/* Erledigt = Eselsohr wieder aufgeklappt: die Ecke ist vollständig da,
   nur Falzlinie und Knickspur in Bernstein bleiben — das Merkzeichen
   („da will ich nochmal ran") hat seinen Dienst getan. */
.karte--vollzug::after {
    right: 0;
    bottom: 0;
    background: linear-gradient(315deg,
        var(--bernstein) 0 47%,
        rgba(246, 244, 238, 0.55) 47% 53%,
        transparent 53%);
}
/* Der Blatt-Stempel: der aufgeblühte dritte Punkt der Ellipse, klein
   unten rechts — die Logo-Erzählung genau dort, wo gerettet wurde. */
.karte__stempel {
    position: absolute;
    right: 1.4rem;
    bottom: 1.15rem;
    width: 0.85rem;
    height: auto;
}
.karte--vollzug .karte__fuss { padding-right: 2rem; }
.karte--vollzug .karte__zeile { font-size: 1.2rem; }
.karte--vollzug .karte__stamm { color: var(--bernstein); font-weight: 560; }
.karte--vollzug .karte__wert { color: var(--papier); }
.karte--vollzug .karte__bericht {
    font-family: var(--serif);
    font-weight: 340;
    font-size: 1.02rem;
    line-height: 1.55;
    color: rgba(246, 244, 238, 0.88);
    margin-top: 0.6rem;
}
/* Follow-up-Bausteine: „Erster Schritt" + „Zwei Wochen später" (Systemtext,
   in der Sprache des Beitrags — die Karte ist ein geschlossenes Objekt) */
.karte__fu {
    margin-top: 0.8rem;
    border-top: 1px solid rgba(246, 244, 238, 0.18);
    padding-top: 0.8rem;
}
.karte__fu p {
    font-family: var(--serif);
    font-weight: 340;
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgba(246, 244, 238, 0.88);
    margin-bottom: 0.35rem;
}
.karte__fu p:last-child { margin-bottom: 0; }
/* started: ehrlicher Zwischenstand auf der hellen Wunschkarte */
.karte__fu--wunsch { border-top-color: var(--linie); }
.karte__fu--wunsch p { color: var(--gedeckt); }

.karte--vollzug .karte__dauer {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bernstein);
    margin-top: 0.8rem;
}
.karte--vollzug .karte__klammer {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 340;
    font-size: 0.94rem;
    color: var(--blatt);
    margin-top: 0.9rem;
}
.karte--vollzug .karte__fuss {
    color: rgba(246, 244, 238, 0.6);
    border-top-color: rgba(246, 244, 238, 0.18);
}
.karte--vollzug .karte__fuss .tr { color: var(--bernstein); }

/* Die offene Karte am Ende der Wand: sieht aus wie ein noch nicht
   beschriebener Zettel und führt zum Formular — die Wand lädt selbst ein. */
.karte--einladung {
    display: block;
    background: transparent;
    border: 1.5px dashed var(--bernstein);
    box-shadow: none;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
/* Der leere Zettel ist noch nicht beschrieben — und noch nicht geknickt */
.karte--einladung::after { content: none; }
.karte--einladung .karte__fuss--frage {
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--pinie);
    border-top-style: dashed;
}
.karte--einladung:hover,
.karte--einladung:focus-visible {
    background: var(--karte);
    border-style: solid;
}

/* ---------- Ortstermin-Karte: Flughöhen-Badge + Link zur Folge ---------- */
/* Der Zusatz sitzt unter den drei Zeilen, vor dem Fuß. Badge nach dem
   Vorbild der Dauer-Zeile (klein, versal), aber in Bernstein-tief, damit
   er auf der hellen Karte AA-Kontrast hält; keine neuen Farben. */
.karte__ortstermin {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    margin-top: 0.9rem;
}
.karte__zoom {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    /* bewusst KEIN uppercase: Einheiten bleiben klein (700 km, 1 m) */
    color: var(--bernstein-tief);
    white-space: nowrap;
}
.karte--vollzug .karte__zoom { color: var(--bernstein); }
.karte__ortslink {
    font-family: var(--sans);
    font-size: 0.9rem;
    color: var(--gruen-tief);
}
.karte--vollzug .karte__ortslink { color: var(--blatt); }

/* ---------- Trenner: die drei Punkte als Gestaltungselement ---------- */
.trenner {
    display: flex;
    justify-content: center;
    padding: 1.6rem 0;
    border: 0;
    user-select: none;
}
.trenner span {
    font-family: var(--serif);
    font-size: 2.2rem;
    line-height: 0.5;
    letter-spacing: 0.35em;
    color: var(--bernstein);
}

/* ===================================================================
   Formular — man schreibt visuell schon „seine Karte"
   =================================================================== */
.sagen { padding: 1rem 0 4.5rem; }
.sagen__titel {
    font-family: var(--serif);
    font-weight: 560;
    font-size: clamp(1.7rem, 4.5vw, 2.4rem);
    letter-spacing: -0.015em;
    margin-bottom: 0.5rem;
}
.sagen__intro {
    color: var(--gedeckt);
    margin-bottom: 1.75rem;
    max-width: 32rem;
}
.formkarte {
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 1.75rem 1.6rem;
    box-shadow: 0 1px 3px rgba(22, 48, 42, 0.05);
}
.formkarte fieldset { border: 0; }
.formzeile {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-family: var(--serif);
    font-size: 1.16rem;
    margin-bottom: 1.1rem;
}
.formzeile label {
    color: var(--gedeckt);
    font-weight: 380;
    white-space: nowrap;
}
.formzeile input, .formzeile textarea {
    flex: 1 1 12rem;
    font-family: var(--serif);
    font-size: 1.16rem;
    font-weight: 560;
    color: var(--pinie);
    background: transparent;
    border: 0;
    border-bottom: 2px dashed var(--linie);
    padding: 0.15rem 0.1rem 0.3rem;
    border-radius: 0;
}
.formzeile input:focus, .formzeile textarea:focus {
    outline: none;
    border-bottom-color: var(--bernstein);
    border-bottom-style: solid;
}
.formzeile input::placeholder { color: var(--bernstein-tief); opacity: 0.8; }
.formhinweis {
    font-family: var(--sans);
    font-size: 0.8rem;
    color: var(--gedeckt);
    flex-basis: 100%;
    margin-top: -0.75rem;
    margin-bottom: 1.1rem;
}

/* Funktionale Angaben unter dem Dreizeiler */
.formmeta {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--linie);
}
@media (min-width: 640px) { .formmeta { grid-template-columns: 1fr 1fr; } }
.formmeta__feld label {
    display: block;
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 650;
    margin-bottom: 0.3rem;
}
.formmeta__feld .opt {
    font-weight: 400;
    color: var(--gedeckt);
}
.formmeta__feld input {
    width: 100%;
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--pinie);
    background: #fff;
    border: 1px solid var(--linie);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
}
.formmeta__feld input:focus { outline: none; border-color: var(--bernstein); box-shadow: 0 0 0 3px rgba(232, 161, 60, 0.25); }
.formmeta__feld--breit { grid-column: 1 / -1; }
.formmeta__hinweis {
    font-size: 0.8rem;
    color: var(--gedeckt);
    margin-top: 0.35rem;
}

.formzustimmung {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    margin-top: 1.5rem;
    font-size: 0.92rem;
    line-height: 1.5;
}
.formzustimmung input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    accent-color: var(--gruen);
    flex-shrink: 0;
}

.formabsenden {
    margin-top: 1.6rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.formabsenden button {
    background: var(--bernstein);
    color: var(--pinie);
    font-family: var(--sans);
    font-size: 1.05rem;
    font-weight: 650;
    border: 0;
    padding: 0.85rem 1.9rem;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.formabsenden button:hover, .formabsenden button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(22, 48, 42, 0.18);
}
.formabsenden .sichtung {
    font-size: 0.8rem;
    color: var(--gedeckt);
    max-width: 22rem;
}
.formfuss {
    font-size: 0.78rem;
    color: var(--gedeckt);
    margin-top: 1.25rem;
}

/* Fehlermeldung (Server-Fallback; Browser-Validierung fängt das meiste) */
.formfehler {
    background: #FBEFDD;
    border: 1px solid var(--bernstein);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    font-size: 0.95rem;
    margin-bottom: 1.4rem;
}

/* Honeypot: für Menschen unsichtbar, für Bots ein normales Feld */
.feld-website {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* ===================================================================
   Stufe 3 — Maschinenraum
   =================================================================== */
.maschinenraum { padding: 1rem 0 3rem; }
.mr-abschnitt { margin-bottom: 0; }
.mr-abschnitt h2 {
    font-family: var(--serif);
    font-weight: 560;
    font-size: clamp(1.45rem, 3.5vw, 1.9rem);
    letter-spacing: -0.01em;
    margin-bottom: 0.9rem;
}
.mr-abschnitt p {
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--pinie-weich);
    max-width: 36rem;
    margin-bottom: 1.1rem;
}
.mr-abschnitt p:last-child { margin-bottom: 0; }
/* Die Schlussfrage jedes Abschnitts trägt den Ton — leicht abgesetzt */
.mr-abschnitt p:last-child:not(:only-child) {
    font-family: var(--serif);
    font-size: 1.1rem;
    color: var(--pinie);
}

/* ===================================================================
   Footer
   =================================================================== */
.fuss {
    background: var(--pinie);
    color: rgba(246, 244, 238, 0.85);
    padding: 2.75rem 0 2.5rem;
    margin-top: 2rem;
    font-size: 0.88rem;
    text-align: center;
}
.fuss__signet { width: 44px; height: 26px; margin: 0 auto 1rem; overflow: visible; }
.fuss__projekt { max-width: 30rem; margin: 0 auto 1.25rem; line-height: 1.6; }
.fuss__zeile a { color: var(--blatt); }
.fuss__zeile a:hover, .fuss__zeile a:focus-visible { color: #fff; }
.fuss__zeile .tr { color: var(--bernstein); padding-inline: 0.45rem; letter-spacing: 0.1em; }
.fuss__recht { margin-top: 0.9rem; opacity: 0.65; }

/* ===================================================================
   Danke-Seite
   =================================================================== */
.danke {
    min-height: 100vh;   /* Fallback ohne svh-Support */
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.25rem;
}
.danke h1 {
    font-family: var(--serif);
    font-weight: 560;
    font-size: clamp(2.2rem, 8vw, 4rem);
    letter-spacing: -0.02em;
}
/* Signet läuft inline mit dem letzten Wort um (kein Flex — sonst
   erzwungener Umbruch bei schmalen Viewports) */
.danke h1 .hook__signet {
    display: inline-block;
    vertical-align: baseline;
    width: 0.95em;
    height: 0.48em;
    margin-left: 0.18em;
}
.danke__text {
    color: var(--pinie-weich);
    max-width: 28rem;
    margin-top: 1.5rem;
}
.danke__schritt {
    font-family: var(--serif);
    font-size: clamp(1.25rem, 3.5vw, 1.6rem);
    line-height: 1.5;
    max-width: 26rem;
    margin-top: 2.25rem;
}
.danke__zurueck { display: inline-block; margin-top: 2.5rem; font-family: var(--sans); }

/* Spiegel-Moment: der eigene erste Schritt, zurückzitiert als Karte */
.danke__spiegel {
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(22, 48, 42, 0.05);
    padding: 1.5rem 1.75rem;
    max-width: 30rem;
    margin-top: 2.25rem;
    text-align: left;
}
.danke__spiegel-intro {
    font-family: var(--sans);
    font-size: 0.9rem;
    color: var(--gedeckt);
    margin-bottom: 0.6rem;
}
.danke__spiegel-schritt {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 560;
    line-height: 1.45;
}
.danke__wann {
    font-family: var(--serif);
    font-size: clamp(1.25rem, 3.5vw, 1.6rem);
    line-height: 1.5;
    max-width: 26rem;
    margin-top: 2rem;
}
.danke__motto {
    font-family: var(--sans);
    font-size: 0.95rem;
    color: var(--pinie-weich);
    max-width: 28rem;
    margin-top: 1.5rem;
}
/* Einmalige Link-Anzeige (Einreichung ohne E-Mail) */
.danke__linkblock .danke__spiegel-intro { margin-bottom: 0.8rem; }
.danke__linkurl {
    font-family: var(--sans);
    font-size: 0.9rem;
    word-break: break-all;
    line-height: 1.5;
}

/* ===================================================================
   Aufnahmen vor Ort (aufnahmen.php) — die Seite hinter dem QR-Code
   Ruhige Lesespalte in der Farbwelt der Kampagne, aber ohne
   Karten-Metaphorik: Das hier ist kein Beitrag, sondern eine Auskunft.
   Sie wird auf einem fremden Handy im Stehen gelesen — kurze Abschnitte,
   klare Sprungmarken, kein Element, das erst erklärt werden muss.
   =================================================================== */
.aufnahmen { padding: 3.25rem 0 3rem; }
/* Kleine Wortmarke als Rückweg zur Wand — das Signet bleibt hier ruhig
   (keine Animation): Die Seite informiert, sie wirbt nicht. */
.aufnahmen__marke {
    display: inline-flex;
    align-items: baseline;
    column-gap: 0.18em;
    font-family: var(--serif);
    font-weight: 560;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--pinie);
    text-decoration: none;
    margin-bottom: 1.75rem;
}
.aufnahmen__marke:hover, .aufnahmen__marke:focus-visible { color: var(--gruen-tief); }
.aufnahmen__signet {
    width: 0.92em;
    height: 0.46em;
    overflow: visible;
    transform: translateY(0.04em);
}
.aufnahmen h1 {
    font-family: var(--serif);
    font-weight: 560;
    font-size: clamp(1.75rem, 6.5vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.aufnahmen__sub {
    color: var(--gedeckt);
    margin-top: 0.7rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid var(--linie);
}
.auf-abschnitt { margin-top: 2.1rem; }
.auf-abschnitt h2 {
    font-family: var(--serif);
    font-weight: 560;
    font-size: 1.2rem;
    color: var(--pinie);
    margin-bottom: 0.5rem;
}
.auf-abschnitt p, .auf-abschnitt li {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--pinie-weich);
    margin-bottom: 0.75rem;
}
.auf-abschnitt p:last-child, .auf-abschnitt li:last-child { margin-bottom: 0; }
.auf-abschnitt strong { color: var(--pinie); font-weight: 650; }
/* Die drei Punkte als Aufzählungszeichen — dasselbe „…" wie überall sonst */
.auf-abschnitt ul { list-style: none; }
.auf-abschnitt li { position: relative; padding-left: 1.35rem; }
.auf-abschnitt li::before {
    content: "…";
    position: absolute;
    left: 0;
    color: var(--bernstein-tief);
    letter-spacing: 0.1em;
}
.aufnahmen__mehr {
    margin-top: 2.5rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--linie);
    font-size: 0.93rem;
    color: var(--gedeckt);
}
.aufnahmen__stand { margin-top: 0.35rem; font-size: 0.85rem; color: var(--gedeckt); }