/* =========================================================================
   Tribune GmbH — DGUV V3 Prüfung
   Design-Rezept "Prüfsiegel": Newsreader (Serife, Gewicht 500) für Display,
   Plus Jakarta Sans für Text. Slate aus dem Tribune-Logo, ein Orange als Akzent.
   ========================================================================= */

/* --- Schriften (lokal, kein CDN) ---------------------------------------- */
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'PlusJakarta';src:url('../fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'PlusJakarta';src:url('../fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'PlusJakarta';src:url('../fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'PlusJakarta';src:url('../fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

/* --- Marken-Werte -------------------------------------------------------- */
:root{
  --slate:#333E45;        /* Tribune-Logo */
  --ink:#232B31;          /* dunkle Sektionen */
  --ink-2:#2C363D;
  --ink-3:#38434B;        /* Karten auf dunkel */
  --paper:#FFFFFF;
  --paper-2:#F5F6F7;      /* Sektionswechsel, 98 % Helligkeit */
  --paper-3:#EDF0F2;
  --line:#E4E8EB;
  --line-2:#CDD3D8;
  --txt:#1F262C;
  --txt-2:#515B63;
  --txt-3:#7A8590;
  --acc:#E85D10;          /* Orange, nur Button + ein Wort + Icon */
  --acc-2:#BF4A08;        /* Orange dunkel — Text auf hellem Grund */
  --acc-3:#F2864A;        /* Orange hell — auf dunklem Grund */
  --acc-soft:#FDEFE6;
  --on-dark:#F2F4F5;
  --on-dark-2:#AEB7BF;
  --dark-line:rgba(255,255,255,.11);
  --gut:#2E8B57;
  --schlecht:#C0392B;
  --wa:#25D366;

  --f-d:'Newsreader',Georgia,'Times New Roman',serif;
  --f-b:'PlusJakarta',system-ui,-apple-system,'Segoe UI',sans-serif;

  --r-btn:10px;  --r-klein:14px;  --r:20px;  --r-gross:26px;  --r-pille:999px;

  --sh:0 1px 2px rgba(31,38,44,.04), 0 14px 32px rgba(31,38,44,.06);
  --sh-l:0 2px 4px rgba(31,38,44,.05), 0 28px 60px rgba(31,38,44,.09);
  --sh-acc:0 10px 26px rgba(232,93,16,.22);

  --ease:cubic-bezier(.22,.61,.36,1);
  --e-soft:cubic-bezier(.22,1,.36,1);
  --e-calm:cubic-bezier(.25,1,.3,1);
  --e-snap:cubic-bezier(.34,1.56,.64,1);
  --spring:linear(0,.28 7.6%,.79 17%,.99 22.4%,1.06 26%,1.08 30%,1.03 39%,1 50%,1 100%);
  --wrap:1180px;
}
@supports (animation-timing-function: linear(0,1)){
  :root{
    --e-soft:linear(0,.0492,.1613,.2979,.4356,.5617,.6701,.759,.8294,.8833,.9233,.9521,.9721,.9857,.9944,.9996,1.0026,1.0039,1.0043,1.0042,1.0037,1.0031,1.0025,1);
    --e-calm:linear(0,.1012,.28,.4507,.5905,.6983,.779,.8387,.8824,.9143,.9376,.9546,.967,.976,.9825,.9873,.9907,.9933,.9951,.9964,.9974,.9981,.9986,1);
  }
}

/* --- Grundlagen ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--txt);
  font:400 16px/1.65 var(--f-b);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0;padding:0}
p,li{text-wrap:pretty}
ul{list-style:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
section[id]{scroll-margin-top:84px}
.sec{position:relative;padding:clamp(4rem,7.4vw,6.6rem) 0}
.sec--eng{padding:clamp(2.6rem,4.5vw,3.8rem) 0}
.s-paper{background:var(--paper)}
.s-paper2{background:var(--paper-2)}
.s-dark{background:var(--ink);color:var(--on-dark)}
.s-dark p{color:var(--on-dark-2)}
.sec > .wrap{position:relative;z-index:1}

/* Hintergrund-Deko: leiser Schein und feines Linienraster in hellen Sektionen */
.deko{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.deko::before{
  content:"";position:absolute;width:46rem;height:46rem;border-radius:50%;
  background:radial-gradient(circle,rgba(232,93,16,.09) 0%,rgba(232,93,16,0) 68%);
  top:-16rem;right:-14rem;
}
.deko--links::before{right:auto;left:-16rem;top:auto;bottom:-18rem}
.deko__raster{
  position:absolute;inset:0;opacity:.55;
  background-image:linear-gradient(rgba(51,62,69,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(51,62,69,.07) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 70% 30%,#000 0%,transparent 70%);
  mask-image:radial-gradient(ellipse 60% 55% at 70% 30%,#000 0%,transparent 70%);
}
.s-dark .deko__raster{
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
}

/* Logo-Wasserzeichen (nur das Säulen-Emblem) */
.hat-wz{position:relative;overflow:hidden;isolation:isolate}
.hat-wz::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  right:-6%;top:50%;transform:translateY(-50%);
  width:min(46vw,620px);aspect-ratio:914/700;
  background:url("../logo/wasserzeichen.png") center / contain no-repeat;opacity:.05;
}
@media (max-width:900px){.hat-wz::before{width:min(80vw,420px);right:-22%;opacity:.045}}

/* --- Typografie ---------------------------------------------------------- */
.kicker{display:block;margin:0 0 .7rem;font:600 .9375rem/1.4 var(--f-b);color:var(--acc-2);letter-spacing:0}
.s-dark .kicker,.kontakt .kicker,.hero .kicker{color:var(--acc-3)}

h2,.h2{
  font:500 clamp(1.62rem,2.9vw,2.35rem)/1.1 var(--f-d);
  letter-spacing:-.014em;color:var(--txt);text-wrap:balance;
}
.s-dark h2,.s-dark .h2,.kontakt h2{color:var(--on-dark)}
h2 .z{display:block}                       /* erste Zeile */
h2 .a{display:block;color:var(--acc-2)}    /* farbiger Teil, eigene Zeile */
.s-dark h2 .a,.kontakt h2 .a{color:var(--acc-3)}

h3{font:600 1.12rem/1.3 var(--f-b);color:var(--txt);letter-spacing:-.012em}
.s-dark h3,.kontakt h3{color:var(--on-dark)}

.lead{font-size:1.04rem;line-height:1.62;color:var(--txt-2);max-width:56ch;margin-top:1rem}
.s-dark .lead,.kontakt .lead{color:var(--on-dark-2)}

.kopf{max-width:44rem;margin-bottom:clamp(2.2rem,3.6vw,3.1rem)}
.kopf--mitte{margin-inline:auto;text-align:center}
.kopf--mitte .lead{margin-inline:auto}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.86rem 1.4rem;border-radius:var(--r-btn);border:1px solid transparent;
  font:600 .95rem/1 var(--f-b);white-space:nowrap;cursor:pointer;
  transition:background .22s var(--ease),color .22s var(--ease),
             border-color .22s var(--ease),transform .18s var(--spring);
}
.btn svg{width:17px;height:17px;flex:none}
@media (hover:hover){.btn:hover{transform:translateY(-2px)}}
.btn:active{transform:scale(.975)}
.btn--acc{background:var(--acc);color:#fff}
.btn--acc:hover{background:#D3540D}
.btn--ink{background:var(--slate);color:#fff}
.btn--ink:hover{background:var(--ink-3)}
.btn--geist{background:transparent;color:var(--txt);border-color:var(--line-2)}
.btn--geist:hover{border-color:var(--txt);background:rgba(31,38,44,.04)}
.s-dark .btn--geist,.hero .btn--geist,.kontakt .btn--geist{color:#fff;border-color:rgba(255,255,255,.34)}
.s-dark .btn--geist:hover,.hero .btn--geist:hover,.kontakt .btn--geist:hover{background:rgba(255,255,255,.10);border-color:#fff}
.btn--wa{background:var(--wa);color:#06331A}
.btn--wa:hover{background:#38DE78}
.btn--breit{width:100%}

/* --- Haken-Listen mit gezeichnetem Häkchen ------------------------------- */
.haken{display:grid;gap:.6rem}
.haken li{display:grid;grid-template-columns:22px 1fr;gap:.66rem;align-items:start;font-size:.95rem;line-height:1.5}
.ck{width:22px;height:22px;margin-top:.08rem}
.ck path{fill:none;stroke:var(--acc-2);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .7s var(--e-calm) var(--ck-d,0ms)}
.is-da .ck path,.no-rv .ck path{stroke-dashoffset:0}
.haken li:nth-child(1) .ck{--ck-d:80ms}.haken li:nth-child(2) .ck{--ck-d:230ms}
.haken li:nth-child(3) .ck{--ck-d:380ms}.haken li:nth-child(4) .ck{--ck-d:530ms}
.haken li:nth-child(5) .ck{--ck-d:680ms}.haken li:nth-child(6) .ck{--ck-d:830ms}
.haken li:nth-child(7) .ck{--ck-d:980ms}
.s-dark .ck path,.hero .ck path,.kontakt .ck path{stroke:var(--acc-3)}

/* =========================================================================
   Header — transparent über dem Hero, sichtbar beim Scrollen
   ========================================================================= */
.kopfleiste{
  position:fixed;top:0;left:0;right:0;z-index:80;
  background:transparent;border-bottom:1px solid transparent;padding:.9rem 0;
  transition:background .26s var(--ease),border-color .26s var(--ease),
             box-shadow .26s var(--ease),padding .26s var(--ease);
}
.kopfleiste.is-fest{
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom-color:var(--line);box-shadow:0 8px 28px rgba(31,38,44,.07);padding:.5rem 0;
}
.kopfleiste__in{display:flex;align-items:center;gap:1.5rem}
.marke{display:flex;align-items:center;flex:none;position:relative}
.marke img{height:54px;width:auto;transition:height .26s var(--ease)}
.marke .marke__dunkel{display:none}
.kopfleiste.is-fest .marke img{height:44px}
.kopfleiste.is-fest .marke__hell{display:none}
.kopfleiste.is-fest .marke__dunkel{display:block}

.nav{display:flex;gap:1.65rem;margin-left:auto}
.nav a{font:500 .93rem/1 var(--f-b);color:rgba(255,255,255,.88);position:relative;padding:.3rem 0;transition:color .2s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;background:var(--acc);transition:right .28s var(--ease)}
.nav a:hover{color:#fff}
.nav a:hover::after{right:0}
.kopfleiste.is-fest .nav a{color:var(--txt-2)}
.kopfleiste.is-fest .nav a:hover{color:var(--txt)}

.kopf-tel{display:inline-flex;align-items:center;gap:.45rem;font:600 .93rem/1 var(--f-b);color:#fff;transition:color .2s var(--ease)}
.kopf-tel svg{width:16px;height:16px;color:var(--acc-3)}
.kopfleiste.is-fest .kopf-tel{color:var(--txt)}
.kopfleiste.is-fest .kopf-tel svg{color:var(--acc-2)}
.kopfleiste .btn--acc{padding:.72rem 1.1rem}

.kopf-mob{display:none;gap:.5rem;margin-left:auto}
.kopf-mob a{
  width:42px;height:42px;border-radius:var(--r-pille);display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.32);color:#fff;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .18s var(--spring);
}
.kopf-mob a svg{width:19px;height:19px}
.kopf-mob a:active{transform:scale(.93)}
.kopf-mob .m-tel{background:var(--acc);border-color:var(--acc);color:#fff}
.kopf-mob .m-wa{background:var(--wa);border-color:var(--wa);color:#06331A}

/* =========================================================================
   Hero — vollflächiges Bild, Content zweispaltig (Variante B)
   ========================================================================= */
.hero{position:relative;isolation:isolate;padding:clamp(7.4rem,12vw,9.4rem) 0 clamp(3.4rem,5vw,4.6rem);color:#fff;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(24,30,35,.92) 0%,rgba(24,30,35,.72) 38%,rgba(24,30,35,.34) 62%,rgba(24,30,35,.5) 100%);
}
.hero__in{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(2rem,4vw,3.6rem);align-items:center}

.hero h1{font:600 .9375rem/1.45 var(--f-b);color:var(--acc-3);margin:0 0 .85rem;letter-spacing:0}
.hero__ansage{font:500 clamp(2.2rem,4.7vw,3.7rem)/1.04 var(--f-d);letter-spacing:-.018em;color:#fff;margin:0}
.hero__ansage .a{display:block;color:var(--acc-3)}
/* Handgezeichneter Unterstrich unter einem Wort der WEISSEN Zeile */
.ul{position:relative;display:inline-block}
.ul svg{position:absolute;left:0;bottom:-.14em;width:100%;height:.34em;overflow:visible}
.ul path{fill:none;stroke:var(--acc);stroke-width:5;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:260}
.ul.is-da path{animation-name:strich;animation-duration:.9s;animation-timing-function:cubic-bezier(.25,1,.3,1);animation-delay:.55s;animation-fill-mode:both}
@keyframes strich{from{stroke-dashoffset:260}to{stroke-dashoffset:0}}

.hero__txt{margin-top:1rem;font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.8);max-width:30rem}
.hero .haken{margin-top:1.4rem;gap:.6rem;max-width:33rem}
.hero .haken li{color:rgba(255,255,255,.94);font-size:.95rem}

.sterne-zeile{display:flex;align-items:center;gap:.6rem;margin-top:1.3rem;flex-wrap:wrap;font-size:.9rem;color:rgba(255,255,255,.82)}
.sterne{display:inline-flex;gap:2px}
.sterne svg{width:16px;height:16px;color:#F5B301}
.sterne-zeile b{color:#fff;font-weight:700}
.g-logo{width:18px;height:18px;flex:none}

.hero__btns{display:flex;gap:.75rem;margin-top:1.7rem;flex-wrap:wrap}

/* =========================================================================
   Quiz-Formular (mehrfach mountbar)
   ========================================================================= */
.karte-form{position:relative;background:var(--paper);border-radius:var(--r-gross);padding:1.5rem 1.5rem 1.35rem;box-shadow:var(--sh-l);color:var(--txt)}
.karte-form h2,.karte-form h3,.karte-form h4{color:var(--txt)}
.form__kopf{padding-right:4.6rem}
.form__kopf h3{font:500 1.5rem/1.12 var(--f-d);letter-spacing:-.012em}
.form__kopf p{margin-top:.3rem;font-size:.86rem;color:var(--txt-3)}

.stoerer{
  position:absolute;top:-14px;right:-10px;z-index:3;width:90px;height:90px;border-radius:50%;
  background:var(--acc);color:#fff;display:grid;place-content:center;text-align:center;
  transform:rotate(-11deg);box-shadow:0 8px 22px rgba(232,93,16,.34);
  font:700 .68rem/1.15 var(--f-b);padding:.4rem;
}
.stoerer b{display:block;font:600 1.22rem/1 var(--f-d);letter-spacing:-.01em;margin-bottom:.1rem}

.fortschritt{margin:1.05rem 0 1.1rem}
.fortschritt__z{display:flex;justify-content:space-between;font-size:.78rem;color:var(--txt-3);margin-bottom:.42rem;font-weight:500}
.fortschritt__b{height:5px;border-radius:var(--r-pille);background:var(--line);overflow:hidden}
.fortschritt__f{height:100%;width:25%;border-radius:var(--r-pille);background:var(--acc);transition:width .45s var(--e-soft)}

.schritt{display:none}
.schritt.is-an{display:block;animation:rein .34s var(--e-soft)}
@keyframes rein{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
.schritt__f{font:600 1rem/1.35 var(--f-b);margin-bottom:.85rem;color:var(--txt)}

/* Illustrierte Auswahlkarten */
.picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}
.pick{
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-klein);
  padding:.7rem .45rem .6rem;display:flex;flex-direction:column;align-items:center;gap:.45rem;
  cursor:pointer;position:relative;overflow:hidden;
  transition:border-color .22s var(--ease),transform .22s var(--spring),box-shadow .22s var(--ease),background .22s var(--ease);
}
.pick__ill{display:block;width:100%;max-width:78px}
.pick__ill svg{width:100%;height:auto;display:block;transition:transform .3s var(--ease)}
.pick__t{font:600 .78rem/1.2 var(--f-b);color:var(--txt);text-align:center;hyphens:auto;-webkit-hyphens:auto}
.pick:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:var(--sh)}
.pick:hover .pick__ill svg{transform:scale(1.05)}
.pick.is-gewaehlt{border-color:var(--acc);background:var(--acc-soft);box-shadow:0 0 0 3px rgba(232,93,16,.18)}
.pick.is-gewaehlt::after{
  content:"";position:absolute;top:6px;right:6px;width:17px;height:17px;border-radius:50%;
  background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* Schieberegler: Anzahl der Prüflinge */
.rng{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-klein);padding:26px 18px 14px;position:relative}
.rng__out{
  display:inline-block;background:var(--slate);color:#fff;font:700 .92rem/1 var(--f-b);font-variant-numeric:tabular-nums;
  padding:.35rem .7rem;border-radius:var(--r-pille);position:absolute;top:-13px;white-space:nowrap;
  box-shadow:0 4px 12px rgba(31,38,44,.22);
  left:calc(18px + 13px + (100% - 36px - 26px) * var(--pn,.07));transform:translateX(-50%);transition:left .06s linear;
}
.rng__out::after{content:"";position:absolute;left:50%;bottom:-4px;width:9px;height:9px;background:var(--slate);transform:translateX(-50%) rotate(45deg);border-radius:1px}
.rng__in{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--r-pille);
  background:linear-gradient(90deg,var(--acc) var(--p,7%),var(--line-2) var(--p,7%));outline:none;margin:6px 0 8px}
.rng__in::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--acc);border:3px solid #fff;cursor:grab;
  box-shadow:0 2px 6px rgba(232,93,16,.34),0 6px 16px rgba(31,38,44,.16)}
.rng__in::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--acc);border:3px solid #fff;cursor:grab;box-shadow:0 2px 6px rgba(232,93,16,.34)}
.rng__in:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.rng__ends{display:flex;justify-content:space-between;font-size:.72rem;color:var(--txt-3);font-variant-numeric:tabular-nums}
.rng__alt{display:block;margin-top:1rem}
.rng__alt > span:first-child{display:block;font:600 .72rem/1 var(--f-b);letter-spacing:.05em;text-transform:uppercase;color:var(--txt-3);margin-bottom:.4rem}
.rng__row{display:flex;align-items:center;gap:.6rem}
.rng__row input{flex:1;min-width:0;padding:.7rem .85rem;border:1px solid var(--line-2);border-radius:var(--r-btn);background:var(--paper);font-variant-numeric:tabular-nums}
.rng__row input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(232,93,16,.14)}
.rng__row em{font-style:normal;font-size:.85rem;font-weight:600;color:var(--txt-3);flex:none}
.rng__hinweis{margin-top:.7rem;font-size:.78rem;line-height:1.45;color:var(--txt-3)}

.feld{margin-bottom:.72rem}
.feld label{display:block;font:500 .82rem/1 var(--f-b);color:var(--txt-2);margin-bottom:.35rem}
.feld input,.feld textarea,.feld select{width:100%;padding:.75rem .85rem;border:1px solid var(--line-2);border-radius:var(--r-btn);background:var(--paper);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(232,93,16,.14)}
.feld input.ist-falsch{border-color:var(--schlecht);animation:ruetteln .38s var(--ease)}
@keyframes ruetteln{0%,100%{transform:translateX(0)}22%{transform:translateX(-4px)}45%{transform:translateX(4px)}68%{transform:translateX(-2px)}86%{transform:translateX(2px)}}
.feld textarea{min-height:78px;resize:vertical}
.feld--zwei{display:grid;grid-template-columns:1fr 1fr;gap:.72rem}
.feld--zwei > div{margin:0}

.dsgvo{display:grid;grid-template-columns:18px 1fr;gap:.6rem;align-items:start;margin:.85rem 0 .1rem}
.dsgvo input{width:18px;height:18px;margin:.16rem 0 0;accent-color:var(--acc);flex:none}
.dsgvo label{font-size:.79rem;line-height:1.5;color:var(--txt-3)}
.dsgvo a{color:var(--acc-2);text-decoration:underline;text-underline-offset:2px}

.form__nav{display:flex;gap:.6rem;margin-top:1rem}
.form__nav .btn{flex:1}
.zurueck{display:none}
.zurueck.is-an{display:inline-flex;flex:0 0 auto;padding-inline:1rem}
/* Die Formularkarte ist eine helle Insel — Gegen-Scope NACH den Dunkel-Regeln */
.karte-form .btn--geist{background:transparent;color:var(--txt);border-color:var(--line-2)}
.karte-form .btn--geist:hover{border-color:var(--txt);background:rgba(31,38,44,.04)}
.senden.ist-busy{opacity:.75;pointer-events:none}

.trustline{margin-top:.9rem;text-align:center;font:600 .875rem/1.5 var(--f-b);color:var(--txt-2)}
.google-zeile{margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;font-size:.84rem;color:var(--txt-3)}
.google-zeile b{color:var(--txt);font-weight:700;font-size:.95rem}

.formstate{display:none;text-align:center;padding:1.6rem .5rem}
.formstate.is-an{display:block}
.formstate__ic{width:54px;height:54px;margin:0 auto .9rem;border-radius:50%;background:var(--gut);display:grid;place-items:center}
.formstate__ic svg{width:27px;height:27px;color:#fff}
.formstate h4{font:500 1.35rem/1.2 var(--f-d);margin-bottom:.45rem}
.formstate p{font-size:.92rem;color:var(--txt-2);max-width:32ch;margin-inline:auto}
.formfehler{display:none;margin-top:.7rem;font-size:.84rem;color:var(--schlecht);text-align:center}
.formfehler.is-an{display:block}

/* =========================================================================
   Trust-Leiste — vier Fakten, senkrechte Linien, keine Kästen
   ========================================================================= */
.fakten{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fakt{padding:1.35rem 1.4rem;display:flex;flex-direction:column;gap:.15rem;border-left:1px solid var(--line)}
.fakt:first-child{border-left:0}
.fakt b{font:500 1.9rem/1 var(--f-d);color:var(--txt);letter-spacing:-.02em}
.fakt span{font-size:.86rem;color:var(--txt-2);line-height:1.4}

/* =========================================================================
   Bewertungs-Band
   ========================================================================= */
.g-pille{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem .6rem;padding:.55rem .95rem;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-pille);box-shadow:var(--sh);font-size:.9rem;color:var(--txt-2);margin-top:clamp(1.6rem,3vw,2.4rem);margin-bottom:0}
.g-pille b{font-weight:700;color:var(--txt);font-size:1.02rem}

.band{position:relative;margin-inline:calc(50% - 50vw);width:100vw;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.band__spur{display:flex;gap:1rem;width:max-content;animation:laufen 62s linear infinite}
.band:hover .band__spur{animation-play-state:paused}
@keyframes laufen{from{transform:translateX(0)}to{transform:translateX(calc(-50% - var(--naht,8px)))}}
@media (prefers-reduced-motion:reduce){.band__spur{animation:none}}

.bew{width:min(23rem,78vw);flex:none;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem 1.3rem 1.15rem;display:flex;flex-direction:column}
.bew__s{display:flex;gap:2px;margin-bottom:.7rem}
.bew__s svg{width:15px;height:15px;color:#F5B301}
.bew p{font-size:.93rem;line-height:1.56;color:var(--txt-2);flex:1}
.bew__f{display:flex;align-items:center;gap:.7rem;margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--line)}
.bew__av{width:36px;height:36px;border-radius:var(--r-pille);flex:none;display:grid;place-items:center;background:var(--slate);color:#fff;font:700 .8rem/1 var(--f-b);letter-spacing:.02em}
.bew__m{flex:1;min-width:0}
.bew__m b{display:block;font:600 .88rem/1.3 var(--f-b);color:var(--txt)}
.bew__m span{font-size:.76rem;color:var(--txt-3)}

/* =========================================================================
   Leistungen — Tabs: Reiter mittig, darunter EIN Container über die volle
   Breite. Desktop: zwei Drittel Text links, ein Drittel Bild rechts, beide
   gleich hoch. Mobil: Bild oben, Text darunter.
   ========================================================================= */
.tabs__leiste{display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem;border-bottom:1px solid var(--line);margin-bottom:clamp(1.6rem,1rem + 1.6vw,2.4rem)}
.tabs__k{position:relative;flex:none;padding:.95rem 1.35rem;background:transparent;border:0;border-radius:var(--r-btn) var(--r-btn) 0 0;cursor:pointer;white-space:nowrap;
  font:600 .95rem/1 var(--f-b);color:var(--txt-2);transition:background .2s var(--ease),color .2s var(--ease)}
.tabs__k::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:center;transition:transform .32s var(--e-soft)}
.tabs__k:hover{color:var(--txt);background:rgba(31,38,44,.035)}
.tabs__k.is-aktiv{color:var(--acc-2);background:var(--acc-soft)}
.tabs__k.is-aktiv::after{transform:scaleX(1)}
.tabs__k:focus-visible{outline:2px solid var(--acc);outline-offset:-3px}
.tabp{display:none}
.tabp.is-aktiv{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(1.6rem,1rem + 2.4vw,3rem);align-items:stretch;animation:tabAuf .38s var(--e-soft) both}
@keyframes tabAuf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tabp.is-aktiv{animation:none}}
.tabp__text{padding:.5rem 0 .3rem}
.tabp__text .kicker{margin-bottom:.55rem}
.tabp__h{font:500 clamp(1.5rem,1.2rem + 1.1vw,2rem)/1.15 var(--f-d);letter-spacing:-.014em}
.tabp__p{margin-top:.75rem;font-size:.97rem;line-height:1.62;color:var(--txt-2);max-width:58ch;text-wrap:balance}
.tabp__haken{margin:1.3rem 0 1.7rem;max-width:58ch}
.tabp__haken li span{text-wrap:balance}
.tabp__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem}
/* Telefon ohne Fläche: nur Hörer + Nummer */
.tel-nackt{display:inline-flex;align-items:center;gap:.5rem;padding:.86rem .3rem;font:600 .95rem/1 var(--f-b);color:var(--txt);white-space:nowrap;transition:color .2s var(--ease)}
.tel-nackt svg{width:18px;height:18px;color:var(--acc-2);flex:none}
.tel-nackt:hover{color:var(--acc-2)}
/* Das Bild füllt sein Drittel auch in der Höhe: absolut im Rahmen, der Rahmen
   nimmt die Höhe der Textspalte an (Δ = 0). */
.tabp__bild{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink-2);box-shadow:var(--sh);min-height:100%}
.tabp__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* =========================================================================
   Chat-Sektion
   ========================================================================= */
.chat-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(2rem,4.4vw,3.8rem);align-items:center}
.handy{position:relative;background:#1B1F26;border-radius:34px;padding:11px;box-shadow:0 30px 70px -30px rgba(0,0,0,.72),0 2px 5px rgba(0,0,0,.3);max-width:334px;margin-inline:auto}
.handy__scheibe{position:relative;background:#ECE5DD;border-radius:24px;overflow:hidden;height:582px;display:flex;flex-direction:column}
.handy__scheibe::before{content:"";position:absolute;inset:0;z-index:0;opacity:.55;background-image:radial-gradient(rgba(0,0,0,.06) 1px,transparent 1px);background-size:15px 15px}
.chat__kopf{position:relative;z-index:2;display:flex;align-items:center;gap:.6rem;background:#075E54;color:#fff;padding:.62rem .8rem;flex:none}
.chat__av{width:34px;height:34px;border-radius:50%;background:#fff;flex:none;overflow:hidden;display:grid;place-items:center;padding:4px}
.chat__av img{width:100%;height:100%;object-fit:contain}
.chat__wer{flex:1;min-width:0}
.chat__wer b{display:block;font:600 .8rem/1.25 var(--f-b)}
.chat__wer span{display:flex;align-items:center;gap:.32rem;font-size:.66rem;color:rgba(255,255,255,.82)}
.chat__punkt{width:6px;height:6px;border-radius:50%;background:#4ADE80;flex:none}
.chat__kopf > svg{width:18px;height:18px;color:rgba(255,255,255,.9);flex:none}
.chat__lauf{position:relative;z-index:1;flex:1;overflow:hidden;padding:.7rem .6rem}
.chat__inner{display:flex;flex-direction:column;gap:.42rem;transition:transform .5s var(--ease)}
.chat__tag{align-self:center;background:rgba(255,255,255,.85);border-radius:6px;padding:.2rem .55rem;font:500 .64rem/1 var(--f-b);color:#54656F;margin-bottom:.2rem}
.blase{max-width:82%;padding:.45rem .6rem .5rem;border-radius:8px;position:relative;font-size:.775rem;line-height:1.42;color:#111B21;
  box-shadow:0 1px 1px rgba(0,0,0,.12);opacity:0;transform:translateY(9px);transition:opacity .34s var(--ease),transform .34s var(--ease)}
.blase.is-da{opacity:1;transform:none}
.blase--ein{align-self:flex-start;background:#fff;border-top-left-radius:2px}
.blase--aus{align-self:flex-end;background:#D9FDD3;border-top-right-radius:2px}
.blase b{font-weight:700}
.blase--foto{padding:.3rem}
.blase--foto img{border-radius:5px;width:180px;height:135px;object-fit:cover}
.blase__zeit{display:flex;align-items:center;justify-content:flex-end;gap:.2rem;font-size:.6rem;color:#667781;margin-top:.16rem}
.blase--foto .blase__zeit{position:absolute;right:.5rem;bottom:.4rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.blase__zeit svg{width:13px;height:13px;color:#53BDEB}
.blase--datei{display:flex;align-items:center;gap:.5rem;background:#D9FDD3}
.blase--datei .dz{width:30px;height:30px;border-radius:5px;background:rgba(255,255,255,.8);display:grid;place-items:center;flex:none}
.blase--datei .dz svg{width:16px;height:16px;color:#4F7A5C}
.blase--datei b{display:block;font-size:.74rem}
.blase--datei small{font-size:.63rem;color:#667781}
.chat__fuss{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem .7rem;background:#F0F2F5;flex:none;position:relative;z-index:2}
.chat__bar{flex:1;height:30px;border-radius:15px;background:#fff}
.chat__send{width:30px;height:30px;border-radius:50%;background:#25D366;display:grid;place-items:center;flex:none;color:#fff}
.chat__send svg{width:14px;height:14px}

.chat__arg{display:grid;gap:.95rem;margin-top:1.4rem}
.chat__arg li{display:grid;grid-template-columns:22px 1fr;gap:.7rem;align-items:start}
.chat__arg b{display:block;font:600 .96rem/1.35 var(--f-b);color:var(--on-dark)}
.chat__arg span{font-size:.9rem;line-height:1.55;color:var(--on-dark-2)}
.chat__btns{display:flex;gap:.7rem;margin-top:1.7rem;flex-wrap:wrap}

/* =========================================================================
   Vorteils-Bento — jede Kachel ein Foto mit Überlagerung
   ========================================================================= */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:252px;gap:12px}
.btile{position:relative;isolation:isolate;display:flex;align-items:flex-end;overflow:hidden;border-radius:var(--r)}
.btile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .9s var(--e-calm)}
.btile:hover img{transform:scale(1.045)}
.btile::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(24,30,35,.10) 0%,rgba(24,30,35,.34) 42%,rgba(24,30,35,.88) 100%)}
.btile__t{padding:1.15rem 1.2rem 1.1rem;color:#fff;text-shadow:0 1px 12px rgba(24,30,35,.4)}
.btile__t h3{color:#fff;font:500 1.22rem/1.18 var(--f-d);letter-spacing:-.01em}
.btile__t p{margin-top:.4rem;font-size:.855rem;line-height:1.48;color:rgba(255,255,255,.86)}
.bt-gross{grid-column:span 2;grid-row:span 2}
.bt-gross .btile__t h3{font-size:clamp(1.4rem,1.7vw,1.8rem)}
.bt-gross .btile__t p{font-size:.95rem;max-width:38ch}
.bt-hoch{grid-column:span 1;grid-row:span 2}
.bt-hoch img{object-position:50% 20%}
.bt-breit{grid-column:span 2;grid-row:span 1}
.bt-gross .btile__t,.bt-breit .btile__t{padding:1.4rem 1.45rem 1.3rem}

/* =========================================================================
   Frist-Check + Prüffristen — das Artefakt des Gewerks
   ========================================================================= */
.frist{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.6rem,3.4vw,3rem);align-items:start}
.check{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-gross);padding:1.5rem 1.5rem 1.4rem;position:relative}
.check__t{font:500 1.35rem/1.2 var(--f-d);letter-spacing:-.012em;margin-bottom:.3rem}
.check__sub{font-size:.86rem;color:var(--txt-3);margin-bottom:1.1rem}
.check__l{display:block;font:600 .78rem/1 var(--f-b);letter-spacing:.05em;text-transform:uppercase;color:var(--txt-3);margin:0 0 .5rem}
.umg{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1rem}
.umg button{
  border:1.5px solid var(--line);background:var(--paper);border-radius:var(--r-btn);padding:.62rem .7rem;text-align:left;cursor:pointer;
  font:600 .82rem/1.25 var(--f-b);color:var(--txt);display:grid;gap:.1rem;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--spring);
}
.umg button small{display:block;font:400 .72rem/1.3 var(--f-b);color:var(--txt-3)}
.umg button:hover{border-color:var(--acc)}
.umg button.is-an{border-color:var(--acc);background:var(--acc-soft)}
.check__zeile{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1.1rem}
.check__zeile select{width:100%;padding:.68rem .8rem;border:1px solid var(--line-2);border-radius:var(--r-btn);background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23515B63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .7rem center/16px no-repeat;
  -webkit-appearance:none;appearance:none;font-size:.9rem}
.check__erg{border-radius:var(--r-klein);padding:1rem 1.1rem;background:var(--paper-2);border:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:center;
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.check__erg .ampel{width:14px;height:14px;border-radius:50%;background:var(--line-2);position:relative}
.check__erg b{display:block;font:500 1.2rem/1.2 var(--f-d);color:var(--txt);letter-spacing:-.01em}
.check__erg span{display:block;font-size:.82rem;color:var(--txt-2);margin-top:.15rem}
.check__erg.ist-rot{background:#FDF0EE;border-color:#F1C7C1}.check__erg.ist-rot .ampel{background:var(--schlecht)}
.check__erg.ist-gelb{background:var(--acc-soft);border-color:#F6C9AE}.check__erg.ist-gelb .ampel{background:var(--acc)}
.check__erg.ist-gruen{background:#ECF7F0;border-color:#BFE3CD}.check__erg.ist-gruen .ampel{background:var(--gut)}
.check__erg .ampel::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 2.2s var(--e-calm) infinite;opacity:0}
.check__erg.ist-rot .ampel::after,.check__erg.ist-gelb .ampel::after{opacity:1}
@keyframes ping{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(3);opacity:0}}
.check__cta{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap}
.check__cta .btn{flex:1}
.check__fuss{margin-top:.8rem;font-size:.74rem;line-height:1.45;color:var(--txt-3)}

/* Prüfplakette: Ring mit zwölf Monaten, Jahr in der Mitte */
.plakette-wrap{position:absolute;top:-18px;right:-18px;width:120px;transform:rotate(9deg);filter:drop-shadow(0 8px 16px rgba(31,38,44,.18))}
.plak{width:100%;height:auto}
.plak .pm{fill:none;stroke:#fff;stroke-width:2}
.plak .pm-t{font:700 8px var(--f-b);fill:#fff}
.plak .pm.is-an{fill:var(--slate)}
.plak .pm-t.is-an{fill:#fff}
.plak .pj{font:500 22px var(--f-d);fill:#fff}
.plak .pk{font:700 6.5px var(--f-b);fill:#fff;letter-spacing:.04em}

.fristen{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-gross);overflow:hidden}
.fristen__kopf{padding:1.1rem 1.3rem;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.3rem 1rem}
.fristen__kopf h3{font:500 1.2rem/1.2 var(--f-d)}
.fristen__kopf span{font-size:.76rem;color:var(--txt-3)}
.fristen table{width:100%;border-collapse:collapse;font-size:.88rem}
.fristen th,.fristen td{padding:.72rem 1.3rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.fristen th{font:600 .72rem/1.3 var(--f-b);letter-spacing:.05em;text-transform:uppercase;color:var(--txt-3);background:var(--paper-2)}
.fristen tr:last-child td{border-bottom:0}
.fristen td:first-child{color:var(--txt);font-weight:500}
.fristen td:first-child small{display:block;font-weight:400;color:var(--txt-3);font-size:.76rem;margin-top:.1rem}
.fristen td.f{font:600 .95rem/1.3 var(--f-b);color:var(--acc-2);white-space:nowrap}
.fristen td.f small{display:block;font:400 .74rem/1.3 var(--f-b);color:var(--txt-3);white-space:normal}
.fristen__fuss{padding:.85rem 1.3rem 1rem;font-size:.76rem;line-height:1.5;color:var(--txt-3);border-top:1px solid var(--line);background:var(--paper-2)}

/* =========================================================================
   Nachweis — Foto mit schwebender Protokoll-Karte
   ========================================================================= */
.nachweis{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,4.5vw,4rem);align-items:center}
.nachweis__b{position:relative;margin:0;padding-bottom:4.4rem;padding-right:1.6rem}
.nachweis__b > img{border-radius:var(--r);width:100%;height:auto;box-shadow:var(--sh)}
.proto{
  position:absolute;right:0;bottom:0;width:min(88%,24rem);background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-klein);box-shadow:var(--sh-l);padding:.95rem 1rem 1rem;font-size:.74rem;
  animation:schweben 6s ease-in-out infinite;
}
@keyframes schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion:reduce){.proto{animation:none}}
.proto__k{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding-bottom:.6rem;border-bottom:1px solid var(--line);margin-bottom:.5rem}
.proto__k b{font:600 .8rem/1.2 var(--f-b);color:var(--txt)}
.proto__k span{font:600 .62rem/1 var(--f-b);color:var(--gut);background:#ECF7F0;padding:.3rem .5rem;border-radius:var(--r-pille)}
.proto table{width:100%;border-collapse:collapse}
.proto td{padding:.3rem 0;border-bottom:1px dashed var(--line);color:var(--txt-2);font-variant-numeric:tabular-nums}
.proto td:last-child{text-align:right;color:var(--txt);font-weight:600}
.proto tr:last-child td{border-bottom:0}
.proto .ok{color:var(--gut)}.proto .nok{color:var(--schlecht)}
.proto__f{margin-top:.5rem;display:flex;justify-content:space-between;font-size:.66rem;color:var(--txt-3)}

/* =========================================================================
   Branchen-Kacheln
   ========================================================================= */
.branchen{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.bk{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.35rem 1.25rem 1.3rem;display:flex;flex-direction:column;gap:.6rem;
  transition:border-color .24s var(--ease),transform .24s var(--e-soft)}
.bk:hover{border-color:var(--acc);transform:translateY(-2px)}
.bk__ic{width:46px;height:46px;border-radius:var(--r-klein);background:var(--acc-soft);display:grid;place-items:center;margin-bottom:.3rem}
.bk__ic svg{width:26px;height:26px;fill:none;stroke:var(--acc-2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bk__ic path,.bk__ic rect,.bk__ic circle{stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset 1.1s var(--e-calm) var(--ck-d,0ms)}
.is-da .bk__ic path,.is-da .bk__ic rect,.is-da .bk__ic circle{stroke-dashoffset:0}
.bk:nth-child(2) .bk__ic{--ck-d:100ms}.bk:nth-child(3) .bk__ic{--ck-d:200ms}.bk:nth-child(4) .bk__ic{--ck-d:300ms}
.bk:nth-child(5) .bk__ic{--ck-d:400ms}.bk:nth-child(6) .bk__ic{--ck-d:500ms}.bk:nth-child(7) .bk__ic{--ck-d:600ms}.bk:nth-child(8) .bk__ic{--ck-d:700ms}
.bk h3{font:500 1.15rem/1.2 var(--f-d)}
.bk p{font-size:.86rem;line-height:1.5;color:var(--txt-2)}

/* =========================================================================
   Ablauf — Bildkarten mit Nummernkreis auf der Kante
   ========================================================================= */
.ablauf{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;position:relative}
.schrittk{position:relative;display:flex;flex-direction:column}
.schrittk__b{position:relative;aspect-ratio:4/3;border-radius:var(--r) var(--r) 0 0;overflow:hidden;background:var(--ink-2)}
.schrittk__b img{width:100%;height:100%;object-fit:cover}
.schrittk__k{background:var(--paper);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r);padding:2.1rem 1.2rem 1.35rem;flex:1}
.schrittk__nr{position:absolute;left:1.2rem;top:0;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:var(--r-pille);
  background:var(--acc);color:#fff;display:grid;place-items:center;font:600 1.15rem/1 var(--f-d);box-shadow:0 6px 18px rgba(232,93,16,.32)}
.schrittk__kw{position:relative}
/* Linie auf der Kante zwischen Bild und Text — zeichnet sich beim Einblenden */
.schrittk__kw::before{content:"";position:absolute;top:0;left:0;width:calc(100% + 1.4rem);height:2px;z-index:0;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 8px,transparent 8px 16px);
  transform:scaleX(0);transform-origin:left center;transition:transform 1.1s var(--e-calm) .2s}
.schrittk.is-da .schrittk__kw::before{transform:scaleX(1)}
.schrittk:last-child .schrittk__kw::before{width:100%}
.schrittk h3{font:500 1.25rem/1.2 var(--f-d)}
.schrittk p{margin-top:.45rem;font-size:.9rem;line-height:1.56;color:var(--txt-2);text-wrap:balance}

/* =========================================================================
   Vergleich
   ========================================================================= */
.vgl{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start;position:relative}
.vgl__k{border-radius:var(--r-gross);padding:1.7rem 1.6rem 1.6rem}
.vgl__wir{background:var(--paper);border:1px solid var(--acc);box-shadow:0 0 0 4px rgba(232,93,16,.08),var(--sh-l);position:relative;margin-top:-.9rem}
.vgl__wir::before{content:"Empfohlen";position:absolute;top:-13px;left:1.6rem;background:var(--acc);color:#fff;font:700 .7rem/1 var(--f-b);letter-spacing:.09em;
  text-transform:uppercase;padding:.42rem .7rem;border-radius:var(--r-pille)}
.vgl__and{background:var(--paper-2);border:1px solid var(--line);filter:saturate(.5)}
.vgl__kopf{display:flex;align-items:center;gap:.75rem;padding-bottom:1.1rem;margin-bottom:1.1rem;border-bottom:1px solid var(--line)}
.vgl__logo{width:52px;height:52px;border-radius:var(--r-klein);background:var(--paper-2);flex:none;display:grid;place-items:center;overflow:hidden;padding:6px}
.vgl__logo img{width:100%;height:100%;object-fit:contain}
.vgl__kopf b{font:500 1.25rem/1.15 var(--f-d);letter-spacing:-.01em}
.vgl__kopf b span{display:block;font:400 .8rem/1.3 var(--f-b);color:var(--txt-3);margin-top:.15rem}
.vgl__grau{width:52px;height:52px;border-radius:var(--r-klein);background:var(--line);flex:none;display:grid;place-items:center;color:var(--txt-3)}
.vgl__grau svg{width:24px;height:24px}
.vgl ul{display:grid;gap:.62rem}
.vgl li{display:grid;grid-template-columns:20px 1fr;gap:.65rem;align-items:start;font-size:.92rem;line-height:1.5}
.vgl li svg{width:20px;height:20px;margin-top:.1rem}
.vgl__wir .ck path{stroke:var(--gut)}
.vgl__and li{color:var(--txt-3)}
.vgl__and li svg{color:var(--schlecht)}
.vgl__cta{margin-top:2rem;text-align:center}

/* =========================================================================
   Einzugsgebiet — Karte ohne Kasten
   ========================================================================= */
.gebiet{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,4vw,3.6rem);align-items:center}
#gebiet{overflow-x:clip}
.gebiet__karte{position:relative;margin:0 auto;width:min(100%,540px)}
.gebiet__karte img{width:100%;height:auto;display:block}
.gebiet__karte::before,.gebiet__karte::after{content:"";position:absolute;left:0;right:0;height:12%;pointer-events:none;z-index:2}
.gebiet__karte::before{top:0;background:linear-gradient(to bottom,var(--paper-2),transparent)}
.gebiet__karte::after{bottom:0;background:linear-gradient(to top,var(--paper-2),transparent)}
.gebiet__btns{display:flex;gap:.75rem;margin-top:1.7rem;flex-wrap:wrap}

/* =========================================================================
   Kontakt
   ========================================================================= */
.kontakt{position:relative;isolation:isolate;color:#fff;overflow:hidden}
.kontakt__bg{position:absolute;inset:0;z-index:-2}
.kontakt__bg img{width:100%;height:100%;object-fit:cover}
.kontakt__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(24,30,35,.95) 0%,rgba(24,30,35,.86) 46%,rgba(24,30,35,.7) 100%)}
.kontakt__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(2rem,4vw,3.6rem);align-items:center}
.kontakt .haken li{color:rgba(255,255,255,.92)}

.live{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;font:600 .82rem/1 var(--f-b);color:var(--on-dark);
  background:rgba(255,255,255,.07);border:1px solid var(--dark-line);padding:.5rem .8rem;border-radius:var(--r-pille)}
.live i{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gut);flex:none}
.live.ist-zu i{background:var(--txt-3)}
.live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 2.2s var(--e-calm) infinite}
.live.ist-zu i::after{animation:none}

.ap{display:grid;gap:.9rem;margin-top:1.8rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14)}
.ap__l{font:600 .72rem/1 var(--f-b);letter-spacing:.13em;text-transform:uppercase;color:var(--acc-3)}
.ap__reihe{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.4rem}
.ap__p{display:flex;align-items:flex-start;gap:.7rem}
.ap__p svg{width:20px;height:20px;color:var(--acc-3);flex:none;margin-top:.1rem}
.ap__p b{display:block;font:600 .9rem/1.3 var(--f-b);color:#fff}
.ap__p span{font-size:.8rem;color:var(--on-dark-2);line-height:1.45}
.ap__p a:hover{color:#fff}

/* =========================================================================
   FAQ
   ========================================================================= */
.faq{max-width:50rem;margin-inline:auto;position:relative;z-index:1}
.faq__i{border-bottom:1px solid var(--line)}
.faq__i:first-child{border-top:1px solid var(--line)}
.faq__f{width:100%;background:none;border:0;padding:1.25rem .4rem;display:flex;align-items:center;gap:1rem;cursor:pointer;text-align:left;font:600 1.02rem/1.4 var(--f-b);color:var(--txt)}
.faq__f > span:not(.faq__ic){flex:1}
.faq__ic{width:26px;height:26px;flex:none;border-radius:var(--r-pille);background:var(--paper-2);display:grid;place-items:center;transition:background .24s var(--ease),transform .3s var(--spring)}
.faq__ic svg{width:14px;height:14px;color:var(--acc-2)}
.faq__i.is-auf .faq__ic{background:var(--acc);transform:rotate(45deg)}
.faq__i.is-auf .faq__ic svg{color:#fff}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--e-calm)}
.faq__i.is-auf .faq__a{grid-template-rows:1fr}
.faq__a > div{overflow:hidden}
.faq__a p{padding:0 3rem 1.35rem .4rem;font-size:.96rem;line-height:1.66;color:var(--txt-2)}

/* =========================================================================
   Footer
   ========================================================================= */
.fuss{background:var(--ink);color:var(--on-dark-2);padding:clamp(3rem,5vw,4.2rem) 0 1.6rem}
.fuss__in{display:grid;grid-template-columns:1.4fr 1fr 1.1fr 1.1fr;gap:2.2rem}
.fuss h4{font:600 .74rem/1 var(--f-b);letter-spacing:.13em;text-transform:uppercase;color:var(--acc-3);margin-bottom:1rem}
.fuss ul{display:grid;gap:.55rem;font-size:.9rem}
.fuss a:hover{color:#fff}
.fuss__marke img{height:64px;width:auto;margin-bottom:1rem}
.fuss__marke p{font-size:.89rem;line-height:1.6;max-width:30ch}
.fuss__u{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--dark-line);display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center;justify-content:space-between;font-size:.82rem}
.fuss__u nav{display:flex;gap:1.4rem;flex-wrap:wrap}

/* =========================================================================
   Floating-Button, Pop-up, Modal
   ========================================================================= */
.fab{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:.55rem;pointer-events:none}
.fab__k{pointer-events:auto}
.fab.is-auf .fab__liste{pointer-events:auto}
.fab__reihe{display:flex;align-items:center;gap:.6rem}
.fab__blase{display:flex;align-items:center;gap:.2rem;pointer-events:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pille);
  padding:.6rem .5rem .6rem .95rem;box-shadow:var(--sh-l);position:relative;max-width:min(16rem,calc(100vw - 7.5rem));
  opacity:0;transform:translateX(14px) scale(.94);transform-origin:right center;transition:opacity .38s var(--ease),transform .46s var(--spring)}
.fab__blase.is-da{opacity:1;transform:none}
.fab__blase[hidden]{display:none}
.fab__blase::after{content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;background:var(--paper);border-right:1px solid var(--line);border-top:1px solid var(--line);transform:translateY(-50%) rotate(45deg)}
.fab__blase-l{font:500 .8125rem/1.32 var(--f-b);color:var(--txt)}
.fab__blase-l b{color:var(--acc-2);font-weight:700}
.fab__blase-zu{flex:none;width:22px;height:22px;border:0;border-radius:50%;background:none;cursor:pointer;color:var(--txt-3);font-size:1.05rem;line-height:1;display:grid;place-items:center}
.fab__blase-zu:hover{background:var(--paper-2);color:var(--txt)}
.fab__k-zu{display:none}
.fab.is-auf .fab__k-auf{display:none}
.fab.is-auf .fab__k-zu{display:block}
.fab.hat-blase .fab__k::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--acc);opacity:0;animation:fabRing 2.6s var(--ease) infinite}
@keyframes fabRing{0%{transform:scale(.86);opacity:.55}70%{transform:scale(1.18);opacity:0}100%{transform:scale(1.18);opacity:0}}
@media (prefers-reduced-motion:reduce){.fab.hat-blase .fab__k::before{animation:none}}
.fab__liste{display:flex;flex-direction:column;gap:.5rem;align-items:flex-end;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s}
.fab.is-auf .fab__liste{opacity:1;visibility:visible;transform:none}
.fab__e{display:inline-flex;align-items:center;gap:.55rem;padding:.6rem .9rem;border-radius:var(--r-pille);background:var(--paper);color:var(--txt);box-shadow:var(--sh-l);
  font:600 .86rem/1 var(--f-b);border:1px solid var(--line)}
.fab__e svg{width:17px;height:17px}
.fab__e--wa{background:var(--wa);color:#06331A;border-color:var(--wa)}
.fab__e--tel{background:var(--slate);color:#fff;border-color:var(--slate)}
.fab__k{position:relative;flex:none;width:54px;height:54px;border-radius:var(--r-pille);background:var(--acc);color:#fff;border:0;display:grid;place-items:center;cursor:pointer;
  box-shadow:0 10px 26px rgba(232,93,16,.4);transition:transform .24s var(--spring)}
.fab__k svg{width:25px;height:25px;grid-area:1/1}
.fab__k:active{transform:scale(.94)}

.ovl{position:fixed;inset:0;z-index:105;display:none;place-items:center;padding:1.2rem;background:rgba(18,23,27,.74);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ovl.is-auf{display:grid;animation:einblenden .3s var(--ease)}
@keyframes einblenden{from{opacity:0}to{opacity:1}}
.popup__k{position:relative;width:min(430px,100%);background:var(--paper);border-radius:var(--r-gross);overflow:visible;box-shadow:var(--sh-l);text-align:center;animation:hoch .38s var(--spring)}
@keyframes hoch{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.popup__b{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-gross) var(--r-gross) 0 0}
.popup__b img{width:100%;height:100%;object-fit:cover}
.popup__badge{position:absolute;left:1rem;bottom:1rem;background:var(--acc);color:#fff;font:700 .72rem/1 var(--f-b);letter-spacing:.08em;text-transform:uppercase;padding:.45rem .7rem;border-radius:var(--r-pille)}
.ovl__zu{position:absolute;top:.7rem;right:.7rem;z-index:6;width:34px;height:34px;border:0;border-radius:var(--r-pille);background:rgba(24,30,35,.62);color:#fff;font-size:1.25rem;
  line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.35);transition:transform .3s var(--spring),background .2s var(--ease)}
.ovl__zu:hover{background:var(--acc);transform:rotate(90deg)}
.popup__inhalt{padding:1.3rem 1.5rem 1.5rem}
.popup__k h3{font:500 1.55rem/1.15 var(--f-d);letter-spacing:-.012em}
.popup__inhalt > p{margin-top:.55rem;font-size:.92rem;line-height:1.58;color:var(--txt-2)}
.popup .haken{margin:1.1rem 0 1.25rem;text-align:left;display:inline-grid}
.popup__btns{display:grid;gap:.6rem}

/* Modal mit dem Formular — Desktop-Weg jedes CTAs */
.modal__k{position:relative;width:min(560px,100%);max-height:92vh;overflow-y:auto;border-radius:var(--r-gross);animation:hoch .32s var(--spring)}
.modal__k .karte-form{box-shadow:none}
.modal__k .ovl__zu{top:.9rem;right:.9rem;background:var(--paper-2);color:var(--txt);box-shadow:none;border:1px solid var(--line)}
.modal__k .ovl__zu:hover{background:var(--acc);color:#fff}
.modal__k .stoerer{right:3.4rem;top:-10px}
body.ist-gesperrt{overflow:hidden}

/* =========================================================================
   Reveal — 10-px-Regel, einmalig
   ========================================================================= */
html.js .rv{opacity:0;transform:translateY(10px);transition:opacity .55s var(--e-soft),transform .55s var(--e-soft)}
html.js .rv.is-da{opacity:1;transform:none}
.rv-g > .rv:nth-child(2){transition-delay:80ms}.rv-g > .rv:nth-child(3){transition-delay:160ms}
.rv-g > .rv:nth-child(4){transition-delay:240ms}.rv-g > .rv:nth-child(5){transition-delay:320ms}
.rv-g > .rv:nth-child(6){transition-delay:400ms}.rv-g > .rv:nth-child(7){transition-delay:480ms}.rv-g > .rv:nth-child(8){transition-delay:560ms}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .blase{opacity:1;transform:none}
  .ck path,.bk__ic path,.bk__ic rect,.bk__ic circle{stroke-dashoffset:0;transition:none}
  .ul path{stroke-dashoffset:0;animation:none}
  .schrittk__kw::before{transform:none;transition:none}
}
@media (max-width:700px){html.js .rv{transform:translateY(6px)}}
html:not(.js) .ck path,html:not(.js) .bk__ic path,html:not(.js) .bk__ic rect,html:not(.js) .bk__ic circle,html:not(.js) .ul path{stroke-dashoffset:0}
html:not(.js) .schrittk__kw::before{transform:none}

/* =========================================================================
   Rechtsseiten
   ========================================================================= */
.seitenkopf{background:var(--ink);color:#fff;padding:clamp(7rem,11vw,9rem) 0 clamp(2.6rem,4vw,3.4rem)}
.seitenkopf h1{font:500 clamp(2rem,4.2vw,3rem)/1.05 var(--f-d);letter-spacing:-.016em}
.seitenkopf p{margin-top:.7rem;color:var(--on-dark-2);font-size:.98rem}
.text-seite{max-width:48rem;margin-inline:auto}
.text-seite h2{font-size:clamp(1.35rem,2.6vw,1.75rem);margin:2.4rem 0 .8rem}
.text-seite h3{margin:1.6rem 0 .5rem;font-size:1.06rem}
.text-seite p,.text-seite li{font-size:.97rem;line-height:1.72;color:var(--txt-2)}
.text-seite p{margin-bottom:.9rem}
.text-seite ul{list-style:disc;padding-left:1.3rem;margin-bottom:1.1rem;display:grid;gap:.35rem}
.text-seite a{color:var(--acc-2);text-decoration:underline;text-underline-offset:2px}
.text-seite strong{color:var(--txt)}
.rechtsseite .kopfleiste .marke__hell{display:none}
.rechtsseite .kopfleiste .marke__dunkel{display:block}

/* =========================================================================
   Responsive — Overrides stehen bewusst NACH allen Basisregeln
   ========================================================================= */
@media (max-width:1100px){
  .fuss__in{grid-template-columns:1fr 1fr}
  .ablauf{grid-template-columns:1fr 1fr;gap:2.4rem 1.4rem}
  .schrittk__kw::before{display:none}
  .branchen{grid-template-columns:1fr 1fr 1fr}
  .frist{grid-template-columns:1fr}
}

@media (max-width:980px){
  .nav,.kopf-tel,.kopfleiste .btn--acc{display:none}
  .kopf-mob{display:flex}
  .hero__in,.chat-grid,.gebiet,.kontakt__in,.nachweis{grid-template-columns:1fr}
  .hero{padding-top:clamp(6.5rem,18vw,8rem)}
  .hero__bg img{object-position:50% 30%}
  .hero__bg::after{background:linear-gradient(180deg,rgba(24,30,35,.84) 0%,rgba(24,30,35,.74) 45%,rgba(24,30,35,.92) 100%)}
  .hero__txt,.hero .haken{max-width:none}
  .hero__txt{font-size:.86rem}
  .karte-form{max-width:480px;margin-inline:auto;width:100%}
  .hero__btns .btn{flex:1;min-width:180px}
  .fakten{grid-template-columns:1fr 1fr}
  .fakt:nth-child(3){border-left:0}
  .fakt:nth-child(n+3){border-top:1px solid var(--line)}
  /* Handy zuerst, danach der Text */
  .chat-grid > .chat__inhalt{order:2}
  .chat-grid > .handy-sp{order:1}
  .gebiet > .gebiet__karte{order:1}
  .gebiet > .gebiet__inhalt{order:2}
  .gebiet__karte{width:min(100%,420px)}
  .tabp.is-aktiv{grid-template-columns:1fr;gap:1.4rem}
  .tabp__bild{order:1;aspect-ratio:16/10;min-height:0}
  .tabp__text{order:2;padding:0}
  .vgl{grid-template-columns:1fr}
  .vgl__wir{margin-top:0}
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:230px}
  .bt-gross,.bt-breit{grid-column:span 2}
  .bt-hoch{grid-column:span 1;grid-row:span 2}
  .nachweis__b{padding-right:0;padding-bottom:0}
  .proto{position:relative;right:auto;bottom:auto;margin:-2.6rem .6rem 0 auto;width:min(92%,24rem)}
}

@media (max-width:760px){
  body{font-size:15.5px}
  .sec{padding:clamp(3.2rem,9vw,4.4rem) 0}
  .ablauf{grid-template-columns:1fr;gap:2.6rem}
  .tabs__k{padding:.75rem 1rem;font-size:.875rem}
  .tabp__cta .btn{flex:1 1 100%}
  .tel-nackt{width:100%;justify-content:center}
  .branchen{grid-template-columns:1fr 1fr;gap:.7rem}
  .bk{padding:1.1rem 1rem}
  .fuss__in{grid-template-columns:1fr;gap:1.8rem}
  .fuss__u{flex-direction:column;align-items:flex-start}
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .btile{min-height:310px}
  .bt-gross{min-height:360px}
  .bt-gross,.bt-hoch,.bt-breit{grid-column:span 1;grid-row:span 1}
  .bt-hoch{min-height:420px}
  .faq__a p{padding-right:.8rem}
  .hero__btns{flex-direction:column;align-items:stretch;text-align:center}
  .hero__btns .btn{width:100%}
  .stoerer{width:76px;height:76px;top:-12px;right:-6px;font-size:.62rem}
  .stoerer b{font-size:1.02rem}
  .form__kopf{padding-right:3.6rem}
  .plakette-wrap{width:92px;top:-14px;right:-10px}
  .check{padding:1.25rem 1.1rem 1.2rem}
  .fristen th,.fristen td{padding:.62rem .9rem}
  .fristen td.f{white-space:normal}
  .ap__reihe{grid-template-columns:1fr}
  .umg{grid-template-columns:1fr 1fr}
  .handy__scheibe{height:540px}
}

@media (max-width:520px){
  .picks{grid-template-columns:1fr 1fr}
  .pick__ill{max-width:64px}
  .feld--zwei{grid-template-columns:1fr}
  .band{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
  .fakten{grid-template-columns:1fr 1fr}
  .fakt{padding:1rem .9rem}
  .fakt b{font-size:1.6rem}
  .g-pille{font-size:.84rem;padding:.5rem .8rem}
  .branchen{grid-template-columns:1fr}
  .check__zeile{grid-template-columns:1fr}
  .marke img{height:46px}
  .kopfleiste.is-fest .marke img{height:40px}
}