@font-face {
 font-family: 'Acme';
 src: url(fonts/Acme/Acme-Regular.ttf) format('truetype');
}

@font-face {
 font-family: 'Pacifico-Regular';
 src: url(fonts/Pacifico/Pacifico-Regular.ttf) format('truetype');
}

@font-face {
 font-family: 'Sofia';
 src: url(fonts/Sofia/Sofia-Regular.ttf) format('truetype');
}

:root {
    --header-height: 70px;
    --header-viewport-height: var(--header-height);
    --header-safe-side: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
    --footer-height: 35px;
    --footer-secondary-height: 0px;
    --footer-stack-height: calc(var(--footer-height) + var(--footer-secondary-height));
    --footer-viewport-inset: calc(var(--footer-stack-height) + env(safe-area-inset-bottom));
    --max-container-width: 500px;
    --desktop-sidebar-width: 380px;
    --popup-start-close-duration-ms: 1000;
    --popup-start-close-duration: 1s;
    --popup-start-close-easing: linear;
    --z-layer-content: 1;
    --z-layer-loader: 39;
    --z-layer-header: 40;
    --z-layer-navbar: 45;
    --z-layer-footer: 40;
    --z-layer-notice: 50;
    --z-layer-overlay: 100;

    --bg-panel: #262626;
    --bg-input: #484848;
    --bg-row-alt: #363636;
    --site-page-background: #000000;
    --site-surface-background: var(--bg-panel);
    --site-shell-background: var(--site-page-background);
    --site-shell-elevated-background: linear-gradient(180deg, color-mix(in srgb, var(--text-main, #fff) 3%, transparent), color-mix(in srgb, var(--text-main, #fff) 1%, transparent)), var(--site-shell-background);
    --site-header-background: var(--site-shell-background);
    --site-navbar-background: var(--site-shell-background);
    --site-footer-background: var(--site-shell-background);
    --site-shell-border-color: var(--border-color);
    --border-color: #444;
    --text-main: #ffffff;
    --text-muted: #aaaaaa;
    --notice-info-color: #2196f3;
    --notice-warning-color: #ffb347;
    --notice-error-color: #e76f51;
    --notice-button-surface-color: color-mix(in srgb, var(--text-main, #fff) 12%, transparent);
    --notice-button-text-color: #ffffff;
    --notice-button-border-color: color-mix(in srgb, var(--text-main, #fff) 24%, transparent);
    --notice-hint-text-color: #aaaaaa;
    --notice-popup-surface-color: color-mix(in srgb, var(--theme-tone-black, #000) 88%, transparent);
    --notice-popup-text-color: #ffffff;
    --notice-popup-border-color: color-mix(in srgb, var(--text-main, #fff) 28%, transparent);
    --notice-popup-close-surface-color: color-mix(in srgb, var(--text-main, #fff) 16%, transparent);
    --notice-popup-close-border-color: color-mix(in srgb, var(--text-main, #fff) 28%, transparent);
    --shadow-standard: 0 4px 15px color-mix(in srgb, var(--theme-tone-black, #000) 50%, transparent);
    --admin-button-radius: 10px;

    /* Zentrale semantische Styling-Tokens. Seiten und Module leiten ihre
       Oberflächen daraus ab und führen keine eigene Farbpalette ein. */
    --theme-tone-black: #000000;
    --theme-tone-white: #ffffff;
    --text-on-strong: var(--theme-tone-white);
    --surface-subtle: color-mix(in srgb, var(--text-main) 3%, transparent);
    --surface-soft: color-mix(in srgb, var(--text-main) 5%, transparent);
    --surface-hover: color-mix(in srgb, var(--text-main) 8%, transparent);
    --surface-selected: color-mix(in srgb, var(--text-main) 14%, transparent);
    --surface-border-subtle: color-mix(in srgb, var(--text-main) 12%, transparent);
    --surface-border-strong: color-mix(in srgb, var(--text-main) 28%, transparent);
    --overlay-soft: color-mix(in srgb, var(--theme-tone-black) 25%, transparent);
    --overlay-medium: color-mix(in srgb, var(--theme-tone-black) 55%, transparent);
    --overlay-strong: color-mix(in srgb, var(--theme-tone-black) 88%, transparent);
    --status-info-color: var(--notice-info-color);
    --status-success-color: #2e7d32;
    --status-warning-color: var(--notice-warning-color);
    --status-danger-color: var(--notice-error-color);
    --status-billing-color: #5e35b1;
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: var(--admin-button-radius);
    --radius-card: var(--surface-card-radius, 12px);
    --radius-lg: 16px;
    --radius-pill: 999px;
    --space-3: 12px;
    --space-6: 24px;
    --space-10: 40px;
    --button-padding-y: 10px;
    --button-padding-x: 16px;
    --text-on-accent: var(--theme-tone-black);

    --font-primary: 'Acme', sans-serif;
    --font-headline: 'Sofia', cursive;
    --font-accent: 'Pacifico-Regular', cursive;
    --font-scale-base: 1;
    --font-scale-small: 0.92;
    --font-scale-meta: 0.78;
    --font-scale-title: 1.5;
    --font-scale-section-title: 1.05;
    --font-scale-label: calc(var(--font-scale-base) * 1.1);
    --font-scale-header-brand: calc(var(--font-scale-title) * 1.07);
    --font-scale-header-slogan: calc(var(--font-scale-base) * 1);
    --font-scale-badge: calc(var(--font-scale-meta) * 0.97);

    --font-size-base: calc(1rem * var(--font-scale-base));
    --font-size-small: calc(1rem * var(--font-scale-small));
    --font-size-meta: calc(1rem * var(--font-scale-meta));
    --font-size-label: calc(1rem * var(--font-scale-label));
    --font-size-title: calc(1rem * var(--font-scale-title));
    --font-size-section-title: calc(1rem * var(--font-scale-section-title));
    --font-size-header-brand: calc(1rem * var(--font-scale-header-brand));
    --font-size-header-slogan: calc(1rem * var(--font-scale-header-slogan));
    --font-size-badge: calc(1rem * var(--font-scale-badge));

    --surface-card-gap: 10px;
    --surface-card-padding: 12px;
    --surface-card-radius: 12px;
    --surface-card-shadow: -1px -1px 5px 5px #333;
    --surface-card-highlight-ring: rgba(255, 209, 102, 0.82);
    --surface-card-highlight-glow: rgba(255, 209, 102, 0.40);
    --frontend-menu-tile-gap: 18px;
    --frontend-menu-tile-padding: 12px;
    --frontend-menu-tile-radius: 12px;
    --frontend-menu-tile-background: #000000;
    --frontend-menu-tile-text-color: #ffffff;
    --frontend-menu-tile-headline-color: #ffffff;
    --frontend-menu-tile-description-color: #dddddd;
    --frontend-menu-tile-price-color: #ffffff;
    --frontend-menu-tile-border-color: #000000;
    --frontend-menu-tile-border-width: 0px;
    --frontend-menu-tile-shadow: -1px -1px 5px 5px #333333;
    --frontend-menu-tile-headline-font: 'Acme', sans-serif;
    --frontend-menu-tile-body-font: 'Acme', sans-serif;
    --frontend-menu-tile-image-radius: 10%;
    --frontend-menu-tile-headline-scale: 1;
    --frontend-menu-tile-text-scale: 1;
    --frontend-menu-availability-badge-background: #5c2020;
    --frontend-menu-availability-badge-border: #a63e3e;
    --frontend-menu-availability-badge-text: #ffb3b3;
    --frontend-menu-category-header-background: #000000;
    --frontend-menu-category-header-text-color: #ffffff;
    --frontend-menu-popup-overlay-color: #000000;
    --frontend-menu-popup-overlay-opacity: 80%;
    --frontend-menu-popup-background: #222222;
    --frontend-menu-popup-highlight-fallback-color: #ffd166;
    --frontend-menu-popup-text-color: #ffffff;
    --frontend-menu-popup-title-color: #ffffff;
    --frontend-menu-popup-description-color: #dddddd;
    --frontend-menu-popup-price-color: #ffffff;
    --frontend-menu-popup-price-display: table-cell;
    --frontend-menu-popup-border-color: #444444;
    --frontend-menu-popup-border-width: 1px;
    --frontend-menu-popup-radius: 10px;
    --frontend-menu-popup-padding: 20px;
    --frontend-menu-popup-max-width: 500px;
    --frontend-menu-popup-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    --frontend-menu-popup-title-font: 'Sofia', cursive;
    --frontend-menu-popup-body-font: 'Acme', sans-serif;
    --frontend-menu-popup-title-scale: 1.2;
    --frontend-menu-popup-text-scale: 1;
    --frontend-menu-popup-image-radius: 5px;
    --frontend-menu-popup-meta-background: #2b2b2b;
    --frontend-menu-popup-meta-text-color: #dddddd;
    --frontend-menu-popup-meta-border-color: #444444;
    --frontend-menu-popup-close-background: #353535;
    --frontend-menu-popup-close-text-color: #ffffff;
    --frontend-menu-popup-close-border-color: #444444;
    --frontend-info-tile-gap: 10px;
    --frontend-info-tile-padding: 12px;
    --frontend-info-tile-radius: 12px;
    --frontend-info-columns: 2;
    --frontend-text-headline-scale: 1;
    --frontend-text-body-scale: 1;
    --site-header-title-color: var(--text-main);
    --site-header-slogan-color: var(--text-main);
    --site-header-border-color: var(--border-color);
    --site-navbar-text-color: var(--text-main);
    --site-navbar-active-background: color-mix(in srgb, var(--text-main) 9%, transparent);
    --site-navbar-active-text-color: var(--text-main);
    --site-navbar-border-color: var(--border-color);
    --site-footer-text-color: var(--text-main);
    --site-footer-border-color: var(--border-color);
    --site-page-title-color: var(--text-main);
    --site-section-title-color: var(--text-main);
    --site-content-container-background: transparent;
    --site-content-container-text-color: var(--text-main);
    --site-content-container-muted-color: var(--text-muted);
    --site-content-container-border-color: var(--border-color);
    --site-content-container-heading-background: transparent;
    --site-content-container-heading-text-color: var(--text-main);
    --font-header-title: var(--font-headline);
    --font-header-slogan: var(--font-primary);
    --font-navbar: var(--font-primary);
    --font-footer: var(--font-primary);
    --font-page-title: var(--font-headline);
    --font-section-title: var(--font-headline);
    --font-content-heading: var(--font-headline);
    --font-content-body: var(--font-primary);
    --font-scale-header-title: 1.61;
    --font-scale-header-slogan: 1;
    --font-scale-navbar: 1;
    --font-scale-footer: 0.78;
    --font-scale-page-title: 2;
    --font-scale-section-heading: 1.5;
    --font-scale-content-heading: 1.05;
    --font-scale-content-body: 0.78;
    --site-content-container-max-width: 920px;
    --site-content-container-gap: 10px;
    --site-content-section-gap: 46px;
    --site-content-container-padding: 12px;
    --site-content-container-radius: 12px;
    --site-content-container-border-width: 0px;
    --site-page-title-weight: 700;
    --site-section-title-weight: 700;
    --site-content-container-heading-weight: 400;
    --site-content-container-heading-alignment: center;
    --site-content-container-shadow: var(--surface-card-shadow);
}

/* Einziger seitenweiter Ladezustand fuer Erstaufruf und SPA-Navigation. */
.app-page-loader {
    position: fixed;
    inset: 0;
    /* Der zentrale Loader verdeckt ausschließlich den wechselnden Content.
       Header, Navbar samt Overlay und Footer bleiben als stabile Shell davor. */
    z-index: var(--z-layer-loader, 39);
    display: flex;
    min-height: 0;
    padding: clamp(24px, 5vw, 48px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    color: var(--text-main, #fff);
    text-align: center;
    pointer-events: none;
    box-sizing: border-box;
}

.app-page-loader__spinner {
    display: block;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 3px solid color-mix(in srgb, currentColor 34%, transparent);
    border-top-color: var(--site-highlight-color, #ffd166);
    border-radius: 50%;
    animation: app-page-loader-spin .75s linear infinite;
}

.app-page-loader__label {
    color: var(--text-muted, #aaa);
    font: 700 var(--font-size-base, 1rem)/1.3 var(--font-primary, sans-serif);
}

[data-app-page-loading="true"] > :not([data-app-page-loader="true"]) {
    visibility: hidden !important;
    pointer-events: none !important;
}

html.app-scope-admin.app-page-booting #content,
#content[data-app-page-loading="true"] {
    background: #000 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html.app-scope-admin.app-page-booting #content > :not([data-app-page-loader="true"]) {
    visibility: hidden !important;
    pointer-events: none !important;
}

@keyframes app-page-loader-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .app-page-loader__spinner {
        animation-duration: 1.5s;
    }
}

body.app-frontend-module-enabled {
    --surface-card-gap: var(--site-content-container-gap);
    --surface-card-padding: var(--site-content-container-padding);
    --surface-card-radius: var(--site-content-container-radius);
}

body[data-frontend-layout-enabled="1"] > .header,
body[data-frontend-layout-enabled="1"] > #navbar,
body[data-frontend-layout-enabled="1"] > footer {
    --frontend-shell-border-color-effective: var(--frontend-template-border-color, currentColor);
    background: var(--frontend-template-background, revert-layer);
    color: var(--frontend-template-text-color, inherit);
    border-color: var(--frontend-shell-border-color-effective);
    border-radius: var(--frontend-template-radius, 0);
    box-shadow: var(--frontend-template-shadow, none);
    border-style: solid;
    border-width: var(--frontend-template-border-width, 0);
}

#popup_start[data-app-popup-overlay="intro"] {
    --frontend-intro-overlay-color-effective: var(--frontend-template-overlay-color, #000);
    --frontend-intro-overlay-opacity-effective: var(--frontend-template-overlay-opacity, .82);
    --frontend-intro-max-width-effective: var(--frontend-template-max-width, 100%);
    --frontend-intro-padding-effective: var(--frontend-template-padding, var(--site-content-container-padding));
    --frontend-intro-gap-effective: var(--frontend-template-gap, var(--site-content-container-gap));
    --frontend-intro-radius-effective: var(--frontend-template-radius, var(--site-content-container-radius));
    --frontend-intro-background-effective: var(--frontend-template-background, var(--site-content-container-background));
    --frontend-intro-text-color-effective: var(--frontend-template-text-color, var(--site-content-container-text-color));
    background: color-mix(in srgb, var(--frontend-intro-overlay-color-effective) calc(var(--frontend-intro-overlay-opacity-effective) * 100%), transparent);
}

#popup_start[data-app-popup-overlay="intro"].overlay--active {
    padding-inline: 0;
}

#popup_start[data-app-popup-overlay="intro"] .popup_start_container {
    box-sizing: border-box;
    width: min(100%, var(--frontend-intro-max-width-effective));
    margin-inline: auto;
    padding: var(--frontend-intro-padding-effective);
    padding-left: max(var(--frontend-intro-padding-effective), env(safe-area-inset-left));
    padding-right: max(var(--frontend-intro-padding-effective), env(safe-area-inset-right));
    gap: var(--frontend-intro-gap-effective);
    border: var(--frontend-intro-border-width-effective, var(--frontend-template-border-width, 0)) solid var(--frontend-intro-border-color-effective, var(--frontend-template-border-color, var(--site-content-container-border-color)));
    border-radius: var(--frontend-intro-radius-effective);
    background: var(--frontend-intro-background-effective);
    color: var(--frontend-intro-text-color-effective);
    box-shadow: var(--frontend-intro-shadow-effective, var(--frontend-template-shadow, var(--site-content-container-shadow)));
}

body.app-ua-form-mobile #popup_start[data-app-popup-overlay="intro"] {
    --frontend-intro-overlay-color-effective: var(--frontend-template-overlay-color-mobile, var(--frontend-template-overlay-color, #000));
    --frontend-intro-overlay-opacity-effective: var(--frontend-template-overlay-opacity-mobile, var(--frontend-template-overlay-opacity, .82));
    --frontend-intro-max-width-effective: var(--frontend-template-max-width-mobile, var(--frontend-template-max-width, 100%));
    --frontend-intro-padding-effective: var(--frontend-template-padding-mobile, var(--frontend-template-padding, var(--site-content-container-padding)));
    --frontend-intro-gap-effective: var(--frontend-template-gap-mobile, var(--frontend-template-gap, var(--site-content-container-gap)));
    --frontend-intro-radius-effective: var(--frontend-template-radius-mobile, var(--frontend-template-radius, var(--site-content-container-radius)));
    --frontend-intro-background-effective: var(--frontend-template-background-mobile, var(--frontend-template-background, var(--site-content-container-background)));
    --frontend-intro-text-color-effective: var(--frontend-template-text-color-mobile, var(--frontend-template-text-color, var(--site-content-container-text-color)));
    --frontend-intro-border-width-effective: var(--frontend-template-border-width-mobile, var(--frontend-template-border-width, 1px));
    --frontend-intro-border-color-effective: var(--frontend-template-border-color-mobile, var(--frontend-template-border-color, var(--site-content-container-border-color)));
    --frontend-intro-shadow-effective: var(--frontend-template-shadow-mobile, var(--frontend-template-shadow, var(--site-content-container-shadow)));
}

body.app-ua-form-desktop #popup_start[data-app-popup-overlay="intro"] {
    --frontend-intro-overlay-color-effective: var(--frontend-template-overlay-color-desktop, var(--frontend-template-overlay-color, #000));
    --frontend-intro-overlay-opacity-effective: var(--frontend-template-overlay-opacity-desktop, var(--frontend-template-overlay-opacity, .82));
    --frontend-intro-max-width-effective: var(--frontend-template-max-width-desktop, var(--frontend-template-max-width, 100%));
    --frontend-intro-padding-effective: var(--frontend-template-padding-desktop, var(--frontend-template-padding, var(--site-content-container-padding)));
    --frontend-intro-gap-effective: var(--frontend-template-gap-desktop, var(--frontend-template-gap, var(--site-content-container-gap)));
    --frontend-intro-radius-effective: var(--frontend-template-radius-desktop, var(--frontend-template-radius, var(--site-content-container-radius)));
    --frontend-intro-background-effective: var(--frontend-template-background-desktop, var(--frontend-template-background, var(--site-content-container-background)));
    --frontend-intro-text-color-effective: var(--frontend-template-text-color-desktop, var(--frontend-template-text-color, var(--site-content-container-text-color)));
    --frontend-intro-border-width-effective: var(--frontend-template-border-width-desktop, var(--frontend-template-border-width, 1px));
    --frontend-intro-border-color-effective: var(--frontend-template-border-color-desktop, var(--frontend-template-border-color, var(--site-content-container-border-color)));
    --frontend-intro-shadow-effective: var(--frontend-template-shadow-desktop, var(--frontend-template-shadow, var(--site-content-container-shadow)));
}

body.app-ua-container-webview #popup_start[data-app-popup-overlay="intro"] {
    --frontend-intro-overlay-color-effective: var(--frontend-template-overlay-color-webview, var(--frontend-template-overlay-color, #000));
    --frontend-intro-overlay-opacity-effective: var(--frontend-template-overlay-opacity-webview, var(--frontend-template-overlay-opacity, .82));
    --frontend-intro-max-width-effective: var(--frontend-template-max-width-webview, var(--frontend-template-max-width, 100%));
    --frontend-intro-padding-effective: var(--frontend-template-padding-webview, var(--frontend-template-padding, var(--site-content-container-padding)));
    --frontend-intro-gap-effective: var(--frontend-template-gap-webview, var(--frontend-template-gap, var(--site-content-container-gap)));
    --frontend-intro-radius-effective: var(--frontend-template-radius-webview, var(--frontend-template-radius, var(--site-content-container-radius)));
    --frontend-intro-background-effective: var(--frontend-template-background-webview, var(--frontend-template-background, var(--site-content-container-background)));
    --frontend-intro-text-color-effective: var(--frontend-template-text-color-webview, var(--frontend-template-text-color, var(--site-content-container-text-color)));
    --frontend-intro-border-width-effective: var(--frontend-template-border-width-webview, var(--frontend-template-border-width, 1px));
    --frontend-intro-border-color-effective: var(--frontend-template-border-color-webview, var(--frontend-template-border-color, var(--site-content-container-border-color)));
    --frontend-intro-shadow-effective: var(--frontend-template-shadow-webview, var(--frontend-template-shadow, var(--site-content-container-shadow)));
}

body.app-ua-container-webapp #popup_start[data-app-popup-overlay="intro"] {
    --frontend-intro-overlay-color-effective: var(--frontend-template-overlay-color-webapp, var(--frontend-template-overlay-color, #000));
    --frontend-intro-overlay-opacity-effective: var(--frontend-template-overlay-opacity-webapp, var(--frontend-template-overlay-opacity, .82));
    --frontend-intro-max-width-effective: var(--frontend-template-max-width-webapp, var(--frontend-template-max-width, 100%));
    --frontend-intro-padding-effective: var(--frontend-template-padding-webapp, var(--frontend-template-padding, var(--site-content-container-padding)));
    --frontend-intro-gap-effective: var(--frontend-template-gap-webapp, var(--frontend-template-gap, var(--site-content-container-gap)));
    --frontend-intro-radius-effective: var(--frontend-template-radius-webapp, var(--frontend-template-radius, var(--site-content-container-radius)));
    --frontend-intro-background-effective: var(--frontend-template-background-webapp, var(--frontend-template-background, var(--site-content-container-background)));
    --frontend-intro-text-color-effective: var(--frontend-template-text-color-webapp, var(--frontend-template-text-color, var(--site-content-container-text-color)));
    --frontend-intro-border-width-effective: var(--frontend-template-border-width-webapp, var(--frontend-template-border-width, 1px));
    --frontend-intro-border-color-effective: var(--frontend-template-border-color-webapp, var(--frontend-template-border-color, var(--site-content-container-border-color)));
    --frontend-intro-shadow-effective: var(--frontend-template-shadow-webapp, var(--frontend-template-shadow, var(--site-content-container-shadow)));
}

body[data-frontend-layout-enabled="1"].app-ua-form-mobile > .header,
body[data-frontend-layout-enabled="1"].app-ua-form-mobile > #navbar,
body[data-frontend-layout-enabled="1"].app-ua-form-mobile > footer {
    --frontend-shell-border-color-effective: var(--frontend-template-border-color-mobile, var(--frontend-template-border-color));
    background: var(--frontend-template-background-mobile, var(--frontend-template-background));
    color: var(--frontend-template-text-color-mobile, var(--frontend-template-text-color));
    border-color: var(--frontend-template-border-color-mobile, var(--frontend-template-border-color));
    border-radius: var(--frontend-template-radius-mobile, var(--frontend-template-radius));
    box-shadow: var(--frontend-template-shadow-mobile, var(--frontend-template-shadow));
    border-width: var(--frontend-template-border-width-mobile, var(--frontend-template-border-width, 0));
}

body[data-frontend-layout-enabled="1"].app-ua-form-desktop > .header,
body[data-frontend-layout-enabled="1"].app-ua-form-desktop > #navbar,
body[data-frontend-layout-enabled="1"].app-ua-form-desktop > footer {
    --frontend-shell-border-color-effective: var(--frontend-template-border-color-desktop, var(--frontend-template-border-color));
    background: var(--frontend-template-background-desktop, var(--frontend-template-background));
    color: var(--frontend-template-text-color-desktop, var(--frontend-template-text-color));
    border-color: var(--frontend-template-border-color-desktop, var(--frontend-template-border-color));
    border-radius: var(--frontend-template-radius-desktop, var(--frontend-template-radius));
    box-shadow: var(--frontend-template-shadow-desktop, var(--frontend-template-shadow));
    border-width: var(--frontend-template-border-width-desktop, var(--frontend-template-border-width, 0));
}

body[data-frontend-layout-enabled="1"].app-ua-container-webview > .header,
body[data-frontend-layout-enabled="1"].app-ua-container-webview > #navbar,
body[data-frontend-layout-enabled="1"].app-ua-container-webview > footer {
    --frontend-shell-border-color-effective: var(--frontend-template-border-color-webview, var(--frontend-template-border-color));
    background: var(--frontend-template-background-webview, var(--frontend-template-background));
    color: var(--frontend-template-text-color-webview, var(--frontend-template-text-color));
    border-color: var(--frontend-template-border-color-webview, var(--frontend-template-border-color));
    border-radius: var(--frontend-template-radius-webview, var(--frontend-template-radius));
    box-shadow: var(--frontend-template-shadow-webview, var(--frontend-template-shadow));
    border-width: var(--frontend-template-border-width-webview, var(--frontend-template-border-width, 0));
}

body[data-frontend-layout-enabled="1"].app-ua-container-webapp > .header,
body[data-frontend-layout-enabled="1"].app-ua-container-webapp > #navbar,
body[data-frontend-layout-enabled="1"].app-ua-container-webapp > footer {
    --frontend-shell-border-color-effective: var(--frontend-template-border-color-webapp, var(--frontend-template-border-color));
    background: var(--frontend-template-background-webapp, var(--frontend-template-background));
    color: var(--frontend-template-text-color-webapp, var(--frontend-template-text-color));
    border-color: var(--frontend-template-border-color-webapp, var(--frontend-template-border-color));
    border-radius: var(--frontend-template-radius-webapp, var(--frontend-template-radius));
    box-shadow: var(--frontend-template-shadow-webapp, var(--frontend-template-shadow));
    border-width: var(--frontend-template-border-width-webapp, var(--frontend-template-border-width, 0));
}

body[data-frontend-layout-enabled="1"] > .header {
    min-height: var(--frontend-template-height, auto);
    padding: var(--frontend-template-padding, 0);
    text-align: var(--frontend-template-alignment, center);
}

body[data-frontend-layout-enabled="1"] > .header .header__center {
    align-items: var(--frontend-template-align-items, center);
    text-align: var(--frontend-template-alignment, center);
    gap: var(--frontend-template-gap, 0);
}

body[data-frontend-layout-enabled="1"] > #navbar .navbar {
    width: var(--frontend-template-width, max-content);
    padding: var(--frontend-template-padding, var(--site-content-container-padding));
    gap: 0;
}

body[data-frontend-layout-enabled="1"] > footer {
    min-height: var(--frontend-template-height, auto);
    padding: var(--frontend-template-padding, 0);
}

body[data-frontend-layout-enabled="1"] > footer .footer__content {
    flex-direction: var(--frontend-template-layout, row);
    gap: var(--frontend-template-gap, var(--site-content-container-gap));
}

body[data-frontend-layout-enabled="1"].app-ua-form-mobile > .header {
    min-height: var(--frontend-template-height-mobile, var(--frontend-template-height, auto));
    padding: var(--frontend-template-padding-mobile, var(--frontend-template-padding, 0));
    text-align: var(--frontend-template-alignment-mobile, var(--frontend-template-alignment, center));
}
body[data-frontend-layout-enabled="1"].app-ua-form-mobile > .header .header__center {
    align-items: var(--frontend-template-align-items-mobile, var(--frontend-template-align-items, center));
    text-align: var(--frontend-template-alignment-mobile, var(--frontend-template-alignment, center));
    gap: var(--frontend-template-gap-mobile, var(--frontend-template-gap, 0));
}
body[data-frontend-layout-enabled="1"].app-ua-form-mobile > #navbar .navbar {
    width: var(--frontend-template-width-mobile, var(--frontend-template-width, max-content));
    padding: var(--frontend-template-padding-mobile, var(--frontend-template-padding, var(--site-content-container-padding)));
    gap: 0;
}
body[data-frontend-layout-enabled="1"].app-ua-form-mobile > footer {
    min-height: var(--frontend-template-height-mobile, var(--frontend-template-height, auto));
    padding: var(--frontend-template-padding-mobile, var(--frontend-template-padding, 0));
}
body[data-frontend-layout-enabled="1"].app-ua-form-mobile > footer .footer__content {
    flex-direction: var(--frontend-template-layout-mobile, var(--frontend-template-layout, row));
    gap: var(--frontend-template-gap-mobile, var(--frontend-template-gap, var(--site-content-container-gap)));
}

body[data-frontend-layout-enabled="1"].app-ua-form-desktop > .header {
    min-height: var(--frontend-template-height-desktop, var(--frontend-template-height, auto));
    padding: var(--frontend-template-padding-desktop, var(--frontend-template-padding, 0));
    text-align: var(--frontend-template-alignment-desktop, var(--frontend-template-alignment, center));
}
body[data-frontend-layout-enabled="1"].app-ua-form-desktop > .header .header__center {
    align-items: var(--frontend-template-align-items-desktop, var(--frontend-template-align-items, center));
    text-align: var(--frontend-template-alignment-desktop, var(--frontend-template-alignment, center));
    gap: var(--frontend-template-gap-desktop, var(--frontend-template-gap, 0));
}
body[data-frontend-layout-enabled="1"].app-ua-form-desktop > #navbar .navbar {
    width: var(--frontend-template-width-desktop, var(--frontend-template-width, max-content));
    padding: var(--frontend-template-padding-desktop, var(--frontend-template-padding, var(--site-content-container-padding)));
    gap: 0;
}
body[data-frontend-layout-enabled="1"].app-ua-form-desktop > footer {
    min-height: var(--frontend-template-height-desktop, var(--frontend-template-height, auto));
    padding: var(--frontend-template-padding-desktop, var(--frontend-template-padding, 0));
}
body[data-frontend-layout-enabled="1"].app-ua-form-desktop > footer .footer__content {
    flex-direction: var(--frontend-template-layout-desktop, var(--frontend-template-layout, row));
    gap: var(--frontend-template-gap-desktop, var(--frontend-template-gap, var(--site-content-container-gap)));
}

body[data-frontend-layout-enabled="1"].app-ua-container-webview > .header {
    min-height: var(--frontend-template-height-webview, var(--frontend-template-height, auto));
    padding: var(--frontend-template-padding-webview, var(--frontend-template-padding, 0));
    text-align: var(--frontend-template-alignment-webview, var(--frontend-template-alignment, center));
}
body[data-frontend-layout-enabled="1"].app-ua-container-webview > .header .header__center {
    align-items: var(--frontend-template-align-items-webview, var(--frontend-template-align-items, center));
    text-align: var(--frontend-template-alignment-webview, var(--frontend-template-alignment, center));
    gap: var(--frontend-template-gap-webview, var(--frontend-template-gap, 0));
}
body[data-frontend-layout-enabled="1"].app-ua-container-webview > #navbar .navbar {
    width: var(--frontend-template-width-webview, var(--frontend-template-width, max-content));
    padding: var(--frontend-template-padding-webview, var(--frontend-template-padding, var(--site-content-container-padding)));
    gap: 0;
}
body[data-frontend-layout-enabled="1"].app-ua-container-webview > footer {
    min-height: var(--frontend-template-height-webview, var(--frontend-template-height, auto));
    padding: var(--frontend-template-padding-webview, var(--frontend-template-padding, 0));
}
body[data-frontend-layout-enabled="1"].app-ua-container-webview > footer .footer__content {
    flex-direction: var(--frontend-template-layout-webview, var(--frontend-template-layout, row));
    gap: var(--frontend-template-gap-webview, var(--frontend-template-gap, var(--site-content-container-gap)));
}

body[data-frontend-layout-enabled="1"].app-ua-container-webapp > .header {
    min-height: var(--frontend-template-height-webapp, var(--frontend-template-height, auto));
    padding: var(--frontend-template-padding-webapp, var(--frontend-template-padding, 0));
    text-align: var(--frontend-template-alignment-webapp, var(--frontend-template-alignment, center));
}
body[data-frontend-layout-enabled="1"].app-ua-container-webapp > .header .header__center {
    align-items: var(--frontend-template-align-items-webapp, var(--frontend-template-align-items, center));
    text-align: var(--frontend-template-alignment-webapp, var(--frontend-template-alignment, center));
    gap: var(--frontend-template-gap-webapp, var(--frontend-template-gap, 0));
}
body[data-frontend-layout-enabled="1"].app-ua-container-webapp > #navbar .navbar {
    width: var(--frontend-template-width-webapp, var(--frontend-template-width, max-content));
    padding: var(--frontend-template-padding-webapp, var(--frontend-template-padding, var(--site-content-container-padding)));
    gap: 0;
}
body[data-frontend-layout-enabled="1"].app-ua-container-webapp > footer {
    min-height: var(--frontend-template-height-webapp, var(--frontend-template-height, auto));
    padding: var(--frontend-template-padding-webapp, var(--frontend-template-padding, 0));
}
body[data-frontend-layout-enabled="1"].app-ua-container-webapp > footer .footer__content {
    flex-direction: var(--frontend-template-layout-webapp, var(--frontend-template-layout, row));
    gap: var(--frontend-template-gap-webapp, var(--frontend-template-gap, var(--site-content-container-gap)));
}

.content.content--frontend-design-v2 {
    --frontend-design-grid-gap: var(--site-content-container-gap);
    --frontend-design-page-max-width: 1440px;
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-content: start;
    align-items: start;
    column-gap: var(--frontend-design-grid-gap);
    row-gap: var(--site-content-section-gap);
    padding-block-end: max(75px, var(--site-content-section-gap));
    padding-inline: max(
        var(--frontend-design-grid-gap),
        calc((100% - var(--layout-sidebar-offset, 0px) - var(--frontend-design-page-max-width)) / 2 + var(--frontend-design-grid-gap))
    );
    background: var(--frontend-template-background, transparent);
    color: var(--frontend-template-text-color, inherit);
}

body.app-ua-form-mobile .content.content--frontend-design-v2 {
    max-width: var(--frontend-template-max-width-mobile, var(--frontend-template-max-width, 100%));
    row-gap: var(--frontend-template-section-gap-mobile, var(--frontend-template-section-gap, var(--site-content-section-gap)));
    background: var(--frontend-template-background-mobile, var(--frontend-template-background, transparent));
    color: var(--frontend-template-text-color-mobile, var(--frontend-template-text-color, inherit));
}

body.app-ua-form-desktop .content.content--frontend-design-v2 {
    max-width: var(--frontend-template-max-width-desktop, var(--frontend-template-max-width, 100%));
    row-gap: var(--frontend-template-section-gap-desktop, var(--frontend-template-section-gap, var(--site-content-section-gap)));
    background: var(--frontend-template-background-desktop, var(--frontend-template-background, transparent));
    color: var(--frontend-template-text-color-desktop, var(--frontend-template-text-color, inherit));
}

body.app-ua-container-webview .content.content--frontend-design-v2 {
    max-width: var(--frontend-template-max-width-webview, var(--frontend-template-max-width, 100%));
    row-gap: var(--frontend-template-section-gap-webview, var(--frontend-template-section-gap, var(--site-content-section-gap)));
    background: var(--frontend-template-background-webview, var(--frontend-template-background, transparent));
    color: var(--frontend-template-text-color-webview, var(--frontend-template-text-color, inherit));
}

body.app-ua-container-webapp .content.content--frontend-design-v2 {
    max-width: var(--frontend-template-max-width-webapp, var(--frontend-template-max-width, 100%));
    row-gap: var(--frontend-template-section-gap-webapp, var(--frontend-template-section-gap, var(--site-content-section-gap)));
    background: var(--frontend-template-background-webapp, var(--frontend-template-background, transparent));
    color: var(--frontend-template-text-color-webapp, var(--frontend-template-text-color, inherit));
}

.content.content--frontend-design-v2 > [data-frontend-component],
.content.content--frontend-design-v2 > [data-frontend-system-component] {
    grid-column: span var(--frontend-component-span-desktop, 12);
    order: var(--frontend-component-order-desktop, 0);
    min-width: 0;
    margin-block: 0;
    --frontend-template-background-effective: var(--frontend-template-background, var(--site-content-container-background));
    --frontend-template-text-color-effective: var(--frontend-template-text-color, var(--site-content-container-text-color));
    --frontend-template-border-color-effective: var(--frontend-template-border-color, var(--site-content-container-border-color));
    --frontend-template-border-width-effective: var(--frontend-template-border-width, var(--site-content-container-border-width));
    --frontend-template-radius-effective: var(--frontend-template-radius, var(--site-content-container-radius));
    --frontend-template-padding-effective: var(--frontend-template-padding, var(--site-content-container-padding));
    --frontend-template-gap-effective: var(--frontend-template-gap, var(--site-content-container-gap));
    --frontend-template-shadow-effective: var(--frontend-template-shadow, var(--site-content-container-shadow));
    --frontend-template-aspect-ratio-effective: var(--frontend-template-aspect-ratio, auto);
}

.content.content--frontend-design-v2 > [data-frontend-login-core] {
    grid-column: 1 / -1;
    order: -1;
    min-width: 0;
}

body.app-ua-form-desktop .content.content--frontend-design-v2 > [data-frontend-component],
body.app-ua-form-desktop .content.content--frontend-design-v2 > [data-frontend-system-component] {
    --frontend-template-background-effective: var(--frontend-template-background-desktop, var(--frontend-template-background, var(--site-content-container-background)));
    --frontend-template-text-color-effective: var(--frontend-template-text-color-desktop, var(--frontend-template-text-color, var(--site-content-container-text-color)));
    --frontend-template-border-color-effective: var(--frontend-template-border-color-desktop, var(--frontend-template-border-color, var(--site-content-container-border-color)));
    --frontend-template-border-width-effective: var(--frontend-template-border-width-desktop, var(--frontend-template-border-width, var(--site-content-container-border-width)));
    --frontend-template-radius-effective: var(--frontend-template-radius-desktop, var(--frontend-template-radius, var(--site-content-container-radius)));
    --frontend-template-padding-effective: var(--frontend-template-padding-desktop, var(--frontend-template-padding, var(--site-content-container-padding)));
    --frontend-template-gap-effective: var(--frontend-template-gap-desktop, var(--frontend-template-gap, var(--site-content-container-gap)));
    --frontend-template-shadow-effective: var(--frontend-template-shadow-desktop, var(--frontend-template-shadow, var(--site-content-container-shadow)));
    --frontend-template-aspect-ratio-effective: var(--frontend-template-aspect-ratio-desktop, var(--frontend-template-aspect-ratio, auto));
}

body.app-ua-form-mobile .content.content--frontend-design-v2 > [data-frontend-component],
body.app-ua-form-mobile .content.content--frontend-design-v2 > [data-frontend-system-component] {
    --frontend-template-background-effective: var(--frontend-template-background-mobile, var(--frontend-template-background, var(--site-content-container-background)));
    --frontend-template-text-color-effective: var(--frontend-template-text-color-mobile, var(--frontend-template-text-color, var(--site-content-container-text-color)));
    --frontend-template-border-color-effective: var(--frontend-template-border-color-mobile, var(--frontend-template-border-color, var(--site-content-container-border-color)));
    --frontend-template-border-width-effective: var(--frontend-template-border-width-mobile, var(--frontend-template-border-width, var(--site-content-container-border-width)));
    --frontend-template-radius-effective: var(--frontend-template-radius-mobile, var(--frontend-template-radius, var(--site-content-container-radius)));
    --frontend-template-padding-effective: var(--frontend-template-padding-mobile, var(--frontend-template-padding, var(--site-content-container-padding)));
    --frontend-template-gap-effective: var(--frontend-template-gap-mobile, var(--frontend-template-gap, var(--site-content-container-gap)));
    --frontend-template-shadow-effective: var(--frontend-template-shadow-mobile, var(--frontend-template-shadow, var(--site-content-container-shadow)));
    --frontend-template-aspect-ratio-effective: var(--frontend-template-aspect-ratio-mobile, var(--frontend-template-aspect-ratio, auto));
}

body.app-ua-container-webview .content.content--frontend-design-v2 > [data-frontend-component],
body.app-ua-container-webview .content.content--frontend-design-v2 > [data-frontend-system-component] {
    --frontend-template-background-effective: var(--frontend-template-background-webview, var(--frontend-template-background, var(--site-content-container-background)));
    --frontend-template-text-color-effective: var(--frontend-template-text-color-webview, var(--frontend-template-text-color, var(--site-content-container-text-color)));
    --frontend-template-border-color-effective: var(--frontend-template-border-color-webview, var(--frontend-template-border-color, var(--site-content-container-border-color)));
    --frontend-template-border-width-effective: var(--frontend-template-border-width-webview, var(--frontend-template-border-width, var(--site-content-container-border-width)));
    --frontend-template-radius-effective: var(--frontend-template-radius-webview, var(--frontend-template-radius, var(--site-content-container-radius)));
    --frontend-template-padding-effective: var(--frontend-template-padding-webview, var(--frontend-template-padding, var(--site-content-container-padding)));
    --frontend-template-gap-effective: var(--frontend-template-gap-webview, var(--frontend-template-gap, var(--site-content-container-gap)));
    --frontend-template-shadow-effective: var(--frontend-template-shadow-webview, var(--frontend-template-shadow, var(--site-content-container-shadow)));
    --frontend-template-aspect-ratio-effective: var(--frontend-template-aspect-ratio-webview, var(--frontend-template-aspect-ratio, auto));
}

body.app-ua-container-webapp .content.content--frontend-design-v2 > [data-frontend-component],
body.app-ua-container-webapp .content.content--frontend-design-v2 > [data-frontend-system-component] {
    --frontend-template-background-effective: var(--frontend-template-background-webapp, var(--frontend-template-background, var(--site-content-container-background)));
    --frontend-template-text-color-effective: var(--frontend-template-text-color-webapp, var(--frontend-template-text-color, var(--site-content-container-text-color)));
    --frontend-template-border-color-effective: var(--frontend-template-border-color-webapp, var(--frontend-template-border-color, var(--site-content-container-border-color)));
    --frontend-template-border-width-effective: var(--frontend-template-border-width-webapp, var(--frontend-template-border-width, var(--site-content-container-border-width)));
    --frontend-template-radius-effective: var(--frontend-template-radius-webapp, var(--frontend-template-radius, var(--site-content-container-radius)));
    --frontend-template-padding-effective: var(--frontend-template-padding-webapp, var(--frontend-template-padding, var(--site-content-container-padding)));
    --frontend-template-gap-effective: var(--frontend-template-gap-webapp, var(--frontend-template-gap, var(--site-content-container-gap)));
    --frontend-template-shadow-effective: var(--frontend-template-shadow-webapp, var(--frontend-template-shadow, var(--site-content-container-shadow)));
    --frontend-template-aspect-ratio-effective: var(--frontend-template-aspect-ratio-webapp, var(--frontend-template-aspect-ratio, auto));
}

.frontend-component {
    width: 100%;
    margin: 0;
    padding: 0;
}

.frontend-component--width-third,
.frontend-component--width-half,
.frontend-component--width-two-thirds { width: 100%; }

.frontend-component__surface {
    position: relative;
    overflow: hidden;
    padding: var(--frontend-template-padding-effective, var(--site-content-container-padding));
    border: var(--frontend-template-border-width-effective, var(--site-content-container-border-width)) solid var(--frontend-template-border-color-effective, var(--site-content-container-border-color));
    border-radius: var(--frontend-template-radius-effective, var(--site-content-container-radius));
    background: var(--frontend-template-background-effective, var(--site-content-container-background));
    color: var(--frontend-template-text-color-effective, var(--site-content-container-text-color));
    box-shadow: var(--frontend-template-shadow-effective, var(--site-content-container-shadow));
    font-family: var(--font-content-body);
    font-size: calc(var(--font-size-base) * var(--font-scale-content-body));
}

.frontend-component--hero .frontend-component__surface {
    min-height: clamp(220px, 42vh, 540px);
    display: grid;
    place-items: center;
    isolation: isolate;
}
.frontend-component--height-compact .frontend-component__surface { min-height: clamp(180px, 28vh, 360px); }
.frontend-component--height-large .frontend-component__surface { min-height: clamp(320px, 62vh, 760px); }
.frontend-component--align-left .frontend-component__surface { place-items: center start; }
.frontend-component--align-right .frontend-component__surface { place-items: center end; }
.frontend-component--align-center .frontend-component__content { text-align: center; }
.frontend-component--align-right .frontend-component__content { text-align: right; }
.frontend-component--text-narrow .frontend-component__content { max-width: 620px; margin-inline: auto; }
.frontend-component--text-standard .frontend-component__content { max-width: 820px; margin-inline: auto; }

.frontend-component--hero .frontend-component__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.frontend-component--hero .frontend-component__surface::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--site-overlay-background);
    z-index: -1;
}

.frontend-component__content { display: grid; gap: var(--space-3); }
.frontend-component__title {
    margin: 0;
    color: var(--site-content-container-heading-text-color);
    font-family: var(--font-content-heading);
    font-size: calc(var(--font-size-base) * var(--font-scale-content-heading));
    font-weight: var(--site-content-container-heading-weight);
    text-align: var(--site-content-container-heading-alignment);
}
.frontend-component__text { margin: 0; white-space: normal; }
.frontend-component__media { display: block; width: 100%; height: auto; border-radius: var(--site-content-container-radius); object-fit: cover; }
.frontend-component__media--16-9 { aspect-ratio: 16 / 9; }
.frontend-component__media--4-3 { aspect-ratio: 4 / 3; }
.frontend-component__media--1-1 { aspect-ratio: 1; }
.frontend-component__action {
    justify-self: start;
    padding: var(--button-padding-y) var(--button-padding-x);
    border: 1px solid var(--site-highlight-color);
    border-radius: var(--admin-button-radius);
    color: var(--text-main);
    text-decoration: none;
}
.frontend-component__action--primary { background: var(--site-highlight-color); color: var(--text-on-accent, #000); }
.frontend-component__action--secondary { background: var(--surface-soft); }
.frontend-component__action--quiet { border-color: transparent; background: transparent; color: var(--site-highlight-color); }
.frontend-component__divider { border: 0; border-top: 1px solid var(--site-content-container-border-color); }
.frontend-component__spacer--small { height: var(--space-3); }

/* Redaktionelle Startseiten-Gruppen verwenden dieselbe Überschriftenfläche
   wie die Standortübersicht, behalten darunter aber ein freies 12er-Raster. */
.content_container.frontend-content-group {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: stretch;
}
.content.content--frontend-design-v2 > [data-frontend-system-component],
.content_container.frontend-content-group {
    gap: var(--frontend-template-gap-effective, var(--site-content-container-gap));
    padding: var(--frontend-template-padding-effective, 0);
    border: var(--frontend-template-border-width-effective, 0) solid var(--frontend-template-border-color-effective, transparent);
    border-radius: var(--frontend-template-radius-effective, 0);
    background: var(--frontend-template-background-effective, transparent);
    color: var(--frontend-template-text-color-effective, inherit);
    box-shadow: var(--frontend-template-shadow-effective, none);
}
.frontend-content-group > .content_container__header {
    grid-column: 1 / -1;
    width: auto;
}
.frontend-content-group > .frontend-content-group__item {
    grid-column: span var(--frontend-content-item-span, 12);
    width: 100%;
    max-width: none;
    min-width: 0;
}
.frontend-content-group__item > .info-card {
    height: 100%;
    box-sizing: border-box;
}
.frontend-component__spacer--medium { height: var(--space-6); }
.frontend-component__spacer--large { height: var(--space-10); }

/* Public table reservation component. The same form is used inline and in the
   modal variant; public notices deliberately remain one layer above it. */
.frontend-system-reservation {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--frontend-template-gap-effective, var(--site-content-container-gap));
    padding: var(--frontend-template-padding-effective, 0);
    border: var(--frontend-template-border-width-effective, 0) solid var(--frontend-template-border-color-effective, transparent);
    border-radius: var(--frontend-template-radius-effective, 0);
    background: var(--frontend-template-background-effective, transparent);
    color: var(--frontend-template-text-color-effective, inherit);
    box-shadow: var(--frontend-template-shadow-effective, none);
}
.frontend-system-reservation > .content_container__header,
.frontend-system-reservation > .content_container__content {
    grid-column: 1 / -1;
    width: auto;
    max-width: none;
}
.public-reservation-inline,
.public-reservation-launch,
.public-reservation-dialog__panel {
    box-sizing: border-box;
    padding: clamp(16px, 3vw, 28px);
    border: 1px solid color-mix(in srgb, var(--site-highlight-color) 32%, var(--site-content-container-border-color));
    border-radius: var(--site-content-container-radius);
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--site-highlight-color) 18%, transparent), transparent 42%),
        var(--site-content-container-background);
    color: var(--site-content-container-text-color);
}
.public-reservation-launch {
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    text-align: center;
}
.public-reservation-launch p,
.public-reservation-dialog__intro { margin: 0; }
.public-reservation-form { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.public-reservation-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}
.public-reservation-form__field { display: grid; gap: 6px; min-width: 0; }
.public-reservation-form__field > span {
    color: var(--site-content-container-heading-text-color);
    font-family: var(--font-content-heading);
    font-size: var(--font-size-small);
}
.public-reservation-form input,
.public-reservation-form textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--site-content-container-text-color) 24%, transparent);
    border-radius: max(8px, calc(var(--site-content-container-radius) * .55));
    outline: none;
    background: color-mix(in srgb, var(--site-content-container-text-color) 9%, var(--site-content-container-background));
    color: var(--site-content-container-text-color);
    font: inherit;
}
.public-reservation-form textarea { min-height: 104px; resize: vertical; }
.public-reservation-form input:focus,
.public-reservation-form textarea:focus {
    border-color: var(--site-highlight-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-highlight-color) 24%, transparent);
}
.public-reservation-form__field--wide { grid-column: 1 / -1; }
.public-reservation-form__hint {
    margin: calc(var(--space-3) * -0.5) 0 0;
    color: var(--text-muted);
    font-size: var(--font-size-meta);
}
.public-reservation-form__privacy {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 10px;
    font-size: var(--font-size-small);
}
.public-reservation-form__privacy input { width: 20px; min-height: 20px; margin: 2px 0 0; padding: 0; accent-color: var(--site-highlight-color); }
.public-reservation-form__submit {
    appearance: none;
    justify-self: start;
    min-height: 44px;
    padding: 10px clamp(18px, 4vw, 34px);
    border: 1px solid color-mix(in srgb, var(--site-highlight-color) 80%, var(--text-main));
    border-radius: max(9px, calc(var(--site-content-container-radius) * .6));
    background: linear-gradient(135deg, color-mix(in srgb, var(--site-highlight-color) 82%, white), var(--site-highlight-color));
    color: var(--text-on-accent, #000);
    font-family: var(--font-content-heading);
    font-size: var(--font-size-base);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--site-highlight-color) 24%, transparent);
}
.public-reservation-form__submit:hover,
.public-reservation-form__submit:focus-visible { filter: brightness(1.08); transform: translateY(-1px); }
.public-reservation-form__submit:disabled { cursor: wait; opacity: .68; transform: none; }
.public-reservation-form__status {
    padding: 10px 12px;
    border: 1px solid currentColor;
    border-radius: 10px;
    background: color-mix(in srgb, currentColor 12%, transparent);
}
.public-reservation-form__status.is-success { color: var(--notice-success-color, #5dcc73); }
.public-reservation-form__status.is-error { color: var(--notice-error-color, #e76f51); }
.public-reservation-form__trap {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}
.public-reservation-dialog {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-layer-notice) - 1);
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: calc(var(--header-viewport-height, var(--header-height)) + env(safe-area-inset-top) + 12px) max(10px, env(safe-area-inset-right)) calc(var(--footer-viewport-inset) + 12px) max(10px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--site-page-background) 72%, transparent);
    backdrop-filter: blur(12px);
}
.public-reservation-dialog[hidden] { display: none !important; }
.public-reservation-dialog__panel {
    position: relative;
    width: min(720px, 100%);
    max-height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
}
.public-reservation-dialog__panel h2 {
    margin: 0 44px var(--space-3) 0;
    color: var(--site-content-container-heading-text-color);
    font-family: var(--font-content-heading);
}
.public-reservation-dialog__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid color-mix(in srgb, var(--site-content-container-text-color) 24%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--site-content-container-text-color) 12%, transparent);
    color: var(--site-content-container-text-color);
    font: 700 24px/1 sans-serif;
    cursor: pointer;
}
body.public-reservation-dialog-open { overflow: hidden; }

@media (max-width: 620px) {
    .public-reservation-form__grid { grid-template-columns: 1fr; }
    .public-reservation-dialog { padding-inline: max(8px, env(safe-area-inset-left), env(safe-area-inset-right)); }
    .public-reservation-inline,
    .public-reservation-launch,
    .public-reservation-dialog__panel { padding: 14px; }
}

@media (max-width: 760px) {
    .content.content--frontend-design-v2 {
        padding-inline: max(8px, var(--frontend-design-grid-gap));
    }
    .content.content--frontend-design-v2 > [data-frontend-component],
    .content.content--frontend-design-v2 > [data-frontend-system-component] {
        grid-column: span var(--frontend-component-span-mobile, 12);
        order: var(--frontend-component-order-mobile, 0);
    }
}

body[data-frontend-layout-enabled="1"][data-frontend-layout-body="stacked"] .content--frontend-design-v2 {
    --frontend-design-page-max-width: var(--site-content-container-max-width);
}

body[data-frontend-layout-enabled="1"][data-frontend-layout-body="split-grid"] .content--frontend-design-v2 {
    --frontend-design-page-max-width: 1440px;
}

body[data-frontend-layout-enabled="1"][data-frontend-layout-body="editorial"] .content--frontend-design-v2 {
    --frontend-design-page-max-width: min(1040px, var(--site-content-container-max-width));
    --frontend-design-grid-gap: calc(var(--site-content-container-gap) * 1.5);
}

body[data-frontend-layout-enabled="1"][data-frontend-layout-body="card-grid"] .content--frontend-design-v2 {
    --frontend-design-page-max-width: 1320px;
    padding-block: var(--site-content-container-gap);
    background: color-mix(in srgb, var(--site-content-container-background) 34%, transparent);
    border-radius: var(--site-content-container-radius);
}

body[data-frontend-layout-enabled="1"][data-frontend-layout-body="dense-grid"] .content--frontend-design-v2 {
    --frontend-design-page-max-width: 1440px;
    --frontend-design-grid-gap: max(6px, calc(var(--site-content-container-gap) * 0.55));
}

body[data-frontend-layout-enabled="1"][data-frontend-layout-header="split-brand"] .header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
}

body[data-frontend-layout-enabled="1"][data-frontend-layout-header="hero-compact"] {
    --header-height: 60px;
}

body[data-frontend-layout-enabled="1"][data-frontend-layout-header="app-bar"] {
    --header-height: 54px;
}

body[data-frontend-layout-enabled="1"][data-frontend-layout-header="app-bar"] .shop_name--header {
    font-size: calc(var(--font-size-header-brand) * 0.84);
}

body[data-frontend-layout-enabled="1"][data-frontend-layout-navbar="top-inline"] #navbar,
body[data-frontend-layout-enabled="1"][data-frontend-layout-navbar="bottom-tabs"] #navbar {
    position: sticky;
    left: 0;
    right: 0;
    top: calc(var(--header-viewport-height, var(--header-height)) + env(safe-area-inset-top));
    display: block;
    height: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: transparent;
    padding: 0 10px;
    z-index: var(--z-layer-navbar);
}

body[data-frontend-layout-enabled="1"][data-frontend-layout-navbar="top-inline"] #navbar .navbar,
body[data-frontend-layout-enabled="1"][data-frontend-layout-navbar="bottom-tabs"] #navbar .navbar {
    width: auto;
    max-width: min(1180px, calc(100vw - 20px));
    height: auto;
    margin: 0 auto;
    padding: 10px 12px;
    border: 1px solid var(--app-shell-border-color-current, var(--border-color));
    border-radius: 18px;
    background: var(--app-shell-elevated-background-current, var(--site-shell-elevated-background));
    box-shadow: var(--shadow-standard);
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow: auto hidden;
}

body[data-frontend-layout-enabled="1"][data-frontend-layout-navbar="bottom-tabs"] #navbar {
    top: auto;
    bottom: calc(var(--footer-stack-height) + env(safe-area-inset-bottom) + 8px);
}

body[data-frontend-layout-enabled="1"][data-frontend-layout-navbar="bottom-tabs"] #navbar .navbar {
    border-radius: 999px;
}

body[data-frontend-layout-enabled="1"][data-frontend-layout-footer="compact"] footer,
body[data-frontend-layout-enabled="1"][data-frontend-layout-footer="meta-bar"] footer {
    background: var(--app-shell-elevated-background-current, var(--site-shell-elevated-background));
}

body[data-frontend-layout-enabled="1"][data-frontend-layout-footer="compact"] .footer__content {
    gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
}

body.app-frontend-template--editorial_grid .content {
    background:
        radial-gradient(circle at top left, rgba(255, 214, 102, 0.08), transparent 28%),
        linear-gradient(180deg, color-mix(in srgb, var(--text-main, #fff) 2%, transparent), transparent 40%);
}

body.app-frontend-template--minimal_split .content {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--text-main, #fff) 3%, transparent) 0, color-mix(in srgb, var(--text-main, #fff) 3%, transparent) 1px, transparent 1px, transparent 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--text-main, #fff) 1.5%, transparent), transparent 45%);
    background-size: 32px 32px, auto;
}

html.no-js:not(.app-noscript-notice-dismissed) {
    --footer-secondary-height: 72px;
}

html,
body {
    min-height: 100%;
}

html {
    scroll-padding-bottom: calc(var(--footer-stack-height) + env(safe-area-inset-bottom));
}

/* --- BASE / TYPOGRAPHY --- */
body { 
    --app-page-background-current: var(--site-page-background);
    --app-surface-background-current: var(--site-surface-background);
    --app-shell-background-current: var(--site-shell-background);
    --app-shell-elevated-background-current: var(--site-shell-elevated-background);
    --app-header-background-current: var(--site-header-background);
    --app-navbar-background-current: var(--site-navbar-background);
    --app-footer-background-current: var(--site-footer-background);
    --app-shell-border-color-current: var(--site-shell-border-color, var(--border-color));
    box-sizing: border-box;
    margin: 0;
    background-color: var(--app-page-background-current, var(--site-page-background, #000));
    color: var(--text-main, #FFF);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    overflow: hidden auto;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

body.app-scope-admin {
    --app-page-background-current: var(--admin-page-background, var(--site-page-background));
    --app-surface-background-current: var(--admin-surface-background, var(--site-surface-background));
    --app-shell-background-current: var(--admin-shell-background, var(--site-shell-background));
    --app-shell-elevated-background-current: var(--admin-shell-elevated-background, var(--site-shell-elevated-background));
    --app-header-background-current: var(--admin-header-background, var(--site-header-background));
    --app-navbar-background-current: var(--admin-navbar-background, var(--site-navbar-background));
    --app-footer-background-current: var(--admin-footer-background, var(--site-footer-background));
    --app-shell-border-color-current: var(--admin-shell-border-color, var(--site-shell-border-color, var(--border-color)));
}

html.app-platform-ios,
html.app-ua-platform-ios,
body.app-platform-ios,
body.app-ua-platform-ios {
    min-height: -webkit-fill-available;
}

body.app-platform-ios,
body.app-ua-platform-ios {
    -webkit-text-size-adjust: 100%;
}

body.app-container-webview,
body.app-container-embedded,
body.app-ua-container-webview,
body.app-ua-container-embedded {
    overscroll-behavior-y: contain;
}

body.app-platform-ios.app-form-mobile input,
body.app-platform-ios.app-form-mobile select,
body.app-platform-ios.app-form-mobile textarea,
body.app-platform-ios.app-ua-form-mobile input,
body.app-platform-ios.app-ua-form-mobile select,
body.app-platform-ios.app-ua-form-mobile textarea,
body.app-ua-platform-ios.app-form-mobile input,
body.app-ua-platform-ios.app-form-mobile select,
body.app-ua-platform-ios.app-form-mobile textarea,
body.app-ua-platform-ios.app-ua-form-mobile input,
body.app-ua-platform-ios.app-ua-form-mobile select,
body.app-ua-platform-ios.app-ua-form-mobile textarea {
    /* 16px verhindert iOS-Auto-Zoom bei fokussierten Formularfeldern. */
    font-size: 16px;
}

.app-noscript-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    width: 100%;
    padding: 12px 16px;
    border-top: 1px solid rgba(221, 114, 0, 0.65);
    border-bottom: 1px solid rgba(221, 114, 0, 0.65);
    background: #ffb347;
    color: #8b0000;
    text-align: center;
}

.app-noscript-notice p {
    margin: 0;
    font-size: var(--font-size-small);
    line-height: 1.35;
}

.app-noscript-notice__message {
    flex: 1 1 auto;
}

.app-noscript-notice__dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(139, 0, 0, 0.38);
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-main, #fff) 28%, transparent);
    color: #8b0000;
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.app-noscript-notice--footer {
    margin-top: 10px;
}

.app-incident-popup {
    position: fixed;
    z-index: var(--z-layer-notice);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 20px);
    max-width: 540px;
    box-sizing: border-box;
    pointer-events: auto;
}

.app-incident-popup--noscript {
    bottom: calc(var(--footer-viewport-inset) + 8px);
}

.app-incident-popup--toast {
    top: calc(var(--header-viewport-height, var(--header-height)) + env(safe-area-inset-top) + 10px);
}

.app-incident-popup--modal {
    top: 50%;
    transform: translate(-50%, -50%);
}

.app-incident-popup--inline {
    position: relative;
    z-index: 1;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

.app-incident-popup__content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--notice-popup-border-color, color-mix(in srgb, var(--app-incident-accent, #2196f3) 45%, transparent));
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--notice-popup-surface-color, color-mix(in srgb, var(--app-incident-accent, #2196f3) 16%, color-mix(in srgb, var(--theme-tone-black, #000) 88%, transparent)));
    box-shadow: var(--shadow-standard);
}

.app-incident-popup__text {
    min-width: 0;
}

.app-incident-popup__badge {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--app-incident-accent, #2196f3);
    color: #fff;
    font-size: var(--font-size-meta);
    font-weight: 700;
    line-height: 1;
}

.app-incident-popup__message {
    margin: 0;
    color: var(--notice-popup-text-color, #ffffff);
    font-size: var(--font-size-small);
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.app-incident-popup__hint {
    margin: 6px 0 0;
    color: var(--notice-hint-text-color, #aaaaaa);
    font-size: var(--font-size-meta);
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.app-notice--incident-popup-host {
    align-items: center;
}

html.no-js .app-notice[data-app-notice-id="noscript-footer"] ~ .app-notice--incident-popup-host {
    display: none;
}

.app-incident-popup__close {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--notice-popup-close-border-color, color-mix(in srgb, var(--app-incident-accent, #2196f3) 50%, transparent));
    border-radius: 999px;
    background: var(--notice-popup-close-surface-color, color-mix(in srgb, var(--text-main, #fff) 16%, transparent));
    color: var(--notice-popup-text-color, #ffffff);
    font-size: var(--font-size-base);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
}

html.js-enabled .app-noscript-notice,
html.js-enabled .app-notice[data-app-notice-id="noscript-footer"],
html.js-enabled [data-app-notice-indicator="noscript-footer"] {
    display: none !important;
}

.no-js #popup_start {
    display: none !important;
}

.no-js .app-noscript-notice--footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--footer-height) + env(safe-area-inset-bottom));
    z-index: 3;
    min-height: var(--footer-secondary-height);
    margin-top: 0;
}

.app-notice-stack {
    position: fixed;
    left: 0;
    right: 0;
    z-index: var(--z-layer-notice);
    display: grid;
    gap: 10px;
    pointer-events: none;
}

.app-notice-stack--below_header {
    top: calc(var(--header-viewport-height, var(--header-height)) + env(safe-area-inset-top) + 8px);
}

.app-notice-stack--center {
    top: 50%;
    transform: translateY(-50%);
    padding: calc(var(--header-viewport-height, var(--header-height)) + env(safe-area-inset-top) + 8px) 0 calc(var(--footer-viewport-inset) + 8px);
    box-sizing: border-box;
}

.app-notice-stack--above_footer {
    bottom: calc(var(--footer-viewport-inset) + 8px);
}

body[data-frontend-layout-notice-stack="compact"] .app-notice-stack {
    gap: 6px;
}

body[data-frontend-layout-notice-stack="compact"] .app-notice {
    padding: 0 6px;
}

body[data-frontend-layout-notice-stack="compact"] .app-notice__panel {
    padding: 10px 40px 10px 12px;
    border-radius: 10px;
}

body[data-frontend-layout-notice-stack="spacious"] .app-notice-stack {
    gap: 14px;
}

body[data-frontend-layout-notice-stack="spacious"] .app-notice {
    padding: 0 16px;
}

body[data-frontend-layout-notice-stack="spacious"] .app-notice__panel {
    width: min(100%, 980px);
    padding: 16px 46px 16px 18px;
    border-radius: 16px;
}

body[data-frontend-layout-notice-stack="minimal"] .app-notice-stack {
    gap: 4px;
}

body[data-frontend-layout-notice-stack="minimal"] .app-notice {
    padding: 0 4px;
}

body[data-frontend-layout-notice-stack="minimal"] .app-notice__panel {
    width: min(100%, 760px);
    padding: 8px 36px 8px 10px;
    border-radius: 8px;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--theme-tone-black, #000) 20%, transparent);
}

.app-notice {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    pointer-events: none;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.24s ease, transform 0.24s ease;
}

/* Verhindert dass display:flex die UA-Regel [hidden]{display:none} überschreibt */
.app-notice[hidden] {
    display: none;
}

.app-notice--closing {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.app-notice--closing .app-notice__panel,
.app-notice--closing .app-notice__backdrop,
.app-notice--hidden,
.app-notice--hidden .app-notice__panel,
.app-notice--hidden .app-notice__backdrop {
    pointer-events: none;
}

.app-notice__backdrop {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: auto;
    cursor: default;
    text-decoration: none;
    background: transparent;
}

.app-notice__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 920px);
    padding: 14px 44px 14px 16px;
    border: 1px solid var(--app-notice-accent-border, rgba(255, 179, 71, 0.46));
    border-radius: 14px;
    background: linear-gradient(135deg, var(--app-notice-surface, rgba(255, 179, 71, 0.22)), var(--app-notice-background, rgba(255, 179, 71, 0.16)));
    color: var(--app-notice-accent-text, #ffffff);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--theme-tone-black, #000) 28%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    pointer-events: auto;
}

.app-notice__panel,
.app-notice__panel * {
    pointer-events: auto;
}

.app-notice--incident-popup-host .app-incident-popup,
.app-notice--incident-popup-host .app-incident-popup * {
    pointer-events: auto;
}

.app-notice--center .app-notice__panel {
    width: min(100%, 560px);
}

.app-notice__title,
.app-notice__message,
.app-notice__actions {
    margin: 0;
}

.app-notice__title {
    margin-bottom: 6px;
    font-size: var(--font-size-small);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.app-notice__message {
    font-size: var(--font-size-small);
    line-height: 1.45;
}

.app-notice__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.app-notice__action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--notice-button-border-color, color-mix(in srgb, var(--text-main, #fff) 24%, transparent));
    background: var(--notice-button-surface-color, color-mix(in srgb, var(--text-main, #fff) 12%, transparent));
    color: var(--notice-button-text-color, inherit);
    font-size: var(--font-size-small);
    font-weight: 700;
    text-decoration: none;
}

.app-notice__action-item {
    display: grid;
    gap: 4px;
}

.app-notice__action-hint,
.app-notice__hint {
    display: block;
    color: var(--notice-hint-text-color, #aaaaaa);
    font-size: var(--font-size-meta);
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.app-notice__hint {
    margin-top: 8px;
}

.app-notice__dismiss {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--app-notice-accent-border, rgba(255, 179, 71, 0.46));
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-main, #fff) 18%, transparent);
    color: inherit;
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.app-notice__close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--app-notice-accent-border, rgba(255, 179, 71, 0.46));
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-main, #fff) 18%, transparent);
    color: inherit;
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    z-index: 2;
}

.app-browser-notice-stack {
    pointer-events: none;
}

.app-browser-notice[hidden] {
    display: none !important;
}

.app-browser-notice--unsupported-only {
    display: none !important;
}

html.app-browser-unsupported .app-browser-notice--unsupported-only {
    display: block !important;
}

.app-browser-notice {
    --app-notice-accent: var(--notice-warning-color);
    --app-notice-accent-text: #f7d488;
    --app-notice-accent-border: rgba(240, 198, 116, 0.55);
    --app-notice-surface: rgba(42, 28, 0, 0.92);
    --app-notice-background: rgba(42, 28, 0, 0.84);
}

.app-browser-notice--admin {
    --app-notice-accent: var(--notice-error-color);
    --app-notice-accent-text: #ffd4cf;
    --app-notice-accent-border: rgba(255, 142, 130, 0.58);
    --app-notice-surface: rgba(77, 18, 15, 0.94);
    --app-notice-background: rgba(77, 18, 15, 0.88);
}

.app-browser-debug {
    position: fixed;
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--footer-height));
    z-index: 42;
    width: min(320px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px));
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--text-main, #fff) 16%, transparent);
    border-radius: 12px;
    background: rgba(8, 12, 18, 0.92);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--theme-tone-black, #000) 45%, transparent);
    color: #f5f7fb;
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: var(--font-size-meta);
    line-height: 1.45;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

body.app-container-webview .app-browser-debug,
body.app-container-embedded .app-browser-debug,
body.app-ua-container-webview .app-browser-debug,
body.app-ua-container-embedded .app-browser-debug {
    backdrop-filter: none;
}

.app-browser-debug__title {
    display: block;
    margin-bottom: 8px;
    color: #f0c674;
    font-size: var(--font-size-meta);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.app-browser-debug__list {
    display: grid;
    gap: 6px;
    margin: 0;
}

.app-browser-debug__list div {
    display: grid;
    grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.app-browser-debug__list dt,
.app-browser-debug__list dd {
    margin: 0;
}

.app-browser-debug__list dt {
    color: color-mix(in srgb, var(--text-main, #fff) 68%, transparent);
}

.app-browser-debug__list dd {
    word-break: break-word;
}

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

html.body--no_scroll,
body.body--no_scroll {
    overflow: hidden;
    overscroll-behavior: none;
}

a {
    color: #fff;
}

hr {
    margin: 0 auto 0 auto;
}
h1 {
    text-align: center;
    font-family: var(--font-page-title);
    font-size: calc(1rem * var(--font-scale-page-title));
    font-weight: var(--site-page-title-weight);
    color: var(--site-page-title-color);
}

/* Shared Form Element Styles */
input, button, select, textarea {
    font-family: var(--font-primary);
    font-size: inherit;
}

input {
    background-color: #555;
    color: white;
    border: none;
    cursor: pointer;
    opacity: 0.8;
    width: 50%; 
    padding: 10px;
}
input[type="checkbox"],
input[type="radio"] {
    width: auto;
    padding: 0;
    background-color: transparent;
    opacity: 1;
}
button {
    background-color: #999;
    color: white;
    border: none;
    cursor: pointer;
    opacity: 0.8;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: var(--font-size-base);
    padding: 10px;
    width: 50%;
}

/* --- SHARED SEARCH UI --- */
.shared-search {
    display: grid;
    gap: 10px;
}

.shared-search__hint {
    display: block;
    margin: 0;
    color: color-mix(in srgb, var(--text-main, #fff) 66%, transparent);
    font-size: var(--font-size-small);
}

.shared-search__hint--accent {
    color: #8fb6ff;
}

.shared-search__input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--text-main, #fff) 12%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--text-main, #fff) 5%, transparent);
    color: #fff;
}

.shared-search__input::placeholder {
    color: color-mix(in srgb, var(--text-main, #fff) 45%, transparent);
}

.shared-search__results {
    display: grid;
    gap: 10px;
    max-height: 50vh;
    overflow: auto;
    padding-right: 2px;
}

.shared-search__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--text-main, #fff) 8%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--text-main, #fff) 4%, transparent);
    color: #fff;
}

.shared-search__item--checklist {
    cursor: pointer;
}

.shared-search__item input {
    width: auto;
    margin: 3px 0 0;
    flex: 0 0 auto;
}

.shared-search__item-body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.shared-search__item-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.shared-search__meta {
    display: block;
    color: color-mix(in srgb, var(--text-main, #fff) 68%, transparent);
}

.shared-search__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--font-size-meta, 0.78rem);
    line-height: 1.2;
    color: #fff;
    background: color-mix(in srgb, var(--text-main, #fff) 12%, transparent);
}

.shared-search__badge--type {
    background: color-mix(in srgb, var(--text-main, #fff) 10%, transparent);
    color: color-mix(in srgb, var(--text-main, #fff) 82%, transparent);
}

.shared-search__badge--suggested {
    background: rgba(240, 198, 116, 0.14);
    border: 1px solid rgba(240, 198, 116, 0.45);
    color: #f0c674;
}

.shared-search__badge--menu {
    background: #eaf7ea;
    color: #216e39;
}

.shared-search__badge--options {
    background: #dff4ff;
    color: #0b5394;
}

.shared-search__empty {
    margin: 0;
    color: color-mix(in srgb, var(--text-main, #fff) 68%, transparent);
}

.shared-search__section-row {
    pointer-events: none;
}

.shared-search__section-label {
    padding: 10px 12px 3px;
    font-size: var(--font-size-meta, 0.78rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.055em;
    color: color-mix(in srgb, var(--text-main, #fff) 38%, transparent);
    user-select: none;
}

.editable_table__picker {
    display: grid;
    gap: 12px;
}

.editable_table__hint {
    display: block;
    color: color-mix(in srgb, var(--text-main, #fff) 70%, transparent);
}

.editable_table__selected {
    display: grid;
    gap: 6px;
}

.editable_table__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    background: var(--bg-input, #444);
    position: relative;
    overflow: hidden;
}

.editable_table__item[data-pending-delete="1"] .editable_table__actions {
    position: relative;
    z-index: 2;
}

.editable_table__item-body {
    display: grid;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
    cursor: pointer;
}

/* Wrapper-Divs von createAdminCompactListRow transparent machen,
   damit strong/small direkt im item-body-Grid liegen */
.editable_table__item-inner {
    display: contents;
}

.editable_table__item .row-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.editable_table__item-meta,
.editable_table__empty {
    color: var(--text-muted, #aaaaaa);
    overflow-wrap: anywhere;
}

.editable_table__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
    flex: 0 0 auto;
    white-space: nowrap;
}

.btn-add-row,
.editable_table__edit,
.editable_table__remove {
    width: auto;
    margin: 0;
}

.editable_table__edit {
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--text-main, #ffffff);
    font-size: calc(var(--font-size-title) * 1);
    line-height: 0;
}

.editable_table__remove {
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--accent-red, #c62828);
    font-size: calc(var(--font-size-title) * 1);
    line-height: 0;
}

.option-inventory-assignment-dialog__quantity-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.option-inventory-assignment-dialog__quantity-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

.option-inventory-assignment-dialog__quantity-suffix {
    flex: 0 0 auto;
    padding: 8px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--text-main, #fff) 8%, transparent);
    color: var(--text-muted, #aaaaaa);
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .editable_table__item-meta {
        display: none;
    }
}

.editable_table__edit:hover,
.editable_table__remove:hover {
    transform: scale(1.03);
}

/* Einheitliches Styling für temporäre Options-Tabellen in Popups. */
#tmp_options,
#tmp_choice_options,
#tmp_selection_options {
    width: 100%;
    margin-top: 10px;
    background-color: var(--bg-panel, #2a2a2a);
    border-radius: var(--menu-radius-sm, 5px);
    overflow: hidden;
}

/* Einheitlicher Add-Button für temporäre Options-Tabellen. */
.btn-add-option {
    width: 100%;
    background-color: transparent;
    border: 1px dashed var(--menu-border-muted, #666);
    color: var(--menu-text-dim, #888);
    padding: 10px;
    margin-top: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.btn-add-option:hover {
    background-color: #333;
    color: #fff;
    border-color: #fff;
}

.option-inventory-assignment-dialog__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    color: #fff;
}

.option-inventory-assignment-dialog__toggle input {
    width: auto;
    margin: 0;
}

.option-inventory-create-dialog__form {
    display: grid;
    gap: 14px;
    margin-top: 12px;
}

.option-inventory-create-dialog__field {
    display: grid;
    gap: 7px;
}

.option-inventory-create-dialog__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 700;
    color: #fff;
}

.option-inventory-create-dialog__label-meta {
    font-size: var(--font-size-small, 0.92rem);
    font-weight: 600;
    color: color-mix(in srgb, var(--text-main, #fff) 58%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* --- OVERLAYS / POPUP --- */
.overlay {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    width: 0;
    height: 100vh;
    height: 100dvh;
    background-color: var(--site-overlay-background, color-mix(in srgb, var(--theme-tone-black, #000) 80%, transparent));
    z-index: var(--z-layer-overlay);
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
}

html.app-platform-ios .overlay,
html.app-ua-platform-ios .overlay {
    min-height: -webkit-fill-available;
}

.overlay--active {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
    overflow-x: hidden;
    visibility: visible;
    pointer-events: auto;
}

body.app-container-webview .overlay--active,
body.app-container-embedded .overlay--active,
body.app-ua-container-webview .overlay--active,
body.app-ua-container-embedded .overlay--active {
    overscroll-behavior: contain;
}

.overlay--scroll {
    overflow: scroll;
}

.overlay--content {
    top: var(--header-viewport-height, var(--header-height));
    bottom: var(--footer-stack-height);
    height: auto;
}

.overlay--transition{
    transition: 1s;
}

#navbar.overlay--transition {
    transition: none;
}

body.navbar-ui-ready #navbar.overlay--transition {
    transition: 1s;
}

.popup_start_container{
    position: relative;
    width: 100%;
    min-height: calc(100% + 2px);
    height: 100%;
    text-align: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.popup_start_container--closing {
    pointer-events: none;
}

#popup_start {
    transform: translateY(0);
    will-change: transform;
}

#popup_start.overlay--closing {
    opacity: 1;
    transform: translateY(calc(-100% - max(40px, env(safe-area-inset-top))));
    transition: transform var(--popup-start-close-duration) var(--popup-start-close-easing);
}
.popup_start__top{
    width: 100%;
    height: 20px;
}
.popup_start__bottom{
    width: 100%;
    height: max(100%, 120px);
}

div.arrow {
    display: block;
    border-right: solid white;
    border-bottom: solid white;
}
.arrow--up {
    transform: translateX(-50%) rotate(225deg);
}
.arrow--left {
    transform: translateX(-50%) rotate(135deg);
}
.arrow--down {
    transform: translateX(-50%) rotate(45deg);
}
.arrow--right {
    transform: translateX(-50%) rotate(315deg);
}
.arrow--start-poopup {
    position:absolute;
    animation-name: jump;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    bottom: 40px;
    left: 50%;
    cursor: pointer;
    width: 30px;
    height: 30px;
}

#popup_start.overlay--closing .arrow--start-poopup {
    animation: none;
}

@keyframes jump {
    0%   {bottom: 40px;}
  10%  {bottom: 70px;}
  20%  {bottom: 40px;}
  30%  {bottom: 70px;}
  40%, 100% {bottom: 40px;}
}

/* --- NAVIGATION --- */
body[data-frontend-layout-enabled="1"] > #navbar {
    --frontend-navbar-panel-background-effective: var(--frontend-template-background, var(--app-shell-elevated-background-current, var(--site-shell-elevated-background)));
    --frontend-navbar-panel-text-effective: var(--frontend-template-text-color, var(--site-navbar-text-color));
    --frontend-navbar-panel-border-color-effective: var(--frontend-template-border-color, var(--site-navbar-border-color));
    --frontend-navbar-panel-border-width-effective: var(--frontend-template-border-width, 1px);
    --frontend-navbar-panel-radius-effective: var(--frontend-template-radius, 18px);
    --frontend-navbar-panel-shadow-effective: var(--frontend-template-shadow, var(--surface-card-shadow));
    --frontend-navbar-overlay-blur-effective: var(--frontend-template-overlay-blur, 10px);
    background: var(--frontend-template-overlay-background, #0000001f);
    -webkit-backdrop-filter: blur(var(--frontend-navbar-overlay-blur-effective)) saturate(1.08);
    backdrop-filter: blur(var(--frontend-navbar-overlay-blur-effective)) saturate(1.08);
    border-width: 0;
    border-radius: 0;
    box-shadow: none;
}

body[data-frontend-layout-enabled="1"].app-ua-form-mobile > #navbar {
    --frontend-navbar-panel-background-effective: var(--frontend-template-background-mobile, var(--frontend-template-background, var(--app-shell-elevated-background-current, var(--site-shell-elevated-background))));
    --frontend-navbar-panel-text-effective: var(--frontend-template-text-color-mobile, var(--frontend-template-text-color, var(--site-navbar-text-color)));
    --frontend-navbar-panel-border-color-effective: var(--frontend-template-border-color-mobile, var(--frontend-template-border-color, var(--site-navbar-border-color)));
    --frontend-navbar-panel-border-width-effective: var(--frontend-template-border-width-mobile, var(--frontend-template-border-width, 1px));
    --frontend-navbar-panel-radius-effective: var(--frontend-template-radius-mobile, var(--frontend-template-radius, 18px));
    --frontend-navbar-panel-shadow-effective: var(--frontend-template-shadow-mobile, var(--frontend-template-shadow, var(--surface-card-shadow)));
    --frontend-navbar-overlay-blur-effective: var(--frontend-template-overlay-blur-mobile, var(--frontend-template-overlay-blur, 10px));
    background: var(--frontend-template-overlay-background-mobile, var(--frontend-template-overlay-background, #0000001f));
}

body[data-frontend-layout-enabled="1"].app-ua-form-desktop > #navbar {
    --frontend-navbar-panel-background-effective: var(--frontend-template-background-desktop, var(--frontend-template-background, var(--app-shell-elevated-background-current, var(--site-shell-elevated-background))));
    --frontend-navbar-panel-text-effective: var(--frontend-template-text-color-desktop, var(--frontend-template-text-color, var(--site-navbar-text-color)));
    --frontend-navbar-panel-border-color-effective: var(--frontend-template-border-color-desktop, var(--frontend-template-border-color, var(--site-navbar-border-color)));
    --frontend-navbar-panel-border-width-effective: var(--frontend-template-border-width-desktop, var(--frontend-template-border-width, 1px));
    --frontend-navbar-panel-radius-effective: var(--frontend-template-radius-desktop, var(--frontend-template-radius, 18px));
    --frontend-navbar-panel-shadow-effective: var(--frontend-template-shadow-desktop, var(--frontend-template-shadow, var(--surface-card-shadow)));
    --frontend-navbar-overlay-blur-effective: var(--frontend-template-overlay-blur-desktop, var(--frontend-template-overlay-blur, 10px));
    background: var(--frontend-template-overlay-background-desktop, var(--frontend-template-overlay-background, #0000001f));
}

body[data-frontend-layout-enabled="1"].app-ua-container-webview > #navbar {
    --frontend-navbar-panel-background-effective: var(--frontend-template-background-webview, var(--frontend-template-background, var(--app-shell-elevated-background-current, var(--site-shell-elevated-background))));
    --frontend-navbar-panel-text-effective: var(--frontend-template-text-color-webview, var(--frontend-template-text-color, var(--site-navbar-text-color)));
    --frontend-navbar-panel-border-color-effective: var(--frontend-template-border-color-webview, var(--frontend-template-border-color, var(--site-navbar-border-color)));
    --frontend-navbar-panel-border-width-effective: var(--frontend-template-border-width-webview, var(--frontend-template-border-width, 1px));
    --frontend-navbar-panel-radius-effective: var(--frontend-template-radius-webview, var(--frontend-template-radius, 18px));
    --frontend-navbar-panel-shadow-effective: var(--frontend-template-shadow-webview, var(--frontend-template-shadow, var(--surface-card-shadow)));
    --frontend-navbar-overlay-blur-effective: var(--frontend-template-overlay-blur-webview, var(--frontend-template-overlay-blur, 10px));
    background: var(--frontend-template-overlay-background-webview, var(--frontend-template-overlay-background, #0000001f));
}

body[data-frontend-layout-enabled="1"].app-ua-container-webapp > #navbar {
    --frontend-navbar-panel-background-effective: var(--frontend-template-background-webapp, var(--frontend-template-background, var(--app-shell-elevated-background-current, var(--site-shell-elevated-background))));
    --frontend-navbar-panel-text-effective: var(--frontend-template-text-color-webapp, var(--frontend-template-text-color, var(--site-navbar-text-color)));
    --frontend-navbar-panel-border-color-effective: var(--frontend-template-border-color-webapp, var(--frontend-template-border-color, var(--site-navbar-border-color)));
    --frontend-navbar-panel-border-width-effective: var(--frontend-template-border-width-webapp, var(--frontend-template-border-width, 1px));
    --frontend-navbar-panel-radius-effective: var(--frontend-template-radius-webapp, var(--frontend-template-radius, 18px));
    --frontend-navbar-panel-shadow-effective: var(--frontend-template-shadow-webapp, var(--frontend-template-shadow, var(--surface-card-shadow)));
    --frontend-navbar-overlay-blur-effective: var(--frontend-template-overlay-blur-webapp, var(--frontend-template-overlay-blur, 10px));
    background: var(--frontend-template-overlay-background-webapp, var(--frontend-template-overlay-background, #0000001f));
}

body[data-frontend-layout-enabled="1"].app-ua-form-mobile > #navbar,
body[data-frontend-layout-enabled="1"].app-ua-form-desktop > #navbar,
body[data-frontend-layout-enabled="1"].app-ua-container-webview > #navbar,
body[data-frontend-layout-enabled="1"].app-ua-container-webapp > #navbar {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.navbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100%;
    height: 100%;
    background: var(--frontend-navbar-panel-background-effective, var(--app-shell-elevated-background-current, var(--site-shell-elevated-background)));
    width: max-content;
    max-width: 100%;
    overflow-x: visible;
    overflow-y: auto;
    box-sizing: border-box;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    scrollbar-width: none;
    -ms-overflow-style: none;
    color: var(--frontend-navbar-panel-text-effective, var(--site-navbar-text-color));
    font-family: var(--font-navbar);
    font-size: calc(1rem * var(--font-scale-navbar));
    border: var(--frontend-navbar-panel-border-width-effective, 1px) solid var(--frontend-navbar-panel-border-color-effective, var(--site-navbar-border-color));
    border-radius: var(--frontend-navbar-panel-radius-effective, 18px);
    box-shadow: var(--frontend-navbar-panel-shadow-effective, var(--surface-card-shadow));
}

body.app-platform-ios .navbar,
body.app-ua-platform-ios .navbar {
    min-height: -webkit-fill-available;
}

body.app-container-webview .navbar,
body.app-container-embedded .navbar,
body.app-ua-container-webview .navbar,
body.app-ua-container-embedded .navbar {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    overscroll-behavior-y: contain;
}

.navbar::-webkit-scrollbar {
    display: none;
}

.navbar__link {
    display: block;
    margin: 0;
    width: 100%;
    min-width: 180px;
    box-sizing: border-box;
    padding: var(--frontend-navbar-link-padding-y, 10px) var(--frontend-navbar-link-padding-x, 18px);
    border: 1px solid transparent;
    border-radius: var(--frontend-navbar-link-radius, 12px);
    text-align: left;
    white-space: nowrap;
    text-wrap: nowrap;
    overflow-wrap: normal;
    color: var(--frontend-navbar-panel-text-effective, var(--site-navbar-text-color));
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

@media screen and (max-width: 999px) {
    .js-enabled #navbar.overlay--active .navbar__link {
        white-space: nowrap;
        text-wrap: nowrap;
        overflow-wrap: normal;
        word-break: keep-all;
    }
}

.navbar > .navbar__link {
    margin-top: var(--frontend-navbar-link-gap, 8px);
}

.navbar__link--current {
    background: var(--site-navbar-active-background);
    color: var(--site-navbar-active-text-color);
    border: 1px solid color-mix(in srgb, var(--text-main, #fff) 22%, transparent);
    box-shadow:
        var(--surface-card-shadow),
        0 0 0 1px color-mix(in srgb, var(--text-main, #fff) 12%, transparent),
        0 0 18px color-mix(in srgb, var(--text-main, #fff) 8%, transparent);
}

.navbar__link--current:hover,
.navbar__link--current:focus-visible {
    background: color-mix(in srgb, var(--site-navbar-active-background) 82%, var(--site-navbar-active-text-color) 18%);
    color: var(--site-navbar-active-text-color);
}

.navbar__link:not(.navbar__link--current):hover,
.navbar__link:not(.navbar__link--current):focus-visible {
    background: color-mix(in srgb, var(--site-navbar-active-background) 78%, transparent);
    color: var(--site-navbar-active-text-color);
    border-color: color-mix(in srgb, var(--site-navbar-active-text-color) 24%, transparent);
    box-shadow:
        0 7px 18px color-mix(in srgb, var(--site-page-background, #000) 34%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--site-navbar-active-text-color) 10%, transparent);
    transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
    .navbar__link {
        transition: none;
    }

    .navbar__link:not(.navbar__link--current):hover,
    .navbar__link:not(.navbar__link--current):focus-visible {
        transform: none;
    }
}

.navbar__link--subtle {
    margin-top: 10px;
    color: inherit;
    text-decoration: none;
    opacity: 1;
}

.navbar__section-separator {
    align-self: stretch;
    height: 1px;
    margin: 14px 6px 10px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--text-main, #fff) 8%, transparent) 0%, color-mix(in srgb, var(--text-main, #fff) 28%, transparent) 18%, color-mix(in srgb, var(--text-main, #fff) 28%, transparent) 82%, color-mix(in srgb, var(--text-main, #fff) 8%, transparent) 100%);
    flex: 0 0 auto;
}

.navbar__close-link {
    display: none;
    align-self: flex-end;
    margin: 0 4px 8px auto;
    padding: 8px 14px;
    border: 1px solid color-mix(in srgb, var(--text-main, #fff) 18%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-main, #fff) 8%, transparent);
    color: #ffffff;
    font-size: var(--font-size-small);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.header__menudiv--close {
    display: none !important;
}

@media screen and (max-width: 999px) {
    .js-enabled #navbar {
        top: var(--header-viewport-height, var(--header-height));
        bottom: var(--footer-viewport-inset);
        height: auto;
    }

    html.app-platform-ios.js-enabled #navbar,
    html.app-ua-platform-ios.js-enabled #navbar {
        min-height: 0;
        height: auto;
    }

    .js-enabled #navbar.overlay--active {
        --navbar-overlay-safe-inline-pad: max(10px, env(safe-area-inset-left), env(safe-area-inset-right));
        padding-left: 0;
        padding-right: 0;
        z-index: var(--z-layer-overlay);
        cursor: pointer;
    }

    /* Breite und Textumbruch gelten IMMER (offen und geschlossen), damit die
       CSS-Transition beim Schließen kein Layout-Sprung auf max-content auslöst. */
    .js-enabled #navbar .navbar {
        width: max-content;
        min-width: 0;
        max-width: min(92vw, calc(100vw - 16px));
        --navbar-safe-inline-pad: max(12px, env(safe-area-inset-left), env(safe-area-inset-right));
        --navbar-overlay-safe-edge-gap: var(--navbar-overlay-safe-inline-pad, max(10px, env(safe-area-inset-left), env(safe-area-inset-right)));
        min-height: 0;
        height: calc(100vh - var(--header-viewport-height, var(--header-height)) - var(--footer-viewport-inset) - var(--navbar-overlay-safe-edge-gap) - var(--navbar-overlay-safe-edge-gap));
        height: calc(100dvh - var(--header-viewport-height, var(--header-height)) - var(--footer-viewport-inset) - var(--navbar-overlay-safe-edge-gap) - var(--navbar-overlay-safe-edge-gap));
        max-height: calc(100vh - var(--header-viewport-height, var(--header-height)) - var(--footer-viewport-inset) - var(--navbar-overlay-safe-edge-gap) - var(--navbar-overlay-safe-edge-gap));
        max-height: calc(100dvh - var(--header-viewport-height, var(--header-height)) - var(--footer-viewport-inset) - var(--navbar-overlay-safe-edge-gap) - var(--navbar-overlay-safe-edge-gap));
        padding-left: var(--navbar-safe-inline-pad);
        padding-right: var(--navbar-safe-inline-pad);
        margin: var(--navbar-overlay-safe-edge-gap);
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: keep-all;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .js-enabled #navbar .navbar__group,
    .js-enabled #navbar .navbar__group-links,
    .js-enabled #navbar .navbar__bottom,
    .js-enabled #navbar .navbar__logout-form {
        width: 100%;
        min-width: 100%;
    }

    .js-enabled #navbar.overlay--active .navbar {
        cursor: default;
    }

    .js-enabled #navbar.overlay--active .navbar__bottom {
        align-self: stretch;
        width: 100%;
        margin: 12px 0 calc(12px + env(safe-area-inset-bottom)) 0;
    }

    .js-enabled #navbar.overlay--active .navbar__bottom .navbar__link {
        width: 100%;
    }

    .no-js #navbar {
        bottom: var(--footer-viewport-inset);
        z-index: var(--z-layer-overlay);
    }

    html.no-js.app-noscript-notice-dismissed #navbar {
        z-index: var(--z-layer-overlay);
    }

    .no-js:has(#navbar:target) .header__menudiv--open {
        opacity: 0;
        pointer-events: none;
    }

    .no-js:has(#navbar:target) .header__menudiv--close {
        left: var(--header-safe-side);
        display: flex !important;
        z-index: 12;
    }

    #navbar {
        visibility: hidden;
        pointer-events: none;
        overflow: hidden;
    }

    .no-js #navbar:target {
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 0;
        overflow-x: hidden;
        z-index: var(--z-layer-overlay);
        visibility: visible;
        pointer-events: auto;
    }

    html.no-js.app-noscript-notice-dismissed #navbar:target {
        z-index: var(--z-layer-overlay);
    }

    .no-js #navbar:target .navbar {
        width: max-content;
        min-width: 0;
        max-width: min(92vw, calc(100vw - 16px));
        --navbar-overlay-safe-edge-gap: max(10px, env(safe-area-inset-left), env(safe-area-inset-right));
        min-height: 0;
        height: calc(100vh - var(--header-viewport-height, var(--header-height)) - var(--footer-viewport-inset) - var(--navbar-overlay-safe-edge-gap) - var(--navbar-overlay-safe-edge-gap));
        height: calc(100dvh - var(--header-viewport-height, var(--header-height)) - var(--footer-viewport-inset) - var(--navbar-overlay-safe-edge-gap) - var(--navbar-overlay-safe-edge-gap));
        max-height: calc(100vh - var(--header-viewport-height, var(--header-height)) - var(--footer-viewport-inset) - var(--navbar-overlay-safe-edge-gap) - var(--navbar-overlay-safe-edge-gap));
        max-height: calc(100dvh - var(--header-viewport-height, var(--header-height)) - var(--footer-viewport-inset) - var(--navbar-overlay-safe-edge-gap) - var(--navbar-overlay-safe-edge-gap));
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        margin: var(--navbar-overlay-safe-edge-gap);
        white-space: nowrap;
    }

    .no-js #navbar:target .navbar__group,
    .no-js #navbar:target .navbar__group-links,
    .no-js #navbar:target .navbar__bottom,
    .no-js #navbar:target .navbar__logout-form {
        width: 100%;
        min-width: 100%;
    }

    .no-js #navbar:target .navbar__close-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .no-js #navbar:target .navbar__bottom {
        align-self: stretch;
        width: 100%;
        margin: 12px 0 calc(12px + env(safe-area-inset-bottom)) 0;
    }

    .no-js #navbar:target .navbar__bottom .navbar__link {
        width: 100%;
    }

    #navbar.overlay--active {
        visibility: visible;
        pointer-events: auto;
    }
}

.navbar__bottom {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    width: 100%;
    height: auto;
    margin: 12px 0 1em 0;
    justify-content: flex-start;
    text-wrap: nowrap;
}

.navbar__group {
    display: flex;
    flex-direction: column;
    gap: var(--frontend-navbar-group-inner-gap, 8px);
    margin: 0 0 var(--frontend-navbar-group-gap, 18px);
    padding: var(--frontend-navbar-group-padding-top, 12px) var(--frontend-navbar-group-padding-x, 10px) var(--frontend-navbar-group-padding-bottom, 10px);
    border-radius: var(--frontend-navbar-group-radius, 16px);
    border-top: 1px solid color-mix(in srgb, var(--text-main, #fff) 8%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--text-main, #fff) 5%, transparent) 0%, color-mix(in srgb, var(--text-main, #fff) 2%, transparent) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-main, #fff) 4%, transparent);
}

.navbar__group-title {
    margin: 0 var(--frontend-navbar-group-title-margin-x, 4px);
    color: color-mix(in srgb, var(--site-navbar-text-color) 62%, transparent);
    font-family: var(--font-navbar);
    font-size: calc(1rem * var(--font-scale-navbar) * 0.78);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.navbar__group-toggle {
    appearance: none;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 5px 3px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
    cursor: pointer;
    touch-action: manipulation;
}

.navbar__group-toggle:hover,
.navbar__group-toggle:focus-visible,
.navbar__group--contains-current .navbar__group-toggle {
    background: color-mix(in srgb, var(--site-navbar-active-background) 62%, transparent);
    color: var(--site-navbar-active-text-color);
    outline: none;
}

.navbar__group-toggle-indicator {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 160ms ease;
}

.navbar__group[data-navbar-group-expanded="true"] .navbar__group-toggle-indicator {
    transform: rotate(45deg) translate(-2px, -2px);
}

.js-enabled .navbar__group[data-navbar-collapsible="1"]:not([data-navbar-group-expanded="true"]) .navbar__group-links {
    display: none;
}

.js-enabled .navbar__group-links[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .navbar__group-toggle-indicator {
        transition: none;
    }
}

.navbar__group--context {
    gap: 10px;
}

.navbar__location-indicator {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 2px 4px;
    color: color-mix(in srgb, var(--text-main, #fff) 94%, transparent);
}

.navbar__location-indicator-label {
    color: color-mix(in srgb, var(--text-main, #fff) 62%, transparent);
    font-size: var(--font-size-meta);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.navbar__location-indicator strong {
    font-size: var(--font-size-body-lg, 1.05rem);
    line-height: 1.35;
}

.navbar__group-links {
    display: flex;
    flex-direction: column;
    gap: var(--frontend-navbar-link-gap, 8px);
}

.navbar__logout-form {
    display: block;
    width: 100%;
    margin: 0;
}

.navbar__logout-block {
    width: 100%;
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--text-main, #fff) 10%, transparent);
}

.navbar__logout-form .navbar__link {
    width: 100%;
    font: inherit;
    color: inherit;
    cursor: pointer;
    background: transparent;
}

.navbar__group .navbar__link {
    margin: 0;
    border-radius: var(--frontend-navbar-link-radius, 12px);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.navbar__group .navbar__link:hover,
.navbar__group .navbar__link:focus-visible {
    background: color-mix(in srgb, var(--text-main, #fff) 7%, transparent);
    border-color: color-mix(in srgb, var(--text-main, #fff) 12%, transparent);
    transform: translateX(2px);
}

.navbar__bottom--guest {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 0;
    justify-content: flex-end;
}

.navbar__bottom .navbar__link {
    width: 100%;
    box-sizing: border-box;
}

.menudiv {
    position: absolute;
    top: var(--header-content-center-y);
    left: var(--header-safe-side);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateY(-50%);
    width: 35px;
    min-height: 32px;
    cursor: pointer;
    margin: 0;
    z-index: 3;
}
/* main header Menu DIV Bars*/
.menudiv__bar1, .menudiv__bar2, .menudiv__bar3 {
  width: 35px;
  height: 4px;
  background-color: #fff;
  border-radius: 999px;
  margin: 3px 0;
  transform-origin: center;
  transition: transform 0.4s ease, opacity 0.25s ease;
}
.menudiv--active .menudiv__bar1 {
  transform: translateY(10px) rotate(-45deg);
}
.menudiv--active .menudiv__bar2 {
    opacity: 0;
    transform: scaleX(0);
}
.menudiv--active .menudiv__bar3 {
  transform: translateY(-10px) rotate(45deg);
}

@media screen and (min-width: 1000px) {
    body.navbar-desktop-expanded #menudiv .menudiv__bar1 {
        transform: translateY(10px) rotate(-45deg);
    }

    body.navbar-desktop-expanded #menudiv .menudiv__bar2 {
        opacity: 0;
        transform: scaleX(0);
    }

    body.navbar-desktop-expanded #menudiv .menudiv__bar3 {
        transform: translateY(-10px) rotate(45deg);
    }
}

/* --- HEADER --- */
.header {
    --header-safe-side: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
    --header-content-center-y: calc(
        env(safe-area-inset-top)
        + ((var(--header-viewport-height, var(--header-height)) - env(safe-area-inset-top)) / 2)
    );
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    padding: env(safe-area-inset-top) var(--header-safe-side) 0 var(--header-safe-side);
    background: var(--app-header-background-current, var(--site-header-background, #000));
    width: 100%;
    height: var(--header-height);
    overflow: hidden;
    z-index: var(--z-layer-header);
}

.header.header--beta {
    overflow: visible;
}

div.header hr, footer hr {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    padding: 0;
}

div.header hr {
    bottom: 0;
    border-color: var(--frontend-shell-border-color-effective, var(--site-header-border-color));
}

.header__center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    text-align: center;
    height: calc(var(--header-viewport-height, var(--header-height)) - env(safe-area-inset-top));
    padding: 0 calc(64px + var(--header-safe-side));
    margin: 0 auto;
}

.header__brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1.2vw, 14px);
    max-width: 100%;
    min-width: 0;
}

.header__brand-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    text-align: inherit;
}

.header__session-timer-slot {
    position: absolute;
    top: var(--header-content-center-y);
    right: calc(var(--header-safe-side) + 4.6em + 12px);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 96px;
    max-width: 180px;
    z-index: 3;
    pointer-events: none;
}

.header__logo {
    position: absolute;
    top: var(--header-content-center-y);
    right: var(--header-safe-side);
    height: 3.8em;
    margin: 0;
    transform: translateY(-50%);
}

.header__logo-link {
    position: absolute;
    top: var(--header-content-center-y);
    right: var(--header-safe-side);
    display: inline-flex;
    line-height: 0;
    transform: translateY(-50%);
}

.header__logo-link .header__logo {
    position: static;
    transform: none;
}

.language_selector {
    margin: auto 15px auto auto;
    font-family: var(--font-primary);
    font-size: var(--font-size-small);
}

.language_selector a {
    text-decoration: none;
    color: #888;
    transition: color 0.3s;
}

.language_selector a.active {
    color: #fff;
    text-decoration: underline;
    font-weight: normal;
}
.language_selector .separator {
    margin: 0 3px;
    color: #555;
}

.shop_name {
    font-family: var(--font-headline);
}

.shop_name--header {
    font-family: var(--font-header-title);
    font-size: calc(1rem * var(--font-scale-header-title));
    color: var(--site-header-title-color);
    margin: 0;
}

.shop_slogan {
    font-family: var(--font-primary);
}

.shop_slogan--header {
    font-family: var(--font-header-slogan);
    font-size: calc(1rem * var(--font-scale-header-slogan));
    color: var(--site-header-slogan-color);
    margin: 0;
}

.header__session-timer {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--font-size-meta);
    line-height: 1.2;
    color: color-mix(in srgb, var(--text-main, #fff) 76%, transparent);
    text-align: right;
}

.header__session-timer.is-warning {
    color: #f4d35e;
}

.header__session-timer.is-danger {
    color: #ff7b7b;
}

.content {
    width: 100%;
    min-height: calc(100dvh - var(--header-viewport-height, var(--header-height)) - var(--footer-stack-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 8px);
    margin: calc(var(--header-viewport-height, var(--header-height)) + env(safe-area-inset-top) + 8px) auto var(--footer-stack-height) auto;
    padding-bottom: var(--footer-stack-height);
    box-sizing: border-box;
}
.content h1 {
    margin: 0;
}

.content > h2,
.content > h3,
.content_container h2,
.content_container h3 {
    font-family: var(--font-section-title);
    font-size: calc(1rem * var(--font-scale-section-heading));
    font-weight: var(--site-section-title-weight);
    color: var(--site-section-title-color);
}

.homepage-gallery {
    width: min(100%, 920px);
    margin: 0 auto 24px auto;
    padding: 0 8px;
}

.homepage-gallery-fallback {
    display: flex;
    justify-content: center;
    width: min(100%, 920px);
    margin: 0 auto 24px;
    padding: clamp(20px, 4vw, 36px) 8px;
}

.homepage-gallery-fallback__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 20px;
    border: 1px solid color-mix(in srgb, var(--text-main, #fff) 28%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--text-main, #fff) 12%, transparent);
    color: #fff;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease;
}

.homepage-gallery-fallback__link:hover,
.homepage-gallery-fallback__link:focus-visible {
    border-color: color-mix(in srgb, var(--text-main, #fff) 48%, transparent);
    background: color-mix(in srgb, var(--text-main, #fff) 20%, transparent);
}

.homepage-gallery-fallback__link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.homepage-gallery__viewport {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    background: transparent;
    box-shadow: none;
}

.frontend-system-gallery .homepage-gallery__viewport {
    aspect-ratio: var(--frontend-template-aspect-ratio-effective, 4 / 3);
}

.homepage-gallery__track {
    display: flex;
    height: 100%;
    transition: transform 0.35s ease-in-out;
    will-change: transform;
}

.homepage-gallery__slide {
    flex: 0 0 100%;
    min-width: 100%;
    height: 100%;
}

.homepage-gallery__link {
    position: relative;
    display: block;
    height: 100%;
    color: #fff;
    text-decoration: none;
}

.homepage-gallery__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #111;
    border-radius: 16px;
}

.homepage-gallery__overlay {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    left: 0;
    right: 0;
    z-index: 1;
    min-height: clamp(56px, 9vw, 112px);
    padding: clamp(10px, 1.8vw, 22px) clamp(14px, 3vw, 36px);
    background: color-mix(in srgb, var(--theme-tone-black, #000) 30%, transparent);
    color: #fff;
    font-size: clamp(1.05rem, 2.2vw, 2rem);
    line-height: 1.2;
    font-weight: 700;
    text-align: left;
    text-shadow: 0 2px 12px color-mix(in srgb, var(--theme-tone-black, #000) 55%, transparent);
    pointer-events: none;
}

.homepage-gallery__overlay--top {
    top: 0;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.homepage-gallery__overlay--bottom {
    bottom: 0;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}


.homepage-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--theme-tone-black, #000) 45%, transparent);
    cursor: pointer;
    z-index: 3;
}

.homepage-gallery__nav::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    margin: auto;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.homepage-gallery__nav--prev {
    left: 10px;
}

.homepage-gallery__nav--prev::before {
    transform: rotate(135deg);
}

.homepage-gallery__nav--next {
    right: 10px;
}

.homepage-gallery__nav--next::before {
    transform: rotate(-45deg);
}

.homepage-gallery__dots {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-tone-black, #000) 35%, transparent);
    z-index: 2;
}

.homepage-gallery__dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    padding: 0;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--text-main, #fff) 65%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-main, #fff) 35%, transparent);
    cursor: pointer;
}

.homepage-gallery__dot.active {
    background: #fff;
    transform: scale(1.15);
}

/* --- RESPONSIVE: MOBILE --- */
@media only screen and (max-width: 700px) {
    .content {
        min-height: calc(100dvh - var(--header-viewport-height, var(--header-height)) - var(--footer-stack-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 14px);
        margin-top: calc(var(--header-viewport-height, var(--header-height)) + env(safe-area-inset-top) + 14px);
    }

    .header__center {
        padding: 0 calc(56px + var(--header-safe-side));
    }

    .header__session-timer-slot {
        top: var(--header-content-center-y);
        left: calc(var(--header-safe-side) + 42px);
        right: auto;
        transform: translateY(-50%);
        justify-content: center;
        min-width: 0;
        width: clamp(38px, 14vw, 58px);
        max-width: 58px;
        overflow: hidden;
    }

    .header__session-timer {
        font-size: 0;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header__session-timer::after {
        content: attr(data-session-time);
        font-size: clamp(.58rem, 2.8vw, var(--font-size-meta));
    }

    .content_container__header {
        margin: 0 4px 8px;
        padding: 10px 12px;
        border-radius: 10px;
    }

    .content_container__content {
        width: 100%;
        padding: 4px;
    }

    .content_container__content > .container--shadow.container--full {
        gap: 10px;
        padding: 10px;
    }

    body.page--setup .setup-pending-mode,
    body.page--site-status-gate .content_container__content > .container--shadow.container--full {
        min-height: clamp(220px, 44vh, 420px);
    }

    body.page--setup-pending .setup-pending-mode {
        width: 94vw;
        max-width: 94vw;
        margin: 0 auto;
    }

    body.page--setup .message-info--setup-pending {
        font-size: clamp(1.65rem, 8.5vw, 2.7rem);
    }

    body.page--site-status-gate .content_container__content h1 {
        font-size: clamp(1.7rem, 9.2vw, 2.8rem);
    }

    body.page--site-status-gate .content_container__content .message-info {
        font-size: clamp(1.45rem, 7.4vw, 2.35rem);
    }

    .homepage-gallery {
        width: 100%;
        padding: 0 4px;
    }

    .homepage-gallery__viewport {
        border-radius: 14px;
    }

    .homepage-gallery__image {
        border-radius: 14px;
    }

    .homepage-gallery__overlay {
        min-height: clamp(48px, 14vw, 84px);
        padding: clamp(8px, 2.6vw, 16px) clamp(10px, 3.2vw, 18px);
        font-size: clamp(0.95rem, 4.1vw, 1.45rem);
    }

    .homepage-gallery__nav {
        width: 32px;
        height: 32px;
    }

    .homepage-gallery__dots {
        bottom: 8px;
        gap: 6px;
        padding: 5px 8px;
    }

    .homepage-gallery__dot {
        width: 9px;
        height: 9px;
        min-width: 9px;
    }

    footer {
        height: calc(var(--footer-height) + env(safe-area-inset-bottom));
        padding-bottom: 0;
    }
}

@media only screen and (max-width: 370px) {
    .header__session-timer-slot {
        left: calc(var(--header-safe-side) + 38px);
        width: clamp(28px, 11vw, 40px);
        max-width: 40px;
    }

    .header__session-timer::after {
        font-size: clamp(.5rem, 2.6vw, .62rem);
    }
}
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--footer-height);
    width: 100%;
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: var(--app-footer-background-current, var(--site-footer-background, #000));
    z-index: var(--z-layer-footer);
    color: var(--site-footer-text-color);
    font-family: var(--font-footer);
    font-size: calc(1rem * var(--font-scale-footer));
}

footer hr {
    top: 0;
    border-color: var(--frontend-shell-border-color-effective, var(--site-footer-border-color));
}

footer a {
    color: inherit;
}

.footer__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
}

.footer__social {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.footer__social-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
}

.footer__social-copy {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: 1.2;
    text-align: left;
}

.footer__social-title {
    font-size: var(--font-size-meta);
    font-weight: 700;
}

.footer__social-handle {
    font-size: calc(var(--font-size-meta) * 0.95);
    opacity: 0.85;
}

.footer__social-text {
    font-size: var(--font-size-meta);
}

.footer__social-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    position: relative;
    border: 1px solid color-mix(in srgb, var(--text-main, #fff) 20%, transparent);
}

.footer__social-icon--custom {
    padding: 0;
    background: color-mix(in srgb, var(--text-main, #fff) 8%, transparent);
}

.footer__social-icon-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    display: block;
}

.footer__social-icon--instagram {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 4px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    display: inline-grid;
    place-items: center;
    line-height: 0;
    font-size: 0;
    flex: 0 0 22px;
}

.footer__social-icon-instagram-inner {
    width: 17px;
    height: 17px;
    border: 1px solid #fff;
    border-radius: 4px;
    box-sizing: border-box;
    display: inline-grid;
    place-items: center;
    position: relative;
}

.footer__social-icon-instagram-inner::before {
    content: '';
    width: 8px;
    height: 8px;
    border: 1px solid #fff;
    border-radius: 50%;
    box-sizing: border-box;
}

.footer__social-icon-instagram-inner::after {
    content: '';
    width: 2px;
    height: 2px;
    border: 1px solid #fff;
    border-radius: 50%;
    box-sizing: border-box;
    position: absolute;
    top: 2px;
    right: 2px;
}

.footer__social-icon--facebook {
    background: #1877f2;
}

.footer__social-icon--facebook::before {
    content: 'f';
    font-family: Georgia, serif;
    font-weight: bold;
    color: #fff;
    transform: translateY(1px);
}

.footer__social-icon--google {
    background: #fff;
}

.footer__social-icon--google::before {
    content: 'G';
    color: #4285f4;
    font-weight: bold;
}

.footer__social-icon--website {
    background: color-mix(in srgb, var(--text-main, #fff) 12%, transparent);
}

.footer__social-icon--website::before {
    content: 'www';
    color: #fff;
    font-size: 8px;
    font-weight: bold;
}

.footer__content__social__text {
    margin: 0;
    font-size: var(--font-size-meta);
}
.footer__content__impressum {
    margin: auto calc( 10px + env(safe-area-inset-right) ) auto 0;
}

.footer__link {
    font-size: var(--font-size-meta);
    margin: 0;
}

.copyright {
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
    font-size: calc(var(--font-size-meta) * 0.58);
    margin: 0;
    white-space: nowrap;
}

/* Insta Logo */
.insta { 
    width: 22px; 
    height: 22px; 
    background: radial-gradient(
        circle at 30% 107%, 
        #fdf497 0%, 
        #fdf497 5%, 
        #fd5949 45%, 
        #d6249f 60%, 
        #285aeb 90%); 
    border-radius: 4px; 
    display: grid; 
    place-items: center;
    margin: 0 5px 0 0;
}
/* Insta Logo */
.insta__innerbox { 
    width: 17px; 
    height: 17px; 
    border: 1px solid #fff; 
    border-radius: 4px; 
    display: grid; 
    place-items: center;
    position: relative; 
}
/* Insta Logo */
.insta__innerbox::before { 
    content: ''; 
    width: 8px;
    height: 8px; 
    border: 1px solid #fff; 
    border-radius: 50%; 
}

/* top right circle of insta */
.insta__innerbox::after { 
    content: ''; 
    border: 1px solid #fff; 
    border-radius: 50%; 
    position: absolute; 
    top: 2px; 
    right: 2px; 
}

/* --- SHARED CONTENT CARDS --- */
.info-card__section--hours-label {
    margin-top: 0;
}

.info-card__section[data-align-group="hours-content"] {
    margin-top: 0;
}

.location__hours {
    margin-top: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}
.hour-row {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 4px;
    font-size: var(--font-size-meta);
    margin-bottom: 2px;
    padding-bottom: 0;
    border-bottom: none;
}
.hour-row:last-child {
    margin-bottom: 0;
}
.hour-row .day {
    font-weight: bold;
    color: #fff;
}
.hour-row .time {
    color: #fff;
    white-space: nowrap;
}

.content_container {
    width: min(100%, var(--site-content-container-max-width));
    max-width: var(--site-content-container-max-width);
    margin: 1em auto 2em auto;
    line-height: normal;
    display: flex;
    flex-wrap: wrap;
    gap: var(--site-content-container-gap);
    color: var(--site-content-container-text-color);
    font-family: var(--font-content-body);
    font-size: calc(1rem * var(--font-scale-content-body));
}
.content_container:last-child {
    margin-bottom: 75px;
}
.content_container a {
    color: inherit;
}
.content_container img{
    border-radius: 10%;
    width: 90%;
    margin: auto;
}
.content_container__header {
    width: 100%;
    margin: 0 10px 10px;
    padding: calc(var(--site-content-container-padding) + 2px) calc(var(--site-content-container-padding) + 4px);
    font-family: var(--font-content-heading);
    font-size: calc(1rem * var(--font-scale-content-heading) * var(--frontend-text-headline-scale));
    font-weight: var(--site-content-container-heading-weight);
    color: var(--site-content-container-heading-text-color);
    background: var(--site-content-container-heading-background);
    text-align: var(--site-content-container-heading-alignment);
    border: var(--site-content-container-border-width) solid var(--site-content-container-border-color);
    border-radius: var(--site-content-container-radius);
    box-shadow: var(--site-content-container-shadow);
    box-sizing: border-box;
}
.content_container__header p {
    margin: 0;
}

.content_container__content{
    box-sizing: border-box;
    flex: 0 0 calc((100% - ((var(--frontend-info-columns) - 1) * var(--site-content-container-gap))) / var(--frontend-info-columns));
    max-width: calc((100% - ((var(--frontend-info-columns) - 1) * var(--site-content-container-gap))) / var(--frontend-info-columns));
    display: flex;
    flex-direction: column;
    padding: calc(var(--site-content-container-gap) * 0.5);
}

.content_container__content--full-span,
.content_container__content.container--full {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
}

.content_container__content p{
    margin: 0.5em 0 0 0.5em;
    font-size: calc(1rem * var(--font-scale-content-body) * var(--frontend-text-body-scale));
    padding-left: 10px;
}

.content_container__content small,
.content_container__content .text-muted {
    color: var(--site-content-container-muted-color);
}

@media (max-width: 767px) {
    .frontend-content-group > .frontend-content-group__item {
        grid-column: 1 / -1;
    }
}

/* Single-message shell modes: setup pending + public site-status gate. */
body.page--setup .setup-pending-mode {
    min-height: clamp(300px, 52vh, 620px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Wizard-Layout: Header und Content exakt gleich breit, zentral ausgerichtet. */
body.page--setup .content_container {
    width: min(100%, 920px);
    max-width: 920px;
}

body.page--setup .content_container__header,
body.page--setup .content_container__content {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

body.page--setup .content_container__header {
    margin-left: 0;
    margin-right: 0;
}

body.page--setup .content_container__content {
    padding-left: 0;
    padding-right: 0;
}

body.page--setup-pending .content {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    margin-left: 0;
    min-height: 100dvh;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page--setup-pending .setup-pending-mode {
    width: min(90vw, 1180px);
    max-width: min(90vw, 1180px);
    margin: 0 auto;
}

body.page--setup .message-info--setup-pending {
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: var(--font-headline);
    font-size: clamp(2rem, 6.2vw, 4.6rem);
    line-height: 1.12;
}

body.page--site-status-gate .content {
    margin: 0 auto;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
}

body.page--site-status-gate .content_container {
    margin: 0 auto;
}

body.page--site-status-gate .content_container__content {
    flex-basis: 100%;
    max-width: 100%;
}

body.page--site-status-gate .content_container__content > .container--shadow.container--full {
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: clamp(300px, 52vh, 620px);
}

body.page--site-status-gate .content_container__content h1 {
    margin: 0;
    font-size: clamp(2rem, 5.6vw, 4.2rem);
    line-height: 1.08;
    text-align: center;
}

body.page--site-status-gate .content_container__content .message-info {
    margin: 0;
    padding: 0;
    font-family: var(--font-headline);
    font-size: clamp(1.7rem, 4.6vw, 3.6rem);
    line-height: 1.15;
    text-align: center;
}

/* ── Seiten ohne Navbar (page--no-navbar) ─────────────────────────────────
   Zentraler Layout-Pfad fuer alle Seiten mit $hidePageHeader = true.
   Hebt Header/Footer/Sidebar-Berechnungen auf und zentriert den Content.
   ────────────────────────────────────────────────────────────────────── */
body.page--no-navbar {
    --header-height: 0px;
    --footer-height: 0px;
    --footer-secondary-height: 0px;
    --footer-stack-height: 0px;
}

body.page--no-navbar #content,
body.page--no-navbar .content:not(.admin-page) {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100dvh;
    padding: clamp(16px, 4vh, 48px) max(16px, env(safe-area-inset-left)) clamp(16px, 4vh, 48px) max(16px, env(safe-area-inset-right));
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    margin-left: 0;
    margin-right: auto;
}

@media screen and (min-width: 1000px) {
    body.page--no-navbar #content,
    body.page--no-navbar .content:not(.admin-page) {
        width: 100vw;
        max-width: 100vw;
        margin-left: 0;
    }
}

body.page--no-navbar .content_container {
    width: 100%;
    max-width: min(100%, 920px);
    margin: 0 auto;
}

/* ── Generische Fehlerseiten-Shell (page--error-shell) ────────────────────
   Wird auf allen Fehlerseiten ohne Header/Navbar/Footer gesetzt.
   Übernimmt implizit auch page--no-navbar-Semantik: Header-Höhen-Variablen
   werden auf 0 gesetzt, Sidebar-Offset wird aufgehoben, Inhalt wird
   zentriert dargestellt. Das content_container__content-Element wird auf
   volle Breite gesetzt, damit es bündig mit dem __header-Element darüber ist.
   ────────────────────────────────────────────────────────────────────────── */
body.page--error-shell {
    --header-height: 0px;
    --footer-height: 0px;
    --footer-secondary-height: 0px;
    --footer-stack-height: 0px;
    margin: 0;
    padding: clamp(16px, 4vh, 48px) max(16px, env(safe-area-inset-left)) clamp(16px, 4vh, 48px) max(16px, env(safe-area-inset-right));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
}

body.page--error-shell .content,
body.page--error-shell #content {
    width: 100%;
    max-width: 100%;
    min-height: auto;
    margin: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.page--error-shell .content_container {
    width: 100%;
    max-width: min(100%, 920px);
    margin: 0 auto;
}

/* Header und Content auf gleiche Breite bringen */
body.page--error-shell .content_container__header,
body.page--error-shell .content_container__content {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

@media screen and (min-width: 1000px) {
    body.page--error-shell .content,
    body.page--error-shell #content {
        width: 100vw;
        max-width: 100vw;
        margin-left: 0;
    }
}

.journal-page__intro,
.journal-page__entry .container--full {
    padding: var(--surface-card-padding);
    border-radius: var(--surface-card-radius);
}
.journal-page__intro p { margin: 0; padding-left: 0; }

.journal-page__entry {
    width: calc(100% / var(--frontend-info-columns));
}

.journal-page__entry-title {
    margin: 0 0 10px;
    font-family: var(--font-headline);
    font-size: calc(var(--font-size-base) * 1.2 * var(--frontend-text-headline-scale));
}

.journal-page__entry-body {
    margin: 0;
    line-height: 1.5;
    white-space: normal;
}

/* Specific styling for shared info cards */
.content_container__content > .container--shadow.container--full {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--surface-card-gap);
    padding: var(--site-content-container-padding);
    color: var(--site-content-container-text-color);
    background: var(--site-content-container-background);
    border: var(--site-content-container-border-width) solid var(--site-content-container-border-color);
    border-radius: var(--site-content-container-radius);
    box-shadow: var(--site-content-container-shadow);
}

.info-card {
    height: 100%;
}

/* Generic reusable card surface (location/impressum-agnostic). */
.surface-card {
    display: block;
}

.info-card--own {
    border: 1px solid var(--surface-card-highlight-ring);
    box-shadow:
        var(--surface-card-shadow),
        0 0 0 2px var(--surface-card-highlight-ring),
        0 0 34px var(--surface-card-highlight-glow);
}

.surface-card--highlight {
    border: 1px solid var(--surface-card-highlight-ring);
    box-shadow:
        var(--surface-card-shadow),
        0 0 0 2px var(--surface-card-highlight-ring),
        0 0 34px var(--surface-card-highlight-glow);
}

.info-card__section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.info-card__section[data-align-group="name"] {
    margin-bottom: 0px;
}

.info-card__section[data-align-group="slogan"] {
    margin-bottom: 0;
}

.info-card__section[data-align-group="description"] {
    margin-bottom: 0;
}

.info-card__section[data-align-group="address"] {
    margin-bottom: 0;
}

.info-card__section--address {
    gap: 0;
}

.info-card__address-link {
    color: inherit;
    display: inline-block;
    text-decoration: none;
}

.info-card__address-link:hover,
.info-card__address-link:focus-visible {
    text-decoration: underline;
}

.info-card__address-line {
    line-height: 1.33;
}

.info-card__map-notice {
    margin: 10px 0 0;
    font-size: var(--font-size-small, 0.92rem);
    line-height: 1.35;
    color: rgba(255, 223, 182, 0.92);
}

.info-card__map-notice--system {
    color: color-mix(in srgb, var(--text-main, #fff) 68%, transparent);
}

.info-card__section[data-align-group="phone"] {
    margin-bottom: 10px;
}

.info-card__section[data-align-group="hours-content"] {
    margin-top: -4px;
    margin-bottom: 0;
}

.info-card__section[data-align-group="services"] {
    margin-bottom: 0;
}

.maps-confirm-card {
    max-width: 640px;
    margin: 0 auto;
}

.maps-confirm-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.maps-confirm-overlay {
    z-index: 20;
    background: color-mix(in srgb, var(--theme-tone-black, #000) 80%, transparent);
}

.maps-confirm-overlay__content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

.maps-confirm-overlay__shell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    box-sizing: border-box;
}

.maps-confirm-overlay__card {
    width: fit-content;
    max-width: min(100%, 560px);
    margin: auto;
    padding: 18px 16px;
    text-align: center;
    background: rgba(8, 8, 8, 0.96);
}

.maps-confirm-overlay__card .info-card__section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.maps-confirm-overlay__header {
    margin-bottom: 4px;
}

.maps-confirm-overlay__title {
    margin: 0;
    font-size: clamp(var(--font-size-title), 4vw, calc(var(--font-size-title) * 1.33));
    line-height: 1.1;
}

.maps-confirm-overlay__message {
    margin: 0;
    padding: 0;
    font-size: var(--font-size-base);
    line-height: 1.5;
}

.maps-confirm-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    min-width: 140px;
    padding: 10px 18px;
    border: 1px solid color-mix(in srgb, var(--text-main, #fff) 24%, transparent);
    border-radius: 12px;
    color: #ffffff;
    background: color-mix(in srgb, var(--text-main, #fff) 10%, transparent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--theme-tone-black, #000) 28%, transparent);
}

.maps-confirm-card__button:hover,
.maps-confirm-card__button:focus-visible {
    background: color-mix(in srgb, var(--text-main, #fff) 18%, transparent);
}

.maps-confirm-card__button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--text-main, #fff) 75%, transparent);
    outline-offset: 2px;
}

.maps-confirm-card__button--primary {
    border-color: rgba(221, 114, 0, 0.55);
    background: rgba(221, 114, 0, 0.2);
}

.maps-confirm-card__button--primary:hover,
.maps-confirm-card__button--primary:focus-visible {
    background: rgba(221, 114, 0, 0.28);
}

.page--logout-confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 6vw, 64px);
}

.logout-confirm {
    width: min(100%, 560px);
    padding: clamp(20px, 4vw, 32px);
    border: 1px solid color-mix(in srgb, var(--text-main, #fff) 12%, transparent);
    border-radius: 18px;
    background: var(--app-shell-elevated-background-current, var(--site-shell-elevated-background));
    box-shadow: var(--shadow-standard);
}

.logout-confirm__title {
    margin: 0;
    font-size: clamp(var(--font-size-title), 4vw, calc(var(--font-size-title) * 1.15));
    line-height: 1.1;
}

.logout-confirm__message {
    margin: 12px 0 0;
    color: color-mix(in srgb, var(--text-main, #fff) 84%, transparent);
    line-height: 1.5;
}

.logout-confirm__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.logout-confirm__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 180px;
    min-height: 46px;
    margin: 0;
    padding: 10px 18px;
    border: 1px solid color-mix(in srgb, var(--text-main, #fff) 22%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--text-main, #fff) 8%, transparent);
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--theme-tone-black, #000) 28%, transparent);
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.logout-confirm__button:hover,
.logout-confirm__button:focus-visible {
    background: color-mix(in srgb, var(--text-main, #fff) 16%, transparent);
    text-decoration: none;
    transform: translateY(-1px);
}

.logout-confirm__button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--text-main, #fff) 72%, transparent);
    outline-offset: 2px;
}

.logout-confirm__button--danger {
    border-color: rgba(198, 40, 40, 0.58);
    background: rgba(198, 40, 40, 0.26);
}

.logout-confirm__button--danger:hover,
.logout-confirm__button--danger:focus-visible {
    background: rgba(198, 40, 40, 0.38);
}

.logout-confirm__button--secondary {
    border-color: color-mix(in srgb, var(--text-main, #fff) 22%, transparent);
    background: color-mix(in srgb, var(--text-main, #fff) 10%, transparent);
}

@media (max-width: 520px) {
    .logout-confirm__button {
        flex-basis: 100%;
    }
}

.info-card__section p,
.info-card__section .location__hours {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding-left: 0;
}

.info-card__section .location__hours {
    margin-top: 2px;
}

.info-card__location-name {
    margin-bottom: 0;
    font-family: var(--font-headline);
    font-size: calc(var(--font-size-title) * 0.97);
    font-weight: 700;
    line-height: 1.15;
}

.info-card__slogan {
    color: #fff;
}

.info-card__phone a,
.info-card__email a,
.info-card__section--url a {
    text-decoration: underline;
    text-underline-offset: 0.14em;
}

.info-card__phone {
    margin-top: 0;
}

.info-card__section .info-card__email {
    margin-top: 10px;
}

.info-card__placeholder {
    min-height: 1.05em;
    visibility: hidden;
}

.info-card__section--url {
    margin-top: 4px;
    padding-top: 0;
}

.info-card__section .info-card__service-label {
    margin-top: 4px;
    margin-bottom: 4px;
}

.info-card__section[data-align-group="services"] .location__hours {
    margin-bottom: 10px;
}

.info-card__section[data-align-group="services"] .location__hours:last-child {
    margin-bottom: 0;
}

.info-card__section:empty {
    min-height: 0 !important;
}
.content_container__review_link{
    text-decoration: underline;
    margin: 0.5em 0 0 0.5em;
    font-size: var(--font-size-small);
    padding-left: 15px;
}
.content_container__review_text{
    font-style: italic;
}

.menucard_container{
    width: 100%;
    margin: auto;
    /*max-width: var(--max-container-width);*/
}
body.page--public-menucard .content.content--frontend-design-v2{
    padding-inline: 0;
}
.menucard_container__header {
    width: 100%;
    position: sticky;
    top: var(--header-viewport-height, var(--header-height));
    z-index: 3;
    background: var(--frontend-menu-category-header-background, #000000);
    color: var(--frontend-menu-category-header-text-color, #ffffff);
    text-align: center;
    font-size: var(--font-size-title);
    padding: 8px 0 6px;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--theme-tone-black, #000) 45%, transparent);
}

.menucard_container__header[data-category-focus-trigger] {
    cursor: pointer;
}

.menucard_container__header[data-category-focus-trigger]:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
}

.menucard_container__header.menucard-scroll-target--highlight {
    border-radius: var(--surface-card-radius);
    box-shadow:
        0 4px 10px color-mix(in srgb, var(--theme-tone-black, #000) 45%, transparent),
        0 0 0 2px var(--surface-card-highlight-ring),
        0 0 34px var(--surface-card-highlight-glow);
    animation: menucard-scroll-target-highlight 2s ease-out;
}

.menucard_container__category_container{
    display: flex;
    align-items: stretch;
    gap: var(--frontend-menu-tile-gap);
    overflow-x: auto;
    overflow-y: visible;
    padding-inline: calc(var(--frontend-menu-tile-gap) * 0.55);
    scroll-padding-inline: calc(var(--frontend-menu-tile-gap) * 0.55);
    scroll-snap-type: x proximity;
}

.menucard_container__category_container + .menucard_container__header {
    margin-top: calc(var(--frontend-menu-tile-gap) * 0.65);
}

.menucard_container__category_container--multiple {
    justify-content: flex-start;
}

.menucard_container__category_container--measuring {
    align-items: flex-start;
}

.menucard_container__category_container--single {
    justify-content: center;
    overflow: visible;
}

.menucard_container__category_container.menucard_container__category_container--single > .menucard_container__category_container__tile {
    box-sizing: border-box;
    flex: 0 1 100%;
    width: 100%;
    min-width: 0;
    max-width: var(--frontend-menu-tile-max-width, 430px);
}

.menucard_container__category_container__tile{
    box-sizing: border-box;
    color: var(--frontend-menu-tile-text-color, #ffffff);
    background: var(--frontend-menu-tile-background, #000000);
    border: var(--frontend-menu-tile-border-width, 0px) solid var(--frontend-menu-tile-border-color, #000000);
    border-radius: var(--frontend-menu-tile-radius);
    box-shadow: var(--frontend-menu-tile-shadow, -1px -1px 5px 5px #333333);
    margin-block: var(--frontend-menu-tile-gap);
    padding: var(--frontend-menu-tile-padding);
    display: flex;
    flex-wrap: wrap;
    font-family: var(--frontend-menu-tile-body-font, var(--font-primary));
}

.menucard_container__category_container > .menucard_container__category_container__tile{
    flex: 0 0 min(var(--frontend-menu-tile-max-width, 430px), var(--frontend-menu-tile-narrow-width, calc(95.238095% - 7.714286px)));
    width: min(var(--frontend-menu-tile-max-width, 430px), var(--frontend-menu-tile-narrow-width, calc(95.238095% - 7.714286px)));
    min-width: 0;
    max-width: var(--frontend-menu-tile-max-width, 430px);
    scroll-snap-align: start;
}

.menucard_container__category_container > .menucard_container__category_container__tile--menu{
    min-height: var(--frontend-menu-tile-minimum-height, 220px);
}

.menucard_container__category_container > .menucard_container__category_container__tile--menu.menucard_container__category_container__tile--no-image{
    align-content: center;
}

.menucard_container__category_container__tile.menucard-scroll-target--highlight {
    box-shadow:
        var(--frontend-menu-tile-shadow, -1px -1px 5px 5px #333333),
        0 0 0 2px var(--surface-card-highlight-ring),
        0 0 34px var(--surface-card-highlight-glow);
    animation: menucard-scroll-target-highlight 2s ease-out;
}

@keyframes menucard-scroll-target-highlight {
    0% {
        transform: translateY(0);
        filter: brightness(1.12);
    }
    55% {
        transform: translateY(-2px);
        filter: brightness(1.04);
    }
    100% {
        transform: translateY(0);
        filter: brightness(1);
    }
}
.container--full {
    width: 100%;
}
.container--40 {
    width: 40%;
}
.container--first {
    margin: 5em auto 1em auto;
}
.container--shadow {
    display: block;
    border: #000;
    border-radius: var(--surface-card-radius);
    box-shadow: var(--surface-card-shadow);
}

.content_container__header.container--shadow {
    border: var(--site-content-container-border-width) solid var(--site-content-container-border-color);
    border-radius: var(--site-content-container-radius);
    box-shadow: var(--site-content-container-shadow);
}
.container--center{
    text-align: center;
}
.menucard_container__category_container__tile--with_image {
    columns: 2;
}
.menucard_container__category_container__tile--menu{
    flex-wrap: wrap;
    position: relative;
    padding-bottom: var(--frontend-menu-tile-padding);
}
.menucard_container__category_container__tile--menu.menucard_container__category_container__tile--no-description{
    align-content: flex-start;
}
.menucard_container__category_container__tile--menu.menucard_container__category_container__tile--no-description > .menucard_container__category_container__tile__image{
    margin-top: 0;
}
.menucard_container__category_container__tile .menucard_container__category_container__tile--menu{
    display: inline-flex;
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    padding: 0;
    padding-top: var(--frontend-menu-tile-padding);
    min-width: 0;
    width: 94%;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    vertical-align: top;
}
.menucard_container__category_container__tile--category{
    display: block;
    columns: 2;
}
.menucard_container__category_container__tile--category.menucard_container__category_container__tile--grouped-grid{
    display: grid;
    columns: auto;
    grid-template-columns: repeat(var(--frontend-menu-grouped-columns, 2), minmax(0, 1fr));
    column-gap: calc(var(--frontend-menu-tile-gap) * 1.5);
    align-content: start;
    align-items: start;
    align-self: flex-start;
}
.menucard_container__category_container__tile__grouped-column{
    display: flex;
    flex-direction: column;
    gap: var(--frontend-menu-tile-gap);
    min-width: 0;
}
.menucard_container__category_container__tile__grouped-column > .menucard_container__category_container__tile--menu{
    box-sizing: border-box;
    width: 100%;
    margin: 0;
}
.menucard_container__category_container__tile__category-image-item{
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    break-inside: avoid;
}
.menucard_container__category_container__tile__category-image-item > .menucard_container__category_container__tile__image{
    box-sizing: border-box;
    display: flex;
    width: 100%;
    max-width: 100%;
    margin: 0;
}
.menucard_container__category_container__tile__category-image-item > .menucard_container__category_container__tile__image img{
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
}
.menucard_container__category_container__tile__image{
    max-width: 60%;
    flex-shrink: 1;
    margin: auto 0 auto 0;
}
.menucard_container__category_container__tile__image img{
    max-width: 100%;
    max-height: 200px;
    width: auto;
    height: auto;
    border-radius: var(--frontend-menu-tile-image-radius, 10%);
    display: block;
}
.menucard_container__category_container__tile--menu.menucard_container__category_container__tile--has-image{
    column-gap: var(--frontend-menu-image-option-gap, 10px);
    align-items: center;
}
.menucard_container__category_container__tile--menu.menucard_container__category_container__tile--has-image > .menucard_container__category_container__tile__image{
    box-sizing: border-box;
    display: flex;
    flex: 0 1 var(--frontend-menu-landscape-image-width, 50%);
    justify-content: center;
    align-items: center;
    max-width: var(--frontend-menu-landscape-image-width, 50%);
    margin: 0;
}
.menucard_container__category_container__tile--menu.menucard_container__category_container__tile--image-landscape > .menucard_container__category_container__tile__image img{
    width: 100%;
    max-height: none;
}
.menucard_container__category_container__tile--menu.menucard_container__category_container__tile--image-landscape > .menucard_container__category_container__tile__image,
.menucard_container__category_container__tile--menu.menucard_container__category_container__tile--image-landscape > .menucard_container__category_container__tile__options,
.menucard_container__category_container__tile--menu.menucard_container__category_container__tile--image-landscape > .menucard_container__category_container__tile__deposit{
    transform: translateY(var(--frontend-menu-landscape-content-offset, 0px));
}
.menucard_container__category_container__tile--menu.menucard_container__category_container__tile--image-portrait > .menucard_container__category_container__tile__image{
    flex-basis: var(--frontend-menu-portrait-image-width, 46%);
    max-width: var(--frontend-menu-portrait-image-width, 46%);
}
.menucard_container__category_container__tile--menu.menucard_container__category_container__tile--image-portrait > .menucard_container__category_container__tile__image img{
    width: auto;
    max-height: var(--frontend-menu-tile-max-width, 430px);
}
.menucard_container__category_container__tile--menu.menucard_container__category_container__tile--has-image > .menucard_container__category_container__tile__options{
    box-sizing: border-box;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin: 0;
}
.menucard_container__category_container__tile--menu.menucard_container__category_container__tile--has-image.menucard_container__category_container__tile--has-ingredients > .menucard_container__category_container__tile__options{
    padding-bottom: calc(var(--font-size-meta) * 1.25 + 10px);
}
.menucard_container__category_container__tile--menu.menucard_container__category_container__tile--image-landscape.menucard_container__category_container__tile--has-ingredients{
    padding-bottom: calc(var(--font-size-meta) + 8px + var(--frontend-menu-ingredients-link-gap, 8px));
}
.menucard_container__category_container__tile--menu.menucard_container__category_container__tile--image-landscape.menucard_container__category_container__tile--has-ingredients > .menucard_container__category_container__tile__options{
    padding-bottom: 0;
}
.menucard_container__category_container__tile__image--missing{
    max-width: 60%;
    min-height: 120px;
    border: 1px dashed color-mix(in srgb, var(--frontend-menu-tile-border-color, #000000) 70%, var(--frontend-menu-tile-text-color, #ffffff) 30%);
    border-radius: 10px;
    background: color-mix(in srgb, var(--frontend-menu-tile-text-color, #ffffff) 5%, var(--frontend-menu-tile-background, #000000));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 12px 12px;
    box-sizing: border-box;
    cursor: pointer;
}
.menucard_container__image-missing{
    text-align: center;
    color: var(--frontend-menu-tile-description-color, #dddddd);
    font-size: var(--font-size-meta);
    line-height: 1.4;
}
.menucard_container__category_container__tile__image--zoomable{
    position: relative;
    cursor: pointer;
}
.menucard_container__category_container__tile__image-overlay{
    position: absolute;
    inset: 0;
    display: var(--frontend-menu-tile-overlay-display, flex);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: color-mix(in srgb, var(--frontend-menu-tile-text-color, #ffffff) 72%, transparent);
    text-align: center;
    pointer-events: none;
}
.menucard_container__category_container__tile__image-overlay-icon{
    font-size: calc(var(--font-size-title) * 1.27);
    line-height: 1;
    width: 1.5em;
    height: 1.5em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-tone-black, #000) 34%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-main, #fff) 26%, transparent);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--theme-tone-black, #000) 28%, transparent);
    animation: menucard-overlay-icon-fade 1.8s ease-in-out infinite;
    animation: var(--frontend-menu-tile-overlay-animation, menucard-overlay-icon-fade 1.8s ease-in-out infinite);
}
.menucard_container__category_container__tile__image-overlay-text{
    display: none;
}
@keyframes menucard-overlay-icon-fade {
    0% {
        background: color-mix(in srgb, var(--theme-tone-black, #000) 28%, transparent);
        border-color: color-mix(in srgb, var(--text-main, #fff) 20%, transparent);
    }
    50% {
        background: color-mix(in srgb, var(--theme-tone-black, #000) 44%, transparent);
        border-color: color-mix(in srgb, var(--text-main, #fff) 34%, transparent);
    }
    100% {
        background: color-mix(in srgb, var(--theme-tone-black, #000) 28%, transparent);
        border-color: color-mix(in srgb, var(--text-main, #fff) 20%, transparent);
    }
}
.menucard_container__category_container__tile--category .menucard_container__category_container__tile__image{
    max-width: 100%;
    margin: 13px 5px 5px 5px;
}
.menucard_container__category_container__tile--category .menucard_container__category_container__tile__category-image-item > .menucard_container__category_container__tile__image{
    margin: 0;
}
.menucard_container__category_container__tile__name{
    color: var(--frontend-menu-tile-headline-color, #ffffff);
    font-family: var(--frontend-menu-tile-headline-font, var(--font-primary));
    font-size: calc(var(--font-size-base) * var(--frontend-menu-tile-headline-scale));
    font-weight: bold;
    text-align: center;
    padding: 0 0 5px 0;
    width: 100%;
}
.menucard_container__category_container__tile__name_label {
    text-decoration: underline;
}
.menucard_container__category_container__tile__description{
    color: var(--frontend-menu-tile-description-color, #dddddd);
    font-size: calc(var(--font-size-meta) * var(--frontend-menu-tile-text-scale));
    text-align: center;
    padding: 0 0 5px 0px;
    width: 100%;
}
.menucard_availability_badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--frontend-menu-availability-badge-background, #5c2020);
    border: 1px solid var(--frontend-menu-availability-badge-border, #a63e3e);
    color: var(--frontend-menu-availability-badge-text, #ffb3b3);
    font-size: var(--font-size-meta);
}
.menucard_availability_badge--inline {
    margin-left: 6px;
    padding: 2px 8px;
}
.menucard_container__category_container__tile--badges-active .menucard_option_row--unavailable {
    background-image: linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-position: center;
    background-size: calc(100% - 0.4em) 1px;
}
.menucard_container__category_container__tile--badges-active .menucard_option_row--unavailable td {
    opacity: 0.6;
}
/* Popup-Klon: Tabelle volle Breite, Preis rechtsbündig wie im Tile */
.menucard_container__popout_image__options table {
    width: 100%;
    border-collapse: collapse;
}
.menucard_container__category_container__tile__options .menucard_option_image {
    display: none;
}
.menucard_container__popout_image__options .menucard_option_image {
    display: table-cell;
    width: clamp(56px, 18vw, 112px);
    padding: 5px 10px 5px 0;
    vertical-align: middle;
}
.menucard_container__popout_image__options .menucard_option_image img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    border-radius: var(--frontend-menu-popup-image-radius, 5px);
}
/* Popup-Klon: dieselbe weiße Durchstreich-Linie wie im Tile */
.menucard_container__popout_image__options .menucard_option_row--unavailable {
    background-image: linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-position: center;
    background-size: calc(100% - 0.4em) 1px;
}
.menucard_container__popout_image__options .menucard_option_row--unavailable td {
    opacity: 0.6;
}
/* Eingeschränkt verfügbare Optionen: kein Strikethrough, Sternchen-Marker orange */
.menucard_option_row--limited td {
    opacity: 0.85;
}
.menucard_option_limited_marker {
    font-size: 1.2em;
    vertical-align: baseline;
    position: relative;
    top: -0.1em;
    line-height: 0;
    margin-left: 2px;
    color: #fff;
    font-weight: 700;
}
/* Tile-Level-Badge: mittig auf dem oberen Rahmen der Menükachel */
.menucard_tile_badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    padding: 2px 9px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.5;
    z-index: 2;
    pointer-events: none;
    white-space: nowrap;
}
.menucard_tile_badge--sold-out {
    background: #dc2626;
    color: #fff;
    border: 1px solid #b91c1c;
}
.menucard_tile_badge--limited {
    background: #d97706;
    color: #fff;
    border: 1px solid #b45309;
}

.menucard_container__category_container__tile__popup_link{
    position: absolute;
    right: 24px;
    bottom: 8px;
    z-index: 1;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size: var(--font-size-meta);
    line-height: 1;
    background: transparent;
    border: none;
    box-shadow: none;
    opacity: 0.78;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--frontend-menu-tile-text-color, #ffffff);
}
.menucard_container__category_container__tile__popup_link:hover,
.menucard_container__category_container__tile__popup_link:focus-visible{
    background: transparent;
    opacity: 1;
}
.menucard_container__category_container__tile__popup_fallback{
    display: none;
    width: 100%;
    margin-top: 10px;
}
.menucard_container__category_container__tile__popup_fallback_summary{
    cursor: pointer;
    font-size: var(--font-size-meta);
    text-decoration: underline;
    text-underline-offset: 2px;
    opacity: 0.78;
}
.menucard_container__category_container__tile__popup_fallback_body{
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--frontend-menu-tile-border-color, #000000) 70%, var(--frontend-menu-tile-text-color, #ffffff) 30%);
    border-radius: 10px;
    background: color-mix(in srgb, var(--frontend-menu-tile-text-color, #ffffff) 4%, var(--frontend-menu-tile-background, #000000));
}
.menucard_container__category_container__tile--menu.menucard_container__category_container__tile--has-image .menucard_container__category_container__tile__popup_link{
    right: 24px;
}
.menucard_container__category_container__tile--menu.menucard_container__category_container__tile--no-image{
    padding-bottom: 30px;
}
.menucard_container__category_container__tile--menu.menucard_container__category_container__tile--no-image.menucard_container__category_container__tile--has-ingredients{
    padding-bottom: calc(var(--font-size-meta) + 8px + var(--frontend-menu-ingredients-link-gap, 8px));
}
.menucard_container__category_container__tile--menu.menucard_container__category_container__tile--no-image .menucard_container__category_container__tile__popup_link{
    bottom: 8px;
}

/* In grouped (two-column) category tiles without image, move additives link slightly more to the right. */
.menucard_container__category_container__tile--category .menucard_container__category_container__tile--menu.menucard_container__category_container__tile--no-image .menucard_container__category_container__tile__popup_link{
    right: 12px;
}
.menucard_container__category_container__tile--category .menucard_container__category_container__tile--menu.menucard_container__category_container__tile--no-ingredients{
    padding-bottom: var(--frontend-menu-tile-padding);
}
.menucard_container__category_container__tile--category .menucard_container__category_container__tile--menu .menucard_container__category_container__tile__options table{
    width: 100%;
}
.menucard_container__category_container__tile--category .menucard_container__category_container__tile--menu .menucard_container__category_container__tile__options td:first-child{
    padding-left: var(--frontend-menu-grouped-option-padding-x, 8px);
}
.menucard_container__category_container__tile--category .menucard_container__category_container__tile--menu .menucard_container__category_container__tile__options td:last-child{
    padding-right: var(--frontend-menu-grouped-option-padding-x, 8px);
}
.menucard_container__category_container__tile__options{
    margin: auto 0 auto 0;
}
.menucard_container__category_container__tile__options table {
    border-collapse: collapse;
}
.menucard_container__category_container__tile__options td{
    font-size: calc(var(--font-size-meta) * var(--frontend-menu-tile-text-scale));
}
.menucard_container__category_container__tile__options .order-menu-info-options-table {
    width: 100%;
}
.menucard_container__category_container__tile__options .order-menu-info-options-table td {
    font-size: var(--font-size-meta);
}
.menucard_container__category_container__tile__options__price {
    width: 1%;
    text-align: right;
    color: var(--frontend-menu-tile-price-color, #ffffff);
}
.menucard_container__category_container__tile__deposit {
    font-size: calc(var(--font-size-meta) * var(--frontend-menu-tile-text-scale));
    margin: 4px 0 0;
    opacity: 0.85;
}

@media (max-width: 760px) {
    .journal-page__entry {
        width: 100%;
    }
}
#popup_popout {
    --frontend-menu-popup-effective-max-width: var(--frontend-template-max-width, var(--frontend-menu-popup-max-width, 500px));
    --frontend-menu-popup-effective-padding: var(--frontend-template-padding, var(--frontend-menu-popup-padding, 20px));
    --frontend-menu-popup-effective-gap: var(--frontend-template-gap, 0);
    --frontend-menu-popup-effective-radius: var(--frontend-template-radius, var(--frontend-menu-popup-radius, 10px));
    --frontend-menu-popup-effective-background: var(--frontend-template-background, var(--frontend-menu-popup-background, #222222));
    --frontend-menu-popup-effective-highlight-color: var(--frontend-template-highlight-fallback-color, var(--frontend-menu-popup-highlight-fallback-color, #ffd166));
    --frontend-menu-popup-effective-text-color: var(--frontend-template-text-color, var(--frontend-menu-popup-text-color, #ffffff));
    --frontend-menu-popup-effective-overlay-color: var(--frontend-template-overlay-color, var(--frontend-menu-popup-overlay-color, #000000));
    --frontend-menu-popup-effective-overlay-opacity: var(--frontend-template-overlay-opacity, .8);
    --frontend-menu-popup-effective-border-width: var(--frontend-template-border-width, var(--frontend-menu-popup-border-width, 1px));
    --frontend-menu-popup-effective-border-color: var(--frontend-template-border-color, var(--frontend-menu-popup-border-color, #444444));
    --frontend-menu-popup-effective-shadow: var(--frontend-template-shadow, var(--frontend-menu-popup-shadow, 0 4px 15px rgba(0, 0, 0, 0.5)));
    background: rgba(0, 0, 0, 0.8);
    background: color-mix(in srgb, var(--frontend-menu-popup-effective-overlay-color) calc(var(--frontend-menu-popup-effective-overlay-opacity) * 100%), transparent);
}
.menucard_container__popout_image{
    position: relative;
    width: min(var(--frontend-menu-popup-effective-max-width), 100%);
    max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px);
    box-sizing: border-box; /* Padding in Breite einberechnen */
    background:
        radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--frontend-menu-popup-image-highlight-color, var(--frontend-menu-popup-effective-highlight-color)) 30%, transparent) 0, transparent 38%),
        linear-gradient(145deg, color-mix(in srgb, var(--frontend-menu-popup-effective-background) 88%, var(--text-main, #fff) 12%) 0%, color-mix(in srgb, var(--frontend-menu-popup-effective-background) 82%, var(--theme-tone-black, #000) 18%) 100%),
        var(--site-surface-background, #262626);
    color: var(--frontend-menu-popup-effective-text-color);
    font-family: var(--frontend-menu-popup-body-font, var(--font-primary));
    font-size: calc(var(--font-size-base) * var(--frontend-menu-popup-text-scale, 1));
    margin: 5vh auto;
    padding: var(--frontend-menu-popup-effective-padding);
    gap: var(--frontend-menu-popup-effective-gap);
    border: var(--frontend-menu-popup-effective-border-width) solid var(--frontend-menu-popup-effective-border-color);
    border-radius: var(--frontend-menu-popup-effective-radius);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-main, #fff) 12%, transparent), var(--frontend-menu-popup-effective-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.26s ease, opacity 0.26s ease;
}

body.app-ua-form-mobile #popup_popout {
    --frontend-menu-popup-effective-max-width: var(--frontend-template-max-width-mobile, var(--frontend-template-max-width, var(--frontend-menu-popup-max-width, 500px)));
    --frontend-menu-popup-effective-padding: var(--frontend-template-padding-mobile, var(--frontend-template-padding, var(--frontend-menu-popup-padding, 20px)));
    --frontend-menu-popup-effective-gap: var(--frontend-template-gap-mobile, var(--frontend-template-gap, 0));
    --frontend-menu-popup-effective-radius: var(--frontend-template-radius-mobile, var(--frontend-template-radius, var(--frontend-menu-popup-radius, 10px)));
    --frontend-menu-popup-effective-background: var(--frontend-template-background-mobile, var(--frontend-template-background, var(--frontend-menu-popup-background, #222222)));
    --frontend-menu-popup-effective-highlight-color: var(--frontend-template-highlight-fallback-color-mobile, var(--frontend-template-highlight-fallback-color, var(--frontend-menu-popup-highlight-fallback-color, #ffd166)));
    --frontend-menu-popup-effective-text-color: var(--frontend-template-text-color-mobile, var(--frontend-template-text-color, var(--frontend-menu-popup-text-color, #ffffff)));
    --frontend-menu-popup-effective-overlay-color: var(--frontend-template-overlay-color-mobile, var(--frontend-template-overlay-color, var(--frontend-menu-popup-overlay-color, #000000)));
    --frontend-menu-popup-effective-overlay-opacity: var(--frontend-template-overlay-opacity-mobile, var(--frontend-template-overlay-opacity, .8));
    --frontend-menu-popup-effective-border-width: var(--frontend-template-border-width-mobile, var(--frontend-template-border-width, var(--frontend-menu-popup-border-width, 1px)));
    --frontend-menu-popup-effective-border-color: var(--frontend-template-border-color-mobile, var(--frontend-template-border-color, var(--frontend-menu-popup-border-color, #444444)));
    --frontend-menu-popup-effective-shadow: var(--frontend-template-shadow-mobile, var(--frontend-template-shadow, var(--frontend-menu-popup-shadow, 0 4px 15px rgba(0, 0, 0, 0.5))));
}

body.app-ua-form-desktop #popup_popout {
    --frontend-menu-popup-effective-max-width: var(--frontend-template-max-width-desktop, var(--frontend-template-max-width, var(--frontend-menu-popup-max-width, 500px)));
    --frontend-menu-popup-effective-padding: var(--frontend-template-padding-desktop, var(--frontend-template-padding, var(--frontend-menu-popup-padding, 20px)));
    --frontend-menu-popup-effective-gap: var(--frontend-template-gap-desktop, var(--frontend-template-gap, 0));
    --frontend-menu-popup-effective-radius: var(--frontend-template-radius-desktop, var(--frontend-template-radius, var(--frontend-menu-popup-radius, 10px)));
    --frontend-menu-popup-effective-background: var(--frontend-template-background-desktop, var(--frontend-template-background, var(--frontend-menu-popup-background, #222222)));
    --frontend-menu-popup-effective-highlight-color: var(--frontend-template-highlight-fallback-color-desktop, var(--frontend-template-highlight-fallback-color, var(--frontend-menu-popup-highlight-fallback-color, #ffd166)));
    --frontend-menu-popup-effective-text-color: var(--frontend-template-text-color-desktop, var(--frontend-template-text-color, var(--frontend-menu-popup-text-color, #ffffff)));
    --frontend-menu-popup-effective-overlay-color: var(--frontend-template-overlay-color-desktop, var(--frontend-template-overlay-color, var(--frontend-menu-popup-overlay-color, #000000)));
    --frontend-menu-popup-effective-overlay-opacity: var(--frontend-template-overlay-opacity-desktop, var(--frontend-template-overlay-opacity, .8));
    --frontend-menu-popup-effective-border-width: var(--frontend-template-border-width-desktop, var(--frontend-template-border-width, var(--frontend-menu-popup-border-width, 1px)));
    --frontend-menu-popup-effective-border-color: var(--frontend-template-border-color-desktop, var(--frontend-template-border-color, var(--frontend-menu-popup-border-color, #444444)));
    --frontend-menu-popup-effective-shadow: var(--frontend-template-shadow-desktop, var(--frontend-template-shadow, var(--frontend-menu-popup-shadow, 0 4px 15px rgba(0, 0, 0, 0.5))));
}

body.app-ua-container-webview #popup_popout {
    --frontend-menu-popup-effective-max-width: var(--frontend-template-max-width-webview, var(--frontend-template-max-width, var(--frontend-menu-popup-max-width, 500px)));
    --frontend-menu-popup-effective-padding: var(--frontend-template-padding-webview, var(--frontend-template-padding, var(--frontend-menu-popup-padding, 20px)));
    --frontend-menu-popup-effective-gap: var(--frontend-template-gap-webview, var(--frontend-template-gap, 0));
    --frontend-menu-popup-effective-radius: var(--frontend-template-radius-webview, var(--frontend-template-radius, var(--frontend-menu-popup-radius, 10px)));
    --frontend-menu-popup-effective-background: var(--frontend-template-background-webview, var(--frontend-template-background, var(--frontend-menu-popup-background, #222222)));
    --frontend-menu-popup-effective-highlight-color: var(--frontend-template-highlight-fallback-color-webview, var(--frontend-template-highlight-fallback-color, var(--frontend-menu-popup-highlight-fallback-color, #ffd166)));
    --frontend-menu-popup-effective-text-color: var(--frontend-template-text-color-webview, var(--frontend-template-text-color, var(--frontend-menu-popup-text-color, #ffffff)));
    --frontend-menu-popup-effective-overlay-color: var(--frontend-template-overlay-color-webview, var(--frontend-template-overlay-color, var(--frontend-menu-popup-overlay-color, #000000)));
    --frontend-menu-popup-effective-overlay-opacity: var(--frontend-template-overlay-opacity-webview, var(--frontend-template-overlay-opacity, .8));
    --frontend-menu-popup-effective-border-width: var(--frontend-template-border-width-webview, var(--frontend-template-border-width, var(--frontend-menu-popup-border-width, 1px)));
    --frontend-menu-popup-effective-border-color: var(--frontend-template-border-color-webview, var(--frontend-template-border-color, var(--frontend-menu-popup-border-color, #444444)));
    --frontend-menu-popup-effective-shadow: var(--frontend-template-shadow-webview, var(--frontend-template-shadow, var(--frontend-menu-popup-shadow, 0 4px 15px rgba(0, 0, 0, 0.5))));
}

body.app-ua-container-webapp #popup_popout {
    --frontend-menu-popup-effective-max-width: var(--frontend-template-max-width-webapp, var(--frontend-template-max-width, var(--frontend-menu-popup-max-width, 500px)));
    --frontend-menu-popup-effective-padding: var(--frontend-template-padding-webapp, var(--frontend-template-padding, var(--frontend-menu-popup-padding, 20px)));
    --frontend-menu-popup-effective-gap: var(--frontend-template-gap-webapp, var(--frontend-template-gap, 0));
    --frontend-menu-popup-effective-radius: var(--frontend-template-radius-webapp, var(--frontend-template-radius, var(--frontend-menu-popup-radius, 10px)));
    --frontend-menu-popup-effective-background: var(--frontend-template-background-webapp, var(--frontend-template-background, var(--frontend-menu-popup-background, #222222)));
    --frontend-menu-popup-effective-highlight-color: var(--frontend-template-highlight-fallback-color-webapp, var(--frontend-template-highlight-fallback-color, var(--frontend-menu-popup-highlight-fallback-color, #ffd166)));
    --frontend-menu-popup-effective-text-color: var(--frontend-template-text-color-webapp, var(--frontend-template-text-color, var(--frontend-menu-popup-text-color, #ffffff)));
    --frontend-menu-popup-effective-overlay-color: var(--frontend-template-overlay-color-webapp, var(--frontend-template-overlay-color, var(--frontend-menu-popup-overlay-color, #000000)));
    --frontend-menu-popup-effective-overlay-opacity: var(--frontend-template-overlay-opacity-webapp, var(--frontend-template-overlay-opacity, .8));
    --frontend-menu-popup-effective-border-width: var(--frontend-template-border-width-webapp, var(--frontend-template-border-width, var(--frontend-menu-popup-border-width, 1px)));
    --frontend-menu-popup-effective-border-color: var(--frontend-template-border-color-webapp, var(--frontend-template-border-color, var(--frontend-menu-popup-border-color, #444444)));
    --frontend-menu-popup-effective-shadow: var(--frontend-template-shadow-webapp, var(--frontend-template-shadow, var(--frontend-menu-popup-shadow, 0 4px 15px rgba(0, 0, 0, 0.5))));
}
.menucard_container__popout_close{
    position: absolute;
    top: 8px;
    left: 8px;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--frontend-menu-popup-close-border-color, #444444);
    border-radius: 999px;
    background: var(--frontend-menu-popup-close-background, #353535);
    color: var(--frontend-menu-popup-close-text-color, #ffffff);
    font-size: calc(var(--font-size-title) * 0.93);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.menucard_container__popout_image--entering{
    transform: translateY(-34px);
    opacity: 0;
}
.menucard_container__popout_image--closing{
    transform: translateY(-38px);
    opacity: 0;
}
.overlay--closing{
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: none;
}
.menucard_container__popout_image img{
    max-width: 100%;
    max-height: 50vh;
    display: block;
    border-radius: var(--frontend-menu-popup-image-radius, 5px);
    margin: 10px auto;
}
.menucard_container__popout_image__image-missing{
    width: 100%;
    min-height: 180px;
    border: 1px dashed var(--frontend-menu-popup-border-color, #444444);
    border-radius: 12px;
    background: var(--frontend-menu-popup-meta-background, #2b2b2b);
    color: var(--frontend-menu-popup-description-color, #dddddd);
    font-size: var(--font-size-meta);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px;
    box-sizing: border-box;
}
.menucard_container__popout_image__title{
    text-align: center;
    color: var(--frontend-menu-popup-title-color, #ffffff);
    font-family: var(--frontend-menu-popup-title-font, var(--font-headline));
    font-size: calc(var(--font-size-title) * var(--frontend-menu-popup-title-scale, 1.2));
    margin-bottom: 10px;
    border-bottom: var(--frontend-menu-popup-border-width, 1px) solid var(--frontend-menu-popup-border-color, #444444);
    width: 100%;
    padding-bottom: 10px;
}
/* Badge im Popout: aus absolutem Flow herausnehmen, zentriert über dem Titel */
.menucard_container__popout_image .menucard_tile_badge {
    position: static;
    transform: none;
    margin-bottom: 8px;
}
.menucard_container__popout_image__description {
    text-align: center;
    font-size: var(--font-size-base);
    margin-bottom: 15px;
    font-style: italic;
    color: var(--frontend-menu-popup-description-color, #dddddd);
}
.menucard_container__popout_image__description--category {
    font-style: normal;
    font-size: calc(var(--font-size-base) * 1.05);
    white-space: pre-wrap;
    text-align: left;
    line-height: 1.55;
}
.menucard_container__popout_image__deposit {
    font-size: var(--font-size-meta);
    text-align: center;
    opacity: 0.8;
    margin: 6px 0 0;
}
.menucard_container__popout_image__options,
.menucard_container__popout_image__deposit {
    color: var(--frontend-menu-popup-text-color, #ffffff);
}
.menucard_container__popout_image__options__price,
.menucard_container__popout_image__options .menucard_container__category_container__tile__options__price {
    color: var(--frontend-menu-popup-price-color, #ffffff);
    display: var(--frontend-menu-popup-price-display, table-cell);
}
.menucard_container__popout_image__meta{
    width: 100%;
    margin: 8px 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--frontend-menu-popup-meta-border-color, #444444);
    border-radius: 10px;
    background: var(--frontend-menu-popup-meta-background, #2b2b2b);
    color: var(--frontend-menu-popup-meta-text-color, #dddddd);
}
.menucard_container__popout_image__meta-title{
    text-align: center;
    font-weight: bold;
    margin-bottom: 8px;
}
.menucard_container__popout_image__meta-list{
    margin: 0;
    padding-left: 18px;
    color: var(--frontend-menu-popup-meta-text-color, #dddddd);
    font-size: var(--font-size-small);
}
.menucard_container__popout_image__meta-list li + li{
    margin-top: 6px;
}

.no-js .menucard_container__category_container__tile__image--zoomable{
    cursor: default;
}

.no-js .menucard_container__category_container__tile__image-overlay,
.no-js .menucard_container__category_container__tile__popup_link{
    display: none;
}

.no-js .menucard_container__category_container__tile__popup_fallback{
    display: block;
}

/* --- RESPONSIVE: DESKTOP --- */
@media screen and (min-width: 1000px) {
    body {
        display: flex;
        --layout-sidebar-offset: var(--desktop-sidebar-width);
    }
    /* Seiten ohne Navbar (z.B. Setup-Wizard) sollen als normaler Block-Container laufen,
       nicht als Flex-Container, damit Sidebar-Offsets vollständig unterdrückt werden. */
    body.page--no-navbar {
        display: block;
    }
    body.navbar-desktop-collapsed {
        --layout-sidebar-offset: 0px;
    }
    /* position:fixed Elemente können CSS-Variablen von body in Safari nicht
       zuverlässig erben – daher direkte Klassen-Selektoren als Fallback. */
    body:not(.navbar-desktop-collapsed) .app-notice-stack {
        left: var(--desktop-sidebar-width);
    }
    body.navbar-desktop-collapsed .app-notice-stack {
        left: 0;
    }
    body.navbar-ui-ready .app-notice-stack {
        transition: left 0.25s ease;
    }
    body:not(.navbar-desktop-collapsed) .app-incident-popup {
        left: calc(var(--desktop-sidebar-width) / 2 + 50%);
    }
    body.navbar-ui-ready .app-incident-popup {
        transition: left 0.25s ease;
    }
    body.navbar-desktop-collapsed .app-incident-popup {
        left: 50%;
    }
    body:not(.navbar-desktop-collapsed) .app-incident-popup.app-incident-popup--inline,
    body.navbar-desktop-collapsed .app-incident-popup.app-incident-popup--inline {
        left: auto;
    }
    body.navbar-ui-ready .app-incident-popup.app-incident-popup--inline {
        transition: none;
    }
    .no-js .app-noscript-notice--footer {
        left: var(--desktop-sidebar-width);
        width: calc(100% - var(--desktop-sidebar-width));
    }
    body.navbar-desktop-collapsed .no-js .app-noscript-notice--footer {
        left: 0;
        width: 100%;
    }
    #navbar {
        left: 0;
        width: var(--desktop-sidebar-width);
        position: fixed;
        top: var(--header-viewport-height, var(--header-height));
        bottom: var(--footer-viewport-inset);
        min-height: 0;
        height: auto;
        margin-top: 0;
        visibility: visible;
        pointer-events: auto;
        overflow: hidden;
        opacity: 1;
        transition: none;
        /* Eigene Compositor-Ebene: verhindert, dass Layout-Reflows im Body-Bereich
           die Position der fixen Sidebar visuell verschieben (Desktop-Jitter). */
        will-change: transform;
        contain: layout style;
    }
    .navbar {
        width: 100%;
        max-width: none;
        padding: 0 12px;
        transform: translateX(0);
        transition: none;
    }
    body[data-frontend-layout-enabled="1"][data-frontend-layout-navbar="overlay-left"] > #navbar .navbar {
        width: var(--frontend-template-width-desktop, var(--frontend-template-width, 100%));
    }
    body.navbar-ui-ready #navbar {
        transition: width 0.25s ease, opacity 0.25s ease;
    }
    body.navbar-ui-ready .navbar {
        transition: transform 0.25s ease;
    }
    body.navbar-desktop-collapsed #navbar {
        width: 0;
        opacity: 0;
        pointer-events: none;
    }
    body.navbar-desktop-collapsed #navbar .navbar {
        transform: translateX(calc(-100% - 24px));
    }
    .navbar__link {
        margin: 15px 0 5px 0;
    }
    .navbar__bottom {
        align-self: stretch;
        width: 100%;
        margin: auto 0 1em 0;
    }

    .navbar__bottom--guest {
        flex: 1 1 auto;
        min-height: 0;
        margin-top: 0;
        justify-content: flex-end;
    }

    .navbar__bottom .navbar__link {
        width: 100%;
    }
    .menucard_container{
        max-width: 85vw;
        margin: auto;
    }
    /* Die öffentliche Menükarte nutzt den neben der Navbar verfügbaren
       Desktop-Bereich vollständig. Wird die Navbar eingeklappt, erweitert die
       allgemeine Content-Regel diesen Bereich automatisch bis zum linken Rand. */
    body.page--public-menucard .content.content--frontend-design-v2 {
        padding-inline: 0;
    }
    body.page--public-menucard .menucard_container {
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }
    .impressum_container{
        margin: 5px auto auto 10px;
    }
    #menudiv{
        display: flex;
    }
    .content_container {
        margin: 1em auto 1em auto;
    }
    .content{
        width: calc(100vw - var(--desktop-sidebar-width));
        max-width: calc(100vw - var(--desktop-sidebar-width));
        min-height: calc(100dvh - var(--header-viewport-height, var(--header-height)) - var(--footer-stack-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        margin-left: var(--desktop-sidebar-width);
        font-size: calc(var(--font-size-base) * 1.08);
        transition: none;
    }
    body.navbar-ui-ready .content{
        transition: width 0.25s ease, max-width 0.25s ease, margin-left 0.25s ease;
    }
    body.navbar-desktop-collapsed .content{
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }

    /* Seiten ohne Navbar dürfen im Desktop-Modus nicht durch Sidebar-Offsets verschoben werden. */
    body.page--no-navbar .content,
    body.page--no-navbar #content {
        width: 100vw;
        max-width: 100vw;
        margin-left: 0;
    }

    body.page--no-navbar .content_container {
        width: 100%;
        max-width: min(100%, 920px);
        margin: 0 auto;
    }

    .content_container__header {
        font-size: var(--font-size-section-title);
    }
    .content_container__content p,
    .content_container__review_link,
    .hour-row {
        font-size: var(--font-size-small);
    }
    .menucard_container__header {
        font-size: calc(var(--font-size-title) * 1.13);
    }
    .menucard_container__category_container > .menucard_container__category_container__tile {
        flex-basis: var(--frontend-menu-tile-max-width, 430px);
        width: var(--frontend-menu-tile-max-width, 430px);
        min-width: min(100%, var(--frontend-menu-tile-max-width, 430px));
        max-width: var(--frontend-menu-tile-max-width, 430px);
    }
    .menucard_container__category_container--single {
        justify-content: flex-start;
    }
    .menucard_container__category_container.menucard_container__category_container--single > .menucard_container__category_container__tile {
        flex-basis: var(--frontend-menu-tile-max-width, 430px);
        width: var(--frontend-menu-tile-max-width, 430px);
        min-width: min(100%, var(--frontend-menu-tile-max-width, 430px));
        max-width: var(--frontend-menu-tile-max-width, 430px);
    }
    .menucard_container__category_container__tile__name {
        font-size: calc(var(--font-size-section-title) * 1.1);
    }
    .menucard_container__category_container__tile__description,
    .menucard_container__category_container__tile__options td,
    .menucard_container__category_container__tile__options .order-menu-info-options-table td {
        font-size: var(--font-size-meta);
    }
}

/* --- LOGIN PAGE --- */
.login-card {
    max-width: 520px;
    margin: 0 auto;
}

.login_form {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

.login_form__fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.login_form__label {
    text-align: left;
    font-size: var(--font-size-meta);
    color: color-mix(in srgb, var(--text-main, #fff) 84%, transparent);
}

.login_form input {
    width: 100%;
    margin: 0;
    /* 16px verhindert iOS-Auto-Zoom auf dem Loginformular. */
    font-size: 16px;
    line-height: 1.25;
    -webkit-appearance: none;
    appearance: none;
    background-color: #444;
    border-radius: 8px;
}

.login_form__actions {
    display: flex;
    justify-content: center;
}

.login_form button {
    width: 100%;
    max-width: 220px;
    margin: 0;
    border-radius: 8px;
}

.login_form__message {
    margin: 0;
    font-size: var(--font-size-meta);
    color: #f2b8b5;
}

.login_form__message--info {
    color: color-mix(in srgb, var(--text-main, #fff) 82%, transparent);
}

/* --- FOOTER --- */
.footer__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 2px 8px 0;
}

.footer__social {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--font-size-small);
}

.footer__meta .footer__link {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

.footer__meta .active {
    color: #2196f3;
    font-weight: bold;
}

.footer__meta .separator {
    color: #555;
}

.footer__warning-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 999px;
    background: var(--app-notice-accent, #ff9f1a);
    color: #ffffff;
    font-size: var(--font-size-meta);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 0 0 1px var(--app-notice-accent-border, rgba(255, 159, 26, 0.46));
    cursor: pointer;
    transition: transform 150ms ease-out, opacity 150ms ease-out;
}

.footer__warning-indicator--active,
.app-notice-indicator--active,
[data-app-notice-indicator].app-notice-indicator--active {
    transform: scale(1.2);
    opacity: 0.7;
}

.footer__warning-indicator--restore {
    transform: scale(0.96);
}

.footer__warning-indicator--incident {
    width: 15px;
    height: 15px;
    font-size: calc(var(--font-size-meta) * 0.75);
    box-shadow: 0 0 0 1px var(--app-notice-accent-border, rgba(59, 29, 0, 0.22)), 0 0 12px color-mix(in srgb, var(--app-notice-accent, #ff9f1a) 55%, transparent);
}

.js-enabled .footer__warning-indicator--noscript {
    display: none;
}

.js-enabled .footer__notice-separator--noscript-only {
    display: none;
}

.footer__content__social__text {
    margin: 0;
    line-height: 1.2;
}

/* --- RESPONSIVE: iPHONE LANDSCAPE --- */
@media only screen and (max-width: 932px) and (orientation: landscape) {
    .app-notice-stack--center {
        top: auto;
        bottom: calc(var(--footer-viewport-inset) + 8px);
        transform: none;
        padding: 0;
    }

    .homepage-gallery {
        margin-bottom: 8px;
    }

    .homepage-gallery__viewport {
        height: calc(100dvh - var(--header-viewport-height, var(--header-height)) - var(--footer-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
        max-height: calc(100dvh - var(--header-viewport-height, var(--header-height)) - var(--footer-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
        aspect-ratio: auto;
    }

    .footer__content {
        padding-top: 8px;
    }

    .footer__social,
    .footer__meta {
        margin-top: 3px;
    }
}

@media only screen and (max-width: 768px) {
    .app-notice {
        padding: 0 8px;
    }

    .app-notice__panel {
        padding: 12px 40px 12px 14px;
    }

    .app-notice-stack--below_header {
        top: calc(var(--header-viewport-height, var(--header-height)) + env(safe-area-inset-top) + 4px);
    }

    .app-notice-stack--above_footer {
        bottom: calc(var(--footer-viewport-inset) + 4px);
    }
}

/* Auf schmalen iOS-Viewports bilden Meta-Navigation und Copyright zwei
   feste Zeilen. So kann ein zusätzlicher Hinweis-Badge die mittig gesetzte
   Copyright-Zeile weder horizontal noch über die iOS-Schriftmetriken berühren. */
@media only screen and (max-width: 700px),
       only screen and (max-width: 932px) and (orientation: landscape) {
    .footer__content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: minmax(0, 1fr) auto;
        column-gap: 8px;
        row-gap: 0;
        padding: 2px 8px 0;
    }

    .footer__social {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        margin-top: 0;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .footer__meta {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        margin-top: 0;
        gap: clamp(4px, 2vw, 10px);
    }

    .copyright {
        position: static;
        grid-column: 1 / -1;
        grid-row: 2;
        align-self: end;
        justify-self: center;
        transform: none;
        line-height: 1;
    }
}

/* In allen Breiten mit Overlay-Navbar liegt die sichtbare Footer-Trennlinie
   etwas höher. Die gemessene Footerhöhe verschiebt Navbar und Notices auf
   dieselbe Abschlusskante. */
@media only screen and (max-width: 999px) {
    body footer {
        height: calc(max(var(--footer-height), var(--frontend-template-height-mobile, var(--frontend-template-height, 40px)), 46px) + env(safe-area-inset-bottom));
        min-height: calc(max(var(--footer-height), var(--frontend-template-height-mobile, var(--frontend-template-height, 40px)), 46px) + env(safe-area-inset-bottom));
    }
}

/* Auf schmalen Telefonen bleiben Meta-Navigation und Copyright zweizeilig,
   werden aber gemeinsam am unteren sicheren Rand gebündelt. */
@media only screen and (max-width: 700px) {
    body[data-frontend-layout-enabled="1"] > footer .footer__content.footer__content,
    body:not([data-frontend-layout-enabled="1"]) .footer__content {
        grid-template-rows: auto auto;
        align-content: end;
        row-gap: 1px;
        padding: 4px 8px max(2px, env(safe-area-inset-bottom));
    }
}

/* Ein schmal gezogenes Desktopfenster verwendet bereits die Overlay-Navbar.
   Der Footer wird hier einzeilig und unten gebündelt, ohne die perfekte breite
   Desktopdarstellung ab 1000px zu verändern. */
@media only screen and (min-width: 701px) and (max-width: 999px) {
    body:not([data-app-form-factor="tablet"]) .footer__content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-rows: auto;
        align-content: end;
        align-items: end;
        column-gap: 8px;
        padding: 4px 8px;
    }

    body:not([data-app-form-factor="tablet"]) .footer__social {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        flex-wrap: nowrap;
    }

    body:not([data-app-form-factor="tablet"]) .copyright {
        position: static;
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        justify-self: center;
        transform: none;
    }

    body:not([data-app-form-factor="tablet"]) .footer__meta {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }
}

/* Im mobilen Querformat steht genügend horizontale Fläche für eine einzige
   Footer-Zeile zur Verfügung. Dadurch muss WebKit Social-Link und Copyright
   nicht in die zu flache 35px-Grundhöhe pressen und über die Trennlinie
   hinausragen lassen. Die explizite Innenhöhe hält zusätzlich die Safe Area
   innerhalb des fixierten Footers. */
@media only screen and (max-width: 932px) and (orientation: landscape) {
    body[data-app-form-factor="mobile"] .footer__content {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        align-items: end;
        height: 100%;
        min-height: 0;
        padding: 3px max(8px, env(safe-area-inset-right)) max(2px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        overflow: hidden;
    }

    body[data-app-form-factor="mobile"] .footer__social {
        grid-column: 1;
        grid-row: 1;
        align-self: end;
        justify-self: start;
    }

    body[data-app-form-factor="mobile"] .copyright {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        justify-self: center;
    }

    body[data-app-form-factor="mobile"] .footer__meta {
        grid-column: 3;
        grid-row: 1;
        align-self: end;
        justify-self: end;
    }
}

/* iPad Safari benötigt für den sehr flachen, fixierten Footer eine explizite
   Rasterhöhe. Ohne sie kann WebKit die zweizeilige Social-Zeile über die obere
   Trennlinie schieben und das absolut positionierte Copyright oben verankern. */
body[data-app-form-factor="tablet"] footer {
    height: calc(var(--footer-height) + env(safe-area-inset-bottom));
    padding-bottom: 0;
}

@media screen and (min-width: 1000px) {
    body[data-app-form-factor="tablet"] #navbar {
        bottom: var(--footer-viewport-inset);
    }
}

body[data-app-form-factor="tablet"] .footer__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: end;
    column-gap: 8px;
    height: calc(var(--footer-height) + env(safe-area-inset-bottom));
    min-height: calc(var(--footer-height) + env(safe-area-inset-bottom));
    padding: 3px max(8px, env(safe-area-inset-right)) max(2px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    overflow: hidden;
}

body[data-app-form-factor="tablet"] .footer__social {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    justify-self: start;
    min-width: 0;
    margin-top: 0;
    flex-wrap: nowrap;
    overflow: hidden;
}

body[data-app-form-factor="tablet"] .footer__social-copy {
    line-height: 1;
}

body[data-app-form-factor="tablet"] .copyright {
    position: static;
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    justify-self: center;
    transform: none;
    line-height: 1;
}

body[data-app-form-factor="tablet"] .footer__meta {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
    justify-self: end;
    min-width: 0;
    margin-top: 0;
}
/* Unveraenderliche Kennzeichnung des serverseitigen Beta-Deployments. Der
   Marken-Text bleibt alleiniger Inhalt des zentrierten Layoutflusses; das
   Badge wird relativ dazu rechts verankert und kann seine Version nativ per
   details/summary zugänglich einblenden. */
.app-deployment-badge-shell {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: calc(100% + clamp(6px, 1.2vw, 14px));
    flex: 0 0 auto;
    transform: translateY(-50%);
}

.app-deployment-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    flex: 0 0 auto;
    min-height: 28px;
    padding: .25rem .65rem;
    border: 1px solid rgba(255, 193, 7, .82);
    border-radius: 999px;
    color: #111;
    background: rgba(255, 193, 7, .94);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .38);
    font: 800 .72rem/1 system-ui, sans-serif;
    letter-spacing: .11em;
    white-space: nowrap;
    list-style: none;
    cursor: pointer;
}

.app-deployment-badge::-webkit-details-marker {
    display: none;
}

.app-deployment-badge::marker {
    content: '';
}

.app-deployment-badge:focus-visible {
    outline: 2px solid var(--focus-ring-color, #fff);
    outline-offset: 3px;
}

.app-deployment-badge__inline-version {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.app-deployment-badge__version-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    gap: .4rem;
    min-width: max-content;
    padding: .42rem .58rem;
    border: 1px solid rgba(255, 193, 7, .68);
    border-radius: 10px;
    color: #fff;
    background: rgba(22, 22, 22, .96);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .48);
    font: 700 .68rem/1.2 system-ui, sans-serif;
    letter-spacing: .01em;
    white-space: nowrap;
}

.app-deployment-badge__version-popover span {
    color: rgba(255, 255, 255, .7);
    font-weight: 600;
}

@media only screen and (max-width: 700px) {
    .app-deployment-badge-shell {
        top: 50%;
        left: calc(100% + clamp(2px, .8vw, 4px));
    }

    .app-deployment-badge {
        min-height: clamp(16px, 4.6vw, 19px);
        gap: .18rem;
        padding: clamp(.08rem, .45vw, .13rem) clamp(.24rem, 1.2vw, .34rem);
        font-size: clamp(.46rem, 2vw, .54rem);
        letter-spacing: .055em;
        box-shadow: 0 3px 12px rgba(0, 0, 0, .34);
    }

    .app-deployment-badge__inline-version {
        display: none;
    }

    .app-deployment-badge__version-popover {
        top: calc(100% + 4px);
        padding: .35rem .48rem;
        font-size: .62rem;
    }
}

@media only screen and (max-width: 370px) {
    .app-deployment-badge-shell {
        top: 50%;
        left: calc(100% + 1px);
    }

    .app-deployment-badge {
        min-height: 15px;
        padding: .07rem .22rem;
        font-size: .43rem;
        letter-spacing: .04em;
    }

    .app-deployment-badge__version-popover {
        right: -4px;
        font-size: .58rem;
    }
}