/* Seitengerüst: Zeitungskopf, Ressortleiste, Bahnen, Impressumsfuß */

.shell {
  width: min(100% - var(--gutter) * 2, var(--shell));
  margin-inline: auto;
}

.band { padding-block: var(--block); }
.band--tight { padding-block: clamp(2.2rem, 4vw, 3.5rem); }
.band--tinted { background: var(--paper-2); }

/* Eine gedruckte Bahn wird oben von einem Balken abgeschlossen */
.band--ruled { border-top: var(--bar) solid var(--ink); }

/* --- Zeitungskopf ------------------------------------------------------ */

.masthead { background: var(--paper); }

.masthead__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1rem, 2vw, 1.6rem);
}

.brand { display: block; flex: none; }

.brand__logo {
  width: clamp(13rem, 27vw, 20rem);
  height: auto;
}

/* Der Claim gehört zur Marke — er steht neben dem Logo, nicht irgendwo */
.claim {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  line-height: 1.28;
  max-width: 20ch;
  text-wrap: balance;
  border-left: var(--line) solid var(--ink);
  padding-left: 0.9rem;
}

.masthead__aside {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* --- Ressortleiste ------------------------------------------------------ */

.sections {
  position: relative;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-top: var(--bar) solid var(--ink);
  border-bottom: var(--line) solid var(--ink);
}

/* Logo und Ressorts nebeneinander; nur die Ressorts scrollen seitlich. */
.sections__zeile {
  display: flex;
  align-items: stretch;
}

/* Das Logo in der Leiste. Der Kopf mit dem großen Logo scrollt weg, die Leiste
   bleibt stehen — also nimmt sie das Logo mit, aber erst dann: leiste.js setzt
   .sections--klebt, sobald der Kopf aus dem Bild ist. Ohne JavaScript bleibt
   das Logo im Kopf. */
.sections__marke {
  flex: none;
  display: none;
  align-items: center;
  padding-right: clamp(0.6rem, 1.4vw, 1rem);
  margin-right: clamp(0.2rem, 0.8vw, 0.6rem);
  border-right: var(--hair) solid var(--rule-thin);
}

/* So hoch wie die Leiste selbst: Erscheint das Logo, wächst die Leiste nicht
   und der Inhalt darunter springt nicht. */
.sections__marke img {
  width: auto;
  height: 3.2rem;
}

.sections--klebt .sections__marke { display: flex; }

.sections__inner {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  /* Der Abstand steckt in der Schaltfläche selbst, damit die Hover-Fläche
     links und rechts Luft um die Schrift hat. */
  gap: clamp(0.2rem, 0.8vw, 0.6rem);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Die Leiste ist zugleich das Popover des Menüknopfs. Der Browser gibt
     Popovers eine eigene Box (fixiert, mittig, mit Rahmen); breit soll sie
     ganz normal in der Zeile stehen. */
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}

.sections__inner::-webkit-scrollbar { display: none; }

/* Zeigt an, dass die Leiste seitlich weitergeht — sonst übersieht man auf
   schmalen Geräten die hinteren Menüpunkte. */
.sections {
  --verlauf: linear-gradient(to left, var(--paper), transparent);
}

.sections::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 3rem;
  height: 100%;
  background: var(--verlauf);
  pointer-events: none;
}

/* Erst ab dieser Breite passen Logo und alle acht Ressorts nebeneinander. */
@media (min-width: 78rem) {
  .sections::after { display: none; }
}

.sections__link {
  flex: none;
  display: flex;
  align-items: center;
  /* Höchstens 0.85rem: mehr, und ab 78rem passt die klebende Leiste samt Logo
     nicht mehr in eine Zeile. */
  padding: 0.85rem clamp(0.6rem, 1.4vw, 0.85rem);
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 700;
  font-variation-settings: "wdth" 88;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: var(--bar) solid transparent;
  margin-bottom: -2px;
}

.sections__link:hover { background: var(--cyan); }

.sections__link[aria-current="page"] {
  background: var(--cyan);
  border-bottom-color: var(--ink);
}

/* --- Menü auf schmalen Geräten ---------------------------------------------
   Unter 78rem passen die Ressorts nicht mehr in eine Zeile. Statt sie seitlich
   wegrutschen zu lassen, klappt ein Knopf sie als Liste von oben herein.
   Browser ohne Popover behalten die seitlich scrollende Leiste. */

.sections__schalter,
.sections__zu { display: none; }

.sections__schalter,
.sections__zu {
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 700;
  font-variation-settings: "wdth" 88;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Drei Tintenstriche: der mittlere ist die Fläche, die äußeren ihr Schatten */
.sections__striche {
  width: 1.3rem;
  height: var(--line);
  background: var(--ink);
  box-shadow: 0 -6px 0 var(--ink), 0 6px 0 var(--ink);
}

@supports selector(:popover-open) {
  @media (max-width: 77.99rem) {
    .sections::after { display: none; }

    .sections__schalter {
      display: flex;
      margin-left: auto;
    }

    .sections__inner:not(:popover-open) { display: none; }

    .sections__inner:popover-open {
      position: fixed;
      inset: 0 0 auto;
      max-height: 100dvh;
      overflow-y: auto;
      flex-direction: column;
      gap: 0;
      padding: 0 var(--gutter) 1.2rem;
      background: var(--paper);
      border-bottom: var(--bar) solid var(--ink);
    }

    .sections__inner::backdrop { background: rgb(22 23 26 / 0.45); }

    .sections__zu {
      display: flex;
      align-self: flex-end;
      padding-block: 1.1rem;
    }

    .sections__inner .sections__link {
      padding: 1rem 0.6rem;
      margin: 0;
      font-size: 1rem;
      border-bottom: var(--hair) solid var(--rule-thin);
    }

    .sections__inner .sections__link[aria-current="page"] {
      border-bottom: var(--line) solid var(--ink);
    }
  }
}

/* --- Doppelseitiger Satz ------------------------------------------------ */

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

@media (min-width: 56rem) {
  .spread { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .spread--narrow-first { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .spread--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Spalten wie im Blattsatz — nur da, wo genug Platz ist */
@media (min-width: 62rem) {
  .columns-2 { columns: 2; column-gap: var(--gap); column-rule: var(--hair) solid var(--rule-thin); }
  .columns-2 > * { break-inside: avoid; }
}

/* --- Ressortkopf --------------------------------------------------------- */

.ressort {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  border-bottom: var(--line) solid var(--ink);
  padding-bottom: 0.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
}

/* --- Impressumsfuß -------------------------------------------------------- */

.colophon {
  border-top: var(--bar) solid var(--ink);
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem);
}

.colophon__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.8rem, 4vw, 3rem);
}

.colophon__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  font-size: 0.98rem;
}

.colophon__list a { text-decoration: none; }
.colophon__list a:hover { background: var(--cyan); }


/* E-Mail-Adressen im Fuß nur an der vorgesehenen Stelle umbrechen (<wbr> nach dem @),
   nicht mitten im Domainnamen. */
.mailto-umbruch {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}