/* ============================================================
   lumina-base.css — EINE gemeinsame Stylesheet fuer die ganze Site.
   Reihenfolge: Tokens/Chrome -> zentrale Overrides -> Design-System
   (Buttons/Headlines/Artikel) -> Seiten-Sektionen.
   Schriftdateien werden weiterhin ueber assets/fonts/fonts.css geladen
   (relative @font-face-Pfade), sonst alles hier.
   ============================================================ */

/* ===================== 1) CHROME (geteilt) ===================== */
/* ============================================================
   chrome.css — gemeinsames Seiten-„Chrome" (zentral fuer ALLE Seiten)
   Aurora-Canvas, Cursor, Scroll-Header, Wortmarke, Burger,
   Menue-Overlay/-Nav/-Kontakt/-Legal, Gluehwuermchen + Ausloeser,
   Lang-Switch, Tagline, To-Top. Vorher in JEDER Seiten-CSS dupliziert.
   Laedt NACH fonts.css und VOR der jeweiligen Seiten-CSS.
   Seitenspezifisches (Hero/Intro/Karten/Artikel) bleibt in der Seiten-CSS;
   Notch/Magic-Switch/A11y-Overrides bleiben in style.css.
   ============================================================ */

/* Mehrsprachige Inhalte: html[lang] steuert, welcher Block sichtbar ist */
html[lang="en"] .only-de{ display:none !important; }
html:not([lang="en"]) .only-en{ display:none !important; }
html:not([lang="la"]) .only-la{ display:none !important; }
/* Latein ist nur teilweise uebersetzt (u. a. Startseite und Projekte haben
   keinen .only-la-Block). Der deutsche Text bleibt darum als Rueckfall stehen,
   solange im selben Elternelement kein .only-la existiert - genau wie lang.js,
   das bei fehlendem data-la ebenfalls auf data-de zurueckfaellt. Sonst waeren
   diese Seiten auf Latein leer. */
html[lang="la"] :has(> .only-la) > .only-de{ display:none !important; }

:root{
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --ink:#2a2735;
  --bg:#050410;
}
*{ box-sizing:border-box; }
html{ background:var(--bg); }
html,body{
  margin:0; padding:0; background:var(--bg);
  font-family:var(--sans); color:#fff;
  min-height:100vh; min-height:100dvh;
  -webkit-tap-highlight-color:transparent;
}
/* Der Systemzeiger bleibt sichtbar - kein eigener Cursor-Punkt mehr. */

/* AURORA CANVAS - fixed behind scrolling content. */
canvas#cvs{
  position:fixed; inset:0; width:100vw; height:100vh; height:100lvh; z-index:0;
  display:block; pointer-events:none;
  background:#050410;
}

/* Custom cursor dot */
/* Firefox: mix-blend-mode auf dem Cursor zwingt jeden Frame zur Neukomposition
   ueber der animierten Aurora -> der Punkt haengt hinterher. Dort abschalten. */
/* Firefox: der eigene Cursor-Punkt kann der Maus nicht verzoegerungsfrei folgen,
   solange die Aurora laeuft. Dort blenden wir ihn aus und geben den Systemzeiger
   zurueck - der wird vom Betriebssystem gezeichnet und kann prinzipiell nicht ruckeln. */
/* frueher: body:has(a:hover,...) - :has() mit :hover zwingt Firefox bei jeder
   Mausbewegung zu einer Neuberechnung des ganzen Dokuments. Das JS setzt die
   Deckkraft bereits selbst, die Regel war ohnehin doppelt. */

/* Glass header strip - appears only after scrolling down */
.scroll-header{
  position:fixed; top:0; left:0; right:0; height:116px; z-index:10;
  pointer-events:none;
  background:rgba(8,7,18,0);
  backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px);
  border-bottom:1px solid rgba(255,255,255,0);
  transition:background .35s ease, backdrop-filter .35s ease, -webkit-backdrop-filter .35s ease, border-color .35s ease, opacity .3s ease;
}
.scroll-header.scrolled{
  background:rgba(8,7,18,.5);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
body.menu-open .scroll-header{ opacity:0; }
@media (max-width:640px){ .scroll-header{ height:72px; } .scroll-header.scrolled{ background:#080712 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } }
/* Lesefortschritt-Balken (Beitragsseiten) */
.read-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:80; pointer-events:none; background:rgba(255,255,255,.06); }
.read-progress > span{ display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%; background:rgb(var(--btn-accent,178,180,192)); box-shadow:0 0 8px rgba(var(--btn-accent,178,180,192),.6); transition:transform .08s linear; will-change:transform; }
body.reduced-motion .read-progress > span{ transition:none; }
@media (max-width:640px){ .read-progress{ height:2.5px; } }

/* Top-left group: Wortmarke */
.topleft{
  position:fixed; top:40px; left:40px; z-index:20;
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px;
  mix-blend-mode:difference;
}
body.menu-open .topleft{ mix-blend-mode:normal; }

/* Burger top-right */
.burger{
  position:fixed; top:34px; right:40px; z-index:20;
  width:56px; height:56px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; background:none; border:0; cursor:pointer; padding:0;
  mix-blend-mode:difference;
}
.burger span{
  display:block; width:34px; height:2px; background:#fff; border-radius:2px;
  transition:transform .35s cubic-bezier(.7,0,.3,1), width .35s ease;
  transform-origin:center;
}
.burger span:nth-child(2){ width:23px; align-self:flex-end; margin-right:11px; }
.burger:hover span:nth-child(2){ width:34px; margin-right:0; align-self:center; }
body.menu-open .burger{ mix-blend-mode:normal; }
body.menu-open .burger span{ background:#fff; }
.burger.open span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.burger.open span:nth-child(2){ width:34px; margin-right:0; align-self:center; transform:translateY(-5px) rotate(-45deg); }

/* Fullscreen menu overlay */
.menu-overlay{
  position:fixed; inset:0; z-index:15;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; opacity:0; transition:opacity .5s ease;
}
.menu-overlay::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(8,7,18,0); backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px);
  transition:background .5s ease, backdrop-filter .5s ease;
}
.menu-overlay.open{ pointer-events:auto; opacity:1; }
.menu-overlay.open::before{
  background:rgba(8,7,18,.45);
  backdrop-filter:blur(22px) saturate(150%) brightness(.98);
  -webkit-backdrop-filter:blur(22px) saturate(150%) brightness(.98);
}
.menu-nav{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
:root{ --ft-h:0px; } /* Footer entfernt -> kein reservierter Platz */
.menu-nav a{
  font-family:var(--sans); font-weight:500;
  font-size:clamp(17px, 2vw, 23px);
  letter-spacing:.06em; line-height:1.05;
  padding:6px 18px;
  color:#fff; text-decoration:none;
  opacity:0; transform:translateY(18px) translateZ(0);
  transition:opacity .5s ease, transform .5s ease, color .45s ease, text-shadow .45s ease;
  transition-delay:calc(var(--i) * 0.06s);
}
.menu-overlay.open .menu-nav a{ opacity:1; transform:translateY(0) translateZ(0); }
.menu-nav a:hover{ opacity:.65; }
.menu-nav a.ff-lit{ color:#fff; mix-blend-mode:normal; text-shadow:0 0 26px rgba(var(--glow,255,222,150),.95), 0 0 11px rgba(var(--glow,255,222,150),.8), 0 0 4px rgba(var(--glow,255,222,150),.65); }
/* Aktiver Menuepunkt: leuchtet in der Welt-Farbe */
.menu-nav a.active{ color:#fff;
  text-shadow:0 0 16px rgba(var(--ff-accent,155,135,255),.5), 0 0 5px rgba(var(--ff-accent,155,135,255),.35); }
/* Navigations-Gruppe "Design" (ausklappbar) */
.menu-nav .nav-group{ display:flex; flex-direction:column; align-items:inherit; opacity:0; transform:translateY(18px) translateZ(0); transition:opacity .5s ease, transform .5s ease; transition-delay:calc(var(--i) * 0.06s); }
.menu-overlay.open .menu-nav .nav-group{ opacity:1; transform:translateY(0) translateZ(0); }
.menu-nav .nav-group-toggle{ font-family:var(--sans); font-weight:500; font-size:clamp(17px,2vw,23px); letter-spacing:.06em; line-height:1.05; padding:6px 18px; color:#fff; background:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:.45em; transition:opacity .45s ease; }
.menu-nav .nav-group-toggle:hover{ opacity:.65; }
.menu-nav .nav-caret{ display:inline-block; font-size:.6em; opacity:.8; transition:transform .3s ease; }
.menu-nav .nav-group-toggle[aria-expanded="true"] .nav-caret{ transform:rotate(180deg); }
.menu-nav .nav-sub{ display:flex; flex-direction:column; align-items:inherit; gap:12px; overflow:hidden; max-height:0; opacity:0; transition:max-height .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.menu-nav .nav-group.open{ gap:16px; }
.menu-nav .nav-group.open > .nav-sub{ max-height:260px; opacity:1; } /* nur die DIREKTE Unterliste oeffnen (Verschachtelung) */
.menu-nav .nav-group--design.open > .nav-sub{ max-height:640px; } /* Platz fuer verschachtelte Web/Branding-Gruppen */
.menu-nav .nav-sub a{ font-size:clamp(13px, 1.5vw, 17px); letter-spacing:.05em; font-weight:400; padding-top:2px; padding-bottom:2px; }
/* Optische Trennung Web/Branding im Design-Menue (ohne Worte) */
.menu-nav .nav-sub-divider{ width:46px; height:1px; background:rgba(255,255,255,.22); margin:8px 0; }
body.reduced-motion .menu-nav .nav-group{ opacity:1 !important; transform:none !important; }
body.reduced-motion .menu-nav .nav-sub{ transition:none; }
/* Seiteninhalt hinter offenem Menue ausblenden - nur Aurora + Gluehwuermchen bleiben */
.topleft, .stage, .content{ transition:opacity .35s ease; }
body.menu-open .topleft,
body.menu-open .stage,
body.menu-open .content{ opacity:0; pointer-events:none; }
.menu-overlay.open .menu-nav > a:not(.active){ opacity:.78; }
.menu-overlay.open .menu-nav > a:not(.active):hover{ opacity:1; }
.menu-contact{
  display:flex; gap:14px; justify-content:center; margin-top:32px;
  opacity:0; transform:translateY(18px);
  transition:opacity .5s ease, transform .5s ease; transition-delay:.32s;
}
.menu-overlay.open .menu-contact{ opacity:1; transform:translateY(0); }
/* Kontakt-Icons ohne Kreis: Flaeche und Rahmen sind raus, die 48x48 bleiben als
   Klick-/Tippflaeche stehen (Mindestgroesse fuer Touch). Rueckmeldung beim
   Ueberfahren jetzt ueber Helligkeit statt ueber die Rahmenfarbe. */
.menu-contact a{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px;
  background:none; border:0; box-shadow:none;
  color:#fff; text-decoration:none; opacity:.85;
  transition:transform .2s ease, opacity .2s ease;
}
.menu-contact a:hover{ transform:translateY(-1px); opacity:1; }
.menu-contact .ico{ width:20px; height:20px; }
.menu-legal{
  display:flex; align-items:center; justify-content:center; gap:5px; position:absolute; left:0; right:0; bottom:34px;
  opacity:0; transform:translateY(18px);
  transition:opacity .5s ease, transform .5s ease; transition-delay:.4s;
}
.menu-overlay.open .menu-legal{ opacity:1; transform:translateY(0); }
/* Bei offenem Menue sitzt der feste Sprachschalter sonst dicht auf den
   Rechtslinks (die kleben mit bottom:34px am unteren Rand). Solange das Menue
   offen ist, wird er darum am Viewport hochgezogen - auch auf Unterseiten, wo
   er sonst absolut im Dokument haengt. */
body.menu-open .lang-switch.lang-fixed{ position:fixed !important; bottom:88px !important; }
@media (max-width:480px){ body.menu-open .lang-switch.lang-fixed{ bottom:96px !important; } }
.menu-overlay .menu-legal a{ color:rgba(255,255,255,.55); font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.04em; text-decoration:none; transition:color .2s; }
.menu-overlay .menu-legal a:hover{ color:#fff; }
.menu-legal .sep{ color:rgba(255,255,255,.3); }
/* Mobil: Legal-Links nebeneinander, durch Punkt getrennt */
@media (max-width:480px){
  .menu-legal{ flex-wrap:wrap; row-gap:9px; }
}

/* Content sits above the canvas (DOM order keeps text above the fixed canvas). */
.content{ position:relative; }

/* Mobile: Chrome-Positionen */
@media (max-width:640px){
  .topleft{ top:20px; left:20px; gap:2px; }
  .burger{ top:18px; right:20px; }
}

/* Reduced motion: Aurora aus, Burger/Tagline in Vollweiss */
body.reduced-motion canvas#cvs{ display:none; }
body.reduced-motion .tagline{ color:#fff !important; }
body.reduced-motion .burger span{ background:#fff !important; }
body.reduced-motion .menu-nav a{ color:#fff !important; }

/* Tagline, schwach am unteren Rand */
.tagline{
  display:block; text-align:center;
  margin:24px auto 40px;
  font-family:var(--sans); font-weight:600;
  font-size:clamp(12px, 1vw, 14px);
  letter-spacing:.2em; text-transform:uppercase;
  color:#fff;
  mix-blend-mode:difference;
  transform:translateZ(0);
  pointer-events:none;
}
body.menu-open .tagline{ opacity:0; transition:opacity .3s ease; }
/* Latein-Tagline mit Hover/Tap-Uebersetzung */
.tagline{ pointer-events:auto; cursor:pointer; }
.tagline .tl-la{ display:block; transition:opacity .35s ease; }
.tagline .tl-de{ display:block; white-space:nowrap; position:absolute; top:0; left:50%;
  transform:translateX(-50%); opacity:0; transition:opacity .35s ease; }
.tagline:hover .tl-la, .tagline:focus-visible .tl-la, .tagline.show .tl-la{ opacity:0; }
.tagline:hover .tl-de, .tagline:focus-visible .tl-de, .tagline.show .tl-de{ opacity:1; }

/* Lesebalken am oberen Rand: zeigt, wie weit die Seite gelesen ist.
   Die Farbe folgt der Aurora - --ff-accent wird von den Engines bei jedem
   Farbwechsel neu gesetzt. Der Fortschritt kommt als --read-progress (0..1)
   aus menu.js. z-index bleibt unter dem Menue-Overlay (15), damit der Balken
   bei offenem Menue verschwindet. */
.read-bar{ position:fixed; top:0; left:0; right:0; height:3px; z-index:12;
  pointer-events:none; background:rgba(255,255,255,.06); }
.read-bar span{ display:block; height:100%; width:100%; transform-origin:0 50%;
  transform:scaleX(var(--read-progress,0));
  background:rgb(var(--ff-accent,155,135,255));
  box-shadow:0 0 10px rgba(var(--ff-accent,155,135,255),.5);
  transition:transform .08s linear; }
body.reduced-motion .read-bar span{ background:#fff !important; box-shadow:none; transition:none; }
@media (prefers-reduced-motion: reduce){ .read-bar span{ transition:none; } }

/* Pfeil nach oben */
.to-top{
  position:fixed; bottom:30px; right:34px; z-index:12;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; padding:0; cursor:pointer;
  color:#fff; mix-blend-mode:difference;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.to-top.show{ opacity:.85; transform:translateY(0); pointer-events:auto; }
.to-top:hover{ opacity:1; }
.to-top svg{ width:22px; height:22px; }
@media (max-width:640px){ .to-top{ bottom:22px; right:22px; } }
body.menu-open .to-top{ opacity:0 !important; pointer-events:none; }
/* Pfeil nach oben: immer sichtbar + Farbwechsel bei Hover */
.to-top{ mix-blend-mode:normal !important; color:#fff;
  background:rgba(14,12,28,.6); border:1px solid rgba(255,255,255,.22); border-radius:50%;
  backdrop-filter:blur(8px) saturate(140%); -webkit-backdrop-filter:blur(8px) saturate(140%);
  transition:opacity .3s ease, transform .3s ease, color .25s ease, border-color .25s ease, background .25s ease; }
.to-top.show{ opacity:1; }
.to-top:hover{ color:rgb(var(--ff-accent,196,168,232)); border-color:rgb(var(--ff-accent,196,168,232)); background:rgba(14,12,28,.82); opacity:1; }

/* Gluehwuermchen im Menue - weich, verschwommen, Weltfarbe */
.firefly{ position:fixed; left:0; top:0; width:16px; height:16px; border-radius:50%;
  --ff:230,255,150;
  background:radial-gradient(circle, rgba(255,255,248,.8) 0%, rgba(var(--ff),.5) 42%, rgba(var(--ff),0) 72%);
  box-shadow:0 0 18px 7px rgba(var(--ff),.25);
  filter:blur(2.4px);
  pointer-events:none; z-index:9999; will-change:transform,opacity; }
/* Kleine aurora-artige Aufhellung, die die Gluehwuermchen mittragen (HINTER der Schrift) */
.ff-aura{ position:absolute; left:0; top:0; width:150px; height:150px; margin:-75px 0 0 -75px;
  border-radius:50%; pointer-events:none; z-index:-1; mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(var(--ff),0.22) 0%, rgba(var(--ff),0.10) 40%, rgba(var(--ff),0) 70%);
  filter:blur(6px); will-change:transform; }
@media (prefers-reduced-motion: reduce){ .ff-aura{ display:none; } }

/* Gluehwuermchen-Ausloeser oben im Menue (Klick laesst den Schwarm los) */
.ff-trigger{ --ff:230,255,150; position:absolute; top:clamp(100px, 15vh, 170px); left:50%; transform:translateX(-50%); padding:14px; background:none; border:0; cursor:pointer; line-height:1; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; }
.ff-trigger .ff-bug{ display:block; height:47px; width:auto; overflow:visible;   /* hochkantes Icon: ueber die Hoehe steuern */
  transition:transform .25s ease; }
/* Fluegel exakt in der Hintergrundfarbe -> sie verschmelzen mit dem Grund */
.ff-trigger .ff-bug .ff-wing{ fill:var(--ff-wing, #080712); fill-opacity:var(--ff-wing-op, 1); }   /* voll deckend */
/* Leuchtkoerper folgt der echten Aurora-Farbe (--ff-accent).
   Die Stufen sind bewusst weit auseinandergezogen, sonst sind die ersten
   beiden Toene nicht unterscheidbar. saturate() gibt zusaetzlich Kraft. */
.ff-trigger .ff-bug .ff-glow{ filter:saturate(1.35); }
.ff-trigger .ff-bug .g0{ stop-color:color-mix(in srgb, rgb(var(--ff-accent,140,110,220)) 62%, #000); }
.ff-trigger .ff-bug .g1{ stop-color:color-mix(in srgb, rgb(var(--ff-accent,140,110,220)) 84%, #000); }
.ff-trigger .ff-bug .g2{ stop-color:rgb(var(--ff-accent,140,110,220)); }
.ff-trigger .ff-bug .g3{ stop-color:color-mix(in srgb, rgb(var(--ff-accent,140,110,220)) 88%, #fff); }
.ff-trigger .ff-bug .g4{ stop-color:color-mix(in srgb, rgb(var(--ff-accent,140,110,220)) 76%, #fff); }
.ff-trigger .ff-bug .g5{ stop-color:color-mix(in srgb, rgb(var(--ff-accent,140,110,220)) 64%, #fff); }
.ff-trigger .ff-bug .g6{ stop-color:color-mix(in srgb, rgb(var(--ff-accent,140,110,220)) 52%, #fff); }
/* die globale Kontur-Regel weiter unten darf dieses Icon nicht treffen */
.ff-trigger .ff-bug, .ff-trigger .ff-bug *{ stroke:none !important; }
/* Handy: Icon kompakter, damit die Menueleiste nicht ueber den Schirm hinauswaechst */
@media (max-width:640px){ .ff-trigger .ff-bug{ height:39px; } #ffTrigger.ff-trigger{ margin:2px 0 0; padding:6px; } }
/* Ist der Menueinhalt hoeher als der Bildschirm, wuerde beim Zentrieren der obere
   Teil (das Gluehwuermchen) unerreichbar abgeschnitten. "safe" verhindert das,
   und das Overlay darf zur Not scrollen. */
.menu-overlay{ overflow-y:auto; overscroll-behavior:contain; align-items:safe center; }

@keyframes ffFlicker{
  0%,100%{ filter:drop-shadow(0 0 3px rgba(140,255,112,.3)) drop-shadow(0 0 7px rgba(140,255,112,.16)); }
  45%{ filter:drop-shadow(0 0 6px rgba(140,255,112,.55)) drop-shadow(0 0 13px rgba(140,255,112,.32)); }
  60%{ filter:drop-shadow(0 0 4px rgba(140,255,112,.38)) drop-shadow(0 0 8px rgba(140,255,112,.2)); }
}
.ff-trigger:hover .ff-bug, .ff-trigger:focus-visible .ff-bug{ transform:scale(1.16); }
@keyframes ffPulse{ 0%,100%{ transform:scale(1); opacity:.82 } 50%{ transform:scale(1.22); opacity:1 } }
.ff-trigger .ff-label{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,208,86,.92); text-shadow:0 0 12px rgba(255,208,86,.45); animation:ffLabelGlow 2.6s ease-in-out infinite; mix-blend-mode:normal; isolation:isolate; }
.ff-trigger.lit .ff-label{ animation:none; opacity:1; }
@keyframes ffLabelGlow{ 0%,100%{ opacity:.5 } 50%{ opacity:1 } }
@media (prefers-reduced-motion: reduce){ .ff-trigger .ff-bug{ animation:none; } }

/* Kontakt-Popover (nur Desktop/Hover): Nummer & E-Mail anklickbar */
.ct-pop{ display:none; }
@media (hover:hover) and (pointer:fine){
  .menu-contact a{ position:relative; }
  .menu-contact a .ct-pop{
    display:block; position:absolute; left:50%; bottom:100%; margin-bottom:11px;
    transform:translateX(-50%) translateY(4px);
    background:#000; color:#fff; border:1px solid rgba(255,255,255,.14);
    padding:7px 12px; border-radius:9px; font-size:13px; line-height:1; white-space:nowrap;
    opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
    box-shadow:0 10px 26px rgba(0,0,0,.45); z-index:5; mix-blend-mode:normal;
  }
  .menu-contact a .ct-pop::after{ content:""; position:absolute; top:100%; left:50%;
    transform:translateX(-50%); border:6px solid transparent; border-top-color:#000; }
  .menu-contact a::after{ content:""; position:absolute; left:-8px; right:-8px; bottom:100%; height:13px; }
  .menu-contact a:hover .ct-pop, .menu-contact a:focus-visible .ct-pop{
    opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
}

/* Wortmarke (verlinkt zur Startseite) */
.wordmark{ display:block; line-height:0; }
.wordmark img{ width:96px; height:auto; display:block; }
@media (max-width:560px){ .wordmark img{ width:80px; } }
.wordmark a{ display:inline-block; line-height:0; }

/* Sprach-Umschalter */
.lang-switch{ display:flex; align-items:center; justify-content:center; gap:4px; margin:18px 0 0;
  opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; transition-delay:.30s; }
.menu-overlay.open .lang-switch{ opacity:1; transform:translateY(0); }
.lang-switch button{ background:none; border:0; cursor:pointer; font-family:var(--sans); font-weight:600;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:rgb(var(--btn-accent, 178,180,192));
  padding:6px 10px; transition:color .2s; -webkit-tap-highlight-color:transparent; }
.lang-switch button[aria-pressed="true"]{ color:#fff; text-decoration:underline; text-underline-offset:4px; }
.lang-switch button:hover{ color:#fff; }
.lang-switch .ls-sep{ color:rgba(255,255,255,.3); }

/* Kontakt-Icons hart auf 20px klemmen (SVG-Box im <span> sonst groesser als im <a>) */
.menu-contact .ico,.menu-contact a .ico,.menu-contact .ct-item .ico{width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;max-width:20px!important;max-height:20px!important;flex:0 0 20px!important;}
/* Navigation am Desktop etwas hoeher ruecken */
@media (min-width:769px){ .menu-nav{ margin-top:-44px; } }
.menu-contact .ico{ width:20px; height:20px; }
.menu-contact .ico.ico-phone{ width:20px; height:20px; }
.menu-contact .ico.ico-mail{ width:20px; height:20px; }
.menu-contact .ico.ico-cal{ width:20px; height:20px; }

/* E-Mail-Kontakt: Icon = Ausloeser, Adresse im Popover ist echter Link */
/* Gleiche Behandlung wie oben: Kreis weg, Klickflaeche bleibt. */
.menu-contact .ct-item{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px;
  background:none; border:0; box-shadow:none;
  color:#fff; cursor:pointer; outline:none; opacity:.85;
  transition:transform .2s ease, opacity .2s ease;
}
.menu-contact .ct-item:hover{ transform:translateY(-1px); opacity:1; }
.menu-contact .ct-item .ico{ width:20px; height:20px; }
.menu-contact .ct-item .ct-pop{
  display:block; box-sizing:border-box; text-align:center;
  position:absolute; left:50%; right:auto; bottom:100%; margin-bottom:12px;
  transform:translateX(-50%) translateY(4px);
  width:-webkit-max-content; width:-moz-max-content; width:max-content;
  max-width:80vw; height:auto;
  padding:8px 13px; border-radius:9px;
  background:#000; border:1px solid rgba(255,255,255,.14);
  font-size:13px; line-height:1; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
  box-shadow:0 10px 26px rgba(0,0,0,.45); z-index:6; mix-blend-mode:normal;
}
.menu-contact .ct-item .ct-pop::after{ content:""; position:absolute; top:100%; left:50%;
  transform:translateX(-50%); border:6px solid transparent; border-top-color:#000; }
.menu-contact .ct-item::after{ content:""; position:absolute; left:-10px; right:-10px; bottom:100%; height:16px; }
.menu-contact .ct-item:hover .ct-pop,
.menu-contact .ct-item:focus-within .ct-pop,
.menu-contact .ct-item.open .ct-pop{
  opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;
}
/* Beschriftung des Kalender-Symbols: nur die Typografie, die Sprechblase
   selbst kommt weiterhin von .ct-item .ct-pop (schwarz, absolut, ausgeblendet) */
.menu-contact .ct-cal .ct-pop{
  font-family:var(--sans); font-style:normal; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
}
.menu-contact .ct-cal:hover .ct-pop{ text-decoration:underline; }


/* ===================== 2) ZENTRALE OVERRIDES (vormals style.css) ===================== */
/* ============================================================
   style.css - gemeinsame Header-/Notch-Styles
   Ausgelagert aus allen 11 Seiten (vorher 11x dupliziert).
   Hier zentral pflegen: iOS-Notch-Fix, fixer Header-Balken,
   Wortmarke/Toggle/Burger-Positionen, Scroll-Verhalten.
   ============================================================ */

/* --- iOS mobile header hard-fix v5 (Notch + fixer Balken) --- */
/* v5: single authoritative mobile header layer.
     Covers the iOS status/notch area from ABOVE the viewport and keeps all content visually behind an opaque cap. */
  :root{
    --jw-safe-top: env(safe-area-inset-top, 0px);
    --jw-header-core: 88px;
    --jw-header-total: calc(var(--jw-safe-top) + var(--jw-header-core));
  }

  #sat-probe, #sat-badge, .notch-cover{ display:none !important; }

  @media (max-width:640px){
    html, body{ overflow-x:hidden !important; background:#050410 !important; }

    /* The important part: the mask starts above the viewport, so Safari cannot show
       hero/content imagery in the status-bar/notch strip while scrolling. */
    body::before{
      content:"";
      position:fixed;
      left:0; right:0;
      top:-140px;
      height:calc(140px + var(--jw-header-total));
      background:transparent;
      transition:background .35s ease;
      z-index:19;
      pointer-events:none;
    }

    .scroll-header{
      position:fixed !important;
      top:-140px !important;
      left:0 !important;
      right:0 !important;
      height:calc(140px + var(--jw-header-total)) !important;
      z-index:18 !important;
      background:transparent !important; transition:background .35s ease !important;
      -webkit-backdrop-filter:none !important;
      backdrop-filter:none !important;
      border-bottom:0 !important;
      opacity:1 !important;
      pointer-events:none !important;
    }

    .scroll-header::after{
      content:"";
      position:absolute;
      left:0; right:0; bottom:0;
      height:1px;
      background:rgba(255,255,255,.08);
      opacity:0; transition:opacity .3s ease;
    }

    .topleft{
      position:fixed !important;
      top:calc(var(--jw-safe-top) + 10px) !important;
      left:20px !important;
      z-index:22 !important;
      mix-blend-mode:normal !important;
      transform:none !important;
    }

    .burger{
      position:fixed !important;
      top:calc(var(--jw-safe-top) + 16px) !important;
      right:20px !important;
      z-index:22 !important;
      mix-blend-mode:normal !important;
      transform:none !important;
    }

    .magic-switch{
      position:fixed !important;
      top:calc(var(--jw-safe-top) + 13px) !important;
      left:50% !important;
      z-index:23 !important;
      transform:translateX(-50%) !important;
    }

    .magic-switch label{ padding:0 14px !important; }
    .magic-switch .ls-row{ gap:3px !important; }
    .magic-switch .ls-on, .magic-switch .ls-off{ font-size:10px !important; line-height:1.1 !important; }
    .magic-switch .ls-track{ width:22px !important; height:34px !important; }
    .magic-switch .ls-dot{ width:12px !important; height:12px !important; top:5px !important; }
    .magic-switch input:checked + label .ls-dot{ transform:translateX(-50%) translateY(12px) !important; }

    .menu-overlay{ z-index:100 !important; }
    body.menu-open::before,
    body.menu-open .scroll-header{ opacity:0 !important; }

    /* No generated fixed headline clone; keep the real headline in normal flow. */
    header.intro h1,
    header.intro .signature{ visibility:visible !important; }
    .intro-blend{ display:none !important; }
  }

/* --- Header beim Scrollen: Hintergrund/Linie/translateZ --- */
@media (max-width:640px){ body.scrolled::before{ background:#080712 !important; transform:translateZ(0); } .scroll-header.scrolled{ transform:translateZ(0) !important; } .scroll-header.scrolled::after{ opacity:1 !important; } }
/* Barrierefrei (Aurora-Canvas ist aus): Header-Maske dauerhaft deckend, sonst laeuft
   beim Scrollen Inhalt oberhalb/durch den Sticky-Header (gilt v.a. Unterseiten wie Artboard) */
@media (max-width:640px){ body.reduced-motion::before{ background:#080712 !important; } body.reduced-motion .scroll-header.scrolled::after{ opacity:1 !important; } }

/* ============================================================
   Vereinheitlichung (zentral, gilt für alle Seiten gleich)
   ============================================================ */

/* --- Intro-/Einführungstext: überall gleiche Größe --- */
header.intro p{ font-size:clamp(16px, 1.75vw, 20px) !important; line-height:1.6 !important; letter-spacing:0 !important; font-style:normal !important; }

/* --- Sprachschalter: fix unten mittig (über der Quod-Tagline), immer sichtbar --- */
.lang-switch.lang-fixed{ position:fixed; left:50%; right:auto; transform:translateX(-50%); bottom:84px; z-index:7; margin:0; opacity:1 !important; transition:none; display:flex; text-shadow:0 1px 8px rgba(0,0,0,.55); }
@media (max-width:640px){ .lang-switch.lang-fixed{ display:flex !important; } }
/* --- "Quod latet, lucet" auf ALLEN Seiten fix am unteren Rand (Sprachschalter sitzt darueber) --- */
.tagline{ position:fixed; left:50%; right:auto; transform:translateX(-50%); bottom:32px; z-index:6; margin:0; }
/* --- Unterseiten: Sprachschalter + "Quod" als mitlaufender Footer am Seitenende (nicht fix, kein Float) --- */
body.sub{ position:relative; min-height:100vh; padding-bottom:calc(132px + var(--ft-h,200px)); }
body.sub .lang-switch.lang-fixed{ position:absolute; bottom:calc(64px + var(--ft-h,200px)); }
body.sub .tagline{ position:absolute; bottom:calc(28px + var(--ft-h,200px)); }
body.sub .site-footer{ position:absolute; left:0; right:0; bottom:0; margin-top:0; }
body:not(.sub) .site-footer{ position:fixed; left:0; right:0; bottom:0; z-index:6; margin-top:0; border-top:0; padding-top:12px; padding-bottom:10px; }
body:not(.sub) .site-footer .ft-copy{ display:none; } /* Home: ©-Zeile unter dem Pfeil ausgeblendet, Icons bleiben */
body:not(.sub) .tagline{ bottom:calc(32px + var(--ft-h,44px)); }
body:not(.sub) .lang-switch.lang-fixed{ bottom:calc(84px + var(--ft-h,44px)); }

/* --- Burger-"Menü"-Label: nur in barrierefreier (nicht-magischer) Ansicht --- */
.burger span.burger-label{ display:none; width:auto; height:auto; background:none; border-radius:0; transition:none; position:absolute; left:50%; transform:translateX(-50%); top:calc(100% - 6px); font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:none; color:#fff; pointer-events:none; white-space:nowrap; }
body.reduced-motion .burger span.burger-label{ display:block; background:none !important; }
.burger.open .burger-label{ display:none !important; }

/* === HERO-/INTRO-TEXT - EINZIGE QUELLE (Inline-Kopien entfernt) ===
   Headline + Subline sind durchgehend WEISS, KEIN Aurora-Blend - auf allen
   Seiten und mobil. Dezenter Schatten fuer Lesbarkeit ueber der Aurora. */
body header.intro, body header.intro h1, body header.intro p,
body .headline, body .headline h1, body .headline .headline-word, body .headline .sub, body .headline .sub-link,
body .contact-head, body .contact-head h1,
body.reduced-motion header.intro, body.reduced-motion header.intro h1, body.reduced-motion header.intro p,
body.reduced-motion .headline, body.reduced-motion .headline h1, body.reduced-motion .headline .headline-word, body.reduced-motion .headline .sub{
  mix-blend-mode:normal !important; color:#fff !important;
}
body header.intro h1, body header.intro p,
body .headline h1, body .headline .sub, body .contact-head h1{
  text-shadow:0 2px 18px rgba(8,7,18,.55) !important;
}
/* --- Schliess-X im offenen Menue ueber die Gluehwuermchen heben (sonst verdeckt) --- */
body.menu-open .burger{ z-index:10000 !important; mix-blend-mode:normal !important; }
body.menu-open .burger span{ background:#fff !important; }
/* --- Skip-Link unter die iPhone-Notch schieben (Safe-Area), erst bei Fokus sichtbar --- */
.skip-link{ top:calc(env(safe-area-inset-top, 0px) + 10px) !important; transform:translate(-50%,-260%) !important; }
.skip-link:focus, .skip-link:focus-visible{ transform:translate(-50%,0) !important; }

/* === Welt-Akzentfarbe: Icons & Link-Akzente folgen der gewaehlten Welt (--btn-accent) === */
.pill-btn .arrow,
.to-top,
.menu-nav a:hover, .sub-link:hover,
.lang-switch button[aria-pressed="true"]{ color:rgb(var(--btn-accent, 178,180,192)) !important; }
/* Linien-Icons direkt einfaerben (currentColor wird teils von der Link-Farbe ueberschrieben) */
.to-top svg, .wd-step-ico svg, .ff-trigger svg{ stroke:rgb(var(--btn-accent, 178,180,192)) !important; }
/* Menue-Kontakt-Icons (Telefon/Mail/Calenso) immer weiss */
.menu-contact svg{ stroke:#fff !important; }

/* ============================================================
   Violette Akzente folgen der gewaehlten Aurora-Welt
   Quelle: --ff-accent (Gluehwuermchen-/Weltfarbe).
   Fallback 196,168,232 == #c4a8e8 -> Ruhezustand unveraendert,
   sobald eine Welt aktiv ist, wandert die Farbe mit.
   Betrifft: Blog-Eyebrow/Datum, "Weiterlesen", Artikel-Links,
   Abschnitts-Eyebrows, Karten-Icons (Begleitung/Webdesign).
   ============================================================ */
.post-tag, .post-date, .post-more, .author-role,
.article a, .article-back, .quote-source a,
.wd h2.wd-eyebrow,
.wd-ico, .wd-step-ico{
  color:rgb(var(--ff-accent, 196,168,232)) !important;
}
.article li::marker{ color:rgb(var(--ff-accent, 196,168,232)); }
.article a, .post-more, .article-back, .quote-source a{
  text-decoration-color:rgba(var(--ff-accent, 196,168,232),.5) !important;
}
/* Karten-/Schritt-Icon-Kacheln: Flaeche, Rand und Linien-Icon mitfaerben */
.wd-ico, .wd-step-ico{
  background:rgba(var(--ff-accent, 196,168,232),.10) !important;
  border-color:rgba(var(--ff-accent, 196,168,232),.24) !important;
}
.wd-ico svg, .wd-step-ico svg{ stroke:rgb(var(--ff-accent, 196,168,232)) !important; }
.wd-card:hover{ border-color:rgba(var(--ff-accent, 196,168,232),.40) !important; }

/* ============================================================
   Zauberwelt-/Barrierefrei-Regler — zentrale Optik & Position
   (vorher auf jeder Seite einzeln dupliziert).
   Position: Hero-Seiten (body ohne .sub) 42px, Unterseiten
   (body.sub, 116px-Headerband) 15px. Mobil siehe Block ganz oben.
   ============================================================ */
.magic-switch{ position:fixed; left:50%; transform:translateX(-50%); z-index:40; }
body:not(.sub) .magic-switch{ top:calc(var(--sat,0px) + 42px); }
body.sub .magic-switch{ top:calc(var(--sat,0px) + 15px); }
.magic-switch input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.magic-switch label{ display:flex; flex-direction:column; align-items:center; cursor:pointer; padding:8px 14px; }
.magic-switch .ms-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.magic-switch .ls-row{ display:flex; flex-direction:column; align-items:center; gap:7px; }
.magic-switch .ls-on, .magic-switch .ls-off{ font-size:9px; font-weight:600; letter-spacing:.12em; color:rgba(255,255,255,.3); transition:color .35s ease, text-shadow .35s ease; }
.magic-switch input:checked + label .ls-on{ color:#fff; text-shadow:0 0 8px rgba(var(--ff-accent,155,135,255),.8); }
.magic-switch input:not(:checked) + label .ls-off{ color:rgba(255,255,255,.8); }
.magic-switch .ls-track{ position:relative; display:block; width:18px; height:34px; border-radius:999px; border:1px solid rgba(255,255,255,.3); background:transparent; transition:border-color .4s ease, box-shadow .4s ease; }
.magic-switch label:hover .ls-track{ border-color:rgba(255,255,255,.65); }
.magic-switch .ls-dot{ position:absolute; top:4px; left:50%; width:8px; height:8px; border-radius:50%; transform:translateX(-50%); background:#4a4660; transition:transform .4s cubic-bezier(.45,1.5,.4,1), background .4s ease, box-shadow .4s ease; }
.magic-switch input:checked + label .ls-track{ border-color:rgba(var(--ff-accent,155,135,255),.6); }
.magic-switch input:checked + label .ls-dot{ transform:translateX(-50%) translateY(18px); background:rgb(var(--ff-accent,155,135,255)); box-shadow:0 0 7px rgba(var(--ff-accent,155,135,255),.55); }
.magic-switch input:focus-visible + label .ls-track{ outline:2px solid rgb(var(--ff-accent,155,135,255)); outline-offset:4px; }
html.prm .magic-switch{ display:none !important; }
body.menu-open .magic-switch{ display:none !important; }

/* Sprachregler-Wortspiel: Kürzel (de/en) hell, Rest gedimmt */
.lang-switch .lr{ display:none; } /* abgekuerzt: nur de / en */
.lang-switch button[aria-pressed="true"] .lr{ opacity:.7; }

/* ============================================================
   Barrierefrei (reduced-motion): voller Kontrast für blasse UI-Texte
   Behebt WAVE-Kontrastfehler. Zentral, gilt auf allen Seiten.
   Der dezent gedimmte Look bleibt nur im Design-/Zauberwelt-Modus.
   ============================================================ */
body.reduced-motion .lang-switch button{ color:#fff !important; }
body.reduced-motion .lang-switch .lr{ opacity:1 !important; }
body.reduced-motion .lang-switch .ls-sep{ color:rgba(255,255,255,.8) !important; }
body.reduced-motion .magic-switch .ls-on,
body.reduced-motion .magic-switch .ls-off{ color:rgba(255,255,255,.92) !important; text-shadow:none !important; }
body.reduced-motion .menu-legal a{ color:#fff !important; }
body.reduced-motion .menu-legal .sep{ color:rgba(255,255,255,.8) !important; }
body.reduced-motion .quote .role,
body.reduced-motion .article .quote-source,
body.reduced-motion .quote-source,
body.reduced-motion .post-date,
body.reduced-motion .post-tag,
body.reduced-motion .post-more,
body.reduced-motion .author-role{ color:rgba(255,255,255,.92) !important; }


/* ============================================================
   Zentralisiert (vorher 11x inline, identisch): tagline-glow, ff-inflow, nav-home
   ============================================================ */
/* Tagline-Glow */
.tagline{ text-shadow:0 0 7px rgba(255,255,255,.35); }
  @keyframes taglineGlow{
    0%,100%{ text-shadow:0 0 6px rgba(255,255,255,.22); }
    50%{ text-shadow:0 0 11px rgba(255,255,255,.48); }
  }
  @media (prefers-reduced-motion: no-preference){ .tagline{ animation:taglineGlow 4.6s ease-in-out infinite; } }
  body.reduced-motion .tagline{ animation:none !important; text-shadow:none !important; }
/* Glühwürmchen im Menüfluss */
/* Glühwürmchen in den Menüfluss holen: zwischen Drachenpost und den Icons */
  #ffTrigger.ff-trigger{
    position:static; top:auto; left:auto;
    margin:10px 0 2px; padding:10px;
    opacity:0; transform:translateY(18px);
    transition:opacity .5s ease, transform .5s ease;
    transition-delay:.26s;
  }
  .menu-overlay.open #ffTrigger.ff-trigger{ opacity:1; transform:translateY(0); }
/* Menü: Home-Icon */
.menu-nav a.nav-home{ padding-top:3px; padding-bottom:3px; margin-bottom:10px; }
  .menu-nav a.nav-home .ico-home{ display:block; width:32px; height:32px; }
  .menu-nav a.nav-home.active .ico-home{
    filter:drop-shadow(0 0 10px rgba(var(--ff-accent,155,135,255),.6)) drop-shadow(0 0 4px rgba(var(--ff-accent,155,135,255),.4));
  }
  @media (max-width:640px){ .menu-nav a.nav-home .ico-home{ width:28px; height:28px; } }

/* === Accessibility: Menü-Overlay via visibility vor AT verstecken ===
   WAVE meldet keine Kontrast-Fehler auf visibility:hidden-Elementen.
   Kein aria-hidden nötig: visibility:hidden entfernt Element aus AT-Baum. */
.menu-overlay { visibility: hidden; }
.menu-overlay.open { visibility: visible; }

/* === Barrierefrei: Kontakt-Icons schwarz-weiß === */
body.reduced-motion .menu-contact a,
body.reduced-motion .menu-contact .ct-item {
  background: #fff !important;
  color: #000 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 2px solid #000 !important;
}
body.reduced-motion .menu-contact a svg,
body.reduced-motion .menu-contact .ct-item svg {
  stroke: #000 !important;
}

/* === Pill-Btn Arrow: CSS ::after statt aria-hidden-Span ===
   AT ignoriert CSS-Pseudoelemente — kein aria-hidden nötig, kein WAVE-Fehler */
.pill-btn::after {
  content: " →";
  display: inline-block;
  transition: transform .25s ease, opacity .25s ease;
  opacity: .6;
}
.pill-btn:hover::after,
.pill-btn:focus-visible::after { transform: translateX(3px); opacity: 1; }
body.reduced-motion .pill-btn::after { opacity: 1; transition: none; }

/* Barrierefrei: Regler-Beschriftung weiß */
body.reduced-motion .magic-switch .ms-text { color: #fff !important; }

/* Tagline tl-de: visibility:hidden damit WAVE aria-hidden+Text nicht flaggt */
.tl-de { visibility: hidden; }
.tagline:hover .tl-de,
.tagline:focus-visible .tl-de,
.tagline.show .tl-de { visibility: visible; }

/* Barrierefrei: Toggle-Schiene sichtbar lassen (sonst kollabiert der Regler) */


/* ===================== 3) DESIGN-SYSTEM (zentral, gilt ueberall) ===================== */

/* --- Intro / Headline (vereinheitlicht) --- */
header.intro{
  max-width:1100px; margin:0 auto;
  padding:210px 40px 30px; text-align:center;
}
header.intro h1{
  font-weight:700; font-size:clamp(38px, 5.6vw, 76px);
  letter-spacing:-.03em; line-height:1; margin:0 0 18px; color:#fff; transform:translateZ(0);
}
header.intro p{
  max-width:50ch; margin:0 auto;
  font-size:clamp(15px, 1.3vw, 17px); line-height:1.6; color:#fff; opacity:.85;
}
header.intro p{ margin-top:clamp(20px, 2.6vh, 30px); }
@media (max-width:640px){ header.intro{ padding:165px 20px 24px; } }
/* H1 ueber Aurora — EINE Quelle fuer Groesse/Gewicht/Zeilenhoehe (alle Seiten gleich) */
.headline h1, header.intro h1, main h1, article h1, .post h1{
  font-weight:700; line-height:.95; letter-spacing:.005em; margin:0 0 12px;
}
header.intro, header.intro h1, header.intro .signature{ transform:none !important; }
body header.intro h1{ color:#fff !important; }
@media (max-width:560px){ header.intro h1{ font-size:clamp(34px, 11vw, 56px); } }
body.reduced-motion header.intro h1,
body.reduced-motion header.intro p{ color:#fff !important; }

/* --- Visuell versteckt, aber für Screenreader lesbar --- */
.vh{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* --- Skip-Link (Seiten mit Sprung-Link) --- */
.skip-link{ position:fixed; top:12px; left:50%; transform:translate(-50%,-180%); z-index:100;
  background:#fff; color:#0a0814; font-family:var(--sans); font-weight:600; font-size:14px;
  padding:12px 20px; border-radius:10px; text-decoration:none; box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform .18s ease; }
.skip-link:focus, .skip-link:focus-visible{ transform:translate(-50%,0); outline:2px solid rgb(var(--ff-accent,196,168,232)); outline-offset:2px; }

/* --- EINHEITLICHER BUTTON: Glas-Pille (CTAs ueberall gleich) --- */
.pill-btn, .wd-btn, .about-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; min-height:48px; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.03) 46%, rgba(255,255,255,0)), linear-gradient(rgba(var(--btn-accent,178,180,192),.13), rgba(var(--btn-accent,178,180,192),.13)), rgba(20,18,38,.42);
  backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.04), 0 10px 26px rgba(0,0,0,.3);
  color:#fff; font-family:var(--sans); font-weight:500; font-size:15px; letter-spacing:-.005em;
  text-decoration:none; border:1px solid rgba(var(--btn-accent,178,180,192),.5);
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
  pointer-events:auto; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.pill-btn:hover, .wd-btn:hover, .about-cta:hover{
  transform:translateY(-1px); border-color:rgba(var(--btn-accent,178,180,192),.85);
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04) 46%, rgba(255,255,255,0)), linear-gradient(rgba(var(--btn-accent,178,180,192),.2), rgba(var(--btn-accent,178,180,192),.2)), rgba(20,18,38,.5);
}
.pill-btn:active, .wd-btn:active, .about-cta:active{ transform:translateY(0) scale(.98); }
.pill-btn .arrow, .about-cta .arrow{ font-size:14px; transition:transform .25s ease; opacity:.7; color:inherit; }
.pill-btn:hover .arrow, .about-cta:hover .arrow{ transform:translateX(3px); opacity:1; }
body.reduced-motion .pill-btn, body.reduced-motion .wd-btn, body.reduced-motion .about-cta{
  background:#fff !important; color:#000 !important; border:2px solid #fff !important;
  box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; text-shadow:none !important;
}
body.reduced-motion .pill-btn:hover, body.reduced-motion .wd-btn:hover, body.reduced-motion .about-cta:hover{ background:#e6e6e6 !important; transform:none; }

/* --- Artikel-Basis (Blog-Artikel, Lumina-Story; Legal ueberschreibt Breite/Hintergrund) --- */
.article{
  max-width:712px; margin:0 auto 20px; position:relative;
  padding:84px 40px 44px; border-radius:18px;
  background:rgba(14,12,28,.72); border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 8px 30px rgba(0,0,0,.3);
}
@media (max-width:600px){ .article{ padding:84px 22px 32px; border-radius:14px; margin:0 16px 16px; } }
.article .lead{ font-size:clamp(20px, 2vw, 23px); line-height:1.55; font-weight:500; color:#fff; margin:0 0 28px; }
.article p{ font-size:18px; line-height:1.75; color:rgba(255,255,255,.8); margin:0 0 22px; }
.article h2{ font-family:var(--sans); font-weight:600; font-size:clamp(20px,2.4vw,27px); line-height:1.25; letter-spacing:-.01em; color:#fff; margin:48px 0 14px; }
.article h3{ font-family:var(--sans); font-weight:600; font-size:clamp(17px,1.7vw,20px); line-height:1.3; color:#fff; margin:32px 0 10px; }
.article ul{ margin:14px 0 4px; padding-left:20px; }
.article li{ font-size:18px; line-height:1.7; color:rgba(255,255,255,.8); margin:0 0 10px; }
.article li::marker{ color:rgb(var(--ff-accent,196,168,232)); }
.article blockquote{ margin:34px 0; padding:6px 0 6px 22px; border-left:2px solid rgb(var(--ff-accent,196,168,232)); font-size:clamp(19px,2.2vw,23px); line-height:1.4; font-weight:600; color:#fff; font-style:normal; }
.article .quote-source{ margin:-22px 0 38px; font-size:14px; line-height:1.5; color:rgba(255,255,255,.55); }
.article .quote-source a{ color:rgba(255,255,255,.78); text-decoration:underline; text-underline-offset:2px; }
.article .quote-source a:hover{ color:#fff; }
.article .signature{ margin-top:2.2em; font-weight:600; letter-spacing:.01em; color:#fff; }
.article .signature-img{ display:block; width:auto; height:auto; max-width:200px; margin-top:.4em; }
.article-back{ display:inline-block; margin-top:18px; font-size:14px; font-weight:600; letter-spacing:.04em; color:rgba(255,255,255,.7); text-decoration:none; transition:color .2s ease; }
.article-back:hover{ color:#fff; }
.article a{ color:rgb(var(--ff-accent,196,168,232)); text-decoration-color:rgba(var(--ff-accent,196,168,232),.5); }
.article a:hover, .article-back:hover, .quote-source a:hover{ color:#d9c4f5; text-decoration-color:#d9c4f5; }
/* Inhalts-/Prosa-Links: vereinbarte Lila-Farbe statt Browser-Blau */
.wd p a:not(.wd-btn){ color:rgb(var(--btn-accent,196,168,232)); text-decoration-color:rgba(var(--btn-accent,196,168,232),.5); text-underline-offset:2px; }
.wd p a:not(.wd-btn):hover{ text-decoration-color:rgb(var(--btn-accent,196,168,232)); }
/* Textlink-Konvention: Lila + kleiner Pfeil (automatisch) */
.text-link{ color:rgb(var(--btn-accent,196,168,232)); text-decoration:underline; text-decoration-color:rgba(var(--btn-accent,196,168,232),.5); text-underline-offset:3px; transition:color .2s ease, text-decoration-color .2s ease; }
.text-link::after{ content:"\00a0\2192"; }
.text-link:hover{ text-decoration-color:rgb(var(--btn-accent,196,168,232)); }

/* --- Artikel-Kopf (Datum, Autoren-Kreis) — nur dort vorhanden, Klassen sind eindeutig --- */
.article-head .post-meta{ justify-content:center; margin-bottom:16px; }
header.intro.article-head{ padding-bottom:100px; }
@media (max-width:640px){ header.intro.article-head{ padding-bottom:70px; } }
.post-meta{ display:flex; align-items:center; gap:12px; margin-bottom:12px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.post-tag{ color:rgb(var(--ff-accent,196,168,232)); font-weight:600; }
/* Fallstudien farblich markieren (Lila-Pill) */
.post-tag--case{ display:inline-block; padding:2px 9px; border-radius:999px;
  background:rgba(var(--ff-accent,196,168,232),.18);
  border:1px solid rgba(var(--ff-accent,196,168,232),.55); }
/* Logbuch-Kategoriefilter */
/* ===================== GEEKY STUFF =====================
   Eigene Seite mit zwei Leinwaenden: der treibende Code liegt als Hintergrund
   hinter allem, die Platine ist ein normaler Abschnitt im Fluss. Beide Ebenen
   holen ihre Farbe aus --ff-accent, wechseln also mit der Aurora mit. */
.geeky-code{ position:fixed; inset:0; width:100%; height:100%; z-index:0;
  pointer-events:none; opacity:.9; }
body.reduced-motion .geeky-code{ display:none; }
.geeky-head{ position:relative; z-index:1; }
.geeky-head p:not(.home-about-eyebrow){ max-width:44rem; margin-left:auto; margin-right:auto; }
.geeky-brett{ position:relative; z-index:1; max-width:1080px; margin:10px auto 0; padding:0 24px; }
.geeky-brett canvas{ display:block; width:100%; height:clamp(320px, 46vh, 520px); }
@media (max-width:600px){ .geeky-brett{ padding:0 12px; } .geeky-brett canvas{ height:360px; } }
.posts, .cta-section{ position:relative; z-index:1; }
/* Kennzeichen der dritten Kategorie: gleiche Pille wie bei Casestudies,
   aber in der Aurora-Farbe statt in Weiss. */
/* Drei feste Spalten (das Logbuch fuellt seine drei Spalten ueber die Menge,
   hier sollen auch wenige Karten dieselbe Breite behalten). */
.posts--drei{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:900px){ .posts--drei{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){ .posts--drei{ grid-template-columns:minmax(0,1fr); } }
.post-tag--geeky{ display:inline-block; padding:2px 9px; border-radius:999px;
  border:1px solid rgba(var(--ff-accent,196,168,232),.45);
  background:rgba(var(--ff-accent,196,168,232),.10);
  color:rgb(var(--ff-accent,196,168,232)); }
body.reduced-motion .post-tag--geeky{ color:#fff !important; border-color:rgba(255,255,255,.7); background:none; }

.lf-filter{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:34px 0 34px; }
.lf-chip{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:12.5px; letter-spacing:.04em; color:rgba(255,255,255,.72); background:transparent; border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:7px 16px; cursor:pointer; transition:color .2s ease, background .2s ease, border-color .2s ease; }
.lf-chip:hover{ color:#fff; border-color:rgba(255,255,255,.36); }
.lf-chip.active{ color:#0c0a1a; background:rgb(var(--btn-accent,178,180,192)); border-color:transparent; }
body.reduced-motion .lf-chip{ transition:none; }
body.reduced-motion .lf-chip.active{ color:#0c0a1a; background:#fff; }
.post-date{ color:rgb(var(--ff-accent,196,168,232)); font-weight:500; }
.ff-vom{ color:#fff; font-weight:500; }
.post-circle-wrap{ position:absolute; top:-54px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:12px; }
.article-about{ position:absolute; top:22px; right:26px; z-index:2; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); text-decoration:none; white-space:nowrap; transition:opacity .2s ease; }
.article-about:hover{ opacity:.7; }
.article-about span{ display:inline-block; transition:transform .2s ease; }
.article-about:hover span{ transform:translateX(3px); }
@media (max-width:600px){ .article-about{ top:16px; right:18px; font-size:10px; } }
.post-circle-holder{ position:relative; width:108px; height:108px; }
.post-circle-photo{ width:108px; height:108px; border-radius:50%; overflow:hidden; border:3px solid rgba(255,255,255,.18); box-shadow:0 6px 28px rgba(0,0,0,.55); }
.post-circle-photo img{ display:block; width:100%; height:100%; transform:scale(1.4) translateY(10%); transform-origin:center center; filter:grayscale(1) contrast(1.03); }
.post-circle-email{ position:absolute; right:2px; bottom:6px; transform:none; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#000; border:1px solid rgba(255,255,255,.22); color:#fff; text-decoration:none; transition:opacity .2s ease; }
.post-circle-email:hover{ opacity:.8; }
.post-circle-email svg{ width:12px; height:12px; }
@media (max-width:600px){ .post-circle-holder, .post-circle-photo{ width:88px; height:88px; } }

/* ===================== 4) HERO (Startseite + Kontakt; body ohne .sub) ===================== */
body:not(.sub){ overflow:hidden; }
body:not(.sub) canvas#cvs{ background:radial-gradient(130% 100% at 50% 12%, #0e0c29 0%, #070518 50%, #010008 100%); }
body:not(.sub).reduced-motion canvas#cvs{ display:block !important; }
body:not(.sub) h1, .headline .headline-word{
  font-family:var(--sans); font-weight:700; font-size:clamp(38px,5.6vw,76px); line-height:.95;
  margin:0 0 12px; letter-spacing:.005em; max-width:14ch; color:#fff; text-transform:none;
}
body:not(.sub) .tagline{ font-size:clamp(13px,1vw,15px); white-space:nowrap; }
body:not(.sub).reduced-motion .color-switch{ display:none !important; }
.stage{ position:fixed; inset:0; pointer-events:none; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center; min-height:100vh; min-height:100dvh; }
.headline{ position:fixed; left:0; right:0; top:33%; z-index:4; transform:translateY(-50%) translateZ(0); display:flex; flex-direction:column; align-items:center; padding:0 24px; pointer-events:none; mix-blend-mode:difference; transition:opacity .35s ease; }
body.menu-open .headline{ opacity:0; pointer-events:none; }
.headline h1, .headline .headline-word{ color:#fff !important; }
.headline .sub{ font-family:var(--sans); font-weight:500; font-size:clamp(12px,1.05vw,15px); letter-spacing:.2em; text-transform:uppercase; color:#fff; margin:0; opacity:.85; margin-top:clamp(5px,1.0vh,12px) !important; }
.headline .sub .sub-link{ color:inherit; text-decoration:none; pointer-events:auto; cursor:pointer; transition:text-shadow .25s ease, opacity .25s ease; }
.headline .sub .sub-link:hover, .headline .sub .sub-link:focus-visible{ outline:none; text-shadow:0 0 16px rgba(var(--ff-accent,155,135,255),.65), 0 0 6px rgba(var(--ff-accent,155,135,255),.45); }
.btn-row{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:14px; align-items:center; justify-items:stretch; mix-blend-mode:normal; isolation:isolate; }
.lower{ position:absolute; left:0; right:0; top:51%; transform:translateY(-50%) translateZ(0); display:flex; flex-direction:column; align-items:center; gap:22px; pointer-events:none; }
.lower .color-switch{ position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:18px; }
/* Color-Switch (Index + Kontakt) */
.color-switch{ display:inline-flex; flex-direction:column; align-items:center; gap:8px; padding:6px 4px; background:none; border:0; cursor:pointer; font-family:var(--sans); pointer-events:auto; -webkit-tap-highlight-color:transparent; touch-action:manipulation; opacity:.85; transition:opacity .2s ease; }
.color-switch:hover{ opacity:1; }
.color-switch .dot{ position:relative; width:11px; height:11px; border-radius:50%; background:#50ffa0; transition:background .4s ease; mix-blend-mode:normal; isolation:isolate; }
.color-switch .cs-label{ color:#fff; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; mix-blend-mode:normal; isolation:isolate; }
/* Farbnamen pulsieren dezent - signalisiert Klickbarkeit (Farbwelt wechseln) */
.color-switch .cs-label{ animation:csHintPulse 2s ease-in-out infinite; }
@keyframes csHintPulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .color-switch .cs-label{ animation:none; } }
/* Glühwürmchen am Nocturna-Farbpunkt entfernt (auf Wunsch) */
.color-switch.world-nocturna .dot::after{ display:none !important; content:none !important; }
body.reduced-motion .color-switch{ display:none !important; }
body.reduced-motion .color-switch .cs-label{ color:#fff !important; }
/* Hero reduced-motion + mobile */
body:not(.sub).reduced-motion .stage,
body:not(.sub).reduced-motion .headline,
body:not(.sub).reduced-motion h1,
body:not(.sub).reduced-motion .headline-word,
body:not(.sub).reduced-motion .tagline,
body:not(.sub).reduced-motion .topleft{ mix-blend-mode:normal !important; }
body:not(.sub).reduced-motion h1,
body:not(.sub).reduced-motion .headline-word,
body:not(.sub).reduced-motion .sub,
body:not(.sub).reduced-motion .tagline{ color:#fff !important; opacity:1 !important; text-shadow:none; }
body:not(.sub).reduced-motion .menu-overlay.open{ background:#000 !important; }
body:not(.sub).reduced-motion .menu-overlay.open .menu-nav > a{ opacity:1 !important; color:#fff !important; }
body:not(.sub).reduced-motion #ffTrigger{ display:none !important; }
@media (max-width:640px){
  body:not(.sub) .topleft{ mix-blend-mode:normal; }
  .headline{ top:42%; } .lower{ top:60%; }
  .headline .sub{ font-size:clamp(11px,3.2vw,13px); }
  .btn-row{ gap:10px; }
}

/* ===================== 5) KONTAKT ===================== */
.stage.contact{ justify-content:flex-start; }
.contact-wrap{ display:flex; flex-direction:column; align-items:center; width:100%; max-width:460px; min-height:100%; padding:0 24px 44px; box-sizing:border-box; pointer-events:none; }
.ct-main{ display:flex; flex-direction:column; align-items:center; gap:18px; margin-top:clamp(84px, 15vh, 220px); }
.contact-wrap .color-switch{ position:static; transform:none; margin-top:clamp(26px, 6vh, 70px); }
.contact-head{ mix-blend-mode:normal !important; isolation:isolate; position:static; transform:none; padding:0; }
.contact-head h1{ font-size:clamp(38px, 5.6vw, 76px); line-height:.98; margin:0; max-width:none; }
.contact-intro{ font-family:var(--sans); font-weight:400; font-size:clamp(18px,1.8vw,22px); line-height:1.55; color:#fff; opacity:.82; margin:-2px 0 4px; max-width:34ch; text-align:center; text-shadow:0 1px 10px rgba(5,4,16,.45); mix-blend-mode:normal; isolation:isolate; }
.ct-circles{ display:flex; gap:14px; justify-content:center; mix-blend-mode:normal; isolation:isolate; pointer-events:auto; }
/* Kontaktseite: dieselben drei Symbole wie im Menue, deshalb auch hier ohne
   Kreis. Die 42x42 bleiben als Tippflaeche. Der Klassenname bleibt, er steckt
   im Markup und in kontakt-popover.js. */
.ct-circle{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; background:none; border:0; box-shadow:none; color:#fff; opacity:.85; text-decoration:none; transition:transform .2s ease, opacity .2s ease; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.ct-circle:hover{ transform:translateY(-1px); opacity:1; }
.ct-circle:active{ transform:translateY(0) scale(.95); }
.ct-circle .ico{ width:17px; height:17px; flex:none; }
.ct-copy{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; flex:none; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20); color:#fff; cursor:pointer; transition:background .15s ease, border-color .15s ease, transform .1s ease; }
.ct-copy:hover{ background:rgba(255,255,255,.20); border-color:rgba(255,255,255,.36); }
.ct-copy:active{ transform:scale(.92); }
.ct-copy:focus-visible{ outline:2px solid rgba(255,255,255,.7); outline-offset:2px; }
.ct-copy .ic{ width:13px; height:13px; }
.ct-copy .ic-check{ display:none; color:#74f0a8; }
.ct-copy.copied{ background:rgba(116,240,168,.16); border-color:rgba(116,240,168,.5); }
.ct-copy.copied .ic-copy{ display:none; }
.ct-copy.copied .ic-check{ display:inline-block; }
.ct-circle .ct-pop{ display:none; }
@media (hover:hover) and (pointer:fine){
  .ct-circle{ cursor:pointer; }
  .ct-circle:focus-visible{ outline:2px solid rgba(255,255,255,.65); outline-offset:3px; }
  .ct-circle .ct-pop{ display:block; position:absolute; left:50%; bottom:100%; margin-bottom:11px; transform:translateX(-50%) translateY(4px); background:#000; color:#fff; border:1px solid rgba(255,255,255,.14); padding:7px 12px; border-radius:9px; font-size:13px; line-height:1; white-space:nowrap; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease, transform .18s ease, visibility .18s ease; box-shadow:0 10px 26px rgba(0,0,0,.45); z-index:5; }
  .ct-circle .ct-pop--act{ display:flex; align-items:center; gap:9px; padding-right:7px; }
  .ct-circle::after{ content:""; position:absolute; left:-12px; right:-12px; bottom:100%; height:15px; }
  .ct-circle .ct-pop{ cursor:pointer; }
  .ct-circle .ct-pop:hover{ text-decoration:underline; text-underline-offset:3px; }
  .ct-circle .ct-pop::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:#000; }
  .ct-circle.open .ct-pop, .ct-circle:hover .ct-pop, .ct-circle:focus-within .ct-pop{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
  .ct-circle.open, .ct-circle:hover, .ct-circle:focus-within{ border-color:rgba(255,255,255,.52); background:linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.09) 100%), rgba(255,255,255,.06); }
}
@media (max-width:640px){
  .contact-wrap{ padding:0 22px 40px; }
  .ct-main{ gap:16px; margin-top:clamp(56px, 12vh, 150px); }
  .contact .ink-illu{ width:clamp(150px, 44vw, 190px); }
  .contact-wrap .color-switch{ margin-top:clamp(18px, 4vh, 44px); }
}
body.reduced-motion .contact-head h1, body.reduced-motion .contact-intro{ color:#fff !important; opacity:1 !important; }
body.reduced-motion .ct-circle{ background:#fff !important; color:#000 !important; border:2px solid #fff !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }

/* ===================== 6) ABOUT ===================== */
.headline-wrap{ position:relative; display:block; }
header.intro .signature{ margin:26px 0 0; max-width:none; font-size:clamp(15px,1.25vw,17px); line-height:1.3; color:#FAFAF7; opacity:.9; font-weight:600; letter-spacing:.04em; text-shadow:0 1px 20px rgba(0,0,0,.4); }
.about{ max-width:760px; margin:24px auto 30px; padding:0 28px; display:flex; flex-direction:column; gap:16px; }
@media (max-width:600px){ .about{ padding:0 16px; gap:14px; margin:20px auto 30px; } }
.about-card{ border-radius:18px; padding:32px 34px; background:rgba(14,12,28,.72); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); box-shadow:0 8px 30px rgba(0,0,0,.3); }
@media (max-width:600px){ .about-card{ padding:24px 22px; border-radius:14px; } }
.about-intro{ display:grid; grid-template-columns:1fr; gap:24px; align-items:start; }
.about-photo{ border-radius:14px; overflow:hidden; aspect-ratio:3/2; border:1px solid rgba(255,255,255,.12); }
.about-photo img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 32%; filter:grayscale(1) contrast(1.03); }
.about-intro-text > span{ display:block; }
.about-intro-text > span.only-de, .about-intro-text > span.only-en, .about-intro-text > span.only-la{ display:block; }
html[lang="en"] .about-intro-text > span.only-de{ display:none !important; }
html[lang="la"] .about-intro-text:has(> span.only-la) > span.only-de{ display:none !important; }
html:not([lang="en"]) .about-intro-text > span.only-en{ display:none !important; }
html:not([lang="la"]) .about-intro-text > span.only-la{ display:none !important; }
.about-intro-text .lead{ margin-top:0; }
.about-card .lead{ font-size:17px; line-height:1.7; font-weight:400; color:rgba(255,255,255,.78); margin:0 0 34px; }
.about-card p{ font-size:17px; line-height:1.7; color:rgba(255,255,255,.78); margin:0 0 24px; }
.about-card p:last-child{ margin-bottom:0; }
@media (min-width:820px){ main.about > .about-card.reveal{ width:min(1080px, calc(100vw - 48px)); max-width:none; margin-left:calc(50% - min(540px, calc(50vw - 24px))); margin-right:calc(50% - min(540px, calc(50vw - 24px))); } }
.about-h2{ font-family:var(--sans); font-weight:600; font-size:clamp(13px,1vw,15px); letter-spacing:.2em; text-transform:uppercase; text-align:center; color:#fff; opacity:.82; margin:0 0 14px; }
.about-cta{ align-self:flex-start; margin-top:8px; }
.about-cta .arrow{ display:inline-block; }
.works-cta-block{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; max-width:760px; margin:48px auto 44px; padding:0 28px; }
.works-pitch{ margin:0; color:#fff; font-weight:700; font-size:clamp(24px,3.6vw,36px); line-height:1.3; letter-spacing:-.02em; transform:translateZ(0); }
.works-cta-block .about-cta{ align-self:center; margin-top:18px; }
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; } }
body.reduced-motion .reveal{ opacity:1 !important; transform:none !important; }
.privat-heart{ display:flex; justify-content:center; margin:2px 0 22px; color:#000; }
.privat-heart svg{ width:24px; height:24px; }
.privat-masonry{ columns:3; column-gap:12px; }
@media (max-width:760px){ .privat-masonry{ columns:2; } }
@media (max-width:440px){ .privat-masonry{ columns:1; } }
.privat-item{ position:relative; break-inside:avoid; margin:0 0 12px; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); }
.privat-item img{ display:block; width:100%; height:auto; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
@media (hover:hover){ .privat-item:hover img{ transform:scale(1.04); } }
.privat-tag{ position:absolute; top:10px; left:10px; z-index:2; font-size:10px; font-weight:600; letter-spacing:.02em; text-transform:none; color:#fff; padding:5px 9px; border-radius:999px; background:rgba(10,8,20,.5); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
@media (max-width:600px){ .privat-masonry{ columns:auto !important; column-gap:0 !important; display:grid; grid-template-columns:1fr; gap:10px; } .privat-masonry .privat-item{ margin:0; break-inside:auto; } }
.about-dragon{ display:block; width:min(560px, 90vw); margin:0 auto; transform:translateZ(0); pointer-events:none; }
.about-dragon img{ display:block; width:100%; height:auto; }
/* Drache dunkel (wie die anderen Zeichnungen); barrierefrei bleibt hell */
.dragon-photo{ filter:invert(1); }
body.reduced-motion .dragon-photo{ filter:none; }
body.menu-open .about-dragon{ opacity:0; transition:opacity .35s ease; }
.dragon-block{ display:flex; flex-direction:column; align-items:center; gap:4px; margin:20px auto 36px; }
.world-pick{ display:flex; flex-direction:column; align-items:center; gap:11px; cursor:pointer; width:max-content; -webkit-tap-highlight-color:transparent; }
.world-pick .wp-dot{ width:12px; height:12px; border-radius:50%; background:currentColor; box-shadow:0 0 12px currentColor; transition:color .4s ease; }
.world-pick .wp-name{ font-family:var(--sans); font-weight:500; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:#fff; line-height:1.05; transform:translateZ(0); }
.world-pick:focus-visible{ outline:2px solid rgba(255,255,255,.5); outline-offset:4px; border-radius:8px; }
@media (prefers-reduced-motion: reduce){ .world-pick .wp-dot{ transition:none; } }
@media (max-width:600px){ .about-dragon{ width:min(360px,90vw); } .dragon-block{ gap:4px; margin:10px auto 28px; } }
body.reduced-motion .wp-name{ mix-blend-mode:normal !important; color:#fff !important; }
body.reduced-motion .works-pitch{ mix-blend-mode:normal !important; color:#fff !important; }

/* ===================== 7) ARTBOARD ===================== */
.grid{ position:relative; max-width:1080px; margin:0 auto; padding:72px 28px 100px; display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
@media (max-width:1100px){ .grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:720px){ .grid{ grid-template-columns:repeat(2, 1fr); gap:14px; padding:52px 16px 80px; } }
@media (max-width:420px){ .grid{ grid-template-columns:1fr; } }
.tile{ position:relative; display:block; aspect-ratio:1/1; overflow:hidden; border-radius:14px; content-visibility:auto; contain-intrinsic-size:auto 300px; background:rgba(14,12,28,.5); border:1px solid rgba(255,255,255,.1); cursor:pointer; opacity:0; transform:translateY(14px); animation:rise .6s ease forwards; }
@keyframes rise{ to{ opacity:1; transform:translateY(0); } }
.tile img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1), filter .4s ease; filter:brightness(.92); }
.tile-empty img{ display:none; }
.tile-empty{ background:linear-gradient(135deg, rgba(233,27,92,.10), rgba(14,12,28,.6)); }
.tile:hover img{ transform:scale(1.06); filter:brightness(1.08); }
.tile::after{ content:""; position:absolute; right:12px; bottom:12px; width:34px; height:34px; border-radius:50%; background:rgba(8,7,18,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E") center/18px no-repeat; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transform:scale(.8); transition:opacity .25s ease, transform .25s ease; }
.tile:hover::after{ opacity:1; transform:scale(1); }
.tile-link::after{ background:rgba(8,7,18,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") center/17px no-repeat; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.tile-badge{ position:absolute; top:12px; left:12px; font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(10,8,20,.5); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:5px 10px; border-radius:30px; pointer-events:none; box-shadow:0 4px 14px rgba(0,0,0,.3); }
.tile-badge--privat{ background:rgba(10,8,20,.5); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
/* Casestudie: nur das Badge in der aktuellen Aurora-Farbe, kein Schein/Rahmen */
.tile-badge--case{ background:rgba(10,8,20,.5); }
@media (prefers-reduced-motion: reduce){ .tile{ opacity:1; transform:none; animation:none; } .tile:hover img{ transform:none; } }
/* Video-Kacheln verhalten sich wie Bild-Kacheln, aber ohne Lupe & Klick */
.tile video{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1), filter .4s ease; filter:brightness(.92); }
.tile:hover video{ transform:scale(1.06); filter:brightness(1.08); }
.tile-video{ cursor:default; }
.tile-video::after{ display:none; }
@media (prefers-reduced-motion: reduce){ .tile:hover video{ transform:none; } }
.lightbox{ position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; background:rgba(5,4,16,.88); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); opacity:0; pointer-events:none; transition:opacity .3s ease; padding:5vw; }
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:90vw; max-height:88vh; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.6); transform:scale(.96); transition:transform .3s ease; }
.lightbox.open img{ transform:scale(1); }
.lightbox-close{ position:fixed; top:24px; right:28px; z-index:41; width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:background .2s ease; }
.lightbox-close:hover{ background:rgba(255,255,255,.2); }
.lightbox-close svg{ width:20px; height:20px; }

/* ===================== 8) WEBDESIGN + BEGLEITUNG (.wd) ===================== */
.wd{ max-width:1080px; margin:0 auto; padding:clamp(48px,7.5vh,96px) 40px 64px; }
.wd > section{ margin-bottom:clamp(56px,9vh,112px); }
.wd > section:last-child{ margin-bottom:24px; }
.wd h2.wd-eyebrow{ font-family:var(--sans); font-weight:600; font-size:clamp(12px,1vw,13px); line-height:1.4; letter-spacing:.2em; text-transform:uppercase; color:rgb(var(--ff-accent,196,168,232)); margin:0 0 26px; opacity:.95; text-shadow:0 0 14px rgba(5,4,16,.6), 0 1px 3px rgba(5,4,16,.55); }
.wd h2{ font-family:var(--sans); font-weight:600; font-size:clamp(23px,2.5vw,31px); line-height:1.4; letter-spacing:-.005em; color:#fff; margin:0 0 18px; }
.wd p{ font-size:clamp(16px,1.2vw,18px); line-height:1.75; color:rgba(255,255,255,.8); margin:0 0 24px; }
.wd-panel{ background:rgba(14,12,28,.66); border:1px solid rgba(255,255,255,.07); border-radius:22px; padding:clamp(30px,4vw,56px); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); }
.wd-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.wd-card{ background:rgba(14,12,28,.66); border:1px solid rgba(255,255,255,.07); border-radius:20px; padding:34px 30px; transition:transform .45s cubic-bezier(.2,.7,.2,1), border-color .45s; }
.wd-card:hover{ transform:translateY(-5px); border-color:rgba(196,168,232,.4); }
.wd-ico{ width:46px; height:46px; display:flex; align-items:center; justify-content:center; border-radius:14px; background:rgba(196,168,232,.1); border:1px solid rgba(196,168,232,.22); color:#c4a8e8; margin:0 0 20px; }
.wd-ico svg{ width:24px; height:24px; }
.wd-card h3{ font-family:var(--sans); font-weight:600; font-size:19px; line-height:1.4; color:#fff; margin:0 0 10px; }
.wd-card p{ font-size:16px; line-height:1.7; color:rgba(255,255,255,.72); margin:0; }
.wd-tags{ list-style:none; padding:0; margin:24px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
.wd-tags li{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:12.5px; letter-spacing:.04em; color:rgb(var(--btn-accent,178,180,192)); border:1px solid rgba(var(--btn-accent,178,180,192),.45); border-radius:999px; padding:7px 14px; }
body.reduced-motion .wd-tags li{ color:#fff; border-color:rgba(255,255,255,.3); }
.wd-steps{ list-style:none; padding:0; margin:0; }
.wd-step{ display:flex; gap:22px; padding:26px 0; border-top:1px solid rgba(255,255,255,.08); align-items:flex-start; }
.wd-step:first-child{ border-top:0; padding-top:4px; }
.wd-step:last-child{ padding-bottom:4px; }
.wd-step-ico{ flex:0 0 auto; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(196,168,232,.1); border:1px solid rgba(196,168,232,.22); color:#c4a8e8; }
.wd-step-ico svg{ width:22px; height:22px; }
.wd-step h3{ font-family:var(--sans); font-weight:600; font-size:18px; line-height:1.4; color:#fff; margin:0 0 6px; }
.wd-step p{ font-size:16px; line-height:1.65; color:rgba(255,255,255,.72); margin:0; }
.wd-cta{ position:relative; overflow:hidden; text-align:center; border-radius:26px; padding:clamp(48px,7vw,82px) clamp(24px,5vw,64px); background:linear-gradient(180deg, rgba(22,18,44,.72), rgba(12,10,26,.78)); border:1px solid rgba(196,168,232,.18); box-shadow:0 30px 80px -40px rgba(124,92,220,.6), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); }
.wd-cta::before{ content:""; position:absolute; left:50%; top:42%; width:min(560px,85%); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(124,92,220,.4), rgba(124,92,220,0) 64%); animation:wdPulse 7s ease-in-out infinite; pointer-events:none; z-index:0; }
.wd-cta > *{ position:relative; z-index:2; }
@keyframes wdPulse{ 0%,100%{ opacity:.45; transform:translate(-50%,-50%) scale(.92);} 50%{ opacity:.8; transform:translate(-50%,-50%) scale(1.06);} }
/* line-height explizit: ohne Angabe erbt die Ueberschrift den weiten
   Zeilenabstand des Fliesstextes, was bei zwei Zeilen auseinanderfaellt. */
.wd-cta h2{ font-size:clamp(26px,3.2vw,38px); font-weight:600; line-height:1.2; margin:0 0 14px; }
.wd-cta p{ max-width:46ch; margin:0 auto 30px; color:rgba(255,255,255,.84); }
.wd-cta-buttons{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
/* Wiederverwendbarer CTA auf Nicht-.wd-Seiten (About, Artboard, Logbuch, Artikel) */
.cta-section{ max-width:760px; margin:0 auto; padding:8px 24px 96px; }
@media (max-width:600px){ .cta-section{ padding:8px 16px 72px; } }
body.reduced-motion .wd-cta::before{ display:none; }
/* Fallstudie / Case-Study */
.cs-meta{ display:flex; flex-wrap:wrap; gap:6px 28px; margin:0 0 28px; padding:14px 0; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); font-size:14px; color:rgba(255,255,255,.72); }
.cs-meta strong{ display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); font-weight:600; margin-bottom:2px; }
.cs-body h2{ text-align:left; }
.cs-figure{ margin:30px 0; }
.cs-figure--logo img{ background:#f4f2ec; padding:clamp(24px,5vw,48px); border-radius:14px; }
.cs-figure img{ display:block; width:100%; height:auto; border-radius:16px; border:1px solid rgba(255,255,255,.1); }
.cs-figure figcaption{ margin-top:10px; font-size:13px; color:rgba(255,255,255,.5); text-align:center; }
.cs-video{ position:relative; margin:30px 0; aspect-ratio:16/9; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.1); background:#0e0c1c; }
.cs-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
/* Casestudie-Bildergalerie */
.cs-gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin:24px 0 8px; }
.cs-gallery a{ display:block; aspect-ratio:1; border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.1); }
.cs-gallery img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.cs-gallery a:hover img{ transform:scale(1.05); }
body.reduced-motion .cs-gallery img{ transition:none; }
/* FAQ-Accordion (Gemeinsam) */
.faq{ text-align:left; }
.faq h2{ text-align:center; font-size:clamp(24px,3vw,34px); font-weight:600; margin:0 0 24px; }
.faq-item{ position:relative; border-top:1px solid rgba(255,255,255,.12); border-radius:0 10px 10px 0; transition:background .4s ease; }
.faq-item:last-child{ border-bottom:1px solid rgba(255,255,255,.12); }
.faq-item::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; border-radius:2px; background:rgb(var(--btn-accent,178,180,192)); box-shadow:0 0 12px rgba(var(--btn-accent,178,180,192),.75); opacity:0; transform:scaleY(.15); transform-origin:center; transition:opacity .4s ease, transform .5s cubic-bezier(.2,.9,.3,1.2); }
.faq-item[open]{ background:linear-gradient(90deg, rgba(var(--btn-accent,178,180,192),.07), transparent 55%); }
.faq-item[open]::before{ opacity:1; transform:scaleY(1); }
.faq-item summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 8px 18px 18px; font-weight:600; font-size:clamp(16px,1.6vw,19px); color:#fff; transition:color .25s ease; }
.faq-item summary:hover{ color:rgb(var(--btn-accent,178,180,192)); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:""; flex:0 0 auto; width:9px; height:9px; margin:0 6px 4px 0; border-right:2px solid rgb(var(--btn-accent,178,180,192)); border-bottom:2px solid rgb(var(--btn-accent,178,180,192)); transform:rotate(45deg); transition:transform .4s cubic-bezier(.2,.9,.3,1.2); }
.faq-item[open] summary::after{ transform:rotate(-135deg); margin:0 6px 0 0; }
.faq-item p{ margin:0 18px 18px; color:rgba(255,255,255,.8); line-height:1.6; max-width:62ch; animation:faqIn .45s ease both; }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
body.reduced-motion .faq-item p{ animation:none; }
/* Datenschutzkonformer YouTube-Platzhalter (lädt erst nach Klick) */
.yt-play{ position:absolute; inset:0; margin:auto; width:72px; height:72px; border-radius:50%; border:0; cursor:pointer; background:rgba(124,92,220,.92); color:#fff; font-size:22px; padding-left:5px; display:flex; align-items:center; justify-content:center; transition:background .2s ease, transform .2s ease; }
.yt-play:hover{ background:rgba(124,92,220,1); transform:scale(1.06); }
.yt-note{ position:absolute; left:0; right:0; bottom:0; margin:0; padding:8px 12px; font-size:12px; line-height:1.4; color:rgba(255,255,255,.78); background:rgba(0,0,0,.45); text-align:center; }
.cs-quote{ margin:34px 0; padding:20px 24px; border-left:3px solid rgba(196,168,232,.6); background:rgba(14,12,28,.5); border-radius:0 14px 14px 0; }
.cs-quote p{ margin:0 0 10px; font-size:17px; line-height:1.6; color:rgba(255,255,255,.9); }
.cs-quote cite{ font-style:normal; font-weight:600; font-size:13px; color:rgba(255,255,255,.6); }
/* Projekte-Übersicht (Vorschau-Karten) */
.proj-wrap{ max-width:1100px; margin:0 auto; padding:8px 28px; }
.proj-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:20px; }
.proj-card{ display:flex; flex-direction:column; text-decoration:none; color:inherit; background:rgba(14,12,28,.6); border:1px solid rgba(255,255,255,.09); border-radius:18px; overflow:hidden; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.proj-card:hover{ transform:translateY(-4px); border-color:rgba(196,168,232,.35); box-shadow:0 24px 60px -40px rgba(124,92,220,.6); }
.proj-card-img{ display:block; aspect-ratio:4/3; overflow:hidden; background:#0e0c1c; }
.proj-card-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.proj-card:hover .proj-card-img img{ transform:scale(1.04); }
.proj-card-body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:6px; }
.proj-card-tag{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgb(var(--btn-accent,178,180,192)); font-weight:600; }
.proj-card-title{ font-family:var(--sans); font-size:22px; font-weight:600; color:#fff; }
.proj-card-text{ font-size:14px; line-height:1.5; color:rgba(255,255,255,.72); }
.proj-note{ max-width:1100px; margin:18px auto 0; padding:0 28px; color:rgba(255,255,255,.6); font-size:14px; }
.proj-note a{ color:rgb(var(--btn-accent,178,180,192)); }
@media (max-width:600px){ .proj-wrap{ padding:8px 16px; } .proj-note{ padding:0 16px; } }
body.reduced-motion .proj-card{ transition:none; }
body.reduced-motion .proj-card:hover{ transform:none; box-shadow:none; }
.wd-fireflies{ position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; border-radius:26px; }
.wd-firefly{ position:absolute; width:5px; height:5px; border-radius:50%; background:radial-gradient(circle, rgba(255,236,180,.95), rgba(255,210,130,0) 70%); box-shadow:0 0 9px 2px rgba(255,222,150,.5); opacity:0; animation:ffDrift var(--d,12s) ease-in-out infinite, ffGlow var(--g,3.5s) ease-in-out infinite; animation-delay:var(--delay,0s); }
@keyframes ffGlow{ 0%,100%{ opacity:0;} 50%{ opacity:var(--o,.8);} }
@keyframes ffDrift{ 0%{ transform:translate(0,0);} 33%{ transform:translate(var(--dx,12px),var(--dy,-16px));} 66%{ transform:translate(calc(var(--dx,12px)*-.6),calc(var(--dy,-16px)*.5));} 100%{ transform:translate(0,0);} }
.wd h2.wd-eyebrow-center{ text-align:center; }
.wd-portrait{ width:104px; height:104px; border-radius:50%; object-fit:cover; object-position:50% 25%; filter:grayscale(1) contrast(1.03); display:block; margin:0 auto 24px; border:1px solid rgba(255,255,255,.2); box-shadow:0 0 0 6px rgba(196,168,232,.07), 0 0 26px rgba(255,222,150,.18), 0 12px 34px -10px rgba(124,92,220,.5); }
.wd-reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.wd-reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .wd-reveal{ opacity:1; transform:none; } .wd-cta::before,.wd-firefly{ animation:none; } .wd-firefly{ opacity:.45; } }
@media (max-width:760px){ .wd{ padding:clamp(32px,5vh,56px) 20px 44px; } .wd-grid{ grid-template-columns:1fr; gap:16px; } }
/* Kundenstimmen (Begleitung) */
.wd-quotes{ display:grid; gap:18px; grid-template-columns:1fr; }
@media(min-width:760px){ .wd-quotes{ grid-template-columns:repeat(3,1fr); } }
.wd-quote{ background:rgba(14,12,28,.66); border:1px solid rgba(255,255,255,.07); border-radius:18px; padding:22px 22px 18px; display:flex; flex-direction:column; gap:14px; text-align:left; }
.wd-quote p{ margin:0; font-size:15px; line-height:1.6; color:rgba(255,255,255,.86); font-style:normal; }
.wd-quote cite{ font-style:normal; font-weight:600; font-size:13px; letter-spacing:.04em; color:rgba(255,255,255,.6); }
.wd-quote cite::before{ content:"- "; }
/* Kundenstimmen-Section auf Nicht-.wd-Seiten (z.B. Artboard) */
.quotes-section{ max-width:1100px; margin:0 auto; padding:6px 28px 96px; }
@media (max-width:600px){ .quotes-section{ padding:6px 16px 72px; } }
/* Referenzen-Logoband (Begleitung) — Logos in Weiss/Graustufen, dezent, beim Hover voll */
/* Referenzen-Logoband (Begleitung): transparentes Endlos-Laufband, weisse Logos auf der Aurora */
.ref-band-section{ text-align:center; padding:24px 0; }
.ref-band{ position:relative; overflow:hidden; max-width:820px; margin:0 auto; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
body.reduced-motion .ref-band{ -webkit-mask-image:none; mask-image:none; }
/* Logos: schwarz in der Zauberwelt, weiss in der barrierefreien Version (siehe unten) */
.ref-track{ display:flex; align-items:center; width:max-content; animation:refScroll 30s linear infinite; }
.ref-band:hover .ref-track{ animation-play-state:paused; }
@keyframes refScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.ref-logo{ height:66px; width:auto; flex:none; margin-right:clamp(40px,6vw,80px);
  filter:brightness(0); opacity:1; transition:opacity .25s ease, filter .25s ease; }
.ref-logo.ref-sm{ height:50px; }
.ref-logo.ref-xs{ height:38px; }
.ref-logo.ref-lg{ height:84px; }
.ref-logo.ref-tall{ height:115px; }
@media (max-width:600px){ .ref-band{ max-width:none; margin:0 12px; } .ref-logo{ height:82px; margin-right:64px; } .ref-logo.ref-sm{ height:62px; } .ref-logo.ref-xs{ height:48px; } .ref-logo.ref-lg{ height:103px; } .ref-logo.ref-tall{ height:140px; } }
/* Reduced-Motion / Barrierefrei: kein Scrollen, alle Logos sichtbar (Umbruch) */
body.reduced-motion .ref-band{ overflow:visible; }
body.reduced-motion .ref-track{ animation:none; width:auto; flex-wrap:wrap; justify-content:center; }
body.reduced-motion .ref-dup{ display:none; }
body.reduced-motion .ref-logo{ filter:brightness(0) invert(1); opacity:.95; }
@media (prefers-reduced-motion: reduce){ .ref-track{ animation:none; width:auto; flex-wrap:wrap; justify-content:center; } .ref-dup{ display:none; } }
/* Barrierefrei-Basis (nur Webdesign/Begleitung; body.wd-page) */
body.wd-page:not(.magic) #ffTrigger{ display:none !important; }
body.wd-page:not(.magic){ cursor:auto; }
body.wd-page:not(.magic) header.intro,
body.wd-page:not(.magic) header.intro h1,
body.wd-page:not(.magic) header.intro p{ text-align:left; }
body.wd-page:not(.magic) header.intro p{ margin-left:0; margin-right:auto; }
body.wd-page:not(.magic) .wd h2.wd-eyebrow-center{ text-align:left; }
body.wd-page:not(.magic) .wd h2.wd-eyebrow{ color:#fff; text-shadow:none; text-transform:none; letter-spacing:.02em; padding-left:31px; }
body.wd-page.magic .wd h2.wd-eyebrow{ color:#fff; mix-blend-mode:normal; text-shadow:0 0 10px rgba(5,4,16,.92), 0 2px 5px rgba(5,4,16,.88); text-align:center; }
body.wd-page:not(.magic) .wd-panel{ padding-left:30px; }
body.wd-page:not(.magic) .wd-ico,
body.wd-page:not(.magic) .wd-step-ico{ color:#fff; border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.06); }
body.wd-page:not(.magic) .wd p,
body.wd-page:not(.magic) .wd-card p,
body.wd-page:not(.magic) .wd-step p{ color:rgba(255,255,255,.9); }
body.wd-page:not(.magic) .wd-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
body.wd-page:not(.magic) .wd-cta{ text-align:left; border-color:rgba(255,255,255,.14); background:rgba(14,12,28,.66); box-shadow:0 24px 60px -44px rgba(0,0,0,.7); }
body.wd-page:not(.magic) .wd-cta::before{ display:none; }
body.wd-page:not(.magic) .wd-cta p{ margin-left:0; margin-right:0; }
body.wd-page:not(.magic) .wd-cta .wd-portrait{ margin-left:0; box-shadow:0 0 0 1px rgba(255,255,255,.14); }
body.wd-page:not(.magic) .wd-cta-buttons{ justify-content:flex-start; }

/* ===================== 9) LEUCHTFEUER (Blog-Liste) ===================== */
/* Lagerfeuer-Illustration: schwarz/weiss-Strichzeichnung wird zu weissen Linien,
   weisse Flaeche faellt weg (Aurora scheint durch) — kein Freistellen noetig */
/* Echte freigestellte PNGs (transparent, schwarze Linien) — kein Blend-Modus (iOS-sicher) */
.feuer-illu, .ink-illu{ display:block; width:min(300px, 62vw); height:auto; margin:6px auto 2px;
  pointer-events:none; }
@media (max-width:600px){ .feuer-illu, .ink-illu{ width:min(220px, 70vw); } }
/* Zusammenarbeit-Illustration 20% größer */
.ink-illu[src*="zusammenarbeit-illu"]{ width:min(430px, 80vw); }
@media (max-width:600px){ .ink-illu[src*="zusammenarbeit-illu"]{ width:min(310px, 88vw); } }
/* Barrierefrei: schwarze Linien invertieren -> weiss (auf dunklem Grund sichtbar) */
body.reduced-motion .feuer-illu, body.reduced-motion .ink-illu{ filter:invert(1); }
/* Farbumschalter unter der Zeichnung: zentriert und sicher klickbar */
.illu-switch{ display:flex; justify-content:center; width:100%; margin:2px auto 6px; position:relative; z-index:8; }
.illu-switch .color-switch{ position:relative; z-index:8; pointer-events:auto; }
/* Kontakt-Hero: kleiner, ueber dem Titel */
.contact .ink-illu{ width:clamp(224px, 54vw, 320px); margin:-20px auto -28px; }
.posts{ max-width:1080px; margin:0 auto; padding:24px 28px 120px; display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 340px)); justify-content:center; gap:18px; align-items:start; }
.posts:has(.post:nth-child(3)){ justify-content:start; }
@media (max-width:600px){ .posts{ grid-template-columns:minmax(0,1fr); padding:20px 16px 90px; gap:14px; } }
.post{ border-radius:16px; padding:30px 30px; background:rgba(14,12,28,.72); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); box-shadow:0 8px 30px rgba(0,0,0,.3); cursor:pointer; transition:transform .25s ease, border-color .25s ease; opacity:0; transform:translateY(14px); animation:rise .6s ease forwards; }
.post:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.28); }
@media (prefers-reduced-motion: reduce){ .post{ opacity:1; transform:none; animation:none; } }
.post-title{ margin:0 0 10px; font-weight:700; letter-spacing:-.02em; font-size:clamp(20px, 2.4vw, 26px); line-height:1.15; color:#fff; }
.post-excerpt{ margin:0 0 16px; font-size:17px; line-height:1.65; color:rgba(255,255,255,.72); }
.post-more{ display:flex; text-decoration:none; justify-content:flex-end; align-items:center; gap:9px; margin-top:6px; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.65); transition:color .25s ease; }
.post-more .arrow{ display:inline-block; transition:transform .3s cubic-bezier(.7,0,.3,1); }
.post:hover .post-more{ color:#fff; }
.post:hover .post-more .arrow{ transform:translateX(5px); }
.post-more, .post:hover .post-more{ color:rgba(255,255,255,.65); }
header.intro .intro-sub{ max-width:none; margin:12px 0 0; font-family:var(--sans); font-weight:600; font-size:clamp(15px, 1.2vw, 18px); letter-spacing:.22em; text-transform:uppercase; line-height:1.2; color:#fff; opacity:1; font-style:normal; }

/* ===================== 10) LUMINA (Story-Seite) ===================== */
.lumina-island-wrap { width:100%; margin:clamp(30px,6vh,64px) auto 32px; text-align:center; }
.lumina-island-img { display:block; width:62%; max-width:600px; height:auto; margin:0 auto; pointer-events:none; }
.lumina-cs-wrap { display:flex; justify-content:center; margin:20px auto 48px; }
.lm-cs-btn { display:inline-flex; align-items:center; gap:10px; background:none; border:none; cursor:pointer; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:.7; transition:opacity .2s; padding:8px 14px; }
.lm-cs-btn:hover { opacity:1; }
.lm-dot { width:10px; height:10px; border-radius:50%; background:#7a6ad0; transition:background .3s; flex-shrink:0; }
.lm-label { color:#fff; }
.lumina-lead { display:block; font-size:clamp(2rem, 5vw, 3.2rem); font-weight:700; letter-spacing:-.01em; color:#fff; margin-bottom:.15em; line-height:1.1; }
.lumina-opener { margin-bottom:1.6em; }
.lumina-story { text-align:left; max-width:640px; margin:0 auto; }
.lumina-story p { color:rgba(255,255,255,.85); font-size:clamp(15px, 1.8vw, 17px); line-height:1.75; margin:0 0 1.4em; }
.lumina-h2 { font-size:clamp(11px, 1.4vw, 13px); font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.45); margin:2.4em 0 .9em; }
.lumina-story a { color:#fff; text-decoration:underline; text-underline-offset:3px; transition:opacity .2s; }
.lumina-story a:hover { opacity:.7; }
.lumina-sign { }

/* ===================== 11) LEGAL (Datenschutz + Impressum; body.legal) ===================== */
body.legal .article{ max-width:712px; background:rgba(8,7,18,.92); }
.legal{ text-align:left; }
.legal > h2:first-child{ border-top:0; padding-top:0; margin-top:0; }
.legal h2{ font-size:clamp(18px,2.2vw,22px); font-weight:700; color:#fff; letter-spacing:-.01em; margin:36px 0 14px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); }
.legal h3{ font-size:14px; font-weight:600; color:rgb(var(--ff-accent,196,168,232)); letter-spacing:.04em; margin:24px 0 8px; }
.legal p{ font-size:15px; line-height:1.75; color:rgba(255,255,255,.82); margin:0 0 16px; }
.legal strong{ color:#fff; }
.legal ul{ margin:0 0 16px; padding-left:20px; color:rgba(255,255,255,.82); font-size:15px; line-height:1.7; }
.legal li{ margin:0 0 6px; }
.legal a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(var(--ff-accent,196,168,232),.6); word-break:break-word; transition:border-color .2s ease; }
.legal a:hover{ border-color:rgb(var(--ff-accent,196,168,232)); }
.legal .upper{ display:block; background:rgba(var(--ff-accent,196,168,232),.10); border-left:2px solid rgb(var(--ff-accent,196,168,232)); padding:16px 18px; margin:0 0 16px; font-size:13px; line-height:1.7; color:rgba(255,255,255,.88); }
.legal .stand{ margin-top:30px; font-size:13px; color:rgba(255,255,255,.55); }
.legal .credit{ margin-top:6px; font-size:12px; color:rgba(255,255,255,.55); }


/* Mobile: gestapelte Button-Paare gleich breit (volle Breite) */
@media (max-width:520px){
  .wd-cta-buttons, .wd-more{ flex-direction:column; align-items:stretch; }
  .wd-cta-buttons .wd-btn, .wd-more .wd-btn{ width:100%; box-sizing:border-box; justify-content:center; text-align:center; }
}


/* Mobil / kurze Viewports: Navigation enger, damit sie unten nicht überläuft */
@media (max-width:600px){
  .menu-nav{ gap:9px; }
  .menu-nav a, .menu-nav .nav-group-toggle{ padding:3px 16px; font-size:clamp(16px,4.6vw,20px); }
  .menu-contact{ margin-top:20px; }
}
@media (max-height:720px){
  .menu-nav{ gap:6px; }
  .menu-nav a, .menu-nav .nav-group-toggle{ padding:2px 16px; }
  .menu-contact{ margin-top:12px; }
  .menu-legal{ bottom:16px; }
}


/* ============ Site-Footer (alle Seiten) ============ */
/* Transparent: Aurora & Effekte laufen durch. Oben dezenter 50%-schwarzer Trennstrich. */
.site-footer{ position:relative; z-index:6; margin-top:clamp(48px,9vh,100px);
  padding:clamp(26px,4.5vh,42px) clamp(24px,5vw,48px) clamp(40px,7vh,64px);
  border-top:1px solid rgba(0,0,0,.5); transition:opacity .35s ease; }
body.menu-open .site-footer{ opacity:0; pointer-events:none; }
.site-footer-inner{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; }
.site-footer .ft-name{ font-family:var(--sans); font-weight:700; font-size:18px; color:#fff; margin:0; }
.site-footer .ft-role{ font-family:var(--sans); color:rgba(255,255,255,.7); margin:2px 0 14px; }
.site-footer .ft-address{ font-style:normal; font-family:var(--sans); line-height:1.85; color:rgba(255,255,255,.8); font-size:15px; }
.site-footer .ft-address a{ color:rgba(255,255,255,.8); text-decoration:none; transition:color .2s; }
.site-footer .ft-address a:hover{ color:#fff; }
/* Schwebende Icons am rechten Rand (mitfloatend, ohne Kreis) */
.ft-actions{ position:fixed; right:clamp(16px,2vw,30px); top:50%; transform:translateY(-50%);
  z-index:40; display:flex; flex-direction:column; gap:5px; }
.ft-btn{ position:relative; display:flex; align-items:center; justify-content:center; width:30px; height:30px; color:#fff;
  background:none; border:0; box-shadow:none; opacity:.8; transition:transform .2s ease, opacity .2s ease; }
.ft-btn:hover{ transform:scale(1.12); opacity:1; }
.ft-btn svg{ width:17px; height:17px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
@media (max-width:768px){ .ft-actions{ right:12px; gap:4px; }
  .ft-btn{ width:28px; height:28px; } .ft-btn svg{ width:16px; height:16px; } }
.ft-pop{ position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%) translateX(6px); white-space:nowrap;
  background:rgba(20,18,34,.92); color:#fff; padding:7px 12px; border-radius:9px; font-size:13px; font-family:var(--sans);
  border:1px solid rgba(255,255,255,.16); box-shadow:0 6px 18px rgba(0,0,0,.3); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
.ft-btn:hover .ft-pop, .ft-btn:focus-visible .ft-pop{ opacity:1; transform:translateY(-50%) translateX(0); }
.site-footer .ft-copy{ margin:0; text-align:center; font-family:var(--sans); font-size:14px; color:rgba(255,255,255,.6); }
@media (max-width:768px){ .ft-pop{ display:none; } }


/* ============================================================
   Mobile-Feinschliff + Kontakt-Pop-up (Juni 2026)
   ============================================================ */
@media (max-width:640px){
  .menu-nav{ gap:19px; }                                 /* mehr Abstand zwischen Menüpunkten */
  .ft-actions{ display:none !important; }   /* Flying Icons mobil ausblenden (Kontakt über Menü + Footer) */
}
/* Kontakt-Pop-up am Desktop per Klick offen halten */
.ft-btn.open .ft-pop{ opacity:1; transform:translateY(-50%) translateX(0); pointer-events:auto; }
/* Footer: Rechtliches (Datenschutz · Impressum) */
.site-footer .ft-legal{ margin:7px 0 0; font-family:var(--sans); font-size:13px; color:rgba(255,255,255,.5); }
.site-footer .ft-legal a{ color:rgba(255,255,255,.62); text-decoration:none; transition:color .2s ease; }
.site-footer .ft-legal a:hover{ color:#fff; }
.site-footer .ft-legal .sep{ opacity:.5; margin:0 5px; }

/* Kontakt-Icons (vormals im Footer) als eigenständiges Flying-Element */
.ft-actions{ z-index:7; }
body.menu-open .ft-actions{ opacity:0; pointer-events:none; transition:opacity .3s ease; }

/* ============================================================
   Ruhige Variante: keine Versalien.
   Durchgehende Grossschreibung nimmt Woertern ihre Umrissform und ist
   fuer Menschen mit Lese-Rechtschreib-Schwaeche deutlich schwerer zu
   erfassen; manche Screenreader buchstabieren kurze Versalwoerter.
   ============================================================ */
body.reduced-motion *{ text-transform:none !important; }
/* Die Laufweite war fuer Versalien gesetzt - in Gemischtschreibung zuruecknehmen */
body.reduced-motion .about-h2,
body.reduced-motion .article-about,
body.reduced-motion .color-switch .cs-label,
body.reduced-motion .cs-meta strong,
body.reduced-motion .ff-trigger .ff-label,
body.reduced-motion .headline .sub,
body.reduced-motion .lang-switch button,
body.reduced-motion .lm-cs-btn,
body.reduced-motion .lumina-h2,
body.reduced-motion .menu-contact .ct-cal .ct-pop,
body.reduced-motion .post-meta,
body.reduced-motion .post-more,
body.reduced-motion .proj-card-tag,
body.reduced-motion .tagline,
body.reduced-motion .tile-badge,
body.reduced-motion .wd h2.wd-eyebrow,
body.reduced-motion .world-pick .wp-name,
body.reduced-motion header.intro .intro-sub,
body.reduced-motion .home-about-eyebrow,
body.reduced-motion .cs-card-tag,
body.reduced-motion .lf-card .tag,
body.reduced-motion .article-sources,
body.reduced-motion .article-sources h3{ letter-spacing:.04em !important; }

/* Lumina-Überschrift: Versalien rein optisch. Im Quelltext steht
   "Quod latet, lucet." in Gemischtschreibung, damit Screenreader den Satz
   vorlesen statt ihn zu buchstabieren. In der ruhigen Variante greift die
   Regel weiter oben und schaltet die Versalien ab. */
.lum-caps{ text-transform:uppercase; letter-spacing:.04em; }

/* Video-Einbettung (Webdesign-Seite): laedt erst bei Play (preload=none + Poster) */
.wd-video{ max-width:none; margin:0 auto; }
.wd-video video{ display:block; width:100%; height:auto; border-radius:18px; background:#000;
  border:1px solid rgba(255,255,255,.14); box-shadow:0 18px 44px rgba(0,0,0,.4); }
.wd-video-note{ margin:10px 2px 0; font-size:13px; color:rgba(255,255,255,.55); text-align:center; }
body.reduced-motion .wd-video video{ border:2px solid #fff; box-shadow:none; }

/* ============================================================
   Durchgaengig sichtbarer Tastatur-Fokus (in Weltfarbe) + Menue-Scrollsperre
   ============================================================ */
body.menu-open{ overflow:hidden; }
.menu-overlay:focus, .menu-overlay:focus-visible{ outline:none; }  /* Container-Fokus unsichtbar; Ring nur auf Menuepunkten */

/* Etwas mehr Buchstabenabstand fuer die inhaltlichen Headlines (Eyebrow-Labels bleiben wie sie sind) */
.headline h1, header.intro h1, .contact-head h1,
.article h2, .article h3,
.works-pitch, .post-title, .proj-card-title,
.wd h2, .wd-cta h2, .wd-card h3, .wd-step h3, .faq h2,
.legal h2, .lumina-lead, .nf-title{
  letter-spacing:.02em;
}

/* Button-Paare (Werdegang etc.) mit Abstand statt aneinandergeklebt */
.wd-more{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.menu-nav a:focus-visible,
.menu-nav .nav-group-toggle:focus-visible,
.burger:focus-visible,
.wordmark-link:focus-visible,
.color-switch:focus-visible,
.lang-switch button:focus-visible,
.menu-contact .ct-item:focus-visible,
.tile:focus-visible,
.post:focus-visible,
.proj-card:focus-visible,
.wd-card:focus-visible,
.faq-item summary:focus-visible{
  outline:2px solid rgb(var(--ff-accent,155,135,255));
  outline-offset:3px;
  border-radius:6px;
}

/* ===================== SPRACHFASSUNGEN (11.08.2026) =====================
   de/en sind eigene URLs, der Umschalter besteht aus Links; nur Latein
   bleibt ein Knopf und laedt seine Texte zur Laufzeit nach. */
.lang-switch a{ font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:rgb(var(--btn-accent,178,180,192)); padding:6px 10px; text-decoration:none; transition:color .2s; -webkit-tap-highlight-color:transparent; }
.lang-switch a:hover{ color:#fff; }
.lang-switch a[aria-current]{ color:#fff; text-decoration:underline; text-underline-offset:4px; }
body.reduced-motion .lang-switch a{ color:#fff !important; }