/* =========================================================
   MW FewoManager – Demo-Ebene (NUR demo.mwfewomanager.de)

   Wird ausschließlich auf der Demo geladen, nie in der Auslieferung:
   die Küstenweb-Farbwerte und das Demo-Band. Alles, was jede
   Kundenseite braucht, steht in brand-tokens.css und site-components.css.

   Ladereihenfolge: ZULETZT.
   ========================================================= */

:root {
  --brand-primary:        #1F3458;
  --brand-primary-hover:  #14233F;
  --brand-primary-darker: #0E1B33;
  --brand-primary-soft:   #E8EDF5;
  --brand-accent:         #E8A93F;
  --brand-accent-text:    #8A5A00;
  --brand-ink:            #1B2A3F;
  --brand-ink-soft:       #475569;
  --brand-surface:        #F7F9FC;
  --brand-border:         #E2E8F0;
}

.demo-band { background: var(--brand-primary-hover); color: #fff; font-size: 14px; line-height: 1.4; }
.demo-band__inner {
  max-width: 1200px; margin: 0 auto;
  padding: var(--space-2) var(--space-6);
  display: flex; align-items: center; gap: var(--space-6);
  min-height: 56px;
}
.demo-band__text { flex: 1 1 auto; min-width: 0; margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.demo-band__short,
.demo-band__mini-long,
.demo-band__mini-short { display: none; }
.demo-band .demo-band__toggle { display: none; }
.demo-band__links { display: flex; align-items: center; gap: var(--space-6); flex: none; }
.demo-band__link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 500; text-decoration: underline; text-underline-offset: 4px;
}
.demo-band__link--main,
.demo-band__link--main:hover { color: var(--brand-accent); }
.demo-band__link--more,
.demo-band__link--more:hover { color: #fff; }
.demo-band__close,
.demo-band__toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-width: 44px; min-height: 44px; padding: 0;
  background: transparent; color: #fff;
  border: 0; border-radius: var(--brand-radius-sm);
  font: 500 14px/1.4 var(--brand-font); cursor: pointer;
}
.demo-band__close:hover,
.demo-band__toggle:hover { background: rgba(255,255,255,.12); }
.demo-band--collapsed .demo-band__inner { min-height: 48px; padding-top: 0; padding-bottom: 0; }
.demo-band--collapsed .demo-band__text { font-weight: 500; }
.demo-band--collapsed .demo-band__long,
.demo-band--collapsed .demo-band__short,
.demo-band--collapsed .demo-band__links,
.demo-band--collapsed .demo-band__close { display: none; }
.demo-band--collapsed .demo-band__mini-long { display: inline; }
.demo-band.demo-band--collapsed .demo-band__toggle { display: inline-flex; }
.demo-band[hidden],
.demo-band__link[hidden] { display: none; }

@media (max-width: 760px) {
  .demo-band__inner { padding: var(--space-2) var(--space-4); gap: var(--space-2); min-height: 56px; }
  .demo-band__text { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .demo-band__long { display: none; }
  .demo-band__short { display: inline; font-weight: 500; }
  .demo-band__link--more { display: none; }
  .demo-band--collapsed .demo-band__mini-long { display: none; }
  .demo-band--collapsed .demo-band__mini-short { display: inline; font-weight: 500; }
}