/* Dein Kfz-Gutachter Regensburg — Stylesheet
Schriften lokal eingebunden (kein Google-Fonts-CDN, DSGVO-freundlich). */
@font-face{
font-family:'Barlow';
font-style:normal;
font-weight:500;
font-display:swap;
src:url(../fonts/barlow-500-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;
}
@font-face{
font-family:'Barlow';
font-style:normal;
font-weight:500;
font-display:swap;
src:url(../fonts/barlow-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Barlow';
font-style:normal;
font-weight:600;
font-display:swap;
src:url(../fonts/barlow-600-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;
}
@font-face{
font-family:'Barlow';
font-style:normal;
font-weight:600;
font-display:swap;
src:url(../fonts/barlow-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Barlow';
font-style:normal;
font-weight:700;
font-display:swap;
src:url(../fonts/barlow-700-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;
}
@font-face{
font-family:'Barlow';
font-style:normal;
font-weight:700;
font-display:swap;
src:url(../fonts/barlow-700-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Work Sans';
font-style:normal;
font-weight:400 700;
font-display:swap;
src:url(../fonts/work-sans-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;
}
@font-face{
font-family:'Work Sans';
font-style:normal;
font-weight:400 700;
font-display:swap;
src:url(../fonts/work-sans-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* --- Basis (aus dem Design übernommen) --- */
:root{
--c-ink-900:#020203; --c-ink-800:#050609; --c-ink-700:#08090C; --c-ink-600:#0C0E12;
--c-line-dark:rgba(255,255,255,.08); --c-line-dark-2:rgba(255,255,255,.16);
--c-text:#F2F3F5; --c-text-2:#C4C7CD; --c-muted:#93979E;
--c-paper:#E2DFD7; --c-paper-2:#F4F2ED; --c-ink:#14161A; --c-ink-muted:#4E515A;
--c-line-light:rgba(0,0,0,.16);
--c-signal:#F5C400; --c-signal-hi:#FFD633; --c-signal-ink:#2A2D33; --c-gold-deep:#7A5F00;
--c-wa:#22B858; --c-wa-hi:#2ACF66; --c-wa-ink:#06210F;
--fs-h1:clamp(38px,6.4vw,76px); --fs-h2:clamp(30px,4vw,52px); --fs-h3:clamp(21px,2.2vw,26px);
--fs-lead:clamp(18px,1.6vw,22px); --fs-body:17px; --fs-small:15px; --fs-label:12.5px;
--sp-1:8px; --sp-2:14px; --sp-3:22px; --sp-4:34px; --sp-5:52px; --sp-6:72px; --sp-7:104px;
--skew:20px; --r-0:0px;
--sh-1:0 1px 2px rgba(0,0,0,.20); --sh-2:0 18px 40px -18px rgba(0,0,0,.55);
/* Werte, die vorher fest im Markup standen — als Tokens umschaltbar */
--c-header-bg:rgba(11,12,14,.94);
--c-signal-soft:rgba(245,196,0,.12);
--c-hatch-a:rgba(245,196,0,.09); --c-hatch-b:rgba(255,255,255,.02);
--c-veil-soft:rgba(5,5,6,.45); --c-veil-bottom:rgba(5,5,6,.72);
--c-num:rgba(0,0,0,.10);
--c-focus:#FFFFFF; --c-focus-surface:#FFFFFF;
/* Akzent als Textfarbe bzw. Text auf der Akzentflaeche */
--c-accent-ink:var(--c-signal); --c-on-signal:var(--c-ink-900);
--c-ring-y:#FFE066; --c-ring-w:#6FE6A0;
--c-ico-hov-bg:var(--c-ink); --c-ico-hov-fg:var(--c-signal);
--c-shadow-hard:rgba(0,0,0,.90); --c-shadow-soft:rgba(0,0,0,.95);
--c-sec-num:rgba(245,196,0,.28); --c-signal-dash:rgba(245,196,0,.50);
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--c-ink-900);-webkit-font-smoothing:antialiased}
a{color:var(--c-accent-ink)}a:hover{color:var(--c-signal-hi)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--c-accent-ink);outline-offset:3px}
svg.lucide{width:1em;height:1em;stroke-width:1.75;display:block}
summary{cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}
details[open] .chev{transform:rotate(180deg)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marq{animation:marq 70s linear infinite}
.marq:hover{animation-play-state:paused}
.btn{background-size:200% 100%;background-position:100% 0;transition:filter .18s ease}
.btn:hover{filter:brightness(1.09)}
.btn:active{filter:brightness(.94)}
.btn-dark:hover{color:var(--c-signal)}
.svc,.svc-l{transition:border-color .2s ease,background-color .2s ease}
.svc:hover{border-color:var(--c-signal)!important}
.svc-ico{transition:color .2s ease}
.mailbox:hover{background:var(--c-signal)}
.svc:hover .svc-ico,.svc-l:hover .svc-ico{color:var(--c-ico-hov-fg)!important}
[data-nav]{position:relative;padding-bottom:5px}
[data-nav]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--c-signal);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.16,1,.3,1)}
[data-nav]:hover{color:var(--c-text)!important}
[data-nav]:hover::after{transform:scaleX(1)}
.ctaw{position:relative;display:inline-flex;padding:2px;clip-path:polygon(11px 0,100% 0,calc(100% - 11px) 100%,0 100%);overflow:hidden}
.ctaw::before{content:"";position:absolute;left:50%;top:50%;width:230%;aspect-ratio:1;transform:translate(-50%,-50%);background:conic-gradient(from 0deg,transparent 0deg,var(--ring) 55deg,transparent 130deg,transparent 235deg,var(--ring) 290deg,transparent 360deg);animation:spinring 3.4s linear infinite}
.ctaw>a{position:relative}
.ctaw>a:focus-visible{outline:3px solid var(--c-focus);outline-offset:-3px}
.ctaw:focus-within{--ring:var(--c-focus)}
.ctaw:focus-within::before{animation-duration:1.4s}
.ctaw-y{--ring:var(--c-ring-y)}.ctaw-w{--ring:var(--c-ring-w)}
@keyframes spinring{to{transform:translate(-50%,-50%) rotate(360deg)}}
.svc-main{grid-column:1/-1}
@media(min-width:768px){.svc-main{grid-column:span 2}}
.mbar{display:flex}
@media(min-width:900px){.mbar{display:none}}
@media(prefers-reduced-motion:reduce){.marq{animation:none}.ctaw::before{animation:none}.btn,.svc,.svc-l,.svc-ico,[data-nav]::after{transition:none}*{scroll-behavior:auto}}
/* --- Hover-/Focus-Zustände (im Design als style-hover/style-focus notiert) --- */
.x-foc-1:focus{left:12px!important;top:12px!important}
.x-hov-2:hover{background:var(--c-paper)!important}
.x-hov-3:hover{background:var(--c-paper-2)!important}
.x-foc-4:focus{border-color:var(--c-signal)!important}
.x-hov-5:hover{color:var(--c-accent-ink)!important}
/* --- Ergänzungen für die statische Auslieferung --- */
img{max-width:100%}
#mapBox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.25) contrast(1.05)}
/* ==========================================================================
Kopfzeile mit Hamburger-Menü
Desktop ab 900 px unverändert, darunter klappt die Navigation auf.
========================================================================== */
/* Inhalt der Kopfzeile auf dieselbe 1240-px-Spalte wie die Abschnitte begrenzt;
der Hintergrund läuft weiter über die volle Breite. */
.hdr-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
max-width:1240px;margin:0 auto;box-sizing:content-box;padding:14px clamp(18px,4vw,52px)}
.hdr-panel{display:flex;align-items:center;gap:16px;flex:1;justify-content:flex-end}
.hdr-nav{display:flex;flex-wrap:nowrap;gap:13px;white-space:nowrap}
/* Damit die volle Navigation in die 1240-px-Spalte passt, sind die beiden
Buttons oben am Desktop etwas enger gesetzt. */
@media(min-width:1381px){
.hdr-cta .ctaw>a{padding:0 15px!important;letter-spacing:.07em!important}
}
.burger{display:none}
@media(max-width:1380px){
.hdr-bar{flex-wrap:nowrap;gap:12px}
.hdr-logo{min-width:0}
.hdr-logo span span:first-child{font-size:15px;white-space:nowrap}
.hdr-logo span span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-logo img{width:40px!important;height:40px!important}
/* Panel klappt unter der Kopfzeile auf */
.hdr-panel{
position:absolute;left:0;right:0;top:100%;
/* grid-template-columns + justify-content zurücksetzen: sonst zieht das
flex-end der Desktop-Regel die Spalte nach rechts */
display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;gap:0;
background:var(--c-ink-800);
border-bottom:1px solid var(--c-line-dark-2);
box-shadow:0 24px 40px -24px var(--c-shadow-hard);
max-height:0;overflow:hidden;visibility:hidden;
transition:max-height .3s cubic-bezier(.16,1,.3,1),visibility 0s linear .3s;
}
.hdr-panel.open{max-height:80vh;overflow-y:auto;visibility:visible;transition:max-height .35s cubic-bezier(.16,1,.3,1),visibility 0s}
.hdr-nav{display:grid;gap:0;padding:6px 0;white-space:normal}
.hdr-nav a{
padding:0 clamp(18px,4vw,52px);
font-size:16px;
border-bottom:1px solid var(--c-line-dark);
display:flex;align-items:center;min-height:54px;
}
.hdr-nav a:last-child{border-bottom:0}
.hdr-nav a::after{display:none} /* Unterstrich-Effekt nur am Desktop */
.hdr-cta{padding:16px clamp(18px,4vw,52px) 20px;gap:12px}
.hdr-cta .ctaw{flex:1}
.hdr-cta .ctaw>a{width:100%;justify-content:center;min-height:52px;font-size:13.5px}
/* Hamburger-Schaltfläche
Ein echter border wird von clip-path an den schrägen Kanten abgeschnitten.
Deshalb dieselbe Technik wie bei .ctaw und .mailbox: die äußere Fläche ist
der Rahmen, das innere Element liegt 1 px darin. */
.burger{
display:inline-flex;flex:none;padding:1px;border:0;cursor:pointer;
background:var(--c-line-dark-2);
color:var(--c-text);
clip-path:polygon(11px 0,100% 0,calc(100% - 11px) 100%,0 100%);
transition:background-color .2s ease;
}
.burger-in{
display:flex;align-items:center;gap:10px;
min-height:44px;padding:0 15px;
background:var(--c-ink-800);
clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
transition:background-color .2s ease;
}
/* Beide Flächen deckend halten: eine halbtransparente Innenfläche liesse den
gelben Rahmen durchscheinen, dann verschwaende das gelbe X darin. */
.burger:hover{background:var(--c-signal)}
.burger:hover .burger-in{background:var(--c-ink-700)}
/* Geöffnet: ganze Fläche gelb, das X dunkel — deutlicher Kontrast */
.burger[aria-expanded="true"]{background:var(--c-signal)}
.burger[aria-expanded="true"] .burger-in{background:var(--c-signal)}
.burger[aria-expanded="true"] .burger-lines span{background:var(--c-on-signal)}
/* Der Fokusrahmen würde außen ebenfalls weggeschnitten — daher nach innen */
.burger:focus-visible{outline:0}
.burger:focus-visible .burger-in{outline:3px solid var(--c-focus-surface);outline-offset:-3px}
.burger-lines{display:grid;gap:4px;width:20px}
.burger-lines span{display:block;height:2px;background:var(--c-signal);transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .2s ease}
.burger[aria-expanded="true"] .burger-lines span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-lines span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger-lines span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.burger-text{font:700 12.5px/1 'Work Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase}
}
@media(max-width:380px){ .burger-text{display:none} .burger{padding:0 13px} }
/* Sprungmarken nicht unter die klebende Kopfzeile schieben */
section[id]{scroll-margin-top:86px}
@media(max-width:900px){section[id]{scroll-margin-top:78px}}
/* ==========================================================================
Ablauf: die Einleitung klebt nur, wenn zwei Spalten nebeneinander passen.
Einspaltig würde sie sonst über die Zeitleiste laufen.
========================================================================== */
.ablauf-intro{position:sticky;top:120px}
@media(max-width:900px){.ablauf-intro{position:static;top:auto}}
/* ==========================================================================
Bewertungen
========================================================================== */
.rev-card{
box-sizing:border-box;
width:min(380px,82vw);flex:none;
background:var(--c-paper);border:1px solid var(--c-line-light);
padding:24px;
}
.rev-author{display:flex;align-items:center;gap:12px}
.rev-ava{
display:flex;align-items:center;justify-content:center;
width:40px;height:40px;flex:none;border-radius:50%;
background:var(--c-ico-hov-bg);color:var(--c-ico-hov-fg);
font:700 14px/1 'Barlow',sans-serif;letter-spacing:.04em;
}
.rev-meta{display:grid;gap:2px;min-width:0}
.rev-name{font:600 14.5px/1.3 'Work Sans',sans-serif;color:var(--c-ink);overflow-wrap:anywhere}
.rev-src{font:400 12.5px/1.3 'Work Sans',sans-serif;color:var(--c-ink-muted)}
.rev-link{color:var(--c-ink);font-weight:600;text-decoration-thickness:2px;text-underline-offset:3px}
.rev-link:hover{color:var(--c-ink);text-decoration-color:var(--c-signal)}
/* ==========================================================================
Einwilligungs-Banner
========================================================================== */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:95;padding:14px;display:flex;justify-content:center;
animation:cc-in .4s cubic-bezier(.16,1,.3,1) both}
.cc[hidden]{display:none}
@keyframes cc-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.cc-box{
width:min(620px,100%);
background:var(--c-ink-700);
border:1px solid var(--c-line-dark-2);
border-top:3px solid var(--c-signal);
padding:22px 24px;
box-shadow:0 28px 60px -24px var(--c-shadow-soft);
}
.cc-head{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.cc-emoji{font-size:26px;line-height:1}
.cc-title{margin:0;font:700 19px/1.2 'Barlow',sans-serif;color:var(--c-text);text-transform:uppercase;letter-spacing:.02em}
.cc-text{margin:0 0 18px;font:400 15px/1.65 'Work Sans',sans-serif;color:var(--c-text-2)}
.cc-text strong{color:var(--c-text)}
.cc-actions{display:flex;flex-wrap:wrap;gap:10px}
.cc-btn{
flex:1 1 190px;min-height:50px;padding:0 22px;border:0;cursor:pointer;
font:700 13.5px/1 'Work Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;
clip-path:polygon(16px 0,100% 0,calc(100% - 16px) 100%,0 100%);
transition:filter .18s ease;
}
.cc-btn:hover{filter:brightness(1.09)}
.cc-accept{background:var(--c-signal);color:var(--c-on-signal)}
.cc-decline{background:var(--c-ink-600);color:var(--c-text-2);box-shadow:inset 0 0 0 1px var(--c-line-dark-2)}
.cc-decline:hover{color:var(--c-text)}
.cc-links{margin:14px 0 0;font:400 13px/1.4 'Work Sans',sans-serif;color:var(--c-muted)}
.cc-links a{color:var(--c-muted);text-decoration:underline}
.cc-links a:hover{color:var(--c-accent-ink)}
/* Solange das Banner steht, die Handy-Leiste nicht zusätzlich einblenden */
.cc-open .mbar{transform:translateY(130%)!important}
@media(prefers-reduced-motion:reduce){
.cc{animation:none}
.hdr-panel,.burger,.burger-lines span,.mbar,.mbar-btn{transition:none}
}
/* ==========================================================================
Hero — Titel, Untertext, zwei Buttons, Bild. Auf breiten Schirmen in einer
1240-px-Spalte gehalten, damit Text und Bild zusammenbleiben.
========================================================================== */
.hero{position:relative;background:var(--c-ink-900);
padding:clamp(40px,7vw,104px) clamp(18px,4vw,52px) clamp(56px,7.5vw,112px)}
.hero-in{max-width:1240px;margin:0 auto;display:grid;align-items:center;
grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(40px,5vw,80px)}
.hero-h1{margin:0 0 22px;font:700 clamp(38px,4.6vw,68px)/.98 'Barlow',sans-serif;color:var(--c-text);
letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
/* Ortsangabe als Eyebrow über dem Titel – bewusst im H1, damit
"Kfz-Gutachter Regensburg" Teil der Hauptüberschrift bleibt. */
.hero-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 22px;
font:600 var(--fs-label)/1 'Barlow',sans-serif;color:var(--c-accent-ink);letter-spacing:.16em}
.hero-eyebrow::before{content:"";flex:none;width:28px;height:2px;background:var(--c-signal)}
.hero-zeile{display:block}
.hero-sub{margin:0 0 36px;font:400 var(--fs-lead)/1.6 'Work Sans',sans-serif;color:var(--c-text-2);max-width:42ch}
.hero-sub strong{color:var(--c-text);font-weight:600}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px}
.hero-bild{position:relative;margin:0 18px 18px 0;aspect-ratio:5/4}
/* versetzter Rahmen hinter dem Foto */
.hero-bild::before{content:"";position:absolute;inset:18px -18px -18px 18px;
border:1px solid var(--c-signal-dash);pointer-events:none}
.hero-bild img{position:relative;display:block;width:100%;height:100%;object-fit:cover;object-position:62% 42%}
@media(max-width:900px){
.hero-in{grid-template-columns:minmax(0,1fr);gap:40px}
.hero-bild{aspect-ratio:16/11;margin:0 12px 12px 0}
.hero-bild::before{inset:12px -12px -12px 12px}
.hero-sub{margin-bottom:28px}
}
/* ==========================================================================
Feinschliff Handy: Schriftgrößen, Zeilenlängen, Abstände
========================================================================== */
@media(max-width:900px){
:root{
--fs-h1:clamp(34px,8.6vw,48px);
--fs-h2:clamp(26px,6.6vw,34px);
--fs-h3:20px;
--fs-lead:18px;
--fs-body:17px;
}
h1,h2{text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
h1{line-height:1.02!important;letter-spacing:-.015em!important}
h2{line-height:1.06!important}
/* Fließtext in Karten war mit 15,5 px zu klein für kleine Displays */
.svc p,.svc-l p{font-size:16px!important;line-height:1.62!important}
.svc,.svc-l{padding:24px 20px!important}
/* Aufzählungen und Zeitleiste */
#ablauf li p,#hilfe li p{font-size:16.5px!important;line-height:1.65!important}
/* Buttons: volle Breite, damit die Schrägen nicht zerfasern */
#start a[href^="tel:"],#start a[href^="https://wa.me"]{width:100%;justify-content:center}
/* FAQ */
#faq summary{padding:19px 18px!important;gap:14px!important}
#faq details>div{padding:0 18px 20px!important;font-size:16.5px!important}
/* Abschnittsabstände etwas straffer */
section{padding-left:18px;padding-right:18px}
}
/* Zeitleiste im Ablauf: auf schmalen Displays weniger Einzug,
damit für den Text genug Breite bleibt */
@media(max-width:560px){
[data-track]{padding-left:44px!important}
[data-track] li>span:first-child{left:-44px!important;width:32px!important;height:32px!important;font-size:16px!important}
[data-track]>div{left:15px!important}
}
/* Der Bewertungs-Marquee darf nie horizontal aus der Seite laufen */
#bewertungen{overflow-x:hidden}
/* Karten-Platzhalter: Innenabstand darf die Breite nicht sprengen */
#mapBox{box-sizing:border-box}
/* Kleine Bildunterschriften und Hinweise auf dem Handy etwas größer */
@media(max-width:900px){
#ueber-uns figure p,#ueber-uns [style*="position:absolute"][style*="bottom:0"]{font-size:14.5px!important}
#formStatus{font-size:14.5px!important}
}
/* ==========================================================================
Nachträge
========================================================================== */
/* --- „Nur Notwendiges“: vollständige 1-px-Umrandung ----------------------
clip-path schneidet einen border an den Schrägen ab. Die äußere Fläche
dient deshalb als Rahmen, der Inhalt liegt 1 px darin. */
.cc-decline{background:var(--c-line-dark-2);padding:1px;box-shadow:none}
.cc-decline-in{
display:flex;align-items:center;justify-content:center;
width:100%;min-height:48px;padding:0 20px;
background:var(--c-ink-600);color:var(--c-text-2);
clip-path:polygon(15px 0,100% 0,calc(100% - 15px) 100%,0 100%);
transition:background-color .2s ease,color .2s ease;
}
.cc-decline:hover{background:var(--c-line-dark-2)}
.cc-decline:hover .cc-decline-in{background:var(--c-ink-700);color:var(--c-text)}
.cc-decline:focus-visible{outline:0}
.cc-decline:focus-visible .cc-decline-in{outline:3px solid var(--c-focus-surface);outline-offset:-3px}
/* --- Bewertungen: kompaktere Schriftgrößen (12–16 px) -------------------- */
.rev-card{padding:20px}
.rev-stars{color:var(--c-signal);font-size:13px;letter-spacing:2px;margin-bottom:10px}
.rev-text{margin:0 0 14px;font:400 14.5px/1.6 'Work Sans',sans-serif;color:var(--c-ink)}
.rev-ava{width:36px;height:36px;font-size:13px}
.rev-name{font-size:13.5px}
.rev-src{font-size:12px}
.rev-link{font-size:14.5px}
/* Formular und Karten: Innenabstand darf die Spaltenbreite nicht sprengen */
#kontakt form,.svc,.svc-l,.svc-main{box-sizing:border-box}
/* Formularfelder: das Datei-Feld bringt eine sehr breite Eigenbreite mit und
zog auf schmalen Displays das ganze Raster auseinander. */
#kontakt form input,#kontakt form textarea,#kontakt form button{
box-sizing:border-box;max-width:100%;min-width:0;width:100%;
}
#kontakt form div{min-width:0}
/* ==========================================================================
Korrekturen
========================================================================== */
/* --- Symbole in den hellen Karten ----------------------------------------
Gelb auf hellem Grund war schlecht lesbar. Beim Überfahren legt sich
deshalb eine dunkle Kachel hinter das Symbol. Sie wird über ein
Pseudoelement eingeblendet, damit sich das Layout nicht verschiebt. */
.svc-ico{position:relative;isolation:isolate}
.svc-ico::before{
content:"";position:absolute;z-index:-1;inset:-11px -13px;
background:var(--c-ico-hov-bg);
clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);
opacity:0;transform:scale(.86);
transition:opacity .18s ease,transform .25s cubic-bezier(.16,1,.3,1);
}
.svc:hover .svc-ico::before,.svc-l:hover .svc-ico::before{opacity:1;transform:scale(1)}
@media(prefers-reduced-motion:reduce){.svc-ico::before{transition:none}}
/* Kein Dauerzustand auf Touchgeräten: dort bleibt das Symbol dunkel auf hellem
Grund und ist ohne Kachel gut lesbar. */
/* --- Datei-Auswahl im Formular ------------------------------------------- */
.file-field{
position:relative;display:flex;align-items:center;gap:12px;
min-height:48px;padding:8px 10px;box-sizing:border-box;
background:var(--c-ink-600);border:1px dashed var(--c-line-dark-2);
}
.file-input{
position:absolute;inset:0;width:100%;height:100%;
opacity:0;cursor:pointer;
}
.file-btn{
flex:none;display:inline-flex;align-items:center;min-height:34px;padding:0 14px;
background:var(--c-ink-700);color:var(--c-text);
font:600 13px/1 'Work Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;
clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);
transition:background-color .2s ease,color .2s ease;
}
.file-name{
min-width:0;flex:1;
font:400 14px/1.35 'Work Sans',sans-serif;color:var(--c-muted);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.file-field:hover .file-btn{background:var(--c-signal);color:var(--c-ink-900)}
.file-input:focus-visible{outline:0}
.file-input:focus-visible~.file-btn{outline:3px solid var(--c-signal);outline-offset:2px}
.file-field:has(.file-input:focus-visible){border-color:var(--c-signal)}
/* --- Bewertungen: Kopfbereich -------------------------------------------- */
.rev-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px}
/* Zahl und Sterne in einer Zeile, die Erläuterung linksbündig darunter – auf
allen Breiten gleich. Vorher stand die Zahl rechtsbündig über einer breiteren
Zeile und wirkte dadurch verrutscht. */
.rev-score{display:grid;grid-template-columns:auto auto;justify-content:start;
align-items:center;column-gap:16px;row-gap:4px}
.rev-score-num{display:contents}
.rev-score-num>div:first-child{grid-column:1;grid-row:1}
.rev-score-num>div:last-child{grid-column:1/-1;grid-row:2}
.rev-score-stars{grid-column:2;grid-row:1;font-size:22px;color:var(--c-signal);letter-spacing:2px}
@media(max-width:900px){
/* Einspaltig steht die Bewertung unter der Überschrift */
.rev-head{display:block}
.rev-score{column-gap:14px;row-gap:2px;margin-top:22px}
.rev-score-stars{font-size:19px}
}
/* --- Footer: größeres Logo trägt etwas mehr Abstand ---------------------- */
@media(max-width:900px){
footer img{width:72px!important;height:72px!important}
}
/* ==========================================================================
Rechtsseiten (Impressum, Datenschutz)
========================================================================== */
.lp{background:var(--c-ink-900);font-family:'Work Sans',system-ui,sans-serif;min-height:100vh}
/* Titelband */
.lp-hero{position:relative;padding:clamp(40px,7vw,72px) clamp(18px,4vw,32px) clamp(28px,4vw,44px);overflow:hidden}
.lp-hero-in{position:relative;max-width:980px;margin:0 auto}
.lp-kicker{
display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;padding:7px 12px;
background:var(--c-signal-soft);border-left:3px solid var(--c-signal);
font:600 12.5px/1 'Barlow',sans-serif;color:var(--c-accent-ink);
letter-spacing:.08em;text-transform:uppercase;
}
.lp-kicker svg{width:1em;height:1em;font-size:15px}
.lp-title{margin:0 0 16px;font:700 clamp(32px,6vw,58px)/1.02 'Barlow',sans-serif;color:var(--c-text);letter-spacing:-.02em;text-transform:uppercase}
.lp-sub{margin:0;font:400 clamp(16px,1.6vw,18px)/1.65 'Work Sans',sans-serif;color:var(--c-text-2);max-width:60ch}
/* Hinweisbanner */
.lp-note{
max-width:980px;margin:0 auto clamp(32px,5vw,48px);
padding:18px 22px;background:var(--c-ink-700);
border:1px solid var(--c-line-dark);border-left:3px solid var(--c-signal);
display:flex;gap:14px;align-items:flex-start;
}
.lp-note svg{width:1em;height:1em;font-size:20px;color:var(--c-accent-ink);flex:none;margin-top:2px}
.lp-note p{margin:0;font:400 15px/1.65 'Work Sans',sans-serif;color:var(--c-text-2)}
.lp-note strong{color:var(--c-accent-ink)}
/* Inhaltsverzeichnis */
.lp-toc{max-width:980px;margin:0 auto clamp(32px,5vw,48px)}
.lp-toc h2{margin:0 0 14px;font:600 12.5px/1 'Barlow',sans-serif;color:var(--c-muted);letter-spacing:.14em;text-transform:uppercase}
.lp-toc ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:1px;background:var(--c-line-dark)}
.lp-toc a{
display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 16px;
background:var(--c-ink-800);color:var(--c-text-2);text-decoration:none;
font:400 15px/1.4 'Work Sans',sans-serif;
transition:background-color .2s ease,color .2s ease;
}
.lp-toc a:hover{background:var(--c-ink-700);color:var(--c-text)}
.lp-toc .n{font:700 13px/1 'Barlow',sans-serif;color:var(--c-accent-ink);flex:none;min-width:22px}
/* Abschnitte als Karten */
.lp-main{max-width:980px;margin:0 auto;padding:0 clamp(18px,4vw,32px) clamp(64px,8vw,104px)}
.lp-sec{
scroll-margin-top:90px;
background:var(--c-ink-800);border:1px solid var(--c-line-dark);
padding:clamp(24px,3.4vw,36px);margin-bottom:14px;
}
.lp-sec:hover{border-color:var(--c-line-dark-2)}
.lp-sec-head{display:flex;align-items:baseline;gap:14px;margin:0 0 18px}
.lp-sec-n{font:700 clamp(26px,3.4vw,34px)/1 'Barlow',sans-serif;color:var(--c-sec-num);flex:none}
.lp-sec h2{margin:0;font:600 clamp(19px,2.2vw,23px)/1.25 'Barlow',sans-serif;color:var(--c-text);text-transform:uppercase;letter-spacing:.02em}
.lp-sec p{margin:0 0 14px;font:400 16.5px/1.75 'Work Sans',sans-serif;color:var(--c-text-2);max-width:72ch}
.lp-sec p:last-child{margin-bottom:0}
.lp-sec strong{color:var(--c-text)}
.lp-sec a{color:var(--c-accent-ink);text-decoration-thickness:1px;text-underline-offset:3px}
.lp-sec a:hover{color:var(--c-signal-hi)}
/* Datenblock (Anschrift, Kontakt) */
.lp-data{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:1px;background:var(--c-line-dark);margin:0 0 4px}
.lp-data>div{background:var(--c-ink-700);padding:18px 20px}
.lp-data dt{margin:0 0 7px;font:600 11.5px/1 'Barlow',sans-serif;color:var(--c-accent-ink);letter-spacing:.12em;text-transform:uppercase}
.lp-data dd{margin:0;font:400 16px/1.6 'Work Sans',sans-serif;color:var(--c-text-2)}
.lp-data dd a{color:var(--c-text);text-decoration:none}
.lp-data dd a:hover{color:var(--c-accent-ink)}
/* Platzhalter, die noch ausgefüllt werden müssen */
.todo{
display:inline-block;padding:2px 9px;
background:var(--c-signal-soft);border:1px dashed var(--c-signal-dash);
font:600 14px/1.5 'Work Sans',sans-serif;color:var(--c-accent-ink);
}
/* Fußzeile */
.lp-foot{border-top:1px solid var(--c-line-dark);background:var(--c-ink-700)}
.lp-foot-in{max-width:980px;margin:0 auto;padding:28px clamp(18px,4vw,32px);display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
.lp-foot p{margin:0;font:400 14px/1.5 'Work Sans',sans-serif;color:var(--c-muted)}
.lp-foot nav{display:flex;flex-wrap:wrap;gap:18px;font:400 14.5px/1 'Work Sans',sans-serif}
.lp-foot nav a{color:var(--c-text-2);text-decoration:none}
.lp-foot nav a:hover{color:var(--c-accent-ink)}
/* ==========================================================================
Fixierte Aktionsleiste auf dem Handy
Eine feste dunkle Leiste (kein Verlauf), darin zwei zentrierte Buttons in
Volltonfarbe mit demselben laufenden Rahmen wie die CTAs in der Navigation.
========================================================================== */
.mbar{
position:fixed;left:0;right:0;bottom:0;z-index:80;
justify-content:center;align-items:center;gap:10px;
padding:9px 14px calc(9px + env(safe-area-inset-bottom));
background:var(--c-ink-900);
border-top:1px solid var(--c-line-dark-2);
transform:translateY(130%);
transition:transform .28s cubic-bezier(.16,1,.3,1);
}
/* .mbar-w erbt von .ctaw den rotierenden Rahmen; kein filter, der stoert die
Darstellung des Kegelverlaufs. */
.mbar-w{
flex:1 1 0;max-width:186px;display:flex;padding:2px;
clip-path:polygon(11px 0,100% 0,calc(100% - 11px) 100%,0 100%);
}
.mbar-btn{
width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
min-height:44px;padding:0 10px;text-decoration:none;box-shadow:none;
background-image:none;
clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
transition:background-color .18s ease;
}
.mbar-call{background:var(--c-signal);color:var(--c-on-signal)}
.mbar-wa{background:var(--c-wa);color:var(--c-wa-ink)}
/* Die Basisregel a:hover{color:#FFD633} hat hoehere Spezifitaet als .mbar-call
und faerbte die Beschriftung beim Antippen gelb. Deshalb hier mit gesetzt. */
.mbar-call:hover,.mbar-call:focus,.mbar-call:active{background:var(--c-signal-hi);color:var(--c-on-signal)}
.mbar-wa:hover,.mbar-wa:focus,.mbar-wa:active{background:var(--c-wa-hi);color:var(--c-wa-ink)}
.mbar-btn:active{filter:brightness(.94)}
.mbar-btn:focus-visible{outline:3px solid var(--c-focus);outline-offset:-3px}
.mbar-ico{display:flex;font-size:17px;flex:none}
.mbar-txt{display:grid;gap:2px}
.mbar-label{font:700 12.5px/1 'Work Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase}
.mbar-sub{font:400 10px/1 'Work Sans',sans-serif;opacity:.72}
@media(max-width:360px){.mbar-sub{display:none}.mbar-w{max-width:none}}
/* ==========================================================================
Nachtrag: Hamburger ohne Beschriftung
Der Name steht weiterhin im aria-label, damit Screenreader ihn vorlesen.
========================================================================== */
@media(max-width:900px){
.burger-text{display:none}
.burger-in{padding:0;width:44px;height:44px;justify-content:center;gap:0}
.burger-lines{width:19px}
}
/* ==========================================================================
Nachtrag: kleinere Fließtexte auf dem Handy
Die Größen stecken im Design als Inline-Angaben, deshalb hier gezielt über
Attributselektoren statt pauschal über „p“ — Kicker und Beschriftungen
sollen ihre Größe behalten.
========================================================================== */
@media(max-width:900px){
:root{--fs-body:15px;--fs-lead:16.5px;--fs-small:14px}
[style*="font:400 16.5px"]{font-size:15px!important;line-height:1.7!important}
[style*="font:400 15.5px"]{font-size:14.5px!important;line-height:1.65!important}
[style*="font:400 15px"]{font-size:14px!important}
[style*="font:400 14.5px"]{font-size:14px!important}
.svc p,.svc-l p{font-size:14.5px!important;line-height:1.65!important}
#ablauf li p,#hilfe li p{font-size:15px!important;line-height:1.7!important}
#faq details>div{font-size:15px!important;line-height:1.75!important}
.rev-text{font-size:14px!important;line-height:1.6!important}
/* Rechtsseiten */
.lp-sec p{font-size:15px!important;line-height:1.75!important}
.lp-sub{font-size:15.5px!important}
.lp-note p{font-size:14px!important}
.lp-data dd{font-size:15px!important}
.lp-toc a{font-size:14.5px!important}
}
/* Textlink im Kartenfeld: größere Tippfläche */
#mapBox a{display:inline-flex;align-items:center;min-height:40px;padding:0 6px}
/* ==========================================================================
Einheitliche Aktionsflächen auf dem Handy
Im Design haben die Buttons je nach Sektion unterschiedliche Höhen (44 bis
58 px), Schriftgrößen (12,5 bis 16 px) und Schrägen (11 bis 20 px). Auf dem
kleinen Bildschirm wirkt das unruhig, deshalb hier ein gemeinsames Maß.
Die Größen stehen im Design als Inline-Angaben, daher !important.
========================================================================== */
@media(max-width:900px){
.cta{
min-height:44px!important;
padding:0 18px!important;
font-size:12.5px!important;
letter-spacing:.07em!important;
gap:8px!important;
clip-path:polygon(11px 0,100% 0,calc(100% - 11px) 100%,0 100%)!important;
}
/* Symbol im Button (steckt im ersten Span) */
.cta>span:first-child{font-size:16px!important}
/* Kopfzeilen-Panel und Einwilligungs-Banner auf dasselbe Maß */
.hdr-cta .ctaw>a{min-height:44px!important;font-size:12.5px!important;padding:0 18px!important}
.cc-btn{min-height:44px!important;font-size:12.5px!important;padding:0 18px!important}
.cc-decline-in{min-height:42px!important;padding:0 18px!important}
/* Die zweizeiligen Kontaktzeilen bleiben Zeilen, werden aber flacher */
.cta-row{padding:13px 18px!important;gap:12px!important}
.cta-row>span:first-child{font-size:19px!important}
.cta-row span[style*="font:700 15px"]{font-size:13px!important}
.cta-row span[style*="font:400 14px"]{font-size:12px!important}
}
/* Rechtstexte enthalten sehr lange Komposita ("Verbraucherstreitbeilegungs-
gesetzes"), die auf schmalen Displays über den Rand liefen. */
.lp-sec p,.lp-sec dd,.lp-note p,.lp-toc a,.lp-sub,.todo{
overflow-wrap:break-word;
hyphens:auto;
}
.lp-title{overflow-wrap:break-word;hyphens:auto}
/* Als Flex-Element schrumpft die Überschrift ohne min-width:0 nicht unter ihre
Wortbreite — "Verbraucherstreitbeilegung" lief dadurch über den Rand. */
.lp-sec-head{flex-wrap:wrap}
.lp-sec h2{min-width:0;overflow-wrap:break-word;hyphens:auto}
/* ==========================================================================
Nachtraege
========================================================================== */
/* --- Symbol-Kachel: nur so breit wie das Symbol ---------------------------
Im Abschnitt „Gute Gruende" steht der Symbol-Span direkt in der Karte.
display:flex machte ihn dort zu einem Block ueber die volle Kartenbreite,
wodurch sich beim Ueberfahren die ganze Zeile schwarz faerbte. In den
uebrigen Abschnitten liegt er in einem Flex-Container und schrumpft von
selbst. */
.svc-ico{width:max-content;max-width:100%}
/* --- Ruhigeres Erscheinungsbild -------------------------------------------
Der rotierende Rahmen lief dauerhaft auf jedem CTA und war das unruhigste
Element der Seite. Er ruht jetzt und laeuft nur noch beim Ueberfahren
oder bei Tastaturfokus an. */
.ctaw::before{animation:none;opacity:.55}
.ctaw:hover::before,.ctaw:focus-within::before{
animation:spinring 3.4s linear infinite;
opacity:1;
}
@media(prefers-reduced-motion:reduce){
.ctaw:hover::before,.ctaw:focus-within::before{animation:none}
}
/* --- Karten-Platzhalter ohne Schraffur ------------------------------------ */
#mapBox{background-image:none;background-color:var(--c-ink-800)}
/* ==========================================================================
Kompaktere Kopfzeile und Aktionsleiste
Beide sind fixiert und nehmen dem Inhalt dauerhaft Platz weg. Auf schmalen
Bildschirmen fallen sie daher etwas schlanker aus.
========================================================================== */
@media(max-width:1380px){
/* Warnband-Kante schmaler */
header>div[style*="repeating-linear-gradient"]{height:4px!important}
.hdr-bar{padding:8px clamp(18px,4vw,52px)}
.hdr-logo img{width:34px!important;height:34px!important}
.hdr-logo span{gap:2px!important}
.hdr-logo span span:first-child{font-size:13.5px}
.hdr-logo span span:last-child{font-size:11px}
.burger-in{width:40px;height:40px;min-height:40px}
.burger-lines{width:17px;gap:3.5px}
.burger[aria-expanded="true"] .burger-lines span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-lines span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
/* Sprungmarken an die niedrigere Kopfzeile anpassen */
section[id]{scroll-margin-top:62px}
}
@media(max-width:900px){
.mbar{padding:7px 12px calc(7px + env(safe-area-inset-bottom));gap:10px}
.mbar-btn{min-height:40px}
.mbar-ico{font-size:16px}
.mbar-label{font-size:12px}
.mbar-sub{font-size:9.5px}
}
/* ==========================================================================
Helles Erscheinungsbild
Die Gestaltung liegt fast vollständig in Farbvariablen, deshalb genügt es,
die Tokens neu zu belegen. Was dunkel war, wird hell; der gelbe Signalton
weicht einem kräftigen Blau. Das WhatsApp-Grün bleibt, weil es eine
fremde Markenfarbe ist.
========================================================================== */
:root[data-theme="light"]{
/* Flächen, die im dunklen Modus tief waren */
--c-ink-900:#FFFFFF;
--c-ink-800:#FBFAF7;
--c-ink-700:#F4F2ED;
--c-ink-600:#EAE7E0;
--c-line-dark:rgba(20,22,26,.11);
--c-line-dark-2:rgba(20,22,26,.22);
--c-text:#14161A;
--c-text-2:#3C4046;
--c-muted:#63676E;
/* Die Papierflächen bleiben, wie sie sind — sie waren schon hell */
--c-paper:#E2DFD7;
--c-paper-2:#F4F2ED;
--c-ink:#14161A;
--c-ink-muted:#4E515A;
--c-line-light:rgba(0,0,0,.16);
/* Das Signalgelb bleibt Markenfarbe — aber nur als Fläche.
Als Schriftfarbe hätte es auf Weiß nur rund 1,7:1 Kontrast, deshalb
übernimmt dort ein tiefes Gold. */
--c-signal:#F5C400;
--c-signal-hi:#FFD633;
--c-signal-ink:#2A2D33;
--c-accent-ink:#6B5300;
--c-on-signal:#14161A;
--sh-1:0 1px 2px rgba(20,22,26,.10);
--sh-2:0 18px 40px -18px rgba(20,22,26,.30);
--c-header-bg:rgba(255,255,255,.94);
--c-signal-soft:rgba(245,196,0,.20);
--c-hatch-a:rgba(245,196,0,.10);
--c-hatch-b:rgba(20,22,26,.03);
--c-veil-soft:rgba(255,255,255,.55);
--c-veil-bottom:rgba(255,255,255,.88);
--c-num:rgba(20,22,26,.10);
--c-focus:#14161A;
--c-focus-surface:#14161A;
--c-ring-y:#E0A800;
--c-shadow-hard:rgba(20,22,26,.28);
--c-shadow-soft:rgba(20,22,26,.30);
--c-sec-num:rgba(107,83,0,.35);
--c-signal-dash:rgba(107,83,0,.45);
}
/* Fotos wirken auf hellem Grund schnell zu hart */
:root[data-theme="light"] #mapBox iframe{filter:grayscale(.12) contrast(1.02)}
/* ==========================================================================
Umschalter hell / dunkel
Zeigt jeweils das Symbol des Ziels: im dunklen Modus die Sonne.
========================================================================== */
.tsw{
display:inline-flex;flex:none;padding:1px;border:0;cursor:pointer;
background:var(--c-line-dark-2);
clip-path:polygon(11px 0,100% 0,calc(100% - 11px) 100%,0 100%);
transition:background-color .2s ease;
}
.tsw-in{
display:flex;align-items:center;justify-content:center;
width:42px;height:42px;
background:var(--c-ink-800);color:var(--c-accent-ink);
clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
transition:background-color .2s ease,color .2s ease;
}
.tsw-ico{display:flex;font-size:17px}
.tsw-moon{display:none}
:root[data-theme="light"] .tsw-sun{display:none}
:root[data-theme="light"] .tsw-moon{display:flex}
.tsw:hover{background:var(--c-signal)}
.tsw:hover .tsw-in{background:var(--c-ink-700)}
.tsw:focus-visible{outline:0}
.tsw:focus-visible .tsw-in{outline:3px solid var(--c-focus-surface);outline-offset:-3px}
@media(max-width:1380px){
.tsw-in{width:40px;height:40px}
.tsw-ico{font-size:16px}
}
/* ==========================================================================
Ratgeber (Blog)
Gleiche Bausteine wie der Rest der Seite: geschrägte Kanten, Barlow
für Überschriften, Signalfarbe als Akzent. Alles über dieselben Tokens,
damit hell und dunkel ohne Zusatzarbeit funktionieren.
========================================================================== */
.bl{background:var(--c-ink-900);font-family:'Work Sans',system-ui,sans-serif;min-height:100vh}
/* --- Titelband ------------------------------------------------------------ */
.bl-hero{position:relative;padding:clamp(36px,6vw,64px) clamp(18px,4vw,32px) clamp(24px,3.5vw,40px)}
.bl-hero-in{max-width:1100px;margin:0 auto}
.bl-kicker{
display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;padding:7px 12px;
background:var(--c-signal-soft);border-left:3px solid var(--c-signal);
font:600 12.5px/1 'Barlow',sans-serif;color:var(--c-accent-ink);
letter-spacing:.08em;text-transform:uppercase;
}
.bl-kicker svg{width:1em;height:1em;font-size:15px}
.bl-title{margin:0 0 16px;font:700 clamp(30px,5.4vw,54px)/1.03 'Barlow',sans-serif;
color:var(--c-text);letter-spacing:-.02em;text-transform:uppercase;
overflow-wrap:break-word;hyphens:auto;max-width:20ch}
.bl-sub{margin:0;font:400 clamp(16px,1.6vw,19px)/1.65 'Work Sans',sans-serif;color:var(--c-text-2);max-width:64ch}
/* --- Beitragsliste -------------------------------------------------------- */
.bl-main{max-width:1100px;margin:0 auto;padding:0 clamp(18px,4vw,32px) clamp(56px,7vw,88px)}
.bl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px;list-style:none;margin:0;padding:0}
.bl-card{
display:flex;flex-direction:column;box-sizing:border-box;
background:var(--c-ink-800);border:1px solid var(--c-line-dark);
transition:border-color .2s ease,transform .25s cubic-bezier(.16,1,.3,1);
}
.bl-card:hover{border-color:var(--c-signal);transform:translateY(-3px)}
.bl-card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--c-ink-700)}
.bl-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.bl-card:hover .bl-card-media img{transform:scale(1.04)}
.bl-cat{
position:absolute;left:0;bottom:0;
padding:7px 14px 7px 12px;background:var(--c-signal);color:var(--c-on-signal);
font:600 11px/1 'Barlow',sans-serif;letter-spacing:.1em;text-transform:uppercase;
clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
.bl-card-body{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px}
.bl-card h3{margin:0 0 10px;font:600 clamp(18px,2vw,21px)/1.28 'Barlow',sans-serif;color:var(--c-text)}
.bl-card p{margin:0 0 18px;font:400 15px/1.65 'Work Sans',sans-serif;color:var(--c-text-2)}
.bl-card-foot{margin-top:auto;display:flex;align-items:center;gap:10px;
font:400 13px/1 'Work Sans',sans-serif;color:var(--c-muted)}
.bl-dot{width:3px;height:3px;border-radius:50%;background:var(--c-muted);flex:none}
.bl-card a.bl-cover{position:absolute;inset:0;z-index:1} /* ganze Karte klickbar */
.bl-card{position:relative}
.bl-card a.bl-cover:focus-visible{outline:3px solid var(--c-signal);outline-offset:-3px}
/* --- Artikel -------------------------------------------------------------- */
.bl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 8px;
font:400 13.5px/1.5 'Work Sans',sans-serif;color:var(--c-muted)}
.bl-meta time{color:var(--c-text-2)}
.bl-figure{max-width:1100px;margin:0 auto clamp(28px,4vw,44px);padding:0 clamp(18px,4vw,32px)}
/* height:auto ist Pflicht – ohne das gewinnt das height-Attribut aus dem HTML
(900) gegen aspect-ratio und das Bild wird auf schmalen Schirmen hoch gezerrt. */
.bl-figure img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
border:1px solid var(--c-line-dark)}
.bl-figure figcaption{margin-top:10px;font:400 13px/1.5 'Work Sans',sans-serif;color:var(--c-muted)}
.bl-art{max-width:70ch;margin:0;padding:0 clamp(18px,4vw,32px) clamp(48px,6vw,72px)}
.bl-art h2{margin:clamp(32px,4vw,44px) 0 14px;font:700 clamp(21px,2.6vw,27px)/1.25 'Barlow',sans-serif;
color:var(--c-text);text-transform:uppercase;letter-spacing:.01em;overflow-wrap:break-word;hyphens:auto}
.bl-art h3{margin:28px 0 10px;font:600 clamp(17px,2vw,20px)/1.3 'Barlow',sans-serif;color:var(--c-text)}
.bl-art p{margin:0 0 16px;font:400 17px/1.75 'Work Sans',sans-serif;color:var(--c-text-2)}
.bl-art strong{color:var(--c-text)}
.bl-art a{color:var(--c-accent-ink);text-decoration-thickness:1px;text-underline-offset:3px}
.bl-art ul,.bl-art ol{margin:0 0 18px;padding:0 0 0 4px;list-style:none;display:grid;gap:10px}
.bl-art li{position:relative;padding-left:26px;font:400 17px/1.7 'Work Sans',sans-serif;color:var(--c-text-2)}
.bl-art li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:2px;background:var(--c-signal)}
.bl-art ol{counter-reset:s}
.bl-art ol li{counter-increment:s;padding-left:34px}
.bl-art ol li::before{content:counter(s,decimal-leading-zero);top:0;width:auto;height:auto;background:none;
font:700 13px/1.55 'Barlow',sans-serif;color:var(--c-signal)}
.bl-art blockquote{margin:24px 0;padding:18px 22px;background:var(--c-ink-800);
border-left:3px solid var(--c-signal)}
.bl-art blockquote p{margin:0;font-size:16px;color:var(--c-text-2)}
.bl-note{margin:28px 0 0;padding:16px 20px;background:var(--c-ink-800);border:1px solid var(--c-line-dark);
font:400 14.5px/1.65 'Work Sans',sans-serif;color:var(--c-muted)}
/* --- Abschluss-Aufruf ----------------------------------------------------- */
.bl-cta{background:var(--c-ink-800);border-top:1px solid var(--c-line-dark);border-bottom:1px solid var(--c-line-dark)}
.bl-cta-in{max-width:1100px;margin:0 auto;padding:clamp(32px,4.5vw,52px) clamp(18px,4vw,32px);
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.bl-cta h2{margin:0 0 8px;font:700 clamp(22px,3vw,32px)/1.1 'Barlow',sans-serif;
color:var(--c-text);text-transform:uppercase;letter-spacing:-.01em}
.bl-cta p{margin:0;font:400 15.5px/1.6 'Work Sans',sans-serif;color:var(--c-text-2);max-width:50ch}
.bl-cta-btns{display:flex;flex-wrap:wrap;gap:12px}
/* --- Weitere Beiträge ----------------------------------------------------- */
.bl-more{max-width:1100px;margin:0 auto;padding:clamp(40px,5vw,64px) clamp(18px,4vw,32px)}
.bl-more h2{margin:0 0 20px;font:600 12.5px/1 'Barlow',sans-serif;color:var(--c-muted);
letter-spacing:.14em;text-transform:uppercase}
/* --- Brotkrumen ----------------------------------------------------------- */
.bl-crumbs{max-width:1100px;margin:0 auto;padding:14px clamp(18px,4vw,32px) 0;
font:400 13px/1.5 'Work Sans',sans-serif;color:var(--c-muted)}
.bl-crumbs a{color:var(--c-muted);text-decoration:none}
.bl-crumbs a:hover{color:var(--c-accent-ink);text-decoration:underline}
.bl-crumbs span{margin:0 6px;opacity:.6}
@media(max-width:900px){
.bl-art p,.bl-art li{font-size:15.5px!important;line-height:1.7!important}
.bl-card p{font-size:14.5px!important}
.bl-cta-in{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
.bl-card,.bl-card-media img{transition:none}
.bl-card:hover{transform:none}
.bl-card:hover .bl-card-media img{transform:none}
}
/* --- Artikelspalte + Inhaltsverzeichnis ----------------------------------- */
.bl-body{max-width:1100px;margin:0 auto}
.bl-art h2{scroll-margin-top:104px}
.bl-toc{
margin:0 clamp(18px,4vw,32px) 30px;padding:16px 20px 18px;box-sizing:border-box;
background:var(--c-ink-800);border:1px solid var(--c-line-dark);border-left:3px solid var(--c-signal);
}
.bl-toc h2{margin:0 0 12px;font:600 11.5px/1 'Barlow',sans-serif;color:var(--c-muted);
letter-spacing:.14em;text-transform:uppercase}
.bl-toc ol{counter-reset:t;margin:0;padding:0;list-style:none;display:grid;gap:9px}
.bl-toc li{counter-increment:t}
.bl-toc a{position:relative;display:block;padding-left:26px;
font:400 14.5px/1.45 'Work Sans',sans-serif;color:var(--c-text-2);
text-decoration:none;transition:color .18s ease}
.bl-toc a::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:1px;
font:700 11px/1.9 'Barlow',sans-serif;color:var(--c-muted);transition:color .18s ease}
.bl-toc a:hover{color:var(--c-accent-ink);text-decoration:underline;text-underline-offset:3px}
.bl-toc a[aria-current="true"]{color:var(--c-accent-ink);font-weight:600}
.bl-toc a[aria-current="true"]::before{color:var(--c-signal)}
.bl-toc a:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px}
/* --- Autorenkasten (E-E-A-T) ---------------------------------------------- */
.bl-autor{
margin:36px 0 0;padding:20px;display:flex;align-items:flex-start;gap:16px;box-sizing:border-box;
background:var(--c-ink-800);border:1px solid var(--c-line-dark);
}
.bl-autor img{width:54px;height:54px;flex:none;object-fit:contain;box-sizing:border-box;
padding:6px;background:var(--c-ink-700);border:1px solid var(--c-line-dark)}
.bl-autor-name{margin:0 0 6px!important;font:600 15px/1.3 'Barlow',sans-serif!important;
color:var(--c-text)!important}
.bl-autor-text{margin:0!important;font:400 14px/1.65 'Work Sans',sans-serif!important;
color:var(--c-muted)!important}
.bl-autor-text a{color:var(--c-accent-ink)}
/* --- Lesefortschritt (per JS eingefügt) ----------------------------------- */
.bl-fortschritt{position:fixed;left:0;top:0;height:2px;width:100%;z-index:61;
background:transparent;pointer-events:none}
.bl-fortschritt i{display:block;height:100%;width:0;background:var(--c-signal);
transform-origin:left center}
@media(min-width:1100px){
.bl-body{display:grid;grid-template-columns:236px minmax(0,1fr);align-items:start;
padding-right:clamp(18px,4vw,32px)}
.bl-toc{position:sticky;top:104px;margin:0 0 0 clamp(18px,4vw,32px);
max-height:calc(100vh - 148px);overflow:auto}
.bl-art{padding-left:clamp(24px,3vw,40px)}
}
@media(max-width:520px){
.bl-autor{flex-direction:column;gap:12px}
}
/* Punkt und Text bleiben ein Stueck – sonst bricht die Zeile hinter dem Punkt um. */
.bl-meta .bl-teil{display:inline-flex;align-items:center;gap:10px}
/* Nummerierte Zwischenueberschriften. Die Ziffern kommen aus dem Zaehler, nicht
aus dem Text – so bleibt die Reihenfolge auch beim Umstellen richtig, und
Screenreader lesen die Ueberschrift ohne vorangestellte Zahl vor. */
.bl-art{counter-reset:ab}
.bl-art h2{counter-increment:ab}
.bl-art h2::before{content:counter(ab,decimal-leading-zero);
display:inline-block;margin-right:14px;color:var(--c-signal);
font-size:.72em;vertical-align:.14em}
/* --- Blog-Karten ohne Bild ------------------------------------------------
Die Beitragsbilder sind vorerst entfernt. Die Kategorie steht deshalb oben im
Kartentext; beim Überfahren zieht eine gelbe Kante über die Oberseite und der
Pfeil unten rechts rückt nach. Kommen Bilder zurück, greifen die Regeln für
.bl-card-media weiter oben wieder. */
.bl-card-body{padding:26px 24px 22px}
.bl-card-body>.bl-cat{position:static;align-self:flex-start;margin:0 0 18px}
.bl-card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;
background:var(--c-signal);transform:scaleX(0);transform-origin:left;pointer-events:none;
transition:transform .4s cubic-bezier(.16,1,.3,1)}
.bl-card:hover::before{transform:scaleX(1)}
.bl-card-foot::after{content:"";margin-left:auto;width:18px;height:18px;flex:none;background:var(--c-accent-ink);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
transition:transform .3s cubic-bezier(.16,1,.3,1)}
.bl-card:hover .bl-card-foot::after{transform:translateX(4px)}
/* Ohne Titelbild braucht der Kopf eines Beitrags eine klare Kante zum Text */
.bl-hero+.bl-body{padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--c-line-dark)}
/* --- Ablauf: Symbole, die die gelbe Linie schon erreicht hat --------------- */
[data-track] li>span:first-child{transition:border-color .4s ease,color .4s ease,background-color .4s ease}
[data-track] li.ist-erreicht>span:first-child{border-color:var(--c-signal)!important}
/* --- Animationen (GSAP) ---------------------------------------------------
Die Klasse .anim setzt ein kleines Skript im , und zwar nur, wenn der
Besucher keine reduzierte Bewegung eingestellt hat. Sie blendet die Elemente
aus, die beim Laden eingeblendet werden – so blitzen sie nicht erst kurz auf.
site.js nimmt die Klasse wieder weg, sobald GSAP übernimmt. Lädt kein
JavaScript, macht die Notfall-Animation nach drei Sekunden alles sichtbar. */
.anim [data-anim],.anim .bl-grid>li{opacity:0;animation:anim-notfall 0s 3s forwards}
@keyframes anim-notfall{to{opacity:1}}