@charset "utf-8";
/* ==========================================================================
   MM Alarmanlagen - Relaunch 2026
   Farben: Schwarz - Nachtblau - Gold - Orange - Weiss
   Schrift: Barlow Condensed (Titel), Barlow (Text)
   Eine einzige Datei, bewusst ohne Verschachtelung und ohne moderne
   Selektoren, damit auch aeltere Browser alles anwenden.
   ========================================================================== */

/* ---------- Schriften ---------- */
@font-face{font-family:"Barlow";src:url("../fonts/barlow-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --schwarz:#05070c;
  --blau-900:#071324;
  --blau-800:#0b2039;
  --blau-700:#123356;
  --blau-500:#1e5a96;
  --gold:#ff6a1a;
  --gold-text:#f4971a;
  --anthrazit:#2c3238;
  --gold-hell:#ffab7a;
  --gold-dunkel:#c2500c;
  --orange:#ff6a1a;
  --orange-dunkel:#d8500a;
  --weiss:#ffffff;
  --papier:#f4f6f9;
  --linie:#dde3ea;
  --text:#16202e;
  --text-leise:#56637a;
  --breite:1180px;
  --luft:clamp(2.8rem,5vw,4.8rem);
  --radius:4px;
  --schatten:0 18px 50px -24px rgba(7,19,36,.45);
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:#16202e;color:var(--text);font-family:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1.06rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
/* Links ohne Unterstreichung. Damit sie trotzdem erkennbar bleiben,
   sind sie farblich abgesetzt und werden beim Ueberfahren unterstrichen. */
a{color:#123356;color:var(--blau-700);text-decoration:none;text-underline-offset:3px;overflow-wrap:break-word}
a:hover,a:focus-visible{color:var(--orange-dunkel)}
/* Umgekehrte Logik: NICHTS wird unterstrichen. Die Unterstreichung beim
   Ueberfahren gibt es nur dort, wo ein Link mitten im Text steht - also
   in Fliesstexten, Karten und Rechtstexten. Logo, Knoepfe, Kacheln,
   Menue und Bildlinks koennen dadurch gar nicht erst unterstrichen
   werden, egal welche Regel sonst noch dazukommt. */
.fliess a:not(.btn):hover,.fliess a:not(.btn):focus-visible,
.textduo__text a:not(.btn):hover,.textduo__text a:not(.btn):focus-visible,
.rechtstext a:not(.btn):hover,.rechtstext a:not(.btn):focus-visible,
.karte a:not(.btn):hover,.karte a:not(.btn):focus-visible,
.irrtum a:hover,.modul a:hover,.antwort a:hover,
.zufriedenheit__text a:hover,.hinweis a:hover,
.fusszeile a:hover,.kontaktbox a:hover{text-decoration:underline}
/* In Fliesstexten zusaetzlich halbfett, damit Links ohne Strich auffallen */
.fliess a:not(.btn),.textduo__text a:not(.btn),.rechtstext a:not(.btn),
.karte a:not(.btn),.irrtum a,.modul a{font-weight:600}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
h1,h2,h3{font-family:"Barlow Condensed","Barlow",sans-serif;font-weight:700;line-height:1.04;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,5.4vw,4rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
h3{font-size:1.35rem;line-height:1.2}
h4{font-size:1.1rem;font-family:"Barlow",sans-serif;font-weight:700;margin:0 0 .5em}
p{margin:0 0 1.05em;max-width:74ch}
ul,ol{max-width:74ch}
.schritte,.pruefliste,.haken,.orte,.infolinks,.fuss-orte,.zeitstrahl,.fusszeile ul{max-width:none}
.container{width:100%;max-width:1180px;max-width:var(--breite);margin-left:auto;margin-right:auto;padding-left:1.2rem;padding-right:1.2rem}
@media (min-width:700px){.container{padding-left:2rem;padding-right:2rem}}
.skip-link{position:absolute;left:-9999px;top:0;z-index:99;background:var(--orange);color:#fff;padding:.7rem 1.2rem;font-weight:600}
.skip-link:focus{left:.5rem;top:.5rem}
.nur-lesbar{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mitte{text-align:center}
.hinweis{font-size:.92rem;color:var(--text-leise)}

/* ==========================================================================
   LAUFBAND
   ========================================================================== */
.laufband{background:#05070c;background:linear-gradient(90deg,#05070c 0%,#071324 55%,#05070c 100%);border-bottom:1px solid rgba(255,106,26,.38);color:#fff;position:relative;z-index:30}
.laufband--block{border:1px solid rgba(255,106,26,.38);border-radius:4px;margin-bottom:2rem;min-height:2.9rem}
.laufband--block .laufband__innen{min-height:2.9rem}
.laufband__innen{display:flex;align-items:stretch;overflow:hidden}
.laufband__marke{display:flex;align-items:center;gap:.55rem;flex:none;background:#ff6a1a;background:var(--orange);color:#fff;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1rem;padding:.45rem 1rem;white-space:nowrap}
.laufband__punkt{width:.5rem;height:.5rem;border-radius:50%;background:#fff;animation:puls 2.4s ease-out infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(255,255,255,.65)}70%{box-shadow:0 0 0 .55rem rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.laufband__fenster{flex:1 1 auto;overflow:hidden;position:relative;min-width:0}
.laufband__spur{display:flex;width:max-content;animation:laufen 58s linear infinite}
.laufband__spur > span{display:flex;flex:none}
.laufband:hover .laufband__spur{animation-play-state:paused}
@keyframes laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.laufband__eintrag{display:inline-flex;align-items:baseline;gap:.5rem;padding:.45rem 0;margin-right:2.4rem;white-space:nowrap;font-size:.95rem}
.laufband__datum{font-family:"Barlow Condensed",sans-serif;font-weight:700;color:var(--gold-text)}
.laufband__messe{font-weight:600;color:#fff}
.laufband__ort{color:rgba(255,255,255,.62);font-size:.89rem}
.laufband__trenn{color:var(--gold-text)}
.laufband__link{flex:none;display:flex;align-items:center;padding:.45rem 1rem;color:var(--gold-text);font-weight:600;font-size:.9rem;text-decoration:none;border-left:1px solid rgba(255,106,26,.3);white-space:nowrap}
.laufband__link:hover{color:#fff;background:rgba(255,106,26,.14)}
@media (max-width:640px){.laufband__link{display:none}}
@media (max-width:768px){
  /* v85: Laufband laeuft auch mobil weiter (frueher: Handschieben) */
  .laufband .laufband__fenster{overflow:hidden;overflow-x:hidden;touch-action:pan-y}
  .laufband__eintrag{font-size:.88rem;margin-right:1.6rem}
  .laufband--block{min-height:2.6rem}
  .laufband--block .laufband__innen{min-height:2.6rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .laufband__spur{animation:none}
  .laufband__fenster{overflow-x:auto}
  .laufband__punkt{animation:none}
}

/* ==========================================================================
   KOPFZEILE UND NAVIGATION
   Wichtig: Untermenues tragen im HTML zusaetzlich das Attribut hidden.
   Dadurch sind sie selbst dann zugeklappt, wenn dieses Stylesheet
   gar nicht geladen wird.
   ========================================================================== */
.kopfzeile{position:sticky;top:0;z-index:25;background:#05070c;background:rgba(5,7,12,.96);border-bottom:1px solid rgba(255,255,255,.08)}
.kopfzeile__innen{display:flex;flex-wrap:nowrap;align-items:center;gap:1rem;min-height:74px;position:relative}
.marke{display:flex;align-items:center;gap:.65rem;flex:none;text-decoration:none;padding:.2rem 0}
.marke__schild{width:52px;height:48px;flex:none;display:block;object-fit:contain;filter:drop-shadow(0 0 5px rgba(244,151,26,.55)) drop-shadow(0 0 11px rgba(255,106,26,.4))}
.marke__text{display:block;line-height:1}
.marke__name{display:block;font-family:"Barlow Condensed","Barlow",sans-serif;font-weight:700;font-size:1.42rem;line-height:1;color:#fff;letter-spacing:.005em;text-transform:uppercase;white-space:nowrap}
.marke__zusatz{display:block;font-family:"Barlow Condensed","Barlow",sans-serif;font-weight:600;font-size:.76rem;line-height:1;color:#f4971a;color:var(--gold-text);letter-spacing:.14em;text-transform:uppercase;margin-top:.32rem;display:block;white-space:nowrap}
.marke:hover .marke__name{color:var(--gold-text)}
@media (max-width:420px){
  .marke__schild{width:44px;height:41px}
  .marke__name{font-size:1.18rem}
  .marke__zusatz{font-size:.66rem;letter-spacing:.1em}
}

/* Schalter fuer das Hauptmenue */
.nav-schalter{display:block;margin-left:auto;width:48px;height:42px;background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:4px;cursor:pointer;position:relative;flex:none}
.nav-schalter span,.nav-schalter span::before,.nav-schalter span::after{position:absolute;left:50%;margin-left:-10px;width:20px;height:2px;background:#fff;content:"";transition:transform .2s ease}
.nav-schalter span{top:50%;margin-top:-1px}
.nav-schalter span::before{top:-6px;left:0;margin-left:0}
.nav-schalter span::after{top:6px;left:0;margin-left:0}
.nav-schalter[aria-expanded="true"] span{background:transparent}
.nav-schalter[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-schalter[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* Menue: Grundzustand geschlossen, auch auf grossen Bildschirmen */
.navigation{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:stretch;background:#05070c;border-bottom:3px solid var(--gold);padding:.4rem 1.2rem 1.2rem;max-height:80vh;overflow-y:auto;box-shadow:0 26px 50px -22px rgba(0,0,0,.9)}
.navigation.offen{display:flex}
.navigation > a,.navi-gruppe > a,.navi-titel{display:block;color:rgba(255,255,255,.88);text-decoration:none;font-weight:600;font-size:1.02rem;padding:.8rem .2rem}
.navi-titel{cursor:default}
.navigation > a:hover,.navi-gruppe > a:hover,.navi-titel:hover,.navigation > a:focus-visible,.navi-gruppe > a:focus-visible,.navi-titel:focus-visible{color:var(--gold-text)}
.navigation > a[aria-current="page"],.navi-gruppe > a[aria-current="page"]{color:var(--gold-text)}
.navigation > a,.navi-gruppe{border-bottom:1px solid rgba(255,255,255,.09)}
.navi-gruppe{position:relative;display:block}
.navi-gruppe > a,.navi-gruppe > .navi-titel{width:calc(100% - 3.2rem)}
.navi-auf{position:absolute;right:0;top:.55rem;width:3rem;height:2.6rem;background:transparent;border:0;cursor:pointer}
.navi-auf::after{content:"";position:absolute;left:50%;top:50%;width:.5rem;height:.5rem;margin:-.36rem 0 0 -.25rem;border-right:2px solid rgba(255,255,255,.75);border-bottom:2px solid rgba(255,255,255,.75);transform:rotate(45deg)}
.navi-auf[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:-.1rem;border-color:var(--gold)}
.navi-unter{border-left:2px solid var(--gold);margin:0 0 .7rem .4rem;padding:.1rem 0}
.navi-unter a{display:block;color:rgba(255,255,255,.76);text-decoration:none;font-size:.95rem;padding:.5rem .9rem}
.navi-unter a:hover,.navi-unter a:focus-visible{color:#05070c;background:var(--orange);font-weight:600}
.navi-cta{margin-top:1rem;justify-content:center}

/* Ab 1200 px liegt das Menue als Leiste in der Kopfzeile */
@media (min-width:1080px){
  .nav-schalter{display:none}
  .navigation{position:static;display:flex;flex-direction:row;align-items:center;margin-left:auto;background:transparent;border:0;padding:0;max-height:none;overflow:visible;box-shadow:none;flex-wrap:nowrap}
  .navigation > a,.navi-gruppe{border-bottom:0}
  .navigation > a,.navi-gruppe > a,.navi-titel{padding:.5rem .45rem;font-size:.92rem;font-weight:500;white-space:nowrap}
  .navigation > a[aria-current="page"],.navi-gruppe > a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--gold)}
  .navi-gruppe{display:flex;align-items:center}
  .navi-gruppe > a,.navi-gruppe > .navi-titel{width:auto;padding-right:.1rem}
  .navi-auf{display:none}
  .navi-auf::after{margin-top:-.3rem}
  .navi-gruppe::after{content:"";position:absolute;top:100%;left:0;right:0;height:.6rem}
  .navi-unter{position:absolute;top:100%;left:auto;right:0;min-width:15rem;background:#05070c;border:1px solid rgba(255,106,26,.35);border-top:2px solid var(--gold);border-radius:0 0 4px 4px;margin:0;padding:.35rem 0;box-shadow:0 24px 50px -20px rgba(0,0,0,.85);z-index:40}
  .navi-gruppe:nth-child(-n+5) .navi-unter{left:0;right:auto}
  .navi-cta{margin:0 0 0 .5rem}
}
@media (min-width:1080px) and (max-width:1439px){
  .navigation > a,.navi-gruppe > a,.navi-titel{font-size:.8rem;padding-left:.26rem;padding-right:.26rem;letter-spacing:-.01em}
  .navi-cta{font-size:.86rem;padding:.42rem .8rem}
  .marke__logo,.marke__schild{width:44px;height:41px}
  .marke__name{font-size:1.2rem}
  .marke__zusatz{font-size:.64rem}
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.06rem;padding:.72rem 1.5rem;border-radius:4px;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn.btn--orange{background:#ff6a1a;background:var(--orange);color:#fff}
.btn.btn--orange:hover{background:var(--orange-dunkel);color:#fff}
.btn.btn--gold{background:var(--gold);color:var(--schwarz)}
.btn.btn--gold:hover{background:var(--gold-hell);color:var(--schwarz)}
.btn.btn--linie{border-color:rgba(255,255,255,.4);color:#fff}
.btn.btn--linie:hover{border-color:var(--gold);color:var(--gold-text)}
.btn.btn--dunkel{border-color:var(--blau-800);color:var(--blau-800)}
.btn.btn--dunkel:hover{background:var(--blau-800);color:#fff}
.btn--klein{font-size:.96rem;padding:.5rem 1rem}
.btn-reihe{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}

/* ==========================================================================
   ABSCHNITTE
   ========================================================================== */
.abschnitt{padding-top:var(--luft);padding-bottom:var(--luft)}
.abschnitt--eng{padding-top:calc(var(--luft) * .6);padding-bottom:calc(var(--luft) * .6)}
.abschnitt--papier{background:var(--papier)}
.abschnitt--nacht{background:var(--blau-900);color:#fff}
.abschnitt--schwarz{background:var(--schwarz);color:#fff}
.abschnitt--nacht h1,.abschnitt--nacht h2,.abschnitt--nacht h3,
.abschnitt--schwarz h1,.abschnitt--schwarz h2,.abschnitt--schwarz h3{color:#fff}
.abschnitt--nacht p,.abschnitt--schwarz p,.abschnitt--nacht li,.abschnitt--schwarz li{color:rgba(255,255,255,.82)}
.abschnitt--nacht a,.abschnitt--schwarz a{color:var(--gold-text)}
.abschnitt--nacht a:hover,.abschnitt--schwarz a:hover{color:#fff}
.abschnitt--nacht .hinweis,.abschnitt--schwarz .hinweis{color:rgba(255,255,255,.6)}
.kopf{max-width:68ch;margin-bottom:2.4rem}
.kopf p{color:var(--text-leise);font-size:1.08rem}
.abschnitt--nacht .kopf p,.abschnitt--schwarz .kopf p{color:rgba(255,255,255,.74)}
.strich{width:76px;height:3px;background:linear-gradient(90deg,var(--gold),var(--orange));border:0;margin:0 0 1.2rem}
.fliess{max-width:82ch}
.fliess--mitte{margin-left:auto;margin-right:auto}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;background:var(--schwarz);color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:radial-gradient(120% 95% at 78% 18%,rgba(30,90,150,.55) 0%,rgba(11,32,57,.55) 42%,rgba(5,7,12,0) 72%),radial-gradient(70% 60% at 8% 95%,rgba(255,106,26,.2) 0%,rgba(5,7,12,0) 68%)}
.hero__innen{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:2.4rem;align-items:center;padding-top:3rem;padding-bottom:3rem}
@media (min-width:900px){.hero__innen{grid-template-columns:1.06fr .94fr;gap:3.4rem;padding-top:4.4rem;padding-bottom:4.4rem}}
.hero__hut{display:inline-flex;align-items:center;gap:.6rem;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:1rem;color:var(--gold-text);border:1px solid rgba(255,106,26,.45);border-radius:999px;padding:.32rem .95rem;margin-bottom:1.3rem}
.hero__hut::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--orange)}
.hero h1{color:#fff;margin-bottom:.35em}
.hero__text{font-size:1.14rem;color:rgba(255,255,255,.84);max-width:52ch}
.hero__fakten{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-top:2.2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14)}
@media (min-width:560px){.hero__fakten{grid-template-columns:repeat(3,1fr);gap:1.4rem}}
.hero__fakt{max-width:none}
.hero__zahl{font-size:clamp(1.4rem,2.2vw,1.9rem)}
.hero__zahl{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:2rem;line-height:1;color:var(--gold-text)}
.hero__fakt span:last-child{display:block;font-size:.9rem;color:rgba(255,255,255,.66);margin-top:.25rem}
.welle{position:relative;display:flex;align-items:center;justify-content:center;max-width:520px;margin-left:auto;margin-right:auto}
.welle__grafik{position:absolute;left:-6%;right:-6%;top:-6%;bottom:-6%;z-index:0;pointer-events:none;transform:translateX(50%)}
.welle__ring{fill:none;stroke:var(--gold);stroke-width:1;opacity:0;transform-origin:50% 50%;animation:ausbreiten 6s ease-out infinite}
.welle__ring:nth-of-type(2){animation-delay:2s;stroke:var(--orange)}
.welle__ring:nth-of-type(3){animation-delay:4s}
@keyframes ausbreiten{0%{transform:scale(.42);opacity:0}12%{opacity:.85}100%{transform:scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.welle__ring{animation:none;opacity:.3}}
.welle__bild{position:relative;z-index:1;width:100%;border-radius:18px;border:1px solid rgba(255,106,26,.4);box-shadow:0 0 0 1px rgba(255,106,26,.12),0 25px 70px -12px rgba(0,0,0,.85),0 0 55px -8px rgba(244,151,26,.35),0 0 100px -20px rgba(255,106,26,.25)}

/* ==========================================================================
   RASTER UND KARTEN
   ========================================================================== */
.raster{display:grid;gap:1.4rem;grid-template-columns:1fr}
@media (min-width:640px){
  .raster--2,.raster--3,.raster--4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:980px){
  .raster--3{grid-template-columns:repeat(3,1fr)}
  .raster--4{grid-template-columns:repeat(4,1fr)}
}
.karte{background:#fff;border:1px solid var(--linie);border-top:3px solid var(--gold);border-radius:4px;padding:1.6rem 1.5rem}
.karte h3{margin-bottom:.45rem}
.karte p:last-child{margin-bottom:0}
.karte--orange{border-top-color:var(--orange)}
.abschnitt--nacht .karte,.abschnitt--schwarz .karte{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);border-top-color:var(--gold)}
.kachel{display:block;background:#fff;border:1px solid var(--linie);border-left:3px solid var(--gold);border-radius:4px;padding:1.2rem 1.3rem;text-decoration:none;color:var(--text)}
.kachel:hover{border-left-color:var(--orange);color:var(--text);box-shadow:var(--schatten)}
.kachel h3{font-size:1.12rem;margin-bottom:.2rem}
.kachel p{margin:0;color:var(--text-leise);font-size:.95rem}

/* Schritte */
.schritte{counter-reset:schritt;display:grid;gap:1.2rem;grid-template-columns:1fr;margin:0;padding:0;list-style:none}
@media (min-width:900px){.schritte{grid-template-columns:repeat(3,1fr)}}
.schritt{counter-increment:schritt;position:relative;height:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:2.6rem 1.5rem 1.6rem}
.schritt::before{content:counter(schritt,decimal-leading-zero);position:absolute;top:.9rem;left:1.5rem;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.5rem;color:var(--orange)}
.schritt h3{font-size:1.22rem;margin-bottom:.4rem}
.schritt p{margin-bottom:0;color:rgba(255,255,255,.78)}
.schritte--hell .schritt{background:#fff;border-color:var(--linie)}
.schritte--hell .schritt p,.schritte--hell .schritt h3{color:var(--text)}

/* Hakenliste */
.haken{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
.haken li{position:relative;padding-left:1.9rem}
.haken li::before{content:"";position:absolute;left:0;top:.5em;width:.85rem;height:.5rem;border-left:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);transform:rotate(-45deg)}
.haken--orange li::before{border-color:var(--orange)}
@media (min-width:640px){.haken--zwei{grid-template-columns:1fr 1fr}}

/* Zweispalter */
.duo{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
@media (min-width:820px){.duo{grid-template-columns:1fr 1fr;gap:3rem}.duo--gedreht .duo__bild{order:2}}
.duo__bild img{border-radius:18px;border:1px solid var(--linie);width:100%;box-shadow:0 0 0 1px rgba(255,106,26,.1),0 20px 50px -14px rgba(0,0,0,.35),0 0 45px -10px rgba(244,151,26,.3),0 0 80px -20px rgba(255,106,26,.2)}
.abschnitt--nacht .duo__bild img,.abschnitt--schwarz .duo__bild img{border-color:rgba(255,106,26,.3);box-shadow:0 0 0 1px rgba(255,106,26,.12),0 20px 50px -12px rgba(0,0,0,.7),0 0 55px -8px rgba(244,151,26,.35),0 0 90px -18px rgba(255,106,26,.22)}
/* Runde Siegel/Plakate sollen keinen rechteckigen Rahmen haben - der
   sieht um eine kreisrunde Grafik immer wie ein Fehler aus. */
.duo__bild img[src$="expressabsicherung.png"]{border:0;border-radius:0;background:none;box-shadow:none}
.bild-breit{margin:2.2rem 0 0}
.bild-breit img{width:100%;border-radius:18px;border:1px solid var(--linie)}

/* Kennzahlen */
.kennzahlen{display:grid;grid-template-columns:1fr;gap:1.2rem;margin:0;padding:0}
@media (min-width:640px){.kennzahlen{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.kennzahlen{grid-template-columns:repeat(4,1fr)}}
.kennzahl{display:flex;flex-direction:column;background:var(--blau-800);border:1px solid rgba(255,106,26,.26);border-radius:4px;padding:1.5rem}
.kennzahl dd{margin:0;order:1;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:2.3rem;line-height:1;color:var(--gold-text)}
.kennzahl dt{order:2;font-size:.9rem;color:rgba(255,255,255,.7);margin-top:.3rem}

/* Siegel */
.siegel{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem;align-items:center}
.siegel>*{flex:0 1 calc(50% - .6rem)}
@media (min-width:760px){.siegel>*{flex-basis:calc(33.333% - .8rem)}}
@media (min-width:1000px){.siegel>*{flex-basis:calc(25% - .9rem)}}
.siegel a,.siegel div{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--linie);border-radius:4px;padding:1rem;min-height:7rem}
.siegel img{max-height:5rem;width:auto;object-fit:contain}

/* Galerie */
.galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
@media (min-width:760px){.galerie{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1040px){.galerie{grid-template-columns:repeat(4,1fr)}}
.galerie__bild{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--linie);background:#fff}
.galerie__bild img{width:100%;height:100%;object-fit:cover;display:block}

/* Videokacheln */
.video-raster{display:grid;grid-template-columns:1fr;gap:1.4rem}
@media (min-width:760px){.video-raster{grid-template-columns:repeat(2,1fr)}}
.video-karte{position:relative;display:block;border-radius:18px;overflow:hidden;background:var(--schwarz);text-decoration:none;box-shadow:0 0 0 1px rgba(255,106,26,.12),0 20px 50px -12px rgba(0,0,0,.8),0 0 45px -8px rgba(244,151,26,.35),0 0 80px -18px rgba(255,106,26,.22)}
.video-karte img{width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.75}
.video-karte:hover img{opacity:1}
.video-karte:hover{box-shadow:0 0 0 1px rgba(255,106,26,.25),0 20px 50px -12px rgba(0,0,0,.8),0 0 60px -6px rgba(244,151,26,.5),0 0 100px -15px rgba(255,106,26,.3)}
.video-karte__play{position:absolute;left:50%;top:40%;margin:-2rem 0 0 -2rem;width:4rem;height:4rem;border-radius:50%;background:rgba(255,106,26,.92);z-index:2}
.video-karte__play::after{content:"";position:absolute;left:1.45rem;top:1.15rem;border-left:1.05rem solid #fff;border-top:.66rem solid transparent;border-bottom:.66rem solid transparent}
.video-karte__text{display:block;padding:.85rem 1rem;color:#fff;font-weight:600;background:var(--blau-900)}

/* ==========================================================================
   TABELLE, BAND, FAQ, FORMULAR
   ========================================================================== */
.tabelle-rahmen{overflow-x:auto;border:1px solid var(--linie);border-radius:4px;background:#fff;position:relative}
@media (max-width:660px){
  .tabelle-rahmen::after{content:"";position:absolute;top:0;right:0;bottom:0;width:2.2rem;background:linear-gradient(90deg,transparent,rgba(20,30,45,.14));pointer-events:none;border-radius:0 4px 4px 0}
}
table.termine{width:100%;border-collapse:collapse;min-width:34rem}
table.termine caption{text-align:left;padding:1rem 1.1rem;color:var(--text-leise);font-size:.94rem;border-bottom:1px solid var(--linie)}
table.termine th{background:var(--blau-900);color:#fff;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.06rem;text-align:left;padding:.75rem 1.1rem}
table.termine td{padding:.8rem 1.1rem;border-top:1px solid var(--linie);vertical-align:top}
table.termine tbody tr:nth-child(even){background:#fafbfd}
table.termine .datum{font-weight:600;white-space:nowrap;color:var(--blau-700)}
table.termine .messe{font-weight:600}
table.termine tr.vergangen td,table.termine tr.vergangen .datum{color:var(--text-leise)}
.marker{display:inline-block;font-size:.75rem;font-weight:600;line-height:1;padding:.25rem .5rem;border-radius:999px;margin-left:.5rem}
.marker--jetzt{background:var(--orange);color:#fff}
.marker--bald{background:rgba(255,106,26,.18);color:var(--gold-text)}
.marker--vorbei{background:var(--linie);color:var(--text-leise)}

.band{background:var(--blau-800);background:linear-gradient(105deg,#0b2039 0%,#071324 58%,#05070c 100%);color:#fff;border-top:3px solid var(--gold)}
.band__innen{display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem;justify-content:space-between;padding-top:2.6rem;padding-bottom:2.6rem}
.band h2{margin-bottom:.3em;color:#fff}
.band p{color:rgba(255,255,255,.78);margin-bottom:0}
.band a:not(.btn){color:var(--gold-text)}
.telefon{display:inline-flex;align-items:center;gap:.6rem;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--gold-text);text-decoration:none;line-height:1}
.telefon:hover{color:#fff}
.telefon svg{width:1.6rem;height:1.6rem;flex:none}

.faq{max-width:56rem;display:grid;gap:.7rem}
.faq details{background:#fff;border:1px solid var(--linie);border-radius:4px}
.faq details[open]{border-color:var(--gold)}
.faq summary{cursor:pointer;list-style:none;padding:1.05rem 3rem 1.05rem 1.2rem;font-weight:600;position:relative;font-size:1.04rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:1.2rem;top:1.4rem;width:.6rem;height:.6rem;border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(45deg)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .antwort{padding:0 1.2rem 1.1rem}
.faq .antwort p:last-child{margin-bottom:0}

.formular{display:grid;gap:1.1rem;max-width:40rem;margin-top:1.4rem}
/* v97: Der ganze Block links steht im Leuchtkasten und ist so hoch wie die Spalte daneben */
.duo.duo--gleichhoch{align-items:stretch}
.duo.duo--gleichhoch .duo__fussnote{margin:.6rem 0 0;max-width:none}
@media (min-width:820px){.duo.duo--gleichhoch{grid-template-rows:auto auto;row-gap:0}
  .duo.duo--gleichhoch>:nth-child(1){grid-column:1;grid-row:1}
  .duo.duo--gleichhoch>:nth-child(2){grid-column:2;grid-row:1}
  .duo.duo--gleichhoch>.duo__fussnote{grid-column:2;grid-row:2}}
.kontaktformular{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid rgba(255,106,26,.45);border-top:3px solid var(--orange);border-radius:18px;padding:clamp(1.4rem,3vw,2.1rem);box-shadow:0 0 0 1px rgba(255,106,26,.12),0 20px 50px -18px rgba(11,32,57,.35),0 0 45px -10px rgba(255,106,26,.35),0 0 90px -24px rgba(244,151,26,.3)}
.kontaktformular .strich{margin-top:0}
.kontaktformular .formular{flex:0 0 auto}
.feld{display:grid;gap:.35rem}
.feld label{font-weight:600;font-size:.97rem}
.feld input,.feld textarea,.feld select{font:inherit;color:var(--text);padding:.7rem .85rem;border:1px solid var(--linie);border-radius:12px;background:#fff;width:100%}
.feld input:focus,.feld textarea:focus,.feld select:focus{border-color:var(--blau-500);outline:3px solid rgba(30,90,150,.2)}
.feld textarea{min-height:9rem;resize:vertical}
.zustimmung{display:flex;gap:.65rem;align-items:flex-start;font-size:.94rem}
.zustimmung input{width:1.35rem;height:1.35rem;margin-top:.2rem;flex:none}

.kontaktbox{background:var(--blau-900);color:#fff;border-radius:18px;padding:1.9rem;border-top:3px solid var(--orange)}
.kontaktbox h3{color:#fff}
.kontaktbox a{color:var(--gold-text)}
.kontaktbox dl{display:grid;gap:.85rem;margin:0}
.kontaktbox dt{font-size:.84rem;color:rgba(255,255,255,.6)}
.kontaktbox dd{margin:0;font-weight:600}
.orte{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:1.2rem 0 0;list-style:none}
.orte li{border:1px solid rgba(255,106,26,.4);border-radius:999px;padding:.3rem .85rem;font-size:.92rem;color:rgba(255,255,255,.85)}

.rechtstext{max-width:74ch}
.rechtstext h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-top:2.2rem}
.rechtstext h3{font-size:1.18rem;margin-top:1.6rem}
.rechtstext ul{padding-left:1.2rem}

.offen-hinweis{background:#fff3ea;border:1px solid var(--gold);border-left:4px solid var(--orange);border-radius:4px;padding:1.4rem 1.5rem}
.offen-hinweis p:last-child{margin-bottom:0}

/* ==========================================================================
   INFOSPALTE
   ========================================================================== */
.infospalte{display:grid;grid-template-columns:1fr;gap:1.6rem}
@media (min-width:760px){.infospalte{grid-template-columns:repeat(3,1fr)}}
.infokarte{background:#fff;border:1px solid var(--linie);border-top:3px solid var(--gold);border-radius:4px;padding:1.3rem;display:grid;gap:1rem;align-content:start}
.infokarte img{width:100%;max-width:19rem;height:auto;margin-left:auto;margin-right:auto}
.infokarte p{margin:0;font-size:.94rem;line-height:1.55}
.infolinks{list-style:none;padding:0;margin:0;display:grid;gap:.45rem;font-size:.94rem}
.infolinks a{font-weight:600}

/* ==========================================================================
   FUSSZEILE
   ========================================================================== */
.fusszeile{background:var(--schwarz);color:rgba(255,255,255,.72);padding-top:3.4rem;border-top:3px solid var(--gold)}
.fusszeile__raster{display:grid;grid-template-columns:1fr;gap:2.2rem}
@media (min-width:700px){.fusszeile__raster{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.fusszeile__raster{grid-template-columns:1.25fr 1fr 1fr .9fr}}
.fusszeile h3{font-family:"Barlow Condensed",sans-serif;font-size:1.16rem;color:var(--gold-text);margin-bottom:.9rem}
.fusszeile a{color:rgba(255,255,255,.78);text-decoration:none}
.fusszeile a:hover{color:var(--gold-text)}
.fusszeile ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.fusszeile p{margin-bottom:.6rem;font-size:.96rem}
.fuss-menue{font-size:.94rem}
.fuss-menue .fuss-unter a{opacity:.72;font-size:.89rem;padding-left:.8rem}
.fusszeile__unten{margin-top:2.6rem;border-top:1px solid rgba(255,255,255,.1);padding-top:1.2rem;padding-bottom:1.2rem;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;justify-content:space-between;font-size:.89rem}
.fusszeile__recht{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}

/* ==========================================================================
   SCHNELLZUGRIFF (fest unten rechts)
   WhatsApp, Facebook, Instagram in Originalfarben, dazu Nach-oben in Orange.
   Ohne JavaScript ist der Nach-oben-Knopf dauerhaft sichtbar; das Skript
   blendet ihn lediglich aus, solange man ganz oben steht.
   ========================================================================== */
.schnellzugriff{position:fixed;right:1rem;bottom:1rem;z-index:50;display:flex;flex-direction:column;gap:.6rem}
.sz{display:flex;align-items:center;justify-content:center;width:3.1rem;height:3.1rem;border-radius:50%;text-decoration:none;border:0;box-shadow:0 10px 22px -8px rgba(0,0,0,.6)}
.sz:hover{transform:translateY(-2px)}
.sz svg{width:2.2rem;height:2.2rem;display:block}
.sz--wa svg,.sz--fb svg{fill:currentColor}
.sz--ig svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sz--wa,.sz--fb,.sz--ig{background:#fff;border:1px solid var(--linie);color:#2c3238;color:var(--anthrazit)}
.sz--wa:hover,.sz--fb:hover,.sz--ig:hover{border-color:var(--orange);color:var(--orange)}
.sz--top{background:#ff6a1a;background:var(--orange)}
.sz--top.versteckt{opacity:0;visibility:hidden;pointer-events:none}
@media (max-width:640px){
  .schnellzugriff{right:.7rem;bottom:.7rem;gap:.5rem}
  .sz{width:2.7rem;height:2.7rem}
  .sz svg{width:1.9rem;height:1.9rem}
}
@media print{.schnellzugriff{display:none}}

/* ==========================================================================
   NACHTRAEGE: schlanke Fusszeile, Zeitstrahl, kleine Galerie
   ========================================================================== */
.fuss-marke{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.fuss-schild{width:55px;height:51px;flex:none;object-fit:contain;filter:drop-shadow(0 0 4px rgba(244,151,26,.5)) drop-shadow(0 0 9px rgba(255,106,26,.35))}
.fuss-name{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.2rem;line-height:1;color:#fff;text-transform:uppercase}
.fuss-zusatz{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.13em;color:#f4971a;color:var(--gold-text);text-transform:uppercase;margin-top:.25rem}
.fuss-orte{display:flex;flex-wrap:wrap;gap:.4rem .5rem}
.fuss-orte li{border:1px solid rgba(255,106,26,.35);border-radius:999px;padding:.2rem .7rem;font-size:.86rem}
.fuss-orte li a{text-decoration:none}

.zeitstrahl{list-style:none;margin:0;padding:0 0 0 1.6rem;border-left:2px solid rgba(255,106,26,.4);display:grid;gap:1.6rem;max-width:72ch}
.zeitstrahl li{position:relative}
.zeitstrahl li::before{content:"";position:absolute;left:-2.05rem;top:.45rem;width:.7rem;height:.7rem;border-radius:50%;background:#ff6a1a;background:var(--orange)}
.zeitstrahl__jahr{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.2rem;color:#f4971a;color:var(--gold-text);margin-bottom:.25rem}
.zeitstrahl p{margin:0}

.galerie--klein{grid-template-columns:repeat(3,1fr)}
@media (min-width:640px){.galerie--klein{grid-template-columns:repeat(4,1fr)}}
@media (min-width:980px){.galerie--klein{grid-template-columns:repeat(6,1fr)}}
.galerie--klein .galerie__bild img{aspect-ratio:1/1}

/* ==========================================================================
   MODULKARTEN, VORZEILE, DOPPELZEILIGE SCHLAGZEILE, WERTBOX
   ========================================================================== */
.vorzeile{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:#f4971a;color:var(--gold-text);margin:0 0 .5rem}
.doppelzeile{font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.02;margin:0}
.doppelzeile span{color:#f4971a;color:var(--gold-text)}
.abschnitt--nacht .doppelzeile span,.abschnitt--schwarz .doppelzeile span{color:#f4971a;color:var(--gold-text)}

.module{display:grid;grid-template-columns:1fr;gap:1.8rem 2.2rem}
@media (min-width:640px){.module{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.module{grid-template-columns:repeat(3,1fr)}}
.modul{margin:0}
.modul__symbol{width:2.4rem;height:2.4rem;color:#ff6a1a;color:var(--orange);display:block;margin-bottom:.9rem}
.abschnitt--nacht .modul__symbol,.abschnitt--schwarz .modul__symbol{color:#f4971a;color:var(--gold-text)}
.modul h3{font-size:1.18rem;margin:0 0 .7rem}
.modul__linie{border:0;height:1px;background:rgba(255,106,26,.45);margin:0 0 .8rem;width:100%}
.modul p{margin:0;font-size:.98rem}

.wertbox{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.6rem;background:#fff;border:1px solid var(--linie);border-left:4px solid #ff6a1a;border-left-color:var(--orange);border-radius:4px;padding:2rem}
.wertbox h2{margin-bottom:.4em}
.wertbox p{margin-bottom:.6em}
.wertbox__preis{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.25rem;color:#f4971a;color:var(--gold-text);margin:0}
.wertbox .btn-reihe{margin-top:0}
.wertbox--dunkel{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#fff}
.wertbox--dunkel h2{color:#fff}
.wertbox--dunkel p{color:rgba(255,255,255,.8)}
.kennzahl dd{font-size:clamp(1.6rem,3vw,2.2rem)}

/* Pruefliste mit grossen Nummern */
.pruefliste{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;counter-reset:pp}
@media (min-width:820px){.pruefliste{grid-template-columns:1fr 1fr;gap:.9rem 2rem}}
.pruefpunkt{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:1px solid var(--linie);border-left:3px solid #ff6a1a;border-left-color:var(--gold);border-radius:4px;padding:1rem 1.2rem}
.pruefpunkt__nr{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.5rem;line-height:1.1;color:#ff6a1a;color:var(--orange);flex:none;min-width:1.9rem}
.pruefpunkt p{margin:0;font-size:.98rem}


/* ==========================================================================
   VERTRAUENSLEISTE - ersetzt die frueheren drei hohen Infospalten
   ========================================================================== */
.vertrauen{border-top:1px solid var(--linie);background:#fff}
.vertrauen__innen{padding-top:2.2rem;padding-bottom:2.2rem}
.vertrauen__titel{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:.92rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-leise);text-align:center;margin:0 0 1.4rem}
.vertrauen__reihe{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;align-items:center}
.vertrauen__reihe>*{flex:0 1 calc(33.333% - .67rem)}
@media (min-width:760px){.vertrauen__reihe>*{flex-basis:calc(25% - .75rem)}}
@media (min-width:1100px){.vertrauen__reihe>*{flex-basis:calc(20% - .8rem)}}
.vertrauen__reihe a,.vertrauen__reihe span{display:flex;align-items:center;justify-content:center;padding:.6rem;border:1px solid var(--linie);border-radius:4px;background:#fff;min-height:5.4rem}
.vertrauen__reihe img{max-height:3.8rem;width:auto;object-fit:contain}
.vertrauen__reihe a:hover{border-color:var(--gold)}

/* ==========================================================================
   DATENSEITE: Diagramm, Kennzahlkarten, Quellenliste
   ========================================================================== */
.datenblock{display:grid;grid-template-columns:1fr;gap:1.8rem;margin-top:2.2rem}
@media (min-width:980px){.datenblock{grid-template-columns:1.15fr .85fr;gap:2.2rem}}
.datenblock__diagramm{background:#05070c;background:linear-gradient(165deg,var(--blau-900),var(--schwarz));border:1px solid rgba(255,106,26,.3);border-top:3px solid var(--gold);border-radius:4px;padding:1.4rem}
.dg__titel{color:#fff;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.12rem;margin:0 0 .8rem}
.diagramm{width:100%;height:auto;display:block}
.dg__achse{fill:rgba(244,151,26,.75);font-size:11px;font-family:"Barlow",sans-serif}
.dg__wert{fill:#fff;font-size:12px;font-weight:600;font-family:"Barlow",sans-serif}
.dg__label{fill:rgba(255,255,255,.88);font-size:13px;font-family:"Barlow",sans-serif}
.dg__legende{display:flex;align-items:center;gap:.4rem;color:rgba(255,255,255,.75);font-size:.9rem;margin:.6rem 0 0}
.dg__punkt{display:inline-block;width:.7rem;height:.7rem;border-radius:2px;margin-left:.9rem}
.dg__punkt:first-child{margin-left:0}
.dg__punkt--alt{background:#1e5a96;background:var(--blau-500)}
.dg__punkt--neu{background:#ff6a1a;background:var(--orange)}
.dg__fuss{color:rgba(255,255,255,.55);font-size:.84rem;margin:.7rem 0 0;max-width:none}

.datenblock__karten{display:grid;gap:.9rem;align-content:start}
.datenblock__vor{color:var(--text-leise);margin:0 0 .3rem}
.datenkarte{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:1px solid var(--linie);border-left:3px solid #ff6a1a;border-left-color:var(--gold);border-radius:4px;padding:1rem 1.2rem}
.datenkarte--warnung{border-left-color:#ff6a1a;border-left-color:var(--orange)}
.datenkarte__zahl{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.9rem;line-height:1.05;color:#f4971a;color:var(--gold-text);flex:none;min-width:5.2rem}
.datenkarte--warnung .datenkarte__zahl{color:#d8500a;color:var(--orange-dunkel)}
.datenkarte h3{font-size:1.04rem;margin:0 0 .2rem}
.datenkarte p{margin:0;font-size:.94rem;color:var(--text-leise)}

.quellen{margin-top:2rem;border-top:1px solid var(--linie);padding-top:1.2rem}
.quellen__titel{font-family:"Barlow Condensed",sans-serif;font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.84rem;color:var(--text-leise);margin:0 0 .7rem}
.quellen__liste{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;max-width:none}
.quellen__liste a{display:block;background:#fff;border:1px solid var(--linie);border-radius:4px;padding:.6rem .9rem;font-size:.92rem;text-decoration:none}
.quellen__liste a:hover{border-color:var(--gold)}
.quellen__liste a::after{content:"↗";float:right;color:#f4971a;color:var(--gold-text)}

.kennzahlen--hell .kennzahl{background:#fff;border-color:var(--linie)}
.kennzahlen--hell .kennzahl dd{color:#f4971a;color:var(--gold-text)}
.kennzahlen--hell .kennzahl dt{color:var(--text-leise)}

/* Irrtums- und Pressekarten */
.irrtuemer{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media (min-width:820px){.irrtuemer{grid-template-columns:1fr 1fr}}
.irrtum{background:#fff;border:1px solid var(--linie);border-top:3px solid #ff6a1a;border-top-color:var(--orange);border-radius:4px;padding:1.5rem}
.irrtum__marke{display:inline-block;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#d8500a;color:var(--orange-dunkel);margin-bottom:.5rem}
.irrtum h3{font-size:1.2rem;margin:0 0 .5rem}
.irrtum p{margin:0;font-size:.98rem}
.presse{background:#fff;border:1px solid var(--linie);border-left:3px solid #ff6a1a;border-left-color:var(--gold);border-radius:4px;padding:1.5rem}
.presse__quelle{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-leise);margin:0 0 .4rem}
.presse h3{font-size:1.2rem;margin:0 0 .6rem}
.presse p{font-size:.97rem}
.presse p:last-child{margin:1rem 0 0}
/* Langes Untermenue (Einsatzgebiet) zweispaltig */
@media (min-width:1080px){
  /* Nur das lange Einsatzgebiet-Menue laeuft zweispaltig */
  .navi-gruppe--breit .navi-unter{column-count:2;column-gap:0;min-width:30rem}
}


/* ==========================================================================
   TEXTDUO - Ueberschrift links, Fliesstext rechts.
   Nutzt die Seitenbreite, ohne die Zeilen unlesbar lang zu machen.
   ========================================================================== */
.textduo{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media (min-width:900px){
  .textduo{grid-template-columns:minmax(15rem,20rem) 1fr;gap:clamp(2rem,4vw,4rem);align-items:start}
  .textduo__kopf{position:sticky;top:6.5rem}
}
.textduo__kopf .vorzeile{margin-bottom:.4rem}
.textduo__kopf .doppelzeile{font-size:clamp(1.7rem,2.6vw,2.5rem)}
.textduo__text{max-width:74ch}
.textduo__text p:last-child{margin-bottom:0}
/* In der zweiten Spalte darf der Text die Spalte ausfuellen */
.textduo__text .fliess{max-width:none}
.pdf-groesse{font-family:"Barlow",sans-serif;font-weight:500;font-size:.82rem;opacity:.75}
/* Alleinstehender Fliesstext darf breiter laufen */
.fliess--breit{max-width:92ch}

/* ==========================================================================
   ABFRAGE-KARUSSELL
   ========================================================================== */
.frager{background:#fff;border:1px solid rgba(255,106,26,.45);border-top:3px solid #ff6a1a;border-top-color:var(--orange);border-radius:18px;box-shadow:0 0 0 1px rgba(255,106,26,.12),0 20px 50px -18px rgba(11,32,57,.35),0 0 45px -10px rgba(255,106,26,.35),0 0 90px -24px rgba(244,151,26,.3);padding:clamp(1.5rem,4vw,2.6rem);max-width:56rem;margin-left:auto;margin-right:auto}
.frager__frage{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.15;text-align:center;margin:0 0 1.6rem;max-width:none}
.frager__wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));gap:1rem}
.frager__wahl--text{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.wahl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;background:#fff;border:1px solid var(--linie);border-radius:12px;padding:1.4rem 1rem;cursor:pointer;font:inherit;color:#16202e;color:var(--text);text-align:center;transition:border-color .15s ease,box-shadow .15s ease,transform .12s ease}
.wahl:hover{border-color:#ff6a1a;border-color:var(--gold);box-shadow:var(--schatten);transform:translateY(-2px)}
.wahl svg{width:3.2rem;height:3.2rem;color:#ff6a1a;color:var(--orange)}
.wahl span{font-weight:600;font-size:1rem;line-height:1.25}
.wahl--aktiv{border-color:#ff6a1a;border-color:var(--orange);box-shadow:inset 0 0 0 1px #ff6a1a}
.frager__wahl--text .wahl{padding:1rem}

.frager__ergebnis{text-align:center}
.frager__zusammenfassung{display:inline-block;font-family:"Barlow Condensed",sans-serif;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.9rem;color:#f4971a;color:var(--gold-text);background:rgba(255,106,26,.12);border-radius:999px;padding:.35rem 1rem;margin:0 0 1.1rem;max-width:none}
.frager__text{max-width:52ch;margin-left:auto;margin-right:auto}
.frager__knoepfe{justify-content:center}

.frager__fuss{display:flex;align-items:center;gap:1rem;margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--linie)}
.frager__pfeil{flex:none;width:2.9rem;height:2.9rem;border-radius:12px;border:0;background:#0b2039;background:var(--blau-800);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.frager__pfeil svg{width:1.3rem;height:1.3rem}
.frager__pfeil:hover:not(:disabled){background:#ff6a1a;background:var(--orange)}
.frager__pfeil:disabled{opacity:.3;cursor:default}
.frager__balken{flex:1 1 auto;height:.55rem;background:var(--linie);border-radius:999px;overflow:hidden}
.frager__balken span{display:block;height:100%;width:25%;background:linear-gradient(90deg,var(--gold),var(--orange));border-radius:999px;transition:width .25s ease}
@media (prefers-reduced-motion:reduce){.wahl,.frager__balken span{transition:none}}

/* ==========================================================================
   STIMMEN UND EXPERTEN
   ========================================================================== */
.stimmen{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-top:2.2rem}
@media (min-width:760px){.stimmen{grid-template-columns:repeat(3,1fr)}}
.stimme{position:relative;display:block;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-top:3px solid #ff6a1a;border-top-color:var(--gold);border-radius:4px;padding:4.3rem 1.4rem 1.4rem;text-decoration:none}
.stimme:hover{background:rgba(255,106,26,.12);border-color:rgba(255,106,26,.5)}
.stimme__play{position:absolute;top:1.3rem;left:1.4rem;width:2.4rem;height:2.4rem;border-radius:50%;background:#ff6a1a;background:var(--orange)}
.stimme__play::after{content:"";position:absolute;left:.95rem;top:.68rem;border-left:.75rem solid #fff;border-top:.5rem solid transparent;border-bottom:.5rem solid transparent}
.stimme__quelle{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#f4971a;color:var(--gold-text);margin-bottom:.35rem}
.stimme__name{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.22rem;line-height:1.15;color:#fff;margin-bottom:.5rem}
.stimme__text{display:block;font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.78)}

.zufriedenheit{display:grid;grid-template-columns:1fr;gap:1.4rem;align-items:center;margin-top:2.4rem;padding-top:2.2rem;border-top:1px solid rgba(255,255,255,.14)}
@media (min-width:820px){.zufriedenheit{grid-template-columns:minmax(12rem,16rem) 1fr;gap:clamp(2rem,4vw,3.5rem)}}
.zufriedenheit__zahl{text-align:center}
.zufriedenheit__zahl span{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:clamp(3.2rem,8vw,4.8rem);line-height:.95;color:#f4971a;color:var(--gold-text)}
.zufriedenheit__zahl small{display:block;font-size:.92rem;color:rgba(255,255,255,.7);margin-top:.5rem}
.zufriedenheit__text p{margin-bottom:.8em}
.zufriedenheit__text p:last-child{margin-bottom:0}

/* Video im Seitenkopf und Vorfuehrungsvideo */
.welle__stapel{position:relative;z-index:1;width:100%;display:grid;gap:clamp(1rem,2vw,1.6rem)}
.welle__film{display:block;width:100%;height:auto;border-radius:18px;border:1px solid rgba(255,106,26,.35);background:var(--blau-900);box-shadow:0 0 0 1px rgba(255,106,26,.12),0 25px 70px -12px rgba(0,0,0,.85),0 0 55px -8px rgba(244,151,26,.35),0 0 100px -20px rgba(255,106,26,.25)}
.vorfuehrung{margin:2rem 0 0}
.vorfuehrung video{width:100%;height:auto;display:block;border-radius:18px;border:1px solid rgba(255,106,26,.3);background:#000}
.vorfuehrung figcaption{margin-top:.8rem;font-size:.9rem;color:rgba(255,255,255,.6);max-width:72ch}
.raster--1{grid-template-columns:1fr}

/* Laengere Textbloecke ohne Ueberschrift daneben: zwei Spalten */
.fliess--zwei{max-width:none}
@media (min-width:1000px){
  .fliess--zwei{column-count:2;column-gap:clamp(2rem,4vw,3.5rem)}
  .fliess--zwei p:first-child{margin-top:0}
  .fliess--zwei p:last-child{margin-bottom:0}
}

/* Karten- und Kachel-Ueberschriften: h2 und h3 sehen gleich aus, damit die
   korrekte Gliederung keine optische Wirkung hat */
.karte h2,.kachel h2,.modul h2,.irrtum h2,.presse h2,.datenkarte h2,
.infokarte h2,.schritt h2,.stimme h2{font-family:"Barlow Condensed","Barlow",sans-serif;font-weight:700;line-height:1.2}
.karte h2{font-size:1.35rem;margin:0 0 .45rem}
.kachel h2{font-size:1.12rem;margin:0 0 .2rem}
.modul h2{font-size:1.18rem;margin:0 0 .7rem}
.irrtum h2{font-size:1.2rem;margin:0 0 .5rem}
.presse h2{font-size:1.2rem;margin:0 0 .6rem}
.datenkarte h2{font-size:1.04rem;margin:0 0 .2rem}
.schritt h2{font-size:1.22rem;margin:0 0 .4rem}

/* Agenturhinweis in der Schlusszeile */
.fusszeile__unten{align-items:flex-start}
.fusszeile__unten .site-credit{margin:0;max-width:62ch;font-size:.89rem;line-height:1.55;color:rgba(255,255,255,.55)}
.site-credit,.site-credit a{font-weight:400}
.site-credit a{color:rgba(255,255,255,.68);text-decoration:none}
.site-credit a:hover{color:var(--gold-text)}
@media (min-width:900px){.site-credit{text-align:right;margin-left:auto}}
@media (min-width:1040px){.fusszeile__raster{grid-template-columns:1.2fr 1fr .8fr .8fr}}

/* Google-Bewertung im Footer */
.google-wertung{display:flex;align-items:baseline;gap:.4rem;text-decoration:none;margin-bottom:.15rem}
.google-wertung__sterne{color:#f4971a;color:var(--gold-text);font-size:.85rem;letter-spacing:.05em}
.google-wertung__zahl{color:rgba(255,255,255,.85);font-size:.92rem;font-weight:600}
.google-wertung:hover .google-wertung__zahl{color:#fff}
.google-wertung__kategorie{display:block;font-size:.82rem;color:rgba(255,255,255,.55)}

/* ==========================================================================
   KUNDENBEWERTUNGEN - Laufband aus weissen Karten
   ========================================================================== */
.bewertungen{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3rem,#000 calc(100% - 3rem),transparent);mask-image:linear-gradient(90deg,transparent,#000 3rem,#000 calc(100% - 3rem),transparent)}
.bewertungen__spur{display:flex;gap:1.2rem;width:max-content;animation:bewertungen-lauf 55s linear infinite}
.bewertungen:hover .bewertungen__spur{animation-play-state:paused}
@keyframes bewertungen-lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bewertung{flex:none;width:19rem;background:#fff;border:1px solid var(--linie);border-radius:4px;padding:1.3rem 1.4rem;box-shadow:0 14px 34px -14px rgba(0,0,0,.25)}
.bewertung__sterne{display:block;color:#f4971a;color:var(--gold-text);font-size:1.05rem;letter-spacing:.1em;margin-bottom:.6rem}
.bewertung .bewertung__text{margin:0 0 .8rem;font-size:.95rem;line-height:1.5;color:#16202e;color:var(--text)}
.bewertung .bewertung__quelle{margin:0;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:#56637a;color:var(--text-leise)}
@media (prefers-reduced-motion:reduce){.bewertungen__spur{animation:none;overflow-x:auto}}
@media (max-width:640px){
  /* v85: Bewertungskarten laufen auch mobil weiter */
  .bewertungen{-webkit-mask-image:linear-gradient(90deg,transparent,#000 1.2rem,#000 calc(100% - 1.2rem),transparent);mask-image:linear-gradient(90deg,transparent,#000 1.2rem,#000 calc(100% - 1.2rem),transparent);touch-action:pan-y}
  .bewertungen .bewertungen__spur{gap:.9rem;overflow:visible}
  .bewertungen .bewertung{width:min(80vw,18rem);padding:1.1rem 1.15rem}
  .bewertungen .bewertung .bewertung__text{font-size:.92rem}
}

/* v84: Bildreihe fuer Suritec-Unterseiten (natuerliches Seitenverhaeltnis, kein Zuschnitt) */
.bildreihe{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-top:2.2rem;align-items:center}
@media (min-width:600px){.bildreihe{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.bildreihe.bildreihe--3{grid-template-columns:repeat(3,1fr)}.bildreihe.bildreihe--4{grid-template-columns:repeat(4,1fr)}}
.bildreihe .bildreihe__bild{margin:0}
.bildreihe .bildreihe__bild img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--linie);box-shadow:0 0 0 1px rgba(255,106,26,.1),0 16px 40px -14px rgba(0,0,0,.35),0 0 38px -12px rgba(244,151,26,.28)}
.abschnitt--nacht .bildreihe .bildreihe__bild img{border-color:rgba(255,106,26,.3);box-shadow:0 0 0 1px rgba(255,106,26,.12),0 18px 44px -12px rgba(0,0,0,.7),0 0 46px -10px rgba(244,151,26,.32)}

/* ==========================================================================
   v85: MOBIL - Messetermine als Karten, kein seitliches Verschieben
   ========================================================================== */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}

@media (max-width:760px){
  .tabelle-rahmen{overflow-x:visible;border:0;background:none;border-radius:0}
  .tabelle-rahmen::after{display:none}
  table.termine{min-width:0;width:100%;display:block;border-collapse:separate}
  table.termine caption{display:block;width:100%;padding:0 0 .9rem;border-bottom:0;font-size:.92rem}
  table.termine thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  table.termine tbody{display:grid;gap:.7rem}
  table.termine tbody tr{display:block;background:#fff;border:1px solid var(--linie);border-left:3px solid var(--gold);border-radius:4px;padding:.85rem 1rem;box-shadow:0 10px 26px -18px rgba(11,32,57,.45)}
  table.termine tbody tr:nth-child(even){background:#fff}
  table.termine tbody tr.vergangen{border-left-color:var(--linie);background:#fafbfd}
  table.termine tbody td{display:block;padding:0;border-top:0;white-space:normal}
  table.termine tbody td.datum{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:.02em;color:var(--blau-700);white-space:normal;margin-bottom:.15rem}
  table.termine tbody tr.vergangen td.datum{color:var(--text-leise)}
  table.termine tbody td.messe{font-size:1.08rem;font-weight:700;line-height:1.3;color:var(--blau-900)}
  table.termine tbody td.messe .marker{margin-left:.45rem;vertical-align:middle}
  table.termine tbody td.messe + td{margin-top:.25rem;font-size:.93rem;color:var(--text-leise)}
}

/* v88: Stimmen-Karten auf hellem Grund lesbar (Grundform ist fuer dunkle Abschnitte gebaut) */
.abschnitt:not(.abschnitt--nacht):not(.abschnitt--schwarz) .stimmen .stimme{background:#fff;border:1px solid var(--linie);border-top:3px solid var(--gold);box-shadow:0 14px 34px -20px rgba(11,32,57,.35)}
.abschnitt:not(.abschnitt--nacht):not(.abschnitt--schwarz) .stimmen .stimme:hover{background:#fff;border-color:var(--gold);box-shadow:0 18px 40px -18px rgba(11,32,57,.45)}
.abschnitt:not(.abschnitt--nacht):not(.abschnitt--schwarz) .stimmen .stimme .stimme__name{color:var(--blau-900)}
.abschnitt:not(.abschnitt--nacht):not(.abschnitt--schwarz) .stimmen .stimme .stimme__text{color:var(--text)}
.abschnitt:not(.abschnitt--nacht):not(.abschnitt--schwarz) .stimmen .stimme .stimme__quelle{color:var(--text-leise)}

/* v90: Bild ohne Rahmen, Raender laufen weich in den Seitenhintergrund aus */
.duo__bild.duo__bild--weich img{border:0;border-radius:0;box-shadow:none;background:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 11%,#000 95%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 84%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 11%,#000 95%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.abschnitt--nacht .duo__bild.duo__bild--weich img,.abschnitt--schwarz .duo__bild.duo__bild--weich img{border:0;box-shadow:none}

/* ==========================================================================
   v99: WEITERE KUNDENANLAGEN - Reiter zum Aufklappen unter der Galerie
   Der Reiter ist ein <summary>, klappt also auch ohne JavaScript auf.
   Bilder im zugeklappten Zustand werden vom Browser gar nicht erst geladen.
   ========================================================================== */
.mehranlagen{margin-top:1.4rem}
.mehranlagen .mehranlagen__reiter{display:inline-flex;align-items:center;gap:.7rem;cursor:pointer;list-style:none;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:#ff6a1a;background:var(--orange);border-radius:12px;padding:.85rem 1.5rem;
  box-shadow:0 0 0 1px rgba(255,106,26,.2),0 14px 34px -18px rgba(11,32,57,.45),0 0 34px -12px rgba(255,106,26,.45)}
.mehranlagen .mehranlagen__reiter::-webkit-details-marker{display:none}
.mehranlagen .mehranlagen__reiter::after{content:"";width:.55rem;height:.55rem;flex:none;margin-top:-.3rem;
  border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg)}
.mehranlagen[open] .mehranlagen__reiter::after{margin-top:.2rem;transform:rotate(-135deg)}
.mehranlagen .mehranlagen__reiter:hover{background:var(--orange-dunkel)}
.mehranlagen .mehranlagen__reiter:focus-visible{outline:3px solid rgba(255,106,26,.45);outline-offset:3px}
.mehranlagen .mehranlagen__galerie{margin-top:1.2rem}
.mehranlagen__zahl{font-weight:600;opacity:.85}

/* v100: Breitformat-Galerie - fuenf Bilder je Reihe auf dem Desktop.
   v101: als Flexbox statt Raster, damit eine angebrochene letzte Reihe
   mittig steht und rechts keine Luecke klafft. */
.galerie.galerie--breit{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem}
.galerie.galerie--breit>*{flex:0 1 calc(50% - .45rem)}
@media (min-width:660px){.galerie.galerie--breit>*{flex-basis:calc(33.333% - .6rem)}}
@media (min-width:1040px){.galerie.galerie--breit>*{flex-basis:calc(20% - .72rem)}}
.galerie.galerie--breit .galerie__bild img{aspect-ratio:3/2}

/* ==========================================================================
   v103: LEUCHTEN HINTER DEN GALERIEBILDERN
   Nur fuer die beiden Anlagen-Galerien: "Neu ersetzt Alt" (--breit) und
   die Kundenanlagen auf ueber-uns (--klein). Die uebrigen Galerien
   (Kamera, Gewerbe, Tuerklingel) bleiben ruhig.
   Zwei Klassen im Selektor, damit die Regel die Grundregel .galerie__bild
   sicher schlaegt - der wiederkehrende Fehlertyp in diesem Projekt.
   ========================================================================== */
.galerie.galerie--breit .galerie__bild,
.galerie.galerie--klein .galerie__bild{
  box-shadow:0 0 0 1px rgba(255,106,26,.12),
             0 14px 34px -16px rgba(11,32,57,.4),
             0 0 30px -10px rgba(255,106,26,.32)}
.abschnitt--nacht .galerie.galerie--breit .galerie__bild,
.abschnitt--nacht .galerie.galerie--klein .galerie__bild,
.abschnitt--schwarz .galerie.galerie--breit .galerie__bild,
.abschnitt--schwarz .galerie.galerie--klein .galerie__bild{
  border-color:rgba(255,106,26,.3);
  box-shadow:0 0 0 1px rgba(255,106,26,.14),
             0 16px 38px -14px rgba(0,0,0,.7),
             0 0 38px -8px rgba(255,106,26,.35)}