/* Kopf "A poliert" (Front S4, 11.10.2026): eine Stildatei für die Startseite und alle übrigen Seiten. Vorher stand der Kopf nur in sp.css
   (unter body.lcb-sp); hier gilt alles unter .sp-kopf, weil auf den übrigen Seiten das Theme (Astra) mit seinen Grundregeln weiterläuft
   (Listen mit Einzug, Linkfarben, Silbentrennung, Großschrift). Handy zuerst, ab 600 px Social-Symbole in der Zeile, ab 900 px PC-Menü. */
@font-face { font-family: "SP Figtree"; src: url(fonts/figtree-400-800-latin.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }

.sp-kopf {
	--sp-papier: #fbf6ec;
	--sp-tinte: #1f2840;
	--sp-weich: #4a5470;
	--sp-marke: #b9541f;
	--sp-marke-text: #9f4513;
	--sp-linie: rgba(31, 40, 64, .14);
	--sp-hand: "SP Kalam", "Comic Sans MS", cursive;
	--sp-text: "SP Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sp-rand: 20px;
	position: relative; z-index: 30; background: var(--sp-papier); border-bottom: 1px solid var(--sp-linie);
	font-family: var(--sp-text); font-size: 17px; line-height: 1.6; color: var(--sp-tinte); -webkit-font-smoothing: antialiased;
}
.sp-kopf, .sp-kopf *, .sp-kopf *::before, .sp-kopf *::after { box-sizing: border-box; }
/* Übrige Seiten: der mitlaufende Handy-Kopf (lcb-seo-block2, kopf_mitlaufend.css) setzt #masthead auf Weiß; hier gilt das Papier der Startseite */
#masthead.sp-kopf { background: var(--sp-papier); }
/* Trennlinie als Schatten statt Rand: der mitlaufende Kopf schiebt um (Kopfhöhe minus Herbst-Leiste) hoch, ein Rand unter der Leiste schnitt 1 px ab */
#masthead.lcb-kopf { border-bottom: 0; box-shadow: 0 1px 0 var(--sp-linie); }
/* Offenes Handymenü: Kopf bleibt stehen, auch wenn das Skript des mitlaufenden Kopfs beim Weiterscrollen lcb-kopf-weg setzt */
#masthead.lcb-kopf.lcb-menue-offen.lcb-kopf-weg { transform: none; }
/* Theme-Vorgaben neutralisieren: Astra trennt Silben, schreibt Menüs groß und rückt Listen ein */
.sp-kopf * { -webkit-hyphens: manual; hyphens: manual; word-break: normal; overflow-wrap: break-word; letter-spacing: normal; text-transform: none; }
.sp-kopf ul, .sp-kopf li, .sp-kopf p { margin: 0; padding: 0; list-style: none; }
.sp-kopf a { color: inherit; }
.sp-kopf a:hover { opacity: 1; }
.sp-kopf :focus-visible { outline: 3px solid var(--sp-tinte); outline-offset: 3px; border-radius: 6px; }
.sp-kopf svg { flex: none; }
.sp-kopf .sp-unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sp-symbole { position: absolute; width: 0; height: 0; overflow: hidden; }
.sp-kopf .sp-springen { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--sp-tinte); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 700; font-size: 16px; line-height: 1.3; text-decoration: none; }
.sp-kopf .sp-springen:focus { top: 8px; }

.sp-kopf .sp-wrap { width: 100%; max-width: calc(1120px + 2 * var(--sp-rand)); margin: 0 auto; padding-left: var(--sp-rand); padding-right: var(--sp-rand); }
.sp-kopf__zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.sp-kopf .sp-logo { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--sp-hand); font-weight: 700; font-size: 22px; color: var(--sp-tinte); text-decoration: none; line-height: 1; }
.sp-kopf .sp-logo span { color: var(--sp-marke-text); margin-left: 2px; }
.sp-kopf .sp-logo__bild { display: block; width: auto; height: 52px; max-width: none; }
.sp-kopf__nav { display: none; }
.sp-kopf__rechts { display: flex; align-items: center; gap: 8px; }
.sp-kopf .sp-kopf__lupe, .sp-kopf .sp-menue summary {
	display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--sp-linie);
	color: var(--sp-tinte); background: transparent; cursor: pointer; padding: 0; margin: 0;
}
.sp-kopf .sp-lupe { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.sp-kopf .sp-kopf__shop { display: none; }
.sp-kopf .sp-menue { position: relative; margin: 0; }
.sp-kopf .sp-menue summary { list-style: none; flex-direction: column; gap: 4px; }
.sp-kopf .sp-menue summary::-webkit-details-marker { display: none; }
.sp-kopf .sp-menue summary::marker { content: ""; }
.sp-kopf .sp-menue summary span { display: block; width: 18px; height: 2px; background: var(--sp-tinte); }
.sp-kopf .sp-menue nav { position: absolute; right: 0; top: 52px; width: 240px; background: #fff; border-radius: 16px; box-shadow: 0 12px 30px rgba(31, 40, 64, .2); overflow: hidden; z-index: 40; }
/* Querformat/kleine Höhe: Menü nie höher als der sichtbare Bereich unter dem Kopf, dann scrollt es in sich (Codex r20261011-033823 #2/#4) */
.sp-kopf .sp-menue nav { max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); overflow-y: auto; overscroll-behavior: contain; }
.sp-kopf .sp-menue nav > a { display: flex; align-items: center; min-height: 48px; padding: 0 20px; color: var(--sp-tinte); font-weight: 700; font-size: 17px; text-decoration: none; border-bottom: 1px solid var(--sp-linie); }
.sp-kopf .sp-menue nav > a.sp-menue__shop { color: var(--sp-marke-text); font-weight: 800; border-bottom: 0; }   /* Maße wie das bisherige Startseiten-Menü (240 px, Zeilenhöhe geerbt) */
.sp-kopf .sp-menue__folgen { padding: 10px 8px 12px; background: var(--sp-papier); border-top: 1px solid var(--sp-linie); }
.sp-kopf .sp-menue__folgen p { padding: 0 12px 2px; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--sp-weich); }

/* Social-Symbole: ruhig in Tintenblau-Grau, beim Darüberfahren in der Farbe des Netzwerks (Kontrast je mindestens 3:1 auf Papier) */
.sp-kopf .sp-social { display: flex; align-items: center; gap: 0; }
.sp-kopf .sp-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: var(--sp-weich); text-decoration: none; transition: color .15s ease; }
.sp-kopf .sp-social svg { width: 20px; height: 20px; fill: currentColor; }
.sp-kopf .sp-social a:hover, .sp-kopf .sp-social a:focus-visible { color: var(--sp-tinte); }
.sp-kopf .sp-social .sp-social__facebook:hover { color: #1565c0; }
.sp-kopf .sp-social .sp-social__instagram:hover { color: #b0237a; }
.sp-kopf .sp-social .sp-social__youtube:hover { color: #c4161c; }
.sp-kopf .sp-social .sp-social__pinterest:hover { color: #b7081b; }
.sp-kopf .sp-social .sp-social__whatsapp:hover { color: #0b7a3e; }
.sp-kopf .sp-social--menue { justify-content: space-between; }
.sp-kopf .sp-social--kopf { display: none; }

/* Herbst-Leiste (lcb-seo-block2) sitzt im Kopf */
.sp-kopf #lcb-aktion { position: relative; z-index: 20; }

/* ab 600 px: Tablet - Social-Symbole in der Zeile */
@media (min-width: 600px) {
	.sp-kopf { --sp-rand: 32px; }
	.sp-kopf .sp-social--kopf { display: flex; margin-right: 4px; }
	.sp-kopf .sp-social--kopf a { width: 36px; }
	.sp-kopf .sp-menue__folgen { display: none; }
}

/* ab 900 px: PC-Menü in der Zeile, Handymenü aus */
@media (min-width: 900px) {
	.sp-kopf { --sp-rand: 40px; }
	.sp-kopf__zeile { padding-top: 16px; padding-bottom: 16px; gap: 24px; }
	.sp-kopf .sp-logo { font-size: 26px; }
	.sp-kopf .sp-logo__bild { height: 64px; }
	.sp-kopf__nav { display: flex; gap: 22px; align-items: center; }
	.sp-kopf .sp-kopf__nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 4px; color: var(--sp-tinte); text-decoration: none; font-weight: 600; font-size: 16px; line-height: 1.3; }
	.sp-kopf .sp-kopf__nav a:hover { color: var(--sp-marke-text); }
	.sp-kopf .sp-kopf__shop { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 10px; background: var(--sp-marke); color: #fff; font-weight: 700; font-size: 16px; line-height: 1.3; text-decoration: none; white-space: nowrap; }
	.sp-kopf .sp-kopf__shop:hover { background: var(--sp-marke-text); color: #fff; }
	.sp-kopf__rechts { gap: 10px; }
	.sp-kopf .sp-menue { display: none; }
	.sp-kopf .sp-social--kopf { padding-right: 6px; margin-right: 0; border-right: 1px solid var(--sp-linie); }
	.sp-kopf .sp-social--kopf a { width: 32px; }
	.sp-kopf .sp-social--kopf svg { width: 18px; height: 18px; }
}
/* 900-1099 px: enger, damit Menü, Symbole, Suche und Shop in eine Zeile passen (gemessen 900-1099 in Chromium, WebKit, Firefox) */
@media (min-width: 900px) and (max-width: 1099px) {
	.sp-kopf__zeile { gap: 14px; }
	.sp-kopf__nav { gap: 12px; }
	.sp-kopf .sp-social--kopf a { width: 28px; }
	.sp-kopf .sp-kopf__shop { padding: 0 14px; }
}
@media (min-width: 900px) and (max-width: 1023px) {
	.sp-kopf__zeile { gap: 10px; }
	.sp-kopf__nav { gap: 4px; }
	.sp-kopf .sp-kopf__nav a { padding: 0 2px; }   /* Reserve für die Ersatzschrift (Figtree fällt aus: Firefox 900 px lief 7 px über) */
	.sp-kopf .sp-logo__bild { height: 56px; }
	.sp-kopf__rechts { gap: 6px; }
}