/* =========================================================================
   Black Rock Security GmbH — Objektschutz
   Design-Rezept "Graphit & Messing"
   Archivo (Breitenachse auf 79 gesetzt) fuer Display, Instrument Sans fuer Text
   ========================================================================= */

/* --- Schriften ----------------------------------------------------------- */
@font-face{font-family:'ArchivoCond';src:url('../fonts/archivo-cond-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'ArchivoCond';src:url('../fonts/archivo-cond-800.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'InstrumentSans';src:url('../fonts/instrument-sans-latin-400-normal.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'InstrumentSans';src:url('../fonts/instrument-sans-latin-500-normal.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'InstrumentSans';src:url('../fonts/instrument-sans-latin-600-normal.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'InstrumentSans';src:url('../fonts/instrument-sans-latin-700-normal.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

/* --- Marken-Werte -------------------------------------------------------- */
:root{
  --ink:#0E1116;          /* Graphit, dunkelste Flaeche */
  --ink-2:#171C24;        /* zweite dunkle Flaeche */
  --ink-3:#202733;        /* Karten auf dunkel */
  --paper:#FFFFFF;
  --paper-2:#F6F5F2;      /* Sektionswechsel, 98 % Helligkeit */
  --line:#E7E5E0;
  --line-2:#D6D3CC;
  --txt:#14181F;
  --txt-2:#4E5560;
  --txt-3:#7C8493;
  --acc:#C8A24C;          /* Messing */
  --acc-2:#8A6A21;        /* Messing dunkel — Text auf hellem Grund */
  --acc-3:#E2C687;        /* Messing hell — auf dunklem Grund */
  --on-dark:#F4F3F0;
  --on-dark-2:#A9AFBA;
  --dark-line:rgba(255,255,255,.11);
  --gut:#3D8F5B;
  --schlecht:#B7473C;
  --wa:#25D366;

  --f-d:'ArchivoCond','Archivo Narrow','Arial Narrow',system-ui,sans-serif;
  --f-b:'InstrumentSans',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(14,17,22,.04), 0 14px 32px rgba(14,17,22,.06);
  --sh-l:0 2px 4px rgba(14,17,22,.05), 0 28px 60px rgba(14,17,22,.09);
  --sh-acc:0 10px 26px rgba(200,162,76,.24);

  --ease:cubic-bezier(.22,.61,.36,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;
}

/* --- 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{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(3rem,5vw,4.4rem) 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 Punktraster 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(200,162,76,.10) 0%,rgba(200,162,76,0) 68%);
  top:-16rem;right:-14rem;
}
.deko--links::before{right:auto;left:-16rem;top:auto;bottom:-18rem}
.deko__raster{
  position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(20,24,31,.10) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 0%,transparent 72%);
}
.s-dark .deko__raster{background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px)}

/* --- 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{color:var(--acc-3)}

h2,.h2{
  font:800 clamp(1.9rem,3.4vw,2.6rem)/1.04 var(--f-d);
  text-transform:uppercase;letter-spacing:-.004em;color:var(--txt);
  text-wrap:balance;
}
.s-dark h2,.s-dark .h2,.kontakt h2{color:var(--on-dark)}
h2 .z{display:block}                       /* erzwungener Zeilenumbruch */
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.16rem/1.28 var(--f-b);color:var(--txt);letter-spacing:-.012em}
.s-dark h3,.kontakt h3{color:var(--on-dark)}

.lead{font-size:1.0625rem;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 .96rem/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}
.btn:active{transform:scale(.975)}
.btn--acc{background:var(--acc);color:#17130A;box-shadow:var(--sh-acc)}
.btn--acc:hover{background:#D4B063}
.btn--ink{background:var(--ink);color:var(--on-dark)}
.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(20,24,31,.04)}
.s-dark .btn--geist,.hero .btn--geist{color:#fff;border-color:rgba(255,255,255,.34)}
.s-dark .btn--geist:hover,.hero .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- und Kreuzlisten ---------------------------------------------- */
.haken{display:grid;gap:.6rem}
.haken li{display:grid;grid-template-columns:20px 1fr;gap:.66rem;align-items:start;
  font-size:.95rem;line-height:1.5}
.haken svg{width:20px;height:20px;color:var(--acc-2);margin-top:.12rem}
.s-dark .haken svg,.hero .haken svg,.kontakt .haken svg{color:var(--acc-3)}

/* =========================================================================
   Header
   ========================================================================= */
.kopfleiste{
  position:fixed;top:0;left:0;right:0;z-index:80;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .26s var(--ease),border-color .26s var(--ease),
             box-shadow .26s var(--ease),padding .26s var(--ease);
  padding:.9rem 0;
}
.kopfleiste.is-fest{
  background:rgba(14,17,22,.90);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:var(--dark-line);box-shadow:0 10px 30px rgba(0,0,0,.28);padding:.55rem 0;
}
.kopfleiste__in{display:flex;align-items:center;gap:1.5rem}
.marke{display:flex;align-items:center;gap:.7rem;flex:none}
.marke img{height:52px;width:auto;transition:height .26s var(--ease)}
.kopfleiste.is-fest .marke img{height:42px}
.marke__txt{display:flex;flex-direction:column;line-height:1.1}
.marke__n{font:800 1.02rem/1 var(--f-d);text-transform:uppercase;letter-spacing:.04em;color:#fff}
.marke__c{font:400 .68rem/1.3 var(--f-b);color:var(--acc-3);letter-spacing:.01em}

.nav{display:flex;gap:1.65rem;margin-left:auto}
.nav a{font:500 .93rem/1 var(--f-b);color:rgba(255,255,255,.86);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}

.kopf-tel{display:inline-flex;align-items:center;gap:.45rem;font:600 .93rem/1 var(--f-b);color:#fff}
.kopf-tel svg{width:16px;height:16px;color:var(--acc-3)}
.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:#17130A}
.kopf-mob .m-wa{background:var(--wa);border-color:var(--wa);color:#06331A}

/* =========================================================================
   Hero — vollflaechiges Bild, Content zweispaltig
   ========================================================================= */
.hero{position:relative;isolation:isolate;padding:clamp(7.5rem,12vw,9.5rem) 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:50% 42%}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(9,11,15,.90) 0%,rgba(9,11,15,.68) 36%,
             rgba(9,11,15,.34) 60%,rgba(9,11,15,.52) 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:800 clamp(2.35rem,5.1vw,4rem)/.99 var(--f-d);
  text-transform:uppercase;letter-spacing:-.008em;color:#fff;margin:0;
}
.hero__ansage .a{display:block;color:var(--acc-3)}
.hero__txt{margin-top:1.05rem;font-size:.9375rem;line-height:1.62;color:rgba(255,255,255,.80);
  max-width:31rem}
.hero .haken{margin-top:1.5rem;gap:.62rem;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.35rem;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}

/* =========================================================================
   Über Black Rock Security — links Content, rechts der Imagefilm
   ========================================================================= */
.ueber{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(2rem,4vw,3.4rem);align-items:center}
.ueber__c{display:flex;flex-direction:column;align-items:flex-start}
.ueber__btns{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.7rem}

/* Siegelleiste: die Nachweise stehen im Original, ohne Kasten drumherum.
   Die DEKRA-Dateien bringen ihren Alphakanal mit, das IHK-Logo steht auf
   Weiss — auf der hellen Sektion faellt beides nicht auf. */
.siegel{display:flex;align-items:center;gap:1.15rem;margin-top:1.8rem;flex-wrap:wrap}
.siegel img{height:80px;width:auto;display:block}
.siegel .siegel__breit{height:44px}
.siegel__tr{width:1px;height:56px;background:var(--line-2);flex:none}

/* --- Imagefilm ----------------------------------------------------------
   Nur das Poster laedt mit. Die Videodatei holt sich der Browser erst beim
   Klick — 7,5 MB gehoeren nicht in die Erstlast. */
.film{position:relative;margin:0;border-radius:var(--r-gross);overflow:hidden;
  background:var(--ink-2);box-shadow:var(--sh-l);aspect-ratio:16/9}
.film__poster,.film video{width:100%;height:100%;object-fit:cover;display:block}
.film::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,11,15,.10) 0%,rgba(9,11,15,.30) 100%);
  transition:opacity .3s var(--ease);
}
.film.is-laeuft::after{opacity:0}
.film__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:84px;height:84px;border-radius:50%;border:0;cursor:pointer;
  background:var(--acc);color:#17130A;display:grid;place-items:center;
  box-shadow:0 10px 34px rgba(200,162,76,.42);
  transition:transform .24s var(--spring),background .22s var(--ease);
}
.film__play svg{width:38px;height:38px;margin-left:4px}
.film__play:hover{background:#D4B063;transform:translate(-50%,-50%) scale(1.07)}
.film__play:active{transform:translate(-50%,-50%) scale(.96)}
.film.is-laeuft .film__play,.film.is-laeuft .film__cap{display:none}
.film__cap{
  position:absolute;left:1rem;bottom:.9rem;z-index:2;
  font:600 .78rem/1 var(--f-b);color:rgba(255,255,255,.92);
  background:rgba(9,11,15,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:.45rem .7rem;border-radius:var(--r-pille);
}


/* =========================================================================
   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{color:var(--txt)}
.form__kopf{padding-right:4.6rem}
.form__kopf h3{font:700 1.32rem/1.18 var(--f-d);text-transform:uppercase;letter-spacing:-.004em}
.form__kopf p{margin-top:.3rem;font-size:.86rem;color:var(--txt-3)}

.stoerer{
  position:absolute;top:-14px;right:-10px;z-index:3;width:88px;height:88px;border-radius:50%;
  background:var(--acc);color:#17130A;display:grid;place-content:center;text-align:center;
  transform:rotate(-11deg);box-shadow:0 8px 22px rgba(200,162,76,.36);
  font:700 .72rem/1.16 var(--f-b);padding:.4rem;
}
.stoerer b{display:block;font:800 1.16rem/1 var(--f-d);letter-spacing:-.01em}

.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(--ease)}

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

/* --- Illustrierte Auswahlkarten ------------------------------------------
   Eine flaechige Zeichnung je Option statt eines Linien-Icons neben Text.
   Die Motive sind Varianten desselben Grundkoerpers, damit die Reihe wie ein
   Satz wirkt und nicht wie eine Icon-Sammlung. */
.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;box-shadow:0 1px 2px rgba(14,17,22,.04);
  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:#FDFAF2;box-shadow:0 0 0 3px rgba(200,162,76,.20)}
.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='%2317130A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* --- Schieberegler --------------------------------------------------------
   Liefert die wichtigste Qualifizierungsangabe: Stunden pro Woche. Die Blase
   folgt dem Griff ueber --pn (0-1), die Schiene faerbt sich ueber --p. */
.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(--ink);color:var(--acc-3);
  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(14,17,22,.22);
  left:calc(18px + 13px + (100% - 36px - 26px) * var(--pn,.29));
  transform:translateX(-50%);transition:left .06s linear;
}
.rng__out::after{
  content:"";position:absolute;left:50%;bottom:-4px;width:9px;height:9px;
  background:var(--ink);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,29%),var(--line-2) var(--p,29%));
  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(200,162,76,.34), 0 6px 16px rgba(14,17,22,.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(200,162,76,.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(200,162,76,.16)}
.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(200,162,76,.16)}
.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}

.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:700 1.18rem/1.25 var(--f-d);text-transform:uppercase;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}

/* =========================================================================
   Referenzen als Einsatzbeispiele — Foto, Aufgabe, Ergebnis
   ========================================================================= */
.faelle{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;align-items:stretch}
.fall{
  display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);
  transition:border-color .26s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.fall:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:var(--sh-l)}
.fall__b{position:relative;margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--ink-2)}
.fall__b img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.fall:hover .fall__b img{transform:scale(1.04)}
.fall__b::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(9,11,15,.55) 0%,rgba(9,11,15,.10) 45%,transparent 70%);
}
.fall__nr{
  position:absolute;left:.9rem;bottom:.75rem;z-index:2;
  font:800 1.9rem/1 var(--f-d);color:rgba(255,255,255,.92);letter-spacing:-.02em;
  text-shadow:0 2px 12px rgba(8,11,16,.5);
}
.fall__k{padding:1.25rem 1.3rem 1.35rem;display:flex;flex-direction:column;flex:1}
.fall__l{
  display:block;font:600 .72rem/1 var(--f-b);letter-spacing:.13em;text-transform:uppercase;
  color:var(--acc-2);margin-bottom:.6rem;
}
.fall h3{font:700 1.24rem/1.16 var(--f-d);text-transform:uppercase;letter-spacing:-.004em}
.fall__k > p{margin-top:.55rem;font-size:.93rem;line-height:1.58;color:var(--txt-2)}
.fall__ul-l{
  display:block;margin:1.1rem 0 .6rem;font:600 .74rem/1 var(--f-b);letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-3);
}
.fall .haken li{font-size:.89rem}
.fall__erg{
  margin-top:auto;padding-top:1rem;font-size:.9rem;line-height:1.5;color:var(--txt-2);
}
.fall__erg b{color:var(--acc-2);font-weight:700}
.faelle__fuss{
  margin-top:1.5rem;text-align:center;font-size:.8rem;line-height:1.5;color:var(--txt-3);
}

/* =========================================================================
   Bewertungs-Band
   ========================================================================= */
/* Die Pille sitzt mittig zwischen Ueberschrift und Laufband — der Abstand nach
   oben muss dem entsprechen, den .kopf nach unten aufmacht. */
.g-pille{
  display:inline-flex;align-items:center;gap:.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(2rem,3.4vw,2.9rem);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;box-shadow:var(--sh);
  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(--ink);color:var(--acc-3);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 als Tabs — Reiterleiste, darunter EIN Container
   Desktop: zwei Drittel Content links, ein Drittel Bild rechts.
   Mobil: Bild oben, Content darunter.
   ========================================================================= */
.tabs__leiste{
  display:flex;gap:.15rem;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--line);margin-bottom:clamp(1.4rem,2.4vw,2rem);
}
.tabs__leiste::-webkit-scrollbar{display:none}
.tabs__k{
  position:relative;flex:none;padding:.85rem 1.25rem;background:transparent;border:0;
  border-radius:var(--r) var(--r) 0 0;cursor:pointer;white-space:nowrap;
  font:600 .9375rem/1 var(--f-b);color:var(--txt-3);
  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 .3s var(--spring);
}
.tabs__k:hover{color:var(--txt);background:rgba(20,24,31,.03)}
.tabs__k.is-aktiv{color:var(--acc-2);background:#FBF6EA}
.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.4rem,3vw,2.6rem);align-items:stretch;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-gross);
  padding:clamp(1.4rem,2.6vw,2.1rem);
  animation:tabAuf .35s var(--ease) 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{display:flex;flex-direction:column;align-items:flex-start}
.tabp__h{
  font:800 clamp(1.45rem,2.4vw,2rem)/1.08 var(--f-d);text-transform:uppercase;
  letter-spacing:-.006em;color:var(--txt);margin-bottom:.6rem;
}
.tabp__p{font-size:.9875rem;line-height:1.62;color:var(--txt-2);max-width:54ch}
/* Kein Trennstrich zwischen Fliesstext und Haken. */
.tabp__haken{margin:1.3rem 0 1.5rem}
.tabp__haken li{font-size:.9375rem}
.tabp__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto}
.btn--tel{background:transparent;border-color:var(--line-2);color:var(--txt)}
.btn--tel:hover{border-color:var(--txt);background:rgba(20,24,31,.04)}
/* Das Bild fuellt sein Drittel auch in der HOEHE — es wird ueber die Rasterzeile
   gestreckt, nicht ueber ein festes Seitenverhaeltnis begrenzt. */
.tabp__bild{margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink-2);
  box-shadow:var(--sh);min-height:100%}
.tabp__bild img{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:562px;
  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}
.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 img{border-radius:5px;margin-bottom:.32rem}
.blase__zeit{display:flex;align-items:center;justify-content:flex-end;gap:.2rem;
  font-size:.6rem;color:#667781;margin-top:.16rem}
.blase__zeit svg{width:13px;height:13px;color:#53BDEB}
.blase--datei{display:flex;align-items:center;gap:.5rem;background:#fff}
.blase--datei .dz{width:30px;height:30px;border-radius:5px;background:#F0F2F5;display:grid;
  place-items:center;flex:none}
.blase--datei .dz svg{width:16px;height:16px;color:#8696A0}
.blase--datei b{display:block;font-size:.74rem}
.blase--datei small{font-size:.63rem;color:#667781}

.chat__hinweis{text-align:center;font-size:.76rem;color:var(--txt-3);margin-top:.85rem}
.s-dark .chat__hinweis{color:var(--on-dark-2)}

.chat__arg{display:grid;gap:.95rem;margin-top:1.4rem}
.chat__arg li{display:grid;grid-template-columns:20px 1fr;gap:.7rem;align-items:start}
.chat__arg svg{width:20px;height:20px;color:var(--acc-3);margin-top:.15rem}
.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
   ========================================================================= */
.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(--ease)}
.btile:hover img{transform:scale(1.045)}
.btile::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,11,16,.12) 0%,rgba(8,11,16,.36) 42%,rgba(8,11,16,.88) 100%);
}
.btile__t{padding:1.15rem 1.2rem 1.1rem;color:#fff;text-shadow:0 1px 12px rgba(8,11,16,.4)}
.btile__t h3{color:#fff;font:700 1.12rem/1.2 var(--f-d);text-transform:uppercase;letter-spacing:-.004em}
.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.28rem,1.5vw,1.62rem)}
.bt-gross .btile__t p{font-size:.95rem;max-width:36ch}
.bt-hoch{grid-column:span 1;grid-row:span 2}
.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}

/* =========================================================================
   Ablauf — Bildkarten
   ========================================================================= */
.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:#17130A;
  display:grid;place-items:center;font:800 1.06rem/1 var(--f-d);
  box-shadow:0 6px 18px rgba(200,162,76,.34);
}
.schrittk__kw{position:relative}
/* Die Linie haengt genau auf der Kante zwischen Bild und Text und laeuft
   ueber die Spaltenluecke zur naechsten Karte weiter. */
.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);
}
.schrittk:last-child .schrittk__kw::before{width:100%}
.schrittk h3{font:700 1.1rem/1.2 var(--f-d);text-transform:uppercase;letter-spacing:-.004em}
.schrittk p{margin-top:.45rem;font-size:.9rem;line-height:1.56;color:var(--txt-2)}

/* =========================================================================
   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(200,162,76,.10),var(--sh-l);
  position:relative;margin-top:-.9rem;
}
.vgl__wir::before{
  content:"Empfohlen";position:absolute;top:-13px;left:1.6rem;background:var(--acc);color:#17130A;
  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(.55)}
.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:46px;height:46px;border-radius:var(--r-pille);background:var(--ink);flex:none;
  display:grid;place-items:center;overflow:hidden}
.vgl__logo img{width:88%;height:88%;object-fit:contain}
.vgl__kopf b{font:700 1.06rem/1.2 var(--f-d);text-transform:uppercase;letter-spacing:-.004em}
/* Nur die Unterzeile im <b>, NICHT die Icon-/Logo-Huellen daneben — sonst
   ueberschreibt display:block deren place-items und das Icon klebt oben. */
.vgl__kopf b span{display:block;font:400 .8rem/1.3 var(--f-b);color:var(--txt-3);text-transform:none;
  letter-spacing:0;margin-top:.15rem}
.vgl__grau{width:46px;height:46px;border-radius:var(--r-pille);background:var(--line);flex:none;
  display:grid;place-items:center;color:var(--txt-3)}
.vgl__grau svg{width:22px;height:22px}
.vgl ul{display:grid;gap:.62rem}
.vgl li{display:grid;grid-template-columns:19px 1fr;gap:.65rem;align-items:start;
  font-size:.92rem;line-height:1.5}
.vgl li svg{width:19px;height:19px;margin-top:.13rem}
.vgl__wir li svg{color:var(--gut)}
.vgl__and li{color:var(--txt-3)}
.vgl__and li svg{color:var(--schlecht)}
.vgl__cta{margin-top:2rem;text-align:center}

/* =========================================================================
   Zertifikate — 3D-Zylinder
   ========================================================================= */
/* Die seitlichen Karten des Zylinders laufen bewusst aus dem Bild. clip statt
   hidden, damit sie nur beschnitten werden und kein Scroll-Container entsteht —
   die Perspektive sitzt weiter unten in .zert__sicht und bleibt unberuehrt. */
.zert{position:relative;overflow-x:clip}
.zert__buehne{
  display:grid;grid-template-columns:56px 1fr 56px;gap:12px;align-items:center;
  max-width:1080px;margin:clamp(2rem,4vw,3rem) auto 0;
}
.zert__pfeil{
  width:56px;height:56px;border-radius:var(--r-pille);display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid var(--dark-line);color:#fff;cursor:pointer;
  transition:background .22s var(--ease),border-color .22s var(--ease),transform .18s var(--spring);
}
.zert__pfeil svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.zert__pfeil:hover{background:var(--acc);border-color:var(--acc);color:#17130A}
.zert__pfeil:active{transform:scale(.93)}

.zert__sicht{position:relative;perspective:1800px;height:clamp(400px,40vw,580px);
  touch-action:pan-y}
.zert__ring{position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .66s cubic-bezier(.2,.9,.2,1)}
.zert__el{
  position:absolute;top:50%;left:50%;width:clamp(190px,18vw,250px);cursor:pointer;
  transition:transform .66s cubic-bezier(.2,.9,.2,1),opacity .5s var(--ease);
  transform-style:preserve-3d;
}
.zert__karte{
  background:#fff;border-radius:var(--r-klein);overflow:hidden;
  box-shadow:0 22px 54px -18px rgba(0,0,0,.72),0 1px 3px rgba(0,0,0,.4);
  transition:box-shadow .5s var(--ease);
}
.zert__el.is-vorn .zert__karte{box-shadow:0 30px 70px -16px rgba(0,0,0,.85),0 0 0 1px rgba(200,162,76,.55)}
.zert__karte img{width:100%;height:auto;display:block;aspect-ratio:1/1.414;object-fit:cover;
  object-position:top center;background:#fff}
.zert__karte--siegel{background:#fff;display:grid;place-items:center;aspect-ratio:1/1.414;padding:1.4rem}
.zert__karte--siegel img{aspect-ratio:auto;height:100%;width:auto;object-fit:contain;margin-inline:auto}

/* Gestaltete Nachweis-Karten (kein Dokument vorhanden — bewusst als Karte erkennbar) */
.zert__karte--fakt{
  aspect-ratio:1/1.414;background:linear-gradient(160deg,#1B212B 0%,#0E1116 100%);
  border:1px solid rgba(200,162,76,.34);display:flex;flex-direction:column;
  justify-content:center;text-align:center;padding:1.5rem 1.2rem;color:#fff;
}
.zert__karte--fakt .fk{font:800 1.9rem/1 var(--f-d);color:var(--acc-3);letter-spacing:-.01em}
.zert__karte--fakt .ft{margin-top:.55rem;font:700 .95rem/1.22 var(--f-d);text-transform:uppercase;
  letter-spacing:.02em}
.zert__karte--fakt .fb{margin-top:.7rem;font-size:.78rem;line-height:1.5;color:var(--on-dark-2)}
.zert__karte--fakt .fl{
  margin-top:1.1rem;padding-top:.85rem;border-top:1px solid rgba(200,162,76,.22);
  font:600 .64rem/1.3 var(--f-b);letter-spacing:.12em;text-transform:uppercase;color:var(--acc-3);
}
.zert__bu{
  margin-top:.7rem;text-align:center;font:600 .78rem/1.35 var(--f-b);color:var(--on-dark-2);
  opacity:0;transition:opacity .4s var(--ease);
}
.zert__el.is-vorn .zert__bu{opacity:1}

.zert__punkte{display:flex;justify-content:center;gap:.5rem;margin-top:1.6rem}
.zert__punkt{width:9px;height:9px;padding:0;border:0;border-radius:var(--r-pille);
  background:rgba(255,255,255,.22);cursor:pointer;
  transition:background .3s var(--ease),width .3s var(--ease)}
.zert__punkt.is-an{background:var(--acc);width:30px}
.zert__hinweis{text-align:center;margin-top:.9rem;font-size:.82rem;color:var(--on-dark-2)}

.zert__fakten{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--dark-line);
  border:1px solid var(--dark-line);border-radius:var(--r);overflow:hidden;
  margin-top:clamp(2.4rem,4vw,3.4rem);
}
.zert__fakt{background:var(--ink);padding:1.25rem 1.2rem}
.zert__fakt b{display:block;font:800 1.5rem/1 var(--f-d);color:var(--acc-3);letter-spacing:-.01em}
.zert__fakt span{display:block;margin-top:.4rem;font-size:.84rem;line-height:1.45;color:var(--on-dark-2)}

/* Zertifikats-Modal */
.zmodal{
  position:fixed;inset:0;z-index:110;display:none;place-items:center;padding:1.2rem;
  background:rgba(6,8,11,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.zmodal.is-auf{display:grid;animation:einblenden .26s var(--ease)}
@keyframes einblenden{from{opacity:0}to{opacity:1}}
.zmodal__in{position:relative;max-width:min(560px,92vw);width:100%;text-align:center}
.zmodal__t{color:#fff;font:700 1.05rem/1.3 var(--f-d);text-transform:uppercase;margin-bottom:.8rem}
.zmodal img{width:100%;height:auto;max-height:78vh;object-fit:contain;border-radius:var(--r-klein);
  background:#fff}
.zmodal__zu{
  position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:var(--r-pille);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);color:#fff;
  font-size:1.3rem;line-height:1;cursor:pointer;display:grid;place-items:center;
}
.zmodal__zu:hover{background:var(--acc);color:#17130A;border-color:var(--acc)}

/* =========================================================================
   Einzugsgebiet
   ========================================================================= */
.gebiet{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2rem,4vw,3.6rem);align-items:center}
.gebiet__karte{position:relative;margin:0 -14px}
.gebiet__karte img,.gebiet__karte svg{width:100%;height:auto}
.gebiet__karte::before,.gebiet__karte::after{
  content:"";position:absolute;left:0;right:0;height:14%;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__inhalt h2{font-size:clamp(1.8rem,2.9vw,2.3rem)}
.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(9,11,15,.95) 0%,rgba(9,11,15,.86) 46%,rgba(9,11,15,.72) 100%)}
.kontakt__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(2rem,4vw,3.6rem);align-items:center}

.ap{display:grid;gap:1rem;margin-top:2rem;padding-top:1.6rem;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);margin-bottom:.2rem}
.ap__reihe{display:flex;gap:1.4rem;flex-wrap:wrap}
.ap__p{display:flex;align-items:center;gap:.75rem}
.ap__p img{width:52px;height:52px;border-radius:var(--r-pille);object-fit:cover;flex:none;
  border:1px solid rgba(255,255,255,.2)}
.ap__p b{display:block;font:600 .93rem/1.3 var(--f-b);color:#fff}
.ap__p span{font-size:.79rem;color:var(--on-dark-2)}

/* =========================================================================
   FAQ
   ========================================================================= */
.faq-sec{position:relative;overflow:hidden}
.faq-sec .marke-gross{
  position:absolute;right:-9rem;top:50%;transform:translateY(-50%);width:38rem;opacity:.035;
  pointer-events:none;z-index:0;
}
.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:#17130A}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease)}
.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.5fr 1fr 1fr 1.2fr;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:60px;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, Consent
   ========================================================================= */
/* Die Huelle ist so breit wie die zugeklappte Liste und wuerde sonst die
   Fusszeilen-Links darunter verschlucken — deshalb faengt nur an, was wirklich
   klickbar ist. */
.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__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(--ink);color:#fff;border-color:var(--ink)}
.fab__k{
  width:54px;height:54px;border-radius:var(--r-pille);background:var(--acc);color:#17130A;
  border:0;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 26px rgba(200,162,76,.4);
  transition:transform .24s var(--spring);
}
.fab__k svg{width:25px;height:25px}
.fab.is-auf .fab__k{transform:rotate(135deg)}

.popup{position:fixed;inset:0;z-index:105;display:none;place-items:center;padding:1.2rem;
  background:rgba(6,8,11,.76);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.popup.is-auf{display:grid;animation:einblenden .3s var(--ease)}
.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:#17130A;
  font:700 .72rem/1 var(--f-b);letter-spacing:.08em;text-transform:uppercase;
  padding:.45rem .7rem;border-radius:var(--r-pille);
}
.popup__zu{
  position:absolute;top:.7rem;right:.7rem;z-index:6;width:34px;height:34px;border:0;
  border-radius:var(--r-pille);background:rgba(10,13,18,.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);
}
.popup__zu:hover{background:var(--acc);color:#17130A}
.popup__k > .popup__inhalt{padding:1.3rem 1.5rem 1.5rem}
.popup__k h3{font:700 1.36rem/1.16 var(--f-d);text-transform:uppercase;letter-spacing:-.006em}
.popup__k > .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}


/* =========================================================================
   Reveal — 10-px-Regel
   ========================================================================= */
.rv{opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rv.is-da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .blase{opacity:1;transform:none}
}

/* =========================================================================
   Rechtsseiten
   ========================================================================= */
.seitenkopf{background:var(--ink);color:#fff;padding:clamp(7rem,11vw,9rem) 0 clamp(2.6rem,4vw,3.4rem)}
.seitenkopf h1{font:800 clamp(2rem,4.4vw,3rem)/1.02 var(--f-d);text-transform:uppercase;
  letter-spacing:-.006em}
.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)}

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

@media (max-width:980px){
  .nav,.kopf-tel,.kopfleiste .btn--acc{display:none}
  .kopf-mob{display:flex}
  .hero__in,.chat-grid,.gebiet,.kontakt__in{grid-template-columns:1fr}
  .hero{padding-top:clamp(6.5rem,18vw,8rem)}
  .hero__bg img{content:url('../img/hero-mobil.jpg');object-position:50% 40%}
  .hero__bg::after{background:linear-gradient(180deg,rgba(9,11,15,.86) 0%,rgba(9,11,15,.74) 45%,rgba(9,11,15,.92) 100%)}
  .hero__txt,.hero .haken{max-width:none}
  .karte-form{max-width:480px;margin-inline:auto;width:100%}
  .hero__btns .btn{flex:1;min-width:180px}
  .ueber{grid-template-columns:1fr}
  .ueber > .film{order:1}
  .ueber > .ueber__c{order:2}
  .ueber__btns .btn{flex:1 1 100%}
  .siegel{gap:.9rem}
  .siegel img{height:66px}
  .siegel .siegel__breit{height:38px}
  .film__play{width:68px;height:68px}
  .film__play svg{width:31px;height:31px}
  /* Handy zuerst, danach der Text — Bild vor Argument */
  .chat-grid > .chat__inhalt{order:2}
  .chat-grid > .handy-sp{order:1}
  .gebiet > .gebiet__karte{order:1}
  .gebiet > .gebiet__inhalt{order:2}
  .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}
  .tabp__cta .btn{flex:1 1 100%}
  .tabs__k{padding:.75rem 1rem;font-size:.875rem}
  .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}
}

@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}
  .zert__fakten{grid-template-columns:1fr}
  .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}
  .zert__buehne{grid-template-columns:44px 1fr 44px;gap:6px}
  .zert__pfeil{width:44px;height:44px}
  .zert__pfeil svg{width:20px;height:20px}
  .ap__reihe{gap:1rem}
  .faq__a p{padding-right:.8rem}
  .faq-sec .marke-gross{right:-6rem;width:26rem}
  .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:.66rem}
  .stoerer b{font-size:1rem}
  .form__kopf{padding-right:3.6rem}
}

@media (max-width:520px){
  .picks{grid-template-columns:1fr 1fr}
  .pick__ill{max-width:64px}
  .feld--zwei{grid-template-columns:1fr}
  .marke__txt{display:none}
  .band{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
        mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
}