/* =====================================================================
   GFK-Formenbau — Composite-Wissens- & Trend-Hub
   Graphit + Elektroblau · Space Grotesk + Inter + Mono · Blueprint/Hex
   ===================================================================== */
:root {
    color-scheme: dark;
    --max: 1200px;
    --gutter: clamp(1.1rem, 4vw, 2.5rem);

    --fs-300: clamp(0.85rem, 0.82rem + 0.15vw, 0.95rem);
    --fs-400: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
    --fs-500: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
    --fs-600: clamp(1.4rem, 1.15rem + 1vw, 2rem);
    --fs-700: clamp(2rem, 1.5rem + 2.4vw, 3.2rem);
    --fs-900: clamp(2.8rem, 1.6rem + 5.6vw, 6.4rem);

    --bg:        #0A0E13;
    --bg-2:      #0D1218;
    --surface:   #111922;
    --surface-2: #16212C;
    --border:    rgba(120, 160, 200, 0.14);
    --border-2:  rgba(120, 170, 220, 0.28);
    --field-border: rgba(120, 170, 220, 0.62); /* kraeftiger Rahmen fuer Formular-Controls — >=3:1 Nicht-Text-Kontrast (WCAG 1.4.11) */
    --text:      #E6EDF3;
    --text-soft: #B6C6D4;
    --muted:     #7E94A6;

    --accent:   #38BDF8;
    --accent-2: #2563EB;
    --accent-3: #22D3EE;
    --amber:    #F59E0B;
    --green:    #34D399;
    --violet:   #818CF8;
    --grad: linear-gradient(110deg, #22D3EE, #38BDF8 50%, #2563EB);
    --glass: rgba(13, 18, 24, 0.6);
    --shadow: 0 24px 60px -26px rgba(0, 0, 0, 0.8);
    --glow: color-mix(in oklab, var(--accent) 60%, transparent);

    --radius: 14px;
    --on-accent: #04121e;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* Hover-Lift-Skala: Karten heben kräftig, dekorative Figuren dezent */
    --lift-card: -5px;
    --lift-subtle: -2px;
    --mono: ui-monospace, "Cascadia Code", "Consolas", monospace; /* bewusst System-Mono-Stack (kein self-hosted Font) — nur dekorative Akzent-Labels/Ziffern (Kicker, Badges, HUD, Tabellenkoepfe) */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: var(--fs-400);
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: "Space Grotesk", "Inter", sans-serif; font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }
img { max-width: 100%; display: block; height: auto; }
a { color: var(--accent); text-decoration: none; }
.mono { font-family: var(--mono); }
::selection { background: color-mix(in oklab, var(--accent) 38%, transparent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
em { font-style: normal; color: var(--accent); }

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.gradient-text { background: var(--grad); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 8s linear infinite; }
@keyframes shimmer { to { background-position: 200% center; } }
@media (prefers-reduced-motion: reduce) { .gradient-text { animation: none; } }


.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 1000; background: var(--accent); color: var(--on-accent); padding: 0.7rem 1.1rem; border-radius: 0 0 10px 10px; font-weight: 700; transition: top 0.25s var(--ease); }
.skip-link:focus { top: 0; }

/* ---------- Backgrounds: blueprint grid + aurora ---------- */
.grid-bg {
    position: fixed; inset: 0; z-index: -3; pointer-events: none;
    background-image:
        linear-gradient(rgba(120,170,220,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120,170,220,0.06) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 30%, transparent 85%);
    mask-image: radial-gradient(circle at 50% 30%, #000 30%, transparent 85%);
}
.aurora {
    position: fixed; inset: -20vmax; z-index: -2; pointer-events: none;
    filter: blur(80px) saturate(135%); opacity: 0.5;
    background:
        radial-gradient(36vmax 36vmax at 14% 8%, color-mix(in oklab, var(--accent-2) 55%, transparent), transparent 60%),
        radial-gradient(32vmax 32vmax at 88% 16%, color-mix(in oklab, var(--accent) 45%, transparent), transparent 60%),
        radial-gradient(38vmax 38vmax at 80% 90%, color-mix(in oklab, var(--accent-3) 35%, transparent), transparent 62%);
    animation: drift 32s ease-in-out infinite alternate;
}
@keyframes drift { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(2%, -2%, 0) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .aurora { animation: none; } }

.cursor-glow { position: fixed; top: 0; left: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; pointer-events: none; z-index: 0; opacity: 0; background: radial-gradient(circle, var(--glow), transparent 65%); mix-blend-mode: screen; transition: opacity 0.4s var(--ease); transform: translate3d(var(--x,50vw), var(--y,50vh), 0); will-change: transform; }
body.cursor-active .cursor-glow { opacity: 0.45; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .cursor-glow { display: none; } }

.progress-bar { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 200; background: var(--grad); transform: scaleX(var(--sp,0)); transform-origin: left center; }
@supports (animation-timeline: scroll()) { .progress-bar { animation: grow linear; animation-timeline: scroll(root); } @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(14px) saturate(150%); background: var(--glass); border-bottom: 1px solid transparent; transition: border-color 0.4s var(--ease); }
body.scrolled .site-header { border-bottom-color: var(--border); }
.nav-wrap { display: flex; align-items: center; gap: clamp(0.6rem, 2vw, 1.2rem); height: 70px; }
.logo { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text); flex: none; }
.primary-nav { margin-left: auto; }
.logo-text { font-family: var(--mono); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.08em; }
.primary-nav ul { list-style: none; display: flex; gap: clamp(0.4rem, 2vw, 1.6rem); }
.primary-nav a { position: relative; color: var(--text-soft); font-weight: 500; font-size: 0.95rem; padding: 0.4rem 0.2rem; transition: color 0.25s var(--ease); }
.primary-nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.primary-nav a:hover, .primary-nav a.active { color: var(--text); }
.primary-nav a:hover::after, .primary-nav a.active::after { transform: scaleX(1); }
.hamburger { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; place-items: center; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; }
.hamburger span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.85rem 1.6rem; border-radius: 8px; font-weight: 600; font-size: 0.98rem; cursor: pointer; border: 1px solid transparent; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease); }
.btn-primary { color: var(--on-accent); background: var(--grad); background-size: 160% auto; box-shadow: 0 12px 30px -12px var(--glow); }
.btn-primary:hover { transform: translateY(-3px); background-position: 65% center; box-shadow: 0 20px 40px -14px var(--glow); }
.btn-ghost { color: var(--text); border-color: var(--border-2); background: color-mix(in oklab, var(--surface) 50%, transparent); }
.btn-ghost:hover { transform: translateY(-3px); border-color: var(--accent); }
.btn-arrow { transition: transform 0.3s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ---------- Sections ---------- */
.section { padding-block: clamp(4rem, 10vw, 8rem); position: relative; }
.section-kicker { font-size: 0.78rem; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 0.9rem; }
.section-head { max-width: 52ch; margin-bottom: clamp(2rem, 6vw, 3.5rem); }
.section-head h1, .section-head h2 { font-size: var(--fs-700); }
.section-sub { color: var(--muted); margin-top: 0.9rem; font-size: var(--fs-500); }

/* ---------- Hero ---------- */
.hero { min-height: 100svh; display: flex; align-items: center; padding-block: clamp(6rem, 12vh, 9rem) 4rem; }
.hero-eyebrow { font-size: var(--fs-300); letter-spacing: 0.08em; color: var(--accent); margin-bottom: 1.4rem; }
.hero-title { font-size: var(--fs-900); font-weight: 700; margin-bottom: 1.2rem; max-width: 16ch; }
.hero-lead { max-width: 60ch; color: var(--text-soft); font-size: var(--fs-500); margin-bottom: 2.2rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: clamp(3rem, 8vw, 5rem); }
.hud { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.hud li { display: flex; flex-direction: column; gap: 0.3rem; }
.hud-k { font-size: clamp(1.6rem, 1rem + 2.4vw, 2.6rem); font-weight: 700; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hud-v { font-size: var(--fs-300); color: var(--muted); }

/* ---------- Trends feed ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.chip { font-family: var(--mono); font-size: 0.8rem; color: var(--text-soft); background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 0.45rem 0.95rem; cursor: pointer; transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease); }
.chip:hover { border-color: var(--border-2); color: var(--text); }
.chip.is-active { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: clamp(1rem, 2.5vw, 1.5rem); }
.post { display: flex; flex-direction: column; gap: 0.7rem; padding: clamp(1.4rem, 3vw, 1.8rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: transform 0.35s var(--ease), border-color 0.35s var(--ease); }
.post:hover { transform: translateY(var(--lift-card)); border-color: var(--border-2); }
.post-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.74rem; }
.post-meta time { color: var(--muted); }
.cat { padding: 0.18rem 0.55rem; border-radius: 5px; font-weight: 700; letter-spacing: 0.02em; }
.cat-mat { color: var(--accent); background: color-mix(in oklab, var(--accent) 16%, transparent); }
.cat-proc { color: var(--accent-3); background: color-mix(in oklab, var(--accent-3) 16%, transparent); }
.cat-mach { color: #9aa6fc; background: color-mix(in oklab, var(--violet) 18%, transparent); }
.cat-sus { color: var(--green); background: color-mix(in oklab, var(--green) 16%, transparent); }
.cat-res { color: var(--amber); background: color-mix(in oklab, var(--amber) 16%, transparent); }
.cat-base { color: #aab8d0; background: color-mix(in oklab, #aab8d0 16%, transparent); }
.cat-fut { color: #f0abfc; background: color-mix(in oklab, #f0abfc 16%, transparent); }
.cat-prax { color: var(--green); background: color-mix(in oklab, var(--green) 16%, transparent); }
.post h3 { font-size: 1.15rem; }
.post p { color: var(--muted); font-size: 0.95rem; flex: 1; }
.post-more { font-family: var(--mono); font-size: 0.82rem; color: var(--accent); }

/* ---------- Bereiche (hex motif cards) ---------- */
.hex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(0.9rem, 2.5vw, 1.4rem); }
.hexcard { position: relative; padding: 1.6rem 1.4rem 1.4rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform 0.35s var(--ease), border-color 0.35s var(--ease); }
.hexcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.hexcard:hover { transform: translateY(var(--lift-card)); border-color: var(--border-2); }
.hexcard:hover::before { transform: scaleX(1); }
.hexcard-no { display: grid; place-items: center; width: 42px; height: 46px; margin-bottom: 0.9rem; font-size: 0.85rem; font-weight: 700; color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.hexcard h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.hexcard p { color: var(--muted); font-size: 0.9rem; }

/* ---------- Verfahren ---------- */
.proc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(0.9rem, 2.5vw, 1.4rem); counter-reset: p; }
.proc { position: relative; padding: clamp(1.4rem, 3vw, 1.8rem); background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--border); border-radius: var(--radius); transition: transform 0.35s var(--ease), border-color 0.35s var(--ease); }
.proc::before { counter-increment: p; content: "0" counter(p); position: absolute; top: 1rem; right: 1.2rem; font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.proc:hover { transform: translateY(var(--lift-card)); border-color: var(--border-2); }
.proc h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.proc p { color: var(--muted); font-size: 0.95rem; }

/* ---------- Anwendungen ---------- */
.app-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.9rem, 2.5vw, 1.4rem); }
@media (min-width: 700px) { .app-grid { grid-template-columns: repeat(4, 1fr); } }
.app { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.4rem, 3vw, 1.8rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: transform 0.35s var(--ease), border-color 0.35s var(--ease); }
a.app:hover h3 { color: var(--accent); }
.branch-head .app-ico { margin-bottom: 1.1rem; }
a.hexcard, a.proc { color: inherit; text-decoration: none; }
a.hexcard:hover h3, a.proc:hover h3 { color: var(--accent); }
.app:hover { transform: translateY(var(--lift-card)); border-color: var(--accent); }
.app-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in oklab, var(--accent) 12%, transparent); }
.app-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.app h3 { font-size: 1.02rem; }

/* ---------- Zukunft ---------- */
.future-list { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--border); }
.future-list li { border-bottom: 1px solid var(--border); }
.future-list a.future-link { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; padding: clamp(1.3rem, 3vw, 1.8rem) 0; color: inherit; text-decoration: none; transition: padding-left 0.3s var(--ease); }
.future-list a.future-link:hover { padding-left: 0.7rem; }
.future-list a.future-link:hover h3 { color: var(--accent); }
.future-lead { display: block; color: inherit; text-decoration: none; margin-bottom: 2.2rem; padding: clamp(1.5rem, 4vw, 2.4rem); border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 12%, var(--surface)), var(--surface)); transition: transform 0.35s var(--ease), border-color 0.35s var(--ease); }
.future-lead:hover { transform: translateY(-3px); border-color: var(--accent); }
.future-lead-kicker { color: var(--accent); margin-bottom: 0.5rem; }
.future-lead h3 { font-size: clamp(1.3rem, 3vw, 1.85rem); margin-bottom: 0.6rem; }
.future-lead > p { color: var(--muted); max-width: 72ch; margin-bottom: 0.9rem; }
.fno { color: var(--accent); font-size: 1.3rem; }
.future-list h3 { font-size: var(--fs-500); margin-bottom: 0.3rem; }
.future-list p { color: var(--muted); max-width: 70ch; }

/* ---------- Buch ---------- */
.book-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.book-side h2 { font-size: var(--fs-700); margin-bottom: 0.6rem; }
.book-sub { color: var(--accent); font-weight: 600; margin-bottom: 1rem; }
.book-side > p { color: var(--text-soft); margin-bottom: 1.6rem; max-width: 48ch; }
.book-side > p.section-kicker { color: var(--accent); margin-bottom: 0.9rem; }
.book-toc { list-style: none; display: grid; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 1.4rem; font-size: 0.92rem; color: var(--text-soft); }
.book-toc li { display: flex; gap: 1rem; align-items: baseline; padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.book-toc li:last-child { border-bottom: none; }
.book-toc li span { color: var(--accent); font-weight: 700; min-width: 4ch; text-align: right; }

/* ---------- Kontakt + Footer ---------- */
.kontakt-inner { max-width: 720px; text-align: center; margin-inline: auto; }
.kontakt-inner h2 { font-size: var(--fs-700); margin-bottom: 1rem; }
.kontakt-lead { color: var(--muted); font-size: var(--fs-500); margin-bottom: 2rem; }
.kontakt-actions { display: flex; justify-content: center; margin-bottom: 1.4rem; }
.site-footer { border-top: 1px solid var(--border); padding-block: 2.2rem; margin-top: 2rem; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; align-items: center; justify-content: space-between; color: var(--muted); font-size: 0.9rem; }
.footer-inner .mono, .footer-legal { font-size: 0.85rem; }
.footer-cross { flex-basis: 100%; font-size: 0.82rem; color: var(--muted); margin-top: 0.2rem; }
.footer-cross a { color: var(--muted); }
.footer-note { flex-basis: 100%; font-size: 0.78rem; line-height: 1.55; color: var(--muted); max-width: 94ch; }
.footer-note a { color: var(--muted); text-decoration: underline; }

/* ---------- Reveal ---------- */
/* Inhalt nur verstecken, wenn JS laeuft — scripting:enabled matcht genau dann,
   wenn script.js die .reveal spaeter wieder einblendet. Ohne JS bleibt der Inhalt
   (inkl. H1) sichtbar statt dauerhaft opacity:0. */
.reveal { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
@media (scripting: enabled) { .reveal { opacity: 0; transform: translateY(30px); } }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .hero { min-height: auto; padding-block: clamp(5rem, 14vh, 7rem) 3.5rem; }
    .hud { grid-template-columns: repeat(2, 1fr); row-gap: 1.6rem; }
    .book-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .hamburger { display: grid; }
    /* visibility:hidden nimmt die geschlossenen Nav-Links aus Tab-Reihenfolge/AT (verzoegert bis nach dem Slide-Up); Animation bleibt */
    .primary-nav { position: fixed; inset: 70px 0 auto 0; background: var(--bg-2); border-bottom: 1px solid var(--border); max-height: 0; overflow: hidden; visibility: hidden; transition: max-height 0.45s var(--ease), visibility 0s 0.45s; }
    .primary-nav.open { max-height: 70svh; visibility: visible; transition: max-height 0.45s var(--ease); }
    .primary-nav ul { flex-direction: column; padding: 1rem var(--gutter) 1.6rem; gap: 0.3rem; }
    .primary-nav a { display: block; padding: 0.8rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--border); }
    .footer-inner { flex-direction: column; text-align: center; }
}

/* ---------- Dossier-Karten als Links + Kategorie Anwendungen ---------- */
.post { color: inherit; text-decoration: none; }
.cat-app { color: #5eead4; background: color-mix(in oklab, #5eead4 16%, transparent); }
.inline-link { color: var(--accent); font-weight: 600; white-space: nowrap; }

/* ---------- Dossier-Suche ---------- */
.dossier-search { position: relative; margin-top: 1.5rem; max-width: 460px; }
.ds-icon { position: absolute; left: 0.95rem; top: 0.95rem; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; transition: stroke 0.25s var(--ease); }
.ds-input { width: 100%; font-family: var(--mono); font-size: 0.9rem; color: var(--text); background: var(--surface); border: 1px solid var(--field-border); border-radius: 9px; padding: 0.72rem 0.95rem 0.72rem 2.6rem; transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.ds-input::placeholder { color: var(--muted); }
.ds-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.ds-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }
.dossier-search:focus-within .ds-icon { stroke: var(--accent); }
.ds-results { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 0.5rem); display: grid; gap: 0.25rem; padding: 0.4rem; background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px; box-shadow: var(--shadow); max-height: min(60vh, 430px); overflow-y: auto; }
.ds-results[hidden] { display: none; }
.ds-result { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.7rem; border-radius: 8px; color: var(--text); transition: background 0.18s var(--ease); }
.ds-result .cat { flex: none; font-family: var(--mono); font-size: 0.66rem; }
.ds-r-title { font-size: 0.92rem; line-height: 1.3; }
.ds-result:hover, .ds-result.is-active { background: var(--surface-2); }
.ds-result:hover .ds-r-title, .ds-result.is-active .ds-r-title { color: var(--accent); }
.ds-empty { padding: 0.8rem 0.7rem; color: var(--muted); font-size: 0.88rem; }
@media (max-width: 540px) { .dossier-search { max-width: none; } }

/* Such-Button im Header + Command-Palette-Overlay (⌘K / Strg+K / „/") */
.search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-soft); cursor: pointer; transition: border-color 0.25s var(--ease), color 0.25s var(--ease); }
.search-toggle svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.search-toggle:hover { border-color: var(--accent); color: var(--text); }

.search-overlay { position: fixed; inset: 0; z-index: 300; display: flex; justify-content: center; align-items: flex-start; padding: clamp(1rem, 9vh, 8rem) 1rem 1.5rem; background: rgba(5, 8, 12, 0.62); backdrop-filter: blur(7px) saturate(120%); -webkit-backdrop-filter: blur(7px) saturate(120%); animation: search-fade 0.18s var(--ease); }
.search-overlay[hidden] { display: none; }
@keyframes search-fade { from { opacity: 0; } to { opacity: 1; } }
.search-modal { width: min(620px, 100%); animation: search-pop 0.22s var(--ease); }
@keyframes search-pop { from { opacity: 0; transform: translateY(-10px) scale(0.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .search-overlay, .search-modal { animation: none; } }

.search-modal .dossier-search { position: relative; margin: 0; max-width: none; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.search-modal .ds-icon { top: 1.15rem; left: 1.1rem; }
.search-modal .ds-input { font-size: 1.05rem; background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 1.05rem 4.2rem 1.05rem 3rem; }
.search-modal .ds-input:focus { box-shadow: none; }
.search-close { position: absolute; right: 0.85rem; top: 0.85rem; font-family: var(--mono); font-size: 0.7rem; color: var(--muted); background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.55rem; cursor: pointer; transition: border-color 0.2s var(--ease), color 0.2s var(--ease); }
.search-close:hover { border-color: var(--accent); color: var(--text); }
.search-modal .ds-results { position: static; box-shadow: none; border: 0; border-radius: 0; max-height: min(56vh, 440px); padding: 0.4rem 0.5rem 0.6rem; background: transparent; }
body.search-open { overflow: hidden; }

@media (max-width: 720px) {
    .nav-wrap .logo-text { display: none; }
    .nav-wrap .search-toggle { margin-left: auto; }
}

/* ---------- Tags ---------- */
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.tags li { font-size: 0.78rem; padding: 0.3rem 0.7rem; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-soft); }

/* ---------- Themen-Hub-Links (Vertiefen) – Chip-Optik wie .tags, aber klickbar ---------- */
.article-hubs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-bottom: 1rem; }
.article-hubs .hub-k { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); }
.article-hubs ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0; margin: 0; }
.article-hubs a { display: inline-block; font-size: 0.78rem; padding: 0.3rem 0.7rem; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-2); color: var(--accent); text-decoration: none; transition: border-color 0.3s var(--ease), color 0.3s var(--ease); }
.article-hubs a:hover, .article-hubs a:focus-visible { border-color: var(--accent); }

/* ---------- Artikel / Dossier ---------- */
.legal-back { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); font-weight: 500; font-family: var(--mono); font-size: 0.85rem; margin-bottom: 1.6rem; }
.legal-back:hover { color: var(--accent); }
.article { padding-block: clamp(2.5rem, 7vw, 5rem); }
.article-wrap { max-width: 760px; margin-inline: auto; }

.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); margin-bottom: 1.3rem; }
.article-meta .cat { padding: 0.2rem 0.6rem; border-radius: 6px; font-weight: 700; }
.article h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 1.2rem; }
.article-lead { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem); line-height: 1.55; color: var(--text); padding-bottom: 2rem; margin-bottom: 2.6rem; border-bottom: 1px solid var(--border); }

.article-body { font-size: 1.06rem; line-height: 1.75; }
.article-body > p { color: var(--text-soft); margin-bottom: 1.3rem; }
.article-body > *:first-child { margin-top: 0; }
.article-body h2 { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem); line-height: 1.2; margin: 2.9rem 0 1rem; }
.article-body h2::before { content: ""; display: block; width: 40px; height: 3px; border-radius: 2px; background: var(--grad); margin-bottom: 0.95rem; }

.d-list { list-style: none; padding-left: 0; margin: 0 0 1.5rem; display: grid; gap: 0.7rem; }
.d-list li { position: relative; padding-left: 1.6rem; color: var(--text-soft); }
.d-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); }

.d-steps { list-style: none; counter-reset: s; padding-left: 0; margin: 0 0 1.5rem; display: grid; gap: 0.9rem; }
.d-steps li { position: relative; padding-left: 3rem; color: var(--text-soft); min-height: 2rem; display: block; padding-top: 0.2rem; }
.d-steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 9px; font-family: var(--mono); font-size: 0.85rem; font-weight: 700; color: var(--on-accent); background: var(--grad); }

.d-callout { margin: 2.2rem 0; padding: 1.5rem 1.7rem; border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--border)); background: color-mix(in oklab, var(--accent) 8%, var(--surface)); border-radius: var(--radius); position: relative; overflow: hidden; }
.d-callout::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--grad); }
.d-callout :is(h2, h3) { font-size: 1.1rem; color: var(--accent); margin: 0 0 0.5rem 0.4rem; }
.d-callout p { color: var(--text-soft); padding-left: 0.4rem; }

.article-tags { margin-top: 2.6rem; }
.article-sources { margin-top: 2.6rem; border-top: 1px solid var(--border); padding-top: 1.6rem; }
.article-sources h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 1rem; }
.article-sources ul { list-style: none; display: grid; gap: 0.6rem; }
.article-sources li { position: relative; padding-left: 1.4rem; transition: padding-left 0.3s var(--ease); }
.article-sources li::before { content: "\2192"; position: absolute; left: 0; color: var(--accent); font-family: var(--mono); transition: left 0.3s var(--ease); }
.article-sources li:hover { padding-left: 1.65rem; }
.article-sources li:hover::before { left: 0.25rem; }
.article-sources a { color: var(--accent); word-break: break-word; }
@media (prefers-reduced-motion: reduce) {
    .article-sources li, .article-sources li::before { transition: none; }
    .article-sources li:hover { padding-left: 1.4rem; }
    .article-sources li:hover::before { left: 0; }
}

/* --- Praxis-Anleitungen (How-tos) --------------------------------------- */
.praxis-byline { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.6rem; padding: 1rem 1.2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.byline-text { display: flex; flex-direction: column; gap: 0.15rem; }
.byline-name { font-family: "Space Grotesk", "Inter", sans-serif; font-weight: 700; color: var(--text); }
.byline-role { font-size: 0.85rem; color: var(--muted); line-height: 1.45; }
.byline-role a { color: var(--accent); text-decoration: underline; }

.praxis-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0; margin: 0 0 2.4rem; }
.praxis-facts li { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.7rem 1rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.pf-k { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pf-v { font-size: 0.92rem; color: var(--text); }

.praxis-supplies { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; margin-bottom: 1.5rem; }
.supply-col { padding: 1.3rem 1.4rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.supply-col h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--green); margin-bottom: 1rem; }
.supply-col .d-list { margin: 0; }

.praxis-steps { list-style: none; counter-reset: ps; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 1.1rem; }
.praxis-step { position: relative; padding: 1.3rem 1.4rem 1.3rem 3.7rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.praxis-step::before { counter-increment: ps; content: counter(ps); position: absolute; left: 1rem; top: 1.3rem; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 9px; font-family: var(--mono); font-size: 0.9rem; font-weight: 700; color: var(--on-accent); background: var(--grad); }
.praxis-step h3 { font-size: 1.12rem; margin-bottom: 0.45rem; }
.praxis-step > p { color: var(--text-soft); margin: 0; }
.step-detail { list-style: none; margin: 0.85rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.step-detail li { position: relative; padding-left: 1.4rem; color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
.step-detail li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 2px; background: var(--green); transform: rotate(45deg); }

.praxis-mistakes { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.8rem; }
.mistake { padding: 1.1rem 1.3rem; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--amber); border-radius: 10px; }
.mistake-q { display: block; font-weight: 700; color: var(--text); margin-bottom: 0.4rem; }
.mistake-q::before { content: "\2715  "; color: var(--amber); }
.mistake-a { display: block; color: var(--text-soft); font-size: 0.96rem; line-height: 1.65; }
.mistake-a::before { content: "\2192  "; color: var(--green); font-weight: 700; }

.praxis-tip { border-color: color-mix(in oklab, var(--green) 38%, var(--border)); background: color-mix(in oklab, var(--green) 9%, var(--surface)); }
.praxis-tip::before { background: var(--green); }
.praxis-tip h3 { color: var(--green); }

.praxis-book { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.4rem; margin: 2.6rem 0 0; padding: clamp(1.5rem, 4vw, 2.2rem); border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 14%, var(--surface)), var(--surface)); }
.pb-text { flex: 1; min-width: 260px; }
.pb-kicker { color: var(--accent); margin-bottom: 0.5rem; }
.pb-text h3 { font-size: 1.3rem; margin-bottom: 0.6rem; }
.pb-text p { color: var(--text-soft); margin: 0; }
.praxis-book .btn { flex-shrink: 0; }

.praxis-related { margin-top: 2.8rem; }
.praxis-related h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 1.2rem; }

/* Praxis-Bilder: Hero, Schritt-Bild, Galerie (mit Hover-Zoom, sauber geclippt) */
.fig-media { display: block; overflow: hidden; border: 1px solid var(--border); }
.fig-media img { width: 100%; height: auto; display: block; transition: transform 0.6s var(--ease); }
.fig-media video { width: 100%; height: auto; display: block; }
figure:hover > .fig-media img { transform: scale(1.04); }

.praxis-hero { margin: 0 0 2.6rem; }
.praxis-hero .fig-media { border-radius: 16px; box-shadow: var(--shadow); }
.step-figure { margin: 1.1rem 0 0; }
.step-figure .fig-media { border-radius: 10px; }
.step-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1.1rem; }
.step-figs .step-figure { margin: 0; }
@media (max-width: 640px) { .step-figs { grid-template-columns: 1fr; gap: 1rem; } }
.praxis-hero figcaption, .gal-item figcaption { margin-top: 0.7rem; font-size: 0.84rem; color: var(--muted); text-align: center; line-height: 1.45; }
.ai-note { margin: 2.2rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--border); font-size: 0.8rem; font-style: italic; color: var(--muted); line-height: 1.5; }

.praxis-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; margin: 0 0 1.8rem; }
.gal-item { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem; transition: border-color 0.35s var(--ease); }
.gal-item .fig-media { border-radius: 9px; }
.gal-item figcaption { margin: 0.7rem 0 0.1rem; padding: 0 0.3rem; }
.gal-item:hover { border-color: var(--border-2); }
.gal-item:hover > .fig-media img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
    .fig-media img, .gal-item { transition: none; }
    figure:hover > .fig-media img, .gal-item:hover { transform: none; }
    /* Keine Hover-Bewegung bei reduzierter Bewegung – Farbe/Rahmen bleiben erhalten */
    .btn:hover, .btn-primary:hover, .btn-ghost:hover,
    .post:hover, .hexcard:hover, .proc:hover, .app:hover,
    .future-lead:hover { transform: none; }
    .btn:hover .btn-arrow { transform: none; }
    .future-list a.future-link:hover { padding-left: 0; }
}

@media (max-width: 640px) {
    .praxis-supplies { grid-template-columns: 1fr; }
    .praxis-book { flex-direction: column; align-items: flex-start; }
    .praxis-gallery { grid-template-columns: 1fr; }
}

/* Redaktions-/Über-Seite */
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin: 2rem 0 1rem; }
.member { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.4rem; }
.member-photo { width: 100%; max-width: 210px; height: auto; display: block; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 1.1rem; }
.member h3 { font-size: 1.25rem; margin-bottom: 0.25rem; }
.member-role { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--accent); display: block; margin-bottom: 0.85rem; }
.member p { color: var(--text-soft); font-size: 0.96rem; line-height: 1.65; margin-bottom: 0.9rem; }
.member a { color: var(--accent); font-weight: 600; }
@media (max-width: 640px) { .team-grid { grid-template-columns: 1fr; } }

/* Glossar (A–Z) */
.glossar-az { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.4rem 0 2.4rem; }
.glossar-az a { font-family: var(--mono); font-size: 0.85rem; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; color: var(--text-soft); transition: border-color 0.2s var(--ease), color 0.2s var(--ease); }
.glossar-az a:hover { border-color: var(--accent); color: var(--accent); }
.glossar-letter { font-family: var(--mono); font-size: 1.4rem; color: var(--accent); margin: 2.4rem 0 0.6rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); scroll-margin-top: 90px; }
.gl-alt { color: var(--muted); font-weight: 400; font-size: 0.9rem; }

/* Tabellen (Vergleiche, Kennwerte) */
.d-table-wrap { margin: 1.9rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.d-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.d-table th, .d-table td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.d-table thead th { color: var(--accent); font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--border-2); white-space: nowrap; }
.d-table tbody tr:hover { background: color-mix(in oklab, var(--accent) 5%, transparent); }
.d-table td:first-child { color: var(--text); font-weight: 600; }
.d-table-wrap figcaption { margin-top: 0.6rem; font-size: 0.82rem; color: var(--muted); text-align: center; }

/* Cluster-Liste unter einem Leitartikel */
.cluster { border-top: 1px solid var(--border); margin-top: 1rem; }
.cluster-head { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--muted); margin-bottom: 1.4rem; }

/* Automatische Glossar-Links im Fließtext – dezent, nicht störend */
/* Glossar-Autolinks im Fließtext: Begriff im Akzent-Blau (Ruhe = Unterstreichung transparent, also unsichtbar
   -> wirkt linienlos, sofort als Link erkennbar); Hover/Fokus = native Unterstreichung blendet weich ein.
   WICHTIG: NATIVE text-decoration statt selbstgebauter ::after/Hintergrund-Linie -> der Browser snappt die
   Unterstreichung pro Zeile aufs Pixelraster = auf JEDER Zeile exakt gleiche, scharfe Strichstärke.
   (Selbstgezeichnete 1,5px-Linien rasterten je Zeilen-Sub-Pixel unterschiedlich = mal dünn, mal dick.)
   text-decoration verändert den Textfluss nicht -> kein Layout-Shift. */
.glossar-link { color: var(--accent); text-decoration-line: underline; text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
    text-decoration-thickness: 2px; text-underline-offset: 0.16em; text-decoration-skip-ink: none;
    transition: text-decoration-color 0.4s var(--ease); }
.glossar-link:hover, .glossar-link:focus-visible { text-decoration-color: currentColor; }
@media (prefers-reduced-motion: reduce) { .glossar-link { transition: none; } }

/* ===================================================================
   Werkstatt-Rechner  (/rechner/)
   =================================================================== */
.rechner .article-wrap { max-width: 860px; }
.calc-nav { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0 0 2.4rem; }
.calc-nav a { font-size: 0.82rem; color: var(--text-soft); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.95rem; transition: border-color 0.25s var(--ease), color 0.25s var(--ease); }
.calc-nav a:hover { border-color: var(--accent); color: var(--text); }

.calc { margin: 2.8rem 0; scroll-margin-top: 90px; }
.calc > h2 { font-size: var(--fs-600); }
.calc-intro { color: var(--text-soft); margin: 0.6rem 0 1.3rem; }
.calc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.1rem, 3vw, 1.9rem); box-shadow: var(--shadow); }

.field { margin-bottom: 1.05rem; }
.field > label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-soft); margin-bottom: 0.4rem; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: end; }
.field-pair > .field { margin-bottom: 0; }
@media (max-width: 540px) { .field-pair { grid-template-columns: 1fr; gap: 0.8rem; } }

.calc-card input, .calc-card select {
    width: 100%; font-family: inherit; font-size: 0.98rem; color: var(--text);
    background: var(--bg-2); border: 1px solid var(--field-border); border-radius: 9px;
    padding: 0.65rem 0.8rem;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.calc-card input:focus, .calc-card select:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}
.calc-card select {
    appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.1rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237E94A6' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 0.75rem center;
}

.chips-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.field-pair > span { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-soft); }
.field-pair > span input { max-width: 6rem; }

.calc-out { display: block; margin-top: 1.2rem; padding: 0.95rem 1.15rem; border-radius: 10px;
    background: color-mix(in oklab, var(--accent) 10%, var(--surface-2));
    border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border));
    font-family: var(--mono); font-size: 1.02rem; color: var(--text); }
.calc-out:empty { display: none; }
.calc-out--err { background: none; border: none; padding: 0.3rem 0 0; color: var(--muted); font-size: 0.86rem; font-family: inherit; }

.calc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-top: 1.4rem; }
@media (max-width: 560px) { .calc-stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--bg-2); border: 1px solid var(--border); border-radius: 11px; padding: 0.95rem 0.6rem; text-align: center; }
.stat-v { display: block; font-family: "Space Grotesk", "Inter", sans-serif; font-weight: 700; font-size: 1.32rem; color: var(--accent); letter-spacing: -0.01em; }
.stat-k { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-top: 0.3rem; }

.field-hint { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 0.35rem; }
.calc-note { font-size: 0.85rem; color: var(--muted); margin-top: 0.95rem; line-height: 1.55; }
.calc-info { font-size: 0.8rem; color: var(--text-soft); margin-top: 0.85rem; min-height: 1em; }

.mb-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.55rem; margin-bottom: 0.5rem; align-items: center; }
.mb-del { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); border-radius: 8px; width: 2.5rem; height: 2.5rem; cursor: pointer; font-size: 1.2rem; line-height: 1; transition: border-color 0.2s var(--ease), color 0.2s var(--ease); }
.mb-del:hover { border-color: var(--amber); color: var(--amber); }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; margin-top: 0.5rem; }

.field-check > label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; color: var(--text-soft); cursor: pointer; }
.field-check input[type="checkbox"] { width: auto; accent-color: var(--accent); }
#mb-gelcoat-wrap { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.7rem; }
#mb-gelcoat-gm { max-width: 7rem; }

.calc-faqs { margin-top: 2.8rem; }
.calc-faq { border: 1px solid var(--border); border-radius: 10px; padding: 0.3rem 1.1rem; margin-bottom: 0.6rem; background: var(--surface); }
.calc-faq summary { cursor: pointer; font-weight: 600; color: var(--text); padding: 0.65rem 0; list-style: none; }
.calc-faq summary::-webkit-details-marker { display: none; }
.calc-faq summary::before { content: "+ "; color: var(--accent); font-family: var(--mono); }
.calc-faq[open] summary::before { content: "− "; }
.calc-faq p { color: var(--text-soft); margin: 0.2rem 0 0.8rem; }

/* DB-übergreifende Querverweise: kleines Bereichs-Label vor dem Linktext */
.db-crossref .xref-area { font-size: 0.72em; color: var(--text-soft); letter-spacing: 0.04em;
    text-transform: uppercase; margin-right: 0.5em; }

/* ===================================================================
   Datenbanken  (/fehler/, /material/)
   =================================================================== */
.db-page .article-wrap { max-width: 920px; }
.db-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.1rem; margin-bottom: 0.6rem; }
.db-search-wrap { position: relative; display: flex; align-items: center; flex: 1 1 260px; }
.db-search-wrap .ds-icon { position: absolute; left: 0.85rem; stroke: var(--muted); fill: none; stroke-width: 2; pointer-events: none; }
.db-search { width: 100%; font-family: inherit; font-size: 0.95rem; color: var(--text); background: var(--bg-2); border: 1px solid var(--field-border); border-radius: 9px; padding: 0.62rem 0.9rem 0.62rem 2.6rem; }
.db-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }
.db-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.db-count { color: var(--muted); font-size: 0.8rem; margin: 0 0 1.4rem; }

.db-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 720px) { .db-grid { grid-template-columns: 1fr; } }
.db-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.3rem; }
.db-card[hidden] { display: none; }
.db-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.7rem; margin-bottom: 0.7rem; }
.db-card-head :is(h2, h3) { font-size: 1.08rem; margin: 0; line-height: 1.3; font-weight: 700; }
.db-tag { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--border)); border-radius: 6px; padding: 0.16rem 0.5rem; white-space: nowrap; flex-shrink: 0; }

.db-dichte { color: var(--text-soft); font-size: 0.84rem; margin-bottom: 0.5rem; }
.db-specs { list-style: none; display: flex; flex-direction: column; gap: 0.25rem; margin: 0 0 0.7rem; }
.db-specs li { position: relative; padding-left: 1rem; font-size: 0.88rem; color: var(--text-soft); }
.db-specs li::before { content: "›"; position: absolute; left: 0; color: var(--accent); }

.db-def { display: flex; flex-direction: column; gap: 0.55rem; }
.db-def > div { display: grid; grid-template-columns: 6.2rem 1fr; gap: 0.6rem; }
@media (max-width: 420px) { .db-def > div { grid-template-columns: 1fr; gap: 0.1rem; } }
.db-def dt { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding-top: 0.15rem; }
.db-def dd { font-size: 0.9rem; color: var(--text-soft); margin: 0; line-height: 1.55; }
.db-hinweis { font-size: 0.85rem; color: var(--muted); margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.db-see { font-size: 0.82rem; color: var(--muted); margin-top: 0.7rem; }
.db-see a { color: var(--accent); font-weight: 600; }

/* ---------- Sichtbare Breadcrumbs ---------- */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; font-size: 0.76rem; letter-spacing: 0.02em; margin-bottom: 1.5rem; }
.breadcrumbs a { color: var(--text-soft); transition: color 0.2s var(--ease); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs [aria-current="page"] { color: var(--muted); }
.bc-sep { color: var(--border-2); }

/* „Wissen"-Dropdown in der Hauptnavigation */
.nav-has-menu { position: relative; }
.nav-menu-toggle { display: inline-flex; align-items: center; gap: 0.32rem; font: inherit; font-weight: 500; font-size: 0.95rem; color: var(--text-soft); background: none; border: 0; cursor: pointer; padding: 0.4rem 0.2rem; position: relative; transition: color 0.25s var(--ease); }
.nav-menu-toggle::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.nav-has-menu:hover .nav-menu-toggle, .nav-menu-toggle[aria-expanded="true"] { color: var(--text); }
.nav-has-menu:hover .nav-menu-toggle::after, .nav-menu-toggle[aria-expanded="true"]::after { transform: scaleX(1); }
.nav-chevron { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease); }
.nav-menu-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.nav-menu { position: absolute; top: calc(100% + 9px); right: 0; min-width: 232px; list-style: none; margin: 0; padding: 0.5rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); display: grid; gap: 0.12rem; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s; z-index: 200; }
.nav-menu::before { content: ""; position: absolute; top: -9px; left: 0; right: 0; height: 9px; }
.nav-has-menu:hover .nav-menu, .nav-menu-toggle[aria-expanded="true"] + .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu a { display: block; padding: 0.6rem 0.8rem; border-radius: 9px; color: var(--text-soft); font-size: 0.92rem; font-weight: 500; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.nav-menu a::after { display: none; }
.nav-menu a:hover, .nav-menu a:focus-visible { background: var(--surface); color: var(--text); }

/* Rechner-CTA in Praxis-Anleitungen */
.rechner-cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1.6rem 0 0; padding: 1rem 1.2rem; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; }
.rechner-cta .rc-icon { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rechner-cta .rc-text { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 14rem; }
.rechner-cta .rc-text strong { color: var(--text); font-size: 0.98rem; }
.rechner-cta .rc-text span { color: var(--muted); font-size: 0.86rem; line-height: 1.45; }
.rechner-cta .rc-btn { flex: none; }
.rc-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; }
.calc-cta .rc-links { flex: 1 1 100%; margin-top: 0.35rem; }
.rc-link { font-family: var(--mono); font-size: 0.82rem; color: var(--accent); border: 1px solid var(--border-2); border-radius: 8px; padding: 0.45rem 0.8rem; transition: border-color 0.25s var(--ease), background 0.25s var(--ease); }
.rc-link:hover { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent); }
.calc-note a { text-decoration: underline; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 404-Seite (Klassen statt Inline-Styles, damit CSP style-src ohne 'unsafe-inline' auskommt) */
.e404 { text-align: center; }
.e404 h1 { font-size: var(--fs-900); }
.e404 .hero-cta { justify-content: center; margin: 1.5rem 0 2.5rem; }
.e404 .section-sub { margin-inline: auto; }

/* Fachgrafik (KI-Bild mit eingebrannter Beschriftung) – nur Bild + Rahmen, mit Card-Hover */
.fg-figure { margin: 2.4rem 0; transition: transform 0.35s var(--ease); }
.fg-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 0.35s var(--ease); }
.fg-figure:hover { transform: translateY(var(--lift-subtle)); }
.fg-figure:hover img { border-color: var(--border-2); }
.fg-figure figcaption { margin: 1rem auto 0.15rem; max-width: 64ch; padding: 0 0.4rem; font-size: 0.82rem; line-height: 1.5; color: var(--muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .fg-figure:hover { transform: none; } }
.fg-ai { display: inline-block; font-family: var(--mono); font-size: 0.68rem; color: var(--muted); border: 1px solid var(--border); border-radius: 5px; padding: 0.06rem 0.42rem; margin-left: 0.5rem; white-space: nowrap; vertical-align: middle; }

@media (max-width: 720px) {
    .nav-menu-toggle { display: block; width: 100%; text-align: left; padding: 0.8rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--border); }
    .nav-menu-toggle::after { display: none; }
    .nav-chevron { display: none; }
    /* visibility:inherit statt visible: Untermenü folgt dem zugeklappten .primary-nav (sonst bleiben die Links fokussierbar) */
    .nav-menu { position: static; opacity: 1; visibility: inherit; transform: none; box-shadow: none; border: 0; background: transparent; border-radius: 0; padding: 0 0 0 0.9rem; min-width: 0; z-index: auto; gap: 0; }
    .nav-menu::before { display: none; }
    .nav-menu a { padding: 0.7rem 0; border-bottom: 1px solid var(--border); font-size: 1rem; }
}
@media (max-width: 520px) { .rechner-cta .rc-btn { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .nav-menu, .nav-menu-toggle::after, .nav-chevron, .primary-nav, .primary-nav a::after, .hamburger span, .hexcard::before { transition: none; } }

/* Fehlerdatenbank: Detailseiten + Karten-Verlinkung */
.cat-fehler { color: #f0a868; background: color-mix(in oklab, #f0a868 16%, transparent); }
.db-more { display: inline-block; margin-top: 0.9rem; color: var(--accent); font-weight: 600; font-size: 0.85rem; transition: color 0.2s var(--ease); }
.db-more:hover { color: var(--text); }
/* Klickbare Karte (stretched-link): ganze Karte führt zur Detailseite, innere Links bleiben eigenständig */
.db-card { position: relative; transition: border-color 0.25s var(--ease), transform 0.25s var(--ease); }
.db-card:has(.db-card-head :is(h2, h3) a):hover { border-color: var(--border-2); transform: translateY(var(--lift-card)); }
.db-card-head :is(h2, h3) a { color: inherit; }
.db-card-head :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); }
.db-card-head :is(h2, h3) a:hover { color: var(--accent); }
.db-card .db-see, .db-card .db-more { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .db-card { transition: none; } .db-card:has(.db-card-head :is(h2, h3) a):hover { transform: none; } }
.fehler-related { margin-top: 2rem; }
.legal-back-wrap { margin-top: 2.4rem; }

/* Materialdatenbank: Detailseiten */
.cat-material { color: #56cabf; background: color-mix(in oklab, #56cabf 16%, transparent); }
.kw-note { font-size: 0.82rem; color: var(--muted); margin: -0.4rem 0 1rem; }
.spec-table { width: 100%; border-collapse: collapse; margin: 0 0 1.9rem; font-size: 0.93rem; }
.spec-table th, .spec-table td { text-align: left; padding: 0.62rem 0.85rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.spec-table th { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); font-weight: 500; width: 13rem; }
.spec-table td { color: var(--text-soft); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
@media (max-width: 480px) { .spec-table th { width: 9rem; } }

.d-facts { list-style: none; padding: 0; margin: 0 0 1.7rem; display: grid; gap: 0.7rem; }
.d-facts li { padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; }
.d-facts .f-t { display: block; font-weight: 700; color: var(--text); margin-bottom: 0.3rem; }
.d-facts .f-d { display: block; color: var(--text-soft); font-size: 0.95rem; line-height: 1.6; }

.procon { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.6rem; margin: 0 0 1.9rem; }
@media (max-width: 560px) { .procon { grid-template-columns: 1fr; gap: 1.3rem; } }
.procon h3 { font-size: 1rem; margin-bottom: 0.7rem; }
.pc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.pc-list li { position: relative; padding-left: 1.6rem; color: var(--text-soft); font-size: 0.94rem; line-height: 1.5; }
.pc-list.pro li::before { content: "\2713"; position: absolute; left: 0; top: 0.05em; color: var(--green); font-weight: 700; }
.pc-list.con li::before { content: "\2013"; position: absolute; left: 0; top: 0.05em; color: var(--amber); font-weight: 700; }

/* Glossar: Detailseiten + klickbare Begriffe */
.cat-glossar { color: #c4b5fd; background: color-mix(in oklab, #c4b5fd 16%, transparent); }

/* Glossar-Sammelseite: A–Z + Live-Suche + Lexikon-Liste im Zukunft-Stil */
.gl-letter-sec .glossar-letter { margin: 2.2rem 0 0.4rem; }
.gl-letter-sec:first-of-type .glossar-letter { margin-top: 1.4rem; }
.gl-future-list a.future-link, .gl-future-list .gl-nolink { gap: 1rem; padding: 0.95rem 0; align-items: start; }
.gl-future-list .gl-nolink { display: grid; grid-template-columns: auto 1fr; color: inherit; cursor: default; }
.gl-future-list h3 { font-size: 1.12rem; margin-bottom: 0.25rem; font-weight: 700; }
.gl-future-list h3 .gl-alt { font-size: 0.85rem; }
.gl-future-list p { font-size: 0.92rem; line-height: 1.55; color: var(--text-soft); max-width: 78ch; }
.gl-future-list .fno { font-size: 1.05rem; line-height: 1.4; }

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }