/* Neue Kopfzeile + Menü – vorerst NUR Startseite (Thomas 14.10.2026: „das menu sollten wir so gestalten wie … bei der Fable-Seite …
   ohne dem hässlichen grauen streifen … das menu und die animationen dazu … waren schon sehr schön“).
   Verhalten wie beim Fable-Entwurf: fest oben, blendet beim Runterscrollen aus, beim Hochscrollen wieder ein – aber mit
   cremefarbenem Hintergrund + feiner Linie statt dunklem Verlauf. Handy: Menü-Symbol wird zum X, Vollbild-Menü blendet gestaffelt ein.
   Gehört zu js/menu-fein.js. Rückweg: alte Kopfzeile (bloc-0) aus Git zurückholen, die zwei Verweise entfernen. */

.kopf { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; color: var(--swatch-var-5803); background: transparent;
	transition: visibility .5s, opacity .5s, transform .5s cubic-bezier(.44, 0, .28, .99), background-color .3s; }
.kopf.scrolled { background: var(--swatch-var-3854); }
.kopf.hidden { visibility: hidden; opacity: 0; transform: translateY(-100%); }
.kopf .leiste { display: flex; align-items: center; justify-content: space-between; height: 84px; border-bottom: 1px solid rgba(28, 25, 23, .14); }
.kopf .logo { position: relative; z-index: 2; display: block; }
.kopf .logo img { height: 30px; width: auto; display: block; }
.kopf .logo .hell { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; }
.kopf nav { display: flex; align-items: center; gap: 34px; }
.kopf nav a { position: relative; display: inline-flex; align-items: center; height: 84px; font-family: "InterTight-Regular", "Helvetica Neue", Arial, sans-serif;
	font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; color: inherit; text-decoration: none; }
.kopf nav a::after { content: ""; position: absolute; right: 0; bottom: 30px; width: 0; height: 1px; background: currentColor; opacity: .55;
	transition: width .35s cubic-bezier(.165, .84, .44, 1); }
.kopf nav a.aktiv::after { width: 100%; left: 0; }
@media (pointer: fine) { .kopf nav a:hover::after { width: 100%; left: 0; } .kopf nav a:hover { color: var(--swatch-var-2425); } }
.kopf-platz { height: 84px; }

/* Menü-Symbol (drei Linien → X) */
.kopf .schalter { display: none; position: relative; z-index: 2; width: 26px; height: 18px; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
.kopf .schalter i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .4s cubic-bezier(.44, 0, .28, .99), opacity .3s; }
.kopf .schalter i:nth-child(1) { top: 0; } .kopf .schalter i:nth-child(2) { top: 8.25px; } .kopf .schalter i:nth-child(3) { top: 16.5px; }
.menu-offen .kopf .schalter i:nth-child(1) { transform: translateY(8.25px) rotate(45deg); }
.menu-offen .kopf .schalter i:nth-child(2) { opacity: 0; }
.menu-offen .kopf .schalter i:nth-child(3) { transform: translateY(-8.25px) rotate(-45deg); }

/* Vollbild-Menü (Handy) */
.voll { position: fixed; inset: 0; z-index: 999; background: var(--swatch-var-5803); color: var(--swatch-var-3854);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; visibility: hidden; opacity: 0; transition: opacity .5s, visibility .5s; }
.voll a.gross { font-family: "InterTight-Light", "Helvetica Neue", Arial, sans-serif; font-size: 38px; line-height: 1.3; letter-spacing: .02em;
	text-transform: uppercase; color: inherit; text-decoration: none; opacity: 0; transition: opacity .3s; }
.voll .unten { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 22px; opacity: 0; transition: opacity .3s; }
.voll .sozial { display: flex; gap: 22px; font-family: "InterTight-Regular", Arial, sans-serif; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; }
.voll .sozial a { color: inherit; opacity: .7; text-decoration: none; font-family: "InterTight-Regular", Arial, sans-serif; }
.menu-offen .voll { visibility: visible; opacity: 1; }
.menu-offen .voll a.gross, .menu-offen .voll .unten { opacity: 1; transition: opacity 1s; }
.menu-offen .voll a.gross:nth-child(1) { transition-delay: .15s; } .menu-offen .voll a.gross:nth-child(2) { transition-delay: .2s; }
.menu-offen .voll a.gross:nth-child(3) { transition-delay: .25s; } .menu-offen .voll a.gross:nth-child(4) { transition-delay: .3s; }
.menu-offen .voll a.gross:nth-child(5) { transition-delay: .35s; } .menu-offen .voll a.gross:nth-child(6) { transition-delay: .4s; }
.menu-offen .voll .unten { transition-delay: .5s; }
.menu-offen .kopf { color: var(--swatch-var-3854); background: transparent; }
.menu-offen .kopf .leiste { border-bottom-color: rgba(253, 250, 246, .22); }
.menu-offen .kopf .logo .hell { opacity: 1; }
.menu-offen .kopf .logo .dunkel { opacity: 0; }
.kopf .logo .dunkel { transition: opacity .4s; }
html.menu-offen, html.menu-offen body { overflow: hidden; }

@media (max-width: 991px) {
	.kopf nav { display: none; }
	.kopf .schalter { display: block; }
	.kopf .leiste { height: 64px; }
	.kopf .logo img { height: 26px; }
	.kopf-platz { height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
	.kopf, .kopf *, .voll, .voll * { transition: none !important; }
}

/* Korrekturen nach Sichtprüfung (14.10.): Website-Linkfarben (style.css) überschrieben die helle Schrift im Vollbild-Menü;
   der Blocs-„nach oben“-Knopf lag über dem offenen Menü */
.voll a.gross, .voll .sozial a { color: var(--swatch-var-3854) !important; }
.kopf nav a { color: var(--swatch-var-5803) !important; }
@media (pointer: fine) { .kopf nav a:hover { color: var(--swatch-var-2425) !important; } }
.menu-offen .scrollToTop { display: none !important; }

/* „Let's talk“-Knopf bleibt in der Kopfzeile (Thomas 14.10.: „den conversations button im menu möchte ich behalten“) */
.kopf .rechts { display: flex; align-items: center; gap: 22px; position: relative; z-index: 2; }
.kopf nav { margin-left: auto; margin-right: 34px; }
.kopf .reden { white-space: nowrap; }
.menu-offen .kopf .reden { opacity: 0; pointer-events: none; transition: opacity .3s; }
@media (max-width: 991px) { .kopf .reden { font-size: 13px; padding: 6px 12px; } }
@media (max-width: 360px) { .kopf .reden { display: none; } }

/* Thomas 14.10.: Streifen „wenn, dann in grün“; beim langsamen Scrollen verschwand das Menü zu spät → schneller, aber sehr weich;
   „der strich sollte sofort verschwinden“ → Linie geht beim Ausblenden ohne Übergang weg und kommt erst nach dem Hereingleiten zurück. */
.kopf { transition: visibility .55s, opacity .45s ease-out, transform .55s cubic-bezier(.33, 1, .68, 1), background-color .3s; }
.kopf .leiste { border-bottom-color: var(--swatch-var-2425); transition: border-color .4s ease .35s; }
.kopf.hidden .leiste { border-bottom-color: transparent; transition: none; }

/* ===== Handy-Menü (Thomas 16.10.): Kreis/Vorhang mit nummerierten Linien verworfen („klebt oben, unten halber Platz leer, 2 Striche“).
   Zwei neue Varianten, Umschalter unten links (nur Handy, vorübergehend):
   K = helle Karte gleitet von unten hoch (Daumenbereich), Seite dahinter abgedunkelt, Links in Fraunces, oben 30-px-Ecken wie die Fotos.
   V = bisheriges dunkles Vollbild-Menü verfeinert: Links über die Höhe verteilt, steigen auf wie die Überschrift, Kontakt unten fest,
       keine Nummern, keine Trennlinien (nur die Linie unter dem Logo). Desktop unverändert. ===== */
@media (max-width: 991px) {
	.voll .nr { display: none; }
	.voll-liste { display: flex; flex-direction: column; }
	.voll a.gross { opacity: 1 !important; transition: none !important; text-decoration: none; }
	.voll a.gross .maske { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
	.voll a.gross .wort { display: inline-block; transform: translateY(110%); transition: transform .3s cubic-bezier(.44, 0, .28, .99); }
	.menu-offen .voll a.gross .wort { transform: none; transition: transform .8s cubic-bezier(.44, 0, .28, .99) calc(.3s + var(--n) * .06s); }
	.voll .unten { opacity: 0; transform: translateY(12px); transition: opacity .25s, transform .25s; }
	.menu-offen .voll .unten { opacity: 1; transform: none; transition: opacity .7s .75s, transform .7s .75s; }
	.voll .direkt { display: flex; flex-wrap: wrap; gap: 6px 20px; }
	.voll .direkt a, .voll .sozial a { text-decoration: none; }
	.voll .sozial { display: flex; flex-wrap: wrap; gap: 8px 18px; }

	/* ---------- V: dunkles Vollbild, verteilt ---------- */
	html.menu-v .voll { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 64px 12px 28px; gap: 0;
		opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s linear .45s; }
	html.menu-v.menu-offen .voll { opacity: 1; visibility: visible; transition: opacity .45s, visibility 0s; }
	html.menu-v .voll-liste { flex: 1; justify-content: center; align-items: center; gap: clamp(4px, 1.6vh, 16px); padding: 24px 0; }
	html.menu-v .voll a.gross { font-family: "InterTight-Light", "Helvetica Neue", Arial, sans-serif; font-size: clamp(30px, 9vw, 40px); line-height: 1.15; letter-spacing: .03em; text-transform: uppercase; text-align: center; }
	html.menu-v .voll a.gross.aktiv .wort { color: var(--swatch-var-2425); }
	html.menu-v .voll .unten { align-items: center; gap: 16px; margin: 0; }
	html.menu-v .voll .direkt { justify-content: center; }
	html.menu-v .voll .direkt a { font-family: "InterTight-Light", Arial, sans-serif; font-size: 17px; color: var(--swatch-var-3854) !important; }
	html.menu-v .voll .sozial { justify-content: center; }

}
@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
	.voll a.gross .wort, .voll .unten { transform: none !important; opacity: 1 !important; }
}

/* Variante 2 = Thomas' Wahl „mein erster Vorschlag“ (16.10.): Kreis aus dem Menü-Knopf + nummerierte Links + Direkt-Kontakt –
   diesmal über die Höhe verteilt (Liste mittig, Kontakt unten fest) und ohne Doppelstrich oben (keine Linie über dem ersten Link). */
@media (max-width: 991px) {
	html.menu-v .voll { opacity: 1; align-items: stretch; padding: 64px 12px 28px;
		clip-path: circle(0px at var(--mx, 360px) var(--my, 32px)); transition: clip-path .75s cubic-bezier(.65, 0, .35, 1), visibility 0s linear .75s; }
	html.menu-v.menu-offen .voll { opacity: 1; clip-path: circle(150vmax at var(--mx, 360px) var(--my, 32px)); transition: clip-path .8s cubic-bezier(.65, 0, .35, 1), visibility 0s; }
	html.menu-v .voll-liste { align-items: stretch; gap: 0; }
	html.menu-v .voll a.gross { display: grid; grid-template-columns: 46px 1fr; align-items: baseline; text-align: left; padding: clamp(8px, 1.6vh, 14px) 0;
		font-size: clamp(28px, 8.4vw, 36px); border-bottom: 1px solid rgba(253, 250, 246, .12); }
	html.menu-v .voll a.gross:last-child { border-bottom: 0; }
	html.menu-v .voll .nr { display: block; font-family: "FrauncesFein", Georgia, serif; font-weight: 300; font-size: 16px; color: var(--swatch-var-2425); text-transform: none; opacity: 0; transition: opacity .3s; }
	html.menu-v.menu-offen .voll .nr { opacity: 1; transition: opacity .6s calc(.45s + var(--n) * .06s); }
	html.menu-v .voll .unten { align-items: flex-start; }
	html.menu-v .voll .direkt, html.menu-v .voll .sozial { justify-content: flex-start; }
}

/* Unterer Bereich Handy-Menü (Thomas 16.10.: „email, whatsapp und die sm links nicht gut dargestellt“):
   E-Mail + WhatsApp als zwei gleich breite Knöpfe mit Symbol, Social als runde Symbol-Knöpfe (Symbole wie in der Fußzeile). */
@media (max-width: 991px) {
	html.menu-v .voll .unten { width: 100%; gap: 14px; }
	html.menu-v .voll .unten > .btn { align-self: stretch; text-align: center; }
	html.menu-v .voll .direkt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
	html.menu-v .voll .direkt a { display: flex; align-items: center; justify-content: center; gap: 9px; height: 46px; border: 1px solid rgba(253, 250, 246, .22); border-radius: 6px;
		font-family: "InterTight-Light", Arial, sans-serif; font-size: 16px; color: var(--swatch-var-3854) !important; }
	html.menu-v .voll .direkt a svg { color: var(--swatch-var-2425); flex: none; }
	html.menu-v .voll .sozial { display: flex; gap: 10px; justify-content: flex-start; }
	html.menu-v .voll .sozial a { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(253, 250, 246, .22);
		color: var(--swatch-var-3854) !important; opacity: 1; }
	@media (pointer: fine) { html.menu-v .voll .direkt a:hover, html.menu-v .voll .sozial a:hover { border-color: var(--swatch-var-2425); } }
}
/* kleine Handys (iPhone SE, 568 px hoch): enger, damit alles ohne Scrollen passt */
@media (max-width: 991px) and (max-height: 620px) {
	html.menu-v .voll { padding-top: 60px; padding-bottom: 16px; }
	html.menu-v .voll a.gross { font-size: 25px; padding: 5px 0; }
	html.menu-v .voll .unten { gap: 10px; }
	html.menu-v .voll .direkt a { height: 40px; }
	html.menu-v .voll .sozial a { width: 38px; height: 38px; }
}
@media (max-width: 991px) { html.menu-v .voll .unten > .btn { display: flex; justify-content: center; align-items: center; } }
/* Thomas 16.10.: runde Symbole links unter den zentrierten Kacheln „nicht gut“, Symbole „moderner/zarter“ →
   Social als vier gleich breite Kacheln (gleiche Höhe/Rahmen wie E-Mail/WhatsApp, bündig), alle Symbole dünne Linien (1,25 px). */
@media (max-width: 991px) {
	html.menu-v .voll .sozial { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; }
	html.menu-v .voll .sozial a { width: auto; height: 46px; border-radius: 6px; color: var(--swatch-var-3854) !important; }
	html.menu-v .voll .direkt a svg { color: var(--swatch-var-2425); }
}
@media (max-width: 991px) and (max-height: 620px) { html.menu-v .voll .sozial a { width: auto; height: 40px; } }
/* „Let's talk“ als Überschrift über den Kontakt-Kacheln statt als Knopf (Thomas 16.10.: „lets talk ist eine überschrift, oder?“) –
   wie die Fragen auf der Startseite: Fraunces Light, grün. */
.voll-titel { display: none; }
@media (max-width: 991px) {
	html.menu-v .voll .voll-titel { display: block; margin: 0 0 2px; font-family: "FrauncesFein", Georgia, serif !important; font-weight: 300; font-size: 24px; line-height: 1.2; color: var(--swatch-var-2425) !important; }
}
@media (max-width: 991px) and (max-height: 620px) { html.menu-v .voll .voll-titel { font-size: 20px; } }

/* Unterer Bereich, Thomas 16.10.: „zu viel an rahmen und kacheln“ → Variante B gewählt: „Let's talk.“ + EINE Reihe mit sechs feinen
   Symbolen ohne Rahmen, gleichmäßig über die Breite. Animation wie der Rest: Überschrift steigt aus ihrer Zeile, dann die Symbole
   nacheinander von links nach rechts (--k = Reihenfolge). */
@media (max-width: 991px) {
	html.menu-v .voll .unten { display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; gap: 14px 0; width: 100%; opacity: 1; transform: none; transition: none; }
	html.menu-v .voll .voll-titel { grid-column: 1 / -1; }
	html.menu-v .voll .direkt, html.menu-v .voll .sozial { display: contents; }
	html.menu-v .voll .direkt a, html.menu-v .voll .sozial a { display: flex; align-items: center; justify-content: center; width: auto; height: 44px; padding: 0; border: 0; border-radius: 0;
		color: var(--swatch-var-3854) !important; opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; }
	html.menu-v .voll .direkt a span { display: none; }
	html.menu-v .voll .unten svg { width: 24px; height: 24px; color: inherit !important; }
	html.menu-v .voll .voll-titel .maske { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
	html.menu-v .voll .voll-titel .wort { display: inline-block; transform: translateY(110%); transition: transform .3s cubic-bezier(.44, 0, .28, .99); }
	html.menu-v.menu-offen .voll .voll-titel .wort { transform: none; transition: transform .8s cubic-bezier(.44, 0, .28, .99) .7s; }
	html.menu-v.menu-offen .voll .direkt a, html.menu-v.menu-offen .voll .sozial a { opacity: 1; transform: none;
		transition: opacity .6s calc(.9s + var(--k) * .06s), transform .6s cubic-bezier(.44, 0, .28, .99) calc(.9s + var(--k) * .06s); }
	@media (pointer: fine) { html.menu-v .voll .unten a:hover { color: var(--swatch-var-2425) !important; } }
}
@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
	html.menu-v .voll .unten a, html.menu-v .voll .voll-titel .wort { opacity: 1 !important; transform: none !important; }
}
/* Symbolreihe bündig: erstes Symbol an der linken Kante (wie „Let's talk.“), letztes an der rechten, dazwischen gleichmäßig */
@media (max-width: 991px) {
	html.menu-v .voll .unten { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; }
	html.menu-v .voll .voll-titel { flex: 0 0 100%; }
	html.menu-v .voll .direkt a, html.menu-v .voll .sozial a { width: 40px; }
	html.menu-v .voll .direkt a:first-child { justify-content: flex-start; }
	html.menu-v .voll .sozial a:last-child { justify-content: flex-end; }
}
/* gleiche Abstände: Kästchen so breit wie das Symbol, Tippfläche per unsichtbarem Rand vergrößert */
@media (max-width: 991px) {
	html.menu-v .voll .direkt a, html.menu-v .voll .sozial a { width: 24px; position: relative; justify-content: center !important; }
	html.menu-v .voll .direkt a::before, html.menu-v .voll .sozial a::before { content: ""; position: absolute; inset: 0 -12px; }
}

/* Schließen als Vorhang (18.10., gehört zu js/menu-fein.js zu()): dunkle Fläche gleitet von oben nach unten weg, Kopfzeile + Seitenkopf kommen zuerst
   wieder zum Vorschein; Links blenden dabei schon aus. Öffnen bleibt der Kreis aus dem Knopf. */
@media (max-width: 991px) {
	html.menu-v.menu-schliesst.menu-offen .voll { clip-path: inset(0 0 0 0); transition: none; }
	html.menu-v.menu-schliesst:not(.menu-offen) .voll { visibility: hidden; clip-path: inset(100% 0 0 0); transition: clip-path .85s cubic-bezier(.65, 0, .35, 1) .1s, visibility 0s linear .95s; } /* Thomas 18.10.: „eine spur langsamer“ (vorher .6s) */
}
/* Vorhang über der neuen Seite (18.10.): Seite startet unter der dunklen Fläche (ohne Links), dann .menu-schliesst → gleitet nach unten weg */
@media (max-width: 991px) {
	html.menu-v.vorhang-start .voll { visibility: visible; clip-path: inset(0 0 0 0); transition: none; }
}