/* ==========================================================================
   EXPA / Experten Stories — expa.co.at
   Corporate Design laut Marketing-Vorgabe:
   Blau #0d1c3f / Orange #d46024 / Montserrat (self-hosted, DSGVO-sauber)
   Kein JavaScript, keine externen Ressourcen, keine Cookies.
   ========================================================================== */

/* ---- Font (Variable Font, latin subset) ---- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Farb-Tokens ----
   Kontrastwerte (WCAG), gegen den jeweiligen Hintergrund gerechnet:
   --orange           Markenfarbe #d46024: Flaechen, Linien, grosse/fette Schrift.
                      Auf Weiss 3,8:1, auf Blau 4,4:1 — laut CD-Policy nur fuer
                      grosse oder fette Schrift, nie fuer kleinen Fliesstext.
   --orange-text      abgedunkelte Variante fuer KLEINEN Orange-Text auf Weiss,
                      #C15721 = 4,51:1 (AA)
   --orange-auf-blau  aufgehellte Variante fuer KLEINEN Orange-Text auf Blau,
                      #D6682F = 4,69:1 (AA)
   --orange-hover     Hover fuer Orange-Textlinks auf Weiss, #AA4D1D = 5,54:1
   --orange-flaeche-hover  Hover fuer Orange-Flaechen, #C05620 (Weiss darauf 4,57:1)
   Weiss auf --blau: 16,7:1. */
:root {
  --blau: #0d1c3f;
  --blau-tief: #091530;
  --blau-hell: #22345e;
  --orange: #d46024;
  --orange-text: #C15721;
  --orange-auf-blau: #D6682F;
  --orange-hover: #AA4D1D;
  --orange-flaeche-hover: #C05620;
  --tinte: #16233f;
  --text: #3a4761;
  --text-leise: #5c6a84;
  --flaeche: #f4f6fa;
  --hairline: rgba(13, 28, 63, .14);
  --hairline-hell: rgba(255, 255, 255, .12);
  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---- Basis ---- */
* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Platz fuer den Scrollbalken immer reservieren, sonst springt die
     zentrierte Navigation zwischen kurzen und langen Seiten */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tinte);
  background: #fff;
  text-wrap: pretty;
}

/* Footer schliesst auch bei kurzen Seiten mit dem Viewport ab:
   die letzte Sektion fuellt den Restraum, ihre Flaeche laeuft bis zum Footer */
main { flex: 1; display: flex; flex-direction: column; }
main > :last-child { flex: 1; }

/* .wrap direkt als Flex-Kind: margin:auto wuerde das Item sonst auf
   Content-Breite kollabieren lassen statt es zu zentrieren */
main > .wrap { width: 100%; }

h1, h2, h3 { line-height: 1.15; text-wrap: balance; margin: 0 0 .6em; }

p { margin: 0 0 1em; }

/* height:auto ist Pflicht, weil Bilder width/height-Attribute tragen (CLS) */
img { max-width: 100%; height: auto; }
svg { max-width: 100%; }

a { color: var(--orange-text); text-decoration: none; }
a:hover { color: var(--orange-hover); }

strong { font-weight: 700; }

::selection { background: rgba(212, 96, 36, .28); }

:focus-visible { outline: 2px solid var(--orange-auf-blau); outline-offset: 3px; }

a, button, .btn { transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .15s ease; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a, button, .btn { transition: none; }
}

/* Nur fuer Screenreader */
.sr-nur {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 48px);
  padding-right: clamp(20px, 5vw, 48px);
}

/* Oranger Unterstrich als wiederkehrender Marken-Akzent */
.rule {
  width: 72px;
  height: 4px;
  background: var(--orange);
  border: 0;
  margin: 0 0 1.4rem;
}

/* Hero-Varianten laut Feedback-Runde 2: laengere Linie, auf Navy in Weiss */
.rule--lang { width: min(320px, 100%); }
.rule--weiss { background: #fff; }

/* ---- Buttons ----
   Weisse Bold-Schrift auf Markenorange (3,8:1) ist laut CD-Policy fuer
   fette Schrift zugelassen; Hover-Flaeche erreicht 4,57:1. */
.btn {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  line-height: 1;
  padding: .95rem 1.8rem;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.btn:hover { background: var(--orange-flaeche-hover); color: #fff; }

/* ==========================================================================
   Header
   ========================================================================== */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blau);
  border-bottom: 1px solid var(--hairline-hell);
}

.kopf-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 64px;
}

.marke { display: inline-flex; align-items: center; }
.marke img { display: block; height: 38px; width: auto; }

/* Marken-Fluchtlinie (Marketing-Vorgabe 2026-08-10): alle Logos — Nav,
   Home-Hero, Podcast-Wortmarke — ruecken gemeinsam so weit nach links,
   dass die Experten-Stories-Wortmarke auf der Podcast-Seite komplett auf
   der weissen Wand liegt. Die Holzlatten beginnen bei ~25,3% der
   Viewportbreite (Frame ist breitengefittet), Wortmarke max. 220px + 15px
   Luft -> Ziel-Fluchtlinie = 25,3vw - 235px; Ausrueckung = Differenz zur
   Wrap-Kante = 24,7vw - 297px. Unter ~1200px Viewport ergibt das 0 (dort
   passt die Wortmarke ohnehin auf die Wand). */
:root { --marken-ausrueckung: max(0px, calc(24.7vw - 297px)); }
.marke, .held-logo { transform: translateX(calc(-1 * var(--marken-ausrueckung))); }

.hauptnav { display: flex; gap: clamp(.9rem, 2.5vw, 1.7rem); }

.hauptnav a {
  color: rgba(255, 255, 255, .88);
  font-size: .95rem;
  font-weight: 600;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
}
.hauptnav a:hover { color: #fff; }
.hauptnav a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--orange);
}

/* ==========================================================================
   Heros (Startseite + Podcast): Foto ueber die volle Breite,
   halbtransparentes Text-Panel rechts, Logo auf der Fluchtlinie des Nav-Logos
   ========================================================================== */
.held,
.podcast-held {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blau);
  /* klemmt den Panel-Auslaeufer (::after, 50vw) am Viewport-Rand ab */
  overflow: hidden;
}

/* Flex-Kind mit margin:auto wuerde sonst auf Content-Breite kollabieren */
.held > .wrap,
.podcast-held > .wrap { width: 100%; }

.held-bild,
.podcast-held-bild { position: absolute; inset: 0; overflow: hidden; }

.held-bild .foto,
.podcast-held-bild .foto {
  position: absolute;
  inset: 0;
  width: 100%;
  /* das globale img { max-width:100% } wuerde die absichtlich
     ueberbreiten Shift-/Zoom-Ausschnitte deckeln */
  max-width: none;
  height: 100%;
  object-fit: cover;
}

/* Bildausschnitt: Josef Graf im Fokus, links vom Panel */
.held-bild .foto { object-position: 34% 24%; }

/* Podcast: tiefer angesetzter Ausschnitt (mehr Studio/Unterkante).
   Bild bewusst UNVERSCHOBEN: die Wortmarke darf auf breiten Monitoren
   leicht in die Holzlatten ragen (Herb-Entscheid nach zwei verworfenen
   Varianten — Zoom war unscharf, Verschieben+Wandfuellung "furchtbar");
   der weisse Schein am Logo haelt sie dort lesbar. */
.podcast-held-bild .foto { object-position: 50% 55%; }

/* Auf dem Desktop das Buehnenfoto leicht nach links geschoben, aber mit
   Luft: das EXPA-Logo braucht freie Vorhang-Flaeche NEBEN Josefs Kopf
   (Herb-Mockup 2026-08-10) — die linke Person darf dafuer unten wieder
   etwas ins Bild ragen */
@media (min-width: 961px) {
  .held-bild .foto { left: -4%; width: 104%; }
}

/* Leichter Farbschleier: bindet das Foto an die Markenwelt und traegt das Logo */
.held-bild::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(13, 28, 63, .42) 0%, rgba(13, 28, 63, .12) 55%, rgba(13, 28, 63, .38) 100%);
}

/* Der Wrap richtet Logo und Panel an der Content-Fluchtlinie aus:
   Hero-Logo und Nav-Logo stehen dadurch auf derselben Linie */
.held-lage,
.podcast-held-lage {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  min-height: clamp(460px, 64vh, 680px);
}

/* Home-Logo ist Flex-Kind der Lage; das Podcast-Logo ist absolut (unten) */
.held-logo {
  align-self: flex-start;
  flex-shrink: 0;
  margin-top: clamp(1.3rem, 3.5vw, 2.4rem);
  width: clamp(150px, 20vw, 240px);
}

/* Experten-Stories-Wortmarke auf derselben (ausgerueckten) Fluchtlinie wie
   das Nav-Logo. Absolut in der Sektion verankert: 100% = Sektionsbreite
   (ohne Scrollbalken) bildet die Wrap-Zentrierung exakt nach; die
   Marken-Ausrueckung wird wie beim Nav-Logo abgezogen. Der weisse Schein
   haelt die blaue Marke lesbar, wo sie in die Holzlatten ragt (auf der
   weissen Wand ist er unsichtbar). */
.podcast-held-logo {
  position: absolute;
  z-index: 1;
  top: clamp(1.2rem, 3vw, 2.2rem);
  left: calc((100% - min(100%, 1160px)) / 2 + clamp(20px, 5vw, 48px) - var(--marken-ausrueckung));
  width: clamp(140px, 18vw, 220px);
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px rgba(255, 255, 255, .95)) drop-shadow(0 0 16px rgba(255, 255, 255, .8));
}

/* Hoeherer Podcast-Hero: 44vw haelt den sichtbaren Bildanteil (~78% der
   Framehoehe) auf jeder Monitorbreite stabil, 78vh deckelt auf flachen
   Displays — so bleibt Josefs Kopffreiheit trotz tiefem Ausschnitt erhalten.
   flex-end: das Panel ist hier das einzige Flex-Kind (Logo ist absolut)
   und muss trotzdem rechts stehen */
.podcast-held-lage {
  min-height: max(520px, min(78vh, 44vw));
  justify-content: flex-end;
}

/* Panels laufen ueber die volle Hero-Hoehe; die Transparenz laesst das Foto
   durchscheinen (Marketing-Wunsch), der Blur haelt den Text darauf lesbar
   und kaschiert die knappe Aufloesung des Buehnenfotos */
/* Das Panel laeuft bis zum rechten Viewport-Rand durch (Marketing-Mockup):
   --ueberhang = Abstand von der Wrap-Content-Kante zum Viewport-Rand.
   width waechst um den Ueberhang, margin-right zieht ihn wieder ab —
   die linke Panelkante bleibt an der Wrap-Spalte, die Flaeche streckt
   sich nach rechts (Rest klemmt overflow:hidden der Sektion ab).
   Ein Element, eine Flaeche: keine Naht im Blur. */
.held-panel,
.podcast-held-panel {
  --ueberhang: calc((100vw - min(100vw, 1160px)) / 2 + clamp(20px, 5vw, 48px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: calc(min(30rem, 48%) + var(--ueberhang));
  margin-right: calc(-1 * var(--ueberhang));
  flex-shrink: 0;
  padding: clamp(2rem, 4vw, 3.4rem);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Textspalte bleibt trotz gestrecktem Panel kompakt: die Headline darf
   breiter laufen (PERSOENLICHKEITEN. braucht die Zeile), Subline bricht
   wie im Mockup zweizeilig */
.held-panel h1, .podcast-held-panel h1 { max-width: 36rem; }
.held-sub, .podcast-held-sub { max-width: 26rem; }

.held-panel { background: rgba(255, 255, 255, .8); }

.held-panel h1 .x-akzent { color: var(--orange); } /* gross + fett: CD-Policy */

.held-panel h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .015em;
  color: var(--blau);
  margin-bottom: .5em;
}

.held-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 700;
  color: var(--blau);
  margin-bottom: .7em;
}

.held-text { color: var(--text); max-width: 46ch; margin-bottom: 1.8em; }

/* ==========================================================================
   Navy-Baender (Mitbesitzen, Podcast-Textblock) mit Marken-Kreis
   ========================================================================== */
.band {
  position: relative;
  background: var(--blau);
  color: #fff;
  padding: clamp(3.2rem, 8vw, 5.5rem) 0;
  overflow: hidden;
}

/* Inhalt als mittige Spalte statt linksbuendig im breiten Wrap
   (Feedback-Runde 2: wirkte auf grossen Monitoren "gequetscht") */
.band .wrap { position: relative; max-width: 860px; }

/* Kleiner Glow-Punkt links neben der Ueberschrift — ersetzt den grossen
   angeschnittenen Kreis (Feedback-Runde 2). Er haengt im Seitenrand und
   braucht Luft; auf schmalen Viewports faellt er weg (vom Marketing so
   freigegeben: "dann einfach weglassen"). */
@media (min-width: 1000px) {
  .band-kreis h1, .band-kreis h2 { position: relative; }

  /* Echter Glow wie im Marketing-PDF (PowerPoint "weiche Kanten"):
     kleine Scheibe + kraeftiger Blur im Verhaeltnis — kleiner heller Kern,
     der kontinuierlich in den Grund auslaeuft. Nicht: grosse Scheibe mit
     nur angeweichter Kante. */
  .band-kreis h1::before, .band-kreis h2::before {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(100% + 18px);
    transform: translateY(-50%);
    width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
    background: var(--orange);
    filter: blur(.28em);
  }
}

.band h1, .band h2 {
  font-size: clamp(1.55rem, 2.9vw, 2.35rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .015em;
  color: var(--orange); /* gross + fett auf Blau: 4,4:1, laut CD-Policy zulaessig */
  max-width: 24ch;
}

.band .inhalt { max-width: 70ch; }
.band p { color: rgba(255, 255, 255, .92); }

.band a { color: var(--orange-auf-blau); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.band a:hover { color: #fff; }

/* ==========================================================================
   Podcast-Seite
   ========================================================================== */
.podcast-held-panel {
  background: rgba(13, 28, 63, .8);
  color: #fff;
}

.podcast-held-panel h1 {
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: .5em;
}

.podcast-held-sub { font-size: clamp(1.05rem, 1.6vw, 1.2rem); font-weight: 700; color: #fff; margin-bottom: .7em; }

.podcast-held-text { color: rgba(255, 255, 255, .88); max-width: 44ch; margin-bottom: 1.8em; }

/* Hoeren + Socials: das Podcast-Standbild bleibt sichtbar (Zoom auf Josef Graf),
   nur unten liegt ein Verlauf fuer die Lesbarkeit — Optik laut Layout-Vorlage */
.hoeren {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(440px, 60vh, 640px);
  /* Gast-freier Bildausschnitt, vertikal auf Josefs Gesicht verankert (46%) —
     bleibt dadurch auf jeder Monitorbreite stabil. Navy-Schleier wie im PDF. */
  background:
    linear-gradient(to top, rgba(9, 21, 48, .74) 0%, rgba(13, 28, 63, .52) 45%, rgba(13, 28, 63, .46) 100%),
    url('../img/podcast-hoeren.jpg') left 46% / cover no-repeat;
  color: #fff;
  padding: clamp(2.4rem, 6vw, 3.6rem) 0 clamp(1.8rem, 4vw, 2.6rem);
}

/* Flex-Kind mit margin:auto wuerde sonst auf Content-Breite kollabieren */
.hoeren > .wrap { width: 100%; }

/* Wortmarke direkt auf der hellen Studio-Wand, wie im Marketing-PDF */
.hoeren-logo {
  position: absolute;
  top: clamp(1.2rem, 4vw, 2.4rem);
  left: clamp(1.2rem, 4vw, 2.4rem);
  width: clamp(130px, 16vw, 200px);
}

.hoeren-zeile {
  display: flex;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: flex-start;
  flex-wrap: wrap;
}

.hoeren h2 {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #fff;
  margin-bottom: .9rem;
}

.plattformen { display: flex; flex-direction: column; gap: .55rem; width: 190px; }

.plattform {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 4px;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Drei Button-Auspraegungen aus der Vorlage */
.plattform--hell { background: #fff; color: var(--orange); }
.plattform--voll { background: var(--orange); color: #fff; }
.plattform--glas {
  background: rgba(13, 28, 63, .5);
  border: 1px solid rgba(255, 255, 255, .55);
  color: #fff;
}

a.plattform--hell:hover { color: var(--orange-hover); }
a.plattform--voll:hover { background: var(--orange-flaeche-hover); color: #fff; }
a.plattform--glas:hover { border-color: #fff; color: #fff; }

/* Weisse Glyphen ohne Rahmen, kompakt nebeneinander */
.socials { display: flex; gap: .9rem; align-items: center; }

.social { display: inline-flex; color: #fff; }
a.social:hover { color: var(--orange-auf-blau); }

.hoeren-hinweis {
  margin: 1.4rem 0 0;
  font-size: .8rem;
  color: rgba(255, 255, 255, .68);
}

/* ==========================================================================
   Seitenkopf heller Bereiche (Episodes, Kontakt, Rechtsseiten)
   ========================================================================== */
.seitenkopf { padding: clamp(2.6rem, 6vw, 4.2rem) 0 0; }

.seitenkopf h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--orange); /* gross + fett auf Weiss: 3,8:1, laut CD-Policy zulaessig */
  margin-bottom: .35em;
  hyphens: auto; /* faengt lange Einzelwoerter wie "Datenschutzerklaerung" ab */
}

.seitenkopf-blau h1 { color: var(--blau); }

.seitenkopf .einleitung { color: var(--text); max-width: 62ch; }

/* ==========================================================================
   Episoden
   ========================================================================== */
.episoden { padding: clamp(2.2rem, 5vw, 3.6rem) 0 clamp(3rem, 7vw, 5rem); }

/* Episoden als Querstrecke: am Telefon wischen, am Desktop passen die
   ersten drei nebeneinander; jede weitere Folge verlaengert die Strecke */
.ep-strecke {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(325px, 82vw);
  gap: clamp(1.2rem, 2.5vw, 2rem);
  margin-top: 1.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--orange) transparent;
}

.ep-strecke:focus-visible { outline: 2px solid var(--orange-auf-blau); outline-offset: 3px; }

.ep-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
  scroll-snap-align: start;
}

/* Ganze Karte klickbar, sobald ein Episoden-Link existiert */
.ep-link { color: inherit; }
.ep-link:hover { color: inherit; }
.ep-link::after { content: ''; position: absolute; inset: 0; }

.ep-karte:has(.ep-link):hover { border-color: var(--orange); transform: translateY(-3px); }

.ep-bild { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

.ep-bild-folgt {
  aspect-ratio: 4 / 3;
  background: var(--blau);
  display: grid;
  place-items: center;
}
.ep-bild-folgt img { width: 32%; opacity: .45; }

.ep-body { padding: 1.35rem 1.35rem 1.5rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }

.ep-nr {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--orange-text);
  font-feature-settings: 'tnum';
}

.ep-titel {
  font-size: 1.28rem;
  font-weight: 800;
  color: var(--orange); /* fett + gross auf Weiss, CD-Policy */
  margin: 0;
}

.ep-meta { font-size: .82rem; color: var(--text-leise); font-feature-settings: 'tnum'; }

.ep-text { font-size: .93rem; color: var(--text); margin: .4rem 0 0; }

.ep-cta {
  margin-top: auto;
  padding-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--orange-text);
}

.ep-badge {
  margin-top: auto;
  padding-top: 1rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.ep-karte-folgt .ep-titel { color: var(--text-leise); }
.ep-karte-folgt { background: var(--flaeche); }

/* ==========================================================================
   Team
   ========================================================================== */
.team {
  background: var(--blau);
  color: #fff;
  padding: clamp(3rem, 7vw, 5rem) 0;
}

.team h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 2.2rem;
}

.team-gitter {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.6rem 1.4rem;
}

.team-person { text-align: center; }

.team-avatar {
  position: relative;
  width: 116px;
  height: 116px;
  margin: 0 auto 1rem;
}

/* Oranger Kreis-Akzent hinter dem Portraet, Motiv aus der Layout-Vorlage */
.team-avatar::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 9px;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--orange);
}

.team-avatar .kern {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--blau-hell);
  border: 2px solid rgba(255, 255, 255, .2);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.team-avatar .kern img { width: 100%; height: 100%; object-fit: cover; }

.team-avatar .initialen {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .85);
}

.team-name { font-size: 1rem; font-weight: 700; color: #fff; margin: 0 0 .2em; }

.team-rolle {
  font-size: .76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--orange-auf-blau);
  margin: 0;
}

.team-hinweis { margin: 2.4rem 0 0; font-size: .85rem; color: rgba(255, 255, 255, .55); }

/* ==========================================================================
   Kontakt
   ========================================================================== */
.kontakt-bereich { padding: clamp(2rem, 5vw, 3.4rem) 0 clamp(3rem, 7vw, 5rem); }

.kontakt-karte {
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--orange);
  border-radius: 6px;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  max-width: 560px;
}

.kontakt-karte h2 { font-size: 1.15rem; font-weight: 700; color: var(--blau); }

.kontakt-mail {
  display: inline-block;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 700;
  margin: .3rem 0 .8rem;
}

.kontakt-zeile { color: var(--text); font-size: .95rem; margin: 0; }

/* ==========================================================================
   Rechtsseiten
   ========================================================================== */
.rechtstext { padding: clamp(2rem, 5vw, 3rem) 0 clamp(3rem, 7vw, 5rem); }

.rechtstext .inhalt { max-width: 72ch; }

.rechtstext h2 { font-size: 1.22rem; font-weight: 700; color: var(--blau); margin: 2em 0 .5em; }

.rechtstext h3 { font-size: 1.02rem; font-weight: 700; color: var(--blau); margin: 1.5em 0 .4em; }

.rechtstext p, .rechtstext li { color: var(--text); font-size: .97rem; }

/* Lange URLs (GISA-Register) duerfen am Telefon umbrechen */
.rechtstext a { overflow-wrap: anywhere; }

.rechtstext ul { padding-left: 1.2rem; margin: 0 0 1em; }

.stand { font-size: .85rem; color: var(--text-leise); }

/* ==========================================================================
   Footer
   ========================================================================== */
/* Bewusst schlicht: eine Zeile, keine Marke, nur das Noetigste */
.fuss {
  background: var(--blau-tief);
  border-top: 1px solid var(--hairline-hell);
  color: rgba(255, 255, 255, .65);
  font-size: .82rem;
  padding: 1.1rem 0;
}

.fuss-zeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem 2rem;
  flex-wrap: wrap;
}

.fuss-copy { margin: 0; }

.fussnav { display: flex; gap: 1.2rem; flex-wrap: wrap; }

.fussnav a { color: rgba(255, 255, 255, .78); font-weight: 600; }
.fussnav a:hover { color: #fff; }

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (max-width: 960px) {
  /* Gestapelt: Foto als eigener Block, darunter ein deckendes Panel —
     Transparenz ueber dem Foto wuerde am Telefon die Lesbarkeit kosten.
     WICHTIG: kein display:block auf .held/.podcast-held — die Basis ist
     Flex-Column, nur so streckt flex:1 das Panel bis zum Sektionsende
     (sonst Navy-Rest unterm weissen Panel auf hohen Telefonen) */
  .held-bild, .podcast-held-bild {
    position: relative;
    aspect-ratio: 16 / 10;
  }

  .held-bild .foto { object-position: 34% 18%; }

  .held-lage, .podcast-held-lage {
    position: static;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* randlos: das horizontale Wrap-Padding uebernimmt unten das Panel,
       damit seine Flaeche bis an die Viewport-Kanten laeuft */
    padding-left: 0;
    padding-right: 0;
  }

  /* Logo zurueck aufs Foto; left = .wrap-Padding haelt die Fluchtlinie zum Nav-Logo */
  .held-logo, .podcast-held-logo {
    position: absolute;
    z-index: 1;
    top: clamp(1.1rem, 3.5vw, 2rem);
    left: clamp(20px, 5vw, 48px);
    margin-top: 0;
  }

  /* Kleiner als am Desktop: darf Josefs Kopf im schmalen Ausschnitt
     nicht ueberdecken (Herb 2026-08-10) */
  .held-logo { width: clamp(96px, 26vw, 140px); }

  .held-panel, .podcast-held-panel {
    width: auto;
    /* fuellt die Resthoehe der Sektion: kein Navy-Rest unterm Panel */
    flex: 1;
    margin-right: 0;
    /* knapp gehalten: die Startseite soll am Telefon in einen Viewport
       passen (Herb-Fund: leichtes Scrollen ohne sichtbaren Mehrinhalt) */
    padding: clamp(1.6rem, 4.2vw, 3rem) clamp(20px, 5vw, 48px);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .held-panel { background: #fff; }
  .podcast-held-panel { background: var(--blau); }

  .team-gitter { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.2rem 1rem; }
}

@media (max-width: 760px) {
  .team-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .fuss-zeile { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  /* Podcast darf hoeher bauen (Seite scrollt ohnehin); die Startseite
     bleibt bei 16/10, damit Foto + Panel in einen Telefon-Viewport passen */
  .podcast-held-bild { aspect-ratio: 4 / 3; }

  .seitenkopf h1 { font-size: clamp(1.5rem, 6.5vw, 1.9rem); overflow-wrap: break-word; }
  .podcast-held-panel h1 { font-size: 1.55rem; hyphens: auto; }
  .held-panel h1 { font-size: 1.6rem; }

  .kopf-zeile { min-height: 56px; }
  .marke img { height: 30px; }
  .hauptnav a { font-size: .84rem; }
}

@media (max-width: 400px) {
  .hauptnav { gap: .7rem; }
  .hauptnav a { font-size: .8rem; }
  .team-gitter { gap: 1.8rem .8rem; }
  .team-avatar { width: 100px; height: 100px; }
}