@font-face{font-family:'DM Sans';src:url('fonts/dmsans-latin.woff2')format('woff2');font-weight:100 1000;font-display:swap}
@font-face{font-family:'Marcellus';src:url('fonts/marcellus-latin.woff2')format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Mono';src:url('fonts/spacemono-400-latin.woff2')format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Mono';src:url('fonts/spacemono-700-latin.woff2')format('woff2');font-weight:700;font-display:swap}
/* ===== Tokens 1:1 Markenrichtlinie V2 (seiten/web/teile/rahmen.css) ===== */
:root{
  --bg0:#070b16;--bg1:#0b1326;--ink:#eef2f8;--mut:#9fb0c6;
  --gold:#e6b755;--tn-teal:#003856;--tn-blue:#4A9CC0;--tn-gold:#D4AA3C;--btn-end:#337694;--ok:#28c878;
  --glass-1:rgba(255,255,255,.03);--glass-2:rgba(255,255,255,.06);--glass-3:rgba(255,255,255,.10);--glass-live:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.14);--hl-top:rgba(255,255,255,.24);--hl-bottom:rgba(255,255,255,.05);--sheen:rgba(255,255,255,.10);--elev:0 18px 50px rgba(0,0,0,.45);
  --font-display:'Marcellus',Georgia,'Times New Roman',serif;--font-body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;--font-mono:'Space Mono','Courier New',monospace;
  --r-pill:999px;--r-xl:22px;--r-lg:18px;--r-md:12px;--r-sm:8px;--max:1160px;
  --accent-text:#4A9CC0;--seg:rgba(255,255,255,.07);--seg-an:url(#tn-ring-dunkel);--zahl:#D4AA3C;
  --kante:linear-gradient(135deg,rgba(74,156,192,.75),rgba(255,255,255,.08) 40%,rgba(212,170,60,.6));
  --spot:rgba(74,156,192,.18);--raster:rgba(255,255,255,.035);
}
html[data-theme="light"]{
  --bg0:#f5f8fc;--bg1:#e8eef7;--ink:#0c1726;--mut:#516074;
  --glass-1:rgba(12,30,60,.02);--glass-2:rgba(12,30,60,.045);--glass-3:rgba(12,30,60,.07);--glass-live:rgba(255,255,255,.62);
  --line:rgba(12,30,60,.14);--hl-top:rgba(255,255,255,.9);--hl-bottom:rgba(12,30,60,.04);--sheen:rgba(255,255,255,.55);--elev:0 14px 36px rgba(20,40,80,.12);
  --gold:#825500;--tn-blue:#1F6A8C;--ok:#177a45;--accent-text:#1F6A8C;--seg:rgba(12,30,60,.07);--seg-an:url(#tn-ring-hell);--zahl:#825500;
  --kante:linear-gradient(135deg,rgba(31,106,140,.55),rgba(12,30,60,.06) 40%,rgba(184,137,42,.5));
  --spot:rgba(31,106,140,.10);--raster:rgba(12,30,60,.045);
}
@media (prefers-contrast:more){:root{--line:rgba(255,255,255,.42)}html[data-theme="light"]{--line:rgba(12,30,60,.5)}}
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,p,figure,ol,ul,dl,dd{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
[id]{scroll-margin-top:96px}
body{font-family:var(--font-body);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;
  background:linear-gradient(180deg,var(--bg0),var(--bg1));background-attachment:fixed;overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--tn-blue);outline-offset:3px;border-radius:8px}
/* Polarlicht im Hintergrund: langsam, steht bei „weniger Bewegung“ und mit dem Pause-Knopf still */
.tn-aurora{position:fixed;inset:-20vh -20vw;z-index:-1;pointer-events:none;
  background:radial-gradient(40vw 32vw at 78% 8%,rgba(59,123,240,.22),transparent 62%),radial-gradient(36vw 30vw at 10% 18%,rgba(19,180,143,.17),transparent 60%),
  radial-gradient(42vw 34vw at 60% 92%,rgba(138,108,240,.15),transparent 62%),radial-gradient(26vw 22vw at 30% 60%,rgba(212,170,60,.07),transparent 60%)}
html[data-theme="light"] .tn-aurora{opacity:.55}
@media (prefers-reduced-motion:no-preference){.tn-aurora{animation:tn-drift 36s ease-in-out infinite alternate}}
@keyframes tn-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-3vw,2vh,0) scale(1.06)}100%{transform:translate3d(2vw,-2vh,0) scale(1.02)}}
.tn-still .tn-aurora,.tn-still .tn-komet,.tn-still .tn-puls{animation-play-state:paused!important}
/* Glas mit Lichtkante und Lichtkegel unter dem Zeiger */
.lg{position:relative;background:var(--glass-live);border:1px solid var(--line);border-radius:var(--r-lg);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:var(--elev),inset 0 1px 0 var(--hl-top),inset 0 -1px 0 var(--hl-bottom)}
.tn-glas{border-color:transparent;isolation:isolate}
.tn-glas::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--kante);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.tn-glas::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),var(--spot),transparent 55%)}
.tn-glas:hover::after{opacity:1}
main .lg>*{position:relative;z-index:1}
@media (prefers-reduced-transparency:reduce){.lg{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg1)}}
/* Leiste oben (läuft nicht mit) und Kopfzeile (die eine mitlaufende Leiste) */
.tn-leiste{background:var(--tn-teal);color:#fff;font-size:.875rem;line-height:1.5}
.tn-leiste p{max-width:var(--max);margin:0 auto;padding:4px 16px;text-align:center}
.tn-leiste a{color:#fff;display:inline-flex;align-items:center;min-height:24px;text-underline-offset:3px;font-weight:700}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--bg0);padding:8px 16px;border-radius:var(--r-md);z-index:300}.skip:focus{left:12px;top:12px}
nav.lg{position:sticky;top:12px;z-index:200;max-width:var(--max);margin:12px auto 0;display:flex;align-items:center;gap:16px;padding:8px 8px 8px 16px;border-radius:var(--r-pill)}
.brand{display:flex;align-items:center;gap:8px;min-height:44px;font-family:var(--font-display);font-size:19px;text-decoration:none;color:var(--ink)}
.brand i{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--tn-blue),var(--tn-gold));box-shadow:0 0 12px rgba(212,170,60,.6)}
.nav-links{display:flex;gap:16px;list-style:none;flex:1;justify-content:center;padding:0;margin:0}
.nav-links a{position:relative;display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);text-decoration:none}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;border-radius:2px;background:var(--gold);transform:scaleX(0);transition:transform .3s ease}
.nav-links a:hover,.nav-links a[aria-current="true"]{color:var(--gold)}.nav-links a:hover::after,.nav-links a[aria-current="true"]::after{transform:scaleX(1)}
.tgl{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:var(--r-pill);min-height:44px;min-width:44px;padding:4px 12px;font:inherit;font-size:13px;font-weight:600}
.tgl:hover{border-color:var(--gold)}
.nav-cta{min-height:44px;padding:8px 18px;font-size:.9rem}
.menu-btn{display:none}.menu-btn svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;stroke-linecap:round;fill:none}
@media(max-width:1023px){nav .btn.nav-cta{display:none}}
@media(max-width:899px){.menu-btn{display:inline-flex}nav.lg{top:0;border-radius:0;margin-top:0}.brand{flex:1}nav.lg .nav-links{display:none}
  nav.lg.offen .nav-links{display:grid;gap:4px;position:absolute;top:calc(100% + 8px);right:8px;width:min(260px,calc(100vw - 16px));padding:8px;background:var(--bg1);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--elev)}
  nav.lg.offen .nav-links a{padding:0 12px;font-size:12px;color:var(--ink)}nav.lg.offen .nav-links a::after{left:12px;right:12px;bottom:6px}}
/* Grundbausteine */
.tn-wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
@media(min-width:768px){.tn-wrap{padding:0 24px}}
main h1,main h2{font-family:var(--font-display);font-weight:400;color:var(--ink);letter-spacing:-.01em;text-wrap:balance;overflow-wrap:break-word}
main h3{color:var(--ink);text-wrap:balance}
main p{color:var(--mut);text-wrap:pretty}
main li{text-wrap:pretty}
:where(main) :where(p,li:not(.tn-shopk)) a:not(.btn):not(.tn-fn):not(.tn-filmchip):not(.tn-story):not(.tn-filmmini){color:var(--accent-text);text-underline-offset:2px}
.tag{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--gold);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.tag::before{content:'';width:24px;height:2px;background:var(--gold);flex:none}
.eyebrow{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--gold)}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:var(--r-pill);border:none;cursor:pointer;font:inherit;font-weight:700;color:#fff;text-decoration:none;text-align:center;line-height:1.3;overflow:hidden;
  background:linear-gradient(135deg,var(--tn-teal),var(--btn-end));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 18px rgba(0,56,86,.4),0 0 0 1px rgba(74,156,192,.35)}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s ease}
.btn:hover::after{transform:translateX(120%)}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:var(--glass-live);border:1px solid var(--line);color:var(--ink);font-weight:600;box-shadow:none}.btn.ghost:hover{border-color:var(--gold)}
.risk{font-size:.875rem;color:var(--mut);display:flex;align-items:center;gap:8px;line-height:1.4}
.risk::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 8px var(--ok)}
.tn-hl{background:linear-gradient(90deg,#6fc3e6,#e6c46a);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="light"] .tn-hl{background:linear-gradient(90deg,#1F6A8C,#7a5300);-webkit-background-clip:text;background-clip:text}
/* Fußnoten: kleine Nummer, öffnet eine Karte (Zeigen = Vorschau, Tippen = bleibt offen) */
.tn-fn{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;margin:0 2px;border-radius:10px;vertical-align:.2em;
  font-family:var(--font-mono);font-size:11px;line-height:1;font-weight:700;text-decoration:none;color:var(--ink);background:var(--glass-3);border:1px solid var(--line);transition:border-color .2s,background .2s}
.tn-fn:hover,.tn-fn[aria-expanded="true"]{border-color:var(--gold);background:rgba(212,170,60,.18)}
.tn-qkarte{position:fixed;inset:auto;left:16px;top:16px;width:min(360px,calc(100vw - 32px));margin:0;padding:16px 20px 16px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--bg1);color:var(--ink);box-shadow:var(--elev),0 0 0 1px rgba(212,170,60,.25);font-size:.9rem;line-height:1.5;
  opacity:0;transform:translateY(8px) scale(.96);transition:opacity .22s ease,transform .22s ease,overlay .22s allow-discrete,display .22s allow-discrete}
.tn-qkarte:popover-open{opacity:1;transform:none}
@starting-style{.tn-qkarte:popover-open{opacity:0;transform:translateY(8px) scale(.96)}}
.tn-qkarte .eyebrow{display:block;margin-bottom:8px}
.tn-qkarte p{color:var(--ink);margin:0}
.tn-qkarte .tn-qlink{display:inline-flex;align-items:center;min-height:32px;margin-top:8px;color:var(--accent-text);overflow-wrap:anywhere}
.tn-qkarte .tn-qzu{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;font-size:16px;line-height:1}
@media(max-width:767px){.tn-qkarte{left:8px!important;right:8px;top:auto!important;bottom:8px;width:auto}}
/* ===== Einstieg ===== */
.tn-hero{position:relative;padding:40px 0 56px}
.tn-raster{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--raster) 1px,transparent 1px),linear-gradient(90deg,var(--raster) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 75%)}
.tn-hero>.tn-wrap{display:grid;gap:48px;align-items:center}
@media(min-width:960px){.tn-hero{padding:64px 0 80px}.tn-hero>.tn-wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.tn-hero h1{font-size:clamp(2.2rem,1.4rem + 3.2vw,3.6rem);line-height:1.06}
.tn-lead{margin-top:24px;font-size:1.25rem;line-height:1.5;max-width:40ch}
.tn-lead strong{color:var(--ink);font-weight:600}
.tn-badges{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tn-badges li{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:4px 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--glass-2);font-family:var(--font-mono);font-size:12px;letter-spacing:.03em;color:var(--ink)}
.tn-badges svg{width:14px;height:14px;stroke:var(--ok);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tn-cta{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;margin-top:32px}
.tn-cta-main{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
@media(max-width:479px){.tn-hero{padding-top:16px}.tn-lead{margin-top:16px}.tn-cta{margin-top:24px}}
/* Orbit-Ring der 5 Zusagen (Hausbaustein 9, aufgewertet: Lichtkomet, Glasscheibe, Leuchten) */
.tn-ring{position:relative;max-width:380px;width:100%;margin:0 auto}
.tn-ring::before{content:'';position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(74,156,192,.28),rgba(212,170,60,.08) 55%,transparent 70%);filter:blur(24px);z-index:-1}
.tn-ring svg{width:100%;height:auto;display:block;overflow:visible}
.tn-bahn{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:2 6}
.tn-komet{fill:none;stroke:url(#tn-komet-verlauf);stroke-width:3;stroke-linecap:round;stroke-dasharray:90 1000;transform-origin:180px 180px}
@media (prefers-reduced-motion:no-preference){.tn-komet{animation:tn-dreh 9s linear infinite}}
@keyframes tn-dreh{to{transform:rotate(360deg)}}
.tn-scheibe{fill:var(--glass-2);stroke:url(#tn-kante-verlauf);stroke-width:1.5}
.tn-seg{fill:var(--seg);stroke:var(--line);stroke-width:1;animation:tn-glow 6s ease-in-out infinite;animation-delay:calc(var(--i) * 1.2s)}
@keyframes tn-glow{0%,24%,100%{fill:var(--seg)}6%,16%{fill:var(--seg-an)}}
.tn-ico{fill:none;stroke:var(--mut);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;transition:stroke .3s}
.tn-ring--js .tn-seg{animation:none;cursor:pointer;transform-box:fill-box;transform-origin:center;transition:fill .4s ease,transform .3s ease,filter .3s ease}
.tn-ring--js .tn-seg.is-an{fill:var(--seg-an);filter:drop-shadow(0 0 14px rgba(212,170,60,.45))}
.tn-ring--js .tn-seg.is-an+.tn-ico{stroke:#fff}
.tn-ring--js .tn-seg.is-hover{transform:translate(var(--dx),var(--dy))}
.tn-ring--js .tn-seg:focus{outline:none}.tn-ring--js .tn-seg:focus-visible{stroke:var(--ink);stroke-width:3}
.tn-ring-big{font-family:var(--font-display);font-size:34px;fill:var(--ink)}
.tn-ring-small,.tn-ring-kurz{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;fill:var(--mut)}
.tn-ring-wort{font-family:var(--font-display);fill:var(--ink)}
.tn-ring-zus{font-family:var(--font-mono);font-size:13px;fill:var(--zahl)}
.tn-ring-default,.tn-ring-name{transition:opacity .35s ease}.tn-ring-name{opacity:0}.tn-ring-name.is-an{opacity:1}.tn-ring-default.is-aus{opacity:0}
.tn-ring-unten{display:none}
.js .tn-ring-unten{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:8px;min-height:72px}
.tn-ring-info{font-size:.9375rem;line-height:1.45;text-align:center;max-width:32ch;color:var(--mut)}.tn-ring-info strong{color:var(--ink)}
.tn-pause{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--glass-2);color:var(--ink);cursor:pointer}
.tn-pause .tn-ic-play,.tn-pause[aria-pressed="true"] .tn-ic-pause{display:none}.tn-pause[aria-pressed="true"] .tn-ic-play{display:inline}
/* ===== Abschnitte ===== */
.tn-sec{position:relative;padding:56px 0}
@media(min-width:768px){.tn-sec{padding:80px 0}}
.tn-intro{max-width:760px;margin-bottom:32px}
.tn-intro h2{font-size:clamp(1.8rem,1.2rem + 1.9vw,2.6rem);line-height:1.14}
.tn-intro p{margin-top:16px;font-size:1.0625rem;max-width:56ch}
@media(min-width:768px){.tn-intro{margin-bottom:48px}}
.tn-nr{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--tn-teal),var(--btn-end));color:#fff;font-family:var(--font-display);font-size:1.125rem;box-shadow:0 0 0 1px rgba(74,156,192,.5),0 0 16px rgba(74,156,192,.35)}
/* Über Wolfgang: Foto + Kennzahlen */
.tn-ueber{display:grid;gap:32px;align-items:center}
@media(min-width:900px){.tn-ueber{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px}}
.tn-foto{margin:0;padding:8px;border-radius:24px}
.tn-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px}
.tn-foto figcaption{padding:12px 8px 4px;font-size:.875rem;color:var(--mut)}
.tn-titel{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:8px 16px;border-radius:var(--r-pill);border:1px solid rgba(212,170,60,.45);background:rgba(212,170,60,.1);color:var(--ink);font-weight:600;font-size:.95rem}
.tn-name{font-family:var(--font-display);font-size:1.75rem;line-height:1.2;color:var(--ink)}
.tn-kurz{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.tn-kurz li{display:flex;gap:12px;align-items:flex-start;color:var(--ink)}
.tn-kurz svg{flex:none;width:20px;height:20px;margin-top:3px;stroke:var(--tn-blue);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tn-zahlen{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:1100px){.tn-zahlen{grid-template-columns:repeat(4,1fr)}}
@media(min-width:600px) and (max-width:899px){.tn-zahlen{grid-template-columns:repeat(4,1fr)}}
.tn-zahlen li{padding:16px;text-align:center;border-radius:var(--r-md)}
.tn-zahlen b{display:block;white-space:nowrap;font-family:var(--font-display);font-weight:400;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.05;color:var(--zahl);font-variant-numeric:tabular-nums}
.tn-zahlen span{display:block;margin-top:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);line-height:1.4}
/* Zusagen: 5 in einer Zeile, sonst 3 + 2, Handy untereinander */
.tn-zus{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.tn-zus{grid-template-columns:repeat(6,1fr)}.tn-zus li{grid-column:span 2}.tn-zus li:nth-child(4),.tn-zus li:nth-child(5){grid-column:span 3}}
@media(min-width:1024px){.tn-zus{grid-template-columns:repeat(5,1fr)}.tn-zus li,.tn-zus li:nth-child(4),.tn-zus li:nth-child(5){grid-column:auto}}
.tn-zus li{display:flex;flex-direction:column;gap:8px;padding:24px}
.tn-zus .tn-sym{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(74,156,192,.25),rgba(212,170,60,.15));border:1px solid var(--line)}
.tn-zus .tn-sym svg{width:22px;height:22px;stroke:var(--ink);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tn-zus h3{font-family:var(--font-display);font-weight:400;font-size:1.45rem;line-height:1.2;margin-top:8px}
.tn-zus p{font-size:.98rem;line-height:1.5}
/* Für wen: 3 Karten in einer Zeile */
.tn-wer{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:900px){.tn-wer{grid-template-columns:repeat(3,1fr)}}
.tn-wer>li{display:flex;flex-direction:column;gap:12px;padding:28px 24px}
.tn-wer h3{font-family:var(--font-display);font-weight:400;font-size:1.5rem;line-height:1.2}
.tn-wer ul{list-style:none;margin:8px 0 16px;padding:0;display:grid;gap:8px}
.tn-wer ul li{display:flex;gap:8px;align-items:flex-start;color:var(--ink);font-size:.98rem;line-height:1.45}
.tn-wer ul svg{flex:none;width:18px;height:18px;margin-top:3px;stroke:var(--ok);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tn-wer .tn-weiter{margin-top:auto}
.tn-weiter{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--accent-text);text-decoration:none}
.tn-weiter:hover{text-decoration:underline;text-underline-offset:3px}
/* Leistungsrad (Aufbau wie /sl3: Rad links, Liste rechts, gleiche Farben) */
.tn-rad{display:grid;gap:40px;align-items:center}
@media(min-width:960px){.tn-rad{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.tn-rad-bild{max-width:420px;width:100%;margin:0 auto;position:relative}
.tn-rad-bild::before{content:'';position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,rgba(212,170,60,.18),transparent 70%);filter:blur(28px);z-index:-1}
.tn-rad-bild svg{width:100%;height:auto;display:block;overflow:visible}
.tn-rs{stroke:var(--bg1);stroke-width:2;cursor:pointer;transform-box:fill-box;transform-origin:center;transition:transform .3s ease,filter .3s ease,opacity .3s}
.tn-rad.hat-wahl .tn-rs{opacity:.55}.tn-rad.hat-wahl .tn-rs.is-an{opacity:1;transform:translate(var(--dx),var(--dy));filter:drop-shadow(0 0 12px rgba(255,255,255,.25))}
.tn-rs:focus{outline:none}.tn-rs:focus-visible{stroke:var(--ink);stroke-width:3}
.tn-rn{pointer-events:none}.tn-rn circle{fill:#fff}.tn-rn text{font-family:var(--font-display);font-size:15px;fill:#0c1726}
.tn-rad-mitte{fill:var(--bg1);stroke:url(#tn-kante-verlauf);stroke-width:1.5}
.tn-rad-liste{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:640px){.tn-rad-liste{grid-template-columns:1fr 1fr}}
.tn-rad-liste li{display:grid;grid-template-columns:36px 1fr;gap:4px 12px;align-items:start;padding:16px 16px;border-radius:var(--r-md);border-left:3px solid var(--f);transition:transform .2s,background .2s}
.tn-rad-liste li.is-an{background:var(--glass-3);transform:translateX(4px)}
.tn-rad-liste .tn-rnr{grid-row:span 3;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--f);color:#0c1726;font-family:var(--font-display);font-size:15px}
.tn-rad-liste strong{color:var(--ink);font-weight:600;line-height:1.3}
.tn-rad-liste span{font-size:.875rem;color:var(--mut);line-height:1.4}
.tn-rad-liste a{font-family:var(--font-mono);font-size:.8125rem;color:var(--zahl);text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
.tn-rad-liste a:hover{text-decoration:underline;text-underline-offset:3px}
/* Ablauf: Linie füllt sich beim Scrollen (Hausbaustein 10) */
.tn-steps{list-style:none;margin:0;padding:0;display:grid;gap:40px 16px;grid-template-columns:repeat(4,1fr)}
@media(max-width:899px){.tn-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:479px){.tn-steps{grid-template-columns:1fr}}
.tn-steps li{position:relative;padding:36px 24px 24px;border-top:3px solid var(--line)}
.tn-steps li::before{content:'';position:absolute;left:0;right:0;top:-3px;height:3px;background:linear-gradient(90deg,var(--tn-blue),var(--tn-gold));transform-origin:left;box-shadow:0 0 12px rgba(212,170,60,.5)}
.tn-steps .tn-nr{position:absolute;top:-22px;left:24px}
.tn-steps h3{font-family:var(--font-display);font-weight:400;font-size:1.35rem;margin-top:8px}
.tn-steps p{margin-top:8px;font-size:.98rem;line-height:1.5}
.tn-wer-tut{display:inline-block;margin-top:16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--glass-3);border-radius:var(--r-pill);padding:0 12px;line-height:2}
.tn-mehr-zeile{margin-top:32px}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .tn-steps li::before{transform:scaleX(0);animation:tn-fuell linear both;animation-timeline:view();animation-range:entry 40% cover 45%}
  .tn-auf{animation:tn-rise linear both;animation-timeline:view();animation-range:entry 0% entry 140px}}}
@keyframes tn-fuell{to{transform:scaleX(1)}}
@keyframes tn-rise{from{opacity:.001;translate:0 24px}to{opacity:1;translate:none}}
/* Probe */
.tn-probe{display:grid;gap:32px;padding:32px 24px;border-radius:24px}
@media(min-width:768px){.tn-probe{padding:48px;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}}
.tn-probe h2{font-size:clamp(1.8rem,1.2rem + 1.9vw,2.6rem);line-height:1.14}
.tn-haken{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:8px}
.tn-haken li{display:flex;gap:12px;align-items:flex-start;color:var(--ink)}
.tn-haken svg{flex:none;width:20px;height:20px;margin-top:3px;stroke:var(--ok);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tn-probe-aktion{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.tn-puls{position:relative}
@media (prefers-reduced-motion:no-preference){.tn-puls::before{content:'';position:absolute;inset:-6px;border-radius:var(--r-pill);border:2px solid rgba(212,170,60,.55);animation:tn-pulsieren 2.8s ease-out 3}}
@keyframes tn-pulsieren{from{opacity:.9;transform:scale(.96)}to{opacity:0;transform:scale(1.12)}}
/* Preise: 3 in einer Zeile */
.tn-packs{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:900px){.tn-packs{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.tn-pack{display:flex;flex-direction:column;gap:8px;padding:28px 24px}
.tn-pack.is-pick{box-shadow:var(--elev),0 0 0 2px var(--tn-gold),0 0 40px rgba(212,170,60,.18)}
.tn-pick{align-self:flex-start;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#0c1726;background:linear-gradient(90deg,#e6c46a,#D4AA3C);border-radius:var(--r-pill);padding:0 12px;line-height:2}
.tn-pack h3{font-family:var(--font-display);font-weight:400;font-size:1.5rem}
.tn-preis{font-family:var(--font-display);font-size:2.6rem;line-height:1;color:var(--zahl)}
.tn-preis small{font-family:var(--font-mono);font-size:.8125rem;color:var(--mut);margin-left:8px}
.tn-kuend{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;color:var(--mut)}
.tn-pack ul{list-style:none;margin:12px 0 20px;padding:0;display:grid;gap:8px;color:var(--ink);font-size:.98rem}
.tn-pack ul li{display:flex;gap:8px;align-items:flex-start}
.tn-pack ul svg{flex:none;width:18px;height:18px;margin-top:3px;stroke:var(--tn-blue);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tn-pack .btn{margin-top:auto}
.tn-pack .tn-weiter{align-self:center;font-size:.9rem}
.tn-hinweis{margin-top:24px;font-size:.875rem;max-width:90ch}
/* Fragen (Hausmuster) */
.faq{display:grid;gap:12px;max-width:820px}
details.lg{padding:0;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:16px 24px;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--font-mono);font-size:1.3rem;color:var(--gold);flex:none;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.tn-faq-q{margin:0;font:inherit;font-weight:600;font-size:1.0625rem;line-height:1.4;color:inherit}
.faq .answer{padding:0 24px 24px;font-size:.98rem;line-height:1.6;max-width:66ch}
/* Quellen */
.tn-quellen{margin:0;padding-left:24px;display:grid;gap:12px;font-size:.875rem;color:var(--mut);max-width:90ch}
.tn-quellen li{padding-left:4px;scroll-margin-top:110px}
.tn-quellen li:target{color:var(--ink)}
.tn-quellen strong{color:var(--ink);font-weight:600}
.tn-quellen a{color:var(--accent-text);overflow-wrap:anywhere;display:inline-flex;min-height:24px;align-items:center}
.totop{position:fixed;right:16px;bottom:16px;z-index:150;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--bg1);color:var(--ink);text-decoration:none;font-weight:600;font-size:.875rem;opacity:0;pointer-events:none;transition:opacity .3s}
.totop.is-an{opacity:1;pointer-events:auto}.totop:hover{border-color:var(--gold);color:var(--gold)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.tn-seg--start{fill:var(--seg-an)}}
/* Unterseite: Rückweg, Ablauf senkrecht, Technik, Tabelle */
.tn-zurueck{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;margin:0 0 16px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:.9rem;font-weight:600;color:var(--ink);text-decoration:none}
.tn-zurueck:hover,.tn-zurueck:focus-visible{border-color:var(--gold)}
.tn-weg{list-style:none;margin:0;padding:0 0 0 8px;display:grid;gap:16px;position:relative;max-width:820px}
.tn-weg::before{content:'';position:absolute;left:27px;top:24px;bottom:24px;width:2px;background:var(--line)}
.tn-weg li{position:relative;display:grid;grid-template-columns:40px 1fr auto;gap:4px 20px;align-items:start;padding:20px 24px 20px 0}
.tn-weg .tn-nr{grid-row:span 2;z-index:1}
.tn-weg h3{font-family:var(--font-display);font-weight:400;font-size:1.3rem;line-height:1.25}
.tn-weg p{grid-column:2;font-size:.98rem;line-height:1.5}
.tn-weg .tn-wer-tut{grid-column:3;grid-row:1;margin-top:4px}
@media(max-width:559px){.tn-weg li{grid-template-columns:40px 1fr}.tn-weg .tn-wer-tut{grid-column:2;grid-row:auto;justify-self:start;margin-top:8px}}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.tn-weg .tn-nr{animation:tn-leucht linear both;animation-timeline:view();animation-range:entry 60% cover 40%}}}
@keyframes tn-leucht{from{box-shadow:0 0 0 1px rgba(74,156,192,.3)}to{box-shadow:0 0 0 1px rgba(212,170,60,.8),0 0 22px rgba(212,170,60,.45)}}
.tn-technik{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:900px){.tn-technik{grid-template-columns:repeat(3,1fr)}}
.tn-technik li{display:flex;flex-direction:column;gap:8px;padding:24px}
.tn-technik h3{font-family:var(--font-display);font-weight:400;font-size:1.35rem}
.tn-messung{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.tn-messung span{font-family:var(--font-mono);font-size:12px;color:var(--ink);background:var(--glass-3);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 8px}
.tn-tab{width:100%;border-collapse:collapse;font-size:.95rem}
.tn-tab th,.tn-tab td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.tn-tab th{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:400}
.tn-tab td{color:var(--ink)}.tn-tab td:first-child{font-weight:600}
.tn-tabhuelle{padding:8px 8px 16px;border-radius:var(--r-lg)}
@media(max-width:699px){.tn-tab thead{display:none}.tn-tab,.tn-tab tbody,.tn-tab tr,.tn-tab td{display:block}.tn-tab tr{padding:12px 8px;border-bottom:1px solid var(--line)}.tn-tab td{border:0;padding:2px 8px}.tn-tab td[data-k]::before{content:attr(data-k) ": ";color:var(--mut)}}
/* ===== Farbwelten im Rhythmus von /sl3, umgelegt auf Teddynews: Grund · Tönung · kräftiges Band (Petrol mit Schauraum-Foto, Gold) ===== */
.tn-tint{background:var(--glass-1);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
html[data-theme="light"] .tn-tint{background:#eaf0f8}
.tn-band{position:relative;isolation:isolate;overflow:hidden}
.tn-band--foto{background:#003856;--ink:#ffffff;--mut:rgba(255,255,255,.88);--gold:#f0cf7a;--accent-text:#a9dcf1;--zahl:#f0cf7a;--glass-live:rgba(255,255,255,.10);--glass-2:rgba(255,255,255,.10);--glass-3:rgba(255,255,255,.16);--line:rgba(255,255,255,.24);--kante:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.08) 40%,rgba(240,207,122,.7))}
.tn-band-bild{position:absolute;inset:-32px;z-index:-2;background:url('bilder/schauraum-hintergrund.webp') center/cover no-repeat;filter:blur(14px) saturate(1.2);transform:scale(1.08)}
.tn-band--foto::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,40,64,.84),rgba(0,32,52,.78) 55%,rgba(0,22,38,.9))}
.tn-band--foto .tn-titel{background:rgba(240,207,122,.16);border-color:rgba(240,207,122,.6)}
.tn-final-box{max-width:780px}
.tn-final-box h2{font-size:clamp(1.9rem,1.2rem + 2.2vw,2.9rem);line-height:1.12}
/* Leitsätze: Kachelwand wie /sl3, Farben Gold · Petrol mit Foto · Glas · Petrol */
.tn-leit{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:720px){.tn-leit{grid-template-columns:1fr 1fr}.tn-leitk--gold{grid-row:span 3}}
@media(min-width:1024px){.tn-leit{grid-template-columns:5fr 4fr 4fr}.tn-leitk--gold{grid-row:span 2}.tn-leitk--petrol{grid-column:2 / span 2}}
.tn-leitk{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-lg);padding:28px;min-height:176px;display:flex;flex-direction:column;gap:12px;border:1px solid var(--line)}
.tn-leit-label{align-self:flex-start;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding-left:12px;border-left:1px solid currentColor}
main .tn-leit-satz{font-family:var(--font-display);font-size:clamp(1.5rem,1.1rem + 1.3vw,2.05rem);line-height:1.15;margin:0;text-wrap:balance}
main .tn-leitk--gold .tn-leit-satz{font-size:clamp(2.1rem,1.3rem + 2.6vw,3.3rem)}
main .tn-leit-zusatz{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;line-height:1.8;margin:0}
main .tn-leit-sig{margin-top:auto;display:flex;align-items:center;gap:12px;font-size:.85rem;padding-top:24px}
.tn-leit-sig i{flex:none;width:40px;height:1px;background:currentColor}
.tn-leitk--foto{background:#003856;color:#fff;border-color:transparent}
.tn-leitk--foto::before{content:'';position:absolute;inset:-14px;z-index:-2;background:url('bilder/schauraum-hintergrund.webp') center/cover;filter:blur(7px)}
.tn-leitk--foto::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,40,64,.8),rgba(0,28,46,.92))}
main .tn-leitk--foto p{color:#fff}
.tn-leitk--glas{background:var(--glass-live);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ink)}
main .tn-leitk--glas p{color:var(--ink)}
.tn-leitk--petrol{background:linear-gradient(135deg,#003856,#0e5a7a);color:#fff;border-color:transparent}
main .tn-leitk--petrol p{color:#fff}
/* Belege: standardmäßig zugeklappt; Fußnoten öffnen die Liste beim Sprung */
.tn-belege{padding:0;overflow:hidden}
.tn-belege summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;min-height:56px}
.tn-belege summary::-webkit-details-marker{display:none}
.tn-belege summary::after{content:'+';font-family:var(--font-mono);font-size:1.4rem;color:var(--gold);flex:none;transition:transform .25s}
.tn-belege[open] summary::after{transform:rotate(45deg)}
.tn-belege summary h2{font-size:1.35rem;margin:0}
.tn-belege .tn-quellen{padding:0 24px 24px 48px}
/* Goldlicht statt Goldfläche (Wolfgang 18.10.: große Goldflächen wirkten klobig): dunkler Grund, weiches Goldleuchten, feine Punktstruktur, Goldlinien an den Kanten; hell: Champagner */
.tn-band--gold{background:radial-gradient(900px 420px at 12% 0%,rgba(212,170,60,.26),transparent 62%),radial-gradient(760px 380px at 92% 100%,rgba(230,196,106,.18),transparent 60%),linear-gradient(180deg,#0d1526,#111a2d);
  --ink:#ffffff;--mut:rgba(255,255,255,.86);--gold:#f0cf7a;--zahl:#f0cf7a;--line:rgba(240,207,122,.3);--glass-live:rgba(255,255,255,.06);--glass-3:rgba(240,207,122,.16)}
.tn-band--gold::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(240,207,122,.22) 1px,transparent 1.3px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 60% 80% at 20% 30%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 80% at 20% 30%,#000,transparent 75%)}
.tn-band--gold::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(240,207,122,.75),transparent);box-shadow:0 0 18px rgba(240,207,122,.45)}
.tn-band--gold .tn-wrap::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(240,207,122,.45),transparent)}
.tn-band--gold .tn-wrap{position:static}
.tn-band--gold h2{background:linear-gradient(90deg,#fff 0%,#fff 55%,#f3d98e 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.tn-band--gold .tn-probe{padding:0}
.tn-band--gold .btn.ghost{border-color:rgba(240,207,122,.5)}
html[data-theme="light"] .tn-band--gold{background:radial-gradient(900px 420px at 12% 0%,rgba(212,170,60,.30),transparent 62%),radial-gradient(760px 380px at 92% 100%,rgba(212,170,60,.18),transparent 60%),linear-gradient(180deg,#fbf6e9,#f5ecd4);
  --ink:#0c1726;--mut:#3a3220;--gold:#6b4a00;--zahl:#6b4a00;--line:rgba(107,74,0,.28);--glass-live:rgba(255,255,255,.6);--glass-3:rgba(107,74,0,.12)}
html[data-theme="light"] .tn-band--gold::before{background-image:radial-gradient(rgba(130,85,0,.2) 1px,transparent 1.3px)}
html[data-theme="light"] .tn-band--gold h2{background:none;color:var(--ink)}
html[data-theme="light"] .tn-band--gold .tn-haken svg{stroke:#0f6b3a}
/* Leitsatz-Kachel Gold: dunkle Kachel mit Goldleuchten und goldener Schrift statt voller Goldfläche */
.tn-leitk--gold{background:radial-gradient(420px 300px at 0% 0%,rgba(212,170,60,.34),transparent 65%),radial-gradient(360px 260px at 100% 100%,rgba(230,196,106,.16),transparent 60%),linear-gradient(160deg,#121b30,#0c1424);
  color:#f3dc98;border:1px solid rgba(240,207,122,.38);box-shadow:0 18px 50px rgba(0,0,0,.3),inset 0 1px 0 rgba(240,207,122,.35)}
main .tn-leitk--gold p{color:#f3dc98}
main .tn-leitk--gold .tn-leit-satz{background:linear-gradient(100deg,#fff4cf 0%,#f0cf7a 45%,#d4aa3c 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="light"] .tn-leitk--gold{background:radial-gradient(420px 300px at 0% 0%,rgba(212,170,60,.32),transparent 65%),linear-gradient(160deg,#fdf8ec,#f6ecd2);color:#5a3f00;border-color:rgba(107,74,0,.3);box-shadow:0 14px 36px rgba(20,40,80,.12)}
html[data-theme="light"] main .tn-leitk--gold p{color:#5a3f00}
html[data-theme="light"] main .tn-leitk--gold .tn-leit-satz{background:none;color:#4a3300}
/* Abzeichen im Einstieg einzeilig (Wolfgang 18.10.); nur sehr schmale Handys dürfen umbrechen */
.tn-badges li{white-space:nowrap}
@media(min-width:560px){.tn-badges--zeile{flex-wrap:nowrap}.tn-badges--zeile li{padding:4px 12px;font-size:11.5px;letter-spacing:.02em}}
/* Instagram-Karussell der Leitsätze (Hausmuster /teddy-karussell/ „Beitrag im Hero“): Spur per transform, kein innerer Scroller, kein Autoplay */
.tn-ig-reihe{display:grid;gap:40px;align-items:center;margin-top:56px}
@media(min-width:900px){.tn-ig-reihe{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px}}
.tn-ig-text h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem);line-height:1.2;margin-top:8px}
.tn-ig-text>p{margin-top:12px;font-size:1.0625rem;max-width:46ch}
.tn-ig-text .tn-haken{margin:20px 0 12px}
.tn-ig{width:100%;max-width:400px;justify-self:center;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg1);overflow:hidden;box-shadow:var(--elev)}
.tn-ig-kopf{display:flex;align-items:center;gap:8px;padding:8px 16px;font-size:13px}
.tn-ig-avatar{width:32px;height:32px;border-radius:50%;flex:none;padding:2px;background:linear-gradient(135deg,#D4AA3C,#4A9CC0)}
.tn-ig-konto{font-weight:600;color:var(--ink)}
.tn-ig-zaehler{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--ink);background:rgba(0,0,0,.35);border-radius:999px;padding:2px 9px}
html[data-theme="light"] .tn-ig-zaehler{background:rgba(12,30,60,.08)}
.tn-ig-buehne{position:relative;overflow:hidden;aspect-ratio:4/5;outline:none}
.tn-ig-buehne:focus-visible{box-shadow:inset 0 0 0 3px var(--tn-blue)}
.tn-ig-spur{display:flex;height:100%;transition:transform .38s cubic-bezier(.2,.7,.2,1);touch-action:pan-y;will-change:transform}
.tn-ig-karte{flex:0 0 100%;min-width:0;height:100%;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:14% 15%;user-select:none}
.tn-ig-karte p{margin:0;font-family:var(--font-display);font-size:clamp(1.55rem,1.2rem + 1.3vw,2.05rem);line-height:1.18;text-wrap:balance}
.tn-ig-label{align-self:flex-start;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding-left:8px;border-left:1px solid currentColor}
.tn-ig-marke{position:absolute;right:8%;bottom:6%;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;opacity:.8}
.tn-ig-karte--gold{background:radial-gradient(320px 260px at 0% 0%,rgba(212,170,60,.4),transparent 65%),radial-gradient(260px 220px at 100% 100%,rgba(230,196,106,.18),transparent 60%),linear-gradient(160deg,#121b30,#0c1424);color:#f3dc98}
.tn-ig-karte--gold p{background:linear-gradient(100deg,#fff4cf,#f0cf7a 50%,#d4aa3c);-webkit-background-clip:text;background-clip:text;color:transparent}
.tn-ig-karte--foto{background:#003856;color:#fff}
.tn-ig-karte--foto::before{content:'';position:absolute;inset:-14px;z-index:-2;background:url('bilder/schauraum-hintergrund.webp') center/cover;filter:blur(7px)}
.tn-ig-karte--foto::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,40,64,.78),rgba(0,28,46,.92))}
.tn-ig-karte--glas{background:radial-gradient(300px 260px at 100% 0%,rgba(74,156,192,.3),transparent 65%),linear-gradient(160deg,#16203a,#0d1526);color:#eef2f8}
.tn-ig-karte--petrol{background:linear-gradient(135deg,#003856,#0e5a7a);color:#fff}
.tn-ig-karte--letzte{background:radial-gradient(300px 240px at 50% 0%,rgba(212,170,60,.3),transparent 65%),linear-gradient(180deg,#fbf6e9,#f1e4c4);color:#2a1f05}
.tn-ig-pfeil{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid rgba(0,0,0,.15);background:rgba(255,255,255,.9);color:#1b1d21;display:grid;place-items:center;cursor:pointer;z-index:2}
.tn-ig-pfeil.links{left:8px}.tn-ig-pfeil.rechts{right:8px}
.tn-ig-pfeil svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tn-ig-pfeil[disabled]{opacity:0;pointer-events:none}
.tn-ig-pfeil:focus-visible{outline:3px solid var(--tn-blue);outline-offset:2px}
.tn-ig-fuss{display:flex;align-items:center;gap:16px;padding:8px 16px 4px}
.tn-ig-fuss svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.tn-ig-fuss .rechts{margin-left:auto}
.tn-ig-punkte{display:flex;gap:4px;margin-left:auto}
.tn-ig-punkte i{width:6px;height:6px;border-radius:50%;background:var(--mut);opacity:.45;transition:all .25s}
.tn-ig-punkte i.an{background:var(--tn-blue);opacity:1}
.tn-ig-erkl{padding:8px 16px 16px;min-height:104px;transition:opacity .2s}
.tn-ig-erkl.wechsel{opacity:0}
.tn-ig-erkl b{font-weight:600;color:var(--ink);font-size:.95rem}
.tn-ig-erkl p{margin:4px 0 0;font-size:.9rem;line-height:1.45;color:var(--mut)}
@media (prefers-reduced-motion:reduce){.tn-ig-spur,.tn-ig-erkl{transition:none}}
/* Kachelwand der Themen links neben dem Karussell (Aufbau wie /sl3 „Leitsätze“): dunkle Seite = helle Kacheln, helle Seite = dunkle Kacheln */
.tn-ig-intro{margin-top:56px;max-width:680px}
.tn-ig-intro h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem);line-height:1.2;margin-top:8px}
.tn-ig-intro>p{margin-top:12px;font-size:1.0625rem;max-width:56ch}
.tn-ig-reihe{margin-top:32px}
@media(min-width:960px){.tn-ig-reihe{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}}
.tn-wand{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
@media(max-width:599px){.tn-wand{grid-template-columns:repeat(2,1fr)}}
.tn-wk{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1/1;border-radius:10px;padding:16px 16px 16px;display:flex;flex-direction:column;gap:8px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
@media(max-width:419px){.tn-wk{aspect-ratio:auto;min-height:170px;padding:16px}}
.tn-wk-label{align-self:flex-start;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding-left:8px;border-left:1px solid currentColor;position:relative;padding-bottom:8px}
.tn-wk-label::after{content:'';position:absolute;left:10px;bottom:0;width:22px;height:1px;background:currentColor}
main .tn-wk p{margin:0;font-family:var(--font-display);font-size:clamp(1.02rem,.82rem + .62vw,1.32rem);line-height:1.2;color:inherit;text-wrap:balance}
.tn-wk-sig{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:9.5px;line-height:1.2;flex-wrap:wrap}
.tn-wk-sig b{font-weight:700;letter-spacing:.06em}
.tn-wk-sig i{flex:none;width:22px;height:1px;background:currentColor}
/* helle Kacheln (Grundeinstellung, dunkle Seite) */
.tn-wk--creme{background:radial-gradient(160px 140px at 88% 8%,rgba(240,207,122,.38),transparent 70%),linear-gradient(160deg,#fcf7ec,#f0e4c8);color:#2a2312}
.tn-wk--gold{background:radial-gradient(150px 130px at 12% 0%,rgba(255,255,255,.55),transparent 65%),linear-gradient(150deg,#f3df9f,#e3c374 60%,#d6b04a);color:#1f1804}
.tn-wk--foto,.tn-wk--werk{background:#003856;color:#fff}
.tn-wk--foto::before,.tn-wk--werk::before{content:'';position:absolute;inset:-12px;z-index:-2;background:url('bilder/schauraum-hintergrund.webp') center/cover;filter:blur(6px)}
.tn-wk--werk::before{background-position:12% 50%;filter:blur(5px) saturate(.9)}
.tn-wk--foto::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,40,64,.72),rgba(0,28,46,.9))}
.tn-wk--werk::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,20,34,.7),rgba(10,14,26,.9))}
/* helle Seite: umgekehrt, Kacheln dunkel */
html[data-theme="light"] .tn-wk--creme{background:radial-gradient(160px 140px at 88% 8%,rgba(212,170,60,.3),transparent 70%),linear-gradient(160deg,#16203a,#0d1526);color:#f3dc98}
html[data-theme="light"] .tn-wk--gold{background:radial-gradient(170px 150px at 0% 0%,rgba(212,170,60,.4),transparent 65%),linear-gradient(160deg,#121b30,#0c1424);color:#f3dc98;box-shadow:0 10px 30px rgba(20,40,80,.18),inset 0 1px 0 rgba(240,207,122,.35)}
/* Karussell auf heller Seite: helle Karten */
html[data-theme="light"] .tn-ig{background:#fff}
html[data-theme="light"] .tn-ig-karte--gold{background:radial-gradient(320px 260px at 0% 0%,rgba(212,170,60,.32),transparent 65%),linear-gradient(160deg,#fdf8ec,#f3e6c6);color:#5a3f00}
html[data-theme="light"] .tn-ig-karte--gold p{background:none;color:#4a3300}
html[data-theme="light"] .tn-ig-karte--glas{background:radial-gradient(300px 260px at 100% 0%,rgba(31,106,140,.16),transparent 65%),linear-gradient(160deg,#f5f8fc,#e6eef7);color:#0c1726}
html[data-theme="light"] .tn-ig-karte--petrol{background:linear-gradient(135deg,#dcedf5,#c4e0ec);color:#003856}
html[data-theme="light"] .tn-ig-karte--letzte{background:radial-gradient(300px 240px at 50% 0%,rgba(212,170,60,.3),transparent 65%),linear-gradient(180deg,#16203a,#0d1526);color:#f3dc98}
/* Kachel-Feinschliff: Zeichnung einzeilig, Satz höchstens 3 Zeilen */
.tn-wk{padding:16px 16px 12px}
main .tn-wk p{font-size:clamp(.98rem,.78rem + .55vw,1.16rem)}
.tn-wk-sig{flex-wrap:nowrap;white-space:nowrap;gap:8px;font-size:9px}
.tn-wk-sig b{letter-spacing:.03em}
.tn-wk-sig i{width:14px}
/* Platz besser nutzen (Wolfgang 18.10.): Einleitung oben links, Kachelwand unten bündig mit dem Karussell */
.tn-ig-reihe{margin-top:56px}
@media(min-width:960px){.tn-ig-reihe{align-items:stretch}.tn-ig-links{display:flex;flex-direction:column;justify-content:space-between;gap:32px}}
.tn-ig-links .tn-ig-intro{margin-top:0}
.tn-ig-links{display:grid;gap:24px}
@media(min-width:960px){.tn-ig-links{display:flex}}
/* Schwebende Knöpfe (Hausbaustein 2+3, Quelle seiten/web/teile/fuss.css): Kaffee · Nach oben, weichen Hauptknöpfen aus */
.schweber{position:fixed;right:24px;bottom:24px;z-index:205;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
@media(max-width:560px){.schweber{right:16px;bottom:16px}}
.schweber>*{pointer-events:auto;transition:opacity .2s ease,visibility 0s}
.schweber .totop{position:static;display:none;opacity:1;min-height:48px;background:var(--glass-3);-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);box-shadow:var(--elev)}
.schweber .totop.is-an{display:inline-flex}
.kofi{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border-radius:var(--r-pill);background:linear-gradient(135deg,#003856,#337694);border:1px solid rgba(255,255,255,.4);color:#fff;text-decoration:none;font-size:.875rem;font-weight:600;box-shadow:var(--elev);white-space:nowrap}
.kofi:hover{background:linear-gradient(135deg,#004a70,#2A7FA6)}
.kofi:focus-visible{outline:2px solid var(--tn-gold);outline-offset:2px}
.kofi svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none}
.kofi-text{display:inline-block;max-width:0;overflow:hidden;opacity:0;margin-left:0;transition:max-width .35s ease,opacity .25s ease,margin-left .35s ease}
@media (hover:hover){.kofi:hover .kofi-text{max-width:200px;opacity:1;margin-left:8px}}
.kofi:focus-visible .kofi-text,.kofi.is-open .kofi-text{max-width:200px;opacity:1;margin-left:8px}
@media (max-width:560px){.kofi.is-oben{display:none}}
.schweber.is-weichen>*{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s .2s}
/* ===== Kurze Filme (Zugaben, Hausmuster /sl3): Film lädt erst auf Klick (Fassade), nie beim Seitenaufruf ===== */
.tn-filmchip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 16px 4px 4px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--glass-live);color:var(--ink);font-size:.9375rem;font-weight:600;line-height:1.3;text-decoration:none;transition:border-color .2s ease,transform .2s ease}
.tn-filmchip:hover{border-color:var(--gold);transform:translateY(-1px)}
.tn-filmchip-play{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--tn-teal),var(--btn-end));color:#fff}
.tn-filmchip-play svg,.tn-story-play svg{width:14px;height:14px;fill:currentColor;margin-left:2px}
.tn-filmchip small{font-size:.8125rem;font-weight:500;color:var(--mut);margin-left:4px;white-space:nowrap}
.tn-filmzeile{margin-top:24px}
.tn-wer .tn-filmchip{margin-top:auto;align-self:flex-start}
.tn-wer .tn-filmchip+.tn-weiter{margin-top:0}
.tn-filme{margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.tn-filme h3{font-family:var(--font-display);font-weight:400;font-size:1.35rem;line-height:1.25;margin-top:8px;text-wrap:balance}
.tn-storys{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:16px 24px}
.tn-story{display:flex;flex-direction:column;align-items:center;gap:8px;width:88px;color:var(--ink);font-size:.8125rem;font-weight:500;line-height:1.3;text-align:center;text-decoration:none}
.tn-story-ring{position:relative;display:block;width:72px;height:72px;border-radius:50%;padding:3px;background:conic-gradient(from 210deg,var(--f),var(--tn-gold),var(--f));transition:transform .3s ease}
.tn-story-ring img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--bg1);background:var(--bg1)}
.tn-story-play{position:absolute;right:-4px;bottom:-4px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--tn-teal),var(--btn-end));color:#fff;border:2px solid var(--bg1)}
.tn-story-play svg{width:10px;height:10px;margin-left:1px}
.tn-story:hover .tn-story-ring,.tn-story:focus-visible .tn-story-ring{transform:scale(1.06) rotate(-6deg)}
.tn-story:focus-visible{outline:none}.tn-story:focus-visible .tn-story-ring{outline:3px solid var(--tn-blue);outline-offset:3px}
.tn-filmdialog{border:1px solid var(--line);padding:0;border-radius:var(--r-xl);background:var(--bg1);color:var(--ink);width:calc(100% - 32px);max-width:440px;max-height:calc(100dvh - 32px);box-shadow:var(--elev)}
.tn-filmdialog::backdrop{background:rgba(4,8,18,.66);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.tn-filmdialog[open]{animation:tn-fd-auf .35s cubic-bezier(.2,.8,.2,1)}
@keyframes tn-fd-auf{from{opacity:0;transform:translateY(16px) scale(.96)}}
.tn-fd-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 16px 0 24px}
.tn-fd-titel{font-weight:600;font-size:1.0625rem;line-height:1.3}
.tn-fd-zu{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--glass-live);color:var(--ink);font:inherit;font-size:1.5rem;line-height:1;cursor:pointer}
.tn-fd-inhalt{padding:16px 24px 24px}
.tn-fd-video{display:block;width:100%;max-height:64dvh;aspect-ratio:9/16;object-fit:contain;border-radius:var(--r-md);background:#070b16}
.tn-fd-ki{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:.875rem;color:var(--mut)}
.tn-fd-ki svg{flex:none}
.tn-fd-text{margin-top:8px;font-size:.9375rem}
.tn-fd-text summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--accent-text)}
.tn-fd-text p{color:var(--mut);line-height:1.55;max-width:66ch}
@media (prefers-reduced-motion:reduce){.tn-filmchip,.tn-story-ring{transition:none}.tn-filmdialog[open]{animation:none}}
/* ===== Vorschau beim Zeigen (Hausmuster Startseite .tn-vorschau, hier mit Einblendung): erst der Klick führt zur Seite. Nur mit Maus, am Handy führt Tippen direkt hin.
   display:none bis zum Zeigen: so lädt das Bild erst dann (loading=lazy), Einblendung per @starting-style ===== */
.tn-vorschau{display:none;position:absolute;left:50%;bottom:calc(100% + 8px);z-index:40;width:216px;padding:8px;border-radius:var(--r-md);background:var(--bg1);border:1px solid var(--line);box-shadow:var(--elev);pointer-events:none;
  color:#eef2f8;text-align:left;font-family:var(--font-body);letter-spacing:0;text-transform:none;white-space:normal;
  opacity:1;transform:translate(-50%,0);transform-origin:bottom center;transition:opacity .2s ease .1s,transform .25s cubic-bezier(.2,.8,.2,1) .1s}
html[data-theme="light"] .tn-vorschau{background:#ffffff;color:#0c1726;border-color:rgba(12,30,60,.14)}
.tn-vorschau img{display:block;width:200px;height:96px;object-fit:cover;border-radius:8px}
.tn-vorschau>span{display:block;margin-top:8px;font-size:.8125rem;font-weight:600;line-height:1.35}
.tn-vorschau.tn-v-links{left:0;transform:none;transform-origin:bottom left}
.tn-vorschau.tn-v-rechts{left:auto;right:0;transform:none;transform-origin:bottom right}
@media(hover:hover) and (pointer:fine){
  a:hover>.tn-vorschau,a:focus-visible>.tn-vorschau{display:block}
  @starting-style{a:hover>.tn-vorschau,a:focus-visible>.tn-vorschau{opacity:0;transform:translate(-50%,8px) scale(.94)}
    a:hover>.tn-vorschau.tn-v-links,a:focus-visible>.tn-vorschau.tn-v-links,a:hover>.tn-vorschau.tn-v-rechts,a:focus-visible>.tn-vorschau.tn-v-rechts{transform:translateY(8px) scale(.94)}}}
@media (prefers-reduced-motion:reduce){.tn-vorschau{transition:none}}
.tn-rad-liste a,.tn-erg .tn-weiter{position:relative}
.tn-rad-liste li:hover,.tn-rad-liste li:focus-within,.tn-erg-k:hover,.tn-erg-k:focus-within{z-index:5}
/* Bunte Pillen unter dem Schauraum-Foto: weißer Text auf Petrol, Farbe der Leistung als Rand und Punkt (Kontrast) */
.tn-ueber-links{display:grid;gap:16px;align-self:center}
.tn-pillen{display:flex;flex-wrap:wrap;gap:8px}
.tn-pill{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);border:1px solid color-mix(in srgb,var(--p) 70%,transparent);background:color-mix(in srgb,var(--p) 14%,transparent);color:var(--ink);font-family:var(--font-mono);font-size:12px;letter-spacing:.03em;text-decoration:none;transition:transform .15s ease,background .15s ease}
.tn-pill::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--p)}
.tn-pill:hover,.tn-pill:focus-visible{transform:translateY(-2px);background:color-mix(in srgb,var(--p) 26%,transparent);z-index:5}
/* Eigene App neben dem Namen: klein, beim Zeigen groß */
.tn-name-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:32px}
.tn-app{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 16px 4px 4px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--glass-live);color:var(--ink);font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-decoration:none}
.tn-app>img{width:28px;height:28px;border-radius:8px}
.tn-app-pop{display:none;position:absolute;left:0;bottom:calc(100% + 8px);z-index:40;justify-items:center;gap:8px;width:208px;padding:16px;border-radius:var(--r-lg);background:var(--bg1);border:1px solid var(--line);box-shadow:var(--elev);text-align:center;font-family:var(--font-body);letter-spacing:0;color:#eef2f8;
  transform-origin:bottom left;transition:opacity .2s ease .1s,transform .3s cubic-bezier(.2,.8,.2,1) .1s;pointer-events:none}
html[data-theme="light"] .tn-app-pop{background:#ffffff;color:#0c1726;border-color:rgba(12,30,60,.14)}
.tn-app-pop img{width:96px;height:96px;border-radius:22px;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.tn-app-pop b{font-size:1rem}.tn-app-pop span{font-size:.8125rem;line-height:1.35}
@media(hover:hover) and (pointer:fine){.tn-app:hover .tn-app-pop,.tn-app:focus-visible .tn-app-pop{display:grid}
  @starting-style{.tn-app:hover .tn-app-pop,.tn-app:focus-visible .tn-app-pop{opacity:0;transform:translateY(8px) scale(.6)}}}
@media (prefers-reduced-motion:reduce){.tn-app-pop,.tn-pill{transition:none}}
/* Abschluss: rechts eine kleinere Karte mit dem Video aus „Kontakt“ der Startseite */
.tn-los{display:grid;gap:32px;align-items:center}
@media(min-width:900px){.tn-los{grid-template-columns:minmax(0,1fr) 360px;gap:48px}}
.tn-vidkarte{margin:0;padding:8px;border-radius:var(--r-xl);max-width:400px;width:100%;justify-self:center}
.tn-vid{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:var(--r-md);overflow:hidden;cursor:pointer;background:#070b16}
.tn-vid img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.tn-vid:hover img{transform:scale(1.04)}
.tn-vid-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--tn-teal),var(--btn-end));color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.tn-vid-play svg{width:22px;height:22px;fill:currentColor;margin-left:3px}
.tn-vidkarte iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-md)}
.tn-vidkarte figcaption{display:grid;gap:4px;padding:12px 8px 4px}
.tn-vidkarte figcaption b{font-weight:600;font-size:.9375rem;color:var(--ink)}
.tn-vidkarte figcaption span{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
/* Ergebnisse: Petrol-Band ohne Foto, 6 Karten (3 + 3, 2 + 2 + 2, 1), große Zahl, Satz, Rechnung */
.tn-band--erg::after{background:radial-gradient(800px 380px at 88% 0%,rgba(74,156,192,.28),transparent 62%),radial-gradient(700px 360px at 8% 100%,rgba(240,207,122,.12),transparent 60%),linear-gradient(180deg,#003856,#00283f)}
.tn-erg{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:600px){.tn-erg{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.tn-erg{grid-template-columns:repeat(3,1fr)}}
.tn-erg-k{display:flex;flex-direction:column;gap:8px;padding:24px}
.tn-erg-zahl{font-family:var(--font-display);font-size:clamp(2rem,1.5rem + 1.6vw,2.6rem);line-height:1.08;color:var(--zahl);white-space:nowrap;margin-top:8px}
.tn-erg-satz{color:var(--ink);line-height:1.5}
.tn-erg-rech{margin-top:auto;padding-top:12px;border-top:1px dashed var(--line);font-family:var(--font-mono);font-size:12px;letter-spacing:.03em;color:var(--mut)}
.tn-erg .tn-weiter{align-self:flex-start}
.tn-erg-summe{margin-top:24px;padding:24px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.tn-erg-summe>p{flex:1 1 280px;color:var(--ink)}
.tn-erg-summe .tn-erg-summe-zahl{flex:0 1 auto;font-family:var(--font-display);font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.15;color:var(--zahl)}
/* Film-Kreise: 6 → 3 + 3, ab 720 px 6 in einer Zeile (Nachtrag Kartengruppen) */
.tn-storys{display:grid;grid-template-columns:repeat(3,minmax(0,88px));gap:16px}
@media(min-width:720px){.tn-storys{grid-template-columns:repeat(6,88px);gap:16px 24px}}
.tn-story{width:auto}
/* Kleine Film-Knöpfe in den Ergebnis-Karten: jede Karte = ein Film, oben rechts, dezent */
.tn-filmmini{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 12px 4px 4px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--glass-live);color:var(--ink);text-decoration:none;transition:border-color .2s ease,transform .2s ease}
.tn-filmmini:hover{border-color:var(--gold);transform:translateY(-1px)}
.tn-filmmini .tn-filmchip-play{width:32px;height:32px}
.tn-filmmini .tn-filmchip-play svg{width:12px;height:12px}
.tn-filmmini small{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--mut);white-space:nowrap}
.tn-erg-k .eyebrow{padding-right:104px;min-height:32px;display:flex;align-items:center}
@media (prefers-reduced-motion:reduce){.tn-filmmini{transition:none}}
.tn-erg-k>.tn-filmmini{position:absolute}
/* Kachel-Signatur: passt die ganze Zeile nicht in die Kachel, bleibt nur der Name (Kachel misst sich selbst) */
.tn-wk{container-type:inline-size}
@container (max-width:180px){.tn-wk-sig i,.tn-wk-marke{display:none}}
/* ===== Kopf- und Fußzeile im Hausmuster teddynews.at (seiten/web/teile/rahmen.css + fuss.css), gebaut von ../web2_rahmen.py ===== */
.brand-logo{display:block;width:auto;height:32px}
.nav-tools{display:flex;gap:8px;align-items:center}
.nav-x{padding-left:16px;border-left:1px solid var(--line)}
.has-dd{position:relative;display:inline-flex;align-items:center}
.nav-links .dd-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border:1px solid var(--line);border-radius:var(--r-pill);background:transparent;color:var(--ink);cursor:pointer;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;line-height:1;white-space:nowrap}
.nav-links .dd-btn:hover,.nav-links .dd-btn:focus-visible,.has-dd.open .dd-btn{border-color:var(--gold);color:var(--gold);outline:none}
.dd-btn::after{content:'\25BE';font-size:10px;opacity:.75;transition:transform .18s}
.has-dd.open .dd-btn::after{transform:rotate(180deg)}
.dd-menu{position:fixed;display:none;flex-direction:column;gap:2px;min-width:232px;list-style:none;margin:0;background:var(--bg1);border:1px solid var(--line);border-radius:var(--r-md);padding:8px;box-shadow:var(--elev);z-index:400;max-height:calc(100vh - 96px);overflow-y:auto;overscroll-behavior:contain}
.dd-menu.open{display:flex}
.dd-grp{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);padding:8px 16px 4px;margin:0}
.dd-menu a{display:flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:var(--r-sm);white-space:nowrap;text-decoration:none;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
.dd-menu a::after{display:none}
.dd-menu a:hover,.dd-menu a:focus-visible,.dd-menu a[aria-current="page"]{background:var(--glass-2);color:var(--gold);outline:none}
.nav-prog{position:absolute;left:24px;right:24px;bottom:0;height:2px;border-radius:2px;overflow:hidden;pointer-events:none}
.tn-progress{height:100%;width:0;background:linear-gradient(90deg,var(--tn-blue),var(--tn-gold))}
@media(max-width:1180px) and (min-width:900px){.nav-links{gap:8px}.nav-links a{font-size:10px}}
@media(max-width:899px){
  nav.lg.offen .nav-links{grid-template-columns:1fr 1fr;gap:4px 8px;width:min(304px,calc(100vw - 16px))}
  nav.lg.offen .nav-x{grid-column:1/-1;display:flex;flex-direction:column;align-items:stretch;margin:4px 0 0;padding:8px 0 0;border-left:0;border-top:1px solid var(--line)}
  nav.lg.offen .nav-x .dd-btn{width:100%;justify-content:space-between}
  .dd-menu.im-menue{position:static;min-width:0;max-height:40vh;margin-top:8px;padding:0;border:0;box-shadow:none;background:transparent}
  nav.lg.offen .nav-links:has(.has-dd.open)>li:not(.has-dd){display:none}
  nav.lg.offen .nav-links:has(.has-dd.open) .nav-x{margin-top:0;padding-top:0;border-top:0}
  .dd-menu a{padding:8px 16px}}
@media(max-width:400px){nav.lg{padding-left:8px;padding-right:8px}.nav-tools{gap:4px}.nav-tools .tgl{min-width:44px;padding:0 8px}}
footer.tn-fuss{padding:48px 24px 144px;max-width:var(--max);margin:48px auto 0;color:var(--mut);font-size:13px;border-top:1px solid var(--line);text-align:left}
.tn-fuss .foot-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-bottom:24px}
@media(min-width:700px){.tn-fuss .foot-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.tn-fuss .foot-grid{grid-template-columns:1.4fr repeat(4,1fr)}}
.tn-fuss p{margin-top:16px;max-width:36ch}
.tn-fuss h3{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink);margin:0 0 16px;font-weight:400}
.tn-fuss a{color:var(--mut);text-decoration:none;display:flex;align-items:center;min-height:32px}
.tn-fuss a:hover{color:var(--gold)}
.tn-fuss .brand{color:var(--ink);min-height:44px}
.tn-fuss-bild{display:block;width:100%;max-width:300px;height:auto;margin-top:16px}
.tn-fuss .foot-legal{padding-top:24px;border-top:1px solid var(--line);font-size:12px;display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}
.tn-fuss .foot-legal-links{display:flex;flex-wrap:wrap;gap:0 16px}
.tn-fuss .foot-legal-links a{min-height:44px}
.tn-fuss details.fsec>summary{list-style:none;cursor:default;display:block;padding:0}
.tn-fuss details.fsec>summary::-webkit-details-marker{display:none}
@media(max-width:699px){.tn-fuss .foot-grid{gap:0}
  .tn-fuss details.fsec{border-top:1px solid var(--line)}
  .tn-fuss details.fsec:last-child{border-bottom:1px solid var(--line)}
  .tn-fuss details.fsec>summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:48px}
  .tn-fuss details.fsec>summary h3{margin:0}
  .tn-fuss details.fsec>summary::after{content:'+';font-family:var(--font-mono);font-size:16px;color:var(--gold)}
  .tn-fuss details.fsec[open]>summary::after{content:'\2013'}
  .tn-fuss details.fsec a{min-height:44px}
  .tn-fuss details.fsec[open]{padding-bottom:8px}
  .tn-fuss>.foot-grid>div:first-child{padding-bottom:24px}}
@media (pointer:coarse){.tn-fuss a{min-height:44px}}
.tn-wx{margin-top:16px;padding:16px;display:grid;gap:8px;justify-items:start;width:fit-content;max-width:100%}
.tn-wx .tn-wx-label{margin:0;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink)}
.tn-wx .tn-wx-kachel{background:#fff;padding:16px;border-radius:var(--r-md);border:1px solid var(--line);max-width:100%}
.tn-wx .tn-wx-kachel img{display:block;width:128px;max-width:100%;height:auto;aspect-ratio:1/1}
.tn-wx figcaption p{margin:0;font-size:13px;max-width:28ch;color:var(--mut)}
.dd-menu.im-menue{overflow-x:hidden}.dd-menu.im-menue a{white-space:normal;line-height:1.35}
/* Sprungmarken der bisherigen Startseite (/#angebote, /#produkte, /#kontakt, /#branchen) */
.tn-anker{display:block;height:0;overflow:hidden}
/* Merch-Shop mit echtem Beispiel (Teddynews-Shop): 4 Karten, 2 + 2, ab 1024 px in einer Zeile */
.tn-shop{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:480px){.tn-shop{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.tn-shop{grid-template-columns:repeat(4,1fr)}}
.tn-shopk{padding:8px;overflow:hidden}
.tn-shopk a{display:flex;flex-direction:column;gap:8px;height:100%;color:var(--ink);text-decoration:none}
.tn-shopk img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-md);transition:transform .3s ease}
.tn-shopk a:hover img{transform:scale(1.03)}
.tn-shopk .eyebrow{padding:8px 8px 0}
.tn-shopk b{padding:0 8px;font-size:1.0625rem;line-height:1.3}
.tn-shopk-art{padding:0 8px;font-size:.875rem;color:var(--mut)}
.tn-shopk-preis{margin-top:auto;padding:8px;font-family:var(--font-mono);font-size:13px;color:var(--ink)}
.tn-shopk-preis small{color:var(--mut);font-size:11px}
#shop .tn-cta{margin-top:32px}
@media (prefers-reduced-motion:reduce){.tn-shopk img{transition:none}}
/* Direkt buchen (Stripe, Fenster „Silvia Lindner“ 18.10.2026): zweiter Weg unter dem Probe-Knopf */
.tn-pack .tn-direkt{margin-top:8px;font-weight:700}
/* Shop-Pakete für Betriebe (Wolfgang 18.10.2026: Firmen und Vereine 290/690 €, YouTuber 49/149 €) */
.tn-shop-pakete{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.tn-shop-pakete{grid-template-columns:1fr 1fr}}
.tn-shop-pakete li{display:flex;flex-direction:column;gap:8px;padding:16px 24px}
.tn-shop-pakete b{font-family:var(--font-display);font-weight:400;font-size:1.6rem;color:var(--zahl)}
.tn-shop-pakete b small{font-family:var(--font-body);font-size:.875rem;color:var(--mut)}
.tn-shop-pakete span:not(.eyebrow){color:var(--ink);line-height:1.5}
.tn-shop-hinweis{margin:0 0 24px;color:var(--mut);font-size:.9375rem}
/* Shop-Pakete für Betriebe (Wolfgang 18.10.2026: Firmen und Vereine 290/690 €, YouTuber 49/149 €) */
.tn-shop-pakete{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.tn-shop-pakete{grid-template-columns:1fr 1fr}}
.tn-shop-pakete li{display:flex;flex-direction:column;gap:8px;padding:16px 24px}
.tn-shop-pakete b{font-family:var(--font-display);font-weight:400;font-size:1.6rem;color:var(--zahl)}
.tn-shop-pakete b small{font-family:var(--font-body);font-size:.875rem;color:var(--mut)}
.tn-shop-pakete span:not(.eyebrow){color:var(--ink);line-height:1.5}
.tn-shop-hinweis{margin:0 0 24px;color:var(--mut);font-size:.9375rem}