@charset "UTF-8";
/* bugbounty.de – Coming-Soon-Website (L1)
   Tokens und Komponenten aus der abgenommenen HTML-Vorschau (preview/assets/preview.css, Stand 03.11.2026),
   nur die benötigten Teile; danach Ergänzungen für die Website. Keine externen Ressourcen, keine Inline-Styles.
   Icons: icons.css (Lucide, ISC-Lizenz, siehe LICENSE-lucide.txt). Schriften: Inter und Oxanium (SIL OFL 1.1, ../fonts/). */

/* ---------- Schrift: Inter (SIL OFL 1.1), lokal eingebunden; variable Schrift ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Logo-Schrift: Oxanium (SIL OFL 1.1), lokal; nur für die Wortmarke */
@font-face { font-family: "Oxanium"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/oxanium-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


/* ==========================================================================
   Tokens – Light Mode. Standard ist die AA-konforme Variante (Entscheidung Auftraggeber 03.11.2026):
   weiße Schrift auf #0E7490 5,4 : 1 und auf #164E63 9,1 : 1. Die exakte Vorgabe (#06B6D4/#0891B2,
   weiße Schrift nur 2,4 : 1 bzw. 3,7 : 1) bleibt über data-variant="spec" zum Vergleich umschaltbar.
   ========================================================================== */
:root {
  color-scheme: light;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;

  /* Markenfarben (Vorgabe) */
  --brand-cyan: #06B6D4;
  --cyan-hover: #0891B2;
  --cyan-pressed: #0E7490;
  --cyan-light: #CFFAFE;
  --cyan-dark: #164E63;

  /* Flächen */
  --background: #F8FAFC;
  --surface: #FFFFFF;
  --surface-elevated: #FFFFFF;
  --surface-muted: #F1F5F9;          /* Ergänzung: Tabellenkopf, Code, Hover */
  --row-hover: #F8FAFC;

  /* Sidebar und Markenleiste – AA-konform (Werte der Vorgabe im Kommentar) */
  --sidebar: #0E7490;                /* Vorgabe #06B6D4 */
  --sidebar-hover: #164E63;          /* Vorgabe #0891B2 */
  --sidebar-active: #164E63;         /* Vorgabe #0891B2 */
  --sidebar-text: #FFFFFF;
  --sidebar-text-hover: #FFFFFF;
  --sidebar-text-active: #FFFFFF;
  --sidebar-text-muted: #CFFAFE;
  --sidebar-line: rgba(255, 255, 255, .2);
  --sidebar-line-strong: rgba(255, 255, 255, .6);
  --sidebar-focus: #FFFFFF;
  --sidebar-pressed-bg: #FFFFFF;
  --sidebar-pressed-fg: #0E7490;
  --sidebar-pressed-hover: #ECFEFF;

  /* Interaktion – AA-konform */
  --primary: #0E7490;                /* Vorgabe #0891B2 */
  --primary-hover: #164E63;          /* Vorgabe #0E7490 */
  --on-primary: #FFFFFF;
  --link: #0E7490;
  --link-hover: #164E63;
  --focus: #0891B2;

  /* Text und Linien */
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-tertiary: #64748B;          /* Ergänzung */
  --border: #E2E8F0;
  --border-strong: #8291A6;          /* Ergänzung: Feldränder ≥ 3 : 1 (WCAG 1.4.11) */
  --input-background: #FFFFFF;

  /* Akzent (Cyan gezielt, nicht als Fläche) */
  --accent-bg: #CFFAFE;
  --accent-fg: #164E63;
  --accent-subtle: #ECFEFF;
  --accent-line: #06B6D4;

  --tooltip-bg: #0F172A;
  --tooltip-fg: #F8FAFC;
  --tooltip-line: transparent;
  --overlay: rgba(15, 23, 42, .55);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .06);
  --skeleton-a: #E2E8F0;
  --skeleton-b: #F1F5F9;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --hero-glow-1: rgba(6, 182, 212, .20);
  --hero-glow-2: rgba(14, 116, 144, .10);
  --grad-text: linear-gradient(110deg, #0891B2 0%, #0E7490 55%, #164E63 100%);

  /* Status – immer zusammen mit Text */
  --ok-fg: #166534;     --ok-bg: #DCFCE7;
  --warn-fg: #92400E;   --warn-bg: #FEF3C7;
  --bad-fg: #991B1B;    --bad-bg: #FEE2E2;
  --info-fg: #1E40AF;   --info-bg: #DBEAFE;
  --later-fg: #6B21A8;  --later-bg: #F3E8FF;
  --neutral-fg: #334155; --neutral-bg: #F1F5F9;

  /* Schweregrade – getrennt von der Markenfarbe */
  --sev-crit-fg: #991B1B; --sev-crit-bg: #FEE2E2;
  --sev-high-fg: #9A3412; --sev-high-bg: #FFEDD5;
  --sev-med-fg: #854D0E;  --sev-med-bg: #FEF9C3;
  --sev-low-fg: #166534;  --sev-low-bg: #DCFCE7;
  --sev-none-fg: #334155; --sev-none-bg: #F1F5F9;


  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --sb-w: 240px;
  --sb-w-collapsed: 72px;
  --topbar-h: 56px;
}

/* ==========================================================================
   Tokens – Dark Mode (Vorgabe: neutral Graphite/Anthrazit, keine blauen Flächen)
   ========================================================================== */
.dark {
  color-scheme: dark;
  --background: #171717; --surface: #262626; --surface-elevated: #303030; --surface-muted: #2C2C2C; --row-hover: #2C2C2C;
  --sidebar: #202020; --sidebar-hover: #303030; --sidebar-active: #383838;
  --sidebar-text: #D4D4D4; --sidebar-text-hover: #F5F5F5; --sidebar-text-active: #22D3EE; --sidebar-text-muted: #A3A3A3;
  --sidebar-line: #303030; --sidebar-line-strong: #525252; --sidebar-focus: #22D3EE;
  --sidebar-pressed-bg: #22D3EE; --sidebar-pressed-fg: #171717; --sidebar-pressed-hover: #67E8F9;
  --primary: #22D3EE; --primary-hover: #67E8F9; --on-primary: #171717;
  --link: #22D3EE; --link-hover: #67E8F9; --focus: #22D3EE;
  --text-primary: #F5F5F5; --text-secondary: #A3A3A3; --text-tertiary: #A3A3A3;
  --border: #383838; --border-strong: #7A7A7A; --input-background: #262626;
  --accent-bg: #163A42; --accent-fg: #A5F3FC; --accent-subtle: #303030; --accent-line: #22D3EE;
  --tooltip-bg: #383838; --tooltip-fg: #F5F5F5; --tooltip-line: #525252;
  --overlay: rgba(0, 0, 0, .6);
  --shadow-sm: none;
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
  --skeleton-a: #303030; --skeleton-b: #3A3A3A;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3A3A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --hero-glow-1: rgba(34, 211, 238, .12); --hero-glow-2: rgba(6, 182, 212, .06);
  --grad-text: linear-gradient(110deg, #A5F3FC 0%, #67E8F9 40%, #22D3EE 100%);
  --ok-fg: #86EFAC; --ok-bg: #173323; --warn-fg: #FCD34D; --warn-bg: #3B2D0C; --bad-fg: #FCA5A5; --bad-bg: #431A1A;
  --info-fg: #93C5FD; --info-bg: #1C2C45; --later-fg: #D8B4FE; --later-bg: #36214A; --neutral-fg: #D4D4D4; --neutral-bg: #383838;
  --sev-crit-fg: #FCA5A5; --sev-crit-bg: #431A1A; --sev-high-fg: #FDBA74; --sev-high-bg: #43260F;
  --sev-med-fg: #FDE047; --sev-med-bg: #3B3208; --sev-low-fg: #86EFAC; --sev-low-bg: #173323;
  --sev-none-fg: #D4D4D4; --sev-none-bg: #383838;
}
/* Seiten ohne JavaScript folgen der Systemeinstellung (identische Werte wie .dark) */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark) {
    color-scheme: dark;
    --background: #171717; --surface: #262626; --surface-elevated: #303030; --surface-muted: #2C2C2C; --row-hover: #2C2C2C;
    --sidebar: #202020; --sidebar-hover: #303030; --sidebar-active: #383838;
    --sidebar-text: #D4D4D4; --sidebar-text-hover: #F5F5F5; --sidebar-text-active: #22D3EE; --sidebar-text-muted: #A3A3A3;
    --sidebar-line: #303030; --sidebar-line-strong: #525252; --sidebar-focus: #22D3EE;
    --sidebar-pressed-bg: #22D3EE; --sidebar-pressed-fg: #171717; --sidebar-pressed-hover: #67E8F9;
    --primary: #22D3EE; --primary-hover: #67E8F9; --on-primary: #171717;
    --link: #22D3EE; --link-hover: #67E8F9; --focus: #22D3EE;
    --text-primary: #F5F5F5; --text-secondary: #A3A3A3; --text-tertiary: #A3A3A3;
    --border: #383838; --border-strong: #7A7A7A; --input-background: #262626;
    --accent-bg: #163A42; --accent-fg: #A5F3FC; --accent-subtle: #303030; --accent-line: #22D3EE;
    --tooltip-bg: #383838; --tooltip-fg: #F5F5F5; --tooltip-line: #525252;
    --overlay: rgba(0, 0, 0, .6);
    --shadow-sm: none;
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
    --skeleton-a: #303030; --skeleton-b: #3A3A3A;
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3A3A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --hero-glow-1: rgba(34, 211, 238, .12); --hero-glow-2: rgba(6, 182, 212, .06);
    --grad-text: linear-gradient(110deg, #A5F3FC 0%, #67E8F9 40%, #22D3EE 100%);
    --ok-fg: #86EFAC; --ok-bg: #173323; --warn-fg: #FCD34D; --warn-bg: #3B2D0C; --bad-fg: #FCA5A5; --bad-bg: #431A1A;
    --info-fg: #93C5FD; --info-bg: #1C2C45; --later-fg: #D8B4FE; --later-bg: #36214A; --neutral-fg: #D4D4D4; --neutral-bg: #383838;
    --sev-crit-fg: #FCA5A5; --sev-crit-bg: #431A1A; --sev-high-fg: #FDBA74; --sev-high-bg: #43260F;
    --sev-med-fg: #FDE047; --sev-med-bg: #3B3208; --sev-low-fg: #86EFAC; --sev-low-bg: #173323;
    --sev-none-fg: #D4D4D4; --sev-none-bg: #383838;
  }
}

/* ==========================================================================
   Basis
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--background); color: var(--text-primary);
  font-family: var(--font-sans); font-size: .875rem; font-weight: 400; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
}
img, svg { max-width: 100%; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; color: var(--text-primary); }
h1 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }   /* Seitentitel: Semibold */
h2 { font-size: 1rem; font-weight: 600; }
h3 { font-size: .9375rem; font-weight: 500; }
.card h2 { font-size: .9375rem; font-weight: 500; }                               /* Kartenüberschriften: Medium */
.card h3 { font-weight: 500; }
p { margin: 0 0 1em; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
strong, b { font-weight: 600; }
code, .mono { font-family: var(--font-mono); font-size: .875em; }
code { overflow-wrap: anywhere; }
small, .small { font-size: .8125rem; }
.muted { color: var(--text-secondary); }
.subtle { color: var(--text-tertiary); }
hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: absolute; left: 8px; top: -64px; z-index: 100; background: var(--surface-elevated); color: var(--text-primary);
  padding: 10px 14px; border-radius: var(--radius); box-shadow: var(--shadow-lg); font-weight: 600;
}
.skip-link:focus { top: 8px; }
:target, section[id], h2[id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }

/* Hilfsklassen */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .container { padding: 0 24px; } }
.container-narrow { max-width: 860px; }
.stack > * + * { margin-top: 14px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row-between { display: flex; gap: 12px 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.spacer { flex: 1 1 auto; }
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 16px; }
.center { text-align: center; }
.is-disabled { opacity: .6; }

/* ==========================================================================
   Logo: Icon aus logo-icon.svg (als Maske, Farbe je Design) + Wortmarke in Oxanium (SIL OFL 1.1)
   Hell auf der Cyan-Fläche weiß (Vorgabe), auf hellen Flächen Cyan-Verlauf, im Dark Mode Cyan-Akzent.
   ========================================================================== */
/* Icon: weiß im Light Mode (Cyan-Fläche), Cyan im Dark Mode (Wunsch Auftraggeber); auf hellen Flächen Brand-Cyan */
:root { --logo-icon: #06B6D4; --logo-text: #0F172A; --logo-tld: #0891B2; }
.on-brand { --logo-icon: #FFFFFF; --logo-text: #FFFFFF; --logo-tld: #FFFFFF; }
.dark, .dark .on-brand { --logo-icon: #22D3EE; --logo-text: #F5F5F5; --logo-tld: #22D3EE; }
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark), :root:not(.light):not(.dark) .on-brand { --logo-icon: #22D3EE; --logo-text: #F5F5F5; --logo-tld: #22D3EE; }
}
.brand-link { display: inline-flex; align-items: center; flex: none; border-radius: var(--radius-sm); color: inherit; text-decoration: none; }
.brand-link:hover { text-decoration: none; }
.logo {
  display: inline-flex; align-items: center; gap: .38em; color: var(--logo-text); white-space: nowrap;
  font-family: "Oxanium", var(--font-sans); font-size: 1.125rem; font-weight: 700; line-height: 1; letter-spacing: -.005em;
}
.logo-icon {
  display: inline-block; flex: none; width: 1.28em; height: 1.5em; background: var(--logo-icon);
  -webkit-mask: var(--logo-mask) center / contain no-repeat; mask: var(--logo-mask) center / contain no-repeat;
}
.logo-tld { color: var(--logo-tld); }
.logo.lg { font-size: 1.75rem; }
@media (forced-colors: active) { .logo-icon { forced-color-adjust: none; background: CanvasText; } }

/* ==========================================================================
   Öffentliche Seiten: Markenleiste, Hero, Footer
   ========================================================================== */
.site-header { background: var(--sidebar); color: var(--sidebar-text); }
.site-header .container { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
.site-header .logo { font-size: 1.25rem; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-block; padding: 6px 10px; border-radius: var(--radius); color: var(--sidebar-text); text-decoration: none; font-size: .875rem; }
.site-nav a:hover { background: var(--sidebar-hover); color: var(--sidebar-text-hover); }
.site-nav a[aria-current="page"] { background: var(--sidebar-active); color: var(--sidebar-text-active); font-weight: 600; }
.ctx-chip { font-size: .6875rem; font-weight: 600; color: var(--sidebar-text); border: 1px solid var(--sidebar-line-strong); border-radius: 999px; padding: 2px 10px; }

.landing { padding-top: 0; }
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--background); border-bottom: 1px solid var(--border); }
.hero::before, .hero::after { content: ""; position: absolute; pointer-events: none; z-index: -1; border-radius: 50%; }
.hero::before { inset: -45% -15% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; background: radial-gradient(closest-side, var(--hero-glow-1), transparent 70%); }
.hero::after { inset: auto auto -55% -20%; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; background: radial-gradient(closest-side, var(--hero-glow-2), transparent 70%); }
.hero .container { padding-top: 40px; padding-bottom: 48px; }
.hero h1 { font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; max-width: 22ch; }
.hero h1 .grad-text { display: block; }
.hero .lead { font-size: clamp(.9375rem, .9rem + .25vw, 1.0625rem); color: var(--text-secondary); max-width: 62ch; }

/* Headerbild (E126): dunkles Band in beiden Designs, Motiv rechts, Text links. Der Abschnitt trägt .dark,
   damit dort die Tokens des dunklen Designs gelten. Unter 1000 px steht das Motiv über dem Text. */
.hero-media { --hero-media-bg: #0A1A2F; position: relative; isolation: isolate; overflow: hidden; background: var(--hero-media-bg); color: var(--text-primary); border-bottom: 1px solid var(--border); }
.hero-media .hero-art { position: absolute; top: 0; right: 0; z-index: -2; display: block; height: 100%; }
.hero-media .hero-art img { display: block; height: 100%; width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%); mask-image: linear-gradient(90deg, transparent 0, #000 18%); }
.hero-media::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--hero-media-bg) 0%, color-mix(in srgb, var(--hero-media-bg) 80%, transparent) 40%, transparent 62%); }
.hero-media .container { min-height: clamp(400px, 33vw, 500px); display: flex; flex-direction: column; justify-content: center; padding-top: 48px; padding-bottom: 56px; }
.hero-media .hero-text { max-width: 36rem; }
.hero-media h1 { font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; max-width: 22ch; margin: 0 0 .875rem; }
.hero-media h1 .grad-text { display: block; }
.hero-media .lead { font-size: clamp(.9375rem, .9rem + .25vw, 1.0625rem); color: var(--text-secondary); max-width: 58ch; }
.hero-media .btn-secondary { background: transparent; color: var(--text-primary); border-color: rgba(245, 245, 245, .6); }
.hero-media .btn-secondary:hover { background: rgba(255, 255, 255, .08); color: var(--text-primary); }
@media (max-width: 999px) {
  .hero-media .hero-art { position: relative; width: 100%; height: auto; }
  .hero-media .hero-art img { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; object-position: 82% 50%;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .hero-media::before { display: none; }
  .hero-media .container { min-height: 0; padding-top: 4px; padding-bottom: 40px; }
}
@media (max-width: 599px) { .hero-media .hero-art img { aspect-ratio: 16 / 9; object-position: 86% 50%; } }
/* Hoher Kontrast (Windows): Motiv ausblenden, damit Systemfarben für Text nie auf dem Bild stehen */
@media (forced-colors: active) { .hero-media .hero-art, .hero-media::before { display: none; } }
.claim {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 4px 12px 4px 8px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-primary); font-size: .75rem; font-weight: 600;
}
.claim .i { color: var(--link); --i-size: 1rem; }
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

.site-footer { border-top: 1px solid var(--border); background: var(--surface); padding: 20px 0 28px; color: var(--text-secondary); font-size: .8125rem; }
.site-footer nav { display: flex; gap: 8px 16px; flex-wrap: wrap; }
.site-footer a { color: var(--text-secondary); }
.site-footer a:hover { color: var(--text-primary); }
.powered { font-weight: 600; color: var(--text-secondary); }
.powered a { color: var(--text-primary); text-decoration: none; }

/* ==========================================================================
   Komponenten
   ========================================================================== */

/* Buttons (Semibold) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 14px;
  border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; text-decoration: none;
  font: inherit; font-size: .875rem; font-weight: 600; line-height: 1.2;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:hover { text-decoration: none; }
.btn .i { --i-size: 1rem; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); color: var(--on-primary); }
.btn-secondary { background: var(--surface); color: var(--text-primary); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-muted); color: var(--text-primary); }
.btn-ghost { background: transparent; color: var(--link); }
.btn-ghost:hover { background: var(--accent-subtle); color: var(--link-hover); }
.btn-danger { background: var(--surface); color: var(--bad-fg); border-color: var(--bad-fg); }
.btn-danger:hover { background: var(--bad-bg); color: var(--bad-fg); }
.btn-on-brand { background: var(--sidebar-pressed-bg); color: var(--sidebar-pressed-fg); }
.btn-on-brand:hover { background: var(--sidebar-pressed-hover); color: var(--sidebar-pressed-fg); }
.btn-sm { min-height: 30px; padding: 3px 10px; font-size: .8125rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] > .i { display: none; }

/* Icon-Buttons mit Tooltip */
.icon-btn {
  position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none;
  border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--text-secondary); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-muted); color: var(--text-primary); }
.on-brand .icon-btn { color: var(--sidebar-text); }
.on-brand .icon-btn:hover { background: var(--sidebar-hover); color: var(--sidebar-text-hover); }
.theme-toggle .i-sun { display: none; }
.dark .theme-toggle .i-sun { display: inline-block; }
.dark .theme-toggle .i-moon { display: none; }

.tip {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 60;
  white-space: nowrap; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--tooltip-line);
  background: var(--tooltip-bg); color: var(--tooltip-fg); font-size: .75rem; font-weight: 500; line-height: 1.3;
  box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .12s;
}
.tip::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.tip.tip-end { left: auto; right: 0; transform: none; }
.tip.tip-start, .tip.tip-auto-start { left: 0; right: auto; transform: none; }
.tip.tip-auto-end { left: auto; right: 0; transform: none; }
[data-tip-host]:hover > .tip, [data-tip-host]:focus-visible > .tip { opacity: 1; pointer-events: auto; }
:root.tips-off .tip { opacity: 0 !important; }

/* Sprachschalter / Segment-Buttons */
.seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius); }
.seg-btn {
  min-width: 32px; height: 28px; padding: 0 8px; border: 0; border-radius: calc(var(--radius) - 2px); background: transparent;
  color: var(--text-secondary); cursor: pointer; font: inherit; font-size: .75rem; font-weight: 600;
}
.seg-btn:hover { color: var(--text-primary); background: var(--surface-muted); }
.seg-btn[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.on-brand .seg { border-color: var(--sidebar-line-strong); }
.on-brand .seg-btn { color: var(--sidebar-text); }
.on-brand .seg-btn:hover { background: var(--sidebar-hover); color: var(--sidebar-text-hover); }
.on-brand .seg-btn[aria-pressed="true"] { background: var(--sidebar-pressed-bg); color: var(--sidebar-pressed-fg); }

/* Karten und KPI-Karten */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); }
.card.flat { box-shadow: none; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.card-head h2, .card-head h3 { margin: 0; }

/* Badges */
.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--neutral-bg); color: var(--neutral-fg); font-size: .75rem; font-weight: 600; line-height: 1.25;
}
.tag.ok, .tag.warn, .tag.bad, .tag.info, .tag.accent { padding-left: 8px; }
.tag.ok::before, .tag.warn::before, .tag.bad::before, .tag.info::before, .tag.accent::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}
.tag.ok { background: var(--ok-bg); color: var(--ok-fg); }
.tag.warn { background: var(--warn-bg); color: var(--warn-fg); }
.tag.bad { background: var(--bad-bg); color: var(--bad-fg); }
.tag.info { background: var(--info-bg); color: var(--info-fg); }
.tag.accent, .tag.v1 { background: var(--accent-bg); color: var(--accent-fg); }
.tag.later { background: var(--later-bg); color: var(--later-fg); }
.tag.outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-secondary); padding: 2px 8px; }
.sev { font-weight: 600; }
.sev.crit { background: var(--sev-crit-bg); color: var(--sev-crit-fg); }
.sev.high { background: var(--sev-high-bg); color: var(--sev-high-fg); }
.sev.med { background: var(--sev-med-bg); color: var(--sev-med-fg); }
.sev.low { background: var(--sev-low-bg); color: var(--sev-low-fg); }
.sev.none { background: var(--sev-none-bg); color: var(--sev-none-fg); }

/* Formulare */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field > label, .field legend, .label { font-size: .8125rem; font-weight: 500; color: var(--text-primary); }
.hint { color: var(--text-secondary); font-size: .8125rem; }
.req::after { content: " *"; color: var(--bad-fg); }
.error-msg { display: flex; align-items: center; gap: 6px; color: var(--bad-fg); font-size: .8125rem; font-weight: 500; }
input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="password"], select, textarea {
  width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--input-background); color: var(--text-primary); font: inherit; font-size: .875rem; line-height: 1.4;
  transition: border-color .15s;
}
input[type="text"]:hover, input[type="email"]:hover, input[type="url"]:hover, input[type="search"]:hover, input[type="tel"]:hover, select:hover, textarea:hover { border-color: var(--text-tertiary); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
[aria-invalid="true"] { border-color: var(--bad-fg) !important; }
select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: var(--select-chevron); background-repeat: no-repeat; background-position: right 9px center; background-size: 16px; }
textarea { min-height: 100px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--text-tertiary); opacity: 1; }
input[type="file"] { font: inherit; font-size: .875rem; color: var(--text-secondary); }
fieldset { min-width: 0; margin: 0 0 14px; padding: 10px 14px 4px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
fieldset legend { padding: 0 6px; font-size: .8125rem; font-weight: 500; }
.check { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.check input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--primary); }
.check label { cursor: pointer; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.segmented label { position: relative; padding: 5px 12px; border-radius: calc(var(--radius) - 3px); color: var(--text-secondary); cursor: pointer; font-size: .8125rem; font-weight: 500; }
.segmented label:hover { background: var(--surface-muted); color: var(--text-primary); }
.segmented input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.segmented label:has(input:checked) { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.segmented label.is-disabled { cursor: not-allowed; }

/* Toasts (E122): kurze Benachrichtigungen, nie Browser-Dialoge; Icon + Text, nie nur Farbe */
.toast-region {
  position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  --toast-accent: var(--info-fg);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; width: 100%;
  padding: 12px 8px 12px 14px; border: 1px solid var(--border); border-left: 4px solid var(--toast-accent); border-radius: var(--radius-lg);
  background: var(--surface-elevated); color: var(--text-primary); box-shadow: var(--shadow-lg); pointer-events: auto;
  animation: bb-toast-in .18s ease-out;
}
.toast.ok { --toast-accent: var(--ok-fg); }
.toast.warn { --toast-accent: var(--warn-fg); }
.toast.bad { --toast-accent: var(--bad-fg); }
.toast > .i { margin-top: 1px; color: var(--toast-accent); }
.toast-title { margin: 0; font-size: .875rem; font-weight: 600; line-height: 1.35; }
.toast-text { margin: 2px 0 0; color: var(--text-secondary); font-size: .8125rem; line-height: 1.45; }
.toast .icon-btn { width: 28px; height: 28px; margin-top: -4px; }
.toast .icon-btn .i { --i-size: .875rem; }
.toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s; }
@keyframes bb-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 767.98px) { .toast-region { right: 12px; left: 12px; bottom: 12px; width: auto; align-items: stretch; } }

/* Hinweise, Erfolg */
.turn {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px;
  border: 1px solid var(--border); border-left: 4px solid var(--accent-line); border-radius: var(--radius-lg); background: var(--accent-subtle);
}
.turn > .i { color: var(--link); }
.success { border: 1px solid var(--ok-fg); background: var(--ok-bg); color: var(--ok-fg); border-radius: var(--radius-lg); padding: 12px 16px; font-weight: 500; }

.list-check { margin: 0; padding-left: 1.2em; }
.list-check li + li { margin-top: 6px; }
.breadcrumb { margin-bottom: 10px; color: var(--text-secondary); font-size: .8125rem; }
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--text-primary); }
details.faq { padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
details.faq + details.faq { margin-top: 10px; }
details.faq summary { cursor: pointer; font-weight: 500; }
details.faq p { margin: 10px 0 0; color: var(--text-secondary); }

/* Coming Soon */
.path-card { display: flex; flex-direction: column; gap: 10px; }
.path-card > .tag, .prog-card > .tag { align-self: flex-start; }
.path-card ul { margin: 0; padding-left: 1.2em; }
.path-card li + li { margin-top: 4px; }
.signup { position: relative; overflow: hidden; }
.signup::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--brand-cyan), var(--cyan-pressed)); }
.value h3 { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.value h3 .num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius); background: var(--accent-bg); color: var(--accent-fg); font-size: .8125rem; font-weight: 700; }

/* Sprachlinks der Seiten ohne JavaScript */
.lang-links { display: flex; gap: 6px; }
.lang-links a {
  padding: 4px 10px; border: 1px solid var(--sidebar-line-strong); border-radius: var(--radius); color: var(--sidebar-text);
  font-size: .75rem; font-weight: 600; text-decoration: none;
}
.lang-links a:hover { background: var(--sidebar-hover); color: var(--sidebar-text-hover); }
.lang-links a[aria-current="page"] { background: var(--sidebar-pressed-bg); border-color: var(--sidebar-pressed-bg); color: var(--sidebar-pressed-fg); }

/* Touch-Geräte: größere Bedienflächen (WCAG 2.5.8 verlangt mind. 24 px, hier 40–44 px) */
@media (pointer: coarse) {
  .btn, input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], select { min-height: 40px; }
  .icon-btn { width: 40px; height: 40px; }
  .seg-btn { height: 32px; }
}

/* ---------- Reduzierte Bewegung, erzwungene Farben ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .tag, .btn, .seg-btn[aria-pressed="true"] { border: 1px solid CanvasText; }
}

/* ==========================================================================
   Website bugbounty.de (L1): Ergänzungen zu den Komponenten der Vorschau
   ========================================================================== */
.no-js .js-only, .no-js .theme-toggle { display: none !important; }
main { padding: 0 0 56px; }
main:focus { outline: none; }
.landing { padding-top: 0; }

/* Markenleiste mit Navigation. Ab 1100 px eine Zeile: Marke, Navigation, Bedienelemente (Sprache, Darstellung,
   Vormerken). Darunter ersetzt der Menüschalter die Navigation an derselben Stelle; Marke, Menüschalter und
   Bedienelemente stehen in einer Zeile, soweit sie passen, sonst die Bedienelemente gemeinsam rechtsbündig in der
   zweiten Zeile – nebeneinander, nie übereinander. Das aufgeklappte Menü steht über die volle Breite darunter. */
.header-bar { flex-wrap: wrap; justify-content: flex-end; }
.header-bar > .brand-link { margin-right: auto; }
.site-nav a { line-height: 1.3; }
.site-header .brand-link:focus-visible { outline-offset: 4px; }
.on-brand :focus-visible { outline-color: var(--sidebar-focus); }   /* wie Vorschau: Weiß auf Cyan, Cyan auf Anthrazit */
.tb-controls { display: flex; flex: none; flex-wrap: nowrap; align-items: center; gap: 8px; }
.header-cta { white-space: nowrap; }
.nav-toggle { display: none; }
.nav-toggle .i-x, .nav-toggle[aria-expanded="true"] .i-menu { display: none; }
.nav-toggle[aria-expanded="true"] .i-x { display: inline-block; }
@media (max-width: 1099.98px) {
  .js .nav-toggle { display: inline-grid; }
  .js .site-nav { display: none; order: 1; flex-basis: 100%; }
  .js .site-nav.is-open { display: block; }
  .js .site-nav ul { flex-direction: column; padding: 4px 0 8px; }
  .js .site-nav a { display: block; padding: 10px 12px; }
}
@media (min-width: 1100px) { .tb-controls { margin-left: 8px; } }

/* Sprachumschalter: Segmentschalter „DE | EN“ der Vorschau (.seg, .seg-btn) mit Links; aktive Sprache wie ein
   gedrückter Segment-Button (aria-current="page") */
a.seg-btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1; text-decoration: none; }
a.seg-btn:hover { text-decoration: none; }
.seg-btn[aria-current="page"] { background: var(--primary); color: var(--on-primary); }
.seg-btn[aria-current="page"]:hover { background: var(--primary-hover); color: var(--on-primary); }
.on-brand .seg-btn[aria-current="page"] { background: var(--sidebar-pressed-bg); color: var(--sidebar-pressed-fg); }
.on-brand .seg-btn[aria-current="page"]:hover { background: var(--sidebar-pressed-hover); color: var(--sidebar-pressed-fg); }
@media (forced-colors: active) { .seg-btn[aria-current="page"] { border: 1px solid CanvasText; } }

/* Kopfbereich der Unterseiten (Vorschau: .hero) und Startseite (Vorschau: .hero-media) */
.page-hero .container { padding-top: 28px; padding-bottom: 36px; }
.page-hero h1 { margin: 0 0 .75rem; max-width: 30ch; }
.page-hero .lead { margin-bottom: 0; }
.hero-ctas { gap: 10px; }
/* Startseite: H1 und Lead behalten die Breite des Textblocks (36rem), die Schaltflächen stehen in einer eigenen Reihe
   über die Breite des Containers (ab 1100 px alle in einer Reihe). Sekundäre Schaltflächen über dem Motiv mit
   halbdeckendem dunklem Hintergrund und dem Rand der Vorschau: #F5F5F5 erreicht damit auch über reinem Weiß 6,4 : 1
   (Hover 8,8 : 1). */
.hero-media .hero-text > :last-child { margin-bottom: 0; }
.hero-media .hero-ctas { margin-top: 18px; }
.hero-media .btn-secondary { background: rgba(10, 26, 47, .72); }
.hero-media .btn-secondary:hover { background: rgba(22, 50, 80, .9); border-color: rgba(245, 245, 245, .9); }
@media (min-width: 1100px) { .hero-media .hero-ctas { flex-wrap: nowrap; } }
/* Zweite Zeile der H1 im Farbverlauf: bei erzwungenen Farben als normaler Text */
@media (forced-colors: active) { .grad-text { background: none; color: CanvasText; } }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "\203A"; content: "\203A" / ""; margin-right: 4px; color: var(--text-tertiary); }
.breadcrumb [aria-current="page"] { color: var(--text-primary); }

/* Inhalt */
.page-body { padding-top: 36px; }
.section { margin-top: 44px; }
.page-body > .section:first-child, .page-body > .signup:first-child { margin-top: 0; }
.prose { max-width: 780px; }
.prose > :last-child { margin-bottom: 0; }
.section h2, .signup h2 { font-size: 1.125rem; font-weight: 600; letter-spacing: -.005em; }
.prose h3 { margin-top: 1.6em; font-size: .9375rem; font-weight: 600; }
.prose h4 { margin-top: 1.4em; font-size: .875rem; font-weight: 600; }
.prose p, .prose li { line-height: 1.65; }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.3em; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--text-tertiary); }
.prose ol { counter-reset: step; list-style: none; padding-left: 0; }
.prose ol > li { position: relative; padding-left: 36px; counter-increment: step; }
.prose ol > li::before {
  content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: var(--radius-sm); background: var(--accent-bg); color: var(--accent-fg); font-size: .75rem; font-weight: 700; line-height: 1;
}
.prose code, .faq-a code, .consent code, .check code { padding: 1px 5px; border-radius: 4px; background: var(--surface-muted); }
.section-pre { margin-bottom: 16px; }
.section-after { margin-top: 20px; }
.cards { margin-top: 4px; }
/* grid-2 und grid-3 der Vorschau ergänzen in breiten Containern weitere Spalten (auto-fit); mit mehr Karten entstünden
   unvollständige Reihen (6 Karten als 4 + 2). Inhaltskarten ab 1000 px daher mit fester Spaltenzahl (6 Karten: 3 + 3). */
@media (min-width: 1000px) {
  .cards.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cards .card { display: flex; flex-direction: column; gap: 0; }
.cards .card h3 { font-size: .9375rem; font-weight: 600; margin: 0 0 8px; }
.cards .card p { color: var(--text-secondary); line-height: 1.6; }
.cards .card p:last-child, .cards .card ul:last-child { margin-bottom: 0; }
.cards .card ul { margin: 0 0 1em; padding-left: 1.2em; color: var(--text-secondary); }
.cards .card li + li { margin-top: 4px; }
.value h3 { margin-bottom: 8px; }

/* FAQ (Vorschau: details.faq): aufklappbare Fragen über die volle Inhaltsbreite (Startseite und FAQ-Seite); der
   Antworttext behält die Zeilenlänge der Prosa (.prose, 780 px) */
.faq-list { display: grid; gap: 10px; }
details.faq { padding: 0; }
details.faq + details.faq { margin-top: 0; }
details.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; list-style: none;
  border-radius: var(--radius-lg);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary:hover .faq-q { color: var(--link); }
details.faq .faq-q { margin: 0; font-size: .875rem; font-weight: 500; line-height: 1.4; }
.faq-icon { color: var(--text-secondary); transition: transform .15s; --i-size: 1.125rem; }
details.faq[open] .faq-icon { transform: rotate(180deg); }
details.faq .faq-a { padding: 0 16px 14px; }
details.faq .faq-a p { margin: 0 0 .75em; color: var(--text-secondary); line-height: 1.65; }
details.faq .faq-a > :last-child { margin-bottom: 0; }

/* Vormerkung (Vorschau: .card.signup) */
.signup { margin-top: 44px; padding: 24px; scroll-margin-top: 16px; }
.signup-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 920px) { .signup-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; } }
.signup-text p { color: var(--text-secondary); line-height: 1.65; }
.signup-text > :last-child { margin-bottom: 0; }
.signup-form .field-group { margin: 0 0 16px; padding: 0; border: 0; }
.signup-form legend { margin: 0 0 8px; padding: 0; font-size: .8125rem; font-weight: 500; color: var(--text-primary); }
.required-note { margin: 0 0 14px; }
.radio-list { display: grid; gap: 8px; }
.radio {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: start; padding: 10px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--input-background);
}
.radio:has(input:checked) { border-color: var(--primary); background: var(--accent-subtle); }
.radio input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--primary); }
.radio label { font-weight: 600; cursor: pointer; }
.radio .hint { grid-column: 2; margin: 0; }
.signup-form .field .hint { margin: 0; }
.signup-form .check { margin-bottom: 0; }
.signup-form .check label { font-size: .8125rem; line-height: 1.55; }
.consent-group .error-msg, .field-group .error-msg { margin-top: 8px; }
.signup-submit { margin-top: 4px; min-width: 10rem; }
.signup-submit[aria-busy="true"]::before {
  content: ""; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: bb-spin .7s linear infinite;
}
@keyframes bb-spin { to { transform: rotate(360deg); } }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Wortlaut und Hinweise passend zur gewählten Zielgruppe (ohne JavaScript über :has(); site.js setzt zusätzlich hidden) */
[data-audience-none] { display: none; }
[data-audience-none].is-visible { display: block; }
.signup-form:not(:has(input[name="audience"]:checked)) [data-audience-none] { display: block; }
.signup-form:not(:has(input[name="audience"]:checked)) [data-audience] { display: none; }
.signup-form:has(#vm-aud-researcher:checked) [data-audience]:not([data-audience~="researcher"]) { display: none; }
.signup-form:has(#vm-aud-company:checked) [data-audience]:not([data-audience~="company"]) { display: none; }
.signup-form:has(#vm-aud-public:checked) [data-audience]:not([data-audience~="public"]) { display: none; }

/* Fehlerzusammenfassung */
.error-summary {
  margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--bad-fg); border-left-width: 4px; border-radius: var(--radius-lg);
  background: var(--bad-bg); color: var(--bad-fg);
}
.error-summary:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.error-summary-title { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-weight: 600; }
.error-summary-title .i { margin-top: 1px; --i-size: 1rem; }
.error-summary ul { margin: 6px 0 0; padding-left: 24px; }
.error-summary ul:empty { display: none; }
.error-summary a { color: var(--bad-fg); font-weight: 500; }
.error-msg .i { --i-size: 1rem; }

/* Systemseiten (Vormerkung, Fehler) */
.system-page { max-width: 760px; padding-top: 40px; }
.system-card { padding: 28px; }
.system-card h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .75rem; }
.system-card h2 { margin-top: 1.5em; font-size: 1rem; }
.system-card p { line-height: 1.65; }
.system-icon { display: block; margin-bottom: 14px; color: var(--link); --i-size: 1.75rem; }
.system-form { margin: 18px 0 12px; }
.system-actions { margin: 22px 0 0; }
.link-row { line-height: 2; }

/* Fußzeile */
.site-footer { padding: 28px 0 32px; }
.footer-grid { display: grid; gap: 18px 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .footer-grid { grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; } }
.powered { margin: 0; }
.footer-meta { margin: 6px 0 0; line-height: 1.6; }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; margin: 0; padding: 0; }
/* Logo „Teilnehmer der Allianz für Cyber-Sicherheit“ (E128) wie im Footer von rootsektor.de: freigestellte Dateien
   in 140 × 54, ohne Rahmen, Radius oder Filter; im hellen und dunklen Design unverändert */
.acs-badge { display: block; width: fit-content; max-width: 100%; line-height: 0; }
.acs-badge picture { display: block; }
.acs-badge img { display: block; width: 140px; height: auto; max-width: 100%; }
.acs-badge:focus-visible { outline-offset: 3px; }
.link-btn {
  padding: 0; border: 0; background: none; color: var(--text-secondary); cursor: pointer; font: inherit;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.link-btn:hover { color: var(--text-primary); text-decoration-thickness: 2px; }

/* Einwilligungsbanner: nicht modal, am unteren Rand, gleichwertige Schaltflächen */
.consent {
  position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px; max-width: 720px; max-height: calc(100vh - 32px);
  margin: 0 auto; padding: 18px 20px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-elevated); color: var(--text-primary); box-shadow: var(--shadow-lg);
}
.consent:focus { outline: none; }
.consent:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.consent-title { margin: 0 0 6px; font-size: 1rem; font-weight: 600; }
.consent-title:focus { outline: none; }
.consent-text { margin: 0; color: var(--text-secondary); font-size: .8125rem; line-height: 1.6; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.consent-actions .btn-secondary { min-width: 10rem; }
.consent-cat { padding: 12px 0; border-top: 1px solid var(--border); }
.consent-cat-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.consent-cat h3 { margin: 0; font-size: .875rem; font-weight: 600; }
.consent-cat p { margin: 6px 0 8px; color: var(--text-secondary); font-size: .8125rem; line-height: 1.6; }
.switch-row { align-items: center; margin: 0; }
.switch-row label { font-weight: 500; }
@media (max-width: 599.98px) { .consent { left: 8px; right: 8px; bottom: 8px; padding: 16px; } .consent-actions .btn { flex: 1 1 100%; } }

/* Schalter (Checkbox mit role="switch") */
input[type="checkbox"][role="switch"] {
  position: relative; flex: none; width: 36px; height: 20px; margin: 0; border-radius: 999px; cursor: pointer;
  appearance: none; -webkit-appearance: none; background: var(--border-strong); transition: background-color .15s;
}
input[type="checkbox"][role="switch"]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--on-primary); transition: transform .15s;
}
input[type="checkbox"][role="switch"]:checked { background: var(--primary); }
input[type="checkbox"][role="switch"]:checked::after { transform: translateX(16px); }
input[type="checkbox"][role="switch"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (forced-colors: active) { input[type="checkbox"][role="switch"] { appearance: auto; -webkit-appearance: auto; } }

/* Druck */
@media print {
  .site-header .site-nav, .tb-controls, .nav-toggle, .consent, .toast-region, .hero-art, .signup-form { display: none !important; }
  .hero-media { background: none; }
  .hero-media .container { min-height: 0; }
}

/* Unter 1000 px: Motiv als Hintergrund hinter dem Text (Auftraggeber, 03.11.2026, E126). Oben bleibt die Grafik sichtbar,
   hinter dem Text wird sie so weit abgedunkelt, dass H1, Lead und Buttons den nötigen Kontrast haben (gemessen 320 bis 999 px). */
@media (max-width: 999px) {
  .hero-media .hero-art { position: absolute; top: 0; left: 0; right: 0; height: min(560px, 118vw); width: 100%; }
  .hero-media .hero-art img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 84% 50%;
    -webkit-mask-image: none; mask-image: none; }
  .hero-media::before { display: block; background: linear-gradient(180deg,
      color-mix(in srgb, var(--hero-media-bg) 5%, transparent) 0,
      color-mix(in srgb, var(--hero-media-bg) 30%, transparent) 30vw,
      color-mix(in srgb, var(--hero-media-bg) 90%, transparent) 50vw,
      color-mix(in srgb, var(--hero-media-bg) 94%, transparent) 100%); }
  .hero-media .container { min-height: 0; padding-top: 52vw; padding-bottom: 40px; }
}
@media (min-width: 600px) and (max-width: 999px) {
  .hero-media .hero-art { height: min(520px, 62vw); }
  .hero-media::before { background: linear-gradient(180deg,
      color-mix(in srgb, var(--hero-media-bg) 5%, transparent) 0,
      color-mix(in srgb, var(--hero-media-bg) 30%, transparent) 16vw,
      color-mix(in srgb, var(--hero-media-bg) 90%, transparent) 27vw,
      color-mix(in srgb, var(--hero-media-bg) 94%, transparent) 100%); }
  .hero-media .container { padding-top: 28vw; }
}

/* Kopfzeile unter 1100 px: Menüschalter rechts außen (DOM: Marke, Navigation, Bedienelemente, Schalter); das
   aufgeklappte Menü steht über die volle Breite darunter. Unter 600 px: eine Zeile mit Marke, Sprachumschalter,
   Darstellung und Menüschalter; „Vormerken“ steht dann als letzter Punkt im Menü (Auftraggeber, 03.11.2026). */
.site-nav .nav-signup { display: none; }
@media (max-width: 1099.98px) {
  .js .site-nav { order: 5; }
}
@media (max-width: 599.98px) {
  .site-header .header-bar { column-gap: 8px; }
  .site-header .logo { font-size: 1.125rem; }
  .tb-controls { gap: 6px; }
  .header-cta { display: none; }
  .site-nav .nav-signup { display: block; }
}
@media (max-width: 379.98px) {
  .site-header .logo { font-size: 1rem; }
  .tb-controls .seg-btn { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 339.98px) {
  .site-header .header-bar { column-gap: 6px; }
  .site-header .logo { font-size: .9375rem; }
  .tb-controls { gap: 4px; }
  .tb-controls .seg-btn { padding-left: 6px; padding-right: 6px; }
  .site-header .theme-toggle, .site-header .nav-toggle { width: 36px; height: 36px; }
}