/* Kopfzeile aller Seiten (Masterplan 7.0, Abschnitt 4): eine Navigation für die ganze Website.
   Kostenlos rätseln | Rätselbücher & Spiele | Gemeinschaft unterstützen | Für Organisationen | Über Exi | Partnerportal, dazu Suche und Warenkorb.
   Eigene Klassennamen (k7…), damit die älteren Kopfzeilen-Regeln in shop.css und in den Unterseiten nicht hineinfunken.
   Die Kopfzeile selbst setzt .claude/druck/masterplan7/kopf.pl in jede Seite ein; das Verhalten (Menü, Suche, Warenkorb-Zahl) steht in kopf.js. */
header.k7{position:sticky;top:0;z-index:40;background:rgba(245,249,239,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(14,59,44,.12);font-family:var(--body,'Nunito',system-ui,sans-serif)}
header.k7 .k7wrap{max-width:1200px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:14px}
header.k7 .k7brand{display:flex;align-items:center;gap:8px;text-decoration:none;flex:none}
header.k7 .k7brand img{width:48px;height:48px}
header.k7 .k7brand span{font-family:var(--display,'Baloo 2',system-ui,sans-serif);font-weight:800;font-size:1.15rem;color:#0E3B2C;line-height:1}
header.k7 .k7nav{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:nowrap}
header.k7 .k7nav a{display:block;padding:10px 9px;border-radius:999px;color:#0E3B2C;font-weight:800;font-size:.92rem;text-decoration:none;white-space:nowrap;line-height:1.2;min-height:0;text-align:left}
header.k7 .k7nav a:hover{background:rgba(14,59,44,.07)}
header.k7 .k7nav a[aria-current]{background:#0E3B2C;color:#fff}
header.k7 .k7nav a.k7portal{border:2px solid #0E3B2C;padding:7px 12px;margin-left:6px;font-size:.88rem;background:#fff}
header.k7 .k7nav a.k7portal:hover{background:#0E3B2C;color:#fff}
header.k7 .k7tools{display:flex;align-items:center;gap:6px;flex:none}
header.k7 .k7such,header.k7 .k7burger{width:44px;height:44px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;font-size:1.15rem;color:#0E3B2C;padding:0}
header.k7 .k7such:hover,header.k7 .k7burger:hover{background:rgba(14,59,44,.07)}
header.k7 .k7cart{display:inline-flex;align-items:center;gap:4px;font:inherit;font-weight:800;font-size:.92rem;background:#F5B82E;color:#0E3B2C;border:0;border-radius:999px;padding:9px 15px;cursor:pointer;text-decoration:none;white-space:nowrap;min-height:44px}
header.k7 .k7cart .cs{display:none}
header.k7 .k7cart.bump{animation:k7bump .6s ease}
@keyframes k7bump{30%{transform:scale(1.12)}60%{transform:scale(.96)}}
header.k7 .k7burger{display:none}
header.k7 .k7burger span,header.k7 .k7burger span::before,header.k7 .k7burger span::after{display:block;width:20px;height:2.5px;border-radius:2px;background:#0E3B2C;position:relative;transition:transform .25s,opacity .25s}
header.k7 .k7burger span::before,header.k7 .k7burger span::after{content:'';position:absolute;left:0}
header.k7 .k7burger span::before{top:-6.5px}
header.k7 .k7burger span::after{top:6.5px}
header.k7 .k7burger[aria-expanded="true"] span{background:transparent}
header.k7 .k7burger[aria-expanded="true"] span::before{transform:translateY(6.5px) rotate(45deg)}
header.k7 .k7burger[aria-expanded="true"] span::after{transform:translateY(-6.5px) rotate(-45deg)}
header.k7 a:focus-visible,header.k7 button:focus-visible{outline:3px solid #FF6A3D;outline-offset:2px}
@media (max-width:1360px){header.k7 .k7brand span{display:none}header.k7 .k7wrap{gap:10px}}
@media (max-width:1240px){header.k7 .k7nav a{padding:9px 7px;font-size:.86rem}header.k7 .k7nav a.k7portal{padding:6px 9px}}
/* Handy und Tablet: Menü hinter dem Knopf, Warenkorb und Suche bleiben sichtbar */
@media (max-width:1100px){
  header.k7 .k7burger{display:grid}
  header.k7 .k7tools{margin-left:auto}
  header.k7 .k7brand span{display:block}
  header.k7 .k7nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:2px;background:#F5F9EF;border-bottom:1px solid rgba(14,59,44,.15);box-shadow:0 18px 30px -18px rgba(14,59,44,.5);padding:8px 16px 14px;margin:0}
  header.k7.offen .k7nav{display:flex}
  header.k7 .k7nav a{font-size:1.05rem;padding:13px 14px;border-radius:12px}
  header.k7 .k7nav a.k7portal{margin:6px 0 0;text-align:center}
}
@media (max-width:420px){header.k7 .k7cart .cl{font-size:0}header.k7 .k7cart .cl::before{content:'🛒';font-size:1rem}header.k7 .k7cart{padding:9px 12px}header.k7 .k7brand img{width:42px;height:42px}header.k7 .k7brand span{font-size:1rem}}
/* Suche */
.k7suche{position:fixed;inset:0;z-index:200;background:rgba(14,59,44,.55);display:flex;justify-content:center;align-items:flex-start;padding:70px 16px 16px}
.k7suche[hidden]{display:none}
.k7suche .k7box{background:#fff;border-radius:18px;width:min(640px,100%);max-height:calc(100vh - 100px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);font-family:var(--body,'Nunito',system-ui,sans-serif)}
.k7suche .k7feld{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid #e3eadc}
.k7suche input{flex:1;font:inherit;font-size:1.1rem;border:0;outline:0;padding:8px 4px;min-width:0;color:#0E3B2C}
.k7suche .k7zu{border:0;background:#EEF4E8;border-radius:999px;font:inherit;font-weight:800;padding:8px 14px;cursor:pointer;color:#0E3B2C}
.k7suche ul{list-style:none;margin:0;padding:6px;overflow:auto}
.k7suche li a{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;text-decoration:none;color:#0E3B2C}
.k7suche li a:hover,.k7suche li a:focus{background:#F2F7EC;outline:0}
.k7suche li img{width:42px;height:58px;object-fit:cover;border-radius:6px;flex:none;background:#EEF4E8}
.k7suche li b{display:block;font-weight:800;line-height:1.2}
.k7suche li small{display:block;color:#56705f;font-size:.85rem;line-height:1.25}
.k7suche .k7leer{padding:18px;color:#56705f}
/* Fußzeile: dezenter Zugang „Exi für Unternehmen“ */
.k7unt{display:inline-flex;align-items:center;gap:6px;opacity:.85;font-size:.9rem}