/* =========================================================
   proCoA – zentrales Stylesheet
   Farben aus dem Logo extrahiert:
     kräftiges Grün  #5AAC44
     helles Grün     #99D18F
     Text-Anthrazit  #282828
   Für Fließtext/Links wird eine abgedunkelte Grün-Variante
   verwendet (ausreichender Kontrast auf Weiß).
   ========================================================= */

:root {
  --color-primary: #5AAC44;       /* Akzent-/Button-Farbe */
  --color-primary-dark: #3E7A2E;  /* Text/Links – kontraststark */
  --color-secondary: #99D18F;     /* helles Grün, dekorativ */
  --color-primary-bg: #EAF3E4;    /* helles Grün als Flaeche, z. B. Aktiv-Markierung im Menue */
  --color-text: #282828;
  --color-text-muted: #5b5b5b;
  --color-bg: #ffffff;
  --color-bg-alt: #F4F9F2;
  --color-border: #E1E8DD;

  /* Signalorange-Akzent: kraeftigerer Zweitfarbton neben dem proCoA-Gruen,
     aktuell fuer die kontrastreicheren Komponenten auf der Landingpage
     Technische Dokumentation (Hinweis-Banner, Icon-Karten, Normen-Badges). */
  --color-accent: #E8712B;
  --color-accent-dark: #7A3410;
  --color-accent-bg: #FCEFE6;

  /* Bereichsfarbe Risikobeurteilung (Petrol/Teal) - bewusst nicht das
     proCoA-Gruen, damit sich der Bereich in Kacheln/Badges/Hero vom
     allgemeinen Marken-Gruen abhebt. Analog zu --color-accent (Orange,
     Technische Dokumentation) und --color-cyber (Blau, Cybersecurity). */
  --color-risk: #1F7A6E;
  --color-risk-dark: #155E55;
  --color-risk-bg: #E1F0EE;

  /* Bereichsfarbe Cybersecurity (Blau) - entspricht der bisher schon in
     den Aktuelles-Badges verwendeten Farbe (badge--cybersecurity). */
  --color-cyber: #1F4E8C;
  --color-cyber-dark: #163A66;
  --color-cyber-bg: #E7F0FB;

  /* Bereichsfarbe Funktionale Sicherheit (Rot/Karmesin) - fuer die neue
     Landingpage zum Thema Funktionale Sicherheit. */
  --color-funsafe: #C23B3B;
  --color-funsafe-dark: #8C2A2A;
  --color-funsafe-bg: #FBEAEA;

  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --container-width: 1140px;
  --radius: 8px;
  --shadow: 0 2px 10px rgba(0,0,0,0.06);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Wichtig: das HTML-Attribut [hidden] muss IMMER "display:none" erzwingen,
   auch wenn eine Klasse auf demselben Element (z. B. .cookie-modal) explizit
   display:flex/grid setzt. Ohne diese Regel gewinnt die Klasse gegen das
   Browser-Standardverhalten von [hidden], sobald eine Layout-Eigenschaft
   gesetzt wird – das Element bleibt dann sichtbar, obwohl [hidden] aktiv ist. */
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: 16px;
}
/* height: auto ist die zwingende Ergaenzung zu den width/height-Attributen an
   den <img>-Tags. Die Attribute nennen die echten Pixelmasse der Datei - der
   Browser braucht sie, um vor dem Laden Platz zu reservieren (verhindert das
   Springen des Layouts). Ohne "height: auto" nimmt er den Attributwert aber
   als tatsaechliche Hoehe, waehrend max-width die Breite auf den Container
   begrenzt: Das Bild wird in die Laenge gezogen. Genau das war am 21.08.2026
   auf der ganzen Seite passiert, am deutlichsten beim Logo im Hero
   (3762x1313 Attribut, ~500px Container). Mit "height: auto" gilt wieder das
   Seitenverhaeltnis - und der Vorteil der Attribute bleibt erhalten. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 0.5em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding-left: 1.2em; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--color-primary-dark);
  color: #fff; padding: 0.75em 1em; z-index: 1000;
}
.skip-link:focus { left: 0; }

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}
/* Schmalere Spalte fuer lange Lesetexte (Seminar-Detailseiten): begrenzt die
   Zeilenlaenge auf gut lesbare Breite, ohne .container selbst zu aendern. */
.container--narrow { max-width: 820px; }

/* Buttons */
.btn {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  padding: 0.75em 1.5em;
  border-radius: var(--radius);
  border: none;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--color-primary-dark); text-decoration: none; color: #fff; }
.btn--small { padding: 0.5em 1em; font-size: 0.9em; }
.btn--ghost {
  background: transparent; color: var(--color-primary-dark);
  border: 1px solid var(--color-border);
}
.btn--ghost:hover { background: var(--color-bg-alt); color: var(--color-primary-dark); }
/* Button in der Bereichsfarbe Rot - fuer Angebote, die bewusst aus dem
   gruenen Grundlayout heraussticht (aktuell: Sofortcheck im KI-Audit). */
.btn--funsafe { background: var(--color-funsafe); }
.btn--funsafe:hover { background: var(--color-funsafe-dark); }
/* Button auf farbiger Flaeche: weiss mit gruener Schrift. .btn--ghost waere dort
   unsichtbar, weil sein Rahmen und seine Schrift selbst gruen sind. */
.btn--invers { background: #fff; color: var(--color-primary-dark); }
.btn--invers:hover { background: var(--color-primary-bg); color: var(--color-primary-dark); }

/* Header */
.site-header {
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; background: #fff; z-index: 100;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 20px;
}
.site-header__logo { flex-shrink: 0; }
/* Hauptnav bekommt den gesamten verbleibenden Platz zwischen Logo und den
   rechtsbuendigen Actions und zentriert ihre Links darin - Kontakt-Button
   bleibt dadurch unabhaengig rechtsbuendig, statt Teil der zentrierten Liste
   zu sein. */
.main-nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
.main-nav ul {
  display: flex; align-items: center; gap: 18px;
  list-style: none; margin: 0; padding: 0;
  flex-wrap: wrap;
}
.main-nav a { color: var(--color-text); font-weight: 500; font-size: 1.02rem; }
/* Aktiv-Markierung: zeigt im Hauptmenue, in welchem Bereich man sich
   gerade befindet. Alle Top-Level-Links bekommen einen (unsichtbaren)
   Rahmen, damit der farbige Rahmen des aktiven Punkts keine Verschiebung
   gegenueber den anderen Links verursacht. */
.main-nav > ul > li > a { display: inline-block; border-bottom: 3px solid transparent; padding-bottom: 4px; }
.main-nav > ul > li > a.is-active { border-bottom-color: var(--color-primary); font-weight: 600; }
.site-header__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.site-header__actions .btn { color: #fff; }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--color-text); display: block; }

/* Aufklapp-Knoepfe des mobilen Menues. assets/js/main.js erzeugt sie
   unabhaengig von der Fensterbreite, damit beim Drehen des Geraets nichts
   nachgebaut werden muss - am Desktop sind sie deshalb hier ausgeblendet.
   Die Darstellung steht in der Media Query fuer 880px. */
.nav-aufklapp { display: none; }

/* Untermenue (z. B. "Technische Dokumentation" -> Betriebsanleitungs-Check / Fachuebersetzung).
   Desktop: klassisches Hover-/Focus-Dropdown. Mobile-Anpassung siehe Media Query weiter unten. */
.has-dropdown { position: relative; }
.has-dropdown > a::after { content: " \25BE"; font-size: 0.8em; }
.has-dropdown .dropdown {
  display: none;
  position: absolute; top: 100%; left: 0;
  min-width: 240px; margin: 0; padding: 8px 0; list-style: none;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  box-shadow: var(--shadow); z-index: 110;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { display: block; }
.dropdown li { width: auto; }
.dropdown a { display: block; padding: 10px 18px; white-space: nowrap; font-weight: 500; }
.dropdown a:hover { background: var(--color-bg-alt); }

/* Mega-Menue "Leistungen": buendelt die vier Landingpages (Risikobeurteilung,
   Funktionale Sicherheit, Cybersecurity, Technische Dokumentation und
   Uebersetzung) unter einem Menuepunkt, damit das Hauptmenue nicht mit vier
   eigenen Dropdowns ueberfrachtet wird. Nutzt .has-dropdown fuer Pfeil/
   Positionierung, .megamenu fuer das breitere, mehrspaltige Panel. */
.has-megamenu .megamenu {
  display: none;
  position: absolute; top: 100%; left: 0;
  width: 500px; margin: 0; padding: 10px 18px; list-style: none;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  box-shadow: var(--shadow); z-index: 110;
}
.has-megamenu:hover .megamenu,
.has-megamenu:focus-within .megamenu { display: block; }
/* Die 4 Leistungen stehen als Zeilen untereinander; die Unterpunkte einer
   Leistung stehen jeweils direkt unter ihrem Titel (statt daneben), aber
   innerhalb der Zeile horizontal nebeneinander statt gestapelt - dadurch
   keine grossen vertikalen Luecken mehr zwischen kurzen und langen
   Unterpunkt-Listen. */
.megamenu__grid { display: grid; grid-template-columns: 1fr; gap: 2px; }
.megamenu__item {
  border-left: 3px solid var(--color-border); border-radius: 4px; padding: 7px 14px;
}
/* Dach CE-Konformitaet als Kopfzeile des Panels statt als fuenfter Eintrag im
   Raster: ohne farbige Kante, ohne Flaeche - und bewusst BUENDIG an der linken
   Panelkante. Genau dieser Versatz gegenueber den eingerueckten Feld-Titeln
   (3px Kante plus 14px Innenabstand) macht die Kopfzeile als Ebene darueber
   lesbar; eine Ausrichtung auf dieselbe Textkante wuerde sie wieder wie einen
   gleichrangigen Eintrag erscheinen lassen. Der Unterpunkt hebt den Einzug der
   gemeinsamen Unterpunkt-Regel deshalb ebenfalls auf. */
.megamenu__dach { padding: 0; }
.megamenu__dach .megamenu__title { color: var(--color-primary-dark); }
.megamenu__dach ul { margin-left: 0; }

/* Vorzeile, die die vier Felder erst als Bausteine des Dachs lesbar macht.
   Traegt gleichzeitig die Trennlinie zum Dach-Block und steht wie das Dach
   buendig links. */
.megamenu__overline {
  margin: 6px 0 5px;
  padding: 6px 0 0;
  border-top: 1px solid var(--color-border);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.megamenu__item--risk { border-left-color: var(--color-risk); }
.megamenu__item--funsafe { border-left-color: var(--color-funsafe); }
.megamenu__item--cyber { border-left-color: var(--color-cyber); }
.megamenu__item--orange { border-left-color: var(--color-accent); }
.megamenu__title { display: block; font-weight: 600; font-size: 1.05rem; padding: 1px 0; }
.megamenu__item--risk .megamenu__title { color: var(--color-risk-dark); }
.megamenu__item--funsafe .megamenu__title { color: var(--color-funsafe-dark); }
.megamenu__item--cyber .megamenu__title { color: var(--color-cyber-dark); }
.megamenu__item--orange .megamenu__title { color: var(--color-accent-dark); }
/* Unterpunkte: gilt fuer die vier Leistungsfelder UND fuer den Dach-Block, damit
   die Unterpunkte ueberall identisch aussehen und nur an einer Stelle gepflegt
   werden muessen. */
.megamenu__item ul,
.megamenu__dach ul {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px;
  list-style: none; margin: 3px 0 0 16px; padding: 0;
}
.megamenu__item li,
.megamenu__dach li { width: auto; }
.megamenu__item ul a,
.megamenu__dach ul a {
  display: inline-block; padding: 2px 0; font-weight: 400; font-size: 0.88em;
  color: var(--color-text-muted); white-space: nowrap;
}
.megamenu__item ul a::before,
.megamenu__dach ul a::before { content: "→ "; }
/* Aktiv-Markierung innerhalb des Mega-Menues: entweder der Feld-Titel
   selbst (wenn man auf dessen Landingpage ist) oder der passende
   Unterpunkt (wenn man auf einer Detailseite ist) bekommt ein grünes
   Pill-Hintergrund - bewusst in proCoA-Gruen statt der jeweiligen
   Bereichsfarbe, damit die Aktiv-Markierung unabhaengig vom Thema klar
   als "Sie sind hier" erkennbar bleibt. */
.megamenu__title.is-active,
.megamenu__item ul a.is-active,
.megamenu__dach ul a.is-active {
  background: var(--color-primary-bg); color: var(--color-primary-dark);
  border-radius: 5px; font-weight: 700;
}
.megamenu__title.is-active { padding: 2px 8px; }
.megamenu__item ul a.is-active,
.megamenu__dach ul a.is-active { padding: 2px 6px; }
.megamenu__item ul a:hover,
.megamenu__dach ul a:hover { color: var(--color-text); }

/* Breadcrumb-Zeile oberhalb des Hero-Badges bzw. der H1 (Konzept C) - siehe
   breadcrumb_html()/breadcrumb_schema() in includes/config.php. */
.hero-breadcrumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 10px; }
.hero-breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.hero-breadcrumb a:hover { color: var(--color-primary-dark); text-decoration: underline; }
.hero-breadcrumb__sep { color: var(--color-text-muted); }
.hero-breadcrumb__current { font-weight: 600; color: var(--color-primary-dark); }
.hero-breadcrumb__current--risk { color: var(--color-risk-dark); }
.hero-breadcrumb__current--funsafe { color: var(--color-funsafe-dark); }
.hero-breadcrumb__current--cyber { color: var(--color-cyber-dark); }
.hero-breadcrumb__current--accent { color: var(--color-accent-dark); }

/* Hero */
.hero {
  background: linear-gradient(180deg, var(--color-bg-alt) 0%, #fff 100%);
  padding: 64px 0;
}

/* Hero-Variante fuer Seiten ohne festes Leistungsfeld (Startseite, 404):
   komplett in Gruen gerahmt statt mit einer zweiten Bereichsfarbe oben. */
.hero--framed-primary {
  background: linear-gradient(120deg, var(--color-bg-alt) 0%, var(--color-primary-bg) 100%);
  border-top: 6px solid var(--color-primary);
  border-bottom: 6px solid var(--color-primary-dark);
}
/* Hero-Variante mit Film im Hintergrund (Startseite).
   Der Film liegt hinter allem, darueber ein Schleier, der nach rechts
   durchsichtig wird: links bleibt der Text auf nahezu weissem Grund lesbar,
   rechts sieht man in die Halle. Deshalb ist die rechte Spalte des
   hero__inner-Rasters leer - sie haelt den Platz frei, durch den man schaut.

   Die Rahmenlinien und die Hoehe kommen aus .hero--framed-primary, damit
   sich der Film in die vorhandene Hero-Familie einfuegt statt daneben zu
   stehen. */
.hero--film {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--color-bg-alt) 0%, var(--color-primary-bg) 100%);
  border-top: 6px solid var(--color-primary);
  border-bottom: 6px solid var(--color-primary-dark);
}
.hero__film {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Ohne diese Zeile wuerde die globale Regel img/video-Hoehe automatisch
     setzen und der Film die Hero-Hoehe sprengen. */
  max-width: none;
}
.hero__schleier {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg,
    rgba(244, 249, 242, 0.98) 0%,
    rgba(244, 249, 242, 0.94) 40%,
    rgba(244, 249, 242, 0.60) 68%,
    rgba(244, 249, 242, 0.22) 100%);
}
.hero--film .container { position: relative; z-index: 2; }

@media (max-width: 880px) {
  /* Mobil steht der Text ueber der vollen Breite, ein Verlauf nach rechts
     wuerde ihn also mitten im Bild stehen lassen. Deshalb hier von oben
     nach unten: oben lesbar, unten der Blick in die Halle. */
  .hero__schleier {
    background: linear-gradient(180deg,
      rgba(244, 249, 242, 0.97) 0%,
      rgba(244, 249, 242, 0.92) 52%,
      rgba(244, 249, 242, 0.45) 100%);
  }
}

/* Hero-Variante: sanfter Gruen-Orange-Verlauf, oben/unten gerahmt von
   kraeftigen Linien in beiden Markenfarben (aktuell nur Technische
   Dokumentation). */
.hero--framed {
  background: linear-gradient(120deg, var(--color-bg-alt) 0%, var(--color-accent-bg) 100%);
  border-top: 6px solid var(--color-accent);
  border-bottom: 6px solid var(--color-primary-dark);
}
/* Gleiches Muster, andere Bereichsfarbe: Petrol (Risikobeurteilung) bzw.
   Rot (Funktionale Sicherheit) statt Orange. */
.hero--framed-risk {
  background: linear-gradient(120deg, var(--color-bg-alt) 0%, var(--color-risk-bg) 100%);
  border-top: 6px solid var(--color-risk);
  border-bottom: 6px solid var(--color-primary-dark);
}
.hero--framed-funsafe {
  background: linear-gradient(120deg, var(--color-bg-alt) 0%, var(--color-funsafe-bg) 100%);
  border-top: 6px solid var(--color-funsafe);
  border-bottom: 6px solid var(--color-primary-dark);
}
.hero--framed-cyber {
  background: linear-gradient(120deg, var(--color-bg-alt) 0%, var(--color-cyber-bg) 100%);
  border-top: 6px solid var(--color-cyber);
  border-bottom: 6px solid var(--color-primary-dark);
}
.hero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.hero h1 { font-size: 2.4rem; }
.hero .lead { font-size: 1.15rem; color: var(--color-text-muted); }

.hero-badge {
  display: inline-block; background: var(--color-accent); color: #fff;
  font-size: 0.72em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 14px;
}
.hero-badge--risk { background: var(--color-risk); }
.hero-badge--funsafe { background: var(--color-funsafe); }
.hero-badge--cyber { background: var(--color-cyber); }

.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero-stats--four { grid-template-columns: repeat(4, 1fr); max-width: 720px; }
.hero-stats--three { grid-template-columns: repeat(3, 1fr); max-width: 720px; }
.hero-stats__item {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 14px; text-align: center;
}
.hero-stats__item--wide { grid-column: span 2; }
.hero-stats__item--funsafe-bg { background: var(--color-funsafe-bg); border-color: var(--color-funsafe); }
.hero-stats__value { font-size: 1.4rem; font-weight: 700; color: var(--color-accent); }
.hero-stats__value--green { color: var(--color-primary-dark); }
.hero-stats__value--risk { color: var(--color-risk-dark); }
.hero-stats__value--funsafe { color: var(--color-funsafe-dark); }
.hero-stats__value--cyber { color: var(--color-cyber-dark); }
.hero-stats__value--small { font-size: 1rem; }
.hero-stats__label { font-size: 0.75em; color: var(--color-text-muted); margin-top: 2px; }


/* Section spacing */
.section { padding: 56px 0; }
.section--alt { background: var(--color-bg-alt); }
.section__intro { max-width: 720px; margin: 0 0 32px; }
/* Kompaktere Variante fuer Seiten mit vielen kurzen Abschnitten
   (aktuell: Ueber uns), damit weniger gescrollt werden muss. */
.section--tight { padding: 32px 0; }

/* Naht zwischen zwei Abschnitten, die inhaltlich zusammengehoeren und
   dieselbe Hintergrundfarbe haben: Der obere gibt seinen unteren, der untere
   seinen oberen Innenabstand fast vollstaendig ab, sodass beide als ein Band
   gelesen werden. Aktuell: Compliance Klaus und "Aus unserem Blog" auf der
   Startseite - der Film fuehrt die Figur ein, die in den Blogkacheln
   unmittelbar darunter wiederkehrt. Aus 32 + 56 Pixel Abstand werden so
   8 + 16 Pixel. */
.section--naht-unten { padding-bottom: 8px; }
.section--naht-oben { padding-top: 16px; }

/* Cards / Kacheln */
.card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
/* Abweichende Spaltenzahl. WICHTIG: Solche Abweichungen bitte immer ueber
   diese Klassen setzen und NICHT per style="grid-template-columns: ..." am
   Element. Ein Inline-Style hat hoehere Prioritaet als jede Media-Query -
   die Umstellung auf eine Spalte unter 880px greift dann nicht mehr, und die
   Kaesten stehen auf dem Telefon nebeneinander, bis die Seite horizontal
   scrollt. Genau das war bis zum 25.08.2026 auf 13 Stellen der Fall. */
.card-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--cols-1 { grid-template-columns: 1fr; }
.card {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow);
}
.card h3 { color: var(--color-primary-dark); }

/* Kachel-Variante mit farbigem linkem Rand + Icon vor der Ueberschrift
   (bisher: technische-dokumentation/uebersetzung.php) */
.card--accent-green { border-left: 4px solid var(--color-primary); }
.card--accent-orange { border-left: 4px solid var(--color-accent); }
.card--accent-risk { border-left: 4px solid var(--color-risk); }
.card--accent-funsafe { border-left: 4px solid var(--color-funsafe); }
.card--accent-cyber { border-left: 4px solid var(--color-cyber); }
.card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.card__head h3 { margin: 0; }
.card__icon-box {
  width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.card__icon-box svg { width: 24px; height: 24px; }
/* ---------------------------------------------------------------------------
   CE-Konformitaet als Dach ueber den vier Leistungsfeldern (Startseite).
   Der Kopf laeuft ueber die volle Containerbreite, das Kartenraster ist
   beidseitig eingerueckt - dieser Ueberhang macht die uebergeordnete Ebene
   sichtbar, ohne die Karten schmaler zu machen. Ein kurzer Steg stellt den
   Bezug zwischen beiden Ebenen her.
   --------------------------------------------------------------------------- */
.ce-dach { margin-top: 8px; }
.ce-dach__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--color-primary);
  border-radius: var(--radius);
  padding: 20px 26px;
}
.ce-dach__text { flex: 1 1 420px; }
.ce-dach__kopf h3 { color: #fff; margin-bottom: 4px; }
.ce-dach__kopf p { margin: 0; color: var(--color-primary-bg); font-size: 0.95em; }
.ce-dach__kopf .btn { flex-shrink: 0; }

/* Steg zwischen Dach und Feldern */
.ce-dach__steg {
  display: block;
  width: 2px;
  height: 20px;
  margin: 0 auto;
  background: var(--color-primary);
}

/* Der Ueberhang: die Felder stehen schmaler als das Dach darueber. */
.ce-dach__felder { margin: 0 34px; }

.ce-dach__fuss {
  max-width: 760px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 0.95em;
  color: var(--color-text-muted);
}

@media (max-width: 760px) {
  /* Auf schmalen Displays entfaellt der Ueberhang - dort waere er nur
     verlorener Platz, und die Karten stehen ohnehin untereinander. */
  .ce-dach__felder { margin: 0; }
  .ce-dach__kopf { padding: 18px 20px; }
}

/* Angebotskasten, der die Einzelleistungen einer Fachseite zu einem buchbaren
   Umfang bündelt (aktuell: funktionale-sicherheit/leistungen.php). */
/* Bewusst flaechig eingefaerbt statt weiss: Der Kasten steht in einem Abschnitt
   mit weissem Hintergrund, ein weisser Kasten waere dort kaum als Kasten zu
   erkennen. Zusammen mit der kraeftigen linken Kante und dem Schatten hebt er
   sich klar von den Fachabschnitten darueber ab. */
.angebot-kasten {
  background: var(--color-primary-bg);
  border: 1px solid var(--color-primary);
  border-left: 6px solid var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 26px 30px;
  box-shadow: var(--shadow);
}
.leistungsliste { list-style: none; margin: 0; padding: 0; }
.leistungsliste li {
  position: relative;
  padding: 0 0 0 28px;
  margin-bottom: 12px;
}
.leistungsliste li:last-child { margin-bottom: 0; }
/* Haken als Textzeichen statt Grafik: skaliert mit der Schrift und braucht
   keine zusaetzliche Datei. */
.leistungsliste li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.angebot-kasten__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding-top: 18px;
  /* Trennlinie in der Hausfarbe, weil die Standard-Randfarbe auf der
     eingefaerbten Flaeche nicht mehr zu sehen waere. */
  border-top: 1px solid var(--color-primary);
}
.angebot-kasten__fuss p { margin: 0; flex: 1 1 320px; font-size: 0.95em; }
.angebot-kasten__fuss .btn { flex-shrink: 0; }

/* "Wir liefern:"-Absatz am Ende eines Fachabschnitts. Braucht eine eigene
   Klasse, weil der Absatz je nach vorangehendem Element unterschiedlich weit
   abgesetzt war: Nach einem </p> greift der Absatzabstand, nach </ul> oder </ol>
   der Listenabstand. Feste Trennlinie plus fester Abstand macht es einheitlich -
   und auf beiden Abschnitts-Hintergruenden sichtbar, anders als eine Flaeche. */
.wir-liefern {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

/* Zwischenkopf, der Angebotskarten in Gruppen teilt (Leistungsseiten). Bewusst
   dezent, damit er die Kartentitel nicht ueberstrahlt. */
.angebot-gruppe {
  margin: 32px 0 16px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.angebot-gruppe:first-of-type { margin-top: 0; }
/* Kartentitel in Angebotsgruppen sind h4 statt h3, damit die Ueberschriften-
   hierarchie unter dem Zwischenkopf stimmt - Optik bleibt wie beim h3. */
.card__head h4 { margin: 0; font-size: 1.05em; color: var(--color-primary-dark); }

/* Flaechig eingefaerbte Karte: hebt ein einzelnes Angebot so deutlich hervor wie
   zuvor ein Hinweisbanner, bleibt aber Teil des Kartenrasters. Nur sparsam
   einsetzen - pro Raster hoechstens eine Karte, sonst geht die Wirkung verloren. */
.card--filled-funsafe {
  background: var(--color-funsafe-bg);
  border-color: var(--color-funsafe);
}
.card--filled-funsafe .card__icon-box { background: #fff; color: var(--color-funsafe-dark); }

.card--accent-green .card__icon-box { background: var(--color-bg-alt); color: var(--color-primary-dark); }
.card--accent-orange .card__icon-box { background: var(--color-accent-bg); color: var(--color-accent-dark); }
.card--accent-risk .card__icon-box { background: var(--color-risk-bg); color: var(--color-risk-dark); }
.card--accent-funsafe .card__icon-box { background: var(--color-funsafe-bg); color: var(--color-funsafe-dark); }
.card--accent-cyber .card__icon-box { background: var(--color-cyber-bg); color: var(--color-cyber-dark); }

/* Preis-/CTA-Block innerhalb einer Leistungs-Kachel: optisch von der
   Leistungsliste abgesetzt (Trennlinie + groesser/fett), Button darunter. */
.card__price {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border);
}
.card__price-value { font-size: 1.2rem; font-weight: 700; color: var(--color-primary-dark); }
.card__cta { margin-top: 16px; }
/* Kleiner Zusatzhinweis unter dem Karten-Abschluss, z. B. ein Querverweis auf
   einen vorgeschalteten Selbsttest. Bewusst kein zweiter Button, damit der
   eigentliche Abschluss der Karte eindeutig bleibt. */
.card__hinweis { margin-top: 12px; font-size: 0.88em; color: var(--color-text-muted); }

/* Funnel-Boxen: zwei Preis-/Angebots-Kacheln nebeneinander mit Pfeil-Uebergang,
   z. B. "kostenfreier Teil" -> "Komplett-Kurs" (Risikobeurteilung/Videokurs). */
.funnel-boxes {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch;
}
.funnel-boxes__arrow {
  display: flex; align-items: center; justify-content: center; padding: 0 8px;
  color: var(--color-text-muted);
}
.funnel-boxes__arrow svg { width: 28px; height: 28px; }
.funnel-boxes .card { display: flex; flex-direction: column; }
.funnel-boxes .card__cta-note { margin-top: auto; padding-top: 16px; font-size: 0.85em; color: var(--color-text-muted); }

/* Prozess-Kettenkacheln: die vollen Erklaer-Kacheln eines Schritt-fuer-
   Schritt-Prozesses (z. B. die 5 Schritte der Risikobeurteilung, Videokurs)
   bekommen links einen nummerierten Kreis, verbunden durch eine
   durchlaufende Linie - ersetzt eine vorherige, separate Kurz-Timeline
   oberhalb der Kacheln (redundante Doppelung von Kurz- und Volltext). */
.process-cardchain { position: relative; padding-left: 32px; }
.process-cardchain::before {
  content: ""; position: absolute; left: 31px; top: 24px; bottom: 24px;
  width: 2px; background: var(--color-border); z-index: 0;
}
.process-cardchain__step { position: relative; margin-bottom: 20px; }
.process-cardchain__step:last-child { margin-bottom: 0; }
.process-cardchain__circle {
  position: absolute; left: -2px; top: 12px; z-index: 1;
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 2.1rem;
  box-shadow: 0 0 0 4px #fff;
}
.process-cardchain__step--risk .process-cardchain__circle { background: var(--color-risk); }
.process-cardchain__step--green .process-cardchain__circle { background: var(--color-primary); }
.process-cardchain__step--funsafe .process-cardchain__circle { background: var(--color-funsafe); }
.process-cardchain__step--cyber .process-cardchain__circle { background: var(--color-cyber); }
.process-cardchain__step .card { margin-left: 52px; }

/* CRA-Zeitleiste (cybersecurity/index.php): kompakte vertikale Kette aus
   Meilenstein-Boxen statt voller Karten wie beim process-cardchain - dafuer
   mit Vergangen-/Heute-/Dringend-Zustand statt nur durchnummerierten
   Schritten. */
.cra-timeline { position: relative; padding-left: 34px; max-width: 680px; }
.cra-timeline::before {
  content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px;
  width: 2px; background: var(--color-border); z-index: 0;
}
.cra-timeline__item { position: relative; margin-bottom: 16px; }
.cra-timeline__item:last-child { margin-bottom: 0; }
.cra-timeline__dot {
  position: absolute; left: -34px; top: 2px; z-index: 1;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 0.75rem;
  box-shadow: 0 0 0 4px #fff;
}
.cra-timeline__dot--past { background: var(--color-text-muted); }
.cra-timeline__dot--future { background: var(--color-cyber); }
.cra-timeline__dot--urgent {
  background: var(--color-funsafe); width: 28px; height: 28px; left: -36px; top: 0; font-size: 0.9rem;
}
.cra-timeline__dot--today {
  background: #fff; border: 2px dashed var(--color-cyber); color: var(--color-cyber-dark);
}
.cra-timeline__box {
  background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 10px 16px; font-size: 0.92em;
}
.cra-timeline__box strong { display: block; margin-bottom: 2px; }
.cra-timeline__item--past .cra-timeline__box { opacity: 0.7; }
.cra-timeline__item--today .cra-timeline__box {
  background: var(--color-cyber-bg); border-color: var(--color-cyber); border-style: dashed;
  display: inline-block;
}
.cra-timeline__item--today .cra-timeline__box strong { color: var(--color-cyber-dark); margin-bottom: 0; }
.cra-timeline__item--urgent .cra-timeline__box { background: var(--color-funsafe-bg); border-color: var(--color-funsafe); }
.cra-timeline__item--urgent .cra-timeline__box strong { color: var(--color-funsafe-dark); }
/* Hervorgehobener Stichtag: kraeftigerer Rahmen und Schatten heben den Kasten
   aus der Reihe, ohne die Farbcodierung der Punkte anzutasten - Rot bleibt
   damit dem zeitkritischen Termin vorbehalten. */
.cra-timeline__item--highlight .cra-timeline__box {
  background: var(--color-accent-bg);
  border: 2px solid var(--color-accent);
  box-shadow: var(--shadow);
  padding: 14px 18px;
}
.cra-timeline__item--highlight .cra-timeline__box strong { color: var(--color-accent-dark); font-size: 1.08em; }
.cra-timeline__marke {
  display: inline-block;
  margin-bottom: 6px;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}
@media (max-width: 620px) {
  .cra-timeline { padding-left: 28px; }
  .cra-timeline__dot { left: -28px; width: 20px; height: 20px; font-size: 0.68rem; }
  .cra-timeline__dot--urgent { left: -30px; width: 24px; height: 24px; }
}

/* Hero-Quicklinks: kompakte Textlinks unter dem Video-Trailer, die direkt zu
   den beiden Angebots-Kacheln weiter unten auf der Seite scrollen. */
.hero-quicklinks { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.hero-quicklinks a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 0.92rem; padding: 0.7em 1.2em;
  border-radius: var(--radius); text-decoration: none;
}
.hero-quicklinks a:first-child { background: var(--color-risk); color: #fff; }
.hero-quicklinks a:first-child:hover { background: var(--color-risk-dark); }
.hero-quicklinks a:last-child { background: transparent; color: var(--color-risk-dark); border: 1px solid var(--color-border); }
.hero-quicklinks a:last-child:hover { background: var(--color-risk-bg); }
.hero-quicklinks svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Scroll-Ziele, die per Anchor-Link angesprungen werden: Ausgleich fuer den
   sticky Header, damit die Zielkachel nicht darunter verschwindet. */
.anchor-target { scroll-margin-top: 90px; }

/* Expert block */
.expert {
  display: flex; gap: 24px; align-items: flex-start;
  background: var(--color-bg-alt); border-radius: var(--radius); padding: 24px;
}
.expert img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }

/* --- Expertenkarte mit verlinkter Seite --------------------------------
   Aktiv, sobald expert_html() eine Seitenadresse bekommt (siehe
   includes/personen-data.php).

   DIE GANZE KARTE IST ANKLICKBAR, OHNE EIN <a> UM DIE KARTE ZU LEGEN:
   Der Link sitzt nur am Namen; sein ::after legt sich unsichtbar ueber die
   ganze Karte. Mit der Maus trifft man also alles, fuer Screenreader und
   Tastatur gibt es genau einen Link - mit dem Namen als Beschriftung statt
   mit der kompletten Kurzbiografie.

   Nebenwirkung, bewusst in Kauf genommen: Text in der Karte laesst sich
   schlechter markieren, weil die unsichtbare Flaeche darueber liegt. Bei
   einer Karte, die als Ganzes ein Ziel ist, ueberwiegt der Gewinn. */
.expert--verlinkt { position: relative; transition: background-color 0.15s ease; }
.expert--verlinkt:hover { background: var(--color-primary-bg); }
.expert__name { color: var(--color-primary-dark); text-decoration: none; }
.expert__name::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius);
}
.expert--verlinkt:hover .expert__name { text-decoration: underline; }
/* Der Tastaturfokus umrahmt die ganze Karte und nicht nur den Namen - die
   Karte ist ja das Ziel. */
.expert__name:focus-visible { outline: none; }
.expert__name:focus-visible::after {
  outline: 2px solid var(--color-primary-dark); outline-offset: 2px;
}
.expert__mehr {
  display: inline-block; margin-top: 10px;
  color: var(--color-primary-dark); font-weight: 600; font-size: 0.95em;
}
.expert--verlinkt:hover .expert__mehr { text-decoration: underline; }

/* --- Schmale Newsletter-Anmeldung -------------------------------------
   Aktuell direkt unter dem Hero auf /aktuelles/ (siehe
   includes/newsletter-form.php).

   Aufbau: links der Text, rechts das Formular als EINE Zeile. Reicht der
   Platz nicht, rutscht das Formular unter den Text - ohne eigene Media
   Query, weil flex-wrap das von selbst tut, sobald die Mindestbreiten nicht
   mehr passen.

   Das Band ist bewusst flach: Es steht zwischen Hero und Beitragsliste und
   soll dort keinen eigenen Abschnitt vortaeuschen. */
.newsletter-band { padding-top: 22px; padding-bottom: 22px; }
.newsletter-schmal {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 28px;
}
/* Keine Ueberschrift: Der Knopf sagt, worum es geht. Links das Formular,
   rechts daneben die Hinweiszeile - beides Flex-Kinder in einer Zeile. */
/* Das Formular ist ein Block mit zwei Kindern: der Zeile aus Feld und Knopf
   und darunter dem Captcha-Kasten. Es ist bewusst KEIN Flex-Container.

   WARUM DAS DER ENTSCHEIDENDE PUNKT IST: Waren Feld, Knopf und Captcha
   Geschwister in einer Flex-Zeile, dann errechnete der Browser die Breite des
   Formulars aus der SUMME aller drei - auch wenn das Captcha per flex-basis
   umbrach. Aus rund 540 Pixeln wurden so 850, und der Hinweistext daneben
   rutschte weit nach rechts, sobald Cloudflare den Kasten zeigte.
   Als eigene Bloecke werden die Breiten dagegen VERGLICHEN, nicht addiert:
   Der Kasten (300 px) ist schmaler als die Zeile, also aendert er nichts. */
.newsletter-schmal__form { flex: 0 1 auto; min-width: 0; }
.newsletter-schmal__zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
/* Die Beschriftung ist fuer Screenreader da; sichtbar traegt der
   Platzhaltertext die Information. In einer einzeiligen Anmeldung ist das
   vertretbar - das Feld fragt genau eine, offensichtliche Angabe ab. */
.newsletter-schmal__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.newsletter-schmal__form input[type="email"] {
  width: 17em; max-width: 100%;
  padding: 0.6em 0.8em; font: inherit; font-size: 0.95rem;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: #fff; color: var(--color-text);
}
.newsletter-schmal__form input[type="email"]:focus-visible {
  outline: 2px solid var(--color-primary-dark); outline-offset: 1px;
}
.newsletter-schmal__form .btn { white-space: nowrap; }
/* Das Captcha laeuft unsichtbar mit (interaction-only) und steht als eigener
   Block unter der Zeile. :empty haelt den Platz frei von ihm, solange
   Cloudflare nichts anzeigt - ein leeres Element wuerde sonst allein durch
   seinen Abstand eine Luecke unter dem Formular erzeugen. */
.newsletter-schmal__form .cf-turnstile { margin-top: 10px; }
.newsletter-schmal__form .cf-turnstile:empty { display: none; margin-top: 0; }
.newsletter-schmal__meldung { flex: 1 1 20em; margin: 0; font-weight: 600; font-size: 0.95rem; }
.newsletter-schmal__meldung--gut { color: var(--color-primary-dark); }
.newsletter-schmal__meldung--fehler { color: var(--color-funsafe-dark); }
/* Steht rechts NEBEN dem Formular und nicht darunter: flex-basis 18em als
   Wunschbreite, 1 1 damit sie den restlichen Platz nimmt und bei Enge als
   Erste unter das Formular rutscht.

   align-self: flex-start hebelt fuer diesen einen Kasten das align-items:
   center des Containers aus. Sonst sitzt der Text in der senkrechten Mitte
   der Zeile - und sobald das Captcha erscheint, wird die Zeile hoeher und der
   Text rutscht nach unten mit. Oben angeschlagen bleibt er stehen, wo er ist,
   egal was darunter noch aufgeht. */
.newsletter-schmal__hinweis {
  flex: 1 1 18em; margin: 0; align-self: flex-start;
  font-size: 0.82rem; line-height: 1.5; color: var(--color-text-muted);
}

/* Mehrere Expert-Karten nebeneinander statt untereinander (Ueber-uns-Seite:
   Unsere Experten, Backoffice & Assistenz). */
.people-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 620px) {
  .people-grid { grid-template-columns: 1fr; }
}

/* --- Hero mit Teaserbox rechts ------------------------------------------
   Aktuell auf "Ueber uns": Der Beitrag zur Umfirmierung erzaehlt die
   Geschichte, die im Hero nur angedeutet wird.

   Flex mit wrap statt Grid: Sobald die Textspalte ihre Mindestbreite von 30em
   nicht mehr halten kann, rutscht die Box darunter - ohne eigene Media Query.
   Die Box behaelt dabei ihre Breite nicht bei, sondern darf wachsen, damit sie
   unten nicht schmal in der Ecke steht. */
.hero-mit-teaser { display: flex; flex-wrap: wrap; gap: 28px 36px; align-items: flex-start; }
.hero-mit-teaser__text { flex: 1 1 30em; min-width: 0; }

.hero-teaser {
  flex: 1 1 250px; max-width: 320px;
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hero-teaser:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10); text-decoration: none; }
.hero-teaser:focus-visible { outline: 2px solid var(--color-primary-dark); outline-offset: 3px; }
.hero-teaser__bild { width: 100%; height: 150px; object-fit: cover; display: block; }
.hero-teaser__body { display: block; padding: 14px 16px 16px; }
.hero-teaser__kenner {
  display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-primary-dark); font-weight: 700; margin-bottom: 4px;
}
.hero-teaser__titel { display: block; font-weight: 600; line-height: 1.35; }
.hero-teaser__mehr {
  display: block; margin-top: 8px; font-size: 0.9em; font-weight: 600;
  color: var(--color-primary-dark);
}
@media (prefers-reduced-motion: reduce) {
  .hero-teaser { transition: none; }
  .hero-teaser:hover { transform: none; }
}

/* Expertenseite: Seitenkopf einer Personen-Landingpage (siehe
   ueber-uns/benjamin-fidelak.php). Gleiche Idee wie .expert, aber als Hero:
   groesseres Portrait, Text daneben.

   Bewusst Flex mit wrap statt Grid: Sobald die Textspalte ihre Mindestbreite
   von 320px nicht mehr halten kann, rutscht sie unter das Portrait - das
   braucht keine eigene Media Query und funktioniert auch dann noch, wenn der
   Kopf einmal in einem schmaleren Container steht. */
.person-kopf { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; }
.person-kopf__portrait {
  flex: 0 0 auto;
  width: 168px; height: 168px; border-radius: 50%; object-fit: cover;
  border: 5px solid #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
}
/* min-width: 0 verhindert, dass ein langes Wort (z. B. eine Normbezeichnung)
   die Flex-Spalte breiter macht als den Container. */
.person-kopf__text { flex: 1 1 320px; min-width: 0; }
.person-kopf__rolle { font-weight: 700; color: var(--color-funsafe-dark); margin: 0 0 14px; }
/* Rollenzeile in der Hausfarbe statt in der Bereichsfarbe - fuer Personen, die
   nicht fuer ein einzelnes Leistungsfeld stehen (z. B. Matthias Schulz mit vier
   Themenfeldern; sein Seitenkopf ist deshalb auch gruen gerahmt). */
.person-kopf__rolle--gruen { color: var(--color-primary-dark); }
.person-kopf__rolle--cyber { color: var(--color-cyber-dark); }

/* Kontaktzeile im Seitenkopf: Telefon und Adresse als Klartext, damit sie
   auch im Ausdruck lesbar bleiben. */
.person-kontakt {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin: 20px 0 0; padding-top: 18px;
  border-top: 1px solid var(--color-border);
  font-size: 0.95em;
}
.person-kontakt span { color: var(--color-text-muted); }

/* --- Compliance-Klaus-Film -----------------------------------------------
   Zehn Sekunden ohne Ton: Klaus sitzt unter Paragrafen, Warnzeichen und
   Papierstapeln, das Chaos loest sich in gruene Haken auf, am Ende steht er
   aufgerichtet da und hebt den Zeigefinger.

   WARUM KEIN LOOP: Die Geschichte endet aufgeloest. Eine Endlosschleife
   wuerde alle zehn Sekunden zurueck ins Chaos springen - die Aussage waere
   "wird nie besser". Der Film laeuft daher genau einmal, sobald der
   Abschnitt im Bild ist, und bleibt auf dem letzten Bild stehen
   (Steuerung in assets/js/main.js).

   WARUM IM QUELLTEXT EIN BILD STEHT UND KEIN VIDEO: Ohne JavaScript, bei
   prefers-reduced-motion oder im Datensparmodus soll kein leerer Kasten
   stehen bleiben, sondern das Ergebnis der Geschichte. Deshalb liegt das
   LETZTE Bild als <img> mit Alternativtext im Markup; das <video> wird von
   JavaScript nur dann darueber gelegt, wenn es auch abgespielt wird. So
   wird die Filmdatei gar nicht geladen, wenn sie nicht laufen darf. */
.klaus-film {
  position: relative; aspect-ratio: 1 / 1;
  border-radius: var(--radius); overflow: hidden; background: var(--color-bg-alt);
}
/* Klassenqualifiziert, weil auf "Ueber uns" die Regel .expert img mit
   96px und border-radius 50% sonst gewinnen wuerde. */
.klaus-film .klaus-film__bild,
.klaus-film video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* max-width: none, weil die globale img-Regel sonst die Breite begrenzt. */
  max-width: none; border-radius: 0;
}
/* Bedienknopf: Pflicht, nicht Zierde - Bewegung, die laenger als fuenf
   Sekunden automatisch laeuft, braucht eine Bedienmoeglichkeit
   (WCAG 2.2.2 "Pause, Stopp, Ausblenden"). Der Film ist zehn Sekunden lang.
   Im Quelltext steht der Knopf mit hidden; sichtbar wird er erst, wenn es
   auch ein Video zu bedienen gibt. */
.klaus-film__knopf {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  font: inherit; font-size: 0.78rem; font-weight: 600; line-height: 1.2;
  color: var(--color-text); background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--color-border); border-radius: 999px;
  padding: 6px 13px; cursor: pointer;
}
.klaus-film__knopf:hover { background: #fff; }
.klaus-film__knopf:focus-visible { outline: 2px solid var(--color-primary-dark); outline-offset: 2px; }

/* Startseite: Film links, Text rechts. Flex mit wrap, damit der Text unter
   den Film rutscht, sobald er seine Mindestbreite nicht mehr halten kann -
   ohne eigene Media Query. */
.klaus-zeile { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
/* Bewusst klein und in derselben Groesse wie auf "Ueber uns": Der Film ist ein
   Zwischenton auf der Startseite, kein zweiter Hero. */
.klaus-zeile__film { flex: 0 0 180px; }
/* max-width, weil der Text neben dem kleinen Film sonst ueber fast die ganze
   Containerbreite laufen und damit unlesbar lange Zeilen bekommen wuerde. */
.klaus-zeile__text { flex: 1 1 320px; min-width: 0; max-width: 640px; }
.klaus-zeile__text .eyebrow { display: block; margin-bottom: 6px; }

/* "Ueber uns": derselbe Film im vorhandenen .expert-Kasten, nur kleiner. */
.expert .klaus-film { flex: 0 0 180px; }

/* Trailer-Video (Vimeo): zeigt zunaechst nur ein Standbild + Play-Button an,
   das eigentliche iframe wird erst per JS nach Klick eingefuegt - siehe
   Inline-Skript auf der jeweiligen Seite. So werden keine Vimeo-Cookies/
   IP-Uebermittlung ausgeloest, bevor der Nutzer aktiv "Play" driumdrueckt. */
.video-trailer {
  position: relative; border-radius: var(--radius); overflow: hidden;
  cursor: pointer; background: #000; aspect-ratio: 16 / 9;
}
.video-trailer__poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-trailer__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.video-trailer__play svg { width: 26px; height: 26px; margin-left: 2px; }
.video-trailer:hover .video-trailer__play,
.video-trailer:focus-visible .video-trailer__play { background: var(--color-risk); }
.video-trailer__label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 14px;
  background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
  color: #fff; font-size: 0.85em; font-weight: 600;
}
.video-trailer iframe { width: 100%; height: 100%; display: block; border: none; }

/* Testimonials */
.testimonial {
  border-left: 4px solid var(--color-primary); padding: 8px 20px; font-style: italic;
  color: var(--color-text-muted);
}
.testimonial cite { display: block; margin-top: 8px; font-style: normal; font-weight: 600; color: var(--color-text); }
.testimonial cite span { display: block; font-weight: 400; font-size: 0.9em; color: var(--color-text-muted); }

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 20px;
}
.testimonial-grid .testimonial { margin: 0; }
@media (max-width: 880px) {
  .testimonial-grid { grid-template-columns: 1fr; }
}

/* Experten-Netzwerk (externe Partner): einheitliches Raster, aber Firmenlogos
   (z. B. pgx) werden NICHT wie Personenfotos in einen Kreis beschnitten. */
.expert-network {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 20px;
}
.expert-network__item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
}
.expert-network__item h3 { margin-bottom: 2px; font-size: 1.05em; }
.expert-network__item p { margin: 0; color: var(--color-text-muted); font-size: 0.95em; }

.expert-network__avatar {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}
/* Logos (keine Personenfotos) bewusst NICHT rund beschneiden – gleiche
   Rahmengroesse wie die Avatare, aber vollstaendig sichtbar (object-fit: contain). */
.expert-network__avatar--logo {
  border-radius: 0;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--color-border);
  padding: 8px;
}

@media (max-width: 900px) {
  .expert-network { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .expert-network { grid-template-columns: 1fr; }
}

/* FAQ */
.faq-item { border-bottom: 1px solid var(--color-border); padding: 16px 0; }
.faq-item h3 { margin-bottom: 8px; }

/* Erweiterte Landingpage-Komponenten (zuerst fuer Technische Dokumentation
   gebaut, bewusst generisch gehalten fuer Wiederverwendung auf anderen
   Landingpages): Eyebrow-Label, Icon-Karten, Hinweis-Banner, Normen-Badges,
   Publikations-Karten. Icons im Stil der Footer-Social-Icons (Feather/Lucide:
   stroke="currentColor", stroke-width 2, runde Kappen). */
.eyebrow {
  display: block; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.78em; font-weight: 700; color: var(--color-primary-dark);
  margin-bottom: 8px;
}

.highlight-banner {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  justify-content: space-between;
  background: var(--color-accent-bg); border: 1px solid var(--color-accent);
  border-left: 4px solid var(--color-accent); border-radius: var(--radius);
  padding: 18px 24px; margin-bottom: 40px;
}
.highlight-banner__text { display: flex; align-items: flex-start; gap: 14px; }
.highlight-banner__text svg { flex-shrink: 0; width: 26px; height: 26px; color: var(--color-accent); margin-top: 2px; }
.highlight-banner p { margin: 0; color: var(--color-accent-dark); }
.highlight-banner strong { color: var(--color-accent-dark); }
.highlight-banner .btn--small { flex-shrink: 0; }
.highlight-banner .btn--ghost { border-color: var(--color-accent); color: var(--color-accent-dark); }
.highlight-banner .btn--ghost:hover { background: var(--color-accent); color: #fff; }

/* Farb-Modifier fuer highlight-banner auf anderen Bereichen als Technische
   Dokumentation (dort weiterhin Orange als Default). */
.highlight-banner--funsafe {
  background: var(--color-funsafe-bg); border-color: var(--color-funsafe); border-left-color: var(--color-funsafe);
}
.highlight-banner--funsafe .highlight-banner__text svg { color: var(--color-funsafe); }
.highlight-banner--funsafe p,
.highlight-banner--funsafe strong { color: var(--color-funsafe-dark); }
.highlight-banner--funsafe .btn--ghost { border-color: var(--color-funsafe); color: var(--color-funsafe-dark); }
.highlight-banner--funsafe .btn--ghost:hover { background: var(--color-funsafe); color: #fff; }

/* Countdown-Badge: kompakte Zahl+Label-Box fuer zeitkritische Hinweise
   (aktuell CRA-Meldepflichten). Die Zahl wird serverseitig aus dem
   aktuellen Datum berechnet (siehe includes/cra-fristen-data.php), die
   Badge zeigt also je Aufruf den korrekten, mitlaufenden Countdown. */
.countdown-badge {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 10px; background: #fff; border: 2px solid var(--color-funsafe);
}
.countdown-badge__value { font-size: 1.5rem; font-weight: 800; color: var(--color-funsafe-dark); line-height: 1; }
.countdown-badge__label {
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-funsafe-dark); margin-top: 2px;
}
.countdown-badge--abgelaufen { border-color: var(--color-cyber); }
.countdown-badge--abgelaufen .countdown-badge__value,
.countdown-badge--abgelaufen .countdown-badge__label { color: var(--color-cyber-dark); }
.countdown-badge--accent { border-color: var(--color-accent); }
.countdown-badge--accent .countdown-badge__value,
.countdown-badge--accent .countdown-badge__label { color: var(--color-accent-dark); }
.countdown-badge--large { width: 120px; height: 120px; border-radius: 16px; border-width: 3px; }
.countdown-badge--large .countdown-badge__value { font-size: 2.8rem; }
.countdown-badge--large .countdown-badge__label { font-size: 0.75rem; margin-top: 4px; }
@media (max-width: 620px) {
  .countdown-badge { width: 48px; height: 48px; border-radius: 8px; }
  .countdown-badge__value { font-size: 1.15rem; }
  .countdown-badge__label { font-size: 0.52rem; }
}

.highlight-banner--cyber {
  background: var(--color-cyber-bg); border-color: var(--color-cyber); border-left-color: var(--color-cyber);
}
.highlight-banner--cyber .highlight-banner__text svg { color: var(--color-cyber); }
.highlight-banner--cyber p,
.highlight-banner--cyber strong { color: var(--color-cyber-dark); }
.highlight-banner--cyber .btn--ghost { border-color: var(--color-cyber); color: var(--color-cyber-dark); }
.highlight-banner--cyber .btn--ghost:hover { background: var(--color-cyber); color: #fff; }

.highlight-banner--risk {
  background: var(--color-risk-bg); border-color: var(--color-risk); border-left-color: var(--color-risk);
}
.highlight-banner--risk .highlight-banner__text svg { color: var(--color-risk); }
.highlight-banner--risk p,
.highlight-banner--risk strong { color: var(--color-risk-dark); }
.highlight-banner--risk .btn--ghost { border-color: var(--color-risk); color: var(--color-risk-dark); }
.highlight-banner--risk .btn--ghost:hover { background: var(--color-risk); color: #fff; }

/* Gruen-Variante, z. B. fuer den Hinweis-Banner "HiQ text ist jetzt proCoA"
   auf technische-dokumentation/index.php - bewusst nicht rot/funsafe, da
   kein Warnhinweis, sondern eine positive Marken-Nachricht. */
.highlight-banner--green {
  background: var(--color-primary-bg); border-color: var(--color-primary); border-left-color: var(--color-primary);
}
.highlight-banner--green .highlight-banner__text svg { color: var(--color-primary-dark); }
.highlight-banner--green p,
.highlight-banner--green strong { color: var(--color-primary-dark); }
.highlight-banner--green .btn--ghost { border-color: var(--color-primary); color: var(--color-primary-dark); }
.highlight-banner--green .btn--ghost:hover { background: var(--color-primary); color: #fff; }

.norm-badge-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.norm-badge {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--color-border); background: #fff;
  font-size: 0.85em; font-weight: 600; color: var(--color-text-muted);
}
.norm-badge--accent { border-color: var(--color-primary-dark); color: #fff; background: var(--color-primary-dark); }

.pub-list { display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin: 0 auto; }
.pub-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 18px 20px;
}
.pub-card__icon {
  width: 40px; height: 40px; border-radius: var(--radius); flex-shrink: 0;
  background: var(--color-bg-alt); color: var(--color-primary-dark);
  display: flex; align-items: center; justify-content: center;
}
.pub-card__icon svg { width: 20px; height: 20px; }
.pub-card__type { font-size: 0.78em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.pub-card__title { font-weight: 600; margin: 2px 0; }
.pub-card__meta { color: var(--color-text-muted); font-size: 0.9em; }

@media (max-width: 620px) {
  .highlight-banner { flex-direction: column; align-items: flex-start; }
}

/* Kontaktseite: Formular (Hauptfokus) links, weitere Kontaktmoeglichkeiten
   rechts als schmalere Sidebar - Formular bleibt dadurch im Vordergrund. */
.contact-layout {
  display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start;
}
.contact-layout__methods { max-width: none; }
.contact-confirmation {
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 32px;
}
.contact-confirmation h2 { color: var(--color-primary-dark); margin-bottom: 10px; }
@media (max-width: 880px) {
  .contact-layout { grid-template-columns: 1fr; }
}

/* Aktuelles: Uebersicht (Teaser-Grid) und Detailseiten */
.aktuelles-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.aktuelles-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
}
.aktuelles-card__bild { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.aktuelles-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.aktuelles-card__body h2,
.aktuelles-card__body h3 { font-size: 1.15rem; margin: 10px 0 8px; }
.aktuelles-card__body h2 a,
.aktuelles-card__body h3 a { color: var(--color-text); }
.aktuelles-card__body h2 a:hover,
.aktuelles-card__body h3 a:hover { color: var(--color-primary-dark); }
.aktuelles-card__teaser { color: var(--color-text-muted); font-size: 0.95em; flex: 1; }
.aktuelles-card__meta { color: var(--color-text-muted); font-size: 0.85em; margin-top: 12px; }

/* Kategorie-Badges: dezente, farblich unterschiedene Pillen je Themenfeld */
.badge {
  display: inline-block; padding: 3px 12px; border-radius: 999px;
  font-size: 0.78em; font-weight: 600; letter-spacing: 0.01em;
}
.badge--risikobeurteilung { background: var(--color-risk-bg); color: var(--color-risk-dark); }
.badge--cybersecurity { background: var(--color-cyber-bg); color: var(--color-cyber-dark); }
.badge--technische-dokumentation { background: var(--color-accent-bg); color: var(--color-accent-dark); }
.badge--funktionale-sicherheit { background: var(--color-funsafe-bg); color: var(--color-funsafe-dark); }
/* Nachrichten ueber proCoA selbst - in der Hausfarbe, weil es kein
   Leistungsfeld ist. */
.badge--unternehmen { background: var(--color-primary-bg); color: var(--color-primary-dark); }

/* Detailseite eines Aktuelles-Artikels */
.aktuelles-detail__meta { color: var(--color-text-muted); font-size: 0.92em; margin: 12px 0 20px; }
.aktuelles-detail__bild { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius); margin-bottom: 28px; }

/* --- Kopfbild neben Titel und Datum ------------------------------------
   Zweite Bauform des Beitragskopfs (Standard bleibt das breite Band, siehe
   'kopfbild' in includes/aktuelles-artikel.php): Das Motiv steht vollstaendig,
   aber klein rechts neben Titel und Datum - dort ist ohnehin Luft, und ein
   quadratisches Motiv muss so nicht beschnitten werden.

   Bewusst ein Raster im Beitragskopf und kein umflossenes Bild im Text: Bei
   einem Float wuerde der naechste Kasten mit Hintergrund (der wechselnde
   A-Kasten, ein Verweis, ein Hinweis) unter das Bild rutschen und sein
   Hintergrund darunter durchlaufen. Das Raster kann das nicht passieren. */
.beitrag-kopf--seitlich {
  /* 260 px: gross genug, dass man auf dem Motiv Einzelheiten erkennt, klein
     genug, dass die Textspalte des Titels nicht zu schmal wird. Darunter bleibt
     unter dem kuerzeren Titelblock etwas Luft - die nimmt der Fliesstext
     ohnehin nicht ein, weil er unter der ganzen Breite weiterlaeuft. */
  display: grid; grid-template-columns: 1fr 260px; gap: 28px;
  align-items: start; margin-bottom: 28px;
}
.beitrag-kopf--seitlich .beitrag-kopf__bild {
  /* Setzt die Bandmasse der Basisklasse zurueck: hier gilt das echte
     Seitenverhaeltnis der Datei, nichts wird beschnitten. */
  width: 100%; max-height: none; object-fit: fill; margin: 0;
}
@media (max-width: 700px) {
  .beitrag-kopf--seitlich { grid-template-columns: 1fr; gap: 20px; }
  .beitrag-kopf--seitlich .beitrag-kopf__bild { max-width: 320px; margin: 0 auto; }
}
/* Fliesstext eines Aktuelles-Beitrags.
   Die globalen Regeln geben Ueberschriften KEINEN oberen und Listen KEINEN
   unteren Abstand (h2 hat "margin: 0 0 0.5em", ul hat "margin: 0"). Auf den
   handgebauten Seiten fiel das nie auf, weil dort jeder Abschnitt in einem
   eigenen .section mit eigenem Innenabstand liegt. In einem durchlaufenden
   Artikel fehlt diese Gliederung: Zwischen Absatz und naechster Ueberschrift
   blieb nur der Absatzabstand, und direkt nach einer Aufzaehlung klebte die
   Ueberschrift an der Liste - so gemeldet fuer "In 5 Minuten zur
   Ersteinschaetzung" im CRA-Beitrag. */
.beitrag-text h2 { margin-top: 1.8em; }
.beitrag-text ul,
.beitrag-text ol { margin: 0 0 1em; }
.beitrag-text li { margin-bottom: 0.35em; }
/* Beginnt ein Beitrag mit einer Ueberschrift, soll sie nicht abgesetzt vom
   Bild darueber stehen. */
.beitrag-text > *:first-child { margin-top: 0; }

/* Abbildung im Fliesstext, mit Bildunterschrift. Wartet auf ihren ersten
   Einsatz: Im MVO-Beitrag soll bei Punkt 5 ein Motiv mit Compliance Klaus
   stehen, sobald es vorliegt (Stand 28.08.2026). */
.beitrag-abb { margin: 24px 0; }
.beitrag-abb img {
  width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius);
}
.beitrag-abb figcaption {
  margin-top: 8px; font-size: 0.88em; line-height: 1.5; color: var(--color-text-muted);
}

/* Hervorgehobener Einleitungssatz eines Beitrags - die eine Aussage, um die es
   geht, aus dem Absatz herausgenommen. */
.beitrag-lead {
  font-size: 1.15rem; line-height: 1.55; font-weight: 700;
  color: var(--color-primary-dark);
  border-left: 4px solid var(--color-primary); padding-left: 16px;
  margin: 0 0 22px;
}

/* Weiterfuehrender Verweis mitten im Beitrag: ein Satz plus Link, abgesetzt
   durch einen zarten Rahmen und den hellen Untergrund. Bewusst schwaecher als
   .hinweis (kein farbiger Balken) und bewusst kein Knopf - der Knopf am
   Beitragsende bleibt so die einzige echte Handlungsaufforderung. */
.beitrag-verweis {
  margin: 22px 0; padding: 14px 18px;
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.97em; line-height: 1.6;
}
.beitrag-verweis a { font-weight: 600; white-space: nowrap; }

/* --- Zeitleiste im Beitragstext -----------------------------------------
   Senkrechte Linie mit Punkten je Jahr. Die Linie ist ein ::before am
   Container, die Punkte sind ::before an den Einträgen - so bleibt das Markup
   eine schlichte Liste und es gibt keine Hilfs-Elemente nur fuer die Optik.
   Der letzte Punkt ist ausgefuellt: Dort steht die Gegenwart. */
.zeitleiste { position: relative; list-style: none; margin: 26px 0 24px; padding: 0 0 0 34px; }
.zeitleiste::before {
  content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--color-border) 0%, var(--color-primary) 100%);
}
.zeitleiste__punkt { position: relative; padding-bottom: 20px; }
.zeitleiste__punkt:last-child { padding-bottom: 0; }
.zeitleiste__punkt::before {
  content: ""; position: absolute; left: -34px; top: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--color-primary);
}
.zeitleiste__punkt:last-child::before { background: var(--color-primary); }
.zeitleiste__jahr {
  display: block; font-weight: 700; color: var(--color-primary-dark);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.95em;
  letter-spacing: 0.04em;
}
.zeitleiste__titel { display: block; font-weight: 600; margin: 1px 0 3px; }
.zeitleiste__text { display: block; color: var(--color-text-muted); font-size: 0.95em; }

/* --- Das wechselnde A ---------------------------------------------------
   "proCoA" steht fest, dahinter laufen Academy, Advisory und Agency durch -
   drei Endungen in einem Schacht, jede drei Sekunden sichtbar. Die Endungen
   liegen uebereinander (absolut), der Schacht behaelt die Breite des
   laengsten Wortes ueber ein unsichtbares Blindwort. */
.a-wechsel {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0;
  background: var(--color-primary-bg); border-radius: var(--radius);
  padding: 18px 22px; margin: 4px 0 18px;
  font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 700; color: var(--color-text);
}
.a-wechsel__wort { white-space: nowrap; }
.a-wechsel__a { color: var(--color-primary-dark); }
.a-wechsel__schacht { position: relative; display: inline-block; min-width: 6.5em; height: 1.2em; }
.a-wechsel__endung {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  color: var(--color-primary-dark); opacity: 0;
  animation: a-wechsel 9s linear infinite;
}
/* Rueckfall, wenn Animationen nicht laufen (alter Browser, abgeschaltet):
   Ohne diese Zeile stuende dort "proCoA" und daneben eine Luecke, weil alle
   drei Endungen auf opacity 0 stehen. Waehrend die Animation laeuft, hat sie
   Vorrang - die Zeile stoert dort also nicht. */
.a-wechsel__endung:first-child { opacity: 1; }
@keyframes a-wechsel {
  0%    { opacity: 0; }
  4%    { opacity: 1; }
  29%   { opacity: 1; }
  33%   { opacity: 0; }
  100%  { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* Ohne Bewegung nebeneinander statt uebereinander - dann steht dort
     "proCoAcademy Advisory Agency" in einer Zeile, was die Aussage ebenso
     traegt. */
  .a-wechsel__schacht { position: static; min-width: 0; height: auto; }
  .a-wechsel__endung { position: static; opacity: 1; animation: none; margin-right: 0.4em; }
}

.aktuelles-detail__quelle {
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--color-border);
}
.aktuelles-back { display: inline-block; margin-bottom: 20px; font-weight: 500; }

/* Kategorie-Filter auf der Aktuelles-Uebersicht */
.aktuelles-filter {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 28px;
}
.aktuelles-filter__btn {
  font: inherit; cursor: pointer;
  background: #fff; border: 1px solid var(--color-border); border-radius: 999px;
  padding: 7px 18px; font-size: 0.9em; font-weight: 600; color: var(--color-text);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.aktuelles-filter__btn:hover { border-color: var(--color-primary); }
.aktuelles-filter__btn.is-active {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}

@media (max-width: 880px) {
  .aktuelles-grid { grid-template-columns: 1fr; }
}

/* Querformat-Variante: Karte spannt alle Spalten, Bild und Text nebeneinander */
.aktuelles-card--wide {
  grid-column: 1 / -1;
  flex-direction: row;
}
.aktuelles-card--wide .aktuelles-card__bild {
  width: 38%; height: auto; aspect-ratio: auto; flex-shrink: 0;
}
.aktuelles-card--wide .aktuelles-card__body {
  justify-content: center;
}
@media (max-width: 880px) {
  .aktuelles-card--wide { flex-direction: column; }
  .aktuelles-card--wide .aktuelles-card__bild { width: 100%; aspect-ratio: 16 / 9; }
}

/* Weitere Kontaktmoeglichkeiten (Kontaktseite: Telefon / E-Mail / LinkedIn) */
.contact-methods {
  display: flex; flex-direction: column; gap: 14px; margin-top: 16px;
}
.contact-method {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px;
  color: var(--color-text); text-decoration: none;
}
.contact-method:hover { border-color: var(--color-primary); }
.contact-method__icon {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-bg-alt); color: var(--color-primary-dark);
}
.contact-method__icon svg { width: 20px; height: 20px; }
.contact-method__text { display: flex; flex-direction: column; gap: 2px; }
.contact-method__text strong { color: var(--color-primary-dark); }
.contact-method__text span { color: var(--color-text-muted); font-size: 0.95em; }

/* Forms */
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-weight: 600; margin-bottom: 6px; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; padding: 0.7em; border: 1px solid var(--color-border); border-radius: var(--radius);
  font-family: inherit; font-size: 1em;
}
.form-note { font-size: 0.85em; color: var(--color-text-muted); }

/* Fehlerzustand einzelner Felder (siehe includes/contact-form.php +
   forms/contact-handler.php): rot hervorheben, damit der Blick sofort auf
   das betroffene Feld faellt, statt nur eine allgemeine Meldung zu zeigen. */
.form-field--error label { color: var(--color-funsafe-dark); }
.form-field--error input,
.form-field--error textarea,
.form-field--error select {
  border-color: var(--color-funsafe); background: var(--color-funsafe-bg);
}
.form-field__error {
  display: block; font-size: 0.85em; font-weight: 600; color: var(--color-funsafe-dark); margin-top: 6px;
}

/* Checkbox-Felder: Kaestchen links, Text daneben (nicht darueber) */
.form-field--checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.form-field--checkbox input[type="checkbox"] {
  width: auto;
  margin-top: 4px;
  flex-shrink: 0;
}
.form-field--checkbox label { margin-bottom: 0; font-weight: 400; }

/* Mehrfachauswahl-Gruppe (z. B. "Besonderes Interesse" im Kontaktformular).
   Hinweis: Die Selektoren sind hier bewusst ".checkbox-group .checkbox-group__item"
   (zwei Klassen), damit sie die allgemeine Regel ".form-field label" (Klasse+Tag)
   an Spezifitaet ueberbieten - sonst wuerden Checkbox-Texte faelschlich fett und
   als Block (untereinander) statt als Zeile (Kaestchen + Text) dargestellt. */
.form-field__legend { display: block; font-weight: 600; margin-bottom: 6px; }
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.checkbox-group .checkbox-group__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  margin-bottom: 0;
  flex: 0 0 auto;
}
.checkbox-group .checkbox-group__item input[type="checkbox"] { width: auto; margin: 0; flex-shrink: 0; }
.checkbox-group .checkbox-group__item input[type="radio"] { width: auto; margin: 0; flex-shrink: 0; }

/* Datei-Upload-Felder (siehe risikobeurteilung/audit-upload.php): schlichter
   nativer Datei-Dialog statt der generischen Textfeld-Umrahmung. */
.form-field input[type="file"] {
  width: 100%; padding: 0.5em 0; border: none; background: transparent; font-family: inherit; font-size: 0.95em;
}

/* Farbige Abschnitts-Ueberschriften innerhalb eines Formulars (siehe
   risikobeurteilung/audit-upload.php) - petrolfarbener linker Balken vor
   jedem Zwischenschritt (Rechnungsdaten, Ansprechpartner, ...). */
.form-section-title {
  border-left: 4px solid var(--color-risk); padding-left: 12px; margin: 32px 0 16px;
}
.form-section-title h2 { margin: 0; color: var(--color-risk-dark); }

/* Einrueckung der Formularfelder unter jeder Zwischenueberschrift, damit die
   Fuehrung durch den Ablauf (Rechnungsdaten -> Ansprechpartner -> ...)
   praesenter ist. Duenne fortlaufende Linie knuepft optisch an den
   Balken der .form-section-title darueber an. */
.form-section-body {
  border-left: 2px solid var(--color-border); margin-left: 2px; padding-left: 16px; padding-bottom: 4px;
}

/* Datenschutz-Vertrauenshinweise direkt vor dem Datei-Upload, siehe
   risikobeurteilung/audit-upload.php. */
.privacy-hinweise {
  background: var(--color-risk-bg); border: 1px solid var(--color-risk); border-radius: var(--radius);
  padding: 12px 16px; margin: 0 0 20px; font-size: 0.9em; color: var(--color-risk-dark);
}
.privacy-hinweise ul { margin: 0; padding-left: 18px; }
.privacy-hinweise li { margin-bottom: 4px; }
.privacy-hinweise li:last-child { margin-bottom: 0; }

/* Rechnungsdaten und Ansprechpartner nebeneinander statt untereinander
   (risikobeurteilung/audit-upload.php), um die Formularlaenge zu halbieren. */
.form-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
@media (max-width: 700px) {
  .form-two-col { grid-template-columns: 1fr; }
}

/* Dichteres Layout speziell fuer das Audit-Upload-Formular - bewusst als
   Modifikator auf dem Formular selbst, nicht an den globalen .form-field-
   Regeln, damit das Kontaktformular unveraendert bleibt. */
.audit-upload-form .form-field { margin-bottom: 12px; }
.audit-upload-form .form-section-title { margin: 20px 0 10px; }
.audit-upload-form .form-section-title:first-of-type { margin-top: 0; }

/* Paket-Auswahl als reduzierte Kartenversion der Pakete auf audit.php,
   nebeneinander (siehe risikobeurteilung/audit-upload.php). Farblogik
   identisch zu audit.php: Sofortcheck = petrol (--color-risk), Vollaudit =
   gruen (--color-primary). */
/* Die Pakete stehen untereinander, nicht nebeneinander: Sofortcheck und
   Vollaudit unterscheiden sich in Leistungsumfang und Preis, und
   uebereinander liegende Zeilen lassen sich Punkt fuer Punkt vergleichen -
   nebeneinander muss das Auge zwischen zwei Spalten hin und her springen.
   Ausserdem bleiben die Karten so breit genug fuer ihre Aufzaehlungen. */
.paket-choice { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 10px 0; }
.paket-card {
  position: relative; display: block; cursor: pointer;
  border: 2px solid var(--color-border); border-left: 4px solid var(--color-border);
  border-radius: 10px; padding: 16px 40px 14px 16px; background: var(--color-bg-alt);
}
.paket-card input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.paket-card__radio {
  position: absolute; top: 16px; right: 14px; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--color-border); background: #fff;
}
.paket-card__title { display: block; font-size: 1rem; margin-bottom: 8px; }
.paket-card__points { margin: 0 0 10px; padding-left: 18px; font-size: 0.9em; color: var(--color-text-muted); }
.paket-card__price { display: block; font-weight: 700; }

.paket-card--sofortcheck { border-left-color: var(--color-risk); }
.paket-card--sofortcheck:has(input:checked) { border-color: var(--color-risk); background: var(--color-risk-bg); }
.paket-card--sofortcheck:has(input:checked) .paket-card__title,
.paket-card--sofortcheck:has(input:checked) .paket-card__price { color: var(--color-risk-dark); }
.paket-card--sofortcheck:has(input:checked) .paket-card__radio { border-color: var(--color-risk); background: var(--color-risk); }

.paket-card--vollaudit { border-left-color: var(--color-primary); }
.paket-card--vollaudit:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-bg); }
.paket-card--vollaudit:has(input:checked) .paket-card__title,
.paket-card--vollaudit:has(input:checked) .paket-card__price { color: var(--color-primary-dark); }
.paket-card--vollaudit:has(input:checked) .paket-card__radio { border-color: var(--color-primary); background: var(--color-primary); }

.paket-card:focus-within { outline: 2px solid var(--color-text-muted); outline-offset: 2px; }


/* "Popup" fuer rechtliche Inhalte (z. B. Datenschutzerklaerung) aus Formularen,
   damit die aktuelle Seite nicht verlassen wird und kein neuer Tab aufgeht. */
.legal-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; z-index: 1002;
  padding: 24px;
}
.legal-modal__box {
  background: #fff; border-radius: var(--radius); width: 100%; max-width: 760px;
  height: 85vh; position: relative; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.legal-modal__close {
  position: absolute; top: 8px; right: 8px; width: 36px; height: 36px;
  border: none; background: #fff; border-radius: 50%; font-size: 1.3em; cursor: pointer;
  box-shadow: var(--shadow); z-index: 1;
}
.legal-modal__box iframe { flex: 1; width: 100%; border: none; border-radius: var(--radius); }

/* Bild-Lightbox: vergroessert per class="js-zoomable" markierte Bilder beim
   Anklicken fast fensterfuellend als Overlay (z. B. Dokumenten-Auszuege auf
   risikobeurteilung/audit-beispiel.php). Siehe assets/js/main.js. */
.img-lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center; z-index: 1003;
  padding: 24px;
}
.img-lightbox__img,
#img-lightbox-img {
  max-width: 95vw; max-height: 90vh; width: auto; height: auto;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.img-lightbox__close {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px;
  border: none; background: #fff; border-radius: 50%; font-size: 1.4em; cursor: pointer;
  box-shadow: var(--shadow); z-index: 1;
}
.js-zoomable { cursor: zoom-in; }

/* Footer */
.site-footer { background: var(--color-text); color: #eee; margin-top: 64px; }
.site-footer a { color: #eee; }
.site-footer__inner {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px;
  padding: 48px 20px;
}
.site-footer__col h3 { color: #fff; font-size: 1em; margin-bottom: 12px; }
.site-footer__col ul { list-style: none; padding: 0; }
.site-footer__col li { margin-bottom: 8px; }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.15); padding: 16px 0; font-size: 0.85em; color: #bbb;
}

/* Kontakt-Icons (Telefon/E-Mail/LinkedIn) im Footer, unter dem "Kontakt"-Link */
.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.footer-social__icon {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.1); color: #eee;
}
.footer-social__icon:hover { background: var(--color-primary); color: #fff; }
.footer-social__icon svg { width: 16px; height: 16px; }

/* Platzhalter-Kennzeichnung: auf ALLEN Seiten verwendet, um Inhalte
   sichtbar zu markieren, die vor Go-Live noch final ergänzt/entschieden
   werden müssen. Bewusst grell, damit es beim Durchklicken sofort auffällt. */
.placeholder-flag {
  background: #FFC107;
  color: #402d00;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  box-shadow: 0 0 0 2px #FFC107;
  white-space: normal;
}
.placeholder-flag::before {
  content: "⚠ ";
}

/* Cookie banner */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; background: #fff;
  border-top: 1px solid var(--color-border); box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
  z-index: 1000;
}
.cookie-banner__inner {
  max-width: var(--container-width); margin: 0 auto; padding: 20px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
}
.cookie-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.cookie-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center; z-index: 1001;
}
.cookie-modal__box { background: #fff; padding: 28px; border-radius: var(--radius); max-width: 420px; width: 90%; }
.cookie-modal__row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; }
/* Erlaeuterung unter dem Kategorienamen: Die Einwilligung soll erkennen
   lassen, welches Werkzeug wozu eingesetzt wird. */
.cookie-modal__hint {
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.cookie-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* Responsive */
@media (max-width: 880px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero-stats--four { grid-template-columns: repeat(2, 1fr); }
  .hero-stats--three { grid-template-columns: 1fr; }
  .card-grid,
  .card-grid--cols-2,
  .card-grid--cols-3,
  .card-grid--two { grid-template-columns: 1fr; }
  .card-grid--two { max-width: none; }
  .funnel-boxes { grid-template-columns: 1fr; }
  .funnel-boxes__arrow { transform: rotate(90deg); padding: 8px 0; }
  .process-cardchain__circle { width: 48px; height: 48px; font-size: 1.5rem; top: 8px; }
  .process-cardchain__step .card { margin-left: 40px; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .nav-toggle { display: flex; }

  /* Das Menue braucht eine Hoehenbegrenzung UND einen eigenen Bildlauf.
     Ohne beides hing das Panel als absolut positioniertes Element in der
     klebenden Kopfzeile unten aus dem Bild heraus, und die letzten
     Menuepunkte waren auf dem Telefon nicht erreichbar (behoben 25.08.2026).
     Die Hoehe setzt assets/js/main.js beim Oeffnen exakt auf den Platz
     unterhalb der Kopfzeile; der Wert hier ist der Rueckfall, wenn kein
     JavaScript laeuft. overscroll-behavior verhindert, dass am Listenende
     die Seite dahinter mitscrollt. */
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--color-border);
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-shadow: 0 12px 24px rgba(40, 40, 40, 0.12);
  }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; align-items: flex-start; gap: 0; }
  .main-nav li { width: 100%; border-top: 1px solid var(--color-border); }
  /* Kompakter als am Desktop: Bei 21 Zielen entscheiden 3px je Zeile
     darueber, ob die erste Ebene ohne Bildlauf sichtbar ist. */
  .main-nav a { display: block; padding: 11px 20px; }

  /* Aufklapp-Schaltflaeche. Sie steht rechts neben dem Menuetext, nicht
     darueber: Ein Tipp auf den Text fuehrt zur Uebersichtsseite, ein Tipp
     auf den Pfeil klappt die Unterpunkte auf. Beide Trefferflaechen sind
     mindestens 44px hoch. Erzeugt wird der Knopf von assets/js/main.js -
     ohne JavaScript gibt es ihn nicht, dann bleibt alles aufgeklappt (siehe
     .js-akkordeon unten). */
  .nav-aufklapp {
    position: absolute; top: 0; right: 0;
    width: 52px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; border-left: 1px solid var(--color-border);
    cursor: pointer; color: var(--color-text-muted); padding: 0;
  }
  .nav-aufklapp::before {
    content: ""; width: 8px; height: 8px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); margin-top: -4px;
    transition: transform 0.15s ease;
  }
  .nav-aufklapp[aria-expanded="true"]::before { transform: rotate(-135deg); margin-top: 3px; }
  .nav-aufklapp:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

  /* Mobil: Untermenue ist eingerueckt statt als Hover-Overlay. */
  .has-dropdown { position: relative; }
  .has-dropdown .dropdown {
    display: block; position: static; margin: 0; border: none; border-radius: 0;
    box-shadow: none; background: var(--color-bg-alt); padding: 0;
  }
  .has-dropdown .dropdown a { padding: 10px 20px 10px 36px; font-weight: 400; }

  /* Mobil wird die horizontale Zeilen-Darstellung des Mega-Menues
     aufgeloest - auf schmalen Bildschirmen bleibt sonst zu wenig Platz fuer
     die Unterpunkte einer Leistung. */
  .has-megamenu .megamenu {
    display: block; position: static; width: auto; margin: 0; border: none; border-radius: 0;
    box-shadow: none; background: var(--color-bg-alt); padding: 2px 20px 8px;
  }
  .megamenu__grid { grid-template-columns: 1fr; gap: 0; }
  .megamenu__item,
  .megamenu__dach { position: relative; }
  .megamenu__item { display: block; padding: 4px 0 4px 16px; }
  .megamenu__title { flex: none; padding-right: 56px; }
  .megamenu__item ul,
  .megamenu__dach ul { display: block; }
  .megamenu__item ul a,
  .megamenu__dach ul a { display: block; padding: 8px 0; white-space: normal; }

  /* Akkordeon: Diese Klasse setzt main.js, sobald die Aufklapp-Knoepfe
     stehen. Nur dann werden Ebenen eingeklappt - ohne JavaScript bliebe
     sonst alles unerreichbar. */
  .main-nav.js-akkordeon .has-megamenu > .megamenu,
  .main-nav.js-akkordeon .has-dropdown > .dropdown,
  .main-nav.js-akkordeon .megamenu__item > ul,
  .main-nav.js-akkordeon .megamenu__dach > ul { display: none; }
  .main-nav.js-akkordeon .is-aufgeklappt > .megamenu,
  .main-nav.js-akkordeon .is-aufgeklappt > .dropdown,
  .main-nav.js-akkordeon .is-aufgeklappt > ul { display: block; }

  /* Auch mobil bleiben Dach und Vorzeile buendig links, waehrend die
     Feld-Eintraege um 16px eingerueckt sind - der Versatz ist hier das einzige
     Mittel, das die Ebenen unterscheidet. Abstaende knapper als frueher,
     damit die erste Ebene ohne Bildlauf auf den Schirm passt. */
  .megamenu__dach { padding: 2px 0 0; }
  .megamenu__overline { margin: 4px 0 0; padding: 6px 0 0; }
}
@media (max-width: 560px) {
  .site-footer__inner { grid-template-columns: 1fr; }
}

/* ============================================================
   CRA Quick check (cybersecurity/cra-schnelltest.php)
   Gescopter Block fuer das interaktive Quiz-Widget - alle Klassen
   werden vom Original-JS erzeugt (Logik unveraendert uebernommen),
   hier nur mit proCoA-Farben/Radius/Schrift statt eigenem
   Mini-Designsystem versehen. Bewusst unter .cra-check gekapselt,
   damit generische Namen wie .row/.k/.v/.note keine anderen Seiten
   beeinflussen.
   ============================================================ */
.cra-check { max-width: 760px; margin: 0 auto; }
.cra-check .card { position: relative; }
.cra-check .eyebrow { color: var(--color-cyber-dark); }

.cra-check .intro h2 { font-size: clamp(1.7rem, 4vw, 2.1rem); margin: 0.3em 0 0.35em; }
.cra-check .lede { font-size: 1.05rem; color: var(--color-text-muted); max-width: 52ch; margin: 0 0 22px; }

/* Kopf der Startseite: Einfuehrungstext links, die drei Merkmale rechts
   daneben. Der Text ist auf 52ch begrenzt (siehe .lede) - rechts davon blieb
   auf breiten Karten viel Platz leer, waehrend die drei Chips darunter eine
   eigene Zeile belegten. Jetzt fuellen sie den freien Raum.

   Flex mit wrap statt Grid: Sobald der Text seine Mindestbreite von 34ch
   nicht mehr halten kann, rutschen die Chips von selbst darunter - ohne
   eigene Media Query. */
.cra-check .intro-kopf { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0 0 26px; }
.cra-check .intro-kopf .lede { flex: 1 1 34ch; margin: 0; }
.cra-check .intro-kopf .meta { flex: 0 0 auto; flex-direction: column; align-items: flex-start; margin: 0; }
@media (max-width: 720px) {
  /* Untereinander bringt die Spalte keinen Platzgewinn mehr - dann wieder
     als Reihe, wie vorher. */
  .cra-check .intro-kopf .meta { flex-direction: row; flex-wrap: wrap; }
}
.cra-check .meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.cra-check .chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px;
  color: var(--color-text-muted); background: var(--color-bg-alt); border: 1px solid var(--color-border);
  padding: 6px 11px; border-radius: 999px;
}
.cra-check .chip svg { width: 14px; height: 14px; stroke: var(--color-cyber); fill: none; stroke-width: 1.7; }

.cra-check .steps-preview {
  list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 1px;
  background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden;
}
.cra-check .steps-preview li { background: #fff; padding: 13px 16px; display: flex; gap: 13px; align-items: baseline; font-size: 14.5px; }
.cra-check .steps-preview .n {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px;
  color: var(--color-cyber); flex: 0 0 auto; width: 22px;
}
.cra-check .steps-preview b { font-weight: 600; }
.cra-check .steps-preview span.d { color: var(--color-text-muted); font-size: 13.5px; }

.cra-check .btn-primary,
.cra-check .btn-signal,
.cra-check .btn-ghost {
  font-family: inherit; font-weight: 600; font-size: 1rem; border: none; border-radius: var(--radius);
  cursor: pointer; padding: 0.75em 1.5em; display: inline-flex; align-items: center; gap: 10px;
}
.cra-check .btn-primary { background: var(--color-cyber); color: #fff; }
.cra-check .btn-primary:hover { background: var(--color-cyber-dark); }
.cra-check .btn-signal { background: var(--color-accent); color: #fff; }
.cra-check .btn-signal:hover { background: var(--color-accent-dark); }
.cra-check .btn-ghost { background: transparent; color: var(--color-text-muted); padding: 0.5em 0.3em; font-weight: 500; font-size: 0.92rem; }
.cra-check .btn-ghost:hover { color: var(--color-text); }
.cra-check .btn svg,
.cra-check .btn-primary svg, .cra-check .btn-signal svg, .cra-check .btn-ghost svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }
.cra-check .fineprint { font-size: 0.85em; color: var(--color-text-muted); margin-top: 18px; line-height: 1.5; }

.cra-check .topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cra-check .stepcount { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px; color: var(--color-text-muted); letter-spacing: 0.05em; }
.cra-check .section-tag { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-dark); }
.cra-check .bar { height: 5px; background: var(--color-bg-alt); border-radius: 999px; overflow: hidden; margin-bottom: 26px; border: 1px solid var(--color-border); }
.cra-check .bar > i { display: block; height: 100%; background: var(--color-accent); width: 0; transition: width 0.35s cubic-bezier(0.4,0,0.2,1); }

.cra-check .q-title { font-size: clamp(1.2rem, 3vw, 1.5rem); margin: 0 0 8px; }
.cra-check .q-help { color: var(--color-text-muted); font-size: 0.92em; margin: 0 0 22px; }
/* Die ausgenommenen Produktgruppen als schmale Normentabelle: links die
   Gruppe, rechts die Fundstelle, eine Zeile je Eintrag mit feiner
   Trennlinie.

   Vorher waren es sieben zweizeilige Kaesten in zwei Spalten, also vier
   Kachelreihen - und ihre Hoehe entstand fast vollstaendig aus der Floskel
   "durch ... geregelt", die sich siebenmal wiederholte. Ohne Rahmen und
   Innenabstaende bleibt derselbe Inhalt in sieben Zeilen stehen. Die
   Tabellenform ist hier auch die ehrlichere: Es sind keine anklickbaren
   Optionen, sondern ein Verzeichnis - und ein Normenverzeichnis ist genau
   die Darstellung, die diese Zielgruppe taeglich vor sich hat.

   dl/dt/dd statt ul/li, weil es Begriff und Fundstelle sind. */
.cra-check .q-help-liste {
  display: grid; grid-template-columns: 1fr auto;
  gap: 0 16px; margin: 12px 0 14px;
}
.cra-check .q-help-liste dt,
.cra-check .q-help-liste dd {
  margin: 0; padding: 5px 0; border-top: 1px solid var(--color-border);
}
.cra-check .q-help-liste dt { color: var(--color-text); font-weight: 600; }
.cra-check .q-help-liste dd {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.88em; color: var(--color-text-muted);
  text-align: right; white-space: nowrap;
}
@media (max-width: 520px) {
  /* Zu schmal fuer zwei Spalten: Fundstelle unter die Gruppe, Trennlinie
     dann nur noch oberhalb der Gruppe. */
  .cra-check .q-help-liste { grid-template-columns: 1fr; }
  .cra-check .q-help-liste dd {
    border-top: none; padding-top: 0; text-align: left; white-space: normal;
  }
}
/* Hinweis direkt ueber den Knoepfen, wenn eine Frage ohne die richtige
   Handlungsanweisung nicht selbsterklaerend ist (Feld 'hinweis' an der Frage).
   Fett und mit Akzentkante, damit er nicht als weiterer Hilfetext gelesen und
   damit ueberblaettert wird. */
.cra-check .q-hinweis {
  font-weight: 700; color: var(--color-text); margin: 0 0 18px;
  border-left: 3px solid var(--color-accent); padding-left: 12px;
}
.cra-check .q-multi-hint {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text-muted); margin: -14px 0 14px;
}

.cra-check .opts { display: grid; gap: 10px; margin-bottom: 8px; }
.cra-check .opt {
  text-align: left; width: 100%; background: #fff; cursor: pointer;
  border: 1.5px solid var(--color-border); border-radius: var(--radius); padding: 15px 16px;
  display: flex; gap: 13px; align-items: flex-start; font-family: inherit; font-size: 1rem;
  color: var(--color-text); line-height: 1.35;
}
.cra-check .opt:hover { border-color: var(--color-cyber); background: var(--color-bg-alt); }
.cra-check .opt .mark {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid var(--color-border);
  display: grid; place-items: center;
}
.cra-check .opt.multi .mark { border-radius: 6px; }
.cra-check .opt:not(.multi) .mark { border-radius: 999px; }
.cra-check .opt .mark svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; fill: none; opacity: 0; }
.cra-check .opt.sel { border-color: var(--color-cyber); background: var(--color-cyber-bg); }
.cra-check .opt.sel .mark { background: var(--color-cyber); border-color: var(--color-cyber); }
.cra-check .opt.sel .mark svg { opacity: 1; }
.cra-check .opt .lbl { flex: 1; }
.cra-check .opt .lbl-sub { display: block; font-size: 0.85em; color: var(--color-text-muted); margin-top: 3px; }

.cra-check .nav { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; gap: 12px; flex-wrap: wrap; }

.cra-check .verdict { border-radius: var(--radius); padding: 22px 24px; margin-bottom: 22px; border: 1px solid var(--color-border); position: relative; overflow: hidden; }
.cra-check .verdict::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.cra-check .verdict.ok { background: var(--color-primary-bg); }
.cra-check .verdict.ok::before { background: var(--color-primary); }
.cra-check .verdict.watch { background: var(--color-accent-bg); }
.cra-check .verdict.watch::before { background: var(--color-accent); }
.cra-check .verdict.out { background: var(--color-funsafe-bg); }
.cra-check .verdict.out::before { background: var(--color-funsafe); }
.cra-check .verdict.info { background: var(--color-cyber-bg); }
.cra-check .verdict.info::before { background: var(--color-cyber); }
.cra-check .verdict .vlabel { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 6px; }
.cra-check .verdict h2 { font-size: 1.3rem; margin: 0 0 8px; }
.cra-check .verdict p { margin: 0; font-size: 0.92em; color: var(--color-text-muted); }

.cra-check .sheet { border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; margin-bottom: 22px; }
.cra-check .sheet-head {
  background: var(--color-cyber); color: #fff; padding: 12px 18px; display: flex; align-items: center; justify-content: space-between;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; letter-spacing: 0.1em;
}
.cra-check .row { display: grid; grid-template-columns: 170px 1fr; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--color-border); align-items: start; }
.cra-check .row:first-of-type { border-top: none; }
.cra-check .row .k { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; letter-spacing: 0.04em; color: var(--color-text-muted); text-transform: uppercase; padding-top: 2px; }
.cra-check .row .v { font-size: 0.95rem; }
.cra-check .row .v .sub { display: block; color: var(--color-text-muted); font-size: 0.85em; margin-top: 3px; }
.cra-check .tier { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.cra-check .dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
@media (max-width: 560px) { .cra-check .row { grid-template-columns: 1fr; gap: 4px; } }

.cra-check .block-h { font-weight: 600; font-size: 1rem; margin: 26px 0 12px; display: flex; align-items: center; gap: 9px; }
.cra-check .block-h::before { content: ""; width: 16px; height: 2px; background: var(--color-accent); display: inline-block; }
.cra-check .drivers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cra-check .drivers li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92em; color: var(--color-text-muted); }
.cra-check .drivers li svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px; stroke: var(--color-accent); fill: none; stroke-width: 2; }

.cra-check .timeline { list-style: none; margin: 0; padding: 0; }
.cra-check .timeline li { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 11px 0; border-top: 1px dashed var(--color-border); font-size: 0.92em; }
.cra-check .timeline li:first-child { border-top: none; }
.cra-check .timeline .date { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; color: var(--color-cyber-dark); font-weight: 500; }
.cra-check .timeline .now { color: var(--color-accent-dark); }

.cra-check .note { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-left: 3px solid var(--color-cyber); border-radius: var(--radius); padding: 14px 16px; font-size: 0.88em; color: var(--color-text-muted); margin: 16px 0; }
.cra-check .note b { color: var(--color-text); }
.cra-check .note.safety { border-left-color: var(--color-funsafe); background: var(--color-funsafe-bg); }

.cra-check .legal { border: 1px dashed var(--color-border); border-radius: var(--radius); padding: 13px 15px; font-size: 0.8em; color: var(--color-text-muted); line-height: 1.55; margin: 24px 0 0; }
.cra-check .legal b { color: var(--color-text); }

.cra-check .cta { background: var(--color-cyber-dark); color: #fff; border-radius: var(--radius); padding: 26px 26px 24px; margin-top: 22px; }
.cra-check .cta h3 { font-size: 1.15rem; margin: 0 0 6px; }
.cra-check .cta p { margin: 0 0 18px; color: #C7D3DA; font-size: 0.92em; max-width: 48ch; }
.cra-check .cta .row-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.cra-check .cta .btn-ghost { color: #C7D3DA; }
.cra-check .cta .btn-ghost:hover { color: #fff; }

/* Helle Flaeche fuer das Kontaktformular innerhalb des dunklen CTA-Blocks.
   Ohne sie stuenden Beschriftungen und Haken-Texte auf dunklem Blau und
   waeren praktisch nicht lesbar (gemessen 1,8:1 bzw. 1,2:1 statt der
   geforderten 4,5:1). Das Formular nutzt darin die Standardklassen der
   Website, damit es aussieht wie jedes andere Kontaktformular. */
.cra-check .cta-formular {
  background: #fff;
  color: var(--color-text);
  border-radius: var(--radius);
  padding: 22px 22px 16px;
  margin-bottom: 18px;
}
.cra-check .cta-formular .form-field:last-of-type { margin-bottom: 8px; }
.cra-check .cta-formular .form-note { margin: 0; }
/* Das Ausblenden uebernimmt .cra-check .hidden weiter unten. */
.cra-check .cta-formular .form-field__error { margin: 0 0 10px; }
/* Zustand nach dem Absenden: statt des Formulars nur noch der Hinweis. */
.cra-check .cta-formular--gesendet { padding: 20px 22px; border-left: 4px solid var(--color-primary); }
.cra-check .cta-formular--gesendet p { margin: 0 0 8px; font-size: 0.95em; color: var(--color-text); }
.cra-check .cta-formular--gesendet p:last-child { margin-bottom: 0; color: var(--color-text-muted); }
/* Auf breiten Schirmen die vier kurzen Felder zweispaltig - die Haken und
   der Spam-Schutz bleiben ueber die volle Breite. */
@media (min-width: 700px) {
  .cra-check .cta-formular {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px;
  }
  .cra-check .cta-formular > .form-field--checkbox,
  .cra-check .cta-formular > #cra-turnstile,
  .cra-check .cta-formular > .form-field__error,
  .cra-check .cta-formular > .form-note { grid-column: 1 / -1; }
}

.cra-check .formgrid { display: grid; gap: 14px; margin-bottom: 16px; }
.cra-check .flabel { display: block; font-size: 0.86em; font-weight: 600; color: var(--color-text); margin-bottom: 6px; }
.cra-check .flabel em { color: var(--color-accent-dark); font-style: normal; }
.cra-check .field input {
  width: 100%; font-family: inherit; font-size: 0.95rem; padding: 0.7em; border: 1.5px solid var(--color-border);
  border-radius: var(--radius); background: #fff; color: var(--color-text);
}
.cra-check .field input:focus { outline: none; border-color: var(--color-cyber); }
.cra-check .check { display: flex; gap: 11px; align-items: flex-start; font-size: 0.9em; color: var(--color-text-muted); cursor: pointer; margin-bottom: 6px; line-height: 1.4; }
.cra-check .check input { margin-top: 2px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--color-cyber); }
.cra-check .ferror { color: var(--color-funsafe-dark); font-size: 0.85em; margin: 6px 0 0; }

.cra-check .disclaimer { font-size: 0.78em; color: var(--color-text-muted); line-height: 1.55; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--color-border); }
.cra-check .hidden { display: none !important; }
.cra-check .fade { animation: cra-check-fade 0.28s ease; }
@keyframes cra-check-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cra-check .fade { animation: none; }
  .cra-check .bar > i { transition: none; }
}

/* Zwei Fristen im Hero der CRA-Fristen-Seite: nebeneinander, auf schmalen
   Displays untereinander. Anders als auf /aktuelles/ mit den grossen
   Countdown-Badges und mehrzeiliger Erlaeuterung. */
.fristen-hero {
  display: grid;
  /* min(320px, 100%) statt nur 320px: auto-fit bricht zwar von selbst auf eine
     Spalte um, die Spalte behielt aber ihre Mindestbreite von 320px. Auf einem
     320px breiten Display bleiben nach dem Innenabstand des Containers nur
     rund 280px - die Kachel ragte also heraus und die Seite liess sich
     horizontal schieben. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 24px;
  margin-top: 8px;
}
.fristen-hero__frist { display: flex; align-items: center; gap: 16px; }

/* Fristenzeile im Hero von /aktuelles/: zwei mitlaufende Countdowns
   nebeneinander, auf schmalen Displays untereinander. */
.aktuelles-hero__fristen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 720px;
  margin-top: 24px;
}
.aktuelles-hero__frist {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.aktuelles-hero__frist strong { display: block; font-size: 0.95em; }
.aktuelles-hero__frist span {
  display: block;
  margin-top: 2px;
  font-size: 0.8em;
  color: var(--color-text-muted);
}
@media (max-width: 700px) {
  .aktuelles-hero__fristen { grid-template-columns: 1fr; }
}

/* Bildgalerie fuer Dokumentenauszuege (Praxisbeispiel KI-Audit).
   Die Vorlagen haben sehr unterschiedliche Seitenverhaeltnisse - hochkant bei
   den Pruefberichten, quer bis sehr breit bei den Tabellen. Einheitlich hohe
   Vorschauen mit object-fit: cover fangen das auf; object-position: top laesst
   die Kopfzeile sichtbar, sodass die Vorschau erkennbar bleibt. Das
   vollstaendige Bild oeffnet die Lightbox (class="js-zoomable"). */
.bild-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.bild-galerie img {
  width: 100%;
  height: 148px;
  object-fit: cover;
  object-position: top;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  display: block;
}
.bild-galerie img:hover { border-color: var(--color-primary); }
.bild-galerie img:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.bild-galerie__hinweis {
  margin: 8px 0 0;
  font-size: 0.82em;
  color: var(--color-text-muted);
}

/* Nummerierte Prozessschritte in einer Karte (CE-Konformitaetsprozess).
   Eigene Klasse, damit die Zahlen sichtbar hervortreten, ohne die globale
   Listenformatierung anzufassen. */
.ce-schritte { margin: 0; padding-left: 0; list-style: none; counter-reset: ce-schritt; }
.ce-schritte li {
  counter-increment: ce-schritt;
  position: relative;
  padding: 10px 0 10px 42px;
  border-top: 1px solid var(--color-border);
}
.ce-schritte li:first-child { border-top: none; padding-top: 0; }
.ce-schritte li::before {
  content: counter(ce-schritt);
  position: absolute;
  left: 0;
  top: 8px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.8em; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ce-schritte li:first-child::before { top: -2px; }

/* Vergleichs- und Faktentabelle in Inhaltsseiten (z. B. Maschinenrichtlinie
   gegenueber Maschinenverordnung). Auf schmalen Displays horizontal scrollbar
   statt gequetscht - dafuer den Wrapper .content-table-wrap verwenden. */
.content-table-wrap { overflow-x: auto; margin: 20px 0; }
.content-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
  min-width: 560px;
}
.content-table th,
.content-table td {
  border-bottom: 1px solid var(--color-border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.content-table th {
  background: var(--color-bg-alt);
  font-weight: 600;
  border-bottom: 2px solid var(--color-border);
}
.content-table tbody th {
  background: transparent;
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
}
.content-table tr:last-child td,
.content-table tr:last-child th { border-bottom: none; }
/* Hervorhebung der Spalte, die den neuen Rechtsstand zeigt */
.content-table td.is-neu { background: var(--color-primary-bg); }

/* Wortgetreues Rechts- oder Normzitat mit Quellenzeile (siehe rechtszitat()
   in includes/config.php). Bewusst deutlich als Zitat erkennbar: Die Herkunft
   muss fuer Leser eindeutig sein, weil der Wortlaut amtlicher Werke
   unveraendert wiedergegeben wird. */
.legal-quote {
  margin: 20px 0;
  padding: 16px 20px;
  background: var(--color-bg-alt);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.legal-quote p {
  margin: 0;
  font-size: 0.95em;
  line-height: 1.6;
  hyphens: auto;
}
.legal-quote p::before { content: "„"; }
.legal-quote p::after { content: "“"; }
.legal-quote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 0.82em;
  font-weight: 600;
  color: var(--color-text-muted);
}
.legal-quote cite::before { content: "— "; }

/* ---------------------------------------------------------------------------
   Seminarbereich (/seminare/)
   Bewusst nur Layout- und Abstandsklassen: Alle Farben kommen aus den
   vorhandenen Bereichsfarben ueber SEMINAR_FARBEN in
   includes/seminare-data.php (hero--framed-*, card--accent-*,
   highlight-banner--*), damit der Bereich automatisch konsistent bleibt.
   --------------------------------------------------------------------------- */

/* Abstand vor Folge-Ueberschriften innerhalb eines Lesetext-Abschnitts */
.seminar-h2 { margin-top: 36px; }

/* Programm: Tages-Zwischenueberschrift bei zwei- oder mehrtaegigen Seminaren */
.seminar-programm__tag {
  margin: 28px 0 12px;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.seminar-programm__tag:first-child { margin-top: 0; }
.seminar-programm__block { margin-bottom: 16px; }
.seminar-programm__titel { margin-bottom: 8px; font-size: 1.05em; }
.seminar-programm__block ul { margin: 0; }
.seminar-programm__block li { margin-bottom: 5px; }

/* Organisatorisches: zweispaltige Definitionsliste, mobil einspaltig */
.seminar-fakten {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 0;
  margin: 0;
}
.seminar-fakten dt {
  font-weight: 600;
  padding: 12px 16px 12px 0;
  border-top: 1px solid var(--color-border);
}
.seminar-fakten dd {
  margin: 0;
  padding: 12px 0;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
}
@media (max-width: 620px) {
  .seminar-fakten { grid-template-columns: 1fr; }
  .seminar-fakten dt { padding-bottom: 2px; border-top: 1px solid var(--color-border); }
  .seminar-fakten dd { padding-top: 0; border-top: none; }
}

/* Abschluss-CTA am Seitenende */
.seminar-abschluss { text-align: center; }
.seminar-abschluss__cta { margin-top: 20px; }

/* Rastervarianten fuer Gruppen mit weniger als drei Kacheln, damit einzelne
   Karten nicht verloren in einer Drittelspalte stehen (siehe seminare/index.php) */
.card-grid--two { grid-template-columns: repeat(2, 1fr); max-width: 768px; }
.card-grid--one { grid-template-columns: 1fr; max-width: 380px; }

/* Einzelne, inhaltlich ausfuehrlichere Angebotskarte ausserhalb eines Rasters
   (Verfuegbarkeitsmodell auf der Startseite). Bewusst breiter als eine
   Rasterspalte, weil daneben kein zweites Angebot steht - die Aufzaehlung laeuft
   dafuer zweispaltig, damit die Karte nicht in die Hoehe schiesst. */
.card-single { max-width: 840px; margin-top: 24px; }
.card-single .card ul {
  columns: 2;
  column-gap: 36px;
  margin-top: 12px;
}
.card-single .card li {
  break-inside: avoid;
  margin-bottom: 6px;
}
@media (max-width: 640px) {
  .card-single .card ul { columns: 1; }
}

/* Uebersichtsseite: Kachel eines Seminars im Katalog */
.seminar-karte { display: flex; flex-direction: column; }
.seminar-karte h4 {
  color: var(--color-primary-dark);
  font-size: 1.1em;
  margin-bottom: 10px;
}
.seminar-karte__badges {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
.seminar-karte__badge {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
}
.seminar-karte ul { margin: 12px 0 0; }
.seminar-karte li { margin-bottom: 5px; font-size: 0.95em; }
.seminar-karte__referent {
  margin-top: 14px;
  font-size: 0.85em;
  color: var(--color-text-muted);
}
/* Schiebt den Button unabhaengig von der Textlaenge an den Kachelboden,
   damit die Buttons einer Zeile auf einer Linie liegen. */
.seminar-karte__cta { margin-top: auto; padding-top: 16px; }

/* Gruppen-Zwischenkopf im Katalog */
.seminar-gruppe { margin-top: 44px; }
.seminar-gruppe:first-of-type { margin-top: 0; }
.seminar-gruppe__kopf { margin-bottom: 20px; max-width: 720px; }
.seminar-gruppe__kopf h3 { font-size: 1.35rem; margin-bottom: 6px; }
.seminar-gruppe__kopf p { margin: 0; color: var(--color-text-muted); }

#print-root { display: none; }
@media print {
  .site-header, .site-footer, .cookie-banner, .cra-check-hero,
  #app, .cra-check .disclaimer { display: none !important; }
  #print-root { display: block !important; }
  body { background: #fff; }
  @page { size: A4; margin: 14mm 14mm 16mm; }
  .pdoc { font-family: var(--font-base); color: var(--color-text); font-size: 11pt; line-height: 1.5; }
  .pdoc * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pdoc-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--color-cyber); padding-bottom: 10px; margin-bottom: 16px; }
  .pdoc-brand { display: flex; gap: 10px; align-items: center; }
  .pdoc-logo { width: 30px; height: 30px; flex-shrink: 0; }
  .pdoc-cn { font-weight: 600; font-size: 12pt; }
  .pdoc-ct { font-size: 8.5pt; color: var(--color-text-muted); }
  .pdoc-meta { text-align: right; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8.5pt; color: var(--color-text-muted); line-height: 1.6; }
  .pdoc-title { font-weight: 700; font-size: 18pt; margin: 0 0 4px; }
  .pdoc-sub { color: var(--color-text-muted); font-size: 10pt; margin: 0 0 14px; }
  .pdoc-verdict { border: 1px solid var(--color-border); border-left: 5px solid var(--color-cyber); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; break-inside: avoid; }
  .pdoc-verdict.ok { border-left-color: var(--color-primary); background: var(--color-primary-bg); }
  .pdoc-verdict.watch { border-left-color: var(--color-accent); background: var(--color-accent-bg); }
  .pdoc-verdict.out { border-left-color: var(--color-funsafe); background: var(--color-funsafe-bg); }
  .pdoc-verdict.info { border-left-color: var(--color-cyber); background: var(--color-cyber-bg); }
  .pdoc-vl { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8pt; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 4px; }
  .pdoc-verdict h2 { font-weight: 700; font-size: 13pt; margin: 0 0 6px; }
  .pdoc-verdict p { margin: 0; font-size: 10pt; color: var(--color-text-muted); }
  .pdoc-h { font-weight: 600; font-size: 11pt; margin: 16px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--color-border); }
  .pdoc-tbl { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
  .pdoc-tbl td { border-top: 1px solid var(--color-border); padding: 7px 4px; vertical-align: top; font-size: 10pt; }
  .pdoc-tbl tr:first-child td { border-top: none; }
  .pdoc-tbl .k { width: 38%; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8.5pt; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); }
  .pdoc-tbl tr { break-inside: avoid; }
  .pdoc-ul { margin: 0; padding-left: 16px; font-size: 10pt; color: var(--color-text-muted); }
  .pdoc-ul li { margin-bottom: 4px; }
  .pdoc-note { background: var(--color-bg-alt); border-left: 3px solid var(--color-cyber); border-radius: 6px; padding: 10px 12px; font-size: 9.5pt; color: var(--color-text-muted); margin: 12px 0; break-inside: avoid; }
  .pdoc-note.safety { border-left-color: var(--color-funsafe); background: var(--color-funsafe-bg); }
  .pdoc-legal { border: 1px dashed var(--color-border); border-radius: 6px; padding: 10px 12px; font-size: 8.5pt; color: var(--color-text-muted); margin-top: 16px; break-inside: avoid; }
  .pdoc-foot { margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--color-border); font-size: 8pt; color: var(--color-text-muted); display: flex; justify-content: space-between; }
}