/* ============================================================
   skoerber.ch — Landing: zwei Fachbereiche, eine Person.
   Recht (skoerber-Blau, Playfair/Inter/JetBrains Mono) LINKS,
   Sexologie (Aubergine/Bernstein, Fraunces/Instrument Sans) RECHTS,
   getrennt durch eine gerade, durchgehende Trennungslinie (Kundenwunsch
   2026-09-08; vorher ein gezackter diagonaler Riss) — Desktop senkrecht,
   Mobile waagrecht; im Papierstreifen dazwischen scheint das Leinen durch.
   Beide Hero-Token-Sets sind hier bewusst als Kopie der Quell-Sites geführt —
   bei Änderungen an einem Hero die Werte hier nachziehen (README).
   ============================================================ */
:root {
  --paper: #F8F4EE;
  --ink: #1f1a1d;
  --ink-muted: #5c5358;
  --line: #D9CCBC;
  /* Recht — skoerber :root */
  --r-deep: #0d1f33;
  --r-gradient: linear-gradient(115deg, #0d2440 0%, #14406e 48%, #1f5c9e 100%);
  --r-accent: #1a5fa8;
  --r-silver: #b9c8d9;
  --r-orb-a: #2f7cc4; --r-orb-b: #123156; --r-orb-c: #5b9bd8;
  --r-display: 'Playfair Display', Georgia, serif;
  --r-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --r-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Sexologie — koerber-sexologie :root */
  --s-deep: #33232F;
  --s-accent: #B3702F;
  --s-accent-soft: #D6A66C;
  --s-mauve: #8E6F86;
  --s-mauve-light: #B99AB0;
  --s-silver: #EEE6E8;
  --s-on-deep: #D9CFD3;
  --s-serif: 'Fraunces', Georgia, serif;
  --s-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --max-width: 1100px;

  /* Die Trennungslinie: Desktop senkrecht bei 50 % (Recht links, Sexologie rechts),
     Mobile waagrecht (Recht oben, siehe Media-Query). --gap = sichtbarer
     Papierstreifen, --t = Verschiebung beim Hover zugunsten des gehoverten Bereichs. */
  --gap: 1%;
  --t: 0%;   /* Verschiebung der Risslinie (Hover: ± ) */
  --clip-recht: polygon(0 0, calc(50% + var(--t)) 0, calc(50% + var(--t)) 100%, 0 100%);
  --clip-sexo: polygon(calc(50% + var(--gap) + var(--t)) 0, 100% 0, 100% 100%, calc(50% + var(--gap) + var(--t)) 100%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--r-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Landing: Riss + Footer füllen zusammen genau den Viewport (Footer immer im Bild) */
body.landing { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body.landing .tear { flex: 1 1 auto; min-height: 0; }
body.landing .site-footer { flex: none; }

/* ===================== TOP BAR (über beiden Panels) ===================== */
.topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(20px, 4vw, 48px);
  pointer-events: none;
}
.topbar a { pointer-events: auto; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
}
.brand-mark {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  color: #fff;
  font-family: var(--r-display);
  font-weight: 700;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brand-name { font-weight: 600; font-size: 15px; letter-spacing: 0.01em; }
.topnav { display: flex; gap: 22px; }
.topnav a {
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  font-family: var(--r-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.topnav a:hover { color: #fff; }

/* ===================== DER RISS ===================== */
.tear {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--paper);
}
.panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  transition: clip-path 0.7s var(--ease);
}
.tear.is-recht { --t: 4%; }
.tear.is-sexo  { --t: -4%; }
.panel--recht { clip-path: var(--clip-recht); background: var(--r-gradient); z-index: 2; }
.panel--sexo  { clip-path: var(--clip-sexo);  background: var(--s-deep);     z-index: 1; }
.panel--recht { justify-content: flex-start; padding-left: clamp(20px, 5.5vw, 96px); }
.panel--sexo  { justify-content: flex-end;   padding-right: clamp(20px, 5.5vw, 96px); }

/* Papier-Faserung im Riss */
.tear::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(115deg, rgba(0,0,0,0.035) 0 2px, transparent 2px 9px),
    var(--paper);
  z-index: 0;
}

/* --- Recht: drei driftende Orbs + Vignette (skoerber-Hero) --- */
.orb {
  position: absolute;
  width: 55vw; height: 55vw;
  min-width: 420px; min-height: 420px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.55;
  pointer-events: none;
  will-change: transform;
}
.orb--a { background: radial-gradient(circle, var(--r-orb-a), transparent 68%); top: -28%; left: 4%; }
.orb--b { background: radial-gradient(circle, var(--r-orb-b), transparent 68%); bottom: 10%; left: -14%; }
.orb--c { background: radial-gradient(circle, var(--r-orb-c), transparent 68%); top: 22%; left: 22%; opacity: 0.3; }
.vignette {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,31,51,0) 40%, rgba(13,31,51,0.42) 100%);
  pointer-events: none;
}

/* --- Sexologie: zwei weiche Farbschimmer (Mauve / Bernstein) statt der Kreis-Marke
       (Owner-Ruling 2026-09-08: Marke ist überall die SK-Kachel; Landing ohne Logo) --- */
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  pointer-events: none;
  will-change: transform;
}
.glow--a { width: 48vw; height: 48vw; min-width: 380px; min-height: 380px; right: -14%; top: -18%;
  background: radial-gradient(circle, rgba(142, 111, 134, 0.55), transparent 66%); }
.glow--b { width: 40vw; height: 40vw; min-width: 320px; min-height: 320px; right: 6%; bottom: -24%;
  background: radial-gradient(circle, rgba(179, 112, 47, 0.42), transparent 66%); }

/* --- Inhalt der Panels --- */
.panel-content {
  position: relative;
  max-width: min(560px, calc(50vw - 2 * clamp(20px, 5.5vw, 96px)));
}
.hero-line { white-space: nowrap; }
.panel--sexo .panel-content { text-align: right; }
.eyebrow {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
}
.eyebrow::before, .eyebrow::after {
  content: "";
  display: inline-block;
  width: 18px; height: 1px;
  vertical-align: middle;
  margin: 0 10px;
}
.panel--recht .eyebrow { font-family: var(--r-mono); color: var(--r-silver); font-weight: 500; }
.panel--recht .eyebrow::after { display: none; }
.panel--recht .eyebrow::before { background: #fff; margin-left: 0; }
.panel--sexo .eyebrow { font-family: var(--s-sans); color: var(--s-mauve-light); letter-spacing: 0.28em; }
.panel--sexo .eyebrow::before { display: none; }
.panel--sexo .eyebrow::after { background: var(--s-accent-soft); height: 2px; margin-right: 0; }

.headline { margin: 0 0 16px; line-height: 1.04; text-wrap: balance; }
.panel--recht .headline {
  font-family: var(--r-display);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 46px);
  letter-spacing: -0.02em;
}
.panel--sexo .headline {
  font-family: var(--s-serif);
  font-weight: 300;
  font-size: clamp(26px, 3.2vw, 46px);
  letter-spacing: -0.015em;
}
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  filter: blur(5px);
  transition: opacity 550ms var(--ease), transform 550ms var(--ease), filter 550ms var(--ease);
}
.hero-word.is-in { opacity: 1; transform: none; filter: none; }
.sub { margin: 0 0 22px; font-size: 15px; max-width: 66ch; }
.panel--recht .sub { color: var(--r-silver); font-family: var(--r-sans); }
.panel--sexo .sub { color: var(--s-on-deep); font-family: var(--s-sans); margin-left: auto; }
.cta {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  transition: transform 150ms var(--ease), background 150ms ease;
}
.panel--recht .cta { background: #fff; color: var(--r-deep); font-family: var(--r-sans); }
.panel--sexo .cta { background: var(--s-accent); color: #fff; font-family: var(--s-sans); }
.panel:hover .cta { transform: translateY(-2px); }
.panel--recht:hover .cta { background: #eef4fb; }
.panel--sexo:hover .cta { background: #94591F; }

/* Fade-in */
.js-anim .panel-content { opacity: 0; transform: translateY(14px); transition: opacity 0.8s ease 0.2s, transform 0.8s var(--ease) 0.2s; }
.js-anim .panel-content.is-in { opacity: 1; transform: none; }
.js-anim .panel--sexo .panel-content { transition-delay: 0.45s; }

/* ===================== FOOTER ===================== */
.site-footer {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 22px clamp(20px, 4vw, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-muted);
}
.site-footer nav { display: flex; gap: 20px; }
.site-footer .footer-meta { color: var(--ink-muted); }
.site-footer a { color: var(--ink-muted); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }

/* ===================== RECHTSSEITEN (geteilt, neutral) ===================== */
.legal-head {
  background: var(--paper);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) 24px clamp(24px, 3vw, 40px);
}
.legal-head .rule { width: 28px; height: 2px; background: var(--s-accent); margin-bottom: 16px; }
.legal-head .eyebrow { color: var(--s-mauve); font-family: var(--r-mono); font-weight: 500; }
.legal-head .eyebrow::before, .legal-head .eyebrow::after { display: none; }
.legal-head h1 { font-family: var(--r-display); font-weight: 600; font-size: clamp(32px, 4.6vw, 52px); letter-spacing: -0.02em; margin: 0 0 8px; }
.legal-head .lede { color: var(--ink-muted); max-width: 60ch; margin: 0; }
.legal-body { max-width: var(--max-width); margin: 0 auto; padding: 0 24px clamp(48px, 7vw, 96px); }
.prose { max-width: 70ch; }
.prose h2 { font-family: var(--r-display); font-weight: 600; font-size: 22px; margin: 36px 0 10px; }
.prose p { margin: 0 0 14px; }
.prose ul { padding-left: 1.2rem; }
.prose a { color: var(--r-accent); }
.facts { display: grid; grid-template-columns: 160px 1fr; gap: 8px 20px; margin: 0 0 14px; }
.facts dt { font-family: var(--r-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--s-accent); padding-top: 3px; }
.facts dd { margin: 0; }
.legal-updated { color: var(--ink-muted); font-size: 13px; margin-top: 32px; }
.legal-topbar { position: static; background: var(--s-deep); }
.legal-topbar .brand-mark { background: rgba(255,255,255,0.1); }

/* ===================== MOBILE ===================== */
@media (max-width: 720px) {
  :root {
    --gap: 1.2%;
    --clip-recht: polygon(0 0, 100% 0, 100% calc(50% + var(--t)), 0 calc(50% + var(--t)));
    --clip-sexo: polygon(0 calc(50% + var(--gap) + var(--t)), 100% calc(50% + var(--gap) + var(--t)), 100% 100%, 0 100%);
  }
  .tear.is-recht, .tear.is-sexo { --t: 0%; }
  .topnav { display: none; }
  body.landing .tear { min-height: 100vh; min-height: 100svh; }   /* Mobile: Footer darf unter den Fold */
  .hero-line { white-space: normal; }
  .panel { padding: 0 20px; }
  .panel--recht { align-items: flex-start; padding-top: 44px; }     /* obere Hälfte */
  .panel--sexo  { align-items: flex-end;   padding-bottom: 28px; }  /* untere Hälfte */
  .panel-content { max-width: none; }
  .glow--a { top: 46%; right: -24%; }
  .sub { font-size: 14px; }
  .facts { grid-template-columns: 1fr; gap: 2px 0; }
  .facts dd { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .panel { transition: none; }
  .hero-word { opacity: 1; transform: none; filter: none; transition: none; }
  .js-anim .panel-content { opacity: 1; transform: none; transition: none; }
}