/* =====================================================================
   hertel.tech – Stylesheet
   ---------------------------------------------------------------------
   1. Tokens (Farben, Schrift, Abstände)   → hier Farben anpassen
   2. Basis
   3. Layout & Navigation
   4. Komponenten (Buttons, Status, Karten, Fenster-Rahmen …)
   5. Seitenbereiche (Hero, Bento, Projekt, Tools, Formulare, Footer)
   Keine externen Abhängigkeiten. Schriften = Systemschriften.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Grundfläche – Sand/Beige */
  --bg: #F6F9F7;
  --bg-2: #E8F1EB;
  --card: #FFFFFF;
  --line: #DFE8E2;
  --line-2: #C7D8CE;

  /* Schrift */
  --ink: #16261E;
  --ink-soft: #3B4D44;
  --ink-faint: #667770;
  --head: #1F5A3E;   /* Überschriften: dunkles, ruhiges Marineblau */

  /* Kopf, Hero, Footer (Sand-Welt) */
  --nav-bg: rgb(255 255 255 / .92);
  --nav-ink: #2C4636;
  --nav-ink-hi: #1E4A35;
  --nav-line: rgb(30 70 45 / .12);
  --nav-hover: rgb(30 70 45 / .08);
  --hero-bg: linear-gradient(120deg, #EAF5EE 0%, #F8FBF9 50%, #E8F2F8 100%);
  --hero-ink: #1F5A3E;
  --hero-soft: #47584D;
  --hero-chip: rgb(255 255 255 / .6);
  --hero-line: rgb(30 70 45 / .30);
  --hero-circle: rgb(255 255 255 / .45);
  --hero-glow: color-mix(in srgb, #F0B33A 18%, transparent);
  --foot-bg: #1F3D2E;
  --foot-ink: #D3E6D6;
  --foot-hi: #F4FFF3;
  --foot-faint: #9DB8A3;
  --foot-line: rgb(255 255 255 / .12);

  /* Feste dunkle Fläche (Filter, Hover) */
  --deep: #1F5A3E;
  --deep-2: #2F7A55;
  --on-deep:   #ffffff;
  --on-deep-soft: #D3E6D6;

  /* Akzent */
  --accent: #2F7A55;   /* Links, Icons */
  --accent-soft: #D5EBDD;   /* Icon-Hintergründe */
  --gold:        #F0B33A;
  --gold-d:      #B97F0C;

  /* Status */
  --ok: #2F6F45;   --ok-bg: #D6EBD3;
  --wip: #8A5A00;  --wip-bg: #F8E6BE;
  --plan: #5E6F63; --plan-bg: #E1ECDD;

  --font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter Display", "Inter", system-ui, sans-serif;

  --t-sm: .875rem;
  --t-base: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.375rem;
  --t-2xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  --t-3xl: clamp(2.1rem, 1.5rem + 2.6vw, 3.2rem);
  --t-hero: clamp(2.3rem, 1.5rem + 3.2vw, 3.9rem);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --wrap: 74rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --shadow-sm: 0 1px 2px rgb(60 45 20 / .07);
  --shadow:    0 1px 2px rgb(60 45 20 / .05), 0 14px 34px -18px rgb(60 45 20 / .30);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / .08), 0 30px 60px -20px rgb(0 0 0 / .5);

  color-scheme: light;
}

/* Farbwelt "Beige" (Sand) */
:root[data-accent="sand"] {
  --bg:        #F4EEE1;
  --bg-2:      #EAE1CE;
  --card:      #FFFDF8;
  --line:      rgb(60 48 30 / .10);
  --line-2:    rgb(60 48 30 / .20);
  --ink:       #2A2418;
  --ink-soft:  #5A5140;
  --ink-faint: #857B68;
  --head:      #1B2E52;   /* Überschriften: dunkles, ruhiges Marineblau */
  --nav-bg:    #EDE4D0;
  --nav-ink:   #3B3426;
  --nav-ink-hi:#1B2E52;
  --nav-line:  rgb(60 48 30 / .12);
  --nav-hover: rgb(60 48 30 / .08);
  --hero-bg:   linear-gradient(135deg, #F3EAD6 0%, #E7D9B8 55%, #DAC79B 100%);
  --hero-ink:  #1B2E52;
  --hero-soft: #5A5140;
  --hero-chip: rgb(255 255 255 / .6);
  --hero-line: rgb(60 48 30 / .30);
  --hero-circle: rgb(255 255 255 / .45);
  --hero-glow: color-mix(in srgb, #F0B33A 22%, transparent);
  --foot-bg:   #2D271D;
  --foot-ink:  #D8CDB6;
  --foot-hi:   #FFF8E8;
  --foot-faint:#A99C82;
  --foot-line: rgb(255 255 255 / .12);
  --deep:      #1B2E52;
  --deep-2:    #24407A;
  --on-deep-soft: #CFDDF6;
  --accent:      #0A3A82;   /* Links, Icons */
  --accent-soft: #EFE4C8;   /* Icon-Hintergründe */
  --ok: #2F6F45;   --ok-bg: #DDEBD8;
  --wip: #8A5A00;  --wip-bg: #F8E6BE;
  --plan: #6F6656; --plan-bg: #E8DFCB;
}

/* Farbwelt "Blau": der kühle BeSt-Look (Marine-Verlauf) */
:root[data-accent="blue"] {
  --bg: #EEF2F8; --bg-2: #E3EBF6; --card: #fff; --line: rgb(14 31 61 / .09); --line-2: rgb(14 31 61 / .18);
  --ink: #0E1F3D; --ink-soft: #34445F; --ink-faint: #66748C; --head: #0A3A82; --accent-soft: #E3ECFB;
  --nav-bg: linear-gradient(135deg, #08295F 0%, #0A3A82 45%, #0E5BC0 100%); --nav-ink: #DCE7FA; --nav-ink-hi: #fff;
  --nav-line: rgb(255 255 255 / .12); --nav-hover: rgb(255 255 255 / .14);
  --hero-bg: linear-gradient(135deg, #08295F 0%, #0A3A82 45%, #0E5BC0 100%); --hero-ink: #fff; --hero-soft: #CFDDF6;
  --hero-chip: rgb(255 255 255 / .1); --hero-line: rgb(255 255 255 / .55); --hero-circle: rgb(255 255 255 / .06);
  --hero-glow: color-mix(in srgb, #F0B33A 9%, transparent);
  --foot-bg: #08295F; --foot-ink: #CFDDF6; --foot-hi: #fff; --foot-faint: #8FA6CF; --foot-line: rgb(255 255 255 / .12);
  --plan: #5E6C84; --plan-bg: #E4E8F0; --ok: #17724F; --ok-bg: #DCF1E6;
}

/* Dunkel (warm) */
:root[data-theme="dark"] {
  --bg: #17140F;   --bg-2: #1F1B15;  --card: #241F18;
  --line: rgb(255 240 210 / .09); --line-2: rgb(255 240 210 / .17);
  --ink: #F1E9DA;  --ink-soft: #C2B7A3; --ink-faint: #8F8574; --head: #F4ECDC;
  --nav-bg: #1D1A14; --nav-ink: #D8CDB6; --nav-ink-hi: #FFF8E8; --nav-line: rgb(255 240 210 / .10); --nav-hover: rgb(255 240 210 / .10);
  --hero-bg: linear-gradient(135deg, #2F2A20 0%, #3A3326 100%); --hero-ink: #F6EEDC; --hero-soft: #CBBFA6;
  --hero-chip: rgb(255 255 255 / .09); --hero-line: rgb(255 240 210 / .35); --hero-circle: rgb(255 240 210 / .05);
  --hero-glow: color-mix(in srgb, #F0B33A 12%, transparent);
  --foot-bg: #110F0B; --foot-ink: #CBBFA6; --foot-hi: #FFF8E8; --foot-faint: #968A72; --foot-line: rgb(255 240 210 / .10);
  --deep: #2F2A20; --deep-2: #3B3427;
  --accent: #E3C98E; --accent-soft: #3A3226; --gold: #F0B33A;
  --ok: #8BC79B;  --ok-bg: #1F2D20;
  --wip: #E9C27B; --wip-bg: #3A2F1B;
  --plan: #B5AB98; --plan-bg: #302B23;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 16px 40px -18px rgb(0 0 0 / .7);
  color-scheme: dark;
}
:root[data-theme="dark"][data-accent="blue"] {
  --bg: #0A1426; --bg-2: #0E1B33; --card: #12213D; --line: rgb(255 255 255 / .09); --line-2: rgb(255 255 255 / .17);
  --ink: #EAF0FB; --ink-soft: #B7C5DE; --ink-faint: #8091AF; --head: #fff;
  --nav-bg: linear-gradient(135deg, #08295F 0%, #0A3A82 45%, #0E5BC0 100%);
  --hero-bg: linear-gradient(135deg, #08295F 0%, #0A3A82 45%, #0E5BC0 100%);
  --foot-bg: #08295F; --deep: #0B2557; --deep-2: #0F3A80; --accent: #8DB6F2; --accent-soft: #1A2A47;
  --ok: #7FD1A8; --ok-bg: #123124; --plan: #A9B6CE; --plan-bg: #1E2B45;
}

/* ---------- 2. Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font: 400 var(--t-base)/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: .22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; margin: 0 0 .5em; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; color: var(--head); }
.on-deep h1, .on-deep h2, .on-deep h3, .on-deep h4 { color: var(--hero-ink); }
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); letter-spacing: -0.01em; }
h4 { font-size: var(--t-lg); letter-spacing: -0.005em; }
p  { margin: 0 0 1em; text-wrap: pretty; }
.lede { font-size: var(--t-lg); color: var(--ink-soft); max-width: 36em; }
.muted { color: var(--ink-soft); }
.small { font-size: var(--t-sm); }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.stack > * + * { margin-top: 1rem; }

/* Icons (SVG aus js/icons.js) */
.ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; stroke-width: 1.8; }

.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: var(--card); padding: .6rem 1rem; border-radius: var(--r-sm); }
.skip-link:focus { top: 1rem; }

/* ---------- 3. Navigation ---------- */


.site-nav { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); border-bottom: 1px solid var(--nav-line); }
.nav-bar { display: flex; align-items: center; gap: 1.5rem; height: 4rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--nav-ink-hi); text-decoration: none; font: 700 1.1rem/1 var(--font-display); letter-spacing: -0.015em; }
.brand-mark { width: 2.1rem; height: 2.1rem; border-radius: 10px; display: grid; place-items: center; background: var(--hero-chip); color: var(--gold-d); }
:root[data-accent="blue"] .brand-mark, :root[data-theme="dark"] .brand-mark { color: var(--gold); }
.brand-mark .ico { width: 1.15rem; height: 1.15rem; }
.nav-main { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.nav-links { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav-links > li { position: relative; }
.nav-links a, .nav-drop-btn {
  position: relative; display: inline-flex; align-items: center; gap: .4rem; height: 4rem; padding: 0 .9rem;
  color: var(--nav-ink); text-decoration: none; font: 500 1rem/1 var(--font); background: none; border: 0; cursor: pointer;
}
.nav-links a:hover, .nav-drop-btn:hover, .nav-drop-btn[aria-expanded="true"] { color: var(--nav-ink-hi); }
.nav-links a[aria-current="page"] { color: var(--nav-ink-hi); }
.nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: -1px; height: 3px; background: var(--gold); border-radius: 3px 3px 0 0; }
.nav-drop-btn .ico { width: 1em; height: 1em; transition: rotate .15s; }
.nav-drop-btn[aria-expanded="true"] .ico { rotate: 180deg; }
.nav-drop { position: absolute; right: 0; top: calc(100% - .5rem); min-width: 20rem; padding: .5rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); }
.nav-drop[hidden] { display: none; }
.nav-drop a { height: auto; padding: .7rem .75rem; border-radius: 10px; gap: .8rem; color: var(--ink); }
.nav-links .nav-drop a:hover { color: var(--ink); }
.nav-drop a:hover { background: var(--bg-2); }
.nav-drop small { display: block; color: var(--ink-faint); font-size: .8rem; font-weight: 400; margin-top: .15rem; }
.nav-drop .empty-note { padding: .75rem; color: var(--ink-faint); font-size: var(--t-sm); }
.icon-btn { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; display: inline-grid; place-items: center; background: transparent; color: var(--nav-ink); cursor: pointer; }
.icon-btn:hover { background: var(--nav-hover); color: var(--nav-ink-hi); }
.menu-btn { display: none; }
@media (max-width: 800px) {
  .nav-bar { gap: .5rem; }
  .brand { margin-right: auto; }
  .nav-main { margin-left: 0; }
  .menu-btn { display: inline-grid; }
  .nav-links {
    position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem var(--gutter) 1rem; background: var(--nav-bg); border-bottom: 1px solid var(--nav-line); display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links > li { border-bottom: 1px solid var(--nav-line); }
  .nav-links > li:last-child { border-bottom: 0; }
  .nav-links a, .nav-drop-btn { height: auto; width: 100%; padding: .95rem 0; justify-content: space-between; }
  .nav-links a[aria-current="page"]::after { display: none; }
  .nav-drop { position: static; min-width: 0; box-shadow: none; border: 0; background: transparent; padding: 0 0 .75rem; }
  .nav-drop a { padding: .6rem .5rem; justify-content: flex-start; color: var(--nav-ink); }
  .nav-drop a:hover, .nav-links .nav-drop a:hover { background: var(--nav-hover); color: var(--nav-ink-hi); }
  .nav-drop small { color: var(--ink-faint); }
}

/* ---------- 4. Komponenten ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.9rem; padding: .7rem 1.35rem; border-radius: 10px;
  font: 600 .975rem/1.2 var(--font); text-decoration: none; cursor: pointer;
  border: 2px solid transparent; transition: background-color .15s, border-color .15s, transform .15s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.98); }
.btn-dark  { background: var(--deep); color: var(--on-deep); }
.btn-dark:hover { background: var(--deep-2); }
:root[data-theme="dark"] .btn-dark { background: var(--gold); color: #201400; }
:root[data-theme="dark"] .btn-dark:hover { background: color-mix(in srgb, var(--gold) 85%, #fff); }
:root[data-theme="dark"] .filters button[aria-pressed="true"] { background: var(--gold); color: #201400; border-color: var(--gold); }
.btn-light { background: var(--gold); color: #201400; }
.btn-light:hover { background: #F6C458; }
.btn-line  { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-line:hover { background: var(--bg-2); }
.on-deep .btn-line { color: var(--hero-ink); border-color: var(--hero-line); }
.on-deep .btn-line:hover { background: var(--hero-chip); }
.btn-sm { min-height: 2.3rem; padding: .45rem .95rem; font-size: var(--t-sm); }
.btn-dark.btn-sm, .tile-actions .btn-dark { background: var(--gold); color: #201400; }
.btn-dark.btn-sm:hover, .tile-actions .btn-dark:hover { background: #F6C458; }
.btn[aria-disabled="true"] { background: var(--bg-2); color: var(--ink-faint); border-color: var(--line); pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: .65rem; }

.status { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.status::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.status-available { color: var(--ok); background: var(--ok-bg); }
.status-ready     { color: var(--ok); background: var(--ok-bg); }
.status-ready::before { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.status-wip       { color: var(--wip); background: var(--wip-bg); }
.status-planned   { color: var(--plan); background: var(--plan-bg); }
.status-planned::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.on-deep .status { background: var(--hero-chip); }
:root[data-theme="dark"] .on-deep .status-available, :root[data-accent="blue"] .on-deep .status-available, :root[data-theme="dark"] .on-deep .status-ready, :root[data-accent="blue"] .on-deep .status-ready { color: #a8dcae; }
:root[data-theme="dark"] .on-deep .status-wip, :root[data-accent="blue"] .on-deep .status-wip { color: #f0cd8c; }

.tags { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: 0; }
.tags li { font-size: .78rem; font-weight: 500; color: var(--ink-soft); background: var(--bg-2); border-radius: 999px; padding: .15rem .6rem; }
.on-deep .tags li { color: var(--hero-soft); background: var(--hero-chip); }

.icon-chip { width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }

/* Fenster-Rahmen für Screenshots (Windows-Stil) */
.window { background: var(--card); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgb(60 48 30 / .14); }
.window-bar { display: flex; align-items: center; height: 1.9rem; padding-left: .8rem; background: #F1EBDD; color: #6B6253; font-size: .72rem; font-weight: 500; border-bottom: 1px solid rgb(60 48 30 / .1); }
.window-bar span:first-child { margin-right: auto; }
.window-ctrl { width: 2.4rem; height: 100%; display: grid; place-items: center; }
.window-ctrl::before { content: ""; width: .6rem; height: .6rem; }
.window-ctrl.min::before { height: 0; border-top: 1px solid currentColor; }
.window-ctrl.max::before { border: 1px solid currentColor; }
.window-ctrl.close::before { content: "×"; width: auto; height: auto; font-size: .95rem; line-height: 1; }
.window img { width: 100%; }

/* ---------- 5a. Hero (dunkle Fläche) ---------- */
.hero { padding-top: 1.5rem; }
.hero-panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  padding: clamp(2rem, 6vw, 4.5rem);
  background: var(--hero-bg); color: var(--hero-ink);
  border-radius: var(--r-xl);
}
.hero-panel::before, .hero-panel::after {   /* große Kreise wie auf der BeSt-Seite */
  content: ""; position: absolute; z-index: -1; border-radius: 50%; background: var(--hero-circle);
}
.hero-panel::before { width: 620px; height: 620px; right: -180px; top: -280px; }
.hero-panel::after  { width: 420px; height: 420px; left: -150px; bottom: -220px; background: var(--hero-glow); }
.hero-panel h1 { font-size: var(--t-hero); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; margin-bottom: .35em; }
.hero-panel .lede { color: var(--hero-soft); margin-bottom: 2rem; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.5rem;
  padding: .35rem .9rem .35rem .4rem; border-radius: 999px;
  background: var(--hero-chip); border: 1px solid var(--line-2);
  color: var(--hero-ink); text-decoration: none; font-size: var(--t-sm); font-weight: 500;
}
.hero-badge:hover { background: var(--card); }
.hero-badge .status { padding: .12rem .55rem; }

.collage { position: relative; aspect-ratio: 5 / 4; }
.collage .window { position: absolute; }
.collage .w1 { width: 74%; right: 0; top: 4%; transform: rotate(2deg); }
.collage .w2 { width: 56%; left: 0; bottom: 2%; transform: rotate(-3deg); }
@media (prefers-reduced-motion: no-preference) {
  .collage .w1 { animation: float-in .9s .1s cubic-bezier(.2,.7,.2,1) both; }
  .collage .w2 { animation: float-in .9s .25s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes float-in { from { opacity: 0; translate: 0 24px; } }
}
@media (max-width: 860px) {
  .hero-panel { grid-template-columns: 1fr; }
  .collage { aspect-ratio: 4 / 3; max-width: 34rem; }
}

/* Seitenkopf (helle Seiten) */
.page-head { padding-top: clamp(2.5rem, 7vw, 4.5rem); padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.page-head h1 { margin-bottom: .3em; }
.page-head .lede { margin: 0; }
.crumb { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: 1.25rem; color: var(--ink-soft); text-decoration: none; font-size: var(--t-sm); font-weight: 500; }
.crumb:hover { color: var(--ink); }
.on-deep .crumb { color: var(--hero-soft); }
.on-deep .crumb:hover { color: var(--hero-ink); }

.section { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.section-head h2 { margin: 0; }
.section-head h2::after { content: ""; display: block; width: 2.5rem; height: 4px; margin-top: .6rem; border-radius: 4px; background: var(--gold); }
.section-head p { margin: .35rem 0 0; color: var(--ink-soft); }
.link-more { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.link-more:hover { text-decoration: underline; }

/* Kennzahlen-Leiste unter dem Hero (wie BeSt) */
.facts-strip { margin-top: clamp(1.5rem, 4vw, 2.5rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.facts-strip > div { display: flex; flex-direction: column; padding: 1.15rem 1.4rem; border-left: 1px solid var(--line); }
.facts-strip > div:first-child { border-left: 0; }
.facts-strip b { font: 700 1.05rem/1.3 var(--font-display); color: var(--head); }
.facts-strip span { color: var(--ink-faint); font-size: var(--t-sm); }
@media (max-width: 760px) { .facts-strip { grid-template-columns: 1fr 1fr; } .facts-strip > div:nth-child(3) { border-left: 0; } .facts-strip > div:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* ---------- 5b. Bento (Startseite) ---------- */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; grid-auto-flow: dense; }
.tile {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.1rem; box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s;
}
.tile:has(a.tile-link):hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.tile-link { color: inherit; text-decoration: none; }
/* ganze Kachel klickbar */
.tile-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tile-media { border-radius: var(--r-md); overflow: hidden; background: var(--bg-2); margin-bottom: 1.1rem; }
.tile-media img { width: 100%; aspect-ratio: 22 / 9; object-fit: cover; object-position: top center; }
.tile-body { display: flex; flex-direction: column; gap: .5rem; padding: 0 .3rem .3rem; flex: 1; }
.tile-body h3 { margin: .2rem 0 0; }
.tile-body p { margin: 0; color: var(--ink-soft); }
.tile-body .tags { margin-top: auto; padding-top: .5rem; }
.tile-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

.tile-large { grid-column: span 2; grid-row: span 2; }
.tile-large .tile-media { background: linear-gradient(160deg, var(--bg-2), var(--accent-soft)); padding: clamp(1rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2.5rem) 0; }
.tile-large .tile-media .window { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: var(--shadow); }
.tile-large .tile-media img { aspect-ratio: auto; }
.tile-large h3 { font-size: var(--t-2xl); }
.tile-large .tile-actions { position: relative; z-index: 1; margin-top: .75rem; }

.tile-wide { grid-column: 1 / -1; flex-direction: row; gap: 1.25rem; align-items: center; }
.tile-wide.span-2 { grid-column: span 2; }
.tile-wide .tile-media { width: min(45%, 22rem); flex: none; margin-bottom: 0; }
.tools-strip { padding: 1.1rem; border-radius: var(--r-lg); background: var(--bg-2); }
.mini-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; }
.mini-list a, .mini-list span.mini {
  display: flex; align-items: center; gap: .75rem; height: 100%;
  padding: .75rem; border-radius: var(--r-md); background: var(--card);
  color: var(--ink); text-decoration: none; font-weight: 600; border: 1px solid var(--line);
}
.mini-list a:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.mini-list span.mini { color: var(--ink-faint); background: transparent; border-style: dashed; }
.mini-list small { display: block; font-weight: 400; color: var(--ink-faint); font-size: .78rem; }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-large { grid-row: auto; }
  .tile-wide, .tile-wide.span-2 { grid-column: auto; flex-direction: column; align-items: stretch; }
  .tile-wide .tile-media { width: auto; margin-bottom: 1.1rem; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .tile-large { grid-column: auto; }
}

/* ---------- 5c. Projektliste ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.filters button {
  font: 500 var(--t-sm)/1 var(--font); padding: .55rem 1rem; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ink-soft); border: 1px solid var(--line-2);
}
.filters button:hover { color: var(--ink); background: var(--bg-2); }
.filters button[aria-pressed="true"] { background: var(--deep-2); color: #fff; border-color: var(--deep-2); }
.filters .count { opacity: .6; margin-left: .25rem; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1rem; }
.card-grid .tile[hidden] { display: none; }
.empty { padding: 3rem 1rem; text-align: center; color: var(--ink-soft); border: 1px dashed var(--line-2); border-radius: var(--r-lg); }

/* ---------- 5d. Projekt-Detail ---------- */
.project-hero { padding-top: 1.25rem; }
.project-hero .hero-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.project-hero h1 { font-size: var(--t-3xl); }
.project-hero .status { margin-bottom: 1rem; }
.project-hero .shot .window { transform: rotate(1.5deg); }
.project-hero .cover { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-lg); }
.project-hero .cover img { width: 100%; aspect-ratio: 22 / 9; object-fit: cover; }

.detail { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 900px) { .detail { grid-template-columns: 1fr; } }
.detail .prose { max-width: 40rem; font-size: var(--t-lg); color: var(--ink-soft); }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .9rem; margin-top: 1.5rem; }
.feature { display: flex; gap: .9rem; padding: 1.1rem; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); }
.feature h4 { margin: .1rem 0 .2rem; font-size: 1rem; }
.feature p { margin: 0; color: var(--ink-soft); font-size: var(--t-sm); }
.facts { position: sticky; top: 6rem; padding: 1.4rem; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.facts dl { display: grid; grid-template-columns: auto 1fr; gap: .6rem 1rem; margin: 0 0 1.25rem; }
.facts dt { color: var(--ink-faint); font-size: var(--t-sm); }
.facts dd { margin: 0; font-weight: 500; }
.facts .btn { width: 100%; }
.facts .note { margin: .75rem 0 0; font-size: var(--t-sm); color: var(--ink-soft); }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.gallery figure { margin: 0; }
.gallery button { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--bg-2); cursor: zoom-in; transition: box-shadow .2s, transform .2s; }
.gallery button:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; }
.gallery figcaption { padding: .5rem .2rem 0; font-size: var(--t-sm); color: var(--ink-soft); }

.lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 1200px); max-height: 92vh; overflow: visible; }
.lightbox::backdrop { background: rgb(20 16 12 / .85); backdrop-filter: blur(4px); }
.lightbox img { max-height: 80vh; width: auto; margin-inline: auto; border-radius: var(--r-md); background: #fff; }
.lightbox p { color: #f4ecdc; text-align: center; margin: .9rem 0 0; }
.lb-btn { position: fixed; width: 3rem; height: 3rem; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgb(255 255 255 / .12); color: #fff; cursor: pointer; }
.lb-btn:hover { background: rgb(255 255 255 / .22); }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; top: 50%; translate: 0 -50%; }
.lb-next { right: 1rem; top: 50%; translate: 0 -50%; }

/* ---------- 5e. Tools & Formulare ---------- */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.tool-card { gap: .75rem; padding: 1.4rem; }
.tool-card h3 { font-size: var(--t-lg); margin: .4rem 0 0; }
.tool-card p { margin: 0; color: var(--ink-soft); }
.tool-card.is-soon { background: transparent; border-style: dashed; box-shadow: none; }
.tool-card .status { align-self: flex-start; margin-top: auto; }

.panel { max-width: 36rem; padding: clamp(1.25rem, 4vw, 2rem); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.field { margin-bottom: 1.25rem; border: 0; padding: 0; margin-inline: 0; }
.field > label, .field > legend { display: block; font-weight: 600; margin-bottom: .45rem; padding: 0; }
.field .hint { margin: .4rem 0 0; font-size: var(--t-sm); color: var(--ink-faint); }
.input { width: 100%; min-height: 2.9rem; padding: .65rem .95rem; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: 12px; }
.input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.segmented { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; background: var(--bg-2); border-radius: 999px; }
.segmented label { position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .95rem; border-radius: 999px; cursor: pointer; font-weight: 500; font-size: var(--t-sm); color: var(--ink-soft); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--accent); }
.form-error { color: #b3261e; font-size: var(--t-sm); margin: -.4rem 0 1rem; }
:root[data-theme="dark"] .form-error { color: #f2b8b5; }
.result { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.copy-row { display: flex; gap: .5rem; }
.qr-out { display: grid; place-items: center; padding: 1.25rem; margin-bottom: 1rem; background: #fff; border-radius: var(--r-md); border: 1px solid var(--line); }
.qr-out img, .qr-out canvas { max-width: 100%; height: auto; }

/* ---------- 5f. Info & Impressum ---------- */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.info-grid .feature { flex-direction: column; padding: 1.4rem; }
.info-grid .feature h4 { font-size: var(--t-lg); margin-top: .4rem; }
.license-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.license-list li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.license-list span { color: var(--ink-soft); }
.legal { max-width: 40rem; }
.legal h2 { font-size: var(--t-xl); margin: 2.25rem 0 .5rem; }
.legal address { font-style: normal; }
.callout { margin-top: 2.5rem; padding: 1.2rem 1.4rem; border-radius: var(--r-md); background: var(--bg-2); color: var(--ink-soft); }
.callout strong { color: var(--ink); }

/* ---------- 5g. Footer ---------- */
.site-footer { margin-top: clamp(4rem, 10vw, 7rem); background: var(--foot-bg); color: var(--foot-ink); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 2rem; padding: 3rem 0 2rem; }
.footer-grid h4 { font-size: var(--t-sm); color: var(--foot-faint); font-weight: 600; letter-spacing: 0; margin-bottom: .8rem; font-family: var(--font); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer-grid a { color: var(--foot-ink); text-decoration: none; }
.footer-grid a:hover { color: var(--foot-hi); text-decoration: underline; }
.footer-grid .brand { color: var(--foot-hi); }
.site-footer .brand-mark { color: var(--gold); }
.footer-grid p { color: var(--foot-ink); max-width: 22rem; margin-top: .9rem; font-size: var(--t-sm); }
.footer-base { padding: 1.25rem 0 2rem; border-top: 1px solid var(--foot-line); color: var(--foot-faint); font-size: var(--t-sm); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 860px) {
  .project-hero .hero-panel { grid-template-columns: 1fr; }
}


/* =====================================================================
   6. Anlehnung an die BAC-Portfolio-Vorlage: flaches Banner, schwebende
   Navigation, Bereichsköpfe als Glas-Kacheln, Karten mit weichem Schatten.
   Schrift bleibt die Systemschrift. Alles lokal.
   ===================================================================== */
:root { --r-md: 14px; --r-lg: 14px; --shadow: 0 1px 2px rgb(22 38 30 / .04), 0 8px 28px rgb(22 38 30 / .06); }

/* Navigation: wie die Pillen-Leiste der Vorlage */
.site-nav { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@media (min-width: 801px) {
  .nav-bar { height: 3.5rem; }
  .nav-links a, .nav-drop-btn { height: 2.3rem; padding: 0 .95rem; border-radius: 999px; font-size: .95rem; font-weight: 500; }
  .nav-links a:hover, .nav-drop-btn:hover, .nav-drop-btn[aria-expanded="true"] { background: var(--accent-soft); color: var(--nav-ink-hi); }
  .nav-links a[aria-current="page"] { background: var(--deep-2); color: #fff; }
  .nav-links a[aria-current="page"]::after { display: none; }
  .nav-drop { top: calc(100% + .35rem); }
}
:root[data-accent="sand"] .nav-links a[aria-current="page"] { background: var(--deep); }
:root[data-theme="dark"] .nav-links a[aria-current="page"] { background: var(--accent-soft); color: var(--nav-ink-hi); }

/* Banner (Startseite): flach, mit Glas-Titelkasten und Canvas-Wellen */
.banner { position: relative; overflow: hidden; background: var(--hero-bg); border-bottom: 1px solid var(--line); }
.banner canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.banner-in { position: relative; padding-block: clamp(2rem, 5vw, 3.5rem); }
.banner-box { max-width: 44rem; padding: 1.3rem 1.6rem 1.5rem; border-radius: 8px; background: rgb(255 255 255 / .42);
  border: 1px solid rgb(255 255 255 / .65); box-shadow: 0 2px 12px rgb(20 40 30 / .05); backdrop-filter: blur(9px) saturate(1.15); -webkit-backdrop-filter: blur(9px) saturate(1.15); }
:root[data-theme="dark"] .banner-box { background: rgb(0 0 0 / .28); border-color: rgb(255 240 210 / .12); }
.banner h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; margin: .5rem 0 .4em; color: var(--head); }
.banner .lede { color: var(--ink-soft); margin-bottom: 1.4rem; }
.banner + .wrap { margin-top: -1.4rem; position: relative; }

/* Unterseiten-Kopf: ebenfalls flaches Band über die volle Breite */
.page-head { --band: #EAF5EE; background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }
:root[data-accent="sand"] .page-head { --band: #F0E7D2; }
:root[data-theme="dark"] .page-head { --band: var(--bg-2); }
.page-head { padding-top: clamp(2rem, 5vw, 3rem); padding-bottom: clamp(1.5rem, 3.5vw, 2.25rem); }

/* Bereichsköpfe als Glas-Kachel mit Akzentbalken */
.section-head { padding: .9rem 1.3rem .9rem 1.1rem; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-left: 4px solid var(--accent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 70%, transparent), color-mix(in srgb, var(--accent-soft) 20%, transparent));
  box-shadow: 0 2px 12px rgb(20 40 30 / .04); align-items: center; }
.section-head h2::after { background: var(--accent); }

/* Karten wie in der Vorlage */
.tile, .panel, .facts { border-color: var(--line); box-shadow: var(--shadow); }

/* Kennzahlen-Leiste als einzelne Karten mit Balken links (wie die KPIs) */
.facts-strip { gap: 14px; background: none; border: 0; box-shadow: none; overflow: visible; }
.facts-strip > div { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-md); box-shadow: var(--shadow); }
.facts-strip > div:first-child { border-left: 4px solid var(--accent); }
@media (max-width: 760px) { .facts-strip > div:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* Primäre Buttons in Grün (Gelb bleibt in Beige und Dunkel erhalten) */
:root[data-accent="green"]:not([data-theme="dark"]) .btn-light,
:root[data-accent="green"]:not([data-theme="dark"]) .btn-dark,
:root[data-accent="green"]:not([data-theme="dark"]) .btn-dark.btn-sm,
:root[data-accent="green"]:not([data-theme="dark"]) .tile-actions .btn-dark { background: var(--deep-2); color: #fff; }
:root[data-accent="green"]:not([data-theme="dark"]) .btn-light:hover,
:root[data-accent="green"]:not([data-theme="dark"]) .btn-dark:hover,
:root[data-accent="green"]:not([data-theme="dark"]) .tile-actions .btn-dark:hover { background: var(--deep); }

/* Banner: feines Raster als Untergrund für die Technik-Animation */
.banner { background:
  linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 32px 32px,
  linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 32px 32px,
  var(--hero-bg); }
.banner-box { background: rgb(255 255 255 / .62); }


/* =====================================================================
   7. Hintergrund auf allen Seiten, Farbwahl, Logo, Font-Awesome-Symbole
   ===================================================================== */
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 32px 32px; opacity: .7; }
#bn { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .75; display: block; }
.banner { background: none; border-bottom: 0; }
.banner-box { background: rgb(255 255 255 / .72); }
:root[data-theme="dark"] .banner-box { background: rgb(20 17 12 / .62); }
.page-head { --band: rgb(234 245 238 / .82); }
:root[data-accent="sand"] .page-head { --band: rgb(240 231 210 / .82); }
:root[data-theme="dark"] .page-head { --band: rgb(31 27 21 / .82); }

/* Symbole (Font Awesome, gefüllt) */
.ico { width: 1.1em; height: 1.1em; stroke: none; fill: currentColor; vertical-align: -0.2em; }
.icon-chip .ico { width: 1.15rem; height: 1.15rem; }

/* Logo folgt der Farbwelt */
.site-nav .brand-mark { background: var(--accent); color: var(--bg); }
.site-footer .brand-mark { background: rgb(255 255 255 / .12); color: var(--foot-hi); }

/* Farbwahl oben rechts: Knopf mit Menü */
.palette { position: relative; }
.palette-btn { display: inline-flex; align-items: center; gap: .35rem; height: 2.5rem; padding: 0 .65rem 0 .5rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--nav-line); background: color-mix(in srgb, var(--card) 70%, transparent); color: var(--nav-ink); }
.palette-btn:hover { background: var(--card); }
.palette-btn .ico { width: .8em; height: .8em; opacity: .7; }
.swatch { width: 1.45rem; height: 1.45rem; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgb(0 0 0 / .15), inset 0 0 0 2px rgb(255 255 255 / .55);
  background: linear-gradient(135deg, #EAF5EE 50%, #2F7A55 50%); }
.swatch[data-pal="green"], .palette-btn[data-pal="green"] .swatch { background: linear-gradient(135deg, #EAF5EE 50%, #2F7A55 50%); }
.swatch[data-pal="sand"],  .palette-btn[data-pal="sand"] .swatch  { background: linear-gradient(135deg, #F0E5C8 50%, #0A3A82 50%); }
.swatch[data-pal="dark"],  .palette-btn[data-pal="dark"] .swatch  { background: linear-gradient(135deg, #2F2A20 50%, #E3C98E 50%); }
.palette-menu { position: absolute; right: 0; top: calc(100% + .45rem); z-index: 120; min-width: 15.5rem; padding: .4rem; display: grid; gap: .15rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); }
.palette-menu[hidden] { display: none; }
.palette-menu button { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .55rem .7rem; border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.palette-menu button:hover { background: var(--bg-2); }
.palette-menu .swatch { width: 1.9rem; height: 1.9rem; }
.pal-text { display: flex; flex-direction: column; font-weight: 600; line-height: 1.25; flex: 1; }
.pal-text small { font-weight: 400; color: var(--ink-faint); font-size: .8rem; }
.pal-check { opacity: 0; color: var(--accent); }
.palette-menu [aria-checked="true"] { background: var(--accent-soft); }
.palette-menu [aria-checked="true"] .pal-check { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #bn { display: none; } }


/* =====================================================================
   8. Texte stehen auf leichtem Milchglas (gut lesbar über der Animation)
   ===================================================================== */
:root { --milk: rgb(255 255 255 / .5); --milk-line: rgb(255 255 255 / .7); }
:root[data-accent="sand"] { --milk: rgb(250 246 236 / .52); }
:root[data-theme="dark"] { --milk: rgb(24 21 16 / .5); --milk-line: rgb(255 255 255 / .08); }
.section, .legal, .detail, .project-hero, .panel, .dl-list > .dl-sub, .empty-note {
  background: var(--milk); border: 1px solid var(--milk-line); border-radius: var(--r-md, 14px);
  box-shadow: 0 2px 14px rgb(20 40 30 / .06);
  backdrop-filter: blur(10px) saturate(1.15); -webkit-backdrop-filter: blur(10px) saturate(1.15);
}
.section, .legal, .detail, .panel { padding: clamp(1.1rem, 3vw, 1.8rem); margin-bottom: 1rem; }
.project-hero { padding: clamp(1.1rem, 3vw, 1.8rem); }
.dl-list > .dl-sub { padding: .5rem 1rem; }
.page-head .lede, .banner .lede { max-width: none; }
.dl-card { background: var(--milk); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.login-card { background: var(--milk); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* Abstände zwischen Karten und Blöcken: kompakt, 1 bis 1,5 rem */
.card-grid, .dl-list { gap: 1rem; }
.section { margin-block: 0 1rem; }
.page-head { margin-bottom: 1rem; }
.page-head { --band: rgb(234 245 238 / .6); }
:root[data-accent="sand"] .page-head { --band: rgb(240 231 210 / .6); }
:root[data-theme="dark"] .page-head { --band: rgb(31 27 21 / .6); }
#bn { opacity: .9; }

/* Karten leicht durchsichtig */
.feature, .tile, .fact, .kpi, .project-card, .tool-card, .stat {
  background: var(--milk); backdrop-filter: blur(10px) saturate(1.15); -webkit-backdrop-filter: blur(10px) saturate(1.15);
}
.section { margin-top: 1rem; padding-top: clamp(1.1rem, 3vw, 1.8rem); }
.banner-box { background: var(--milk); backdrop-filter: blur(10px) saturate(1.15); -webkit-backdrop-filter: blur(10px) saturate(1.15); }
.facts-strip > *, .facts-strip li, .facts-strip div { background: var(--milk); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }


/* =====================================================================
   9. Animation dezent nur im Kopfbereich; Kopfzeile und Fußzeile gleichfarbig
   ===================================================================== */
:root { --chrome: rgb(226 241 231 / .86); --chrome-ink: var(--ink); --chrome-soft: var(--ink-soft); --chrome-line: rgb(47 122 85 / .18); }
:root[data-accent="sand"] { --chrome: rgb(240 231 210 / .88); }
:root[data-theme="dark"] { --chrome: rgb(31 27 21 / .88); --chrome-line: rgb(255 240 210 / .12); }

#bn { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 440px; opacity: .5;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.page-head, :root[data-accent="sand"] .page-head, :root[data-theme="dark"] .page-head { --band: transparent; background: none; box-shadow: none; border-bottom: 0; }

.site-nav { background: var(--chrome); border-bottom: 1px solid var(--chrome-line); }
.site-footer { background: var(--chrome); color: var(--chrome-soft); border-top: 1px solid var(--chrome-line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.footer-grid h4, .footer-base { color: var(--ink-faint); }
.footer-grid a, .footer-grid p { color: var(--chrome-soft); }
.footer-grid a:hover, .footer-grid .brand { color: var(--head); }
.footer-base { border-top-color: var(--chrome-line); }
.site-footer .brand-mark { background: var(--accent); color: var(--bg); }


/* =====================================================================
   10. Animation nur in der Kopfzeile; Inhalt einfarbig/Verlauf; Blau-Farbwelt
   ===================================================================== */
:root { --nav-bg: linear-gradient(100deg, #DCEFE3 0%, #F1F9F4 55%, #DDEBF3 100%); --milk: rgb(255 255 255 / .55); }
:root[data-accent="sand"] { --nav-bg: linear-gradient(100deg, #EADFC6 0%, #F6EFDD 55%, #EBDDBE 100%); }
:root[data-accent="blue"] { --milk: rgb(255 255 255 / .6); }
:root[data-theme="dark"] { --nav-bg: linear-gradient(100deg, #1B1812 0%, #2A251B 100%); --nav-ink: #D8CDB6; --nav-ink-hi: #FFF8E8; --milk: rgb(24 21 16 / .55); }
:root[data-theme="dark"][data-accent="blue"] { --nav-bg: linear-gradient(135deg, #08295F 0%, #0A3A82 45%, #0E5BC0 100%); --nav-ink: #DCE7FA; --nav-ink-hi: #fff; --milk: rgb(18 33 61 / .6); }
:root[data-accent="blue"] { --gold: #F0B33A; }
:root[data-accent="blue"] .site-nav .brand-mark, :root[data-accent="blue"] .site-footer .brand-mark { background: rgb(255 255 255 / .16); color: #fff; }

/* Inhalt: ruhiger Verlauf statt Raster */
body { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%) fixed; }
body::before { display: none; }

/* Animation lebt in der Kopfzeile */
#bn { position: absolute; inset: 0; top: 0; width: 100%; height: 100%; z-index: 0; opacity: .8; -webkit-mask-image: none; mask-image: none; pointer-events: none; }
.site-nav { position: sticky; background: var(--nav-bg); border-bottom: 1px solid var(--nav-line); backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; }
.site-nav > .wrap { position: relative; z-index: 1; }

/* Fußzeile genauso wie die Kopfzeile */
.site-footer { background: var(--nav-bg); color: var(--nav-ink); border-top: 1px solid var(--nav-line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.footer-grid h4, .footer-base { color: var(--nav-ink); opacity: .75; }
.footer-grid a, .footer-grid p { color: var(--nav-ink); }
.footer-grid a:hover, .footer-grid .brand { color: var(--nav-ink-hi); }
.footer-base { border-top-color: var(--nav-line); }
.site-footer .brand-mark { background: var(--accent); color: var(--bg); }
:root[data-accent="blue"] .site-footer .brand-mark { background: rgb(255 255 255 / .16); color: #fff; }

/* Farbwahl: Blau */
.swatch[data-pal="blue"], .palette-btn[data-pal="blue"] .swatch { background: linear-gradient(135deg, #0A3A82 50%, #8DB6F2 50%); }
.hero-badge, .banner .hero-badge { color: var(--head); }
:root[data-theme="dark"][data-accent="blue"] .hero-badge { color: var(--ink); }


/* Kopfzeile: Texte und Bedienelemente auf Milchglas, damit sie über der Animation gut lesbar sind */
:root { --nav-glass: rgb(255 255 255 / .6); --nav-glass-line: rgb(255 255 255 / .75); }
:root[data-accent="sand"] { --nav-glass: rgb(250 246 236 / .6); }
:root[data-theme="dark"] { --nav-glass: rgb(24 21 16 / .55); --nav-glass-line: rgb(255 240 210 / .12); }
:root[data-accent="blue"], :root[data-theme="dark"][data-accent="blue"] { --nav-glass: rgb(6 28 66 / .45); --nav-glass-line: rgb(255 255 255 / .18); }
.brand, .palette-btn { background: var(--nav-glass); border: 1px solid var(--nav-glass-line); backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2); }
.brand { padding: .3rem .85rem .3rem .35rem; border-radius: 999px; }
@media (min-width: 801px) {
  .nav-links { padding: .25rem .4rem; border-radius: 999px; background: var(--nav-glass); border: 1px solid var(--nav-glass-line); backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2); }
}
.menu-btn { background: var(--nav-glass); border: 1px solid var(--nav-glass-line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }


/* =====================================================================
   11. Fußzeile: Animation wie in der Kopfzeile, Text auf leichtem Milchglas
   ===================================================================== */
:root { --milk-foot: rgb(255 255 255 / .38); --milk-foot-line: rgb(255 255 255 / .55); }
:root[data-accent="blue"] { --milk-foot: rgb(255 255 255 / .40); }
:root[data-theme="dark"] { --milk-foot: rgb(24 21 16 / .42); --milk-foot-line: rgb(255 240 210 / .10); }
:root[data-theme="dark"][data-accent="blue"] { --milk-foot: rgb(14 40 88 / .42); --milk-foot-line: rgb(255 255 255 / .14); }

.site-footer { position: relative; overflow: hidden; }
#bf { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .8; pointer-events: none; display: block; }
.site-footer > .wrap { position: relative; z-index: 1; }

.footer-grid { gap: 1rem; padding: 2.5rem 0 1rem; }
.footer-grid > div, .footer-base {
  background: var(--milk-foot); border: 1px solid var(--milk-foot-line); border-radius: 14px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.footer-grid > div { padding: 1.1rem 1.25rem 1.2rem; }
.footer-base { margin: 0 0 1.75rem; padding: .8rem 1.25rem; border-top-width: 1px; }
@media (prefers-reduced-motion: reduce) { #bf { display: none; } }