/* ===========================================================================
   basis.css — Auffrischung
   ---------------------------------------------------------------------------
   Wird NACH der jeweiligen Seitendatei geladen und verändert nur zweierlei:

     1. die Werte vorhandener Variablen   (wirkt auf 81 % aller Farben)
     2. ergänzende Regeln, die es vorher gar nicht gab
        (Fokusrahmen, Bewegungsrücksicht, Druckfassung)

   Kein Eingriff in Struktur, kein Eingriff in Text. Wird diese Datei
   entfernt, sieht die Seite exakt aus wie vor der Auffrischung.
   =========================================================================== */

/* --- 1. Farbe ------------------------------------------------------------
   Bisher lag ein systemblauer Akzent (#0066cc) auf der Seite, der mit dem
   Logo nichts zu tun hatte. Das Logo ist zu 55 % #002349. Diese Farbe wird
   jetzt der Anker; der hellere Ton dient als Verweisfarbe, weil das tiefe
   Marineblau auf Weiß als Linkfarbe zu schwer wirkt.                        */

:root {
  --marke:          #002349;
  --marke-hell:     #0a3f78;
  --marke-blass:    rgba(0, 35, 73, 0.06);
  --marke-linie:    rgba(0, 35, 73, 0.16);

  --accent:         #0a3f78;
  --accent-hover:   #00234a;
  --accent-soft:    rgba(0, 35, 73, 0.06);
  --accent-line:    rgba(0, 35, 73, 0.18);

  /* Dunkle Abschnitte bekommen einen blaustichigen statt neutralen Grund,
     damit sie zum Logo passen. */
  --bg-dark:        #00182f;

  /* Etwas wärmerer, ruhigerer Hintergrund als das kühle #f5f5f7 */
  --bg:             #f4f5f7;
  --border:         rgba(0, 35, 73, 0.10);
  --border-dark:    rgba(255, 255, 255, 0.10);

  /* Text minimal dunkler und kontrastreicher */
  --text-primary:   #14181f;
  --text-secondary: #5b6472;
  --text-on-dark:   #eef1f5;
  --text-muted-dark: rgba(238, 241, 245, 0.62);

  /* Weichere, gleichmäßigere Rundungen */
  --tile-radius:    16px;
  --radius:         16px;

  /* Ein abgestuftes Schattensystem statt harter Ränder */
  --schatten-1: 0 1px 2px rgba(0, 35, 73, 0.04), 0 1px 3px rgba(0, 35, 73, 0.06);
  --schatten-2: 0 2px 6px rgba(0, 35, 73, 0.05), 0 8px 24px rgba(0, 35, 73, 0.07);
}

/* --- 2. Schrift ----------------------------------------------------------
   Inter liegt lokal und bringt echte Schnitte von 300 bis 600 mit. Die
   Seite nutzte bisher zuerst -apple-system, sodass auf Nicht-Apple-Geräten
   eine andere Schrift erschien als gedacht. Jetzt führt Inter.            */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Überschriften: etwas enger gesetzt, das wirkt gesetzter */
h1, h2, h3, .page-title, .prose-title, .section-label {
  letter-spacing: -0.021em;
  text-wrap: balance;
}

/* Fließtext bekommt Luft und eine begrenzte Zeilenlänge.
   Über 75 Zeichen verliert das Auge beim Rücksprung die Zeile. */
p, li {
  line-height: 1.65;
  text-wrap: pretty;
}
.prose-text, .doc-card p, main p {
  max-width: 72ch;
}

/* Zahlen in Tabellen untereinander ausrichten */
td, th, .cookie-table td {
  font-variant-numeric: tabular-nums;
}

/* --- 3. Verweise ---------------------------------------------------------
   Unterstreichung mit Abstand zur Grundlinie: lesbarer als die
   durchgezogene Standardlinie, und Unterlängen bleiben sichtbar.          */

main a:not([class]), .prose-text a, .doc-card a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--marke-linie);
  transition: text-decoration-color 0.18s ease, color 0.18s ease;
}
main a:not([class]):hover, .prose-text a:hover, .doc-card a:hover {
  text-decoration-color: currentColor;
}

/* --- 4. Tastaturbedienung -----------------------------------------------
   Der wichtigste Zugewinn. Vorher gab es praktisch keine Fokusrahmen:
   Wer die Seite mit der Tabulatortaste bedient, sah nicht, wo er ist.     */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--marke-hell);
  outline-offset: 3px;
  border-radius: 4px;
}
:where(a, button, input, textarea, select):focus:not(:focus-visible) {
  outline: none;
}

/* Sprungmarke für Tastatur- und Screenreader-Nutzung */
.sprungmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--marke);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  font-size: 14px;
  text-decoration: none;
}
.sprungmarke:focus {
  left: 0;
}

/* --- 5. Bedienbarkeit am Telefon ----------------------------------------
   Antippbare Flächen unter 44 px sind auf dem Telefon schwer zu treffen.  */

@media (max-width: 700px) {
  :where(nav a, footer a, .nav-back, .nav-logo) {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
  }
  button, .btn, [type="submit"] {
    min-height: 44px;
  }
  :root {
    --page-pad: 18px;
  }
  /* Auf schmalen Geräten ist die Schrift oft eine Spur zu klein */
  body {
    font-size: 16px;
  }
  /* Verhindert seitliches Wegrutschen bei langen Wörtern und Adressen */
  body {
    overflow-wrap: break-word;
  }
}

/* Nie horizontal scrollen müssen */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* --- 6. Tabellen und Karten ---------------------------------------------- */

.doc-card, .card, .tile {
  box-shadow: var(--schatten-1);
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.doc-card:hover, .card:hover {
  box-shadow: var(--schatten-2);
}

/* Breite Tabellen dürfen auf schmalen Geräten seitlich scrollen, statt die
   Seite zu sprengen. Auf großen Bildschirmen bleiben sie normale Tabellen. */
table {
  max-width: 100%;
  border-collapse: collapse;
}
@media (max-width: 700px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- 6b. Porträt im Bereich "Über mich" ---------------------------------
   Der Text daneben ist ein Werdegang über drei Jahrzehnte. Das Bild soll
   ihn begleiten, nicht überstrahlen: zurückhaltend im Format, links
   ausgerichtet, mit Luft nach rechts, damit die Zeile weiterläuft.        */

.portraet {
  margin: 0 0 26px;
  max-width: 240px;
}
.portraet img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: var(--schatten-2);
  background: var(--border);   /* ruhige Fläche, solange geladen wird */
}

/* Solange zwei Spalten nebeneinander stehen (ab 721 px, das ist die
   Schwelle des vorhandenen Rasters), sitzt die Spalte mit dem Porträt
   rechts und der Werdegang links.

   Umgesetzt über die Reihenfolge im Raster, nicht über das Markup: Die
   Lesereihenfolge für Screenreader und die Abfolge auf dem Telefon
   bleiben dadurch unverändert -- erst die Vorstellung, dann die
   Zeitleiste.                                                            */
@media (min-width: 721px) {
  .about-grid > .about-bio {
    order: 2;
  }
  .about-grid > *:not(.about-bio) {
    order: 1;
  }

  /* Das Bild wandert mit nach außen: In der rechten Spalte gehört es an
     den rechten Rand, sonst drängt es zur Seitenmitte und stößt dort mit
     der Zeitleiste zusammen. */
  .portraet {
    float: right;
    margin: 4px 0 14px 26px;
    max-width: 210px;
    shape-outside: inset(0 round 14px);
  }
  .about-bio::after {
    content: "";
    display: block;
    clear: both;
  }
}

/* Untereinander auf schmalen Geräten: Bild über dem Text. */
@media (max-width: 720px) {
  .portraet {
    max-width: 190px;
  }
}

/* Bilder generell: nie breiter als ihr Platz, nie verzerrt */
img {
  max-width: 100%;
  height: auto;
}

/* --- 7. Auswahl und Ränder ---------------------------------------------- */

::selection {
  background: var(--marke);
  color: #fff;
}

/* --- 8. Rücksicht auf Bewegungsempfindlichkeit --------------------------
   Für Menschen, die im Betriebssystem reduzierte Bewegung eingestellt
   haben. Ohne diese Regel laufen alle Übergänge unverändert weiter.       */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 9. Druckfassung ----------------------------------------------------
   Impressum und Datenschutzerklärung werden ausgedruckt und abgeheftet.
   Bisher landeten Navigation und Fußzeile mit auf dem Papier.             */

@media print {
  nav, footer, .nav-right, .sprungmarke, button, .btn {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }
  .doc-card, .card {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }
  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
  }
  h1, h2, h3 {
    break-after: avoid;
  }
}