@charset "utf-8";
/* Busatis – Layout (Theme 1.2: modernisiertes Original-Layout, responsiv) */

:root {
  --blue: #3366cc;
  --blue-light: #7fa6ff;
  --ink: #1d2430;
  --muted: #5b6575;
  --line: #dde2ea;
  --bg: #f3f5f8;
  --site: 1180px;
  --nav: 270px;
  --pad: 32px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
img { border: 0; max-width: 100%; height: auto; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

#site { max-width: var(--site); margin: 0 auto; background: #fff; box-shadow: 0 0 0 1px var(--line); }

/* ------------------------------------------------------------------ Header */
#header { display: flex; align-items: center; gap: 24px; padding: 18px var(--pad) 14px; }
#header .logo img { display: block; width: 220px; height: auto; }
#header_right { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 15px; }
#header_right .lang { display: flex; gap: 4px; }
#header_right .lang a { font-weight: 600; color: var(--muted); padding: 2px 4px; border-bottom: 2px solid transparent; }
#header_right .lang a.active { color: var(--blue); border-bottom-color: var(--blue); }
#header_right .lang a:hover { text-decoration: none; color: var(--blue); }
#searchform { display: flex; margin: 0; }
#searchform input { width: 180px; border: 1px solid var(--line); border-right: 0; border-radius: 4px 0 0 4px; padding: 6px 10px; font: inherit; font-size: 15px; background: #fff; color: var(--ink); }
#searchform input::-webkit-search-cancel-button { display: none; }
#searchform button { display: flex; align-items: center; border: 0; background: var(--blue); color: #fff; padding: 0 11px; border-radius: 0 4px 4px 0; cursor: pointer; }
#searchform button:hover { background: #2a55aa; }

.burger { display: none; margin-left: auto; width: 42px; height: 38px; border: 1px solid var(--line); border-radius: 4px; background: #fff; cursor: pointer; padding: 0; position: relative; }
.burger span, .burger span::before, .burger span::after { position: absolute; left: 10px; width: 20px; height: 2px; background: var(--ink); content: ""; transition: transform .2s, top .2s; }
.burger span { top: 17px; }
.burger span::before { left: 0; top: -6px; }
.burger span::after { left: 0; top: 6px; }
.nav-open .burger span { background: transparent; }
.nav-open .burger span::before { top: 0; transform: rotate(45deg); }
.nav-open .burger span::after { top: 0; transform: rotate(-45deg); }

#topmenu { background: linear-gradient(#2b2b2b, #111); }
#topnavlist { list-style: none; margin: 0; padding: 0 calc(var(--pad) - 14px); display: flex; flex-wrap: wrap; }
#topnavlist a { display: block; color: #fff; padding: 13px 14px; font-size: 15px; }
#topnavlist li.active a, #topnavlist a:hover { color: var(--blue-light); text-decoration: none; }
#topnavlist li.active a { font-weight: 600; }

/* ------------------------------------------- Kopfbereich: Navigation + Bild */
.page-hero { display: grid; grid-template-columns: var(--nav) minmax(0, 1fr); background: #111; }
.page-hero.no-nav { grid-template-columns: minmax(0, 1fr); }
#leftcol { background: var(--blue); padding: 20px 14px 24px; }
#leftnav ul { list-style: none; margin: 0; padding: 0; }
#leftnav a { display: block; color: #fff; padding: 7px 12px; margin: 2px 0; border-radius: 3px; background: rgba(0, 0, 0, .18); font-size: 14px; line-height: 1.35; }
#leftnav a:hover { background: rgba(0, 0, 0, .4); text-decoration: none; }
#leftnav li.active > a { background: rgba(0, 0, 0, .4); }
#leftnav li.active > a::before { content: "\00bb\00a0"; }
#leftnav .leftsubnav { margin: 4px 0 6px 12px; }
#leftnav .leftsubnav a { background: none; padding: 5px 10px; }
#leftnav .leftsubnav a:hover, #leftnav .leftsubnav li.active > a { background: rgba(0, 0, 0, .28); }
#leftnav .leftsubnav-mobile { display: none; }

#pageheaderimage { position: relative; min-height: 180px; background: #1b1f26; }
/* Bild füllt die Höhe der Navigation; Text im Bild steht meist rechts, daher rechtsbündig zuschneiden */
#pageheaderimage > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.page-hero.no-image #pageheaderimage { background: linear-gradient(120deg, #1b1f26 0%, #2c3646 55%, #1b1f26 100%); }
.page-hero.no-image #overview_headertext { position: static; padding: 32px 50px 36px; max-width: 820px; text-shadow: none; }
.page-hero.no-image #overview_headertext a { color: var(--blue-light); }
#overview_headertext { position: absolute; right: 6%; bottom: 10%; left: 40%; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
#overview_headertext h1, #overview_headertext h2 { color: #fff; font-size: 28px; font-weight: 500; line-height: 1.3; margin: 0; }
#overview_headertext p { margin: 0; }

/* ----------------------------------------------- Inhalt (Standardseite) */
/* Standardseite: Navigation (Spalte 1) reicht über Bild- und Inhaltszeile – bei vielen Menüpunkten
   ragt sie wie im Original unter das Bild, das Bild behält sein Seitenverhältnis. */
.page-layout { display: grid; grid-template-columns: var(--nav) minmax(0, 1fr); grid-template-rows: auto 1fr; }
.page-layout > #leftcol { grid-column: 1; grid-row: 1 / 3; align-self: start; min-width: 0;
  min-height: calc((min(100vw, var(--site)) - var(--nav)) * var(--hero-ratio, 0)); }
.page-layout > #pageheaderimage { grid-column: 2; grid-row: 1; min-height: 0; background: #111; }
.page-layout > #pageheaderimage > img { height: auto; }
.page-layout > .page-body { grid-column: 2; grid-row: 2; padding: 0 50px 56px; min-width: 0; }
.page-layout.no-image > .page-body { grid-row: 1 / 3; padding-top: 24px; }
.page-layout.no-nav { grid-template-columns: minmax(0, 1fr); }
.page-layout.no-nav > #pageheaderimage, .page-layout.no-nav > .page-body { grid-column: 1; }
.page-layout.no-nav > #pageheaderimage > img { height: 300px; object-position: center; }
.page-layout.no-nav > .page-body { padding-left: var(--pad); padding-right: var(--pad); }
.page-layout.no-nav.no-image > .page-body { padding-top: 32px; }
#pageheaderlinks { font-size: 13px; color: var(--blue); padding: 8px 0; border-bottom: 1px dotted #777; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
#pageheaderlinks a { color: var(--blue); }
#pageheaderlinks img { width: 14px; height: auto; vertical-align: -2px; margin-right: 4px; }
#maincontent { max-width: 780px; padding-top: 28px; }
#maincontent .news-date { color: var(--muted); font-size: 14px; margin-bottom: 4px; }
#maincontent .abstract { font-weight: 600; margin-bottom: 18px; }

/* ------------------------------------------------------ Übersichtsseiten */
.overview { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; padding: 32px var(--pad) 56px; }
.overview.no-left { grid-template-columns: minmax(0, 1fr); }
.overview > .left { border-right: 1px dotted #999; padding-right: 30px; min-width: 0; overflow: hidden; }
.overview > .left h1 { font-size: 22px; }
.overview > .right { min-width: 0; }
/* 3 Spalten: Teaserbilder sind 267 px breit und bleiben so scharf */
#teasertable { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 32px 26px; }
.overview-main + .overview-main, #teasertable + .overview-main { margin-top: 32px; }

/* ------------------------------------------------------------- Startseite */
#home_sujet_div { background: #111; line-height: 0; }
#home_sujet_div img { display: block; width: 100%; height: auto; }
#home_blackcontent { background: #000; color: #fff; padding: 36px var(--pad) 48px; }
#home_blackcontent .htmlarea-content-body { font-size: 16px; }
#home_blackcontent .htmlarea-content-body h1 { color: #fff; font-size: 28px; font-weight: 500; margin: 0 0 8px; }
#home_blackcontent .htmlarea-content-body h2,
#home_blackcontent .htmlarea-content-body h3 { color: #fff; font-size: 16px; font-weight: 600; }
#home_blackcontent a { color: var(--blue-light); }
#home_rightcol > h2 { color: #fff; font-size: 20px; font-weight: 600; margin: 36px 0 16px; }
.home-news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.home-news-item .img { display: block; overflow: hidden; }
.home-news-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s; }
.home-news-item:hover img { transform: scale(1.03); }
.home-news-item .date { font-size: 13px; color: #b9c2d0; margin-top: 12px; }
.home-news-item h3 { font-size: 18px; line-height: 1.3; margin: 4px 0 8px; }
.home-news-item h3 a { color: var(--blue-light); }
.home-news-item .abstract { margin: 0; font-size: 15px; color: #e8ebf0; }

/* ----------------------------------------------------------------- Footer */
#footer { background: var(--bg); color: #333; text-align: center; font-size: 14px; padding: 18px 16px 30px; border-top: 1px solid var(--line); }
#footer a { color: #333; text-decoration: underline; }
#footer img { vertical-align: -2px; }

/* Alte Inline-Schriftarten aus dem TYPO3-RTE (z. B. font-family: Arial) an die Seitenschrift angleichen */
#maincontent [style*="font-family"], .overview [style*="font-family"], #home_blackcontent [style*="font-family"] { font-family: inherit !important; }
/* … ebenso Schriftgrößen aus Word-Texten (7pt–15pt), die sonst winzig bzw. uneinheitlich wirken */
#maincontent [style*="font-size"], .overview [style*="font-size"] { font-size: inherit !important; }
/* Aufzählungsbild mit relativem Pfad aus dem Datenschutz-Generator */
#maincontent li[style*="bullet.png"] { background-image: url(../images/bullet.png) !important; }
/* Lange URLs/Wörter umbrechen statt die Seite zu verbreitern */
#maincontent, .overview { overflow-wrap: break-word; }
/* Tabellen aus dem alten RTE ohne Klasse: etwas Luft, nie breiter als die Spalte */
#maincontent table:not(.contenttable) { max-width: 100%; border-collapse: collapse; }
#maincontent table:not(.contenttable) td, #maincontent table:not(.contenttable) th { padding: 3px 12px 3px 0; vertical-align: top; }
/* Leere Absätze aus TYPO3 (nur &nbsp;/<br>) als kleiner Abstand statt ganzer Leerzeile */
.busatis-gap { height: .7em; }

/* -------------------------------------------------------- Listen/Sonstiges */
.timeline { border-top: 1px dotted #999; }
.timeline .item { border-bottom: 1px dotted #999; padding: 12px 0; }
.timeline .item table { width: 100%; border-collapse: collapse; }
.timeline .item td { vertical-align: top; }
.timeline .item .img { width: 172px; padding-right: 16px; }
.timeline .item .date { width: 150px; color: var(--blue); font-size: 17px; padding-right: 10px; }
.timeline .item .text { padding-left: 0; }
.timeline .item .category { color: var(--blue); font-size: 17px; }

.newslist .item { border-bottom: 1px dotted #999; padding: 12px 0; }
.newslist .item h2 { margin: 2px 0 4px; }
.newslist .date_str { color: var(--muted); font-size: 14px; }

.sortline { margin-bottom: 8px; }
.sortlink img { border: 1px solid #fff; }

.formular label { display: block; margin-top: 10px; }
fieldset { border: none; }

.busatis-searchpage { display: flex; gap: 8px; margin: 0 0 20px; max-width: 520px; }
.busatis-searchpage input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 4px; padding: 7px 10px; font: inherit; }
.busatis-searchpage button { border: 0; border-radius: 4px; background: var(--blue); color: #fff; padding: 0 16px; font: inherit; cursor: pointer; }
.nav-links { margin-top: 20px; display: flex; gap: 8px; }

.group::after { content: ""; display: table; clear: both; }

/* ------------------------------------------------------------------- Mobil */
@media (max-width: 960px) {
  :root { --nav: 230px; }
  .page-layout > .page-body { padding-left: 32px; padding-right: 32px; }
  .overview { grid-template-columns: 240px minmax(0, 1fr); gap: 28px; }
  #searchform input { width: 140px; }
}

@media (max-width: 760px) {
  :root { --pad: 16px; }
  #site { box-shadow: none; }
  #header { flex-wrap: wrap; gap: 10px; padding: 12px var(--pad); }
  #header .logo img { width: 160px; }
  .burger { display: block; }
  #header_right { display: none; order: 3; width: 100%; margin: 0; padding: 8px 0 4px; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
  #searchform { flex: 1 1 100%; }
  #searchform input { width: 100%; flex: 1; }
  #topmenu { display: none; }
  .nav-open #header_right { display: flex; }
  .nav-open #topmenu { display: block; }
  #topnavlist { flex-direction: column; padding: 0; }
  #topnavlist a { padding: 12px var(--pad); border-top: 1px solid #333; }

  .page-hero, .page-hero.no-nav { display: flex; flex-direction: column-reverse; background: #fff; }
  #leftcol { background: #fff; padding: 12px var(--pad) 0; min-width: 0; }
  #leftnav { min-width: 0; max-width: 100%; }
  #leftnav ul { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  #leftnav li { flex: 0 0 auto; }
  #leftnav a, #leftnav .leftsubnav-mobile a { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 20px; padding: 6px 14px; margin: 0; white-space: nowrap; font-size: 14px; }
  #leftnav a:hover { background: #f1f4f9; }
  #leftnav li.active > a { background: var(--blue); border-color: var(--blue); color: #fff; }
  #leftnav li.active > a::before { content: none; }
  #leftnav .leftsubnav { display: none; }
  #leftnav .leftsubnav-mobile { display: flex; margin-top: 4px; }
  #leftnav .leftsubnav-mobile li.active > a { background: #e8f0fc; border-color: var(--blue); color: var(--blue); }
  #pageheaderimage { min-height: 0; }
  #pageheaderimage > img { height: auto; }
  .page-hero.no-image #pageheaderimage { display: none; }
  .page-hero.no-image:has(#overview_headertext) #pageheaderimage { display: block; }
  .page-hero.no-image #overview_headertext { padding: 20px var(--pad) 24px; }
  #overview_headertext { left: var(--pad); right: var(--pad); bottom: 12px; }
  #overview_headertext h1, #overview_headertext h2 { font-size: 20px; }

  .page-layout { display: flex; flex-direction: column; }
  .page-layout > #pageheaderimage { order: 1; }
  .page-layout > #leftcol { order: 2; min-height: 0; align-self: stretch; }
  .page-layout > .page-body { order: 3; padding: 0 var(--pad) 40px; }
  .page-layout.no-image > .page-body, .page-layout.no-nav.no-image > .page-body { padding-top: 16px; }
  .page-layout.no-nav > #pageheaderimage > img { height: auto; }
  #maincontent { padding-top: 20px; }

  .overview, .overview.no-left { display: flex; flex-direction: column; gap: 28px; padding: 24px var(--pad) 40px; }
  .overview > .left { border-right: 0; padding-right: 0; }
  .overview > .left:not(:only-child) { border-bottom: 1px dotted #999; padding-bottom: 20px; }
  #teasertable { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

  #home_blackcontent { padding: 24px var(--pad) 36px; }
  #home_blackcontent .htmlarea-content-body h1 { font-size: 23px; }
  .home-news { grid-template-columns: 1fr; gap: 24px; }

  .timeline .item table, .timeline .item tbody, .timeline .item tr, .timeline .item td { display: block; width: auto !important; }
  .timeline .item .img { padding: 6px 0; }
}

@media (min-width: 761px) and (max-width: 960px) {
  .home-news { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ Druck */
@media print {
  body { background: #fff; font-size: 11pt; }
  #site { box-shadow: none; max-width: none; }
  #topmenu, #header_right, .burger, #leftcol, #pageheaderlinks, #pageheaderimage, .cc-window, .cc-revoke { display: none !important; }
  .page-layout { display: block; }
  .page-layout > .page-body { padding: 0; }
  .overview { display: block; padding: 0; }
}

/* 1.5.3: Header-Text auf schmalen Bildschirmen im selben Raster wie das Bild – langer Text (z. B. 404-Seite)
   vergrößert das Bildfeld, statt über das Bild hinaus in den Kopfbereich zu laufen. */
@media (max-width: 960px) {
  .page-hero #pageheaderimage:has(#overview_headertext) { display: grid; }
  .page-hero #pageheaderimage:has(#overview_headertext) > img { grid-area: 1 / 1; height: 100%; min-height: 0; }
  .page-hero #pageheaderimage > #overview_headertext { grid-area: 1 / 1; position: relative; inset: auto; align-self: end; margin: 0; padding: 24px var(--pad) 12px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .35)); }
  .page-hero.no-image #pageheaderimage > #overview_headertext { background: none; padding: 20px var(--pad) 24px; }
}

/* ------------------------------------------------------- Barrierefreiheit (1.6.0) */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -100px; z-index: 100000; background: #fff; color: var(--blue); font-weight: 600; padding: 10px 16px; border: 2px solid var(--blue); border-radius: 4px; }
.skip-link:focus { top: 12px; text-decoration: none; }
#content:focus { outline: none; }
.nav-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0; }
.nav-links .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; }
.nav-links .page-numbers.current { background: var(--blue); border-color: var(--blue); color: #fff; }
/* Cookie-Hinweis: Kontrast >= 4.5:1, Link nicht transparent, mobil kompakter */
.cc-window .cc-link { opacity: 1; color: #fff; text-decoration: underline; }
.cc-window .cc-link:hover, .cc-window .cc-link:focus { opacity: 1; color: #fff; }
.cc-window a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cc-window .cc-btn:focus-visible { outline-color: #1d2430; }
@media (max-width: 414px) {
  .cc-window.cc-floating { padding: 12px 16px; font-size: 14px; line-height: 1.45; }
  .cc-window .cc-message { margin-bottom: 8px; }
  .cc-window .cc-btn { padding: 6px 10px; }
}
@media print { .skip-link { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}