/* ========================================================================== */
/* LAYERS                                                                     */
/* ========================================================================== */
@layer reset, tokens, base, components, utilities, overrides;

/* ========================================================================== */
/* RESET                                                                      */
/* ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html:focus-within { scroll-behavior: smooth; }
  html, body { height: 100%; }
  body { line-height: 1.6; -webkit-font-smoothing: antialiased; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; }
  a { color: inherit; text-decoration: none; }
}

/* ========================================================================== */
/* TOKENS                                                                     */
/* ========================================================================== */
@layer tokens {
  :root{
    /* Farben */
    --clr-primary: #cba84D;
    --clr-primary-600: #b1913e;
    --clr-accent: #b93737;
    --clr-secondary: #5a3728;

    --clr-bg: #f8f8f8;
    --clr-surface: #fffefb;
    --clr-surface-2: #fefbf4;
    --clr-surface-3: #eee0c9;
    --clr-border: #f3ead0;
    --clr-border-2: #e5dac2;
    --clr-text: #2d2d2d;
    --clr-text-weak: #888;

    /* Status */
    --clr-ok: #67a95b;
    --clr-bad: #b93737;

    /* Typo */
    --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

    /* Radius */
    --radius-8: 8px;
    --radius-10: 10px;
    --radius-12: 12px;
    --radius-14: 14px;
    --radius-16: 16px;
    --radius-18: 18px;
    --radius-20: 20px;
    --radius-22: 22px;
    --radius-24: 24px;
    --radius-28: 28px;

    /* Abstände */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

    /* Schatten */
    --shadow-sm: 0 4px 12px rgba(0,0,0,0.05);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.07);
    --shadow-lg: 0 18px 56px rgba(90,55,40,0.15);

    /* Breakpoints */
    --bp-sm: 600px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --content-max: 1200px;

    /* Transitions */
    --t-fast: 0.18s ease;
    --t-base: 0.3s ease;

    --app-header-h: 64px;  /* Höhe deines goldenen Headers */
    --sticky-gap: 8px;     /* kleiner Abstand unter dem Header */
    
    @media (max-width: 640px) {
    :root { --app-header-h: 56px; }
    }

  }
}

/* ========================================================================== */
/* BASE                                                                       */
/* ========================================================================== */
@layer base {
  body {
    font-family: var(--font-body);
    background: var(--clr-bg);
    color: var(--clr-text);
  }
  h1, h2, h3 { margin-bottom: 0.5em; }

  .container {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 2em;
  }

  /* Buttons – Basisklasse für alle Varianten */
  button, input[type="submit"] {
    background: var(--clr-primary);
    border: 0;
    padding: 0.7em 1.2em;
    border-radius: var(--radius-12);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-base), transform 0.12s cubic-bezier(.34,1.56,.64,1);
  }
  button:hover, input[type="submit"]:hover { background: var(--clr-primary-600); }
  button:active, .submit-button:active { transform: scale(0.96); }

  /* Seitenumschaltung */
  .page { display: none; }
  .page.active { display: block; }
}

/* ========================================================================== */
/* COMPONENTS                                                                 */
/* ========================================================================== */
@layer components {
  /* -------------------- Login -------------------- */
  #loginPage {
    display: flex; justify-content: center; align-items: center;
    height: 100vh; background: #fff;
    opacity: 0; pointer-events: none; position: absolute; inset: 0;
    transition: opacity 0.6s ease;
  }
  #loginPage.visible { opacity: 1; pointer-events: auto; position: relative; }
  #loginPage.hidden { display: none; }

  #loginBox {
    background: #fdfdfd;
    padding: 3em;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: var(--radius-16);
    width: 100%; max-width: 400px; text-align: center;
  }
  #loginBox input[type="password"],
  #loginBox input.login-input {
    padding: 0.7em; width: 100%; margin-bottom: 1em;
    border-radius: var(--radius-8); border: 2px solid #ccc;
    transition: border-color var(--t-base);
    background: #fff;
  }
  #loginBox input.login-input.error { border-color: var(--clr-bad); background: #fff0f0; }
  .login-label { margin: 0.5em 0 1.2em; }
  .login-error { color: var(--clr-bad); font-weight: 500; display: none; margin-top: 2em; }
  /* Passwortfeld mit Auge-Icon */
  .password-wrapper {
    position: relative;
  }

  /* Etwas Platz im Input für das Icon schaffen */
  .password-wrapper .login-input {
    padding-right: 38px;
  }

  /* Auge-Icon rechts im Feld */
  .password-wrapper .password-eye {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    user-select: none;
    font-size: 1.2em;
  }

  /* App Sichtbarkeit (wie Login) */
  #app {
    opacity: 0; pointer-events: none; position: absolute; inset: 0; width: 100%;
    transition: opacity 0.6s ease;
  }
  #app.visible { opacity: 1; pointer-events: auto; position: relative; }

  /* -------------------- Navigation / Header -------------------- */
  .glass-header {
    position: sticky; top: 0; z-index: 1000;
    background: linear-gradient(90deg, #fff1c4 0%, #ffebc4 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
    padding: 0.7em 0; transition: all var(--t-base);
  }

  .nav-container {
    max-width: var(--content-max);
    margin: 0 auto;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 1.5em; position: relative; flex-wrap: nowrap;
  }

  .brand { font-weight: 700; color: var(--clr-secondary); font-size: 1.4em; margin-left: auto; }
  .brand-logo { height: 44px; max-width: 180px; object-fit: contain; display: block; margin-left: 12px; }

  .main-nav {
    display: flex; gap: 1.5em; list-style: none; margin: 0; padding: 0;
    justify-content: flex-start; flex: 1;
  }
  .main-nav li a {
    color: var(--clr-secondary); font-weight: 600; position: relative; padding: 0.3em 0;
    transition: color var(--t-base);
  }
  .main-nav li a::after {
    content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 2px;
    background: var(--clr-primary); transition: width var(--t-base);
  }
  .main-nav li a:hover::after, .main-nav li a.active::after { width: 100%; }

  /* Burger */
  .menu-toggle {
    display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    background: var(--clr-primary); border: none; border-radius: var(--radius-16);
    padding: 0.7em; cursor: pointer; transition: background var(--t-base); z-index: 1001;
  }
  .menu-toggle .bar { width: 22px; height: 3px; background: #fff; border-radius: 3px; transition: all var(--t-base); }
  .menu-toggle.open .bar:nth-child(1){ transform: rotate(45deg) translate(5px, 5px); }
  .menu-toggle.open .bar:nth-child(2){ opacity: 0; }
  .menu-toggle.open .bar:nth-child(3){ transform: rotate(-45deg) translate(5px, -5px); }

  /* Mobile Nav */
  @media (max-width: 768px){
    .menu-toggle { display: flex; }
    .nav-container { flex-wrap: wrap; }
    .brand { margin-left: auto; font-size: 1.3em; font-weight: 700; color: var(--clr-secondary); padding-top: 0.5em; }
    .main-nav {
      display: none; flex-direction: column; position: fixed; top: 72px; left: 0; width: 60vw; max-width: 360px;
      z-index: 999; background: rgba(255,255,255,0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      border-radius: 0 0 var(--radius-24) var(--radius-24); padding: 1.2em; box-shadow: 0 12px 32px rgba(0,0,0,0.1);
      animation: fadeInGlass var(--t-base);
    }
    .main-nav.open { display: flex; }
    @keyframes fadeInGlass { from{opacity:0; transform: translateY(-8px);} to{opacity:1; transform:none;} }
  }

                      /* ==========================
                        TEMP: Menü-"Bald verfügbar" für deaktivierte Seiten
                        Rückbau: kompletten Block entfernen
                        ========================== */

                      /* Basisstil für deaktivierte Links */
                      .main-nav a.is-disabled {
                        opacity: 0.7;
                        cursor: not-allowed;
                        pointer-events: none; /* blockt Klicks */
                        position: relative;   /* Anker für Badge-Positionierungen */
                        white-space: nowrap;
                      }

                      /* Basisstil für Badge (mobile Inline-Variante) */
                      .main-nav a.is-disabled .badge-soon {
                        display: inline-block;
                        margin-left: var(--space-2);
                        padding: 0.12rem 0.5rem;
                        font-size: 0.68rem;
                        line-height: 1;
                        font-weight: 700;
                        border-radius: 999px;
                        border: 1px solid var(--clr-primary);
                        color: var(--clr-primary);
                        background: rgba(203, 168, 77, 0.10); /* Primärfarbe mit 10% */
                        vertical-align: middle;
                      }

                      /* Hover-/Active-Unterstreichung deaktivieren */
                      .main-nav a.is-disabled:hover::after,
                      .main-nav a.is-disabled.active::after {
                        width: 0;
                      }

                      /* ==========================
                        Desktop-Variante: Badge als schräges Ribbon quer über den Button
                        ========================== */
                      @media (min-width: 769px){
                        .main-nav a.is-disabled {
                          overflow: hidden; /* versteckt überstehendes Ribbon */
                        }

                        .main-nav a.is-disabled .badge-soon {
                          position: absolute;
                          top: 50%;
                          left: 50%;
                          transform: translate(-50%, -50%) rotate(-20deg);
                          transform-origin: center;
                          margin: 0;
                          pointer-events: none;

                          /* Ribbon-Optik */
                          opacity: 0,9;
                          display: inline-block;
                          margin-left: var(--space-2);
                          padding: 0.12rem 0.5rem;
                          font-size: 0.68rem;
                          line-height: 1;
                          font-weight: 700;
                          border-radius: 999px;
                          border: 1px solid var(--clr-primary);
                          color: var(--clr-primary);
                          background: rgba(203, 168, 77, 0.10); /* Primärfarbe mit 10% */
                          vertical-align: middle;
                        }
                      }
                      /* ==========================
                        /TEMP Ende
                        ========================== */



  @media (max-width: 600px) {
    .brand-logo { height: 32px; max-width: 120px; margin-left: 0; }
  }

  /* -------------------- Kategorien / Produktlisten -------------------- */
  .category { margin-bottom: 1em; }
  .category h2 {
    cursor: pointer;
    background: linear-gradient(135deg, var(--clr-surface-2), #f3ead0);
    color: var(--clr-secondary);
    padding: 1.4em 1.2em;
    border-radius: var(--radius-24);
    font-size: 1.15em; font-weight: 700;
    box-shadow: 0 4px 8px rgba(203,168,77,0.15), inset 0 0 0 1px rgba(203,168,77,0.2);
    border: 1px solid rgba(203,168,77,0.4);
    position: relative; display: flex; align-items: center; justify-content: space-between;
    transition: all var(--t-base);
  }
  .category h2:hover {
    background: linear-gradient(135deg, #fff8d5, #f4e5b9);
    border-color: #d6ae67;
    box-shadow: 0 8px 18px rgba(90,55,40,0.12), inset 0 0 0 1px rgba(255,255,255,0.4);
    transform: translateY(-1px);
  }
  .category h2::after {
    content: "▾"; font-size: 1.4em; color: var(--clr-primary); transition: transform var(--t-base);
  }
  .category h2.open::after { transform: rotate(180deg); }

  /* Akkordeon-Listen */
  .productList { overflow: hidden; transition: height 0.4s ease, opacity 0.4s ease; opacity: 1; height: auto; padding: 0 1em; }
  .productList.expanding, .productList.collapsing { transition: none; }
  .productList.open { opacity: 1; }

  /* Produktkarte */
  .product {
    background: var(--clr-surface);
    border: 2px solid var(--clr-border);
    border-radius: var(--radius-24);
    padding: 2em;
    box-shadow: var(--shadow-md);
    margin-bottom: 2em;
    display: flex; flex-direction: column; gap: 1.2em;
  }
  .product-content { display: flex; gap: 1em; align-items: flex-start; }
  .product-details { flex: 1; }
  .product h3 { margin-top: 0; }

  .product img, .kassenbild {
    width: 100%; max-height: 200px; object-fit: cover;
    border-radius: var(--radius-16);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    opacity: 0; transition: opacity 0.6s ease; background: var(--clr-surface-3);
  }
  .product img.loaded, .kassenbild.loaded { opacity: 1; }
  .kassenbild { object-fit: contain; max-height: 220px; }
  .kassenbild.fallback {
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; color: var(--clr-secondary); text-align: center; padding: 1em;
    border-radius: var(--radius-16); border: 2px dashed var(--clr-primary);
  }

  .image-placeholder {
    width: 100%; height: 180px; background: var(--clr-surface-3); color: var(--clr-secondary);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-radius: var(--radius-12); font-weight: bold; text-align: center; padding: 0.5em; font-size: 0.9em; line-height: 1.4;
  }
  .image-placeholder svg { width: 40px; height: 40px; margin-bottom: 0.5em; fill: var(--clr-secondary); }

  /* Produktbeschreibung Toggle */
  .toggle-desc {
    margin: 2em auto 0; padding: 0.8em 1.2em; background: var(--clr-surface-3);
    border-radius: var(--radius-12); max-width: 400px; text-align: center; font-weight: bold; color: var(--clr-secondary);
    cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 0.5em; transition: background var(--t-base);
  }
  .toggle-desc:hover { background: #e1d0af; }
  .toggle-desc svg.arrow-icon { transition: transform var(--t-base); }
  .toggle-desc.open svg.arrow-icon { transform: rotate(180deg); }

  .desc-text {
    overflow: hidden; max-height: 0; opacity: 0; padding: 0 1em; text-align: center;
    transition: max-height 0.25s ease-out, opacity 0.2s ease-out, margin-top 0.2s ease-out; margin-top: 0;
  }
  .toggle-desc.open + .desc-text { max-height: 500px; opacity: 1; margin-top: 0.8em; }

  /* Filter */
  #allergenFilters { margin-bottom: 1em; }
  /* Filter-Buttons – bessere Lesbarkeit */
  .filter-buttons button,
  .filter-buttons .filter-btn {
    font-weight: 600;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    border: 1px solid #cba84d;
    background: #fff;
    color: #5c4a1e; /* dunkles Braun für Lesbarkeit */
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }

  .filter-buttons button:hover,
  .filter-buttons .filter-btn:hover {
    background: #f8f2e0;
  }

  .filter-buttons button.active,
  .filter-buttons .filter-btn.active {
    background: #cba84d; /* Gold */
    color: #fff; /* Weiß für maximalen Kontrast */
    border-color: #b08f3c;
  }

  .filter-buttons button:focus,
  .filter-buttons .filter-btn:focus {
    outline: 2px solid #b08f3c;
    outline-offset: 2px;
  }
  /* Suche */
  #productSearch, #recipeSearch {
    margin-bottom: 2em; padding: 0.7em; width: 100%; max-width: 400px; border: 1px solid #ccc; border-radius: var(--radius-8);
  }

  /* Allergen-Tabelle */
  .allergens { margin-top: 1em; }
  .allergens table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .allergens td, .allergens th { width: 50%; border: 1px solid #ddd; padding: 0.5em; text-align: left; }
  .present, .not-present {
    color: #fff; padding: 0.3em 0.6em; border-radius: var(--radius-8); font-weight: 600; display: inline-block;
  }
  .present { background: var(--clr-bad); }
  .not-present { background: var(--clr-ok); }

  /* -------------------- Formulare / Bestellen / Checklisten -------------------- */
  .order-form {
    display: flex; flex-direction: column; gap: 2.5em;
    background: var(--clr-surface); padding: 2em; border-radius: var(--radius-24);
    box-shadow: var(--shadow-md); max-width: 800px; margin: 0 auto;
    border: 2px solid var(--clr-border);
  }
  .form-section, .category-form { display: flex; flex-direction: column; gap: 1em; }
  .category-form h2 {
    font-size: 1.3em; color: var(--clr-secondary); margin: 2em 0 0.5em;
    border-left: 4px solid var(--clr-primary); padding-left: 0.5em;
  }

  .form-grid, .radio-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1em;
  }

  .order-form label { font-weight: 600; color: var(--clr-text); font-size: 0.95em; }

  .order-form input[type="text"],
  .order-form input[type="number"],
  .order-form textarea {
    padding: 0.7em 1em; border-radius: var(--radius-12); border: 1px solid #ccc; font-size: 1em; background: #fff;
    transition: border var(--t-fast);
  }
  .order-form input[type="text"]:focus,
  .order-form input[type="number"]:focus,
  .order-form textarea:focus { border-color: var(--clr-primary); outline: none; }

  .order-form input[type="number"]{
    padding: 0.7em 2.5em 0.7em 1em; -webkit-appearance: none; appearance: textfield;
    width: 100%; min-width: 120px; box-sizing: border-box;
  }
  .order-form input[type="number"]::-webkit-inner-spin-button,
  .order-form input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

  .filial-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 1em; margin-top: 1em;
  }
  .filial-card {
    position: relative; border: 2px solid var(--clr-border-2); border-radius: var(--radius-16);
    padding: 1.5em 1em; cursor: pointer; background: #fffefb; text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03); transition: all var(--t-base);
    display: block;
  }
  .filial-card:hover { border-color: var(--clr-primary); background: #fff8d5; transform: translateY(-2px); }
  /* Radios unsichtbar, aber fokusierbar → nötig für native Validierungs-Bubble */
  .filial-card { position: relative; }
  .filial-card input[type="radio"]{
    position: absolute;
    inset: 0;        /* füllt die ganze Karte */
    opacity: 0;      /* unsichtbar */
    margin: 0;
    pointer-events: auto;
  }
  .filial-card .filial-content { display: flex; flex-direction: column; gap: 0.5em; align-items: center; font-weight: 600; font-size: 1em; color: var(--clr-secondary); }
  .filial-card .filial-icon { font-size: 2em; transition: transform var(--t-base); }
  .filial-card input[type="radio"]:checked + .filial-content .filial-icon { transform: scale(1.2) rotate(2deg); }
  .filial-card input[type="radio"]:checked + .filial-content span { color: var(--clr-primary); }
  .filial-card input[type="radio"]:checked + .filial-content { font-weight: 800; }

  .bemerkung-counter { font-size: 0.93em; color: var(--clr-text-weak); text-align: right; margin-top: 0.2em; min-height: 1.1em; }
  .bemerkung-counter.limit-reached { color: var(--clr-bad); font-weight: bold; }

  .form-headline { text-align: center; font-size: 2em; color: var(--clr-secondary); margin-bottom: 0.5em; }

  .progress-bar { display: flex; justify-content: center; margin-bottom: 2em; gap: 1em; flex-wrap: wrap; }
  .progress-step {
    padding: 0.5em 1em; border-radius: 999px; background: var(--clr-surface-3); color: var(--clr-secondary);
    font-weight: 600; font-size: 0.9em; transition: all var(--t-base);
  }
  .progress-step.active { background: var(--clr-primary); color: #fff; transform: scale(1.05); }

  #page-bestellung .order-form{ background: var(--clr-surface); padding: 2em; border-radius: var(--radius-28); box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: box-shadow var(--t-base); }
  #page-bestellung .order-form:hover{ box-shadow: 0 15px 40px rgba(0,0,0,0.07); }

  .name-field-wrapper { display: flex; flex-direction: column; align-items: center; margin: 1.5em 0; }
  .name-field-wrapper label { font-weight: 700; color: var(--clr-secondary); margin-bottom: 0.3em; }
  .name-field-wrapper input {
    padding: 0.7em 1em; width: 100%; max-width: 320px; border-radius: var(--radius-12); border: 2px solid var(--clr-border-2);
    font-size: 1em; text-align: center; transition: all var(--t-base); background: #fffefb;
  }
  .name-field-wrapper input:focus { outline: none; border-color: var(--clr-primary); box-shadow: 0 0 0 3px rgba(203,168,77,0.2); }

  /* Produkt-Zeile (Bestellung) */
  .produkt-row {
    display: flex; align-items: stretch; justify-content: space-between; gap: 1em; margin-top: 1em;
  }
  .artikelnummer-badge, .herkunft-badge, .preis-tag {
    display: flex; align-items: center; justify-content: center; font-weight: 600; border-radius: var(--radius-14);
    min-height: 48px; min-width: 120px; padding: 0.4em 1em; font-size: 1.05em; white-space: nowrap; flex: 1 1 0;
  }
  .artikelnummer-badge { background: #e3e9d8; color: #e6836a; font-size: 1.07em; }
  .herkunft-badge { background: #95db71; color: #fff; font-size: 1.11em; }
  .herkunft-fremd { background: var(--clr-bad)!important; color: #fff!important; }
  .preis-tag { background: #f8eec6; color: #886828; font-weight: 700; font-size: 1.18em; justify-content: flex-end; }

  @media (max-width: 600px){
    .produkt-row { flex-direction: column; gap: 0.6em; }
    .artikelnummer-badge, .herkunft-badge, .preis-tag { min-width: 0; width: 100%; justify-content: center; }
  }

  .qty-input-wrapper { display: flex; align-items: center; gap: 0.3em; margin-top: 0.2em; }
  .qty-btn {
    background: var(--clr-surface-3); color: var(--clr-secondary); font-size: 1.12em; font-weight: 700;
    border: none; border-radius: var(--radius-8); width: 2em; height: 2em; display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background var(--t-fast); user-select: none;
  }
  .qty-btn:hover, .qty-btn:focus { background: var(--clr-primary)!important; color: #fff!important; outline: none; }
  .qty-input-wrapper input[type="number"]{
    text-align: center; width: 3em; min-width: 40px; margin: 0 0.4em; padding: 0.6em 0.3em;
    border-radius: var(--radius-8); border: 1.5px solid #ccc; background: #fff; font-size: 1em; -moz-appearance: textfield;
  }
  .qty-input-wrapper input[type="number"]:focus{ border-color: var(--clr-primary); }

  /* Kassenwahl (Checkliste) */
  .kassenwahl-grid { display: flex; gap: 1.2em; margin-top: 0.7em; justify-content: center; }
  .kassenwahl-card {
    background: #fff8d5; border: 2px solid var(--clr-primary); border-radius: var(--radius-18);
    padding: 1.4em 2.2em 1.1em; cursor: pointer; display: flex; flex-direction: column; align-items: center;
    font-weight: 700; color: var(--clr-secondary); font-size: 1.09em; box-shadow: 0 3px 16px rgba(203,168,77,0.12);
    transition: all 0.19s cubic-bezier(.54,.1,.7,1.2); min-width: 130px; min-height: 140px; position: relative; user-select: none;
  }
  .kassenwahl-card .kassen-icon { font-size: 2.7em; margin-bottom: 0.6em; }
  .kassenwahl-card input[type="radio"]{ display: none; }
  .kassenwahl-card:has(input[type="radio"]:checked){
    background: var(--clr-primary); color: #fff; border-color: var(--clr-primary-600); box-shadow: 0 8px 28px rgba(203,168,77,0.19);
    transform: scale(1.06); z-index: 2;
  }
  .kassenwahl-card:has(input[type="radio"]:checked) .kassen-icon{ filter: drop-shadow(0 2px 6px #b1913e44); transform: scale(1.11) rotate(-5deg); transition: transform 0.18s; }
  .kassenwahl-card:hover { border-color: #a48434; box-shadow: 0 6px 28px rgba(203,168,77,0.23); background: #fff6c5; color: #83612d; transform: scale(1.03); }
  .kassenwahl-card:active { transform: scale(0.97); filter: brightness(0.96); }

  /* Switch (Öffnen/Schließen) */
  .switch-wrapper { display: flex; align-items: center; justify-content: center; gap: 1em; margin: 1em 0; }
  .switch-label { font-weight: 700; color: var(--clr-secondary); }
  .switch { position: relative; display: inline-block; width: 60px; height: 32px; }
  .switch input { opacity: 0; width: 0; height: 0; }
  .slider {
    position: absolute; inset: 0; background: var(--clr-primary); transition: .4s; border-radius: 32px;
  }
  .slider::before {
    content: ""; position: absolute; height: 24px; width: 24px; left: 4px; bottom: 4px; background: #fff;
    transition: .4s; border-radius: 50%;
  }
  .switch input:checked + .slider { background: var(--clr-secondary); }
  .switch input:checked + .slider::before { transform: translateX(28px); }

  /* Checklisten */
  .checklist-item {
    background: var(--clr-surface);
    border: 2px solid var(--clr-border);
    border-radius: var(--radius-16);
    padding: 1em 1.2em; margin: 0.5em 0;
    font-weight: 600; color: var(--clr-secondary);
    display: flex; align-items: center; gap: 1em;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    transition: background var(--t-base), border-color var(--t-base);
  }
  .checklist-item input[type="checkbox"]{ transform: scale(1.4); accent-color: var(--clr-primary); cursor: pointer; }
  .checklist-item:hover { background: #fff8e3; border-color: var(--clr-primary); }

  #selectedFilialeNotice,
  #selectedChecklistFilialeNotice{
    font-size: 1em; background: #fff8d5; border: 1px solid var(--clr-border);
    border-radius: var(--radius-12); padding: 0.5em 1em; color: var(--clr-secondary); margin-top: 1em; text-align: center;
  }

  .min-hint { display: block; color: var(--clr-text-weak); font-size: 0.85em; margin-top: 0.4em; width: 100%; }

  /* Erfolgsmeldung (Toast) */
  .success-toast {
    position: fixed; top: -80px; left: 50%; transform: translateX(-50%) scale(0.97);
    background: #e7f7e6; color: #317c2d; padding: 1.2em 2.4em 1.2em 1.2em;
    border-radius: var(--radius-16); font-weight: 800; font-size: 1.13em;
    box-shadow: 0 8px 32px rgba(50,100,60,0.14);
    z-index: 2000; opacity: 0; pointer-events: none;
    display: flex; align-items: center; gap: 1em; min-width: 260px;
    transition: top 0.4s cubic-bezier(.68,-0.55,.27,1.55), opacity 0.28s, transform 0.35s;
  }
  .success-toast.visible { top: 30px; opacity: 1; transform: translateX(-50%) scale(1.04); pointer-events: auto; }
  .success-toast-icon { display: flex; align-items: center; justify-content: center; animation: toastPop 0.65s cubic-bezier(.65,1.7,.46,.91); }
  @keyframes toastPop{ 0%{transform:scale(0.2) rotate(-12deg);} 70%{transform:scale(1.22) rotate(8deg);} 100%{transform:scale(1) rotate(0);} }

  /* -------------------- FAQ -------------------- */
  .faq-item {
    background: var(--clr-surface);
    border: 2px solid var(--clr-border);
    border-radius: var(--radius-16);
    margin-bottom: 1em; overflow: hidden; transition: box-shadow var(--t-base);
  }
  .faq-question {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1em; cursor: pointer; font-weight: 800; color: var(--clr-secondary);
    background: var(--clr-surface-2);
  }
  .faq-answer {
    max-height: 0; overflow: hidden; transition: max-height 0.4s ease; padding: 0 1em; will-change: max-height;
  }
  .faq-answer p { padding-top: 0.8em; padding-bottom: 1em; margin: 0; }
  .faq-question .arrow-icon { transition: transform var(--t-base); fill: var(--clr-primary); }
  .faq-item.open .arrow-icon { transform: rotate(180deg); }

  /* -------------------- Schichtplan -------------------- */
  .schichtplan-card {
    background: var(--clr-surface); border: 2px solid var(--clr-border);
    border-radius: var(--radius-24); box-shadow: 0 8px 32px rgba(0,0,0,0.04);
    padding: 2em; margin: 2em auto 0; max-width: 820px;
    display: flex; flex-direction: column; align-items: center; gap: 1.5em;
  }
  .schichtplan-iframe {
    width: 100%; height: 70vh; min-height: 400px; border-radius: var(--radius-16);
    border: 1px solid var(--clr-surface-3); background: var(--clr-surface-3); box-shadow: 0 4px 16px rgba(90,55,40,0.08);
  }
  .schichtplan-info { text-align: center; color: var(--clr-secondary); margin-bottom: 0.6em; }
  .download-btn {
    display: inline-block; background: var(--clr-primary); color: #fff; font-weight: 800;
    padding: 0.8em 1.8em; border-radius: var(--radius-14); text-decoration: none; font-size: 1.06em;
    transition: background var(--t-fast), transform 0.13s; box-shadow: 0 3px 14px rgba(203,168,77,0.10);
  }
  .download-btn:hover { background: var(--clr-primary-600); transform: translateY(-2px) scale(1.03); }

  /* -------------------- Buttons / Submit -------------------- */
  .submit-button { background: var(--clr-primary); color: #fff; font-weight: 800; padding: 1em 2em; border-radius: var(--radius-14); font-size: 1em; }
  .submit-button:hover { background: var(--clr-primary-600); transform: translateY(-1px); }

}

/* ========================================================================== */
/* UTILITIES                                                                  */
/* ========================================================================== */
@layer utilities {
  .hidden { display: none !important; }
  .visually-hidden {
    position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important;
    overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important;
  }
  .text-center { text-align: center!important; }
  .mt-1 { margin-top: var(--space-4); }
  .mt-2 { margin-top: var(--space-6); }
  .mt-3 { margin-top: var(--space-8); }
  .grid { display: grid; gap: var(--space-6); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ========================================================================== */
/* RESPONSIVE BÜNDELUNG                                                       */
/* ========================================================================== */
@media (max-width: 768px) {
  @layer components {
    .order-form { padding: 1.5em; }
    .form-grid, .radio-grid { grid-template-columns: 1fr; }
    .category-form h2 { font-size: 1.1em; }
    .submit-button { width: 100%; font-size: 1.1em; }
  }
}

@media (max-width: 600px) {
  @layer components {
    .container { padding: 1.25em; }
  }
}

/* ========================================================================== */
/* OVERRIDES (punktuelle Fixes – möglichst abbauen)                           */
/* ========================================================================== */
@layer overrides {
  /* Beispiel: Legacy-Stile, die noch direkt angesprochen werden */
  section { margin-top: 2em; }
  #page-faq .productList.open { height: auto; opacity: 1; } /* sanftere Öffnung falls per JS gesetzt */
}

/* ===== Bestellung: minimalistische Liste ===== */
#orderProductList { position: relative; }

/* Filterleiste */
.order-filterbar {
  position: sticky; top: calc(var(--app-header-h) + var(--sticky-gap)); z-index: 10;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(6px);
  border: 1px solid #f0e8d5; border-radius: 12px;
  padding: 10px; margin: 10px 0 14px;
}
.order-search { display:flex; align-items:center; gap:8px; border:1px solid #eadfbe; border-radius:10px; padding:8px 10px; }
.order-search input { border:none; outline:none; background:transparent; width:100%; font-size:15px; }
/* ===== Bestell-Filterchips (über den Items) – bessere Lesbarkeit ===== */
.order-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-top: 10px;
  scrollbar-width: thin;
}

.order-chip {
  appearance: none;
  border: 1px solid #d9c99e;         /* deutlichere Kontur */
  background: #ffffff;                /* heller Hintergrund */
  color: #3d3013;                     /* dunkle Schrift für Kontrast */
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

.order-chip:hover {
  background: #faf5e7;                /* zarte Tönung beim Hover */
  border-color: #cba84d;
}

.order-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(203,168,77,.35); /* sichtbarer Fokus */
}

.order-chip.is-active {
  background: #cba84d;                /* Marken-Gold */
  color: #ffffff;                      /* hohe Lesbarkeit auf Gold */
  border-color: #b08f3c;
}

@media (prefers-contrast: more) {
  .order-chip { border-color: #bba873; }
  .order-chip.is-active { background: #ad8c34; border-color: #8e732a; }
}
/* Kategorien */
.order-section { margin-bottom: 18px; }
.order-section__title { font-size:14px; font-weight:700; color:#7a6b49; margin:6px 2px 8px; }
.order-list { display:flex; flex-direction:column; gap:8px; }

/* Produktzeile (ohne Kartenlayout) */
.order-row {
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:12px;
  padding:12px 14px; border-radius:12px; border:1px solid #f1e8cf; background:#fff;
}

/* Name klar, keine Beschreibung */
.order-row__name { font-weight:700; font-size:15px; color:#4a412d; }

/* Stepper */
.qty { display:inline-flex; align-items:center; gap:6px; border:1px solid #eadfbe; border-radius:10px; padding:4px 6px; background:#fff; position:relative; z-index:1; }
.qty-btn {
  width:32px; height:32px; border-radius:8px; border:1px solid #eadfbe;
  background:#fff; cursor:pointer; font-weight:800; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  transition: background .12s, border-color .12s, transform .04s;
}
.qty-btn:hover { background:#f6efe0; }
.qty-btn:active { transform: translateY(1px); }
.qty-btn:focus { outline:none; box-shadow: 0 0 0 2px rgba(203,168,77,0.25); }
.qty-input {
  width: 3rem;              /* genug Platz für 2-stellige Zahl */
  min-width: 3rem;
  text-align: center;       /* Zahl mittig */
  font-weight: 600;         /* besser lesbar */
  color: #3d3013;           /* dunkler Text */
  background: #fff;         /* weißer Hintergrund */
  border: 1px solid #cba84d;
  border-radius: 6px;
  padding: 0.2rem;
}
@media (max-width: 480px) {
  .qty-input { width: 40px; }
}

/* Resets gegen alte Card-Styles (falls irgendwo noch Labels/Karten greifen) */
#page-bestellung #orderProductList label.order-row,
#page-bestellung .category-form label.order-row {
  all: unset;
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:12px;
  padding:12px 14px; border-radius:12px; border:1px solid #f1e8cf; background:#fff;
}
.order-row__sum { min-width: 6.5rem; text-align: right; font-variant-numeric: tabular-nums; }
/* ===== A11y helper ===== */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ===== FAB (runder Button) ===== */
.cart-fab{
  position: fixed; right: 18px; bottom: 18px; z-index: 1000;
  width: 56px; height: 56px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--clr-primary); color: #fff; border: 0;
  box-shadow: 0 8px 26px rgba(0,0,0,.14);
  transition: transform 160ms, background 160ms;
}
.cart-fab[hidden]{ display: none !important; }
.cart-fab:hover{ transform: translateY(-1px) scale(1.02); background: var(--clr-primary-600, #b1913e); }
.cart-fab__icon{ font-size: 22px; line-height: 1; }
.cart-fab__badge{
  position: absolute; top: -4px; right: -4px;
  min-width: 22px; height: 22px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--clr-primary); font-weight: 800;
  font-size: 12px; padding: 0 6px; border: 2px solid var(--clr-primary);
}
.cart-fab__badge[hidden]{ display:none !important; }

/* ===== Panel ===== */
.cart-panel{
  position: fixed; right: 0; top: 0; height: 100%; width: min(440px, 90vw);
  background: var(--clr-surface, #fffefb);
  border-left: 1px solid var(--clr-border, #f3ead0);
  box-shadow: -8px 0 24px rgba(0,0,0,.08);
  transform: translateX(100%);
  opacity: 0;
  transition: transform 320ms cubic-bezier(.22,.61,.36,1), opacity 320ms cubic-bezier(.22,.61,.36,1);
  z-index: 1001;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.cart-panel.open{ transform: translateX(0); opacity: 1; }
.cart-panel[inert]{ pointer-events: none; }
.cart-panel[inert] *{ pointer-events: none; }

/* Header gold, Titel zentriert, Close rechts */
.cart-header{
  background: var(--clr-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  position: relative; border-bottom: none;
  padding: 12px 16px;
}
.cart-header h2{ color:#fff; font-weight:700; font-size:18px; margin:0; }
.cart-close{
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: #fff; color: var(--clr-primary);
  border: none; width: 32px; height: 32px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  transition: box-shadow 160ms, color 160ms, transform 200ms;
}
.cart-close:hover{ box-shadow: 0 4px 12px rgba(0,0,0,.18); transform: translateY(-50%) rotate(90deg); }

/* Produktbereich dezent hinterlegt */
.cart-items{
  background: #f4f2ef;
  padding: 14px 18px;
  overflow: auto; flex: 1;
  display: grid; gap: 10px;
}
.cart-empty{ color: #8d815f; text-align: center; padding: 16px 0; }

/* Einzelnes cart-Item (gleiches Look&Feel wie order-row) */
.cart-item{
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:12px;
  padding:12px 14px; border-radius:12px; border:1px solid var(--clr-border, #f3ead0); background:#fff;
}
.cart-item .item-name{ font-weight:700; font-size:15px; color:#4a412d; }
.cart-item .qty{ display:inline-flex; align-items:center; gap:6px; padding:4px 6px; background:#fff; }
.cart-item .qty-btn{
  width:32px; height:32px; border-radius:8px; border:1px solid #eadfbe;
  background:#fff; cursor:pointer; font-weight:800; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  transition: background 120ms;
}
.cart-item .qty-btn:hover{ background: var(--clr-primary); color:#fff; }
.cart-item .qty-input{
  text-align:center; width: 3em; min-width: 40px; padding:.6em .3em;
  border-radius: 8px; border: 1.5px solid var(--clr-border-2, #e5dac2);
}

/* Number-Spinner entfernen (nur für qty) */
input.qty-input[type=number]::-webkit-outer-spin-button,
input.qty-input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
input.qty-input[type=number]{ -moz-appearance: textfield; }

/* Footer konsistent – Infozeile + Button */
.cart-footer{
  background: #faf8f3; border-top: none;
  padding: 14px 18px; display: flex; flex-direction: column; gap: 10px;
}
.cart-clear {
  background-color: #c42020; /* gewünschte Farbe */
}
.cart-info-row{
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; min-height: 44px; padding: 8px 12px;
  background: transparent; color: #5a4b35; font-size: 14px; line-height: 1.2; text-align: center;
  border: none; border-top: 1px solid var(--clr-border); border-bottom: 1px solid var(--clr-border);
  margin: 0;
}
.cart-checkout{
  width: 100%; background: var(--clr-primary); color: #fff; border: 0;
  padding: .9em 1.1em; border-radius: 12px; font-weight: 700;
  transition: box-shadow 160ms, transform 160ms;
}
.cart-checkout:hover{ box-shadow: 0 4px 14px rgba(0,0,0,.15); transform: translateY(-1px); }

/* === Info-Popup (Overlay) ====================================== */
.info-popup {
  position: fixed;
  inset: 0;                       /* top/right/bottom/left: 0 */
  display: flex;
  align-items: flex-start;         /* oben anzeigen */
  justify-content: center;
  padding-top: 72px;               /* Abstand vom oberen Rand */
  background: rgba(0,0,0,.35);     /* leichtes Dimmen */
  z-index: 3000;                   /* über allem */
}
.info-popup.hidden { display: none; }
.info-popup-inner {
  background: #fff;
  color: var(--clr-text, #222);
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-16, 16px);
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  width: min(92vw, 720px);

  /* NEU: zentrieren */
  text-align: center;
}

.info-popup-inner h2 {
  margin: 0 0 .6rem 0;
  font-size: 1.3rem;
  font-weight: 700;
}

.info-popup-inner p {
  margin: 0 0 .9rem 0;
  line-height: 1.4;
}

.info-popup-inner button {
  margin-top: .75rem;
  cursor: pointer;
  border: 0;
  padding: .7rem 1.1rem;
  border-radius: var(--radius-12, 12px);
  background: var(--clr-primary, #CBA84D);
  color: #fff;
  font-weight: 800;
  transition: transform .12s ease, background .18s ease;
  display: inline-block;       /* damit er sich schön zentriert */
}
.info-popup-inner button:hover { transform: translateY(-1px) scale(1.02); }
.info-popup-inner button:active { transform: scale(0.98); }
/* ===========================
   Produktseite: Filterbar im Bestell-Look
   (unabhängig dank .order-filterbar--products)
   =========================== */

.order-filterbar.order-filterbar--products {
  /* nutzt Basis aus .order-filterbar (Card, Sticky, Blur) und macht kompakter */
  position: sticky; /* doppelt, falls .order-filterbar woanders nicht geladen wäre */
  top: calc(var(--app-header-h) + var(--sticky-gap));
  z-index: 2;
  border-color: #eadfbe;         /* Outline leicht angeglichen */
  padding: 8px 10px;              /* kompakter */
  margin: 8px 0 12px;             /* kompakter */
}

/* Label oben etwas enger setzen */
.order-filterbar--products .order-filterbar__label {
  display: block;
  margin: 2px 2px 6px;
}

/* Chips-Container: im Gegensatz zur Bestellseite WRAPPEN statt horizontales Scrollen */
.order-filterbar--products #allergenFilters.order-chips {
  overflow-x: visible;      /* keine horizontale Scrollleiste */
  flex-wrap: wrap;          /* umbruchfähig */
  row-gap: 8px;             /* vertikaler Abstand zwischen Zeilen (Desktop) */
  padding-top: 6px;         /* etwas kompakter als Bestellung */
}

/* Mobile: etwas mehr Luft zwischen Chip-Reihen */
@media (max-width: 640px) {
  .order-filterbar--products #allergenFilters.order-chips {
    /* Horizontal scrollen wie bei Bestellung */
    flex-wrap: nowrap;              /* nicht umbrechen */
    overflow-x: auto;               /* scrollen erlauben */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 8px;                       /* Abstand zwischen Chips (horizontal) */
    row-gap: 0;                     /* keine Zeilen → kein vertikaler Abstand */
    padding-bottom: 4px;            /* kleiner Abstand, damit die Scrollbar (falls sichtbar) nicht anstößt */
    scroll-snap-type: x proximity;  /* nicer scroll */
  }

  /* Chips sollen ihre Breite behalten und nicht schrumpfen */
  .order-filterbar--products #allergenFilters .allergen-btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* (optional) Scrollbar ausblenden – wenn du’s „clean“ willst */
  .order-filterbar--products #allergenFilters.order-chips {
    scrollbar-width: none;          /* Firefox */
  }
  .order-filterbar--products #allergenFilters.order-chips::-webkit-scrollbar {
    display: none;                  /* WebKit */
  }
}

/* Sichtbare, dünne Scrollbar (Firefox) */
.order-filterbar--products #allergenFilters.order-chips {
  scrollbar-width: thin;
  scrollbar-color: #cba84d #f7f3e6; /* Daumen / Spur; an Look anpassbar */
}

/* Sichtbare, dünne Scrollbar (Chromium/Safari) */
.order-filterbar--products #allergenFilters.order-chips::-webkit-scrollbar {
  height: 6px;                    /* horizontale Höhe */
}
.order-filterbar--products #allergenFilters.order-chips::-webkit-scrollbar-track {
  background: #f7f3e6;            /* Track-Farbe */
  border-radius: 999px;
}
.order-filterbar--products #allergenFilters.order-chips::-webkit-scrollbar-thumb {
  background: #cba84d;            /* Daumen (Gold) */
  border-radius: 999px;
}
.order-filterbar--products #allergenFilters.order-chips::-webkit-scrollbar-thumb:hover {
  background: #b08f3c;            /* Hover etwas dunkler */
}

/* Trennlinie in Outline-Farbe der Box */
.order-filterbar--products .order-divider {
  border: 0;
  border-top: 1px solid #eadfbe;
  margin: 8px 0 10px;
}

/* Suche: übernimmt .order-search Look, Höhe deckungsgleich zur Bestellseite */
.order-filterbar--products .order-search {
  /* nutzt bereits .order-search-Styles (Rahmen, Padding, Radius) */
}

/* --- Chips: Bestell-Look auf die Allergen-Buttons mappen --- */
/* Basis-Style analog zu .order-chip (falls .order-chip mal nicht geladen wäre) */
.order-filterbar--products .allergen-btn {
  appearance: none;
  border: 1px solid #d9c99e;
  background: #ffffff;
  color: #3d3013;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

/* Hover wie Bestellung */
.order-filterbar--products .allergen-btn:hover {
  background: #faf5e7;
  border-color: #cba84d;
}

/* Fokus sichtbar (A11y) */
.order-filterbar--products .allergen-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(203,168,77,.35);
}

/* Aktiver Zustand → wie .order-chip.is-active, aber mit der Logik-Klasse .active */
.order-filterbar--products .allergen-btn.active,
.order-filterbar--products .allergen-btn.is-active {
  background: #cba84d; /* Marken-Gold */
  color: #ffffff;
  border-color: #b08f3c;
}

/* Chips etwas enger zusammenrücken als auf der Bestellseite */
.order-filterbar--products #allergenFilters.order-chips {
  gap: 8px;            /* horizontal kompakt */
}

/* Optional: leicht kleinere Innenabstände auf sehr schmalen Geräten */
@media (max-width: 380px) {
  .order-filterbar--products .allergen-btn {
    padding: 7px 12px;
    font-size: 13.5px;
  }
}
/* Produktseite: Suche exakt wie in der Bestellung */
.order-filterbar--products .order-search input#productSearch {
  /* Globale #productSearch-Regel neutralisieren */
  margin: 0;
  padding: 0;           /* padding kommt von .order-search, nicht vom input */
  border: none;         /* border kommt von .order-search */
  max-width: none;

  /* 1:1 wie Bestellung */
  background: transparent;
  width: 100%;
  font-size: 15px;
  line-height: 1.2;     /* verhindert "aufgepumpte" Zeilenhöhe */
  outline: none;
}

/* Optional: störende WebKit-Such-Deko entfernen */
.order-filterbar--products input#productSearch::-webkit-search-decoration,
.order-filterbar--products input#productSearch::-webkit-search-cancel-button {
  display: none;
}

/* ========================================================================== */
/* Urlaub-Seite                                                               */
/* ========================================================================== */

#page-urlaub {
  max-width: 960px;
  margin: 0 auto;
}

#page-urlaub h1 {
  margin-bottom: 1rem;
}

/* Grid jetzt immer vertikal */
.urlaub-grid.vertical {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Volle Breite der Karten */
.urlaub-card.fullwidth {
  width: 100%;
}

/* Optional: Abstand unten */
.urlaub-card--calendar {
  margin-bottom: 2rem;
}

/* Karten-Stil */
.urlaub-card {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border-2);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.urlaub-card h2 {
  margin-top: 0;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.urlaub-intro {
  margin-bottom: 0.75rem;
}

/* Schritte-Liste */
.urlaub-steps {
  margin: 0 0 0.75rem 1.2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.urlaub-steps li {
  line-height: 1.4;
}

/* Hinweistext */
.urlaub-note {
  font-size: 0.9rem;
  color: var(--clr-text-weak);
  margin: 0 0 1.1rem 0;
}

/* Großer Button „Urlaub beantragen“ */
.urlaub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  border: none;
  background: var(--clr-primary);
  color: #fff;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  transition:
    background 0.12s ease,
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

.urlaub-btn .icon {
  margin-right: 0.4rem;
}

.urlaub-btn:hover,
.urlaub-btn:focus-visible {
  background: var(--clr-primary-600);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

/* Kalender-Text + Wrapper */
.urlaub-calendar-text {
  font-size: 0.95rem;
  color: var(--clr-text-weak);
  margin-bottom: 0.75rem;
}

.urlaub-calendar-wrapper {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--clr-border);
  background: #fff;
  min-height: 650px;
}

/* Kalender responsive */
.urlaub-calendar-wrapper iframe {
  width: 100%;
  height: 100%;
  min-height: 650px;
  border: 0;
}

@media (max-width: 600px) {
  .urlaub-card {
    padding: 1rem 1.1rem;
  }

  .urlaub-calendar-wrapper {
    min-height: 320px;
  }
}