/* =====================================================================
   Hollinware — Website im Bild des Programms
   Hollinder Digital, Oktober 2026

   Die Website war dunkel gehalten mit einem grellen Mintgrün. Das
   Programm selbst sieht anders aus: heller Grund, weiße Flächen,
   Marineblau als Rahmen, Petrol als Akzent. Diese Datei zieht die
   Website auf genau diese Werte - dieselben, die app.hollinware.de
   benutzt.

   Einbinden: als letzte Zeile vor </head> in website.html
       <link rel="stylesheet" href="hollinware-website.css">
   Die Datei liegt neben website.html in public/.
   ===================================================================== */

:root{
  /* Die Werte stammen 1:1 aus dem Programm (app.hollinware.de) */
  --hw-navy:#0B2C4A;
  --hw-deep:#06202F;
  --hw-teal:#00AA97;
  --hw-teal-h:#00C2AC;
  --hw-teal-d:#008878;
  --hw-teal-soft:#E4F1F6;
  --hw-ink:#14202B;
  --hw-ink-soft:#3B4A57;
  --hw-muted:#6B7885;
  --hw-paper:#FAFAF7;
  --hw-surface:#FFFFFF;
  --hw-surface2:#F1F4F6;
  --hw-line:#E1E7EB;
  --hw-line-soft:#EDF1F4;
  --hw-r-card:12px;
  --hw-r-ctl:9px;
  --hw-schatten:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --hw-schatten-md:0 4px 12px rgba(16,24,40,.06), 0 2px 4px rgba(16,24,40,.04);

  /* Die vorhandenen Variablen der Seite auf dieselben Werte ziehen */
  --navy:#0B2C4A; --navy-deep:#06202F; --navy-soft:#123A5E;
  --teal:#00AA97; --teal-deep:#008878; --teal-soft:#E4F1F6;
  --paper:#FAFAF7; --surface:#FFFFFF; --surface-2:#F1F4F6;
  --line:#E1E7EB; --line-soft:#EDF1F4;
  --ink:#14202B; --ink-soft:#3B4A57; --muted:#6B7885;
}

/* ---------- Grundfläche: viel Weiß ---------- */
body{background:var(--hw-surface);color:var(--hw-ink)}
.panel{background:transparent}

/* ---------- Kopfzeile: weiß statt nachtblau ---------- */
header.site{background:rgba(255,255,255,.94) !important;
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--hw-line);color:var(--hw-ink)}
header.site .wrap.hd{min-height:64px}
.brand{color:var(--hw-navy) !important}
.brand svg,.brand img{filter:none}
/* Die Wortmarke trägt das Petrol des Programms, nicht das grelle Mint */
.brand .bt{color:var(--hw-navy) !important;font-weight:700}
.brand .bt em,.brand .ware,.brand b,.brand strong{color:var(--hw-teal) !important;
  font-style:normal !important}

/* ---------- Reiter: Unterstrich statt gefüllter Pille ---------- */
.tabs a,.tabs button{background:transparent !important;color:var(--hw-ink-soft) !important;
  border:0 !important;border-radius:0 !important;padding:10px 2px !important;margin:0 14px 0 0;
  font-weight:550 !important;position:relative}
.tabs a:hover,.tabs button:hover{color:var(--hw-navy) !important}
/* Kein eigener Strich an den Reitern: den aktiven Reiter markiert der
   gleitende Balken (.schieber). Zwei Striche auf zwei Hoehen sahen kaputt aus. */
.tabs a::after,.tabs button::after{display:none !important}
.tabs a.on,.tabs button.on,.tabs a[aria-current],.tabs .on{color:var(--hw-navy) !important}
/* Der aktive Reiter wird vom Schieber markiert, darum hier kein
   zweiter Strich. Der ::after-Strich bleibt dem Darueberfahren. */
.menuknopf{background:var(--hw-surface2) !important;color:var(--hw-navy) !important;
  border:1px solid var(--hw-line) !important;border-radius:var(--hw-r-ctl) !important}

/* ---------- Aufmacher: hell, mit Marineblau als Schrift ---------- */
.hero{background:linear-gradient(180deg,#FFFFFF 0%,var(--hw-paper) 100%) !important;
  color:var(--hw-ink) !important;border-bottom:1px solid var(--hw-line);
  padding:clamp(48px,7vw,88px) 0 clamp(40px,5vw,64px) !important}
.hero h1,.hero h2{color:var(--hw-navy) !important;letter-spacing:-.02em;line-height:1.1}
.hero p,.hero .vorspann{color:var(--hw-ink-soft) !important}
.hero .fine,.hero .fein,.hero .feinsatz{color:var(--hw-muted) !important}
.hero a:not(.btn):not(.btn-p):not(.btn-k):not(.btn-w){color:var(--hw-teal-d) !important}

/* ---------- Dunkle Bänder: Marineblau statt Nachtschwarz, sparsam ---------- */
.bahn{background:var(--hw-navy) !important;color:#E6EEF4 !important}
.bahn h2,.bahn h3,.bahn strong{color:#fff !important}
.stage{background:var(--hw-surface2) !important;color:var(--hw-ink) !important;
  border-top:1px solid var(--hw-line);border-bottom:1px solid var(--hw-line)}
.stage h1,.stage h2,.stage h3{color:var(--hw-navy) !important}
.stage p{color:var(--hw-ink-soft) !important}

/* ---------- Abschnitte ---------- */
section{color:var(--hw-ink)}
h1,h2,h3,h4{color:var(--hw-navy)}
.sechead{color:var(--hw-navy) !important;letter-spacing:-.015em}
.eyebrow{color:var(--hw-teal-d) !important;font-weight:600;letter-spacing:.02em;
  text-transform:none;font-size:.875rem}
.vorspann{color:var(--hw-ink-soft) !important}
.fine,.fein,.feinsatz,.note{color:var(--hw-muted) !important}

/* ---------- Knöpfe: Petrol des Programms, kein Neon ---------- */
.btn,.btn-p,.btn-k,.btn-w,.lbtn,.absenden{border-radius:var(--hw-r-ctl) !important;
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:600 !important;
  letter-spacing:.005em !important;
  transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease}

/* zuerst der neutrale Grundknopf (weiss) */
.btn,.btn-k{background:var(--hw-surface) !important;color:var(--hw-navy) !important;
  border:1px solid var(--hw-line) !important;box-shadow:0 1px 2px rgba(6,32,47,.05) !important}
.btn:hover,.btn-k:hover{background:var(--hw-surface2) !important;
  border-color:#CFD8DF !important}

/* danach der Hauptknopf - Doppelklasse schlaegt die Grundregel sicher */
.btn.btn-p,.btn.btn-w,.btn-p,.btn-w,
button.btn-p,a.btn-p,button.absenden,button[type=submit]{
  background:var(--hw-teal) !important;color:#06202F !important;
  border:1px solid var(--hw-teal) !important;box-shadow:var(--hw-schatten) !important}
.btn.btn-p:hover,.btn.btn-w:hover,
.btn-p:hover,.btn-w:hover,button[type=submit]:hover{
  background:var(--hw-teal-h) !important;border-color:var(--hw-teal-h) !important;
  box-shadow:0 6px 16px rgba(0,170,151,.26) !important}

/* auf dunklen Bahnen: heller Umriss, Hauptknopf bleibt petrol */
.bahn .btn:not(.btn-p):not(.btn-w),.bahn .btn-k,
footer.site .btn:not(.btn-p):not(.btn-w){
  background:rgba(255,255,255,.08) !important;color:#fff !important;
  border-color:rgba(255,255,255,.34) !important;box-shadow:none !important}
.bahn .btn:not(.btn-p):not(.btn-w):hover,.bahn .btn-k:hover{
  background:rgba(255,255,255,.16) !important;border-color:rgba(255,255,255,.5) !important}
.bahn .btn.btn-p,.bahn .btn-p{background:#fff !important;color:var(--hw-deep) !important;
  border-color:#fff !important}
.bahn .btn.btn-p:hover,.bahn .btn-p:hover{background:var(--hw-surface2) !important;
  border-color:var(--hw-surface2) !important}

/* ---------- Karten, Tarife, Felder ---------- */
.plan,.panelkarte,.karte,.modgroup,.formblock,.zust{
  background:var(--hw-surface) !important;border:1px solid var(--hw-line) !important;
  border-radius:var(--hw-r-card) !important;box-shadow:var(--hw-schatten) !important}
.plan{padding:22px 24px !important}
.plan:hover{box-shadow:var(--hw-schatten-md) !important}
.pn{color:var(--hw-navy) !important}
.pp{color:var(--hw-navy) !important}
.ffeld,.ffeld input,.ffeld select,.ffeld textarea,
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  border-radius:var(--hw-r-ctl) !important}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  border:1px solid var(--hw-line) !important;background:var(--hw-surface) !important;
  color:var(--hw-ink) !important;min-height:44px;padding:0 13px}
textarea{padding:11px 13px;min-height:112px}
input:focus,select:focus,textarea:focus{border-color:var(--hw-teal) !important;
  box-shadow:0 0 0 3px rgba(0,170,151,.14) !important;outline:none}
.pflicht{color:var(--hw-teal-d) !important}

/* ---------- Fragen und Antworten ---------- */
.frage{color:var(--hw-navy) !important;font-weight:600}
.antwort{color:var(--hw-ink-soft) !important}

/* ---------- Zustandspunkte ---------- */
.mon-dot{box-shadow:none !important}
.zustlabel{color:var(--hw-muted) !important}

/* ---------- Fußzeile: Marineblau, ruhig ---------- */
footer.site{background:var(--hw-navy) !important;color:#B9CCD9 !important;
  border-top:0}
footer.site a{color:#DCE8F0 !important;text-decoration:none}
footer.site a:hover{color:#fff !important;text-decoration:underline}
footer.site h3,footer.site h4,footer.site strong{color:#fff !important}
footer.site .fine{color:rgba(255,255,255,.45) !important}

/* ---------- Links ---------- */
a:not(.btn):not(.btn-p):not(.btn-k):not(.btn-w):not(.lbtn){color:var(--hw-teal-d)}
.lnk{color:var(--hw-teal-d) !important}
footer.site .lnk{color:#DCE8F0 !important}

/* ---------- Bildschirmfotos des Programms bekommen einen Rahmen ---------- */
.hero img,.stage img,.panel img{border-radius:var(--hw-r-card);box-shadow:var(--hw-schatten-md)}

/* ---------------------------------------------------------------
   Der Bildschirm: ein richtiger Monitor statt eines Browserfensters
   Vorher: Fensterleiste mit drei Ampelpunkten und Adresszeile,
   kantiger Rahmen, 7px-Stummelfuss. Das sah nach Attrappe aus.
   Jetzt: schmale Fassung, Kinn mit Wortmarke, Kameralinse,
   schlanker Hals und flache Standplatte.
   --------------------------------------------------------------- */
.mon{position:relative}
.mon-frame{
  background:linear-gradient(180deg,#32444F 0%,#1F2F3A 56%,#17242D 100%) !important;
  padding:14px 14px 30px !important;border-radius:18px !important;position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
             inset 0 0 0 1px rgba(255,255,255,.05),
             0 28px 60px -20px rgba(6,32,47,.45),
             0 6px 16px -6px rgba(6,32,47,.22) !important}
/* Wortmarke im Kinn, wie bei einem echten Geraet */
.mon-frame::after{content:"HOLLINWARE";position:absolute;left:0;right:0;bottom:10px;
  text-align:center;font:600 8px/1 Archivo,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:.22em;color:rgba(255,255,255,.3)}
/* Die Fensterleiste wird zur Blende, der erste Punkt zur Kameralinse */
.mon-bar{height:0 !important;min-height:0 !important;padding:0 !important;
  margin:0 !important;border:0 !important;background:none !important;
  display:block !important;position:relative;overflow:visible}
.mon-url{display:none !important}
.mon-dot{display:none !important}
.mon-bar .mon-dot:first-child{display:block !important;position:absolute;top:-9px;left:50%;
  width:5px;height:5px;margin:0 !important;transform:translateX(-50%);border-radius:50% !important;
  background:radial-gradient(circle at 34% 32%,#5A7483,#0F1B23) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.07) !important}
/* Scheibe mit leichtem Glasschimmer */
.mon-screen{border-radius:5px !important;overflow:hidden !important;position:relative;
  background:#0B2C4A !important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4) !important}
.mon-screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(116deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.05) 24%,
    rgba(255,255,255,0) 40%)}
.mon-screen img,.mon-screen video{border-radius:0 !important;box-shadow:none !important;
  display:block;width:100%}
/* Hals und Standplatte */
.mon-stand{width:116px !important;height:26px !important;margin:0 auto !important;
  background:linear-gradient(90deg,#94A3AD 0%,#D6DEE3 36%,#B4C1C9 62%,#8C9BA5 100%) !important;
  border-radius:0 0 5px 5px !important;box-shadow:0 1px 2px rgba(6,32,47,.18) !important}
.mon-foot{width:252px !important;height:12px !important;margin:0 auto !important;
  background:linear-gradient(180deg,#C6D0D7 0%,#99A6B0 100%) !important;
  border-radius:4px 4px 10px 10px !important;
  box-shadow:0 12px 20px -10px rgba(6,32,47,.42) !important}
/* Blaetterknoepfe: weisse Scheiben, kein Milchglas */
.mon-nav{width:38px !important;height:38px !important;padding:0 !important;
  display:grid !important;place-items:center !important;
  background:rgba(255,255,255,.95) !important;color:var(--hw-navy) !important;
  border:1px solid var(--hw-line) !important;border-radius:50% !important;
  font-size:19px !important;line-height:1 !important;
  box-shadow:0 2px 8px rgba(6,32,47,.18) !important;z-index:3}
.mon-nav:hover{background:#fff !important;border-color:#CFD8DF !important;
  box-shadow:0 4px 12px rgba(6,32,47,.22) !important}
/* Bildunterschrift und Auswahlknoepfe */
.mon-cap{text-align:center}
.mon-cap .num,#monNum{color:var(--hw-teal-d) !important;font-weight:600 !important}
.mon-cap h3{color:var(--hw-navy) !important}
.mon-cap p{color:var(--hw-ink-soft) !important}
.stage-chips button{background:var(--hw-surface) !important;color:var(--hw-ink-soft) !important;
  border:1px solid var(--hw-line) !important;border-radius:999px !important;
  box-shadow:0 1px 2px rgba(6,32,47,.04) !important}
.stage-chips button:hover{border-color:#CFD8DF !important;color:var(--hw-navy) !important}
.stage-chips button.on,.stage-chips button[aria-pressed="true"]{
  background:var(--hw-navy) !important;color:#fff !important;border-color:var(--hw-navy) !important}
.film-head h3{color:var(--hw-navy) !important}
.film-head p,.film-notiz{color:var(--hw-muted) !important}
#filmKnopf{background:var(--hw-teal) !important;color:#06202F !important;
  border:1px solid var(--hw-teal) !important;border-radius:var(--hw-r-ctl) !important}

/* ---------------------------------------------------------------
   Das Bild im Aufmacher bekommt denselben Monitor.
   Im Markup heissen die Teile dort .frame / .bar / .sc, darum
   alles streng unter .heroshot geschachtelt. Hals und Standplatte
   fehlen im Markup und werden als ::before / ::after ergaenzt.
   --------------------------------------------------------------- */
.heroshot{position:relative;padding-bottom:42px}
.heroshot .frame{
  background:linear-gradient(180deg,#32444F 0%,#1F2F3A 56%,#17242D 100%) !important;
  padding:12px 12px 26px !important;border-radius:16px !important;
  transform:none !important;position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
             inset 0 0 0 1px rgba(255,255,255,.05),
             0 26px 56px -18px rgba(6,32,47,.42),
             0 6px 14px -6px rgba(6,32,47,.2) !important}
.heroshot .frame::after{content:"HOLLINWARE";position:absolute;left:0;right:0;bottom:9px;
  text-align:center;font:600 7.5px/1 Archivo,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:.22em;color:rgba(255,255,255,.3)}
.heroshot .bar{height:0 !important;min-height:0 !important;padding:0 !important;
  margin:0 !important;border:0 !important;background:none !important;
  position:relative;overflow:visible}
.heroshot .bar u,.heroshot .bar i{display:none !important}
.heroshot .bar i:first-child{display:block !important;position:absolute;top:-8px;left:50%;
  transform:translateX(-50%);width:5px;height:5px;border-radius:50% !important;
  background:radial-gradient(circle at 34% 32%,#5A7483,#0F1B23) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.07) !important}
.heroshot .sc{border-radius:5px !important;overflow:hidden !important;position:relative;
  background:#0B2C4A !important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4) !important}
.heroshot .sc::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(116deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.05) 24%,
    rgba(255,255,255,0) 40%)}
.heroshot .sc img{border-radius:0 !important;box-shadow:none !important;
  display:block;width:100%;height:auto}
/* Hals */
.heroshot::before{content:"";position:absolute;left:50%;bottom:30px;z-index:0;
  transform:translateX(-50%);width:104px;height:24px;border-radius:0 0 5px 5px;
  background:linear-gradient(90deg,#94A3AD 0%,#D6DEE3 36%,#B4C1C9 62%,#8C9BA5 100%)}
/* Standplatte */
.heroshot::after{content:"";position:absolute;left:50%;bottom:18px;z-index:0;
  transform:translateX(-50%);width:228px;height:11px;border-radius:4px 4px 10px 10px;
  background:linear-gradient(180deg,#C6D0D7 0%,#99A6B0 100%);
  box-shadow:0 12px 20px -10px rgba(6,32,47,.42)}

/* ---------------------------------------------------------------
   Menue am Telefon (bis 900px): weisse Klappe statt Nachtblau
   --------------------------------------------------------------- */
@media (max-width:900px){
  #hauptmenue.tabs{background:var(--hw-surface) !important;
    border-bottom:1px solid var(--hw-line) !important;
    box-shadow:0 14px 30px -12px rgba(6,32,47,.22) !important;
    padding:6px 0 10px !important}
  #hauptmenue.tabs a,#hauptmenue.tabs button{display:block !important;
    margin:0 !important;padding:14px 20px !important;min-height:48px;
    color:var(--hw-ink) !important;font-size:1rem !important;
    border-bottom:1px solid var(--hw-line-soft) !important;border-radius:0 !important}
  #hauptmenue.tabs a::after,#hauptmenue.tabs button::after{display:none !important}
  #hauptmenue.tabs a:last-child,#hauptmenue.tabs button:last-child{border-bottom:0 !important}
  #hauptmenue.tabs a.on,#hauptmenue.tabs button.on,#hauptmenue.tabs .on{
    color:var(--hw-navy) !important;font-weight:650 !important;
    box-shadow:inset 3px 0 0 var(--hw-teal) !important;
    background:var(--hw-surface2) !important}
  #hauptmenue.tabs a:active{background:var(--hw-surface2) !important}
  /* Der letzte Eintrag ist der Aufruf zum Test - der wird zum Knopf */
  #hauptmenue.tabs > a:last-of-type{margin:10px 16px 2px !important;
    padding:13px 18px !important;text-align:center;
    background:var(--hw-teal) !important;color:#06202F !important;
    border:1px solid var(--hw-teal) !important;
    border-radius:var(--hw-r-ctl) !important;font-weight:650 !important}
  /* Der Monitor braucht am Telefon weniger Rahmen */
  .mon-frame,.heroshot .frame{padding:9px 9px 22px !important;border-radius:13px !important}
  .mon-frame::after,.heroshot .frame::after{bottom:7px;font-size:6.5px}
  .mon-stand{width:84px !important;height:18px !important}
  .mon-foot{width:180px !important;height:9px !important}
  .heroshot{padding-bottom:32px}
  .heroshot::before{width:78px;height:18px;bottom:24px}
  .heroshot::after{width:168px;height:9px;bottom:14px}
  .mon-nav{width:34px !important;height:34px !important;font-size:17px !important}
}

/* ---------------------------------------------------------------
   Der gleitende Reitermarker: aus der Mintpille wird ein Strich
   Die Seite setzt Breite und Verschiebung per Skript, Hoehe und
   Lage stehen im Stil - nur die aendern wir.
   --------------------------------------------------------------- */
.schieber{top:44px !important;height:2px !important;border-radius:2px !important;
  background:var(--hw-teal) !important;opacity:1 !important}

/* Der Aufruf oben rechts wird ein richtiger Knopf.
   .tabs a ist spezifischer als .kopfknopf, darum mit .tabs davor. */
.tabs .kopfknopf,.tabs a.kopfknopf,#hauptmenue .kopfknopf{
  background:var(--hw-teal) !important;color:#06202F !important;
  border:1px solid var(--hw-teal) !important;border-radius:var(--hw-r-ctl) !important;
  padding:8px 14px !important;margin:0 0 0 10px !important;font-weight:650 !important;
  box-shadow:var(--hw-schatten) !important;white-space:nowrap}
.tabs .kopfknopf::after{display:none !important}
.tabs .kopfknopf:hover,#hauptmenue .kopfknopf:hover{
  background:var(--hw-teal-h) !important;border-color:var(--hw-teal-h) !important;
  color:#06202F !important}
/* Die Kopfzeile darf nicht umbrechen */
header.site .wrap.hd{flex-wrap:nowrap !important}
#hauptmenue.tabs{white-space:nowrap}
#hauptmenue.tabs button{padding:10px 8px !important;margin:0 1px 0 0 !important}

@media (max-width:900px){
  .schieber{display:none !important}
  header.site .wrap.hd{flex-wrap:wrap !important}
  #hauptmenue.tabs{white-space:normal}
  .tabs .kopfknopf,#hauptmenue .kopfknopf{margin:10px 16px 2px !important;
    padding:13px 18px !important;display:block !important;text-align:center;
    /* ohne diese Zeile war der Knopf 100% breit PLUS 16px Rand links und
       rechts - dadurch liess sich die Seite auf dem Handy seitlich schieben */
    width:calc(100% - 32px) !important;box-sizing:border-box !important}
}

/* =====================================================================
   NACHTRAG 1 - Textlinks, Fusszeile, Formulare
   ===================================================================== */

/* .lbtn ist im Markup ein <button>, steht aber mitten im Fliesstext und
   in der Fusszeile. Als weisser Kasten sah das ueberall falsch aus -
   hier wird daraus wieder ein Textlink. */
.lbtn,button.lbtn{background:none !important;border:0 !important;
  box-shadow:none !important;padding:0 !important;margin:0 !important;
  min-height:0 !important;height:auto !important;border-radius:0 !important;
  font:inherit !important;color:var(--hw-teal-d) !important;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(0,170,151,.45)}
.lbtn:hover{color:var(--hw-teal) !important;background:none !important;
  text-decoration-color:var(--hw-teal) !important}

/* Fusszeile: die Abspruenge als ruhige Linkspalten, nicht als Kasten */
footer.site .fl{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
footer.site .lbtn{color:#C3D4E0 !important;text-decoration:none !important;
  padding:5px 0 !important;font-size:.95rem !important;line-height:1.5;position:relative}
footer.site .lbtn::after{content:"";position:absolute;left:0;bottom:2px;height:1px;
  width:100%;background:var(--hw-teal);transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.16,1,.3,1)}
footer.site .lbtn:hover{color:#fff !important}
footer.site .lbtn:hover::after{transform:scaleX(1)}
footer.site .bt{color:#fff !important;font-weight:700}
footer.site .bt span,footer.site .bt em{color:var(--hw-teal) !important;font-style:normal}
footer.site .wrap.fw{padding-top:44px !important;padding-bottom:30px !important}
footer.site .wrap.fw ~ .wrap{border-top:1px solid rgba(255,255,255,.12);
  padding-top:18px !important;padding-bottom:26px !important}

/* Formulare: die Bloecke sind <fieldset> mit <legend>. Die Legende wird
   mit float zum normalen Ueberschriftenblock, sonst haengt sie im Rahmen. */
fieldset.formblock{background:var(--hw-surface) !important;
  border:1px solid var(--hw-line) !important;border-radius:var(--hw-r-card) !important;
  box-shadow:var(--hw-schatten) !important;padding:22px 24px 24px !important;
  margin:0 0 18px !important;min-width:0}
fieldset.formblock > legend{float:left;width:100%;padding:0 0 13px !important;
  margin:0 0 18px !important;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-weight:650 !important;font-size:1.02rem !important;color:var(--hw-navy) !important;
  border-bottom:1px solid var(--hw-line-soft)}
fieldset.formblock > legend ~ *{clear:both}
.fgrid{display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) !important;
  gap:16px 20px !important;margin-bottom:16px}
.fgrid:last-child{margin-bottom:0}
.ffeld{display:flex !important;flex-direction:column;gap:7px !important;min-width:0}
.ffeld.voll{grid-column:1 / -1}
.ffeld > label{font-size:.875rem !important;font-weight:600 !important;
  color:var(--hw-ink-soft) !important}
.ffeld input,.ffeld select,.ffeld textarea{width:100%}
input::placeholder,textarea::placeholder{color:#9AA7B2 !important}

/* Zustimmung: eigenes Kaestchen statt Systemhaken */
.ffeld.zust,.zust{background:var(--hw-surface2) !important;
  border:1px solid var(--hw-line) !important;border-radius:var(--hw-r-card) !important;
  padding:16px 18px !important;box-shadow:none !important;margin:4px 0 18px !important}
.zustlabel{display:grid !important;grid-template-columns:20px 1fr !important;
  gap:12px !important;align-items:start !important;color:var(--hw-ink-soft) !important;
  font-size:.9375rem !important;line-height:1.55 !important;font-weight:400 !important;
  cursor:pointer}
.zustlabel input[type=checkbox]{appearance:none;-webkit-appearance:none;
  width:20px !important;height:20px !important;min-height:0 !important;
  margin:1px 0 0 !important;padding:0 !important;border:1.5px solid #B9C5CE !important;
  border-radius:5px !important;background:#fff !important;display:grid;
  place-content:center;cursor:pointer;transition:background .15s,border-color .15s}
.zustlabel input[type=checkbox]::before{content:"";width:11px;height:11px;
  transform:scale(0);transition:transform .15s cubic-bezier(.16,1,.3,1);
  box-shadow:inset 1em 1em #fff;
  clip-path:polygon(14% 44%,0 60%,40% 100%,100% 18%,84% 2%,38% 68%)}
.zustlabel input[type=checkbox]:checked{background:var(--hw-teal) !important;
  border-color:var(--hw-teal) !important}
.zustlabel input[type=checkbox]:checked::before{transform:scale(1)}
.zustlabel input[type=checkbox]:focus-visible{outline:none;
  box-shadow:0 0 0 3px rgba(0,170,151,.2) !important}
.zustlabel b{color:var(--hw-ink) !important}

/* .absenden ist ein Kasten um Knopf und Kleingedrucktes, kein Knopf */
.absenden{background:none !important;border:0 !important;box-shadow:none !important;
  border-radius:0 !important;padding:8px 0 0 !important;display:flex !important;
  flex-direction:column;align-items:flex-start;gap:10px !important}
.absenden > p,.absenden .feinsatz{margin:0 !important}
.btn-w,button[type=submit],#an_senden{padding:13px 22px !important;min-height:46px;
  font-size:1rem !important;border-radius:var(--hw-r-ctl) !important;cursor:pointer}
.zusammen{background:var(--hw-surface2) !important;border:1px solid var(--hw-line) !important;
  border-radius:var(--hw-r-card) !important;padding:14px 16px !important;
  color:var(--hw-ink-soft) !important;grid-column:1 / -1}
.fmeldung{border-radius:var(--hw-r-ctl) !important;padding:12px 14px !important}
.fk-fein,.fk-unter,.feinsatz{color:var(--hw-muted) !important}

/* Kontaktseite */
.kontaktform{background:var(--hw-surface) !important;border:1px solid var(--hw-line) !important;
  border-radius:var(--hw-r-card) !important;box-shadow:var(--hw-schatten-md) !important;
  padding:26px 28px !important}
.kontaktform h3{margin-top:0 !important;color:var(--hw-navy) !important}
.kontaktdaten dt{color:var(--hw-muted) !important;font-size:.8125rem !important;
  font-weight:600 !important;letter-spacing:.04em;text-transform:uppercase;margin-top:16px}
.kontaktdaten dd{margin:3px 0 0 !important;color:var(--hw-ink) !important}

/* Ohne aktiven Reiter zieht das Skript den Schieber auf die volle Breite.
   Als Pille fiel das nicht auf, als Strich schon - also ausblenden. */
#hauptmenue.tabs:not(:has(.on)) .schieber{opacity:0 !important}

/* =====================================================================
   NACHTRAG 2 - Bewegung
   Alles ohne Skript. Das Auftauchen beim Scrollen laeuft ueber
   animation-timeline:view() und ist in @supports gekapselt: wo der
   Browser das nicht kann, steht einfach alles sofort da.
   Wer im System "Bewegung reduzieren" eingestellt hat, bekommt nichts.
   ===================================================================== */
@keyframes hw-auf{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes hw-auf-klein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes hw-glanz{0%{left:-65%}18%{left:130%}100%{left:130%}}

@media (prefers-reduced-motion:no-preference){
  /* Aufmacher laeuft gestaffelt ein */
  .hero h1{animation:hw-auf .75s cubic-bezier(.16,1,.3,1) both}
  .hero .vorspann,.hero > .wrap p{animation:hw-auf .75s cubic-bezier(.16,1,.3,1) .09s both}
  .hero .cta{animation:hw-auf .75s cubic-bezier(.16,1,.3,1) .18s both}
  .hero .fine,.hero .feinsatz{animation:hw-auf .75s cubic-bezier(.16,1,.3,1) .26s both}
  .heroshot{animation:hw-auf .95s cubic-bezier(.16,1,.3,1) .14s both}
  /* Ein Lichtstreifen wandert langsam ueber die Scheibe */
  .mon-screen::before{content:"";position:absolute;top:-30%;left:-65%;width:38%;
    height:160%;z-index:3;pointer-events:none;transform:skewX(-14deg);
    background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.11),
      rgba(255,255,255,0));animation:hw-glanz 9s ease-in-out 1.4s infinite}
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .panel.on section > .sechead,.panel.on .stage-head,.panel.on .film-head,
    .plan,.mon,.film,.kontaktform,.formblock,.karte,.panelkarte,.zust{
      animation:hw-auf-klein both linear;animation-timeline:view();
      animation-range:entry 0% cover 20%}
  }
}

/* Tarifkarten heben sich an und bekommen oben eine Petrol-Kante */
.plan{position:relative;overflow:hidden;
  transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s ease,border-color .28s ease}
.plan:hover{transform:translateY(-4px);border-color:#CBD8DF !important;
  box-shadow:0 20px 40px -20px rgba(6,32,47,.3),0 4px 10px -4px rgba(6,32,47,.1) !important}
.plan::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--hw-teal),#5AD3C3);transform:scaleX(0);
  transform-origin:left;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.plan:hover::after{transform:scaleX(1)}
.karte,.panelkarte{transition:transform .28s cubic-bezier(.16,1,.3,1),
  box-shadow .28s ease,border-color .28s ease}
.karte:hover,.panelkarte:hover{transform:translateY(-3px);border-color:#CBD8DF !important;
  box-shadow:var(--hw-schatten-md) !important}

/* Knoepfe geben beim Druecken nach */
.btn:active,.btn-p:active,.btn-w:active,.kopfknopf:active,button[type=submit]:active{
  transform:translateY(1px)}
.stage-chips button{transition:transform .2s ease,background .2s ease,
  border-color .2s ease,color .2s ease}
.stage-chips button:hover{transform:translateY(-1px)}

/* Der Monitor tritt beim Darueberfahren etwas hervor */
.mon-frame,.heroshot .frame{transition:box-shadow .5s ease}
.mon:hover .mon-frame{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
  inset 0 0 0 1px rgba(255,255,255,.05),0 34px 70px -22px rgba(6,32,47,.5),
  0 8px 18px -6px rgba(6,32,47,.26) !important}

/* Kleine Petrol-Marke vor den Augenbrauen-Zeilen */
.eyebrow{position:relative;padding-left:15px}
.eyebrow::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:2px;
  border-radius:2px;background:linear-gradient(to bottom,var(--hw-teal),#5AD3C3)}

/* Links im Fliesstext: der Unterstrich waechst von links */
.kontaktdaten dd a,.antwort a,.vorspann a,p a:not(.btn):not(.lbtn):not(.kopfknopf){
  background-image:linear-gradient(var(--hw-teal),var(--hw-teal));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  text-decoration:none;transition:background-size .32s cubic-bezier(.16,1,.3,1)}
.kontaktdaten dd a:hover,.antwort a:hover,.vorspann a:hover,
p a:not(.btn):not(.lbtn):not(.kopfknopf):hover{background-size:100% 1px}
.frage{transition:color .2s ease}
details:hover > summary,.frage:hover{color:var(--hw-teal-d) !important}






/* =====================================================================
   NACHTRAG 3 - Bilder, Pfeile, Hintergruende, Standortanzeige
   Die Bilder sind von Hand gezeichnete SVG, direkt in dieser Datei.
   Dadurch sind sie gestochen scharf, wenige Kilobyte gross, in den
   Hausfarben - und es wird nichts von aussen nachgeladen.
   ===================================================================== */

/* --- Szene "Papierkram wird Ordnung" unter dem ersten Abschnitt --- */
#p-start > .wrap:has(+ .bahn) section{position:relative}
#p-start > .wrap:has(+ .bahn) section::after{
  content:"";display:block;width:100%;max-width:1040px;margin:34px auto 6px;
  aspect-ratio:1200 / 330;
  background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201200%20330%22%20fill=%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22pf%22%20gradientUnits=%22userSpaceOnUse%22%20x1=%22540%22%20y1=%22165%22%20x2=%22690%22%20y2=%22165%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%2300AA97%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%235AD3C3%22/%3E%3C/linearGradient%3E%3ClinearGradient%20id=%22sch%22%20x1=%220%22%20y1=%220%22%20x2=%220%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%230E3657%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%230B2C4A%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20opacity=%22.95%22%3E%3Cg%20transform=%22rotate(-13%20150%20120)%22%3E%3Crect%20x=%2296%22%20y=%2260%22%20width=%22132%22%20height=%22168%22%20rx=%226%22%20fill=%22%23fff%22%20stroke=%22%23D3DCE2%22%20stroke-width=%222%22/%3E%3Cg%20stroke=%22%23DCE3E8%22%20stroke-width=%225%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M116%2092h92M116%20112h92M116%20132h64M116%20152h92M116%20172h48%22/%3E%3C/g%3E%3C/g%3E%3Cg%20transform=%22rotate(7%20210%20140)%22%3E%3Crect%20x=%22150%22%20y=%2276%22%20width=%22140%22%20height=%22178%22%20rx=%226%22%20fill=%22%23fff%22%20stroke=%22%23CBD6DD%22%20stroke-width=%222%22/%3E%3Cg%20stroke=%22%23D7E0E6%22%20stroke-width=%225%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M172%20110h96M172%20130h96M172%20150h58M172%20170h96M172%20190h74M172%20210h40%22/%3E%3C/g%3E%3C/g%3E%3Cg%20transform=%22rotate(-5%20320%20190)%22%3E%3Crect%20x=%22268%22%20y=%22104%22%20width=%22112%22%20height=%22156%22%20rx=%227%22%20fill=%22%23C6D2DA%22/%3E%3Crect%20x=%22268%22%20y=%22104%22%20width=%2226%22%20height=%22156%22%20rx=%227%22%20fill=%22%239FB0BC%22/%3E%3Crect%20x=%22312%22%20y=%22132%22%20width=%2252%22%20height=%2210%22%20rx=%225%22%20fill=%22%23fff%22%20opacity=%22.75%22/%3E%3Crect%20x=%22312%22%20y=%22152%22%20width=%2238%22%20height=%2210%22%20rx=%225%22%20fill=%22%23fff%22%20opacity=%22.55%22/%3E%3C/g%3E%3Cg%20transform=%22rotate(5%20410%20206)%22%3E%3Crect%20x=%22344%22%20y=%22150%22%20width=%22150%22%20height=%22112%22%20rx=%226%22%20fill=%22%23fff%22%20stroke=%22%23CBD6DD%22%20stroke-width=%222%22/%3E%3Cpath%20d=%22M344%20176h150M344%20198h150M344%20220h150M344%20242h150M382%20150v112M428%20150v112M466%20150v112%22%20stroke=%22%23DEE5EA%22%20stroke-width=%222%22/%3E%3Crect%20x=%22344%22%20y=%22150%22%20width=%22150%22%20height=%2226%22%20rx=%226%22%20fill=%22%23E7ECF0%22/%3E%3C/g%3E%3Cg%20fill=%22%23AFBEC8%22%3E%3Cpath%20d=%22M196%2044c0-10%208-18%2019-18s19%207%2019%2017c0%208-5%2012-11%2016-5%204-7%206-7%2011v3h-9v-4c0-8%204-12%209-16%205-3%208-5%208-10%200-5-4-9-9-9s-9%204-9%2010zm11%2046a6.5%206.5%200%201%201%200-13%206.5%206.5%200%200%201%200%2013z%22/%3E%3Cg%20opacity=%22.6%22%20transform=%22translate(220%20170)%20scale(.68)%22%3E%3Cpath%20d=%22M196%2044c0-10%208-18%2019-18s19%207%2019%2017c0%208-5%2012-11%2016-5%204-7%206-7%2011v3h-9v-4c0-8%204-12%209-16%205-3%208-5%208-10%200-5-4-9-9-9s-9%204-9%2010zm11%2046a6.5%206.5%200%201%201%200-13%206.5%206.5%200%200%201%200%2013z%22/%3E%3C/g%3E%3C/g%3E%3Cg%20fill=%22%23fff%22%20stroke=%22%23DCE3E8%22%20stroke-width=%222%22%20opacity=%22.9%22%3E%3Crect%20x=%2272%22%20y=%22238%22%20width=%2286%22%20height=%2226%22%20rx=%224%22%20transform=%22rotate(-9%20115%20251)%22/%3E%3Crect%20x=%22392%22%20y=%2290%22%20width=%2274%22%20height=%2224%22%20rx=%224%22%20transform=%22rotate(14%20429%20102)%22/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cpath%20d=%22M540%20165h118%22%20stroke=%22url(%23pf)%22%20stroke-width=%2216%22%20stroke-linecap=%22round%22/%3E%3Cpath%20d=%22M646%20142l30%2023-30%2023%22%20stroke=%22%235AD3C3%22%20stroke-width=%2216%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20fill=%22none%22/%3E%3Ccircle%20cx=%22524%22%20cy=%22165%22%20r=%227%22%20fill=%22%2300AA97%22%20opacity=%22.4%22/%3E%3Ccircle%20cx=%22506%22%20cy=%22165%22%20r=%225%22%20fill=%22%2300AA97%22%20opacity=%22.22%22/%3E%3C/g%3E%3Cg%3E%3Crect%20x=%22724%22%20y=%2256%22%20width=%22420%22%20height=%22220%22%20rx=%2216%22%20fill=%22url(%23sch)%22/%3E%3Crect%20x=%22724%22%20y=%2256%22%20width=%22420%22%20height=%22220%22%20rx=%2216%22%20stroke=%22%2317456B%22%20stroke-width=%222%22/%3E%3Crect%20x=%22748%22%20y=%2280%22%20width=%22118%22%20height=%2212%22%20rx=%226%22%20fill=%22%235AD3C3%22/%3E%3Crect%20x=%22880%22%20y=%2280%22%20width=%2262%22%20height=%2212%22%20rx=%226%22%20fill=%22%232E5A7D%22/%3E%3Cg%3E%3Crect%20x=%22748%22%20y=%22114%22%20width=%22372%22%20height=%2234%22%20rx=%228%22%20fill=%22%230F3A5E%22/%3E%3Crect%20x=%22764%22%20y=%22125%22%20width=%2210%22%20height=%2212%22%20rx=%223%22%20fill=%22%2300AA97%22/%3E%3Crect%20x=%22788%22%20y=%22126%22%20width=%22150%22%20height=%2210%22%20rx=%225%22%20fill=%22%239FC4DC%22/%3E%3Crect%20x=%221028%22%20y=%22126%22%20width=%2276%22%20height=%2210%22%20rx=%225%22%20fill=%22%234E7FA2%22/%3E%3Crect%20x=%22748%22%20y=%22156%22%20width=%22372%22%20height=%2234%22%20rx=%228%22%20fill=%22%230F3A5E%22/%3E%3Crect%20x=%22764%22%20y=%22167%22%20width=%2210%22%20height=%2212%22%20rx=%223%22%20fill=%22%2300AA97%22/%3E%3Crect%20x=%22788%22%20y=%22168%22%20width=%22118%22%20height=%2210%22%20rx=%225%22%20fill=%22%239FC4DC%22/%3E%3Crect%20x=%221028%22%20y=%22168%22%20width=%2276%22%20height=%2210%22%20rx=%225%22%20fill=%22%234E7FA2%22/%3E%3Crect%20x=%22748%22%20y=%22198%22%20width=%22372%22%20height=%2234%22%20rx=%228%22%20fill=%22%230F3A5E%22/%3E%3Crect%20x=%22764%22%20y=%22209%22%20width=%2210%22%20height=%2212%22%20rx=%223%22%20fill=%22%2300AA97%22/%3E%3Crect%20x=%22788%22%20y=%22210%22%20width=%22166%22%20height=%2210%22%20rx=%225%22%20fill=%22%239FC4DC%22/%3E%3Crect%20x=%221028%22%20y=%22210%22%20width=%2276%22%20height=%2210%22%20rx=%225%22%20fill=%22%234E7FA2%22/%3E%3C/g%3E%3Crect%20x=%22748%22%20y=%22246%22%20width=%22206%22%20height=%2210%22%20rx=%225%22%20fill=%22%232E5A7D%22/%3E%3Ccircle%20cx=%221136%22%20cy=%22258%22%20r=%2230%22%20fill=%22%2300AA97%22/%3E%3Cpath%20d=%22M1123%20258l9%2010%2018-21%22%20stroke=%22%2306202F%22%20stroke-width=%226%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    #p-start > .wrap:has(+ .bahn) section::after{
      animation:hw-auf-klein both linear;animation-timeline:view();
      animation-range:entry 0% cover 26%}
  }
}

/* --- Der Ablauf wird eine Kette mit Pfeilen --- */
.bahn ol.ablauf{list-style:none !important;counter-reset:ab;
  display:grid !important;grid-template-columns:repeat(4,1fr);
  gap:0 !important;padding:0 !important;margin:28px 0 22px !important}
.bahn ol.ablauf > li{position:relative;counter-increment:ab;margin:0 !important;
  padding:20px 46px 20px 0 !important;color:rgba(255,255,255,.8)}
.bahn ol.ablauf > li::marker{content:""}
.bahn ol.ablauf > li::before{content:counter(ab,decimal-leading-zero);display:block;
  font:700 .78rem/1 Archivo,"Helvetica Neue",Arial,sans-serif;letter-spacing:.16em;
  color:var(--hw-teal);margin-bottom:11px}
.bahn ol.ablauf > li b{display:block;color:#fff !important;margin-bottom:5px;font-weight:650}
.bahn ol.ablauf > li:not(:last-child)::after{content:"";position:absolute;
  right:16px;top:24px;width:26px;height:14px;opacity:.75;
  background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2030%2016%22%20fill=%22none%22%3E%3Cpath%20d=%22M2%208h22%22%20stroke=%22%235AD3C3%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22/%3E%3Cpath%20d=%22M19%202l7%206-7%206%22%20stroke=%22%235AD3C3%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E") no-repeat center/contain}
@media (max-width:820px){
  .bahn ol.ablauf{grid-template-columns:1fr}
  .bahn ol.ablauf > li{padding:16px 0 16px 0 !important}
  .bahn ol.ablauf > li:not(:last-child)::after{right:auto;left:0;top:auto;bottom:-3px;
    width:14px;height:22px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2016%2030%22%20fill=%22none%22%3E%3Cpath%20d=%22M8%202v22%22%20stroke=%22%235AD3C3%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22/%3E%3Cpath%20d=%22M2%2019l6%207%206-7%22%20stroke=%22%235AD3C3%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
}

/* --- Pfeil an den Handlungsknoepfen und Textlinks --- */
.btn-p::after,.kopfknopf::after{content:"";display:inline-block;vertical-align:-1px;
  width:17px;height:11px;margin-left:9px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2030%2016%22%20fill=%22none%22%3E%3Cpath%20d=%22M2%208h22%22%20stroke=%22%235AD3C3%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22/%3E%3Cpath%20d=%22M19%202l7%206-7%206%22%20stroke=%22%235AD3C3%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E") no-repeat center/contain;
  filter:brightness(.25) saturate(1.6);
  transition:transform .28s cubic-bezier(.16,1,.3,1)}
.btn-p:hover::after,.kopfknopf:hover::after{transform:translateX(4px)}
.lnk::after,.gewerke .lnk::after{content:"";display:inline-block;vertical-align:-1px;
  width:17px;height:11px;margin-left:7px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2030%2016%22%20fill=%22none%22%3E%3Cpath%20d=%22M2%208h22%22%20stroke=%22%2300AA97%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22/%3E%3Cpath%20d=%22M19%202l7%206-7%206%22%20stroke=%22%2300AA97%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E") no-repeat center/contain;
  transition:transform .28s cubic-bezier(.16,1,.3,1)}
.lnk:hover::after{transform:translateX(4px)}
footer.site .lbtn::before{display:none}

/* --- Hintergruende: Weiss bleibt, aber nicht nackt --- */
.hero{position:relative;
  background:
    radial-gradient(760px 380px at 86% 8%, rgba(0,170,151,.10), transparent 62%),
    radial-gradient(620px 320px at 4% 92%, rgba(11,44,74,.07), transparent 64%),
    linear-gradient(180deg,#FFFFFF 0%,var(--hw-paper) 100%) !important}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle,rgba(11,44,74,.07) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(760px 420px at 70% 20%,#000,transparent 70%);
          mask-image:radial-gradient(760px 420px at 70% 20%,#000,transparent 70%)}
.hero > .wrap{position:relative;z-index:1}
.stage{background:
    radial-gradient(700px 340px at 50% 0%, rgba(0,170,151,.07), transparent 65%),
    var(--hw-surface2) !important}
.bahn{position:relative;overflow:hidden}
.bahn::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(620px 300px at 92% 10%, rgba(0,170,151,.16), transparent 62%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 1px,transparent 1px 15px)}
.bahn > .wrap{position:relative;z-index:1}

/* Auf Seiten ohne eigenen Reiter zieht das Skript den Schieber auf die
   volle Leistenbreite. Dort wird er ausgeblendet. */
body:has(#p-testen.on) .schieber,
body:has(#p-bestellen.on) .schieber,
body:has(#p-impressum.on) .schieber,
body:has(#p-datenschutz.on) .schieber,
body:has(#p-recht.on) .schieber{opacity:0 !important}

/* --- Standortanzeige: woran man sieht, wo man gerade ist --- */
body:has(#p-start.on) #hauptmenue button[onclick*="go('start')"],
body:has(#p-produkt.on) #hauptmenue button[onclick*="go('produkt')"],
body:has(#p-preise.on) #hauptmenue button[onclick*="go('preise')"],
body:has(#p-ueber.on) #hauptmenue button[onclick*="go('ueber')"],
body:has(#p-schulung.on) #hauptmenue button[onclick*="go('schulung')"],
body:has(#p-referenzen.on) #hauptmenue button[onclick*="go('referenzen')"],
body:has(#p-branchen.on) #hauptmenue button[onclick*="go('branchen')"],
body:has(#p-fragen.on) #hauptmenue button[onclick*="go('fragen')"],
body:has(#p-kontakt.on) #hauptmenue button[onclick*="go('kontakt')"],
body:has(#p-impressum.on) #hauptmenue button[onclick*="go('impressum')"],
body:has(#p-datenschutz.on) #hauptmenue button[onclick*="go('datenschutz')"],
body:has(#p-recht.on) #hauptmenue button[onclick*="go('recht')"]{color:var(--hw-navy) !important;font-weight:650 !important}
body:has(#p-start.on) footer.site .lbtn[onclick*="go('start')"],
body:has(#p-produkt.on) footer.site .lbtn[onclick*="go('produkt')"],
body:has(#p-preise.on) footer.site .lbtn[onclick*="go('preise')"],
body:has(#p-ueber.on) footer.site .lbtn[onclick*="go('ueber')"],
body:has(#p-schulung.on) footer.site .lbtn[onclick*="go('schulung')"],
body:has(#p-referenzen.on) footer.site .lbtn[onclick*="go('referenzen')"],
body:has(#p-branchen.on) footer.site .lbtn[onclick*="go('branchen')"],
body:has(#p-fragen.on) footer.site .lbtn[onclick*="go('fragen')"],
body:has(#p-kontakt.on) footer.site .lbtn[onclick*="go('kontakt')"],
body:has(#p-impressum.on) footer.site .lbtn[onclick*="go('impressum')"],
body:has(#p-datenschutz.on) footer.site .lbtn[onclick*="go('datenschutz')"],
body:has(#p-recht.on) footer.site .lbtn[onclick*="go('recht')"]{color:#fff !important;font-weight:600 !important}
body:has(#p-start.on) footer.site .lbtn[onclick*="go('start')"]::after,
body:has(#p-produkt.on) footer.site .lbtn[onclick*="go('produkt')"]::after,
body:has(#p-preise.on) footer.site .lbtn[onclick*="go('preise')"]::after,
body:has(#p-ueber.on) footer.site .lbtn[onclick*="go('ueber')"]::after,
body:has(#p-schulung.on) footer.site .lbtn[onclick*="go('schulung')"]::after,
body:has(#p-referenzen.on) footer.site .lbtn[onclick*="go('referenzen')"]::after,
body:has(#p-branchen.on) footer.site .lbtn[onclick*="go('branchen')"]::after,
body:has(#p-fragen.on) footer.site .lbtn[onclick*="go('fragen')"]::after,
body:has(#p-kontakt.on) footer.site .lbtn[onclick*="go('kontakt')"]::after,
body:has(#p-impressum.on) footer.site .lbtn[onclick*="go('impressum')"]::after,
body:has(#p-datenschutz.on) footer.site .lbtn[onclick*="go('datenschutz')"]::after,
body:has(#p-recht.on) footer.site .lbtn[onclick*="go('recht')"]::after{transform:scaleX(1)}

body:has(#p-start.on) footer.site .lbtn[onclick*="go('start')"]::before,
body:has(#p-produkt.on) footer.site .lbtn[onclick*="go('produkt')"]::before,
body:has(#p-preise.on) footer.site .lbtn[onclick*="go('preise')"]::before,
body:has(#p-ueber.on) footer.site .lbtn[onclick*="go('ueber')"]::before,
body:has(#p-schulung.on) footer.site .lbtn[onclick*="go('schulung')"]::before,
body:has(#p-referenzen.on) footer.site .lbtn[onclick*="go('referenzen')"]::before,
body:has(#p-branchen.on) footer.site .lbtn[onclick*="go('branchen')"]::before,
body:has(#p-fragen.on) footer.site .lbtn[onclick*="go('fragen')"]::before,
body:has(#p-kontakt.on) footer.site .lbtn[onclick*="go('kontakt')"]::before,
body:has(#p-impressum.on) footer.site .lbtn[onclick*="go('impressum')"]::before,
body:has(#p-datenschutz.on) footer.site .lbtn[onclick*="go('datenschutz')"]::before,
body:has(#p-recht.on) footer.site .lbtn[onclick*="go('recht')"]::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--hw-teal);margin-right:8px;vertical-align:2px}

@media (min-width:1041px){
  .sec2,.stage-head,.film-head{display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    column-gap:56px;align-items:start}
  .sec2 > h2,.stage-head > h2,.film-head > h3{grid-column:1;margin-top:0}
  .sec2 > p,.stage-head > p,.film-head > p{grid-column:2;margin-top:.35em}
  .sec2 > .eyebrow,.stage-head > .eyebrow{grid-column:1;grid-row:1}
  .sec2 > .eyebrow ~ h2{grid-row:2}
}

/* Die Ablaufkette darf die ganze Breite nutzen - die Seite begrenzt
   Listen sonst auf Lesebreite, da wurde aus vier Schritten ein Stapel. */
.bahn ol.ablauf{max-width:none !important;width:100% !important}
.bahn ol.ablauf > li{max-width:none !important}
/* feine Linie hinter den Nummern, damit die Kette als Kette liest */
.bahn ol.ablauf::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(90,211,195,.45),rgba(90,211,195,.08));
  transform:translateY(27px)}
.bahn ol.ablauf{position:relative}
@media (max-width:820px){.bahn ol.ablauf::before{display:none}}

/* Die beiden Fristen-Kaesten als richtige Karten */
.fristen{gap:22px !important}
.fristen > div{background:rgba(255,255,255,.03);border:1px solid var(--hw-line);
  border-radius:var(--hw-r-card);padding:22px 24px;
  transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s ease,border-color .28s ease}
.section--white .fristen > div,.panel .fristen > div{background:var(--hw-surface);
  box-shadow:var(--hw-schatten)}
.fristen > div:hover{transform:translateY(-3px);border-color:#CBD8DF;
  box-shadow:var(--hw-schatten-md)}
.fristen h3{margin-top:0 !important;color:var(--hw-navy) !important}
.fristen p{margin-bottom:0 !important;color:var(--hw-ink-soft) !important}

/* Der Schlussaufruf bekommt Luft und einen ruhigen Grund */
.abschluss{background:var(--hw-surface2);border:1px solid var(--hw-line);
  border-radius:16px;padding:38px 40px !important;margin-top:44px;
  background-image:radial-gradient(520px 240px at 88% 12%,rgba(0,170,151,.10),transparent 64%)}
.abschluss h2{margin-top:0 !important}
.abschluss{max-width:none !important}
.abschluss > p{max-width:62ch}


/* =====================================================================
   NACHTRAG 4 - Branchen als Karten mit gezeichneten Sinnbildern,
   Fragen als Klapper, Referenz- und Ueber-uns-Karte, Schulungskapitel
   ===================================================================== */
#p-branchen .grid.g3{display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:22px !important;max-width:none !important;margin-top:30px}
#p-branchen .cell{background:var(--hw-surface);border:1px solid var(--hw-line);
  border-radius:var(--hw-r-card);padding:24px 26px 26px;box-shadow:var(--hw-schatten);
  margin:0 !important;
  transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s ease,border-color .28s ease}
#p-branchen .cell:hover{transform:translateY(-4px);border-color:#CBD8DF;
  box-shadow:var(--hw-schatten-md)}
#p-branchen .cell::before{content:"";display:block;width:46px;height:46px;
  margin-bottom:16px;border-radius:12px;background-color:var(--hw-teal-soft);
  background-repeat:no-repeat;background-position:center;background-size:28px 28px}
#p-branchen .cell:nth-child(1)::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2048%22%20fill=%22none%22%20stroke=%22%230B2C4A%22%20stroke-width=%222.2%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M17%2010h14M18%2010v4l-3%204v18a4%204%200%20004%204h10a4%204%200%20004-4V18l-3-4v-4%22/%3E%3Cpath%20d=%22M24%2022l4%202.3v4.7L24%2031l-4-2v-4.7z%22%20stroke=%22%2300AA97%22/%3E%3C/svg%3E")}
#p-branchen .cell:nth-child(2)::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2048%22%20fill=%22none%22%20stroke=%22%230B2C4A%22%20stroke-width=%222.2%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M8%2028l20-12%2014%206v12a2%202%200%2001-2%202H10a2%202%200%2001-2-2z%22/%3E%3Cpath%20d=%22M8%2028l34%202%22%20/%3E%3Ccircle%20cx=%2218%22%20cy=%2234%22%20r=%222.4%22%20stroke=%22%2300AA97%22/%3E%3Ccircle%20cx=%2231%22%20cy=%2236%22%20r=%222%22%20stroke=%22%2300AA97%22/%3E%3C/svg%3E")}
#p-branchen .cell:nth-child(3)::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2048%22%20fill=%22none%22%20stroke=%22%230B2C4A%22%20stroke-width=%222.2%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M10%2030c0-7%206-13%2014-13s14%206%2014%2013v6a2%202%200%2001-2%202H12a2%202%200%2001-2-2z%22/%3E%3Cpath%20d=%22M18%2020c1.5%203%201.5%206%200%209M24%2018.5c1.6%203.4%201.6%207%200%2010.5M30%2020c1.5%203%201.5%206%200%209%22%20stroke=%22%2300AA97%22/%3E%3C/svg%3E")}
#p-branchen .cell:nth-child(4)::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2048%22%20fill=%22none%22%20stroke=%22%230B2C4A%22%20stroke-width=%222.2%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M19%208h6v6l3%205v21a2%202%200%2001-2%202h-8a2%202%200%2001-2-2V19l3-5z%22/%3E%3Cpath%20d=%22M16%2026h12%22%20stroke=%22%2300AA97%22/%3E%3Cpath%20d=%22M32%2022h8l-1.4%2018a2%202%200%2001-2%202h-1.2a2%202%200%2001-2-2z%22%20stroke=%22%2300AA97%22/%3E%3C/svg%3E")}
#p-branchen .cell:nth-child(5)::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2048%22%20fill=%22none%22%20stroke=%22%230B2C4A%22%20stroke-width=%222.2%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M9%2020h30v18a2%202%200%2001-2%202H11a2%202%200%2001-2-2z%22/%3E%3Cpath%20d=%22M7%2020l3-8h28l3%208%22%20stroke=%22%2300AA97%22/%3E%3Cpath%20d=%22M17%2020v-8M31%2020v-8%22%20stroke=%22%2300AA97%22/%3E%3Cpath%20d=%22M20%2040v-9h8v9%22/%3E%3C/svg%3E")}
#p-branchen .cell:nth-child(6)::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2048%2048%22%20fill=%22none%22%20stroke=%22%230B2C4A%22%20stroke-width=%222.2%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M16%209h16v5H16z%22/%3E%3Cpath%20d=%22M17%2014h14v24a3%203%200%2001-3%203H20a3%203%200%2001-3-3z%22/%3E%3Crect%20x=%2220%22%20y=%2222%22%20width=%228%22%20height=%229%22%20rx=%221.5%22%20stroke=%22%2300AA97%22/%3E%3C/svg%3E")}
#p-branchen .cell h3,#p-branchen .cell h4{margin:0 0 9px !important;
  color:var(--hw-navy) !important;font-size:1.05rem !important}
#p-branchen .cell p{margin:0 !important;color:var(--hw-ink-soft) !important;
  max-width:none !important}
@media (max-width:1000px){#p-branchen .grid.g3{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media (max-width:660px){#p-branchen .grid.g3{grid-template-columns:1fr !important}}

/* Fragen und Antworten: Klapper mit Zeichen rechts */
.fragen{display:grid;gap:10px;margin-top:26px;max-width:none !important}
details.frage{background:var(--hw-surface) !important;border:1px solid var(--hw-line);
  border-radius:var(--hw-r-card);padding:0 !important;overflow:hidden;
  transition:border-color .22s ease,box-shadow .22s ease}
details.frage:hover{border-color:#CBD8DF;box-shadow:var(--hw-schatten)}
details.frage[open]{border-color:#CBD8DF;box-shadow:var(--hw-schatten)}
details.frage > summary{list-style:none;cursor:pointer;position:relative;
  padding:17px 56px 17px 22px !important;font-weight:600 !important;
  color:var(--hw-navy) !important;transition:color .2s ease}
details.frage > summary::-webkit-details-marker{display:none}
details.frage > summary::after{content:"";position:absolute;right:20px;top:50%;
  width:13px;height:13px;margin-top:-6px;
  background:
    linear-gradient(var(--hw-teal),var(--hw-teal)) center/13px 2px no-repeat,
    linear-gradient(var(--hw-teal),var(--hw-teal)) center/2px 13px no-repeat;
  border:0 !important;transform:rotate(0deg);
  transition:transform .3s cubic-bezier(.16,1,.3,1)}
details.frage[open] > summary::after{transform:rotate(135deg)}
details.frage > *:not(summary){padding:0 22px 18px !important;
  color:var(--hw-ink-soft) !important;max-width:none !important;
  font-weight:400 !important}

/* Referenz und Ueber uns als richtige Karten */
.refkarte,.michkarte{background:var(--hw-surface);border:1px solid var(--hw-line);
  border-radius:var(--hw-r-card);box-shadow:var(--hw-schatten);overflow:hidden;
  margin-top:28px}
.refinhalt,.michtext{padding:26px 28px}
.refinhalt h3,.michtext h3{margin-top:0 !important;color:var(--hw-navy) !important}

/* Schulungskapitel als nummerierte Liste */
ol.kapitel{list-style:none !important;counter-reset:kap;padding:0 !important;
  display:grid;gap:2px;margin:24px 0 !important;max-width:none !important}
ol.kapitel > li{counter-increment:kap;position:relative;padding:11px 0 11px 46px !important;
  border-bottom:1px solid var(--hw-line-soft);color:var(--hw-ink-soft)}
ol.kapitel > li::before{content:counter(kap,decimal-leading-zero);position:absolute;left:0;
  top:12px;font:700 .78rem/1 Archivo,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:.12em;color:var(--hw-teal-d)}
ol.kapitel > li:last-child{border-bottom:0}

/* Die Abschnittskoepfe ueber dem Monitor bleiben einspaltig -
   sie stehen in einer schmalen Spalte, zweispaltig wurde das gequetscht. */
@media (min-width:1041px){
  .stage-head,.film-head{display:block}
  .stage-head{max-width:660px;margin-bottom:8px}
}

/* Portraetfeld auf "Ueber uns".
   Hinweis: /portraet-tom-hollinder.webp laedt nicht (die Seite blendet das
   Bild per onerror aus). Bis die Datei wieder da ist, sieht der Platzhalter
   wenigstens wie Absicht aus statt wie ein Loch. */
.michkarte{display:grid !important;
  grid-template-columns:300px minmax(0,1fr) !important;align-items:stretch}
.michbild{position:relative;min-height:380px;height:auto !important;overflow:hidden;
  display:grid;place-items:center;
  background:linear-gradient(158deg,#14466B 0%,#0B2C4A 55%,#06202F 100%) !important}
.michbild .michgrund{position:absolute;inset:0;
  background:radial-gradient(420px 320px at 72% 14%,rgba(0,170,151,.22),transparent 66%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 1px,transparent 1px 16px)}
.michzeichen{position:relative;z-index:1;
  font:700 clamp(56px,7vw,78px)/1 Archivo,"Helvetica Neue",Arial,sans-serif;
  color:rgba(255,255,255,.16);letter-spacing:.05em}
.michbild .michfoto{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 18%}
.michbild > div:last-child,.michunten{position:absolute !important;left:0;right:0;bottom:0;
  z-index:2;padding:16px 18px !important;color:#fff !important;
  background:linear-gradient(transparent,rgba(6,32,47,.9)) !important;
  border:0 !important;border-radius:0 !important}
.michbild > div:last-child *{color:#fff !important}
@media (max-width:760px){
  .michkarte{grid-template-columns:1fr !important}
  .michbild{min-height:260px}
}

/* Referenzkarte zweispaltig, Bild links */
@media (min-width:860px){
  .refkarte{display:grid !important;grid-template-columns:360px minmax(0,1fr) !important;
    align-items:stretch}
  .refbild{position:relative;overflow:hidden;background:var(--hw-surface2)}
  .refbild img{width:100%;height:100%;object-fit:cover;display:block}
}


/* =====================================================================
   NACHTRAG 5 - Das Bildpaar "vorher / nachher"
   Zwei Bildplaetze unter dem ersten Abschnitt der Startseite: links der
   Zustand ohne Hollinware, rechts mit. Dazwischen der Pfeil.

   EIGENE FOTOS EINSETZEN: nur diese zwei Zeilen aendern. Die Dateien
   neben website.html in public/ legen, dann z. B.
       --hw-bild-problem:url("bild-ueberfordert.jpg");
       --hw-bild-loesung:url("bild-zufrieden.jpg");
   Format 4:3 quer, mindestens 1200 x 900 Punkte. Solange nichts
   eingetragen ist, stehen die gezeichneten Bilder da.
   ===================================================================== */
:root{
  --hw-bild-problem:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20800%20560%22%20fill=%22none%22%3E%3Crect%20width=%22800%22%20height=%22560%22%20fill=%22%23EDF1F4%22/%3E%3Crect%20width=%22800%22%20height=%22560%22%20fill=%22url(%23g1)%22/%3E%3Cdefs%3E%3ClinearGradient%20id=%22g1%22%20x1=%220%22%20y1=%220%22%20x2=%220%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23F5F8F9%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23E3E9ED%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20transform=%22translate(60%2040)%22%3E%3Cg%20transform=%22rotate(-12%20180%20180)%22%3E%3Crect%20x=%22110%22%20y=%2270%22%20width=%22180%22%20height=%22230%22%20rx=%228%22%20fill=%22%23fff%22%20stroke=%22%23CFD9E0%22%20stroke-width=%223%22/%3E%3Cg%20stroke=%22%23DCE3E8%22%20stroke-width=%227%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M138%20112h124M138%20140h124M138%20168h86M138%20196h124M138%20224h66M138%20252h110%22/%3E%3C/g%3E%3C/g%3E%3Cg%20transform=%22rotate(6%20270%20200)%22%3E%3Crect%20x=%22190%22%20y=%2292%22%20width=%22190%22%20height=%22244%22%20rx=%228%22%20fill=%22%23fff%22%20stroke=%22%23C4D0D8%22%20stroke-width=%223%22/%3E%3Cg%20stroke=%22%23D6DFE5%22%20stroke-width=%227%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M220%20134h130M220%20162h130M220%20190h78M220%20218h130M220%20246h100M220%20274h54M220%20302h118%22/%3E%3C/g%3E%3C/g%3E%3Cg%20transform=%22rotate(-6%20440%20260)%22%3E%3Crect%20x=%22382%22%20y=%22140%22%20width=%22150%22%20height=%22212%22%20rx=%229%22%20fill=%22%23C2CFD8%22/%3E%3Crect%20x=%22382%22%20y=%22140%22%20width=%2236%22%20height=%22212%22%20rx=%229%22%20fill=%22%239AACB9%22/%3E%3Crect%20x=%22442%22%20y=%22178%22%20width=%2270%22%20height=%2213%22%20rx=%226%22%20fill=%22%23fff%22%20opacity=%22.8%22/%3E%3Crect%20x=%22442%22%20y=%22204%22%20width=%2250%22%20height=%2213%22%20rx=%226%22%20fill=%22%23fff%22%20opacity=%22.55%22/%3E%3C/g%3E%3Cg%20transform=%22rotate(7%20560%20300)%22%3E%3Crect%20x=%22470%22%20y=%22212%22%20width=%22200%22%20height=%22150%22%20rx=%228%22%20fill=%22%23fff%22%20stroke=%22%23C7D3DA%22%20stroke-width=%223%22/%3E%3Cpath%20d=%22M470%20246h200M470%20275h200M470%20304h200M470%20333h200M520%20212v150M572%20212v150M622%20212v150%22%20stroke=%22%23DFE6EA%22%20stroke-width=%222.5%22/%3E%3Crect%20x=%22470%22%20y=%22212%22%20width=%22200%22%20height=%2234%22%20rx=%228%22%20fill=%22%23E5EBEF%22/%3E%3C/g%3E%3Cg%20fill=%22%23A9B9C4%22%3E%3Cpath%20d=%22M196%2034c0-13%2011-24%2025-24s26%209%2026%2023c0%2010-7%2016-15%2021-7%205-9%208-9%2015v4h-12v-6c0-10%205-16%2012-21%207-4%2011-7%2011-13%200-7-5-12-12-12s-12%205-12%2013zm15%2061a8.6%208.6%200%201%201%200-17%208.6%208.6%200%200%201%200%2017z%22/%3E%3Cg%20opacity=%22.55%22%20transform=%22translate(300%20170)%20scale(.6)%22%3E%3Cpath%20d=%22M196%2034c0-13%2011-24%2025-24s26%209%2026%2023c0%2010-7%2016-15%2021-7%205-9%208-9%2015v4h-12v-6c0-10%205-16%2012-21%207-4%2011-7%2011-13%200-7-5-12-12-12s-12%205-12%2013zm15%2061a8.6%208.6%200%201%201%200-17%208.6%208.6%200%200%201%200%2017z%22/%3E%3C/g%3E%3C/g%3E%3Cg%20fill=%22%23fff%22%20stroke=%22%23DAE1E6%22%20stroke-width=%223%22%20opacity=%22.95%22%3E%3Crect%20x=%2252%22%20y=%22330%22%20width=%22118%22%20height=%2234%22%20rx=%226%22%20transform=%22rotate(-10%20111%20347)%22/%3E%3Crect%20x=%22556%22%20y=%22106%22%20width=%22100%22%20height=%2232%22%20rx=%226%22%20transform=%22rotate(13%20606%20122)%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --hw-bild-loesung:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20800%20560%22%20fill=%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22n%22%20x1=%220%22%20y1=%220%22%20x2=%220%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23113F64%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%2307253A%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width=%22800%22%20height=%22560%22%20fill=%22url(%23n)%22/%3E%3Ccircle%20cx=%22690%22%20cy=%2280%22%20r=%22190%22%20fill=%22%2300AA97%22%20opacity=%22.14%22/%3E%3Cg%20transform=%22translate(74%2086)%22%3E%3Crect%20x=%220%22%20y=%220%22%20width=%22652%22%20height=%22388%22%20rx=%2220%22%20fill=%22%230B2C4A%22%20stroke=%22%231C5076%22%20stroke-width=%223%22/%3E%3Crect%20x=%2234%22%20y=%2234%22%20width=%22176%22%20height=%2218%22%20rx=%229%22%20fill=%22%235AD3C3%22/%3E%3Crect%20x=%22226%22%20y=%2234%22%20width=%2292%22%20height=%2218%22%20rx=%229%22%20fill=%22%232F628A%22/%3E%3Cg%3E%3Crect%20x=%2234%22%20y=%2284%22%20width=%22584%22%20height=%2254%22%20rx=%2212%22%20fill=%22%230F3A5E%22/%3E%3Crect%20x=%2258%22%20y=%22102%22%20width=%2215%22%20height=%2218%22%20rx=%224%22%20fill=%22%2300AA97%22/%3E%3Crect%20x=%2292%22%20y=%22104%22%20width=%22230%22%20height=%2214%22%20rx=%227%22%20fill=%22%23A6C9E0%22/%3E%3Crect%20x=%22478%22%20y=%22104%22%20width=%22116%22%20height=%2214%22%20rx=%227%22%20fill=%22%234E7FA2%22/%3E%3Crect%20x=%2234%22%20y=%22150%22%20width=%22584%22%20height=%2254%22%20rx=%2212%22%20fill=%22%230F3A5E%22/%3E%3Crect%20x=%2258%22%20y=%22168%22%20width=%2215%22%20height=%2218%22%20rx=%224%22%20fill=%22%2300AA97%22/%3E%3Crect%20x=%2292%22%20y=%22170%22%20width=%22176%22%20height=%2214%22%20rx=%227%22%20fill=%22%23A6C9E0%22/%3E%3Crect%20x=%22478%22%20y=%22170%22%20width=%22116%22%20height=%2214%22%20rx=%227%22%20fill=%22%234E7FA2%22/%3E%3Crect%20x=%2234%22%20y=%22216%22%20width=%22584%22%20height=%2254%22%20rx=%2212%22%20fill=%22%230F3A5E%22/%3E%3Crect%20x=%2258%22%20y=%22234%22%20width=%2215%22%20height=%2218%22%20rx=%224%22%20fill=%22%2300AA97%22/%3E%3Crect%20x=%2292%22%20y=%22236%22%20width=%22258%22%20height=%2214%22%20rx=%227%22%20fill=%22%23A6C9E0%22/%3E%3Crect%20x=%22478%22%20y=%22236%22%20width=%22116%22%20height=%2214%22%20rx=%227%22%20fill=%22%234E7FA2%22/%3E%3Crect%20x=%2234%22%20y=%22282%22%20width=%22584%22%20height=%2254%22%20rx=%2212%22%20fill=%22%230F3A5E%22/%3E%3Crect%20x=%2258%22%20y=%22300%22%20width=%2215%22%20height=%2218%22%20rx=%224%22%20fill=%22%2300AA97%22/%3E%3Crect%20x=%2292%22%20y=%22302%22%20width=%22204%22%20height=%2214%22%20rx=%227%22%20fill=%22%23A6C9E0%22/%3E%3Crect%20x=%22478%22%20y=%22302%22%20width=%22116%22%20height=%2214%22%20rx=%227%22%20fill=%22%234E7FA2%22/%3E%3C/g%3E%3Ccircle%20cx=%22612%22%20cy=%22372%22%20r=%2244%22%20fill=%22%2300AA97%22/%3E%3Cpath%20d=%22M592%20372l13%2015%2027-31%22%20stroke=%22%2306202F%22%20stroke-width=%229%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/g%3E%3C/svg%3E");
}

/* Der alte Einzelbild-Platz entfaellt, dafuer das Paar */
#p-start > .wrap:has(+ .bahn) section::after{
  content:"";display:grid;position:relative;width:100%;max-width:1100px;
  margin:38px auto 8px;aspect-ratio:auto;height:auto;
  background:none;padding:0;
  grid-template-columns:1fr 92px 1fr;align-items:center;gap:0}
#p-start > .wrap:has(+ .bahn) section::after{display:block}

/* Da ::before und ::after jeweils nur ein Kasten sind, liegt das Paar in
   einem eigenen Streifen: ::before ist das linke, ::after das rechte Bild. */
#p-start > .wrap:has(+ .bahn) section{position:relative;padding-bottom:0}
#p-start > .wrap:has(+ .bahn) section::before,
#p-start > .wrap:has(+ .bahn) section::after{
  content:"";display:block;width:calc(50% - 46px);aspect-ratio:4 / 3;
  border-radius:16px;border:1px solid var(--hw-line);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  box-shadow:0 18px 40px -20px rgba(6,32,47,.32),0 3px 8px -3px rgba(6,32,47,.12);
  position:absolute;top:0;max-width:none;margin:0;padding:0;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease}
#p-start > .wrap:has(+ .bahn) section::before{
  left:0;background-image:var(--hw-bild-problem);
  filter:saturate(.72) contrast(1.02)}
#p-start > .wrap:has(+ .bahn) section::after{
  right:0;background-image:var(--hw-bild-loesung)}
#p-start > .wrap:has(+ .bahn) section:hover::before{transform:translateY(-4px)}
#p-start > .wrap:has(+ .bahn) section:hover::after{transform:translateY(-4px)}

/* Der Streifen braucht Platz und den Pfeil in der Mitte */
#p-start > .wrap:has(+ .bahn) section{padding-bottom:calc((50% - 46px) * .75 + 54px)}
#p-start > .wrap:has(+ .bahn) section::before{top:auto;bottom:34px}
#p-start > .wrap:has(+ .bahn) section::after{top:auto;bottom:34px}

/* Der Pfeil in der Luecke zwischen den beiden Bildern.
   Die Bildhoehe haengt an der Breite (4:3), darum rechnet die Lage mit
   cqw - so sitzt der Pfeil bei jeder Fensterbreite auf halber Hoehe. */
#p-start > .wrap:has(+ .bahn) section{
  container-type:inline-size;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2064%2034%22%20fill=%22none%22%3E%3Cpath%20d=%22M6%2017h36%22%20stroke=%22%2300AA97%22%20stroke-width=%227%22%20stroke-linecap=%22round%22/%3E%3Cpath%20d=%22M36%207l10%2010-10%2010%22%20stroke=%22%2300AA97%22%20stroke-width=%227%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
  background-repeat:no-repeat !important;
  background-size:56px 30px;
  background-position:50% calc(100% - (19px + (50cqw - 46px) * 0.375))}

@media (max-width:760px){
  /* untereinander: oben ohne Hollinware, unten mit */
  #p-start > .wrap:has(+ .bahn) section{
    padding-bottom:calc(150cqw + 140px);
    background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2034%2064%22%20fill=%22none%22%3E%3Cpath%20d=%22M17%206v36%22%20stroke=%22%2300AA97%22%20stroke-width=%227%22%20stroke-linecap=%22round%22/%3E%3Cpath%20d=%22M7%2036l10%2010%2010-10%22%20stroke=%22%2300AA97%22%20stroke-width=%227%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
    background-repeat:no-repeat !important;
    background-size:30px 56px;
    background-position:50% calc(100% - (75cqw + 42px))}
  #p-start > .wrap:has(+ .bahn) section::before{width:100%;bottom:calc(75cqw + 106px)}
  #p-start > .wrap:has(+ .bahn) section::after{width:100%;bottom:34px}
}

/* =====================================================================
   NACHTRAG 6 - Die Fotos
   Sechs Bilder, alle KI-erzeugt. Der Hinweis "KI-generiert" steht klein
   unten rechts IM Bild, damit er mitwandert, wo das Bild auch auftaucht.
   Die Dateien gehoeren nach public/, neben website.html.
   ===================================================================== */
:root{
  --hw-bild-problem:url("bild-vorher.jpg");
  --hw-bild-loesung:url("bild-nachher.jpg");
}

/* --- Dunkles Band: Foto darunter, Marineblau darueber --- */
.bahn{background-color:var(--hw-navy) !important;
  background-image:url("bild-band.jpg") !important;
  background-size:cover !important;background-position:50% 35% !important;
  background-repeat:no-repeat !important}
.bahn::before{background:
    linear-gradient(100deg,rgba(11,44,74,.97) 0%,rgba(11,44,74,.94) 46%,rgba(7,37,58,.90) 100%),
    radial-gradient(620px 300px at 92% 10%,rgba(0,170,151,.18),transparent 62%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 1px,transparent 1px 15px)}
@media (min-width:1041px) and (hover:hover){.bahn{background-attachment:fixed !important}}

/* --- Die beiden Fristen-Karten bekommen ein Bild oben --- */
.fristen > div{padding:0 !important;overflow:hidden}
.fristen > div::before{content:"";display:block;aspect-ratio:3 / 2;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  border-bottom:1px solid var(--hw-line)}
.fristen > div:nth-child(1)::before{background-image:url("bild-erechnung.jpg")}
.fristen > div:nth-child(2)::before{background-image:url("bild-kontrolle.jpg")}
.fristen > div > h3{margin:20px 24px 9px !important}
.fristen > div > p{margin:0 24px 22px !important;max-width:none !important}

/* --- Schlussaufruf: Text links, Foto rechts, weich auslaufend --- */
.abschluss{position:relative;overflow:hidden;min-height:318px;
  padding-right:46% !important}
.abschluss::before{content:"";position:absolute;right:0;top:0;bottom:0;width:46%;
  background:url("bild-vorfuehrung.jpg") 100% 45%/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);
          mask-image:linear-gradient(90deg,transparent 0,#000 24%)}
.abschluss > *{position:relative;z-index:1}
@media (max-width:860px){
  .abschluss{padding-right:40px !important;padding-top:0 !important;min-height:0}
  .abschluss::before{position:relative;width:auto;margin:-38px -40px 26px;
    aspect-ratio:16 / 9;display:block;
    -webkit-mask-image:none;mask-image:none}
}

/* Das dunkle Band zeigt das Foto nur schemenhaft unter dem Marineblau.
   Der eingebrannte Hinweis waere dort nicht lesbar, darum hier als Text. */
.bahn{position:relative}
.bahn::after{content:"Bild: KI-generiert";position:absolute;right:16px;bottom:12px;
  z-index:2;font:500 10px/1 Archivo,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:.04em;color:rgba(255,255,255,.42)}


/* =====================================================================
   NACHTRAG 9 - Die Seite "Referenzen"

   Vorher: ein grauer Kasten mit dem Logo darin, darunter eine Textwand
   und zwei blasse Links. Das sah unfertig aus.

   Jetzt: oben eine Kopfzeile aus Logoflaeche und Namen, darunter ein
   Steckbrief, der Flieestext, die genutzten Bereiche als Plaketten und
   die beiden Adressen als richtige Karten.
   Es werden keine neuen Angaben erfunden - alles stand vorher schon
   im Text, es ist nur sortiert.
   ===================================================================== */

#p-referenzen .refkarte{
  display:block !important;
  background:var(--hw-surface) !important;
  border:1px solid var(--hw-line) !important;
  border-radius:16px !important;
  box-shadow:var(--hw-schatten-md) !important;
  overflow:hidden;margin-top:30px !important;padding:0 !important}

/* ---- Kopfzeile: Logoflaeche und Name ---- */
#p-referenzen .refkopfzeile{
  display:grid;grid-template-columns:242px minmax(0,1fr);
  gap:30px;align-items:center;
  padding:30px 34px 28px !important;
  border-bottom:1px solid var(--hw-line-soft);
  background:linear-gradient(180deg,#FBFDFD 0%,#FFFFFF 100%)}

#p-referenzen .refbild{
  position:relative;overflow:hidden;
  display:grid !important;place-items:center;
  padding:26px 22px !important;min-height:148px;
  border:1px solid var(--hw-line) !important;border-radius:13px !important;
  background:
    radial-gradient(260px 190px at 26% 18%,rgba(0,170,151,.15),transparent 70%),
    linear-gradient(160deg,#FFFFFF 0%,#F4F8F9 58%,#E9F2F4 100%) !important}
#p-referenzen .refbild::before{content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg,rgba(11,44,74,.05) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(90deg,rgba(11,44,74,.05) 0 1px,transparent 1px 24px);
  -webkit-mask-image:radial-gradient(74% 74% at 50% 46%,#000 26%,transparent 100%);
  mask-image:radial-gradient(74% 74% at 50% 46%,#000 26%,transparent 100%)}
#p-referenzen .refbild img{
  position:relative;z-index:1;
  width:auto !important;height:auto !important;
  max-width:min(188px,88%) !important;max-height:116px !important;
  object-fit:contain !important;display:block;
  filter:drop-shadow(0 8px 18px rgba(11,44,74,.13))}

#p-referenzen .refkopf{display:block !important;min-width:0}
#p-referenzen .refaug{display:inline-flex;align-items:center;gap:9px;
  font:700 10.5px/1 Archivo,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;color:var(--hw-teal-d);
  margin-bottom:9px}
#p-referenzen .refaug::before{content:"";width:22px;height:2px;
  background:var(--hw-teal);border-radius:2px}
#p-referenzen .refkopf h3{margin:0 0 9px !important;
  color:var(--hw-navy) !important;font-weight:800 !important;
  font-size:clamp(1.5rem,2.6vw,2rem) !important;letter-spacing:-.02em;line-height:1.1}
#p-referenzen .refclaim{
  font-size:1.05rem !important;line-height:1.5 !important;
  font-weight:500 !important;color:var(--hw-ink) !important;
  margin:0 0 14px !important;max-width:40em}
#p-referenzen .refmarke{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px 7px 11px;border-radius:999px;
  background:var(--hw-teal-soft);border:1px solid #D2E6EC;
  font:600 11.5px/1 Archivo,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:.02em;color:var(--hw-navy);white-space:nowrap}
#p-referenzen .refmarke::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--hw-teal);box-shadow:0 0 0 3px rgba(0,170,151,.2)}

/* ---- Inhalt ---- */
#p-referenzen .refinhalt{padding:28px 34px 30px !important}
#p-referenzen .refinhalt > p{color:var(--hw-ink-soft) !important;max-width:62em}
#p-referenzen .rl-ziel::after{content:none !important}

/* ---- Steckbrief ---- */
#p-referenzen .refsteck{
  margin:0 0 24px !important;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;border-top:1px solid var(--hw-line-soft);
  border-bottom:1px solid var(--hw-line-soft)}
#p-referenzen .refsteck > div{padding:15px 22px 15px 0}
#p-referenzen .refsteck > div + div{padding-left:22px;
  border-left:1px solid var(--hw-line-soft)}
#p-referenzen .refsteck dt{
  font:700 9.8px/1 Archivo,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:.15em;text-transform:uppercase;color:var(--hw-muted);
  margin:0 0 6px}
#p-referenzen .refsteck dd{margin:0;color:var(--hw-navy);
  font-size:.925rem;line-height:1.45;font-weight:600}

/* ---- Zwischenueberschrift ---- */
#p-referenzen .refteil{
  font:700 10.5px/1 Archivo,"Helvetica Neue",Arial,sans-serif !important;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--hw-muted) !important;margin:26px 0 12px !important}

/* ---- genutzte Bereiche als Plaketten ---- */
#p-referenzen .refchips{list-style:none !important;
  margin:0 !important;padding:0 !important;
  display:flex;flex-wrap:wrap;gap:8px;max-width:none !important}
#p-referenzen .refchips li{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px 8px 11px;border-radius:999px;
  background:var(--hw-teal-soft);border:1px solid #D2E6EC;
  color:var(--hw-navy);font-size:.86rem;font-weight:600;line-height:1.2}
#p-referenzen .refchips li::before{content:"";flex:0 0 auto;
  width:13px;height:13px;background:var(--hw-teal);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zm3.9 5.9l-4.6 5a.9.9 0 01-1.3 0L3.9 8.7a.9.9 0 111.3-1.2l1.5 1.6 4-4.3a.9.9 0 111.2 1.1z'/%3E%3C/svg%3E") center/13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zm3.9 5.9l-4.6 5a.9.9 0 01-1.3 0L3.9 8.7a.9.9 0 111.3-1.2l1.5 1.6 4-4.3a.9.9 0 111.2 1.1z'/%3E%3C/svg%3E") center/13px no-repeat}

/* ---- die beiden Seiten als Karten ---- */
#p-referenzen .reflinks{
  display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;margin:0 !important;max-width:none !important}
#p-referenzen .reflink{
  position:relative;display:flex !important;flex-direction:column;gap:3px;
  padding:16px 46px 15px 17px !important;
  background:var(--hw-surface) !important;
  border:1px solid var(--hw-line) !important;border-radius:11px !important;
  text-decoration:none !important;box-shadow:none !important;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
#p-referenzen .reflink::after{content:"";position:absolute;right:16px;top:50%;
  width:15px;height:15px;margin-top:-7px;background:var(--hw-teal-d);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 3.5h8v8h-2V7L4 13.5 2.5 12 9 5.5H4.5z'/%3E%3C/svg%3E") center/15px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 3.5h8v8h-2V7L4 13.5 2.5 12 9 5.5H4.5z'/%3E%3C/svg%3E") center/15px no-repeat;
  transition:transform .2s ease}
#p-referenzen .reflink:hover{border-color:#BFD9E0 !important;
  box-shadow:var(--hw-schatten-md) !important;transform:translateY(-2px)}
#p-referenzen .reflink:hover::after{transform:translate(2px,-2px)}
#p-referenzen .rl-ziel{display:block;color:var(--hw-navy) !important;
  font-weight:700;font-size:.97rem;letter-spacing:-.005em;
  text-decoration:none !important}
#p-referenzen .rl-was{display:block;color:var(--hw-muted) !important;
  font-size:.83rem;font-weight:400}

/* ---- Hinweiszeile ---- */
#p-referenzen .refoffen{
  margin:24px 0 0 !important;padding:13px 16px !important;
  background:var(--hw-surface2) !important;border-radius:10px;
  border-left:3px solid var(--hw-teal) !important;
  color:var(--hw-ink-soft) !important;font-size:.875rem !important;
  line-height:1.55 !important;max-width:none !important}

/* ---- Abschlusszeile ---- */
#p-referenzen .note{margin-top:26px !important;
  padding:18px 20px !important;border:1px dashed var(--hw-line) !important;
  border-radius:12px;background:transparent !important;
  color:var(--hw-ink-soft) !important}
#p-referenzen .note a{color:var(--hw-teal-d) !important;font-weight:600}

/* ---- schmalere Fenster ---- */
@media (max-width:1040px){
  #p-referenzen .refsteck{grid-template-columns:repeat(2,minmax(0,1fr))}
  #p-referenzen .refsteck > div{padding:14px 20px 14px 0}
  #p-referenzen .refsteck > div + div{padding-left:0;border-left:0}
  #p-referenzen .refsteck > div:nth-child(2n){padding-left:22px;
    border-left:1px solid var(--hw-line-soft)}
  #p-referenzen .refsteck > div:nth-child(-n+2){
    border-bottom:1px solid var(--hw-line-soft)}
}
@media (max-width:760px){
  #p-referenzen .refkarte{border-radius:13px !important}
  #p-referenzen .refkopfzeile{grid-template-columns:minmax(0,1fr);
    gap:18px;padding:20px 18px 20px !important}
  #p-referenzen .refbild{min-height:128px;padding:20px 16px !important}
  #p-referenzen .refbild img{max-width:min(170px,62%) !important;max-height:98px !important}
  #p-referenzen .refinhalt{padding:20px 18px 22px !important}
  #p-referenzen .refsteck{grid-template-columns:minmax(0,1fr)}
  #p-referenzen .refsteck > div{padding:12px 0 !important;border-left:0 !important;
    border-bottom:1px solid var(--hw-line-soft)}
  #p-referenzen .refsteck > div:last-child{border-bottom:0}
  #p-referenzen .reflinks{grid-template-columns:minmax(0,1fr)}
  #p-referenzen .refchips li{font-size:.82rem;padding:7px 12px 7px 10px}
}