:root {
    --flaeche: #020c1c;
    --flaecheAbgesetzt: #0d2b4d;
    --text: #bcc7d8;
    --textSchwach: #bcc7d8;
    --ueberschrift: #ffffff;
    --aktion: #0d2b4d;
    --aktionText: #ffffff;
    --link: #edf5ff;
    --dunkel: #01081a;
    --textAufDunkel: #bcc7d8;
    --linie: #6e7789;
    --akzentZweit: #fde9ff;
    --akzentMarke: #edf5ff;
    --raster-max: 1440px;
    --raster-schmal: 640px;
    --abstand-1: 12px;
    --abstand-2: 20px;
    --abstand-3: 36px;
    --abstand-4: 68px;
    --abstand-5: 120px;
    --rundung: 16px;
    --rundung-klein: 6px;
    --rundung-pille: 6px;
    --rundung-eingabe: 6px;
    --karten-polster: 36px;
    --schrift-basis: 17px;
    --schrift-gross: 20px;
    --display-max: 3.5rem;
    --display-min: 2.1rem;
    --h2-max: 2.5rem;
    --h3-groesse: 1.75rem;
    --zeilenhoehe: 1.55;
    --display-laufweite: -0.018em;
    --display-zeilenhoehe: 1.06;
    --gewicht-ueberschrift: 500;
    --gewicht-aktion: 500;
    --farbe-kennzahl: #fde9ff;
    --nav-hoehe: 80px;
    --nav-abstand: 20px;
    --verlauf-aktion: linear-gradient(90deg, rgb(198,226,255) 0%, rgb(237,245,255) 26%, rgb(255,253,250) 48%, rgb(250,209,255) 89%);
    --verlauf-aktion-text: #01081a;
    --schrift-text: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --schrift-ueberschrift: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--flaeche);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: var(--schrift-basis);
  line-height: var(--zeilenhoehe);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--schrift-ueberschrift);
  color: var(--ueberschrift);
  font-weight: var(--gewicht-ueberschrift, 700);
  line-height: 1.2;
  margin: 0 0 var(--abstand-2);
  text-wrap: balance;
}
/* Displaygrößen aus dem Thema. Die ultrafette schmale Schrift von Caldera
   wirkt erst ab etwa 48px so, wie sie gedacht ist; darunter verliert sie ihren
   Charakter. Obergrenze 96px, darüber schreit die Seite nur noch. */
h1 {
  font-size: clamp(var(--display-min, 2.4rem), 1.4rem + 4.4vw, var(--display-max, 4.4rem));
  line-height: var(--display-zeilenhoehe, 1.02);
  letter-spacing: var(--display-laufweite, 0);
}
h2 {
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, var(--h2-max, 2.8rem));
  line-height: 1.08;
  letter-spacing: var(--display-laufweite, 0);
}
h3 { font-size: var(--h3-groesse, 1.3rem); }
p { margin: 0 0 var(--abstand-2); max-width: 66ch; }
a { color: var(--link); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--aktion);
  outline-offset: 2px;
}
img { max-width: 100%; height: auto; display: block; }

/* Raster */
.raster { width: 100%; max-width: var(--raster-max); margin-inline: auto; padding-inline: var(--abstand-2); }
.raster--schmal { max-width: var(--raster-schmal); }
section { padding-block: var(--abstand-5); }
/* Randlose Karussells arbeiten mit negativen Aussenabstaenden. Ohne Beschnitt
   waechst dadurch die Seitenbreite und man muss am Handy quer scrollen.
   Bewusst nicht auf .pin: dort wuerde es position:sticky ausser Kraft setzen. */
section:not(.pin) { overflow-x: clip; }

/* Rhythmus: nicht jeder Abschnitt atmet gleich. Gleichförmige Polsterung ist
   der Hauptgrund, warum eine Seite gebaut statt gestaltet wirkt. */
section.eng { padding-block: var(--abstand-3); }
section.weit { padding-block: calc(var(--abstand-5) * 1.6); }

/* Aus dem Raster ausbrechen. Bilder, die bis an den Rand laufen, tragen den
   halben Eindruck - so machen es teenage engineering und Limón. */
.voll { width: 100%; max-width: none; padding-inline: 0; }
.bis-rechts { margin-right: calc((100vw - min(100vw, var(--raster-max))) / -2 - var(--abstand-2)); }
@media (max-width: 900px) { .bis-rechts { margin-right: 0; } }

/* Kleine Marke über großen Überschriften. Kostet nichts und ordnet sofort. */
.marke {
  display: inline-block; margin-bottom: var(--abstand-2);
  font-size: max(14px, .86rem); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--textSchwach);
}
.marke::before {
  content: ""; display: inline-block; width: 2.2em; height: 2px;
  background: var(--aktion); vertical-align: .3em; margin-right: .8em;
}
section + section { border-top: 1px solid var(--linie); }
/* Auros trennt Abschnitte nicht durch Linien, sondern durch den Wechsel der
   Flaeche: "differentiation comes from surface color shifts in the teal stack".
   Eine Trennlinie waere dort ein Fremdkoerper. */
:root[data-ohne-trennlinien] section + section { border-top: 0; }

/* "Uppercase Section Label - 12px or 20px, weight 500, letter-spacing
   0.08-0.12em, silver or mist." Ohne Strich davor und ohne Fettschnitt: der
   Strich ist unsere Zutat, und Gewicht 700 verstoesst gegen die Regel
   "alle Ueberschriften und Marken in Gewicht 500, kein Fett". */
:root[data-ohne-trennlinien] .marke { font-weight: 500; letter-spacing: .12em; color: var(--textSchwach); }
:root[data-ohne-trennlinien] .marke::before { content: none; }
.flaeche-abgesetzt { background: var(--flaecheAbgesetzt); }
.flaeche-dunkel { background: var(--dunkel); color: var(--textAufDunkel); }
.flaeche-dunkel h1, .flaeche-dunkel h2, .flaeche-dunkel h3 { color: var(--textAufDunkel); }

/* Aktionen: immer mit Text, nie nur ein Symbol, und gross genug fuer den Daumen */
.aktion {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: .7em 1.4em;
  border-radius: var(--rundung);
  font-weight: var(--gewicht-aktion, 700); font-size: 1.05rem; text-decoration: none;
  border: 2px solid transparent;
}
.aktion--haupt { background: var(--aktion); color: var(--aktionText); }
/* Themen mit einem Verlauf setzen ihn nur hier ein - nie auf Flaechen oder Text. */
.aktion--haupt { background-image: var(--verlauf-aktion, none); }
:root[data-verlauf] .aktion--haupt { color: var(--verlauf-aktion-text, var(--aktionText)); }
/* Schaltflaechen in Versalien: 14px, weite Laufweite, kleiner Radius.
   Nach der Bauteilbeschreibung "Gradient Pill Button". */
:root[data-aktion-versalien] .aktion {
  text-transform: uppercase; font-size: .875rem; letter-spacing: .08em;
  border-radius: var(--rundung-klein, 6px);
  padding: 1.1em 1.6em; min-height: 0;
}
.aktion--haupt:hover { filter: brightness(1.12); }
.aktion--zweit { background: transparent; color: var(--link); border-color: currentColor; }

/* Nur fuer Vorleseprogramme */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.spring-zum-inhalt {
  position: absolute; left: var(--abstand-2); top: -100px; z-index: 100;
  background: var(--aktion); color: var(--aktionText);
  padding: .8em 1.2em; border-radius: var(--rundung); font-weight: 700;
}
.spring-zum-inhalt:focus { top: var(--abstand-2); }

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

/* Beschleunigungskurve des Bewegungs-Systems */
:root { --ease: cubic-bezier(.22,.61,.36,1); }

/* Sichtbarer Platzhalter fuer Angaben, die der Kunde noch liefern muss. */
.todo-tag {
  display: inline-block; padding: .3em .9em; border-radius: var(--rundung-pille, 999px);
  background: var(--flaecheAbgesetzt); border: 1px dashed var(--textSchwach);
  color: var(--textSchwach); font-size: .85rem; font-weight: 600;
}

/* kopf */
.kopf { position: sticky; top: 0; z-index: 20; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.kopf__innen { display: flex; align-items: center; gap: var(--abstand-3); min-height: var(--nav-hoehe, 72px); }

/* Navigation mittig: Logo links, Links in der Mitte, Aktion rechts.
   So beschreibt es die Bauteilliste von Auros. */
.kopf--mitte { background: transparent; border-bottom: 0; }
.kopf--mitte .kopf__nav { margin-inline: auto; }
.kopf--mitte .kopf__innen { gap: var(--abstand-2); }
.kopf--versalien .kopf__nav a {
  /* Auros setzt die Navigation auf 12px. Unsere Untergrenze sind 14px, damit
     auch Menschen ueber 60 sie am Handy lesen koennen. Die Wirkung traegt hier
     die weite Laufweite, nicht die geringe Groesse. */
  text-transform: uppercase; font-size: max(14px, .82rem); font-weight: 400;
  letter-spacing: .12em; color: var(--textSchwach);
}
.kopf--versalien .kopf__nav a[aria-current="page"] { color: var(--ueberschrift); }
.kopf--versalien .kopf__nav ul { gap: var(--nav-abstand, 20px); }
.kopf__name { font-family: var(--schrift-ueberschrift); font-weight: 700; font-size: 1.15rem; color: var(--ueberschrift); text-decoration: none; line-height: 1.15; }
/* Die Ortszeile unter dem Namen - nicht die Wortmarke daneben. */
.kopf__name span:not(.kopf__wort) { display: block; font-size: .88rem; font-weight: 400; color: var(--textSchwach); font-family: var(--schrift-text); }
.kopf__wort { font-family: var(--schrift-ueberschrift); font-weight: 600; color: var(--ueberschrift); letter-spacing: -.01em; }
.kopf__nav { margin-left: auto; }
.kopf__nav ul { display: flex; gap: var(--abstand-3); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.kopf__nav a { color: var(--text); text-decoration: none; font-weight: 600; padding-block: .6em; display: inline-block; }
.kopf__nav a:hover, .kopf__nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 3px; text-decoration-color: var(--aktion); }
.kopf__anruf { display: inline-flex; align-items: center; min-height: 48px; padding: .5em 1.1em; background: var(--aktion); color: var(--aktionText); border-radius: var(--rundung); font-weight: 700; text-decoration: none; white-space: nowrap; }

/* Am Handy: Der Kopf scrollt weg, damit die Überschrift nicht nach unten
   gedrückt wird. Die Telefonnummer sitzt stattdessen fest am unteren Rand -
   dort, wo der Daumen ohnehin liegt. */
.anrufleiste { display: none; }
@media (max-width: 860px) {
  .kopf { position: static; }
  .kopf__innen { flex-wrap: wrap; gap: var(--abstand-1) var(--abstand-2); padding-block: var(--abstand-2); min-height: 0; }
  .kopf__anruf { display: none; }
  .kopf__nav { margin-left: 0; width: 100%; }
  .kopf__nav ul { gap: 0 var(--abstand-3); }
  .kopf__nav a { font-size: .97rem; }

  body { padding-bottom: 76px; }
  .anrufleiste {
    display: block; position: fixed; inset: auto 0 0 0; z-index: 30;
    background: var(--flaeche); border-top: 1px solid var(--linie);
    padding: var(--abstand-1) var(--abstand-2) calc(var(--abstand-1) + env(safe-area-inset-bottom));
  }
  .anrufleiste a {
    display: flex; align-items: center; justify-content: center;
    min-height: 56px; width: 100%;
    background: var(--aktion); color: var(--aktionText);
    border-radius: var(--rundung); font-weight: 700; font-size: 1.1rem; text-decoration: none;
  }
}

/* fuss */
.fuss { background: var(--dunkel); color: var(--textAufDunkel); padding-block: var(--abstand-4) var(--abstand-3); margin-top: var(--abstand-5); }
.fuss a { color: var(--textAufDunkel); }
.fuss__spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--abstand-3); }
.fuss__logo { display: block; height: 30px; width: auto; margin-bottom: var(--abstand-2); }
.fuss h2 { font-size: 1.05rem; margin-bottom: var(--abstand-1); color: var(--textAufDunkel); }
.fuss p, .fuss li { margin: 0 0 .35em; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss__unten { margin-top: var(--abstand-3); padding-top: var(--abstand-2); border-top: 1px solid rgba(255,255,255,.22); display: flex; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-3); font-size: .92rem; }
.fuss__unten p { margin: 0; }

/* "The footer is a recessed well (#011d1c) with 120px vertical padding,
   creating a deep-pool effect." Ohne den Abstand nach oben, weil davor schon
   die versenkte Abschlussflaeche steht. */
.fuss--brunnen { padding-block: var(--abstand-5); margin-top: 0; }

/* 1:1 nach der Bauteilliste: "Logo (wordmark + mark) left, nav links centered,
   CTA button right." Ein Ortsname unter der Wortmarke steht dort nicht - das
   ist unser Muster fuer oertliche Betriebe und gehoert nicht in diese Vorlage. */
.kopf--wortmarke .kopf__name span:not(.kopf__wort) { display: none; }
/* Zeichen und Wortmarke nebeneinander - so macht es auch die Vorlage.
   Ein Zeichen allein traegt nur eine Marke, die man schon kennt; Webglanz
   kennt noch niemand, also muss der Name daneben stehen.
   Die Hoehe ist fest, die Breite ergibt sich - so bleibt das Verhaeltnis
   erhalten, egal welche Marke ein Kunde liefert. */
.kopf__name { display: inline-flex; align-items: center; gap: .6em; }
.kopf__logo { display: block; height: 30px; width: auto; flex: none; }
.kopf--wortmarke .kopf__wort { font-size: 1.12rem; }
@media (max-width: 860px) { .kopf__logo { height: 26px; } }
/* Und keine feste Anrufleiste am unteren Rand. Auch die ist unsere Zutat. */
.kopf--wortmarke ~ .anrufleiste { display: none; }
@media (max-width: 860px) {
  .kopf--wortmarke ~ .anrufleiste { display: none; }
  body:has(.kopf--wortmarke) { padding-bottom: 0; }
}
.fuss--brunnen .fuss__unten { border-top-color: var(--linie); }

/* titelbereich */
/* Titelbereich als Komposition, nicht als Textblock mit Bild daneben.
   Das Bild läuft rechts aus dem Raster heraus bis an den Fensterrand - so machen
   es teenage engineering und Limón, und es ist der zweitgrößte Unterschied zu
   einer gewöhnlichen Seite. */
.titel { padding-block: 0; border: 0; position: relative; overflow: hidden; }
.titel__innen {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: var(--abstand-5); align-items: center;
  min-height: min(86vh, 860px); padding-block: var(--abstand-4);
}
.titel h1 { margin-bottom: var(--abstand-3); text-wrap: balance; }
.titel__satz { font-size: var(--schrift-gross); color: var(--textSchwach); max-width: 46ch; }
.titel__aktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin-top: var(--abstand-4); }
.titel__unter { font-size: .95rem; color: var(--textSchwach); margin-top: var(--abstand-3); }

.titel__bild {
  align-self: stretch; display: flex;
  margin-right: calc((100vw - min(100vw, var(--raster-max))) / -2 - var(--abstand-2));
}
.titel__bild img {
  width: 100%; height: 100%; min-height: min(70vh, 660px);
  object-fit: cover;
  border-radius: var(--rundung) 0 0 var(--rundung);
}

/* Partikelkugel als Hintergrund des Titelbereichs. Reines SVG, keine Bibliothek,
   keine Anfrage nach aussen. Die Punkte liegen auf Kugelschalen und nehmen die
   Flaechenfarbe und den Akzent auf - im Original ist das die Datenkugel. */
.titel--vollbild .titel__innen { min-height: calc(100vh - var(--nav-hoehe, 72px)); }
.kugel {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; overflow: hidden;
}
/* Auf der echten Seite steigt die Kugel von unten ins Bild und wird vom
   Fensterrand angeschnitten - sie liegt nicht mittig hinter dem Text. */
.kugel img { width: min(120vh, 92vw); height: auto; opacity: .55; max-width: none; }
.titel--vollbild .kugel { align-items: flex-end; }
.titel--vollbild .kugel img {
  width: min(135vh, 112vw); opacity: .85;
  /* So weit nach unten, dass nur die obere Kappe ins Bild ragt.
     Nachgemessen: bei 64% lagen 2,89 Prozent der Flaeche hinter dem Satz
     unter 4,5:1 - das 99. Perzentil stand bei 2,13:1. Der Mittelwert sah mit
     9,8:1 tadellos aus und hat es verdeckt, genau wie erwartet.
     Kein Schleier darueber, sondern die Kugel tiefer: beim Vorbild steigt sie
     von unten ins Bild und der Text steht in freier Flaeche darueber. */
  transform: translateY(76%);
}
@media (max-width: 700px) { .titel--vollbild .kugel img { transform: translateY(80%); opacity: .7; } }
.kugel__punkt { fill: var(--akzentMarke, currentColor); }
.kugel__rand { fill: var(--akzentZweit, currentColor); }
.titel__innen { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .kugel img { animation: kugel-dreht 64s linear infinite; }
}
@keyframes kugel-dreht { to { transform: rotate(360deg); } }
@media (max-width: 700px) { .kugel img { opacity: .35; } }

/* Ohne Titelbild wird der Textblock mittig gestapelt statt links zu kleben.
   So macht es auch Auros: Eyebrow, Ueberschrift, Satz, Aktion uebereinander
   ueber die volle Hoehe. Sonst bliebe die halbe Flaeche leer. */
.titel__innen--ohne-bild {
  grid-template-columns: 1fr;
  justify-items: center; text-align: center;
  max-width: 900px; margin-inline: auto;
}
.titel__innen--ohne-bild .titel__satz { margin-inline: auto; }
.titel__innen--ohne-bild .titel__aktionen { justify-content: center; }

@media (max-width: 900px) {
  .titel__innen {
    grid-template-columns: 1fr; gap: var(--abstand-3);
    min-height: 0; padding-block: var(--abstand-4) 0;
  }
  .titel__bild {
    margin-inline: calc(var(--abstand-2) * -1);
  }
  .titel__bild img { min-height: 52vh; border-radius: 0; }
}

/* arbeiten */
.arbeiten { background: var(--flaeche); }
.arbeiten__kopf { max-width: 640px; margin-bottom: var(--abstand-4); }
.arbeiten__kopf p { color: var(--textSchwach); font-size: var(--schrift-gross); margin-bottom: 0; }

/* Bauform des Abschnitts "Global presence" bei Auros: eine breite Karte mit
   einem Verlauf von dunkel links nach hell rechts. Links Marke, Ueberschrift,
   Text und Schaltflaeche, rechts ein grosses Bild, das ueber den Rand der
   Karte hinauslaeuft und von ihm beschnitten wird.
   Auros zeigt sie einmal. Wir zeigen drei - jede zweite gespiegelt, sonst
   wirkt es wie eine Liste. */
.netzkarte {
  position: relative; overflow: hidden;
  border-radius: var(--rundung);
  display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  align-items: center; gap: var(--abstand-3);
  min-height: 460px;
  /* Der Verlauf bleibt bis 46 Prozent dunkel. Genau dort endet die
     Textspalte - so steht heller Text nie auf heller Flaeche. */
  background: linear-gradient(100deg,
    var(--dunkel) 0%,
    var(--dunkel) 30%,
    var(--flaecheAbgesetzt) 48%,
    color-mix(in srgb, var(--akzentMarke) 72%, var(--flaecheAbgesetzt)) 76%,
    var(--akzentMarke) 100%);
}
.netzkarte + .netzkarte { margin-top: var(--abstand-2); }
.arbeiten__aktion { margin: var(--abstand-4) 0 0; }
.netzkarte__text {
  position: relative; z-index: 1;
  padding: var(--abstand-4) var(--abstand-3);
}
@media (min-width: 900px) { .netzkarte__text { padding: var(--abstand-5) var(--abstand-4); } }
.netzkarte h3 {
  font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); line-height: 1.04;
  letter-spacing: var(--display-laufweite, 0);
  margin: 0 0 var(--abstand-3); color: var(--ueberschrift);
}
.netzkarte__lage { margin: 0 0 .9em; color: var(--textSchwach); }
.netzkarte__loesung {
  margin: 0 0 var(--abstand-3); padding-left: var(--abstand-2);
  border-left: 2px solid color-mix(in srgb, var(--akzentMarke) 45%, transparent);
  color: var(--textAufDunkel);
}
.netzkarte__zeile {
  display: block; margin-bottom: var(--abstand-3);
  font-size: max(14px, .82rem); letter-spacing: .14em; text-transform: uppercase;
  color: var(--textSchwach);
}

/* Die Buehne beschneidet das Bild am Kartenrand. Genau das macht die Wirkung:
   das Bild hoert nicht auf, es laeuft weiter. */
.netzkarte__buehne {
  position: relative; align-self: stretch;
  display: flex; align-items: center; justify-content: flex-start;
  overflow: hidden;
}
.netzkarte__buehne .bildschirm {
  width: 130%; max-width: none; flex: none;
  transform: translateY(6%) rotate(-1.2deg);
}
/* Ein Telefon laeuft nicht ueber den Rand - es ist schmal und wuerde dann
   halbiert wirken. Es steht mittig in der Buehne, sonst bleibt rechts eine
   grosse leere helle Flaeche stehen. */
.netzkarte__buehne:has(.telefon) { justify-content: center; }
.netzkarte--gedreht .netzkarte__buehne:has(.telefon) { justify-content: center; }
.netzkarte__buehne .telefon { margin-block: var(--abstand-3); }

/* Jede zweite Karte gespiegelt. */
.netzkarte--gedreht { grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); }
.netzkarte--gedreht {
  background: linear-gradient(260deg,
    var(--dunkel) 0%,
    var(--dunkel) 30%,
    var(--flaecheAbgesetzt) 48%,
    color-mix(in srgb, var(--akzentMarke) 72%, var(--flaecheAbgesetzt)) 76%,
    var(--akzentMarke) 100%);
}
.netzkarte--gedreht .netzkarte__text { order: 2; }
.netzkarte--gedreht .netzkarte__buehne { order: 1; justify-content: flex-end; }
.netzkarte--gedreht .netzkarte__buehne .bildschirm { transform: translateY(6%) rotate(1.2deg); }

@media (max-width: 900px) {
  /* Gestapelt laeuft der Verlauf nach unten, damit der Text oben auf der
     dunklen Haelfte bleibt. */
  .netzkarte, .netzkarte--gedreht {
    grid-template-columns: 1fr; min-height: 0;
    background: linear-gradient(176deg,
      var(--dunkel) 0%, var(--dunkel) 42%,
      var(--flaecheAbgesetzt) 62%, var(--akzentMarke) 100%);
  }
  .netzkarte--gedreht .netzkarte__text { order: 0; }
  .netzkarte--gedreht .netzkarte__buehne { order: 1; justify-content: flex-start; }
  .netzkarte__buehne { padding: 0 var(--abstand-3) var(--abstand-4); }
  .netzkarte__buehne .bildschirm { width: 100%; transform: none; }
  .netzkarte--gedreht .netzkarte__buehne .bildschirm { transform: none; }
}

/* Bildschirmrahmen. Schlicht: eine Leiste mit drei Punkten und der Adresse,
   darunter die Aufnahme. Kein Schatten - Tiefe kommt aus der Flaechenstaffelung. */
.bildschirm {
  margin: 0; border-radius: var(--rundung); overflow: hidden;
  background: var(--flaecheAbgesetzt);
  border: 1px solid color-mix(in srgb, var(--linie) 45%, transparent);
}
.bildschirm__leiste {
  display: flex; align-items: center; gap: var(--abstand-2);
  padding: .7em var(--abstand-2);
  border-bottom: 1px solid color-mix(in srgb, var(--linie) 45%, transparent);
}
.bildschirm__punkte { display: inline-flex; gap: 6px; flex: none; }
.bildschirm__punkte i {
  width: 9px; height: 9px; border-radius: 50%;
  background: color-mix(in srgb, var(--textSchwach) 45%, transparent);
}
.bildschirm__adresse {
  font-size: max(14px, .8rem); letter-spacing: .06em;
  color: var(--textSchwach); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bildschirm img { width: 100%; height: auto; display: block; }

/* Telefonrahmen. Die ganze Seite laeuft langsam durch das Fenster, damit man
   sieht, wie sie von oben bis unten aussieht - ein Ausschnitt wuerde genau die
   Frage offenlassen, die der Eintrag beantworten soll.
   Feste Masse statt Seitenverhaeltnis: der Weg der Bewegung ist Bildhoehe
   minus Fensterhoehe, und beides muss in derselben Einheit stehen. */
.telefon {
  position: relative; margin: 0; flex: none;
  width: 260px; height: 520px; max-width: 100%;
  border-radius: 26px; overflow: hidden;
  background: var(--dunkel);
  border: 6px solid color-mix(in srgb, var(--dunkel) 88%, var(--linie));
}
.telefon img {
  position: absolute; inset-inline: 0; top: 0;
  width: 100%; height: auto; max-width: none;
}
.telefon__kerbe {
  position: absolute; z-index: 2; top: 0; left: 50%; transform: translateX(-50%);
  width: 32%; height: 13px;
  background: color-mix(in srgb, var(--dunkel) 88%, var(--linie));
  border-radius: 0 0 10px 10px;
}
@media (prefers-reduced-motion: no-preference) {
  .telefon img { animation: telefon-laeuft 54s cubic-bezier(.65,0,.35,1) infinite alternate; }
}
/* 100% ist die dargestellte Hoehe der Aufnahme, 520px die des Fensters. Am
   Anfang und am Ende steht sie kurz still, sonst kann man nichts lesen. */
@keyframes telefon-laeuft {
  0%, 7% { transform: translateY(0); }
  93%, 100% { transform: translateY(calc(-100% + 520px)); }
}

/* grosstext */
/* Der tuerkise Lichtschein. Auf der Vorlage liegt er unter fast jedem
   Abschnitt und ist der Grund, warum die Flaeche nicht flach wirkt. Reines
   CSS, keine Bilddatei, keine Anfrage nach aussen. */
.glanz { position: relative; isolation: isolate; }
.glanz::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 18% 78%, color-mix(in srgb, var(--akzentMarke) 20%, transparent) 0%, transparent 70%),
    radial-gradient(50% 45% at 82% 30%, color-mix(in srgb, var(--flaecheAbgesetzt) 85%, transparent) 0%, transparent 72%);
}

/* Die eingerueckte Tafel. Auf der Vorlage sind die Inhaltsbloecke Karten mit
   16px Radius, die vom Fensterrand abruecken - nicht Baender ueber die volle
   Breite. */
.tafel {
  background: color-mix(in srgb, var(--flaecheAbgesetzt) 55%, var(--dunkel));
  border: 1px solid color-mix(in srgb, var(--linie) 35%, transparent);
  border-radius: var(--rundung);
  padding: var(--abstand-4) var(--abstand-3);
}
@media (min-width: 900px) { .tafel { padding: var(--abstand-5) var(--abstand-4); } }

/* Die helle Tafel. Auf den Unterseiten von Auros steht genau eine davon: eine
   fast weisse Karte mit dunklem Text mitten in der dunklen Seite. Die
   Style-Datei erwaehnt sie nicht - sie ist aber der staerkste Bruch im ganzen
   Aufbau und der Grund, warum die Unterseiten nicht monoton wirken. */
.tafel--hell {
  background: var(--akzentMarke);
  border-color: transparent;
  color: var(--dunkel);
}
.tafel--hell h1, .tafel--hell h2, .tafel--hell h3 { color: var(--dunkel); }
.tafel--hell p, .tafel--hell li { color: color-mix(in srgb, var(--dunkel) 82%, transparent); }
.tafel--hell .tafel__vor { color: color-mix(in srgb, var(--dunkel) 70%, transparent); }
.tafel--hell a { color: var(--dunkel); }
/* Auf der hellen Tafel kehrt sich die Schaltflaeche um: dunkle Flaeche,
   heller Text. Der Verlauf waere dort unsichtbar.
   Die Regel muss den Themenselektor :root[data-verlauf] uebertreffen, sonst
   gewinnt dessen dunkle Schriftfarbe und die Schaltflaeche wird dunkel auf
   dunkel. Genau das hat das Qualitaetstor gemeldet. */
:root .tafel--hell .aktion--haupt,
:root[data-verlauf] .tafel--hell .aktion--haupt {
  background: var(--dunkel); background-image: none; color: var(--akzentMarke);
}
.tafel--hell .trennreihe { border-color: color-mix(in srgb, var(--dunkel) 18%, transparent); }
.tafel--hell .trennreihe__pfeil { background: color-mix(in srgb, var(--dunkel) 10%, transparent); color: var(--dunkel); }

/* Reihen mit Haarlinie und Pfeil rechts. Auf der Kontaktseite von Auros ist das
   die ganze rechte Spalte, auf der Startseite der Explore-Bereich. */
.trennreihe {
  display: grid; grid-template-columns: 1fr auto; gap: var(--abstand-2);
  align-items: center; padding: var(--abstand-3) 0;
  border-bottom: 1px solid var(--linie);
  text-decoration: none;
}
.trennreihe:first-child { border-top: 1px solid var(--linie); }
.trennreihe h3 { margin: 0; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); }
.trennreihe p { margin: .3em 0 0; font-size: .95rem; }
.trennreihe__pfeil {
  width: 32px; height: 32px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--rundung-klein, 6px);
  background: color-mix(in srgb, var(--flaecheAbgesetzt) 70%, transparent);
  color: var(--ueberschrift); font-size: 1rem; line-height: 1;
  transition: transform .3s var(--ease);
}
.trennreihe:hover .trennreihe__pfeil { transform: translate3d(2px, -2px, 0); }

/* Zwei Spalten: links die Ueberschrift, rechts der Inhalt. So sind die
   Unterseiten von Auros gebaut. */
.zweispalt {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: var(--abstand-5);
}
@media (max-width: 860px) { .zweispalt { grid-template-columns: 1fr; gap: var(--abstand-3); } }

/* Kopfzeile einer Tafel: Marke links, Ueberschrift darunter, Schaltflaeche
   rechts oben auf derselben Hoehe wie die Ueberschrift. */
.tafel__kopf {
  display: grid; grid-template-columns: 1fr auto; align-items: end;
  gap: var(--abstand-2); margin-bottom: var(--abstand-4);
}
.tafel__kopf h2 { margin: 0; }
.tafel__vor {
  display: block; margin-bottom: var(--abstand-2);
  font-size: max(14px, .82rem); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--textSchwach);
}
.tafel__satz { max-width: 52ch; color: var(--textSchwach); margin: var(--abstand-2) 0 0; }
@media (max-width: 760px) {
  .tafel__kopf { grid-template-columns: 1fr; align-items: start; }
}

.band { position: relative; background: var(--flaeche); overflow: hidden; padding-block: var(--abstand-5); }
.band__innen { width: 100%; max-width: var(--raster-max); margin-inline: auto; padding-inline: var(--abstand-2); }
.band h2 {
  margin: 0;
  /* Auf der Vorlage fuellt eine Zeile die Fensterbreite. Darum keine feste
     Obergrenze in rem, sondern eine Groesse, die mit dem Fenster waechst. */
  /* 167px gemessen - weit ueber allem, was die Vorbilder zeigen. Der
     Anzeigegrad liegt bei 72px und ist dem Hauptakt und den Pausen
     vorbehalten. Gross genug, dass es traegt; klein genug, dass es nicht
     behauptet, was das Material nicht hergibt. */
  font-size: clamp(2.2rem, 1rem + 4.4vw, 4.5rem);
  line-height: .96;
  letter-spacing: -.046em;
  font-weight: var(--gewicht-ueberschrift, 500);
  /* Verlauf von Weiss nach Rosa auf der Schrift selbst. */
  background-image: linear-gradient(104deg, var(--ueberschrift) 34%, var(--farbe-kennzahl, var(--ueberschrift)) 96%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* Wenn ein Browser den Schriftausschnitt nicht kann, bleibt der Text weiss -
   unsichtbar waere er sonst. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .band h2 { color: var(--ueberschrift); background-image: none; }
}
.band h2 span { display: block; }
/* Die Zeilen ruecken gegeneinander ein - das ist der Rhythmus der Vorlage. */
.band h2 span:nth-child(2) { padding-left: 8%; }
.band h2 span:nth-child(3) { padding-left: 16%; }
.band--mitte h2 { text-align: center; }
.band--mitte h2 span:nth-child(2),
.band--mitte h2 span:nth-child(3) { padding-left: 0; }
@media (max-width: 700px) {
  .band h2 span:nth-child(2) { padding-left: 4%; }
  .band h2 span:nth-child(3) { padding-left: 8%; }
}

/* leistungen */
.leistungen__gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--abstand-3); }
.leistung { background: var(--flaecheAbgesetzt); border-radius: var(--rundung); padding: var(--abstand-3); }
.leistung h3 { margin-bottom: .4em; }
.leistung p { margin-bottom: 0; }

/* Zweite Bauweise nach der Beschreibung von Auros: links gestapelte
   Leistungsreihen mit Pfeil-Schaltflaeche, rechts eine geometrische Grafik.
   Die Reihen haben keine Flaeche - sie werden durch Haarlinien getrennt. */
.leistungen--reihen { background: var(--flaeche); }
/* Auf der echten Seite liegen die Reihen in der linken Haelfte einer Tafel,
   die Grafik steht rechts daneben und laeuft ueber den Rand hinaus. */
.leistungen--reihen .leistungen__innen {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--abstand-4); align-items: center;
}
.reihe {
  display: grid; grid-template-columns: 1fr auto; gap: var(--abstand-2);
  align-items: start;
  padding: var(--abstand-3) 0;
  border-top: 1px solid var(--linie);
}
.reihe:last-child { border-bottom: 1px solid var(--linie); }
.reihe h3 { margin-bottom: .5em; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.25rem); }
.reihe p { margin: 0; color: var(--textSchwach); max-width: 46ch; }
.reihe__pfeil {
  grid-row: span 2; align-self: start;
  width: 32px; height: 32px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--rundung-klein, 6px);
  background: color-mix(in srgb, var(--flaecheAbgesetzt) 70%, transparent);
  color: var(--ueberschrift); text-decoration: none; font-size: 1rem; line-height: 1;
  transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.reihe__pfeil:hover { transform: translate3d(2px, -2px, 0); background: var(--flaecheAbgesetzt); }
.gitternetz { display: flex; justify-content: center; }
.gitternetz svg { width: 100%; max-width: 420px; height: auto; }
.gitternetz circle { fill: none; stroke: var(--textSchwach); stroke-width: 1.5; }
.gitternetz line { stroke: var(--linie); stroke-width: 1; }
.gitternetz .voll { fill: var(--ueberschrift); stroke: none; }
@media (max-width: 900px) {
  .leistungen--reihen .leistungen__innen { grid-template-columns: 1fr; gap: var(--abstand-3); }
  .gitternetz { order: -1; }
}

/* kennzahlen */
/* Der Abschnitt liegt auf der Grundflaeche, die Karten eine Stufe darueber.
   Ohne diesen Unterschied blieben bei dunklen Themen nur die grauen Gitterlinien
   sichtbar und der Block wirkte wie ein grauer Kasten. */
.kennzahlen { background: var(--flaeche); }
.kennzahlen__gitter {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px; background: var(--linie);
  border-block: 1px solid var(--linie);
  border-radius: var(--rundung-klein, 4px); overflow: hidden;
}
/* Haarlinien statt Kartenrahmen - die Regel von teenage engineering. Der
   Zwischenraum ist die Linie, nicht ein Rand um jede Karte. */
.kennzahl {
  background: var(--flaecheAbgesetzt);
  padding: var(--abstand-4) var(--abstand-3);
}
.kennzahl__wert {
  display: block;
  font-family: var(--schrift-ueberschrift);
  font-size: clamp(3rem, 2rem + 4.5vw, 5.4rem);
  line-height: .92;
  letter-spacing: var(--display-laufweite, 0);
  color: var(--farbe-kennzahl, var(--ueberschrift));
  margin-bottom: var(--abstand-2);
}
.kennzahl__einheit { font-size: .44em; letter-spacing: .02em; }

/* Bauform der echten Seite - und die weicht von der Beschreibung ab.
   Kein Gitter aus gleichen Spalten, sondern eine ungleiche Anordnung:
   links eine hohe Kachel in blassem Rosa mit dunklem Text, rechts oben eine
   breite, darunter zwei kleine. Die Beschriftung steht ueber der Zahl, nicht
   darunter, und die Zahl sitzt am unteren Rand ihrer Kachel. */
.kennzahlen--offen { background: var(--flaeche); }
.kennzahlen--offen .kennzahlen__gitter {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(190px, auto);
  gap: var(--abstand-2); background: transparent;
  border-block: 0; border-radius: 0; overflow: visible;
}
.kennzahlen--offen .kennzahl {
  background: var(--flaecheAbgesetzt);
  border-radius: var(--rundung);
  padding: var(--karten-polster, 36px);
  /* Beschriftung oben, Zahl und Satz zusammen unten. Mit space-between wurden
     die drei Teile gleichmaessig verteilt und die Zahl schwebte in der Mitte -
     besonders auffaellig in der hohen Kachel. */
  display: flex; flex-direction: column; gap: 0;
}
/* Erste Kachel: hoch und in Rosa. "The pink is a background for dark text." */
.kennzahlen--offen .kennzahl:nth-child(1) {
  grid-row: span 2;
  background: var(--farbe-kennzahl, var(--flaecheAbgesetzt));
}
.kennzahlen--offen .kennzahl:nth-child(1) .kennzahl__wert,
.kennzahlen--offen .kennzahl:nth-child(1) .kennzahl__text { color: var(--dunkel); }
/* Zweite Kachel: ueber zwei Spalten. */
.kennzahlen--offen .kennzahl:nth-child(2) { grid-column: span 2; }
.kennzahlen--offen .kennzahl__wert {
  font-size: clamp(2.6rem, 1.4rem + 3.6vw, 4rem);
  line-height: 1; letter-spacing: -.04em; margin: 0; order: 2;
  margin-top: auto; /* schiebt Zahl und Satz gemeinsam an den unteren Rand */
  padding-top: var(--abstand-4);
  color: var(--ueberschrift);
}
.kennzahlen--offen .kennzahl__text {
  order: 1; margin: 0; max-width: 22ch;
  color: var(--textSchwach); letter-spacing: .1em;
}
/* Unter der Zahl ein Satz, der sagt, warum sie den Betrieb angeht. Ohne ihn
   ist eine Zahl nur eine Behauptung - mit ihm ist sie eine Antwort auf etwas,
   das der Leser kennt. */
.kennzahlen--offen .kennzahl__satz {
  order: 3; margin: var(--abstand-2) 0 0; max-width: 30ch;
  font-size: .97rem; letter-spacing: 0; text-transform: none;
  line-height: 1.45; color: var(--textSchwach);
}
.kennzahlen--offen .kennzahl:nth-child(1) .kennzahl__satz {
  color: color-mix(in srgb, var(--dunkel) 78%, transparent);
}
@media (max-width: 860px) {
  .kennzahlen--offen .kennzahlen__gitter { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .kennzahlen--offen .kennzahl:nth-child(1) { grid-row: auto; }
  .kennzahlen--offen .kennzahl:nth-child(2) { grid-column: auto; }
}

/* flaechenkarten */
.flaechenkarten { background: var(--flaeche); }
.flaechenkarten__gitter {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--abstand-2);
}
.flaechenkarte {
  background: var(--flaecheAbgesetzt);
  border-radius: var(--rundung);
  padding: var(--karten-polster, 36px);
}
.flaechenkarte__marke {
  display: block; margin-bottom: var(--abstand-3);
  font-size: max(14px, .82rem); letter-spacing: .14em; text-transform: uppercase;
  color: var(--textSchwach);
}
.flaechenkarte h3 {
  font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem); line-height: 1.1;
  margin-bottom: var(--abstand-2); color: var(--ueberschrift);
}
.flaechenkarte p { margin: 0; color: var(--textSchwach); }

/* ctaband */
.ctaband { --wipe-color: var(--dunkel); color: var(--textAufDunkel); background: transparent; text-align: center; }
.ctaband h2 { color: var(--textAufDunkel); max-width: 18ch; margin-inline: auto; }
.ctaband p { color: var(--textAufDunkel); opacity: .86; max-width: 640px; margin-inline: auto; }
.ctaband__aktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-2); justify-content: center; margin-top: var(--abstand-3); }
.ctaband .aktion--zweit { color: var(--textAufDunkel); }

/* "Recessed Card - Liquid Deep background, 16px border-radius, 120px vertical
   padding. Creates a sunken well effect - the deepest UI surface, used for
   call-to-action panels with maximum breathing room."
   Kein Wischeffekt: die Flaeche steht als Becken im Raster, nicht als Band
   ueber die volle Breite. */
.ctaband--brunnen {
  --wipe-color: transparent;
  background: var(--flaeche); padding-block: var(--abstand-4);
}
.ctaband--brunnen .raster > div {
  background: var(--dunkel); border-radius: var(--rundung);
  padding: var(--abstand-5) var(--abstand-3);
}

/* seitenkopf */
.seitenkopf { background: var(--flaecheAbgesetzt); padding-block: var(--abstand-4); }
.seitenkopf p { font-size: var(--schrift-gross); color: var(--textSchwach); margin-bottom: 0; }

/* Der Titelbereich einer Unterseite bei Auros: Marke, grosse Ueberschrift und
   ein Satz - alles mittig, viel Luft, keine Schaltflaeche. Der Lichtschein
   liegt dahinter. */
.seitenkopf--mitte {
  background: var(--flaeche); text-align: center;
  padding-block: calc(var(--abstand-5) * 1.2) var(--abstand-5);
}
.seitenkopf--mitte .raster { max-width: 900px; }
.seitenkopf--mitte h1 { margin-bottom: var(--abstand-3); }
.seitenkopf--mitte p { max-width: 58ch; margin-inline: auto; }

/* leistungenDetail */
.leistung-detail { border-bottom: 1px solid var(--linie); padding-block: var(--abstand-3); }
.leistung-detail:last-child { border-bottom: 0; }
.leistung-detail h2 { margin-bottom: var(--abstand-1); }

/* Bauform der Unterseiten von Auros: eine helle Tafel, links die Ueberschrift,
   rechts der Text und darunter die Schaltflaeche. Danach die Leistungen als
   Reihen mit Haarlinie und Pfeil. */
.leistung-detail--hell { background: var(--flaeche); }
.leistung-detail--hell .leistung-detail { border: 0; padding: 0; }
.leistung-detail__text p:last-child { margin-bottom: 0; }
.leistung-detail__aktion { margin-top: var(--abstand-3); }

/* kontakt */
.kontakt { background: var(--flaecheAbgesetzt); }
.kontakt__innen { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--abstand-4); }
@media (max-width: 800px) { .kontakt__innen { grid-template-columns: 1fr; } }
.kontakt__nummer { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); font-weight: 700; text-decoration: none; display: inline-block; margin-bottom: var(--abstand-2); }
.feld { margin-bottom: var(--abstand-2); }
.feld label { display: block; font-weight: 600; margin-bottom: .35em; }
.feld input, .feld textarea {
  width: 100%; padding: .75em .8em; font: inherit; color: var(--text);
  background: var(--flaeche); border: 2px solid var(--linie); border-radius: var(--rundung);
}
.feld textarea { min-height: 7em; }
.feld--zustimmung { display: flex; gap: .7em; align-items: flex-start; font-size: .95rem; }
.feld--zustimmung input { width: 1.4em; height: 1.4em; flex: none; margin-top: .15em; }
.feld--zustimmung label { font-weight: 400; }
.kontakt__falle { position: absolute; left: -9999px; }

/* Meldung nach einem Fehlversuch. Der Empfaenger leitet mit ?fehler=... zurueck,
   der Abschnitt zeigt den passenden Satz. Ohne JavaScript - jede Meldung steht
   im HTML und wird ueber :target-aehnliche Sichtbarkeit gesteuert; hier reicht
   eine Auszeichnung, die das Formular selbst mitliefert. */
.formmeldung {
  display: flex; gap: .7em; align-items: flex-start;
  margin-bottom: var(--abstand-3); padding: var(--abstand-2);
  border-radius: var(--rundung-klein, 6px);
  border: 2px solid var(--aktion);
  background: var(--flaeche);
  font-weight: 600;
}
/* Standardmaessig sind alle Meldungen aus. Der Empfaenger leitet auf
   #fehler-<code> zurueck, und :target schaltet genau die eine ein.
   Reines CSS: kein Skript, keine Ausnahme in der Sicherheitsrichtlinie, und
   es funktioniert auch, wenn ein Skript nicht laedt. */
.formmeldung { display: none; }
.formmeldung:target { display: flex; }
.formmeldung__zeichen { flex: none; font-size: 1.2em; line-height: 1.2; }

/* Auros kennt kein Kontaktformular auf der Startseite - aber es kennt die
   "Surface Card": Flaeche Liquid Kelp, 16px Radius, 36-48px Polster, kein
   Schatten, kein Rahmen. Das Formular zieht hier in genau dieses Bauteil ein.
   Unser eigenes Qualitaetstor verlangt den Weg zur Anfrage auf der Startseite,
   und ein Verweis auf eine Unterseite kostet messbar Anfragen. */
.kontakt--karte { background: var(--flaeche); }
.kontakt--karte .kontakt__innen {
  background: var(--flaecheAbgesetzt);
  border-radius: var(--rundung);
  padding: var(--karten-polster, 36px);
}
.kontakt--karte .feld input, .kontakt--karte .feld textarea {
  background: var(--dunkel); border-color: var(--linie);
}
@media (max-width: 800px) { .kontakt--karte .kontakt__innen { padding: var(--abstand-3); } }

/* Bauform der Kontaktseite von Auros: eine helle Tafel, links Marke und
   Ueberschrift, rechts die Wege - jeder als Reihe mit Haarlinie und Pfeil.
   Ein Formular hat Auros dort nicht. Wir brauchen eines, also steht es
   darunter in einer eigenen Tafel statt daneben. */
.kontakt--hell { background: var(--flaeche); }
.kontakt--hell .kontakt__nummer { color: var(--dunkel); }
.kontakt__wege { margin-top: var(--abstand-3); }
.kontakt__formtafel { background: var(--flaeche); padding-top: 0; }
.kontakt--hell + .kontakt__formtafel .tafel { margin-top: var(--abstand-2); }

/* fragen */
.fragen__liste { display: grid; gap: var(--abstand-3); max-width: var(--raster-schmal); }
.frage { border-left: 4px solid var(--aktion); padding-left: var(--abstand-2); }
.frage h3 { margin: 0; font-size: 1.15rem; }
.frage .faq-q { color: var(--ueberschrift); font-size: inherit; }
.frage .faq-a p:last-child { margin-bottom: 0; }
/* Dieselbe Zweiteilung wie in den uebrigen Abschnitten: oben die Lage, in der
   der Fragende steckt, darunter die Antwort mit dem Strich. Wer die Seite von
   oben liest, erkennt das Muster wieder. */
.frage .faq-lage { margin-bottom: .9em; color: var(--textSchwach); }
.frage .faq-loesung {
  margin: 0; padding-left: var(--abstand-2);
  border-left: 2px solid color-mix(in srgb, var(--aktion) 55%, var(--linie));
}
.frage p:last-child { margin-bottom: 0; }

/* rechtstext */
.rechtstext { padding-block: var(--abstand-4); }
.rechtstext h2 { margin-top: var(--abstand-3); }
.rechtstext p, .rechtstext li { max-width: 72ch; }

/* danke */
.danke { padding-block: calc(var(--abstand-5) * 1.2) var(--abstand-5); }
.danke .raster { max-width: 640px; }
.danke__satz { font-size: var(--schrift-gross); color: var(--textSchwach); }
.danke__punkte { list-style: none; padding: 0; margin: var(--abstand-3) 0 0; }
.danke__punkte li { padding-left: 1.7em; position: relative; margin-bottom: .6em; }
.danke__punkte li::before {
  content: "—"; position: absolute; left: 0; color: var(--textSchwach);
}
.danke__aktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin-top: var(--abstand-4); }

/* nichtGefunden */
.vierNullVier { padding-block: calc(var(--abstand-5) * 1.1) var(--abstand-5); }
.vierNullVier .raster { max-width: 640px; }
.vierNullVier__zahl {
  display: block; font-family: var(--schrift-ueberschrift);
  font-size: clamp(4rem, 2rem + 9vw, 8rem); line-height: 1;
  letter-spacing: var(--display-laufweite, -.03em);
  color: var(--farbe-kennzahl, var(--textSchwach));
  margin-bottom: var(--abstand-3);
}
.vierNullVier__satz { font-size: var(--schrift-gross); color: var(--textSchwach); }
.vierNullVier__wege { list-style: none; padding: 0; margin: var(--abstand-4) 0 0; display: grid; gap: var(--abstand-2); }
.vierNullVier__wege a { display: inline-block; }