/*
 * stau.info site styles (redesign, see REDESIGN.md).
 * Loaded by the Zend app (through stauInfo.php) and by the WordPress theme under /nachrichten.
 * Header, footer, layout and components are shared; the legacy section at the end maps the
 * class names of the older views onto the new look.
 */

/* ---------- Tokens ---------- */
:root {
  --navy: #003a72;
  --blue: #0066ad;
  --blue-50: #e8f1fa;
  --link: #0059a0;
  --ground: #eef1f5;
  --surface: #fff;
  --line: #d9dee5;
  --line-soft: #e3e7ec;
  --ink: #17202b;
  --ink-strong: #0f1a26;
  --muted: #566273;
  --red: #b0102a;
  --red-50: #fdecee;
  --orange: #8a4300;
  --orange-50: #fff1e3;
  --green: #1f7a3a;
  --yellow: #f6c700;
  --star: #f2a900;
  --star-hover: #d98b00;
  --star-empty: #cdd3db;
  --radius: 10px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--navy); text-decoration: underline; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; color: var(--ink-strong); letter-spacing: -.01em; }
h1 { font-size: 30px; font-weight: 800; }
h2 { font-size: 20px; font-weight: 700; }
h3 { font-size: 17px; font-weight: 700; }
@media (max-width: 576px) { h1 { font-size: 24px; } }
/* section titles of the cards: a short blue bar under the heading */
.card > h2, .card__head h2, .list-head h1, .prose h2, #leftArea:not(.stack) > h2 {
  padding-bottom: 10px; background: linear-gradient(var(--blue), var(--blue)) left bottom / 40px 3px no-repeat;
}
.list-head { margin-bottom: 20px; }
.list-head h1 { margin-bottom: 12px; }
.list-head p { margin: 0; color: #3b4654; }
p { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--line-soft); margin: 16px 0; clear: both; }
button, input, select, textarea { font: inherit; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: #fff; padding: 8px 12px; }
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Header ---------- */
/* white top bar (the logo is made for a light background), navy nav bar below */
.site-header { background: var(--surface); }
.site-header__inner { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.site-header__top .site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 12px; padding-bottom: 12px; }
.site-logo { display: block; flex: none; }
.site-logo img { display: block; height: 44px; width: auto; padding: 0; }
.site-search { display: flex; flex: 0 1 340px; }
.site-search input {
  flex: 1; min-width: 0; height: 44px; padding: 0 12px; font-size: 15px;
  border: 2px solid var(--blue); border-right: 0; border-radius: 6px 0 0 6px;
}
.site-search button {
  height: 44px; border: 0; border-radius: 0 6px 6px 0; padding: 0 16px;
  background: var(--navy); color: #fff; font-weight: 600; cursor: pointer;
}
.site-search button:hover { background: var(--blue); }
.site-nav { background: var(--navy); }
.site-nav ul { display: flex; gap: 4px; margin: 0 auto; list-style: none; overflow-x: auto; scrollbar-width: none; }
.site-nav ul::-webkit-scrollbar { display: none; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px;
  color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.site-nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
.site-nav a[aria-current] { border-bottom-color: #fff; background: rgba(255, 255, 255, .12); }
@media (max-width: 700px) {
  .site-header__inner { padding: 0 12px; }
  .site-header__top .site-header__inner { padding-top: 8px; padding-bottom: 8px; }
  .site-logo img { height: 34px; }
  .site-search { flex: 1 1 100%; }
  /* phones: all entries visible, wrapped into full-width rows instead of a scrolling strip */
  .site-nav ul { flex-wrap: wrap; gap: 0; overflow: visible; padding: 0; }
  .site-nav li { flex: 1 1 auto; }
  .site-nav a { display: flex; justify-content: center; min-height: 44px; padding: 0 10px; font-size: 14px; }
}

/* ---------- Page frame ---------- */
.site-frame { display: flex; justify-content: center; gap: 20px; padding: 16px 20px 48px; }
/* r89 fills #r89-skyscraper with a 300×600 half page ad; narrower rails clip it. Below 1600px the
   content column would get too narrow next to two 300px rails, so the rails go. */
.site-frame__rail { flex: 0 0 300px; }
.site-frame__rail .ad-slot { position: sticky; top: 16px; margin: 0; }
@media (max-width: 1599px) { .site-frame__rail { display: none; } }
.site-frame__main { flex: 0 1 1080px; min-width: 0; }
@media (max-width: 700px) { .site-frame { padding: 8px 0 32px; } }

.breadcrumbs ol {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none;
  font-size: 14px; color: var(--muted);
}
.breadcrumbs li + li::before { content: "›"; margin-right: 6px; color: #8d99a8; }
@media (max-width: 700px) { .breadcrumbs ol { padding: 0 12px; margin-bottom: 8px; } }

/* two columns: #leftArea (main) and #rightArea (sidebar). The CMS text and FAQ (#cmsContent,
   #faqContent, also inside #content) continue the main column, so a tall sidebar never leaves a gap
   under a short main column. Below ~900px everything stacks, the sidebar last.
   The sidebar is 336px: r89 serves the 336×280 large rectangle into its rectangle slot. */
#content {
  display: grid; grid-template-columns: minmax(0, 1fr) 336px; grid-template-rows: auto auto auto 1fr;
  column-gap: 24px; align-items: start; overflow-wrap: anywhere; /* long URLs as link text */
}
#content > * { grid-column: 1; min-width: 0; }
#content > #rightArea { grid-column: 2; grid-row: 1 / -1; }
#content > #cmsContent, #content > #faqContent { margin-top: 24px; }
#content > #cmsContent:first-child { margin: 0 0 24px; } /* short CMS text as intro above the content */
#content:not(:has(> #rightArea)) { grid-template-columns: minmax(0, 1fr); } /* pages without sidebar */
#rightArea { display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 923px) {
  #content { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
  #content > #cmsContent, #content > #faqContent, #content > #cmsContent:first-child { margin: 0; }
  #content > #rightArea { order: 1; } /* main column (incl. CMS text, FAQ) first, sidebar last */
}

/* default: the main column is one white card; .stack makes it a column of cards instead */
#leftArea, .card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
}
#leftArea.stack { background: none; border: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.card > :last-child { margin-bottom: 0; }
.card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.card__head h2 { margin-bottom: 12px; }
#rightArea .card { padding: 20px; }
#rightArea .card h2 { font-size: 18px; }
@media (max-width: 700px) {
  #leftArea, .card { border-radius: 0; border-left: 0; border-right: 0; padding: 16px; }
  #content, #rightArea, #leftArea.stack { gap: 12px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: #cfe0f2; font-size: 14px; }
.site-footer a { color: #fff; }
.site-footer__cols {
  max-width: 1080px; margin: 0 auto; padding: 36px 20px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px;
}
.site-footer h2 { margin: 0 0 10px; color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.site-footer__legal {
  max-width: 1080px; margin: 0 auto; padding: 16px 20px; border-top: 1px solid rgba(255, 255, 255, .18);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px;
}
.site-footer__extra { max-width: 1080px; margin: 0 auto; padding: 0 20px 16px; }
/* room for r89's fixed footer ad (desktop push ad about 95px, mobile sticky up to 100px), so it
   doesn't cover the legal links at the end of the page */
.site-footer { padding-bottom: 110px; }

/* ---------- Components ---------- */
/* road signs */
.road {
  display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 32px; padding: 0 10px;
  border-radius: 7px; font-weight: 700; font-size: 15px; line-height: 1; white-space: nowrap;
  background: var(--blue); color: #fff; box-shadow: inset 0 0 0 2px var(--blue), inset 0 0 0 4px #fff;
}
a.road:hover { color: #fff; text-decoration: none; filter: brightness(1.1); }
.road--b { background: var(--yellow); color: #111; box-shadow: inset 0 0 0 2px #111; }
a.road--b:hover { color: #111; }
.road--l { background: #fff; color: #111; box-shadow: inset 0 0 0 2px #111; } /* white, as in the design: yellow is for Bundesstraßen */
a.road--l:hover { color: #111; }
.road--xl { min-width: 96px; height: 60px; font-size: 30px; border-radius: 12px; box-shadow: inset 0 0 0 3px var(--blue), inset 0 0 0 6px #fff; }
.road--xl.road--b, .road--xl.road--l { box-shadow: inset 0 0 0 3px #111; }
/* list pages: all roads of a type as a grid of signs */
.road-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.road-grid .road { width: 100%; }
.roads { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

/* road tiles (homepage) */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tile { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); }
.tile:hover { border-color: var(--blue); color: var(--ink); text-decoration: none; }
.tile small { color: var(--muted); font-size: 13px; }

/* chips, filters */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border: 1px solid #c5ccd6; border-radius: 999px; background: #fff; color: var(--ink); font-size: 14px;
}
.chip:hover { border-color: var(--blue); color: var(--ink); text-decoration: none; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 1px solid #c5ccd6; border-radius: 6px; background: #fff; color: var(--ink);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.btn:hover { border-color: var(--blue); }
.btn--primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--blue); color: #fff; text-decoration: none; }
.btn--share { background: var(--green); border-color: var(--green); color: #fff; }
.btn--share:hover { color: #fff; text-decoration: none; }
@media (min-width: 577px) { .report__share { display: none; } }
.btn .count { color: var(--muted); font-weight: 400; }

/* hero search (homepage) */
.hero h1 { margin-bottom: 8px; }
.hero__intro { color: #3b4654; font-size: 17px; }
.hero__search { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 14px; }
.hero__search input { flex: 1 1 280px; min-height: 52px; padding: 0 16px; border: 2px solid var(--blue); border-radius: 8px; font-size: 17px; }
.hero__search button { min-height: 52px; padding: 0 24px; border: 0; border-radius: 8px; background: var(--navy); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; }
.hero__search button:hover { background: var(--blue); }
.hero__nearby { margin: 0 0 14px; border-color: var(--blue); color: var(--navy); }
.hero__nearby:hover { background: var(--blue-50); color: var(--navy); text-decoration: none; }

/* page title with road sign (road pages) */
.road-title { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.road-title h1 { margin: 0; }
.road-title p { margin: 4px 0 0; color: #3b4654; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 20px; }
.stat { border: 1px solid var(--line-soft); border-radius: 8px; padding: 12px 14px; }
.stat strong { display: block; font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { font-size: 13px; color: var(--muted); }
.stat--stau { border-color: #f3b8c1; }
.stat--stau strong { color: var(--red); }
.stat--bau strong { color: var(--orange); }
@media (max-width: 700px) {
  .road-title { gap: 12px; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .stat { padding: 8px 10px; }
  .stat strong { font-size: 22px; }
}

/* traffic reports */
.reports { margin: 0; }
.report {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 16px;
  padding: 18px 0; border-top: 1px solid var(--line-soft);
}
.reports > .report:first-child { border-top: 0; padding-top: 4px; }
.report__road { padding-top: 2px; }
.report__title { font-size: 17px; margin: 0; }
.report__title a { color: var(--ink-strong); }
.report__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0;
  font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.report__text { font-size: 15px; margin-bottom: 10px; overflow-wrap: anywhere; }
.report__text .alertSigns { display: inline-block; vertical-align: middle; margin-right: 4px; }
.report__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.report__comments { margin-top: 10px; padding: 12px; border-radius: 8px; background: var(--ground); font-size: 15px; }
.report__comments[hidden] { display: none; }
.comment-alert:empty { display: none; }
.comment-alert { margin-bottom: 10px; padding: 8px 10px; border-radius: 6px; border-left: 4px solid var(--blue); background: var(--surface); font-size: 14px; font-weight: 600; }
.comment-alert--ok { border-left-color: var(--green); background: #e9f5ec; color: var(--green); }
.comment-alert--error { border-left-color: var(--red); background: var(--red-50); color: var(--red); }
.comment-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.comment { padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface); }
.comment[hidden] { display: none; }
.comment__time { display: block; margin-bottom: 2px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.comment__text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.comment-empty { color: var(--muted); }
.comment-more { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-weight: 600; cursor: pointer; }
.comment-more:hover { text-decoration: underline; }
.comment-more[hidden] { display: none; }
.comment-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.comment-form textarea { width: 100%; padding: 8px; border: 1px solid #c5ccd6; border-radius: 6px; }
.comment-form .btn { align-self: flex-start; }
.report-none { padding: 12px 0; color: var(--muted); }
.badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.3; }
.badge--stau { background: var(--red-50); color: var(--red); }
.badge--bau { background: var(--orange-50); color: var(--orange); }
.badge--sperrung { background: var(--ink); color: #fff; }
.badge--info { background: var(--blue-50); color: var(--navy); }
@media (max-width: 576px) {
  .report { grid-template-columns: minmax(0, 1fr); }
  .report__road { display: none; }
  .report__actions .btn { flex: 1 1 auto; justify-content: center; padding: 0 10px; font-size: 13px; }
}

/* rest area / truck stop pages (Stauinfo_FactSheet) */
.place-head__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 24px; margin: 0 0 16px; }
.facts > div { padding: 10px 0; border-top: 1px solid var(--line-soft); }
.facts dt { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-size: 15px; overflow-wrap: anywhere; }
.facts a[href^="tel:"] { white-space: nowrap; }
.factsheet > :last-child { margin-bottom: 0; }
.flags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; padding: 0; list-style: none; }
.flags li {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: 999px;
  background: #e9f5ee; color: #17572b; font-size: 14px; font-weight: 600;
}
.flags li::before { /* check mark */
  content: ""; width: 12px; height: 7px; margin-top: -3px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.logos .serviceCards { float: none; padding: 0; display: inline-block; border: 1px solid var(--line-soft); border-radius: 4px; background-color: #fff; }
.logos .chip { min-height: 28px; font-size: 13px; }
.factsheet .stats { margin-top: 4px; }

/* tunnel, bridge, airport lists */
.poi-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; align-items: start; margin: 0; padding: 0; list-style: none; }
.poi-item { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; }
.poi-item:hover { border-color: var(--blue); }
.poi-item__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.poi-item__name { flex: 1 1 auto; font-weight: 700; font-size: 16px; color: var(--ink-strong); }
.poi-item .road { min-width: 44px; height: 26px; font-size: 13px; }
.poi-item p { margin: 0; font-size: 14px; color: #3b4654; line-height: 1.45; }

/* link lists */
.link-list { margin: 0; padding: 0; list-style: none; }
.link-list li { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: 15px; }
.link-list li:first-child { border-top: 0; }
.link-list small { color: var(--muted); font-size: 13px; }
/* Rastplätze and Autohöfe in the sidebar: the blue service sign (fuel pump, fork and knife) before each entry, like the old site */
.link-list--sign li { justify-content: flex-start; align-items: center; }
.link-list--sign li::before { content: ""; flex: none; width: 48px; height: 26px; background: url(/img/sign-service.svg) center / contain no-repeat; }
.link-list--sign li small { margin-left: auto; text-align: right; }
.link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.link-grid--narrow { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

/* FAQ */
.faq details { border-top: 1px solid var(--line-soft); }
.faq summary { display: flex; align-items: center; min-height: 44px; padding: 10px 0; font-weight: 700; cursor: pointer; }
.faq details > div { padding-bottom: 12px; color: #3b4654; }
.faq details p { margin: 0; }
.faq__updated { margin: 12px 0 0; font-size: 14px; color: var(--muted); }

/* prose (CMS text, WordPress articles): text keeps a readable line length, tables use the full width */
.prose { font-size: 16px; line-height: 1.65; color: #26313d; }
.prose p, .prose ul, .prose ol, .prose h2, .prose h3, .prose h4, .prose blockquote { max-width: 80ch; }
.prose h2 { font-size: 24px; margin: 1.8em 0 .7em; }
.prose h3 { font-size: 18px; margin: 1.6em 0 .5em; color: var(--navy); }
.prose h4 { font-size: 16px; margin: 1.4em 0 .4em; color: var(--navy); }
.prose > :first-child { margin-top: 0; }
.prose strong { color: var(--ink-strong); }

/* lists: blue markers, a little air between entries */
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.prose li { margin-bottom: .35em; padding-left: .2em; }
.prose li::marker { color: var(--blue); font-weight: 700; }
.prose ul > li::marker { content: "▪  "; font-size: .9em; }
.prose ol > li::marker { content: counter(list-item) ".  "; }
/* many short entries (set by Stauinfo_CmsContent) */
.prose .list-columns { max-width: none; columns: 3 180px; column-gap: 32px; }
.prose .list-columns li { break-inside: avoid; }
/* entries naming federal states, linked (set by Stauinfo_CmsContent) */
.prose .list-tiles {
  max-width: none; padding: 0; margin: .6em 0 1.4em; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px;
}
.prose .list-tiles li { margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 15px; line-height: 1.4; }
.prose .list-tiles li::marker { content: none; }
.prose .list-tiles a { font-weight: 700; }
/* road numbers as signs (set by Stauinfo_CmsContent) */
.prose .roads { max-width: none; padding: 0; margin: .4em 0 1.4em; }
.prose .roads li { margin: 0; padding: 0; }
.prose .roads li::marker { content: none; }

/* tables (Stauinfo_CmsContent wraps them in .table-scroll and moves the header into <thead>) */
.table-scroll { overflow-x: auto; margin: 1.2em 0 1.6em; border: 1px solid var(--line); border-radius: 8px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.5; }
.prose caption {
  caption-side: top; text-align: left; padding: 12px 14px; font-weight: 700; color: var(--ink-strong);
  background: var(--blue-50); border-bottom: 1px solid var(--line);
}
.prose th, .prose td {
  padding: 10px 14px; text-align: left; vertical-align: top; border: 0; border-top: 1px solid var(--line-soft);
  hyphens: auto; overflow-wrap: break-word; /* long German words hyphenate instead of widening the table */
}
.prose thead th { background: var(--navy); color: #fff; font-weight: 600; font-size: 14px; border-top: 0; white-space: normal; }
.prose tbody tr:first-child > * { border-top: 0; }
.prose tbody th { font-weight: 700; color: var(--ink-strong); background: none; }
.prose tbody tr:nth-child(even) { background: #f7f9fb; }
.prose tbody tr:hover { background: var(--blue-50); }
.prose td p { margin: 0 0 .4em; max-width: none; }
.prose td p:last-child { margin-bottom: 0; }
.prose td ul, .prose td ol { margin: 0; padding-left: 1.1em; font-size: 14px; }
.prose td li { margin-bottom: .15em; }
.prose :is(td, th) .road { min-width: 46px; height: 28px; font-size: 14px; }
.prose :is(td, th):has(> .road) { white-space: nowrap; width: 1%; }
.prose td:has(ul, ol) { min-width: 12em; }
.prose thead th { hyphens: manual; }
@media (max-width: 576px) {
  .prose th, .prose td { padding: 8px 10px; font-size: 14px; }
  .prose .list-columns { columns: 2; column-gap: 20px; }
  /* tables with a header: one block per row, the column name above each value */
  .prose .cms-table--labelled thead { display: none; }
  .prose .cms-table--labelled, .prose .cms-table--labelled tbody,
  .prose .cms-table--labelled tr, .prose .cms-table--labelled tbody :is(td, th) { display: block; width: auto; }
  /* a table-caption inside a block table shrinks to one character per line */
  .prose .cms-table--labelled caption { display: block; }
  .prose .cms-table--labelled tr { padding: 10px 12px; border-top: 1px solid var(--line); }
  .prose .cms-table--labelled tbody tr:first-child { border-top: 0; }
  .prose .cms-table--labelled tbody :is(td, th) { padding: 3px 0; border: 0; white-space: normal; min-width: 0; }
  .prose .cms-table--labelled tbody th { font-size: 15px; }
  .prose .cms-table--labelled tbody [data-empty] { display: none; }
  .prose .cms-table--labelled tbody :is(td, th)[data-label]::before {
    content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: .04em;
  }
  .prose .cms-table--labelled tbody :is(td, th):has(> .road)::before,
  .prose .cms-table--labelled tbody th::before { display: none; }
  /* tables without a header (a grid of terms, e.g. the homepage hazards): cells as two-column tiles */
  .prose .cms-table:not(.cms-table--labelled) { display: block; }
  .prose .cms-table:not(.cms-table--labelled) caption { display: block; }
  /* 1px gap on a line-coloured background draws the grid lines */
  .prose .cms-table:not(.cms-table--labelled) tbody {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-soft);
  }
  .prose .cms-table:not(.cms-table--labelled) tr { display: contents; }
  .prose .cms-table:not(.cms-table--labelled) td { display: block; border: 0; background: #fff; }
}

/* ---------- Star rating ---------- */
/*
 * The app's rating bar (Application_Model_Rating) and GD Star Rating under /nachrichten draw the
 * same stars. Both have a bar of empty stars (ul.unit-rating / .gdouter) that holds the average
 * (li.current-rating / .gdinner) and the vote links, which fill up to star n on hover. One SVG star
 * (/img/star.svg) is the bar's mask, so the coloured backgrounds inside show as stars, sharp at any
 * size. --u is the width of one star, the same unit the PHP side uses for the inline widths.
 * The plugin's own sprites are overridden with !important: its rules are more specific and some
 * already use !important.
 */
.unit-rating,
.starsbar .gdouter {
  -webkit-mask: url(/img/star.svg) 0 0 / var(--u) var(--u) repeat-x;
  mask: url(/img/star.svg) 0 0 / var(--u) var(--u) repeat-x;
  background: var(--star-empty) !important;
}
.unit-rating .current-rating,
.starsbar .gdouter .gdinner,
.starsbar .gdcurrent { background: var(--star) !important; }
.unit-rating a:is(:hover, :focus-visible),
.starsbar .gdouter .gdsr_rating_as a[class]:hover { background: var(--star-hover) !important; outline: none; }
/* while choosing, only the stars up to the pointer are filled */
.unit-rating:has(a:is(:hover, :focus-visible)) .current-rating,
.starsbar .gdouter:has(a:hover) .gdinner { visibility: hidden; }

/* app: 5 stars of 30px; the links sit side by side and widen to cover stars 1..n on hover */
.ratingblock { padding-top: 4px; }
.ratingblock p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.ratingblock .thanks { color: var(--green); font-weight: 600; }
.unit-rating { --u: 30px; position: relative; height: var(--u); margin: 0; padding: 0; list-style: none; }
.unit-rating li { float: left; margin: 0; padding: 0; text-indent: -9999px; }
.unit-rating .current-rating { position: absolute; top: 0; left: 0; z-index: 1; height: var(--u); }
.unit-rating li a {
  position: absolute; top: 0; z-index: 2; display: block; width: var(--u); height: var(--u);
  text-indent: -9999px;
}
.unit-rating a:is(:hover, :focus-visible) { left: 0 !important; }
.unit-rating a.r1-unit { left: 0; }
.unit-rating a.r2-unit { left: 30px; }
.unit-rating a.r3-unit { left: 60px; }
.unit-rating a.r4-unit { left: 90px; }
.unit-rating a.r5-unit { left: 120px; }
.unit-rating a.r2-unit:is(:hover, :focus-visible) { width: 60px; }
.unit-rating a.r3-unit:is(:hover, :focus-visible) { width: 90px; }
.unit-rating a.r4-unit:is(:hover, :focus-visible) { width: 120px; }
.unit-rating a.r5-unit:is(:hover, :focus-visible) { width: 150px; }

/* GD Star Rating: the star size comes from its size class */
.starsbar.gdsr-size-12 { --u: 12px; }
.starsbar.gdsr-size-16 { --u: 16px; }
.starsbar.gdsr-size-20 { --u: 20px; }
.starsbar.gdsr-size-24 { --u: 24px; }
.starsbar.gdsr-size-30 { --u: 30px; }
.starsbar.gdsr-size-46 { --u: 46px; }

/* ---------- Staus in Ihrer Nähe (/mobile) ---------- */
.area-meta { margin: 4px 0 14px; color: var(--muted); }
.area-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.area-actions .btn[hidden] { display: none; }

/* ---------- School holidays ([schulferien] in CMS texts, Stauinfo_SchoolHolidays) ---------- */
.prose .holiday-list { margin: 0; padding: 0; list-style: none; max-width: none; }
.prose .holiday-list li { margin: 0; padding: 2px 0; white-space: nowrap; }
.prose .holiday-list li::marker { content: none; }
.holiday-name { display: inline-block; min-width: 9.5em; font-weight: 600; }
.holiday-now { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #e6f4ea; color: var(--green); font-size: 12px; font-weight: 700; }
.prose .holiday-source { margin-top: 6px; color: var(--muted); font-size: 13px; }
@media (max-width: 576px) { .prose .holiday-list li { white-space: normal; } }

/* ---------- Ad slots ---------- */
/* r89 fills the inner div; the wrapper keeps the space reserved so nothing jumps when the ad loads */
.ad-slot { display: flex; justify-content: center; align-items: center; margin: 0 auto; max-width: 100%; overflow: hidden; }
.ad-slot--leaderboard { min-height: 90px; }
.ad-slot--rectangle { min-height: 250px; }
.ad-slot--hpa { min-height: 600px; }
.ad-slot--sky { min-height: 600px; width: 300px; align-items: flex-start; }
.ad-slot--mobile-top { min-height: 100px; }
.ad-slot--mobile-rectangle { min-height: 250px; }
.reports > .ad-slot { padding: 18px 0; border-top: 1px solid var(--line-soft); }
/* not sticky: r89/Outbrain append a smartfeed into #rightArea after this slot, a sticky slot slid over it */
/* r89 decides by viewport too; these switch the reserved space at the same 576px breakpoint */
@media (max-width: 576px) { .ad-slot--desktop { display: none; } }
@media (min-width: 577px) { .ad-slot--mobile { display: none; } }

/* ---------- Legacy view classes ---------- */
.clear { clear: both; }
.flleft { float: left; }
.flright { float: right; }
.autobahnTitle { margin: 0; }
.autobahnTitle .h1Special, .h1Special {
  color: var(--ink-strong); margin: 0 0 .6em; padding: 0 0 10px; font-size: 28px; font-weight: 800; text-align: left; border: 0;
  background: linear-gradient(var(--blue), var(--blue)) left bottom / 40px 3px no-repeat;
}
.autobahnTitle h2.h1Special, .h1Special.section-title { font-size: 20px; font-weight: 700; margin-top: 8px; }
@media (max-width: 576px) { .autobahnTitle .h1Special, .h1Special { font-size: 24px; } }
h1.pageHeading { font-size: 30px; }
.tTitle { font-size: 17px; font-weight: 700; color: var(--ink-strong); }
.tTitle a { color: var(--ink-strong); }
.tTime { color: var(--muted); font-size: 14px; }
.tdBottom { padding: 0 0 10px; border-bottom: 1px solid var(--line-soft); }
table { border-collapse: collapse; }
td { vertical-align: top; }
table.staumeldungen { width: 100%; }
table.staumeldungen td { padding: 4px 8px 4px 0; }
table.border td { border: 1px solid var(--line); vertical-align: top; padding: .3em; }
a.dot { display: inline-block; margin-bottom: 2px; }
.list-entry { margin-bottom: .5em; }
.list-entry a.dot { display: inline; }
.page_nav {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding: 0 8px; margin: 2px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--navy); font-weight: 600;
}
.page_nav_active { background: var(--navy); border-color: var(--navy); color: #fff; }
.rastplatz-km { color: var(--muted); }
.sidebar-box { width: auto; }
.sidebar-box-spaced { margin-bottom: 1em; }
.radio-mhz { font-size: 12px; color: var(--muted); }
.wa_btn { display: none; }
.map-embed { position: relative; overflow: hidden; padding-top: 56.25%; border-radius: 8px; }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#map-canvas { width: 100%; max-width: 475px; height: 360px; }
.impressum-body { padding: 0; }
.dsArea li { height: auto; width: auto; text-align: left; }
.dsArea li.no-bullet { list-style-type: none; }
.service-card-icon { float: left; padding-right: 3px; }
.comments-title { font-weight: 700; }
.weather img { margin-top: 5px; }
.top-autobahn { background: none; }

/* CMS block below the content (layout) */
#cmsContent h2, #cmsContent h3 { color: var(--ink-strong); }
#cmsContent img { border-radius: 6px; }

/* consentmanager */
#cmpcookieinfo { max-width: 100%; overflow-x: scroll; }
/* consentmanager's CDN serves /delivery/recall/logos/16433 empty when gzip is accepted (every
   browser), so the recall button shows a broken image; whitelabel/cmplogo.svg is the identical
   file and loads fine. Remove once consentmanager has purged the broken copy. */
#cmpboxrecall .cmpboxrecallicon {
  content: url("https://cdn.consentmanager.net/delivery/whitelabel/cmplogo.svg");
}

/* Impressum, Datenschutz */
.legal-head h1 { margin-bottom: 8px; }
.legal-head > p { margin: 0; color: var(--muted); }
.legal-toc { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.legal-toc h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 10px; }
.legal-toc ol { margin: 0; padding-left: 1.6em; columns: 2 260px; column-gap: 32px; font-size: 15px; }
.legal-toc li { margin-bottom: 6px; break-inside: avoid; }
.legal-toc li::marker { color: var(--blue); font-weight: 700; }
.legal .prose h2 { scroll-margin-top: 16px; }
.legal .prose h2:first-child { margin-top: 0; }
.legal .prose a { overflow-wrap: anywhere; }