/* ============================================================
   KRAVON — kravon.css
   Gemeinsames Designsystem für index.html und partner.html.
   Reines CSS, kein Build-Step. Schweizer Schreibweise in
   allen Kommentaren und Klassennamen.
   ============================================================ */

/* ---------- Schrift ----------
   Saira Condensed, Open Font License — liegt in assets/schrift/ und
   kommt vom eigenen Server, nicht von Google. So fliessen keine
   Besucherdaten ab und die Seite laeuft auch offline.
   Lizenztext: assets/schrift/OFL.txt                                */

@font-face {
  font-family: "Saira Condensed";
  src: url("../schrift/saira-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Saira Condensed";
  src: url("../schrift/saira-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Grundwerte ---------- */

:root {
  /* ==========================================================
     FARBEN — die einzige Stelle zum Ändern.
     Werte aus der Signatur KRAVON F6 (Vault: 07 Anhänge/KRAVON
     Logo/Signatur). Ablauf: Wert ändern, speichern, Seite neu
     laden (Cmd+R). Kein Build, kein Werkzeug.

     Auch die 3D-Szene liest --signal und --grund von hier und
     zieht automatisch mit (szene.js). Farben als #rrggbb angeben.
     ========================================================== */

  /* Die drei Markenfarben — meistens reicht es, hier zu drehen */
  --signal: #FF4A00;           /* DIE Farbe. Knopf, Punkt, die eine Zahl. */
  --grund: #0E0E0E;            /* Hintergrund der Seite                   */
  --text: #F2F0EC;             /* helle Schrift, Off-White                */

  /* Abstufungen — nur anfassen, wenn gezielt gewünscht */
  --schwarz: #070707;          /* tiefste Fläche, Hero und Ränder         */
  --flaeche: #151515;          /* leicht erhabene Panels                  */
  --flaeche-hell: #1c1b19;     /* Eingabefelder, Blasen                   */
  --linie: rgba(242, 240, 236, 0.09);
  --linie-marke: #6E6E6E;      /* Signatur-Linie, Leisten-Balken          */
  --text2: #a8a5a0;            /* Fliesstext                              */
  --text3: #8A8A8A;            /* Signatur-Grau, Legenden, Vorzeilen      */

  /* Automatisch aus --signal gerechnet — NICHT anfassen.
     Die festen Werte hier sind nur Ersatz für sehr alte Browser;
     moderne überschreiben sie gleich unterhalb per color-mix. */
  --signal-hell: #ff6a2a;      /* Knopf beim Drüberfahren                 */
  --signal-dunkel: #d63e00;    /* dunkles Ende der Chat-Blase             */
  --signal-auswahl: rgba(255, 74, 0, 0.32);  /* Textauswahl, Punkt-Schein */
  --signal-glut: rgba(255, 74, 0, 0.11);       /* Schein im Hero          */
  --signal-glut-sanft: rgba(255, 74, 0, 0.06); /* Schein Mechanik-Bühne   */  
  --signal-fuellung: rgba(255, 74, 0, 0.2);    /* Knopf beim Drüberfahren */
  /* Kanten statt Rundungen: Flightcases, Traversen und Lastschilder
     sind eckig. 2px nimmt nur die Härte der reinen Nullkante weg. */
  --radius: 2px;
  --radius-gross: 3px;
  --nav-hoehe: 3rem;
  --breit: 75rem;              /* maximale Inhaltsbreite                  */
  /* 38rem statt 44rem: Saira Condensed setzt rund 15 Prozent mehr
     Zeichen in dieselbe Breite. Bei 44rem werden die Zeilen zu lang
     und die Umbrüche zufällig. */
  --lesbar: 38rem;             /* maximale Textbreite                     */
  /* Fliesstext: neutrale Systemschrift, auf Absatzlaenge am ruhigsten */
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Display",
             "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto,
             "Noto Sans", Arial, sans-serif;
  /* Display: Wortmarke, Titel, Zahlen, Navigation. Die Fallbacks
     greifen nur, wenn die Schriftdatei fehlt — dann bleibt es schmal. */
  --schrift-display: "Saira Condensed", "Oswald", "DIN Condensed",
                     "Arial Narrow", var(--schrift);
}

/* Moderne Browser rechnen die Abstufungen selbst aus der Signalfarbe —
   dann genügt wirklich eine einzige Änderung an --signal oben. */
@supports (color: color-mix(in srgb, red 50%, tan)) {
  :root {
    --signal-hell: color-mix(in srgb, var(--signal) 85%, #ffffff);
    --signal-dunkel: color-mix(in srgb, var(--signal) 84%, #000000);
    --signal-auswahl: color-mix(in srgb, var(--signal) 32%, transparent);
    --signal-glut: color-mix(in srgb, var(--signal) 11%, transparent);   
    --signal-fuellung: color-mix(in srgb, var(--signal) 20%, transparent);
    --signal-glut-sanft: color-mix(in srgb, var(--signal) 6%, transparent);
  }
}

/* ---------- Reset und Basis ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.0625rem;                /* 17 px                           */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, p, figure { margin: 0; }

a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(242, 240, 236, 0.32);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: var(--signal); }

::selection { background: var(--signal-auswahl); color: var(--text); }

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

/* Nur für Vorleseprogramme sichtbar */
.nur-vorleser {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprunglink {
  position: fixed;
  top: 0.5rem; left: 0.5rem;
  z-index: 100;
  padding: 0.6em 1em;
  background: var(--flaeche);
  color: var(--text);
  border-radius: 999px;
  transform: translateY(-300%);
  transition: transform 0.2s ease;
}
.sprunglink:focus-visible { transform: translateY(0); }

/* ---------- Navigation ---------- */

.leiste {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: calc(var(--nav-hoehe) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(12, 12, 12, 0.72);
  -webkit-backdrop-filter: saturate(1.6) blur(20px);
  backdrop-filter: saturate(1.6) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s ease, background-color 0.4s ease;
}
.leiste--fest { border-bottom-color: var(--linie); background: rgba(12, 12, 12, 0.82); }

.leiste-inhalt {
  max-width: var(--breit);
  height: var(--nav-hoehe);
  margin: 0 auto;
  padding-inline: max(1.25rem, env(safe-area-inset-left)) max(1.25rem, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;              /* Bezug für Balken und Punkt */
}

/* Links in der Leiste tragen keine Unterstreichung — auf Zeigergeräten
   übernehmen Balken und Punkt (kravon.js), auf Touch genügt die Position. */
.leiste a { text-decoration: none; }

.marke {
  font-family: var(--schrift-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--text);
}
.marke:hover { text-decoration: none; color: var(--text2); }

.leiste-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}
.leiste-links a {
  font-family: var(--schrift-display);
  color: var(--text2);
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
}
.leiste-links a:hover { color: var(--text); text-decoration: none; }
.leiste-links a[aria-current="page"] { color: var(--text); }


/* ---------- Zeiger-Indikator: Balken unterm Link, Punkt folgt ----------
   Läuft in der Kopfleiste und in der Fussnavigation. Die Höhe setzt
   kravon.js pro Link, darum steht hier kein top/bottom.              */

.zeiger-balken {
  position: absolute;
  left: 0;
  width: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--linie-marke);
  opacity: 0;
  pointer-events: none;
  transition:
    left 0.28s cubic-bezier(0.3, 0.7, 0.2, 1),
    width 0.28s cubic-bezier(0.3, 0.7, 0.2, 1),
    opacity 0.18s ease;
}
.zeiger-punkt {
  position: absolute;
  left: -3.5px;                    /* Punktmitte liegt auf translateX     */
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 8px var(--signal-auswahl);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.zeiger-balken--sichtbar,
.zeiger-punkt--sichtbar { opacity: 1; }

/* Wo der Indikator läuft, braucht es keine Unterstreichung mehr —
   ohne JavaScript oder auf Touch bleibt sie erhalten. */
.zeiger-aktiv a:not(.knopf) { text-decoration: none; }

/* ---------- Knöpfe ----------
   Ein Muster für alle (Kevins Vorgabe 02.09.): im Ruhezustand nur
   Umriss, beim Drüberfahren füllt sich der Knopf an, beim Klick
   springt er auf volle Signalfarbe. Gilt für die Leiste genauso wie
   für «Anfrage schicken» und «Anfrage senden». */

.knopf {
  font-family: var(--schrift-display);
  text-decoration: none;           /* Knöpfe tragen nie die Link-Unterstreichung */
  display: inline-block;
  background: transparent;
  color: var(--signal);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1;
  padding: 0.9em 1.6em;
  border: 0;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1.5px var(--signal);
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.45s ease, color 0.45s ease, transform 0.2s ease;
}
.knopf:hover {
  background: var(--signal-fuellung);
  color: var(--signal);
  text-decoration: none;
  transform: translateY(-1px);
}
.knopf:active {
  background: var(--signal);
  color: var(--grund);
  transform: translateY(0);
  transition-duration: 0s;
}

.knopf--klein { font-size: 0.75rem; padding: 0.55em 1.1em; font-weight: 600; box-shadow: inset 0 0 0 1px var(--signal); }


.hinweis {
  margin-top: 0.9rem;
  font-size: 0.8125rem;
  color: var(--text3);
}
.hinweis--zeigen { color: var(--signal); }
.hinweis--fehler { color: var(--signal); }
.hinweis--erfolg { color: var(--text2); }

/* Honigtopf: aus dem Blickfeld geschoben statt display:none, weil
   Bots ausgeblendete Felder teilweise erkennen und dann auslassen. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Abschnitts-Gerüst ---------- */

.abschnitt {
  padding: clamp(4.5rem, 11vh, 8rem) 0;
  position: relative;
}

.huelle {
  max-width: var(--breit);
  margin: 0 auto;
  padding-inline: max(1.25rem, env(safe-area-inset-left)) max(1.25rem, env(safe-area-inset-right));
}

.lesbar { max-width: var(--lesbar); }

.mittig { text-align: center; margin-inline: auto; }

/* Vorzeile als Positionskennzeichnung, wie die Beschriftung auf einem
   Case: Nummer, Trennstrich, Bezeichnung in Versalien. Die Nummer steht
   im HTML als data-nr, damit sie sichtbar und änderbar bleibt.
   Der Text bleibt grau — das Pendant zu "EST. 2026" in der Signatur;
   nur die Nummer trägt die Signalfarbe. */
.vorzeile {
  font-family: var(--schrift-display);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text3);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.vorzeile::before {
  content: attr(data-nr);
  order: -2;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}
.vorzeile::after {
  content: "";
  order: -1;                       /* Strich zwischen Nummer und Text */
  flex: 0 0 auto;
  width: clamp(1.5rem, 5vw, 3.5rem);
  height: 1px;
  background: var(--linie-marke);
}
/* Ohne data-nr bleibt die schlichte Beschriftung ohne Nummer und Strich */
.vorzeile:not([data-nr])::before,
.vorzeile:not([data-nr])::after { content: none; }
/* In zentrierten Abschnitten mittig setzen — text-align greift bei Flex nicht */
.mittig .vorzeile { justify-content: center; }

.titel {
  font-family: var(--schrift-display);
  letter-spacing: 0.005em;
  font-size: clamp(2rem, 5.6vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.021em;
  line-height: 1.06;
  text-wrap: balance;
}

.titel .leise { color: var(--text3); }

.fliess {
  color: var(--text2);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  margin-top: 1.4rem;
  max-width: 40rem;
}
.mittig .fliess { margin-inline: auto; }
.fliess strong { color: var(--text); font-weight: 600; }

/* ---------- Hero ---------- */

.held {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: clip;
  background: var(--schwarz);
}

/* Statischer Hintergrund: trägt die Fläche auch ganz ohne WebGL */
.held-hintergrund {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 50% 112%, var(--signal-glut), transparent 62%),
    radial-gradient(80% 45% at 50% -8%, rgba(214, 205, 196, 0.06), transparent),
    linear-gradient(#0b0b0b, #070707);
}
.held-hintergrund::after {
  /* feine Körnung, damit die Fläche nicht steril wirkt */
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)'/%3E%3C/svg%3E");
}

.szene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.szene--an { opacity: 1; }
html.ohne-3d .szene { display: none; }

.held-inhalt {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 1rem;
}

.wortmarke {
  font-family: var(--schrift-display);
  font-size: clamp(2.9rem, 13vw, 8.75rem);
  font-weight: 700;
  letter-spacing: 0.13em;
  margin-right: -0.13em;        /* Ausgleich für letztes Zeichen         */
  line-height: 1;
  color: var(--text);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.55);
}

.anspruch {
  font-family: var(--schrift-display);
  margin-top: clamp(1.1rem, 3vw, 2rem);
  font-size: clamp(0.9375rem, 2.4vw, 1.4375rem);
  font-weight: 600;
  letter-spacing: 0.34em;
  margin-right: -0.34em;
  color: var(--signal);
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.55);
}

/* Subline im Hero: sagt in einer Zeile, was KRAVON ist —
   niemand soll scrollen müssen, um das zu erfahren. */
.held-sub {
  margin: clamp(1.4rem, 4vw, 2.2rem) auto 0;
  max-width: 36ch;
  font-size: clamp(0.9375rem, 2.2vw, 1.125rem);
  line-height: 1.55;
  color: var(--text2);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.5);
}

/* Partner-Hero: gleiche Wucht, Foto statt 3D */
.held--foto {
  min-height: auto;
  padding: calc(var(--nav-hoehe) + clamp(4.5rem, 12vh, 8rem)) 0 clamp(3rem, 7vh, 5rem);
}
.held--foto .held-inhalt { display: grid; justify-items: center; }
.held--foto .rahmen { margin-top: clamp(2.5rem, 7vh, 4.5rem); }

/* ---------- Einordnung ---------- */

.einordnung {
  min-height: 72vh;
  display: grid;
  place-items: center;
  background: var(--grund);
}

.riesensatz {
  font-family: var(--schrift-display);
  font-size: clamp(1.75rem, 4.4vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.017em;
  line-height: 1.18;
  text-wrap: balance;
  max-width: 62rem;
}
.riesensatz .leise { color: var(--text3); }

/* ---------- Bildrahmen ---------- */

.rahmen {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--flaeche);
  box-shadow:
    0 0 0 1px rgba(242, 240, 236, 0.06),
    0 30px 70px rgba(0, 0, 0, 0.55);
}

/* Einheitliches Grading über alle Fotos:
   leicht entsättigt, etwas härter, kühler Schatten. */
.foto {
  width: 100%;
  height: auto;
  filter: saturate(0.84) contrast(1.07) brightness(0.95);
}
.rahmen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(44, 22, 10, 0.10), rgba(44, 22, 10, 0.10)),
    linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, 0.30));
}

/* Breitenstufen — die Auflösungsregel wohnt hier:
   720-px-Quellen nie breiter als 360 px am Desktop,
   1242er bis 620 px, 1536/2048er bis 770/1024 px.
   Der vh-Deckel (02.09.) sorgt dafür, dass ein Bild samt Unterschrift
   immer GANZ in den Viewport passt — nichts scrollt mehr halb
   angeschnitten durch. Gerechnet übers Seitenverhältnis:
   9:16-Hochformat bei 38vh Breite = 67vh Höhe. */
.rahmen--schmal  { max-width: min(340px, 38vh); }
.rahmen--mittel  { max-width: min(620px, 50vh); }
.rahmen--gross   { max-width: min(770px, 52vh); }
.rahmen--breit   { max-width: min(1024px, 92vh); }

figure > figcaption,
.unterschrift {
  font-size: 0.8125rem;
  color: var(--text3);
  margin-top: 0.9rem;
  line-height: 1.5;
}

/* ---------- Zweispalter (Text + Bild) ---------- */

.zweispalter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.zweispalter--schmalbild { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); }

/* ---------- Mechanik: Bühne mit Chat ---------- */

.buehne {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: clip;
  background:
    radial-gradient(70% 55% at 50% 55%, var(--signal-glut-sanft), transparent 70%),
    var(--schwarz);
}
.buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(130% 90% at 50% 50%, transparent 55%, rgba(7, 7, 7, 0.85));
}

.chat {
  position: relative;
  z-index: 2;
  width: min(24rem, 86vw);
  display: grid;
  gap: 0.55rem;
}
/* Am Desktop rückt der Chat nach links, damit das Punkte-Finale
   der 3D-Szene rechts daneben sichtbar bleibt. */
@media (min-width: 901px) {
  .chat { transform: translateX(-42%); }
}

.chat-zeit {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text3);
  margin: 0.2rem 0 0.5rem;
}

.blase {
  max-width: 85%;
  padding: 0.68em 1em;
  border-radius: var(--radius);
  font-size: clamp(0.9375rem, 2.2vw, 1.0625rem);
  line-height: 1.35;
  width: fit-content;
}
.blase--von-mir {
  margin-left: auto;
  background: linear-gradient(135deg, var(--signal-hell), var(--signal-dunkel));
  color: var(--schwarz);
  font-weight: 600;
  border-bottom-right-radius: var(--radius);
}
.blase--antwort {
  background: #232220;
  color: var(--text);
  border-bottom-left-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(242, 240, 236, 0.05);
}

/* ---------- Filmstreifen und Trip-Streifen ---------- */

.streifen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  /* vh-Deckel: drei 9:16-Bilder nebeneinander bleiben zusammen
     unter ~68vh hoch — der ganze Streifen ist auf einen Blick da. */
  max-width: min(71rem, calc(111vh + 3rem));
  margin-inline: auto;
}
.streifen figure { margin: 0; }
.streifen .rahmen { max-width: none; }

/* ---------- Spots ---------- */

.vollbild {
  position: relative;
  min-height: 92vh;
  min-height: 92svh;
  overflow: clip;
  display: grid;
  align-items: end;
}
.vollbild > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  scale: 1.14;                 /* Spielraum für die Parallaxe            */
  /* Kevins Vorgabe 02.09.: der Wasserfall ist leiser Hintergrund,
     kein Vollbild-Statement — die Farben waren zu erdrückend. */
  opacity: 0.38;
  filter: saturate(0.55) contrast(1.05) brightness(0.72);
}
.vollbild::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(7, 7, 7, 0.30), rgba(7, 7, 7, 0.30)),
    linear-gradient(180deg, rgba(7, 7, 7, 0.68), rgba(7, 7, 7, 0.2) 28%, transparent 46%),
    linear-gradient(180deg, transparent 38%, rgba(7, 7, 7, 0.92) 94%);
}
.vollbild-inhalt {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(3.5rem, 9vh, 6.5rem);
}

.spots-gitter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 71rem;
  margin: clamp(3rem, 7vh, 5rem) auto 0;
}

.karte {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--flaeche);
  box-shadow: 0 0 0 1px rgba(242, 240, 236, 0.06), 0 24px 60px rgba(0, 0, 0, 0.5);
}
.karte img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.84) contrast(1.07) brightness(0.95);
  transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.karte:hover img { transform: scale(1.035); }
.karte::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(44, 22, 10, 0.10), rgba(44, 22, 10, 0.10)),
    linear-gradient(180deg, transparent 55%, rgba(7, 7, 7, 0.82));
}
.karte figcaption {
  position: absolute;
  z-index: 2;
  left: 1.4rem;
  right: 1.4rem;
  bottom: 1.25rem;
  margin: 0;
}
.karte-titel {
  display: block;
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.karte-zeile {
  display: block;
  color: rgba(242, 240, 236, 0.72);
  font-size: 0.875rem;
  margin-top: 0.15rem;
}

.spots-nachsatz {
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  text-align: center;
  color: var(--text2);
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  max-width: 38rem;
}
.spots-nachsatz strong { color: var(--text); font-weight: 600; }

/* ---------- Tafel: Transparenz-Rechnung ---------- */

.tafel {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: clamp(1.75rem, 4.5vw, 3.5rem);
  max-width: 46rem;
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
}

.zahlen-kacheln {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.kachel { text-align: center; padding: 0.5rem 0; }
.kachel-zahl {
  font-family: var(--schrift-display);
  font-size: clamp(2.6rem, 7vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kachel--du .kachel-zahl { color: var(--signal); }
.kachel-text { color: var(--text3); font-size: 0.875rem; margin-top: 0.55rem; }

.rechnung {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.rechnung caption {
  text-align: left;
  font-size: 0.8125rem;
  color: var(--text3);
  padding-bottom: 0.9rem;
}
.rechnung th, .rechnung td {
  padding: 0.85rem 0;
  border-top: 1px solid var(--linie);
  font-weight: 400;
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
}
.rechnung th { text-align: left; color: var(--text2); padding-right: 1rem; }
.rechnung td { text-align: right; color: var(--text); white-space: nowrap; }
.rechnung tr.betont th { color: var(--text); font-weight: 600; }
.rechnung tr.betont td { font-weight: 600; }
.rechnung tr.betont--du td { color: var(--signal); }

.fussnote {
  font-size: 0.8125rem;
  color: var(--text3);
  margin-top: 1.4rem;
  line-height: 1.55;
}

/* ---------- Schritte ---------- */

.schritte {
  list-style: none;
  counter-reset: schritt;
  margin: clamp(2rem, 5vh, 3rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1.5rem, 3.5vh, 2.25rem);
  max-width: 34rem;
}
.schritte li {
  counter-increment: schritt;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.1rem;
  align-items: start;
}
.schritte li::before {
  content: counter(schritt, decimal-leading-zero);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text3);
  font-family: var(--schrift-display);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.schritt-titel { display: block; font-weight: 600; color: var(--text); font-size: 1.125rem; }
.schritte p { color: var(--text2); margin-top: 0.3rem; font-size: 1rem; }

/* ---------- Punkte (Partner-Nutzen) ---------- */

.punkte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(2.5rem, 6vh, 4rem);
  max-width: 71rem;
  margin-inline: auto;
}
.punkt {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.punkt h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.punkt p { color: var(--text2); font-size: 1rem; margin-top: 0.6rem; }

/* ---------- Referenz (Bouncelab) ---------- */

.referenz {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
  max-width: 46rem;
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
}
.referenz-name {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.referenz p { color: var(--text2); margin-top: 1rem; max-width: 30rem; margin-inline: auto; }

/* ---------- Formular ---------- */

.formular {
  display: grid;
  gap: 1.25rem;
  max-width: 34rem;
  margin-top: clamp(2rem, 5vh, 3rem);
}
.feld { display: grid; gap: 0.45rem; }
.feld label { font-size: 0.875rem; font-weight: 600; color: var(--text2); }
.feld input, .feld textarea {
  font: inherit;
  color: var(--text);
  background: var(--flaeche-hell);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 0.85em 1em;
  width: 100%;
}
.feld input:focus-visible, .feld textarea:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 0;
  border-color: transparent;
}
.feld textarea { min-height: 8.5rem; resize: vertical; }

/* ---------- Fusszeile ---------- */

.fuss {
  border-top: 1px solid var(--linie);
  padding: clamp(3rem, 7vh, 4.5rem) 0 calc(2.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--schwarz);
}
.fuss-inhalt {
  display: grid;
  gap: 2rem;
  margin-top: clamp(2.5rem, 6vh, 4rem);
}

/* ---------- Signatur F6 ----------
   Nachbau der Mail-Signatur: Linie oben, Wortmarke, EST. 2026 zwischen
   zwei Linien, Claim in der Signalfarbe. Die Masse sind aus dem SVG
   uebernommen und in em gerechnet, damit alles an einer Schriftgroesse
   haengt — signatur-marke aendern skaliert den ganzen Block. */

.signatur {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}
.signatur-linie {
  display: block;
  height: 1px;
  background: var(--linie-marke);
  margin-bottom: clamp(1.1rem, 3vh, 1.7rem);
}
.signatur-marke {
  font-family: var(--schrift-display);
  font-size: clamp(1.75rem, 6vw, 2.75rem);
  font-weight: 700;
  letter-spacing: 0.13em;
  margin-right: -0.13em;          /* Ausgleich fuer das letzte Zeichen */
  line-height: 1;
  color: var(--text);
}
/* EST. 2026 sitzt auf der Linie: die Linie laeuft durch, der Text
   traegt die Hintergrundfarbe und stanzt sich frei. */
.signatur-est {
  position: relative;
  margin-top: clamp(0.9rem, 2.4vh, 1.35rem);
}
.signatur-est::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--linie-marke);
}
.signatur-est span {
  position: relative;
  background: var(--schwarz);
  padding-inline: 1.1em;
  font-family: var(--schrift-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.33em;
  margin-right: -0.33em;
  color: var(--text3);
}
.signatur-claim {
  margin-top: clamp(0.85rem, 2.2vh, 1.25rem);
  font-family: var(--schrift-display);
  font-size: clamp(0.8125rem, 2.4vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.42em;
  margin-right: -0.42em;
  color: var(--signal);
}
.fuss-marke { font-family: var(--schrift-display); font-size: 1.125rem; font-weight: 700; letter-spacing: 0.22em; }
.fuss-anspruch {
  font-family: var(--schrift-display);
  margin-top: 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: var(--text3);
  font-weight: 600;
}
.fuss-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; position: relative; }
.fuss-nav a { font-family: var(--schrift-display); color: var(--text2); font-size: 1rem; }
.fuss-nav a:hover { color: var(--text); text-decoration: none; }
.fuss-klein { color: var(--text3); font-size: 0.8125rem; text-align: center; }

/* ---------- Kernteam ---------- */

.kernteam {
  list-style: none;
  margin: clamp(2rem, 5vh, 3rem) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 3.5rem);
}
.kernteam li {
  display: grid;
  gap: 0.25rem;
  min-width: 7rem;
}
.kernteam-name {
  font-family: var(--schrift-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin-right: -0.16em;
  text-transform: uppercase;
  color: var(--text);
}
.kernteam-rolle {
  font-size: 0.8125rem;
  color: var(--text3);
  line-height: 1.4;
}

/* ---------- Textseiten (Impressum) ---------- */

.textseite {
  padding: calc(var(--nav-hoehe) + clamp(3rem, 9vh, 6rem)) 0 clamp(3rem, 8vh, 5rem);
}
.textseite h1 {
  font-family: var(--schrift-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.05;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}
.textseite h2 {
  font-family: var(--schrift-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: clamp(2rem, 5vh, 3rem);
  margin-bottom: 0.7rem;
}
.textseite p { color: var(--text2); margin-bottom: 0.9rem; }
.textseite address { font-style: normal; color: var(--text2); }
.textseite .stand { color: var(--text3); font-size: 0.8125rem; margin-top: 2.5rem; }

/* ---------- Responsiv ---------- */

@media (max-width: 900px) {
  .punkte { grid-template-columns: 1fr; max-width: 34rem; }
}

@media (max-width: 740px) {
  .zweispalter, .zweispalter--schmalbild {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .zweispalter .rahmen { justify-self: center; }

  /* Auf dem Handy dürfen die Fotos gross laufen */
  .rahmen--schmal { max-width: min(20rem, 76vw); }
  .rahmen--mittel, .rahmen--gross, .rahmen--breit { max-width: 100%; }

  .spots-gitter { grid-template-columns: 1fr; }
  .karte img { aspect-ratio: 4 / 5; }

  /* Streifen werden zur wischbaren Filmrolle */
  .streifen {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 76vw;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 max(1.25rem, env(safe-area-inset-left)) 0.5rem;
    margin: 0 calc(-1 * max(1.25rem, env(safe-area-inset-left)));
    scrollbar-width: none;
  }
  .streifen::-webkit-scrollbar { display: none; }
  .streifen figure { scroll-snap-align: center; }

  .zahlen-kacheln { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .einordnung { min-height: 60vh; }
}

/* ---------- Bewegung nur, wenn erwünscht ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .karte:hover img { transform: none; }
  .vollbild > img { scale: 1; }
}

/* ---------- Eastereggs (02.09.2026) ----------
   Dezente Hintergrund-Symbolik, von kravon.js eingesetzt:
   - links eine angedeutete Wasserfall-Zeichnung, die sich beim
     Scrollen nachzieht
   - ein Basejumper, der beim Scrollen quer durchs Bild segelt
   - der Bungee-Vorhang beim Seitenwechsel
   Alles pointer-events: none. Die Zeichnungen liegen HINTER dem
   Inhalt (z-index -1) — Sektionen mit eigenem Hintergrund decken
   sie bewusst ab, dadurch tauchen sie nur stellenweise auf. */

/* Wasserfall links: orange, leicht gesättigt, und die Dash-Muster
   fliessen dauerhaft nach unten — angedeutetes fliessendes Wasser
   statt statischer Zeichnung (Kevins Feedback 02.09., spät). */
.wasserfall-zeichnung {
  position: fixed;
  top: 0;
  left: clamp(0.25rem, 1.5vw, 2rem);
  height: 100vh;
  width: auto;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
}
.wasserfall-zeichnung path {
  stroke: var(--signal);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}
/* Fels und Ufer in Grau — der Berg, über den das Wasser fällt */
.wasserfall-zeichnung .fels {
  stroke: var(--text3);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

/* Wingsuit-Silhouette statt Strichfigur; gefüllt, damit die
   Delta-Form auch bei niedriger Deckkraft lesbar bleibt. */
.basejumper {
  position: fixed;
  top: 0;
  left: 0;
  width: 60px;
  z-index: -1;
  pointer-events: none;
  opacity: 0.18;
  will-change: transform;
}
.basejumper path { fill: var(--text3); }
/* Orange Nähte zeichnen die Suit-Bahnen nach — leicht skizziert */
.basejumper .naht {
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0.85;
}

/* Baumel-Dude: hängt dauerhaft unter der Leiste, gedämpftes Pendel.
   Der Zeiger schiebt ihn in seine eigene Bewegungsrichtung an
   (kravon.js) — Wisch nach links schwingt ihn nach links. */
.baumel-dude {
  position: fixed;
  top: calc(var(--nav-hoehe) + env(safe-area-inset-top, 0px) - 2px);
  right: clamp(1.5rem, 8vw, 7rem);
  width: 44px;
  height: auto;
  z-index: 30;
  opacity: 0.32;
  cursor: default;
  will-change: transform;
  transition: opacity 0.3s ease;
}
.baumel-dude:hover { opacity: 0.55; }
.baumel-dude .seil { stroke: var(--text3); stroke-width: 1.5; }
.baumel-dude line { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }
.baumel-dude circle { fill: var(--text); }

/* Schleier oben: Inhalt blasst beim Hochscrollen weich aus, bevor
   er unter der Leiste verschwindet — wie der Hero es vormacht
   (Kevins Wunsch 03.09.). Reine Fläche, kostet nichts. */
.schleier-oben {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 16vh;
  z-index: 40;
  pointer-events: none;
  background: linear-gradient(180deg, var(--grund) 0%, transparent 100%);
}

/* DU GOOFY — wer fünfmal auf EST. 2026 klickt, hat es so gewollt. */
.goofy {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  pointer-events: none;
  font-family: var(--schrift-display);
  font-size: clamp(3rem, 14vw, 9rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--signal);
  text-shadow: 0 10px 60px rgba(0, 0, 0, 0.6);
}

/* Lost-Place-Hint: angelehnte Tuer mit Lichtspalt, rechts unten,
   nur dort sichtbar, wo eine Sektion keinen eigenen Hintergrund hat. */
.lostplace-zeichnung {
  position: fixed;
  right: clamp(0.5rem, 2.5vw, 3rem);
  bottom: 6vh;
  height: 34vh;
  width: auto;
  z-index: -1;
  pointer-events: none;
  opacity: 0.08;
}
.lostplace-zeichnung path,
.lostplace-zeichnung line,
.lostplace-zeichnung circle {
  stroke: var(--text3);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}
.lostplace-zeichnung .licht { stroke: var(--signal); stroke-width: 1.5; }

.bungee-vorhang {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--grund);
  pointer-events: none;
  display: grid;
  justify-items: center;
  align-items: end;
  visibility: hidden;           /* kravon.js schaltet sichtbar */
}
.bungee-springer {
  width: 56px;
  height: auto;
  transform: translateY(92%);   /* hängt unter der Vorhang-Kante */
}
.bungee-springer .seil { stroke: var(--text3); stroke-width: 2; }
.bungee-springer line { stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.bungee-springer circle { fill: var(--text); }