/* Generated by tools/styles.py: magazine component profile. */
/* ============================================================================
   newways.consulting — Einseiter 2026 · Kapitel und Bausteine
   Reihenfolge wie im Dokument. Dunkle Kapitel tragen .on-ink, der Suite-Block
   .on-cobalt, das Webdesign-Kapitel liegt auf Kalk (creme-tint).
   ========================================================================= */

/* --- Einblend-Zustände: nur wenn Bewegung läuft, und mit Rückversicherung --- */
html.js-motion [data-rv] { opacity: 0; }
html.js-motion:not(.js-lief):not(.js-frei) .start__film { clip-path: circle(0% at 62% 42%); }
html.js-motion.js-lief [data-rv] { opacity: 1; }
html.js-motion.js-frei:not(.js-lief) [data-rv] { opacity: 1; }
html.js-motion [data-split] .zl { overflow: hidden; }
html.js-motion.js-frei:not(.js-lief) [data-split] .zw { transform: none !important; opacity: 1 !important; }

/* --- Die Linie ---------------------------------------------------------------- */
.linie { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; pointer-events: none; z-index: 3; opacity: 0; transform: translateZ(0); will-change: transform, opacity; backface-visibility: hidden; }
html.js-motion .linie { opacity: 1; }
.linie path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* --- Kopfzeile ----------------------------------------------------------------- */
.kopf { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-head); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s5);
  padding: .9rem var(--gutter); color: var(--text-inv); transition: transform var(--t-slow) var(--e-out), background var(--t-base), padding var(--t-base), color var(--t-base); }
.kopf::before { content: ''; position: absolute; inset: 0; background: rgba(15,21,8,.0); backdrop-filter: none; -webkit-backdrop-filter: none; transition: background var(--t-base), backdrop-filter var(--t-base); z-index: -1; }
.kopf.ist-klein { padding-block: .5rem; }
.kopf.ist-klein::before { background: rgba(15,21,8,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.kopf.ist-weg { transform: translateY(-110%); }
.kopf--hell { color: var(--text-strong); }
.kopf--hell.ist-klein::before { background: rgba(246,243,234,.82); }
.kopf__marke { display: inline-flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; }
.kopf__logo { height: 58px; width: auto; display: block; transition: height var(--t-base); }
.kopf__logo--hell, .kopf--hell .kopf__logo--dunkel { display: none; }
.kopf--hell .kopf__logo--hell { display: block; }
html.menu-offen .kopf__logo--hell { display: none !important; } html.menu-offen .kopf__logo--dunkel { display: block !important; }
.kopf.ist-klein .kopf__logo { height: 46px; }
@media (min-width: 900px) { .kopf__logo { height: 72px; } .kopf.ist-klein .kopf__logo { height: 52px; } }
.kopf__nav { display: none; justify-content: center; gap: clamp(1rem, .4rem + 1.6vw, 2.2rem); }
.kopf__nav a { color: inherit; text-decoration: none; font-family: var(--font-display); font-weight: 560; font-size: .95rem; opacity: .85; padding: .3em 0; position: relative; }
.kopf__nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px; background: var(--gold); transition: right var(--t-base) var(--e-out); }
.kopf__nav a:hover { opacity: 1; }
.kopf__nav a:hover::after, .kopf__nav a[aria-current="page"]::after { right: 0; }
.kopf__nav a[aria-current="page"] { opacity: 1; }
.kopf__akt { display: flex; align-items: center; gap: .6rem; justify-self: end; }
.sprachwahl { display: inline-flex; gap: .15rem; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; }
.sprachwahl a { color: inherit; text-decoration: none; padding: .45em .5em; border-radius: var(--r-pill); opacity: .6; }
.sprachwahl a[aria-current="true"] { opacity: 1; background: rgba(127,127,127,.18); }
.sprachwahl a:hover { opacity: 1; }
.kopf__cta { display: none; }
.kopf__knopf { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; color: inherit; opacity: .9; }
.kopf__knopf svg { width: 22px; height: 22px; }
.kopf__knopf .ic-close, html.menu-offen .kopf__knopf .ic-menu { display: none; }
html.menu-offen .kopf__knopf .ic-close { display: block; }
html.menu-offen .kopf { color: var(--text-inv); }
html.menu-offen .kopf::before { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (min-width: 720px) { .kopf__cta { display: inline-flex; } }
@media (min-width: 1100px) { .kopf__nav { display: flex; } .kopf__knopf { display: none; } }
@media (min-width: 1400px) { .kopf { padding-inline: max(var(--gutter), (100vw - var(--wrap)) / 2); } }

/* --- Menü ----------------------------------------------------------------------- */
.menue { position: fixed; inset: 0; z-index: calc(var(--z-head) - 1); background: var(--ink); color: var(--text-inv); padding: 6rem var(--gutter) 2rem; display: grid; grid-template-rows: 1fr auto; overflow: auto; }
.menue[hidden] { display: none; }
.menue nav { display: grid; align-content: center; gap: .1em; }
.menue nav a { display: flex; align-items: baseline; gap: .6em; color: inherit; text-decoration: none; font-family: var(--font-display); font-weight: 760; font-stretch: 80%; font-size: clamp(1.9rem, 1rem + 4.2vw, 3.6rem); line-height: 1.05; letter-spacing: -.02em; padding: .12em 0; opacity: 0; transform: translateY(14px); animation: menue-ein .5s var(--e-out) forwards; }
.menue nav a { min-height: 44px; }
.menue nav a:nth-child(n) { animation-delay: calc(var(--i, 0) * 40ms); }
.menue nav a:nth-child(2) { --i: 1 } .menue nav a:nth-child(3) { --i: 2 } .menue nav a:nth-child(4) { --i: 3 } .menue nav a:nth-child(5) { --i: 4 } .menue nav a:nth-child(6) { --i: 5 } .menue nav a:nth-child(7) { --i: 6 } .menue nav a:nth-child(8) { --i: 7 } .menue nav a:nth-child(9) { --i: 8 } .menue nav a:nth-child(10) { --i: 9 } .menue nav a:nth-child(11) { --i: 10 } .menue nav a:nth-child(12) { --i: 11 }
.menue nav a .num { color: var(--gold-lift); font-size: .8rem; width: 2.2em; }
.menue nav a:hover { color: var(--gold-lift); }
@keyframes menue-ein { to { opacity: 1; transform: none; } }
.menue__fuss { display: flex; flex-wrap: wrap; gap: 1.2rem; padding-top: 1.5rem; border-top: 1px solid var(--ink-line); font-family: var(--font-mono); font-size: var(--fs-sm); }
.menue__fuss a { color: var(--text-inv-muted); text-decoration: none; }
@media (min-width: 720px) { .menue nav { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }

/* --- Kapitelleiste --------------------------------------------------------------- */
.leiste { display: none; position: fixed; right: 1.1rem; top: 50%; transform: translateY(-50%); z-index: var(--z-rail); color: #fff; transition: color var(--t-base); }
html.leiste-hell .leiste { color: var(--ink); }
.leiste__spur { position: absolute; left: -.9rem; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.25); transition: background var(--t-base); }
html.leiste-hell .leiste__spur { background: rgba(15,21,8,.18); }
.leiste__spur i { display: block; width: 100%; height: 100%; background: currentColor; transform: scaleY(0); transform-origin: top; }
.leiste ol { list-style: none; display: grid; gap: .35rem; }
.leiste a { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; color: inherit; text-decoration: none; opacity: .45; padding: .1rem .2rem; }
.leiste a.ist-aktiv { opacity: 1; }
@media (min-width: 1500px) and (min-height: 640px) { .leiste { display: block; } }  /* unter 1500 px läge sie im Inhaltsrahmen */

/* --- Filmschleifen und Schalter --------------------------------------------------- */
[data-film-box] { position: relative; }
[data-film-box] video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.film__schalter { position: absolute; right: .8rem; bottom: .8rem; width: 40px; height: 40px; border-radius: 50%; background: rgba(15,21,8,.55); color: #fff; display: grid; place-items: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity var(--t-base); }
.film__schalter svg { width: 18px; height: 18px; }
.film__schalter .ic-play, .laeuft .film__schalter .ic-pause { display: block; }
.film__schalter .ic-pause, .laeuft .film__schalter .ic-play { display: none; }
[data-film-box]:hover .film__schalter, [data-film-box]:focus-within .film__schalter, [data-film-box]:not(.laeuft) .film__schalter { opacity: 1; }
@media (hover: none) { .film__schalter { opacity: .85; } }


.filme { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s5) var(--s4); }
.filmkarte { display: grid; gap: .35rem; align-content: start; }
.filmkarte__knopf, .spot__knopf { position: relative; display: block; width: 100%; border-radius: var(--r-md); overflow: hidden; background: #000; box-shadow: var(--sh-2); aspect-ratio: 16 / 9; }
.filmkarte[data-film-format="hoch"] .filmkarte__knopf { aspect-ratio: 16 / 9; }
.filmkarte__knopf img, .spot__knopf img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--e-out); }
.filmkarte[data-film-format="hoch"] .filmkarte__knopf img { object-position: center 25%; }  /* Hochformat-Vorschau im Querbild: Kopf und Titel nicht halbieren */
.filmkarte__knopf:hover img, .spot__knopf:hover img { transform: scale(1.04); }
.filmkarte__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(246,243,234,.92); color: var(--ink); display: grid; place-items: center; box-shadow: var(--sh-2); transition: transform var(--t-base) var(--e-out), background var(--t-base); }
.filmkarte__play svg { width: 24px; height: 24px; margin-left: 2px; }
.filmkarte__knopf:hover .filmkarte__play, .spot__knopf:hover .filmkarte__play { transform: translate(-50%, -50%) scale(1.08); background: var(--gold); }
.filmkarte b { font-family: var(--font-display); font-weight: 640; font-size: var(--fs-base); color: var(--text-strong); line-height: 1.25; }
.filmkarte .num { letter-spacing: .06em; text-transform: none; }
.kino__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
[data-kino].laeuft .filmkarte__knopf, [data-kino].laeuft .spot__knopf, [data-kino].laeuft .kino__poster { visibility: hidden; }
[data-kino].laeuft .filmkarte__knopf { visibility: visible; }
.filmkarte.laeuft { position: relative; }
.filmkarte.laeuft .filmkarte__knopf { position: relative; }
.filmkarte.laeuft .filmkarte__knopf img, .filmkarte.laeuft .filmkarte__play { visibility: hidden; }
.geraete { display: grid; gap: var(--s5); align-items: end; }
.geraet { margin: 0; display: grid; gap: .5rem; }
.geraet figcaption { color: var(--text-muted); }
.geraet--desk img { border-radius: 12px; box-shadow: 0 0 0 1px var(--line-strong), var(--sh-3); background: #fff; }
.geraet--phone { justify-self: center; width: min(100%, 250px); }
.geraet--phone img { border-radius: 30px; box-shadow: 0 0 0 6px var(--ink), 0 0 0 7px var(--line-strong), var(--sh-3); }
.geraet--karte img { border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line), var(--sh-2); }
.geraete--drei { align-items: start; }
.zitat { align-self: center; padding: var(--s5) 0; display: grid; gap: var(--s4); }
.zitat p { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.8rem); line-height: 1.3; color: var(--text-strong); font-variation-settings: 'opsz' 48, 'SOFT' 40; }
.zitat cite { font-style: normal; font-family: var(--font-display); font-weight: 640; }
.zitat footer { display: flex; gap: .6rem; align-items: baseline; }
.register { margin-top: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); padding-top: clamp(2rem, 1rem + 3vw, 4rem); border-top: 1px solid var(--line); display: grid; gap: var(--s6); }
.register__satz { font-size: var(--fs-md); max-width: 40rem; color: var(--text); }
.wall { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.wall li { display: grid; gap: .5rem; min-width: 0; align-content: start; }  /* min-width 0: sonst zwingt das 150-px-Logo die Spalte breiter als das Handy */
.wall__tile { display: grid; place-items: center; aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem; min-width: 0; overflow: hidden; }
.wall__tile img { max-height: 70px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.wall__cap { font-family: var(--font-display); font-weight: 620; font-size: var(--fs-sm); display: grid; }
.wall__cap i { font-style: normal; font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: .04em; }
.frueher { list-style: none; display: grid; gap: var(--s5); }
.frueher li { display: grid; gap: .35rem; }
.frueher figure { margin: 0 0 .4rem; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 0 0 1px var(--line), var(--sh-1); }
.frueher b { font-family: var(--font-display); font-weight: 640; }
.frueher .num { text-transform: none; letter-spacing: .05em; }

/* ---- newways.magazin (26.9.2026, Heft-Layout am Abend): Rubrikfarbe je Artikel über data-rubrik, Titelbild und Aufmacher überlappen den dunklen Kopf,
   Initiale, Zitate in Fraunces, Kurzprofil mit Portrait. Seiten kommen aus tools/magazin.py bzw. api/magazin.php (gleiche Vorlagen). ---- */
.mag-art, .mag-kopf, .mag__artikel, .mag__uebersicht, .mag__karte { --mag-lap: clamp(3.5rem, 2rem + 8vw, 9rem); }
.mag-art, .mag-kopf--uebersicht, .mag__karte { --rub: var(--gold-text); --rub-hell: var(--gold-lift); --rub-flaeche: var(--gold-block); --rub-schrift: var(--ink); }   /* nicht auf .mag-kopf: der Artikelkopf erbt die Rubrik von .mag-art */
[data-rubrik="werkstatt"] { --rub: var(--olive); --rub-hell: var(--olive-lift); --rub-flaeche: var(--olive-block); --rub-schrift: #fff; }
[data-rubrik="making-of"] { --rub: var(--gold-text); --rub-hell: var(--gold-lift); --rub-flaeche: var(--gold-block); --rub-schrift: var(--ink); }
[data-rubrik="praxis"] { --rub: var(--cobalt-deep); --rub-hell: var(--cobalt-lift); --rub-flaeche: var(--cobalt-block); --rub-schrift: #fff; }
[data-rubrik="presse"] { --rub: var(--text-strong); --rub-hell: var(--text-inv); --rub-flaeche: var(--text-inv); --rub-schrift: var(--ink); }   /* --creme wäre im dunklen Kopf Ink */
[data-rubrik="haltung"] { --rub: var(--gold-text); --rub-hell: var(--gold-lift); --rub-flaeche: var(--gold-soft); --rub-schrift: var(--ink); }

/* Kopf: dunkel, Lichtfleck in der Rubrikfarbe, unten Platz für das überlappende Titelbild */
.seite.mag-kopf { padding-bottom: calc(var(--mag-lap) + clamp(2.5rem, 1.5rem + 3vw, 4.5rem)); }   /* .seite steht weiter unten in der Datei, darum doppelte Klasse */
.seite.mag-kopf::after { background: radial-gradient(60% 80% at 82% 20%, color-mix(in srgb, var(--rub-hell) 22%, transparent) 0%, color-mix(in srgb, var(--rub-hell) 6%, transparent) 40%, transparent 70%); }
.mag-art--ohne-bild .seite.mag-kopf { padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.mag-art--ohne-bild .mag__buehne { display: none; }
.mag-art--ohne-bild .mag__artikel { padding-top: var(--sec-y); }
.mag__kopf { max-width: 62rem; }
.mag__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--text-inv-muted); font-variant-numeric: tabular-nums; }
.mag__kicker::before { content: ''; width: 2.2em; height: 1px; background: var(--rub-hell); flex: none; }
.mag__zurueck { text-decoration: none; border-bottom: 1px solid var(--line-gold); }
.mag__zurueck:hover { color: var(--text-inv); border-bottom-color: var(--text-inv); }
.mag__rubrik { display: inline-flex; align-items: center; padding: .38em .85em; border-radius: var(--r-pill); background: var(--rub-flaeche); color: var(--rub-schrift); font-weight: 600; letter-spacing: .1em; }
.mag__h1 { max-width: min(15em, 100%); hyphens: auto; overflow-wrap: anywhere; }
[data-rubrik="haltung"] .mag__h1 { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-stretch: 100%; letter-spacing: -.01em; line-height: 1.02; }
.mag__meta { margin-top: var(--s2); color: var(--text-inv-muted); }

/* Artikel: Titelbild als Tafel über der Kante, Lesespalte, Initiale, Zwischentitel mit Faden in der Rubrikfarbe */
.mag__artikel { background: var(--creme); padding-top: 0; display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); }
.mag__buehne { margin-top: calc(-1 * var(--mag-lap)); position: relative; z-index: 3; transform: translateZ(0); }   /* eigene Ebene: Safari malte den Kopf sonst darüber, bis gescrollt wurde */
.seite.mag-kopf::before { mix-blend-mode: normal; opacity: .045; }   /* Körnung ohne Mischmodus: Safari-Nachbarfehler (siehe LIESMICH) */
.mag__titelbild { margin: 0 auto; width: min(100%, 66rem); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--line-gold), var(--sh-3); background: var(--creme-card); }
.mag__titelbild img { display: block; width: 100%; height: auto; }
.mag__wrap { max-width: 46rem; margin-inline: auto; display: grid; gap: var(--s5); }
.mag__text { display: grid; gap: var(--s4); font-size: 1.08rem; line-height: 1.62; color: var(--text); }
.mag__text--initiale > p:first-child::first-letter { float: left; font-family: var(--font-display); font-weight: 720; font-stretch: 88%; font-size: 3.5em; line-height: .78; padding: .1em .14em 0 0; color: var(--rub); }
.mag__text h2 { font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.1rem); line-height: 1.1; letter-spacing: -.02em; font-stretch: 92%; margin-top: var(--s5); color: var(--text-strong); }
.mag__text h2::before { content: ''; display: block; width: 2.4rem; height: 2px; border-radius: 1px; background: var(--rub); margin-bottom: .55rem; }
.mag__text h3 { font-size: var(--fs-lg); margin-top: var(--s3); color: var(--text-strong); }
.mag__text ul, .mag__text ol { padding-left: 1.3em; display: grid; gap: .45rem; }
.mag__text li::marker { color: var(--rub); }
.mag__text blockquote { position: relative; margin: var(--s3) 0; padding: var(--s4) var(--s5) var(--s4) var(--s6); border-left: 2px solid var(--rub); background: var(--creme-card); border-radius: 0 var(--r-md) var(--r-md) 0; font-family: var(--font-serif); font-style: italic; font-size: 1.2em; line-height: 1.45; color: var(--text-strong); }
.mag__text blockquote::before { content: '„'; position: absolute; left: .4rem; top: -.05em; font-size: 3em; line-height: 1; font-style: normal; color: var(--rub); opacity: .5; }
.mag__text blockquote p { margin: 0; }
.mag__text hr { border: 0; border-top: 1px solid var(--line); margin: var(--s3) 0; }
.mag__text code { font-family: var(--font-mono); font-size: .9em; background: var(--creme-card); padding: .1em .35em; border-radius: 4px; }
.mag__text a { color: var(--text-strong); text-decoration: underline; text-decoration-color: var(--rub); text-underline-offset: .15em; }
.mag__figur { margin: var(--s3) 0; display: grid; gap: .55rem; }
.mag__figur img { display: block; width: 100%; height: auto; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line); }
.mag__figur figcaption { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em; color: var(--text-faint); padding-left: .8rem; border-left: 2px solid var(--rub); }
.mag__quellen { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--creme-card); display: grid; gap: .5rem; }
.mag__quellen ul { padding-left: 1.2em; font-size: var(--fs-sm); color: var(--text); display: grid; gap: .3rem; }
.mag__teilen { color: var(--text-faint); }
.mag__teilen a, .mag__feed a, .mag__zurueck { color: inherit; white-space: nowrap; display: inline-block; padding-block: .75em; margin-block: -.75em; }   /* Trefffläche ohne sichtbaren Versatz */
.mag__feed a[href^="mailto:"] { text-transform: none; letter-spacing: .04em; }

/* Übersicht: Rubriken im Kopf, die erste Karte liegt als Aufmacher quer über der Kante */
.seite.mag-kopf--uebersicht { padding-bottom: calc(var(--mag-lap) + clamp(2rem, 1.25rem + 2vw, 3.5rem)); }
.mag__rubriken { display: flex; flex-wrap: wrap; gap: .5rem; }
.mag__rubriken:empty { display: none; }
.mag__rubriken--kopf { margin-top: var(--s2); }
.mag__rubriken--kopf { gap: .6rem .5rem; }
.mag__rubriken--kopf .chip { color: var(--text-inv-muted); border-color: rgba(255,255,255,.4); text-decoration: none; min-height: 44px; padding-inline: 1.1em; }
.mag__rubriken--kopf .chip:hover { color: var(--text-inv); border-color: var(--text-inv); }
.mag__rubriken--kopf .chip.ist-aktiv { background: var(--text-inv); color: var(--ink); border-color: var(--text-inv); }
.mag__uebersicht, .mag__weitere { background: var(--creme); }
.mag__uebersicht { padding-top: 0; display: grid; }   /* Grid: der negative Rand der Liste kollabiert nicht nach außen */
.mag__liste { list-style: none; display: grid; gap: var(--s5); }
.mag__liste--uebersicht { margin-top: calc(-1 * var(--mag-lap)); position: relative; z-index: 3; transform: translateZ(0); }
.mag__liste--drei { margin-top: var(--s4); }
.mag__karte.ist-weg { display: none; }
.mag__karte-link { display: grid; grid-template-rows: auto 1fr; align-content: start; gap: var(--s4); color: inherit; text-decoration: none; padding: clamp(.9rem, .7rem + .8vw, 1.25rem); background: var(--creme-card); border: 1px solid var(--line); border-radius: var(--r-lg); height: 100%; box-shadow: var(--sh-1); transition: transform var(--t-base) var(--e-out), box-shadow var(--t-base), border-color var(--t-base); }
.mag__karte-link:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--rub); }
.mag__karte-bild { display: block; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: #E9E9E6; box-shadow: 0 0 0 1px var(--line); }
.mag__karte-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mag__karte-inhalt { display: grid; gap: .6rem; align-content: start; height: 100%; }
.mag__karte-kopf { color: var(--text-muted); }
.mag__karte-rubrik { display: inline-flex; align-items: center; padding: .15em .6em; border: 1px solid var(--rub); border-radius: var(--r-pill); color: var(--rub); font-weight: 600; }
.mag__karte-inhalt .link-go svg { color: var(--rub); }
.mag__karte-h2 { font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); line-height: 1.15; letter-spacing: -.015em; font-stretch: 92%; color: var(--text-strong); hyphens: auto; overflow-wrap: anywhere; }
.mag__karte-teaser { font-size: var(--fs-sm); color: var(--text); }
.mag__karte-inhalt .link-go { font-size: var(--fs-sm); margin-top: auto; }
.mag__karte-link:hover .link-go { color: var(--rub); }
.mag__liste--uebersicht > li:nth-child(1 of :not(.ist-weg)) { grid-column: 1 / -1; }
.mag__liste--uebersicht > li:nth-child(1 of :not(.ist-weg)) .mag__karte-bild { aspect-ratio: 16 / 10; }
.mag__liste--uebersicht > li:nth-child(1 of :not(.ist-weg)) .mag__karte-h2 { font-size: clamp(1.6rem, 1.1rem + 2.2vw, 3rem); font-weight: 700; font-stretch: 88%; letter-spacing: -.025em; }
.mag__liste--uebersicht > li:nth-child(1 of :not(.ist-weg)) .mag__karte-teaser { font-size: var(--fs-md); }
.mag__leer { grid-column: 1 / -1; padding: var(--s6); background: var(--creme-card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); color: var(--text-muted); }
.mag__feed { margin-top: var(--s5); color: var(--text-faint); }
@media (min-width: 700px) { .mag__liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .mag__liste--uebersicht > li:nth-child(1 of :not(.ist-weg)) .mag__karte-link:has(.mag__karte-bild) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto; gap: var(--s6); padding: var(--s5); align-items: center; } }
@media (min-width: 1100px) { .mag__liste { grid-template-columns: repeat(3, 1fr); } .mag__liste--drei:not(:has(> li:nth-child(3))), .mag__liste--uebersicht:not(:has(> li:nth-child(4))) { grid-template-columns: 1fr 1fr; } }

/* Kurzprofil: ruhiger, heller Schluss mit Portrait */
.mag__profil { background: var(--creme-tint); border-top: 1px solid var(--line); padding-block: calc(var(--sec-y) * .6); }
.mag__weitere { padding-block: calc(var(--sec-y) * .6); }
.mag__artikel, .mag__uebersicht { padding-bottom: calc(var(--sec-y) * .6); }
.mag__profil .link-go { min-height: 44px; }
.mag__profil-grid { display: grid; gap: var(--s6); align-items: start; }
.mag__portrait { margin: 0; display: grid; gap: .6rem; max-width: 16rem; }
.mag__portrait img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line-gold), var(--sh-2); }
.mag__portrait figcaption { color: var(--text-muted); }
.mag__profil-text { display: grid; gap: var(--s3); max-width: 34rem; align-content: start; }
.mag__profil-h2 { font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); line-height: 1.1; letter-spacing: -.02em; font-stretch: 92%; color: var(--text-strong); }
.mag__profil-links { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); }
@media (max-width: 699px) { .mag__portrait { max-width: none; grid-template-columns: 7rem 1fr; align-items: end; gap: .8rem; } .mag__karte-teaser, .mag__karte-inhalt .link-go { font-size: var(--fs-base); } }
@media (min-width: 700px) { .mag__profil-grid { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); } .mag__profil-text--agentur { grid-column: 2; } }
@media (min-width: 1100px) { .mag__profil-grid { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr) minmax(0, 1fr); } .mag__portrait { max-width: 18rem; } .mag__profil-text--agentur { grid-column: auto; } }

/* ============================================================================ 10 ASSISTENT */
.frage { background: var(--ink); }
.frage__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
.frage__text { display: grid; gap: var(--s4); }
.frage__tipp { font-size: clamp(1.4rem, 1rem + 2.2vw, 2.8rem); color: var(--gold-lift); line-height: 1.15; min-height: 2.3em; font-variation-settings: 'opsz' 72, 'SOFT' 60; }
.frage__tipp::after { content: ''; display: inline-block; width: 2px; height: .9em; background: var(--gold); margin-left: .12em; vertical-align: -.1em; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.frage__seeds { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.frage__seeds .chip { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: var(--fs-sm); text-align: left; }
.frage__klein { font-size: var(--fs-xs); }
.chat { background: var(--ink-raise); border: 1px solid var(--ink-line); border-radius: var(--r-xl); display: grid; grid-template-rows: auto 1fr auto; min-height: 460px; max-height: 70vh; overflow: hidden; }
.chat__bar { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--ink-line); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-inv-muted); }
.chat__puls { width: .55rem; height: .55rem; border-radius: 50%; background: var(--olive-lift); box-shadow: 0 0 0 0 rgba(156,203,106,.6); animation: puls 2.4s infinite; }
@keyframes puls { 70% { box-shadow: 0 0 0 8px rgba(156,203,106,0); } 100% { box-shadow: 0 0 0 0 rgba(156,203,106,0); } }
.chat__log { padding: 1.1rem; overflow: auto; display: grid; gap: .8rem; align-content: start; }
.msg { max-width: 88%; padding: .8rem 1rem; border-radius: 1.1rem; font-size: var(--fs-sm); line-height: 1.5; }
.msg p { margin: 0; white-space: pre-line; }
.msg--bot { background: rgba(255,255,255,.06); color: var(--text-inv); border-bottom-left-radius: .3rem; justify-self: start; }
.msg--ich { background: var(--gold); color: var(--ink); border-bottom-right-radius: .3rem; justify-self: end; }
.msg--wartet p { color: var(--text-faint); }
.chat__form { display: grid; grid-template-columns: 1fr auto; gap: .5rem; padding: .8rem; border-top: 1px solid var(--ink-line); }
.chat__form input { padding: .85em 1em; border-radius: var(--r-pill); border: 1px solid var(--ink-line); background: rgba(255,255,255,.05); color: var(--text-inv); }
.chat__form input:focus { outline: none; border-color: var(--gold); }
.chat__send { width: 46px; height: 46px; border-radius: 50%; background: var(--gold); color: var(--ink); display: grid; place-items: center; }
.chat__send svg { width: 18px; height: 18px; }
@media (min-width: 900px) { .frage__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }

/* ============================================================================ 11 FAQ */
.faq { background: var(--creme-tint); }
.faq__grid { display: grid; gap: var(--s6); align-items: start; }
.faq__kopf { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .faq__kopf { position: sticky; top: 6rem; } }

/* ============================================================================ 12 KONTAKT */
.kontakt { background: var(--creme); }
.kontakt__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
.kontakt__text { display: grid; gap: var(--s4); }
.kontakt__unter { font-size: clamp(1.3rem, 1rem + 1.6vw, 2.2rem); color: var(--gold-text); line-height: 1.2; }
.kontakt__wege { list-style: none; display: grid; gap: .6rem; margin-top: var(--s3); }
.kontakt__wege li { display: grid; gap: .1rem; }
.kontakt__wege a { font-family: var(--font-display); font-weight: 640; font-size: var(--fs-md); color: var(--text-strong); text-decoration: none; }
.kontakt__wege a:hover { color: var(--olive); }
.kontakt__form { padding: clamp(1.25rem, 1rem + 1.5vw, 2.4rem); background: var(--creme-card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-2); }
@media (min-width: 900px) { .kontakt__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }

/* ============================================================================ FUSS */
.fuss { background: var(--ink); color: var(--text-inv-muted); padding-block: clamp(3rem, 2rem + 4vw, 6rem) 2rem; }
.fuss__marke { display: inline-flex; align-items: center; gap: 1rem; color: var(--text-inv); text-decoration: none; }
.fuss__logo { width: min(280px, 60vw); height: auto; }
.fuss__satz { margin-top: var(--s5); font-size: clamp(1.3rem, 1rem + 1.6vw, 2.2rem); color: var(--text-inv); max-width: 24em; line-height: 1.2; }
.fuss__grid { margin-top: clamp(2rem, 1rem + 3vw, 4rem); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s5); font-size: var(--fs-sm); }
.fuss__grid > * { display: grid; gap: .35rem; align-content: start; }
.fuss__grid .num { color: var(--text-faint); margin-bottom: .3rem; }
.fuss__grid a { color: var(--text-inv-muted); text-decoration: none; }
.fuss__grid a:hover { color: var(--text-inv); }
.fuss__linie { margin-top: var(--s7); border-color: var(--ink-line); }
.fuss__klein { margin-top: var(--s4); text-transform: none; letter-spacing: .04em; font-size: var(--fs-xs); }
@media (max-width: 359px) { .fuss__grid { grid-template-columns: 1fr; } }
@media (min-width: 900px) { .fuss__grid { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================================ LICHTKASTEN */
.licht { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100vh; margin: 0; display: none; place-items: center; }
.licht[open] { display: grid; }
.licht::backdrop { background: rgba(10,15,5,.92); backdrop-filter: blur(8px); }
.licht { height: 100dvh; }
.licht__video { max-width: min(92vw, 1280px); max-height: calc(100vh - 10rem); max-height: calc(100svh - 10rem); width: auto; height: auto; border-radius: var(--r-md); box-shadow: var(--sh-3); background: #000; outline: none; }
.licht__video[hidden] { display: none; }
.licht__frame { width: min(92vw, 1280px, calc((100vh - 10rem) * 16 / 9)); width: min(92vw, 1280px, calc((100svh - 10rem) * 16 / 9)); height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-md); box-shadow: var(--sh-3); background: #000; }
.licht__zu { position: fixed; top: 1rem; right: 1rem; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; }
.licht__zu svg { width: 22px; height: 22px; }
.licht__titel { position: fixed; left: 50%; bottom: max(1.2rem, env(safe-area-inset-bottom)); width: min(calc(100% - 2rem), 80rem); transform: translateX(-50%); text-align: center; text-wrap: balance; color: rgba(255,255,255,.7); text-transform: none; letter-spacing: .06em; }
.licht__titel .licht__textlink { display: inline-flex; align-items: center; min-height: 44px; color: #e6d19b; text-decoration: underline; text-underline-offset: .18em; font-family: var(--font-display); letter-spacing: 0; }
html.licht-offen { overflow: hidden; }


/* --- Mehrseitig: Seitenkopf der Unterseiten, Schlussblock, Startseiten-Karten --------------------------- */
.seite { background: var(--ink); color: var(--text-inv); padding-top: clamp(7rem, 5rem + 6vw, 11rem); padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); position: relative; overflow: hidden; isolation: isolate; }
/* Papier und Tinte: feine Körnung und ein weicher Lichtfleck – kein Motiv, nur Tiefe */
.seite::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .06; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='260' height='260' filter='url(%23k)'/></svg>"); }
.seite::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 82% 20%, rgba(203,174,21,.16) 0%, rgba(203,174,21,.05) 40%, transparent 70%); }
.seite__kopf { position: relative; z-index: 2; }
/* Der Stift zeichnet den Kopf: ein Motiv je Seite als Goldlinie, die sich beim Laden zieht */
.seite__zeichnung { position: absolute; z-index: 1; right: 3rem; top: 50%; transform: translateY(-50%); width: min(36vw, 600px, calc(50vw - 30rem)); height: auto; opacity: .55; pointer-events: none; overflow: visible; }  /* rechts vom 60rem-Kopf, nie unter der Überschrift */
.seite__zeichnung path { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.seite__zeichnung--marco { opacity: .6; }
@media (max-width: 899px) { .seite__zeichnung { width: 70vw; right: -6vw; top: auto; bottom: -4vw; transform: none; opacity: .28; } }

.seite__kopf { display: grid; gap: var(--s4); max-width: 60rem; }
.seite__h1 { font-size: clamp(2.4rem, 1.4rem + 4.2vw, 5.4rem); line-height: .98; font-stretch: 88%; font-weight: 720; letter-spacing: -.03em; color: var(--text-inv); text-wrap: balance; }
.seite__lead { color: var(--text-inv-muted); max-width: 44rem; }
.schluss { background: var(--creme); }
.schluss__wrap { display: grid; gap: var(--s4); max-width: 52rem; }
.schluss__knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .4rem; }
.btn--ghost:hover { background: rgba(15,21,8,.06); }
.karten { list-style: none; display: grid; gap: var(--s4); }
.karten > li { display: grid; }
.karten .karte { height: 100%; }
.karte { display: grid; gap: .5rem; align-content: start; padding: clamp(1.1rem, .9rem + 1vw, 1.6rem); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); color: inherit; text-decoration: none; transition: transform var(--t-base), box-shadow var(--t-base); }
a.karte:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
.karte h3 { font-size: var(--fs-lg); font-stretch: 92%; }
.karte p { color: var(--text); font-size: var(--fs-sm); }
.karte .link-go { margin-top: .3rem; }
.fokus { list-style: none; display: grid; gap: var(--s5); margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }  /* Luft für die Abzweigung des Fadens über der Kartenreihe */
.fokus__karte { display: grid; gap: .8rem; color: inherit; text-decoration: none; }
.fokus__buehne { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #000; box-shadow: var(--sh-3); aspect-ratio: 16 / 10; margin: 0; }
.fokus__buehne video, .fokus__buehne img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fokus__buehne figcaption { position: absolute; left: .9rem; top: .8rem; color: rgba(255,255,255,.9); background: rgba(15,21,8,.62); padding: .3em .7em; border-radius: var(--r-pill); }  /* Etikett als Pille, damit es auf jedem Bild lesbar bleibt */
.fokus__buehne img ~ figcaption { left: auto; right: .9rem; }  /* Bildschirmfoto: oben rechts, nicht auf dem Logo des Fotos */
.fokus__buehne video[height="960"] { object-position: center 34%; }  /* Hochformat-Reel im Querkasten: Ausschnitt zwischen Kopfzeile (oben) und Titeln (unten) des Reels */
.fokus h3 { font-size: var(--fs-xl); font-stretch: 90%; }
.fokus h3 .k { display: block; color: var(--gold-text); font-weight: 400; }  /* Leistung in eigener Zeile: Firmenname und Leistung teilen sich nie eine Zeile, egal wie breit die Spalte ist */
.fokus p { color: var(--text); }
.historie { display: grid; gap: var(--s3); margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
.historie__marken { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.kurz { display: grid; gap: var(--s5); align-items: center; }
.kurz__bild { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-3); }
.kurz__bild img { width: 100%; height: auto; display: block; }
.kurz__text { display: grid; gap: var(--s3); max-width: 40rem; }
@media (min-width: 640px) { .karten { grid-template-columns: 1fr 1fr; } .fokus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); } }
@media (min-width: 1100px) { .fokus { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); } }   /* vier Karten seit 2.10.2026 (Wohnwert): 2×2 ab 640 px, eine Reihe ab 1100 px (darunter wären die Spalten unter 230 px und die Überschriften vierzeilig) */
@media (min-width: 900px) { .karten { grid-template-columns: repeat(3, 1fr); } .kurz { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .kurz--tausch .kurz__bild { order: 2; } }

/* Rasterkinder nicht auf die Zellenhöhe verteilen (align-content: normal = stretch) */
.knoten, .glied, .fakten li, .wd__fakten li, .vergleich__liste > li, .fokus__karte, .kurz__text, .filmkarte, .spot { align-content: start; }
.wischen:has(+ .filme > li:only-child), .wischen:has(+ .geraete > :only-child), .filme:has(> li:only-child) + .wischen { display: none; }  /* nichts zu wischen bei einer Karte (auch wenn der Hinweis unter der Filmreihe steht: VIP, Wohnwert) */
.telefon { align-content: start; }

/* Einwilligung (js/messung.js): beide Knöpfe gleich gewichtet, wie die AEPD es für die erste Ebene verlangt */
.fuss__cc { font: inherit; color: var(--text-inv-muted); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.fuss__cc:hover { color: var(--text-inv); }
.fuss__cc:focus-visible { outline: 2px solid var(--gold-lift); outline-offset: 3px; border-radius: 2px; }
.cc { position: fixed; z-index: 95; left: max(1rem, env(safe-area-inset-left)); right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  max-width: 34rem; margin-left: auto; padding: 1.25rem 1.35rem 1.2rem; display: grid; gap: .7rem;
  background: var(--ink); color: var(--text-inv); border-radius: 18px; box-shadow: 0 0 0 1px rgba(203,174,21,.35), 0 18px 48px rgba(15,21,8,.35);
  opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease; }
.cc.ist-offen { opacity: 1; transform: none; }
.cc[hidden] { display: none; }
.cc__titel { margin: 0; font-family: var(--font-display); font-weight: 640; font-size: var(--fs-md, 1.15rem); line-height: 1.25; color: var(--text-inv); }
.cc__text { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-inv-muted); }
.cc__text a { color: var(--gold-lift); }
.cc__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .2rem; }
.cc__knopf { font: inherit; font-size: var(--fs-sm); font-weight: 560; padding: .8em 1em; border-radius: 999px; cursor: pointer;
  color: var(--ink); background: var(--text-inv); border: 1px solid var(--text-inv); }
.cc__knopf:hover { background: #fff; }
.cc__knopf:focus-visible { outline: 2px solid var(--gold-lift); outline-offset: 3px; }
.cc__wahl { margin: .1rem 0 0; padding: .8rem .9rem; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; display: grid; gap: .6rem; }
.cc__wahl[hidden] { display: none; }
.cc__legende { padding: 0 .3rem; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-inv-muted); }
.cc__option { display: grid; grid-template-columns: auto 1fr; gap: .65rem; align-items: start; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-inv-muted); cursor: pointer; }
.cc__option b { color: var(--text-inv); font-weight: 600; }
.cc__option input { width: 1.15rem; height: 1.15rem; margin: .12rem 0 0; accent-color: var(--gold-lift); }
.cc__fuss { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; }
.cc__einst { font: inherit; font-size: var(--fs-sm); color: var(--text-inv-muted); background: none; border: 0; padding: .35rem 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cc__einst:hover { color: var(--text-inv); }
.cc__einst:focus-visible { outline: 2px solid var(--gold-lift); outline-offset: 3px; border-radius: 2px; }
.cc__knopf--speichern { padding: .6em 1.1em; }
.cc__knopf--speichern[hidden] { display: none; }
html.menu-offen .cc { visibility: hidden; }   /* das Handy-Menü bleibt bedienbar */
@media (prefers-reduced-motion: reduce) { .cc { transition: none; } }

/* ---- (Trennzeilen, damit sich die Patches der Stränge nicht berühren) ----


---- */