/* ========== CSS CUSTOM PROPERTIES (Variablen) ========== */
/* Zentrale Definition aller wiederverwendbaren Werte */
:root {
    /* FARBEN - Einmal definiert, überall verwendbar */
    --color-primary-dark:    #65075b;    /* Dunkles Violett - Hauptfarbe */
    --color-primary-bright:  #ba29ab;    /* Knalliges Pink - Akzentfarbe */
    
    /* TEXT-HIERARCHIE (von dunkel zu hell) */
    --color-text-darkest:    #222;       /* Überschriften in Overlays */
    --color-text-primary:    #333;       /* Haupttext, Titel */
    --color-text-secondary:  #444;       /* Wichtiger Sekundärtext */
    --color-text-muted:      #666;       /* Hilfstext, Labels */
    --color-text-light:      #888;       /* Unwichtiger Text */
    --color-text-inverse:    #fff;       /* Text auf dunklem Grund */
    
    /* AKZENT-TEXTFARBEN */
    --color-text-accent:     #ba29ab;    /* Hervorhebungen (Pink) */
    --color-text-link:       #9622c4;    /* Links, Hover-Effekte */
    
    /* HINTERGRUND & RAHMEN */
    --color-background:      #fff;       /* Weißer Hintergrund */
    --color-border-light:    #ddd;       /* Standard-Rahmen (Sidebar, Container) */
    --color-border-accent:   #ba29ab;    /* Akzent-Rahmen (Hervorhebungen) */
    --color-border-subtle:   #f0f0f0;    /* Sehr dezente Trennlinien */
    
    /* DRITTANBIETER-FARBEN */
    --color-whatsapp:        #25d366;    /* WhatsApp-Grün */
    --color-whatsapp-hover:  #1ea952;    /* WhatsApp-Grün (dunkel) */
    
    /* BORDER-RADIUS - 3-Stufen-System */
    --radius-s:               6px;       /* Buttons, Eingabefelder, kleine Elemente */
    --radius-m:              10px;       /* Produktkarten, Container, Menü */
    --radius-l:              16px;       /* Overlays, Dialoge, Produktdetail */
    --radius-round:          50%;        /* Komplett runde Elemente (Icons, Avatars) */
}

/* Design Regeln:
    - Farben werden jetzt über CSS Custom Properties verwaltet
    - Verwendung: color: var(--color-primary-dark);
    - Vorteil: Änderung an einer Stelle wirkt überall

    - Buttons
        - Hintergrund: var(--color-primary-bright)
        - Hover: var(--color-primary-dark)
        - Radius: var(--radius-s) für normale Buttons
        
    - Border-Radius Hierarchie (3 Stufen):
        - --radius-s (6px):   Buttons, Eingabefelder, kleine interaktive Elemente
        - --radius-m (10px):  Produktkarten, Container, Menü, Sidebar
        - --radius-l (16px):  Overlays, Dialoge, Produktdetail, Formulare
        - --radius-round:     Komplett runde Elemente (Icons, Avatars)
        
    - Border-Farben (3 Stufen):
        - --color-border-light:   Standard-Rahmen für Container, Sidebar
        - --color-border-accent:  Akzent-Rahmen für Hervorhebungen (#ba29ab)
        - --color-border-subtle:  Sehr dezente Trennlinien in Tabellen
*/

/* ========== GLOBAL / BODY ========== */
/* SEO Intro-Section verstecken (nur für Google Crawler) */
#intro {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

body {
    font-family: 'Calibri', 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #fff, #65075b);
    /* violetter Verlauf */
    color: var(--color-text-primary);
}

/* Verhindert Scrollen des Hintergrunds wenn Overlay offen ist */
body.overlay-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* ========== LAYOUT ========== */
.layout {
    display: flex;
    min-height: calc(100vh - 100px);
    /* Höhe minus Header */
}

/* ========== HEADER/MENÜ OBEN ========== */
/* Hauptnavigation mit Logo, Suchfeld und Hamburger-Menü */
#menu {
    background: white;
    padding: 0 15px 10px 15px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    margin: 0 8px 8px 8px;
    border-radius: var(--radius-m);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

/* ========== TOP-LINKS (aus HTML verschoben) ========== */
.top-link {
    color: var(--color-text-muted);
    text-decoration: none;
    margin-left: 12px;
    font-size: 16px;
    line-height: 1;
    padding: 6px 0;
    display: inline-block;
}
.top-link + .top-link {
    margin-left: 16px; /* Sichtbarer Abstand zwischen den Links */
}
.top-link:hover { 
    text-decoration: underline; 
}

/* ========== SUCHFELD-CONTAINER (aus HTML verschoben) ========== */
.search-container {
    display: flex;
    align-items: center;
    position: relative;
}
.search-clear {
    margin-right: 8px;
    width: 20px;
    height: 20px;
    background: var(--color-text-light);
    color: var(--color-text-inverse);
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    opacity: 0.7;
    line-height: 1;
    text-align: center;
}
.search-clear:hover {
    background: var(--color-text-muted);
    opacity: 1;
}
.search-help {
    margin-left: 8px;
    width: 20px;
    height: 20px;
    background: var(--color-text-muted);
    color: var(--color-text-inverse);
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    cursor: help;
    user-select: none;
    line-height: 1;
    text-align: center;
}
.search-help:hover {
    background: var(--color-text-primary);
}

/* ========== OVERLAY (aus HTML verschoben) ========== */
.overlay.hidden { 
    display: none; 
}
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}
.overlay-dialog {
    background: #fff;
    border-radius: var(--radius-l);
    width: min(900px, 100%);
    max-height: 85vh;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #eee;
    background: #fafafa;
}
.overlay-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}
.overlay-close {
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted);
}
.overlay-content {
    padding: 18px;
    overflow: auto;
    font-size: 16px; /* Basis-Schriftgröße für alle Overlay-Inhalte */
    font-family: 'Calibri', 'Arial', sans-serif; /* Einheitliche Schriftart */
}
/* Schönere Standard-Typo im Overlay-Inhalt */
.overlay-content h1, 
.overlay-content h2, 
.overlay-content h3 {
    margin-top: 0;
    color: var(--color-text-darkest);
}
.overlay-content p, 
.overlay-content li, 
.overlay-content address {
    color: var(--color-text-secondary);
    line-height: 1.6;
    font-size: 16px;
}

.overlay-content div {
    font-size: 16px; /* Auch für die <div> Container mit Inline-Styles */
}

/* Overlay-Seiten Container (Impressum, Datenschutz, Bestellvorgang, etc.) */
.overlay-page-container {
    font-family: 'Calibri', 'Arial', sans-serif;
    line-height: 1.6;
    max-width: 900px;
    margin: auto;
    color: #333;
    font-size: 16px;
}

.overlay-page-container h1 {
    margin-top: 0;
    font-size: 24px;
    color: #222;
}

.overlay-page-container h2 {
    margin-top: 30px;
    font-size: 18px;
    color: #444;
}

.overlay-page-container h3 {
    margin-top: 20px;
    font-size: 16px;
    color: #444;
}

.overlay-page-container address {
    font-style: normal;
    margin-bottom: 20px;
}

.overlay-page-container .footer-note {
    margin-top: 30px;
    font-size: 14px;
    color: #666;
}

/* ========== SHARE OVERLAY ========== */
.share-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.share-dialog {
    background: white;
    border-radius: var(--radius-l);
    max-width: 600px;
    width: 100%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { 
        transform: translateY(20px);
        opacity: 0;
    }
    to { 
        transform: translateY(0);
        opacity: 1;
    }
}

.share-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--color-border-light);
}

.share-header h3 {
    margin: 0;
    font-size: 20px;
    color: var(--color-text-primary);
}

.share-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.share-close:hover {
    color: var(--color-text-primary);
}

.share-content {
    padding: 20px;
}

.share-content p {
    margin: 0 0 15px 0;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.share-url-container {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.share-url-input {
    flex: 1;
    padding: 12px;
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-s);
    font-size: 14px;
    font-family: 'Courier New', monospace;
    color: var(--color-text-primary);
    background: #f9f9f9;
}

.share-url-input:focus {
    outline: none;
    border-color: var(--color-primary-bright);
    background: white;
}

.share-copy-button {
    padding: 12px 20px;
    background: var(--color-primary-bright);
    color: white;
    border: none;
    border-radius: var(--radius-s);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.share-copy-button:hover {
    background: var(--color-primary-dark);
}

.share-copy-button:active {
    transform: scale(0.98);
}

.menu-container { width: 100%; }

.menu-top {
    width: 100%;
    text-align: center;
    padding: 10px;
    padding-top: 0;
    font-weight: bold;
}

.menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-left,
.menu-center,
.menu-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-row input {
    border: 2px;
    border-radius: var(--radius-s);
    background: lightgray;
    padding: 8px;
    text-align: center;
    width: 50%;
    min-width: 220px;
}

#logo { width: 30%; }

/* ========== SIDEBAR / KATEGORIE-FILTER ========== */
/* Linke Sidebar mit Kategorien und Unterkategorien */
#filter-menu {
    position: relative;                             /* Wichtig für sticky Footer */
    overflow-y: auto;                               /* Scrollbar bei vielen Kategorien */
    display: flex;
    flex-direction: column;

    background: white;
    padding-left: 20px;
    width: 220px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    border-right: 1px solid #ddd;
    border-radius: var(--radius-m);
    margin-left: 8px;
    margin-top: 15px;
}

/* Filter-Menü auf Mobile ausblenden (über Hamburger-Menü steuerbar) */
#filter-menu.hidden { display: none; }

/* Container für den Sticky-Button */
.sidebar-footer {
    position: sticky;
    bottom: 0;
    background: white;
    padding: 10px 0;
    box-shadow: 0 -4px 6px rgba(0,0,0,0.05);
    z-index: 1;
}

/* Der Button selbst */
.scroll-top-button {
    position: fixed;
    bottom: 20px;
    left: 55%;
    transform: translateX(-50%);
    background: var(--color-primary-bright);
    color: var(--color-text-inverse);
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius-m);
    cursor: pointer;
    font-size: 16px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.scroll-top-button:hover { 
    opacity: 1 !important;
    background: var(--color-primary-dark);
}

.scroll-top-button.visible {
    opacity: 0.5;
    visibility: visible;
}

/* ========== TOAST NOTIFICATIONS ========== */
/* Elegante Benachrichtigungen die automatisch verschwinden */
/* Z-INDEX HIERARCHIE: Toast (99999) > Overlays & Modals (2000) > Menu (1000) > Content (1-100) */
.toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--color-primary-bright);
    color: var(--color-text-inverse);
    padding: 12px 20px;
    border-radius: var(--radius-m);
    font-weight: 500;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 99999;                /* Höchste Priorität - über allen Overlays und Modals */
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
    max-width: 300px;
    word-wrap: break-word;
}

.toast-notification.show {
    transform: translateX(0);
    opacity: 1;
}

.toast-notification.hide {
    transform: translateX(100%);
    opacity: 0;
}

/* ========== PRODUKTGRID (Hauptansicht) ========== */
/* Grid-Layout für Produktkarten in der Übersicht */
#product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 350px);  /* Responsive: automatische Spaltenanzahl */
    gap: 15px;
    padding: 15px;
    flex: 1;
    justify-content: center;
}

/* Produktgrid in Detailansicht: kein Grid, sondern Block für einzelnes Produkt */
#product-grid.detail-view {
    display: block;
    padding: 0;
}

/* ========== PRODUKTKARTE (Einzelne Produkte im Grid) ========== */
.product-card {
    position: relative;
    width: 100%;
    padding-top: 175%; /* Für quadratische Karten - Aspect Ratio Trick */
    overflow: hidden;
    background: white;
    border-radius: var(--radius-m);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    text-align: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease;  /* Hover-Animation */
}

.product-card > .card-inner {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 15px;
}

.product-card:hover { box-shadow: 0px 0px 20px rgba(55, 55, 55, 0.75); }

.product-card img {
    display: block;
    margin: 0 auto 10px;
    width: 80%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1;
    border-radius: var(--radius-m);
}

.product-card h3 {
    font-size: 16px;
    color: var(--color-text-secondary);
    margin: 10px 0 5px 0;
}

.product-card p {
    color: var(--color-text-muted);
    font-size: 14px;
    margin: 0 0 10px 0;
}

.product-card button {
    background: var(--color-primary-dark);
    color: var(--color-text-inverse);
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: var(--radius-s);
    font-size: 14px;
    transition: background 0.2s ease;
}

.product-card button:hover {
    background: var(--color-primary-bright);
    color: var(--color-text-inverse);
}

/* Detail-Anfragen Button (Produktdetail) */
#detail-anfragen {
    background: var(--color-primary-bright);
    color: var(--color-text-inverse);
    border: none;
    padding: 12px 24px;
    cursor: pointer;
    border-radius: var(--radius-s);
    font-size: 16px;
    font-weight: 500;
    transition: background 0.2s ease;
    margin: 10px 0;
}

#detail-anfragen:hover {
    background: var(--color-primary-dark);
    color: var(--color-text-inverse);
}

.product-card .masse {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
    padding-left: 45px;   /* Platz für Label */
    text-indent: -45px;   /* erste Zeile zurückziehen */
}

/* ========== PRODUKTKARTEN: SPEZIELLE ZUSTÄNDE ========== */
/* Restposten-Darstellung: violetter Rahmen und Warnung-Badge */
.product-card.restposten {
    border: 2px solid var(--color-border-accent);
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.2);
    border-radius: var(--radius-m);
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-card.restposten:hover {
                             /* Leichte Vergrößerung bei Hover */
    box-shadow: 0px 0px 20px rgba(55, 55, 55, 0.75);
}
.product-card.restposten::before {
    content: "Restposten";                       /* Badge oben rechts */
    position: absolute;
    top: 10px; right: 10px;
    background-color: var(--color-primary-bright);
    color: white;
    padding: 4px 8px;
    border-radius: var(--radius-s);
    font-size: 14pt;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    z-index: 10;
}

/* Ausverkauft-Darstellung: grauer Badge und reduzierte Opazität */
.product-card.ausverkauft {
    opacity: 0.6;                                   /* Karte ausgeblasst */
    position: relative;
}
.product-card.ausverkauft::before {
    content: "Ausverkauft";                         /* Grauer Badge oben rechts */
    position: absolute;
    top: 10px; right: 10px;
    background-color: gray;
    color: white;
    padding: 4px 8px;
    border-radius: var(--radius-s);
    font-weight: bold;
    z-index: 10;
}

.category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 5px;
}

.badge {
    font-size: 10px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-s);
    padding: 2px 6px;
    color: var(--color-text-muted);
    background: #f9f9f9;
}

.attributes {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 8px 0;
}
.attributes .left { text-align: left; flex: 1; }
.attributes .right {
    text-align: right;
    white-space: nowrap;
    font-size: 12px;
    color: var(--color-text-accent);
    font-weight: bold;
}

.price-table {
    font-size: 13px;
    width: 70%;
    margin-bottom: 10px;
}
.price-table td { padding: 2px 5px; text-align: right; }
.price-table .title { text-align: left; font-weight: bold; padding: 0; }

.verfuegbarkeit {
    font-size: 12px;
    font-style: italic;
    color: #888;
    margin-top: 5px;
}

/* ========== PRODUKT-DETAILSEITE (global) ========== */
.product-detail {
    background: white;
    padding: 30px;
    border-radius: var(--radius-l);
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
    max-width: 900px;       /* schmalerer, lesbarer Satzspiegel */
    margin: 15px auto;
    text-align: left;       /* Fließtext linksbündig statt zentriert */
    line-height: 1.6;
    position: relative;     /* Referenzpunkt für absolut positionierte Elemente */

    animation: zoomIn 0.2s ease-out;
    opacity: 0;
    animation-fill-mode: forwards; /* lässt Endzustand erhalten */
}

.product-detail img {
    width: 80%;
    max-width: 600px;
    margin-bottom: 20px;
}

.product-detail .title { margin: 10px 0 8px; }
.product-detail .title .left {
    text-align: left;
    font-size: 26px;
    font-weight: bold;
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-wrap: break-word;
    hyphens: auto;
}

.product-detail .title .right {
    text-align: right;
    font-size: 12px;
    color: #666;
}

/* Preis-Badge (greift, wenn die Zeile class="detail-price" hat) */
.product-detail .detail-price {
    margin: 12px 0 18px;
    padding: 10px 14px;
    background: #f7f1f9;
    border: 1px solid #eadcf0;
    border-radius: var(--radius-s);
    font-size: 18px;
    font-weight: 700;
    color: #3a2b45;
    display: inline-block;
}

/* Allgemeine Abstände in der Detailansicht */
.product-detail p { margin: 10px 0 14px; }

/* Staffelpreise in Detailansicht kompakter, mit Trennern */
.product-detail .price-table {
    width: 100%;
    max-width: 520px;
    margin: 6px 0 16px;
    border-collapse: collapse;
}
.product-detail .price-table td {
    padding: 6px 4px;
    text-align: left;
}
.product-detail .price-table .title {
    text-align: left;
    padding: 0 0 4px;
}
.product-detail .price-table tr + tr td {
    border-top: 1px dashed #e6e6e6;
}

/* Optionale Spezifikations-Tabelle (falls per JS gerendert) */
.product-detail table.specs {
    width: 100%;
    max-width: 620px;
    border-collapse: collapse;
    margin: 12px 0 6px;
}
.product-detail table.specs td {
    padding: 6px 8px;
    vertical-align: top;
}
.product-detail table.specs td:first-child {
    width: 190px;
    color: #555;
}
.product-detail table.specs tr + tr td {
    border-top: 1px solid #f0f0f0;
}

/* ========== GALERIE (Produktdetail) ========== */
/* Container für Galerie in der Produktdetailansicht */
.gallery {
    margin-top: 8px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Hauptbild mit Navigation (Pfeile links/rechts vom Bild) */
.gallery-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
    position: relative;                             /* Wichtig: Referenzpunkt für absolute Positionierung des Swipe-Hints */
}

/* Hauptbild in der Galerie */
.gallery-main img {
    width: 600px;
    height: 600px;
    object-fit: contain;                            /* Bild proportional einpassen */
    transition: transform 0.2s ease;               /* Sanfte Hover-Animation */
}

/* Desktop: Hover-Effekt für klickbares Hauptbild */
@media (min-width: 801px) and (hover: hover) {
    .gallery-main img:hover {
        transform: scale(1.01);                     /* Leichte Vergrößerung bei Hover */
        cursor: pointer;                            /* Zeiger-Cursor für Klickbarkeit */
    }
}

/* ========== GALERIE-NAVIGATION (Desktop-Pfeile) ========== */
/* Pfeile links/rechts vom Hauptbild (nur auf Desktop sichtbar) */
.gallery-nav {
    font-size: 24px;
    font-weight: bold;
    background: var(--color-primary-bright);
    color: var(--color-text-inverse);
    padding: 12px 15px;
    cursor: pointer;
    border-radius: var(--radius-m);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
    border-style: none;
    opacity: 0.1;
    height: 30%;
    width: 50px;
}
.gallery-nav:hover {
    opacity: 0.6;
}

/* ========== GALERIE-THUMBNAILS ========== */
/* Kleine Vorschaubilder unter dem Hauptbild (horizontal scrollbar) */
.gallery-thumbnails {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 10px 20px;
    max-width: 100%;
    overflow-x: auto;                               /* Horizontal scrollbar bei vielen Bildern */
    scroll-behavior: smooth;
    position: relative;
}

/* Einzelne Thumbnail-Bilder */
.gallery-thumbnails img {
    width: 60px;
    height: 60px;
    flex-shrink: 0;                                 /* Bilder nicht zusammenquetschen */
    object-fit: cover;
    border-radius: var(--radius-s);
    cursor: pointer;
    opacity: 0.6;                                   /* Inaktive Thumbnails gedimmt */
    transition: 0.2s ease;
}

/* Aktives/gehovertes Thumbnail hervorheben */
.gallery-thumbnails img.active,
.gallery-thumbnails img:hover {
    opacity: 1;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

/* ========== FADE-EFFEKT für Thumbnail-Scrollbereich ========== */
/* Verlauf-Overlays links und rechts für sanften Fade-Effekt */
.gallery-thumbnails::before,
.gallery-thumbnails::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 20px;
    pointer-events: none;                           /* Klicks durchlassen */
    z-index: 1;
}
.gallery-thumbnails::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
.gallery-thumbnails::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

/* Detail-Header mit Back und Share Button */
.detail-header {
    position: absolute;
    top: 30px;
    left: 30px;
    right: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    z-index: 10;
}

#back-to-grid,
#share-button {
    padding: 8px 12px;
    background: var(--color-primary-bright);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-s);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease;
}

#back-to-grid:hover,
#share-button:hover {
    background: var(--color-primary-dark);
}

/* ========== MERKLISTE-BUTTON (Floating) ========== */
/* Schwebender Button unten rechts für Merkliste/Anfragen */
#wishlist-button {
    position: fixed;
    bottom: 10px;
    right: 15px;
    background: var(--color-primary-bright);                            
    color: var(--color-text-inverse);
    padding: 10px;
    border-style: none;
    border-radius: var(--radius-m);
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
    width: 121px;
    opacity: 0.5;
}

#wishlist-button:hover { 
    background: var(--color-primary-dark);
    opacity: 1;
}

#wishlist-count {
    font-size: 12px;
}

/* ========== KONTAKT-BUTTON (Floating) ========== */
#contact-button {
    position: fixed;
    bottom: 10px;
    left: 270px;
    background: var(--color-primary-bright);                            
    color: var(--color-text-inverse);
    padding: 10px;
    border-radius: var(--radius-m);
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
    width: 90px;
    border-style: none;
    opacity: 0.5;
}

#contact-button:hover { 
    background: var(--color-primary-dark);
    opacity: 1;
}

/* ========== E-MAIL-PATCH (auf Produktdetailseite) ========== */
#email-patch {
    position: absolute;
    top: 464px;
    right: -93px;
    width: 280px;
    height: auto;
    cursor: pointer;
    z-index: 50;
    transition: transform 0.3s ease;
    transform: rotate(30deg);
    display: block;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: auto;
}

#email-patch:hover {
    transform: scale(1.08) rotate(30deg);
}

#email-patch:active {
    transform: scale(1.02) rotate(30deg);
}

/* Responsive Anpassung für Mobile */
@media (max-width: 800px) {
    #email-patch {
        bottom: 20px;
        right: 20px;
        width: 85px;
        height: 85px;
        font-size: 11px;
        padding: 10px;
    }
}

#import-wishlist-btn {
  margin-bottom: 10px;
}

/* ========== MERKLISTE ========== */
#anfrage-formular {
    position: fixed;              /* immer an derselben Stelle im Viewport */
    top: 50%;                     /* vertikal in die Mitte */
    left: 50%;                    /* horizontal in die Mitte */
    transform: translate(-50%, -50%);  /* genaue Zentrierung */
    z-index: 2000;                /* über allen anderen Elementen */
    
    max-width: 780px;
    width: 90%;                   /* mobil flexibler */
    max-height: 85vh;             /* Maximale Höhe für Scrollbarkeit */
    background: white;
    padding: 40px;
    border-radius: var(--radius-l);
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.3);
    text-align: left;
    display: flex;
    flex-direction: column;
    overflow: hidden;             /* Verhindert Überlauf des Containers */
}

#anfrage-formular.hidden { display: none; }

#anfrage-formular h2 {
    margin-top: 0px;
    margin-bottom: 20px;
}

/* ========== MERKLISTE ITEMS CONTAINER ========== */
#merkliste-items {
    flex: 1;                      /* Nimmt verfügbaren Platz ein */
    overflow-y: auto;             /* Scrollbar bei vielen Items */
    margin: 10px 0;
    padding: 10px 0;
}

/* Leere Merkliste Nachricht */
.empty-wishlist {
    text-align: center;
    color: var(--color-text-muted);
    padding: 40px 20px;
    font-style: italic;
}

/* ========== MERKLISTE NOTIZEN ========== */
/* ========== MERKLISTE ITEM (EINE ZEILE) ========== */
.merkliste-item {
    display: flex;
    flex-direction: row;          /* Nebeneinander: Thumbnail + Content */
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--color-border-light);
    background: #fafafa;
    border-radius: var(--radius-s);
    margin-bottom: 10px;
    transition: background 0.2s ease;
}

.merkliste-item:hover {
    background: #f0f0f0;
}

/* Durchgestrichener Stil für Artikel mit Menge 0 */
.merkliste-item.zero-quantity .item-name {
    text-decoration: line-through;
    color: #999;
}

.merkliste-item.zero-quantity .item-artikelnr {
    text-decoration: line-through;
    opacity: 0.6;
}

.merkliste-item.zero-quantity .item-thumbnail {
    opacity: 0.5;
}

/* Thumbnail links */
.item-thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-s);
    flex-shrink: 0;
    border: 1px solid var(--color-border-light);
    cursor: pointer; /* Klick zum Öffnen der Detailansicht */
}

/* Content rechts (Header + Footer) */
.item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;                 /* Ermöglicht text-overflow */
}

/* Obere Zeile: Art-Nr + Name */
.item-header {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.item-artikelnr {
    font-size: 12px;
    font-weight: bold;
    color: var(--color-text-accent);
    background: white;
    padding: 4px 8px;
    border-radius: var(--radius-s);
    white-space: nowrap;
}

.item-name {
    flex: 1;
    font-size: 14px;
    color: var(--color-text-primary);
    line-height: 1.4;
    min-width: 120px;
}

/* Untere Zeile: Quantity Controls + Löschen */
.item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Notizen-Feld pro Artikel */
.item-notes-container {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.item-notes {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-s);
    font-family: 'Calibri', 'Arial', sans-serif;
    font-size: 12px;
    font-style: italic;
    color: var(--color-text-secondary);
    background: white;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.item-notes::placeholder {
    color: #999;
    font-style: italic;
}

.item-notes:focus {
    outline: none;
    border-color: var(--color-primary-bright);
    box-shadow: 0 0 0 2px rgba(186, 41, 171, 0.1);
    font-style: normal;
}

.notes-confirm-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: none;
    background: #28a745;
    color: white;
    border-radius: var(--radius-s);
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
    user-select: none;
    line-height: 1;
    padding: 0;
}

.notes-confirm-btn:hover {
    background: #218838;
    transform: scale(1.05);
}

.notes-confirm-btn:active {
    transform: scale(0.95);
}

.notes-confirm-btn.hidden {
    display: none;
}

/* ========== QUANTITY CONTROLS ========== */
.quantity-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    padding: 5px;
    border-radius: var(--radius-s);
    border: 1px solid var(--color-border-light);
}

.quantity-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--color-primary-bright);
    color: var(--color-text-inverse);
    border-radius: var(--radius-s);
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    user-select: none;
    line-height: 1;
}

.quantity-btn:hover {
    background: var(--color-primary-dark);
}

.quantity-btn:active {
    transform: scale(0.95);
}

.quantity-btn:disabled {
    background: var(--color-text-light);
    cursor: not-allowed;
    opacity: 0.5;
}

.quantity-display {
    min-width: 40px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: var(--color-text-primary);
}

.quantity-label {
    flex: 1;
    text-align: left;
    font-size: 14px;
    color: var(--color-text-secondary);
    padding-left: 10px;
}

.quantity-price {
    text-align: right;
    font-size: 14px;
    font-weight: bold;
    color: var(--color-text-primary);
    padding-right: 10px;
    white-space: nowrap;
}

/* ========== LÖSCHEN-BUTTON ========== */
.remove-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: #dc3545;
    color: white;
    border-radius: var(--radius-s);
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-btn:hover {
    background: #c82333;
    transform: scale(1.05);
}

.remove-btn:active {
    transform: scale(0.95);
}

/* Gesamtsumme am Ende der Merkliste */
.wishlist-total {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    align-items: center;
    border-top: 2px solid var(--color-border-light);
    padding: 12px 6px;
    margin-top: 10px;
    font-size: 16px;
    font-weight: 700;
}
.wishlist-total .wishlist-total-value {
    min-width: 120px;
    text-align: right;
}

#merkliste-top-menu {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

#merkliste-schliessen,
#merkliste-loeschen,
#merkliste-kontakt {
    background: #ba29ab;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: var(--radius-s);
    font-size: 16px;
    flex: 1;
    min-width: 120px;
}

#merkliste-schliessen:hover,
#merkliste-loeschen:hover,
#merkliste-kontakt:hover {
    background: #65075b;
}


/* ========== KATEGORIE-NAVIGATION (Sidebar) ========== */
/* Container für einzelne Kategorien */
.category-container { margin-bottom: 10px; }

/* Hauptkategorie-Buttons (klappbar) */
.toggle-button {
    display: block;
    box-sizing: border-box;
    outline-offset: 2px;                            /* Fokus-Ring nicht am Rand kleben lassen */
    width: calc(100% - 10px);                       /* Sorgt für "Luft" rechts */
    margin-right: 5px;                              /* Kleiner Abstand zur Sidebar-Kante */
    text-align: left;
    background: none;
    border: none;
    color: #333;
    font-size: 16px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius-s);                             /* Runde Ecken für Markierung */
}


.subcategory-list {
  padding-left: 15px;
  padding-right: 8px;   /* NEU: etwas Luft rechts */
  margin-top: 4px;
}

.subcategory-button {
  display: block;
  width: calc(100% - 10px);  /* NEU: nicht bis ganz rechts */
  margin-right: 5px;         /* NEU */
  background: none;
  border: none;
  color: #666;
  text-align: left;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 14px;
  border-radius: var(--radius-s);        /* NEU: gleiche Optik wie Hauptkategorien */
  box-sizing: border-box;    /* Sicherheit bei Padding */
  outline-offset: 2px;       /* Fokus-Ring nicht am Rand kleben lassen */
}

.subcategory-button:hover { color: #9622c4; }

.arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: #333;
    font-weight: bold;
    line-height: 1;
    text-align: center;
}

/* ========== AKTIVE KATEGORIE-MARKIERUNG ========== */
/* Hervorhebung der aktuell ausgewählten Kategorie/Unterkategorie */
.toggle-button.active,
.subcategory-button.active,
.toggle-button[aria-current="true"],
.subcategory-button[aria-current="true"] {
  background: #ba29ab21;                              /* Hellblauer Hintergrund */
  border-radius: var(--radius-s);
  color: #333;
  box-shadow: inset 0 0 0 1px var(--color-primary-bright);             /* Leichter blauer Rahmen */
}

/* Aktive Kategorie behält Farbe beim Hover */
.toggle-button.active:hover,
.subcategory-button.active:hover {
  color: inherit;                                   /* Behält die aktive Farbe bei */
}

/* ========== KEYBOARD-NAVIGATION ========== */
/* Fokus-Ring für Tastatur-Navigation */
.toggle-button:focus-visible,
.subcategory-button:focus-visible {
  outline: 2px solid #6aa7ff;
  outline-offset: 2px;
}


#hamburger {
    display: none; /* Standard: Button ausblenden */
}

/* ========== ANIMATIONEN ========== */
/* Sanfte Zoom-Animation für Produktdetail-Ansicht */
@keyframes zoomIn {
    from { transform: scale(0.95); opacity: 0; }    /* Startet leicht verkleinert und transparent */
    to   { transform: scale(1);     opacity: 1; }   /* Endet in normaler Größe und vollständig sichtbar */
}

/* ========== MEDIA QUERIES (Mobile) ========== */
@media (max-width: 1100px){
  /* Hauptbild auf kleineren Screens flexibler */
  .gallery-main img{
    width: 350px;
    height: 350px;
    object-fit: contain;
  }
}

@media (max-width: 800px) {
    .layout { flex-direction: column; }

    #filter-menu {
        display: none;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }
    #filter-menu.active { display: block; }

    #menu { 
        position: sticky; 
        top: 0; 
        z-index: 1000;
        padding: 10px 15px;
    }

    /* Mobile: Menu vertikal stapeln */
    .menu-row {
        flex-direction: column;
        gap: 10px;
    }

    .menu-top {
        /* Logo kleiner */
        #logo {
            width: 50%;
        }
    }

    .menu-left,
    .menu-center,
    .menu-right {
        width: 100%;
        justify-content: flex-start;
    }

    .menu-center {
        order: 2; /* Suchfeld nach unten */
    }

    .menu-left {
        gap: 0px;
        justify-content: flex-start;
        flex-wrap: wrap;
        order: 1; /* Hamburger und Links oben */
    }

    /* Mobile Top-Links (aus HTML verschoben) */
    .top-link { 
        margin-left: 8px; 
    }
    .top-link + .top-link { 
        margin-left: 12px; 
    }

    #hamburger {
        display: block;
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        margin-right: 15px;
    }

    /* Suchfeld auf volle Breite */
    .menu-row input {
        width: 100%;
        min-width: unset;
        margin: 0;
    }

    .search-container {
        width: 100%;
    }

    #logo { width: 60%; }

    #product-grid { padding: 8px; }

    .product-detail {
        background: white;
        padding: 20px;
        padding-top: 50px;
        border-radius: var(--radius-l);
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
        max-width: 600px;
        margin: 40px auto;
        text-align: left;        /* auch mobil linksbündig */
        opacity: 1;
        animation: zoomIn 0.3s ease;
        position: relative;      /* Referenzpunkt für absolut positionierte Buttons */
    }

    .product-detail img {
        margin-bottom: 20px;
    }

    .scroll-top-button { display: none; }
    
    #contact-button { 
        left: 15px; 
    }
    
    /* ========== MOBILE GALERIE-ANPASSUNGEN ========== */
    /* Galerie-Navigation auf Mobile ausblenden (Touch-Gesten werden stattdessen verwendet) */
    .gallery-nav { display: none; }
    
    /* ========== SWIPE-HINWEIS (Mobile Galerie-Navigation) ========== */
    /* Zeigt "← → Wischen" Text halbtransparent über dem Galeriebild */
    /* Verschwindet automatisch nach dem ersten Swipe (siehe script.js) */
    /* Positionierung relativ zum Bild selbst für alle Bildschirmgrößen */
    .swipe-hint {
        position: absolute;
        bottom: -20px;                   /* Abstand vom unteren Bildrand */
        left: 50%;                      /* Horizontal zentriert */
        transform: translateX(-50%);    /* Exakte Zentrierung durch Verschiebung um eigene Breite */
        background: rgba(0,0,0,0.6);
        color: white;
        padding: 6px 12px;
        border-radius: var(--radius-l);
        font-size: 12px;
        opacity: 0.8;
        z-index: 10;
        animation: swipeHint 2s ease-in-out infinite;
        user-select: none;              /* Text nicht selektierbar */
        pointer-events: none;           /* Klicks durchlassen */
        white-space: nowrap;            /* Verhindert Zeilenumbruch bei kleinen Screens */
    }

    /* Animation für Swipe-Hinweis: sanftes Links-Rechts-Bewegen mit Zentrierung */
    @keyframes swipeHint {
        0%, 100% { transform: translateX(-50%); opacity: 0.8; }           /* Zentriert + normal */
        50% { transform: translateX(calc(-50% + 8px)); opacity: 1; }      /* Zentriert + 8px nach rechts */
    }
}

/* ========== TESTSEITE BADGE (global) ========== */
/* Sichtbarer, schräger Hinweis für Test-Umgebungen; wird per PHP nur in /test ausgegeben */
#test-badge {
    position: fixed;
    top: 14px;
    left: -72px;
    width: 300px;
    padding: 10px 0;
    text-align: center;
    transform: rotate(-35deg);
    background: rgba(220, 53, 69, 0.92); /* Rot, leicht transparent */
    color: #fff;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    z-index: 100000; /* über allen Overlays/Toasts */
    pointer-events: none; /* nicht anklickbar, stört nicht */
}

/* ========== DESKTOP: SWIPE-HINWEIS AUSBLENDEN ========== */
/* Swipe-Hinweis nur auf Desktop ausblenden (da dort Pfeile verwendet werden) */
@media (min-width: 801px) {
    .swipe-hint { display: none; }
}

/* ========== KONTAKT-OVERLAY SPEZIFISCHE STYLES ========== */
/* Trennlinie im Kontakt-Overlay */
.contact-divider {
    margin: 25px 0;
    border: none;
    border-top: 1px solid var(--color-border-lighter);
}

/* ========== BUTTON COMPONENTS ========== */
/* Gemeinsame Button-Basis für Contact & Order Buttons */
.btn-base {
    display: inline-block;
    padding: 12px 25px;
    color: var(--color-text-inverse);
    text-decoration: none;
    border: none;
    border-radius: var(--radius-s);
    font-weight: bold;
    font-family: inherit;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

/* Button-Container (für Contact & Order Buttons) */
.contact-buttons,
.order-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin: 30px 0;
}

/* Contact & Order Buttons */
.contact-btn,
.order-btn {
    display: inline-block;
    padding: 12px 25px;
    color: var(--color-text-inverse);
    text-decoration: none;
    border: none;
    border-radius: var(--radius-s);
    font-weight: bold;
    font-size: 16px;
    font-family: inherit;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.order-btn {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* E-Mail Buttons (Contact & Order) */
.contact-btn-email,
.order-btn-email {
    background: var(--color-primary-bright);
}

.contact-btn-email:hover,
.order-btn-email:hover {
    background: var(--color-primary-dark);
}

/* WhatsApp Buttons (Contact & Order) */
.contact-btn-whatsapp,
.order-btn-whatsapp {
    background: var(--color-whatsapp);
}

.contact-btn-whatsapp:hover,
.order-btn-whatsapp:hover {
    background: var(--color-whatsapp-hover);
}

/* Hinweistext unter den Buttons */
.contact-note {
    text-align: center;
    margin-top: 20px;
    color: var(--color-text-muted);
    font-size: 14px;
    font-style: italic;
}

/* ========== KONTAKTFORMULAR ========== */
/* Formular-Gruppen */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: var(--color-text-primary);
    font-weight: bold;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-s);
    font-size: 16px;
    font-family: inherit;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-border-accent);
    box-shadow: 0 0 0 2px rgba(186, 41, 171, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* Formular Submit-Button */
.contact-submit-btn {
    background: var(--color-primary-bright);
    color: var(--color-text-inverse);
    border: none;
    padding: 12px 30px;
    border-radius: var(--radius-s);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s ease;
    width: 100%;
    margin-bottom: 15px;
}

.contact-submit-btn:hover {
    background: var(--color-primary-dark);
}

.contact-submit-btn:disabled {
    background: var(--color-text-muted);
    cursor: not-allowed;
}

/* Formular Status-Nachrichten */
.form-status {
    padding: 10px;
    border-radius: var(--radius-s);
    margin-top: 10px;
    text-align: center;
}

.form-status.hidden {
    display: none;
}

.form-status.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-status.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Mobile Anpassung für Produkttitel */
@media (max-width: 800px) {
    .product-detail .title .left {
        white-space: normal; /* Mehrzeiligen Text erlauben */
        overflow: visible; /* Überlauf sichtbar machen */
        text-overflow: unset; /* Ellipsis entfernen */
        font-size: 22px; /* Etwas kleiner auf mobil */
        line-height: 1.2; /* Kompakterer Zeilenabstand */
        word-wrap: break-word; /* Lange Wörter umbrechen */
        hyphens: auto; /* Silbentrennung aktivieren */
    }
}

/* Mobile Anpassung für Kontakt-Buttons */
@media (max-width: 800px) {
    .contact-buttons {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .contact-btn {
        width: 200px;
        text-align: center;
    }
    
    .order-buttons {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .order-btn {
        width: 200px;
        text-align: center;
    }
    
    /* Detail-Header auf Mobile anpassen */
    .detail-header {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        margin-bottom: 0;
        padding: 0;
        z-index: 100;
    }
    
    #back-to-grid,
    #share-button {
        font-size: 13px;
        padding: 8px 10px;
    }
    
    /* Share Dialog auf Mobile */
    .share-dialog {
        margin: 0 10px;
        max-width: calc(100vw - 20px);
    }
    
    .share-url-container {
        flex-direction: column;
        gap: 10px;
    }
    
    .share-url-input {
        font-size: 12px;
    }
    
    .share-copy-button {
        width: 100%;
    }
}