/* ==========================================================================
   Kopfleiste von mitdeinemkind.de - Logo, Sektions-Pille mit Menue "Inhalt", Konto-Knopf, Menueknopf und Supermenue
   --------------------------------------------------------------------------
   Seit 2026-10-28 ein eigener Baustein (bis dahin in mdk.css): die Website laedt ihn nach mdk.css (rahmen/kopf.html), die Seiten mit
   eigenem Rahmen auf termine.mitdeinemkind.de - Mitgliederbereich, Kasse, Anmeldung, Raum, Stimmen-Formular, SMS-Seite - ebenso
   (website.termine_rahmen; Bilal: "auch sind die mitglieder seiten an den neuen stil angepasst - sowie andere seiten die noch nicht
   beachtet wurden"). Das Skript dazu: kopfleiste.js. Die Masse unten gelten nur, wo die Seite sie nicht selbst setzt (:where hat keine
   Gewichtung - auf der Website gewinnt :root aus mdk.css, ueberall gewinnt die Palette des Themes, <style id="mdk-farben">).
   ========================================================================== */
:where(:root){
  /* --- Abstand: 4-px-Basis ------------------------------------------------ */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;   --s5:1.5rem;
  --s6:2rem;   --s7:3rem;   --s8:4rem;   --s9:6rem;   --s10:8rem;
  --pad:1.25rem;                       /* die eine linke Kante */
  /* Kopfleiste (19./21.09., Bilal in vier Runden „groesser“): das Logo ist 360 px breit, auf schmalen Handys so breit,
     wie neben dem Menueknopf Platz ist (44 + 16 Abstand + 2 x 20 Rand). Die Leiste waechst mit: Logohoehe (300/1330 der
     Breite) + 14 px Luft — 76 px bei 375, 95 px ab 460 px Breite.
     Beim Scrollen werden beide kompakt (21.09.): Logo auf 80 % (scale, s. u.), Leiste auf 80 % der Logohoehe + 12 px
     Luft. Prozent statt fester Groesse, damit es auch dort schrumpft, wo die Breite schon gedeckelt ist (Handy,
     Startseite mit Navigation). */
  --logo-b:min(360px, 100vw - 100px);
  --logo-klein:calc(var(--logo-b) * .8);
  --kopf:calc(var(--logo-b) * .2256 + 14px);
  --kopf-klein:calc(var(--logo-klein) * .2256 + 12px);

  /* --- Typoskala 1.25 ----------------------------------------------------- */
  --t--2:.75rem;    /* 12 — Untergrenze fuers Handy (Bilal, 2026-09-09) */
  --t--1:.8125rem;  /* 13 */
  --t-0:.9375rem;   /* 15 */
  --t-1:1.0625rem;  /* 17  Fliesstext */
  --t-2:1.1875rem;  /* 19 */
  --t-3:1.5rem;     /* 24 */
  --t-4:1.875rem;   /* 30 */
  --t-5:2.375rem;   /* 38 */
  --t-6:3rem;       /* 48 */

  /* --- Farbe: „Puder" ------------------------------------------------------
     Standard seit 2026-08-31 (Entscheidung Bilal): Rose-Creme + Rosenholz,
     CTA in Beere — an die Rosetoene der Logo-Wortmarke angelehnt. Die alte
     Ton-&-Gold-Palette liegt als Vorschau in theme-ton.css (?theme=ton). */
  --paper:#FAF4F0; --paper-2:#F5EAE3; --paper-3:#EFDFD5; --card:#FFFDFB;
  --ink:#2C1C16;   --ink-2:#654A3F;   --ink-3:#987A6C;
  --dark:#3B2521;  --dark-2:#4D302A;  --dark-3:#6E463D;
  --dark-ink:#F8ECE5; --dark-ink-2:#D6B4A6;
  --clay:#A84350;  --clay-dk:#832F3B; --clay-soft:#F7E4E3;
  /* Eyebrow als eigene Toene (2026-09-03, Vorgabe Bilal): der kleine
     Versalien-Vorspann muss nicht dieselbe Lautstaerke haben wie der
     Kauf-Knopf. Standard folgt --clay bzw. --gold, Themes setzen eigene. */
  --eyebrow:var(--clay); --eyebrow-l:var(--gold);
  /* Gold sitzt auf hellem UND dunklem Grund. Ein Ton kann beides nicht gut:
     auf Hell muss er dunkel genug sein, auf dem Band hell genug. Deshalb
     zwei Tokens — --gold fuer helle Flaechen, --gold-l fuer das Dunkelband. */
  --gold-l:var(--gold);
  --rose:#E0A091;                      /* aus dem Logo */
  --gold:#C4883F;  --gold-soft:#F5EBDC;
  --line:#EADAD1;  --line-2:#DAC4B8;
  /* Knopf auf dunklem Grund (2026-09-03, Vorgabe Bilal). Der Akzent ist auf dem
     Dunkelband ein leiser Sprung — Beere auf Pflaume kommt auf rund 2:1. Ein
     heller Knopf mit Akzentschrift holt dagegen den vollen Kontrast, den die
     Palette hergibt: dieselbe Zahl wie „Weiss auf dem Knopf", nur andersherum.
     Deshalb ist SECONDARY jetzt der Standard. Drei Auspraegungen, umschaltbar
     ueber diese fuenf Marken (die Farbwerkstatt setzt sie):
       primary    Akzentflaeche, weisse Schrift   (Standard bis 2026-09-03)
       secondary  helle Flaeche, Akzentschrift    (Standard)
       outline    ohne Flaeche, heller Rand                                  */
  --btn-d-bg:#fff;
  --btn-d-bg-hover:var(--paper-2);
  --btn-d-ink:var(--clay);
  --btn-d-line:#fff;
  --btn-d-schatten:0 2px 3px rgba(0,0,0,.28),0 14px 26px -14px rgba(0,0,0,.6);

  --prose:40rem; --wide:71rem;
  --r2:8px; --r3:14px; --r4:22px;
  --sh1:0 1px 2px rgba(44,28,22,.06);
  --sh2:0 2px 4px rgba(44,28,22,.05),0 14px 32px -18px rgba(44,28,22,.3);
  --sh3:0 4px 10px rgba(44,28,22,.07),0 34px 70px -30px rgba(44,28,22,.4);

  --serif:"Newsreader","Newsreader-Ersatz","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.topbar,.topbar *,.sek-menue,.sek-menue *,.sm,.sm *,.skip,.kopf-hinweis{box-sizing:border-box}
body.locked{overflow:hidden}
/* Sprunglink fuer die Tastatur: unsichtbar, bis er den Fokus bekommt (wie in mdk.css). */
.skip{
  position:fixed;top:var(--s2);left:var(--s2);z-index:100;
  background:var(--ink);color:#fff;padding:var(--s3) var(--s4);border-radius:var(--r2);
  font-family:var(--sans);font-size:var(--t-0);font-weight:650;text-decoration:none;
  transform:translateY(-200%);
}
.skip:focus{transform:none}
/* Fuer Seiten ohne mdk.css: der Rahmen der Leiste wie .wrap-w, Bilder als Block, Schrift und Tinte der Website; das alte Logo der
   Anmeldeseiten (.logo{height:60px}) gilt hier nicht */
.topbar{color:var(--ink);font-family:var(--sans)}
.topbar > .wrap-w{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad)}
.topbar img{display:block}
.topbar .logo{height:auto}
/* Nur das Logo (Kasse, Anmeldung, Raum, Stimmen-Formular, SMS-Seite - website.kopfleiste(menue=False)): mittig ueber der einen Spalte
   dieser Seiten, wie ihr Logo vorher */
.topbar.kopf-schlicht > .wrap-w{grid-template-columns:1fr}
.topbar.kopf-schlicht .logo{justify-self:center}

/* --- Kopfzeile ----------------------------------------------------------- */
/* Glas-Kopfleiste (Bilal, 2026-09-08, behalten am 09.09.): duenner, staerker geblurrt und
   leicht gesaettigt, damit Skizzen und dunkle Baender beim Scrollen wirklich
   durchscheinen; statt der Linie ein heller Saum und ein weicher Schatten.
   Browser mit Scroll-Animationen blenden das Glas erst beim Scrollen ein —
   ganz oben liegt die Leiste nahtlos und ohne Blur auf dem Held. */
.topbar{position:sticky;top:0;z-index:40;
  background:rgba(251,246,238,.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:0;
  box-shadow:0 14px 34px -22px rgba(44,28,22,.28)}
/* Ganz oben traegt die Leiste die Farbe des Helds darunter (Bilal,
   2026-09-08): auf Seiten mit Skizzen-Held das Creme des Helds, sonst
   durchsichtig — so wirkt der Held, als reiche er bis an die Oberkante. */
.topbar{--kopf-oben:rgba(251,246,238,0)}
body:has(main > .hero-skizze:first-child) .topbar{--kopf-oben:var(--paper-2)}
@supports (animation-timeline: scroll()){
  .topbar{animation:topbar-glas linear both;animation-timeline:scroll(root);animation-range:0 120px}
  /* Ohne Scrollweg (kurze Seiten, etwa „Meine Termine“ mit einem Termin) ist die Zeitleiste inaktiv und die Animation wirkt nicht -
     dann gilt der Grundzustand, hier der von ganz oben: ohne Glas und Schatten wie jede Seite ganz oben (seit 2026-10-29, Bilal: „why has
     nav in termine shadow when we at the top but not on other mitglieder seiten?“ - vorher trugen nur kurze Seiten Glas und Schatten) */
  .topbar{background:var(--kopf-oben);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  /* Logo und Leiste schrumpfen auf demselben Scrollweg wie das Glas (Bilal, 21.09.: „on scroll down … animieren wir es
     etwas kleiner“). Ohne Scroll-Animationen bleibt beides in der grossen Groesse — wie beim Glas. */
  .topbar .wrap-w{animation:kopf-kompakt linear both;animation-timeline:scroll(root);animation-range:0 120px}
  @keyframes kopf-kompakt{from{min-height:var(--kopf)}to{min-height:var(--kopf-klein)}}
  /* Das Logo schrumpft optisch (scale), nicht ueber die Breite: auf der Startseite deckelt die Navigation seine Breite,
     dort waere eine Breiten-Animation wirkungslos geblieben. Ankerpunkt links, damit es an der Seitenkante stehen
     bleibt; der Platz rechts daneben faellt nicht auf, weil die Leiste space-between verteilt. */
  .logo{transform-origin:left center;animation:logo-kompakt linear both;animation-timeline:scroll(root);animation-range:0 120px}
  /* Schreibtisch (seit 2026-10-28): die Breite statt eines Massstabs - so gibt das kleinere Logo seinen Platz in der Leiste wirklich frei,
     und die Pille in der Mitte rueckt erst zur Seite, wo das Logo tatsaechlich endet (mit scale blieb rechts davon eine leere Flaeche) */
  @media (min-width:62rem){
    .logo{animation-name:logo-kompakt-breite}
    @keyframes logo-kompakt-breite{from{width:var(--logo-b)}to{width:var(--logo-klein)}}
  }
  @keyframes logo-kompakt{from{transform:scale(1)}to{transform:scale(.8)}}
  @keyframes topbar-glas{
    from{background:var(--kopf-oben);box-shadow:0 0 0 rgba(44,28,22,0);-webkit-backdrop-filter:blur(0) saturate(1);backdrop-filter:blur(0) saturate(1)}
    to{background:rgba(251,246,238,.6);box-shadow:0 14px 34px -22px rgba(44,28,22,.28);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
  }
  /* Video-Held (Babyzeichen-Webinar): der Held reicht unter die Leiste, die
     ganz oben durchsichtig auf dem Video liegt — Schrift, Logo und Menueknopf
     in Weiss — und beim Scrollen zum Glas mit dunkler Tinte wird.
     Nicht bei den hellen Ad-Test-Varianten ?hero=geteilt|banner|bogen|portrait (Bilal, 17.09.): der Lader setzt
     dort html.held-hell, die Leiste bleibt normal wie auf den Skizzen-Seiten. */
  html:not(.held-hell) body:has(main > .hero:not(.hero-skizze):first-child) .topbar{animation-name:topbar-glas-video;color:#fff}
  html:not(.held-hell) body:has(main > .hero:not(.hero-skizze):first-child) .topbar .logo-img{animation:topbar-logo linear both;animation-timeline:scroll(root);animation-range:0 120px}
  @keyframes topbar-glas-video{
    from{background:rgba(251,246,238,0);color:#fff;box-shadow:0 0 0 rgba(44,28,22,0);-webkit-backdrop-filter:blur(0) saturate(1);backdrop-filter:blur(0) saturate(1)}
    to{background:rgba(251,246,238,.6);color:var(--ink);box-shadow:0 14px 34px -22px rgba(44,28,22,.28);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
  }
  @keyframes topbar-logo{from{filter:brightness(0) invert(1)}to{filter:none}}
}
html:not(.held-hell) body:has(main > .hero:not(.hero-skizze):first-child) .topbar{margin-bottom:calc(-1 * var(--kopf))}
html:not(.held-hell) body:has(main > .hero:not(.hero-skizze):first-child) .topbar .nav-main a,
html:not(.held-hell) body:has(main > .hero:not(.hero-skizze):first-child) .topbar .nav-top,
html:not(.held-hell) body:has(main > .hero:not(.hero-skizze):first-child) .topbar .menu-btn{color:inherit}
html:not(.held-hell) body:has(main > .hero:not(.hero-skizze):first-child) .hero:not(.hero-skizze){min-height:100svh;padding-top:calc(var(--s7) + var(--kopf))}
/* Drei Spalten (seit 2026-10-28): Logo | Pille | Knoepfe. Die beiden aeusseren teilen sich den Platz gleich (1fr), die Pille steht darum in
   der Mitte der Leiste und waechst und schrumpft nach beiden Seiten gleich (Bilal: "i would like it to be horizontally centered and shrink
   or grow to both sides equally"). Reicht der Platz nicht fuer gleiche Seiten, bleibt das Logo ganz und die Pille rueckt etwas zur Seite. */
.topbar .wrap-w{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:0;min-height:var(--kopf)}
/* Das Logo nimmt --logo-b, gibt aber nach, wenn es eng wird (flex-shrink statt fester Breite): auf der Startseite ab 70rem
   stehen Navigation und Kasse daneben, dort bleiben ~295 px. So kann die Kopfzeile nie ueberlaufen, auch nicht mit
   breiterer Systemschrift oder einer Windows-Scrollleiste; darunter hoechstens bis 200 px. */
/* Feste Breite (seit 2026-10-28; Bilal: "we dont to shrink the logo when we dont to shrink as long we dont actually collide. we want to
   reduce unecessary motions"): vorher gab das Logo nach, sobald ein langer Sektionsname die Mitte breiter machte, und wuchs beim naechsten
   kurzen wieder. Jetzt bleibt es, und wird es eng, rueckt die Pille ein Stueck zur Seite (die Spalte des Logos ist so breit wie das Logo). */
.logo{grid-column:1;justify-self:start;display:block;text-decoration:none;width:var(--logo-b)}
/* Das Logo traegt echtes Alpha (Weiss herausgerechnet). Das fruehere
   mix-blend-mode:multiply versagte unter dem backdrop-filter der Kopfzeile
   (Stacking-Context-Isolation) — beim Scrollen stand ein weisser Kasten
   hinter dem Logo. */
/* 320 statt 220 px (Bilal, 19.09.: 264, dann 280, dann „noch groesser“) = 72,2 px hoch; Breite kommt von .logo. */
.logo img{width:100%;height:auto}
.bar-right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:var(--s3)}
.menu-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:44px;min-width:44px;
  padding:var(--s2) var(--s3);background:transparent;border:0;
  border-radius:999px;cursor:pointer;color:var(--ink);
}
@media (hover:hover){.menu-btn:hover{color:var(--clay)}}
.menu-btn .bars{display:grid;gap:3px;width:16px}
.menu-btn .bars i{display:block;height:2px;background:currentColor;border-radius:2px}

/* --- Kopfleiste: Sektion, Konto, Supermenue (seit 2026-10-28) -------------
   Bilal: "im nav immer das aktuelle sektion angezeigt ... mit einem klick darauf gibt es ein page spezifisches menu", "burger button ...
   kein seiten panel sondern ein gut animiertes card style artiges super menu", "signup/login/logout button (evt outline button)".
   Die Schublade von rechts (seit 2026-09-04) ist damit weg; ihre Gruppen stehen im Supermenue, die Sprungmarken der Seite im Menue
   "Inhalt". Alles in currentColor gemischt, damit es auf dem Video-Held (weisse Schrift) genauso traegt wie auf Papier. */
.sek[hidden],.sek-menue[hidden],.sm[hidden],.konto-knopf[hidden]{display:none}
.sek{grid-column:2;min-width:0;display:flex;align-items:center;justify-content:center;margin-inline:var(--s3)}
.sek-pille{
  display:inline-flex;align-items:center;gap:.6rem;min-height:40px;max-width:min(32rem,100%);
  padding:0 .85rem 0 .5rem;border-radius:999px;cursor:pointer;
  font-family:var(--sans);font-size:var(--t-0);font-weight:500;line-height:1.2;color:inherit;
  background:color-mix(in srgb,currentColor 4%,transparent);
  border:1px solid color-mix(in srgb,currentColor 16%,transparent);
  transition:background .2s ease,border-color .2s ease}
@media (hover:hover){.sek-pille:hover{border-color:color-mix(in srgb,currentColor 42%,transparent);background:color-mix(in srgb,currentColor 7%,transparent)}}
/* Offen: kraeftiger Rand und Flaeche, die Schrift bleibt in ihrer Farbe (bis 2026-10-28 gefuellt mit weisser Schrift - Bilal: "why is the
   text color in the inhalts menu become white after using it?": ein Name, der gerade einlief, behielt beim Schliessen das Weiss) */
.sek-pille[aria-expanded="true"]{border-color:color-mix(in srgb,currentColor 60%,transparent);background:color-mix(in srgb,currentColor 9%,transparent)}
.sek-pille:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
/* Ring: wie weit man auf der Seite ist; der Punkt in der Mitte atmet kurz, wenn die Sektion wechselt */
.sek-ring{flex:none;overflow:visible}
.sek-ring circle{fill:none;stroke-width:2.2}
.sek-ring-bahn{stroke:color-mix(in srgb,currentColor 16%,transparent)}
.sek-ring-wert{stroke:var(--clay);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .12s linear}
.sek-ring-punkt{fill:var(--clay);stroke:none;transform-origin:center;transform-box:fill-box}
.sek-ring-punkt.puls{animation:sek-puls .5s cubic-bezier(.16,1,.3,1)}
@keyframes sek-puls{40%{transform:scale(1.7)}}
/* Der Name laeuft wie ein Zaehlwerk: der alte geht nach oben (beim Zurueckscrollen nach unten), der neue kommt nach */
.sek-fenster{position:relative;display:block;min-width:0;overflow:hidden;height:1.4em}
.sek-name{display:block;line-height:1.4em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Waehrend des Wechsels stehen beide Namen in voller Laenge, das Fenster schneidet ab: mit Auslassungspunkten stuende der neue Name als
   "Wo stehst du gera…" da, bis das Fenster fertig gewachsen ist (Bilal: "why when we scroll down and pass sections ... we get to the
   section names with 3 dots before the full section name is readable?"). "…" nur noch, wenn ein Name wirklich nicht in die Pille passt. */
.sek-name.alt,.sek-name.laeuft{width:max-content;max-width:none;text-overflow:clip}
.sek-name.alt{position:absolute;left:0;top:0}
.sek-pille .chev{flex:none;opacity:.6;transform:rotate(90deg);transition:transform .2s ease}
.sek-pille[aria-expanded="true"] .chev{transform:rotate(-90deg);opacity:.9}

/* Menue "Inhalt" - am Schreibtisch eine Karte unter der Pille, wie das Inhaltsverzeichnis der Blogartikel: Nummer und Name,
   die aktuelle Sektion hervorgehoben, gelesene mit Haken */
.sek-menue{
  position:fixed;z-index:65;top:var(--sek-oben,84px);left:var(--sek-links,16px);
  width:min(23.5rem,calc(100vw - 2 * var(--s4)));max-height:calc(100dvh - var(--sek-oben,84px) - var(--s5));
  display:flex;flex-direction:column;
  background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--r4);box-shadow:var(--sh3);
  opacity:0;transform:translateY(-8px) scale(.97);transform-origin:var(--sek-ursprung,2rem) 0;
  transition:opacity .16s ease,transform .32s cubic-bezier(.16,1,.3,1)}
.sek-menue.offen{opacity:1;transform:none}
.sek-griff{display:none}
.sek-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);padding:var(--s5) var(--s5) var(--s3)}
.sek-titel,.sek-stand{margin:0;font-family:var(--sans);font-size:var(--t--1);line-height:1;font-weight:700;color:var(--ink-3)}
.sek-titel{letter-spacing:.09em;text-transform:uppercase}
.sek-stand{font-weight:600;font-variant-numeric:tabular-nums}
.sek-menue nav{overflow:auto;overscroll-behavior:contain;padding:0 var(--s3)}
.sek-liste{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sek-liste a{
  position:relative;display:grid;grid-template-columns:1.75rem minmax(0,1fr);align-items:center;gap:.45rem;min-height:42px;
  padding:.45rem .7rem;border-radius:var(--r2);text-decoration:none;
  font-family:var(--sans);font-size:var(--t-0);line-height:1.3;color:var(--ink-2);
  transition:background .15s ease,color .15s ease}
.sek-nr{font-size:.78rem;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--ink-3);line-height:1}
.sek-haken{display:none;color:var(--clay)}
.sek-liste .vorbei .sek-nr{display:none}
.sek-liste .vorbei .sek-haken{display:block}
@media (hover:hover){.sek-liste a:hover{background:var(--paper-2);color:var(--ink)}}
.sek-liste .aktiv a{background:var(--paper-2);color:var(--ink);font-weight:600}
.sek-liste .aktiv a::before{content:"";position:absolute;left:0;top:.6rem;bottom:.6rem;width:3px;border-radius:3px;background:var(--clay)}
.sek-liste .aktiv .sek-nr{color:var(--clay)}
.sek-liste a:focus-visible{outline:2px solid var(--clay);outline-offset:-2px}
.sek-oben{
  align-self:flex-start;display:inline-flex;align-items:center;gap:.35rem;margin:var(--s2) var(--s4) var(--s4);min-height:36px;padding:0 .4rem;
  background:none;border:0;border-radius:var(--r2);cursor:pointer;
  font-family:var(--sans);font-size:var(--t--1);font-weight:600;color:var(--ink-3)}
.sek-oben svg{transform:rotate(-90deg)}
@media (hover:hover){.sek-oben:hover{color:var(--ink)}}
/* Handy: das Menue kommt als Blatt von unten - dort, wo der Daumen ist */
@media (max-width:39.999rem){
  .sek-menue{top:auto;left:0;right:0;bottom:0;width:auto;max-height:min(80dvh,40rem);
    border-radius:var(--r4) var(--r4) 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom);
    transform:translateY(102%);transition:transform .38s cubic-bezier(.16,1,.3,1)}
  .sek-menue.offen{transform:translateY(var(--sek-zug,0px))}
  .sek-menue.zieht{transition:none}
  .sek-griff{display:flex;justify-content:center;padding:10px 0 0;touch-action:none;cursor:grab}
  .sek-griff span{width:42px;height:5px;border-radius:5px;background:var(--line-2)}
  .sek-kopf{padding-top:var(--s3);touch-action:none}
  .sek-liste a{min-height:48px}
}

/* --- Konto-Knopf: Registrieren / Anmelden / Abmelden je nach Stand (seite.js) - ein Umriss, gefuellt beim Ueberfahren wie die Knoepfe des Themes */
.konto-knopf{
  display:inline-flex;align-items:center;gap:.55rem;min-height:40px;padding:0 1rem 0 .3rem;border-radius:999px;
  font-family:var(--sans);font-size:var(--t--1);font-weight:600;line-height:1;white-space:nowrap;color:inherit;text-decoration:none;
  border:1px solid color-mix(in srgb,currentColor 24%,transparent);
  transition:background .18s ease,border-color .18s ease,color .18s ease}
.konto-bild{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;flex:none;
  background:color-mix(in srgb,currentColor 7%,transparent);font-size:.8rem;font-weight:700;letter-spacing:0;transition:background .18s ease}
@media (hover:hover){
  .konto-knopf:hover{background:var(--ink);border-color:var(--ink);color:#fff}
  .konto-knopf:hover .konto-bild{background:rgba(255,255,255,.16)}
}
.konto-knopf[data-zustand="angemeldet"] .konto-bild{background:var(--clay);color:#fff}
.konto-text{display:inline-block}
.konto-text.neu{animation:konto-ein .35s cubic-bezier(.16,1,.3,1)}
@keyframes konto-ein{from{opacity:0;transform:translateY(4px)}}
@media (max-width:39.999rem){.konto-knopf{display:none}}
/* Profil-Knopf (seit 2026-10-29, Mitgliederbereich): Anfangsbuchstabe und Vorname, oeffnet das Profil-Menue - am Handy nur der Kreis */
.konto-knopf[data-zustand="profil"] .konto-bild{background:var(--clay);color:#fff}
.konto-knopf[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:#fff}      /* offen: gefuellt wie beim Ueberfahren */
@media (max-width:39.999rem){
  .konto-knopf[data-zustand="profil"]{display:inline-flex;justify-content:center;min-width:44px;min-height:44px;padding:0 5px;border-color:transparent}
  .konto-knopf[data-zustand="profil"] .konto-text{display:none}
  .topbar.mit-profil{--logo-b:min(360px, 100vw - 156px)}           /* Platz fuer Profil-Kreis und Menueknopf - das Logo bleibt ganz */
}

/* --- Schliessen-Knopf der Dialoge (Wegweiser, Kauf-Dialog: .close-btn) - stand bis 2026-10-28 bei der Schublade; mit ihr war er weg
   (Bilal: "whats wrong with the close button?": grauer Kasten des Browsers) */
.close-btn{background:transparent;border:0;cursor:pointer;color:var(--ink-2);padding:var(--s2);line-height:0;border-radius:999px;min-width:44px;min-height:44px;display:inline-grid;place-items:center}
@media (hover:hover){.close-btn:hover{color:var(--clay)}}

/* --- Menueknopf: aus den drei Strichen wird ein Kreuz -------------------- */
.menu-btn .bars i{transition:transform .32s cubic-bezier(.16,1,.3,1),opacity .2s ease}
.menu-btn[aria-expanded="true"]{background:color-mix(in srgb,currentColor 8%,transparent)}
.menu-btn[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars i:nth-child(2){opacity:0;transform:scaleX(.2)}
.menu-btn[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* --- Schicht hinter Supermenue und Blatt ---------------------------------
   Dimmt UND verwischt, was dahinter liegt (Bilal, 2026-09-04). Ohne backdrop-filter bleibt die Verdunkelung. */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(36,26,17,.34);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;pointer-events:none;transition:opacity .22s ease}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .scrim{background:rgba(36,26,17,.42)}
}
.scrim.open{opacity:1;pointer-events:auto}
/* Waehrend das Supermenue offen ist, liegt die Leiste ueber der Schicht: Logo und Kreuz bleiben klar und klickbar - und fest auf Papier:
   ganz oben ist sie sonst durchsichtig (Glas erst beim Scrollen), und die Schicht faerbte sie grau; auf dem Video-Held waere sie weiss */
body.sm-offen .topbar{z-index:58;animation:none !important;background:var(--paper) !important;color:var(--ink) !important;
  box-shadow:0 1px 0 var(--line) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
body.sm-offen .topbar .logo-img{animation:none !important;filter:none !important}

/* --- Supermenue ------------------------------------------------------------
   Eine Flaeche unter der Leiste (am Handy die ganze Flaeche darunter) mit den Bereichen der Website als Karten im Stil der
   Kontakt-Karten (.kontakt: Karte, rundes Zeichen in Akzent hell, Titel und Unterzeile) - Bilal: "keine bilder im supermenu - nur sehr
   gut geordnete links in karten wie wir sie im über mich sektion haben". Oeffnen: die Flaeche faellt aus der Leiste, die Karten folgen
   nacheinander (--i); Schliessen geht schnell und ohne Staffel. Seit 2026-10-29 Glas: Flaeche und Karten durchscheinend mit Weichzeichner,
   die Karten ohne Rand und nur einen Hauch heller als die Flaeche; ohne Fusszeile (Impressum ... stehen im Fuss jeder Seite) - Bilal:
   "footer im super menu wollen wir nicht", "karten sollen keine border haben und karten bg und supermenus bg sollen transperent mit blur sein
   und mehr aneinander angeglichen sein". */
.sm{position:fixed;inset:0;z-index:55;display:flex;justify-content:center;align-items:flex-start;
  padding:calc(var(--sm-oben,80px) + var(--s2)) var(--s4) var(--s4);pointer-events:none}
.sm-innen{
  pointer-events:auto;position:relative;width:min(72rem,100%);max-height:calc(100dvh - var(--sm-oben,80px) - var(--s2) - var(--s4));
  overflow:auto;overscroll-behavior:contain;
  background:color-mix(in srgb,var(--paper) 70%,transparent);color:var(--ink);border:0;border-radius:var(--r4);box-shadow:var(--sh3);
  -webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);
  padding:var(--s5);outline:none;
  opacity:0;transform:translateY(-16px) scale(.985);transform-origin:top center;
  transition:opacity .2s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.sm.offen .sm-innen{opacity:1;transform:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.sm-innen{background:var(--paper-2)}}
.sm.zu .sm-innen{transition-duration:.16s,.22s}
.sm-an{opacity:0;transform:translateY(14px);
  transition:opacity .36s ease calc(70ms + var(--i,0) * 30ms),transform .56s cubic-bezier(.16,1,.3,1) calc(70ms + var(--i,0) * 30ms)}
.sm.offen .sm-an{opacity:1;transform:none}
.sm.zu .sm-an{transition-delay:0s,0s;transition-duration:.12s,.12s}

/* Die Karten: am Schreibtisch vier nebeneinander, alle offen; darunter Tablet zwei, Handy eine - dort aufklappbar */
.sm-karten{display:grid;gap:var(--s3);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:44rem){.sm-karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:62rem){.sm-karten{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}}
.sm-karte{min-width:0;background:color-mix(in srgb,var(--card) 46%,transparent);border:0;border-radius:var(--r3);padding:var(--s4);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.sm-karte > summary,.sm-konto-kopf{display:grid;grid-template-columns:var(--s7) minmax(0,1fr) auto;gap:var(--s3);align-items:center;list-style:none}
.sm-karte > summary::-webkit-details-marker{display:none}
.sm-karte .ic{width:var(--s7);height:var(--s7);border-radius:50%;background:var(--clay-soft);color:var(--clay);display:grid;place-items:center;
  font-family:var(--sans);font-size:var(--t-0);font-weight:700}
.sm-kopf{display:flex;flex-direction:column;min-width:0;font-family:var(--sans);font-size:var(--t-1);font-weight:600;line-height:1.25;color:var(--ink)}
.sm-kopf small{margin-top:2px;font-size:var(--t--1);font-weight:400;line-height:1.35;color:var(--ink-3)}
.sm-karte > summary .chev{display:none}
.sm-karte ul{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid}
.sm-karte li a{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:44px;padding:.5rem 0;border-top:1px solid var(--line);
  font-family:var(--sans);font-size:var(--t-0);line-height:1.3;color:var(--ink);text-decoration:none;transition:color .15s ease}
.sm-karte li a small{display:block;margin-top:1px;font-size:var(--t--1);color:var(--ink-3);transition:color .15s ease}
.sm-karte li a .pf{flex:none;color:var(--ink-3);opacity:.55;transition:transform .2s cubic-bezier(.16,1,.3,1),opacity .15s ease,color .15s ease}
@media (hover:hover){
  .sm-karte li a:hover{color:var(--clay-dk)}
  .sm-karte li a:hover small{color:var(--ink-2)}
  .sm-karte li a:hover .pf{opacity:1;color:var(--clay);transform:translateX(3px)}
}
.sm-karte li a:focus-visible{outline:2px solid var(--clay);outline-offset:2px;border-radius:var(--r2)}
/* Blog, Kinderlieder, Ankuendigungen: ohne Oeffentliches bleibt ihre Marke leer - dann ist auch der Eintrag weg (rahmen/oben.html) */
.sm-wenn:has(> .sm-probe:empty){display:none}
.sm-karte ul.sm-probe{display:none}                /* staerker als .sm-karte ul{display:grid} - sonst stuende der Eintrag doppelt da */

/* Das Konto als achte Karte (seite.js fuellt sie je nach Stand) */
.sm-konto[data-zustand="angemeldet"] .sm-konto-bild{background:var(--clay);color:#fff}
.sm-konto-satz{margin:var(--s3) 0 0;font-family:var(--sans);font-size:var(--t--1);line-height:1.45;color:var(--ink-2)}
.sm-konto-wege{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s4)}
.sm-knopf{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:40px;padding:0 1.1rem;border-radius:999px;
  font-family:var(--sans);font-size:var(--t--1);font-weight:600;text-decoration:none;white-space:nowrap;
  border:1px solid var(--ink);color:var(--ink);background:transparent;transition:background .16s ease,color .16s ease,border-color .16s ease}
.sm-knopf.voll{background:var(--ink);color:#fff}
@media (hover:hover){.sm-knopf:hover{background:var(--ink);color:#fff}.sm-knopf.voll:hover{background:var(--clay-dk);border-color:var(--clay-dk)}}
.sm-leise{font-family:var(--sans);font-size:var(--t--1);font-weight:600;color:var(--ink-2)}
@media (hover:hover){.sm-leise:hover{color:var(--clay)}}

/* Profil-Menue (seit 2026-10-29, Mitgliederbereich): dieselbe Glas-Flaeche wie das Supermenue - Kopf mit Kreis, Name und Adresse, der Stand,
   die Wege als eine Karte, Abmelden; am Schreibtisch schmal rechts unter dem Profil-Knopf (--pm-rechts), am Handy die ganze Flaeche */
.pm-kopf{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3);align-items:center;padding:var(--s1) var(--s1) var(--s4)}
.pm-bild{display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:50%;background:var(--clay);color:#fff;
  font-family:var(--serif);font-size:1.35rem;font-weight:600}
.pm-name{margin:0;font-family:var(--serif);font-size:var(--t-2);font-weight:600;line-height:1.2;color:var(--ink);overflow-wrap:anywhere}
.pm-mail{margin:2px 0 0;font-family:var(--sans);font-size:var(--t--1);line-height:1.35;color:var(--ink-3);overflow-wrap:anywhere}
.pm-stand{display:flex;align-items:center;gap:.55rem;margin:0 0 var(--s3);padding:.55rem var(--s3);border-radius:var(--r3);
  background:color-mix(in srgb,var(--card) 46%,transparent);font-family:var(--sans);font-size:var(--t--1);color:var(--ink-2)}
.pm-punkt{flex:none;width:8px;height:8px;border-radius:50%;background:var(--erfolg,#376c4d);box-shadow:0 0 0 3px color-mix(in srgb,var(--erfolg,#376c4d) 20%,transparent)}
.pm .sm-karte ul{margin:0;padding:0}
.pm .sm-karte li:first-child a{border-top:0}
.pm .sm-karte a[aria-current="page"] > span{font-weight:650;color:var(--ink)}
.pm .sm-karte a[aria-current="page"] .pf{opacity:1;color:var(--clay)}
.pm-ab{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;margin:var(--s4) 0 0;border-radius:999px;
  border:1.5px solid var(--ink);color:var(--ink);font-family:var(--sans);font-size:var(--t-0);font-weight:650;text-decoration:none;
  transition:background .16s ease,color .16s ease}
@media (hover:hover){.pm-ab:hover{background:var(--ink);color:#fff}}
@media (min-width:62rem){
  .pm{justify-content:flex-end;padding-right:var(--pm-rechts,16px)}
  .pm .sm-innen{width:min(23rem,100%)}
}

/* Schreibtisch: alles offen, die Kopfzeile einer Karte klappt nicht; Titel und Zeilen etwas kleiner, damit vier Spalten
   ohne Umbruch nebeneinander passen und das Menue auf einen Laptop passt */
@media (min-width:62rem){
  .sm-karte > summary{pointer-events:none}
  .sm-kopf{font-size:var(--t-0);font-weight:650}
  .sm-karte li a{min-height:40px;padding:.4rem 0}
}
/* Handy und Tablet: die Flaeche unter der Leiste, das Konto oben, die Bereiche klappen auf */
@media (max-width:61.999rem){
  .sm{padding:var(--sm-oben,72px) 0 0}
  .sm-innen{width:100%;max-height:calc(100dvh - var(--sm-oben,72px));height:calc(100dvh - var(--sm-oben,72px));
    border-radius:0;border-width:1px 0 0;box-shadow:none;
    padding:var(--s4) var(--pad) calc(var(--s6) + env(safe-area-inset-bottom));transform:translateY(-10px)}
  .sm-konto{order:-1}
  .sm-karte:is(details){padding:0;overflow:hidden}
  .sm-karte > summary{min-height:68px;padding:var(--s3) var(--s4);cursor:pointer}
  .sm-karte > summary .chev{display:block;color:var(--ink-3);transform:rotate(90deg);transition:transform .2s ease}
  .sm-karte[open] > summary .chev{transform:rotate(-90deg)}
  .sm-karte.zu > summary .chev{transform:rotate(90deg)}
  .sm-karte ul{margin:0;padding:0 var(--s4) var(--s2)}
}

/* --- Handy und Tablet: die Pille ersetzt beim Lesen den Schriftzug ----------
   Bis 62rem passt neben Logo und Knoepfen keine Pille. Sobald man in einer benannten Sektion ist (seite.js: .mit-sek), zieht sich das
   Logo auf seine Zeichnung zusammen (die linken 20,4 % der Datei) und die Pille erscheint in der Mitte; oben auf der Seite steht wieder
   das ganze Logo. */
@media (max-width:61.999rem){
  .sek{margin-inline:var(--s3)}
  /* das Logo in fester Breite (--logo-b ist hier fuer Logo und Menueknopf gerechnet), damit es sich zusammenziehen laesst */
  .logo{width:var(--logo-b);min-width:var(--logo-b);overflow:hidden;transition:width .45s cubic-bezier(.16,1,.3,1),min-width .45s cubic-bezier(.16,1,.3,1)}
  .logo img{width:var(--logo-b);max-width:none}
  .topbar.mit-sek .logo{width:calc(var(--logo-b) * .205);min-width:calc(var(--logo-b) * .205)}
  /* Ohne Pille liegt sie ausserhalb der Reihe (sonst naehme sie mit ihrem Abstand dem Logo Platz, und der Schriftzug wuerde
     abgeschnitten); mit .mit-sek nimmt sie den Platz, den das Logo beim Zusammenziehen freigibt. */
  .sek{position:absolute;left:0;width:0;overflow:hidden;opacity:0;visibility:hidden;transform:translateX(10px);
    transition:opacity .2s ease,transform .4s cubic-bezier(.16,1,.3,1),visibility 0s .4s}
  .topbar.mit-sek .sek{position:static;width:auto;opacity:1;visibility:visible;transform:none;
    transition:opacity .28s ease .08s,transform .45s cubic-bezier(.16,1,.3,1) .08s,visibility 0s}
  .sek-pille{min-height:38px;font-size:var(--t--1);font-weight:600;padding:0 .7rem 0 .45rem;gap:.5rem}
  .sek-ring{width:18px;height:18px}
}
/* Hinweis unter der Leiste, z. B. nach dem Abmelden (seite.js) */
.kopf-hinweis{position:fixed;z-index:70;left:50%;padding:.7rem 1.1rem;border-radius:999px;background:var(--ink);color:#fff;
  font-family:var(--sans);font-size:var(--t--1);font-weight:600;box-shadow:var(--sh3);
  opacity:0;transform:translate(-50%,-8px);transition:opacity .25s ease,transform .4s cubic-bezier(.16,1,.3,1)}
.kopf-hinweis.an{opacity:1;transform:translate(-50%,0)}
/* Sprungziele ohne id (benannte Sektionen) halten denselben Abstand zur Leiste wie section[id] */
main > section[data-nav]{scroll-margin-top:calc(var(--kopf) + var(--s4))}
@media (prefers-reduced-motion:reduce){
  .sm-innen,.sm-an,.sek-menue,.sek,.logo,.menu-btn .bars i,.sek-ring-wert,.sm-karte li a .pf{transition:none !important}
  .sek-ring-punkt.puls,.konto-text.neu{animation:none}
}
@media print{.sek,.sek-menue,.sm,.konto-knopf,.scrim{display:none !important}}