/* pottscale · Startseiten-Hero mit Video. Maßsystem an die Bildschirmhöhe gekoppelt (Referenz 1487 × 1058),
   Text auf dem Seitenraster, Kopfzeile über dem Video transparent (Klasse .oben aus site.js). */
.hv{
  --u:calc(max(100vh,600px) / 1058);
  --uw:calc(100vw / 1487);
  --h:clamp(var(--u),calc(var(--u) * .4 + var(--uw) * .6),calc(var(--u) * 1.3));
  --links:max(24px,calc((100vw - var(--breite)) / 2 + 24px));
  /* Die Szene rückt nach rechts, bis sie mit Abstand neben dem Text steht. 300u ist die halbe Breite der Logo-Fontäne. */
  --versatz:max(calc(60 * var(--u)),calc(var(--links) + max(750 * var(--h),590px) + 44px + 300 * var(--u) - 50vw));
  position:relative;isolation:isolate;height:max(100vh,600px);overflow:hidden;overflow:clip;background:var(--nacht);color:#fff
}
@supports (height:100svh){
  .hv{--u:calc(max(100svh,600px) / 1058);height:max(100svh,600px)}
}
.hv-plate{position:absolute;inset:0;z-index:0;overflow:hidden;isolation:isolate;background:var(--nacht)}
/* Farbe und Logos stecken fest im Video, die Ränder laufen über ::after in Nacht aus */
.hv-video{position:absolute;left:50%;top:calc(4 * var(--u));width:calc(1405 * var(--u));height:calc(1054 * var(--u));transform:translateX(calc(-50% + var(--versatz)));object-fit:cover;pointer-events:none}
.hv-plate::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:
  linear-gradient(to bottom,rgba(3,35,45,0) 84%,rgba(3,35,45,.45) 87%,rgba(3,35,45,.84) 90%,rgba(3,35,45,.95) 95%,#03232D 100%),
  linear-gradient(to right,#03232D calc(50% + var(--versatz) - 702 * var(--u)),transparent calc(50% + var(--versatz) - 420 * var(--u)),transparent calc(50% + var(--versatz) + 540 * var(--u)),#03232D calc(50% + var(--versatz) + 702 * var(--u)))}
.hv-in{position:relative;z-index:3;max-width:var(--breite);margin:0 auto;padding:calc(204 * var(--u)) max(24px,env(safe-area-inset-right,0px)) 0 max(24px,env(safe-area-inset-left,0px))}
.hv-ziel{margin:calc(-34 * var(--h)) 0 calc(12 * var(--h));font:600 max(13px,calc(16 * var(--h)))/1.3 var(--display);letter-spacing:.01em;color:var(--mint)}
.hv h1{margin:0;font:800 calc(60 * var(--h))/1.04 var(--display);letter-spacing:-.035em;color:#fff;white-space:nowrap}
.hv h1 span{display:block}
.hv h1 em{display:block;margin-top:calc(4 * var(--h));font:italic 400 calc(68 * var(--h))/1.08 var(--akzent);letter-spacing:-.015em;color:var(--mint);background:none;-webkit-text-fill-color:currentColor;animation:none}
.hv-sub{margin:calc(26 * var(--h)) 0 0;font:400 max(18px,calc(23 * var(--h)))/1.45 var(--body);color:rgba(238,248,246,.82)}
.hv-sub span{display:block;white-space:nowrap}
.hv-sub b{font-weight:600;color:#fff;white-space:nowrap}
.hv-actions{display:flex;align-items:center;gap:30px;margin-top:calc(30 * var(--h))}
.hv-ghost{font:600 16.5px/1.2 var(--display);color:#fff;text-decoration:none;white-space:nowrap;transition:color .2s}
.hv-ghost:hover{color:var(--mint)}
/* Trust-Signale unter den Knöpfen: Bewertungen und Kennzahlen auf dunklem Grund */
.hv .trust-chips{gap:10px;margin-top:calc(24 * var(--h))}
.hv .google-chip{gap:12px;padding:calc(10 * var(--h)) 16px;background:rgba(3,35,45,.55);border-color:rgba(148,224,203,.25);color:#fff;box-shadow:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hv .google-chip svg,.hv .pe-icon{width:26px;height:26px}
.hv .google-chip b{font-size:15px}
.hv .google-chip div>span{font-size:12.5px;color:var(--nt)}
.hv .hero-zahlen{max-width:max(calc(750 * var(--h)),590px);margin-top:calc(20 * var(--h));padding-top:calc(18 * var(--h));border-top-color:rgba(148,224,203,.2)}
.hv .hero-zahlen div{border-right-color:rgba(148,224,203,.2)}
.hv .hero-zahlen b{font-size:max(26px,calc(38 * var(--h)));color:#fff}
.hv .hero-zahlen span{font-size:12.5px;color:var(--nt)}
.hv .hero-zahlen b{white-space:nowrap}
.hv .hero-zahlen span{white-space:nowrap}
.hv .hero-zahlen div{gap:10px;padding-right:18px;margin-right:18px}

/* Kopfzeile über dem Video */
body:not(.menue-offen) .kopf.oben .kopf-in{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.kopf-in{transition:background .3s,border-color .3s,box-shadow .3s}
.kopf-logo .logo-dunkel{display:none}
body:not(.menue-offen) .kopf.oben .logo-hell{display:none}
body:not(.menue-offen) .kopf.oben .logo-dunkel{display:block}
body:not(.menue-offen) .kopf.oben .kopf-link{color:#D6EFEA}
body:not(.menue-offen) .kopf.oben .kopf-link:hover{background:rgba(148,224,203,.12)}
body:not(.menue-offen) .kopf.oben .kopf-in>.btn{background:var(--mint);color:var(--nacht);box-shadow:none}
body:not(.menue-offen) .kopf.oben .kopf-menue{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
body:not(.menue-offen) .kopf.oben .kopf-menue span{background:#fff}

@media (prefers-reduced-motion:no-preference){
  @keyframes hv-rise{from{opacity:0;transform:translateY(14px)}}
  /* Überschrift ohne Ausblenden: Sie ist das größte Element, eine Deckkraft-Einblendung verzögert das LCP */
  @keyframes hv-hoch{from{transform:translateY(14px)}}
  .hv-ziel{animation:hv-rise .9s cubic-bezier(.22,1,.36,1) .06s both}
  .hv h1{animation:hv-hoch .9s cubic-bezier(.22,1,.36,1) both}
  .hv-sub{animation:hv-rise .9s cubic-bezier(.22,1,.36,1) .14s both}
  .hv-actions{animation:hv-rise .9s cubic-bezier(.22,1,.36,1) .22s both}
  .hv .trust-chips,.hv .hero-zahlen{animation:hv-rise .9s cubic-bezier(.22,1,.36,1) .3s both}
}

/* Hochformat: Text im Fluss, die ganze Szene steht darunter statt abgedunkelt dahinter */
@media (max-aspect-ratio:11/10){
  .hv{--m:min(calc(100vw / 430),1.34px);--u:var(--m);--h:var(--m);display:flex;flex-direction:column;height:auto;min-height:100vh}
  @supports (height:100svh){.hv{--u:var(--m);height:auto;min-height:100svh}}
  .hv-video{top:auto;bottom:0;width:128vw;height:96vw;transform:translateX(-50%)}
  .hv-plate::after{background:linear-gradient(to top,#03232D 0,rgba(3,35,45,.6) 9vw,transparent 22vw)}
  .hv-in{flex:none;width:100%;padding:calc(88px + env(safe-area-inset-top,0px)) 22px 90vw}
  .hv-ziel{margin:0 0 calc(10 * var(--m));font-size:max(13px,calc(15 * var(--m)))}
  .hv h1{white-space:normal;font-size:calc(44 * var(--m));line-height:1.05;text-wrap:balance}
  .hv h1 span{display:inline}
  .hv h1 em{margin-top:calc(6 * var(--m));font-size:calc(50 * var(--m))}
  .hv-sub{margin-top:calc(18 * var(--m));font-size:max(18px,calc(22 * var(--m)))}
  .hv-sub span{display:inline;white-space:normal}
  .hv-actions{flex-direction:column;align-items:stretch;gap:calc(14 * var(--m));margin-top:calc(22 * var(--m))}
  .hv .trust-chips{margin-top:calc(18 * var(--m))}
  .hv .google-chip{gap:8px;padding:10px;align-items:center}
  .hv .google-chip svg,.hv .pe-icon{width:22px;height:22px}
  .hv .google-chip b{font-size:13px}
  .hv .google-chip div>span{font-size:11px;line-height:1.3}
  .hv .hero-zahlen{max-width:none;margin-top:calc(16 * var(--m));padding-top:calc(14 * var(--m))}
  .hv .hero-zahlen b{font-size:calc(27 * var(--m))}
  .hv .hero-zahlen span{font-size:11.5px}
  .hv .hero-zahlen span{white-space:normal}
  .hv .hero-zahlen div{margin-right:10px;padding-right:10px}
  .hv-actions .btn{width:100%;justify-content:space-between;padding-inline:24px 22px}
  .hv-ghost{text-align:center;padding:6px 0}
}
@media (max-aspect-ratio:11/10) and (min-width:600px){
  .hv{--m:min(calc(100vw / 860),calc(100vh / 760),1.25px)}
  .hv-video{width:100vw;height:75vw}
  .hv-plate::after{background:linear-gradient(to top,#03232D 0,rgba(3,35,45,.55) 7vw,transparent 16vw)}
  .hv-in{padding-inline:calc(48 * var(--m));padding-bottom:72vw}
  .hv .trust-chips{display:flex}
  .hv .google-chip{gap:12px;padding:10px 16px}
  .hv .google-chip b{font-size:15px}
  .hv .google-chip div>span{font-size:12.5px}
  .hv .hero-zahlen{max-width:none}
  .hv .hero-zahlen b{font-size:calc(36 * var(--m))}
  .hv .hero-zahlen span{font-size:12.5px}
  .hv h1{font-size:calc(66 * var(--m))}.hv h1 span{display:block}.hv h1 em{font-size:calc(74 * var(--m))}
  .hv-sub{font-size:calc(25 * var(--m))}.hv-sub span{display:block}
  .hv-actions{flex-direction:row;align-items:center;gap:calc(26 * var(--m))}
  .hv-actions .btn{width:auto}
}
@media (max-width:345px){
  .hv-actions .btn{font-size:13.5px;padding-inline:16px 18px;gap:8px}
}