/* ============================================================== kopf.css · Besitzer: P1 Kopf & Fuss · v4 „Passer“ (25.09.2026) K10 Ladenschild-Kopf (Plan 8.2). Altregeln aus v3 zurueckgebaut; Sicherung: _backups-vor-aenderung-2026-09-25-p1/. Inhalt: 1 Vorschau-Band (DEMO_MODE) + Hinweisband 2 Kopf: sticky, feste Hoehe, Verdichten beim Scrollen 3 Logo, Anruf-Knopf 4 Navigation breit (ab 64rem, einzeilig) mit Magenta-Unterstrich 5 Leistungs-Aufklapper (details.nav-drop) 6 Menue schmal (details.menue, unter 64rem) 7 Bewegung reduziert Farben nur aus tokens.css. Der Kopf traegt .schild (Ladenschild- Satz); .site-head steht dort zusaetzlich als Altbestand. Bewegung nur auf Interaktion (Hover, Klick, Scroll), keine Loops. Uebergaenge ueber translate/scale, nie transform (Plan 8.1 K02). ============================================================== */ /* ---- 1 Baender ------------------------------------------------ */ /* Vorschau-Hinweis (nur DEMO_MODE). Vorher style-Attribut mit Hex-Wert. */ .demo-band{ background-color:var(--accent2-text);color:var(--on-accent); font-family:var(--schrift-lauf);font-weight:600;font-size:.9rem;line-height:1.5; padding-block:.55rem; } /* Umschalter Textversion 1/2 im Vorschau-Band (26.09.2026, nur DEMO_MODE). Zwei Links im Band-Material: Umriss in Schriftfarbe, der aktive gefuellt (Farben getauscht, gleicher Kontrast wie das Band). Tap-Ziel >= 28 px. */ .demo-band .tv-schalter{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem;padding-top:.4rem} .demo-band .tv-text{margin-right:.15rem} .demo-band .tv-wahl{ display:inline-flex;align-items:center;min-height:1.75rem;padding:.1rem .7rem; border:1px solid currentColor;border-radius:999px; color:var(--on-accent);text-decoration:none;white-space:nowrap; } .demo-band .tv-wahl:hover{text-decoration:underline;text-underline-offset:.2em} .demo-band .tv-wahl[aria-current]{background-color:var(--on-accent);color:var(--accent2-text);border-color:var(--on-accent)} .demo-band .tv-wahl:focus-visible{outline:3px solid var(--on-accent);outline-offset:2px} /* Schmal: beide Knoepfe in EINE Zeile, der Bedientext bleibt fuer Screenreader (die nav heisst ohnehin „Textfassung wählen“). */ @media (max-width:29.99rem){ .demo-band .tv-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} } /* Betriebsferien o. ae. - vom Kunden selbst gefuellt (global.hinweis) */ .hinweisband{background-color:var(--accent2-text);color:var(--on-accent);padding-block:.6rem;font-size:.95rem} .hinweisband .wrap{display:flex;align-items:center;gap:.6rem} .hinweisband svg{flex:0 0 auto} /* ---- 2 Kopf ---------------------------------------------------- Feste Hoehe: das Verdichten (.ist-dicht, kopf.js ab 30 px) aendert nur Schatten, Linie und Logo-Massstab, nie den Fluss -> CLS 0. Die Hoehe steht als Token auf :root, damit Anker und Fokus nicht unter dem Kopf landen (scroll-padding, WCAG 2.4.11). */ :root{--kopf-h:64px} @media (min-width:64rem){ :root{--kopf-h:72px} } html{scroll-padding-top:calc(var(--kopf-h) + .75rem)} .site-head{ position:sticky;top:0;z-index:50; height:var(--kopf-h); background-color:var(--bg);color:var(--text); border-bottom:2px solid var(--haar); /* Logo-Haarlinie, ganze Breite */ transition:box-shadow var(--t-kurz) var(--ease); } /* Verdichtet: Fehlregister unter der Kante (Cyan-Platte 2 px versetzt) + Schatten */ .site-head.ist-dicht{ box-shadow:0 2px 0 var(--platte),0 14px 30px -18px color-mix(in oklch, var(--schild) 70%, transparent); } .head-inner{ height:100%;max-width:var(--wrap);margin-inline:auto; /* Kante = Inhaltskante (76rem) */ padding-inline:var(--gut); display:flex;align-items:center;gap:.5rem; } /* ---- 3 Logo, Anruf ------------------------------------------------ */ /* min-width:0: Flex-Kind darf unter seine Inhaltsbreite schrumpfen. */ .brand{display:flex;align-items:center;min-height:44px;margin-right:auto;min-width:0;text-decoration:none} .brand img{ width:clamp(96px, 27vw, 180px);height:auto; transform-origin:left center;transition:scale var(--t-kurz) var(--ease); } .site-head.ist-dicht .brand img{scale:.9} /* Anruf: Cyan-Knopf auch mobil. Radius = Knopf-Token (die Pille bleibt dem Bereichs-Umschalter vorbehalten, Plan 5.6). NIE weiss auf Cyan. */ .head-tel{ display:inline-flex;align-items:center;gap:.4rem;flex:none; min-height:44px;padding:.5rem .7rem; font-family:var(--schrift-titel);font-weight:700;font-stretch:92%;font-size:.9375rem;line-height:1; background-color:var(--knopf-fill);color:var(--on-knopf);text-decoration:none;white-space:nowrap; border-radius:var(--r-knopf); transition:translate var(--t-kurz) var(--ease),box-shadow var(--t-kurz) var(--ease); } .head-tel svg{flex:none} @media (hover:hover) and (pointer:fine){ .head-tel:hover{translate:0 -2px;box-shadow:3px 3px 0 var(--haar)} } .head-tel:active{scale:.97} .tel-kurz{display:none} @media (max-width:23.5rem){ .head-tel .tel-lang{display:none} .head-tel .tel-kurz{display:inline} } @media (min-width:64rem){ .head-tel{padding:.6rem 1rem;font-size:1rem} } /* ---- 4 Navigation breit (ab 64rem, eine Zeile) --------------------- Gemessen: bei 1024 px liefen v3-Navigation, Logo und Knopf in zwei Zeilen (Kopf 114 px). Jetzt: Saira schmal (90 %), weniger Innenabstand und ein kleineres Logo bis 80rem - alle sechs Punkte bleiben. */ .nav-breit{display:none} @media (min-width:64rem){ .nav-breit{display:flex;align-items:center;gap:0;flex-wrap:nowrap;margin-right:.35rem} } .nav-breit > a, .nav-breit .nav-drop > summary{ position:relative;display:inline-flex;align-items:center;gap:.3rem;min-height:44px; padding:.5rem clamp(.45rem, -.4rem + 1.3vw, .8rem); font-family:var(--schrift-titel);font-weight:600;font-stretch:90%;font-size:1rem;line-height:1; color:var(--text);text-decoration:none;white-space:nowrap; } /* Magenta-Unterstrich per scale (Plan K10), nur auf Hover/Fokus/aktiv */ .nav-breit > a::after, .nav-breit .nav-drop > summary::after{ content:"";position:absolute;left:clamp(.45rem, -.4rem + 1.3vw, .8rem);right:clamp(.45rem, -.4rem + 1.3vw, .8rem);bottom:.35rem; height:2px;background-color:var(--haar); scale:0 1;transform-origin:left center;transition:scale var(--t-kurz) var(--ease); } .nav-breit > a:hover::after,.nav-breit > a:focus-visible::after,.nav-breit > a.is-active::after, .nav-breit .nav-drop > summary:hover::after,.nav-breit .nav-drop.is-active > summary::after, .nav-breit .nav-drop[open] > summary::after{scale:1 1} .nav-breit > a:hover,.nav-breit > a.is-active, .nav-breit .nav-drop > summary:hover,.nav-breit .nav-drop.is-active > summary, .nav-breit .nav-drop[open] > summary{color:var(--accent-text)} /* ---- 5 Leistungs-Aufklapper (
) ------------------------------ */ .nav-drop{position:relative} .nav-drop > summary{list-style:none;cursor:pointer;user-select:none} .nav-drop > summary::-webkit-details-marker{display:none} .nav-drop > summary::marker{content:""} .nav-pfeil{flex:none;transition:rotate var(--t-kurz) var(--ease)} .nav-drop[open] .nav-pfeil{rotate:180deg} .drop-liste{list-style:none;margin:0;padding:0;display:grid;gap:.15rem} .drop-liste a{ display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.8rem; min-height:48px;padding:.55rem .7rem;border-radius:var(--r-chip); text-decoration:none;color:var(--text); transition:background-color var(--t-kurz) var(--ease); } .drop-liste a:hover,.drop-liste a.is-active{background-color:var(--wash)} .drop-liste a.is-active .drop-name{color:var(--accent-text)} .drop-ik{ display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-chip); background-color:var(--flaeche-wash);color:var(--accent-text); box-shadow:2px 2px 0 var(--haar); /* Fehlregister im Kleinen */ } .drop-ik .ik{width:24px;height:24px;color:var(--accent-text)} .drop-txt{display:grid;gap:.1rem;min-width:0} .drop-name{font-family:var(--schrift-titel);font-weight:650;font-stretch:96%;font-size:1rem;line-height:1.2} .drop-kurz{font-size:.875rem;color:var(--muted);line-height:1.35} /* war 13,4 px */ @media (min-width:64rem){ .nav-breit .drop-panel{ position:absolute;top:calc(100% + .9rem);left:50%;translate:-50% 0;z-index:60; width:min(40rem, calc(100vw - 2rem));padding:.7rem; background-color:var(--karte); border-top:2px solid var(--haar);border-radius:0 0 var(--r-karte) var(--r-karte); box-shadow:0 30px 60px -24px color-mix(in oklch, var(--schild) 85%, transparent); } .nav-breit .drop-liste{grid-template-columns:1fr 1fr} } /* ---- 6 Menue schmal (
, unter 64rem) ------------------------ */ .menue{flex:none} @media (min-width:64rem){ .menue{display:none} } .menue-knopf{ list-style:none;cursor:pointer;display:grid;place-items:center; width:44px;height:44px;border-radius:var(--r-knopf); border:1px solid var(--line-2);color:var(--text); } .menue-knopf::-webkit-details-marker{display:none} .menue-knopf::marker{content:""} .menue-linien{display:grid;gap:4px;width:20px} .menue-linien span{ display:block;height:2px;background-color:currentColor;border-radius:1px; transition:translate var(--t-kurz) var(--ease),rotate var(--t-kurz) var(--ease),opacity var(--t-kurz) var(--ease); } /* offen: die drei Striche werden zum X */ .menue[open] .menue-knopf{border-color:var(--accent-text);color:var(--accent-text)} .menue[open] .menue-linien span:nth-child(1){translate:0 6px;rotate:45deg} .menue[open] .menue-linien span:nth-child(2){opacity:0} .menue[open] .menue-linien span:nth-child(3){translate:0 -6px;rotate:-45deg} /* Das Panel liegt UEBER dem Inhalt (kein Verschieben), scrollt selbst, wenn es laenger ist als der Bildschirm. */ .menue-panel{ position:absolute;left:0;right:0;top:100%;z-index:45; display:flex;flex-direction:column;align-items:stretch; max-height:calc(100vh - var(--kopf-h)); max-height:calc(100dvh - var(--kopf-h)); overflow-y:auto;overscroll-behavior:contain; padding:.5rem var(--gut) 1.2rem; background-color:var(--bg); border-top:2px solid var(--haar); box-shadow:0 2px 0 var(--platte),0 30px 50px -24px color-mix(in oklch, var(--schild) 80%, transparent); } .menue-panel > a, .menue-panel .nav-drop > summary{ display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:48px; padding:.6rem .2rem;border-bottom:1px solid var(--line); font-family:var(--schrift-titel);font-weight:620;font-stretch:92%;font-size:1.125rem;line-height:1.2; color:var(--text);text-decoration:none; } .menue-panel > a.is-active, .menue-panel .nav-drop.is-active > summary{color:var(--accent-text)} .menue-panel > a.is-active::before{ content:"";width:18px;height:3px;background-color:var(--platte);box-shadow:2px 2px 0 var(--haar); order:2;flex:none; } .menue-panel .drop-panel{padding:.35rem 0 .6rem} /* ---- 7 Bewegung reduziert ----------------------------------------- */ @media (prefers-reduced-motion:reduce){ .site-head,.brand img,.head-tel,.nav-pfeil,.drop-liste a,.menue-linien span, .nav-breit > a::after,.nav-breit .nav-drop > summary::after{transition:none} .head-tel:hover,.head-tel:active{translate:none;scale:none} }