:root,
[data-bs-theme=light] {
  --ar-primary: #00467b;
  --ar-primary-rgb: 0, 70, 123;
  --bs-primary: #00467b;
  --bs-primary-rgb: 0, 70, 123;
  --ar-secondary: #edf1f5;
  --ar-secondary-rgb: 237, 241, 245;
  --bs-secondary: #edf1f5;
  --bs-secondary-rgb: 237, 241, 245;
  --ar-warning: #edcb50;
  --ar-warning-rgb: 237, 203, 80;
  --bs-warning: #edcb50;
  --bs-warning-rgb: 237, 203, 80;
  --ar-info: #3f7fca;
  --ar-info-rgb: 63, 127, 202;
  --bs-info: #3f7fca;
  --bs-info-rgb: 63, 127, 202;
  --ar-success: #12a33d;
  --ar-success-rgb: 18, 163, 61;
  --bs-success: #12a33d;
  --bs-success-rgb: 18, 163, 61;
  --ar-danger: #ed5050;
  --ar-danger-rgb: 237, 80, 80;
  --bs-danger: #ed5050;
  --bs-danger-rgb: 237, 80, 80;
  --ar-light: #d4edf5;
  --ar-light-rgb: 212, 237, 245;
  --bs-light: #d4edf5;
  --bs-light-rgb: 212, 237, 245;
  --ar-dark: #121519;
  --ar-dark-rgb: 18, 21, 25;
  --bs-dark: #121519;
  --bs-dark-rgb: 18, 21, 25;
  --ar-link-color: #00467b;
  --ar-link-hover-color: #002d62;
  --bs-link-color: #00467b;
  --bs-link-color-rgb: 0, 70, 123;
  --bs-link-hover-color: #002d62;
  --ar-body-font-family: 'Barlow', sans-serif;
  --ar-heading-font-family: 'Barlow', sans-serif;
  --ar-root-font-size: 1rem;
  --ar-body-font-size: 1rem;
  --ar-border-width: 1px;
  --ar-border-radius: 0rem;
  --ar-border-radius-sm: calc(var(--ar-border-radius) * 0);
  --ar-border-radius-lg: calc(var(--ar-border-radius) * 0);
  --ar-border-radius-xl: calc(var(--ar-border-radius) * 0);
  --ar-border-radius-xxl: calc(var(--ar-border-radius) * 2.25);
}
[data-bs-theme=light] {
  --ar-body-bg: #d4edf5;
  --bs-body-bg: #d4edf5;
  --ar-body-bg-rgb: 212, 237, 245;
  --bs-body-bg-rgb: 212, 237, 245;
  --ar-body-color: #4d4d4d;
  --bs-body-color: #4d4d4d;
  --ar-body-color-rgb: 77, 77, 77;
  --bs-body-color-rgb: 77, 77, 77;
  --ar-secondary-color: #858c97;
  --bs-secondary-color: #858c97;
  --ar-heading-color: #00467b;
  --bs-heading-color: #00467b;
  --ar-border-color: #e3e9ef;
  --bs-border-color: #e3e9ef;
}
[data-bs-theme=light] .card {
  --ar-card-bg: #ffffff;
}
.btn-primary {
  --booost-btn-color: #fff;
  --booost-btn-hover-color: #fff;
  --ar-btn-bg: #00467b;
  --ar-btn-border-color: #00467b;
  --ar-btn-hover-bg: #002d62;
  --ar-btn-hover-border-color: #002d62;
  --ar-btn-active-bg: #002d62;
  --ar-btn-active-border-color: #002d62;
  --ar-btn-disabled-bg: #00467b;
  --ar-btn-disabled-border-color: #00467b;
}
.btn-outline-primary {
  --ar-btn-color: #00467b;
  --ar-btn-border-color: #00467b;
  --ar-btn-hover-bg: #00467b;
  --ar-btn-hover-border-color: #00467b;
  --ar-btn-active-bg: #00467b;
  --ar-btn-active-border-color: #00467b;
  --ar-btn-disabled-color: #00467b;
  --ar-btn-disabled-border-color: #00467b;
}
.btn-secondary {
  --booost-btn-color: #121519;
  --booost-btn-hover-color: #121519;
  --ar-btn-bg: #edf1f5;
  --ar-btn-border-color: #edf1f5;
  --ar-btn-hover-bg: #d4d8dc;
  --ar-btn-hover-border-color: #d4d8dc;
  --ar-btn-active-bg: #d4d8dc;
  --ar-btn-active-border-color: #d4d8dc;
  --ar-btn-disabled-bg: #edf1f5;
  --ar-btn-disabled-border-color: #edf1f5;
}
.btn-outline-secondary {
  --ar-btn-color: #edf1f5;
  --ar-btn-border-color: #edf1f5;
  --ar-btn-hover-bg: #edf1f5;
  --ar-btn-hover-border-color: #edf1f5;
  --ar-btn-active-bg: #edf1f5;
  --ar-btn-active-border-color: #edf1f5;
  --ar-btn-disabled-color: #edf1f5;
  --ar-btn-disabled-border-color: #edf1f5;
}
.btn-warning {
  --booost-btn-color: #121519;
  --booost-btn-hover-color: #121519;
  --ar-btn-bg: #edcb50;
  --ar-btn-border-color: #edcb50;
  --ar-btn-hover-bg: #d4b237;
  --ar-btn-hover-border-color: #d4b237;
  --ar-btn-active-bg: #d4b237;
  --ar-btn-active-border-color: #d4b237;
  --ar-btn-disabled-bg: #edcb50;
  --ar-btn-disabled-border-color: #edcb50;
}
.btn-outline-warning {
  --ar-btn-color: #edcb50;
  --ar-btn-border-color: #edcb50;
  --ar-btn-hover-bg: #edcb50;
  --ar-btn-hover-border-color: #edcb50;
  --ar-btn-active-bg: #edcb50;
  --ar-btn-active-border-color: #edcb50;
  --ar-btn-disabled-color: #edcb50;
  --ar-btn-disabled-border-color: #edcb50;
}
.btn-info {
  --booost-btn-color: #fff;
  --booost-btn-hover-color: #fff;
  --ar-btn-bg: #3f7fca;
  --ar-btn-border-color: #3f7fca;
  --ar-btn-hover-bg: #2666b1;
  --ar-btn-hover-border-color: #2666b1;
  --ar-btn-active-bg: #2666b1;
  --ar-btn-active-border-color: #2666b1;
  --ar-btn-disabled-bg: #3f7fca;
  --ar-btn-disabled-border-color: #3f7fca;
}
.btn-outline-info {
  --ar-btn-color: #3f7fca;
  --ar-btn-border-color: #3f7fca;
  --ar-btn-hover-bg: #3f7fca;
  --ar-btn-hover-border-color: #3f7fca;
  --ar-btn-active-bg: #3f7fca;
  --ar-btn-active-border-color: #3f7fca;
  --ar-btn-disabled-color: #3f7fca;
  --ar-btn-disabled-border-color: #3f7fca;
}
.btn-success {
  --booost-btn-color: #fff;
  --booost-btn-hover-color: #fff;
  --ar-btn-bg: #12a33d;
  --ar-btn-border-color: #12a33d;
  --ar-btn-hover-bg: #008a24;
  --ar-btn-hover-border-color: #008a24;
  --ar-btn-active-bg: #008a24;
  --ar-btn-active-border-color: #008a24;
  --ar-btn-disabled-bg: #12a33d;
  --ar-btn-disabled-border-color: #12a33d;
}
.btn-outline-success {
  --ar-btn-color: #12a33d;
  --ar-btn-border-color: #12a33d;
  --ar-btn-hover-bg: #12a33d;
  --ar-btn-hover-border-color: #12a33d;
  --ar-btn-active-bg: #12a33d;
  --ar-btn-active-border-color: #12a33d;
  --ar-btn-disabled-color: #12a33d;
  --ar-btn-disabled-border-color: #12a33d;
}
.btn-danger {
  --booost-btn-color: #fff;
  --booost-btn-hover-color: #fff;
  --ar-btn-bg: #ed5050;
  --ar-btn-border-color: #ed5050;
  --ar-btn-hover-bg: #d43737;
  --ar-btn-hover-border-color: #d43737;
  --ar-btn-active-bg: #d43737;
  --ar-btn-active-border-color: #d43737;
  --ar-btn-disabled-bg: #ed5050;
  --ar-btn-disabled-border-color: #ed5050;
}
.btn-outline-danger {
  --ar-btn-color: #ed5050;
  --ar-btn-border-color: #ed5050;
  --ar-btn-hover-bg: #ed5050;
  --ar-btn-hover-border-color: #ed5050;
  --ar-btn-active-bg: #ed5050;
  --ar-btn-active-border-color: #ed5050;
  --ar-btn-disabled-color: #ed5050;
  --ar-btn-disabled-border-color: #ed5050;
}
.btn-light {
  --booost-btn-color: #121519;
  --booost-btn-hover-color: #121519;
  --ar-btn-bg: #d4edf5;
  --ar-btn-border-color: #d4edf5;
  --ar-btn-hover-bg: #bbd4dc;
  --ar-btn-hover-border-color: #bbd4dc;
  --ar-btn-active-bg: #bbd4dc;
  --ar-btn-active-border-color: #bbd4dc;
  --ar-btn-disabled-bg: #d4edf5;
  --ar-btn-disabled-border-color: #d4edf5;
}
.btn-outline-light {
  --ar-btn-color: #d4edf5;
  --ar-btn-border-color: #d4edf5;
  --ar-btn-hover-bg: #d4edf5;
  --ar-btn-hover-border-color: #d4edf5;
  --ar-btn-active-bg: #d4edf5;
  --ar-btn-active-border-color: #d4edf5;
  --ar-btn-disabled-color: #d4edf5;
  --ar-btn-disabled-border-color: #d4edf5;
}
.btn-dark {
  --booost-btn-color: #fff;
  --booost-btn-hover-color: #fff;
  --ar-btn-bg: #121519;
  --ar-btn-border-color: #121519;
  --ar-btn-hover-bg: #000000;
  --ar-btn-hover-border-color: #000000;
  --ar-btn-active-bg: #000000;
  --ar-btn-active-border-color: #000000;
  --ar-btn-disabled-bg: #121519;
  --ar-btn-disabled-border-color: #121519;
}
.btn-outline-dark {
  --ar-btn-color: #121519;
  --ar-btn-border-color: #121519;
  --ar-btn-hover-bg: #121519;
  --ar-btn-hover-border-color: #121519;
  --ar-btn-active-bg: #121519;
  --ar-btn-active-border-color: #121519;
  --ar-btn-disabled-color: #121519;
  --ar-btn-disabled-border-color: #121519;
}
.accordion-button:not(.collapsed)::after {
  --ar-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%2300467b'%3e%3cpath%20d='M.5%206.3c.6-.6%201.6-.6%202.3%200l9.3%209.3%209.3-9.3c.6-.6%201.6-.6%202.3%200%20.6.6.6%201.6%200%202.3L13.3%2018.8c-.6.6-1.6.6-2.3%200L.8%208.5c-.9-.8-.9-1.6-.3-2.2z'/%3e%3c/svg%3e");
}
/* danubeservice - Entwurf fuer booost.theme_custom_css (Phase C, vor dem Setzen am
   gerenderten Markup pruefen). Nur was Klassen nicht koennen. Farben ueber
   Theme-Variablen, damit Light und Dark Mode stimmen. */

/* 24h-Sticker im Hero: gruener Kreis mit weissem Rand, leicht gedreht (live: PNG 200px) */
.ds-sticker {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
  width: 9.5rem; height: 9.5rem; border-radius: 50%;
  background: var(--bs-success); color: #fff !important; text-decoration: none;
  border: .35rem solid #fff; box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .25);
  transform: rotate(-12deg); font-weight: 700; line-height: 1.15; text-align: center;
}
.ds-sticker span:first-child { text-transform: uppercase; font-size: 1.05rem; }
.ds-sticker span { font-size: .85rem; }
@media (max-width: 575.98px) {
  .ds-sticker { width: 7.5rem; height: 7.5rem; border-width: .25rem; }
  .ds-sticker span:first-child { font-size: .85rem; }
  .ds-sticker span { font-size: .68rem; }
}

/* Karten wie live: weisse Polaroid-Karte mit Schatten und Pfeil-Dreieck nach
   unten (live: .c19-wb-arrow-down). Farbe aus der Kartenfarbe, also auch im
   Dark Mode passend. */
.tile-template-cards-image-top-view .card {
  position: relative; overflow: visible; margin-bottom: 1.25rem !important;
  border: .3rem solid var(--ar-card-bg, #fff); box-shadow: 0 0 .9rem rgba(0, 0, 0, .3);
}
.tile-template-cards-image-top-view .card::after {
  content: ""; position: absolute; left: 50%; bottom: -1.4rem; transform: translateX(-50%);
  border-left: 1.75rem solid transparent; border-right: 1.75rem solid transparent;
  border-top: 1.4rem solid var(--ar-card-bg, #fff);
  filter: drop-shadow(0 .35rem .25rem rgba(0, 0, 0, .15));
}
.tile-template-cards-image-top-view .card .card-body { padding-top: 1.25rem; padding-bottom: 1.25rem; }

/* Navigation des booost-Headers (nur noch Rueckfall, falls der Header-Override
   am Site-Root geleert wird): Unternehmen blau, Ausfluege gruen, Kontakt grau.
   Gruen und Grau sind gegenueber live (#12a33d, #c6c6c6) abgedunkelt,
   damit weisse Schrift den Kontrast (>= 4.5:1) haelt. Nur ab lg, im mobilen
   Menue bleiben es normale Links. */
@media (min-width: 992px) {
  .nav-item-zwoelfer-reisen > .nav-link,
  .nav-item-ausfluege > .nav-link,
  .nav-item-kontakt > .nav-link {
    color: #fff !important; padding: .4rem 1.75rem !important; margin-left: .75rem;
  }
  .nav-item-zwoelfer-reisen > .nav-link { background: var(--bs-primary); }
  .nav-item-ausfluege > .nav-link { background: #0d8530; }
  .nav-item-kontakt > .nav-link { background: #767676; }
  .nav-item-zwoelfer-reisen > .nav-link:hover,
  .nav-item-ausfluege > .nav-link:hover,
  .nav-item-kontakt > .nav-link:hover { filter: brightness(1.15); }
}

/* Kartentitel in Ueberschriftsfarbe (hell: #00467b ueber theme_heading_color,
   dunkel: die Dark-Mode-Ueberschriftsfarbe) statt Linkfarbe */
[data-bs-theme=light] .card .card-title { color: var(--ar-heading-color); }
.card .card-title > a { color: inherit; }
.card .card-title > a:hover { color: var(--ar-primary, var(--bs-primary)); }

/* Karten: die leere Tag-Zeile unter dem Titel (show_tags aus) macht die
   Karte unten hoeher als live - ausblenden, solange sie leer ist. */
.tile-template-cards-image-top-view .card-body > .d-flex:not(:has(*)) { display: none; }

/* Footer (immer primaerblau, data-bs-theme=dark): die Inline-Icons sind
   text-primary und damit blau auf blau unsichtbar; die Oeffnungszeiten-
   Beschriftung (text-body-secondary) ist zu blass. */
#footer .bi.text-primary { color: inherit !important; opacity: .8; }
#footer .text-body-secondary { color: rgba(255, 255, 255, .75) !important; }

/* ===== Top-Bar: Schwestermarken als Site-Actions (2026-10-15) =====
   Die Kategorie site_actions speist Top-Bar UND Kolophon (beide nutzen das
   Tile site_actions, es kennt keine andere Kategorie). Darum: Top-Bar zeigt
   nur Busreisen/Taxi/Jobs, das Kolophon nur Impressum/Datenschutz
   (Reihenfolge der Aktionen: die drei Marken zuerst, sonst bekaeme
   "Datenschutz" im Kolophon einen Trennstrich ans Ende). */
#topbar #siteaction-imprint, #topbar #siteaction-privacy,
#ui-colophon #siteaction-busreisen, #ui-colophon #siteaction-taxi,
#ui-colophon #siteaction-jobs { display: none; }
/* Buttons wie live (pi-btn-small): Markenblau bzw. Gruen, weisse Versalien.
   Feste Farben statt --bs-primary: das Dark-Mode-Primaer (#5987a9) haelt mit
   weisser Schrift keine 4,5:1. */
#topbar ul.nav:has(> [id^="siteaction-"]) { flex-wrap: nowrap; gap: .2rem; }
#topbar [id^="siteaction-"] > .nav-link {
  border: 0 !important; padding: .2rem .5rem !important; color: #fff !important;
  background: #00467b; font-weight: 700 !important; text-transform: uppercase;
  font-size: .95rem; line-height: 1.35; letter-spacing: .02em; text-decoration: none;
}
#topbar #siteaction-taxi > .nav-link { background: #0d8530; }
#topbar [id^="siteaction-"] > .nav-link:hover { filter: brightness(1.25); }
#topbar [id^="siteaction-"] > .nav-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; box-shadow: 0 0 0 4px #00467b; }
#topbar { min-height: 2.75rem; }

/* ===== Header-Override (2026-10-15) =====
   Markup: specs/header-override.html (= booost.overrides "header" am Site-Root).
   Schiffsbild immer ganz (kein Beschnitt): es laeuft an allen Raendern in
   #e0f2fe aus, die Buehne hat dieselbe Farbe, ab 1600 px steht es mittig.
   Der Header bleibt in beiden Farbmodi hell (data-bs-theme="light"), weil das
   Foto hell auslaeuft. */
.ds-header { --ds-sky: #e0f2fe; --ds-blue: #00467b; --ds-green: #0d8530; --ds-grey: #767676; background: var(--ds-sky); color: #1e2a30; }
.ds-skip { position: absolute; top: .5rem; left: .5rem; z-index: 1060; padding: .5rem 1rem; background: #fff; color: var(--ds-blue); font-weight: 700; }
.ds-stage { display: flex; flex-direction: column; position: relative; }
.ds-bar { order: 0; }
.ds-nav { order: 1; }
.ds-ship { order: 2; position: relative; overflow: hidden; }
.ds-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .6rem; padding-bottom: .6rem; }
.ds-brand { display: inline-block; }
.ds-logo { display: block; width: 190px; max-width: 100%; height: auto; }
.ds-bar-actions { display: flex; align-items: center; gap: .5rem; }
.ds-call, .ds-burger {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  height: 2.75rem; min-width: 2.75rem; padding: 0 .8rem; border: 0; border-radius: 1.375rem;
  font-weight: 700; line-height: 1; text-decoration: none;
}
.ds-call { background: var(--ds-green); color: #fff !important; }
.ds-call svg, .ds-burger svg { flex: 0 0 auto; }
.ds-burger { background: #fff; color: var(--ds-blue); box-shadow: 0 .1rem .35rem rgba(0, 0, 0, .15); }
/* Handy: das Bild 12 % breiter als der Schirm - die ausgeblichenen Raender
   fallen weg, das Schiff bleibt ganz und wird hoeher (390 px: ~145 px) */
.ds-ship-img { display: block; width: 112%; max-width: none; height: auto; margin-left: -6%; }
@media (min-width: 768px) { .ds-ship-img { width: 100%; max-width: 1600px; margin: 0 auto; } }
.ds-tabs { list-style: none; margin: 0; padding: 0; }
.ds-tab {
  color: #fff !important; text-decoration: none; text-transform: uppercase; font-weight: 500;
  border: 0; line-height: 1.1;
}
.ds-tabs-home .ds-tab { background: var(--ds-blue); }
.ds-tabs-unternehmen .ds-tab { background: var(--ds-blue); }
.ds-tabs-ausfluege .ds-tab { background: var(--ds-green); }
.ds-tabs-kontakt .ds-tab { background: var(--ds-grey); }
.ds-tab:hover { filter: brightness(1.15); }
/* aktiver Bereich wie live weiss, Schrift in der Farbe des Reiters
   (Body-Klassen von Plone; alle drei Farben >= 4,5:1 auf Weiss) */
.portaltype-plone-site .ds-tabs-home .ds-tab,
.section-ausfluege .ds-tabs-ausfluege .ds-tab,
.section-kontakt .ds-tabs-kontakt .ds-tab { background: #fff; filter: none; }
.portaltype-plone-site .ds-tabs-home .ds-tab { color: var(--ds-blue) !important; }
.section-ausfluege .ds-tabs-ausfluege .ds-tab { color: var(--ds-green) !important; }
.section-kontakt .ds-tabs-kontakt .ds-tab { color: var(--ds-grey) !important; }
.ds-header a:focus-visible, .ds-header button:focus-visible {
  outline: 3px solid var(--ds-blue); outline-offset: 2px; box-shadow: 0 0 0 2px #fff;
}
.ds-tab:focus-visible { position: relative; z-index: 2; }
.ds-sub .dropdown-item { color: var(--ds-blue); text-transform: uppercase; font-weight: 500; }
.ds-sub .dropdown-item:hover, .ds-sub .dropdown-item:focus { background: var(--ds-sky); color: var(--ds-blue); }
.section-ausfluege.subsection-stift-melk .ds-sub li:nth-child(1) .dropdown-item,
.section-ausfluege.subsection-stift-goettweig .ds-sub li:nth-child(2) .dropdown-item,
.section-ausfluege.subsection-wachau .ds-sub li:nth-child(3) .dropdown-item { font-weight: 700; text-decoration: underline; }

/* unter lg: Logo-Zeile mit 24h-Anruf und Menue-Knopf, das Menue klappt unter
   der Zeile auf (Bootstrap collapse), Unterseiten stehen offen darunter */
@media (max-width: 991.98px) {
  .ds-tabs { display: grid; gap: .3rem; padding-bottom: 1rem; }
  .ds-tab { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; font-size: 1.15rem; }
  .ds-toggle { display: none !important; }
  .ds-tabs .ds-sub {
    display: block; position: static; float: none; transform: none !important; inset: auto !important;
    margin: .2rem 0 0 1rem; padding: 0; border: 0; box-shadow: none; background: transparent; min-width: 0;
  }
  .ds-sub .dropdown-item { padding: .55rem 1rem; font-size: 1rem; }
}
@media (max-width: 379.98px) { .ds-logo { width: 150px; } }

/* ab lg: Logo und 24h-Sticker liegen auf dem Bild, die Reiter-Leiste sitzt
   auf der Unterkante (halb ueber dem Wasser, nicht ueber dem Schiff) */
@media (min-width: 992px) {
  .ds-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; pointer-events: none; }
  .ds-bar-inner { padding-top: clamp(1rem, 1.6vw, 1.75rem); }
  .ds-brand { pointer-events: auto; }
  .ds-logo { width: clamp(220px, 22vw, 320px); }
  .ds-ship { order: 1; }
  .ds-nav { order: 2; position: relative; z-index: 3; margin-top: calc(-1 * clamp(.75rem, 1.6vw, 1.75rem)); padding-bottom: 1.25rem; }
  .ds-tabs { display: flex; gap: 1.25rem; max-width: 60rem; padding: .45rem 1.25rem; background: rgba(255, 255, 255, .6); }
  .ds-tabs > li { flex: 1 1 0; display: flex; }
  .ds-tabs > .ds-tabs-home { flex: 0 0 auto; }
  .ds-tab { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; height: 2.9rem; padding: 0 1rem; font-size: clamp(1.3rem, 1.8vw, 1.75rem); white-space: nowrap; }
  .ds-tabs-home .ds-tab { width: 2.9rem; padding: 0; }
  .ds-home-label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .ds-toggle { flex: 0 0 2.4rem; padding: 0; border-left: 1px solid rgba(255, 255, 255, .45); }
  .ds-toggle::after { margin-left: 0; }
  .ds-sub { top: 100%; left: 0; min-width: 100%; margin-top: 0 !important; border-radius: 0; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2); }
  .ds-tabs-ausfluege:hover > .ds-sub, .ds-tabs-ausfluege:focus-within > .ds-sub { display: block; }
  .ds-ship-inner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; pointer-events: none; }
  .ds-sticker-head { position: absolute; right: 1rem; top: clamp(1rem, 3.5vw, 3.5rem); pointer-events: auto; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .ds-sticker-head { width: 7.75rem; height: 7.75rem; }
  .ds-sticker-head span:first-child { font-size: .9rem; }
  .ds-sticker-head span { font-size: .72rem; }
}

/* ===== Visueller Abgleich 2026-10-16 (Messwerte: specs/screenshots/2026-10-16/parity) ===== */
/* Breiten wie live ab 1200 px: Inhalt 860 px (x 290), Top-Bar und Kopf 940 px (x 250) */
@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 884px; }
  #topbar .container, #topbar .container-fluid, .ds-header .container { max-width: 964px; }
}
/* Top-Bar wie live: 47 px hoch, Marken-Buttons 18 px / 30 px hoch, Suche 160 x 29 */
#topbar { min-height: 0; }
@media (min-width: 992px) {
  #topbar [id^="siteaction-"] > .nav-link { font-size: 1.125rem; line-height: 1; padding: .375rem .2rem !important; letter-spacing: 0; }
  #topbar input[type="text"], #topbar input[type="search"] {
    width: 10rem; height: 1.8125rem; min-height: 0; padding: .25rem .625rem; font-size: .8125rem;
    border: 0; border-radius: 0; background: rgba(198, 198, 198, .3);
  }
  #topbar form .btn, #topbar form button {
    width: 1.875rem; height: 1.8125rem; min-height: 0; padding: 0; margin-left: .2rem;
    border: 0; border-radius: 0; background: #a0b9cd; color: #fff; font-size: .8125rem;
  }
}
/* Kopf ab lg wie live: die Reiter-Leiste liegt auf dem Bild (ueber dem Wasser,
   15 px ueber der Unterkante), Leiste 940 x 80 in rgba(0,70,123,.3), Reiter 45 hoch;
   der Kopf ist damit so hoch wie das Bild (vorher Bild + Leiste darunter) */
@media (min-width: 992px) {
  .ds-nav { position: absolute; left: 0; right: 0; bottom: .9375rem; z-index: 3; margin-top: 0; padding-bottom: 0; }
  .ds-tabs { max-width: none; padding: 1.0625rem 1.25rem 1.125rem; background: rgba(0, 70, 123, .3); }
  .ds-tab { height: 2.8125rem; }
  .ds-tabs-home .ds-tab { width: 2.5rem; }
  /* kein Pfeil-Segment am Reiter "Ausfluege" (live ohne); das Untermenue
     oeffnet bei Hover und bei Tastaturfokus (:focus-within) */
  .ds-toggle { display: none !important; }
}
/* Top-Bar weiss wie live (nur Light Mode; im Dark Mode bleibt bg-body-tertiary dunkel) */
html:not([data-bs-theme=dark]) #topbar { background-color: #fff !important; }
/* Typoskala wie live ab lg: Seitentitel 45/54 -1px, normal (Azbuka Regular) */
@media (min-width: 992px) {
  h1, .h1 { font-size: 2.8125rem; line-height: 1.2; letter-spacing: -1px; font-weight: 400; }
}
/* Karten wie live: Titelbereich 92 px (Titel mittig), 60 px zwischen den Kartenreihen,
   Pfeil 60 x 30 px */
.tile-template-cards-image-top-view.row { --ar-gutter-y: 3.75rem; --bs-gutter-y: 3.75rem; }
.tile-template-cards-image-top-view .card > .card-body:not(.position-absolute) { margin-top: 0 !important; padding: 2rem 1rem !important; }
.tile-template-cards-image-top-view .card::after { border-left-width: 1.875rem; border-right-width: 1.875rem; border-top-width: 1.875rem; bottom: -1.875rem; }
/* Bildband ohne Text (banner css_class "band-flat"): 532 px bei 1440 wie live
   (banner.pt: 21:9 + pt-5 = 665 px) */
@media (min-width: 768px) { .band-flat .ratio { --ar-aspect-ratio: 33.6%; } }
/* 24h-Sticker: Gruen wie die Reiter (#0d8530), weisse Schrift 4,6:1 (vorher --bs-success #12a33d, 3,3:1) */
.ds-sticker { background: #0d8530; }
/* Karten-Attribution bleibt hell, auch im Dark Mode: Link dunkelblau statt aufgehelltem Primaer (3,6:1) */
[data-bs-theme=dark] .leaflet-control-attribution a { color: #00467b; }
/* Logo ab 1200 px wie live: 304 px breit, 35 px links ueber die Kopf-Spalte hinaus (x 215) */
@media (min-width: 1200px) { .ds-brand { margin-left: -2.5rem; } .ds-logo { width: 19rem; } }
/* Kopf ab 1360 px 450 px hoch wie live (Bild in voller Breite waere 477 px): object-fit contain,
   das Schiff bleibt ganz, die ausgeblichenen Raender gehen in die Buehnenfarbe ueber.
   Logo 313 x 116 bei y 57, 24h-Sticker 150 px bei x 1040 / y 77 wie live */
@media (min-width: 1360px) { .ds-ship-img { height: 28.125rem; object-fit: contain; } }
@media (min-width: 1200px) {
  .ds-logo { width: 19.5625rem; }
  .ds-bar-inner { padding-top: .625rem; }
  .ds-sticker-head { width: 8rem; height: 8rem; top: 2.25rem; right: 1rem; border-width: .25rem; }
  .ds-sticker-head span:first-child { font-size: .85rem; }
  .ds-sticker-head span { font-size: .68rem; }
}

/* ===== Footer-Abgleich 2026-10-16 (Messwerte: specs/screenshots/2026-10-16/footer) =====
   Raster: 3 Spalten col-md-4 am Portlet (Zwoelfer-Gruppe per d-none aus, die Links
   stehen in der Top-Bar), Container container-narrow wie live 940. */
/* Spaltenkoepfe 14 px fett in Versalien ohne Sperrung wie live, 24 px bis zur Liste */
#footer .card-body > h2.h6 { font-size: .875rem; line-height: 1.6; font-weight: 700; text-transform: uppercase; margin-bottom: 1.25rem; }
#footer .card-body p { color: #eee; }
/* Linklisten mit Punkten, 25-px-Zeilen wie live (Collection: ul.nav, Static: ul.list-unstyled) */
#footer [class*=portlet-collection] ul.nav.flex-column, #footer [class*=portlet-static] ul.list-unstyled { display: block; list-style: disc; padding-left: 1.1875rem; }
#footer [class*=portlet-collection] ul.nav.flex-column > .nav-item { display: list-item; }
#footer [class*=portlet-collection] ul.nav.flex-column .nav-link { display: inline; padding: 0 !important; margin: 0 !important; color: #fff; }
#footer [class*=portlet-collection] ul.nav.flex-column > li, #footer [class*=portlet-static] ul.list-unstyled > li { margin-bottom: 0 !important; line-height: 1.5625rem; }
/* Kolophon: weisser Balken, eine Zeile mittig, grau 14 px wie live (nur Light Mode;
   im Dark Mode bleibt er auf dem Footer-Blau). colophon-start + Zentrierung */
#ui-colophon.colophon-start .colophon-tiles { justify-content: center !important; }
#ui-colophon [id^=siteaction-] > .nav-link { border: 0 !important; padding: 0 .5rem !important; }
#ui-colophon .navbar-sponsor, #ui-colophon .navbar-sponsor .nav-link { padding-top: 0 !important; padding-bottom: 0 !important; }
html:not([data-bs-theme=dark]) #ui-colophon {
  background-color: #fff;
  color: #666e70;
  --ar-body-color: #666e70;
  --ar-nav-link-color: #666e70;
  --ar-nav-link-hover-color: #00467b;
  --ar-link-color-rgb: 102, 110, 112;
}
html:not([data-bs-theme=dark]) #ui-colophon .nav-link { color: #666e70; }
html:not([data-bs-theme=dark]) #ui-colophon .sponsor-logo.d-dark-mode-block { display: none !important; }
html:not([data-bs-theme=dark]) #ui-colophon .sponsor-logo.d-dark-mode-none { display: inline !important; }
/* "Weitere Angebote" (verwandte Inhalte; nur booost, live gibt es sie nicht)
   erben die Startseiten-Karten, bringen aber Datum, Teaser und "Mehr..." mit:
   Titel war mittig, Text 16 px und Knopf 24 px eingerueckt, Datum ist der
   Importzeitpunkt 2018, darunter viel Leerraum (2026-10-19). Hier alles
   mittig wie der Titel, Datum aus, Knopf direkt unter dem Text. */
.related-items-cards-image-top-view .card-body > .d-flex:has(.bi-clock) { display: none !important; }
.related-items-cards-image-top-view .card .card-title { margin-bottom: .75rem !important; }
.related-items-cards-image-top-view .card .card-text { text-align: center; }
.related-items-cards-image-top-view .card > .card-body:not(.position-absolute) { padding-bottom: 1.25rem !important; }
.related-items-cards-image-top-view .card .card-footer { text-align: center; padding: 0 1rem 2rem !important; }

body.template-folder_contents,
body[class*="controlpanel"],
body.template-sharing,
body.template-historyview {
  --ar-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ar-heading-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
#edit-zone { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }