/* ============================================================================
   fs-notify.css — "Benachrichtige mich, wenn verfuegbar" im Kaufbereich
   ----------------------------------------------------------------------------
   Sitzung VERFUEGBAR, 29.08.2026, Auftrag Yunus: bei ausverkauften Artikeln
   stand der Platz des Kaufknopfs leer, das JTL-Formular lag unauffindbar im
   Reiter weit unten. Jetzt: Knopf an der Stelle des Kaufknopfs, Klick klappt
   das echte JTL-Formular direkt darunter auf.

   Markup: MyRemake/productdetails/details.tpl (.fs-notify), Reiter in
   tabs.tpl abgeschaltet. Logik: fs-notify.js (delegierter Klick, uebersteht
   den Blocktausch beim Variantenwechsel ohne MutationObserver).

   Formensprache nach fs-kanon.css: Radius 0, Knopfhoehe 47px wie der
   Kaufknopf, Anton 400 (nie fetter — font-synthesis:none), Fokusring
   2px #e5169f. Der Knopf ist bewusst SCHWARZ, nicht Magenta: #c90f88 ist
   laut Farbkontrakt dem Kaufen vorbehalten; hier wird nichts gekauft.
   ========================================================================== */

.fs-notify { margin-top: .55rem; }

.fs-notify-text {
    margin: 0 0 10px;
    font-size: .9rem;
    line-height: 1.45;
    color: #6b6b75;
}

/* Der Knopf — Masse und Machart des Kaufknopfs (47px, Radius 0, Anton 400) */
.fs-notify-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 47px;
    padding: 0 18px;
    background: #111114;
    color: #fff;
    border: 1px solid #111114;
    border-radius: 0;
    font-family: "FS Display", Anton, sans-serif;
    font-weight: 400;
    font-synthesis: none;
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--fs-zeit-schnell, .15s) ease;
}
.fs-notify-toggle:hover { background: #2b2b31; }
.fs-notify-toggle:focus-visible { outline: 2px solid #e5169f; outline-offset: 2px; }
.fs-notify-toggle:active { transform: translateY(1px); }

/* Aufgeklappt: Knopf weicht dem Formular */
.fs-notify[data-offen="1"] .fs-notify-toggle { display: none; }

/* Formular: zu, bis der Knopf gedrueckt wird. Keyframes statt Transition —
   eine Transition im selben Style-Durchlauf faellt still aus (Erfahrung
   Sticky-Kaufleiste); ohne fill-mode, damit nichts nachwirkt. */
.fs-notify-formular { display: none; }
.fs-notify[data-offen="1"] .fs-notify-formular {
    display: block;
    animation: fs-notify-auf .2s ease-out;
}
@keyframes fs-notify-auf {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* JTL-Formular auf Kanon trimmen. Die Bootstrap-.row bringt Negativraender
   mit und wuerde aus der Kaufkarte laufen (Erfahrung Fog-Coin-Block):
   flachlegen, Spaltenpolster auf 0. */
.fs-notify-formular legend { display: none; }
.fs-notify-formular fieldset { margin: 0; }
.fs-notify-formular .row { margin-left: 0; margin-right: 0; }
.fs-notify-formular [class*="col"] { padding-left: 0; padding-right: 0; }
.fs-notify-formular .form-group { margin-bottom: 10px; }
.fs-notify-formular .form-control {
    height: var(--fs-feld-h, 44px);
    border-radius: 0;
}

/* Absenden: volle Breite statt rechtsbuendiger Automatikspalte,
   Machart wie der Knopf darueber. */
.fs-notify-formular .col-md-auto { flex: 1 1 100%; max-width: 100%; }
.fs-notify-formular button[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 47px;
    border-radius: 0;
    font-family: "FS Display", Anton, sans-serif;
    font-weight: 400;
    font-synthesis: none;
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Vaterartikel, ALLE Varianten ausverkauft (nur dann setzt der Controller
   die Benachrichtigung): der Hinweis "Waehle zuerst deine Sorte" fuehrt in
   diesem Zustand nur zu einem ausverkauften Kind — weg damit, der
   Benachrichtigungs-Block erklaert die Lage. Die Variantenkacheln in
   Schritt 1 bleiben unberuehrt; wer eine Sorte waehlt, bekommt deren
   eigenes Formular. Nebenwirkung gewollt: ohne sichtbaren Hinweis heftet
   die mobile Sticky-Leiste hier nichts an (toter Knopf waere schlechter). */
.fs-pdp-kauf:has(.fs-notify) .fs-pdp-hinweis { display: none; }

/* Ausverkaufte KATEGORIEKARTE (Zweig inWarenkorbLegbar < 0 in item_box.tpl,
   erkennbar am fs-ausverkauft-btn): die Staffel-Kacheln (Schicht fs-staffel)
   waren dort noch aktiv klickbar — bei Bestand 0 irrefuehrend. Nur auf
   diesen Karten ausblenden, kaufbare Karten unberuehrt. */
.productbox:has(.fs-ausverkauft-btn) .fs-staffeln { display: none; }

/* Mobil: 16px im Feld, sonst zoomt iOS beim Fokus in die Seite */
@media (max-width: 767.98px) {
    .fs-notify-formular .form-control { font-size: var(--fs-feld-fs-mobil, 16px); }
}