/* ============================================================
   33automate — Link-Landingpage (Instagram-Bio) + Rechtsseiten
   Marken-Blau #2D5BFF · Geist (Text) · Orbitron nur im Logo
   ============================================================ */

@font-face{font-family:'Geist';src:url('fonts/Geist-Variable.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('fonts/GeistMono-Variable.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Orbitron';src:url('fonts/Orbitron-Variable.woff2') format('woff2-variations');font-weight:400 900;font-style:normal;font-display:swap}

:root{
  --bg:#FFFFFF;--bg-subtle:#F7F8FA;
  --text:#0A0A0A;--text-muted:#5B6573;
  --border:#E5E8ED;--border-strong:#D1D6DE;
  --accent:#2D5BFF;--accent-hover:#0047AB;
  --font:'Geist','SF Pro Text',system-ui,sans-serif;
  --font-mono:'Geist Mono','SF Mono',monospace;
  --pad-x:clamp(20px,4vw,40px);
  --ease:cubic-bezier(.4,0,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{display:flex;flex-direction:column;min-height:100svh;font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- Logo-Lockup (Zeichen + Wortmarke) ---------- */
.lockup33{display:inline-flex;align-items:center;line-height:1;gap:calc(var(--m) * 0.169)}
.lockup33 img{display:block;height:var(--m);width:auto}
.lockup33__word{font-family:'Orbitron',var(--font);font-weight:600;font-size:calc(var(--m) * 0.42);letter-spacing:0.01em;color:var(--accent);white-space:nowrap}

/* ---------- Kopfzeile: nur das Logo, transparent ueber dem Bild ---------- */
.top{position:absolute;top:0;left:0;right:0;z-index:10;padding:clamp(18px,3vw,32px) var(--pad-x)}
.top--solid{position:static;border-bottom:1px solid var(--border)}

/* ============================================================
   LINK-SEITE: ein mittiger Textblock auf Weiss, nichts dahinter.
   ============================================================ */
.links{position:relative;min-height:100svh;display:flex;flex-direction:column}

.links__body{flex:1;display:flex;flex-direction:column;justify-content:center;
  width:100%;padding:clamp(5rem,7vw,6rem) var(--pad-x) 1.5rem}
.links__inner{width:100%;max-width:440px;margin:0 auto;text-align:center}

.links__avatar{width:clamp(120px,30vw,160px);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;margin:0 auto 1.25rem}
.links__name{font-family:var(--font-mono);font-size:0.85rem;font-weight:500;letter-spacing:0.02em;color:var(--accent);margin-bottom:0.9rem}
.links h1{font-weight:680;font-size:clamp(2rem,8vw,2.9rem);line-height:1.04;letter-spacing:-0.04em;color:var(--text)}
.links__lead{margin-top:1rem;font-size:clamp(1.02rem,1.3vw,1.12rem);line-height:1.55;color:var(--text-muted)}

/* Primaer-Button: deckend, Markenblau */
.btn-book{display:flex;align-items:center;justify-content:center;gap:0.6rem;width:100%;margin-top:1.75rem;
  padding:1.1rem 1.5rem;border-radius:99px;background:var(--accent);color:#fff;font-size:1rem;font-weight:560;line-height:1;
  transition:background .2s var(--ease)}
.btn-book:hover{background:var(--accent-hover)}
.btn-book svg{width:17px;height:17px;fill:currentColor;flex-shrink:0}

/* Kanal-Liste: Zeilen mit Trennlinien, Icon links, Pfeil rechts */
.channels{margin-top:1.75rem;border-top:1px solid var(--border-strong)}
.channels a,.channels__soon{text-align:left;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:0.9rem;
  padding:1rem 0.15rem;border-bottom:1px solid var(--border-strong);transition:color .2s var(--ease)}
.channels a:hover{color:var(--accent)}
.channels__soon{color:var(--text-muted);cursor:default}
.channels svg{width:22px;height:22px;fill:currentColor;justify-self:center}
.channels__label{display:flex;flex-direction:column;line-height:1.25}
.channels__name{font-size:1rem;font-weight:600}
.channels__handle{font-size:0.86rem;color:var(--text-muted)}
.channels .channels__arrow{width:14px;height:14px;color:var(--text-muted)}
.channels a:hover .channels__arrow{color:var(--accent)}

/* Fusszeile */
.foot{width:100%;padding:1.25rem var(--pad-x) 1.75rem}
.foot__inner{max-width:440px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:0.4rem 1.25rem;font-size:0.82rem;color:var(--text-muted)}
.foot a{transition:color .2s var(--ease)}
.foot a:hover{color:var(--accent)}
.foot__copy{width:100%;text-align:center}

/* Einblenden beim Laden (nur Hero-Stagger, ohne JS sofort sichtbar) */
@media (prefers-reduced-motion:no-preference){
  .links__inner > *{animation:rise .7s cubic-bezier(.16,1,.3,1) both}
  .links__inner > :nth-child(2){animation-delay:.06s}
  .links__inner > :nth-child(3){animation-delay:.12s}
  .links__inner > :nth-child(4){animation-delay:.18s}
  .links__inner > :nth-child(5){animation-delay:.24s}
  .links__inner > :nth-child(6){animation-delay:.30s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ============================================================
   RECHTSSEITEN
   ============================================================ */
.legal{flex:1;width:100%;max-width:760px;margin:0 auto;padding:clamp(3rem,7vw,5rem) var(--pad-x) clamp(4rem,8vw,6rem)}
.legal h1{font-weight:680;font-size:clamp(1.55rem,7vw,3rem);line-height:1.05;letter-spacing:-0.04em;color:var(--text)}
.legal__meta{margin-top:0.9rem;font-family:var(--font-mono);font-size:0.82rem;color:var(--text-muted);letter-spacing:0.01em}
.legal__intro{margin-top:1.6rem;font-size:1.05rem;line-height:1.65;color:var(--text-muted)}
.legal h2{margin:3.2rem 0 1rem;font-weight:660;font-size:clamp(1.25rem,2.2vw,1.55rem);letter-spacing:-0.03em;color:var(--text);padding-top:1.6rem;border-top:1px solid var(--border)}
.legal h2:first-of-type{border-top:0;padding-top:0}
.legal h3{margin:1.9rem 0 0.6rem;font-weight:640;font-size:1.02rem;letter-spacing:-0.015em;color:var(--text)}
.legal p{margin:0 0 1rem;font-size:0.98rem;line-height:1.7;color:var(--text-muted)}
.legal p strong{color:var(--text);font-weight:620}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.legal ul{margin:0 0 1rem;padding-left:1.15rem}
.legal li{margin-bottom:0.45rem;font-size:0.98rem;line-height:1.65;color:var(--text-muted)}
.legal__box{margin:0 0 1rem;padding:1.1rem 1.3rem;background:var(--bg-subtle);border-left:3px solid var(--accent);border-radius:0 8px 8px 0}
.legal__box p:last-child{margin-bottom:0}
.legal__adr{font-style:normal;font-size:0.98rem;line-height:1.75;color:var(--text-muted)}
.legal__adr strong{color:var(--text);font-weight:620}
.legal__back{display:inline-block;margin-top:3rem;font-size:0.92rem;color:var(--accent);text-decoration:none}
.legal ~ .foot,.page-foot{width:100%;border-top:1px solid var(--border)}
@media(max-width:640px){.legal h2{margin-top:2.4rem}}