#topbar-mount{min-height:80px} /* W14c: Header mountet per partials.js nach dem ersten Paint — Platz vorab reservieren (CLS) */
/* Glossar — KI- & IT-Automation. W13 (2026-09-07): Schrift/Abstände auf tokens.css, Akzenttext auf --t-accent (AA). Abstaende auf 4/8, Tippziele >= 44 px.
   Verschachtelte Radien nach "aussen minus Abstand". Kein Hover ohne
   @media (hover: hover), damit auf Touch nichts haengenbleibt. */

.gl-wrap{max-width:1100px;margin:0 auto;padding:var(--lyr-sect) var(--lyr-gutter) var(--space-strip);}
.gl-narrow{max-width:760px;}

/* Brotkrumen */
.gl-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);margin:0 0 var(--space-3);font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--ink-3);}
.gl-crumb a{color:var(--ink-2);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-1);}
.gl-crumb span[aria-current]{color:var(--ink);}
@media (hover:hover){.gl-crumb a:hover{color:var(--t-accent);}}

.gl-eyebrow{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--t-accent);margin:0 0 var(--space-2);}
.gl-title{font-family:var(--font-serif);font-size:var(--fs-hero);font-weight:600;line-height:1.1;letter-spacing:-.025em;color:var(--ink);margin:0 0 var(--space-3);max-width:20ch;}
.gl-lede{font-size:var(--fs-lede);color:var(--ink-2);line-height:1.6;max-width:64ch;margin:0 0 var(--space-5);}

/* Antwort-Block: die Kurzdefinition zuerst, fuer Leser und fuer Antwortmaschinen. */
.gl-def{margin:0 0 var(--space-5);padding:var(--space-3);background:var(--raised);border:1px solid var(--line-2);border-left:3px solid var(--accent);border-radius:var(--r-4);font-size:var(--fs-lede);line-height:1.6;color:var(--ink);max-width:68ch;}
.gl-def .lbl{display:block;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--t-accent);margin:0 0 var(--space-1);}

.gl-section{margin:0 0 var(--space-5);max-width:68ch;}
.gl-section h2{font-family:var(--font-serif);font-size:var(--fs-h2);font-weight:600;line-height:1.25;color:var(--ink);margin:0 0 12px;}
.gl-section h3{font-family:var(--font-sans);font-size:var(--fs-h3);font-weight:600;color:var(--ink);margin:var(--space-3) 0 var(--space-1);}
.gl-section p{font-size:var(--fs-body);color:var(--ink-2);line-height:1.7;margin:0 0 var(--space-2);}
.gl-section ul{list-style:none;padding:0;margin:0 0 var(--space-2);}
.gl-section ul li{position:relative;padding:8px 0 8px 24px;font-size:var(--fs-body);color:var(--ink-2);line-height:1.65;}
.gl-section ul li::before{content:"\2192";position:absolute;left:0;top:6px;color:var(--t-accent);}
.gl-section a{color:var(--t-accent);text-decoration:underline;text-underline-offset:3px;}
.gl-section strong{color:var(--ink);}

/* Modul-Verweis */
.gl-modlink{display:block;margin:var(--space-3) 0 0;padding:var(--space-3);background:var(--raised);border:1px solid var(--line-2);border-radius:var(--r-4);text-decoration:none;transition:220ms var(--ease-smooth);}
.gl-modlink .mid{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.06em;color:var(--t-accent);font-weight:600;}
.gl-modlink strong{display:block;font-family:var(--font-serif);font-size:var(--fs-lede);color:var(--ink);margin:var(--space-0) 0 var(--space-0);}
.gl-modlink span.txt{display:block;font-size:var(--fs-small);color:var(--ink-2);line-height:1.5;}
@media (hover:hover){.gl-modlink:hover{border-color:var(--t-accent);background:var(--accent-soft);transform:translateY(-2px);}}

/* FAQ */
.gl-faq{margin:0 0 var(--space-5);max-width:68ch;}
.gl-faq h2{font-family:var(--font-serif);font-size:var(--fs-h2);font-weight:600;color:var(--ink);margin:0 0 var(--space-2);}
.gl-faq details{border:1px solid var(--line-2);border-radius:var(--r-4);background:var(--raised);margin:0 0 12px;}
.gl-faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:56px;padding:var(--space-1-5) var(--space-3);font-size:var(--fs-body);font-weight:600;color:var(--ink);line-height:var(--lh-body);}
.gl-faq summary::-webkit-details-marker{display:none;}
.gl-faq summary::after{content:"+";font-family:var(--font-mono);font-size:var(--fs-lede);color:var(--t-accent);flex:0 0 auto;}
.gl-faq details[open] summary::after{content:"\2212";}
.gl-faq details p{margin:0;padding:0 var(--space-3) var(--space-3);font-size:var(--fs-body);color:var(--ink-2);line-height:1.7;}
.gl-faq details p a{color:var(--t-accent);text-decoration:underline;text-underline-offset:3px;}
/* W33 F R12 (#42): unter 480 px frisst der Einzug (2 × 24 px) + Lücke 16 px + Marker 12 px 100 von 271 px (320 px × 200 %); Einzug auf --space-2, Frage und Antwort bleiben bündig */
@media (max-width:479px){.gl-faq summary{padding-inline:var(--space-2);}.gl-faq details p{padding-inline:var(--space-2);}}

/* Verwandte Begriffe */
.gl-related{margin:0 0 var(--space-5);}
.gl-related h2{font-family:var(--font-serif);font-size:var(--fs-h3);font-weight:600;color:var(--ink);margin:0 0 12px;}
.gl-chips{display:flex;flex-wrap:wrap;gap:var(--space-1);margin:0;}
.gl-chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-2);border-radius:var(--r-pill);background:var(--raised);border:1px solid var(--line-2);color:var(--ink-2);font-family:var(--font-mono);font-size:var(--fs-caption);text-decoration:none;transition:160ms var(--ease-smooth);}
@media (hover:hover){.gl-chips a:hover{border-color:var(--t-accent);color:var(--ink);}}

/* Genau EINE primaere Aktion je Seite. */
@media (hover:hover){}

/* Hub */
.gl-hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-2);margin:0 0 var(--space-3);}
.gl-card{display:block;padding:var(--space-3);background:var(--raised);border:1px solid var(--line-2);border-radius:var(--r-5);text-decoration:none;transition:220ms var(--ease-smooth);}
.gl-card h3{font-family:var(--font-card-title);font-size:var(--fs-lede);font-weight:600;color:var(--ink);margin:0 0 var(--space-1);line-height:1.3;}
.gl-card p{font-size:var(--fs-body);color:var(--ink-2);line-height:1.55;margin:0;}
.gl-card .go{display:block;margin:12px 0 0;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--t-accent);}
@media (hover:hover){.gl-card:hover{border-color:var(--t-accent);background:var(--accent-soft);transform:translateY(-2px);}}
.gl-letter{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);border-top:1px solid var(--line);padding:var(--space-2) 0 var(--space-1);margin:var(--space-3) 0 var(--space-1);}
.gl-jump{display:flex;flex-wrap:wrap;gap:var(--space-1);margin:0 0 var(--space-5);}
.gl-jump a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border-radius:var(--r-3);background:var(--raised);border:1px solid var(--line-2);color:var(--ink-2);font-family:var(--font-mono);font-size:var(--fs-caption);text-decoration:none;}
@media (hover:hover){.gl-jump a:hover{border-color:var(--t-accent);color:var(--ink);}}

/* ══ W16 · Roter Faden, Hierarchie, eine Aktion je Screen (2026-09-08) ════════
   Farben aus tokens.css §7b: Schwarz L0–L2 · Blau #2B6FFF nur als Flaeche,
   #8FC1FF als Textblau · Orange #FFB27A als einzige Aktionsfarbe.
   Primaerknopf, sekundaerer Text-Link und die Fortschrittslinie kommen als
   Klassen aus layering.css (.lyr-cta, .lyr-cta--ghost, .lyr-eyebrow,
   #lyr-spine) — hier steht nur, was diese Seite zusaetzlich braucht. */

/* 1 · Kapitelmarke — orangefarbener Strich vor jedem Eyebrow, auf jeder Seite gleich */
.lyr-eyebrow { display: flex; align-items: center; gap: var(--space-1-5); }
.lyr-eyebrow::before { content: ""; flex: 0 0 auto; width: 3px; height: 15px; border-radius: var(--r-1);
  background: linear-gradient(180deg, var(--brand-orange-hi), var(--brand-orange-deep)); }

/* 1b · Kapitelmarke ueber Sektions-Ueberschriften ohne Eyebrow */
.w16-h2::before { content: ""; display: block; width: 34px; height: 3px; border-radius: var(--r-1);
  background: linear-gradient(90deg, var(--brand-orange-hi), var(--brand-orange-deep)); margin: 0 0 16px; }
.w16-h2--center::before { margin-left: auto; margin-right: auto; }

/* 2 · Fortschrittslinie am linken Rand: Traeger fuer #lyr-spine aus layering.css.
   Fuellung ueber Scroll-Timeline, damit sie ohne layering.js laeuft. */
.w16-spine-host { position: sticky; top: 0; height: 0; z-index: 12; pointer-events: none; }
@supports (animation-timeline: scroll()) {
  #lyr-spine .lyr-spine__fill { animation: w16-fill linear both; animation-timeline: scroll(root block); }
  @keyframes w16-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}
@supports not (animation-timeline: scroll()) { #lyr-spine .lyr-spine__fill { transform: scaleY(.3); } }

/* 3 · Server-/Lichtkanten-Motiv, einmal je Seite: Schacht-Raster in L1, blaue
   Tiefe, eine orangefarbene Lichtkante links — dieselbe Bildsprache wie die Startseite. */
.w16-motif { position: relative; height: 108px; border-radius: var(--r-4); overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.055) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 42px),
    radial-gradient(120% 150% at 6% 0%, rgba(43,111,255,.22), transparent 60%),
    var(--brand-black-1, #101013); }
.w16-motif::before { content: ""; position: absolute; left: 0; top: 8%; bottom: 8%; width: 2px;
  background: linear-gradient(180deg, transparent, var(--brand-orange, #FFB27A), transparent);
  box-shadow: 0 0 22px 2px rgba(255,178,122,.35); }
.w16-motif::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,11,.0) 55%, rgba(10,10,11,.75) 100%); }


/* 5 · Halo-Deckel im ruhigen Zustand: `.w8-par` setzt unter
   prefers-reduced-motion die Deckkraft per !important auf 1, dadurch stand die
   Lichtwolke voll hinter dem Fliesstext (gemessen OWL 3,89:1 statt 10,60:1 im
   Normalzustand). Der Deckel haelt sie auch dort im Hintergrund. */
@media (prefers-reduced-motion: reduce) { .w8-halo.w8-par { opacity: .16 !important; } }

/* 4 · Seite: Lesbarkeit und Hierarchie ───────────────────────────────────── */
/* Blau als Schrift = Textblau (#8FC1FF), nicht das Flaechenblau */
.gl-eyebrow, .gl-card .go { color: var(--brand-blue-ink); }
@media (hover:hover){ .gl-card:hover { border-color: rgba(143,193,255,.45); background: var(--brand-black-2); } }
.gl-jump a { color: var(--t-ink-2); }
@media (hover:hover){ .gl-jump a:hover { border-color: var(--brand-orange); color: var(--ink); } }
/* Buchstaben-Marke: zweite Ebene sichtbar unter H1, mit orangefarbener Kapitelmarke */
.gl-letter { display: flex; align-items: center; gap: 12px; font-size: 21px; letter-spacing: .16em;
  color: var(--ink); padding-top: var(--space-3); }
.gl-letter::before { content: ""; flex: 0 0 auto; width: 3px; height: 19px; border-radius: var(--r-1);
  background: linear-gradient(180deg, var(--brand-orange-hi), var(--brand-orange-deep)); }
.w16-motif { margin: 0 0 var(--space-5); }

/* --- W26D Klipp-Schutz (24.09.2026) — Kritik r6: H1 „AVV (Auftragsverarbeitun…“ bei 360 px
   am Seitenrand abgeschnitten. Lange Komposita brechen jetzt mit deutscher Silbentrennung
   (lang="de"), Grid-/Flex-Kinder dürfen schmaler als ihr längstes Wort werden. */
body { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 2; }
.gl-title { text-wrap: balance; }
.gl-crumb > * { min-width: 0; }
.gl-hub-grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.gl-hub-grid > * { min-width: 0; }