/* Haus- & Gebäudeservice Pertlik – Gestaltung „Maschinenhalle“
   Dunkel, technisch, Gelb aus dem Blitz des Logos. Keine Inline-Styles (CSP). */

@font-face{font-family:"Inter";src:url(../fonts/inter-400.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-600.woff) format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Display";src:url(../fonts/inter-display-900.woff) format("woff");font-weight:900;font-style:normal;font-display:swap}

:root{
  --bg:#25292D; --bg2:#2D3237; --bg3:#363B41; --feld:#1F2327;
  --ink:#ECEDEE; --ink2:#C3C7CB; --grau:#9DA3A9;
  --gelb:#DE532B; --gelb-h:#C8461F; --akzent-text:#F2865F; --auf:#fff;
  --linie:rgba(255,255,255,.12); --linie2:rgba(255,255,255,.2);
  --fehler:#FF8A7A; --gut:#7FD48F;
  --rand:20px; --navh:64px;
  --weich:cubic-bezier(.22,.7,.2,1);
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Inter Display","Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color-scheme:dark;
}
@media (min-width:700px){:root{--rand:32px}}
@media (min-width:1100px){:root{--rand:48px;--navh:72px}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--navh) + 8px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gelb);outline-offset:3px}
::selection{background:var(--gelb);color:var(--auf)}

.wrap{max-width:1280px;margin:0 auto;padding-left:var(--rand);padding-right:var(--rand)}
.klein{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--grau);line-height:1.5}
.sprung{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--gelb);color:var(--auf);padding:.7rem 1rem;font-weight:600;text-decoration:none}
.sprung:focus{top:1rem}
.unsichtbar{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.platz{background:rgba(222,83,43,.16);color:var(--gelb);padding:0 .3em;outline:1px dashed rgba(222,83,43,.6)}
.abstand-o{margin-top:1rem}

/* ---------- Überschriften ---------- */
h1,h2{font-family:var(--display);font-weight:900;letter-spacing:-.035em;line-height:1}
h1{text-transform:uppercase;letter-spacing:-.045em;line-height:.9}
h2{font-size:clamp(34px,6.6vw,64px);margin:0 0 20px}
h2::after{content:"";display:block;width:48px;height:4px;background:var(--gelb);margin-top:18px}
h1 em,h2 em{font-style:normal;color:var(--gelb)}
h3{font-size:1.06rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.text{color:var(--ink2);font-size:1.02rem;line-height:1.65;max-width:52ch}
.text+.text{margin-top:1rem}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.8rem 1.3rem;
  background:var(--gelb);color:var(--auf);border:1px solid var(--gelb);font-family:var(--sans);font-weight:600;font-size:14px;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;border-radius:0;
  transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn:hover{background:var(--gelb-h);border-color:var(--gelb-h)}
.btn:active{transform:translateY(1px)}
.btn .pfeil{transition:transform .25s var(--weich)}
.btn:hover .pfeil{transform:translateX(4px)}
.btn.klar{background:transparent;color:var(--ink);border-color:var(--linie2)}
.btn.klar:hover{border-color:var(--ink);background:rgba(255,255,255,.04)}
.btn.voll{width:100%}
.btn:disabled{opacity:.7;cursor:wait}
.lade{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:var(--auf);border-radius:50%;animation:dreh .7s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}

/* ---------- Navigation ---------- */
.navhalter{position:fixed;top:0;left:0;right:0;z-index:50}
.haupt{display:flex;align-items:center;gap:14px;height:var(--navh);padding:0 var(--rand);
  border-bottom:1px solid transparent;transition:height .3s var(--weich),background .3s,border-color .3s}
.kompakt .haupt,.menu-auf .haupt{height:56px;background:rgba(37,41,45,.94);border-bottom-color:var(--linie)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .kompakt .haupt{background:rgba(37,41,45,.74);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;min-height:44px}
.marke img{width:auto;height:32px}
.marke span{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:15px;line-height:1.1}
.marke small{display:block;font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--grau)}
@media (max-width:429px){.marke small{display:none}}
.navlinks{display:none}
.navtel{display:none}
.haupt>.btn{min-height:44px;padding:.55rem 1rem;font-size:12.5px}
.burger{width:44px;height:44px;display:grid;place-items:center;background:transparent;border:1px solid var(--linie2);cursor:pointer;padding:0}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;background:var(--ink);position:relative;transition:transform .3s var(--weich),background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.mobilmenu{display:none;background:var(--bg);border-bottom:1px solid var(--linie);padding:8px var(--rand) 22px;max-height:calc(100vh - 56px);max-height:calc(100svh - 56px);overflow:auto}
.mobilmenu.offen{display:block;animation:rein .3s var(--weich)}
.mobilmenu a{display:flex;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px solid var(--linie);text-decoration:none;
  font-family:var(--display);font-weight:900;font-size:26px;letter-spacing:-.02em;line-height:1.1}
.mobilmenu a.mtel{font-family:var(--sans);font-weight:600;font-size:16px;text-transform:none;letter-spacing:0;color:var(--ink2)}
.mobilmenu a.btn{margin-top:18px;width:100%;font-family:var(--sans);font-size:14px;letter-spacing:.06em;justify-content:center;line-height:1.2;border-bottom:1px solid var(--gelb)}
@media (min-width:1000px){
  .navlinks{display:flex;gap:2px;margin-right:12px}
  .navlinks a{position:relative;padding:10px 12px;text-decoration:none;font-size:13.5px;color:var(--ink2);transition:color .2s}
  .navlinks a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--gelb);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--weich)}
  .navlinks a:hover,.navlinks a.aktiv{color:var(--ink)}
  .navlinks a.aktiv::after,.navlinks a:hover::after{transform:scaleX(1)}
  .navtel{display:block;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink2);text-decoration:none;padding:10px 8px;margin-right:6px}
  .navtel:hover{color:var(--gelb)}
  .burger,.mobilmenu{display:none!important}
}

/* ---------- Einstieg ---------- */
.held{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;background:#000;isolation:isolate}
.heldbild{position:absolute;inset:0;z-index:-2;transform:translate3d(0,calc(var(--hp,0) * 18%),0) scale(calc(1.06 - var(--hp,0) * .04));transform-origin:50% 30%;will-change:transform}
.heldbild img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
@media (min-width:701px){.heldbild img{object-position:40% 55%}}
.held::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,var(--bg) 2%,rgba(37,41,45,.8) 32%,rgba(37,41,45,.35) 62%,rgba(37,41,45,.25) 78%,rgba(37,41,45,.75) 100%)}
@media (min-width:900px){.held::before{background:
  linear-gradient(0deg,var(--bg) 1%,rgba(37,41,45,.55) 32%,rgba(37,41,45,0) 60%,rgba(37,41,45,.6) 100%),
  linear-gradient(90deg,rgba(37,41,45,.88) 0%,rgba(37,41,45,.5) 45%,rgba(37,41,45,.05) 80%)}}
.heldtext{flex:1;display:flex;align-items:flex-end;padding:calc(var(--navh) + 40px) 0 36px;opacity:var(--ho,1);transform:translate3d(0,calc(var(--hp,0) * -40px),0)}
.heldtext .wrap{width:100%}
.kicker{font-weight:600;font-size:15px;color:var(--ink2);margin-bottom:14px}
h1{font-size:clamp(46px,12.4vw,132px);margin:0 0 22px}
h1 .zeile{display:block;overflow:hidden;padding-bottom:.04em}
h1 .zeile>*{display:block}
.intro{font-size:1.06rem;line-height:1.6;color:var(--ink2);max-width:40ch;margin-bottom:26px}
.knoepfe{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:480px){.knoepfe .btn{width:100%}}
/* Einstiegsanimation */
.js .laden{display:inline-block;opacity:0;animation:blendet .9s var(--weich) forwards}
.js h1 .laden{display:block;opacity:1;transform:translateY(105%);animation:steigt 1s var(--weich) forwards}
.js .knoepfe.laden,.js .intro.laden{display:flex}
.js .intro.laden{display:block}
.js .l1{animation-delay:.1s}.js .l2{animation-delay:.2s}.js .l3{animation-delay:.32s}.js .l4{animation-delay:.6s}.js .l5{animation-delay:.72s}
@keyframes steigt{to{transform:none}}
@keyframes blendet{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes rein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.leiste{position:relative;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--linie);background:rgba(37,41,45,.7)}
.leiste>*{padding:16px var(--rand) 18px;display:flex;flex-direction:column;gap:2px;text-decoration:none}
.leiste>*+*{border-left:1px solid var(--linie)}
.leiste span{font-size:13px;color:var(--grau)}
.leiste b{font-family:var(--display);font-weight:900;font-size:clamp(17px,2.4vw,24px);letter-spacing:-.01em;word-spacing:.12em;line-height:1.15}
.leiste small{font-size:13px;color:var(--grau);margin-top:2px}
.leiste-tel b{color:var(--gelb);word-spacing:0}

.leiste .nur-breit{display:none}
@media (min-width:900px){.leiste{grid-template-columns:repeat(3,1fr)}.leiste .nur-breit{display:flex}}

/* ---------- Laufband ---------- */
.band{background:var(--gelb);color:var(--auf);overflow:hidden;white-space:nowrap}
.bandlauf{display:inline-flex;padding:14px 0;animation:lauf 40s linear infinite;will-change:transform}
.bandlauf span{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(18px,2.4vw,26px);line-height:1;display:inline-flex;align-items:center}
.bandlauf span::after{content:"";width:9px;height:9px;background:var(--auf);margin:0 26px;transform:rotate(45deg)}
@keyframes lauf{to{transform:translateX(-50%)}}

/* ---------- Abschnitte ---------- */
.abschnitt{padding:84px 0;border-bottom:1px solid var(--linie);position:relative}
@media (min-width:900px){.abschnitt{padding:128px 0}}
.dunkler{background:var(--bg2)}
.kopf{max-width:820px;margin-bottom:44px}
.js .auf{opacity:0;transform:translateY(22px);transition:opacity .8s var(--weich),transform .8s var(--weich)}
.js .auf.da{opacity:1;transform:none}

/* ---------- Leistungen ---------- */
.lraster{display:grid;gap:28px}
@media (min-width:980px){.lraster{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}}
.lpanel{display:none}
@media (min-width:980px){
  .lpanel{display:block;position:sticky;top:calc(var(--navh) + 32px);border:1px solid var(--linie);background:var(--bg2);overflow:hidden}
  .lpanel-in{position:relative;padding:28px 34px 30px 30px;display:flex;flex-direction:column;min-height:460px}
  .lp-nr{font-family:var(--display);font-weight:900;font-size:180px;line-height:.8;letter-spacing:-.06em;color:var(--gelb);margin:18px 0 auto}
  .lp-titel{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:34px;line-height:.95;letter-spacing:-.035em;margin-top:28px}
  .lp-text{color:var(--ink2);margin-top:12px;max-width:34ch}
  .lp-hinweis{margin-top:22px;color:var(--grau);font-size:14px}
  .lp-gruppe{font-size:14px;font-weight:600;color:var(--ink2)}
  .lpanel.wechsel .lp-nr,.lpanel.wechsel .lp-titel,.lpanel.wechsel .lp-text{animation:rein .35s var(--weich)}
  .lp-mass{position:absolute;right:0;top:0;bottom:0;width:6px;background:rgba(255,255,255,.05)}
  .lp-mass span{position:absolute;left:0;right:0;top:0;height:10%;background:var(--gelb);transform:translateY(calc(var(--lg,0) * 100%));transition:transform .45s var(--weich)}
}
.lgruppe+.lgruppe{margin-top:30px}
.gname{font-size:14px;font-weight:600;color:var(--grau);padding-bottom:10px}
.dienste{border-top:1px solid var(--linie2)}
.dienst a{position:relative;display:grid;grid-template-columns:48px 1fr 26px;grid-template-areas:"code titel zu" ". text zu";column-gap:12px;row-gap:5px;align-items:baseline;
  padding:18px 4px 18px 0;border-bottom:1px solid var(--linie);text-decoration:none;isolation:isolate;overflow:hidden}
.dienst a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gelb);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--weich)}
.dienst .code{grid-area:code;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--gelb);padding-left:2px;transition:color .3s,padding .35s var(--weich)}
.dienst strong{grid-area:titel;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(21px,4.6vw,30px);line-height:1;letter-spacing:-.03em;transition:color .3s}
.dienst small{grid-area:text;font-size:14px;color:var(--grau);line-height:1.45;transition:color .3s}
.dienst .zu{grid-area:zu;align-self:center;font-size:20px;color:var(--grau);transition:transform .35s var(--weich),color .3s}
.dienst a:hover::before,.dienst a:focus-visible::before,.dienst a.aktiv::before{transform:scaleX(1)}
.dienst a:hover>*,.dienst a:focus-visible>*,.dienst a.aktiv>*{color:var(--auf)}
.dienst a:hover .zu,.dienst a:focus-visible .zu,.dienst a.aktiv .zu{transform:translateX(-6px)}
.dienst a:hover .code,.dienst a:focus-visible .code,.dienst a.aktiv .code{padding-left:10px}
.dienst a:focus-visible{outline-offset:-2px}

/* ---------- Ablauf ---------- */
.ablaufwrap{position:relative;padding-left:44px}
.schiene{position:absolute;left:13px;top:6px;bottom:6px;width:2px;background:var(--linie)}
.schiene i{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--gelb);transform-origin:top;transform:scaleY(var(--fill,0))}
.ablauf{display:grid;gap:44px}
.aschritt{position:relative;display:grid;gap:10px}
.anr{font-family:var(--display);font-weight:900;font-size:56px;line-height:.85;letter-spacing:-.05em;color:#4C535A;transition:color .4s}
.aschritt::before{content:"";position:absolute;left:-39px;top:16px;width:12px;height:12px;background:var(--bg2);border:2px solid #6A7178;transition:background .3s,border-color .3s}
.aschritt h3{font-family:var(--display);font-weight:900;font-size:24px;letter-spacing:-.02em;line-height:1.1}
.aschritt p{color:var(--ink2);margin-top:10px;max-width:42ch}
.aschritt.an .anr{color:var(--gelb)}
.aschritt.an::before{background:var(--gelb);border-color:var(--gelb)}
@media (min-width:900px){
  .ablaufwrap{padding-left:0}
  .schiene{left:0;right:0;top:27px;bottom:auto;width:auto;height:2px}
  .schiene i{transform-origin:left;transform:scaleX(var(--fill,0))}
  .ablauf{grid-template-columns:repeat(4,1fr);gap:32px}
  .aschritt{padding-top:64px;align-content:start}
  .aschritt::before{left:0;top:20px}
  .anr{font-size:80px}
}
/* ohne JS: alles aktiv */
html:not(.js) .schiene i{transform:none}
html:not(.js) .aschritt .anr{color:var(--gelb)}
html:not(.js) .aschritt::before{background:var(--gelb);border-color:var(--gelb)}

/* ---------- Projekt-Check ---------- */
.oraster{display:grid;gap:48px}
@media (min-width:980px){.oraster{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:start}}
.kfragen{margin-top:32px;border-top:1px solid var(--linie)}
.kfrage{padding:18px 0;border-bottom:1px solid var(--linie)}
.kfrage p{color:var(--grau);font-size:15px;margin-top:6px}
.ckarte{background:var(--bg2);border:1px solid var(--linie2);padding:24px 20px 26px;position:relative}
@media (min-width:700px){.ckarte{padding:32px 34px 34px}}
.ckarte,.fkarte{border-top:3px solid var(--gelb)}
.ckopf{display:flex;justify-content:space-between;gap:1rem;margin-bottom:12px}
.ckopf{font-size:14px;color:var(--grau)}
.ckopf p{font-weight:600;color:var(--ink)}
.cbalken{height:3px;background:var(--linie);margin-bottom:26px;display:none}
.cbalken i{display:block;height:100%;width:20%;background:var(--gelb);transition:width .5s var(--weich)}
.ckopf #cschritt{display:none}
.js .cbalken{display:block}.js .ckopf #cschritt{display:inline}
.ohnejs{color:var(--ink2);font-size:.95rem}
.ohnejs a{color:var(--gelb)}
.js .ohnejs{display:none}
.cschritte{display:none}
.js .cschritte{display:block}
.cfrage{display:none}
.cfrage.an{display:block;animation:rein .4s var(--weich)}
.cfrage fieldset{border:0;margin:0;padding:0;min-width:0}
.cfrage legend,.cfrage .frage{display:block;font-family:var(--display);font-weight:900;letter-spacing:-.02em;font-size:24px;line-height:1.15;margin-bottom:18px;padding:0}
.cfrage .frage .hilfe{font-family:var(--sans);font-weight:400;letter-spacing:0;font-size:14px;color:var(--grau)}
.cwahl{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:520px){.cwahl{grid-template-columns:1fr 1fr}}
.cwahl button{min-height:48px;text-align:left;padding:12px 14px;background:var(--feld);border:1px solid var(--linie2);cursor:pointer;font-size:15px;font-weight:600;line-height:1.3;transition:border-color .2s,background .2s,color .2s}
.cwahl button:hover{border-color:var(--gelb)}
.cwahl button[aria-pressed="true"]{background:var(--gelb);border-color:var(--gelb);color:var(--auf)}
.cfeld label{display:block;font-size:14px;color:var(--ink2);margin-bottom:8px}
.cnav{display:flex;align-items:center;gap:16px;margin-top:22px;flex-wrap:wrap}
.ctext{background:none;border:0;padding:12px 4px;min-height:44px;color:var(--grau);cursor:pointer;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.ctext:hover{color:var(--ink)}
.cmeldung{margin-top:12px;font-size:14.5px;line-height:1.5;display:flex;gap:10px;align-items:flex-start;min-height:1.4em;color:var(--ink2)}
.cmeldung .pkt{flex:none;width:8px;height:8px;margin-top:.5em;background:var(--grau);border-radius:50%}
.cmeldung.ja{color:#CFEBD4}.cmeldung.ja .pkt{background:var(--gut)}
.cmeldung.nein .pkt{background:var(--gelb)}
.cmeldung.fehlt{color:#FFC2B8}.cmeldung.fehlt .pkt{background:var(--fehler)}
.cliste{border-top:1px solid var(--linie);margin-bottom:22px}
.cliste li{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--linie);font-size:15px}
.cliste span{font-size:14px;color:var(--grau)}
.cliste b{font-weight:600;overflow-wrap:anywhere}
.chinweis{margin-top:8px;font-size:13px;color:var(--grau)}

/* ---------- Eingabefelder ---------- */
input[type=text],input[type=tel],input[type=email],input:not([type]),select,textarea{
  width:100%;min-height:50px;padding:12px 14px;background:var(--feld);border:1px solid var(--linie2);border-radius:0;color:var(--ink);font-size:16px;
  transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
textarea{min-height:130px;resize:vertical;line-height:1.5}
select{background-image:linear-gradient(45deg,transparent 50%,var(--gelb) 50%),linear-gradient(135deg,var(--gelb) 50%,transparent 50%);
  background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
select option{background:var(--bg2);color:var(--ink)}
input::placeholder,textarea::placeholder{color:#888E94}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gelb);box-shadow:0 0 0 1px var(--gelb)}
input[type=file]{width:100%;font-size:14px;color:var(--ink2);padding:10px;border:1px dashed var(--linie2);background:var(--feld);min-height:50px}
input[type=file]::file-selector-button{font:inherit;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em;background:var(--ink);color:#1A1D20;border:0;padding:9px 12px;margin-right:12px;cursor:pointer}
.hilfe{font-size:13px;color:var(--grau);margin-top:6px}
.vorschau{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.vorschau figure{width:62px;height:62px;overflow:hidden;border:1px solid var(--linie2)}
.vorschau img{width:100%;height:100%;object-fit:cover}

/* ---------- Über uns ---------- */
.uraster{display:grid;gap:48px}
@media (min-width:980px){.uraster{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:72px;align-items:center}}
.schild{position:relative;background:linear-gradient(160deg,#363B41,#2D3237 60%);border:1px solid var(--linie2);padding:30px 24px 26px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06)}
@media (min-width:700px){.schild{padding:38px 38px 32px}}
.schildkopf{display:flex;gap:16px;align-items:center;padding-bottom:20px;border-bottom:2px solid var(--gelb)}
.schildkopf img{width:64px;height:auto;flex:none}
.schildname{font-family:var(--display);font-weight:900;font-size:22px;letter-spacing:-.02em;line-height:1.1;margin-top:6px;hyphens:manual}
.schilddaten>div{display:grid;grid-template-columns:1fr;gap:2px;padding:12px 0;border-bottom:1px solid var(--linie)}
@media (min-width:420px){.schilddaten>div{grid-template-columns:130px 1fr;gap:12px;align-items:baseline}}
.schilddaten dd{font-weight:600;font-size:15px}
.schildtel{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:18px;padding:14px 16px;background:var(--gelb);color:var(--auf);text-decoration:none}
.schildtel .klein{color:var(--auf);opacity:.85}
.schildtel:hover{background:var(--gelb-h)}
.schildtel b{font-family:var(--display);font-weight:900;font-size:22px;letter-spacing:-.01em;word-spacing:.18em}

/* ---------- Fragen ---------- */
.fraster{display:grid;gap:44px}
@media (min-width:980px){.fraster{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}}
.fraster .text{margin-bottom:24px}
.fliste{border-top:1px solid var(--linie2)}
.fliste details{border-bottom:1px solid var(--linie)}
.fliste summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 0;min-height:56px;font-weight:600;font-size:1.04rem;line-height:1.35;transition:color .2s}
.fliste summary::-webkit-details-marker{display:none}
.fliste summary:hover{color:var(--gelb)}
.plus{position:relative;flex:none;width:30px;height:30px;border:1px solid var(--linie2);transition:background .25s,border-color .25s}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .3s var(--weich),background .25s}
.plus::after{transform:translate(-50%,-50%) rotate(90deg)}
details[open] .plus{background:var(--gelb);border-color:var(--gelb)}
details[open] .plus::before,details[open] .plus::after{background:var(--auf)}
details[open] .plus::after{transform:translate(-50%,-50%) rotate(0)}
.antwort{overflow:hidden}
.antwort p{color:var(--ink2);padding:0 44px 22px 0;max-width:62ch}

/* ---------- Kontakt & Formular ---------- */
.kraster{display:grid;gap:48px}
@media (min-width:980px){.kraster{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}}
.kliste{margin-top:28px;border-top:1px solid var(--linie)}
.kzeile{display:grid;gap:2px;padding:16px 0;border-bottom:1px solid var(--linie);text-decoration:none}
.kzeile strong{font-weight:600;font-size:1.06rem;overflow-wrap:anywhere;transition:color .2s}
a.kzeile:hover strong{color:var(--gelb)}
.kzusatz{font-size:14px;color:var(--grau)}
.hinweisbox{margin-top:24px;padding:16px 18px;border-left:3px solid var(--gelb);background:rgba(222,83,43,.06);color:var(--ink2);font-size:15px}
.hinweisbox strong{color:var(--ink)}
.fkarte{background:var(--bg2);border:1px solid var(--linie2);padding:26px 20px;position:relative}
@media (min-width:700px){.fkarte{padding:36px 36px 34px}}
.fkopf{font-family:var(--display);font-weight:900;font-size:24px;letter-spacing:-.02em;line-height:1.1}
.fkarte .einleit{color:var(--grau);font-size:14.5px;margin:8px 0 24px}
.freihe{display:grid;gap:16px;margin-bottom:16px}
@media (min-width:640px){.freihe.zwei{grid-template-columns:1fr 1fr}}
.freihe label{display:block;font-size:14px;color:var(--ink2);margin-bottom:7px}
.pflicht{color:var(--akzent-text)}
.fehler{display:none;margin-top:7px;font-size:13.5px;color:var(--fehler)}
.feld.ungueltig .fehler{display:block}
.feld.ungueltig input,.feld.ungueltig select,.feld.ungueltig textarea{border-color:var(--fehler)}
.extra{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--weich)}
.extra.an{grid-template-rows:1fr;margin-bottom:16px}
.extra>div{overflow:hidden}
.extra .innen{border:1px dashed rgba(222,83,43,.45);background:rgba(222,83,43,.04);padding:16px}
.extra .freihe{margin-bottom:0}
.schutz{font-size:13px;color:var(--grau);margin:6px 0 18px}
.schutz a{color:var(--ink2)}
.nachtext{font-size:13.5px;color:var(--grau);text-align:center;margin-top:12px}
.fbox{display:none;margin-top:16px;padding:14px 16px;border:1px solid var(--fehler);color:#FFD2CB;font-size:14.5px}
.fbox.an{display:block}
.fbox a{color:#fff}
.bestaetigt{display:none;text-align:center;padding:40px 8px;margin:auto 0}
.fkarte.fertig{display:flex;flex-direction:column;justify-content:center}
.bestaetigt.an{display:block;animation:rein .45s ease}
.bestaetigt:focus{outline:none}
.haken{width:64px;height:64px;margin:0 auto 22px;background:var(--gelb);color:var(--auf);display:grid;place-items:center}
.haken svg{width:32px;height:32px}
.bestaetigt h3{font-family:var(--display);font-weight:900;font-size:28px;letter-spacing:-.02em;line-height:1.1}
.bestaetigt .einleit{margin:14px auto 0;max-width:34ch}
.demo{display:inline-block;margin-top:18px;font-size:12px;padding:6px 10px;border:1px dashed var(--grau);color:var(--grau)}

/* ---------- Fuß ---------- */
footer{padding:64px 0 40px;background:#1B1E21}
.fraster2{display:grid;gap:32px}
@media (min-width:760px){.fraster2{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
.fmarke{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.fmarke img{height:24px;width:auto}
.fmarke b{font-size:14px}
footer p{font-size:14px;color:var(--grau);line-height:1.7}
.fkopf2{color:var(--ink);font-weight:600;margin-bottom:10px}
footer a{color:var(--ink2);text-decoration:none;font-size:14px}
footer a:hover{color:var(--gelb)}
.fliste3 a,footer p a{display:inline-block;padding:4px 0}
.fuss-unten{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:44px;padding-top:20px;border-top:1px solid var(--linie);font-size:13px;color:var(--grau)}
.fuss-unten .rechts{display:flex;gap:20px}
.recht{margin-top:24px;display:grid;gap:14px}
.recht p{font-size:12.5px;line-height:1.7;max-width:110ch}
.recht strong{color:var(--ink2)}

.hoch{position:fixed;right:16px;bottom:16px;z-index:40;width:48px;height:48px;display:grid;place-items:center;background:var(--gelb);color:var(--auf);border:0;cursor:pointer;
  opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .3s var(--weich)}
.hoch.an{opacity:1;transform:none;pointer-events:auto}
.hoch svg{width:20px;height:20px}

/* ---------- Danke-Seite ---------- */
.dankeseite{min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;padding:40px var(--rand)}
.dankeseite img{height:72px;width:auto;margin:0 auto 32px}
.dankeseite h1{font-size:clamp(36px,8vw,72px);line-height:1;max-width:14ch;margin:0 auto}
.dankeseite .text{margin:20px auto 34px}

/* ---------- Ruhige Darstellung ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .laden,.js h1 .laden{opacity:1;transform:none;animation:none}
  .js .auf{opacity:1;transform:none}
  .bandlauf{animation:none}
  .heldbild,.heldtext{transform:none!important}
  .heldtext{opacity:1!important}
}

/* Akzent als kleine Schrift: hellerer Ton für Kontrast */
.dienst .code{color:var(--akzent-text)}
.dienst a:hover .code,.dienst a:focus-visible .code,.dienst a.aktiv .code{color:var(--auf)}
.leiste-tel b{color:var(--akzent-text)}
.leiste-tel:hover b{color:#fff}
.ohnejs a{color:var(--akzent-text)}

/* ---------- Impressum / Datenschutz ---------- */
.rkopf{border-bottom:1px solid var(--linie)}
.rkopf .wrap{display:flex;align-items:center;gap:16px;min-height:64px}
.rkopf .marke img{height:26px}
.rzurueck{font-size:13px;font-weight:600;color:var(--ink2);text-decoration:none;padding:12px 0}
.rzurueck:hover{color:var(--akzent-text)}
.rechtsseite{padding:36px 0 56px}
.rechtsseite .wrap{max-width:760px}
.rechtsseite h1{text-transform:none;font-size:26px;letter-spacing:-.02em;line-height:1.15;margin-bottom:18px}
.rechtsseite h2{font-family:var(--sans);font-weight:600;font-size:14.5px;letter-spacing:0;line-height:1.3;margin:22px 0 4px;color:var(--ink)}
.rechtsseite h2::after{display:none}
.rechtsseite p,.rechtsseite li{color:var(--grau);font-size:14px;line-height:1.6;max-width:72ch}
.rechtsseite p+p{margin-top:8px}
.rechtsseite ul{list-style:disc;padding-left:1.2em;margin:4px 0 8px}
.rechtsseite a{color:var(--ink2)}
.rstand{margin-top:28px;font-size:13px}
.rfuss{padding:0 0 24px;background:#1B1E21}
.rfuss .fuss-unten{margin-top:0}
.dankelinks{margin-top:28px;font-size:14px;color:var(--grau)}
.dankelinks a{color:var(--ink2)}
.schildnotiz{margin-top:12px;font-size:13px;color:var(--grau);text-align:right}