/* ============================================================
   Lemico's Lichtmomente – Stylesheet
   ------------------------------------------------------------
   Aufbau:
     1  Design-Tokens (Farben, Fonts, Abstände)
     2  Grundlagen (Reset, Typografie)
     3  Layout (Sections, Trenner)
     4  Kopfzeile & Navigation
     5  Lichtschalter (Signature-Element)
     6  Hero
     7  Buttons
     8  Das sind wir
     9  Produkte (Bento-Grid)
    10  Inspiration
    11  Geschenk
    12  Arbeitsschritte (Sticky-Foto + Schrittliste)
    13  Kontakt
    14  Fußzeile
    15  Lightbox
    16  Scroll-Reveal & Barrierefreiheit
    17  Rechtstexte (Impressum/Datenschutz)
    18  Fehlerseite (404)

   Farbkonzept: Die Seite selbst ist eine Lampe. Grundton ist
   Nachtblau; das einzige "Licht" kommt aus den Rahmen. Der
   Lichtschalter oben rechts steuert die Variable --lumen, an
   der alle Leuchteffekte hängen.
   ============================================================ */

@import url("../fonts/fonts.css");   /* lokal gehostet, kein Google-CDN */

/* ---------- 1  Design-Tokens ---------- */
:root {
  /* Flächen – etwas angehoben gegenüber der ersten Fassung, war zu dunkel */
  --ink:        #0C1428;   /* Nachtblau, Grundfläche         */
  --ink-2:      #141E38;   /* Nachtblau, eine Stufe heller   */
  --ink-3:      #1B2542;   /* Bedienelemente                 */
  --line:       rgba(245, 197, 107, .14);

  /* Schrift */
  --paper:      #F2EDE4;   /* Papierweiß, Fließtext          */
  --muted:      #9AA3B8;   /* Nebeninfos                     */

  /* Licht */
  --glow:       #F5C56B;   /* Lampengold, Akzentfarbe        */
  --glow-warm:  #FF9E5E;   /* Bernstein, warmer Verlauf      */
  --rose:       #E39FB1;   /* Reserve: Familie / personalisiert */

  /* Lemico-Blau aus Logo/Icons (geschenk.png, kontakt.png) – für Icon-Serie */
  --lemico-blue: #004F8B;

  /* Lichtstärke: 1 = Licht an, 0 = Licht aus.
     Wird per body.dark umgeschaltet, siehe Abschnitt 5. */
  --lumen: 1;

  /* Schriftfamilien */
  --display: "Fraunces", Georgia, serif;
  --body:    "Karla", system-ui, -apple-system, sans-serif;

  /* Seitenrand, skaliert mit dem Viewport */
  --pad: clamp(20px, 5vw, 64px);
}

/* ---------- 2  Grundlagen ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Raumlicht: mehrere weiche Lichtkegel verteilt über die ganze Seite,
   damit es nicht bei durchgehend flachem Nachtblau bleibt. Bewusst NICHT an
   --lumen gekoppelt – der Lichtschalter soll nur den Leuchtturm im Hero
   betreffen, sonst nichts auf der Seite. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 70% at 50% -10%,  rgba(245, 197, 107, .16), transparent 65%),
    radial-gradient(100% 65% at 12% 55%,   rgba(227, 159, 177, .08), transparent 70%),
    radial-gradient(110% 70% at 88% 100%,  rgba(255, 158, 94, .12),  transparent 65%);
}

/* Feines Korn statt flacher Fläche – sehr dezent, blendet mit dem Untergrund */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
}

img { display: block; max-width: 100%; }
a   { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "SOFT" 100, "WONK" 1;  /* weiche, verspielte Achse */
  line-height: 1.08;
  letter-spacing: -.01em;
}

.eyebrow {                                  /* kleine Überzeile über der Headline */
  display: block;
  margin-bottom: 18px;
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--glow);
  opacity: .85;
}

.lead   { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: #DCD8CF; max-width: 62ch; }
strong  { font-weight: 700; color: #fff; }

/* ---------- 3  Layout ---------- */
section {
  position: relative;
  z-index: 1;
  padding: clamp(72px, 10vw, 140px) var(--pad);
}

.wrap { max-width: 1180px; margin: 0 auto; }

/* Leichte Tönung im Wechsel, damit die Seite nicht komplett einfarbig wirkt */
main > section:nth-of-type(even) { background: var(--ink-2); }

.rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* ---------- 4  Kopfzeile & Navigation ---------- */
/* Weißer Kopfbereich (wie auf der aktuellen Seite) – bewusst eigenständig vom
   nachtblauen Seitenkörper, der Lichtschalter wirkt nur auf den Hero-Inhalt. */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 12px var(--pad);
  background: #FFFFFF;
  border-bottom: 1px solid rgba(12, 20, 40, .08);
  box-shadow: 0 12px 30px -20px rgba(0, 0, 0, .35);
}

header img { height: clamp(56px, 8vw, 74px); width: auto; }

nav { justify-self: center; display: flex; gap: 30px; align-items: center; }

nav a {
  padding: 4px 0;
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--lemico-blue);
  border-bottom: 1px solid transparent;
  transition: .25s;
}
nav a:hover,
nav a:focus-visible { border-bottom-color: var(--glow-warm); }

@media (max-width: 860px) { nav { display: none; } }

/* Kontakt/Lichtschalter/Burger als eine Gruppe rechts */
.header-actions { display: flex; align-items: center; gap: 14px; justify-self: end; }

.btn-kontakt {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--lemico-blue);
  color: #fff;
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  transition: .25s;
}
.btn-kontakt:hover { background: #003A68; transform: translateY(-1px); }

/* Unter 640px wird der Header eng – Kontakt-Button dort ausblenden,
   er steckt stattdessen im aufklappbaren Mobile-Menü (siehe unten). */
@media (max-width: 640px) { .header-actions .btn-kontakt { display: none; } }

.mobile-nav .btn-kontakt { margin-top: 10px; padding: 14px 32px; font-family: var(--body); font-size: .95rem; color: #fff; }

/* "Bald auch auf Etsy"-Hinweis: dezentes Badge in Etsy-Orange, reiner Text
   (kein Logo/Wortmarke, um keine Markenrichtlinien zu verletzen). Noch ohne
   Link, da der Shop noch nicht live ist. Gleiche Maße/Schriftgröße wie
   .btn-kontakt, damit es sich wie ein gleichwertiger Button einreiht – und
   bleibt bewusst auch mobil im Header sichtbar (nicht im Menü-Overlay). */
.badge-etsy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(241, 100, 30, .1);
  border: 1px solid rgba(241, 100, 30, .35);
  color: #C24E0C;
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.badge-etsy .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F1641E;
  flex: 0 0 6px;
}

/* Unter 480px wird's eng (Badge + Lichtschalter + Burger nebeneinander) –
   dort kürzerer Text im Badge und der Lichtschalter ohne Textlabel
   (nur die Glühbirne), damit trotzdem alles nebeneinander passt. */
.badge-etsy-short { display: none; }
@media (max-width: 480px) {
  .badge-etsy-full  { display: none; }
  .badge-etsy-short { display: inline; }
  .switch #switchLabel { display: none; }
  .switch { padding: 8px; gap: 0; }
}

/* Burger-Button: nur sichtbar, wenn die Hauptnavigation ausgeblendet ist */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ink-3);
  cursor: pointer;
  transition: .3s;
}
.burger:hover { border-color: var(--glow); }

.burger span {
  display: block;
  margin: 0 auto;
  width: 18px;
  height: 1px;
  background: #C9CEDB;
  transition: transform .3s ease, opacity .3s ease, background .3s ease;
}

@media (max-width: 860px) { .burger { display: flex; } }

/* Offener Zustand: aus den drei Strichen wird ein Kreuz */
body.nav-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
body.nav-open .burger span      { background: var(--glow); }

/* Mobile Navigation: Vollbild-Overlay im selben Nachtblau wie die Seite */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  background: rgba(8, 12, 24, .97);
  backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
body.nav-open .mobile-nav { opacity: 1; pointer-events: auto; }
body.nav-open             { overflow: hidden; }   /* Hintergrund steht still, während das Menü offen ist */

.mobile-nav a {
  font-family: var(--display);
  font-size: clamp(1.4rem, 6vw, 2rem);
  text-decoration: none;
  color: var(--paper);
  border-bottom: 1px solid transparent;
  transition: color .25s;
}
.mobile-nav a:hover,
.mobile-nav a:focus-visible { color: var(--glow); border-bottom-color: var(--glow); }

/* ---------- 5  Lichtschalter (Signature-Element) ---------- */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ink-3);
  color: #C9CEDB;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: .3s;
}
.switch:hover { border-color: var(--glow); }

.switch .bulb {                              /* die kleine Glühbirne im Schalter */
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--glow) 45%, var(--glow-warm));
  box-shadow: 0 0 14px rgba(245, 197, 107, .9),
              0 0 30px rgba(255, 158, 94, .5);
  transition: .5s;
}

/* Zustand "Licht aus": Lichtstärke 0. Betrifft bewusst NUR den Leuchtturm
   im Hero (.hero-frame) und den Schalter selbst – sonst nichts auf der
   Seite (Body-Glow, Eyebrows, andere .frame-Fotos, Tile-Hover bleiben
   unverändert). */
body.dark                 { --lumen: 0; }
body.dark .switch .bulb   { background: #2A3145; box-shadow: none; }
body.dark .switch         { color: #6E7688; }
body.dark .hero-frame img { filter: brightness(.32) saturate(.25) contrast(.9); }

/* ---------- 6  Hero ---------- */
/* Kein min-height mehr: Die feste Mindesthöhe (bis 900px) sorgte dafür, dass
   der Rest der Boxhöhe – weil ohne align-content:center standardmäßig oben
   ausgerichtet wird – komplett als Leerraum UNTEN landete. Stattdessen
   oben/unten derselbe Padding-Wert, damit der Abstand zu "Hallo, mein Name"
   exakt so groß ist wie der Abstand nach dem Hero-Inhalt. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(56px, 7vw, 90px) 0;
}
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }

/* Warmes Bokeh-Licht hinter dem Hero-Inhalt statt kaltem Sternenhimmel.
   Hängt an --lumen, damit es beim "Licht aus" mit ausgeht wie der Rest der Seite.
   Bewusstes Full-Bleed: .hero ist als <section> durch --pad/.wrap in der Breite
   begrenzt, das Canvas soll aber über die volle Bildschirmbreite gehen – daher
   nicht inset:0 (bleibt im begrenzten Bereich), sondern über die klassische
   "aus der Spalte ausbrechen"-Technik (100vw + zentriert via left:50%). */
.hero > .starfield {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  z-index: 0;
  opacity: var(--lumen);
  transition: opacity .9s ease;
}
.hero > div { position: relative; z-index: 1; }

.hero h1        { font-size: clamp(2.6rem, 6vw, 4.6rem); margin: 10px 0 6px; }
.hero p         { margin-top: 26px; }
.hero .cta-row  { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* Schreibmaschinen-Rotator: Lichtmacher / Chef mit Herz / Kreative */
.rotator {
  display: block;
  min-height: 1.15em;
  color: var(--glow);
  text-shadow: 0 0 calc(28px * var(--lumen)) rgba(245, 197, 107, .55);
}
.rotator .cursor {
  display: inline-block;
  width: 2px;
  height: .82em;
  margin-left: 4px;
  vertical-align: -.04em;
  background: var(--glow);
  animation: blink 1.05s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Rahmen mit Lichtaustritt.
   .frame::after ist der Schein, der hinter dem Bild hervortritt. Standard:
   immer sichtbar, unabhängig vom Lichtschalter (der soll nur den Leuchtturm
   betreffen) – .hero-frame bekommt direkt darunter eine eigene, an --lumen
   gekoppelte Fassung. */
.frame { position: relative; border-radius: 4px; }
.frame::after {
  content: "";
  position: absolute;
  inset: -6% -4%;
  z-index: -1;
  border-radius: 20px;
  background: radial-gradient(closest-side,
              rgba(245, 197, 107, .55),
              rgba(255, 158, 94, .18) 55%,
              transparent 78%);
  filter: blur(28px);
}

/* Höhere Spezifität (.frame.hero-frame) statt Reihenfolge im Quelltext,
   damit dieser Override garantiert vor der generischen .frame::after-Regel
   gewinnt – einzig hier reagiert der Schein auf den Lichtschalter. */
.frame.hero-frame::after {
  opacity: var(--lumen);
  transition: opacity .9s ease;
}

/* Aspect-ratio sitzt hier bewusst auf dem Rahmen (Block-Element), nicht auf
   dem <img> selbst – das ist das gleiche robuste Muster wie bei .tile weiter
   unten. Auf dem <img> direkt kam es in der Grid-Spalte zu Fehlberechnungen
   (Bild wurde hochkant statt quadratisch). */
.hero-frame {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 10px solid #EDE9E1;              /* der weiße Rahmen, wie im Original */
  border-radius: 3px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85);
  transform: rotate(-1.2deg);              /* leicht schief = handgemacht */
}
.hero-frame img { width: 100%; height: 100%; object-fit: cover; }

.caption {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 18px;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--muted);
}

/* ---------- 7  Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--body);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  transition: .25s;
}

.btn-primary {
  background: linear-gradient(180deg, var(--glow), var(--glow-warm));
  color: #1A1206;
  box-shadow: 0 8px 30px -8px rgba(245, 197, 107, .55);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -8px rgba(245, 197, 107, .7);
}

.btn-ghost         { border-color: rgba(242, 237, 228, .28); color: var(--paper); }
.btn-ghost:hover   { border-color: var(--glow); color: var(--glow); }

/* ---------- 8  Das sind wir ---------- */
.wir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 860px) { .wir { grid-template-columns: 1fr; } }

.wir h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin-bottom: 22px; }

.namen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

.chip {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .02);
  font-size: .82rem;
  letter-spacing: .04em;
  color: #D5D0C6;
}
.chip b { color: var(--glow); font-weight: 600; }

/* #wir bekommt als einziger Abschnitt einen weißen Hintergrund – wie ein
   heller Raum in der sonst dunklen Werkstatt. Eigene Text-/Akzentfarben,
   da Gold-auf-Dunkel hier nicht funktioniert; Lemico-Blau übernimmt die
   Akzentrolle stattdessen (konsistent mit Header und Icon-Serie). */
#wir { background: #FFFFFF; }
#wir .eyebrow  { color: var(--lemico-blue); opacity: 1; }
#wir h2        { color: #10182C; }
#wir strong    { color: var(--lemico-blue); }
#wir .lead     { color: #3C4356; }

/* Chips volltonfarbig statt Outline – jede Person bekommt ihre eigene
   Farbe aus der bestehenden Palette (kein neues Token nötig). Auf den
   helleren Füllfarben (Gold/Rosé) dunkler Text statt Weiß, sonst zu
   wenig Kontrast – gleiche Logik wie beim goldenen Primary-Button.
   Zweizeilig: Name groß/fett oben, Rolle klein/versal/gedämpft darunter –
   klarere Trennung als Fett allein in einer Zeile. */
#wir .chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 6px 16px 7px;
  border: 0;
  border-radius: 12px;
  transition: transform .25s;
}
#wir .chip:hover { transform: translateY(-2px); }

#wir .chip b {
  color: inherit;    /* überschreibt die generische .chip b Regel (Gold) */
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.15;
}
#wir .chip small {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .72;
}

#wir .chip--blue { background: var(--lemico-blue); color: #fff; }
#wir .chip--gold { background: var(--glow); color: #1A1206; }
#wir .chip--rose { background: var(--rose); color: #4A1626; }

/* ---------- 9  Produkte (Bento-Grid) ---------- */
.sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 44px;
}
.sec-head h2 { font-size: clamp(2rem, 4vw, 3.2rem); }

/* Preis-Karte statt lose hingestellter Text – eigenständiges Element mit
   klar getrennten Zeilen pro Preisstufe. */
.price-card {
  min-width: 240px;
  padding: 22px 26px;
  border: 1px solid rgba(245, 197, 107, .25);
  border-radius: 14px;
  background: rgba(245, 197, 107, .05);
}
.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 0;
}
.price-row + .price-row { border-top: 1px solid rgba(245, 197, 107, .15); }
.price-row-label { font-size: .88rem; color: #D5D0C6; }
.price-row-amount {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--glow);
  white-space: nowrap;
}
.preis-note {
  display: block;
  margin-top: 14px;
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--muted);
}

/* Einheitliches Raster – jede Kachel gleich groß, wie in der mobilen
   Ansicht (die schon gut funktionierte). Größenvarianz zwischen Kacheln
   in derselben Zeile hatte zu verzerrten/verschobenen Nachbarn geführt,
   siehe .feature-photo für den Sonderfall Ostern. */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); } }

/* Kundenaufträge: nur zwei Bilder, eigene 2-spaltige Reihe statt Bruchteile
   der 6-Spalten-Basis – füllt die Zeile sauber statt einer Lücke am Rand. */
.bento--pair { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .bento--pair { grid-template-columns: 1fr; } }

.tile {
  position: relative;
  grid-column: span 2;
  /* siehe Begründung bei .hero-frame img */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 6px;
  background: var(--ink-2);
  cursor: zoom-in;
}
.bento--pair .tile { grid-column: span 1; }
@media (max-width: 900px) { .tile { grid-column: span 1; } }

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .7, .3, 1), filter .6s;
}
.tile:hover img { transform: scale(1.05); }

/* Ostern-Banner: zeigt beide Lichtfarben in einem Foto, deshalb außerhalb
   des Rasters als eigenständiger breiter Streifen statt Kachel. */
.feature-photo {
  margin-bottom: 32px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  background: var(--ink-2);
}
.feature-photo img {
  display: block;
  width: 100%;
  max-height: 440px;
  object-fit: contain;
  margin: 0 auto;
}
.feature-photo figcaption {
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Aufglühen beim Überfahren – unabhängig vom Lichtschalter, siehe oben */
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 55%, rgba(245, 197, 107, .22), transparent 65%);
  mix-blend-mode: screen;
  transition: opacity .5s;
}
.tile:hover::before { opacity: 1; }

.tile figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 16px 18px;
  background: linear-gradient(0deg, rgba(8, 12, 24, .9), transparent);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: .4s;
}
.tile:hover figcaption,
.tile:focus-visible figcaption { opacity: 1; transform: none; }

.sub {
  margin: 56px 0 20px;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- 9b  Mehrwert (Wechselscheiben) ---------- */
/* Eigenständige weiße Section, kein Text-Baustein mehr innerhalb der
   Produkte-Section – das ist strategisch der wichtigste Verkaufshebel
   (ein Rahmen, wiederkehrender Umsatz) und bekommt jetzt entsprechend
   Gewicht: großes Icon, eigene Farbe pro Anlass, viel Luft. */
#mehrwert { background: #FFFFFF; }

.mehrwert-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
@media (max-width: 860px) {
  .mehrwert-grid { grid-template-columns: 1fr; text-align: center; }
  .mehrwert-visual { order: -1; }
}

#mehrwert .eyebrow { color: var(--lemico-blue); opacity: 1; }
#mehrwert h2       { color: #10182C; font-size: clamp(2rem, 4vw, 3.1rem); margin-bottom: 18px; }
#mehrwert .lead    { color: #3C4356; }

.anlass-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
@media (max-width: 860px) { .anlass-tags { justify-content: center; } }

.tag {
  padding: 7px 18px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.tag--blue { background: var(--lemico-blue); color: #fff; }
.tag--gold { background: var(--glow); color: #1A1206; }
.tag--rose { background: var(--rose); color: #4A1626; }

.mehrwert-price {
  margin-top: 24px;
  font-size: 1rem;
  color: #3C4356;
}
.mehrwert-price strong {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--lemico-blue);
}

/* .preis-note ist standardmäßig für den dunklen Produkte-Hintergrund
   eingefärbt (var(--muted)) – hier auf Weiß entsprechend nachgedunkelt,
   sonst kaum lesbar. */
#mehrwert .preis-note { color: #6E7688; }

.mehrwert-visual { display: flex; justify-content: center; }

.mehrwert-icon {
  position: relative;
  width: clamp(130px, 16vw, 168px);
  height: clamp(130px, 16vw, 168px);
  border-radius: 50%;
  background: var(--lemico-blue);
  box-shadow: 0 30px 60px -22px rgba(0, 79, 139, .55);
}
.mehrwert-icon::before {
  content: "";
  position: absolute;
  inset: 28%;
  background-color: #fff;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35A7.95 7.95 0 0012 4a8 8 0 108 8h-2a6 6 0 11-1.76-4.24L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35A7.95 7.95 0 0012 4a8 8 0 108 8h-2a6 6 0 11-1.76-4.24L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
}

/* ---------- 10  Inspiration ---------- */
.insp { max-width: 820px; margin: 0 auto; text-align: center; }
.insp h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); margin-bottom: 28px; }
.insp p  { margin-bottom: 22px; color: #CFCAC1; }
.insp p:first-of-type {                    /* der Einstiegssatz wird zum Zitat */
  font-family: var(--display);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.5;
  color: var(--paper);
}

/* ---------- 11  Geschenk ---------- */
.gift {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
@media (max-width: 860px) { .gift { grid-template-columns: 1fr; } }

.gift h2  { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 20px; }
.gift img { width: 100%; max-width: 325px; margin: 0 auto;
            filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .6)); }

.beispiele { list-style: none; margin: 26px 0; }
.beispiele li {
  padding: 9px 0 9px 20px;
  border-left: 2px solid var(--line);
  font-family: var(--display);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--glow);
}

.unikat {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}

/* #geschenk: weißer Hintergrund wie die anderen persönlichen Abschnitte.
   Der warme Rahmen-Schein (.frame::after) passt nur zu echten Lampenfotos,
   nicht zum flachen Icon-Grafik – hier deaktiviert. */
#geschenk { background: #FFFFFF; }
#geschenk .frame::after { opacity: 0; }
#geschenk h2   { color: #10182C; }
#geschenk .lead { color: #3C4356; }
#geschenk .beispiele li {
  border-left-color: rgba(0, 79, 139, .3);
  color: var(--lemico-blue);
}
#geschenk .unikat {
  /* Etwas dunkler als das normale --glow-Gold, sonst zu wenig Kontrast auf Weiß */
  color: #A6790A;
  border-top-color: rgba(245, 197, 107, .4);
  border-bottom-color: rgba(245, 197, 107, .4);
}

/* ---------- 12  Arbeitsschritte ---------- */
.steps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: start;
}
@media (max-width: 900px) { .steps-grid { grid-template-columns: 1fr; } }

.sticky-photos { position: sticky; top: 110px; }
/* Auf dem Handy NICHT klebend: Bild und Liste stehen einspaltig
   übereinander, nicht nebeneinander wie am Desktop. Ein kurzes klebendes
   Element direkt über einer langen Liste überlappt zwangsläufig mit dem
   Text, sobald die Liste weiterscrollt (die Liste bekommt nur den Platz
   reserviert, den das Foto in seiner normalen Höhe braucht – nicht so viel,
   wie es lange "kleben" bleibt). Deshalb hier bewusst normaler Fluss statt
   sticky – siehe Versuch und Screenshot vom 15.07.2026. */
@media (max-width: 900px) { .sticky-photos { position: relative; top: 0; } }

/* Weißer Ring als eigenes Pseudo-Element auf dem WRAPPER (nicht auf .porthole
   selbst): mask-image auf .porthole schneidet den kompletten Element-Inhalt
   inkl. eigener ::after-Boxen auf die Schlüsselloch-Silhouette zu – ein Ring
   direkt auf .porthole würde also selbst mitmaskiert und größtenteils
   unsichtbar. Der Ring bekommt hier dieselbe Größenlogik (aspect-ratio +
   max-width + margin:auto) wie .porthole, damit beide exakt deckungsgleich
   sind, liegt aber außerhalb des maskierten Elements. */
.sticky-photos::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-width: 500px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
  border: 4px solid #EDE9E1;
  pointer-events: none;
  z-index: 10;
}

/* Bildstapel: alle Fotos übereinander, nur eines ist sichtbar (.on) */
.photo-stack {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
}

/* Echtes Schlüsselloch statt reinem Kreis: Kreis + Trapez als eine Maske
   (mask-image statt clip-path, damit es bei jeder Container-Größe sauber
   mitskaliert – siehe Referenzbilder). Rahmen und Foto werden beide auf die
   Schlüsselloch-Silhouette zugeschnitten. */
.porthole {
  aspect-ratio: 1 / 1;
  max-width: 500px;
  margin: 0 auto;
  border: 12px solid #EDE9E1;
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .8);
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;    mask-size: 100% 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='32' r='26'/%3E%3Cpolygon points='30,32 70,32 76,86 24,86'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='32' r='26'/%3E%3Cpolygon points='30,32 70,32 76,86 24,86'/%3E%3C/svg%3E");
}

.photo-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .7s ease, transform 1.2s ease;
}
.photo-stack img.on { opacity: 1; transform: none; }

/* Schrittliste mit Icon statt Nummer je Arbeitsschritt – fühlt sich nach
   Werkstatt an, nicht nach Fertigungsprotokoll. Die Reihenfolge bleibt durch
   die Listenstruktur und den Text selbst klar.
   Icon-Technik: ::before ist der cremeweiße Kreis (Badge), ::after ist das
   blaue Symbol darauf, per mask-image aus einem kleinen Icon-Set (unten). */
ol.steps { list-style: none; }

ol.steps li {
  position: relative;
  padding: 20px 0 20px 62px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  transition: .4s;
}
ol.steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  transition: .4s;
}
ol.steps li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 29px;
  width: 24px;
  height: 24px;
  background-color: var(--lemico-blue);
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
  transition: background-color .4s;
}
ol.steps li.active::before { background: var(--glow); border-color: var(--glow); box-shadow: 0 0 24px rgba(245, 197, 107, .5); }
ol.steps li.active::after  { background-color: #1A1206; }

/* Icon-Set: einfache, einfarbige Flächenformen – bewusst schlicht gehalten. */
ol.steps li[data-icon="upload"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l5.5 5.5h-3.5v6h-4v-6H6.5z'/%3E%3Crect x='5' y='18' width='14' height='2' rx='1'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l5.5 5.5h-3.5v6h-4v-6H6.5z'/%3E%3Crect x='5' y='18' width='14' height='2' rx='1'/%3E%3C/svg%3E");
}
ol.steps li[data-icon="sparkle"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.8 6.2L20 10l-6.2 1.8L12 18l-1.8-6.2L4 10l6.2-1.8z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.8 6.2L20 10l-6.2 1.8L12 18l-1.8-6.2L4 10l6.2-1.8z'/%3E%3C/svg%3E");
}
ol.steps li[data-icon="pencil"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.8 9.94l-3.75-3.75L3 17.25zM20.7 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.8 9.94l-3.75-3.75L3 17.25zM20.7 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75z'/%3E%3C/svg%3E");
}
ol.steps li[data-icon="note"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v15H6V2zm8 1.5V8h4.5L14 3.5zM8 12h8v1.5H8V12zm0 4h8v1.5H8V16z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v15H6V2zm8 1.5V8h4.5L14 3.5zM8 12h8v1.5H8V12zm0 4h8v1.5H8V16z'/%3E%3C/svg%3E");
}
ol.steps li[data-icon="cut"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.9 9.6L20 3l1 1.7-8.4 6.8 1 .9L22 19l-1.7 1L12 13l-2.3 2a3 3 0 11-1-1.1L10.6 12 8.7 10.7a3 3 0 111-1.1zM6 5a1.4 1.4 0 100 2.8A1.4 1.4 0 006 5zm0 11.2a1.4 1.4 0 100 2.8 1.4 1.4 0 000-2.8z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.9 9.6L20 3l1 1.7-8.4 6.8 1 .9L22 19l-1.7 1L12 13l-2.3 2a3 3 0 11-1-1.1L10.6 12 8.7 10.7a3 3 0 111-1.1zM6 5a1.4 1.4 0 100 2.8A1.4 1.4 0 006 5zm0 11.2a1.4 1.4 0 100 2.8 1.4 1.4 0 000-2.8z'/%3E%3C/svg%3E");
}
ol.steps li[data-icon="hand"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2.3a1 1 0 012 0V10h.6V1.6a1 1 0 112 0V10h.6V3a1 1 0 112 0v10.8c0 3.6-2.7 6.5-6.4 6.5S3.4 17.4 3.4 13.8v-3.5a1 1 0 112 0v3z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2.3a1 1 0 012 0V10h.6V1.6a1 1 0 112 0V10h.6V3a1 1 0 112 0v10.8c0 3.6-2.7 6.5-6.4 6.5S3.4 17.4 3.4 13.8v-3.5a1 1 0 112 0v3z'/%3E%3C/svg%3E");
}
ol.steps li[data-icon="pane"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v16H4V4zm2 2v6.2h5V6H6zm7 0v6.2h5V6h-5zM6 13.2v4.8h5v-4.8H6zm7 0v4.8h5v-4.8h-5z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v16H4V4zm2 2v6.2h5V6H6zm7 0v6.2h5V6h-5zM6 13.2v4.8h5v-4.8H6zm7 0v4.8h5v-4.8h-5z'/%3E%3C/svg%3E");
}
ol.steps li[data-icon="bulb"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-4 12.7V17h8v-2.3A7 7 0 0012 2zM9 19h6v1.4H9V19zm1 2.4h4v1H10v-1z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-4 12.7V17h8v-2.3A7 7 0 0012 2zM9 19h6v1.4H9V19zm1 2.4h4v1H10v-1z'/%3E%3C/svg%3E");
}
ol.steps li[data-icon="check"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/%3E%3C/svg%3E");
}
ol.steps li.active { color: #fff; }         /* der Schritt, der gerade im Blick ist */
ol.steps li b     { display: block; margin-bottom: 2px; font-size: 1.02rem; font-weight: 500; color: #fff; }
ol.steps li small { font-size: .88rem; color: var(--muted); }

/* ---------- 13  Kontakt ---------- */
/* #kontakt (ID) statt .kontakt (Klasse), damit der Verlauf sicher über der
   allgemeinen Sektions-Tönung gewinnt – unabhängig davon, an welcher
   Position (gerade/ungerade) der Abschnitt gerade steht. */
.k-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
@media (max-width: 860px) { .k-grid { grid-template-columns: 1fr; } }

.k-grid img { width: 100%; max-width: 325px; margin: 0 auto;
              filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .6)); }
.k-grid h2  { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 22px; }
.k-grid p   { margin-bottom: 16px; max-width: 60ch; color: #CFCAC1; }

.k-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* #kontakt: weißer Hintergrund wie die anderen persönlichen Abschnitte
   (Wir/Mehrwert/Geschenk). Anders als bei #geschenk bleibt der warme
   Rahmen-Schein (.frame::after) hier bewusst AN – passt zum einladenden
   "melde dich"-Ton, reagiert weiterhin auf den Lichtschalter und wirkt auf
   Weiß als sanfter warmer Hof statt als flache Fläche. */
#kontakt { background: #FFFFFF; }
#kontakt .eyebrow { color: var(--lemico-blue); opacity: 1; }
#kontakt h2 { color: #10182C; }
#kontakt .k-grid p { color: #3C4356; }
#kontakt strong { color: var(--lemico-blue); }
#kontakt .btn-ghost {
  border-color: rgba(0, 79, 139, .3);
  color: var(--lemico-blue);
}
#kontakt .btn-ghost:hover {
  border-color: var(--lemico-blue);
  color: var(--lemico-blue);
  background: rgba(0, 79, 139, .06);
}

/* ---------- 14  Fußzeile ---------- */
footer {
  position: relative;
  z-index: 1;
  padding: 60px var(--pad) 40px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  text-align: center;
}

/* Logo braucht einen eigenen weißen Untergrund – ohne den verschwinden seine
   dunklen Elemente auf dem Nachtblau. Mind. 3x so groß wie im Header (dort
   clamp(56px, 8vw, 74px) → hier derselbe Faktor x3). */
.f-logo {
  display: inline-flex;
  margin: 0 auto;
  padding: 20px 32px;
  background: #FFFFFF;
  border-radius: 18px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .5);
}
.f-logo img { height: clamp(168px, 24vw, 222px); width: auto; display: block; }

.f-byline { margin-top: 18px; font-size: .8rem; line-height: 1.9; color: var(--muted); }

.f-info {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px 60px;
  margin-top: 38px;
}

footer a   { color: #C9CEDB; text-decoration: none; border-bottom: 1px solid transparent; }
footer a:hover { color: var(--glow); border-bottom-color: var(--glow); }

.f-small { font-size: .8rem; line-height: 1.9; color: var(--muted); }

/* Struktur bleibt wie gehabt, nur Lesbarkeit korrigiert: Text/Trennlinie
   waren auf dem dunklen Grund fast unsichtbar (#6E7688 auf --ink hat kaum
   Kontrast). Jetzt --muted (Sekundärtext-Standard der Seite) + hellere,
   zum Rest der Seite passende Trennlinie (var(--line), wie bei <hr class="rule">). */
.f-legal {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 40px;
  max-width: 1180px;
  margin: 40px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: .76rem;
  color: var(--muted);
}

/* ---------- 15  Lightbox ---------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(4, 6, 12, .94);
  backdrop-filter: blur(8px);
  cursor: zoom-out;
}
.lb.on { display: grid; }

.lb img {
  max-width: min(1100px, 94vw);
  max-height: 88vh;
  border: 8px solid #EDE9E1;
  border-radius: 3px;
  box-shadow: 0 0 90px rgba(245, 197, 107, .28);
}

.lb-close {
  position: absolute;
  top: 20px;
  right: 26px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

/* ---------- 16  Scroll-Reveal & Barrierefreiheit ---------- */
.rv {                                        /* Element blendet beim Scrollen ein */
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .3, 1);
}
.rv.in { opacity: 1; transform: none; }

*:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {                                 /* Sprunglink für Tastaturnutzer */
  position: absolute;
  left: -9999px;
  z-index: 200;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Wer Animationen abgeschaltet hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  *    { animation: none !important; transition: none !important; }
  .rv  { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- 17  Rechtstexte (Impressum/Datenschutz) ---------- */
/* Eigenständige Unterseiten (impressum.html, datenschutz.html). Weißer
   Hintergrund wie die anderen textlastigen Abschnitte, schmale Spalte für
   gute Lesbarkeit langer Fließtexte. */
.legal-section { background: #FFFFFF; }

.legal { max-width: 760px; margin: 0 auto; }

.legal .eyebrow { color: var(--lemico-blue); opacity: 1; }

.legal h1 {
  font-size: clamp(2.1rem, 4.2vw, 3rem);
  color: #10182C;
  margin-bottom: 10px;
}

.legal-updated {
  display: block;
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: 44px;
}

.legal h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  color: #10182C;
  margin: 44px 0 14px;
}
.legal h2:first-of-type { margin-top: 0; }

.legal h3 {
  font-family: var(--body);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--lemico-blue);
  margin: 26px 0 10px;
}

.legal p, .legal li { color: #3C4356; line-height: 1.75; margin-bottom: 14px; }
.legal ul, .legal ol { margin: 0 0 16px 22px; }
.legal address { font-style: normal; color: #3C4356; line-height: 1.75; margin-bottom: 20px; }

.legal a { color: var(--lemico-blue); text-decoration: underline; text-decoration-color: rgba(0, 79, 139, .35); }
.legal a:hover { text-decoration-color: var(--lemico-blue); }

.legal strong { color: #10182C; }

/* Kurzzusammenfassung-Kästen aus der Datenschutzerklärung (👥 🤝 📓 …) */
.legal-summary {
  background: #F7F5EF;
  border-left: 3px solid var(--lemico-blue);
  border-radius: 4px;
  padding: 16px 20px;
  margin-bottom: 18px;
  font-size: .92rem;
}
.legal-summary p { margin-bottom: 6px; color: #3C4356; }
.legal-summary p:last-child { margin-bottom: 0; }

/* ---------- 18  Fehlerseite (404) ---------- */
.error-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #FFFFFF;
}
.error-page .wrap { max-width: 560px; }

.error-page .switch-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--glow) 45%, var(--glow-warm));
  box-shadow: 0 0 14px rgba(245, 197, 107, .9), 0 0 30px rgba(255, 158, 94, .5);
}

.error-page .eyebrow { color: var(--lemico-blue); opacity: 1; }

.error-page h1 {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  color: #10182C;
  margin-bottom: 18px;
}

.error-page p {
  color: #3C4356;
  max-width: 46ch;
  margin: 0 auto 34px;
}

.error-page .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* Ghost-Button ist standardmäßig für dunklen Hintergrund eingefärbt
   (heller, kaum sichtbarer Rand) – hier wie bei #kontakt auf Weiß umgefärbt. */
.error-page .btn-ghost {
  border-color: rgba(0, 79, 139, .3);
  color: var(--lemico-blue);
}
.error-page .btn-ghost:hover {
  border-color: var(--lemico-blue);
  color: var(--lemico-blue);
  background: rgba(0, 79, 139, .06);
}