/* ─────────────────────────────────────────────────────────────
   susanne-trinks.de
   Farbwerte aus den drei Fotos gemessen, nicht gewählt.
   Alle Textfarben liegen auf WCAG AAA gegen den Grund.
   ───────────────────────────────────────────────────────────── */

:root {
  --grund:     #1B120E;  /* warmes Fast-Schwarz, aus #291711 abgedunkelt */
  --schrift:   #EFE4DB;  /* Warmweiss, gemessen im Griffhand-Bild  14,74:1 */
  --gedaempft: #B79A88;  /* Nebenangaben, Jahreszahlen              7,01:1 */
  --akzent:    #E0A860;  /* Amberlicht vom Cellokorpus              8,72:1 */
  --linie:     #3A2A21;  /* Haarlinien, rein dekorativ                    */

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans Condensed", "Segoe UI", system-ui, sans-serif;

  --spalte: 36rem;       /* etwa 62 Zeichen Lauftext */
  --rand:   1.5rem;

  color-scheme: dark;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("schrift/source-serif-4-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("schrift/source-serif-4-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Condensed";
  src: url("schrift/ibm-plex-sans-condensed-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.68;
  overflow-x: hidden;
}

/* ── Sprungmarke ─────────────────────────────────────────────── */
.sprungmarke {
  position: absolute; left: -9999px;
  background: var(--akzent); color: var(--grund);
  padding: 0.6rem 1rem; font-family: var(--sans); text-decoration: none;
}
.sprungmarke:focus { left: 0; top: 0; z-index: 10; }

/* ── Kopf ────────────────────────────────────────────────────── */
.kopf {
  display: flex; flex-wrap: wrap; gap: 0.2rem 1.5rem;
  align-items: baseline; justify-content: space-between;
  max-width: var(--spalte); margin: 0 auto;
  padding: 1.6rem var(--rand) 1.4rem;
  border-bottom: 1px solid var(--linie);
}
.kopf-name {
  margin: 0; font-family: var(--serif); font-size: 1.0625rem;
  font-weight: 600; letter-spacing: 0.005em;
}
.kopf-name a { color: inherit; text-decoration: none; }
.kopf-name a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.kopf-rolle {
  margin: 0; font-family: var(--sans); font-size: 0.9375rem;
  color: var(--gedaempft);
}

/* ── Textspalte ──────────────────────────────────────────────── */
.auftakt, .abschnitt, .rechtstext {
  max-width: var(--spalte); margin: 0 auto; padding: 0 var(--rand);
}
.auftakt { padding-top: 4.5rem; }

p { margin: 0 0 1.15rem; hyphens: auto; }

/* ── Die eine mutige Stelle: der Zustandssatz ────────────────── */
.held {
  font-size: clamp(1.9rem, 6.5vw, 2.6rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--akzent);
  margin: 0 0 2.6rem;
  hyphens: none;
}
.auftakt-text { font-size: 1.15rem; line-height: 1.62; }

/* Amber heisst auf dieser Seite: aktueller Stand. Sonst nichts. */
.angebot { color: var(--akzent); }

/* ── Abschnitte ──────────────────────────────────────────────── */
.abschnitt { padding-top: 3.4rem; }
.abschnitt h2 {
  font-family: var(--serif); font-weight: 600;
  font-size: 1.45rem; line-height: 1.25;
  margin: 0 0 1.4rem;
}

/* ── Vita: echte Jahresspalte ────────────────────────────────── */
.vita { margin: 0 0 1.3rem; font-family: var(--sans); font-size: 1rem; }
.vita > div {
  display: grid; grid-template-columns: 6.4rem 1fr; gap: 0 1.15rem;
  padding: 0.45rem 0; border-top: 1px solid var(--linie);
}
.vita > div:last-child { border-bottom: 1px solid var(--linie); }
.vita dt {
  color: var(--gedaempft); font-variant-numeric: tabular-nums;
  white-space: nowrap; line-height: 1.5;
}
.vita dd { margin: 0; line-height: 1.5; }

.nachsatz { color: var(--gedaempft); }

/* ── Bilder: randlos, an den Kanten ausgeblendet ───────────────
   Der Verlauf blendet oben und unten je 30 Prozent aus. Dadurch
   endet kein Bild an einer sichtbaren Kante, sondern loest sich
   im Grund auf. Weil der Verlauf schon als Abstand wirkt, sind
   die Aussenabstaende bewusst knapp gehalten.                   */
.bild { margin: 2.4rem auto; }
.bild img { display: block; width: 100%; height: auto; }
.bild-voll {
  max-width: 1600px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
/* Vom f-Loch-Motiv liegt nur eine 1024er Fassung vor. Die Grenze
   verhindert, dass es auf breiten Schirmen unscharf hochskaliert
   wird. Hoehere Originale liegen auf dem Server, siehe UEBERGABE. */
.bild-schmal { max-width: 1200px; }

/* ── Kontakt ─────────────────────────────────────────────────── */
.mail { font-size: 1.2rem; margin-bottom: 0; }

/* ── Verweise ────────────────────────────────────────────────── */
a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--schrift); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

/* ── Fuss ────────────────────────────────────────────────────── */
.fuss {
  max-width: var(--spalte); margin: 5.5rem auto 0;
  padding: 1.4rem var(--rand) 3rem;
  border-top: 1px solid var(--linie);
  font-family: var(--sans); font-size: 0.9375rem;
}
.fuss nav { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-bottom: 0.7rem; }
.fuss-name { margin: 0; color: var(--gedaempft); }

/* ── Rechtsseiten: kein Bild, kein Akzent, nur Schrift ───────── */
.rechtstext { padding-top: 4rem; }
.rechtstext h1 { font-size: 1.75rem; font-weight: 600; line-height: 1.2; margin: 0 0 1.8rem; }
.rechtstext h2 { font-size: 1.2rem; font-weight: 600; margin: 2.4rem 0 0.9rem; }
.rechtstext ul { padding-left: 1.2rem; margin: 0 0 1.15rem; }
.rechtstext li { margin-bottom: 0.35rem; }
.anschrift { font-style: normal; margin: 0 0 1.15rem; }

/* ── Schmale Schirme ─────────────────────────────────────────── */
@media (max-width: 30rem) {
  .vita > div { grid-template-columns: 1fr; gap: 0.1rem; }
  .vita dt { font-size: 0.9375rem; }
  .bild { margin: 3.2rem 0; }
  .auftakt { padding-top: 3.2rem; }
}

/* ── Druck ───────────────────────────────────────────────────── */
@media print {
  body { background: #fff; color: #000; }
  .bild, .sprungmarke, .fuss nav { display: none; }
  .held, .angebot, a { color: #000; }
  .kopf, .fuss { border-color: #999; }
}