/* ============================================================
   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:     #6B675F;   /* 09.10.2026: dunkler für 4,5 : 1 auf Stone und Stone-2 (vorher #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:      1360px;   /* 08.10.2026: von 1160 erhöht wie fraia.de am 20.09. - Lesetext bleibt über .artikel/.prose/.lead begrenzt, breiter werden nur Karten, Raster und Grafiken */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@media (prefers-reduced-motion: no-preference) { 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; }
/* Schriftgewichte „fein" (23.09.2026, gleich mit fraia.de): Lesetext 300, Überschriften 400,
   Zwischenüberschriften 500, Fettes im Text 600, Knöpfe und Labels 600. Greift auf Seiten mit
   Navigation (.nav ~ *). Eingebettete Produkt-Oberflächen (.app, .lapx, .apx), Rechner und
   Diagramme zeigen Oberfläche, keinen Lesetext, und behalten ihre Gewichte. */
.nav ~ * { font-weight: 300; }
.nav ~ * :where(.app, .lapx, .apx, .calc, svg) { font-weight: 400; }
:where(.nav ~ *) :is(h1, h2):not(:where(.app, .lapx, .apx, .calc, svg) *) { font-weight: 400; }
:where(.nav ~ *) :is(h3, h4):not(:where(.app, .lapx, .apx, .calc, svg) *) { font-weight: 500; }
:where(.nav ~ *) :is(b, strong):not(:where(.app, .lapx, .apx, .calc, svg) *) { font-weight: 600; }
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: break-word; }
p, li { hyphens: auto; hyphenate-limit-chars: 7 3 4; -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 4; }
/* Links, Code und Eigennamen in Links nie automatisch trennen (Domains, Produktnamen) */
a, code { hyphens: manual; }
/* Mono-Zeilen (Hinweise, Meta, Kennzeichen) nicht automatisch trennen */
.artikel__meta, .beitrag__meta, .prose .stand, .teilen__hinweis, .feedbox__adresse, .founder__role, .feat .ex, .serie-pille, .mag-karte__kopf, .hoerfassung__dauer, .zeit__datum { hyphens: manual; }
h1, h2, h3, h4, .btn, .nav__cta { hyphens: manual; }
h1, h2, h3, h4 { overflow-wrap: break-word; }
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; }
/* Merke (08.10.2026, wie fraia.de): --max-w gilt für Karten, Raster und Grafiken. Fließtext braucht eine
   eigene Grenze von rund 70ch, sonst werden die Zeilen auf großen Bildschirmen zu lang.
   Vorbilder: .artikel und .prose (760px), .beitrag__anriss (68ch). Neue Textkomponenten entsprechend begrenzen. */
.eyebrow { font-family: var(--font-sans); font-size: 12px; font-weight: 600; 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: var(--max-w); 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; }
/* Marke 2.0 (08.10.2026): Logo als SVG aus dem Logo-System (Ressourcen/Logo-Exploration/runde-2026-10/website_logos.py),
   gestapelte Fassung ohne MANAGEMENT. Im Fließtext bleibt der Name Text (CI-Regel „im Satz“). */
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand__logo { display: block; height: 44px; width: auto; }
@media (max-width: 400px) { .brand__logo { height: 36px; } }
.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: 600; 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 .eyebrow { color: var(--teal-bright); }
.hero h1 { position: relative; font-size: clamp(34px,3.9vw,52px); font-weight: 400; letter-spacing: -0.028em; line-height: 1.06; margin: 16px 0 22px; max-width: 840px; }
.hero h1 .t { color: var(--teal); }
.hero h1 .accent { color: var(--teal); } /* Marken-Akzent ΛI in der Hero-Headline (dunkler Grund) */
/* 820 statt 580: Der Untertitel trägt seit dem 11.08.2026 zwei Sätze (296
   Zeichen) und lief auf fünf Zeilen - über dem Foto ein schwerer Block.
   Gemessen: 580 und 660 ergeben beide fünf Zeilen, erst 820 ergibt vier.
   Die Zeile wird damit rund 75 Zeichen lang, das ist die Obergrenze des
   Lesbaren - wird der Text je kürzer, gehört die Breite wieder zurück. */
.hero__sub { position: relative; font-size: 19.5px; line-height: 1.6; color: #9DA3A7; max-width: 820px; 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: 600; padding: 15px 28px; border-radius: var(--radius); white-space: normal; text-align: center; max-width: 100%; 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--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--stone { background: var(--stone); }
.sec--stone2 { background: var(--stone-2); }
.sec--emerald { background: var(--emerald-deep); color: #D8EEEA; }
.sec h2 { font-size: clamp(38px,4.8vw,62px); font-weight: 400; letter-spacing: -0.028em; line-height: 1.06; 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 */

/* Textblock unter dem Lead: Zwischen-Aussage plus Fließtext, ohne Karten-Optik */

/* Editorial-Zeilenliste (Engpass) */

/* Schritte (emerald, Hairline-Raster) */

/* Use-Cases (weiße Editorial-Karten auf Stone) */
.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 h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 10px; color: var(--text); }
.use p { font-size: 15px; line-height: 1.62; color: var(--muted); }
/* Merkmals- und Wertekarten. Zwei Spalten statt der drei von .uses: Vier Punkte
   ergeben so ein geschlossenes Feld, und die Texte duerfen laenger sein als in
   einer Drittelspalte. Die Karte bleibt auf hellem wie auf dunklem Abschnitt
   weiss - der Grund wechselt, das Kartenbild nicht. */
.merkmale { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.merkmal { background: var(--white); border-radius: var(--radius-lg); padding: 32px 30px;
  box-shadow: 0 2px 4px rgba(40,30,10,0.04), 0 14px 40px rgba(40,30,10,0.08); }.merkmal h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 10px; color: var(--text); }
.merkmal p { font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.sec--emerald .merkmale { margin-top: 4px; }

/* Karte mit Bildband statt Icon. Die Karte legt ihr Polster ab, damit das Bild
   randlos oben sitzt; Ueberschrift und Text bekommen den Abstand einzeln zurueck.
   Muster uebernommen von .feat--img, nur flacher - das Bild soll die Karte
   begleiten, nicht beherrschen. */
.merkmal--bild { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.merkmal__bild { position: relative; aspect-ratio: 16/7; background-size: cover;
  background-position: center; background-color: var(--stone-2); }
.merkmal__bild .ai-tag { right: 8px; bottom: 6px; }
.merkmal--bild > :not(.merkmal__bild) { padding-left: 30px; padding-right: 30px; }
.merkmal--bild > h3 { padding-top: 24px; }
.merkmal--bild > :last-child { padding-bottom: 28px; }

/* 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). */

/* --wide: mehrspaltige Datentabelle - erzwingt Mindestbreite (scrollt im Wrap), letzte Spalte bricht nicht */

/* --center: Vergleichsraster - Spalten ab der zweiten zentriert, erste Spalte als Zeilen-Label */

/* --map: zwei Spalten Fließtext (Zuordnung links -> rechts); auf dem Handy gestapelt statt gequetscht */
@media (max-width: 560px) {
  /* Deutsche Komposita sind lang: „Alleinstellungsmerkmale" ist auf 360 px breiter
     als der Satzspiegel und hat die Seite waagerecht aufgeschoben (gemessen am
     12.08.2026: 366 statt 360 px). Ab hier darf der Browser Ueberschriften trennen -
     lang="de" steht im <html>, also greift die deutsche Trennung. Das Umbrechen
     ohne Trennstrich bleibt als Sicherheitsnetz fuer Woerter ohne Trennstelle. */
  h1, h2, h3 { hyphens: manual; overflow-wrap: break-word; }}

/* --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. */

/* __hl: eine Spalte hervorheben (z.B. das eigene Produkt im Vergleich) */

/* Zell-Helfer */

/* CTA */
.cta { background: var(--emerald); color: #fff; padding: 110px 0; position: relative; overflow: hidden; }
.cta .eyebrow { color: #7FE9DD; }
.cta h2 { font-size: clamp(38px,4.6vw,58px); font-weight: 400; letter-spacing: -0.028em; line-height: 1.06; margin: 12px 0 16px; }
.cta__sub { font-size: 18px; line-height: 1.65; color: #C6E3DF; max-width: 600px; margin-bottom: 34px; }
.cta__sub a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cta__actions { display: flex; gap: 14px; flex-wrap: wrap; position: relative; }

/* ── Kontaktformular ────────────────────────────────────────────────────
   Es steht als heller Kasten im gruenen CTA-Abschnitt. Warum nicht direkt
   auf dem Gruen: Eingabefelder brauchen einen ruhigen, hellen Grund, damit
   der Fokusrahmen sichtbar bleibt und getippter Text lesbar ist. Ein Kasten
   loest das, ohne den Abschnitt zu teilen - und die Feldstile sind dieselben
   wie auf fraia.de, wo das Formular ohnehin auf hellem Grund steht.
   Die zwei Direktwege (Mail, Telefon) bleiben darueber stehen: Wer lieber
   anruft, soll nicht erst ein Formular sehen. */
.cta__form { position: relative; margin-top: 34px; max-width: 620px;
  background: var(--white); border-radius: var(--radius-lg); padding: 30px 30px 26px;
  box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 22px 60px rgba(0,0,0,.18); }
.cta__form-titel { font-size: 20px; font-weight: 700; letter-spacing: -.01em;
  color: var(--text); margin-bottom: 4px; }
.cta__form-sub { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin-bottom: 20px; }

.cform { display: flex; flex-direction: column; gap: 16px; }
.cform .fld label { font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 5px; display: block; }
.cform input, .cform textarea { width: 100%; font-family: inherit; font-size: 15px;
  color: var(--text); background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 11px 13px; min-height: 46px;
  transition: border-color var(--t), box-shadow var(--t); }
.cform textarea { min-height: 130px; resize: vertical; }
.cform input:focus, .cform textarea:focus { outline: none; border-color: var(--emerald);
  box-shadow: 0 0 0 3px rgba(15,95,89,.15); }
.cform .fld-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.cform .gdpr { display: flex; gap: 10px; align-items: flex-start; font-size: 13px;
  color: var(--muted); line-height: 1.5; cursor: pointer; }
.cform .gdpr input { width: 16px; height: 16px; min-height: 0; margin-top: 2px;
  flex-shrink: 0; accent-color: var(--emerald); }
.cform .gdpr a { color: var(--emerald); text-underline-offset: 3px; }
/* Der Spam-Fang. Nicht display:none - manche Bots ignorieren ausgeblendete
   Felder gezielt. So steht er im Baum, ist aber fuer Menschen unerreichbar. */
.cform .hp { position: absolute !important; width: 1px; height: 1px; min-height: 0;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0; opacity: 0; }
.cform__status { font-size: 14px; color: var(--muted); margin: 0; }
.cform__status.is-err { color: #A15B4E; font-weight: 600; }
.cta__form .form-erfolg { display: none; }
.cta__form .form-erfolg.is-visible { display: block; }
.form-erfolg h2 { font-size: 20px; font-weight: 500; color: var(--text); margin-bottom: 8px; }
.form-erfolg p { font-size: 15px; line-height: 1.65; color: var(--muted); }

@media (max-width: 620px) {
  .cta__form { padding: 24px 20px 22px; }
  .cform .fld-row { grid-template-columns: minmax(0,1fr); }
}

/* Footer */
.footer { background: var(--ink); color: #9DA3A7; padding: 84px 0 36px; }
.footer__grid { display: grid; grid-template-columns: minmax(0,1.3fr) repeat(4, auto); justify-content: space-between; column-gap: clamp(28px,3.4vw,56px); row-gap: 40px; margin-bottom: 56px; }
/* Wortmarke nach CI: Gewicht 300, Akzent 400, Laufweite 0.02em, auf dunklem
   Grund #34B6AA (= --teal). Vorher standen hier -0.01em und ein Akzent auf 500;
   das fiel erst auf, als beide Marken im Footer gleich gross wurden. */
.footer__logo { display: block; height: 48px; width: auto; max-width: 100%; margin: 2px 0 18px; }
.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; }
/* Absender-Block: Dachmarke als eigene Wortmarke statt als Link im Fliesstext.
   Das Label uebernimmt den Stil der Spaltenueberschriften, die Wortmarke folgt
   der CI (Gewicht 300, Akzent 400, kein Unterstrich). Die Spezifitaet mit
   .footer__grid schlaegt die Touch-Regel weiter unten, sonst kippt inline-flex. */
/* Variante D: Marke und Claim bilden oben eine enge Gruppe, dann viel Luft,
   dann der Absender. Beide Wortmarken stehen gleich gross - der Rang kommt
   aus der Farbe (Produkt hell, Dachmarke gedaempft), nicht aus der Groesse. */
.footer__by { margin-top: 40px; }
.footer__by-label { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-bright); margin-bottom: 7px; }
/* Bewusst KEIN Flex auf der Wortmarke: ein gap wirkt zwischen allen Kindern
   und reisst die Akzent-Spans aus dem Wort ("Fr Λ I raum"). */
.footer__grid .footer__by-mark { display: inline-block; font-size: 22px; font-weight: 300; letter-spacing: 0.02em; color: #9DA3A7; text-decoration: none; transition: color .18s ease; }
.footer__grid .footer__by-mark img { display: block; height: 16px; width: auto; opacity: .82; transition: opacity .18s ease; }
.footer__grid .footer__by-mark:hover img { opacity: 1; }
.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: #8A9095; }
.footer__base a { color: #9DA3A7; }

/* CTA-Pfeil ".pf-r" (pfeil rechts). Ersetzt das nackte &rarr; hinter Handlungs-
   aufforderungen. Warum als Maske statt als Zeichen: Der lange Pfeil U+27F6 steckt
   NICHT in Hanken Grotesk (gemessen 07.08.2026) und faellt je nach Betriebssystem
   auf eine andere Systemschrift zurueck - das Markenelement saehe auf Windows
   anders aus als auf dem Mac. Die Maske rendert ueberall gleich und nimmt ueber
   background-color die Textfarbe an, auch im Hover.
   NICHT verwenden fuer die Trenn-Pfeile in Listen (.pf) - die sind ein
   Doppelpunkt-Ersatz, keine Handlungsaufforderung. */
/* LinkedIn-Verweis in der Fusszeile. Hoehere Spezifitaet als die Touch-Regel
   weiter unten, damit das Icon auch dort mittig sitzt statt oben zu kleben;
   min-height und padding kommen dort weiterhin an (44 px Tap-Flaeche). */
.footer__base a.footer__social { display: inline-flex; align-items: center; color: #9DA3A7; transition: color .18s ease; }
.footer__base a.footer__social:hover { color: var(--teal-bright); }
.footer__base a.footer__social svg { width: 18px; height: 18px; display: block; }

/* Reveal (ruhig, bewegungsarm) */
/* Nur ausblenden, wenn Skript läuft: ohne JavaScript bleibt der Inhalt sichtbar (09.10.2026) */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .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: inherit; min-width: 0; background: none; border: none; box-shadow: none; padding: 0 0 6px 14px; }
  .nav__links .nav__menu::before { display: none; }
  .nav__links .nav__menu li:not(:last-child) { border-bottom: 0; }
  .nav__links .nav__menu a { padding: 9px 0; font-size: 15px; }  .hero { padding: 140px 0 100px; }   .merkmale { grid-template-columns: minmax(0,1fr); }
  .footer__grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  /* Der Absender-Block traegt den laengsten Text ("Prozessautomatisierung." braucht
     158 px, eine halbe Spalte hat 151). In zwei Spalten brach das Wort mittendrin.
     Er bekommt deshalb die volle Breite, die uebrigen drei bleiben zweispaltig. */
  .footer__grid > div:first-child { grid-column: 1 / -1; }
  .footer__list a { display: inline-block; padding: 10px 0; } /* größere Tap-Fläche auf Touch - R2 */
}

/* Tippziele in der Kopfleiste zwischen 961 px und dem Burger-Breakpoint.
   Das iPad quer ist 1024 px breit: Dort laeuft schon die waagerechte
   Desktop-Navigation, bedient wird sie aber mit dem Finger. Gemessen am
   08.08.2026 waren die Links dort 19 px hoch - die Touch-Regel weiter unten
   fasst nur Fusszeile und Formulare an, die Kopfleiste war nie dabei.
   inline-flex mit min-height statt Polsterung, damit die Leiste dabei nicht
   waechst und der Kopf auf dem Desktop unveraendert bleibt. */
@media (min-width: 961px) and (max-width: 1024px),
       (min-width: 961px) and (pointer: coarse) {
  .nav__links > li > a { display: inline-flex; align-items: center; min-height: 44px; }
}


/* ============================================================
   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; }
/* Untermenü (Leistungen), Muster von fraia.de übernommen (05.10.2026). Öffnet bei Hover
   und bei Tastaturfokus (focus-within); der Oberpunkt hat tabindex="0", damit er erreichbar ist. */
.nav__menu { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  min-width: 300px; background: #101214;
  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__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav__drop:hover .nav__menu, .nav__drop:focus-within .nav__menu { opacity: 1; visibility: visible; }
.nav__drop > a { cursor: default; }
.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; 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, .nav__menu a.is-active { background: rgba(52,182,170,0.10); }
.nav__menu a.is-active .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 .eyebrow { text-shadow: 0 2px 22px rgba(6,8,9,0.55); }
/* FAQ: prominenter Polaris-Bot-Link (oeffnet den Live-Chat) */
/* 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;
  /* Der Standard-Schleier. Stand bis 08.08.2026 als identische Inline-Kopie in allen
     vier Seiten mit Bild-Hero - dieselbe Drift-Falle wie beim Footer: Ein Wert, der
     korrigiert werden muss, ist dann viermal zu korrigieren, und beim naechsten Mal
     wird eine Seite vergessen. Eine Seite kann ihn weiterhin inline ueberschreiben,
     wenn ihr Motiv es verlangt.

     Die Werte sind gemessen, nicht geschaetzt: Mit den vorherigen .82/.60/.24 lag der
     Kontrast bei 1440 px bei 2,92:1 - der schlechteste Wert im ganzen Satz, weil die
     Textspalte dort bei 53 % endet und der Verlauf da schon auf etwa 0,37 Deckung
     abgefallen war. Mit .88/.78/.58 sind es 4,89:1, also ueber WCAG AA (4,5:1). */
  --hero-schleier:
    linear-gradient(90deg, rgba(10,12,13,.88) 0%, rgba(10,12,13,.78) 34%,
      rgba(10,12,13,.58) 64%, rgba(10,12,13,0) 88%),
    linear-gradient(180deg, rgba(10,12,13,.72) 0%, rgba(10,12,13,.30) 14%,
      rgba(10,12,13,0) 34%, rgba(10,12,13,0) 68%, rgba(10,12,13,.45) 100%); }
.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;
  /* Bildausschnitt je Seite steuerbar: Bei fester Hero-Hoehe zeigt cover nur einen Hoehenstreifen
     des Motivs. Wo das Wichtige nicht oben sitzt, setzt die Seite --hero-bild-pos (z.B. kontakt.html
     mit 'center 70%', weil dort Tisch und Tassen in der unteren Bildhaelfte liegen). Das ist der
     richtige Hebel gegen Beschnitt - nicht die Hoehe des Containers, siehe Kommentar oben. */
  background-position: var(--hero-bild-pos, center 15%); background-repeat: no-repeat; }
/* WebP für Hero-Bilder (23.09.2026): Seiten setzen neben --hero-bild ein --hero-bild-webp als
   image-set(). Genommen wird es nur, wo der Browser image-set() mit type() sicher kann - eine
   Variable, die erst beim Einsetzen scheitert, ließe sonst gar kein Bild übrig. */
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
  .phero--img::before, .hero--img::before { background-image: var(--hero-bild-webp, var(--hero-bild)) }
}
/* <picture> liefert Bilder als WebP mit JPEG-Rückfall (23.09.2026). Die Hülle selbst darf keinen
   Kasten bilden - sonst legt der Browser eine Textzeile samt Unterlänge um das Bild (+6px) -, und
   <source> darf kein Flex-Kind werden, sonst zählt ein Abstand (gap) doppelt. Welche Datei geladen
   wird, entscheidet HTML, nicht CSS. */
/* Als <img> eingesetzte Karten- und Motivbilder (09.10.2026, damit Handys die 768-px-Datei laden und
   Bilder unterhalb des Sichtbereichs erst beim Scrollen kommen). Die Hülle (.feat__bild u. a.) gibt
   Seitenverhältnis und Zuschnitt vor, das Bild füllt sie. */
.feat__bild > picture > img, .merkmal__bild > picture > img, .imgsplit__media > picture > img, .beitrag__motiv > picture > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
picture { display: contents; }
picture > source { display: none; }
/* Handys bekommen die 768-px-Fassung des Hero-Bildes (09.10.2026). */
@media (max-width: 768px) {
  @supports (background-image: image-set(url("a.webp") type("image/webp"))) {
    .phero--img::before, .hero--img::before { background-image: var(--hero-bild-webp-klein, var(--hero-bild-webp, var(--hero-bild))) }
  }
}
.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); }.phero .eyebrow { color: var(--teal-bright); }
.phero h1 { position: relative; font-size: clamp(34px,3.9vw,52px); font-weight: 400; letter-spacing: -0.028em; line-height: 1.06; margin: 16px 0 22px; max-width: 840px; }
/* Hero-Größe seit 23.09.2026 gleich mit fraia.de. Flache Schirme (Notebook 1280x720 und
   ähnlich): Der Hero passt in voller Größe nicht über die Falz. */
@media (min-width:761px) and (max-height:840px){
  .hero h1, .phero h1 { font-size: clamp(34px,4.2vw,54px); margin: 12px 0 18px; }
}
.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__actions { position: relative; display: flex; gap: 14px; flex-wrap: wrap; }
/* Section-Kopf (wiederverwendbar) */
.shead { max-width: 760px; margin-bottom: 48px; }
.shead h2 { font-size: clamp(32px,4vw,52px); font-weight: 400; letter-spacing: -0.028em; line-height: 1.06; margin: 12px 0 18px; }
.sec--stone .shead h2 .t, .sec--stone2 .shead h2 .t { color: var(--emerald); }
/* Vergleich (Risiko vs. Lösung) */

/* Feature-Karten (3-spaltig) */
.feats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
/* Vier Karten nebeneinander; ab mittlerer Breite zwei, mobil eine (Regel weiter unten). */

.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: 500; 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: #0F7A71; }
.feat a.ex { width: fit-content; }
.feat a.ex::after { content: " \2192"; }
.feat a.ex:hover { text-decoration: underline; }
/* Abschluss-Karte: hebt das Ergebnis aus einer Reihe von Problem-Karten heraus.
   Steht bewusst NACH .feat p / .feat .ex - sonst gewinnen deren Farben. */

/* Zwei-Karten-Reihe */

/* 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 */
/* Marken-Bullet = Mini-Brillant (CI 2.0) - löst die alte Raute ab. */

/* FAQ */

@media (max-width: 960px) {
   .feats, .split { grid-template-columns: minmax(0,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; }  /* Der seitliche Standard-Schleier ist fuer breite Schirme gerechnet: Dort steht
     der Text in der linken Haelfte, und der Verlauf darf nach rechts auslaufen. Auf
     dem Telefon fuellt derselbe Text 92-94 % der Breite (gemessen 08.08.2026: bis
     92,5 % bei 320 px, bis 93,8 % bei 390 px) - die Zeilenenden landen also
     systematisch dort, wo nicht mehr abgedunkelt wird, und liegen auf den hellen
     Stellen des Motivs. Deshalb hier flaechig statt seitlich.

     Die Werte sind gemessen, nicht geschaetzt: Mit .88/.74/.68 lagen bei 390 px noch
     17 von 72 Messpunkten unter WCAG AA (4,5:1), alle an den Zeilenenden. Mit
     .90/.84/.80 sind es null - bei 320, 390 und 430 px. */
  .phero--img::after, .hero--img::after {
    background-image: linear-gradient(180deg, rgba(10,12,13,.90) 0%,
      rgba(10,12,13,.84) 45%, rgba(10,12,13,.80) 100%); }
}
/* 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: #fff; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.18); 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. */

/* Split-Layout: moody Foto neben heller, lesbarer Textfläche (Bild-Muster C) */
.imgsplit { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: stretch; }.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: 400; letter-spacing: -0.028em; 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; }
/* Der Block trug bis zum 11.08.2026 genau einen Absatz, deshalb margin: 0.
   Folgen mehrere, brauchen sie einen Abstand - sonst kleben sie aneinander. */
.imgsplit__text p + p { margin-top: 14px; }
@media (max-width: 800px) {
  .imgsplit { grid-template-columns: minmax(0,1fr); }  .imgsplit__media { min-height: 240px; }
}

/* --- Produkt-Visual-Platzhalter (Nachtlauf-Task 10; temporär, wird durch in-Brand-Nachbau ersetzt) --- */


/* Produkte-Dropdown: Atlas + Aurora sind Varianten des KI-Arbeitsplatzes -> unter ihm eingerückt (Hierarchie-Cue) */

/* 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. */


/* ═══════════════════════════════════════════════════════════
   Preisrechner + Preisblock (Produktseiten) - v7-Erweiterung 13.07.2026
   Nur v7-Tokens. Slider + Zahleneingabe bis 1.000, Mengenstaffel.
   ═══════════════════════════════════════════════════════════ */
/* Voraussetzungs-Hinweis am Baustein (z.B. Handeln setzt Verstehen voraus) */
/* Aufschluesselung im Preisrechner: beide Posten sichtbar machen statt nur die
   Summe - der Plattformbetrieb ist erklaerungsbeduerftig. */
/* 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.
   --------------------------------------------------------------- */

/* 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}
  /* Das LinkedIn-Icon ist nur 18 px breit - die Regel darueber gibt ihm zwar 44 px
     Hoehe, aber kein Tap-Ziel in der Breite. Nur auf Touch verbreitern, damit die
     Fusszeile auf dem Desktop nicht auseinanderrueckt. */
  .footer__base a.footer__social{min-width:44px;justify-content:center}
  .footer__grid li{margin-bottom:0}
  .footer__base span{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 6px}
  input[type=checkbox]{width:24px;height:24px}  /* Zwei eigenstaendige Links waren auf Touch flacher als 44 px: die Kontaktzeilen
     der Infokarte (17-21 px hoch) und der CTA unter dem Vision-Block (20 px).
     Bei den Kontaktzeilen nimmt das negative margin die zusaetzliche Hoehe wieder
     aus dem Fluss, die Karte bleibt also gleich hoch. Beim CTA geht das nicht:
     index.html setzt dort `#vision .mehr__link{margin-top:6px}` im eigenen <style>,
     das nach dieser Datei laedt und bei gleicher Spezifitaet gewinnt. Der Abschnitt
     waechst dadurch auf Touch um rund 24 px - unkritisch, weil der CTA am Ende steht.
     Inline-Links im Fliesstext bleiben bewusst unangetastet: dort zerreisst eine
     44-px-Zeile den Satz (z.B. "Datenschutzerklaerung" im Einwilligungstext). */
  /* Fussnoten und Legenden: 12 px sind auf dem Telefon zu klein.
     Die Seiten tragen eigenes <style> im Kopf, das nach dieser Datei laedt und
     bei gleicher Spezifitaet gewinnt. Diese Korrekturen gelten fuer alle 13
     Seiten und setzen sich deshalb bewusst durch. */
  .stand{font-size:13.5px!important;line-height:1.6}
  /* Die Beitragsseiten kamen spaeter dazu und standen in der Aufzaehlung oben
     nicht drin. Bewusst nur die echten Kleinsttexte: Meta-Zeile (12 px) und der
     Hinweis unter dem Abspieler (12,5 px) sind auf dem Telefon zu klein, der
     Rechtsvorbehalt ebenso. Sekundaertext bei 14,5 px (.feat p, .footer__about)
     bleibt unangetastet - der ist lesbar, und alles anzuheben wuerde die
     Groessenabstufung der Seite einebnen. */
  .artikel__meta,.hoerfassung__hinweis,.rechtsvorbehalt{font-size:13.5px!important;line-height:1.6}
  /* !important wie bei den Nachbarn: Die Basisregel .quellen li steht weiter unten
     in dieser Datei und gewinnt bei gleicher Spezifitaet sonst allein durch ihre
     Position. Ohne das Schluesselwort blieb der Fix wirkungslos - gemessen. */
  .quellen li{font-size:14.5px!important}  /* Schieberegler: der Griff ist gross genug, die Bahn nicht. Volle Hoehe
     macht das Greifen mit dem Daumen zuverlaessig - die Bahn selbst bleibt
     optisch schmal, gegriffen wird der ganze Bereich. */
  input[type=range]{height:44px}
  /* Kontaktwege sind auf dem Telefon die wichtigsten Ziele der Seite */
  a[href^="tel:"],a[href^="mailto:"]{display:inline-block;padding:10px 0;min-height:44px;line-height:1.6}
}


/* ===========================================================================
   Ergaenzungen frairaum-management.de
   Diese Datei ist die 1:1-Uebernahme von fraia.de. Alles, was nur die
   Dachseite braucht, steht hier unten - so bleibt der gemeinsame Teil oben
   vergleichbar, wenn fraia.de sich weiterentwickelt.
   =========================================================================== */

/* Portraet-Block auf "Ueber mich". Auf fraia.de steht diese Komponente inline
   in der Seite; hier gehoert sie ins Stylesheet, weil sie mehrfach gebraucht
   werden kann. */
.founder { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: clamp(28px,4vw,52px); align-items: start; }
.founder__photo img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-lg); display: block;
  box-shadow: 0 2px 6px rgba(40,30,10,.06), 0 26px 60px rgba(40,30,10,.12); }
.founder__role { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #0F7A71; }
.founder__name { font-size: clamp(24px,2.4vw,32px); font-weight: 500; letter-spacing: -0.02em; color: var(--text); margin: 8px 0 18px; }
.founder__text p { font-size: 16px; line-height: 1.72; color: var(--muted); margin-bottom: 15px; max-width: 70ch; }   /* Lesegrenze seit --max-w 1360 (wie fraia.de) */
.founder__text p:last-child { margin-bottom: 0; }
/* Der Leitsatz steht in der ersten Person, der Profiltext daneben in der
   dritten. Abgesetzt und mit Marken-Kante gelesen wirkt er als persönliche
   Aussage - im Fließtext wäre derselbe Satz ein Personenwechsel mitten im
   Absatz. Größer und dunkler als der Fließtext, aber keine Überschrift.
   Der Selektor nennt bewusst .founder__text p mit: die Regel darüber ist
   sonst spezifischer und drückt den Satz zurück auf 16px. */
.founder__text p.founder__leitsatz { margin-bottom: 22px; padding-left: 20px;
  border-left: 3px solid var(--teal); font-size: 18px; line-height: 1.6;
  font-weight: 500; color: var(--text); }
/* Der persoenliche Absatz sitzt etwas abgesetzt und leiser als der Werdegang. */
.founder__note { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 15px; color: var(--subtle); }
@media (max-width: 860px) {
  .founder { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .founder__photo { max-width: 300px; }
}

/* Fliesstext der Rechtsseiten. Schmale Spalte, weil lange Zeilen sich schlecht
   lesen - Impressum und Datenschutz werden gelesen, nicht ueberflogen. */
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(19px,2.2vw,23px); font-weight: 400; letter-spacing: -0.02em; color: var(--text); margin: 34px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 15.5px; line-height: 1.72; color: var(--muted); margin-bottom: 12px; }
.prose strong { color: var(--text); }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose .addr { color: var(--text); }
.prose .stand { margin-top: 32px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--subtle); }

/* Karte mit Bildkopf. Das Motiv ersetzt die Teal-Oberkante der schlichten
   .feat-Karte - zwei Signale an derselben Stelle waeren eines zu viel.
   Bewusst flach (5:3): Die Karte soll strukturiert wirken, nicht zur Bildkachel
   werden; der Text bleibt das Hauptelement. */
.feat__mehr { display: block; margin-top: auto; padding-top: 14px; font-size: 14.5px; font-weight: 500; color: var(--emerald); text-decoration: underline; text-underline-offset: 3px; }
.feat__mehr:hover { color: var(--teal-dark, #0B4A45); }
.feats__aktion { margin-top: 34px; text-align: center; }
.feat--img { padding: 0; border-top: 0; overflow: hidden; display: flex; flex-direction: column; }
.feat__bild { aspect-ratio: 5/3; background-size: cover; background-position: center;
  background-color: var(--stone-2); position: relative; }
/* Die Kennzeichnung sitzt am Bild selbst, nicht an der Karte. */
.feat__bild .ai-tag { right: 8px; bottom: 6px; }
.feat--img > :not(.feat__bild) { padding-left: 26px; padding-right: 26px; }
.feat--img > h3 { padding-top: 22px; }
.feat--img > :last-child { padding-bottom: 24px; }

/* ===========================================================================
   Fachbeitrag (Blog-Artikel)
   Schmale Lesespalte, ruhige Typografie. Ein Artikel wird gelesen, nicht
   ueberflogen - deshalb mehr Zeilenabstand und weniger Breite als im Rest.
   =========================================================================== */
.artikel { max-width: 760px; }
.artikel > p, .artikel > ul, .artikel > ol { font-size: 17px; line-height: 1.75; color: var(--text); margin-bottom: 20px; }
.artikel > ul, .artikel > ol { padding-left: 22px; }
.artikel li { margin-bottom: 10px; }
.artikel h2 { font-size: clamp(24px,3vw,32px); font-weight: 400; letter-spacing: -0.025em; line-height: 1.15;
  color: var(--text); margin: 52px 0 16px; text-wrap: balance; }
.artikel h2 .t { color: var(--emerald); }
.artikel h3 { font-size: clamp(18px,2vw,21px); font-weight: 500; color: var(--text); margin: 32px 0 10px; }
.artikel strong { color: var(--text); font-weight: 700; }
.artikel a { color: var(--emerald); text-decoration: underline; text-underline-offset: 3px; }
.artikel a:hover { color: var(--teal); }

/* Kopfzeile des Beitrags: Datum, Lesedauer, Autor */
.artikel__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .04em; color: var(--subtle); margin-bottom: 30px; }

/* Das Wichtigste vorweg. Wer nur diesen Kasten liest, hat den Kern. */
.summary { background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--emerald);
  border-radius: var(--radius); padding: 24px 26px; margin: 0 0 40px; }
.summary__titel { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--emerald); margin-bottom: 12px; }
.summary p { font-size: 16px; line-height: 1.7; color: var(--muted); margin-bottom: 12px; }
.summary p:last-child { margin-bottom: 0; }

/* Merksatz: die eine Aussage, die haengen bleiben soll. */
.merk { border-left: 3px solid var(--teal); padding: 4px 0 4px 22px; margin: 34px 0;
  font-size: clamp(19px,2.2vw,23px); line-height: 1.4; font-weight: 500; color: var(--text); text-wrap: balance; }

/* Zeitleiste. Bewusst senkrecht und in HTML statt als Bild: So bleibt jedes
   Datum echter Text - lesbar fuer Suchmaschinen, KI-Crawler und Screenreader -
   und die Darstellung funktioniert auf jeder Breite. */
.zeit { margin: 36px 0 44px; border-left: 2px solid var(--border); padding-left: 0; list-style: none; }
.zeit li { position: relative; padding: 0 0 26px 28px; }
.zeit li:last-child { padding-bottom: 0; }
.zeit li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--stone); border: 2px solid var(--border); }
/* Was bereits gilt, ist gefuellt; was noch kommt, bleibt offen. Die Form
   traegt die Unterscheidung, nicht nur die Farbe. */
.zeit li.ist::before { background: var(--emerald); border-color: var(--emerald); }
.zeit li.kommt::before { background: var(--white); border-color: var(--teal); border-style: dashed; }
.zeit__datum { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .08em; color: var(--emerald); }
.zeit li.kommt .zeit__datum { color: var(--subtle); }
.zeit__was { display: block; font-size: 16.5px; font-weight: 700; color: var(--text); margin: 3px 0 4px; }
.zeit__wer { display: block; font-size: 15px; line-height: 1.6; color: var(--muted); }
.zeit__marke { display: inline-block; margin-left: 8px; font-family: var(--font-mono); font-size: 10px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 100px;
  background: rgba(15,95,89,.08); color: var(--emerald); vertical-align: 2px; }
.zeit li.kommt .zeit__marke { background: rgba(145,141,132,.14); color: var(--subtle); }

/* Quellen am Fuss des Beitrags */
.quellen { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--border); }
.quellen__titel { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--subtle); margin-bottom: 12px; }
.quellen ol { padding-left: 20px; }
.quellen li { font-size: 14px; line-height: 1.6; color: var(--muted); margin-bottom: 8px; }
/* Bild im Beitragskoerper. Warum ueberhaupt ein echtes <img>: Alle anderen 24
   Motive der Seite sind CSS-Hintergruende, und die indexiert Google Bilder nicht.
   Zugleich ist es das Bild, auf das "image" im Beitrags-Schema zeigt - ohne ein
   Element auf der Seite waere das eine Behauptung ohne Deckung.
   width/height stehen im Markup und verhindern den Layout-Sprung beim Nachladen. */
.artikel__bild { position: relative; margin: 34px 0 30px; }
.artikel__bild img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover;
  border-radius: var(--radius-lg); display: block; }

/* Der Rechtsvorbehalt unter den Quellen. Stand bis 08.08.2026 als Inline-Style in
   jeder Beitragsseite - damit war er per CSS nur mit !important erreichbar, und die
   Touch-Vergroesserung lief ins Leere. Als Klasse ist er einmal definiert und die
   naechste Beitragsseite erbt ihn automatisch. */
.rechtsvorbehalt { font-size: 13.5px; color: var(--subtle); margin-top: 16px; line-height: 1.6; }

/* Beitrags-Kachel auf der Uebersicht. Frueher war die ganze Flaeche ein Link.
   Seit die Kachel einen eigenen Abspiel-Knopf traegt, geht das nicht mehr: ein
   button im a ist ungueltiges HTML und fuer Screenreader nicht bedienbar. Also
   ist die Kachel ein Container, der Titel der Link, und darunter stehen zwei
   klar getrennte Wege - lesen oder hoeren. */
.beitrag { display: block; background: var(--white); border: 1px solid var(--border);
  border-left: 3px solid var(--emerald); border-radius: var(--radius-lg); padding: 28px 30px;
  text-decoration: none; transition: box-shadow var(--t), border-color var(--t);
  box-shadow: 0 2px 4px rgba(40,30,10,.04), 0 14px 40px rgba(40,30,10,.07); }
.beitrag:hover { box-shadow: 0 4px 8px rgba(40,30,10,.06), 0 20px 52px rgba(40,30,10,.11); }
.beitrag__meta { display: block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em;
  color: var(--subtle); margin-bottom: 10px; }
.beitrag__titel { display: block; font-size: clamp(20px,2.4vw,27px); font-weight: 500; letter-spacing: -0.025em;
  line-height: 1.2; color: var(--text); margin-bottom: 12px; text-wrap: balance; }
.beitrag__titel a { color: inherit; text-decoration: none; }
.beitrag:hover .beitrag__titel a { color: var(--emerald); }
.beitrag__anriss { display: block; font-size: 15.5px; line-height: 1.65; color: var(--muted); max-width: 68ch; }
/* Knopfleiste der Kachel: lesen (Link) und hoeren (Knopf mit Mini-Abspieler).
   Der Abspieler laedt nichts, solange niemand drauftippt - preload="none" im
   HTML, und das audio-Element entsteht ohnehin erst beim Klick. Sonst zoege
   die Uebersicht acht Aufnahmen gleichzeitig. */
.beitrag__wege { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.wegknopf { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700;
  padding: 10px 18px; border-radius: 100px; border: 1px solid var(--border); background: var(--white);
  color: var(--text); text-decoration: none; cursor: pointer; font-family: inherit;
  line-height: 1.35; transition: border-color var(--t), color var(--t), background var(--t); }
  /* line-height ausdruecklich: ein button erbt sie nicht vom body, dadurch war
     der Knopf vier Pixel flacher als der Link daneben. */
.wegknopf:hover { border-color: var(--emerald); color: var(--emerald); }
.wegknopf--lesen { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.wegknopf--lesen:hover { background: var(--emerald-deep); border-color: var(--emerald-deep); color: #fff; }
.wegknopf__icon { width: 9px; height: 11px; flex-shrink: 0; }
.wegknopf[aria-pressed="true"] { border-color: var(--emerald); color: var(--emerald); background: rgba(15,95,89,.06); }
/* Der Abspieler klappt unter der Knopfleiste auf, nicht daneben - daneben
   waere er auf dem Telefon zwei Zentimeter breit. */
.minispieler { margin-top: 14px; }
.minispieler audio { width: 100%; height: 40px; display: block; }
.minispieler[hidden] { display: none; }

/* Hoerfassung des Beitrags. Steht direkt unter der Zusammenfassung, weil die
   Entscheidung "lesen oder hoeren" ganz am Anfang faellt. */
.hoerfassung { background: var(--emerald-deep); border-radius: var(--radius-lg); padding: 22px 24px; margin: 0 0 38px; }
.hoerfassung__kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.hoerfassung__titel { font-size: 17px; font-weight: 700; color: #F0FAF8; }
.hoerfassung__dauer { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal-bright); }
.hoerfassung__text { font-size: 14.5px; line-height: 1.6; color: #A9CEC8; margin-bottom: 14px; }
.hoerfassung audio { width: 100%; height: 40px; display: block; }
.hoerfassung__hinweis { font-size: 12.5px; line-height: 1.55; color: #7FA39D; margin-top: 12px; }

/* Hinweis am Beitragsanfang, dass er zu einer Serie gehoert. */
.serie-hinweis { font-size: 15px !important; line-height: 1.6 !important; color: var(--muted) !important;
  background: rgba(15,95,89,.05); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 26px !important; }

/* Serien-Pille im Kopf eines Beitrags. Sagt nicht nur, der wievielte Teil das
   ist, sondern auch wie viele es werden - erst dadurch wird erkennbar, dass es
   sich lohnt, die Serie zu verfolgen. */
.serie-pille { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; clear: both;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 6px 14px; border-radius: 100px;
  background: rgba(79,216,203,.12); border: 1px solid rgba(79,216,203,.3); color: var(--teal-bright); }
.serie-pille__punkt { width: 5px; height: 5px; border-radius: 50%; background: var(--teal-bright); flex-shrink: 0; }
/* Auf sehr schmalen Geraeten (iPhone SE, 320 px) brach "Serie KI-Governance ·
   Teil 1 von 6" in der Pille zweizeilig um. Sie funktioniert dann zwar, wirkt
   aber unruhig - eine Pille ist als einzeiliges Etikett gedacht. Etwas engere
   Laufweite und Polsterung genuegen, damit sie in einer Zeile bleibt. */
@media (max-width: 380px) {
  .serie-pille { font-size: 10px; letter-spacing: .06em; padding: 6px 11px; gap: 6px; }
}
/* Auf hellem Grund, etwa in der Kachel der Uebersichtsseite */
.beitrag .serie-pille { background: rgba(15,95,89,.08); border-color: rgba(15,95,89,.22);
  color: var(--emerald); margin-bottom: 10px; }

/* Feed-Adresse mit Kopier-Knopf. Die Adresse steht sichtbar daneben, damit man
   sie auch abtippen oder per Hand markieren kann. */
.feedbox { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; }
.feedbox__adresse { font-family: var(--font-mono); font-size: 14px; color: var(--text);
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 18px; overflow-wrap: anywhere; }
  /* anywhere statt break-all: break-all bricht IMMER am Zeilenende, auch wenn das
     Wort noch gepasst haette - dadurch stand die Adresse als ".../feed." / "xml"
     da. anywhere bricht nur, wenn es sonst ueberlaeuft. */

/* Beitragskachel mit Motiv. Bild links, Text rechts - so bleibt der Anriss
   lesbar und die Kachel bekommt trotzdem das Gewicht der Bildkarten. */
.beitrag--bild { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 0; padding: 0; overflow: hidden; }
.beitrag__motiv { background-size: cover; background-position: center; background-color: var(--stone-2);
  min-height: 100%; position: relative; }
.beitrag__motiv .ai-tag { right: 8px; bottom: 6px; }
.beitrag--bild .beitrag__inhalt { padding: 28px 30px; }
@media (max-width: 760px) {
  .beitrag--bild { grid-template-columns: minmax(0,1fr); }
  .beitrag__motiv { aspect-ratio: 16/7; min-height: 0; }
}

/* ── Serienteile kompakt ──────────────────────────────────────────────
   Ab acht Beitraegen wird die Uebersicht zur langen Bahn, wenn jeder
   eine breite Kachel bekommt. Der Einstieg einer Serie bleibt gross,
   die uebrigen Teile stehen kompakt daneben - Titel und Nummer reichen,
   wer mehr will, klickt. minmax(0,1fr) statt 1fr, sonst sprengen lange
   Titel das Raster auf schmalen Geraeten. */
.serienraster { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px; margin-top: 20px; }
@media (max-width: 980px) { .serienraster { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .serienraster { grid-template-columns: minmax(0,1fr); } }

.serienteil { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border);
  border-top: 3px solid var(--teal); border-radius: var(--radius-lg); padding: 20px 22px;
  text-decoration: none; transition: box-shadow var(--t), transform var(--t);
  box-shadow: 0 2px 4px rgba(40,30,10,.04), 0 10px 28px rgba(40,30,10,.06); }
.serienteil:hover { box-shadow: 0 4px 8px rgba(40,30,10,.06), 0 16px 40px rgba(40,30,10,.10); }
.serienteil__nr { display: block; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--emerald); margin-bottom: 8px; }
.serienteil__titel { display: block; font-size: 17px; font-weight: 500; line-height: 1.35;
  letter-spacing: -0.015em; color: var(--text); margin-bottom: 8px; text-wrap: balance; }
.serienteil__titel a { color: inherit; text-decoration: none; }
.serienteil:hover .serienteil__titel a { color: var(--emerald); }
.serienteil__meta { display: block; font-size: 13px; color: var(--muted); }
/* Knopfleiste an den Kachelfuss: sonst haengt sie bei einem dreizeiligen Titel
   tiefer als bei den Nachbarn in derselben Zeile. */
.serienteil .beitrag__wege { margin-top: auto; padding-top: 16px; }
.serienteil .wegknopf { font-size: 13.5px; padding: 8px 15px; }

/* ── Serie am Stueck hoeren ───────────────────────────────────────────
   Spielt die vorhandenen Aufnahmen nacheinander ab. Bewusst keine
   zusammengefuegte Datei: die waere bei sechs Folgen ueber 50 MB gross
   und muesste bei jedem neuen Teil neu erzeugt werden. */
.serienplayer { margin-top: 22px; padding: 18px 20px; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius-lg); }
.serienplayer__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.serienplayer__jetzt { font-size: 14px; color: var(--muted); }
.serienplayer audio { display: block; width: 100%; margin-top: 14px; }
.serienplayer[hidden] { display: none; }

/* ── Landkarte: vier Fragen, daran die Regelwerke ─────────────────────
   Der Uebersichtsbeitrag lebt von einer Bewegung: aus acht Regelwerken
   werden vier Fragen. Eine Grafik, die nur die acht Kaesten zeigt, waere
   eine bebilderte Liste und wuerde genau das Gegenteil erzaehlen. Also
   fuehrt die Achse die Fragen, und die Regelwerke haengen daran.

   HTML statt SVG oder Bild: Jeder Paragraf bleibt echter Text - lesbar
   fuer Suchmaschinen, KI-Crawler und Screenreader - und die Sache
   funktioniert auf jeder Breite, statt auf dem Telefon zu zerfallen.
   Aus der Hoerfassung faellt sie ueber die Klasse heraus; gesprochen
   waere sie eine Aufzaehlung ohne Haltegriff. */
.landkarte { margin: 34px 0 38px; }
.landkarte__kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.landkarte__titel { font-size: 17px; font-weight: 800; letter-spacing: -0.015em; color: var(--text); }
.landkarte__hinweis { font-size: 13.5px; color: var(--subtle); }

.landkarte__raster { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
@media (max-width: 620px) { .landkarte__raster { grid-template-columns: minmax(0,1fr); } }

.lkfrage { background: var(--white); border: 1px solid var(--border);
  border-top: 3px solid var(--emerald); border-radius: var(--radius-lg); padding: 20px 22px;
  display: flex; flex-direction: column; }
.lkfrage__nr { display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--emerald); color: #fff;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; margin-bottom: 12px; }
.lkfrage__frage { font-size: 16.5px; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em;
  color: var(--text); margin-bottom: 8px; text-wrap: balance; }
.lkfrage__wann { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-bottom: 16px; }
.lkfrage__regeln { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

/* Ein Regelwerk. Der Status steckt NICHT nur in der Farbe: gefuellt gegen
   umrandet, dazu ein Punkt und der Titel im Klartext - sonst ist die
   Unterscheidung fuer Rot-Gruen-Blinde nicht vorhanden. */
.lkregel { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700;
  padding: 7px 13px; border-radius: 100px; text-decoration: none;
  border: 1px solid transparent; transition: border-color var(--t), background var(--t); }
.lkregel__punkt { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.lkregel--immer { background: rgba(15,95,89,.09); color: var(--emerald); border-color: rgba(15,95,89,.2); }
.lkregel--immer .lkregel__punkt { background: var(--emerald); }
.lkregel--wenn { background: transparent; color: var(--muted); border-color: var(--border);
  border-style: dashed; }
.lkregel--wenn .lkregel__punkt { background: transparent; border: 1.5px solid var(--subtle); }
a.lkregel:hover { border-color: var(--emerald); color: var(--emerald); border-style: solid; }

.landkarte__legende { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px;
  font-size: 13px; color: var(--muted); }
.landkarte__legende span { display: inline-flex; align-items: center; gap: 7px; }


/* ── Produktkachel FrΛIa ───────────────────────────────────────────────
   Schliesst auf der Startseite die Leistungsreihe ab und fuehrt nach
   fraia.de. Eigene Komponente statt Inline-Stil: Sie traegt einen
   Verlauf, das Superzeichen als Wasserzeichen und ein eigenes
   Umbruchverhalten in zwei Stufen - das laesst sich inline weder lesen
   noch pflegen. Sitzt im .feats-Raster und laeuft ueber alle Spalten. */
.pkachel { grid-column: 1 / -1; position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 34px; padding: 42px 44px; border-radius: var(--radius-lg);
  border-top: 3px solid var(--teal-bright);
  background: linear-gradient(135deg, var(--emerald) 0%, var(--emerald-deep) 72%);
  box-shadow: 0 2px 4px rgba(15,95,89,.10), 0 18px 50px rgba(15,95,89,.28);
  transition: box-shadow var(--t); }
/* Kein Hover auf der Kachel: Sie war bis zum 12.08.2026 selbst ein Link und
   hob sich beim Ueberfahren an. Der Verweis liegt jetzt allein auf dem Knopf -
   eine Kachel, die auf den Mauszeiger reagiert, ohne klickbar zu sein, ist ein
   leeres Versprechen. Nebeneffekt: Ihr Text laesst sich wieder markieren. */
/* Das Superzeichen aus dem Favicon - klein und deckend über der Marke,
   nicht groß und blass dahinter. Als Wasserzeichen lag es bis zum
   11.08.2026 rechts in der Kachel, genau dort, wo der weiße Knopf steht:
   dessen Kante lief quer durch das Zeichen. Hinter die Wortmarke gerückt
   war es ruhiger, aber immer noch ein Schatten hinter Text. Jetzt gehört
   es zur Marke, steht über ihr und trägt die CI-Farbe voll.
   Kein Bild: als Pfad bleibt es scharf und nimmt die Farbe über die Variable. */
/* min-width statt 0: sonst schrumpft der Textblock, bis der Knopf noch
   danebenpasst - auf 390px blieben 96px Textspalte und die Kachel wurde
   988px hoch. Mit der Untergrenze bricht der Knopf stattdessen um. */
.pkachel__innen { position: relative; display: flex; flex-wrap: wrap; align-items: center;
  gap: 34px; flex: 1; min-width: min(100%, 340px); }
/* Zeichen, Label und Wortmarke stehen auf einer Mittelachse. Der Block ist nur
   so breit wie sein breitestes Kind - zentriert wird also über diesem, nicht
   über der Kachel, und das hält auf jeder Breite.
   Welches Kind das ist, wechselt seit dem 12.08.2026 mit der Fensterbreite:
   Auf dem Desktop führt die Wortmarke (138 gegen 130 px), unterhalb von 640 px
   schrumpft sie auf 44 px Schriftgröße und das Label „Unsere Plattform"
   übernimmt (130 gegen 108 px). Sichtbar ist das nicht, weil beide zentriert
   stehen - wer hier aber Schriftgrößen ändert, sollte es wissen. */
.pkachel__marke { flex-shrink: 0; text-align: center; }
.pkachel__label { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--teal-bright); margin-bottom: 10px; }
/* Marke 2.0: FRΛIA im Logo-System (Rautenfeld + Name), wie im Kopf von fraia.de. */
.pkachel__logo { display: block; height: 45px; width: auto; margin: 6px auto 0; }
/* Der Text nimmt die freie Breite mit. Mit festem 52ch blieben zwischen ihm
   und dem Knopf 166px leer, während rechts vom Knopf nur 44px Rand standen -
   der Knopf sah abgeschoben aus. Die Zeilenlänge deckelt die Kachel selbst
   über .wrap; die 70ch sind nur die Bremse, falls --max-w mal wächst.
   Die Untergrenze ist Pflicht: mit min-width 0 quetscht sich der Text auf
   schmalen Schirmen neben die Wortmarke (162px), statt unter sie zu rutschen. */
.pkachel__text { flex: 1; min-width: min(100%, 320px); max-width: 70ch;
  padding-left: 34px; border-left: 1px solid rgba(127,233,221,.30); }
.pkachel__text h3 { font-size: 19px; font-weight: 500; color: #fff; margin-bottom: 9px;
  letter-spacing: -0.01em; text-wrap: balance; }
.pkachel__text p { font-size: 15px; line-height: 1.62; color: #C6E3DF; }
/* Die Aktionsspalte: derselbe Strich wie links, dahinter die Aktion „Das freie Feld“
   (Thorsten 09.10.2026, Variante B): die grüne Kachel aus dem Rautenfeld als Raute mit Pfeil,
   daneben „Plattform ansehen“ und die Adresse. Vorher stand hier ein türkiser Block mit drei
   Zeilen - Grün auf Smaragd, er ging unter. Beim Überfahren rückt die Raute ein Stück nach oben
   rechts, so wie die Kachel im Logo ins freie Feld rückt. */
.pkachel__aktion { display: flex; align-items: center; }
.pk-feld { display: flex; align-items: center; gap: 22px; color: #fff; text-decoration: none; border-radius: 12px; }
.pk-feld:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 8px; }
.pk-feld__raute { position: relative; width: 58px; height: 58px; flex-shrink: 0;
  display: grid; place-items: center; color: var(--emerald-deep); }
.pk-feld__raute::before { content: ''; position: absolute; inset: 8px; border-radius: 7px;
  background: var(--teal-bright); transform: rotate(45deg); box-shadow: 0 10px 24px rgba(0,0,0,.25);
  transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.pk-feld__raute svg { position: relative; z-index: 1; transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.pk-feld:hover .pk-feld__raute::before, .pk-feld:focus-visible .pk-feld__raute::before { transform: translate(4px, -4px) rotate(45deg); }
.pk-feld:hover .pk-feld__raute svg, .pk-feld:focus-visible .pk-feld__raute svg { transform: translate(4px, -4px); }
/* Der Tropfen-Ring von früher, jetzt als Raute: Alle vier Sekunden löst sich ein feiner Rand und
   läuft aus. Nur transform und opacity, die Grafikkarte zeichnet, die Seite nicht. */
.pk-feld__raute::after { content: ''; position: absolute; inset: 8px; border-radius: 7px;
  border: 1px solid var(--teal-bright); transform: rotate(45deg); opacity: 0; pointer-events: none;
  animation: pk-feld-ring 4s cubic-bezier(.22,.61,.36,1) infinite; }
@keyframes pk-feld-ring {
  0%        { transform: rotate(45deg) scale(1);    opacity: .7; }
  55%, 100% { transform: rotate(45deg) scale(1.45); opacity: 0; }
}
.pk-feld__text { display: flex; flex-direction: column; gap: 3px; }
.pk-feld__text strong { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.pk-feld__text span { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal-bright); }
/* Wer Bewegung abgeschaltet hat, sieht eine ruhende Raute ohne Ring. */
@media (prefers-reduced-motion: reduce) {
  .pk-feld__raute::after { animation: none; }
  .pk-feld__raute::before, .pk-feld__raute svg { transition: none; }
}
@media (min-width: 1101px) {
  .pkachel__aktion { align-self: stretch; padding-left: 34px;
    border-left: 1px solid rgba(127,233,221,.30); }
  /* Damit beide Striche exakt gleich lang sind, bekommt auch der Textblock die
     volle Zeilenhoehe. Ohne das haengt der linke Strich am Text (112 px) und
     waere 17 px kuerzer als der rechte, der auf Markenhoehe steht (129 px).
     Der Text selbst bleibt dabei mittig - deshalb die Flex-Spalte. */
  .pkachel__text { align-self: stretch; display: flex; flex-direction: column;
    justify-content: center; }
}
/* Bricht der Text unter die Marke, waeren beide Striche quer - sie fallen weg,
   und der Knopf wird wieder flach und einzeilig. Die Streckung darf hier auf
   keinen Fall greifen: Die Flex-Zeile ist dann rund 300 px hoch (gemessen bei
   820 px Fensterbreite), der Knopf wuerde zum weissen Balken. */
@media (max-width: 1100px) {
  .pkachel__text { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
  .pkachel { padding: 32px 26px; gap: 22px; }
  .pkachel__innen { gap: 20px; }
  .pkachel__logo { height: 36px; }
}

/* ---------------------------------------------------------------------------
   Artikel-Kopfzeile (Uhr-Symbol, Autorenbild) und Teilen-Block am Textende.
   Die Knoepfe sind reine Links plus ein eigener Kopieren-Knopf. Eingebettete
   Netzwerk-Widgets kaemen nicht infrage: sie laden fremde Skripte nach und
   verfolgen Besucher - und die CSP (default-src 'self') laesst sie ohnehin
   nicht durch.
--------------------------------------------------------------------------- */
.artikel__meta span { display: inline-flex; align-items: center; gap: 7px; }
.artikel__ikon { width: 13px; height: 13px; flex: none; opacity: .8; }
.artikel__avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--border); flex: none; }

.teilen { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--border); }
.teilen__titel { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--subtle); margin-bottom: 14px; }
.teilen__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.teilen__knopf { display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; border: 1px solid var(--border); border-radius: 50%;
  background: var(--white); color: var(--muted); cursor: pointer;
  transition: color var(--t), border-color var(--t), background var(--t); }
.teilen__knopf:hover, .teilen__knopf:focus-visible {
  color: var(--emerald); border-color: var(--emerald); background: var(--stone); }
.teilen__knopf svg { width: 17px; height: 17px; display: block; }
.teilen__hinweis { font-family: var(--font-mono); font-size: 12px; color: var(--emerald);
  margin-left: 4px; opacity: 0; transition: opacity var(--t); }
.teilen__hinweis.ist-sichtbar { opacity: 1; }

@media (max-width: 640px) {
  .teilen__knopf { width: 44px; height: 44px; }
}

/* ── Abstands-Rhythmus (05.10.2026) ─────────────────────────────────────────
   Anlass: Thorsten, „nach dem ersten Kapitel wieder zu viel Platz“. Gemessen auf
   allen Seiten: zwischen dem Inhalt zweier Abschnitte lagen 210 bis 290 px, im
   Extrem 408 px. Ursache: 2 x 92 px Innenabstand plus der nachlaufende
   Außenabstand des letzten Elements (.lead 56 px), im Abschnittskopf zusätzlich
   .lead 56 px + .shead 48 px. Jetzt trägt jeweils nur EIN Abstand. */
.sec { padding: clamp(48px, 5vw, 64px) 0; }
.cta { padding: clamp(64px, 6.5vw, 84px) 0; }
/* Nur Desktop: unter 961 px gelten die Handy-Werte (.hero 100 px, .phero 64 px, Bild-Hero 40 px unten) */
@media (min-width: 961px) {
  .hero { padding-bottom: clamp(84px, 8vw, 112px); }
  .phero { padding-bottom: clamp(56px, 5vw, 72px); }
}
.shead { margin-bottom: 40px; }
.shead > .lead:last-child,
.sec > .wrap > :last-child,
.sec > .wrap > :last-child > :last-child { margin-bottom: 0; }

/* Bild-Heroes auf dem Desktop niedriger (Thorsten 09.10.2026: "alle Heros sind zu hoch").
   Gemessen bei 1440 px: Inhalt 286 bis 385 px in 648 px Höhe, also bis zu 360 px Leerfläche.
   Die einheitliche Höhe aller Bild-Heroes bleibt (siehe .phero--img oben), nur der Wert sinkt
   auf 580 px. padding-top 112 hält den Abstand unter dem Menü wie bisher, gekürzt wird vor
   allem die Fläche unter dem Knopf. Steht am Dateiende, weil die padding-bottom-Regeln für
   .hero/.phero weiter oben sonst gewinnen. Handy (bis 960 px) bleibt unverändert. */
@media (min-width: 961px) {
  .hero--img, .phero--img { min-height: 580px; padding-top: 112px; padding-bottom: 64px; }
}

/* ==========================================================================
   Magazin-Raster Fachbeiträge (Thorsten 09.10.2026)
   Ab 1200 px: links Inhaltsverzeichnis, Mitte Artikel, rechts Hörfassung, Serie
   und Gespräch. Darunter einspaltig: aufklappbares Verzeichnis, dann Hörfassung.
   Das <details> trägt im HTML das Attribut open, damit ohne JavaScript nichts
   verborgen bleibt; artikel.js klappt es unter 1200 px zu und ab 1200 px auf.
   ========================================================================== */
/* Das Raster bleibt in der normalen Seitenbreite (Innenbreite 1264 px), damit Inhaltsverzeichnis
   und Randspalte in der Flucht von Logo und Kopfzeile stehen (Korrektur 09.10.2026). */

.mag-toc__details { margin: 0 0 22px; }
.mag-toc__kopf { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--emerald); cursor: pointer; padding: 12px 16px; list-style: none;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); }
.mag-toc__kopf::-webkit-details-marker { display: none; }
.mag-toc__kopf::after { content: "+"; float: right; font-size: 15px; line-height: 1; }
.mag-toc__details[open] > .mag-toc__kopf::after { content: "\2212"; }
.mag-toc__details[open] > .mag-toc__kopf { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.mag-toc__liste { list-style: none; margin: 0; padding: 10px 16px 14px; background: var(--white);
  border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
.mag-toc__liste li { margin: 0; }
.mag-toc__liste a { display: block; padding: 7px 0 7px 14px; margin-left: -1px; border-left: 2px solid transparent;
  font-size: 14.5px; line-height: 1.4; color: var(--muted); text-decoration: none; transition: color var(--t), border-color var(--t); }
.mag-toc__liste a:hover { color: var(--emerald); }
.mag-toc__liste a.is-aktiv { color: var(--text); font-weight: 700; border-left-color: var(--teal); }
.mag-toc__fortschritt { display: none; }

.mag-rand .hoerfassung { margin-bottom: 22px; }
.mag-karte { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px 20px; margin: 0 0 18px; }
.mag-karte__kopf { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--emerald); margin-bottom: 12px; }
.mag-serie__liste { list-style: none; margin: 0; padding: 0; }
.mag-serie__liste li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; margin: 0;
  font-size: 13.5px; line-height: 1.4; }
.mag-serie__nr { flex: none; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--subtle); width: 14px; }
.mag-serie__liste a { color: var(--muted); text-decoration: none; }
.mag-serie__liste a:hover { color: var(--emerald); }
.mag-serie__liste .is-aktuell { border-left: 2px solid var(--teal); margin-left: -20px; padding-left: 18px; }
.mag-serie__liste .is-aktuell a { color: var(--text); font-weight: 700; }
.mag-serie__liste .is-aktuell .mag-serie__nr { color: var(--emerald); }
.mag-gespraech p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0 0 12px; }
.mag-gespraech__link { font-size: 14px; font-weight: 700; color: var(--emerald); text-decoration: none; }
.mag-gespraech__link:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

.artikel h2 { scroll-margin-top: 96px; }

/* Unter 1200 px: nur Verzeichnis (zugeklappt per JS) und Hörfassung; Serie und Gespräch stehen am Artikelende bzw. im Abschnitt darunter */
@media (max-width: 1199px) {
  .mag-serie, .mag-gespraech { display: none; }
  .mag-toc, .mag-rand, .wrap--mag .artikel { max-width: 760px; margin-left: auto; margin-right: auto; }
}

@media (min-width: 1200px) {
  .wrap--mag { display: grid; grid-template-columns: 200px minmax(0, 1fr) 240px; column-gap: 36px;
    justify-content: center; align-items: start; }
  .wrap--mag .artikel { grid-column: 2; grid-row: 1; max-width: none; }
  .mag-toc { grid-column: 1; grid-row: 1; position: sticky; top: 96px; }
  .mag-rand { grid-column: 3; grid-row: 1; }
  .mag-toc__kopf { cursor: default; pointer-events: none; background: none; border: 0; border-radius: 0; padding: 0 0 12px; }
  .mag-toc__kopf::after, .mag-toc__details[open] > .mag-toc__kopf::after { content: none; }
  .mag-toc__liste { background: none; border: 0; border-left: 1px solid var(--border); border-radius: 0; padding: 0; }
  .mag-toc__fortschritt { display: block; height: 3px; margin-top: 18px; background: var(--stone-2); border-radius: 3px; overflow: hidden; }
  .mag-toc__fortschritt span { display: block; height: 100%; background: var(--teal); transform-origin: left center;
    transform: scaleX(0); will-change: transform; }
  .mag-rand .hoerfassung { padding: 18px 18px; }
  .mag-rand .hoerfassung__titel { font-size: 16px; }
}

@media (min-width: 1360px) {
  .wrap--mag { grid-template-columns: 200px minmax(0, 720px) 232px; column-gap: 56px; }   /* 200 + 56 + 720 + 56 + 232 = 1264 */
}
/* Nur das Inhaltsverzeichnis läuft mit. Die Randspalte (Hörfassung, Serie, Gespräch) misst rund
   970 px und passte erst ab etwa 1.100 px Bildschirmhöhe; eine Spalte mit eigenem Scrollbalken wäre
   schlechter. Sie steht neben dem Textanfang, Serie und Gespräch folgen am Ende ohnehin noch einmal. */

@media (prefers-reduced-motion: no-preference) {
  .mag-toc__fortschritt span { transition: transform .15s linear; }
}

/* Hinweis, wenn eine Hörfassung nicht startet (hoeren.js) */
.hoeren__hinweis { margin: 8px 0 0; font-size: 13.5px; color: #A15B4E; font-weight: 600; }

/* Fehlerseite: kleine Linkliste unter dem Knopf, damit die Fläche vor der Fußzeile nicht leer bleibt */
.nf-links { margin-top: 28px; font-size: 15px; color: #9DA3A7; }
.nf-links a { color: var(--teal-bright); text-decoration: underline; text-underline-offset: 3px; }

.feat a.ex { text-decoration: underline; text-underline-offset: 3px; }
.feat a.ex:hover { color: var(--emerald); }

/* Textlink unter der FrΛIa-Wortmarke in der Fußzeile (Kontrast zum Fußgrund 7,4 : 1) */
.footer__grid .footer__by-link { display: block; margin-top: 10px; font-size: 14px; color: #9DA3A7; text-decoration: underline; text-underline-offset: 3px; }
.footer__grid .footer__by-link:hover, .footer__grid .footer__by-link:focus-visible { color: var(--teal-bright); }

/* Überschriften ausgewogen umbrechen (09.10.2026) */
h1, h2, h3 { text-wrap: balance; }

/* Tippflächen: alleinstehende Textlinks mindestens 24 px hoch (WCAG 2.2, 2.5.8).
   Padding vergrößert die Fläche, das negative margin nimmt die Höhe wieder aus dem Fluss. */
.feat a.ex { padding-block: 5px; margin-top: 7px; margin-bottom: -5px; }
.feat .ex a:not(.ex) { display: inline-block; padding-block: 5px; margin-block: -5px; }
.serienteil__titel a { display: inline-block; padding-block: 3px; margin-block: -3px; }

/* Hero auf Laptop-Breiten: Textspalte (Lead, Merkmale, Hinweise) bleibt links vom Hauptmotiv im Bild (09.10.2026) */
@media (min-width: 961px) {
  header.hero .hero__sub, header.hero .hero__merkmale, header.hero .hero__rolle,
  header.phero .phero__sub, header.phero .phero__note { max-width: min(600px, 48vw); }
}

/* ===========================================================================
   Diagramm und Faktenblock im Beitrag (10.10.2026)
   Seit drei Beitraege sie nutzen, hier statt als seiteneigener <style>-Block.
   =========================================================================== */
/* Diagramm im Beitrag (10.10.2026, das erste der Seite). Wie die Zeitleiste in HTML statt als
   Bild: Jede Zahl bleibt echter Text, die Balken sind Beiwerk (aria-hidden). Farbe heißt hier
   "hier steht der Leser" - eine Zeile in Emerald, der Rest in Grau (3,4 : 1 auf Weiß). */
.diagramm { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px 26px 18px; margin: 34px 0 30px; }
.diagramm__teil + .diagramm__teil { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 22px; }
.diagramm__titel { font-size: 18px; font-weight: 500; line-height: 1.35; color: var(--text); margin: 0 0 4px; text-wrap: balance; }
.diagramm__unter { font-size: 14.5px; font-weight: 400; line-height: 1.55; color: var(--muted); margin: 0 0 18px; }
.balken { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.balken li { display: grid; grid-template-columns: 96px minmax(0,1fr) 52px; align-items: center; gap: 12px; margin: 0; }
.balken__name, .balken__zahl { font-size: 15px; font-weight: 400; color: var(--text); }
.balken__zahl { text-align: right; font-variant-numeric: tabular-nums; }
.balken__spur { display: flex; align-items: center; height: 18px; }
.balken__spur > span { display: block; height: 18px; width: var(--w); min-width: 3px; background: #8F8A80; border-radius: 0 4px 4px 0; }
.balken--fokus .balken__spur > span { background: var(--emerald); }
.balken--fokus .balken__name, .balken--fokus .balken__zahl { font-weight: 600; }
.jahr__monate, .jahr__achse { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 2px; }
.jahr__monate > span { position: relative; height: 18px; background: var(--border); overflow: hidden; }
.jahr__monate > span:first-child { border-radius: 4px 0 0 4px; }
.jahr__monate > span:last-child { border-radius: 0 4px 4px 0; }
.jahr__monate > .jahr__teil::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--w);
  background: var(--emerald); border-radius: 0 4px 4px 0; }
.jahr__achse { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--subtle); text-align: center; }
.jahr__wert { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 400; color: var(--text); margin: 14px 0 0; }
.jahr__marke { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--emerald); }
.diagramm__quelle { font-size: 13px; font-weight: 400; line-height: 1.6; color: var(--subtle); margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--border); }
@media (max-width: 560px) {
  .diagramm { padding: 20px 16px 16px; }
  .balken li { grid-template-columns: 86px minmax(0,1fr) 46px; gap: 8px; }
}

/* Faktenblock (10.10.2026, Thorsten): Zahlen, Regeln und Studien gesammelt am Schluss,
   damit Fliesstext und Hoerfassung fluessig bleiben. Wird nicht vorgelesen
   (hoerfassung_erzeugen.py, RAUS "fakten"); der Abbinder verweist darauf.
   Aufbau: Kopf, optional Kennzahlen (die drei, vier Zahlen, die man sucht), optional
   Diagramm, dann thematische Gruppen mit dt/dd. Gruppiert statt als lange zweispaltige
   Tabelle, weil die am Handy zur Textwueste wurde (Thorsten, 10.10.2026). */
.fakten { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px 28px 12px; margin: 48px 0 0; scroll-margin-top: 90px; }
.fakten__titel { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--emerald); margin-bottom: 6px; }
.fakten__hinweis { font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--muted); margin: 0 0 20px; }
.fakten__kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin: 0 0 26px; }
/* 128 px: am Handy (304 px Innenbreite) zwei Kacheln nebeneinander, am Desktop vier. */
.kennzahl { background: var(--stone); border-radius: var(--radius); padding: 16px 16px 14px;
  display: flex; flex-direction: column; gap: 6px; }
.kennzahl__wert { font-size: 26px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--emerald); }
.kennzahl__text { font-size: 13.5px; font-weight: 400; line-height: 1.45; color: var(--muted); }
.fakten__gruppen { column-count: 2; column-gap: 36px; }
/* Spaltensatz statt Raster (10.10.2026): Im Raster wurde jede Zeile so hoch wie ihre laengste
   Gruppe - bei drei ungleich langen Gruppen blieb links ein Loch (Thorsten: "sieht noch scheisse
   aus"). Im Spaltensatz fliessen die Gruppen und gleichen sich aus; keine Gruppe wird geteilt. */
.fakten__gruppe { padding: 16px 0 14px; border-top: 1px solid var(--border); }
/* Gruppen duerfen ueber die Spalte weiterlaufen, damit beide Spalten gleich lang werden;
   geteilt wird nie mitten in einem Eintrag, und die Ueberschrift bleibt beim ersten Eintrag. */
.artikel .fakten__gruppentitel, .fakten__gruppe dt { break-after: avoid; -webkit-column-break-after: avoid; }
.fakten__gruppe dd { break-inside: avoid; -webkit-column-break-inside: avoid; }
.artikel .fakten__gruppentitel { font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: 0;
  color: var(--text); margin: 0 0 10px; }
.fakten__gruppe dl { margin: 0; }
.fakten__gruppe dt { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--text); margin: 0 0 2px; }
.fakten__gruppe dd { font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--muted); margin: 0 0 12px; }
.fakten__gruppe dd:last-child { margin-bottom: 0; }
.fakten sup { font-size: 10px; color: var(--subtle); margin-left: 1px; }
@media (max-width: 640px) {
  .fakten { padding: 22px 18px 8px; }
  .fakten__gruppen { column-count: 1; }
  .kennzahl__wert { font-size: 22px; }
}

/* Balken mit laengeren Beschriftungen (Faktenblock Schatten-KI, 10.10.2026) */
.balken--breit li { grid-template-columns: 190px minmax(0,1fr) 52px; }
/* Auf dem Handy steht die lange Beschriftung ueber dem Balken statt daneben -
   daneben blieben fuer den Balken nur rund 50 px und die Namen brachen dreizeilig. */
.balken__name { hyphens: manual; }
@media (max-width: 560px) {
  .balken--breit li { grid-template-columns: minmax(0,1fr) 46px; grid-template-areas: "name name" "spur zahl"; row-gap: 4px; }
  .balken--breit .balken__name { grid-area: name; }
  .balken--breit .balken__spur { grid-area: spur; }
  .balken--breit .balken__zahl { grid-area: zahl; }
}
/* Diagramm innerhalb des Faktenblocks: keine zweite Karte in der Karte */
.diagramm--im-block { background: none; border: 0; border-radius: 0; padding: 0; margin: 4px 0 24px; }

/* "Zum Mitnehmen" (10.10.2026, Thorsten): Die Kurzfassung steht nicht mehr als Kasten vor
   dem Text - der Beitrag steigt mit einer Szene ein und soll gern weitergelesen werden.
   Die Kernpunkte kommen als Resuemee ans Ende; die Hoerfassung spricht sie dort mit. */
.artikel ul.mitnehmen { list-style: none; padding: 20px 24px; margin: 0 0 28px; background: var(--white);
  border: 1px solid var(--border); border-left: 3px solid var(--emerald); border-radius: var(--radius); }
.artikel ul.mitnehmen li { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0 0 10px; }
.artikel ul.mitnehmen li:last-child { margin-bottom: 0; }
.artikel ul.mitnehmen li strong { color: var(--text); font-weight: 600; }

/* Kette (Eingeordnet Folge 1, 10.10.2026): Glieder von oben nach unten, links eine
   durchgehende Linie durch die Nummern, rechts die Einordnung als Wort - die Farbe
   hebt nur hervor, getragen wird die Aussage vom Text in der Pille. */
.kette { list-style: none; margin: 0; padding: 0; }
.kette li { position: relative; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 14px;
  align-items: center; padding: 12px 0; margin: 0; }
.kette li::before { content: ""; position: absolute; left: 16px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.kette li:first-child::before { top: 50%; }
.kette li:last-child::before { bottom: 50%; }
.kette__nr { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--white); border: 1.5px solid var(--border); font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.kette__ebene { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--text); }
.kette__wer { display: block; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.kette__europa { font-size: 13px; font-weight: 500; line-height: 1.3; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--stone); color: var(--muted); white-space: nowrap; }
.kette__glied--stark .kette__nr { border-color: var(--emerald); color: var(--emerald); }
.kette__glied--stark .kette__europa { border-color: var(--emerald); background: var(--white); color: var(--emerald); }
.kette__glied--chance .kette__nr { border-color: var(--emerald); background: var(--emerald); color: #fff; }
.kette__glied--chance .kette__europa { border-color: var(--emerald); background: var(--emerald); color: #fff; }
@media (max-width: 560px) {
  .kette li { grid-template-columns: 34px minmax(0,1fr); row-gap: 8px; }
  .kette__europa { grid-column: 2; justify-self: start; white-space: normal; }
  .kette__nr { grid-row: 1 / span 2; }
}
/* Faktenblock mit vielen kurzen Gruppen: jede Gruppe bleibt in einer Spalte, sonst
   steht ein Eintrag oben in der rechten Spalte ohne seine Gruppenueberschrift. */
.fakten__gruppen--ganz .fakten__gruppe { break-inside: avoid; }

/* Blog im Kolumnen-Stil (10.10.2026, Thorsten: Variante E). Uebersicht als eine Liste, neueste
   zuerst, Kategorie ueber dem Titel ohne Nummern; eine Serie steht als ein Eintrag mit senkrechtem
   Strang und nummerierten Teilen. Kopf dunkel und kompakt, damit die CI-Regel "dunkler Kopf,
   heller Inhalt" bleibt, aber der erste Bildschirm schon Inhalt zeigt. */
.phero--kompakt { padding: 124px 0 44px; }
.phero--kompakt h1 { font-size: 40px; line-height: 1.15; margin: 12px 0 14px; }
.phero--kompakt .phero__sub { font-size: 17px; max-width: 640px; margin-bottom: 0; }
.phero__links { position: relative; margin-top: 18px; display: flex; gap: 20px; flex-wrap: wrap; font-size: 15px; }
.phero__links a { color: #7FE9DD; text-decoration: none; font-weight: 500; }
.phero__links a:hover { text-decoration: underline; color: #7FE9DD; }
.bl-kol { display: grid; grid-template-columns: minmax(0, 720px) 270px; gap: 64px; justify-content: center; }
.bl-liste { list-style: none; margin: 0; padding: 0; }
.bl-eintrag { padding: 28px 0; border-bottom: 1px solid var(--border); margin: 0; }
.bl-eintrag:first-child { padding-top: 0; }
.bl-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--subtle);
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.bl-kategorie { color: var(--emerald); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.sec h2.bl-titel { font-size: 25px; line-height: 1.3; font-weight: 400; letter-spacing: -0.005em; margin: 10px 0 8px; max-width: none; }
.sec h3.bl-teil__titel { font-size: 19px; line-height: 1.35; font-weight: 400; letter-spacing: 0; margin: 6px 0 8px; max-width: none; }
.bl-titel a, .bl-teil__titel a { color: var(--text); text-decoration: none; }
.bl-titel a:hover, .bl-teil__titel a:hover { color: var(--emerald); }
.bl-anriss { font-size: 16.5px; line-height: 1.65; color: var(--muted); margin: 0; max-width: 640px; }
.bl-wege { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.bl-teil .bl-wege { margin-top: 0; gap: 16px; }
.bl-lesen { font-size: 14px; font-weight: 500; color: var(--emerald); text-decoration: none; }
.bl-lesen:hover { text-decoration: underline; color: var(--emerald); }
.bl-hoeren { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 14px; font-weight: 500;
  line-height: 1; color: var(--text); background: var(--white); border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 14px; cursor: pointer; }
.bl-hoeren:hover { border-color: var(--emerald); color: var(--emerald); }
.bl-teil .bl-hoeren { padding: 6px 12px; font-size: 13px; }
.bl-strang { list-style: none; margin: 22px 0 0; padding: 0; }
.bl-teil { position: relative; display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 18px; padding: 0 0 22px; margin: 0; }
.bl-teil::before { content: ""; position: absolute; left: 17px; top: 0; bottom: 0; width: 2px; background: var(--emerald); }
.bl-teil:first-child::before { top: 18px; }
.bl-teil:last-child::before { bottom: auto; height: 18px; }
.bl-teil__nr { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--stone); border: 2px solid var(--emerald); color: var(--emerald); font-family: var(--font-mono); font-size: 14px; font-weight: 700; }
.bl-seite { position: sticky; top: 100px; align-self: start; }
.bl-box { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; margin-bottom: 18px; }
.sec h2.bl-box__titel { font-family: var(--font-mono); font-size: 11px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--emerald); margin: 0 0 12px; font-weight: 700; max-width: none; }
.bl-box ul { list-style: none; margin: 0; padding: 0; }
.bl-box li { margin: 0 0 14px; display: grid; gap: 2px; }
.bl-box li:last-child { margin-bottom: 0; }
.bl-box li a { font-size: 16px; color: var(--text); text-decoration: none; font-weight: 500; }
.bl-box li a:hover { color: var(--emerald); }
.bl-box li span, .bl-box p { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0; }
.bl-box .bl-kategorie { font-family: var(--font-mono); font-size: 11px; }
.bl-box p a { color: var(--emerald); font-weight: 500; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sec--kompakt { padding: 64px 0; }
.sec--kompakt .shead h2 { font-size: 26px; line-height: 1.25; letter-spacing: -0.005em; }
@media (max-width: 960px) { .bl-kol { grid-template-columns: minmax(0,1fr); gap: 32px; } .bl-seite { position: static; } }
@media (max-width: 560px) {
  .phero--kompakt { padding: 108px 0 36px; } .phero--kompakt h1 { font-size: 32px; }
  .sec h2.bl-titel { font-size: 21px; }
  .bl-teil { grid-template-columns: 32px minmax(0,1fr); gap: 14px; }
  .bl-teil__nr { width: 32px; height: 32px; font-size: 13px; }
  .bl-teil::before { left: 15px; } .bl-teil:first-child::before { top: 16px; } .bl-teil:last-child::before { height: 16px; }
}
/* Beitragsseiten im Blog: derselbe kompakte dunkle Kopf, kleinere Zwischenueberschriften. */
.beitragsseite .phero { padding: 124px 0 44px; }
.beitragsseite .phero h1 { font-size: 40px; line-height: 1.18; max-width: 760px; }
.beitragsseite .phero__sub { font-size: 17px; max-width: 680px; margin-bottom: 0; }
.beitragsseite .artikel h2 { font-size: 26px; line-height: 1.3; }
@media (max-width: 560px) { .beitragsseite .phero { padding: 108px 0 36px; } .beitragsseite .phero h1 { font-size: 30px; } }

/* Aufzaehlungszeichen Marke 2.0 (10.10.2026, wie fraia.de und CI 1f): eine gedrehte Kachel des
   Rautenfelds, 10 px, auf der Mitte der ersten Zeile (0.5lh, aeltere Browser 0.85em). Nur in den
   Lesebereichen; Listen mit eigener Klasse (Termin, Kontakt, Blogkaesten, Puzzle) behalten ihr Zeichen. */
.artikel ul:not([class]), .prose ul:not([class]) { list-style: none; padding-left: 0; }
.artikel ul:not([class]) > li, .prose ul:not([class]) > li, .artikel ul.mitnehmen > li { position: relative; padding-left: 22px; }
.artikel ul:not([class]) > li::before, .prose ul:not([class]) > li::before, .artikel ul.mitnehmen > li::before {
  content: ""; position: absolute; left: 2px; top: 0.85em; top: 0.5lh; transform: translateY(-50%); width: 10px; height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='5' y='5' width='14' height='14' rx='2.4' transform='rotate(45 12 12)' fill='%230F5F59'/></svg>") center/contain no-repeat; }

/* Zitatblock „Was wir machen" (Startseite und Landingpages, seit 15.10.2026 hier statt seitenlokal).
   Teil des Bausteins was-wir-machen, den scripts/bausteine_verteilen.py verteilt. */
/* Zitatblock im Abschnitt "Was wir machen": links der Text, rechts Foto und Zitat, flach mit Teal-Linie */
.zt-grid { display: grid; grid-template-columns: minmax(0, 760px) minmax(240px, 1fr); column-gap: 44px; align-items: start; }
.zt-zitat { margin: 6px 0 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--teal); }
.zt-zitat__foto { display: block; width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 2px solid var(--emerald); background: var(--stone-2); }
.zt-zitat__text { margin: 22px 0 0; font-size: 21px; line-height: 1.42; font-weight: 500; letter-spacing: -0.012em; color: var(--text); }
.zt-zitat__name { margin-top: 18px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.zt-zitat__name strong { font-size: 16.5px; font-weight: 700; color: var(--text); }
@media (max-width: 1180px) { .zt-grid { grid-template-columns: minmax(0, 1fr); } .zt-zitat { margin-top: 36px; max-width: 640px; } }