/* ==========================================================================
   GLÆR · Styles
   Aufbau: Basis → Bausteine (wiederverwendbar) → Abschnitte der Seite.
   Alle Werte kommen aus tokens.css.
   ========================================================================== */

/* Basis ------------------------------------------------------------------ */

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

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

/* Scroll-Anker, nur auf der Startseite (<html class="folien">):
   Abschnitte rasten beim Scrollen oben ein, wie Folien.
   "proximity" rastet nur in der Nähe eines Abschnittsanfangs ein, damit
   Abschnitte, die höher als das Fenster sind, frei scrollbar bleiben.
   Impressum und Datenschutz haben die Klasse nicht und scrollen normal. */
html.folien {
  scroll-snap-type: y proximity;
}

/* Auf Desktop-Fenstern passt jeder Abschnitt in den Bildschirm:
   dort rastet jede Folie verbindlich ein. */
@media (min-width: 52rem) and (min-height: 40rem) {
  html.folien {
    scroll-snap-type: y mandatory;
  }
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
p,
ul,
dl,
dd {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

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

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 3px;
}

/* Sehr schmale Handys: lange deutsche Wörter dürfen getrennt werden */
@media (max-width: 26rem) {
  body {
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .loesung__grid .stat__value {
    font-size: 2.5rem;
  }

  .service__aussage {
    font-size: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

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

.container {
  width: min(100% - 2 * var(--page-gutter), var(--page-width));
  margin-inline: auto;
}

/* Logo (assets/img/logo-glaer.svg), klein in Kopf- und Fußzeile */
.wordmark {
  display: block;
  text-decoration: none;
}

img.wordmark,
.wordmark img {
  display: block;
  width: auto;
  height: 0.85rem;
}

/* Wie im Deck: orange Rubrik, schwarze Aussage, zentriert */
.section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: var(--space-section);
  text-align: center;
  scroll-snap-align: start;
}

.section__head {
  margin-bottom: var(--space-5);
}

.eyebrow {
  color: var(--color-orange);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.title {
  font-size: var(--text-title);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

.lead {
  max-width: 34em;
  margin: var(--space-3) auto 0;
  text-wrap: pretty;
}

/* Schlusszeile unter jedem Abschnitt, wie die Fußzeile einer Deck-Folie */
.claim {
  margin-top: var(--space-5);
  font-size: var(--text-claim);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  text-wrap: balance;
}

.accent {
  color: var(--color-orange);
}

.button {
  display: inline-block;
  padding: 0.85em 1.6em;
  border-radius: var(--radius-pill);
  background: var(--color-orange);
  color: var(--color-ink);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.button:hover {
  background: var(--color-ink);
  color: var(--color-paper);
}

.button--dark {
  background: var(--color-ink);
  color: var(--color-paper);
}

.button--dark:hover {
  background: var(--color-orange);
  color: var(--color-ink);
}

.stat__value {
  display: block;
  color: var(--color-orange);
  font-size: var(--text-stat);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  white-space: nowrap;
}

/* „bis zu“ klein über der Zahl */
.stat__vorsatz {
  display: block;
  margin-bottom: 0.2em;
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-regular);
  line-height: 1.2;
}

.stat__label {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-claim);
  font-weight: var(--weight-bold);
  line-height: 1.2;
}

.footnotes {
  /* so breit wie die längste Fußnote: eine Zeile pro Fußnote, solange Platz ist */
  width: fit-content;
  max-width: 100%;
  margin: clamp(1rem, 4vh, 2.5rem) auto 0;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-note);
  font-weight: 300;
  line-height: 1.5;
  text-align: left;
}

sup {
  font-size: 0.45em;
  font-weight: var(--weight-regular);
  vertical-align: super;
  line-height: 0;
}

/* Kopfzeile -------------------------------------------------------------- */

.header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  padding-block: var(--space-3);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header .wordmark img {
  height: 1.05rem;
}

.header__link {
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  text-decoration: none;
  border-bottom: 2px solid var(--color-orange);
  padding-bottom: 2px;
}

.header__link:hover {
  color: var(--color-orange);
}

/* Kleine Navigation oben rechts im Hero */
.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 clamp(0.75rem, 2.2vw, 1.75rem);
  margin-left: auto;
  font-size: clamp(0.8125rem, 0.4vw + 0.72rem, 0.9375rem);
  font-weight: var(--weight-bold);
}

.nav__link {
  padding-block: 0.6rem 2px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}

/* Oranger Strich: beim Überfahren und unter dem Abschnitt, der gerade im
   Fenster steht (aria-current setzt js/nav.js) */
.nav__link:hover,
.nav__link[aria-current] {
  border-bottom-color: var(--color-orange);
}

/* Startseite: Die Navigation läuft beim Scrollen mit und bleibt oben rechts
   stehen. Die Kopfzeile selbst ist für Klicks durchlässig, nur die
   Navigation fängt sie ab. Der helle Grund hält die Links lesbar, wenn
   Inhalt darunter durchläuft. */
html.folien {
  --nav-platz: 4.75rem;   /* Höhe, die die Navigation oben belegt, plus Luft */
}

/* Sehr schmale Handys: Die Navigation bricht in zwei Zeilen um */
@media (max-width: 22rem) {
  html.folien {
    --nav-platz: 6.75rem;
  }
}

html.folien .header {
  position: fixed;
  pointer-events: none;
}

html.folien .nav {
  pointer-events: auto;
  padding: 0 clamp(0.7rem, 2vw, 1.1rem) 0.55rem;
  border-radius: 1.5rem;
  background: rgb(255 255 255 / 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Jede Folie beginnt unterhalb der Navigation, damit die Rubrik frei steht */
html.folien .section:not(.kontakt) {
  padding-top: max(var(--space-section), var(--nav-platz));
}

/* Kontakt-Folie: Ist das Fenster hoch genug, beginnt auch der grüne Block
   unter der Navigation. In flachen Fenstern liegt sie in seiner Ecke. */
@media (min-width: 52rem) and (min-height: 50rem) {
  html.folien .kontakt {
    padding-top: var(--nav-platz);
  }
}

/* Hero --------------------------------------------------------------------
   Nachbau der Deck-Titelseite. --u ist „ein Punkt der Deck-Seite“ in Pixeln:
   Die Komposition skaliert als Ganzes mit dem Fenster, wie ein Bild mit
   object-fit: cover. --hero-ref ist die sichtbare Breite der Deck-Seite.
   --t ist dieselbe Einheit für den Text, aber gedeckelt, damit Text und
   Button auch in sehr breiten, flachen Fenstern nicht abgeschnitten werden.
   ------------------------------------------------------------------------ */

.hero {
  --hero-ref: 1190.55;
  --u: max(100vw / var(--hero-ref), 100vh / 841.89);
  --u: max(100vw / var(--hero-ref), 100svh / 841.89);
  --t: min(var(--u), (max(50vh, 18rem) - 14rem) / 160);
  --t: min(var(--u), (max(50svh, 18rem) - 14rem) / 160);
  position: relative;
  scroll-snap-align: start;
  min-height: max(100vh, 36rem);
  min-height: max(100svh, 36rem);
  overflow: hidden;
}

.hero__fenster {
  position: absolute;
  left: calc(50% + var(--x) * var(--u));
  top: calc(50% + var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  max-width: none;
  pointer-events: none;
  user-select: none;
}

/* Position und Breite in Deck-Punkten, gemessen ab Seitenmitte */
.hero__fenster--oben   { --x: -401; --y: -724; --w: 366; }
.hero__fenster--orange { --x: 80;   --y: -336; --w: 415; }
.hero__fenster--links  { --x: -828; --y: -6;   --w: 667; }
.hero__fenster--unten  { --x: -245; --y: 352;  --w: 539; }

.hero__text {
  position: absolute;
  left: 50%;
  top: calc(50% - 62 * var(--t));
  width: min(100% - 2 * var(--page-gutter), 44rem);
  transform: translateX(-50%);
  text-align: center;
}

/* Logo groß im Hero, Breite wie der Schriftzug auf der Deck-Titelseite */
.hero__wordmark {
  display: block;
  width: calc(390 * var(--t));
  height: auto;
  margin-inline: auto;
}

.hero__tagline {
  display: block;
  margin-top: calc(18 * var(--t));
  color: var(--color-orange);
  font-size: max(1.375rem, 40 * var(--t));
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-tight);
  line-height: 1.18;
}

.hero__lead {
  max-width: 26em;
  margin: var(--space-3) auto 0;
  font-weight: var(--weight-bold);
  line-height: 1.35;
  text-wrap: balance;
}

.hero__cta {
  margin-top: var(--space-3);
}

/* Hochformat: schmalerer Ausschnitt der Deck-Seite, damit die Schrift groß bleibt */
@media (max-aspect-ratio: 1/1) {
  .hero {
    --hero-ref: 600;
    --u: calc(100vw / var(--hero-ref));
    --t: var(--u);
  }

  .hero__text {
    top: calc(50% - 120 * var(--t));
  }

  .hero__fenster--unten { --y: 400; }
  .hero__fenster--links { --y: 60; --x: -900; }
}

/* Lösung ----------------------------------------------------------------- */

.loesung__grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 30rem) 1fr;
  align-items: center;
  gap: var(--space-4);
}

/* In flachen Fenstern gibt die Zeichnung Höhe ab (100svh - 24.5rem), damit
   die Folie trotz des Platzes für die mitlaufende Navigation ins Fenster passt. */
.loesung__bild {
  width: 100%;
  max-height: max(16rem, 46vh);
  max-height: max(16rem, min(46svh, 100svh - 24.5rem));
  object-fit: contain;
}

@media (max-width: 52rem) {
  .loesung__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }

  .loesung__bild {
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: 26rem;
    margin-inline: auto;
  }
}

/* Rundum-Service --------------------------------------------------------- */

.service__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: var(--space-5);
  text-align: left;
}

.service__aussage {
  color: var(--color-orange);
  font-size: var(--text-title);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.service__liste li {
  padding-block: clamp(0.75rem, 2.6vh, 1.5rem);
  border-top: 1px dotted var(--color-ink);
}

.service__liste li:last-child {
  border-bottom: 1px dotted var(--color-ink);
}

.service__liste h3 {
  overflow-wrap: break-word;
  hyphens: auto;
  font-size: clamp(1.25rem, min(1.4vw + 0.9rem, 3.2vh), 1.875rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}

@media (max-width: 52rem) {
  .service__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .service__aussage {
    text-align: center;
  }
}

/* Wirtschaftlichkeit ----------------------------------------------------- */

.karten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.karte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  padding: clamp(1.5rem, 4.5vh, 2.75rem) clamp(0.75rem, 1.6vw, 1.5rem);
  border-radius: var(--radius-card);
  background: var(--color-sage);
}

.karte .stat__value {
  position: relative;
  display: inline-block;
  align-self: center;
  font-size: clamp(2.5rem, min(3.9vw + 1rem, 9vh), 4.75rem);
}

/* „p. a." klein neben der Zahl */
.karte .stat__zusatz {
  margin-left: 0.25em;
  font-size: 0.34em;
  letter-spacing: 0;
}

/* Fußnotenziffer hängt rechts außen, damit die Zahl optisch mittig steht */
.karte sup {
  position: absolute;
  top: 0.5em;
  margin-left: 0.1em;
  font-size: max(0.26em, 0.7rem);
}

.karte .stat__label {
  margin-top: 0;
}

@media (max-width: 52rem) {
  .karten {
    grid-template-columns: 1fr;
  }
}

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

/* Kontakt und Fußzeile bilden zusammen die letzte Folie */
.kontakt {
  min-height: calc(100vh - var(--footer-height));
  min-height: calc(100svh - var(--footer-height));
  padding-block: var(--space-3) 0;
}

.kontakt .container {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.kontakt__box {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-section) clamp(1.25rem, 5vw, 4rem);
  border-radius: var(--radius-card);
  background: var(--color-sage);
  text-align: left;
}

.kontakt__punkte {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-4);
  font-size: var(--text-claim);
  font-weight: var(--weight-bold);
  line-height: 1.2;
}

.kontakt__person {
  margin-top: var(--space-4);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
}

.kontakt__person a {
  font-size: var(--text-body);
  text-decoration-color: var(--color-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

@media (max-width: 52rem) {
  .kontakt__box {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .kontakt__text {
    text-align: center;
  }

  .kontakt__punkte {
    justify-content: center;
  }
}

/* Formular ----------------------------------------------------------------
   Abstände und Feldhöhen hängen an der Fensterhöhe (vh), damit das Formular
   auch in flachen Laptop-Fenstern möglichst in die Kontakt-Folie passt.
   ------------------------------------------------------------------------ */

.formular {
  --feld-abstand: clamp(0.45rem, 1.5vh, 0.9rem);
  container-type: inline-size;   /* für die Regel unten: Felder untereinander, wenn die Karte schmal ist */
  /* oben/unten hängt an der Fensterhöhe, links/rechts an der Breite: so ändert
     die Fensterhöhe nicht, wie viel Platz die Felder nebeneinander haben */
  padding: clamp(1.25rem, 3.2vh, 2rem) clamp(1.25rem, 2.4vw, 2rem);
  border-radius: calc(var(--radius-card) / 2);
  background: var(--color-paper);
  font-size: var(--text-small);
}

.formular__titel {
  font-size: var(--text-claim);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
}

.formular__intro {
  margin: 0.3rem 0 var(--feld-abstand);
  color: var(--color-muted);
  line-height: 1.4;
}

.feld {
  min-width: 0;
  margin: 0 0 var(--feld-abstand);
  padding: 0;
  border: 0;
}

.feld-reihe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
}

/* Baujahr hat den längsten Eintrag („weiß nicht / unsicher“): Die Spalte wird
   genau so breit, wie dieser Eintrag braucht, die Anzahl bekommt den Rest. */
.feld-reihe--fenster {
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: var(--space-1);
}

.feld label,
.feld legend {
  display: block;
  margin-bottom: 0.3rem;
  padding: 0;
  font-weight: var(--weight-bold);
  line-height: 1.3;
}

.feld label span {
  color: var(--color-muted);
  font-weight: var(--weight-regular);
}

.feld input:not([type="radio"]),
.feld select,
.feld textarea {
  display: block;
  width: 100%;
  min-height: clamp(2.4rem, 5.4vh, 3rem);
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--color-line);
  border-radius: 0.6rem;
  background: var(--color-paper);
  color: var(--color-ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
}

/* Auswahlfelder: weniger Rand, damit lange Einträge nicht abgeschnitten werden */
.feld select {
  padding-inline: 0.6rem 0.25rem;
}

.feld textarea {
  resize: vertical;
}

.feld input:not([type="radio"]):hover,
.feld select:hover,
.feld textarea:hover {
  border-color: var(--color-ink);
}

.feld ::placeholder {
  color: var(--color-muted);
  opacity: 1;
}

/* Kontaktweg: Umschalter E-Mail / Telefon, daneben das passende Feld */
.kontaktweg__reihe {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1);
}

.umschalter {
  display: flex;
  padding: 3px;
  border: 1px solid var(--color-line);
  border-radius: 0.6rem;
}

.umschalter input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.feld .umschalter label {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 0.85rem;
  border-radius: 0.4rem;
  cursor: pointer;
}

.umschalter input:checked + label {
  background: var(--color-ink);
  color: var(--color-paper);
}

.umschalter input:focus-visible + label {
  outline: 3px solid var(--color-ink);
  outline-offset: 3px;
}

/* Köderfeld: für Menschen unsichtbar, Bots füllen es aus */
.formular__koeder {
  position: absolute;
  left: -200vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular__senden {
  width: 100%;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: var(--weight-bold);
}

.formular__senden:disabled {
  background: var(--color-muted);
  color: var(--color-paper);
  cursor: progress;
}

/* Fehlermeldung nach dem Absenden */
.formular__status {
  margin-top: var(--feld-abstand);
  padding: 0.7rem 0.9rem;
  border-radius: 0.6rem;
  background: var(--color-orange-soft);
  line-height: 1.4;
}

.formular__hinweis {
  margin-top: var(--feld-abstand);
  color: var(--color-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.formular a {
  text-decoration-color: var(--color-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Bestätigung anstelle des Formulars */
.formular__danke {
  padding-block: var(--space-4);
  text-align: center;
}

.formular__danke:focus {
  outline: none;
}

.formular__danke p:last-child {
  margin-top: var(--space-1);
  font-size: var(--text-body);
}

/* Laptop-Fenster bis 992 px Höhe: Formular dichter, damit Kontakt und Fußzeile
   zusammen auf die Folie passen. Ab 800 px Höhe rückt der grüne Block unter die
   mitlaufende Navigation (siehe --nav-platz), deshalb reicht die Grenze so weit. */
@media (min-width: 52rem) and (max-height: 62rem) {
  .kontakt__box {
    padding-block: var(--space-3);
  }

  .formular__intro {
    display: none;
  }

  .formular__titel {
    margin-bottom: var(--feld-abstand);
  }

  .feld textarea {
    height: clamp(2.4rem, 5.4vh, 3rem);
  }

  .formular__hinweis {
    font-size: 0.75rem;
  }
}

/* Schmale Formularkarte (Handy, oder zweispaltige Seite in einem schmalen
   Fenster): Felder stehen untereinander, damit kein Eintrag abgeschnitten wird.
   Die @media-Regel darunter ist dieselbe für Browser ohne Container-Abfragen. */
@container (max-width: 21rem) {
  .feld-reihe,
  .kontaktweg__reihe {
    grid-template-columns: 1fr;
  }

  .feld-reihe {
    gap: 0;
  }

  .umschalter {
    min-height: 2.6rem;
  }

  .feld .umschalter label {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 26rem) {
  .feld-reihe,
  .kontaktweg__reihe {
    grid-template-columns: 1fr;
  }

  .feld-reihe {
    gap: 0;
  }

  .umschalter {
    min-height: 2.6rem;
  }

  .feld .umschalter label {
    flex: 1;
    justify-content: center;
  }
}

/* Fußzeile --------------------------------------------------------------- */

.footer {
  display: flex;
  align-items: center;
  min-height: var(--footer-height);
  scroll-snap-align: end;
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.footer__links {
  display: flex;
  gap: var(--space-3);
}

.footer__links a {
  text-decoration: none;
}

.footer__links a:hover {
  color: var(--color-orange);
}

/* Rechtstexte (Impressum, Datenschutz) ---------------------------------- */

.legal {
  max-width: 44rem;
  padding-block: calc(var(--space-section) + 2rem) var(--space-section);
}

.legal h1 {
  margin-bottom: var(--space-4);
  font-size: var(--text-title);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.legal h2 {
  margin: var(--space-4) 0 var(--space-1);
  font-size: var(--text-claim);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}

.legal p + p,
.legal address + p,
.legal ul + p,
.legal p + ul {
  margin-top: var(--space-2);
}

.legal address {
  font-style: normal;
}

.legal ul {
  padding-left: 1.2em;
  list-style: disc;
}

.legal a {
  text-decoration-color: var(--color-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Noch offene Angaben, vor dem Launch ersetzen */
.legal mark {
  padding: 0.1em 0.3em;
  border-radius: 0.3em;
  background: var(--color-orange-soft);
  color: inherit;
}