/* WebSeo – Designbasis: Schrift, Farben (Variablen), Buttons, Hilfsklassen. Auf webseo.de bereits als /assets/css/style.css + fonts.css vorhanden. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-stretch:62% 125%;font-display:swap;src:url("../fonts/archivo-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-stretch:62% 125%;font-display:swap;src:url("../fonts/archivo-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* WebSeo GmbH – Designsystem (Modernist-Basis). 0px Radius, keine Schatten, 2px-Linien, Rot als Signal. */
:root{--bg:#f3f2f2;--surface:#eae9e9;--text:#201e1d;--accent:#ec3013;--n100:#f8f4f4;--n200:#eae7e7;--n300:#d7d3d3;--n400:#bab6b6;--n500:#9b9797;--n600:#7d7979;--n700:#605d5d;--n800:#444141;--n900:#2d2b2b;--a100:#fff2ef;--a300:#ffc4b8;--a400:#ff9783;--a500:#ff563c;--a600:#dd2b0f;--a700:#ae1800;--font:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;--pad:clamp(20px,5vw,72px);--max:1296px;--ease:cubic-bezier(.2,.8,.2,1)}
[data-theme="dark"]{--bg:#201e1d;--surface:#2d2b2b;--text:#f3f2f2;--n100:#2d2b2b;--n200:#2d2b2b;--n300:#444141;--n400:#605d5d;--n500:#7d7979;--n600:#9b9797;--n700:#bab6b6;--n800:#d7d3d3;--n900:#f8f4f4;--a400:#ae1800;--a500:#dd2b0f;--a700:#ff9783}
.ink{--bg:#f3f2f2;--text:#201e1d;--surface:#eae9e9;--n100:#f8f4f4;--n200:#eae7e7;--n300:#d7d3d3;--n400:#bab6b6;--n500:#9b9797;--n600:#7d7979;--n700:#605d5d;--n800:#444141;--n900:#2d2b2b;--a400:#ff9783;--a500:#ff563c;--a700:#ae1800;background:var(--text);color:var(--bg)}
[data-theme="dark"] .ink{--text:#141312;--a700:#ae1800}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.6;text-wrap:pretty;transition:background .3s,color .3s}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:not(.btn):hover{color:var(--a700)}
.ink a:not(.btn):hover{color:var(--a400)}
::selection{background:var(--a300);color:#201e1d}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--font);font-weight:800;margin:0;text-wrap:balance}
p{margin:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:12px 16px;z-index:100}.skip:focus{left:8px;top:8px}
.wrap{max-width:var(--max);margin:0 auto}
.wide{max-width:1440px;margin:0 auto}
.sec{padding:clamp(80px,9vw,136px) var(--pad)}
.sec-s{padding:clamp(48px,6vw,96px) var(--pad)}
.rule-t{border-top:2px solid var(--text)}.rule-b{border-bottom:2px solid var(--text)}
.kicker{margin:0 0 24px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--a700);line-height:1.4}
.ink .kicker{color:var(--a400)}
.label{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--n800);line-height:1.4}
.ink .label{color:var(--n400)}
.display{font-size:clamp(52px,10.4vw,184px);line-height:.86;letter-spacing:-.04em;margin-left:-.05em}
.h1{font-size:clamp(44px,6.4vw,104px);line-height:.94;letter-spacing:-.045em;margin-left:-.05em}
.h1-m{font-size:clamp(36px,4.8vw,76px);line-height:.98;letter-spacing:-.04em;margin-left:-.04em}
.h1-doc{font-size:clamp(40px,5.6vw,92px);line-height:.96;letter-spacing:-.045em;margin-left:-.05em;max-width:18ch}
.h2{font-size:clamp(34px,4.4vw,64px);line-height:1.02;letter-spacing:-.035em}
.h3{font-size:clamp(24px,2.4vw,32px);line-height:1.08;letter-spacing:-.03em}
.kin{font-stretch:100%;transition:font-stretch .5s var(--ease)}
.dot{color:var(--accent)}
.lead{font-size:clamp(18px,1.4vw,21px);line-height:1.55;max-width:46ch;color:var(--n800)}
.ink .lead{color:var(--n300)}
.muted{color:var(--n800)}.ink .muted{color:var(--n300)}
.sq{display:inline-block;width:14px;height:14px;background:var(--accent);flex:none}
.sq-s{width:8px;height:8px}.sq-m{width:10px;height:10px}.sq-l{width:16px;height:16px}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:48px clamp(40px,6vw,112px);align-items:end}
.split.top{align-items:start}.split.center{align-items:center}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.stack{display:grid;gap:16px}
/* Buttons: Text links, Pfeil rechts, Hover wechselt nur Fläche – Kontrast bleibt */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;padding:16px 20px;font:800 15px/1.2 var(--font);border:2px solid transparent;border-radius:0;cursor:pointer;text-align:left;transition:background .16s,color .16s,border-color .16s;background:transparent;color:var(--text)}
.btn svg{width:16px;height:16px;flex:none}
.btn-m{padding:12px 16px;font-size:14px;gap:28px}
.btn-s{padding:8px 12px;font-size:13px;gap:10px}
.btn-primary{background:var(--accent);color:#f3f2f2;border-color:var(--accent)}
.btn-primary:hover{background:#ae1800;border-color:#ae1800;color:#f3f2f2}
.btn-line{border-color:var(--text);color:var(--text)}
.btn-line:hover{background:var(--text);color:var(--bg)}
.ink .btn-line{border-color:var(--bg);color:var(--bg)}
.ink .btn-line:hover{background:var(--bg);color:var(--text)}
.btn-dark{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn-dark:hover{background:var(--bg);color:var(--text);border-color:var(--bg)}
.on-red .btn-dark{background:#201e1d;color:#f3f2f2;border-color:#201e1d}
.on-red .btn-dark:hover{background:#f3f2f2;color:#201e1d;border-color:#f3f2f2}
.btn-icon{width:44px;height:44px;padding:0;justify-content:center;gap:0}
.chip{padding:10px 14px;font-size:14px;gap:0;border-color:var(--text)}
.chip[aria-pressed="true"]{background:var(--text);color:var(--bg)}
.chip:hover{background:var(--text);color:var(--bg)}
/* Header */
.site-header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:2px solid var(--text);transition:background .3s}
.hdr{display:flex;align-items:center;gap:12px 32px;padding:16px var(--pad)}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;letter-spacing:-.03em;margin-right:auto}
.nav{display:flex;gap:28px;font-size:15px;font-weight:600}
.nav a{padding:6px 0;border-bottom:2px solid transparent}
.nav a[aria-current="page"]{border-bottom-color:var(--accent)}
.burger{display:none}
@media (max-width:900px){.nav,.hdr .btn-primary{display:none}.burger{display:inline-flex}.menu-open .nav{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:2px solid var(--text);padding:16px var(--pad) 24px;gap:4px;font-size:22px;font-weight:800}.menu-open .nav a{padding:10px 0}.menu-open .nav .btn-primary{display:inline-flex;margin-top:12px}}
.nav .btn-primary{display:none}
/* Raster */
.cells{display:grid;gap:2px;background:var(--text)}
.cells.bx{border:2px solid var(--text)}
.c-220{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.c-260{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.c-280{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.c-300{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.c-340{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.cell{background:var(--bg);color:var(--text);padding:28px;display:flex;flex-direction:column;gap:14px;transition:background .16s,color .16s;min-width:0}
a.cell:hover{background:var(--surface);color:var(--text)}
a.cell.hot:hover,.cell.red{background:var(--accent);color:#f3f2f2}
a.cell.red:hover{background:#ae1800;color:#f3f2f2}
.cell .t{font-weight:800;font-size:clamp(22px,2vw,28px);letter-spacing:-.025em;line-height:1.08}
.cell .d{font-size:15.5px;line-height:1.55;color:var(--n800)}
a.cell.hot:hover .d,.cell.red .d,a.cell.hot:hover .label{color:inherit}
.cell .n{font-size:14px;font-weight:600;color:var(--a700);font-feature-settings:"tnum" 1}
.mt-auto{margin-top:auto}
.big-n{font-weight:800;font-size:clamp(64px,6vw,96px);letter-spacing:-.05em;line-height:.85;font-feature-settings:"tnum" 1}
.fact{background:var(--bg);padding:32px clamp(20px,2.5vw,36px)}
.fact b{display:block;font-weight:800;font-size:56px;letter-spacing:-.045em;line-height:1;font-feature-settings:"tnum" 1}
.fact span{display:block;margin-top:14px}
.gfx{background:var(--surface);aspect-ratio:8/5;width:100%}
.gfx svg{width:100%;height:100%}
.framed{border:2px solid var(--text)}
/* Hero */
.hero{padding:clamp(56px,8vw,128px) var(--pad) clamp(56px,6vw,96px);overflow:hidden}
.page-hero{padding:clamp(40px,5vw,72px) var(--pad) clamp(48px,5vw,80px)}
nav[aria-label="Brotkrumen"]{margin-bottom:clamp(32px,4vw,56px)}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;font-size:14px;color:var(--n800);margin:0;padding:0;list-style:none}
.crumbs li+li::before{content:"/";margin-right:10px}
.crumbs a{font-weight:600}
/* Live-Check */
.check{border:2px solid var(--n600);background:var(--n900);padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:20px;color:var(--bg)}
.check form{display:flex;flex-wrap:wrap}
.check input{flex:1 1 200px;min-width:0;min-height:60px;padding:0 16px;font:400 18px var(--font);background:transparent;color:var(--bg);border:2px solid var(--n600);border-radius:0;caret-color:var(--accent)}
.check input::placeholder{color:var(--n500)}
.meter{display:grid;grid-template-columns:minmax(0,132px) minmax(0,1fr) 40px;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--n800);font-size:14px}
.meter .bar{position:relative;height:8px;background:var(--n800)}
.meter .bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--bg);transition:width 1.2s var(--ease)}
.meter .bar i.low{background:var(--accent)}
.meter b{text-align:right;font-feature-settings:"tnum" 1}
.check .score{font-weight:800;font-size:72px;letter-spacing:-.05em;line-height:.9;color:var(--a500);font-feature-settings:"tnum" 1}
.check .fnd{display:flex;gap:10px;align-items:baseline;font-size:14px;line-height:1.45;color:var(--n300)}
.check [hidden]{display:none!important}
/* Laufband */
.marquee{background:var(--accent);color:#f3f2f2;overflow:hidden;border-block:2px solid var(--text)}
.marquee-track{display:flex;white-space:nowrap;padding:22px 0;font-weight:800;font-size:clamp(36px,5vw,72px);letter-spacing:-.04em;line-height:1;will-change:transform}
.marquee-track span{display:inline-flex;align-items:center;gap:.4em;padding-right:.4em}
.marquee-track span::after{content:"";width:.22em;height:.22em;background:#201e1d}
.marquee-track span:nth-child(odd){font-stretch:112%}.marquee-track span:nth-child(even){font-stretch:75%}
/* Ergebnis-Chart */
.chart{padding:clamp(20px,2.4vw,32px)}
.js .chart polyline{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2s var(--ease)}
.chart.on polyline{stroke-dashoffset:0}
.js .chart .mk{opacity:0;transition:opacity .3s 1.9s}.chart.on .mk{opacity:1}
.rank{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--n800);font-size:14px}
.rank .bar{position:relative;height:8px;background:var(--n800)}
.rank .bar i{position:absolute;inset:0 auto 0 0;background:var(--bg);width:0;transition:width 2s var(--ease)}
.rank b{font-size:20px;text-align:right;white-space:nowrap;font-feature-settings:"tnum" 1}
.big-pct{font-weight:800;font-size:clamp(72px,9vw,144px);letter-spacing:-.055em;line-height:.85;color:var(--accent);font-feature-settings:"tnum" 1}
/* Zeitstrahl */
.timeline{position:relative;margin-top:72px}
.timeline .track{position:absolute;left:0;right:0;top:7px;height:2px;background:var(--n700)}
.timeline .track i{display:block;height:100%;width:0;background:var(--accent)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:48px 40px;position:relative}
.steps .n{margin:32px 0 0;font-size:14px;font-weight:600;color:var(--n400)}
.steps h3{font-size:28px;letter-spacing:-.03em;margin:10px 0 14px;line-height:1.1}
.steps p{font-size:15.5px;line-height:1.6;color:var(--n300)}
/* Artikel */
.doc{display:flex;flex-wrap:wrap;gap:48px clamp(40px,6vw,112px);align-items:flex-start}
.doc aside{flex:1 1 240px;max-width:320px;display:grid;gap:32px}
@media (min-width:1080px){.doc aside{position:sticky;top:104px}}
@media (max-width:1079px){.doc aside{max-width:none;order:2}}
.doc article{flex:999 1 520px;min-width:0;max-width:780px}
.toc{border-top:2px solid var(--text);margin-top:12px}
.toc a{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--n300);font-size:14.5px;line-height:1.4;font-weight:600}
.toc a span{color:var(--a700);font-feature-settings:"tnum" 1}
.prose h2{margin:56px 0 20px;padding-top:24px;border-top:2px solid var(--text);font-size:clamp(26px,2.8vw,38px);line-height:1.08;letter-spacing:-.03em;scroll-margin-top:96px}
.prose h2:first-child{margin-top:0}
.prose h3{margin:36px 0 12px;font-size:22px;line-height:1.2;letter-spacing:-.015em}
.prose p{margin:0 0 18px;font-size:17px;line-height:1.68;color:var(--n800)}
.prose strong{color:var(--text);font-weight:700}
.prose ul{list-style:none;margin:0 0 24px;padding:0;border-top:1px solid var(--n300)}
.prose li{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--n300);font-size:16.5px;line-height:1.6;color:var(--n800)}
.prose li::before{content:"";width:8px;height:8px;background:var(--accent);flex:none;transform:translateY(-2px)}
.prose details{border-bottom:1px solid var(--n300)}
.prose summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-weight:800;font-size:20px;letter-spacing:-.015em;line-height:1.25}
.prose summary::-webkit-details-marker{display:none}
.prose summary::after{content:"+";color:var(--accent);font-size:28px;line-height:.8}
.prose details[open] summary::after{content:"–"}
.side-cta{padding:24px;display:grid;gap:14px}
.side-cta p.t{font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1.15}
.related{border-top:2px solid var(--text);margin-top:12px}
.related a{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--n300);font-size:17px;font-weight:600}
.related a svg{color:var(--accent);width:16px;height:16px;flex:none}
/* Listen */
.search{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.search input{flex:1 1 260px;min-width:0;min-height:52px;padding:0 16px;font:400 17px var(--font);background:var(--bg);color:var(--text);border:2px solid var(--text);border-radius:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.az{display:flex;flex-wrap:wrap;gap:4px;margin-top:16px}
.az a{width:40px;height:40px;display:grid;place-items:center;font-weight:800;font-size:15px;border:2px solid var(--n300)}
.az a:hover{background:var(--text);color:var(--bg);border-color:var(--text)}
.lrow{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr) 28px;gap:12px 32px;align-items:baseline;padding:22px var(--pad);border-bottom:1px solid var(--n300);background:var(--bg)}
.lrow:hover{background:var(--surface);color:var(--text)!important}
.lrow .t{font-weight:800;font-size:22px;letter-spacing:-.015em;line-height:1.15;display:block}
.lrow .d{display:block;margin-top:6px;font-size:15px;line-height:1.5;color:var(--n800)}
.lrow svg{color:var(--accent);width:16px;height:16px}
.letter{font-weight:800;font-size:40px;letter-spacing:-.04em;line-height:.9;color:var(--accent)}
.is-hidden{display:none!important}
/* Formular */
.field{display:grid;gap:6px}
.field label{font-size:13px;color:var(--n800)}
.input{width:100%;min-height:52px;padding:10px 14px;font:400 16px var(--font);color:var(--text);background:var(--bg);border:2px solid var(--text);border-radius:0;caret-color:var(--accent)}
textarea.input{min-height:140px;resize:vertical}
.input:focus-visible{outline:2px solid var(--accent);outline-offset:0}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--n800)}
.consent input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent);flex:none}
.hp{position:absolute;left:-9999px}
.notice{border:2px solid var(--text);padding:28px;display:grid;gap:12px}
.notice.err{border-color:var(--accent)}
/* Kontakt-Seitenleiste */
.cinfo>div{border-top:2px solid var(--n600);padding:24px 0}
.cinfo>div:last-of-type{border-bottom:2px solid var(--n600)}
.cinfo .v{font-weight:800;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.02em}
/* Fotos */
.photo{margin:0;background:var(--surface);position:relative;overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.photo .ph{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:left;font-size:14px;color:var(--n800);background:repeating-linear-gradient(135deg,var(--surface) 0 14px,var(--n200) 14px 15px)}
.photo img+.ph{display:none}
.r-45{aspect-ratio:4/5}.r-169{aspect-ratio:16/9}
/* Abschluss & Footer */
.poster{background:var(--accent);color:#f3f2f2;padding:clamp(80px,10vw,152px) var(--pad) clamp(56px,6vw,88px)}
.poster h2{font-size:clamp(44px,7.4vw,120px);line-height:.94;letter-spacing:-.045em;margin-left:-.05em}
.poster .row4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:32px;align-items:center;margin-top:clamp(56px,7vw,104px);padding-top:28px;border-top:2px solid #f3f2f2;font-size:20px;font-weight:600;line-height:1.4}
.poster a:not(.btn):hover{color:#201e1d}
.site-footer{border-top:2px solid var(--text);padding:clamp(56px,6vw,96px) var(--pad) 28px}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:40px 32px;padding:clamp(40px,5vw,64px) 0}
.fcols div{display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.45}
.fcols .label{margin-bottom:6px}
.wordmark{font-weight:800;font-size:clamp(72px,19vw,300px);line-height:.8;letter-spacing:-.06em;white-space:nowrap;overflow:hidden;margin-left:-.05em}
.fbar{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;margin-top:32px;padding-top:20px;border-top:2px solid var(--text);font-size:14px;color:var(--n800)}
.fbar span:first-child{margin-right:auto}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}