/* =========================================================================
   Los Peces — site.css
   Tokengetrieben. WICHTIG (FEHLER-019): ALLE Media-Queries stehen am ENDE
   der Datei. Keine nackte Regel darf nach einem Breakpoint kommen.
   ========================================================================= */

:root{
  /* Tiefe (unter Wasser) */
  --tiefe-1:#04202C;
  --tiefe-2:#073345;
  --tiefe-3:#0C5570;
  --licht:#9FDCE4;
  --licht-2:#D7F0F2;
  --licht-leise:#A9C9D2;
  /* Oberfläche (über Wasser) */
  --sand:#F5EDE1;
  --sand-2:#FBF7F0;
  --tinte:#12222A;
  --tinte-leise:#4A5A60;
  --linie:rgba(18,34,42,.16);
  --linie-tief:rgba(215,240,242,.20);
  /* Aktion */
  --korall:#C0451F;
  --korall-hell:#E2643C;
  /* Schrift */
  --font-display:"Gambetta",Georgia,"Times New Roman",serif;
  --font-body:"General Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Bewegung — EINE Sprache */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.72s;
  --dur-kurz:.28s;
  /* Licht/Schatten — EINE Lichtrichtung (Oberfläche oben) */
  --sh-nah:0 2px 10px rgba(4,32,44,.12);
  --sh-fern:0 34px 70px -34px rgba(4,32,44,.45);
  --sh-tief:0 30px 60px -30px rgba(0,0,0,.75);
  /* Maße */
  --mw:1240px;
  --pad:28px;
  --ribbon-h:0px;
}

*{box-sizing:border-box}
html{color-scheme:light;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--sand-2);color:var(--tinte);
  font-family:var(--font-body);font-size:17px;line-height:1.65;font-weight:400;
  hyphens:manual;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;word-break:keep-all;
  margin:0;line-height:1.06;letter-spacing:-.012em}
h1{font-size:clamp(2.6rem,6.4vw,5.2rem);line-height:1.0}
h2{font-size:clamp(2rem,4vw,3.3rem)}
h3{font-size:clamp(1.35rem,2.3vw,1.85rem)}
h4{font-size:1.15rem}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
a{color:inherit}
img,svg{max-width:100%}
strong,b{font-weight:600}
ul,ol{margin:0 0 1.05em;padding-left:1.25em}
li{margin-bottom:.4em}
hr{border:0;border-top:1px solid var(--linie);margin:2.4rem 0}
:focus-visible{outline:3px solid var(--korall);outline-offset:3px;border-radius:2px}
.tief :focus-visible{outline-color:var(--licht)}
::selection{background:var(--korall);color:#fff}

/* --------------------------------------------------------------------- */
/* Grundbausteine                                                         */
/* --------------------------------------------------------------------- */
.wrap{max-width:var(--mw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.wrap-schmal{max-width:820px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.skip{position:absolute;left:-9999px;top:0;background:var(--korall);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:12px;top:12px}

.kicker{font-size:12.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:500;
  color:var(--korall);margin:0 0 18px}
.tief .kicker{color:var(--licht)}
.lead{font-size:19px;line-height:1.6;color:var(--tinte-leise);max-width:52ch}
.tief .lead{color:var(--licht-2)}
.leise{color:var(--tinte-leise)}
.tief .leise{color:var(--licht-leise)}
.zahl{font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}

/* Aktionen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--korall);color:#fff;text-decoration:none;font-weight:600;font-size:16px;
  padding:15px 26px;border-radius:999px;border:0;cursor:pointer;font-family:var(--font-body);
  min-height:48px;forced-color-adjust:none;
  background-image:linear-gradient(var(--korall),var(--korall));
  transition:transform var(--dur-kurz) var(--ease),box-shadow var(--dur-kurz) var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(192,69,31,.85)}
.btn:active{transform:translateY(0)}
.btn-still{background:transparent;background-image:none;color:var(--tinte);
  border:1.5px solid var(--linie);font-weight:500}
.btn-still:hover{border-color:var(--tinte);box-shadow:none}
.tief .btn-still{color:var(--sand);border-color:var(--linie-tief)}
.tief .btn-still:hover{border-color:var(--licht)}
.textlink{color:inherit;text-decoration:none;font-weight:500;
  border-bottom:1px solid var(--korall);padding-bottom:2px;
  transition:border-color var(--dur-kurz) var(--ease)}
.textlink:hover{border-color:var(--tinte)}
.tief .textlink{border-bottom-color:var(--licht)}
.tief .textlink:hover{border-color:var(--sand)}

/* Felder (Kontrastflächen = Tiefe-Gerät 4) */
.feld{padding:88px 0 96px;position:relative}
.feld-sand{background:var(--sand)}
.feld-hell{background:var(--sand-2)}
.tief{background:var(--tiefe-1);color:var(--sand);position:relative;overflow:hidden}
.tief h1,.tief h2,.tief h3{color:#fff}
.tief-licht{background:
  radial-gradient(120% 90% at 50% -20%, #10648A 0%, var(--tiefe-2) 46%, var(--tiefe-1) 100%)}
.korn{position:absolute;inset:0;opacity:.05;pointer-events:none;mix-blend-mode:overlay}

/* Wellenkanten (Tiefe-Gerät 2: Überlappung der Sektionsgrenzen) */
.kante{position:absolute;left:0;right:0;line-height:0;pointer-events:none;overflow:hidden;z-index:2}
/* max-width:none ist Pflicht: die Basisregel img,svg{max-width:100%} wuerde die
   200%-breite Wellen-Kachel auf 100% kappen, dann reisst der Versatz eine Luecke
   in die rechte Bildschirmhaelfte (gemessen: right 775 statt 1440). */
.kante svg{position:absolute;left:0;bottom:0;width:200%;max-width:none;height:100%;display:block}
.kante-unten{bottom:-1px;height:62px}
.kante-oben{top:-1px;height:62px;transform:scaleY(-1)}
.kante svg.fuell{animation:drift 34s linear infinite}
/* Korn auf dem Wellenband: gleiche Textur wie .feld-sand/.feld-hell, per Wellenform
   maskiert und mit der drift-Animation des Fuellbands synchron bewegt (critic-05,
   Kill-Punkt „gerade Korn-Naht an der Bandoberkante"). */
.kante .kante-korn{position:absolute;left:0;bottom:0;width:200%;height:100%;
  background-image:var(--korn-bild);background-size:180px 180px;
  opacity:.22;mix-blend-mode:multiply;pointer-events:none;
  mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;
  animation:drift 34s linear infinite}
.kante svg.krone{animation:drift 23s linear infinite reverse}
.kante svg.krone path{fill:none;stroke:var(--licht);stroke-width:1.4;opacity:.3;vector-effect:non-scaling-stroke}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}


/* Textur — gemessene Nachbesserung: das alte `.korn`-Overlay lag bei sd 0,30/255
   auf Tiefe und sd 0 auf Sand, war im Pixel also nicht vorhanden. Jetzt als
   echtes Rausch-Bild mit messbarer Amplitude, je Untergrund eigener Blendmodus. */
:root{
  --korn-bild:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.feld-sand,.feld-hell{position:relative;isolation:isolate}
.feld-sand::before,.feld-hell::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--korn-bild);background-size:180px 180px;
  opacity:.22;mix-blend-mode:multiply;pointer-events:none}
/* Lichtschacht auf der Oberflaeche: dieselbe Lichtrichtung wie unter Wasser */
/* Ueber Wasser faellt das Licht nicht als Schacht, sondern als weiche Pfuetze ein.
   Eine Lichtrichtung wie unter Wasser, aber ohne Streifen (die lasen sich als Banding).

   WICHTIG (gemessener Befund Runde 3): Die Lichtpfuetze darf NUR in der Sektion
   direkt unter dem Wasser stehen. Vorher startete sie in JEDER hellen Sektion neu
   und erzeugte an jeder Sand-zu-Hell-Grenze einen kerzengeraden Helligkeitssprung
   ueber die volle Breite (Luminanz 218 -> 248 an derselben y-Zeile) — genau die
   Lineallinie, die die eigene Signatur ausschliesst. Zwei helle Felder in Folge
   teilen sich jetzt eine durchgehende Flaeche, die Zaesur macht allein die Welle. */
.tief + .feld-sand::after,.tief + .feld-hell::after,
.seitenkopf + .feld-sand::after,.seitenkopf + .feld-hell::after,
.hero + .feld-sand::after,.hero + .feld-hell::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 62% at 18% -6%,rgba(255,255,255,.72),rgba(255,255,255,0) 62%),
    radial-gradient(80% 46% at 88% 8%,rgba(159,220,228,.16),rgba(159,220,228,0) 64%),
    linear-gradient(180deg,rgba(4,32,44,0) 72%,rgba(4,32,44,.05))}
/* Alle uebrigen hellen Felder bekommen nur das Ausklingen nach unten, keinen Neustart. */
.feld-sand::after,.feld-hell::after{content:"";position:absolute;inset:0;z-index:0;
  pointer-events:none;background:linear-gradient(180deg,rgba(4,32,44,0) 78%,rgba(4,32,44,.04))}
/* NUR die Inhaltscontainer anheben. Die vorherige Fassung `.feld-sand > *` traf
   auch `.kante` und ueberschrieb dort `position:absolute` (gleiche Spezifitaet,
   spaetere Source-Order) — die Wellenkante rutschte dadurch in den Textfluss und
   stand 87 px unterhalb der Sektionsgrenze: gemessen auf /angebote/pececitos/
   Sektion top 2229, Kante top 2316. Ergebnis war die Streifen-Naht aus Runde 4. */
.feld-sand > .wrap,.feld-sand > .wrap-schmal,
.feld-hell > .wrap,.feld-hell > .wrap-schmal{position:relative;z-index:1}
.tief .korn{opacity:.30;mix-blend-mode:overlay;
  background-image:var(--korn-bild);background-size:180px 180px;filter:none!important}

/* Ueberlappung ueber die Wellenkante hinweg (Tiefe-Geraet 2) */
.ueberlappt{margin-top:-96px;position:relative;z-index:3}
.hebt{box-shadow:var(--sh-fern)}

/* Szene — sektionstragende Zeichnung */
.szene{position:relative;color:var(--tiefe-3)}
.szene-svg{width:100%;height:auto;display:block;aspect-ratio:640/300}
/* Zweite scroll-gekoppelte Geste: die beiden Tiefenebenen der Szene ziehen beim
   Scrollen gegenlaeufig vorbei. --sx laeuft von -1 (Szene betritt den Viewport)
   ueber 0 (mittig) bis 1 (verlaesst ihn), gesetzt aus einem rAF-Loop. */
.szene-svg .fern{transform:translate3d(calc(var(--sx,0) * 30px),0,0)}
.szene-svg .nah{transform:translate3d(calc(var(--sx,0) * -52px),0,0)}
.szene-svg .fern,.szene-svg .nah{transition:none;will-change:transform}
.szene-buehne{position:relative;overflow:hidden;border-radius:3px;
  background:radial-gradient(112% 96% at 50% -10%,#10648A 0%,var(--tiefe-2) 52%,var(--tiefe-1) 100%);
  color:var(--licht);padding:38px 36px 32px;box-shadow:var(--sh-fern);
  max-width:1080px;margin-left:auto;margin-right:auto}
.szene-buehne::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(159,220,228,.16),transparent 46%,rgba(4,32,44,.5))}
.szene-buehne .szene-svg{position:relative;z-index:1}
.szene-buehne .abb-label{bottom:auto;top:0;left:0}


/* Gemessener Befund Runde 4: An JEDER Sand-zu-Hell-Paarung stand eine kerzengerade
   Vollbreiten-Kante (17-23 Stufen Sprung an identischer y-Zeile, alle zehn
   Marketingseiten). Die Wellen-Zaesur wurde bisher nur dort erzeugt, wo sie im
   Generator einzeln gesetzt war. Jetzt greift sie generisch ueber die
   Geschwister-Kombination, ohne dass eine Seite etwas dafuer tun muss. */
:is(.feld-sand,.feld-hell,.hero,.seitenkopf) + .feld-hell::before{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='62' viewBox='0 0 2400 62' preserveAspectRatio='none'%3E%3Cpath fill='%23F5EDE1' d='M0 31c100-24 100 24 200 0c100-24 100 24 200 0c100-24 100 24 200 0c100-24 100 24 200 0c100-24 100 24 200 0c100-24 100 24 200 0c100-24 100 24 200 0c100-24 100 24 200 0c100-24 100 24 200 0c100-24 100 24 200 0c100-24 100 24 200 0c100-24 100 24 200 0 L2400 0 L0 0 Z'/%3E%3C/svg%3E"),var(--korn-bild);
  background-repeat:repeat-x,repeat;
  background-position:top center,0 0;
  background-size:1200px 62px,180px 180px;
  opacity:1;mix-blend-mode:normal}
:is(.feld-sand,.feld-hell) + .feld-sand::before{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='62' viewBox='0 0 2400 62' preserveAspectRatio='none'%3E%3Cpath fill='%23FBF7F0' d='M0 31c100-24 100 24 200 0c100-24 100 24 200 0c100-24 100 24 200 0c100-24 100 24 200 0c100-24 100 24 200 0c100-24 100 24 200 0c100-24 100 24 200 0c100-24 100 24 200 0c100-24 100 24 200 0c100-24 100 24 200 0c100-24 100 24 200 0c100-24 100 24 200 0 L2400 0 L0 0 Z'/%3E%3C/svg%3E"),var(--korn-bild);
  background-repeat:repeat-x,repeat;
  background-position:top center,0 0;
  background-size:1200px 62px,180px 180px;
  opacity:1;mix-blend-mode:normal}
/* Das Korn liegt in diesen Faellen als eigene Ebene darueber, damit es nicht
   zusammen mit der Welle die Deckkraft verliert. */
:is(.feld-sand,.feld-hell,.hero,.seitenkopf) + :is(.feld-hell,.feld-sand)::after{
  background-image:var(--korn-bild),linear-gradient(180deg,rgba(4,32,44,0) 78%,rgba(4,32,44,.04));
  background-size:180px 180px,auto;opacity:.22;mix-blend-mode:multiply}

/* --------------------------------------------------------------------- */
/* Kopf — Ink-Band, Split-Nav, lebende Wellenkante                        */
/* --------------------------------------------------------------------- */
.kopf{position:sticky;top:var(--ribbon-h);z-index:60;background:var(--tiefe-1);color:var(--sand)}
.kopf-in{max-width:var(--mw);margin:0 auto;padding:16px var(--pad) 22px;
  display:flex;align-items:center;gap:26px}
.marke{display:flex;align-items:center;flex:0 0 auto;text-decoration:none;
  min-height:48px;padding:4px 0}
.marke img{display:block;height:40px;width:auto;transition:transform var(--dur) var(--ease)}
.marke:hover img{transform:translateY(-2px)}
.nav{display:flex;align-items:center;gap:24px;flex:1;font-size:15px;font-weight:500}
.nav .luecke{flex:1}
.nav a{text-decoration:none;color:var(--licht-2);position:relative;padding:6px 0;
  transition:color var(--dur-kurz) var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--korall-hell);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.kopf .btn{padding:12px 20px;font-size:15px;min-height:44px}
.burger{display:none;background:none;border:1.5px solid var(--linie-tief);border-radius:999px;
  color:var(--sand);font:inherit;font-size:14px;font-weight:500;padding:11px 18px;min-height:44px;
  cursor:pointer;align-items:center;gap:9px}
.burger span{display:block;width:16px;height:9px;border-top:1.5px solid var(--sand);
  border-bottom:1.5px solid var(--sand)}
.kopf-welle{position:absolute;left:0;right:0;bottom:-17px;height:18px;overflow:hidden;
  pointer-events:none;z-index:1}
.kopf-welle svg{position:absolute;left:0;top:0;width:200%;max-width:none;height:18px;display:block}
.kopf-welle svg.fuell{animation:drift 30s linear infinite}
.kopf-welle svg.fuell path{fill:var(--tiefe-1)}
.kopf-welle svg.krone{animation:drift 19s linear infinite reverse}
.kopf-welle svg.krone path{fill:none;stroke:var(--licht);stroke-width:1.5;opacity:.45;
  vector-effect:non-scaling-stroke}

/* Mobil-Menü */
.menue{position:fixed;inset:0;z-index:90;background:var(--tiefe-1);color:var(--sand);
  display:none;flex-direction:column;overflow-y:auto;
  padding:calc(20px + var(--ribbon-h)) var(--pad) 40px}
.menue[open],.menue.offen{display:flex}
.menue-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px;
  position:sticky;top:0;z-index:2;background:var(--tiefe-1);
  padding:6px 0 14px;border-bottom:1px solid var(--linie-tief)}
.menue-kopf img{height:34px;width:auto}
.menue a.mlink{font-family:var(--font-display);font-size:1.6rem;text-decoration:none;color:var(--sand);
  padding:10px 0;border-bottom:1px solid var(--linie-tief);display:block}
.menue a.mlink:hover{color:var(--licht)}
.menue-signet{margin-top:auto;padding-top:26px;opacity:.8}
.menue-signet img{width:120px;height:auto;animation:driften 26s ease-in-out infinite}
.zu{background:none;border:1.5px solid var(--linie-tief);border-radius:999px;color:var(--sand);
  font:inherit;font-size:14px;font-weight:500;padding:11px 18px;min-height:44px;cursor:pointer}

/* --------------------------------------------------------------------- */
/* Hero                                                                    */
/* --------------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding:108px 0 128px;color:var(--sand)}
.kaustik-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.48;
  mix-blend-mode:screen;filter:blur(2.5px) contrast(1.15);pointer-events:none;z-index:0}
.seitenkopf .kaustik-canvas{opacity:.34}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:48px;
  align-items:center}
.dreiklang{margin:0 0 22px}
.dreiklang span{display:block;font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.9rem,8.2vw,6.9rem);line-height:.99;letter-spacing:-.018em}
.dreiklang .d1{color:#fff;text-shadow:0 10px 44px rgba(0,0,0,.38)}
.dreiklang .d2{color:#CFEAF0;margin-left:.08em;text-shadow:0 10px 44px rgba(0,0,0,.32)}
.dreiklang .d3{color:#8CC4D2;margin-left:.16em;text-shadow:0 10px 44px rgba(0,0,0,.26)}
.reihenfolge{font-size:19px;color:var(--licht);font-weight:500;margin:0 0 24px}
.hero .lead{max-width:47ch;color:#DCEBEE;margin-bottom:32px}
.hero-akt{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.hero-akt .hinweis{font-size:15px;color:var(--licht-leise);max-width:32ch}
.schwarm{position:relative;justify-self:center}
.schwarm img{width:100%;height:auto;display:block;position:relative;
  animation:driften 26s ease-in-out infinite}
.schwarm::before{content:"";position:absolute;inset:-20%;border-radius:50%;
  background:radial-gradient(circle,rgba(159,220,228,.28),transparent 68%);
  animation:atmen 9s ease-in-out infinite}
@keyframes driften{0%,100%{transform:translate3d(0,0,0) rotate(0)}
  50%{transform:translate3d(-14px,-18px,0) rotate(-2.2deg)}}
@keyframes atmen{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.95;transform:scale(1.07)}}

/* Kopfzeile kleiner Seiten */
.seitenkopf{position:relative;overflow:hidden;padding:78px 0 92px;color:var(--sand)}
.seitenkopf .lead{color:#DCEBEE}
.brotkrume{font-size:14px;color:var(--licht-leise);margin:0 0 10px}
.brotkrume a{display:inline-block;padding:13px 0}
.brotkrume a{text-decoration:none;border-bottom:1px solid rgba(159,220,228,.4)}

.kopf-rule{display:block;width:52px;height:2px;background:var(--korall-hell);margin-top:24px}

/* --------------------------------------------------------------------- */

/* Gemessene Nachbesserung: auf /ueber-uns/ und /einstieg/ zerfiel die H1 bei
   >=1200 px in vier ungleiche Zeilen in einer 574-px-Spalte. Die Spalte oeffnet
   sich dort auf ~660 px.
   ACHTUNG, hier stand der Fehler aus Runde 2: die Regel lag zusaetzlich NACKT an
   dieser Stelle. `.kopf-weit .split` hat hoehere Spezifitaet als `.split`, deshalb
   konnte der `@media (max-width:900px)`-Umbruch sie nicht mehr aufheben — die
   Spalte blieb auch bei 390 px zweispaltig und die H1 brach zu „Verstaendn/is.".
   Die Regel steht jetzt AUSSCHLIESSLICH in `@media (min-width:901px)`. */

/* Editorial-Split (Rhythmusbrecher)                                       */
/* --------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:start}
.split-eng{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:56px;align-items:start}
.split > *,.split-eng > *{min-width:0}
.zitat{font-family:var(--font-display);font-size:clamp(1.6rem,3.1vw,2.5rem);line-height:1.22;
  letter-spacing:-.01em;margin:0}
.riesenzahl{font-family:var(--font-display);font-size:clamp(6rem,15vw,13rem);line-height:.8;
  color:var(--korall);opacity:.13;margin:0 0 -.16em;pointer-events:none;user-select:none}

/* Faktenblock */
.fakten{border-left:2px solid var(--korall);padding-left:22px;margin:0}
.fakten dt{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinte-leise);font-weight:500;margin-bottom:2px}
.tief .fakten dt{color:var(--licht)}
.fakten dd{margin:0 0 16px;font-family:var(--font-display);font-size:1.22rem}
.fakten dd:last-child{margin-bottom:0}

/* --------------------------------------------------------------------- */
/* Register (Angebotsliste statt Kachelsuppe)                              */
/* --------------------------------------------------------------------- */
.register{margin-top:46px}
.zeile{display:grid;grid-template-columns:66px minmax(0,1.05fr) minmax(0,1.35fr) 78px;
  gap:26px;align-items:center;padding:26px 0;border-top:1px solid var(--linie);
  text-decoration:none;position:relative;
  transition:background var(--dur) var(--ease)}
/* Nur transform/opacity animieren: der Einzug beim Hover laeuft ueber translateX,
   nicht ueber padding-left (Layout-Eigenschaft = Layout-Thrash). */
.zeile .nr,.zeile h3{transition:transform var(--dur) var(--ease)}
.zeile:hover .nr,.zeile:hover h3{transform:translateX(9px)}
.zeile:last-child{border-bottom:1px solid var(--linie)}
.zeile > *{min-width:0}
.zeile .nr{font-family:var(--font-display);font-size:30px;color:var(--korall);line-height:1}
.zeile h3{margin:0}
.zeile p{margin:0;color:var(--tinte-leise);font-size:16px}
.zeile .abb{justify-self:end;width:72px;height:72px;opacity:.45;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.zeile:hover{background:rgba(12,85,112,.06)}
.zeile:hover .abb{opacity:1;transform:translateX(-6px) scale(1.07)}
.tief .zeile{border-color:var(--linie-tief)}
.tief .zeile p{color:var(--licht-leise)}
.tief .zeile .nr{color:var(--korall-hell)}
.tief .zeile:hover{background:rgba(159,220,228,.07)}

/* --------------------------------------------------------------------- */
/* Abbildungskarten (Bild-Substanz, „Wasserbühne"-Rezept)                  */
/* --------------------------------------------------------------------- */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:26px}
.karten > *{min-width:0}
.karte{position:relative;background:var(--sand-2);border:1px solid var(--linie);border-radius:3px;
  padding:0 0 28px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.karte:hover{transform:translateY(-4px);box-shadow:var(--sh-fern)}
.buehne{position:relative;overflow:hidden;background:
  radial-gradient(115% 95% at 50% -12%, #10648A 0%, var(--tiefe-2) 52%, var(--tiefe-1) 100%);
  padding:30px 26px 26px;min-height:216px;display:flex;align-items:center;justify-content:center}
/* Lichtschaechte von der Oberflaeche: EINE Lichtrichtung, wie im Hero */
.buehne::before{content:"";position:absolute;left:-40%;right:-40%;top:-40%;bottom:-10%;
  background:repeating-linear-gradient(101deg,transparent 0 28px,rgba(215,240,242,.07) 32px,rgba(215,240,242,.10) 36px,rgba(215,240,242,.07) 40px,transparent 44px 76px);
  filter:blur(3px);pointer-events:none}
.buehne::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(78% 58% at 50% -4%,rgba(159,220,228,.24),transparent 68%),
    linear-gradient(180deg,transparent 55%,rgba(4,32,44,.45) 100%)}
.buehne svg{width:152px;height:152px;position:relative;z-index:1}
.abb-label{position:absolute;left:0;bottom:-11px;background:var(--korall);color:#fff;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:5px 12px;
  z-index:2}
.karte-text{padding:30px 26px 0}
.karte h3{margin:0 0 10px}
.karte p{margin:0;color:var(--tinte-leise);font-size:16px}
.karte .mehr{margin-top:16px;font-weight:600;font-size:15px;color:var(--korall);
  display:inline-flex;align-items:center;gap:8px}
.karte .mehr svg{transition:transform var(--dur) var(--ease)}
.karte:hover .mehr svg{transform:translateX(4px)}


/* Kompakte Abbildungs-Platte: bringt Ueberlappung, Licht und Schatten auf Seiten
   ohne grosse Szene (Kill-Liste Runde 2, Punkt 6). */
.platte-reihe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);
  gap:44px;align-items:end}
.platte-text{padding-bottom:8px}
.platte-text h2{font-size:clamp(1.7rem,3.1vw,2.6rem)}
.abb-platte{position:relative;overflow:hidden;border-radius:3px;width:min(440px,100%);
  background:radial-gradient(112% 96% at 50% -10%,#10648A 0%,var(--tiefe-2) 52%,var(--tiefe-1) 100%);
  color:var(--licht);padding:30px 28px 26px;display:flex;align-items:center;justify-content:center}
.abb-platte::before{content:"";position:absolute;left:-30%;right:-30%;top:-30%;bottom:-10%;
  background:repeating-linear-gradient(101deg,transparent 0 28px,rgba(215,240,242,.07) 32px,
    rgba(215,240,242,.10) 36px,rgba(215,240,242,.07) 40px,transparent 44px 76px);
  filter:blur(3px);pointer-events:none}
.abb-platte::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(159,220,228,.15),transparent 48%,rgba(4,32,44,.45))}
.abb-platte-bild{position:relative;z-index:1;width:170px;display:block}
.abb-platte .abb-label{bottom:auto;top:0;left:0}

/* Merkmale (auf Tiefenfeld, mit Rim-Light) */
.merkmale{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;
  background:var(--linie-tief);margin-top:44px}
.merkmale > *{min-width:0}
.merkmal{background:var(--tiefe-1);padding:34px 28px 38px;position:relative}
.merkmal::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(159,220,228,.55),transparent)}
.merkmal h3{font-size:1.35rem;margin:0 0 10px}
.merkmal p{margin:0;color:var(--licht-leise);font-size:16px}
.merkmal .mnr{font-size:12px;letter-spacing:.16em;color:var(--licht);margin-bottom:16px;display:block}

/* --------------------------------------------------------------------- */
/* Tiefenprofil (Ausbildungsweg) — die Layout-Überraschung                 */
/* --------------------------------------------------------------------- */
.profil{position:relative;margin-top:48px}
.profil svg{width:100%;height:auto;display:block;overflow:visible}
.profil .profil-hoch{display:none}
.profil .pfad{fill:none;stroke:var(--licht);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 2.6s var(--ease)}
.profil.sichtbar .pfad{stroke-dashoffset:0}
.profil .stufe-punkt{fill:var(--korall-hell)}
.profil text{font-family:var(--font-body);font-size:13px;fill:var(--licht-2)}
.profil .stufe-name{font-family:var(--font-display);font-size:19px;fill:#fff}
.stufenliste{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px;margin-top:40px}
.stufenliste > *{min-width:0}
.stufenliste div{border-top:1px solid var(--linie-tief);padding-top:16px}
.stufenliste b{display:block;font-family:var(--font-display);font-size:1.25rem;font-weight:400;
  color:#fff;margin-bottom:6px}
.stufenliste p{margin:0;font-size:15px;color:var(--licht-leise)}

/* Schritte (Einstieg) — Leine mit Markierungen */
.schritte{margin-top:44px;position:relative}
.schritt{display:grid;grid-template-columns:96px minmax(0,1fr) 190px;gap:30px;padding:28px 0;
  border-top:1px solid var(--linie);position:relative}
.schritt:last-child{border-bottom:1px solid var(--linie)}
.schritt > *{min-width:0}
.schritt .snr{font-family:var(--font-display);font-size:2.6rem;line-height:1;color:var(--korall)}
.schritt h3{margin:0 0 8px}
.schritt p{margin:0;color:var(--tinte-leise);max-width:60ch}
.schritt-meta{justify-self:end;text-align:right;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;color:var(--korall);line-height:1.7}
.tief .schritt-meta{color:var(--korall-hell)}
.tief .schritt{border-color:var(--linie-tief)}
.tief .schritt p{color:var(--licht-leise)}
.tief .schritt .snr{color:var(--korall-hell)}

/* --------------------------------------------------------------------- */
/* Tabellen (Preise) — eigener Scroll-Container                            */
/* --------------------------------------------------------------------- */
.tabelle-huelle{position:relative;margin:26px 0 12px}
.tabelle-huelle::after{content:"";position:absolute;top:1px;right:1px;bottom:1px;width:56px;
  border-radius:0 3px 3px 0;pointer-events:none;
  background:linear-gradient(90deg,rgba(251,247,240,0),rgba(251,247,240,.96))}
.tabelle-huelle.ende::after{opacity:0;transition:opacity var(--dur) var(--ease)}
/* Der Hinweis erscheint NUR, wenn die Tabelle wirklich breiter ist als ihr
   Container (Klasse `.scrollt` setzt das JS nach Messung). Vorher stand er auch
   auf /ausbildungsweg/, wo die Tabelle exakt passt und nie wischt. */
.wischhinweis{display:none;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:500;color:var(--korall);margin:0 0 8px;align-items:center;gap:8px}
.tabelle-huelle.scrollt .wischhinweis{display:flex}
.tabelle-huelle:not(.scrollt)::after{display:none}
.wischhinweis svg{flex:0 0 auto}
.tabelle-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--linie);border-radius:3px;background:var(--sand-2)}
.tabelle-scroll:focus-visible{outline:3px solid var(--korall)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:16px}
caption{text-align:left;padding:18px 20px 0;font-size:15px;color:var(--tinte-leise);caption-side:top}
th,td{padding:14px 20px;text-align:left;border-bottom:1px solid var(--linie);vertical-align:top}
thead th{font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  color:var(--tinte-leise);white-space:nowrap;background:var(--sand)}
tbody th{font-family:var(--font-display);font-size:1.15rem;font-weight:400;white-space:nowrap}
td.preis{font-variant-numeric:tabular-nums;white-space:nowrap}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
.tab-hinweis{font-size:14px;color:var(--tinte-leise);margin:8px 0 0}

/* Preis-Kacheln Credits */
.credits{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;margin-top:30px}
.credits > *{min-width:0}
.credit{border:1px solid var(--linie);border-radius:3px;padding:28px 24px;background:var(--sand-2)}
.credit .minuten{font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--korall);font-weight:600;margin-bottom:14px}
.credit .p{font-family:var(--font-display);font-size:2.3rem;line-height:1;margin:0 0 4px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.credit .pl{font-size:14.5px;color:var(--tinte-leise);margin:0 0 16px}
.credit .p2{border-top:1px solid var(--linie);padding-top:14px;margin-top:14px}

/* Hinweiskasten */
.kasten{border-left:3px solid var(--korall);background:var(--sand);padding:24px 26px;
  border-radius:0 3px 3px 0;margin:30px 0}
.kasten h3{font-size:1.3rem;margin:0 0 10px}
.kasten p:last-child{margin-bottom:0}
.tief .kasten{background:rgba(159,220,228,.08);border-left-color:var(--korall-hell)}

/* FAQ */
.faq{margin-top:40px;border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{cursor:pointer;padding:24px 44px 24px 0;position:relative;list-style:none;
  font-family:var(--font-display);font-size:clamp(1.2rem,2.1vw,1.5rem);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;
  border-right:2px solid var(--korall);border-bottom:2px solid var(--korall);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--dur) var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .antwort{padding:0 0 26px;color:var(--tinte-leise);max-width:70ch}

/* Formular */
.formular{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:34px}
.formular > *{min-width:0}
.feldgruppe{display:flex;flex-direction:column;gap:7px}
.feldgruppe.voll{grid-column:1 / -1}
label{font-size:14.5px;font-weight:500;color:var(--tinte)}
label .pflicht{color:var(--korall)}
input[type=text],input[type=email],input[type=tel],select,textarea{
  font:inherit;font-size:16px;font-family:var(--font-body);color:var(--tinte);
  background:var(--sand-2);border:1.5px solid var(--linie);border-radius:3px;
  padding:13px 14px;min-height:48px;width:100%;
  transition:border-color var(--dur-kurz) var(--ease),background var(--dur-kurz) var(--ease)}
textarea{min-height:150px;resize:vertical;line-height:1.55}
input:hover,select:hover,textarea:hover{border-color:rgba(18,34,42,.34)}
input:focus,select:focus,textarea:focus{border-color:var(--korall);background:#fff;outline:none}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--korall);outline-offset:2px}
.check{display:flex;gap:13px;align-items:flex-start;grid-column:1 / -1}
.check{padding:6px 0}
.check input{width:26px;height:26px;min-height:26px;margin-top:2px;
  accent-color:var(--korall);flex:0 0 auto}
.check label{padding:9px 0}
.check label{font-size:15px;font-weight:400;color:var(--tinte-leise);line-height:1.55}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formhinweis{grid-column:1 / -1;font-size:15px;color:var(--tinte-leise)}
.formmeldung{grid-column:1 / -1;padding:14px 18px;border-radius:3px;font-size:15.5px;display:none}
.formmeldung.fehler{display:block;background:#FBE7E0;border-left:3px solid var(--korall);color:#7A2A11}

/* Kontaktkacheln */
.kontaktliste{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-top:34px}
.kontaktliste > *{min-width:0}
.kontaktliste a,.kontaktliste div{display:block;border-top:1px solid var(--linie-tief);padding-top:16px;
  text-decoration:none}
.kontaktliste dt{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--licht);
  margin-bottom:6px}
.kontaktliste .wert{font-family:var(--font-display);font-size:1.3rem;color:#fff}

/* Fuß */
.fuss{background:var(--tiefe-1);color:var(--licht-leise);position:relative;overflow:hidden;
  padding:76px 0 34px;font-size:15.5px}
.fuss-in{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr));gap:40px}
.fuss-in > *{min-width:0}
.fuss img.wm{height:46px;width:auto;margin-bottom:20px}
.fuss h4{font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--licht);
  font-family:var(--font-body);font-weight:500;margin:0 0 16px}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin-bottom:0}
/* Trefferflaechen >= 44 px (gemessen bei 390 px), auch fuer die Rechtszeile. */
.fuss ul a{display:inline-block;padding:12px 0;line-height:1.35}
.fuss p a{display:inline-block;padding:12px 0;line-height:1.35}
.fuss-unten a{display:inline-block;padding:13px 2px;line-height:1.3}
.fuss a{text-decoration:none;transition:color var(--dur-kurz) var(--ease)}
.fuss a:hover{color:#fff}
.fuss-unten{margin-top:44px;padding-top:14px;border-top:1px solid var(--linie-tief);
  display:flex;gap:12px 22px;flex-wrap:wrap;justify-content:space-between;font-size:14px;
  align-items:center}

/* Reveals — uniform und leise (eine Distanz, eine Kurve, eine Dauer) */
.auf{opacity:0;transform:translate3d(0,16px,0);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.auf.sichtbar{opacity:1;transform:translate3d(0,0,0)}

/* Vorschau-Ribbon */
.preview-ribbon{position:fixed;top:0;left:0;right:0;z-index:120;background:var(--tiefe-1);
  color:var(--licht-2);font-family:var(--font-body);font-size:12.5px;line-height:1.4;
  letter-spacing:.02em;padding:7px 16px;text-align:center;
  border-bottom:1px solid rgba(159,220,228,.25)}
body:has(> .preview-ribbon){--ribbon-h:32px;padding-top:32px}

/* Fehlerseite */
.vierhundert{text-align:center;padding:110px 0 120px}
.vierhundert img{width:160px;height:auto;margin:0 auto 30px;display:block;
  animation:driften 26s ease-in-out infinite}

/* =======================================================================
   RESPONSIVE — ab hier ausschließlich Media-Queries (FEHLER-019)
   ======================================================================= */
@media (max-width:1080px){
  .fuss-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split,.split-eng{gap:44px}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:inline-flex}
  .kopf .btn{display:none}
  .kopf-in{justify-content:space-between;gap:14px}
  .split,.split-eng{grid-template-columns:1fr;gap:32px}
  .hero-in{grid-template-columns:1fr;gap:28px}
  .schwarm{width:138px;justify-self:start;order:-1}
  .zeile{grid-template-columns:46px minmax(0,1fr) 58px;gap:16px;padding:22px 0}
  .zeile p{grid-column:2 / -1;font-size:15px}
  /* Zeichnung rechts ueber beide Zeilen zentriert — vorher rutschte sie per
     Auto-Placement in Zeile 3, Spalte 1 und hing linksbuendig unter dem Text. */
  .zeile .abb{grid-column:3;grid-row:1 / span 2;align-self:center;width:52px;height:52px;opacity:.7}
  .zeile:hover .nr,.zeile:hover h3{transform:none}
  .schritt{grid-template-columns:64px minmax(0,1fr);gap:20px}
  .schritt-meta{grid-column:2;justify-self:start;text-align:left;margin-top:10px}
}
@media (max-width:680px){
  :root{--pad:20px}
  .feld{padding:64px 0 70px}
  .hero{padding:64px 0 92px}
  .seitenkopf{padding:56px 0 70px}
  .formular{grid-template-columns:1fr}
  .fuss-in{grid-template-columns:1fr;gap:32px}
  .fuss{padding:56px 0 30px}
  .hero-akt{flex-direction:column;align-items:stretch;gap:16px}
  .hero-akt .btn{width:100%}
  .hero-akt .hinweis{max-width:none}
  .btn{width:auto}
  .kasten{padding:20px 20px}
  .merkmale{grid-template-columns:1fr}
  .credits{grid-template-columns:1fr}
  .karten{grid-template-columns:1fr;gap:20px}
  .fuss-unten{flex-direction:column;gap:12px}
  .riesenzahl{font-size:clamp(4.5rem,22vw,8rem)}
  .menue a.mlink{font-size:1.45rem;padding:9px 0}
  .menue-kopf{margin-bottom:18px}
}
@media (max-width:680px){
  body:has(> .preview-ribbon){--ribbon-h:50px;padding-top:50px}
  .preview-ribbon{font-size:11.5px;padding:6px 14px}
  .buehne{min-height:186px}
  .buehne svg{width:128px;height:128px}
}
@media (max-width:400px){
  .dreiklang span{font-size:2.55rem}
  .marke img{height:34px}
}
@media (min-width:901px){
  /* Desktop-Werte, die ein Mobil-Breakpoint niemals überschreiben darf */
  .hero-in{grid-template-columns:minmax(0,1fr) 290px}
  .kopf-weit .split{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
}

@media (max-width:620px){
  /* Gemessene Nachbesserung: 628-702 px Tabelle in 348 px Container schnitt mitten
     im Wort ab. Unter 620 px werden die Zeilen zu eigenen Bloecken gestapelt,
     die Spaltenueberschrift steht per data-spalte vor dem Wert. */
  .tabelle-huelle.scrollt .wischhinweis{display:none}
  .tabelle-huelle::after{display:none}
  .tabelle-scroll{overflow-x:visible;border:0;background:transparent}
  table{min-width:0;display:block}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  caption{display:block;width:100%;padding:0 0 14px;text-align:left}
  tbody{display:block}
  tbody tr{display:block;background:var(--sand-2);border:1px solid var(--linie);
    border-radius:3px;padding:16px 18px 14px;margin-bottom:12px}
  tbody th{display:block;border:0;padding:0 0 10px;font-size:1.3rem}
  tbody td{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
    border:0;border-top:1px solid var(--linie);padding:9px 0;font-size:16px}
  tbody td::before{content:attr(data-spalte);color:var(--tinte-leise);font-size:13px;
    letter-spacing:.1em;text-transform:uppercase;font-weight:500;flex:0 0 auto}
  tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
  .profil .profil-quer{display:none}
  .profil .profil-hoch{display:block}
  .profil-hoch text.stufe-name{font-size:20px}
  .szene-buehne{padding:22px 14px 18px}
  .szene-svg{aspect-ratio:360/300}
  .platte-reihe{grid-template-columns:1fr;gap:22px}
  .platte-text{padding-bottom:0}
  .abb-platte{width:100%;padding:24px 20px 20px}
  .abb-platte-bild{width:140px}
  .ueberlappt{margin-top:-58px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .auf{opacity:1;transform:none}
  .profil .pfad{stroke-dashoffset:0}
  .kaustik-canvas{opacity:.26}
}
@media print{
  .kopf,.fuss,.preview-ribbon,.menue,.kaustik-canvas,.kante{display:none}
  body{background:#fff;color:#000}
}

/* =========================================================================
   Referenz-Skin 22.08.2026 — Owner-Vorgabe: Optik und Bildwelt der Referenz
   (lospeces.78-47-228-85.sslip.io) uebernehmen. Farbwelt aus dem Logo
   (Blau #12409B, Gelb #F0B820, Rot #C93020), Hanken Grotesk als Textschrift,
   weisser Kopf mit Markenleine, gelbe Aktionsflaeche, Fotos statt Zeichnungen.
   Steht bewusst als LETZTER Block nach den Breakpoints.
   ========================================================================= */

:root{
  --tiefe-1:#062035;
  --tiefe-2:#123B5C;
  --tiefe-3:#12409B;
  --licht:#D5E4EF;
  --licht-2:#EAF2F8;
  --licht-leise:#AFC7D8;
  --sand:#E7EFF4;
  --sand-2:#F5F9FB;
  --tinte:#062035;
  --tinte-leise:#4C6478;
  --linie:rgba(6,32,53,.14);
  --linie-tief:rgba(255,255,255,.20);
  --blau:#12409B;
  --gelb:#F0B820;
  --rot:#C93020;
  --korall:#12409B;
  --korall-hell:#F0B820;
  --weiss:#fff;
  --font-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sh-nah:0 1px 2px rgba(6,32,53,.16);
  --sh-fern:0 26px 60px -24px rgba(6,32,53,.42);
}

body{background:var(--sand-2);color:var(--tinte);font-size:17px;line-height:1.55}
h1,h2,h3,h4{font-weight:600;line-height:1.08;letter-spacing:-.012em}
h1{font-size:clamp(2.1rem,4.4vw,3.1rem)}
h2{font-size:clamp(1.6rem,2.9vw,2.15rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.35rem)}
.lead{font-size:17px;color:var(--tinte-leise)}
.tief .lead,.feld.tief p{color:var(--licht)}
::selection{background:var(--gelb);color:var(--tinte)}
:focus-visible{outline:3px solid var(--blau);outline-offset:3px}

/* --- kein Ornament: keine Wellen, kein Korn, keine Kaustik ---------------- */
.korn,.tief .korn,.kante,.kopf-welle,.kaustik-canvas,.abb-label{display:none}
.feld-sand::before,.feld-hell::before,
.feld-sand::after,.feld-hell::after,
.tief + .feld-sand::after,.tief + .feld-hell::after,
.seitenkopf + .feld-sand::after,.seitenkopf + .feld-hell::after,
.hero + .feld-sand::after,.hero + .feld-hell::after,
:is(.feld-sand,.feld-hell,.hero,.seitenkopf) + .feld-hell::before,
:is(.feld-sand,.feld-hell) + .feld-sand::before,
:is(.feld-sand,.feld-hell,.hero,.seitenkopf) + :is(.feld-hell,.feld-sand)::after{display:none}
.ueberlappt{margin-top:0}
.hebt{box-shadow:none}
.schwarm::before{display:none}
.schwarm img{animation:none}

/* --- Kopf: weiss, Markenleine, gelbe Aktion ------------------------------ */
.kopf{background:var(--weiss);color:var(--tinte);box-shadow:0 1px 0 var(--linie);border:0}
.kopf .marke img{filter:none}
.kopf .nav a{color:var(--tinte);font-weight:500}
.kopf .nav a:hover,.kopf .nav a[aria-current="page"]{color:var(--blau)}
.kopf .burger{color:var(--tinte)}
.kopf::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;
  background:repeating-linear-gradient(90deg,
    var(--blau) 0 44px,var(--gelb) 44px 88px,var(--rot) 88px 132px)}
.kopf{position:sticky}

/* --- Flaechen ------------------------------------------------------------ */
.feld-sand{background:var(--sand)}
.feld-hell{background:var(--weiss)}
.tief,.feld.tief{background:var(--tiefe-1);color:var(--weiss)}
.tief h1,.tief h2,.tief h3{color:var(--weiss)}
.tief-licht{background:var(--tiefe-1)}
.seitenkopf{padding-top:52px;padding-bottom:52px}

/* --- Aktion: gelber Knopf mit dunkler Schrift ---------------------------- */
.btn{background:var(--gelb);background-image:none;color:var(--tinte);font-weight:700;
  border:0;box-shadow:none}
.btn:hover{background:#DCA714;color:var(--tinte);transform:none;box-shadow:none}
.btn-still{background:transparent;color:var(--tinte);border:1px solid var(--linie);font-weight:600}
.btn-still:hover{border-color:var(--blau);color:var(--blau)}
.tief .btn-still{color:var(--weiss);border-color:var(--linie-tief)}
.tief .btn-still:hover{border-color:var(--gelb);color:var(--gelb)}
.skip{background:var(--blau)}

/* --- Auszeichnungen ------------------------------------------------------ */
.kicker{color:var(--blau);font-weight:700;letter-spacing:.14em}
.tief .kicker{color:var(--gelb)}
.textlink{border-bottom:2px solid var(--gelb)}
.textlink:hover{border-color:var(--blau);color:var(--blau)}
.tief .textlink{border-bottom-color:var(--gelb)}
.kasten{background:var(--weiss);border-left:4px solid var(--gelb);box-shadow:var(--sh-nah)}
.feld-hell .kasten{background:var(--sand-2)}
.tief .kasten{background:rgba(255,255,255,.06);border-left-color:var(--gelb)}
.fakten dt{color:var(--blau);font-weight:700}
.tief .fakten dt{color:var(--gelb)}
.riesenzahl{display:none}

/* --- Karten (Preise, Vorteile, Flex) ------------------------------------- */
.credit{background:var(--weiss);border:1px solid var(--linie);border-radius:4px;
  box-shadow:var(--sh-nah)}
.feld-hell .credit{background:var(--sand-2)}
.tief .credit{background:rgba(255,255,255,.06);border-color:var(--linie-tief)}
.credit .minuten{color:var(--blau);font-weight:700}
.tief .credit .minuten{color:var(--gelb)}
.credit .p{font-weight:600}

/* --- Angebotsregister ---------------------------------------------------- */
.zeile .nr{color:var(--blau)}
.zeile .abb{color:var(--blau)!important;opacity:.55}

/* --- Fotos --------------------------------------------------------------- */
.bild{position:relative;margin:0;border-radius:4px;overflow:hidden;background:var(--sand);
  box-shadow:var(--sh-nah)}
.bild img{display:block;width:100%;height:auto;object-fit:cover}
.bild img{aspect-ratio:auto}
.bild-unterschrift{margin:10px 0 0;font-size:14px;color:var(--tinte-leise)}
.tief .bild-unterschrift{color:var(--licht-leise)}

/* Hero mit Foto: Bild als Grund, dunkler Schleier, Text darueber */
.hero{padding:0;background:var(--tiefe-1);color:var(--weiss)}
.hero .hero-grund{position:absolute;inset:0;z-index:0}
.hero .hero-grund img{width:100%;height:100%;object-fit:cover}
.hero .hero-grund::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,32,53,.92) 0%,rgba(6,32,53,.80) 46%,rgba(6,32,53,.42) 100%)}
.hero .hero-in{position:relative;z-index:2;padding-block:clamp(44px,7vw,84px) clamp(52px,8vw,92px)}
.dreiklang span,.dreiklang .d1,.dreiklang .d2,.dreiklang .d3{
  font-size:clamp(2.1rem,5vw,3.5rem);text-shadow:none;margin-left:0;font-weight:600}
.dreiklang .d1{color:var(--weiss)}
.dreiklang .d2{color:var(--weiss)}
.dreiklang .d3{color:var(--gelb)}
.reihenfolge{color:var(--licht)}
.hero .lead{color:var(--licht-2)}

/* --- Fuss ---------------------------------------------------------------- */
.fuss{background:var(--tiefe-1)}

@media (max-width:820px){
  .hero .hero-grund::after{
    background:linear-gradient(180deg,rgba(6,32,53,.86) 0%,rgba(6,32,53,.92) 60%)}
  .kopf::after{background:repeating-linear-gradient(90deg,
    var(--blau) 0 26px,var(--gelb) 26px 52px,var(--rot) 52px 78px)}
}

/* --- Feinschliff Referenz-Skin: engerer Rhythmus, feinere Markenleine ----- */
.feld{padding:60px 0 64px}
.hero-in{grid-template-columns:minmax(0,1fr);gap:0}
.hero .lead,.hero .dreiklang,.hero .reihenfolge{max-width:52ch}
.split{gap:48px}
.platte-reihe{align-items:center;gap:40px}
.kopf::after{height:4px;bottom:-4px;
  background:repeating-linear-gradient(90deg,
    var(--blau) 0 18px,var(--gelb) 18px 36px,var(--rot) 36px 54px)}
@media (max-width:820px){
  .feld{padding:44px 0 48px}
  .kopf::after{background:repeating-linear-gradient(90deg,
    var(--blau) 0 12px,var(--gelb) 12px 24px,var(--rot) 24px 36px)}
}

/* --- 23.08.2026: Merkmal-Kacheln stehen jetzt auch auf hellen Feldern ------
   (Startseite „Qualifizierter Schwimmunterricht"). Die Kachel ist immer dunkel,
   deshalb muessen Ueberschrift und Text dort unabhaengig vom umgebenden Feld
   hell bleiben — sonst dunkel auf dunkel und unsichtbar. */
.merkmal h3{color:var(--weiss)}
.merkmal p{color:var(--licht-leise)}
.merkmal .mnr{color:var(--licht)}