/* ══════════════════════════════════════════════════════════════════════════════
   LUFTRAUMWERK® — DESIGNSYSTEM 2026
   🔒 VERSION 1.0 — VERBINDLICH · 17.08.2026 · 17.08.2026 · Phase 2 des Relaunch

   Dieses System ist eingefroren. Farben, Schriften, Skala, Raster, Motion und
   Komponenten werden nicht mehr gestalterisch verändert. Fehlt etwas, kommt eine
   NEUE Komponente dazu — bestehende Tokens werden nicht umdefiniert.
   Doku: _RELAUNCH_PHASE2_DESIGNSYSTEM_2026-08-17.md
   Eine Datei, alle Seiten. Wird VOR marke.css geladen (marke.css hat das letzte Wort
   über die Wortmarke).
   ────────────────────────────────────────────────────────────────────────────
   INHALT
   01  Tokens — Farbe, Typo, Raum, Motion
   02  Reset & Grundlagen
   03  Raster & Layout
   04  Typografie
   05  Buttons
   06  Links
   07  Navigation (Desktop + Mobile)
   08  Footer
   09  Medienflächen & Kacheln
   10  Leistungszeilen
   11  Formular
   12  Motion & Reveal
   13  Barrierefreiheit
   Light-Section: siehe .lw-invert direkt unter den Tokens
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══ 01 TOKENS ═══════════════════════════════════════════════════════════ */
:root{
  /* ── Farbe ──────────────────────────────────────────────────────────────
     BASE DARK #080808 laut Marken-Briefing. Deep- und Surface-Töne ergänzen
     nach unten und oben, sie ersetzen die Basis nicht.

     LIME: EIN einziger Signature-Ton, bestimmt aus dem bestehenden freigegebenen
     Markenasset — `Luftraumwerk/_MARKE_WORTMARKE_SPEC.md` (12.08.2026, verbindlich
     für ALLE Projekte) legt für „WERK" und das ® den Wert #E8FF00 fest. Bestätigt
     durch `assets/marke.css` und den Marken-Prompt.
     (Das alte `lw_logo.svg` trägt noch das ersetzte Navy/Gold-CI #00235F/#F9BA00
     und ist als Quelle ungültig.)
     Dieser eine Ton gilt überall. Keine zweite Lime-Variante anlegen.        */
  --lw-black:        #080808;   /* Base Dark — Markenbasis                    */
  --lw-black-deep:   #040404;   /* tiefer als Basis — Full-Bleed, Kinoflächen */
  --lw-surface-1:    #0D0D0D;   /* abgesetzte Fläche                          */
  --lw-surface-2:    #131313;   /* Karte, Eingabefeld                         */
  --lw-line:         #1F1F1F;   /* Trennlinie ruhig                           */
  --lw-line-strong:  #2E2E2E;   /* Trennlinie aktiv                           */

  --lw-white:        #FFFFFF;   /* Headline, echte Weißflächen        19,9:1  */
  --lw-paper:        #F2F2F2;   /* Lead, kräftiger Text               17,2:1  */
  --lw-text:         #E4E4E4;   /* FLIESSTEXT — Standard für Bodycopy  15,0:1 */
  --lw-muted:        #ABABAB;   /* Sekundärtext, ruhige UI-Angaben     8,5:1  */
  --lw-muted-2:      #7C7C7C;   /* NUR sekundäre Metadaten             4,7:1  */

  --lw-acid:         #E8FF00;   /* Signature Accent — aus dem Markenasset     */
  --lw-acid-dim:     rgba(232,255,0,.12);
  --lw-acid-line:    rgba(232,255,0,.34);
  --lw-acid-ink:     #080808;   /* Text AUF Lime — nie Weiß, Kontrast 18,1:1  */

  /* helle Sektion (Invers) */
  --lw-ink:          #080808;
  --lw-ink-muted:    #4A4A4E;

  /* ── Schrift ────────────────────────────────────────────────────────────
     DREI Schriften, mehr nicht:
     Korataki = ausschließlich die Wortmarke LUFTRAUMWERK® (siehe marke.css)
     Antonio  = große Display-H1/H2, Projekt- und Section-Statements
     Manrope  = Body, Navigation, Buttons, UI, kleinere Headlines UND Labels

     Orbitron ist vollständig aus dem Webdesign entfernt. Kleine technische
     Labels entstehen mit Manrope in Versalien plus Laufweite — Luftraumwerk
     darf nicht nach Gaming/Cyber/Tech-Template aussehen.                     */
  --lw-ff-display: 'Antonio', 'Manrope', system-ui, sans-serif;
  --lw-ff-text:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lw-ff-label:   var(--lw-ff-text);

  /* Fluide Typo-Skala — Basis 375px, Ziel 1728px.
     Fließtext und UI liegen bewusst oberhalb des üblichen Agenturmaßes:
     reduziert heißt nicht klein, und nichts darf schwer lesbar sein.         */
  --lw-t-display:  clamp(3.2rem, 1.4rem + 7.7vw, 10.5rem);  /*  51 → 168 Hero-H1 */
  --lw-t-h1:       clamp(2.6rem, 1.3rem + 5.6vw, 7.5rem);   /*  42 → 120 Seiten-H1*/
  --lw-t-h2:       clamp(2.0rem, 1.1rem + 3.9vw, 5.0rem);   /*  32 →  80 Sektion  */
  --lw-t-h3:       clamp(1.5rem, 1.0rem + 2.1vw, 3.0rem);   /*  24 →  48          */
  --lw-t-h4:       clamp(1.25rem,1.05rem + 0.9vw, 1.875rem);/*  20 →  30          */
  --lw-t-lead:     clamp(1.1875rem,1.05rem + 0.6vw,1.5rem); /*  19 →  24 Vorspann */
  --lw-t-body:     clamp(1.0625rem,1.0rem + 0.3vw,1.1875rem);/* 17 →  19 Fließtext*/
  --lw-t-small:    clamp(0.9375rem,.9rem + .15vw,1rem);     /*  15 →  16          */
  --lw-t-label:    0.75rem;                                 /*        12 Eyebrow  */

  --lw-lh-display: .92;
  --lw-lh-head:    1.04;
  --lw-lh-text:    1.68;
  --lw-ls-display: -.02em;
  --lw-ls-label:   .16em;

  /* ── Raum ───────────────────────────────────────────────────────────────
     Bestand übernommen und erweitert — die Startseite nutzt diese Skala bereits. */
  --lw-gutter:      clamp(20px, 4vw, 80px);
  --lw-max:         1680px;
  --lw-max-wide:    2100px;
  --lw-max-read:    68ch;          /* Lesebreite Fließtext                    */
  --lw-content:     min(calc(100vw - 2 * var(--lw-gutter)), var(--lw-max));

  --lw-s-3xs:  clamp(4px,  .3vw,  6px);
  --lw-s-2xs:  clamp(8px,  .6vw, 14px);
  --lw-s-xs:   clamp(12px, .9vw, 20px);
  --lw-s-sm:   clamp(16px,1.2vw, 28px);
  --lw-s-md:   clamp(24px, 2vw,  46px);
  --lw-s-lg:   clamp(40px,3.4vw, 80px);
  --lw-s-xl:   clamp(64px,5.5vw,132px);
  --lw-s-2xl:  clamp(88px,7vw,  168px);
  --lw-s-sec:  clamp(96px,8.5vw,210px);   /* Abstand zwischen Sektionen       */

  --lw-hdr-h:  clamp(64px, 5vw, 84px);

  /* ── Radius & Linie ─────────────────────────────────────────────────────
     Sehr zurückhaltend. Kinoflächen sind eckig, nur Pills sind rund.        */
  --lw-r-sm:   4px;
  --lw-r-md:   8px;
  --lw-r-lg:   14px;
  --lw-r-pill: 999px;
  --lw-bw:     1px;

  /* ── Motion ─────────────────────────────────────────────────────────────
     Briefing: überwiegend 500–900 ms. Nichts hektisch.                       */
  --lw-d-instant: 120ms;
  --lw-d-fast:    260ms;
  --lw-d-base:    560ms;
  --lw-d-slow:    820ms;
  --lw-d-cine:   1100ms;

  --lw-e-out:   cubic-bezier(.16, 1, .3, 1);      /* Standard-Ausklang        */
  --lw-e-inout: cubic-bezier(.65, 0, .35, 1);     /* Zustandswechsel          */
  --lw-e-mask:  cubic-bezier(.76, 0, .24, 1);     /* Masken & Vorhänge        */
  --lw-e-soft:  cubic-bezier(.33, 1, .68, 1);     /* Hover, Microinteraction  */

  --lw-stagger: 80ms;                             /* Versatz je Folgeelement  */

  --lw-z-base: 1;
  --lw-z-nav:  900;   /* Mobile-Overlay */
  --lw-z-hdr:  950;   /* Header MUSS über dem Overlay liegen — sonst ist der
                         Schließen-Knopf vom eigenen Menü verdeckt. */
  --lw-z-top: 1000;
}

/* ── LIGHT-SECTION ──────────────────────────────────────────────────────
   Heller Grund, dunkle Typografie, Lime als präziser Akzent.
   Gedacht als punktueller Rhythmusbruch — Dark bleibt klar dominant.
   Alle Komponenten laufen unverändert weiter; nur die Tokens kippen.

   WICHTIG: Lime hat auf hellem Grund nur 1,1:1 Kontrast. Als dünne Linie oder
   kleiner Text verschwindet es. Deshalb wird Lime hier ausschließlich als
   FLÄCHE eingesetzt (Button, Marker, Balken) — Haarlinien und Kleinlabels
   werden zu Tinte. Der Farbwert selbst bleibt unverändert #E8FF00.          */
.lw-invert{
  --lw-black:       #F4F4F2;   /* heller Grund, minimal warm gebrochen       */
  --lw-black-deep:  #EAEAE7;
  --lw-surface-1:   #ECECE9;
  --lw-surface-2:   #E3E3DF;
  --lw-line:        #D8D8D3;
  --lw-line-strong: #B9B9B3;
  --lw-white:       #080808;   /* Überschriften                     19,9:1   */
  --lw-paper:       #131313;
  --lw-text:        #1F1F1F;   /* Fließtext                         14,6:1   */
  --lw-muted:       #55554F;   /* Sekundärtext                       7,3:1   */
  --lw-muted-2:     #74746D;   /* nur Metadaten                      4,6:1   */
  --lw-acid-ink:    #080808;
  --lw-acid-line:   rgba(8,8,8,.24);   /* Haarlinien: Tinte statt Lime       */
  --lw-acid-dim:    rgba(232,255,0,.55);
  background: var(--lw-black);
  color: var(--lw-text);
}
/* Lime-Text ist auf hell unlesbar → Nummern und Eyebrow-Strich werden Tinte,
   der Akzent wandert auf Flächen. */
.lw-invert .lw-num{ color:var(--lw-white) }
.lw-invert .lw-eyebrow::before{ background:var(--lw-white); opacity:.35 }
.lw-invert .lw-link{ background-image:linear-gradient(var(--lw-white),var(--lw-white)) }
.lw-invert .lw-arrow:hover,
.lw-invert .lw-navlink:hover,
.lw-invert .lw-footer__col a:hover{ color:var(--lw-white) }
.lw-invert .lw-btn:hover{ color:var(--lw-acid-ink) }
.lw-invert .lw-row:hover .lw-row__title{ color:var(--lw-white) }

/* Der Lime-Akzent auf hell: eine Fläche, kein Strich.
   Markiert ein einzelnes Wort — sparsam, höchstens einmal je Abschnitt.     */
.lw-mark{
  background:var(--lw-acid);
  color:var(--lw-acid-ink);
  padding:.02em .22em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
/* Lime-Balken als Sektionsmarke — trägt auf hell wie auf dunkel */
.lw-bar{
  display:block; width:clamp(40px,5vw,72px); height:4px;
  background:var(--lw-acid);
  margin-bottom:var(--lw-s-sm);
}

/* ═══ 02 RESET & GRUNDLAGEN ══════════════════════════════════════════════ */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0;
  background:var(--lw-black);
  color:var(--lw-text);
  font-family:var(--lw-ff-text);
  font-size:var(--lw-t-body);
  line-height:var(--lw-lh-text);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;          /* Sicherung gegen horizontalen Scroll        */
}
img,video,svg{ display:block; max-width:100%; height:auto }
button,input,select,textarea{ font:inherit; color:inherit }
h1,h2,h3,h4,h5,h6,p,figure,blockquote{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
a{ color:inherit; text-decoration:none }
::selection{ background:var(--lw-acid); color:var(--lw-acid-ink) }

/* ═══ 03 RASTER & LAYOUT ═════════════════════════════════════════════════ */

/* Standard-Container — nutzt Gutter, max 1680 */
.lw-wrap{
  width:var(--lw-content);
  margin-inline:auto;
}
.lw-wrap--wide{ --lw-max:var(--lw-max-wide) }
.lw-wrap--read{ max-width:var(--lw-max-read) }

/* Full-Bleed: bricht aus jedem Container an den Bildschirmrand aus.
   BEWUSST ohne transform — sonst überschreibt jede Reveal-Klasse, die
   `transform` animiert (z. B. .lw-rv), den Ausbruch und die Fläche rutscht
   um eine halbe Bildschirmbreite nach rechts. Mit Außenabständen ist der
   Ausbruch gegen alles immun, was später an Bewegung dazukommt. */
.lw-bleed{
  width:100vw;
  margin-inline:calc(50% - 50vw);
}

/* Sektionsrhythmus */
.lw-section{ padding-block:var(--lw-s-sec) }
.lw-section--tight{ padding-block:var(--lw-s-xl) }
.lw-section--flush{ padding-block:0 }

/* 12-Spalten-Raster — Desktop 12, Tablet 8, Mobile 4 */
.lw-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--lw-s-md);
}
@media (max-width:1024px){ .lw-grid{ grid-template-columns:repeat(8,minmax(0,1fr)) } }
@media (max-width:680px) { .lw-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--lw-s-sm) } }

/* Spannweiten — je Breakpoint einzeln, damit Tablet neu komponiert wird
   statt Desktop proportional zu schrumpfen. */
.lw-c-1 {grid-column:span 1}   .lw-c-2 {grid-column:span 2}
.lw-c-3 {grid-column:span 3}   .lw-c-4 {grid-column:span 4}
.lw-c-5 {grid-column:span 5}   .lw-c-6 {grid-column:span 6}
.lw-c-7 {grid-column:span 7}   .lw-c-8 {grid-column:span 8}
.lw-c-9 {grid-column:span 9}   .lw-c-10{grid-column:span 10}
.lw-c-11{grid-column:span 11}  .lw-c-12{grid-column:span 12}
.lw-start-2{grid-column-start:2} .lw-start-3{grid-column-start:3}
.lw-start-4{grid-column-start:4} .lw-start-5{grid-column-start:5}
.lw-start-7{grid-column-start:7} .lw-start-8{grid-column-start:8}

@media (max-width:1024px){
  .lw-t-2{grid-column:span 2} .lw-t-3{grid-column:span 3} .lw-t-4{grid-column:span 4}
  .lw-t-5{grid-column:span 5} .lw-t-6{grid-column:span 6} .lw-t-8{grid-column:span 8}
  .lw-t-start-1{grid-column-start:1} .lw-t-start-2{grid-column-start:2}
  .lw-t-start-3{grid-column-start:3} .lw-t-start-5{grid-column-start:5}
}
@media (max-width:680px){
  .lw-m-1{grid-column:span 1} .lw-m-2{grid-column:span 2}
  .lw-m-3{grid-column:span 3} .lw-m-4{grid-column:span 4}
  .lw-m-start-1{grid-column-start:1}
}

/* Editorial-Split — asymmetrisch, kein 50/50 */
.lw-split{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--lw-s-lg);
  align-items:start;
}
.lw-split--flip{ grid-template-columns:minmax(0,7fr) minmax(0,5fr) }
@media (max-width:900px){
  .lw-split,.lw-split--flip{ grid-template-columns:minmax(0,1fr); gap:var(--lw-s-md) }
}

/* Rasterkinder dürfen NIE breiter werden als ihre Spalte.
   Ohne diese Regel setzt der Browser min-width:auto = min-content — ein einziges
   langes Wort oder ein Codeblock sprengt dann auf dem Telefon die Seitenbreite
   und erzeugt horizontalen Scroll. Das ist die häufigste Ursache dafür.        */
.lw-grid > *,
.lw-tiles > *,
.lw-split > *,
.lw-row > *{ min-width:0 }

/* Sticky-Spalte für Editorial-Seiten */
.lw-sticky{ position:sticky; top:calc(var(--lw-hdr-h) + var(--lw-s-md)) }
@media (max-width:900px){ .lw-sticky{ position:static } }

/* ═══ 04 TYPOGRAFIE ══════════════════════════════════════════════════════ */

.lw-display,.lw-h1,.lw-h2,.lw-h3{
  font-family:var(--lw-ff-display);
  font-weight:400;
  line-height:var(--lw-lh-display);
  letter-spacing:var(--lw-ls-display);
  color:var(--lw-white);
  text-wrap:balance;
}
.lw-display{ font-size:var(--lw-t-display); text-transform:uppercase }
.lw-h1{ font-size:var(--lw-t-h1); text-transform:uppercase }
.lw-h2{ font-size:var(--lw-t-h2); line-height:var(--lw-lh-head) }
.lw-h3{ font-size:var(--lw-t-h3); line-height:var(--lw-lh-head) }
.lw-h4{
  font-family:var(--lw-ff-text);
  font-size:var(--lw-t-h4);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--lw-white);
}

/* Alternative Headline-Fassung in Manrope — für die Gegenüberstellung
   im Styleguide und für Fälle, in denen Antonio zu plakativ wäre. */
.lw-h--text{
  font-family:var(--lw-ff-text);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.0;
  text-transform:none;
}

/* Eyebrow / Sektionslabel — Manrope in Versalien mit Laufweite.
   Das trägt die technische Anmutung ohne Tech-Schrift.                       */
.lw-eyebrow{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--lw-ff-label);
  font-size:var(--lw-t-label);
  font-weight:600;
  letter-spacing:var(--lw-ls-label);
  text-transform:uppercase;
  color:var(--lw-muted);
}
.lw-eyebrow::before{
  content:''; width:clamp(20px,3vw,48px); height:1px;
  background:var(--lw-line-strong); flex:none;
  transition:background var(--lw-d-base) var(--lw-e-soft),
             width var(--lw-d-base) var(--lw-e-out);
}
.lw-eyebrow--plain::before{ display:none }
/* Lime nur, wo das Label wirklich ein Akzent sein soll — nicht in jeder Sektion */
.lw-eyebrow--acid::before{ background:var(--lw-acid) }

/* Sektionsnummer 01 / 02 / 03 */
/* Sektionsnummer — bewusst ruhig. Lime wird sie erst, wenn sie etwas bedeutet:
   im Hover, im aktiven Zustand, im Kapitelschnitt. Sonst nutzt sich der
   Akzent über zwölf Sektionen hinweg ab. */
.lw-num{
  font-family:var(--lw-ff-label);
  font-size:var(--lw-t-small);
  font-weight:600;
  letter-spacing:.1em;
  color:var(--lw-muted-2);
  font-variant-numeric:tabular-nums;
  transition:color var(--lw-d-base) var(--lw-e-soft);
}
.lw-num--acid{ color:var(--lw-acid) }
a:hover > .lw-num,
.lw-rowlink:hover .lw-num{ color:var(--lw-acid) }

.lw-lead{
  font-size:var(--lw-t-lead);
  line-height:1.48;
  color:var(--lw-paper);
  max-width:54ch;
  font-weight:400;
  text-wrap:pretty;
}
/* Fließtext — hell genug, um wirklich gelesen zu werden. Muted ist hier falsch. */
.lw-body{
  max-width:var(--lw-max-read);
  color:var(--lw-text);
  font-weight:400;
  text-wrap:pretty;
}
.lw-body + .lw-body{ margin-top:.85em }
.lw-body strong{ color:var(--lw-white); font-weight:600 }
/* Bewusst ruhigere Nebenabsätze — immer noch 8,5:1, nie darunter */
.lw-body--quiet{ color:var(--lw-muted) }

.lw-small{ font-size:var(--lw-t-small); color:var(--lw-muted); line-height:1.55 }
/* NUR sekundäre Metadaten: Datum, Bildunterschrift, Zähler. Kein Fließtext. */
.lw-meta{ font-size:var(--lw-t-small); color:var(--lw-muted-2); line-height:1.5 }

/* Einzelne Wörter in Lime hervorheben — sparsam einsetzen */
.lw-acid{ color:var(--lw-acid) }

/* Zitat */
.lw-quote{
  font-family:var(--lw-ff-text);
  font-size:var(--lw-t-h3);
  font-weight:300;
  line-height:1.25;
  letter-spacing:-.02em;
  color:var(--lw-white);
  text-wrap:balance;
}
.lw-quote-src{
  margin-top:var(--lw-s-sm);
  font-size:var(--lw-t-small);
  color:var(--lw-muted);
}

/* ═══ 05 BUTTONS ═════════════════════════════════════════════════════════
   Leichte Bewegung, kein Bounce. Der Lime-Grund schiebt sich beim Hover
   von unten ins Feld — Mask-Reveal statt Farbwechsel.                       */
.lw-btn{
  --_bg:transparent;
  --_fg:var(--lw-paper);
  --_bd:var(--lw-line-strong);
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  min-height:52px;                     /* Touch-Ziel ≥ 44px, mit Luft        */
  padding:0 clamp(20px,2vw,32px);
  border:var(--lw-bw) solid var(--_bd);
  border-radius:var(--lw-r-pill);
  background:var(--_bg);
  color:var(--_fg);
  font-family:var(--lw-ff-text);
  font-size:var(--lw-t-small);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:color var(--lw-d-fast) var(--lw-e-soft),
             border-color var(--lw-d-fast) var(--lw-e-soft),
             transform var(--lw-d-fast) var(--lw-e-soft);
}
.lw-btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--lw-acid);
  transform:translateY(101%);
  transition:transform var(--lw-d-base) var(--lw-e-mask);
}
.lw-btn > *{ position:relative }
.lw-btn:hover{ border-color:var(--lw-acid); color:var(--lw-acid-ink) }
.lw-btn:hover::before{ transform:translateY(0) }
.lw-btn:active{ transform:translateY(1px) }

/* Primär — Lime gefüllt, invertiert beim Hover */
.lw-btn--primary{
  --_bg:var(--lw-acid); --_fg:var(--lw-acid-ink); --_bd:var(--lw-acid);
}
.lw-btn--primary::before{ background:var(--lw-white) }
.lw-btn--primary:hover{ color:var(--lw-acid-ink); border-color:var(--lw-white) }

/* Sekundär — heller Rahmen */
.lw-btn--ghost{ --_bd:transparent; padding-inline:clamp(8px,1vw,14px) }
.lw-btn--ghost:hover{ border-color:transparent; color:var(--lw-acid) }
.lw-btn--ghost::before{ display:none }

.lw-btn--sm{ min-height:42px; font-size:var(--lw-t-label); padding-inline:18px }
.lw-btn--block{ width:100% }

/* Pfeil im Button */
.lw-btn__arrow{
  width:1em; height:1em; flex:none;
  transition:transform var(--lw-d-base) var(--lw-e-out);
}
.lw-btn:hover .lw-btn__arrow{ transform:translateX(.35em) }

/* ═══ 06 LINKS ═══════════════════════════════════════════════════════════ */

/* Textlink mit Lime-Unterstrich, der von links einläuft */
.lw-link{
  position:relative;
  display:inline;
  color:var(--lw-paper);
  background-image:linear-gradient(var(--lw-acid),var(--lw-acid));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1px;
  transition:background-size var(--lw-d-base) var(--lw-e-out),
             color var(--lw-d-fast) var(--lw-e-soft);
}
.lw-link:hover{ background-size:100% 1px; color:var(--lw-white) }

/* Pfeil-Link für Projekte und Sektionen */
.lw-arrow{
  display:inline-flex; align-items:baseline; gap:.6em;
  font-family:var(--lw-ff-text);
  font-size:var(--lw-t-small);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--lw-paper);
  padding-block:.6em;
  transition:color var(--lw-d-fast) var(--lw-e-soft);
}
.lw-arrow::after{
  content:'→';
  transition:transform var(--lw-d-base) var(--lw-e-out);
}
.lw-arrow:hover{ color:var(--lw-acid) }
.lw-arrow:hover::after{ transform:translateX(.4em) }

/* Große Zeilen-Links (Leistungen, Branchen) */
.lw-rowlink{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--lw-s-md);
  padding-block:var(--lw-s-sm);
  border-bottom:var(--lw-bw) solid var(--lw-line);
  transition:border-color var(--lw-d-fast) var(--lw-e-soft);
}
.lw-rowlink:hover{ border-color:var(--lw-acid-line) }

/* ═══ 07 NAVIGATION ══════════════════════════════════════════════════════ */

.lw-hdr{
  position:fixed; inset:0 0 auto 0; z-index:var(--lw-z-hdr);
  height:var(--lw-hdr-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--lw-s-md);
  padding-inline:var(--lw-gutter);
  background:transparent;
  transition:background var(--lw-d-base) var(--lw-e-inout),
             border-color var(--lw-d-base) var(--lw-e-inout),
             backdrop-filter var(--lw-d-base) var(--lw-e-inout);
  border-bottom:var(--lw-bw) solid transparent;
}
/* Nach Scroll: dunkler Grund, feine Linie. Kein starkes Glas. */
.lw-hdr.is-stuck{
  background:rgba(10,10,10,.86);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--lw-line);
}
/* Über hellem Hero */
.lw-hdr.is-onlight{ color:var(--lw-ink) }
/* Bei offenem Overlay steht der Header auf schwarzem Grund — kein Glas,
   sonst schimmert der Seiteninhalt durch das geschlossene Menü. */
body.lw-noscroll .lw-hdr{
  background:var(--lw-black);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border-bottom-color:transparent;
}

.lw-hdr__nav{ display:flex; align-items:center; gap:clamp(14px,1.8vw,34px) }

.lw-navlink{
  position:relative;
  font-size:var(--lw-t-small);
  font-weight:500;
  letter-spacing:.04em;
  color:var(--lw-paper);
  padding-block:.8em;
  transition:color var(--lw-d-fast) var(--lw-e-soft);
  white-space:nowrap;
}
.lw-navlink::after{
  content:''; position:absolute; left:0; right:0; bottom:.2em; height:1px;
  background:var(--lw-acid);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--lw-d-base) var(--lw-e-out);
}
.lw-navlink:hover{ color:var(--lw-white) }
.lw-navlink:hover::after,
.lw-navlink[aria-current="page"]::after,
.lw-navlink.is-open::after{ transform:scaleX(1) }
.lw-navlink[aria-current="page"]{ color:var(--lw-acid) }

/* Flyout */
.lw-navitem{ position:relative }
.lw-navlink--has::after{ transform-origin:left }
.lw-flyout{
  position:absolute; top:calc(100% + 14px); left:50%;
  transform:translateX(-50%) translateY(-8px);
  min-width:clamp(240px,22vw,320px);
  padding:var(--lw-s-xs);
  background:rgba(12,12,12,.97);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border:var(--lw-bw) solid var(--lw-line);
  border-radius:var(--lw-r-lg);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--lw-d-fast) var(--lw-e-soft),
             transform var(--lw-d-base) var(--lw-e-out),
             visibility 0s linear var(--lw-d-fast);
}
.lw-navitem.is-open > .lw-flyout,
.lw-navitem:focus-within > .lw-flyout{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
  transition-delay:0s;
}
.lw-flyout a{
  display:flex; align-items:center; justify-content:space-between; gap:1em;
  padding:.8em .9em;
  border-radius:var(--lw-r-md);
  font-size:var(--lw-t-small);
  color:var(--lw-text);
  transition:color var(--lw-d-fast) var(--lw-e-soft),
             background var(--lw-d-fast) var(--lw-e-soft);
}
.lw-flyout a::after{
  content:'→'; opacity:0; transform:translateX(-6px);
  transition:opacity var(--lw-d-fast) var(--lw-e-soft),
             transform var(--lw-d-fast) var(--lw-e-out);
}
.lw-flyout a:hover{ color:var(--lw-white); background:var(--lw-surface-2) }
.lw-flyout a:hover::after{ opacity:1; transform:translateX(0); color:var(--lw-acid) }

/* Burger */
.lw-burger{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer;
}
.lw-burger span{
  display:block; position:relative;
  width:22px; height:1.5px; background:var(--lw-paper);
  transition:background var(--lw-d-fast) var(--lw-e-soft);
}
.lw-burger span::before,.lw-burger span::after{
  content:''; position:absolute; left:0; width:22px; height:1.5px;
  background:var(--lw-paper);
  transition:transform var(--lw-d-base) var(--lw-e-mask),
             background var(--lw-d-fast) var(--lw-e-soft);
}
.lw-burger span::before{ top:-7px }
.lw-burger span::after { top: 7px }
.lw-burger[aria-expanded="true"] span{ background:transparent }
.lw-burger[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg);  background:var(--lw-acid) }
.lw-burger[aria-expanded="true"] span::after { transform:translateY(-7px) rotate(-45deg); background:var(--lw-acid) }

/* Mobile-Overlay */
.lw-mobnav{
  position:fixed; inset:0; z-index:var(--lw-z-nav);
  display:flex; flex-direction:column;
  padding:calc(var(--lw-hdr-h) + var(--lw-s-md)) var(--lw-gutter) var(--lw-s-md);
  background:var(--lw-black);
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
  transition:clip-path var(--lw-d-slow) var(--lw-e-mask), visibility 0s linear var(--lw-d-slow);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.lw-mobnav.is-open{
  clip-path:inset(0 0 0 0);
  visibility:visible;
  transition-delay:0s;
}
.lw-mobnav__list{ flex:1; display:flex; flex-direction:column; gap:var(--lw-s-2xs) }
.lw-mobnav__link{
  display:flex; align-items:center; justify-content:space-between;
  min-height:56px;
  font-family:var(--lw-ff-display);
  font-size:clamp(2rem,9vw,3rem);
  text-transform:uppercase;
  line-height:1;
  color:var(--lw-white);
  border-bottom:var(--lw-bw) solid var(--lw-line);
  opacity:0; transform:translateY(18px);
  transition:opacity var(--lw-d-base) var(--lw-e-out),
             transform var(--lw-d-base) var(--lw-e-out),
             color var(--lw-d-fast) var(--lw-e-soft);
}
.lw-mobnav.is-open .lw-mobnav__link{ opacity:1; transform:none }
.lw-mobnav__link[aria-current="page"]{ color:var(--lw-acid) }
/* Aufklapp-Zeichen: + dreht sich beim Öffnen zum × */
.lw-mobnav__link > [aria-hidden="true"]{
  display:inline-block;
  font-family:var(--lw-ff-text);
  font-size:.5em; font-weight:300;
  color:var(--lw-acid);
  transition:transform var(--lw-d-base) var(--lw-e-out);
}
.lw-mobnav__group.is-open > .lw-mobnav__link > [aria-hidden="true"]{ transform:rotate(45deg) }
.lw-mobnav__sub{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--lw-d-base) var(--lw-e-mask);
}
.lw-mobnav__group.is-open .lw-mobnav__sub{ grid-template-rows:1fr }
.lw-mobnav__sub > div{ overflow:hidden }
.lw-mobnav__sub a{
  display:block; min-height:48px; line-height:48px;
  padding-left:var(--lw-s-sm);
  font-size:var(--lw-t-body);
  color:var(--lw-text);
  border-bottom:var(--lw-bw) solid var(--lw-line);
}
.lw-mobnav__sub a:hover{ color:var(--lw-acid) }
.lw-mobnav__foot{
  display:flex; align-items:center; gap:var(--lw-s-sm);
  padding-top:var(--lw-s-md);
  flex-wrap:wrap;
}

@media (max-width:1024px){
  .lw-hdr__nav{ display:none }
  .lw-burger{ display:flex }
}
body.lw-noscroll{ overflow:hidden }

/* ═══ 08 FOOTER ══════════════════════════════════════════════════════════ */
.lw-footer{
  border-top:var(--lw-bw) solid var(--lw-line);
  padding-block:var(--lw-s-xl) var(--lw-s-md);
  background:var(--lw-black-deep);
}
.lw-footer__cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--lw-s-lg) var(--lw-s-md);
}
.lw-footer__col h3{
  font-family:var(--lw-ff-label);
  font-size:var(--lw-t-label);
  font-weight:500;
  letter-spacing:var(--lw-ls-label);
  text-transform:uppercase;
  color:var(--lw-muted);
  margin-bottom:var(--lw-s-sm);
}
.lw-footer__col a{
  display:block;
  padding-block:.5em;
  font-size:var(--lw-t-small);
  color:var(--lw-text);
  transition:color var(--lw-d-fast) var(--lw-e-soft),
             transform var(--lw-d-fast) var(--lw-e-out);
}
.lw-footer__col a:hover{ color:var(--lw-acid); transform:translateX(3px) }
.lw-footer__bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--lw-s-sm);
  margin-top:var(--lw-s-xl);
  padding-top:var(--lw-s-md);
  border-top:var(--lw-bw) solid var(--lw-line);
  font-size:var(--lw-t-small);
  color:var(--lw-muted);
}
.lw-footer__legal{ display:flex; flex-wrap:wrap; gap:var(--lw-s-sm) }

/* ═══ 09 MEDIENFLÄCHEN & KACHELN ═════════════════════════════════════════ */

/* Medienrahmen mit festem Seitenverhältnis */
.lw-media{
  position:relative;
  overflow:hidden;
  background:var(--lw-surface-1);
  aspect-ratio:16/9;
}
.lw-media--21{ aspect-ratio:21/9 }
.lw-media--43{ aspect-ratio:4/3 }
.lw-media--11{ aspect-ratio:1/1 }
.lw-media--34{ aspect-ratio:3/4 }
.lw-media--916{ aspect-ratio:9/16 }
.lw-media > img,.lw-media > video{
  width:100%; height:100%; object-fit:cover;
  will-change:transform;
}

/* Mobile bevorzugt Hochformat, wenn eine zweite Quelle hinterlegt ist */
@media (max-width:680px){
  .lw-media--mob916{ aspect-ratio:9/16 }
  .lw-media--mob43 { aspect-ratio:4/3  }
}

/* Projektkachel — Hover startet stummen Loop, Titel läuft ein */
.lw-tile{
  position:relative; display:block;
  overflow:hidden;
  background:var(--lw-surface-1);
}
.lw-tile__media{ position:relative; overflow:hidden; aspect-ratio:4/3 }
.lw-tile__media--wide{ aspect-ratio:16/9 }
.lw-tile__media--tall{ aspect-ratio:3/4 }
.lw-tile__poster,.lw-tile__video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.lw-tile__poster{
  transform:scale(1.001);
  transition:transform var(--lw-d-cine) var(--lw-e-out),
             opacity var(--lw-d-base) var(--lw-e-soft);
}
.lw-tile__video{ opacity:0; transition:opacity var(--lw-d-base) var(--lw-e-soft) }
.lw-tile__media::after{        /* Verlauf für Textlesbarkeit.
   Muss auch unter hellem Material tragen — Sonnenuntergang, Schnee, weiße Wand. */
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(5,5,5,.88) 0%,
    rgba(5,5,5,.42) 26%,
    rgba(5,5,5,0)   62%);
  opacity:1;
  transition:opacity var(--lw-d-base) var(--lw-e-soft);
  pointer-events:none;
}
.lw-tile:hover .lw-tile__poster{ transform:scale(1.04) }
/* Bewusst ohne .lw-tile davor — dieselbe Logik trägt auch die Showcase-Medien */
.is-playing .lw-tile__video{ opacity:1 }
.is-playing .lw-tile__poster{ opacity:0 }
.lw-showcase__media .lw-tile__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity var(--lw-d-base) var(--lw-e-soft);
}
/* 09.10.2026 FEHLER BEHOBEN (iPhone): Die Regel darüber setzt den Film auf unsichtbar und steht NACH „.is-playing .lw-tile__video"
   mit gleichem Gewicht. Am Handy startet der Film von selbst, das Standbild blendet aus, der Film blieb aber unsichtbar:
   die Kachel wurde zur leeren schwarzen Fläche. Jetzt wird der laufende Film auch in den Showcase-Kacheln sichtbar. */
.lw-showcase__media.is-playing .lw-tile__video{ opacity:1 }

.lw-tile__meta{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--lw-s-sm);
  padding:var(--lw-s-sm);
  pointer-events:none;
}
.lw-tile__title{
  font-family:var(--lw-ff-display);
  font-size:var(--lw-t-h4);
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:1.05;
  color:var(--lw-white);
}
.lw-tile__cat{
  font-family:var(--lw-ff-label);
  font-size:var(--lw-t-label);
  letter-spacing:var(--lw-ls-label);
  text-transform:uppercase;
  color:rgba(248,248,248,.86);   /* heller als Muted — steht auf Bild, nicht auf Schwarz */
  margin-top:.4em;
  display:block;
}
.lw-tile__go{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  border:var(--lw-bw) solid var(--lw-line-strong);
  border-radius:var(--lw-r-pill);
  color:var(--lw-paper);
  font-size:13px;
  transition:background var(--lw-d-base) var(--lw-e-soft),
             border-color var(--lw-d-base) var(--lw-e-soft),
             color var(--lw-d-base) var(--lw-e-soft),
             transform var(--lw-d-base) var(--lw-e-out);
}
.lw-tile:hover .lw-tile__go{
  background:var(--lw-acid); border-color:var(--lw-acid);
  color:var(--lw-acid-ink); transform:rotate(-45deg);
}

/* Kacheln ohne Rahmen und ohne Schatten — Bild trägt, nicht der Container */
.lw-tiles{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--lw-s-md);
}
@media (max-width:1024px){ .lw-tiles{ grid-template-columns:repeat(8,minmax(0,1fr)) } }
@media (max-width:680px) { .lw-tiles{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--lw-s-sm) } }

/* ── FULL-BLEED-MEDIUM ──────────────────────────────────────────────────
   Bricht an den Bildschirmrand aus, egal in welchem Container es steht.
   Für Featured Case, Hero-Zwischenstücke, Kinoflächen.                    */
.lw-bleed-media{
  position:relative;
  width:100vw; margin-inline:calc(50% - 50vw);
  overflow:hidden;
  background:var(--lw-black-deep);
  aspect-ratio:21/9;
}
.lw-bleed-media > img,.lw-bleed-media > video{
  width:100%; height:100%; object-fit:cover;
}
.lw-bleed-media__cap{
  position:absolute; left:var(--lw-gutter); right:var(--lw-gutter); bottom:var(--lw-s-md);
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--lw-s-md); flex-wrap:wrap;
}
.lw-bleed-media::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,rgba(4,4,4,.82) 0%,rgba(4,4,4,.2) 30%,transparent 62%);
}
.lw-bleed-media__cap{ z-index:1 }
@media (max-width:900px){ .lw-bleed-media{ aspect-ratio:16/9 } }
@media (max-width:680px){ .lw-bleed-media{ aspect-ratio:4/5 } }

/* ── SHOWCASE — Portfolio-Dramaturgie statt Rasterteppich ───────────────
   Jeder Eintrag bekommt eigene Breite, eigene Seite und eigenes Format.
   Die Angaben stehen NEBEN dem Bild, nicht darauf — das nimmt der Reihe
   die Kacheloptik und lässt das Material allein wirken.                  */
.lw-showcase{ display:flex; flex-direction:column; gap:var(--lw-s-2xl) }
.lw-showcase__act{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--lw-s-md);
  align-items:end;
}
/* Akt-Varianten — bewusst unterschiedlich, nicht wiederholend.
   grid-row:1 ist Pflicht, sobald die Angaben LINKS vom Bild stehen: die
   automatische Platzierung springt sonst nicht in eine frühere Spalte zurück
   und schiebt den Text in die nächste Zeile. */
.lw-act--wide  .lw-showcase__media{ grid-column:1 / span 12 }
.lw-act--wide  .lw-showcase__info { grid-column:1 / span 5  }  /* bewusst darunter */

.lw-act--left  .lw-showcase__media{ grid-column:1 / span 7; grid-row:1 }
.lw-act--left  .lw-showcase__info { grid-column:9 / span 4; grid-row:1 }
.lw-act--right .lw-showcase__media{ grid-column:6 / span 7; grid-row:1 }
.lw-act--right .lw-showcase__info { grid-column:1 / span 4; grid-row:1 }
.lw-act--tall  .lw-showcase__media{ grid-column:3 / span 5; grid-row:1 }
.lw-act--tall  .lw-showcase__info { grid-column:9 / span 4; grid-row:1 }

.lw-showcase__media{ position:relative; overflow:hidden; display:block }
.lw-showcase__media > img,.lw-showcase__media > video{
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--lw-d-cine) var(--lw-e-out);
}
.lw-showcase__act:hover .lw-showcase__media > img{ transform:scale(1.03) }
.lw-showcase__info{ padding-bottom:var(--lw-s-2xs) }
.lw-showcase__idx{
  display:block;
  font-family:var(--lw-ff-label);
  font-size:var(--lw-t-label);
  font-weight:600; letter-spacing:var(--lw-ls-label);
  text-transform:uppercase; color:var(--lw-muted-2);
  margin-bottom:var(--lw-s-2xs);
  transition:color var(--lw-d-base) var(--lw-e-soft);
}
.lw-showcase__act:hover .lw-showcase__idx{ color:var(--lw-acid) }
.lw-showcase__title{
  font-family:var(--lw-ff-display);
  font-size:clamp(1.6rem,2.6vw,2.75rem);
  line-height:1.02; text-transform:uppercase; letter-spacing:-.015em;
  color:var(--lw-white);
  transition:color var(--lw-d-fast) var(--lw-e-soft);
}
.lw-showcase__act:hover .lw-showcase__title{ color:var(--lw-acid) }
.lw-showcase__tags{
  margin-top:var(--lw-s-2xs);
  font-size:var(--lw-t-small); color:var(--lw-muted);
}
/* Tablet: Versatz bleibt, wird nur flacher */
/* Tablet: Versatz bleibt als Einrückung, die Angaben rutschen unter das Bild */
@media (max-width:1024px){
  .lw-showcase__act{ grid-template-columns:repeat(8,minmax(0,1fr)) }
  .lw-showcase__act > *{ grid-row:auto !important }
  .lw-act--wide  .lw-showcase__media{ grid-column:1 / span 8 }
  .lw-act--wide  .lw-showcase__info { grid-column:1 / span 6 }
  .lw-act--left  .lw-showcase__media{ grid-column:1 / span 7 }
  .lw-act--left  .lw-showcase__info { grid-column:1 / span 6 }
  .lw-act--right .lw-showcase__media{ grid-column:2 / span 7 }
  .lw-act--right .lw-showcase__info { grid-column:2 / span 6 }
  .lw-act--tall  .lw-showcase__media{ grid-column:1 / span 5 }
  .lw-act--tall  .lw-showcase__info { grid-column:1 / span 6 }
}
/* Mobile: einspaltig, aber die Formate bleiben verschieden */
@media (max-width:680px){
  .lw-showcase{ gap:var(--lw-s-xl) }
  .lw-showcase__act{ grid-template-columns:1fr; gap:var(--lw-s-sm) }
  .lw-showcase__act > *{ grid-column:1 / -1 !important; grid-row:auto !important }
}

/* ═══ 10 LEISTUNGSZEILEN ═════════════════════════════════════════════════
   Große horizontale Zeilen statt Kartenraster. Beim Hover wandert das
   Hintergrundmedium hinter die Sektion.                                     */
.lw-rows{ position:relative }
.lw-rows__bg{
  position:absolute; inset:0; z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.lw-rows__bg > *{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0;
  transform:scale(1.06);
  transition:opacity var(--lw-d-slow) var(--lw-e-soft),
             transform var(--lw-d-cine) var(--lw-e-out);
}
.lw-rows__bg > .is-active{ opacity:.28; transform:scale(1) }
.lw-rows__list{ position:relative; z-index:1 }

.lw-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--lw-s-md);
  padding-block:clamp(20px,2.6vw,40px);
  border-top:var(--lw-bw) solid var(--lw-line);
  transition:border-color var(--lw-d-base) var(--lw-e-soft);
}
.lw-row:last-child{ border-bottom:var(--lw-bw) solid var(--lw-line) }
.lw-row__title{
  font-family:var(--lw-ff-display);
  font-size:clamp(1.75rem,4.4vw,4rem);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:-.02em;
  color:var(--lw-muted);
  transition:color var(--lw-d-base) var(--lw-e-soft),
             transform var(--lw-d-base) var(--lw-e-out);
}
.lw-row:hover{ border-color:var(--lw-acid-line) }
.lw-row:hover .lw-row__title{ color:var(--lw-white); transform:translateX(clamp(6px,.8vw,16px)) }
.lw-row:hover .lw-num{ color:var(--lw-acid) }
.lw-row__note{
  font-size:var(--lw-t-small);
  color:var(--lw-muted);
  max-width:34ch;
  text-align:right;
}
@media (max-width:680px){
  .lw-row{ grid-template-columns:auto minmax(0,1fr); gap:var(--lw-s-sm) }
  .lw-row__note{ display:none }
  .lw-row:hover .lw-row__title{ transform:none }
}

/* ═══ 11 KONTAKT ═══════════════════════════════════════════════════════════
   Kein Formular. Ein Formular ist eine Hürde: es fragt nach Feldern, bevor
   jemand etwas sagen durfte, und die Antwort landet in einem Postfach, das
   niemand als Gespräch empfindet. Stattdessen drei direkte Wege — die
   E-Mail-Adresse ist selbst das Gestaltungselement.
   ══════════════════════════════════════════════════════════════════════════ */
.lw-contact{ position:relative }

/* Die Adresse als Aussage. Antonio, groß, klickbar — kein Feld, kein Kasten. */
.lw-contact__mail{
  display:inline-block;
  font-family:var(--lw-ff-display);
  font-size:clamp(1.75rem, .9rem + 4.4vw, 6rem);
  line-height:1;
  letter-spacing:-.025em;
  text-transform:lowercase;
  color:var(--lw-white);
  word-break:break-word;
  background-image:linear-gradient(var(--lw-acid),var(--lw-acid));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 2px;
  transition:background-size var(--lw-d-slow) var(--lw-e-out),
             color var(--lw-d-fast) var(--lw-e-soft);
}
.lw-contact__mail:hover{ background-size:100% 2px }

.lw-contact__ways{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--lw-s-sm);
  margin-top:var(--lw-s-md);
}

/* Kopieren — mit sichtbarer Rückmeldung. Ohne Bestätigung weiß niemand,
   ob der Klick etwas getan hat. */
.lw-copy{ position:relative }
.lw-copy__done{
  position:absolute; left:50%; bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(6px);
  padding:6px 12px;
  background:var(--lw-acid); color:var(--lw-acid-ink);
  border-radius:var(--lw-r-pill);
  font-size:var(--lw-t-label); font-weight:700;
  letter-spacing:var(--lw-ls-label); text-transform:uppercase;
  white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity var(--lw-d-fast) var(--lw-e-soft),
             transform var(--lw-d-base) var(--lw-e-out);
}
.lw-copy.is-done .lw-copy__done{ opacity:1; transform:translateX(-50%) translateY(0) }

/* Die Wege als Zeilen, nicht als Karten */
.lw-contact__list{ margin-top:var(--lw-s-lg) }
.lw-contact__row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:baseline;
  gap:var(--lw-s-sm);
  padding-block:var(--lw-s-sm);
  border-top:var(--lw-bw) solid var(--lw-line);
  transition:border-color var(--lw-d-base) var(--lw-e-soft);
}
.lw-contact__row:last-child{ border-bottom:var(--lw-bw) solid var(--lw-line) }
.lw-contact__row:hover{ border-color:var(--lw-acid-line) }
.lw-contact__label{
  font-family:var(--lw-ff-label);
  font-size:var(--lw-t-label); font-weight:600;
  letter-spacing:var(--lw-ls-label); text-transform:uppercase;
  color:var(--lw-muted-2);
  transition:color var(--lw-d-base) var(--lw-e-soft);
}
.lw-contact__row:hover .lw-contact__label{ color:var(--lw-acid) }
.lw-contact__value{ font-size:var(--lw-t-h4); color:var(--lw-white) }
.lw-contact__note{ font-size:var(--lw-t-small); color:var(--lw-muted); text-align:right }
@media (max-width:680px){
  .lw-contact__row{ grid-template-columns:auto minmax(0,1fr) }
  .lw-contact__note{ display:none }
}

/* ═══ 12 MOTION & REVEAL ═════════════════════════════════════════════════ */

/* Grund-Reveal: leichtes Anheben, per IntersectionObserver ausgelöst */
.lw-rv{
  opacity:0;
  transform:translateY(26px);
  transition:opacity var(--lw-d-slow) var(--lw-e-out),
             transform var(--lw-d-slow) var(--lw-e-out);
  transition-delay:var(--lw-rv-delay,0ms);
}
.lw-rv.is-in{ opacity:1; transform:none }

/* Masken-Reveal für Medien — Fläche schiebt sich weg */
.lw-rv-mask{
  clip-path:inset(0 0 100% 0);
  transition:clip-path var(--lw-d-cine) var(--lw-e-mask);
  transition-delay:var(--lw-rv-delay,0ms);
}
.lw-rv-mask.is-in{ clip-path:inset(0 0 0 0) }

/* Zeilenweiser Text-Reveal — Zeilen werden per JS in .lw-rvline gehüllt.
   Wichtig: Antonio läuft bei Zeilenhöhe .92 oben und unten aus dem Zeilenkasten.
   Ohne den Puffer schneidet overflow:hidden die Versalien ab. Der negative
   Außenabstand nimmt den Puffer wieder heraus, damit der Zeilenfall stimmt.   */
.lw-rv-text .lw-rvline{
  display:block; overflow:hidden;
  padding-block:.14em;
  margin-block:-.14em;
}
.lw-rv-text .lw-rvline > span{
  display:block;
  transform:translateY(125%);
  transition:transform var(--lw-d-cine) var(--lw-e-mask);
  transition-delay:calc(var(--lw-rv-delay,0ms) + var(--lw-i,0) * 70ms);
}
.lw-rv-text.is-in .lw-rvline > span{ transform:none }

/* Versatz für Gruppen */
.lw-stagger > *{ --lw-rv-delay:calc(var(--lw-i,0) * var(--lw-stagger)) }

/* Sanftes Parallax — Stärke per --lw-par gesteuert, JS setzt --lw-shift */
.lw-parallax{ will-change:transform; transform:translate3d(0,var(--lw-shift,0),0) }

/* Cursor-Akzent (nur Zeigegeräte).
   Ruhezustand: klein und zurückhaltend — ein Punkt, der die Seite nicht stört.
   Erst über Links, Buttons und Medien wächst er zum Ring und wird deutlich.  */
.lw-cursor{
  position:fixed; top:0; left:0; z-index:var(--lw-z-top);
  width:10px; height:10px; margin:-5px 0 0 -5px;
  border:0 solid transparent;
  border-radius:var(--lw-r-pill);
  background:var(--lw-acid);
  pointer-events:none;
  opacity:0;
  transition:opacity var(--lw-d-base) var(--lw-e-soft),
             width var(--lw-d-base) var(--lw-e-out),
             height var(--lw-d-base) var(--lw-e-out),
             margin var(--lw-d-base) var(--lw-e-out),
             background var(--lw-d-base) var(--lw-e-out),
             border-width var(--lw-d-base) var(--lw-e-out),
             border-color var(--lw-d-base) var(--lw-e-out);
}
.lw-cursor.is-on{ opacity:.28 }
.lw-cursor.is-hot{
  opacity:1;
  width:46px; height:46px; margin:-23px 0 0 -23px;
  background:var(--lw-acid-dim);
  border-width:var(--lw-bw);
  border-color:var(--lw-acid);
}
@media (hover:none),(pointer:coarse){ .lw-cursor{ display:none } }

/* ═══ 13 BARRIEREFREIHEIT ════════════════════════════════════════════════ */

:focus-visible{
  outline:2px solid var(--lw-acid);
  outline-offset:3px;
  border-radius:var(--lw-r-sm);
}
.lw-skip{
  position:absolute; left:var(--lw-gutter); top:-100px; z-index:var(--lw-z-top);
  padding:12px 20px;
  background:var(--lw-acid); color:var(--lw-acid-ink);
  border-radius:var(--lw-r-pill);
  font-size:var(--lw-t-small); font-weight:600;
  transition:top var(--lw-d-fast) var(--lw-e-out);
}
.lw-skip:focus{ top:14px }

.lw-sr{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Vom Sicherheitsnetz aufgedeckt — sofort im Zielzustand, ohne Übergang.
   Verhindert, dass ein übersprungenes Element in einem halben Maskenzustand
   hängen bleibt und als leere Fläche stehen bleibt. */
.lw-rv-now,
.lw-rv-now .lw-rvline > span{ transition:none !important }

/* Ein Medium, das nicht lädt, hinterlässt keine leere dunkle Fläche */
[data-lw-broken]{ display:none !important }

/* Bewegung reduzieren — alles sofort im Zielzustand, nichts blockiert */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .lw-rv,.lw-rv-mask,.lw-rv-iris,.lw-rv-text .lw-rvline > span,
  .lw-rv-iris > img,.lw-rv-iris > video,.lw-rv-iris .lw-tile__poster{
    opacity:1 !important; transform:none !important; clip-path:none !important;
  }
  .lw-cut::before{ transform:scaleX(1) !important }
  .lw-parallax{ transform:none !important }
  .lw-cursor{ display:none }
}

/* Hilfsklassen */
.lw-hide-mob{ }
@media (max-width:680px){ .lw-hide-mob{ display:none !important } }
.lw-only-mob{ display:none }
@media (max-width:680px){ .lw-only-mob{ display:revert } }
.lw-mt-xs{margin-top:var(--lw-s-xs)}   .lw-mt-sm{margin-top:var(--lw-s-sm)}
.lw-mt-md{margin-top:var(--lw-s-md)}   .lw-mt-lg{margin-top:var(--lw-s-lg)}
.lw-mt-xl{margin-top:var(--lw-s-xl)}
.lw-row-actions{ display:flex; flex-wrap:wrap; gap:var(--lw-s-2xs) }

/* ══════════════════════════════════════════════════════════════════════════════
   14  ART DIRECTION — Signature, Rhythmus, Cinema
   Aufgesetzt auf das eingefrorene System. Ergänzt, ersetzt nichts.
   ────────────────────────────────────────────────────────────────────────────
   DREI Signature-Elemente. Mehr nicht — sonst wird aus Handschrift Dekor.
   Jedes hat eine Aufgabe:
     01  DER SCHNITT   → Orientierung. Wo bin ich im Film?
     02  DIE BLENDE    → Bildwirkung. Das Material bekommt den Auftritt.
     03  DER ÜBERHANG  → Hierarchie. Die größte Aussage ist größer als die Seite.
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══ SIGNATURE 01 — DER SCHNITT ═══════════════════════════════════════════
   Der Kapitelwechsel. Statt einer Überschrift, die wie jede andere aussieht:
   eine durchgehende Haarlinie über die volle Breite, auf der ein kurzes
   Lime-Segment sitzt — die Schnittmarke. Beim Eintritt fährt sie einmal von
   links ein. Sie beantwortet in einem Blick „neues Kapitel" und ersetzt
   damit den generischen Sektionskopf.                                        */
.lw-cut{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:baseline;
  gap:var(--lw-s-sm);
  padding-top:var(--lw-s-sm);
  border-top:var(--lw-bw) solid var(--lw-line);
  margin-bottom:var(--lw-s-xl);
}
/* Die Schnittmarke selbst */
.lw-cut::before{
  content:'';
  position:absolute; top:-1px; left:0;
  width:clamp(48px,7vw,120px); height:1px;
  background:var(--lw-acid);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--lw-d-cine) var(--lw-e-mask);
  transition-delay:var(--lw-rv-delay,0ms);
}
.lw-cut.is-in::before,
.is-in > .lw-cut::before{ transform:scaleX(1) }

.lw-cut__no{
  font-family:var(--lw-ff-label);
  font-size:var(--lw-t-label);
  font-weight:600;
  letter-spacing:var(--lw-ls-label);
  text-transform:uppercase;
  color:var(--lw-acid);
  font-variant-numeric:tabular-nums;
}
.lw-cut__name{
  font-family:var(--lw-ff-label);
  font-size:var(--lw-t-label);
  font-weight:600;
  letter-spacing:var(--lw-ls-label);
  text-transform:uppercase;
  color:var(--lw-muted);
}
.lw-cut__note{
  font-size:var(--lw-t-small);
  color:var(--lw-muted-2);
  text-align:right;
}
@media (max-width:680px){
  .lw-cut{ grid-template-columns:auto minmax(0,1fr); margin-bottom:var(--lw-s-lg) }
  .lw-cut__note{ display:none }
}

/* ═══ SIGNATURE 02 — DIE BLENDE ════════════════════════════════════════════
   Bild-Reveal aus der Mitte nach außen, wie eine sich öffnende Blende.
   Nicht von unten hochschieben — das macht jede Seite. Die Blende ist
   filmisch, richtet den Blick auf die Bildmitte und gibt dem Material den
   Auftritt statt dem Container. Gilt für alle großen Medienflächen.          */
.lw-rv-iris{
  clip-path:inset(0 50% 0 50%);
  transition:clip-path var(--lw-d-cine) var(--lw-e-mask);
  transition-delay:var(--lw-rv-delay,0ms);
}
.lw-rv-iris.is-in{ clip-path:inset(0 0 0 0) }
/* Das Bild fährt gegenläufig leicht heran — die Blende öffnet sich auf
   Bewegung, nicht auf Stillstand. */
.lw-rv-iris > img,
.lw-rv-iris > video,
.lw-rv-iris .lw-tile__poster{
  transform:scale(1.08);
  transition:transform calc(var(--lw-d-cine) * 1.3) var(--lw-e-out);
  transition-delay:var(--lw-rv-delay,0ms);
}
.lw-rv-iris.is-in > img,
.lw-rv-iris.is-in > video,
.lw-rv-iris.is-in .lw-tile__poster{ transform:scale(1) }

/* ═══ SIGNATURE 03 — DER ÜBERHANG ══════════════════════════════════════════
   Das Statement bricht kontrolliert aus der Inhaltsbreite in den Rand.
   Kein Zufall, kein Chaos: es hängt genau um den Gutter über — die Aussage
   ist damit sichtbar größer als die Seite, die sie trägt. Nur für die EINE
   Hauptaussage einer Seite. Zweimal und es ist ein Effekt.                   */
.lw-overhang{
  margin-inline-start:calc(var(--lw-gutter) * -1);
  max-width:none;
}
.lw-overhang--end{
  margin-inline-start:0;
  margin-inline-end:calc(var(--lw-gutter) * -1);
  text-align:right;
}
/* Auf schmalen Geräten hängt nur noch die halbe Rinne über — sonst
   verliert man den Anfang des Wortes. */
@media (max-width:680px){
  .lw-overhang{ margin-inline-start:calc(var(--lw-gutter) * -.5) }
  .lw-overhang--end{ margin-inline-end:calc(var(--lw-gutter) * -.5) }
}

/* ═══ STATEMENT ════════════════════════════════════════════════════════════
   Größer als Display. Für die eine Aussage, die stehen bleibt.
   Enges Tracking, Zeilenhöhe unter 1 — Antonio verträgt das, weil die
   Versalien kaum Unterlängen haben.                                          */
:root{
  --lw-t-statement: clamp(3.6rem, 1.2rem + 10.4vw, 14rem);   /* 58 → 224 */
}
.lw-statement{
  font-family:var(--lw-ff-display);
  font-size:var(--lw-t-statement);
  font-weight:400;
  line-height:.88;
  letter-spacing:-.035em;
  text-transform:uppercase;
  color:var(--lw-white);
  text-wrap:balance;
}
/* Eine Zeile darf zurücktreten — schafft Tiefe statt einer Textwand */
.lw-statement .lw-quiet{ color:var(--lw-muted-2) }

/* ═══ CINEMA MOMENT ════════════════════════════════════════════════════════
   Full-Bleed als echter Filmmoment. Bewusst OHNE Textkasten und ohne
   Verlaufs-Overlay über dem Bild: die Bildfläche bleibt unangetastet.
   Die Angaben stehen als schmale Schiene darunter, wie eine Bildunterschrift
   im Filmbuch. Ein- und Ausstieg markieren zwei Haarlinien.                  */
.lw-cinema{ position:relative }
.lw-cinema__media{
  position:relative;
  width:100vw; margin-inline:calc(50% - 50vw);
  overflow:hidden;
  background:var(--lw-black-deep);
  aspect-ratio:21/9;
}
.lw-cinema__media > img,
.lw-cinema__media > video{ width:100%; height:100%; object-fit:cover }

/* Mobile bekommt einen eigenen Schnitt statt eines Streifens */
@media (max-width:900px){ .lw-cinema__media{ aspect-ratio:16/9 } }
@media (max-width:680px){ .lw-cinema__media{ aspect-ratio:4/5 } }

/* Ein- und Ausstieg: zwei Haarlinien, die den Moment einfassen */
.lw-cinema__rail{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:baseline;
  gap:var(--lw-s-sm);
  padding-block:var(--lw-s-xs);
  border-bottom:var(--lw-bw) solid var(--lw-line);
  font-family:var(--lw-ff-label);
  font-size:var(--lw-t-label);
  font-weight:600;
  letter-spacing:var(--lw-ls-label);
  text-transform:uppercase;
  color:var(--lw-muted);
}
.lw-cinema__rail--in{ border-bottom:0; border-top:var(--lw-bw) solid var(--lw-line) }
.lw-cinema__rail b{ color:var(--lw-paper); font-weight:600 }
.lw-cinema__rail .lw-num{ color:var(--lw-acid) }
@media (max-width:680px){
  .lw-cinema__rail{ grid-template-columns:auto minmax(0,1fr) }
  .lw-cinema__rail > :last-child{ display:none }
}

/* ═══ RHYTHMUS ═════════════════════════════════════════════════════════════
   Sektionen dürfen NICHT alle „Überschrift → Text → Inhalt" sein.
   Diese Takte geben jeder Sektion eine eigene Rolle im Ablauf.               */

/* Leise Passage — viel Raum, eine einzige Zeile. Atempause vor dem Lauten. */
.lw-beat--quiet{
  padding-block:var(--lw-s-2xl);
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
}
.lw-beat--quiet > *{ grid-column:4 / span 6 }
@media (max-width:1024px){
  .lw-beat--quiet{ grid-template-columns:repeat(8,minmax(0,1fr)) }
  .lw-beat--quiet > *{ grid-column:2 / span 6 }
}
@media (max-width:680px){
  .lw-beat--quiet{ grid-template-columns:1fr; padding-block:var(--lw-s-xl) }
  .lw-beat--quiet > *{ grid-column:1 }
}

/* Große Aussage — kein Fließtext, kein Button, nur der Satz. */
.lw-beat--statement{ padding-block:var(--lw-s-2xl) }

/* Information — der dichte Takt. Hier darf gelesen werden. */
.lw-beat--info{ padding-block:var(--lw-s-xl) }

/* ═══ MICRO-INTERACTIONS ═══════════════════════════════════════════════════ */

/* Navigation: Maskenwechsel statt Farbwechsel. Das Wort fährt nach oben aus,
   seine Kopie fährt von unten nach — 260 ms, kaum wahrnehmbar, aber es fühlt
   sich mechanisch an statt gefärbt. Aufbau übernimmt lrw-system.js.         */
.lw-navlink__mask{
  display:block;
  overflow:hidden;
  position:relative;
}
.lw-navlink__mask > span{
  display:block;
  transition:transform var(--lw-d-base) var(--lw-e-mask);
}
.lw-navlink__mask > span + span{
  position:absolute; left:0; top:100%; width:100%;
  color:var(--lw-white);
}
.lw-navlink:hover .lw-navlink__mask > span{ transform:translateY(-100%) }

/* Zeilen-Link: die Linie zeichnet sich von links, die Nummer rückt nach. */
.lw-rowlink{ position:relative; overflow:hidden }
.lw-rowlink::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--lw-acid);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--lw-d-base) var(--lw-e-mask);
}
.lw-rowlink:hover::after{ transform:scaleX(1) }
.lw-rowlink > :first-child{
  transition:transform var(--lw-d-base) var(--lw-e-out);
}
.lw-rowlink:hover > :first-child{ transform:translateX(clamp(4px,.5vw,12px)) }

/* Showcase: das Bild wandert, der Rahmen bleibt. Kein Zoom-Spielzeug —
   eine echte Kamerabewegung im Kleinen. */
.lw-showcase__media{ overflow:hidden }
.lw-showcase__act:hover .lw-showcase__media > img{
  transform:scale(1.03) translateY(-.8%);
}

/* ═══ VERTIKALER RHYTHMUS ══════════════════════════════════════════════════
   Abstände zwischen Überschrift, Vorspann und Fließtext sind an die
   Schriftgröße gekoppelt, nicht an feste Pixel. Dadurch stimmt das Verhältnis
   auf jedem Gerät — genau die 8–20 px, die sonst „fast richtig" aussehen.    */
.lw-h1 + .lw-lead,
.lw-h2 + .lw-lead,
.lw-statement + .lw-lead{ margin-top:.7em }
.lw-h3 + .lw-body,
.lw-h4 + .lw-body{ margin-top:.55em }
.lw-lead + .lw-body{ margin-top:1.4em }
.lw-eyebrow + .lw-h1,
.lw-eyebrow + .lw-h2,
.lw-eyebrow + .lw-statement{ margin-top:.28em; display:block }

/* ═══ LIGHT-SECTION — ÜBERGANG ═════════════════════════════════════════════
   Die Light-Section soll wie ein Lichtstrahl innerhalb derselben Marke wirken,
   nicht wie eine zweite Website. Der Unterschied liegt im Ein- und Ausstieg:
   sie schiebt sich nicht ein, sie wird aufgeblendet — die Blende von oben nach
   unten, mit einer Lime-Kante als Schnittmarke am oberen Rand.               */
.lw-light{
  position:relative;
  clip-path:inset(0 0 100% 0);
  transition:clip-path calc(var(--lw-d-cine) * 1.15) var(--lw-e-mask);
}
.lw-light.is-in{ clip-path:inset(0 0 0 0) }
/* Die Kante, an der das Licht ansetzt */
.lw-light::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--lw-acid);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--lw-d-cine) var(--lw-e-mask) 180ms;
  z-index:2;
}
.lw-light.is-in::before{ transform:scaleX(1) }
/* Innen mehr Luft als in dunklen Sektionen — Licht braucht Raum, sonst
   wirkt der Block wie ein eingesetzter Kasten. */
.lw-light > .lw-wrap{ padding-block:var(--lw-s-2xl) }
@media (prefers-reduced-motion:reduce){
  .lw-light{ clip-path:none !important }
  .lw-light::before{ transform:scaleX(1) !important }
}

/* ═══ TYPOGRAFISCHE FEINARBEIT ═════════════════════════════════════════════
   Antonio braucht bei sehr großen Graden engeres Tracking, sonst zerfällt das
   Wortbild. Bei kleinen Graden das Gegenteil.                                */
.lw-display{ letter-spacing:-.03em }
.lw-h1{ letter-spacing:-.028em }
.lw-h2{ letter-spacing:-.022em }
.lw-h3{ letter-spacing:-.015em }
/* Versalien in Antonio stehen zu eng, wenn sie klein werden */
.lw-tile__title,.lw-showcase__title{ letter-spacing:-.005em }

/* Fließtext: Silbentrennung nur dort, wo lange deutsche Komposita sonst
   Löcher reißen — nicht global, das zerhackt sonst jede Zeile. */
.lw-body,.lw-lead{ hyphens:manual }
.lw-row__note,.lw-tile__cat,.lw-showcase__tags{ hyphens:auto; -webkit-hyphens:auto }

/* Lesebreite an die neue Schriftgröße gekoppelt: 68 Zeichen bei 19 px sind
   breiter als bei 17 px. 64 hält die Zeile sicher im Sprungbereich des Auges. */
:root{ --lw-max-read:64ch }

/* Footer: sichtbarer Abstand zwischen den lokalen SEO-Standorten und dem
   überregionalen Einsatzgebiet. Beide gehören in dieselbe Spalte, aber nicht
   in dieselbe Aufzählung — DACH ist keine achte Stadt. */
.lw-footer__sep{
  display:block; height:1px;
  margin:var(--lw-s-sm) 0 var(--lw-s-xs);
  background:var(--lw-line);
}