/* Reparatur-Aufträge: Werkstatt-Look. Dunkle Flächen, Signalorange, Barlow (selbst gehostet). */
@font-face{font-family:Barlow;src:url(/assets/fonts/Barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(/assets/fonts/Barlow-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Barlow;src:url(/assets/fonts/Barlow-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Barlow;src:url(/assets/fonts/Barlow-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/BarlowCondensed-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/BarlowCondensed-800.woff2) format("woff2");font-weight:800;font-display:swap}
/* Ersatzschriften mit Barlow-Maßen: verhindern Layout-Sprünge (CLS), solange die Webfonts laden */
@font-face{font-family:"Barlow Ersatz";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Helvetica"),local("Roboto");font-weight:400 500;size-adjust:96%;ascent-override:104%;descent-override:21%;line-gap-override:0%}
@font-face{font-family:"Barlow Ersatz";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Helvetica Bold"),local("Roboto Bold");font-weight:600 800;size-adjust:92%;ascent-override:108.5%;descent-override:21.7%;line-gap-override:0%}
@font-face{font-family:"Barlow Condensed Ersatz";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Helvetica Bold"),local("Roboto Bold");font-weight:600 900;size-adjust:69%;ascent-override:144%;descent-override:29%;line-gap-override:0%}

:root{
  --nacht:#13100c;--kohle:#1d1914;--russ:#2a241d;--linie:#3a3229;
  /* --grau 5,0:1 auf Papier; --signal-dunkel #a84f00 = 4,9:1 auf Papier, 5,5:1 auf Weiß (WCAG AA) */
  --papier:#f4f1ea;--weiss:#fffdf9;--tinte:#1b1814;--grau:#615a50;--hell:#d9d2c5;--rand:#8a8172;
  --signal:#ff8a1f;--signal-dunkel:#a84f00;--gruen:#2f9e5b;--gruen-text:#237a46;--rot:#b0402b;
  --fokus:#a84f00;
  --rund:6px;--schatten:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.08);
  --breite:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:17px/1.6 Barlow,"Barlow Ersatz",system-ui,sans-serif;color:var(--tinte);background:var(--papier)}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--signal-dunkel);text-underline-offset:.15em}
a:hover{color:var(--tinte)}
/* Fokus: immer sichtbar bei Tastatur, dunkles Orange auf hellen Flächen, Signalorange auf dunklen */
.kopf,.held,.dunkel,.fuss,.kasten,.ergebnis,.ticker,.probe{--fokus:var(--signal)}
.cta,.gegenueber .neu{--fokus:var(--nacht)}
:focus-visible{outline:3px solid var(--fokus);outline-offset:2px}
a:focus-visible,button:focus-visible,summary:focus-visible,.knopf:focus-visible,.chip:focus-visible,.betrag:focus-visible{outline:3px solid var(--fokus);outline-offset:3px;border-radius:var(--rund)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--fokus);outline-offset:1px}
.kopf .knopf:focus-visible{outline-color:#fff}
.cta .knopf:focus-visible{outline-color:var(--nacht)}
h1,h2,h3{font-family:"Barlow Condensed","Barlow Condensed Ersatz",Barlow,sans-serif;line-height:1.08;letter-spacing:.005em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem);font-weight:800;text-transform:uppercase}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:700;text-transform:uppercase}
h3{font-size:1.35rem;font-weight:700}
p{margin:0 0 1em}
.breite{max-width:var(--breite);margin:0 auto;padding:0 16px}
.klein{font-size:.88rem;color:var(--grau)}
code{font-size:.82em}

/* Kopf */
.kopf{background:var(--nacht);color:#fff;position:sticky;top:0;z-index:20;border-bottom:1px solid var(--linie)}
.kopf .breite{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:16px}
.marke{font-family:"Barlow Condensed","Barlow Condensed Ersatz",sans-serif;font-weight:800;font-size:1.45rem;color:#fff;text-decoration:none;letter-spacing:.04em;white-space:nowrap}
.marke span{color:var(--signal)}
.kopf nav{display:flex;align-items:center;gap:20px}
.kopf nav a{color:#e9e3d8;text-decoration:none;font-weight:500;font-size:.98rem}
.kopf nav a:hover{color:var(--signal)}
.kopf nav a.knopf,.kopf nav a.knopf:hover{color:var(--nacht)}
.kopf .guthaben{background:var(--russ);border:1px solid var(--linie);padding:4px 10px;border-radius:999px;font-weight:600;color:var(--signal)}
.kopf .abmelden{margin:0}
.kopf .abmelden button{background:none;border:0;color:#a9a195;font:inherit;cursor:pointer;padding:0}
.menue{display:none;background:none;border:0;padding:10px;cursor:pointer;min-width:44px;min-height:44px;margin-right:-10px}
.menue span{display:block;width:24px;height:2px;background:#fff;margin:5px 0}
@media (max-width:900px){
  .menue{display:block}
  .kopf nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--nacht);flex-direction:column;align-items:stretch;padding:8px 16px 16px;gap:2px;border-bottom:1px solid var(--linie);max-height:calc(100vh - 64px);overflow-y:auto}
  .kopf nav.offen{display:flex}
  .kopf nav a,.kopf .abmelden button{display:flex;align-items:center;min-height:44px}
  .kopf nav a.knopf{justify-content:center;margin-top:8px}
  .kopf .guthaben{align-self:flex-start}
  .navgruppe{display:flex;flex-direction:column}
  .navgruppe>.navkopf{font-weight:700;color:#fff}
  .navunter{display:flex;flex-direction:column;padding-left:14px;border-left:2px solid var(--linie);margin:0 0 6px 2px}
  .navunter a{font-size:.95rem;min-height:40px}
}
/* Hauptmenü mit vier Bereichen und Untermenüs (Stefan 25.10.2026); Desktop: aufklappen bei Zeiger oder Tastaturfokus */
@media (min-width:901px){
  .navgruppe{position:relative}
  .navgruppe>.navkopf::after{content:"";display:inline-block;margin-left:6px;border:4px solid transparent;border-top-color:currentColor;vertical-align:2px}
  .navunter{display:none;position:absolute;top:100%;left:-14px;min-width:250px;background:var(--nacht);border:1px solid var(--linie);border-radius:8px;padding:8px 0;z-index:30;box-shadow:0 12px 30px rgba(0,0,0,.35)}
  .navgruppe:hover>.navunter,.navgruppe:focus-within>.navunter{display:block}
  .navunter a{display:block;padding:9px 16px;white-space:nowrap}
  .navunter a:hover{background:var(--russ)}
  .navgruppe::before{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
}
.boerse-im-markt{margin-top:40px}
.inserat .fakten{margin:10px 0}
.probe{background:var(--signal);color:var(--nacht);text-align:center;font-weight:600;font-size:.9rem;padding:6px 16px}

/* Knöpfe */
.knopf{display:inline-block;background:var(--signal);color:var(--nacht);border:2px solid var(--signal);border-radius:var(--rund);padding:11px 20px;font:700 1rem Barlow,"Barlow Ersatz",sans-serif;
  text-decoration:none;cursor:pointer;transition:background .15s,transform .15s;text-align:center}
.knopf:hover{background:#ffa04a;color:var(--nacht);transform:translateY(-1px)}
.knopf.zweit{background:transparent;color:inherit;border-color:currentColor}
.knopf.zweit:hover{background:rgba(255,138,31,.12)}
.knopf.gross{padding:15px 26px;font-size:1.1rem;width:100%}
.knopf.klein{padding:6px 12px;font-size:.9rem}
.dunkel .knopf.zweit,.held .knopf.zweit,.kasten .knopf.zweit{color:#fff}
@media (max-width:900px){.knopf{min-height:44px}.knopf.klein{padding:10px 14px}}

/* Startseite */
.held{background:var(--nacht) center/cover no-repeat;color:#fff;position:relative;overflow:hidden}
/* Ersatz für das per CSP (style-src 'self') blockierte Inline-Hintergrundbild der Startseite */
.held:has(video){background-image:url(/assets/bilder/hero-1920.webp)}
.held .breite:not(:has(.ticker)){grid-template-columns:1fr}
.held::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(19,16,12,.96) 0%,rgba(19,16,12,.82) 48%,rgba(19,16,12,.35) 100%)}
.held video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.held .breite{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;padding-top:72px;padding-bottom:72px;align-items:center}
.held .vorzeile{color:var(--signal);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.85rem;margin-bottom:12px}
.held h1{color:#fff}
.held h1 em{font-style:normal;color:var(--signal)}
.held p.lead{font-size:1.2rem;color:#e6dfd3;max-width:36em}
.held .knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.held .belege{display:flex;gap:28px;flex-wrap:wrap;margin-top:32px;color:#cfc7b9;font-size:.95rem}
.held .belege strong{display:block;font:800 2rem "Barlow Condensed","Barlow Condensed Ersatz",sans-serif;color:#fff}
.ticker{background:rgba(29,25,20,.92);border:1px solid var(--linie);border-radius:10px;padding:16px;backdrop-filter:blur(4px)}
.ticker h2{font-size:1.1rem;color:#fff;display:flex;align-items:center;gap:8px;margin-bottom:12px}
.ticker h2::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--gruen);box-shadow:0 0 0 0 rgba(47,158,91,.6);animation:puls 1.8s infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(47,158,91,.6)}70%{box-shadow:0 0 0 10px rgba(47,158,91,0)}100%{box-shadow:0 0 0 0 rgba(47,158,91,0)}}
.ticker ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;align-content:start;min-height:23rem}/* Platz für 5 Einträge, kein Sprung beim Nachladen */
.ticker li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;background:var(--russ);border-radius:6px;padding:10px 12px;font-size:.95rem;color:#ece6db}
.ticker li small{color:#a9a195;grid-column:1}
.ticker li b{grid-row:1/3;grid-column:2;align-self:center;font:800 1.35rem "Barlow Condensed","Barlow Condensed Ersatz",sans-serif;color:var(--signal)}
.ticker .ticker-hinweis{margin:12px 0 0;font-size:.85rem;color:#a9a195}
@media (max-width:900px){.held .breite{grid-template-columns:1fr;padding-top:44px;padding-bottom:44px}}

.band{padding:72px 0}
.band.dunkel{background:var(--kohle);color:#ece6db}
.band.dunkel h2,.band.dunkel h3{color:#fff}
.band.weiss{background:var(--weiss)}
.band.dunkel .gegenueber .neu h3{color:var(--nacht)}
.dunkel .klein:not(.knopf),.kasten .klein:not(.knopf),.ergebnis .klein{color:#a9a195}
.dunkel a:not(.knopf),.kasten a:not(.knopf),.ergebnis a{color:#ffb066}
.dunkel a:not(.knopf):hover,.kasten a:not(.knopf):hover{color:#fff}
/* Ersatz für per CSP blockierte Inline-Abstände (build.py: <p style="margin-top:24px">) */
.band .breite>p[style*="margin-top"]{margin-top:24px}
.einleitung{max-width:46em;font-size:1.15rem}
.gegenueber{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}
.gegenueber>div{border-radius:10px;padding:28px}
.gegenueber .alt{background:var(--russ);color:#cfc7b9}
.gegenueber .neu{background:var(--signal);color:var(--nacht)}
.gegenueber h3{font-size:1.5rem}
.gegenueber ol{margin:0;padding-left:1.2em}
.gegenueber li{margin-bottom:.4em}
.schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s;margin-top:28px}
.schritt{background:var(--weiss);border:1px solid var(--hell);border-radius:10px;padding:22px;position:relative}
.schritt::before{counter-increment:s;content:counter(s);font:800 3rem "Barlow Condensed","Barlow Condensed Ersatz",sans-serif;color:var(--signal-dunkel);line-height:1;display:block;margin-bottom:8px}
.preisstufen{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
.preisstufe{background:var(--weiss);border:1px solid var(--hell);border-radius:10px;padding:20px}
.preisstufe .k{font:800 2.4rem "Barlow Condensed","Barlow Condensed Ersatz",sans-serif;color:var(--signal-dunkel);line-height:1}
.preisstufe .von{font:700 1.6rem "Barlow Condensed","Barlow Condensed Ersatz",sans-serif}
.preisstufe small{color:var(--grau)}
.bildtext{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.bildtext img{border-radius:10px;box-shadow:var(--schatten)}
.raster3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.kachel-link{display:block;background:var(--weiss);border:1px solid var(--hell);border-radius:10px;padding:22px;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.kachel-link:hover{transform:translateY(-2px);box-shadow:var(--schatten);color:inherit}
.kachel-link h3{margin-bottom:.3em}
.kachel-link p{color:var(--grau);margin:0}
.zahlenband{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:left}
.zahlenband strong{display:block;font:800 clamp(2.2rem,5vw,3.4rem) "Barlow Condensed","Barlow Condensed Ersatz",sans-serif;color:var(--signal);line-height:1}
.zahlenband span{color:#cfc7b9}
.faq details{background:var(--weiss);border:1px solid var(--hell);border-radius:8px;margin-bottom:10px;padding:0 18px}
.faq summary{cursor:pointer;font-weight:600;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--signal-dunkel);font-weight:800}
.faq details[open] summary::after{content:"–"}
.cta{background:var(--signal);color:var(--nacht);border-radius:12px;padding:40px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta h2{margin:0;color:var(--nacht)}
.cta .knopf{background:var(--nacht);color:#fff;border-color:var(--nacht)}
@media (max-width:900px){
  .gegenueber,.bildtext,.raster3{grid-template-columns:1fr}
  .schritte,.preisstufen,.zahlenband{grid-template-columns:1fr 1fr}
  .band{padding:48px 0}
}
@media (max-width:520px){.schritte,.preisstufen,.zahlenband{grid-template-columns:1fr}.cta{padding:24px}}

/* Artikel (Ratgeber, Rechtstexte) */
.artikel{max-width:760px;margin:0 auto;padding:40px 16px 64px}
.artikel .vorzeile{color:var(--signal-dunkel);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.82rem}
.artikel .kurzantwort{background:var(--weiss);border-left:4px solid var(--signal);padding:16px 20px;font-size:1.08rem;margin:20px 0 28px;border-radius:0 8px 8px 0}
.artikel h2{margin-top:1.6em;font-size:1.8rem}
.artikel h3{margin-top:1.3em}
.artikel table{width:100%;border-collapse:collapse;margin:1em 0 1.4em;font-size:.95rem;display:block;overflow-x:auto}
.artikel th,.artikel td{border-bottom:1px solid var(--hell);padding:8px 10px;text-align:left;vertical-align:top}
.artikel th{background:var(--weiss)}
.artikel blockquote{margin:1em 0;padding:12px 18px;background:var(--weiss);border-left:4px solid var(--hell)}
.artikel .quellen{font-size:.9rem;color:var(--grau);border-top:1px solid var(--hell);margin-top:2.5em;padding-top:1em}
.artikel .meta{font-size:.9rem;color:var(--grau)}
.artikel .kasten{background:var(--kohle);color:#ece6db;border-radius:10px;padding:22px 24px;margin:2em 0}
.artikel .kasten h3{color:#fff;margin-top:0}
.brotkrumen{font-size:.88rem;color:var(--grau);margin-bottom:12px}
.brotkrumen a{color:var(--grau);display:inline-block;padding:6px 0}
.inhaltsverzeichnis{background:var(--weiss);border:1px solid var(--hell);border-radius:8px;padding:14px 20px;margin-bottom:24px;font-size:.95rem}
.inhaltsverzeichnis ol{margin:.4em 0 0;padding-left:1.2em}
.inhaltsverzeichnis li{margin:.25em 0}
.artikel{overflow-wrap:break-word;hyphens:auto}
.artikel p,.artikel li{max-width:68ch}
.artikel h1,.artikel h2,.artikel h3{hyphens:manual}
.artikel img{border-radius:10px;margin:8px 0 20px}
/* Ersatz für per CSP blockierte Inline-Stile (Rechner-Breite, Dach-Kacheln) */
.artikel:has(.rechner){max-width:1000px}
.kachel-link .vorzeile{color:var(--signal-dunkel);font-weight:700;text-transform:uppercase;font-size:.8rem;letter-spacing:.1em;margin:0}

/* Fuß */
.fuss{background:var(--nacht);color:#a9a195;padding:40px 0;font-size:.92rem;margin-top:0}
.fuss a{color:#d9d2c5}
.fuss .spalten{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px;margin-bottom:24px}
.fuss h2,.fuss h4,.fuss .fuss-titel{color:#fff;font-family:"Barlow Condensed","Barlow Condensed Ersatz",sans-serif;font-weight:700;line-height:1.08;text-transform:uppercase;font-size:1.05rem;margin:0 0 .6em}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:.35em}
.fuss a:hover{color:var(--signal)}
@media (max-width:760px){
  .fuss .spalten{grid-template-columns:1fr 1fr}
  .fuss li{margin:0}
  .fuss li a{display:inline-block;padding:10px 0}
  .fuss p a{display:inline-block;padding:10px 0}
}

/* App: Markt, Partnerbereich, Verwaltung */
.app .inhalt{padding-top:32px;padding-bottom:64px;min-height:60vh}
.app h1{font-size:clamp(1.8rem,4vw,2.6rem)}
.meldung{padding:12px 16px;border-radius:var(--rund);margin:0 0 16px;font-weight:500}
.meldung.ok{background:#e3f3e8;color:#1d5c37}
.meldung.fehler{background:#f9e3de;color:#7d2717}
.meldung.info{background:#fff1df;color:#6b3d00}
.rot{color:var(--rot)}
.markt-kopf{margin-bottom:24px}
.filter{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.filter select,.filter input,.zeile input,.zeile select{padding:9px 12px;min-height:44px;border:1px solid var(--rand);border-radius:var(--rund);font:inherit;background:var(--weiss);color:var(--tinte);max-width:100%}
.live{font-weight:600;color:var(--gruen-text)}
.live::before{content:"● "}
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.karte{background:var(--weiss);border:1px solid var(--hell);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:8px;position:relative;scroll-margin-top:90px}
.karte.klasse-A{border-top:4px solid var(--signal)}
.karte.test{background:repeating-linear-gradient(-45deg,var(--weiss),var(--weiss) 14px,#fff6ea 14px,#fff6ea 28px)}
.karte header{display:flex;gap:8px;flex-wrap:wrap;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--grau);font-weight:600}
.karte .klasse{background:var(--nacht);color:#fff;padding:1px 7px;border-radius:4px}
.testmarke{background:var(--signal);color:var(--nacht);padding:1px 7px;border-radius:4px;font-size:.75rem;font-weight:700;text-transform:uppercase}
.karte h2,.karte h3{margin:0;font-size:1.4rem;font-weight:700;text-transform:none}
.karte .modell{margin:0;color:var(--grau);font-size:.95rem}
.karte .fakten{list-style:none;margin:0;padding:0;font-size:.95rem}
.karte .fakten li::before{content:"› ";color:var(--signal-dunkel);font-weight:700}
.karte .kurztext{font-style:italic;color:#4b453d;margin:0;font-size:.95rem}
.karte .preis{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:auto}
.karte .preis strong{font:800 2.2rem "Barlow Condensed","Barlow Condensed Ersatz",sans-serif}
.karte .preis span{color:var(--grau);font-size:.85rem}
.karte .preis em{font-style:normal;font-size:.88rem;color:var(--signal-dunkel);font-weight:600;margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.stufen{display:flex;gap:1px}
.stufen i{flex:1;height:5px;background:var(--hell);border-radius:2px}
.stufen i.vorbei{background:#9c9282}
.stufen i.jetzt{background:var(--signal)}
.kaufform{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 0}
.kaufform .knopf{flex:1;min-width:140px;padding:10px 12px}
.hinweis-klein{font-size:.88rem;color:var(--grau);font-weight:600}
.karte.weg{opacity:.45;pointer-events:none}
.leer{background:var(--weiss);border:1px dashed var(--hell);border-radius:10px;padding:32px;grid-column:1/-1}
.vergeben-liste{margin-top:40px}
.vergeben-liste ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.vergeben-liste li{background:var(--weiss);border:1px solid var(--hell);border-radius:6px;padding:8px 12px;font-size:.92rem;color:var(--grau)}
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:16px 0 24px}
.kachel{background:var(--weiss);border:1px solid var(--hell);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:4px}
.kachel span{color:var(--grau);font-size:.9rem}
.kachel strong{font:800 2rem "Barlow Condensed","Barlow Condensed Ersatz",sans-serif}
.tipp{background:#fff1df;border-radius:8px;padding:14px 18px;margin-bottom:24px}
.tabellenrahmen{overflow-x:auto;background:var(--weiss);border:1px solid var(--hell);border-radius:8px}
.tabelle{width:100%;border-collapse:collapse;font-size:.94rem;background:var(--weiss)}
.tabelle th,.tabelle td{padding:9px 12px;border-bottom:1px solid #ece6db;text-align:left;vertical-align:top}
.tabelle th{background:#f9f6f0;font-weight:600;white-space:nowrap}
.tabelle tr.aus{opacity:.5}
.tabelle .zahl{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tabelle .minus{color:var(--rot)}
.tabelle .plus{color:var(--gruen-text)}
.formular{display:flex;flex-direction:column;gap:14px;background:var(--weiss);border:1px solid var(--hell);border-radius:10px;padding:22px}
.formular.breit{max-width:900px}
.feld{display:flex;flex-direction:column;gap:4px;min-width:0}
.feld label{font-weight:600;font-size:.95rem}
.feld input,.feld select,.feld textarea,.formular textarea{padding:11px 12px;min-height:46px;border:1px solid var(--rand);border-radius:var(--rund);font:inherit;background:#fff;color:var(--tinte);width:100%}
.feld input[type=range]{min-height:44px;padding:0;border:0;background:none}
.feld input::placeholder,.formular textarea::placeholder{color:#7a7266;opacity:1}
.feld textarea{min-height:130px}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:3px solid var(--fokus);outline-offset:1px;border-color:var(--fokus)}
.feld small{color:var(--grau)}
.feld.fehlerhaft input{border-color:var(--rot)}
small.fehler{color:var(--rot);font-weight:600}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.zweispaltig{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.schmal{max-width:560px}
.haken{display:block;position:relative;padding:4px 0 4px 34px;font-size:.93rem;cursor:pointer}
.haken input{position:absolute;left:0;top:5px;margin:0;width:22px;height:22px;accent-color:var(--signal-dunkel);cursor:pointer}
.haken-liste{padding-left:1.1em}
.honig{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rand);border-radius:999px;padding:5px 12px;min-height:36px;font-size:.92rem;background:#fff;color:inherit;text-decoration:none}
@media (max-width:900px){.chip{min-height:44px;padding:8px 14px}}
.chip.an{background:var(--nacht);color:#fff;border-color:var(--nacht)}
fieldset{border:0;padding:0;margin:0}
legend{font-weight:600;font-size:.95rem;margin-bottom:4px}
.betraege{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.betrag{background:var(--weiss);border:2px solid var(--rand);color:var(--tinte);border-radius:10px;padding:18px;text-align:left;cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:2px}
.betrag:hover{border-color:var(--signal)}
.betrag strong{font:800 1.9rem "Barlow Condensed","Barlow Condensed Ersatz",sans-serif}
.betrag span{color:var(--grau);font-size:.9rem}
.betrag em{font-style:normal;color:var(--gruen-text);font-weight:700;font-size:.9rem}
.zeile{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
.kunde{background:var(--weiss);border:1px solid var(--hell);border-radius:10px;padding:22px;margin:16px 0}
.zitat{white-space:pre-wrap;background:#f9f6f0;padding:12px;border-radius:6px}
.rekla{margin-top:20px}
.rekla summary{cursor:pointer;font-weight:600}
.inserate{display:grid;gap:16px}
.inserat{background:var(--weiss);border:1px solid var(--hell);border-radius:10px;padding:20px}
.inserat header{display:flex;justify-content:space-between;gap:10px;font-size:.85rem;color:var(--grau);text-transform:uppercase;letter-spacing:.05em;font-weight:600;flex-wrap:wrap}
@media (max-width:760px){.zwei,.zweispaltig,.betraege{grid-template-columns:1fr}.karten{grid-template-columns:1fr}}

/* Rasterspalten dürfen schrumpfen (sonst drücken Tabellen und Formulare die Seite breit) */
.bildtext>*,.zweispaltig>*,.gegenueber>*,.raster3>*,.zwei>*,.held .breite>*,.schritte>*,.preisstufen>*,.zahlenband>*,.rechner>*,.kacheln>*{min-width:0}
.formular input,.formular select,.formular textarea{max-width:100%}

/* Rechner */
.rechner{background:var(--weiss);border:1px solid var(--hell);border-radius:12px;padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.rechner .ergebnis{background:var(--kohle);color:#ece6db;border-radius:10px;padding:22px}
.rechner .ergebnis strong{display:block;font:800 2.4rem "Barlow Condensed","Barlow Condensed Ersatz",sans-serif;color:var(--signal)}
.rechner input[type=range]{width:100%;accent-color:var(--signal)}
.rechner output{font-weight:700}
@media (max-width:760px){.rechner{grid-template-columns:1fr}}

/* Weniger Bewegung: Puls, Übergänge und Hero-Video aus (Standbild bleibt als Hintergrund) */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .ticker h2::before{animation:none;box-shadow:none}
  .held video{display:none}
  .knopf:hover,.kachel-link:hover{transform:none}
}
/* Windows-Kontrastmodus: Fokus und Knöpfe bleiben erkennbar */
@media (forced-colors:active){
  .knopf,.chip,.betrag{border:2px solid ButtonText}
  :focus-visible{outline:3px solid Highlight}
}

/* Ersatz für frühere Inline-Stile (CSP) */
.abstand-oben{margin-top:24px}
.ergebnis .klein.hell{color:#a9a195}
.hell-link{color:#ffb066}
.held-einspaltig .breite{grid-template-columns:1fr}

/* Tabellen im Partnerbereich auf dem Handy als Karten (Suchaufträge, Käufe, Konto) */
@media (max-width:640px){
  .tabellenrahmen{border:0;background:none;overflow:visible}
  .tabellenrahmen .tabelle,.tabellenrahmen .tabelle tbody,.tabellenrahmen .tabelle tr,.tabellenrahmen .tabelle td{display:block;width:100%}
  .tabellenrahmen .tabelle thead{display:none}
  .tabellenrahmen .tabelle tr{background:var(--weiss);border:1px solid var(--hell);border-radius:10px;padding:10px 12px;margin-bottom:10px}
  .tabellenrahmen .tabelle td{border:0;padding:3px 0;text-align:left}
  .tabellenrahmen .tabelle td.zahl{text-align:left}
  .tabellenrahmen .tabelle td form{margin-top:6px}
}
/* Startseite Handy/Tablet/Notebook: FOMO-Band, Preis-Uhr, PLZ-Check */
.band.fomo{background:var(--signal);color:var(--nacht);padding:22px 0}
.fomo-band{display:flex;align-items:center;gap:18px 28px;flex-wrap:wrap;justify-content:space-between}
.fomo-band p{margin:0;font-size:1.1rem}
.fomo-live{font-weight:700}
.fomo-live span{font:800 1.8rem "Barlow Condensed","Barlow Condensed Ersatz",sans-serif;margin-right:6px}
.band.fomo .knopf{background:var(--nacht);color:#fff;border-color:var(--nacht)}
.preisuhr{background:var(--weiss);border:1px solid var(--hell);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}
.preisuhr input[type=range]{width:100%;accent-color:var(--signal);min-height:44px}
.preisuhr label{font-weight:600}
.pu-risiko{margin:0;padding:10px 12px;border-radius:8px;background:#e3f3e8;color:#1d5c37;font-weight:600;transition:background .2s}
.pu-risiko.stufe2,.pu-risiko.stufe3{background:#fff1df;color:#6b3d00}
.pu-risiko.stufe4,.pu-risiko.stufe5,.pu-risiko.stufe6,.pu-risiko.stufe7{background:#f9e3de;color:#7d2717}
.plzcheck{background:var(--weiss);border:1px solid var(--hell);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:10px}
.plzcheck label{font-weight:600}
.plzcheck input{flex:1;min-width:0;padding:11px 12px;border:1px solid #cfc6b6;border-radius:var(--rund);font:inherit;font-size:1.2rem;letter-spacing:.08em}
.pc-ergebnis{margin:0}
.pc-ergebnis strong{font:800 1.6rem "Barlow Condensed","Barlow Condensed Ersatz",sans-serif;color:var(--signal-dunkel)}
.pc-ergebnis .knopf{margin-top:12px;display:inline-block}
.schritte.drei{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.schritte.drei{grid-template-columns:1fr}}
.kopf nav a{white-space:nowrap}