/* --------------------------------------------------------------------------
   oliverfaessler.ch - Profilseite
   Stylesheet zur Design-Referenz "Profilseite.dc.html" (Claude Design).
   Alle Werte stammen 1:1 aus dieser Referenz. Die Reihenfolge folgt der
   Seite von oben nach unten. Keine Radien, keine Schatten - das ist Absicht.
   -------------------------------------------------------------------------- */

@import url("fonts.css");

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Flaechen */
  --c-page:            #F4F6F8;
  --c-surface:         #FFFFFF;

  /* Rahmen */
  --c-border:          #DEE3EA;
  --c-border-soft:     #E4E9EF;
  --c-border-faint:    #EDF0F4;

  /* Akzent */
  --c-accent:          #234E86;
  --c-accent-dark:     #16375F;
  --c-accent-light:    #C3D2E6;
  --c-accent-bg:       #EBF0F7;

  /* Dunkle Flaechen */
  --c-dark-1:          #0D1420;
  --c-dark-2:          #101820;

  /* Text */
  --c-text-strong:     #0D1117;
  --c-text:            #2A3240;
  --c-text-2:          #3A4354;
  --c-text-3:          #4B5568;
  --c-meta:            #5A6472;
  --c-meta-light:      #6B7688;
  --c-inactive:        #8B95A6;

  /* Unverifizierte Angaben */
  --c-unverified:      #A3ADBC;
  --c-unverified-line: #C6CEDA;

  /* Auf dunklem Grund */
  --c-on-dark:         #F4F6F8;
  --c-on-dark-2:       #E8ECF2;
  --c-on-dark-3:       #B7C1D1;
  --c-on-dark-label:   #8FA9CE;
  --c-on-dark-meta:    #6E7C93;
  --c-on-dark-line-1:  #1D2637;
  --c-on-dark-line-2:  #35425A;
  --c-topbar-mail:     #9AA6B8;

  /* Sonstiges */
  --c-selection:       #D7E2F1;
  --c-axis-label-bg:   #F6F8FA;

  /* Schriften */
  --f-sans: "Instrument Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", monospace;

  /* Layout */
  --container:  1120px;
  --pad-inline: clamp(18px, 4vw, 40px);
  --topbar-h:   43px;   /* Hoehe der Topbar, Offset aller sticky-Elemente */

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- 2. Grundlagen ------------------------------------------------------ */

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

body {
  margin: 0;
  background: var(--c-page);
  color: var(--c-text-strong);
  font-family: var(--f-sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; }

a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-accent-dark); }

::selection { background: var(--c-selection); }

/* Sichtbarer Fokusring auf allen bedienbaren Elementen */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

/* Sprunglink fuer Tastatur- und Screenreader-Nutzung */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--c-dark-1);
  color: var(--c-on-dark);
  padding: 12px 18px;
  font-size: 15px;
}
.skip-link:focus {
  left: 0;
  color: var(--c-on-dark);
}

/* Container - ueberall dieselbe Breite und dasselbe seitliche Polster */
.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--pad-inline);
}

/* --- 3. Topbar ---------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(13, 20, 32, 0.96);
  backdrop-filter: blur(6px);
  color: var(--c-on-dark);
}
.topbar__inner {
  padding-block: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
}
.topbar__name {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Der Name ist ein Link, soll aber aussehen wie zuvor. */
a.topbar__name { color: inherit; }
a.topbar__name:hover { color: var(--c-on-dark); }
.topbar__mail {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-topbar-mail);
}
.topbar__mail:hover { color: var(--c-on-dark); }

/* --- 4. Header ---------------------------------------------------------- */

.hero {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Feste Hoehe: das Bild darf beim Ausklappen des Textes nicht mitwachsen. */
.hero__portrait {
  flex: 1 1 340px;
  min-width: 300px;
  background: var(--c-dark-1);
  position: sticky;
  top: var(--topbar-h);
  height: clamp(420px, 62vh, 600px);
}
.hero__portrait picture,
.hero__portrait img {
  width: 100%;
  height: 100%;
  display: block;
}
.hero__portrait img {
  object-fit: cover;
  object-position: 50% 16%;
}

/* Zweites Portrait, sichtbar solange der Zeiger auf dem Bild steht.

   Die vier Aufnahmen stammen aus demselben Termin. Ihre Zuschnitte sind auf
   gleiche Kopfgroesse und gleiche Kopfhoehe angeglichen, sonst springt der
   Kopf beim Wechsel und der Wechsel wirkt wie ein Fehler. Geraete ohne Zeiger
   bekommen das Bild gar nicht erst, siehe app.js. */
.hero__zweitbild {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.hero__portrait:hover .hero__zweitbild {
  opacity: 1;
}
@media (hover: none) {
  /* .hero__portrait davor, sonst gewinnt die allgemeine Regel
     .hero__portrait picture mit ihrer hoeheren Spezifitaet. */
  .hero__portrait .hero__zweitbild { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__zweitbild { transition: none; }
}

.hero__text {
  flex: 1 1 520px;
  min-width: 320px;
  padding: 64px var(--pad-inline);
  display: flex;
  flex-direction: column;
  gap: 26px;
  justify-content: center;
}
.hero__title-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero__title {
  font-size: clamp(38px, 5vw, 54px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.hero__subline {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero__subline-text {
  font-size: 18px;
  color: var(--c-text-3);
}
.hero__lead {
  font-size: 17px;
  line-height: 1.66;
  color: var(--c-text);
  text-wrap: pretty;
}
.hero__para {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--c-text-3);
  text-wrap: pretty;
}

/* Waagrechte Linie neben Ueberschriften und Labels */
.rule {
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

.btn-more {
  appearance: none;
  background: transparent;
  border: 1px solid var(--c-accent-light);
  color: var(--c-accent);
  font-family: var(--f-sans);
  font-size: 15px;
  padding: 10px 16px;
  width: fit-content;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 160ms ease, border-color 160ms ease;
}
.btn-more:hover {
  background: var(--c-accent-bg);
  border-color: var(--c-accent);
}
.btn-more__sign {
  font-size: 14px;
  line-height: 1;
}

.hero__more {
  display: flex;
  flex-direction: column;
  gap: 22px;
  border-left: 2px solid var(--c-accent-bg);
  padding-left: 22px;
}
.hero__more[hidden] { display: none; }
.hero__more-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.hero__more-item h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.hero__more-item p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--c-text-3);
  text-wrap: pretty;
}

/* --- 5. Kompetenzband --------------------------------------------------- */

.band {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.band__grid {
  padding-block: 30px 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 26px 30px;
}
.band__item {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.band__label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.band__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-text);
  text-wrap: pretty;
}

.facts { border-top: 1px solid var(--c-border-faint); }
.facts__inner {
  padding-block: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--c-meta-light);
}

/* --- 6. Reiterleiste ---------------------------------------------------- */

.tabs {
  position: sticky;
  top: var(--topbar-h);
  z-index: 15;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.tabs__inner {
  display: flex;
  flex-wrap: wrap;
}
.tab {
  padding: 17px 2px 0;
  margin-right: 38px;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--c-inactive);
}
.tab:hover { color: var(--c-text-strong); }
.tab[aria-current="page"] { color: var(--c-text-strong); }

.tab__bar {
  height: 2px;
  width: 100%;
  background: transparent;
}
.tab[aria-current="page"] .tab__bar { background: var(--c-accent); }

/* Sprungziel beim Reiterwechsel. Der Offset haelt die sticky-Leisten frei. */
#panel-top { scroll-margin-top: 104px; }

/* --- 7. Panel ----------------------------------------------------------- */

.panel-host { overflow-anchor: none; }
.panel[hidden] { display: none; }

.section {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px var(--pad-inline) 72px;
}
.section__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 32px;
}
.section__head--tight { margin-bottom: 12px; }
.section__head h2 {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.025em;
}

/* 7a. Aktuell */

.cards {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-top: 2px solid var(--c-accent-light);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card--lead { border-top-color: var(--c-accent); }
.card h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.card p {
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--c-text-3);
  text-wrap: pretty;
}

/* 7b. Gremien */

.boards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.board-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  padding: 26px 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 36px;
}
.board-card--current { border-left: 2px solid var(--c-accent); }

.board-status {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-inactive);
}
.board-card--current .board-status { color: var(--c-accent); }

.board-body { grid-column: span 2; }
.board-body--single {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 20px;
}
.board-body--list {
  display: flex;
  flex-direction: column;
}

.board-row {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-border-soft);
}
.board-row:first-child { padding-top: 0; }
.board-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.board-date {
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--c-meta);
  padding-top: 3px;
}
/* Gestrichelt = Zeitraum noch nicht verifiziert. Nach der Bestaetigung
   entfaellt die Klasse und die Angabe steht wie jede andere. */
.board-date--unverified {
  color: var(--c-unverified);
  border-bottom: 1px dashed var(--c-unverified-line);
  width: fit-content;
}
.board-entry {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.board-entry__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}
.board-entry__desc {
  font-size: 14.5px;
  line-height: 1.66;
  color: var(--c-text-3);
  text-wrap: pretty;
}

/* Dunkles Raster. Die 1px-Luecken bilden die Trennlinien, die Zellen
   tragen selbst den dunklen Grund. */
.grid-dark {
  background: var(--c-dark-2);
  padding: 30px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.grid-dark__head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.grid-dark__label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-on-dark-label);
}
.grid-dark__rule {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.grid-dark__cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.grid-dark__cell {
  background: var(--c-dark-2);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.badge {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--c-accent);
  background: var(--c-accent-light);
  padding: 2px 7px;
  width: fit-content;
}
.grid-dark__text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-on-dark-2);
  text-wrap: pretty;
}

/* 7c. Werdegang */

.cv__lead {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--c-text-3);
  max-width: 78ch;
  margin-bottom: 36px;
  text-wrap: pretty;
}
.cv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
  align-items: start;
}
.cv__col {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 20px;
  align-items: stretch;
}

.axis {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.axis__line {
  position: absolute;
  top: 12px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(to top, var(--c-border), var(--c-accent));
}
.axis__arrow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  border-left: 1px solid var(--c-accent);
  border-top: 1px solid var(--c-accent);
  rotate: 45deg;
}
/* sideways-lr statt rotate(180deg): die Transform-Variante rendert den
   Text unscharf. Der eigene Hintergrund unterbricht die Achsenlinie. */
.axis__label {
  position: relative;
  z-index: 1;
  writing-mode: sideways-lr;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
  background: var(--c-axis-label-bg);
  padding: 14px 0;
  text-align: center;
}
/* Fallback fuer Browser ohne sideways-lr (Safari vor 17.4) */
@supports not (writing-mode: sideways-lr) {
  .axis__label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }
}

.stations {
  display: flex;
  flex-direction: column;
}
.station {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--c-border-soft);
}
.station:first-child { padding-top: 0; }
.station:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.station__date {
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--c-meta);
  padding-top: 4px;
}
.station__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.station__body h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.station__body p {
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--c-text-3);
  text-wrap: pretty;
}

.mandates {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 420px;
}
.mandates__title {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.mandate {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mandate__date {
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--c-meta);
}
.mandate h4 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.mandate p {
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--c-text-3);
  text-wrap: pretty;
}
.mandate__sep {
  height: 1px;
  background: var(--c-border-soft);
}
.link-more {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
  border-bottom: 1px solid var(--c-accent-light);
  padding-bottom: 2px;
  width: fit-content;
}
.link-more:hover { border-bottom-color: var(--c-accent-dark); }

/* 7d. Kompetenzen */

.skills {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.skill {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  padding: 26px 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px 40px;
}
.skill__title {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.skill__title h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.skill__list {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.66;
  color: var(--c-text-2);
}
/* Aufzaehlungszeichen statt der frueheren linken Linie: ein kleines Quadrat
   in der Akzentfarbe. Eckig, weil die Seite nirgends Rundungen verwendet.
   9px von oben setzt es auf die Mittellinie der ersten Textzeile, denn
   14.5px Schriftgroesse mal Zeilenabstand 1.66 ergeben rund 24px Zeilenhoehe. */
.skill__list li {
  position: relative;
  padding-left: 20px;
  text-wrap: pretty;
}
.skill__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  background: var(--c-accent);
}

/* --- 8. Kontakt und Footer ---------------------------------------------- */

.contact {
  margin-top: 80px;
  background: var(--c-dark-1);
  color: var(--c-on-dark);
}
.contact__inner {
  padding-block: 64px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: flex-end;
}
.contact__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 52ch;
}
.contact__text h2 {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.contact__text p {
  font-size: 16.5px;
  line-height: 1.66;
  color: var(--c-on-dark-3);
}
.contact__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
}
.contact__links a {
  color: var(--c-on-dark);
  border-bottom: 1px solid var(--c-on-dark-line-2);
  padding-bottom: 4px;
  width: fit-content;
}
.contact__links a:hover {
  color: var(--c-on-dark);
  border-bottom-color: var(--c-on-dark);
}

.footer { border-top: 1px solid var(--c-on-dark-line-1); }
.footer__inner {
  padding-block: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--c-on-dark-meta);
}
.footer__links {
  display: flex;
  gap: 20px;
}
.footer a { color: var(--c-on-dark-meta); }
.footer a:hover { color: var(--c-on-dark); }

/* --- 9. Bewegung -------------------------------------------------------- */

/* Panelwechsel: kurzer Fade mit 8px Aufwaertsbewegung.
   Bewusst eine Keyframe-Animation und kein Uebergang zwischen zwei
   Klassen: eine Animation endet immer bei voller Deckkraft, auch wenn
   das Script nach dem Start nicht mehr zum Zug kommt. */
@keyframes panel-eintritt {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* Ohne fill-mode: laeuft die Animation aus irgendeinem Grund nicht,
   steht das Panel bei seiner normalen vollen Deckkraft statt bei null. */
.panel-host.is-switching {
  animation: panel-eintritt 320ms var(--ease);
}

/* Reveal beim Eintritt in den Viewport. Den Startzustand setzt das Script,
   damit ohne JavaScript nichts unsichtbar bleibt. */
[data-reveal].is-hidden {
  opacity: 0;
  transform: translateY(10px);
}
[data-reveal].is-revealing {
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .panel-host.is-switching,
  [data-reveal].is-hidden,
  [data-reveal].is-revealing {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
}

/* --- 10. Nebenseiten (Impressum, Datenschutz) --------------------------- */

.page {
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px var(--pad-inline) 80px;
}
.page__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 36px;
}
.page__head h1 {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.page__body {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 72ch;
}
.page__block {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.page__block h2 {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.page__block p,
.page__block li {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--c-text-3);
  text-wrap: pretty;
}
.page__block ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page__block li {
  padding-left: 16px;
  border-left: 1px solid var(--c-border-soft);
}
.page__back {
  margin-top: 44px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
  border-bottom: 1px solid var(--c-accent-light);
  padding-bottom: 2px;
  width: fit-content;
  display: block;
}

/* --- 11. Schmale Fenster ------------------------------------------------ */

/* Das Portraet klebt nur, solange es neben dem Text steht. Die beiden
   Spalten brechen bei 860px Containerbreite um, das ist die Summe ihrer
   Grundbreiten 340 + 520. Darunter stehen sie untereinander, und ein
   klebendes Bild besetzt dann den halben Bildschirm, waehrend darunter
   ein schmaler Streifen Text durchlaeuft. Unterhalb dieser Grenze
   scrollt das Bild deshalb normal nach oben weg.

   Die Grenze steht auf 880px und nicht auf 860px, weil eine Media Query
   die Fensterbreite samt Bildlaufleiste misst, das Layout aber nur den
   Platz davor. Auf Windows sind das 15 bis 17px Unterschied. Lieber
   scrollt das Bild in einem 20px schmalen Streifen von Fensterbreiten
   mit, obwohl es kleben duerfte, als dass es auf dem Telefon klebt. */

@media (max-width: 880px) {
  .hero__portrait {
    /* nicht static: das zweite Portrait liegt absolut darin und braucht
       weiterhin diesen Bezugsrahmen */
    position: relative;
    top: auto;
  }
}

/* Einziger Sonderfall im ganzen Stylesheet. Drei Raster haben eine fest
   gesetzte erste Spalte fuer den Zeitraum (128px bzw. 132px). Zusammen mit
   dem Text passt das unterhalb von rund 600px Fensterbreite nicht mehr in
   die Karte, die Seite laesst sich dann seitlich schieben. Unterhalb dieser
   Grenze steht der Zeitraum deshalb ueber dem Eintrag statt daneben.
   Oberhalb bleibt alles exakt wie in der Design-Referenz. */

@media (max-width: 600px) {
  .board-body--single,
  .board-row,
  .station {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .board-date { padding-top: 0; }
  .station__date { padding-top: 0; }
}

/* --- 12. Druck ---------------------------------------------------------- */
/* Konservativ: die klebenden Leisten weg, Karten nicht umbrechen.
   Im Druck erscheint nur der gerade geoeffnete Reiter. */

@media print {
  .topbar, .tabs, .skip-link { display: none; }
  body { background: #FFFFFF; }
  .hero__portrait { position: static; height: auto; }
  .contact { margin-top: 40px; }
  .card, .board-card, .skill, .mandates, .station, .board-row {
    break-inside: avoid;
  }
  [data-reveal].is-hidden { opacity: 1; transform: none; }
}