/* ============================================================
   SABRINAS WACHTELFARM — Anmeldeseite zur kostenlosen Checkliste
   Aufbau nach der Vorlage vom 17.08.2026.

   Weggelassen und warum:
   · Navigationspunkte zu Seiten, die es nicht gibt
   · Bewertungen — es gibt noch keine echten. Erfundene Zitate
     wären irreführende Werbung und widersprechen dem Briefing.
   ============================================================ */

:root {
  --sand:     #EAE0CB;
  --papier:   #F6F1E4;
  --papier-2: #FBF8F0;
  --tinte:    #33261C;
  --rinde:    #6B4A35;
  --eiblau:   #C2D9D2;
  --gruen:    #5E7A45;
  --rot:      #9B3D2E;

  /* Abgedunkeltes Markengrün für große Flächen mit heller Schrift.
     Das reine Grün käme dort nur auf 4,3 zu 1 Kontrast und wäre
     für Fließtext zu schwach. Diese Fassung erreicht 6,8 zu 1. */
  --gruen-tief: #445A33;

  --linie:      rgba(107,74,53,.20);
  --linie-zart: rgba(107,74,53,.11);

  --serif: "Newsreader", Georgia, serif;
  --sans:  "Source Sans 3", "Helvetica Neue", Arial, sans-serif;

  --t: 8px;
  --breit: 1160px;
  --schatten: 0 1px 2px rgba(51,38,28,.06), 0 12px 32px rgba(51,38,28,.10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0 0 calc(var(--t) * 2); }
a { color: var(--rinde); text-underline-offset: 3px; }
a:hover { color: var(--tinte); }
:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--serif); font-weight: 600;
  line-height: 1.16; letter-spacing: -.012em; margin: 0 0 calc(var(--t) * 2);
  text-wrap: balance;
}
h1 em, h2 em { font-style: normal; color: var(--gruen); }

.mitte { max-width: var(--breit); margin: 0 auto; padding: 0 calc(var(--t) * 3); }
.mittig { text-align: center; }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}


/* ---------- Knöpfe ---------- */

.btn {
  display: inline-block; font: inherit; font-weight: 600;
  padding: calc(var(--t) * 1.7) calc(var(--t) * 3);
  border: none; border-radius: 4px; cursor: pointer;
  text-decoration: none; text-align: center;
  transition: background-color .15s ease, transform .08s ease;
}
.btn:active { transform: translateY(1px); }
.btn-rot   { background: var(--rot);   color: var(--papier); }
.btn-rot:hover   { background: #85321f; color: var(--papier); }
.btn-gruen { background: var(--gruen); color: var(--papier); width: 100%;
             letter-spacing: .04em; text-transform: uppercase; font-size: .95rem; }
.btn-gruen:hover { background: #4b6337; }
.btn.gross { padding: calc(var(--t) * 2.2) calc(var(--t) * 4.5); font-size: 1.05rem; }


/* ---------- Kopfleiste ---------- */

.kopfleiste { background: var(--papier-2); border-bottom: 1px solid var(--linie-zart); }
.kopfleiste-innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--t) * 2); padding-block: calc(var(--t) * 1.75);
}

.logo, .fuss-logo { display: flex; align-items: center; gap: calc(var(--t) * 1.5); text-decoration: none; }
.logo-zweig { width: 46px; height: 20px; color: var(--gruen); flex: 0 0 46px; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-name { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--gruen); }
.logo-zusatz { font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--rinde); margin-top: 3px; }


/* ---------- Kopfbereich ----------
   Foto als Hintergrund, Text und Formular darüber. Der Schleier
   sorgt dafür, dass die Schrift auf jedem Foto lesbar bleibt. */

.held { position: relative; overflow: hidden; min-height: 88vh; display: grid; align-items: center; }

.held-bild { position: absolute; inset: 0; z-index: 0; }
.held-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 52%; }
.held-bild::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(80deg, rgba(246,241,228,.93) 0%, rgba(246,241,228,.82) 34%, rgba(246,241,228,.62) 62%, rgba(246,241,228,.30) 100%),
    linear-gradient(to bottom, rgba(246,241,228,.30), rgba(51,38,28,.10));
}

.held-inhalt {
  position: relative; z-index: 1;
  display: grid; gap: calc(var(--t) * 5);
  padding-block: calc(var(--t) * 7) calc(var(--t) * 8);
  align-items: center;
}
@media (min-width: 900px) {
  .held-inhalt { grid-template-columns: .86fr 1fr; gap: calc(var(--t) * 7); }
  .held-text     { order: 2; }
  .held-formular { order: 1; }
}

.ueberzeile {
  font-family: var(--serif); font-style: italic; font-size: 1.35rem;
  color: var(--rinde); margin: 0 0 calc(var(--t) * .5);
}

.held h1 { font-size: clamp(2.5rem, 6.4vw, 4.15rem); line-height: 1.02; margin-bottom: calc(var(--t) * 2.5); }

.held-unter {
  font-family: var(--serif); font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: var(--tinte); margin-bottom: calc(var(--t) * 3.5);
}
.held-unter strong { color: var(--rot); font-weight: 600; }


/* ---------- Hakenliste ---------- */

.haken-liste { list-style: none; margin: 0; padding: 0; }
.haken-liste li {
  display: flex; align-items: flex-start; gap: calc(var(--t) * 1.5);
  margin-bottom: calc(var(--t) * 1.5); font-size: 1.02rem;
}
.haken-liste svg {
  flex: 0 0 23px; width: 23px; height: 23px; margin-top: 1px;
  fill: none; stroke: var(--gruen); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}


/* ---------- Formularkarte ---------- */

.formular-karte {
  background: var(--papier-2);
  border: 1px solid var(--linie-zart);
  border-radius: 8px;
  padding: calc(var(--t) * 3);
  box-shadow: var(--schatten);
}

/* Gefächerte Checkliste über dem Formular.
   Vorne die echte erste Seite, dahinter zwei leere Blätter als
   Papierkanten — so sieht ein Stapel aus, ohne dass dasselbe
   Bild dreimal gezeigt wird. */
.karte-faecher {
  position: relative;
  height: 210px;
  margin: calc(var(--t) * 1) 0 calc(var(--t) * 3.5);
  display: grid; place-items: center;
}

.karte-faecher .blatt-a,
.karte-faecher .blatt-leer {
  position: absolute; top: 0;
  width: 150px; height: 208px;
  border: 1px solid var(--linie);
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(51,38,28,.10), 0 10px 24px rgba(51,38,28,.16);
}

.karte-faecher .blatt-leer { background: var(--papier); }
.karte-faecher .blatt-c { transform: rotate(-9deg)   translate(-26px, 6px); }
.karte-faecher .blatt-b { transform: rotate(-4.5deg) translate(-13px, 3px); }

.karte-faecher .blatt-a {
  object-fit: cover; object-position: top center;
  background: var(--papier);
  transform: rotate(1.2deg);
}

.formular-karte h2 { font-size: 1.75rem; margin-bottom: calc(var(--t) * 1); }
.formular-karte h2 em { color: var(--rot); }
.karte-unter { color: var(--rinde); font-size: .95rem; margin-bottom: calc(var(--t) * 2.5); }

.formular-karte input[type="email"],
.formular-karte input[type="text"] {
  width: 100%; font: inherit; font-size: 1rem;
  padding: calc(var(--t) * 1.75) calc(var(--t) * 2);
  margin-bottom: calc(var(--t) * 1.5);
  color: var(--tinte); background: var(--papier);
  border: 1px solid var(--linie); border-radius: 5px;
}
.formular-karte input::placeholder { color: rgba(107,74,53,.55); }
.formular-karte input:focus { outline: none; border-color: var(--gruen); box-shadow: 0 0 0 3px rgba(94,122,69,.16); }

.zustimmung {
  display: flex; gap: calc(var(--t) * 1.25); align-items: flex-start;
  margin-top: calc(var(--t) * 2); font-size: .87rem; color: var(--rinde); cursor: pointer;
}
.zustimmung input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--gruen); }
.klein { font-size: .82rem; color: var(--rinde); margin: calc(var(--t) * 1.25) 0 0; }

.erfolg {
  margin-top: calc(var(--t) * 2); padding: calc(var(--t) * 2.5);
  background: var(--eiblau); border-radius: 5px;
}
.erfolg p { margin: 0; }


/* ---------- Warum ---------- */

.warum { background: var(--sand); padding-block: calc(var(--t) * 8); }
.warum h2 { font-size: clamp(1.7rem, 3.4vw, 2.35rem); margin-bottom: calc(var(--t) * 5); }

.vier { display: grid; gap: calc(var(--t) * 4); }
@media (min-width: 640px)  { .vier { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .vier { grid-template-columns: repeat(4, 1fr); } }

.saeule { text-align: center; }
.saeule .kreis {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--gruen); color: var(--papier);
  display: grid; place-items: center; margin: 0 auto calc(var(--t) * 2);
}
.saeule .kreis svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.saeule h3 { font-size: 1.16rem; margin-bottom: calc(var(--t) * 1); }
.saeule p { font-size: .95rem; color: var(--rinde); margin: 0; }


/* ---------- Abschluss ---------- */

.abschluss {
  background: var(--sand);
  border-top: 1px solid var(--linie-zart);
  padding-block: calc(var(--t) * 8);
}
.abschluss-innen { text-align: center; }
.abschluss h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.abschluss p { color: var(--rinde); margin-bottom: calc(var(--t) * 3.5); }


/* ---------- Fußzeile ---------- */

.fuss { background: var(--gruen-tief); color: var(--papier); }
.fuss-raster {
  display: grid; gap: calc(var(--t) * 4);
  padding-block: calc(var(--t) * 6);
}
@media (min-width: 780px) { .fuss-raster { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; } }

.fuss .logo-zweig { color: var(--eiblau); }
.fuss .logo-zusatz { color: rgba(246,241,228,.72); }
.fuss .logo-name { color: var(--papier); }
.fuss .logo-zusatz { color: rgba(246,241,228,.7); }

.fuss h4 { font-size: 1rem; color: var(--papier); margin-bottom: calc(var(--t) * 1.5); }
.fuss a { display: block; color: rgba(246,241,228,.82); text-decoration: none; font-size: .93rem; margin-bottom: calc(var(--t) * .75); }
.fuss a:hover { color: var(--papier); text-decoration: underline; }


/* ---------- Kleine Bildschirme ---------- */

@media (max-width: 620px) {
  body { font-size: 16px; }
  .kopfleiste .btn { padding: calc(var(--t) * 1.25) calc(var(--t) * 2); font-size: .9rem; }
  .logo-name { font-size: 1.25rem; }
  .held-bild img { object-position: 42% 55%; }
  .held-bild::after {
    background:
      linear-gradient(to bottom, rgba(246,241,228,.95) 0%, rgba(246,241,228,.9) 55%, rgba(246,241,228,.94) 100%);
  }
  .karte-faecher { height: 178px; }
  .karte-faecher .blatt-a,
  .karte-faecher .blatt-leer { width: 126px; height: 175px; }
  .karte-faecher .blatt-c { transform: rotate(-9deg) translate(-21px, 5px); }
  .karte-faecher .blatt-b { transform: rotate(-4.5deg) translate(-11px, 3px); }
  .siegel { width: 64px; height: 64px; font-size: .95rem; right: -8px; bottom: -14px; }
  .feld { padding: calc(var(--t) * 3); }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Spalten im Kopfbereich */
.held-text { min-width: 0; }
.held-formular { min-width: 0; }

/* ============================================================
   HINTERGRUNDBÄNDER MIT PARALLAX
   Jeder Abschnitt mit data-parallax hat ein Foto im Hintergrund,
   das sich beim Scrollen langsamer bewegt als der Inhalt.
   Das Bild ist absichtlich übergroß, damit beim Verschieben
   oben und unten keine Kanten auftauchen.
   ============================================================ */

.band { position: relative; overflow: hidden; }
.band-inhalt { position: relative; z-index: 1; }

.band-bild {
  position: absolute;
  left: 0; right: 0;
  top: -14%; bottom: -14%;   /* Reserve für die Verschiebung */
  z-index: 0;
  will-change: transform;
}
.band-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Der Schleier über den Bändern — ohne ihn wäre nichts lesbar */
.inhalt-block .band-bild::after,
.abschluss .band-bild::after {
  content: ""; position: absolute; inset: 0;
}
.abschluss .band-bild::after { background: rgba(234,224,203,.88); }
.inhalt-block .band-bild::after { background: rgba(246,241,228,.93); }

/* Bänder brauchen keinen eigenen Hintergrund mehr */
.abschluss { background: transparent; }


/* Die Karten im Doppelbereich heben sich jetzt vom Foto ab */


@media (prefers-reduced-motion: reduce) {
  .band-bild { transform: none !important; }
}


/* ============================================================
   ZWEI ABSCHNITTE ÜBER DIE VOLLE BREITE

   Zu den Proportionen: Die Bilder sind hier bewusst kleiner als
   die Textspalte. Sie sollen belegen, worum es geht — die
   Entscheidung trifft der Text. Bilder in Textbreite ziehen den
   Blick weg vom Inhalt und wirken wie eine Bildergalerie.
   Bildspalte rund ein Drittel, Text zwei Drittel.
   ============================================================ */

.inhalt-block, .wer-block { padding-block: calc(var(--t) * 9); }
.wer-block { background: var(--papier); }

.breit-raster {
  display: grid;
  gap: calc(var(--t) * 4);
  align-items: center;
  justify-items: start;
}

/* Ab Tablet: Das Bild ist genauso hoch wie der Text daneben.
   Dadurch stimmt das Verhältnis von selbst — auch wenn der Text
   später länger oder kürzer wird. Feste Bildmaße müssten sonst
   bei jeder Textänderung nachgezogen werden. */
@media (min-width: 820px) {
  .breit-raster {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: calc(var(--t) * 7);
    align-items: stretch;
  }
  .breit-raster.gedreht { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
  .breit-raster.gedreht > figure { order: 2; }

  .breit-raster > figure {
    aspect-ratio: auto;
    max-width: none;
    height: 100%;
    min-height: 270px;
    max-height: 420px;
    align-self: stretch;
  }
}

/* Beide Bildrahmen gleich gebaut, nur der Ausschnitt unterscheidet sich */
.block-bild, .portraet {
  margin: 0;
  width: 100%;
  max-width: 320px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--linie-zart);
  box-shadow: 0 1px 2px rgba(51,38,28,.07), 0 8px 22px rgba(51,38,28,.11);
}
.block-bild img, .portraet img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Hochformat-Aufnahme, moderat beschnitten */
.block-bild { aspect-ratio: 5 / 6; }
.block-bild img { object-position: 50% 46%; }

/* Querformat-Porträt, Ausschnitt auf dem Gesicht */
.portraet { aspect-ratio: 1 / 1; }
.portraet img {
  object-position: 50% 26%;
  /* Aufnahme ist etwas dunkel — in der Darstellung aufgehellt,
     damit die Originaldatei unangetastet bleibt. */
  filter: brightness(1.13) contrast(1.03) saturate(1.02);
}

.klein-kursiv { font-size: 1.05rem; margin-bottom: calc(var(--t) * .5); }

.inhalt-block h2, .wer-block h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); }
.inhalt-block .haken-liste li { font-size: 1rem; }
.wer-block p { color: var(--rinde); max-width: 62ch; }
/* Der Abschluss unter den sechs Punkten — darf auffallen,
   er nennt das Format und damit den greifbaren Gegenwert. */
.zusatz {
  color: var(--rot);
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  letter-spacing: -.01em;
  margin: calc(var(--t) * 2.5) 0 0;
}


/* ---------- Ablauf in drei Schritten ----------
   Steht direkt unter dem Formular und beantwortet die Frage,
   die vor jedem Eintragen im Kopf ist: Was passiert dann? */

.ablauf {
  list-style: none;
  display: flex;
  gap: calc(var(--t) * 1);
  margin: calc(var(--t) * 2.5) 0 0;
  padding: calc(var(--t) * 2) 0 0;
  border-top: 1px solid var(--linie-zart);
}
.ablauf li {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--t) * .75);
  text-align: center;
  font-size: .78rem; line-height: 1.3; color: var(--rinde);
}
.ablauf span {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--eiblau); color: var(--tinte);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: .82rem;
}

/* ---------- Rechtstexte: Impressum und Datenschutz ---------- */

.rechtstext { padding-block: calc(var(--t) * 7) calc(var(--t) * 9); }
.rechtstext h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin-bottom: calc(var(--t) * 4); }

.rechts-karte {
  background: var(--papier-2);
  border: 1px solid var(--linie-zart);
  border-radius: 8px;
  padding: calc(var(--t) * 4);
  max-width: 760px;
  box-shadow: var(--schatten);
}
.rechts-karte h2 {
  font-size: 1.2rem; color: var(--gruen);
  margin: calc(var(--t) * 3.5) 0 calc(var(--t) * 1);
}
.rechts-karte h2:first-child { margin-top: 0; }
.rechts-karte ul { margin: 0 0 calc(var(--t) * 2); padding-left: calc(var(--t) * 2.5); }
.rechts-karte li { margin-bottom: calc(var(--t) * .75); }

.hinweis-kasten {
  background: var(--eiblau);
  border-radius: 8px;
  padding: calc(var(--t) * 3.5);
  max-width: 760px;
  margin: calc(var(--t) * 3) 0;
}
.hinweis-kasten h3 { font-size: 1.15rem; margin-bottom: calc(var(--t) * 1.5); }
.hinweis-kasten ul { margin: 0 0 calc(var(--t) * 1.5); padding-left: calc(var(--t) * 2.5); }
.hinweis-kasten li { margin-bottom: calc(var(--t) * .75); }
.hinweis-kasten .klein { color: var(--rinde); }

.zurueck { margin-top: calc(var(--t) * 4); }

/* ============================================================
   SECHS PUNKTE — was in der Checkliste steht

   Keine Kästen: die Illustrationen stehen frei, darunter der Text.
   Sie haben durchsichtigen Hintergrund, brauchen also keinen
   Rahmen, um sich abzuheben.

   Bewegung: beim Darüberfahren hebt sich der Punkt leicht an.
   Bewusst kein Karussell — bewegte Inhalte kann man nicht lesen,
   auf dem Handy gibt es kein Darüberfahren, und die Aufmerksamkeit
   soll beim Formular bleiben.
   ============================================================ */

.unter-h2 {
  color: var(--rinde);
  margin: calc(var(--t) * -1) auto calc(var(--t) * 6);
  max-width: 46ch;
}

.punkt-raster {
  display: grid;
  gap: calc(var(--t) * 5) calc(var(--t) * 4);
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .punkt-raster { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .punkt-raster { grid-template-columns: repeat(3, 1fr); } }

.karte-punkt {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  text-align: center;
  padding: 0 calc(var(--t) * 1);
  transition: transform .22s ease;
}

.karte-bild {
  position: relative;
  aspect-ratio: 3 / 2;
  max-width: 260px;
  margin: 0 auto calc(var(--t) * 2);
  background: none;
  border: none;
  display: grid; place-items: center;
  transition: transform .22s ease;
}
.karte-bild img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  /* Schatten folgt der Silhouette der Zeichnung, nicht dem
     rechteckigen Rahmen — die Illustrationen haben einen
     durchsichtigen Hintergrund, ein Kastenschatten wuerde
     daneben in der Luft haengen. */
  filter:
    drop-shadow(0 2px 3px rgba(51, 38, 28, .16))
    drop-shadow(0 10px 18px rgba(51, 38, 28, .14));
  transition: filter .22s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .karte-punkt:hover .karte-bild img {
    filter:
      drop-shadow(0 3px 5px rgba(51, 38, 28, .18))
      drop-shadow(0 16px 26px rgba(51, 38, 28, .17));
  }
}

.karte-punkt h3 {
  font-size: 1.18rem;
  margin: 0 0 calc(var(--t) * 1);
}
.karte-punkt p {
  font-size: .94rem; color: var(--rinde);
  margin: 0 auto;
  max-width: 30ch;
}

/* Die einzige Bewegung hier: der Punkt hebt sich unter dem Zeiger */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .karte-punkt:hover { transform: translateY(-5px); }
  .karte-punkt:hover .karte-bild { transform: scale(1.045); }
}

.zusatz.mittig { margin-top: calc(var(--t) * 4); }

/* Der Abschnitt mit den sechs Punkten steht jetzt auf ruhiger Fläche.
   Ohne Kästen brauchen die Illustrationen einen klaren Grund —
   ein Foto dahinter würde sie zerreißen. */
.inhalt-block { background: var(--sand); }

/* ============================================================
   BILDBAND ÜBER DIE VOLLE BREITE

   Bewusst ohne Schleier: Hier steht kein Text darauf, also darf
   das Foto in voller Farbe wirken. Es trennt zwei ruhige
   Abschnitte und gibt der Seite einmal Luft.
   Es scrollt langsamer mit, wie die anderen Hintergründe auch.
   ============================================================ */

.bildband {
  position: relative;
  overflow: hidden;
  height: clamp(340px, 58vh, 680px);
}
.bildband .band-bild img { object-position: 50% 82%; }

/* Weiche Kanten oben und unten, damit das Band nicht wie ein
   ausgeschnittener Streifen wirkt, sondern in die Seite übergeht */
.bildband::before,
.bildband::after {
  content: ""; position: absolute; left: 0; right: 0;
  height: 46px; z-index: 1; pointer-events: none;
}
.bildband::before { top: 0;    background: linear-gradient(to bottom, var(--sand), transparent); }
.bildband::after  { bottom: 0; background: linear-gradient(to top,    var(--sand), transparent); }

@media (max-width: 620px) {
  .bildband { height: clamp(230px, 40vh, 340px); }
}