/* SAF 09.11.2026 - neuer Shop-Kopf (Mike, Leitstand-Chat 17:10, OK 17:53)
   Nur aktiv mit SAF_KOPF_NEU (Schalter 75_saf_kopf_neu.php). Alles unter #saf_kopf, damit nichts
   ausserhalb des Kopfes betroffen ist (#kategorie gibt es auch im Fuss!).
   Eine Formensprache: Knoepfe, Felder, Kacheln 6px - Tafeln 12px - runde Zeichen 50%.
   Handy/Tablet bis 985px, PC ab 986px (gleiche Grenze wie die alte Leiste). Shop laeuft im Quirks-Mode:
   darum ueberall feste Hoehen + box-sizing. */

#saf_kopf { position: relative; }
#saf_kopf *, #saf_kopf *:before, #saf_kopf *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
#saf_kopf button { font-family: inherit; cursor: pointer; }
#saf_kopf svg { display: block; flex: 0 0 auto; }

/* ---------- Infozeile oben (nur PC) ---------- */
#saf_kopf .saf_kopf_top { background: #1f2340; color: #FFFFFF; font-size: 13px; padding: 0 20px; }
#saf_kopf .saf_kopf_topinnen { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0; }
#saf_kopf .saf_kopf_topinnen:after { display: none; }
#saf_kopf .saf_kopf_toplink { display: inline-flex; align-items: center; height: 36px; color: rgba(255,255,255,.9); text-decoration: none; white-space: nowrap; }
#saf_kopf .saf_kopf_toplink svg { margin-right: 6px; color: #7fd3a8; }
#saf_kopf .saf_kopf_toplink:hover { color: #FFFFFF; text-decoration: underline; }
#saf_kopf .saf_kopf_toprechts { display: flex; align-items: center; }
#saf_kopf .saf_kopf_fb { justify-content: center; width: 28px; margin-left: 10px; border-radius: 6px; font-size: 15px; }
#saf_kopf .saf_kopf_fb:hover { background: rgba(255,255,255,.12); text-decoration: none; }
#saf_kopf .saf_kopf_topmitte { display: flex; align-items: center; white-space: nowrap; }
#saf_kopf .saf_kopf_topmitte b { color: #ffd54f; font-weight: bold; }
#saf_kopf .saf_kopf_alle { display: inline-flex; align-items: center; height: 26px; margin: 0 0 0 12px; padding: 0 10px; color: #FFFFFF; background: transparent; border: 1px solid rgba(255,255,255,.5); border-radius: 6px; font-size: 12px; line-height: 1; }
#saf_kopf .saf_kopf_alle svg { margin-left: 6px; }
#saf_kopf .saf_kopf_alle:hover, #saf_kopf .saf_kopf_alle[aria-expanded="true"] { background: #FFFFFF; color: #1f2340; border-color: #FFFFFF; }

/* ---------- Suche: aussen 6px, innen eckig ---------- */
#saf_kopf #search #inputString { height: 44px; border-radius: 6px; }
#saf_kopf #search .cssButton { height: 44px; border-radius: 0 6px 6px 0; }
#saf_kopf #search .cssButton .cssButtonText { line-height: 44px; height: 44px; }

/* ---------- Blaue Leiste: gemeinsame Teile ---------- */
#saf_kopf #naviArea { background: #06789A; }
#saf_kopf .saf_kopf_wuerfel { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: #D92957; color: #FFFFFF; border: 2px solid #FFFFFF; border-radius: 6px; font-size: 18px; font-weight: bold; line-height: 1; font-style: normal; }
#saf_kopf [aria-expanded="true"] .saf_kopf_wuerfel { background: #FFFFFF; color: #D92957; }
#saf_kopf a:focus-visible, #saf_kopf button:focus-visible { outline: 2px solid #06789A; outline-offset: 2px; }
#saf_kopf .saf_kopf_top a:focus-visible, #saf_kopf .saf_kopf_top button:focus-visible,
#saf_kopf #naviArea a:focus-visible, #saf_kopf #naviArea button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -2px; }

/* ---------- Vorteile-Tafel ---------- */
#saf_kopf .saf_vorteile { display: block; background: #FFFFFF; color: #1f2340; font-size: 14px; line-height: 1.4; padding: 16px; border-radius: 0 0 12px 12px; box-shadow: 0 8px 24px rgba(31,35,64,.18); z-index: 1000; }
#saf_kopf .saf_vorteile[hidden] { display: none !important; }
#saf_kopf .saf_vorteile_kopf { display: flex; align-items: center; justify-content: space-between; }
#saf_kopf .saf_vorteile_titel { margin: 0; padding: 0; font-size: 16px; font-weight: bold; color: #1f2340; outline: none; }
#saf_kopf .saf_vorteile_zu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px -10px 0 0; padding: 0; background: transparent; border: 0; border-radius: 6px; color: #555555; }
#saf_kopf .saf_vorteile_zu:hover { background: #f1f3f6; color: #1f2340; }
#saf_kopf .saf_vorteile_zu:focus-visible { outline-color: #06789A; }
#saf_kopf .saf_vorteile_klein { margin: 10px 0 6px 0; padding: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
#saf_kopf .saf_vorteile_stufen { display: flex; }
#saf_kopf .saf_vorteile_stufe { flex: 1 1 0; margin-left: 8px; padding: 10px 4px; text-align: center; border: 1px solid #e3e7ef; border-radius: 6px; }
#saf_kopf .saf_vorteile_stufe:first-child { margin-left: 0; }
#saf_kopf .saf_vorteile_stufe b { display: block; font-size: 20px; line-height: 1.2; color: #FFFFFF; }
#saf_kopf .saf_vorteile_stufe span { display: block; font-size: 12px; color: #FFFFFF; }
/* Stufen in Logo-Farben (Mike 09.11. 19:24): 3 % Weinrot, 4 % Rot, 5 % Blau, Schrift weiss */
#saf_kopf .saf_vorteile_stufe:nth-child(1) { background: #822944; border-color: #822944; }
#saf_kopf .saf_vorteile_stufe:nth-child(2) { background: #D92957; border-color: #D92957; }
#saf_kopf .saf_vorteile_stufe:nth-child(3) { background: #06789A; border-color: #06789A; }
#saf_kopf .saf_vorteile_zeile { display: flex; align-items: center; margin-top: 12px; }
#saf_kopf .saf_vorteile_ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-right: 10px; border-radius: 50%; background: #e6f3f7; color: #06789A; flex: 0 0 auto; }
#saf_kopf .saf_vorteile_ico_gelb { background: #fff4c2; color: #8a6d00; }
#saf_kopf .saf_vorteile_fuss { display: flex; align-items: stretch; margin-top: 14px; padding-top: 14px; border-top: 1px solid #eceff4; }
#saf_kopf .saf_vorteile_fuss a { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; min-height: 44px; margin-left: 8px; padding: 8px 10px; font-size: 13px; font-weight: bold; line-height: 1.3; text-align: center; color: #06789A; background: #FFFFFF; border: 1px solid #06789A; border-radius: 6px; text-decoration: none; }
#saf_kopf .saf_vorteile_fuss a:first-child { margin-left: 0; }
#saf_kopf .saf_vorteile_fuss .saf_nb { white-space: nowrap; }
#saf_kopf .saf_vorteile_fuss a:hover { color: #FFFFFF; background: #06789A; text-decoration: none; }
#saf_kopf .saf_vorteile_fuss a:focus-visible { outline: 2px solid #06789A; outline-offset: 2px; }

/* ================= Handy + Tablet (bis 985px) ================= */
@media only screen and (max-width: 985px) {
  #saf_kopf .saf_kopf_top { display: none; }
  #saf_kopf .saf_kopf_navrechts { display: none; }
  #saf_kopf #naviArea { padding: 0; }
  #saf_kopf #naviContainer { padding: 0; }

  #saf_kopf #kategorie_2 { display: flex; align-items: center; justify-content: flex-start; height: 48px; padding: 0 8px; }
  #saf_kopf #kategorie_2 > * { margin-left: 4px !important; }
  #saf_kopf #kategorie_2 > *:first-child { margin-left: 0 !important; }
  #saf_kopf #kategorie_2 > a.saf_kopf_kontakt { margin-left: auto !important; }
  #saf_kopf #katnav_zmm { display: block; float: none; height: 44px; margin: 0; }
  #saf_kopf #kategorie_2 a, #saf_kopf #kategorie_2 button { float: none; border: 0; text-transform: none; }
  #saf_kopf #kategorie_2 .saf_kopf_feld,
  #saf_kopf #katnav_zmm a.saf_kopf_feld { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; color: #FFFFFF; background: transparent; border: 0; border-radius: 6px; font-size: 16px; line-height: 1; text-decoration: none; }
  #saf_kopf #kategorie_2 .saf_kopf_feld:hover, #saf_kopf #kategorie_2 .saf_kopf_feld[aria-expanded="true"] { background: rgba(0,0,0,.12); }
  #saf_kopf #kategorie_2 a.saf_kopf_kontakt { display: flex; align-items: center; height: 44px; margin: 0; padding: 0 8px; color: #FFFFFF; background: transparent; border-radius: 6px; font-size: 14px; line-height: 1; text-decoration: none; }
  #saf_kopf #kategorie_2 a.saf_kopf_kontakt svg { margin-right: 6px; }
  #saf_kopf #kategorie_2 a.saf_kopf_kontakt:hover { background: rgba(0,0,0,.12); }

  /* Suche: hinter der Lupe, klappt unter der blauen Leiste auf (JS haengt sie dorthin) */
  #saf_kopf #search { clear: both; float: none; width: auto; margin: 0; padding: 0 12px; height: 0; overflow: hidden; visibility: hidden; background: #06789A; -webkit-transition: height .25s, padding .25s, visibility .25s; transition: height .25s, padding .25s, visibility .25s; }
  #saf_kopf #search.act { height: 68px; padding: 12px 12px; overflow: visible; visibility: visible; -webkit-transition: height .25s, padding .25s; transition: height .25s, padding .25s; }
  #saf_kopf #search #inputString { background: #FFFFFF; }
  #saf_kopf #search .suggestionsBox { left: 12px; right: 12px; }

  #saf_kopf .saf_vorteile { position: relative; margin: 0; }
  #saf_kopf .saf_vorteile_fuss a { min-height: 48px; }
}
@media only screen and (max-width: 359px) {
  #saf_kopf #kategorie_2 a.saf_kopf_kontakt span { display: none; }
  #saf_kopf #kategorie_2 a.saf_kopf_kontakt svg { margin-right: 0; }
  #saf_kopf #kategorie_2 a.saf_kopf_kontakt { width: 44px; justify-content: center; padding: 0; }
  #saf_kopf #kategorie_2 { padding: 0 4px; }
}

/* ================= PC (ab 986px) ================= */
@media only screen and (min-width: 986px) {
  #saf_kopf #kategorie_2 { display: none; }
  #saf_kopf #naviContainer { display: flex; align-items: center; }
  #saf_kopf #naviContainer:after { display: none; }
  #saf_kopf #kategorie { -webkit-box-ordinal-group: 2; order: 1; flex: 1 1 auto; }
  #saf_kopf .saf_kopf_navrechts { -webkit-box-ordinal-group: 3; order: 2; display: flex; align-items: center; flex: 0 0 auto; padding-left: 12px; }
  #saf_kopf .saf_kopf_vorteilknopf { display: inline-flex; align-items: center; height: 36px; margin: 0; padding: 0 12px 0 4px; color: #FFFFFF; background: rgba(0,0,0,.15); border: 0; border-radius: 6px; font-size: 14px; font-weight: bold; line-height: 1; }
  #saf_kopf .saf_kopf_vorteilknopf .saf_kopf_wuerfel { width: 28px; height: 28px; font-size: 15px; margin-right: 8px; }
  #saf_kopf .saf_kopf_vorteilknopf:hover, #saf_kopf .saf_kopf_vorteilknopf[aria-expanded="true"] { background: rgba(0,0,0,.25); }
  #saf_kopf .saf_kopf_kontaktrahmen { display: inline-flex; align-items: center; height: 36px; margin-left: 10px; padding: 0 14px; color: #FFFFFF; border: 1px solid rgba(255,255,255,.7); border-radius: 6px; font-size: 14px; line-height: 1; text-decoration: none; }
  #saf_kopf .saf_kopf_kontaktrahmen svg { margin-right: 8px; }
  #saf_kopf .saf_kopf_kontaktrahmen:hover { background: #FFFFFF; color: #06789A; border-color: #FFFFFF; text-decoration: none; }

  #saf_kopf .saf_vorteile { position: absolute; top: 0; left: 0; width: 420px; max-width: 94vw; border-radius: 12px; padding: 18px; }
}

/* PC schmal (986-1120px): Menue enger, Startseite nur als Haus-Zeichen (Desi 09.11.) */
@media only screen and (min-width: 986px) and (max-width: 1120px) {
  #saf_kopf #naviArea #kategorie_inner UL LI A { padding: 0 .55em; }
  #saf_kopf #naviArea #kategorie_inner UL LI:first-child A { display: flex; align-items: center; height: 50px; } /* Quirks-Modus: Zeile nur mit Zeichen faellt sonst auf 14px */
  #saf_kopf .saf_kopf_lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}