/* Busverkehr Maerkisch-Oderland - modern responsive theme (2026 refresh)
   Brand: BMO blue #004a99, DB red #d5001c, light blue #dceaf7 */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1c2733;
  background: #eef1f5;
}
img { max-width: 100%; height: auto; border: 0; }
a { color: #004a99; }
a:hover { color: #d5001c; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* ---------- header ---------- */
.site-header { background: #fff; border-bottom: 4px solid #d5001c; }
.brandbar { padding: 14px 16px 10px; }
.brandbar img { display: block; width: 100%; max-width: 800px; margin: 0 auto; }

/* ---------- navigation ---------- */
.mainnav { background: #004a99; }
.mainnav .wrap { display: flex; flex-wrap: wrap; align-items: stretch; padding: 0 8px; }
.mainnav a.top, .mainnav details.dd > summary {
  display: block;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.mainnav a.top:hover, .mainnav details.dd > summary:hover,
.mainnav a.top.active, .mainnav details.dd.active > summary {
  background: #003a78;
  color: #fff;
}
.mainnav details.dd { position: relative; }
.mainnav details.dd > summary { list-style: none; }
.mainnav details.dd > summary::-webkit-details-marker { display: none; }
.mainnav details.dd > summary::after { content: " \25BE"; font-size: 11px; }
.mainnav details.dd[open] > summary { background: #003a78; }
.mainnav details.dd > ul {
  position: absolute;
  left: 0; top: 100%;
  z-index: 50;
  min-width: 260px;
  margin: 0; padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid #c6d3e0;
  border-top: 3px solid #d5001c;
  box-shadow: 0 8px 22px rgba(10, 30, 60, .18);
}
.mainnav details.dd > ul a {
  display: block;
  padding: 9px 16px;
  color: #17293d;
  text-decoration: none;
  font-size: 14.5px;
}
.mainnav details.dd > ul a:hover { background: #dceaf7; color: #004a99; }

/* ---------- notice ticker ---------- */
.notice {
  background: #fff5cc;
  border-bottom: 1px solid #e6d489;
  color: #5c4a00;
  font-weight: 600;
  padding: 10px 16px;
  text-align: center;
  font-size: 15px;
}

/* ---------- content ---------- */
main.wrap { padding: 26px 16px 10px; }
.card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(15, 35, 65, .08);
  padding: 28px 32px;
  overflow-x: auto;
}
.pagetitle {
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 3px solid #dceaf7;
  color: #004a99;
  font-size: 26px;
  line-height: 1.25;
}
.section + .section { margin-top: 26px; padding-top: 22px; border-top: 1px dashed #c9d6e4; }
.hero img { display: block; margin: 0 auto; border-radius: 8px; }

/* legacy content classes, restyled */
.content h2, .h2 { color: #004a99; font-size: 20px; margin: 18px 0 8px; }
.large, .x-large { font-size: 16px; }
.blaBold, .bluBold { color: #004a99; font-weight: 700; }
.redBold { color: #d5001c; font-weight: 700; }
.nobr { white-space: normal; }
.linie { border-top: 1px solid #c9d6e4; }
.doppellinie { border-top: 3px double #c9d6e4; }
.content table { border-collapse: collapse; max-width: 100%; }
.content td, .content th { padding: 6px 10px; vertical-align: top; }
.content ul { padding-left: 22px; }
.linkcard {
  display: inline-block;
  background: #004a99;
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 6px;
  margin: 8px 0;
}
.linkcard:hover { background: #d5001c; }

/* ---------- footer ---------- */
.site-footer {
  margin-top: 34px;
  background: #17293d;
  color: #c9d6e4;
  font-size: 14px;
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px;
}
.site-footer a { color: #fff; text-decoration: none; margin-right: 18px; }
.site-footer a:hover { color: #ffd3d9; text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .mainnav .wrap { flex-direction: column; padding: 0; }
  .mainnav details.dd > ul { position: static; border: 0; border-left: 4px solid #d5001c; box-shadow: none; background: #f4f8fc; }
  .card { padding: 20px 16px; }
  .pagetitle { font-size: 22px; }
  .site-footer .wrap { flex-direction: column; align-items: flex-start; }
}