/* Vaikuntha Start — Stil nur für Tab-Leiste (#tabs) und Blatt „Mehr“ (#menue). Läuft auf der neuen Startseite und als
   Schicht über den bisherigen BeTheme-Unterseiten. Deshalb: eigene Farbwerte an den beiden Elementen, alle Regeln an
   #tabs / #menue gebunden (BeTheme schlägt flache Selektoren), nichts greift in die Seite darunter.
   Dunkel ist allein html.vk-dark — nie prefers-color-scheme. */
#kopf, #tabs, #menue {
	--ink: #26372b; --green: #40583d; --green-d: #2c4029; --sage: #e9ede3; --paper: #faf9f5; --earth: #83603b;
	--sand: #efe8dc; --line: #d4d8cc; --muted: #566052; --auf-gruen: #fff; --glas: rgba(250, 249, 245, .86);
	--tabs: 58px; --unten: env(safe-area-inset-bottom, 0px);
	box-sizing: border-box; font-family: "Segoe UI", system-ui, Arial, sans-serif; line-height: 1.4; color: var(--ink);
}
html.vk-dark #kopf, html.vk-dark #tabs, html.vk-dark #menue {
	--ink: #e8ece2; --green: #a9c79b; --green-d: #c2dab6; --sage: #222b22; --paper: #161613; --earth: #d3b18a;
	--sand: #1e241d; --line: #364135; --muted: #a9b3a3; --auf-gruen: #142015; --glas: rgba(22, 22, 19, .86);
}
#kopf *, #tabs *, #menue * { box-sizing: border-box; }
#tabs a, #tabs button, #menue a, #menue button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; font-family: inherit; color: var(--ink); }
#tabs a:focus-visible, #tabs button:focus-visible, #menue a:focus-visible, #menue button:focus-visible, #menue input:focus-visible { outline: 3px solid var(--earth); outline-offset: 3px; }

/* ---- Tab-Leiste: schwebt unten in der Daumenzone, nur Wörter, die Marke gleitet zum aktiven Punkt. ---- */
#tabs { display: none; position: fixed; z-index: 2147482000; left: 50%; bottom: calc(10px + var(--unten)); transform: translateX(-50%); width: min(calc(100% - 20px), 520px); height: var(--tabs); margin: 0; padding: 0 5px; background: var(--glas); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 10px 34px rgba(20, 30, 20, .2); }
#tabs .tabs-marke { position: absolute; left: 0; top: 5px; bottom: 5px; width: var(--w, 0); transform: translateX(var(--x, 0)); background: var(--green); border-radius: 999px; transition: transform .28s cubic-bezier(.3, .8, .3, 1), width .28s; pointer-events: none; }
#tabs.ohne-ort .tabs-marke { display: none; }
#tabs a, #tabs button { position: relative; flex: 1 1 0; min-width: 48px; height: auto; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 999px; box-shadow: none; text-decoration: none; text-transform: none; font-size: clamp(12px, 3.3vw, 14px); font-weight: 600; letter-spacing: -.01em; line-height: 1; cursor: pointer; white-space: nowrap; transition: color .2s; }
#tabs .aktiv { color: var(--auf-gruen); }
@media (max-width: 900px) { #tabs { display: flex; } }

/* ---- Blatt „Mehr“ — <dialog> im Top-Layer, liegt damit über allem (auch über BeTheme-Stapelkontexten). ---- */
#menue { border: 0; padding: 0; background: var(--paper); width: min(460px, 100vw); max-width: none; height: 100dvh; max-height: none; margin: 0 0 0 auto; flex-direction: column; box-shadow: -20px 0 60px rgba(20, 30, 20, .18); font-size: 17px; text-align: left; }
#menue[open] { display: flex; animation: vks-rein .28s cubic-bezier(.3, .8, .3, 1); }
#menue::backdrop { background: rgba(20, 30, 22, .42); }
@keyframes vks-rein { from { transform: translateX(40px); opacity: 0; } }
@keyframes vks-hoch { from { transform: translateY(60px); opacity: 0; } }
#menue [hidden] { display: none !important; }
#menue ul { list-style: none; margin: 0; padding: 0; }
#menue li { margin: 0; padding: 0; list-style: none; }
#menue li::before, #menue li::after { content: none; }
#menue p { margin: 0; }
#menue .menue-kopf { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px 6px; }
#menue .menue-kopf h2 { font-size: 26px; font-weight: 500; line-height: 1.1; letter-spacing: -.03em; margin: 0; padding: 0; color: var(--ink); text-transform: none; }
#menue .menue-zu { background: none; border: 1px solid var(--line); border-radius: 0; min-height: 44px; padding: 0 16px; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: none; }
#menue .menue-zu:hover { background: var(--sand); }
#menue #menue-suche { width: auto; margin: 12px 26px 4px; min-height: 50px; padding: 0 16px; font: inherit; font-size: 16px; color: var(--ink); background: var(--sage); border: 1px solid var(--line); border-radius: 0; box-shadow: none; }
#menue .menue-inhalt { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 26px 20px; }
#menue .menue-gruppe { padding: 18px 0 8px; margin: 0; border-bottom: 1px solid var(--line); }
#menue .menue-gruppe h3 { font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .15em; text-transform: uppercase; color: var(--earth); margin: 0 0 6px; padding: 0; }
#menue .menue-gruppe a { display: flex; align-items: center; min-height: 48px; padding: 0; text-decoration: none; font-size: 19px; font-weight: 400; letter-spacing: -.01em; }
#menue .menue-gruppe a:hover { text-decoration: underline; }
#menue .menue-gruppe.breit { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
#menue .menue-gruppe.breit h3 { grid-column: 1 / -1; }
#menue .menue-thema { padding-bottom: 10px; }
#menue .menue-thema p { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
#menue .menue-thema a { font-size: 16px; min-height: 44px; }
#menue .menue-gruppe.mitglied { background: var(--sage); margin: 8px -26px 0; padding: 16px 26px 8px; border-bottom: 0; }
#menue .menue-gruppe.mitglied ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
#menue .menue-gruppe.mitglied a { font-size: 16px; }
#menue .menue-leer { padding: 20px 0; }
#menue .menue-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 26px calc(14px + var(--unten)); border-top: 1px solid var(--line); background: var(--sage); }
#menue .menue-fuss a.button { flex: 1 1 100%; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; padding: 13px 23px; background: var(--green); color: var(--auf-gruen); border: 1px solid transparent; border-radius: 0; box-shadow: none; text-decoration: none; font-size: 15px; font-weight: 600; line-height: 1.2; }
#menue .menue-fuss a.button:hover { background: var(--green-d); }
#menue .abmelden { display: flex; align-items: center; min-height: 46px; font-size: 14px; font-weight: 600; }
#menue .sprache { display: flex !important; border: 1px solid var(--line); }
#menue .sprache button { background: none; border: 0; border-radius: 0; min-width: 44px; min-height: 44px; margin: 0; padding: 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; line-height: 1; cursor: pointer; color: var(--muted); box-shadow: none; }
#menue .sprache button[aria-pressed="true"] { background: var(--green); color: var(--auf-gruen); }
#menue .thema { background: none; border: 1px solid var(--line); border-radius: 0; min-height: 46px; margin: 0 0 0 auto; padding: 0 14px; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: none; }
@media (max-width: 900px) {
	#menue { width: 100vw; height: auto; max-height: 88dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; box-shadow: 0 -20px 60px rgba(20, 30, 20, .25); }
	#menue[open] { animation-name: vks-hoch; }
	#menue .menue-kopf::before { content: ""; position: absolute; left: 50%; top: 9px; width: 44px; height: 4px; margin-left: -22px; border-radius: 4px; background: var(--line); }
	#menue .menue-kopf, #menue .menue-inhalt, #menue .menue-fuss { padding-left: 20px; padding-right: 20px; }
	#menue #menue-suche { margin-left: 20px; margin-right: 20px; }
	#menue .menue-gruppe.mitglied { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
	/* Unten gehört der Platz der Tab-Leiste: Cookie-Hinweis und Shiva sitzen darüber, nie darauf. */
	.cmplz-cookiebanner { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; max-height: calc(100dvh - 102px - env(safe-area-inset-bottom, 0px)) !important; overflow-y: auto; }
	#vk-shiva { bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---- Kopfzeile (#kopf): Logo = Start. Ab 901 px mit Hauptnavigation; am Handy nur Logo, Status und Sprache —
        sie weicht beim Herunterscrollen, die Tab-Leiste bleibt. ---- */
#kopf { height: 76px; margin: 0; padding: 0 5%; display: flex; align-items: center; gap: 28px; background: var(--glas); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 2147481000; border-bottom: 1px solid var(--line); transition: transform .3s; font-size: 17px; text-align: left; }
#kopf.weg { transform: translateY(-100%); }
body.admin-bar #kopf { top: 32px; }
#kopf a, #kopf button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; font-family: inherit; color: var(--ink); }
#kopf a:focus-visible, #kopf button:focus-visible { outline: 3px solid var(--earth); outline-offset: 3px; }
#kopf .marke { position: relative; display: flex; align-items: center; gap: 18px; margin-right: auto; }
#kopf .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-height: 48px; }
#kopf .brand img { width: 64px; height: 56px; max-width: none; margin: 0; object-fit: contain; mix-blend-mode: multiply; }
/* Dunkel: JPG auf Weiß → umgekehrt + Farbton zurückgedreht (Weiß wird Schwarz, Grün wird hell), „screen“ lässt das
   Schwarz im dunklen Kopf aufgehen. Kein heller Kasten, kein Kreis dahinter (QA Andreas, 13.10.2026). */
html.vk-dark #kopf .brand img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
#kopf .brand span { font-size: 25px; font-weight: 500; line-height: 1; letter-spacing: -.04em; }
/* Status: Punkt + Wort. Die Farbe trägt nie allein die Aussage, das Wort steht immer dabei. */
#kopf .status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--muted); white-space: nowrap; }
#kopf .status[hidden] { display: none; }
#kopf .status i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
#kopf .status[data-farbe="green"] i { background: #3f8f3a; }
#kopf .status[data-farbe="yellow"] i { background: #c79a1e; }
#kopf .status[data-farbe="blue"] i { background: #2f7fb5; }
#kopf .status[data-farbe="red"] i { background: #b4472f; }
#kopf .kopf-nav { display: flex; align-items: center; gap: 30px; margin: 0; }
#kopf .kopf-nav > a, #kopf .mehr-knopf { height: auto; margin: 0; padding: 12px 0; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none; text-decoration: none; text-transform: none; font-size: 15px; font-weight: 400; line-height: 1.2; letter-spacing: 0; cursor: pointer; }
#kopf .kopf-nav > a:hover, #kopf .mehr-knopf:hover { border-bottom-color: var(--line); }
#kopf .kopf-nav > a.aktiv { border-bottom-color: var(--green); font-weight: 600; }
#kopf .kopf-nav > a.button { display: inline-flex; align-items: center; min-height: 48px; padding: 13px 23px; background: var(--green); color: var(--auf-gruen); border: 1px solid transparent; font-weight: 600; }
#kopf .kopf-nav > a.button:hover { background: var(--green-d); border-color: transparent; }
#kopf .kopf-nav > a.konto { border: 1px solid var(--ink); padding: 9px 16px; font-weight: 600; }
#kopf .kopf-nav > a.konto:hover { background: var(--sand); border-color: var(--ink); }
/* !important: eine Regel der bisherigen Seite blendet fremde Sprachschalter aus (ein Schalter, ein Ort) — dieser ist jetzt der eine. */
#kopf .sprache { display: flex !important; border: 1px solid var(--line); }
#kopf .sprache button { background: none; border: 0; border-radius: 0; min-width: 44px; min-height: 44px; margin: 0; padding: 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; line-height: 1; cursor: pointer; color: var(--muted); box-shadow: none; }
#kopf .sprache button[aria-pressed="true"] { background: var(--green); color: var(--auf-gruen); }
@media (max-width: 1000px) { #kopf .kopf-nav { gap: 20px; } }
/* 0.6.1: zwischen 901 und 1180 px brauchte der Kopf bis zu 1110 px, der Sprachschalter ragte hinaus (Querlauf). */
@media (min-width: 901px) and (max-width: 1180px) {
	#kopf, #kopf .kopf-nav { gap: 14px; }
	#kopf .kopf-nav > a, #kopf .mehr-knopf { font-size: 14px; }
	#kopf .kopf-nav > a.button { min-height: 44px; padding: 10px 14px; }
	#kopf .kopf-nav > a.konto { padding: 8px 11px; }
	#kopf .sprache button { min-width: 34px; }
}
@media (min-width: 901px) and (max-width: 1020px) { #kopf { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 900px) {
	#kopf { height: 64px; }
	#kopf .kopf-nav { display: none; }
	#kopf .brand img { width: 52px; height: 46px; }
	#kopf .brand span { font-size: 22px; }
}
@media (max-width: 782px) { body.admin-bar #kopf { top: 46px; } }
@media (max-width: 700px) {
	#kopf { gap: 10px; }
	#kopf .brand { gap: 8px; }
	/* Am Handy steht der Status klein unter dem Namen statt daneben — kostet keine Breite und keine Zeile. */
	#kopf .status { position: absolute; left: 60px; bottom: 1px; font-size: 12px; gap: 5px; }
	#kopf .status i { width: 7px; height: 7px; }
	#kopf.mit-status .brand span { transform: translateY(-7px); }
}

/* ---- Schicht über den bisherigen Unterseiten (body.vks-schicht): ein Kopf und ein Menü, nicht zwei. Der Kopf des
        Themes samt altem Menü tritt ganz zurück, ebenso was jetzt im neuen Kopf oder im Blatt steht: Status-Anzeige,
        schwebender Mitglieder-Knopf (Gruppe „Mein Bereich“ im Blatt), schwebender Hell/Dunkel-Knopf (im Blatt). ---- */
body.vks-schicht #Header_wrapper,
body.vks-schicht #vk-status-badge,
body.vks-schicht .vknav-overlay,
body.vks-schicht .vknav-burger-fixed,
body.vks-schicht .vk-mm-btn,
body.vks-schicht #vk-mm-panel,
body.vks-schicht .vk-dm-toggle { display: none !important; }
@media (max-width: 900px) {
	body.vks-schicht { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 700px) { #kopf { padding-left: 16px; padding-right: 16px; } }

/* ---- 13.10.2026: Was fremde Plugins unten fest anheften, lag unter der Tab-Leiste. Eine Stelle, eine Höhe:
        --vks-leiste = Leiste (58) + ihr Abstand zum Rand (10) + Luft (10) + sicherer Bereich; ab 901 px ist sie 0.
        Belegt am Code: Camp-Preisleiste „.vk-sc .vkw-pricebar“ und Camp-Hinweis „#vk-sc-banner“ (Inline-Stil, deshalb
        !important) und Programm-Leiste „.vk-scp-bar“ (alle vaikuntha-sommercamp.php, fixed, bottom:0), Board-Meldung
        „.vk-bd-toast“ (board.css, bottom:24px). Die Insel-Bühne „.vk-in“ reicht bis zum Fensterrand (Höhe aus 100dvh);
        sie endet jetzt über der Leiste, damit Fenster und Knöpfe in ihr frei bleiben — nicht im Vollbild und nicht in
        der Shiva-Ansicht, die das ganze Fenster nehmen. ---- */
:root { --vks-leiste: 0px; }
@media (max-width: 900px) {
	:root { --vks-leiste: calc(78px + env(safe-area-inset-bottom, 0px)); }
	body.vks-schicht .vk-sc .vkw-pricebar,
	body.vks-schicht #vk-sc-banner,
	body.vks-schicht .vk-scp-bar { bottom: var(--vks-leiste) !important; }
	body.vks-schicht .vk-bd-toast { bottom: calc(24px + var(--vks-leiste)) !important; }
	body.vks-schicht .vk-in:not(:fullscreen):not(.ansicht-shiva) { height: min(calc(100dvh - var(--vk-in-oben, 140px) - 8px - var(--vks-leiste)), 1200px); }
}
@media (prefers-reduced-motion: reduce) {
	#kopf, #tabs *, #menue, #menue * { animation: none !important; transition: none !important; }
}