/* ============================================================
FrΛIa - fraia.de - v6.1 „Voll kreativ"
Inhalt 1:1 aus v6 · Fonts self-hosted (kein CDN - EU/CSP)
============================================================ */
/* Hausschrift: Hanken Grotesk (Variable, self-hosted) */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/Hanken_Grotesk/HankenGrotesk-VariableFont_wght.woff2') format('woff2-variations'),url('fonts/Hanken_Grotesk/HankenGrotesk-VariableFont_wght.woff2') format('woff2'),url('fonts/Hanken_Grotesk/HankenGrotesk-VariableFont_wght.ttf') format('truetype');}
@font-face{font-family:'Hanken Grotesk';font-style:italic;font-weight:100 900;font-display:swap;src:url('fonts/Hanken_Grotesk/HankenGrotesk-Italic-VariableFont_wght.woff2') format('woff2-variations'),url('fonts/Hanken_Grotesk/HankenGrotesk-Italic-VariableFont_wght.woff2') format('woff2'),url('fonts/Hanken_Grotesk/HankenGrotesk-Italic-VariableFont_wght.ttf') format('truetype');}
/* Inter springt nur für die vier Zeichen ein, die Hanken Grotesk fehlen:
Λ (U+039B, die Wortmarke), ↻ (U+21BB), ● (U+25CF), ✓ (U+2713).
Statt der Vollschrift (854 KB) liegt hier ein Subset auf genau diese vier
Glyphen (3,8 KB). Die unicode-range sorgt zusätzlich dafür, dass der Browser
die Datei überhaupt nur anfordert, wenn eines der Zeichen auf der Seite steht.
Nicht abgedeckt bleiben ✉ ✕ ➤ - die hat auch Inter nicht, sie fallen wie
bisher auf system-ui zurück. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/Inter/Inter-subset-fraia.woff2') format('woff2-variations'),url('fonts/Inter/Inter-subset-fraia.woff2') format('woff2'),url('fonts/Inter/Inter-subset-fraia.ttf') format('truetype');unicode-range:U+039B,U+21BB,U+25CF,U+2713;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');}
:root {
--stone: #F4F3F0;
--stone-2: #ECEAE6;
--white: #FFFFFF;
--text: #1B1D21;
--muted: #5A5E62;
--subtle: #918D84;
--ink: #101214;
--emerald: #0F5F59;
--emerald-deep: #0F2E2A;
--teal: #34B6AA;
--teal-bright: #4FD8CB;
--border: #DCD8CE;
--radius: 12px;
--radius-lg: 16px;
--t: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
--font-sans: 'Hanken Grotesk', 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', monospace;
--max-w: 1160px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); background: var(--stone); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg { max-width: 100%; }
/* Präventiver Umbruch langer Strings (URLs/Mails) statt auf overflow:hidden angewiesen - R1-Härtung */
p, li, td { overflow-wrap: anywhere; }
a { color: var(--emerald); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--teal); }
::selection { background: rgba(52,182,170,0.25); color: var(--text); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: var(--radius); }
/* Sprung an der Navigation vorbei - nur sichtbar, wenn er per Tabulator
erreicht wird. Wer die Seite mit der Tastatur bedient, muss sich sonst durch
die komplette Kopfleiste hangeln, auf jeder Seite neu. */
.skiplink { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--emerald); color: #fff; font-weight: 700; font-size: 15px; padding: 14px 22px; border-radius: 0 0 var(--radius) 0; }
.skiplink:focus { left: 0; color: #fff; outline: 2px solid var(--teal-bright); outline-offset: -4px; }
#inhalt { display: block; scroll-margin-top: 90px; }
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 48px; }
.mono { font-family: var(--font-mono); }
.eyebrow { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--emerald); }
/* ── Navigation ── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; transition: background var(--t), border-color var(--t), backdrop-filter var(--t); }
.nav--scrolled { background: rgba(16,18,20,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: rgba(255,255,255,0.06); }
.nav__inner { max-width: 1320px; margin: 0 auto; padding: 22px 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: padding var(--t); }
.nav--scrolled .nav__inner { padding-top: 13px; padding-bottom: 13px; }
.brand { font-weight: 300; font-size: 31px; letter-spacing: 0.02em; color: #f0f0f0; white-space: nowrap; }
.brand .accent { font-weight: 400; color: var(--teal); }
.brand .lam { position: relative; } /* .lam-Unterstrich ab CI 2.0 entfernt (kein Λ-Unterstrich) */
.nav__links { display: flex; gap: clamp(20px,2.4vw,34px); list-style: none; align-items: center; }
.nav__links a { color: #9DA3A7; font-size: 14.5px; font-weight: 500; }
.nav__links a:hover { color: var(--teal-bright); }
.nav__links > li:not(.nav__drop) > a:not(.nav__cta) { position: relative; }
.nav__links > li:not(.nav__drop) > a:not(.nav__cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--teal-bright); transform: scaleX(0); transform-origin: left; transition: transform var(--t); }
.nav__links > li:not(.nav__drop) > a:not(.nav__cta):hover::after,
.nav__links > li.is-active:not(.nav__drop) > a:not(.nav__cta)::after { transform: scaleX(1); }
.nav__links > li.nav__drop.is-active > a { color: var(--teal-bright); }
.nav__cta { color: #06231F !important; background: var(--teal); font-size: 13.5px; font-weight: 700; padding: 10px 18px; border-radius: var(--radius); white-space: nowrap; transition: background var(--t); }
.nav__cta:hover { background: var(--teal-bright); color: #06231F !important; }
.nav__burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 10px; background: none; border: 0; cursor: pointer; }
.nav__burger span { display: block; height: 2px; width: 100%; background: #E9ECEE; border-radius: 2px; transition: transform var(--t), opacity var(--t); }
.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ── Hero ── */
.hero { position: relative; overflow: hidden; background: var(--ink); color: #E9ECEE; padding: 180px 0 140px; }
.hero__glyph { position: absolute; right: -50px; top: 50%; transform: translateY(-50%); font-size: clamp(320px,42vw,600px); line-height: 1; font-weight: 200; color: transparent; -webkit-text-stroke: 1.5px rgba(52,182,170,0.32); pointer-events: none; user-select: none; }
.hero .eyebrow { color: var(--teal-bright); }
.hero h1 { position: relative; font-size: clamp(46px,6.6vw,86px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.99; margin: 18px 0 26px; max-width: 840px; }
.hero h1 .t { color: var(--teal); }
.hero h1 .accent { color: var(--teal); } /* Marken-Akzent ΛI in der Hero-Headline (dunkler Grund) */
.hero__sub { position: relative; font-size: 19.5px; line-height: 1.6; color: #9DA3A7; max-width: 580px; margin-bottom: 36px; }
.hero__actions { position: relative; display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.btn { display: inline-block; font-size: 15.5px; font-weight: 700; padding: 15px 28px; border-radius: var(--radius); white-space: nowrap; transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t); }
button.btn { -webkit-appearance: none; appearance: none; border: none; cursor: pointer; font-family: inherit; }
.btn--teal { background: var(--teal); color: #06231F; }
.btn--teal:hover { background: var(--teal-bright); color: #06231F; box-shadow: 0 10px 30px rgba(52,182,170,0.35); }
.btn--ghost { color: #C7CCD1; border: 1px solid rgba(255,255,255,0.28); }
.btn--ghost:hover { border-color: var(--teal); color: var(--teal-bright); }
.btn--white { background: #fff; color: var(--emerald-deep); }
.btn--white:hover { color: var(--emerald); box-shadow: 0 10px 30px rgba(0,0,0,0.18); }
.btn--outline { color: #fff; border: 1px solid rgba(255,255,255,0.45); }
.btn--outline:hover { border-color: #fff; background: rgba(255,255,255,0.08); color: #fff; }
/* ── Sektionen ── */
.sec { position: relative; padding: 92px 0; }
.sec--center { padding-top: 80px; padding-bottom: 80px; }
.sec--stone { background: var(--stone); }
.sec--stone2 { background: var(--stone-2); }
.sec--emerald { background: var(--emerald-deep); color: #D8EEEA; }
.giant { position: absolute; top: 44px; right: 48px; font-family: var(--font-mono); font-size: clamp(90px,12vw,160px); font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(15,95,89,0.22); pointer-events: none; user-select: none; }
.sec--emerald .giant { -webkit-text-stroke: 1px rgba(79,216,203,0.22); }
.sec h2 { font-size: clamp(38px,4.8vw,62px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; margin: 12px 0 18px; max-width: 760px; }
.sec--stone h2 .t, .sec--stone2 h2 .t { color: var(--emerald); }
.sec--emerald h2 { color: #F0FAF8; }
.sec--emerald h2 .t { color: var(--teal-bright); }
.sec--emerald .eyebrow { color: var(--teal-bright); }
.lead { font-size: 18px; line-height: 1.7; color: var(--muted); max-width: 640px; margin-bottom: 56px; }
.sec--emerald .lead { color: #A9CEC8; }
/* Kurze Zuordnung Produkt -> Einsatzfeld, als Überblick unter einem Absatz */
.zuordnung { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 24px; }
.zuordnung li { display: grid; grid-template-columns: 5.5em auto; align-items: baseline;
font-size: 16.5px; line-height: 1.5; color: var(--text); }
.zuordnung b { font-weight: 700; color: var(--emerald); }
.zuordnung .pf { color: var(--subtle); margin-right: 9px; }
.sec--emerald .zuordnung li { color: #D8EEEA; }
.sec--emerald .zuordnung b { color: var(--teal-bright); }
/* Textblock unter dem Lead: Zwischen-Aussage plus Fließtext, ohne Karten-Optik */
.leadblock { max-width: 640px; }
.leadblock h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); margin-bottom: 12px; }
.leadblock p { font-size: 17px; line-height: 1.7; color: var(--muted); }
.leadblock p + p { margin-top: 20px; }
.sec--emerald .leadblock h3 { color: #F0FAF8; }
.sec--emerald .leadblock p { color: #A9CEC8; }
/* Editorial-Zeilenliste (Engpass) */
.rows { max-width: 900px; }
.row { display: grid; grid-template-columns: 64px 250px 1fr; gap: 28px; padding: 30px 0; border-bottom: 1px solid var(--border); align-items: baseline; }
.row:first-child { border-top: 1px solid var(--border); }
.row .n { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--teal); }
.row h4 { font-size: 21px; font-weight: 700; color: var(--emerald); letter-spacing: -0.01em; }
.row p { font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.row .src { color: var(--subtle); font-size: 0.82em; }
/* Schritte (emerald, Hairline-Raster) */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(79,216,203,0.18); border: 1px solid rgba(79,216,203,0.18); border-radius: var(--radius-lg); overflow: hidden; }
.step { background: var(--emerald-deep); padding: 36px 32px; }
.step .n { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--teal-bright); }
.step h3, .step h4 { font-size: 22px; font-weight: 700; color: #F0FAF8; margin: 14px 0 10px; }
.step p { font-size: 15px; line-height: 1.62; color: #A9CEC8; }
/* Use-Cases (weiße Editorial-Karten auf Stone) */
.uses { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.use { background: var(--white); border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: 0 2px 4px rgba(40,30,10,0.04), 0 14px 40px rgba(40,30,10,0.08); transition: box-shadow var(--t); }
.use:hover { box-shadow: 0 4px 8px rgba(40,30,10,0.06), 0 20px 52px rgba(40,30,10,0.12); }
.use .ce { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #128C82; margin-bottom: 12px; }
.use h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; color: var(--text); }
.use p { font-size: 15px; line-height: 1.62; color: var(--muted); }
.use--accent { background: var(--emerald); box-shadow: 0 14px 44px rgba(15,95,89,0.30); }
.use--accent .ce { color: #7FE9DD; }
.use--accent h3 { color: #fff; }
.use--accent p { color: #C6E3DF; }
/* Tabellen
.tbl-wrap trägt Rahmen, Rundung und das horizontale Scrollen - es clippt zugleich die
Ecken der Tabelle, deshalb braucht .tbl selbst keinen Radius. Immer beide zusammen,
ausgenommen .tbl--plain (steht ohne Wrapper in einer Karte). */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.92); background: var(--emerald); padding: 14px 16px; border-bottom: 1px solid var(--emerald); }
.tbl td { padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--muted); line-height: 1.45; vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td strong { color: var(--text); font-weight: 600; }
/* --wide: mehrspaltige Datentabelle - erzwingt Mindestbreite (scrollt im Wrap), letzte Spalte bricht nicht */
.tbl--wide { min-width: 720px; }
.tbl--wide td:last-child, .tbl--wide th:last-child { white-space: nowrap; }
/* --center: Vergleichsraster - Spalten ab der zweiten zentriert, erste Spalte als Zeilen-Label */
.tbl--center th:not(:first-child), .tbl--center td:not(:first-child) { text-align: center; }
.tbl--center td:first-child { color: var(--text); font-weight: 600; }
/* --map: zwei Spalten Fließtext (Zuordnung links -> rechts); auf dem Handy gestapelt statt gequetscht */
.tbl--map td:first-child, .tbl--map th:first-child { width: 38%; }
@media (max-width: 560px) {
.tbl--map thead { display: none; }
.tbl--map tr { display: block; border-bottom: 1px solid var(--border); }
.tbl--map tr:last-child { border-bottom: 0; }
.tbl--map td { display: block; width: auto; border-bottom: 0; }
.tbl--map td:first-child { width: auto; font-weight: 700; color: var(--text); padding: 14px 16px 0; }
.tbl--map td:last-child { padding: 2px 16px 14px; }
}
/* --plain: in eine Karte eingebettet - ohne Wrap/Rahmen, dezenter Kopf, Zahlen rechts in Mono.
Ein Emerald-Balken wäre in einer kleinen Karte zu laut. */
.tbl--plain th { background: none; color: var(--subtle); font-size: 11.5px; letter-spacing: 0.04em; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.tbl--plain td { color: var(--text); padding: 8px 10px; }
.tbl--plain td:last-child, .tbl--plain th:last-child { text-align: right; font-family: var(--font-mono); }
/* __hl: eine Spalte hervorheben (z.B. das eigene Produkt im Vergleich) */
.tbl th.tbl__hl { box-shadow: inset 0 -3px 0 var(--teal); }
.tbl td.tbl__hl { background: rgba(15,95,89,0.04); }
/* Zell-Helfer */
.tbl .yes { color: var(--emerald); font-weight: 700; }
.tbl .no { color: var(--subtle); }
.tbl .hint { font-size: 12.5px; color: var(--muted); }
/* CTA */
.cta { background: var(--emerald); color: #fff; padding: 110px 0; position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; left: -30px; bottom: -80px; font-size: 380px; line-height: 1; font-weight: 200; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.10); pointer-events: none; }
.cta .eyebrow { color: #7FE9DD; }
.cta h2 { font-size: clamp(38px,4.6vw,58px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.03; margin: 12px 0 16px; }
.cta__sub { font-size: 18px; line-height: 1.65; color: #C6E3DF; max-width: 600px; margin-bottom: 34px; }
.cta__actions { display: flex; gap: 14px; flex-wrap: wrap; position: relative; }
/* Footer */
.footer { background: var(--ink); color: #9DA3A7; padding: 84px 0 36px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 56px; }
.footer__brand { font-weight: 300; font-size: 26px; letter-spacing: -0.01em; color: #f0f0f0; margin-bottom: 14px; }
.footer__brand b { font-weight: 500; color: var(--teal); }
.footer__about { font-size: 14.5px; line-height: 1.65; }
.footer__about a { color: var(--teal); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.footer__col-title { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-bright); margin-bottom: 16px; }
.footer__list { list-style: none; }
.footer__list li { margin: 9px 0; }
.footer__list a { color: #9DA3A7; font-size: 14.5px; }
.footer__list a:hover { color: var(--teal-bright); }
.footer__base { display: flex; justify-content: flex-start; gap: 8px 28px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 13px; color: #6B7176; }
.footer__base a { color: #9DA3A7; }
/* Reveal (ruhig, bewegungsarm) */
@media (prefers-reduced-motion: no-preference) {
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
}
@media (max-width: 960px) {
.wrap { padding: 0 24px; }
.nav__inner { padding: 14px 24px; }
.nav__burger { display: flex; width: 44px; height: 44px; }
.nav__links { position: fixed; top: 60px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
background: rgba(16,18,20,0.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255,255,255,0.08); padding: 10px 24px 22px; max-height: calc(100vh - 60px); overflow-y: auto;
transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity var(--t), transform var(--t), visibility var(--t); }
.nav__links.is-open { transform: none; opacity: 1; visibility: visible; }
.nav__links li { width: 100%; }
.nav__links > li > a { display: block; padding: 13px 0; font-size: 16px; }
.nav__links > li > a::after { display: none; }
.nav__cta { text-align: center; margin-top: 10px; }
.nav__drop > a::after { display: none; }
.nav__links .nav__menu { position: static; transform: none; opacity: 1; visibility: visible; min-width: 0; background: none; border: none; box-shadow: none; padding: 0 0 6px 14px; }
.nav__links .nav__menu a { padding: 9px 0; font-size: 15px; }
.hero { padding: 140px 0 100px; }
.hero__glyph { opacity: 0.5; right: -120px; }
.row { grid-template-columns: 48px 1fr; }
.row p { grid-column: 2; }
.steps, .uses { grid-template-columns: 1fr; }
.footer__grid { grid-template-columns: 1fr 1fr; }
.footer__list a { display: inline-block; padding: 10px 0; } /* größere Tap-Fläche auf Touch - R2 */
.giant { font-size: 80px; top: 28px; right: 24px; }
}
/* ============================================================
UNTERSEITEN - geteilte Komponenten (v7)
Gleiche Sprache wie die Startseite: Stone, Hanken, Emerald-
Akzente, Mono-Eyebrows, Hairlines, weiche Radien, kein
Hover-Hüpfen (nur Farbe/Schatten).
============================================================ */
/* Produkte-Dropdown in der Navigation */
.nav__drop { position: relative; }
.nav__drop > a:not([href]) { cursor: default; }
.nav__drop > a::after { content: "\25BE"; margin-left: 6px; font-size: 0.8em; opacity: 0.65; }
.nav__menu { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
min-width: 280px; background: rgba(16,18,20,0.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding: 8px; list-style: none;
opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t); box-shadow: 0 20px 50px rgba(0,0,0,0.45); }
.nav__drop:hover .nav__menu, .nav__drop:focus-within .nav__menu { opacity: 1; visibility: visible; }
.nav__menu li { margin: 0; }
.nav__menu li:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.13); }
.nav__menu a { display: block; padding: 9px 12px; border-radius: 8px; color: #9DA3A7; font-size: 14px; font-weight: 500; }
.nav__menu a { line-height: 1.3; }
.nav__menu a .nm { display: block; font-weight: 600; color: #C7CCD1; }
.nav__menu a .nm2 { display: block; font-size: 11.5px; font-weight: 500; color: #7A8085; margin-top: 1px; }
.nav__menu a:hover { background: rgba(52,182,170,0.10); }
.nav__menu a:hover .nm { color: var(--teal-bright); }
.nav__links a.is-active { color: var(--teal-bright); }
/* Kompakter Seiten-Hero (Unterseiten) */
.phero { position: relative; overflow: hidden; background: var(--ink); color: #E9ECEE; padding: 152px 0 88px; }
/* Produkt-Hero mit Hintergrundbild + prominenter Produktname (Wortherkunft) */
.phero--img h1, .phero--img .phero__sub, .phero--img .phero__id, .phero--img .eyebrow { text-shadow: 0 2px 22px rgba(6,8,9,0.55); }
/* FAQ: prominenter Polaris-Bot-Link (oeffnet den Live-Chat) */
.faq-bot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: rgba(15,95,89,0.06); border: 1px solid rgba(15,95,89,0.18); border-radius: var(--radius-lg); padding: 18px 22px; margin-bottom: 24px; }
.faq-bot__ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: var(--emerald); color: #fff; display: grid; place-items: center; }
.faq-bot__ic svg { width: 22px; height: 22px; }
.faq-bot__tx { display: flex; flex-direction: column; flex: 1; min-width: 200px; }
.faq-bot__tx b { font-size: 15.5px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.faq-bot__tx span { font-size: 14px; color: var(--muted); }
/* Bild-Heroes: EINE content-unabhaengige Hoehe. Der Inhalt wird vertikal
zentriert, statt die Hoehe zu treiben - so springen die Heroes nicht mehr
je nach Textmenge (vorher 582-751px). padding-top haelt Abstand zur fixen Nav. */
/* Bild-Heroes (Umbau 30.07.2026, Höhe korrigiert 05.08.2026).
1. Die Höhe ist fest bei 648px - dieselbe wie der Startseiten-Hero, damit alle Seiten gleich
beginnen. Zwischenzeitlich wuchs sie mit clamp(648px, 45vw, 880px) mit der Fensterbreite,
um den Beschnitt des Motivs auszugleichen. Das war der falsche Hebel: Bei 1920px Breite
wurde der Hero 864px hoch und verdeckte auf einem 1080er Schirm praktisch alles darunter -
der Besucher sah kein Signal, dass die Seite weitergeht. Ein Bildausschnitt-Problem gehört
über background-position gelöst (siehe unten, je Seite steuerbar), nicht über die Höhe.
Gegenprobe bei 1920px: Bei allen Motiven bleibt das Wichtige sichtbar.
2. Das Bild wurde unbegrenzt hochskaliert (bei 3440px auf mehr als das Doppelte: unscharf und stark
beschnitten). Es liegt jetzt im ::before und ist auf 2400px begrenzt, zentriert, mit weichem
Auslauf in die dunkle Grundfarbe. Ab 2400px wird es also nicht mehr schlechter.
Das Bild kommt aus --hero-bild, die Abdunkelung aus --hero-schleier (beide je Seite gesetzt).
Vorbild war .phero--stars auf polaris.html, das diese Trennung schon vorher hatte. */
.phero--img, .hero--img { position: relative; background-color: var(--ink);
display: flex; align-items: center; min-height: 648px; padding-top: 88px; padding-bottom: 44px; }
.phero--img::before, .hero--img::before { content: ""; position: absolute; inset: 0; z-index: 0;
max-width: 2400px; margin-inline: auto;
background-image: var(--hero-bild); background-size: cover; background-position: center 15%; background-repeat: no-repeat; }
.phero--img::after, .hero--img::after { content: ""; position: absolute; inset: 0; z-index: 0;
background-image: var(--hero-schleier); }
/* Nur der Inhalt braucht einen Stapelplatz ueber den beiden Pseudo-Ebenen. Die .ai-tag NICHT
anfassen: sie sitzt schon absolut unten rechts und liegt mit z-index 3 ohnehin oben. */
.phero--img > .wrap, .hero--img > .wrap { position: relative; z-index: 1; }
/* Erst wenn der Schirm breiter ist als das Bild, braucht es den weichen Rand. Darunter waere er
nur ein unnoetiger Schleier auf den Bildkanten. */
@media (min-width: 2400px) {
.phero--img::before, .hero--img::before {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
}
}
.phero--img .wrap, .hero--img .wrap { width: 100%; }
.hero--img h1, .hero--img .hero__sub, .hero--img .eyebrow { text-shadow: 0 2px 22px rgba(6,8,9,0.55); }
/* Bild-Hero-Headline einheitlich mit den Produkt-Heroes (statt der grosser animierten Hero-Typo) -
haelt die Hoehe der Technik-Seite auf einer Linie mit den .phero--img. */
.hero--img h1 { font-size: clamp(40px, 5.4vw, 72px); }
.phero__id { display: flex; align-items: baseline; gap: 11px; margin-bottom: 15px; }
.phero__brand { font-weight: 300; font-size: 18px; letter-spacing: 0.02em; color: #c9d8d5; }
.phero__brand .accent { color: var(--teal-bright); font-weight: 400; }
.phero__product { font-family: var(--font-mono); font-weight: 700; font-size: clamp(18px, 2.3vw, 25px);
letter-spacing: 0.05em; text-transform: uppercase; color: #ffffff; }
.phero__glyph { position: absolute; right: -40px; top: 50%; transform: translateY(-50%); font-size: clamp(240px,34vw,460px);
line-height: 1; font-weight: 200; color: transparent; -webkit-text-stroke: 1.4px rgba(52,182,170,0.30); pointer-events: none; user-select: none; }
.phero .eyebrow { color: var(--teal-bright); }
.phero h1 { position: relative; font-size: clamp(40px,5.4vw,72px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.0; margin: 16px 0 22px; max-width: 820px; }
.phero h1 .t { color: var(--teal); }
.phero__sub { position: relative; font-size: 18.5px; line-height: 1.6; color: #9DA3A7; max-width: 640px; margin-bottom: 30px; }
/* Erklaerender Fliesstext unter dem Hero-Untertitel: kleiner gesetzt, in Absaetzen */
.phero__text { position: relative; max-width: 640px; margin: -8px 0 30px; display: flex; flex-direction: column; gap: 13px;
font-size: 16.5px; line-height: 1.62; color: #9DA3A7; }
.phero__text p { margin: 0; }
.phero__actions { position: relative; display: flex; gap: 14px; flex-wrap: wrap; }
.phero__note { position: relative; margin-top: 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--subtle); }
/* Section-Kopf (wiederverwendbar) */
.shead { max-width: 760px; margin-bottom: 48px; }
.shead h2 { font-size: clamp(32px,4vw,52px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.03; margin: 12px 0 18px; }
.sec--stone .shead h2 .t, .sec--stone2 .shead h2 .t { color: var(--emerald); }
.sec--center .shead { margin-left: auto; margin-right: auto; text-align: center; }
.sec--center .lead { margin-left: auto; margin-right: auto; }
/* Vergleich (Risiko vs. Lösung) */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cmp { border-radius: var(--radius-lg); padding: 30px 28px; }
.cmp__tag { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 14px; }
.cmp h3 { font-size: 20px; font-weight: 700; margin-bottom: 16px; letter-spacing: -0.01em; }
.cmp ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.cmp li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.55; }
.cmp--risk { background: var(--white); border: 1px solid var(--border); }
.cmp--risk .cmp__tag { color: #A15B4E; }
.cmp--risk h3 { color: var(--text); }
.cmp--risk li { color: var(--muted); }
.cmp--risk li::before { content: "\00D7"; position: absolute; left: 4px; top: -1px; color: #C06A57; font-weight: 700; font-size: 1.15em; }
.cmp--good { background: var(--emerald); color: #fff; box-shadow: 0 14px 44px rgba(15,95,89,0.28); }
.cmp--good .cmp__tag { color: #7FE9DD; }
.cmp--good h3 { color: #fff; }
.cmp--good li { color: #D3EBE7; }
.cmp--good li::before { content: "\2713"; position: absolute; left: 3px; top: 0; color: #7FE9DD; font-weight: 700; }
/* Feature-Karten (3-spaltig) */
.feats { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
/* Vier Karten nebeneinander; ab mittlerer Breite zwei, mobil eine (Regel weiter unten). */
.feats--4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 1180px) { .feats--4 { grid-template-columns: repeat(2,1fr); } }
.feat { background: var(--white); border-radius: var(--radius-lg); padding: 26px 26px; border-top: 3px solid var(--teal);
box-shadow: 0 2px 4px rgba(40,30,10,0.04), 0 14px 40px rgba(40,30,10,0.07); transition: box-shadow var(--t); }
.feat:hover { box-shadow: 0 4px 8px rgba(40,30,10,0.06), 0 20px 52px rgba(40,30,10,0.11); }
.feat h3 { font-size: 18px; font-weight: 700; margin-bottom: 9px; color: var(--text); letter-spacing: -0.01em;
text-wrap: balance; }
.feat p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.feat .ex { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 11.5px; color: #128C82; }
/* Abschluss-Karte: hebt das Ergebnis aus einer Reihe von Problem-Karten heraus.
Steht bewusst NACH .feat p / .feat .ex - sonst gewinnen deren Farben. */
.feat--accent { background: var(--emerald); border-top-color: var(--teal-bright);
box-shadow: 0 2px 4px rgba(15,95,89,.10), 0 16px 46px rgba(15,95,89,.26); }
.feat--accent:hover { box-shadow: 0 4px 8px rgba(15,95,89,.14), 0 22px 56px rgba(15,95,89,.32); }
.feat--accent h3 { color: #fff; }
.feat--accent p { color: #D3EBE7; }
.feat--accent .ex { color: var(--teal-bright); }
/* Zwei-Karten-Reihe */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.pcard { border-radius: var(--radius-lg); padding: 32px 30px; }
.pcard--plain { background: var(--white); box-shadow: 0 2px 4px rgba(40,30,10,0.04), 0 14px 40px rgba(40,30,10,0.07); }
.pcard--accent { background: var(--emerald); color: #fff; box-shadow: 0 14px 44px rgba(15,95,89,0.28); }
.pcard__eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: #128C82; margin-bottom: 12px; }
.pcard--accent .pcard__eyebrow { color: #7FE9DD; }
.pcard h3 { font-size: 20px; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.01em; color: var(--text); }
.pcard--accent h3 { color: #fff; }
.pcard p { font-size: 15px; line-height: 1.65; color: var(--muted); }
.pcard--accent p { color: #D3EBE7; }
/* Split (Text + Info-Karte) */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; }
.split .lead { margin-bottom: 0; }
.infocard { background: var(--white); border-radius: var(--radius-lg); padding: 30px 30px; box-shadow: 0 2px 4px rgba(40,30,10,0.04), 0 14px 40px rgba(40,30,10,0.07); }
.infocard ul { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.infocard li { font-size: 15px; line-height: 1.5; color: var(--muted); }
.infocard strong { color: var(--emerald); font-weight: 700; }
/* Preis-Karte */
.price { max-width: 560px; margin: 0 auto; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
box-shadow: 0 2px 4px rgba(40,30,10,0.04), 0 18px 50px rgba(40,30,10,0.10); padding: clamp(28px,3vw,42px); text-align: center; }
.price__amount { font-size: clamp(30px,2.8vw,44px); font-weight: 800; color: var(--emerald); letter-spacing: -0.02em; line-height: 1.05; }
.price__unit { font-size: 15px; color: var(--muted); margin-top: 6px; }
.price__list { list-style: none; text-align: left; display: flex; flex-direction: column; gap: 11px; margin: 24px 0 26px; }
.price__list li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.5; color: var(--text); }
/* Marken-Bullet = Mini-Brillant (CI 2.0) - löst die alte Raute ab. */
.price__list li::before { content: ""; position: absolute; left: 5px; top: 0.62em; width: 11px; height: 11px; transform: translateY(-50%); background: url("data:image/svg+xml;utf8,") center/contain no-repeat; }
.postit { display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: #8A6D1F; background: #FBF1CE; border: 1px solid #EBD99A; border-radius: 100px; padding: 2px 9px; margin-left: 8px; vertical-align: middle; }
/* FAQ */
.faq { max-width: 800px; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 0; font-size: 17px; font-weight: 700; color: var(--text); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); font-size: 22px; color: var(--teal); font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { padding: 0 0 22px; font-size: 15px; line-height: 1.65; color: var(--muted); max-width: 700px; }
.faq__more { text-align: center; margin-top: 24px; font-size: 14.5px; color: var(--muted); }
@media (max-width: 960px) {
.compare, .feats, .duo, .split { grid-template-columns: 1fr; }
.phero { padding: 118px 0 64px; }
/* Bild-Heroes behalten auch mobil eine einheitliche, content-unabhaengige Hoehe. */
.phero--img, .hero--img { min-height: 500px; padding-top: 84px; padding-bottom: 40px; }
.phero__glyph { opacity: 0.5; right: -120px; }
}
/* Dezenter „KI-generiert"-Marker für KI-Bilder (EU-AI-Act-Kennzeichnung + Marken-Augenzwinkern) */
.ai-tag { position: absolute; right: 12px; bottom: 10px; z-index: 3; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.5); background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.09); border-radius: 100px; padding: 2px 8px; cursor: default; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
/* Gelbe Markierung fuer bewusst offene Pflicht-Angaben (z.B. USt-IdNr bis zur Erteilung) -
sichtbar, damit sie vor dem Livegang nicht uebersehen werden. Kein interner Notiz-Marker. */
.hl-open { background: #FDE68A; color: #713F12; padding: 1px 7px; border-radius: 5px; font-weight: 600; font-style: normal; }
/* Split-Layout: moody Foto neben heller, lesbarer Textfläche (Bild-Muster C) */
.imgsplit { width: 100vw; margin-left: calc(50% - 50vw); display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.imgsplit--flip .imgsplit__media { order: 2; }
.imgsplit__media { position: relative; min-height: clamp(320px, 34vw, 480px); background-size: cover; background-position: center; background-color: #0C1216; }
.imgsplit__text { padding: clamp(30px, 4.5vw, 68px) clamp(24px, 5vw, 80px); display: flex; flex-direction: column; justify-content: center; }
.imgsplit__text .eyebrow { margin-bottom: 10px; }
.imgsplit__text h2 { font-size: clamp(26px, 3vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; color: var(--text); margin: 0 0 16px; }
.imgsplit__text p { font-size: clamp(15px, 1.5vw, 17px); line-height: 1.6; color: var(--muted); margin: 0; max-width: 46ch; }
@media (max-width: 800px) {
.imgsplit { grid-template-columns: 1fr; }
.imgsplit--flip .imgsplit__media { order: 0; }
.imgsplit__media { min-height: 240px; }
}
/* --- Produkt-Visual-Platzhalter (Nachtlauf-Task 10; temporär, wird durch in-Brand-Nachbau ersetzt) --- */
.vslot { max-width: 920px; margin: 0 auto; border: 1.5px dashed var(--border); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.2)); aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 28px; }
.vslot__glyph { font-size: 34px; color: var(--teal); line-height: 1; }
.vslot__title { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--emerald); margin: 12px 0 4px; }
.vslot__sub { font-size: 14.5px; line-height: 1.55; color: var(--muted); max-width: 46ch; margin: 0; }
@media (max-width: 640px) { .vslot { aspect-ratio: auto; } }
/* Produkte-Dropdown: Atlas + Aurora sind Varianten des KI-Arbeitsplatzes -> unter ihm eingerückt (Hierarchie-Cue) */
.nav__menu .nav__variant > a { margin-left: 16px; padding-left: 13px; border-left: 1.5px solid rgba(52,182,170,0.30); border-radius: 0 8px 8px 0; }
/* CI 2.0: Kern-Editorial als weiße Karten (Creme = Bühne, Weiß = Lesefläche) */
/* stretch: Karten einer Reihe immer gleich hoch. align-content:start hält den
Karteninhalt dabei oben - sonst zieht die gewonnene Höhe Titel und Text auseinander. */
.rows{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:none;align-items:stretch}
.row{grid-template-columns:44px 1fr;gap:5px 16px;padding:24px 26px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);align-items:baseline;align-content:start;box-shadow:0 2px 4px rgba(40,30,10,.04),0 14px 40px rgba(40,30,10,.07)}
.row p{grid-column:2;margin-top:2px}
@media(max-width:760px){.rows{grid-template-columns:1fr}}
/* ═══════════════════════════════════════════════════════════
Preisrechner + Preisblock (Produktseiten) - v7-Erweiterung 13.07.2026
Nur v7-Tokens. Slider + Zahleneingabe bis 1.000, Mengenstaffel.
═══════════════════════════════════════════════════════════ */
#preise .calc{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 2px 4px rgba(40,30,10,.04),0 18px 50px rgba(40,30,10,.09);display:grid;grid-template-columns:1.35fr 1fr}
#preise .calc__in{padding:34px 34px 30px}
#preise .calc__out{background:var(--emerald-deep);color:#D8EEEA;padding:34px 32px;display:flex;flex-direction:column;justify-content:center}
#preise .calc__label{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--emerald);margin-bottom:16px}
#preise .calc__out .calc__label{color:var(--teal-bright)}
.seatrow{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}
.seatrow b{font-size:15px;color:var(--text)}
.seatnum{font-family:var(--font-mono);font-size:20px;font-weight:800;color:var(--emerald);width:96px;text-align:right;border:1px solid var(--border);border-radius:8px;padding:5px 10px;background:var(--white)}
.seatslider{width:100%;accent-color:var(--emerald);height:26px;cursor:pointer;margin-bottom:4px}
.hint{font-size:12.5px;color:var(--subtle);margin:2px 0 22px;line-height:1.5}
.mod{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-top:1px solid var(--border)}
.mod:last-of-type{border-bottom:1px solid var(--border)}
.mod input{margin-top:3px;width:17px;height:17px;accent-color:var(--emerald);cursor:pointer;flex-shrink:0}
.mod__t{flex:1}
.mod__t b{display:block;font-size:14.5px;color:var(--text);font-weight:700}
.mod__t span{font-size:12.5px;color:var(--muted)}
/* Voraussetzungs-Hinweis am Baustein (z.B. Handeln setzt Verstehen voraus) */
.mod__req{display:block;margin-top:4px;font-style:normal;font-weight:600;color:var(--emerald)}
.mod__p{font-family:var(--font-mono);font-size:13.5px;font-weight:700;color:var(--emerald);white-space:nowrap}
.bigsum{font-family:var(--font-mono);font-size:clamp(38px,5vw,52px);font-weight:800;letter-spacing:-.03em;color:#F0FAF8;line-height:1}
.bigsum small{font-size:15px;font-weight:600;color:#A9CEC8;letter-spacing:0}
.sumrow{display:flex;justify-content:space-between;font-size:13.5px;color:#A9CEC8;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.sumrow span:last-child{font-family:var(--font-mono);color:#D8EEEA;font-weight:700}
#preise .calc__note{font-size:12.5px;line-height:1.55;color:#9FC4BF;margin-top:20px}
#preise .calc__note b{color:#D8EEEA}
#preise .calc__cta{margin-top:22px}
#preise .calc__cta .btn{width:100%;text-align:center}
/* Aufschluesselung im Preisrechner: beide Posten sichtbar machen statt nur die
Summe - der Plattformbetrieb ist erklaerungsbeduerftig. */
.preiszeilen{margin:18px 0 4px;border-top:1px solid var(--border)}
.preiszeile{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--border);font-size:14.5px;color:var(--muted)}
.preiszeile b{font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--text);white-space:nowrap}
.staffelnote{margin-top:16px;font-size:12.5px;line-height:1.55;color:var(--muted);max-width:80ch}
.mini{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px 32px;box-shadow:0 2px 4px rgba(40,30,10,.04),0 14px 40px rgba(40,30,10,.07);max-width:640px}
.mini__sum{display:flex;align-items:baseline;gap:12px;margin-top:18px;padding-top:18px;border-top:1px solid var(--border)}
.mini__sum b{font-family:var(--font-mono);font-size:32px;font-weight:800;color:var(--emerald);letter-spacing:-.02em}
.mini__sum span{font-size:14px;color:var(--muted)}
.mini__year{margin-top:8px;font-size:13px;color:var(--muted)}
.mini__year b{font-family:var(--font-mono);font-weight:700;color:var(--text)}
.govrow{display:flex;align-items:flex-start;gap:11px;margin-top:16px;font-size:14px;line-height:1.5;color:var(--text)}
.govrow input{margin-top:2px;width:17px;height:17px;accent-color:var(--emerald);cursor:pointer;flex-shrink:0}
.prcard{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:34px 32px;box-shadow:0 2px 4px rgba(40,30,10,.04),0 18px 50px rgba(40,30,10,.09);max-width:520px}
.prcard__price{font-family:var(--font-mono);font-size:44px;font-weight:800;letter-spacing:-.02em;color:var(--emerald);line-height:1}
.prcard__price small{display:block;font-size:14px;font-weight:600;letter-spacing:0;color:var(--muted);margin-top:8px;font-family:var(--font-sans)}
.prcard__setup{font-size:13.5px;color:var(--subtle);margin-top:12px;font-family:var(--font-mono)}
.prcard ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin:24px 0 28px}
.prcard li{position:relative;padding-left:26px;font-size:15px;line-height:1.5;color:var(--text)}
.prcard li::before{content:"\2713";position:absolute;left:2px;top:0;color:var(--teal);font-weight:800}
.prcard .btn{width:100%;text-align:center}
@media(max-width:820px){#preise .calc{grid-template-columns:1fr}}
.spec-count{width:48px;font-family:var(--font-mono);font-size:12.5px;font-weight:700;text-align:right;border:1px solid var(--border);border-radius:6px;padding:3px 6px;margin-right:3px;color:var(--emerald)}
.spec-count:disabled{opacity:.35;color:var(--muted)}
.mod__base-ic{color:var(--teal);font-weight:800;font-size:15px;width:23px;flex-shrink:0;margin-top:1px;text-align:center;font-variant-numeric:tabular-nums}
.spec-count{width:56px;-moz-appearance:textfield;appearance:textfield}
.spec-count::-webkit-outer-spin-button,.spec-count::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.mod__p{display:flex;align-items:center;gap:5px;justify-content:flex-end}
.mod-lock{cursor:default}
.mod:has(input[data-gate="fw"]:disabled){opacity:.5}
.mod__t{cursor:pointer}
#a-extras{border-left:2px solid var(--teal);margin-left:6px;padding-left:20px}
.unlocknote{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#128C82;margin:16px 0 0}
.mod input.spec-count{width:54px;height:auto;text-align:center}
.gegenr{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.09)}
.gegenr__row{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:#9FC4BF;padding:3px 0}
.gegenr__row b{font-family:var(--font-mono);color:#D8EEEA;font-weight:700}
.gegenr__hl b{color:var(--teal-bright)}
.gegenr__note{font-size:10.5px;line-height:1.5;color:#7FA9A3;margin-top:8px}
.gegenr__note a{color:var(--teal-bright);font-weight:700;white-space:nowrap}
.gegenr{margin-top:26px}
.gegenr__cap{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7FA9A3;margin-bottom:10px}
.mod:has(input[data-req]:disabled){opacity:.5}
.gegenr{margin-top:40px}
#preise .hint,#preise .mod__t span,#preise .calc__note,#preise .staffelnote,#preise .gegenr__row{font-size:13px}
#preise .gegenr__note,#preise .unlocknote{font-size:11.5px}
/* Zurueck-Faden-Pill (unten links, seitenweit ueber nav.js eingeblendet) */
.backbar{position:fixed;left:20px;bottom:24px;z-index:90;display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;font-family:var(--font-sans);font-size:14px;font-weight:700;text-decoration:none;padding:11px 18px 11px 15px;border-radius:100px;box-shadow:0 10px 26px rgba(0,0,0,.30);transition:background .22s cubic-bezier(.4,0,.2,1)}
.backbar:hover{background:var(--emerald);color:#fff}
.backbar__arrow{font-size:17px;line-height:1}
@media(max-width:600px){.backbar{left:12px;bottom:14px;font-size:13px;padding:9px 15px 9px 12px}}
/* ---------------------------------------------------------------
Demo-Hinweis (29.07.2026)
Die interaktiven Demos sind auf 1064 px Breite gebaut. Auf kleinen
Bildschirmen skalieren sie auf unter ein Drittel - Schrift landet bei
rund 5 px und ist nicht mehr lesbar. Unter 900 px treten sie deshalb
zurueck und an ihre Stelle tritt eine ruhige Karte mit Hinweis.
--------------------------------------------------------------- */
.demohint{display:none}
@media (max-width:899px){
.demohint{
display:flex;gap:16px;align-items:flex-start;
max-width:560px;margin:26px auto 0;padding:20px 22px;
background:var(--white);border:1px solid var(--border);border-radius:16px;
box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.06);
}
.demohint__ic{flex:none;width:26px;height:26px;margin-top:2px;color:var(--teal)}
.demohint b{display:block;font-size:16px;font-weight:700;color:var(--text);margin-bottom:5px;line-height:1.3}
.demohint span{display:block;font-size:14.5px;line-height:1.6;color:var(--muted)}
/* Auf dunklem Grund mitlaufen */
.sec--emerald .demohint,.sec--ink .demohint{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);box-shadow:none}
.sec--emerald .demohint b,.sec--ink .demohint b{color:#fff}
.sec--emerald .demohint span,.sec--ink .demohint span{color:rgba(255,255,255,.72)}
.sec--emerald .demohint__ic,.sec--ink .demohint__ic{color:var(--teal-bright)}
/* Die Demos selbst treten zurueck */
.lapx,#fsysHost,#fsysHostAurora,.lapx__actions,.lapx-caption{display:none!important}
}
/* Der grosse Laptop-Rahmen darf nie breiter werden als sein Platz */
.lapx--gross{max-width:min(880px,100%)}
/* Der Laptop-Deckel steht durch seine 3D-Perspektive optisch breiter als das
Element selbst (880 px werden zu rund 1140 px). Dieser Ueberstand ist Deko und
darf keinen horizontalen Scrollbereich erzeugen. */
section:has(> .wrap > .lapx),section:has(.lapx){overflow-x:clip}
/* Tippziele: auf Telefon und Tablet mindestens 44 px hoch (Apple HIG).
Zwei Bedingungen, weil keine allein reicht: pointer:coarse trifft jedes
Fingergeraet (ein iPad quer ist 1080 px breit und faellt sonst durch), die
Breitenangabe zusaetzlich schmale Fenster am Rechner. */
@media (pointer:coarse), (max-width:1024px){
.footer__grid a,.footer__base a{display:inline-block;padding:11px 0;min-height:44px;line-height:1.5}
.footer__grid li{margin-bottom:0}
.footer__base span{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 6px}
.mod__chk,input[type=checkbox]{width:24px;height:24px}
.seatnum{min-height:44px}
.slvl__toggle,.fend__demo,.lapx__replay{min-height:44px;padding-top:11px;padding-bottom:11px}
/* Fussnoten und Legenden: 12 px sind auf dem Telefon zu klein.
Die Seiten tragen eigenes