/* thomas-haerle.de – Kobaltblau auf kühlem Papier (hell) und Nachtblau (dunkel), seit 2026-10-22 (Wahl Thomas). Keine externen Schriften, keine Cookies. */
:root {
  --bg: #f4f7fc;
  --bg-oben: #fbfcff;
  --bg-unten: #e8eef8;
  --bg-2: #eaf0f9;
  --surface: #ffffff;
  --karte-oben: rgba(255, 255, 255, .8);
  --ink: #18202e;
  --muted: #536073;
  --line: #d5deeb;
  --accent: #2563eb;
  --accent-ink: #1d4ed8;
  --accent-soft: #dce7fd;
  --ok: #2f9e55;
  --ok-soft: #d7f0de;
  --on-accent: #ffffff;
  --holz: #e9c99b;
  --holz-2: #dcb683;
  --rille: #6b3f14;
  /* Figuren: Farben der Seite (Blau, Stahl, Holz), je Thema auf Kontrast abgestimmt */
  --fig-gelb: var(--accent);
  --fig-strich: #0d1b3a;
  --fig-metall: #c9d8f5;
  --fig-metall-2: var(--accent-ink);
  --fig-auge: #ffffff;
  --fig-pupille: #0d1b3a;
  --fig-fluessig: #cfe4fb;
  --fig-blase: #f7fbff;
  --fig-stecker: var(--accent-ink);
  --fig-hose: #6b8fc9;
  --fig-kappe: #1d2a44;
  --fig-funke-kern: #f2f7ff;
  --fig-glanz: rgba(255, 255, 255, .55);
  --fig-schatten: drop-shadow(0 2px 2px rgba(15, 35, 80, .22));
  --schatten: 0 1px 2px rgba(15, 35, 80, 0.06), 0 10px 28px rgba(37, 80, 170, 0.12);
  --schatten-hoch: 0 2px 4px rgba(15, 35, 80, 0.07), 0 18px 40px rgba(37, 80, 170, 0.20);
  --licht-oben: inset 0 1px 0 rgba(255, 255, 255, .25);
  --feld-innen: inset 0 1px 2px rgba(15, 35, 80, .07);
  --radius: 20px;
  --font: ui-rounded, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0f1726;
  --bg-oben: #13203a;
  --bg-unten: #0c1320;
  --bg-2: #0d1523;
  --surface: #172238;
  --karte-oben: rgba(255, 255, 255, .05);
  --ink: #eef3fb;
  --muted: #a6b3c8;
  --line: #283651;
  --accent: #60a5fa;
  --accent-ink: #93c5fd;
  --accent-soft: #172e55;
  --ok: #4cc26f;
  --ok-soft: #1d3826;
  --on-accent: #06142b;
  --holz: #5a4128;
  --holz-2: #4a3420;
  --rille: #1b1008;
  --fig-metall: #3d5a8a;
  --fig-fluessig: #234872;
  --fig-blase: #e6f0ff;
  --fig-hose: #4f74ad;
  --fig-kappe: #22324f;
  --fig-funke-kern: #eaf3ff;
  --fig-auge: #eef3fb;
  --fig-glanz: rgba(255, 255, 255, .28);
  --fig-schatten: drop-shadow(0 2px 3px rgba(0, 0, 0, .55));
  --schatten: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 30px rgba(0, 0, 0, 0.45);
  --schatten-hoch: 0 2px 4px rgba(0, 0, 0, 0.45), 0 20px 44px rgba(0, 0, 0, 0.55);
  --licht-oben: inset 0 1px 0 rgba(255, 255, 255, .14);
  --feld-innen: inset 0 1px 2px rgba(0, 0, 0, .35);
  --fig-strich: #06142b; --fig-pupille: #06142b; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1726; --bg-oben: #13203a; --bg-unten: #0c1320; --bg-2: #0d1523; --surface: #172238; --karte-oben: rgba(255, 255, 255, .05); --ink: #eef3fb; --muted: #a6b3c8; --line: #283651;
    --accent: #60a5fa; --accent-ink: #93c5fd; --accent-soft: #172e55; --on-accent: #06142b;
    --ok: #4cc26f; --ok-soft: #1d3826;
    --holz: #5a4128; --holz-2: #4a3420; --rille: #1b1008;
    --fig-metall: #3d5a8a; --fig-fluessig: #234872; --fig-blase: #e6f0ff; --fig-hose: #4f74ad; --fig-kappe: #22324f;
    --fig-funke-kern: #eaf3ff; --fig-auge: #eef3fb; --fig-glanz: rgba(255, 255, 255, .28); --fig-schatten: drop-shadow(0 2px 3px rgba(0, 0, 0, .55));
    --schatten: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 30px rgba(0, 0, 0, 0.45);
    --schatten-hoch: 0 2px 4px rgba(0, 0, 0, 0.45), 0 20px 44px rgba(0, 0, 0, 0.55);
    --licht-oben: inset 0 1px 0 rgba(255, 255, 255, .14);
    --feld-innen: inset 0 1px 2px rgba(0, 0, 0, .35);
    --fig-strich: #06142b; --fig-pupille: #06142b;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100dvh;
  background: linear-gradient(180deg, var(--bg-oben), var(--bg-unten)) no-repeat var(--bg);
  color: var(--ink);
  font: 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-ink); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
/* Barrierefreiheit: Sprunglink (erscheint bei Tastaturfokus), ganze Kachel zeigt den Fokus */
.sprung { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none; }
.sprung:focus { top: 12px; }
main:focus { outline: none; }
.kachel:has(.kachel-link:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.kachel .kachel-link:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 4px; }
.wrap { width: min(1080px, 100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); margin-inline: auto; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .kopf { background: var(--bg-oben); } }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 12px; }
.marke { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.marke svg { width: 30px; height: 30px; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { padding: 8px 12px; border-radius: 11px; color: var(--muted); text-decoration: none; font-size: 15px; }
.nav a:hover { background: var(--accent-soft); color: var(--ink); }
.thema { appearance: none; border: 1px solid var(--line); background: linear-gradient(180deg, var(--karte-oben), transparent 60%) var(--surface); box-shadow: var(--licht-oben); color: var(--ink); width: 40px; height: 40px; border-radius: 13px; display: inline-grid; place-items: center; cursor: pointer; }
.thema:hover { border-color: var(--accent); }
.thema svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.thema .mond { display: none; }
:root[data-theme="dark"] .thema .sonne { display: none; }
:root[data-theme="dark"] .thema .mond { display: block; }
@media (max-width: 640px) { .nav a.lang { display: none; } }

/* Held */
.held { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 85% -10%, var(--accent-soft), transparent 60%); }
.held .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 56px 0 40px; }
.kicker { display: inline-block; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--accent-ink); }
h1 { font-size: clamp(34px, 5.4vw, 58px); line-height: 1.04; letter-spacing: -0.03em; margin: 10px 0 14px; }
h1 em { font-style: normal; color: var(--accent); }
.lead { font-size: clamp(18px, 2.2vw, 21px); color: var(--muted); max-width: 34ch; margin: 0 0 24px; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 16px; font-weight: 700; text-decoration: none; border: 1px solid transparent; font-size: 16px; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.btn.primaer { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, white), transparent 55%) var(--accent); color: var(--on-accent); box-shadow: var(--licht-oben), 0 6px 18px color-mix(in srgb, var(--accent) 38%, transparent); }
.btn.primaer:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, white), transparent 55%) color-mix(in srgb, var(--accent) 90%, white); color: var(--on-accent); transform: translateY(-1px); box-shadow: var(--licht-oben), 0 10px 24px color-mix(in srgb, var(--accent) 45%, transparent); }
.btn.leise { background: linear-gradient(180deg, var(--karte-oben), transparent 60%) var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--licht-oben), var(--schatten); }
.btn.leise:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-1px); box-shadow: var(--licht-oben), var(--schatten-hoch); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.szene { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 24px rgba(15, 35, 80, 0.14)); }
@media (max-width: 860px) { .held .wrap { grid-template-columns: 1fr; padding-top: 36px; } .lead { max-width: none; } }

/* Szene (Animation) */
.szene .brett { fill: var(--holz); }
.szene .brett-seite { fill: var(--holz-2); }
.szene .maser { fill: none; stroke: var(--rille); stroke-opacity: 0.16; stroke-width: 1.4; stroke-linecap: round; }
.szene .rille { fill: none; stroke: var(--rille); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ziehen 9s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.szene .kopf-fahrt { offset-path: path("M120 238 C 220 206, 300 270, 400 238 S 600 206, 700 238 S 820 262, 850 238"); offset-rotate: 0deg; animation: fahren 9s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.szene .spindel { fill: var(--accent); }
.szene .spindel-dunkel { fill: color-mix(in srgb, var(--accent) 68%, black); }
.szene .stahl { fill: #cfd6de; }
.szene .span { fill: var(--holz-2); stroke: var(--rille); stroke-opacity: 0.35; stroke-width: 1; animation: span 0.9s linear infinite; opacity: 0; }
.szene .span:nth-child(2) { animation-delay: -0.3s; }
.szene .span:nth-child(3) { animation-delay: -0.6s; }
.szene .span:nth-child(4) { animation-delay: -0.15s; }
.szene .span:nth-child(5) { animation-delay: -0.45s; }
.szene .zahn { transform-origin: 800px 80px; animation: drehen 24s linear infinite; }
.szene .zahn-innen { transform-origin: 800px 80px; animation: drehen 24s linear infinite reverse; }
@keyframes ziehen { 0% { stroke-dashoffset: 1; opacity: 1; } 78% { stroke-dashoffset: 0; opacity: 1; } 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes fahren { 0% { offset-distance: 0%; opacity: 1; } 78% { offset-distance: 100%; opacity: 1; } 92% { offset-distance: 100%; opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes span { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 18px), var(--dy, -30px)) scale(1); } }
@keyframes drehen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .szene .rille { animation: none; stroke-dashoffset: 0; }
  .szene .kopf-fahrt { animation: none; offset-distance: 100%; }
  .szene .span, .szene .zahn, .szene .zahn-innen { animation: none; }
  .szene .span { opacity: 0; }
  html { scroll-behavior: auto; }
}

/* Kacheln */
section { padding: 56px 0; }
h2 { font-size: clamp(26px, 3.6vw, 36px); letter-spacing: -0.02em; margin: 0 0 8px; }
.untertitel { color: var(--muted); margin: 0 0 28px; max-width: 60ch; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.kachel { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; background: linear-gradient(180deg, var(--karte-oben), transparent 55%) var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--schatten); text-decoration: none; color: inherit; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.kachel:hover, .kachel:focus-within { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--schatten-hoch); }
.kachel .icon { width: 46px; height: 46px; border-radius: 14px; box-shadow: var(--licht-oben); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.kachel .icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kachel h3 { margin: 0; font-size: 20px; letter-spacing: -0.01em; }
.kachel p { margin: 0; color: var(--muted); font-size: 15.5px; }
.kachel .ziel { text-decoration: none; font-weight: 700; color: var(--accent-ink); font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.kachel .ziel svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 0.18s ease; }
.kachel:hover .ziel svg { transform: translateX(3px); }
.kachel.gross { grid-column: 1 / -1; background: linear-gradient(180deg, var(--karte-oben), transparent 55%), linear-gradient(135deg, var(--accent-soft), var(--surface) 60%); }
@media (min-width: 900px) { .kachel.gross { grid-column: span 2; } }
/* Breite Kachel am Ende (Tabellenbuch): füllt die letzte Reihe; ab Tablet Bild links, Text und Link rechts */
.kachel.breit { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .kachel.breit, .kachel.breit:has(.bild) { grid-template-columns: minmax(220px, 34%) 1fr; grid-template-rows: auto 1fr auto; column-gap: 22px; }
  .kachel.breit .bild { grid-column: 1; grid-row: 1 / -1; align-self: center; margin: 0 0 0 -8px; aspect-ratio: 8 / 3; }
  .kachel.breit > :not(.bild) { grid-column: 2; }
  .kachel.breit p { max-width: 68ch; }
}
/* Karte „In Zahlen“ (tools/zahlen.py schreibt sie beim Upload, nur echte Werte) */
.zahlen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }
.kennzahl { display: grid; align-content: start; gap: 2px; background: linear-gradient(180deg, var(--karte-oben), transparent 55%) var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--schatten); position: relative; overflow: hidden; }
.kennzahl::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: linear-gradient(90deg, var(--accent), transparent); opacity: .7; }
.kennzahl .vor { color: var(--muted); font-size: 14px; font-weight: 600; min-height: 1.4em; }
.kennzahl strong { font-size: clamp(34px, 5vw, 44px); line-height: 1.05; letter-spacing: -0.02em; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.kennzahl .was { font-weight: 700; font-size: 16px; }
.kennzahl .wo { color: var(--muted); font-size: 14px; }
/* Kachelbilder: gezeichnete Mini-Ansichten der Projekte, nur mit Seitenfarben (hell und dunkel) */
.kachel:has(.bild) { grid-template-rows: auto auto 1fr auto; }
.kachel:has(.bild):has(.neu) { grid-template-rows: auto auto auto auto auto; }
.bild { margin: -8px -8px 4px; border-radius: 13px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); aspect-ratio: 8 / 3; }
.kachel.gross { container-type: inline-size; }
.kachel.gross .bild { aspect-ratio: auto; height: clamp(120px, 18.75cqi, 150px); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.bild svg { display: block; width: 100%; height: 100%; transition: transform .45s ease; }
.kachel:hover .bild svg { transform: scale(1.04); }
.bild .raster { fill: none; stroke: var(--line); stroke-width: 1; }
.bild .brett { fill: var(--holz); }
.bild .brett-seite { fill: var(--holz-2); }
.bild .tasche { fill: var(--rille); fill-opacity: .5; }
.bild .bahn { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: 5 5; stroke-linecap: round; }
.bild .punkt, .bild .ader, .bild .antwort.richtig, .bild .taste.an { fill: var(--accent); stroke: none; }
.bild .spindel { fill: var(--muted); }
.bild .fraeser { fill: var(--accent-ink); }
.bild .span, .bild .ader.b { fill: var(--holz-2); }
.bild .ader.c { fill: var(--muted); }
.bild .achse, .bild .achse-spitze, .bild .mass { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bild .anzeige { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.bild .zeile { fill: none; stroke: var(--muted); stroke-opacity: .45; stroke-width: 4; stroke-linecap: round; }
.bild .leiter { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.bild .leiter.pe { stroke: var(--accent); stroke-dasharray: 8 5; }
.bild .symbol { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.bild .blatt { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.bild .haken { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bild .haken.hell { stroke: var(--on-accent); }
.bild .antwort, .bild .taste { fill: var(--bg-2); stroke: var(--line); }
.bild .ring { fill: none; stroke: var(--accent-soft); stroke-width: 8; }
.bild .ring-wert { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; }
.bild .mantel { fill: var(--surface); stroke: var(--muted); stroke-width: 2; }
.bild .kurve { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.bild .hilfslinie { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 3 4; }
.bild text { fill: var(--ink); font-family: var(--font); }
.bild .zahl { font-size: 20px; font-weight: 800; }
.bild .wert { font-size: 13px; font-weight: 700; }
.bild .formel { font-size: 26px; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .bild svg, .kachel:hover .bild svg { transition: none; transform: none; } .kachel, .kachel:hover, .kachel:focus-within, .btn, .btn:hover { transition: none; transform: none; } }


/* Fuß */
.fuss { padding: 28px 0 40px; color: var(--muted); font-size: 14.5px; }
.fuss .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fuss a { color: var(--muted); }
.fuss a:hover { color: var(--accent-ink); }
/* Fingerbedienung: Ziele mindestens 44 px (Fußzeile, Marke, Hell/Dunkel, Einträge der Neuigkeiten-Seite) */
@media (pointer: coarse) { .fuss nav a { display: inline-flex; align-items: center; min-height: 44px; } .marke { min-height: 44px; } .thema { width: 44px; height: 44px; } .archiv-liste a { padding: 9px 0; } }

/* Rechtstexte */
.text { max-width: 780px; padding: 40px 0 64px; }
.text h1 { font-size: clamp(32px, 5vw, 46px); }
.text h2 { font-size: 21px; margin: 32px 0 8px; }
.text p, .text li, .text dd { color: color-mix(in srgb, var(--ink) 88%, var(--muted)); font-size: 16px; }
.text address { font-style: normal; line-height: 1.7; }
.text dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; }
.text dt { font-weight: 700; }
.text dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) { .text dl { grid-template-columns: 1fr; gap: 0; } .text dt { margin-top: 12px; font-size: 14px; color: var(--muted); } .text dt:first-child { margin-top: 0; } .text dd { margin-top: 2px; } }
.stand { color: var(--muted); font-size: 14px; }
.platzhalter { background: #fff3a8; color: #5c4400; padding: 0 5px; border-radius: 4px; font-weight: 700; }
:root[data-theme="dark"] .platzhalter { background: #5c4a00; color: #ffe27a; }

/* Projektkacheln: Hauptlink gestreckt, Neuigkeiten als eigene Links darüber */
.kachel-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
/* Nebenlinks in der Kachel (zweites Ziel, Link im Text) liegen über dem gestreckten Hauptlink */
.kachel .ziele { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.kachel .nebenziel { position: relative; z-index: 1; color: var(--muted); font-weight: 650; }
.kachel .nebenziel:hover, .kachel .nebenziel:focus-visible { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 4px; }
.kachel .nebenziel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.kachel p a { position: relative; z-index: 1; color: var(--ink); font-weight: 650; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.kachel p a:hover, .kachel p a:focus-visible { color: var(--accent-ink); }

/* 404: Liste der Projektlinks */
.wege { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.wege a { display: inline-block; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: linear-gradient(180deg, var(--karte-oben), transparent 60%) var(--surface); box-shadow: var(--licht-oben), var(--schatten); color: var(--ink); font-weight: 650; text-decoration: none; }
.wege a:hover, .wege a:focus-visible { border-color: var(--accent); color: var(--accent-ink); }

/* Effekte auf der Startseite: dezent, nur mit Maus bzw. ohne „Bewegung reduzieren“ */
/* A) Kachel ↔ Knoten im Netz */
.netz .kante { transition: stroke-opacity .25s ease, stroke-width .25s ease; }
.netz .kante.aktiv { stroke-opacity: 1; stroke-width: 3.2; stroke-dasharray: 1; animation: netz-ziehen .5s ease-out; }
.netz .knoten circle { transition: fill .25s ease, r .25s ease; }
.netz .knoten.aktiv circle:first-child { fill: var(--accent); r: 16px; }
.netz .knoten.aktiv .kern { fill: var(--on-accent); }
@keyframes netz-ziehen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* B) Lichtkante, die der Maus folgt */
@media (hover: hover) and (pointer: fine) {
  .kachel { isolation: isolate; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) calc(var(--licht, 0) * 9%), transparent), transparent 65%), linear-gradient(180deg, var(--karte-oben), transparent 55%), var(--surface); }
  .kachel::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: -1; opacity: var(--licht, 0); transition: opacity .3s ease;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--accent), transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
  .kachel:hover { --licht: 1; }
}
/* C) Sanftes Einblenden beim Scrollen (nur wenn das Skript läuft) */
.einblenden-an .einblenden { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 80ms); }
.einblenden-an .einblenden.sichtbar { opacity: 1; transform: none; }
/* E) Das T im Logo kippt kurz wie ein Werkzeug */
.marke svg .logo-t { transform-box: fill-box; transform-origin: 50% 0; }
.marke:hover svg .logo-t, .marke:focus-visible svg .logo-t { animation: logo-kippen .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes logo-kippen { 0% { transform: rotate(0); } 30% { transform: rotate(-14deg); } 60% { transform: rotate(7deg); } 100% { transform: rotate(0); } }
/* Figuren mit Schabernack (assets/figuren.js): erscheinen zufällig, ein Klick schickt sie weg */
.kacheln { position: relative; }
.figur { cursor: pointer; }
.fig-zollstock, .fig-roboter svg, .fig-stecker svg, .fig-monteur svg, .fig-libelle { filter: var(--fig-schatten); }
/* Augen (HTML und SVG), blinzeln ab und zu */
.fig-augen { position: absolute; display: flex; gap: 2px; }
.fig-auge { display: grid; place-items: center; width: 8px; height: 8px; border-radius: 50%; background: var(--fig-auge); box-shadow: 0 0 0 1px var(--fig-strich); transition: transform .08s; }
.fig-auge b { width: 4px; height: 4px; border-radius: 50%; background: var(--fig-pupille); }
.figur .rb-auge { fill: var(--fig-auge); stroke: var(--fig-metall-2); stroke-width: .9; }
.figur .fig-pupille { fill: var(--fig-pupille); }
.figur .rb-auge, .figur .fig-pupille { transform-box: fill-box; transform-origin: center; transition: transform .08s; }
.figur.blinzeln .fig-auge, .figur.blinzeln .rb-auge, .figur.blinzeln .fig-pupille { transform: scaleY(.12); }
/* Zollstock */
.fig-zollstock { position: absolute; z-index: 3; height: 16px; }
.zs-stab { position: relative; width: 24px; height: 16px; border-radius: 3px;
  background: linear-gradient(var(--fig-glanz), transparent 55%),
    linear-gradient(90deg, var(--fig-strich) 0 1px, transparent 1px) 0 100% / 10px 5px repeat-x,
    linear-gradient(90deg, var(--fig-strich) 0 1px, transparent 1px) 0 100% / 50px 8px repeat-x,
    linear-gradient(90deg, var(--fig-strich) 0 1.5px, transparent 1.5px) 0 0 / 90px 100% repeat-x, var(--fig-gelb); }
.zs-stab .fig-augen { left: 4px; top: 4px; }
.zs-kappe { position: absolute; right: -2px; top: -1px; width: 5px; height: 18px; border-radius: 2px; background: var(--fig-metall); box-shadow: inset 0 0 0 1px var(--fig-metall-2); }
.zs-mass { position: absolute; left: 0; bottom: 23px; width: 90px; text-align: center; padding: 2px 8px; border-radius: 8px; background: var(--fig-gelb); color: var(--fig-strich); font: 700 13px/1.3 var(--font); white-space: nowrap; opacity: 0; box-shadow: var(--schatten); }
.zs-mass::after { content: ""; position: absolute; left: calc(50% - 5px); bottom: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: var(--fig-gelb); }
/* Schrauben-Roboter */
.fig-roboter { position: absolute; width: 72px; height: 55px; overflow: hidden; }
.fig-roboter svg { display: block; transform: translateY(55px); }
.fig-roboter .rb-metall, .fig-roboter .rb-mutter { fill: var(--fig-metall); stroke: var(--fig-metall-2); stroke-width: 1.5; stroke-linejoin: round; }
.fig-roboter .rb-glanz { fill: var(--fig-glanz); }
.fig-roboter .rb-mund { fill: none; stroke: var(--fig-metall-2); stroke-width: 1.3; stroke-linecap: round; }
.fig-roboter .rb-led { fill: var(--fig-gelb); stroke: var(--fig-metall-2); stroke-width: .8; animation: rb-led 1.1s steps(2, jump-none) infinite; }
@keyframes rb-led { from { fill: var(--fig-gelb); } to { fill: var(--fig-auge); } }
.fig-roboter .rb-koerper { fill: var(--fig-metall-2); }
.fig-roboter .rb-niete { fill: var(--fig-metall); }
.fig-roboter .rb-schluessel { fill: none; stroke: var(--fig-metall-2); stroke-width: 3.5; stroke-linecap: round; transform-box: view-box; transform-origin: 32px 37px; }
/* Funke im Netz */
.netz .fig-funke .fk-schein { fill: var(--accent); opacity: .28; transform-box: fill-box; transform-origin: center; animation: fk-puls .9s ease-in-out infinite alternate; }
.netz .fig-funke .fk-strahlen { stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: fk-dreh 2.4s linear infinite; }
.netz .fig-funke .fk-kern { fill: var(--fig-funke-kern); stroke: var(--accent); stroke-width: 2.5; }
.netz .fig-funke .fk-glanz { fill: #fff; opacity: .8; }
.netz .fig-funke .fk-auge { fill: var(--fig-pupille); }
@keyframes fk-puls { to { transform: scale(1.25); opacity: .12; } }
@keyframes fk-dreh { to { transform: rotate(360deg); } }
.kachel.angefunkt { border-color: var(--accent); animation: angefunkt .65s ease-out 2; }
@keyframes angefunkt { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent), var(--schatten); } to { box-shadow: 0 0 0 10px transparent, var(--schatten); } }
/* Wasserwaage mit Libelle: Körper in Bernstein, Fenster mit Flüssigkeit, Blase mit Augen */
.fig-libelle { position: fixed; z-index: 9; right: 12px; top: 36vh; width: 36px; height: 150px; border-radius: 7px;
  background: linear-gradient(90deg, var(--fig-glanz), transparent 40%), var(--fig-gelb); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fig-strich) 35%, transparent); }
.fig-libelle::before, .fig-libelle::after { content: ""; position: absolute; left: -1px; right: -1px; height: 10px; background: var(--fig-kappe); }
.fig-libelle::before { top: -1px; border-radius: 7px 7px 3px 3px; }
.fig-libelle::after { bottom: -1px; border-radius: 3px 3px 7px 7px; }
.lb-fenster { position: absolute; left: 6px; right: 6px; top: 20px; bottom: 20px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(90deg, transparent 18%, var(--fig-glanz) 22% 30%, transparent 34%),
    linear-gradient(var(--fig-strich), var(--fig-strich)) 50% calc(50% - 17px) / 100% 1.5px no-repeat,
    linear-gradient(var(--fig-strich), var(--fig-strich)) 50% calc(50% + 17px) / 100% 1.5px no-repeat, var(--fig-fluessig);
  box-shadow: inset 0 0 0 1.5px var(--fig-strich), inset 0 3px 6px rgba(0, 0, 0, .25); }
.lb-blase { position: absolute; left: 2.5px; top: calc(50% - 13px); width: 19px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 18%, transparent 19%), var(--fig-blase); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fig-strich) 45%, transparent); }
.lb-blase .fig-augen { left: 1px; top: 9px; gap: 1px; transform: scale(.85); }
.fig-libelle.zufrieden .fig-auge { height: 3px; border-radius: 0 0 4px 4px; }
.fig-libelle.zufrieden .fig-auge b { display: none; }
/* Stecker */
.fig-stecker { position: absolute; z-index: 3; height: 48px; pointer-events: none; }
.fig-stecker svg { display: block; overflow: visible; }
.fig-stecker .st-figur { pointer-events: auto; }
.fig-stecker .st-kabel { fill: none; stroke: var(--fig-stecker); stroke-width: 3; stroke-linecap: round; }
.fig-stecker .st-tuelle { fill: var(--fig-kappe); }
.fig-stecker .st-koerper { fill: var(--fig-stecker); }
.fig-stecker .st-glanz { fill: var(--fig-glanz); }
.fig-stecker .st-rille { stroke: var(--fig-kappe); stroke-width: 1.2; stroke-linecap: round; opacity: .5; }
.fig-stecker .st-stift { fill: var(--fig-metall); stroke: var(--fig-metall-2); stroke-width: .6; }
.fig-stecker .st-blitz { fill: none; stroke: var(--fig-gelb); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.kachel.unter-strom { --licht: 1; border-color: var(--accent); animation: unter-strom 2.9s ease-out; }
.kachel.unter-strom .icon { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 70%, transparent); transition: background .2s, color .2s, box-shadow .2s; }
@keyframes unter-strom {
  0%, 10%, 20% { box-shadow: var(--schatten); }
  5%, 15%, 28%, 85% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 34px 6px color-mix(in srgb, var(--accent) 45%, transparent), var(--schatten); }
  100% { box-shadow: var(--schatten); }
}
/* Monteur */
.fig-monteur { position: absolute; right: 3px; top: -64.6px; width: 83.2px; height: 91px; z-index: 2; }
.fig-monteur svg { display: block; overflow: visible; pointer-events: none; }
.fig-monteur .mt-mann, .fig-monteur .mt-bohrer { pointer-events: auto; }
.fig-monteur .mt-mann { opacity: 0; }
.fig-monteur .mt-hose { fill: var(--fig-hose); }
.fig-monteur .mt-traeger { fill: none; stroke: var(--fig-metall-2); stroke-width: 1.4; stroke-linecap: round; }
.fig-monteur .mt-stiefel { fill: var(--fig-kappe); }
.fig-monteur .mt-kopf { fill: var(--fig-auge); stroke: var(--fig-metall-2); stroke-width: 1.2; }
.fig-monteur .mt-helm { fill: var(--fig-gelb); stroke: var(--fig-gelb); stroke-width: 2.2; stroke-linecap: round; }
.fig-monteur .mt-glanz { fill: none; stroke: var(--fig-glanz); stroke-width: 1.6; stroke-linecap: round; }
.fig-monteur .mt-arm { stroke: var(--fig-hose); stroke-width: 3.5; stroke-linecap: round; }
.fig-monteur .mt-bohrer { opacity: 0; }
.fig-monteur .mt-motor { fill: var(--fig-gelb); stroke: var(--fig-metall-2); stroke-width: .8; }
.fig-monteur .mt-schlitze { stroke: var(--fig-strich); stroke-width: 1; stroke-linecap: round; opacity: .55; }
.fig-monteur .mt-griff, .fig-monteur .mt-futter { fill: var(--fig-kappe); }
.fig-monteur .mt-bit { stroke: var(--fig-metall-2); stroke-width: 1.8; stroke-dasharray: 2 1.2; }
.fig-monteur .mt-loch { fill: var(--fig-pupille); opacity: .75; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.fig-monteur .mt-loch.mit-duebel { fill: var(--fig-metall-2); opacity: 1; }
.fig-monteur .mt-staub { fill: var(--muted); opacity: 0; }
.fig-monteur .mt-duebel { fill: var(--fig-metall); stroke: var(--fig-metall-2); stroke-width: .8; opacity: 0; }
.fig-monteur .mt-schraube { opacity: 0; }
.fig-monteur .mt-kopfschraube { fill: var(--fig-metall); stroke: var(--fig-metall-2); stroke-width: 1.2; }
.fig-monteur .mt-schlitz { stroke: var(--fig-metall-2); stroke-width: 1.3; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
/* Schraube bleibt, solange die Seite offen ist: Kachel sitzt sichtbar fest */
.fig-schraube { position: absolute; right: 13.4px; top: 13.4px; width: 9.2px; height: 9.2px; border-radius: 50%; pointer-events: none; z-index: 2;
  background: linear-gradient(var(--fig-metall-2), var(--fig-metall-2)) center / 5px 1.3px no-repeat, linear-gradient(var(--fig-metall-2), var(--fig-metall-2)) center / 1.3px 5px no-repeat, radial-gradient(circle at 35% 30%, var(--fig-glanz), transparent 60%), var(--fig-metall);
  box-shadow: 0 0 0 1.2px var(--fig-metall-2); animation: schraube-sitzt .6s ease-out; }
@keyframes schraube-sitzt { from { box-shadow: 0 0 0 1.2px var(--fig-metall-2), 0 0 0 0 var(--accent); } to { box-shadow: 0 0 0 1.2px var(--fig-metall-2), 0 0 0 9px transparent; } }
@media print { .figur { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .netz .kante.aktiv, .marke:hover svg .logo-t, .marke:focus-visible svg .logo-t { animation: none; }
  .einblenden-an .einblenden { opacity: 1; transform: none; transition: none; }
}

/* Startseite: Netz-Grafik neben der Überschrift */
.netz { width: 100%; max-width: 460px; height: auto; display: block; justify-self: center; }
.netz .bahn { fill: none; stroke: var(--accent); stroke-opacity: .18; stroke-width: 1.2; stroke-dasharray: 3 7; }
.netz .quer { stroke: var(--accent); stroke-opacity: .16; stroke-width: 1.4; }
.netz .kante { stroke: var(--accent); stroke-opacity: .45; stroke-width: 2.2; stroke-linecap: round; }
.netz .nabe { fill: var(--accent); }
.netz .kern { fill: var(--on-accent); opacity: .55; }
.netz .knoten circle:first-child { fill: var(--bg); stroke: var(--accent); stroke-width: 3; }
.netz .knoten .kern { fill: var(--accent); opacity: 1; }
.netz .knoten { animation: netz-puls 4s ease-in-out infinite; }
.netz .welle { fill: none; stroke: var(--accent); stroke-width: 2; transform-origin: 200px 150px; animation: netz-welle 4s ease-out infinite; }
.netz .signal { fill: var(--accent); offset-rotate: 0deg; animation: netz-signal 4s ease-in-out infinite; }
@keyframes netz-puls { 0%, 60%, 100% { transform: scale(1); } 75% { transform: scale(1.18); } }
@keyframes netz-welle { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes netz-signal { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 70% { offset-distance: 100%; opacity: 1; } 80%, 100% { offset-distance: 100%; opacity: 0; } }
/* Neuigkeiten in den Kacheln */
.kachel:has(.neu) { grid-template-rows: auto auto auto auto; }
.neu { position: relative; z-index: 1; list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px dashed var(--line); display: grid; gap: 10px; }
.neu li { display: grid; gap: 2px; font-size: 14.5px; }
.neu .kopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.neu .marke-neu { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; font-size: 12px; padding: 1px 8px; border-radius: 999px; }
.neu time { color: var(--muted); }
.neu .marke-bereich { border: 1px solid var(--line); color: var(--ink); font-weight: 650; font-size: 12px; padding: 0 8px; border-radius: 999px; }
.alle-neu { margin: 22px 0 0; }
.alle-neu a { font-weight: 700; color: var(--accent-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.alle-neu a:hover { text-decoration: underline; }
.alle-neu svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.archiv-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.archiv-liste li { display: grid; justify-items: start; gap: 3px; padding: 0 0 14px; border-bottom: 1px dashed var(--line); }
.archiv-liste .marke-bereich { border: 1px solid var(--line); color: var(--ink); font-weight: 650; font-size: 12px; padding: 0 8px; border-radius: 999px; }
.archiv-liste a { color: var(--ink); font-weight: 650; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.archiv-liste a:hover { color: var(--accent-ink); }
.archiv-liste .txt { color: var(--muted); font-size: 15px; }
.neu a { color: var(--ink); font-weight: 650; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.neu a:hover { color: var(--accent-ink); }
.neu .txt { color: var(--muted); }
/* Kontakt-Popup im Glas-Look */
:root { --glas: rgba(250, 252, 255, .6); --glas-feld: rgba(255, 255, 255, .55); --glas-rand: rgba(255, 255, 255, .7); --glas-glanz: rgba(255, 255, 255, .75); --glas-schleier: rgba(10, 25, 60, .28); }
:root[data-theme="dark"] { --glas: rgba(20, 32, 56, .58); --glas-feld: rgba(20, 26, 34, .55); --glas-rand: rgba(255, 255, 255, .14); --glas-glanz: rgba(255, 255, 255, .16); --glas-schleier: rgba(0, 0, 0, .5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glas: rgba(20, 32, 56, .58); --glas-feld: rgba(20, 26, 34, .55); --glas-rand: rgba(255, 255, 255, .14); --glas-glanz: rgba(255, 255, 255, .16); --glas-schleier: rgba(0, 0, 0, .5); } }
dialog.glas { width: min(600px, 100% - 32px); max-height: calc(100dvh - 32px); overflow: auto; padding: 32px 28px 26px; border-radius: 26px; color: var(--ink);
  background: linear-gradient(145deg, var(--glas-glanz), transparent 42%), radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%), var(--glas);
  border: 1px solid var(--glas-rand); box-shadow: 0 30px 80px rgba(0, 0, 0, .28), inset 0 1px 0 var(--glas-glanz);
  -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7); }
dialog.glas::backdrop { background: var(--glas-schleier); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
dialog.glas[open] { animation: glas-auf .28s cubic-bezier(.2, .9, .3, 1.2); }
dialog.glas[open]::backdrop { animation: glas-schleier .28s ease-out; }
@keyframes glas-auf { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes glas-schleier { from { opacity: 0; } }
dialog.glas h2 { font-size: 26px; margin: 0 40px 18px 0; }
dialog.glas .schliessen { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--glas-rand); background: var(--glas-feld); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
dialog.glas .schliessen:hover { border-color: var(--accent); }
dialog.glas .schliessen svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
dialog.glas .formular input, dialog.glas .formular textarea, dialog.glas .formular select { background: var(--glas-feld); border-color: var(--glas-rand); }
#kontakt-oeffnen { cursor: pointer; font-family: inherit; }
#kontakt-oeffnen svg path { stroke-linejoin: round; }
dialog.glas .griff { display: none; }
/* Am Handy: Blatt von unten mit Ziehgriff, unten Platz für den Home-Balken (Safe-Area) */
@media (max-width: 600px) {
  dialog.glas { width: 100%; max-width: 100%; margin: auto 0 0; max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px)); border-radius: 24px 24px 0 0; border-bottom: 0;
    padding: 0 max(18px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)); overscroll-behavior: contain; }
  dialog.glas[open] { animation: blatt-auf .34s cubic-bezier(.22, .9, .3, 1); }
  dialog.glas .griff { display: block; position: relative; height: 30px; margin: 0 -18px 6px; cursor: grab; touch-action: none; }
  dialog.glas .griff::before { content: ""; position: absolute; left: 50%; top: 11px; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: var(--muted); opacity: .55; }
  dialog.glas.zieht { transition: none; animation: none; }
  dialog.glas.zieht .griff { cursor: grabbing; }
  dialog.glas .schliessen { top: 22px; right: max(14px, env(safe-area-inset-right, 0px)); width: 44px; height: 44px; }
  dialog.glas h2 { font-size: 23px; margin: 4px 52px 16px 0; }
}
@keyframes blatt-auf { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { dialog.glas[open], dialog.glas[open]::backdrop { animation: none; } }
/* Kontaktformular */
.formular { display: grid; gap: 14px; max-width: 640px; }
.formular .zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.formular label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.formular label small { font-weight: 400; color: var(--muted); }
.formular input, .formular textarea, .formular select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px; width: 100%; box-shadow: var(--feld-innen); transition: border-color .15s ease, box-shadow .15s ease; }
.formular textarea { min-height: 160px; resize: vertical; }
.formular input[type=radio], .formular input[type=checkbox] { width: auto; padding: 0; box-shadow: none; accent-color: var(--accent); }
.formular input:focus, .formular textarea:focus, .formular select:focus { outline: none; border-color: var(--accent); box-shadow: var(--feld-innen), 0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent); }
.formular .falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular .fuss-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.formular button { cursor: pointer; font-family: inherit; }
.formular button[disabled] { opacity: .65; cursor: wait; }
.formular .hinweis { color: var(--muted); font-size: 14px; margin: 0; }
.formular .status { margin: 0; font-weight: 600; }
.formular .status.ok { color: var(--accent-ink); }
.formular .status.fehler { color: #c0392b; }
:root[data-theme="dark"] .formular .status.fehler { color: #ff8a7a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .formular .status.fehler { color: #ff8a7a; } }
@media (prefers-reduced-motion: reduce) { .netz .knoten, .netz .welle, .netz .signal { animation: none; } .netz .welle, .netz .signal { opacity: 0; } }

/* Druckansicht: immer hell, ohne Navigation, Figuren, Effekte und Kontakt-Popup; Linkziele ausgeschrieben.
   :root dreifach, damit es auch die Dunkel-Regeln (:root[data-theme="dark"]) überstimmt. */
@media print {
  :root:root:root { --bg: #fff; --bg-2: #eef2f8; --surface: #fff; --ink: #111; --muted: #444; --line: #ccc; --accent: #2563eb; --accent-ink: #1e40af; --accent-soft: #dce7fd; --on-accent: #ffffff;
    --holz: #e9c99b; --holz-2: #dcb683; --rille: #6b3f14; --schatten: none; --schatten-hoch: none; --licht-oben: none; --feld-innen: none; --karte-oben: transparent; color-scheme: light; }
  body { background: #fff; }
  .kopf { position: static; -webkit-backdrop-filter: none; backdrop-filter: none; background: none; }
  .kopf .nav, .sprung, .figur, #kontakt, dialog, .knoepfe, .netz { display: none !important; }
  .held { background: none; }
  .held .wrap { grid-template-columns: 1fr; padding: 12px 0; }
  .einblenden-an .einblenden { opacity: 1; transform: none; }
  .kachel, .kachel:hover { box-shadow: none; transform: none; break-inside: avoid; background: #fff; }
  .kachel::before { display: none; }
  .kachel-link::after { content: " (" attr(href) ")"; position: static; font-weight: 400; color: var(--muted); }
  .kachel .ziel { display: inline; }
  .kachel .ziel svg { display: none; }
  .kachel .nebenziel::after, .kachel p a::after { content: " (" attr(href) ")"; font-weight: 400; color: var(--muted); }
  .fuss nav a[href^="http"]::after { content: " (" attr(href) ")"; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Feinschliff 2026-10-22 („Premium“, Bernstein bleibt): ruhigere Typografie, Auftritt der Startseite beim Laden,
   Messpapier-Raster im Kopfbereich, Kopfzeile wird beim Scrollen fester, Kontakt als Fläche, Hell/Dunkel mit Übergang.
   Alles über die Variablen oben; bei „Bewegung reduzieren“ ohne Bewegung. */
:root { --weich: cubic-bezier(.2, .7, .2, 1); --raster: color-mix(in srgb, var(--accent) 16%, transparent); }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--ink); }
html { scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; accent-color: var(--accent); scroll-padding-top: 76px; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
body { font-feature-settings: "kern", "calt"; text-rendering: optimizeLegibility; }
/* Kopfzeile: oben fast durchsichtig, beim Scrollen fester mit feinem Schatten (nur wo Scroll-Animationen gehen) */
@supports (animation-timeline: scroll()) {
  .kopf { animation: kopf-fest linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
  @keyframes kopf-fest { from { box-shadow: none; border-bottom-color: transparent; } to { box-shadow: 0 6px 24px -12px rgba(0, 0, 0, .25); } }
}
.nav a { transition: background-color .2s ease, color .2s ease; }
.thema { transition: border-color .2s ease, transform .2s var(--weich); }
.thema:active { transform: scale(.94); }
.thema svg { transition: transform .5s var(--weich); }
.thema:hover svg { transform: rotate(25deg); }
/* Kopfbereich: Messpapier-Raster, das nach außen ausläuft */
.held::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--raster) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, var(--raster) 1px, transparent 1px) 0 0 / 28px 28px;
  -webkit-mask: radial-gradient(70% 80% at 72% 40%, #000, transparent 75%); mask: radial-gradient(70% 80% at 72% 40%, #000, transparent 75%); opacity: .55; }
.held .wrap { position: relative; }
div.held .wrap { padding: 72px 0 56px; }
div.held h1 { font-size: clamp(38px, 6vw, 64px); letter-spacing: -0.035em; font-weight: 800; }
.kicker { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); background: color-mix(in srgb, var(--surface) 70%, transparent); letter-spacing: .1em; font-size: 12px; }
.kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.lead { line-height: 1.55; }
/* Auftritt beim Laden: Text staffelt sich herein, das Netz zieht seine Kanten */
@media (prefers-reduced-motion: no-preference) {
  div.held .kicker, div.held h1, div.held .lead, div.held .knoepfe { animation: auftritt .8s var(--weich) both; }
  div.held h1 { animation-delay: .06s; }
  div.held .lead { animation-delay: .14s; }
  div.held .knoepfe { animation-delay: .22s; }
  div.held .netz { animation: auftritt-netz 1.1s var(--weich) .1s both; }
  div.held .netz .kante:not(.aktiv) { stroke-dasharray: 1; animation: netz-ziehen .9s var(--weich) both; }
  div.held .netz .kante:nth-of-type(7) { animation-delay: .25s; } div.held .netz .kante:nth-of-type(8) { animation-delay: .32s; }
  div.held .netz .kante:nth-of-type(9) { animation-delay: .39s; } div.held .netz .kante:nth-of-type(10) { animation-delay: .46s; }
  div.held .netz .kante:nth-of-type(6) { animation-delay: .18s; }
}
@keyframes auftritt { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } }
@keyframes auftritt-netz { from { opacity: 0; scale: .9; } }
/* Netz ruht, solange es nicht im Bild ist (spart Rechenzeit, site.js setzt .ruht) */
.netz.ruht * { animation-play-state: paused !important; }
/* Handy: Netz kleiner, damit die Projekte früher ins Bild kommen */
@media (max-width: 860px) {
  div.held .wrap { padding: 40px 0 8px; gap: 8px; }
  div.held .netz { max-width: 340px; margin-top: -4px; }
}
@media (max-width: 480px) { div.held .netz { max-width: 270px; } }
/* Abschnitte: mehr Luft am PC, weniger am Handy */
section { padding: clamp(40px, 6vw, 64px) 0; }
h2 { font-weight: 800; letter-spacing: -0.025em; }
/* Kacheln: weichere Bewegung, Druckgefühl, Symbol mit Lichtkante */
.kachel { transition: transform .35s var(--weich), border-color .25s ease, box-shadow .35s var(--weich); }
.kachel:hover, .kachel:focus-within { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 70%, var(--line)); }
.kachel:active { transform: translateY(-1px) scale(.995); }
.kachel .icon { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 60%, white), var(--accent-soft)); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); transition: transform .35s var(--weich); }
:root[data-theme="dark"] .kachel .icon { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 80%, white 6%), var(--accent-soft)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kachel .icon { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 80%, white 6%), var(--accent-soft)); } }
.kachel:hover .icon { transform: translateY(-1px) rotate(-4deg); }
.kachel .ziel svg { transition: transform .3s var(--weich); }
.bild svg { transition: transform .6s var(--weich); }
.btn { transition: transform .25s var(--weich), box-shadow .25s var(--weich), background-color .2s ease; }
.btn:active, .btn.primaer:active { transform: translateY(0) scale(.98); }
.btn.primaer svg { transition: transform .3s var(--weich); }
.btn.primaer:hover svg { transform: translateX(3px); }
.alle-neu a svg { transition: transform .3s var(--weich); }
.alle-neu a:hover svg { transform: translateX(3px); }
/* Zahlen */
.kennzahl strong { font-weight: 800; letter-spacing: -0.03em; }
/* Kontakt als eigene Fläche statt allein stehendem Knopf */
.kontakt-flaeche { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px);
  background: radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--accent-soft) 85%, transparent), transparent 60%), linear-gradient(180deg, var(--karte-oben), transparent 55%) var(--surface); box-shadow: var(--schatten); }
.kontakt-flaeche h2 { margin-bottom: 6px; }
.kontakt-flaeche .untertitel { margin: 0; }
.kontakt-flaeche p:last-child { margin: 0; }
/* Fuß mit feiner Linie */
.fuss .wrap { border-top: 1px solid var(--line); padding-top: 24px; }
.fuss a { transition: color .2s ease; }
/* Hell/Dunkel: Kreis wächst vom Knopf aus (View Transitions, sonst sofort) */
:root.thema-wechsel::view-transition-old(root), :root.thema-wechsel::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) { .kachel:hover .icon, .thema:hover svg, .btn.primaer:hover svg, .alle-neu a:hover svg { transform: none; } }
@media print { .held::before { display: none; } .kontakt-flaeche { display: none; } .fuss .wrap { border: 0; } }

/* Mehr Wirkung 2026-10-23 (Thomas: „Viel mehr wow“): Lichtfelder im Kopfbereich, Glanz über der Überschrift, Netz mit Tiefe,
   Glühen und Parallax, Kacheln kippen zur Maus, Glanz über Bildern und Knöpfen, stärkeres Enthüllen beim Scrollen, Lesefortschritt,
   Zahlen im Verlauf, umlaufende Lichtkante am Kontakt. Nur transform/opacity, Netz und Lichter ruhen außerhalb des Bildes;
   bei „Bewegung reduzieren“ steht alles still. Farben über Variablen (--licht-1 Türkis, --licht-2 Violett). */
:root { --licht-1: #0891b2; --licht-2: #7c3aed; --licht-staerke: .5; }
:root[data-theme="dark"] { --licht-1: #22d3ee; --licht-2: #a78bfa; --licht-staerke: .7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --licht-1: #22d3ee; --licht-2: #a78bfa; --licht-staerke: .7; } }
@property --winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
/* Lichtfelder: drei weiche Farbflächen ziehen langsam, dazu ein Schein, der der Maus folgt (site.js setzt --hx/--hy) */
div.held { isolation: isolate; }
.licht { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent); }
.licht span { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: var(--licht-staerke); }
.licht span:nth-child(1) { left: 40%; top: -55%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 45%, transparent), transparent); animation: licht-a 24s ease-in-out infinite alternate; }
.licht span:nth-child(2) { left: -30%; top: -10%; background: radial-gradient(closest-side, color-mix(in srgb, var(--licht-1) 30%, transparent), transparent); animation: licht-b 28s ease-in-out infinite alternate; }
.licht span:nth-child(3) { left: 15%; top: 20%; background: radial-gradient(closest-side, color-mix(in srgb, var(--licht-2) 22%, transparent), transparent); animation: licht-c 32s ease-in-out infinite alternate; }
.licht::after { content: ""; position: absolute; inset: 0; opacity: var(--spot, 0); transition: opacity .6s ease;
  background: radial-gradient(420px circle at var(--hx, 70%) var(--hy, 40%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
@keyframes licht-a { to { transform: translate(-18%, 22%) scale(1.15); } }
@keyframes licht-b { to { transform: translate(25%, 10%) scale(.9); } }
@keyframes licht-c { to { transform: translate(-10%, -20%) scale(1.2); } }
/* Überschrift: Verlauf mit Glanz, der ab und zu darüberstreicht (große Schrift, Kontrast überall mindestens 3 : 1) */
div.held h1 { background: linear-gradient(100deg, var(--ink) 0 38%, var(--accent) 46%, var(--licht-1) 52%, var(--ink) 60% 100%) 100% 0 / 260% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  div.held h1 { animation: auftritt .8s var(--weich) .06s both, glanz 9s ease-in-out 1.2s infinite; }
}
@keyframes glanz { 0% { background-position: 100% 0; } 22%, 100% { background-position: 0 0; } }
@media (forced-colors: active) { div.held h1 { color: CanvasText; background: none; } }
/* Netz: Bühne mit Tiefe; kippt zur Maus (--px/--py), schwebt beim Scrollen langsamer davon, Mittelpunkt und Knoten glühen */
.netz-buehne { justify-self: center; width: 100%; max-width: 460px; perspective: 900px; }
div.held .netz { margin-inline: auto; transform: rotateX(calc(var(--py, 0) * -9deg)) rotateY(calc(var(--px, 0) * 11deg)); transition: transform .5s var(--weich); transform-style: preserve-3d; }
.netz .nabe { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 70%, transparent)); }
.netz .knoten circle:first-child { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 45%, transparent)); }
.netz .signal { filter: drop-shadow(0 0 5px var(--licht-1)); }
div.held .netz .kante { stroke: url(#netz-verlauf); }
#netz-verlauf stop:first-child { stop-color: var(--accent); }
#netz-verlauf stop:last-child { stop-color: var(--licht-1); }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .netz-buehne { animation: schweben linear both; animation-timeline: scroll(root); animation-range: 0 640px; }
    div.held .wrap > div:first-child { animation: abheben linear both; animation-timeline: scroll(root); animation-range: 0 640px; }
  }
  @keyframes schweben { to { translate: 0 90px; scale: .92; } }
  @keyframes abheben { to { translate: 0 -40px; } }
  /* Lesefortschritt als feine Linie unter der Kopfzeile */
  .kopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: 0 50%; transform: scaleX(0);
    background: linear-gradient(90deg, var(--accent), var(--licht-1), var(--licht-2)); animation: fortschritt linear both; animation-timeline: scroll(root); }
  @keyframes fortschritt { to { transform: scaleX(1); } }
}
/* Kacheln: kippen zur Maus (site.js setzt --rx/--ry), Glanz streicht über das Bild */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .kachel:hover { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); transition: transform .15s ease-out, border-color .25s ease, box-shadow .35s var(--weich); }
  .bild { position: relative; }
  .bild::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%); background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); }
  .kachel:hover .bild::after { transform: translateX(120%); transition: transform .9s var(--weich); }
  .btn.primaer { position: relative; overflow: hidden; isolation: isolate; }
  .btn.primaer::after { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-120%); background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); }
  .btn.primaer:hover::after { transform: translateX(120%); transition: transform .7s var(--weich); }
}
.kachel:hover { box-shadow: var(--schatten-hoch), 0 24px 60px -24px color-mix(in srgb, var(--accent) 55%, transparent); }
/* Abschnittsüberschriften mit kurzer Lichtlinie */
main section h2 { background: linear-gradient(90deg, var(--accent), var(--licht-1)) 0 100% / 44px 3px no-repeat; padding-bottom: 12px; }
/* Stärkeres Enthüllen beim Scrollen */
.einblenden-an .einblenden { transform: translateY(32px); filter: blur(6px); transition: opacity .7s ease, transform .8s var(--weich), filter .7s ease; transition-delay: calc(var(--i, 0) * 90ms); }
.einblenden-an .einblenden.sichtbar { filter: none; }
/* Zahlen im Verlauf mit Schein */
.kennzahl strong { background: linear-gradient(120deg, var(--accent-ink), var(--licht-1)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kennzahl::after { background: linear-gradient(90deg, var(--accent), var(--licht-1), var(--licht-2)); opacity: .9; }
.kennzahl { transition: transform .35s var(--weich), box-shadow .35s var(--weich); }
.kennzahl:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch), 0 20px 50px -24px color-mix(in srgb, var(--accent) 55%, transparent); }
@media (forced-colors: active) { .kennzahl strong { color: CanvasText; background: none; } }
/* Kontakt: Lichtkante läuft um die Fläche */
.kontakt-flaeche { position: relative; isolation: isolate; }
.kontakt-flaeche::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--winkel), transparent 0 60%, var(--accent) 75%, var(--licht-1) 85%, transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
@media (prefers-reduced-motion: no-preference) { .kontakt-flaeche::before { animation: umlauf 6s linear infinite; } }
@keyframes umlauf { to { --winkel: 360deg; } }
.held.ruht .licht span, .held.ruht .licht::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .licht span { animation: none; }
  div.held .netz { transform: none; }
  .einblenden-an .einblenden { filter: none; }
  .kennzahl:hover { transform: none; }
}
@media print { .licht, .kopf::after, .kontakt-flaeche::before { display: none; } div.held h1, .kennzahl strong { color: var(--ink); background: none; } }