/* =========================================================================
   PSW Kulturwerbung — style.css
   Visuell an der Originalseite orientiert: weiße Grundfläche, Hellgrau-
   Wechselsektionen (#F2F2F2), weiches Navy (#1A2B6D), tiefes Rot (#D41317),
   Spinnaker-Überschriften (groß, schlicht), Arial/Helvetica für den Rest,
   durchgehend normale Schreibweise, runde schlichte Fotos.
   ========================================================================= */

/* ---------- 1 · Tokens ---------- */
:root{
  --c-white:#FFFFFF; --c-grey:#F2F2F2; --c-navy:#1A2B6D; --c-navy-deep:#132155;
  --c-red:#D41317; --c-red-deep:#B00E12; --c-green:#147A3D;
  --c-ink:#1B1B1B; --c-muted:#5A6072; --c-line:#E3E4E8;

  --bg-page:var(--c-white); --bg-alt:var(--c-grey);
  --text-head:var(--c-navy); --text-primary:var(--c-ink); --text-muted:var(--c-muted);
  --accent:var(--c-red); --accent-ink:var(--c-red-deep);
  --focus-ring:var(--c-navy);

  --font-head:"Spinnaker","Trebuchet MS",Verdana,sans-serif;
  --font-body:Arial,Helvetica,"Segoe UI",sans-serif;
  --font-mono:"Courier New",Courier,ui-monospace,monospace;

  --fs-h1:clamp(2.4rem,5.5vw,4rem);
  --fs-h2:clamp(1.9rem,4vw,3rem);
  --fs-lead:clamp(1.1rem,1.7vw,1.3rem);
  --fs-body:1.0625rem; --fs-small:.95rem;

  --gutter:clamp(1.25rem,4vw,3rem);
  --section-y:clamp(3.5rem,8vw,6rem);
  --maxw:1180px;

  --r-card:14px; --r-img:14px; --r-btn:3px; --r-inset:8px;
  --shadow-card:0 8px 26px rgba(26,43,109,.10);
  --shadow-soft:0 4px 14px rgba(26,43,109,.08);
  --header-h:64px;

  /* Bewegung: eine Rhythmus-Quelle für die ganze Seite.
     Dauern nach Gewicht des Elements – je größer die Fläche, desto länger.
     Kurven kräftiger als die CSS-Standardwerte: Eintritte starten sofort
     (ease-out), Bewegungen auf dem Schirm beschleunigen und bremsen. */
  --dur-press:120ms;   /* Tastendruck */
  --dur-fast:160ms;    /* Hover, Farbwechsel, kleine Zustände */
  --dur-base:220ms;    /* Panels, Chips, Aufklappen */
  --dur-slow:300ms;    /* Off-Canvas, Bottom-Sheet */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
}

/* Zeigegeräte ohne Hover (Touch) lösen :hover beim Antippen aus und lassen den
   Zustand hängen. Alles, was sich bei Hover bewegt, steht deshalb in
   @media (hover:hover) – siehe die Regeln weiter unten. */

/* ---------- 2 · Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
/* Das hidden-Attribut wirkt nur ueber die Browser-Standardregel [hidden]{display:none}.
   Jede Autoren-Regel mit display schlaegt sie (Autoren-Ursprung > Browser-Ursprung).
   Diese Zeile macht hidden verbindlich - fuer .offcanvas, .vk-backdrop, .mt-panel,
   .vk-consent, .vk-search-hint und alles, was kuenftig el.hidden nutzt.
   Das !important ist tragend: [hidden] hat dieselbe Spezifitaet wie .vk-backdrop
   und wuerde ohne !important allein ueber die Quellreihenfolge verlieren. */
[hidden]{display:none !important}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px)}
body{margin:0; background:var(--bg-page); color:var(--text-primary); font-family:var(--font-body); font-size:var(--fs-body); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,svg,picture{max-width:100%; display:block}
img{height:auto}
a{color:var(--accent-ink); text-underline-offset:2px}
a:hover{color:var(--c-red)}
h1,h2{font-family:var(--font-head); font-weight:400; color:var(--text-head); line-height:1.1; margin:0}
h3,h4{font-family:var(--font-body); font-weight:700; color:var(--text-head); line-height:1.25; margin:0}
p{margin:0 0 1rem}
ul,ol{margin:0; padding:0}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.skip-link{position:absolute; left:12px; top:-60px; z-index:100; background:var(--c-navy); color:#fff; padding:.6rem 1rem; border-radius:0 0 var(--r-inset) var(--r-inset); font-weight:700; transition:top var(--dur-fast)}
.skip-link:focus{top:0}
:focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:2px}
/* Header, Off-Canvas und Footer stehen selbst auf Navy – dort wäre der navyfarbene
   Ring unsichtbar (Kontrast 1:1). Auf diesen Flächen wird in Weiß gezeichnet. */
.site-header,.offcanvas-panel,.site-footer,.skip-link{--focus-ring:#fff}
/* WordPress schiebt bei angemeldeten Redakteuren die Adminleiste über die Seite.
   Ohne diese Zeilen verschwindet der Sticky-Header darunter. Im statischen
   Betrieb greift die Regel nie – body.admin-bar gibt es dort nicht. */
body.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){body.admin-bar .site-header{top:46px}}

/* ---------- 3 · Buttons (rote Rechtecke wie im Original) ---------- */
.btn{display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font-family:var(--font-body); font-weight:700; font-size:.98rem; line-height:1; padding:.8rem 1.4rem; border-radius:var(--r-btn); text-decoration:none; border:2px solid transparent;
  transition:background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-press) var(--ease-out)}
/* Druckpunkt: die Fläche gibt spürbar nach. Kein Layout-Sprung, nur transform. */
.btn:active{transform:scale(.97)}
.btn-lg{padding:.95rem 1.7rem; font-size:1.02rem}
.btn-solid{background:var(--c-red); color:#fff; border-color:var(--c-red)}
.btn-ghost{background:transparent; color:var(--c-navy); border-color:var(--c-navy)}
.btn-download{background:#fff; color:var(--c-navy); border-color:var(--c-line); font-weight:700; box-shadow:var(--shadow-soft)}
.btn-download .sub{font-weight:400; font-size:.82em; color:var(--text-muted)}
/* Der Pfeil im Button rückt beim Zeigen ein Stück mit – der Weg wird angedeutet. */
.btn > span[aria-hidden]{transition:transform var(--dur-fast) var(--ease-out)}

/* Button im Wartezustand: nicht mehr auslösbar, sichtbar beschäftigt */
.btn[aria-busy="true"]{cursor:progress; opacity:.72}
.btn[aria-busy="true"]:active{transform:none}

/* Reine Farbwechsel dürfen überall greifen – sie hängen auf Touch nicht störend nach. */
.btn-solid:hover{background:var(--c-red-deep); border-color:var(--c-red-deep); color:#fff}
.btn-ghost:hover{background:var(--c-navy); color:#fff}
.btn-download:hover{border-color:var(--c-red); color:var(--c-red-deep)}
@media (hover:hover) and (pointer:fine){
  .btn:hover > span[aria-hidden]{transform:translateX(3px)}
}

/* ---------- 4 · Header / Navigation ---------- */
.site-header{position:sticky; top:0; z-index:40; background:var(--c-navy); color:#fff}
.header-inner{display:flex; align-items:center; gap:1.25rem; min-height:var(--header-h); padding-block:.5rem}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:#fff; flex:0 0 auto}
.brand-logo{width:40px; height:40px; background:#fff; border-radius:8px; padding:3px}
.brand-name{font-family:var(--font-body); font-weight:700; letter-spacing:.01em; font-size:1rem; color:#fff}
.mainnav{flex:1 1 auto}
.mainnav ul{display:flex; gap:clamp(.6rem,1.5vw,1.6rem); list-style:none; justify-content:center; flex-wrap:wrap}
.nav-link{font-family:var(--font-body); font-weight:700; font-size:.95rem; color:#D5D8EA; text-decoration:none; padding:.35rem .1rem; border-bottom:2px solid transparent; transition:color var(--dur-fast), border-color var(--dur-fast)}
.nav-link:hover{color:#fff}
.nav-link.is-active{color:#fff; border-bottom-color:var(--c-red)}
.header-cta{display:flex; align-items:center; gap:1rem; flex:0 0 auto}
.tel-link{font-family:var(--font-body); font-weight:700; font-size:.95rem; color:#fff; text-decoration:none; white-space:nowrap}
.tel-link:hover{color:#fff; text-decoration:underline}
.menu-toggle{display:none}

.offcanvas{position:fixed; inset:0; z-index:60}
.offcanvas::before{content:""; position:absolute; inset:0; background:rgba(10,15,45,.55)}
.offcanvas::before{opacity:0; transition:opacity var(--dur-slow) var(--ease-out)}
.offcanvas.is-open::before{opacity:1}
.offcanvas-panel{position:absolute; right:0; top:0; height:100%; width:min(86vw,340px); background:var(--c-navy); color:#fff; padding:1.25rem 1.25rem 2rem; overflow-y:auto; transform:translateX(100%); transition:transform var(--dur-slow) var(--ease-out); box-shadow:-8px 0 30px rgba(0,0,0,.3)}
.offcanvas.is-open .offcanvas-panel{transform:translateX(0)}
.offcanvas-close{position:absolute; right:1rem; top:.75rem; background:none; border:none; color:#fff; font-size:1.9rem; line-height:1; cursor:pointer; padding:.2rem .5rem}
/* Das × ist optisch klein – der Tastbereich reicht unsichtbar auf 44 px hinaus. */
.offcanvas-close::after{content:""; position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%,-50%)}
.offcanvas-cta{display:flex; flex-direction:column; gap:.7rem; margin:2rem 0 1.5rem}
.offcanvas-cta .tel-link{font-size:1.05rem}
.offcanvas nav ul{list-style:none}
.offcanvas nav a{display:flex; flex-direction:column; gap:.1rem; padding:.8rem .2rem; text-decoration:none; border-top:1px solid rgba(255,255,255,.14); color:#fff}
.oc-name{font-family:var(--font-body); font-weight:700; font-size:1.1rem}
.offcanvas nav a.is-active .oc-name{color:#fff}
.offcanvas nav a.is-active .oc-name::before{content:"› "; color:var(--c-red)}
.oc-desc{font-size:.82rem; color:#AEB2D0}

/* ---------- 5 · Hero (Vollflächen-Slider mit Overlay) ---------- */
/* svh statt vh: auf dem Handy zählt die kleinste Ansicht (mit sichtbarer Adressleiste),
   sonst ragt der Hero beim Laden unter die Browserleiste. Die vh-Zeile bleibt als
   Rückfallebene für ältere Browser stehen. */
.hero{position:relative; isolation:isolate; display:flex; align-items:center;
  min-height:clamp(500px,80vh,760px); min-height:clamp(500px,80svh,760px);
  padding-top:clamp(2.75rem,7vw,5rem); padding-bottom:clamp(2.75rem,7vw,5rem);
  color:#fff; overflow:hidden; background:var(--c-navy-deep)}

/* Slider-Flächen (crossfade) */
.hero-slider{position:absolute; inset:0; z-index:-2}
.hero-slide{position:absolute; inset:0; opacity:0; transition:opacity 1s var(--ease-out)}
.hero-slide.is-active{opacity:1}
.hero-slide picture{position:absolute; inset:0; display:block}
.hero-slide img{width:100%; height:100%; object-fit:cover; object-position:center}
/* dezenter Ken-Burns-Zoom auf dem aktiven Bild */
.hero-slide.is-active img{animation:heroZoom 9s var(--ease-out) forwards}
@keyframes heroZoom{from{transform:scale(1.07)} to{transform:scale(1)}}

/* Farbschleier für Lesbarkeit: navy, links kräftig -> rechts offen, unten dunkler */
.hero-scrim{position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(19,33,85,.90) 0%, rgba(19,33,85,.66) 42%, rgba(19,33,85,.20) 100%),
    linear-gradient(0deg, rgba(9,15,40,.72) 0%, rgba(9,15,40,0) 46%)}

.hero-inner{position:relative; width:100%}
.hero-text{max-width:700px}
.hero-kicker{font-family:var(--font-body); font-weight:700; font-size:.82rem;
  letter-spacing:.02em; color:#fff; margin:0 0 1rem; display:inline-flex; align-items:center; gap:.55rem}
.hero-kicker::before{content:""; width:26px; height:3px; background:var(--c-red); display:inline-block; border-radius:2px}
.hero h1{font-size:clamp(2.05rem,4.5vw,3.3rem); line-height:1.22; letter-spacing:.01em; color:#fff; margin-bottom:1.4rem; text-shadow:0 2px 20px rgba(6,10,30,.45)}
/* Feste Dreizeiligkeit: jede Sinnzeile ist ein eigener Block (bricht auf Mobil bei Bedarf um) */
.hero h1 .h1-l{display:block}
.hero .lead{font-size:var(--fs-lead); color:rgba(255,255,255,.92); max-width:46ch; margin-bottom:1.7rem; text-shadow:0 1px 12px rgba(6,10,30,.4)}
.hero-ctas{display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:1.4rem}
.hero .btn-ghost{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.7)}
.hero .btn-ghost:hover{background:#fff; color:var(--c-navy); border-color:#fff}
.hero .facts{list-style:none; display:flex; flex-wrap:wrap; gap:.8rem clamp(1.1rem,3vw,1.9rem); font-size:.95rem; color:rgba(255,255,255,.8); padding:0; margin:0}
.hero .facts li{display:flex; align-items:baseline; gap:.4rem}
.hero .facts b{color:#fff; font-weight:700; font-size:1.2rem; font-family:var(--font-head)}

/* Steuerung: Bildbeschreibung oben, darunter die Slider-Balken – als Cluster rechts, links bleibt Platz */
.hero-controls{position:absolute; left:0; right:0; bottom:clamp(1rem,3vw,1.75rem); z-index:2}
.hero-controls-inner{display:flex; flex-direction:column; align-items:flex-end; gap:.55rem}
.hero-dots{display:flex; gap:.5rem}
/* Die Punkte sind flach – der Tastbereich reicht über die sichtbare Fläche hinaus,
   damit sie auf dem Handy auch wirklich zu treffen sind. */
.hero-dot{position:relative; width:34px; height:5px; padding:0; border:none; border-radius:3px; cursor:pointer;
  background:rgba(255,255,255,.38);
  transition:background var(--dur-fast), transform var(--dur-fast) var(--ease-out)}
.hero-dot::after{content:""; position:absolute; left:0; right:0; top:-14px; bottom:-14px}
.hero-dot.is-active{background:var(--c-red); transform:scaleY(1.6)}
@media (hover:hover) and (pointer:fine){
  .hero-dot:hover{background:rgba(255,255,255,.75)}
  .hero-dot.is-active:hover{background:var(--c-red)}
}
.hero-caption{font-family:var(--font-body); font-size:.8rem; color:rgba(255,255,255,.9); margin:0;
  background:rgba(9,15,40,.4); padding:.32rem .8rem; border-radius:100px; backdrop-filter:blur(4px)}

/* Pfeile (Desktop) */
.hero-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(9,15,40,.35); color:#fff; border:1px solid rgba(255,255,255,.3);
  font-size:1.7rem; line-height:1; padding-bottom:.15rem; backdrop-filter:blur(4px);
  transition:background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-press) var(--ease-out)}
.hero-arrow:active{transform:translateY(-50%) scale(.93)}
@media (hover:hover) and (pointer:fine){
  .hero-arrow:hover{background:rgba(9,15,40,.7); border-color:rgba(255,255,255,.55)}
}
.hero-prev{left:clamp(.5rem,2vw,1.25rem)}
.hero-next{right:clamp(.5rem,2vw,1.25rem)}
/* Pfeile nur zeigen, wenn der zentrierte Inhalt sie nicht überlappt (breite Desktops) */
@media (max-width:1219px){.hero-arrow{display:none}}

/* Play/Pause-Umschalter (WCAG 2.2.2) neben den Dots */
.hero-playdots{display:flex; align-items:center; gap:.7rem}
.hero-play{position:relative; width:30px; height:30px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; padding:0; border-radius:50%; cursor:pointer; color:#fff; background:rgba(9,15,40,.4); border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(4px);
  transition:background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-press) var(--ease-out)}
/* 30px sind für den Finger zu klein – Tastbereich unsichtbar auf 44px erweitern */
.hero-play::after{content:""; position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%,-50%)}
.hero-play:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){
  .hero-play:hover{background:rgba(9,15,40,.7); border-color:rgba(255,255,255,.6)}
}
.hero-play svg{fill:currentColor; display:block}
.hero-play .ico-play{display:none}
.hero-play.is-paused .ico-pause{display:none}
.hero-play.is-paused .ico-play{display:block}

/* Sichtbarer Fokus-Ring für die Slider-Steuerung auf dunklem Hero */
.hero-dot:focus-visible,.hero-arrow:focus-visible,.hero-play:focus-visible{outline:2px solid #fff; outline-offset:3px}

/* Fotos woanders: groß, rund, schlicht (kein Museums-Rahmen).
   margin:0 setzt den Browser-Standard von <figure> zurück (1em 40px) – sonst
   rückt jedes Bild seitlich ein und passt auf schmalen Schirmen nicht mehr ins Raster. */
.framed{margin:0; background:transparent; padding:0; border-radius:var(--r-img); overflow:hidden; box-shadow:var(--shadow-card)}
.framed img{border-radius:var(--r-img); width:100%}
.plaque{font-family:var(--font-body); font-size:.82rem; color:var(--text-muted)}
/* Technische Auszeichnung (Kennnummern, Meta-Zeilen) – Schreibmaschinen-Anmutung
   wie am Leitsystem, mit tabellarischen Ziffern gegen Zahlensprünge. */
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:.01em}

/* ---------- 6 · Sections & Überschriften (schlicht, kein Kicker/Unterstrich) ---------- */
.section{padding-block:var(--section-y)}
.section-alt{background:var(--bg-alt)}
.plakett{margin-bottom:clamp(1.5rem,3vw,2.5rem); max-width:62ch}
.plakett h2{font-size:var(--fs-h2)}
.kicker{display:none}
.section-intro{font-size:var(--fs-lead); color:var(--text-primary); margin-top:.9rem; max-width:58ch}

/* ---------- 6b · Bewegung: Sanftes Einblenden beim Scrollen ----------
   Aktiv nur, wenn main.js die Klasse .reveal-enabled setzt -> ohne JS bleibt alles sichtbar. */
/* Zurückhaltend: 14px Weg statt 28, kürzere Dauer. Ein Einblenden soll auffallen,
   solange man es nicht bewusst bemerkt – sichtbar wandernde Blöcke lenken ab. */
.reveal-enabled .reveal{opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out)}
.reveal-enabled .reveal.is-visible{opacity:1; transform:none}
/* Karten-Sektion nur sanft einblenden (kein Transform) – ein transformierter Vorfahre
   würde sonst das mobile Karten-Panel (position:fixed) aus der Verankerung reißen. */
.reveal-enabled .netboard.reveal{transform:none}

/* ---------- 7 · Angebot: Medien (Accordion) + Verteilgebiet ----------
   Drei Leistungs-Karten untereinander; ein Klick klappt den Inhalt direkt
   unter der jeweiligen Karte auf. Karte und Panel bilden dann optisch einen
   Block: gemeinsame Kennfarben-Kontur, durchgehende Kante links, keine Fuge.
   Jede Leistung trägt ihre Kennfarbe als --mc (plus abgestufte Flächen- und
   Linien-Töne), die Karte, Illustration, Chips und Panel gemeinsam einfärbt. */
.media-flyer  {--mc:var(--c-red);   --mc-tint:rgba(212,19,23,.08); --mc-tint-2:rgba(212,19,23,.16); --mc-line:rgba(212,19,23,.26)}
.media-plakat {--mc:var(--c-navy);  --mc-tint:rgba(26,43,109,.08); --mc-tint-2:rgba(26,43,109,.16); --mc-line:rgba(26,43,109,.26)}
.media-magazin{--mc:var(--c-green); --mc-tint:rgba(20,122,61,.08); --mc-tint-2:rgba(20,122,61,.16); --mc-line:rgba(20,122,61,.26)}

/* Kein flex-gap: die Lücke setzt jede Karte selbst als margin-top, damit das
   geöffnete Panel fugenlos an seiner Karte hängt. */
.media-tabs{display:flex; flex-direction:column; gap:0; margin-bottom:clamp(2rem,5vw,3.5rem)}

/* Leistungs-Karte: Illustration links, Text mittig, Auf-/Zu-Hinweis rechts */
.mt-tab{position:relative; display:flex; align-items:center; gap:.85rem; width:100%; margin-top:.7rem;
  text-align:left; cursor:pointer; background:#fff; border:1px solid var(--c-line);
  border-radius:var(--r-card); padding:.7rem .85rem; font-family:var(--font-body); color:var(--c-navy);
  box-shadow:var(--shadow-soft);
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-press) var(--ease-out)}
.mt-tab:first-child{margin-top:0}
/* Kennfarben-Kante links – läuft im geöffneten Zustand über das Panel weiter */
.mt-tab::before{content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:4px;
  background:var(--mc); border-radius:var(--r-card) 0 0 var(--r-card);
  opacity:0; transition:opacity var(--dur-fast)}

.mt-stage{position:relative; flex:0 0 auto; width:84px; height:70px; display:flex; align-items:center;
  justify-content:center; background:var(--mc-tint); border-radius:10px; overflow:hidden;
  transition:background var(--dur-fast)}
.mt-stage::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(115% 80% at 50% 0%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%)}
.mt-art{position:relative; z-index:1; width:auto; height:50px; color:var(--mc);
  transition:transform var(--dur-base) var(--ease-out)}
.mt-no{display:none; position:absolute; left:.55rem; top:.4rem; z-index:2; font-weight:700; font-size:.72rem;
  letter-spacing:.06em; font-variant-numeric:tabular-nums; color:var(--mc); opacity:.5}

.mt-copy{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:.15rem}
.mt-label{font-weight:700; font-size:1.08rem; line-height:1.2; color:var(--c-navy)}
.mt-teaser{font-weight:400; font-size:.86rem; line-height:1.4; color:var(--text-muted); max-width:64ch}
.mt-metric{display:inline-flex; align-items:center; gap:.42rem; margin-top:.32rem; padding:.2rem .62rem;
  font-weight:400; font-size:.78rem; line-height:1.35; color:var(--text-muted);
  background:var(--mc-tint); border:1px solid var(--mc-line); border-radius:100px}
.mt-metric::before{content:""; flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:var(--mc)}
.mt-metric b{font-weight:700; color:var(--mc)}

.mt-more{flex:0 0 auto; margin-left:.4rem; display:inline-flex; align-items:center; gap:.45rem;
  font-weight:700; font-size:.85rem; color:var(--text-muted); transition:color var(--dur-fast)}
.mt-more-t{display:none}
.mm-b{display:none}
.mt-arrow{width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform var(--dur-fast)}

.mt-tab:active{transform:scale(.995)}
@media (hover:hover) and (pointer:fine){
  .mt-tab:hover{border-color:var(--mc); box-shadow:var(--shadow-card)}
  .mt-tab:hover .mt-more{color:var(--mc)}
  .mt-tab:hover .mt-stage{background:var(--mc-tint-2)}
  .mt-tab:hover .mt-art{transform:scale(1.04)}
}
/* Geöffnet: Karte verliert die untere Kante und geht in ihr Panel über */
.mt-tab[aria-expanded="true"]{border-color:var(--mc); border-bottom-color:transparent;
  border-radius:var(--r-card) var(--r-card) 0 0; box-shadow:none}
.mt-tab[aria-expanded="true"]::before{opacity:1; border-radius:var(--r-card) 0 0 0}
.mt-tab[aria-expanded="true"] .mt-stage{background:var(--mc-tint-2)}
.mt-tab[aria-expanded="true"] .mt-no{opacity:.85}
.mt-tab[aria-expanded="true"] .mt-more{color:var(--mc)}
.mt-tab[aria-expanded="true"] .mt-arrow{transform:rotate(-135deg)}
.mt-tab[aria-expanded="true"] .mm-a{display:none}
.mt-tab[aria-expanded="true"] .mm-b{display:inline}

/* Panel sitzt fugenlos unter seiner Karte und schließt den Block ab.
   Beim Aufklappen fährt der Inhalt kurz aus der Karte heraus, statt zu springen –
   das verknüpft Kopf und Inhalt sichtbar miteinander. */
.mt-panel{position:relative; background:#fff; border:1px solid var(--mc); border-top:0;
  border-radius:0 0 var(--r-card) var(--r-card); padding:clamp(1.2rem,3vw,2rem);
  box-shadow:0 10px 24px -6px rgba(26,43,109,.16);
  animation:mtPanelIn var(--dur-base) var(--ease-out) both}
@keyframes mtPanelIn{
  from{opacity:0; transform:translateY(-8px)}
  to  {opacity:1; transform:none}
}
/* Die Inhaltsspalten kommen minimal versetzt nach – Kopf zuerst, Details danach. */
.mt-panel .panel-body{animation:mtPanelIn var(--dur-base) 60ms var(--ease-out) both}
.mt-panel .framed-thumb,
.mt-panel .din-staffel{animation:mtPanelIn var(--dur-base) 110ms var(--ease-out) both}
.mt-panel::before{content:""; position:absolute; left:-1px; top:0; bottom:-1px; width:4px;
  background:var(--mc); border-radius:0 0 0 var(--r-card)}
.mt-panel[hidden]{display:none}
.panel-grid{display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(1.2rem,3vw,2.2rem); align-items:start}
.panel-body h3{font-size:1.35rem; color:var(--c-navy); margin-bottom:.6rem}
.panel-body p{color:var(--text-primary)}
/* Leistungsmerkmale als Chips – gibt dem Panel auf einen Blick Struktur */
.panel-feats{list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; margin:0 0 1.1rem; padding:0}
.panel-feats li{display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.84rem;
  line-height:1.3; color:var(--c-navy); background:var(--mc-tint); border:1px solid var(--mc-line);
  border-radius:100px; padding:.3rem .75rem}
.panel-feats li::before{content:""; flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:var(--mc)}
.mono-tag{font-family:var(--font-body); font-weight:700; font-size:.82rem; color:var(--c-red-deep); margin-right:.3rem}
.price-line{margin-top:1.2rem}
.price-note{color:var(--text-muted); font-size:var(--fs-small)}
.downloads{display:flex; flex-wrap:wrap; gap:.6rem; margin:.4rem 0 1rem}
.framed-thumb img{aspect-ratio:4/3; object-fit:cover}
.framed-thumb figcaption{margin-top:.4rem}
.din-staffel{color:var(--mc)}
.din-staffel .mono-tag{color:var(--c-navy); display:block; margin-bottom:.4rem}
.din-t{font-family:var(--font-body); font-size:9px; fill:var(--c-navy)}

/* Verteilgebiet: Tafel mit interaktiver Karte */
.netboard{background:var(--c-grey); border-radius:var(--r-card); padding:clamp(1.5rem,3.5vw,2.5rem)}
.netboard .board-kicker{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-body); font-weight:700; font-size:.82rem; letter-spacing:.02em; color:var(--c-red-deep); margin:0 0 .55rem}
.netboard .board-kicker::before{content:""; width:22px; height:3px; background:var(--c-red); border-radius:2px}
.netboard-title{font-family:var(--font-head); font-weight:400; color:var(--c-navy); font-size:clamp(1.5rem,2.8vw,2.1rem); line-height:1.15; margin:0 0 1.6rem}

.cta-band{display:flex; justify-content:center; margin-top:clamp(2rem,5vw,3.5rem)}

/* ---------- 7b · Verteilkarte (Leaflet) ---------- */
.vk{margin-top:1.6rem}
.vk-controls{display:flex; flex-wrap:wrap; gap:1rem 1.5rem; align-items:flex-end; margin-bottom:1rem}
.vk-search{flex:1 1 260px; min-width:220px}
.vk-search-label{display:block; font-family:var(--font-body); font-weight:700; font-size:.82rem; color:var(--c-navy); margin-bottom:.3rem}
.vk-search-field{position:relative}
.vk-search-ico{position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:1.1rem; pointer-events:none}
.vk-search-input{width:100%; font-family:var(--font-body); font-size:1rem; color:var(--text-primary); background:#fff; border:1px solid #C9CBD4; border-radius:var(--r-inset); padding:.6rem .8rem .6rem 2.1rem; transition:border-color var(--dur-fast), box-shadow var(--dur-fast)}
.vk-search-input:focus{outline:none; border-color:var(--c-navy); box-shadow:0 0 0 2px rgba(26,43,109,.18)}
.vk-search-hint{margin:.5rem 0 0; font-size:.85rem; color:var(--c-red-deep)}
.vk-search-hint a{font-weight:700}
.vk-filters{display:flex; flex-wrap:wrap; gap:.4rem}
.vk-chip{font-family:var(--font-body); font-weight:700; font-size:.85rem; color:var(--c-navy); background:#fff; border:1px solid var(--c-line); border-radius:100px; padding:.4rem .85rem; cursor:pointer;
  transition:background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-press) var(--ease-out)}
.vk-chip:active{transform:scale(.96)}
/* Auf Touch-Geräten muss der Chip sicher zu treffen sein (44px Mindestmaß) */
@media (pointer:coarse){
  .vk-chip{min-height:44px; padding-inline:1rem}
  .vk-filters{gap:.5rem}
}
.vk-chip.is-active{background:var(--c-navy); color:#fff; border-color:var(--c-navy)}
@media (hover:hover) and (pointer:fine){
  .vk-chip:hover{border-color:var(--c-navy)}
  .vk-chip.is-active:hover{background:var(--c-navy-deep); border-color:var(--c-navy-deep)}
}

.vk-stage{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:1rem; align-items:stretch}
/* isolation: Leaflet vergibt intern z-index 400 (Kartenebenen) und 1000
   (Bedienelemente). Ohne eigenen Stapelkontext konkurrieren die direkt mit dem
   Sticky-Header (40) und dem Off-Canvas (60) und legen sich darüber. */
.vk-map-wrap{position:relative; isolation:isolate; height:520px; border:1px solid var(--c-line); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-card); background:#EAF0F4}
/* Hinweis: Eingabefelder brauchen mindestens 1rem (16px) – darunter zoomt iOS
   beim Antippen in das Feld hinein. Gilt für .vk-search-input und das Kontaktformular. */
.vk-map{position:absolute; inset:0}

/* Consent-Gate */
.vk-consent{position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; z-index:5}
.vk-consent-preview{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9}
.vk-consent::before{content:""; position:absolute; inset:0; background:rgba(19,33,85,.35)}
.vk-consent-box{position:relative; max-width:330px; margin:1rem; background:rgba(255,255,255,.96); border-radius:var(--r-card); padding:1.4rem 1.3rem; text-align:center; box-shadow:var(--shadow-card)}
.vk-consent-title{font-family:var(--font-head); font-weight:400; color:var(--c-navy); font-size:1.3rem; margin:0 0 .5rem}
.vk-consent-text{font-size:.85rem; color:var(--text-primary); margin:0 0 1rem; line-height:1.5}
.vk-consent-box .btn{width:100%; justify-content:center}

/* Detail-Panel */
.vk-panel{position:relative; background:#fff; border:1px solid var(--c-line); border-radius:var(--r-card); box-shadow:var(--shadow-soft); padding:1.25rem; overflow:auto}
.vk-panel-close{position:absolute; right:.6rem; top:.5rem; background:none; border:none; color:var(--text-muted); font-size:1.6rem; line-height:1; cursor:pointer; padding:.1rem .4rem; display:none}
/* Schließen-Kreuz des Bottom-Sheets: unsichtbar auf 44 px Tastfläche erweitert. */
.vk-panel-close::after{content:""; position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%,-50%)}
.vk-panel-hint{color:var(--text-muted); font-size:.92rem; margin:0}
.vk-panel-kicker{font-family:var(--font-body); font-weight:700; font-size:.78rem; letter-spacing:.02em; color:var(--c-red-deep); margin:0 0 .3rem}
.vk-panel-name{font-family:var(--font-head); font-weight:400; color:var(--c-navy); font-size:1.5rem; line-height:1.15; margin:0 0 .6rem}
.vk-panel-note{font-size:.88rem; color:var(--text-muted); margin:0 0 .8rem}
.vk-panel-sub{font-size:.9rem; font-weight:700; color:var(--c-navy); margin:.4rem 0 .5rem}
.vk-facts{margin:0 0 1rem; display:grid; gap:.5rem}
.vk-fact{display:grid; grid-template-columns:auto; gap:.1rem}
.vk-fact dt{font-family:var(--font-body); font-weight:700; font-size:.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em}
.vk-fact dd{margin:0; font-size:.95rem; color:var(--text-primary)}
.vk-tourlist{list-style:none; display:grid; gap:.4rem; margin:0 0 1rem}
.vk-tourlink{display:block; width:100%; text-align:left; background:var(--c-grey); border:1px solid var(--c-line); border-radius:var(--r-inset); padding:.5rem .65rem; font-family:var(--font-body); font-size:.9rem; font-weight:700; color:var(--c-navy); cursor:pointer; transition:border-color var(--dur-fast), background var(--dur-fast)}
.vk-tourlink:hover{border-color:var(--c-red); background:#fff}
.vk-tourlink-no{color:var(--c-red-deep); font-variant-numeric:tabular-nums; margin-right:.3rem}
.vk-tourlink-note{display:block; font-weight:400; font-size:.78rem; color:var(--text-muted); margin-top:.15rem}
.vk-cta{width:100%; justify-content:center}

.vk-attribution{font-size:.72rem; color:var(--text-muted); margin:.7rem 0 0; line-height:1.5}
.vk-attribution a{color:var(--text-muted); text-decoration:underline}
.vk-attribution a:hover{color:var(--c-navy)}

.vk-backdrop{display:none}

/* Leaflet-Tooltip an CI angleichen */
.leaflet-tooltip.vk-tip{font-family:var(--font-body); font-weight:700; font-size:.8rem; color:var(--c-navy); border:1px solid var(--c-line); border-radius:var(--r-inset); box-shadow:var(--shadow-soft); padding:.25rem .5rem}
.leaflet-container{font-family:var(--font-body)}

/* ---------- 8 · Referenzen ---------- */
.ref-banner{margin:0 0 clamp(2rem,4vw,3rem); border-radius:0; box-shadow:none}
.ref-banner img{aspect-ratio:16/7; object-fit:cover; border-radius:0}
.ref-banner figcaption{margin-top:.6rem; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.ref-group{font-family:var(--font-body); font-weight:700; font-size:1.15rem; color:var(--c-navy); margin:1.9rem 0 1rem}
.ref-group::before{content:""; display:inline-block; width:22px; height:3px; background:var(--c-red); margin-right:.6rem; vertical-align:middle}
.ref-grid{list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem}
.ref-grid-2{grid-template-columns:repeat(2,1fr)}
.ref-grid-1{list-style:none; display:grid; grid-template-columns:1fr; gap:1.1rem}
.ref-card{background:#fff; border:1px solid var(--c-line); border-radius:var(--r-card); padding:1.25rem; display:flex; flex-direction:column; gap:.55rem; box-shadow:var(--shadow-soft); transition:border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .ref-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-card); border-color:var(--c-red)}
  /* Der Link markiert sich mit, wenn die Karte angesteuert wird */
  .ref-card:hover .ref-link{text-decoration:underline}
}
.ref-logo{height:46px; width:auto; object-fit:contain; object-position:left; margin-bottom:.3rem}
.ref-wordmark{font-family:var(--font-head); font-weight:400; font-size:1.35rem; color:var(--c-navy); height:46px; display:flex; align-items:center}
.ref-card h4{font-size:1.02rem; color:var(--c-navy)}
.ref-card p{font-size:var(--fs-small); color:var(--text-primary); margin:0; flex:1 1 auto}
.ref-link{font-family:var(--font-body); font-weight:700; font-size:.85rem; text-decoration:none; color:var(--accent-ink); margin-top:.3rem}
.ref-link:hover{text-decoration:underline}
.ref-two{display:grid; grid-template-columns:2fr 1fr; gap:clamp(1.2rem,3vw,2.5rem); margin-top:.5rem}

/* ---------- 9 · Partner ---------- */
.partner-grid{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.1rem,2.5vw,1.9rem)}
.partner-card{background:#fff; border:1px solid var(--c-line); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-soft); display:flex; flex-direction:column; transition:border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-out)}
.partner-card .framed-partner img,.partner-card .plaque-tile{transition:transform .5s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .partner-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-card); border-color:var(--c-red)}
  .partner-card:hover .framed-partner img{transform:scale(1.04)}
  .partner-card:hover .ref-link{text-decoration:underline}
}
.framed-partner{margin:0; padding:0; border-radius:0; box-shadow:none}
.framed-partner img{aspect-ratio:16/10; object-fit:cover; border-radius:0}
.plaque-tile{aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; background:var(--c-navy)}
.plaque-tile span{font-family:var(--font-head); font-weight:400; color:#fff; font-size:1.5rem}
.plaque-tile .plaque-logo{width:auto; max-width:64%; height:auto; max-height:60%; aspect-ratio:auto; object-fit:contain; border-radius:0}
.partner-card h3{font-size:1.1rem; color:var(--c-navy); margin:1rem 1.25rem .1rem}
.partner-card p{font-size:var(--fs-small); color:var(--text-primary); margin:.2rem 1.25rem; flex:1 1 auto}
.partner-card .ref-link{margin:.2rem 1.25rem 1.25rem}

/* ---------- 10 · Historie ---------- */
.historie-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(1.75rem,4vw,3.5rem); align-items:start}
.historie-intro{position:sticky; top:calc(var(--header-h) + 1.5rem)}
.framed-portrait{margin:1rem 0; max-width:300px}
.framed-portrait img{aspect-ratio:4/5; object-fit:cover}
.historie-lead{font-size:var(--fs-lead); color:var(--text-primary); font-style:italic; max-width:28ch}
.timeline{list-style:none; position:relative; padding-left:2rem}
.timeline::before{content:""; position:absolute; left:6px; top:.5rem; bottom:.5rem; width:2.5px; background:var(--c-red); border-radius:2px}
.tl-item{position:relative; padding:0 0 1.85rem}
.tl-item:last-child{padding-bottom:0}
.tl-marker{position:absolute; left:-2rem; top:.35rem; width:15px; height:15px; border-radius:50%; background:#fff; border:3px solid var(--c-red)}
.tl-year{font-family:var(--font-body); font-weight:700; font-size:.9rem; color:var(--c-red-deep); margin:0 0 .15rem}
.tl-item h3{font-size:1.15rem; color:var(--c-navy); margin-bottom:.35rem}
.tl-item p{font-size:var(--fs-small); color:var(--text-primary); margin:0; max-width:52ch}

/* ---------- 11 · Kontakt ---------- */
.kontakt-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(1.75rem,4vw,3.5rem); align-items:start}
.kontakt-data{display:grid; gap:.15rem .8rem; margin:1rem 0 1.25rem; font-size:.95rem}
.kontakt-data dt{font-family:var(--font-body); font-weight:700; font-size:.85rem; color:var(--c-navy); margin-top:.85rem}
.kontakt-data dd{margin:0; color:var(--text-primary)}
.kontakt-data a{color:var(--accent-ink); text-decoration:none}
.kontakt-data a:hover{text-decoration:underline}
.auskunft-trust{font-size:.88rem; color:var(--text-muted); border-top:1px solid var(--c-line); padding-top:.85rem}

.contact-form{background:#fff; border:1px solid var(--c-line); border-radius:var(--r-card); padding:clamp(1.3rem,3vw,2rem); box-shadow:var(--shadow-soft)}
.field{display:flex; flex-direction:column; gap:.3rem; margin-bottom:1rem}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:0}
.field-row .field{margin-bottom:1rem}
.contact-form label{font-family:var(--font-body); font-weight:700; font-size:.85rem; color:var(--c-navy)}
.contact-form input,.contact-form textarea{font-family:var(--font-body); font-size:1rem; color:var(--text-primary); background:#fff; border:1px solid #C9CBD4; border-radius:var(--r-inset); padding:.65rem .75rem; width:100%; transition:border-color var(--dur-fast), box-shadow var(--dur-fast)}
.contact-form input:focus,.contact-form textarea:focus{outline:none; border-color:var(--c-navy); box-shadow:0 0 0 2px rgba(26,43,109,.18)}
.contact-form textarea{resize:vertical; min-height:130px}
.field-error{color:var(--c-red-deep); font-weight:700; font-size:.82rem; margin:0}
.contact-form [aria-invalid="true"]{border-color:var(--c-red)}
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.field-check{display:grid; grid-template-columns:auto 1fr; gap:.5rem .6rem; align-items:start; margin-bottom:1.3rem}
.field-check input{width:20px; height:20px; margin-top:.15rem; accent-color:var(--c-red)}
.field-check label{font-weight:400; font-size:.92rem; color:var(--text-primary)}
.field-check .field-error{grid-column:1 / -1}
.btn-submit{width:100%; justify-content:center}
.form-status{margin-top:1rem; font-size:.92rem; padding:.75rem .95rem; border-radius:var(--r-inset)}
.form-status.is-ok{background:rgba(20,122,61,.1); color:#0f5a2c; border:1px solid rgba(20,122,61,.4)}
.form-status.is-err{background:rgba(212,19,23,.08); color:var(--c-red-deep); border:1px solid rgba(212,19,23,.4)}

/* ---------- 12 · Footer ---------- */
.site-footer{background:var(--c-navy); color:#fff; padding:2.25rem 0}
.footer-inner{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem}
.footer-brand{display:flex; align-items:center; gap:.5rem; font-family:var(--font-body); font-weight:700; margin:0}
.footer-brand img{background:#fff; border-radius:6px; padding:2px}
.footer-meta{font-size:.82rem; color:#AEB2D0; margin:0; flex:1 1 auto}
.footer-nav{display:flex; gap:1.4rem}
.footer-nav a{font-family:var(--font-body); font-weight:700; font-size:.85rem; color:#fff; text-decoration:none}
.footer-nav a:hover{text-decoration:underline; color:#fff}

/* ---------- 13 · Responsive ---------- */
@media (min-width:741px){
  /* Gleiche Zeilen-Anatomie wie mobil, nur großzügiger */
  .mt-tab{gap:1.15rem; padding:.95rem 1.15rem; margin-top:.75rem}
  .mt-stage{width:164px; height:106px}
  .mt-art{height:84px}
  .mt-no{display:block}
  .mt-copy{gap:.28rem}
  .mt-label{font-size:1.28rem}
  .mt-teaser{font-size:.95rem}
  .mt-metric{margin-top:.4rem}
  .mt-more{margin-left:1rem}
  .mt-more-t{display:inline}
}
/* Tablet und kleiner Laptop: Der Kopf rückt zusammen, damit Marke, Navigation und
   Aktionen weiter auf eine Zeile passen. Umbricht die Navigation nämlich, wächst der
   Kopf über --header-h hinaus und alle Sprungmarken landen darunter. */
@media (max-width:1180px){
  .header-inner{gap:.85rem}
  .mainnav ul{gap:clamp(.45rem,1.1vw,1rem)}
  .nav-link{font-size:.9rem}
  .header-cta{gap:.7rem}
  .tel-link{font-size:.88rem}
  .header-cta .btn{padding:.7rem 1.05rem; font-size:.92rem}
  /* Bildtitel und Slider-Punkte rutschen hier neben die Kennzahlen – deshalb
     bekommt der Hero unten eine feste Reserve für die Steuerung. */
  .hero{padding-bottom:6.75rem}
}
@media (max-width:1024px){
  /* Vier Referenzkarten nebeneinander werden hier zu schmal für Logo und Text */
  .ref-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  /* Ab hier reicht die Zeile nicht mehr für die volle Navigation: Burger-Menü.
     Deckt Tablets im Hochformat (768–834 px) und Handys im Querformat mit ab. */
  :root{--header-h:56px}
  .mainnav,.header-cta{display:none}
  .menu-toggle{display:inline-flex; align-items:center; justify-content:center; margin-left:auto; width:44px; height:44px; background:none; border:1.5px solid rgba(255,255,255,.35); border-radius:var(--r-inset); cursor:pointer}
  .menu-bars,.menu-bars::before,.menu-bars::after{content:""; display:block; width:22px; height:2px; background:#fff; position:relative}
  .menu-bars::before{position:absolute; top:-7px}
  .menu-bars::after{position:absolute; top:7px}
  /* Drei Partnerkarten nebeneinander lassen zu wenig Platz für die Firmennamen */
  .partner-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .hero{min-height:clamp(460px,72vh,620px); min-height:clamp(460px,72svh,620px)}
  .hero-scrim{background:
    linear-gradient(0deg, rgba(9,15,40,.86) 0%, rgba(9,15,40,.42) 55%, rgba(19,33,85,.5) 100%)}
  .kontakt-grid{grid-template-columns:1fr}
  .historie-grid{grid-template-columns:1fr}
  .historie-intro{position:static}
  .framed-portrait{max-width:240px}
  .ref-two{grid-template-columns:1fr}
  /* Verteilkarte: Karte voll, Panel als Bottom-Sheet
     (dieselbe Grenze steht in js/verteilkarte.js – bitte gemeinsam ändern) */
  .vk-stage{grid-template-columns:1fr}
  .vk-map-wrap{height:60vh; height:60svh; min-height:360px}
  /* dvh: das Sheet soll in die tatsächlich sichtbare Fläche passen, auch wenn
     die Adressleiste gerade ausgefahren ist */
  /* visibility: nur wegzuschieben reicht nicht – der Schließen-Knopf und die
     Links im Panel blieben sonst in der Tab-Reihenfolge, obwohl das Panel
     außerhalb des Bildes steht. Die Verzögerung lässt die Animation zu Ende laufen. */
  .vk-panel{position:fixed; left:0; right:0; bottom:0; z-index:1000; max-height:78vh; max-height:78dvh; border-radius:var(--r-card) var(--r-card) 0 0; transform:translateY(101%); visibility:hidden; transition:transform .28s var(--ease-out), visibility 0s linear .28s; box-shadow:0 -10px 34px rgba(0,0,0,.28)}
  .vk-panel.is-open{transform:none; visibility:visible; transition:transform .28s var(--ease-out), visibility 0s}
  .vk-panel-close{display:block}
  /* :not([hidden]) ist zwingend: Das hidden-Attribut wirkt nur ueber die Browser-
     Standardregel [hidden]{display:none} - und die verliert gegen JEDE Autoren-
     Regel mit display. Ohne diesen Guard liegt die Blende dauerhaft ueber der
     ganzen Seite, schluckt jeden Tap und wird beim Scrollen sichtbar dunkel. */
  .vk-backdrop:not([hidden]){display:block; position:fixed; inset:0; background:rgba(10,15,45,.5); z-index:999}
}
@media (max-width:740px){
  .panel-grid{grid-template-columns:1fr}
  .hero .facts{gap:.7rem 1.4rem}
}
@media (max-width:520px){
  /* Accordion kompakt halten: Teaser weglassen, Kurz-Info bleibt */
  .mt-teaser{display:none}
  .mt-stage{width:72px; height:62px}
  .mt-art{height:44px}
  .ref-grid,.ref-grid-2{grid-template-columns:1fr}
  .partner-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .footer-inner{flex-direction:column; align-items:flex-start}
  /* Der Titel steht sonst sechszeilig und schiebt den Aufruf unter die Kante */
  .hero h1{font-size:clamp(1.72rem,7vw,2.05rem); margin-bottom:1.1rem}
  .hero .lead{font-size:1.02rem; margin-bottom:1.3rem}
  .hero-ctas{gap:.7rem}
  .hero-ctas .btn{flex:1 1 100%; justify-content:center}
  /* Die Karte ist der Kern des Abschnitts: auf schmalen Schirmen bekommt sie die
     volle Breite der Tafel, statt in deren Polsterung zu verschwinden. */
  .netboard{padding:1.35rem 1.1rem}
  .vk-map-wrap{margin-inline:-1.1rem; border-radius:0; border-inline:0}
}
@media (max-width:360px){
  /* Auf sehr schmalen Geräten passt keine der drei Sinnzeilen mehr in eine Zeile –
     dann bricht der Titel besser frei um (sechs Zeilen werden vier). */
  .hero h1 .h1-l{display:inline}
}
/* Bedienung mit dem Finger: alles Antippbare auf ein sicheres Maß bringen.
   Steht bewusst am Ende, damit es die Größen der Breiten-Regeln oben gewinnt. */
@media (pointer:coarse){
  /* :not(...) lässt das Häkchen aus – sonst würde die Checkbox mitgestreckt.
     Das Nachrichtenfeld steht bewusst nicht hier: es hat oben schon 130 px. */
  .contact-form input:not([type="checkbox"]),.vk-search-input{min-height:44px}
  .field-check input{width:24px; height:24px; margin-top:.05rem}
  .footer-nav{flex-wrap:wrap; gap:.2rem 1.4rem}
  .footer-nav a,.ref-link{display:inline-block; padding-block:.45rem}
  .kontakt-data a{display:inline-block; padding-block:.3rem}
  .hero-dot::after{top:-20px; bottom:-20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Pseudo-Elemente ausdrücklich mitnehmen – * allein erfasst sie nicht */
  *,*::before,*::after{transition:none !important; animation:none !important}
  /* Reveal-Elemente niemals versteckt lassen, wenn Bewegung reduziert ist */
  .reveal-enabled .reveal{opacity:1 !important; transform:none !important}
}

/* ---------- 14 · Rechtstext-Seiten ---------- */
.legal-header{background:var(--c-navy)}
.legal-header .header-inner{justify-content:space-between}
.legal-back{font-family:var(--font-body); font-weight:700; font-size:.9rem; color:#fff; text-decoration:none}
.legal-back:hover{color:#fff; text-decoration:underline}
.legal{max-width:820px; margin-inline:auto; padding:var(--section-y) var(--gutter)}
.legal h1{font-size:var(--fs-h2); margin-bottom:1rem}
.legal h2{font-size:1.25rem; color:var(--c-navy); margin:2rem 0 .5rem}
.legal p,.legal li{color:var(--text-primary); max-width:70ch}
.legal ul{padding-left:1.2rem; margin:0 0 1rem}
.legal .draft-note{background:rgba(212,19,23,.06); border:1px solid rgba(212,19,23,.35); border-left:4px solid var(--c-red); border-radius:var(--r-inset); padding:1rem 1.2rem; margin-bottom:2rem; font-size:.92rem}
.legal .draft-note strong{color:var(--c-red-deep)}
.legal address{font-style:normal; font-size:.95rem; line-height:1.7}