/* ═══ MBSheet — Bottom-Sheet (Theme-Eigentum) ══════════════════════════════
 * Markup: inc/mb-sheet.php · Verhalten: assets/js/mb-sheet.js
 * Design: Development/Design/design_handoff_termin_vorschlagen/ (Abschnitt 2)
 *
 * HANDOFF-WERTE: weiss, Radius 12 oben, Griff 36×4 #DDDDDD, Scrim
 *   rgba(0,0,0,.45), Kopf Titel 20/400 + „Schritt N von 3" rechts, Subline
 *   14/300 #55555E.
 * ⚠ DELTA, benannt: „Schritt N von 3" steht im Handoff auf 13/300 — hier 14/300.
 *   Hausregel Schrift-Boden 14 (12/13-px-Angaben aus Handoffs werden auf 14
 *   normalisiert, von Stephan zweimal bestaetigt).
 * ⚠ DELTA, benannt: „Schritt N von 3" #84848E → #55555E / dunkel #B6B6BE (AA).
 * ⚠ DELTA, benannt: Der Handoff zeigt nur das Telefon. Auf breiten Schirmen
 *   waere ein randvolles Sheet eine 1280-px-Leiste; es bleibt ein Sheet, aber
 *   hoechstens 560 px breit und mittig.
 *
 * ⚠ ELEMENTOR-KIT: `.elementor-kit-119134 button` (0,1,1) faerbt jeden nackten
 *   Button magenta, `.elementor-kit-119134 h2` setzt 24 px. Der Griff ist ein
 *   <button>, der Titel ein <h2> — beide hier mit >= (0,2,1) bzw. (0,2,0) und
 *   eigenen Werten.
 * Dark: body.mb-dark. Flaeche #2A2A31 wie MBDialog.
 */

.mb-sheet {
    --mb-sheet-unten: env(safe-area-inset-bottom, 0px);
    --mb-sheet-tastatur: 0px;
    --mb-sheet-sichtbar: 100vh;
    position: fixed;
    inset: 0;
    z-index: 100000;              /* wie MBDialog: ueber Popups und Header */
}
.mb-sheet[hidden] {
    display: none;
}

.mb-sheet .mb-sheet__scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    transition: opacity 200ms ease;
}
.mb-sheet.is-offen .mb-sheet__scrim {
    opacity: 1;
}

.mb-sheet .mb-sheet__box {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--mb-sheet-unten) + var(--mb-sheet-tastatur));
    box-sizing: border-box;
    width: 100%;
    max-width: 560px;
    /* Ueber der Tastatur muss noch Luft zum oberen Rand bleiben. */
    max-height: calc(var(--mb-sheet-sichtbar) - 24px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    color: #222227;
    border-radius: 12px 12px 0 0;
    outline: none;
    transform: translateY(100%);
    transition: transform 220ms ease;
}
.mb-sheet.is-offen .mb-sheet__box {
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .mb-sheet .mb-sheet__scrim,
    .mb-sheet .mb-sheet__box {
        transition: none;
    }
}

/* Schliessen-X oben rechts (3.28.5, Stephan 22.09.2026: „warum gibts
 * eigentlich kein x um das neu termin popup zu schließen").
 * ⚠ VORBILD, gemessen statt geraten: Das Login-Popup 119085 setzt sein X oben
 *   rechts und an Position 0 der Tab-Reihenfolge (dort 20x20 — unter dem
 *   Tap-Boden; wir nehmen 44x44, Handbuch §9.3). Das Kreuz selbst ist die
 *   Haus-Vorlage aus dem Suchfeld: 11x11, Strich 1,3, currentColor.
 * ⚠ ABSOLUT positioniert, damit es den Kopf nicht verschiebt: Titel und
 *   Schritt-Zeile behalten ihre Flucht; der Titel bekommt rechts Platz, damit
 *   ein langer Kuenstlername nicht unter das X laeuft. */
.mb-sheet .mb-sheet__box button.mb-sheet__x {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: #55555E;
    cursor: pointer;
}
@media (hover: hover) {
    .mb-sheet .mb-sheet__box button.mb-sheet__x:hover {
        color: #222227;
    }
}
.mb-sheet .mb-sheet__box button.mb-sheet__x:focus-visible {
    outline: 2px solid var(--mb-accent, #C22BF7);
    outline-offset: -2px;
}
body.mb-dark .mb-sheet .mb-sheet__box button.mb-sheet__x {
    color: #B6B6BE;
}
@media (hover: hover) {
    body.mb-dark .mb-sheet .mb-sheet__box button.mb-sheet__x:hover {
        color: #F5F5F7;
    }
}

/* Griff: Optik 36×4, Trefferflaeche 44 hoch ueber die ganze Breite des Strichs
 * plus Luft. Er ist ein Schliessen-Knopf (aria-label), kein Zierstrich. */
.mb-sheet .mb-sheet__box button.mb-sheet__griff {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 88px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.mb-sheet .mb-sheet__strich {
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: #DDDDDD;
}

.mb-sheet .mb-sheet__kopf {
    flex: none;
    display: flex;
    align-items: baseline;
    gap: 12px;
    /* rechts 48 statt 16: Platz fuer das Schliessen-X (44 + 4 Abstand) */
    padding: 0 48px 0 16px;
}
.mb-sheet .mb-sheet__titel {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
    color: inherit;
}
/* Hervorgehobener Teil des Titels (Handoff: Artist 600 — Obergrenze Handbuch). */
.mb-sheet .mb-sheet__titel .mb-sheet__titel-stark {
    font-weight: 600;
}
.mb-sheet .mb-sheet__schritt {
    flex: none;
    white-space: nowrap;
    font-size: 14px;              /* Handoff 13 → Boden 14 (Delta, s. Kopf) */
    font-weight: 300;
    /* Handoff #84848E: 3,7:1 hell / 3,85:1 dunkel — unter AA 4,5. Sekundaertext
     * wie die Subline (7,4 / 7,1). Delta, Supervisor-Entscheid 14.09. 14:0x. */
    color: #55555E;
}
.mb-sheet .mb-sheet__subline {
    flex: none;
    margin: 4px 0 0;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.4;
    color: #55555E;
}
.mb-sheet .mb-sheet__subline[hidden] {
    display: none;
}

.mb-sheet .mb-sheet__inhalt {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 16px 16px calc(16px + var(--mb-sheet-unten));
}

/* ── Dunkel ── */
body.mb-dark .mb-sheet .mb-sheet__box {
    background: #2A2A31;
    color: #F5F5F7;
}
body.mb-dark .mb-sheet .mb-sheet__strich {
    background: rgba(255, 255, 255, .24);
}
body.mb-dark .mb-sheet .mb-sheet__schritt {
    color: #B6B6BE;
}
body.mb-dark .mb-sheet .mb-sheet__subline {
    color: #B6B6BE;
}

/* ═══ GRAVITY-FORMS-OPTIK IM SHEET — „Termin vorschlagen" ══════════════════
 * Pixel-Referenz: Handoff-Flow Screens 1–3 (vergroessert abgelesen).
 * Gilt NUR im Sheet (`.mb-sheet .mb-tv`); die site-weite GF-Haus-Optik §12
 * in mb-theme-standards.css bleibt die Basis (16 px, 44 px, Radius 3).
 *
 * FELD-KLASSEN kommen von tourdates (`mb-tv-feld--<name>`); Namen hier:
 *   kuenstler · link · datum · stadt · location.
 *
 * ⚠ DELTAS, benannt (Hausregel Schrift-Boden 14 / AA wie im Kopf der Datei):
 *   Feld-Labels Handoff 11/600 #84848E → 14/600 #55555E.
 *   Trenner „ODER VON HAND" 12/600 → 14/600, letter-spacing .1em bleibt.
 *   „folgst du" und Statuszeilen 13/300 → 14/300.
 *
 * ⚠ SPEZIFITAET: §12 arbeitet mit `body .gform_wrapper.gravity-theme input[type]`
 *   (0,3,2); das Elementor-Kit faerbt <button> mit (0,1,1). Alles hier beginnt
 *   mit `body .mb-sheet .mb-tv` und liegt damit darueber.
 */

/* ═══ HAERTUNG GEGEN GF `theme.min.css` (3.30.7) ═══════════════════════════
 * tourdates laedt ab 2.34.9 bei Absicht das GF-Theme-CSS nach (noetig fuer
 * den Kalender: ohne sein Hooks-JS oeffnete der Datumswaehler nicht). Das
 * Sheet laedt es damit NACH unseren Sheets, und bei gleicher Spezifitaet
 * gewinnt der Spaetere. Gemessen 28.09., DDEV 390, jede Eigenschaft jedes
 * Elements in Schritt 2 mit GF-Sheet aus/an verglichen — DIESE Stellen
 * kippten sichtbar:
 *   „(erforderlich)"  14/600 normal #C22BF7 → 13,008/400 KURSIV #C02B0A
 *                     (GF `.gform_wrapper.gravity-theme .gfield_required`,
 *                     0,3,0 = gleich schwer wie unsere Regel in
 *                     mb-theme-standards.css — der Spaetere gewinnt)
 *   Feld-Beschreibung 14 → 15, Zeile 21 → 22,5 (unsere site-weite Regel
 *                     `body .gform_wrapper .gfield_description` ist nur 0,2,1)
 *   Label-Text        padding-right 0 → 1,75 px — BEWUSST NICHT zurueckgestellt:
 *                     ohne GF klebt „Datum(erforderlich)" direkt aneinander, GFs
 *                     kleiner Abstand ist das bessere Bild (Gestaltungsfrage,
 *                     an den Supervisor gemeldet)
 *   Kalender-Symbol   `display: block` statt inline-block — es rutscht im
 *                     32er-Knopf 6 px nach links (nicht mehr mittig; gemessen
 *                     ohne GF x=150, mit GF x=144 bei Knopf-Kante 144)
 *   Fehlerzustand     Label rot, Meldung mit 16/9 px Abstand (Block unten)
 * OHNE sichtbare Folge und deshalb NICHT zurueckgestellt: `.ginput_container_date`
 * wird `position: relative` (Lage von Feld, Knopf und Symbol mit/ohne GF
 * gleich gemessen).
 * Mittel: Gewicht (`body .mb-sheet .gform_wrapper.gravity-theme …`, 0,4,1 bzw.
 * 0,5,1), kein !important — GF nutzt dort selbst keins. */
body .mb-sheet .gform_wrapper.gravity-theme .gfield_required,
body .mb-sheet .gform_wrapper.gravity-theme .gfield_required .gfield_required_text,
body .mb-sheet .gform_wrapper.gravity-theme .gfield_required .gfield_required_custom,
body .mb-sheet .gform_wrapper.gravity-theme .gfield_required .gfield_required_asterisk {
    font-size: 14px;
    font-weight: 600;
    font-style: normal;
    line-height: 1.2;
    color: var(--e-global-color-primary, #C22BF7);
}
/* Vor den feldeigenen Beschreibungs-Regeln unten (gleiches Gewicht, die
 * spaeteren gewinnen) — hier nur der Boden gegen GFs 15. */
body .mb-sheet .gform_wrapper.gravity-theme .gfield_description:not(.validation_message) {
    font-size: 14px;
    line-height: 1.5;
}
/* Fehlerzustand (gemessen mit einem abgelehnten Link): GF faerbt das Label
 * #C02B0A (`.gfield_error …` schwerer als unsere 0,3,1-Label-Regel) und gibt
 * der Meldung ueber `.field_description_above/.field_sublabel_above
 * .description` (0,4,0) 16 px Abstand unten und 9 px oben. Unser Stand:
 * Label in Textfarbe, Meldung 8 px unter dem Feld, ohne Polster. */
body .mb-sheet .gform_wrapper.gravity-theme .gfield_error .gfield_label,
body .mb-sheet .gform_wrapper.gravity-theme .gfield_error .gform-field-label__text {
    color: var(--mb-fg, #222227);
}
body .mb-sheet .gform_wrapper.gravity-theme .gfield .gfield_validation_message,
body .mb-sheet .gform_wrapper.gravity-theme .gfield .validation_message {
    margin: 8px 0 0;
    padding: 0;
}

/* Raster: Datum und Stadt teilen sich eine Zeile, alles andere volle Breite. */
body .mb-sheet .mb-tv .gform_fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 16px;
    align-items: start;
}
body .mb-sheet .mb-tv .gfield {
    margin: 0;
    padding: 0;
}
/* ⚠ SPALTENBREITE AUS DEM FORMULAR-EDITOR GILT HIER NICHT (3.31.11). Stephan
 * 09.10.2026 am App-Bild: „Und was ist mit dem Stadtfeld los?" — Datum und Stadt
 * je ein Drittel breit. Am Live-DOM (Formular 5) gelesen: Location, Trenner und
 * Link tragen `gfield--width-full`; GFs `.gform_wrapper.gravity-theme
 * .gfield.gfield--width-full { grid-column: span 12 }` (0,4,0) schlug unsere
 * Vollbreite (0,3,1). Ein 12-Spalten-Feld im 2-Spalten-Raster erzeugt 10
 * IMPLIZITE Spalten — jede kostet eine 12-px-Luecke, die zwei echten Spalten
 * schrumpfen: (358 − 11×12) / 2 = 113 px bei 390 (Bild: 113), 198 statt 258 am
 * Desktop (gemessen). `.gform_fields >` hebt auf (0,4,1) und schlaegt JEDE
 * `gfield--width-*`-Regel (alle (0,4,0)).
 * Datum/Stadt auf (0,5,1): GF hat zusaetzlich `.gfield:not(.gfield--width-full)`
 * (0,5,0) — stellt jemand Datum/Stadt im Editor auf „halb", gewinnt trotzdem
 * die Zeile Datum | Stadt. */
body .mb-sheet .mb-tv .gform_fields > .gfield {
    grid-column: 1 / -1;
}
body .mb-sheet .mb-tv .gform_fields > .gfield.mb-tv-feld--datum,
body .mb-sheet .mb-tv .gform_fields > .gfield.mb-tv-feld--stadt {
    grid-column: auto;
}
body .mb-sheet .mb-tv .gfield--type-hidden {
    display: none;
}

/* ⚠ FELDGROESSE AUS DEM FORMULAR-EDITOR GILT HIER NICHT (3.31.10). Stephan
 * 09.10.2026 am App-Bild: „Und warum geht das Künstlerfeld nicht über die ganze
 * Breite?" Gemessen am Bild: Eingabe 171 px bei 358 px Spur = exakt GFs Klasse
 * `.medium` (`.gform_wrapper.gravity-theme .gfield input.medium`, (0,4,1):
 * calc(50% - 8px)); auf DDEV mit Feldgroesse „medium" nachgestellt: 171,0 px.
 * Das Sheet gibt jeder Eingabe die volle Breite ihres Kastens — egal, welche
 * Groesse (small/medium/large) im Editor steht. Nur Eingaben mit Textflaeche:
 * Checkbox/Radio/Hidden/File (Supervisor 09.10.) und Knopf-/Regler-Typen sind
 * ausdruecklich ausgenommen — per Selektor-Probe geprueft (matches je Typ).
 * Spezifitaet (0,5,2) schlaegt GFs (0,4,1) pro Eigenschaft, ohne !important. */
body .mb-sheet .mb-tv .gfield :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="range"], [type="color"]), select, textarea):is(.small, .medium, .large) {
    width: 100%;
    max-width: 100%;
}

/* Reihenfolge im Feld: Eingabe vor Beschreibung (Handoff), egal was der
 * Formular-Editor einstellt. */
body .mb-sheet .mb-tv .gfield.mb-tv-feld--kuenstler,
body .mb-sheet .mb-tv .gfield.mb-tv-feld--link {
    display: flex;
    flex-direction: column;
}
body .mb-sheet .mb-tv .mb-tv-feld--kuenstler .ginput_container,
body .mb-sheet .mb-tv .mb-tv-feld--link .ginput_container { order: 1; }
body .mb-sheet .mb-tv .mb-tv-feld--kuenstler .gfield_description:not(.validation_message),
body .mb-sheet .mb-tv .mb-tv-feld--link .gfield_description:not(.validation_message) { order: 2; }
body .mb-sheet .mb-tv .mb-tv-feld--kuenstler .gfield_validation_message,
body .mb-sheet .mb-tv .mb-tv-feld--link .gfield_validation_message { order: 3; }

/* Kuenstler- und Link-Feld: Label nur fuer Screenreader (Handoff zeigt
 * Icon + Platzhalter). */
body .mb-sheet .mb-tv .mb-tv-feld--kuenstler > .gfield_label,
body .mb-sheet .mb-tv .mb-tv-feld--link > .gfield_label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Such- und Link-Feld: Icon links, Fokus Rahmen #C22BF7 + Ring. */
body .mb-sheet .mb-tv .mb-tv-feld--kuenstler input[type="text"],
body .mb-sheet .mb-tv .mb-tv-feld--link input[type="url"] {
    /* `height`, nicht `min-height`: GF basic.min.css setzt min-height 32 mit
     * einer :not([type=…])-Kette, die spezifischer ist als diese Regel und
     * spaeter laedt (CSSOM-Walk 14.09.). `height` belegt GF nicht. */
    height: 48px;
    padding: 0 12px 0 44px;
    font-size: 16px;
    color: #222227;
    background-color: #FFFFFF;
    background-repeat: no-repeat;
    background-position: 14px 50%;
    background-size: 18px 18px;
    border: 1px solid rgba(34, 34, 39, .14);
    border-radius: 3px;
}
body .mb-sheet .mb-tv .mb-tv-feld--kuenstler input[type="text"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2384848E' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
}
body .mb-sheet .mb-tv .mb-tv-feld--link input[type="url"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2384848E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.1 0l3-3a5 5 0 0 0-7.1-7.1l-1.2 1.2'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.1 0l-3 3a5 5 0 0 0 7.1 7.1l1.2-1.2'/%3E%3C/svg%3E");
}
body .mb-sheet .mb-tv input::placeholder {
    color: #84848E;
    opacity: 1;
}
body .mb-sheet .mb-tv .mb-tv-feld--kuenstler input[type="text"]:focus,
body .mb-sheet .mb-tv .mb-tv-feld--link input[type="url"]:focus {
    border-color: #C22BF7;
    box-shadow: 0 0 0 3px rgba(194, 43, 247, .18);
    outline: none;
}

/* Hinweis unter dem Kuenstler-Feld: grauer Kasten mit Info-Icon. */
body .mb-sheet .mb-tv .mb-tv-feld--kuenstler .gfield_description:not(.validation_message) {
    margin: 16px 0 0;
    padding: 12px 12px 12px 40px;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.45;
    color: #55555E;
    background-color: #F5F5F5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355555E' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px 13px;
    background-size: 18px 18px;
    border-radius: 3px;
}
/* Microcopy unter dem Link-Feld. */
body .mb-sheet .mb-tv .mb-tv-feld--link .gfield_description:not(.validation_message) {
    margin: 8px 0 0;
    padding: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.45;
    color: #55555E;
}

/* Trenner („oder von Hand"): Text mittig zwischen zwei Haarlinien.
 * ⚠ KEINE VERSALIEN (Stephan 21.09.2026: „zu termin vorschlagen - keine
 *   vesalien - siehe design handbuch"; Handbuch §5 sagt es seit je —
 *   `text-transform: uppercase` ist Überschriften und Text-Labels nicht
 *   erlaubt, Ausnahme sind nur glyph-artige Kurz-Kürzel wie die Datums-Box).
 *   Bis 3.27.4 stand hier `text-transform: uppercase` plus `letter-spacing:
 *   .1em` — die Sperrung gehört zur Versal-Optik und geht mit ihr.
 * ⚠ DER TEXT SELBST kommt NICHT von hier, sondern aus dem GF-HTML-Feld
 *   (Formular „Termin vorschlagen", Feld 4/5, CSS-Klasse `mb-tv-trenner`);
 *   in der Bauanleitung von tourdates steht er als „ODER VON HAND" getippt.
 *   Solange das so im Formular steht, bleibt er auch ohne diese Regel groß —
 *   das ist ein Satz an Stephan fürs Live-Formular, kein CSS-Thema. */
body .mb-sheet .mb-tv .gfield.mb-tv-trenner {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 8px 0 0;
    font-size: 14px;              /* Handoff 12 → Boden 14 */
    font-weight: 600;
    letter-spacing: normal;
    color: #55555E;
}
body .mb-sheet .mb-tv .gfield.mb-tv-trenner::before,
body .mb-sheet .mb-tv .gfield.mb-tv-trenner::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(34, 34, 39, .14);
}

/* Datum, Stadt, Location: Label IM Rahmen, Eingabe darunter, Fehlermeldung
 * UNTER dem Rahmen.
 * ⚠ Der Rahmen haengt NICHT an der gfield, sondern an Label (oben) und
 *   Eingabe-Container (unten) — zusammen eine Box. Grund (Supervisor-Fund
 *   14.09., gemessen): GF setzt die Meldung (`field_validation_above`) IN die
 *   gfield vor die Eingabe; mit dem Rahmen an der gfield stand sie im Kasten
 *   und blaehte ihn auf (Datum 83 → 171 px). So bleibt die Box gleich hoch,
 *   und die Meldung rueckt per `order` darunter.
 * ⚠ DELTA: Fokus = Rahmen #C22BF7 ohne den 3-px-Ring (Ring gibt es am Such-
 *   und Link-Feld). Ein Ring um zwei gestapelte Kaesten zeigte eine Naht. */
body .mb-sheet .mb-tv .gfield.mb-tv-feld--datum,
body .mb-sheet .mb-tv .gfield.mb-tv-feld--stadt,
body .mb-sheet .mb-tv .gfield.mb-tv-feld--location {
    display: flex;
    flex-direction: column;
    align-self: start;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
body .mb-sheet .mb-tv .mb-tv-feld--datum > .gfield_label,
body .mb-sheet .mb-tv .mb-tv-feld--stadt > .gfield_label,
body .mb-sheet .mb-tv .mb-tv-feld--location > .gfield_label,
body .mb-sheet .mb-tv .mb-tv-feld--datum > .ginput_container,
body .mb-sheet .mb-tv .mb-tv-feld--stadt > .ginput_container,
body .mb-sheet .mb-tv .mb-tv-feld--location > .ginput_container {
    box-sizing: border-box;
    margin: 0;
    background: #FFFFFF;
    border: 1px solid rgba(34, 34, 39, .14);
}
body .mb-sheet .mb-tv .mb-tv-feld--datum > .gfield_label,
body .mb-sheet .mb-tv .mb-tv-feld--stadt > .gfield_label,
body .mb-sheet .mb-tv .mb-tv-feld--location > .gfield_label {
    order: 1;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
}
body .mb-sheet .mb-tv .mb-tv-feld--datum > .ginput_container,
body .mb-sheet .mb-tv .mb-tv-feld--stadt > .ginput_container,
body .mb-sheet .mb-tv .mb-tv-feld--location > .ginput_container {
    order: 2;
    padding: 0 12px 6px;
    border-top: 0;
    border-radius: 0 0 3px 3px;
}
/* ⚠ DIE BESCHREIBUNG BRAUCHT EINE EIGENE `order` (Stephan-Fund 21.09.2026):
 * Die Gruppe ist ein Flex-Container; wer keine `order` bekommt, steht auf 0 und
 * damit VOR allem anderen. Gemessen am DDEV-Sheet, Schritt 2: Label order 1
 * (y 653), Eingabe-Kasten order 2 (y 679), Beschreibung order 0 (y 632) — sie
 * stand also ueber dem Kasten und sah verwaist aus, zwischen Datum/Stadt-Zeile
 * und Location-Rahmen.
 * Reihenfolge nach der Grammatik von Kuenstler/Link (dort Eingabe 1,
 * Beschreibung 2, Meldung 3): erst das Feld, dann die Beschreibung, zuletzt die
 * Meldung. Im zusammengesetzten Feld sind 1 und 2 von Label und Kasten belegt,
 * also Beschreibung 3 und Meldung 4.
 * ⚠ ALLE DREI Felder der Gruppe, nicht nur Location: Datum und Stadt tragen auf
 * Stephans Formular heute keine Beschreibung — traegt eine davon morgen eine,
 * stuende sie sonst wieder oben. */
body .mb-sheet .mb-tv .mb-tv-feld--datum > .gfield_description:not(.validation_message),
body .mb-sheet .mb-tv .mb-tv-feld--stadt > .gfield_description:not(.validation_message),
body .mb-sheet .mb-tv .mb-tv-feld--location > .gfield_description:not(.validation_message) {
    order: 3;
    margin: 8px 0 0;            /* Abstand wie unter dem Link-Feld */
    padding: 0;
}
body .mb-sheet .mb-tv .mb-tv-feld--datum > .validation_message,
body .mb-sheet .mb-tv .mb-tv-feld--stadt > .validation_message,
body .mb-sheet .mb-tv .mb-tv-feld--location > .validation_message {
    order: 4;
}
/* ZEICHENZAEHLER UNTER DEN KASTEN (3.31.10). Ist im Editor eine Maximallaenge
 * gesetzt, schreibt GF „0 von 100 Zeichen" (`.ginput_counter`) IN den
 * Eingabe-Container — der ist hier die untere Haelfte des gerahmten Kastens.
 * Stephans Bild 09.10. (Stadt): Zaehler zweizeilig im Kasten, Kasten doppelt so
 * hoch wie Datum. Live gesetzt ist die Grenze am Stadtfeld; das DDEV-Formular
 * hatte keine (nachgestellt mit maxLength 100).
 * Herausloesen geht ohne Skript nicht, also: Container ist Bezugspunkt, der
 * Zaehler steht 8 px UNTER dem Kasten wie eine Beschreibung, und das Feld
 * reserviert dafuer eine Zeile — nur wenn es einen Zaehler hat (:has). */
body .mb-sheet .mb-tv .mb-tv-feld--datum > .ginput_container,
body .mb-sheet .mb-tv .mb-tv-feld--stadt > .ginput_container,
body .mb-sheet .mb-tv .mb-tv-feld--location > .ginput_container {
    position: relative;
}
body .mb-sheet .mb-tv .mb-tv-feld--datum .ginput_counter,
body .mb-sheet .mb-tv .mb-tv-feld--stadt .ginput_counter,
body .mb-sheet .mb-tv .mb-tv-feld--location .ginput_counter {
    position: absolute;
    top: calc(100% + 1px + 8px);   /* unter dem Rahmen, Abstand wie Beschreibungen */
    left: -1px;
    right: -1px;
    margin: 0;
    padding: 0;
    font-size: 14px;               /* Boden 14 */
    line-height: 1.5;
    white-space: nowrap;           /* einzeilig: 125 px Text in 173 px Spalte (390 px) */
    overflow: hidden;
    text-overflow: ellipsis;
    color: #55555E;
}
body.mb-dark .mb-sheet .mb-tv .mb-tv-feld--datum .ginput_counter,
body.mb-dark .mb-sheet .mb-tv .mb-tv-feld--stadt .ginput_counter,
body.mb-dark .mb-sheet .mb-tv .mb-tv-feld--location .ginput_counter {
    color: #B6B6BE;
}
body .mb-sheet .mb-tv .gfield.mb-tv-feld--datum:has(.ginput_counter),
body .mb-sheet .mb-tv .gfield.mb-tv-feld--stadt:has(.ginput_counter),
body .mb-sheet .mb-tv .gfield.mb-tv-feld--location:has(.ginput_counter) {
    padding-bottom: calc(8px + 1.5em);   /* Platz fuer die Zaehler-Zeile (14 px × 1,5 = 21 px + 8) */
}
body .mb-sheet .mb-tv .mb-tv-feld--datum > .gfield_label,
body .mb-sheet .mb-tv .mb-tv-feld--stadt > .gfield_label,
body .mb-sheet .mb-tv .mb-tv-feld--location > .gfield_label {
    display: block;
    margin: 0;
    padding: 8px 12px 0;
    font-size: 14px;              /* Handoff 11 → Boden 14 */
    font-weight: 600;
    line-height: 1.2;
    /* ⚠ KEINE VERSALIEN — Handbuch §5, Stephan 21.09.2026. Bis 3.27.4 stand
     * hier `text-transform: uppercase` mit `letter-spacing: .08em`; die
     * Sperrung gehört zur Versal-Optik und geht mit ihr. Die Texte selbst
     * („Datum", „Stadt", „Location") stehen im GF-Formular in normaler
     * Schreibung — gemessen am DDEV-Nachbau 26 —, hier wurden sie nur
     * angezeigt-großgeschrieben. */
    letter-spacing: normal;
    color: #55555E;
}
body .mb-sheet .mb-tv .mb-tv-feld--datum input[type="text"],
body .mb-sheet .mb-tv .mb-tv-feld--stadt input[type="text"],
body .mb-sheet .mb-tv .mb-tv-feld--location input[type="text"] {
    width: 100%;
    min-height: 32px;
    margin: 2px 0 0;
    padding: 0;
    font-size: 16px;
    color: #222227;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    outline: none;
}
body .mb-sheet .mb-tv .gfield.mb-tv-feld--datum:focus-within > .gfield_label,
body .mb-sheet .mb-tv .gfield.mb-tv-feld--stadt:focus-within > .gfield_label,
body .mb-sheet .mb-tv .gfield.mb-tv-feld--location:focus-within > .gfield_label,
body .mb-sheet .mb-tv .gfield.mb-tv-feld--datum:focus-within > .ginput_container,
body .mb-sheet .mb-tv .gfield.mb-tv-feld--stadt:focus-within > .ginput_container,
body .mb-sheet .mb-tv .gfield.mb-tv-feld--location:focus-within > .ginput_container {
    border-color: #C22BF7;
}
/* GF-Kalenderknopf im Datumsfeld: bleibt (Tastatur-Weg zum Kalender), aber
 * leise und kit-fest. */
body .mb-sheet .mb-tv .mb-tv-feld--datum .ginput_container_date {
    display: flex;
    align-items: center;
    gap: 4px;
}
body .mb-sheet .mb-tv .mb-tv-feld--datum button.gform-datepicker-toggle {
    /* 3.30.7: GF 3.1 oeffnet den Kalender NUR ueber diesen Knopf — er ist
       damit der Weg, nicht nur ein Tastatur-Zusatz. Optik bleibt 32, die
       Trefferflaeche waechst per ::before auf 44 (Handbuch: Flaeche ≥ 44,
       Optik darf kleiner sein). */
    position: relative;
    flex: none;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #84848E;
    box-shadow: none;
}
body .mb-sheet .mb-tv .mb-tv-feld--datum .gform-datepicker-toggle .gform-calendar-icon {
    color: #55555E;
}
/* GF setzt das Symbol auf `display: block` — dann steht es links im Knopf. */
body .mb-sheet .gform_wrapper.gravity-theme .mb-tv-feld--datum button.gform-datepicker-toggle .gform-calendar-icon {
    display: inline-block;
}
body .mb-sheet .mb-tv .mb-tv-feld--datum button.gform-datepicker-toggle::before {
    content: "";
    position: absolute;
    inset: -6px;          /* 32 + 2×6 = 44 */
}
body.mb-dark .mb-sheet .mb-tv .mb-tv-feld--datum .gform-datepicker-toggle .gform-calendar-icon {
    color: #B6B6BE;
}

/* ═══ GF-KALENDER IM SHEET (3.30.8) ═══════════════════════════════════════════
 * Der Datumswaehler von GF 3.1 (AccDC-Bibliothek) haengt als
 * `.gform-datepicker-calendar` IN `.ginput_container_date` und steht bei GF
 * absolut darunter. Gemessen 28.09. (DDEV, Seite 202740, Schritt 2):
 *   1280×900: Kalender 498 hoch, Sheet 548 — die letzte Wochenzeile lag 82 px
 *             unter dem Fensterrand; ein absolut gesetztes Element laesst das
 *             Sheet nicht wachsen.
 *   Tage 13/300, Wochentage 13/700 — unter dem 14-px-Boden. Unter 640 px
 *   schrumpft GF die Zellen auf 20 px (bei 390 gemessen 31 breit).
 *   Dunkel: weisser Kasten mit dunklen Monat/Jahr-Auswahlen (die site-weite
 *   Dunkel-Regel trifft die <select>, sonst nichts).
 * Loesung: Der Kalender bleibt GFs Popup unter dem Feld (absolut), wird aber
 * mit festen 44er-Zellen an JEDER Breite gleich gross (431 hoch) — das passt
 * in den sichtbaren Sheet-Inhalt (1280×900: 455). mb-sheet.js scrollt ihn beim
 * Oeffnen ins Bild; der Scrollbereich des Inhalts schliesst das Popup ein.
 * ⚰ VERWORFEN (am Bild): Kalender „im Fluss" (static + flex-wrap). Der
 *   Kalender-Knopf brach dabei in eine eigene Zeile, und der Rahmen des
 *   Datumsfeldes wuchs um den ganzen Kalender.
 * 7 × 44 + 24 = 332 passt in das 390er-Sheet (358 innen).
 * GF bietet fuer die Lage keine Einstellung. */
body .mb-sheet .gform_wrapper.gravity-theme .mb-tv-feld--datum .gform-datepicker-calendar {
    box-sizing: border-box;
    width: max-content;
    max-width: none;
    padding: 12px;
    scroll-margin: 16px;   /* Luft beim Einscrollen (mb-sheet.js) — sonst Kante an Kante */
    font-size: 14px;
    font-weight: 400;
}
body .mb-sheet .gform_wrapper.gravity-theme .gform-datepicker-calendar table.calendar td,
body .mb-sheet .gform_wrapper.gravity-theme .gform-datepicker-calendar table.calendar th {
    box-sizing: border-box;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
}
body .mb-sheet .gform_wrapper.gravity-theme .gform-datepicker-calendar table.calendar td span,
body .mb-sheet .gform_wrapper.gravity-theme .gform-datepicker-calendar table.calendar th span {
    width: 40px;
    height: 40px;
    margin: 0 auto;
}
body .mb-sheet .gform_wrapper.gravity-theme .gform-datepicker-calendar table.calendar td span {
    font-size: 14px;
    font-weight: 400;
}
body .mb-sheet .gform_wrapper.gravity-theme .gform-datepicker-calendar table.calendar th span {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Dunkel: Flaeche #2C2C31, erhobene Flaeche #3A3A40, Linie #45454C, Text
 * #F5F5F7, Sekundaer #B6B6BE; der gewaehlte/heutige Tag bekommt einen
 * Akzent-RING statt Akzent-Flaeche — Weiss auf #C22BF7 haette nur 3,9:1. */
body.mb-dark .mb-sheet .gform_wrapper.gravity-theme .gform-datepicker-calendar {
    background: #2C2C31;
    border-color: #45454C;
    color: #F5F5F7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
body.mb-dark .mb-sheet .gform_wrapper.gravity-theme .gform-datepicker-calendar table.calendar td,
body.mb-dark .mb-sheet .gform_wrapper.gravity-theme .gform-datepicker-calendar table.calendar th {
    border-color: #45454C;
}
body.mb-dark .mb-sheet .gform_wrapper.gravity-theme .gform-datepicker-calendar table.calendar th span {
    color: #B6B6BE;
}
body.mb-dark .mb-sheet .gform_wrapper.gravity-theme .gform-datepicker-calendar table.calendar td span {
    color: #F5F5F7;
}
body.mb-dark .mb-sheet .gform_wrapper.gravity-theme .gform-datepicker-calendar table.calendar td span:hover,
body.mb-dark .mb-sheet .gform_wrapper.gravity-theme .gform-datepicker-calendar table.calendar td span:focus {
    background: #3A3A40;
    border-color: #B6B6BE;
}
body.mb-dark .mb-sheet .gform_wrapper.gravity-theme .gform-datepicker-calendar table.calendar .dayToday span,
body.mb-dark .mb-sheet .gform_wrapper.gravity-theme .gform-datepicker-calendar table.calendar .selected span {
    background: #3A3A40;
    border: 2px solid #C22BF7;
    color: #F5F5F7;
    box-shadow: none;
}
body.mb-dark .mb-sheet .gform_wrapper.gravity-theme .gform-datepicker-calendar table.calendar .disabled span {
    background: #3A3A40;
    border-color: #45454C;
    color: #B6B6BE;
}
body.mb-dark .mb-sheet .gform_wrapper.gravity-theme .gform-datepicker-calendar .nav.next,
body.mb-dark .mb-sheet .gform_wrapper.gravity-theme .gform-datepicker-calendar .nav.prev,
body.mb-dark .mb-sheet .gform_wrapper.gravity-theme .gform-datepicker-calendar .nav.next::before,
body.mb-dark .mb-sheet .gform_wrapper.gravity-theme .gform-datepicker-calendar .nav.prev::before {
    color: #B6B6BE;
}
/* Monat/Jahr: Flaeche/Text/Rahmen kommen aus der site-weiten Dunkel-Regel;
 * nur GFs dunkler Pfeil waere auf #2A2A30 unsichtbar. */
body.mb-dark .mb-sheet .gform_wrapper.gravity-theme .gform-datepicker-calendar select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B6B6BE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
}

/* Autocomplete-Liste (tourdates-JS, Combobox-Muster): haengt am Feld. */
body .mb-sheet .mb-tv ul.mb-tv-vorschlaege {
    margin: -1px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid rgba(34, 34, 39, .14);
    border-radius: 0 0 3px 3px;
    background: #FFFFFF;
}
body .mb-sheet .mb-tv li.mb-tv-vorschlag {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin: 0;
    padding: 0 12px;
    font-size: 16px;
    font-weight: 400;
    color: #222227;
    cursor: pointer;
}
body .mb-sheet .mb-tv li.mb-tv-vorschlag + li.mb-tv-vorschlag {
    border-top: 1px solid rgba(34, 34, 39, .10);
}
body .mb-sheet .mb-tv li.mb-tv-vorschlag.is-aktiv {
    background: #F5F5F5;
}
@media (hover: hover) {
    body .mb-sheet .mb-tv li.mb-tv-vorschlag:hover {
        background: #F5F5F5;
    }
}
body .mb-sheet .mb-tv .mb-tv-folgst {
    margin-left: auto;
    flex: none;
    font-size: 14px;              /* Handoff 13 → Boden 14 */
    font-weight: 300;
    color: #55555E;
}
body .mb-sheet .mb-tv li.mb-tv-vorschlag--leer {
    min-height: 44px;
    padding: 12px;
    font-size: 14px;
    font-weight: 300;
    color: #55555E;
    cursor: default;
}

/* Knoepfe: Zurueck/Bearbeiten Outline, Weiter/Einreichen gefuellt, Radius 3. */
body .mb-sheet .mb-tv .gform_page_footer,
body .mb-sheet .mb-tv .gform_footer {
    display: flex;
    gap: 12px;
    margin: 24px 0 0;
    padding: 0;
    border: 0;
}
body .mb-sheet .mb-tv .gform_page_footer .button,
body .mb-sheet .mb-tv .gform_footer .button {
    box-sizing: border-box;
    min-height: 48px;
    margin: 0;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: none;
    text-decoration: none;
}
body .mb-sheet .mb-tv .gform_page_footer .gform_previous_button {
    flex: 1 1 0;
    background: transparent;
    color: #222227;
    border: 1px solid rgba(34, 34, 39, .4);
}
body .mb-sheet .mb-tv .gform_page_footer .gform_next_button,
body .mb-sheet .mb-tv .gform_page_footer .gform_button,
body .mb-sheet .mb-tv .gform_footer .gform_button {
    flex: 2 1 0;
    background: #C22BF7;
    color: #FFFFFF;
    border: 1px solid #C22BF7;
}
@media (hover: hover) {
    body .mb-sheet .mb-tv .gform_page_footer .gform_next_button:hover,
    body .mb-sheet .mb-tv .gform_page_footer .gform_button:hover,
    body .mb-sheet .mb-tv .gform_footer .gform_button:hover {
        background: #8420A6;
        border-color: #8420A6;
    }
    body .mb-sheet .mb-tv .gform_page_footer .gform_previous_button:hover {
        background: rgba(34, 34, 39, .06);
    }
}

/* ── Dunkel ── */
/* ⚠ !important seit 3.27.4: Das Theme faerbt im Dunkeln ALLE Eingabefelder
 * site-weit (#2A2A30 auf dem Seiten-Dunkel #222227, mb-theme-standards.css,
 * Abschnitt „DUNKEL: EINGABEFELDER"), und zwar mit !important gegen
 * Elementor-Seiten-CSS. Ein `!important` schlaegt jede Spezifitaet: ohne das
 * hier bekaeme das Sheet die Seitenfarbe. Im Sheet ist es genau andersherum
 * — das Feld steht auf der HELLEREN Flaeche #2A2A31 und muss deshalb
 * DUNKLER sein. Wer die eine Seite aendert, aendert die andere mit. */
body.mb-dark .mb-sheet .mb-tv .mb-tv-feld--kuenstler input[type="text"],
body.mb-dark .mb-sheet .mb-tv .mb-tv-feld--link input[type="url"],
body.mb-dark .mb-sheet .mb-tv .mb-tv-feld--datum > .gfield_label,
body.mb-dark .mb-sheet .mb-tv .mb-tv-feld--stadt > .gfield_label,
body.mb-dark .mb-sheet .mb-tv .mb-tv-feld--location > .gfield_label,
body.mb-dark .mb-sheet .mb-tv .mb-tv-feld--datum > .ginput_container,
body.mb-dark .mb-sheet .mb-tv .mb-tv-feld--stadt > .ginput_container,
body.mb-dark .mb-sheet .mb-tv .mb-tv-feld--location > .ginput_container,
body.mb-dark .mb-sheet .mb-tv ul.mb-tv-vorschlaege {
    background-color: #222227 !important;
    border-color: rgba(255, 255, 255, .12) !important;
}
body.mb-dark .mb-sheet .mb-tv input[type="text"],
body.mb-dark .mb-sheet .mb-tv input[type="url"],
body.mb-dark .mb-sheet .mb-tv li.mb-tv-vorschlag {
    color: #F5F5F7;
}
/* Datum, Stadt und Location tragen KEINE eigene Flaeche: Rahmen und Fuellung
 * gehoeren dem Container (Handoff-Optik, Zeile 380 ff.). Die site-weite
 * Dunkel-Regel (3.27.4) wuerde jedem Feld Flaeche und Rahmen geben — dagegen
 * hilft nur dasselbe Gewicht. */
body.mb-dark .mb-sheet .mb-tv .mb-tv-feld--datum input[type="text"],
body.mb-dark .mb-sheet .mb-tv .mb-tv-feld--stadt input[type="text"],
body.mb-dark .mb-sheet .mb-tv .mb-tv-feld--location input[type="text"] {
    background-color: transparent !important;
    border: 0 !important;
    color: #F5F5F7 !important;
}
body.mb-dark .mb-sheet .mb-tv .mb-tv-feld--kuenstler .gfield_description:not(.validation_message) {
    color: #B6B6BE;
    background-color: rgba(255, 255, 255, .06);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B6B6BE' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
}
body.mb-dark .mb-sheet .mb-tv .mb-tv-feld--link .gfield_description:not(.validation_message),
/* Die Beschreibungen der zusammengesetzten Felder standen hier bisher nicht —
 * sie hatten im Dunkeln keine eigene Farbe (21.09.2026 mitgemessen). */
body.mb-dark .mb-sheet .mb-tv .mb-tv-feld--datum > .gfield_description:not(.validation_message),
body.mb-dark .mb-sheet .mb-tv .mb-tv-feld--stadt > .gfield_description:not(.validation_message),
body.mb-dark .mb-sheet .mb-tv .mb-tv-feld--location > .gfield_description:not(.validation_message),
body.mb-dark .mb-sheet .mb-tv .gfield.mb-tv-trenner,
body.mb-dark .mb-sheet .mb-tv .mb-tv-feld--datum > .gfield_label,
body.mb-dark .mb-sheet .mb-tv .mb-tv-feld--stadt > .gfield_label,
body.mb-dark .mb-sheet .mb-tv .mb-tv-feld--location > .gfield_label,
body.mb-dark .mb-sheet .mb-tv .mb-tv-folgst,
body.mb-dark .mb-sheet .mb-tv li.mb-tv-vorschlag--leer {
    color: #B6B6BE;
}
body.mb-dark .mb-sheet .mb-tv .gfield.mb-tv-trenner::before,
body.mb-dark .mb-sheet .mb-tv .gfield.mb-tv-trenner::after,
body.mb-dark .mb-sheet .mb-tv li.mb-tv-vorschlag + li.mb-tv-vorschlag {
    background-color: rgba(255, 255, 255, .12);
}
body.mb-dark .mb-sheet .mb-tv li.mb-tv-vorschlag + li.mb-tv-vorschlag {
    background-color: transparent;
    border-top-color: rgba(255, 255, 255, .10);
}
body.mb-dark .mb-sheet .mb-tv li.mb-tv-vorschlag.is-aktiv {
    background: rgba(255, 255, 255, .08);
}
body.mb-dark .mb-sheet .mb-tv .gform_page_footer .gform_previous_button {
    color: #F5F5F7;
    border-color: rgba(255, 255, 255, .4);
}

/* ── Schritt 3: Terminzeile, Statuszeilen, Dublette ────────────────────────
 * Markup von tourdates (Nachricht 14.09. 14:13) im HTML-Feld
 * `.mb-tv-bestaetigung` > `.mb-tv-schritt3[data-mb-tv-zustand]`.
 * Die Zeile selbst (`li.mb-concert`) ist tourdates-Eigentum und kommt aus
 * demselben Renderer wie die Liste — hier NUR der Rahmen darum (Handoff:
 * Hairline-Rahmen), keine Regel an der Zeile. */
body .mb-sheet .mb-tv ul.mb-tv-zeile {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid rgba(34, 34, 39, .14);
    border-radius: 3px;
    overflow: hidden;
}
/* Die Listenzeile bringt ihre Trenn-Haarlinie unten mit (Liste: Zeile an Zeile).
 * Im Rahmen laege sie doppelt auf dessen Unterkante — gemessen 14.09.:
 * `li.mb-concert` border-bottom 1px rgba(34,34,39,.1) bei Abstand 0 zum Rahmen.
 * Nur diese eine Linie, nur als letzte Zeile im Rahmen; die Zeile sonst unberuehrt. */
body .mb-sheet .mb-tv ul.mb-tv-zeile > li.mb-concert:last-child {
    border-bottom: 0;
}
body .mb-sheet .mb-tv .mb-tv-status,
body .mb-sheet .mb-tv .mb-tv-dublette__hinweis {
    margin: 12px 0 0;
    font-size: 14px;              /* Handoff 13 → Boden 14 */
    font-weight: 300;
    line-height: 1.45;
    color: #55555E;
}
body .mb-sheet .mb-tv .mb-tv-status {
    padding-left: 26px;
    background-repeat: no-repeat;
    background-position: 0 2px;
    background-size: 18px 18px;
}
/* Haken #10845F (Handoff) — Symbol, kein Text (Grenze 3:1). Gerechnet 14.09.:
 * 4,68:1 auf Weiss, 3,04:1 auf dem Dunkel-Sheet #2A2A31. */
body .mb-sheet .mb-tv .mb-tv-status--quelle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310845F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
body .mb-sheet .mb-tv .mb-tv-status--pruefung {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355555E' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
/* Dritte Variante (tourdates 14.09. 14:35): Zwilling ist selbst ein Vorschlag in
 * Pruefung — `.mb-tv-dublette` traegt dann NUR den Hinweis, ohne Zeile. Der
 * Hinweis-Abstand nach oben entfaellt, wenn nichts darueber steht. */
body .mb-sheet .mb-tv .mb-tv-dublette > .mb-tv-dublette__hinweis:first-child {
    margin-top: 0;
}
/* Dublette: kein Senden. tourdates blendet zusaetzlich per `hidden` aus;
 * die Regel deckt input UND button (GF rendert je nach Einstellung beides). */
body .mb-sheet .mb-tv[data-mb-tv-zustand="dublette"] .gform_page_footer .gform_button,
body .mb-sheet .mb-tv[data-mb-tv-zustand="dublette"] .gform_footer .gform_button {
    display: none;
}

/* ── Validierung (GF-Standard): neutral und direkt am Feld (Handbuch:
 * „Fehler/Erfolg neutral + kompakt"). ── */
/* GF-Zusammenfassung „Es gab ein Problem …" AUS: Handoff = Meldung am Feld, und
 * die Zusammenfassung wiederholte jede Feld-Meldung (Supervisor-Fund 14.09.).
 * Den Fokus aufs erste Fehlerfeld setzt tourdates (Vertrag 2.30.1). */
body .mb-sheet .mb-tv .gform_validation_errors {
    display: none;
}
/* Die Feld-Meldung traegt bei GF AUCH `gfield_description` — ohne den :not()
 * oben sah sie aus wie der graue Hinweis-Kasten (Bild 14.09.). */
body .mb-sheet .mb-tv .gfield_validation_message,
body .mb-sheet .mb-tv .validation_message {
    margin: 8px 0 0;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: #222227;
    background: transparent;
    border: 0;
}
/* :not(:focus)/:not(:focus-within): Beim Korrigieren gewinnt der Fokusrahmen —
 * sonst verdraengte der Fehlerrahmen das Magenta (gemessen 14.09.). */
body .mb-sheet .mb-tv .gfield_error.mb-tv-feld--kuenstler input[type="text"]:not(:focus),
body .mb-sheet .mb-tv .gfield_error.mb-tv-feld--link input[type="url"]:not(:focus),
body .mb-sheet .mb-tv .gfield.gfield_error.mb-tv-feld--datum:not(:focus-within) > .gfield_label,
body .mb-sheet .mb-tv .gfield.gfield_error.mb-tv-feld--datum:not(:focus-within) > .ginput_container,
body .mb-sheet .mb-tv .gfield.gfield_error.mb-tv-feld--stadt:not(:focus-within) > .gfield_label,
body .mb-sheet .mb-tv .gfield.gfield_error.mb-tv-feld--stadt:not(:focus-within) > .ginput_container,
body .mb-sheet .mb-tv .gfield.gfield_error.mb-tv-feld--location:not(:focus-within) > .gfield_label,
body .mb-sheet .mb-tv .gfield.gfield_error.mb-tv-feld--location:not(:focus-within) > .ginput_container {
    border-color: #222227;
}

body.mb-dark .mb-sheet .mb-tv ul.mb-tv-zeile {
    border-color: rgba(255, 255, 255, .12);
}
body.mb-dark .mb-sheet .mb-tv .mb-tv-status,
body.mb-dark .mb-sheet .mb-tv .mb-tv-dublette__hinweis {
    color: #B6B6BE;
}
body.mb-dark .mb-sheet .mb-tv .mb-tv-status--pruefung {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B6B6BE' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
body.mb-dark .mb-sheet .mb-tv .gfield_validation_message,
body.mb-dark .mb-sheet .mb-tv .validation_message {
    color: #F5F5F7;
}
body.mb-dark .mb-sheet .mb-tv .gfield_error.mb-tv-feld--kuenstler input[type="text"]:not(:focus),
body.mb-dark .mb-sheet .mb-tv .gfield_error.mb-tv-feld--link input[type="url"]:not(:focus),
body.mb-dark .mb-sheet .mb-tv .gfield.gfield_error.mb-tv-feld--datum:not(:focus-within) > .gfield_label,
body.mb-dark .mb-sheet .mb-tv .gfield.gfield_error.mb-tv-feld--datum:not(:focus-within) > .ginput_container,
body.mb-dark .mb-sheet .mb-tv .gfield.gfield_error.mb-tv-feld--stadt:not(:focus-within) > .gfield_label,
body.mb-dark .mb-sheet .mb-tv .gfield.gfield_error.mb-tv-feld--stadt:not(:focus-within) > .ginput_container,
body.mb-dark .mb-sheet .mb-tv .gfield.gfield_error.mb-tv-feld--location:not(:focus-within) > .gfield_label,
body.mb-dark .mb-sheet .mb-tv .gfield.gfield_error.mb-tv-feld--location:not(:focus-within) > .ginput_container {
    border-color: #F5F5F7;
}

/* ── Lade- und Fehlerzustand des Containers (tourdates ab 2.30.1: Formular
 * kommt beim Oeffnen per REST; `.mb-tv[data-mb-tv-zustand="laedt"|"fehler"]`).
 * Kein Text aus CSS — Woerter liefert der Besitzer. ── */
body .mb-sheet .mb-tv[data-mb-tv-zustand="laedt"] {
    min-height: 160px;
    border-radius: 3px;
    background: #F5F5F5;
    animation: mb-sheet-laedt 1.2s ease-in-out infinite alternate;
}
@keyframes mb-sheet-laedt {
    from { opacity: .55; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    body .mb-sheet .mb-tv[data-mb-tv-zustand="laedt"] { animation: none; }
}
body .mb-sheet .mb-tv[data-mb-tv-zustand="fehler"] > p {
    margin: 0;
    padding: 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: #222227;
    background: #F5F5F5;
    border-radius: 3px;
}
body.mb-dark .mb-sheet .mb-tv[data-mb-tv-zustand="laedt"],
body.mb-dark .mb-sheet .mb-tv[data-mb-tv-zustand="fehler"] > p {
    background: rgba(255, 255, 255, .06);
}
body.mb-dark .mb-sheet .mb-tv[data-mb-tv-zustand="fehler"] > p {
    color: #F5F5F7;
}

/* Allgemeiner Hinweis oben auf der Seite (Netz, Anmeldung — tourdates 2.30.1:
 * `p.mb-tv-meldung.mb-tv-hinweis[role=alert]`): neutraler Kasten wie der
 * Fehlerzustand, Handbuch „Fehler neutral + kompakt". */
body .mb-sheet .mb-tv .mb-tv-hinweis {
    margin: 0 0 16px;
    padding: 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: #222227;
    background: #F5F5F5;
    border-radius: 3px;
}
body.mb-dark .mb-sheet .mb-tv .mb-tv-hinweis {
    color: #F5F5F7;
    background: rgba(255, 255, 255, .06);
}