/* CEYLAN Corporate-Website — Seitenstile.
   Baut ausschließlich auf den Tokens aus styles.css auf; keine neuen Hexcodes, keine neuen Maße.

   Flächenverhältnis Website 25 Blau / 55 hell / 15 dunkler Pol / 5 Sonderfläche:
   Blau (--surface-brand, --blue-700) trägt die Bänder — Hero, Seitenkopf, Abbinder.
   Der dunkle Pol (--surface-inverse) trägt Kennzahlenband und Fußzeile.
   Lesetext steht ausnahmslos auf heller Fläche.

   Regeln: Radius 0–2 px · Schatten nur auf Produktfotos · Hover über Kante oder Blaustufe ·
   Bewegung 120/240 ms · Fokus 2 px, auf blauen und dunklen Flächen --focus-inverse
   (base.css schaltet ihn über data-tone="inverse" um). */

/* ------------------------------------------------------------------ Layout */

.container{
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--grid-margin);
}

/* Die width/height-Attribute der Bilder reservieren das Seitenverhältnis vor dem Laden
   (kein Layoutsprung). height:auto verhindert, dass das Attribut als feste CSS-Höhe wirkt. */
img{max-width:100%;height:auto}

/* Sprungziele der Ankernavigation nicht unter die Kopfzeile schieben. */
[id]{scroll-margin-top:var(--space-6)}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* Abstände sind ungleich: Sektion 96 px, vor einem Themenwechsel 120 px. */
.section{padding-block:var(--space-11)}
/* Die ruhige helle Fläche des Systems. Der Klassenname stammt aus der ersten Fassung;
   der Wert ist --surface-sunken (--neutral-50), die einzige zweite helle Fläche. */
.section--raised{background:var(--surface-sunken)}
.section--break{padding-block-start:var(--space-12)}
.section--tight{padding-block:var(--space-10)}

.section__head{margin-bottom:var(--space-6)}
.section__head--wide{max-width:70ch}

.eyebrow{
  font-size:var(--text-label);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-brand);
  margin-bottom:var(--space-3);
}
.eyebrow--quiet{color:var(--text-secondary)}
.eyebrow--inverse{color:var(--blue-300)}

.lede{
  font-size:var(--text-h5);
  line-height:var(--leading-body);
  color:var(--text-secondary);
  max-width:68ch;
  margin-top:var(--space-4);
}
.note{
  font-size:var(--text-small);
  line-height:var(--leading-body);
  color:var(--text-secondary);
  max-width:75ch;
}
.note--inverse{color:var(--text-muted-inverse)}
/* Abstände sind ungleich: innerhalb einer Gruppe --space-4, zwischen Elementen einer
   Sektion --space-6. Die Regeln greifen nur, wenn ein Geschwisterelement vorausgeht —
   als erstes Kind bringt keines der Elemente einen Vorlauf mit. */
* + .note{margin-top:var(--space-4)}
* + .alert{margin-top:var(--space-5)}

.grid{display:grid;gap:var(--grid-gutter)}
* + .grid{margin-top:var(--space-6)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--split{grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:start}
.grid--tiles{grid-template-columns:repeat(3,1fr);gap:var(--space-4)}

/* ------------------------------------------------------------------ Marke */

.claim{
  font-family:var(--font-core);
  font-size:clamp(40px,6.2vw,var(--text-display-xl));
  font-weight:var(--weight-medium);
  line-height:var(--leading-display);
  color:var(--text-brand);
  margin:0;
  padding-block:1.1em;
  text-wrap:balance;
}
.claim--abbinder{
  font-size:var(--text-h2);
  color:var(--text-inverse);
  padding-block:0.9em;
}

/* ------------------------------------------------------------------ Header */

.site-header{
  background:var(--surface);
  border-bottom:var(--border-1) solid var(--border);
  position:relative;
  z-index:var(--z-header);
}
/* Die Kopfzeile trägt nur Wegweiser: Marke, Navigation, Sprache, Shop-Ausgang.
   Erreichbarkeit und Geschäftsbedingungen stehen in der Fußzeile — eine zweite
   Textleiste über der Wortmarke nimmt der Marke den Auftritt, ohne etwas zu leisten. */
.header-main__lang{flex:none}

/* Sprachwahl — Text statt Flagge: eine Flagge bezeichnet einen Staat, keine Sprache. */
/* Umbruch ist Pflicht, nicht Kür: mit den Landingpages stehen hier fünfzehn Codes.
   Ohne flex-wrap läuft die Leiste auf schmalen Geräten aus dem Bild und die hinteren
   Sprachen sind nicht erreichbar. */
.lang{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);list-style:none;margin:0;padding:0}
.lang__item{display:flex}
.lang__link,
.lang__current{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  height:44px;
  padding-inline:var(--space-2);
  font-size:var(--text-label);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  text-decoration:none;
  border:var(--border-1) solid transparent;
  border-radius:var(--radius-1);
  transition:color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out);
}
.lang__link{color:var(--text-secondary)}
.lang__link:hover{color:var(--text-primary);border-color:var(--border-strong)}
.lang__current{color:var(--text-brand);border-color:var(--blue-600)}

.header-main{
  display:flex;
  align-items:center;
  gap:var(--space-7);
  min-height:76px;
}
/* Touch-Ziel 44 px, ohne die Logogröße zu verändern. */
.header-main__logo{display:block;line-height:0;padding-block:var(--space-3)}
.header-main__logo img{height:22px;width:auto;display:block}

.nav{display:flex;gap:var(--space-1);flex:1;flex-wrap:wrap}
.nav__link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding-inline:var(--space-3);
  font-size:var(--text-label);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  text-decoration:none;
  color:var(--text-secondary);
  border-bottom:var(--border-2) solid transparent;
  transition:color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out);
}
.nav__link:hover{color:var(--text-primary);border-bottom-color:var(--border-strong)}
.nav__link[aria-current="true"]{color:var(--text-brand);border-bottom-color:var(--accent)}

.shop-link{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  height:44px;
  padding-inline:var(--space-4);
  font-size:var(--text-label);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  color:var(--text-brand);
  background:var(--surface);
  border:var(--border-1) solid var(--blue-600);
  border-radius:var(--radius-1);
  transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out);
}
.shop-link:hover{background:var(--blue-50);color:var(--accent-hover)}
.shop-link:active{background:var(--blue-100)}

/* ------------------------------------------------------------------ Buttons */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  min-height:44px;
  padding-inline:var(--space-5);
  font-family:var(--font-core);
  font-size:var(--text-small);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
  border:var(--border-1) solid transparent;
  border-radius:var(--radius-1);
  cursor:pointer;
  transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out);
}
.btn--primary{background:var(--accent);color:var(--text-inverse)}
.btn--primary:hover{background:var(--accent-hover);color:var(--text-inverse)}
.btn--primary:active{background:var(--accent-active)}
.btn--secondary{background:var(--surface);color:var(--text-brand);border-color:var(--blue-600)}
.btn--secondary:hover{background:var(--blue-50);color:var(--accent-hover)}
.btn--secondary:active{background:var(--blue-100)}
/* Auf Navy: helle Fläche bzw. Kante in --blue-300 (Kontrast ≥ 4.5:1). */
.btn--on-dark{background:var(--surface);color:var(--text-brand);border-color:var(--surface)}
.btn--on-dark:hover{background:var(--blue-50);color:var(--accent-hover);border-color:var(--blue-50)}
.btn--on-dark-quiet{background:transparent;color:var(--text-inverse);border-color:var(--blue-300)}
.btn--on-dark-quiet:hover{background:var(--blue-800);color:var(--text-inverse);border-color:var(--neutral-0)}

.actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.actions--center{justify-content:center}

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

.hero{background:var(--surface)}
.hero__inner{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:var(--space-8);
  align-items:center;
  padding-block:var(--space-8) var(--space-10);
}
.hero__h1{
  font-size:var(--text-h2);
  font-weight:var(--weight-semibold);
  line-height:var(--leading-heading);
  text-wrap:pretty;
  max-width:26ch;
}
.hero__text{
  font-size:var(--text-h5);
  line-height:var(--leading-body);
  color:var(--text-secondary);
  max-width:60ch;
  margin-top:var(--space-4);
}

/* Produktbühne: ruhige Fläche, 1-px-Kante. Freisteller (PNG) tragen den Produktschatten,
   Fotos mit weißem Karton (JPG/WebP) verschmelzen über multiply — ohne drop-shadow. */
.stage{
  margin:0;
  background:var(--neutral-50);
  border:var(--border-1) solid var(--border);
  border-radius:var(--radius-1);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-6);
  min-height:380px;
}
.stage img{max-width:100%;max-height:380px;width:auto;object-fit:contain;mix-blend-mode:multiply;display:block}
.stage img.is-cutout{mix-blend-mode:normal;filter:drop-shadow(var(--shadow-product-1))}
/* Hochformatiges Gerätefoto: Höhe begrenzt, damit die Sektion in Proportion bleibt. */
.stage--portrait{flex-direction:column;gap:var(--space-4);min-height:0}
.stage--portrait img{max-height:520px}
.stage figcaption{font-size:var(--text-small);color:var(--text-secondary);align-self:flex-start}

/* ------------------------------------------------- Technologiefelder */

.field{
  display:block;
  text-decoration:none;
  background:var(--surface);
  border:var(--border-1) solid var(--border);
  border-top:3px solid var(--blue-600);
  border-radius:var(--radius-1);
  padding:var(--space-5);
  transition:border-color var(--duration-fast) var(--ease-out);
}
.field:hover{border-color:var(--border-strong);border-top-color:var(--blue-600)}
.field__name{
  font-family:var(--font-display);
  font-size:var(--text-h4);
  font-weight:var(--weight-bold);
  color:var(--text-brand);
  line-height:1.2;
}
.field:hover .field__name{color:var(--accent-hover)}
.field__cats{list-style:none;margin:var(--space-3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-1)}
.field__cats li{font-size:var(--text-small);color:var(--text-secondary)}

/* ------------------------------------------------------------------ Cards */

.card{
  background:var(--surface);
  border:var(--border-1) solid var(--border);
  border-radius:var(--radius-1);
  padding:var(--space-5);
}
.card__label{
  font-size:var(--text-label);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-brand);
  margin-bottom:var(--space-2);
}
.card__title{font-size:var(--text-h5);font-weight:var(--weight-semibold);margin-bottom:var(--space-2)}
.card__text{font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-secondary)}
.card dl{margin:var(--space-3) 0 0;font-size:var(--text-small);color:var(--text-secondary)}
.card dt{font-weight:var(--weight-semibold);color:var(--text-primary);margin-top:var(--space-2)}
.card dd{margin:0;font-variant-numeric:var(--numeric-technical)}

/* Jahreszahl als technisches Label (Semi Condensed), nicht als Kennzahl-Modul. */
.card__year{
  font-family:var(--font-display);
  font-size:var(--text-h3);
  font-weight:var(--weight-bold);
  line-height:var(--leading-heading);
  letter-spacing:var(--tracking-display);
  font-variant-numeric:var(--numeric-technical);
  color:var(--text-brand);
  margin-bottom:var(--space-2);
}

/* ------------------------------------------------------- Kategoriekachel */

.tile{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:var(--text-primary);
  background:var(--surface);
  border:var(--border-1) solid var(--border);
  border-radius:var(--radius-1);
  overflow:hidden;
  transition:border-color var(--duration-fast) var(--ease-out);
}
.tile:hover{border-color:var(--border-strong)}
/* Feste Bühnenhöhe statt aspect-ratio: nur eine definite Höhe lässt max-height am Bild greifen,
   und alle neun Kacheln stehen dadurch auf derselben Linie. */
.tile__figure{
  margin:0;
  background:var(--neutral-50);
  height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-4);
  border-bottom:var(--border-1) solid var(--border);
}
.tile__figure img{max-width:85%;max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply;display:block}
.tile__figure img.is-cutout{mix-blend-mode:normal;filter:drop-shadow(var(--shadow-product-1))}
.tile__body{
  padding:var(--space-3) var(--space-4) var(--space-4);
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
  flex:1;
}
.tile__name{
  font-size:var(--text-body);
  font-weight:var(--weight-semibold);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--space-3);
}
.tile__arrow{color:var(--text-brand);flex:none}
.tile:hover .tile__arrow{color:var(--accent-hover)}
.tile__meta{font-size:var(--text-label);color:var(--text-secondary);font-variant-numeric:var(--numeric-technical)}

/* ------------------------------------------------------------------ Badge */

.badge{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding-inline:var(--space-2);
  background:var(--surface-sunken);
  color:var(--text-secondary);
  border:var(--border-1) solid var(--border);
  border-radius:var(--radius-1);
  font-size:var(--text-label);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  white-space:nowrap;
}
.badge--technical{background:var(--surface);color:var(--text-primary);border-color:var(--border-strong)}
/* Reihe technischer Merkmale unter einem Absatz. Innerhalb einer Gruppe gilt --space-2. */
.badge-row{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}

/* ------------------------------------------------------------------ Tabellen */

.table-scroll{overflow-x:auto}
.table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--text-small);
  font-variant-numeric:var(--numeric-technical);
}
.table caption{
  text-align:start;
  font-size:var(--text-label);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-secondary);
  padding-bottom:var(--space-3);
}
.table th,.table td{padding:9px var(--space-4) 9px 0;text-align:start;vertical-align:top}
.table thead th{
  font-size:var(--text-label);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-secondary);
  border-bottom:var(--border-1) solid var(--border-strong);
}
.table tbody tr{border-top:var(--border-1) solid var(--border)}
.table tbody tr:first-child{border-top:0}
.table tbody th{font-weight:var(--weight-semibold);color:var(--text-primary);white-space:nowrap}
.table td{color:var(--text-secondary)}
/* Zahlen rechtsbündig, Bezeichnungen linksbündig; die Spaltenrinne bleibt erhalten,
   nur die letzte Spalte schließt bündig ab. */
.table .num{text-align:end;white-space:nowrap}
.table th:last-child,.table td:last-child{padding-inline-end:0}
.table--models tbody tr:hover{background:var(--surface-sunken)}

/* ------------------------------------------------------------ Kennzahlenband */

/* Kennzahlen sind für einen Technikhersteller das glaubwürdigste Gestaltungsmaterial —
   das Navy-Band trägt sie deshalb mit eigenem Raum, nicht als schmaler Streifen. */
.figure-band{background:var(--surface-inverse)}
.figure-band__grid{
  display:grid;
  /* Vier Spalten für die vier belegten Kennzahlen — eine fünfte Spalte stand leer. */
  grid-template-columns:repeat(4,1fr);
  gap:var(--grid-gutter);
  /* Das Band trägt seine Höhe jetzt selbst — vorher steuerte die Fußnote unter den
     Kennzahlen den unteren Abstand bei. */
  padding-block:var(--space-10);
}
.keyfig{display:flex;flex-direction:column;gap:var(--space-2)}
.keyfig__value{
  font-family:var(--font-display);
  font-size:var(--text-display);
  font-weight:var(--weight-bold);
  line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);
  font-variant-numeric:var(--numeric-technical);
  color:var(--text-inverse);
}
.keyfig__label{
  font-size:var(--text-label);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  line-height:var(--leading-tight);
  color:var(--blue-100);
}
.keyfig__note{font-size:var(--text-small);line-height:var(--leading-body);color:var(--blue-200);max-width:32ch}

/* ------------------------------------------------------------------ Abbinder */

.abbinder{background:var(--blue-700);position:relative;overflow:hidden}
.abbinder__pattern{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:var(--pattern-opacity-negative);
  -webkit-mask-image:linear-gradient(to left,#000 15%,rgba(0,0,0,0) 95%);
  mask-image:linear-gradient(to left,#000 15%,rgba(0,0,0,0) 95%)}
.abbinder__inner{position:relative;padding-block:var(--space-9);text-align:center}
.abbinder__text{font-size:var(--text-body);line-height:var(--leading-body);color:var(--blue-100);max-width:60ch;margin-inline:auto}

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

/* Kontakt gehört thematisch zu Service: gleiche Fläche, dazwischen der Abstand für
   verwandte Sektionen (2 × 40 px = --space-10) mit der 1-px-Kante in der Mitte. */
.contact-band{
  background:var(--surface-sunken);
  border-top:var(--border-1) solid var(--border);
  padding-block:var(--space-7) var(--space-9);
}
.section--pair-end{padding-block-end:var(--space-7)}
.contact__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.contact__item dt{
  font-size:var(--text-label);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-secondary);
  margin-bottom:var(--space-2);
}
.contact__item dd{margin:0;font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-primary);font-variant-numeric:var(--numeric-technical)}
.contact__item a{color:var(--text-brand);text-decoration:none}
.contact__item a:hover{color:var(--accent-hover);text-decoration:underline}

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

.site-footer{background:var(--surface-inverse);color:var(--text-inverse)}
.site-footer__inner{padding-block:var(--space-9) var(--space-7)}
.site-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-7)}
.site-footer__logo{height:22px;width:auto;display:block}
.site-footer__brandtext{font-size:var(--text-small);color:var(--text-muted-inverse);margin-top:var(--space-4);max-width:34ch;line-height:var(--leading-body)}
.site-footer__anchor{font-size:var(--text-label);color:var(--text-muted-inverse);margin-top:var(--space-5)}
.footer-col__head{
  font-size:var(--text-label);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-muted-inverse);
  margin-bottom:var(--space-3);
}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-1)}
/* Eigenständige Linkziele brauchen mindestens 24 px Höhe (WCAG 2.2, 2.5.8).
   Die Zeile misst 17 px — die Innenabstände bringen das Ziel auf 25 px, ohne
   die Fußzeile in die Länge zu ziehen. */
.footer-col a{
  display:inline-block;
  padding-block:var(--space-1);
  color:var(--blue-100);
  text-decoration:none;
  font-size:var(--text-small);
  transition:color var(--duration-fast) var(--ease-out);
}
.footer-col a:hover{color:var(--neutral-0);text-decoration:underline}
.site-footer__legal{
  border-top:var(--border-1) solid var(--border-strong);
  margin-top:var(--space-7);
  padding-top:var(--space-5);
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-4);
  justify-content:space-between;
  font-size:var(--text-label);
  color:var(--text-muted-inverse);
}
.site-footer__legal ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-5)}
/* Die Landingpages der zwölf Zielmärkte. Sie gehören nicht in die Kopfzeile — fünfzehn
   Codes über der Wortmarke wären Lärm. In der Fußzeile bekommen sie den internen
   Verweis, den sie brauchen, um überhaupt gefunden und gecrawlt zu werden. */
.site-footer__langs{margin-bottom:var(--space-5)}
.site-footer__langs ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-5);
}
.site-footer__langs a{
  display:inline-block;
  padding-block:var(--space-1);
  font-size:var(--text-small);
  color:var(--blue-100);
  text-decoration:none;
}
.site-footer__langs a:hover{color:var(--neutral-0);text-decoration:underline}

/* Die Rechtslinks stehen in einer eigenen Zeile und sind Navigation — sie tragen
   deshalb Textfarbe und eigenständige Klickhöhe. Die stillen Angaben darunter
   (Herkunftsanker, Registernummer, Copyright) sind Metadaten, keine Ziele. */
.site-footer__links a{
  display:inline-block;
  padding-block:var(--space-1);
  color:var(--blue-100);
  text-decoration:none;
}
.site-footer__links a:hover{color:var(--neutral-0);text-decoration:underline}
.site-footer__meta{color:var(--text-muted-inverse);font-variant-numeric:var(--numeric-technical)}
/* Auffangregel: Ein Link in der dunklen Fußzeile, den keine speziellere Regel erfasst,
   erbt sonst das Akzentblau und steht mit 1,4:1 auf dem dunklen Pol — unlesbar.
   Diese Zeile verhindert, dass ein neuer Fußzeilenblock in dieselbe Falle läuft. */
.site-footer a{color:var(--blue-100)}
.site-footer a:hover{color:var(--neutral-0)}
/* Social-Profile als Textlinks. Das System zeichnet keine Plattformlogos nach
   (Teil D5), deshalb tragen die Namen selbst — nicht ihre Marken. */
.site-footer__social{margin-top:var(--space-5)}
.site-footer__handle{
  font-size:var(--text-label);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-muted-inverse);
  margin-bottom:var(--space-2);
}
.site-footer__social ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);
}
.site-footer__social a{
  display:inline-block;
  padding-block:var(--space-1);
  font-size:var(--text-small);
  color:var(--blue-100);
  text-decoration:none;
}
.site-footer__social a:hover{color:var(--neutral-0);text-decoration:underline}


/* ------------------------------------------------------------------ Utility */

.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.skip-link{
  position:absolute;
  inset-inline-start:var(--space-4);
  inset-block-start:-100px;
  z-index:var(--z-modal);
  background:var(--surface);
  color:var(--text-brand);
  border:var(--border-2) solid var(--focus);
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding-inline:var(--space-4);
  font-size:var(--text-small);
  font-weight:var(--weight-semibold);
  text-decoration:none;
}
.skip-link:focus{inset-block-start:var(--space-2)}

.figure-plain{margin:0}
.figure-plain img{width:100%;display:block}
/* Bildunterschriften stehen auf --surface, auf --surface-sunken und auf der Produktbuehne.
   --text-secondary (--neutral-500) ist die einzige stille Textstufe des Systems und haelt
   auf allen drei hellen Flaechen ueber 4,5:1. */
.figure-plain figcaption{font-size:var(--text-small);color:var(--text-secondary);margin-top:var(--space-2)}
/* Nebeneinanderstehende Anwendungsfotos auf ein Format bringen — sonst stehen
   Bildkante und Bildunterschrift der beiden Spalten um wenige Pixel versetzt. */
.figure-plain--pair img{aspect-ratio:3/2;height:auto;object-fit:cover}

.rule{border:0;border-top:var(--border-1) solid var(--border);margin-block:var(--space-8)}

/* ------------------------------------------------------------- Breakpoints */
/* xl 1320 · lg 1024 · md 768 · sm 480 — Deutsch ist der Stresstest jeder Zeilenlänge. */

@media (max-width:1024px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .figure-band__grid{grid-template-columns:repeat(2,1fr);row-gap:var(--space-7)}
  .site-footer__grid{grid-template-columns:1fr 1fr;row-gap:var(--space-7)}
  .nav{order:3;flex-basis:100%}
  .header-main{flex-wrap:wrap;gap:var(--space-5);padding-block:var(--space-3)}
}

@media (max-width:768px){
  /* Kopfzeile kompakt halten: Wortmarke und Shop-Ausgang auf eine Zeile, darunter
     Sprache, darunter Navigation. Ohne die Umsortierung drängt sich die Sprachwahl
     zwischen Marke und Hauptaktion und schiebt den Shop-Ausgang in eine eigene Zeile. */
  .header-main{gap:var(--space-3);justify-content:space-between}
  .shop-link{order:1}
  .header-main__lang{order:2;flex-basis:100%}
  .header-main__logo img{height:18px}
  .nav{gap:0;margin-inline:calc(var(--space-2) * -1)}
  .nav__link{padding-inline:var(--space-2)}
  .shop-link{padding-inline:var(--space-3)}

  .section{padding-block:var(--space-10)}
  .section--break{padding-block-start:var(--space-11)}
  .hero__inner{grid-template-columns:1fr;padding-block:var(--space-6) var(--space-9)}
  .grid--2,.grid--3,.grid--split,.grid--tiles{grid-template-columns:1fr}
  .grid--split{gap:var(--space-6)}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .contact__grid{grid-template-columns:1fr;gap:var(--space-6)}
  .hero__h1{font-size:var(--text-h3)}
  h2{font-size:var(--text-h3)}
  h3{font-size:var(--text-h4)}
  .claim--abbinder{font-size:var(--text-h3)}
  .keyfig__value{font-size:var(--text-h2)}
  .stage{min-height:0}
  .stage img{max-height:300px}
  /* Bild im Wechselblock immer nach dem Text */
  .grid--split > .figure-plain,.grid--split > .stage{order:2}
}

@media (max-width:480px){
  .grid--4,.figure-band__grid,.site-footer__grid{grid-template-columns:1fr}
  .grid--tiles{gap:var(--space-3)}
  .actions .btn{width:100%}
}

/* ==================================================================
   Unterseiten — Seitenkopf, Breadcrumb, Sprungnavigation, Fließtext
   ================================================================== */

/* Seitenkopf als Markenband — auf Unterseiten trägt er den Blauanteil, den auf der
   Startseite der Hero trägt. Es steht nur Kopftext darauf (h1 plus Einleitung);
   Fließtext beginnt darunter auf heller Fläche. */
.page-head{background:var(--surface-brand)}
.page-head__inner{padding-block:var(--space-7) var(--space-9)}
.page-head h1{font-size:var(--text-h1);text-wrap:pretty;max-width:28ch;color:var(--text-inverse)}
.page-head .lede{font-size:var(--text-h4);max-width:62ch;color:var(--blue-100)}
/* Landingpage-Kopf mit Kernproduktbild — dieselbe Zweiteilung wie der Hero der
   Startseite. Das Ensemble ist Systembaustein und steht höchstens einmal je Seite. */
.page-head--split .page-head__inner{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:var(--space-8);
  align-items:center;
}

/* Erste Sektion nach dem Seitenkopf: der Kopf bringt seinen Abstand schon mit. */
.section--first{padding-block-start:var(--space-10)}

.breadcrumb{font-size:var(--text-small);margin-bottom:var(--space-5)}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);list-style:none;margin:0;padding:0}
.breadcrumb li{display:flex;align-items:center;gap:var(--space-2)}
.breadcrumb a{display:inline-block;padding-block:var(--space-1);color:var(--text-secondary);text-decoration:none}
.breadcrumb a:hover{color:var(--accent-hover);text-decoration:underline}
.breadcrumb [aria-current="page"]{color:var(--text-primary);font-weight:var(--weight-medium)}
.breadcrumb__sep{color:var(--border-strong)}
/* Auf dem blauen Seitenkopf: Lauftextstufe für Links, Weiß für die aktuelle Seite. */
.page-head .breadcrumb a{color:var(--blue-100)}
.page-head .breadcrumb a:hover{color:var(--text-inverse)}
.page-head .breadcrumb [aria-current="page"]{color:var(--text-inverse)}
.page-head .breadcrumb__sep{color:var(--blue-300)}

/* Sprungnavigation für lange Unterseiten — technische Labels, keine Dekoration. */
.anchor-nav{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6)}
.anchor-nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding-inline:var(--space-4);
  background:var(--surface);
  border:var(--border-1) solid var(--border);
  border-radius:var(--radius-1);
  font-size:var(--text-label);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  text-decoration:none;
  color:var(--text-brand);
  transition:border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out);
}
.anchor-nav a:hover{border-color:var(--border-strong);color:var(--accent-hover)}

/* ------------------------------------------------------------------ Alert */

.alert{
  border:var(--border-1) solid;
  border-radius:var(--radius-1);
  padding:var(--space-3) var(--space-4);
  font-size:var(--text-small);
  line-height:var(--leading-body);
  color:var(--text-primary);
}
.alert--info{background:var(--info-surface);border-color:var(--blue-200)}
.alert--warning{background:var(--warning-surface);border-color:var(--warning)}
.alert__title{font-weight:var(--weight-semibold);margin-bottom:var(--space-1)}
.alert--info .alert__title{color:var(--text-brand)}
.alert--warning .alert__title{color:var(--warning)}
.alert a{color:var(--text-brand)}

/* --------------------------------------------------- Gefasste Datentabelle */

.table--framed{border:var(--border-1) solid var(--border)}
.table--framed thead tr{background:var(--neutral-50)}
.table--framed th,
.table--framed td{padding:10px 12px}
.table--framed thead th{border-bottom:var(--border-1) solid var(--border)}
.table--framed tbody tr{border-top:var(--border-1) solid var(--border)}
.table--framed tbody tr:first-child{border-top:0}
.table--framed th:last-child,
.table--framed td:last-child{padding-inline-end:12px}
.table--framed tbody td{color:var(--text-primary)}

/* ------------------------------------------------- Fließtext (Rechtsseiten) */

.prose{max-width:75ch}
/* Fließtext nach einem Themenwechsel — dort gilt der doppelte Abstand (Teil D3). */
.prose--spaced{margin-top:var(--space-9)}
.prose h2{font-size:var(--text-h3);margin-top:var(--space-9)}
.prose > h2:first-child{margin-top:0}
.prose h3{font-size:var(--text-h4);margin-top:var(--space-6)}
.prose p,
.prose ul,
.prose ol{margin-top:var(--space-4);font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-secondary)}
.prose ul,
.prose ol{padding-inline-start:var(--space-5)}
.prose li + li{margin-top:var(--space-2)}
.prose strong{color:var(--text-primary);font-weight:var(--weight-semibold)}

/* ------------------------------------------- Datenliste (Unternehmensdaten) */

.datalist{
  display:grid;
  grid-template-columns:minmax(180px,auto) 1fr;
  gap:0;
  margin:0;
  font-size:var(--text-small);
  border-top:var(--border-1) solid var(--border);
}
.datalist dt,
.datalist dd{
  padding:9px var(--space-4) 9px 0;
  margin:0;
  border-bottom:var(--border-1) solid var(--border);
}
.datalist dt{font-weight:var(--weight-medium);color:var(--text-secondary)}
.datalist dd{color:var(--text-primary);font-variant-numeric:var(--numeric-technical)}
.datalist a{color:var(--text-brand);text-decoration:none}
.datalist a:hover{color:var(--accent-hover);text-decoration:underline}

/* ------------------------------------------------------- Kontaktkanal-Karte */

.channel{
  background:var(--surface);
  border:var(--border-1) solid var(--border);
  border-top:3px solid var(--blue-600);
  border-radius:var(--radius-1);
  padding:var(--space-5);
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.channel__title{font-size:var(--text-h5);font-weight:var(--weight-semibold)}
.channel__text{font-size:var(--text-small);line-height:var(--leading-body);color:var(--text-secondary)}
.channel__action{margin-top:auto}

/* ------------------------------------------------------ Merkmalliste (Check) */

.featurelist{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;gap:var(--space-2)}
.featurelist li{
  position:relative;
  padding-inline-start:var(--space-5);
  font-size:var(--text-small);
  line-height:var(--leading-body);
  color:var(--text-secondary);
}
.featurelist li::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  inset-block-start:0.55em;
  width:8px;
  height:var(--border-1);
  background:var(--blue-600);
}
.featurelist--2{grid-template-columns:1fr 1fr;column-gap:var(--space-6)}

/* ------------------------------------------------------------ Leerer Zustand */

.empty{
  border:var(--border-1) dashed var(--border-strong);
  border-radius:var(--radius-1);
  padding:var(--space-10) var(--space-5);
  text-align:center;
}
.empty__title{font-size:var(--text-h3);font-weight:var(--weight-semibold)}
.empty__text{font-size:var(--text-body);color:var(--text-secondary);margin:var(--space-3) auto 0;max-width:52ch}

@media (max-width:768px){
  .page-head h1{font-size:var(--text-h2)}
  .page-head .lede{font-size:var(--text-h5)}
  .page-head--split .page-head__inner{grid-template-columns:1fr;gap:var(--space-6)}
  .datalist{grid-template-columns:1fr;border-top:0}
  .datalist dt{border-bottom:0;padding-bottom:0}
  .datalist dd{padding-top:var(--space-1)}
  .featurelist--2{grid-template-columns:1fr}
}

/* ==================================================================
   Struktur nach knowledge/05 — Navy-Hero, Fußzeile mit fünf Spalten,
   Technikbereiche, Abbinderzeile
   ================================================================== */

/* Sektion 1 · Hero als Markenband. Blau ist tragende Fläche des Systems (25 % der
   Website): Hero und Seitenkopf auf --surface-brand, der Abbinder eine Stufe tiefer
   auf --blue-700. Der dunkle Pol bleibt Kennzahlenband und Fußzeile. */
.hero--brand{
  background:var(--surface-brand);
  position:relative;
  overflow:hidden;
}
/* C-Pattern negativ: --blue-300 auf Blau, Deckkraft aus dem Token, Fade zur Inhaltsseite. */
.hero__pattern{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:var(--pattern-opacity-negative);
  -webkit-mask-image:linear-gradient(to left,#000 10%,rgba(0,0,0,0) 90%);
  mask-image:linear-gradient(to left,#000 10%,rgba(0,0,0,0) 90%);
}
.hero--brand .hero__inner{position:relative}
/* Claim auf Blau: weiß, nie Blau auf Blau. */
.claim--hero{color:var(--text-inverse);font-size:clamp(40px,6.2vw,var(--text-display-xl))}
.hero--brand .hero__h1{
  color:var(--text-inverse);
  font-size:var(--text-h4);
  font-weight:var(--weight-medium);
  line-height:var(--leading-body);
  max-width:52ch;
  margin-top:var(--space-2);
}

/* Produktbühne im Navy-Hero: helle Bühne mit Kante, Foto über multiply. */
.stage--hero{min-height:0;padding:var(--space-6)}
.stage--hero img{max-height:340px}

/* Abbinderzeile der Fußzeile (05 §4) — leise gesetzt, nicht in Display-Größe. */
.claim--footer{
  font-size:var(--text-h4);
  color:var(--text-inverse);
  padding-block:0.9em;
  border-top:var(--border-1) solid var(--border-strong);
  margin-top:var(--space-7);
}

/* Technikbereich-Karte mit Kurztext statt Kategorieliste (05 §3). */
.field__text{
  font-size:var(--text-small);
  line-height:var(--leading-body);
  color:var(--text-secondary);
  margin-top:var(--space-3);
}

/* Fußzeile: Markenspalte plus vier Inhaltsspalten (05 §4). */
.site-footer__grid{grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr}
.site-footer__brand{max-width:34ch}
.site-footer__legal{flex-direction:column;gap:var(--space-2);align-items:flex-start}
.site-footer__legal p{margin:0}
.footer-col li{color:var(--text-muted-inverse);font-size:var(--text-small);line-height:var(--leading-body)}
.footer-col li a{color:var(--blue-100)}

@media (max-width:1024px){
  .site-footer__grid{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:768px){
  .hero--brand .hero__h1{font-size:var(--text-h5)}
  .claim--footer{font-size:var(--text-h5)}
  .stage--hero img{max-height:260px}
  .site-footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .site-footer__grid{grid-template-columns:1fr}
}

/* ==================================================================
   Formular — Label über dem Feld, kein Placeholder als Label,
   Funktionskante auf --border-strong (dekorative --border hält keine 3:1)
   ================================================================== */

.form{margin-top:var(--space-6);max-width:56rem}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.formfield{margin:0 0 var(--space-4)}
.formfield__label{
  display:block;
  font-size:var(--text-label);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-primary);
  margin-bottom:var(--space-2);
}
.input{
  display:block;
  width:100%;
  min-height:44px;
  padding:var(--space-2) var(--space-3);
  font-family:var(--font-core);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  color:var(--text-primary);
  background:var(--surface);
  border:var(--border-1) solid var(--border-strong);
  border-radius:var(--radius-1);
  transition:border-color var(--duration-fast) var(--ease-out);
}
.input:hover{border-color:var(--text-primary)}
.input:focus-visible{border-color:var(--accent)}
.textarea{min-height:0;resize:vertical}
/* Spamfalle: für Menschen unsichtbar, für Formularroboter ein ausfüllbares Feld.
   Nicht display:none — das überspringen viele Roboter gezielt. */
.form__honeypot{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}

/* Sprachleiste der Landingpages: nur Logo und Sprachwahl, keine Hauptnavigation. */
.lang-bar{margin-inline-start:auto}
/* Der Claim steht auf der Landingpage über dem h1 und bleibt kleiner als im Hero. */
.claim--landing{
  color:var(--text-inverse);
  font-size:clamp(28px,4vw,var(--text-h2));
  padding-block:0 0.6em;
}

@media (max-width:768px){
  .form__row{grid-template-columns:1fr;gap:0}
}

/* ==================================================================
   Historie — Zeitleiste, Entwicklungslinie, Leitsatz
   ================================================================== */

/* Leitsatz einer Sektion. Nicht der Master Claim — der bleibt der Startseite
   (Hero und Abbinder) vorbehalten und wird nie im Fließtext erklärt. */
.statement{
  font-size:var(--text-h3);
  font-weight:var(--weight-medium);
  line-height:var(--leading-heading);
  color:var(--text-primary);
  max-width:36ch;
  text-wrap:balance;
}

/* Zeitleiste: Jahr als technisches Label, daneben Text, daneben Bild. Getrennt wird
   über 1-px-Kanten — keine Achse, keine Punkte, keine Verbindungsgrafik. */
.timeline{
  list-style:none;
  margin:var(--space-6) 0 0;
  padding:0;
  border-top:var(--border-1) solid var(--border);
}
.timeline__item{
  display:grid;
  grid-template-columns:minmax(110px,140px) minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-6);
  align-items:start;
  padding-block:var(--space-7);
  border-bottom:var(--border-1) solid var(--border);
}
.timeline__year{
  font-family:var(--font-display);
  font-size:var(--text-h3);
  font-weight:var(--weight-bold);
  line-height:var(--leading-heading);
  letter-spacing:var(--tracking-display);
  font-variant-numeric:var(--numeric-technical);
  color:var(--text-brand);
}
.timeline__title{font-size:var(--text-h4);font-weight:var(--weight-semibold)}
.timeline__text{
  font-size:var(--text-body);
  line-height:var(--leading-body);
  color:var(--text-secondary);
  margin-top:var(--space-3);
  max-width:58ch;
}
.timeline__figure{margin:0}
.timeline__figure img{width:100%;display:block}
/* Freisteller stehen nie konturlos auf Weiß, sondern auf einer Bühne mit 1-px-Kante;
   nur sie tragen den Produktschatten. */
.timeline__figure--stage img{
  background:var(--surface-sunken);
  border:var(--border-1) solid var(--border);
  padding:var(--space-3);
  /* Nahe am Format der Archivaufnahmen, damit die Stationen im gleichen Rhythmus stehen —
     etwas höher, weil der Freisteller sonst in der Bühne verschwindet. */
  aspect-ratio:3 / 2;
  object-fit:contain;
  filter:drop-shadow(var(--shadow-product-1));
}
.timeline__figure figcaption{
  font-size:var(--text-small);
  line-height:var(--leading-body);
  color:var(--text-secondary);
  margin-top:var(--space-2);
}
/* Station ohne Bild: der Text nimmt beide Inhaltsspalten. */
.timeline__item--wide .timeline__body{grid-column:2 / -1}

/* Entwicklungslinie (Datei 3 · Teil F3): sieben Stationen vom Motor bis zur
   Messergeometrie. Die Reihenfolge trägt die Aussage, deshalb nummeriert. */
.devline{
  list-style:none;
  margin:var(--space-6) 0 0;
  padding:0;
  display:grid;
  /* Feste Spaltenzahl statt auto-fit: sieben Stationen in einer Reihe, darunter
     4+3 und 2er-Paare — auto-fit ließe unausgewogene Umbrüche wie 5+2 entstehen. */
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:var(--space-3);
}
.devline__step{
  border-top:var(--border-2) solid var(--blue-600);
  padding-top:var(--space-3);
}
.devline__no{
  display:block;
  font-family:var(--font-display);
  font-size:var(--text-label);
  font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-label);
  font-variant-numeric:var(--numeric-technical);
  color:var(--text-secondary);
}
.devline__name{
  display:block;
  font-family:var(--font-display);
  font-size:var(--text-h5);
  font-weight:var(--weight-semibold);
  line-height:var(--leading-tight);
  color:var(--text-brand);
  margin-top:var(--space-1);
  hyphens:auto;
}

@media (max-width:1024px){
  .devline{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:768px){
  .timeline__item{grid-template-columns:1fr;gap:var(--space-4);padding-block:var(--space-6)}
  .timeline__item--wide .timeline__body{grid-column:auto}
  .timeline__year{font-size:var(--text-h4)}
  .statement{font-size:var(--text-h4)}
  .devline{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ------------------------------------------------- Cookie-Erklärung (Cookiebot)

   Das Banner selbst bringt Cookiebot mit; Aussehen und Reihenfolge der Schaltflächen
   werden im Cookiebot-Dashboard eingestellt (siehe README). Hier nur so viel, dass die
   eingebettete Cookie-Liste zur Seite passt: Systemschrift, Kanten, keine Rundungen. */
.cookie-declaration{margin-top:var(--space-5)}
.cookie-declaration,
.cookie-declaration *{font-family:var(--font-core) !important}
.cookie-declaration table{width:100%;border-collapse:collapse;font-size:var(--text-small)}
.cookie-declaration th,
.cookie-declaration td{
  text-align:start;
  padding:9px var(--space-4) 9px 0;
  border-bottom:var(--border-1) solid var(--border);
  vertical-align:top;
}
.cookie-declaration th{color:var(--text-secondary);font-weight:var(--weight-semibold)}
.cookie-declaration .CookieDeclarationType{
  border:var(--border-1) solid var(--border);
  border-radius:var(--radius-1);
  padding:var(--space-4);
  margin-bottom:var(--space-5);
}
.cookie-declaration a{color:var(--text-brand)}
.cookie-declaration .CookieDeclarationTypeHeader{
  font-size:var(--text-h5);
  font-weight:var(--weight-semibold);
  color:var(--text-primary);
}

/* Der Consent-Dialog von Cookiebot: nur Schrift und Kante angleichen. */
#CybotCookiebotDialog,
#CybotCookiebotDialog *{font-family:var(--font-core) !important}
#CybotCookiebotDialog{border-radius:var(--radius-2) !important}
#CybotCookiebotDialog a,
#CybotCookiebotDialog button{border-radius:var(--radius-1) !important}