/* ---------- Lokale Schriften ---------- */
@font-face{font-family:"Manrope";src:url("fonts/Manrope-VariableFont_wght.ttf") format("truetype");font-style:normal;font-weight:200 800;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("fonts/SourceSans3-VariableFont_wght.ttf") format("truetype");font-style:normal;font-weight:200 900;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("fonts/SourceSans3-Italic-VariableFont_wght.ttf") format("truetype");font-style:italic;font-weight:200 900;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/SourceSerif4-VariableFont_opsz,wght.ttf") format("truetype");font-style:normal;font-weight:200 900;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/SourceSerif4-Italic-VariableFont_opsz,wght.ttf") format("truetype");font-style:italic;font-weight:200 900;font-display:swap}

:root{
  --blau:#163A5F; --blau-tief:#102A43; --orange:#E67824; --orange-hell:#D66A18; --orange-cta:#BC5A10; --orange-text:#B4550E; --orange-dunkel:#96450A;
  --creme:#FFF7EA; --gold:#E6B85C; --salbei:#306018; --salbei-hell:#5C8A3C; --braun:#604020; --anthrazit:#263238;
  --weiss:#FFFFFF;
  --linie:#E3DACB; --linie-stark:#CDBFA8;
  --grau:#6B6257; --grau-hell:#F6F1E7;
  --rund:18px; --rund-s:10px;
  --schatten:0 1px 2px rgba(var(--schatten-rgb),.06), 0 8px 24px -12px rgba(var(--schatten-rgb),.18);
  --schatten-hoch:0 2px 4px rgba(var(--schatten-rgb),.08), 0 18px 40px -18px rgba(var(--schatten-rgb),.28);
  --breite:1180px;
  --grund:#FFFFFF;
  --hell:var(--hell); --hell-kraeftig:var(--hell-kraeftig); --hell-leise:var(--hell-leise);
  --hell-topbar:var(--hell-topbar); --hell-fuss:var(--hell-fuss); --hell-fuss-link:var(--hell-fuss-link); --hell-schwach:var(--hell-schwach);
  --schatten-rgb:22,58,95; --dunkel-rgb:16,42,67;
  --hero-ende:var(--hero-ende); --karten-grund:var(--karten-grund); --messing:#B08A3A;
  --f-titel:var(--f-display);
  --f-display:"Manrope","Segoe UI",Arial,sans-serif;
  --f-text:"Source Sans 3","Segoe UI",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--grund); color:var(--anthrazit);
  font-family:var(--f-text); font-size:18px; line-height:1.55;
  overflow-x:hidden;
}
img,svg{max-width:100%}
h1,h2,h3,h4{font-family:var(--f-display); color:var(--blau); margin:0; line-height:1.15; text-wrap:balance; font-weight:700}
h1{font-size:clamp(2.25rem,1.4rem + 3.4vw,4.05rem); letter-spacing:-.02em; font-weight:800}
h2{font-size:clamp(1.65rem,1.15rem + 1.9vw,2.6rem); letter-spacing:-.015em}
h3{font-size:clamp(1.15rem,1rem + .5vw,1.4rem)}
h4{font-size:1.02rem}
p{margin:0}
a{color:var(--blau); text-underline-offset:3px}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px; border-radius:4px}
.sec--blau :focus-visible,.vertrauen :focus-visible,footer :focus-visible,.topbar :focus-visible{outline-color:var(--gold)}
h1:focus-visible{outline:none}
h1:focus{outline:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto!important}}

/* ---------- Layout ---------- */
.wrap{width:100%; max-width:var(--breite); margin:0 auto; padding:0 20px}
.sec{padding:clamp(52px,7vw,96px) 0}
.sec--creme{background:var(--creme)}
.sec--blau{background:var(--blau); color:var(--hell-kraeftig)}
.sec--blau h2,.sec--blau h3{color:#fff}
.kopf{max-width:62ch; display:flex; flex-direction:column; gap:14px; margin-bottom:36px}
.eyebrow{font-family:var(--f-display); font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-text); margin:0}
.sec--blau .eyebrow{color:var(--gold)}
.lead{font-size:clamp(1.05rem,1rem + .35vw,1.2rem); color:var(--grau); max-width:62ch}
.sec--blau .lead{color:var(--hell-leise)}
.gitter{display:grid; gap:20px}
@media(min-width:760px){.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.g4{grid-template-columns:repeat(4,1fr)}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:13px 24px; border-radius:var(--rund-s);
  font-family:var(--f-display); font-weight:700; font-size:1rem; line-height:1.25;
  text-decoration:none; border:2px solid transparent; cursor:pointer; text-align:center;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn--cta{background:var(--orange-cta); color:#fff; border-color:var(--orange-cta)}
.btn--cta:hover{background:var(--orange-dunkel); border-color:var(--orange-dunkel)}
.btn--blau{background:var(--blau); color:#fff; border-color:var(--blau)}
.btn--blau:hover{background:var(--blau-tief); border-color:var(--blau-tief)}
.btn--rand{background:transparent; color:var(--blau); border-color:var(--linie-stark)}
.btn--rand:hover{border-color:var(--blau); background:var(--grau-hell)}
.btn--hell{background:transparent; color:#fff; border-color:rgba(255,255,255,.45)}
.btn--hell:hover{background:rgba(255,255,255,.12); border-color:#fff}
.btn--wa{background:#fff; color:#0B7A50; border-color:#BFE3D2}
.btn--wa:hover{background:#EFFAF4; border-color:#0B7A50}
.btn-reihe{display:flex; flex-wrap:wrap; gap:12px}
.btn-reihe .btn{flex:1 1 240px}
@media(min-width:760px){.btn-reihe .btn{flex:0 0 auto}}

/* ---------- Topbar / Header ---------- */
.topbar{background:var(--blau-tief); color:var(--hell-topbar); font-size:.86rem}
.topbar .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 20px; min-height:40px; padding-block:6px}
.topbar a{color:var(--hell); text-decoration:none; display:inline-flex; align-items:center; gap:7px; padding:5px 2px}
.topbar a:hover{color:#fff; text-decoration:underline}
.topbar-links{display:flex; flex-wrap:wrap; gap:6px 20px; align-items:center}
.topbar .nur-gross{display:none}
.topbar .nur-klein{display:inline}
.topbar .wrap{flex-wrap:nowrap}
@media(min-width:900px){.topbar .nur-gross{display:inline-flex} .topbar .nur-klein{display:none} .topbar .wrap{flex-wrap:wrap}}

.kopfleiste{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.97); backdrop-filter:blur(8px); border-bottom:1px solid var(--linie); box-shadow:inset 0 -4px 0 -1px rgba(48,96,24,.14)}
.kopfleiste .wrap{display:flex; align-items:center; gap:16px; min-height:80px}
@media(min-width:760px){.kopfleiste .wrap{min-height:94px}}
.logo{display:inline-flex; align-items:center; text-decoration:none; margin-right:auto; padding:6px 0}
.logo img{height:54px; width:auto; display:block}
@media(min-width:760px){.logo img{height:68px}}
.logo--fuss{margin-right:0; background:#fff; border-radius:14px; padding:10px 14px}
.logo--fuss img{height:64px}
.hauptnav{display:none}
@media(min-width:1060px){
  .hauptnav{display:flex; align-items:center; gap:4px}
  .hauptnav a{
    font-family:var(--f-display); font-weight:600; font-size:.95rem; color:var(--blau);
    text-decoration:none; padding:10px 13px; border-radius:8px; white-space:nowrap;
  }
  .hauptnav a:hover{background:var(--grau-hell)}
  .hauptnav a[aria-current="page"]{color:var(--orange-text); box-shadow:inset 0 -3px 0 var(--orange)}
}
.kopf-cta{display:none}
@media(min-width:1060px){.kopf-cta{display:inline-flex; padding:12px 20px; min-height:48px; font-size:.95rem}}
.burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:48px; height:48px; padding:0 11px; border:1px solid var(--linie-stark);
  border-radius:10px; background:#fff; cursor:pointer;
}
.burger span{display:block; height:2px; background:var(--blau); border-radius:2px; transition:transform .2s ease, opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:1060px){.burger{display:none}}
.mobilmenu{border-bottom:1px solid var(--linie); background:#fff}
.mobilmenu ul{display:flex; flex-direction:column; padding:10px 0 18px}
.mobilmenu a{
  display:block; padding:15px 4px; font-family:var(--f-display); font-weight:600;
  color:var(--blau); text-decoration:none; border-bottom:1px solid var(--linie); font-size:1.05rem;
}
.mobilmenu a[aria-current="page"]{color:var(--orange-text)}
.mobilmenu .btn{margin-top:16px; width:100%}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(178deg,var(--creme) 0%,var(--hero-ende) 62%,#fff 100%); border-bottom:1px solid var(--linie); overflow:hidden}
.hero .wrap{display:grid; gap:clamp(28px,4vw,54px); padding-block:clamp(40px,6vw,76px)}
@media(min-width:980px){.hero .wrap{grid-template-columns:1.06fr .94fr; align-items:center}}
.hero-text{display:flex; flex-direction:column; gap:22px; min-width:0}
.hero h1 span{color:var(--orange-hell)}
.hero-unter{font-size:clamp(1.08rem,1rem + .45vw,1.28rem); color:var(--grau); max-width:52ch}
.marke{display:inline-flex; align-items:center; gap:9px; align-self:flex-start; background:#fff; border:1px solid #CEDFC2; border-radius:999px; padding:7px 15px 7px 9px; font-family:var(--f-display); font-weight:600; font-size:.85rem; color:var(--salbei)}
.marke i{width:9px; height:9px; border-radius:50%; background:var(--salbei); flex:none}
.hero-bild{position:relative; min-width:0}
.bildkachel{
  border-radius:var(--rund); overflow:hidden; background:var(--grau-hell);
  box-shadow:var(--schatten-hoch); aspect-ratio:4/3; position:relative;
}
.bildkachel>svg,.bildkachel>img{width:100%; height:100%; display:block; object-fit:cover}
.bildnotiz{
  position:absolute; left:0; right:0; bottom:0; padding:11px 16px;
  background:rgba(var(--dunkel-rgb),.92);
  color:var(--hell-kraeftig); font-size:.82rem; font-family:var(--f-display); font-weight:600;
}

/* ---------- Vertrauensleiste ---------- */
.vertrauen{background:var(--blau); color:var(--hell)}
.vertrauen ul{display:grid; gap:2px 34px; padding:22px 0; grid-template-columns:1fr}
@media(min-width:680px){.vertrauen ul{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.vertrauen ul{grid-template-columns:repeat(4,1fr); padding:20px 0}}
.vertrauen li{display:flex; align-items:flex-start; gap:11px; padding:7px 0; font-family:var(--f-display); font-weight:600; font-size:.95rem; line-height:1.35}
.vertrauen svg{width:20px; height:20px; flex:none; margin-top:1px; color:var(--gold)}

/* ---------- Karten ---------- */
.karte{
  background:#fff; border:1px solid var(--linie); border-radius:var(--rund);
  padding:26px; display:flex; flex-direction:column; gap:13px; box-shadow:var(--schatten);
}
.sec--creme .karte{border-color:var(--linie-stark)}
.karte h3{margin:0}
.karte p{color:var(--grau); font-size:1rem}
.karte-fuss{margin-top:auto; padding-top:6px}
.karte-link{font-family:var(--f-display); font-weight:700; color:var(--orange-text); text-decoration:none; display:inline-flex; align-items:center; gap:8px; min-height:44px; align-items:center}
.karte-link:hover{text-decoration:underline}
.zielkarte{padding:0; overflow:hidden}
.zielkarte-bild{aspect-ratio:16/9; background:#FAF6EA; border-bottom:1px solid var(--linie)}
.zielkarte-bild>svg,.zielkarte-bild>img{width:100%; height:100%; display:block; object-fit:contain}
.zielkarte-inhalt{padding:24px 26px 28px; display:flex; flex-direction:column; gap:13px; flex:1}
.zielkarte ul{display:flex; flex-direction:column; gap:8px; font-size:.97rem; color:var(--grau)}
.zielkarte ul li{display:flex; gap:9px; align-items:flex-start}
.zielkarte ul li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--salbei); flex:none; margin-top:9px}
.ikone{width:46px; height:46px; border-radius:12px; background:var(--creme); border:1px solid var(--linie-stark); display:grid; place-items:center; color:var(--blau); flex:none}
.ikone svg{width:24px; height:24px}
.ikone--gruen{background:#EEF4E9; border-color:#CEDFC2; color:var(--salbei)}
.ikone--braun{background:#F6EFE6; border-color:#DFCDB6; color:var(--braun)}

/* ---------- Ablauf ---------- */
.ablauf{counter-reset:s; display:grid; gap:18px}
@media(min-width:860px){.ablauf{grid-template-columns:repeat(4,1fr)}}
.schritt{position:relative; background:#fff; border:1px solid var(--linie); border-radius:var(--rund); padding:24px; display:flex; flex-direction:column; gap:10px}
.schritt-nr{font-family:var(--f-display); font-weight:800; font-size:.8rem; letter-spacing:.1em; color:var(--orange-text)}
.schritt p{color:var(--grau); font-size:.97rem}

/* ---------- Sortiment ---------- */
.produkt{border:1px solid var(--linie); border-radius:var(--rund); overflow:hidden; background:#fff; display:flex; flex-direction:column}
.produkt-bild{aspect-ratio:1/1; background:var(--grau-hell)}
.produkt-bild>svg,.produkt-bild>img{width:100%; height:100%; display:block; object-fit:cover}
.produkt-inhalt{padding:20px; display:flex; flex-direction:column; gap:7px}
.produkt-inhalt p{font-size:.95rem; color:var(--grau)}

/* ---------- Lieferkarte ---------- */
.kartenblock{display:grid; gap:26px}
@media(min-width:1000px){.kartenblock{grid-template-columns:1.75fr 1fr; align-items:start}}
.kartenrahmen{background:#fff; border:1px solid var(--linie-stark); border-radius:var(--rund); padding:12px; box-shadow:var(--schatten)}
.kartenrahmen>.karte-desktop{display:none; width:100%; height:auto; border-radius:12px}
.kartenrahmen>.karte-mobil{display:block}
@media(min-width:700px){.kartenrahmen>.karte-desktop{display:block} .kartenrahmen>.karte-mobil{display:none}}
.karte-schiene{overflow-x:auto; overflow-y:hidden; border-radius:12px; background:var(--karten-grund); -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain}
.karte-schiene img{height:360px; width:auto; max-width:none; display:block}
.karte-wisch{display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--grau); padding:10px 4px 0}
.karte-wisch svg{color:var(--orange)}
.kartenrahmen>svg{width:100%; height:auto; border-radius:12px}
.kartenhinweis{font-size:.95rem; color:var(--grau); padding:14px 8px 4px; border-top:1px solid var(--linie); margin-top:10px}
.karten-cta{background:var(--creme); border:1px solid var(--linie-stark); border-radius:var(--rund); padding:26px; display:flex; flex-direction:column; gap:14px}
.karten-cta ul{display:flex; flex-direction:column; gap:10px; font-size:.97rem; color:var(--grau)}
.karten-cta ul li{display:flex; gap:10px}
.karten-cta ul li b{color:var(--blau); font-family:var(--f-display)}

/* ---------- Referenz ---------- */
.referenz{display:grid; gap:24px}
@media(min-width:900px){.referenz{grid-template-columns:1.1fr .9fr; align-items:center}}
.zahl{font-family:var(--f-display); font-weight:800; font-size:clamp(2.6rem,2rem + 3vw,4.2rem); color:var(--gold); line-height:1; letter-spacing:-.02em}
.beleg{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:var(--rund); padding:26px; display:flex; flex-direction:column; gap:12px}
.beleg dl{margin:0; display:grid; gap:10px}
.beleg dt{font-family:var(--f-display); font-weight:700; color:var(--gold); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase}
.beleg dd{margin:0; color:var(--hell); font-size:1rem}

/* ---------- Case Study ---------- */
.fall{display:grid; gap:18px; counter-reset:f}
@media(min-width:860px){.fall{grid-template-columns:repeat(3,1fr)}}
.fall-schritt{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--rund); padding:24px; display:flex; flex-direction:column; gap:10px;
  position:relative;
}
.fall-schritt h3{font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold)}
.fall-schritt p{color:var(--hell); font-size:1rem}
.fall-zahl{display:block; font-family:var(--f-display); font-weight:800; font-size:2.1rem; color:var(--gold); line-height:1.1; letter-spacing:-.02em; margin-bottom:2px}
.einsatz{margin-top:38px; padding-top:26px; border-top:1px solid rgba(255,255,255,.16)}
.einsatz-titel{font-family:var(--f-display); font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:16px}
.einsatz ul{display:flex; flex-wrap:wrap; gap:10px}
.einsatz li{
  font-family:var(--f-display); font-weight:600; font-size:.9rem; color:var(--hell-kraeftig);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  border-radius:999px; padding:8px 15px;
}
.einsatz-fuss{margin-top:16px; font-size:.85rem; color:var(--hell-schwach)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em; background:rgba(var(--schatten-rgb),.08); padding:2px 6px; border-radius:4px}

/* ---------- FAQ ---------- */
.faq{display:flex; flex-direction:column; gap:10px; max-width:900px}
.faq details{border:1px solid var(--linie); border-radius:var(--rund-s); background:#fff; overflow:hidden}
.faq details[open]{border-color:var(--linie-stark)}
.faq summary{
  cursor:pointer; list-style:none; padding:18px 54px 18px 20px; position:relative;
  font-family:var(--f-display); font-weight:600; color:var(--blau); font-size:1.03rem; min-height:56px;
  display:flex; align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:20px; top:50%; width:11px; height:11px;
  border-right:2.5px solid var(--orange); border-bottom:2.5px solid var(--orange);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .antwort{padding:0 20px 20px; color:var(--grau); font-size:1rem; max-width:70ch}

/* ---------- Formular ---------- */
.formkarte{background:#fff; border:1px solid var(--linie-stark); border-radius:var(--rund); padding:clamp(22px,3vw,34px); box-shadow:var(--schatten)}
form{display:flex; flex-direction:column; gap:18px}
.feld{display:flex; flex-direction:column; gap:7px}
.feld label{font-family:var(--f-display); font-weight:600; font-size:.94rem; color:var(--blau)}
.feld .opt{font-weight:400; color:var(--grau); font-size:.85rem}
.feld input,.feld select,.feld textarea{
  font-family:var(--f-text); font-size:1rem; color:var(--anthrazit); background:#fff;
  border:1.5px solid var(--linie-stark); border-radius:var(--rund-s);
  padding:13px 14px; min-height:52px; width:100%;
}
.feld textarea{min-height:112px; resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--blau); outline:3px solid rgba(230,120,36,.35); outline-offset:0}
.feld input[aria-invalid="true"],.feld textarea[aria-invalid="true"]{border-color:#B3261E; background:#FFF7F6}
.fehler{color:#B3261E; font-size:.87rem; font-weight:600; display:none}
.fehler.an{display:block}
.check{display:flex; gap:12px; align-items:flex-start; font-size:.92rem; color:var(--grau)}
.check input{width:24px; height:24px; min-height:24px; margin-top:2px; flex:none; accent-color:var(--orange)}
.formhinweis{font-size:.87rem; color:var(--grau)}
@media(min-width:720px){.formzeile{display:grid; grid-template-columns:1fr 1fr; gap:18px}}

/* ---------- Kontakt / Footer ---------- */
.kontaktwege{display:grid; gap:14px}
.weg{display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--linie); border-radius:var(--rund-s); padding:18px; text-decoration:none}
.weg:hover{border-color:var(--blau)}
.weg b{display:block; font-family:var(--f-display); color:var(--blau)}
.weg span{font-size:.94rem; color:var(--grau)}
footer{background:var(--blau-tief); color:var(--hell-fuss); padding:56px 0 0; font-size:.95rem}
.footer-gitter{display:grid; gap:32px; padding-bottom:36px}
@media(min-width:820px){.footer-gitter{grid-template-columns:1.4fr 1fr 1fr 1fr}}
footer h4{color:#fff; font-size:.82rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:14px}
footer a{color:var(--hell-fuss-link); text-decoration:none; display:inline-block; padding:6px 0}
footer a:hover{color:#fff; text-decoration:underline}
footer ul{display:flex; flex-direction:column}
.footer-unten{border-top:1px solid rgba(255,255,255,.14); padding:18px 0 calc(20px + var(--sticky-h,0px)); display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:space-between; font-size:.87rem}

/* ---------- Sticky Mobile ---------- */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:rgba(255,255,255,.98); border-top:1px solid var(--linie-stark);
  box-shadow:0 -6px 24px -12px rgba(var(--schatten-rgb),.4);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  display:grid; grid-template-columns:1fr 1fr 1.35fr; gap:8px;
}
@media(min-width:1060px){.sticky{display:none}}
.sticky a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:56px; border-radius:10px; text-decoration:none;
  font-family:var(--f-display); font-weight:700; font-size:.78rem; padding:6px 4px; text-align:center;
}
.sticky svg{width:20px; height:20px}
.sticky .s-tel{background:var(--grau-hell); color:var(--blau); border:1px solid var(--linie-stark)}
.sticky .s-wa{background:#EAF7F0; color:#0B6E48; border:1px solid #BFE3D2}
.sticky .s-cta{background:var(--orange-cta); color:#fff; font-size:.85rem}

/* ---------- Cookie ---------- */
.cookie[hidden],.cookie-wahl[hidden],.cookie .btn[hidden]{display:none!important}
.cookie{
  position:fixed; left:12px; right:12px; z-index:90;
  bottom:calc(12px + var(--sticky-h,0px));
  background:#fff; border:1px solid var(--linie-stark); border-radius:var(--rund);
  box-shadow:var(--schatten-hoch); padding:18px; max-width:520px;
  display:flex; flex-direction:column; gap:14px;
  max-height:calc(100vh - var(--sticky-h,0px) - 28px);
  max-height:calc(100dvh - var(--sticky-h,0px) - 28px);
  overflow-y:auto; overscroll-behavior:contain;
}
@media(min-width:1060px){.cookie{left:auto; right:20px; bottom:20px}}
.cookie p{font-size:.88rem; color:var(--grau); line-height:1.45}
.cookie h3{font-size:1rem}
.cookie .btn-reihe .btn{flex:1 1 140px}
.cookie .btn{min-height:48px; font-size:.92rem}
.cookie-wahl{display:flex; flex-direction:column; gap:12px; border-top:1px solid var(--linie); padding-top:14px}
.schalter{display:flex; gap:12px; align-items:flex-start; font-size:.86rem; color:var(--grau); line-height:1.45}
.schalter input{width:22px; height:22px; margin-top:2px; flex:none; accent-color:var(--salbei)}
.schalter b{display:block; font-family:var(--f-display); color:var(--blau); font-size:.92rem}
.schalter input:disabled + span b{color:var(--grau)}
.cookie-fuss{font-size:.82rem}
.cookie-fuss a{color:var(--grau)}

.bildband{border-radius:var(--rund); overflow:hidden; box-shadow:var(--schatten); background:var(--grau-hell); position:relative}
.bildband img{width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:4/3}
@media(min-width:560px){.bildband img{aspect-ratio:16/9}}
@media(min-width:900px){.bildband img{aspect-ratio:16/7}}
.bildband figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:14px 20px;
  background:linear-gradient(180deg,rgba(var(--dunkel-rgb),0) 0%,rgba(var(--dunkel-rgb),.62) 42%,rgba(var(--dunkel-rgb),.95) 100%);
  color:#fff; font-family:var(--f-display); font-weight:600; font-size:.95rem;
}
@media(min-width:760px){.bildband figcaption{font-size:1.02rem; padding:18px 26px}}

.rechtstext{max-width:72ch; display:flex; flex-direction:column; gap:22px}
.rechtstext h2{font-size:1.15rem; margin-top:14px}
.rechtstext p{color:var(--grau); font-size:1rem}
.rechtstext a{color:var(--orange-text)}
.entwurf{
  border-left:4px solid var(--orange); background:#FDF3E9; color:var(--grau);
  padding:16px 18px; border-radius:0 var(--rund-s) var(--rund-s) 0;
  font-size:.95rem; max-width:72ch; margin-bottom:30px;
}
.entwurf b{color:var(--orange-dunkel)}

.rechner-slot-unbenutzt{
  border:2px dashed var(--linie-stark); border-radius:var(--rund);
  background:var(--grau-hell); padding:clamp(28px,5vw,48px);
  display:flex; flex-direction:column; gap:8px; color:var(--grau);
  max-width:74ch;
}
.rechner-slot p:last-child{font-size:1rem}

/* ---------- Sonstiges ---------- */
.seitenkopf{background:var(--creme); border-bottom:1px solid var(--linie); padding:clamp(34px,5vw,64px) 0}
.brotkrumen{font-size:.86rem; color:var(--grau); margin-bottom:14px; display:flex; gap:8px; flex-wrap:wrap}
.brotkrumen a{color:var(--grau); text-decoration:none}
.brotkrumen a:hover{text-decoration:underline}
.seitenkopf .wrap{display:grid; gap:22px}
@media(min-width:920px){.seitenkopf .wrap{grid-template-columns:1.15fr .85fr; align-items:center}}
.abschluss{background:var(--creme); border-top:1px solid var(--linie)}
.abschluss .wrap{display:grid; gap:30px}
@media(min-width:960px){.abschluss .wrap{grid-template-columns:.95fr 1.05fr; align-items:start}}
.hinweisbox{border-left:4px solid var(--salbei); background:#F4F7F1; padding:16px 18px; border-radius:0 var(--rund-s) var(--rund-s) 0; font-size:.95rem; color:var(--grau)}
.tabellenbox{overflow-x:auto; border:1px solid var(--linie); border-radius:var(--rund); background:#fff}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:.97rem}
th,td{text-align:left; padding:14px 18px; border-bottom:1px solid var(--linie); vertical-align:top}
th{font-family:var(--f-display); font-weight:700; color:var(--blau); background:var(--grau-hell); font-size:.9rem}
tr:last-child td{border-bottom:none}
.skip{position:absolute; left:-9999px; top:0; background:#fff; padding:12px 18px; z-index:200; border-radius:0 0 8px 0}
.skip:focus{left:0}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.danke{text-align:center; max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:20px; align-items:center; padding:clamp(50px,8vw,90px) 0}
.danke-haken{width:76px; height:76px; border-radius:50%; background:var(--salbei); display:grid; place-items:center; color:#fff}
.danke-haken svg{width:38px; height:38px}
main{padding-bottom:0}
body{padding-bottom:var(--sticky-h,0px)}
/* ---------- Überlaufschutz (schmale Displays) ---------- */
body{overflow-wrap:break-word}
.seitenkopf .wrap>*,.hero .wrap>*,.kartenblock>*,.referenz>*,.abschluss .wrap>*,.gitter>*,.ablauf>*,.footer-gitter>*,[data-kontaktgitter]>*{min-width:0}
.brotkrumen,.karte-link,.weg span,.karten-cta li{overflow-wrap:anywhere}
/* ============================================================
   FARBPALETTE – aus Logo und bestehender Website abgeleitet
   #35671D ist das Markengrün von bakery-sales.de, gemessen aus
   Bildschirmaufnahmen der Seite (87 Prozent der Aktionsleiste).
   Braun #604020 stammt aus der Logodatei. Dunkle Bänder nutzen
   eine abgedunkelte Variante des Markengrüns, die Flächen ein
   warmes Hellgrau als Brücke zum #ECECEC der bestehenden Seite.
   Kupfer bleibt der Handlungsfarbe vorbehalten.
   ============================================================ */
:root{
  --blau:#2E5A19; --blau-tief:#264914;
  --orange:#B8632A; --orange-hell:#A85A1E; --orange-cta:#9E4A15;
  --orange-text:#8F4211; --orange-dunkel:#7C3A0F;
  --creme:#F0EEE7; --gold:#E3C878; --messing:#A9832F;
  --salbei:#35671D; --salbei-hell:#6FA34A; --braun:#5A3A1E;
  --anthrazit:#2C2B27; --weiss:#FFFFFF; --grund:#FBFAF7;
  --linie:#E2DFD5; --linie-stark:#C8C3B4;
  --grau:#63615A; --grau-hell:#F3F1EA;
  --hell:#E4EFE1; --hell-kraeftig:#F1F7EF; --hell-leise:#C6D9C1;
  --hell-topbar:#BDD2B8; --hell-fuss:#B8CEB3; --hell-fuss-link:#DCE9D9;
  --hell-schwach:#C2D6BD;
  --schatten-rgb:46,90,25; --dunkel-rgb:38,73,20;
  --hero-ende:#FCFBF8; --karten-grund:#FAF9F5;
  --rund:12px; --rund-s:8px;
  --f-titel:Georgia,"Times New Roman",serif;
  --schatten:0 1px 2px rgba(var(--schatten-rgb),.05), 0 10px 26px -18px rgba(var(--schatten-rgb),.22);
  --schatten-hoch:0 2px 4px rgba(var(--schatten-rgb),.07), 0 22px 44px -24px rgba(var(--schatten-rgb),.3);
}

/* --- Typografie: System-Serifen für Überschriften, System-Sans für Labels --- */
h1,h2,h3,h4{font-family:var(--f-titel); font-weight:600; letter-spacing:-.012em; color:#35671D}
h1{font-weight:700; letter-spacing:-.018em}
.sec--blau h1,.sec--blau h2,.sec--blau h3,.sec--blau h4{color:#fff}
.karte h3,.produkt h4,.schritt h3,.zielkarte h3{color:#35671D}
.eyebrow,.btn,.hauptnav a,.logo-wort b,.schritt-nr,.slot,.karte-link,
.fall-schritt h3,.einsatz-titel,.vertrauen li,.sticky a,.marke,footer h4,
.faq summary,.feld label,.beleg dt{font-family:var(--f-display)}

/* --- Feiner Messingstrich über jeder Rubrik --- */
.eyebrow::before{
  content:""; display:block; width:32px; height:2px; margin-bottom:12px;
  background:var(--messing);
}
.sec--blau .eyebrow::before{background:var(--gold)}

/* --- Ruhigere Karten: warme Kontur statt Schatten --- */
.karte,.produkt,.schritt,.formkarte,.tabellenbox,.faq details,.weg{box-shadow:none}
.karte,.schritt,.produkt,.faq details{border-color:var(--linie)}
.formkarte{box-shadow:var(--schatten)}
.zielkarte{box-shadow:var(--schatten)}

/* --- Buttons: klarere Kanten, ruhigere Fläche --- */
.btn{border-radius:6px; letter-spacing:.005em}
.btn--rand{border-color:var(--linie-stark); background:var(--weiss)}

/* --- Trennlinien statt Farbflächen, wo es die Seite beruhigt --- */
.kopfleiste{box-shadow:inset 0 -3px 0 -1px rgba(48,96,24,.18)}
.vertrauen svg{color:var(--gold)}




/* ============================================================
   BRÖTCHENRECHNER
   Rechenlogik und Zahlen unverändert aus dem Rechner übernommen.
   Die Farbtokens zeigen auf die Farben der Website, der Geltungs-
   bereich aller Regeln ist #rechner.
   ============================================================ */
#rechner{
  --rz-flour:var(--grau-hell); --rz-flour-2:#EAE6DC; --rz-paper:var(--weiss);
  --rz-ink:var(--anthrazit); --rz-ink-soft:var(--grau);
  --rz-crust:var(--braun); --rz-crust-deep:#43290F; --rz-crust-tint:#F3EBE1;
  --rz-crust-solid:var(--braun); --rz-crust-solid-deep:#43290F;
  --rz-forest:var(--salbei); --rz-forest-deep:#234512; --rz-forest-tint:#EBF1E4;
  --rz-forest-solid:var(--salbei); --rz-forest-solid-deep:#234512;
  --rz-wheat:var(--messing); --rz-wheat-deep:#7C5C10;
  --rz-border:var(--linie); --rz-border-strong:var(--linie-stark);
  --rz-shadow:var(--schatten); --rz-focus:var(--orange-cta);
  color:var(--rz-ink);
}
#rechner /* ================= TOKENS ================= */
  :root{
    --rz-flour: #FAF6EC;
    --rz-flour-2: #F1EAD9;
    --rz-paper: #FFFFFF;
    --rz-ink: #2B241A;
    --rz-ink-soft: #6B6154;
    --rz-crust: #6B4322;
    --rz-crust-deep: #4A2D15;
    --rz-crust-tint: #F7ECDD;
    --rz-forest: #35671D;
    --rz-forest-deep: #234512;
    --rz-forest-tint: #EBF1E4;
    --rz-wheat: #C6912E;
    --rz-wheat-deep: #8F660F;
    --rz-border: #E3D9C4;
    --rz-border-strong: #D2C4A6;
    --rz-shadow: 0 1px 2px rgba(43,36,26,0.06), 0 8px 24px -12px rgba(43,36,26,0.18);
    --rz-focus: #1E64C8;

    /* Solid-fill tokens: always deep, paired with fixed white text.
       Intentionally NOT inverted for dark mode (see below) so white text
       stays legible on these blocks in both themes. */
    --rz-crust-solid: #6B4322;
    --rz-crust-solid-deep: #4A2D15;
    --rz-forest-solid: #35671D;
    --rz-forest-solid-deep: #234512;
  }
#rechner *{ box-sizing: border-box; }
#rechner{ -webkit-text-size-adjust: 100%; }
#rechner{
    margin: 0;
    background: var(--rz-flour);
    color: var(--rz-ink);
    font-family: var(--f-text);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
@media (prefers-reduced-motion: reduce){
#rechner *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
#rechner a{ color: inherit; }
#rechner .wrap{ max-width: 920px; margin: 0 auto; padding: 0 20px; }
#rechner .eyebrow{
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rz-forest-deep);
    background: var(--rz-forest-tint);
    border: 1px solid var(--rz-forest);
    border-radius: 100px;
    padding: 5px 12px;
    margin-bottom: 18px;
  }
#rechner h1{
    font-family: var(--f-titel);
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 2.9rem);
    line-height: 1.12;
    margin: 0 0 14px 0;
    text-wrap: balance;
    color: var(--rz-ink);
  }
#rechner h1 em{ color: var(--rz-crust); font-style: normal; }
#rechner /* ================= CALCULATOR CARD ================= */
  .calc-card{
    background: var(--rz-paper);
    border: 1px solid var(--rz-border);
    border-radius: 18px;
    box-shadow: var(--rz-shadow);
    padding: 34px clamp(20px, 4vw, 44px) 38px;
    margin: 34px 0 30px;
  }
#rechner .qty-label{
    display: block;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 14px;
  }
#rechner .qty-readout{
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
  }
#rechner .qty-readout .num{
    font-family: var(--f-titel);
    font-weight: 700;
    font-size: clamp(2.6rem, 7vw, 3.6rem);
    color: var(--rz-crust);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
#rechner .qty-readout .unit{ font-size: 1.05rem; color: var(--rz-ink-soft); }
#rechner .qty-readout .qty-input-wrap{
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--rz-flour-2);
    border: 1px solid var(--rz-border-strong);
    border-radius: 10px;
    padding: 6px 10px;
  }
#rechner .qty-readout input[type="number"]{
    width: 5.5ch;
    border: none;
    background: transparent;
    font: inherit;
    font-family: var(--f-text);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--rz-ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
#rechner .qty-readout input[type="number"]:focus{ outline: none; }
#rechner .qty-readout .qty-input-wrap:focus-within{ outline: 2px solid var(--rz-focus); outline-offset: 2px; }
#rechner .qty-readout .qty-input-wrap span{ color: var(--rz-ink-soft); font-size: 0.85rem; }
#rechner input[type="range"]{
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 14px;
    border-radius: 8px;
    background: var(--rz-flour-2);
    outline: none;
    cursor: pointer;
    border: 1px solid var(--rz-border-strong);
  }
#rechner input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rz-crust);
    border: 3px solid var(--rz-paper);
    box-shadow: 0 0 0 1px var(--rz-crust-deep), var(--rz-shadow);
    cursor: pointer;
    margin-top: -7px;
  }
#rechner input[type="range"]::-moz-range-thumb{
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rz-crust);
    border: 3px solid var(--rz-paper);
    box-shadow: 0 0 0 1px var(--rz-crust-deep);
    cursor: pointer;
  }
#rechner input[type="range"]::-moz-range-track{
    height: 14px;
    border-radius: 8px;
    background: transparent;
  }
#rechner input[type="range"]:focus-visible{ box-shadow: 0 0 0 3px var(--rz-focus); }
#rechner .range-scale{
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--rz-ink-soft);
    margin-top: 6px;
  }
#rechner /* ================= RESULT TAGS ================= */
  .results{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 36px;
  }
@media (max-width: 720px){
#rechner .results{ grid-template-columns: 1fr; }
}
#rechner .tag{
    position: relative;
    border-radius: 10px;
    padding: 20px 18px 18px;
    border: 1.5px solid var(--rz-border-strong);
    background: var(--rz-flour-2);
  }
#rechner .tag::before{
    content: "";
    position: absolute;
    top: 12px;
    left: 12px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--rz-paper);
    border: 1.5px solid var(--rz-border-strong);
  }
#rechner .tag-brown{ background: var(--rz-crust-tint); border-color: var(--rz-crust); }
#rechner .tag-green{ background: var(--rz-forest-tint); border-color: var(--rz-forest); }
#rechner .tag-accent{ background: var(--rz-forest-solid); border-color: var(--rz-forest-solid-deep); }
#rechner .tag-label{
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
    margin-left: 14px;
  }
#rechner .tag-brown .tag-label{ color: var(--rz-crust-deep); }
#rechner .tag-green .tag-label{ color: var(--rz-forest-deep); }
#rechner .tag-accent .tag-label{ color: #ffffff; opacity: 0.92; }
#rechner .tag-value{
    font-family: var(--f-titel);
    font-weight: 700;
    font-size: clamp(1.7rem, 4vw, 2.15rem);
    font-variant-numeric: tabular-nums;
    margin-left: 14px;
  }
#rechner .tag-brown .tag-value{ color: var(--rz-crust); }
#rechner .tag-green .tag-value{ color: var(--rz-forest); }
#rechner .tag-accent .tag-value{ color: #ffffff; }
#rechner .tag-sub{
    font-size: 0.82rem;
    margin-top: 6px;
    margin-left: 14px;
  }
#rechner .tag-brown .tag-sub, #rechner .tag-green .tag-sub{ color: var(--rz-ink-soft); }
#rechner .tag-accent .tag-sub{ color: #ffffff; opacity: 0.88; }
#rechner /* comparison bars */
  .compare{ margin-top: 26px; }
#rechner .compare-row{ display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
#rechner .compare-row .clabel{ width: 168px; flex: none; font-size: 0.86rem; color: var(--rz-ink-soft); }
#rechner .compare-track{
    flex: 1;
    background: var(--rz-flour-2);
    border-radius: 7px;
    height: 14px;
    overflow: hidden;
    border: 1px solid var(--rz-border);
  }
#rechner .compare-fill{ height: 100%; border-radius: 7px 0 0 7px; transition: width 0.35s ease; }
#rechner .compare-fill.brown{ background: var(--rz-crust); }
#rechner .compare-fill.green{ background: var(--rz-forest); }
#rechner .compare-row .cval{ width: 68px; flex: none; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
#rechner /* ================= DETAILS / RECEIPT ================= */
  details.panel{
    margin-top: 30px;
    border-top: 1px dashed var(--rz-border-strong);
    padding-top: 20px;
  }
#rechner details.panel summary{
    cursor: pointer;
    font-weight: 700;
    font-size: 0.94rem;
    color: var(--rz-forest-deep);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
  }
#rechner details.panel summary::-webkit-details-marker{ display: none; }
#rechner details.panel summary::before{
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--rz-forest);
    color: var(--rz-forest);
    font-size: 0.95rem;
    flex: none;
  }
#rechner details.panel[open] summary::before{ content: "\2212"; }
#rechner details.panel summary:focus-visible{ outline: 2px solid var(--rz-focus); outline-offset: 3px; border-radius: 4px; }
#rechner .receipt{
    margin-top: 18px;
    background: var(--rz-flour-2);
    border: 1px solid var(--rz-border);
    border-radius: 10px;
    padding: 18px 20px;
    max-width: 480px;
  }
#rechner .receipt-row{ display: flex; align-items: baseline; gap: 6px; padding: 5px 0; }
#rechner .receipt-row .rlabel{ font-size: 0.86rem; color: var(--rz-ink-soft); white-space: nowrap; }
#rechner .receipt-row .rfill{ flex: 1; border-bottom: 1px dotted var(--rz-border-strong); margin-bottom: 4px; }
#rechner .receipt-row .rval{ font-weight: 600; font-variant-numeric: tabular-nums; font-size: 0.92rem; white-space: nowrap; }
#rechner .receipt-row.total{ border-top: 1px solid var(--rz-border-strong); margin-top: 6px; padding-top: 10px; }
#rechner .receipt-row.total .rlabel{ color: var(--rz-ink); font-weight: 700; }
#rechner .receipt-row.total .rval{ color: var(--rz-crust); font-weight: 800; font-size: 1.05rem; }
#rechner .adv-toggle-row{ margin-top: 22px; }
#rechner .adv-grid{
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 18px;
  }
@media (max-width: 720px){
#rechner .adv-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
#rechner .adv-grid{ grid-template-columns: 1fr; }
}
#rechner .field{ display: flex; flex-direction: column; gap: 5px; }
#rechner .field label{ font-size: 0.74rem; color: var(--rz-ink-soft); }
#rechner .field input{
    font: inherit;
    font-family: var(--f-text);
    font-variant-numeric: tabular-nums;
    padding: 7px 9px;
    border: 1px solid var(--rz-border-strong);
    border-radius: 7px;
    background: var(--rz-paper);
    color: var(--rz-ink);
    width: 100%;
  }
#rechner .field input:focus-visible{ outline: 2px solid var(--rz-focus); outline-offset: 1px; }
#rechner .reset-btn{
    margin-top: 16px;
    background: none;
    border: 1px solid var(--rz-border-strong);
    color: var(--rz-ink-soft);
    font: inherit;
    font-size: 0.82rem;
    padding: 7px 14px;
    border-radius: 100px;
    cursor: pointer;
  }
#rechner .reset-btn:hover{ border-color: var(--rz-crust); color: var(--rz-crust); }
#rechner .reset-btn:focus-visible{ outline: 2px solid var(--rz-focus); }
#rechner .assumption-note{
    font-size: 0.76rem;
    color: var(--rz-ink-soft);
    margin-top: 16px;
    line-height: 1.5;
  }
/* Ohne diese Regel gewinnt jede display-Angabe gegen die Voreinstellung
   des Browsers fuer [hidden] – aufgeklappte Dialoge waeren die Folge. */
[hidden]{display:none !important}

/* Honigtopf gegen automatisierte Einsendungen – für Menschen nicht sichtbar,
   für Screenreader über aria-hidden ausgeblendet, aber im Formular vorhanden. */
.honig{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.versandfehler{
  background:#FCEDE9; border-left:4px solid #B3261E; color:#7A1C15;
  padding:14px 16px; border-radius:0 var(--rund-s) var(--rund-s) 0;
  font-size:.95rem; margin-bottom:18px;
}
.versandfehler a{color:#7A1C15}

/* V2 – conversion copy helpers */
.problem-kicker{font-family:var(--f-display);font-weight:800;color:var(--blau);font-size:.92rem;line-height:1.35;margin:0 0 10px;text-transform:none}
.impact-line{font-family:var(--f-display);font-weight:800;color:var(--blau);font-size:clamp(1.2rem,2.1vw,1.65rem);line-height:1.35;max-width:880px;margin:30px 0 0}
.sec--blau .impact-line{color:var(--hell)}

/* Hakenlisten in den Qualifizierungskarten */
ul.haken{display:flex; flex-direction:column; gap:9px; color:var(--grau); font-size:.97rem}
ul.haken li{display:flex; gap:10px; align-items:flex-start}
ul.haken li::before{
  content:""; flex:none; width:18px; height:18px; margin-top:3px; border-radius:50%;
  background:var(--salbei) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.karte h3 + ul.haken{margin-top:4px}

/* Stellenanzeigen (Karriere) – Daten aus assets/stellen.json */
.stellen{display:flex; flex-direction:column; gap:12px; max-width:860px}
.stellen details{border:1px solid var(--linie); border-radius:var(--rund-s); background:#fff; overflow:hidden}
.stellen details[open]{border-color:var(--linie-stark)}
.stellen summary{cursor:pointer; list-style:none; padding:18px 54px 18px 20px; position:relative; display:flex; flex-direction:column; gap:4px}
.stellen summary::-webkit-details-marker{display:none}
.stellen summary::after{content:""; position:absolute; right:22px; top:50%; width:10px; height:10px; border-right:2px solid var(--salbei); border-bottom:2px solid var(--salbei); transform:translateY(-70%) rotate(45deg); transition:transform .2s}
.stellen details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.stellen summary b{font-family:var(--f-titel); font-size:1.15rem; color:var(--salbei); font-weight:600}
.stelle-meta{font-family:var(--f-display); font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--orange-text)}
.stelle-inhalt{padding:0 20px 22px; color:var(--grau); max-width:70ch}
.stelle-inhalt h4{font-family:var(--f-display); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--anthrazit); margin:18px 0 8px}
.stelle-inhalt .btn{margin-top:20px}

/* Rechtstexte: Unterüberschriften, Listen, Stand */
.rechtstext h3{font-family:var(--f-display); font-size:.95rem; font-weight:700; color:var(--anthrazit); margin-top:6px}
.rechtstext ul{display:flex; flex-direction:column; gap:8px; padding-left:22px; list-style:disc; color:var(--grau); font-size:1rem}
.rechtstext .stand{font-family:var(--f-display); font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--orange-text)}
.rechtstext .versal{text-transform:uppercase; font-size:.9rem; letter-spacing:.01em}