/* ── Tokens: Personal-Brand-Design-System, Xenon-Rampe (ADR-0108) ────── */
:root{
  --bg:#F5F5F7;
  --surface:#FFFFFF;
  --glass:rgba(255,255,255,.62);
  --ink:#1D1D1F;
  --ink-soft:#5B5F66;
  --ink-dim:#86868B;
  --line:#D2D2D7;
  /* Heller Kontext -> Xenon Deep (5,70:1 auf Weiss) */
  --accent:#0A6E96;
  --accent-soft:rgba(10,110,150,.10);
  --grid:rgba(29,29,31,.05);
  --shadow-card:0 1px 2px rgba(16,17,20,.04), 0 8px 24px rgba(16,17,20,.06);
  --shadow-lift:0 2px 4px rgba(16,17,20,.05), 0 16px 40px rgba(16,17,20,.10);
  --shadow-pill:0 1px 2px rgba(16,17,20,.06), 0 4px 12px rgba(16,17,20,.08);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E0F11; --surface:#17181B; --glass:rgba(30,32,36,.62);
    --ink:#F2F2F4; --ink-soft:#A0A4AC; --ink-dim:#86868B; --line:#26282D;
    /* Dunkler Kontext -> Xenon Glow (11,02:1 auf Near-Black) */
    --accent:#8FDBFF;
    --accent-soft:rgba(143,219,255,.12);
    --grid:rgba(255,255,255,.045);
    --shadow-card:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lift:0 2px 4px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.5);
    --shadow-pill:0 1px 2px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --bg:#0E0F11; --surface:#17181B; --glass:rgba(30,32,36,.62);
  --ink:#F2F2F4; --ink-soft:#A0A4AC; --ink-dim:#86868B; --line:#26282D;
  --accent:#8FDBFF;
  --accent-soft:rgba(143,219,255,.12);
  --grid:rgba(255,255,255,.045);
  --shadow-card:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lift:0 2px 4px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.5);
  --shadow-pill:0 1px 2px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.4);
}

/* ── Marken-Akzent: dieselbe Rampen-Logik, anderer Ton (ADR-0108) ────── */
html[data-brand="dlk"]{
  --accent:#8A6B22;                    /* Gold Deep, 4,99:1 auf Weiss */
  --accent-soft:rgba(138,107,34,.10);
}
@media (prefers-color-scheme: dark){
  html[data-brand="dlk"]:not([data-theme="light"]){
    --accent:#E3C87E;                  /* Gold Glow, 11,72:1 auf Near-Black */
    --accent-soft:rgba(227,200,126,.12);
  }
}
html[data-brand="dlk"][data-theme="dark"]{
  --accent:#E3C87E;
  --accent-soft:rgba(227,200,126,.12);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:48px 48px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,system-ui,sans-serif;
  font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  display:flex; justify-content:center;
  padding:clamp(2.5rem,7vh,5rem) 1.25rem 3rem;
  min-height:100vh;
}
/* min-width:0 ist Pflicht: als Flex-Item schrumpft main sonst nicht unter
   die Mindestbreite seines Inhalts und der Text laeuft mobil aus dem Bild. */
main{width:100%; max-width:44rem; min-width:0; position:relative}

/* Eckmarke, Layout-Konstante des Systems */
.mark{
  position:absolute; right:0; top:-.5rem;
  width:20px; height:20px;
  border-top:2px solid var(--accent); border-right:2px solid var(--accent);
  transition:border-color .55s cubic-bezier(.32,.72,0,1);
}

/* ── Kopf ──────────────────────────────────────────────────────────── */
.eyebrow{
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin-bottom:1rem;
  transition:color .55s cubic-bezier(.32,.72,0,1);
}
h1{
  font-size:clamp(2rem,7vw,2.9rem); line-height:1.06;
  letter-spacing:-.03em; font-weight:640; margin-bottom:.85rem;
}
.claim{font-size:1.125rem; max-width:32rem; margin-bottom:.6rem; font-weight:590; letter-spacing:-.012em}
.intro{font-size:1.0625rem; color:var(--ink-soft); max-width:34rem}

/* ── Segmented Control: eine Ebene je Marke, skaliert nach rechts ───── */
/* Ohne JavaScript waere er ein totes Bedienelement, also zeigt er sich erst,
   wenn app.js gelaufen ist. Bis dahin stehen beide Marken untereinander. */
.switcher{display:none}
html.js .switcher{
  position:relative; display:flex; gap:.25rem; margin:0 0 2.25rem;
  padding:.28rem; border-radius:14px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--line);
  width:max-content; max-width:100%; overflow-x:auto; scrollbar-width:none;
}
.switcher::-webkit-scrollbar{display:none}
.pill{
  position:absolute; top:.28rem; left:0; height:calc(100% - .56rem);
  border-radius:10px; background:var(--surface); box-shadow:var(--shadow-pill);
  transition:transform .42s cubic-bezier(.32,.72,0,1), width .42s cubic-bezier(.32,.72,0,1);
  pointer-events:none;
}
.switcher button{
  position:relative; z-index:1; flex:0 0 auto;
  font:inherit; font-size:.9375rem; font-weight:560; letter-spacing:-.008em;
  color:var(--ink-soft); background:none; border:0; cursor:pointer;
  padding:.5rem .95rem; border-radius:10px; min-height:40px; white-space:nowrap;
  transition:color .28s ease;
}
.switcher button[aria-selected="true"]{color:var(--ink)}
.switcher button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ── Panels ────────────────────────────────────────────────────────── */
.panel[hidden]{display:none}
.panel{animation:panel-in .46s cubic-bezier(.32,.72,0,1) both}
@keyframes panel-in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
/* Kacheln laufen dem Panel knapp hinterher. Der Versatz ist klein genug,
   dass er als eine Bewegung gelesen wird, nicht als Effektkette. */
.panel li{animation:tile-in .5s cubic-bezier(.32,.72,0,1) both; animation-delay:calc(60ms + var(--i,0)*28ms)}
@keyframes tile-in{from{opacity:0; transform:translateY(10px) scale(.985)} to{opacity:1; transform:none}}

h2{
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-dim); font-weight:600; margin:0 0 .9rem;
  display:flex; align-items:baseline; gap:.6rem;
}
h2 span{font-size:.72rem; letter-spacing:0; text-transform:none; color:var(--ink-dim); font-weight:400}
.panel section{margin-top:2.75rem}
ul{list-style:none}

/* Marken: grosse Kacheln. Groesse ist der Lautstaerkeregler. */
.brands{display:grid; grid-template-columns:1fr; gap:.75rem}
@media (min-width:40rem){ .brands{grid-template-columns:1fr 1fr} }
.brands a{
  display:flex; flex-direction:column; gap:.35rem; min-height:112px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:1.15rem 1.25rem; text-decoration:none; color:inherit;
  box-shadow:var(--shadow-card);
  transition:transform .4s cubic-bezier(.32,.72,0,1), box-shadow .4s cubic-bezier(.32,.72,0,1), border-color .25s ease;
}
.brands b{font-weight:600; font-size:1.1rem; letter-spacing:-.018em}
.brands span{font-size:.9375rem; color:var(--ink-soft)}
.brands .go{margin-top:auto; font-size:.8125rem; color:var(--accent); font-weight:590; transition:color .55s cubic-bezier(.32,.72,0,1)}
/* Website als Hauptziel der Marke, volle Breite ueber den Kanaelen */
.brands.single{grid-template-columns:1fr}

/* Kanaele: kompaktes Raster, viele Ziele schnell scanbar */
.channels{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(9.5rem,100%),1fr)); gap:.6rem}
.channels a{
  display:flex; align-items:center; gap:.65rem; min-height:52px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:.7rem .85rem; text-decoration:none; color:inherit;
  box-shadow:var(--shadow-card);
  transition:transform .4s cubic-bezier(.32,.72,0,1), box-shadow .4s cubic-bezier(.32,.72,0,1), border-color .25s ease;
}
.channels b{font-weight:560; font-size:.9375rem; letter-spacing:-.008em}
.ic{flex:0 0 auto; width:19px; height:19px; color:var(--ink-soft)}

.soon{
  border:1px dashed var(--line); border-radius:12px; padding:.9rem 1rem;
  font-size:.9375rem; color:var(--ink-soft);
}

a:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift); border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
a:hover .ic{color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ── Fuss: Impressum in zwei Klicks, auf jeder Seite ────────────────── */
footer{
  margin-top:3.25rem; padding-top:1.4rem; border-top:1px solid var(--line);
  font-size:.875rem; color:var(--ink-soft);
  display:flex; gap:1.25rem; flex-wrap:wrap; align-items:center;
}
footer a{color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s; min-height:44px; display:inline-flex; align-items:center; overflow-wrap:anywhere}
footer a:hover{border-bottom-color:var(--ink-soft)}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important; animation-duration:.01ms!important}
}
@media (prefers-reduced-transparency:reduce){
  .switcher{background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none}
}

/* Markentitel im Panel: optisch ein Titel, semantisch eine Sektion dieser
   Seite. So bleibt genau ein h1 im Dokument, auch ohne JavaScript. */
h2.display{
  font-size:clamp(2rem,7vw,2.9rem); line-height:1.06;
  letter-spacing:-.03em; font-weight:640; margin:0 0 .85rem;
  color:var(--ink); text-transform:none; display:block;
}

/* Unter 380px verdichten statt scrollen lassen. */
@media (max-width:380px){
  html.js .switcher{width:100%; justify-content:stretch}
  .switcher button{flex:1 1 0; padding:.5rem .55rem; font-size:.875rem}
}