/* ===================================================================
   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: 14px;
}

/* ---------- Reset / Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    scroll-behavior: smooth;
    -webkit-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 {
    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);
}
.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: 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 unter der Wand */
.wand__hinweis {
    text-align: center;
    font-family: var(--sans);
    font-size: 0.8rem;
    color: var(--gedeckt);
    margin-top: 1.5rem;
}

.karte {
    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);
}
.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);
}
.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); }

/* ---------- 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: 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;
    display: flex;
    align-items: baseline;
    gap: 0.18em;
}
.danke h1 .hook__signet { width: 0.95em; height: 0.48em; }
.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;
}