/* ============================================================
   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.
   ============================================================ */

/* Zweisprachige Inhalte: html[lang] steuert, welcher Block sichtbar ist */
html[lang="en"] .only-de, html[lang="la"] .only-de{ display:none !important; }
html:not([lang="en"]) .only-en{ display:none !important; }
html:not([lang="la"]) .only-la{ 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;
}
@media (hover:hover){ html,body{ cursor:none } }

/* 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 */
.cursor-dot{
  position:fixed; top:0; left:0; z-index:30;
  width:7px; height:7px; border-radius:50%;
  background:#fff; pointer-events:none;
  transform:translate(-50%, -50%); will-change:transform;
  opacity:0; mix-blend-mode:difference;
}
@media (hover:none),(pointer:coarse){ .cursor-dot{ display:none; } }
body:has(a:hover, button:hover, [role="button"]:hover) .cursor-dot{ opacity:0 !important; }

/* 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; } }

/* 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; }
.menu-nav a{
  font-family:var(--sans); font-weight:500;
  font-size:clamp(17px, 2vw, 23px);
  letter-spacing:.18em; text-transform:uppercase; 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); }
/* 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); }
.menu-contact a{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)), rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 6px 18px rgba(0,0,0,.25);
  backdrop-filter:blur(12px) saturate(160%); -webkit-backdrop-filter:blur(12px) saturate(160%);
  color:#fff; text-decoration:none;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.menu-contact a:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.32); }
.menu-contact .ico{ width:24px; height:24px; }
.menu-legal{
  display:flex; align-items:center; justify-content:center; gap:10px; 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); }
.menu-overlay .menu-legal a{ color:rgba(255,255,255,.55); font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; transition:color .2s; }
.menu-overlay .menu-legal a:hover{ color:#fff; }
.menu-legal .sep{ color:rgba(255,255,255,.3); }

/* 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; }

/* 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:#c4a8e8; border-color:#c4a8e8; 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; width:28px; height:auto;
  filter:drop-shadow(0 0 4px rgba(140,255,112,.4)) drop-shadow(0 0 9px rgba(140,255,112,.22));
  transition:transform .25s ease; animation:ffFlicker 3.6s ease-in-out infinite; }
@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 24px klemmen (SVG-Box im <span> sonst groesser als im <a>) */
.menu-contact .ico,.menu-contact a .ico,.menu-contact .ct-item .ico{width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;max-width:24px!important;max-height:24px!important;flex:0 0 24px!important;}
/* Navigation am Desktop etwas hoeher ruecken */
@media (min-width:769px){ .menu-nav{ margin-top:-44px; } }
.menu-contact .ico{ width:24px; height:24px; }
.menu-contact .ico.ico-phone{ width:24px; height:24px; }
.menu-contact .ico.ico-mail{ width:24px; height:24px; }
.menu-contact .ico.ico-cal{ width:24px; height:24px; }

/* E-Mail-Kontakt: Icon = Ausloeser, Adresse im Popover ist echter Link */
.menu-contact .ct-item{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)), rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 6px 18px rgba(0,0,0,.25);
  -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%);
  color:#fff; cursor:pointer; outline:none;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.menu-contact .ct-item:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.32); }
.menu-contact .ct-item .ico{ width:24px; height:24px; }
.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;
}
.menu-contact .ct-item .ct-pop-link{
  display:inline; width:auto; height:auto; min-width:0; min-height:0;
  border:0; border-radius:0; background:none; box-shadow:none; transform:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  font-family:var(--sans); font-style:normal; font-size:13px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; line-height:1;
  white-space:nowrap; word-break:normal; overflow-wrap:normal;
  color:#fff; text-decoration:none; padding:0; margin:0; opacity:1;
}
.menu-contact .ct-item .ct-pop-link:hover,
.menu-contact .ct-item .ct-pop-link:focus{ text-decoration:underline; color:#fff; transform:none; }


/* ===================== 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:132px; }
body.sub .lang-switch.lang-fixed{ position:absolute; bottom:64px; }
body.sub .tagline{ position:absolute; bottom:28px; }

/* --- 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 .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 .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 Flaschenpost 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; }

/* --- 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 #c4a8e8; 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(rgba(var(--btn-accent,178,180,192),.16), rgba(var(--btn-accent,178,180,192),.16)), rgba(14,12,30,.62);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  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(rgba(var(--btn-accent,178,180,192),.24), rgba(var(--btn-accent,178,180,192),.24)), rgba(14,12,30,.7);
}
.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:#c4a8e8; }
.article blockquote{ margin:34px 0; padding:6px 0 6px 22px; border-left:2px solid #c4a8e8; 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:#c4a8e8; text-decoration-color:rgba(196,168,232,.5); }
.article a:hover, .article-back:hover, .quote-source a:hover{ color:#d9c4f5; text-decoration-color:#d9c4f5; }

/* --- 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:#c4a8e8; font-weight:600; }
/* Fallstudien farblich markieren (Lila-Pill) */
.post-tag--case{ display:inline-block; color:#e7dbff; background:rgba(124,92,220,.22); border:1px solid rgba(168,130,235,.55); padding:2px 9px; border-radius:999px; }
/* Leuchtfeuer-Kategoriefilter */
.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:#c4a8e8; 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{
  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{ 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:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:center; 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; }
.color-switch.world-nocturna .dot::after{ content:''; position:absolute; top:50%; left:50%; width:3px; height:3px; margin:-1.5px 0 0 -1.5px; border-radius:50%; background:#ffe9a8; box-shadow:0 0 5px rgba(255,233,168,.95), 0 0 11px rgba(255,233,168,.5); animation:nocOrbit 3.4s linear infinite; }
@keyframes nocOrbit{ from{ transform:rotate(0deg) translateX(7.5px); } to{ transform:rotate(360deg) translateX(7.5px); } }
html.prm .color-switch.world-nocturna .dot::after{ animation:none; display:none; }
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 .tagline,
body:not(.sub).reduced-motion .topleft{ mix-blend-mode:normal !important; }
body:not(.sub).reduced-motion h1,
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; }
.ct-circle{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.05) 100%), rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.18); box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 6px 18px rgba(0,0,0,.25); backdrop-filter:blur(12px) saturate(160%) brightness(1.05); -webkit-backdrop-filter:blur(12px) saturate(160%) brightness(1.05); color:#fff; text-decoration:none; transition:transform .2s ease, border-color .2s ease, background .2s ease; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.ct-circle:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.32); background:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.08) 100%), rgba(255,255,255,.05); }
.ct-circle:active{ transform:translateY(0) scale(.95); }
.ct-circle .ico{ width:19px; height:19px; 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, html[lang="la"] .about-intro-text > 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; } }
.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:#c4a8e8; 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);} }
.wd-cta h2{ font-size:clamp(26px,3.2vw,38px); font-weight:600; 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, Leuchtfeuer, 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) .cursor-dot{ display:none !important; }
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(360px, 74vw); }
@media (max-width:600px){ .ink-illu[src*="zusammenarbeit-illu"]{ width:min(264px, 84vw); } }
/* 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:0 auto 32px; text-align:center; }
.lumina-island-img { display:block; width:80%; max-width:820px; 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:#c4a8e8; 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(233,27,92,.6); word-break:break-word; transition:border-color .2s ease; }
.legal a:hover{ border-color:#c4a8e8; }
.legal .upper{ display:block; background:rgba(233,27,92,.10); border-left:2px solid #c4a8e8; 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); }