/* ─── SmartZeit Global Styles ─────────────────────────────── */

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--sz-font-sans);
    background: var(--sz-bg);
    color: var(--sz-text);
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

/* Smooth anchor scrolling offset for fixed AppBar */
:target {
    scroll-margin-top: 88px;
}

/* ─── Landing Navbar (Mobile-First) ───────────────────────── */

.sz-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1300;
    height: 72px;
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid var(--sz-border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
}

.sz-nav-logo {
    text-decoration: none;
    flex-shrink: 0;
}

.sz-nav-logo-text {
    font-weight: 800;
    color: var(--sz-primary);
    letter-spacing: -0.5px;
    font-size: 1.4rem;
    font-family: 'Inter', sans-serif;
}

.sz-nav-logo-text > span {
    color: var(--sz-text);
}

.sz-nav-spacer {
    flex: 1;
}

.sz-nav-link {
    font-weight: 500;
    color: var(--sz-text);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.95rem;
}

.sz-nav-link:hover {
    background: rgba(0, 0, 0, 0.04);
}

.sz-nav-cta {
    background: var(--sz-primary);
    color: var(--sz-text-on-primary) !important;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 20px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    flex-shrink: 0;
}

.sz-nav-cta:hover {
    background: var(--sz-primary-hover);
}

.sz-nav-lang {
    border-radius: 20px;
    min-width: 52px;
    font-weight: 700;
    font-size: 0.8rem;
    border: 1px solid var(--sz-border);
    color: var(--sz-text);
    padding: 4px 12px;
    background: transparent;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    flex-shrink: 0;
}

.sz-nav-lang:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: var(--sz-border-strong);
}

/* Hamburger-Toggle (CSS-only via Checkbox) */
.sz-nav-toggle {
    display: none; /* Checkbox versteckt */
}

.sz-nav-burger {
    display: none; /* Default mobile-only — wird per Media Query auf <920px sichtbar */
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.sz-nav-burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--sz-text);
    margin: 5px 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Desktop-Navigation (alles in einer Zeile) */
.sz-nav-menu {
    display: flex;
    gap: 4px;
    align-items: center;
}

.sz-nav-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* ── Mobile (≤ 920px): Drawer-Menü ─────────────────────── */
@media (max-width: 920px) {
    .sz-nav-burger {
        display: block;
    }

    .sz-nav-spacer {
        display: none; /* Spacer wird vom Burger übernommen */
    }

    /* Menu + Actions in den Drawer verschoben */
    .sz-nav-menu,
    .sz-nav-actions {
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.99);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--sz-border);
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 16px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease, padding 0.25s ease;
        padding-top: 0;
        padding-bottom: 0;
    }

    .sz-nav-actions {
        top: auto;
        position: static;
        border-bottom: none;
        max-height: none;
        overflow: visible;
        padding: 0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Drawer öffnen wenn Toggle aktiv */
    .sz-nav-toggle:checked ~ .sz-nav-menu {
        max-height: 70vh;
        padding-top: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--sz-border);
        overflow-y: auto;
    }

    .sz-nav-toggle:checked ~ .sz-nav-menu .sz-nav-actions {
        display: flex;
    }

    /* Im Drawer: Links nehmen volle Breite */
    .sz-nav-menu .sz-nav-link {
        padding: 12px 16px;
        font-size: 1rem;
        border-radius: 10px;
        text-align: left;
    }

    .sz-nav-menu .sz-nav-cta {
        text-align: center;
        padding: 12px 24px;
        flex: 1 1 100%;
    }

    .sz-nav-menu .sz-nav-lang {
        flex: 0 0 auto;
    }

    /* Burger-Animation: zu X */
    .sz-nav-toggle:checked ~ .sz-nav-burger span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .sz-nav-toggle:checked ~ .sz-nav-burger span:nth-child(2) {
        opacity: 0;
    }
    .sz-nav-toggle:checked ~ .sz-nav-burger span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

/* MudMainContent: horizontales Padding entfernen, vertikales MudBlazor-intern lassen */
.mud-main-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ─── Booking Public Layout (UX-A1) ───────────────────────── */
/* Reduzierter Header für die öffentliche Buchungsstrecke ohne Marketing-Nav.
   Nur SmartZeit-Logo links + Sprach-Toggle rechts. */

.sz-booking-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    background: var(--sz-bg);
    border-bottom: 1px solid var(--sz-border);
    z-index: 1300;
}

.sz-booking-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.sz-booking-lang {
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid var(--sz-border);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--sz-text);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sz-booking-lang:hover {
    border-color: var(--sz-primary);
}

.sz-booking-footer {
    padding: 20px 24px;
    text-align: center;
    font-size: 0.78rem;
    color: var(--sz-text-secondary);
    border-top: 1px solid var(--sz-border);
    background: var(--sz-bg);
}

.sz-booking-footer a {
    color: var(--sz-text-secondary);
    text-decoration: underline;
}

.sz-booking-footer a:hover {
    color: var(--sz-text);
}

/* ─── Booking Mobile-Anpassungen (UX-A5) ──────────────────── */
/* Auf Mobile-Viewports (<=640px): Slot-Grid auf 3 Spalten mit
   ausreichend grossem Touch-Target (>=44px Apple HIG / 48dp Material).
   Inputs auf 16px damit iOS Safari beim Fokus NICHT in den Viewport
   reinzoomt (Standard-Workaround analog Keycloak-Theme).
   ~70% der Endkunden-Buchungen kommen vom Smartphone. */

@media (max-width: 640px) {
    /* Slot-Grid: 3 Spalten statt auto-fill, grössere Buttons. */
    .booking-slot-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    .booking-slot-grid > a {
        padding: 12px 6px !important;
        min-height: 44px !important;
    }

    /* Inputs: 16px Schriftgrösse gegen iOS-Auto-Zoom. */
    .booking-form input[type="text"],
    .booking-form input[type="email"],
    .booking-form input[type="tel"],
    .booking-form input[type="password"],
    .booking-form textarea {
        font-size: 1rem !important;
    }
}

/* ─── Typography helpers ──────────────────────────────────── */
.text-center {
    text-align: center;
}

/* ─── Utility spacing ─────────────────────────────────────── */
.mt-4  { margin-top: 16px; }
.mt-8  { margin-top: 32px; }
.mt-12 { margin-top: 48px; }
.mb-4  { margin-bottom: 16px; }
.mx-1  { margin-left: 4px; margin-right: 4px; }
.mx-2  { margin-left: 8px; margin-right: 8px; }
.ml-2  { margin-left: 8px; }

/* ─── Focus ring (WCAG 2.2 AA) ───────────────────────────── */
:focus-visible {
    outline: 3px solid var(--sz-focus-ring);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ─── Blazor error boundary ──────────────────────────────── */
#blazor-error-ui {
    display: none;
}

.blazor-error-boundary {
    background: var(--sz-error);
    padding: 1rem;
    color: var(--sz-text-on-primary);
    border-radius: 8px;
}

.blazor-error-boundary::after {
    content: "Ein Fehler ist aufgetreten.";
}

/* ─── SmartZeit Buttons ───────────────────────────────────── */

/* Basis für alle sz-btn */
.sz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: transform 80ms ease, box-shadow 150ms ease, background 150ms ease, opacity 150ms ease;
    user-select: none;
    text-decoration: none;
    white-space: nowrap;
}

.sz-btn:active {
    transform: scale(0.97);
}

/* Primär – gefüllt */
.sz-btn-primary {
    background: var(--sz-primary);
    color: var(--sz-text-on-primary);
    border-radius: var(--sz-radius);
    padding: 14px 36px;
    box-shadow: 0 4px 24px rgba(5,150,105,0.25);
}
.sz-btn-primary:hover {
    background: var(--sz-primary-hover);
    box-shadow: 0 6px 28px rgba(5,150,105,0.35);
}
.sz-btn-primary:active {
    background: var(--sz-primary-active);
    box-shadow: 0 2px 12px rgba(5,150,105,0.2);
}

/* Sekundär – transparent mit Rahmen */
.sz-btn-outline {
    background: transparent;
    color: var(--sz-text);
    border: 2px solid var(--sz-border);
    border-radius: var(--sz-radius);
    padding: 12px 34px; /* 2px weniger wegen border */
}
.sz-btn-outline:hover {
    background: rgba(0,0,0,0.04);
    border-color: var(--sz-border-strong);
}
.sz-btn-outline:active {
    background: rgba(0,0,0,0.08);
}

/* Outline hell – auf dunklem/farbigem Hintergrund */
.sz-btn-outline-light {
    background: transparent;
    color: var(--sz-text-on-primary);
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 12px;
    padding: 12px 34px;
}
.sz-btn-outline-light:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.7);
}
.sz-btn-outline-light:active {
    background: rgba(255,255,255,0.18);
}

/* Sekundärfarbe – auf Primary-Hintergrund (CTA-Section, Team-Pricing) */
.sz-btn-peach {
    background: var(--sz-secondary);
    color: var(--sz-text);
    border-radius: var(--sz-radius);
    padding: 14px 36px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}
.sz-btn-peach:hover {
    background: var(--sz-secondary-hover);
    box-shadow: 0 6px 28px rgba(0,0,0,0.2);
}
.sz-btn-peach:active {
    background: #B45309; /* Amber-700: Active/Pressed */
}

/* Weiss – auf Primary-/Grün-Hintergrund (Team-Card, CTA-Section) */
.sz-btn-white {
    background: #FFFFFF;
    color: var(--sz-primary);
    border-radius: var(--sz-radius);
    padding: 14px 36px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    font-weight: 700;
}
.sz-btn-white:hover {
    background: #F0FDF9;
    box-shadow: 0 6px 28px rgba(0,0,0,0.2);
}
.sz-btn-white:active {
    background: #D1FAE5;
}

/* Vollbreite für Pricing-Cards */
.sz-btn-full {
    display: flex;
    width: 100%;
    padding: 13px 12px;
    margin-top: auto;  /* klebt am unteren Rand der Flex-Card */
}

/* Large-Variante (Hero, CTA-Section) */
.sz-btn-lg {
    padding: 16px 40px;
}

/* ─── PricingCard Komponente ──────────────────────────────────
   Pixel-genaue Ausrichtung via Fixed-Height-Slots:
   badge-slot (48px) + plan-label + original-slot (36px)
   + main-price + note-slot (44px) = gleiche Divider-Y auf allen Karten */

.sz-pc {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 20px;
    padding: 40px;
    background: var(--sz-surface);
    border: 1px solid var(--sz-border);
    position: relative;
    overflow: hidden;
}

.sz-pc--pop {
    background: var(--sz-primary);
    border: none;
    box-shadow: 0 20px 60px rgba(5,150,105,0.35), 0 0 0 3px rgba(5,150,105,0.5);
}

.sz-pc--dark {
    background: var(--sz-dark);
    border: none;
}

/* Fixed 48px: Badge-Chip oder Leerraum */
.sz-pc-badge-slot {
    height: 48px;
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
}

.sz-pc-badge-pill {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    background: var(--sz-primary-light);
    color: var(--sz-primary);
    white-space: nowrap;
}
.sz-pc--pop  .sz-pc-badge-pill { background: rgba(255,255,255,0.2); color: white; }
.sz-pc--dark .sz-pc-badge-pill { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); }

.sz-pc-plan {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sz-text-secondary);
    margin: 0 0 8px;
    flex-shrink: 0;
}
.sz-pc--pop  .sz-pc-plan { color: rgba(255,255,255,0.65); }
.sz-pc--dark .sz-pc-plan { color: rgba(255,255,255,0.45); }

/* Fixed 36px: Strikethrough-Preis oder Leerraum */
.sz-pc-original-slot {
    height: 36px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.sz-pc-original {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--sz-text-secondary);
    text-decoration: line-through;
    line-height: 1;
}
.sz-pc--pop  .sz-pc-original { color: rgba(255,255,255,0.35); }

/* Hauptpreis */
.sz-pc-main-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
    flex-shrink: 0;
}
.sz-pc-main {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--sz-primary);
    line-height: 1;
}
.sz-pc--pop  .sz-pc-main { color: white; }
.sz-pc--dark .sz-pc-main { color: white; }

.sz-pc-unit {
    font-size: 0.9rem;
    color: var(--sz-text-secondary);
}
.sz-pc--pop  .sz-pc-unit { color: rgba(255,255,255,0.65); }
.sz-pc--dark .sz-pc-unit { color: rgba(255,255,255,0.45); }

/* Fixed 44px: Rabatt-Hinweis oder Leerraum */
.sz-pc-note-slot {
    height: 44px;
    display: flex;
    align-items: flex-start;
    padding-top: 4px;
    flex-shrink: 0;
}
.sz-pc-note {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sz-success);
    margin: 0;
    line-height: 1.4;
}
.sz-pc--pop  .sz-pc-note { color: rgba(255,255,255,0.85); }
.sz-pc--dark .sz-pc-note { color: rgba(255,255,255,0.45); font-weight: 400; font-size: 0.9rem; }

/* Trennlinie */
.sz-pc-divider {
    border: none;
    border-top: 1px solid var(--sz-border);
    margin: 0 0 24px;
    flex-shrink: 0;
}
.sz-pc--pop  .sz-pc-divider { border-top-color: rgba(255,255,255,0.2); }
.sz-pc--dark .sz-pc-divider { border-top-color: rgba(255,255,255,0.1); }

/* Feature-Liste */
.sz-pc-features {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}
.sz-pc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 0.95rem;
    color: var(--sz-muted);
}
.sz-pc--pop  .sz-pc-item { color: rgba(255,255,255,0.9); }
.sz-pc--dark .sz-pc-item { color: rgba(255,255,255,0.8); }

.sz-pc-check {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--sz-success);
}
.sz-pc--pop  .sz-pc-check { color: rgba(255,255,255,0.9); }
.sz-pc--dark .sz-pc-check { color: var(--sz-tertiary); }

/* ─── Pricing Cards: Button immer unten ──────────────────── */
.sz-pricing-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ─── Scrollbar (optional, minimal style) ────────────────── */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #F3F4F6;
}

::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9CA3AF;
}

/* ─── MudBlazor Overrides ─────────────────────────────────────
   MudTabs rendert Labels per Default in UPPERCASE (Material-Design-
   Konvention). Für SmartZeit wirkt das mit dem Inter-Font und
   deutschen Texten ("BETRIEBSDATEN", "OEFFNUNGSZEITEN") zu hart;
   wir behalten die Original-Case wie sie im Code definiert ist. */
.mud-tab {
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* ─── Settings → Form-Frame (Betriebsdaten + Lokalisierung) ───
   Weisser Container mit Border + Padding analog zur Hours-Tabelle damit
   alle 3 Tabs visuell konsistent sind (gleicher "Card-Look"). MudGrid darin
   bekommt das normale Spacing, der Frame nimmt den Padding aussenrum. */
.sz-form-frame {
    border: 1px solid var(--sz-border);
    border-radius: var(--sz-radius);
    background: var(--sz-surface);
    padding: 24px;
}

/* ─── Settings → Öffnungszeiten Tabellen-Layout ───────────────
   Spalten: Tag (1fr) | Status (1.5fr) | Von (1.5fr) | Bis (1.5fr).
   Header oben, dünne Trennlinie zwischen Zeilen. Geschlossene Tage
   leicht ausgegraut. */
.sz-hours-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sz-border);
    border-radius: var(--sz-radius);
    overflow: hidden;
    background: var(--sz-surface);
}

/* Spalten: Tag (120px) | Status (180px) | Von (160px) | Bis (160px) | Whitespace (1fr).
   Status-Spalte fix damit Status und Von eng zusammen sitzen — semantisch gehören
   sie zusammen ("Tag offen von X bis Y"). Mit Status:1fr klafft sonst eine ~500px-Lücke
   zwischen Toggle und Von-Picker. Trailing 1fr nimmt den Restplatz und bläht die
   Tabelle nicht künstlich auf. */
.sz-hours-row {
    display: grid;
    grid-template-columns: 120px 180px 160px 160px 1fr;
    gap: 24px;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--sz-surface-elevated);
    transition: background 120ms ease;
}

.sz-hours-row:last-child {
    border-bottom: none;
}

.sz-hours-row-closed {
    background: var(--sz-surface-elevated);
}

.sz-hours-row-closed .sz-hours-col-day {
    color: var(--sz-text-secondary);
}

/* Header in sentence case + hierarchisch sekundaer (kleiner + dezenter)
   damit die Tagesnamen-Zeile primaer wirkt. */
.sz-hours-header {
    background: var(--sz-surface-elevated);
    border-bottom: 1px solid var(--sz-border);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--sz-text-secondary);
    letter-spacing: 0;
}

.sz-hours-col-day {
    font-weight: 600;
    color: var(--sz-text);
    font-size: 0.95rem;
}

.sz-hours-col-time {
    position: relative;
}

.sz-hours-dash {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--sz-border);
    font-size: 1.5rem;
    font-weight: 300;
    pointer-events: none;
}

@media (max-width: 720px) {
    .sz-hours-row {
        grid-template-columns: 80px 1fr 1fr;
        gap: 12px;
        padding: 12px;
    }
    /* Header und Time-Spalten auf Mobile zu eng — Status + Bis bleiben sichtbar,
       Header wird ausgeblendet (zu wenig Platz für 4 Spalten-Labels). */
    .sz-hours-header {
        display: none;
    }
    /* Tag-Spalte schmaler auf Mobile — Tag-Name auf 2 Zeichen abkürzen geht
       nicht direkt im CSS, daher Sentence-Case-Lang-Namen abgeschnitten via
       Mehrzeilen-Wrap. Falls Wrap stört, können wir per Razor-Expression
       die Kurz-Variante (Mo/Di/...) wählen. */
}

/* ─── Settings Section Cards ──────────────────────────────────────────────── */
.sz-settings-card {
    border: 1px solid var(--sz-border);
    border-radius: var(--sz-radius);
    overflow: hidden;
    background: var(--sz-surface);
    margin-bottom: 24px;
}
.sz-settings-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    background: var(--sz-surface-elevated);
    border-bottom: 1px solid var(--sz-border);
    flex-wrap: wrap;
}
.sz-settings-card-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--sz-text);
}
.sz-settings-card-section-header {
    padding: 8px 20px;
    background: var(--sz-surface-elevated);
    border-top: 1px solid var(--sz-border);
    border-bottom: 1px solid var(--sz-border);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sz-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.sz-settings-card .sz-hours-table {
    border: none;
    border-radius: 0;
    background: transparent;
}

/* --- Dashboard KPI-Karten (Decision 1 der Card-Actions-Spec 2026-05-11) -- */
/* Karte als ganze klickbar via <a>-Wrapper. CSS-Reset damit der Anchor
   visuell wie ein <div> wirkt (kein Underline, Standard-Textfarbe).
   Hover-State erhöht Border-Kontrast minimal via MudBlazor-Theme-Variable.
   Focus-Visible-Outline für Keyboard-Navigation. */
.sz-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--sz-radius);
    transition: border-color 120ms ease, box-shadow 120ms ease;
    /* MudItem mit MudGrid setzt height:100% via Default-CSS damit
       Karten gleicher Reihe gleich hoch sind. Anchor muss das weiterleiten
       sonst kollabiert die height-Kette an dieser Stelle. */
    height: 100%;
}

/* MudCard hat per Default display:flex und KEINE width:100% - sie ist
   intrinsisch nur so breit wie ihr Inhalt + Padding. Direkt unter MudItem
   gerendert greift die Mud-Grid-Cell-Stretching-Logik und die Karte füllt
   den Container aus. Mit <a> dazwischen ist diese Kette gebrochen - daher
   Karten mit weniger Inhalt (z.B. Dienstleistungen: nur Header + '1', kein
   Subtext) wurden visuell schmaler als die anderen.
   width:100% damit alle Karten gleiche Breite haben, height:100% damit
   die Karten in derselben Reihe gleich hoch bleiben (kommt vorher schon
   über MudCard-Style="height:100%"). */
.sz-card-link > .mud-card {
    width: 100%;
}

.sz-card-link:hover .mud-card,
.sz-card-link:focus-visible .mud-card {
    border-color: var(--mud-palette-lines-inputs);
}

.sz-card-link:focus-visible {
    outline: 2px solid var(--sz-focus-ring);
    outline-offset: 2px;
}

/* --- Desktop Logo-Position (Decision 5 der Card-Actions-Spec 2026-05-11) -- */
/* MudToolbar-Default-Padding ist auf >=600px 24px links/rechts. Das ist
   sinnvoll wenn der Hamburger links sichtbar ist (auf Mobile). Auf Desktop
   blenden wir den Hamburger via MudHidden Breakpoint=MdAndUp aus - dann ist
   das 24px-Padding aber 'Hamburger-Geist'-Whitespace zwischen Sidebar-
   Trenner und SmartZeit-Logo. Override auf 16px reduziert das auf einen
   sinnvollen Atemabstand ohne dass Logo am Trenner klebt. Erst ab 960px
   (Md - identisch zur MudDrawer Breakpoint-Konfiguration in MerchantNav)
   damit Mobile-Layout unveraendert bleibt. */
@media (min-width: 960px) {
    .mud-layout > .mud-appbar > .mud-toolbar.mud-toolbar-gutters {
        padding-left: 16px;
    }
}

/* ─── Setup-Wizard (Stripe-Style Fullscreen) ─────────────────
   WizardLayout rendert nur den Body — alles drumherum (Topbar, Footer,
   2-Spalten-Grid) liegt hier. Inspiriert vom Stripe-Sandbox-Onboarding:
   maximaler Fokus, Logo links, dünner Progress-Bar rechts, Form links
   im Body, Live-Preview rechts, Back/Next-Buttons unten. */
.sz-wizard-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--sz-surface-elevated);
}

.sz-wizard-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 40px;
}

.sz-wizard-logo {
    height: 28px;
    display: block;
}

/* Dünner Progress-Bar oben rechts, fills nach (_step+1)/3.
   Single-Bar statt 3 Segmenten weil Stripe's Vorbild minimalistisch
   ist und der Step-Title links im Body die '_x_ von 3'-Info trägt. */
.sz-wizard-progress {
    width: 200px;
    height: 4px;
    border-radius: 2px;
    background: var(--sz-border);
    overflow: hidden;
}

.sz-wizard-progress-fill {
    height: 100%;
    background: var(--sz-primary);
    border-radius: 2px;
    transition: width 280ms ease;
}

.sz-wizard-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 40px;
}

.sz-wizard-content {
    width: 100%;
    max-width: 1180px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 80px;
    align-items: center;
}

.sz-wizard-form {
    min-width: 0; /* Grid-Min-Content-Fix damit MudTextField nicht überläuft */
}

.sz-wizard-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--sz-text);
    margin: 0 0 8px;
    line-height: 1.2;
}

.sz-wizard-subtitle {
    color: var(--sz-text-secondary);
    margin: 0 0 28px;
    line-height: 1.5;
}

/* Step-3 Duration/Price nebeneinander */
.sz-wizard-service-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Hours-Tabelle in der schmaleren Wizard-Linksspalte: Settings-Version
   hat 4 Fix-Spalten + 1fr-Spacer (~620px), das passt nicht in die ~500px
   breite Wizard-Spalte und die Bis-Spalte würde durch overflow:hidden
   weggeschnitten. Hier engerer Grid: Picker-Spalten flexen mit minmax(0,1fr),
   kein Trailing-Spacer, kompakteres Padding. */
.sz-wizard-form .sz-hours-row {
    grid-template-columns: 88px 110px minmax(0, 1fr) minmax(0, 1fr) 32px;
    gap: 8px;
    padding: 10px 12px;
}

.sz-wizard-form .sz-hours-header {
    padding: 8px 14px;
}

/* MudTimePicker im Wizard auf 100% der Grid-Cell stretchen damit der
   Picker bündig mit der Spalte bricht statt auf min-content zu hängen. */
.sz-wizard-form .sz-hours-col-time .mud-input-control,
.sz-wizard-form .sz-hours-col-time .mud-input-slot {
    min-width: 0;
}

/* Rechte Spalte: Dashboard-Mockup mit Soft-Shadow */
.sz-wizard-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
}

.sz-wizard-preview {
    width: 100%;
    max-width: 460px;
    background: var(--sz-surface);
    border-radius: 16px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 12px 32px rgba(15, 23, 42, 0.10);
    overflow: hidden;
}

/* Preview-Topbar imitiert die echte SmartZeit-AppBar (weisses Surface
   mit Bottom-Border) — der Merchant erkennt 'das ist mein Dashboard'. */
.sz-wizard-preview-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--sz-surface);
    border-bottom: 1px solid var(--sz-border);
}

.sz-wizard-preview-mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--sz-primary);
    color: var(--sz-text-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
    transition: background 200ms ease;
}

.sz-wizard-preview-name {
    font-weight: 600;
    color: var(--sz-text);
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sz-wizard-preview-name.is-placeholder {
    color: var(--sz-text-secondary);
    font-weight: 400;
    font-style: italic;
}

.sz-wizard-preview-body {
    padding: 22px;
    min-height: 240px;
    background: linear-gradient(180deg, #f0fdf9 0%, #ffffff 100%);
}

/* Step 0: Skeleton-Linien — 'dein Dashboard ist im Bau' */
.sz-wizard-preview-skeletons {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sz-wizard-preview-skeletons > div {
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg, #ecfdf5 0%, #d1fae5 50%, #ecfdf5 100%);
}

.sz-wizard-preview-skeletons > div:nth-child(1) { width: 65%; }
.sz-wizard-preview-skeletons > div:nth-child(2) { width: 90%; }
.sz-wizard-preview-skeletons > div:nth-child(3) { width: 75%; }
.sz-wizard-preview-skeletons > div:nth-child(4) { width: 55%; }

.sz-wizard-preview-section-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--sz-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

/* Step 1: Hours-Liste in der Preview (Mo–So mit Zeitspanne) */
.sz-wizard-preview-hours {
    display: flex;
    flex-direction: column;
}

.sz-wizard-preview-hour-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    font-size: 0.9rem;
    color: var(--sz-text);
    border-bottom: 1px solid var(--sz-border);
}

.sz-wizard-preview-hour-row:last-child {
    border-bottom: none;
}

.sz-wizard-preview-hour-row .day {
    font-weight: 500;
}

.sz-wizard-preview-hour-row .time {
    color: var(--sz-text-secondary);
    font-variant-numeric: tabular-nums;
}

.sz-wizard-preview-hour-row.is-closed .day,
.sz-wizard-preview-hour-row.is-closed .time {
    color: var(--sz-text-secondary);
    font-style: italic;
}

/* Step 2: Service-Card in der Preview */
.sz-wizard-preview-service {
    border: 1px solid var(--sz-border);
    border-radius: 12px;
    padding: 16px;
    background: var(--sz-surface);
}

.sz-wizard-preview-service .title {
    font-weight: 600;
    color: var(--sz-text);
    font-size: 1rem;
}

.sz-wizard-preview-service .title.is-placeholder {
    color: var(--sz-text-secondary);
    font-weight: 400;
    font-style: italic;
}

.sz-wizard-preview-service .desc {
    color: var(--sz-text-secondary);
    font-size: 0.85rem;
    margin-top: 4px;
    line-height: 1.4;
}

.sz-wizard-preview-service .meta {
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--sz-text-secondary);
    font-variant-numeric: tabular-nums;
}

.sz-wizard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px 32px;
}

/* Tablet/Mobile: Spalten untereinander, Visual oben (gibt sofort
   den 'das wird dein Dashboard'-Eindruck), Form darunter. */
@media (max-width: 960px) {
    .sz-wizard-topbar,
    .sz-wizard-body,
    .sz-wizard-footer {
        padding-left: 20px;
        padding-right: 20px;
    }
    .sz-wizard-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .sz-wizard-visual {
        order: -1;
    }
    .sz-wizard-preview {
        max-width: 100%;
    }
    .sz-wizard-progress {
        width: 140px;
    }
    .sz-wizard-title {
        font-size: 1.5rem;
    }
}