/* ==========================================================================
   Satt unter 10 € — neuer sticky Header, Live-Suche, Rezepte-Dropdown,
   Newsletter-Hinweisleiste + Popup. Eigener "sn-"-Prefix, damit nichts mit
   dem alten (jetzt toten) inline .site-header/.nav-CSS kollidiert.
   ========================================================================== */
:root{
  --sn-lime:#b9f400; --sn-black:#0b0b0b; --sn-grey:#f4f5f2; --sn-line:#e7e9e3; --sn-text:#171717;
  --sn-header-h:118px;
}
html{scroll-padding-top:var(--sn-header-h)}

.sn-header{position:fixed;top:0;left:0;right:0;z-index:200;background:#fff;border-bottom:1px solid var(--sn-line)}
.sn-header-inner{display:flex;align-items:center;gap:18px;min-height:84px;padding:10px 0}
.sn-brand{display:flex;align-items:center;flex:0 0 auto;order:0}
.sn-brand img{width:150px;height:auto;object-fit:contain}

/* Live-Suche — Desktop: Feld links neben Logo. Mobil: nur Icon links. */
.sn-search-toggle{display:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--sn-line);background:#fff;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;order:1}
.sn-search-toggle svg{width:19px;height:19px;stroke:var(--sn-text);fill:none;stroke-width:2}
.sn-search-wrap{order:1;position:relative;flex:0 1 260px}
.sn-search-input{width:100%;padding:10px 16px;border:1px solid var(--sn-line);border-radius:999px;font:inherit;font-size:13px;background:var(--sn-grey)}
.sn-search-input:focus{outline:2px solid var(--sn-lime);background:#fff}
.sn-search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--sn-line);border-radius:14px;box-shadow:0 16px 32px rgba(0,0,0,.14);max-height:340px;overflow-y:auto;z-index:210}
.sn-search-results a{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px;font-weight:600;border-bottom:1px solid var(--sn-line)}
.sn-search-results a:last-child{border-bottom:0}
.sn-search-results a:hover{background:var(--sn-grey)}
.sn-search-empty{padding:12px 14px;font-size:13px;color:#666}

.sn-nav-toggle-input{display:none}
.sn-nav-toggle-label{display:none;width:42px;height:42px;border-radius:50%;background:var(--sn-lime);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px;border:0;margin-left:auto;order:3}
.sn-nav-toggle-label span{width:19px;height:2px;background:#111;border-radius:2px;display:block}

.sn-nav{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:700;margin-left:auto;order:4}
.sn-nav > a{white-space:nowrap;display:flex;align-items:center}
.sn-nav > a.sn-active{color:#78b900}

.sn-dropdown{position:relative}
.sn-dropdown-btn{font:inherit;font-weight:700;font-size:14px;background:none;border:0;cursor:pointer;color:var(--sn-text);display:flex;align-items:center;gap:5px;padding:0}
.sn-dropdown-btn.sn-active{color:#78b900}
.sn-chev{font-size:11px;transition:transform .15s}
.sn-dropdown.sn-open .sn-chev{transform:rotate(180deg)}
.sn-dropdown-menu{display:none;position:absolute;top:calc(100% + 16px);left:0;background:#fff;border:1px solid var(--sn-line);border-radius:16px;box-shadow:0 20px 40px rgba(0,0,0,.14);padding:10px;width:280px;max-height:calc(100vh - var(--sn-header-h) - 24px);overflow-y:auto;overscroll-behavior:contain;z-index:210}
.sn-dropdown.sn-open .sn-dropdown-menu{display:block}
.sn-dropdown-menu a{display:block;padding:9px 12px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--sn-text)}
.sn-dropdown-menu a:hover{background:var(--sn-grey)}
.sn-dropdown-menu a.sn-all-link{background:var(--sn-black);color:#fff;font-weight:800;margin-bottom:6px;text-align:center}
.sn-dropdown-menu a.sn-all-link:hover{background:#000}
.sn-dropdown-menu hr{border:0;border-top:1px solid var(--sn-line);margin:8px 2px}
.sn-quick-row{display:flex;gap:4px}
.sn-quick-row a{flex:1 1 0;text-align:center;background:var(--sn-grey);font-size:11px;font-weight:700;padding:8px 3px;white-space:nowrap}
.sn-quick-row a:hover{background:#e9ebe4}
.sn-cat-group{display:flex;flex-direction:column}
.sn-cat-heading{display:block;padding:10px 12px 2px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#9a9d92}
.sn-cat-group:first-of-type .sn-cat-heading{padding-top:0}

.sn-nav > a.sn-mobile-all-link{display:none}
.sn-label-mobile{display:none}

/* Scroll-Lock, solange das mobile Hamburger-Menü offen ist (05.09.2026): verhindert, dass sich
   Menü-Scroll und Seiten-Scroll gegenseitig ins Gehege kommen ("hakelig" beim Auf-/Zuklappen des
   Rezepte-Dropdowns). Wird per JS (site-nav.js) gesetzt/entfernt, siehe dort. */
body.sn-scroll-locked{position:fixed;left:0;right:0;overflow:hidden}

/* Newsletter-Hinweisleiste */
.sn-newsbar{background:var(--sn-lime);color:#0b0b0b;text-align:center;font-size:12.5px;font-weight:800;letter-spacing:.2px;padding:7px 10px;cursor:pointer;text-transform:uppercase}
.sn-newsbar:hover{background:#9ce900}

/* Newsletter-Popup */
.sn-modal-overlay{position:fixed;inset:0;background:rgba(9,9,9,.6);z-index:900;display:flex;align-items:center;justify-content:center;padding:20px}
.sn-modal-overlay[hidden]{display:none}
.sn-modal{background:#fff;border-radius:22px;max-width:440px;width:100%;padding:32px 28px 26px;position:relative;box-shadow:0 30px 60px rgba(0,0,0,.3)}
.sn-modal-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--sn-line);background:#fff;cursor:pointer;font-size:14px}
.sn-modal .sn-modal-title{font:400 26px/1.15 Anton,'Anton Fallback',sans-serif;text-transform:uppercase;margin:0 0 10px;padding-right:30px}
.sn-modal > p{font-size:13.5px;line-height:1.5;margin:0 0 18px;color:#444}
.sn-modal form{display:flex;flex-direction:column;gap:12px}
.sn-modal input[type="email"]{padding:14px 18px;border:1px solid var(--sn-line);border-radius:999px;font:inherit;background:var(--sn-grey)}
.sn-consent{display:flex;align-items:flex-start;gap:9px;font-size:12px;line-height:1.5;color:#333;cursor:pointer}
.sn-consent input{margin-top:3px;flex:0 0 auto}
.sn-consent a{text-decoration:underline}
.sn-modal-note{font-size:11px;line-height:1.5;color:#777;margin:0}
.sn-modal button[type="submit"]{width:100%;justify-content:center;margin-top:4px}
.sn-modal .newsletter-msg{margin:0}

@media(max-width:900px){
  .sn-newsbar{font-size:11px;padding:5px 10px}
  .sn-header-inner{min-height:66px;gap:10px}
  .sn-brand img{width:110px}
  .sn-search-toggle{display:flex}
  .sn-search-wrap{display:none;position:absolute;left:0;right:0;top:100%;padding:10px 20px;background:#fff;border-bottom:1px solid var(--sn-line);flex-basis:auto}
  .sn-search-wrap.sn-open{display:block}
  .sn-nav-toggle-label{display:flex}
  .sn-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:6px 0;border:1px solid var(--sn-line);border-top:0;border-radius:0 0 16px 16px;box-shadow:0 16px 28px rgba(0,0,0,.12);max-height:calc(100vh - var(--sn-header-h));overflow-y:auto;overscroll-behavior:contain}
  .sn-nav.sn-open{display:flex}
  .sn-nav > a{padding:14px 22px;border-top:1px solid var(--sn-line)}
  .sn-nav > a:first-child{border-top:0}
  .sn-dropdown{border-top:1px solid var(--sn-line)}
  .sn-dropdown-btn{padding:14px 22px;width:100%}
  /* 05.09.2026 Nachtrag: auf Mobil erbte .sn-dropdown-menu hier bisher unbeabsichtigt noch
     max-height/overflow-y:auto von der Desktop-Basisregel weiter oben - dadurch war das
     Dropdown selbst noch ein ZWEITER, unabhängig scrollbarer Kasten VERSCHACHTELT im bereits
     scrollbaren .sn-nav. Verschachtelte Scroll-Container sind auf Mobil (v. a. iOS) eine
     bekannte Ursache für genau das gemeldete "hakelige" Scrollen, weil Touch-Events zuerst am
     inneren Kasten hängen bleiben, bevor sie ans äußere Menü durchgereicht werden. Fix: auf
     Mobil ist NUR noch .sn-nav der Scroll-Container, das Dropdown fließt einfach mit. */
  .sn-dropdown-menu{position:static;display:none;box-shadow:none;border:0;border-radius:0;width:auto;background:var(--sn-grey);padding:4px 10px;max-height:none;overflow:visible}
  .sn-dropdown.sn-open .sn-dropdown-menu{display:block}
  .sn-quick-row{flex-wrap:wrap}

  /* Mobile Reihenfolge jetzt identisch zur Desktop-Version: Rezepte (Dropdown, inkl.
     "Alle Rezepte ansehen" oben drin) -> Unter 5€ -> Wochenplan -> Deals -> Über mich.
     Der separate "Alle Rezepte"-Kurzlink oberhalb des Dropdowns entfällt dadurch (war
     Redundanz/Verwirrung: 2 verschiedene Rezepte-Einstiege statt 1 wie am Desktop),
     DOM-Reihenfolge ergibt diese Anzeige-Reihenfolge bereits von selbst, keine
     flex-order-Overrides mehr nötig (31.08.2026). */
  .sn-label-desktop{display:none}
  .sn-label-mobile{display:inline}
}

@media print{
  .sn-header{position:static}
  .sn-newsbar{display:none}
  body{padding-top:0 !important}
}

/* "Keine Rezepte gefunden"-Platzhalter (Katalog-/Kategorieseiten): war ohne Regel immer
   sichtbar, weil kein Such-/Filter-Skript existiert, das ihn ein-/ausblendet - stand dadurch
   dauerhaft unter befüllten Rezeptlisten (29.08.2026 per Grok-Review gefunden). Bis es eine
   echte Such-/Filterfunktion mit passendem Ein-/Ausblenden gibt, bleibt er per Default versteckt. */
.empty{display:none}