/* ══════════════════════════════════════════════════════════════════════════
   LUFTRAUMWERK — KOPF (Minimal-Nav), seitenübergreifend · 21.08.2026
   Ein Kopf für ALLE Seiten: links die freistehende Wortmarke (Korataki, ohne
   Kachel), rechts eine kompakte Pille „Menü", die zu einer Karte aufklappt
   (Menüpunkte mit rollendem Hover, Rechtliches, Kontakt). Vorbild: „Motion
   Minimal Navs" (Framer). Hell/dunkel schaltet die Seite über #bar.hell —
   dieselbe Klasse wie zuvor, die Chamäleon-Skripte der Seiten bleiben gültig.
   Alle Klassen tragen .lwk- und kollidieren mit nichts Bestehendem.
   ══════════════════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'Korataki';
  src:url('/assets/korataki.woff2?v=20260812') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
:root{
  --lwk-acid:#E8FF00;
  --lwk-ease:cubic-bezier(.22,1,.36,1);
  --lwk-rand:clamp(16px,2.4vw,40px);
  --lwk-oben:16px;
  --lwk-kopf:84px; /* Platzreserve für Seiten ohne Vollbild-Hero */
}
.lwk,.lwk *{box-sizing:border-box}

/* ── Rahmen: liegt über allem, fängt selbst keine Klicks ───────────────────
   ⚠️ ABSOLUT, nicht fixiert: die Wortmarke soll beim Scrollen mitgehen
   (Ansage Dominik, 21.08.). Nur die Menü-Karte bleibt oben verankert — sie
   trägt weiter unten ihr eigenes position:fixed. */
.lwk{
  position:absolute;top:0;left:0;right:0;z-index:9600;
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:var(--lwk-oben) var(--lwk-rand) 0;
  pointer-events:none;
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.lwk > *{pointer-events:auto}

/* ── Wortmarke: freistehend, Spec _MARKE_WORTMARKE_SPEC.md ─────────────── */
.lwk-marke{
  display:inline-flex;align-items:center;height:44px;margin-top:1px;
  font-family:'Korataki','Manrope',-apple-system,sans-serif;font-weight:400;
  font-size:14px;letter-spacing:.005em;text-transform:uppercase;
  color:#fff;text-decoration:none;white-space:nowrap;
  text-shadow:0 1px 12px rgba(0,0,0,.35);
  transition:color .45s var(--lwk-ease),opacity .25s,text-shadow .45s var(--lwk-ease);
}
.lwk-marke:hover{opacity:.8}
.lwk-marke b{font-weight:400;color:var(--lwk-acid);transition:color .45s var(--lwk-ease)}
.lwk-marke .brand-mark{
  font-family:'Korataki',sans-serif;font-size:.3em;font-weight:400;
  vertical-align:baseline;position:relative;top:-1.9em;margin-left:.16em;
  color:var(--lwk-acid);opacity:.95;transition:color .45s var(--lwk-ease);
}
.lwk.hell .lwk-marke{color:#0F0F0F;text-shadow:none}
.lwk.hell .lwk-marke b,.lwk.hell .lwk-marke .brand-mark{color:#8a9200}

/* ── Karte: zu = Pille, auf = Menü-Karte ───────────────────────────────────
   ⚠️ Absolut positioniert, NICHT als Flex-Kind: sonst staucht die Wortmarke
   die aufgeklappte Karte auf schmalen Bildschirmen (gemessen: 188 statt
   362 px, „Schließen" abgeschnitten). */
.lwk-karte{
  position:fixed;top:var(--lwk-oben);right:var(--lwk-rand);
  width:216px;max-width:calc(100vw - 2*var(--lwk-rand));
  border-radius:22px;overflow:hidden;isolation:isolate;
  color:#F3F3EE;
  /* Hausrezeptur Liquid Glass — 1:1 aus assets/liquidglass.css (.glass.n) */
  background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.03) 60%,rgba(255,255,255,.015));
  -webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 18px 50px rgba(0,0,0,.4);
  transition:width .6s var(--lwk-ease),border-radius .6s var(--lwk-ease),
    background .45s var(--lwk-ease),color .45s var(--lwk-ease),box-shadow .45s var(--lwk-ease);
}
/* Glanzkante oben — dieselbe wie auf allen Glaskacheln des Hauses */
.lwk-karte::before{
  content:'';position:absolute;left:0;right:0;top:0;height:44%;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.16),rgba(255,255,255,0));
}
.lwk-karte > *{position:relative;z-index:2}
/* Offen etwas dichter, damit die Menüpunkte über jedem Motiv lesbar bleiben */
.lwk.auf .lwk-karte{
  width:360px;border-radius:26px;
  background:linear-gradient(150deg,rgba(16,17,14,.72),rgba(10,10,10,.66) 60%,rgba(10,10,10,.62));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 30px 80px rgba(0,0,0,.5);
}
.lwk.hell .lwk-karte{
  color:#0A0A0A;
  background:linear-gradient(150deg,rgba(255,255,255,.62),rgba(255,255,255,.34) 70%,rgba(255,255,255,.26));
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(0,0,0,.05),0 18px 44px rgba(0,0,0,.14);
}
.lwk.hell .lwk-karte::before{background:linear-gradient(to bottom,rgba(255,255,255,.5),rgba(255,255,255,0))}
.lwk.hell.auf .lwk-karte{
  background:linear-gradient(150deg,rgba(250,250,247,.9),rgba(247,246,243,.84) 70%,rgba(247,246,243,.8));
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(0,0,0,.06),0 30px 80px rgba(0,0,0,.18);
}

/* Kopfzeile der Karte: Schalter links, WhatsApp rechts */
.lwk-zeile{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 4px 4px 6px;height:44px}
.lwk-schalter{
  display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 10px 0 8px;
  border:0;border-radius:999px;background:transparent;color:inherit;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;letter-spacing:.01em;
  transition:background .5s cubic-bezier(.44,0,.56,1);
}
.lwk-schalter:hover{background:rgba(255,255,255,.1)}
.lwk.hell .lwk-schalter:hover{background:rgba(0,0,0,.08)}
.lwk-schalter:focus-visible{outline:2px solid var(--lwk-acid);outline-offset:2px}
.lwk-ikon{position:relative;width:20px;height:20px;flex:none}
.lwk-ikon i{
  position:absolute;left:1px;width:18px;height:1px;background:currentColor;border-radius:1px;
  transition:transform .6s var(--lwk-ease),top .6s var(--lwk-ease);
}
.lwk-ikon i:nth-child(1){top:6px}
.lwk-ikon i:nth-child(2){top:12px}
.lwk.auf .lwk-ikon i:nth-child(1){top:9px;transform:rotate(45deg)}
.lwk.auf .lwk-ikon i:nth-child(2){top:9px;transform:rotate(-45deg)}
/* Beschriftung „Menü" ⇄ „Schließen": beide im selben Rasterfeld gestapelt, damit
   das BREITERE Wort die Breite bestimmt (sonst wird „Schließen" abgeschnitten). */
.lwk-wort{display:grid;height:18px;line-height:18px;overflow:hidden;text-align:left;white-space:nowrap}
.lwk-wort span{grid-area:1/1;display:block;transition:transform .6s var(--lwk-ease),opacity .4s}
.lwk-wort span:nth-child(2){transform:translateY(110%);opacity:0}
.lwk.auf .lwk-wort span:nth-child(1){transform:translateY(-110%);opacity:0}
.lwk.auf .lwk-wort span:nth-child(2){transform:none;opacity:1}
.lwk-wa{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;border-radius:50%;background:var(--lwk-acid);color:#12140c;
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 10px rgba(232,255,0,.22);
  transition:transform .5s var(--lwk-ease),box-shadow .4s var(--lwk-ease);
}
.lwk-wa:hover{transform:translateY(-1px) scale(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 18px rgba(232,255,0,.5)}
.lwk-wa:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lwk-wa svg{width:17px;height:17px;display:block}

/* ── Panel: Höhe 0 → Inhalt ────────────────────────────────────────────── */
.lwk-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--lwk-ease)}
.lwk.auf .lwk-panel{grid-template-rows:1fr}
.lwk-panel > div{min-height:0;overflow:hidden}
/* Bei niedrigen Fenstern darf die Karte nicht unten hinauslaufen */
.lwk-inhalt{display:flex;flex-direction:column;gap:22px;padding:22px 18px 22px;
  max-height:calc(100vh - var(--lwk-oben) - 44px - 24px);overflow-y:auto;overscroll-behavior:contain}
.lwk-panel[aria-hidden="true"] a,.lwk-panel[aria-hidden="true"] button{visibility:hidden}

.lwk-label{
  font-size:11.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin:0 0 8px;
}
.lwk.hell .lwk-label{color:rgba(10,10,10,.45)}
.lwk-gruppe{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.lwk-gruppe li{margin:0}
.lwk-strich{height:1px;background:rgba(255,255,255,.1)}
.lwk.hell .lwk-strich{background:rgba(0,0,0,.08)}

/* Menüpunkt mit rollendem Hover: zwei Zeilen übereinander in einem 26 px-Fenster */
.lwk-link{
  display:flex;align-items:center;gap:14px;padding:5px 0;
  color:inherit;text-decoration:none;
  font-size:20px;font-weight:500;letter-spacing:-.01em;line-height:1.3;
}
.lwk-roll{position:relative;display:block;height:26px;overflow:hidden;flex:1 1 auto;min-width:0}
.lwk-roll span{display:block;height:26px;line-height:26px;white-space:nowrap;transition:transform .6s var(--lwk-ease)}
.lwk-link:hover .lwk-roll span,.lwk-link:focus-visible .lwk-roll span{transform:translateY(-26px)}
.lwk-link .lwk-roll span:nth-child(2){color:var(--lwk-acid)}
.lwk.hell .lwk-link .lwk-roll span:nth-child(2){color:#6b7500}
.lwk-link[aria-current="page"] .lwk-roll span:nth-child(1)::before{
  content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--lwk-acid);margin:0 10px 3px 0;vertical-align:middle;
}
.lwk-link:focus-visible{outline:2px solid var(--lwk-acid);outline-offset:2px;border-radius:4px}
.lwk-klein .lwk-link{font-size:14px;font-weight:500;padding:3px 0}
.lwk-klein .lwk-roll,.lwk-klein .lwk-roll span{height:20px;line-height:20px}
.lwk-klein .lwk-link:hover .lwk-roll span,.lwk-klein .lwk-link:focus-visible .lwk-roll span{transform:translateY(-20px)}

/* Primärer Knopf: Projekt starten */
.lwk-cta{
  display:flex;align-items:center;justify-content:center;height:44px;margin-top:4px;
  border-radius:999px;background:var(--lwk-acid);color:#12140c;text-decoration:none;
  font-size:14px;font-weight:700;letter-spacing:.01em;
  transition:background .3s,color .3s,transform .5s var(--lwk-ease);
}
.lwk-cta:hover{background:#fff;transform:translateY(-1px)}
.lwk.hell .lwk-cta:hover{background:#0A0A0A;color:#fff}

/* Kontaktzeile: Ikonen links, Sprache rechts */
.lwk-kontakt{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lwk-ikonen{display:flex;gap:6px}
.lwk-ikonen a{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:50%;color:inherit;background:rgba(255,255,255,.06);
  transition:background .5s cubic-bezier(.44,0,.56,1),transform .5s var(--lwk-ease);
}
.lwk-ikonen a:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}
.lwk.hell .lwk-ikonen a{background:rgba(0,0,0,.05)}
.lwk.hell .lwk-ikonen a:hover{background:rgba(0,0,0,.1)}
.lwk-ikonen svg{width:17px;height:17px;display:block}
.lwk-sprache{
  font-size:12.5px;font-weight:600;letter-spacing:.04em;color:inherit;text-decoration:none;
  opacity:.7;padding:6px 10px;border-radius:999px;transition:opacity .3s,background .4s;
}
.lwk-sprache:hover{opacity:1;background:rgba(255,255,255,.1)}
.lwk.hell .lwk-sprache:hover{background:rgba(0,0,0,.08)}

/* ── Erscheinen der Inhalte: weich, leicht unscharf, von unten, gestaffelt ── */
.lwk-inhalt > *{
  opacity:0;filter:blur(6px);transform:translateY(10px) scale(.98);
  transition:opacity .5s cubic-bezier(.22,.61,.36,1),filter .5s cubic-bezier(.22,.61,.36,1),
    transform .5s cubic-bezier(.22,.61,.36,1);
}
.lwk.auf .lwk-inhalt > *{opacity:1;filter:none;transform:none}
.lwk.auf .lwk-inhalt > :nth-child(1){transition-delay:.08s}
.lwk.auf .lwk-inhalt > :nth-child(2){transition-delay:.13s}
.lwk.auf .lwk-inhalt > :nth-child(3){transition-delay:.18s}
.lwk.auf .lwk-inhalt > :nth-child(4){transition-delay:.23s}
.lwk.auf .lwk-inhalt > :nth-child(5){transition-delay:.28s}
.lwk.auf .lwk-inhalt > :nth-child(6){transition-delay:.33s}
.lwk.auf .lwk-inhalt > :nth-child(7){transition-delay:.38s}

/* ── Seiten ohne Vollbild-Hero reservieren den Platz (wie bisher body.lws-pad) ── */
body.lws-pad{padding-top:var(--lwk-kopf)}

/* ── Schleier hinter der offenen Karte auf kleinen Bildschirmen ─────────── */
.lwk-schleier{position:fixed;inset:0;z-index:9599;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .5s}
.lwk.auf ~ .lwk-schleier{opacity:1;pointer-events:auto}

/* ── Tablet / Smartphone ───────────────────────────────────────────────── */
@media(min-width:681px) and (max-width:1024px){
  .lwk-marke{font-size:12px}
}
@media(max-width:680px){
  :root{--lwk-oben:12px;--lwk-rand:14px}
  .lwk-marke{font-size:10px;letter-spacing:0;height:40px}
  .lwk-marke .brand-mark{font-size:.34em;top:-1.8em;margin-left:.2em}
  .lwk-karte{width:172px;border-radius:20px}
  .lwk-zeile{height:40px;padding:2px 2px 2px 4px}
  .lwk-schalter{height:36px}
  .lwk.auf .lwk-karte{width:calc(100vw - 2*var(--lwk-rand))}
  /* Die volle Karte deckt die Wortmarke zu — sie tritt weich zurück */
  .lwk.auf .lwk-marke{opacity:0;transition:opacity .3s}
  .lwk-inhalt{padding:18px 16px 18px}
  .lwk-link{font-size:19px}
}
@media(prefers-reduced-motion:reduce){
  .lwk *,.lwk{transition-duration:.01ms !important;transition-delay:0s !important}
}

/* ══ Vorfahrt vor den Seiten-Stylesheets ═══════════════════════════════════
   ⚠️ lw-seite.css setzt `.lwp-body a{color:#E4E4E4}` (Spezifität 0,2,0) und
   färbte damit das WhatsApp-Zeichen und die Menülinks grau — gemessen am
   21.08.: Glyph rgb(228,228,228) statt #12140c. Diese Regeln stehen bewusst
   mit einer Klasse mehr und ganz am Ende. */
.lwk a.lwk-wa{color:#12140c}
.lwk a.lwk-link{color:inherit}
.lwk a.lwk-cta{color:#12140c}
.lwk.hell a.lwk-cta:hover{color:#fff}
.lwk a.lwk-sprache{color:inherit}
.lwk .lwk-ikonen a{color:inherit}
.lwk a.lwk-link .lwk-roll span:nth-child(2){color:var(--lwk-acid)}
.lwk.hell a.lwk-link .lwk-roll span:nth-child(2){color:#6b7500}