/*
 * formular-v2.css — Sidebar-Layout v2 (Glass Morphism / Outline-Glow)
 * Gilt nur innerhalb .mrtr-reservierung-container.mrtr-layout-sidebar.
 * Alle Farben ausschließlich über die CSS-Variablen aus skripte_laden()
 * (reservierung_container_background etc.) — nichts hart kodiert.
 * Glas-Regler: --glass-opacity (20-100), --glass-blur (0-40px), --glass-glow (0-40)
 * werden nur ausgegeben, wenn der Glas-Morphismus im Backend aktiviert ist;
 * die Defaults hier lassen das Formular ohne Aktivierung opak erscheinen.
 * Effekte (Verläufe, Glows) werden per color-mix() automatisch aus den
 * Design-Einstellungen abgeleitet — es gibt dafür keine eigenen Einstellungen.
*/

/* ===================== Container / Formular-Kachel ===================== */
.mrtr-reservierung-container.mrtr-layout-sidebar {
    max-width: 1020px;
    width: 100%;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    background:
        radial-gradient(1200px 500px at 85% -10%, color-mix(in srgb, var(--reservierung-button-color) 10%, transparent), transparent 60%),
        radial-gradient(900px 420px at -10% 110%, color-mix(in srgb, var(--reservierung-tile-bg) 7%, transparent), transparent 55%),
        color-mix(in srgb, var(--reservierung-container-bg) calc(var(--glass-opacity, 100) * 1%), transparent) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur, 0px)) saturate(140%);
    backdrop-filter: blur(var(--glass-blur, 0px)) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, .35),
        0 0 90px color-mix(in srgb, var(--reservierung-button-color) calc(var(--glass-glow, 0) * 1%), transparent),
        inset 0 1px 0 rgba(255, 255, 255, .12);
    overflow: hidden;
    box-sizing: border-box;
}

/* Fallback ohne backdrop-filter: voll opak statt Glas */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mrtr-reservierung-container.mrtr-layout-sidebar {
        background: var(--reservierung-container-bg) !important;
    }
}

/* ===== Glas aktiv (Klasse mrtr-glass-on aus dem Template) =====
   Über der transparenten Glasfläche wirken die großen Kachel-Glows klobig
   (der Schatten "leuchtet hinter dem Glas"). Bei aktivem Glas-Morphismus
   werden die Glow-Schatten deshalb deutlich gedämpft — Outline & Border
   bleiben erhalten. */
.mrtr-reservierung-container.mrtr-glass-on.mrtr-layout-sidebar .mrtr-people-option,
.mrtr-reservierung-container.mrtr-glass-on.mrtr-layout-sidebar .mrtr-time-option,
.mrtr-reservierung-container.mrtr-glass-on.mrtr-layout-sidebar .mrtr-date-option,
.mrtr-reservierung-container.mrtr-glass-on.mrtr-layout-sidebar .mrtr-event-type-tile {
    box-shadow: 0 0 8px color-mix(in srgb, var(--reservierung-tile-bg) 14%, transparent) !important;
}

.mrtr-reservierung-container.mrtr-glass-on.mrtr-layout-sidebar .mrtr-people-option:hover,
.mrtr-reservierung-container.mrtr-glass-on.mrtr-layout-sidebar .mrtr-time-option:hover,
.mrtr-reservierung-container.mrtr-glass-on.mrtr-layout-sidebar .mrtr-date-option:hover,
.mrtr-reservierung-container.mrtr-glass-on.mrtr-layout-sidebar .mrtr-event-type-tile:hover {
    box-shadow: 0 0 12px color-mix(in srgb, var(--reservierung-tile-bg) 22%, transparent) !important;
}

.mrtr-reservierung-container.mrtr-glass-on.mrtr-layout-sidebar .mrtr-people-option.selected,
.mrtr-reservierung-container.mrtr-glass-on.mrtr-layout-sidebar .mrtr-time-option.selected,
.mrtr-reservierung-container.mrtr-glass-on.mrtr-layout-sidebar .mrtr-date-option.selected,
.mrtr-reservierung-container.mrtr-glass-on.mrtr-layout-sidebar .mrtr-event-type-tile.selected {
    box-shadow: 0 0 10px color-mix(in srgb, var(--reservierung-tile-bg) 28%, transparent) !important;
}

.mrtr-reservierung-container.mrtr-glass-on.mrtr-layout-sidebar .mrtr-reservation-type-option.mrtr-v2-type-tile {
    box-shadow: 0 6px 16px color-mix(in srgb, var(--reservierung-tile-bg) 18%, transparent) !important;
}

.mrtr-reservierung-container.mrtr-glass-on.mrtr-layout-sidebar .mrtr-reservation-type-option.mrtr-v2-type-tile:hover {
    box-shadow: 0 10px 22px color-mix(in srgb, var(--reservierung-tile-bg) 26%, transparent) !important;
}

.mrtr-reservierung-container.mrtr-glass-on.mrtr-layout-sidebar .mrtr-reservation-type-option.mrtr-v2-type-tile.selected {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--reservierung-button-color) 35%, transparent),
                0 8px 18px color-mix(in srgb, var(--reservierung-button-color) 22%, transparent) !important;
}

.mrtr-layout-sidebar .mrtr-v2-card {
    display: flex;
    align-items: stretch;
    min-height: 640px;
}

.mrtr-layout-sidebar .mrtr-v2-main {
    flex: 1 1 auto;
    min-width: 0;
    /* Extra Raum unten: die Glow-Schatten der Kacheln dürfen nicht
       in die Glasfläche der Karte hineinlaufen */
    padding: 40px 48px 56px;
    overflow-y: auto;
    max-height: 760px;
}

/* ===================== Sidebar ===================== */
.mrtr-layout-sidebar .mrtr-v2-sidebar {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    padding: 40px 0 32px;
    background: rgba(255, 255, 255, .05);
    border-right: 1px solid rgba(255, 255, 255, .08);
}

.mrtr-layout-sidebar .mrtr-v2-sidebar-header {
    padding: 0 32px;
    margin-bottom: 36px;
}

.mrtr-layout-sidebar .mrtr-v2-sidebar-header h2 {
    margin: 0;
    font-family: "Noto Serif", Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--reservierung-button-color) !important;
}

/* Schritte — übernimmt die Klassen .mrtr-reservierung-step aus formular.js,
   hier als Sidebar-Liste statt oberer Balken. Die alten Kreise/Labels der
   formular-style.css (40px rund, Label absolut darunter) müssen komplett
   zurückgesetzt werden, sonst überlappen die Beschriftungen. */
.mrtr-layout-sidebar .mrtr-v2-step-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mrtr-layout-sidebar .mrtr-v2-step-nav .mrtr-reservierung-step {
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 14px;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 12px 32px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--reservierung-text-color) !important;
    opacity: .55;
    font-size: 14px !important;
    line-height: 1.4 !important;
    cursor: default;
    transition: all .3s;
    box-shadow: none !important;
    z-index: auto !important;
}

.mrtr-layout-sidebar .mrtr-v2-step-nav .mrtr-reservierung-step .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

/* Label: alter Stil ist absolut unter dem Kreis positioniert → statisch setzen */
.mrtr-layout-sidebar .mrtr-v2-step-nav .mrtr-reservierung-step .mrtr-reservierung-step-label {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    white-space: normal !important;
    max-width: none !important;
    text-align: left !important;
    font-size: 14px !important;
    color: inherit !important;
    font-weight: inherit;
    opacity: 1;
}

.mrtr-layout-sidebar .mrtr-v2-step-nav .mrtr-reservierung-step.active {
    background: linear-gradient(90deg, color-mix(in srgb, var(--reservierung-button-color) 22%, transparent), transparent 85%) !important;
    color: var(--reservierung-button-color) !important;
    opacity: 1;
    font-weight: 600;
    border-radius: 999px 0 0 999px !important;
    margin-left: 16px !important;
    padding-left: 24px !important;
    box-shadow: inset 3px 0 0 var(--reservierung-button-color) !important;
}

.mrtr-layout-sidebar .mrtr-v2-step-nav .mrtr-reservierung-step.completed {
    opacity: .85;
}

.mrtr-layout-sidebar .mrtr-v2-step-nav .mrtr-reservierung-step.completed .dashicons {
    color: var(--reservierung-button-color);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--reservierung-button-color) 60%, transparent));
}

.mrtr-layout-sidebar .mrtr-v2-step-nav .mrtr-reservierung-step.locked {
    opacity: .35;
    pointer-events: none;
}

/* ===== Ihre Auswahl (baut sich Zeile für Zeile auf) ===== */
.mrtr-layout-sidebar .mrtr-v2-selection {
    margin: 44px 24px 0;
    padding: 22px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--reservierung-border-radius);
}

.mrtr-layout-sidebar .mrtr-v2-selection h3 {
    margin: 0 0 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--reservierung-button-color) !important;
}

.mrtr-layout-sidebar .mrtr-v2-sel-row {
    display: none;
    align-items: center;
    gap: 12px;
}

.mrtr-layout-sidebar .mrtr-v2-sel-row.visible {
    display: flex;
    animation: mrtrV2FadeUp .3s ease;
}

.mrtr-layout-sidebar .mrtr-v2-sel-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: var(--reservierung-button-color);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mrtr-layout-sidebar .mrtr-v2-sel-label {
    margin: 0;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--reservierung-text-color);
    opacity: .55;
}

.mrtr-layout-sidebar .mrtr-v2-sel-value {
    margin: 2px 0 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--reservierung-text-color);
}

/* ===================== Panels / Formulare ===================== */
.mrtr-layout-sidebar .mrtr-reservierung-form-step.active {
    margin-top: 0;
    animation: mrtrV2FadeUp .35s ease;
}

@keyframes mrtrV2FadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* Abschnitts-Überschriften: linksbündig, Kapitälchen, feine Linie —
   die alte formular-style.css styled sie zentriert mit dickem ::after-Balken
   (alles !important), daher hier ebenfalls mit !important. */
.mrtr-layout-sidebar .mrtr-form-section-header {
    font-size: 12px !important;
    font-weight: 600 !important;
    /* Kein CAPS: Überschriften so, wie sie im Backend eingegeben wurden */
    text-transform: none !important;
    letter-spacing: .05em !important;
    text-align: center !important;
    color: var(--reservierung-text-color) !important;
    opacity: .6;
    margin: 0 0 22px 0 !important;
    padding: 0 0 10px !important;
    padding-top: 0 !important;
    border-bottom: none !important;
    line-height: 1.4 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px;
}

/* Trennlinien links UND rechts vom zentrierten Titel */
.mrtr-layout-sidebar .mrtr-form-section-header::before,
.mrtr-layout-sidebar .mrtr-form-section-header::after {
    content: '' !important;
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    flex: 1 1 auto;
    height: 1px !important;
    background: color-mix(in srgb, var(--reservierung-text-color) 25%, transparent) !important;
    border-radius: 0 !important;
}

.mrtr-layout-sidebar .mrtr-form-section-header:hover::before,
.mrtr-layout-sidebar .mrtr-form-section-header:hover::after {
    width: auto !important;
}

.mrtr-layout-sidebar .mrtr-v2-gruppe {
    margin-bottom: 28px;
}

/* ===== Große Typ-Kacheln (Schritt 1) — Verlauf + Auswahl-Badge ===== */
.mrtr-layout-sidebar .mrtr-v2-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.mrtr-layout-sidebar .mrtr-reservation-type-option.mrtr-v2-type-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: auto;
    min-height: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: all .3s cubic-bezier(.2, .7, .3, 1);
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--reservierung-tile-bg) 88%, #ffffff) 0%,
        var(--reservierung-tile-bg) 45%,
        color-mix(in srgb, var(--reservierung-tile-bg) 82%, #000000) 100%);
    color: var(--reservierung-tile-text-color);
    border: 2px solid rgba(255, 255, 255, .12);
    border-radius: var(--reservierung-border-radius);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--reservierung-tile-bg) 30%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, .25);
}

.mrtr-layout-sidebar .mrtr-reservation-type-option.mrtr-v2-type-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--reservierung-tile-bg) 45%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, .3);
}

.mrtr-layout-sidebar .mrtr-reservation-type-option.mrtr-v2-type-tile.selected {
    border-color: var(--reservierung-button-color) !important;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--reservierung-tile-bg) 88%, #ffffff) 0%,
        var(--reservierung-tile-bg) 45%,
        color-mix(in srgb, var(--reservierung-tile-bg) 82%, #000000) 100%) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--reservierung-button-color) 40%, transparent),
                0 14px 34px color-mix(in srgb, var(--reservierung-button-color) 40%, transparent) !important;
}

/* Alter Hover-Streifen der Typ-Kacheln entfällt */
.mrtr-layout-sidebar .mrtr-reservation-type-option.mrtr-v2-type-tile::before {
    content: none !important;
}

/* Auswahl-Badge oben rechts (wie im Entwurf): Orange Badge + weiße Check-Disc
   (dashicons yes-alt = gefüllter Kreis mit ausgestanztem Häkchen) */
.mrtr-layout-sidebar .mrtr-reservation-type-option.mrtr-v2-type-tile.selected::after {
    content: "\f12a";
    font-family: dashicons;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--reservierung-button-color);
    color: var(--reservierung-button-text-color);
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    box-shadow: 0 0 14px color-mix(in srgb, var(--reservierung-button-color) 70%, transparent);
    speak: never;
}

.mrtr-layout-sidebar .mrtr-v2-type-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 5;
    background: rgba(0, 0, 0, .25);
}

.mrtr-layout-sidebar .mrtr-v2-type-icon .dashicons {
    font-size: 38px;
    width: 38px;
    height: 38px;
    opacity: .7;
    /* !important: die Preview lädt eine generische Regel
       .mrtr-reservation-type-option .dashicons { color: button-color !important }
       — ohne !important wäre das Icon dort orange statt Tile-Textfarbe */
    color: inherit !important;
}

.mrtr-layout-sidebar .mrtr-v2-type-tile h4 {
    margin: 0;
    padding: 16px 20px;
    background: rgba(0, 0, 0, .2);
    font-family: "Noto Serif", Georgia, serif;
    font-size: 17px;
    font-weight: 700;
    color: inherit;
}

/* ===== Kacheln: Personen / Uhrzeit / Datum / Events — Outline-Glow-Stil =====
   Normalzustand: dunkler Grund + Rahmen in Tile-Farbe + Glow ("sieht ausgewählt
   aus, ist es aber nicht"). Ausgewählt: nur der Hintergrund füllt sich + Häkchen.
   Die alte formular-style.css setzt background/border/color der Kacheln mit
   !important — daher muss hier ebenfalls mit !important gearbeitet werden. */
/* Datums-Kacheln IMMER 3 pro Reihe ( klassischer Grid läuft mit auto-fill
   ab 200px und bricht sonst nach 2 Kacheln um); in der Mobil-Ansicht wird
   unten wieder auf auto-fill zurückgesetzt. */
.mrtr-layout-sidebar .mrtr-date-selection-options {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.mrtr-layout-sidebar .mrtr-people-option,
.mrtr-layout-sidebar .mrtr-time-option,
.mrtr-layout-sidebar .mrtr-date-option,
.mrtr-layout-sidebar .mrtr-event-type-tile {
    border: 2px solid var(--reservierung-tile-bg) !important;
    border-radius: var(--reservierung-border-radius) !important;
    cursor: pointer !important;
    transition: all .25s cubic-bezier(.2, .7, .3, 1) !important;
    text-align: center !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    background: color-mix(in srgb, var(--reservierung-tile-bg) 10%, transparent) !important;
    background-color: color-mix(in srgb, var(--reservierung-tile-bg) 10%, transparent) !important;
    /* Glas-Kacheln: durchsichtig statt schwarzer Füllung, leicht geblurt */
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    backdrop-filter: blur(6px) saturate(140%);

    color: var(--reservierung-text-color) !important;
    box-shadow: 0 0 14px color-mix(in srgb, var(--reservierung-tile-bg) 28%, transparent),
                inset 0 0 10px color-mix(in srgb, var(--reservierung-tile-bg) 12%, transparent) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    transform: none;
}


.mrtr-layout-sidebar .mrtr-people-option:hover,
.mrtr-layout-sidebar .mrtr-time-option:hover,
.mrtr-layout-sidebar .mrtr-date-option:hover,
.mrtr-layout-sidebar .mrtr-event-type-tile:hover {
    transform: translateY(-2px) !important;
    border-color: var(--reservierung-tile-bg) !important;
    box-shadow: 0 0 22px color-mix(in srgb, var(--reservierung-tile-bg) 45%, transparent),
                inset 0 0 12px color-mix(in srgb, var(--reservierung-tile-bg) 18%, transparent) !important;
}

/* Alter ::before-Streifen oben an den Datum-Kacheln wird nicht gebraucht */
.mrtr-layout-sidebar .mrtr-date-option::before {
    content: none !important;
}

/* Alter ::before-Hover-Streifen (4px-Linie oben) an den Event-Kacheln
   ebenfalls komplett entfernen — auch beim Hover */
.mrtr-layout-sidebar .mrtr-event-type-tile::before {
    content: none !important;
}

/* Ausgewählt: Hintergrund füllt sich mit Tile-Farbe, Rahmen bleibt */
.mrtr-layout-sidebar .mrtr-people-option.selected,
.mrtr-layout-sidebar .mrtr-time-option.selected,
.mrtr-layout-sidebar .mrtr-date-option.selected,
.mrtr-layout-sidebar .mrtr-event-type-tile.selected {
    background: var(--reservierung-tile-bg) !important;
    background-color: var(--reservierung-tile-bg) !important;
    border-color: color-mix(in srgb, var(--reservierung-tile-bg) 55%, #ffffff) !important;
    color: var(--reservierung-tile-text-color) !important;
    font-weight: 600;
    box-shadow: 0 0 20px color-mix(in srgb, var(--reservierung-tile-bg) 55%, transparent) !important;
}

.mrtr-layout-sidebar .mrtr-event-type-tile.selected h4,
.mrtr-layout-sidebar .mrtr-event-type-tile.selected p {
    color: var(--reservierung-tile-text-color) !important;
}

/* Auswahl-Häkchen: Check-Disc links im Tile (wie im Entwurf — weiße Disc mit
   ausgestanztem Häkchen, dashicons yes-alt). Beim Event-Tile zusätzlich die
   klassische 4px-Streifen-Regel (::before absolut oben) zurücksetzen. */
.mrtr-layout-sidebar .mrtr-people-option.selected::before,
.mrtr-layout-sidebar .mrtr-time-option.selected::before,
.mrtr-layout-sidebar .mrtr-event-type-tile.selected::before {
    /* !important: muss das Basis-Reset (content:none !important) schlagen */
    content: "\f12a" !important;
    font-family: dashicons;
    font-size: 15px !important;
    line-height: 1;
    margin-right: 5px;
    color: var(--reservierung-tile-text-color);
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    height: auto;
    background: none;
    transform: none;
    transition: none;
    speak: never;
}

/* Event-Kachel: Check + Name + Dauer in einer Reihe (wie im Entwurf) */
.mrtr-layout-sidebar .mrtr-event-type-tile {
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.mrtr-layout-sidebar .mrtr-event-type-tile h4,
.mrtr-layout-sidebar .mrtr-event-type-tile p {
    margin: 0 !important;
}

/* Datum-Kacheln (Titel + Datum untereinander): Check-Disc zentriert ÜBER dem
   Titel (wie im Entwurf). Der klassische 4px-Streifen im ::before (absolut,
   mit !important) wird hier vollständig zum Disc übernommen/resetted. */
.mrtr-layout-sidebar .mrtr-date-option {
    position: relative !important;
}

.mrtr-layout-sidebar .mrtr-date-option.selected {
    padding-top: 18px !important;
}

.mrtr-layout-sidebar .mrtr-date-option.selected::before {
    content: "\f12a" !important;
    position: absolute !important;
    top: 4px !important;
    left: 50% !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    transform: translateX(-50%) !important;
    transition: none !important;
    font-family: dashicons;
    font-size: 15px;
    line-height: 1;
    color: var(--reservierung-tile-text-color);
    speak: never;
}

.mrtr-layout-sidebar .mrtr-time-option.disabled,
.mrtr-layout-sidebar .mrtr-date-option.disabled-option,
.mrtr-layout-sidebar .mrtr-people-option.disabled {
    opacity: .4 !important;
    cursor: not-allowed !important;
    text-decoration: line-through !important;
    pointer-events: none !important;
    box-shadow: none !important;
    border-color: rgba(255, 255, 255, .25) !important;
    background: rgba(255, 255, 255, .06) !important;
    background-color: rgba(255, 255, 255, .06) !important;
    color: var(--reservierung-text-color) !important;
}

/* Datum-Kacheln mit Titel + Datum untereinander, kompakt (alte CSS: 24px Padding,
   18px-Überschrift — alles !important) */
.mrtr-layout-sidebar .mrtr-date-option {
    flex-direction: column !important;
    min-height: 50px !important;
    min-width: 0 !important;
    padding: 8px 12px !important;
}

.mrtr-layout-sidebar .mrtr-date-option h3 {
    margin: 0 !important;
    font-family: "Noto Serif", Georgia, serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: inherit !important;
}

.mrtr-layout-sidebar .mrtr-date-option.selected h3,
.mrtr-layout-sidebar .mrtr-date-option.selected p {
    color: inherit !important;
}

.mrtr-layout-sidebar .mrtr-date-option p {
    margin: 2px 0 0 !important;
    font-size: 12px !important;
    opacity: .8;
    color: inherit !important;
}

/* Personen- und Zeit-Kacheln: Größe wie klassisches Formular */
.mrtr-layout-sidebar .mrtr-people-option {
    min-width: 50px !important;
    font-size: 14px !important;
}

.mrtr-layout-sidebar .mrtr-time-option {
    min-width: 60px !important;
    font-size: 14px !important;
    padding: 5px 10px !important;
}

/* Uhrzeit-Modul erscheint erst nach der Personenwahl */
.mrtr-layout-sidebar .mrtr-v2-time-group {
    display: none;
}

.mrtr-layout-sidebar.mrtr-v2-times-visible .mrtr-v2-time-group {
    display: block;
    animation: mrtrV2FadeUp .4s ease;
}

/* ===================== Eingabefelder ===================== */
.mrtr-layout-sidebar .mrtr-form-gruppe > label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    /* Kein CAPS: Labels so, wie sie im Backend eingegeben wurden */
    text-transform: none;
    letter-spacing: .02em;
    color: var(--reservierung-text-color);
    opacity: .75;
    margin-bottom: 8px;
}

/* Die alte formular-style.css erzwingt an .mrtr-form-gruppe-Inputs
   1px #ddd-Rahmen + 5px-Radius mit !important (Spezifität 0,3,1) —
   daher hier .mrtr-v2-main dazwischen (0,4,1) und ebenfalls !important. */
.mrtr-layout-sidebar .mrtr-v2-main .mrtr-reservierung-form-step input[type="text"],
.mrtr-layout-sidebar .mrtr-v2-main .mrtr-reservierung-form-step input[type="email"],
.mrtr-layout-sidebar .mrtr-v2-main .mrtr-reservierung-form-step input[type="tel"],
.mrtr-layout-sidebar .mrtr-v2-main .mrtr-reservierung-form-step input[type="number"],
.mrtr-layout-sidebar .mrtr-v2-main .mrtr-reservierung-form-step input[type="url"],
.mrtr-layout-sidebar .mrtr-v2-main .mrtr-reservierung-form-step input[type="date"],
.mrtr-layout-sidebar .mrtr-v2-main .mrtr-reservierung-form-step textarea,
.mrtr-layout-sidebar .mrtr-v2-main .mrtr-reservierung-form-step select,
.mrtr-layout-sidebar .mrtr-country-search {
    width: 100%;
    padding: 14px 18px !important;
    transition: all .3s;
    /* Feld-Hintergrund aus Tile-Farbe, gemischt mit der Container-Farbe —
       dadurch bleibt die Kombination aus Feld- und Textfarbe (--reservierung-text-color)
       in hellen UND dunklen Designs lesbar (das Plugin fixt die Eingabe-Textfarbe
       klassisch auf #000000; hier wird sie stattdessen abgeleitet) */
    background: color-mix(in srgb, var(--reservierung-tile-bg) 16%, var(--reservierung-container-bg)) !important;
    color: var(--reservierung-text-color);
    caret-color: var(--reservierung-button-color);
    border: 2px solid var(--reservierung-tile-bg) !important;
    border-radius: var(--reservierung-border-radius) !important;
    box-shadow: 0 0 12px color-mix(in srgb, var(--reservierung-tile-bg) 22%, transparent),
                inset 0 0 8px color-mix(in srgb, var(--reservierung-tile-bg) 10%, transparent) !important;
    font-size: 14px !important;
}

/* Auf hellem Tile-Hintergrund wäre schwarzer Text auf dunklem Feld unlesbar:
   Feld-Textfarbe an die Helligkeit der Tile-Farbe angelehnt — via color-mix
   lösen wir das ohne neue Einstellung: Mischung aus Tile-Text auf Schwarz. */
/* Fokus: KEIN weißer Hintergrund mehr (wirkt sonst wie Stilbruch) —
   nur orangener Fokus-Ring + Rahmen in Button-Farbe; Hintergrund und
   Textfarbe bleiben im Basis-/Füllzustand. */
.mrtr-layout-sidebar .mrtr-v2-main .mrtr-reservierung-form-step input:focus,
.mrtr-layout-sidebar .mrtr-v2-main .mrtr-reservierung-form-step textarea:focus,
.mrtr-layout-sidebar .mrtr-v2-main .mrtr-reservierung-form-step select:focus,
.mrtr-layout-sidebar .mrtr-v2-main .mrtr-country-search:focus {
    border-color: var(--reservierung-button-color) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--reservierung-button-color) 25%, transparent) !important;
    outline: none;
}

/* Ausgefüllte Felder im Stil der ausgewählten Kacheln: gelblicher Rahmen,
   Tile-Farbe als Inhalt, weiße Schrift (Textfarbe aus den Design-Einstellungen).
   Readonly-Felder (Datums-Input) und leere Felder ausgenommen. */
.mrtr-layout-sidebar .mrtr-v2-main .mrtr-reservierung-form-step input:not(:placeholder-shown):not([readonly]),
.mrtr-layout-sidebar .mrtr-v2-main .mrtr-reservierung-form-step textarea:not(:placeholder-shown) {
    background: var(--reservierung-tile-bg) !important;
    background-color: var(--reservierung-tile-bg) !important;
    color: var(--reservierung-tile-text-color) !important;
    -webkit-text-fill-color: var(--reservierung-tile-text-color) !important;
    caret-color: var(--reservierung-tile-text-color);
    border-color: color-mix(in srgb, var(--reservierung-tile-bg) 55%, #ffffff) !important;
    box-shadow: 0 0 16px color-mix(in srgb, var(--reservierung-tile-bg) 45%, transparent),
                inset 0 0 8px color-mix(in srgb, #000000 8%, transparent) !important;
}

/* Chrome Autofill übermalt den Hintergrund mit einer UA-wichtigen Farbe —
   gegen das direkte Überschreiben hilft nur der Inset-Boxschatten-Trick
   (1000px Übermalung) + Slow-Transition. Zustand = Füllzustand (Kachel-Stil). */
.mrtr-layout-sidebar .mrtr-v2-main .mrtr-reservierung-form-step input:-webkit-autofill,
.mrtr-layout-sidebar .mrtr-v2-main .mrtr-reservierung-form-step input:-webkit-autofill:hover,
.mrtr-layout-sidebar .mrtr-v2-main .mrtr-reservierung-form-step input:-webkit-autofill:focus,
.mrtr-layout-sidebar .mrtr-v2-main .mrtr-reservierung-form-step input:-webkit-autofill:active,
.mrtr-layout-sidebar .mrtr-v2-main .mrtr-reservierung-form-step input:autofill {
    -webkit-text-fill-color: var(--reservierung-tile-text-color) !important;
    color: var(--reservierung-tile-text-color) !important;
    caret-color: var(--reservierung-tile-text-color);
    border-color: color-mix(in srgb, var(--reservierung-tile-bg) 55%, #ffffff) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--reservierung-tile-bg) inset,
                        0 0 16px color-mix(in srgb, var(--reservierung-tile-bg) 45%, transparent) !important;
    box-shadow: 0 0 0 1000px var(--reservierung-tile-bg) inset,
                0 0 16px color-mix(in srgb, var(--reservierung-tile-bg) 45%, transparent) !important;
}

/* Safety-Net: formular-v2.js setzt .mrtr-v2-filled bei Inhalt (input/change,
   auch bei Autofill) — gleicher Kachel-Stil, unabhängig von Pseudo-Klassen. */
.mrtr-layout-sidebar .mrtr-v2-main .mrtr-reservierung-form-step .mrtr-form-gruppe input.mrtr-v2-filled,
.mrtr-layout-sidebar .mrtr-v2-main .mrtr-reservierung-form-step .mrtr-form-gruppe textarea.mrtr-v2-filled {
    background: var(--reservierung-tile-bg) !important;
    background-color: var(--reservierung-tile-bg) !important;
    color: var(--reservierung-tile-text-color) !important;
    -webkit-text-fill-color: var(--reservierung-tile-text-color) !important;
    caret-color: var(--reservierung-tile-text-color);
    border-color: color-mix(in srgb, var(--reservierung-tile-bg) 55%, #ffffff) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--reservierung-tile-bg) inset,
                        0 0 16px color-mix(in srgb, var(--reservierung-tile-bg) 45%, transparent) !important;
    box-shadow: 0 0 0 1000px var(--reservierung-tile-bg) inset,
                0 0 16px color-mix(in srgb, var(--reservierung-tile-bg) 45%, transparent) !important;
}

/* Vorwahl + Pfeil am Länder-Button: klassisches CSS erzwingt #333 —
   im dunklen Layout unlesbar, daher helle Textfarbe aus den Einstellungen. */
.mrtr-layout-sidebar .mrtr-country-code-button,
.mrtr-layout-sidebar .mrtr-selected-code,
.mrtr-layout-sidebar .mrtr-country-code-button .mrtr-dropdown-arrow {
    color: var(--reservierung-text-color) !important;
}

.mrtr-layout-sidebar .mrtr-phone-input-wrapper {
    display: flex;
    gap: 8px;
}

.mrtr-layout-sidebar .mrtr-country-code-button {
    width: auto;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 14px;
    background: color-mix(in srgb, var(--reservierung-tile-bg) 16%, var(--reservierung-container-bg));
    color: var(--reservierung-text-color);
    border: 2px solid var(--reservierung-tile-bg);
    border-radius: var(--reservierung-border-radius);
    box-shadow: 0 0 12px color-mix(in srgb, var(--reservierung-tile-bg) 22%, transparent),
                inset 0 0 8px color-mix(in srgb, var(--reservierung-tile-bg) 10%, transparent);
}

.mrtr-layout-sidebar .mrtr-phone-number-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* ===================== Buttons =====================
   Die alte formular-style.css setzt .mrtr-form-button.next/.back/.submit
   border:none + weiße Textfarbe mit !important — daher hier ebenfalls
   mit !important (gleiche Spezifität, lädt später → gewinnt). */
.mrtr-layout-sidebar .mrtr-form-navigation {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mrtr-layout-sidebar .mrtr-form-button.next,
.mrtr-layout-sidebar .mrtr-form-button.back,
.mrtr-layout-sidebar .mrtr-form-button.submit {
    background: color-mix(in srgb, var(--reservierung-tile-bg) 10%, #000000) !important;
    background-color: color-mix(in srgb, var(--reservierung-tile-bg) 10%, #000000) !important;
    border: 2px solid var(--reservierung-tile-bg) !important;
    color: var(--reservierung-button-color) !important;
    border-radius: var(--reservierung-border-radius) !important;
    padding: 12px 30px;
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .3s cubic-bezier(.2, .7, .3, 1);
    box-shadow: 0 0 16px color-mix(in srgb, var(--reservierung-tile-bg) 30%, transparent),
                inset 0 0 10px color-mix(in srgb, var(--reservierung-tile-bg) 12%, transparent) !important;
    text-shadow: none;
    text-decoration: none;
}

.mrtr-layout-sidebar .mrtr-form-button.next:hover,
.mrtr-layout-sidebar .mrtr-form-button.back:hover,
.mrtr-layout-sidebar .mrtr-form-button.submit:hover {
    transform: translateY(-2px);
    background: var(--reservierung-tile-bg) !important;
    background-color: var(--reservierung-tile-bg) !important;
    color: var(--reservierung-tile-text-color) !important;
    box-shadow: 0 0 26px color-mix(in srgb, var(--reservierung-tile-bg) 55%, transparent) !important;
}

.mrtr-layout-sidebar .mrtr-form-button.next:active,
.mrtr-layout-sidebar .mrtr-form-button.back:active,
.mrtr-layout-sidebar .mrtr-form-button.submit:active {
    transform: translateY(0);
    box-shadow: 0 0 14px color-mix(in srgb, var(--reservierung-tile-bg) 40%, transparent) !important;
}

/* ===================== Schritt 4: Zusammenfassung + Rechtstext ===================== */
.mrtr-layout-sidebar .mrtr-summary-container {
    max-width: 560px;
    /* in der breiteren Inhaltsspalte mittig halten, nicht linksbündig */
    margin-left: auto;
    margin-right: auto;
    padding: 24px 28px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--reservierung-border-radius);
}

.mrtr-layout-sidebar .mrtr-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    /* klassische Kachel-Optik (Tile-Hintergrund, Radius, Border) zurücksetzen */
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 0 !important;
}

.mrtr-layout-sidebar .mrtr-summary-item:last-child {
    border-bottom: 0;
}

/* Custom-Feld-Zeilen hängen im eigenen Wrapper-Div — im v2 als durchgehende
   Zeilen mit Trennlinie, ohne das klassische Kachel-Gap */
.mrtr-layout-sidebar #mrtr-summary-custom-fields {
    display: block;
}

.mrtr-layout-sidebar .mrtr-summary-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--reservierung-text-color);
    opacity: .6;
    font-weight: 600;
}

.mrtr-layout-sidebar .mrtr-summary-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--reservierung-text-color);
}

.mrtr-layout-sidebar .mrtr-v2-legal {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 560px;
    /* mittig in der breiteren Inhaltsspalte */
    margin-left: auto;
    margin-right: auto;
    margin-top: 24px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--reservierung-border-radius);
}

.mrtr-layout-sidebar .mrtr-v2-legal .dashicons {
    flex: 0 0 auto;
    color: var(--reservierung-button-color);
    margin-top: 1px;
}

.mrtr-layout-sidebar .mrtr-v2-legal p {
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--reservierung-text-color);
    opacity: .7;
}

/* ===================== Custom-Field: Mehrfachauswahl-Dropdown =====================
   Der Header ist ein <button> — die v2-Eingabefeld-Regeln greifen dort nicht.
   Ohne dieses Kapitel bleibt er beim klassischen Look (#ddd-Rahmen, schwarze
   Schrift via --reservierung-input-text-color) und ist auf dunklem Hintergrund
   unlesbar. */
.mrtr-layout-sidebar .mrtr-multi-dropdown-header {
    padding: 14px 18px;
    /* !important gegen das weiße klassische Header-Background */
    background: color-mix(in srgb, var(--reservierung-tile-bg) 16%, var(--reservierung-container-bg)) !important;
    border: 2px solid var(--reservierung-tile-bg);
    border-radius: var(--reservierung-border-radius);
    color: var(--reservierung-text-color);
    font-size: 14px;
    box-shadow: 0 0 12px color-mix(in srgb, var(--reservierung-tile-bg) 22%, transparent),
                inset 0 0 8px color-mix(in srgb, var(--reservierung-tile-bg) 10%, transparent);
}

.mrtr-layout-sidebar .mrtr-multi-dropdown-header .mrtr-multi-selection {
    color: var(--reservierung-text-color);
    /* Leerzustand wie ein Platzhalter: dezent */
    opacity: .55;
}

.mrtr-layout-sidebar .mrtr-multi-dropdown-header .mrtr-multi-selection.has-selection {
    color: var(--reservierung-text-color);
    opacity: 1;
}

/* Leerzähler: keinen orangen Mini-Pill-Strich anzeigen */
.mrtr-layout-sidebar .mrtr-multi-dropdown-header .mrtr-multi-count:empty {
    display: none;
}

.mrtr-layout-sidebar .mrtr-multi-dropdown-header .mrtr-multi-arrow {
    color: var(--reservierung-text-color);
}

/* Theme-/Browser-Button-Hover (z. B. Blau) darf den Header nicht umfärben */
.mrtr-layout-sidebar .mrtr-multi-dropdown-header:hover,
.mrtr-layout-sidebar .mrtr-multi-dropdown-header:focus,
.mrtr-layout-sidebar .mrtr-multi-dropdown-header:active {
    background: color-mix(in srgb, var(--reservierung-tile-bg) 16%, var(--reservierung-container-bg)) !important;
    color: var(--reservierung-text-color);
    border-color: var(--reservierung-tile-bg);
    outline: none;
}

/* Aufgeklappte Liste: dunkle Fläche passend zum Formular */
.mrtr-layout-sidebar .mrtr-multi-options-list {
    background: color-mix(in srgb, var(--reservierung-container-bg) 88%, #ffffff);
    border: 2px solid var(--reservierung-tile-bg);
    border-radius: var(--reservierung-border-radius);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}

.mrtr-layout-sidebar .mrtr-multi-options-list .mrtr-multi-option label {
    color: var(--reservierung-text-color);
    background: color-mix(in srgb, var(--reservierung-tile-bg) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--reservierung-tile-bg) 45%, transparent);
    border-radius: var(--reservierung-border-radius);
    box-shadow: 0 0 10px color-mix(in srgb, var(--reservierung-tile-bg) 18%, transparent),
                inset 0 0 8px color-mix(in srgb, var(--reservierung-tile-bg) 8%, transparent);
    transition: all .25s cubic-bezier(.2, .7, .3, 1);
}

.mrtr-layout-sidebar .mrtr-multi-options-list .mrtr-multi-option label:hover {
    background: color-mix(in srgb, var(--reservierung-tile-bg) 22%, #000000);
    border-color: var(--reservierung-tile-bg);
    box-shadow: 0 0 16px color-mix(in srgb, var(--reservierung-tile-bg) 40%, transparent),
                inset 0 0 10px color-mix(in srgb, var(--reservierung-tile-bg) 14%, transparent);
}

/* Angehakt: Kachel füllt sich (wie die anderen Auswahlfelder) */
.mrtr-layout-sidebar .mrtr-multi-options-list .mrtr-multi-option.checked label {
    background: var(--reservierung-tile-bg);
    border-color: color-mix(in srgb, var(--reservierung-tile-bg) 55%, #ffffff);
    color: var(--reservierung-tile-text-color);
    box-shadow: 0 0 18px color-mix(in srgb, var(--reservierung-tile-bg) 50%, transparent);
}

/* Toggle-Optik der Multi-Options-Schalter liegt jetzt global in der
   formular-style.css (gilt für klassisch UND v2) — hier nichts doppelt. */

/* Platzhalter im Premium-Sidebar-Layout komplett ausblenden
   (Labels stehen über den Feldern — Doppel-Nennung im Feld ist unnötig
   und die Platzhalter wären auf dunklem Grund schwarz/unlesbar) */
.mrtr-layout-sidebar input::placeholder,
.mrtr-layout-sidebar textarea::placeholder {
    color: transparent !important;
}

/* ===================== Responsive ===================== */
/* Mobile-Kartenstapel (Schritt 1): die Classic-Regel gibt jeder Karte einen
   opaken Container-Hintergrund — im v2 Glas-Design muss die Karte durchsichtig
   bleiben, sonst "steht" ein schwarzes Feld ab (Tablet/Mobil) */
.mrtr-layout-sidebar .mrtr-step1-card {
    background: transparent !important;
}

@media (max-width: 900px) {
    .mrtr-layout-sidebar .mrtr-v2-card {
        flex-direction: column;
        min-height: 0;
    }

    .mrtr-layout-sidebar .mrtr-v2-sidebar {
        flex: 0 0 auto;
        /* Tablet/Mobil: Titel links, Schritt-Icons rechts — alles in einer Zeile */
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        padding: 16px 20px 14px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .mrtr-layout-sidebar .mrtr-v2-sidebar-header {
        margin-bottom: 0;
        padding: 0;
    }

    .mrtr-layout-sidebar .mrtr-v2-sidebar-header h2 {
        margin: 0;
        font-size: 20px;
        line-height: 1.2;
    }

    .mrtr-layout-sidebar .mrtr-v2-step-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
        /* eigene Zeile unter dem Titel, linksbündig */
        flex: 0 0 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    .mrtr-layout-sidebar .mrtr-v2-step-nav .mrtr-reservierung-step {
        padding: 7px 10px !important;
        border-radius: var(--reservierung-border-radius) !important;
        margin: 0 !important;
        font-size: 12px !important;
        gap: 6px;
    }

    /* Kompakt-Header: nur der aktive Schritt zeigt sein Label,
       alle anderen Schritte nur als Icon (linksbündig in eigener Zeile) */
    .mrtr-layout-sidebar .mrtr-v2-step-nav .mrtr-reservierung-step .mrtr-reservierung-step-label {
        display: none;
        font-size: 12px !important;
        white-space: nowrap;
    }

    .mrtr-layout-sidebar .mrtr-v2-step-nav .mrtr-reservierung-step.active .mrtr-reservierung-step-label {
        display: inline;
    }

    /* Aktiver Schritt wie am Desktop: links kräftiges Orange, nach rechts
       auslaufender Verlauf + Balken links (kein flacher Button-Look) */
    .mrtr-layout-sidebar .mrtr-v2-step-nav .mrtr-reservierung-step.active {
        margin-left: 0 !important;
        padding-left: 12px !important;
        padding-right: 14px !important;
        border-radius: 999px !important;
        background: linear-gradient(90deg, color-mix(in srgb, var(--reservierung-button-color) 22%, transparent), transparent 90%) !important;
        box-shadow: inset 3px 0 0 var(--reservierung-button-color) !important;
    }
    .mrtr-layout-sidebar .mrtr-v2-selection {
        display: none;
    }

    .mrtr-layout-sidebar .mrtr-v2-main {
        padding: 24px 20px 40px;
        max-height: none;
        overflow: visible;
    }

    /* Tablet: Typ-Kacheln weiterhin 2 nebeneinander, nur kompakter */
    .mrtr-layout-sidebar .mrtr-v2-type-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .mrtr-layout-sidebar .mrtr-reservation-type-option.mrtr-v2-type-tile .mrtr-v2-type-icon {
        aspect-ratio: auto;
        height: 64px;
    }

    .mrtr-layout-sidebar .mrtr-reservation-type-option.mrtr-v2-type-tile .mrtr-v2-type-icon .dashicons {
        font-size: 28px;
        width: 28px;
        height: 28px;
    }

    .mrtr-layout-sidebar .mrtr-reservation-type-option.mrtr-v2-type-tile h4 {
        padding: 10px 12px;
        font-size: 14px;
    }

    .mrtr-layout-sidebar .mrtr-reservation-type-option.mrtr-v2-type-tile.selected::after {
        top: 8px;
        right: 8px;
        width: 24px;
        height: 24px;
        font-size: 14px;
        line-height: 24px;
    }

    /* Tablet: Datums-Kacheln exakt wie Desktop — 3 pro Reihe, mittig zentriert */
    .mrtr-layout-sidebar .mrtr-date-selection-options {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .mrtr-layout-sidebar .mrtr-date-option {
        align-items: center !important;
        justify-content: center !important;
    }

    /* Tablet/Mobil: Typ-Kacheln mittig — Icon + Text horizontal und
       vertikal zentriert, Kacheln in Höhe mittig zur Umgebung */
    .mrtr-layout-sidebar .mrtr-v2-type-grid {
        justify-content: center;
        align-items: center;
    }

    .mrtr-layout-sidebar .mrtr-reservation-type-option.mrtr-v2-type-tile {
        justify-content: center;
        text-align: center;
    }

    .mrtr-layout-sidebar .mrtr-reservation-type-option.mrtr-v2-type-tile h4 {
        text-align: center;
    }

    /* Tablet/Mobil: Nav-Buttons über die volle Breite — komplett anklickbar */
    .mrtr-layout-sidebar .mrtr-form-navigation {
        flex-wrap: nowrap;
        gap: 10px;
    }

    .mrtr-layout-sidebar .mrtr-form-button.next,
    .mrtr-layout-sidebar .mrtr-form-button.back,
    .mrtr-layout-sidebar .mrtr-form-button.submit {
        flex: 1 1 auto;
        min-height: 48px;
        justify-content: center;
        align-items: center;
    }

    /* Letzter Schritt: Absenden oben, Zurück unten, je volle Breite —
       der lange Submit-Text hat Platz und bricht nicht um */
    .mrtr-layout-sidebar .mrtr-form-navigation.mrtr-nav-submit-visible {
        flex-direction: column !important;
    }

    .mrtr-layout-sidebar .mrtr-form-navigation.mrtr-nav-submit-visible .mrtr-form-button.submit {
        order: -1;
    }

    .mrtr-layout-sidebar .mrtr-form-navigation.mrtr-nav-submit-visible .mrtr-form-button.back,
    .mrtr-layout-sidebar .mrtr-form-navigation.mrtr-nav-submit-visible .mrtr-form-button.submit {
        flex: 1 1 auto;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .mrtr-layout-sidebar .mrtr-v2-main {
        padding: 18px 14px 32px;
    }

    /* Karte mit Mindesthöhe: weniger Auf/Ab des Kartenrahmens (und des
       dahinterliegenden Hintergrunds) bei Schrittwechseln */
    .mrtr-layout-sidebar .mrtr-v2-card {
        min-height: 72vh;
    }

    /* Smartphone: Typ-Kacheln untereinander gestapelt */
    .mrtr-layout-sidebar .mrtr-v2-type-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .mrtr-layout-sidebar .mrtr-reservation-type-option.mrtr-v2-type-tile .mrtr-v2-type-icon {
        height: 52px;
    }

    .mrtr-layout-sidebar .mrtr-reservation-type-option.mrtr-v2-type-tile .mrtr-v2-type-icon .dashicons {
        font-size: 24px;
        width: 24px;
        height: 24px;
    }

    .mrtr-layout-sidebar .mrtr-reservation-type-option.mrtr-v2-type-tile h4 {
        padding: 8px 8px;
        font-size: 12px;
        line-height: 1.3;
    }

    /* Smartphone: Datums-Kacheln dürfen wieder umbrechen (2 pro Reihe) */
    .mrtr-layout-sidebar .mrtr-date-selection-options {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 10px !important;
    }

    .mrtr-layout-sidebar .mrtr-form-navigation {
        flex-wrap: nowrap;
        flex-direction: row !important; /* klassische CSS erzwingt mobil column */
        gap: 10px;
    }

    /* Smartphone: eine Zeile — Zurück links, Weiter rechts, schmal genug */
    .mrtr-layout-sidebar .mrtr-form-button.next,
    .mrtr-layout-sidebar .mrtr-form-button.back,
    .mrtr-layout-sidebar .mrtr-form-button.submit {
        width: auto !important; /* klassische CSS setzt mobil width:100% */
        flex: 1 1 0 !important;
        min-width: 0;
        min-height: 48px;
        padding: 12px 10px;
        font-size: 14px;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
    }
}

/* =========================================================
   Scrollbars im v2-Design: duenn, in den Design-Farben
   (Thumb = Button-/Aktivfarbe, Track = Kachel-Hintergrund)
   ========================================================= */
.mrtr-layout-sidebar,
.mrtr-layout-sidebar .mrtr-v2-main,
.mrtr-layout-sidebar .mrtr-multi-options-list,
.mrtr-layout-sidebar .mrtr-country-dropdown {
    scrollbar-width: thin;
    scrollbar-color: var(--reservierung-active-color) transparent;
}

.mrtr-layout-sidebar::-webkit-scrollbar,
.mrtr-layout-sidebar .mrtr-v2-main::-webkit-scrollbar,
.mrtr-layout-sidebar .mrtr-multi-options-list::-webkit-scrollbar,
.mrtr-layout-sidebar .mrtr-country-dropdown::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.mrtr-layout-sidebar::-webkit-scrollbar-track,
.mrtr-layout-sidebar .mrtr-v2-main::-webkit-scrollbar-track,
.mrtr-layout-sidebar .mrtr-multi-options-list::-webkit-scrollbar-track,
.mrtr-layout-sidebar .mrtr-country-dropdown::-webkit-scrollbar-track {
    background: var(--reservierung-tile-bg);
    border-radius: 999px;
}

.mrtr-layout-sidebar::-webkit-scrollbar-thumb,
.mrtr-layout-sidebar .mrtr-v2-main::-webkit-scrollbar-thumb,
.mrtr-layout-sidebar .mrtr-multi-options-list::-webkit-scrollbar-thumb,
.mrtr-layout-sidebar .mrtr-country-dropdown::-webkit-scrollbar-thumb {
    background: var(--reservierung-active-color);
    border-radius: 999px;
}

.mrtr-layout-sidebar::-webkit-scrollbar-thumb:hover,
.mrtr-layout-sidebar .mrtr-v2-main::-webkit-scrollbar-thumb:hover,
.mrtr-layout-sidebar .mrtr-multi-options-list::-webkit-scrollbar-thumb:hover,
.mrtr-layout-sidebar .mrtr-country-dropdown::-webkit-scrollbar-thumb:hover {
    filter: brightness(1.15);
}

/* =========================================================
   Custom-Fields: Zahl & URL/Website in den v2-Feldstil aufgenommen
   (Basis-/Fokus-/Fill-Zustand oben), Spinners aus, Toggle-Ausrichtung
   ========================================================= */
.mrtr-layout-sidebar .mrtr-v2-main .mrtr-reservierung-form-step input[type="number"]::-webkit-outer-spin-button,
.mrtr-layout-sidebar .mrtr-v2-main .mrtr-reservierung-form-step input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.mrtr-layout-sidebar .mrtr-v2-main .mrtr-reservierung-form-step input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.mrtr-layout-sidebar .mrtr-checkbox-toggle {
    justify-content: flex-start;
    text-align: left;
}
.mrtr-layout-sidebar .mrtr-checkbox-text {
    color: var(--reservierung-text-color);
}

/* Keine Pfeil-Buttons an den Scrollbalken innerhalb des Formulars */
.mrtr-layout-sidebar::-webkit-scrollbar-button,
.mrtr-layout-sidebar .mrtr-v2-main::-webkit-scrollbar-button,
.mrtr-layout-sidebar .mrtr-multi-options-list::-webkit-scrollbar-button,
.mrtr-layout-sidebar .mrtr-country-dropdown::-webkit-scrollbar-button {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    background: none !important;
}

/* Pfeil-Buttons an ALLEN Scrollbalken innerhalb des Formular-Containers
   entfernen (auch dynamische/innere Container), ohne die Seite zu beruehren */
.mrtr-layout-sidebar *::-webkit-scrollbar-button,
.mrtr-layout-sidebar *::-webkit-scrollbar-button:vertical:decrement,
.mrtr-layout-sidebar *::-webkit-scrollbar-button:vertical:increment,
.mrtr-layout-sidebar *::-webkit-scrollbar-button:horizontal:decrement,
.mrtr-layout-sidebar *::-webkit-scrollbar-button:horizontal:increment {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    background: none !important;
}

/* Einheitlicher duenner Design-Scrollbalken fuer alle inneren
   Scroll-Container des Formulars */
.mrtr-layout-sidebar * {
    scrollbar-width: thin;
    scrollbar-color: var(--reservierung-active-color) transparent;
}
.mrtr-layout-sidebar *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.mrtr-layout-sidebar *::-webkit-scrollbar-track {
    background: var(--reservierung-tile-bg);
    border-radius: 999px;
}
.mrtr-layout-sidebar *::-webkit-scrollbar-thumb {
    background: var(--reservierung-active-color);
    border-radius: 999px;
}