/* © 2026 Wolfgang Lindner · Teddyshop — gemeinsames Aussehen aller Werkzeuge.
   Werte aus der Teddynews-Markenrichtlinie V2 (Teddynews/branding/Teddynews_TOKENS.md, Stand 07.10.2026). */
@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}

:root{
  --bg0:#070b16; --bg1:#0b1326; --ink:#eef2f8; --mut:#9fb0c6;
  --blue:#4a84f0; --teal:#13b48f; --gold:#e6b755; --violet:#9276f0; --beige:#c8a87c;
  --tn-teal:#003856; --tn-blue:#4A9CC0; --tn-gold:#D4AA3C; --tn-beige:#C8A87C; --btn-end:#337694;
  --ok:#28c878; --warn:#e6b755; --error:#f87171;
  --glass-2:rgba(255,255,255,.06); --glass-3:rgba(255,255,255,.10); --glass-4:rgba(255,255,255,.16);
  --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:1100px;
}
html[data-theme="light"]{
  --bg0:#f5f8fc; --bg1:#e8eef7; --ink:#0c1726; --mut:#516074;
  --glass-2:rgba(12,30,60,.045); --glass-3:rgba(12,30,60,.07); --glass-4:rgba(12,30,60,.11);
  --line:rgba(12,30,60,.14); --hl-top:rgba(255,255,255,.75); --hl-bottom:rgba(12,30,60,.04); --sheen:rgba(255,255,255,.55);
  --elev:0 14px 36px rgba(20,40,80,.12);
  --gold:#825500; --teal:#0b6851; --blue:#2253b6; --violet:#5c43bd; --beige:#75582c; --tn-blue:#1F6A8C;
  --ok:#177a45; --warn:#8a5a00; --error:#b3261e;
}
.badge{--blue:#709ef3; --teal:#21b896; --violet:#a68ff3}
html[data-theme="light"] .badge{--beige:#75582c; --blue:#2253b6; --teal:#0b6851; --gold:#825500; --violet:#5c43bd}
@media (prefers-contrast:more){:root{--line:rgba(255,255,255,.42)} html[data-theme="light"]{--line:rgba(12,30,60,.5)}}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:104px}
body{font-family:var(--font-body);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;
  background:radial-gradient(1200px 800px at 80% -10%,rgba(59,123,240,.20),transparent 60%),
    radial-gradient(1000px 760px at 8% 8%,rgba(19,180,143,.16),transparent 55%),
    radial-gradient(900px 700px at 60% 120%,rgba(138,108,240,.14),transparent 60%),
    linear-gradient(180deg,var(--bg0),var(--bg1));background-attachment:fixed}
img{max-width:100%}
[hidden]{display:none!important}
a{color:var(--tn-blue)}

/* Glas */
.lg{position:relative;background:var(--glass-2);border:1px solid var(--line);border-radius:var(--r-lg);
  -webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);
  box-shadow:var(--elev),inset 0 1px 0 var(--hl-top),inset 0 -1px 0 var(--hl-bottom)}
.lg::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,var(--sheen),transparent 42%);mix-blend-mode:screen}
main .lg>*{position:relative;z-index:1}
@media (prefers-reduced-transparency:reduce){.lg{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg1)}.lg::after{display:none}}
@media (prefers-contrast:more){.lg{border-color:var(--ink)}}

/* Kopfzeile: Bereich mit mehreren Seiten (Richtlinie, Nachtrag 01.10.2026) */
.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:16px;top:16px}
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 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);flex:none}
.brand img{width:36px;height:42px;object-fit:contain}
.nav-links{display:flex;gap:16px;list-style:none;flex:1;justify-content:flex-end;flex-wrap:wrap}
.nav-links a{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;border-bottom:2px solid transparent}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--gold)}
.nav-links a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}
.tgl{cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:var(--r-pill);min-height:44px;min-width:48px;padding:4px 16px;font:inherit;font-size:13px;font-weight:600}
.tgl:hover{border-color:var(--gold)}
.menu-btn{display:none}
.menu-btn svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;stroke-linecap:round;fill: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:860px){
  nav.lg{top:0;margin-top:0;border-radius:0;justify-content:space-between}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;padding:0;min-width:44px}
  .nav-links{display:none}
  nav.lg.offen .nav-links{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;position:absolute;top:calc(100% + 8px);right:8px;width:min(320px,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);border-bottom:0}
  nav.lg.offen .nav-links a[aria-current="page"]{background:var(--glass-2);color:var(--gold);border-radius:var(--r-sm)}
}

/* Seitenstruktur */
main{display:block}
section{padding:48px 24px;max-width:var(--max);margin:0 auto}
@media(max-width:560px){section{padding:32px 16px}}
.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:22px;height:2px;background:var(--gold);flex:none}
h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,5vw,3.2rem);line-height:1.08;margin-bottom:16px;letter-spacing:-.01em;text-wrap:balance}
h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.4rem,3vw,2rem);line-height:1.16;margin-bottom:8px;text-wrap:balance}
h3{font-weight:600;font-size:1.05rem;line-height:1.3;margin-bottom:8px;text-wrap:balance}
p,li{text-wrap:pretty}
p{max-width:68ch;color:var(--mut)}
.lead{font-size:1.12rem;max-width:62ch}
.tn-pfad{font-size:13px;color:var(--mut);margin:0 0 8px}
.tn-pfad ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}
.tn-pfad li+li::before{content:'›';margin-right:8px}
.tn-pfad a{display:inline-flex;align-items:center;min-height:44px;color:var(--mut);text-decoration:none}
.tn-pfad a:hover{color:var(--gold)}
.tn-pfad [aria-current]{color:var(--ink)}
.divider{height:1px;max-width:var(--max);margin:0 auto;background:var(--line)}
.tn-zurueck{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;margin:0 0 8px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:.9rem;font-weight:600;color:var(--ink);text-decoration:none}
.reihe .tn-zurueck{margin:0}
.tn-zurueck:hover,.tn-zurueck:focus-visible{border-color:var(--gold)}
.pillrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.badge{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:11px;padding:4px 12px;border-radius:var(--r-pill);letter-spacing:.04em;color:var(--c,var(--teal));background:color-mix(in srgb,var(--c,var(--teal)) 16%,transparent)}

/* Knöpfe */
.btn{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;
  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)}
.btn:hover{filter:brightness(1.07)}
.btn:focus-visible,.btn2:focus-visible{outline:2px solid var(--tn-gold);outline-offset:2px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn2{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn2:hover{border-color:var(--gold)}
.reihe{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:24px}
.risk{font-size:.875rem;color:var(--mut);margin-top:16px;display:flex;align-items:center;gap:8px;max-width:none}
.risk::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}

/* Karten-Raster (Kartenregel: 4 → 2+2 → 1, 3 in einer Zeile → 1) */
.raster{display:grid;gap:16px;margin-top:24px;grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
@media(max-width:1023px){.raster.n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1023px){.raster.n5{grid-template-columns:repeat(6,minmax(0,1fr))}.raster.n5>*{grid-column:span 2}.raster.n5>:nth-child(n+4){grid-column:span 3}}
@media(max-width:699px){.raster{grid-template-columns:minmax(0,1fr)!important}.raster>*{grid-column:auto!important}}
.karte{padding:24px;display:flex;flex-direction:column;gap:8px;border-top:3px solid var(--accent,var(--tn-blue))}
.karte p{margin:0}
.karte{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
h2.h3{font-family:var(--font-body);font-weight:600;font-size:1.05rem;line-height:1.3;margin-bottom:8px}
.eyebrow{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--gold)}
.karte .btn2,.karte .btn{margin-top:auto;align-self:flex-start}

/* Werkzeug: Eingabe links, Vorschau rechts; am Handy untereinander */
.werkzeug{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:24px;align-items:start;margin-top:24px}
@media(max-width:860px){.werkzeug{grid-template-columns:minmax(0,1fr)}}
.panel{padding:24px}
.vorschau{padding:24px;min-height:320px;display:flex;flex-direction:column;gap:16px}
.vorschau canvas,.vorschau img.v{display:block;max-width:100%;max-height:68vh;width:auto;height:auto;margin:0 auto;border-radius:var(--r-md);background:repeating-conic-gradient(var(--glass-3) 0 25%,transparent 0 50%) 50%/16px 16px}
fieldset{border:0;margin:0 0 16px}
legend,.feld>label,.feld>span.l{display:block;font-weight:600;font-size:.94rem;color:var(--ink);margin-bottom:8px}
.feld{margin-bottom:16px}
.feld small,.hinweis{display:block;font-size:13px;color:var(--mut);margin-top:4px}
input[type=text],input[type=url],input[type=email],input[type=number],select,textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--glass-2);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 16px;min-height:48px;width:100%}
textarea{min-height:96px;resize:vertical}
select option{background:var(--bg1);color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--mut);opacity:1}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--tn-blue);outline-offset:2px}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.datei{display:flex;flex-direction:column;gap:8px}
.datei input[type=file]{font:inherit;font-size:.9rem;color:var(--mut);min-height:44px}
.datei input[type=file]::file-selector-button{font:inherit;font-weight:600;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 16px;min-height:44px;margin-right:8px;cursor:pointer}
.wahl{display:flex;flex-wrap:wrap;gap:8px}
.wahl label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 16px;border:1px solid var(--line);border-radius:var(--r-pill);cursor:pointer;font-size:.94rem}
.wahl input{accent-color:var(--tn-blue)}
.wahl label:has(input:checked){border-color:var(--gold);background:var(--glass-2)}
.status{font-size:.9rem;color:var(--mut);min-height:24px}
.status.ok{color:var(--ok)}
.status.fehler{color:var(--error)}
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px}
.kacheln figure{margin:0;display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center}
.kacheln canvas,.kacheln img{max-height:160px;width:auto;border-radius:var(--r-sm)}
.kacheln figcaption{font-size:12px;color:var(--mut);line-height:1.4}
.tabelle{width:100%;border-collapse:collapse;font-size:.94rem;margin-top:16px}
.tabelle th,.tabelle td{text-align:left;vertical-align:top;padding:12px 8px;border-bottom:1px solid var(--line)}
.tabelle th{font-weight:600;color:var(--ink)}
.tabelle td{color:var(--mut)}
.tabelle-huelle{overflow-x:auto}
/* Fließtext-Seiten (Datenschutz): vertikaler Rhythmus auf der 8-px-Skala */
.fliesstext h2{margin-top:48px}
.fliesstext p+p{margin-top:16px}
.fliesstext h2+p,.fliesstext h2+.tabelle{margin-top:16px}
.fliesstext .tabelle{max-width:68ch}
.privat{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--mut);margin-top:16px}
.privat svg{width:16px;height:16px;stroke:var(--ok);fill:none;stroke-width:2;flex:none}

/* Fußzeile: kompakt, Rechtslinks direkt (ECG § 5, DSGVO Art. 12) */
footer{max-width:var(--max);margin:48px auto 0;padding:32px 24px 144px;border-top:1px solid var(--line);color:var(--mut);font-size:13px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:0 16px}
footer a{color:var(--mut);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
footer a:hover{color:var(--gold)}

/* Schwebende Knöpfe */
.schweber{position:fixed;right:24px;bottom:24px;z-index:205;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.totop{width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--glass-3);color:var(--ink);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--elev)}
.totop[data-an="1"]{opacity:1;pointer-events:auto}
.totop svg,.kofi svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
.kofi{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);text-decoration:none;font-size:14px;background:linear-gradient(135deg,#003856,#1F6A8C);color:#fff;border:1px solid rgba(255,255,255,.22);box-shadow:var(--elev)}
.kofi svg{stroke:#fff;width:18px;height:18px;stroke-width:1.8}
@media(max-width:600px){.kofi-text{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
@media print{nav.lg,footer,.schweber,.nicht-drucken{display:none!important} body{background:#fff}}