/* Landingpage — eigenes Stylesheet im Design-System „Tanne & Terrakotta“.
   Selbstständig (keine Abhängigkeit von app.css), Fonts werden geteilt. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/fraunces-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
}

:root {
  --tanne: #2f4a3a;
  --tanne-dunkel: #23392c;
  --tanne-tief: #182820;
  --terrakotta: #c05f33;
  --terrakotta-dunkel: #a34d27;
  --sand: #f6f2e9;
  --karte: #ffffff;
  --flaeche: #f1ecdf;
  --linie: #e4ddcc;
  --text: #2b2822;
  --text2: #57534a;
  --muted: #8b8577;
  --schrift-kopf: 'Fraunces', Georgia, serif;
  --schrift-text: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--schrift-text); font-size: 16px; line-height: 1.6; background: var(--sand); color: var(--text); }
img, svg { max-width: 100%; }
.zeile { max-width: 1060px; margin: 0 auto; padding: 0 20px; }

h1, h2, h3 { font-family: var(--schrift-kopf); line-height: 1.2; color: var(--tanne); margin: 0 0 14px; }
h2 { font-size: clamp(26px, 4vw, 34px); font-weight: 600; }
h3 { font-size: 18px; font-weight: 600; }
p { margin: 0 0 14px; }

.knopf { display: inline-block; padding: 14px 24px; border-radius: 10px; font-weight: 600; font-size: 15.5px; text-decoration: none; transition: background .15s, transform .1s; }
.knopf.primaer { background: var(--terrakotta); color: #fff8f0; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); }
.knopf.primaer:hover { background: var(--terrakotta-dunkel); }
.knopf.zart { background: rgba(255, 255, 255, .12); color: #f4efe4; border: 1px solid rgba(255, 255, 255, .35); }
.knopf.zart:hover { background: rgba(255, 255, 255, .2); }
.knopf.gruen { background: var(--tanne); color: #fdfbf5; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16); }
.knopf.gruen:hover { background: var(--tanne-dunkel); }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--tanne-tief); border-bottom: 3px solid var(--terrakotta); }
.kopf .zeile { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }
.marke { font-family: var(--schrift-kopf); font-size: 21px; font-weight: 600; color: #fbf8f0; text-decoration: none; letter-spacing: .2px; }
.kopf nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kopf nav a { color: #e9e2d0; text-decoration: none; font-size: 14.5px; font-weight: 500; padding: 8px 12px; border-radius: 8px; }
.kopf nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.kopf nav .knopf { padding: 9px 16px; font-size: 14px; }
.menue-schalter { display: none; }
.menue-knopf { display: none; cursor: pointer; user-select: none; color: #f4efe4; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; padding: 8px 14px; font-size: 14.5px; font-weight: 600; }
@media (max-width: 860px) {
  .menue-knopf { display: inline-flex; align-items: center; gap: 8px; }
  .kopf nav { display: none; width: 100%; flex-direction: column; align-items: stretch; padding: 8px 0 12px; gap: 2px; }
  .kopf nav a { padding: 12px; font-size: 16px; }
  .kopf nav .knopf { text-align: center; margin-top: 8px; }
  .menue-schalter:checked ~ nav { display: flex; }
}

/* ---------- Hero ---------- */
.hero { background: linear-gradient(175deg, var(--tanne-tief) 0%, var(--tanne-dunkel) 70%, var(--tanne) 100%); color: #f2edde; padding: 72px 0 88px; }
.hero .zeile { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.hero h1 { color: #fbf8ef; font-size: clamp(32px, 5vw, 48px); font-weight: 600; margin-bottom: 18px; }
.hero h1 em { font-style: normal; color: #eba170; }
.hero p.gross { font-size: clamp(16px, 2vw, 19px); color: #d9d2bd; max-width: 34em; }
.hero .aktionen { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hero .klein { font-size: 13px; color: #b9b19a; margin-top: 14px; }
@media (max-width: 860px) {
  .hero { padding: 48px 0 60px; }
  .hero .zeile { grid-template-columns: 1fr; gap: 34px; }
}

/* Rabatt-Banner (zeitlich begrenzte Aktion) */
.aktion { display: inline-flex; align-items: center; gap: 10px; background: rgba(235, 161, 112, .14); border: 1px solid rgba(235, 161, 112, .45); color: #f2c9a8; border-radius: 999px; padding: 7px 16px; font-size: 13.5px; font-weight: 600; margin-bottom: 20px; }
.aktion .punkt { width: 8px; height: 8px; border-radius: 50%; background: #eba170; flex: none; }

/* Hero-Illustration: stilisierte Termin-Karten */
.illu { display: grid; gap: 12px; }
.illu .karte { background: #fffdf8; color: var(--text); border-radius: 14px; padding: 16px 18px; box-shadow: 0 10px 30px rgba(10, 20, 14, .35); display: flex; gap: 12px; align-items: center; }
.illu .karte.versetzt1 { transform: translateX(22px); opacity: .96; }
.illu .karte.versetzt2 { transform: translateX(44px); opacity: .92; }
.illu .icon { width: 40px; height: 40px; border-radius: 10px; background: var(--flaeche); display: flex; align-items: center; justify-content: center; font-size: 19px; flex: none; }
.illu .icon.gruen { background: #e9f1e4; }
.illu b { display: block; font-size: 14.5px; }
.illu span { font-size: 12.5px; color: var(--muted); }
.illu .haken { margin-left: auto; color: #33683c; font-weight: 700; font-size: 18px; }
@media (max-width: 860px) {
  .illu .karte.versetzt1 { transform: translateX(12px); }
  .illu .karte.versetzt2 { transform: translateX(24px); }
}

/* ---------- Abschnitte ---------- */
section { padding: 68px 0; }
section.hell { background: var(--karte); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.vorzeile { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--terrakotta); margin-bottom: 8px; }
.einleitung { max-width: 44em; color: var(--text2); }

/* Problem / Lösung */
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 30px; }
@media (max-width: 760px) { .zwei-spalten { grid-template-columns: 1fr; } }
.problem-box, .loesung-box { border-radius: 14px; padding: 26px; }
.problem-box { background: var(--flaeche); border: 1px solid var(--linie); }
.loesung-box { background: var(--tanne); color: #eee8d8; }
.loesung-box h3 { color: #fbf8ef; }
.problem-box ul, .loesung-box ul { margin: 0; padding: 0; list-style: none; }
.problem-box li, .loesung-box li { padding: 7px 0 7px 30px; position: relative; font-size: 15px; }
.problem-box li::before { content: '✕'; position: absolute; left: 4px; color: #a5573a; font-weight: 700; }
.loesung-box li::before { content: '✓'; position: absolute; left: 4px; color: #a8cf9a; font-weight: 700; }

/* ---------- 6-Szenen-Explainer (reines CSS, keine Assets) ----------
   Sechs Szenen-Karten liegen im Grid übereinander und blenden sich per Keyframe-
   Crossfade nacheinander ein (24s-Schleife, je Szene 4s). Nur opacity/transform
   werden animiert (Compositor-freundlich, keine Layout-Arbeit). Bei
   prefers-reduced-motion: alle sechs Szenen statisch nebeneinander, keine Animation. */
.story .buehne { display: grid; max-width: 560px; margin: 34px auto 0; }
.story .szene {
  grid-column: 1; grid-row: 1;
  background: var(--karte); border: 1px solid var(--linie); border-radius: 16px;
  padding: 22px 24px 18px; box-shadow: 0 10px 30px rgba(43, 40, 34, .08);
  opacity: 0; pointer-events: none;
  animation: szenenwechsel 24s infinite;
}
.story .s1 { animation-delay: 0s; }
.story .s2 { animation-delay: 4s; }
.story .s3 { animation-delay: 8s; }
.story .s4 { animation-delay: 12s; }
.story .s5 { animation-delay: 16s; }
.story .s6 { animation-delay: 20s; }
@keyframes szenenwechsel {
  0% { opacity: 0; transform: translateY(10px); }
  3% { opacity: 1; transform: none; }
  16.67% { opacity: 1; transform: none; }
  19.5% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; }
}

.story .bild {
  position: relative; height: 150px; border-radius: 12px; background: var(--flaeche);
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-bottom: 14px; overflow: hidden;
}
.story .fig { font-size: 58px; line-height: 1; }
.story .deko { position: absolute; font-size: 24px; line-height: 1; }
.story .titel { font-family: var(--schrift-kopf); font-weight: 600; color: var(--tanne); font-size: 16px; margin: 0 0 4px; }
.story .text { font-size: 14.5px; color: var(--text2); margin: 0; min-height: 3.2em; }

/* Szene 1: fliegende Mails + klingelndes Telefon */
.story .f1 { top: 16px; left: 14%; animation: schweben 2.6s ease-in-out infinite alternate; }
.story .f2 { top: 26px; right: 16%; animation: schweben 2.2s .4s ease-in-out infinite alternate; }
.story .f3 { bottom: 20px; left: 22%; animation: schweben 2.9s .8s ease-in-out infinite alternate; }
.story .tel { bottom: 14px; right: 14%; font-size: 30px; transform-origin: 50% 90%; animation: klingeln 1.4s infinite; }
@keyframes schweben { from { transform: translateY(5px); opacity: .55; } to { transform: translateY(-6px); opacity: 1; } }
@keyframes klingeln {
  0%, 55%, 100% { transform: rotate(0); }
  10% { transform: rotate(-16deg); } 25% { transform: rotate(12deg); } 40% { transform: rotate(-8deg); }
}

/* Szene 2: Idee + Funkeln */
.story .idee { top: 18px; left: 24%; font-size: 30px; animation: schweben 2.4s ease-in-out infinite alternate; }
.story .glanz { top: 30px; right: 22%; animation: funkeln 1.8s infinite; }
@keyframes funkeln { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* Szene 3: Formularzeilen fuellen sich */
.story .formzeilen { display: flex; flex-direction: column; gap: 9px; width: 110px; }
.story .formzeilen i { display: block; height: 10px; border-radius: 5px; background: var(--tanne); opacity: .8; transform-origin: left center; animation: zeile-fuellt 3.6s ease-out infinite; }
.story .formzeilen i:nth-child(2) { animation-delay: .35s; width: 84%; }
.story .formzeilen i:nth-child(3) { animation-delay: .7s; width: 62%; background: var(--terrakotta); }
@keyframes zeile-fuellt { 0% { transform: scaleX(.15); } 45% { transform: scaleX(1); } 100% { transform: scaleX(1); } }

/* Szene 4: Glocke + eintreffende Buchungs-Haken */
.story .glocke { top: 16px; left: 18%; transform-origin: 50% 10%; animation: klingeln 2.2s infinite; }
.story .p1 { bottom: 18px; left: 26%; animation: aufploppen 4s infinite; }
.story .p2 { top: 26px; right: 18%; animation: aufploppen 4s 1.1s infinite; }
@keyframes aufploppen {
  0%, 18% { opacity: 0; transform: scale(.4); }
  28% { opacity: 1; transform: scale(1.12); }
  34%, 100% { opacity: 1; transform: scale(1); }
}

/* Szene 5: Protokoll + Bestaetigungs-Haken */
.story .stempel { bottom: 16px; right: 20%; font-size: 30px; }
.story .haken { bottom: 34px; right: 16.5%; font-size: 20px; font-weight: 700; color: #33683c; animation: aufploppen 4s .8s infinite; }

/* Szene 6: Ruhe */
.story .ruhe { bottom: 16px; right: 22%; font-size: 28px; animation: schweben 3.2s ease-in-out infinite alternate; }

/* Fortschritts-Punkte unter der Buehne */
.story .punkte { grid-column: 1; grid-row: 2; display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.story .punkte i { width: 9px; height: 9px; border-radius: 50%; background: var(--linie); animation: punkt-aktiv 24s infinite; }
.story .punkte i:nth-child(2) { animation-delay: 4s; }
.story .punkte i:nth-child(3) { animation-delay: 8s; }
.story .punkte i:nth-child(4) { animation-delay: 12s; }
.story .punkte i:nth-child(5) { animation-delay: 16s; }
.story .punkte i:nth-child(6) { animation-delay: 20s; }
@keyframes punkt-aktiv {
  0%, 1% { background: var(--linie); transform: scale(1); }
  2% { background: var(--terrakotta); transform: scale(1.25); }
  16.67% { background: var(--terrakotta); transform: scale(1.25); }
  19% { background: var(--linie); transform: scale(1); }
  100% { background: var(--linie); }
}

/* Reduzierte Bewegung: keine Animationen, alle Szenen statisch im Raster sichtbar. */
@media (prefers-reduced-motion: reduce) {
  .story .szene, .story .punkte i, .story .bild * { animation: none !important; }
  .story .buehne { max-width: none; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
  .story .szene { grid-column: auto; grid-row: auto; opacity: 1; pointer-events: auto; }
  .story .punkte { display: none; }
}

/* Funktionen */
.funktionen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
@media (max-width: 960px) { .funktionen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .funktionen { grid-template-columns: 1fr; } }
.funktion { background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; padding: 24px; box-shadow: 0 1px 2px rgba(43, 40, 34, .04); }
.funktion.gross { grid-column: 1 / -1; background: linear-gradient(120deg, #fffdf8, #f8f3e6); border: 1px solid #decfae; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
@media (max-width: 640px) { .funktion.gross { grid-template-columns: 1fr; } }
.funktion .symbol { width: 46px; height: 46px; border-radius: 12px; background: var(--flaeche); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; }
.funktion.gross .symbol { background: var(--tanne); font-size: 24px; }
.funktion h3 { margin-bottom: 6px; }
.funktion p { font-size: 14.5px; color: var(--text2); margin: 0; }
.etikett { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: var(--terrakotta); color: #fff6ee; border-radius: 999px; padding: 3px 10px; margin-bottom: 10px; }

/* Ablauf */
.schritte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; counter-reset: schritt; }
@media (max-width: 960px) { .schritte { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .schritte { grid-template-columns: 1fr; } }
.schritt { position: relative; background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; padding: 24px 22px 20px; counter-increment: schritt; }
.schritt::before { content: counter(schritt); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tanne); color: #fdfbf5; font-family: var(--schrift-kopf); font-weight: 600; font-size: 17px; margin-bottom: 12px; }
.schritt h3 { font-size: 16.5px; margin-bottom: 6px; }
.schritt p { font-size: 14px; color: var(--text2); margin: 0; }

/* Preis */
.preis-karte { max-width: 520px; margin: 34px auto 0; background: var(--karte); border: 1px solid var(--linie); border-radius: 18px; padding: 36px 32px; text-align: center; box-shadow: 0 12px 34px rgba(43, 40, 34, .08); }
.preis-karte .betrag { font-family: var(--schrift-kopf); font-size: 52px; font-weight: 600; color: var(--tanne); line-height: 1; }
.preis-karte .betrag .alt { font-size: 26px; font-weight: 500; color: var(--muted); text-decoration: line-through; margin-right: 8px; }
.preis-karte .einheit { font-size: 15px; color: var(--muted); }
.preis-karte ul { list-style: none; margin: 22px 0 26px; padding: 0; text-align: left; }
.preis-karte li { padding: 7px 0 7px 30px; position: relative; font-size: 15px; }
.preis-karte li::before { content: '✓'; position: absolute; left: 4px; color: var(--tanne); font-weight: 700; }
.rabatt-hinweis { background: #f9ecdd; border: 1px solid #ecc9a4; color: #8c4d20; border-radius: 10px; padding: 10px 14px; font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.countdown { display: inline-block; background: var(--flaeche); border: 1px solid var(--linie); color: var(--tanne); border-radius: 999px; padding: 7px 16px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 16px; }
.preis-karte .staffel { font-size: 13.5px; color: var(--muted); margin: 12px 0 0; }

/* Abschluss-CTA */
.schluss { background: var(--tanne-tief); color: #e9e2d0; text-align: center; }
.schluss h2 { color: #fbf8ef; }
.schluss p { color: #c8c0a8; max-width: 38em; margin: 0 auto 26px; }

/* Fuss */
.fussbereich { background: var(--tanne-tief); color: #9d967f; border-top: 1px solid rgba(255, 255, 255, .1); padding: 26px 0 34px; font-size: 13px; }
.fussbereich .zeile { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.fussbereich a { color: #c8c0a8; text-decoration: none; }
.fussbereich a:hover { text-decoration: underline; }