/*
 * Konto-Kern K0-6b · Login-Pille und Pillen-Menü (gemeinsamer Baustein für alle Seiten; nur der Farbton wechselt)
 *
 * Pille: unverändert aus login-pille.css (Entwurf F3, 06.10.2026) – Form, Größe, Schrift, Rand gleich auf allen Seiten.
 * Menü (Elmar 13.10.2026, pille-01):
 *   PC     = B (Elmars Wahl 13.10.) „dunkles Feld im Farbton der Seite, großer Buchstabe im Kopf, Abmelden als roter Knopf"
 *   Handy  = A (Elmars Wahl 13.10.) „Klappmenü von oben über die ganze Breite" (helle Karte, Linie im Farbton der Seite)
 *   Gast   = B-Gast „Willkommen" mit „Anmelden" (gold) und „Registrieren"
 * Werte aus den abgenommenen Bildern (_work/login-pille-menue-2026-10-07/lp.html). Farbtöne je Seite über die Klassen
 * .lp--d (4farben), .lp--m (MERTAZ), .lp--a (Pokeratelier, Buchstabe P), .lp--p (Punktify, Punkt), .lp--z (ZwoaZam),
 * K0-6d: .lp--t (Twock), .lp--w (4würfel), .lp--b (4PiP).
 * Einbinden: <link rel="stylesheet" href="/konto/ui/kopfleiste.css"> + <script src="/konto/ui/kopfleiste.js" defer>
 */
@font-face{font-family:"Zilla Slab";font-weight:600;font-display:swap;src:url(schrift/ZillaSlab-600-latin.woff2) format("woff2")}
@font-face{font-family:"Zilla Slab";font-weight:700;font-display:swap;src:url(schrift/ZillaSlab-700-latin.woff2) format("woff2")}
@font-face{font-family:"Zilla Slab";font-weight:700;font-display:swap;src:url(schrift/ZillaSlab-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+2000-20FF}
@font-face{font-family:"Public Sans";font-weight:100 900;font-display:swap;src:url(schrift/PublicSans-variabel-latin.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-weight:100 900;font-display:swap;src:url(schrift/PublicSans-variabel-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+2000-20FF}

/* ---------- Farbtöne je Seite (Pille wie login-pille.css; dazu Kopfleiste und Menüfeld aus den Bildern B-farben) ---------- */
.lp--d{--lp-rand:rgba(200,149,44,.6);--lp-text:#e8c36a;--lp-kreis:#163226;--lp-ring:#c8952c;--lp-buchstabe:#e8c36a;--lp-seite:#14281f;--lp-feld:#163226;--lp-feld2:#1d3a2c}
.lp--a{--lp-rand:rgba(217,189,128,.6);--lp-text:#e5cd94;--lp-kreis:#0b151d;--lp-ring:#d9bd80;--lp-buchstabe:#e5cd94;--lp-seite:#0b151d;--lp-feld:#101c26;--lp-feld2:#16252f}
.lp--m{--lp-rand:rgba(214,178,94,.6);--lp-text:#e9cf8a;--lp-kreis:#0b1420;--lp-ring:#d6b25e;--lp-buchstabe:#e9cf8a;--lp-seite:#0f1b2a;--lp-feld:#0f1b2a;--lp-feld2:#16263a}
.lp--p{--lp-rand:rgba(224,140,104,.6);--lp-text:#f0b39d;--lp-kreis:#2b1712;--lp-ring:#e08c68;--lp-buchstabe:#f0b39d;--lp-seite:#2a1a14;--lp-feld:#2a1a14;--lp-feld2:#3a241b}
/* ZwoaZam: Pille wie Elmars Wahl „1 · Buchstabe Z" (Ring Türkis); Kopfleiste/Menüfeld wie 4farben-Grün – Gestaltung: Vorschlag */
.lp--z{--lp-rand:rgba(200,149,44,.5);--lp-text:#e8c36a;--lp-kreis:#14281f;--lp-ring:#1F8A8A;--lp-buchstabe:#e8c36a;--lp-seite:#163226;--lp-feld:#163226;--lp-feld2:#1d3a2c}
/* K0-6d – Gestaltung: Vorschlag (Elmar entscheidet): Twock T (Kartenrot), 4würfel D (Nachtblau mit Gold, Layout wie 4farben), 4PiP B (Holzbraun/Gold wie der Backgammon-Tisch) */
.lp--t{--lp-rand:rgba(214,108,94,.6);--lp-text:#f2b8ab;--lp-kreis:#2a1418;--lp-ring:#d06a5a;--lp-buchstabe:#f2b8ab;--lp-seite:#2a1418;--lp-feld:#2a1418;--lp-feld2:#3a1d22}
.lp--w{--lp-rand:rgba(200,149,44,.6);--lp-text:#e8c36a;--lp-kreis:#14243a;--lp-ring:#c8952c;--lp-buchstabe:#e8c36a;--lp-seite:#122033;--lp-feld:#14243a;--lp-feld2:#1b2f4a}
.lp--b{--lp-rand:rgba(199,155,48,.6);--lp-text:#e6c77a;--lp-kreis:#3a2616;--lp-ring:#c79b30;--lp-buchstabe:#e6c77a;--lp-seite:#2a1c10;--lp-feld:#2f2013;--lp-feld2:#3d2a19}

/* ---------- Pille (login-pille.css, F3) ---------- */
.lp{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px 0 3px;border-radius:999px;border:1.5px solid var(--lp-rand);background:transparent;
  color:var(--lp-text);font:600 13.5px/1 "Public Sans","Segoe UI",system-ui,-apple-system,sans-serif;letter-spacing:0;text-decoration:none;cursor:pointer;white-space:nowrap;box-sizing:border-box;margin:0;
  /* K0-6d (Pokeratelier P2-L13): ein langer Name schiebt die Pille nie aus dem Kopf – die Pille darf schrumpfen, der Name endet mit „…" */
  flex:0 1 auto;min-width:0;max-width:100%}
.lp:hover{background:rgba(255,255,255,.07);color:var(--lp-text)}
.lp:focus-visible{outline:2px solid var(--lp-ring);outline-offset:2px}
.lp__kreis{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;flex:none;
  background:var(--lp-kreis);color:var(--lp-buchstabe);border:2px solid var(--lp-ring);font:700 15px/1 Georgia,"Times New Roman",serif}
.lp__txt{color:var(--lp-text);max-width:16em;min-width:0;overflow:hidden;text-overflow:ellipsis}
.lp__pfeil{font-size:12.5px;opacity:.85;margin-left:-1px;flex:none}   /* K0-6d (P2-L10): Elmars Mindestgröße 12,5 px (vorher 10 px) */
.lp.lp--auf{background:rgba(255,255,255,.1);box-shadow:0 0 0 3px rgba(255,255,255,.12)}
/* Punktify-Loginpunkt (K0-6a): Kreis ohne Buchstaben mit Punkt */
.lp--symbol .lp__kreis::after,.lp-menue__kreis--punkt::after{content:"";width:34%;height:34%;border-radius:50%;background:var(--lp-buchstabe)}
/* Kreis allein (z. B. „Mit 4farben-Konto anmelden") */
.lp-kreis-d{--lp-kreis:#163226;--lp-ring:#c8952c;--lp-buchstabe:#e8c36a}

.lp-anker{position:relative;display:inline-block;max-width:100%;min-width:0}   /* K0-6d (P2-L13) */
.lp-ic{width:20px;height:20px;flex:none}

/* ---------- Menü PC: B (Elmars Wahl 13.10.; dunkles Feld im Farbton der Seite) ---------- */
.lp-menue{position:absolute;right:0;top:calc(100% + 8px);z-index:1000;width:300px;box-sizing:border-box;background:var(--lp-feld);border:1.5px solid var(--lp-ring);
  border-radius:18px;box-shadow:0 16px 40px rgba(0,0,0,.45);overflow:hidden;color:#f3eee1;font-family:"Public Sans","Segoe UI",system-ui,sans-serif;text-align:left}
.lp-menue[hidden]{display:none}
.lp-menue__kopf{display:flex;align-items:center;gap:12px;padding:16px 16px 14px;background:var(--lp-feld2)}
.lp-menue__kreis{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;
  background:var(--lp-kreis);color:var(--lp-buchstabe);border:2px solid var(--lp-ring);font:700 22px/1 Georgia,"Times New Roman",serif}
.lp-menue__name{font:700 20px/1.1 "Zilla Slab",Georgia,serif;color:var(--lp-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.lp-menue__unter{display:block;font:500 12.5px/1.3 "Public Sans",sans-serif;color:rgba(243,238,225,.65);margin-top:3px}
.lp-menue__liste{list-style:none;margin:0;padding:0}
.lp-menue__z{display:flex;align-items:center;gap:13px;padding:12px 18px;font:600 15.5px/1.2 "Public Sans",sans-serif;border-top:1px solid rgba(255,255,255,.07);
  color:#f3eee1;text-decoration:none;cursor:pointer}
.lp-menue__z:hover,.lp-menue__z:focus-visible{background:rgba(255,255,255,.06);outline:none}
.lp-menue__z .lp-ic{color:var(--lp-ring)}
/* Seiten-Stile für Links (a{color:…}) dürfen das Menü nicht umfärben */
.lp-menue a.lp-menue__z,.lp-menue a.lp-menue__z:visited{color:#f3eee1}
.lp-menue a.lp-menue__gold,.lp-menue a.lp-menue__gold:visited{color:#1d150a}
.lp-menue a.lp-menue__rand,.lp-menue a.lp-menue__rand:visited{color:var(--lp-text)}
.lp-menue__pf{margin-left:auto;color:rgba(243,238,225,.4);font-weight:700}
.lp-menue__tag{font:800 12.5px/1 "Public Sans",sans-serif;background:var(--lp-ring);color:#1d150a;border-radius:6px;padding:4px 6px;letter-spacing:.04em}
.lp-menue__fuss{padding:12px 16px 16px;display:flex;flex-direction:column;gap:10px}
.lp-menue__ab{display:flex;align-items:center;justify-content:center;gap:9px;height:44px;border-radius:12px;border:1.5px solid #e2786c;color:#ff9c90;
  font:700 15px/1 "Public Sans",sans-serif;background:rgba(168,50,42,.18);cursor:pointer;width:100%;box-sizing:border-box}
.lp-menue__ab .lp-ic{color:#ff9c90}
.lp-menue__ab:hover,.lp-menue__ab:focus-visible{background:rgba(168,50,42,.3);outline:none}
/* B-Gast: Anmelden (gold) und Registrieren (Umriss) */
.lp-menue__gold{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:12px;font:700 15px/1 "Public Sans",sans-serif;
  text-decoration:none;box-sizing:border-box;background:var(--lp-ring);color:#1d150a}
.lp-menue__rand{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:12px;font:700 15px/1 "Public Sans",sans-serif;
  text-decoration:none;box-sizing:border-box;border:1.5px solid var(--lp-ring);color:var(--lp-text)}
.lp-menue__gold:focus-visible,.lp-menue__rand:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lp-menue--gast .lp-menue__liste{display:none}

/* ---------- Handy (bis 600 px): A (Elmars Wahl 13.10.) – helle Karte, klappt von oben über die ganze Breite auf ---------- */
@media (max-width:600px){
  .lp__txt{max-width:9em}
  /* Elmar 13.10. (endgültig): am Handy abgemeldet/Gast NUR der Kreis – wie heute auf 4farben.de; angemeldet Kreis + Name */
  .lp.lp--abgemeldet{padding:0 3px;gap:0}
  .lp.lp--abgemeldet .lp__txt,.lp.lp--abgemeldet .lp__pfeil{display:none}
  .lp-menue{position:fixed;left:10px;right:10px;top:var(--lp-menue-oben,64px);width:auto;background:#fffdf7;border:1px solid #ddd2bc;border-top:4px solid var(--lp-ring);
    border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.28);color:#22201b;max-height:calc(100vh - var(--lp-menue-oben,64px) - 16px);overflow:auto}
  .lp-menue__kopf{background:transparent;padding:13px 14px 11px;border-bottom:1px solid #eee5d2;gap:10px}
  .lp-menue__kreis{width:34px;height:34px;font-size:17px}
  .lp-menue__name{font:700 19px/1.1 "Zilla Slab",Georgia,serif;color:#22201b}
  .lp-menue__unter{color:#6b6455}
  .lp-menue__z,.lp-menue a.lp-menue__z,.lp-menue a.lp-menue__z:visited{padding:15px 18px;font:600 17px/1.2 "Public Sans",sans-serif;color:#22201b;border-top:0;gap:12px}
  .lp-menue__z:hover,.lp-menue__z:focus-visible{background:#f6efdf}
  .lp-menue__z .lp-ic{color:#6b5a2e;width:22px;height:22px}
  .lp-menue__pf{display:none}
  .lp-menue__tag{margin-left:auto;font:700 12.5px/1 "Public Sans",sans-serif;background:#f6dfd3;color:#8a3a1c;border-radius:999px;padding:4px 7px;letter-spacing:0}
  .lp-menue__fuss{padding:4px 0 6px;border-top:1px solid #eee5d2;margin-top:4px}
  .lp-menue__ab{justify-content:flex-start;height:auto;padding:15px 18px;border:0;border-radius:0;background:transparent;color:#a8322a;font:600 17px/1.2 "Public Sans",sans-serif;gap:12px}
  .lp-menue__ab .lp-ic{color:#a8322a;width:22px;height:22px}
  .lp-menue__ab:hover,.lp-menue__ab:focus-visible{background:#f6efdf}
  /* Gast am Handy (A-Karte mit den zwei Einträgen) – Elmars Wahl Handy A, Gast-Menü B-Gast „passt" (Elmar 13.10.) */
  .lp-menue--gast .lp-menue__fuss{border-top:0;padding:12px 14px 14px}
  .lp-menue__gold{background:var(--lp-ring);color:#1d150a}
  .lp-menue__rand,.lp-menue a.lp-menue__rand,.lp-menue a.lp-menue__rand:visited{border-color:var(--lp-ring);color:#22201b}
}

/* ---------- K0-6d: Handy quer (z. B. 812×375) – Menü B ragte als Superadmin (5 Einträge + Abmelden) unten heraus (gemessen: Abmelden
   endete bei 412 px von 375 px). Nur im Querformat enger (Vorschlag AE: Kopf 8/14 px, Kreis 34 px, Zeilen 8/16 px, 14,5 px,
   Abmelden 36 px); zusätzlich höchstens Bildschirmhöhe mit eigenem Rollbalken. Hochformat und PC bleiben unverändert. ---------- */
@media (min-width:601px) and (max-height:500px) and (orientation:landscape){
  .lp-menue{max-height:calc(100vh - var(--lp-menue-oben,64px) - 8px);overflow-y:auto}
  .lp-menue__kopf{padding:8px 14px;gap:10px}
  .lp-menue__kreis{width:34px;height:34px;font-size:17px}
  .lp-menue__name{font-size:17px}
  .lp-menue__z{padding:8px 16px;font-size:14.5px}
  .lp-menue__fuss{padding:8px 14px 10px}
  .lp-menue__ab{height:36px;font-size:14.5px}
}

/* ---------- Nachfrage „Deine Gast-Partien übernehmen?" (gast-01 A, Skizze von Elmar mit „passt" bewertet) ---------- */
.lp-frage-hinten{position:fixed;inset:0;z-index:2000;background:rgba(20,18,12,.45);display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
.lp-frage{width:100%;max-width:780px;box-sizing:border-box;background:#f9f5ea;border:3px solid #c8952c;border-radius:16px;padding:26px 28px 24px;color:#22201b;
  font:400 17px/1.55 "Public Sans","Segoe UI",system-ui,sans-serif;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.lp-frage h2{margin:0 0 12px;font:700 26px/1.2 "Public Sans","Segoe UI",system-ui,sans-serif;color:#1d3a2c}
.lp-frage p{margin:0}
.lp-frage__knoepfe{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.lp-frage__ja{border:0;border-radius:999px;background:#c8952c;color:#22201b;font:700 17px/1 "Public Sans",sans-serif;padding:14px 24px;cursor:pointer}
.lp-frage__nein{border:2.5px solid #c8952c;border-radius:999px;background:#fffdf7;color:#22201b;font:700 17px/1 "Public Sans",sans-serif;padding:12px 24px;cursor:pointer}
.lp-frage__ja:focus-visible,.lp-frage__nein:focus-visible{outline:3px solid #1d3a2c;outline-offset:2px}
.lp-frage__meldung{margin-top:14px;font-size:15px;color:#7a2e1c}
@media (max-width:600px){.lp-frage{padding:20px 18px}.lp-frage h2{font-size:22px}.lp-frage__knoepfe button{width:100%}}
/* K0-6d (Zusatz D): Nachfrage „Neue Fassung – bitte zustimmen" wie die Gast-Nachfrage – Gestaltung: Vorschlag */
.lp-frage--einwilligung{max-height:calc(100vh - 32px);overflow:auto}
.lp-frage__liste{margin:14px 0 0;padding:0 0 0 22px}
.lp-frage__liste li{margin:4px 0}
.lp-frage__liste a{color:#1d3a2c;font-weight:700}
.lp-frage__liste a:focus-visible,.lp-frage__link:focus-visible{outline:3px solid #1d3a2c;outline-offset:2px}
.lp-frage__neu{font-size:14px;color:#5d574a}
.lp-frage__klein{margin-top:14px !important;font-size:15px;color:#5d574a}
.lp-frage__link{align-self:center;color:#7a2e1c;font:700 16px/1 "Public Sans",sans-serif;padding:12px 6px}
@media (max-width:600px){.lp-frage__link{width:100%;text-align:center}}
/* K0-7 (P2-L15 Pokeratelier, MERTAZ 14.10.): langer Name im offenen Menuekopf – das <b> ist jetzt ein Block, damit max-width und die
   Ellipse greifen; der Textbereich neben dem Kreis darf schrumpfen (min-width:0). Davor wurde der Name ohne Ellipse abgeschnitten. */
.lp-menue__name{display:block}
.lp-menue__kopf > div{min-width:0}