/* assets/css/fonts.css */
/* Zero One IT – Lokale Schriftarten
 * Phase 03A / 03A.1: Vorbereitung. Diese Datei ist noch NICHT in den HTML-Seiten eingebunden.
 * Auslieferung zur Laufzeit ausschliesslich lokal (keine externen Requests).
 * Quellen, Versionen, Lizenzen und SHA-256-Pruefsummen: ../fonts/FONT-SOURCES.md
 *
 * Strategie (nach Performance-Gate 03A.1):
 *   - Space Grotesk: Variable (1 Datei, 300–700) – kleinste offizielle Loesung.
 *   - Inter: STATISCH je genutztem Schnitt (400, 500, 400-italic) – geringere reale
 *     Erstladung, da site-weit real nur diese Schnitte gerendert werden.
 *   - JetBrains Mono: statisch (400, 500) – offiziell nur statisch als WOFF2.
 */

/* ===== Space Grotesk – Variable Font (Gewichtsachse 300–700) ===== */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk/space-grotesk-variable.woff2") format("woff2");
}

/* ===== Inter – Regular (400), statisch ===== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter/inter-regular.woff2") format("woff2");
}

/* ===== Inter – Medium (500), statisch ===== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter/inter-medium.woff2") format("woff2");
}

/* ===== Inter – kursiv (400), statisch (Rechtsseiten: .note font-style:italic) ===== */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter/inter-italic.woff2") format("woff2");
}

/* ===== JetBrains Mono – Regular (400), statisch ===== */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono/jetbrains-mono-regular.woff2") format("woff2");
}

/* ===== JetBrains Mono – Medium (500), statisch ===== */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono/jetbrains-mono-medium.woff2") format("woff2");
}

/* assets/css/theme.css */
/* =========================================================================
   Zero One IT - Themenwerte fuer Dunkel und Hell
   =========================================================================
   Diese Datei haelt ALLE farblichen Stellschrauben beider Themen an einem
   Ort. Die Seiten bringen ihren eigenen :root-Block mit den bekannten
   Dunkelwerten mit; der bleibt unangetastet. Hier stehen zwei Dinge:

   1. Die zusaetzlichen Grundtoene, die es vorher nur hartkodiert gab
      (Schatten, Schleier, Waesche, Warnfarben). Sie stehen auf :root mit
      genau den Werten, die bisher im Stylesheet standen - das Dunkelbild
      aendert sich dadurch um kein Pixel.
   2. Der komplette Hellsatz auf :root[data-theme="light"]. Das
      Attributselektor-Gewicht (0,2,0) liegt ueber dem blanken :root (0,1,0),
      deshalb gewinnt Hell unabhaengig davon, in welcher Reihenfolge die
      Seite ihre Stylesheets laedt.

   Grundsatz bei den Alphawerten: statt jeden einzelnen rgba-Aufruf zu
   verdoppeln, steht nur das Farbtripel in einer Variablen. Die Deckkraft
   bleibt an der Fundstelle. Aus
       rgba(9,13,24,.46)
   wird
       rgba(var(--grund-rgb),.46)
   und beide Themen behalten ihre eigene Abstufung, ohne dass irgendeine
   Komponente doppelt gepflegt werden muss.
   ========================================================================= */

:root{
  /* --- Grundtoene als Tripel, damit die Deckkraft an der Fundstelle bleibt --- */
  --grund-rgb:9,13,24;          /* Seitengrund; traegt Schleier und Textschatten */
  --flaeche-rgb:16,23,42;       /* --surface als Tripel */
  --hoch-rgb:26,36,56;          /* --surface-up als Tripel */
  --schatten-rgb:0,0,0;         /* Schlagschatten */
  --waesche-rgb:240,245,255;    /* feine Aufhellungen und Haarlinien auf dunklem Grund */
  --akzent-rgb:0,201,167;       /* identisch in beiden Themen, nur hier zentral */

  /* --- Abgeleitete Flaechen --- */
  --bg-tief:#070B14;            /* tiefer als --bg, fuer Verlaufsenden */
  --bg-tief-2:#0B1120;
  --schleier:rgba(3,7,14,.78);  /* Hintergrund hinter Dialogen */
  --schleier-weich:rgba(5,8,16,.7);

  /* --- Akzent in seinen Rollen --- */
  --accent-text:#00C9A7;        /* Akzent als Schriftfarbe */
  --accent-hell:#00E4C0;        /* aufgehellter Akzent, Hover und Verlaufsspitzen */
  --accent-ink:#00261F;         /* Schrift auf gefuellter Akzentflaeche */
  --accent-ink-2:#003328;

  /* --- Neutrale Zwischentoene --- */
  --gedaempft:#3D4F6A;          /* sehr zurueckgenommene Linien und Ziffern */
  --keks-scheibe:#141C30;       /* Traegerkreis des Keks-Symbols im Consent-Dialog */

  /* --- Signalfarben --- */
  --warn:#FFA94D;
  --warn-rgb:255,169,77;
  --fehler:#FF6B6B;
  --fehler-hell:#FF8B8B;
  --fehler-zart:#FFC9C9;
  --fehler-rand:#5C2B2B;
  --fehler-rgb:255,107,107;
  --fehler-hell-rgb:255,139,139;

  /* --- Bewegung des Schalters --- */
  --thema-kurve:cubic-bezier(.4,.16,.2,1);
  color-scheme:dark;
}

/* =========================================================================
   HELL - eigenstaendiges Zero One IT Tagbild
   =========================================================================
   Kein Weiss auf Schwarz umgedreht. Der Grund ist ein kuehles Off-White mit
   leichtem Blaustich, die Flaechen heben sich nach oben hin auf, bis Weiss.
   Der Akzent bleibt Teal - nur eine Spur tiefer, weil #00C9A7 auf hellem
   Grund als Schrift nur auf 2,9:1 kommt. Ueberschriften und Fliesstext
   sitzen im Marken-Navy.

   Kontraste (WCAG, auf --bg gemessen):
     --text-1  #0B1426 auf #EEF1F7 = 16,8:1
     --text-2  #53658A auf #EEF1F7 =  5,0:1
     --text-3  #59698A auf #EEF1F7 =  4,9:1
     --accent-text #00786A auf #EEF1F7 = 4,7:1
   ========================================================================= */

:root[data-theme="light"]{
  color-scheme:light;

  --bg:#EEF1F7;
  --surface:#F8FAFD;
  --surface-up:#FFFFFF;
  --accent:#00A98F;
  --accent-dim:rgba(0,169,143,0.10);
  --accent-glow:rgba(0,169,143,0.07);
  --text-1:#0B1426;
  --text-2:#53658A;
  --text-3:#59698A;
  --border:#D6DEEB;
  --border-accent:rgba(0,169,143,0.34);

  --grund-rgb:238,241,247;
  --flaeche-rgb:248,250,253;
  --hoch-rgb:255,255,255;
  --schatten-rgb:25,39,66;
  --waesche-rgb:11,20,38;
  --akzent-rgb:0,169,143;

  --bg-tief:#E3E8F1;
  --bg-tief-2:#E8ECF4;
  --schleier:rgba(20,30,52,.42);
  --schleier-weich:rgba(20,30,52,.34);

  --accent-text:#00786A;
  --accent-hell:#00C0A2;
  --accent-ink:#00261F;
  --accent-ink-2:#00261F;

  --gedaempft:#93A1B8;
  --keks-scheibe:#C9D3E3;

  --warn:#A65A00;
  --warn-rgb:166,90,0;
  --fehler:#C02626;
  --fehler-hell:#A81F1F;
  --fehler-zart:#7A1616;
  --fehler-rand:#E9B9B9;
  --fehler-rgb:192,38,38;
  --fehler-hell-rgb:168,31,31;
}

/* Schatten wirken auf hellem Grund schnell schmutzig. Die Deckkraft steht
   an der Fundstelle und laesst sich dort nicht pro Thema aendern - deshalb
   nimmt Hell die Staerke global um gut die Haelfte zurueck. */
:root[data-theme="light"] body{
  --schatten-rgb:25,39,66;
}

/* =========================================================================
   TAG-/NACHT-SCHALTER
   =========================================================================
   Eine Pille mit gleitendem Knopf. Dunkel zeigt sie einen Mond, hell eine
   Sonne. Der Mond entsteht nicht als Bild, sondern als Kreis, aus dem ein
   zweiter Kreis in Spurfarbe eine Sichel schneidet - beim Wechsel faehrt
   dieser Schneidekreis heraus und der Mond wird zur vollen Sonnenscheibe.

   Die Pille ist 56x30. Die Schaltflaeche darum ist 44x44 gross, damit das
   Beruehrungsziel auch am Daumen die uebliche Mindestgroesse hat.
   ========================================================================= */

.thema-schalter{
  --spur-b:56px;
  --spur-h:30px;
  --knopf:22px;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--spur-b);
  min-width:var(--spur-b);
  height:44px;
  padding:0;
  background:transparent;
  border:none;
  cursor:pointer;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}

.thema-spur{
  position:relative;
  display:block;
  width:var(--spur-b);
  height:var(--spur-h);
  border-radius:100px;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 3px rgba(var(--schatten-rgb),.28);
  transition:background .45s var(--thema-kurve),
             border-color .45s var(--thema-kurve),
             box-shadow .45s var(--thema-kurve);
}

/* Der Akzentring der Vorlage: hier in Teal, und er wird nur bei Hover,
   Fokus und waehrend des Umschaltens sichtbar - im Ruhezustand bleibt der
   Schalter zurueckhaltend. */
.thema-spur::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:100px;
  border:2px solid rgba(var(--akzent-rgb),.55);
  opacity:0;
  transform:scale(.88);
  transition:opacity .3s var(--thema-kurve),transform .3s var(--thema-kurve);
  pointer-events:none;
}
.thema-schalter:hover .thema-spur::after{opacity:.6;transform:scale(1)}
.thema-schalter:focus-visible .thema-spur::after{opacity:1;transform:scale(1)}
.thema-schalter:focus-visible{outline:none}
.thema-schalter:focus-visible .thema-spur{border-color:var(--accent)}

.thema-knopf{
  position:absolute;
  top:50%;
  left:3px;
  width:var(--knopf);
  height:var(--knopf);
  margin-top:calc(var(--knopf) / -2);
  border-radius:50%;
  background:#E7EDFB;
  box-shadow:0 2px 6px rgba(var(--schatten-rgb),.45);
  overflow:hidden;
  transition:transform .55s var(--thema-kurve),
             background .45s var(--thema-kurve),
             box-shadow .45s var(--thema-kurve);
}

/* Der Schneidekreis, der aus der Scheibe eine Sichel macht. */
.thema-knopf::before{
  content:"";
  position:absolute;
  top:-28%;
  right:-32%;
  width:100%;
  height:100%;
  border-radius:50%;
  background:var(--surface);
  transition:transform .55s var(--thema-kurve),background .45s var(--thema-kurve);
}

.thema-krater{
  position:absolute;
  border-radius:50%;
  background:rgba(var(--schatten-rgb),.16);
  transition:opacity .3s var(--thema-kurve);
}
.thema-krater-a{width:4px;height:4px;left:22%;top:52%}
.thema-krater-b{width:3px;height:3px;left:44%;top:72%}

/* --- Zustand HELL: Knopf rechts, Sichel weg, Scheibe wird zur Sonne --- */
.thema-schalter[aria-checked="true"] .thema-knopf{
  transform:translateX(calc(var(--spur-b) - var(--knopf) - 6px));
  background:var(--accent);
  box-shadow:0 2px 10px rgba(var(--akzent-rgb),.55),
             0 0 0 4px rgba(var(--akzent-rgb),.16);
}
.thema-schalter[aria-checked="true"] .thema-knopf::before{transform:translate(120%,-120%)}
.thema-schalter[aria-checked="true"] .thema-krater{opacity:0}
.thema-schalter[aria-checked="true"] .thema-spur{
  background:var(--surface-up);
  border-color:var(--border);
}

/* Die Pille sitzt in der Navigation neben anderen runden Elementen und
   bekommt dort denselben Abstand wie der Intern-Knopf. */
/* Die Rechtsseiten bringen keine eigene .nav-cta-Regel mit. */
.nav-cta{display:flex;align-items:center;gap:16px}
.nav-cta .thema-schalter{margin-right:-2px}
.mobile-nav-top .thema-schalter{margin-right:auto}

@media(prefers-reduced-motion:reduce){
  .thema-spur,.thema-spur::after,.thema-knopf,.thema-knopf::before,.thema-krater{
    transition:none !important;
  }
}

/* =========================================================================
   LOGO-PAAR
   =========================================================================
   Der Schriftzug des Logos ist weiss. Auf hellem Grund verschwindet er.
   Deshalb liegt daneben dieselbe Datei mit dem Schriftzug im Marken-Navy -
   Bildzeichen, Form und Teal bleiben unangetastet, es ist die uebliche
   Positiv-/Negativfassung eines Logos. Die Umschaltung laeuft ueber CSS
   und nicht ueber JavaScript: so blitzt beim Laden nichts auf und es
   stimmt auch, wenn kein Skript laeuft.
   ========================================================================= */
/* Die Seiten setzen .logo-img{display:block} in ihrem eigenen Stylesheet,
   und das steht im Dokument NACH dieser Datei. Bei gleichem Gewicht
   gewaenne dort die spaetere Regel und es waeren beide Logos gleichzeitig
   zu sehen. Das vorangestellte :root hebt das Gewicht auf (0,2,0) und
   entscheidet die Sache unabhaengig von der Ladereihenfolge. */
:root .logo-hell{display:none}
:root[data-theme="light"] .logo-dunkel{display:none}
:root[data-theme="light"] .logo-hell{display:block}

/* =========================================================================
   WEICHES SCROLLEN (Lenis)
   =========================================================================
   Die wenigen Regeln, die die Bibliothek braucht. Sie stehen hier statt in
   einer eigenen Datei, damit keine zusaetzliche Anfrage entsteht.

   Wichtig ist die erste: Solange Lenis laeuft, muss das native weiche
   Scrollen des Browsers aus sein. Sonst animieren zwei Mechanismen
   denselben Sprung und es ruckelt. Ohne Lenis - auf dem Telefon und bei
   reduzierter Bewegung - bleibt scroll-behavior:smooth aus dem Seitenkopf
   unveraendert in Kraft.
   ========================================================================= */
html.lenis{scroll-behavior:auto !important}
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

/* assets/css/schulungen.css */
:root{color-scheme:dark;--bg:#090d18;--surface:#101827;--raised:#172335;--line:#263547;--ink:#f0f5ff;--muted:#a3b2c7;--accent:#00c9a7;--teal:#102b2c}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.7 Inter,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:'Space Grotesk',sans-serif;line-height:1.12;font-weight:500}h1{font-size:clamp(38px,3.6vw,52px);letter-spacing:-2.8px}h2{font-size:clamp(29px,3vw,42px);letter-spacing:-1.5px}h3{font-size:26px;letter-spacing:-.7px}em{font-style:normal;color:var(--accent)}a,summary{touch-action:manipulation}a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:6px}img{display:block;max-width:100%;height:auto}.wrap{max-width:1260px;padding-inline:40px;margin-inline:auto}.mono{font:11px/1.5 'JetBrains Mono',monospace;letter-spacing:1.2px;text-transform:uppercase}.muted{color:var(--muted)}.eyebrow{color:var(--accent);margin-bottom:19px}.skip{position:fixed;top:-90px;left:20px;padding:12px;background:var(--accent);color:var(--bg);z-index:10}.skip:focus{top:12px}.topbar{border-bottom:1px solid var(--line)}.header-inner{height:87px;display:flex;justify-content:space-between;align-items:center;gap:30px}.brand{display:flex;align-items:center;gap:15px}.brand img{width:66px;height:57px;object-fit:contain}.brand-name{font:600 17px 'Space Grotesk',sans-serif;letter-spacing:1.7px}.brand-name small{display:block;font:9px/2.3 'JetBrains Mono',monospace;color:var(--muted);letter-spacing:.7px}.header-nav{display:flex;align-items:center;gap:32px;font-size:13px}.header-nav a{min-height:44px;display:flex;align-items:center}.header-nav a:hover{color:var(--accent)}.back{color:var(--muted)}.hero{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:30px;padding-top:62px;padding-bottom:58px}.hero-copy>p:last-of-type{font-size:15px;max-width:520px;margin-top:25px;color:var(--muted)}.hero-actions{display:flex;align-items:center;gap:25px;margin-top:28px}.button{display:inline-flex;justify-content:center;align-items:center;gap:27px;padding:12px 20px;min-height:48px;border-radius:7px;background:var(--accent);color:#03261f;font-size:13px;font-weight:500;transition:background .18s,transform .18s}.button:hover{background:#3de0c3;transform:translateY(-1px)}.hero-note{font-size:11px;color:var(--muted)}.topic-map{position:relative;height:335px;max-width:475px;width:100%;margin:0 auto}.orbit{position:absolute;border:1px solid #23403e;border-radius:50%;inset:41px 91px}.orbit.outer{inset:8px 59px;border-style:dashed;border-color:#263746}.map-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:142px;height:142px;border:1px solid #2f625b;background:#102827;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font:500 15px/1.5 'Space Grotesk',sans-serif;text-align:center}.map-center img{width:40px;height:40px;margin-bottom:8px}.map-node{position:absolute;display:flex;align-items:center;gap:9px;background:var(--bg);padding:8px 10px;color:#b8c7d9;font-size:12px;transform:translate(-50%,-50%);white-space:nowrap}.map-node img{width:24px;height:24px}.n1{left:50%;top:5%}.n2{left:87%;top:29%}.n3{left:87%;top:76%}.n4{left:50%;top:96%}.n5{left:13%;top:76%}.n6{left:13%;top:29%}.map-caption{text-align:center;font:10px 'JetBrains Mono',monospace;color:var(--muted);margin-top:18px;letter-spacing:.3px}.section-heading{padding-top:31px;border-top:1px solid var(--line);margin-bottom:29px}.section-heading p{max-width:650px;color:var(--muted);font-size:14px;margin-top:13px}.topics{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;align-items:start}.topic{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;grid-column:span 4;min-width:0}.topic.wide{grid-column:span 7;background:#0e2228;border-color:#284d4b}.topic.data{grid-column:span 5}.topic.full{grid-column:1/-1}.topic-body{padding:28px 29px 22px}.topic-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.topic-icon{width:39px;height:39px}.topic-number{font:12px 'JetBrains Mono',monospace;color:#98acae}.topic p{color:var(--muted);font-size:13px;margin-top:12px}.topic-visual{margin-top:24px;min-height:110px;display:flex;align-items:center}.principles{display:flex;gap:12px;align-items:stretch;width:100%}.principle{flex:1;border-left:1px solid #3c7268;padding:0 16px 0 13px}.principle span{color:#73d6c3;font:11px 'JetBrains Mono',monospace}.principle strong{display:block;font:500 16px/1.4 'Space Grotesk',sans-serif;margin-top:9px}.principle small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.data-files{display:flex;align-items:center;gap:9px;flex-wrap:wrap;width:100%}.file{border:1px solid #42546b;border-radius:6px;padding:13px 12px;background:#172334;font-size:11px;display:flex;align-items:center;gap:8px}.file:before{content:'';width:11px;height:15px;border:1px solid #70bbae;border-radius:2px}.email-visual{display:block;border:1px solid #394c60;border-radius:8px;padding:15px 17px;background:#0b1320;width:100%}.email-visual small{font:9px 'JetBrains Mono',monospace;color:var(--muted);letter-spacing:.6px;text-transform:uppercase}.email-visual strong{display:block;font:500 13px 'Space Grotesk',sans-serif;margin-top:9px}.email-visual span{display:inline-block;margin-top:12px;color:#6edfca;font-size:10px}.workplace-visual{display:flex;justify-content:space-between;gap:13px;width:100%;padding:10px 3px}.workplace-visual>div{text-align:center;flex:1}.workplace-visual i{display:grid;place-items:center;border:1px solid #43556a;width:45px;height:43px;margin:0 auto 10px;border-radius:7px;background:#172335;font:18px 'Space Grotesk',sans-serif;color:var(--accent);font-style:normal}.workplace-visual span{font-size:10px;color:var(--muted)}.rights-visual{display:flex;flex-direction:column;gap:8px;min-width:0;width:100%}.rights-visual span{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #2e3e53;font-size:12px}.rights-visual b{color:var(--accent);font-weight:400}.topic details{border-top:1px solid var(--line)}summary{list-style:none;cursor:pointer;min-height:53px;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px;color:var(--ink);padding:13px 29px}summary::-webkit-details-marker{display:none}summary:after{content:'+';font:22px 'Space Grotesk',sans-serif;color:var(--accent);flex:none}details[open]>summary:after{content:'−'}details[open]>summary{background:#142132}summary:hover{color:var(--accent)}.details-inner{padding:3px 29px 25px}.details-inner h4{font:500 13px 'Space Grotesk',sans-serif;margin:19px 0 6px}.details-inner ul{padding-left:17px;margin:0;color:var(--muted);font-size:12px}.details-inner li{margin-top:7px}.details-inner .takeaway{padding-left:13px;border-left:2px solid var(--accent);font-size:12px;line-height:1.8}.incident-body{display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:60px;padding:29px}.incident-heading{display:flex;align-items:flex-start;gap:23px}.incident-heading img{width:44px;flex:none}.incident-heading .topic-number{display:block;margin-bottom:9px;font-size:10px}.incident-heading h3{font-size:26px}.incident-heading p{max-width:380px}.incident-flow{display:flex;align-items:center;justify-content:space-between;gap:14px}.flow-step{flex:1}.flow-step i{display:inline-grid;place-items:center;width:27px;height:27px;border:1px solid #456e66;border-radius:50%;color:var(--accent);font:11px 'JetBrains Mono',monospace;font-style:normal;margin-bottom:10px}.flow-step strong{font:500 13px/1.5 'Space Grotesk',sans-serif;display:block}.flow-arrow{color:#4f8177;font-size:23px}.incident-detail .details-inner{display:grid;grid-template-columns:1fr 1fr;gap:30px}.practice{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;padding-top:78px;padding-bottom:72px}.practice-heading h2{font-size:36px}.practice-heading p{font-size:14px;color:var(--muted);margin-top:20px;max-width:360px}.practice-heading .label{display:block;font-size:11px;color:var(--accent);margin-bottom:15px}.examples{border-top:1px solid var(--line)}.examples details{border-bottom:1px solid var(--line)}.examples summary{font:500 17px/1.5 'Space Grotesk',sans-serif;padding:22px 0}.examples details[open]>summary{background:none}.examples summary .example-no{font:11px 'JetBrains Mono',monospace;color:var(--accent);margin-right:15px}.examples p{font-size:13px;color:var(--muted);padding:0 33px 24px 31px;margin:0;max-width:580px}.contact{background:#102826;border:1px solid #325a51;border-radius:14px;padding:36px 40px;display:flex;justify-content:space-between;gap:45px;align-items:center;margin-bottom:45px}.contact h2{font-size:30px;letter-spacing:-1px}.contact p{color:#b5c9c4;font-size:13px;margin-top:11px;max-width:600px}.contact .button{white-space:nowrap}.footer{border-top:1px solid var(--line);padding-top:23px;padding-bottom:27px;display:flex;justify-content:space-between;gap:25px;color:var(--muted);font-size:10px}.footer-links{display:flex;gap:25px}.footer a{min-height:30px;display:flex;align-items:center}.footer a:hover{color:var(--accent)}
@media(min-width:1000px){.topic:not(.full) .topic-body{min-height:330px}.topic:not(.wide):not(.data):not(.full) h3{min-height:58px}.topic:not(.wide):not(.data):not(.full) .topic-body{min-height:363px}}
@media(max-width:1100px){.wrap{padding-inline:30px}.hero{gap:15px}.hero h1{font-size:43px}.header-nav{gap:23px}.brand-name{font-size:15px}.map-node{font-size:11px}.topic-map{max-width:400px;height:310px}.orbit{inset:38px 74px}.orbit.outer{inset:8px 43px}.n2,.n3{left:85%}.n5,.n6{left:15%}.topic-body{padding:24px}.topic h3{font-size:23px}.topic p{font-size:12px}.principle{padding-left:10px;padding-right:8px}.principle strong{font-size:14px}.file{padding:11px 9px;font-size:10px}.incident-body{gap:30px}.practice{gap:45px}.contact{padding:30px}}
@media(max-width:850px){.hero{grid-template-columns:1fr;padding-top:45px;gap:43px}.hero-copy{max-width:660px}.hero h1{font-size:49px}.topic-map{max-width:460px;height:310px}.hero-art{margin-bottom:6px}.header-nav .back{display:none}.topic.wide,.topic.data,.topic{grid-column:span 6}.topic.full{grid-column:span 6}.topic:not(.full) .topic-body{min-height:355px}.topic-top{margin-bottom:16px}.topic h3{min-height:52px}.principles{gap:5px}.principle strong{font-size:13px}.principle small{font-size:9px}.incident-body{grid-template-columns:1fr;padding:24px;gap:24px;min-height:355px}.incident-heading{display:block}.incident-heading img{width:39px;height:39px;margin-bottom:18px}.incident-heading .topic-number{display:none}.incident-heading h3{font-size:23px}.incident-flow{gap:9px}.flow-step strong{font-size:11px}.flow-arrow{font-size:16px}.incident-detail .details-inner{display:block}.practice{grid-template-columns:1fr;gap:30px}.practice-heading p{max-width:600px}.contact{display:block}.contact .button{margin-top:25px}.footer{font-size:9px}}
@media(max-width:560px){.wrap{padding-inline:21px}.header-inner{height:76px;gap:15px}.brand{gap:8px}.brand img{width:51px;height:45px}.brand-name{font-size:12px;letter-spacing:1px}.brand-name small{font-size:7px;letter-spacing:.25px}.header-nav{gap:0;font-size:12px}.header-nav a:nth-child(2){display:none}.hero{padding-top:37px;padding-bottom:38px;gap:36px}.eyebrow{font-size:9px;margin-bottom:16px}.hero h1{font-size:clamp(32px,8.2vw,39px);letter-spacing:-1.5px}.hero-copy>p:last-of-type{font-size:13px;line-height:1.85;margin-top:21px}.hero-actions{gap:15px;margin-top:25px}.hero-note{font-size:9px;max-width:85px;line-height:1.6}.button{font-size:12px;padding:12px 16px;gap:22px}.topic-map{height:286px;max-width:350px}.map-node{font-size:10px;gap:5px;padding:7px 4px}.map-node img{width:20px;height:20px}.map-center{width:117px;height:117px;font-size:13px}.map-center img{width:33px;height:33px}.orbit{inset:37px 49px}.orbit.outer{inset:4px 18px}.n2,.n3{left:83%}.n5,.n6{left:17%}.map-caption{font-size:9px;margin-top:17px}.section-heading{padding-top:30px;margin-bottom:24px}.section-heading h2{font-size:31px;letter-spacing:-1px}.section-heading p{font-size:12px;line-height:1.9}.topics{gap:17px;grid-template-columns:1fr}.topic,.topic.wide,.topic.data,.topic.full{grid-column:1}.topic:not(.full) .topic-body{min-height:0}.topic-body{padding:25px 24px 23px}.topic h3{font-size:25px;min-height:0}.topic p{font-size:12px;line-height:1.8}.topic-top{margin-bottom:18px}.topic-visual{min-height:95px;margin-top:24px}.principles{gap:9px}.principle strong{font-size:15px}.principle small{font-size:9px}.data-files{gap:7px}.file{padding:12px 10px}.email-visual{min-height:106px}.workplace-visual{padding-block:5px}.rights-visual{min-height:108px}.incident-body{min-height:0;padding:25px 24px;gap:25px}.incident-heading h3{font-size:25px}.incident-flow{gap:12px}.flow-step strong{font-size:12px}.flow-arrow{font-size:19px}summary{padding:14px 24px}.details-inner{padding-inline:24px}.practice{padding-top:49px;padding-bottom:45px;gap:28px}.practice-heading h2{font-size:31px}.practice-heading p{font-size:13px;margin-top:15px}.examples summary{font-size:16px;padding-block:20px}.examples p{font-size:12px;padding-right:15px}.examples summary .example-no{margin-right:9px}.contact{padding:28px 24px;margin-bottom:30px}.contact h2{font-size:29px}.contact p{font-size:12px;line-height:1.85}.footer{display:block;font-size:9px;padding-bottom:24px}.footer-links{margin-top:14px;gap:23px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.button:hover{transform:none}}

@media(max-width:360px){.brand-name small{display:none}.hero-actions{gap:12px}}

/* Website integration: shared theme, consent and locally hosted fonts. */
:root{--font-display:'Space Grotesk',sans-serif;--font-body:Inter,sans-serif;--font-mono:'JetBrains Mono',monospace;--text-1:#f0f5ff;--text-2:#a3b2c7;--text-3:#a3b2c7;--surface-up:#172335;--accent-dim:rgba(0,201,167,.12);--accent-glow:rgba(0,201,167,.06);--border:#263547;--border-accent:rgba(0,201,167,.3);--ease-out:cubic-bezier(.23,1,.32,1)}
button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid var(--accent-text);outline-offset:4px}[hidden]{display:none!important}
.header-actions{display:flex;align-items:center;gap:24px}.brand .logo-light{display:none}.footer .cc-footer-link{font-size:10px;line-height:1.7;min-height:30px;background:none;border:0;color:var(--muted);padding:0}.footer-links{flex-wrap:wrap}.footer{align-items:baseline}
:root[data-theme="light"]{--ink:#0b1426;--muted:#4a5c77;--line:#cad5e3;--raised:#edf2f8;--teal:#dceee8}
:root[data-theme="light"] .brand .logo-dark{display:none}:root[data-theme="light"] .brand .logo-light{display:block}
:root[data-theme="light"] :is(em,.eyebrow,.principle span,.flow-step i,.rights-visual b,.examples summary .example-no,.practice-heading .label,summary::after){color:var(--accent-text)}
:root[data-theme="light"] .topic.wide{background:#e3f1ec;border-color:#a5c6bd}
:root[data-theme="light"] .map-center{background:#e0eee8;border-color:#98b6ac}
:root[data-theme="light"] .map-node{color:var(--muted)}
:root[data-theme="light"] .orbit{border-color:#bacfc7}:root[data-theme="light"] .orbit.outer{border-color:#b7c6d5}
:root[data-theme="light"] .topic-number{color:var(--muted)}
:root[data-theme="light"] .principle{border-color:#8cad9f}
:root[data-theme="light"] .file{background:#edf2f8;border-color:#b4c3d4}
:root[data-theme="light"] .file::before{border-color:#48786b}
:root[data-theme="light"] .email-visual{background:#edf2f8;border-color:#b4c3d4}
:root[data-theme="light"] .email-visual span{color:var(--accent-text)}
:root[data-theme="light"] .workplace-visual i{background:#edf2f8;border-color:#a6b8cb;color:var(--accent-text)}
:root[data-theme="light"] .rights-visual span{border-color:#cad5e3}
:root[data-theme="light"] details[open]>summary{background:#edf2f8}
:root[data-theme="light"] .examples details[open]>summary{background:none}
:root[data-theme="light"] .flow-arrow{color:#58786c}
:root[data-theme="light"] .contact{background:#dceee7;border-color:#a4c8bb}
:root[data-theme="light"] .contact p{color:#3c5b51}
:root[data-theme="light"] img[src*="schulungen/icons/"]{filter:brightness(.58) saturate(.85)}
:root[data-theme="light"] .button:hover{background:#34c7af}
@media(max-width:850px){.header-actions{gap:18px}.header-nav{gap:17px}}
@media(max-width:620px){.header-nav a:nth-child(2){display:none}.header-actions{gap:12px}.header-nav{font-size:12px}}
@media(max-width:430px){.header-nav{display:none}.header-actions{gap:0}.brand-name small{display:block}.footer .cc-footer-link{font-size:9px}}

/* assets/css/passwort-generator.css */
/* Passwort-Generator – baut auf schulungen.css auf (Header, Footer, Typo, Tokens). */
.pg-hero{padding-top:62px;padding-bottom:26px;max-width:760px}
.pg-hero p:last-child{color:var(--muted);margin-top:22px;max-width:620px}

.pg-tool{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:60px}
.pg-output{display:flex;align-items:center;gap:14px;padding:26px 29px;border-bottom:1px solid var(--line);background:#0b1320}
.pg-password{flex:1;min-width:0;font:500 clamp(20px,2.6vw,28px)/1.35 'JetBrains Mono',monospace;letter-spacing:.5px;overflow-wrap:anywhere;word-break:break-all;min-height:38px;outline:0}
.pg-password .d{color:#7cc4ff}.pg-password .s{color:#f5b971}
.pg-icon-btn{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:9px;border:1px solid var(--line);background:var(--raised);color:var(--ink);transition:border-color .18s,color .18s,transform .18s}
.pg-icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.pg-icon-btn:active{transform:scale(.94)}
.pg-icon-btn svg{width:21px;height:21px}
.pg-icon-btn.is-spinning svg{transition:transform .4s var(--ease-out);transform:rotate(-180deg)}

.pg-strength{padding:16px 29px 18px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:10px 20px;align-items:center}
.pg-meter{grid-column:1/-1;height:6px;border-radius:6px;background:var(--raised);overflow:hidden}
.pg-meter span{display:block;height:100%;width:0;border-radius:inherit;background:var(--pg-c,#e5484d);transition:width .3s var(--ease-out),background .3s}
.pg-strength-label{font:500 15px 'Space Grotesk',sans-serif;color:var(--pg-c,#e5484d);white-space:nowrap}
.pg-strength-meta{font:11px 'JetBrains Mono',monospace;color:var(--muted);text-align:right}

.pg-settings{display:grid;grid-template-columns:1fr 1fr;gap:0}
.pg-group{padding:24px 29px 28px}
.pg-group+.pg-group{border-left:1px solid var(--line)}
.pg-group h2{font:11px/1.5 'JetBrains Mono',monospace;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:18px}

.pg-length{display:flex;align-items:center;gap:16px}
.pg-length input[type=range]{flex:1;accent-color:var(--accent);height:44px;min-width:0}
.pg-length input[type=number]{width:72px;height:44px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:500 16px 'JetBrains Mono',monospace;text-align:center}
.pg-length input:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px}
.pg-presets{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.pg-presets button{min-height:36px;padding:0 13px;border-radius:7px;border:1px solid var(--line);background:none;color:var(--muted);font-size:12px}
.pg-presets button:hover,.pg-presets button[aria-pressed=true]{border-color:var(--accent);color:var(--ink)}

.pg-check{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:48px;border-bottom:1px solid var(--line);cursor:pointer;font-size:14px}
.pg-check:last-child{border-bottom:0}
.pg-check small{display:block;font:11px 'JetBrains Mono',monospace;color:var(--muted)}
.pg-check input{appearance:none;-webkit-appearance:none;flex:none;width:42px;height:24px;border-radius:24px;background:var(--raised);border:1px solid var(--line);position:relative;cursor:pointer;transition:background .18s,border-color .18s;margin:0}
.pg-check input::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:transform .2s var(--ease-out),background .18s}
.pg-check input:checked{background:var(--accent);border-color:var(--accent)}
.pg-check input:checked::after{transform:translateX(18px);background:#03261f}
.pg-check input:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px}

.pg-actions{display:flex;gap:12px;padding:0 29px 28px;flex-wrap:wrap}
.pg-actions .button{border:0}
.pg-ghost{display:inline-flex;align-items:center;min-height:48px;padding:12px 20px;border-radius:7px;border:1px solid var(--line);background:none;color:var(--ink);font-size:13px}
.pg-ghost:hover{border-color:var(--accent)}
.pg-privacy{font:11px/1.6 'JetBrains Mono',monospace;color:var(--muted);padding:0 29px 26px;margin:0}
.pg-privacy b{color:var(--accent);font-weight:400}

.pg-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--accent);color:#03261f;padding:11px 18px;border-radius:8px;font-size:13px;font-weight:500;transition:opacity .2s,transform .2s var(--ease-out);z-index:20}
.pg-toast.show{opacity:1;transform:translate(-50%,0)}

.pg-tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:20px}
.pg-tip{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px 26px 24px}
.pg-tip .mono{color:var(--accent);margin-bottom:12px}
.pg-tip h3{font-size:21px}
.pg-tip p{color:var(--muted);font-size:13px;margin-top:10px}

:root[data-theme="light"] .pg-output{background:#edf2f8}
:root[data-theme="light"] .pg-password .d{color:#1d5fa8}
:root[data-theme="light"] .pg-password .s{color:#a35a00}
:root[data-theme="light"] .pg-tool,:root[data-theme="light"] .pg-tip{background:#fff}
:root[data-theme="light"] .pg-strength-label{filter:brightness(.72)}
:root[data-theme="light"] .pg-tip .mono,:root[data-theme="light"] .pg-privacy b{color:var(--accent-text)}

@media(max-width:850px){.pg-settings{grid-template-columns:1fr}.pg-group+.pg-group{border-left:0;border-top:1px solid var(--line)}.pg-tips{grid-template-columns:1fr}}
@media(max-width:560px){.pg-hero{padding-top:37px}.pg-output{padding:20px;gap:8px;flex-wrap:wrap}.pg-password{flex-basis:100%;font-size:20px}.pg-output .pg-icon-btn{flex:1;width:auto}.pg-strength,.pg-group{padding-inline:20px}.pg-actions,.pg-privacy{padding-inline:20px}.pg-actions .button,.pg-ghost{flex:1;justify-content:center}}
@media(prefers-reduced-motion:reduce){.pg-meter span,.pg-toast,.pg-icon-btn svg{transition:none!important}}

/* assets/css/cookie-consent.css */
/* ============================================================
   ZERO ONE IT — Cookie-/Consent-Center
   Eigenstaendiges, praefixiertes Stylesheet (.cookie-consent / .cc-*),
   damit nichts mit bestehenden Klassen der Seiten kollidiert.
   Nutzt die vorhandenen Design-Tokens (--bg, --accent, --surface, ...),
   die in jeder Seite bereits im :root definiert sind.
   ============================================================ */

.cookie-consent{position:fixed;inset:0;z-index:900;display:none;visibility:hidden;
  --cc-icon-size:88px;--cc-shell-pad:calc(var(--cc-icon-size) * .84)}
.cookie-consent.cc-visible{display:block;visibility:visible}

.cc-backdrop{position:absolute;inset:0;background:var(--schleier);opacity:0;transition:opacity .38s ease;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cookie-consent.cc-open .cc-backdrop{opacity:1}

/* align-items/justify-content werden bewusst zweimal deklariert: die "safe"-Variante
   verhindert, dass zentrierter, ueberlaufender Inhalt am oberen Rand abgeschnitten wird
   (klassisches Flexbox-Centering-Problem). Browser ohne Unterstuetzung ignorieren die
   ungueltige Deklaration und behalten die vorherige "center"-Zeile als Fallback. */
.cc-viewport{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  align-items:safe center;justify-content:safe center;
  padding:20px;overflow-y:auto;overscroll-behavior:contain}

/* ===== Shell: reserviert echten Platz fuer das Icon, damit weder die Zentrierung
   in .cc-viewport noch das overflow:auto von .cc-dialog es beschneiden. Das Icon liegt
   als Geschwister VOR .cc-dialog, ausserhalb von dessen Clipping-/Scroll-Box. ===== */
.cc-shell{position:relative;width:100%;max-width:540px;overflow:visible;
  padding-top:var(--cc-shell-pad)}

.cc-dialog{position:relative;width:100%;z-index:1;
  background:linear-gradient(165deg,rgba(var(--hoch-rgb),0.94) 0%,rgba(var(--grund-rgb),0.97) 100%);
  border:1px solid var(--border-accent);border-radius:22px;
  padding:52px 40px 36px;
  box-shadow:0 40px 90px -24px rgba(var(--schatten-rgb),.65),0 0 0 1px rgba(var(--waesche-rgb),.03),0 0 70px -18px var(--accent-glow);
  opacity:0;transform:translateY(22px) scale(.98);
  transition:opacity .42s var(--ease-out,cubic-bezier(.23,1,.32,1)),transform .42s var(--ease-out,cubic-bezier(.23,1,.32,1)),border-color .3s ease;
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  max-height:calc(100dvh - 40px - var(--cc-shell-pad));overflow-y:auto}
.cookie-consent.cc-open .cc-dialog{opacity:1;transform:translateY(0) scale(1)}
.cc-dialog:focus{outline:none}
.cc-dialog:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* ===== Icon: liegt VOLLSTAENDIG innerhalb der von .cc-shell reservierten Flaeche
   (top:0 = oberste Kante der Shell selbst, keine negative Verschiebung nach oben -
   dadurch kennt die Flexbox-Zentrierung in .cc-viewport die tatsaechliche Gesamthoehe
   und das Icon kann nie ueber den sichtbaren Viewport hinausragen). Der Ueberlapp auf
   die obere Dialog-Kante entsteht allein dadurch, dass --cc-shell-pad kleiner ist als
   --cc-icon-size (Dialog beginnt, bevor das Icon endet).
   .cc-icon uebernimmt NUR die Positionierung (nie animiert) - .cc-icon-visual
   NUR die Eintritts-Animation (Opacity/Scale). So ueberschreiben sich Positions-
   und Animations-Transform nie gegenseitig. */
.cc-icon{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:var(--cc-icon-size);height:var(--cc-icon-size);z-index:2;pointer-events:none}
.cc-icon-visual{display:block;width:100%;height:100%;opacity:0;transform:scale(.92);
  transition:opacity .4s ease .1s,transform .4s var(--ease-out,cubic-bezier(.23,1,.32,1)) .1s}
.cookie-consent.cc-open .cc-icon-visual{opacity:1;transform:scale(1)}
.cc-icon-visual svg{display:block;width:100%;height:100%}
.cc-icon-pulse{animation:cc-pulse 3.6s ease-in-out infinite}

@keyframes cc-pulse{
  0%,100%{opacity:.16;transform:scale(1)}
  50%{opacity:.32;transform:scale(1.045)}
}

/* ===== Inhalt ===== */
.cc-panes{position:relative}
.cc-pane{opacity:1;transform:translateX(0);transition:opacity .22s var(--ease-out,cubic-bezier(.23,1,.32,1)),transform .22s var(--ease-out,cubic-bezier(.23,1,.32,1))}
.cc-pane[hidden]{display:none}
.cc-panes.cc-switching-fwd .cc-pane-main{opacity:0;transform:translateX(-14px)}
.cc-panes.cc-switching-fwd .cc-pane-settings{opacity:0;transform:translateX(14px)}
.cc-panes.cc-switching-back .cc-pane-settings{opacity:0;transform:translateX(14px)}
.cc-panes.cc-switching-back .cc-pane-main{opacity:0;transform:translateX(-14px)}

.cc-overline{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);text-align:center;margin-bottom:14px}
.cc-title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.375rem,3vw,1.625rem);line-height:1.2;letter-spacing:-.01em;color:var(--text-1);text-align:center;margin-bottom:14px}
.cc-text{font-size:.9375rem;line-height:1.65;color:var(--text-2);text-align:center;margin-bottom:28px}

.cc-actions{display:flex;flex-direction:column;gap:12px;align-items:stretch}

.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:50px;padding:14px 24px;border-radius:100px;border:none;cursor:pointer;
  font-family:var(--font-display);font-size:.9375rem;font-weight:600;
  transition:background .2s,color .2s,border-color .2s,transform .16s var(--ease-out,cubic-bezier(.23,1,.32,1)),box-shadow .25s ease}
.cc-btn:active{transform:scale(.98)}
.cc-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.cc-btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 30px -10px rgba(0,201,167,.45)}
.cc-btn-primary:hover{background:var(--accent-hell);transform:translateY(-1px);box-shadow:0 14px 36px -10px rgba(0,201,167,.6)}

.cc-btn-outline{background:transparent;color:var(--text-1);border:1px solid var(--border)}
.cc-btn-outline:hover{border-color:var(--accent-text);color:var(--accent-text);background:var(--accent-dim)}

.cc-settings-link{display:block;width:100%;text-align:center;background:none;border:none;cursor:pointer;
  margin-top:18px;padding:10px;font-family:var(--font-body);font-size:.875rem;font-weight:500;
  color:var(--text-2);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;
  transition:color .2s,text-decoration-color .2s}
.cc-settings-link:hover{color:var(--accent-text);text-decoration-color:var(--accent-text)}
.cc-settings-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.cc-privacy-link{text-align:center;margin-top:16px}
.cc-privacy-link a{font-size:.8125rem;color:var(--text-3);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.cc-privacy-link a:hover{color:var(--accent-text);text-decoration-color:var(--accent-text)}
.cc-privacy-link a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ===== Einstellungen-Ansicht ===== */
.cc-back{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
  color:var(--text-2);font-family:var(--font-body);font-size:.8125rem;font-weight:500;padding:6px 4px;margin-bottom:18px;
  transition:color .2s}
.cc-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.cc-back:hover{color:var(--accent-text)}
.cc-back:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.cc-categories{display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:24px}
.cc-category{padding:18px 20px;border-bottom:1px solid var(--border)}
.cc-category:last-child{border-bottom:none}
.cc-category-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.cc-category-name{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:.9375rem;color:var(--text-1)}
.cc-lock-icon{width:14px;height:14px;stroke:var(--text-3);fill:none;stroke-width:1.6;flex:0 0 auto}
.cc-locked-badge{font-family:var(--font-mono);font-size:.625rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);
  background:var(--surface-up);border:1px solid var(--border);border-radius:100px;padding:4px 10px;white-space:nowrap}
.cc-category-desc{font-size:.8125rem;line-height:1.6;color:var(--text-2)}

/* Toggle */
.cc-toggle{position:relative;width:44px;height:26px;border-radius:100px;border:1px solid var(--border);
  background:var(--surface-up);cursor:pointer;flex:0 0 auto;padding:0;transition:background .22s ease,border-color .22s ease}
.cc-toggle-knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--text-3);
  transition:transform .22s var(--ease-out,cubic-bezier(.23,1,.32,1)),background .22s ease}
.cc-toggle[aria-checked="true"]{background:var(--accent);border-color:var(--accent-text)}
.cc-toggle[aria-checked="true"] .cc-toggle-knob{transform:translateX(18px);background:var(--accent-ink)}
.cc-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.cc-actions-settings{margin-top:4px}

/* ===== Responsive ===== */
@media(max-width:560px){
  .cookie-consent{--cc-icon-size:72px}
  .cc-dialog{padding:46px 22px 28px;border-radius:20px}
  .cc-title{font-size:1.25rem}
}
@media(max-height:700px){
  .cookie-consent{--cc-icon-size:68px}
  .cc-dialog{padding-top:42px}
  .cc-text{margin-bottom:20px}
}

/* ===== prefers-reduced-motion ===== */
@media(prefers-reduced-motion:reduce){
  .cc-backdrop,.cc-dialog,.cc-icon-visual,.cc-pane,.cc-btn,.cc-toggle,.cc-toggle-knob{transition:none!important}
  .cc-icon-pulse{animation:none!important}
  .cookie-consent.cc-open .cc-dialog{transform:none}
  .cc-icon-visual{transform:none!important}
}

/* ===== Footer-Link (dezent, blendet sich in bestehende Footer-Stile ein) ===== */
button.cc-footer-link{background:none;border:none;padding:0;margin:0;font:inherit;cursor:pointer;
  display:inline-flex;align-items:center;min-height:44px}