/* WoMo Dashboard – zentrale Theme-Schicht
   Architektur: Seiten liefern Struktur, dieses Stylesheet liefert Farben.
   Die Datei muss als letzte CSS-Datei eingebunden sein. */

:root{
  color-scheme:dark;
  --womo-bg:#0a0a0a;
  --womo-panel:#171717;
  --womo-panel-soft:#202020;
  --womo-control:#101010;
  --womo-control-hover:#2a2a2a;
  --womo-border:#4b5563;
  --womo-border-soft:#737373;
  --womo-text:#f8fafc;
  --womo-muted:#d4d4d8;
  --womo-heading:#f5f5f5;
  --womo-accent:#a3a3a3;
  --womo-accent-strong:#404040;
  --womo-shadow:rgba(0,0,0,.45);
}
html[data-womo-theme="blue"]{
  --womo-bg:#0f172a;
  --womo-panel:#111827;
  --womo-panel-soft:#162033;
  --womo-control:#0b1220;
  --womo-control-hover:#1e293b;
  --womo-border:#3b4d67;
  --womo-border-soft:#64748b;
  --womo-text:#f8fafc;
  --womo-muted:#cbd5e1;
  --womo-heading:#93c5fd;
  --womo-accent:#60a5fa;
  --womo-accent-strong:#2563eb;
}
html[data-womo-theme="green"]{
  --womo-bg:#071a14;
  --womo-panel:#0b1f1a;
  --womo-panel-soft:#0f2d24;
  --womo-control:#0a1916;
  --womo-control-hover:#12352b;
  --womo-border:#285e4c;
  --womo-border-soft:#37745f;
  --womo-text:#f8fafc;
  --womo-muted:#cbd5e1;
  --womo-heading:#d1fae5;
  --womo-accent:#6ee7b7;
  --womo-accent-strong:#047857;
}
html[data-womo-theme="slate"]{
  --womo-bg:#15181d;
  --womo-panel:#1d2128;
  --womo-panel-soft:#252b34;
  --womo-control:#171b21;
  --womo-control-hover:#303741;
  --womo-border:#5d6674;
  --womo-border-soft:#7b8492;
  --womo-text:#f8fafc;
  --womo-muted:#d6d9df;
  --womo-heading:#eef0f3;
  --womo-accent:#b4bac4;
  --womo-accent-strong:#515a66;
}
html[data-womo-theme="darkgray"],
html[data-womo-theme="gray"],
html[data-womo-theme="grey"],
html[data-womo-theme="amber"]{
  --womo-bg:#080808;
  --womo-panel:#171717;
  --womo-panel-soft:#202020;
  --womo-control:#101010;
  --womo-control-hover:#2a2a2a;
  --womo-border:#4f4f4f;
  --womo-border-soft:#747474;
  --womo-text:#f8fafc;
  --womo-muted:#d8d8d8;
  --womo-heading:#f5f5f5;
  --womo-accent:#b8b8b8;
  --womo-accent-strong:#3f3f3f;
}

/* Brücke zu alten Seitennamen. */
html[data-womo-theme]{
  --bg:var(--womo-bg)!important;
  --panel:var(--womo-panel)!important;
  --panel2:var(--womo-panel-soft)!important;
  --line:var(--womo-border)!important;
  --text:var(--womo-text)!important;
  --muted:var(--womo-muted)!important;
  --blue:var(--womo-accent-strong)!important;
}

html[data-womo-theme],
html[data-womo-theme] body{
  min-height:100%!important;
  margin:0!important;
  background:var(--womo-bg)!important;
  background-color:var(--womo-bg)!important;
  color:var(--womo-text)!important;
}
html[data-womo-theme] body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:var(--womo-bg)!important;
}
html[data-womo-theme] main,
html[data-womo-theme] main.wrap,
html[data-womo-theme] .wrap,
html[data-womo-theme] .page,
html[data-womo-theme] .content,
html[data-womo-theme] .grid,
html[data-womo-theme] .split{
  background:var(--womo-bg)!important;
  background-color:var(--womo-bg)!important;
  color:var(--womo-text)!important;
}

/* Zentrale Flächen: Karten, Unterseiten, Dialoge, Video-Panels. */
html[data-womo-theme] .card,
html[data-womo-theme] a.card,
html[data-womo-theme] .tile,
html[data-womo-theme] .chart-card,
html[data-womo-theme] .database-dialog,
html[data-womo-theme] .place-card,
html[data-womo-theme] .place-list-panel,
html[data-womo-theme] .photos,
html[data-womo-theme] .photo-item,
html[data-womo-theme] .drop,
html[data-womo-theme] .add-photo-tile,
html[data-womo-theme] .list-photo-empty,
html[data-womo-theme] .video-panel,
html[data-womo-theme] #videoPanel,
html[data-womo-theme] #videoCreatePanel,
html[data-womo-theme] .video-create-panel,
html[data-womo-theme] .video-list-panel,
html[data-womo-theme] .video-render-panel,
html[data-womo-theme] .video-dialog,
html[data-womo-theme] .modal,
html[data-womo-theme] .dialog,
html[data-womo-theme] .photo-lightbox .lb-close,
html[data-womo-theme] .photo-lightbox .lb-prev,
html[data-womo-theme] .photo-lightbox .lb-next,
html[data-womo-theme] .photo-lightbox .lb-counter{
  background:var(--womo-panel)!important;
  background-color:var(--womo-panel)!important;
  background-image:none!important;
  color:var(--womo-text)!important;
  border-color:var(--womo-border)!important;
  box-shadow:0 8px 24px var(--womo-shadow)!important;
}
html[data-womo-theme] .card:hover,
html[data-womo-theme] a.card:hover,
html[data-womo-theme] .place-card:hover,
html[data-womo-theme] .tile:hover,
html[data-womo-theme] .chart-card:hover{
  border-color:var(--womo-accent)!important;
}

/* Sekundärflächen und Listen. */
html[data-womo-theme] .controlbar,
html[data-womo-theme] .badge,
html[data-womo-theme] #pointBadge,
html[data-womo-theme] #overnightBadge,
html[data-womo-theme] .table tr,
html[data-womo-theme] .video-item,
html[data-womo-theme] .video-floating-progress,
html[data-womo-theme] .video-progress-wrap,
html[data-womo-theme] .video-progress-bar,
html[data-womo-theme] .progress-wrap,
html[data-womo-theme] .progress-bar,
html[data-womo-theme] .video-player,
html[data-womo-theme] .leaflet-control-layers,
html[data-womo-theme] .leaflet-popup-content-wrapper,
html[data-womo-theme] .leaflet-popup-tip{
  background:var(--womo-panel-soft)!important;
  background-color:var(--womo-panel-soft)!important;
  color:var(--womo-text)!important;
  border-color:var(--womo-border)!important;
}

/* Texte. */
html[data-womo-theme] h1:not(.topbar h1),
html[data-womo-theme] h2,
html[data-womo-theme] h3,
html[data-womo-theme] h4,
html[data-womo-theme] .big,
html[data-womo-theme] .card b,
html[data-womo-theme] .video-panel-title,
html[data-womo-theme] .place-list-title,
html[data-womo-theme] .table th{
  color:var(--womo-heading)!important;
  text-shadow:none!important;
}
html[data-womo-theme] .muted,
html[data-womo-theme] .mini,
html[data-womo-theme] label,
html[data-womo-theme] .field label,
html[data-womo-theme] .video-render-options label,
html[data-womo-theme] .video-item-meta,
html[data-womo-theme] .video-item-share-status,
html[data-womo-theme] .video-floating-progress-label,
html[data-womo-theme] .video-progress-text,
html[data-womo-theme] .upload-status-inline,
html[data-womo-theme] .badge,
html[data-womo-theme] .stars,
html[data-womo-theme] a:not(.logo-link):not(.video-mini-button):not(.card){
  color:var(--womo-muted)!important;
}
html[data-womo-theme] .stars,
html[data-womo-theme] .star-rating button.active{
  color:var(--womo-accent)!important;
}

/* Formulare und Buttons, inklusive Video-Dialoge. */
html[data-womo-theme] input,
html[data-womo-theme] select,
html[data-womo-theme] textarea,
html[data-womo-theme] button,
html[data-womo-theme] .btn,
html[data-womo-theme] .track-fit-button,
html[data-womo-theme] .video-mini-button,
html[data-womo-theme] a.video-mini-button,
html[data-womo-theme] a.video-mini-button:visited,
html[data-womo-theme] .video-primary-button,
html[data-womo-theme] .video-secondary-button,
html[data-womo-theme] .video-render-options select,
html[data-womo-theme] .leaflet-bar a{
  background:var(--womo-control)!important;
  background-color:var(--womo-control)!important;
  background-image:none!important;
  color:var(--womo-text)!important;
  border-color:var(--womo-border-soft)!important;
  box-shadow:3px 4px 0 var(--womo-shadow)!important;
}
html[data-womo-theme] input:hover,
html[data-womo-theme] select:hover,
html[data-womo-theme] textarea:hover,
html[data-womo-theme] button:hover,
html[data-womo-theme] .btn:hover,
html[data-womo-theme] .track-fit-button:hover,
html[data-womo-theme] .video-mini-button:hover,
html[data-womo-theme] a.video-mini-button:hover,
html[data-womo-theme] .video-primary-button:hover,
html[data-womo-theme] .video-secondary-button:hover,
html[data-womo-theme] .video-render-options select:hover,
html[data-womo-theme] .leaflet-bar a:hover{
  background:var(--womo-control-hover)!important;
  border-color:var(--womo-accent)!important;
  color:var(--womo-text)!important;
}
html[data-womo-theme] input:focus,
html[data-womo-theme] select:focus,
html[data-womo-theme] textarea:focus{
  outline:2px solid var(--womo-accent)!important;
  outline-offset:1px!important;
  border-color:var(--womo-accent)!important;
}
html[data-womo-theme] input[type="checkbox"]{
  accent-color:var(--womo-accent-strong)!important;
}
html[data-womo-theme] .ok,
html[data-womo-theme] .primary,
html[data-womo-theme] .video-primary-button:not(.danger){
  background:var(--womo-accent-strong)!important;
  border-color:var(--womo-accent)!important;
  color:#fff!important;
}
html[data-womo-theme] .danger,
html[data-womo-theme] .video-primary-button.danger{
  background:#7f1d1d!important;
  border-color:#991b1b!important;
  color:#fff!important;
}
html[data-womo-theme] .video-progress-fill{
  background:var(--womo-accent)!important;
  background-color:var(--womo-accent)!important;
}

/* Kopfzeile bleibt hell; aktive Menüelemente nehmen nur das Theme-Akzent an. */
html[data-womo-theme] .topbar,
html[data-womo-theme] .topbar.appbar{
  background:#fff!important;
  color:#0f172a!important;
  border-bottom-color:#d1d5db!important;
}
html[data-womo-theme] .topbar h1,
html[data-womo-theme] .topbar.appbar h1{
  color:#0f172a!important;
}
html[data-womo-theme] .topbar .nav a,
html[data-womo-theme] .topbar .nav button,
html[data-womo-theme] .topbar .dropdown>button,
html[data-womo-theme] .topbar.appbar .nav a,
html[data-womo-theme] .topbar.appbar .nav button,
html[data-womo-theme] .topbar.appbar .dropdown>button{
  background:#fff!important;
  color:#111827!important;
  border:1px solid rgba(15,23,42,.20)!important;
  box-shadow:3px 4px 0 rgba(15,23,42,.16)!important;
}
html[data-womo-theme] .topbar .nav a.active,
html[data-womo-theme] .topbar .dropdown:has(a.active)>button,
html[data-womo-theme] .topbar.appbar .nav a.active,
html[data-womo-theme] .topbar.appbar .dropdown:has(a.active)>button{
  background:var(--womo-accent-strong)!important;
  color:#fff!important;
  border-color:var(--womo-accent-strong)!important;
}
html[data-womo-theme] .topbar .dropdown-menu,
html[data-womo-theme] .topbar.appbar .dropdown-menu{
  background:#fff!important;
  border-color:#d1d5db!important;
}
html[data-womo-theme] .topbar .dropdown-menu a,
html[data-womo-theme] .topbar.appbar .dropdown-menu a{
  background:#f3f4f6!important;
  color:#111827!important;
}
html[data-womo-theme] #womoLogout{
  background:#991b1b!important;
  color:#fff!important;
  border-color:#991b1b!important;
}

/* Leaflet-Karte bleibt Karte; nur Bedienflächen werden thematisiert. */
html[data-womo-theme] .leaflet-container,
html[data-womo-theme] #map{
  background:#111!important;
}

/* Das Kilometer-Schild ist bewusst kein Theme-Element. */
html[data-womo-theme] #distanceBadge,
html[data-womo-theme] .leaflet-control #distanceBadge{
  background:#facc15!important;
  background-color:#facc15!important;
  color:#000!important;
  border:2px solid #000!important;
  box-shadow:3px 4px 0 rgba(0,0,0,.55)!important;
}
html[data-womo-theme] #distanceBadge::before,
html[data-womo-theme] #distanceBadge::after{
  background:#facc15!important;
  background-color:#facc15!important;
}
html[data-womo-theme] #distanceBadge .road-dot,
html[data-womo-theme] #distanceBadge .road-hole{
  background:#000!important;
  background-color:#000!important;
}

/* Übernachtungsmarker: bewusst dunkelgrau, etwas größer. */
html[data-womo-theme] .overnight-marker,
html[data-womo-theme] .overnight-icon{
  background:#2f343b!important;
  background-color:#2f343b!important;
  border-color:#0d0f12!important;
}

/* Top-Menü: inaktive Hauptbuttons bleiben weiß; nur die tatsächlich aktive Rubrik nutzt das Farbschema. */
html[data-womo-theme] .topbar .nav > a,
html[data-womo-theme] .topbar .nav > button,
html[data-womo-theme] .topbar .nav > .dropdown > button,
html[data-womo-theme] .topbar.appbar .nav > a,
html[data-womo-theme] .topbar.appbar .nav > button,
html[data-womo-theme] .topbar.appbar .nav > .dropdown > button{
  background:#ffffff!important;
  background-color:#ffffff!important;
  background-image:none!important;
  color:#111827!important;
  border:1px solid rgba(15,23,42,.22)!important;
  box-shadow:3px 4px 0 rgba(15,23,42,.16)!important;
  text-decoration:none!important;
}

html[data-womo-theme] .topbar .nav > a:hover,
html[data-womo-theme] .topbar .nav > button:hover,
html[data-womo-theme] .topbar .nav > .dropdown > button:hover,
html[data-womo-theme] .topbar .nav > .dropdown.open > button,
html[data-womo-theme] .topbar.appbar .nav > a:hover,
html[data-womo-theme] .topbar.appbar .nav > button:hover,
html[data-womo-theme] .topbar.appbar .nav > .dropdown > button:hover,
html[data-womo-theme] .topbar.appbar .nav > .dropdown.open > button{
  background:#ffffff!important;
  background-color:#ffffff!important;
  background-image:none!important;
  color:#111827!important;
  border-color:var(--womo-accent-strong)!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--womo-accent-strong) 22%,transparent),3px 4px 0 rgba(15,23,42,.18)!important;
  text-decoration:none!important;
}

html[data-womo-theme] .topbar .nav > a.active,
html[data-womo-theme] .topbar .nav > .dropdown:has(.dropdown-menu a.active) > button,
html[data-womo-theme] .topbar.appbar .nav > a.active,
html[data-womo-theme] .topbar.appbar .nav > .dropdown:has(.dropdown-menu a.active) > button{
  background:var(--womo-accent-strong)!important;
  background-color:var(--womo-accent-strong)!important;
  background-image:none!important;
  color:#ffffff!important;
  border-color:var(--womo-accent-strong)!important;
  box-shadow:3px 4px 0 rgba(15,23,42,.24)!important;
}

html[data-womo-theme] .topbar .nav > a.active:hover,
html[data-womo-theme] .topbar .nav > .dropdown:has(.dropdown-menu a.active) > button:hover,
html[data-womo-theme] .topbar .nav > .dropdown.open:has(.dropdown-menu a.active) > button,
html[data-womo-theme] .topbar.appbar .nav > a.active:hover,
html[data-womo-theme] .topbar.appbar .nav > .dropdown:has(.dropdown-menu a.active) > button:hover,
html[data-womo-theme] .topbar.appbar .nav > .dropdown.open:has(.dropdown-menu a.active) > button{
  background:var(--womo-accent-strong)!important;
  background-color:var(--womo-accent-strong)!important;
  color:#ffffff!important;
  border-color:var(--womo-accent)!important;
}

html[data-womo-theme] .topbar .dropdown-menu,
html[data-womo-theme] .topbar.appbar .dropdown-menu{
  background:#ffffff!important;
  background-color:#ffffff!important;
  border-color:#d1d5db!important;
  box-shadow:4px 5px 0 rgba(15,23,42,.16)!important;
}
html[data-womo-theme] .topbar .dropdown-menu a,
html[data-womo-theme] .topbar.appbar .dropdown-menu a{
  background:#f8fafc!important;
  background-color:#f8fafc!important;
  color:#111827!important;
  border-color:#d1d5db!important;
  box-shadow:3px 4px 0 rgba(15,23,42,.12)!important;
}
html[data-womo-theme] .topbar .dropdown-menu a:hover,
html[data-womo-theme] .topbar.appbar .dropdown-menu a:hover{
  background:#ffffff!important;
  color:#111827!important;
  border-color:var(--womo-accent-strong)!important;
}
html[data-womo-theme] .topbar .dropdown-menu a.active,
html[data-womo-theme] .topbar.appbar .dropdown-menu a.active{
  background:var(--womo-accent-strong)!important;
  background-color:var(--womo-accent-strong)!important;
  color:#ffffff!important;
  border-color:var(--womo-accent-strong)!important;
}

/* Top-Menü: geöffneter Dropdown ist die aktuelle Menü-Auswahl.
   Während ein Dropdown offen ist, darf eine aktive Seitenauswahl daneben
   (z.B. Strecken) nicht weiter hervorgehoben bleiben. */
html[data-womo-theme] .topbar .nav:has(> .dropdown.open) > a.active,
html[data-womo-theme] .topbar .nav:has(> .dropdown.open) > button.active,
html[data-womo-theme] .topbar.appbar .nav:has(> .dropdown.open) > a.active,
html[data-womo-theme] .topbar.appbar .nav:has(> .dropdown.open) > button.active{
  background:#ffffff!important;
  background-color:#ffffff!important;
  background-image:none!important;
  color:#111827!important;
  border-color:rgba(15,23,42,.22)!important;
  box-shadow:3px 4px 0 rgba(15,23,42,.16)!important;
}
html[data-womo-theme] .topbar .nav > .dropdown.open > button,
html[data-womo-theme] .topbar.appbar .nav > .dropdown.open > button{
  background:var(--womo-accent-strong)!important;
  background-color:var(--womo-accent-strong)!important;
  background-image:none!important;
  color:#ffffff!important;
  border-color:var(--womo-accent-strong)!important;
  box-shadow:3px 4px 0 rgba(15,23,42,.24)!important;
}
html[data-womo-theme] .topbar .nav > .dropdown.open > button:hover,
html[data-womo-theme] .topbar.appbar .nav > .dropdown.open > button:hover{
  background:var(--womo-accent-strong)!important;
  background-color:var(--womo-accent-strong)!important;
  color:#ffffff!important;
  border-color:var(--womo-accent)!important;
}



/* Report/Menu repair 2026-06-12 v2: Desktop-Dropdowns dürfen nie als normale Linkzeile sichtbar sein. */
html[data-womo-theme] .topbar.appbar{
  overflow:visible!important;
  position:relative!important;
  z-index:3000!important;
}
html[data-womo-theme] .topbar.appbar .nav{
  overflow:visible!important;
}
html[data-womo-theme] .topbar.appbar .dropdown{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  overflow:visible!important;
}
html[data-womo-theme] .topbar.appbar .dropdown-menu{
  display:none!important;
  position:absolute!important;
  top:calc(100% + 7px)!important;
  right:0!important;
  left:auto!important;
  min-width:220px!important;
  width:max-content!important;
  max-width:min(360px, calc(100vw - 24px))!important;
  padding:8px!important;
  border-radius:12px!important;
  z-index:4000!important;
  grid-template-columns:1fr!important;
  flex-direction:column!important;
  gap:4px!important;
}
html[data-womo-theme] .topbar.appbar .dropdown.open .dropdown-menu{
  display:flex!important;
}
html[data-womo-theme] .topbar.appbar .dropdown-menu a{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  box-sizing:border-box!important;
  margin:3px 0!important;
  white-space:nowrap!important;
}

/* === WoMo mobile navigation + checkbox repair 2026-06-07 V8 ===
   Ziel: keine JS-Abhaengigkeit durch Hover, keine abgeschnittenen Dropdowns,
   immer nur ein aktiver Haupt-Menuepunkt, lesbare Tickboxen auf Mobil. */
html[data-womo-theme] .topbar.appbar .nav > a,
html[data-womo-theme] .topbar.appbar .nav > .dropdown > button{
  touch-action:manipulation!important;
}
html[data-womo-theme] .topbar.appbar .nav.nav-has-open > a.active,
html[data-womo-theme] .topbar.appbar .nav.nav-has-open > .dropdown:not(.open) > button,
html[data-womo-theme] .topbar.appbar .nav.nav-has-open > .dropdown:not(.open):has(.dropdown-menu a.active) > button{
  background:#ffffff!important;
  background-color:#ffffff!important;
  color:#111827!important;
  border-color:rgba(15,23,42,.22)!important;
  box-shadow:3px 4px 0 rgba(15,23,42,.16)!important;
}
html[data-womo-theme] .topbar.appbar .nav.nav-has-open > .dropdown.open > button{
  background:var(--womo-accent-strong)!important;
  background-color:var(--womo-accent-strong)!important;
  color:#ffffff!important;
  border-color:var(--womo-accent-strong)!important;
  box-shadow:3px 4px 0 rgba(15,23,42,.24)!important;
}
html[data-womo-theme] .topbar.appbar .dropdown-menu a{
  text-decoration:none!important;
}
html[data-womo-theme] input[type="checkbox"]{
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  min-height:22px!important;
  accent-color:var(--womo-accent-strong)!important;
  opacity:1!important;
  appearance:auto!important;
  -webkit-appearance:checkbox!important;
  background-color:#ffffff!important;
  color-scheme:light!important;
  border:1px solid #64748b!important;
}
html[data-womo-theme] label,
html[data-womo-theme] .checkbox-row,
html[data-womo-theme] .amenity-row label{
  color:var(--text)!important;
}
@media(max-width:760px){
  html[data-womo-theme] .topbar.appbar{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    grid-template-areas:"logo title logout" "nav nav nav"!important;
    align-items:center!important;
    row-gap:6px!important;
    padding:6px 8px!important;
    overflow:visible!important;
    position:relative!important;
    z-index:3000!important;
  }
  html[data-womo-theme] .topbar.appbar .logo-link{grid-area:logo!important;min-width:0!important;}
  html[data-womo-theme] .topbar.appbar .logo{height:32px!important;max-width:128px!important;object-fit:contain!important;}
  html[data-womo-theme] .topbar.appbar h1{grid-area:title!important;font-size:17px!important;line-height:1.15!important;margin:0 6px!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
  html[data-womo-theme] #womoLogout{grid-area:logout!important;height:32px!important;min-height:32px!important;padding:6px 10px!important;margin:0!important;font-size:12px!important;white-space:nowrap!important;}
  html[data-womo-theme] .topbar.appbar .nav{
    grid-area:nav!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-wrap:nowrap!important;
    gap:5px!important;
    overflow:visible!important;
    padding:0!important;
    position:relative!important;
    z-index:3100!important;
  }
  html[data-womo-theme] .topbar.appbar .nav > a,
  html[data-womo-theme] .topbar.appbar .nav > .dropdown > button{
    flex:0 1 auto!important;
    width:auto!important;
    min-width:0!important;
    height:30px!important;
    min-height:30px!important;
    padding:5px 8px!important;
    font-size:12px!important;
    line-height:1!important;
    border-radius:999px!important;
    white-space:nowrap!important;
  }
  html[data-womo-theme] .topbar.appbar .dropdown{
    position:relative!important;
    width:auto!important;
    min-width:0!important;
    overflow:visible!important;
    z-index:3200!important;
  }
  html[data-womo-theme] .topbar.appbar .dropdown-menu{
    position:absolute!important;
    display:none!important;
    top:calc(100% + 7px)!important;
    left:0!important;
    right:auto!important;
    width:max-content!important;
    min-width:190px!important;
    max-width:calc(100vw - 16px)!important;
    padding:7px!important;
    z-index:4000!important;
    overflow:visible!important;
  }
  html[data-womo-theme] .topbar.appbar .dropdown:last-child .dropdown-menu{
    left:auto!important;
    right:0!important;
  }
  html[data-womo-theme] .topbar.appbar .dropdown.open .dropdown-menu{
    display:block!important;
  }
  html[data-womo-theme] .topbar.appbar .dropdown-menu a{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-height:32px!important;
    height:auto!important;
    padding:8px 10px!important;
    margin:4px 0!important;
    font-size:13px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    box-sizing:border-box!important;
    pointer-events:auto!important;
  }
  html[data-womo-theme] .amenity-row,
  html[data-womo-theme] .checkbox-row,
  html[data-womo-theme] .features-row{
    gap:8px 12px!important;
  }
  html[data-womo-theme] .amenity-row label,
  html[data-womo-theme] .checkbox-row label,
  html[data-womo-theme] label:has(input[type="checkbox"]){
    display:inline-flex!important;
    align-items:center!important;
    gap:8px!important;
    min-height:28px!important;
    color:var(--text)!important;
    white-space:normal!important;
  }
}
@media(max-width:380px){
  html[data-womo-theme] .topbar.appbar .logo{max-width:110px!important;}
  html[data-womo-theme] .topbar.appbar h1{font-size:15px!important;}
  html[data-womo-theme] .topbar.appbar .nav > a,
  html[data-womo-theme] .topbar.appbar .nav > .dropdown > button{padding:5px 6px!important;font-size:11px!important;}
}


/* Application setup / selectable header logos 2026-06-07 */
.topbar.appbar .logo.header-logo-wide{
  height:58px!important;
  max-width:420px!important;
  width:auto!important;
  object-fit:cover!important;
  object-position:left center!important;
  background:transparent!important;
  border-radius:10px!important;
}
body.womo-wide-header .topbar.appbar h1{
  display:none!important;
}
@media(max-width:760px){
  .topbar.appbar .logo.header-logo-wide{
    height:34px!important;
    max-width:230px!important;
  }
}
@media(max-width:420px){
  .topbar.appbar .logo.header-logo-wide{
    height:30px!important;
    max-width:190px!important;
  }
}
.womo-logo-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:12px}
.womo-logo-option{border:1px solid var(--line,#334155);border-radius:14px;padding:12px;background:rgba(15,23,42,.45);cursor:pointer;display:flex;flex-direction:column;gap:10px;min-height:150px}
.womo-logo-option input{align-self:flex-start}
.womo-logo-option img{max-width:100%;height:84px;object-fit:contain;background:#fff;border-radius:10px;padding:6px}
.womo-logo-option.womo-logo-wide img{background:#030712;padding:0}
.womo-logo-option.selected{outline:3px solid var(--womo-accent,#60a5fa);border-color:var(--womo-accent,#60a5fa)}
.womo-logo-title{font-weight:750;color:var(--text,#f8fafc)}

/* Header-Logo Auswahl */
.topbar.appbar .logo.logo-wide,
.topbar.appbar .logo.header-logo-wide{height:46px!important;max-width:360px!important;object-fit:contain!important;background:transparent!important;border-radius:10px!important;}
@media(max-width:760px){.topbar.appbar .logo.logo-wide,
.topbar.appbar .logo.header-logo-wide{height:28px!important;max-width:150px!important;}}
@media(max-width:420px){.topbar.appbar .logo.logo-wide,
.topbar.appbar .logo.header-logo-wide{height:24px!important;max-width:128px!important;}}
.application-logo-preview{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.application-logo-preview img{max-width:min(100%,520px);max-height:120px;border:1px solid var(--womo-border);border-radius:14px;background:#020617;padding:8px}.application-card-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}


/* Application/Header Logo Refinement 2026-06-07 */
html[data-womo-theme] .topbar.appbar{
  background:#2477b8!important;
  border-bottom-color:#4aa3df!important;
  color:#ffffff!important;
}
html[data-womo-theme] .topbar.appbar h1{color:#ffffff!important;text-shadow:0 1px 2px rgba(0,0,0,.35)!important;}
html[data-womo-theme] .topbar.appbar .logo{
  height:42px!important;
  max-width:170px!important;
  width:auto!important;
  object-fit:contain!important;
}
html[data-womo-theme] body.womo-header-title-visible .topbar.appbar .logo.header-logo-wide,
html[data-womo-theme] body.womo-header-title-visible .topbar.appbar .logo.logo-wide{
  height:42px!important;
  max-width:170px!important;
  object-fit:contain!important;
}
html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.header-logo-wide,
html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.logo-wide{
  height:58px!important;
  max-width:min(48vw,520px)!important;
  object-fit:cover!important;
  object-position:left center!important;
  background:transparent!important;
  border-radius:12px!important;
}
.application-logo-preview{
  width:100%;
  max-width:100%;
  overflow:hidden;
  border:1px solid var(--womo-border,#334155);
  border-radius:14px;
  background:#020617;
  padding:8px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.application-logo-preview img{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  max-height:140px!important;
  object-fit:contain!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  padding:0!important;
}
.application-card-actions .btn,
.application-page a.btn.primary-link{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:42px!important;
  padding:10px 14px!important;
  border-radius:10px!important;
  border:1px solid #2563eb!important;
  background:#1d4ed8!important;
  color:#fff!important;
  font-weight:650!important;
  text-decoration:none!important;
  box-shadow:0 2px 7px rgba(0,0,0,.2)!important;
}
.app-checkbox-label{display:inline-flex;align-items:center;gap:10px;font-weight:650;color:var(--text,#f8fafc)}
.app-checkbox-label input{width:20px;height:20px;accent-color:#2563eb}
@media(max-width:760px){
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.header-logo-wide,
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.logo-wide{height:34px!important;max-width:58vw!important;}
  html[data-womo-theme] body.womo-header-title-visible .topbar.appbar .logo.header-logo-wide,
  html[data-womo-theme] body.womo-header-title-visible .topbar.appbar .logo.logo-wide{height:26px!important;max-width:120px!important;}
  .application-logo-preview img{max-height:90px!important;}
}
@media(max-width:420px){
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.header-logo-wide,
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.logo-wide{height:30px!important;max-width:54vw!important;}
}

/* Application setup/Header refinement v4 2026-06-07 */
html[data-womo-theme] .topbar.appbar{
  background:var(--womo-header-bg,#2477b8)!important;
  border-bottom-color:color-mix(in srgb, var(--womo-header-bg,#2477b8) 74%, #ffffff 26%)!important;
}
html[data-womo-theme] .topbar.appbar .logo{
  height:42px!important;
  max-height:calc(74px - 20px)!important;
  max-width:170px!important;
  width:auto!important;
  object-fit:contain!important;
}
html[data-womo-theme] body.womo-header-title-visible .topbar.appbar .logo.header-logo-wide,
html[data-womo-theme] body.womo-header-title-visible .topbar.appbar .logo.logo-wide{
  height:42px!important;
  max-height:calc(74px - 20px)!important;
  max-width:170px!important;
  width:auto!important;
  object-fit:contain!important;
}
html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.header-logo-wide,
html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.logo-wide{
  height:54px!important;
  max-height:calc(74px - 20px)!important;
  max-width:min(64vw,620px)!important;
  width:auto!important;
  object-fit:cover!important;
  object-position:left center!important;
  background:transparent!important;
  border-radius:12px!important;
}
.application-page select{min-width:min(100%,320px)}
.application-page input[type="color"]{width:58px;height:42px;padding:3px;border-radius:10px;background:#0b1220;border:1px solid #475569}
.application-page .color-text{width:120px;background:#0b1220;color:var(--text);border:1px solid #475569;border-radius:10px;padding:10px 12px;font-size:15px}
.application-logo-preview{min-height:118px!important;}
.application-logo-preview img{
  width:auto!important;
  max-width:100%!important;
  height:auto!important;
  max-height:104px!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
}
@media(max-width:760px){
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.header-logo-wide,
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.logo-wide{
    height:34px!important;
    max-height:34px!important;
    max-width:66vw!important;
  }
  html[data-womo-theme] body.womo-header-title-visible .topbar.appbar .logo.header-logo-wide,
  html[data-womo-theme] body.womo-header-title-visible .topbar.appbar .logo.logo-wide{
    height:26px!important;
    max-height:26px!important;
    max-width:120px!important;
  }
  .application-logo-preview{min-height:90px!important;}
  .application-logo-preview img{max-height:78px!important;}
}
@media(max-width:420px){
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.header-logo-wide,
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.logo-wide{
    height:30px!important;
    max-height:30px!important;
    max-width:62vw!important;
  }
}


/* FINAL HEADER LOGO TRIMMED LAYOUT 2026-06-07
   Ziel: getrimmtes breites Logo nutzt die Headerhöhe; Dropdowns bleiben sichtbar. */
html[data-womo-theme] .topbar.appbar{
  min-height:104px!important;
  height:104px!important;
  padding:8px 14px!important;
  overflow:visible!important;
  position:relative!important;
  z-index:3000!important;
  background:var(--womo-header-bg,#03051d)!important;
}

html[data-womo-theme] .topbar.appbar .logo-link{
  display:flex!important;
  align-items:center!important;
  height:100%!important;
  min-width:0!important;
  flex:0 0 auto!important;
}

html[data-womo-theme] .topbar.appbar .logo,
html[data-womo-theme] .topbar.appbar .logo.header-logo-wide,
html[data-womo-theme] .topbar.appbar .logo.logo-wide{
  display:block!important;
  height:88px!important;
  max-height:88px!important;
  width:auto!important;
  max-width:min(44vw,560px)!important;
  object-fit:cover!important;
  object-position:left center!important;
  background:transparent!important;
  border-radius:0!important;
}

html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo,
html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.header-logo-wide,
html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.logo-wide{
  height:88px!important;
  max-height:88px!important;
  max-width:min(48vw,640px)!important;
}

html[data-womo-theme] .topbar.appbar .nav{
  position:relative!important;
  z-index:3300!important;
  overflow:visible!important;
}

html[data-womo-theme] .topbar.appbar .dropdown,
html[data-womo-theme] .topbar.appbar .dropdown-menu{
  overflow:visible!important;
}

html[data-womo-theme] .topbar.appbar .dropdown-menu{
  z-index:5000!important;
}

.application-logo-preview{
  background:var(--womo-header-bg,#03051d)!important;
}

@media(max-width:760px){
  html[data-womo-theme] .topbar.appbar{
    min-height:84px!important;
    height:auto!important;
    padding:0!important;
  }
  html[data-womo-theme] .topbar.appbar .logo,
  html[data-womo-theme] .topbar.appbar .logo.header-logo-wide,
  html[data-womo-theme] .topbar.appbar .logo.logo-wide,
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo,
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.header-logo-wide,
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.logo-wide{
    height:66px!important;
    max-height:66px!important;
    max-width:58vw!important;
  }
}

@media(max-width:420px){
  html[data-womo-theme] .topbar.appbar .logo,
  html[data-womo-theme] .topbar.appbar .logo.header-logo-wide,
  html[data-womo-theme] .topbar.appbar .logo.logo-wide,
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo,
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.header-logo-wide,
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.logo-wide{
    height:56px!important;
    max-height:56px!important;
    max-width:62vw!important;
  }
}


/* Header height application setting + borderless header logo 2026-06-08 */
html[data-womo-theme] .topbar.appbar{
  min-height:var(--womo-header-height,104px)!important;
  height:var(--womo-header-height,104px)!important;
  padding:0!important;
  overflow:visible!important;
  position:relative!important;
  z-index:3000!important;
  background:var(--womo-header-bg,#03051d)!important;
}
html[data-womo-theme] .topbar.appbar .logo-link{
  display:flex!important;
  align-items:stretch!important;
  align-self:stretch!important;
  height:100%!important;
  min-height:100%!important;
  min-width:0!important;
  flex:0 0 auto!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
}
html[data-womo-theme] .topbar.appbar .logo,
html[data-womo-theme] .topbar.appbar .logo.header-logo-wide,
html[data-womo-theme] .topbar.appbar .logo.logo-wide,
html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo,
html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.header-logo-wide,
html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.logo-wide{
  display:block!important;
  height:var(--womo-header-logo-height,88px)!important;
  max-height:var(--womo-header-logo-height,88px)!important;
  width:auto!important;
  max-width:min(48vw,640px)!important;
  object-fit:cover!important;
  object-position:left center!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
}
html[data-womo-theme] body.womo-header-title-visible .topbar.appbar .logo.header-logo-wide,
html[data-womo-theme] body.womo-header-title-visible .topbar.appbar .logo.logo-wide{
  max-width:170px!important;
}
html[data-womo-theme] .topbar.appbar .nav{position:relative!important;z-index:3300!important;overflow:visible!important;}
html[data-womo-theme] .topbar.appbar .dropdown,
html[data-womo-theme] .topbar.appbar .dropdown-menu{overflow:visible!important;}
html[data-womo-theme] .topbar.appbar .dropdown-menu{z-index:5000!important;}
.application-page .number-input{width:110px;background:#0b1220;color:var(--text);border:1px solid #475569;border-radius:10px;padding:10px 12px;font-size:15px}
@media(max-width:760px){
  html[data-womo-theme] .topbar.appbar{
    min-height:var(--womo-header-height,104px)!important;
    height:auto!important;
    padding:0!important;
  }
  html[data-womo-theme] .topbar.appbar .logo,
  html[data-womo-theme] .topbar.appbar .logo.header-logo-wide,
  html[data-womo-theme] .topbar.appbar .logo.logo-wide,
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo,
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.header-logo-wide,
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.logo-wide{
    height:min(var(--womo-header-logo-height,88px), 66px)!important;
    max-height:min(var(--womo-header-logo-height,88px), 66px)!important;
    max-width:58vw!important;
  }
}
@media(max-width:420px){
  html[data-womo-theme] .topbar.appbar .logo,
  html[data-womo-theme] .topbar.appbar .logo.header-logo-wide,
  html[data-womo-theme] .topbar.appbar .logo.logo-wide,
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo,
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.header-logo-wide,
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.logo-wide{
    height:min(var(--womo-header-logo-height,88px), 56px)!important;
    max-height:min(var(--womo-header-logo-height,88px), 56px)!important;
    max-width:62vw!important;
  }
}

/* Header logo uncut fix 2026-06-08
   Ursache: Das breite Headerlogo wurde in einer zu schmalen Box mit object-fit:cover gerendert.
   Ergebnis war ein rechts abgeschnittenes Banner. Das Logo darf nicht gecroppt werden. */
html[data-womo-theme] .topbar.appbar .logo-link{
  overflow:visible!important;
  flex:0 1 auto!important;
  max-width:min(86vw, calc(100vw - 170px), 920px)!important;
}
html[data-womo-theme] .topbar.appbar .logo,
html[data-womo-theme] .topbar.appbar .logo.header-logo-wide,
html[data-womo-theme] .topbar.appbar .logo.logo-wide,
html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo,
html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.header-logo-wide,
html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.logo-wide{
  height:var(--womo-header-logo-height,104px)!important;
  max-height:var(--womo-header-logo-height,104px)!important;
  width:auto!important;
  max-width:min(86vw, calc(100vw - 170px), 920px)!important;
  object-fit:contain!important;
  object-position:left center!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
}
@media(max-width:760px){
  html[data-womo-theme] .topbar.appbar .logo-link{
    max-width:100%!important;
  }
  html[data-womo-theme] .topbar.appbar .logo,
  html[data-womo-theme] .topbar.appbar .logo.header-logo-wide,
  html[data-womo-theme] .topbar.appbar .logo.logo-wide,
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo,
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.header-logo-wide,
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.logo-wide{
    height:min(var(--womo-header-logo-height,104px), 66px)!important;
    max-height:min(var(--womo-header-logo-height,104px), 66px)!important;
    max-width:100%!important;
    object-fit:contain!important;
  }
}
@media(max-width:420px){
  html[data-womo-theme] .topbar.appbar .logo,
  html[data-womo-theme] .topbar.appbar .logo.header-logo-wide,
  html[data-womo-theme] .topbar.appbar .logo.logo-wide,
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo,
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.header-logo-wide,
  html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.logo-wide{
    height:min(var(--womo-header-logo-height,104px), 56px)!important;
    max-height:min(var(--womo-header-logo-height,104px), 56px)!important;
    max-width:100%!important;
  }
}

/* Header logo fit fix 2026-06-08
   Ziel: Das breite Logo wird vollständig skaliert, aber niemals höher als der Header gerendert.
   Die Header-Zeile selbst bleibt für Dropdown-Menüs overflow:visible; nur die Logo-Box clippt 1px-Rundungs-/Baseline-Überstand. */
html[data-womo-theme] .topbar.appbar{
  box-sizing:border-box!important;
  min-height:var(--womo-header-height,104px)!important;
  height:var(--womo-header-height,104px)!important;
  padding:0!important;
  align-items:center!important;
  overflow:visible!important;
}
html[data-womo-theme] .topbar.appbar .logo-link{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  align-self:stretch!important;
  height:var(--womo-header-height,104px)!important;
  max-height:var(--womo-header-height,104px)!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
  flex:0 1 auto!important;
  max-width:min(86vw, calc(100vw - 170px), 920px)!important;
}
html[data-womo-theme] .topbar.appbar .logo,
html[data-womo-theme] .topbar.appbar .logo.header-logo-wide,
html[data-womo-theme] .topbar.appbar .logo.logo-wide,
html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo,
html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.header-logo-wide,
html[data-womo-theme] body.womo-header-title-hidden .topbar.appbar .logo.logo-wide{
  box-sizing:border-box!important;
  display:block!important;
  height:auto!important;
  max-height:100%!important;
  width:auto!important;
  max-width:100%!important;
  object-fit:contain!important;
  object-position:left center!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
}
html[data-womo-theme] body.womo-header-title-visible .topbar.appbar .logo.header-logo-wide,
html[data-womo-theme] body.womo-header-title-visible .topbar.appbar .logo.logo-wide{
  max-width:170px!important;
}
@media(max-width:760px){
  html[data-womo-theme] .topbar.appbar{
    min-height:var(--womo-header-height,104px)!important;
    height:auto!important;
  }
  html[data-womo-theme] .topbar.appbar .logo-link{
    height:min(var(--womo-header-height,104px),66px)!important;
    max-height:min(var(--womo-header-height,104px),66px)!important;
    max-width:100%!important;
  }
}
@media(max-width:420px){
  html[data-womo-theme] .topbar.appbar .logo-link{
    height:min(var(--womo-header-height,104px),56px)!important;
    max-height:min(var(--womo-header-height,104px),56px)!important;
    max-width:100%!important;
  }
}

/* Header logo containment final fix 2026-06-08
   Das breite Banner wird im Header als Hintergrund der Logo-Box gerendert.
   Dadurch kann das img-Element keine Flex-Zeile mehr aufziehen und nicht unter den Header ragen. */
html[data-womo-theme] .topbar.appbar{
  box-sizing:border-box!important;
  min-height:var(--womo-header-height,104px)!important;
  height:var(--womo-header-height,104px)!important;
  max-height:var(--womo-header-height,104px)!important;
  padding:0!important;
  align-items:center!important;
  overflow:visible!important;
  background:var(--womo-header-bg,#03051d)!important;
}
html[data-womo-theme] .topbar.appbar .logo-link{
  box-sizing:border-box!important;
  display:block!important;
  align-self:stretch!important;
  height:var(--womo-header-height,104px)!important;
  min-height:0!important;
  max-height:var(--womo-header-height,104px)!important;
  width:min(86vw, calc(100vw - 170px), 920px)!important;
  max-width:min(86vw, calc(100vw - 170px), 920px)!important;
  flex:0 1 auto!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background-color:transparent!important;
  background-image:var(--womo-header-logo-url)!important;
  background-repeat:no-repeat!important;
  background-position:left center!important;
  background-size:contain!important;
  box-shadow:none!important;
  overflow:hidden!important;
  line-height:0!important;
}
html[data-womo-theme] .topbar.appbar .logo-link img.logo{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:left center!important;
  opacity:0!important;
  visibility:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  padding:0!important;
  margin:0!important;
  box-shadow:none!important;
}
html[data-womo-theme] body.womo-header-title-visible .topbar.appbar .logo-link.header-logo-link-wide,
html[data-womo-theme] body.womo-header-title-visible .topbar.appbar .logo-link.logo-link-wide{
  width:170px!important;
  max-width:170px!important;
}
html[data-womo-theme] .topbar.appbar .nav{
  min-width:0!important;
}
@media(max-width:760px){
  html[data-womo-theme] .topbar.appbar{
    height:auto!important;
    max-height:none!important;
    min-height:var(--womo-header-height,104px)!important;
  }
  html[data-womo-theme] .topbar.appbar .logo-link{
    height:min(var(--womo-header-height,104px),66px)!important;
    max-height:min(var(--womo-header-height,104px),66px)!important;
    width:100%!important;
    max-width:100%!important;
  }
}
@media(max-width:420px){
  html[data-womo-theme] .topbar.appbar .logo-link{
    height:min(var(--womo-header-height,104px),56px)!important;
    max-height:min(var(--womo-header-height,104px),56px)!important;
  }
}

/* Header logo bottom-edge fix 2026-06-08
   Das Banner darf die untere Headerbegrenzung nicht überdecken.
   Daher bleibt die Header-Zeile selbst unverändert hoch, aber die Logo-Fläche endet 1px früher. */
html[data-womo-theme] .topbar.appbar .logo-link{
  align-self:flex-start!important;
  height:calc(var(--womo-header-height,104px) - 1px)!important;
  max-height:calc(var(--womo-header-height,104px) - 1px)!important;
  background-size:auto calc(100% - 1px)!important;
  background-position:left top!important;
}
html[data-womo-theme] .topbar.appbar .logo-link img.logo{
  height:calc(100% - 1px)!important;
  max-height:calc(100% - 1px)!important;
}
@media(max-width:760px){
  html[data-womo-theme] .topbar.appbar .logo-link{
    height:calc(min(var(--womo-header-height,104px),66px) - 1px)!important;
    max-height:calc(min(var(--womo-header-height,104px),66px) - 1px)!important;
  }
}
@media(max-width:420px){
  html[data-womo-theme] .topbar.appbar .logo-link{
    height:calc(min(var(--womo-header-height,104px),56px) - 1px)!important;
    max-height:calc(min(var(--womo-header-height,104px),56px) - 1px)!important;
  }
}


/* Header layout final 2026-06-08: Logo-Begrenzung, einzeilige Menüs, mobile App-Ansicht, Zentrieroption. */
html[data-womo-theme] .topbar.appbar{
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:10px!important;
  height:var(--womo-header-height,104px)!important;
  min-height:var(--womo-header-height,104px)!important;
  max-height:var(--womo-header-height,104px)!important;
  padding:0!important;
  overflow:visible!important;
  background:var(--womo-header-bg,#03051d)!important;
}
html[data-womo-theme] .topbar.appbar h1{display:none!important;}
html[data-womo-theme] .topbar.appbar .logo-link{
  box-sizing:border-box!important;
  display:block!important;
  align-self:flex-start!important;
  height:calc(var(--womo-header-height,104px) - 1px)!important;
  min-height:0!important;
  max-height:calc(var(--womo-header-height,104px) - 1px)!important;
  width:auto!important;
  max-width:calc(100vw - 430px)!important;
  min-width:180px!important;
  flex:1 1 auto!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background-color:transparent!important;
  background-image:var(--womo-header-logo-url)!important;
  background-repeat:no-repeat!important;
  background-position:left top!important;
  background-size:auto calc(100% - 1px)!important;
  box-shadow:none!important;
  overflow:hidden!important;
  line-height:0!important;
}
html[data-womo-theme] .topbar.appbar .logo-link img.logo{
  display:block!important;
  width:100%!important;
  height:calc(100% - 1px)!important;
  max-width:100%!important;
  max-height:calc(100% - 1px)!important;
  opacity:0!important;
  visibility:hidden!important;
  object-fit:contain!important;
  object-position:left top!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
html[data-womo-theme] .topbar.appbar .nav{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  margin-left:auto!important;
  min-width:max-content!important;
  overflow:visible!important;
  white-space:nowrap!important;
  position:relative!important;
  z-index:3300!important;
}
html[data-womo-theme] .topbar.appbar #womoLogout,
html[data-womo-theme] .topbar.appbar .nav > a,
html[data-womo-theme] .topbar.appbar .nav > button,
html[data-womo-theme] .topbar.appbar .nav > .dropdown > button{
  flex:0 0 auto!important;
  height:38px!important;
  min-height:38px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  line-height:1!important;
  font-size:14px!important;
  font-weight:750!important;
  border-radius:999px!important;
  padding:8px 13px!important;
  margin:0!important;
  text-decoration:none!important;
}
html[data-womo-theme] .topbar.appbar #womoLogout{
  flex:0 0 auto!important;
  margin:0 10px 0 0!important;
  background:#991b1b!important;
  color:#ffffff!important;
  border:1px solid #991b1b!important;
  box-shadow:3px 4px 0 rgba(15,23,42,.24)!important;
}
html[data-womo-theme] body.womo-header-logo-centered .topbar.appbar{
  flex-wrap:wrap!important;
  justify-content:center!important;
  align-content:flex-start!important;
  gap:8px 10px!important;
  height:auto!important;
  max-height:none!important;
  min-height:calc(var(--womo-header-height,104px) + 52px)!important;
  padding-bottom:8px!important;
}
html[data-womo-theme] body.womo-header-logo-centered .topbar.appbar .logo-link{
  flex:0 0 100%!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:calc(var(--womo-header-height,104px) - 1px)!important;
  max-height:calc(var(--womo-header-height,104px) - 1px)!important;
  background-position:center top!important;
  background-size:auto calc(100% - 1px)!important;
}
html[data-womo-theme] body.womo-header-logo-centered .topbar.appbar .nav{
  margin-left:0!important;
  justify-content:center!important;
}
html[data-womo-theme] body.womo-header-logo-centered .topbar.appbar #womoLogout{margin-right:0!important;}
html[data-womo-theme] .application-logo-preview{
  background-color:var(--womo-header-bg,#03051d)!important;
  border:1px solid var(--womo-border,#334155)!important;
  border-radius:14px!important;
  padding:8px!important;
}
@media(max-width:760px){
  html[data-womo-theme] .topbar.appbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"logo logo" "nav logout"!important;
    align-items:center!important;
    gap:8px!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    padding:0 8px 8px 8px!important;
    overflow:visible!important;
  }
  html[data-womo-theme] .topbar.appbar .logo-link{
    grid-area:logo!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:calc(var(--womo-header-height,104px) - 1px)!important;
    max-height:calc(var(--womo-header-height,104px) - 1px)!important;
    background-position:center top!important;
    background-size:contain!important;
  }
  html[data-womo-theme] .topbar.appbar .nav{
    grid-area:nav!important;
    min-width:0!important;
    width:100%!important;
    margin:0!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    justify-content:flex-start!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  html[data-womo-theme] .topbar.appbar .nav::-webkit-scrollbar{display:none!important;}
  html[data-womo-theme] .topbar.appbar #womoLogout{
    grid-area:logout!important;
    margin:0!important;
    height:34px!important;
    min-height:34px!important;
    padding:7px 10px!important;
    font-size:12px!important;
  }
  html[data-womo-theme] .topbar.appbar .nav > a,
  html[data-womo-theme] .topbar.appbar .nav > button,
  html[data-womo-theme] .topbar.appbar .nav > .dropdown > button{
    height:34px!important;
    min-height:34px!important;
    padding:7px 10px!important;
    font-size:12px!important;
  }
}
@media(display-mode:standalone){
  html[data-womo-theme],
  html[data-womo-theme] body{
    scrollbar-width:none!important;
  }
  html[data-womo-theme]::-webkit-scrollbar,
  html[data-womo-theme] body::-webkit-scrollbar{
    width:0!important;
    height:0!important;
    display:none!important;
  }
}


/* Header/Menu final correction 2026-06-08 V2
   - Logout is treated as a normal menu item inside .nav (moved by womo-header.js).
   - Logo never crops: logo box uses image aspect ratio and may force the menu to the next line.
   - If logo and menu no longer fit, the menu wraps left below the logo instead of overlaying it.
   - Centered mode centers the whole menu line including Logout.
   - Preview background follows the live color variable from WomoHeader.apply(). */
html[data-womo-theme] .topbar.appbar{
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  align-content:flex-start!important;
  justify-content:flex-start!important;
  gap:8px 12px!important;
  height:auto!important;
  min-height:var(--womo-header-height,104px)!important;
  max-height:none!important;
  padding:0 0 8px 0!important;
  overflow:visible!important;
  background:var(--womo-header-bg,#03051d)!important;
}
html[data-womo-theme] .topbar.appbar h1{display:none!important;}
html[data-womo-theme] .topbar.appbar .logo-link{
  box-sizing:border-box!important;
  display:block!important;
  flex:0 0 min(calc((var(--womo-header-height,104px) - 1px) * var(--womo-header-logo-aspect,3.895)), 100%)!important;
  width:min(calc((var(--womo-header-height,104px) - 1px) * var(--womo-header-logo-aspect,3.895)), 100%)!important;
  min-width:0!important;
  max-width:100%!important;
  height:calc(var(--womo-header-height,104px) - 1px)!important;
  min-height:0!important;
  max-height:calc(var(--womo-header-height,104px) - 1px)!important;
  align-self:flex-start!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background-color:transparent!important;
  background-image:var(--womo-header-logo-url)!important;
  background-repeat:no-repeat!important;
  background-position:left top!important;
  background-size:contain!important;
  box-shadow:none!important;
  overflow:hidden!important;
  line-height:0!important;
}
html[data-womo-theme] .topbar.appbar .logo-link img.logo{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  opacity:0!important;
  visibility:hidden!important;
  object-fit:contain!important;
  object-position:left top!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
html[data-womo-theme] .topbar.appbar .nav{
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  flex:0 0 auto!important;
  width:auto!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0 10px 0 0!important;
  overflow:visible!important;
  white-space:nowrap!important;
  position:relative!important;
  z-index:3300!important;
}
html[data-womo-theme] .topbar.appbar .nav > a,
html[data-womo-theme] .topbar.appbar .nav > button,
html[data-womo-theme] .topbar.appbar .nav > .dropdown > button,
html[data-womo-theme] .topbar.appbar .nav > #womoLogout{
  box-sizing:border-box!important;
  flex:0 0 auto!important;
  height:38px!important;
  min-height:38px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  line-height:1!important;
  font-size:14px!important;
  font-weight:750!important;
  border-radius:999px!important;
  padding:8px 13px!important;
  margin:0!important;
  text-decoration:none!important;
}
html[data-womo-theme] .topbar.appbar .nav > #womoLogout{
  background:#991b1b!important;
  color:#ffffff!important;
  border:1px solid #991b1b!important;
  box-shadow:3px 4px 0 rgba(15,23,42,.24)!important;
  cursor:pointer!important;
}
html[data-womo-theme] .topbar.appbar .dropdown{flex:0 0 auto!important;position:relative!important;overflow:visible!important;}
html[data-womo-theme] .topbar.appbar .dropdown-menu{overflow:visible!important;z-index:5000!important;}

html[data-womo-theme] body.womo-header-logo-centered .topbar.appbar{
  justify-content:center!important;
  align-content:flex-start!important;
  padding-bottom:8px!important;
}
html[data-womo-theme] body.womo-header-logo-centered .topbar.appbar .logo-link{
  flex:0 0 100%!important;
  width:100%!important;
  max-width:100%!important;
  background-position:center top!important;
  background-size:auto calc(100% - 1px)!important;
}
html[data-womo-theme] body.womo-header-logo-centered .topbar.appbar .nav{
  flex:0 1 auto!important;
  justify-content:center!important;
  padding:0!important;
  margin:0 auto!important;
}

html[data-womo-theme] .application-logo-preview{
  background-color:var(--womo-header-bg,#03051d)!important;
  border:1px solid var(--womo-border,#334155)!important;
  border-radius:14px!important;
  padding:8px!important;
  overflow:hidden!important;
}
html[data-womo-theme] .application-logo-preview img{
  display:block!important;
  max-width:100%!important;
  max-height:180px!important;
  object-fit:contain!important;
  margin:0 auto!important;
}

@media(max-width:760px){
  html[data-womo-theme] .topbar.appbar{
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:8px!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:0 8px 8px 8px!important;
    overflow:visible!important;
  }
  html[data-womo-theme] .topbar.appbar .logo-link{
    flex:0 0 auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:calc(var(--womo-header-height,104px) - 1px)!important;
    max-height:calc(var(--womo-header-height,104px) - 1px)!important;
    background-position:center top!important;
    background-size:contain!important;
  }
  html[data-womo-theme] .topbar.appbar .nav{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:0!important;
    margin:0!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    justify-content:flex-start!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  html[data-womo-theme] .topbar.appbar .nav::-webkit-scrollbar{display:none!important;}
  html[data-womo-theme] body.womo-header-logo-centered .topbar.appbar .nav{justify-content:center!important;}
  html[data-womo-theme] .topbar.appbar .nav > a,
  html[data-womo-theme] .topbar.appbar .nav > button,
  html[data-womo-theme] .topbar.appbar .nav > .dropdown > button,
  html[data-womo-theme] .topbar.appbar .nav > #womoLogout{
    height:34px!important;
    min-height:34px!important;
    padding:7px 10px!important;
    font-size:12px!important;
  }
}

/* Header/menu compactness + typography correction 2026-06-08 V3
   - Menüs und Untermenüs nicht fett rendern.
   - Mobile Menüleiste kompakter direkt unter dem Logo.
   - Logout bleibt normaler Menüpunkt in derselben Zeile. */
html[data-womo-theme] .topbar.appbar .nav > a,
html[data-womo-theme] .topbar.appbar .nav > button,
html[data-womo-theme] .topbar.appbar .nav > .dropdown > button,
html[data-womo-theme] .topbar.appbar .nav > #womoLogout,
html[data-womo-theme] .topbar .nav > a,
html[data-womo-theme] .topbar .nav > button,
html[data-womo-theme] .topbar .nav > .dropdown > button,
html[data-womo-theme] .topbar .nav > #womoLogout{
  font-weight:500!important;
  letter-spacing:0!important;
}
html[data-womo-theme] .topbar.appbar .dropdown-menu a,
html[data-womo-theme] .topbar .dropdown-menu a{
  font-weight:500!important;
  letter-spacing:0!important;
}

@media(max-width:760px){
  html[data-womo-theme] .topbar.appbar{
    gap:4px!important;
    padding:0 6px 5px 6px!important;
  }
  html[data-womo-theme] .topbar.appbar .nav{
    gap:4px!important;
    justify-content:flex-start!important;
    align-items:center!important;
    padding:0!important;
    margin:0!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
  }
  html[data-womo-theme] .topbar.appbar .nav > a,
  html[data-womo-theme] .topbar.appbar .nav > button,
  html[data-womo-theme] .topbar.appbar .nav > .dropdown > button,
  html[data-womo-theme] .topbar.appbar .nav > #womoLogout{
    height:31px!important;
    min-height:31px!important;
    padding:5px 7px!important;
    font-size:clamp(10px,2.75vw,12px)!important;
    line-height:1!important;
    font-weight:500!important;
    box-shadow:2px 3px 0 rgba(15,23,42,.20)!important;
  }
  html[data-womo-theme] .topbar.appbar .dropdown-menu a{
    font-size:12px!important;
    font-weight:500!important;
    padding:8px 10px!important;
  }
}

@media(max-width:390px){
  html[data-womo-theme] .topbar.appbar{
    padding-left:4px!important;
    padding-right:4px!important;
  }
  html[data-womo-theme] .topbar.appbar .nav{
    gap:3px!important;
  }
  html[data-womo-theme] .topbar.appbar .nav > a,
  html[data-womo-theme] .topbar.appbar .nav > button,
  html[data-womo-theme] .topbar.appbar .nav > .dropdown > button,
  html[data-womo-theme] .topbar.appbar .nav > #womoLogout{
    height:30px!important;
    min-height:30px!important;
    padding:5px 5px!important;
    font-size:10px!important;
  }
}

/* Mobile header vertical compaction 2026-06-08 V4
   Menügrößen bleiben aus V3 erhalten; nur die verschwendete Höhe ober-/unterhalb des Logos wird reduziert. */
@media(max-width:760px){
  html[data-womo-theme] .topbar.appbar{
    gap:2px!important;
    padding:0 6px 3px 6px!important;
  }
  html[data-womo-theme] .topbar.appbar .logo-link,
  html[data-womo-theme] body.womo-header-logo-centered .topbar.appbar .logo-link{
    width:100%!important;
    max-width:100%!important;
    height:clamp(72px,25vw,104px)!important;
    min-height:0!important;
    max-height:clamp(72px,25vw,104px)!important;
    background-size:100% auto!important;
    background-position:center top!important;
  }
  html[data-womo-theme] .topbar.appbar .nav{
    margin-top:0!important;
    margin-bottom:0!important;
  }
}

@media(max-width:390px){
  html[data-womo-theme] .topbar.appbar{
    gap:1px!important;
    padding-bottom:2px!important;
  }
  html[data-womo-theme] .topbar.appbar .logo-link,
  html[data-womo-theme] body.womo-header-logo-centered .topbar.appbar .logo-link{
    height:clamp(66px,24vw,96px)!important;
    max-height:clamp(66px,24vw,96px)!important;
  }
}

/* Mobile header ultra compact 2026-06-08 V5
   Nur mobile Vertikalhöhe: Logo direkt oben, Menü direkt darunter, kein künstlicher Header-Mindestabstand. */
@media(max-width:760px){
  html[data-womo-theme] .topbar.appbar,
  html[data-womo-theme] body.womo-header-logo-centered .topbar.appbar{
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    align-content:flex-start!important;
    gap:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:0 4px 2px 4px!important;
    overflow:visible!important;
  }

  html[data-womo-theme] .topbar.appbar .logo-link,
  html[data-womo-theme] body.womo-header-logo-centered .topbar.appbar .logo-link{
    box-sizing:border-box!important;
    display:block!important;
    flex:0 0 auto!important;
    align-self:stretch!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:clamp(74px, calc(100vw / var(--womo-header-logo-aspect,3.895)), 108px)!important;
    min-height:0!important;
    max-height:clamp(74px, calc(100vw / var(--womo-header-logo-aspect,3.895)), 108px)!important;
    margin:0!important;
    padding:0!important;
    background-position:center top!important;
    background-size:100% auto!important;
    overflow:hidden!important;
  }

  html[data-womo-theme] .topbar.appbar .nav,
  html[data-womo-theme] body.womo-header-logo-centered .topbar.appbar .nav{
    box-sizing:border-box!important;
    align-self:center!important;
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    margin:2px auto 0 auto!important;
    padding:0!important;
    gap:4px!important;
    justify-content:center!important;
    align-items:center!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  html[data-womo-theme] .topbar.appbar .nav::-webkit-scrollbar{display:none!important;}
}

@media(max-width:390px){
  html[data-womo-theme] .topbar.appbar,
  html[data-womo-theme] body.womo-header-logo-centered .topbar.appbar{
    padding-left:3px!important;
    padding-right:3px!important;
    padding-bottom:1px!important;
  }
  html[data-womo-theme] .topbar.appbar .logo-link,
  html[data-womo-theme] body.womo-header-logo-centered .topbar.appbar .logo-link{
    height:clamp(68px, calc(100vw / var(--womo-header-logo-aspect,3.895)), 96px)!important;
    max-height:clamp(68px, calc(100vw / var(--womo-header-logo-aspect,3.895)), 96px)!important;
  }
  html[data-womo-theme] .topbar.appbar .nav,
  html[data-womo-theme] body.womo-header-logo-centered .topbar.appbar .nav{
    margin-top:1px!important;
    gap:3px!important;
  }
}

/* Mobile header menu visibility fix 2026-06-08 V6
   Ziel: mobile Headerhöhe weiterhin knapp, aber Button-Schatten und Dropdowns dürfen nicht abgeschnitten werden.
   Ursache V5: .nav hatte overflow-x:auto; dadurch wird overflow-y:visible von Browsern effektiv gekappt. */
@media(max-width:760px){
  html[data-womo-theme] .topbar.appbar,
  html[data-womo-theme] body.womo-header-logo-centered .topbar.appbar{
    overflow:visible!important;
    padding:0 4px 6px 4px!important;
    gap:0!important;
    position:relative!important;
    z-index:4000!important;
  }

  html[data-womo-theme] .topbar.appbar .logo-link,
  html[data-womo-theme] body.womo-header-logo-centered .topbar.appbar .logo-link{
    margin:0!important;
  }

  html[data-womo-theme] .topbar.appbar .nav,
  html[data-womo-theme] body.womo-header-logo-centered .topbar.appbar .nav{
    overflow:visible!important;
    overflow-x:visible!important;
    overflow-y:visible!important;
    flex-wrap:nowrap!important;
    align-self:center!important;
    width:auto!important;
    max-width:100%!important;
    margin:2px auto 0 auto!important;
    padding:0 0 4px 0!important;
    gap:4px!important;
    justify-content:center!important;
    position:relative!important;
    z-index:5000!important;
  }

  html[data-womo-theme] .topbar.appbar .dropdown{
    position:relative!important;
    overflow:visible!important;
    z-index:5100!important;
  }

  html[data-womo-theme] .topbar.appbar .dropdown-menu{
    position:absolute!important;
    display:none!important;
    top:calc(100% + 7px)!important;
    left:0!important;
    right:auto!important;
    min-width:180px!important;
    width:max-content!important;
    max-width:calc(100vw - 12px)!important;
    overflow:visible!important;
    z-index:9999!important;
  }

  html[data-womo-theme] .topbar.appbar .dropdown.open .dropdown-menu{
    display:flex!important;
    flex-direction:column!important;
  }

  html[data-womo-theme] .topbar.appbar .dropdown:nth-last-of-type(1) .dropdown-menu,
  html[data-womo-theme] .topbar.appbar .dropdown:last-of-type .dropdown-menu{
    left:auto!important;
    right:0!important;
  }

  html[data-womo-theme] .topbar.appbar .nav > a,
  html[data-womo-theme] .topbar.appbar .nav > button,
  html[data-womo-theme] .topbar.appbar .nav > .dropdown > button,
  html[data-womo-theme] .topbar.appbar .nav > #womoLogout{
    overflow:visible!important;
    margin:0!important;
  }
}

@media(max-width:390px){
  html[data-womo-theme] .topbar.appbar,
  html[data-womo-theme] body.womo-header-logo-centered .topbar.appbar{
    padding-left:3px!important;
    padding-right:3px!important;
    padding-bottom:5px!important;
  }
  html[data-womo-theme] .topbar.appbar .nav,
  html[data-womo-theme] body.womo-header-logo-centered .topbar.appbar .nav{
    gap:3px!important;
    padding-bottom:4px!important;
  }
}


/* Header logo full-screen centered option 2026-06-12
   Separate mode for Setup → Applikation → Header: logo row spans the viewport width. */
html[data-womo-theme] body.womo-header-logo-fullwidth-centered .topbar.appbar{
  align-items:stretch!important;
  justify-content:center!important;
  padding-left:0!important;
  padding-right:0!important;
}
html[data-womo-theme] body.womo-header-logo-fullwidth-centered .topbar.appbar .logo-link{
  flex:0 0 100vw!important;
  width:100vw!important;
  max-width:100vw!important;
  min-width:100vw!important;
  margin-left:calc((100% - 100vw) / 2)!important;
  margin-right:calc((100% - 100vw) / 2)!important;
  background-position:center top!important;
  background-size:100% auto!important;
}
html[data-womo-theme] body.womo-header-logo-fullwidth-centered .topbar.appbar .nav{
  flex:0 1 auto!important;
  margin-left:auto!important;
  margin-right:auto!important;
  justify-content:center!important;
  padding-left:8px!important;
  padding-right:8px!important;
}
@media(max-width:760px){
  html[data-womo-theme] body.womo-header-logo-fullwidth-centered .topbar.appbar{
    padding-left:0!important;
    padding-right:0!important;
  }
  html[data-womo-theme] body.womo-header-logo-fullwidth-centered .topbar.appbar .nav{
    max-width:calc(100vw - 8px)!important;
    padding-left:4px!important;
    padding-right:4px!important;
  }
}