/**
 * MOWZ App Brand Layer (neues CI) – [www/css/brand.css]
 * Lädt NACH custom.css: überschreibt bootstrap-overrides (BS3) ohne deren 7000+ Zeilen zu editieren.
 * Quelle: .cursor/rules/branding.mdc
 */

/* -------------------------------------------------------------------------- */
/* Design Tokens (Single Source fürs CI)                                      */
/* -------------------------------------------------------------------------- */
:root {
  /* Primär (Sky Blue – in der App eher links/info, dezent) */
  --color-primary: #3b82c8;
  --color-primary-light: #ebf3fb;
  --color-primary-medium: #c5ddef;
  --color-link-hover: #2d6a9e;
  /* Akzent (Peach – warme CTAs, ersetzt früher #CC8B65) */
  --color-accent: #f0826d;
  --color-accent-hover: #e06b55;
  /* Trust (Mint) */
  --color-trust: #059669;
  --color-trust-darker: #047857;
  /* App-Header + Primary-Full (Brand Dark) */
  --color-brand-dark: #0f4a36;
  /* Noch etwas tiefer fürs Header-Gradient (früher #100C0D-Start) */
  --color-brand-darker: #0a2a1f;
  /* Nav: aktiver / Dropdown-Hintergrund (grün, kein altes Blaugrau #1a242f) */
  --color-nav-active-bg: #163d2e;
  --color-nav-toggle-border: #1a2e26;
  /* Text & Flächen */
  --color-text: #1b2d45;
  --color-text-muted: #4e6c8e;
  --color-bg: #ffffff;
  --color-bg-soft: #f6f9fc;
  --color-border: #d4e3f0;
  /* Navy / CTA-Dunkel */
  --color-dark: #1b2d45;
  /* Kein freier CI-Token: Bootstrap „danger" / gekauft-Rand beibehalten */
  --color-danger: #e74c3c;
  /* Schatten (Navy-Tönung, kein reines Schwarz) */
  --shadow-sm: 0 2px 8px rgba(27, 45, 69, 0.06);
  --shadow-md: 0 4px 20px rgba(27, 45, 69, 0.08);
  /* Radien (Branding) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  /* App-Chrome (index.html body padding-top, Navbar-Höhe, custom.css .pagescroll top) — für Ladebalken-Position */
  --mowz-navbar-height: 50px;
  --mowz-body-padding-top: 70px;
  --mowz-pagescroll-pull: 15px;
  /* Test: Ladebalken nach unten schieben; bei Bedarf auf 0px */
  --mowz-loading-bar-offset-y: 0px;
}

/* -------------------------------------------------------------------------- */
/* Globale Typo & Hintergrund (überschreibt bootstrap-overrides body)         */
/* -------------------------------------------------------------------------- */
body,
.mowz-app-body {
  color: var(--color-text) !important;
  background-color: var(--color-primary-light) !important;
  /* CI Inter (lokal) mit Lato-Fallback, bis voll migrärt */
  font-family: "Inter", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: "Inter", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: inherit;
}

a,
a:hover,
a:focus {
  color: var(--color-primary) !important;
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--color-link-hover) !important;
  text-decoration: underline;
}

/* Sidebar-Menü: Einträge sind keine Sky-Blue-Links, sondern Navigation – also
   neutral in Text-Farbe. Hover bekommt nur einen weichen Background, kein Blau.
   Höhere Spezifität als .sidenav a:link in custom.css, mit !important gegen den
   globalen a-Override oben. */
.sidenav a,
.sidenav a:link,
.sidenav a:visited,
.sidenav a:active {
  color: var(--color-text) !important;
  text-decoration: none !important;
}
.sidenav a:hover,
.sidenav a:focus {
  color: var(--color-text) !important;
  background-color: var(--color-bg-soft);
  text-decoration: none !important;
}

/* Dropdown-Menü-Einträge (Drei-Punkte-Menü an den Cards, Settings-Dropdowns
   etc.): ebenfalls neutrale Text-Farbe, nicht Sky Blue. Hover bekommt einen
   weichen Background. Navbar-Dropdowns sind über spezifischere Selektoren
   weiter oben separat geregelt und nicht betroffen. */
.dropdown-menu > li > a,
.dropdown-menu > li > a:link,
.dropdown-menu > li > a:visited,
.dropdown-menu > li > a:active {
  color: var(--color-text) !important;
  text-decoration: none !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: var(--color-text) !important;
  background-color: var(--color-bg-soft) !important;
  text-decoration: none !important;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #fff !important;
  background-color: var(--color-brand-dark) !important;
}

/* Bild-Ändern-Button (Profil + Wunsch): steht solo in einer .btn-group, daher
   alle Ecken rund halten. Bootstrap-3 setzt sonst je nach Position 0-Radien. */
.mowz-bildbtn-group > .btn,
.mowz-bildbtn-group > .btn:first-child,
.mowz-bildbtn-group > .btn:last-child,
.mowz-bildbtn-group > .btn:not(:first-child):not(:last-child) {
  border-radius: var(--radius-sm) !important;
}
/* Dropdown-Items in den Bild-ändern-Dropdowns: Bootstrap-3 default padding
   (3px 20px) ist mit 14px Font zu eng fürs Antippen – großzügiger machen,
   damit die Touch-Targets passen. */
.mowz-bildbtn-group > .dropdown-menu > li > a {
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.4;
}

/* -------------------------------------------------------------------------- */
/* Globaler Vollbild-Lade-Overlay (#loadsymbol): Material-Style-Ring nur per CSS */
/* Ersetzt früheres fa-spinner; Farbe über currentColor = dezentes CI (nicht Peach). */
/* -------------------------------------------------------------------------- */
@keyframes mowz-global-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

/* Asymmetrisches Wachsen/Stauchen der sichtbaren Bogenlänge (stroke-dash*) */
@keyframes mowz-global-spinner-dash {
  0% {
    stroke-dasharray: 1 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90 150;
    stroke-dashoffset: -124;
  }
}

#loadsymbol.overlay .mowz-overlay-spinner-host.overlay-content {
  position: absolute;
  inset: 0;
  top: 0;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#loadsymbol .mowz-global-overlay-spinner {
  color: var(--color-text-muted);
  display: block;
  animation: mowz-global-spinner-rotate 1.2s linear infinite;
  transform-origin: 50% 50%;
}

#loadsymbol .mowz-global-overlay-spinner__arc {
  stroke-dasharray: 1 150;
  stroke-dashoffset: 0;
  animation: mowz-global-spinner-dash 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  #loadsymbol .mowz-global-overlay-spinner {
    animation-duration: 2.8s;
  }
  #loadsymbol .mowz-global-overlay-spinner__arc {
    animation-duration: 2.4s;
  }
}

/* Issue #150: Eingebetteter Spinner in Buttons (Login, Register, Modals, …) */
.mowz-btn-spinner-host {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  vertical-align: middle;
}

.mowz-btn-spinner-label {
  font-weight: inherit;
}

.mowz-btn-spinner-host .mowz-global-overlay-spinner {
  flex-shrink: 0;
  color: inherit;
  display: block;
  animation: mowz-global-spinner-rotate 1.2s linear infinite;
  transform-origin: 50% 50%;
}

.mowz-btn-spinner-host .mowz-global-overlay-spinner__arc {
  stroke-dasharray: 1 150;
  stroke-dashoffset: 0;
  animation: mowz-global-spinner-dash 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .mowz-btn-spinner-host .mowz-global-overlay-spinner {
    animation-duration: 2.8s;
  }
  .mowz-btn-spinner-host .mowz-global-overlay-spinner__arc {
    animation-duration: 2.4s;
  }
}

/* Losgelöster Mini-Spinner (Gesamtwert-Zeile, Freundesuche, Icon-Slots) */
.mowz-inline-spinner-wrap {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}

.mowz-inline-spinner-wrap .mowz-global-overlay-spinner {
  color: inherit;
  display: block;
  animation: mowz-global-spinner-rotate 1.2s linear infinite;
  transform-origin: 50% 50%;
}

.mowz-inline-spinner-wrap .mowz-global-overlay-spinner__arc {
  stroke-dasharray: 1 150;
  stroke-dashoffset: 0;
  animation: mowz-global-spinner-dash 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .mowz-inline-spinner-wrap .mowz-global-overlay-spinner {
    animation-duration: 2.8s;
  }
  .mowz-inline-spinner-wrap .mowz-global-overlay-spinner__arc {
    animation-duration: 2.4s;
  }
}

#loadsymbol2 .mowz-global-overlay-spinner {
  color: var(--color-brand-dark);
  display: block;
  animation: mowz-global-spinner-rotate 1.2s linear infinite;
  transform-origin: 50% 50%;
}

#loadsymbol2 .mowz-global-overlay-spinner__arc {
  stroke-dasharray: 1 150;
  stroke-dashoffset: 0;
  animation: mowz-global-spinner-dash 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  #loadsymbol2 .mowz-global-overlay-spinner {
    animation-duration: 2.8s;
  }
  #loadsymbol2 .mowz-global-overlay-spinner__arc {
    animation-duration: 2.4s;
  }
}

#loadsymbolsmal .mowz-global-overlay-spinner {
  color: #fff;
  display: block;
  animation: mowz-global-spinner-rotate 1.2s linear infinite;
  transform-origin: 50% 50%;
}

#loadsymbolsmal .mowz-global-overlay-spinner__arc {
  stroke-dasharray: 1 150;
  stroke-dashoffset: 0;
  animation: mowz-global-spinner-dash 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  #loadsymbolsmal .mowz-global-overlay-spinner {
    animation-duration: 2.8s;
  }
  #loadsymbolsmal .mowz-global-overlay-spinner__arc {
    animation-duration: 2.4s;
  }
}

#modal-wunsch #update .mowz-wunsch-bild-update-icon .mowz-global-overlay-spinner {
  color: inherit;
  display: block;
  vertical-align: middle;
  animation: mowz-global-spinner-rotate 1.2s linear infinite;
  transform-origin: 50% 50%;
}

#modal-wunsch #update .mowz-wunsch-bild-update-icon .mowz-global-overlay-spinner__arc {
  stroke-dasharray: 1 150;
  stroke-dashoffset: 0;
  animation: mowz-global-spinner-dash 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  #modal-wunsch #update .mowz-wunsch-bild-update-icon .mowz-global-overlay-spinner {
    animation-duration: 2.8s;
  }
  #modal-wunsch #update .mowz-wunsch-bild-update-icon .mowz-global-overlay-spinner__arc {
    animation-duration: 2.4s;
  }
}

.mowz-suchfreunde-loading .mowz-inline-spinner-wrap .mowz-global-overlay-spinner {
  color: var(--color-text-muted);
}

#modal-wunsch #openlink .mowz-inline-spinner-wrap .mowz-global-overlay-spinner {
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* Profileinstellungen: Lade-Ring über dem Profilkreis (clientseitige Optimize) */
/* Nutzt dieselben Keyframes wie #loadsymbol (Material-Dash); kein zusätzlicher Fullscreen. */
/* -------------------------------------------------------------------------- */
#page-einstellungen .mowz-profilbild-frame {
  position: relative;
  width: 200px;
  height: 200px;
  margin-bottom: 12px;
  border-radius: 50%;
}

#page-einstellungen .mowz-profilbild-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  /* Leichtes Overlay, damit der Ring auf hellen Fotos lesbar bleibt */
  background-color: rgba(27, 45, 69, 0.35);
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

#page-einstellungen
  .mowz-profilbild-frame.is-mowz-profilbild-loading
  .mowz-profilbild-loading {
  visibility: visible;
  opacity: 1;
}

#page-einstellungen .mowz-md-spinner-svg {
  color: var(--color-bg);
  display: block;
  animation: mowz-global-spinner-rotate 1.2s linear infinite;
  transform-origin: 50% 50%;
}

#page-einstellungen .mowz-md-spinner-svg__arc {
  stroke-dasharray: 1 150;
  stroke-dashoffset: 0;
  animation: mowz-global-spinner-dash 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  #page-einstellungen .mowz-md-spinner-svg {
    animation-duration: 2.8s;
  }
  #page-einstellungen .mowz-md-spinner-svg__arc {
    animation-duration: 2.4s;
  }
}

/* Accordion-Toggle in panel-default panel-heading (Profileinstellungen:
   „Passwort ändern", „Benachrichtigungen"): das <a>-Tag ist Bootstrap-3-
   Pflicht für data-toggle="collapse" und kann nicht entfernt werden, ohne
   die Collapse-Logik zu brechen. Default: neutrale Navy-Farbe statt Sky Blue,
   kein Browser-Outline. Hover: Peach-Schrift + linker 3px-Akzent-Balken
   als Inset-Shadow (kein Layout-Shift) – klar sichtbare Klick-Affordanz. */
.panel-default > .panel-heading {
  transition: box-shadow 0.18s ease;
}
.panel-default > .panel-heading:hover {
  box-shadow: inset 3px 0 0 var(--color-accent);
}
.panel-default > .panel-heading .accordion-toggle,
.panel-default > .panel-heading .accordion-toggle:link,
.panel-default > .panel-heading .accordion-toggle:visited,
.panel-default > .panel-heading .accordion-toggle:active {
  color: var(--color-text) !important;
  text-decoration: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease;
}
.panel-default > .panel-heading:hover .accordion-toggle,
.panel-default > .panel-heading .accordion-toggle:hover,
.panel-default > .panel-heading .accordion-toggle:focus {
  color: var(--color-accent) !important;
  background-color: transparent !important;
  text-decoration: none !important;
  outline: none !important;
}

.text-primary {
  color: var(--color-brand-dark) !important;
}
a.text-primary:hover,
a.text-primary:focus {
  color: var(--color-brand-darker) !important;
}

.text-muted {
  color: var(--color-text-muted) !important;
}

.text-success {
  color: var(--color-trust) !important;
}
a.text-success:hover,
a.text-success:focus {
  color: var(--color-trust-darker) !important;
}

.bg-primary {
  color: #fff !important;
  background-color: var(--color-brand-darker) !important;
}
a.bg-primary:hover,
a.bg-primary:focus {
  background-color: var(--color-nav-active-bg) !important;
}

/* .bg-success ist in der App CTA-Fläche (z. B. Floating-Plus-Button), keine
   Trust-/Erfolgs-Semantik. Daher Peach – konsistent mit .btn-success. */
.bg-success {
  background-color: var(--color-accent) !important;
}
a.bg-success:hover,
a.bg-success:focus {
  background-color: var(--color-accent-hover) !important;
}

.bg-info {
  background-color: var(--color-brand-dark) !important;
}
a.bg-info:hover,
a.bg-info:focus {
  background-color: var(--color-nav-active-bg) !important;
}

/* -------------------------------------------------------------------------- */
/* Login-Screen (#page-login) – Card-Layout, CI-Tokens; nur diese Seite.       */
/* Abstand oben: .pagescroll zieht global nach oben (custom.css top:-15px).   */
/* -------------------------------------------------------------------------- */
#page-login > .container {
  padding-top: 24px;
  padding-bottom: 24px;
  max-width: 420px;
}

#page-login .panel.panel-default {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background: var(--color-bg);
  overflow: hidden;
  margin-bottom: 0;
}

/* Dezente Akzentlinie oben (Sky Blue → Peach; kein Brand-Dark/Trust im Content). */
#page-login .panel.panel-default::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-accent)
  );
}

#page-login .panel.panel-default > .panel-body {
  padding: 20px 20px 22px;
}

#page-login .form-signin .form-control {
  margin-bottom: 12px;
  padding: 12px 14px;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-primary-light);
  color: var(--color-text);
  box-shadow: none;
}

#page-login .form-signin .form-control:focus {
  border-color: var(--color-primary);
  background-color: var(--color-bg);
  box-shadow: 0 0 0 1px var(--color-primary-medium);
}

#page-login .form-signin #btnlogin {
  margin-top: 4px;
}

/* Login-Button-Spinner: globale .mowz-btn-spinner-host (Issue #150). */

/* Primäraktion Login: Sky Blue (Grün nur Navbar, nicht hier). */
#page-login #btnlogin.btn {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  border-radius: var(--radius-md);
  font-weight: 600;
  padding-top: 12px;
  padding-bottom: 12px;
  box-shadow: none;
}

#page-login #btnlogin.btn:hover,
#page-login #btnlogin.btn:focus {
  background-color: var(--color-link-hover) !important;
  border-color: var(--color-link-hover) !important;
  color: #fff !important;
}

/* „Zugangsdaten vergessen“: sekundär, nicht wie Haupt-CTA. */
#page-login .form-signin > p.text-center {
  margin-top: 14px;
  margin-bottom: 6px;
}

#page-login .form-signin > p.text-center > a {
  font-size: 13px !important;
  color: var(--color-text-muted) !important;
}

#page-login .form-signin > p.text-center > a:hover,
#page-login .form-signin > p.text-center > a:focus {
  color: var(--color-primary) !important;
}

/* Trenner „oder“ an CI-Border angeglichen. */
#page-login .divider {
  background: var(--color-border);
  margin: 22px auto;
}

#page-login .divider:after {
  border-color: var(--color-border);
  color: var(--color-text-muted);
  background: var(--color-bg);
}

/* Sekundär: Registrieren – Peach-Akzent (Outline), Text Navy statt Brand-Dark. */
#page-login button[data-target="#modal-register"].btn {
  background-color: var(--color-bg) !important;
  border: 1px solid var(--color-accent) !important;
  color: var(--color-text) !important;
  border-radius: var(--radius-md);
  font-weight: 600;
  padding-top: 12px;
  padding-bottom: 12px;
  box-shadow: none;
}

#page-login button[data-target="#modal-register"].btn:hover,
#page-login button[data-target="#modal-register"].btn:focus {
  background-color: rgba(240, 130, 109, 0.12) !important;
  border-color: var(--color-accent-hover) !important;
  color: var(--color-accent-hover) !important;
}

/* Tertiär: Gast-Modus zurückhaltend. */
#page-login #div-weiterohnelogin .btn {
  background-color: transparent !important;
  border: 1px dashed var(--color-border) !important;
  color: var(--color-text-muted) !important;
  border-radius: var(--radius-md);
  font-weight: 500;
  padding-top: 11px;
  padding-bottom: 11px;
  box-shadow: none;
}

#page-login #div-weiterohnelogin .btn:hover,
#page-login #div-weiterohnelogin .btn:focus {
  background-color: var(--color-bg-soft) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-text) !important;
}

/* Zugangsdaten vergessen / neues Passwort: Primary-CTA Sky Blue statt Brand-Dark
   (Gruen nur Navbar, vgl. Login-Screen). */
#modal-pwvergessen #btn-pwvergessen.btn-primary,
#modal-pwreset #btn-pwreset.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: none;
}

#modal-pwvergessen #btn-pwvergessen.btn-primary:hover,
#modal-pwvergessen #btn-pwvergessen.btn-primary:focus,
#modal-pwreset #btn-pwreset.btn-primary:hover,
#modal-pwreset #btn-pwreset.btn-primary:focus {
  background-color: var(--color-link-hover) !important;
  border-color: var(--color-link-hover) !important;
  color: #fff !important;
}

/* QR-Teilen: Primär-CTA Sky Blue (wie Login/PW), nicht globales Brand-Dark */
#modal-qrcode #btn-qrcode-teilen.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: none;
}
#modal-qrcode #btn-qrcode-teilen.btn-primary:hover,
#modal-qrcode #btn-qrcode-teilen.btn-primary:focus {
  background-color: var(--color-link-hover) !important;
  border-color: var(--color-link-hover) !important;
  color: #fff !important;
}

/* Kommentar zu Wunsch absenden (#send): Sky Blue, gleiche Primärlogik wie Modals — nicht Navbar-Brand-Dark */
#page-wuensche form#formmessagewunsch button#send.btn-primary,
#page-wuensche-freund form#formmessagewunsch button#send.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: none;
}
#page-wuensche form#formmessagewunsch button#send.btn-primary:hover,
#page-wuensche form#formmessagewunsch button#send.btn-primary:focus,
#page-wuensche form#formmessagewunsch button#send.btn-primary:active,
#page-wuensche-freund form#formmessagewunsch button#send.btn-primary:hover,
#page-wuensche-freund form#formmessagewunsch button#send.btn-primary:focus,
#page-wuensche-freund form#formmessagewunsch button#send.btn-primary:active {
  background-color: var(--color-link-hover) !important;
  border-color: var(--color-link-hover) !important;
  color: #fff !important;
}

/* WZ-Detail (#headline): Titelleiste = ein Zeilen-Hit; Kebab (⋯) rechts in Brand Dark wie App-Header; keine Button-Höhe */
#page-wuensche #headline.pageheadline .wz-headline-touch-wrap.btn-group {
  display: block;
  width: 100%;
  float: none !important;
}
#page-wuensche #headline.pageheadline .wz-pageheadline-inner {
  display: grid;
  grid-template-columns: minmax(22px, 1fr) auto minmax(22px, 1fr);
  align-items: center;
  width: 100%;
  gap: 2px;
  box-sizing: border-box;
}
#page-wuensche #headline.pageheadline .wz-pageheadline-inner.wz-headline-expand-toggle.dropdown-toggle {
  appearance: none;
  cursor: pointer;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0;
  padding: 0 !important;
  width: 100%;
  outline: none;
  font: inherit;
  color: inherit !important;
  text-decoration: none;
}
#page-wuensche #headline.pageheadline .wz-pageheadline-inner.wz-headline-expand-toggle.dropdown-toggle::before,
#page-wuensche #headline.pageheadline .wz-pageheadline-inner.wz-headline-expand-toggle.dropdown-toggle::after {
  display: none !important;
  border: none !important;
}
#page-wuensche #headline.pageheadline .wz-headline-expand-toggle.dropdown-toggle:focus-visible {
  /* Fokus-Ring wie Header/Brand Dark statt Sky-Blue (einheitliches CI) */
  box-shadow: 0 0 0 2px rgba(15, 74, 54, 0.35);
  border-radius: var(--radius-sm, 8px);
}
#page-wuensche #headline.pageheadline .wz-headline-expand-toggle.dropdown-toggle:active {
  color: inherit !important;
}
#page-wuensche #headline.pageheadline .wz-pageheadline-title {
  text-align: center;
  justify-self: center;
  max-width: 100%;
  min-width: 0;
}
#page-wuensche #headline.pageheadline .wz-pageheadline-actions {
  justify-self: end;
  min-width: 18px;
  line-height: 1;
}
#page-wuensche #headline.pageheadline .wz-pageheadline-balance {
  min-height: 1px;
}
#page-wuensche #headline.pageheadline .wz-headline-menu-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: var(--color-brand-dark);
  opacity: 0.88;
  transition: opacity 0.15s ease;
}
#page-wuensche #headline.pageheadline .wz-headline-touch-wrap.btn-group.open .wz-headline-menu-caret {
  opacity: 1;
}
#page-wuensche #headline.pageheadline .wz-headline-dropdown-menu {
  margin-top: 2px;
}

/* Issue #142: Sortier-Griffe — Browser „Fast Tap“/Zoom-Gesten reduzieren ohne Scroll zu blockieren.
   Nicht touch-action:none verwenden: sonst kein vertikales Scrollen mehr vom Griff aus. */
#page-wuensche #listewuensche .wunsch-drag-handle,
#page-wunschzettel #subpage-wunschzettel-meine #listewz .wz-drag-handle {
  touch-action: manipulation;
}

/* Wunsch-Karte: „…“-Menü — WZ-Übersicht + Wunsch-Zeile (.wunschpanel in #listewuensche); gleicher Default/Druck/offen */
#page-wunschzettel .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm,
#page-wunschzettelfreund .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm,
#page-wuensche .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm,
#page-wuensche-freund .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm,
#page-wuensche #listewuensche .wunschpanel .btn-group > .btn.dropdown-toggle.btn-default.btn-sm,
#page-wuensche-freund #listewuenschefreund .wunschpanel .btn-group > .btn.dropdown-toggle.btn-default.btn-sm {
  background-color: #fff !important;
  border-color: var(--color-primary-medium) !important;
  color: var(--color-primary) !important;
  box-shadow: none;
}
#page-wunschzettel .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm .glyphicon,
#page-wunschzettelfreund .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm .glyphicon,
#page-wuensche .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm .glyphicon,
#page-wuensche-freund .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm .glyphicon,
#page-wuensche #listewuensche .wunschpanel .btn-group > .btn.dropdown-toggle.btn-default.btn-sm .glyphicon,
#page-wuensche-freund #listewuenschefreund .wunschpanel .btn-group > .btn.dropdown-toggle.btn-default.btn-sm .glyphicon {
  color: var(--color-primary);
}
/* Detail-Wunsch: ⋮ sitzt unter .wunschpanel > .panel-primary > .panel-body (nicht gleiche Kette wie WZ-Karten).
   Hier expliziter Ruhezustand = klassisches btn-default (weiß, #dadada-Rand); CI nur bei Hover/Offen/Klick wie WZ-Chip. */
#page-wuensche #listewuensche .wunschpanel .panel-primary .panel-body .btn-group:not(.open) > .btn.dropdown-toggle.btn-default.btn-sm,
#page-wuensche-freund #listewuenschefreund .wunschpanel .panel-primary .panel-body .btn-group:not(.open) > .btn.dropdown-toggle.btn-default.btn-sm {
  background-color: #fff !important;
  border-color: #dadada !important;
  color: var(--color-text-muted) !important;
  box-shadow: none !important;
}
#page-wuensche #listewuensche .wunschpanel .panel-primary .panel-body .btn-group:not(.open) > .btn.dropdown-toggle.btn-default.btn-sm .glyphicon,
#page-wuensche-freund #listewuenschefreund .wunschpanel .panel-primary .panel-body .btn-group:not(.open) > .btn.dropdown-toggle.btn-default.btn-sm .glyphicon {
  color: var(--color-text-muted) !important;
}
/* Tastatur: sichtbarer Fokus = CI (ohne Maus-Hover); Maus-Nutzer: Blau erst bei Druck/Menü offen (s. :active / .open unten) */
#page-wuensche #listewuensche .wunschpanel .panel-primary .panel-body .btn-group:not(.open) > .btn.dropdown-toggle.btn-default.btn-sm:focus-visible .glyphicon,
#page-wuensche-freund #listewuenschefreund .wunschpanel .panel-primary .panel-body .btn-group:not(.open) > .btn.dropdown-toggle.btn-default.btn-sm:focus-visible .glyphicon {
  color: var(--color-primary) !important;
}
/* Hover / Fokus nur bei geschlossenem Menü — sonst springt die Fläche nach Loslassen auf Weiß */
#page-wunschzettel .panel-primary .panel-body .btn-group:not(.open) > .btn.dropdown-toggle.btn-default.btn-sm:hover,
#page-wunschzettel .panel-primary .panel-body .btn-group:not(.open) > .btn.dropdown-toggle.btn-default.btn-sm:focus,
#page-wunschzettelfreund .panel-primary .panel-body .btn-group:not(.open) > .btn.dropdown-toggle.btn-default.btn-sm:hover,
#page-wunschzettelfreund .panel-primary .panel-body .btn-group:not(.open) > .btn.dropdown-toggle.btn-default.btn-sm:focus,
#page-wuensche .panel-primary .panel-body .btn-group:not(.open) > .btn.dropdown-toggle.btn-default.btn-sm:hover,
#page-wuensche .panel-primary .panel-body .btn-group:not(.open) > .btn.dropdown-toggle.btn-default.btn-sm:focus,
#page-wuensche-freund .panel-primary .panel-body .btn-group:not(.open) > .btn.dropdown-toggle.btn-default.btn-sm:hover,
#page-wuensche-freund .panel-primary .panel-body .btn-group:not(.open) > .btn.dropdown-toggle.btn-default.btn-sm:focus,
#page-wuensche #listewuensche .wunschpanel .btn-group:not(.open) > .btn.dropdown-toggle.btn-default.btn-sm:hover,
#page-wuensche #listewuensche .wunschpanel .btn-group:not(.open) > .btn.dropdown-toggle.btn-default.btn-sm:focus,
#page-wuensche-freund #listewuenschefreund .wunschpanel .btn-group:not(.open) > .btn.dropdown-toggle.btn-default.btn-sm:hover,
#page-wuensche-freund #listewuenschefreund .wunschpanel .btn-group:not(.open) > .btn.dropdown-toggle.btn-default.btn-sm:focus,
#page-wuensche #listewuensche .wunschpanel .panel-primary .panel-body .btn-group:not(.open) > .btn.dropdown-toggle.btn-default.btn-sm:hover,
#page-wuensche #listewuensche .wunschpanel .panel-primary .panel-body .btn-group:not(.open) > .btn.dropdown-toggle.btn-default.btn-sm:focus,
#page-wuensche-freund #listewuenschefreund .wunschpanel .panel-primary .panel-body .btn-group:not(.open) > .btn.dropdown-toggle.btn-default.btn-sm:hover,
#page-wuensche-freund #listewuenschefreund .wunschpanel .panel-primary .panel-body .btn-group:not(.open) > .btn.dropdown-toggle.btn-default.btn-sm:focus {
  background-color: #fff !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  box-shadow: 0 0 0 1px rgba(59, 130, 200, 0.18);
}
/* Menü offen: leicht blau wie Druck — bleibt sichtbar bis zum Schließen */
#page-wunschzettel .panel-primary .panel-body .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm,
#page-wunschzettel .panel-primary .panel-body .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm:hover,
#page-wunschzettel .panel-primary .panel-body .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm:focus,
#page-wunschzettelfreund .panel-primary .panel-body .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm,
#page-wunschzettelfreund .panel-primary .panel-body .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm:hover,
#page-wunschzettelfreund .panel-primary .panel-body .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm:focus,
#page-wuensche .panel-primary .panel-body .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm,
#page-wuensche .panel-primary .panel-body .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm:hover,
#page-wuensche .panel-primary .panel-body .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm:focus,
#page-wuensche-freund .panel-primary .panel-body .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm,
#page-wuensche-freund .panel-primary .panel-body .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm:hover,
#page-wuensche-freund .panel-primary .panel-body .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm:focus,
#page-wuensche #listewuensche .wunschpanel .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm,
#page-wuensche #listewuensche .wunschpanel .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm:hover,
#page-wuensche #listewuensche .wunschpanel .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm:focus,
#page-wuensche-freund #listewuenschefreund .wunschpanel .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm,
#page-wuensche-freund #listewuenschefreund .wunschpanel .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm:hover,
#page-wuensche-freund #listewuenschefreund .wunschpanel .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm:focus,
#page-wuensche #listewuensche .wunschpanel .panel-primary .panel-body .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm,
#page-wuensche #listewuensche .wunschpanel .panel-primary .panel-body .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm:hover,
#page-wuensche #listewuensche .wunschpanel .panel-primary .panel-body .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm:focus,
#page-wuensche-freund #listewuenschefreund .wunschpanel .panel-primary .panel-body .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm,
#page-wuensche-freund #listewuenschefreund .wunschpanel .panel-primary .panel-body .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm:hover,
#page-wuensche-freund #listewuenschefreund .wunschpanel .panel-primary .panel-body .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm:focus {
  color: var(--color-primary) !important;
  background-color: var(--color-primary-light) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 1px rgba(59, 130, 200, 0.28) !important;
}
#page-wunschzettel .panel-primary .panel-body .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm .glyphicon,
#page-wunschzettelfreund .panel-primary .panel-body .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm .glyphicon,
#page-wuensche .panel-primary .panel-body .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm .glyphicon,
#page-wuensche-freund .panel-primary .panel-body .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm .glyphicon,
#page-wuensche #listewuensche .wunschpanel .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm .glyphicon,
#page-wuensche-freund #listewuenschefreund .wunschpanel .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm .glyphicon,
#page-wuensche #listewuensche .wunschpanel .panel-primary .panel-body .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm .glyphicon,
#page-wuensche-freund #listewuenschefreund .wunschpanel .panel-primary .panel-body .btn-group.open > .btn.dropdown-toggle.btn-default.btn-sm .glyphicon {
  color: var(--color-primary) !important;
}
/* Klick/Druck: CI-Blau statt globalem dunklen .btn-default:active* (höhere Spezifität + page-ids) */
#page-wunschzettel .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active,
#page-wunschzettel .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active:hover,
#page-wunschzettel .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active:focus,
#page-wunschzettel .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active.focus,
#page-wunschzettelfreund .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active,
#page-wunschzettelfreund .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active:hover,
#page-wunschzettelfreund .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active:focus,
#page-wunschzettelfreund .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active.focus,
#page-wuensche .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active,
#page-wuensche .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active:hover,
#page-wuensche .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active:focus,
#page-wuensche .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active.focus,
#page-wuensche-freund .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active,
#page-wuensche-freund .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active:hover,
#page-wuensche-freund .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active:focus,
#page-wuensche-freund .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active.focus,
#page-wuensche #listewuensche .wunschpanel .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active,
#page-wuensche #listewuensche .wunschpanel .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active:hover,
#page-wuensche #listewuensche .wunschpanel .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active:focus,
#page-wuensche #listewuensche .wunschpanel .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active.focus,
#page-wuensche-freund #listewuenschefreund .wunschpanel .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active,
#page-wuensche-freund #listewuenschefreund .wunschpanel .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active:hover,
#page-wuensche-freund #listewuenschefreund .wunschpanel .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active:focus,
#page-wuensche-freund #listewuenschefreund .wunschpanel .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active.focus,
#page-wuensche #listewuensche .wunschpanel .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active,
#page-wuensche #listewuensche .wunschpanel .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active:hover,
#page-wuensche #listewuensche .wunschpanel .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active:focus,
#page-wuensche #listewuensche .wunschpanel .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active.focus,
#page-wuensche-freund #listewuenschefreund .wunschpanel .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active,
#page-wuensche-freund #listewuenschefreund .wunschpanel .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active:hover,
#page-wuensche-freund #listewuenschefreund .wunschpanel .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active:focus,
#page-wuensche-freund #listewuenschefreund .wunschpanel .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active.focus {
  color: var(--color-primary) !important;
  background-color: var(--color-primary-light) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 1px rgba(59, 130, 200, 0.28) !important;
}
#page-wunschzettel .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active .glyphicon,
#page-wunschzettelfreund .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active .glyphicon,
#page-wuensche .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active .glyphicon,
#page-wuensche-freund .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active .glyphicon,
#page-wuensche #listewuensche .wunschpanel .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active .glyphicon,
#page-wuensche-freund #listewuenschefreund .wunschpanel .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active .glyphicon,
#page-wuensche #listewuensche .wunschpanel .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active .glyphicon,
#page-wuensche-freund #listewuenschefreund .wunschpanel .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm:active .glyphicon {
  color: var(--color-primary) !important;
}

/* „Kommentar schreiben“: Touch/Press nicht global dunkel-grau (.btn-default:active*) sondern CI-Druck wie ⋮ */
#page-wuensche #listewuensche .wunschpanel .panel-primary .panel-body button.btn-default.btn-sm[onclick*="showmessageinputwunsch"]:active,
#page-wuensche #listewuensche .wunschpanel .panel-primary .panel-body button.btn-default.btn-sm[onclick*="showmessageinputwunsch"]:active:hover,
#page-wuensche #listewuensche .wunschpanel .panel-primary .panel-body button.btn-default.btn-sm[onclick*="showmessageinputwunsch"]:active:focus,
#page-wuensche #listewuensche .wunschpanel .panel-primary .panel-body button.btn-default.btn-sm[onclick*="showmessageinputwunsch"]:active.focus,
#page-wuensche-freund #listewuenschefreund .wunschpanel .panel-primary .panel-body button.btn-default.btn-sm[onclick*="showmessageinputwunsch"]:active,
#page-wuensche-freund #listewuenschefreund .wunschpanel .panel-primary .panel-body button.btn-default.btn-sm[onclick*="showmessageinputwunsch"]:active:hover,
#page-wuensche-freund #listewuenschefreund .wunschpanel .panel-primary .panel-body button.btn-default.btn-sm[onclick*="showmessageinputwunsch"]:active:focus,
#page-wuensche-freund #listewuenschefreund .wunschpanel .panel-primary .panel-body button.btn-default.btn-sm[onclick*="showmessageinputwunsch"]:active.focus {
  color: var(--color-primary) !important;
  background-color: var(--color-primary-light) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 1px rgba(59, 130, 200, 0.28) !important;
}

/* Nach Maus-Up: gleicher Look noch min. Zeit (Klassenname durch ensureMowzWunschDetailMousePressFeedback gesetzt — Touch/Stylus ohne Klasse) */
#page-wuensche #listewuensche .wunschpanel .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm.mowz-wunsch-mouse-press-feedback,
#page-wuensche-freund #listewuenschefreund .wunschpanel .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm.mowz-wunsch-mouse-press-feedback {
  color: var(--color-primary) !important;
  background-color: var(--color-primary-light) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 1px rgba(59, 130, 200, 0.28) !important;
}
#page-wuensche #listewuensche .wunschpanel .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm.mowz-wunsch-mouse-press-feedback .glyphicon,
#page-wuensche-freund #listewuenschefreund .wunschpanel .panel-primary .panel-body .btn-group > .btn.dropdown-toggle.btn-default.btn-sm.mowz-wunsch-mouse-press-feedback .glyphicon {
  color: var(--color-primary) !important;
}
#page-wuensche #listewuensche .wunschpanel .panel-primary .panel-body button.btn-default.btn-sm[onclick*="showmessageinputwunsch"].mowz-wunsch-mouse-press-feedback,
#page-wuensche-freund #listewuenschefreund .wunschpanel .panel-primary .panel-body button.btn-default.btn-sm[onclick*="showmessageinputwunsch"].mowz-wunsch-mouse-press-feedback {
  color: var(--color-primary) !important;
  background-color: var(--color-primary-light) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 1px rgba(59, 130, 200, 0.28) !important;
}

/* Kommentarfeld ausgeklappt: gleicher Look wie ⋮ wenn Submenü offen */
#page-wuensche #listewuensche .wunschpanel .panel-primary .panel-body button.btn-default.btn-sm[onclick*="showmessageinputwunsch"].mowz-kommentar-form-open,
#page-wuensche #listewuensche .wunschpanel .panel-primary .panel-body button.btn-default.btn-sm[onclick*="showmessageinputwunsch"].mowz-kommentar-form-open:hover,
#page-wuensche #listewuensche .wunschpanel .panel-primary .panel-body button.btn-default.btn-sm[onclick*="showmessageinputwunsch"].mowz-kommentar-form-open:focus,
#page-wuensche-freund #listewuenschefreund .wunschpanel .panel-primary .panel-body button.btn-default.btn-sm[onclick*="showmessageinputwunsch"].mowz-kommentar-form-open,
#page-wuensche-freund #listewuenschefreund .wunschpanel .panel-primary .panel-body button.btn-default.btn-sm[onclick*="showmessageinputwunsch"].mowz-kommentar-form-open:hover,
#page-wuensche-freund #listewuenschefreund .wunschpanel .panel-primary .panel-body button.btn-default.btn-sm[onclick*="showmessageinputwunsch"].mowz-kommentar-form-open:focus {
  color: var(--color-primary) !important;
  background-color: var(--color-primary-light) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 1px rgba(59, 130, 200, 0.28) !important;
}
#page-wuensche #listewuensche .wunschpanel .panel-primary .panel-body button.btn-default.btn-sm[onclick*="showmessageinputwunsch"].mowz-kommentar-form-open .glyphicon,
#page-wuensche-freund #listewuenschefreund .wunschpanel .panel-primary .panel-body button.btn-default.btn-sm[onclick*="showmessageinputwunsch"].mowz-kommentar-form-open .glyphicon {
  color: var(--color-primary) !important;
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  /* Bootstrap-3-Theme legt einen Skeumorphismus-Textschatten auf alle .btn-*.
     Das frisst Kontrast auf hellen Buttons (Submenü, Modals) und passt nicht
     zum Calm/Notion-Look. Global raus. */
  text-shadow: none !important;
}

.btn-default {
  color: var(--color-text) !important;
  background-color: #fff !important;
  border-color: #dadada !important;
}
.btn-default:focus,
.btn-default.focus,
.btn-default:hover,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: var(--color-text) !important;
  background-color: #fff !important;
  border-color: var(--color-text) !important;
}
/* Alter „gedrückt"-State war Grau – neutral halten, lesbar lassen */
.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus {
  color: #fff !important;
  background-color: var(--color-text-muted) !important;
  border-color: #566566 !important;
}

.btn-primary,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary,
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
  color: #fff !important;
  background-color: var(--color-brand-dark) !important;
  border-color: var(--color-brand-dark) !important;
}
.btn-primary .badge {
  color: var(--color-brand-darker) !important;
  background-color: #fff !important;
}
/* Notification-Badges in der Topnav (News, Freundschaftsanfragen): rote
   Aufmerksamkeitsfarbe wie frueher - die generische .btn-primary .badge-
   Regel oben wuerde sie sonst invertieren (weiss auf gruen). */
#navbar-news .badge,
#navbar-freunde .badge,
#navbar-gruppen .badge {
  color: #fff !important;
  background-color: var(--color-danger) !important;
}

/* Benachrichtigungen: Einblendung nach Netzwerk-Refresh (ohne „harten" Listenwechsel) */
#page-news #list.mowz-news-list-enter {
  animation: mowzNewsListFadeIn 0.22s ease forwards;
}
@keyframes mowzNewsListFadeIn {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}

/* Erstlade-Platzhalter Benachrichtigungen: Standard-Spinner (Keyframes wie #loadsymbol) */
#page-news #list .mowz-news-list-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

#page-news #list .mowz-news-list-loading .mowz-global-overlay-spinner {
  color: var(--color-text-muted);
  display: block;
  animation: mowz-global-spinner-rotate 1.2s linear infinite;
  transform-origin: 50% 50%;
}

#page-news #list .mowz-news-list-loading .mowz-global-overlay-spinner__arc {
  stroke-dasharray: 1 150;
  stroke-dashoffset: 0;
  animation: mowz-global-spinner-dash 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  #page-news #list .mowz-news-list-loading .mowz-global-overlay-spinner {
    animation-duration: 2.8s;
  }
  #page-news #list .mowz-news-list-loading .mowz-global-overlay-spinner__arc {
    animation-duration: 2.4s;
  }
}

/* Globale Ladebalken: Spalte direkt unter Navbar (50px), über nach oben gezogenem .pagescroll-Inhalt
   (body padding 70px − pull 15px ⇒ Inhalt ab ~55px). Nicht bei 70px — dort schneidet die Leiste in Headlines. */
.mowz-global-loading-bar.mowz-global-loading-bar--hidden {
  display: none !important;
}

.mowz-global-loading-bar.is-mowz-loading-visible {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#loadsymbolbalken.mowz-global-loading-bar,
#loadsymbolbalkensyncwz.mowz-global-loading-bar {
  position: fixed;
  left: 0;
  right: 0;
  /* −2px: schließt Spalte zur Navbar (Border/Subpixel) */
  top: calc(
    var(--mowz-navbar-height) + var(--mowz-loading-bar-offset-y) - 2px
  );
  bottom: auto;
  width: 100%;
  /* Exakt die Lücke zwischen Nav-Unterkante und visuellem Content-Start (siehe :root-Variablen) */
  height: calc(
    var(--mowz-body-padding-top) - var(--mowz-pagescroll-pull) - var(--mowz-navbar-height)
  );
  min-height: 5px;
  /* Über Navbar (1030), damit Rundungs-/Subpixel-Überlappung den Balken nicht verdeckt */
  z-index: 1035;
  box-sizing: border-box;
  overflow: hidden;
  /* Ruhezustand-BG; nicht position:relative — würde position:fixed im selben Block überschreiben */
  background: linear-gradient(
    180deg,
    var(--color-primary-light) 0%,
    var(--color-primary-medium) 100%
  );
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: 0 2px 14px rgba(27, 45, 69, 0.1);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  pointer-events: none;
  line-height: 0;
  font-size: 0;
}

/* Sichtbar: Peach-Schimmer wandert durchgehend horizontal (kein Kegel — sonst links/rechts-Glitschen) */
#loadsymbolbalken.mowz-global-loading-bar.is-mowz-loading-visible,
#loadsymbolbalkensyncwz.mowz-global-loading-bar.is-mowz-loading-visible {
  background: var(--color-primary);
  animation: mowzLoadingBarTrackPulse 2.75s ease-in-out infinite;
}

/* Zwei identische Kacheln (50% der ::before-Breite = eine Leistenbreite); 0 ↔ -50% translate = nahtloser Karussell-Loop */
#loadsymbolbalken.mowz-global-loading-bar.is-mowz-loading-visible::before,
#loadsymbolbalkensyncwz.mowz-global-loading-bar.is-mowz-loading-visible::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  height: 100%;
  width: 200%;
  box-sizing: border-box;
  background-image: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-primary) 9.905%,
    var(--color-accent) 50%,
    var(--color-primary) 90.095%,
    var(--color-primary) 100%
  );
  background-size: 50% 100%;
  background-repeat: repeat-x;
  background-position: 0 0;
  transform: translateX(0);
  animation: mowzLoadingBarTravel 1.2s linear infinite;
}

@keyframes mowzLoadingBarTravel {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes mowzLoadingBarTrackPulse {
  0%,
  100% {
    box-shadow: 0 2px 14px rgba(27, 45, 69, 0.1);
  }
  50% {
    box-shadow:
      0 2px 18px rgba(59, 130, 200, 0.2),
      0 0 22px rgba(240, 130, 109, 0.14);
  }
}

#loadsymbolbalkensyncwzerror.mowz-global-loading-bar {
  position: fixed;
  left: 0;
  right: 0;
  /* −2px: schließt Spalte zur Navbar (Border/Subpixel) */
  top: calc(
    var(--mowz-navbar-height) + var(--mowz-loading-bar-offset-y) - 2px
  );
  bottom: auto;
  width: 100%;
  height: calc(
    var(--mowz-body-padding-top) - var(--mowz-pagescroll-pull) - var(--mowz-navbar-height)
  );
  min-height: 4px;
  z-index: 1036;
  box-sizing: border-box;
  box-shadow: 0 2px 10px rgba(90, 10, 10, 0.5);
  border: none;
  padding: 0;
  margin: 0;
  animation: none;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  pointer-events: none;
  line-height: 0;
  font-size: 0;
}

/* .btn-success war im alten Theme „warmer" CTA-Fläche (Peach). Randlos halten:
   Border = Background, damit der Button als reine Fläche wirkt. Hover etwas
   dunkler (Accent-Hover), kein dunkler Rand mehr. */
.btn-success,
.btn-success:focus,
.btn-success.focus,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled.focus,
.btn-success[disabled].focus,
fieldset[disabled] .btn-success.focus {
  color: #fff !important;
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}
.btn-success:hover,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success,
.btn-success:active:hover,
.btn-success.active:hover,
.open > .dropdown-toggle.btn-success:hover,
.btn-success:active:focus,
.btn-success.active:focus,
.open > .dropdown-toggle.btn-success:focus,
.btn-success:active.focus,
.btn-success.active.focus,
.open > .dropdown-toggle.btn-success.focus {
  color: #fff !important;
  background-color: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
}
.btn-success .badge {
  color: var(--color-accent) !important;
  background-color: #fff !important;
}

.btn-info {
  color: var(--color-brand-dark) !important;
  background-color: var(--color-bg-soft) !important;
  border-color: var(--color-border) !important;
}
.btn-info:focus,
.btn-info.focus,
.btn-info:hover,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info,
.btn-info:active:hover,
.btn-info.active:hover,
.open > .dropdown-toggle.btn-info:hover,
.btn-info:active:focus,
.btn-info.active:focus,
.open > .dropdown-toggle.btn-info:focus,
.btn-info:active.focus,
.btn-info.active.focus,
.open > .dropdown-toggle.btn-info.focus {
  color: #fff !important;
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}
.btn-info .badge {
  color: var(--color-brand-dark) !important;
  background-color: #fff !important;
}

/* -------------------------------------------------------------------------- */
/* Navbar                                                                     */
/* -------------------------------------------------------------------------- */
.navbar-default {
  background-color: var(--color-brand-dark) !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-sm);
}
.navbar-default .navbar-brand {
  color: #fff !important;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: var(--color-accent) !important;
  background-color: transparent !important;
}
.navbar-default .navbar-text,
.navbar-default .navbar-nav > li > a {
  color: #fff !important;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: var(--color-accent) !important;
  background-color: transparent !important;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #fff !important;
  background-color: var(--color-nav-active-bg) !important;
  background-image: none !important;
}
.navbar-default .navbar-toggle {
  border-color: var(--color-nav-toggle-border) !important;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: var(--color-nav-active-bg) !important;
}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: var(--color-accent) !important;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    background-color: var(--color-nav-active-bg) !important;
  }
}
.navbar-default .navbar-link:hover,
.navbar-default .btn-link:hover,
.navbar-default .btn-link:focus {
  color: var(--color-accent) !important;
}
.navbar.navbar-default,
.navbar-default.navbar-fixed-top {
  background-color: var(--color-brand-dark) !important;
  background-image: none !important;
  border-color: transparent !important;
}

/* Bootstrap .navbar: margin-bottom:21px — wirkt wie unsichtbarer Navbar-Fortsatz im Content.
   Zusätzlich: BS min-height:55px vs. index height:50px → effektiv ~55px; Ladebalken ab top:50px
   lag unter dem grünen Layer (höherer z-index) und wirkte „unsichtbar hinter der Navbar“. */
nav.navbar.navbar-default.navbar-fixed-top {
  margin-bottom: 0 !important;
  min-height: 50px !important;
  max-height: 50px !important;
  box-sizing: border-box;
}

/* Zweit-Navbar: früher Peach-Fläche – jetzt Akzent, Text weiß (falls genutzt) */
.navbar-inverse {
  background-color: var(--color-accent) !important;
  border-color: transparent !important;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-link:hover,
.navbar-inverse .btn-link:hover,
.navbar-inverse .btn-link:focus,
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
  color: var(--color-brand-darker) !important;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  background-color: var(--color-trust) !important;
  color: #fff !important;
}
.navbar-inverse .navbar-toggle {
  border-color: var(--color-trust) !important;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: var(--color-trust) !important;
}

/* -------------------------------------------------------------------------- */
/* Pagination / Pager                                                         */
/* -------------------------------------------------------------------------- */
.pagination > li > a,
.pagination > li > span {
  color: #fff !important;
  background-color: var(--color-accent) !important;
  border: 1px solid transparent;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: var(--color-trust-darker) !important;
  color: #fff !important;
}
.pager li > a,
.pager li > span {
  background-color: var(--color-accent) !important;
  box-shadow: var(--shadow-sm);
}
.pager li > a:hover,
.pager li > a:focus {
  background-color: var(--color-trust-darker) !important;
}

/* -------------------------------------------------------------------------- */
/* Panels & Alerts                                                            */
/* -------------------------------------------------------------------------- */
/* .panel-default Heading: transparent statt hellblau-grau, damit das Heading
   nahtlos in die Card übergeht. Border-Bottom bleibt als dezente Trennlinie. */
.panel-default > .panel-heading {
  color: var(--color-text) !important;
  background-color: transparent !important;
  border-color: var(--color-border) !important;
}
.panel-default > .panel-heading .panel-title {
  font-size: 14px;
  font-weight: 500;
}
.panel-default > .panel-heading .badge {
  color: #fff !important;
  background-color: var(--color-brand-dark) !important;
}

/* Cards (panels): außen dezenter Rand + weicher Schatten statt harter
   Brand-Linie. Der farbige Akzent kommt nur noch aus dem Heading-Bereich.
   KEIN overflow:hidden – sonst werden Dropdown-Menüs (Drei-Punkte-Menü
   in den Cards) abgeschnitten und landen optisch unter der nächsten Card.
   Die Rundung am farbigen Heading-Hintergrund wird stattdessen explizit
   per border-top-*-radius unten gesetzt. */
.panel-primary,
.panel-success,
.panel-info {
  border-color: var(--color-border) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Wunsch-Zeilen-Wrapper: gleicher Außenradius wie innen .panel-primary — Erfolgs-Rahmen (Issue #141) wirkt wie bei WZ-Karte */
.wunschpanel {
  border-radius: var(--radius-md);
}

/* Neu angelegt / Ziel nach Sync: Ring per box-shadow statt outline (outline bleibt visuell eckig zur Card). Trust = Erfolg, konsistent zu .alert-success */
.borderaktiv {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--color-trust) !important;
}
.panel-primary.borderaktiv,
.panel.panel-primary.borderaktiv {
  box-shadow: 0 0 0 2px var(--color-trust), var(--shadow-sm) !important;
}

.panel-primary > .panel-heading,
.panel-success > .panel-heading,
.panel-info > .panel-heading {
  border-top-left-radius: calc(var(--radius-md) - 1px);
  border-top-right-radius: calc(var(--radius-md) - 1px);
}

.panel-primary > .panel-heading {
  color: #fff !important;
  background-color: var(--color-brand-dark) !important;
  border-color: var(--color-brand-dark) !important;
}
.panel-primary > .panel-heading + .panel-collapse > .panel-body,
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
  border-top-color: var(--color-border) !important;
  border-bottom-color: var(--color-border) !important;
}
.panel-primary > .panel-heading .badge {
  color: var(--color-brand-dark) !important;
  background-color: var(--color-bg-soft) !important;
}

.panel-success > .panel-heading {
  color: #fff !important;
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}
.panel-success > .panel-heading + .panel-collapse > .panel-body,
.panel-success > .panel-footer + .panel-collapse > .panel-body {
  border-color: var(--color-border) !important;
}
.panel-success > .panel-heading .badge {
  color: var(--color-accent) !important;
}

.panel-info > .panel-heading {
  color: #fff !important;
  background-color: var(--color-brand-dark) !important;
  border-color: var(--color-brand-dark) !important;
}
.panel-info > .panel-heading + .panel-collapse > .panel-body,
.panel-info > .panel-footer + .panel-collapse > .panel-body {
  border-color: var(--color-border) !important;
}
.panel-info > .panel-heading .badge {
  color: var(--color-brand-dark) !important;
  background-color: #fff !important;
}

a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: var(--color-accent) !important;
}
.thumbnail .caption {
  color: var(--color-text) !important;
}

.alert-success {
  background-color: var(--color-trust) !important;
  border-color: var(--color-trust) !important;
  color: #fff !important;
}
.alert-info {
  background-color: var(--color-brand-dark) !important;
  border-color: var(--color-brand-dark) !important;
  color: #fff !important;
}

/* Passwort vergessen / zurücksetzen: Erfolgsmeldung dunkel auf hellem Primary-Light
   (statt weiß auf Mint wie globales .alert-success – auf hellem Modal-Kontext oft schwer lesbar). */
#modal-pwvergessen #pwvergessen-feedback.alert-success,
#modal-pwreset #pwreset-feedback.alert-success {
  background-color: var(--color-primary-light) !important;
  border-color: var(--color-trust) !important;
  border-width: 1px;
  color: var(--color-text) !important;
}

#modal-pwvergessen #pwvergessen-feedback.alert-danger,
#modal-pwreset #pwreset-feedback.alert-danger {
  background-color: #fdf2f2 !important;
  border-color: var(--color-danger) !important;
  color: var(--color-dark) !important;
}

/* -------------------------------------------------------------------------- */
/* Fortschritt                                                                */
/* -------------------------------------------------------------------------- */
.progress {
  box-shadow: none;
  border-radius: var(--radius-sm);
}
.progress-bar {
  background-color: var(--color-brand-darker) !important;
  box-shadow: none;
}
.progress-bar-success {
  background-color: var(--color-accent) !important;
}
.progress-bar-info {
  background-color: var(--color-brand-dark) !important;
}

/* -------------------------------------------------------------------------- */
/* Form-Validierung                                                           */
/* -------------------------------------------------------------------------- */
.has-success .help-block,
.has-success .control-label,
.has-success .form-control-feedback {
  color: var(--color-trust) !important;
}
.has-success .form-control,
.has-success .form-control:focus,
.has-success .input-group-addon {
  border-color: var(--color-trust) !important;
}

/* -------------------------------------------------------------------------- */
/* Diverse: Close, List-Group, Well                                           */
/* -------------------------------------------------------------------------- */
.panel-default .close,
.modal .close {
  color: var(--color-text) !important;
  opacity: 0.5;
}
.popover {
  color: var(--color-text) !important;
}
a.list-group-item-success,
a.list-group-item-success.active {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #fff !important;
}
a.list-group-item-success.active:hover,
a.list-group-item-success.active:focus,
a.list-group-item-success:hover {
  background-color: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
  color: #fff !important;
}

.well {
  box-shadow: var(--shadow-sm);
  background-color: var(--color-bg-soft);
  border-color: var(--color-border);
  border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------------------- */
/* jquery-confirm (lädt in index.html NACH head – Link in head, siehe index)  */
/* -------------------------------------------------------------------------- */
.jconfirm .jconfirm-box {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--color-border) !important;
  overflow: hidden;
}
.jconfirm .jconfirm-box .jconfirm-title {
  color: var(--color-text) !important;
  font-weight: 600;
}
.jconfirm .jconfirm-box .jconfirm-content-pane {
  color: var(--color-text) !important;
}
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-default {
  background: var(--color-bg-soft) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
  box-shadow: none !important;
}
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-default:hover,
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-default:focus {
  background: #fff !important;
  color: var(--color-text) !important;
  border-color: var(--color-text) !important;
}
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-primary {
  background: var(--color-brand-dark) !important;
  border-color: var(--color-brand-dark) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-primary:hover,
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-primary:focus {
  filter: brightness(1.05);
}
.jconfirm .jconfirm-bg {
  background: var(--color-dark) !important;
  opacity: 0.5 !important;
}

/* reCAPTCHA v3: Badge nur auf dem Login-Screen sichtbar (Klasse am body via navpage).
   Rechtlicher Bezug zu Google in den allgemeinen Nutzungsbedingungen/Datenschutz. */
.grecaptcha-badge {
  visibility: hidden !important;
}
body.mowz-recaptcha-badge-visible .grecaptcha-badge {
  visibility: visible !important;
}

/* Native Checkboxen/Radios/Range-Inputs auf CI-Sky-Blue. accent-color faerbt
   das native Tick-Symbol + den aktivierten Hintergrund konsistent ueber alle
   modernen Browser (Safari 15.4+, Chrome 93+, Firefox 92+). Aelter: faellt
   auf System-Default zurueck - akzeptabel.
   Trifft alle Stellen: Wunschzettel-Modal, Wunsch-Modal, Profileinstellungen. */
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: var(--color-primary);
}

/* jquery-confirm Theme-Klassen (eigene btn-blue/btn-dark/btn-red/btn-orange/btn-green
   – nicht Bootstrap). www/js/app.js verwendet u. a. btnClass: 'btn-blue' / 'btn-dark'
   / 'btn-red'. Wir ziehen sie eng auf den jconfirm-Scope und mappen ins CI:
     - btn-blue   = primärer Action-Button -> Sky Blue (--color-primary)
                    (klassischer „Klickbar"-Look, freundlich, dezent)
     - btn-dark   = bestätigender Sekundär-Button -> Brand-Dark
                    (für betont „branded" Aktionen)
     - btn-green  = positiver Bestätigungs-Button -> Trust (Mint)
     - btn-orange = Achtung/Warm -> Accent (Peach)
     - btn-red    = Danger/Löschen -> belässt Danger */
.jconfirm .jconfirm-buttons button.btn-blue,
.jconfirm .jconfirm-buttons button.btn-blue:focus,
.jconfirm .jconfirm-buttons button.btn-blue:active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.jconfirm .jconfirm-buttons button.btn-blue:hover {
  background: var(--color-link-hover) !important;
  border-color: var(--color-link-hover) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.jconfirm .jconfirm-buttons button.btn-dark,
.jconfirm .jconfirm-buttons button.btn-dark:focus,
.jconfirm .jconfirm-buttons button.btn-dark:hover,
.jconfirm .jconfirm-buttons button.btn-dark:active {
  background: var(--color-brand-dark) !important;
  border-color: var(--color-brand-dark) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.jconfirm .jconfirm-buttons button.btn-green,
.jconfirm .jconfirm-buttons button.btn-green:focus,
.jconfirm .jconfirm-buttons button.btn-green:hover,
.jconfirm .jconfirm-buttons button.btn-green:active {
  background: var(--color-trust) !important;
  border-color: var(--color-trust) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.jconfirm .jconfirm-buttons button.btn-orange,
.jconfirm .jconfirm-buttons button.btn-orange:focus,
.jconfirm .jconfirm-buttons button.btn-orange:hover,
.jconfirm .jconfirm-buttons button.btn-orange:active {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.jconfirm .jconfirm-buttons button.btn-red,
.jconfirm .jconfirm-buttons button.btn-red:focus,
.jconfirm .jconfirm-buttons button.btn-red:hover,
.jconfirm .jconfirm-buttons button.btn-red:active {
  background: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Issue #127: Filter-Leiste; Chips = Preview „Anlass“-Pills (Sky Blue, Tokens) */
#page-wuensche .wz-wish-filter-bar,
#page-wuensche-freund .wz-wish-filter-bar {
  position: relative;
  margin: 0 auto 10px;
  max-width: 850px;
  padding: 8px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

#page-wuensche .wish-filter-chip,
#page-wuensche-freund .wish-filter-chip {
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.95rem;
  min-height: 33px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-medium);
  border-radius: 99px;
  box-shadow: none;
  text-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.12s ease,
    color 0.12s ease,
    border-color 0.12s ease,
    filter 0.12s ease;
}

#page-wuensche .wish-filter-chip:focus,
#page-wuensche-freund .wish-filter-chip:focus {
  outline: none;
}

#page-wuensche .wish-filter-chip:focus-visible,
#page-wuensche-freund .wish-filter-chip:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

#page-wuensche .wish-filter-chip:active,
#page-wuensche-freund .wish-filter-chip:active {
  filter: brightness(0.97);
}

#page-wuensche .wish-filter-chip--active,
#page-wuensche-freund .wish-filter-chip--active,
#page-wuensche .wish-filter-chip--active:hover,
#page-wuensche-freund .wish-filter-chip--active:hover,
#page-wuensche .wish-filter-chip--active:focus-visible,
#page-wuensche-freund .wish-filter-chip--active:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

#page-wuensche .wish-filter-chip--active .wish-filter-chip__ico,
#page-wuensche-freund .wish-filter-chip--active .wish-filter-chip__ico {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  #page-wuensche .wish-filter-chip,
  #page-wuensche-freund .wish-filter-chip {
    transition: none;
  }
}

/* Wunschzettel-Submenü: früher inline border-color am Rand zum Brand-Grün (brand.css-Token) */
.mowz-submenu-wz.btn-default {
  border-color: var(--color-brand-dark) !important;
}
.mowz-submenu-wz.btn-primary {
  border-color: var(--color-brand-dark) !important;
}

/* Hinweistext neben einer Checkbox (z. B. Datenschutz-Bestätigung im Register-
   Modal): kompakt, leicht gemutet, damit das eigentliche Formular-Hauptlayout
   nicht von Pflichttexten dominiert wird. */
.mowz-checkbox-hint {
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-muted);
}
.mowz-checkbox-hint a {
  color: var(--color-primary) !important;
}
.mowz-checkbox-hint a:hover,
.mowz-checkbox-hint a:focus {
  color: var(--color-link-hover) !important;
}

/* Wunschzettel-Cards in #listewz: Inter braucht klare Hierarchie. Meta-Zeilen
   (Anzahl/Gesamtwert) deutlich kompakter halten, damit die Card vertikal
   nicht aufbläst. Titel kontrastiert über Größe + Brand-Dark, nicht über
   großzügige Abstände. */
/* Flex-Container statt Bootstrap-3 Float-Row: Cards in einer Reihe sind
   automatisch gleich hoch (align-items default stretch), kein fixed
   height-Hack mehr noetig. col-* width % funktioniert weiterhin. */
#listewz {
  display: flex;
  flex-wrap: wrap;
}
#listewz .panel.panel-primary .panel-body {
  line-height: 1.35;
  color: var(--color-text);
  font-size: 13px;
}
#listewz .panel.panel-primary .panel-body > table:first-child b {
  display: inline-block;
  font-size: 15px;         /* einheitlich zu den Wunsch-Cards (markierte Wünsche) */
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: 2px;
}
/* Freunde-WZ-Card: „Von: <Username>" als ruhiger Untertitel unter dem
   WZ-Titel. Bewusst kein <b>, damit das Hierarchiegefuehl WZ-Titel >
   Freundname > Body-Text bleibt. */
#listewz .panel.panel-primary .wz-friend-by {
  display: inline-block;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
#listewz .panel.panel-primary .wz-gesamtwert-row {
  margin-top: 0;
}
#listewz .panel.panel-primary #gesamtwert_zahl {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
#listewz .panel.panel-primary small {
  display: inline-block;
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 11px;
  line-height: 1;
}
/* Card-Action-Buttons (3-Punkte, Teilen, oeffnen): Schrift + Icons explizit
   auf Navy. Trifft direkt auch die FA/Glyphicon-Innenelemente, damit Reste
   aus bootstrap-overrides.css (#013328 ohne !important) sicher ueberschrieben
   werden. */
#listewz .panel.panel-primary .btn,
#listewz .panel.panel-primary .btn:hover,
#listewz .panel.panel-primary .btn:focus,
#listewz .panel.panel-primary .btn:active,
#listewz .panel.panel-primary .btn .fa,
#listewz .panel.panel-primary .btn .glyphicon {
  color: var(--color-text) !important;
}

/* Wunsch-Listen-Container (#listewuensche): Klasse `list-group` nur historisch;
   bootstrap-theme.css setzt auf `.list-group` box-shadow + border-radius —
   wirkt wie ein umschließender Rahmen. Absicht: nur Karten (Panels), kein äußerer Ring. */
#page-wuensche #listewuensche.list-group,
#page-wuensche-freund #listewuenschefreund.list-group {
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* Empty-State auf der Wunsch-Detail-Seite (Wunschzettel ohne Wuensche).
   Zentriert in der Liste-Flaeche, dezent eingefaerbt. Icon in eigenem
   .wuensche-empty-icon-Block damit es klar ueber dem Text steht (Font-
   Awesome setzt sonst per --fa-display den .fa-Display-Modus, was die
   Block-Anordnung ueber das <i>-Element selbst stoeren kann). */
.wuensche-empty-state {
  margin: 40px auto;
  padding: 40px 20px;
  text-align: center;
  color: var(--color-text-muted);
}
.wuensche-empty-icon {
  margin-bottom: 16px;
  line-height: 1;
}
.wuensche-empty-icon .fa {
  font-size: 56px;
  color: var(--color-primary-medium);
}
.wuensche-empty-state p {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  font-weight: 500;
}

/* Profilbild im Sidenav: fester Kreis-Container (Wrapper), damit bei 404 /
   Broken-Image der Slot nicht auf Alt-Textgroesse kollabiert. Viele WebViews
   ignorieren aspect-ratio am fehlgeschlagenen <img> — der Wrapper nicht.
   Wichtig: keine max-width:100% hier — openNav() animiert #mySidenav Breite per
   jQuery .animate({width:'toggle'},200); bei max-width:100% skalierte der Avatar
   mit der geschlossenen Sidebar mit und wirkte wie Transition klein→gross. */
/* Kopfzeile Sidenav (Avatar + Name): Flex-Spalte — Avatar mittig,
   Name explizit zentriert ueber die volle Inhaltsbreite (rein text-align allein
   wirkte mit line-height oft optisch verschoben gegenueber dem 120px-Avatar). */
#leftnavuserblock > div.text-white.text-center {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

#mySidenav .mowz-sidenav-avatar {
  width: 120px;
  height: 120px;
  max-width: 120px;
  flex-shrink: 0;
  align-self: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 8px; /* statt <br> + line-height 2.5 am Block (riesiger Zeilenabstand) */
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  box-sizing: border-box;
}

#mySidenav .mowz-sidenav-avatar #profilbild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none !important; /* Border sitzt am Wrapper */
}

/* Zeilenhoehe nur auf den Namen …
   Hinweis: .sidenav hat white-space:nowrap fuer die Menue-Liste — fuer den Namen:
   eine Zeile, zu lang -> ellipsis. #leftnavuserblock hat jetzt moderates
   horizontal Padding (16px je Seite im HTML, statt 70px) — Inhalt ca. 228px bei
   260px Sidebar, damit Namen nicht mehr in 120px-Zwangsspalte sitzen. */
#leftnavuserblock #profilname {
  display: block;
  line-height: 2.5;
  margin-top: 0;
  width: 100%;
  max-width: 100%;
  text-align: center;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Flex-Ellipsis: ohne min-width:0 ueberzeichnet der Text oft die Spaltenbreite */
  min-width: 0;
}

/* Hidden Dev-Menü: Sidenav-Footer unten — Flex nur bei geöffnetem Menü (.mowz-sidenav-open per app.js).
   Nicht dauerhaft display:flex setzen: würde .sidenav{display:none} aus custom.css überschreiben
   (höhere Spezifität) und die Sidebar erscheint beim Start sichtbar (Regression). */
#mySidenav.mowz-sidenav-layout.mowz-sidenav-open {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}
#mySidenav.mowz-sidenav-layout .mowz-sidenav-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#mySidenav.mowz-sidenav-layout .mowz-sidenav-footer {
  flex-shrink: 0;
  padding: 12px 8px 20px;
  border-top: 1px solid var(--color-border, #d4e3f0);
}
textarea.mowz-dev-menu-json {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
  font-size: 11px;
  line-height: 1.35;
}

/* Über .sidenav (20000) — Modal liegt im DOM bei den übrigen Modals (oberhalb der Pages),
   damit kein übergeordneter Stacking-Context das z-index begrenzt. */
#modal-mowz-dev-menu {
  z-index: 3000000 !important;
}
body.mowz-dev-menu-modal-active .modal-backdrop {
  z-index: 2999990 !important;
}

/* Wunschzettel-/Wunsch-Modal: Checkbox + Label als Grid-Zeile.
   Float-Vererbung/custom .form-check-label { top:-6px } ersetzt durch Grid:
   Checkbox und Label vertikal mittig zueinander, fester Zwischenraum, Typografie angepasst.
   Direktes Kind .form-check-input pro Gruppe (:has fuer moderne Engines). */
#modal-wzneu form.form-modal-wzneu .form-group:has(> .form-check-input),
#modal-wunsch .form-group:has(> .form-check-input) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 6px;
  align-items: center;
}

#modal-wzneu form.form-modal-wzneu .form-group:has(> .form-check-input) > .form-check-input,
#modal-wunsch .form-group:has(> .form-check-input) > .form-check-input {
  float: none !important;
  margin: 0 !important;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

#modal-wzneu form.form-modal-wzneu .form-group:has(> .form-check-input) > .form-check-label,
#modal-wunsch .form-group:has(> .form-check-input) > .form-check-label {
  position: static !important;
  top: auto !important;
  left: auto !important;
  display: block;
  grid-column: 2;
  grid-row: 1;
  overflow: visible;
  align-self: center;
  margin: 0;
  line-height: 1.35;
  font-size: 14px;
  font-weight: 600;
}

#modal-wzneu form.form-modal-wzneu .form-group:has(> .form-check-input) > br,
#modal-wunsch .form-group:has(> .form-check-input) > br {
  display: none;
}

#modal-wzneu form.form-modal-wzneu .form-group:has(> .form-check-input) > small,
#modal-wunsch .form-group:has(> .form-check-input) > small {
  grid-column: 1 / -1;
  grid-row: 2;
  clear: none;
  float: none;
  padding-top: 0;
  padding-left: 0;
  margin: 0;
  display: block;
}
/* Shop-Browser: Zeile „Meine Lieblingsshops" (statt silber/inline) */
.mowz-subtitle-fav {
  background-color: var(--color-bg);
  width: 100%;
  padding: 5px;
  border: 1px solid var(--color-border);
  margin-bottom: 8px;
}
.mowz-star-gold {
  color: #c9a227;
}