/* Ethos Opening Page – 50:50, Ethos (Daylight Stone) links, Pathos (Leaderboard dunkel) rechts */
html:has(body.ethos-op){height:100%}
body.ethos-op{
  --op-chalk:#F5F5F2; --op-slate:#C2CDD6; --op-sand:#DDD3C2; --op-olive:#C3C6AC;
  --op-anthrazit:#242526; --op-anthrazit-dim:#161717; --op-ease:.4s ease-out;
  margin:0;height:100%;overflow:hidden;background:var(--op-anthrazit);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.ethos-op *,.ethos-op *::before,.ethos-op *::after{box-sizing:border-box}
.ethos-op .op{position:fixed;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:100%}
.ethos-op .op-half{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;
  cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:filter var(--op-ease),background-color var(--op-ease)}
.ethos-op .op-half:focus-visible{outline:2px solid #fff;outline-offset:-6px}
.ethos-op .op-ethos:focus-visible{outline-color:#1E2226}

/* Ethos-Hälfte: Chalk mit Stone-Aura (Slate, Sand, Olive) */
.ethos-op .op-ethos{background:var(--op-chalk)}
.ethos-op .op-ethos::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(72% 64% at 30% 20%,#C2CDD6 0,rgba(194,205,214,.88) 36%,rgba(194,205,214,0) 100%),
    radial-gradient(62% 56% at 12% 98%,#C3C6AC 0,rgba(195,198,172,.82) 40%,rgba(195,198,172,0) 100%),
    radial-gradient(60% 58% at 90% 92%,#DDD3C2 0,rgba(221,211,194,.88) 40%,rgba(221,211,194,0) 100%),
    radial-gradient(44% 42% at 82% 8%,rgba(255,255,255,.8),rgba(255,255,255,0) 100%)}

/* Pathos-Hälfte: Anthrazit */
.ethos-op .op-pathos{background:var(--op-anthrazit)}

/* Logos: gleiche wahrgenommene Größe (Ethos-Wortmarke breiter, Pathos durch Claim höher) */
.ethos-op .op-logo{position:relative;z-index:1;display:block;height:auto;transition:opacity var(--op-ease)}
.ethos-op .op-logo--ethos{width:75%}
.ethos-op .op-logo--pathos{width:50%}

/* Zustände: gewählte Hälfte bleibt, die andere tritt zurück */
.ethos-op .op.is-ethos .op-pathos{background:var(--op-anthrazit-dim)}
.ethos-op .op.is-ethos .op-pathos .op-logo{opacity:.4}
.ethos-op .op.is-pathos .op-ethos{filter:grayscale(1) brightness(.78)}
.ethos-op .op.is-pathos .op-ethos .op-logo{opacity:.45}

/* Rechtliches: klein unten links (auf Desktop über der Ethos-Hälfte) */
.ethos-op .op-legal{position:absolute;left:clamp(16px,2vw,28px);bottom:clamp(12px,1.6vw,20px);z-index:5;
  display:flex;gap:.5em;font-size:.75rem;line-height:1.4;color:rgba(30,34,38,.62)}
.ethos-op .op-legal a{color:inherit;text-decoration:none}
.ethos-op .op-legal a:hover,.ethos-op .op-legal a:focus-visible{color:#1E2226;text-decoration:underline;text-underline-offset:.2em}

/* Smartphone: Ethos oben, Pathos unten */
@media (max-width:760px){
  .ethos-op .op{grid-template-columns:100%;grid-template-rows:1fr 1fr}
  .ethos-op .op-logo--ethos{width:78%}
  .ethos-op .op-logo--pathos{width:56%}
  .ethos-op .op-legal{color:rgba(255,255,255,.62)}
  .ethos-op .op-legal a:hover,.ethos-op .op-legal a:focus-visible{color:#fff}
}
@media (prefers-reduced-motion:reduce){
  .ethos-op .op-half,.ethos-op .op-logo{transition:none}
}