/* Erzeugt von scripts/build-site.mjs aus 8 Modulen. Nicht direkt bearbeiten. */
/* src/shared/styles/tokens.css */
/* Der 419 by Dengel GmbH — Staging Stylesheet */

@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("/site/global/fonts/roboto-condensed/roboto-condensed-latin-200-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/site/global/fonts/roboto-condensed/roboto-condensed-latin-300-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/site/global/fonts/roboto-condensed/roboto-condensed-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/site/global/fonts/roboto-condensed/roboto-condensed-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/site/global/fonts/roboto-condensed/roboto-condensed-latin-700-normal.woff2") format("woff2");
}

/* Kein synthetischer Kursiv- oder Fettschnitt: es werden ausschliesslich die
   oben deklarierten echten Schnitte verwendet. */
:root {
  font-synthesis: none;
}

:root {
  /* Farbsystem */
  --color-base: #F2F0EB;
  --color-contrast: #1D1C19;
  --color-material: #AEB0AD;
  /* Akzentfarbe der gesamten Website. Es ist dasselbe Rotorange, in dem im
     Startseiten-Hero die 419-Ziffernform und „Origin Reflected" stehen. */
  --color-accent: #CD4D16;
  --color-text-on-dark: #F2F0EB;
  --color-text-primary-on-light: #24231F;
  --color-text-secondary-on-light: rgba(36, 35, 31, 0.72);
  --color-text-secondary-on-dark: rgba(242, 240, 235, 0.72);
  --hairline-on-light: rgba(36, 35, 31, 0.18);
  --hairline-on-dark: rgba(242, 240, 235, 0.22);

  /* Geometrie */
  --content-max: 1440px;
  --rail-max: 1240px;
  --side-padding: 20px;

  /* Gemeinsame linke Inhaltsachse. Der Wert geht auf eine 760px breite,
     mittige Textspalte plus 18px zurueck - urspruenglich der geschaetzte
     Wortanfang in der zentrierten ersten Startseitensektion. Diese Herkunft
     ist nur noch historisch: Die erste Sektion richtet sich inzwischen selbst
     nach dieser Achse, statt sie zu begruenden (siehe .hero-intro__inner in
     src/pages/home/page.css). Die Achse ist damit die einzige Quelle, und
     alle Spalten haengen an ihr.

     An ihr richten sich saemtliche linksbuendigen Texte, die sichtbaren
     Burgerbalken, der Footer und - gespiegelt - die rechte Aussenkante des
     Navbar-CTA aus. Letzteres gilt bis 1009px; darueber steht der CTA
     stattdessen um --nav-cta-reach weiter rechts, damit seine beiden
     Abstaende zum Logo gleich gross sind (siehe navigation.css). Bis 760px
     gilt die mobile Achse. */
  --content-axis: 24px;

  /* Wie weit die rechte Aussenkante des Navbar-CTA ueber die gespiegelte
     Inhaltsachse hinausragt. Der Wert stellt die beiden optischen Abstaende
     zum mittigen Logo gleich:

       linke Gruppe -> Logo   und   Logo -> CTA

     Er ist die sichtbare Breite des CTA (215,4px bei „Weiteren Einblick
     anfragen" in 13px Roboto Condensed) abzueglich der Reichweite der linken
     Gruppe ab der Inhaltsachse (96,7px: Burgericon 26px, Spaltenabstand und
     der Sprachumschalter „DE | EN"). 215,4 - 96,7 = 118,7.

     Zuvor stand hier 189px = 215,4 - 26: Damals endete die linke Gruppe mit
     dem Burgericon. Seit der Sprachumschalter rechts daneben steht, endet sie
     70,7px weiter rechts, und die linke Luecke war um genau diesen Betrag
     kleiner als die rechte (bei 1440px 243,3 statt 313,6).

     Beide Masse sind fensterunabhaengig - Burgericon, Spaltenabstand und
     beide Schriftzuege haben feste Groessen. Nachgemessen bei 1200px und
     1440px: identisch. Aendert sich Text oder Schriftgrad des CTA oder des
     Umschalters, ist der Wert hier nachzufuehren. */
  --nav-cta-reach: 118.7px;

  /* Sichtbarer Abstand zwischen der Unterkante der fixierten Navbar und dem
     ersten Text einer Unterseite. /ueber-uns/ und /kontakt/ rechnen beide
     damit, ihr Seitenanfang ist dadurch identisch. */
  --page-top-gap: 96px;

  /* Seitlicher Einzug der grossen Bildflaechen - Karussells, Mechanik,
     Besinnung und die Entwurfszeichnung auf /ueber-uns/. Viewportbezogen,
     damit er beim Aendern der Fensterbreite mitwaechst statt zu springen:
     14vw ergeben bei 1440px rund 200px. Unter 900px laufen dieselben Bilder
     bis an den Bildschirmrand, dort ist der Einzug null. */
  --media-inset: 0px;

  /* Groesse der quadratischen Logoflaeche in der Navbar. Steht hier, weil
     ausser der Navbar selbst auch das Burgermenue damit rechnet. */
  --logo-size: clamp(26px, calc(1.69vw + 19.66px), 44px);

  /* Oberkante der 419-Wortmarke im Startseiten-Hero, gemessen von der
     Fensteroberkante: 22svh fuer die Rail plus deren Verschiebung. Das
     Burgermenue leitet daraus seinen eigenen Abstand ab. */
  --hero-brand-top: calc(22svh + clamp(36px, 5vh, 60px));

  --grid-gap: 24px;
  --section-space: 44px;
  --radius: 0px;
  --image-radius: 8px;
  --hairline-width: 1px;

  /* Hoehe der fixierten Navbar; der Hero beginnt unmittelbar darunter. */
  --nav-h: 72px;

  --font-sans: "Roboto Condensed", Arial, sans-serif;
  --font-heading: "Roboto Condensed", Arial, sans-serif;
}

/* Ab 761px greift die berechnete Achse; darunter bleibt es bei 24px. */
@media (min-width: 761px) {
  :root {
    --content-axis: max(24px, calc((100vw - 760px) / 2 + 18px));
  }}

/* Ab 768px laeuft der Abstand mit der Fensterhoehe mit. Er ist so gross wie
   moeglich, aber nie so gross, dass die erste Sektion von /ueber-uns/ unten
   aus dem Fenster liefe: Deren Hoehe ist die Navbar (88px), dieser Abstand,
   das Portraet (594,7px bei jeder Fensterbreite ab 1150px, darunter
   weniger) und der untere Innenabstand von 48px. Bleibt fuer den Abstand
   also 100svh - 731px.

   Auf hohen Bildschirmen greift die Obergrenze und es bleiben die
   bisherigen 160px; erst darunter schrumpft der Wert, und zwar genau so
   weit wie noetig. Die Untergrenze von 48px verhindert, dass der Text bei
   sehr flachen Fenstern an der Navbar klebt - dort passt die Sektion dann
   nicht mehr vollstaendig, was ab etwa 780px Fensterhoehe eintritt.

   Der Wert gilt zugleich fuer /kontakt/: Beide Seiten beginnen weiterhin
   auf derselben Hoehe. */
@media (min-width: 768px) {
  :root {
    --side-padding: 40px;
    --section-space: 80px;
    --nav-h: 88px;
    --page-top-gap: clamp(48px, calc(100svh - 731px), 160px);
  }}

@media (min-width: 900px) {
  :root {
    --media-inset: 14vw;
  }}

@media (min-width: 1200px) {
  :root {
    --side-padding: 64px;
  }}

/* src/shared/styles/base.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  width: 100%;
}

body {
  margin: 0;
  background: var(--color-base);
  color: var(--color-text-primary-on-light);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  width: 100%;
}

/* Die Bilder liegen als AVIF mit WebP-Rueckfall in einem <picture> vor.
   display: contents nimmt den Wrapper aus dem Layout heraus: Das <img>
   bleibt damit in jeder Hinsicht Kind seines urspruenglichen Elternelements -
   als Raster- oder Flexelement, fuer absolute Positionierung und fuer jeden
   Selektor, der auf das Kind zielt. Ohne diese Zeile schoebe sich eine
   zusaetzliche Inline-Box dazwischen. */
picture {
  display: contents;
}

img {
  display: block;
  max-width: 100%;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

a {
  color: inherit;
}

/* Layout helpers */
.rail {
  max-width: var(--rail-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
}

.frame {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
}

@media (max-width: 899px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .grid > [class*="col-"] {
    grid-column: auto !important;
  }}

@media (min-width: 900px) {
  .col-start-6 { grid-column-start: 6; }
  .col-start-7 { grid-column-start: 7; }
  .col-start-8 { grid-column-start: 8; }
  .col-start-9 { grid-column-start: 9; }}

.col-max-8 {
  max-width: 820px;
}

.col-middle-8 {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.col-middle-10 {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.text-centered {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Sections */
.section {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

/* Dünne Trennlinien zwischen Sektionen. */
.section + .section {
  border-top: var(--hairline-width) solid var(--hairline-on-light);
}

.section.section--dark + .section {
  border-top-color: var(--hairline-on-dark);
}

.section--light {
  background: var(--color-base);
  color: var(--color-text-primary-on-light);
}

.section--dark {
  background: var(--color-contrast);
  color: var(--color-text-on-dark);
}

.section--dark p {
  color: var(--color-text-secondary-on-dark);
}

.section--flush {
  padding-top: 0;
  padding-bottom: 0;
}

/* Formularelemente erben die Schrift nicht von selbst. Ohne diese Regel
   fielen Buttons, Eingaben und Auswahlfelder auf die Systemschrift zurueck. */
button,
input,
select,
textarea {
  font-family: inherit;
}

/* Kursivschrift wird nirgends eingesetzt. Semantische Hervorhebungen bleiben
   semantisch, werden aber aufrecht gesetzt — auch synthetisch. */
em,
i,
address,
cite,
dfn,
var {
  font-style: normal;
}

/* Typography */
.label,
.section-label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1.2;
  color: var(--color-accent);
  margin: 0 0 24px 0;
}

.h1,
.h-page {
  font-family: var(--font-sans);
  font-weight: 100;
  font-size: clamp(3rem, 5.5vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  max-width: 780px;
  margin: 0 0 24px 0;
  overflow-wrap: break-word;
}

.h2 {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(2.1rem, 4vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: 700px;
  margin: 0 0 24px 0;
  overflow-wrap: break-word;
}

/* Absatzschrift: 16-18px, Zeilenhöhe 1.65, maximale Textbreite 38rem */
.lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.65;
  max-width: 38rem;
  margin: 0;
  color: var(--color-text-secondary-on-light);
}

.section--dark .lead {
  color: var(--color-text-secondary-on-dark);
}

.hero__content .lead {
  color: inherit;
}

/* Hero: Fahrzeugbilder bleiben frei. Nur eine ausgewiesene, seitlich begrenzte
   Bildzone trägt Label, H1 und einen Textlink. Unter 768px werden Bild und
   Text vollständig getrennt (Bild zuerst, Text danach auf ruhiger Fläche). */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__media--right {
  left: auto;
  right: 0;
  width: 100%;
}

/* Freie Bildzone: maximal 5 Rasterspalten / 520px, lokaler Verlauf endet vor dem Fahrzeug */
.hero__zone {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}

.hero__zone-scrim {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(42vw, 560px);
  background: linear-gradient(to right, rgba(242, 240, 235, 0.94) 0%, rgba(242, 240, 235, 0.82) 60%, rgba(242, 240, 235, 0) 100%);
}

.hero__zone-scrim--dark {
  background: linear-gradient(to right, rgba(29, 28, 25, 0.86) 0%, rgba(29, 28, 25, 0.6) 55%, rgba(29, 28, 25, 0) 100%);
}

.hero__content {
  position: relative;
  pointer-events: auto;
  max-width: min(520px, 37vw);
  padding: 0 var(--side-padding) 88px;
}

.text-link--light {
  border-bottom-color: var(--hairline-on-dark);
}

.hero--commission {
  min-height: 88svh;
}

/* Hero-Varianten ohne freie Bildzone: nur Wortmarke, Nav oder ein kleines Eck-Label.
   Das Fahrzeugbild bleibt vollständig frei von Text/Verlauf/Farbfilm. */
.hero--origin-full {
  min-height: 90svh;
  display: block;
}

@media (max-width: 767px) {
  .hero--origin-full {
    min-height: 82svh;
  }}

/* Fixierte Hero-Hintergrundebene. Die Startseite nutzt sie nicht mehr; ihr
   Hero liegt im normalen Dokumentfluss. */
.hero--419 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100svh;
  min-height: auto;
  z-index: 1;
}

.hero--419 {
  height: 92svh;
}

.hero__image--graded {
  filter: contrast(1.15) brightness(0.96);
}

/* Bewegt ausschliesslich transform: translateY() und ausschliesslich um
   ganzzahlige Pixelwerte - keine Prozentwerte, kein zweiter Transform, keine
   Aenderung von Position, Groesse oder Deckkraft. */
@keyframes scroll-hint-bounce {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(6px); }}

/* Text-Hero der Unterseiten: kein Herobild, zentrierter Text, viel
   Freiraum, dünne, vollständig großgeschriebene Roboto-Condensed-
   Überschrift. */
.subpage-hero {
  min-height: 56svh;
  padding-top: 120px;
  padding-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .subpage-hero {
    padding-top: 168px;
  }}

.subpage-hero__inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.subpage-hero__title {
  margin: 0 0 16px 0;
}

.subpage-hero__subtitle {
  margin: 0;
  color: var(--color-text-secondary-on-light);
}

.subpage-hero__claim {
  margin: 24px 0 0 0;
}

/* Ruhiger, typografischer Faktenblock: feine horizontale Linien, kein
   Karten-/Icon-/Box-Stil. */
.facts-table {
  width: 100%;
  max-width: 560px;
  margin-top: 24px;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 15px;
}

.facts-table tr {
  border-bottom: var(--hairline-width) solid var(--hairline-on-light);
}

.facts-table tr:first-child {
  border-top: var(--hairline-width) solid var(--hairline-on-light);
}

.facts-table th,
.facts-table td {
  padding: 14px 0;
  text-align: left;
  font-weight: 400;
}

.facts-table th {
  width: 45%;
  color: var(--color-text-secondary-on-light);
  padding-right: 24px;
}

.facts-table td {
  color: var(--color-text-primary-on-light);
}

.facts-table__note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--color-text-secondary-on-light);
}

.hero__corner-label {
  position: absolute;
  z-index: 1;
  left: var(--side-padding);
  bottom: 32px;
  margin: 0;
  color: var(--color-text-on-dark);
}

/* Text links: nur der Textteil erhält eine Unterstreichung, die von links
   nach rechts einblendet (statt eines statischen Rahmens); der Pfeil bleibt
   ohne Unterstreichung und verschiebt sich nach Abschluss leicht nach rechts
   und bleibt dort — identisch bei Hover und Tastaturfokus. */
/* Inhalts-CTAs tragen seitenweit dieselbe Auszeichnung. Bewusst ueber
   .text-link geschachtelt: der Navbar-Link nutzt zwar dieselben Kindklassen,
   traegt aber .nav-link statt .text-link und bleibt dadurch unberuehrt. */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: 1;
  text-decoration: none;
  color: currentColor;
  font-size: 15px;
  transition: color 180ms ease;
}

.text-link .text-link__label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.text-link .text-link__arrow {
  display: block;
  align-self: center;
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--color-accent);
}

.text-link__label {
  position: relative;
  padding-bottom: 4px;
}

.text-link__label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.text-link:hover .text-link__label::after,
.text-link:focus-visible .text-link__label::after {
  transform: scaleX(1);
}

/* Pfeil-Icons bei Inhaltslinks/CTAs: der Pfeil bleibt bei Hover und Fokus
   unbewegt — Pfeile werden nie animiert. Die Unterstreichung bleibt auf den
   Text (.text-link__label) beschränkt. */
.text-link__arrow {
  display: inline-block;
  width: 14px;
  height: 9px;
  vertical-align: middle;
  transition: none;
  transform: none;
}

.text-link:hover .text-link__arrow,
.text-link:focus-visible .text-link__arrow {
  transform: none;
}

.text-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* Einordnung / Einstiegstext: zentriert, ruhige Fläche */
.intro-section {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.intro-section__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.intro-section__inner .h1 {
  max-width: 100%;
}

.intro-section__inner .lead {
  max-width: 100%;
  margin-bottom: 24px;
}

.intro-section--tall {
  min-height: 72svh;
}

.intro-section .text-link:last-child,
.intro-section .lead:last-child {
  margin-bottom: 0;
}

/* Statement-Fläche (z. B. Dengel-Seite) */
.statement-section {
  min-height: 65svh;
  display: flex;
  align-items: center;
}

/* Übergang in dunkle Abschnitte (z. B. "Nähe zum Fahrer" auf /419/): der
   frühere, innen liegende Verlauf überlagerte den Sektionsinhalt mit einer
   hellen Fläche und erzeugte dadurch selbst eine harte Kante/einen
   Kontrastbruch. Entfernt zugunsten eines klaren Farbwechsels ohne
   sichtbare Trennlinie. */
.statement-section--soft-top {
  position: relative;
}


/* Startseite „Innenraum“-Textinsel: Desktop im zweiten Viertel positioniert */
.interior-statement {
  max-width: 560px;
}

@media (min-width: 900px) {
  .interior-statement {
    margin-left: 25%;
  }}

/* Asymmetrisches Bildpaar: großes Bild 64%, kleines Bild 27%, Rest offen */
.asym-pair {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 64px;
}

.asym-pair__large {
  width: 64%;
}

.asym-pair__small {
  width: 27%;
  margin-left: auto;
  margin-top: 22vh;
}

@media (max-width: 767px) {
  .asym-pair {
    flex-direction: column;
    gap: 24px;
    margin-top: 40px;
  }
  .asym-pair__large,
  .asym-pair__small {
    width: 76vw;
  }
  .asym-pair__large {
    width: 100%;
  }
  .asym-pair__small {
    margin-left: auto;
    margin-top: 0;
  }}

/* Gespiegelte Variante: großes Bild rechts, kleines Bild links und tiefer */
.asym-pair--mirrored {
  flex-direction: row-reverse;
}

.asym-pair--mirrored .asym-pair__small {
  margin-left: 0;
  margin-right: auto;
}

@media (max-width: 767px) {
  .asym-pair--mirrored {
    flex-direction: column;
  }
  .asym-pair--mirrored .asym-pair__small {
    margin-left: auto;
    margin-right: 0;
  }}

/* Startseite „Proportion“: großes Bild links mit Text darunter, kleines Bild rechts versetzt */
.proportion-pair {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 64px;
}

.proportion-pair__large {
  width: 64%;
}

.proportion-pair__text {
  max-width: 430px;
  margin-top: 24px;
}

.proportion-pair__small {
  width: 27%;
  margin-left: auto;
  margin-top: 22vh;
}

@media (max-width: 767px) {
  .proportion-pair {
    flex-direction: column;
    gap: 24px;
    margin-top: 40px;
  }
  .proportion-pair__large {
    width: 100%;
  }
  .proportion-pair__small {
    width: 76vw;
    margin-left: auto;
    margin-top: 0;
  }}

/* Redaktionelle Bildfolge: großzügiger, aber kontrollierter Rhythmus */
.editorial-sequence > * + * {
  margin-top: 64px;
}

@media (min-width: 768px) {
  .editorial-sequence > * + * {
    margin-top: 96px;
  }}

.editorial-sequence .free-text {
  max-width: 430px;
}

.free-text--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.editorial-sequence__72 {
  max-width: none;
}

.editorial-sequence__72 picture,
.editorial-sequence__72 img {
  margin: 0 auto;
}

@media (min-width: 900px) {
  .editorial-sequence__72 picture,
  .editorial-sequence__72 img {
    width: 72%;
  }}

/* Automatisches Bilderkarussell: kontinuierlicher Bildstrom von rechts nach
   links, nahtloser Endloslauf durch verdoppelte Bildfolge. Reine Hover-
   Interaktion, kein Klick-/Ziehverhalten, Cursor bleibt default. */
.carousel-section {
  overflow: hidden;
}

.carousel-section__label {
  margin-bottom: 32px;
}

.carousel-section__link {
  margin-top: 32px;
}



.interior__pair,
.interior__final {
  margin-top: 24px;
}

.interior__final-b {
  margin-top: 0;
}

@media (min-width: 900px) {
  .interior__final-b {
    margin-top: 100px;
  }}

/* Ratio boxes */
/* height:auto ist zwingend: sonst übersteuert das HTML-height-Attribut
   (Quellpixelhöhe) die aspect-ratio, und das Bild rendert in voller
   Pixelhöhe statt im vorgesehenen Seitenverhältnis. */
.ratio-4-5 {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--image-radius);
}

.ratio-16-9 {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--image-radius);
}

/* Home: Porträt-Split (Bild dominant, Text schmal, übrige Fläche frei) */
.author__grid {
  align-items: center;
}

/* Bildschirmbreites, freies Bild ohne Text oder Verlauf */
.image-only {
  display: block;
}

.image-only picture {
  display: block;
}

/* Commission process list */
.process-list {
  list-style: none;
  margin: 64px 0 0 0;
  padding: 0;
}

.process-list__step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding-top: 32px;
  margin-top: 72px;
  border-top: var(--hairline-width) solid var(--hairline-on-light);
}

.process-list__step:first-child {
  margin-top: 0;
}

@media (min-width: 900px) {
  .process-list__step {
    grid-template-columns: 2fr 7fr;
    margin-top: 120px;
  }}

.frame--72 {
  max-width: none;
}

@media (min-width: 900px) {
  .frame--72 picture,
  .frame--72 img {
    width: 72%;
    margin: 0 auto;
  }}

.process-list__number {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.75rem;
  color: var(--color-material);
}

.frame--rail {
  margin-top: 64px;
  margin-bottom: 64px;
}

/* Contact form */
.contact-hero {
  padding-top: 176px;
  padding-bottom: 0;
}

/* Legal / 404 */
.legal-section {
  padding-top: 176px;
  padding-bottom: 40px;
}

.legal-section--tight {
  padding-top: 24px;
}

.not-found-section {
  min-height: 100svh;
  display: flex;
  align-items: center;
}

/* Der Text beginnt auf der gemeinsamen Inhaltsachse - derselben Kante, auf
   der die sichtbaren Burgerbalken stehen und auf der die Texte der uebrigen
   Seiten beginnen. Zuvor lag er in einer mittig zentrierten 820px-Spalte und
   begann dadurch links davon; gemessen bei 1440px 330 statt 358.

   Die Zeilenlaenge bleibt auch ohne die Spalte begrenzt: .h-page traegt
   780px, .lead 38rem. */
.page-not-found .not-found-section > .rail {
  max-width: none;
  margin-inline: 0;
  padding-left: var(--content-axis);
  padding-right: var(--content-axis);
}

.page-not-found .not-found__content {
  max-width: none;
  margin-inline: 0;
}

/* Sehr dezente 1-px-Trennlinie an ausgewählten Übergängen — bewusst nicht
   an jeder Sektion, nur dort, wo eine klare inhaltliche Zäsur sinnvoll ist. */
.section--hairline-top {
  border-top: var(--hairline-width) solid var(--hairline-on-light);
}

@media (prefers-reduced-motion: reduce) {
  .text-link__arrow {
    transition: none !important;
  }
  .hero__scroll-hint svg {
    animation: none !important;
  }}

/* Focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* ---------------------------------------------------------------------
   Startseite: Inhaltsbereich (HTML-Entwurf, verbindlich)
   ------------------------------------------------------------------ */

.hero-intro__inner {
  text-align: center;
  max-width: 42rem;
}

.hero-intro__inner .lead {
  margin: 0;
}

.hero-intro__inner .lead + .lead {
  margin-top: 6px;
}

.hero-intro__ctas {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

@media (min-width: 640px) {
  .hero-intro__ctas {
    flex-direction: row;
    justify-content: center;
  }}

.text-link--strong {
  font-weight: 500;
}

.vehicle-character__inner {
  display: grid;
  gap: 40px;
  align-items: center;
  text-align: left;
}

.vehicle-character__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vehicle-character__image img {
  width: 100%;
  height: auto;
  border-radius: var(--image-radius);
}

@media (min-width: 900px) {
  .vehicle-character__inner {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }}

.limited-series__inner {
  display: grid;
  gap: 40px;
  align-items: center;
  text-align: left;
}

.limited-series__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.limited-series__image img {
  width: 100%;
  height: auto;
  border-radius: var(--image-radius);
}

@media (min-width: 900px) {
  .limited-series__inner {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
  .limited-series__text {
    order: 2;
  }
  .limited-series__image {
    order: 1;
  }}

/* Kompakte Ausgabe (Punkt 9): keine Bildspalte, kürzere Textbreite. */
.limited-series--compact .limited-series__inner {
  display: block;
}
.limited-series--compact .limited-series__text {
  max-width: 38rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Umbrüche nur ab Desktop; mobil greifen die natürlichen Umbrüche. */
@media (max-width: 899px) {
  .br-desktop {
    display: none;
  }}

/* ==========================================================================
   Rechtliche Seiten — auf .page-legal begrenzt. Linksbuendig, einspaltig,
   ohne Bilder, Animationen, Karten oder CTA.
   ========================================================================== */
.page-legal {
  background: var(--color-base);
}

/* Die rechtlichen Seiten standen in der zentrierten Rail und begannen
   dadurch auf einer anderen Kante als die uebrigen Seiten. Sie stehen jetzt
   auf der gemeinsamen Inhaltsachse - derselben, auf der die linksbuendigen
   Texte der Startseite, "Ueber uns", "Kontakt" und der Footer beginnen. */
.page-legal .rail {
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--content-axis);
}

/* Die Navbar ist fixiert (72px mobil, 88px ab 768px). Der Innenabstand
   enthaelt deshalb ihre Hoehe, damit der sichtbare Abstand unter der Navbar
   112px mobil bzw. 160px im Desktop betraegt. */
.page-legal .legal-page {
  padding-top: 184px;
  padding-bottom: 80px;
}

/* Der erste Inhalt nach der H1 bringt keinen eigenen oberen Abstand mit,
   damit ausschliesslich der H1-Abstand gilt. */
.page-legal .legal-page .legal-page__title + * {
  margin-top: 0;
}

/* Der letzte Block traegt keinen unteren Abstand, damit ausschliesslich das
   padding-bottom vor dem Footer wirkt. */
.page-legal .legal-page > *:last-child {
  margin-bottom: 0;
}

.page-legal .legal-page > *:last-child p:last-child {
  margin-bottom: 0;
}

.page-legal .legal-page > * {
  max-width: 760px;
  margin-inline: 0;
  text-align: left;
}

.page-legal .legal-page__title {
  margin: 0 0 36px;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-primary-on-light);
}

/* Hinweis auf den Vorrang der deutschen Fassung. Er steht nur auf den
   englischen Rechtsseiten, unmittelbar unter dem Titel und deutlich vor dem
   ersten Abschnitt. Die Auszeichnung ist bewusst ruhiger als der Fliesstext:
   kleiner, zurueckgenommen in der Farbe und durch eine feine Linie vom
   Rechtstext getrennt, damit er nicht als dessen erster Absatz gelesen wird. */
.page-legal .legal-page__translation-note {
  margin: 0 0 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(36, 35, 31, 0.16);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: rgba(36, 35, 31, 0.62);
}

.page-legal .legal-page__translation-note a {
  color: var(--color-accent);
}

/* Der Seitentitel ist ein h2 und traegt die gemeinsame H2-Stufe; die
   Abschnittsueberschriften sind h3 und tragen die gemeinsame H3-Stufe.
   Seitenspezifisch bleibt hier nur der Abstand nach oben, der die Abschnitte
   eines langen Rechtstextes voneinander trennt. */
.page-legal .legal-page h3 {
  margin: 56px 0 16px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #706f68;
}

/* Unterabschnitte innerhalb eines Abschnitts, etwa 4.1 bis 4.4 der
   Barrierefreiheitserklaerung. Sie stehen eine Stufe unter dem h3 und
   erzeugen dadurch keinen weiteren Sprung in der Ueberschriftenfolge. Die
   Auszeichnung ist bewusst ruhiger als die Sektionsbezeichnung: gemischt
   geschrieben, ohne Sperrung, in der Textfarbe. */
.page-legal .legal-page h4 {
  margin: 32px 0 12px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-text-primary-on-light);
}

@media (min-width: 768px) {
  .page-legal .legal-page h4 {
    font-size: 18px;
  }}

.page-legal .legal-page p,
.page-legal .legal-page address {
  margin: 0 0 16px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 19px;
  line-height: 29px;
  color: rgba(36, 35, 31, 0.82);
}

/* Anschriften werden nicht kursiv dargestellt. */
.page-legal .legal-page address {
  font-style: normal;
}

.page-legal .legal-page a {
  color: var(--color-accent);
}

/* Die E-Mail-Adresse im Impressum steht im Quelltext rueckwaerts; erst diese
   Regel dreht sie fuer die Darstellung wieder um. Einfache Textsammler, die
   nur den sichtbaren Text auslesen, greifen dadurch ins Leere.
   Ohne CSS - etwa im Reader-Modus - bleibt die umgekehrte Zeichenfolge
   stehen; lesbar bleibt die Adresse dann ueber das aria-label und das
   mailto: im href. Beim Kopieren wird ebenfalls die umgekehrte Folge
   uebernommen, deshalb ist der Link zwingend anklickbar. */
.page-legal .legal-page__mail {
  unicode-bidi: bidi-override;
  direction: rtl;
  /* Der Doppelpunkt davor gehoert zur Zeile, nicht zur Adresse: ohne
     isolierten Textfluss zoege ihn die rtl-Richtung mit an die falsche
     Stelle. */
  display: inline-block;
}

@media (min-width: 768px) {
  .page-legal .legal-page {
    padding-top: 248px;
    padding-bottom: 120px;
  }

  .page-legal .legal-page__title {
    margin-bottom: 48px;
  }}

/* ==========================================================================
   Statische redaktionelle Bildfolgen (ersetzen die Karussells).
   ========================================================================== */

.media-tile {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  border-radius: 3px;
  overflow: hidden;
  cursor: zoom-in;
}

.media-tile img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 3px;
  transition: transform 400ms ease;
  user-select: none;
}

.media-tile:hover img {
  transform: scale(1.015);
}

.media-tile:focus-visible {
  outline: 2px solid #111;
  outline-offset: 4px;
}

.media-note {
  margin: 12px 0 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-secondary-on-light);
}

/* Bilder einheitlich mit 3px Radius */
.page img,
.page .media-tile img {
  border-radius: 3px;
}

/* CTA-Pfeile: mittig, ohne Hoverbewegung. Der Abstand steht oben bei
   .text-link auf 12px und gilt seitenweit. */

.text-link__arrow {
  align-self: center;
  transform: none;
  transition: none;
}

/* ==========================================================================
   Sektionstypografie (Phase 2)
   h3 = kleine Sektionsbezeichnung, h2 = Hauptueberschrift der Sektion.
   Das h3 steht im DOM und visuell vor dem zugehoerigen h2. Beide Ebenen
   nutzen den echten Schnitt Roboto Condensed 700, niemals kursiv.
   Werte: mobil < 768px, Desktop ab 1024px.
   ========================================================================== */
/* Alle drei Stufen gelten seitenweit und sind nicht mehr nach Breakpoint
   gestaffelt. Unterseiten definieren dazu nur noch Layout: Position,
   Textbreite und Ausrichtung. */
.section-label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.24em;
  line-height: 1.65;
  text-transform: uppercase;
  color: #706f68;
  margin: 0 0 16px;
}

.section-title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-primary-on-light);
  margin: 0 0 22px;
  overflow-wrap: break-word;
}

/* Fliesstext der linksbuendigen Sektionen. */
.page .lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-style: normal;
  font-size: 19px;
  line-height: 29px;
  color: rgba(36, 35, 31, 0.82);
}

/* Bilder lassen sich nicht per Drag aus der Seite ziehen. Ergaenzt den
   bildspezifischen dragstart-Handler; keine seitenweite Sperre und kein
   pointer-events: none, damit Karussell und Lightbox bedienbar bleiben. */
img {
  -webkit-user-drag: none;
}

/* src/shared/styles/navigation.css */
/* Skip link */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--color-contrast);
  color: var(--color-text-on-dark);
  padding: 12px 20px;
  z-index: 200;
  transition: top 150ms ease;
}
.skip-link:focus {
  top: 12px;
}

/* Navigation */
/* Am Seitenanfang ist die Navbar vollstaendig transparent: kein Hintergrund,
   kein Blur, kein Schatten, keine Linie — sichtbar sind nur Logo, Menue und
   Texte. Sobald gescrollt wird, kommen Hintergrundfarbe und Glaseffekt
   zurueck; beim Zurueckkehren an den Seitenanfang blendet beides in 450ms
   wieder aus. */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-bottom: 0;
  transition: background-color 450ms ease, backdrop-filter 450ms ease,
    -webkit-backdrop-filter 450ms ease;
}

.site-nav.is-scrolled {
  background: rgba(242, 240, 235, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (prefers-reduced-motion: reduce) {
  .site-nav {
    transition: none;
  }}

/* Desktop: Burger + DE|EN links beieinander, Logo mittig (absolut, siehe
   unten), CTA rechts. Mobil: DE|EN links, Logo mittig, Burger rechts,
   CTA ausgeblendet — per Grid-Areas ohne DOM-Umsortierung. */
/* Die Leiste spannt ueber die volle Fensterbreite und wird ueber die
   gemeinsame Inhaltsachse eingerueckt. Dadurch liegt die rechte Aussenkante
   des CTA spiegelbildlich bei 100vw - var(--content-axis), und das absolut
   mittig gesetzte Logo bezieht sich auf die Fenstermitte. */
.site-nav__inner {
  position: relative;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0 var(--content-axis);
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas: "burger lang . cta";
  align-items: center;
  column-gap: 20px;
}

/* Unter 768px steht der Burger rechts aussen und behaelt dort seine
   Randposition; der Sprachumschalter tritt links neben ihn. Die Reihenfolge
   dreht sich damit gegenueber dem Desktop um, wo der Burger die Leiste
   beginnt und der Umschalter rechts von ihm folgt. In beiden Faellen stehen
   die zwei Elemente unmittelbar nebeneinander, und in beiden Faellen sitzt
   das aeussere von ihnen auf der Inhaltsachse. Der CTA entfaellt hier. */
@media (max-width: 767px) {
  .site-nav__inner {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: ". lang burger";
  }}

.site-nav__menu-button {
  grid-area: burger;
}

/* Der seitliche Ausgleich der Burgerschaltflaeche steht weiter unten,
   unmittelbar bei ihrer Grundregel. Er muss dort stehen und nicht hier:
   Die Grundregel folgt im Stylesheet spaeter und gewaenne bei gleicher
   Spezifitaet gegen jede Media Query, die vor ihr steht. */

.site-nav__commission-link {
  grid-area: cta;
}

/* Der Abstand Logo -> CTA soll dem Abstand der linken Gruppe zum Logo
   entsprechen. Die linke Gruppe ist Burgericon und Sprachumschalter
   zusammen: Sie stehen unmittelbar nebeneinander und wirken als ein Block,
   dessen rechte Kante die Luecke zum Logo bildet.

   Beide Abstaende sind gleich, wenn die rechte Aussenkante des CTA um
   --nav-cta-reach weiter rechts steht als die gespiegelte Inhaltsachse: Die
   Gruppe beginnt auf der Achse und reicht 96,7px weit, der CTA ist
   96,7px + reach breit. Die Herleitung des Wertes steht bei ihm in
   tokens.css.

   Der Abstand zum rechten Fensterrand ist deshalb var(--content-axis) minus
   diesem Ueberhang - jedoch nie kleiner als 24px, sonst liefe der CTA aus
   dem Fenster. max() macht daraus eine durchgehende Funktion der
   Fensterbreite: Bis die Achse 142,7px erreicht (Fenster 1009px) greift der
   Mindestabstand, darueber die Abstandsgleichheit, und an der Nahtstelle
   ergeben beide Zweige exakt 24px. Es gibt damit keinen Sprung, der
   CTA wandert stufenlos mit - wie die Gruppe auf der Gegenseite.

   Der Selektor nennt beide Klassen, weil die weiter unten stehende Regel
   .nav-link ebenfalls position setzt und bei gleicher Spezifitaet gewaenne. */
.nav-link.site-nav__commission-link {
  /* grid-area muss zurueckgesetzt werden: Ein absolut positioniertes Kind
     eines Grid-Containers mit fester Grid-Position bezieht sich auf seinen
     Grid-Bereich, und der ist ohne Inhalt null Pixel breit. Ohne Grid-
     Position gilt stattdessen die Polsterkante des Containers. */
  grid-area: auto;
  position: absolute;
  top: 50%;
  right: max(24px, calc(var(--content-axis) - var(--nav-cta-reach)));
  transform: translateY(-50%);
  white-space: nowrap;
}

.nav-link.site-nav__commission-link {
  display: none;
}

/* Der CTA erscheint ab 768px - derselben Breite, ab der der Burger nach
   links wandert und das Logo mittig steht. Die Leiste ist dadurch nicht
   mehr einseitig besetzt. */
@media (min-width: 768px) {
  .nav-link.site-nav__commission-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }}

/* Der Navbar-CTA nutzt dasselbe Pfeil-SVG wie die Inhaltslinks. Der Pfeil
   sitzt statisch im Flow des Links (gap: 12px), ohne eigene Positionierung
   oder Verschiebung. */
.site-nav__commission-link .text-link__arrow {
  width: 16px;
  height: auto;
  display: block;
  position: static;
  margin: 0;
  align-self: center;
  transform: translateY(-1px);
}

/* Das Logo sitzt unabhängig von den seitlichen Elementen exakt mittig im
   Fenster. Es schrumpft stufenlos mit der Fensterbreite: von 44px bei 1440px
   auf 26px bei 375px. Die Formel ist die Gerade durch diese beiden Punkte,
   clamp() begrenzt sie nach beiden Seiten. Die Rundmarke ist quadratisch und
   wird von der Breite begrenzt, ihr sichtbarer Durchmesser entspricht also
   genau diesem Wert.

   Die 26px entsprechen der Breite des Burgericons, sodass beide Zeichen
   mobil gleich gross wirken. Sie sind damit 5px hoeher als dessen Balken
   (21px): Der Kreis steht oben und unten je 2,5px darueber hinaus - das ist
   die bewusst gewaehlte Abweichung, weil gleiche Groesse und buendige Kanten
   bei einem Kreis neben einem breiteren Balkenzeichen nicht zugleich
   moeglich sind.

   Die Flaeche ist quadratisch. Frueher trug sie das Seitenverhaeltnis des
   Wappens; die quadratische Rundmarke fuellte darin nur die Breite und das
   Wappen sprang beim Hover auf eine groessere Hoehe. Im Quadrat belegen
   beide dieselbe Flaeche: Die Rundmarke fuellt es aus, das hochformatige
   Wappen wird darin auf dieselbe Hoehe eingepasst und bleibt mittig. */
.site-nav__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  width: var(--logo-size);
  aspect-ratio: 1;
  /* Mobile Browser legen beim Antippen von sich aus ein halbtransparentes
     dunkles Rechteck ueber die Box des Links. Die Box ist hier quadratisch,
     die Marke darin rund - das Rechteck stand dadurch sichtbar um sie herum.
     Die Rueckmeldung uebernimmt stattdessen das Eingehen der Marke weiter
     unten. Bewusst ausserhalb der (hover: none)-Abfrage: Ein Geraet mit Maus
     und Beruehrung meldet hover: hover und faerbt trotzdem. */
  -webkit-tap-highlight-color: transparent;
}

/* Unter 768px steht der Burger rechts. Das Logo wandert deshalb an die linke
   Inhaltsachse - dieselbe Kante, auf der auch die Texte beginnen; die beiden
   Elemente rahmen die Leiste dann spiegelbildlich ein, statt sich mittig zu
   ueberlagern. */
@media (max-width: 767px) {
  .site-nav__logo {
    left: var(--content-axis);
    transform: translateY(-50%);
  }}

/* Beide Marken werden in die quadratische Flaeche eingepasst und mittig
   ausgerichtet: Die Rundmarke fuellt sie aus, das hochformatige Wappen wird
   auf dieselbe Hoehe begrenzt und bleibt schmaler. Mitte der Marke, Mitte
   der Flaeche und Mitte des Burgericons fallen dadurch bei jeder
   Fenstergroesse zusammen. object-position: top stand hier frueher und
   schob die Rundmarke nach oben aus der Mitte. */
.site-nav__logo-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Das Wappen ist hochformatig (486 x 661) und sein oberer Teil ist exakt ein
   Kreis: Vermessen ueber die Deckkraft der Datei liegt die groesste Breite
   von 486 Pixeln bei y = 243, also bei der halben Breite, und die Umrisse
   darueber folgen auf jeder Hoehe einem Kreis dieses Durchmessers. Das
   Wappen ist damit nichts anderes als die Rundmarke mit einer angesetzten
   Spitze.

   Daraus folgt die Ausrichtung: Beide Marken tragen die volle Flaechenbreite,
   ihre Kreise sind dadurch gleich gross. Der Kreis des Wappens liegt eine
   halbe Breite unter dessen Oberkante, der Kreis der Rundmarke eine halbe
   Breite unter der Oberkante der quadratischen Flaeche. Beide decken sich
   also genau dann, wenn die Oberkanten aufeinanderliegen - top: 0, ohne
   Verschiebung.

   Beim Ueberfahren bleibt die Rundmarke deshalb sichtbar an Ort und Stelle,
   und es kommt allein die Spitze hinzu: Sie ragt um 0,36 Flaechenbreiten
   nach unten heraus, bei 44px Logo also um 15,8px. Eine mittige Ausrichtung
   stand hier zuvor und hob den Kreis um 0,18 Breiten an - das Logo sprang
   beim Hover sichtbar nach oben. */
.site-nav__logo-image--crest {
  inset: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 486 / 661;
  opacity: 0;
  transition: opacity 1000ms ease-out;
}

/* Beim Ueberfahren tritt die Rundmarke ab und allein das Wappen bleibt
   stehen. Zuvor blieb sie darunter liegen und beide Marken lagen
   uebereinander; sichtbar war das an den Raendern, wo sich die zwei
   Kreiskanten ueberlagerten. Da das Wappen den Kreis der Rundmarke exakt
   deckt (siehe Herleitung oben), aendert die Ueberblendung nichts an der
   Lage - es kommt weiterhin nur die Spitze hinzu. */
.site-nav__logo-image--round {
  opacity: 1;
  transition: opacity 1000ms ease-out, transform 120ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__logo-image--crest,
  .site-nav__logo-image--round {
    transition: none;
  }}

/* Der Wappenwechsel haengt an (hover: hover) und damit an Geraeten, die
   ueberhaupt einen Zeiger haben. Auf Touchgeraeten bildet der Browser beim
   Tippen einen Hover nach: Das Wappen blitzte dort beim Antippen des Logos
   kurz auf und wirkte wie ein Fehler, weil ihm die Bewegung fehlt, aus der
   der Wechsel auf dem Desktop seinen Sinn bezieht.
   Der Tastaturfokus bleibt davon unberuehrt - er ist keine Zeigerbedienung
   und zeigt das Wappen weiterhin. */
@media (hover: hover) {
  .site-nav__logo:hover .site-nav__logo-image--crest {
    opacity: 1;
  }

  .site-nav__logo:hover .site-nav__logo-image--round {
    opacity: 0;
  }
}

.site-nav__logo:focus-visible .site-nav__logo-image--crest {
  opacity: 1;
}

.site-nav__logo:focus-visible .site-nav__logo-image--round {
  opacity: 0;
}

/* Statt des Wappens bekommt das Logo auf Touchgeraeten eine kurze
   Tastenrueckmeldung: Die Marke geht beim Beruehren fuer den Moment des
   Drucks leicht ein und federt beim Loslassen zurueck. Das beantwortet die
   Beruehrung, ohne etwas einzublenden. */
@media (hover: none) {
  .site-nav__logo:active .site-nav__logo-image--round {
    transform: scale(0.92);
  }
}

/* Logo bleibt bei geöffnetem Menü unverändert sichtbar — es gibt kein
   separates X-Icon mehr; das Hamburger-Icon selbst togglet den Zustand. */

/* Nav-Links (Sprachumschalter, "Privaten Einblick anfragen"): nur der Text
   erhält eine Unterstreichung, die von links nach rechts einblendet — bei
   Hover, Tastaturfokus und dauerhaft beim aktiven Element (aria-current).
   Kein Pfeil, keine Opacity-Blende. Nutzt dieselbe .text-link__label-
   Mechanik wie die Pfeil-Links (siehe dort), ohne die --arrow-Verschiebung. */
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-primary-on-light);
}

.nav-link--arrow {
  display: inline-flex;
  align-items: center;
}

.nav-link--arrow::after {
  content: " →";
  display: inline;
  margin-left: 8px;
}

.nav-link:hover .text-link__label::after,
.nav-link:focus-visible .text-link__label::after,
.nav-link[aria-current="page"] .text-link__label::after {
  transform: scaleX(1);
}

/* Die sichtbaren Balken sollen buendig auf der Inhaltsachse stehen. Das Icon
   misst 26px und sitzt mittig in der 44px breiten Schaltflaeche, liegt also
   9px hinter deren Kante. Ein negativer Rand gleicht genau diese 9px aus;
   die Schaltflaeche behaelt ihre volle Trefferflaeche und ragt darueber
   hinaus. Die Seite des Ausgleichs richtet sich danach, wo der Burger steht:
   mobil rechts aussen, ab 768px links (siehe die jeweiligen Media Queries). */
.site-nav__menu-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-right: -9px;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  cursor: pointer;
  color: var(--color-text-primary-on-light);
}

/* Ab 768px beginnt der Burger die Leiste: Der Ausgleich wandert auf die
   linke Seite, damit die Balken auf der Inhaltsachse beginnen, und faellt
   rechts weg - dort folgt der Sprachumschalter, der sonst um 9px zu nah
   heranrueckte. Die Regel steht bewusst nach der Grundregel: davor stehend
   wuerde sie von deren margin-right ueberschrieben. */
@media (min-width: 768px) {
  .site-nav__menu-button {
    margin-left: -9px;
    margin-right: 0;
  }
}

/* Der Burgermenü-Button trägt global keinerlei Unterstreichung: weder
   text-decoration noch border-bottom noch ein ::after — auch nicht bei
   Hover, Fokus, aktivem Zustand oder auf Unterseiten. */
.site-nav__menu-button,
.site-nav__menu-button:hover,
.site-nav__menu-button:focus,
.site-nav__menu-button:focus-visible,
.site-nav__menu-button:active,
.site-nav__menu-button[aria-expanded="true"] {
  outline: none;
  text-decoration: none;
  border-bottom: none;
  box-shadow: none;
}

.site-nav__menu-button::after,
.site-nav__menu-button:hover::after,
.site-nav__menu-button:focus::after,
.site-nav__menu-button:focus-visible::after,
.site-nav__menu-button:active::after,
.site-nav__menu-button[aria-expanded="true"]::after {
  content: none;
}

/* ==========================================================================
   Sprachumschalter DE | EN. Er steht auf jeder Fensterbreite unmittelbar
   rechts neben dem Burgerbutton und traegt dieselbe Auszeichnung wie der
   Navbar-CTA - beide nutzen dafuer .nav-link, hier ohne dessen
   Unterstreichungsmechanik, die ein .text-link__label voraussetzt.

   Der negative linke Rand von 9px hebt die innere Polsterung der
   Burgerschaltflaeche auf: Zwischen den sichtbaren Balken und dem "D" liegen
   dadurch genau die 20px des Spaltenabstands und nicht 29px.
   ========================================================================== */
.site-nav__lang {
  grid-area: lang;
  display: inline-flex;
  align-items: center;
  margin-left: -9px;
  white-space: nowrap;
}

/* Unter 768px steht der Umschalter links vom Burger. Der Ausgleich wechselt
   deshalb die Seite: Er hebt jetzt die linke Polsterung der Schaltflaeche
   auf, nicht die rechte. */
@media (max-width: 767px) {
  .site-nav__lang {
    margin-left: 0;
    margin-right: -9px;
  }}

.nav-link.site-nav__lang-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--color-text-secondary-on-light);
  transition: color 180ms ease;
}

.nav-link.site-nav__lang-link:hover,
.nav-link.site-nav__lang-link:focus-visible {
  color: var(--color-text-primary-on-light);
}

/* Die aktuelle Sprache fuehrt auf die Seite, auf der man bereits ist. Sie
   steht in der vollen Textfarbe und ist weder mit der Maus noch per Tastatur
   erreichbar - dieselbe Regel wie beim aktiven Eintrag des Burgermenues. */
.nav-link.site-nav__lang-link[aria-current="page"] {
  color: var(--color-text-primary-on-light);
  pointer-events: none;
  cursor: default;
}

/* Weder Ruhe- noch Hoverzustand tragen eine Unterstreichung: .nav-link bringt
   sie nur ueber .text-link__label mit, das hier fehlt. Die Regel haelt das
   ausdruecklich fest, damit spaetere Ergaenzungen an .nav-link nicht
   unbemerkt einen Strich unter DE und EN setzen. */
.site-nav__lang-link,
.site-nav__lang-link:hover,
.site-nav__lang-link:focus,
.site-nav__lang-link:active,
.site-nav__lang-link[aria-current="page"] {
  text-decoration: none;
  border-bottom: none;
  box-shadow: none;
}

.site-nav__lang-link::after {
  content: none;
}

.site-nav__lang-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* Der Trennstrich sitzt optisch mittig zwischen beiden Kuerzeln und ist
   zurueckhaltender gesetzt als sie. */
.site-nav__lang-separator {
  margin: 0 8px;
  font-family: var(--font-heading);
  font-size: 13px;
  line-height: 1;
  color: rgba(36, 35, 31, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .nav-link.site-nav__lang-link {
    transition: none;
  }}

/* Menü-Icon: Finsweet-Lottie-Animation, von site.js in dieses Element
   gerendert (SVG-Renderer). Bleibt während der Öffnung an derselben Stelle
   sichtbar und klickbar; kein separates X-Icon. */
.site-nav__menu-icon {
  display: inline-block;
  width: 26px;
  height: 21px;
  overflow: hidden;
  color: var(--color-text-primary-on-light);
}

/* CSS-Fallback des Burgermenues: drei Linien, ab Seitenaufbau sichtbar und
   unabhaengig von Hover und von der Lottie-Bibliothek. Es belegt exakt
   dieselbe Flaeche wie die Animation und weicht erst, wenn diese geladen,
   gerendert und mit dem Menuezustand synchronisiert ist. Bei einem
   Ladefehler bleibt es stehen - der Button ist nie leer. */
.site-nav__menu-fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 21px;
  margin: -10.5px 0 0 -13px;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  color: var(--color-text-primary-on-light);
}

/* Die drei Linien tragen die Masse der Animation, nicht die der Flaeche.
   Zuvor spannten sie die vollen 26x21px auf, waehrend die Animation ihr
   Artboard nicht ausfuellt - beim Umschalten auf Lottie sprang das Zeichen
   sichtbar zusammen.

   Nachgemessen am gerenderten SVG (Artboard 633x509, Massstab 26/633 =
   0,041074):

     Linienlaenge   23,41px Geometrie, mit den runden Enden 24,23px
     Strichstaerke  0,82px  (20 Einheiten, unveraendert aus der Datei)
     Mitte zu Mitte 7,83px
     Tintenhoehe    16,48px

   Die Flaeche selbst bleibt 26x21px: An ihrer linken Kante haengt die
   Ausrichtung auf die Inhaltsachse, und --nav-cta-reach rechnet mit ihr.
   Verschoben wird nur, was darin gezeichnet wird. border-radius bildet die
   runden Linienenden der Animation nach (lc: 2). */
.site-nav__menu-fallback > span {
  position: absolute;
  left: 50%;
  width: 24.23px;
  margin-left: -12.115px;
  height: 0.8125px;
  border-radius: 0.40625px;
  background: currentColor;
  transition: transform 200ms ease, opacity 200ms ease;
}

/* Der Zeilenabstand ist bewusst eine ganze Zahl und nicht die 7,83px der
   Animation. Grund ist die Rasterung: Bei 7,83px verschiebt sich die Lage
   jeder Linie im Geraetepixelraster um 0,66 Pixel (7,83 x dpr 2 = 15,66).
   Gemessen deckte die obere Linie eine Geraetezeile voll, die mittlere
   keine - sie verteilte sich mit je 81 Prozent auf zwei Zeilen und wirkte
   dadurch heller und weicher als die beiden anderen.

   Ein ganzzahliger Abstand haelt alle drei Linien in derselben Phase, bei
   jeder Bildschirmdichte. Der Preis sind 0,17px Abweichung je Linie
   gegenueber der Animation - ein Sechstel Geraetepixel, und das Fallback
   steht ohnehin nur, bis die Animation geladen ist.

   Die krummen Dezimalstellen sind Absicht: Layoutwerte werden intern auf
   1/64px gerundet, und 0,41 beziehungsweise 7,59 liegen nicht auf diesem
   Raster. Gemessen driftete die dritte Linie dadurch um 0,008px und fiel aus
   der gemeinsamen Phase. 0,40625 und 7,59375 sind exakte Vielfache von
   1/64, ebenso die Hoehe 0,8125 - damit bleibt der Abstand exakt 8,000px. */
.site-nav__menu-fallback > span:nth-child(1) {
  top: 50%;
  margin-top: -8.40625px;
}

.site-nav__menu-fallback > span:nth-child(2) {
  top: 50%;
  margin-top: -0.40625px;
}

.site-nav__menu-fallback > span:nth-child(3) {
  top: 50%;
  margin-top: 7.59375px;
}

/* Geoeffnetes Menue: dieselben drei Linien bilden ein X. Die Verschiebung
   entspricht dem neuen Zeilenabstand. */
.site-nav__menu-button[aria-expanded="true"] .site-nav__menu-fallback > span:nth-child(1) {
  transform: translateY(7.83px) rotate(45deg);
}

.site-nav__menu-button[aria-expanded="true"] .site-nav__menu-fallback > span:nth-child(2) {
  opacity: 0;
}

.site-nav__menu-button[aria-expanded="true"] .site-nav__menu-fallback > span:nth-child(3) {
  transform: translateY(-7.83px) rotate(-45deg);
}

/* Solange die Animation nicht steht, bleibt ihr Container leer und
   unsichtbar; sonst ueberlagerten sich beide Darstellungen kurz. */
.site-nav__menu-button:not(.has-lottie) .site-nav__menu-icon {
  visibility: hidden;
}

.site-nav__menu-button.has-lottie .site-nav__menu-fallback {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__menu-fallback > span {
    transition: none;
  }
}
/* Die Strichstaerke bleibt, wie sie in der Datei steht: 20 Einheiten in
   einem 633er Artboard, das auf 26px skaliert wird - also 0,82px. Das ist
   die Proportion der Vorlage von Lottieflow, 3,16 Prozent der Iconbreite.

   Zuvor stand hier eine Ueberschreibung auf 48.7 Einheiten. Sie ergab 2px
   und damit dieselbe Staerke wie der damalige CSS-Fallback, machte die
   Linien aber proportional 2,44-mal dicker als die Vorlage. Der Fallback
   ist jetzt umgekehrt an die Datei angeglichen (siehe oben), die
   Ueberschreibung entfaellt deshalb. */

/* Die Zeichnung sitzt in ihrem Artboard nicht mittig: Gemessen liegt ihre
   Mitte 0,76px links der Flaechenmitte, waehrend der CSS-Fallback mittig
   steht. Der Versatz wird hier ausgeglichen, damit beide Darstellungen
   deckungsgleich sind.

   !important ist noetig, weil lottie-web dem SVG bei jedem Aufbau
   style="transform: translate3d(0,0,0)" direkt ins Element schreibt; ein
   Inline-Stil ist sonst nur so zu ueberstimmen. Aus demselben Grund traegt
   die stroke-Regel weiter unten bereits !important.

   Die Verschiebung gehoert an das SVG und nicht an die Flaeche darum: Die
   Zeichnung steht links 0,465px ueber die Flaeche hinaus, und deren
   overflow: hidden schnitte beim Verschieben der Flaeche die linke
   Linienkappe ab. Am SVG bewegt sie sich in den Zuschnitt hinein. */
.site-nav__menu-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: translateX(0.76px) !important;
}
/* Kein rect ausblenden: Das einzige <rect> der Animation ist die Flaeche
   ihres <clipPath>. display:none leerte den Clipbereich und schnitt damit
   alle drei Linien vollstaendig weg - das Icon blieb nach dem Laden von
   Lottie unsichtbar, obwohl die Pfade vorhanden und schwarz waren. */
.site-nav__menu-icon path,
.site-nav__menu-icon polygon,
.site-nav__menu-icon rect,
.site-nav__menu-icon line {
  stroke: currentColor !important;
}

/* Geöffnetes Menü: Die Flaeche traegt keinen eigenen Hintergrund und keine
   Trennlinie mehr — sie zeigt dieselbe abgedunkelte, unscharfe Seite wie die
   Klickflaeche rechts daneben, sodass Navbar, Menue und rechte Flaeche im
   geoeffneten Zustand eine einzige, leicht transparente Flaeche bilden.

   Die Breite bleibt trotzdem begrenzt: Nur der nicht belegte Rest rechts
   bleibt als Klickflaeche zum Schliessen erreichbar. Sie richtet sich nach
   der Inhaltsachse, damit der Text unabhaengig von der Fensterbreite Platz
   hat.

   `position: fixed` + der Scroll-Lock in navigation.js (body auf
   `position: fixed` gesetzt statt nur `overflow: hidden`) verhindert, dass
   der Hintergrund beim Scrollen auf Touch-Geräten kurzzeitig verschwindet. */
.mobile-menu {
  position: fixed;
  top: 72px;
  left: 0;
  width: calc(var(--content-axis) + 560px);
  max-width: 100%;
  height: calc(100dvh - 72px);
  z-index: 101;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-right: 0;
  /* Der Inhalt beginnt auf der Inhaltsachse — derselben Kante, auf der auch
     die sichtbaren Balken des Schliesssymbols stehen.

     Senkrecht haelt er zum Schliesssymbol denselben Abstand wie im Hero die
     419-Wortmarke zum Logo. Beide Zeichen sitzen mittig in der Navbar, sind
     aber unterschiedlich hoch: Vom Zielwert --hero-brand-top ist deshalb die
     halbe Differenz zwischen Logo (--logo-size) und Burgericon (21px)
     abzuziehen, und da das Menue erst unterhalb der Navbar beginnt,
     zusaetzlich deren Hoehe. */
  padding: calc(var(--hero-brand-top) - (var(--logo-size) - 21px) / 2 - var(--nav-h))
           var(--content-axis) 48px;
  display: flex;
  /* Nicht ueber align-items zentrieren: bei niedrigen Fenstern schneidet ein
     zentriertes Flex-Element mit overflow den oberen Rand ab und wird
     unerreichbar. Automatische Aussenraender am Inhalt (siehe
     .mobile-menu__inner) zentrieren genauso, fallen bei Platzmangel aber auf
     null zurueck - der Inhalt bleibt dann vollstaendig scrollbar. */
  align-items: flex-start;
  justify-content: flex-start;
  overflow-y: auto;
  opacity: 1;
  transition: opacity 150ms ease;
}

.mobile-menu.is-hiding {
  opacity: 0;
}

@media (min-width: 768px) {
  .mobile-menu {
    top: 88px;
    height: calc(100dvh - 88px);
  }}

/* Unter 768px gibt es keine Klickflaeche zum Schliessen (siehe Scrim); das
   Menue nutzt dort die volle Fensterbreite. */
@media (max-width: 767px) {
  .mobile-menu {
    left: 0;
    right: 0;
    width: 100%;
  }}

.mobile-menu[hidden] {
  display: none;
}

/* Rechte Fläche: reine Klickfläche zum Schließen des Menüs. Unschärfe und
   Abdunklung kommen aus der Regel für main und footer bei geöffnetem Menü —
   der Scrim bringt keine eigene mehr mit und sieht dadurch genauso aus wie
   die Menueflaeche links davon. Sie beginnt exakt dort, wo das Menue endet.
   Unter 768px entfaellt sie, dort nutzt das Menue die volle Breite. */
.mobile-menu__scrim {
  position: fixed;
  top: 72px;
  left: calc(var(--content-axis) + 560px);
  right: 0;
  width: auto;
  height: calc(100dvh - 72px);
  z-index: 100;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: pointer;
  border: none;
  padding: 0;
  opacity: 1;
  transition: opacity 150ms ease;
}

.mobile-menu__scrim.is-hiding {
  opacity: 0;
}

@media (min-width: 768px) {
  .mobile-menu__scrim {
    top: 88px;
    height: calc(100dvh - 88px);
  }}

@media (max-width: 767px) {
  .mobile-menu__scrim {
    display: none;
  }}

.mobile-menu__scrim[hidden] {
  display: none;
}

/* Bezeichnung und Ziele bilden einen linksbuendigen Block. Die Ausrichtung
   kommt aus der Polsterung von .mobile-menu; hier steht nur der Rhythmus. */
.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.mobile-menu__label {
  margin: 0 0 32px;
}

/* Die Eintraege sind H2, tragen hier aber ausschliesslich Menuetypografie -
   nicht die Sektionsstufe .section-title. */
.mobile-menu__heading {
  margin: 0;
  font-weight: inherit;
  font-size: inherit;
  line-height: 1;
}

.mobile-menu__heading + .mobile-menu__heading {
  margin-top: 20px;
}

.mobile-menu__link {
  position: relative;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  letter-spacing: 0.01em;
  line-height: 1.1;
  /* Die Eintraege stehen immer einzeilig; „Ueber uns" darf auch bei
     grossem Schriftgrad nicht am Leerzeichen umbrechen. */
  white-space: nowrap;
  text-transform: uppercase;
  text-decoration: none;
  /* Tiefes Dunkelgrau, nur eine Spur heller als Schwarz; bei Hover und
     Tastaturfokus geht der Text auf reines Schwarz. */
  color: #242424;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 28px;
  border: none;
  box-shadow: none;
  border-radius: 0;
  transition: color 180ms ease;
}

/* Der Eintrag der aktuellen Seite fuehrt nirgendwo hin und bekommt deshalb
   keinen Hoverzustand: kein Farbwechsel und kein einblendender Pfeil. Sein
   Strich steht ohnehin dauerhaft (siehe unten). */
.mobile-menu__link:not([aria-current="page"]):hover,
.mobile-menu__link:not([aria-current="page"]):focus-visible {
  color: #000;
}

/* Senkrechter Strich links neben dem Text, auf Versalhoehe. Er haengt
   ausserhalb der Textkante, damit die Eintraege im Ruhezustand wie im
   Hoverzustand exakt auf der Inhaltsachse beginnen. Der Ueberhang bleibt
   kleiner als die schmalste Achse (24px), sonst liefe der Strich aus dem
   Fenster. */
.mobile-menu__rule {
  position: absolute;
  left: -16px;
  top: 50%;
  width: 3px;
  height: 0.72em;
  background: var(--color-accent);
  transform: translateY(-50%) scaleY(0.4);
  transform-origin: center;
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
}

@media (min-width: 900px) {
  .mobile-menu__rule {
    left: -30px;
  }}

/* Derselbe Pfeil wie im Navbar-CTA: dieselbe viewBox, dieselbe
   Strichstaerke, nur groesser gesetzt. */
.mobile-menu__arrow {
  display: block;
  width: 20px;
  height: auto;
  flex: none;
  color: var(--color-accent);
  opacity: 0;
  transition: opacity 180ms ease;
}

.mobile-menu__link:not([aria-current="page"]):hover .mobile-menu__rule,
.mobile-menu__link:not([aria-current="page"]):focus-visible .mobile-menu__rule {
  opacity: 1;
  transform: translateY(-50%) scaleY(1);
}

.mobile-menu__link:not([aria-current="page"]):hover .mobile-menu__arrow,
.mobile-menu__link:not([aria-current="page"]):focus-visible .mobile-menu__arrow {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu__link,
  .mobile-menu__rule,
  .mobile-menu__arrow {
    transition: none;
  }

  .mobile-menu__link:not([aria-current="page"]):hover .mobile-menu__rule,
  .mobile-menu__link:not([aria-current="page"]):focus-visible .mobile-menu__rule {
    transform: translateY(-50%) scaleY(1);
  }}

/* Weder im Ruhe- noch im Hoverzustand eine Unterstreichung: die Kennzeichnung
   uebernehmen allein Textfarbe, Strich und Pfeil. */
.mobile-menu__link,
.mobile-menu__link:hover,
.mobile-menu__link:focus,
.mobile-menu__link:focus-visible,
.mobile-menu__link:active,
.mobile-menu__link[aria-current="page"] {
  border: none;
  box-shadow: none;
  outline: none;
  text-decoration: none;
}

.mobile-menu__link::after,
.mobile-menu__link:hover::after,
.mobile-menu__link:focus::after,
.mobile-menu__link:focus-visible::after,
.mobile-menu__link:active::after,
.mobile-menu__link[aria-current="page"]::after {
  content: none;
}

/* Die aktuelle Seite behaelt die normale Textfarbe und ist stattdessen
   dauerhaft durch denselben senkrechten Strich gekennzeichnet, der sonst den
   Hoverzustand anzeigt. Der Eintrag fuehrt auf die Seite, auf der man
   bereits ist, und ist deshalb nicht mehr anklickbar - weder mit der Maus
   noch per Tastatur (siehe navigation.js). */
.mobile-menu__link[aria-current="page"] {
  pointer-events: none;
  cursor: default;
}

.mobile-menu__link[aria-current="page"] .mobile-menu__rule {
  opacity: 1;
  transform: translateY(-50%) scaleY(1);
}

body.menu-open {
  overflow: hidden;
}

/* Bei geöffnetem Menü tragen Navbar und Menü exakt dieselbe
   Hintergrundklasse (.nav-glass) und bleiben selbst ungefiltert. Sie bringen
   keine eigene Flaeche mehr mit: sichtbar ist unter ihnen dieselbe
   abgedunkelte, unscharfe Seite wie in der Klickflaeche rechts. Navbar,
   Menue und Klickflaeche ergeben dadurch eine einzige, leicht transparente
   Flaeche. Im geschlossenen Zustand greift diese Regel nicht - die Navbar
   behaelt dort ihr bisheriges Verhalten aus .site-nav und .is-scrolled. */
body.menu-open .nav-glass {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  filter: none;
}

/* Der übrige Seiteninhalt tritt zurück. */
body.menu-open main,
body.menu-open .site-footer {
  filter: blur(10px);
  opacity: 0.3;
  pointer-events: none;
}

/* Grunddarstellung des Scrollhinweises. Die Positionierung setzt die
   jeweilige Seite; auf der Startseite sitzt er absolut im Hero. */
.hero__scroll-hint {
  display: flex;
  align-items: center;
  color: var(--color-text-primary-on-light);
  text-decoration: none;
  transition: opacity 260ms ease;
}

.page-the419 .hero__scroll-hint {
  display: none !important;
}

.hero__scroll-hint.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.hero__scroll-hint svg {
  width: 16px;
  height: 24px;
  animation: scroll-hint-bounce 1800ms ease-in-out infinite;
}

/* ==========================================================================
   Startseite — alle Regeln auf .page-home begrenzt. Navbar und Footer
   liegen außerhalb von .page-home und werden deshalb über
   body:has(.page-home) angesprochen; Unterseiten bleiben unberührt.
   ========================================================================== */

/* 1. Navbar-CTA auf jeder Seite mit Hauptnavigation - ohne seitenabhaengige
   Bedingung. Ausschliesslich ab 768px, damit das mobile Ausblenden aus
   .nav-link.site-nav__commission-link bestehen bleibt: sonst belegt der CTA
   mobil eine Grid-Area, die es dort nicht gibt, und verschiebt den Burger. */
@media (min-width: 768px) {
  .site-nav__commission-link {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    line-height: 1;
  }

  .site-nav__commission-link .text-link__arrow {
    display: block;
    transform: translateY(-2px);
  }}

/* ==========================================================================
   Sichtbarer Tastaturfokus (Punkt 9). Eine Kontur in der Akzentfarbe -
   keine Unterstreichung, kein Rahmen, keine Groessenaenderung.
   ========================================================================== */
/* Der Menueschalter traegt bewusst keine rechteckige Kontur. Seine
   Trefferflaeche misst 44x44px; ein Kasten dieser Groesse legt sich als
   auffaelliger Rahmen um ein Zeichen, das selbst nur 26x21px gross ist. Er
   erschien ausserdem auch ohne Tastaturbedienung: finishClose() in
   navigation.js gibt den Fokus nach jedem Schliessen programmatisch an den
   Schalter zurueck, und der Browser fuehrt die Tastaturmodalitaet der
   vorangegangenen Bedienung dabei fort.

   Die Kontur folgt deshalb der Rundung statt der Trefferflaeche: gleiche
   Farbe, gleiche Staerke und gleicher Abstand wie bei allen uebrigen
   Elementen, nur der Form nach dem runden Markenzeichen daneben angeglichen.
   outline richtet sich nach border-radius.

   Zuvor standen hier zwei Regeln: diese und eine zweite mit outline
   2px solid #111, die den Schalter zusammen mit Logo und Footer-Schalter
   ansprach. Beide standen nach der Regel weiter oben, die fuer denselben
   Schalter outline: none setzt, und gewannen bei gleicher Spezifitaet allein
   durch ihre Stellung - der Kasten war damit nicht abschaltbar. */
.site-nav__menu-button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 50%;
  text-decoration: none;
  border-bottom: none;
  box-shadow: none;
}

/* Nach dem Schliessen gibt finishClose() in navigation.js den Fokus an den
   Schalter zurueck. Das ist richtig - sonst faende sich ein Tastaturbediener
   danach am Seitenanfang wieder. Bei Maus- oder Fingerbedienung soll die
   Kontur dabei aber nicht erscheinen; sie wirkte dort wie ein Fehler.

   Der Browser entscheidet das bei programmatischem Fokus ueber eine
   Heuristik, die die vorangegangene Bedienart fortschreibt und sich nicht
   steuern laesst. navigation.js fuehrt die Bedienart deshalb selbst mit und
   setzt dieses Attribut, wenn nicht mit der Tastatur bedient wurde. Es faellt
   beim naechsten Tastendruck und beim Verlassen des Schalters wieder weg -
   der Tastaturfokus bleibt also jederzeit sichtbar. */
.site-nav__menu-button[data-fokus-still]:focus-visible {
  outline: none;
}

/* Das Logo bekommt dieselbe runde Kontur wie der Menueschalter. Seine Box ist
   quadratisch, die Marke darin rund - eine rechteckige Kontur stand deshalb
   sichtbar um sie herum und wirkte beim Antippen wie ein Fehler. Auf
   Beruehrung vergibt der Browser den Fokus an den Link, die Kontur erschien
   dadurch auch ohne Tastaturbedienung.

   Nicht zu verwechseln mit dem tap-highlight des Browsers - der ist bei der
   Grundregel des Logos gesondert abgeschaltet. Hier ging es um eine zweite,
   eigene Kontur. */
.site-nav__logo:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 50%;
}

/* Der Footer-Schalter ist ein rechteckiges Textelement; dort ist eine
   rechteckige Kontur richtig. */
.site-footer__legal-toggle:focus-visible {
  outline: 2px solid #111;
  outline-offset: 4px;
}

.site-nav__logo,
.site-nav__logo:hover,
.site-nav__menu-button,
.site-nav__menu-button:hover {
  text-decoration: none;
}

/* src/shared/styles/footer.css */
/* Footer: helle, großzügige, redaktionelle Abschlussfläche */
.site-footer {
  position: relative;
  z-index: 2;
  background: #f2f0eb;
  color: rgba(36, 35, 31, 0.72);
  /* Dieselbe linke Rasterkante wie die uebrigen linksbuendigen Texte: die
     gemeinsame Inhaltsachse. „Rechtliches" beginnt dadurch auf allen Seiten
     exakt dort, wo auch die Sektionstexte beginnen. Der Rahmen des Accordions
     laeuft weiterhin ueber die volle Fensterbreite - seine eigene Polsterung
     calc((100vw - 100%) / 2) leitet sich aus dieser Breite ab und folgt der
     Achse ohne eigene Angabe. */
  padding: 72px var(--content-axis);
  border-top: var(--hairline-width) solid var(--hairline-on-light);
}

/* Weicher Übergang statt hartem Schnitt aus einer dunklen Sektion darüber. */
.site-footer::before {
  content: "";
  position: absolute;
  top: -96px;
  left: 0;
  right: 0;
  height: 96px;
  background: linear-gradient(to bottom, rgba(242, 240, 235, 0) 0%, rgba(242, 240, 235, 0.9) 100%);
  pointer-events: none;
}

@media (max-width: 767px) {
  .site-footer {
    padding: 56px var(--content-axis);
  }}

.site-footer__inner {
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.site-footer__copyright {
  font-size: 12px;
  color: var(--color-text-secondary-on-light);
  text-align: center;
}

/* Der Rahmen laeuft auf allen Seiten ueber die gesamte Viewportbreite; die
   untere Linie schliesst das Accordion ab: geschlossen direkt unter
   „Rechtliches", geoeffnet unter der Linkliste. */
.site-footer__accordion {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: calc((100vw - 100%) / 2);
  border-top: 1px solid #77736d;
  border-bottom: 1px solid #77736d;
}

/* „Rechtliches" ist eine Schaltfläche über die volle Footerbreite; das
   Plus/Minus sitzt ganz rechts. Ohne Unterstreichung in allen Zuständen. */
.site-footer__legal-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 24px 0;
  gap: 12px;
  color: var(--color-text-primary-on-light);
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 180ms ease;
}

.site-footer__legal-toggle:hover,
.site-footer__legal-toggle:focus,
.site-footer__legal-toggle:focus-visible,
.site-footer__legal-toggle:active {
  text-decoration: none;
}

/* 32px von der oberen Linie zu „Rechtliches" und ebenso zur unteren Linie;
   mobil jeweils 24px. */
@media (min-width: 768px) {
  .site-footer__legal-toggle {
    padding: 32px 0;
  }}

/* Das Plus/Minus ist groesser als der Text. Absolut positioniert bestimmt
   allein die Textzeile die Hoehe der Schaltflaeche — nur so entspricht der
   Abstand zu den Rahmenlinien exakt dem Padding. */
.site-footer__toggle-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
}

.site-footer__legal-toggle:hover {
  opacity: 0.68;
}

/* Sichtbarer Tastaturfokus ohne Unterstreichung: eine Kontur, kein
   Textdekor. Zuvor blieb hier gar kein Fokusindikator. */
.site-footer__legal-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 24px 0 36px;
}

@media (max-width: 767px) {
  .site-footer__legal {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
  }}

/* Muss nach den display-Regeln stehen, sonst überschreibt display: flex
   bzw. grid die Voreinstellung des hidden-Attributs. */
.site-footer__legal[hidden] {
  display: none;
}

.site-footer__legal a {
  color: var(--color-text-primary-on-light);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.04em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: opacity 180ms ease;
}

.site-footer__legal a:hover {
  opacity: 0.68;
}

/* Ohne eigene Linie oben — die Abschlusslinie des Accordions steht bereits
   unmittelbar darüber. */
.site-footer__legal-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 32px;
}

.site-footer__legal-text p {
  max-width: 1500px;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(0.78rem, 1vw, 0.95rem);
  font-weight: 300;
  line-height: 1.65;
}

/* Startseite: Abstand des Footers zur vorherigen Sektion. */
body:has(.page-home) .site-footer {
  padding-top: 48px;
}

@media (max-width: 767px) {
  body:has(.page-home) .site-footer {
    padding-top: 32px;
  }}

/* Die Oberkante des Footers wuerde unmittelbar darunter eine zweite Linie
   erzeugen — auf /419/ deshalb unterdrueckt. */
body:has(.page-the419) .site-footer {
  border-top: 0;
}

/* ==========================================================================
   /dengel/ und /einblick/ — auf die jeweilige Seite begrenzt.
   ========================================================================== */

/* /dengel/: Die Sektion „Spezialisierte Partner" ist die letzte der Seite;
   die Linie darunter ist die Oberkante des Footers. */
body:has(.page-dengel) .site-footer {
  border-top: 0;
}

/* /einblick/: Die Oberkante des Footers laege unmittelbar unter den Bildern
   der Teasermappe und wirkte dort wie eine Trennlinie der Bildreihe - sie
   entfaellt deshalb. Stattdessen rueckt „Rechtliches" samt seinen beiden
   eigenen Linien deutlich weiter nach unten. */
body:has(.page-einblick) .site-footer {
  border-top: 0;
  padding-top: 160px;
}

@media (max-width: 767px) {
  body:has(.page-einblick) .site-footer {
    padding-top: 120px;
  }}

/* Die 404-Seite steht als einzige noch in der zentrierten Rail: hoechstens
   --rail-max breit, darin --side-padding Innenabstand. Der Footer uebernimmt
   dort dieselbe Kante, damit „Rechtliches" exakt unter dem Text beginnt. Die
   rechtlichen Seiten stehen seit base.css auf der Inhaltsachse und brauchen
   keine Ausnahme mehr. */
body:has(.page-not-found) .site-footer {
  padding-inline: calc(max(0px, (100vw - var(--rail-max)) / 2) + var(--side-padding));
}

/* Kennzeichnung des Entwicklungshinweises im Footer. Uebernimmt Satzbreite
   und Zentrierung des Absatzes, nur die Auszeichnung ist eigen. */
.site-footer__development-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 400;
}

/* src/shared/styles/slider.css */
/* ==========================================================================
   Startseiten-Karussell.
   Der Viewport laeuft ueber die volle Fensterbreite und ist das einzige
   beschneidende Element. Die Slidebreite ist so gewaehlt, dass links und
   rechts exakt die Haelfte des Nachbarbildes stehen bleibt:
   2 x (Slidebreite / 2) + 2 x Abstand + Slidebreite = 100vw.
   ========================================================================== */
.page-home .slider {
  position: relative;
  margin-top: 48px;
  /* Dreifacher Abstand zwischen den Bildern: 60px statt 20px, mobil 36px
     statt 12px. Der Wert geht in die Slidebreite ein (siehe --slide-w), die
     Bilder werden dadurch schmaler - der Streifen behaelt seine Breite. */
  --slider-gap: 60px;
  /* Der Streifen laeuft wieder ueber die volle Fensterbreite. Innerhalb
     dieser Breite steht das mittlere Bild vollstaendig, die Nachbarn je zur
     Haelfte. */
  --slider-w: 100vw;
  --slide-w: calc((var(--slider-w) - 2 * var(--slider-gap)) / 2);
  --slider-ease: cubic-bezier(0.45, 0, 0.2, 1);
  --slider-move: 1200ms;
}

@media (max-width: 899px) {
  .page-home .slider {
    --slider-gap: 36px;
    --slide-w: 82vw;
  }
}

.page-home .slider:focus-visible {
  outline: 2px solid #111;
  outline-offset: 4px;
}

/* Volle Fensterbreite, unabhaengig von der Rail-Polsterung des Elternteils.
   touch-action: pan-y ueberlaesst dem Browser weiterhin das senkrechte
   Scrollen, waehrend die waagerechte Geste an das Karussell geht - ohne
   diese Angabe wuerde der Browser den waagerechten Zug abfangen und die
   Zeigerereignisse abbrechen. */
.page-home .slider__viewport {
  width: var(--slider-w);
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}

.page-home .slider.is-dragging .slider__viewport {
  cursor: grabbing;
}

/* Waehrend des Ziehens darf die Auswahl nicht mitlaufen. */
.page-home .slider.is-dragging,
.page-home .slider.is-dragging * {
  user-select: none;
}

/* Ein durchgehender Track; die seitlichen Vorschauen sind dieselben Slides. */
.page-home .slider__track {
  display: flex;
  width: max-content;
  gap: var(--slider-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  will-change: transform;
}

/* Alle Slides sind gleichwertig: volle Deckkraft, volle Schaerfe, keine
   dauerhafte Groessenabweichung. */
.page-home .slider__slide {
  flex: 0 0 var(--slide-w);
  min-width: 0;
  opacity: 1;
  filter: none;
  transform: none;
}

/* Der Rahmen bleibt unveraendert; die Vergroesserung im Hoverzustand
   geschieht innerhalb dieses Rahmens. */
.page-home .slider__tile {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  overflow: hidden;
  border-radius: 3px;
  font-size: 0;
}

.page-home .slider__tile img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  user-select: none;
  transform: none;
  transition: transform 350ms var(--slider-ease);
}

/* Der Zoom haengt allein an der aktiven Kachel, die den absichtlichen
   Hoverzustand traegt - nicht am Karussell insgesamt. */
.page-home .slider__tile.is-zoomed img {
  transform: scale(1.025);
}

/* Die seitlichen Vorschauen bleiben in jedem Fall unskaliert. */
.page-home .slider__slide:not(.is-active) .slider__tile img {
  transform: none;
}

/* Geraete ohne Zeigergeraet erhalten keinen Zoom. */
@media (hover: none) {
  .page-home .slider__tile.is-zoomed img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .slider__tile img {
    transition: none;
  }
}

.page-home .slider__controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}

.page-home .slider__button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--hairline-on-light);
  border-radius: 2px;
  background: transparent;
  color: var(--color-text-secondary-on-light);
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}

.page-home .slider__button:hover {
  color: var(--color-text-primary-on-light);
  border-color: var(--color-text-primary-on-light);
}

.page-home .slider__button:focus-visible {
  outline: 2px solid #111;
  outline-offset: 3px;
}

.page-home .slider__button svg {
  width: 14px;
  height: 14px;
}

.page-home .slider__icon-play {
  display: none;
}

.page-home .slider.is-user-paused .slider__icon-pause {
  display: none;
}

.page-home .slider.is-user-paused .slider__icon-play {
  display: block;
}

/* Zustandstext des Pausenschalters: fuer Screenreader, visuell verborgen. */
.page-home .slider__button-state {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* src/pages/home/page.css */
/* Die 419-Ziffernform ist individuell gezeichnet (reine Vektorpfade ohne
   Schriftbezug). Sie wird deshalb als Originalgrafik verwendet, nicht als
   HTML-Text in einer Webschrift nachgebildet. */
/* Exakt mittig im Hero, leicht unterhalb der geometrischen Mitte — die
   Ziffernform überlagert dadurch bewusst leicht das Fahrzeugbild. */
.hero__wordmark {
  position: absolute;
  top: 30%;
  left: 34%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: clamp(180px, 22vw, 320px);
  height: auto;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* Mobil unverändert: Position und Größe wie zuvor. */
@media (max-width: 767px) {
  .hero__wordmark {
    top: 44%;
    left: 50%;
    transform: translate(calc(-50% - 2vw), calc(-50% - 2vh));
    width: clamp(140px, 40vw, 220px);
  }}

/* Inhaltsoberflaeche direkt unter dem mitscrollenden Hero.

   Sie ist genau ueber die Bandhoehe durchsichtig - nur dort soll das
   fixierte Herobild zu sehen sein, gegen das der Verlauf der ersten Sektion
   laeuft. Darunter ist sie deckend.

   Das ist nicht bloss Kosmetik: Ohne die deckende Flaeche schien das
   Herobild ueberall durch, wo eine Sektion noch keine Hoehe hatte - etwa
   waehrend die mehrere Megabyte grossen Karussellbilder luden. Die
   Sektionen selbst sind zwar deckend, decken aber nur ihre eigene Flaeche. */
.home-surface {
  position: relative;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(242, 240, 235, 0) 0,
    rgba(242, 240, 235, 0) var(--hero-fade),
    var(--color-base) var(--hero-fade)
  );
}

/* Der Hero endet ohne jeden Verlauf: das Bild bleibt bis zur Fensterunterkante
   unveraendert sichtbar, es liegt kein Band und kein Schatten mehr darueber.

   Der Uebergang in die beige Inhaltsflaeche liegt vollstaendig in der ersten
   Sektion und beginnt exakt an deren Oberkante. Bandhoehe und Farbstopps sind
   dieselben wie zuvor: 28 Prozent der sichtbaren Herohoehe, mit bewusst
   ungleicher Verteilung - bei 46 Prozent des Bandes liegt die Deckkraft erst
   bei 0.10, danach steigt sie steil an und ist bei 93 Prozent praktisch
   vollstaendig.

   Umgesetzt als Sektionsflaeche statt als eigene Ebene: Der letzte Farbstopp
   sitzt auf der Bandhoehe, alles darunter bleibt deckendes Beige. Die Sektion
   ist damit ueber ihre gesamte Hoehe korrekt gefuellt, ohne zweites Element
   und ohne den Inhalt zu ueberlagern. */
.page-home .home-surface {
  --hero-fade: calc((100svh - var(--nav-h)) * 0.28);
}

.page-home .home-surface .hero-intro {
  background: linear-gradient(
    to bottom,
    rgba(242, 240, 235, 0) 0,
    rgba(242, 240, 235, 0.10) calc(var(--hero-fade) * 0.46),
    rgba(242, 240, 235, 0.35) calc(var(--hero-fade) * 0.64),
    rgba(242, 240, 235, 0.72) calc(var(--hero-fade) * 0.82),
    rgba(242, 240, 235, 0.97) calc(var(--hero-fade) * 0.93),
    rgba(242, 240, 235, 1) var(--hero-fade)
  );
}

/* 2. Hero-Wortmarke sitzt im selben .rail-Container wie der Text der ersten
   Sektion, steht darin aber mittig statt an der linken Kante (siehe
   .hero__brand weiter unten) - keine eigene left-Angabe. */
/* Der Markenblock aus 419-Signet und Unterzeile beginnt mit seiner Oberkante
   bei 22 Prozent der Viewporthoehe. */
.page-home .hero__wordmark-rail {
  position: absolute;
  /* 22svh der Viewporthoehe; der Hero beginnt jetzt unter der Navbar. */
  top: calc(22svh - var(--nav-h));
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

/* Signet und Unterzeile bilden eine gemeinsame Gruppe. Sie ist so breit wie
   ihr breitestes Element; beide teilen sich dadurch dieselbe Mittelachse, die
   Unterzeile ist also auf das Signet zentriert und nicht auf die Railbreite.
   Die Gruppe selbst steht mittig im Fenster: margin-inline zentriert sie in
   der Rail, die ihrerseits mittig liegt. */
/* Die Gruppe sitzt zusaetzlich etwas tiefer. Die Verschiebung laeuft ueber
   transform am gemeinsamen Wrapper, damit sie Signet und Unterzeile
   gemeinsam betrifft und die horizontale Zentrierung aus margin-inline
   unberuehrt bleibt. Auf niedrigen Fenstern faellt sie kleiner aus. */
.page-home .hero__brand {
  width: fit-content;
  margin-inline: auto;
  transform: translateY(clamp(36px, 5vh, 60px));
}

/* Eine einzige Formel fuer alle Fensterbreiten: Die frueher getrennte
   Regel unter 768px erzeugte an dieser Grenze einen Sprung von 180px auf
   260px. clamp() bindet die Breite stufenlos an das Fenster - 160px bis
   800px Fensterbreite, darueber 20vw bis zur Obergrenze von 360px. */
.page-home .hero__wordmark {
  position: static;
  display: block;
  width: clamp(160px, 20vw, 360px);
  margin-inline: auto;
  transform: none;
}

/* ==========================================================================
   Raster und Typografie der Startseitensektionen.
   Standard linksbuendig: Seitenabstand 24/64/120px, Textbreite 100%/620/680px,
   Innenabstand oben 72/96/120px, unten 64/80/96px.
   Ausnahmen: "Unter 800 Kilogramm" und "Origin Reflected" sind zentriert mit
   760px Breite und 80/110px Innenabstand; "Privater Einblick" behaelt das
   kleine Label und ebenfalls 80/110px.
   Breakpoints: mobil < 768px, Tablet 768-1023px, Desktop ab 1024px.
   ========================================================================== */

/* Gemeinsamer Seitenabstand aller Startseitensektionen. */
.page-home .home-surface .rail {
  max-width: none;
  margin-inline: 0;
  padding-left: 24px;
  padding-right: 24px;
}

/* Ab der zweiten Sektion sitzt die linke Textkante auf der gemeinsamen
   Inhaltsachse. Die erste Sektion ist davon ausgenommen: ihre Textspalte ist
   zentriert und content-box-basiert, ein Achsenabstand wuerde sie ueber die
   Fensterbreite hinaus aufziehen. */
.page-home .home-surface .rail:not(.hero-intro__inner) {
  padding-left: var(--content-axis);
  padding-right: var(--content-axis);
}

.page-home .home-surface .section {
  padding-top: 72px;
  padding-bottom: 64px;
}

/* Sektionen mit eigenem Rhythmus: 80px mobil, 110px ab 768px. */
.page-home .home-surface .section:has(> .hero-intro__inner),
.page-home .home-surface .section[data-section="insight"],
.page-home .home-surface .section[data-section="reflected"] {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (min-width: 768px) {
  .page-home .home-surface .rail {
    padding-left: 64px;
    padding-right: 64px;
  }

  .page-home .home-surface .section {
    padding-top: 96px;
    padding-bottom: 80px;
  }

  .page-home .home-surface .section:has(> .hero-intro__inner),
  .page-home .home-surface .section[data-section="insight"],
  .page-home .home-surface .section[data-section="reflected"] {
    padding-top: 110px;
    padding-bottom: 110px;
  }}

@media (min-width: 1024px) {
  .page-home .home-surface .rail {
    padding-left: 120px;
    padding-right: 120px;
  }

  .page-home .home-surface .section {
    padding-top: 120px;
    padding-bottom: 96px;
  }}

/* Die erste Sektion ist um die volle Bandhoehe hoeher: ihr oberer
   Innenabstand enthaelt den gesamten Verlauf, sodass "Unter 800 Kilogramm."
   erst auf vollstaendig deckendem Beige beginnt. Darueber hinaus bleibt
   genau der Abstand, den in der Sektion "Vor der oeffentlichen Vorstellung"
   die Trennlinie zur Sektionsbezeichnung haelt - 80px mobil, 110px ab
   768px. Ueber der Ueberschrift steht damit ab Verlaufsende derselbe
   Freiraum wie dort ab der Linie. */
.page-home .home-surface .section:has(> .hero-intro__inner) {
  padding-top: calc(var(--hero-fade) + 80px);
}

@media (min-width: 768px) {
  .page-home .home-surface .section:has(> .hero-intro__inner) {
    padding-top: calc(var(--hero-fade) + 110px);
  }}

/* --- Linksbuendige Standardsektionen -------------------------------------- */
.page-home .home-surface .home-block {
  text-align: left;
}

.page-home .home-surface .section:not([data-section="reflected"]) .rail:not(.hero-intro__inner) > .section-label,
.page-home .home-surface .section:not([data-section="reflected"]) .rail:not(.hero-intro__inner) > .section-title,
.page-home .home-block__line,
.page-home .home-block__text {
  text-align: left;
  margin-inline: 0;
  max-width: 100%;
}

@media (min-width: 768px) {
  .page-home .home-surface .section:not([data-section="reflected"]) .rail:not(.hero-intro__inner) > .section-label,
  .page-home .home-surface .section:not([data-section="reflected"]) .rail:not(.hero-intro__inner) > .section-title,
  .page-home .home-block__line,
  .page-home .home-block__text {
    max-width: 620px;
  }}

@media (min-width: 1024px) {
  .page-home .home-surface .section:not([data-section="reflected"]) .rail:not(.hero-intro__inner) > .section-label,
  .page-home .home-surface .section:not([data-section="reflected"]) .rail:not(.hero-intro__inner) > .section-title,
  .page-home .home-block__line,
  .page-home .home-block__text {
    max-width: 680px;
  }}

/* --- Ausnahme: "Privater Einblick" ---------------------------------------- */
/* Kleines Label statt der Standard-Sektionsbezeichnung. */
/* --- Zentrierte Sektionen -------------------------------------------------- */
/* Der Seitenabstand liegt ausserhalb der Textbreite, deshalb content-box. */
.page-home .home-surface .hero-intro__inner {
  box-sizing: content-box;
  text-align: center;
  margin-inline: auto;
  max-width: 100%;
}

/* Die erste Sektion behaelt ihre mittige Satzachse, liegt aber in derselben
   Spalte wie alle uebrigen Texte: linke und rechte Grenze auf der
   Inhaltsachse.

   Zuvor war die Spalte 760px breit und content-box-basiert. Ihre Kanten
   standen dadurch 18px ausserhalb der Achse - genau der Zuschlag, mit dem
   --content-axis den Wortanfang der zentrierten Ueberschrift schaetzt. Diese
   Schaetzung trifft nur bei einer einzigen Fensterbreite, weil der Schriftgrad
   der Ueberschrift mit clamp() mitlaeuft; bei 1440px begann die Spalte auf
   340px, die uebrigen Texte auf 358px.

   Die Regel steht bewusst nach den Breakpoint-Regeln fuer .rail weiter oben:
   Sie hat dieselbe Spezifitaet und gewinnt allein durch ihre Stellung. */
.page-home .home-surface .hero-intro__inner {
  box-sizing: border-box;
  max-width: none;
  padding-left: var(--content-axis);
  padding-right: var(--content-axis);
}

.page-home .hero-intro__inner > .section-title,
.page-home .hero-intro__inner > .lead {
  text-align: center;
  max-width: 100%;
  margin-inline: 0;
}

/* "Unter 800 Kilogramm.": kein CSS-Abstand zum folgenden Absatz. */
.page-home .home-hero__title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(36px, 6vw, 76px);
  letter-spacing: 0.08em;
  line-height: 1.04;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}


/* --- Fliesstext ------------------------------------------------------------ */
/* Saemtlicher Fliesstext der Startseite - Hero-Absatz, Sektionstexte und die
   Einzeiler der Karussellsektionen - traegt dieselbe Stufe. Die Groesse ist
   bewusst fest und nicht mehr nach Breakpoint gestaffelt. Die Hero-Unterzeile
   „ORIGIN REFLECTED" liegt ausserhalb von .home-surface und behaelt dadurch
   ihre eigene Auszeichnung. */
.page-home .home-hero__text {
  text-align: center;
  max-width: 100%;
  margin: 22px 0 0;
}

.page-home .home-block__text {
  margin: 0;
}

.page-home .home-block__text + .home-block__text {
  margin-top: 16px;
}

@media (min-width: 1024px) {
  .page-home .home-block__text + .home-block__text {
    margin-top: 18px;
  }}

/* Einzeiler der Karussellsektionen bleibt linksbuendiger Fliesstext. */
.page-home .home-block__line {
  margin: 0;
  text-align: left;
}

/* Karussell folgt unmittelbar auf den Einzeiler. */
.page-home .home-block__line + .slider {
  margin-top: 48px;
}

/* Mechanik: Desktop Bild links 58 %, Text rechts 42 %. */
.page-home .home-mechanik__grid {
  display: grid;
  grid-template-columns: 58fr 42fr;
  gap: 48px;
  align-items: center;
  margin-top: 48px;
}

.page-home .home-mechanik__media,
.page-home .home-mechanik__text {
  margin: 0;
  min-width: 0;
}

.page-home .home-mechanik__text .lead {
  margin: 0;
}

.page-home .home-mechanik__text .lead + .lead {
  margin-top: 16px;
}

/* Mechanikbild im tatsaechlichen Seitenverhaeltnis der Datei (2048x1545),
   damit nichts verzerrt und nichts beschnitten wird. */
.page-home .home-mechanik__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2418 / 1556;
  border-radius: 3px;
}

/* Ueberschrift und Text der Mechaniksektion stehen linksbuendig, das Bild
   links daneben. Die Regel greift ausschliesslich auf .home-mechanik__text
   und damit nur auf diese eine Sektion; die gemeinsam genutzten Klassen
   .section-title und .lead bleiben unberuehrt. */
.page-home .home-mechanik__text {
  text-align: left;
}

/* "Besinnung auf das Wesentliche." spiegelt die Mechaniksektion: Text links,
   Bild rechts. Spaltenverhaeltnis, Abstand und Bildbreite sind dieselben,
   nur die Reihenfolge ist vertauscht. */
.page-home .home-reflected__grid {
  display: grid;
  grid-template-columns: 42fr 58fr;
  gap: 48px;
  align-items: center;
  margin-top: 48px;
}

.page-home .home-reflected__media,
.page-home .home-reflected__text {
  margin: 0;
  min-width: 0;
}

.page-home .home-reflected__text {
  text-align: left;
}

.page-home .home-reflected__text .lead + .lead {
  margin-top: 16px;
}

.page-home .home-reflected__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2048 / 2048;
  border-radius: 3px;
}

/* ==========================================================================
   "Mechanik" und "Besinnung auf das Wesentliche": das Bild traegt die
   Sektion. Es laeuft auf seiner Aussenseite bis an den Bildschirmrand, die
   Textspalte behaelt ihren Abstand auf der Inhaltsachse. Oben und unten
   bleibt nur ein schmaler Abstand zu den Trennlinien der Nachbarsektionen,
   damit die Bildflaeche die volle Sektionshoehe nutzt.
   ========================================================================== */
.page-home .home-surface .section[data-section="mechanik"],
.page-home .home-surface .section[data-section="reflected"] {
  padding-top: 24px;
  padding-bottom: 24px;
}

.page-home .home-mechanik__grid,
.page-home .home-reflected__grid {
  margin-top: 0;
}

/* Ab 900px steht das Bild neben dem Text. Auf der Bildseite - links bei
   "Mechanik", rechts bei "Besinnung" - haelt es var(--media-inset) Abstand
   zum Bildschirmrand, statt bis an die Kante zu laufen.

   "Mechanik" haelt diesen Abstand auf beiden Seiten. Die rechte Kante des
   Textblocks liegt dadurch spiegelbildlich zur linken Kante des Bildes, und
   beide Kanten der Sektion stehen auf demselben Mass wie die Bildflaechen
   der uebrigen Sektionen. Bild und Text sind dadurch breiter als mit dem
   frueheren rechten Seitenabstand; das Verhaeltnis 62/38 bleibt unveraendert.

   Die Karussells laufen inzwischen bis an den Bildschirmrand und sind
   deshalb kein Bezug mehr fuer diese Kanten - der Textblock behaelt seinen
   Abstand zum Rand, ein Karussell braucht keinen. */
@media (min-width: 900px) {
  .page-home .home-surface .section[data-section="mechanik"] > .rail {
    padding-left: var(--media-inset);
    padding-right: var(--media-inset);
  }

  .page-home .home-surface .section[data-section="reflected"] > .rail {
    padding-right: var(--media-inset);
  }

  .page-home .home-mechanik__grid {
    grid-template-columns: 62fr 38fr;
    gap: 56px;
  }

  .page-home .home-reflected__grid {
    grid-template-columns: 38fr 62fr;
    gap: 56px;
  }}

/* Unter 900px steht das Bild ueber dem Text und nutzt die volle
   Fensterbreite; der Text behaelt seinen Seitenabstand.

   align-self ist zwingend: Beide Raster erben aus der Desktopregel
   align-items: center. In der mobilen Spaltenrichtung ist das die
   Querachse, und die Zentrierung verrechnet den negativen Rand mit - das
   Bild saesse dann um dessen halben Betrag verschoben statt buendig an
   der linken Fensterkante. */
@media (max-width: 899px) {
  .page-home .home-mechanik__media,
  .page-home .home-reflected__media {
    align-self: flex-start;
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }}

/* Mobil: Bild zuerst, Text darunter - wie in der Mechaniksektion. */
@media (max-width: 899px) {
  .page-home .home-reflected__grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .page-home .home-reflected__media {
    order: 1;
  }

  /* Wie in der Mechaniksektion: Das Raster erbt align-items: center aus der
     Desktopregel, und in der Spaltenrichtung ist das die Querachse. Ohne
     align-self schrumpft der Textblock auf die Breite seines breitesten
     Kindes und steht mittig statt auf der Inhaltsachse. */
  .page-home .home-reflected__text {
    order: 2;
    align-self: stretch;
  }
}

/* Text und Pfeil sind optisch wie geometrisch vertikal mittig: der Pfeil
   ist ein Blockelement ohne Grundlinienversatz. */
/* Auszeichnung und Ausrichtung kommen aus der gemeinsamen .text-link-Regel;
   hier bleibt nur der Abstand zum vorangehenden Absatz. */
.page-home .home-access__cta {
  margin-top: 24px;
}

/* Der Pfeil sass zu tief: .text-link zentriert seine Kinder ueber die
   Boxmitte, und die Textbox ist durch das padding-bottom von 4px, das die
   Unterstreichung traegt, nach unten groesser als die Schrift. Die halbe
   Polsterung hebt den Pfeil wieder auf die optische Mitte des Textes. */
.page-home .home-access__cta .text-link__arrow {
  transform: translateY(-2px);
}

/* Mobil: Bild vor Text. */
@media (max-width: 899px) {
  .page-home .home-mechanik__grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .page-home .home-mechanik__media {
    order: 1;
  }

  /* align-self ist aus demselben Grund zwingend wie beim Bild darueber: Das
     Raster erbt aus der Desktopregel align-items: center, und in der mobilen
     Spaltenrichtung ist das die Querachse. Ohne diese Zeile schrumpft der
     Textblock auf die Breite seines breitesten Kindes - die .lead mit
     max-width: 38rem - und steht mittig statt auf der Inhaltsachse. */
  .page-home .home-mechanik__text {
    order: 2;
    align-self: stretch;
  }
}

/* ==========================================================================
   Startseiten-Hero: normaler Dokumentfluss, volle Fensterhoehe.
   Bild, Wortmarke, Unterzeile und Scrollhinweis scrollen gemeinsam nach
   oben; nur die Navbar bleibt stehen und liegt darueber.
   ========================================================================== */
.page-home .hero--home {
  position: relative;
  height: 100svh;
  min-height: auto;
  z-index: 0;
}

/* Nur die Bildebene steht viewportfest. Der Hero selbst bleibt im normalen
   Dokumentfluss, deshalb wandern Wortmarke und Unterzeile mit ihm nach oben.
   Da .hero--home keine Transformation traegt, bezieht sich das fixierte Kind
   auf den Viewport; der z-index 0 des Heroes haelt es zugleich unter der
   Inhaltsflaeche (z-index 2) und der Navbar. */
/* Der Hero beginnt unmittelbar unterhalb der Navbar, nicht dahinter:
   Oberkante = Unterkante der Navbar, Hoehe entsprechend reduziert. */
.page-home .hero--home {
  margin-top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
}

/* Das Bild reicht bis an die Fensteroberkante und liegt damit auch hinter der
   Navbar. Nur so wird deren Transparenz am Seitenanfang sichtbar; endete das
   Bild an der Navbar-Unterkante, zeigte der Streifen darueber den beigen
   Body-Hintergrund und wirkte wie ein undurchsichtiger Balken. */
.page-home .hero--home > .hero__media {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100svh;
  pointer-events: none;
}

/* Das Bild ist mit 5384x5024 nahezu quadratisch und damit deutlich hoeher
   als der Ausschnitt. Bei zentriertem Anker fiele oben wie unten gleich viel
   weg (auf 1440x900 je 222px), die Bildoberkante laege also ausserhalb des
   Fensters. Der Anker sitzt deshalb oben: das Bild rueckt nach unten, bis
   seine Oberkante am Bildschirmrand steht, und der gesamte Ueberhang faellt
   unten weg. */
.page-home .hero--home > .hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

/* Zuschnitt fuer hochkant stehende Fenster. Das Fahrzeug liegt im Bild
   zwischen 60 und 100 Prozent der Breite und zwischen 18 und 75 Prozent der
   Hoehe. Fuellte die Bildebene wie im Querformat die ganze Fensterhoehe,
   bliebe davon nur ein schmaler Streifen der Breite sichtbar - das Fahrzeug
   waere rechts angeschnitten und laege mit seiner Oberkante hinter der
   Wortmarke.

   Die Ebene ist deshalb niedriger als das Fenster und steht an dessen
   Unterkante. Dadurch faellt der Massstab kleiner aus, ein deutlich
   breiterer Bildausschnitt bleibt sichtbar, und der Ankerpunkt ganz rechts
   holt das Fahrzeug vollstaendig herein. Es rueckt zugleich nach unten -
   unter die Wortmarke - und nach links.

   Die Bedingung haengt an der Fensterform, nicht an der Breite: Eng wird es
   immer dann, wenn das Fenster hoeher als breit ist - auf dem Telefon
   ebenso wie auf einem hochkant gehaltenen Tablet von 1136px Breite. Eine
   Breitenschwelle hatte Letzteres nicht erfasst, dort ueberschnitten sich
   Fahrzeug und Wortmarke weiterhin.

   Ueber der Ebene steht der Seitenhintergrund. Das faellt nicht auf: Der
   Studiohintergrund des Bildes misst an seiner Oberkante rgb(242, 240, 234)
   und ist von --color-base (#F2F0EB) nicht zu unterscheiden. */
@media (max-aspect-ratio: 1 / 1) {
  .page-home .hero--home > .hero__media {
    top: auto;
    bottom: 0;
    height: 56svh;
    /* Die Oberkante der Bildebene zeichnet sonst eine feine Linie quer
       durchs Fenster: Der Studiohintergrund des Bildes ist dem
       Seitenhintergrund zwar sehr aehnlich, traegt aber einen leichten
       Verlauf. Die Maske blendet die ersten 12 Prozent der Ebene weich ein,
       die Kante verschwindet dadurch vollstaendig. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 12%);
  }

  .page-home .hero--home > .hero__media img {
    object-position: 100% 0;
  }}

/* Der Scrollhinweis gehoert nicht zur scrollenden Wortmarkengruppe: er
   bleibt viewportfest und blendet ueber .is-hidden aus. */
/* Der Scrollhinweis liegt ueber Herobild und beigem Verlauf der
   Inhaltsflaeche und bleibt dadurch vollstaendig sichtbar. */
/* z-index 5 liegt ueber der Inhaltsflaeche (2) und damit auch ueber deren
   beigem Verlauf (.home-surface::before), der sonst den Pfeil aufhellt.
   Zentriert wird ueber margin-left mit der halben Breite (24/2 = 12px), nicht
   ueber transform: translateX(-50%): so bleibt die Position ganzzahlig und
   transform ist allein der Bewegung vorbehalten. */
.page-home .hero--home .hero__scroll-hint {
  position: fixed;
  bottom: 32px;
  left: 50%;
  margin-left: -12px;
  transform: none;
  z-index: 5;
  color: #000;
  opacity: 1;
}

/* Die viewBox misst 24x38 Einheiten und das Element 24x38px: Massstab 1:1,
   damit stroke-width 1.5 exakt 1,5 CSS-Pixel ergibt und nicht skaliert
   verwaschen wird. */
.page-home .hero--home .hero__scroll-hint svg {
  display: block;
  width: 24px;
  height: 38px;
}

.page-home .hero--home .hero__scroll-hint svg path {
  stroke: currentColor;
  stroke-width: 1.5;
}

/* Unterzeile unmittelbar unter der Wortmarke, linksbuendig mit ihr. */
.page-home .hero__subline {
  margin: 18px 0 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(14px, 1.5vw, 20px);
  line-height: 1.65;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-align: center;
  color: #cd4d16;
}

/* Sichtbare Nachbarbilder sind anklickbar und ruecken in die Mitte. */
.page-home .slider__slide:not(.is-active) .slider__tile {
  cursor: pointer;
}

/* src/pages/about/page.css */
.page-dengel .ratio-4-5,
.page-dengel .ratio-16-9 {
  overflow: hidden;
}

/* ==========================================================================
   /dengel/ — zwei Abschnitte: "Ueber uns" und "Zusammenarbeit".
   Beide nutzen die bestehende Rail, Typografie und Abstandslogik; die
   Spaltenverhaeltnisse stehen in fr-Einheiten, damit sie den Raum neben dem
   Abstand exakt aufteilen und nichts ueberlaeuft.
   ========================================================================== */
.page-dengel .dengel-block__subline {
  margin: 0 0 24px;
  color: var(--color-text-secondary-on-light);
}

.page-dengel .dengel-block__text {
  margin: 0;
  max-width: 62ch;
}

.page-dengel .dengel-about__media,
.page-dengel .dengel-collab__media {
  margin: 0;
  min-width: 0;
}

.page-dengel .dengel-about__text,
.page-dengel .dengel-collab__text {
  min-width: 0;
}

.page-dengel .dengel-about__media picture,
.page-dengel .dengel-collab__media picture {
  display: block;
}

.page-dengel .dengel-about__media img,
.page-dengel .dengel-collab__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Das Portraet behaelt sein Hochformat 4:5 und wird nicht verzerrt. */
.page-dengel .dengel-about__media img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Mobil: Text zuerst, Bild direkt danach, keine feste Mindesthoehe. */
.page-dengel .dengel-about__grid,
.page-dengel .dengel-collab__grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.page-dengel .dengel-about__text,
.page-dengel .dengel-collab__text {
  order: 1;
}

.page-dengel .dengel-about__media,
.page-dengel .dengel-collab__media {
  order: 2;
}

@media (min-width: 900px) {
  /* "Ueber uns": Text links 42 %, Portraet rechts 58 %, vertikal mittig,
     im normalen Dokumentfluss.

     Ohne Mindesthoehe: Sie stand hier auf 100svh - 72px und machte die
     Sektion damit zwangslaeufig hoeher als das Fenster, sobald Navbar und
     Seitenabstand hinzukamen - die Sektion konnte nie vollstaendig sichtbar
     sein. Ihre Hoehe ergibt sich jetzt aus dem Inhalt, und der Abstand nach
     oben laeuft ueber --page-top-gap mit der Fensterhoehe mit. */
  .page-dengel .dengel-about__grid {
    display: grid;
    grid-template-columns: 42fr 58fr;
    gap: 48px;
    align-items: center;
  }

  /* "Zusammenarbeit": Materialdetail links 55 %, Text rechts 45 %. */
  .page-dengel .dengel-collab__grid {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: 48px;
    align-items: center;
  }

  .page-dengel .dengel-about__text,
  .page-dengel .dengel-collab__text,
  .page-dengel .dengel-about__media,
  .page-dengel .dengel-collab__media {
    order: 0;
  }
}

/* "Zusammenarbeit" ist vorlaeufig eine reine Textsektion; ohne Bildspalte
   bleibt die Zeilenbreite auf dem redaktionellen Mass. */
.page-dengel .dengel-collab__textonly .dengel-collab__text {
  max-width: 760px;
}

/* ==========================================================================
   Linksbuendiges Raster (Phase 2): Seitenabstand 24/64/120px, Textbreite
   100%/620/680px, Innenabstand oben 72/96/120px, unten 64/80/96px.
   ========================================================================== */
.page-dengel .rail {
  max-width: none;
  margin-inline: 0;
  padding-left: 24px;
  padding-right: 24px;
}

.page-dengel .section {
  padding-top: 72px;
  padding-bottom: 64px;
}

.page-dengel .dengel-about__text > .section-title,
.page-dengel .dengel-about__text > .lead,
.page-dengel .dengel-collab__text > .section-label,
.page-dengel .dengel-collab__text > .section-title,
.page-dengel .dengel-collab__text > .lead {
  max-width: 100%;
}

@media (min-width: 768px) {
  .page-dengel .rail {
    padding-left: 64px;
    padding-right: 64px;
  }

  .page-dengel .section {
    padding-top: 96px;
    padding-bottom: 80px;
  }

  .page-dengel .dengel-about__text > .section-title,
  .page-dengel .dengel-about__text > .lead,
  .page-dengel .dengel-collab__text > .section-label,
  .page-dengel .dengel-collab__text > .section-title,
  .page-dengel .dengel-collab__text > .lead {
    max-width: 620px;
  }}

@media (min-width: 1024px) {
  .page-dengel .rail {
    padding-left: 120px;
    padding-right: 120px;
  }

  .page-dengel .section {
    padding-top: 120px;
    padding-bottom: 96px;
  }

  .page-dengel .dengel-about__text > .section-title,
  .page-dengel .dengel-about__text > .lead,
  .page-dengel .dengel-collab__text > .section-label,
  .page-dengel .dengel-collab__text > .section-title,
  .page-dengel .dengel-collab__text > .lead {
    max-width: 680px;
  }}

/* "Starke Partner.": Desktop zweispaltig, links die Entwurfszeichnung,
   rechts der vollstaendige Textblock. Der Text darin ist rechtsbuendig.
   Mobil steht das Bild zuerst, der Text darunter. */
.page-dengel .dengel-collab__media img {
  aspect-ratio: 2752 / 1536;
  object-fit: cover;
}

.page-dengel .dengel-collab__text {
  text-align: left;
}

.page-dengel .dengel-collab__text > .section-label,
.page-dengel .dengel-collab__text > .section-title,
.page-dengel .dengel-collab__text > .lead {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}

/* Mobil steht der Text zuerst, die Zeichnung darunter - wie in der Sektion
   darueber, wo das Portraet ebenfalls dem Text folgt. */
@media (max-width: 899px) {
  .page-dengel .dengel-collab__text {
    order: 1;
  }

  .page-dengel .dengel-collab__media {
    order: 2;
  }}

/* Zwischen "Ein Projekt mit klarer Verantwortung." und "Starke Partner."
   steht keine Trennlinie mehr. Das Entfernen der Klasse .section--hairline-top
   allein genuegt nicht: die allgemeine Regel .section + .section aus base.css
   erzeugt dieselbe Linie und wird hier ausdruecklich aufgehoben. */
.page-dengel .section + .section {
  border-top: 0;
}

/* Der Text von "Starke Partner." beginnt auf derselben senkrechten Linie wie
   das Portraet der Sektion darueber. Dafuer traegt diese Sektion exakt
   dieselbe Rail und dieselben Spaltenverhaeltnisse wie "Ein Projekt mit
   klarer Verantwortung.": gleiche Polsterung links und rechts, gleiche
   Aufteilung 45/55 und derselbe Abstand von 48px. Die linke Kante der
   zweiten Spalte faellt dadurch rechnerisch mit der linken Kante des
   Portraets zusammen - ohne Umrechnung ueber 100vw, die an der Breite einer
   klassischen Scrollleiste scheitern wuerde. Die rechten Aussenkanten von
   Zeichnung und Portraet liegen aus demselben Grund ebenfalls aufeinander.

   Die Zeichnung behaelt ihren bisherigen Abstand zum Bildschirmrand
   (--media-inset, wie Karussells und Bildflaechen der Startseite): Sie haengt
   dafuer um die Differenz beider Kanten aus ihrer Spalte heraus - oberhalb
   von rund 1006px Fensterbreite nach links, darunter nach rechts, weil dort
   --media-inset groesser ist als die Inhaltsachse. Sie wird durch die
   schmalere Spalte kleiner; das ist die beabsichtigte Folge. */
@media (min-width: 900px) {
  .page-dengel .dengel-collab > .rail {
    padding-left: var(--content-axis);
    padding-right: max(24px, calc(var(--content-axis) - var(--nav-cta-reach)));
  }

  .page-dengel .dengel-collab__grid {
    grid-template-columns: 45fr 55fr;
  }

  .page-dengel .dengel-collab__media {
    margin-left: calc(var(--media-inset) - var(--content-axis));
  }}

/* Unter 900px nutzt die Zeichnung die volle Fensterbreite; der Text behaelt
   seinen Seitenabstand. */
@media (max-width: 899px) {
  .page-dengel .dengel-collab__media {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }}

/* ==========================================================================
   "Ein Projekt mit klarer Verantwortung." sitzt auf der gemeinsamen
   Inhaltsachse - derselben linken Kante wie die Sektionstexte der
   Startseite. Gespiegelt bestimmt sie zugleich die rechte Kante: das
   Portraet schliesst dadurch buendig mit der rechten Aussenkante des
   Navbar-CTA ab und wird entsprechend schmaler. Die zweite Sektion behaelt
   ihren Seitenabstand, damit die links angeschnittene Entwurfszeichnung
   ihre Breite nicht wieder verliert.
   ========================================================================== */
/* Die rechte Kante folgt exakt derselben Formel wie die rechte Aussenkante
   des Navbar-CTA (siehe navigation.css). Das Portraet endet dadurch bei
   jeder Fensterbreite buendig unter dessen Pfeilspitze. */
.page-dengel .dengel-about > .rail {
  padding-left: var(--content-axis);
  padding-right: max(24px, calc(var(--content-axis) - var(--nav-cta-reach)));
}

/* Die Textspalte waechst von 42 auf 45 Prozent, weil die Sektion insgesamt
   schmaler geworden ist. minmax(min-content, …) ist die Absicherung: die
   Spalte faellt nie unter die Laenge des laengsten Wortes der Ueberschrift,
   „Verantwortung." wird also unter keiner Fensterbreite getrennt. */
@media (min-width: 900px) {
  .page-dengel .dengel-about__grid {
    grid-template-columns: minmax(min-content, 45fr) 55fr;
  }}

/* Der Abstand zwischen beiden Sektionen ist auf die Haelfte reduziert:
   32+36px mobil statt 64+72px, 40+48px ab 768px statt 80+96px und
   48+60px ab 1024px statt 96+120px. */
/* Der Seitenanfang haelt denselben sichtbaren Abstand zur Navbar wie
   /kontakt/. Der Innenabstand enthaelt dafuer die Navbarhoehe.

   align-self ist die Voraussetzung dafuer: Das Raster ist mindestens
   fenstergross und zentriert seine Spalten, der Textbeginn haenge sonst an
   der Fensterhoehe und liesse sich mit keinem festen Wert an /kontakt/
   angleichen. Der Text startet nun an der Rasteroberkante, das Portraet
   bleibt mittig. */
.page-dengel .dengel-about {
  padding-top: calc(var(--nav-h) + var(--page-top-gap));
  padding-bottom: 32px;
}

/* Text und Portraet beginnen an derselben Oberkante: Beide sitzen oben im
   Raster statt mittig. Nur so laesst sich der Abstand zur Navbar ueber
   --page-top-gap fest vorgeben (siehe oben) und die Oberkante des Bildes
   liegt auf der des Textes. */
@media (min-width: 900px) {
  .page-dengel .dengel-about__text,
  .page-dengel .dengel-about__media {
    align-self: start;
  }}

.page-dengel .dengel-collab {
  padding-top: 36px;
}

@media (min-width: 768px) {
  .page-dengel .dengel-about {
    padding-bottom: 40px;
  }

  .page-dengel .dengel-collab {
    padding-top: 48px;
  }}

@media (min-width: 1024px) {
  .page-dengel .dengel-about {
    padding-bottom: 48px;
  }

  .page-dengel .dengel-collab {
    padding-top: 60px;
  }}

/* src/pages/contact/page.css */
/* ==========================================================================
   /einblick/ — vollständig unter .page-einblick gekapselt.
   Farben: Fläche #F2F0EB, Text #24231F, Sekundärtext #68645F,
   Akzent #CD4D16, Konturen #77736D, Feldlinien #89857E, Auswahl #D8D5CF.
   Überschriften, Labels, Auswahlfelder und CTA in Roboto Condensed 300,
   Fließtext und Eingaben in Roboto Condensed 300.
   ========================================================================== */
.page-einblick {
  background: #f2f0eb;
  color: #24231f;
}

.page-einblick .einblick-form__title,
.page-einblick .einblick-choice__legend,
.page-einblick .einblick-option__text,
.page-einblick .einblick-field__label,
.page-einblick .einblick-cta {
  font-family: var(--font-heading);
  font-weight: 300;
}
.page-einblick .einblick-field__input,
.page-einblick .einblick-consent__text,
.page-einblick .einblick-note,
.page-einblick .einblick-required,
.page-einblick .einblick-status {
  font-family: var(--font-sans);
  font-weight: 300;
}

/* --- Formularkopf -------------------------------------------------------- */
/* Kontaktblock, Formularueberschrift und Formular teilen denselben
   Seitenabstand wie die uebrigen linksbuendigen Sektionen: 24/64/120px. */
.page-einblick .einblick-form-section {
  max-width: none;
  margin-inline: 0;
  padding: 0 24px 80px;
}

@media (min-width: 768px) {
  .page-einblick .einblick-form-section {
    padding: 0 64px 80px;
  }}

.page-einblick .einblick-form__title {
  margin: 0;
  text-align: center;
  font-size: 36px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #24231f;
}

.page-einblick .einblick-form__rule {
  display: block;
  width: 56px;
  height: 1px;
  margin: 24px auto 40px;
  background: var(--color-accent);
}

@media (min-width: 1024px) {
  .page-einblick .einblick-form-section {
    padding: 0 120px 112px;
  }

  .page-einblick .einblick-form__title {
    font-size: 48px;
  }

  .page-einblick .einblick-form__rule {
    margin: 24px auto 56px;
  }}

/* --- Auswahlgruppen ------------------------------------------------------ */
.page-einblick .einblick-choice {
  margin: 0 0 32px;
  padding: 0;
  border: 0;
}

.page-einblick .einblick-choice__legend {
  padding: 0;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #24231f;
}

.page-einblick .einblick-choice__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 768px) {
  .page-einblick .einblick-choice__grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
  }

  .page-einblick .einblick-option--wide {
    grid-column: 1 / -1;
  }}

.page-einblick .einblick-option {
  position: relative;
  width: 100%;
  min-height: 64px;
  padding: 14px 52px 14px 22px;
  display: flex;
  align-items: center;
  background: transparent;
  border: 1px solid #77736d;
  border-radius: 2px;
  text-align: left;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #24231f;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.page-einblick .einblick-option:hover {
  border-color: #24231f;
}

/* Der Input bleibt bedienbar und fokussierbar, ist aber unsichtbar — die
   gesamte Fläche des Labels ist dadurch klickbar. */
.page-einblick .einblick-option__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.page-einblick .einblick-option__mark {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 1px solid #3c3a35;
  border-radius: 50%;
}

.page-einblick .einblick-option__input:checked ~ .einblick-option__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

.page-einblick .einblick-option:has(.einblick-option__input:checked) {
  background: #d8d5cf;
  border-color: #5f5b55;
  box-shadow: inset 2px 0 0 var(--color-accent), inset 0 2px 4px rgba(36, 35, 31, 0.14);
}

.page-einblick .einblick-option:has(.einblick-option__input:focus-visible) {
  outline: 1px solid var(--color-accent);
  outline-offset: 3px;
}

/* --- Bedingte Blöcke ----------------------------------------------------- */
.page-einblick .einblick-conditional[hidden] {
  display: none;
}

.page-einblick .einblick-conditional {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.page-einblick .einblick-conditional.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .page-einblick .einblick-conditional {
    transition: none;
  }}

/* --- Felder -------------------------------------------------------------- */
.page-einblick .einblick-field {
  margin-bottom: 24px;
}

.page-einblick .einblick-contact .einblick-field {
  margin-bottom: 0;
}

.page-einblick .einblick-field__label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #24231f;
}

.page-einblick .einblick-field__input {
  width: 100%;
  height: 56px;
  padding: 8px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #89857e;
  border-radius: 0;
  font-size: 16px;
  color: #24231f;
}

.page-einblick .einblick-field__input::placeholder {
  color: #68645f;
}

/* Das Auswahlfeld traegt dieselbe Linie und Schrifthoehe wie die
   Eingabefelder. Die Systemdarstellung wird abgeschaltet und durch denselben
   Pfeil ersetzt, den auch die Textlinks verwenden - als data-URI, weil
   validate-site.mjs keine externen Adressen im ausgelieferten HTML und CSS
   zulaesst. Die eigene Polsterung rechts haelt den Text vom Pfeil frei. */
.page-einblick .einblick-field__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 2l7 6 7-6' fill='none' stroke='%2324231f' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 14px auto;
}

/* Der leere Eintrag steht in der Liste so zurueckhaltend wie ein Platzhalter
   in den uebrigen Feldern. Ein :invalid-Zustand kaeme hier nicht in Frage -
   das Feld ist optional und damit nie ungueltig. */
.page-einblick .einblick-field__select option[value=""] {
  color: #68645f;
}

.page-einblick .einblick-field__textarea {
  min-height: 128px;
  height: auto;
  resize: vertical;
  line-height: 1.6;
}

.page-einblick .einblick-field__input:focus {
  outline: 0;
  border-bottom-color: var(--color-accent);
}

/* --- Kontaktdaten -------------------------------------------------------- */
.page-einblick .einblick-contact {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 24px;
  margin-top: 8px;
}

@media (min-width: 768px) {
  .page-einblick .einblick-contact {
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    row-gap: 28px;
  }

  .page-einblick .einblick-field--full {
    grid-column: 1 / -1;
  }}

/* --- Honeypot ------------------------------------------------------------ */
.page-einblick .einblick-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Datenschutz --------------------------------------------------------- */
.page-einblick .einblick-consent {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
}

/* Das Kaestchen wird selbst gezeichnet statt vom Betriebssystem. Nur so
   laesst sich sein Rahmen ansprechen: accent-color faerbt allein den
   gesetzten Haken, der graue Rahmen eines nativen Kaestchens bleibt davon
   unberuehrt. Ruhezustand wie die Feldlinien darueber - 1px in #89857e.
   Der Haken ist eine ausgestanzte Flaeche, kein Zeichen und keine Datei. */
.page-einblick .einblick-consent__box {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin: 0;
  display: grid;
  place-content: center;
  border: 1px solid #89857e;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  transition: border-color 150ms ease;
}

.page-einblick .einblick-consent__box::before {
  content: "";
  width: 13px;
  height: 13px;
  background: var(--color-accent);
  clip-path: polygon(14% 46%, 0 60%, 39% 100%, 100% 22%, 86% 8%, 39% 71%);
  transform: scale(0);
  transition: transform 120ms ease;
}

.page-einblick .einblick-consent__box:checked::before {
  transform: scale(1);
}

/* Fehlende Einwilligung: derselbe Rotton wie die Meldung darunter und die
   Unterkante fehlerhafter Felder, dazu die doppelte Staerke. form.js setzt
   aria-invalid, sobald die Pruefung anschlaegt, und nimmt es beim naechsten
   Versuch wieder weg - die Auszeichnung braucht deshalb keine eigene
   Klasse. */
.page-einblick .einblick-consent__box[aria-invalid="true"] {
  border-width: 2px;
  border-color: #A32F1E;
}

@media (prefers-reduced-motion: reduce) {
  .page-einblick .einblick-consent__box,
  .page-einblick .einblick-consent__box::before {
    transition: none;
  }
}

.page-einblick .einblick-consent__text {
  font-size: 15px;
  line-height: 1.5;
  color: #24231f;
}

.page-einblick .einblick-consent__text a {
  color: var(--color-accent);
}

/* Beide Hinweise beginnen auf derselben linken Kante wie Formularfelder und
   Schaltflaeche, nicht mittig. */
.page-einblick .einblick-note {
  margin: 20px 0 0;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  color: #68645f;
}

.page-einblick .einblick-required {
  margin: 16px 0 0;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  color: #68645f;
}

/* --- Turnstile ----------------------------------------------------------- */
/* Der Container steht zwischen Einwilligung und Absendeschaltflaeche. Im
   Regelfall bleibt er unsichtbar: appearance="interaction-only" laesst ihn auf
   Hoehe null zusammenfallen, er enthaelt dann nur ein leeres div. Ein fester
   Abstand haette deshalb dauerhaft eine Luecke ins Formular gerissen.

   Blendet Managed doch eine Aufgabe ein, erzeugt Turnstile dafuer ein iframe.
   Erst dann greift der Abstand nach oben - sonst saesse die Aufgabe buendig am
   Einwilligungsblock, waehrend nach unten 48px stehen.

   Browser ohne :has() bekommen keinen Abstand; das entspricht dem Verhalten
   vor dieser Regel und bricht nichts. */
.page-einblick .einblick-turnstile:has(iframe) {
  margin-top: 32px;
}

.page-einblick .einblick-turnstile iframe {
  max-width: 100%;
}

/* --- CTA ----------------------------------------------------------------- */
.page-einblick .einblick-cta {
  margin: 48px 0 0 0;
  width: 360px;
  max-width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border: 0;
  /* Dieselbe Eckenrundung wie die Bilder der Startseite. */
  border-radius: 3px;
  background: var(--color-accent);
  color: #f2f0eb;
  font-size: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.page-einblick .einblick-cta__arrow {
  display: block;
  width: 20px;
  height: auto;
  flex: none;
}

.page-einblick .einblick-cta:focus-visible {
  outline: 1px solid #f2f0eb;
  outline-offset: 3px;
}

.page-einblick .einblick-status[hidden] {
  display: none;
}

.page-einblick .einblick-status {
  margin: 16px 0 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: #68645f;
}

/* /einblick/: Reihenfolge der bedingten Bloecke. Bei „Persoenliche
   Empfehlung" steht das Empfehlungsfeld vor der Fortfahren-Gruppe, bei
   „Interesse am 419" dahinter. Nur diese beiden Elemente bilden den
   Flex-Kontext, damit das uebrige Formularlayout unveraendert bleibt. */
.page-einblick .einblick-conditional-group {
  display: flex;
  flex-direction: column;
}

.page-einblick .einblick-referral {
  order: 1;
}

.page-einblick .einblick-choice--request {
  order: 2;
}

.page-einblick .einblick-form.is-interest-419 .einblick-choice--request {
  order: 1;
}

.page-einblick .einblick-form.is-interest-419 .einblick-referral {
  order: 2;
}

/* /einblick/: Hinweis unter der Fortfahren-Gruppe */
.page-einblick .einblick-choice__note {
  margin: 12px 0 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: #68645f;
}

/* Auswahlflaechen nach Vorgabe */
.page-einblick .einblick-option {
  min-height: 56px;
  border: 1px solid #c7c2ba;
  background: #f3f0ea;
}

.page-einblick .einblick-option:has(.einblick-option__input:checked) {
  background: #d8d4ce;
  border-color: #c7c2ba;
  box-shadow: inset 0 2px 5px rgba(37, 35, 33, 0.12);
}
/* Fehlerzustand der Formularfelder: rote Markierung und Meldung. Die Logik
   setzt aria-invalid und aria-describedby, die Darstellung haengt daran. */
.page-einblick .einblick-field__input[aria-invalid="true"] {
  border-bottom-color: #A32F1E;
}

.page-einblick .einblick-error {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #A32F1E;
}

/* Die Einwilligung ist ein zweispaltiges Raster: 18px fuer das Kaestchen,
   der Rest fuer den Text. form.js haengt die Fehlermeldung an dieses Raster
   an, sie wurde dadurch zum dritten Rasterelement und landete in der
   naechsten Zeile in der 18px schmalen ersten Spalte - gemessen 18px breit
   ueber fuenf Zeilen. Sie bekommt deshalb eine eigene Zeile ueber beide
   Spalten. */
.page-einblick .einblick-consent > .einblick-error {
  grid-column: 1 / -1;
}

/* ==========================================================================
   Kontaktblock unmittelbar vor dem Formular (Phase 2), linksbuendiges
   Raster: Seitenabstand 24/64/120px, Textbreite 100%/620/680px.
   ========================================================================== */
.page-einblick .einblick-intro {
  padding: 72px 0 64px;
  text-align: left;
}

.page-einblick .einblick-intro > .section-label,
.page-einblick .einblick-intro > .section-title,
.page-einblick .einblick-intro > .lead {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.page-einblick .einblick-intro > .lead {
  margin-top: 0;
  margin-bottom: 0;
}

/* Beide Saetze bilden einen zusammenhaengenden Block: Der Abstand zwischen
   ihnen ist derselbe Zeilenabstand wie innerhalb eines Absatzes (29px aus
   .page .lead), nicht der groessere Absatzabstand. Sie lesen sich dadurch wie
   ein einziger umgebrochener Absatz - wie der Introtext der Startseite. */
.page-einblick .einblick-intro > .lead + .lead {
  margin-top: 0;
}

@media (min-width: 768px) {
  .page-einblick .einblick-intro {
    padding: 96px 0 80px;
  }

  .page-einblick .einblick-intro > .section-label,
  .page-einblick .einblick-intro > .section-title,
  .page-einblick .einblick-intro > .lead {
    max-width: 620px;
  }}

@media (min-width: 1024px) {
  .page-einblick .einblick-intro {
    padding: 120px 0 96px;
  }

  .page-einblick .einblick-intro > .section-label,
  .page-einblick .einblick-intro > .section-title,
  .page-einblick .einblick-intro > .lead {
    max-width: 680px;
  }}

/* ==========================================================================
   Die Seite beginnt ohne Hero unmittelbar mit "Kontakt / Interesse am 419.".
   Der obere Innenabstand enthaelt die Hoehe der fixierten Navbar (72px mobil,
   88px ab 768px); sichtbar bleiben darunter 112px mobil und 160px im Desktop
   - dasselbe Mass wie auf den rechtlichen Seiten.
   ========================================================================== */
.page-einblick .einblick-intro {
  padding-top: calc(var(--nav-h) + var(--page-top-gap));
}

/* Auf der Kontaktseite fuehrt der Navbar-CTA auf die Seite selbst; er wird
   deshalb hier ausgeblendet. Die Regel liegt ueber der breitenabhaengigen
   Einblendung aus navigation.css. */
body:has(.page-einblick) .site-nav__commission-link {
  display: none;
}

/* Kontaktblock und Formular beginnen auf der gemeinsamen Inhaltsachse -
   derselben linken Kante wie "Ueber uns" und die Sektionen der Startseite.
   Der Seitenabstand 24/64/120px weiter oben wird dadurch ersetzt;
   Ueberschriften, Felder, Schaltflaeche und Hinweise ziehen gemeinsam nach. */
.page-einblick .einblick-form-section {
  padding-inline: var(--content-axis);
}

/* „Ihr Anliegen" steht ausserhalb des Kontaktrasters und lag deshalb ohne
   jeden Abstand unter dem Feld „Land". Es haelt jetzt denselben Abstand zum
   Feld darueber wie die Felder innerhalb des Rasters untereinander - also
   dessen Zeilenabstand. */
.page-einblick .einblick-message {
  margin-top: 24px;
}

@media (min-width: 768px) {
  .page-einblick .einblick-message {
    margin-top: 28px;
  }}

/* Abstand des Formulars zum Footer. */
.page-einblick .einblick-form-section {
  padding-bottom: 48px;
}

@media (min-width: 1024px) {
  .page-einblick .einblick-form-section {
    padding-bottom: 64px;
  }}

/* Die Schaltflaeche ist rund zwei Fuenftel schmaler als zuvor (360 -> 216px);
   Schriftgrad, Abstand und Pfeil sind entsprechend mitgezogen. Die Hoehe
   bleibt bei 44px, der Mindestgroesse einer Trefferflaeche. */
.page-einblick .einblick-cta {
  width: 216px;
  min-height: 44px;
  gap: 14px;
  font-size: 15px;
}

.page-einblick .einblick-cta__arrow {
  width: 16px;
}