/* ==========================================================================
lokalis — Marketing- & Investoren-Site
Gemeinsames Stylesheet aller Seiten im Repo-Wurzelverzeichnis.
Gestaltung seit 2026-10-01 „wie die Anwendung": dieselben Flächen, Linien
und Schriften wie platform/frontend (app/globals.css), dieselben vier
Themenfarben wie lib/navigation.ts — Stelle besetzen (Teal), Standort
finden (Violett), Region verstehen (Bernstein), Markt beobachten (Rosé).
Wer von der Website in die Anwendung wechselt, soll nicht das Gefühl
haben, die Firma gewechselt zu haben. Ändert sich dort ein Wert, wird er
hier nachgezogen — die Anwendung ist die Quelle.
Schriften kommen aus /ILADesign/fonts/ — kein CDN, kein Tracking.
========================================================================== */
/* ── Schriften ─────────────────────────────────────────────────────────── */
@font-face{font-family:"Inter";src:url("/ILADesign/fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/ILADesign/fonts/Inter-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/ILADesign/fonts/Inter-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/ILADesign/fonts/Inter-Bold.woff2") format("woff2");font-weight:700 800;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/ILADesign/fonts/JetBrainsMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/ILADesign/fonts/JetBrainsMono-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
/* ── Token ─────────────────────────────────────────────────────────────────
Werte aus platform/frontend/src/app/globals.css (Dunkel-Thema). */
:root{
/* Grundflächen — surface-0 … surface-3 der Anwendung */
--ink: #05080e;
--surface: #0a0f1a;
--raised: #0e1524;
--raised-2: #141c2e;
--raised-3: #1a2238;
/* Linien — border-sub, border-def */
--line: #111c30;
--line-2: #1c2d47;
--line-3: #2b4166;
/* Schrift — fg-1, fg-2, fg-3 (fg-3 für Fließtext leicht aufgehellt) */
--fg: #e2e8f0;
--fg-2: #94a3b8;
--fg-3: #7b8799;
--fg-4: #4a5568;
/* Akzente */
--teal: #2dc3bd;
--teal-hi: #45d1cb;
--teal-dim: rgba(45,195,189,.14);
--amber: #e9a23b;
--amber-dim: rgba(233,162,59,.14);
--violet: #8b7cf6;
--rose: #f2617a;
--green: #10b981;
/* Die beiden Hausfarben im Verlauf: Türkis für Pro2, Orange für ConnectiveX
(Designs/ConnectiveX.design.json „signal" / „signalTief"). ILA trägt beide:
türkiser Körper, Brille in genau diesem Orange. */
--pro2: #2dc3bd;
--cx: #e78223;
--cx-tief: #d2691a;
--verlauf: linear-gradient(92deg,#2dc3bd 0%,#6fd6d0 34%,#f7cfa6 60%,#e78223 100%);
/* Die vier Themen der Anwendung (lib/navigation.ts) */
--t-stelle: #2dc3bd;
--t-standort: #8b7cf6;
--t-region: #e9a23b;
--t-markt: #f2617a;
/* Typo — eine Schrift wie in der Anwendung; Mono nur für Zahlen */
--f-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--f-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
/* Maße */
--shell: 1240px;
--shell-wide: 1440px;
--gutter: clamp(16px, 5vw, 64px);
--rhythm: clamp(80px, 10vw, 148px);
--radius: 16px;
--radius-lg: 18px;
--ease: cubic-bezier(.22,.72,.24,1);
--ease-out: cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
margin:0;
background:var(--ink);
color:var(--fg-2);
font-family:var(--f-sans);
font-size:16px;
line-height:1.7;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit}
::selection{background:rgba(45,195,189,.28);color:#fff}
/* ── Typografie ────────────────────────────────────────────────────────── */
.display,h1.display{
font-family:var(--f-display);
font-weight:800;
color:var(--fg);
letter-spacing:-.032em;
line-height:1.06;
margin:0;
text-wrap:balance;
}
.d-xxl{font-size:clamp(2.5rem,6vw,5rem)}
.d-xl {font-size:clamp(2.2rem,4.6vw,3.8rem)}
.d-lg {font-size:clamp(1.8rem,3.4vw,2.75rem);line-height:1.1}
.d-md {font-size:clamp(1.45rem,2.3vw,1.95rem);line-height:1.16}
.display em{font-style:normal;color:var(--teal)}
.display .muted{color:var(--fg-3)}
.eyebrow{
font-family:var(--f-sans);font-size:.72rem;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;color:var(--teal);
display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;
}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:currentColor;opacity:.8}
.eyebrow.plain::before{display:none}
.eyebrow.dim{color:var(--fg-3)}
.eyebrow[style*="--c"]{color:var(--c)}
.eyebrow.dim::before{background:var(--fg-4)}
.lede{font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.72;color:var(--fg-2);max-width:64ch}
.prose{max-width:68ch}
.prose p{margin:0 0 1.1em}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--fg);font-weight:600}
.small{font-size:.86rem;line-height:1.65;color:var(--fg-3)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--fg);letter-spacing:-.02em}
.tealtext{color:var(--teal)}
.ambertext{color:var(--amber)}
/* ── Grundgerüst ───────────────────────────────────────────────────────── */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.shell-wide{width:100%;max-width:var(--shell-wide);margin-inline:auto;padding-inline:var(--gutter)}
section{position:relative}
.band{padding-block:var(--rhythm)}
.band-tight{padding-block:clamp(56px,7vw,96px)}
.band + .band{border-top:1px solid var(--line)}
.band-surface{background:var(--surface)}
/* Vermessungsraster als Sektionshintergrund */
.grid-bg::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:linear-gradient(var(--line) 1px,transparent 1px),
linear-gradient(90deg,var(--line) 1px,transparent 1px);
background-size:64px 64px;
mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 78%);
-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 78%);
opacity:.6;
}
.glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(10px)}
/* Sektionskopf mit Randnummer — das redaktionelle Motiv der Site */
.sec-head{display:grid;grid-template-columns:96px minmax(0,1fr);gap:clamp(16px,3vw,48px);align-items:start}
.sec-index{
font-family:var(--f-sans);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-4);
padding-top:.7em;border-top:2px solid var(--line-2);
}
.sec-head h2{margin:0}
.sec-head .lede{margin:20px 0 0}
@media(max-width:820px){
.sec-head{grid-template-columns:minmax(0,1fr);gap:14px}
.sec-index{padding-top:0;border-top:0}
}
.rule{height:1px;background:var(--line);border:0;margin:0}
/* ── Navigation ────────────────────────────────────────────────────────── */
.nav{
position:sticky;top:0;z-index:900;
background:rgba(5,8,14,.78);
backdrop-filter:blur(18px) saturate(140%);
-webkit-backdrop-filter:blur(18px) saturate(140%);
border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;gap:24px;height:60px;max-width:var(--shell-wide);margin-inline:auto;padding-inline:var(--gutter)}
.nav-brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.nav-brand img{height:22px;width:auto}
/* Die Marke wie in der Seitenleiste der Anwendung: Teal-Pille + Unterzeile */
.marke{display:inline-flex;align-items:center;background:var(--teal);color:#04201f;font-weight:800;font-size:.86rem;letter-spacing:-.01em;line-height:1;padding:6px 9px;border-radius:7px}
.marke-zeile{font-size:.72rem;line-height:1.25;color:var(--fg-3);max-width:24ch}
@media(max-width:520px){.marke-zeile{display:none}}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:nowrap}
.nav-links a{
font-size:.82rem;color:var(--fg-3);text-decoration:none;
padding:7px 12px;border-radius:7px;white-space:nowrap;
transition:color .18s var(--ease),background .18s var(--ease);
}
.nav-links a:hover{color:var(--fg);background:rgba(255,255,255,.05)}
.nav-links a.active{color:var(--fg);background:rgba(45,195,189,.1)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line-2);border-radius:9px;color:var(--fg-2);padding:7px 12px;font-family:var(--f-sans);font-size:.78rem;font-weight:600;cursor:pointer}
@media(max-width:1080px){
.nav-toggle{display:block}
.nav-links{
position:absolute;top:60px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
background:rgba(8,11,16,.98);border-bottom:1px solid var(--line);padding:10px var(--gutter) 20px;
display:none;
}
.nav-links.open{display:flex}
.nav-links a{padding:12px 4px;border-bottom:1px solid var(--line)}
.nav-links a.active::after{display:none}
}
/* Lesefortschritt als Haarlinie unter der Navigation */
.nav-progress{position:absolute;left:0;bottom:-1px;height:2px;background:var(--teal);width:0;transition:width .1s linear}
/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn{
display:inline-flex;align-items:center;gap:10px;
font-size:.92rem;font-weight:600;text-decoration:none;
padding:13px 22px;border-radius:11px;border:1px solid transparent;cursor:pointer;font-family:var(--f-sans);
transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.btn-primary{background:var(--teal);color:#04201f;font-weight:700;box-shadow:0 10px 30px -14px rgba(45,195,189,.7)}
.btn-primary:hover{background:var(--teal-hi);transform:translateY(-2px);box-shadow:0 16px 38px -14px rgba(45,195,189,.85)}
.btn-ghost{border-color:var(--line-2);color:var(--fg);background:var(--raised)}
.btn-ghost:hover{border-color:var(--line-3);background:var(--raised-2);transform:translateY(-2px)}
.btn .arw{transition:transform .2s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.textlink{
display:inline-flex;align-items:center;gap:8px;color:var(--teal);text-decoration:none;
font-size:.88rem;font-weight:500;border-bottom:1px solid rgba(45,195,189,.3);padding-bottom:2px;
transition:border-color .2s var(--ease),gap .2s var(--ease);
}
.textlink:hover{border-color:var(--teal);gap:12px}
/* ── Karten & Flächen ──────────────────────────────────────────────────── */
.card{
position:relative;background:var(--surface);border:1px solid var(--line);
border-radius:var(--radius);padding:clamp(22px,2.4vw,30px);
transition:border-color .28s var(--ease),transform .28s var(--ease),background .28s var(--ease);
}
.card::before{display:none}
.card:hover{border-color:color-mix(in srgb,var(--c,var(--teal)) 45%,transparent);transform:translateY(-3px);box-shadow:0 22px 50px -26px color-mix(in srgb,var(--c,var(--teal)) 45%,transparent)}
.card h3{font-size:1.06rem;font-weight:600;color:var(--fg);margin:0 0 10px;line-height:1.35}
.card p{margin:0;font-size:.91rem;line-height:1.68;color:var(--fg-3)}
.card-flat{background:transparent}
.card-flat:hover{transform:none;background:rgba(255,255,255,.02)}
.tag{
display:inline-flex;align-items:center;gap:7px;
font-family:var(--f-sans);font-size:.74rem;font-weight:600;letter-spacing:0;
color:var(--fg-2);background:var(--raised);border:1px solid var(--line-2);border-radius:100px;padding:5px 12px;
}
.tag-teal{color:var(--teal);border-color:rgba(45,195,189,.35);background:var(--teal-dim)}
.tag-amber{color:var(--amber);border-color:rgba(233,162,59,.35);background:var(--amber-dim)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.grid{display:grid;gap:clamp(16px,1.8vw,26px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
/* ── Kennzahlen ────────────────────────────────────────────────────────── */
.stat{padding:26px 0;border-top:1px solid var(--line-2)}
.stat-v{font-family:var(--f-sans);font-size:clamp(1.9rem,3.4vw,2.8rem);font-weight:800;color:var(--fg);letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1;display:block}
.stat-v .u{font-size:.42em;color:var(--teal);margin-left:.25em;letter-spacing:0}
.stat-l{margin-top:12px;font-size:.84rem;color:var(--fg-3);line-height:1.5}
.stat-n{font-family:var(--f-sans);font-size:.7rem;font-weight:700;letter-spacing:.1em;color:var(--fg-4);text-transform:uppercase;display:block;margin-bottom:16px}
/* ── Tabellen ──────────────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--raised)}
table.data{width:100%;border-collapse:collapse;font-size:.88rem;min-width:560px}
table.data th{
text-align:left;padding:14px 18px;font-family:var(--f-sans);font-size:.7rem;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);
border-bottom:1px solid var(--line-2);white-space:nowrap;font-weight:500;
}
table.data td{padding:14px 18px;border-bottom:1px solid var(--line);color:var(--fg-2);vertical-align:top}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr{transition:background .18s var(--ease)}
table.data tbody tr:hover{background:rgba(255,255,255,.025)}
table.data td.n,table.data th.n{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--fg)}
table.data .lead{color:var(--fg);font-weight:500}
/* ── Auf-/Einblenden beim Scrollen ─────────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.08s}
[data-reveal][data-d="2"]{transition-delay:.16s}
[data-reveal][data-d="3"]{transition-delay:.24s}
[data-reveal][data-d="4"]{transition-delay:.32s}
[data-reveal][data-d="5"]{transition-delay:.4s}
[data-reveal][data-d="6"]{transition-delay:.48s}
/* ── Reiter (Tabs) ─────────────────────────────────────────────────────── */
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:36px}
.tabs button{
background:none;border:0;border-bottom:2px solid transparent;
font-family:var(--f-sans);font-size:.88rem;color:var(--fg-3);
padding:12px 16px;cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease);
margin-bottom:-1px;
}
.tabs button:hover{color:var(--fg-2)}
.tabs button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--c,var(--teal));font-weight:600}
.tabpanel[hidden]{display:none}
.tabpanel{animation:fadeup .45s var(--ease-out)}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* ── Fußzeile ──────────────────────────────────────────────────────────── */
footer.site{border-top:1px solid var(--line);padding-block:clamp(48px,6vw,80px) 40px;background:var(--surface)}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:48px}
@media(max-width:760px){footer.site .cols{grid-template-columns:minmax(0,1fr);gap:32px}}
footer.site h4{font-family:var(--f-sans);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-4);margin:0 0 16px;font-weight:500}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer.site a{color:var(--fg-3);text-decoration:none;font-size:.88rem;transition:color .18s}
footer.site a:hover{color:var(--teal)}
footer.site .base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--line);font-size:.78rem;color:var(--fg-4)}
/* ── Bewegung abschalten, wenn gewünscht ───────────────────────────────── */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
[data-reveal]{opacity:1 !important;transform:none !important}
}
/* ── Punktkarte (lokalis-karte.js) ─────────────────────────────────────── */
.karte{position:relative}
.karte-tip{
position:absolute;pointer-events:none;z-index:20;
background:rgba(10,13,19,.96);border:1px solid var(--line-2);border-radius:9px;
padding:10px 13px;min-width:172px;
opacity:0;transform:translateY(4px);transition:opacity .16s var(--ease),transform .16s var(--ease);
box-shadow:0 18px 40px -18px rgba(0,0,0,.9);
}
.karte-tip.on{opacity:1;transform:none}
.karte-tip strong{display:block;color:var(--fg);font-size:.84rem;font-weight:600;margin-bottom:5px;line-height:1.3}
.karte-tip span{display:block;font-size:.76rem;color:var(--fg-3);font-family:var(--f-mono)}
.karte-tip b{color:var(--teal);font-weight:500}
.karte-tip .r{color:var(--fg-4);margin-top:3px}
.karte-schalter{display:flex;flex-wrap:wrap;gap:6px}
.karte-schalter button{
font-family:var(--f-sans);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
background:none;border:1px solid var(--line);color:var(--fg-3);
padding:6px 12px;border-radius:100px;cursor:pointer;
transition:all .2s var(--ease);
}
.karte-schalter button:hover{border-color:var(--line-3);color:var(--fg-2)}
.karte-schalter button[aria-pressed="true"]{border-color:rgba(45,195,189,.5);color:var(--teal);background:var(--teal-dim)}
.karte-legende{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-family:var(--f-mono);font-size:.66rem;color:var(--fg-4)}
.karte-legende i{width:26px;height:5px;border-radius:2px;display:block}
.karte-leg-l{color:var(--fg-3)}
.karte-leg-m{margin-left:8px;color:var(--fg-4)}
/* ── Ablauf-Kette (Pipeline) ───────────────────────────────────────────── */
.kette{display:grid;gap:0;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
@media(max-width:900px){.kette{grid-template-columns:minmax(0,1fr)}}
.kette-schritt{position:relative;padding:30px 26px 30px 0;border-top:1px solid var(--line-2)}
.kette-schritt:last-child{padding-right:0}
.kette-schritt .n{font-family:var(--f-sans);font-size:.7rem;font-weight:700;letter-spacing:.08em;color:var(--fg-4);display:block;margin-bottom:14px}
.kette-schritt h3{font-size:1rem;color:var(--fg);margin:0 0 9px;font-weight:600}
.kette-schritt p{margin:0;font-size:.86rem;color:var(--fg-3);line-height:1.62}
.kette-schritt::before{
content:"";position:absolute;top:-3px;left:0;width:5px;height:5px;border-radius:50%;
background:var(--teal);box-shadow:0 0 0 4px rgba(45,195,189,.15);
}
.kette-schritt::after{
content:"";position:absolute;top:-1px;left:0;height:1px;width:0;background:var(--teal);
transition:width 1.1s var(--ease-out);
}
.kette.in .kette-schritt::after{width:100%}
.kette.in .kette-schritt:nth-child(2)::after{transition-delay:.2s}
.kette.in .kette-schritt:nth-child(3)::after{transition-delay:.4s}
.kette.in .kette-schritt:nth-child(4)::after{transition-delay:.6s}
.kette.in .kette-schritt:nth-child(5)::after{transition-delay:.8s}
/* ── Oberflächen-Attrappe ──────────────────────────────────────────────── */
.mock{
background:linear-gradient(180deg,var(--raised-2),var(--raised));
border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;
box-shadow:0 40px 80px -50px rgba(0,0,0,.95);
}
.mock-bar{display:flex;align-items:center;gap:8px;padding:11px 15px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.mock-bar .pt{width:8px;height:8px;border-radius:50%;background:var(--line-3)}
.mock-bar .ttl{font-family:var(--f-sans);font-size:.7rem;font-weight:700;letter-spacing:.08em;color:var(--fg-4);margin-left:8px}
.mock-body{padding:clamp(16px,2vw,24px);overflow-x:auto}
.bar-row{display:grid;grid-template-columns:minmax(110px,1.4fr) 1fr 62px;gap:14px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.bar-row:last-child{border-bottom:0}
.bar-row .lbl{font-size:.82rem;color:var(--fg-2)}
.bar-track{height:5px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden}
.bar-fill{height:100%;border-radius:3px;background:var(--teal);width:0;transition:width 1.2s var(--ease-out)}
.in .bar-fill{width:var(--w,50%)}
.bar-row .val{font-family:var(--f-mono);font-size:.78rem;color:var(--fg);text-align:right}
/* ── Ampel / Säulen ────────────────────────────────────────────────────── */
.ampel{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-sans);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ampel .l{width:8px;height:8px;border-radius:50%}
.ampel.gut{color:var(--green)} .ampel.gut .l{background:var(--green);box-shadow:0 0 0 4px rgba(62,207,142,.14)}
.ampel.mittel{color:var(--amber)} .ampel.mittel .l{background:var(--amber);box-shadow:0 0 0 4px rgba(233,162,59,.14)}
.ampel.eng{color:var(--rose)} .ampel.eng .l{background:var(--rose);box-shadow:0 0 0 4px rgba(242,97,122,.14)}
/* ── Schicht-Diagramm (Architektur) ────────────────────────────────────── */
.schicht{
display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(14px,2vw,28px);
padding:26px 0;border-top:1px solid var(--line-2);position:relative;
}
@media(max-width:800px){.schicht{grid-template-columns:minmax(0,1fr);gap:12px}}
.schicht-kopf .n{font-family:var(--f-sans);font-size:.7rem;font-weight:700;letter-spacing:.08em;color:var(--fg-4);display:block;margin-bottom:7px}
.schicht-kopf h3{margin:0;font-size:1rem;color:var(--fg);font-weight:600}
.schicht-kopf p{margin:7px 0 0;font-size:.78rem;color:var(--fg-4);line-height:1.55}
.bausteine{display:flex;flex-wrap:wrap;gap:8px;align-content:start}
.baustein{
display:inline-flex;flex-direction:column;gap:3px;
border:1px solid var(--line);border-radius:10px;padding:11px 15px;background:var(--raised);
cursor:default;transition:all .22s var(--ease);min-width:0;
}
.baustein:hover{border-color:rgba(45,195,189,.4);background:var(--raised-2);transform:translateY(-2px)}
.baustein b{font-size:.83rem;color:var(--fg);font-weight:600;white-space:nowrap}
.baustein span{font-family:var(--f-mono);font-size:.64rem;color:var(--fg-4);letter-spacing:.05em}
.baustein.opt{border-style:dashed;opacity:.72}
.baustein.opt b{color:var(--fg-2)}
/* ── Zeitstrahl ────────────────────────────────────────────────────────── */
.zeit{position:relative;padding-left:30px}
.zeit::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line-2)}
.zeit-eintrag{position:relative;padding:0 0 34px}
.zeit-eintrag:last-child{padding-bottom:0}
.zeit-eintrag::before{
content:"";position:absolute;left:-30px;top:7px;width:11px;height:11px;border-radius:50%;
background:var(--ink);border:1px solid var(--line-3);
}
.zeit-eintrag.fertig::before{background:var(--teal);border-color:var(--teal);box-shadow:0 0 0 4px rgba(45,195,189,.16)}
.zeit-eintrag.laeuft::before{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 4px rgba(233,162,59,.16)}
.zeit-eintrag .z{font-family:var(--f-sans);font-size:.7rem;font-weight:700;letter-spacing:.08em;color:var(--fg-4);text-transform:uppercase}
.zeit-eintrag h3{margin:7px 0 7px;font-size:1rem;color:var(--fg);font-weight:600}
.zeit-eintrag p{margin:0;font-size:.88rem;color:var(--fg-3);line-height:1.66;max-width:62ch}
/* ── Zitat ─────────────────────────────────────────────────────────────── */
.zitat{border-left:2px solid var(--teal);padding:4px 0 4px 28px;margin:0}
.zitat p{font-family:var(--f-sans);font-weight:600;letter-spacing:-.015em;font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.4;color:var(--fg);margin:0 0 16px}
.zitat cite{font-style:normal;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-4)}
/* ── Navigationskarten am Seitenende ───────────────────────────────────── */
.weiter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media(max-width:900px){.weiter{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.weiter{grid-template-columns:minmax(0,1fr)}}
.weiter a{
background:var(--surface);padding:30px 26px 26px;text-decoration:none;display:flex;flex-direction:column;gap:9px;
transition:background .24s var(--ease);position:relative;min-height:168px;
}
.weiter a:hover{background:var(--raised-2)}
.weiter .k{font-family:var(--f-sans);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c,var(--teal))}
.weiter .t{font-size:1.05rem;color:var(--fg);font-weight:600;line-height:1.32}
.weiter .d{font-size:.85rem;color:var(--fg-3);line-height:1.6;margin-top:2px}
.weiter .a{margin-top:auto;color:var(--fg-4);font-size:1.1rem;transition:transform .24s var(--ease),color .24s var(--ease)}
.weiter a:hover .a{transform:translateX(5px);color:var(--c,var(--teal))}
/* ── Video ─────────────────────────────────────────────────────────────── */
.videowrap{position:relative;border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;background:#000;box-shadow:0 44px 90px -55px rgba(0,0,0,1)}
.videowrap video{width:100%;height:auto;display:block}
/* ── Hinweiskasten ─────────────────────────────────────────────────────── */
.notiz{border:1px solid var(--line);border-left:2px solid var(--amber);border-radius:0 11px 11px 0;padding:20px 24px;background:rgba(233,162,59,.035)}
.notiz strong{color:var(--fg);display:block;margin-bottom:6px;font-size:.9rem}
.notiz p{margin:0;font-size:.87rem;color:var(--fg-3);line-height:1.66}
.notiz.teal{border-left-color:var(--teal);background:rgba(45,195,189,.035)}
/* ── Quellenzeile unter Zahlen ─────────────────────────────────────────── */
.quelle{font-family:var(--f-sans);font-size:.7rem;font-weight:700;letter-spacing:.08em;color:var(--fg-4);margin-top:10px}
.quelle::before{content:"↳ ";color:var(--fg-4)}
/* ── Passwortgeschützte Ziele kennzeichnen ─────────────────────────────────
Nur die Startseite ist öffentlich. Wer von dort weiterklickt, landet sonst
unangekündigt auf der Anmeldung — das kleine Schloss sagt es vorher.
In der Navigation als Hintergrundbild, weil ein Schloss aus zwei Formen
besteht und ein einzelnes Pseudo-Element dafür nicht reicht. */
.nav-links a.gesperrt{
padding-right:27px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='11' viewBox='0 0 9 11'%3E%3Cpath d='M2 4.5V3a2.5 2.5 0 0 1 5 0v1.5' fill='none' stroke='%23545c69' stroke-width='1'/%3E%3Crect x='.5' y='4.5' width='8' height='6' rx='1.3' fill='none' stroke='%23545c69' stroke-width='1'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 11px center;
}
.schloss{
display:inline-block;width:9px;height:11px;vertical-align:-1px;margin-left:7px;
border:1px solid currentColor;border-radius:2px;position:relative;opacity:.75;
}
.schloss::before{
content:"";position:absolute;left:1.5px;right:1.5px;bottom:100%;height:4px;
border:1px solid currentColor;border-bottom:0;border-radius:3px 3px 0 0;
}
.zugangshinweis{
display:flex;align-items:center;gap:9px;font-size:.83rem;color:var(--fg-4);
margin-top:2px;
}
.zugangshinweis .schloss{margin-left:0;flex:none}
/* ══════════════════════════════════════════════════════════════════════════
Bausteine aus der Anwendung (seit 2026-10-01)
Nachgebaut nach platform/frontend/src/app/globals.css (.einstieg-*,
.thema) — gleiche Radien, gleiche Farbmischung, gleiches Verhalten.
Eine Themenfarbe kommt immer über die Variable --c herein.
══════════════════════════════════════════════════════════════════════════ */
.t-stelle{--c:var(--t-stelle)}
.t-standort{--c:var(--t-standort)}
.t-region{--c:var(--t-region)}
.t-markt{--c:var(--t-markt)}
/* Symbolfläche wie .einstieg-icon */
.t-icon{
width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent);
}
.t-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
/* Die vier Themenkacheln — wie der Einstieg der Anwendung */
.themen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:1100px){.themen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.themen{grid-template-columns:minmax(0,1fr)}}
.thema-karte{
position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
transition:transform .25s var(--ease-out),border-color .25s,box-shadow .25s;
}
.thema-karte:hover,.thema-karte:focus-visible{
transform:translateY(-3px);outline:none;
border-color:color-mix(in srgb,var(--c) 50%,transparent);
box-shadow:0 22px 50px -24px color-mix(in srgb,var(--c) 45%,transparent);
}
.thema-bild{
height:150px;display:grid;place-items:center;overflow:hidden;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
border-bottom:1px solid var(--line);
background:radial-gradient(420px 160px at 50% 0%,color-mix(in srgb,var(--c) 16%,transparent),transparent 70%),var(--raised);
}
.thema-bild svg{max-height:128px;width:auto}
.thema-badge{position:absolute;top:12px;left:12px;z-index:1;font-size:.66rem;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--c);color:#04201f}
.thema-text{display:flex;flex-direction:column;gap:12px;padding:16px 16px 16px;flex:1}
.thema-text h3{display:flex;align-items:center;gap:10px;margin:0;font-size:1.12rem;font-weight:800;letter-spacing:-.02em;color:var(--fg)}
.thema-text h3 .t-icon{width:30px;height:30px;border-radius:9px}
.thema-text h3 .t-icon svg{width:16px;height:16px}
.thema-frage{margin:-4px 0 0;font-size:.84rem;color:var(--fg-2)}
.thema-werkzeuge{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.chip{
display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;
background:var(--raised);border:1px solid var(--line-2);
font-size:.78rem;font-weight:600;color:var(--fg);line-height:1.3;
}
.chip small{font-size:.62rem;color:var(--fg-3);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.thema-los{
margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:11px;
background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);font-weight:700;font-size:.84rem;transition:.2s;
}
.thema-karte:hover .thema-los{background:var(--c);color:#04201f}
/* Kleine Überschrift über einem Raster — wie .einstieg-lbl */
.lbl{
display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
margin:0 0 14px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--fg-3);
}
.lbl span{text-transform:none;letter-spacing:0;font-weight:500}
/* Sprechblase des Maskottchens — wie .einstieg-blase */
.blase{
position:relative;background:var(--raised);border:1px solid var(--line-2);
border-radius:14px;padding:10px 14px;font-size:.86rem;font-weight:600;color:var(--fg);line-height:1.4;
}
.blase::after{
content:"";position:absolute;right:-7px;top:50%;margin-top:-6px;
border:6px solid transparent;border-left-color:var(--line-2);border-right:0;
}
.blase.links::after{right:auto;left:-7px;border-left-color:transparent;border-right:6px solid var(--line-2);border-left:0}
.ila{display:block;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
/* Tasten wie in der Befehlspalette */
kbd{
font-family:var(--f-sans);font-size:.74rem;font-weight:700;color:var(--fg);
background:var(--raised-2);border:1px solid var(--line-2);border-bottom-width:2px;
border-radius:6px;padding:1px 6px;
}
/* Herkunft an jeder Zahl — wie HerkunftBadge in der Anwendung */
.herkunft{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid}
.herkunft::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.herkunft.amtlich{color:var(--teal);border-color:rgba(45,195,189,.35);background:var(--teal-dim)}
.herkunft.rechnung{color:var(--violet);border-color:rgba(139,124,246,.35);background:rgba(139,124,246,.12)}
.herkunft.beobachtet{color:var(--amber);border-color:rgba(233,162,59,.35);background:var(--amber-dim)}
/* Film mit Kapiteln — gemeinsam für Startseite und Filmseiten */
.filmraster{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(250px,.72fr);gap:clamp(18px,2.4vw,30px);align-items:start}
@media(max-width:960px){.filmraster{grid-template-columns:minmax(0,1fr)}}
.kapitel{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.kapitel-hd{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);padding:13px 16px;border-bottom:1px solid var(--line)}
.kapitel .ch{
display:grid;grid-template-columns:44px 1fr;gap:10px;width:100%;text-align:left;cursor:pointer;
background:none;border:0;border-bottom:1px solid var(--line);padding:9px 16px;
font-family:var(--f-sans);font-size:.84rem;color:var(--fg-2);transition:background .18s,color .18s;
}
.kapitel .ch:last-child{border-bottom:0}
.kapitel .ch:hover{background:var(--raised);color:var(--fg)}
.kapitel .ch.an{background:rgba(45,195,189,.08);color:var(--fg)}
.kapitel .ch.an .ch-t{color:var(--teal)}
.kapitel .ch-t{font-family:var(--f-mono);font-size:.76rem;color:var(--fg-4);font-variant-numeric:tabular-nums}
/* Anfrageformular */
.formular{display:grid;gap:12px}
.formular .zeile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:620px){.formular .zeile{grid-template-columns:minmax(0,1fr)}}
.formular label{display:grid;gap:6px;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.formular input,.formular select,.formular textarea{
font:inherit;font-size:.92rem;text-transform:none;letter-spacing:0;font-weight:500;color:var(--fg);
background:var(--raised);border:1px solid var(--line-2);border-radius:11px;padding:11px 13px;width:100%;
transition:border-color .2s;
}
.formular textarea{min-height:92px;resize:vertical}
.formular input:focus,.formular select:focus,.formular textarea:focus{outline:none;border-color:var(--teal)}
.formular .meldung{font-size:.86rem;min-height:1.4em;margin:0}
.formular .meldung.ok{color:var(--teal)}
.formular .meldung.fehler{color:var(--rose)}
/* ── Polarlicht: Verlauf hinter jeder Seite (×4
) ── */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--ink)}
.aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.32;will-change:transform}
.aurora i:nth-child(1){width:46vw;height:46vw;left:-10vw;top:-12vw;background:#2dc3bd;animation:treiben1 26s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:40vw;height:40vw;right:-12vw;top:8vh;background:#e78223;opacity:.24;animation:treiben2 31s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:34vw;height:34vw;left:30vw;bottom:-18vw;background:#d2691a;opacity:.16;animation:treiben3 35s ease-in-out infinite alternate}
.aurora i:nth-child(4){width:30vw;height:30vw;right:6vw;bottom:-10vw;background:#2dc3bd;opacity:.14;animation:treiben1 29s ease-in-out infinite alternate-reverse}
.aurora::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,transparent 0,rgba(5,8,14,.55) 70%),
radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.2px) 0 0/26px 26px}
@keyframes treiben1{to{transform:translate(12vw,10vh) scale(1.15)}}
@keyframes treiben2{to{transform:translate(-14vw,16vh) scale(.9)}}
@keyframes treiben3{to{transform:translate(-10vw,-14vh) scale(1.2)}}
@media(prefers-reduced-motion:reduce){.aurora i{animation:none}}
/* ══════════════════════════════════════════════════════════════════════════
Bausteine der Landingpage, für alle Seiten (seit 2026-10-01)
Fenster der Anwendung als Grafik, Bewegung nur im Bild (.anim → .spielt,
gesetzt von lokalis-site.js), Verlaufsschrift, Themenabschnitte, Zahlen-
kacheln, Filmrahmen, ILA im Kreis und die Erklärkarte.
══════════════════════════════════════════════════════════════════════════ */
.anim *,.anim *::before,.anim *::after{animation-play-state:paused !important}
.anim.spielt *,.anim.spielt *::before,.anim.spielt *::after{animation-play-state:running !important}
section{position:relative}
.abschnitt{padding-block:clamp(80px,11vw,150px)}
.grad{background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:glanz 9s ease-in-out infinite alternate}
@keyframes glanz{to{background-position:100% 0}}
.zentriert{text-align:center;margin-inline:auto}
.kopfzeile{max-width:760px;margin:0 auto clamp(40px,5vw,64px);text-align:center}
.kopfzeile .lede{margin:18px auto 0;max-width:56ch}
.pille{display:inline-flex;align-items:center;gap:10px;padding:6px 8px 6px 6px;border-radius:999px;background:rgba(14,21,36,.7);border:1px solid var(--line-2);font-size:.82rem;font-weight:600;color:var(--fg-2);text-decoration:none;backdrop-filter:blur(8px)}
.pille b{background:var(--teal);color:#04201f;border-radius:999px;padding:3px 9px;font-size:.72rem}
.pille:hover{border-color:var(--line-3);color:var(--fg)}
/* ── Fenster (Attrappe der Anwendung) ─────────────────────────────────── */
.fenster{position:relative;border-radius:18px;background:linear-gradient(180deg,rgba(20,28,46,.92),rgba(10,15,26,.96));border:1px solid var(--line-2);
box-shadow:0 60px 120px -50px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.02) inset;overflow:hidden;backdrop-filter:blur(10px)}
.fenster::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
background:linear-gradient(140deg,color-mix(in srgb,var(--c,#2dc3bd) 60%,transparent),transparent 35%,transparent 65%,color-mix(in srgb,var(--c2,#e78223) 50%,transparent));
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.f-leiste{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);background:rgba(5,8,14,.35)}
.f-leiste i{width:10px;height:10px;border-radius:50%;background:#1c2d47}
.f-leiste i:nth-child(1){background:#f2617a99}.f-leiste i:nth-child(2){background:#e9a23b99}.f-leiste i:nth-child(3){background:#10b98199}
.f-leiste span{margin-left:10px;font-size:.74rem;color:var(--fg-3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f-leiste .such{margin-left:auto;display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:8px;border:1px solid var(--line-2);font-size:.7rem;color:var(--fg-4)}
.f-inhalt{padding:clamp(14px,2vw,22px)}
.f-titel{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin:0 0 10px}
.feld{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px}
.thema-abschnitt{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(32px,5vw,80px);align-items:center;padding-block:clamp(56px,7vw,100px)}
.thema-abschnitt.gedreht{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)}
.thema-abschnitt.gedreht .t-text{order:2}
@media(max-width:960px){.thema-abschnitt,.thema-abschnitt.gedreht{grid-template-columns:minmax(0,1fr)}.thema-abschnitt.gedreht .t-text{order:0}}
.t-text .t-kopf{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.t-text .t-icon{width:44px;height:44px;border-radius:13px;box-shadow:0 0 40px -6px var(--c)}
.t-text .t-icon svg{width:22px;height:22px}
.t-text .nr{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
.t-text h2{font-size:clamp(2rem,3.8vw,3.1rem);font-weight:800;letter-spacing:-.04em;line-height:1.05;color:var(--fg);margin:0 0 14px}
.t-text h2 span{color:var(--c)}
.t-text p{font-size:1.02rem;color:var(--fg-2);margin:0 0 22px;max-width:44ch}
.punkte{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.punkte li{display:flex;align-items:center;gap:11px;font-size:.92rem;color:var(--fg)}
.punkte li::before{content:"";width:20px;height:20px;border-radius:7px;flex:none;
background:color-mix(in srgb,var(--c) 18%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center no-repeat}
.wz-zeile{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}
/* ── Zahlen ───────────────────────────────────────────────────────────── */
.zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:860px){.zahlen{grid-template-columns:repeat(2,minmax(0,1fr))}}
.zahl{position:relative;overflow:hidden;border-radius:18px;padding:24px 22px;background:rgba(10,15,26,.7);border:1px solid var(--line)}
.zahl::before{content:"";position:absolute;inset:auto -30% -60% -30%;height:120%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 30%,transparent),transparent);opacity:.6}
.zahl b{position:relative;display:block;white-space:nowrap;font-size:clamp(2.2rem,4.2vw,3.4rem);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--fg);font-variant-numeric:tabular-nums}
.zahl b .u{font-size:.45em;color:var(--c);margin-left:.15em;letter-spacing:0}
.zahl > span{position:relative;display:block;margin-top:10px;font-size:.86rem;color:var(--fg-3)}
/* ── Film ─────────────────────────────────────────────────────────────── */
.filmrahmen{position:relative;border-radius:20px;padding:2px;background:conic-gradient(from var(--w,0deg),#2dc3bd,#5fd0b4,#e78223,#d2691a,#2dc3bd);animation:rahmen 8s linear infinite}
@property --w{syntax:"";inherits:false;initial-value:0deg}
@keyframes rahmen{to{--w:360deg}}
.filmrahmen .videowrap{border:0;border-radius:18px}
/* ILA im Kreis — wie IlaGlyph in components/Ila.tsx: Ausschnitt Kopf und
Brille aus willkommen.webp (460×320, Quadrat 200 um 175/100). Sie schaut
heraus, ein Klick öffnet die Tour beim passenden Schritt. */
.ila-kreis{--g:44px;position:relative;display:inline-flex;align-items:center;gap:9px;margin-left:auto;padding:3px 12px 3px 3px;border-radius:999px;
background:rgba(14,21,36,.85);border:1px solid var(--line-2);color:var(--fg-2);font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;
transition:border-color .2s,color .2s,background .2s}
.ila-kreis:hover,.ila-kreis:focus-visible{border-color:rgba(231,130,35,.6);color:var(--fg);background:rgba(231,130,35,.08);outline:none}
.ila-kreis .glyph{position:relative;width:var(--g);height:var(--g);border-radius:50%;overflow:hidden;flex:none;
background:radial-gradient(circle at 50% 35%,rgba(45,195,189,.28),rgba(14,21,36,1) 75%);box-shadow:0 0 0 2px var(--cx)}
.ila-kreis .glyph img{position:absolute;max-width:none;width:calc(var(--g) * 2.3);height:auto;left:calc(var(--g) * -.375);top:calc(var(--g) * .06);transition:transform .35s var(--ease-out)}
.ila-kreis:hover .glyph img{transform:translateY(-3px) rotate(-4deg)}
.ila-kreis .glyph::after{content:"";position:absolute;inset:0;border-radius:50%}
.ila-kreis::before{content:"";position:absolute;left:1px;top:50%;width:calc(var(--g) + 4px);height:calc(var(--g) + 4px);margin-top:calc(var(--g) / -2 - 2px);border-radius:50%;border:2px solid var(--cx);opacity:0;animation:ring 2.6s ease-out infinite;pointer-events:none}
.ila-kreis.gross{--g:52px;margin-left:0;font-size:.84rem}
.f-leiste .ila-kreis{--g:24px;margin-left:8px;padding:2px 9px 2px 2px;font-size:.7rem}
.f-leiste .such{margin-left:auto}
.t-text .t-kopf .ila-kreis{--g:38px}
@media(max-width:1180px) and (min-width:961px){.t-text .t-kopf .ila-kreis-text{display:none}.t-text .t-kopf .ila-kreis{padding-right:3px}}
.ila-oben{position:absolute;z-index:3;top:16px;left:50%;transform:translateX(-50%)}
@media(max-width:700px){.ila-oben{position:static;transform:none;margin-bottom:12px}}
.tourkarte{position:fixed;z-index:950;right:clamp(12px,3vw,32px);bottom:clamp(12px,3vw,32px);width:min(380px,calc(100vw - 24px));
background:rgba(14,21,36,.97);border:1px solid var(--line-2);border-radius:18px;padding:16px 16px 14px;
box-shadow:0 30px 70px -20px rgba(0,0,0,.95),0 0 0 1px rgba(45,195,189,.08);backdrop-filter:blur(14px);
opacity:0;transform:translateY(16px) scale(.97);pointer-events:none;transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.tourkarte.offen{opacity:1;transform:none;pointer-events:auto}
.tourkarte::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:var(--verlauf);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7}
.tk-kopf{display:flex;align-items:flex-end;gap:12px;margin-bottom:8px}
.tk-kopf img{width:84px;height:auto;margin:-46px 0 -4px -6px;filter:drop-shadow(0 12px 18px rgba(0,0,0,.5))}
.tk-kopf small{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.tk-zu{margin-left:auto;align-self:flex-start;background:none;border:0;color:var(--fg-3);font-size:1.3rem;line-height:1;cursor:pointer;padding:2px 4px}
.tk-zu:hover{color:var(--fg)}
.tourkarte h4{margin:0 0 6px;font-size:1.02rem;font-weight:800;letter-spacing:-.02em;color:var(--fg)}
.tourkarte p{margin:0;font-size:.88rem;line-height:1.6;color:var(--fg-2)}
.tk-punkte{display:flex;gap:4px;margin:14px 0 12px}
.tk-punkte i{height:4px;width:8px;border-radius:3px;background:var(--line-3);transition:.3s}
.tk-punkte i.an{width:22px;background:var(--teal)}
.tk-fuss{display:flex;align-items:center;gap:8px}
.tk-fuss .ende{background:none;border:0;color:var(--fg-3);font:inherit;font-size:.8rem;cursor:pointer;padding:0}
.tk-fuss .ende:hover{color:var(--fg)}
.tk-fuss .btn{padding:8px 14px;font-size:.84rem}
.tk-fuss .rechts{margin-left:auto;display:flex;gap:6px}
.tour-ziel{outline:2px solid rgba(45,195,189,.6);outline-offset:10px;box-shadow:0 0 70px -10px rgba(45,195,189,.45) !important;transition:outline-offset .4s var(--ease-out)}
@keyframes schweben{50%{transform:translateY(-10px)}}
@keyframes balken{0%{transform:scaleX(.08)}35%,85%{transform:scaleX(1)}100%{transform:scaleX(.08)}}
@keyframes zeichnen{0%{stroke-dashoffset:260}55%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:-260}}
@keyframes puls{50%{opacity:.25}}
@keyframes glimm{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes drehen{to{transform:rotate(360deg)}}
@keyframes ring{0%{opacity:.8;transform:scale(.9)}100%{opacity:0;transform:scale(1.35)}}
.linie{stroke-dasharray:260;stroke-dashoffset:260;animation:zeichnen 5s ease-out infinite}
.balken{transform-box:fill-box;transform-origin:left;animation:balken 4.5s var(--ease-out) infinite}
.puls{animation:puls 2.4s ease-in-out infinite}
.glimm{animation:glimm 3.2s ease-in-out infinite}
.schwebt{animation:schweben 6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
.anim *,.anim *::before,.anim *::after,.grad,.filmrahmen,.ila-kreis::before,.schwebt{animation:none !important}
.linie{stroke-dashoffset:0}
}
/* Kleine Kennzahlkachel im Fenster (aus der Startseite) */
.mini{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.mini span{font-size:.68rem;color:var(--fg-3);font-weight:600}
.mini b{display:block;font-size:1.15rem;font-weight:800;color:var(--fg);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mini svg{width:100%;height:24px;margin-top:4px}
/* Lange deutsche Komposita („Standortentscheidungen") sprengen sonst auf dem
Handy die Breite — große Überschriften dürfen trennen (lang="de" am ). */
.display,.t-text h2,.cta-raster h2,.ila-band h2{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
/* Nach-oben-Knopf (lokalis-site.js) — im Hausverlauf, über der Tour-Karte nicht */
.nach-oben{position:fixed;right:clamp(14px,2.5vw,28px);bottom:clamp(14px,2.5vw,28px);z-index:940;width:46px;height:46px;border-radius:50%;
display:grid;place-items:center;cursor:pointer;color:#05080e;border:0;background:var(--verlauf);
box-shadow:0 14px 30px -10px rgba(231,130,35,.55),0 0 0 1px rgba(255,255,255,.08) inset;
opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.nach-oben.sichtbar{opacity:1;transform:none;pointer-events:auto}
.nach-oben:hover{transform:translateY(-3px)}
.nach-oben:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.tourkarte.offen ~ .nach-oben{opacity:0;pointer-events:none}
/* Cookie-Hinweis (lokalis-site.js) — unten links, der Nach-oben-Knopf sitzt rechts */
.cookie-hinweis{position:fixed;left:clamp(12px,2.5vw,28px);bottom:clamp(12px,2.5vw,28px);z-index:960;width:min(420px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow-y:auto;overflow-x:hidden;
background:rgba(14,21,36,.97);border:1px solid var(--line-2);border-radius:18px;padding:18px 18px 16px;backdrop-filter:blur(14px);
box-shadow:0 30px 70px -20px rgba(0,0,0,.95);opacity:0;transform:translateY(16px);pointer-events:none;
transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.cookie-hinweis::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:var(--verlauf);opacity:.6;
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.cookie-hinweis.offen{opacity:1;transform:none;pointer-events:auto}
.cookie-hinweis p{margin:0 0 12px;font-size:.84rem;line-height:1.6;color:var(--fg-2)}
.cookie-hinweis a{color:var(--teal)}
.cookie-hinweis .ch-titel{font-size:.98rem;font-weight:800;color:var(--fg);letter-spacing:-.01em;margin-bottom:6px}
.ch-knoepfe{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.ch-knoepfe .btn{padding:9px 16px;font-size:.84rem}
.ch-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
.ch-zeile b{display:block;color:var(--fg);font-size:.88rem}
.ch-zeile small{display:block;font-size:.76rem;line-height:1.55;color:var(--fg-3);margin-top:3px}
.ch-immer{font-size:.7rem;font-weight:700;color:var(--teal);white-space:nowrap;padding-top:2px}
.ch-notiz{font-size:.76rem !important;color:var(--fg-3) !important;border-top:1px solid var(--line);padding-top:12px}
.cookie-link{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:none}
.cookie-link:hover{color:var(--teal)}