/* ===================================================================
   Tower IT GmbH — design.css (alle Seiten; start.css ergänzt die Startseite)

   Gestaltungsidee: Die Seite zeigt ihre Arbeit, wie sie ist —
   Zertifikate, Abläufe, KI-Auswertungen. Jeder Kopf ist ein hellblaues,
   rundes Panel, helle Flächen tragen die Seite, Tiefblau setzt Akzente
   (je Seite ein dunkles Panel und die Fußzeile). Runde Ecken, nur Blautöne,
   Überschriften in normaler Breite.
   Mono nur für echte Daten, nicht für Beschriftungen.

   Vordergrundfarben je Untergrund: Bausteine verwenden --v-*; auf hellem
   Grund gelten die Werte aus :root, in .dunkel und .footer die dunklen.
   =================================================================== */

@font-face {
  font-family: 'Archivo Breit';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-variable-latin-wdth.woff2') format('woff2');
}

:root {
  --tiefblau:   #08154A;  /* dunkle Flächen */
  --tiefblau-2: #0D1E5E;  /* Panels auf dunklem Grund */
  --signal:     #011D86;  /* Logo-Blau, Knöpfe auf hellem Grund */
  --leitung:    #2B5BFF;  /* Linien, Akzente, Fokus */
  --leitung-hell: #6F93FF;
  --eis:        #BCD0FF;  /* Text auf dunklem Grund */
  --eis-2:      #8EA6E0;  /* Nebentext auf dunklem Grund */
  --papier:     #EEF2FA;  /* helle Flächen */
  --weiss:      #FFFFFF;
  --tinte:      #0C1633;  /* Überschriften auf hellem Grund */
  --text:       #2A3556;
  --grau:       #5A6585;
  --linie:      #D3DCEE;

  --eis-3:      #DCE6FF;  /* zarte Blaufläche auf hellem Grund */
  --hauch:      #F0F4FF;  /* Fläche in Kästen auf Weiß */
  --himmel:     var(--eis-3);  /* Kopf-Panels */

  --breite: 1180px;
  --rand: 28px;
  --innen: clamp(40px, calc((100vw - var(--breite)) / 2 + var(--rand) - var(--aussen)), 72px);  /* Innenabstand der Panels, fluchtet mit dem Inhalt */
  --aussen: 16px;         /* Mindestabstand der Panels zum Bildschirmrand */
  --r: 20px;              /* Ecken von Kästen */
  --r-gross: 32px;        /* Ecken von Panels */
  --schatten: 0 1px 2px rgba(8, 21, 74, .05), 0 14px 36px -14px rgba(8, 21, 74, .16);

  /* Vordergrund auf hellem Grund */
  --v-stark: var(--tinte);
  --v-text: var(--text);
  --v-neben: var(--grau);
  --v-linie: var(--linie);
  --v-zart: #E4EBF9;
  --v-akzent: var(--leitung);
  --v-markiert: var(--eis-3);
}
/* Vordergrund auf dunklem Grund */
.dunkel, .footer {
  --v-stark: #fff;
  --v-text: var(--eis);
  --v-neben: var(--eis-2);
  --v-linie: rgba(188, 208, 255, .14);
  --v-zart: rgba(188, 208, 255, .12);
  --v-akzent: var(--leitung-hell);
  --v-markiert: rgba(43, 91, 255, .35);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Archivo, system-ui, sans-serif; font-size: 17px; line-height: 1.6; color: var(--text); background: var(--papier); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; color: var(--tinte); text-wrap: balance; overflow-wrap: break-word; }
h1, h2 { font-family: 'Archivo Breit', Archivo, sans-serif; font-stretch: 100%; font-weight: 600; letter-spacing: -.018em; line-height: 1.06; }
h3 { font-size: 21px; font-weight: 620; letter-spacing: -.01em; line-height: 1.25; }
:focus-visible { outline: 2px solid var(--leitung); outline-offset: 3px; }
.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.mono { font-family: 'IBM Plex Mono', monospace; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--leitung); color: #fff; padding: 12px 20px; }
.skip:focus { left: 0; }

/* ---------- Kopf ---------- */
.header { background: #fff; border-bottom: 1px solid transparent; position: relative; z-index: 20; }
.header .wrap { display: flex; align-items: center; gap: 32px; height: 76px; }
.header .logo { flex-shrink: 0; }
.header .logo img { height: 28px; width: auto; }
.mainnav { display: flex; gap: 20px; margin-left: auto; font-size: 15px; }
.mainnav a, .header .btn { white-space: nowrap; }
.mainnav a { color: var(--text); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.mainnav a:hover { color: var(--signal); }
.mainnav a[aria-current] { color: var(--signal); border-bottom-color: var(--leitung); }
.menu-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.menu-button { display: none; }
@media (min-width: 981px) { .menu-toggle { display: none; } }  /* sonst unsichtbarer Tab-Halt */

/* ---------- Knöpfe ---------- */
.btn { display: inline-block; padding: 13px 24px; border-radius: 999px; font-weight: 600; font-size: 15.5px; text-decoration: none; border: 1.5px solid transparent; }
/* Hauptknopf: Signalblau auf hellem Grund, Weiß auf dunklem */
.btn-primaer { background: var(--signal); color: #fff; }
.btn-primaer:hover { background: var(--leitung); }
.btn-kontur { border-color: rgba(1, 29, 134, .28); color: var(--signal); }
.btn-kontur:hover { border-color: var(--signal); }
.dunkel .btn-primaer { background: #fff; color: var(--signal); }
.dunkel .btn-primaer:hover { background: var(--eis); }
.dunkel .btn-kontur { border-color: rgba(188, 208, 255, .45); color: #fff; }
.dunkel .btn-kontur:hover { border-color: #fff; }
.header .btn { padding: 9px 16px; font-size: 14.5px; }

/* ---------- Flächen ---------- */
.flaeche { padding: 112px 0; }
.flaeche.weiss { background: var(--weiss); }
.flaeche.dunkel { padding: 32px 0; color: var(--eis); }
.flaeche.dunkel > .wrap {
  width: calc(100% - 2 * var(--aussen)); max-width: calc(var(--breite) - 2 * var(--rand) + 2 * var(--innen));
  padding: 104px var(--innen); border-radius: var(--r-gross);
  background: radial-gradient(90% 120% at 100% 0%, rgba(43, 91, 255, .22), transparent 62%), var(--tiefblau); }
.dunkel h1, .dunkel h2, .dunkel h3 { color: #fff; }
.dunkel a:not(.btn) { color: #fff; }
.kopf { max-width: 720px; margin-bottom: 56px; }
.kopf h2 { font-size: clamp(30px, 3.8vw, 46px); }
.kopf p { margin-top: 18px; font-size: 19px; color: var(--grau); max-width: 58ch; }
.dunkel .kopf p { color: var(--eis-2); }

/* ---------- Kopfbereich: hellblaues, rundes Panel ---------- */
.hero { padding: 4px 0 24px; color: var(--text); }
.hero .wrap {
  position: relative; isolation: isolate; overflow: hidden;
  width: calc(100% - 2 * var(--aussen)); max-width: calc(var(--breite) - 2 * var(--rand) + 2 * var(--innen));
  padding: 96px var(--innen) 104px; border-radius: var(--r-gross); background: var(--himmel);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(40px, 5vw, 64px); font-weight: 640; letter-spacing: -.022em; line-height: 1.04; }
.hero .lead { margin-top: 26px; font-size: 20px; line-height: 1.55; color: var(--text); max-width: 29em; }
.hero .aktion { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero .btn-kontur { background: rgba(255, 255, 255, .55); }
.hero .btn-kontur:hover { background: #fff; }
.hero .fuss { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(1, 29, 134, .16); font-size: 15px; color: var(--text); max-width: 34em; }
.nw { white-space: nowrap; }

/* Symbol je Feld (weißes Zeichen auf Leitungsblau) */
.zeichen { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--leitung); display: grid; place-items: center; }
.zeichen svg { width: 22px; height: 22px; }

/* Einblenden (Meldungen der Startseite) */
@keyframes auftauchen { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Bereiche der Startseite: vier Kacheln mit je einem Fachobjekt ---------- */
.vier { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.kachel { background: #fff; border-radius: var(--r-gross); padding: 36px 36px 32px; display: flex; flex-direction: column; }
.kachel h3 { font-family: 'Archivo Breit', Archivo, sans-serif; font-size: 26px; font-weight: 600; display: flex; align-items: center; gap: 14px; }
.kachel p { margin-top: 10px; color: var(--text); max-width: 34em; }
.kachel .weiter { display: inline-block; margin-top: 14px; font-weight: 600; }
.kachel .objekt { flex: 1; background: var(--hauch); border-color: transparent; box-shadow: none; }
.kachel .kachel-text { margin-bottom: 26px; }

/* ---------- Kernfelder: Text links, Fachobjekt rechts ---------- */
.feld { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; }
.feld + .feld { margin-top: 96px; }
.feld:nth-child(even) .feld-text { order: 2; }
.feld h3 { font-family: 'Archivo Breit', Archivo, sans-serif; font-size: 30px; font-weight: 600; }
.feld p { margin-top: 14px; font-size: 18px; color: var(--text); max-width: 34em; }
.feld .stichworte { margin-top: 16px; font-size: 15px; color: var(--grau); }
.feld .weiter { display: inline-block; margin-top: 22px; font-weight: 600; }

.objekt { background: #fff; color: var(--v-text); border: 1px solid var(--linie); border-radius: var(--r); box-shadow: var(--schatten); padding: 26px 28px; font-size: 14.5px; }
.weiss .objekt { background: var(--hauch); box-shadow: none; }
.dunkel .objekt { background: var(--tiefblau-2); border-color: rgba(188, 208, 255, .18); box-shadow: none; }
.objekt .titel { color: var(--v-stark); font-weight: 600; font-size: 15px; display: flex; justify-content: space-between; gap: 12px; }
.objekt .titel span { color: var(--v-neben); font-weight: 400; }
.objekt pre { margin: 16px 0 0; font-family: 'IBM Plex Mono', monospace; font-size: 12.8px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--v-text); }
.objekt pre b { color: var(--v-stark); font-weight: 500; }
.objekt .hinweis { max-width: none; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--v-linie); color: var(--v-neben); font-size: 14px; }

/* Ablaufüberwachung (PKI) */
.ablauf { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.ablauf li { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; font-size: 14.5px; }
.ablauf .balken { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--v-zart); overflow: hidden; }
.ablauf .balken i { display: block; height: 100%; background: var(--v-akzent); border-radius: 3px; }
.ablauf .knapp .balken i { background: var(--v-stark); }
.ablauf .knapp span:last-child { color: var(--v-stark); font-weight: 500; }

/* Nachweisliste (Security) */
.nachweis { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.nachweis li { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; }
.nachweis svg { width: 20px; height: 20px; }
.nachweis .offen { color: var(--v-neben); }
.nachweis small { font-size: 13px; color: var(--v-neben); }

/* ---------- Ablauf in Phasen (echte Reihenfolge) ---------- */
.phasen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: phase; border-top: 2px solid var(--signal); }
.phasen li { counter-increment: phase; padding: 28px 28px 0 0; position: relative; }
.phasen li::before { content: counter(phase); position: absolute; top: -17px; left: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--signal); color: #fff; font-weight: 600; font-size: 15px; display: grid; place-items: center; }
.phasen h3 { margin-top: 12px; }
.phasen p { margin-top: 8px; color: var(--grau); font-size: 16px; }
.phasen .ergebnis { margin-top: 14px; font-size: 15px; color: var(--tinte); }
.phasen .ergebnis b { font-weight: 600; }
.dunkel .phasen { border-top-color: var(--leitung); }
.dunkel .phasen li::before { background: var(--leitung); }
.dunkel .phasen p { color: var(--eis-2); }

/* ---------- Steckbriefe als Liste ---------- */
.liste { border-top: 1px solid var(--linie); }
.eintrag { display: grid; grid-template-columns: 220px 1fr 1fr; gap: 32px; padding: 30px 0; border-bottom: 1px solid var(--linie); color: inherit; text-decoration: none; align-items: baseline; }
.eintrag h3 { color: var(--signal); text-decoration: underline 1px rgba(1, 29, 134, .3); text-underline-offset: 4px; }
.eintrag:hover h3 { text-decoration-color: currentColor; }
.eintrag .branche { color: var(--grau); font-size: 15px; }
.eintrag .erg { color: var(--text); font-size: 16px; }
.mehr-link { display: inline-block; margin-top: 28px; font-weight: 600; }

/* ---------- KI (dunkel) ---------- */
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }

/* ---------- Produkte ---------- */
.produkte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.produkt { background: #fff; border-radius: var(--r); padding: 26px 28px 28px; }
.weiss .produkt { background: var(--hauch); }
.produkt p { margin-top: 10px; color: var(--grau); font-size: 16px; }
.produkt a { display: inline-block; margin-top: 14px; font-weight: 600; }
/* Wegweiser zu den anderen Kernfeldern, mit dem Symbol des Felds */
.feldweg h3 { display: flex; align-items: center; gap: 12px; }
.feldweg .zeichen { width: 34px; height: 34px; border-radius: 10px; }
.feldweg .zeichen svg { width: 19px; height: 19px; }
.werkzeuge { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.werkzeug { background: #fff; color: var(--text); border: 1px solid var(--linie); border-radius: var(--r); padding: 26px 28px; text-decoration: none; display: grid; gap: 8px; }
.weiss .werkzeug { background: var(--hauch); border-color: transparent; }
.werkzeug h3 { color: var(--signal); text-decoration: underline 1px rgba(1, 29, 134, .3); text-underline-offset: 4px; }
.werkzeug code { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--leitung); }
.werkzeug:hover { border-color: var(--leitung); }
.werkzeug:hover h3 { text-decoration-color: currentColor; }

/* ---------- Engagement ---------- */
.sponsoren { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: center; }
.sponsor { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; }
.sponsor img { max-height: 72px; width: auto; margin: 0 auto; }
.sponsor b { display: block; color: var(--tinte); }
.sponsor span { color: var(--grau); font-size: 15px; }

/* ---------- Häufige Fragen ---------- */
.fragen { max-width: 820px; border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative; font-weight: 600; color: var(--tinte); font-size: 18px; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ''; position: absolute; right: 6px; top: 30px; width: 10px; height: 10px; border-right: 2px solid var(--signal); border-bottom: 2px solid var(--signal); transform: rotate(45deg); transition: transform .2s; }
.fragen details[open] summary::after { transform: rotate(-135deg); top: 34px; }
.fragen details p { padding: 0 0 24px; color: var(--text); max-width: 62ch; }

/* ---------- Kontakt ---------- */
.kontakt { padding: 32px 0 96px; color: var(--text); }
.kontakt .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center;
  width: calc(100% - 2 * var(--aussen)); max-width: calc(var(--breite) - 2 * var(--rand) + 2 * var(--innen));
  padding: 80px var(--innen); border-radius: var(--r-gross); background: linear-gradient(135deg, #E6EDFF 0%, var(--eis-3) 100%); }
.kontakt h2 { font-size: clamp(30px, 3.6vw, 44px); }
.kontakt p { margin-top: 16px; font-size: 18px; max-width: 36em; }
.kontakt .btn { margin-top: 28px; }
.kontakt .antwort { margin-top: 14px; font-size: 15px; color: var(--grau); }
.kontakt .nebenweg { margin-top: 28px; font-size: 16px; color: var(--grau); }
.kontakt dl { margin: 0; display: grid; gap: 22px; }
.kontakt dt { font-size: 14px; color: var(--grau); }
.kontakt dd { margin: 2px 0 0; font-size: 22px; color: var(--tinte); font-weight: 600; }
.kontakt dd a { color: var(--tinte); text-decoration: none; }
.kontakt dd a:hover { text-decoration: underline; }

/* ---------- Fußzeile ---------- */
.footer { background: var(--tiefblau); color: var(--eis-2); padding: 72px 0 28px; font-size: 15px; border-radius: var(--r-gross) var(--r-gross) 0 0; }
.footer .spalten { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.footer img { height: 26px; width: auto; }
.footer p { margin-top: 16px; max-width: 30ch; }
.footer h2 { font-family: Archivo, sans-serif; font-stretch: 100%; font-size: 15px; color: #fff; font-weight: 600; margin-bottom: 14px; letter-spacing: 0; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer a { color: var(--eis-2); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer .unten { margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(188, 208, 255, .12); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13.5px; }

/* ---------- Unterseiten-Kopf ---------- */
.pfad { font-size: 14px; color: var(--grau); margin-bottom: 22px; }
.pfad a { color: var(--signal); }
.hero-klein .wrap { grid-template-columns: 1.15fr 1fr; gap: 56px; padding-top: 72px; padding-bottom: 80px; }
.fakten { margin: 0; background: #fff; border: 1px solid var(--linie); border-radius: var(--r); box-shadow: var(--schatten); padding: 6px 26px; }
.fakten div { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.fakten div:last-child { border-bottom: 0; }
.fakten dt { color: var(--grau); font-size: 14.5px; }
.fakten dd { margin: 0; color: var(--tinte); font-weight: 600; }

/* Anlässe: Aussagen statt Karten */
.anlaesse { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; }
.anlass h3 { font-family: 'Archivo Breit', Archivo, sans-serif; font-size: 23px; }
.anlass p { margin-top: 10px; color: var(--grau); }

/* Kennen Sie das? Typische Gedanken aus Sicht der Kunden, keine Zitate echter Kunden */
.blasen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 56px; align-items: start; }
.blasen > li:nth-child(even) { margin-top: 56px; }  /* versetzt, wie ein Gespräch */
.blase { break-inside: avoid; }
.blase .gedanke { position: relative; margin: 0; padding: 24px 28px 26px; background: #fff; border-radius: 28px; box-shadow: var(--schatten);
  font-size: 20px; line-height: 1.45; font-weight: 500; color: var(--tinte); }
.weiss .blase .gedanke { background: var(--himmel); box-shadow: none; }
/* Gedankenblase: zwei kleine Kreise unter der Blase, in ihrer Farbe */
.blase .gedanke::before, .blase .gedanke::after { content: ''; position: absolute; border-radius: 50%; background: inherit; box-shadow: inherit; }
.blase .gedanke::before { left: 30px; bottom: -18px; width: 15px; height: 15px; }
.blase .gedanke::after { left: 17px; bottom: -32px; width: 9px; height: 9px; }
.blase .warum { margin: 16px 0 0 56px; color: var(--grau); font-size: 15.5px; max-width: 34em; }
.blase .weiter { display: inline-block; margin: 8px 0 0 56px; font-weight: 600; }
/* Neben einem Foto: untereinander, abwechselnd links und rechts (rechts mit gespiegelten Kreisen) */
.blasen.verlauf { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.blasen.verlauf > li { width: 88%; }
.blasen.verlauf > li:nth-child(even) { margin: 0 0 0 auto; }
.blasen.verlauf > li:nth-child(even) .gedanke::before { left: auto; right: 30px; }
.blasen.verlauf > li:nth-child(even) .gedanke::after { left: auto; right: 17px; }
.blasen.verlauf > li:nth-child(even) .warum { margin-left: 24px; }
.blasen.verlauf .gedanke { font-size: 18px; padding: 20px 24px 22px; }

/* Leistungen: ruhiges Raster ohne Rahmen */
.leistungen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 48px; }
.leistung h3 { padding-top: 16px; border-top: 2px solid var(--leitung); }
.leistung p { margin-top: 10px; color: var(--grau); font-size: 16px; }
.leistungen.zweier { grid-template-columns: repeat(2, 1fr); }

/* Schaubilder */
.bild { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: center; }
.bild figure { margin: 0; }
.bild figcaption { margin-top: 14px; font-size: 14.5px; color: var(--grau); }
.dunkel .bild figcaption { color: var(--eis-2); }
.punkte { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.punkte li { padding-left: 28px; position: relative; }
.punkte li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 12px; height: 12px; border: 2px solid var(--leitung); border-radius: 50%; }
.dunkel .punkte li { color: var(--eis); }

/* ===================================================================
   Schmale Bildschirme
   =================================================================== */
@media (max-width: 1100px) {
  .mainnav { gap: 16px; font-size: 14.5px; }
}
@media (max-width: 1060px) {
  .header .wrap { gap: 20px; }
  .mainnav { gap: 14px; }
}
/* Zwischen Tablet und breitem Bildschirm reicht der Platz nicht für Menü und Knopf; Anfrage-Knöpfe stehen im Kopfbereich */
@media (min-width: 981px) and (max-width: 1219px) { .header .btn { display: none; } }
@media (max-width: 980px) {
  .header .wrap { height: auto; min-height: 68px; flex-wrap: wrap; gap: 12px 16px; padding-top: 14px; padding-bottom: 14px; }
  .menu-button { display: inline-block; margin-left: auto; color: var(--signal); border: 1.5px solid rgba(1, 29, 134, .28); border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 15px; cursor: pointer; }
  .menu-toggle:focus-visible + .menu-button { outline: 2px solid var(--leitung); outline-offset: 2px; }
  .mainnav { display: none; order: 3; flex-basis: 100%; flex-direction: column; gap: 0; margin: 0; padding-bottom: 6px; }
  .menu-toggle:checked ~ .mainnav { display: flex; }
  .mainnav a { padding: 12px 0; font-size: 16.5px; border-bottom: 1px solid var(--linie); }
  .mainnav a[aria-current] { border-bottom-color: var(--leitung); }
  .header .btn { order: 2; }

  :root { --innen: 40px; }
  .hero .wrap, .hero-klein .wrap, .feld, .zwei, .kontakt .wrap, .bild { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .vier { grid-template-columns: minmax(0, 1fr); }
  .hero .wrap { padding-top: 64px; padding-bottom: 72px; }
  .feld:nth-child(even) .feld-text { order: 0; }
  .produkte, .sponsoren { grid-template-columns: 1fr 1fr; }
  .phasen { grid-template-columns: 1fr 1fr; row-gap: 40px; border-top: 0; }
  .phasen li { border-top: 2px solid var(--signal); }
  .dunkel .phasen li { border-top-color: var(--leitung); }
  .eintrag { grid-template-columns: 1fr; gap: 8px; }
  .footer .spalten { grid-template-columns: 1fr 1fr; }
  .leistungen { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  :root { --rand: 20px; --innen: 22px; --aussen: 8px; --r-gross: 24px; }
  body { font-size: 16px; }
  .flaeche { padding: 72px 0; }
  .flaeche.dunkel { padding: 16px 0; }
  .flaeche.dunkel > .wrap { padding-top: 64px; padding-bottom: 64px; }
  .kontakt { padding: 16px 0 64px; }
  .kontakt .wrap { padding-top: 48px; padding-bottom: 48px; }
  .kachel { padding: 24px 16px 16px; }
  .kachel .objekt { padding: 18px 16px; }
  .hero .wrap { padding-top: 48px; padding-bottom: 48px; }
  .kachel h3 { gap: 12px; }
  .zeichen { width: 36px; height: 36px; border-radius: 11px; }
  .ablauf li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ablauf .balken { margin-top: 6px; }
  .header .btn { display: none; }
  .produkte, .sponsoren, .phasen, .werkzeuge, .anlaesse, .leistungen, .leistungen.zweier, .footer .spalten { grid-template-columns: 1fr; }
  h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
  .fakten div { grid-template-columns: 1fr; gap: 2px; }
  .objekt { padding: 20px; }
}

/* Ergänzungen */
.nebenbei { margin-top: 80px; font-size: 16px; color: var(--grau); }
.hero-aktion { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.phasen.eng { grid-template-columns: 1fr 1fr; row-gap: 44px; border-top: 0; }
.phasen.eng li { border-top: 2px solid var(--leitung); }
@media (max-width: 640px) { .phasen.eng { grid-template-columns: 1fr; } }

/* Abschnittsköpfe variieren */
.kopf.seitlich { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
.kopf.seitlich p { margin-top: 0; }
.kopf.leise h2 { font-size: 28px; }
.kopf.leise p { font-size: 17px; margin-top: 10px; }
.kopf.leise { margin-bottom: 36px; }
.flaeche.knapp { padding: 80px 0; }
@media (max-width: 980px) { .kopf.seitlich { grid-template-columns: 1fr; gap: 16px; } }
.bild.umgekehrt { grid-template-columns: 1.1fr 1fr; }
@media (max-width: 980px) { .bild.umgekehrt { grid-template-columns: minmax(0, 1fr); } }

/* ===================================================================
   Bausteine für die Leistungsseiten
   =================================================================== */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Quervergleich (Security) */
.vergleich { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; }
.vergleich th { font-weight: 500; color: var(--v-neben); text-align: center; padding: 6px 4px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.vergleich th[scope="row"] { text-align: left; color: var(--v-text); font-family: Archivo, sans-serif; font-size: 14px; padding-right: 12px; }
.vergleich td { text-align: center; padding: 9px 4px; border-top: 1px solid var(--v-linie); }
.vergleich td::before { content: ''; display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; }
.vergleich td.ja::before { background: var(--v-akzent); }
.vergleich td.nein::before { border: 2px solid var(--v-stark); background: transparent; }
.legende { display: flex; gap: 20px; margin-top: 14px; font-size: 13px; color: var(--v-neben); }
.legende span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: 0; }
.legende .l-ja::before { background: var(--v-akzent); }
.legende .l-nein::before { border: 2px solid var(--v-stark); }

/* Anforderung -> Maßnahme -> Nachweis */
.strecke { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0 18px; align-items: start; margin-top: 8px; }
.strecke .spalte h3 { font-size: 17px; color: var(--v-stark); padding-bottom: 12px; border-bottom: 2px solid var(--leitung); }
.strecke ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.strecke li { background: var(--tiefblau-2); border: 1px solid rgba(188, 208, 255, .16); border-radius: 12px; padding: 10px 14px; color: var(--eis); font-size: 15px; }
.strecke .pfeil { align-self: center; width: 34px; height: 34px; color: var(--leitung-hell); }

/* Zeilenliste ohne Link (Anwendungsfälle) */
.zeilen { border-top: 1px solid var(--linie); }
.zeile-uc { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--linie); align-items: baseline; }
.zeile-uc .prio { font-size: 14px; font-weight: 600; color: var(--signal); }
.zeile-uc .prio.spaeter { color: var(--grau); font-weight: 400; }
.zeile-uc h3 { font-size: 18px; }
.zeile-uc span:last-child { color: var(--grau); font-size: 16px; }

/* Stufenplan mit Standort */
.stufen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); position: relative; }
.stufen::before { content: ''; position: absolute; top: 15px; left: 0; right: 0; height: 2px; background: rgba(188, 208, 255, .2); }
.stufen li { position: relative; padding: 46px 16px 0 0; }
.stufen li::before { content: ''; position: absolute; top: 7px; left: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--tiefblau); border: 2px solid var(--leitung); }
.stufen li.erledigt::before { background: var(--leitung); }
.stufen li.hier::before { width: 26px; height: 26px; top: 3px; left: -4px; background: #fff; border: 5px solid var(--leitung); }
.stufen .nr { font-size: 13px; color: var(--eis-2); }
.stufen h3 { font-size: 18px; margin-top: 4px; }
.stufen p { margin-top: 6px; font-size: 14.5px; color: var(--eis-2); }
.stufen .marke { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--tiefblau); background: #fff; border-radius: 999px; padding: 2px 10px; }

/* Vom Text zum Modell (KI) */
.demo { display: grid; grid-template-columns: 1fr auto 1.35fr; gap: 20px; align-items: center; }
.demo .eingang { background: #fff; border: 1px solid var(--linie); border-radius: var(--r); padding: 22px; font-size: 15.5px; line-height: 1.7; color: var(--tinte); }
.demo .eingang .von { font-size: 13px; color: var(--grau); margin-bottom: 10px; display: block; }
.demo mark { background: #DCE6FF; color: var(--tinte); padding: 1px 3px; border-radius: 3px; }
.demo mark.unsicher { background: transparent; border-bottom: 2px dashed var(--leitung); padding: 0; border-radius: 0; }
.demo .pfeil { width: 40px; height: 40px; color: var(--leitung); }
.matrix { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 14px; }
.matrix th { text-align: left; font-weight: 500; color: var(--v-neben); padding: 6px 8px 8px 0; font-size: 12.5px; }
.matrix td { padding: 9px 8px 9px 0; border-top: 1px solid var(--v-linie); color: var(--v-text); font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; }
.einstufung { font-family: Archivo, sans-serif; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.einstufung.bestaetigt { background: var(--leitung); color: #fff; }
.einstufung.abgeleitet { background: var(--v-zart); color: var(--v-stark); }
.einstufung.unbekannt { border: 1.5px dashed var(--v-neben); color: var(--v-text); }

/* Abgrenzung */
.nicht { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 48px; }
.nicht li { padding-left: 30px; position: relative; color: var(--text); }
.nicht li::before { content: ''; position: absolute; left: 0; top: 11px; width: 16px; height: 2px; background: var(--signal); }

@media (max-width: 980px) {
  .strecke { grid-template-columns: 1fr; gap: 12px; }
  .strecke .pfeil { transform: rotate(90deg); justify-self: center; }
  .stufen { grid-template-columns: 1fr 1fr 1fr; row-gap: 32px; }
  .stufen::before { display: none; }
  .demo { grid-template-columns: 1fr; }
  .demo .pfeil { transform: rotate(90deg); justify-self: center; }
  .zeile-uc { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 640px) {
  .stufen { grid-template-columns: 1fr 1fr; }
  .nicht { grid-template-columns: 1fr; }
  .vergleich th[scope="row"] { font-size: 13px; }
  .vergleich th, .vergleich td { padding-left: 2px; padding-right: 2px; }
}

/* ===================================================================
   Bausteine für Produkte, Tools, Branchen
   =================================================================== */
/* Screenshot-Rahmen */
.shot { margin: 0; }
.shot img { width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--linie); background: #fff; }
.hero .shot img { box-shadow: var(--schatten); }
.dunkel .shot img { border-color: rgba(188, 208, 255, .25); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.shot figcaption { margin-top: 12px; font-size: 14.5px; color: var(--grau); }
.dunkel .shot figcaption { color: var(--eis-2); }
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; counter-reset: schritt; align-items: start; }
.schritte li { counter-increment: schritt; }
.schritte h3 { margin-top: 18px; display: flex; gap: 12px; align-items: baseline; }
.schritte h3::before { content: counter(schritt); flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--signal); color: #fff; font-size: 14px; display: grid; place-items: center; transform: translateY(-2px); }
.schritte p { margin-top: 8px; color: var(--grau); font-size: 16px; }

/* Prüfausgabe (DNS Checker) */
.ausgabe { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
.ausgabe li { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: baseline; }
.ausgabe .st { font-family: Archivo, sans-serif; font-size: 12px; font-weight: 600; text-align: center; border-radius: 999px; padding: 2px 0; }
.ausgabe .ok { background: var(--leitung); color: #fff; }
.ausgabe .hin { border: 1.5px solid var(--v-neben); color: var(--v-stark); }

/* Liste mit Status rechts (Quarantäne, Freigabelink) */
.statusliste { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 0; }
.statusliste li { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--v-linie); }
.statusliste b { color: var(--v-stark); font-weight: 500; }
.statusliste small { grid-column: 1; color: var(--v-neben); font-size: 13px; }
.statusliste .st { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 3px 11px; white-space: nowrap; }
.statusliste .blockiert, .statusliste .neutral { background: var(--v-zart); color: var(--v-stark); }
.statusliste .frei { background: var(--leitung); color: #fff; }
.statusliste .offen { border: 1.5px dashed var(--v-neben); color: var(--v-text); }
.daten { margin: 16px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; font-size: 14px; }
.daten dt { color: var(--v-neben); }
.daten dd { margin: 0; color: var(--v-stark); font-family: 'IBM Plex Mono', monospace; font-size: 13px; overflow-wrap: anywhere; }

/* Branchen mit ihren Regelwerken (Unternehmen) */
.branchen-kopf { margin-top: 72px; font-size: 24px; }
.branchen-text { margin-top: 10px; color: var(--grau); max-width: 58ch; }
.branchen { margin: 24px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--linie); }
.branchen div { padding: 18px 0; border-bottom: 1px solid var(--linie); }
.branchen dt { color: var(--tinte); font-weight: 600; }
.branchen dd { margin: 2px 0 0; color: var(--signal); font-size: 15px; }
.branchen dd.folge-satz { margin-top: 6px; color: var(--grau); line-height: 1.45; }
.branchen-fehlt { margin-top: 32px; }

/* Foto links, daneben "Kennen Sie das?" */
.mit-foto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: stretch; }
.mit-foto > img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; border-radius: var(--r-gross); }

@media (max-width: 980px) {
  .schritte { grid-template-columns: 1fr; gap: 48px; }
  .branchen { grid-template-columns: 1fr 1fr; }
  .mit-foto { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* eine Spalte, abwechselnd links und rechts wie neben dem Foto */
  .blasen { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .blasen > li { width: 88%; }
  .blasen > li:nth-child(even) { margin: 0 0 0 auto; }
  .blasen > li:nth-child(even) .gedanke::before { left: auto; right: 30px; }
  .blasen > li:nth-child(even) .gedanke::after { left: auto; right: 17px; }
  .blasen > li:nth-child(even) .warum, .blasen > li:nth-child(even) .weiter { margin-left: 24px; }
  .mit-foto > img { height: 260px; min-height: 0; }
}
@media (max-width: 640px) {
  .branchen { grid-template-columns: 1fr; }
  .blasen > li, .blasen.verlauf > li { width: 94%; }
  .blase .gedanke, .blasen.verlauf .gedanke { font-size: 17px; padding: 18px 20px 20px; }
  .mit-foto > img { height: 200px; }
}

/* Unterseiten: Überschrift im Kopf etwas kleiner, lange Titel bleiben lesbar */
.hero-klein h1 { font-size: clamp(36px, 4.3vw, 54px); }
.hero-klein.hero-bild .wrap { grid-template-columns: 1fr 1.3fr; gap: 56px; }
.hero-bild h1 { font-size: clamp(34px, 3.6vw, 46px); }
@media (max-width: 980px) { .hero-klein.hero-bild .wrap { grid-template-columns: minmax(0, 1fr); } }

/* Rasterkinder dürfen schrumpfen; breite Tabellen scrollen im eigenen Kasten */
.demo > *, .zwei > *, .bild > *, .feld > *, .hero .wrap > *, .kontakt .wrap > * { min-width: 0; }
.objekt { overflow-x: auto; }

/* ===================================================================
   Steckbriefe
   =================================================================== */
.hero-klein h1.lang { font-size: clamp(30px, 3.3vw, 42px); line-height: 1.12; }
.steckbrief { display: grid; grid-template-columns: 300px 1fr; gap: 64px; align-items: start; }
.rahmen { margin: 0; display: grid; gap: 22px; padding-top: 6px; border-top: 2px solid var(--signal); }
.rahmen div { padding-top: 16px; }
.rahmen dt { font-size: 14px; color: var(--grau); }
.rahmen dd { margin: 4px 0 0; color: var(--tinte); font-size: 16px; }
.steckbrief .text h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 18px; }
.steckbrief .text p { font-size: 18px; max-width: 62ch; }
.steckbrief .text p + p { margin-top: 14px; }
.vorgehen h3 { margin: 28px 0 0; font-size: 19px; }
.vorgehen h3:first-child { margin-top: 0; }
.punkte.zweispaltig { columns: 2; column-gap: 56px; display: block; }
.punkte.zweispaltig li { break-inside: avoid; margin-bottom: 14px; color: var(--text); }
.haken { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 56px; }
.haken li { position: relative; padding-left: 36px; color: #fff; font-size: 17px; }
.haken li::before { content: ''; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--leitung) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat; }
.bereiche { margin-top: 36px; color: var(--eis); max-width: 60em; }
.bereiche b { color: #fff; font-weight: 600; }
.themen { margin-top: 18px; color: var(--eis-2); font-size: 15px; }
.themen a { margin-right: 18px; }

@media (max-width: 980px) {
  .steckbrief { grid-template-columns: 1fr; gap: 32px; }
  .punkte.zweispaltig { columns: 1; }
  .haken { grid-template-columns: 1fr; }
}

/* ===================================================================
   Unternehmen, Karriere, Kontakt
   =================================================================== */
.rollen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; }
.rolle { border-top: 2px solid var(--leitung); padding-top: 18px; }
.rolle h3 { font-size: 18px; }
.rolle ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.rolle li { color: var(--eis); font-size: 15px; line-height: 1.5; }

.nachweise { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; border-top: 1px solid var(--linie); }
.nachweise details { border-bottom: 1px solid var(--linie); }
.nachweise summary { cursor: pointer; list-style: none; padding: 20px 36px 20px 0; position: relative; display: grid; gap: 4px; }
.nachweise summary::-webkit-details-marker { display: none; }
.nachweise summary b { color: var(--tinte); font-size: 18px; font-weight: 620; }
.nachweise summary span { color: var(--grau); font-size: 15px; }
.nachweise summary::after { content: ''; position: absolute; right: 6px; top: 28px; width: 10px; height: 10px; border-right: 2px solid var(--signal); border-bottom: 2px solid var(--signal); transform: rotate(45deg); transition: transform .2s; }
.nachweise details[open] summary::after { transform: rotate(-135deg); top: 32px; }
.nachweise ul { margin: 0 0 20px; padding-left: 20px; color: var(--text); font-size: 15.5px; display: grid; gap: 6px; }

.stelle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.stelle h2 { font-size: 24px; padding-bottom: 14px; border-bottom: 2px solid var(--signal); }
.stelle .punkte { margin-top: 20px; }

.einstiege { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.einstiege.zwei-wege { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; gap: 48px; }
.einstieg { border-top: 3px solid var(--signal); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.einstieg p { color: var(--grau); font-size: 15.5px; }
.einstieg a { margin-top: auto; font-family: 'IBM Plex Mono', monospace; font-size: 14.5px; font-weight: 500; overflow-wrap: anywhere; }

@media (max-width: 1100px) { .einstiege { grid-template-columns: 1fr 1fr; } }
@media (max-width: 980px) { .nachweise, .stelle { grid-template-columns: 1fr; } .rollen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .rollen, .einstiege, .einstiege.zwei-wege { grid-template-columns: 1fr; } }

/* ===================================================================
   404 und Impressum
   =================================================================== */
.hero .lead a, .fakten dd a { color: var(--signal); }

.wegweiser { background: #fff; border: 1px solid var(--linie); border-radius: var(--r); box-shadow: var(--schatten); padding: 20px 26px 6px; }
.wegweiser .titel { color: var(--grau); font-size: 14.5px; padding-bottom: 6px; }
.wegweiser ul { list-style: none; margin: 0; padding: 0; }
.wegweiser li { display: grid; grid-template-columns: 11em 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--linie); align-items: baseline; }
.wegweiser a { color: var(--signal); font-weight: 600; text-decoration: none; }
.wegweiser a:hover { text-decoration: underline; }
.wegweiser span { color: var(--grau); font-size: 14.5px; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }

.register h2 { font-family: Archivo, sans-serif; font-stretch: 100%; font-size: 15px; font-weight: 500; color: var(--grau); letter-spacing: 0; margin-bottom: 12px; }

.recht { display: grid; }
.recht > div:first-child { border-top: 1px solid var(--linie); }
.recht > div { display: grid; grid-template-columns: 300px 1fr; gap: 48px; padding: 26px 0; border-bottom: 1px solid var(--linie); align-items: baseline; }
.recht h2 { font-family: Archivo, sans-serif; font-stretch: 100%; font-size: 18px; font-weight: 620; letter-spacing: -.01em; line-height: 1.3; }
.recht p { max-width: 64ch; }

@media (max-width: 980px) { .recht > div { grid-template-columns: 1fr; gap: 8px; } }
@media (max-width: 640px) { .wegweiser li { grid-template-columns: 1fr; gap: 2px; } }

/* Datenschutz */
.geltung { margin-top: 22px; font-size: 15px; color: var(--grau); }
.geltung .mono { color: var(--tinte); font-size: 14px; }
.inhalt { background: #fff; border: 1px solid var(--linie); border-radius: var(--r); box-shadow: var(--schatten); padding: 20px 26px 12px; }
.inhalt .titel { color: var(--grau); font-size: 14.5px; padding-bottom: 10px; }
.inhalt ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; }
.inhalt li { padding: 9px 0; border-top: 1px solid var(--linie); break-inside: avoid; }
.inhalt a { color: var(--signal); text-decoration: none; font-weight: 500; }
.inhalt a:hover { text-decoration: underline; }
.recht .text p + p { margin-top: 14px; }
.angaben { margin: 0; display: grid; gap: 10px; }
.angaben div { display: grid; grid-template-columns: 8.5em 1fr; gap: 16px; align-items: baseline; }
.angaben dt { color: var(--grau); font-size: 14.5px; }
.angaben dd { margin: 0; }
.empfaenger { margin-top: 28px; border-top: 2px solid var(--signal); }
.empf { padding: 22px 0 24px; border-bottom: 1px solid var(--linie); }
.empf:last-child { border-bottom: 0; padding-bottom: 0; }
.empf h3 { font-size: 19px; }
.empf .anschrift { margin-top: 4px; color: var(--grau); font-size: 15px; }
.empf .angaben { margin-top: 14px; }
.empf dd { font-size: 16px; }
.recht > .betont { background: var(--weiss); padding: 28px 24px; margin: 0 -24px; border-radius: var(--r); }
.stand { margin-top: 28px; font-size: 14px; color: var(--grau); }
@media (max-width: 640px) {
  .inhalt ol { columns: 1; }
  .angaben div { grid-template-columns: 1fr; gap: 2px; }
  .recht > .betont { padding: 24px 20px; margin: 0 -20px; }
}

/* ===================================================================
   Software und KI
   =================================================================== */
.h-mittel { font-size: clamp(30px, 3.6vw, 44px); }
.absatz { margin-top: 20px; font-size: 19px; max-width: 30em; }
.unterkopf { margin: 72px 0 22px; font-size: 18px; }
.punkte b { color: var(--v-stark); font-weight: 600; }
.leistungen.vierer { grid-template-columns: repeat(4, 1fr); }

/* Protokoll eines automatischen Ablaufs */
.folge { list-style: none; margin: 18px 0 0 5px; padding: 0; }
.folge li { position: relative; display: grid; grid-template-columns: 9.5em 1fr; gap: 14px; padding: 9px 0 9px 20px; border-left: 2px solid var(--v-zart); }
.folge li::before { content: ''; position: absolute; left: -6px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--v-akzent); }
.folge time { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--v-neben); padding-top: 2px; }
.folge li:last-child span { color: var(--v-stark); font-weight: 600; }
.folge.kurz li { grid-template-columns: 3.4em minmax(0, 1fr); gap: 12px; }  /* nur Uhrzeit, bleibt auch schmal zweispaltig */

/* Ansprechpartner mit Foto */
.person { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 72px; align-items: center; }
.person > img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-gross); }
.person-rolle { margin-top: 10px; font-size: 19px; font-weight: 600; color: var(--signal); }

@media (max-width: 980px) {
  .leistungen.vierer { grid-template-columns: 1fr 1fr; }
  .person { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .person > img { max-width: 320px; }
}
@media (max-width: 640px) {
  .leistungen.vierer { grid-template-columns: 1fr; }
  .folge li { grid-template-columns: 1fr; gap: 2px; }
  .unterkopf { margin-top: 48px; }
}
@media (max-width: 400px) {
  .nachweis li { grid-template-columns: 22px 1fr; row-gap: 0; }
  .nachweis small { grid-column: 2; }
}
/* Endet eine Seite mit weißer Fläche, sähe man sonst Papier in den runden Ecken der Fußzeile */
main:has(> .weiss:last-child) + .footer { border-radius: 0; }

/* Druck: dunkle Panels mitdrucken, sonst stünde weiße Schrift auf weißem Papier */
@media print {
  *, *::before, *::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .skip, .mainnav, .menu-button, .header .btn, .kontakt .btn, .aktion, .hero-aktion { display: none; }
  .hero .wrap { background: none; padding: 32px var(--rand) 24px; width: auto; overflow: visible; }
  .hero .aktion { display: none; }
  .objekt, .fakten, .wegweiser, .inhalt, .blase .gedanke { box-shadow: none; }
  .blase .gedanke { border: 1px solid var(--linie); }
  .mit-foto { display: block; }
  .mit-foto > img { display: none; }  /* Stimmungsfotos kosten nur Tinte */
  .flaeche { padding: 40px 0; }
  .recht > div, .fakten div { break-inside: avoid; }  /* nicht auf .empf: löst in Chromium überlagerten Druck aus */
}