/* Diskussion 21: Kastenseite nach Art älterer Bürgerportale.
   Weißer Kasten von 1000 px auf graugrünem Grund, Banner mit Gleisschild, grüne Menüleiste,
   Artikel einspaltig mit gelben Kästen. Schriften PT Sans und PT Sans Narrow, lokal. */

@font-face { font-family: "PT Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("ptsans-normal-basis.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; }
@font-face { font-family: "PT Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("ptsans-normal-erweitert.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "PT Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("ptsans-kursiv-basis.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; }
@font-face { font-family: "PT Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("ptsans-kursiv-erweitert.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "PT Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("ptsans-fett-basis.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; }
@font-face { font-family: "PT Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("ptsans-fett-erweitert.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "PT Sans Narrow"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("ptsansnarrow-fett-basis.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; }
@font-face { font-family: "PT Sans Narrow"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("ptsansnarrow-fett-erweitert.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --grund: #b9c3b2;
  --kastenrand: #a3ae9c;
  --gras: #3b7d23;
  --tanne: #24501a;
  --moos: #dfe7da;
  --zeile: #f3f6f1;
  --linie: #c3ccbd;
  --tinte: #222222;
  --matt: #56634f;
  --verweis: #0f3b7a;
  --signal: #fbeea2;
  --signalrand: #d9b836;
  --text: "PT Sans", "Trebuchet MS", Arial, sans-serif;
  --eng: "PT Sans Narrow", "Arial Narrow", "PT Sans", Arial, sans-serif;
}

html { box-sizing: border-box; background: var(--grund); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, body *, body ::before, body ::after { box-sizing: inherit; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font: 400 1.125rem/1.62 var(--text);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; }

a { color: var(--verweis); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--gras); text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible, .schieber:focus-visible { outline: 3px solid #e0a800; outline-offset: 2px; }
strong, b { font-weight: 700; }
mark { background: var(--signal); color: inherit; padding: 0 .12em; }

.sprungmarke { position: absolute; left: -9999px; top: 0; }
.sprungmarke:focus { left: .6rem; top: .6rem; z-index: 20; background: #fff; color: var(--tinte); padding: .45rem .8rem; }

/* ---------- Kasten ---------- */
.stellwerk {
  max-width: 62.5rem;
  margin: .9rem auto 1.4rem;
  background: #fff;
  border-left: 1px solid var(--kastenrand);
  border-right: 1px solid var(--kastenrand);
}

/* ---------- Kopf: Banner, Leisten ---------- */
.kopfbereich { position: relative; z-index: 3; }
.kopfbild {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 1000 / 180;
  background: #2e3a28 url("../images/kopfbanner-baustelle-2023.jpg") center / cover no-repeat;
}
.schriftzug {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.15rem 1.7rem;
  color: #fff;
  text-decoration: none;
}
.schriftzug:hover { color: #fff; }
.wortmarke { font: 700 3rem/1 var(--eng); letter-spacing: .01em; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.gleisschild { display: block; width: 3.5rem; height: 3.5rem; flex: none; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); }

.hauptleiste { background: var(--gras); }
.hauptleiste ul { list-style: none; margin: 0; padding: 0 0 0 .9rem; display: flex; flex-wrap: wrap; }
.hauptleiste li + li { border-left: 1px solid rgba(255, 255, 255, .3); }
.hauptleiste a {
  display: block;
  padding: .62rem 1.05rem .6rem;
  color: #fff;
  text-decoration: none;
  font: 700 1.1rem/1.2 var(--eng);
}
.hauptleiste a:hover, .hauptleiste a.im-bereich, .hauptleiste a[aria-current] { background: var(--tanne); color: #fff; }

.unterleiste { background: var(--moos); border-bottom: 1px solid var(--linie); }
.unterleiste ul { list-style: none; margin: 0; padding: .4rem 1.9rem .45rem; display: flex; flex-wrap: wrap; gap: .1rem 1.5rem; }
.unterleiste a { display: inline-block; padding: .2rem 0; color: var(--tanne); font-size: 1rem; text-decoration: none; }
.unterleiste a:hover { text-decoration: underline; color: var(--tanne); }
.unterleiste a[aria-current] { color: var(--tinte); font-weight: 700; }

.klappmenue { display: none; }

/* ---------- Textspalte ---------- */
.textspalte { max-width: 49rem; margin: 0 auto; padding: 2.1rem 1.5rem 2.8rem; }
.textspalte::after { content: ""; display: table; clear: both; }
h1, h2, h3 { font-family: var(--eng); font-weight: 700; }
h1 { font-size: 2.5rem; line-height: 1.18; color: var(--tanne); margin: 0 0 .85rem; }
h2 { font-size: 1.78rem; line-height: 1.22; color: var(--gras); margin: 2.3rem 0 .7rem; scroll-margin-top: 1rem; }
h3 { font-size: 1.32rem; line-height: 1.25; margin: 1.7rem 0 .45rem; }
p { margin: 0 0 1rem; }
.einstieg { font-weight: 700; font-size: 1.17rem; line-height: 1.55; margin-bottom: 1.4rem; }

.textspalte ul, .textspalte ol { margin: 0 0 1.2rem; padding-left: 1.5rem; }
.textspalte ul { list-style: square; }
.textspalte li { margin: 0 0 .4rem; padding-left: .15rem; }
.textspalte ul > li::marker { color: var(--gras); }
.textspalte ol > li::marker { color: var(--gras); font-weight: 700; }
.textspalte ul.zweispaltig { columns: 2; column-gap: 2.2rem; }
.textspalte ul.zweispaltig li { break-inside: avoid; }

/* Inhalt nach Art eines Nachschlagewerks */
.inhaltsbox { display: inline-block; min-width: 19rem; max-width: 100%; margin: 0 0 1.4rem; padding: .55rem 1.25rem .75rem; background: #f6f8f4; border: 1px solid var(--linie); font-size: 1rem; line-height: 1.4; }
.inhaltsbox > summary { cursor: pointer; list-style: none; font: 700 1.15rem/1.5 var(--eng); }
.inhaltsbox > summary::-webkit-details-marker { display: none; }
.inhaltsbox > summary::after { content: " [verbergen]"; font: 400 .95rem var(--text); color: var(--verweis); }
.inhaltsbox:not([open]) > summary::after { content: " [anzeigen]"; }
.textspalte .inhaltsbox ol { list-style: none; margin: .35rem 0 0; padding: 0; counter-reset: abschnitt; }
.textspalte .inhaltsbox li { counter-increment: abschnitt; margin: 0; padding: .16rem 0 .16rem 1.5rem; text-indent: -1.5rem; }
.inhaltsbox li::before { content: counter(abschnitt); display: inline-block; width: 1.5rem; text-indent: 0; color: var(--matt); }
.inhaltsbox a { text-decoration: none; }
.inhaltsbox + h2 { margin-top: 1.1rem; }
.inhaltsbox a:hover { text-decoration: underline; }

/* Gelbe Kästen mit Fakten */
.infokasten { float: right; width: 16.5rem; margin: .35rem 0 1.1rem 1.7rem; padding: .8rem 1rem .85rem; background: var(--signal); border: 1px solid var(--signalrand); font-size: 1rem; line-height: 1.42; }
.kastentitel { font: 700 1.14rem/1.25 var(--eng); margin: 0 0 .45rem; }
.infokasten p { margin: 0 0 .5rem; }
.infokasten dl { margin: 0; }
.infokasten dl div { padding: .34rem 0 .3rem; border-top: 1px solid rgba(150, 118, 10, .32); }
.infokasten dt { margin: 0; }
.infokasten dd { margin: .05rem 0 0; font-weight: 700; }

/* Abbildungen über die ganze Spalte, ohne Unterschrift */
.abbildung { margin: 1.6rem 0 1.8rem; clear: both; }
.abbildung img { display: block; width: 100%; height: auto; }
.abbildung.klein img { width: auto; max-width: 100%; }
.bildpaar { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; align-items: start; }
.bildpaar img { aspect-ratio: 4 / 3; object-fit: cover; }
.querbild .schieber { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.querbild img { width: 100rem; max-width: none; }

/* Tabellen mit grüner Kopfzeile */
.tabellenrahmen { clear: both; overflow-x: auto; margin: 1.4rem 0 1.8rem; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.45; }
caption { caption-side: top; text-align: left; font: 700 1.1rem/1.3 var(--eng); padding: 0 0 .45rem; color: var(--tinte); }
th, td { text-align: left; vertical-align: top; padding: .5rem .7rem; border: 1px solid var(--linie); }
thead th { background: var(--gras); border-color: var(--gras); color: #fff; font-weight: 700; }
tbody tr:nth-child(even) td { background: var(--zeile); }
.erste-fett td:first-child { font-weight: 700; }
.mit-daten td:first-child { white-space: nowrap; }

/* Zitate */
blockquote { display: flow-root; margin: 1.5rem 0 .35rem; padding: .85rem 1.15rem .9rem; background: var(--zeile); border: 1px solid #dbe2d6; font-style: italic; }
blockquote p { margin: 0 0 .65rem; }
blockquote p:last-child { margin-bottom: 0; }
.fundstelle { font-size: 1rem; color: var(--matt); margin: 0 0 1.6rem; }

/* Startseite: Aktuelle Beiträge, Themen */
.textspalte .neuigkeiten { list-style: none; padding: 0; margin: .3rem 0 1.6rem; border-top: 1px solid var(--linie); }
.textspalte .neuigkeiten li { display: grid; grid-template-columns: 6.6rem 1fr; gap: .2rem .9rem; margin: 0; padding: .65rem 0 .7rem; border-bottom: 1px solid var(--linie); }
.neuigkeiten time { color: var(--matt); font-size: 1rem; padding-top: .18rem; }
.neuigkeiten a { font: 700 1.22rem/1.25 var(--eng); }
.anriss { display: block; margin-top: .2rem; font-size: 1rem; line-height: 1.45; color: #3b4436; }
.textspalte .themenraster { list-style: none; padding: 0; margin: .5rem 0 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem 1.8rem; }
.textspalte .themenraster li { display: grid; grid-template-columns: 5rem 1fr; gap: .85rem; align-items: start; margin: 0; padding: 0; }
.themenraster img { display: block; width: 5rem; height: 5rem; }
.themenraster a { font: 700 1.16rem/1.25 var(--eng); }
.themenraster span { display: block; margin-top: .15rem; font-size: 1rem; line-height: 1.42; color: #3b4436; }

/* Artikelende */
.nachtrag { font-style: italic; color: var(--matt); margin-top: 1.6rem; }
.bildrechte { clear: both; margin: 2.4rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--matt); }
.bildrechte a { color: var(--matt); }
.blaettern { clear: both; display: flex; justify-content: space-between; gap: 1rem; margin: 1.6rem 0 0; padding: .6rem .9rem; background: var(--moos); font: 700 1.1rem/1.3 var(--eng); }
.blaettern a { text-decoration: none; color: var(--tanne); }
.blaettern a:hover { text-decoration: underline; }

/* ---------- Fuß ---------- */
.fussleiste { background: var(--tanne); color: #fff; padding: .95rem 1.7rem 1.05rem; font-size: 1rem; line-height: 1.6; }
.fussleiste p { margin: 0; }
.fussleiste a { color: #fff; }
.fussleiste a:hover { color: var(--signal); }

/* ---------- Telefon und schmale Fenster ---------- */
@media (max-width: 760px) {
  body { font-size: 1.0625rem; line-height: 1.6; }
  .stellwerk { margin: 0; border: 0; }
  .kopfbild { aspect-ratio: 5 / 2; background-image: url("../images/kopfbanner-baustelle-2023-schmal.jpg"); }
  .schriftzug { margin: 0 0 .85rem 1rem; gap: .55rem; }
  .wortmarke { font-size: 2.15rem; }
  .gleisschild { width: 2.6rem; height: 2.6rem; border-radius: 5px; }
  .hauptleiste { display: none; }
  .klappmenue { display: block; position: relative; background: var(--gras); }
  .klappmenue > summary { display: flex; align-items: center; gap: .65rem; min-height: 2.9rem; padding: 0 1rem; color: #fff; cursor: pointer; list-style: none; font: 700 1.2rem/1 var(--eng); }
  .klappmenue > summary::-webkit-details-marker { display: none; }
  .striche { width: 1.25rem; height: 1rem; flex: none; }
  .klappmenue[open] > summary { background: var(--tanne); }
  .klappmenue[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 4; background: rgba(16, 26, 12, .45); cursor: default; }
  .klapptafel { position: absolute; left: 0; right: 0; top: 100%; z-index: 6; max-height: 64vh; overflow: auto; padding: .35rem 1rem 1.1rem; background: #fff; border-bottom: 3px solid var(--gras); box-shadow: 0 6px 12px rgba(0, 0, 0, .2); }
  .klapptafel ul { list-style: none; margin: 0; padding: 0; }
  .klapptafel a { display: block; padding: .55rem 0 .5rem; color: var(--tinte); text-decoration: none; border-bottom: 1px solid #e3e9df; }
  .klapptafel a.tafel-start { font: 700 1.12rem/1.3 var(--eng); color: var(--tanne); }
  .klapptafel a[aria-current] { font-weight: 700; color: var(--gras); }
  .tafelgruppe { margin: .9rem 0 .1rem; font: 700 1.12rem/1.3 var(--eng); color: var(--tanne); }
  .tafelgruppe + ul a { padding-left: .9rem; }
  .unterleiste ul { padding: .15rem 1rem .2rem; gap: 0 1.2rem; }
  .unterleiste a { padding: .55rem 0; }
  .textspalte .inhaltsbox li { padding-top: .32rem; padding-bottom: .32rem; }
  .textspalte { padding: 1.35rem 1rem 2.4rem; }
  h1 { font-size: 2rem; line-height: 1.18; }
  h2 { font-size: 1.5rem; margin-top: 2.1rem; }
  h3 { font-size: 1.22rem; }
  .einstieg { font-size: 1.1rem; }
  .inhaltsbox { display: block; min-width: 0; padding: .5rem .9rem .65rem; }
  .infokasten { float: none; width: auto; margin: 1.1rem 0 1.4rem; }
  .bildpaar { grid-template-columns: 1fr; }
  .querbild img { width: 62rem; }
  .textspalte ul.zweispaltig { columns: 1; }
  .textspalte .neuigkeiten li { display: block; }
  .neuigkeiten time { display: block; padding-top: 0; }
  .textspalte .themenraster { grid-template-columns: 1fr; }
  .textspalte .themenraster li { grid-template-columns: 4.2rem 1fr; }
  .themenraster img { width: 4.2rem; height: 4.2rem; }
  blockquote { padding: .8rem .95rem; }
  .fussleiste { padding: .8rem 1rem .9rem; line-height: 2.2; }

  /* Tabellen: schmalere Zellen, Silbentrennung statt Überlauf */
  th, td { padding: .45rem .5rem; -webkit-hyphens: auto; hyphens: auto; }
  .mit-daten td:first-child { white-space: normal; }
  caption { font-size: 1.05rem; line-height: 1.35; }
  /* breite Tabellen: jede Zeile ein Block, Spaltenname vor dem Wert */
  .zeilenweise, .zeilenweise tbody, .zeilenweise tr, .zeilenweise td { display: block; width: auto; }
  .zeilenweise caption { display: block; padding: 0 0 .5rem; }
  .zeilenweise thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  .zeilenweise thead tr, .zeilenweise thead th { display: block; width: 1px; height: 1px; padding: 0; overflow: hidden; }
  .zeilenweise tbody tr { padding: .65rem .7rem .7rem; border: 1px solid var(--linie); border-top-width: 0; }
  .zeilenweise tbody tr:first-child { border-top: 3px solid var(--gras); }
  .zeilenweise td, .zeilenweise tbody tr:nth-child(even) td { padding: 0; border: 0; background: none; -webkit-hyphens: manual; hyphens: manual; }
  .zeilenweise tbody tr:nth-child(even) { background: var(--zeile); }
  .zeilenweise td + td { margin-top: .3rem; }
  .zeilenweise td:first-child { font-weight: 700; white-space: normal; }
  .zeilenweise td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--matt); }
  .zeilenweise td:empty { display: none; }
}

@media print {
  body, html { background: #fff; }
  .hauptleiste, .klappmenue, .unterleiste, .blaettern, .fussleiste { display: none; }
  .stellwerk { border: 0; margin: 0; }
  .kopfbild { aspect-ratio: auto; background: none; }
  .schriftzug { color: var(--tanne); margin: 0 0 1rem; }
  .wortmarke { text-shadow: none; }
}