/* iTvisory – Startseite „Entwurf 1“.
   Farben über tokens.css (Rollen --surface, --text, --text-muted …).
   Switch-Dateien unter /assets/itvisory-switch/v8.1/ bleiben unverändert. */

/* ---------- Grundlagen ---------- */

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

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

body {
  margin: 0;
  background: #F1ECE3;
  color: #203945;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

[class*="band-"] { background: var(--surface); color: var(--text); }

img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; color: var(--text); }
p { margin: 0; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 1px; }

[id] { scroll-margin-top: 24px; }

.wrap { width: var(--wrap); margin-inline: auto; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 18px; background: #203945; color: #F1ECE3;
  font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: 16px; outline-color: var(--accent); }

/* ---------- Logo (Satoshi-Bold-Konturen, i-Punkt #F46A28) ---------- */

.logo { display: block; height: 40px; width: auto; }   /* Header; mobil 36 px */
@media (max-width: 767px) { .site-header .logo { height: 36px; } }
.logo--primaer { color: #203945; }
.logo--negativ { color: #F1ECE3; }

/* ---------- Überschriften ---------- */

.headline {
  font-family: var(--font-headline);
  font-weight: 400;
  letter-spacing: -.015em;
}

.eyebrow {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
  color: var(--text-muted);
  font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--accent); flex: none; }

.section-title {
  max-width: 20ch;
  text-wrap: balance;   /* ältere Browser: normaler Umbruch */
  font-size: clamp(32px, 3.3vw, 52px);
  line-height: 1.08;
}
/* Leistungs-Überschrift: fester Umbruch nach „Sechs Bausteine.“ (br in der Vorlage).
   Damit „Ein durchdachtes Ganzes.“ auch schmal in einer Zeile bleibt (≈ 11,2 em breit),
   wird nur diese Überschrift unter ca. 410 px kleiner (390 px: 30 px statt 32 px). */
#leistungen-title { max-width: none; font-size: min(clamp(32px, 3.3vw, 52px), calc((100vw - 48px) / 11.4)); }


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

/* Outline-Button: 1 px Rahmen in Textfarbe, Versalien, Laufweite 2,5 px.
   Hover und Fokus: gefüllt, Text invertiert. */
.button {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
  min-height: 52px; padding: 14px 24px;
  border: 1px solid var(--text); border-radius: 0;
  background: transparent; color: var(--text);
  font: 700 13px/1.2 var(--font); letter-spacing: 2.5px; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color 200ms, color 200ms;
}
.button:hover, .button:focus-visible { background: var(--text); color: var(--surface); }
.button .arrow { font-size: 20px; font-weight: 400; letter-spacing: 0; line-height: 1; }
.button--wide { width: 326px; max-width: 100%; }
.button--compact { min-height: 44px; padding: 10px 18px; font-size: 12px; letter-spacing: 2px; gap: 14px; }

.text-link {
  font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.text-link:hover { text-decoration-thickness: 3px; }

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

.site-header {
  position: relative; z-index: 10;
  width: var(--wrap); height: 110px; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}

.brand { display: block; text-decoration: none; }
/* Logo als Link zur Startseite erkennbar: leichte Aufhellung bei Hover und Fokus (Fokusrahmen global) */
.brand .logo { transition: filter .2s ease; }
.brand:hover .logo, .brand:focus-visible .logo { filter: brightness(1.18); }
@media (prefers-reduced-motion: reduce) { .brand .logo { transition: none; } }

.site-nav { display: flex; align-items: center; gap: clamp(24px, 2.4vw, 42px); }
.site-nav ul { display: flex; gap: clamp(20px, 2.2vw, 38px); margin: 0; padding: 0; list-style: none; }
.site-nav ul a {
  display: inline-block; padding-block: 8px;
  font-size: 15px; text-decoration: none; text-underline-offset: 6px;
}
.site-nav ul a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

/* Unter 768 px ersetzt ein kleiner Outline-Button „Kontakt“ die Navigation (kein Menü);
   Leistungen bleiben über den Hero-Link „Leistungen ansehen“ erreichbar. */
.header-kontakt { display: none; }

@media (max-width: 1023px) {
  .site-header { height: 82px; }
}
@media (max-width: 767px) {
  .site-nav { display: none; }
  .header-kontakt { display: inline-flex; }
}

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

/* Höhe ergibt sich aus dem Inhalt (keine Mindesthöhe). Bis 1041 px steht der Textblock
   mittig zur sichtbaren Switch-Zeichnung (siehe .hero-copy margin-top), ab 1042 px oben bündig
   mit der Symbolreihe (siehe unten). */
.hero-intro {
  position: relative;
  display: grid; grid-template-columns: 40% 60%;
  width: var(--wrap); margin: auto;
  align-items: center;
}

/* Die beschnittene Bildbox reicht von y = 104 bis 802 (viewBox 900), die
   sichtbare Zeichnung von 136 (Icons) bis 801,5 (Schatten): Mitte 15,75
   Einheiten tiefer. Bei zentrierter Ausrichtung verschiebt ein oberer Margin
   von 2 × Versatz die Textmitte dorthin; 2 × 0,0175 × 0,887 × Spaltenbreite
   ergibt rund 1,8vw, ab 1808 px konstant 34 px. */
.hero-copy { position: relative; z-index: 1; align-self: center; margin-top: min(1.8vw, 34px); }

.headline-rule { display: block; width: 48px; height: 3px; margin-bottom: 28px; background: var(--accent); }

.hero-copy h1 { margin: 0 0 24px; font-size: clamp(50px, 4.9vw, 82px); line-height: 1.03; text-wrap: balance; }

.hero-copy .subline {
  max-width: 30em; margin: 0 0 32px;
  color: var(--text-muted);
  font-size: clamp(17px, 1.35vw, 21px); line-height: 1.5;
}

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }

/* Platzierung der Zeichnung wie in der freigegebenen V7-Referenz; die
   V8.1-Zeichnung hat dieselbe viewBox 1400 × 900. Mobil gilt switch.css. */
.hero-art { width: calc(100% + 70px); margin-left: -50px; align-self: center; }
@media (min-width: 768px) {
  /* Transparente Rasterränder ausgleichen, ohne Raster, Overlay oder
     Registrierung zu ändern (Werte siehe VERSIONEN.md): Bildhöhe = 0,8871 ×
     Breite von .switch-crop; oben bis y = 104/900 (über den Port-Trefferflächen
     bei 112), unten ab y = 1604/1800 (Ende des Schattens) beschnitten. */
  .hero-art .switch-stage { width: 138%; margin-left: -19%; margin-top: -10.25%; margin-bottom: -9.66%; }
}

/* Zwischen 1280 und 1599 px läge die senkrechte Netzwerke-Linie bei 40/60
   zu nah am Link „Leistungen ansehen“ (1440 px: 13 px). Die breitere
   Textspalte (wie im Tablet-Raster) schafft dort mindestens 40 px Luft,
   ohne einzelne Switch-Elemente zu verschieben. Seit ITVW-17 steht die
   äußerste linke Linie (Arbeitsplatz) weiter rechts; das Raster bleibt
   unverändert, damit sich das Hero-Layout nicht verschiebt. */
@media (min-width: 1280px) and (max-width: 1599px) {
  .hero-intro { grid-template-columns: 43% 57%; }
}
/* Bis 1419 px reicht auch das nicht für eine einzeilige CTA-Zeile: Link
   unter den Button setzen (wie bei schmaleren Breiten ohnehin). */
@media (min-width: 768px) and (max-width: 1419px) {
  .hero-actions { flex-direction: column; align-items: flex-start; }
}

@media (min-width: 1800px) {
  .hero-art { margin-left: -20px; }
}

/* Ab 1042 px (Auftrag Simon, 21.10.2026): Oberkante der Symbolreihe (Zeichnung y = 136 von 900) auf Höhe
   des orangen Strichs über der H1. Beide Spalten oben ausgerichtet statt mittig; die Bühne beginnt am
   Beschnitt (y = 104), die Symbole liegen 136/900 × 0,8871 − 0,1025 = 0,03156 Bildbreiten tiefer, um so
   viel rückt .hero-art nach oben (Prozent der Rasterspalte; Bildbreite = Spalte + 70 px, bis 1279 px
   + 35 px). Der Strich steht clamp(24px, min(15vw − 144px, 3,05vw), 48px) unter der Navigation (1042 px:
   24, 1280 px: 39, 1440 px: 44, 1920 px: 48 px; seit 21.10.2026 kleiner, vorher 72 px bei 1440 px, nirgends
   größer als zuvor); der Hero wird um denselben Betrag kürzer. Tablet und mobil unverändert. */
@media (min-width: 1042px) {
  .hero-intro { align-items: start; padding-top: clamp(24px, min(15vw - 144px, 3.05vw), 48px); }
  .hero-copy { align-self: start; margin-top: 0; }
  .hero-art { align-self: start; margin-top: calc((100% + 70px) * -.03156); }
}
@media (min-width: 1042px) and (max-width: 1279px) {
  .hero-art { margin-top: calc((100% + 35px) * -.03156); }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .hero-intro { grid-template-columns: 43% 57%; }
  .hero-copy h1 { font-size: 56px; }
  .hero-copy .subline { font-size: 17px; }
  .hero-art { margin-left: -20px; width: calc(100% + 35px); }
}

@media (max-width: 767px) {
  .hero-intro { display: flex; flex-direction: column; width: 100%; }
  .hero-copy { width: 100%; margin-top: 0; padding: 30px 24px 10px; }
  .headline-rule { margin-bottom: 22px; }
  .hero-copy h1 { font-size: clamp(42px, 12.5vw, 54px); line-height: 1.05; margin-bottom: 22px; }
  .desktop-break { display: none; }
  .hero-actions .button--wide { width: 100%; max-width: 340px; }
  .hero-art { width: calc(100% - 32px); margin: 0 16px; }
}

/* Dunkle Variante: ruhige, gerade Kante zum hellen Leistungsbereich.
   Ab 768 px 88 px unter der sichtbaren Unterkante der Zeichnung. */
.hero-band.band-dark { padding-bottom: clamp(24px, 3vw, 48px); }
@media (min-width: 768px) { .hero-band.band-dark { padding-bottom: 88px; } }

/* ---------- Leistungen ---------- */

.leistungen { padding: 22px 0 clamp(64px, 8vw, 112px); }
.hero-band.band-light + .leistungen { margin-top: clamp(-63.2px, calc(-3.028vw - 8.46px), -47.2px); }
.hero-band.band-dark + .leistungen { padding-top: clamp(56px, 6vw, 96px); }
/* Ab 1042 px (21.10.2026): unten ca. 76 px von der sichtbaren Unterkante des Switches (Zeichnung y 762 von 900;
   der Bildbeschnitt endet bei 802, das sind 40 Einheiten = 0,0217 × Fensterbreite tiefer) bis zum Hero-Ende,
   statt 88 px ab dem Beschnitt. Der Textblock ergänzt so viel, dass die Buttons mindestens 64 px über dem
   Hero-Ende bleiben. Abschnitt „Leistungen“ beginnt 64 px über der Eyebrow (vorher 6vw). */
@media (min-width: 1042px) {
  .hero-band.band-dark { padding-bottom: calc(75px - 2.17vw); }
  .hero-copy { padding-bottom: calc(2.17vw - 11px); }
  .hero-band.band-dark + .leistungen { padding-top: 64px; }
}

.leistungen-head { position: relative; z-index: 1; margin-bottom: clamp(28px, 3vw, 48px); }

/* Ruhiger Satz unter den Karten: ohne Fläche, ohne Icon, linksbündig */
.leistungen-note {
  max-width: 62ch; margin-top: clamp(28px, 3vw, 44px);
  color: #4B6470; font-size: 17px; font-weight: 400; line-height: 1.55;
}

@media (max-width: 767px) {
  .hero-band.band-light + .leistungen { margin-top: 0; padding-top: 24px; }
}

/* ---------- Abschluss (dunkel), Variante D: Einladung, Kontakt, Firma, Orte; Fußzeile ---------- */

.abschluss { padding-top: clamp(80px, 9vw, 136px); }

/* Unter 1024 px einspaltig in DOM-Reihenfolge: Einladung, Kontakt, Firma, Orte */
.abschluss-grid { display: grid; gap: 40px; }

@media (min-width: 1024px) {
  /* Zwei gleich breite Spalten: "einladung firma" / "orte kontakt" */
  .abschluss-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "einladung firma" "orte kontakt";
    /* Zeilenabstand so, dass der Kontakt ca. 52 px unter dem Absenderblock beginnt;
       die H2 links ist höher als der Absenderblock, Orte und Kontakt bleiben oben bündig. */
    column-gap: 80px; row-gap: 28px; align-items: start;
  }
  .abschluss-einladung { grid-area: einladung; }
  .abschluss-kontakt { grid-area: kontakt; }
  .absender { grid-area: firma; }
  /* Orte unten bündig mit der Kontaktspalte: Die Ortsnamen enden auf Höhe der
     E-Mail-Zeile, unabhängig davon, wie hoch der Ansprechpartner-Block ist. */
  .orte { grid-area: orte; align-self: end; }

  /* Grundlinie des Logo-Schriftzugs auf der Grundlinie der ersten H2-Zeile.
     H2-Grundlinie = 31 px (orange Linie 3 px + 28 px) + 0,775 × Schriftgröße
     (Newsreader: Oberlänge 0,735, Unterlänge 0,265, Zeilenhöhe 1,08);
     Logo-Grundlinie = 0,7551 × 44 px = 33,22 px. */
  .absender { margin-top: calc(clamp(32px, 3.3vw, 52px) * 0.775 - 2.22px); }
  .absender-firma { align-self: flex-start; }
  .absender-partner { align-self: center; }

  /* Orte als enges Paar (24 px), zusammen max. 600 px, linksbündig */
  .abschluss-grid .orte { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 600px; }
}

/* 1024–1439 px: Partnerzeilen brechen um, der Absenderblock ist höher als die
   H2; dann wirkt der Zeilenabstand direkt zwischen Absender und Kontakt. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .abschluss-grid { row-gap: 52px; }
}

/* Kontakt */
.contact-person-label {
  color: var(--text-muted); font-size: 11px; font-weight: 500; letter-spacing: 3px; line-height: 1.6; text-transform: uppercase;
}
.contact-person-name { margin-top: 8px; font-size: clamp(20px, 1.6vw, 22px); font-weight: 500; line-height: 1.3; }
.contact-person-rolle { margin-top: 2px; color: var(--text-muted); font-size: 15px; line-height: 1.45; }

.contact-table { margin-top: 20px; border-collapse: collapse; }
/* Ab 1024 px stehen die Orte unten bündig mit dieser Spalte (siehe .orte):
   Die Ortsnamen enden etwa auf Höhe der E-Mail-Zeile (letzte Zelle 6 px Innenabstand). */
.contact-table th, .contact-table td { padding: 6px 0; vertical-align: baseline; text-align: left; }
.contact-table th {
  padding-right: 28px;
  color: var(--text-muted); font-size: 11px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase;
}
.contact-link {
  font-size: clamp(21px, 1.9vw, 26px); font-weight: 500; line-height: 1.3;
  text-decoration: underline; text-decoration-color: rgba(241, 236, 227, .35);
  text-decoration-thickness: 1px; text-underline-offset: 7px;
  transition: text-decoration-color 200ms;
}
.contact-link:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.contact-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; text-decoration-color: var(--accent); }

/* Absenderblock [Logo] | [Linie] | [Partnerzeilen], vertikal mittig */
.absender { display: flex; align-items: center; gap: 28px 32px; }
.absender-firma { flex: none; }
.absender-firma .logo { height: 44px; }   /* dominant im Absenderblock, aber kaum größer als das Header-Logo (40 px) */
.absender-name,
.ort figcaption {
  color: var(--text-muted); font-size: 11px; font-weight: 500; letter-spacing: 3px;
  line-height: 1.6; text-transform: uppercase;
}
.absender-name { margin-top: 10px; font-size: 12px; }
.absender-trenner { flex: none; align-self: stretch; width: 1px; background: rgba(241, 236, 227, .25); }
.absender-partner { min-width: 0; }
.partner-titel {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 500; letter-spacing: 3px; line-height: 1.6; text-transform: uppercase;
}
.partner-titel::before { content: ""; width: 24px; height: 2px; background: var(--accent); flex: none; }
.partner-name { margin-top: 6px; font-size: 17px; font-weight: 400; line-height: 1.4; }
.partner-zusatz { margin-top: 4px; color: var(--text-muted); font-size: 14px; line-height: 1.45; }
.partner-zusatz sup { font-size: .7em; line-height: 0; vertical-align: .55em; }
.partner-zusatz .nowrap { white-space: nowrap; }

/* Ortszeichnungen v1.1 (nach quellen/orte_v1.1/orte.css): Seitenverhältnis 20:9,
   kein Beschnitt; orangefarbener Punkt als HTML auf 50 % / Grundlinie + 6 px.
   Ab 768 px nebeneinander, solange jede Zeichnung mindestens 150 px breit ist (max. 400 px). */
.orte {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 24px; max-width: 824px;   /* 2 × 400 px + Abstand */
}
.ort { margin: 0; min-width: 0; max-width: 400px; }
/* Sichtbare linke Bildkante bündig mit der Textkante: jede Figur um ihren
   transparenten linken Rand verschieben (Reihenfolge Hilter, Freiburg;
   Hilter x = 52, Freiburg x = 51 von 1600). Punkt und Ortsname wandern mit
   und bleiben unter der Bildmitte; der Abstand zwischen den Bildern bleibt 24 px. */
.ort:first-child { transform: translateX(-3.25%); }
.ort:last-child { transform: translateX(-3.1875%); }
.ort-bild { position: relative; aspect-ratio: 20 / 9; }
.ort picture, .ort img { display: block; width: 100%; height: auto; }
.ort-punkt {
  position: absolute; left: 50%; top: calc(91.66666667% + 6px);
  width: 6px; height: 6px; border-radius: 50%;
  transform: translate(-50%, -50%); background: #F46A28;
}
.ort figcaption { margin-top: 14px; text-align: center; }

/* Fußzeile: feine Linie, links ©, rechts Startseite · Impressum · Datenschutz */
.fusszeile {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 32px;
  margin-top: clamp(56px, 6vw, 88px); padding-block: 20px 32px;
  border-top: 1px solid rgba(241, 236, 227, .10);
}
.copyright { color: var(--text-muted); font-size: 16px; }
.fusszeile-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0; padding: 0; list-style: none; font-size: 16px; }
.fusszeile-links a { text-underline-offset: 4px; }
/* Aktuelle Seite: kein Link, nicht unterstrichen, zurückgenommen in --muted-dark (6,65:1) */
.fusszeile-links [aria-current="page"] { color: var(--muted-dark); }

/* < 768 px: Absenderblock untereinander, ohne graue Trennlinie (der orange Strich
   am Partner-Titel bleibt); Ortszeichnungen untereinander, je bis 320 px breit. */
@media (max-width: 767px) {
  .absender { flex-direction: column; align-items: flex-start; gap: 20px; }
  .absender-trenner { display: none; }
  /* Sichtbare Abstände (bis zur Zeichnung selbst, nicht zur Bildbox): Partnerblock →
     Hilter 48 px (Rasterabstand 40 px + 8 px), Ortsname Hilter → Freiburg 32 px.
     Transparente Oberkante (Alpha > 24, 2×-Raster): Hilter 55,42 %, Freiburg 4,86 %
     der Bildhöhe; bei 20:9 entspricht das 24,94 % bzw. 2,19 % der Bildbreite, und
     margin-top in Prozent bezieht sich auf die Breite der Figur. */
  .orte { grid-template-columns: 1fr; gap: 32px; margin-top: 8px; }
  .ort { width: min(100%, 280px); }
  .ort:first-child .ort-bild { margin-top: -24.94%; }
  .ort:last-child .ort-bild { margin-top: -2.19%; }
}

/* ---------- Unterseiten ---------- */

.legal { padding-block: 48px 96px; }
.legal h1 { font-size: clamp(34px, 4vw, 56px); line-height: 1.1; overflow-wrap: break-word; text-wrap: balance; }   /* Trennung über &shy; in build.py */
.legal h2 { overflow-wrap: break-word; }
.legal h2 { margin: 40px 0 10px; font-size: 22px; font-weight: 500; }
.legal p, .legal address, .legal ul { max-width: 68ch; margin-top: 12px; color: var(--text-muted); }
.legal address { font-style: normal; }
.legal ul { padding-left: 1.2em; }
.legal li + li { margin-top: 4px; }
.legal a { text-underline-offset: 3px; }
.legal .legal-date { margin-top: 48px; font-size: 15px; }

/* ---------- Themenleiste der Leistungsseiten (tools/seiten/build.py, themenleiste) ---------- */

/* Auftrag Simon, 20.10.2026: schmale dunkle Leiste direkt unter dem Header, nur auf den sechs
   Unterseiten. Sechs gleich breite Einträge in Switch-Reihenfolge, Icon über Begriff; Icons und
   Zeilen der Begriffe wie über dem Switch, alle Begriffe oben bündig. Die Trennlinie zum Hero ist
   dessen Haarlinie (.leistung-hero::before). Ab 768 px klebt die Leiste beim Scrollen am oberen
   Fensterrand (der Header ist nicht sticky); mobil nur Icons, nicht sticky. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.themenleiste { position: relative; z-index: 9; background: var(--surface); }
.themenleiste-liste {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  width: var(--wrap); margin: 0 auto; padding: 0; list-style: none;
}
.themenleiste a {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 9px;
  height: 100%; padding: 14px 4px 13px;
  color: var(--text); text-decoration: none;
  opacity: .7; transition: opacity .2s ease;
}
.themenleiste a:hover, .themenleiste a:focus-visible { opacity: 1; }
.themenleiste a:focus-visible { outline-offset: -2px; }
.themenleiste .thema-icon { display: block; flex: none; width: 29px; height: 29px; }   /* Feinschliff 20.10.2026: +20 % (vorher 24 px) */
.themenleiste-begriff {
  display: flex; flex-direction: column; align-items: center;
  font-size: 11px; font-weight: 400; line-height: 1.25; letter-spacing: .2em; text-transform: uppercase; text-align: center;
}
/* Platz für den Strich unter dem Begriff bei allen Einträgen, damit die Leiste auf jeder Seite gleich hoch ist */
.themenleiste-begriff { min-height: calc(2 * 1.25em + 9px); }
.themenleiste-begriff::after { content: ""; width: 18px; height: 2px; margin-top: 7px; background: transparent; }
.themenleiste a[aria-current="page"] { opacity: 1; color: var(--text-accent); cursor: default; }
.themenleiste a[aria-current="page"] .themenleiste-begriff::after { background: currentColor; }
@media (min-width: 768px) {
  .themenleiste { position: sticky; top: 0; }
  /* Sprungziele und Abschnittsüberschriften nicht unter der mitlaufenden Leiste (Höhe --leiste-h,
     gemessen 102 px bei Begriffen in 11 px, zwei Zeilen, Icons 29 px) */
  body:has(.themenleiste) { --leiste-h: 102px; }
  body:has(.themenleiste) main :is([id], h2) { scroll-margin-top: calc(var(--leiste-h) + 24px); }
}
@media (max-width: 1023px) {
  /* Begriffe gerendert mindestens 11 px (Feinschliff 20.10.2026), dafür engere Sperrung */
  .themenleiste-begriff { letter-spacing: .12em; }
}
@media (max-width: 767px) {
  .themenleiste-begriff { display: none; }
  .themenleiste a { justify-content: center; gap: 6px; min-height: 52px; padding: 11px 0 9px; }
  body:has(.themenleiste) main :is([id], h2) { scroll-margin-top: 16px; }
  .themenleiste a[aria-current="page"]::after { content: ""; width: 16px; height: 2px; background: currentColor; }
  /* Variante A (Standard, Review 20.10.2026): aktives Thema als kurzes Textlabel unter der Leiste */
  .themenleiste-aktuell {
    display: block; width: var(--wrap); margin: 0 auto; padding: 2px 0 12px;
    color: var(--text-accent); font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; text-align: center;
  }
  /* Variante B (zum Vergleich, Klasse themenleiste--mobil-begriffe): Begriffe 10 px unter allen Symbolen */
  .themenleiste--mobil-begriffe .themenleiste-aktuell { display: none; }
  .themenleiste--mobil-begriffe .themenleiste-begriff {
    display: flex; min-height: 0; font-size: 10px; letter-spacing: .02em; text-transform: none; line-height: 1.2;
  }
  .themenleiste--mobil-begriffe .themenleiste-begriff::after { display: none; }
  .themenleiste--mobil-begriffe a { justify-content: flex-start; gap: 4px; padding: 10px 0 8px; }
}
.themenleiste-aktuell { display: none; }
@media (max-width: 767px) { .themenleiste-aktuell { display: block; } .themenleiste--mobil-begriffe .themenleiste-aktuell { display: none; } }
@media (prefers-reduced-motion: reduce) { .themenleiste a { transition: none; } }

/* ---------- Leistungsseiten (tools/seiten/leistung.html, ITVW-10) ---------- */

/* Hero dunkel: Brotkrume, oranger Strich direkt über der H1, Einleitung; kein Button.
   Referenz Netzwerk & WLAN, Themenmotiv (Raster 2800 × 1800; Gerät x 1402–2799 = ab 50,07 % der Breite,
   Tablet-Unterkante y 1622; Gehäusekante unter den Rippen y 224):
   - ab 768 px oben bündig an der Oberkante des Hero-Bands und rechts bündig am
     Viewport-Rand, Breite --motiv-w (Entscheidung Simon: ca. 62 vw, höchstens 1200 px);
   - „Decke“: Haarlinie über die volle Breite an der Oberkante des Bands, die
     Deckenplatte berührt sie;
   - Hero-Höhe bis 1365 px aus dem Bild: Tablet-Unterkante + 48 px = 0,5793 × --motiv-w
     + 48 px (1622 / 1800 × 9 / 14); sie gilt seit der Vereinheitlichung für alle Seiten;
   - Oberkante H1 = Gehäusekante: 224 / 1800 × 9 / 14 = 0,08 × --motiv-w (für alle Seiten). Darüber
     stehen Brotkrume (21 px), 16 px, Strich (3 px), 24 px = 64 px; die Brotkrume
     hält mindestens 24 px Abstand zur Haarlinie, sonst rückt die H1 tiefer.
     Newsreader: Versalhöhe beginnt 0,005 em unter der Zeilenbox, vernachlässigbar.
   Die Textspalte endet mindestens 64 px vor der linken Gerätekante.
   sizes in tools/seiten/build.py (MOTIVE) folgt --motiv-w und dem Mobilzuschnitt. */
/* Einheitliche Heros (Auftrag Simon, 19.10.2026): Alle Leistungsseiten haben bei gleicher
   Fensterbreite dieselbe Hero-Höhe --hero-h und denselben Textbeginn --text-oben, beides
   aus Netzwerk & WLAN abgeleitet (Werte und Herleitung in tools/seiten/build.py, MOTIVE):
   768–1365 px Tablet-Unterkante + 48 px, ab 1366 px leicht höher als Netzwerk, höchstens
   560 px. Höher wird der Hero nur, wenn ein Text mehr Platz braucht.
   Geometrie je Motiv als Variablen am Hero: Netzwerk --motiv-frei, --motiv-mobil-w/-rechts;
   die übrigen Motive (.leistung-hero--gewichtet) --motiv-q, -km, -kr, -kb, -wq. */
.leistung-hero {
  /* Netzwerk-Bühne bis 1365 px: 62vw, mindestens 613 px, damit die Pointe im Tablet-Layout
     zweizeilig ≥ 11 px bleibt (Variante „zwei-eng“ ab 611 px); die Hero-Höhe folgt ihr */
  --motiv-w: max(62vw, 613px);
  --hero-h: calc(var(--motiv-w) * .5793 + 48px);
  --text-oben: max(24px, calc(var(--motiv-w) * .08 - 64px));
  position: relative; overflow: hidden;
  min-height: var(--hero-h);
}
.leistung-hero::before,
.leistung-motiv::before {
  content: ""; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 1px;
  background: var(--slate); opacity: .65;
}
.leistung-motiv::before { display: none; }
.leistung-hero-inner {
  position: relative; z-index: 1;
  width: var(--wrap); margin-inline: auto;
  padding-top: var(--text-oben);
  padding-bottom: 48px;
}
.leistung-copy {
  /* Linke Gerätekante = 100vw − 0,4993 × --motiv-w; Textbeginn = (100vw − 100 %) / 2 */
  max-width: min(600px, calc((100vw + 100%) / 2 - var(--motiv-w) * var(--motiv-frei) - 64px));
}

.brotkrume { margin-bottom: 16px; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
/* Start · Leistungen · Thema: Liste in einer Zeile, Trenner nur optisch (aria-hidden) */
.brotkrume ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.brotkrume-trenner { padding-inline: .4em; }
.brotkrume a { color: inherit; text-underline-offset: 4px; }
.brotkrume a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.leistung-copy .headline-rule { margin-bottom: 24px; }

.leistung-copy h1 { margin: 0 0 24px; font-size: clamp(44px, 4.6vw, 76px); line-height: 1.04; text-wrap: balance; }
.leistung-einleitung {
  max-width: 30em;
  color: var(--text-muted);
  font-size: clamp(17px, 1.35vw, 21px); line-height: 1.5;
}

.leistung-motiv { position: absolute; top: 0; right: 0; width: var(--motiv-w); pointer-events: none; }

/* Gleich gewichtete Motive (alle außer Netzwerk): Bildbreite = --motiv-q × Hero-Höhe,
   Körper vertikal mittig (--motiv-mitte, Standard 0,5), rechte Bezugskante an der Inhaltskante (Rand von --wrap).
   Kabel reichen über den Hero-Rand hinaus und werden dort abgeschnitten (overflow). */
@media (min-width: 768px) {
  /* Im Tablet-Layout (bis 988 px) ist der Hero höher als die Breite trägt: Bezugsbreite höchstens
     45 % der Inhaltsbreite (--motiv-wq / 2), sonst wird die Textspalte zu schmal */
  .leistung-hero--gewichtet {
    --wrap-vw: calc(100vw - 80px);
    --bild-w: min(calc(var(--hero-h) * var(--motiv-q)), calc(var(--wrap-vw) * var(--motiv-wq) * .5));
  }
  .leistung-hero--gewichtet .leistung-motiv {
    --motiv-zentriert: calc(var(--hero-h) * var(--motiv-mitte, .5) - var(--bild-w) * var(--motiv-km));
    --motiv-oben: var(--motiv-zentriert);
    width: var(--bild-w);
    top: var(--motiv-oben);
    right: calc((100% - var(--wrap)) / 2 - var(--bild-w) * var(--motiv-kr));
  }
  /* begrenzt die Breite, erreichen Kabel trotzdem den Rand (wie mobil) */
  .leistung-hero--kabel-oben .leistung-motiv { --motiv-oben: min(var(--motiv-zentriert), 0px); }
  .leistung-hero--kabel-unten .leistung-motiv { --motiv-oben: max(var(--motiv-zentriert), calc(var(--hero-h) - var(--bild-w) * .642857)); }
  .leistung-hero--kabel-oben.leistung-hero--kabel-unten .leistung-motiv {
    --motiv-oben: clamp(calc(var(--hero-h) - var(--bild-w) * .642857), var(--motiv-zentriert), 0px);
  }
  .leistung-hero--gewichtet .leistung-copy { max-width: min(600px, calc(100% - var(--bild-w) * var(--motiv-kb) - 64px)); }
}
@media (min-width: 1280px) {
  .leistung-hero--gewichtet { --wrap-vw: min(calc(100vw - 128px), 1680px); }
}
/* Pointe oben links im Bild (Firewall Fassung 2): Text in der festen Höhe --pointe-abstand unter der
   Themenleiste (≥ 32 px), Bild so breit, dass das Gehäuse (--motiv-geraet-unten) 40 px über der
   Hero-Kante endet: Bildbreite höchstens (H − Abstand − 40 px) / (Gehäuseunterkante − Textoberkante).
   Die Kabel laufen oben und unten über den Rand. */
.leistung-hero--pointe-oben { --pointe-abstand: 38px; }
@media (min-width: 768px) {
  .leistung-hero--pointe-oben.leistung-hero--gewichtet {
    --bild-w: min(calc(var(--hero-h) * var(--motiv-q)),
                  calc((var(--hero-h) - var(--pointe-abstand) - 40px) / (var(--motiv-geraet-unten) - var(--motiv-pointe-y))),
                  calc(var(--wrap-vw) * var(--motiv-wq) * .5));
  }
  /* höchstens an der Haarlinie, damit das obere Kabel den Rand erreicht (schmale Bühnen: Pointe dann etwas tiefer) */
  .leistung-hero--pointe-oben.leistung-hero--gewichtet .leistung-motiv { --motiv-oben: min(calc(var(--pointe-abstand) - var(--bild-w) * var(--motiv-pointe-y)), 0px); }
}

/* Bühne: Bild und Orange-Overlay deckungsgleich (viewBox 0 0 2800 1800) */
.motiv-buehne { position: relative; container: motiv / inline-size; }   /* Container-Abfragen der Textszene (Lesbarkeit) */
.motiv-buehne img { display: block; width: 100%; height: auto; }
.motiv-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }

/* Orange-Overlay (tools/motive/build-overlay.cjs): Vokabular des Switches.
   Strichstärken mit non-scaling-stroke, damit sie gerendert gleich wirken.
   Ruhezustand ohne JavaScript und bei reduzierter Bewegung: Leiterbahnen gedämpft,
   Display-Szene (Text mit ruhigem Cursor), alles andere aus, auch die LED. Den einmaligen
   Ablauf nach dem Laden spielt /assets/motive/motiv-overlay.js ab. */
.motiv-overlay path, .motiv-overlay ellipse { vector-effect: non-scaling-stroke; }
.ov-glow, .ov-kern { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; }
.ov-kern { stroke-width: var(--ov-kern); }
.ov-glow-1 { stroke-width: var(--ov-glow-1); opacity: var(--ov-glow-1-a); }
.ov-glow-2 { stroke-width: var(--ov-glow-2); opacity: var(--ov-glow-2-a); }
.ov-bahn { opacity: var(--ov-ruhe); }
.ov-antenne { opacity: 0; }
.ov-chip { fill: none; stroke: var(--accent); stroke-width: 2.5px; stroke-linejoin: round; opacity: 0; }
.ov-led { fill: var(--accent); opacity: 0; }   /* blinkt nur, während Daten fließen; Ruhe: aus */
.ov-funk-punkt { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-width: var(--ov-funk); opacity: 0; }
.ov-kabel { fill: none; stroke: none; }
.ov-signal { opacity: 0; }
.ov-signal-hof { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-width: var(--ov-signal-hof); opacity: var(--ov-signal-hof-a); }
.ov-signal-kern { fill: none; stroke: var(--paper); stroke-linecap: round; stroke-width: var(--ov-signal-kern); opacity: .95; }
/* bis das Bild geladen ist, bleibt das Overlay verborgen (setzt motiv-overlay.js) */
.ov-wartet .motiv-overlay { opacity: 0; }
/* Antenne leuchtet nur als Kontur (Außenlinie, schwacher Glow, keine Fläche) */
.ov-antenne .ov-glow-1 { stroke-width: var(--ov-ant-glow); opacity: var(--ov-ant-glow-a); }
/* Display-Szenen (tools/motive/<name>.szenen.json): Linien Off-White ca. 1 px,
   Punkte und Flächen orange. Ruhezustand: aktive Szene steht vollständig. */
.ov-szene-linie { fill: none; stroke: var(--paper); stroke-width: var(--ov-szene-linie); opacity: var(--ov-szene-linie-a); stroke-linejoin: round; stroke-linecap: round; }
.ov-szene-flaeche { fill: var(--accent); }
.ov-szene-punkt { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-width: var(--ov-szene-punkt); }
/* Textszene: Satoshi Medium, Off-White; Schreibcursor als schmaler oranger Balken.
   Welche Variante (zwei Zeilen, eine, umbrochen) gilt, steht als Container-Abfrage im SVG. */
.ov-text-zeile text { fill: var(--paper); fill-opacity: var(--ov-text-a, 1); font-family: var(--font); font-weight: 500; }
.ov-cursor { fill: var(--accent); opacity: 0; }   /* nur während des Tippens und ca. 2 s danach (motiv-overlay.js); Ruhe und reduzierte Bewegung: kein Cursor */
/* Text auf einem Display (Netzwerk-Tablet, gemeinsam.json „pointe.display“): Cursor bleibt nach dem Tippen ruhig stehen, auch im Ruhezustand */
.ov-szene[data-cursor-ende="ruhig"] .ov-cursor { opacity: 1; }
/* Ablauf „pruefung“ (Firewall & Security): senkrechter Leader wie am Switch (1,4 px,
   orange Endpunkte), Port-LED des genutzten LAN-Ports; Wege der Signalpunkte unsichtbar.
   Ruhezustand: Leader und LED gedämpft wie die Leiterbahnen, Text steht. */
.ov-leader { opacity: var(--ov-ruhe); }
.ov-leader-linie { fill: none; stroke: var(--accent); stroke-width: var(--ov-leader); stroke-linecap: round; }
.ov-leader-ende { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-width: var(--ov-leader-ende); }
.motiv-overlay[data-typ="pruefung"] .ov-port-led { opacity: var(--ov-ruhe); }
/* Ablauf „server“ (Server & Cloud): Speicherriegel als orange Flächen, Kühler wie die Chip-Kontur
   (pulsieren nur), Ring des Einschalters als Betriebs-LED. Ruhezustand: Riegel, Bahn, LED und Leader
   gedämpft, Text steht. */
.ov-ram { fill: var(--accent); fill-opacity: var(--ov-ram-a); stroke: var(--accent); stroke-width: 1px; stroke-linejoin: round; opacity: var(--ov-ram-ruhe, var(--ov-ruhe)); }   /* Ruhe etwas schwächer als die Bahnen */
.ov-led-ring { fill-opacity: .3; stroke: var(--accent); stroke-width: 2px; }
.motiv-overlay[data-typ="server"] .ov-led { opacity: var(--ov-ruhe); }
/* Ablauf „schritte“ (Betrieb & Support, Arbeitsplatz): Elemente mit data-ruhe (Displayrahmen, LED,
   Displaylinien, Chip-Kontur des Arbeitsplatzes) im Ruhezustand gedämpft, übrige aus. Tasten leuchten
   nur im Takt des Tippens; der Fortschrittsbalken nur während er sich füllt. Beratung: nachgezeichneter
   Netzplan in Ruhe als ein Pfad (.ov-plan-ruhe, data-ruhe) gedämpft wie die Leiterbahnen; die einzelnen Züge,
   der Punkt an der Stiftspitze und das Aufleuchten der Ziele nur im Ablauf. */
.ov-rahmen, .ov-fortschritt, .ov-taste, .ov-punkt, .ov-ziel, .ov-plan { opacity: 0; }
.motiv-overlay[data-typ="schritte"] [data-ruhe] { opacity: var(--ov-ruhe); }
.ov-taste { fill: var(--accent); fill-opacity: .55; stroke: var(--accent); stroke-width: 1px; stroke-linejoin: round; }
.ov-fortschritt-rahmen { fill: none; stroke: var(--paper); stroke-width: 1px; opacity: .6; }
.ov-fortschritt-fuellung { fill: none; stroke: var(--accent); stroke-width: 4px; }
.ov-weg { fill: none; stroke: none; }

/* Art Direction: je Komposition ein Overlay, passend zur <source media> in build.py */
.motiv-overlay[data-komposition="nebeneinander"], .motiv-overlay[data-komposition="versetzt"] { display: none; }

/* ab 1366 px „nebeneinander“ (Netzwerk & WLAN, .leistung-hero--nebeneinander; Fassung 2 seit 22.10.2026:
   Leinwand 2272 × 1000, Tablet gespiegelt links neben dem Accesspoint, 249 Masterpixel Abstand, Tablet
   etwas tiefer). Der Textblock wird schmaler: Einleitung höchstens 17,5 em (34–36 Zeichen je Zeile),
   die H1 bleibt zweizeilig („Ein Netz, das man“ ist die längste Zeile, 7,78 em).
   - H1 mit Breitenreserve (22.10.2026): Schrift clamp(44px, 4,4vw, 76px), Spalte 7,78 em / 0,9 – die längste Zeile
     belegt höchstens 90 % (Chrome unter Windows brach bei 4,6vw und knapper Spalte dreizeilig um);
   - Bildbreite: so breit, dass zwischen Spalte und linker Tablet-Kante (0,99648 × Bildbreite vor dem rechten
     Rand) 64 px bleiben, höchstens 1175px (Herleitung in build.py, MOTIVE);
     oben bündig an der Haarlinie (Deckenplatte), rechts bündig (Kabel läuft rechts aus dem Bild);
   - Textbeginn: H1-Oberkante so nah wie möglich an der Gehäuseoberkante (y 160 = 0,07042 × Bildbreite);
     sie liegt bis 1920 px über den 88 px, die Brotkrume und Strich brauchen, also H1 bei 88 px;
   - Hero-Höhe für alle Seiten min(16,67vw + 240px, 560px); die Formel für --text-oben der übrigen
     Seiten stammt aus Fassung 1 (Gehäusekante y 224 von 2500) und bleibt unverändert. */
@media (min-width: 1366px) {
  .leistung-hero {
    --hero-h: min(calc(16.67vw + 240px), 560px);
    --text-oben: max(24px, calc(min(60vw, calc(68.65vw - 139px), 1250px) * .0896 - 64px));
  }
  .leistung-hero-inner { padding-bottom: 72px; }
  .leistung-hero--nebeneinander {
    --motiv-w: min(60vw, max(calc(62.185vw - 130.45px), calc(100.353vw - 789.71px)), calc(50.177vw + 117.48px), 1175px);
    --text-oben: max(24px, calc(var(--motiv-w) * .07042 - 64px));
    --h1-nb: clamp(44px, 4.4vw, 76px);   /* H1 mit Breitenreserve (Simon, 22.10.2026): Spalte = 7,78 em / 0,9 */
  }
  .leistung-hero--nebeneinander .leistung-copy { max-width: min(calc(var(--h1-nb) * 8.644), calc((100vw + 100%) / 2 - var(--motiv-w) * .99648 - 64px)); }
  .leistung-hero--nebeneinander .leistung-copy h1 { font-size: var(--h1-nb); }
  .leistung-hero--nebeneinander .leistung-einleitung { max-width: 17.5em; }
  .leistung-hero--nebeneinander .motiv-overlay[data-komposition="untereinander"] { display: none; }
  .leistung-hero--nebeneinander .motiv-overlay[data-komposition="nebeneinander"] { display: block; }
}

/* Heller Inhalt: Was wir konkret tun · So arbeiten wir zusammen · Aus der Praxis */
.leistung-inhalt { padding-bottom: clamp(72px, 8vw, 120px); }
.leistung-abschnitt { padding-top: clamp(56px, 6vw, 96px); }
.leistung-abschnitt .section-title { margin-bottom: clamp(24px, 2.6vw, 40px); }

/* Ruhige Liste: Titel (Satoshi Medium) und Satz als Paar, dünne Trennlinien wie
   bei den Kacheln. Satz in Fließtextgröße und -farbe wie .leistung-absatz,
   Satzspalte höchstens ca. 65 Zeichen (31em). */
.leistung-punkte {
  max-width: calc(12.5rem + 28px + 31em); margin: 0; padding: 0; list-style: none;
  font-size: clamp(17px, 1.3vw, 19px);   /* em-Basis für die Satzspalte */
}
.leistung-punkt {
  display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: 6px 28px; align-items: baseline;
  padding-block: 24px; border-top: 1px solid var(--rule);
}
.leistung-punkt:first-child { border-top: none; padding-top: 0; }
.leistung-punkt-titel { font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }

/* Kurzer Absatz, Zeilenlänge höchstens ca. 65 Zeichen */
.leistung-absatz,
.leistung-punkt p { max-width: 31em; color: var(--text-muted); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; }
.leistung-praxis .leistung-punkt-titel { margin-bottom: 10px; }

/* Platzhalter, solange kein Praxisbeispiel vorliegt: sichtbar markiert */
.leistung-platzhalter {
  max-width: 40em; padding: 28px 32px;
  border: 1px dashed var(--text-muted);
  color: var(--text-muted); font-size: 17px;
}

/* < 768 px: Text zuerst, darunter der Gerätebereich. Das Gerät (x 1402–2800,
   1398 Masterpixel) ist 80 % der Spaltenbreite (100vw − 48px) breit:
   Bildbreite 2800 / 1398 × 0,8 = 1,6023 × Spalte = 160,23vw − 76,91px, oben und
   rechts bündig (Kabel läuft rechts aus dem Bild). Bildbereich so hoch wie bis
   zur Tablet-Unterkante (1622 / 1398 × 0,8 = 0,9282 × Spalte), darunter 48 px.
   Die Haarlinie sitzt an der Oberkante des Bildbereichs. */
@media (max-width: 767px) {
  /* Mobil-Optimierung (Auftrag Simon, 21.10.2026): Animation samt Pointe ohne Scrollen sichtbar
     (bei 390 × 844 Motiv-Unterkante ≤ 640 px). Brotkrume aus (die Themenleiste zeigt den Begriff),
     H1 32–34 px, Reihenfolge Strich → H1 → Motiv → Einleitung (Hero als Spalte, Textblock und
     Hülle mit display: contents; Desktop unverändert), Bildbereich 84,6vw hoch (390 px: 330 px). */
  .leistung-hero { --hero-hm: max(84.6vw, 300px); min-height: 0; display: flex; flex-direction: column; }
  .leistung-hero::before { display: none; }
  .leistung-hero-inner, .leistung-copy { display: contents; }
  .brotkrume { display: none; }
  .leistung-copy .headline-rule { order: 1; margin: 22px 24px 16px; }
  .leistung-copy h1 { order: 2; margin: 0 24px 18px; font-size: clamp(32px, 8.7vw, 34px); line-height: 1.12; }
  .leistung-motiv { order: 3; }
  .leistung-einleitung { order: 4; margin: 24px 24px 32px; }
  /* Bildbereich für alle gleich hoch: Netzwerk bis zur Tablet-Unterkante + 48 px, mindestens 408 px,
     damit Netzwerk mit der Bühne von mindestens 648 px (Pointe zweizeilig ≥ 11 px) Platz hat */
  .leistung-motiv { position: relative; width: 100%; height: var(--hero-hm); overflow: hidden; }
  .leistung-motiv::before { display: block; }
  .leistung-motiv .motiv-buehne { position: absolute; top: var(--motiv-mobil-oben, 0px); right: var(--motiv-mobil-rechts); width: var(--motiv-mobil-w); }
  /* Netzwerk mobil: Komposition „versetzt“ (Leinwand 1647 × 1362) statt „untereinander“ */
  .motiv-overlay[data-komposition="untereinander"] { display: none; }
  .motiv-overlay[data-komposition="versetzt"] { display: block; }
  /* gleich gewichtet: Breite aus der Bereichshöhe, höchstens 90 % Spalte für die Bezugsbreite;
     Körper mittig, rechte Bezugskante 24 px vor dem Rand */
  .leistung-hero--gewichtet { --bild-w: min(calc(var(--hero-hm) * var(--motiv-q)), calc((100vw - 48px) * var(--motiv-wq))); }
  .leistung-hero--gewichtet .leistung-motiv .motiv-buehne {
    --buehne-zentriert: calc(var(--hero-hm) * var(--motiv-mitte, .5) - var(--bild-w) * var(--motiv-km));
    --buehne-oben: var(--buehne-zentriert);
    width: var(--bild-w);
    top: var(--buehne-oben);
    right: calc(24px - var(--bild-w) * var(--motiv-kr));
  }
  /* Firewall (Review 20.10.2026 abends): rechts vom Gerät liegt viel Leinwand (Pointe, Kabel). Die rechte
     Bildkante (und damit das Overlay) bleibt im Fenster; das Gerät rückt dafür nach links, gleiche Größe. */
  .leistung-hero--mobil-im-bild .leistung-motiv .motiv-buehne { right: max(0px, calc(24px - var(--bild-w) * var(--motiv-kr))); }
  /* Begrenzt die Breite die Bühne (schmale Fenster), bleibt sie im hohen Bildbereich kleiner:
     Kabel oben → Bühne nie unterhalb der Oberkante, Kabel unten → nie oberhalb der Unterkante
     (Bildhöhe = 9 / 14 × Bildbreite bei allen Kompositionen). */
  .leistung-hero--kabel-oben .leistung-motiv .motiv-buehne { --buehne-oben: min(var(--buehne-zentriert), 0px); }
  .leistung-hero--kabel-unten .leistung-motiv .motiv-buehne { --buehne-oben: max(var(--buehne-zentriert), calc(var(--hero-hm) - var(--bild-w) * .642857)); }
  .leistung-hero--kabel-oben.leistung-hero--kabel-unten .leistung-motiv .motiv-buehne {
    --buehne-oben: clamp(calc(var(--hero-hm) - var(--bild-w) * .642857), var(--buehne-zentriert), 0px);
  }
  /* Kabel, die oben aus dem Bild laufen (Firewall WAN, Server-Uplink), blenden am oberen Rand
     des Bildbereichs über 48 px weich aus statt hart abgeschnitten zu werden. Die Maske liegt auf
     der Bühne (Bild und Overlay), die Haarlinie bleibt. Firewall: nur links vom Gerät (bis 57 %
     der Bühnenbreite, Leinwand x 1600, Fassung 2), damit „Geprüft, nicht geglaubt.“ scharf bleibt.
     Maskenfarben sind nur Deckkraftwerte, keine sichtbaren Farben. */
  .leistung-hero--kabel-oben .leistung-motiv .motiv-buehne {
    --ausblenden: linear-gradient(to bottom, transparent calc(0px - var(--buehne-oben)), black calc(48px - var(--buehne-oben)));
    -webkit-mask-image: var(--ausblenden); mask-image: var(--ausblenden);
  }
  .leistung-hero--kabel-oben-links .leistung-motiv .motiv-buehne {
    -webkit-mask-image: var(--ausblenden), linear-gradient(black, black);
    mask-image: var(--ausblenden), linear-gradient(black, black);
    -webkit-mask-size: 57.14% 100%, 42.86% 100%; mask-size: 57.14% 100%, 42.86% 100%;
    -webkit-mask-position: left top, right top; mask-position: left top, right top;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
  /* Server: Uplink-Kabel rechts, Text „Gesichert, nicht gehofft.“ links davon → Ausblendung nur
     rechts von Leinwand x 1760 (68,3 % der Bühnenbreite), der Text bleibt scharf */
  .leistung-hero--kabel-oben-rechts .leistung-motiv .motiv-buehne {
    -webkit-mask-image: linear-gradient(black, black), var(--ausblenden);
    mask-image: linear-gradient(black, black), var(--ausblenden);
    -webkit-mask-size: 68.32% 100%, 31.68% 100%; mask-size: 68.32% 100%, 31.68% 100%;
    -webkit-mask-position: left top, right top; mask-position: left top, right top;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
  /* Breite, flache Motive (Server, seit 21.10.2026): Bildbereich so hoch wie bei den anderen Themen
     (vorher kürzer, „mobil-kompakt“); Körper so breit wie möglich: Fenster − 2 × 12 px statt der Spalte
     (--motiv-mobil-wq = 1 / kb), rechts 12 px vor dem Rand. Bild oben bündig, das Kabel läuft weiter
     oben aus dem Bildbereich. */
  .leistung-hero--mobil-breit { --bild-w: calc((100vw - 24px) * var(--motiv-mobil-wq)); }
  .leistung-hero--mobil-breit .leistung-motiv .motiv-buehne { --buehne-oben: 0px; right: calc(12px - var(--bild-w) * var(--motiv-kr)); }
  /* Pointe oben (Firewall): Text 28 px unter dem Bildbereich (Gehäuse dann ≥ 40 px unter dessen Oberkante),
     Gehäuse ≥ 40 px über der Unterkante */
  .leistung-hero--pointe-oben { --pointe-abstand: 28px; }
  .leistung-hero--pointe-oben.leistung-hero--gewichtet {
    --bild-w: min(calc(var(--hero-hm) * var(--motiv-q)),
                  calc((var(--hero-hm) - var(--pointe-abstand) - 40px) / (var(--motiv-geraet-unten) - var(--motiv-pointe-y))),
                  calc((100vw - 48px) * var(--motiv-wq)));
  }
  .leistung-hero--pointe-oben.leistung-hero--gewichtet .leistung-motiv .motiv-buehne { --buehne-oben: min(calc(var(--pointe-abstand) - var(--bild-w) * var(--motiv-pointe-y)), 0px); }
  .leistung-punkt { grid-template-columns: 1fr; padding-block: 22px; }
  .leistung-platzhalter { padding: 22px 20px; }
}

/* ---------- Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; }
}

/* ---------- Header-Menü „Leistungen“ und Karten-Baustein (ITVW-10, zum Ausprobieren) ---------- */

.thema-icon { display: block; flex: none; width: 24px; height: 24px; }

/* Header: „Leistungen“ als Aufklappmenü (public/js/navigation.js). Ohne JavaScript bleibt der Link. */
.nav-menu { position: relative; }
.nav-menu-knopf {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 0;
  border: 0; background: none; color: inherit; font: inherit; font-size: 15px; cursor: pointer;
  text-underline-offset: 6px;
}
.nav-menu-knopf[hidden], .nav-menu-link[hidden] { display: none; }
.nav-menu-knopf:hover, .nav-menu-knopf[aria-expanded="true"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.nav-menu-pfeil { width: 12px; height: 12px; transition: transform .2s ease; }
.nav-menu-knopf[aria-expanded="true"] .nav-menu-pfeil { transform: rotate(180deg); }
.site-nav ul.nav-menu-liste {
  position: absolute; z-index: 20; top: calc(100% + 10px); left: -18px;
  display: grid; gap: 2px; min-width: 260px; margin: 0; padding: 10px;
  list-style: none; background: var(--surface); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent); box-shadow: 0 18px 40px color-mix(in srgb, var(--deep-slate) 45%, transparent);
}
.site-nav ul.nav-menu-liste[hidden] { display: none; }
.site-nav ul.nav-menu-liste a {
  display: flex; align-items: center; gap: 14px; padding: 10px 12px;
  font-size: 15px; color: var(--text); text-decoration: none;
}
.site-nav ul.nav-menu-liste a:hover, .site-nav ul.nav-menu-liste a:focus-visible { background: color-mix(in srgb, var(--paper) 8%, transparent); text-decoration: none; }
.site-nav ul.nav-menu-liste a:hover .thema-icon, .site-nav ul.nav-menu-liste a:focus-visible .thema-icon { color: var(--accent); }
.site-nav ul.nav-menu-liste a[aria-current="page"] { color: var(--text-accent); }


/* Startseite „Leistungen“: offenes Raster „Variante A – Grafit auf Papier“ (Auftrag Simon, 20.10.2026).
   Keine Kästen: 3 × 2 Einträge mit 1 px warmer Haarlinie oben, Abstand 48 px. Je Eintrag Nummer (Satoshi,
   klein, orangefarbener Text über --text-accent), Motiv in Deep Slate (tools/motive/export-kacheln.cjs:
   Körper aller Motive gleich groß nach Fläche, höchstens 210 px hoch; gerenderte Breite --w am Bild; unten
   bündig, höchstens 78 % der Spaltenbreite), Begriff (Newsreader, 26 px), Teaser (Slate, höchstens 36ch)
   und „Mehr erfahren →“ mit oranger Unterstreichung, am unteren Rand (alle Links einer Reihe auf einer
   Linie). Inhalt waagerecht mittig (Variante B, 21.10.2026), die Haarlinie über die volle Spaltenbreite,
   die Abschnittsüberschrift bleibt linksbündig. Der ganze Eintrag ist der Link;
   Hover und Fokus: Linie oben 2 px orange, Pfeil 4 px nach rechts; sichtbarer Fokusrahmen.
   768–1041 px zwei Spalten, darunter eine (Motive auf 170 / 210 skaliert, höchstens 170 px hoch). */
.kacheln { display: grid; gap: 48px; margin: 0; padding: 0; list-style: none; }
.kacheln--gross { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kacheln > li { display: flex; }
.kachel {
  position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center;
  padding-top: 20px; border-top: 1px solid var(--hairline); color: var(--text); text-decoration: none;
}
/* Linie im Hover: 2 px orange über der Haarlinie, ohne das Raster zu verschieben */
.kachel::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.kachel:hover::before, .kachel:focus-visible::before { transform: scaleX(1); }
.kachel:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
.kachel-nummer { color: var(--text-accent); font-family: var(--font); font-size: 13px; font-weight: 500; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.kachel-motiv { display: flex; align-self: stretch; align-items: flex-end; justify-content: center; height: 210px; margin: 18px 0 22px; }
.kachel-motiv picture { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; }   /* eigene Box: site.js beobachtet das picture */
.kachel-motiv img { display: block; width: var(--w, auto); height: auto; max-width: 78%; }
.kachel-titel { margin: 0 0 8px; color: var(--text); font-family: var(--font-headline); font-size: 26px; font-weight: 400; line-height: 1.15; letter-spacing: -.005em; }
.kachel-teaser { max-width: 36ch; color: var(--text-muted); font-size: 16px; line-height: 1.5; }
.kachel-mehr { margin-top: auto; padding-top: 16px; color: var(--text); font-size: 15px; font-weight: 500; }
.kachel-mehr { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.kachel-pfeil { display: inline-block; text-decoration: none; transition: transform .25s ease; }
.kachel:hover .kachel-pfeil, .kachel:focus-visible .kachel-pfeil { transform: translateX(4px); }
@media (max-width: 1041px) { .kacheln--gross { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .kacheln--gross { grid-template-columns: 1fr; gap: 40px; }
  .kachel-motiv { height: 170px; }
  .kachel-motiv img { width: calc(var(--w, 210px) * .8095); }
}
@media (prefers-reduced-motion: reduce) { .kachel::before, .kachel-pfeil { transition: none; } }
/* „Weitere Themen“ am Ende der Unterseiten (seit 21.10.2026, vorher dunkle Karten): dieselben Kacheln
   ohne Nummern, die fünf anderen Themen; Motive × 0,6 (höchstens 126 px hoch, gleiche Flächen-Logik),
   Begriff 20 px. 5 Spalten ab 1280 px, 3 bis 1279 px, 2 bis 767 px, 1 unter 480 px. */
.kacheln--klein { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.kacheln--klein .kachel { padding-top: 16px; }
.kacheln--klein .kachel-motiv { height: 126px; margin: 0 0 16px; }
.kacheln--klein .kachel-motiv img { width: calc(var(--w, 210px) * .6); }
.kacheln--klein .kachel-titel { margin-bottom: 6px; font-size: 20px; }
.kacheln--klein .kachel-teaser { font-size: 15px; }
.kacheln--klein .kachel-mehr { padding-top: 12px; font-size: 14px; }
@media (max-width: 1279px) { .kacheln--klein { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .kacheln--klein { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .kacheln--klein .kachel-motiv { height: 126px; }
  .kacheln--klein .kachel-motiv img { width: calc(var(--w, 210px) * .6); }
}
@media (max-width: 479px) { .kacheln--klein { grid-template-columns: 1fr; } }

/* Unterseiten: „Weitere Themen“ am Ende des hellen Inhalts, vor dem Kontaktabschluss */
.weitere-themen { padding-block: clamp(8px, 1vw, 16px) clamp(72px, 8vw, 120px); }
.weitere-themen .eyebrow { margin: 0 0 clamp(24px, 2.6vw, 36px); }