@import url("../fonts.css");

/* ==========================================================================
   HANDFEST — Fallstudie VETURA
   Ein Haus, eine Schrift (Onest 300–800), ein Akzent (Orange).
   Die Folien der Praesentation sind echtes HTML: jede .folie ist ein
   Container, alle Masse darin stehen in cqw. Dadurch skaliert eine Folie
   gross auf der Buehne, klein in der Rueckschau und winzig im Faecher —
   immer mit demselben Markup.
   ========================================================================== */

:root {
  --tinte:        #22262E;
  --tinte-weich:  #5A616E;
  --papier:       #F1F1F0;
  --papier-tief:  #E6E6E4;
  --weiss:        #FFFFFF;
  --orange:       #F2A32B;
  --orange-hell:  #FFC978;
  --orange-tief:  #8A5200;
  --schiefer:     #3B3E45;
  --nacht:        #14161A;
  --nacht-weich:  #23262C;

  --linie:        rgba(34, 38, 46, .12);
  --linie-nacht:  rgba(255, 255, 255, .14);

  --r-gross: 32px;
  --r-karte: 22px;
  --r-klein: 14px;

  --spur: clamp(1.1rem, 4vw, 2rem);      /* Seitenrand */
  --bahn: 1360px;                         /* Satzbreite */
  --luft: clamp(4.5rem, 9vw, 8.5rem);     /* Abstand zwischen Abschnitten */
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: "Onest", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1rem, .96rem + .2vw, 1.09rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.06; letter-spacing: -.03em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.springmarke {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--tinte); color: var(--weiss);
  padding: .8rem 1.2rem; border-radius: 0 0 var(--r-klein) 0;
}
.springmarke:focus { left: 0; }

:focus-visible { outline: 3px solid var(--orange-tief); outline-offset: 3px; border-radius: 4px; }

.bahn { width: min(100% - 2 * var(--spur), var(--bahn)); margin-inline: auto; }
.bahn--eng { width: min(100% - 2 * var(--spur), 980px); margin-inline: auto; }

.abschnitt { padding-block: var(--luft); }
.abschnitt--dicht { padding-block: calc(var(--luft) * .6); }

/* --------------------------------------------------------------- Bausteine */

/* Pille mit rundem Zeichen — das Erkennungsmerkmal der Vorlage */
.marke {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--weiss); color: var(--tinte);
  border-radius: 999px; padding: .42rem 1.1rem .42rem .42rem;
  font-size: .95rem; font-weight: 500; letter-spacing: -.01em;
  box-shadow: 0 1px 2px rgba(34, 38, 46, .06);
}
.marke__zeichen {
  width: 1.9rem; height: 1.9rem; border-radius: 999px;
  background: var(--orange); color: var(--tinte);
  display: grid; place-items: center; font-size: 1rem; flex: none;
}
.marke--nacht { background: rgba(255, 255, 255, .10); color: var(--weiss); box-shadow: none; }
.marke--rand  { background: transparent; border: 1px solid var(--linie); box-shadow: none; }

.stern { color: var(--orange); font-size: 1.4rem; line-height: 1; }
.stern--gross { font-size: 2rem; }

.augbraue {
  font-size: .82rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--orange-tief);
}

.titel-xl { font-size: clamp(2.6rem, 7.4vw, 6.4rem); font-weight: 800; letter-spacing: -.045em; }
.titel-l  { font-size: clamp(1.9rem, 4vw, 3.3rem);   font-weight: 700; letter-spacing: -.035em; }
.titel-m  { font-size: clamp(1.4rem, 2.4vw, 2rem);   font-weight: 600; letter-spacing: -.025em; }

.lauf { color: var(--tinte-weich); max-width: 62ch; }
.lauf--mitte { margin-inline: auto; text-align: center; }

.knopf {
  display: inline-flex; align-items: center; gap: .6rem;
  border-radius: 999px; padding: .95rem 1.7rem;
  font: inherit; font-weight: 600; letter-spacing: -.01em;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.knopf:hover { transform: translateY(-2px); }
.knopf--voll  { background: var(--orange); color: var(--tinte); }
.knopf--voll:hover { background: var(--orange-hell); }
.knopf--rand  { border-color: var(--linie); color: var(--tinte); }
.knopf--rand:hover { background: var(--weiss); }
.knopf--nacht { background: var(--weiss); color: var(--tinte); }

.karte {
  background: var(--weiss); border-radius: var(--r-karte);
  border: 1px solid var(--linie); padding: clamp(1.3rem, 2.4vw, 2.1rem);
}

/* Einblenden beim Scrollen */
.zeig { opacity: 1; }
.js .zeig { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .zeig.da { opacity: 1; transform: none; }

/* ------------------------------------------------------------------- Kopf */

.kopf {
  position: sticky; top: 0; z-index: 40;
  background: rgba(241, 241, 240, .86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.kopf.geheftet { border-bottom-color: var(--linie); }
.kopf__innen {
  display: flex; align-items: center; gap: 1.4rem;
  padding-block: .85rem;
}
.wortmarke {
  font-weight: 800; font-size: 1.16rem; letter-spacing: .1em;
  text-decoration: none; white-space: nowrap;
}
.wortmarke span { color: var(--orange-tief); }
.kopf__nav { margin-left: auto; display: flex; gap: 1.6rem; }
.kopf__nav a {
  text-decoration: none; font-size: .96rem; font-weight: 500;
  color: var(--tinte-weich); white-space: nowrap;
}
.kopf__nav a:hover { color: var(--tinte); }
.kopf .knopf { padding: .62rem 1.25rem; font-size: .95rem; }

@media (max-width: 900px) {
  .kopf__nav { display: none; }
  .kopf .knopf { margin-left: auto; }
}

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

.auftakt { padding: 0 0 clamp(2rem, 5vw, 3.5rem); }
.auftakt__buehne { position: relative; }

.auftakt__kopfzeile {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .6rem 1.4rem; padding-block: clamp(1.6rem, 4vw, 3rem) 1.1rem;
}
.auftakt__kopfzeile .lauf { max-width: 46ch; }

/* ------------------------------------------------- Folien (das Kernstueck) */

.buehne { position: relative; }
.buehne--rollbar { overflow-x: auto; overflow-y: hidden; padding-bottom: .5rem; }
.buehne--rollbar > .folie,
.buehne--rollbar > .rahmen { min-width: 560px; }

.folie {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  container-type: inline-size;
  background: var(--weiss); color: var(--tinte);
  border-radius: clamp(8px, 1.4cqw, 20px);
  isolation: isolate;
}
.folie--nacht { background: var(--nacht); color: var(--weiss); }
.folie--titel { background: var(--nacht); color: var(--weiss); }
.folie__bild { position: absolute; inset: 0; z-index: 0; }
.folie__bild img { width: 100%; height: 100%; object-fit: cover; }
.folie__schleier { position: absolute; inset: 0; z-index: 1; }
.folie__lage { position: absolute; inset: 0; z-index: 2; padding: 4.4cqw; display: flex; flex-direction: column; }

/* Rahmen: Folie in einer Geraetefassung, wie in der Vorlage */
.rahmen {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: clamp(12px, 1.9cqw, 26px);
  padding: clamp(.5rem, 1vw, .9rem);
  box-shadow: 0 24px 60px -34px rgba(34, 38, 46, .5);
}
.rahmen--nacht { background: var(--nacht); border-color: rgba(255, 255, 255, .12); }

/* Bausteine INNERHALB einer Folie — alle Masse in cqw */
.f-marke {
  display: inline-flex; align-items: center; gap: .8cqw;
  background: var(--weiss); color: var(--tinte);
  border-radius: 999px; padding: .7cqw 1.6cqw .7cqw .7cqw;
  font-size: 1.55cqw; font-weight: 500; line-height: 1;
}
.f-marke__zeichen {
  width: 2.6cqw; height: 2.6cqw; border-radius: 999px; flex: none;
  background: var(--orange); color: var(--tinte);
  display: grid; place-items: center; font-size: 1.4cqw;
}
.f-marke--nacht { background: rgba(255, 255, 255, .12); color: var(--weiss); }

.f-logo { display: flex; align-items: center; gap: .7cqw; font-weight: 800; letter-spacing: .12em; font-size: 1.7cqw; }
.f-logo__zeichen {
  width: 3.4cqw; height: 3.4cqw; border-radius: .9cqw; flex: none;
  background: var(--orange); color: var(--nacht);
  display: grid; place-items: center; font-size: 2cqw; font-weight: 800;
}
.f-logo--klein { font-size: 1.4cqw; }
.f-logo--klein .f-logo__zeichen { width: 2.7cqw; height: 2.7cqw; font-size: 1.6cqw; }

.f-titel   { font-size: 3.5cqw; font-weight: 700; line-height: 1.1; letter-spacing: -.03em; }
.f-titel--gross { font-size: 4.6cqw; }
.f-text    { font-size: 1.62cqw; line-height: 1.42; }
.f-klein   { font-size: 1.28cqw; line-height: 1.4; }
.f-zahl    { font-size: 4.2cqw; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.f-grau    { color: var(--tinte-weich); }
.folie--nacht .f-grau, .folie--titel .f-grau { color: rgba(255, 255, 255, .72); }

.f-karte {
  background: var(--weiss); border-radius: 1.6cqw; padding: 2.2cqw;
  border: 1px solid var(--linie);
}
.f-karte--grau  { background: var(--schiefer); color: var(--weiss); border-color: transparent; }
.f-karte--glas  { background: rgba(255, 255, 255, .10); border-color: var(--linie-nacht); color: var(--weiss); }
.f-karte--orange{ background: var(--orange); border-color: transparent; color: var(--tinte); }

.f-pille {
  display: inline-flex; align-items: center; gap: .7cqw;
  background: var(--weiss); color: var(--tinte); border-radius: 999px;
  padding: .55cqw 1.3cqw .55cqw .55cqw; font-size: 1.24cqw; line-height: 1;
}
.f-pille__punkt {
  width: 2cqw; height: 2cqw; border-radius: 999px; flex: none;
  background: var(--orange); display: grid; place-items: center; font-size: 1.1cqw;
}

/* --- Folie 1: Titel ------------------------------------------------------ */
.folie--titel .folie__schleier {
  background: linear-gradient(180deg, rgba(20, 22, 26, .42) 0%, rgba(20, 22, 26, .10) 38%, rgba(20, 22, 26, .55) 100%);
}
.folie--titel .folie__lage { padding: 0; }
.titelfolie__kappe {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  background: var(--nacht); color: var(--weiss);
  border-radius: 0 0 1.6cqw 1.6cqw; padding: 1.1cqw 2.6cqw 1.2cqw;
  display: flex; align-items: center; gap: .9cqw; text-align: left;
}
.titelfolie__kappe small { display: block; font-size: 1.05cqw; font-weight: 400; letter-spacing: 0; color: rgba(255, 255, 255, .72); line-height: 1.25; }
.titelfolie__mitte {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: 0 8cqw 6cqw;
}
.titelfolie__mitte h1, .titelfolie__mitte .f-titel { max-width: 30ch; }
.titelfolie__fuss {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 1cqw;
  padding: 1cqw; color: var(--tinte);
}
.titelfolie__kasten {
  background: var(--papier); border-radius: 1.4cqw; padding: 1.5cqw 2.2cqw;
  display: flex; align-items: center; gap: 1.2cqw;
}
.titelfolie__kasten--rechts { justify-content: flex-end; text-align: right; }
.titelfolie__mittelwort {
  align-self: center; color: var(--weiss); font-size: 1.9cqw; padding: 0 1.5cqw;
}

/* --- Folie: Zahlen ------------------------------------------------------- */
.zahlenfolie .folie__lage { padding: 3.2cqw; gap: 2cqw; }
.zahlenfolie__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 2cqw; }
.zahlenfolie__kopf .mitte { text-align: center; flex: 1; }
.zahlenfolie__gitter {
  flex: 1; display: grid; gap: 1.2cqw;
  grid-template-columns: 16% 1fr 21%;
  grid-template-rows: 1fr auto;
  min-height: 0;
}
.zahlenfolie__gitter > .zahlenfolie__bild:first-child { grid-column: 1; grid-row: 1; }
.zahlenfolie__bild { border-radius: 1.2cqw; overflow: hidden; position: relative; }
.zahlenfolie__bild img { width: 100%; height: 100%; object-fit: cover; }
.zahlenfolie__haupt { grid-column: 2; grid-row: 1 / span 2; position: relative; border-radius: 1.4cqw; overflow: hidden; }
.zahlenfolie__haupt img { width: 100%; height: 100%; object-fit: cover; }
.zahlenfolie__haupt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 22, 26, .55), rgba(20, 22, 26, .18)); }
.zahlenfolie__kurve { position: absolute; inset: 0; z-index: 2; padding: 2cqw; color: var(--weiss); }
.zahlenfolie__kurve svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.zahlenfolie__rechts { grid-column: 3; grid-row: 1; display: grid; gap: 1.2cqw; align-content: start; }
.zahlenfolie__unten { grid-column: 1; grid-row: 2; display: grid; gap: .8cqw; align-content: end; }

.punktreihe { display: flex; align-items: center; }
.punktreihe span {
  width: 2.4cqw; height: 2.4cqw; border-radius: 999px; margin-right: -.7cqw;
  border: .22cqw solid var(--weiss); background: var(--papier-tief);
  display: grid; place-items: center; font-size: 1cqw; color: var(--tinte-weich);
}
.punktreihe span:last-child { background: var(--orange); color: var(--tinte); }

/* --- Folie: Beteiligung -------------------------------------------------- */
.modellfolie .folie__lage { padding: 3.2cqw; gap: 2cqw; }
.modellfolie__gitter { flex: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.4cqw; min-height: 0; }
.modellfolie__karte { display: flex; flex-direction: column; gap: 1.2cqw; }
.modellfolie__karte hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .18); margin: 0; width: 100%; }
.modellfolie__bild { position: relative; border-radius: 1.6cqw; overflow: hidden; }
.modellfolie__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.modellfolie__bild > div { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 2cqw; color: var(--weiss); }
.modellfolie__bild::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20, 22, 26, .58), rgba(20, 22, 26, .12) 45%, rgba(20, 22, 26, .58)); }

/* --- Folie: Problem ------------------------------------------------------ */
.problemfolie .folie__schleier { background: linear-gradient(180deg, rgba(20, 22, 26, .72), rgba(20, 22, 26, .86)); }
.problemfolie .folie__lage { padding: 3.4cqw; justify-content: space-between; }
.problemfolie__liste { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqw; }
.problemfolie__liste .f-karte--glas { padding: 1.6cqw; display: grid; gap: .8cqw; align-content: start; }
.problemfolie__nummer { color: var(--orange); font-size: 1.2cqw; font-weight: 600; }

/* --- Folie: Bewertungen -------------------------------------------------- */
.stimmenfolie .folie__lage { padding: 3.2cqw; justify-content: space-between; }
.stimmenfolie__feld { position: absolute; inset: 0; z-index: 1; opacity: .55; }
.stimmenfolie__feld svg { width: 100%; height: 100%; }
.stimmenfolie__reihe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1cqw; }
.stimmenfolie__karte { padding: 1.5cqw; display: grid; gap: .9cqw; align-content: start; }
.sterne { color: var(--orange); font-size: 1.2cqw; letter-spacing: .2cqw; }
.stimmenfolie__fuss { display: flex; align-items: center; gap: 1cqw; }
.stimmenfolie__kreis {
  width: 2.6cqw; height: 2.6cqw; border-radius: 999px; flex: none;
  background: var(--orange); color: var(--tinte);
  display: grid; place-items: center; font-size: 1.1cqw; font-weight: 700;
}

/* --- Folie: Neue Filiale ------------------------------------------------- */
.filialfolie .folie__schleier { background: linear-gradient(96deg, rgba(20, 22, 26, .92) 34%, rgba(20, 22, 26, .35) 78%); }
.filialfolie .folie__lage { padding: 3.4cqw; justify-content: space-between; }
.filialfolie__pillen { display: flex; flex-wrap: wrap; gap: .8cqw; max-width: 58%; }
.filialfolie__tiere { position: absolute; right: 3.4cqw; bottom: 3.4cqw; z-index: 3; }
.filialfolie__tiere .f-karte--glas { padding: 1.4cqw 1.8cqw; backdrop-filter: blur(6px); }
.tierreihe { display: flex; gap: 1.4cqw; margin-top: 1.2cqw; }
.tierreihe figure { margin: 0; text-align: center; width: 7cqw; }
.tierreihe img { width: 6cqw; height: 6cqw; border-radius: 999px; object-fit: cover; margin-inline: auto; }
.tierreihe figcaption { font-size: 1.1cqw; margin-top: .6cqw; }

/* --- Folie: Team --------------------------------------------------------- */
.teamfolie .folie__lage { padding: 3.2cqw; gap: 1.8cqw; }
.teamfolie__gitter { flex: 1; display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.2cqw; min-height: 0; }
.teamfolie__bild { position: relative; border-radius: 1.4cqw; overflow: hidden; }
.teamfolie__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.teamfolie__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 22, 26, .10), rgba(20, 22, 26, .62)); }
.teamfolie__auf { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 2cqw; color: var(--weiss); display: flex; align-items: flex-end; justify-content: space-between; gap: 1cqw; }
.teamfolie__spalte { display: grid; gap: 1.2cqw; grid-template-rows: 1fr auto; min-height: 0; }
.namensliste { display: grid; grid-template-columns: 1fr 1fr; gap: .7cqw; margin-top: 1.2cqw; }
.namensliste li { display: flex; align-items: center; gap: .7cqw; background: rgba(255, 255, 255, .07); border-radius: 999px; padding: .5cqw .9cqw; font-size: 1.05cqw; }
.namensliste b { font-weight: 600; }
.namensliste small { color: rgba(255, 255, 255, .66); }
.namensliste i {
  width: 2cqw; height: 2cqw; border-radius: 999px; flex: none; background: var(--orange);
  display: grid; place-items: center; font-size: .95cqw; font-style: normal; font-weight: 700; color: var(--tinte);
}

/* --- Folie: Zeitplan ----------------------------------------------------- */
.planfolie .folie__lage { padding: 3.2cqw; gap: 2cqw; }
.planfolie__gitter { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; align-items: stretch; }
.planfolie__karte { display: flex; flex-direction: column; gap: 1cqw; }
.planfolie__karte ul { display: grid; gap: .6cqw; font-size: 1.24cqw; color: var(--tinte-weich); }
.planfolie__karte li { padding-left: 1.6cqw; position: relative; }
.planfolie__karte li::before { content: "·"; position: absolute; left: .5cqw; color: var(--orange); font-weight: 700; }
.planfolie__karte--orange ul { color: rgba(34, 38, 46, .8); }
.planfolie__karte .f-pille { margin-top: auto; align-self: flex-start; background: var(--papier); }
.planfolie__karte--orange .f-pille { background: var(--weiss); }

/* Bildfelder mit weisser Schrift bekommen einen dunklen Grund UNTER dem Foto.
   Zwei Gruende: faellt das Bild aus, bleibt die Schrift lesbar, und die
   Kontrastmessung sieht nicht mehr Weiss auf Weiss. */
.zahlenfolie__haupt, .modellfolie__bild, .teamfolie__bild { background: var(--nacht); }

/* Im Handybildschirm ist der Grund dunkel, dort darf f-grau nicht das dunkle
   Grau der hellen Folie behalten. */
.handy__schirm .f-grau,
.zahlenfolie__kurve .f-grau,
.modellfolie__bild .f-grau,
.teamfolie__auf .f-grau { color: rgba(255, 255, 255, .72); }

/* --- Folie: Handy -------------------------------------------------------- */
.handyfolie { background: var(--papier-tief); }
.handyfolie .folie__lage { padding: 0; align-items: center; justify-content: center; }
.handy {
  width: 27cqw; aspect-ratio: 9 / 17; background: var(--nacht);
  border-radius: 3.2cqw; padding: .9cqw; margin-top: 7cqw;
  box-shadow: 0 6cqw 9cqw -4cqw rgba(20, 22, 26, .55);
  transform: rotate(-4deg);
}
.handy__schirm {
  height: 100%; border-radius: 2.6cqw; background: var(--nacht-weich);
  padding: 2.2cqw 1.8cqw; overflow: hidden; color: var(--weiss);
  display: flex; flex-direction: column; gap: 1.4cqw;
}
.handy__stimmen { display: grid; gap: 1.2cqw; }
.handy__stimmen .f-karte--glas { padding: 1.4cqw; border-radius: 1.4cqw; }

/* --------------------------------------------------------- Abschnitt: Projekt */

.kachelreihe { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.8rem, 1.4vw, 1.4rem); }
.kachel {
  position: relative; border-radius: var(--r-karte); overflow: hidden;
  aspect-ratio: 11 / 14; background: var(--papier-tief);
}
.kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kachel__stern {
  position: absolute; right: 1rem; top: 1rem; z-index: 3;
  width: 2.3rem; height: 2.3rem; border-radius: 999px; background: var(--orange);
  display: grid; place-items: center; color: var(--tinte); font-size: 1.1rem;
}
.kachel__schild {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 3;
  background: var(--weiss); border-radius: var(--r-klein);
  padding: .6rem .9rem; font-weight: 500; font-size: clamp(.9rem, 1.1vw, 1.02rem);
  line-height: 1.25; max-width: calc(100% - 2rem);
}
.kachel--hoch { align-self: start; }
.kachel--orange { background: var(--orange); }
.kachel--orange .kachel__schild { top: 1rem; bottom: auto; }
.kachel--orange .kachel__stern { display: none; }
.kachelreihe__stapel { position: relative; }
.kachelreihe__stapel::before,
.kachelreihe__stapel::after {
  content: ""; position: absolute; z-index: 0; border-radius: var(--r-karte); background: var(--orange-hell);
}
.kachelreihe__stapel::before { inset: 12% -7% 30% 40%; transform: rotate(6deg); opacity: .75; }
.kachelreihe__stapel::after  { inset: 26% -11% 14% 55%; transform: rotate(-4deg); opacity: .5; }
.kachelreihe__stapel .kachel { position: relative; z-index: 1; }

/* ------------------------------------------------------- Abschnitt: Eckdaten */

.eckdaten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linie); border-radius: var(--r-karte); overflow: hidden; border: 1px solid var(--linie); }
.eckdaten > div { background: var(--papier); padding: clamp(1.2rem, 2vw, 1.8rem); }
.eckdaten dt { font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-weich); font-weight: 600; }
.eckdaten dd { margin: .5rem 0 0; font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 500; }

/* --------------------------------------------------------- Abschnitt: Ablauf */

.ablauf { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); position: relative; }
.ablauf__karte {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-gross);
  padding: clamp(1.4rem, 2.4vw, 2.2rem); display: flex; flex-direction: column; gap: clamp(2rem, 5vw, 4rem);
  position: relative;
}
.ablauf__karte--orange { background: var(--orange); border-color: transparent; }
.ablauf__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ablauf__pfeil {
  position: absolute; right: calc(-1 * clamp(1.5rem, 3vw, 3rem) / 2); top: 50%;
  transform: translate(50%, -50%); z-index: 2;
  width: clamp(2.4rem, 4vw, 3.4rem); height: clamp(2.4rem, 4vw, 3.4rem); border-radius: 999px;
  background: var(--papier-tief); color: var(--tinte); display: grid; place-items: center; font-size: 1.2rem;
}

/* ------------------------------------------------------- Abschnitt: Strategie */

.strategie { position: relative; }
.strategie__titel { position: relative; z-index: 0; }
.strategie__karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.8rem); align-items: start; margin-top: clamp(-2rem, -2.2vw, -.8rem); position: relative; z-index: 1; }
.strategie__karte {
  background: var(--weiss); border: 2px solid var(--orange); border-radius: var(--r-gross);
  padding: clamp(1.2rem, 2vw, 1.8rem); display: grid; gap: 1.2rem;
}
.strategie__karte:nth-child(2) { margin-top: clamp(2rem, 5vw, 4.5rem); }
.strategie__karte:nth-child(3) { margin-top: clamp(1rem, 2vw, 1.6rem); }
.strategie__karte img { border-radius: var(--r-klein); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.strategie__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.strategie__nummer { font-weight: 600; color: var(--tinte-weich); font-variant-numeric: tabular-nums; }
.strategie__balken { display: flex; gap: .3rem; }
.strategie__balken i { width: 1.1rem; height: .22rem; background: var(--orange-hell); border-radius: 2px; }
.strategie__balken i:nth-child(2) { background: var(--orange); }

/* ---------------------------------------------------- Abschnitt: Der Satz */

.satz { position: relative; text-align: center; }
.satz__tier { width: min(46%, 430px); margin-inline: auto; position: relative; z-index: 1; }
.satz__tier img { border-radius: var(--r-gross) var(--r-gross) 0 0; }
.satz__faecher {
  display: flex; justify-content: center; align-items: flex-end; gap: clamp(.5rem, 1.4vw, 1.2rem);
  margin-top: clamp(-9rem, -13vw, -4rem); position: relative; z-index: 2;
}
.satz__faecher > * { flex: 0 0 clamp(140px, 26%, 340px); }
.satz__faecher > *:nth-child(1) { transform: rotate(-3deg) translateY(1.5rem); }
.satz__faecher > *:nth-child(3) { transform: rotate(3deg) translateY(1.5rem); }
.satz__faecher > *:nth-child(2) { flex-basis: clamp(170px, 30%, 400px); z-index: 2; }

.rueckschau { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 2rem); align-items: center; }
.rueckschau__spalte { display: grid; gap: clamp(1rem, 2vw, 2rem); }
.rueckschau__text { text-align: center; padding: clamp(1rem, 3vw, 2rem) 0; }

/* -------------------------------------------------------- Abschnitt: Leistungen */

.leistungen { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.8rem); align-items: center; }
.leistungen__mitte { text-align: center; }
.leistungen__mitte .titel-xl { font-size: clamp(2.1rem, 3.4vw, 3.4rem); }
.leistungen__karte {
  border-radius: var(--r-gross); border: 1px solid var(--linie); background: transparent;
  padding: clamp(1.3rem, 2.2vw, 2rem); display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-content: space-between; min-height: 13rem;
}
.leistungen__karte--voll { background: var(--papier-tief); border-color: transparent; }
.leistungen__karte--weiss { background: var(--weiss); }
.leistungen__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }

/* ------------------------------------------------------------ Karussell */

.karussell { position: relative; }
.karussell__bahn {
  display: flex; gap: clamp(1rem, 2vw, 2rem); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: .5rem;
}
.karussell__bahn::-webkit-scrollbar { display: none; }
.karussell__bahn > * { flex: 0 0 min(100%, 980px); scroll-snap-align: center; }
.karussell__steuer { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: clamp(1.4rem, 3vw, 2.4rem); }
.karussell__striche { display: flex; gap: .5rem; }
.karussell__striche button {
  width: 2.6rem; height: .3rem; border: 0; padding: 0; border-radius: 999px;
  background: var(--papier-tief); cursor: pointer;
}
.karussell__striche button[aria-current="true"] { background: var(--orange); }
.karussell__pfeil {
  width: 3rem; height: 3rem; border-radius: 999px; border: 1px solid var(--linie);
  background: var(--weiss); cursor: pointer; font-size: 1.1rem; display: grid; place-items: center;
}
.karussell__pfeil:hover { background: var(--papier-tief); }

/* -------------------------------------------------------------- Kontakt */

.kontakt { background: var(--nacht); color: var(--weiss); border-radius: var(--r-gross); overflow: hidden; }
.kontakt__gitter { display: grid; grid-template-columns: .85fr 1.15fr; }
.kontakt__bild { position: relative; min-height: 22rem; }
.kontakt__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kontakt__inhalt { padding: clamp(1.8rem, 4vw, 3.6rem); display: grid; gap: 1.6rem; align-content: center; }
.kontakt .lauf { color: rgba(255, 255, 255, .74); }

.feld { display: grid; gap: .45rem; }
.feld label { font-size: .92rem; color: rgba(255, 255, 255, .74); }
.feld input, .feld textarea {
  font: inherit; color: var(--weiss); background: rgba(255, 255, 255, .07);
  border: 1px solid var(--linie-nacht); border-radius: var(--r-klein); padding: .85rem 1rem;
}
.feld input::placeholder, .feld textarea::placeholder { color: rgba(255, 255, 255, .42); }
.feld--fehler input, .feld--fehler textarea { border-color: var(--orange); }
.feld__hinweis { font-size: .86rem; color: var(--orange-hell); }
.formular__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.formular__fuss { font-size: .88rem; color: rgba(255, 255, 255, .6); }
.formular__antwort {
  border: 1px solid var(--linie-nacht); border-radius: var(--r-karte);
  padding: 1.2rem; display: grid; gap: 1rem;
}

/* ------------------------------------------------------------------ Fuss */

.fuss { padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; border-top: 1px solid var(--linie); margin-top: var(--luft); }
.fuss__gitter { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.fuss a { color: var(--tinte-weich); text-decoration: none; }
.fuss a:hover { color: var(--tinte); text-decoration: underline; }
.fuss__zeile { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; font-size: .9rem; color: var(--tinte-weich); }
.fuss__hinweis { max-width: 70ch; }

/* --------------------------------------------------------- Innenseiten */

.text-seite { max-width: 72ch; }
.text-seite h2 { margin-top: 2.5rem; font-size: 1.4rem; }
.text-seite h3 { margin-top: 1.8rem; font-size: 1.1rem; }
.text-seite p, .text-seite ul { margin-top: .9rem; color: var(--tinte-weich); }
.text-seite li { padding-left: 1.2rem; position: relative; }
.text-seite li::before { content: "·"; position: absolute; left: .3rem; color: var(--orange-tief); font-weight: 700; }

/* ------------------------------------------------------------- Schmale Geraete */

@media (max-width: 1080px) {
  .kachelreihe { grid-template-columns: repeat(2, 1fr); }
  .eckdaten { grid-template-columns: repeat(2, 1fr); }
  .ablauf, .strategie__karten, .leistungen, .rueckschau { grid-template-columns: 1fr; }
  .strategie__karte:nth-child(2), .strategie__karte:nth-child(3) { margin-top: 0; }
  .strategie__karten { margin-top: 1.5rem; }
  .ablauf__pfeil { right: 50%; top: auto; bottom: calc(-1 * clamp(1.5rem, 3vw, 3rem) / 2); transform: translate(50%, 50%) rotate(90deg); }
  .kontakt__gitter { grid-template-columns: 1fr; }
  .kontakt__bild { min-height: 16rem; }
  .fuss__gitter { grid-template-columns: 1fr 1fr; }
  .leistungen__mitte { order: -1; }
  .satz__faecher { margin-top: clamp(-5rem, -8vw, -2rem); }
}

@media (max-width: 640px) {
  .kachelreihe { grid-template-columns: 1fr; }
  .kachelreihe__stapel::before, .kachelreihe__stapel::after { display: none; }
  .eckdaten { grid-template-columns: 1fr; }
  .formular__paar { grid-template-columns: 1fr; }
  .fuss__gitter { grid-template-columns: 1fr; }
  .satz__tier { width: min(70%, 300px); }
  .satz__faecher > *:nth-child(1), .satz__faecher > *:nth-child(3) { display: none; }
  .satz__faecher > *:nth-child(2) { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .js .zeig { opacity: 1; transform: none; }
}

/* Klonziele bleiben ohne Javascript leer und duerfen dann nicht mitzaehlen */
[data-klon]:empty { display: none; }

/* Doppelseite: Folie und Handy nebeneinander, unter 1080 px untereinander */
@media (max-width: 1080px) {
  .doppel { grid-template-columns: 1fr !important; }
}