/* ══════════════════════════════════════════════════════════════════════════
   LUFTRAUMWERK — HERO & GLAS für die Struktur-Seiten · 21.08.2026
   Bringt den Auftritt der Säulenseiten (Vollbild-Motiv + Liquid-Glass-Karte)
   auf die bis dahin flachen Textseiten. Alle Werte 1:1 aus
   assets/liquidglass.css (.wall/.hero-wrap/.glass/.pad/.eyebrow/.btn) —
   jenes Stylesheet wird hier NICHT geladen, weil es eigene Körper-, Reset-
   und Schriftregeln mitbrächte und lw-seite.css zerlegen würde.
   Wer dort etwas ändert, muss es hier nachziehen.
   Eigener Namensraum .lwh- · kollidiert mit nichts Bestehendem.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --lwh-acc:#E8FF00;
  --lwh-ink:#12140c;
  --lwh-r:28px;
  --lwh-ease:cubic-bezier(.32,.72,0,1);
  --lwh-rand:clamp(24px,3.2vw,56px);
}
.lwh-wall,.lwh-wall *,.lwh-hero,.lwh-hero *{box-sizing:border-box}

/* ── Vollbild-Motiv, oben verankert, nach unten weich auslaufend ────────── */
.lwh-wall{
  position:absolute;top:0;left:0;right:0;height:108svh;z-index:0;overflow:hidden;
  background:#0A0A0A;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 46%,rgba(0,0,0,.72) 66%,rgba(0,0,0,.32) 84%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 46%,rgba(0,0,0,.72) 66%,rgba(0,0,0,.32) 84%,transparent 100%);
}
.lwh-wall img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);will-change:transform;
  animation:lwhAtmen 34s var(--lwh-ease) infinite alternate}
@keyframes lwhAtmen{from{transform:scale(1.03)}to{transform:scale(1.08)}}
.lwh-wall video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  opacity:0;transition:opacity 1.2s var(--lwh-ease)}
.lwh-wall video.on{opacity:1}
.lwh-wall::after{content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(to bottom,rgba(5,5,6,.42),rgba(5,5,6,.12) 40%,rgba(5,5,6,.4) 100%)}
@media(max-width:600px){.lwh-wall img,.lwh-wall video{object-position:var(--fokus-phone,50%) 50%}}
@media(min-width:601px) and (max-width:1180px) and (orientation:portrait){
  .lwh-wall img,.lwh-wall video{object-position:var(--fokus-pad,50%) 50%}
}
@media(prefers-reduced-motion:reduce){.lwh-wall img{animation:none}.lwh-wall video{display:none}}

/* ── Hero: Karte sitzt tief, oben bleibt bewegtes Bild ──────────────────── */
.lwh-hero{
  position:relative;z-index:2;
  min-height:calc(100svh - 72px);display:flex;align-items:flex-end;justify-content:flex-start;
  padding:0 var(--lwh-rand) clamp(14px,2vh,26px);
}
/* Kurzfassung für rechtliche Seiten und Support: gleiche Sprache, halbe Höhe.
   ⚠️ Das Motiv muss mitschrumpfen — sonst läuft es hinter den Fließtext und
   der ist unlesbar (gemessen am 21.08. auf /impressum.html). */
.lwh-hero.lwh-knapp{min-height:clamp(340px,52svh,520px)}
.lwh-hero.lwh-knapp .lwh-karte{max-width:720px}
.lwh-wall.lwh-knapp{height:clamp(420px,64svh,640px)}

/* ── Die Glaskarte ─────────────────────────────────────────────────────── */
.lwh-karte{
  position:relative;width:100%;max-width:640px;border-radius:var(--lwh-r);overflow:hidden;isolation:isolate;
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 60%,rgba(255,255,255,.01));
  -webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 30px 80px rgba(0,0,0,.45);
  padding:clamp(23px,2.7vw,40px);
  color:#fff;
}
.lwh-karte::before{content:'';position:absolute;left:0;right:0;top:0;height:40%;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.14),rgba(255,255,255,0))}
.lwh-karte > *{position:relative;z-index:2}
@media(max-width:620px){.lwh-karte{max-width:none}}

.lwh-kicker{
  display:inline-flex;align-items:center;gap:9px;margin:0;
  font-family:'Orbitron','Manrope',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;
}
.lwh-kicker::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--lwh-acc);flex:none}
.lwh-hero h1{
  margin:14px 0 0;font-family:'Manrope',system-ui,sans-serif;
  font-size:clamp(31px,4.15vw,58px);line-height:1.04;letter-spacing:-.03em;font-weight:800;color:#fff;
}
.lwh-hero h1 .lwh-acc{color:var(--lwh-acc)}
.lwh-sub{margin:14px 0 0;font-size:17px;max-width:38ch;line-height:1.45;color:rgba(255,255,255,.76);font-weight:400}

.lwh-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.lwh-btn{
  display:inline-flex;align-items:center;gap:10px;padding:13px 21px;border-radius:999px;
  font-weight:700;font-size:14px;letter-spacing:-.02em;text-decoration:none;
  transition:.3s var(--lwh-ease);
}
.lwh-btn-acc{background:var(--lwh-acc);color:var(--lwh-ink)}
.lwh-btn-acc:hover{transform:translateY(-2px);box-shadow:0 0 30px rgba(232,255,0,.45)}
.lwh-btn-glas{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.lwh-btn-glas:hover{background:rgba(255,255,255,.2)}
.lwh-btn .lwh-dot{
  width:23px;height:23px;border-radius:50%;background:var(--lwh-ink);color:var(--lwh-acc);
  display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex:none;
}
.lwh-btn-glas .lwh-dot{background:var(--lwh-acc);color:var(--lwh-ink)}
.lwh-btn:focus-visible{outline:2px solid var(--lwh-acc);outline-offset:3px}

/* ── Der Inhalt darunter liegt über dem auslaufenden Motiv ──────────────── */
.lwh-seite{position:relative;z-index:2}
/* Seiten mit Hero brauchen die alte Kopf-Platzreserve nicht mehr */
body.lwh-an{padding-top:0 !important}
/* Brotkrume: sitzt jetzt unter dem Hero, nicht mehr unter der Kopfleiste */
body.lwh-an .lws-krume{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.08)}

@media(max-width:680px){
  .lwh-hero{min-height:calc(100svh - 56px);padding-left:14px;padding-right:14px}
  .lwh-hero h1{font-size:clamp(28px,7.6vw,40px)}
  .lwh-sub{font-size:15.5px}
}
@media(prefers-reduced-motion:reduce){.lwh-btn,.lwh-wall video{transition:none}}

/* ══ Vorfahrt vor den Seiten-Stylesheets ═══════════════════════════════════
   Wie oben: `.lwp-body a{color:#E4E4E4}` überschreibt sonst die Knopffarben. */
.lwh-cta a.lwh-btn-acc{color:var(--lwh-ink)}
.lwh-cta a.lwh-btn-glas{color:#fff}
.lwh-karte h1,.lwh-karte .lwh-kicker{color:#fff}