/* ==========================================================================
   Arbeitsrecht REMIEN: Liquid Glass, dezent (Entwurf)
   Eigene Datei: Wird sie nicht eingebunden, gilt das normale Design.
   Im Styleguide abschaltbar über html.no-glass.
   Einsatz: 3 Schnellkontakt-Leiste mobil, 4 Elemente auf Rot, Button-Hover.
   Navigation und Menü sind auf Wunsch deckend (keine Transparenz).
   ========================================================================== */

:root {
  /* Flächen ohne Verlauf (auf Wunsch keine Verläufe von oben nach unten) */
  --glass-light: rgba(255, 255, 255, .86);
  --glass-on-brand: rgba(255, 255, 255, .12);
  --glass-blur: saturate(160%) blur(24px);
  --glass-edge-light: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .5);
  --glass-edge-on-brand: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 0 0 1px rgba(255, 255, 255, .24);
}
html:not(.no-glass) { --btn-primary-h: var(--brand-strong); }

/* 4 Auf roten Flächen: Frist-Hinweis im Einstieg und Zweit-Buttons als getöntes Glas.
   Kein Weichzeichner nötig, die Wirkung entsteht durch Lichtkante und Transparenz. */
html:not(.no-glass) .hero__intro .badge-deadline {
  background: var(--glass-on-brand);
  color: var(--white);
}
/* Zweit-Buttons auf Rot: klare Kontur, transparent (kein Glas, kein Verlauf) */

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 991.98px) {
    /* 3 Schnellkontakt-Leiste: schwebende Glasleiste mit Abstand zum Rand */
    html:not(.no-glass) .contact-bar {
      left: .75rem; right: .75rem;
      bottom: calc(.75rem + env(safe-area-inset-bottom));
      padding: .625rem;
      border: 0;
      border-radius: calc(var(--r-lg) + .375rem);
      background: var(--glass-light);
      -webkit-backdrop-filter: blur(24px);              /* ohne Sättigung: über roten Karten kein Rosastich */
      backdrop-filter: blur(24px);
      box-shadow: var(--glass-edge-light), 0 .75rem 2rem rgba(33, 37, 41, .18);
    }
    html.js:not(.no-glass) .contact-bar { transform: translateY(calc(100% + 2rem)); }
    html.js:not(.no-glass) .contact-bar.is-visible { transform: none; }
    html:not(.no-glass) .contact-bar .btn:not(.btn--primary) { background: rgba(255, 255, 255, .55); }
  }
}

/* Buttons: Hover im Liquid-Stil. Licht statt Farbwechsel ins Rosa:
   aufhellende Glasschicht, Lichtkante oben, weicher Schein und ein einmaliger Glanzstreifen. */
html:not(.no-glass) .btn { position: relative; overflow: hidden; isolation: isolate; }
html:not(.no-glass) .btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%);
  transform: translateX(-130%);
}
html:not(.no-glass) .btn--primary {
  --btn-bg-h: var(--btn-primary-h);
  --btn-bd-h: var(--brand);
}
html:not(.no-glass) .btn:not(.btn--primary):not(.btn--light):not(.btn--outline-light) {
  --btn-bg-h: var(--btn-primary-h);
  --btn-fg-h: var(--white); --btn-bd-h: var(--brand);
}
html:not(.no-glass) .btn--light {
  --btn-bg-h: #F7F7F8;
  --btn-fg-h: var(--brand-strong); --btn-bd-h: var(--white);
}
html:not(.no-glass) .on-brand .btn--outline-light {
  --btn-bg-h: rgba(255, 255, 255, .14);
  --btn-fg-h: var(--white); --btn-bd-h: rgba(255, 255, 255, .62);
}
@media (hover: hover) {
  html:not(.no-glass) .btn:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 .5rem 1.25rem rgba(var(--brand-strong-rgb), .22);
  }
  html:not(.no-glass) .on-brand .btn:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 4px rgba(255, 255, 255, .1), 0 .5rem 1.25rem rgba(0, 0, 0, .18);
  }
  html:not(.no-glass) .btn--light:hover::after { background: linear-gradient(115deg, transparent 35%, rgba(var(--brand-rgb), .08) 50%, transparent 65%); }
  html:not(.no-glass) .btn:hover::after { transform: translateX(130%); transition: transform 700ms var(--ease-out); }
}
html:not(.no-glass) .btn:active { box-shadow: inset 0 2px 6px rgba(0, 0, 0, .18); }
html:not(.no-glass) .sg-state-hover.btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 .5rem 1.25rem rgba(var(--brand-strong-rgb), .22); }
html:not(.no-glass) .on-brand .sg-state-hover.btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 4px rgba(255, 255, 255, .1), 0 .5rem 1.25rem rgba(0, 0, 0, .18); }
@media (prefers-reduced-motion: reduce) { html:not(.no-glass) .btn::after { display: none; } }

/* Einstieg hell ab 744 px (iPad): Glas der roten Variante zurücknehmen, Hover wie auf Weiß */
@media (min-width: 744px) {
  html:not(.no-glass) .hero .hero__intro.on-brand .badge-deadline { background: var(--brand-soft); color: var(--brand); box-shadow: none; }
  html:not(.no-glass) .hero .hero__intro.on-brand .btn--outline-light { box-shadow: none; }
  html:not(.no-glass) .hero .hero__intro.on-brand .btn--light:hover::after { background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%); }
}
@media (min-width: 744px) and (hover: hover) {
  html:not(.no-glass) .hero .hero__intro.on-brand .btn:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 .5rem 1.25rem rgba(var(--brand-strong-rgb), .22); }
}

/* Systemeinstellung „Transparenz reduzieren“: deckend */
@media (prefers-reduced-transparency: reduce) {
  .contact-bar { background: var(--white) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}