/* Bling Schule - Kontaktfunnel, Styles.
 *
 * Diese Datei ist die LIVE-Fassung von blingmensa.de/kundendienst, uebernommen
 * am 25.09.2026. Sie ist die Referenz: Bling Schule soll genauso aussehen und
 * sich genauso verhalten. Die aeltere Fassung im Repo
 * (kundendienst-funnel/webflow/embed-1-styles-und-markup.html) war veraltet,
 * daher sahen die Karten hier zuerst anders aus: weiss mit Rahmen und Kreis
 * rechts statt flaechig hellblau mit blauem Label und Kreis links.
 *
 * Schule-spezifisch ist nur der Block ganz am Ende. Alles davor bitte
 * unveraendert lassen und bei Aenderungen erneut von Mensa ziehen, damit die
 * beiden Formulare nicht auseinanderlaufen.
 */

/* ==========================================================================
   Bling Mensa Kontaktformular — Styling
   Alle Werte abgeglichen mit blingmensa.webflow.shared.css.
   Nur Optik, keine Aenderung an Markup, Klassen oder Verhalten.
   ========================================================================== */

.bmf {
  /* --- Farben. Alle aus der Live-CSS der Seite. ------------------------- */
  --bmf-accent:        #495bfd;  /* :root --primary-blue                    */
  --bmf-accent-hover:  #3144eb;  /* .button:hover                           */
  --bmf-accent-soft:   #e4eafb;  /* Hover: eine Spur dunkler als die Karte  */
  --bmf-accent-active: #cdddfe;  /* Ausgewaehlt: :root --light-blue          */
  --bmf-accent-line:   #cdddfe;  /* :root --light-blue                      */

  --bmf-text:          #121212;  /* .general_paragraph                      */
  --bmf-muted:         #121212;  /* bewusst identisch mit --bmf-text        */

  --bmf-surface:       #edf1fc;  /* Flaeche der Karten und Pills            */
  --bmf-input:         #f1f1f1;  /* .contact_form-input                     */
  --bmf-placeholder:   #999999;  /* Platzhalter, erst beim Tippen #121212   */
  --bmf-line:          #00000040;/* .checkbox-2.is-white                    */
  --bmf-error:         #c8102e;

  /* --- Radien. Die Seite staffelt bewusst: Karte 13, Box 10, Feld 7. ---- */
  --bmf-radius-card:   13px;     /* .contact_form, .accordion-wrapper       */
  --bmf-radius-box:    10px;     /* .three-columns_column-wrap              */
  --bmf-radius-field:  7px;      /* .contact_form-input                     */

  --bmf-gap:           12px;

  color: var(--bmf-text);
  max-width: 46rem;
  margin: 0 auto;
  /* Schrift bewusst nicht gesetzt, sie wird von der Seite geerbt (Roboto).
     Die Headline ist ein h2 und erbt dadurch Recoleta. */

  /* Das Embed richtet sich nach der Breite SEINES Containers, nicht nach der
     des Fensters. Sonst rechnet es in der 480px-Kontaktkarte auf /kundendienst
     mit Desktop-Breite und legt zwei Spalten a 267px an. */
  container: bmf / inline-size;
}
.bmf *, .bmf *::before, .bmf *::after { box-sizing: border-box; }
/* display:flex auf .bmf-field wuerde das hidden-Attribut sonst aushebeln. */
.bmf [hidden] { display: none !important; }

/* Webflow setzt global `label { margin-bottom:5px; font-weight:bold }`.
   Das faerbt sonst Pills und Consent-Text fett und streut 5px Abstand ein. */
.bmf label { margin-bottom: 0; font-weight: inherit; }

@media (prefers-reduced-motion: reduce) {
  .bmf *, .bmf *::before, .bmf *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* --- Schrittwechsel. Der Inhalt blendet aus und der neue wieder ein.
       Die Fortschrittszeile ist ausgenommen: sie bleibt stehen und laeuft
       nur weiter, damit der Balken als durchgehendes Element lesbar ist.
       Bewusst ohne fill-mode, sonst wuerde der Endzustand der Animation
       das spaetere Ausblenden ueberschreiben. --- */
@keyframes bmf-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
#bmf-stage > *:not(.bmf-progress-row){ animation: bmf-in .28s ease; }
#bmf-stage.is-leaving > *:not(.bmf-progress-row){
  opacity: 0; transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
}

/* --- Fortschritt --- */
.bmf .bmf-progress{ height: 6px; background: var(--bmf-accent-line); border-radius: 100px; overflow: hidden; margin-bottom: 1.25rem; }
.bmf .bmf-progress-bar{ height: 100%; width: 0; background: var(--bmf-accent); border-radius: 100px; transition: width .45s cubic-bezier(.4, 0, .2, 1); }
.bmf .bmf-progress-row{ display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.bmf .bmf-progress-row .bmf-progress{ flex: 1; margin-bottom: 0; }
.bmf .bmf-counter{ font-size: 14px; font-weight: 500; color: var(--bmf-muted); white-space: nowrap; }

/* --- Kopf. Farben ueberall explizit: die Karte steht auf /kundendienst in
       einem blauen Hero, dessen h2-Regel sonst die Ueberschrift weiss faerbt
       und damit unsichtbar macht. --- */
/* Eyebrow = .kicker der Seite: Versalien, 14px, weight 500, spacing .2px,
   primaerblau wie .kicker. */
.bmf .bmf-eyebrow{
  color: var(--bmf-accent); font-weight: 500; font-size: 14px;
  letter-spacing: .2px; text-transform: uppercase; margin: 0 0 .5rem;
}
/* Headline: Recoleta (geerbt), spacing .25px wie .heading_h2-left.
   weight 700 wie alle h2 der Seite — Recoleta liegt nur als SemiBold vor,
   der Browser synthetisiert, aber genau so sieht die restliche Seite aus. */
.bmf .bmf-headline{
  color: var(--bmf-text); font-weight: 700; line-height: 110%;
  letter-spacing: .25px; margin: 0 0 .5rem;
}
.bmf .bmf-headline:focus{ outline: none; }
.bmf .bmf-headline:focus-visible{ outline: 2px solid var(--bmf-accent); outline-offset: 4px; border-radius: 4px; }
.bmf .bmf-subline{ color: var(--bmf-muted); font-size: 16px; line-height: 150%; margin: 0 0 1.5rem; }
.bmf .bmf-head-tight .bmf-subline{ margin-bottom: 1.5rem; }

/* --- Optionskarten ---
   Flaeche statt Outline: die Seite legt Inhalte auf weissen Karten
   konsequent auf #f7f4f3 (z.B. .blog-post-author-info). --- */
.bmf .bmf-options{ display: grid; gap: var(--bmf-gap); margin: 0 0 1.5rem; padding: 0; border: 0; }
.bmf .bmf-options.is-gate{ grid-template-columns: 1fr; }
@container bmf (min-width: 34rem) { .bmf .bmf-options.is-gate{ grid-template-columns: 1fr 1fr; } }

.bmf .bmf-card{
  display: flex; align-items: center; gap: .9rem;
  width: 100%; min-height: 56px; padding: 1rem 1.1rem;
  text-align: left; font: inherit; color: inherit;
  background: var(--bmf-surface);
  border: 0;
  border-radius: var(--bmf-radius-card);
  cursor: pointer;
  transition: background-color .2s ease;
}
.bmf .bmf-card:hover{ background: var(--bmf-accent-soft); }
.bmf .bmf-card:focus-visible{ outline: 2px solid var(--bmf-accent); outline-offset: 2px; }
.bmf .bmf-card.is-selected{ background: var(--bmf-accent-active); }
.bmf .bmf-card-body{ flex: 1; min-width: 0; }
.bmf .bmf-card-label{ color: var(--bmf-accent); font-size: 16px; font-weight: 500; line-height: 1.35; }
.bmf .bmf-card-desc{ color: var(--bmf-muted); font-size: 14px; line-height: 1.45; margin-top: .25rem; }

/* Auswahlanzeiger links vom Text. Das Script haengt ihn im Markup hinter
   den Textblock, order dreht das rein visuell um. */
.bmf .bmf-card > .bmf-mark,
.bmf .bmf-card-inner > .bmf-mark{ order: -1; }

/* Weisses Kaestchen mit #00000040-Rand wie .checkbox-2.is-white. */
.bmf .bmf-mark{
  flex: none; width: 22px; height: 22px; position: relative;
  background: #fff; border: 1px solid var(--bmf-line); border-radius: 100px;
  transition: background-color .2s ease, border-color .2s ease;
}
.bmf .bmf-mark.is-box{ border-radius: 5px; }
.bmf .bmf-card.is-selected .bmf-mark{ border-color: var(--bmf-accent); background: var(--bmf-accent); }
.bmf .bmf-card.is-selected .bmf-mark::after{
  content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* Icons rechts in Markenfarbe, damit die Karten mit externem Ziel
   (Helpcenter, Telefon) sofort als Link lesbar sind.
   Das Script setzt dort Textzeichen ein, deren Strichstaerke von der
   liefernden Schrift abhaengt und deshalb ungleich ausfaellt. Sie werden
   hier durch SVG mit einheitlicher Strichstaerke ersetzt. Passt ein
   Selektor nicht, bleibt schlicht das urspruengliche Zeichen stehen. */
.bmf .bmf-card .bmf-ext{ flex: none; color: var(--bmf-accent); font-size: 1.15rem; line-height: 1; font-weight: 500; }
.bmf a.bmf-card[target="_blank"] .bmf-ext,
.bmf a.bmf-card[href^="tel:"] .bmf-ext{
  width: 20px; height: 20px; font-size: 0; line-height: 0;
  background-repeat: no-repeat; background-position: center; background-size: 18px 18px;
}
/* Pfeil diagonal nach aussen: Helpcenter oeffnet in neuem Tab. */
.bmf a.bmf-card[target="_blank"] .bmf-ext{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%23495bfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13 13 5'/%3E%3Cpath d='M6 5h7v7'/%3E%3C/svg%3E");
}
/* Pfeil nach rechts: Telefonnummer waehlen. */
.bmf a.bmf-card[href^="tel:"] .bmf-ext{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%23495bfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h12'/%3E%3Cpath d='M10 4l5 5-5 5'/%3E%3C/svg%3E");
}

/* Deflection-Schritt: "Ticket eroeffnen" steht als einzige Button-Karte
   zwischen zwei Link-Karten. Statt des Auswahlkreises bekommt sie rechts
   ein Mail-Icon, damit die drei Karten gleich lesen. Der Selektor greift
   nur in einer Optionsgruppe, die auch Link-Karten enthaelt — auf allen
   anderen Auswahlschritten bleibt der Kreis. */
.bmf .bmf-options:has(a.bmf-card) button.bmf-card > .bmf-mark{
  order: 0; width: 20px; height: 20px;
  background-color: transparent; border: 0;
  background-repeat: no-repeat; background-position: center; background-size: 18px 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='15' viewBox='0 0 18 15' fill='none' stroke='%23495bfd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='1' width='16' height='13' rx='2.5'/%3E%3Cpath d='M1.8 3.2 9 8.4l7.2-5.2'/%3E%3C/svg%3E");
}
.bmf .bmf-options:has(a.bmf-card) button.bmf-card.is-selected > .bmf-mark::after{ content: none; }
.bmf a.bmf-card{ text-decoration: none; color: inherit; }
.bmf a.bmf-card:hover .bmf-card-label{ color: var(--bmf-accent-hover); }
.bmf .bmf-card:active,.bmf .bmf-card-inner:active{ background: var(--bmf-accent-active); }

/* Das Gate traegt die wichtigste Entscheidung, deshalb grosszuegiger. */
.bmf .bmf-options.is-gate .bmf-card{ align-items: flex-start; padding: 1.35rem 1.4rem; min-height: 104px; }
.bmf .bmf-options.is-gate .bmf-card-label{ font-size: 17px; }
/* Der Anzeiger startet oben, leicht abgesenkt auf die erste Textzeile. */
.bmf .bmf-options.is-gate .bmf-mark{ align-self: flex-start; margin-top: .15rem; }

/* Mehrfachauswahl: echte Checkbox, visuell durch die Karte ersetzt */
.bmf .bmf-check{ position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.bmf .bmf-check:focus-visible + .bmf-card-inner{ outline: 2px solid var(--bmf-accent); outline-offset: 2px; }
.bmf .bmf-check-wrap{ position: relative; display: block; }
.bmf .bmf-card-inner{
  display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 56px;
  padding: 1rem 1.1rem; background: var(--bmf-surface); border: 0;
  border-radius: var(--bmf-radius-card); cursor: pointer; transition: background-color .2s ease;
}
.bmf .bmf-card-inner:hover{ background: var(--bmf-accent-soft); }
.bmf .bmf-check:checked + .bmf-card-inner{ background: var(--bmf-accent-active); }
.bmf .bmf-check:checked + .bmf-card-inner .bmf-mark{ border-color: var(--bmf-accent); background: var(--bmf-accent); }
.bmf .bmf-check:checked + .bmf-card-inner .bmf-mark::after{
  content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* --- Auswahlgruppen im Formularschritt (Radio, Checkbox, Select) --- */
.bmf .bmf-group{ border: 0; padding: 0; margin: 0; min-width: 0; }
.bmf .bmf-group legend{ color: var(--bmf-text); font-size: 15px; font-weight: 500; padding: 0; margin-bottom: .5rem; }
.bmf .bmf-pills{ display: grid; gap: .5rem; }
@container bmf (min-width: 28rem) { .bmf .bmf-pills.is-two{ grid-template-columns: 1fr 1fr; } }
.bmf .bmf-pill{
  color: var(--bmf-text); position: relative; display: flex; align-items: center; gap: .6rem;
  padding: .7rem .85rem; min-height: 48px;
  background: var(--bmf-surface); border: 0; border-radius: var(--bmf-radius-box);
  cursor: pointer; font-size: 15px; line-height: 1.35; transition: background-color .2s ease;
}
.bmf .bmf-pill:hover{ background: var(--bmf-accent-soft); }
.bmf .bmf-pill input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.bmf .bmf-pill .bmf-tick{
  flex: none; width: 18px; height: 18px; position: relative;
  background: #fff; border: 1px solid var(--bmf-line); border-radius: 100px;
  transition: background-color .2s ease, border-color .2s ease;
}
.bmf .bmf-pill.is-box .bmf-tick{ border-radius: 4px; }
.bmf .bmf-pill:has(input:checked){ background: var(--bmf-accent-active); }
.bmf .bmf-pill:has(input:checked) .bmf-tick{ border-color: var(--bmf-accent); background: var(--bmf-accent); }
.bmf .bmf-pill:has(input:checked) .bmf-tick::after{ content: ""; position: absolute; left: 5.5px; top: 2px;
  width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bmf .bmf-pill:has(input:focus-visible){ outline: 2px solid var(--bmf-accent); outline-offset: 2px; }

/* --- Formularfelder. Fuellung #f1f1f1 ohne Rahmen wie .contact_form-input.
       Die Fuellung bleibt in jedem Zustand gleich, nur Rand und Outline
       reagieren. --- */
.bmf .bmf-fields{ display: grid; gap: 1rem; margin-bottom: 1.25rem; }
@container bmf (min-width: 28rem) {
  .bmf .bmf-fields.is-two{ grid-template-columns: 1fr 1fr; }
  .bmf .bmf-field.is-wide{ grid-column: 1 / -1; }
}
.bmf .bmf-field{ display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.bmf .bmf-label{ color: var(--bmf-text); font-size: 15px; font-weight: 500; }
.bmf .bmf-input,.bmf .bmf-textarea,.bmf .bmf-select{
  font: inherit; font-size: 16px;           /* 16px verhindert iOS-Zoom */
  width: 100%; padding: .85rem 1rem; color: var(--bmf-text);
  background: var(--bmf-input);
  border: 1px solid transparent;            /* Platzhalter fuer den Fehlerrand */
  border-radius: var(--bmf-radius-field);
  transition: border-color .2s ease;
}
.bmf .bmf-textarea{ min-height: 120px; resize: vertical; line-height: 1.5; }
.bmf .bmf-input::placeholder,.bmf .bmf-textarea::placeholder{ color: var(--bmf-placeholder); opacity: 1; }
/* Select vor der Auswahl: "Bitte waehlen" liest sich wie ein Platzhalter. */
.bmf .bmf-select:has(option[value=""]:checked){ color: var(--bmf-placeholder); }
.bmf .bmf-select option{ color: var(--bmf-text); }
.bmf .bmf-input:focus,.bmf .bmf-textarea:focus,.bmf .bmf-select:focus{
  outline: 2px solid var(--bmf-accent); outline-offset: 1px;
  border-color: var(--bmf-accent);
}
.bmf .bmf-input[aria-invalid="true"],.bmf .bmf-textarea[aria-invalid="true"],.bmf .bmf-select[aria-invalid="true"]{
  border-color: var(--bmf-error);
}
/* Select: eigener Pfeil, damit es nicht als Systemelement aus der Karte faellt. */
.bmf .bmf-select{
  -webkit-appearance: none; appearance: none; padding-right: 2.5rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23495bfd' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
.bmf .bmf-error{ color: var(--bmf-error); font-size: 14px; line-height: 1.4; min-height: 0; }
.bmf .bmf-error:empty{ display: none; }

/* --- Datenschutz. Checkbox nach dem Vorbild von .checkbox-2.is-white. --- */
.bmf .bmf-consent{ display: flex; align-items: flex-start; gap: .7rem; margin-bottom: 1.25rem; }
.bmf .bmf-consent input{
  -webkit-appearance: none; appearance: none;
  flex: none; width: 20px; height: 20px; margin: 2px 0 0; position: relative; cursor: pointer;
  background: #fff; border: 1px solid var(--bmf-line); border-radius: 5px;
  transition: background-color .2s ease, border-color .2s ease;
}
.bmf .bmf-consent input:checked{ background: var(--bmf-accent); border-color: var(--bmf-accent); }
.bmf .bmf-consent input:checked::after{
  content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.bmf .bmf-consent input:focus-visible{ outline: 2px solid var(--bmf-accent); outline-offset: 2px; }
.bmf .bmf-consent input[aria-invalid="true"]{ border-color: var(--bmf-error); }
.bmf .bmf-consent label{ font-size: 14px; line-height: 1.55; color: var(--bmf-muted); cursor: pointer; }
.bmf .bmf-consent a{ color: var(--bmf-accent); text-decoration: underline; text-underline-offset: 2px; }
.bmf .bmf-consent a:hover{ color: var(--bmf-accent-hover); }

/* --- Buttons. .bmf-submit ist ein 1:1-Klon von .button der Seite. --- */
/* Zurueck und Weiter stehen immer in einer Reihe.
   Das Script haengt den Zurueck-Button je nach Schritt unterschiedlich ein:
   bei type 'form' in .bmf-actions hinein, sonst als Geschwister dahinter
   direkt an #bmf-stage. Flexbox greift nur im ersten Fall. Deshalb ist die
   Buehne ein Raster mit zwei Spalten, und grid-auto-flow: dense zieht den
   nachgestellten Zurueck-Button in die freie linke Spalte der Actions-Zeile.
   Alles ohne Eingriff ins Markup oder Script. */
#bmf-stage{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-auto-flow: dense;
  column-gap: 1rem;
  align-items: center;
}
#bmf-stage > *{ grid-column: 1 / -1; }   /* Normalfall: volle Breite */
#bmf-stage > .bmf-actions{ grid-column: 2; }
#bmf-stage > .bmf-back{ grid-column: 1; }

.bmf .bmf-actions{ display: flex; flex-direction: row; align-items: center; gap: 1rem; }
.bmf .bmf-submit{
  font: inherit; font-size: 16px; font-weight: 500; text-align: center;
  min-width: 150px; min-height: 48px; padding: 12px 30px; color: #fff;
  background: var(--bmf-accent); border: 0; border-radius: 100px; cursor: pointer;
  flex: 1;                                  /* nimmt den Rest der Zeile ein */
  transition: background-color .2s;
}
.bmf .bmf-submit:hover{ background: var(--bmf-accent-hover); }
.bmf .bmf-submit:focus-visible{ outline: 2px solid var(--bmf-accent-hover); outline-offset: 3px; }
.bmf .bmf-submit[disabled]{ opacity: .45; cursor: not-allowed; }
.bmf .bmf-submit[disabled]:hover{ background: var(--bmf-accent); }
/* Zurueck als Textlink, analog zu .text-link. */
.bmf .bmf-back{
  font: inherit; font-size: 15px; font-weight: 500; color: var(--bmf-accent);
  background: none; border: 0; padding: .6rem .2rem; cursor: pointer; text-align: left;
  transition: color .2s ease;
}
.bmf .bmf-back:hover{ color: var(--bmf-accent-hover); }
.bmf .bmf-back:focus-visible{ outline: 2px solid var(--bmf-accent); outline-offset: 2px; border-radius: 4px; }

/* --- Danke-Schritt. Einziger Schritt, der zentriert steht: er ist ein
       Ergebnis, keine Aufforderung. --- */
.bmf .bmf-danke-icon{
  width: 56px; height: 56px; border-radius: 100px;
  background-color: var(--bmf-accent);
  background-repeat: no-repeat; background-position: center;
  background-size: 26px 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='20' viewBox='0 0 26 20' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 11l7.5 7L24 2'/%3E%3C/svg%3E");
  margin: .5rem auto 1.25rem;
}
#bmf-stage:has(.bmf-danke-icon) > *{ text-align: center; }
#bmf-stage:has(.bmf-danke-icon) .bmf-subline{ margin-bottom: .5rem; }

/* Nur fuer Screenreader */
.bmf .bmf-sr{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Voreinstellung ist das enge Layout. Alte Browser ohne Container-Queries
   bekommen dieses, es funktioniert in jeder Breite. */
.bmf .bmf-headline{ font-size: 28px; }

@container bmf (min-width: 34rem) {
  .bmf .bmf-headline{ font-size: 34px; }
}

/* Erst wenn selbst eine Reihe zu eng wird, untereinander. */
@container bmf (max-width: 20rem) {
  #bmf-stage{ grid-template-columns: 1fr; }
  #bmf-stage > .bmf-actions,
  #bmf-stage > .bmf-back{ grid-column: 1 / -1; }
  .bmf .bmf-actions{ flex-direction: column-reverse; align-items: stretch; }
  .bmf .bmf-submit{ width: 100%; }
  .bmf .bmf-back{ text-align: center; }
}

/* === Nur fuer Bling Schule ================================================ */

/* Schutz vor der Scroll-Animation der Seite.
   bling.schule blendet Inhalte beim Scrollen gestaffelt ein und schreibt dafuer
   inline "opacity: 0; transform: translate(0px, 24px)" (GSAP-Signatur). Der
   Funnel baut seine Schritte erst per JS: die Animation erwischt sie nur halb
   und laesst den Rest dauerhaft unsichtbar. Auf Mobil blieben so ab der dritten
   Option alle Karten leer. blingmensa.de hat diese Animation nicht.

   Bewusst NICHT pauschal auf alle Kindelemente: der Funnel braucht opacity 0
   fuer die visuell versteckten Checkboxen und Radios, transform: rotate() fuer
   die Haken und opacity .45 fuer den deaktivierten Button. */
.bmf .bmf-progress-row,
.bmf .bmf-eyebrow,
.bmf .bmf-headline,
.bmf .bmf-subline,
.bmf .bmf-options,
.bmf .bmf-card,
.bmf .bmf-card-body,
.bmf .bmf-card-label,
.bmf .bmf-card-desc,
.bmf .bmf-check-wrap,
.bmf .bmf-card-inner,
.bmf .bmf-fields,
.bmf .bmf-field,
.bmf .bmf-group,
.bmf .bmf-pills,
.bmf .bmf-pill,
.bmf .bmf-label,
.bmf .bmf-input,
.bmf .bmf-select,
.bmf .bmf-textarea,
.bmf .bmf-consent,
.bmf .bmf-consent label,
.bmf .bmf-actions,
.bmf .bmf-back,
.bmf .bmf-danke-icon,
.bmf .bmf-ext {
  opacity: 1 !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
}
.bmf .bmf-submit { transform: none !important; translate: none !important; }
.bmf .bmf-submit:not([disabled]) { opacity: 1 !important; }

/* Der Rollenschritt hat neun Optionen statt acht wie bei Mensa. Einspaltig
   waere die Karte doppelt so hoch wie jeder andere Schritt. Ab genug Breite
   deshalb zwei Spalten; ein einzeln uebrig bleibender letzter Eintrag nimmt
   die volle Breite, damit daneben kein Loch steht. */
.bmf .bmf-options.is-zwei { grid-template-columns: 1fr; }
@container bmf (min-width: 34rem) {
  .bmf .bmf-options.is-zwei { grid-template-columns: 1fr 1fr; }
  .bmf .bmf-options.is-zwei > .is-breit { grid-column: 1 / -1; }
}

/* Kein Rahmen um die Ueberschrift beim Schrittwechsel.
   announce() setzt den Fokus programmatisch auf die Headline, damit
   Tastaturnutzer im neuen Schritt landen. Browser werten das als
   :focus-visible und zeichnen einen Ring, der wie ein Eingabefeld aussieht
   (gemeldet von Nils, 25.09.2026, betrifft blingmensa.de genauso).
   Vorgelesen wird der Schritt ohnehin ueber die aria-live-Region #bmf-live,
   die Ankuendigung geht also nicht verloren. */
.bmf .bmf-headline:focus,
.bmf .bmf-headline:focus-visible { outline: none; }

/* Feste Hoehe der Buehne, damit die Karte beim Durchklicken nicht springt.
   Gemessen auf Staging (Karte innen 589px, alles zweispaltig):
   Rolle 523, Anliegen 426, Interesse 481, Klassenkasse-Einrichtung 537.
   540px deckt alle vier ab, die Karte bleibt also ueber den gesamten
   Klickpfad exakt gleich gross. Die beiden langen Formularschritte
   (Klassenkasse-Situation 800, Kontaktdaten) wachsen darueber hinaus und
   schieben den Kasten nach unten, wie bei Mensa auch.

   align-content: start ist Pflicht: #bmf-stage ist ein Grid mit
   align-items: center, ohne das wuerde der Inhalt in der freien Hoehe
   zentriert und die Karte saehe wieder schwimmend aus. */
@container bmf (min-width: 34rem) {
  .bmf #bmf-stage { min-height: 540px; align-content: start; }
}