/*
Theme Name: Vegas Bowling
Theme URI: https://www.vegas-bowling.de
Author: Vegas Bowling / AD Verwaltung
Description: Custom One-Page-Theme fuer Vegas Bowling Osnabrueck (Bowling, Billard, Gastronomie, Reservierung).
Version: 2.0.17
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vegas-bowling
*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

:root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #121212;
    --bg-card: rgba(20, 20, 20, 0.65);
    --bg-card-hover: rgba(30, 30, 30, 0.85);
    --bg-card-alt: rgba(15, 15, 15, 0.75);
    --accent-gold: #d4af37;
    --accent-gold-light: #f3e5ab;
    --accent-red: #8b0000;
    --accent-red-light: #b22222;
    --text-primary: #fcfcfc;
    --text-secondary: #a0a0a0;
    --text-muted: #707070;
    --border-color: rgba(212, 175, 55, 0.3);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --glow-gold: rgba(212, 175, 55, 0.25);
    --glow-blue: rgba(100, 100, 255, 0.05);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    --transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Reservation result notice */
.vb-form-notice {
    margin-bottom: 2rem;
    border-radius: 1.5rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid rgba(124, 87, 45, 0.18);
    box-shadow: 0 18px 45px rgba(34, 26, 15, 0.08);
    color: #221a0f;
}

.vb-form-notice-success {
    background: linear-gradient(135deg, #fff8f1 0%, #fff1e2 100%);
    border-color: rgba(47, 111, 69, 0.22);
    border-left: 6px solid #2f6f45;
}

.vb-form-notice-error {
    background: linear-gradient(135deg, #fff8f1 0%, #ffe9e6 100%);
    border-color: rgba(186, 20, 52, 0.22);
    border-left: 6px solid #ba1434;
}

.vb-reservation-result {
    display: grid;
    gap: 0.45rem;
    text-align: center;
    line-height: 1.45;
    color: #3b2a1a;
}

.vb-reservation-result strong {
    font-size: 1.05rem;
    color: #120e09;
}

.vb-reservation-result-email {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0.15rem auto;
    padding: 0.45rem 0.75rem;
    border-radius: 0.85rem;
    background: rgba(186, 20, 52, 0.08);
    color: #ba1434;
    font-size: clamp(1.05rem, 3vw, 1.45rem);
    font-weight: 800;
    word-break: break-word;
}

.vb-form-notice-error .vb-reservation-result-email {
    color: #7e001a;
    background: rgba(186, 20, 52, 0.1);
}

.vb-reservation-result-warning {
    color: #ba1434;
}

html {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
}
body {
    overflow-x: clip;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-gold); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--accent-gold-light); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

.nav-link.active {
    color: #ba1434 !important;
}

.nav-info-toggle {
    background: transparent;
    border: 0;
    cursor: pointer;
}

.nav-info-group::after {
    content: "";
    position: absolute;
    left: -12px;
    right: -12px;
    top: 100%;
    height: 14px;
    display: block;
}

.nav-info-menu {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 230px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(255, 248, 243, 0.98);
    border: 1px solid rgba(140, 113, 110, 0.22);
    box-shadow: 0 20px 45px rgba(34, 26, 15, 0.14);
    backdrop-filter: blur(18px);
    z-index: 80;
}

.nav-info-group:hover .nav-info-menu,
.nav-info-group:focus-within .nav-info-menu,
.nav-info-group.open .nav-info-menu {
    display: grid;
    gap: 4px;
}

.nav-info-menu a {
    color: #58413f;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.9rem;
}

.nav-info-menu a:hover,
.nav-info-menu a.active {
    color: #ba1434;
    background: rgba(186, 20, 52, 0.08);
}

.hub-status-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 132px;
    padding: 22px;
    border-radius: 20px;
    border: 1px solid rgba(140, 113, 110, 0.22);
    background: var(--surface-container-lowest, #fff);
    color: #221a0f;
    text-align: left;
    box-shadow: 0 10px 30px rgba(34, 26, 15, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

button.hub-status-card {
    width: 100%;
    cursor: pointer;
}

.hub-status-card:hover {
    transform: translateY(-3px);
    border-color: rgba(186, 20, 52, 0.24);
    box-shadow: 0 16px 36px rgba(34, 26, 15, 0.09);
    color: #221a0f;
}

.hub-status-card .material-symbols-outlined {
    color: #ba1434;
    font-size: 2rem;
}

.hub-status-card strong {
    font-family: var(--font-heading);
    font-size: 1.05rem;
}

.hub-status-card small {
    color: #58413f;
    line-height: 1.45;
}

.hub-status-card-primary {
    background: linear-gradient(135deg, #680016 0%, #930024 100%);
    color: #fff;
    border-color: transparent;
}

.hub-status-card-primary:hover {
    color: #fff;
}

.hub-status-card-primary .material-symbols-outlined,
.hub-status-card-primary small {
    color: rgba(255, 255, 255, 0.82);
}

.hub-tabbar {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
    border-radius: 22px;
    background: #efe0cd;
    border: 1px solid rgba(140, 113, 110, 0.18);
    position: sticky;
    top: 82px;
    z-index: 35;
}

.hub-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    border: 0;
    border-radius: 15px;
    background: transparent;
    color: #58413f;
    font-family: var(--font-heading);
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.hub-tab .material-symbols-outlined {
    font-size: 1.2rem;
}

.hub-tab:hover,
.hub-tab.is-active {
    background: #fff8f3;
    color: #ba1434;
    box-shadow: 0 8px 18px rgba(34, 26, 15, 0.08);
}

.hub-panel {
    padding-top: 28px;
}

.hub-panel[hidden] {
    display: none !important;
}

.hub-panel > section {
    padding-top: 48px !important;
    padding-bottom: 56px !important;
    border-top: 0 !important;
    border-radius: 28px;
    overflow: hidden;
}

.mobile-reserve-cta {
    display: none;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ========== BUTTONS ========== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem;
    padding: 12px 28px; border-radius: var(--radius-sm); border: none; cursor: pointer;
    transition: var(--transition); white-space: nowrap;
}
.btn-primary {
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-light));
    color: #0a0a1a; box-shadow: 0 4px 20px var(--glow-gold);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 30px var(--glow-gold); color: #0a0a1a; }
.btn-outline {
    background: transparent; color: var(--accent-gold);
    border: 1.5px solid var(--accent-gold); 
}
.btn-outline:hover { background: rgba(212,168,67,0.1); color: var(--accent-gold-light); }
.btn-lg { padding: 16px 36px; font-size: 1.05rem; border-radius: var(--radius-md); }
.btn-sm { padding: 8px 20px; font-size: 0.85rem; }



/* ========== OPENING HOURS ========== */
.hours-wrapper { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.hours-table {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.hours-row {
    display: grid; grid-template-columns: 140px 1fr auto; align-items: center;
    padding: 16px 24px; border-bottom: 1px solid var(--border-subtle);
    transition: var(--transition);
}
.hours-row:last-child { border-bottom: none; }
.hours-row:hover { background: rgba(255,255,255,0.02); }
.hours-row-highlight { background: rgba(212,168,67,0.05); }
.hours-day { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; }
.hours-time { font-size: 0.9rem; color: var(--text-secondary); }
.hours-note { font-size: 0.78rem; color: var(--text-muted); text-align: right; }
.hours-note.kitchen { color: #2ecc71; }
.hours-note.party { color: var(--accent-gold); }

.hours-info-card {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px;
}
.hours-info-card h4 { font-family: var(--font-heading); font-size: 1.1rem; margin-bottom: 16px; }
.hours-info-card li {
    font-size: 0.9rem; color: var(--text-secondary); padding: 6px 0 6px 16px;
    position: relative;
}
.hours-info-card li::before { content: '→'; position: absolute; left: 0; color: var(--accent-gold); }

.accordion-toggle { width: 100%; margin-bottom: 16px; white-space: normal; word-break: break-word; }
.accordion-content {
    max-height: 0; overflow: hidden; transition: max-height 0.5s ease;
    background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle);
}
.accordion-content.open { max-height: 1200px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.feiertag-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.feiertag-list li {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.6;
}
.feiertag-list li:last-child { border-bottom: none; }
.feiertag-list li:hover { background: rgba(255,255,255,0.02); }
.feiertag-list li strong {
    color: var(--text-primary);
    font-family: var(--font-heading);
}
.feiertag-list .feiertag-date {
    color: var(--accent-gold);
    font-size: 0.8rem;
}
.feiertag-list .feiertag-closed {
    opacity: 0.6;
}
.feiertag-list .feiertag-closed strong {
    color: var(--text-muted);
}



/* ========== TERMINKALENDER ========== */
.tk-demo-banner {
    background: linear-gradient(135deg, rgba(243,156,18,0.12), rgba(230,126,34,0.06));
    border: 1px solid rgba(243,156,18,0.3);
    border-radius: var(--radius-md);
    padding: 16px 24px;
    margin-bottom: 24px;
    text-align: center;
}
.tk-demo-badge {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #0a0a1a;
    background: linear-gradient(135deg, #f39c12, #e67e22);
    padding: 4px 14px;
    border-radius: 50px;
    margin-bottom: 8px;
}
.tk-demo-banner p {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Table wrapper */
.tk-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 8px;
}

/* Table */
.tk-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.tk-table thead th {
    background: rgba(212,168,67,0.1);
    color: var(--accent-gold);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 14px 18px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 2px solid rgba(212,168,67,0.2);
}
.tk-table tbody tr {
    transition: var(--transition);
    cursor: pointer;
}
/* Zebra-Streifen */
.tk-table tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.02);
}
/* Hover */
.tk-table tbody tr:hover {
    background: rgba(212,168,67,0.06);
}
.tk-table tbody td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.88rem;
    color: var(--text-secondary);
    vertical-align: top;
}
.tk-table tbody tr:last-child td {
    border-bottom: none;
}

/* Column styles via nth-child */
.tk-table td:nth-child(1) {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-primary);
    white-space: nowrap;
    min-width: 100px;
}
.tk-table td:nth-child(2) {
    white-space: nowrap;
    min-width: 60px;
    font-size: 0.84rem;
}
.tk-table td:nth-child(3) {
    white-space: normal;
    min-width: 180px;
    color: var(--text-primary);
    font-weight: 500;
}
/* Feiertag-Emoji in der Tag-Zelle */
.tk-table td[data-feiertag="1"]::after {
    content: " ⭐";
    font-size: 0.95rem;
}

/* Rolf's roter Text → Vegas-Rot für Marken-Konsistenz */
.tk-table td span[style*="color: red"],
.tk-table td span[style*="color:red"] {
    color: #C41E3A !important;
    font-weight: 600;
}

/* Öffnungszeiten-Zelle: Zeilenumbrüche und Lesbarkeit */
.tk-table td:last-child {
    line-height: 1.75;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    vertical-align: top;
}

/* CTA unter Terminkalender */
.tk-cta { text-align: center; }
.tk-cta p {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
}

/* ========== JOBS ========== */
.contact-top { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.contact-card {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-lg); padding: 32px; margin-bottom: 24px; box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.contact-item { display: flex; gap: 16px; margin-bottom: 20px; }
.contact-item:last-child { margin-bottom: 0; }
.contact-icon { font-size: 1.5rem; flex-shrink: 0; }
.contact-item strong { font-family: var(--font-heading); font-weight: 600; }
.contact-item p { font-size: 0.9rem; color: var(--text-secondary); margin-top: 4px; }
.contact-hint { color: var(--accent-gold) !important; font-size: 0.82rem !important; font-style: italic; }
.contact-item a { color: var(--accent-gold); font-size: 1.1rem; font-weight: 600; }
.map-container { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); }

/* Google Maps DSGVO 2-Klick-Lösung */
.maps-consent-placeholder {
    display: flex; align-items: center; justify-content: center;
    min-height: 250px; height: 100%;
    background: linear-gradient(135deg, rgba(20,20,20,0.8), rgba(30,30,30,0.6));
    border-radius: var(--radius-lg);
}
.maps-consent-inner {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    text-align: center; padding: 32px 24px;
}
.maps-consent-icon { font-size: 2.5rem; }
.maps-consent-inner p {
    font-size: 0.85rem; color: var(--text-secondary); max-width: 320px; line-height: 1.5;
}
.maps-consent-inner .btn { margin-top: 4px; }

.contact-form-wrapper h3 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }
.form-note { font-size: 0.82rem; color: var(--accent-red-light); margin-bottom: 24px; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; }
.form-group-full { grid-column: 1 / -1; }
.contact-form label {
    font-family: var(--font-heading); font-size: 0.85rem; font-weight: 500;
    color: var(--text-secondary); margin-bottom: 6px;
}
.contact-form input, .contact-form textarea, .contact-form select {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm); padding: 12px 16px;
    color: var(--text-primary); font-family: var(--font-body); font-size: 0.95rem;
    transition: var(--transition); outline: none;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: var(--accent-gold); box-shadow: 0 0 0 3px var(--glow-gold); }
.contact-form textarea { resize: vertical; min-height: 120px; }
.form-submit { grid-column: 1 / -1; margin-top: 8px; }

/* ========== BOOKING FORM ENHANCEMENTS ========== */
.booking-form-wrapper { grid-column: 1 / -1; max-width: 900px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.booking-form { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 24px; width: 100%; }
.form-section { background: rgba(255,255,255,0.02); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 32px; position: relative; width: 100%; max-width: 100%; }
.form-section-title { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; color: var(--accent-gold); margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid rgba(212,168,67,0.2); }
.form-row { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.form-row > .form-group { flex: 1; min-width: 0; margin-bottom: 0; } /* min-width auf 0 standardmäßig für Flex-Safe-Width */
.form-row:last-child { margin-bottom: 0; }
.form-row-3 > .form-group { flex: 1; min-width: 0; }

/* Date-Picker: Inline (kein Dropdown) */
.date-picker-row {
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    transition: var(--transition);
    overflow: visible;
}
.date-picker-row.picker-open {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px var(--glow-gold);
}
/* Segment-Buttons in einer Zeile */
.date-segs-row {
    display: flex;
}
/* Hide native selects (volle Fläche für saubere HTML5-Validierungsblase) */
.date-picker-row select {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* Clickable segments */
.date-segment {
    flex: 1;
    min-width: 0;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    user-select: none;
}
.date-segment + .date-segment {
    border-left: 1px solid var(--border-subtle);
}
.date-segment:nth-of-type(2) {
    flex: 1.5;
}
.date-seg-value {
    color: var(--text-muted);
    font-size: 0.95rem;
}
.date-segment.has-value .date-seg-value {
    color: var(--text-primary);
}
.date-segment:hover {
    background: rgba(212, 175, 55, 0.06);
}
.date-segment.active {
    background: rgba(212, 175, 55, 0.12);
}
/* Grid-Panel: inline (kein Overlay), erscheint beim Klick auf ein Segment */
.date-dropdown-panel {
    display: none;
    position: relative;
    top: auto; left: auto; right: auto;
    z-index: auto;
    background: #080808;
    border: none;
    border-top: 1px solid var(--border-subtle);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    padding: 12px;
    box-shadow: none;
}
.date-dropdown-panel.open { display: block; }
/* Grid */
.date-grid {
    display: grid;
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
}
.date-grid::-webkit-scrollbar { width: 4px; }
.date-grid::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 4px; }
.date-grid-item {
    padding: 9px 4px;
    text-align: center;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: background .15s, color .15s;
}
.date-grid-item:hover {
    background: rgba(212, 175, 55, 0.15);
    color: var(--accent-gold);
}
.date-grid-item.selected {
    background: var(--accent-gold);
    color: #000;
    font-weight: 600;
}
.date-grid-item.disabled {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}

/* Select Styling */
.contact-form select { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1em; padding-right: 2.5rem; cursor: pointer; }
.contact-form select option { background: #1a1a1a; color: var(--text-primary); }

/* Number Input Spinners – alle Pfeile ausgeblendet */
.contact-form input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.contact-form input[type="number"]::-webkit-outer-spin-button,
.contact-form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Form Availability Indicator */
.form-avail-indicator {
    margin-top: 16px;
    animation: fadeIn 0.4s ease-out;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    overflow: hidden !important;
    word-break: break-word;
    overflow-wrap: break-word;
}
.form-avail-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(186, 20, 52, 0.25);
    background: rgba(186, 20, 52, 0.06);
    color: #221a0f;
    font-size: 0.95rem;
    line-height: 1.6;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    word-break: break-word;
    overflow-wrap: break-word;
}
.form-avail-indicator.avail-status-info .form-avail-inner {
    background: rgba(186, 20, 52, 0.06);
    border-color: rgba(186, 20, 52, 0.25);
    color: #221a0f;
}
.form-avail-indicator.avail-status-free .form-avail-inner {
    background: rgba(46,204,113,0.08);
    border-color: rgba(46,204,113,0.35);
    color: #114223;
}
.form-avail-indicator.avail-status-few .form-avail-inner {
    background: rgba(212,175,55,0.12);
    border-color: rgba(212,175,55,0.4);
    color: #4a3800;
}
.form-avail-indicator.avail-status-full .form-avail-inner {
    background: rgba(231,76,60,0.08);
    border-color: rgba(231,76,60,0.35);
    color: #5c140c;
}
.form-avail-indicator.avail-status-arr .form-avail-inner {
    background: rgba(186,20,52,0.09);
    border-color: rgba(186,20,52,0.34);
    border-left: 5px solid #ba1434;
    box-shadow: 0 10px 24px rgba(186,20,52,0.08);
    color: #221a0f;
}
.form-avail-indicator.avail-status-arr .form-avail-icon {
    font-size: 1.45rem;
}
.form-avail-indicator.avail-status-arr .avail-pill {
    background: #ba1434 !important;
    color: #ffffff !important;
}
.form-avail-indicator.avail-status-arr .avail-message {
    color: #680016;
    font-weight: 850;
}
.form-avail-icon { font-size: 1.35rem; line-height: 1; flex-shrink: 0; margin-top: 2px; color: #ba1434; }
.form-avail-text { color: #221a0f; flex: 1; min-width: 0; overflow: hidden; word-break: break-word; overflow-wrap: break-word; }
.form-avail-text .avail-message { font-weight: 700; margin-bottom: 4px; word-break: break-word; overflow-wrap: break-word; }
.form-avail-text .avail-meta { font-size: 0.82rem; color: #58413f; margin-top: 4px; }
.form-avail-text strong { color: #9c0c22; }
.form-avail-text .avail-pill {
    display: inline-block !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}
.avail-use-next {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(186,20,52,0.35);
    background: rgba(186,20,52,0.08);
    color: #ba1434;
    border-radius: 10px;
    padding: 8px 12px;
    font-weight: 800;
    font-size: 0.82rem;
    cursor: pointer;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
}
.avail-use-next:hover { background: rgba(186,20,52,0.14); }
.avail-raw { margin-top: 10px; font-size: 0.82rem; color: var(--text-secondary); }
.avail-raw summary { cursor: pointer; font-weight: 700; }
.avail-raw div { margin-top: 6px; line-height: 1.5; }
/* Inline-Styles aus getdayinfo.php überschreiben */
.form-avail-text span { font-size: 0.92rem !important; color: inherit !important; font-weight: 600 !important; display: block; word-break: break-word !important; overflow-wrap: break-word !important; }
.form-avail-text span[style*="red"] { color: #e74c3c !important; }
.form-avail-text div[style] { border: none !important; text-indent: 0 !important; }

/* Lane Recommendation */
.lane-recommendation { background: rgba(46, 204, 113, 0.1); border: 1px solid rgba(46, 204, 113, 0.3); border-radius: var(--radius-sm); padding: 16px 20px; margin-top: 24px; display: flex; align-items: flex-start; gap: 12px; transition: var(--transition); }
.lane-recommendation.special-capacity { background: rgba(202, 138, 4, 0.1); border-color: rgba(202, 138, 4, 0.35); }
.lane-recommendation.special-capacity .lane-rec-text strong { color: #9a6700; }
.lane-recommendation.mismatch { background: rgba(231, 76, 60, 0.1); border-color: rgba(231, 76, 60, 0.3); }
.lane-recommendation.mismatch .lane-rec-icon { color: var(--accent-red-light); }
.lane-rec-icon { flex: 0 0 1.5em; width: 1.5em; height: 1.5em; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; line-height: 1; }
.lane-rec-icon img.emoji { width: 1.25em !important; height: 1.25em !important; max-width: none !important; flex: 0 0 auto; }
.lane-rec-text { font-size: 0.9rem; color: var(--text-primary); line-height: 1.5; }
.lane-rec-text strong { color: #2ecc71; margin-right: 6px; }
.lane-rec-note { display: block; margin-top: 6px; font-size: 0.78rem; line-height: 1.35; color: rgba(34, 26, 15, 0.72); }
.lane-recommendation.mismatch .lane-rec-text strong { color: var(--accent-red-light); }

/* Toggle Buttons */
.toggle-group-container { display: flex; flex-direction: column; }
.form-toggle-group { display: flex; gap: 10px; margin-top: 8px; }
.form-toggle-group input[type="radio"] { display: none; }
.toggle-btn { flex: 1; text-align: center; background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle); padding: 12px; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-heading); font-size: 0.9rem; transition: var(--transition); color: var(--text-secondary); margin-bottom: 0 !important; }
.form-toggle-group input[type="radio"]:checked + .toggle-btn { background: rgba(212,168,67,0.12); border-color: var(--accent-gold); color: var(--accent-gold); font-weight: 600; box-shadow: inset 0 0 10px rgba(212,168,67,0.1); }
.toggle-btn:hover { background: rgba(255,255,255,0.06); }

/* Radio Tiles (Group Type) */
.form-radio-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-top: 8px; }
.form-radio-tiles input[type="radio"] { display: none; }
.radio-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 20px; cursor: pointer; transition: var(--transition); }
.radio-icon { font-size: 2rem; transform: scale(1); transition: var(--transition); }
.radio-label { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 500; color: var(--text-secondary); text-align: center; }
.form-radio-tiles input[type="radio"]:checked + .radio-tile { background: rgba(212,168,67,0.08); border-color: var(--accent-gold); box-shadow: 0 4px 15px rgba(212,168,67,0.15); transform: translateY(-4px); }
.form-radio-tiles input[type="radio"]:checked + .radio-tile .radio-icon { transform: scale(1.1); }
.form-radio-tiles input[type="radio"]:checked + .radio-tile .radio-label { color: var(--accent-gold); }
.form-radio-tiles .radio-tile:hover { background: rgba(255,255,255,0.05); }

.form-disclaimer { font-size: 0.8rem; color: var(--text-muted); text-align: center; margin-top: 16px; line-height: 1.5; }
.form-section-hint { font-size: 0.88rem; color: var(--text-secondary); margin-bottom: 20px; margin-top: -10px; }
.label-hint { font-size: 0.78rem; color: var(--text-muted); font-weight: 400; }
.booking-deadline-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin: 1rem auto 0;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    background: rgba(186, 20, 52, 0.1);
    border: 1px solid rgba(186, 20, 52, 0.24);
    color: #680016;
    font-size: 0.86rem;
    font-weight: 850;
    line-height: 1.3;
    text-align: center;
}
.booking-deadline-note--modal {
    margin: 0.2rem 0 0;
    width: 100%;
    border-radius: 0.85rem;
}
.booking-deadline-list-note {
    align-items: flex-start;
    padding: 0.75rem 0.9rem;
    border-radius: 0.85rem;
    background: rgba(186, 20, 52, 0.08);
    border: 1px solid rgba(186, 20, 52, 0.2);
    color: #680016;
    font-weight: 850;
    line-height: 1.4;
}
.booking-deadline-list-note__icon {
    color: #ba1434 !important;
    font-size: 1.25rem !important;
}

/* ========== OFFER SELECT CARDS (BOOKING FORM) ========== */
.offer-select-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}
.offer-select-grid input[type="radio"] { display: none; }
.offer-select-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 16px 12px; cursor: pointer;
    background: rgba(255,255,255,0.02); border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md); transition: var(--transition); text-align: center;
    user-select: none; position: relative; overflow: hidden;
}
.offer-select-card::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(212,168,67,0.04); opacity: 0; transition: var(--transition);
}
.offer-select-card:hover { border-color: rgba(212,168,67,0.4); transform: translateY(-2px); }
.offer-select-card:hover::after { opacity: 1; }
.offer-select-grid input[type="radio"]:checked + .offer-select-card {
    background: rgba(212,168,67,0.10); border-color: var(--accent-gold);
    box-shadow: 0 0 0 1px var(--accent-gold), 0 4px 20px rgba(212,168,67,0.2);
    transform: translateY(-3px);
}
.offer-select-none { border-style: dashed; }
.offer-select-grid input[type="radio"]:checked + .offer-select-none {
    border-style: solid;
}
.offer-select-icon { font-size: 1.7rem; line-height: 1; }
.offer-select-name {
    font-family: var(--font-heading); font-size: 0.85rem; font-weight: 600;
    color: var(--text-primary); line-height: 1.3;
}
.offer-select-grid input[type="radio"]:checked + .offer-select-card .offer-select-name {
    color: var(--on-surface, #221a0f) !important;
}
.offer-select-price {
    font-size: 0.72rem; color: var(--text-muted); margin-top: -2px;
}
.offer-select-grid input[type="radio"]:checked + .offer-select-card .offer-select-price {
    color: var(--on-surface-variant, #58413f) !important;
}

#reservierung .offer-select-card .offer-select-name {
    color: #221a0f !important;
    font-weight: 800;
    text-shadow: none;
}

#reservierung .offer-select-card .offer-select-price {
    color: #58413f !important;
    text-shadow: none;
}

#reservierung .offer-select-grid input[type="radio"]:checked + .offer-select-card .offer-select-name {
    color: #0b0905 !important;
}

#reservierung .form-row.grid:not(.hidden) {
    display: grid !important;
    align-items: start;
}

#reservierung .form-row > .form-group {
    min-width: 0;
}

#reservierung .form-row > .form-group > label,
#reservierung .offer-extra-fields .form-group > label {
    min-height: 2.1em;
    display: flex;
    align-items: flex-end;
    margin-bottom: 0;
}

#reservierung .offer-extra-fields .form-toggle-group {
    width: 100%;
    margin-top: 0;
}

#reservierung .offer-extra-fields .form-toggle-group label {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#reservierung .offer-extra-fields input,
#reservierung .offer-extra-fields select {
    min-height: 46px;
}

@media (max-width: 767px) {
    #reservierung .form-row > .form-group > label,
    #reservierung .offer-extra-fields .form-group > label {
        min-height: 0;
    }
}

/* ========== OFFER EXTRA FIELDS (dynamic addon sections) ========== */
.offer-extra-fields {
    display: none; 
    background: linear-gradient(135deg, rgba(212,168,67,0.05), rgba(212,168,67,0.02));
    border: 1px solid rgba(212,168,67,0.25); border-radius: var(--radius-md);
    padding: 24px; margin-top: 4px; margin-bottom: 8px;
    animation: slideDown 0.35s ease-out;
}
.offer-extra-fields.visible { display: block; }
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.offer-extra-header {
    display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.offer-extra-icon { font-size: 1.6rem; }
.offer-extra-header h5 {
    font-family: var(--font-heading); font-size: 1rem; font-weight: 700;
    color: #680016 !important;
    margin: 0;
}
.offer-extra-info {
    background: rgba(212,168,67,0.06); border-left: 3px solid var(--accent-gold);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 12px 16px; margin-bottom: 20px;
}
.offer-extra-info p {
    font-size: 0.95rem; color: #221a0f; line-height: 1.6; margin: 0;
}



/* ========== JOBS ========== */
.jobs-grid { max-width: 800px; margin: 0 auto; }
.job-card {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-xl); overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5); position: relative;
}
.job-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-red-light), var(--accent-gold));
}
.job-card-header {
    text-align: center; padding: 48px 36px 32px; position: relative;
    background: linear-gradient(180deg, rgba(212,168,67,0.06) 0%, transparent 100%);
}
.job-badge {
    display: inline-block; font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px; color: #0a0a1a;
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-light));
    padding: 6px 18px; border-radius: 50px; margin-bottom: 20px;
    animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 8px var(--glow-gold); }
    50% { box-shadow: 0 0 20px var(--glow-gold), 0 0 40px rgba(212,168,67,0.15); }
}
.job-icon { font-size: 3rem; margin-bottom: 16px; }
.job-card-header h3 {
    font-family: var(--font-heading); font-size: 1.8rem; font-weight: 800;
    color: var(--text-primary); margin-bottom: 16px;
}
.job-meta { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.job-tag {
    display: inline-block; font-size: 0.78rem; font-weight: 600; color: var(--accent-gold);
    background: rgba(212,168,67,0.1); border: 1px solid rgba(212,168,67,0.2);
    padding: 5px 14px; border-radius: 50px;
}

.job-card-body { padding: 0 36px 32px; }
.job-intro {
    font-size: 1rem; color: var(--text-secondary); line-height: 1.7;
    text-align: center; margin-bottom: 32px; max-width: 600px; margin-left: auto; margin-right: auto;
}
.job-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.job-detail-block {
    background: rgba(255,255,255,0.02); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); padding: 24px;
}
.job-detail-block h4 {
    font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600;
    color: var(--accent-gold); margin-bottom: 16px; padding-bottom: 10px;
    border-bottom: 1px solid rgba(212,168,67,0.15);
}
.job-detail-block ul { list-style: none; padding: 0; }
.job-detail-block li {
    font-size: 0.88rem; color: var(--text-secondary); padding: 7px 0 7px 20px;
    position: relative; line-height: 1.5;
}
.job-detail-block li::before {
    content: '→'; position: absolute; left: 0; color: var(--accent-gold);
    font-weight: 600;
}

.job-card-benefits {
    padding: 28px 36px; margin: 0 36px 32px;
    background: rgba(212,168,67,0.04); border: 1px solid rgba(212,168,67,0.15);
    border-radius: var(--radius-md);
}
.job-card-benefits h4 {
    font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600;
    color: var(--accent-gold); margin-bottom: 20px; text-align: center;
}
.benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.benefit-item {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); padding: 16px 12px;
    font-size: 0.82rem; color: var(--text-secondary); text-align: center;
    transition: var(--transition);
}
.benefit-item:hover { border-color: var(--accent-gold); transform: translateY(-2px); }
.benefit-icon { font-size: 1.5rem; }

.job-card-footer {
    text-align: center; padding: 32px 36px 40px;
    border-top: 1px solid var(--border-subtle);
    background: linear-gradient(180deg, transparent 0%, rgba(212,168,67,0.03) 100%);
}
.job-cta-text {
    font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700;
    color: var(--text-primary); margin-bottom: 20px;
}
.job-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.job-hint { font-size: 0.85rem; color: var(--text-muted); font-style: italic; }
.job-call-btn {
    color: #680016 !important;
    background: #fff8f3 !important;
    border-color: rgba(104, 0, 22, 0.34) !important;
}
.job-call-btn:hover,
.job-call-btn:focus-visible {
    color: #ffffff !important;
    background: #680016 !important;
    border-color: #680016 !important;
    box-shadow: 0 10px 24px rgba(104, 0, 22, 0.18);
}

/* ========== FOOTER ========== */
.footer { background: var(--bg-secondary); border-top: 1px solid var(--border-subtle); padding: 60px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 40px; }
.footer-logo { height: 60px; margin-bottom: 16px; }
.footer-brand p { font-size: 0.85rem; color: var(--text-secondary); max-width: 280px; }
.footer-links h4, .footer-contact h4 {
    font-family: var(--font-heading); font-size: 0.95rem; font-weight: 600;
    color: var(--text-primary); margin-bottom: 20px;
}
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: var(--text-secondary); font-size: 0.9rem; }
.footer-links a:hover { color: var(--accent-gold); }
.footer-contact p { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 12px; }
.footer-contact a { display: block; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 6px; }
.footer-contact a:hover { color: var(--accent-gold); }
.footer-bottom {
    display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; gap: 20px;
    padding: 30px 0; border-top: 1px solid var(--border-subtle);
    font-size: 0.8rem; color: var(--text-muted);
}

/* ========== SOCIAL MEDIA ========== */
.footer-social {
    display: flex; gap: 12px; margin-top: 20px;
}
.social-link {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 44px; height: 44px;
    border-radius: 50%; border: 1px solid var(--border-subtle);
    color: var(--text-secondary); transition: var(--transition);
    text-decoration: none;
}
.social-link svg { width: 20px; height: 20px; flex-shrink: 0; }
.social-link:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
.social-link-facebook { background: rgba(24, 119, 242, 0.1); color: #1877f2; border-color: rgba(24,119,242,0.3); }
.social-link-facebook:hover { background: #1877f2; color: #fff; border-color: #1877f2; }
.social-link-instagram { background: rgba(225, 48, 108, 0.1); color: #e1306c; border-color: rgba(225,48,108,0.3); }
.social-link-instagram:hover {
    background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4);
    color: #fff; border-color: transparent;
}

/* Footer-bottom social (with text labels) */
.footer-bottom-social {
    display: flex; align-items: center; gap: 16px;
}
.footer-bottom-social .social-link {
    width: auto; height: auto; border-radius: var(--radius-sm);
    padding: 8px 14px; font-size: 0.82rem; font-family: var(--font-heading); font-weight: 600;
    gap: 8px;
}
.footer-bottom-social .social-link svg { width: 16px; height: 16px; }
.footer-bottom-social .social-link span { white-space: nowrap; }

/* ========== MODAL ========== */
.modal {
    display: none; position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
    align-items: center; justify-content: center; padding: 24px;
}
.modal.open { display: flex; }
.modal-content {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: 40px; max-width: 600px; width: 100%;
    max-height: 80vh; overflow-y: auto; position: relative;
}
.modal-close {
    position: absolute; top: 16px; right: 20px; background: none; border: none;
    color: var(--text-secondary); font-size: 2rem; cursor: pointer; line-height: 1;
}
.modal-close:hover { color: var(--text-primary); }
.modal-content h2 { font-family: var(--font-heading); font-size: 1.8rem; margin-bottom: 20px; color: var(--accent-gold); }
.modal-content p { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 12px; }

/* ========== AKTUELLES SONDERANGEBOT ========== */
body.vb-promo-lock { overflow: hidden; }

.vb-promo-overlay {
    position: fixed;
    inset: 0;
    z-index: 3200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(34, 26, 15, 0.68);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 180ms ease;
}
.vb-promo-overlay[hidden] { display: none !important; }
.vb-promo-overlay.is-open { opacity: 1; }

.vb-promo-dialog {
    position: relative;
    width: min(100%, 620px);
    max-height: min(88vh, 760px);
    overflow-y: auto;
    padding: 42px 42px 36px;
    border: 1px solid rgba(88, 65, 63, 0.2);
    border-radius: 28px;
    background: #fffaf5;
    color: #221a0f;
    box-shadow: 0 30px 90px rgba(34, 26, 15, 0.35);
    text-align: center;
    transform: translateY(18px) scale(0.98);
    transition: transform 220ms ease;
}
.vb-promo-overlay.is-open .vb-promo-dialog { transform: translateY(0) scale(1); }
.vb-promo-dialog:focus { outline: none; }

.vb-promo-accent {
    position: absolute;
    inset: 0 0 auto;
    height: 7px;
    background: linear-gradient(90deg, #680016, #ba1434, #e8b04a);
}
.vb-promo-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(88, 65, 63, 0.18);
    border-radius: 999px;
    background: #fff;
    color: #58413f;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.vb-promo-close:hover { background: #f6ece0; color: #ba1434; transform: scale(1.04); }
.vb-promo-close:focus-visible,
.vb-promo-cta:focus-visible,
.vb-promo-reopen:focus-visible {
    outline: 3px solid rgba(186, 20, 52, 0.35);
    outline-offset: 3px;
}
.vb-promo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    border-radius: 20px;
    background: rgba(186, 20, 52, 0.1);
    color: #ba1434;
}
.vb-promo-icon .material-symbols-outlined { font-size: 34px; }
.vb-promo-badge {
    display: block;
    margin-bottom: 10px;
    color: #ba1434;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.vb-promo-dialog h2 {
    margin: 0 46px 14px;
    color: #221a0f;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
}
.vb-promo-text {
    max-width: 500px;
    margin: 0 auto 20px;
    color: #58413f;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.65;
}
.vb-promo-price {
    margin: 20px auto;
    padding: 16px 20px;
    border: 1px solid rgba(186, 20, 52, 0.2);
    border-radius: 16px;
    background: rgba(186, 20, 52, 0.07);
    color: #680016;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.35;
}
.vb-promo-period {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 14px;
    color: #58413f;
    font-size: 0.85rem;
    font-weight: 700;
}
.vb-promo-period .material-symbols-outlined { color: #ba1434; font-size: 20px; }
.vb-promo-terms {
    margin: 0 auto 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(88, 65, 63, 0.14);
    color: #7a6a5f;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.5;
}
.vb-promo-code {
    display: inline-flex;
    gap: 5px;
    margin: 0 0 20px;
    padding: 7px 12px;
    border: 1px dashed rgba(186, 20, 52, 0.35);
    border-radius: 10px;
    color: #58413f;
    background: #fff;
    font-size: 0.78rem;
    font-weight: 600;
}
.vb-promo-code strong { color: #ba1434; letter-spacing: 0.08em; }
.vb-promo-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 14px 22px;
    border-radius: 13px;
    background: #ba1434;
    color: #fff !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(186, 20, 52, 0.22);
    transition: opacity 160ms ease, transform 160ms ease;
}
.vb-promo-cta:hover { opacity: 0.92; transform: translateY(-1px); }

.vb-promo-reopen {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1500;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 11px 16px;
    border: 1px solid rgba(186, 20, 52, 0.24);
    border-radius: 999px;
    background: #fffaf5;
    color: #680016;
    box-shadow: 0 12px 34px rgba(34, 26, 15, 0.2);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}
.vb-promo-reopen[hidden] { display: none !important; }
.vb-promo-reopen .material-symbols-outlined { color: #ba1434; font-size: 21px; }

@media (max-width: 640px) {
    .vb-promo-overlay { align-items: center; padding: 12px; }
    .vb-promo-dialog {
        width: 100%;
        max-height: 90vh;
        padding: 34px 22px 24px;
        border-radius: 24px;
    }
    .vb-promo-dialog h2 { margin-left: 30px; margin-right: 30px; font-size: 1.75rem; }
    .vb-promo-text { font-size: 0.92rem; }
    .vb-promo-reopen { right: 12px; bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
    .vb-promo-overlay,
    .vb-promo-dialog,
    .vb-promo-close,
    .vb-promo-cta { transition: none; }
}

/* AGB Modal */
.modal-content-wide { max-width: 800px; }
.agb-toc { background: rgba(212,168,67,0.05); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 20px 24px; margin-bottom: 24px; }
.agb-toc p { margin-bottom: 8px; }
.agb-toc ol { padding-left: 20px; list-style: decimal; }
.agb-toc ol li { font-size: 0.85rem; color: var(--text-secondary); padding: 3px 0; }
.agb-section { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border-subtle); }
.agb-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.agb-section h3 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; color: var(--accent-gold); margin-bottom: 12px; }
.agb-section h4 { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin: 16px 0 8px; }
.agb-section p { font-size: 0.88rem; color: var(--text-secondary); margin-bottom: 8px; line-height: 1.65; }

/* ========== EMOJI STYLING ========== */
img.emoji {
    height: 1.25em;
    width: 1.25em;
    max-width: none;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.2em;
    display: inline-block;
}

#gastronomie-content .gastro-menu-icon {
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(186, 20, 52, 0.09);
    font-size: 1.55rem !important;
    line-height: 1;
    overflow: hidden;
    transform-origin: center;
}

#gastronomie-content .gastro-menu-icon img.emoji {
    width: 1.65rem !important;
    height: 1.65rem !important;
    max-width: none !important;
    min-width: 1.65rem;
    flex: 0 0 auto;
    margin: 0 !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
}

#gastronomie-content .gastro-buffet-icon {
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(186, 20, 52, 0.09);
    font-size: 1.35rem !important;
    line-height: 1;
    overflow: hidden;
}

#gastronomie-content .gastro-buffet-icon img.emoji {
    width: 1.4rem !important;
    height: 1.4rem !important;
    max-width: none !important;
    min-width: 1.4rem !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    flex: 0 0 auto;
    margin: 0 !important;
}

@media (hover: none), (max-width: 768px) {
    #gastronomie-content .gastro-menu-icon {
        transform: none !important;
    }
}

#preise-content .price-with-drinks,
#preise-content .price-without-drinks {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    opacity: 1;
    background: rgba(255, 250, 245, 0.44);
    border: 1px solid rgba(88, 65, 63, 0.2);
    border-radius: 1rem;
    padding: 1rem 0.85rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

#preise-content .price-with-drinks {
    border-color: rgba(186, 20, 52, 0.3);
}

#preise-content .price-without-drinks {
    border-color: rgba(88, 65, 63, 0.2);
}

#preise-content .price-option-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: #f1e7db;
    color: #58413f;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

#preise-content .price-option-label-saving {
    background: #ba1434;
    color: #fff;
}

#preise-content .price-without-drinks .font-headline {
    color: #58413f !important;
}

#preise-content .price-without-drinks-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.45rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: #f1e7db;
    color: #58413f;
    font-size: 0.78rem;
    line-height: 1.2;
    font-weight: 800;
}

/* ========== ANIMATIONS ========== */
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-12px); }
    60% { transform: translateX(-50%) translateY(-6px); }
}
.animate-on-scroll { opacity: 0; transform: translateY(30px); transition: all 0.6s ease-out; }
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
    .price-grid { grid-template-columns: 1fr; max-width: 100%; margin-left: auto; margin-right: auto; }
    .offers-grid { grid-template-columns: repeat(2, 1fr); }
    .hours-wrapper { grid-template-columns: 1fr; }
    .gastro-grid { grid-template-columns: 1fr; }
    .contact-top { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .nav-info-group {
        width: 100%;
        text-align: center;
    }
    .nav-info-toggle {
        width: 100%;
        text-align: center;
        font-size: 1.1rem;
        padding: 14px 20px;
    }
    .nav-info-menu {
        position: static;
        transform: none;
        width: 100%;
        min-width: 0;
        margin-top: 4px;
        box-shadow: none;
        background: rgba(255,255,255,0.06);
        border-color: rgba(255,255,255,0.08);
    }
    .nav-info-menu a {
        color: #58413f;
        text-align: center;
    }
    .hub-tabbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        position: static;
        border-radius: 18px;
    }
    .hub-tab {
        min-height: 48px;
        font-size: 0.82rem;
    }
    .hub-panel > section {
        padding-top: 34px !important;
        padding-bottom: 40px !important;
        border-radius: 20px;
    }
    .mobile-reserve-cta {
        display: flex;
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: 14px;
        z-index: 70;
        justify-content: center;
        align-items: center;
        min-height: 52px;
        border-radius: 16px;
        background: #ba1434;
        color: #fff;
        font-family: var(--font-heading);
        font-weight: 800;
        box-shadow: 0 14px 34px rgba(186, 20, 52, 0.28);
    }
    .mobile-reserve-cta:hover {
        color: #fff;
    }
    body {
        padding-bottom: 78px;
    }
    .nav-menu {
        position: fixed; top: 0; right: -100%; width: 280px; height: 100vh;
        background: var(--bg-secondary); flex-direction: column; justify-content: center;
        padding: 40px; transition: var(--transition); border-left: 1px solid var(--border-subtle);
    }
    .nav-menu.open { right: 0; }
    .nav-link { font-size: 1.1rem; padding: 14px 20px; width: 100%; text-align: center; }
    .nav-cta { display: none; }
    .hamburger { display: flex; }

    .hero-title-main { font-size: 2rem; }
    .hero-title-sub { font-size: 1.1rem; }
    .hero-logo { width: 240px; }
    .hero-stats { gap: 20px; flex-wrap: wrap; }
    .stat-number { font-size: 1.6rem; }

    .section { padding: 70px 0; }
    .section-title { font-size: 1.8rem; }

    .offers-grid { grid-template-columns: 1fr; }
    .hours-row { grid-template-columns: 100px 1fr; gap: 4px; padding: 14px 16px; }
    .hours-note { grid-column: 1 / -1; text-align: left; padding-left: 0; font-size: 0.72rem; }
    .hours-day { font-size: 0.85rem; }
    .hours-time { font-size: 0.82rem; }
    .accordion-toggle { font-size: 0.82rem; padding: 10px 16px; }

    /* Terminkalender – Card Layout */
    .tk-table, .tk-table thead, .tk-table tbody, .tk-table tr, .tk-table th, .tk-table td {
        display: block;
    }
    .tk-table thead {
        display: none;
    }
    .tk-table {
        border: none;
        background: transparent;
        box-shadow: none;
        min-width: 0 !important;
    }
    /* Data-Row = Card */
    .tk-table tbody tr.tk-data-row {
        background: var(--bg-card);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        margin-bottom: 10px;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }
    .tk-table tbody td {
        padding: 4px 0;
        border-bottom: none;
    }
    .tk-table tbody td::before {
        display: block;
        font-size: 0.68rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--accent-gold);
        margin-bottom: 2px;
    }
    .tk-table td:nth-child(1) { font-size: 1rem; font-weight: 700; margin-bottom: 2px; }
    .tk-table td:nth-child(1)::before { content: "Tag"; }
    .tk-table td:nth-child(2) {
        font-size: 0.82rem;
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border-subtle);
    }
    .tk-table td:nth-child(2)::before { content: "Datum"; }
    .tk-table td:nth-child(3) {
        font-size: 0.88rem;
        line-height: 1.75;
        white-space: normal;
    }
    .tk-table td:nth-child(3)::before { content: "Öffnungszeiten"; }

    /* Ampel-Status als farbige linke Kanten-Border auf der Card */
    .tk-table tr[data-status="green"] { border-left: 4px solid #10b981 !important; }
    .tk-table tr[data-status="gold"] { border-left: 4px solid #f59e0b !important; }
    .tk-table tr[data-status="red"] { border-left: 4px solid #ef4444 !important; }



    /* Feiertag-Liste: kompakter auf Mobile */
    .feiertag-list li { padding: 8px 12px; font-size: 0.8rem; }
    .accordion-content.open { overflow-x: visible; }

    .contact-form { grid-template-columns: 1fr; }
    .form-row { flex-direction: column; gap: 16px; margin-bottom: 0; }
    .form-row > .form-group { margin-bottom: 16px; min-width: 0; } /* min-width auf 0 für Mobile */
    .form-row:last-child > .form-group:last-child { margin-bottom: 0; }
    .form-radio-tiles { grid-template-columns: 1fr 1fr; gap: 10px; } /* Engere Gaps */
    .form-section { padding: 20px 16px; } /* Etwas schmaleres Padding */
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }

    /* Angebots-Auswahl: 2 Spalten statt auto-fill auf Mobile */
    .offer-select-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .offer-select-card { padding: 12px 8px; }
    .offer-select-icon { font-size: 1.4rem; }
    .offer-select-name { font-size: 0.78rem; }
    .offer-select-price { font-size: 0.68rem; }

    .job-card-header { padding: 36px 20px 24px; }
    .job-card-header h3 { font-size: 1.4rem; }
    .job-card-body { padding: 0 20px 24px; }
    .job-details-grid { grid-template-columns: 1fr; gap: 20px; }
    .job-card-benefits { margin: 0 20px 24px; padding: 20px; }
    .benefits-grid { grid-template-columns: 1fr 1fr; }
    .job-card-footer { padding: 24px 20px 32px; }
    .job-cta-text { font-size: 1.1rem; }
}

@media (max-width: 480px) {
    .container, .nav-container { padding: 0 16px; width: 100%; max-width: 100%; }
    .hero { padding: 80px 16px 40px; min-height: auto; }
    .hero-title-main { font-size: 1.6rem; }
    .hero-buttons { flex-direction: column; align-items: center; }
    .btn-lg { width: 100%; }
    #preise-content .grid {
        gap: 14px;
    }
    #preise-content .price-card {
        border-radius: 1.05rem !important;
        padding: 14px 14px !important;
    }
    #preise-content .price-card > .border-b {
        margin-bottom: 8px !important;
        padding-bottom: 8px !important;
    }
    #preise-content .price-card > .border-b > span:first-child {
        font-size: 1.45rem !important;
        margin-bottom: 5px !important;
    }
    #preise-content .price-card h3 {
        font-size: 1.08rem !important;
        margin-bottom: 6px !important;
    }
    #preise-content .price-card .inline-block.font-label {
        font-size: 0.62rem !important;
        line-height: 1.15 !important;
        padding: 4px 10px !important;
    }
    #preise-content .price-card > .space-y-4,
    #preise-content .price-card > .space-y-6 {
        margin-bottom: 8px !important;
    }
    #preise-content .price-card > .space-y-4 > :not([hidden]) ~ :not([hidden]),
    #preise-content .price-card > .space-y-6 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 7px !important;
    }
    #preise-content .price-card .font-headline.text-4xl,
    #preise-content .price-card .font-headline.text-5xl {
        font-size: 1.68rem !important;
        line-height: 1.05 !important;
        margin-bottom: 4px !important;
    }
    #preise-content .price-card .font-headline.text-2xl,
    #preise-content .price-card .font-headline.text-3xl {
        font-size: 1.1rem !important;
        line-height: 1.1 !important;
        margin-bottom: 2px !important;
    }
    #preise-content .price-card .font-headline.text-4xl span,
    #preise-content .price-card .font-headline.text-5xl span {
        font-size: 1.05rem !important;
    }
    #preise-content .price-card .font-headline.text-2xl span,
    #preise-content .price-card .font-headline.text-3xl span {
        font-size: 0.92rem !important;
    }
    #preise-content .price-card .text-sm.uppercase {
        font-size: 0.68rem !important;
        line-height: 1.2 !important;
        margin-bottom: 2px !important;
    }
    #preise-content .price-card .text-xs.font-bold.uppercase {
        font-size: 0.62rem !important;
        line-height: 1.15 !important;
        margin-bottom: 2px !important;
    }
    #preise-content .price-card .text-xs.text-on-surface-variant\/80,
    #preise-content .price-card .text-\[0\.7rem\].text-on-surface-variant\/80 {
        font-size: 0.66rem !important;
        margin-top: 3px !important;
        line-height: 1.25 !important;
    }
    #preise-content .price-with-drinks,
    #preise-content .price-without-drinks {
        padding: 0.62rem 0.5rem !important;
        border-radius: 0.8rem !important;
    }
    #preise-content .price-option-label {
        margin-bottom: 0.45rem !important;
        padding: 0.28rem 0.52rem !important;
        font-size: 0.6rem !important;
    }
    #preise-content .price-without-drinks-note {
        font-size: 0.68rem !important;
        padding: 0.3rem 0.55rem !important;
        margin-top: 0.35rem !important;
    }
    #preise-content .price-card .uppercase.tracking-wider {
        letter-spacing: 0.03em !important;
    }
    #preise-content .price-card .text-center.pt-6 {
        padding-top: 6px !important;
    }
    #preise-content .price-card .text-center.pt-6 span {
        padding: 5px 8px !important;
        font-size: 0.56rem !important;
        line-height: 1.25 !important;
    }
    #preise-content .price-card > .absolute.rotate-45 {
        top: 14px !important;
        right: -36px !important;
        padding: 4px 34px !important;
        font-size: 0.56rem !important;
    }
    #preise-content .price-extra-card {
        min-width: 0 !important;
        width: 100% !important;
        flex: none !important;
        padding: 12px 14px !important;
        border-radius: 0.9rem !important;
        gap: 10px !important;
    }
    #preise-content .price-extras {
        flex-direction: column !important;
        gap: 10px !important;
    }
    #preise-content .price-extra-shoes > span:first-child {
        position: relative;
        display: inline-flex;
        flex: 0 0 auto;
        width: 34px;
        height: 34px;
        border-radius: 999px;
        background: rgba(186, 20, 52, 0.1);
        color: inherit;
        font-size: 1.35rem !important;
        align-items: center;
        justify-content: center;
    }
    #preise-content .price-extra-shoes > span:first-child::before {
        content: none;
    }
    #preise-content .price-extra-shoes > span:first-child img.emoji {
        width: 1.25em !important;
        height: 1.25em !important;
        max-width: none !important;
    }
    .price-amount { font-size: 2.2rem; }
    .benefits-grid { grid-template-columns: 1fr; }
    .job-actions { flex-direction: column; }
    .job-actions .btn { width: 100%; }

    /* Kontakt-Überschrift: besser lesbar auf kleinen Screens */
    .section-title { font-size: 1.5rem; }

    /* Öffnungszeiten: kompakter auf kleinen Screens */
    .hours-row { grid-template-columns: 85px 1fr; padding: 12px 12px; gap: 2px; }
    .hours-day { font-size: 0.8rem; }
    .hours-time { font-size: 0.78rem; }
    .hours-note { font-size: 0.68rem; }
    .accordion-toggle { font-size: 0.78rem; padding: 10px 12px; }
    .feiertag-list li { font-size: 0.75rem; }

    /* Gruppentyp-Auswahl: 1-spaltig wenn zu eng */
    .form-radio-tiles { grid-template-columns: 1fr; gap: 12px; }

    /* Angebots-Auswahl: 2 Spalten beibehalten, noch kompakter */
    .offer-select-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .offer-select-card { padding: 10px 6px; gap: 4px; }
    .offer-select-icon { font-size: 1.2rem; }
    .offer-select-name { font-size: 0.72rem; }

    /* Extras Toggle-Buttons: kleinere Schrift & Stacking */
    .form-toggle-group { flex-direction: column; }
    .toggle-btn { padding: 10px 8px; font-size: 0.82rem; }

    /* Form section title */
    .form-section-title { font-size: 1rem; }

    .tk-demo-banner { padding: 12px 14px; }
    .tk-demo-banner p { font-size: 0.75rem; }




    /* Offer extra fields */
    .offer-extra-fields { padding: 16px; }
    .offer-extra-header h5 { font-size: 0.88rem; }
    .offer-extra-info p { font-size: 0.88rem; }
}

/* ===== TEST-MODE: E-Mail Vorschau Styles (ENTFERNEN FÜR LIVE-BETRIEB) ===== */
.email-test-modal-content {
    max-width: 1100px;
    max-height: 90vh;
}
.email-test-header {
    text-align: center;
    margin-bottom: 28px;
}
.email-test-badge {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #0a0a1a;
    background: linear-gradient(135deg, #f39c12, #e67e22);
    padding: 6px 20px;
    border-radius: 50px;
    margin-bottom: 12px;
    animation: pulse-glow-test 2s ease-in-out infinite;
}
@keyframes pulse-glow-test {
    0%, 100% { box-shadow: 0 0 8px rgba(243,156,18,0.4); }
    50% { box-shadow: 0 0 20px rgba(243,156,18,0.6), 0 0 40px rgba(243,156,18,0.2); }
}
.email-test-header h2 {
    font-size: 1.6rem;
    margin-bottom: 4px;
}
.email-test-header p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0;
}
.email-test-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
.email-test-card {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: rgba(0,0,0,0.3);
}
.email-test-card-header {
    padding: 12px 16px;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
}
.email-to-business {
    background: linear-gradient(135deg, rgba(52,152,219,0.2), rgba(41,128,185,0.1));
    color: #5dade2;
    border-bottom: 2px solid rgba(52,152,219,0.4);
}
.email-to-customer {
    background: linear-gradient(135deg, rgba(46,204,113,0.2), rgba(39,174,96,0.1));
    color: #58d68d;
    border-bottom: 2px solid rgba(46,204,113,0.4);
}
.email-test-card-body {
    padding: 20px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.7;
    max-height: 55vh;
    overflow-y: auto;
}
.email-test-card-body .email-subject {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
}
.email-test-card-body .email-line {
    margin-bottom: 4px;
}
.email-test-card-body .email-divider {
    border: none;
    border-top: 1px dashed rgba(255,255,255,0.1);
    margin: 12px 0;
}
.email-test-card-body .email-section-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--accent-gold);
    margin-top: 12px;
    margin-bottom: 8px;
}
.email-test-card-body .email-highlight {
    color: var(--text-primary);
    font-weight: 500;
}
.email-test-footer {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid var(--border-subtle);
}
.email-test-footer p {
    font-size: 0.88rem;
    color: #e67e22;
    margin-bottom: 16px;
}
@media (max-width: 768px) {
    .email-test-grid { grid-template-columns: 1fr; }
    .email-test-modal-content { padding: 20px; }
}
/* ===== ENDE TEST-MODE Styles ===== */

/* ========== STICKY NAVBAR FIX ========== */
/* One-Page: Hero + Navi verschmolzen, sticky & schrumpfend.
   sticky (statt fixed) laesst den Hero in-flow schrumpfen, ohne Inhalte zu ueberlappen. */
html {
    scroll-behavior: smooth;
}
#navbar {
    position: sticky !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
}
body {
    padding-top: 0;
}

/* Bar-Ebene: immer sichtbar */
.hero-bar {
    min-height: 60px;
}

/* Expand-Ebene: grosser Hero oben. Liegt jetzt ausserhalb von #navbar und scrollt
   natuerlich weg, waehrend die sticky Bar oben kleben bleibt. KEIN max-height-Collapse
   mehr: das koppelte die Dokumenthoehe an die Scrollposition und erzeugte ueber das
   Browser-Scroll-Anchoring eine Endlosschleife (Seite zog beim Scrollen nach oben). */
.hero-expand {
    border-top: 1px solid rgba(224, 191, 188, 0.4);
}
#navbar.scrolled {
    box-shadow: 0 6px 24px rgba(104, 0, 22, 0.10);
    background: rgba(255, 248, 243, 0.96);
}

/* Schnell-Chips im Hero */
.hero-quick {
    margin-top: 0.25rem;
}

/* Sprungmarken: aktiver Abschnitt hervorgehoben */
.nav-link.active {
    color: #680016;
    position: relative;
}
.nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    border-radius: 9999px;
    background: #ba1434;
}

/* Gestapelte Abschnitte: Offset fuer die Sticky-Bar, damit Ueberschriften frei stehen */
main > section[id],
section[id] {
    scroll-margin-top: 84px;
}
@media (max-width: 768px) {
    main > section[id],
    section[id] {
        scroll-margin-top: 68px;
    }
}

/* ========== KONTAKT-FORMULAR - HELLES DESIGN ========== */
#kontakt-content .contact-form {
    display: flex !important;
    flex-direction: column;
    gap: 2rem;
    grid-template-columns: none !important;
}
#kontakt-content .contact-form .form-row {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 1.5rem !important;
    margin-bottom: 0 !important;
    width: 100%;
}
#kontakt-content .contact-form .form-row > .form-group {
    min-width: 0;
}
#kontakt-content .contact-form input:not([type="checkbox"]):not([type="hidden"]),
#kontakt-content .contact-form select,
#kontakt-content .contact-form textarea {
    background: #ffffff !important;
    border: 1.5px solid rgba(140, 113, 110, 0.35) !important;
    color: #221a0f !important;
    border-radius: 0.75rem !important;
    box-shadow: none !important;
}
#kontakt-content .contact-form input::placeholder,
#kontakt-content .contact-form textarea::placeholder {
    color: #8c716e;
    opacity: 1;
}
#kontakt-content .contact-form input:not([type="checkbox"]):focus,
#kontakt-content .contact-form select:focus,
#kontakt-content .contact-form textarea:focus {
    border-color: #680016 !important;
    box-shadow: 0 0 0 3px rgba(104, 0, 22, 0.12) !important;
}
#kontakt-content .contact-form select option {
    background: #ffffff;
    color: #221a0f;
}
#kontakt-content .contact-form select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23680016' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 1em !important;
    padding-right: 2.5rem !important;
}
#kontakt-content .contact-form input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    min-width: 1.25rem;
    padding: 0 !important;
    border: 1.5px solid rgba(140, 113, 110, 0.45) !important;
    border-radius: 0.35rem !important;
    background: #ffffff !important;
    accent-color: #ba1434;
}
#kontakt-content .contact-form input[type="checkbox"]:checked {
    background-color: #ba1434 !important;
    border-color: #ba1434 !important;
}
#kontakt-content .contact-form input[type="checkbox"]:focus-visible {
    outline: 3px solid rgba(104, 0, 22, 0.22);
    outline-offset: 3px;
}
#kontakt-content .form-consent-check {
    background: #ffffff !important;
    border-color: rgba(140, 113, 110, 0.25) !important;
}
/* Date-Picker helles Design */
#kontakt-content .date-picker-row {
    background: #ffffff !important;
    border-color: rgba(140, 113, 110, 0.35) !important;
}
#kontakt-content .date-picker-row.picker-open {
    border-color: #680016 !important;
    box-shadow: 0 0 0 3px rgba(104, 0, 22, 0.12) !important;
}
#kontakt-content .date-seg-value {
    color: #8c716e !important;
}
#kontakt-content .date-segment.has-value .date-seg-value {
    color: #221a0f !important;
    font-weight: 600;
}
#kontakt-content .date-segment + .date-segment {
    border-left-color: rgba(140, 113, 110, 0.2) !important;
}
#kontakt-content .date-segment:hover {
    background: rgba(104, 0, 22, 0.05) !important;
}
#kontakt-content .date-segment.active {
    background: rgba(104, 0, 22, 0.1) !important;
}
#kontakt-content .date-dropdown-panel {
    background: #ffffff !important;
    border-top-color: rgba(140, 113, 110, 0.2) !important;
}
#kontakt-content .date-grid-item {
    color: #221a0f !important;
}
#kontakt-content .date-grid-item:hover {
    background: rgba(104, 0, 22, 0.08) !important;
    color: #680016 !important;
}
#kontakt-content .date-grid-item.selected {
    background: #680016 !important;
    color: #ffffff !important;
}
#kontakt-content .contact-form label {
    color: #58413f !important;
}
@media (min-width: 768px) {
    #kontakt-content .contact-form .form-row.md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    #kontakt-content .contact-form .form-row.md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    #kontakt-content .contact-form .form-row.md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    #kontakt-content .contact-form .md\:col-span-1 {
        grid-column: span 1 / span 1 !important;
    }
    #kontakt-content .contact-form .md\:col-span-3 {
        grid-column: span 3 / span 3 !important;
    }
}

/* ========== UI QUALITY OVERRIDES 2026-04 ========== */
@media (max-width: 768px) {
    #navMenu.nav-menu {
        background: rgba(255, 248, 243, 0.97) !important;
        border-left: 0 !important;
        border-bottom: 2px solid rgba(140, 113, 110, 0.18);
        box-shadow: 0 14px 32px rgba(34, 26, 15, 0.12);
    }

    #navMenu .nav-link,
    #navMenu .nav-info-toggle {
        color: #58413f !important;
    }

    #navMenu .nav-link:hover,
    #navMenu .nav-link.active,
    #navMenu .nav-info-toggle:hover {
        color: #ba1434 !important;
    }

    #navMenu .nav-info-menu {
        background: rgba(255, 248, 243, 0.95);
        border-color: rgba(140, 113, 110, 0.18);
    }

    #navMenu .nav-info-menu a {
        color: #58413f !important;
    }
}

#reservierung .contact-form input,
#reservierung .contact-form select,
#reservierung .contact-form textarea {
    background: #ffffff !important;
    border: 1.5px solid rgba(140, 113, 110, 0.35) !important;
    color: #221a0f !important;
}

#reservierung .contact-form input::placeholder,
#reservierung .contact-form textarea::placeholder {
    color: #8c716e;
    opacity: 1;
}

#reservierung .contact-form label {
    color: #58413f !important;
}

#reservierung .form-consent-check {
    position: relative;
}

#reservierung .contact-form input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    flex: 0 0 auto;
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin-top: 0.25rem !important;
    accent-color: #ba1434;
    background: #ffffff !important;
    border: 1.5px solid rgba(104, 0, 22, 0.55) !important;
    cursor: pointer;
    pointer-events: auto;
}

#reservierung .contact-form input[type="checkbox"]:checked {
    background-color: #ba1434 !important;
    border-color: #ba1434 !important;
}

#reservierung .contact-form input[type="checkbox"]:focus-visible {
    outline: 3px solid rgba(104, 0, 22, 0.34);
    outline-offset: 3px;
}

#reservierung .form-consent-check .consent-label {
    cursor: pointer;
}

#reservierung .form-consent-check .consent-legal-link {
    color: #a90f2f !important;
    font-weight: 800;
    text-decoration-line: underline;
    text-decoration-color: rgba(186, 20, 52, 0.58);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.18em;
    transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

#reservierung .form-consent-check .consent-legal-link:hover,
#reservierung .form-consent-check .consent-legal-link:focus-visible {
    color: #680016 !important;
    text-decoration-color: #680016;
}

#reservierung .form-consent-check .consent-legal-link:focus-visible {
    border-radius: 3px;
    outline: 2px solid rgba(104, 0, 22, 0.22);
    outline-offset: 2px;
}

#reservierung .contact-form input:focus,
#reservierung .contact-form select:focus,
#reservierung .contact-form textarea:focus {
    border-color: #680016 !important;
    box-shadow: 0 0 0 3px rgba(104, 0, 22, 0.12) !important;
}

#reservierung .contact-form select option {
    background: #ffffff;
    color: #221a0f;
}

#reservierung .date-picker-row {
    background: #ffffff !important;
    border-color: rgba(140, 113, 110, 0.35) !important;
}

#reservierung .date-picker-row.picker-open,
#reservierung .date-picker-row:focus-within {
    border-color: #680016 !important;
    box-shadow: 0 0 0 3px rgba(104, 0, 22, 0.12) !important;
}

#reservierung .date-seg-value {
    color: #8c716e !important;
}

#reservierung .date-segment.has-value .date-seg-value {
    color: #221a0f !important;
    font-weight: 600;
}

#reservierung .date-segment + .date-segment {
    border-left-color: rgba(140, 113, 110, 0.2) !important;
}

#reservierung .date-segment:hover {
    background: rgba(104, 0, 22, 0.05) !important;
}

#reservierung .date-segment.active {
    background: rgba(104, 0, 22, 0.1) !important;
}

#reservierung .date-dropdown-panel {
    background: #ffffff !important;
    border-top-color: rgba(140, 113, 110, 0.2) !important;
}

#reservierung .date-grid-item {
    color: #221a0f !important;
}

#reservierung .date-grid-item:hover {
    background: rgba(104, 0, 22, 0.08) !important;
    color: #680016 !important;
}

#reservierung .date-grid-item.selected {
    background: #680016 !important;
    color: #ffffff !important;
}

#sportModal input,
#sportModal select,
#sportModal textarea {
    background: #ffffff !important;
    color: #221a0f !important;
    border-color: rgba(140, 113, 110, 0.35) !important;
}

#sportModal input:focus,
#sportModal select:focus,
#sportModal textarea:focus {
    border-color: #680016 !important;
    box-shadow: 0 0 0 3px rgba(104, 0, 22, 0.12) !important;
}

#sportModal .date-picker-row {
    background: #ffffff !important;
    border-color: rgba(140, 113, 110, 0.35) !important;
}

#sportModal .date-picker-row.picker-open,
#sportModal .date-picker-row:focus-within {
    border-color: #680016 !important;
    box-shadow: 0 0 0 3px rgba(104, 0, 22, 0.12) !important;
}

#sportModal .date-seg-value {
    color: #8c716e !important;
}

#sportModal .date-segment.has-value .date-seg-value {
    color: #221a0f !important;
    font-weight: 600;
}

#sportModal .date-segment + .date-segment {
    border-left-color: rgba(140, 113, 110, 0.2) !important;
}

#sportModal .date-segment:hover {
    background: rgba(104, 0, 22, 0.05) !important;
}

#sportModal .date-segment.active {
    background: rgba(104, 0, 22, 0.1) !important;
}

#sportModal .date-dropdown-panel {
    background: #ffffff !important;
    border-top-color: rgba(140, 113, 110, 0.2) !important;
}

#sportModal .date-grid-item {
    color: #221a0f !important;
}

#sportModal .date-grid-item:hover {
    background: rgba(104, 0, 22, 0.08) !important;
    color: #680016 !important;
}

#sportModal .date-grid-item.selected {
    background: #680016 !important;
    color: #ffffff !important;
}

.nav-link:focus-visible,
.nav-info-toggle:focus-visible,
.lang-toggle:focus-visible,
.hamburger:focus-visible,
.mobile-reserve-cta:focus-visible,
.hub-status-card:focus-visible,
.hub-tab:focus-visible,
.offer-toggle:focus-visible,
.offer-book-btn:focus-visible,
.modal-close:focus-visible,
.form-submit:focus-visible,
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible,
.contact-form a:focus-visible,
.contact-form button:focus-visible,
.accordion-toggle:focus-visible {
    outline: 3px solid rgba(104, 0, 22, 0.34);
    outline-offset: 3px;
}

#reservierung input[type="radio"] {
    display: block !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0.01 !important;
}

#reservierung input[type="radio"]:focus-visible + label {
    outline: 3px solid rgba(104, 0, 22, 0.34);
    outline-offset: 3px;
    border-color: #680016 !important;
}

.lang-toggle,
.hamburger,
.modal-close {
    min-width: 44px;
    min-height: 44px;
}

.modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.date-grid-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.date-picker-row:focus-within {
    border-color: #680016;
    box-shadow: 0 0 0 3px rgba(104, 0, 22, 0.12);
}

.offer-card .offer-details a,
.offer-card .offer-details button,
.offer-book-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

footer a[aria-label="Facebook"],
footer a[aria-label="Instagram"] {
    min-width: 44px;
    min-height: 44px;
}

.text-on-surface-variant\/70 {
    color: #58413f !important;
}

.min-w-\[300px\] {
    min-width: min(300px, 100%) !important;
}

/* ========== UI QUALITY FOLLOW-UP: SCREENSHOT FIXES ========== */
#hero a.text-primary,
#hero a[class*="text-primary"] {
    color: #680016 !important;
}

#hero a.text-primary:hover,
#hero a[class*="text-primary"]:hover,
#hero a.text-primary:focus-visible,
#hero a[class*="text-primary"]:focus-visible {
    color: #ba1434 !important;
}

#reservierung .lane-recommendation,
#reservierung .lane-rec-text,
#reservierung .lane-rec-text span {
    color: #221a0f !important;
}

#reservierung .lane-rec-text strong {
    color: #10b981 !important;
}

#reservierung .form-toggle-group input[type="radio"]:checked + label {
    background: #ba1434 !important;
    border-color: #ba1434 !important;
    color: #ffffff !important;
}

#reservierung .form-toggle-group input[type="radio"]:checked + label * {
    color: inherit !important;
}

#reservierung .form-radio-tiles input[type="radio"]:checked + label,
#reservierung .form-radio-tiles input[type="radio"]:checked + label .radio-label {
    color: #221a0f !important;
}

#reservierung .form-toggle-group input[type="radio"]:not(:checked) + label,
#reservierung .form-radio-tiles input[type="radio"]:not(:checked) + label,
#reservierung .offer-select-grid input[type="radio"]:not(:checked) + label {
    color: #221a0f !important;
}

.tk-table tr[data-status="red"] {
    opacity: 1 !important;
}

.tk-table tr[data-status="red"] td,
.tk-table tr[data-status="red"] td:nth-child(1),
.tk-table tr[data-status="red"] td:nth-child(2),
.tk-table tr[data-status="red"] td:nth-child(3) {
    color: #f5ece1 !important;
}

.tk-table td span[style*="color: red"],
.tk-table td span[style*="color:red"] {
    color: #ff8a8a !important;
}

/* ========== VERFÜGBARKEITS-LISTE (Stitch-Stil, an Vegas angepasst) ========== */
.avail-dot {
    display: block;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 50%;
}
.avail-dot-green  { background: #2E9E44; }
.avail-dot-gold   { background: #E5A823; }
.avail-dot-red    { background: #C8102E; }
.avail-dot-closed { background: #cbb8a6; }

.avail-card {
    background: #ffffff;
    border: 1px solid rgba(104, 0, 22, 0.16);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(45, 26, 18, 0.06);
}
.avail-head { display: none; }
.avail-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px 24px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(104, 0, 22, 0.11);
    padding: 18px 22px;
    cursor: pointer;
    transition: background .15s ease;
    font: inherit;
}
.avail-row:last-child { border-bottom: 0; }
.avail-row:nth-child(even) { background: rgba(255, 248, 243, 0.72); }
.avail-row:hover { background: #f8eadb; }
.avail-row:focus-visible { position: relative; z-index: 1; outline: 3px solid rgba(186,20,52,0.35); outline-offset: -3px; }
.col-label { display: block; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .055em; color: #725653; margin-bottom: 3px; }
.avail-date { font-size: 1rem; font-weight: 800; color: #221a0f; line-height: 1.4; }
.avail-date.is-today { color: #ba1434; }
.avail-hours,
.avail-info { color: #46342d; font-size: 0.94rem; font-weight: 550; line-height: 1.45; }

.avail-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 12px; border-radius: 9999px;
    font-size: 0.78rem; font-weight: 700; white-space: nowrap;
    border: 1px solid;
}
.avail-pill[data-status="green"]  { background: rgba(46,158,68,0.10);  color: #1f7a32; border-color: rgba(46,158,68,0.30); }
.avail-pill[data-status="gold"]   { background: rgba(229,168,35,0.12); color: #9a6b00; border-color: rgba(229,168,35,0.35); }
.avail-pill[data-status="red"]    { background: rgba(200,16,46,0.10);  color: #9c0c22; border-color: rgba(200,16,46,0.30); }
.avail-pill[data-status="closed"] {
    background: rgba(186,20,52,0.12);
    color: #8b001d;
    border-color: rgba(186,20,52,0.36);
    font-weight: 850;
}

/* Mini-Zeitstrahl: Auslastung über den Tag (Segmente in Ampelfarben, Pausen = beige) */
.avail-timeline {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    width: 100%;
    max-width: 230px;
}
.avail-timeline-bar {
    display: flex;
    flex: 1;
    height: 9px;
    border-radius: 9999px;
    overflow: hidden;
    background: #eadfd2;
    box-shadow: inset 0 0 0 1px rgba(88, 65, 63, 0.16);
}
.avail-seg { display: block; height: 100%; }
.avail-seg + .avail-seg { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.75); }
.avail-seg-green  { background: #2E9E44; }
.avail-seg-gold   { background: #E5A823; }
.avail-seg-red    { background: #C8102E; }
.avail-seg-closed { background: #d8c7b4; }
.avail-timeline-time {
    font-size: 0.64rem;
    font-weight: 750;
    color: #7a6a5f;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.restday-request-note {
    align-items: flex-start;
    margin-top: 0.35rem;
    padding: 0.85rem 0.95rem;
    border-radius: 0.9rem;
    background: rgba(186, 20, 52, 0.08);
    border: 1px solid rgba(186, 20, 52, 0.22);
    color: #680016;
    font-weight: 800;
    line-height: 1.45;
}
.restday-request-note a {
    color: #ba1434;
    font-weight: 850;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.restday-request-note a:hover,
.restday-request-note a:focus-visible {
    color: #680016;
}

.restday-request-note__icon {
    color: #ba1434 !important;
    font-size: 1.35rem !important;
}

.restday-inline-highlight {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin-top: 0.55rem;
    padding: 0.38rem 0.65rem;
    border-radius: 999px;
    background: rgba(186,20,52,0.11);
    border: 1px solid rgba(186,20,52,0.26);
    color: #680016;
    font-weight: 850;
    line-height: 1.25;
}

.feiertag-closed-badge {
    background: rgba(186,20,52,0.14) !important;
    border-color: rgba(186,20,52,0.42) !important;
    color: #8b001d !important;
    font-weight: 850 !important;
    box-shadow: 0 8px 18px rgba(186,20,52,0.08);
}

.vb-hint {
    max-width: 920px;
    margin: 1rem auto 0;
    padding: 1rem 1.15rem;
    gap: 0.85rem;
    border-radius: 1rem;
    font-size: 0.95rem;
    line-height: 1.55;
    box-shadow: 0 10px 24px rgba(34, 26, 15, 0.05);
}
.vb-hint--large {
    font-size: 1.15rem;
    font-weight: 550;
    padding: 1.2rem 1.4rem;
}
.vb-hint--large .vb-hint__icon {
    font-size: 1.6rem;
}

.vb-hint__icon {
    font-size: 1.35rem;
    line-height: 1;
    margin-top: 0.1rem;
}

.vb-hint__lead {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 1.02rem;
}

/* Availability support content: clear hierarchy without stretched empty cards. */
.vb-hint--availability {
    display: flex;
    max-width: none;
    margin: 1rem 0 1.5rem;
    padding: 1.1rem 1.25rem;
    align-items: flex-start;
    background: rgba(186, 20, 52, 0.06);
    border: 1px solid rgba(186, 20, 52, 0.3);
    border-left: 6px solid #ba1434;
    box-shadow: 0 12px 30px rgba(186, 20, 52, 0.1);
}

.vb-hint--availability .vb-hint__icon {
    font-size: 1.5rem;
}

.vb-hint--availability .vb-hint__text {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem 1rem;
    width: 100%;
    min-width: 0;
}

.vb-hint--availability .vb-hint__lead {
    margin: 0;
    color: #680016;
    font-size: 1.12rem;
}

.vb-hint--availability .vb-hint__body {
    grid-column: 1 / -1;
    color: #5a4630;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.6;
}

.vb-hint--availability .restday-inline-highlight {
    align-self: start;
    margin-top: 0;
    white-space: nowrap;
}

.availability-support-grid {
    align-items: start;
}

.important-notes-card,
.holiday-card {
    width: 100%;
}

.holiday-card {
    align-items: stretch;
}

.holiday-card__intro {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}

.holiday-card__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.85rem;
    color: #680016;
    background: rgba(186, 20, 52, 0.1);
}

.holiday-card__intro h4 {
    margin-bottom: 0.35rem;
}

.holiday-card__description {
    max-width: 34rem;
    color: #6f5847;
    font-size: 0.9rem;
    line-height: 1.5;
}

.holiday-card__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
}

.holiday-card__chevron {
    flex: 0 0 auto;
    transition: transform 0.25s ease;
}

#feiertagContent {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 1.25rem;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    background: rgba(34, 26, 15, 0.58);
    backdrop-filter: blur(8px);
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

#feiertagContent.open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
}

.holiday-modal__shell {
    display: flex;
    flex-direction: column;
    width: min(100%, 960px);
    max-height: min(88vh, 820px);
    overflow: hidden;
    border: 1px solid rgba(104,0,22,0.18);
    border-radius: 1.5rem;
    background: #fff8f3;
    box-shadow: 0 30px 90px rgba(34,26,15,0.32);
    transform: translateY(12px) scale(0.985);
    transition: transform 0.2s ease;
}

#feiertagContent.open .holiday-modal__shell {
    transform: translateY(0) scale(1);
}

.holiday-modal__header {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.35rem 1.5rem;
    border-bottom: 1px solid rgba(104,0,22,0.13);
    background: rgba(255,248,243,0.97);
}

.holiday-modal__heading {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    min-width: 0;
}

.holiday-modal__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.85rem;
    color: #680016;
    background: rgba(186,20,52,0.1);
}

.holiday-modal__header h3 {
    margin: 0 0 0.2rem;
    color: #241812;
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.25;
}

.holiday-modal__header p {
    margin: 0;
    color: #6f5847;
    font-size: 0.9rem;
    line-height: 1.45;
}

.holiday-modal__close {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(104,0,22,0.16);
    border-radius: 0.85rem;
    background: #f5e6d3;
    color: #680016;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.holiday-modal__close:hover {
    background: #ecd8c0;
    transform: translateY(-1px);
}

.holiday-modal__close:focus-visible {
    outline: 3px solid rgba(186,20,52,0.28);
    outline-offset: 3px;
}

.holiday-card__scroll {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem 1.25rem 1.4rem;
    scrollbar-width: auto;
    scrollbar-color: #ba1434 #ead8c6;
}

.holiday-card__scroll:focus-visible {
    outline: 3px solid rgba(186,20,52,0.28);
    outline-offset: 4px;
    border-radius: 0.75rem;
}

.holiday-card__scroll::-webkit-scrollbar {
    width: 14px;
}

.holiday-card__scroll::-webkit-scrollbar-track {
    background: #ead8c6;
    border-radius: 999px;
}

.holiday-card__scroll::-webkit-scrollbar-thumb {
    background: #ba1434;
    border: 3px solid #ead8c6;
    border-radius: 999px;
}

.holiday-table-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8rem minmax(13rem, 1fr);
    gap: 1rem;
    margin-bottom: 0.55rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(104,0,22,0.18);
    border-radius: 0.75rem;
    background: #ead8c6;
    box-shadow: 0 5px 12px rgba(45,26,18,0.08);
    color: #522031;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.feiertag-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.45rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid rgba(104,0,22,0.14);
    border-radius: 0.75rem;
    background: rgba(255,255,255,0.88);
    box-shadow: 0 3px 10px rgba(45,26,18,0.035);
}

.feiertag-row:nth-of-type(odd) {
    background: #fffaf6;
}

.feiertag-row:hover {
    background: #f8eadb;
}

.feiertag-row-left {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.feiertag-name {
    color: #241812;
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.35;
}

.feiertag-date-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.28rem 0.5rem;
    border: 1px solid rgba(104,0,22,0.13);
    border-radius: 0.45rem;
    background: #f5e6d3;
    color: #623b20 !important;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.feiertag-info,
.feiertag-closed-badge {
    justify-self: end;
    padding: 0.4rem 0.7rem;
    border-radius: 0.55rem;
    color: #392a24 !important;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.35;
    text-align: right;
}

.feiertag-closed-badge {
    text-transform: uppercase;
    letter-spacing: 0.055em;
    white-space: nowrap;
    color: #8b001d !important;
}

.feiertag-divider {
    display: none;
}

@media (min-width: 768px) {
    #feiertagContent .feiertag-row {
        grid-template-columns: minmax(0, 1fr) 8rem minmax(13rem, 1fr);
        gap: 1rem;
    }

    #feiertagContent .feiertag-row-left {
        display: contents;
    }

    #feiertagContent .feiertag-name {
        grid-column: 1;
        align-self: center;
    }

    #feiertagContent .feiertag-date-tag {
        grid-column: 2;
        align-self: center;
    }

    #feiertagContent .feiertag-info,
    #feiertagContent .feiertag-closed-badge {
        grid-column: 3;
        justify-self: stretch;
        align-self: center;
        text-align: left;
    }
}

.holiday-card .feiertag-name {
    color: #34251b;
}

.holiday-card .feiertag-name.closed {
    color: #9d1531;
}

.holiday-card .feiertag-date-tag {
    color: #8b5f20;
}

.holiday-card .feiertag-info {
    color: #5a4630;
    background: rgba(104, 0, 22, 0.05);
    border-color: rgba(104, 0, 22, 0.12);
}

.holiday-card .feiertag-divider {
    background: rgba(104, 0, 22, 0.09);
}

@media (max-width: 767px) {
    .vb-hint--availability {
        padding: 0.85rem 1rem;
        margin: 0.75rem 0 1.2rem;
    }
    .vb-hint--availability .vb-hint__icon {
        font-size: 1.25rem;
    }
    .vb-hint--availability .vb-hint__text {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
    .vb-hint--availability .vb-hint__lead {
        font-size: 1rem;
    }
    .vb-hint--availability .vb-hint__body {
        grid-column: auto;
        font-size: 0.88rem;
        line-height: 1.5;
    }
    .vb-hint--availability .restday-inline-highlight {
        grid-row: 3;
        white-space: normal;
        font-size: 0.8rem;
        padding: 0.28rem 0.55rem;
        margin-top: 0.35rem;
    }
}

.vb-hint--wide {
    align-items: flex-start;
    padding: 1rem 1.15rem;
    line-height: 1.55;
}

.vb-hint--wide .vb-hint__lead {
    white-space: normal;
}

/* Reservierungs-Hinweise muessen innerhalb der Formularkarte schrumpfen duerfen.
   Ohne min-width: 0 drueckt der Text als Flex-Element die Karte mobil auseinander. */
#reservierung .vb-hint--wide .vb-hint__text {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    #reservierung .vb-hint--wide {
        align-items: flex-start;
        gap: 0.65rem;
    }

    #reservierung .vb-hint--wide .vb-hint__lead {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #reservierung .vb-hint--wide .restday-inline-highlight {
        display: block;
        width: 100%;
        max-width: 100%;
        white-space: normal;
        border-radius: 0.8rem;
        overflow-wrap: anywhere;
    }
}

@media (min-width: 768px) {
    .avail-head {
        display: grid;
        grid-template-columns: 2fr 3fr 3fr 4fr;
        gap: 24px;
        padding: 14px 24px;
        background: #f5e6d3;
        border-bottom: 1px solid rgba(140,113,110,0.22);
    }
    .avail-head > div { font-size: 0.66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #58413f; }
    .avail-row { grid-template-columns: 2fr 3fr 3fr 4fr; align-items: center; padding: 16px 24px; }
    .col-label { display: none; }
}

/* ========== PDF DOWNLOAD BUTTONS CONTRAST FIX ========== */
.offer-card a[href*=".pdf"],
#reservierung a[href*=".pdf"] {
    color: #680016 !important;
}
.offer-card a[href*=".pdf"]:hover,
#reservierung a[href*=".pdf"]:hover {
    color: #ba1434 !important;
}

/* ========== TOGGLE BUTTONS CHECK OVERRIDE ========== */
#reservierung .form-toggle-group input[type="radio"]:checked + label {
    background: #ba1434 !important;
    border-color: #ba1434 !important;
    color: #ffffff !important;
}

/* ========== MOBILE RESTOPTIMIERUNG 2026-06 ========== */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    .mobile-reserve-cta {
        min-height: 48px;
        left: 18px;
        right: 18px;
        bottom: max(10px, env(safe-area-inset-bottom));
        border-radius: 15px;
        font-size: 0.95rem;
    }

    .hero-expand > div {
        padding-top: 1.45rem !important;
        padding-bottom: 1.55rem !important;
    }
    .hero-expand h1 {
        font-size: 2rem !important;
        line-height: 1.12 !important;
        margin-bottom: 0.75rem !important;
    }
    .hero-expand h1 span:last-child {
        font-size: 1.28rem !important;
        margin-top: 0.15rem !important;
    }
    .hero-expand p {
        font-size: 0.92rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1rem !important;
    }
    .hero-expand .inline-block {
        margin-bottom: 0.85rem !important;
        padding: 0.45rem 0.8rem !important;
        font-size: 0.66rem !important;
    }
    .hero-expand .flex.flex-wrap.justify-center.gap-4 {
        gap: 0.65rem !important;
        margin-bottom: 1.1rem !important;
    }
    .hero-expand .flex.flex-wrap.justify-center.gap-4 a {
        min-height: 42px;
        padding: 0.72rem 1rem !important;
        border-radius: 0.8rem !important;
        font-size: 0.88rem !important;
    }
    .hero-expand .flex.flex-wrap.items-center.justify-center {
        gap: 1rem !important;
        margin-bottom: 1.15rem !important;
    }
    .hero-expand .flex.flex-wrap.items-center.justify-center span:first-child {
        font-size: 1.55rem !important;
    }
    .hero-quick {
        gap: 0.65rem !important;
    }
    .hero-quick .hub-status-card {
        min-height: 0;
        padding: 0.85rem 1rem;
        border-radius: 1rem;
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 0.7rem;
        row-gap: 0.05rem;
        align-items: center;
    }
    .hero-quick .hub-status-card .material-symbols-outlined {
        grid-row: 1 / span 2;
        font-size: 1.45rem;
    }
    .hero-quick .hub-status-card strong {
        font-size: 0.94rem;
    }
    .hero-quick .hub-status-card small {
        font-size: 0.76rem;
        line-height: 1.25;
    }

    #zeiten-content,
    #angebote-content,
    #preise-content,
    #gastronomie-content,
    #reservierung,
    #sport-content,
    #jobs-content,
    #kontakt-content {
        padding-top: 2.45rem !important;
        padding-bottom: 2.65rem !important;
    }

    #zeiten-content .text-center,
    #angebote-content .mb-16,
    #preise-content .text-center,
    #gastronomie-content .text-center,
    #reservierung .text-center,
    #jobs-content .text-center,
    #kontakt-content .text-center {
        margin-bottom: 1.7rem !important;
    }

    #zeiten-content h2,
    #angebote-content h2,
    #preise-content h2,
    #gastronomie-content h2,
    #reservierung h2,
    #jobs-content h2,
    #kontakt-content h2 {
        font-size: 2rem !important;
        line-height: 1.12 !important;
        margin-bottom: 0.8rem !important;
    }

    #zeiten-content .grid.md\:grid-cols-2 > div,
    #zeiten-content .grid > .bg-surface-container-low {
        max-width: 100%;
        padding: 1rem !important;
        border-radius: 1.1rem !important;
        min-width: 0;
    }
    #zeiten-content .grid.md\:grid-cols-2 {
        gap: 0.85rem !important;
        margin-bottom: 1.4rem !important;
    }
    #zeiten-content h4 {
        font-size: 1.05rem !important;
        margin-bottom: 0.75rem !important;
    }
    #zeiten-content ul {
        gap: 0.55rem !important;
    }
    #zeiten-content li {
        gap: 0.45rem !important;
        font-size: 0.82rem !important;
        line-height: 1.35 !important;
    }
    #feiertagToggle {
        width: 100% !important;
        padding: 0.75rem 0.9rem !important;
        font-size: 0.68rem !important;
        white-space: normal;
    }
    #feiertagContent.open {
        margin-top: 0 !important;
        max-height: none !important;
    }
    .holiday-card__scroll {
        max-height: none;
        padding: 0.8rem 0.75rem 1rem;
    }
    .holiday-table-head {
        display: none;
    }
    #feiertagContent {
        padding: 0.65rem;
    }
    .holiday-modal__shell {
        max-height: 94vh;
        border-radius: 1.15rem;
    }
    .holiday-modal__header {
        padding: 1rem;
    }
    .holiday-modal__header h3 {
        font-size: 1.12rem;
    }
    .holiday-modal__header p {
        font-size: 0.8rem;
    }
    .holiday-modal__icon {
        width: 2.35rem;
        height: 2.35rem;
        font-size: 1.25rem;
    }
    .holiday-modal__close {
        width: 2.4rem;
        height: 2.4rem;
    }
    .feiertag-row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.55rem !important;
        padding: 0.75rem !important;
    }
    .feiertag-info,
    .feiertag-closed-badge {
        justify-self: start;
        text-align: left !important;
        white-space: normal !important;
        font-size: 0.82rem !important;
    }
    .feiertag-name {
        font-size: 0.94rem !important;
    }

    .avail-card {
        border-radius: 1rem;
    }
    .avail-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.3rem 0.65rem;
        padding: 0.68rem 0.75rem;
    }
    .avail-row > div:nth-child(1) {
        grid-column: 1;
    }
    .avail-row > div:nth-child(2),
    .avail-row > div:nth-child(4) {
        grid-column: 1 / -1;
        display: flex;
        gap: 0.4rem;
        align-items: baseline;
        min-width: 0;
    }
    .avail-row > div:nth-child(3) {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
    }
    .avail-row > div:nth-child(1) .col-label,
    .avail-row > div:nth-child(3) .col-label {
        display: none;
    }
    .avail-date {
        font-size: 0.94rem;
    }
    .avail-hours,
    .avail-info {
        font-size: 0.82rem;
        line-height: 1.4;
    }
    .avail-pill {
        padding: 0.22rem 0.55rem;
        font-size: 0.72rem;
        gap: 0.35rem;
    }
    .avail-dot {
        width: 0.55rem;
        height: 0.55rem;
    }
    .avail-timeline {
        max-width: 150px;
        margin-top: 5px;
        margin-left: auto;
        gap: 4px;
    }
    .avail-timeline-bar { height: 8px; }
    .avail-timeline-time { font-size: 0.58rem; }
    .vb-hint {
        padding: 0.9rem 0.95rem;
        font-size: 0.88rem;
        line-height: 1.5;
    }
    .vb-hint__icon {
        font-size: 1.2rem;
    }
    .vb-hint__lead {
        font-size: 0.95rem;
    }
    .vb-hint--large {
        font-size: 1.02rem;
        padding: 1rem 1.1rem;
    }
    .vb-hint--large .vb-hint__icon {
        font-size: 1.35rem;
    }

    #angebote-content .grid {
        gap: 0.95rem !important;
        margin-bottom: 1.35rem !important;
    }
    #angebote-content .offer-card {
        padding: 1rem !important;
        border-radius: 1.15rem !important;
    }
    #angebote-content .offer-card > span:first-child {
        font-size: 1.65rem !important;
        margin-bottom: 0.55rem !important;
    }
    #angebote-content .offer-card h3 {
        font-size: 1.22rem !important;
        margin-bottom: 0.35rem !important;
    }
    #angebote-content .offer-card p {
        font-size: 0.82rem !important;
        line-height: 1.35 !important;
        margin-bottom: 0.75rem !important;
    }
    #angebote-content .offer-benefits {
        gap: 0.32rem !important;
    }
    #angebote-content .offer-benefits .ob {
        font-size: 0.76rem !important;
        line-height: 1.28 !important;
        gap: 0.4rem !important;
    }
    #angebote-content .offer-global-warning {
        align-items: flex-start !important;
        margin: -0.65rem 0 1.2rem !important;
        padding: 0.95rem !important;
        gap: 0.7rem !important;
    }
    #angebote-content .offer-warning-mark {
        width: 1.7rem !important;
        height: 1.7rem !important;
        font-size: 1rem !important;
    }
    #angebote-content .offer-global-warning p {
        font-size: 0.88rem !important;
        line-height: 1.35 !important;
    }
    #angebote-content .offer-condition {
        font-size: 0.68rem !important;
        line-height: 1.32 !important;
        padding-top: 0.48rem !important;
        margin-top: 0.55rem !important;
    }
    #angebote-content .offer-actions {
        margin-top: 0.8rem !important;
        gap: 0.55rem !important;
    }
    #angebote-content .offer-actions-row {
        gap: 0.55rem !important;
    }
    #angebote-content .offer-toggle,
    #angebote-content .offer-book-btn,
    #angebote-content .offer-pdf {
        min-height: 38px;
        font-size: 0.68rem !important;
        padding: 0.55rem 0.7rem !important;
        border-radius: 0.65rem !important;
    }
    #angebote-content .bg-\[\#ba1a1a\]\/10 {
        padding: 1rem !important;
        border-radius: 1rem !important;
        gap: 0.65rem !important;
    }

    #reservierung .booking-form-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem 0.75rem !important;
        border-radius: 1.25rem !important;
        overflow: hidden;
    }
    #reservierung .booking-form-wrapper > .absolute {
        display: none !important;
    }
    #reservierung .booking-form-wrapper > .text-center {
        margin-bottom: 1.25rem !important;
        padding-bottom: 1rem !important;
    }
    #reservierung .booking-form-wrapper h3 {
        font-size: 1.45rem !important;
    }
    #reservierung .booking-form {
        gap: 1.55rem !important;
        width: 100%;
    }
    #reservierung .form-group-full,
    #reservierung .form-row,
    #reservierung .form-group {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    #reservierung .form-row {
        gap: 0.75rem !important;
    }
    #reservierung h4 {
        font-size: 1.02rem !important;
        padding-bottom: 0.55rem !important;
        margin-bottom: 0.35rem !important;
    }
    #reservierung .contact-form label {
        font-size: 0.68rem !important;
        letter-spacing: 0.04em !important;
    }
    #reservierung .contact-form input,
    #reservierung .contact-form select,
    #reservierung .contact-form textarea {
        min-height: 42px;
        padding: 0.62rem 0.68rem !important;
        border-radius: 0.75rem !important;
        font-size: 0.82rem !important;
    }
    #reservierung .date-picker-row,
    #sportModal .date-picker-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.35rem !important;
    }
    #reservierung .date-segment,
    #sportModal .date-segment {
        padding: 0.62rem 0.35rem !important;
    }
    #reservierung .date-seg-value,
    #sportModal .date-seg-value {
        font-size: 0.8rem !important;
    }
    #reservierung .offer-select-grid {
        gap: 0.75rem !important;
    }
    #reservierung .offer-select-card {
        min-height: 10rem;
        padding: 0.9rem 0.55rem !important;
        gap: 0.35rem;
        border-radius: 1rem !important;
    }
    #reservierung .offer-select-icon {
        font-size: 1.55rem !important;
        margin-bottom: 0.3rem !important;
    }
    #reservierung .offer-select-name {
        width: 100%;
        min-width: 0;
        font-size: 0.76rem !important;
        line-height: 1.25 !important;
        margin-bottom: 0.25rem !important;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }
    #reservierung .offer-select-price {
        font-size: 0.7rem !important;
        line-height: 1.25 !important;
    }
    #reservierung .offer-detail-link {
        min-height: 34px;
        margin-top: 0.55rem;
        padding: 0.42rem 0.7rem;
        font-size: 0.68rem;
    }
    #reservierung .form-toggle-group label,
    #reservierung .form-radio-tiles label,
    #reservierung .toggle-btn {
        min-height: 40px;
        padding: 0.62rem 0.65rem !important;
        border-radius: 0.8rem !important;
        font-size: 0.82rem !important;
    }
    #reservierung .form-consent-check {
        width: 100% !important;
        max-width: 100% !important;
        gap: 0.65rem !important;
        padding: 0.8rem !important;
        margin-bottom: 0.75rem !important;
        border-radius: 0.85rem !important;
    }
    #reservierung .form-consent-check .consent-label {
        font-size: 0.78rem !important;
        line-height: 1.38 !important;
    }

    #gastronomie-content .grid {
        gap: 1rem !important;
    }
    #gastronomie-content img {
        max-height: 220px;
        object-fit: cover;
        border-radius: 1.2rem !important;
    }
    #gastronomie-content .space-y-8 {
        gap: 0.9rem !important;
    }
    #gastronomie-content .bg-surface-container-highest,
    #gastronomie-content .bg-surface {
        padding: 1rem !important;
        border-radius: 1rem !important;
    }
    #gastronomie-content h3 {
        font-size: 1.25rem !important;
        margin-bottom: 0.5rem !important;
    }
    #gastronomie-content p {
        font-size: 0.84rem !important;
        line-height: 1.45 !important;
    }
    #gastronomie-content a.bg-surface {
        gap: 0.8rem !important;
    }

    #sport-content .grid {
        gap: 0.8rem !important;
    }
    #sport-content .bg-surface {
        padding: 0.95rem !important;
        border-radius: 1rem !important;
    }
    #sport-content h3 {
        font-size: 1rem !important;
    }
    #sport-content ul {
        line-height: 1.35 !important;
    }

    #jobs-content .bg-surface-container-highest {
        padding: 1rem !important;
        border-radius: 1.15rem !important;
    }
    #jobs-content .flex.flex-col.md\:flex-row {
        gap: 1rem !important;
    }
    #jobs-content h3 {
        font-size: 1.35rem !important;
    }
    #jobs-content ul {
        gap: 0.55rem !important;
        font-size: 0.86rem !important;
    }
    #jobs-content a {
        min-height: 42px;
        padding: 0.7rem 1rem !important;
    }

    #kontakt-content .grid {
        gap: 1rem !important;
        margin-bottom: 1.35rem !important;
    }
    #kontakt-content .space-y-6 {
        gap: 0.8rem !important;
    }
    #kontakt-content .space-y-6 > div {
        flex-direction: row !important;
        padding: 1rem !important;
        border-radius: 1rem !important;
        gap: 0.8rem !important;
        align-items: flex-start !important;
    }
    #kontakt-content .space-y-6 > div > span:first-child {
        font-size: 1.55rem !important;
        width: 2rem;
        text-align: center;
    }
    #kontakt-content strong {
        font-size: 1.05rem !important;
        margin-bottom: 0.35rem !important;
    }
    #kontakt-content .h-\[500px\] {
        height: 320px !important;
        border-radius: 1.15rem !important;
    }
    #kontakt-content #mapsConsentPlaceholder {
        padding: 1rem !important;
    }
    #kontakt-content #mapsConsentPlaceholder span {
        font-size: 2.4rem !important;
        margin-bottom: 0.8rem !important;
    }
    #kontakt-content #mapsConsentPlaceholder p {
        margin-bottom: 1rem !important;
        font-size: 0.78rem !important;
    }
    #kontakt-content .bg-primary\/5.border {
        padding: 1rem !important;
        border-radius: 1.15rem !important;
    }
    #kontakt-content .bg-primary\/5.border h3 {
        font-size: 1.35rem !important;
    }
    #kontakt-content .bg-primary\/5.border a {
        min-height: 42px;
        padding: 0.7rem 1rem !important;
    }

    /* Form Availability Indicator Mobile Optimization */
    .form-avail-indicator {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
    }
    .form-avail-inner {
        flex-direction: column !important;
        padding: 12px 14px !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    .form-avail-icon {
        font-size: 1.4rem !important;
    }
    .form-avail-text {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 0.84rem !important;
        overflow: hidden !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    .form-avail-text .avail-pill {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        font-size: 10px !important;
    }
    .form-avail-text .avail-message {
        font-size: 0.84rem !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    .form-avail-text .avail-meta {
        font-size: 0.76rem !important;
    }
    .avail-use-next {
        white-space: normal !important;
        text-align: center !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 0.76rem !important;
        padding: 8px 10px !important;
    }
}

/* Auf echten Handybreiten brauchen lange Angebotsnamen die volle Zeilenbreite.
   Die Karten bleiben gross, werden aber nicht mehr in zwei enge Spalten gequetscht. */
@media (max-width: 480px) {
    #reservierung .offer-select-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.8rem !important;
    }

    #reservierung .offer-select-card {
        width: 100%;
        min-width: 0;
        min-height: 9rem;
        padding: 1rem 0.9rem !important;
    }

    #reservierung .offer-select-name {
        font-size: 0.84rem !important;
    }

    #reservierung .offer-select-price {
        font-size: 0.76rem !important;
    }
}

@media (max-width: 380px) {
    #reservierung .date-segment,
    #sportModal .date-segment {
        padding-inline: 0.28rem !important;
    }
    #reservierung .date-seg-value,
    #sportModal .date-seg-value {
        font-size: 0.76rem !important;
    }
}

/* Verfügbarkeits-Status: Pill + neutraler (Ruhetag-)Zustand */
.avail-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 6px;
    background: rgba(255,255,255,.14);
}
.avail-status-free .avail-pill { background:#10b981; color:#04150d; }
.avail-status-few  .avail-pill { background:#f59e0b; color:#1c1303; }
.avail-status-full .avail-pill { background:#ef4444; color:#fff; }
.avail-status-arr  { background: rgba(186,20,52,.10); border-color: rgba(186,20,52,.34); }
.avail-status-arr  .avail-pill { background:#ba1434; color:#ffffff; }