/* Literata und IBM Plex Sans, lokal eingebunden. Lizenz beider Schriften: SIL Open Font License 1.1. Erzeugt von skripte/schriften-holen.mjs. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("schriften/ibm-plex-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("schriften/ibm-plex-sans-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("schriften/literata-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("schriften/literata-latin-400-800.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* „Papier und Tinte“ – ein Gestaltungssystem für alle Seitentypen von patrickstolp.de (Entwurf, 10.11.2026).
   Regel: Technik liegt auf Tinte (dunkles Blau, Grotesk, Lime). Sprache steht auf Papier (hell, Antiqua).
   Lime ist der Textmarker: markierte Stelle, Marker-Strich, Knopf. Nie als Schriftfarbe auf Papier. */

:root {
  --tinte: #0F172A;            /* Patricks Marineblau: Schrift auf Papier, tiefster Grund */
  --grund: #131D38;            /* durchgehender Grund, gegenüber #0F172A aufgehellt */
  --flaeche: #1A2748;          /* Karten auf dem Grund */
  --flaeche-2: #24345C;
  --tief: #0F1830;             /* Skizzen und Messkarten */
  --kontur: rgba(255, 255, 255, .13);
  --hell: #EEF2F8;
  --hell-leise: #B4BFD5;
  --lime: #84CC16;             /* Patricks Grün */
  --petrol: #15779B;           /* Patricks Blaugrün */
  --papier: #F5F2EA;
  --papier-2: #EBE7DB;
  --blatt-weiss: #FFFDF8;
  --papier-linie: rgba(15, 23, 42, .15);
  --papier-leise: #485269;
  --antiqua: "Literata", Georgia, "Times New Roman", serif;
  --grotesk: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  --breite: 73rem;
  --radius: 14px;
  /* Flächenabhängig, Standard ist Tinte */
  --tx: var(--hell);
  --leise: var(--hell-leise);
  --linie: var(--kontur);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
/* overflow-wrap: Ein Wort, das breiter ist als seine Spalte (lange Adressen, „Datenschutzerklärung“ als Titel am Handy), bricht um, statt die Seite zu verbreitern */
body { position: relative; margin: 0; background: var(--grund); color: var(--tx); font: 400 1.0625rem/1.6 var(--grotesk); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
h1, h2, h3, p, ul, ol, figure, blockquote, pre { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 4px; }
.w { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }

/* Papier: alles, was hell ist */
.papier { background: var(--papier); color: var(--tinte); --tx: var(--tinte); --leise: var(--papier-leise); --linie: var(--papier-linie); }

/* Schrift */
h1, h2, h3 { font-family: var(--antiqua); font-weight: 700; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(3.1rem, 8.4vw, 6.5rem); line-height: .97; letter-spacing: -.028em; font-variation-settings: "opsz" 34; }
h2 { font-size: clamp(1.95rem, 3.6vw, 3rem); line-height: 1.08; }
h2::before { content: ""; display: block; width: 2.9rem; height: .42rem; margin-bottom: 1.1rem; background: var(--lime); border-radius: 2px; transform: skewX(-18deg); transform-origin: left bottom; }
h3 { font-size: 1.36rem; line-height: 1.22; }
.leise { color: var(--leise); }
.vorspann { font-size: 1.2rem; line-height: 1.5; color: var(--leise); }

/* Der Textmarker */
mark { background: var(--lime); color: var(--tinte); padding: .02em .2em .07em; margin-inline: -.04em; border-radius: .18em .5em .22em .55em / .5em .2em .5em .2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.rubrik { display: flex; align-items: center; gap: .6rem; font: 600 .95rem/1.3 var(--grotesk); letter-spacing: .01em; color: var(--lime); }
.rubrik::before { content: ""; flex: none; width: .4rem; height: 1.1em; background: var(--lime); border-radius: 2px; transform: skewX(-14deg); }
.papier .rubrik { color: var(--tinte); }

.knopf { display: inline-flex; align-items: center; gap: .65rem; max-width: 100%; padding: .88rem 1.4rem; border: 0; border-radius: 10px; background: var(--lime); color: var(--tinte); font: 600 1.02rem/1.2 var(--grotesk); text-decoration: none; cursor: pointer; transition: background .15s; }
.knopf::after { content: "→"; transition: transform .15s; }
.knopf:hover { background: #9BE02B; }
.knopf:hover::after { transform: translateX(3px); }
.papier .knopf { background: var(--tinte); color: #fff; }
.papier .knopf::after { color: var(--lime); }
.papier .knopf:hover { background: #1D2B4F; }
.knopf.klein { padding: .62rem 1.05rem; font-size: .95rem; }
.knopf.klein::after { content: none; }

.weiter { font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: .14em; text-underline-offset: .24em; }
.weiter::after { content: "\00a0→"; }
.weiter:hover { text-decoration-thickness: .22em; }
.verweise { display: flex; flex-wrap: wrap; gap: .7rem 2rem; margin-top: 1.6rem; font-size: 1rem; }

/* Platzhalter für Bilder */
.platz { display: grid; place-items: center; padding: 1rem; text-align: center; font: 500 .85rem/1.35 var(--grotesk); letter-spacing: .02em; color: var(--hell-leise); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .055) 0 12px, rgba(255, 255, 255, .02) 12px 24px), var(--flaeche-2); border: 1px dashed rgba(255, 255, 255, .32); border-radius: var(--radius); }
.papier .platz { color: var(--papier-leise); background: repeating-linear-gradient(135deg, rgba(15, 23, 42, .06) 0 12px, rgba(15, 23, 42, .02) 12px 24px), var(--papier-2); border-color: rgba(15, 23, 42, .32); }

/* Kopf */
.buehne { position: absolute; inset: 0 0 auto; z-index: -1; height: 62rem; max-height: 100%; pointer-events: none; background: radial-gradient(62rem 36rem at 90% 6%, rgba(21, 119, 155, .36), transparent 62%), radial-gradient(40rem 19rem at 0% 58%, rgba(52, 84, 168, .3), transparent 70%); }
.buehne::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 2.5rem, rgba(255, 255, 255, .04) 2.5rem calc(2.5rem + 1px)); -webkit-mask-image: linear-gradient(100deg, transparent 38%, #000 100%), linear-gradient(to bottom, #000 55%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(100deg, transparent 38%, #000 100%), linear-gradient(to bottom, #000 55%, transparent 100%); mask-composite: intersect; }
.kopf { display: flex; align-items: center; gap: 2rem; padding-block: 1.35rem; }
.marke { display: inline-flex; align-items: center; gap: .6rem; font: 800 1.32rem/1 var(--antiqua); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.marke::before { content: ""; width: .5rem; height: 1.25em; background: var(--lime); border-radius: 2px; transform: skewX(-14deg); }
.kopf nav { display: flex; gap: 1.7rem; margin-left: auto; font-size: .98rem; font-weight: 500; }
.kopf nav a { text-decoration: none; color: var(--hell-leise); padding-block: .3rem; border-bottom: 2px solid transparent; }
.kopf nav a:hover, .kopf nav a[aria-current] { color: #fff; border-bottom-color: var(--lime); }
.menue { display: none; margin-left: auto; padding: .55rem .95rem; border: 1px solid rgba(255, 255, 255, .4); border-radius: 8px; background: none; color: inherit; font: 600 .95rem var(--grotesk); }

/* Einstieg der Startseite */
.einstieg { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "kopf bild" "text bild"; column-gap: clamp(2rem, 5vw, 5rem); padding-top: clamp(1.8rem, 4.5vw, 4rem); }
.einstieg-kopf { grid-area: kopf; }
.einstieg-kopf h1 { margin-top: 1.1rem; }
/* Zusatz in der h1 der Startseite: zweite Zeile unter dem Namen, in der Grotesk */
.h1-zusatz { display: block; max-width: 34rem; margin-top: 1rem; font: 500 clamp(1.12rem, 1.9vw, 1.4rem)/1.35 var(--grotesk); letter-spacing: 0; font-variation-settings: normal; color: var(--hell-leise); }
.nur-lesbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.einstieg-text { grid-area: text; padding-block: 2rem clamp(3.2rem, 6vw, 5.5rem); }
.kernsatz { font: 500 clamp(1.5rem, 2.7vw, 2.15rem)/1.27 var(--antiqua); letter-spacing: -.01em; text-wrap: balance; }
.einstieg-text .leise { margin-top: 1.4rem; max-width: 36rem; font-size: 1.12rem; }
.einstieg-text .knopf { margin-top: 2rem; }
.portraet { grid-area: bild; align-self: end; position: relative; z-index: 2; margin-bottom: -3.5rem; aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; align-items: start; padding-top: 1.4rem; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.portraet svg { position: absolute; inset: auto 0 0; width: 100%; height: 86%; fill: rgba(255, 255, 255, .1); }

/* Blatt: der helle Bogen für alles Geschriebene */
.blatt { position: relative; border-radius: 22px; padding: clamp(1.5rem, 4.6vw, 4.2rem); box-shadow: 0 40px 70px -45px rgba(0, 0, 0, .65); }
.blatt + .abschnitt, .abschnitt + .blatt, .blatt + .blatt { margin-top: 0; }
.abschnitt { padding-block: clamp(3.6rem, 8vw, 6.6rem); }
.abschnittskopf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.2rem 4rem; align-items: end; margin-bottom: 2.6rem; }

.lesetext { font: 400 1.19rem/1.72 var(--antiqua); }
.lesetext p + p { margin-top: 1.2em; }

.spalten { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem clamp(2rem, 5vw, 5rem); align-items: start; }
.spalten h2 + * { margin-top: 1.6rem; }
.nachweise { padding-top: clamp(0rem, 3vw, 3rem); }
.nachweise li { display: grid; grid-template-columns: .4rem 1fr; column-gap: 1rem; padding-block: 1.05rem; border-top: 1px solid var(--linie); }
.nachweise li:last-child { border-bottom: 1px solid var(--linie); }
.nachweise li::before { content: ""; grid-row: 1 / 3; width: .4rem; height: 1.45rem; margin-top: .15rem; background: var(--lime); border-radius: 2px; transform: skewX(-14deg); }
.nachweise b { font: 700 1.22rem/1.25 var(--antiqua); }
.nachweise span { grid-column: 2; font-size: .98rem; color: var(--leise); }

/* Karten */
.karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.karten.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.karte { display: flex; flex-direction: column; gap: .85rem; padding: 1.6rem 1.6rem 1.7rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.karte > p:not(.rubrik) { font-size: 1rem; color: var(--leise); }
.karte > .weiter, .karte > .knopf { margin-top: auto; align-self: flex-start; }
.karte > .weiter { padding-top: .5rem; font-size: .98rem; }
.papier .karte { background: var(--blatt-weiss); }
a.karte { text-decoration: none; transition: border-color .15s; }
a.karte:hover { border-color: var(--lime); }

.stimme { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem 3rem; align-items: center; margin-top: 1.25rem; padding: 1.9rem 2.1rem; border-radius: var(--radius); }
.stimme blockquote { font: 500 clamp(1.25rem, 2.2vw, 1.62rem)/1.36 var(--antiqua); }
.stimme figcaption { display: flex; align-items: center; gap: .9rem; font-size: .95rem; line-height: 1.35; color: var(--leise); }
.stimme figcaption b { display: block; color: var(--tx); font-size: 1.02rem; }
.kreis { flex: none; display: grid; place-items: center; width: 3.3rem; height: 3.3rem; border-radius: 50%; background: var(--tinte); color: var(--lime); font: 700 1.3rem/1 var(--antiqua); }
.abschluss { margin-top: 2.2rem; }

/* Tafel: abgesetzte Fläche auf Tinte für Messungen und das Formular */
.tafel { border: 1px solid var(--kontur); border-radius: 22px; padding: clamp(1.5rem, 4.6vw, 4.2rem); background: radial-gradient(44rem 26rem at 100% 0%, rgba(21, 119, 155, .34), transparent 66%), #18264A; }
.messkarte { background: var(--tief); }
.messkarte h3 { font-size: 1.5rem; }
.anteil { display: flex; height: 2.5rem; margin-top: .4rem; }
.anteil i { background: var(--lime); border-radius: 7px 0 0 7px; }
.anteil::after { content: ""; flex: 1; border: 1.5px dashed rgba(255, 255, 255, .42); border-left: 0; border-radius: 0 7px 7px 0; }
.legende { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font-size: .95rem; font-weight: 500; }
.legende li { display: flex; align-items: center; gap: .5rem; }
.legende li::before { content: ""; width: .85rem; height: .85rem; border-radius: 3px; background: var(--lime); }
.legende li + li::before { background: none; border: 1.5px dashed rgba(255, 255, 255, .5); }
.funde { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; margin-top: 2.8rem; }
.funde li { padding: 1.05rem 0 1.25rem; border-top: 1px solid var(--linie); }
.funde small { display: block; margin-bottom: .25rem; font-size: .86rem; color: var(--leise); }
.funde a { font: 600 1.14rem/1.3 var(--antiqua); text-decoration: none; }
.funde a:hover { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: .14em; text-underline-offset: .2em; }

/* Skizzen aus Code statt Bildern */
.skizze { height: 9.25rem; padding: .9rem; overflow: hidden; border: 1px solid var(--kontur); border-radius: 10px; background: var(--tief); font: 500 .74rem/1 var(--mono); color: var(--hell-leise); }
.raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.raster i { display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .17); border-radius: 4px; font-style: normal; }
.raster .a { background: var(--lime); border-color: transparent; color: var(--tinte); font-weight: 700; }
.raster .b { background: rgba(21, 119, 155, .6); border-color: transparent; color: #fff; }
.chat { display: flex; flex-direction: column; gap: .6rem; }
.chat u { display: block; height: .36rem; border-radius: 2px; background: rgba(255, 255, 255, .24); text-decoration: none; }
.chat .frage { align-self: flex-end; display: grid; gap: .3rem; width: 52%; padding: .5rem .6rem; border-radius: 10px 10px 2px 10px; background: var(--flaeche-2); }
.chat .antwort { display: grid; gap: .32rem; width: 76%; }
.chat u.m { height: .5rem; background: var(--lime); }
.chat .abfragen { display: grid; grid-template-columns: repeat(18, 1fr); gap: .22rem; margin-top: auto; }
.chat .abfragen i { height: .75rem; border: 1px solid rgba(255, 255, 255, .32); border-radius: 2px; }
.chat .abfragen .j { background: var(--lime); border-color: var(--lime); }
.datei { font-size: .8rem; line-height: 1.72; white-space: pre; color: #fff; }
.datei b { font-weight: 500; color: var(--hell-leise); }
.datei em { font-style: normal; color: var(--lime); }

/* Vorträge */
.vortrag .platz { aspect-ratio: 16 / 10; }
.vortrag + .karten { margin-top: 2.6rem; }
.vortrag .verweise { display: grid; gap: .8rem; }

/* Fachartikel als Liste */
.artikelspalten { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 2.5rem clamp(2rem, 5vw, 4.5rem); align-items: start; }
.spaltentitel { margin-bottom: .9rem; font: 600 .95rem/1.3 var(--grotesk); color: var(--leise); }
.artikelliste li { border-top: 1px solid var(--linie); }
.artikelliste li:last-child { border-bottom: 1px solid var(--linie); }
.artikelliste a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1.5rem; align-items: center; padding: 1.25rem 0 1.4rem; text-decoration: none; }
.artikelliste .meta { grid-column: 1 / -1; font-size: .9rem; color: var(--leise); }
.artikelliste .titel { font: 700 clamp(1.22rem, 2vw, 1.5rem)/1.24 var(--antiqua); letter-spacing: -.008em; text-wrap: balance; }
.artikelliste a::after { content: "→"; font-size: 1.35rem; transition: transform .15s; }
.artikelliste a:hover .titel { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: .16em; text-underline-offset: .18em; }
.artikelliste a:hover::after { transform: translateX(4px); }
.reihen { display: grid; gap: .9rem; }
.reihen .karte { gap: .5rem; padding: 1.2rem 1.3rem 1.3rem; }
.reihen h3 { font-size: 1.2rem; }

/* Anfrage */
.kontakt { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2.5rem clamp(2rem, 5vw, 4.5rem); align-items: start; }
.schlagworte { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1.5rem 1.4rem; }
.schlagworte li { padding: .28rem .7rem; border: 1px solid rgba(255, 255, 255, .28); border-radius: 6px; font-size: .9rem; font-weight: 500; }
.zusagen { margin-top: 1.6rem; }
.zusagen li { position: relative; padding-left: 1.9rem; }
.zusagen li + li { margin-top: .6rem; }
.zusagen li::before { content: ""; position: absolute; left: .1rem; top: .38em; width: .95rem; height: .5rem; border: solid var(--lime); border-width: 0 0 3px 3px; transform: rotate(-45deg); }
.formular { display: grid; gap: 1.1rem; padding: clamp(1.3rem, 3vw, 2.2rem); border-radius: 16px; }
.feld span { display: block; margin-bottom: .35rem; font-size: .93rem; font-weight: 600; }
.feld i { font-style: normal; font-weight: 400; color: var(--leise); }
.feld input, .feld textarea { display: block; width: 100%; padding: .75rem .85rem; border: 1.5px solid rgba(15, 23, 42, .38); border-radius: 8px; background: var(--blatt-weiss); color: var(--tinte); font: 400 1rem/1.4 var(--grotesk); }
.feld textarea { min-height: 7.5rem; resize: vertical; }
.feld :focus { outline: 3px solid var(--lime); outline-offset: 1px; border-color: var(--tinte); }
.formular .knopf { justify-self: start; }

/* Fuß */
.fuss { margin-top: clamp(3.6rem, 8vw, 6.6rem); background: var(--tinte); }
.fuss > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; padding-block: 2.2rem; }
.fuss nav { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; font-size: .95rem; color: var(--hell-leise); }
.fuss nav a { text-decoration: none; }
.fuss nav a:hover { color: #fff; }

/* ---------- Fachartikel ---------- */
.artikelkopf { padding-block: clamp(1.8rem, 4.5vw, 3.6rem) clamp(6.5rem, 10vw, 8.5rem); }
.artikelkopf .rubrik a { text-decoration: none; }
.artikelkopf h1 { max-width: 19ch; margin-top: 1.2rem; font-size: clamp(2.25rem, 5.4vw, 4.2rem); line-height: 1.04; letter-spacing: -.022em; }
.artikelkopf .vorspann { max-width: 43rem; margin-top: 1.5rem; font-size: clamp(1.12rem, 1.8vw, 1.28rem); }
.autorzeile { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; font-size: .96rem; line-height: 1.4; color: var(--leise); }
.autorzeile b { display: block; color: var(--tx); font-size: 1.04rem; }
.autorzeile .platz { flex: none; width: 3.6rem; height: 3.6rem; padding: 0; border-radius: 50%; font-size: .62rem; }
.artikelblatt { display: grid; grid-template-columns: minmax(0, 1fr) 15.5rem; gap: 2rem clamp(2rem, 5vw, 4.5rem); align-items: start; margin-top: -4.5rem; }
.artikelblatt .lesetext { max-width: 43rem; }
.artikelblatt .lesetext > * + * { margin-top: 1.25em; }
.lesetext h2 { margin-top: 2.5em !important; font-size: clamp(1.55rem, 2.8vw, 2.15rem); line-height: 1.16; }
.lesetext h2::before { width: 2.2rem; height: .34rem; margin-bottom: .85rem; }
.lesetext a { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: .15em; text-underline-offset: .2em; }
.lesetext a:hover { background: var(--lime); text-decoration-color: transparent; }
.lesetext code { padding: .1em .35em; border-radius: 4px; background: rgba(15, 23, 42, .08); font: 500 .86em var(--mono); }
.hinweis { padding: 1.15rem 1.4rem 1.2rem 1.5rem; border-left: .42rem solid var(--lime); border-radius: 4px 10px 10px 4px; background: var(--papier-2); font: 400 1rem/1.6 var(--grotesk); }
.tabelle { overflow-x: auto; }
.tabelle table { width: 100%; min-width: 38rem; border-collapse: collapse; font: 400 .94rem/1.45 var(--grotesk); }
.tabelle th { padding: .7rem .85rem; background: var(--tinte); color: #fff; font-weight: 600; text-align: left; vertical-align: bottom; }
.tabelle th:first-child { border-radius: 8px 0 0 0; }
.tabelle th:last-child { border-radius: 0 8px 0 0; }
.tabelle td { padding: .8rem .85rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle td:first-child { font-weight: 600; }
/* Zeilenköpfe im Tabellenkörper sehen aus wie die erste Spalte, nicht wie die Kopfzeile */
.tabelle tbody th { padding: .8rem .85rem; border-bottom: 1px solid var(--linie); border-radius: 0; background: none; color: inherit; vertical-align: top; }
.lesetext blockquote { position: relative; padding-left: 3.4rem; font-size: 1.28rem; line-height: 1.5; }
.lesetext blockquote p + p { margin-top: .7em; font: 400 .95rem/1.5 var(--grotesk); color: var(--leise); }
.lesetext blockquote::before { content: "„"; position: absolute; left: 0; top: -.42em; font: 800 5rem/1 var(--antiqua); color: var(--lime); }
.lesetext ol { padding: 0; list-style: none; counter-reset: z; }
.lesetext ol > li { position: relative; padding-left: 2.7rem; counter-increment: z; }
.lesetext ol > li + li { margin-top: .85em; }
.lesetext ol > li::before { content: counter(z); position: absolute; left: 0; top: .18em; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 5px 9px 6px 10px; background: var(--lime); color: var(--tinte); font: 600 .95rem/1 var(--grotesk); }
.lesetext figure .platz { aspect-ratio: 16 / 5; }
.lesetext figcaption { margin-top: .6rem; font: 400 .9rem/1.5 var(--grotesk); color: var(--leise); }
.ueber-artikel { margin-top: 3.2rem !important; padding-top: 1.5rem; border-top: 1px solid var(--linie); font: 400 .95rem/1.6 var(--grotesk); color: var(--leise); }
.ueber-artikel b { display: block; margin-bottom: .4rem; color: var(--tx); }
.ueber-artikel p + p { margin-top: .8em; }
.rand { position: sticky; top: 1.5rem; order: 2; font: 400 .93rem/1.4 var(--grotesk); }
.rand summary { margin-bottom: .6rem; font-weight: 600; color: var(--leise); list-style: none; cursor: default; }
.rand summary::-webkit-details-marker { display: none; }
.rand ol { padding: 0; list-style: none; counter-reset: i; }
.rand li { border-top: 1px solid var(--linie); counter-increment: i; }
.rand a { display: grid; grid-template-columns: 1.7rem 1fr; padding: .62rem 0; text-decoration: none; color: var(--leise); }
.rand a::before { content: counter(i); font-weight: 600; color: var(--tx); }
.rand a:hover { color: var(--tx); }
.autor { display: grid; grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 4.5rem); align-items: center; }
.autor .platz { aspect-ratio: 4 / 5; border-radius: 18px; }
.autor p { margin-top: 1.4rem; max-width: 44rem; color: var(--leise); }
.autor .verweise { align-items: center; }

/* ---------- Ergänzungen: was Patrick nicht eigens gesagt hat, Claude aber aus seinem Umfeld ableitet ---------- */
:root { quotes: "„" "“" "‚" "‘"; }
.sprung { position: absolute; left: 1rem; top: -5rem; z-index: 20; padding: .6rem 1rem; border-radius: 8px; background: var(--lime); color: var(--tinte); font-weight: 600; }
.sprung:focus { top: 1rem; }

/* Band für den aktuellen Anlass: Leserinnen und Leser der Website Boosting finden sich sofort wieder */
.aktuell { display: block; background: var(--tinte); color: var(--hell); font-size: .95rem; text-decoration: none; }
.aktuell .w { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; padding-block: .6rem; }
.aktuell b { padding: .08rem .55rem .12rem; border-radius: .3em .7em .35em .75em / .7em .3em .7em .3em; background: var(--lime); color: var(--tinte); font-weight: 600; }
.aktuell .w > span::after { content: "\00a0→"; color: var(--lime); }
.aktuell:hover .w > span { text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: .22em; }

/* Eigene Messwerte groß */
.messkarte h3.kennzahl { font-size: 1.3rem; }
.kennzahl b { display: block; margin-bottom: .35rem; font-size: clamp(3.4rem, 6.2vw, 4.8rem); font-weight: 800; line-height: .95; letter-spacing: -.03em; font-variation-settings: "opsz" 34; }

/* Die Person dort, wo man ihr schreibt */
.formular .autorzeile { margin: 0 0 .3rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--linie); }

/* Bild als Tinte auf Papier: gemeinfreier Stich statt KI-Bild */
.artikelkopf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: center; }
.stich { padding: .8rem .8rem .75rem; border-radius: 12px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.stich .bild { position: relative; isolation: isolate; overflow: hidden; border-radius: 5px; background: var(--papier); }
.stich img { display: block; width: 100%; height: auto; max-height: 25rem; object-fit: cover; object-position: 50% 62%; filter: grayscale(1) contrast(1.45) brightness(1.14); mix-blend-mode: multiply; }
.stich .bild::after { content: ""; position: absolute; inset: 0; background: #1C2C5C; mix-blend-mode: screen; pointer-events: none; }
.stich figcaption { margin-top: .6rem; font-size: .82rem; line-height: 1.4; color: var(--leise); }

/* Lesestand als wachsender Marker-Strich, ohne JavaScript */
@supports (animation-timeline: scroll()) {
  .lesestand { position: fixed; inset: 0 0 auto; z-index: 15; height: .28rem; background: var(--lime); transform: scaleX(0); transform-origin: 0 50%; animation: lesestand linear both; animation-timeline: scroll(root); }
  @keyframes lesestand { to { transform: scaleX(1); } }
}

/* Satz: deutsche Silbentrennung, keine einzelnen Wörter in der letzten Zeile */
.lesetext, .karte > p, .vorspann, .einstieg-text .leise { hyphens: auto; hyphenate-limit-chars: 9 4 4; }
.lesetext p, .lesetext li { text-wrap: pretty; }

/* Inhaltsverzeichnis in der Randspalte immer offen, ohne JavaScript */
@media (min-width: 62.01rem) {
  @supports selector(::details-content) {
    .rand summary { pointer-events: none; }
    .rand::details-content { display: block; content-visibility: visible; }
  }
}

/* Papier wörtlich: Artikel lassen sich sauber drucken */
@media print {
  :root { --tx: #000; --leise: #333; --hell: #000; --hell-leise: #333; --linie: #999; --kontur: #999; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .w { width: auto; }
  .aktuell, .sprung, .lesestand, .buehne, .kopf nav, .kopf .knopf, .menue, .rand, .stich, .fuss nav, .knopf, .platz { display: none !important; }
  .buehne { background: none; }
  .buehne::before { display: none; }
  .blatt, .tafel, .papier { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #000; }
  .abschnitt { padding-block: 1.5rem 0; }
  .artikelkopf { display: block; padding: 0 0 1.5rem; }
  .artikelblatt { display: block; margin-top: 0; }
  .artikelblatt .lesetext { max-width: none; font-size: 11pt; }
  .lesetext a[href^="http"]::after { content: " (" attr(href) ")"; font: 400 .8em var(--grotesk); word-break: break-all; }
  .tabelle th { border-bottom: 2px solid #000; background: none; color: #000; }
  h2, h3 { break-after: avoid; }
  .karte, .tabelle tr, figure { break-inside: avoid; }
  .karte { border: 1px solid #999; background: none; }
  .fuss { margin-top: 2rem; background: none; }
}

/* ---------- Weitere Seitentypen: Leistung, Studie, Übersicht, Über mich, Tool ---------- */
:root { --gruen: #84CC16; --gelb: #F2C230; --rot: #E0543A; --himmel: #6DBBDD; }

/* Seitenkopf mit Porträt (Leistung, Über mich) */
.seitenkopf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 5vw, 5rem); padding-top: clamp(1.8rem, 4.5vw, 3.6rem); }
.seitenkopf > div { align-self: center; padding-bottom: clamp(3.2rem, 6vw, 5rem); }
.seitenkopf h1.gross { font-size: clamp(3rem, 7.4vw, 5.6rem); line-height: .98; letter-spacing: -.028em; }
.seitenkopf h1 { margin-top: 1.2rem; font-size: clamp(2.25rem, 5.2vw, 4rem); line-height: 1.05; letter-spacing: -.022em; }
.seitenkopf .vorspann { margin-top: 1.5rem; }
.seitenkopf .knopf { margin-top: 2rem; }
.seitenkopf .portraet { grid-area: auto; aspect-ratio: 4 / 5; }
/* Kopf ohne Bild: Leistungsseite „SEO in Lübeck“ (Patrick, 12.11.2026: kein Porträtfoto oben auf den Leistungsseiten) */
.seitenkopf.nur-text { grid-template-columns: minmax(0, 1fr); }
.seitenkopf.nur-text > div { max-width: 58rem; padding-bottom: clamp(2.4rem, 6vw, 5rem); }
.seitenkopf.nur-text .vorspann { max-width: 44rem; }
.belege { display: flex; flex-wrap: wrap; gap: .55rem 1.7rem; margin-top: 1.9rem; font-size: .95rem; color: var(--leise); }
.belege li { display: flex; align-items: center; gap: .55rem; }
.belege li::before { content: ""; flex: none; width: .34rem; height: 1em; background: var(--lime); border-radius: 2px; transform: skewX(-14deg); }
.belege a { text-decoration-color: var(--lime); text-decoration-thickness: .12em; text-underline-offset: .22em; }
.artikelblatt.ohne-zug { margin-top: 0; }
.artikelkopf h1.lang { max-width: 30ch; font-size: clamp(1.85rem, 3.5vw, 2.85rem); line-height: 1.12; }
h1 em { font-style: normal; color: var(--lime); }
h2.lang { font-size: clamp(1.6rem, 2.7vw, 2.25rem); line-height: 1.14; }
.tafel .spalten > .messkarte { position: sticky; top: 1.5rem; }

/* Kennzahlen im Kopf (Studie, Übersicht) */
.kennzahlen { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 1.25rem 2rem; margin: 0; }
.artikelkopf > .kennzahlen { grid-column: 1 / -1; margin-top: .6rem; }
.kennzahlen div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .55rem; padding-top: 1.1rem; border-top: 3px solid var(--lime); }
.kennzahlen dd { margin: 0; font: 800 clamp(2.2rem, 4.2vw, 3.5rem)/1 var(--antiqua); letter-spacing: -.03em; font-variation-settings: "opsz" 34; }
.kennzahlen small { margin-left: .5rem; font: 500 1rem/1 var(--grotesk); letter-spacing: 0; color: var(--leise); }
.kennzahlen dt { font-size: .95rem; line-height: 1.35; color: var(--leise); }

/* Textbausteine im Lesetext */
.lesetext h3 { margin-top: 1.9em !important; font-size: 1.36rem; }
.lesetext > h2:first-child { margin-top: 0 !important; }
.lesetext ul:not([class]) > li { position: relative; padding-left: 1.6rem; }
.lesetext ul:not([class]) > li + li { margin-top: .6em; }
.lesetext ul:not([class]) > li::before { content: ""; position: absolute; left: .15rem; top: .42em; width: .36rem; height: .95em; background: var(--lime); border-radius: 2px; transform: skewX(-14deg); }
.einleitung { font-size: 1.32rem; line-height: 1.55; }
.steckbrief, .lesetext .werte, .lesetext .randangaben { margin-inline: 0; padding: 1.2rem 1.4rem; border-radius: 10px; background: var(--papier-2); font: 400 .95rem/1.5 var(--grotesk); }
.angaben, dl.werte, dl.randangaben { display: grid; grid-template-columns: minmax(7rem, 12.5rem) minmax(0, 1fr); gap: .5rem 1.4rem; }
.angaben { margin: 0; }
.angaben dt, .werte dt, .randangaben dt { font-weight: 600; }
.angaben dd, .werte dd, .randangaben dd { margin: 0; }
ul.werte { display: flex; flex-wrap: wrap; gap: .4rem 1.8rem; }
ul.werte li { display: flex; align-items: center; gap: .5rem; }
ul.werte li::before { content: ""; flex: none; width: .34rem; height: 1em; background: var(--lime); border-radius: 2px; transform: skewX(-14deg); }
.notiz, .daten { font: 400 .92rem/1.5 var(--grotesk); color: var(--leise); }
.abb-nr { margin-bottom: -.7em; font: 600 .84rem/1.3 var(--grotesk); color: var(--leise); }
.tabellentitel { font: 600 1rem/1.4 var(--grotesk); }
.meta { font: 500 .9rem/1.4 var(--grotesk); color: var(--leise); }
.verweis { font: 400 1rem/1.5 var(--grotesk); }
.fliess > * + * { margin-top: 1em; }
.tafel .fliess, .abschnitt .fliess { color: var(--leise); }
.fliess strong { color: var(--tx); font-weight: 600; }

/* Diagramme: Technik liegt auch im Lesetext auf Tinte */
.balken { display: grid; gap: .85rem; padding: 1.4rem 1.5rem 1.5rem; border-radius: 12px; background: var(--tief); color: var(--hell); font: 400 .95rem/1.35 var(--grotesk); }
.balken div { padding-bottom: 1.05rem; background: linear-gradient(var(--lime) 0 0) 0 100% / var(--w) .62rem no-repeat, linear-gradient(rgba(255, 255, 255, .13) 0 0) 0 100% / 100% .62rem no-repeat; }
.balken span { display: flex; justify-content: space-between; gap: 1rem; }
.balken b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.balken .gruppe { margin-top: .3rem; font-weight: 600; color: var(--hell-leise); }
.messkarte .balken { padding: 0; background: none; }
.quadrate { display: grid; grid-template-columns: repeat(var(--sp, 40), 1fr); gap: 2px; padding: 1.2rem; border-radius: 12px; background: var(--tief); }
.quadrate i { aspect-ratio: 1; border-radius: 1.5px; background: var(--lime); }
.quadrate i.t { background: var(--himmel); }
.quadrate i.n { background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); }
.schluessel { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin-top: .7em !important; font: 400 .9rem/1.4 var(--grotesk); color: var(--leise); }
.schluessel li { display: flex; align-items: center; gap: .45rem; }
.schluessel i { width: .8rem; height: .8rem; border-radius: 2px; background: var(--lime); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .3); }
.schluessel i.t { background: var(--himmel); }
.schluessel i.n { background: none; }
/* Intervalldiagramm der Studienseite: Schätzwert als Punkt, 95-Prozent-Intervall als Linie, Relevanzbereich als Band */
.intervalle { display: grid; gap: 1.15rem; padding: 1.4rem 1.5rem 1.1rem; border-radius: 12px; background: var(--tief); color: var(--hell); font: 400 .95rem/1.35 var(--grotesk); }
.intervalle .schluessel { margin: 0 0 .2rem !important; color: var(--hell-leise); }
.intervalle .schluessel i { flex: none; border-radius: 50%; box-shadow: none; }
.intervalle .schluessel i.s { width: 1.4rem; height: 2px; border-radius: 0; background: var(--hell); }
.intervalle .schluessel i.z { width: 1.4rem; border-radius: 2px; background: rgba(132, 204, 22, .24); }
.intervalle .reihe { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1.2rem; align-items: end; }
.intervalle .wert { white-space: nowrap; color: var(--hell-leise); font-variant-numeric: tabular-nums; }
.intervalle .wert b { margin-right: .45rem; font-weight: 600; color: var(--hell); }
.intervalle .spur { grid-column: 1 / -1; position: relative; height: 1.5rem; border-radius: 3px; background: linear-gradient(to right, transparent var(--zl), rgba(132, 204, 22, .2) var(--zl) var(--zr), transparent var(--zr)), rgba(255, 255, 255, .07); }
.intervalle .spur::before { content: ""; position: absolute; inset: 0 auto 0 var(--z0); width: 1px; background: rgba(255, 255, 255, .5); }
.intervalle .spur i { position: absolute; top: 50%; left: var(--lo); width: calc(var(--hi) - var(--lo)); height: 2px; margin-top: -1px; background: var(--hell); }
.intervalle .spur b { position: absolute; top: 50%; left: var(--e); width: .85rem; height: .85rem; margin: -.425rem 0 0 -.425rem; border-radius: 50%; background: var(--himmel); box-shadow: 0 0 0 2px var(--tief); }
.intervalle .reihe.haupt .spur b { background: var(--lime); }
@media (max-width: 40rem) {
  .intervalle { padding-inline: 1.1rem; }
  .intervalle .reihe { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .intervalle .spur { margin-top: .25rem; }
}
.intervalle .achse { position: relative; height: 1.1rem; font-size: .82rem; color: var(--hell-leise); font-variant-numeric: tabular-nums; }
.intervalle .achse span { position: absolute; left: var(--x); transform: translateX(-50%); }
.intervalle .achse span:first-child { transform: none; }
.intervalle .achse span:last-child { transform: translateX(-100%); }
.saeulen { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: .8rem; height: 13rem; padding: 1.3rem 1.4rem 1.1rem; border-radius: 12px; background: var(--tief); color: var(--hell); font: 500 .88rem/1 var(--grotesk); }
.saeulen li { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .45rem; }
.saeulen i { width: 100%; max-width: 3.4rem; height: var(--h); border-radius: 4px 4px 0 0; background: var(--lime); }
.saeulen b { font-weight: 600; }
.saeulen span { color: var(--hell-leise); }

/* Tool-Seite */
.werkzeug { display: grid; gap: .85rem; padding: 1.7rem; border: 1px solid var(--kontur); border-radius: 18px; background: var(--flaeche); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.werkzeug label { font: 700 1.36rem/1.2 var(--antiqua); }
.werkzeug input { width: 100%; padding: .85rem .95rem; border: 2px solid transparent; border-radius: 8px; background: var(--blatt-weiss); color: var(--tinte); font: 400 1.05rem/1.3 var(--grotesk); }
.werkzeug input:focus { outline: 3px solid var(--lime); outline-offset: 2px; }
.werkzeug .knopf { justify-self: start; }
.werkzeug .hilfe { font-size: .9rem; color: var(--leise); }
.beleg { display: grid; gap: .7rem; padding: 1.3rem 1.4rem; border-radius: 12px; background: var(--tief); color: var(--hell); font: 400 .98rem/1.5 var(--grotesk); }
.beleg .frage { justify-self: end; max-width: 82%; padding: .6rem .95rem; border-radius: 12px 12px 3px 12px; background: var(--flaeche-2); }
.beleg .fehlt { display: inline-block; margin-top: .35rem; padding: .05rem .55rem; border: 1.5px dashed rgba(255, 255, 255, .5); border-radius: 6px; color: var(--hell-leise); }
.lesetext .beleg figcaption { margin-top: .2rem; color: var(--hell-leise); }
.stufen { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem 1.3rem; margin-inline: 0; font: 400 1rem/1.55 var(--grotesk); }
.stufen dt { display: flex; align-items: center; gap: .55rem; height: 1.55em; font-weight: 600; }
.stufen dt::before, .ampel .stufe::before { content: ""; flex: none; width: .95rem; height: .95rem; border-radius: 50%; background: var(--stufe); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .3); }
.stufen dd { margin: 0; }
.ampel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ampel > div { padding: 1.2rem 1.3rem 1.3rem; border-radius: 12px; background: var(--tief); color: var(--hell); font: 400 .93rem/1.45 var(--grotesk); }
.ampel h4 { margin: 0; font: 700 1.2rem/1.2 var(--antiqua); }
.ampel .stufe { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; font-weight: 600; }
.ampel .zahl { margin-top: .8rem; font: 800 2.1rem/1 var(--antiqua); letter-spacing: -.02em; }
.ampel .punkte { display: flex; gap: .3rem; margin: .65rem 0 .75rem; }
.ampel .punkte i { width: .95rem; height: .95rem; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.ampel .punkte i.j { background: var(--gruen); }
.ampel p:last-child { color: var(--hell-leise); }

/* Leistungsseite */
.anfragekarte { gap: 1.1rem; margin-top: 1.2rem; }
.anfragekarte .autorzeile { margin: 0; }
.anfragekarte .zusagen { margin: 0; font-size: .97rem; }
.papier .zusagen li::before { border-color: var(--tinte); }
.nachsatz { max-width: 46rem; margin-top: 2.2rem; }
.fall { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.6rem clamp(2rem, 5vw, 4.5rem); align-items: start; padding-block: 2.4rem; border-top: 1px solid var(--linie); }
.fall:first-of-type { margin-top: 2.2rem; }
.fall:last-child { padding-bottom: 0; }
.fall .lesetext > * + * { margin-top: 1.1em; }
.fall h3 { margin-top: 0 !important; font-size: 1.5rem; }
.fallbild > * + * { margin-top: .8rem; }
.fallbild .platz { aspect-ratio: 4 / 3; }
.fallbild figcaption { margin-top: .6rem; font-size: .9rem; line-height: 1.5; color: var(--leise); }

/* Übersichtsseite */
.karte h3 a { text-decoration: none; }
.karte h3 a:hover { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: .14em; text-underline-offset: .18em; }
.karte > .daten { margin-top: auto; padding-top: .4rem; font-size: .9rem; }
.karte > .daten + .weiter { margin-top: 0; }
.messkarte > .weiter { margin-top: .4rem; }
.blatt .abschnittskopf + .meta, .karten + .meta { margin-top: 1.4rem; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 62rem) {
  .kopf nav, .kopf .knopf { display: none; }
  .menue { display: block; }
  .einstieg { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "bild" "text"; }
  .portraet { margin: 1.8rem 0 0; aspect-ratio: 5 / 4; }
  .einstieg-text { padding-top: 1.8rem; }
  .abschnittskopf, .spalten, .artikelspalten, .kontakt { grid-template-columns: minmax(0, 1fr); }
  .abschnittskopf { margin-bottom: 2rem; }
  .karten, .karten.zwei, .funde { grid-template-columns: minmax(0, 1fr); }
  .stimme { grid-template-columns: minmax(0, 1fr); padding: 1.5rem 1.4rem; }
  .artikelblatt, .artikelkopf { grid-template-columns: minmax(0, 1fr); }
  .stich { display: none; }
  .seitenkopf { grid-template-columns: minmax(0, 1fr); }
  .seitenkopf > div { padding-bottom: 0; }
  .seitenkopf .portraet { margin-bottom: 2.2rem; }
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fall, .ampel { grid-template-columns: minmax(0, 1fr); }
  .werkzeug { margin-top: .5rem; }
  .rand { position: static; order: 0; padding: 1rem 1.1rem; border-radius: 10px; background: var(--papier-2); }
  .rand summary { margin: 0; cursor: pointer; color: var(--tx); }
  .rand summary::after { content: " anzeigen"; font-weight: 400; color: var(--leise); }
  .rand[open] summary { margin-bottom: .6rem; }
  .rand[open] summary::after { content: " ausblenden"; }
  .autor { grid-template-columns: minmax(0, 1fr); }
  .autor .platz { max-width: 11rem; }
}
@media (max-width: 40rem) {
  .w { width: min(100% - 2rem, var(--breite)); }
  body { font-size: 1.03rem; }
  .blatt, .tafel { border-radius: 18px; }
  .lesetext { font-size: 1.12rem; line-height: 1.68; }
  .lesetext blockquote { padding-left: 2.4rem; font-size: 1.16rem; }
  .lesetext blockquote::before { font-size: 3.8rem; }
  .tabelle { margin-inline: -.4rem; }
  h1, h2, h3 { hyphens: auto; hyphenate-limit-chars: 12 5 5; }
  .aktuell { font-size: .84rem; }
  .einleitung { font-size: 1.18rem; }
  .angaben, dl.werte, dl.randangaben { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .angaben dd, dl.werte dd, dl.randangaben dd { margin-bottom: .6rem; }
  .quadrate:not([style]) { --sp: 24; }
  .saeulen { gap: .4rem; padding-inline: .9rem; }
  .aktuell .w { gap: .3rem .6rem; }
}

/* ---------- Weitere Bausteine: Leistungsseiten mit eigenem Aufbau und Werkzeuge (12.11.2026) ---------- */
/* Rubrik über einer Überschrift: ihr Strich ersetzt den Marker-Strich der Überschrift */
.rubrik + h2 { margin-top: .75rem; }
.rubrik + h2::before { content: none; }
.lesetext > .rubrik { margin-top: 2.6em; font-size: .92rem; }
.lesetext > .rubrik:first-child { margin-top: 0; }
.lesetext .rubrik + h2 { margin-top: .55rem !important; }
.lesetext li > h3 { margin-top: 0 !important; font-size: 1.22rem; }
.lesetext li > h3 + p { margin-top: .3em; }
.vorab { max-width: 46rem; margin-bottom: 2.4rem; }
.vorab .vorspann { margin-top: .9rem; }
.seitenkopf .verweise { align-items: center; margin-top: 2rem; }
.seitenkopf .verweise .knopf { margin-top: 0; }
.seitenkopf .notiz { margin-top: .9rem; }
.blatt .spalten + .verweise, .lesetext + .verweise { margin-top: 2rem; }
.abschnittskopf + .leise { margin-top: -1rem; }
.fliess a:not(.knopf):not(.weiter), .pfadtext a, .zuordnung a, .karte > p a:not(.knopf):not(.weiter), .striche a { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: .13em; text-underline-offset: .2em; }
.fliess h3 { color: var(--tx); }

/* Liste mit Marker-Strichen außerhalb des Lesetexts */
.striche li { position: relative; padding-left: 1.5rem; }
.striche li + li { margin-top: .6em; }
.striche li::before { content: ""; position: absolute; left: .1rem; top: .36em; width: .34rem; height: .95em; background: var(--lime); border-radius: 2px; transform: skewX(-14deg); }
.striche b { color: var(--tx); font-weight: 600; }
.karte > .striche, .karte > .zusagen { margin-top: 0; font-size: 1rem; color: var(--leise); }
/* Gegenstück zu den Zusagen: was nicht dazugehört */
.zusagen.nein li::before { left: .1rem; top: .42em; width: .85rem; height: .85rem; border: 0; transform: none; background: linear-gradient(45deg, transparent 42%, currentColor 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, currentColor 42% 58%, transparent 58%); }
.karte h2 { font-size: 1.5rem; line-height: 1.2; }
.karte h2::before { content: none; }
.karte.einzeln { margin-top: 1.25rem; }
.karte.einzeln > p { max-width: 58rem; }
.grosswert { font: 800 clamp(2.2rem, 4vw, 3rem)/1 var(--antiqua) !important; letter-spacing: -.03em; color: var(--tx) !important; font-variation-settings: "opsz" 34; }

/* Nummerierte Schritte */
.schritte { display: grid; gap: 1.2rem; padding: 0; list-style: none; counter-reset: s; }
.schritte > li { position: relative; padding-left: 2.9rem; counter-increment: s; }
.schritte > li::before { content: counter(s); position: absolute; left: 0; top: .08em; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 5px 9px 6px 10px; background: var(--lime); color: var(--tinte); font: 600 .95rem/1 var(--grotesk); }
.schritte h3, .schritte > li > b { display: block; font: 700 1.22rem/1.25 var(--antiqua); letter-spacing: -.008em; color: var(--tx); }
.schritte p { margin-top: .3rem; color: var(--leise); }
.vorspann + .schritte { margin-top: 2rem; }

/* Kennen, Verstehen, Vertrauen: das Diagnosemodell als eigener Bereich der Startseite, drei Schritte mit Marker-Linie.
   Nie direkt über drei Karten setzen: das liest sich, als gehöre je ein Schritt zu einer Karte. */
#konzept { padding-top: clamp(.5rem, 2vw, 2rem); }
.dreischritt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem 2.5rem; padding: 0; list-style: none; }
.dreischritt li { display: grid; align-content: start; gap: .7rem; padding-top: 1.15rem; border-top: 3px solid var(--lime); }
.dreischritt .nr { font: 600 .9rem/1 var(--mono); color: var(--lime); }
.dreischritt h3 { font: 800 clamp(1.8rem, 3vw, 2.5rem)/1.05 var(--antiqua); letter-spacing: -.025em; font-variation-settings: "opsz" 34; }
.dreischritt p { font-size: 1.04rem; line-height: 1.5; color: var(--leise); }
.dreischritt p b { display: block; margin-bottom: .35rem; font: 500 1.16rem/1.35 var(--antiqua); color: var(--tx); }
@media (max-width: 62rem) {
  .dreischritt { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
}

/* Drei Begriffe in Folge */
.folge { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.5rem; margin-top: 1.9rem; padding: 0; list-style: none; }
.folge li { display: grid; align-content: start; gap: .3rem; padding-top: .9rem; border-top: 3px solid var(--lime); }
.folge b { font: 700 1.2rem/1.2 var(--antiqua); }
.folge span { font-size: .95rem; line-height: 1.4; color: var(--leise); }

/* Nachweise als Zeile unter dem Kopf */
.nachweise.quer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2rem; padding: 0 0 clamp(2.6rem, 5vw, 4rem); }
.nachweise.quer li:last-child { border-bottom: 0; }
.nachweise.quer b { font-size: 1.1rem; }

/* Prüfkarte im Kopf: drei Fragen als Skizze */
.pruefkarte { align-self: center; gap: .6rem; margin-bottom: clamp(3.2rem, 6vw, 5rem); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.prueffragen { padding: 0; list-style: none; }
.prueffragen li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .3rem 1rem; align-items: center; padding-block: .95rem; border-top: 1px solid var(--linie); }
.prueffragen li:last-child { border-bottom: 1px solid var(--linie); }
.prueffragen .nr { font: 600 .9rem/1 var(--mono); color: var(--lime); }
.prueffragen b { display: block; font: 700 1.2rem/1.25 var(--antiqua); }
.prueffragen small { display: block; margin-top: .2rem; font-size: .93rem; line-height: 1.4; color: var(--leise); }
.prueffragen .art { padding: .2rem .6rem; border: 1px solid rgba(255, 255, 255, .28); border-radius: 6px; font-size: .84rem; font-weight: 500; white-space: nowrap; }

/* Aufklappbare Pfade */
.pfade { display: grid; gap: .9rem; margin-top: 2.4rem; }
.pfad { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--blatt-weiss); }
.pfad summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1.5rem; padding: 1.3rem 1.5rem; cursor: pointer; list-style: none; }
.pfad summary::-webkit-details-marker { display: none; }
.pfad summary > span { grid-column: 1; }
.pfad summary::after { content: "+"; grid-column: 2; grid-row: 1 / span 3; align-self: center; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--tinte); color: #fff; font: 500 1.4rem/1 var(--grotesk); }
.pfad[open] summary::after { content: "−"; }
.pfad .titel { font: 700 1.36rem/1.22 var(--antiqua); letter-spacing: -.01em; }
.pfad .text { color: var(--leise); }
.pfadtext { display: grid; gap: 1rem; max-width: 52rem; padding: .2rem 1.5rem 1.6rem; }
.pfadtext .ergebnis { padding: 1rem 1.2rem; border-left: .42rem solid var(--lime); border-radius: 4px 10px 10px 4px; background: var(--papier-2); }
.pfadtext .ergebnis b { display: block; }

/* Zuordnung: Beobachtung und zuständiges Fach */
.zuordnung { padding: 0; list-style: none; }
.zuordnung li { display: grid; grid-template-columns: minmax(0, 5fr) 2rem minmax(0, 6fr); gap: .4rem 1.5rem; align-items: center; padding-block: 1.15rem; border-top: 1px solid var(--linie); }
.zuordnung li:last-child { border-bottom: 1px solid var(--linie); }
.zuordnung .frage { font: 500 1.16rem/1.35 var(--antiqua); }
.zuordnung .pfeil { color: var(--lime); font-size: 1.3rem; }
.zuordnung b { display: block; font-weight: 600; }
.zuordnung small { display: block; margin-top: .15rem; font-size: .95rem; line-height: 1.45; color: var(--leise); }

/* Kennwert und stummes Säulendiagramm in einer Messkarte */
.kennwert { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.kennwert b { font: 800 2.4rem/1 var(--antiqua); letter-spacing: -.03em; color: var(--tx); }
.tabellentitel small { margin-left: .7rem; font-size: .88rem; font-weight: 400; color: var(--leise); }
.saeulen.stumm { height: 7rem; gap: .5rem; padding: 0; background: none; }
.saeulen.stumm i { max-width: none; }

/* Fragen der Zielgruppe als Karten */
.fragen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.6rem; }
.fragen .karte { display: block; font: 500 1.14rem/1.42 var(--antiqua); }
.fragen .karte::before { content: "„"; }

/* Bild mit Unterschrift, Zeichnung im Kopf */
.bildnis { max-width: 22rem; margin-inline: auto; }
.bildnis img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 18px; object-fit: cover; object-position: 50% 10%; }
.bildnis figcaption, .skizzenbild figcaption { margin-top: .7rem; font-size: .9rem; line-height: 1.4; color: var(--leise); text-align: center; }
.skizzenbild { align-self: center; margin-bottom: clamp(3.2rem, 6vw, 5rem); }
.skizzenbild svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .45)); }
.skizzenbild text { font-family: var(--grotesk); }

/* Etikett: markierte Kernaussage an einer Abbildung */
.etikett { justify-self: start; display: inline-block; padding: .12rem .6rem .16rem; border-radius: .3em .7em .35em .75em / .7em .3em .7em .3em; background: var(--lime); color: var(--tinte) !important; font: 600 .85rem/1.4 var(--grotesk) !important; }
.handybild { position: relative; max-width: 19rem; margin-inline: auto !important; }
.handybild .etikett { position: absolute; top: .9rem; right: -.7rem; margin: 0; }

@media (max-width: 62rem) {
  .nachweise.quer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pruefkarte, .skizzenbild { margin-block: 2rem 2.4rem; }
  .fragen { grid-template-columns: minmax(0, 1fr); }
  .zuordnung li { grid-template-columns: minmax(0, 1fr); }
  .zuordnung .pfeil { display: none; }
}
@media (max-width: 40rem) {
  .nachweise.quer, .folge { grid-template-columns: minmax(0, 1fr); }
  .prueffragen li { grid-template-columns: auto minmax(0, 1fr); }
  .prueffragen .art { grid-column: 2; justify-self: start; }
  .pfad summary { padding: 1.1rem; }
  .pfadtext { padding: .2rem 1.1rem 1.3rem; }
  .handybild .etikett { right: -.3rem; }
}


/* ====================================================================================================
   WordPress-Schicht: was nur in der Umsetzung gebraucht wird (Menü aus wp_nav_menu, Blöcke, Fuß).
   Wird von skripte/einspielen.mjs an design.css angehängt. Quelle: Projekte/Redesign-2026/umsetzung/wp.css
   ==================================================================================================== */

/* Hauptmenü mit Untermenüs */
.kopf { position: relative; z-index: 20; }
.hauptmenue ul { display: flex; gap: 1.7rem; margin: 0; padding: 0; list-style: none; }
.hauptmenue li { position: relative; }
.hauptmenue .menu-item-has-children > a::after { content: ""; display: inline-block; width: .4em; height: .4em; margin-left: .5em; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-.22em) rotate(45deg); }
.hauptmenue .sub-menu { position: absolute; left: -.9rem; top: 100%; z-index: 30; display: none; min-width: 17rem; padding: .5rem; border: 1px solid var(--kontur); border-radius: 12px; background: #18264A; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .7); }
.hauptmenue li:hover > .sub-menu, .hauptmenue li:focus-within > .sub-menu { display: block; }
.hauptmenue .sub-menu a { display: block; padding: .55rem .8rem; border: 0; border-radius: 8px; white-space: nowrap; }
.hauptmenue .sub-menu a:hover, .hauptmenue .sub-menu .current-menu-item > a { background: rgba(255, 255, 255, .07); color: #fff; }
.hauptmenue > ul > .current-menu-item > a, .hauptmenue > ul > .current-menu-ancestor > a, .hauptmenue > ul > .current_page_parent > a { color: #fff; border-bottom-color: var(--lime); }

/* Handy-Menü ohne JavaScript */
.handymenue { display: none; margin-left: auto; }
.handymenue summary { padding: .55rem .95rem; border: 1px solid rgba(255, 255, 255, .4); border-radius: 8px; font: 600 .95rem/1.2 var(--grotesk); list-style: none; cursor: pointer; }
.handymenue summary::-webkit-details-marker { display: none; }
.handymenue[open] summary { border-color: transparent; background: var(--lime); color: var(--tinte); }
.kopf .handymenue nav { position: absolute; left: -1.25rem; right: -1.25rem; top: 100%; z-index: 40; display: block; margin: 0; padding: .4rem 1.25rem 1.6rem; border-block: 1px solid var(--kontur); background: #18264A; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .7); font-size: 1.05rem; }
.handymenue ul { margin: 0; padding: 0; list-style: none; }
.handymenue nav > ul > li { border-bottom: 1px solid var(--kontur); }
.kopf .handymenue nav a { display: block; padding: .75rem 0; border: 0; color: var(--hell); font-weight: 600; text-decoration: none; }
.kopf .handymenue .sub-menu a { padding: .42rem 0 .42rem 1.1rem; font-weight: 400; color: var(--hell-leise); }
.handymenue .sub-menu { padding-bottom: .6rem; }
.kopf .handymenue nav a.knopf { display: inline-flex; margin-top: 1.3rem; padding: .85rem 1.3rem; color: var(--tinte); }
@media (max-width: 62rem) {
  .handymenue { display: block; }
}

/* Fuß */
.fuss nav ul { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin: 0; padding: 0; list-style: none; }
.fuss > div { align-items: flex-start; }
.fuss > .fuss-recht { padding-block: 1.2rem 1.6rem; border-top: 1px solid var(--kontur); font-size: .9rem; color: var(--hell-leise); }
.fuss-recht span:last-child { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.fuss-recht a { text-decoration: none; }
.fuss-recht a:hover { color: #fff; }

/* Übersicht: Themen in der Randspalte */
.themen li { display: flex; justify-content: space-between; gap: 1rem; padding: .62rem 0; border-top: 1px solid var(--linie); font: 400 .98rem/1.4 var(--grotesk); }
.themen li:last-child { border-bottom: 1px solid var(--linie); }
.themen a { text-decoration: none; font-weight: 600; }
.themen a:hover { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: .14em; text-underline-offset: .2em; }
.themen span { color: var(--leise); }

/* Blöcke aus dem Editor im Lesetext */
.lesetext ul.wp-block-list > li { position: relative; padding-left: 1.6rem; }
.lesetext ul.wp-block-list > li + li { margin-top: .6em; }
.lesetext ul.wp-block-list > li::before { content: ""; position: absolute; left: .15rem; top: .42em; width: .36rem; height: .95em; background: var(--lime); border-radius: 2px; transform: skewX(-14deg); }
.lesetext li > ul, .lesetext li > ol { margin-top: .6em; }
.lesetext .wp-block-table { margin-inline: 0; overflow-x: auto; }
.lesetext .wp-block-table table { width: 100%; min-width: 34rem; border-collapse: collapse; font: 400 .94rem/1.45 var(--grotesk); }
/* WordPress gibt je Block eigene Grundstile aus (Rahmen um jede Zelle); hier zurückgesetzt */
.lesetext .wp-block-table th, .lesetext .wp-block-table td { border: 0; }
.lesetext .wp-block-table th { padding: .7rem .85rem; background: var(--tinte); color: #fff; font-weight: 600; text-align: left; vertical-align: bottom; }
.lesetext .wp-block-table th:first-child { border-radius: 8px 0 0 0; }
.lesetext .wp-block-table th:last-child { border-radius: 0 8px 0 0; }
.lesetext .wp-block-table td { padding: .8rem .85rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.lesetext .wp-block-table td:first-child { font-weight: 600; }
.lesetext .wp-block-image { margin-inline: 0; }
.lesetext img { max-width: 100%; height: auto; border-radius: 8px; }
.lesetext .wp-element-caption { margin-top: .6rem; font: 400 .9rem/1.5 var(--grotesk); color: var(--leise); }
.lesetext hr { height: 0; margin-block: 2.2em; border: 0; border-top: 1px solid var(--linie); }
.lesetext pre { overflow-x: auto; padding: 1rem 1.2rem; border-radius: 10px; background: var(--tief); color: var(--hell); font: 500 .88rem/1.6 var(--mono); }
.lesetext pre code { padding: 0; background: none; color: inherit; font: inherit; }
.lesetext h4 { font: 700 1.12rem/1.3 var(--antiqua); margin-top: 1.7em !important; }
.lesetext iframe { max-width: 100%; }
.lesetext blockquote cite { display: block; margin-top: .7em; font: 400 .95rem/1.5 var(--grotesk); font-style: normal; color: var(--leise); }
.lesetext .wp-block-group, .lesetext .wissensbox, .lesetext .info-box-transparent { padding: 1.15rem 1.4rem 1.2rem 1.5rem; border-left: .42rem solid var(--lime); border-radius: 4px 10px 10px 4px; background: var(--papier-2); font: 400 1rem/1.6 var(--grotesk); }
.lesetext .wp-block-group > * + *, .lesetext .wissensbox > * + * { margin-top: .8em; }
.lesetext .wp-block-group h3, .lesetext .wissensbox h3 { margin-top: 0 !important; font-size: 1.2rem; }

/* Fachartikel: Porträt aus der Mediathek, Vermerk aus dem alten Snippet im neuen Kleid */
.autorzeile img { flex: none; width: 3.6rem; height: 3.6rem; border-radius: 50%; object-fit: cover; object-position: 50% 15%; }
.autor > img { width: 100%; max-width: 15rem; height: auto; aspect-ratio: 4 / 5; border-radius: 18px; object-fit: cover; object-position: 50% 10%; }
.artikelkopf .rubrik a:hover { text-decoration: underline; text-underline-offset: .2em; }
/* Dieselbe Klasse trägt im Bestand zweierlei: den Hinweis-Absatz am Anfang (p) und den Vermerk am Ende (div). */
.lesetext p.ps-disclaimer { padding: 1.15rem 1.4rem 1.2rem 1.5rem; border-left: .42rem solid var(--lime); border-radius: 4px 10px 10px 4px; background: var(--papier-2); font: 400 1rem/1.6 var(--grotesk); }
.lesetext div.ps-disclaimer { margin-top: 3.2rem !important; padding-top: 1.5rem; border-top: 1px solid var(--linie); font: 400 .95rem/1.6 var(--grotesk); color: var(--leise); }
.lesetext .ps-disclaimer-title { margin-bottom: .4rem; font-weight: 600; color: var(--tx); }
.lesetext .ps-disclaimer p + p { margin-top: .8em; }
@media (max-width: 62rem) {
  .autor > img { max-width: 11rem; }
}

/* Echte Bilder statt Platzhalter */
.portraet:not(.platz) { padding: 0; }
.portraet img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vortragsbild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: var(--radius); object-fit: cover; }
/* Leistungsseite: Abbildungen neben den Fällen (Bildschirmaufnahmen aus der Mediathek) */
.fallbild figure { margin: 0; }
.fallbild img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px var(--linie); }

/* Kadence-Formular im Papierkasten: Felder und Knopf im Kleid des Entwurfs. Die Funktion (Versand, Spamschutz) bleibt die von Kadence. */
.formular .kb-advanced-form { display: grid; gap: 1.1rem; margin: 0; }
.formular .kb-advanced-form .kb-adv-form-field { margin: 0; padding: 0; }
.formular .kb-advanced-form .kt-row-column-wrap { gap: 1.1rem; padding: 0; }
.formular .kb-advanced-form .kb-adv-form-label { display: block; margin: 0 0 .35rem; font: 600 .93rem/1.3 var(--grotesk); color: var(--tinte); }
.formular .kb-advanced-form .kb-adv-form-required { margin-left: .25em; color: var(--papier-leise); }
.formular .kb-advanced-form .kb-field { width: 100%; padding: .75rem .85rem; border: 1.5px solid rgba(15, 23, 42, .38); border-radius: 8px; background: var(--blatt-weiss); box-shadow: none; color: var(--tinte); font: 400 1rem/1.4 var(--grotesk); }
.formular .kb-advanced-form textarea.kb-field { min-height: 7.5rem; resize: vertical; }
.formular .kb-advanced-form .kb-field:focus { outline: 3px solid var(--lime); outline-offset: 1px; border-color: var(--tinte); }
.formular .kb-advanced-form .kb-adv-form-submit-button { display: inline-flex; align-items: center; gap: .65rem; padding: .88rem 1.4rem !important; border: 0 !important; border-radius: 10px !important; background: var(--tinte) !important; box-shadow: none !important; color: #fff !important; font: 600 1.02rem/1.2 var(--grotesk) !important; cursor: pointer; }
.formular .kb-advanced-form .kb-adv-form-submit-button::after { content: "→"; color: var(--lime); }
.formular .kb-advanced-form .kb-adv-form-submit-button:hover { background: #1D2B4F !important; }
.formular .kb-adv-form-message, .formular .kb-adv-form-success, .formular .kb-adv-form-warning { font: 500 .98rem/1.5 var(--grotesk); }
/* Rückmeldung nach dem Absenden: Bestätigung mit Marker-Kante statt des hellblauen Kastens von Kadence, Fehler in Rot */
.formular .kb-adv-form-message { margin: 0; padding: .9rem 1.1rem; border: 0 !important; border-left: .35rem solid var(--rot) !important; border-radius: 4px 8px 8px 4px; background: rgba(224, 84, 58, .12) !important; color: var(--tinte) !important; }
.formular .kb-adv-form-message.kb-adv-form-success { border-left-color: var(--lime) !important; background: rgba(132, 204, 22, .2) !important; }

/* ---------- Werkzeuge: KI-Sichtbarkeits-Check (kc-) und Sichtbarkeits-Check (sc-) ----------
   Die Skripte der beiden Tools laufen unverändert. Sie finden ihre Elemente über die Kennung (id) und setzen diese Klassen:
   kc-/sc-hidden, kc-/sc-kandidat, kc-frage, kc-dot d-*, kc-ampel a-*, kc-/sc-verdikt v-*, sc-kpi, sc-pt r-*, sc-zentrum.
   Nur diese Namen sind fest; alles andere sind Bausteine des Entwurfs. */
.kc-hidden, .sc-hidden { display: none !important; }
.knopf:disabled { opacity: .6; cursor: progress; }
.werkzeug .schritt { display: grid; gap: .85rem; }
.werkzeug-hinweis, .werkzeug-fehler { padding: .8rem 1rem; border-left: .35rem solid var(--gelb); border-radius: 4px 8px 8px 4px; background: rgba(242, 194, 48, .12); font-size: .95rem; line-height: 1.45; }
.werkzeug-fehler { border-left-color: var(--rot); background: rgba(224, 84, 58, .16); }
.kandidaten { display: grid; gap: .5rem; }
.kandidaten:empty { display: none; }
.kc-kandidat, .sc-kandidat { display: grid; gap: .15rem; width: 100%; padding: .7rem .9rem; border: 1px solid var(--kontur); border-radius: 8px; background: var(--tief); color: var(--hell); font: 400 .95rem/1.35 var(--grotesk); text-align: left; cursor: pointer; }
.kc-kandidat:hover, .sc-kandidat:hover { border-color: var(--lime); }
.kc-kandidat span, .sc-kandidat span { font-size: .88rem; color: var(--hell-leise); }
.gewaehlt { font-size: .95rem; line-height: 1.45; color: var(--hell-leise); }
.gewaehlt strong { color: var(--hell); }
.gewaehlt a { text-decoration-color: var(--lime); text-underline-offset: .2em; }
.fortschritt p { font-size: .93rem; color: var(--hell-leise); }
.fortschritt .leiste { height: .5rem; margin-top: .5rem; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .13); }
.fortschritt .leiste div { width: 0; height: 100%; background: var(--lime); transition: width .4s; }

/* Ergebnis eines Messlaufs: unter dem Kopf über die volle Breite */
.artikelkopf > .messlauf { grid-column: 1 / -1; display: grid; gap: 1.25rem; min-width: 0; }
.fragenliste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.kc-frage { padding: 1rem 1.2rem; border: 1px solid var(--kontur); border-radius: 12px; background: var(--flaeche); font: 500 1.08rem/1.4 var(--antiqua); }
.kc-frage b { display: block; margin-bottom: .3rem; font: 600 .86rem/1.3 var(--grotesk); color: var(--hell-leise); }
.ampel .zahl small { margin-left: .15rem; font: 600 .5em/1 var(--grotesk); letter-spacing: 0; color: var(--hell-leise); }
.kc-ampel { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; font-weight: 600; }
.kc-ampel::before { content: ""; flex: none; width: .95rem; height: .95rem; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.kc-ampel.a-gruen::before { background: var(--gruen); }
.kc-ampel.a-gelb::before { background: var(--gelb); }
.kc-ampel.a-rot::before { background: var(--rot); }
.kc-dot { width: .95rem; height: .95rem; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.kc-dot.d-ja { background: var(--gruen); }
.kc-dot.d-fehler { background: none; border: 1.5px dashed rgba(255, 255, 255, .5); }
.kc-dot.d-aktiv { background: none; box-shadow: 0 0 0 2px var(--lime); animation: pt-puls .9s ease-in-out infinite alternate; }
@keyframes pt-puls { to { box-shadow: 0 0 0 2px rgba(132, 204, 22, .2); } }
.ampel > .punktlegende { grid-column: 1 / -1; font-size: .9rem; color: var(--hell-leise); }
.punktlegende i { display: inline-block; width: .8rem; height: .8rem; margin: 0 .3rem 0 .7rem; border-radius: 50%; vertical-align: -.08em; background: rgba(255, 255, 255, .2); }
.punktlegende .l-ja { background: var(--gruen); }
.punktlegende .l-fehler { background: none; border: 1.5px dashed rgba(255, 255, 255, .5); }
#kc-ergebnis, #sc-ergebnis { display: grid; gap: 1.25rem; }
.kc-verdikt, .sc-verdikt { padding: 1.2rem 1.4rem; border-left: .42rem solid var(--gruen); border-radius: 4px 12px 12px 4px; background: var(--tief); font-size: 1.05rem; line-height: 1.5; }
.kc-verdikt:empty, .sc-verdikt:empty { display: none; }
.kc-verdikt.v-mittel, .sc-verdikt.v-mittel { border-left-color: var(--gelb); }
.kc-verdikt.v-schlecht, .sc-verdikt.v-schlecht { border-left-color: var(--rot); }
.kc-verdikt small, .sc-verdikt small { display: block; margin-top: .6rem; font-size: .88rem; color: var(--hell-leise); }
.messlauf .notiz { max-width: 52rem; }
.messlauf .schluessel { margin-top: 0 !important; }

/* Sichtbarkeits-Check: Kennwerte, Karte, Messpunkte */
.kennwerte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem 2rem; }
.sc-kpi { display: flex; flex-direction: column; gap: .5rem; padding-top: 1rem; border-top: 3px solid var(--lime); }
.sc-kpi b { font: 800 clamp(1.9rem, 3.4vw, 2.8rem)/1 var(--antiqua); letter-spacing: -.03em; font-variation-settings: "opsz" 34; }
.sc-kpi span { font-size: .92rem; line-height: 1.35; color: var(--hell-leise); }
.kartenfeld { position: relative; z-index: 0; height: 27rem; border-radius: 12px; overflow: hidden; background: var(--tief); }
.lesetext .kartenfeld { height: 23rem; }
.sc-pt { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid #fff; border-radius: 50%; background: var(--gruen); color: var(--tinte); font: 700 .82rem/1 var(--grotesk); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.sc-pt-s { width: 24px; height: 24px; border-width: 1.5px; font-size: .68rem; }
.sc-pt.r-mittel { background: var(--gelb); }
.sc-pt.r-tief { background: var(--rot); color: #fff; }
.sc-pt.r-keins { background: #6B7488; color: #fff; }
.sc-zentrum { font-size: 20px; line-height: 1; }
.schluessel i.gelb { background: var(--gelb); }
.schluessel i.rot { background: var(--rot); }
.schluessel i.grau { background: #6B7488; }
@media (max-width: 62rem) {
  .fragenliste { grid-template-columns: minmax(0, 1fr); }
  .kennwerte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kartenfeld { height: 22rem; }
}

/* ---------- Branchen-Radar (Beitrag 737) ----------
   Der Beitrag wird monatlich von Website-Tools/branchen-radar/seite-update.mjs erzeugt; sein Markup (br-*) bleibt, wie es ist.
   Die neue Vorlage nimmt Stilinsel und eigenen Kopf heraus (pt_ohne_insel), hier stehen die Bausteine im neuen Kleid. */
.br-page > * + *, .br-wrap > * + * { margin-top: 1.25em; }
.br-branche-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .3rem 1.5rem; }
.br-branche-kopf h2 { margin-top: 0 !important; }
.br-branche, .br-methodik { margin-top: 2.5em !important; }
.br-messinfo { padding-bottom: .25rem; font: 500 .9rem/1.4 var(--grotesk); color: var(--leise); }
.br-wrap > .br-reihe { margin-top: 0; }
.br-wrap > .br-branche-kopf + .br-reihe { margin-top: 1.1rem; }
.br-reihe { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .15rem .5rem; padding-block: .8rem .85rem; border-top: 1px solid var(--linie); font: 400 1rem/1.4 var(--grotesk); }
.br-rang { grid-row: 1 / span 2; align-self: start; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 5px 9px 6px 10px; background: var(--papier-2); font: 600 .95rem/1 var(--grotesk); font-variant-numeric: tabular-nums; }
.br-top .br-rang { background: var(--lime); }
.br-name { font-size: 1.06rem; font-weight: 600; }
.br-trend { margin-left: .6rem; font: 500 .82rem/1 var(--grotesk); color: var(--leise); white-space: nowrap; }
.br-trend.t-auf { color: #3F6212; }
.br-trend.t-neu { padding: .12rem .4rem .14rem; border-radius: 4px; background: var(--tinte); color: #fff; }
.br-daten { display: grid; grid-template-columns: minmax(0, 1fr) 3.4rem; gap: .3rem .8rem; align-items: center; }
.br-detail { grid-column: 1 / -1; font-size: .9rem; color: var(--leise); }
.br-balken { height: .5rem; overflow: hidden; border-radius: 3px; background: var(--papier-2); }
.br-balken i { display: block; height: 100%; border-radius: 3px; background: var(--papier-leise); }
.br-top .br-balken i { background: var(--lime); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .28); }
.br-quote { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.br-messdetails { font: 400 .93rem/1.55 var(--grotesk); color: var(--leise); }
.br-messdetails summary { font-weight: 600; color: var(--tx); cursor: pointer; }
.br-messdetails[open] summary { margin-bottom: .5rem; }
.br-autor { padding-top: 1.5rem; border-top: 1px solid var(--linie); font: 400 1rem/1.6 var(--grotesk); color: var(--leise); }
.br-wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.br-weg { padding: 1.2rem 1.3rem 1.3rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--blatt-weiss); font: 400 1rem/1.55 var(--grotesk); }
.br-weg b { display: block; margin-bottom: .4rem; font: 700 1.18rem/1.25 var(--antiqua); }
@media (max-width: 40rem) {
  .br-wege { grid-template-columns: minmax(0, 1fr); }
  .br-trend { display: inline-block; margin: .2rem 0 0 .4rem; }
}
/* Langes Inhaltsverzeichnis am Rand (Branchen-Radar: 22 Einträge) bleibt bedienbar */
@media (min-width: 62.01rem) {
  .rand { max-height: calc(100vh - 3rem); overflow-y: auto; }
}

/* Studienseiten und Methodik (Vorlage seite-insel): die Standzeile vor dem Kopf der Seite */
.insel > .artikel-aktualisiert { width: min(100% - 2.5rem, var(--breite)); margin: 1.2rem auto 0; font: 500 .9rem/1.4 var(--grotesk); color: var(--hell-leise); }
.insel > .artikel-aktualisiert strong { font-weight: 500; }
.insel [id] { scroll-margin-top: 4.5rem; }

/* Druck: was die WordPress-Schicht ergänzt, bleibt wie Menü und Band auf dem Bildschirm */
@media print {
  .handymenue, .fuss-recht, .messlauf, .werkzeug, .kartenfeld { display: none !important; }
  .insel > .artikel-aktualisiert { width: auto; color: #333; }
  .br-top .br-rang, .br-rang { background: none; border: 1px solid #999; }
}

/* Newsletter-Kasten auf der Startseite */
.newsletter { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.5rem clamp(2rem, 5vw, 4rem); align-items: start; margin-top: 1.25rem; padding: 1.8rem 1.8rem 1.6rem; }
.newsletter > div { display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; }
.newsletter > div > p:not(.rubrik) { font-size: 1rem; color: var(--leise); }
.newsletter .knopf { margin-top: .4rem; }
.newsletter .artikelliste a { padding: .95rem 0 1.05rem; }
.newsletter .artikelliste .titel { font-size: 1.16rem; letter-spacing: .01em; }
@media (max-width: 62rem) {
  .newsletter { grid-template-columns: minmax(0, 1fr); }
}

/* Foto im Einstieg der Startseite: ohne Rahmen in den blauen Grund eingebettet (Patrick, 12.11.2026:
   „dass es sich oben besser einfügt? verlauf oder farblich oder irgendwas?“). Ränder laufen aus, die Farben sind zum Blau hin angeglichen. */
.einstieg .portraet.eingebettet { align-self: stretch; isolation: isolate; aspect-ratio: auto; min-height: 38rem; margin: -1.5rem -3rem 0 -2rem; border-radius: 0; box-shadow: none; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 82%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 16%, #000 66%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 82%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 16%, #000 66%, transparent 100%); mask-composite: intersect; }
.portraet.eingebettet img { object-position: 50% 38%; filter: saturate(.8) contrast(1.06); }
.portraet.eingebettet::after { content: ""; position: absolute; inset: 0; background: #1C3272; mix-blend-mode: color; opacity: .5; }
@media (max-width: 62rem) {
  .einstieg .portraet.eingebettet { min-height: 0; aspect-ratio: 5 / 4; margin: 1rem -1rem 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 70%, transparent 100%); }
}