/* ============================================================
   untitled world — Case-Unterseiten
   Ein Stylesheet für alle sechs Projektseiten (case-*.html).

   Warum ausgelagert und nicht wie index.html eingebettet: sechs Seiten teilen
   sich dasselbe Layout. Eingebettet läge es sechsmal im Quelltext, und jede
   Korrektur müsste sechsmal passieren.

   Die Seiten sind bewusst ruhiger als das Dashboard: kein Hintergrundfilm,
   kein Glas-Stapel, keine Scroll-Inszenierung. Wer hier landet, will lesen.
   Was bleibt, sind Schrift, Farbwelt und die weichen Kanten von drüben.
   ============================================================ */

:root{
  --bg:#F2F1EE;
  --bg-soft:#F7F6F3;
  --surface:#FBFAF8;
  --surface-2:#FFFFFF;
  --ink:#1C1B18;
  --ink-2:#4A4842;
  --muted:#807D74;
  --hairline:rgba(28,27,24,.09);
  --hairline-strong:rgba(28,27,24,.14);
  --orange:#E8722A;
  --amber:#F2A65A;
  --green:#7BA05B;
  --shadow-card:0 24px 60px rgba(28,27,24,.10);
  --shadow-soft:0 12px 32px rgba(28,27,24,.07);
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.34,1.4,.5,1);
  --font-ui:'Geist',system-ui,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,monospace;
  --font-display:'Gabarito','Geist',system-ui,sans-serif;
  /* Grundton, den jede Seite unten überschreibt. */
  --accent:#E8722A;
  --tint:rgba(232,114,42,.10);
}

/* ---------- Farbwelt je Projekt ----------
   Dieselbe Idee wie im Dashboard: jedes Venture behält seinen eigenen Ton,
   ein gemeinsames CI gibt es mit Absicht nicht. Genommen wird jeweils der
   Ton der Projektwelt aus index.html, aber in der Abstufung, die auf hellem
   Grund noch Kontrast hat. Oncoceutics und untitled.INVEST haben dort dunkle
   Flächen; deren Akzent käme auf Weiß nicht an, deshalb die tiefere Variante. */
body[data-case="envital"] { --accent:#A9663F; --tint:rgba(196,138,106,.14) }
body[data-case="memoro"]  { --accent:#586647; --tint:rgba(110,125,99,.14) }
body[data-case="onco"]    { --accent:#1F4E6B; --tint:rgba(31,78,107,.10) }
body[data-case="cardisio"]{ --accent:#B02330; --tint:rgba(212,43,58,.09) }
body[data-case="cura"]    { --accent:#4A4E8F; --tint:rgba(139,143,199,.14) }
body[data-case="invest"]  { --accent:#2A2A2A; --tint:rgba(28,27,24,.07) }

/* ---------- Reset / Basis ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  font-family:var(--font-ui);
  font-size:16px;line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Ein warmer Lichtkegel oben, in der Farbe des Projekts. Ersetzt das Video
   des Dashboards: dieselbe Wärme, aber nichts, was beim Lesen stört. */
body::before{
  content:"";position:fixed;inset:0 0 auto 0;height:70vh;z-index:-1;
  background:
    radial-gradient(70vw 46vh at 78% -8%, var(--tint) 0%, transparent 70%),
    radial-gradient(58vw 40vh at 12% -12%, rgba(255,255,255,.85) 0%, transparent 68%);
  pointer-events:none;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--tint)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:5px}

/* Sprungmarke für Tastatur und Screenreader. Sichtbar erst bei Fokus. */
.skip{
  position:absolute;left:-9999px;top:12px;z-index:99;
  padding:10px 16px;border-radius:12px;
  background:var(--surface-2);box-shadow:var(--shadow-soft);
  font-size:14px;text-decoration:none;
}
.skip:focus{left:12px}

.wrap{width:min(1080px,100% - clamp(32px,7vw,88px));margin-inline:auto}

/* ============================================================
   Kopfleiste
   Liegt oben und bleibt beim Scrollen stehen. Drei Felder: Zeichen, wo man
   ist, Weg zurück. Mehr braucht eine Leseseite nicht.
   ============================================================ */
.case-bar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:14px;
  padding:12px 0;
  background:rgba(242,241,238,.82);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
          backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--hairline);
}
.case-bar .wrap{display:flex;align-items:center;gap:14px}
.mark{
  width:38px;height:38px;border-radius:12px;flex:none;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--orange),var(--amber) 55%,var(--green));
  color:#fff;text-decoration:none;
  font-family:var(--font-mono);font-size:14px;font-weight:600;
  box-shadow:0 8px 20px rgba(232,114,42,.26);
  transition:transform .4s var(--ease-spring);
}
.mark:hover{transform:translateY(-2px) scale(1.03)}
.bar-mid{
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bar-back{
  margin-left:auto;flex:none;
  display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;color:var(--ink-2);text-decoration:none;
  padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.6);
  box-shadow:inset 0 0 0 1px var(--hairline);
  transition:color .3s var(--ease),background .3s var(--ease);
}
.bar-back:hover{color:var(--ink);background:rgba(255,255,255,.9)}
.bar-back svg{width:15px;height:15px}
@media (max-width:600px){
  .bar-mid{display:none}
}

/* ============================================================
   Titelblock
   ============================================================ */
.hero{padding:clamp(44px,7vh,86px) 0 clamp(26px,4vh,40px)}
.kicker{
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;color:var(--accent);
}
.hero h1{
  margin-top:14px;
  font-family:var(--font-display);
  font-size:clamp(34px,6.4vw,68px);font-weight:700;
  letter-spacing:-.03em;line-height:1.02;
}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .sub{
  margin-top:12px;max-width:62ch;
  font-size:clamp(16px,1.6vw,20px);line-height:1.5;color:var(--ink-2);
}
.hero-meta{
  margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.hero-meta a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
.hero-meta a:hover{border-bottom-color:currentColor}

.hero-fig{
  margin-top:clamp(26px,4vh,44px);
  border-radius:clamp(20px,2.4vw,30px);
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.hero-fig img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* ============================================================
   Zahlenzeile
   Dieselben drei Werte wie auf der Dashboard-Kachel. Sie stehen hier nicht
   als Schmuck, sondern als Zusammenfassung: wer nur die Zeile liest, weiß,
   worum es geht.
   ============================================================ */
.facts{
  margin-top:clamp(26px,4vh,44px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.4vw,18px);
}
.facts .fact{
  padding:clamp(16px,1.8vw,22px);
  border-radius:clamp(16px,1.8vw,20px);
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--hairline),var(--shadow-soft);
}
.fact-num{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(19px,2.4vw,30px);font-weight:600;
  letter-spacing:-.02em;line-height:1.1;color:var(--accent);
}
.fact-lab{
  display:block;margin-top:6px;
  font-size:12.5px;line-height:1.35;color:var(--ink-2);
}
@media (max-width:640px){
  .facts{grid-template-columns:1fr;gap:8px}
  .facts .fact{display:flex;align-items:baseline;gap:12px;padding:14px 16px}
  .fact-num{font-size:19px}
  .fact-lab{margin-top:0}
}

/* ============================================================
   Fließtext
   Eine Spalte, ruhig gesetzt. Zwischenüberschriften tragen die Struktur;
   ohne sie liest sich ein Case wie ein Brief ohne Absätze.
   ============================================================ */
.prose{
  padding:clamp(40px,7vh,84px) 0 clamp(20px,3vh,32px);
}
/* Die Zeilenlänge begrenzt jeder Block für sich, nicht die Spalte als Ganzes.
   Mit einer schmalen, zentrierten Spalte begänne der Text weiter rechts als
   Titel und Zahlenzeile darüber, und der Umbruch sähe aus wie ein Versehen.
   So bleibt alles an derselben linken Kante stehen. */
.prose > *{max-width:74ch}
.prose h2{
  margin-top:clamp(34px,5vh,56px);
  font-family:var(--font-display);
  font-size:clamp(21px,2.4vw,30px);font-weight:600;
  letter-spacing:-.02em;line-height:1.2;
}
.prose h2:first-child{margin-top:0}
.prose p{margin-top:14px;font-size:clamp(15.5px,1.15vw,17px);color:var(--ink-2)}
.prose p strong{color:var(--ink);font-weight:600}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* Aufzählung ohne Punkte: eine feine Linie je Zeile, wie die Listen im
   Dashboard. Punkte wirken auf dieser hellen Fläche schmutzig. */
.prose .list{margin-top:18px;list-style:none}
.prose .list li{
  padding:11px 0;
  border-top:1px solid var(--hairline);
  font-size:15px;color:var(--ink);
}
.prose .list li:last-child{border-bottom:1px solid var(--hairline)}

/* Hervorgehobener Absatz, etwa ein Projektbeispiel. */
.note{
  margin-top:clamp(26px,4vh,40px);
  padding:clamp(20px,2.4vw,30px);
  border-radius:clamp(16px,2vw,22px);
  background:var(--tint);
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.note .note-head{
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent);
}
.note p{margin-top:10px;color:var(--ink)}

/* ============================================================
   Weiter zum nächsten Case
   ============================================================ */
.case-nav{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.4vw,18px);
  padding:clamp(30px,5vh,56px) 0;
  border-top:1px solid var(--hairline);
}
.case-nav a{
  display:block;padding:clamp(16px,2vw,24px);
  border-radius:clamp(16px,2vw,22px);
  background:var(--surface);text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--hairline),var(--shadow-soft);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease);
}
.case-nav a:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px var(--hairline-strong),var(--shadow-card);
}
.case-nav .dir{
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.case-nav .nm{
  display:block;margin-top:7px;
  font-family:var(--font-display);
  font-size:clamp(16px,1.7vw,21px);font-weight:600;letter-spacing:-.02em;
}
.case-nav .next{text-align:right}
.case-nav .leer{visibility:hidden}
@media (max-width:600px){
  .case-nav{grid-template-columns:1fr}
  .case-nav .next{text-align:left}
  .case-nav .leer{display:none}
}

/* ============================================================
   Kontakt und Fuß
   ============================================================ */
.cta{
  margin-bottom:clamp(30px,5vh,56px);
  padding:clamp(30px,4.4vw,56px) clamp(24px,3vw,40px);
  border-radius:clamp(22px,2.6vw,32px);
  text-align:center;
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--hairline),var(--shadow-card);
}
.cta h2{
  font-family:var(--font-display);
  font-size:clamp(22px,2.8vw,34px);font-weight:600;letter-spacing:-.02em;
}
.cta p{margin-top:12px;color:var(--ink-2);max-width:48ch;margin-inline:auto}
.btn{
  margin-top:22px;
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 24px;border-radius:999px;
  background:var(--ink);color:var(--bg-soft);
  font-size:15px;font-weight:500;text-decoration:none;
  transition:transform .38s var(--ease-spring),background .3s var(--ease);
}
.btn:hover{transform:translateY(-2px);background:#000}
.btn svg{width:16px;height:16px}

.foot{
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  justify-content:space-between;
  padding:22px 0 40px;
  border-top:1px solid var(--hairline);
  font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.foot nav{display:flex;gap:18px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mark,.case-nav a,.btn,.bar-back{transition:none}
  .mark:hover,.case-nav a:hover,.btn:hover{transform:none}
}