/* GTX|002|Funnel|Konkurrenzanalyse
   Gebaut nach design/rohdaten/desktop_design.png (2880 breit, entspricht 1440 CSS)
   und mobile_design.png (786 breit, entspricht 393 CSS).
   Farben sind am Export gemessen, nicht geschaetzt. */

:root {
  --bg: #0a0a0a;
  --bg-tief: #050505;
  --flaeche: #151515;
  --flaeche-hell: #1b1b1a;
  --linie: rgba(255, 255, 255, .10);
  --linie-stark: rgba(255, 255, 255, .18);

  --gold: #c9a768;
  --gold-text: #c29f5e;
  --gold-serif: #d9ae60;
  --gold-hell: #e6cb93;
  --gold-dunkel: #a8823c;

  --gruen-kopf: #007f4a;
  --gruen-karte: #023121;
  --gruen-tief: #03221a;
  --gruen-schein: rgba(0, 92, 56, .55);
  --navy: #13202d;

  --weiss: #fff;
  --grau: rgba(255, 255, 255, .66);
  --grau-schwach: rgba(255, 255, 255, .42);
  --rot: #e2574c;

  --display: "Playfair Display", Georgia, serif;
  --text: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --bahn: 1120px;
  --rand: 20px;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--weiss);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

a { color: var(--gold-text); }

.bahn {
  width: 100%;
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Nur fuer Screenreader */
.nur-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ---------- Sektionen und Schein ---------- */

.sektion {
  position: relative;
  padding: 104px 0;
}

.sektion--schwarz { background: var(--bg); }

/* "Wofuer wir nicht die Richtigen sind" ist im Entwurf schwarz, nur hinter
   der rechten Spalte liegt ein Schein. Der Sektionshintergrund mit seinem
   warmen Schein links waere hier zu viel, deshalb eine eigene Regel.
   Spitzenwert am Export gemessen: #32382E bei 78 Prozent Breite. */
.sektion--dunkel {
  background:
    radial-gradient(28% 40% at 77% 42%, rgba(94, 107, 85, .45) 0%, transparent 72%),
    #0a0a0a;
}

/* Eigener Hintergrund aus dem Entwurf, liegt bereit fuer die Videosektion. */
.sektion--strukturanalyse {
  background-image: url("/assets/img/bg-strukturanalyse.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: var(--bg);
}

/* Der gruene Schimmer aus dem Entwurf: breit, weich, hinter dem Inhalt.
   Direkt als Hintergrund der Sektion, nicht als Pseudoelement mit
   negativem z-index. Das spart eine Compositing-Ebene. */
/* Die uebrigen Sektionen tragen nur einen weichen Schein, ohne Balken.
   Auch hier: warm links, gruen rechts, so steht es im Entwurf. */
.sektion--schein {
  background:
    radial-gradient(26% 44% at 10% 44%, rgba(104, 98, 78, .34) 0%, transparent 72%),
    radial-gradient(32% 46% at 74% 44%, rgba(36, 70, 56, .34) 0%, transparent 74%),
    var(--bg);
}

/* Die Textur kommt als Bild aus dem Entwurf (`bg-sektion.webp`): die
   senkrechten Balken, der warme Schein links und der gruene rechts stecken
   schon darin. Vorher war das in CSS nachgebaut und nie ganz richtig.

   `100% 100%` statt `cover`: es ist ein weicher Verlauf, das Dehnen sieht man
   nicht, dafuer sitzt der Schein in jeder Sektionshoehe an derselben Stelle. */
.sektion--textur {
  background-image: url("/assets/img/bg-sektion.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: var(--bg);
}

.textur--faq { background-color: var(--flaeche); }


/* ---------- Ueberschriften ---------- */

.titel {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0 0 22px;
}

.titel--gold { color: var(--gold-serif); }
.titel--weiss { color: var(--weiss); }
.titel em { font-style: normal; color: var(--gold-serif); }
.titel u { text-decoration-thickness: 2px; text-underline-offset: 6px; }

h1.titel { font-size: clamp(32px, 6.2vw, 58px); }
h2.titel { font-size: clamp(30px, 5.6vw, 52px); text-align: center; }

.sektion__kopf {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 56px;
}
.sektion__kopf p {
  color: var(--weiss);
  font-size: 19px;
  max-width: 720px;
  margin-inline: auto;
}


/* ---------- Knopf ---------- */

.cta {
  display: flex;
  justify-content: center;
  margin: 40px 0 0;
}
.cta--links { justify-content: flex-start; }

.knopf {
  appearance: none;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 10px;
  padding: 19px 34px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #151515;
  background:
    linear-gradient(180deg, #d8ba7f 0%, #cdac6e 38%, #c6a463 62%, #d5b77c 100%);
  box-shadow:
    0 0 26px rgba(201, 167, 104, .40),
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(0, 0, 0, .18);
  cursor: pointer;
  transition: filter .15s ease, box-shadow .15s ease, transform .15s ease;
}
.knopf:hover { filter: brightness(1.07); box-shadow: 0 0 34px rgba(201, 167, 104, .55), inset 0 1px 0 rgba(255, 255, 255, .6); }
.knopf:active { transform: translateY(1px); }
.knopf:focus-visible { outline: 3px solid var(--gold-hell); outline-offset: 3px; }

/* Der Entwurf setzt auf dem Telefon eine kuerzere Beschriftung, damit sie in
   eine Zeile passt. Beide stehen im Markup, immer genau eine ist eingeblendet. */
.knopf__schmal { display: none; }


/* ---------- Kopf und Hero ---------- */

.kopf {
  display: flex;
  justify-content: center;
  padding: 34px var(--rand) 0;
}
.wortmarke { width: 186px; height: auto; }

.hero {
  position: relative;
  padding: 40px 0 0;
  text-align: center;
}
/* Der Schein ueber Kopf und Hero liegt am body und wird einmal ueber die
   ganze Hoehe gezeichnet. Zwei getrennte Hintergruende auf .kopf und .hero
   haben an der Grenze eine sichtbare Kante ergeben.

   Werte am Entwurf gemessen: oben ist alles schwarz, der warme Schein sitzt
   am linken Rand auf halber Hoehe und kommt auf #353229, der gruene steht
   rechts bei 72 Prozent und kommt auf #132A21. Beides deutlich schwaecher,
   als es hier vorher stand. */
body {
  background-image:
    radial-gradient(30% 26% at 11% 44%, rgba(96, 90, 72, .50) 0%, transparent 72%),
    radial-gradient(27% 24% at 73% 43%, rgba(31, 86, 65, .42) 0%, transparent 74%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 1200px, 100% 1200px;
  background-position: top center, top center;
}

/* Die Terminseite bekommt einen eigenen Schein. Im Entwurf steht der warme
   nicht am linken Rand, sondern auf halber Breite ueber der Ueberschrift, und
   rechts bleibt alles schwarz, weil dort das Panel sitzt. Gemessen am Export
   (design_desktop.png, 2880 x 3104, also 1440 x 1552 CSS): der warme Schein
   kommt bei 47 Prozent Breite und 124 px Hoehe auf #373428, der gruene Saum
   links bei 9 Prozent auf #0f221a, ab 75 Prozent Breite steht #000000. */
body[data-seite="termin"] {
  background-image:
    radial-gradient(31% 30% at 47% 150px, rgba(96, 90, 72, .54) 0%, transparent 72%),
    radial-gradient(24% 22% at 8% 170px, rgba(31, 86, 65, .40) 0%, transparent 74%);
  background-size: 100% 1250px, 100% 1250px;
  background-position: top center, top center;
}
.hero__titel { max-width: 1060px; margin-inline: auto; }
.hero__antwort {
  max-width: 880px;
  margin: 0 auto 20px;
  font-size: 19px;
}
.hero__antwort u {
  color: var(--gold-serif);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.hero__nutzen {
  color: var(--gold-text);
  font-size: 19px;
  margin-bottom: 0;
}

/* Die Vorschau der Vergleichstabelle. Das Bild bringt den Geraeterahmen und
   das Ausblenden nach unten schon mit, hier kommt nur die Bewegung dazu:
   beim Scrollen klappt es aus der Waagerechten in die Senkrechte.
   Ohne JavaScript und bei prefers-reduced-motion steht es gleich aufrecht. */
.vorschau {
  margin: 56px auto 0;
  max-width: 1180px;
  padding: 0 var(--rand);
}
.vorschau__buehne {
  perspective: 1500px;
  perspective-origin: 50% 100%;
}
.vorschau__bild {
  width: 100%;
  height: auto;
  transform-origin: 50% 100%;
  transform: rotateX(var(--kipp, 0deg));
  will-change: transform;
}


/* ---------- Karten: Was dich als Mandant erwartet ---------- */

/* Alle drei Karten bekommen dieselbe Zeilenhoehe, damit links und rechts
   buendig sind. Die mittlere ragt oben und unten heraus, dafuer die
   negativen Abstaende. Das haelt auch, wenn der Text laenger wird. */
.karten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}
.karte--mitte { margin-block: -30px; }
/* Die mittlere Karte haengt 30 px tiefer, ohne Zuschlag klebt der Knopf daran. */
.karten + .cta { margin-top: 78px; }
/* Im Entwurf sind die Karten durchscheinend: die linke nimmt das Warme auf,
   die rechte das Gruene. Eine deckende Flaeche wuerde das abschneiden. */
.karte {
  background: rgba(9, 11, 9, .55);
  border: 1px solid var(--linie);
  border-radius: 16px;
  padding: 30px 28px 32px;
}
.karte__icon { width: 86px; height: auto; margin-bottom: 26px; }
.karte__titel {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 16px;
}
.karte p { color: var(--grau); font-size: 16px; }


/* ---------- Vergleichstabelle ---------- */

.vergleich__rahmen { position: relative; }

table.vergleich {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  text-align: left;
}
table.vergleich th, table.vergleich td {
  padding: 18px 18px;
  vertical-align: middle;
  border-bottom: 1px solid var(--linie);
}
table.vergleich thead th {
  font-size: 15px;
  font-weight: 700;
  color: var(--weiss);
  border-bottom: 1px solid var(--linie-stark);
  padding-bottom: 14px;
}
.spalte__zusatz {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grau-schwach);
  margin-top: 3px;
}
th.kriterium {
  width: 28%;
  padding-left: 0;
  color: var(--grau-schwach);
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 600;
}
td.kriterium { width: 28%; padding-left: 0; }
.kriterium__name { display: block; font-size: 15px; font-weight: 600; color: var(--weiss); }
.kriterium__zusatz { display: block; font-size: 12.5px; color: var(--grau-schwach); margin-top: 3px; }

/* Die mittlere Spalte steht als angehobene Karte vor der Tabelle. */
.vergleich col.krit { width: 27%; }
.vergleich col.gt { width: 23%; }
table.vergleich .gt {
  position: relative;
  background: var(--gruen-karte);
  border-bottom-color: rgba(255, 255, 255, .07);
}
table.vergleich thead .gt {
  background: var(--gruen-kopf);
  border-radius: 14px 14px 0 0;
  border-bottom-color: transparent;
  color: var(--weiss);
  padding-top: 26px;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
}
table.vergleich thead .gt .spalte__zusatz { color: rgba(255, 255, 255, .78); }
table.vergleich tbody tr:last-child .gt {
  border-radius: 0 0 14px 14px;
  border-bottom-color: transparent;
  padding-bottom: 28px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .45);
}

.zeichen {
  display: inline-flex;
  width: 1.15em;
  margin-right: 9px;
  font-weight: 700;
}
.zeichen--ja { color: #35b36c; }
.zeichen--nein { color: var(--rot); }
.zeichen--teils { color: var(--gold-text); }

tr.konzession td { background: rgba(201, 167, 104, .07); }
tr.konzession .kriterium__name { color: var(--gold-text); }
.marke {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 10px;
  border: 1px solid var(--gold-dunkel);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold-text);
}

/* Mobil: je Kriterium eine Karte mit drei Zeilen. */
.vergleich-mobil { display: none; }
.vm__karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 16px;
  padding: 22px 18px;
  margin-bottom: 18px;
}
.vm__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.vm__name { font-size: 19px; font-weight: 600; margin: 0; }
.vm__zusatz { color: var(--grau-schwach); font-size: 15px; margin: 2px 0 16px; }
.vm__zeile {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.vm__zeile:last-child { margin-bottom: 0; }
.vm__zeile--gt { background: var(--gruen-karte); border-color: var(--gold-dunkel); }
.vm__spalte { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--grau-schwach); display: block; }
.vm__zeile--gt .vm__spalte { color: var(--gold-text); font-weight: 700; }
.vm__wert { font-size: 17px; }
.vm__zeile--gt .vm__wert { font-weight: 600; }


/* ---------- Beispielrechnung ---------- */

/* Im Entwurf ueberlappt der gruene Kasten die Karte und sitzt hoeher. */
.rechnung__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
}
.rechnung__karte {
  background: linear-gradient(140deg, #1a1a19 0%, #121212 100%);
  border: 1px solid var(--linie);
  border-radius: 18px;
  padding: 54px 48px 48px;
  z-index: 0;
}
.rechnung__titel { text-align: left; margin-bottom: 26px; }
.rechnung__karte p { color: var(--weiss); font-size: 16px; max-width: 46ch; }
.rechnung__platz {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  align-self: start;
  margin: -46px 0 0 -96px;
  border-radius: 16px;
  background: linear-gradient(150deg, #06563a 0%, #02392a 100%);
  color: rgba(255, 255, 255, .34);
  font-size: 26px;
  line-height: 1.35;
  text-align: center;
  padding: 24px;
  z-index: 1;
}


/* ---------- Kennzahlen ---------- */

.zahlen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.zahl {
  text-align: center;
  padding: 34px 22px;
  border-right: 1px solid var(--linie);
}
.zahl:last-child { border-right: 0; }
.zahl__icon { width: 78px; height: auto; margin: 0 auto 6px; }
.zahl__wert {
  font-family: var(--display);
  font-size: 46px;
  font-weight: 600;
  color: var(--gold-serif);
  line-height: 1.1;
  margin: 0 0 8px;
}
.zahl__text { color: var(--grau); font-size: 15px; margin: 0; }


/* ---------- Geschichte ---------- */

.story {
  position: relative;
  padding-top: 96px;
  background-image: url("/assets/img/bg-soufian.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: var(--bg);
}
.story__raster {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 40px;
  align-items: end;
}
/* Das Portraet endet unten mit einer harten waagerechten Kante, im Bild ist
   der Anzug einfach abgeschnitten. Die Maske blendet die unteren 30 Prozent
   aus, damit es in den Hintergrund laeuft statt abzubrechen. */
.story__bild {
  width: 100%;
  border-radius: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, .55) 80%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, .55) 80%, transparent 100%);
}
.story__text { padding-bottom: 26px; }
.story__text p { font-size: 16px; }
.story__zitat {
  border-left: 3px solid var(--gold);
  padding-left: 16px;
  margin: 0 0 18px;
}
.story__zitat strong { color: var(--gold-text); }
.story__unterstrich { text-decoration: underline; text-underline-offset: 4px; }
.story__erkenntnis strong { color: var(--gold-text); display: block; }


/* ---------- Team ---------- */

/* Die Skyline liegt als Hintergrund der Sektion, nicht als img mit
   negativem z-index: sonst bekommt sie eine eigene Ebene und der
   Verlauf darueber flackert beim Scrollen. */
.team {
  position: relative;
  padding: 104px 0;
  background-image:
    linear-gradient(180deg, #0a0a0a 0%, rgba(10, 10, 10, .90) 16%, rgba(10, 10, 10, .52) 44%, rgba(10, 10, 10, .74) 82%, #0a0a0a 100%),
    url("/assets/img/city.webp");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
/* Die Skyline ist die einzige Sektionsgrafik mit echten Kanten, deshalb liegt
   sie mit 2400 px hier. Auf dem Telefon sind das 51 kB fuer eine Flaeche von
   375 px. Die kleine Fassung deckt auch dreifache Pixeldichte ab (375 mal 3
   sind 1125) und kostet 18 kB. Ein Bild im CSS kennt kein srcset, also eine
   Medienabfrage. */
@media (max-width: 760px) {
  .team {
    background-image:
      linear-gradient(180deg, #0a0a0a 0%, rgba(10, 10, 10, .90) 16%, rgba(10, 10, 10, .52) 44%, rgba(10, 10, 10, .74) 82%, #0a0a0a 100%),
      url("/assets/img/city-1200.webp");
  }
}
.team__karte {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: center;
  background: rgba(14, 14, 14, .82);
  border: 1px solid var(--linie);
  border-radius: 18px;
  padding: 26px;
}
.team__foto { border-radius: 8px; width: 100%; }
.team__liste { list-style: none; margin: 0; padding: 0; }
.team__liste li {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--linie);
  font-size: 17px;
}
.team__liste li:last-child { border-bottom: 0; }
.haken {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ---------- Ablauf und Video ---------- */

.video {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: #3a3a3a;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.video__knopf {
  width: 100px; height: 100px;
  border: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #e2c489 0%, #c19a52 100%);
  box-shadow: 0 0 34px rgba(201, 167, 104, .55);
  display: grid; place-items: center;
  cursor: pointer;
}
.video__knopf svg { width: 30px; height: 30px; fill: #151515; margin-left: 5px; }


/* ---------- Wofuer wir nicht die Richtigen sind ---------- */

.nicht__raster {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: start;
}
.nicht__titel { text-align: left; margin-bottom: 26px; }
.nicht__hinweis {
  border-left: 3px solid var(--gold);
  padding-left: 18px;
  font-size: 18px;
  margin: 0;
}
.nicht__liste { list-style: none; margin: 0; padding: 0; position: relative; }
.nicht__liste::before {
  content: "";
  position: absolute;
  left: 27px; top: 28px; bottom: 28px;
  width: 1px;
  background: var(--gold-dunkel);
}
.nicht__punkt {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 26px;
  padding: 0 0 30px;
}
.nicht__punkt + .nicht__punkt { padding-top: 30px; }
.nicht__punkt + .nicht__punkt > div:last-child { border-top: 1px solid var(--linie); padding-top: 30px; margin-top: -30px; }
.nicht__icon {
  width: 56px; height: 56px;
  border: 1px solid var(--gold-dunkel);
  border-radius: 12px;
  background: var(--bg);
  display: grid; place-items: center;
  position: relative; z-index: 1;
}
.nicht__icon svg { width: 22px; height: 22px; stroke: var(--gold); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.nicht__punkt h3 { font-size: 20px; margin: 0 0 8px; }
.nicht__punkt p { color: var(--grau); font-size: 16px; }


/* ---------- Abschluss ---------- */

.abschluss { padding: 0 0 104px; }
.abschluss__kasten {
  background: linear-gradient(150deg, #05392a 0%, #03221a 58%, #021712 100%);
  border-radius: 20px;
  text-align: center;
  padding: 64px 30px 70px;
}
.abschluss__kasten .titel { margin-bottom: 0; }
.abschluss__kasten .cta { margin-top: 34px; }


/* ---------- FAQ ---------- */

/* Das FAQ traegt die Textur, deshalb hier keine eigene Flaeche. */
.faq__liste { max-width: 800px; margin: 0 auto; }
.faq__punkt { border-bottom: 1px solid var(--linie); }
.faq__frage {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: none;
  border: 0;
  padding: 22px 0;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--weiss);
  text-align: left;
  cursor: pointer;
}
.faq__frage:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.faq__pfeil {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  stroke: var(--gold); fill: none; stroke-width: 2; stroke-linecap: round;
  transition: transform .2s ease;
}
.faq__frage[aria-expanded="true"] .faq__pfeil { transform: rotate(180deg); }
.faq__antwort { padding: 0 0 22px; color: var(--grau); font-size: 16px; }
.faq__antwort[hidden] { display: none; }


/* ---------- Footer ---------- */

.fuss { background: #0d0d0c; padding: 30px 0; }
.fuss__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
}
.fuss__marke { width: 150px; height: auto; flex: 0 0 auto; }
.fuss__recht { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .62); }
.fuss__links { display: flex; gap: 28px; flex-wrap: wrap; }
.fuss__links a { color: rgba(255, 255, 255, .78); text-decoration: none; font-size: 14px; }
.fuss__links a:hover { color: var(--gold-text); text-decoration: underline; }


/* ---------- Schmale Fenster ---------- */

@media (max-width: 900px) {
  .karten { grid-template-columns: 1fr; gap: 20px; }
  .karte--mitte { margin-block: 0; }
  .rechnung__raster { grid-template-columns: 1fr; gap: 0; }
  /* Der mobile Entwurf zeigt hier keine Karte, sondern die Sektionsflaeche
     selbst, und die Reihenfolge dreht sich: Ueberschrift, gruener Kasten,
     Text, Knopf. `display: contents` loest die Karte auf, ihre Kinder werden
     dadurch selbst zu Rasterzellen und lassen sich einzeln sortieren.
     Abstaende am Entwurf gemessen (393 CSS breit): Sektionskante bis
     Ueberschrift 77, Ueberschrift bis Kasten 26, Kasten bis Text 60. */
  .rechnung__karte { display: contents; }
  .rechnung__titel { order: 1; text-align: center; margin-bottom: 26px; }
  .rechnung__platz { order: 2; margin: 0; aspect-ratio: 1 / 1; }
  .rechnung__text { order: 3; margin-top: 60px; }
  #beispielrechnung .cta { order: 4; justify-content: center; }
  /* Der gruene Kasten schliesst die Sektion schon ab, die volle Polsterung
     darunter reisst ein Loch zur naechsten Ueberschrift. */
  #beispielrechnung { padding-bottom: 32px; }
  .story__raster,
  .team__karte,
  .nicht__raster { grid-template-columns: 1fr; gap: 28px; }
  .zahlen { grid-template-columns: 1fr; }
  .zahl { border-right: 0; border-bottom: 1px solid var(--linie); }
  .zahl:last-child { border-bottom: 0; }
  .fuss__zeile { justify-content: center; text-align: center; }
}

@media (max-width: 760px) {
  :root { --rand: 18px; }

  body { font-size: 16px; }
  .sektion { padding: 72px 0; }
  .sektion__kopf { margin-bottom: 36px; }

  .kopf { padding-top: 26px; }
  .wortmarke { width: 148px; }

  .hero { padding-top: 28px; }
  .hero__antwort, .hero__nutzen { font-size: 17px; }

  .cta { margin-top: 30px; }
  .knopf { width: 100%; padding: 20px 14px; font-size: 15px; }
  .knopf__breit { display: none; }
  .knopf__schmal { display: inline; }

  /* Die Tabelle wird zu Karten, der Entwurf zeigt sie so. */
  .vergleich__rahmen { display: none; }
  .vergleich-mobil { display: block; }

  .vorschau__rahmen { max-height: 330px; }

  .story__raster { display: flex; flex-direction: column; }
  .story__bild { order: -1; }
  .story__text { padding-bottom: 0; }

  .team__karte { padding: 18px; }

  .nicht__titel { text-align: center; }
  .nicht__hinweis { order: 2; }
  .nicht__liste { order: 1; }
  .nicht__liste::before { left: 27px; }

  .abschluss__kasten { padding: 46px 22px 50px; }

  .fuss__zeile { flex-direction: column; gap: 18px; }
  .fuss__links { justify-content: center; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ---------- Terminseite ---------- */

/* Der Entwurf zeigt den Hero schwarz. Vom 22.09. an lag hier bg-sektion.webp
   auf `100% 100%` gestreckt, das ergab zwei Fehler auf einmal: eine harte
   waagerechte Kante unter dem Kopf, weil die Sektion dort ihren eigenen
   Hintergrund beginnt, und eine gruene Wand hinter dem Panel, weil die Flaeche
   fuer eine Kartensektion gezeichnet ist und hier ueber die doppelte Hoehe
   gezogen wurde.

   Der zweite Schein aus dem Entwurf sitzt unten links auf Hoehe der drei
   Karten: warm bei 24 Prozent Breite auf #39352b, gruen daneben bei 12 Prozent
   auf #363c2f. Er haengt an der Unterkante der Sektion, damit er mitwandert,
   wenn die Sektion auf schmalen Fenstern hoeher wird. */
.termin {
  position: relative;
  padding: 40px 0 104px;
  /* Keine Deckfarbe. Eine eigene Flaeche auf der Sektion wuerde den Schein vom
     `body` an der Oberkante abschneiden, und genau diese waagerechte Kante
     sass vorher unter dem Logo. Die Sektion legt nur ihre beiden Verlaeufe
     darueber, der Grund kommt vom `body`. */
  background-image:
    radial-gradient(26% 52% at 24% 46%, rgba(96, 90, 72, .50) 0%, transparent 74%),
    radial-gradient(22% 44% at 11% 78%, rgba(31, 86, 65, .40) 0%, transparent 76%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 430px, 100% 430px;
  background-position: left bottom, left bottom;
}
.termin__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.termin__text h1 { font-size: clamp(30px, 4.4vw, 46px); margin-bottom: 26px; }
.termin__lead { font-size: 18px; max-width: 46ch; margin-bottom: 26px; }
.termin__lead strong { color: var(--gold-text); }
.termin__gratis {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--grau);
  font-size: 15px;
  margin-bottom: 40px;
}
.kasten-haken {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  fill: var(--gold-text);
}

.termin__belege { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.termin__belege li {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--gold-dunkel);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 15px;
  color: var(--grau);
}
.termin__belege strong { color: var(--weiss); font-weight: 600; }
.beleg-icon { flex: 0 0 auto; width: 19px; height: 19px; fill: var(--gold); }
.beleg-icon--linie {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Die Karte steht im Entwurf an der Stelle des Kalenders, gemessene
   Fuellung #012019 oben, #091C19 unten. */
.anruf {
  background: linear-gradient(165deg, #012019 0%, #0a1d1a 62%, #081614 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  padding: 30px 28px 32px;
}
.anruf__titel {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 500;
  text-align: center;
  margin: 0 0 24px;
}

.feld { margin-bottom: 16px; }
.feld label {
  display: block;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--grau-schwach);
  margin-bottom: 7px;
}
.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"] {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 9px;
  background: rgba(0, 0, 0, .34);
  padding: 13px 14px;
  font-family: inherit;
  font-size: 16px;
  color: var(--weiss);
}
.feld input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: transparent;
}

.zeiten { border: 0; margin: 0 0 18px; padding: 0; }
.zeiten legend {
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--grau-schwach);
  margin-bottom: 9px;
  padding: 0;
}
.zeiten__auswahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.zeit { position: relative; display: block; }
.zeit input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.zeit span {
  display: block;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 9px;
  padding: 11px 6px;
  font-size: 14px;
  color: var(--grau);
}
.zeit input:checked + span {
  border-color: var(--gold);
  background: rgba(201, 167, 104, .14);
  color: var(--weiss);
}
.zeit input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.feld--haken { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.feld--haken input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--gold); }
.feld--haken label {
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--grau);
  margin: 0;
  line-height: 1.45;
}

.anruf__fehler { color: var(--rot); font-size: 14px; margin: 0 0 14px; }
.anruf__form .knopf { width: 100%; }

/* Die drei Punkte unter dem Hero */
.punkte {
  list-style: none;
  margin: 76px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.punkt {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 13px;
  background: linear-gradient(150deg, #1a1916 0%, #121211 100%);
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: 22px 22px 24px;
}
.punkt p { color: var(--grau); font-size: 15px; margin: 0; }
.punkt strong { color: var(--weiss); }
.punkte__hinweis { text-align: center; color: var(--grau); font-size: 15px; margin: 30px 0 0; }
.punkte__hinweis strong { color: var(--gold-text); }

@media (max-width: 900px) {
  .termin__raster { grid-template-columns: 1fr; gap: 36px; }
  .punkte { grid-template-columns: 1fr; margin-top: 52px; }
}

@media (max-width: 760px) {
  .termin { padding-bottom: 72px; }
  .termin__text h1 { text-align: center; }
  .termin__lead { text-align: center; margin-inline: auto; }
  .termin__gratis { justify-content: center; }
  .termin__belege { flex-direction: column; }
  .anruf { padding: 24px 18px 26px; }
  .zeiten__auswahl { grid-template-columns: 1fr; }
}


/* ---------- Danke-Seite ---------- */

.danke {
  text-align: center;
  padding: 96px 0 80px;
  position: relative;
}
.danke__haken { width: 130px; height: auto; margin: 0 auto 30px; }
.danke__titel { font-size: clamp(30px, 4.6vw, 50px); margin-bottom: 20px; }
.danke__text { font-size: 19px; max-width: 46ch; margin-inline: auto; }
.danke .bahn::after {
  content: "";
  display: block;
  height: 1px;
  margin: 64px auto 0;
  max-width: 1000px;
  background: linear-gradient(90deg, transparent, var(--gold-dunkel), transparent);
}

.fallstudien { padding-top: 76px; }
/* Die Ueberschrift steht im Entwurf auf einer Zeile, bei 900 px bricht sie. */
.fallstudien .sektion__kopf { max-width: 1120px; }

.fall {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px;
  background: linear-gradient(150deg, #151614 0%, #101110 100%);
  border: 1px solid var(--linie);
  border-radius: 20px;
  padding: 28px;
  margin-bottom: 30px;
}
.fall:last-child { margin-bottom: 0; }

.fall__kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
}
.fall__marke { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.2; }
.fall__marke span {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grau-schwach);
  margin-bottom: 3px;
}
.fall__firma { margin: 0; text-align: right; font-size: 14px; font-weight: 600; }
.fall__firma a {
  display: block;
  font-weight: 400;
  font-size: 13px;
  color: var(--grau-schwach);
  text-decoration: none;
}
.fall__firma a:hover { color: var(--gold-text); text-decoration: underline; }

.fall__vorschau { margin: 0 0 20px; border-radius: 10px; overflow: hidden; }
.fall__vorschau img { width: 100%; height: auto; }
.fall__vorschau iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.fall__vorschau--spielbar { cursor: pointer; }
.fall__vorschau--spielbar:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.fall__zitat { margin: 0; }
.fall__zitat p {
  font-style: italic;
  color: var(--grau);
  font-size: 15px;
  margin-bottom: 18px;
}
.fall__zitat footer {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 15px;
}
.fall__zitat footer img {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
}

.fall__rechts { display: flex; flex-direction: column; gap: 16px; }
.fall__block {
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 18px 20px 20px;
}
.fall__block--loesung {
  background: linear-gradient(140deg, #073a2a 0%, #04281e 100%);
  border-color: rgba(111, 207, 151, .28);
}
.fall__label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gold-text);
}
.fall__block--loesung .fall__label { color: #6fcf97; }
.fall__icon {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  fill: none;
  stroke: var(--gold-text);
  stroke-width: 2;
  stroke-linecap: round;
}
.fall__icon--gruen { stroke: #6fcf97; }
.fall__block p:not(.fall__label) { color: var(--grau); font-size: 15px; margin: 0; }

/* YouTube */
.yt {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.yt__karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 14px;
  overflow: hidden;
}
.yt__flaeche {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0d0f0d center / cover no-repeat;
  display: grid;
  place-items: center;
}
.yt__flaeche iframe { width: 100%; height: 100%; border: 0; }
.yt__knopf {
  width: 58px; height: 58px;
  border: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #e2c489 0%, #c19a52 100%);
  display: grid; place-items: center;
  cursor: pointer;
}
.yt__knopf svg { width: 20px; height: 20px; fill: #151515; margin-left: 3px; }
.yt__karte p { padding: 18px 20px 22px; font-size: 15px; margin: 0; }

@media (max-width: 900px) {
  .fall { grid-template-columns: 1fr; gap: 24px; }
  .yt { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .danke { padding: 64px 0 56px; }
  .danke__haken { width: 96px; }
  .danke .bahn::after { margin-top: 44px; }
  .fallstudien { padding-top: 56px; }
  .fall { padding: 20px 18px 22px; }
  .fall__kopf { flex-direction: column; gap: 6px; }
  .fall__firma { text-align: left; }
}


/* ---------- Popup mit den Kontaktdaten ---------- */

.popup {
  width: min(520px, calc(100vw - 32px));
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  background: linear-gradient(165deg, #151614 0%, #0f100f 100%);
  color: var(--weiss);
  padding: 0;
  /* Der Dialog scrollt in sich, nicht die Seite dahinter. Auf kleinen Geraeten
     und bei offener Tastatur passt das Formular sonst nicht ins Bild, und mit
     `overflow: visible` waere der untere Teil nicht erreichbar. */
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.popup::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(2px); }
.popup__form { position: relative; padding: 34px 32px 32px; }
.popup__titel {
  font-family: var(--display);
  font-size: 25px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 24px;
  padding-inline: 24px;
}
.popup__zu {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--grau);
  cursor: pointer;
  display: grid; place-items: center;
}
.popup__zu:hover { color: var(--weiss); background: rgba(255, 255, 255, .06); }
.popup__zu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.popup__fehler { color: var(--rot); font-size: 14px; margin: 0 0 14px; }
.popup__form .knopf { width: 100%; }

/* Vorwahl und Nummer nebeneinander */
.telefon { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.telefon select {
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 9px;
  background: rgba(0, 0, 0, .34);
  color: var(--weiss);
  font-family: inherit;
  font-size: 16px;
  padding: 13px 10px;
}
.telefon select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

@media (max-width: 560px) {
  .popup__form { padding: 30px 20px 24px; }
  .popup__titel { font-size: 21px; padding-inline: 30px; }
}

.anruf__kontakt { text-align: center; color: var(--grau); font-size: 14px; margin: -10px 0 20px; }
.anruf__zurueck { text-align: center; margin: 14px 0 0; }