/* ==========================================================================
   Standpunkt.Wirtschaft – Theme-Stylesheet (Basis: prototyp/assets/css/main.css)
   Reihenfolge: Tokens, Basis, Grundbausteine, Kopf, Bereiche, Fuß, Dialoge,
   Breakpoints. Klassen sind flach gehalten (eine Klasse pro Regel), damit
   sich Abstände nicht gegenseitig überschreiben.
   ========================================================================== */

/* --- Tokens -------------------------------------------------------------- */
:root {
  /* Farbe: Weiß und Grau tragen, Orange markiert Marke und Format,
     Blau ist Akzent für Themen (Schwerpunkt, Schlagwörter) und Fokus */
  --graphit: #2D3338;         /* dunkle Flächen, Logo auf hell */
  --graphit-hell: #3D444A;    /* Flächen auf Graphit */
  --tinte: #1F2428;           /* Fließtext, Überschriften */
  --grau: #5E656D;            /* Metadaten, Sekundärtext */
  --linie: #DADDE1;           /* Trennlinien auf hell */
  --nebel: #F1F2F4;           /* helle Bänder, Servicezeile */
  --papier: #FFFFFF;
  --punkt: #EF7602;           /* Logo-Orange: Punkte, Primär-Schaltfläche */
  --punkt-hover: #FF8A1F;
  --blau: #1A73A8;            /* Akzent: Themen, Fokusrahmen */
  --hell: #FFFFFF;
  --hell-2: #B4BAC1;          /* Sekundärtext auf Graphit */
  --linie-dunkel: rgba(255, 255, 255, 0.16);

  /* Schrift */
  --f-sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Newsreader", Georgia, "Times New Roman", serif;

  /* Raster */
  --max: 1280px;
  --pad: clamp(16px, 3vw, 40px);
  --gap: clamp(20px, 2vw, 32px);
  --radius: 6px;
  --band-y: clamp(64px, 8vw, 120px);
  --util-h: 40px;
  --bar-h: 84px;

  --focus: var(--blau);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 400 16px/1.5 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

/* Überschriften trennen nur an den weichen Trennstrichen vom Server (inc/hyphenation.php):
   gleiches Ergebnis in jedem Browser. Lange Wörter stehen in .hy und werden nur getrennt,
   wenn sie allein nicht in eine Zeile passen. */
h1, h2, h3, h4 {
  overflow-wrap: break-word;
  hyphens: manual;
}
.hy {
  display: inline-block;
  text-decoration: inherit;
  text-indent: 0; /* sonst erbt der Rahmen den hängenden Einzug der Zitate und frisst das Leerzeichen davor */
}

p { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.on-dark { --focus: var(--punkt); }

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: 4px;
  background: var(--punkt);
  color: var(--tinte);
  font: 700 15px/1 var(--f-sans);
}
.skip-link:focus { top: 16px; }

.container {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}

.header-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 120px;
  pointer-events: none;
}

/* --- Grundbausteine ------------------------------------------------------ */

/* Der Punkt aus dem Logo: Satzzeichen hinter Rubriktiteln */
.punkt { color: var(--punkt); }

/* Logo als Inline-SVG (Symbol #logo-sw): Schrift in currentColor, Punkt orange */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.logo {
  display: block;
  width: auto;
  aspect-ratio: 764 / 252;
}

/* Formatkennung im Logo-Muster „●wirtschaft“ */
.fmt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--tinte);
}
.fmt::before {
  content: "";
  flex: none;
  width: 0.58em;
  height: 0.58em;
  border-radius: 50%;
  background: var(--punkt);
}

.kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 0;
  font: 500 14px/1.3 var(--f-sans);
  color: var(--grau);
}
.on-dark .kicker { color: var(--hell-2); }
.on-dark .fmt { color: var(--hell); }

/* Bildrahmen; jedes Vorkommen setzt sein eigenes Seitenverhältnis */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--nebel);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Ohne Beitragsbild: Markenfläche mit Punkt statt grauem Platzhalter */
.media--empty {
  display: grid;
  place-items: center;
  background: var(--graphit);
}
.media--empty::after {
  content: "";
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--punkt);
}
.on-dark .media,
.on-dark .media--empty { background: var(--graphit-hell); }

/* Ganze Teaser-Fläche klickbar, Link bleibt die Überschrift */
.teaser { position: relative; }
.teaser__title a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
  transition: text-decoration-color 0.15s ease;
}
.teaser__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.teaser:hover .teaser__title a { text-decoration-color: var(--punkt); }
.teaser__title a:focus-visible { outline: none; }
.teaser:has(.teaser__title a:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 6px;
  border-radius: 4px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  font: 700 15px/1 var(--f-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.btn--punkt {
  background: var(--punkt);
  color: var(--tinte);
}
.btn--punkt:hover { background: var(--punkt-hover); }
.btn--lg {
  min-height: 54px;
  padding: 0 28px;
  font-size: 17px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 600 15px/1 var(--f-sans);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.icon-btn:hover { background: var(--nebel); }
.on-dark .icon-btn:hover { background: var(--graphit-hell); }
.icon-btn svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 700 15px/1 var(--f-sans);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--punkt);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.more:hover { text-decoration-color: currentColor; }

.pill {
  display: inline-flex;
  margin: 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--blau);
  color: var(--hell);
  font: 600 14px/1 var(--f-sans);
}

/* --- Kopf ---------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: calc(var(--util-h) * -1);
  z-index: 40;
  /* Servicezeile grau, Kopfleiste weiß, darunter eine Haarlinie */
  background: linear-gradient(var(--nebel) var(--util-h), var(--papier) 0);
  box-shadow: 0 1px 0 var(--linie);
  color: var(--tinte);
}

.util {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--util-h);
  font-size: 13px;
  color: var(--grau);
}
.util__claim {
  margin: 0;
  font: inherit;
}
.util__end {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}

.social {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.social a {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--grau);
  transition: color 0.15s ease;
}
.social a:hover { color: var(--tinte); }
.social svg { width: 15px; height: 15px; fill: currentColor; }

.bar {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  height: var(--bar-h);
  transition: height 0.25s ease;
}
.is-condensed .bar { height: 64px; }

.brand {
  flex: none;
  color: var(--graphit);
}
.brand .logo {
  height: 46px;
  transition: height 0.25s ease;
}
.is-condensed .brand .logo { height: 36px; }

.nav ul {
  display: flex;
  gap: clamp(12px, 2vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 10px;
  font: 600 16px/1 var(--f-sans);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  transition: text-decoration-color 0.15s ease;
}
.nav a:hover { text-decoration-color: var(--punkt); }
.nav a[aria-current="page"]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--punkt);
}

.bar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.menu-toggle { display: none; }

/* --- Aufmacher ----------------------------------------------------------- */
.hero {
  display: grid;
  gap: clamp(36px, 4vw, 56px);
  padding-top: clamp(28px, 4vw, 56px);
  padding-bottom: var(--band-y);
}

.lead {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.lead__text {
  display: grid;
  gap: 20px;
}
.lead__title {
  margin: 0;
  font: 800 clamp(34px, 4.3vw, 60px)/1.02 var(--f-sans);
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.lead__excerpt {
  max-width: 46ch;
  margin: 0;
  font: 400 clamp(18px, 1.5vw, 21px)/1.5 var(--f-serif);
}
.lead__media { aspect-ratio: 3 / 2; }

.toprow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

/* Zeilen-Teaser: Vorschaubild links, Text rechts */
.row-teaser {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding-top: 20px;
  border-top: 1px solid var(--linie);
}
.row-teaser__media {
  aspect-ratio: 4 / 3;
  border-radius: 4px;
}
.row-teaser__title {
  margin: 6px 0 0;
  font: 700 17px/1.28 var(--f-sans);
  letter-spacing: -0.01em;
}

/* --- Bänder und Rubrikköpfe ---------------------------------------------- */
.band { padding-block: var(--band-y); }
.band--dunkel {
  background: var(--graphit);
  color: var(--hell);
}
.band--mist { background: var(--nebel); }
/* Ladefläche auf grauem Band etwas dunkler; der Ersatz ohne Bild bleibt Graphit */
.band--mist .media:not(.media--empty) { background: #E1E4E8; }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px 32px;
  margin-bottom: clamp(36px, 4vw, 64px);
}
.section-title {
  grid-column: 1;
  margin: 0;
  font: 800 clamp(48px, 7vw, 96px)/0.9 var(--f-sans);
  letter-spacing: -0.045em;
}
.section-intro {
  grid-column: 1;
  max-width: 52ch;
  margin: 0;
  font: 400 clamp(17px, 1.4vw, 20px)/1.45 var(--f-serif);
  color: var(--grau);
}
.on-dark .section-intro { color: var(--hell-2); }
.section-head .more {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* --- Standpunkte --------------------------------------------------------- */
.sp-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px clamp(32px, 4vw, 72px);
}

.sp-feature {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(20px, 2vw, 32px);
}
.sp-feature__media { aspect-ratio: 4 / 5; }
.sp-feature__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp-quote { margin: 0; }
.sp-quote p {
  margin: 0;
  font: 400 clamp(26px, 2.4vw, 36px)/1.16 var(--f-serif);
  letter-spacing: -0.01em;
  text-indent: -0.4em;
}

.person {
  display: grid;
  gap: 2px;
  margin: 0;
}
.person__name { font: 700 16px/1.3 var(--f-sans); }
.person__role {
  font: 400 15px/1.4 var(--f-sans);
  color: var(--hell-2);
}

.sp-feature__foot {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--linie-dunkel);
}
.sp-feature__title {
  margin: 0;
  font: 700 18px/1.3 var(--f-sans);
}

.sp-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: clamp(56px, 6vw, 88px);
}
.sp-mini {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding-top: 20px;
  border-top: 1px solid var(--linie-dunkel);
}
.sp-mini__media {
  aspect-ratio: 1;
  border-radius: 50%;
}
.sp-mini__title {
  margin: 0;
  font: 700 16px/1.3 var(--f-sans);
}
.sp-mini__person {
  margin: 6px 0 0;
  font: 400 14px/1.4 var(--f-sans);
  color: var(--hell-2);
}

/* --- Schwerpunkt --------------------------------------------------------- */
.dossier {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 112px);
  align-items: start;
}
.dossier__intro {
  position: sticky;
  top: 104px;
  display: grid;
  justify-items: start;
  gap: 20px;
}
.dossier__title {
  max-width: 100%;
  margin: 0;
  font: 800 clamp(36px, 4vw, 56px)/0.98 var(--f-sans);
  letter-spacing: -0.04em;
}
.dossier__statement {
  max-width: 20ch;
  margin: 8px 0 0;
  font: 700 clamp(22px, 2.1vw, 30px)/1.2 var(--f-sans);
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.dossier__text {
  max-width: 44ch;
  margin: 0;
  font: 400 18px/1.55 var(--f-serif);
}
.dossier .more { text-decoration-color: var(--blau); }
.dossier .more:hover { text-decoration-color: currentColor; }
.dossier__list .row-teaser {
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 24px;
  padding-block: 24px;
  border-top-color: #C9D3DA;
}
.dossier__list .row-teaser:first-child {
  padding-top: 0;
  border-top: 0;
}
.dossier__list .row-teaser__title {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.22;
  letter-spacing: -0.015em;
}

/* --- News ---------------------------------------------------------------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(36px, 3vw, 48px) var(--gap);
}
.card-teaser {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card-teaser--lg {
  grid-column: span 2;
  grid-row: span 2;
}
.card-teaser__media {
  aspect-ratio: 3 / 2;
  margin-bottom: 4px;
}
.card-teaser__title {
  margin: 0;
  font: 700 19px/1.25 var(--f-sans);
  letter-spacing: -0.012em;
}
.card-teaser--lg .card-teaser__title {
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.card-teaser__excerpt {
  max-width: 52ch;
  margin: 0;
  font: 400 18px/1.55 var(--f-serif);
}

/* --- Portraits ----------------------------------------------------------- */
.portrait-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 4vw, 72px);
}
.portrait {
  display: grid;
  grid-template-columns: clamp(120px, 14vw, 200px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding-block: 28px;
  border-top: 1px solid #C9D3DA;
}
.portrait__media { aspect-ratio: 4 / 3; }
.portrait__title {
  margin: 0 0 8px;
  font: 700 clamp(20px, 1.8vw, 24px)/1.15 var(--f-sans);
  letter-spacing: -0.02em;
}
.portrait__excerpt {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font: 400 16px/1.5 var(--f-serif);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* --- Veröffentlichen ----------------------------------------------------- */
.pitch {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 112px);
  align-items: start;
}
.pitch__title {
  max-width: 15ch;
  margin: 0;
  font: 800 clamp(36px, 4.6vw, 64px)/1 var(--f-sans);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.pitch__text {
  max-width: 48ch;
  margin: 24px 0 0;
  font: 400 clamp(18px, 1.5vw, 21px)/1.5 var(--f-serif);
}
.pitch__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 36px;
}
.pitch__mail {
  display: inline-block;
  padding-block: 2px; /* Zielgröße mind. 24 px */
  font: 600 16px/1.4 var(--f-sans);
  text-decoration: underline;
  text-decoration-color: var(--linie);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.pitch__mail:hover { text-decoration-color: var(--punkt); }

.pitch__formats { margin: 0; }
.pitch__formats div {
  padding-block: 20px;
  border-top: 1px solid var(--linie);
}
.pitch__formats dt { font: 700 18px/1.2 var(--f-sans); }
.pitch__formats dd {
  margin: 8px 0 0;
  font: 400 17px/1.5 var(--f-serif);
  color: var(--grau);
}
.pitch__about {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--linie);
  font: 600 15px/1.4 var(--f-sans);
}
.pitch__about a {
  text-decoration: underline;
  text-decoration-color: var(--punkt);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* --- Fuß ----------------------------------------------------------------- */
.site-footer {
  padding-top: clamp(56px, 6vw, 88px);
  background: var(--graphit);
  color: var(--hell);
}
.footer {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 40px var(--gap);
  padding-bottom: 56px;
}
.footer__brand .logo { height: 52px; }
.footer__brand p {
  max-width: 36ch;
  margin: 20px 0 0;
  font: 400 17px/1.5 var(--f-serif);
  color: var(--hell-2);
}
.footer__heading {
  margin: 0 0 12px;
  font: 600 14px/1.2 var(--f-sans);
  color: var(--hell-2);
}
.footer__col ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer__col a {
  display: inline-block;
  padding-block: 6px;
  font: 600 16px/1.3 var(--f-sans);
}
.footer__col a:hover,
.footer__legal a:hover {
  text-decoration: underline;
  text-decoration-color: var(--punkt);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 24px;
  background: linear-gradient(var(--linie-dunkel), var(--linie-dunkel)) center top / calc(100% - 2 * var(--pad)) 1px no-repeat;
  font: 400 14px/1.4 var(--f-sans);
  color: var(--hell-2);
}
.footer__legal p { margin: 0; }
.footer__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer__legal a {
  display: inline-block;
  padding-block: 4px; /* Zielgröße mind. 24 px */
}

/* --- Dialoge: Suche und mobiles Menü ------------------------------------- */
html:has(dialog[open]) { overflow: hidden; }

.sheet {
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--graphit);
  color: var(--hell);
}
.sheet::backdrop {
  background: rgba(8, 22, 32, 0.6);
}

.search-sheet {
  inset: 0 0 auto 0;
  height: auto;
  background: var(--papier);
  box-shadow: 0 1px 0 var(--linie);
  color: var(--tinte);
}
.search-sheet[open] { animation: sheet-down 0.22s ease-out; }
.search-sheet__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 24px;
}
.search-form {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 6px 18px;
  border-radius: 999px;
  background: var(--nebel);
}
.search-form:focus-within { box-shadow: 0 0 0 3px var(--blau); }
.search-form__icon {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--grau);
  stroke-width: 2;
  stroke-linecap: round;
}
.search-form input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  border: 0;
  background: transparent;
  color: var(--tinte);
  font: 500 clamp(17px, 2vw, 22px)/1.2 var(--f-sans);
  outline: 2px solid transparent; /* Ring kommt vom Formular; im Kontrastmodus bleibt der Umriss */
}
.search-form input::placeholder { color: var(--grau); }
.search-form input::-webkit-search-cancel-button { display: none; }

.menu-sheet {
  inset: 0;
  height: 100dvh;
}
.menu-sheet[open] {
  display: flex;
  flex-direction: column;
  animation: sheet-fade 0.2s ease-out;
}
.menu-sheet__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding-inline: var(--pad);
  border-bottom: 1px solid var(--linie-dunkel);
}
.menu-sheet__top .logo { height: 34px; }
.menu-sheet nav {
  flex: 1;
  padding: 28px var(--pad);
}
.menu-sheet__nav {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu-sheet__nav a {
  display: block;
  padding-block: 4px;
  font: 800 clamp(40px, 11vw, 56px)/1.05 var(--f-sans);
  letter-spacing: -0.04em;
}
.menu-sheet__foot {
  display: grid;
  justify-items: start;
  gap: 24px;
  padding: 24px var(--pad) 32px;
  border-top: 1px solid var(--linie-dunkel);
}
.menu-sheet__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 500 15px/1 var(--f-sans);
  color: var(--hell-2);
}
.menu-sheet__links a {
  display: inline-block;
  padding-block: 10px;
}

@keyframes sheet-down {
  from { opacity: 0; transform: translateY(-12px); }
}
@keyframes sheet-fade {
  from { opacity: 0; }
}

/* --- Ergänzungen der Teaser für WordPress --------------------------------- */
.sp-quote--title {
  margin: 0;
  font: 700 clamp(24px, 2.2vw, 32px)/1.15 var(--f-sans);
  letter-spacing: -0.02em;
  text-indent: 0;
}
.sp-feature__media img,
.sp-mini__media img,
.interview__media img { object-position: 50% 25%; }

.portrait__meta {
  margin: 0 0 6px;
  font: 600 14px/1.3 var(--f-sans);
  color: var(--grau);
}
.row-teaser__excerpt {
  display: -webkit-box;
  margin: 8px 0 0;
  overflow: hidden;
  font: 400 16px/1.5 var(--f-serif);
  color: var(--grau);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.kicker a.fmt {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.kicker a.fmt:hover { text-decoration-color: var(--punkt); }

/* WordPress: Text nur für Screenreader */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Listen und Raster für Archive ---------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(36px, 3vw, 48px) var(--gap);
}
.card-grid .card-teaser--lg {
  grid-column: span 2;
  grid-row: span 2;
}
.row-list {
  display: grid;
  max-width: 960px;
}
.row-list .row-teaser {
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 24px;
  padding-block: 24px;
}
.row-list .row-teaser__title {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.22;
  letter-spacing: -0.015em;
}
.sp-list--archiv { margin-top: clamp(48px, 5vw, 72px); }
.sp-list--archiv:empty { display: none; }
.archive .section-title--thema,
.archive .section-title--suche { font-size: clamp(40px, 5.5vw, 80px); }
.archive .section-head .pill {
  grid-column: 1;
  justify-self: start;
}
.empty {
  margin: 0;
  font: 400 18px/1.5 var(--f-serif);
  color: var(--grau);
}
.subhead {
  margin: clamp(48px, 5vw, 72px) 0 24px;
  font: 800 clamp(24px, 2.4vw, 32px)/1.1 var(--f-sans);
  letter-spacing: -0.02em;
}

.search-form--page {
  max-width: 640px;
  margin-bottom: clamp(32px, 4vw, 48px);
  background: var(--nebel);
}
.search-form--page input { color: var(--tinte); }
.search-form--page input::placeholder { color: var(--grau); }
.search-form--page .search-form__icon { stroke: var(--grau); }
.search-form--page:focus-within { box-shadow: 0 0 0 3px var(--blau); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--blau);
  color: var(--hell);
  font: 600 14px/1 var(--f-sans);
  transition: background-color 0.15s ease;
}
.chip:hover { background: #155F8B; }
.chip--rubrik {
  background: var(--nebel);
  color: var(--tinte);
}
.chip--rubrik:hover { background: var(--linie); }
.chip--rubrik::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--punkt);
}
.chips--rubriken { margin-top: 8px; }

.pagination { margin-top: clamp(40px, 5vw, 64px); }
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font: 600 15px/1 var(--f-sans);
}
a.page-numbers:hover { border-color: currentColor; }
.page-numbers.current {
  border-color: var(--tinte);
  background: var(--tinte);
  color: var(--hell);
}
.page-numbers.dots { border-color: transparent; }
.on-dark .page-numbers { border-color: var(--linie-dunkel); }
.on-dark .page-numbers.current {
  border-color: var(--hell);
  background: var(--hell);
  color: var(--graphit);
}

/* --- Artikel ------------------------------------------------------------- */
.measure {
  width: 100%;
  max-width: calc(720px + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}
.measure--wide { max-width: calc(1040px + 2 * var(--pad)); }

.article-head {
  display: grid;
  gap: 20px;
  padding-top: clamp(32px, 5vw, 72px);
  padding-bottom: clamp(28px, 3vw, 40px);
}
.article-head__title {
  margin: 0;
  font: 800 clamp(34px, 4.6vw, 56px)/1.04 var(--f-sans);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.article-head__lead {
  margin: 0;
  font: 400 clamp(20px, 1.8vw, 24px)/1.45 var(--f-serif);
}

.article-figure { margin: 0 auto clamp(32px, 4vw, 56px); }
.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.article-figure figcaption,
.entry figcaption {
  margin-top: 10px;
  font: 400 14px/1.45 var(--f-sans);
  color: var(--grau);
}

.article-head__subtitle {
  margin: -6px 0 0;
  font: 400 italic clamp(20px, 2vw, 26px)/1.35 var(--f-serif);
  color: var(--grau);
}

/* Kontakt im Portrait */
.contact { margin-top: clamp(40px, 5vw, 56px); }
.contact__title {
  margin: 0 0 16px;
  font: 800 clamp(22px, 2.2vw, 28px)/1.1 var(--f-sans);
  letter-spacing: -0.02em;
}
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 24px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--nebel);
}
.contact__person {
  display: flex;
  align-items: center;
  gap: 16px;
}
.contact__photo {
  flex: none;
  width: 80px;
  aspect-ratio: 1;
  border-radius: 50%;
}
.contact__photo img { object-position: 50% 25%; }
.contact .person__role { color: var(--grau); }
.contact__list {
  display: grid;
  gap: 12px;
  margin: 0;
}
.contact__list dt {
  font: 600 13px/1.2 var(--f-sans);
  color: var(--grau);
}
.contact__list dd {
  margin: 2px 0 0;
  font: 600 16px/1.4 var(--f-sans);
  overflow-wrap: anywhere;
}
.contact__list a {
  text-decoration: underline;
  text-decoration-color: var(--punkt);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Gesprächspartner im Interview */
.interview {
  margin-block: clamp(8px, 1vw, 16px) clamp(40px, 5vw, 64px);
  padding-block: clamp(40px, 5vw, 72px);
}
.interview__inner {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  max-width: calc(1040px + 2 * var(--pad));
}
.interview__media { aspect-ratio: 4 / 5; }
.interview__body {
  display: grid;
  gap: 24px;
}
.interview__quote { margin: 0; }
.interview__quote p {
  margin: 0;
  font: 400 clamp(28px, 3.4vw, 46px)/1.14 var(--f-serif);
  letter-spacing: -0.012em;
  text-indent: -0.4em;
  text-wrap: pretty;
}
.interview .person__name { font-size: 18px; }

/* Steckbrief im Portrait: Logo über dem Kasten. Ein Rahmen für alle Formate – lange Wortmarken
   stoßen an die Breite, quadratische Zeichen an die Höhe. */
.factbox {
  display: grid;
  gap: 20px;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.factbox__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(300px, 100%);
  max-height: 96px;
  object-fit: contain;
}
.factbox__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px 24px;
  margin: 0;
  padding: 20px 24px;
  border-radius: var(--radius);
  background: var(--nebel);
}
.factbox__list dt {
  font: 600 13px/1.2 var(--f-sans);
  color: var(--grau);
}
.factbox__list dd {
  margin: 4px 0 0;
  font: 600 16px/1.35 var(--f-sans);
  overflow-wrap: anywhere;
}
.factbox__list a {
  text-decoration: underline;
  text-decoration-color: var(--punkt);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Fließtext aus dem Block-Editor; Trennung übernimmt hier der Browser (nur lange Wörter). */
.entry {
  font: 400 clamp(18px, 1.4vw, 20px)/1.65 var(--f-serif);
  color: var(--tinte);
  overflow-wrap: break-word;
}
.entry p,
.entry li {
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}
.entry > * { margin-block: 0 1.1em; }
.entry > :first-child { margin-top: 0; }
.entry > :last-child { margin-bottom: 0; }
.entry h2,
.entry h3,
.entry h4 {
  font-family: var(--f-sans);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.entry h2 {
  margin: 1.9em 0 0.6em;
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.2;
}
.entry h3 {
  margin: 1.7em 0 0.5em;
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 700;
  line-height: 1.25;
}
.entry h4 {
  margin: 1.5em 0 0.4em;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
.entry strong,
.entry b { font-weight: 600; }
.entry a {
  text-decoration: underline;
  text-decoration-color: var(--punkt);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.entry a:hover { text-decoration-color: currentColor; }
.entry ul,
.entry ol { padding-left: 1.25em; }
.entry li { margin-block: 0.35em; }
.entry li::marker { color: var(--punkt); }
.entry ol li::marker { font: 700 0.9em var(--f-sans); }

/* Matomo-Widerspruch auf der Datenschutzseite (Formular kommt von xmtrack.de) */
#matomo-opt-out:not(:empty) {
  margin-block: 1.4em;
  padding: 20px 24px;
  border-radius: 12px;
  background: var(--nebel);
  font: 400 16px/1.5 var(--f-sans);
}
#matomo-opt-out p { margin: 0 0 12px; }
#matomo-opt-out input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0 10px 0 0;
  vertical-align: -4px;
  accent-color: var(--punkt);
}

/* Größere Absätze („Mittel“ im Editor) sind in den Interviews die Fragen */
.entry p.is-style-frage { font-size: var(--wp--preset--font-size--medium, 22px); }
.entry p.is-style-frage,
.entry p.has-medium-font-size,
.entry p.has-large-font-size {
  margin: 2em 0 0.5em;
  font-family: var(--f-sans);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.entry blockquote,
.entry .wp-block-quote,
.entry .wp-block-pullquote {
  margin: 1.8em 0;
  padding: 0;
  border: 0;
}
.entry blockquote p,
.entry .wp-block-pullquote p {
  font: 400 clamp(22px, 2vw, 28px)/1.35 var(--f-serif);
  font-style: italic;
}
.entry blockquote cite,
.entry .wp-block-pullquote cite {
  display: block;
  margin-top: 0.6em;
  font: 600 14px/1.3 var(--f-sans);
  font-style: normal;
  color: var(--grau);
}
.entry figure { margin-block: 2em; }
.entry img {
  height: auto;
  border-radius: var(--radius);
}
.entry .alignwide {
  max-width: none;
  margin-inline: calc(50% - min(520px, 50vw - var(--pad)));
}
.entry .alignfull {
  max-width: none;
  margin-inline: calc(50% - 50vw);
}
.entry .alignfull img { border-radius: 0; }
/* Bild links/rechts ausgerichtet, z. B. kleines Personenfoto im Zitat; Stil „Abgerundet“ = rund */
.entry .alignleft { float: left; margin: 0.2em 1.25em 0.5em 0; }
.entry .alignright { float: right; margin: 0.2em 0 0.5em 1.25em; }
.entry .is-style-rounded img { border-radius: 50%; }
.entry blockquote:has(.alignleft, .alignright) { display: flow-root; }
.entry h2,
.entry h3 { clear: both; }
.entry hr,
.entry .wp-block-separator {
  height: 1px;
  margin-block: 2.5em;
  border: 0;
  background: var(--linie);
}
.entry table {
  width: 100%;
  border-collapse: collapse;
  font: 400 16px/1.45 var(--f-sans);
}
.entry th,
.entry td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--linie);
  text-align: left;
  vertical-align: top;
}
.entry th { font-weight: 700; }
.entry iframe { max-width: 100%; }

/* Artikelfuß: Themen und Teilen */
.article-foot {
  display: grid;
  gap: 20px;
  margin-top: clamp(40px, 5vw, 56px);
  margin-bottom: clamp(56px, 7vw, 104px);
  padding-top: 28px;
  border-top: 1px solid var(--linie);
}
.article-foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.article-foot__label {
  min-width: 120px;
  margin: 0;
  font: 600 14px/1 var(--f-sans);
  color: var(--grau);
}
.share {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.share__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--papier);
  color: var(--tinte);
  font: 600 14px/1 var(--f-sans);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.share__btn:hover { border-color: var(--tinte); }
.share__btn .icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.share__btn .icon--fill {
  fill: currentColor;
  stroke: none;
}

/* Veröffentlichen, kurz */
.pitch-compact {
  padding-block: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--linie);
}
.pitch-compact__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
}
.pitch-compact__title {
  max-width: 24ch;
  margin: 0;
  font: 800 clamp(24px, 2.6vw, 36px)/1.1 var(--f-sans);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.pitch-compact__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}
.pitch-compact__more {
  display: inline-block;
  padding-block: 4px;
  font: 600 15px/1.4 var(--f-sans);
  text-decoration: underline;
  text-decoration-color: var(--punkt);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.band--mist + .pitch-compact { border-top: 0; }

/* Mobiles Menü: Punkt hinter jeder Rubrik (Gestaltung, für Screenreader stumm) */
.menu-sheet__nav a::after {
  content: "." / "";
  color: var(--punkt);
}
.menu-sheet__nav a[aria-current] {
  text-decoration: underline;
  text-decoration-color: var(--punkt);
  text-decoration-thickness: 4px;
  text-underline-offset: 8px;
}
.menu-sheet .logo { color: var(--hell); }

/* --- Breakpoints --------------------------------------------------------- */
@media (max-width: 1180px) {
  .icon-btn__label { display: none; }
  .sp-features { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .sp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-teaser--lg { grid-row: auto; }
}

@media (max-width: 980px) {
  .nav,
  .bar__pitch,
  .util__claim { display: none; }
  .menu-toggle { display: inline-flex; }
  .menu-toggle .icon-btn__label { display: inline; }

  .lead { grid-template-columns: minmax(0, 1fr); }
  .lead__media { order: -1; }
  .toprow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toprow .row-teaser { padding-block: 20px; }

  .dossier { grid-template-columns: minmax(0, 1fr); }
  .dossier__intro { position: static; }

  .portrait-list { grid-template-columns: minmax(0, 1fr); }

  .pitch { grid-template-columns: minmax(0, 1fr); }

  .footer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  :root {
    --util-h: 0px;
    --bar-h: 64px;
  }
  .util { display: none; }
  .search-form { padding-left: 14px; }
  .search-form__icon { display: none; }
  .brand .logo,
  .is-condensed .brand .logo { height: 34px; }
  .bar__actions { gap: 0; margin-right: -12px; }

  .section-head { grid-template-columns: minmax(0, 1fr); }
  .section-head .more {
    grid-column: 1;
    grid-row: auto;
  }

  .sp-feature {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas:
      "quote quote"
      "media person"
      "foot  foot";
    gap: 16px;
  }
  .sp-feature__body { display: contents; }
  .sp-quote { grid-area: quote; }
  .sp-feature__media {
    grid-area: media;
    aspect-ratio: 1;
    border-radius: 50%;
  }
  .person {
    grid-area: person;
    align-self: center;
  }
  .sp-feature__foot { grid-area: foot; }
  .sp-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sp-mini { padding-block: 20px; }

  .news-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .card-teaser--lg {
    grid-column: auto;
    padding-bottom: 28px;
  }
  .card-teaser:not(.card-teaser--lg) {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-areas:
      "media kicker"
      "media title";
    grid-template-rows: auto 1fr;
    column-gap: 16px;
    row-gap: 6px;
    padding-block: 20px;
    border-top: 1px solid var(--linie);
  }
  .card-teaser:not(.card-teaser--lg) .card-teaser__media {
    grid-area: media;
    aspect-ratio: 4 / 3;
    margin: 0;
    border-radius: 4px;
  }
  .card-teaser:not(.card-teaser--lg) .kicker { grid-area: kicker; }
  .card-teaser:not(.card-teaser--lg) .card-teaser__title {
    grid-area: title;
    font-size: 17px;
    line-height: 1.28;
  }

  .row-teaser,
  .dossier__list .row-teaser { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }

  .portrait { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding-block: 20px; }
  .portrait__title { font-size: 19px; }
  .portrait__excerpt { font-size: 15px; }

  .footer { grid-template-columns: minmax(0, 1fr); }
}

/* --- Breakpoints für Artikel, Archive, Seiten ------------------------------ */
@media (max-width: 1180px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid .card-teaser--lg { grid-row: auto; }
}

@media (max-width: 980px) {
  .interview__inner { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .card-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .card-grid .card-teaser--lg {
    grid-column: auto;
    padding-bottom: 28px;
  }
  .card-grid .card-teaser:not(.card-teaser--lg) {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-areas:
      "media kicker"
      "media title";
    grid-template-rows: auto 1fr;
    column-gap: 16px;
    row-gap: 6px;
    padding-block: 20px;
    border-top: 1px solid var(--linie);
  }
  .card-grid .card-teaser:not(.card-teaser--lg) .card-teaser__media {
    grid-area: media;
    aspect-ratio: 4 / 3;
    margin: 0;
    border-radius: 4px;
  }
  .card-grid .card-teaser:not(.card-teaser--lg) .kicker { grid-area: kicker; }
  .card-grid .card-teaser:not(.card-teaser--lg) .card-teaser__title {
    grid-area: title;
    font-size: 17px;
    line-height: 1.28;
  }
  .band--mist .card-grid .card-teaser:not(.card-teaser--lg) { border-top-color: #C9D3DA; }
  .row-list .row-teaser {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    padding-block: 20px;
  }

  .interview__inner {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas:
      "quote quote"
      "media person";
    gap: 20px 16px;
  }
  .interview__body { display: contents; }
  .interview__quote { grid-area: quote; }
  .interview__media {
    grid-area: media;
    aspect-ratio: 1;
    border-radius: 50%;
  }
  .interview .person {
    grid-area: person;
    align-self: center;
  }
  .interview .person__name { font-size: 16px; }

  .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .article-foot__label {
    width: 100%;
    min-width: 0;
  }
  .pitch-compact__actions { width: 100%; }
}

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