/* MAE TOZAR – Grundlagen, Kopf-Kapsel, Einstieg A→B (Konzept: Auftragsdatei 2026-10-20-mae-umbau.md, Designer A/B).
   Alles bis zur Marke „Heller Boden“ setzt scripts/leistungsseiten.mjs als kritisches CSS in index.html ein. */

/* ---------- Schriften (lokal, OFL) ---------- */
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-700-maetozr.woff2") format("woff2");
  unicode-range: U+41, U+45, U+4D, U+4F, U+52, U+54, U+5A; }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("../fonts/barlow-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("../fonts/barlow-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--grund); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0; background: var(--grund); color: var(--tinte);
  font: 400 17px/1.55 var(--text); overflow-x: clip;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
img, canvas, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-user-select: none; user-select: none; background: none; border: 0; padding: 0; }
address { font-style: normal; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.leise { color: var(--tinte-leise); }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--aktiv); outline-offset: 3px; }

.sprung {
  position: fixed; left: 12px; top: 12px; z-index: 100; padding: 12px 18px; border-radius: var(--r-rund);
  background: var(--karte); color: var(--marine); font-weight: 600; text-decoration: none; box-shadow: var(--s-2);
  transform: translateY(-200%);
}
.sprung:focus-visible { transform: none; }

.raster { padding-inline: var(--rand); max-width: 1440px; margin-inline: auto; }

/* ---------- Pills und Links ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px;
  border-radius: var(--r-rund); border: 1.5px solid transparent; font: 600 16px/1 var(--text); text-decoration: none; white-space: nowrap;
  transition: background-color var(--d-2) var(--kurve), color var(--d-2) var(--kurve), border-color var(--d-2) var(--kurve), transform var(--d-1) var(--kurve);
}
.pill:active { transform: scale(var(--druck)); }
.pill-marine { background: var(--marine); color: #fff; }
.pill-hell { background: var(--karte); color: var(--marine); box-shadow: var(--s-1); }
.pill-ghost { background: var(--karte); color: var(--marine); border-color: var(--linie); }
.pill-klein { min-height: 44px; padding: 0 18px; font-size: 15px; }
@media (hover: hover) {
  .pill-marine:hover { background: var(--marine-tief); }
  .pill-hell:hover, .pill-ghost:hover { border-color: var(--marine); }
}
.textlink {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 600 16px/1 var(--text); color: var(--marine); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px;
}

/* ---------- Kopf-Kapsel ---------- */
.kopf {
  position: fixed; z-index: 50; top: var(--kopf-oben); left: 50%; translate: -50% 0;
  width: min(1200px, calc(var(--vw) - 2 * var(--rand) + 16px)); height: var(--kopf-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 8px 0 10px;
  border-radius: var(--r-rund); color: var(--tinte);
}
.kopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: rgb(255 255 255 / .94); box-shadow: var(--s-2); opacity: 0; transition: opacity var(--d-2) var(--kurve);
}
.kopf[data-grund="an"]::before { opacity: 1; }
.kopf[data-grund="an"][data-ton="nacht"]::before { background: rgb(11 18 32 / .92); box-shadow: 0 0 0 1px rgb(255 255 255 / .08), var(--s-1); }
.kopf[data-ton="nacht"] { color: var(--nacht-schrift); }
.plakette {
  display: inline-flex; align-items: center; height: 48px; padding: 0 10px; border-radius: var(--r-rund);
  background: transparent; transition: background-color var(--d-2) var(--kurve), box-shadow var(--d-2) var(--kurve);
}
/* Über der Nacht steht das Logo auf Weiß (Logo-Marine auf Nacht nur 1,41:1, Farb-Agent) */
.kopf[data-ton="nacht"] .plakette { background: var(--karte); box-shadow: var(--s-1); }
.plakette img { height: 40px; width: auto; }
.kopf[data-ton="hell"] .plakette img { mix-blend-mode: multiply; } /* Logo-Weiß verschwindet in der Kapsel */
.kopf-nav { display: flex; align-items: center; gap: 4px; }
.kopf-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--r-rund);
  font: 600 15px/1 var(--text); text-decoration: none; color: inherit;
  transition: background-color var(--d-2) var(--kurve), color var(--d-2) var(--kurve);
}
@media (hover: hover) {
  .kopf-link:hover { background: rgb(var(--schatten-farbe) / .06); }
  .kopf[data-ton="nacht"] .kopf-link:hover { background: rgb(255 255 255 / .1); }
}
.kopf .pill { margin-left: 8px; min-height: 44px; }
.kopf[data-ton="nacht"] .pill-marine { background: var(--karte); color: var(--marine); }
@media (max-width: 1023px) { .kopf-link.nur-desktop { display: none; } }
@media (max-width: 767px) {
  .kopf { padding: 0 6px 0 4px; }
  .plakette { height: 44px; padding: 0 8px; }
  .plakette img { height: 34px; }
  .kopf-link { display: none; }
}

/* ---------- 1 · Einstieg A→B ---------- */
/* Tropfen-Fenster: Lage und Größe als Variablen. Die Bildebene im Tropfen hat die Maße der ganzen Bühne
   (Cover-Geometrie wie der Canvas), der Tropfen schneidet sie nur aus. */
.einstieg {
  --buehne-h: max(100svh, 560px);
  --t-h: min(560px, calc(var(--buehne-h) - 240px));
  --t-w: calc(var(--t-h) * 0.68);
  --t-r: var(--rand);
  --t-y: 104px;
  --t-x: calc(var(--vw) - var(--t-r) - var(--t-w));
  position: relative; height: var(--buehne-h); background: var(--nebel);
}
.ein-karte { position: absolute; inset: 0; transform-origin: 50% 50%; }
.ein-schatten { position: absolute; inset: 0; border-radius: var(--r-gross); box-shadow: var(--s-3); opacity: 0; }
.ein-buehne { position: absolute; inset: 0; overflow: hidden; background: var(--grund); }

.tropfen {
  position: absolute; z-index: 2; left: var(--t-x); top: var(--t-y); width: var(--t-w); height: var(--t-h);
  filter: drop-shadow(0 22px 28px rgb(var(--schatten-farbe) / .22));
}
.tropfen-fenster { position: absolute; inset: 0; overflow: hidden; clip-path: url(#traene); }
.tropfen-bild {
  position: absolute; max-width: none; left: calc(-1 * var(--t-x)); top: calc(-1 * var(--t-y));
  width: var(--vw); height: var(--buehne-h); object-fit: cover;
}
.traene-svg { position: absolute; width: 0; height: 0; }
.sequenz { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.sequenz.bereit { opacity: 1; }
/* Ende des Einstiegs (Miro 2026-10-23): kein Kartenrand mehr, das Bild läuft nach unten weich in den Nebel des nächsten Abschnitts aus */
.ein-ausblende {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgb(240 244 250 / 0) 66%, rgb(240 244 250 / .6) 82%, var(--nebel) 96%);
}
.ein-verlauf { position: absolute; inset: 0; z-index: 4; background: var(--verlauf-quer); opacity: 0; pointer-events: none; }

.ein-inhalt {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start;
  padding: 120px var(--rand) 40px;
}
.ein-slogan {
  order: 1; max-width: calc(6 * var(--spalte) + 5 * var(--abstand));
  font: 600 clamp(36px, 3.4vw, 52px)/0.92 var(--display); text-transform: uppercase; letter-spacing: -0.005em; text-wrap: balance;
}
.ein-lauf { order: 2; margin-top: 18px; max-width: 38ch; font-size: 18px; line-height: 1.5; color: var(--tinte-leise); }
.ein-aktion { order: 3; margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.ein-aktion .pill { min-height: 52px; }
/* Hinweis „Erste Beratung kostenlos“ (Kundenwunsch 2026-10-25): Marken-Etikett mit Haken, hell und auf Nacht */
.gratis {
  display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; padding: 7px 14px 7px 8px;
  border-radius: var(--r-rund); background: var(--marine-tint); color: var(--marine); font: 600 15px/1.2 var(--text);
}
.gratis::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--marine)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.gratis-nacht { margin-top: 20px; background: rgb(111 163 255 / .14); color: var(--nacht-schrift); }
.gratis-nacht::before { background-color: var(--marine-auf-nacht); }
.schriftzug {
  order: 4; margin-top: auto; transform-origin: 0% 100%;
  font: 700 clamp(72px, min(19vw, 27svh, calc((var(--t-x) - var(--rand) - 24px) / 3.4)), 300px)/0.84 var(--marke);
  letter-spacing: -0.04em; text-transform: uppercase; white-space: nowrap; color: var(--tinte);
}
.schriftzug span { display: block; }
.schriftzug .a { display: inline; color: var(--marine); }
.schriftzug .zusatz { display: flex; justify-content: space-between; margin-top: 0.2em; padding-inline: 0.03em 0.02em; font: 600 max(11px, 0.2em)/1 var(--text); letter-spacing: 0; color: var(--tinte); }

.ein-worte { position: absolute; z-index: 5; left: var(--rand); right: var(--rand); bottom: 96px; display: grid; pointer-events: none; }
.wort {
  grid-area: 1 / 1; align-self: end; color: var(--nacht-schrift);
  font: 600 clamp(56px, 8.4vw, 128px)/0.9 var(--display); text-transform: uppercase; letter-spacing: -0.005em; white-space: nowrap;
  opacity: 0; transform: translateY(var(--weg-2)); visibility: hidden;
  transition: opacity var(--d-2) var(--kurve), transform var(--d-2) var(--kurve), visibility 0s linear var(--d-2);
}
.wort.weg { transform: translateY(calc(-1 * var(--weg-2) * .66)); }
.wort.an { opacity: 1; transform: none; visibility: visible; transition: opacity var(--d-3) var(--kurve), transform var(--d-3) var(--kurve), visibility 0s; }

/* Im Pin bewegte Ebenen vorab als eigene Schichten (kein Neuzeichnen großer Schrift je Bild) */
.bewegt .schriftzug, .bewegt .ein-slogan, .bewegt .ein-lauf, .bewegt .ein-aktion, .bewegt .ein-verlauf, .bewegt .tropfen, .bewegt .sequenz { will-change: transform, opacity; }
.bewegt .ein-karte { will-change: transform; }

/* Endkarte ohne Bewegung (reduziert / ohne JS): eigener, vollständiger Zustand unter dem Start */
.ein-ende { display: none; }
.ruhig .ein-ende, html:not(.bewegt) .ein-ende {
  display: block; position: relative; padding: 0 var(--rand) 72px; background: var(--grund);
}
.ein-ende-karte { position: relative; overflow: hidden; border-radius: var(--r-gross); box-shadow: var(--s-3); aspect-ratio: 16 / 10; background: var(--nacht); }
.ein-ende-karte img { width: 100%; height: 100%; object-fit: cover; }
.ein-ende-karte::after { content: ""; position: absolute; inset: 0; background: var(--verlauf-quer); }
.ein-ende-zeile {
  position: absolute; z-index: 1; left: 40px; right: 40px; bottom: 36px; color: var(--nacht-schrift);
  font: 600 40px/0.95 var(--display); text-transform: uppercase;
}
.ruhig .einstieg, html:not(.bewegt) .einstieg { background: var(--grund); }

/* Hochformat (Handy, Tablet hochkant): Tropfen oben rechts, Schriftzug darunter, Knopf unten */
@media (max-width: 767px), (orientation: portrait) and (max-width: 1199px) {
  .einstieg { --t-h: min(334px, 38svh); --t-w: min(62vw, calc(var(--t-h) * 0.76)); --t-y: 76px; }
  .ein-inhalt { padding: calc(var(--t-y) + var(--t-h) + 12px) var(--rand) calc(24px + env(safe-area-inset-bottom)); }
  .schriftzug { order: 0; margin-top: 0; font-size: min(26vw, 13svh, 200px); }
  .ein-slogan { order: 1; margin-top: 16px; font-size: 24px; line-height: 0.95; max-width: none; }
  .ein-lauf { order: 2; margin-top: 10px; font-size: 16px; }
  .ein-aktion { order: 3; margin-top: auto; width: 100%; flex-direction: column; align-items: stretch; gap: 0; }
  .ein-aktion .pill { width: 100%; }
  .ein-aktion .textlink { align-self: center; }
  .ein-aktion .gratis { align-self: center; }
  .ein-verlauf { background: var(--verlauf-hoch); }
  .ein-worte { bottom: calc(56px + env(safe-area-inset-bottom)); }
  .wort { font-size: min(14vw, 64px); }
  .ein-ende-karte { aspect-ratio: 9 / 14; max-height: 80svh; width: 100%; }
  .ein-ende-zeile { left: 20px; right: 20px; bottom: 24px; font-size: 30px; }
  .ein-ende-karte::after { background: var(--verlauf-hoch); }
}
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1199px) {
  .einstieg { --t-h: min(480px, 36svh); }
  .schriftzug { font-size: min(19vw, 14svh); }
  .ein-slogan { font-size: 40px; }
  .ein-aktion { flex-direction: row; align-items: center; width: auto; gap: 8px 24px; }
}
/* Lauftext nur, wenn die Höhe reicht */
@media (max-width: 767px) and (max-height: 739px) { .ein-lauf { display: none; } }

/* ---------- Heller Boden (Ende des kritischen CSS) ---------- */