/* ============================================================================
   Festkiste — Boho-Stilschicht, nur für die Startseite
   Liegt NACH styles.css und seiten.css und überschreibt gezielt: Farben, Bögen,
   Wellenkanten, Olivenzweige wie im Logo, handschriftliche Akzente.
   Unterseiten bleiben auf der Grundschicht — sie laden diese Datei nicht.
   Netz gegen Überlauf bleibt auf main (CLAUDE.md § 4). Gedrehte Elemente tragen scale(),
   damit ihr Rechteck im Container bleibt.
   ========================================================================== */

:root {
  /* Farbkombination 08 «Terracotta Olive» (Jairo, 23.09.2026). Die Namen der Variablen bleiben,
     damit keine Regel bricht; die Werte folgen der Palette. Kontraste gerechnet, gemessen siehe Fragendatei. */
  --papier: #FAF3EC;            /* Creme */
  --papier-dunkel: #F8E7D4;     /* Creme 85 % / Sonne 15 % */
  --leinen-hell: #FDF9F5;       /* Creme mit Weiss */
  --tinte: #283B13;             /* Dunkelgrün, Schrift */
  --tinte-weich: #46571E;       /* weiches Dunkelgrün, 7,1:1 auf Creme */
  --terra: #CD6B14;             /* Terrakotta, Linien und Schmuck, nicht für kleinen Text */
  --terra-tief: #AC6114;        /* tiefes Terrakotta, Leitfarbe: Knöpfe, Kursiv, Marke; Weiss darauf 4,69:1 */
  --terra-text: #8B5814;        /* Terrakotta für kleinen Text, mind. 4,77:1 auf allen hellen Flächen */
  --rose: #ECA24F;              /* Sonne */
  --rose-hell: #EAE5D8;         /* Creme 90 % / Oliv 10 % */
  --rose-tief: #CD6B14;         /* Terrakotta */
  --salbei: #CD6B14;
  --salbei-tief: #5A6926;       /* Oliv */
  --gold: #ECA24F;              /* Sonne */
  --terra-dunkel: #AC6114;      /* Terrakotta 80 % / Dunkelgrün 20 %, für weisse Schrift auf Stickern (gerechnet 5,0:1) */
  --linie: rgba(40, 59, 19, .16);
  --fokus: #283B13;
  --messing: var(--terra);
  --messing-tief: var(--terra-tief);
  --messing-text: var(--terra-text);
  --messing-hell: #ECA24F;
  --hand: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  --herz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.2 3 4.5 6.6 4.5c2.1 0 3.7 1.2 5.4 3.1 1.7-1.9 3.3-3.1 5.4-3.1 3.6 0 5.7 3.7 4.2 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E"); /* kleines Herz für Aufzählungen, als Maske in currentColor */
}

body { background: var(--papier); color: var(--tinte); }

/* ---------- Typografie -------------------------------------------------- */
h1, h2, h3, .display { font-weight: 500; letter-spacing: -.01em; }
h1 { font-size: clamp(2.75rem, 10.6vw, 6.5rem); line-height: .98; }
em.kursiv, .kursiv { color: var(--terra-tief); font-weight: 400; }
.eyebrow { color: var(--terra-text); letter-spacing: .18em; }
.eyebrow::before { width: .55rem; height: .55rem; border-radius: 50%; background: var(--terra); }
.eyebrow::after { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: .5; }
.hand { font-family: var(--hand); font-size: 1.5rem; line-height: 1.1; color: var(--terra-text); font-weight: 500; }
.zugabe { color: var(--tinte-weich); }

/* ---------- Knöpfe: weicher, wärmer -------------------------------------- */
.btn { --bg: var(--tinte); --fg: var(--leinen-hell); border-radius: 999px; box-shadow: 0 12px 26px -16px rgba(40, 59, 19, .55); }
.btn:hover { background: var(--terra-tief); border-color: var(--terra-tief); }
.btn--messing { --bg: var(--terra-tief); --fg: #fff; }
.btn--messing:hover { background: var(--tinte); border-color: var(--tinte); }
.btn--ghost { --bg: transparent; --fg: var(--tinte); border-color: var(--tinte); box-shadow: none; }
.btn--ghost:hover { background: var(--tinte); color: var(--leinen-hell); }
.btn--rose { --bg: var(--rose-hell); --fg: var(--tinte); border-color: var(--rose-hell); box-shadow: none; }
.btn--rose:hover { background: var(--rose); border-color: var(--rose); color: var(--tinte); }

/* ---------- Kopf -------------------------------------------------------- */
.kopf { background: color-mix(in srgb, var(--papier) 94%, transparent); border-bottom-color: var(--linie); }
.marke { font-weight: 500; font-size: 1.5rem; }
.marke small { color: var(--terra-text); }
.nav a::after { background: var(--terra); }
.fortschritt { background: linear-gradient(90deg, var(--terra), var(--rose)); }

/* ---------- Olivenzweig wie im Logo (SVG-Symbol, mehrfach nutzbar) */
.zweig { position: absolute; z-index: 0; pointer-events: none; color: var(--salbei-tief); opacity: .8; } /* ersetzt das Pampasgras (24.09.2026) */
.zweig--wiegt { transform-origin: 50% 100%; animation: wiegen 7s ease-in-out infinite alternate; }
@keyframes wiegen { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }

/* ---------- Hero -------------------------------------------------------- */
.hero {
  background-color: transparent; /* Lichtermeer scheint durch, die Seite ist ohnehin Creme */
  clip-path: none;                 /* die Schräge weicht der Wellenkante */
  padding-bottom: 0;
  min-height: auto;
  align-items: start;
  overflow: clip;
}
.hero__foto, .hero__schleier { display: none; } /* Foto liegt jetzt im Bogen, nicht hinter allem */
.hero__canvas { z-index: 0; }
.hero__in { padding-top: clamp(2.5rem, 6vw, 5.5rem); padding-bottom: clamp(4rem, 8vw, 7rem); display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 56rem) { .hero__in { grid-template-columns: 7fr 5fr; align-items: center; gap: 3rem; } }
.hero__text > * { max-width: 40rem; }
.hero h1 { margin: .9rem 0 1.3rem; }
.hero h1 .zeile--2 { padding-left: clamp(.4rem, 5vw, 3.2rem); }
.hero .lead { max-width: 38ch; }
.hero__knoepfe { margin: 1.6rem 0 1rem; }
.hero__schluss { color: var(--tinte-weich); }
.hero__schluss b { font-family: var(--display); font-size: 1.15em; color: var(--terra-text); font-weight: 500; }

/* Bogenbild: die Boho-Form schlechthin */
.bogen {
  position: relative; z-index: 1; min-width: 0;
  aspect-ratio: 4 / 5; max-width: 26rem; margin-inline: auto; width: 100%;
  border-radius: 999px 999px 18px 18px; overflow: hidden;
  background: linear-gradient(160deg, var(--rose-hell), #ECA24F 60%, #CD6B14);
  box-shadow: 0 40px 70px -40px rgba(40, 59, 19, .55);
}
.bogen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.bogen__rahmen { position: absolute; inset: .8rem; z-index: 2; border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px 999px 12px 12px; pointer-events: none; }
.hero__bogen { position: relative; }
.hero__bogen .zweig { width: 9rem; height: 16rem; left: -2.5rem; bottom: -1rem; }
.hero__bogen .zweig--rechts { left: auto; right: 0; bottom: 2rem; width: 7rem; height: 13rem; transform: scaleX(-1); animation: none; }
@media (max-width: 56rem) { .bogen { max-width: 20rem; aspect-ratio: 4 / 4.6; } .hero__bogen .zweig { width: 6rem; height: 11rem; left: -.5rem; bottom: -.5rem; } .hero__bogen .zweig--rechts { right: 0; width: 5rem; height: 9rem; } }
/* Sticker auf dem Bogen: der Sonnenstempel */
.sonne {
  position: absolute; z-index: 3; right: -.4rem; top: 9%;
  width: 6.2rem; height: 6.2rem; border-radius: 50%;
  background: var(--terra-dunkel); color: #fff; display: grid; place-items: center; text-align: center;
  font-family: var(--hand); font-size: 1.15rem; line-height: 1.05; padding: .7rem;
  box-shadow: 0 16px 30px -16px rgba(40, 59, 19, .6);
  transform: rotate(-6deg); /* steht still, leicht schräg wie ein Aufkleber (Natascha 24.09.2026: «nicht mehr rotieren») */
}
/* Ring als outline: zählt nicht in scrollWidth (gemessen 09.09.2026: als ::before 92>83 bei 360 px) */
.sonne { outline: 1.5px dashed var(--terra); outline-offset: .5rem; }
@media (max-width: 56rem) { .sonne { width: 5.2rem; height: 5.2rem; font-size: 1rem; right: 0; } }

/* Wellenkante unter dem Hero: ein SVG, keine Schräge */
.welle { display: block; width: 100%; height: clamp(2rem, 6vw, 4.5rem); color: var(--papier-dunkel); }
.welle path { fill: currentColor; }
.welle--oben { transform: scaleY(-1); }
/* Welle bewegt sich langsam (Natascha 25.09.2026); Safari zeigt sie ruhend */
.welle path { animation: welle-wogen 9s ease-in-out infinite alternate; }
@keyframes welle-wogen {
  0%   { d: path("M0 40 C240 90 480 -10 720 40 S1200 90 1440 40 V80 H0 Z"); }
  50%  { d: path("M0 46 C240 0 480 80 720 34 S1200 0 1440 46 V80 H0 Z"); }
  100% { d: path("M0 34 C240 70 480 10 720 48 S1200 70 1440 34 V80 H0 Z"); }
}
.ablauf .welle path { animation-delay: -3s; } .sortiment .welle path { animation-delay: -6s; animation-duration: 11s; } .kontakt .welle path { animation-delay: -2s; animation-duration: 8s; }
@media (prefers-reduced-motion: reduce) { .welle path { animation: none; } }

/* ---------- Schnellweg: die vier Antworten, bevor jemand fragt ------------- */
.schnell { background: var(--band); padding: 1.2rem 0 3.5rem; position: relative; }
.schnell__grid { display: grid; gap: .9rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 46rem) { .schnell__grid { grid-template-columns: repeat(4, 1fr); } }
.schnell__grid > li { min-width: 0; }
.kachel {
  display: block; text-decoration: none; height: 100%; min-width: 0;
  padding: 1.1rem 1.1rem 1.2rem; border-radius: 22px; background: var(--leinen-hell);
  border: 1px solid rgba(40, 59, 19, .08); box-shadow: 0 18px 34px -30px rgba(40, 59, 19, .55);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
a.kachel:hover { transform: translateY(-4px); box-shadow: 0 28px 44px -28px rgba(40, 59, 19, .5); }
.kachel .ico { width: 2.2rem; height: 2.2rem; color: var(--terra-tief); margin-bottom: .6rem; }
.kachel b { display: block; font-family: var(--display); font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.05; font-weight: 500; overflow-wrap: break-word; }
.kachel span { display: block; margin-top: .35rem; font-size: .88rem; color: var(--tinte-weich); overflow-wrap: break-word; }
.kachel .pfeil { display: inline-block; margin-top: .5rem; font-size: .85rem; font-weight: 600; color: var(--terra-text); }
.schnell__zeile { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; font-size: .92rem; color: var(--tinte-weich); }
.schnell__zeile .hand { font-size: 1.35rem; }

/* ---------- Laufband ---------------------------------------------------- */
.ticker { background: transparent; border-block: 1px solid var(--linie); }
.ticker span { color: var(--terra-text); font-style: italic; }
.ticker span::after { content: ""; display: inline-block; width: .7em; height: .7em; vertical-align: .05em; background: var(--rose-tief); -webkit-mask: var(--herz) center / contain no-repeat; mask: var(--herz) center / contain no-repeat; }

/* ---------- Bilder: Bögen und weiche Ecken --------------------------------- */
.bild { border-radius: 22px; background: linear-gradient(150deg, var(--rose-hell) 0%, #ECA24F 55%, #5A6926 100%); }
.bild--bogen { border-radius: 999px 999px 22px 22px; }
.bild--rund { border-radius: 50%; }
.bild--blatt { border-radius: 50% 12px 50% 12px; } /* Blattform: zwei Ecken rund, zwei eckig */
.bildpaar .bild--hoch { border-radius: 999px 999px 22px 22px; }
.bildpaar .bild--quer { border-radius: 22px; }
.bildpaar .stempel { background: var(--terra-dunkel); font-family: var(--hand); font-size: 1.2rem; font-style: normal; }
.bild figcaption { background: rgba(40, 59, 19, .84); }
.bild figcaption b { color: #fff; } /* Sonne erreichte hier nur 3,58 : 1 (gemessen 24.09.2026) */
/* gerade und im Dunkelgrün der Marke statt Oliv (Natascha 24.09.2026: «gerade und in einem passenderen Grünton») */
.problem__text .loesung { background: var(--tinte); color: #fff; border-radius: 22px 22px 22px 6px; transform: none; }
.problem__text .loesung p { color: #fff; }
.textlink { border-bottom-color: var(--terra); }
.textlink:hover { color: var(--terra-text); }


/* ---------- Die zwei Telefone: Audio und Video, gleichwertig ------------- */
.telefone { padding: 4.5rem 0 3rem; }
.telefone__kopf { display: grid; gap: 1rem; margin-bottom: 2.5rem; }
@media (min-width: 56rem) { .telefone__kopf { grid-template-columns: 6fr 5fr; align-items: end; } }
.telefone__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .telefone__grid { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; } .produkt--video { margin-top: 3rem; } }
.produkt {
  position: relative; min-width: 0;
  padding: 1.2rem 1.2rem 1.6rem; border-radius: 32px; background: var(--leinen-hell);
  border: 1px solid rgba(40, 59, 19, .1); box-shadow: 0 30px 60px -44px rgba(40, 59, 19, .6);
}
.produkt--video { background: var(--rose-hell); }
/* Fotobox: dritte Karte unter den Telefonen, volle Breite, Bild links, Text rechts (27.10.2026) */
.produkt--fotobox { background: var(--leinen-hell); }
@media (min-width: 52rem) {
  .produkt--fotobox { grid-column: 1 / -1; display: grid; grid-template-columns: 5fr 7fr; gap: 2rem; align-items: center; margin-top: 1rem; }
  .produkt--fotobox .produkt__bild { max-width: none; }
  .produkt--fotobox .produkt__text { padding-top: 0; }
}
.produkt--fotobox .produkt__etikett { background: var(--terra-dunkel); color: #fff; }
.produkt__preise dd.preis-wort { white-space: normal; font-size: 1.1rem; text-align: right; } /* Wort statt Betrag: bei 360 px drückte «nach Absprache» (nowrap) den dt auf 52 px (gemessen 27.10.2026) */
.produkt__hinweis { font-size: .9rem; color: var(--tinte-weich); margin: 0 0 1.1rem; padding-left: 1rem; border-left: 3px solid var(--terra); }
.produkt__bild { aspect-ratio: 7 / 8; max-width: 22rem; margin: 0 auto; }
.produkt__etikett {
  position: absolute; left: 1.6rem; top: 1.4rem; z-index: 2;
  padding: .35rem .9rem .3rem; border-radius: 999px; background: var(--gold); color: var(--tinte);
  font-size: 1.25rem; transform: rotate(-4deg) scale(.98);
}
.produkt--video .produkt__etikett { background: var(--terra-dunkel); color: #fff; }
.produkt__text { padding: 1.4rem .4rem 0; }
.produkt__text .eyebrow { margin-bottom: .3rem; }
.produkt__text h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: .6rem; }
.produkt__text > p { color: var(--tinte-weich); }
.produkt__text ul { margin: 1rem 0 1.2rem; display: grid; gap: .4rem; font-size: .95rem; }
.produkt__text li { position: relative; padding-left: 1.4rem; min-width: 0; }
.produkt__text li::before { content: ""; position: absolute; left: 0; top: .42em; width: .82em; height: .82em; background: var(--rose-tief); -webkit-mask: var(--herz) center / contain no-repeat; mask: var(--herz) center / contain no-repeat; }
.produkt__preise { display: grid; gap: .3rem; margin: 0 0 1.2rem; padding: .9rem 0 .2rem; border-top: 1px dashed rgba(40, 59, 19, .3); }
.produkt__preise div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; min-width: 0; }
.produkt__preise dt { font-size: .93rem; color: var(--tinte-weich); min-width: 0; }
.produkt__preise dd { margin: 0; font-family: var(--display); font-size: 1.35rem; font-weight: 500; color: var(--terra-text); white-space: nowrap; }
.produkt__preise div:first-child dd { font-size: 1.7rem; }
.produkt__knoepfe { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; }
.welches { margin-top: 2rem; padding: 1.4rem 1.5rem; border-radius: 24px; background: var(--papier-dunkel); display: grid; gap: .6rem; }
@media (min-width: 56rem) { .welches { grid-template-columns: 1fr 3fr; align-items: start; gap: 1.5rem; } }
.welches .hand { font-size: 1.8rem; }
.welches ul { display: grid; gap: .5rem; }
.welches li { min-width: 0; padding-left: 1.3rem; position: relative; color: var(--tinte-weich); }
.welches li::before { content: ""; position: absolute; left: 0; top: .42em; width: .82em; height: .82em; background: var(--terra); -webkit-mask: var(--herz) center / contain no-repeat; mask: var(--herz) center / contain no-repeat; }
.welches li b { color: var(--tinte); font-weight: 600; }

/* ---------- Preise: drei klare Wege, danach die Zugaben ------------------- */
.preise { padding: 4.5rem 0 4rem; position: relative; }
.preise .zweig { right: 0; top: -1rem; width: 8rem; height: 14rem; transform: scaleX(-1); opacity: .45; }
.preise__kopf { display: grid; gap: 1rem; margin-bottom: 2.2rem; max-width: 60ch; }
.wege { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .wege { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.weg-karte {
  position: relative; min-width: 0; display: flex; flex-direction: column;
  padding: 1.6rem 1.4rem 1.5rem; border-radius: 28px; background: var(--leinen-hell);
  border: 1px solid rgba(40, 59, 19, .1); box-shadow: 0 24px 48px -36px rgba(40, 59, 19, .6);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.weg-karte:hover { transform: translateY(-4px); box-shadow: 0 34px 60px -34px rgba(40, 59, 19, .55); }
.weg-karte--voll { background: var(--terra-tief); color: #fff; border-color: transparent; }
.weg-karte--voll .eyebrow, .weg-karte--voll h3, .weg-karte--voll p, .weg-karte--voll li, .weg-karte--voll .preis, .weg-karte--voll .preis small { color: #fff; }
.weg-karte--voll .eyebrow::before { background: var(--messing-hell); }
.weg-karte--voll .ico { color: var(--messing-hell); }
.weg-karte--rose { background: var(--rose-hell); }
.weg-karte .ico { width: 2.6rem; height: 2.6rem; color: var(--terra-tief); }
.weg-karte h3 { margin: .8rem 0 .2rem; font-size: clamp(1.4rem, 2.6vw, 1.75rem); }
.weg-karte > p { color: var(--tinte-weich); margin: .4rem 0 .9rem; font-size: .97rem; }
.weg-karte ul { display: grid; gap: .35rem; margin-bottom: 1.1rem; font-size: .95rem; }
.weg-karte li { position: relative; padding-left: 1.3rem; min-width: 0; }
.weg-karte li::before { content: ""; position: absolute; left: 0; top: .42em; width: .78em; height: .78em; background: var(--rose-tief); -webkit-mask: var(--herz) center / contain no-repeat; mask: var(--herz) center / contain no-repeat; }
.weg-karte--voll li::before { background: var(--messing-hell); }
.weg-karte .preis { display: block; margin-top: auto; font-family: var(--display); font-size: clamp(1.7rem, 3vw, 2.1rem); line-height: 1.1; }
.weg-karte .preis small { display: block; font-family: var(--text); font-size: .82rem; margin-top: .2rem; color: var(--tinte-weich); }
/* Die volle Karte (Rost) braucht weisse Schrift; die zwei Regeln oben sind gleich stark und stünden sonst darüber (gemessen 23.09.2026: 1,3 : 1). */
.weg-karte--voll > p, .weg-karte--voll .preis small { color: #fff; }
.weg-karte .preis + .preis { margin-top: .5rem; font-size: 1.25rem; }
.weg-karte .btn { margin-top: 1.1rem; align-self: flex-start; }
.weg-karte--voll .btn { --bg: var(--leinen-hell); --fg: var(--tinte); border-color: var(--leinen-hell); }
.weg-karte--voll .btn:hover { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.weg-karte .schleife {
  position: absolute; right: 1.1rem; top: -.9rem; z-index: 2;
  font-family: var(--hand); font-size: 1.15rem; line-height: 1; padding: .4rem .8rem .35rem; border-radius: 999px;
  background: var(--gold); color: var(--tinte); transform: rotate(-3deg) scale(.98);
}
.zugaben { margin-top: 1.6rem; display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .zugaben { grid-template-columns: repeat(3, 1fr); } }
.zugabe-k { min-width: 0; display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 18px; border: 1px dashed rgba(40, 59, 19, .3); background: transparent; }
.zugabe-k .ico { flex: none; width: 2rem; height: 2rem; color: var(--terra-tief); margin-top: .1rem; }
.zugabe-k b { display: block; font-family: var(--display); font-size: 1.15rem; font-weight: 500; }
.zugabe-k span { display: block; font-size: .9rem; color: var(--tinte-weich); }
.zugabe-k em { display: block; font-style: normal; font-weight: 600; color: var(--terra-text); margin-top: .2rem; }
.preise__unten { margin-top: 1.6rem; max-width: 56ch; color: var(--tinte-weich); font-size: .95rem; border-left: 3px solid var(--rose); padding-left: 1rem; }

/* ---------- Ablauf: heller Weg statt dunkler Wand ------------------------- */
.ablauf { background: var(--band); color: var(--tinte); padding: 0 0 5rem; }
.ablauf__hinter { display: none; }
.ablauf .welle { color: var(--papier); }
.ablauf__kopf { padding-top: 2.5rem; }
.ablauf .eyebrow { color: var(--terra-text); }
.ablauf__kopf .lead { color: var(--tinte-weich); }
.ablauf h2 em.kursiv { color: var(--terra-tief) !important; }
.schritte { position: relative; }
@media (min-width: 46rem) { .schritte > li:nth-child(2) { margin-top: 2rem; } .schritte > li:nth-child(3) { margin-top: 4rem; } }
.schritt { border-top: 0; padding: 0; }
.schritt::before {
  content: counter(s); counter-increment: s;
  color: var(--terra-tief); -webkit-text-stroke: 0; font-family: var(--hand); font-size: 3.4rem; font-weight: 500;
  width: 4.2rem; height: 4.2rem; border-radius: 50%; background: var(--leinen-hell); display: grid; place-items: center;
  box-shadow: 0 14px 26px -18px rgba(40, 59, 19, .6); margin-bottom: .9rem;
}
.schritt .ico { color: var(--salbei-tief); }
.schritt h3 { color: var(--tinte); }
.schritt p { color: var(--tinte-weich); }
.schritt .tag { display: inline-block; font-family: var(--hand); font-size: 1.3rem; color: var(--terra-text); margin-bottom: .2rem; }
.nicht { border: 1px dashed rgba(40, 59, 19, .35); background: transparent; }
.nicht h3 { color: var(--terra-text); }
.nicht li { color: var(--tinte-weich); }
.nicht li::before { color: var(--terra-tief); }

/* ---------- Natascha ---------------------------------------------------- */
.natascha { padding: 5rem 0 3rem; position: relative; }
.bild--portrait { border-radius: 999px 999px 22px 22px; transform: rotate(-2deg) scale(.96); }
.natascha__zitat { font-family: var(--hand); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--terra-tief); line-height: 1.15; margin: .8rem 0 1.2rem; }

/* ---------- Zahlen und Hörprobe: zusammen, kompakt ------------------------ */
.zahlen { padding: 3rem 0 4rem; }
.zahlen__grid { grid-template-columns: 1fr; }
/* Hörprobe entfernt (Natascha 24.09.2026: «das brauchen wir noch nicht»): die drei Zahlen nutzen die ganze Breite */
.zahlen__liste { margin-top: 2rem; }
@media (min-width: 56rem) { .zahlen__grid { grid-template-columns: 1fr; } .zahlen__liste { grid-template-columns: repeat(3, 1fr); } .zahlen__liste > li:nth-child(3) { grid-column: auto; } }
.zahl { border-top: 0; border-left: 3px solid var(--rose); padding: 0 0 0 1rem; }
.zahl b { color: var(--terra-tief); font-weight: 400; }
.zahl b small { color: var(--tinte); }
.player { border-radius: 24px; background: var(--leinen-hell); }
.player__play { border-color: var(--terra-tief); color: var(--terra-tief); }
.player .hinweis { border-left-color: var(--rose); }
blockquote.zitat { color: var(--tinte); }

/* ---------- Sortiment --------------------------------------------------- */
.sortiment { background: var(--band); padding: 0 0 4rem; position: relative; }
.sortiment .welle { color: var(--papier); }
.sortiment__kopf { padding-top: 2.5rem; }
.sk { border-radius: 26px; background: var(--leinen-hell); }
.sk .bild { border-radius: 26px 26px 0 0; }
.sk__pfeil { background: var(--papier); }
.sk:hover .sk__pfeil { background: var(--terra-tief); }
.abzeichen { background: var(--tinte); color: var(--leinen-hell); }
.abzeichen--bald { background: var(--rose); color: var(--tinte); }
.sk__preis { color: var(--terra-text); }

/* ---------- Fragen ------------------------------------------------------ */
.fragen { padding: 5rem 0; }
.fragen .bild--breit { border-radius: 999px 999px 22px 22px; aspect-ratio: 4 / 5; max-width: 20rem; }
details { border-top-color: var(--linie); }
summary::after { border-color: var(--terra-tief); color: var(--terra-tief); }
details[open] summary::after { background: var(--terra-tief); color: #fff; }
details[open] summary { color: var(--terra-text); }

/* ---------- Kontakt ----------------------------------------------------- */
.kontakt { padding: 1rem 0 6rem; position: relative; }
.kontakt .welle { color: var(--rose-hell); }
.kontakt__hinter { position: absolute; inset: 0; z-index: -1; background: var(--rose-hell); }
.kontakt__hinter::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(to bottom, var(--rose-hell), var(--papier)); }
.kontakt .wrap { position: relative; }
.kontakt__grid { padding-top: 1rem; }
.weg { background: var(--leinen-hell); border-radius: 18px; border-color: rgba(40, 59, 19, .1); }
.weg svg { color: var(--terra-tief); }
.formular { border-radius: 28px; background: var(--leinen-hell); border-color: rgba(40, 59, 19, .1); box-shadow: 0 30px 60px -40px rgba(40, 59, 19, .6); }
.formular h3 { font-size: 1.6rem; }
.feld input, .feld select, .feld textarea { border-color: #77824A; border-radius: 12px; background: #fff; }
.wahl label { border-color: #77824A; background: #fff; }
.wahl label:has(input:checked) { background: var(--rose-hell); border-color: var(--rose-tief); }
.wahl input { accent-color: var(--terra-tief); }

/* ---------- Fuss -------------------------------------------------------- */
.fuss { background: var(--tinte); color: #EAE5D8; border-top: 0; padding-top: 3rem; }
.fuss b { color: #fff; }
.fuss a:hover { color: var(--messing-hell); }
.fuss .hand { color: var(--messing-hell); display: block; margin-bottom: .6rem; }
.fuss li a { min-width: 44px; } /* «Preise» mass 42 px breit (09.09.2026, 375 px) */

/* ---------- Schwebend ---------------------------------------------------- */
.schwebend { background: #1F7A4D; }
.ton { background: color-mix(in srgb, var(--papier) 94%, transparent); border-color: var(--linie); }
.ton__balken i { background: var(--terra-tief); }

/* ---------- Bewegung aus --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .zweig--wiegt, .sonne { animation: none !important; }
  .bogen img { transform: none !important; }
}

/* ---------- Sortiment mit sechs Kacheln (27.10.2026, Fotobox dazu): 12 Spalten, zwei Reihen à 2 + 4 ----------- */
@media (min-width: 46rem) {
  .sortiment__grid { grid-template-columns: repeat(12, 1fr); }
  .sk--1 { grid-column: 1 / 7; }
  .sk--2 { grid-column: 7 / 13; margin-top: 2.5rem; }
  .sk--6 { grid-column: 1 / 4; margin-top: 0; }
  .sk--3 { grid-column: 4 / 7; margin-top: 1.5rem; }
  .sk--4 { grid-column: 7 / 10; margin-top: 0; }
  .sk--5 { grid-column: 10 / 13; margin-top: 1.5rem; }
}

/* ---------- Intro beim ersten Laden (27.10.2026): Zeichen, Name, Prozentzähler, dann weg --------------------- */
.intro { display: none; }
.intro--an { display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; background: var(--papier); color: var(--tinte); transition: opacity .7s var(--ease), visibility 0s linear .7s; }
.intro--weg { opacity: 0; visibility: hidden; pointer-events: none; }
html.intro-aktiv { overflow: hidden; }
.intro__in { display: grid; justify-items: center; gap: .9rem; text-align: center; }
.intro__zeichen { width: clamp(5rem, 14vw, 7.5rem); height: auto; animation: intro-atmen 1.8s var(--ease) infinite alternate; }
@keyframes intro-atmen { from { transform: scale(.96); opacity: .85; } to { transform: scale(1); opacity: 1; } }
.intro__wort { font-family: var(--display); font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 500; letter-spacing: -.01em; }
.intro__zahl { font-family: var(--text); font-size: .85rem; letter-spacing: .3em; color: var(--terra-text); font-variant-numeric: tabular-nums; min-width: 5ch; }
.intro__balken { display: block; width: clamp(8rem, 30vw, 14rem); height: 2px; background: rgba(40, 59, 19, .14); overflow: hidden; border-radius: 2px; }
.intro__balken i { display: block; height: 100%; background: var(--terra); transform: scaleX(0); transform-origin: left; transition: transform .25s linear; }
@media (prefers-reduced-motion: reduce) { .intro { display: none !important; } .intro__zeichen { animation: none; } }