/* ==========================================================================
   ural-bayramoglu.com — Personenseite, Apple-Setzung
   Eigenständig: keine Datei dieses Verzeichnisses greift auf MaleMetrix zu.
   Die Tokens sind bewusst dieselben wie dort (css/style.css), damit beide
   Seiten als eine Handschrift gelesen werden.

   Die Seite besteht aus wenigen, ganzflächigen Bändern, die abwechselnd
   hell und dunkel liegen — kein Raster aus Karten, keine Seitenleiste, keine
   Aufzählung. Alles steht mittig, jede Aussage bekommt ein eigenes Band.
   Wer hier etwas hinzufügt, nimmt der Seite genau das, was sie ausmacht.
   ========================================================================== */

:root {
  --bg-0: #FBFBFD;               /* Seitengrund */
  --bg-1: #F5F5F7;               /* helles Band */
  --ink: #1D1D1F;
  --muted: #55555A;              /* 6,6:1 auf --bg-0 */
  --muted-2: #6E6E73;            /* 4,9:1 auf --bg-0 */
  --line: #E8E8ED;

  /* Das dunkle Band trägt exakt den Grundton der Porträts (gemessen an ihren
     Rändern: rgb(20,25,28) oben, rgb(30,38,42) links). Deshalb sitzt das Foto
     nicht AUF einer schwarzen Fläche, sondern geht in sie über — die Kante
     lösen zusätzlich zwei Verläufe in derselben Farbe auf. */
  --dunkel-rgb: 23, 28, 31;      /* als Tripel, weil der Übergang am Porträt
                                    dieselbe Farbe einmal deckend und einmal
                                    mit Alpha 0 braucht */
  --dunkel: rgb(var(--dunkel-rgb));
  --auf-dunkel: #F5F5F7;
  --auf-dunkel-muted: #A1A1A6;   /* 7,2:1 auf --dunkel */

  --accent: #0071E3;             /* 4,7:1 auf --bg-0 */
  --accent-dunkel: #2997FF;      /* 5,9:1 auf --dunkel */

  --radius-pill: 980px;

  /* SF Pro über den System-Stack; darunter das lokal gehostete Inter. */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;

  --rand: clamp(20px, 5vw, 40px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  font-family: var(--font-body);
  background: var(--bg-0);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.band-dunkel :focus-visible { outline-color: var(--accent-dunkel); }

.container { width: 100%; max-width: 980px; margin: 0 auto; padding-inline: var(--rand); }
.eng { max-width: 700px; margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--rand); top: -60px; z-index: 20;
  background: var(--ink); color: var(--auf-dunkel);
  padding: 10px 18px; border-radius: var(--radius-pill);
}
.skip:focus { top: 12px; text-decoration: none; }

/* ==========================================================================
   KOPFZEILE — 48 Pixel, ein Name, ein Link. Mehr hat diese Seite nicht zu
   navigieren, und ein Menü für drei Abschnitte wäre eine Behauptung.
   ========================================================================== */

.kopf {
  position: sticky; top: 0; z-index: 10;
  background: rgba(251, 251, 253, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
}
.kopf .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 48px; max-width: 1080px;
}
.kopf .nm { font-weight: 600; color: var(--ink); letter-spacing: -0.008em; }
.kopf .nm:hover { text-decoration: none; }
.kopf a:not(.nm) { color: var(--muted); }
.kopf a:not(.nm):hover { color: var(--ink); text-decoration: none; }

/* Rechts in der Kopfzeile: der Seitenlink und daneben die Sprachwahl.

   Die Sprachwahl ist ein Link auf die andere Fassung, kein Umschalter — es
   gibt kein JavaScript auf dieser Seite und deshalb auch nichts, was eine
   Wahl speichern könnte. Das ist Absicht: Die Fassungen sind zwei echte
   Adressen, jede für sich teilbar, verlinkbar und indexierbar.

   Der feine Strich davor trennt Navigation von Sprache, ohne einen zweiten
   Knopf einzuführen. */
.kopfnav { display: flex; align-items: center; gap: 18px; }
.kopfnav .sprache { position: relative; padding-left: 18px; }
.kopfnav .sprache::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 14px;
  background: rgba(0, 0, 0, 0.16);
}

/* Kleiner Hinweis unter einem Band — eine Stufe leiser als .satz. */
.fussnote {
  margin-top: 18px;
  font-size: 0.875rem;
  color: var(--muted-2);
}
.band-dunkel .fussnote { color: var(--auf-dunkel-muted); }

/* ==========================================================================
   BÄNDER
   ========================================================================== */

.band { padding-block: clamp(72px, 12vw, 140px); text-align: center; }
.band-hell { background: var(--bg-1); }
.band-dunkel { background: var(--dunkel); color: var(--auf-dunkel); }
.band-dunkel a { color: var(--accent-dunkel); }

h1, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.05;
  text-wrap: balance;
}

/* Die Auftakt-Zeile ist die größte Type der Seite und bleibt es. */
h1 { font-size: clamp(3rem, 9vw, 5.5rem); }
h2 { font-size: clamp(2rem, 5.4vw, 3.5rem); }

/* Unterzeile: Apple setzt sie deutlich kleiner als die Schlagzeile, in einer
   gedämpften Stufe, und lässt ihr trotzdem Luft nach oben. */
.unter {
  font-family: var(--font-display);
  font-size: clamp(1.3125rem, 2.6vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--muted);
  margin-top: 18px;
  text-wrap: balance;
}
.band-dunkel .unter { color: var(--auf-dunkel-muted); }

.satz {
  font-size: clamp(1.0625rem, 1.8vw, 1.3125rem);
  line-height: 1.42;
  color: var(--muted);
  margin-top: 24px;
}
.band-dunkel .satz { color: var(--auf-dunkel-muted); }
.satz + .satz { margin-top: 1em; }

/* Hält eine Wortgruppe zusammen. Ohne das bricht die Unterzeile auf dem
   Telefon nach „Gründer" um — der Umbruch soll an der Sinngrenze liegen,
   also zwischen den beiden Rollen. */
.zusammen { white-space: nowrap; }

/* Linkzeile mit Winkel — Apples Standardweg aus einem Band heraus. Der Winkel
   ist Ornament und wird deshalb nicht vorgelesen. */
.wege {
  display: flex; flex-wrap: wrap; gap: 10px 30px;
  justify-content: center;
  margin-top: 30px;
  font-size: clamp(1.0625rem, 1.8vw, 1.3125rem);
}
.wege a { display: inline-flex; align-items: center; gap: 4px; }
.wege a::after { content: "›"; font-size: 1.15em; line-height: 1; }
.wege a:hover { text-decoration: underline; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 12px 26px;
  margin-top: 30px;
  border-radius: var(--radius-pill);
  background: var(--accent); color: #fff;
  font-size: 1.0625rem; letter-spacing: -0.012em;
  transition: background 0.18s;
}
.knopf:hover { background: #0077ED; text-decoration: none; }
.band-dunkel .knopf { background: var(--auf-dunkel); color: var(--dunkel); }
.band-dunkel .knopf:hover { background: #fff; }

/* ==========================================================================
   DAS PORTRÄT — der einzige Bildauftritt der Seite.

   Zwei Dinge halten es zusammen: Das Band trägt den Grundton des Fotos, und
   zwei Verläufe in genau dieser Farbe lösen die Kanten darin auf. Ohne den
   Übergang stünde ein sichtbares Quadrat im Band, weil der Fotorand links
   messbar heller ist als rechts — eine einzelne Flächenfarbe kann das nicht
   auffangen. Warum es KEINE Maske ist, steht bei .portraet::after.
   ========================================================================== */

.portraet {
  position: relative;
  width: min(560px, 100%);
  margin: clamp(36px, 6vw, 64px) auto 0;
}
.portraet img {
  width: 100%;
  /* Ohne height:auto schlägt der Presentational Hint aus dem height-Attribut
     (2048) das aspect-ratio — das Bild stand dann als hoher Streifen da. */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Der Übergang liegt als Verlauf ÜBER dem Foto, nicht als Maske darin.

   Eine Maske blendet nach Transparenz aus, und was darunter durchkommt, ist
   die Bandfarbe — das funktioniert nur, wenn die Maske am Bildrand wirklich
   bei null ankommt. Bei einem quadratischen Motiv heißt das entweder ein
   Kreis, der dem Mann die Schultern abschneidet, oder eine sichtbare Kante.
   Der Verlauf hier hat das Problem nicht: Er ist exakt die Bandfarbe und
   endet deckend, das Foto verschwindet also in genau dem Ton, der daneben
   liegt — unabhängig davon, wie hell sein eigener Rand an der Stelle ist
   (links rgb(30,38,42), oben rgb(20,25,28), also messbar verschieden). */
.portraet::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgb(var(--dunkel-rgb)) 0%, rgba(var(--dunkel-rgb), 0) 16%,
      rgba(var(--dunkel-rgb), 0) 84%, rgb(var(--dunkel-rgb)) 100%),
    linear-gradient(to bottom,
      rgb(var(--dunkel-rgb)) 0%, rgba(var(--dunkel-rgb), 0) 14%,
      rgba(var(--dunkel-rgb), 0) 82%, rgb(var(--dunkel-rgb)) 100%);
}

/* ==========================================================================
   FUSSZEILE — Apples Kleingedrucktes: eine Stufe kleiner, ruhig, vollständig.
   ========================================================================== */

.fuss {
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  padding-block: 28px 36px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted-2);
}
.fuss .container { max-width: 1080px; }
.fuss .hinweis { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.fuss .zeile {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  justify-content: space-between; align-items: baseline;
  padding-top: 18px;
}
.fuss .rechtliches { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.fuss a { color: var(--muted-2); }
.fuss a:hover { color: var(--ink); }

/* ==========================================================================
   RECHTSSEITEN — dieselbe Schrift, linksbündig, enge Spalte.
   ========================================================================== */

.doku { padding-block: clamp(40px, 6vw, 72px); }
.doku .eng { margin-inline: 0; }
.doku h1 { font-size: clamp(2rem, 4.4vw, 2.75rem); margin-bottom: 24px; }
.doku h2 {
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 2vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 2em 0 0.5em;
}
.doku p, .doku li { color: var(--muted); }
.doku p + p { margin-top: 0.9em; }
.doku .lead { font-size: 1.125rem; }
.doku .stand { margin-top: 3em; font-size: 0.875rem; color: var(--muted-2); }
.doku .kicker {
  display: block; font-family: var(--font-display);
  font-size: 1.0625rem; font-weight: 600; color: var(--accent);
  margin-bottom: 8px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}