/* Gemeinsamer Kopf aller Hosting-Seiten (034-playground.de): Logo, Seiten-Links, Konto. Gebaut von kopf.js.
   - nur Klassen mit hk-, damit nichts mit .btn/.pill/.panel/.kopf der Seiten kollidiert
   - Farben und Schriften aus den Variablen der Seite (Startseite oder thema.css); fehlt eine, gilt der Wert der Startseite
   - Schriften: die Seite lädt /schriften/schriften.css
   - Höhe als --hk-hoehe (64 px, Handy 58 px) – Seiten mit eigenen klebenden Leisten rechnen damit: top:var(--hk-hoehe,64px)
   - Inhalt 1180 px breit wie die Startseite; class="hk-kopf hk-voll" für die ganze Breite (Server-Verwaltung) */
:root{--hk-hoehe:64px}
.hk-kopf{position:sticky;top:0;z-index:40;height:var(--hk-hoehe);margin:0;padding:0;
  background:color-mix(in srgb,var(--bg,#0b0c0e) 84%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border,#23272e);color:var(--text,#e7e9ec);font:14px/1.5 var(--font,Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);
  -webkit-font-smoothing:antialiased}
.hk-kopf *,.hk-kopf *::before,.hk-kopf *::after{box-sizing:border-box}
.hk-kopf.hk-voll{--hk-breite:none}
.hk-innen{display:flex;align-items:center;gap:24px;height:100%;max-width:var(--hk-breite,1180px);margin:0 auto;padding:0 24px}
.hk-kopf a{text-decoration:none}
.hk-kopf a:hover{text-decoration:none}
.hk-kopf :focus-visible{outline:2px solid var(--accent,#ff7a1a);outline-offset:2px}
.hk-kopf button{font-family:inherit;margin:0}
.hk-kopf svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* Logo */
.hk-marke{display:flex;align-items:center;gap:10px;flex:none;color:var(--text,#e7e9ec);font:700 17px var(--kopf,"Space Grotesk",Inter,sans-serif);white-space:nowrap;border-radius:8px}
.hk-marke:hover{color:var(--text,#e7e9ec)}
.hk-marke img{width:30px;height:30px;border-radius:8px;display:block}

/* Seiten-Links */
.hk-nav{display:flex;gap:2px;flex:1;min-width:0;margin:0;padding:0}
.hk-nav a{padding:8px 12px;border-radius:8px;color:var(--text-2,#a7adb6);font-weight:500;font-size:14px;line-height:1.5;white-space:nowrap}
.hk-nav a:hover{color:var(--text,#e7e9ec);background:var(--surface-2,#181b20)}
.hk-nav a.an,.hk-nav a[aria-current="page"]{color:var(--text,#e7e9ec);background:var(--surface-2,#181b20)}
.hk-nav-konto{display:none}

/* rechte Seite */
.hk-rechts{display:flex;gap:8px;align-items:center;margin-left:auto;position:relative;flex:none;min-height:40px}
.hk-kontoplatz{display:flex;gap:8px;align-items:center}
.hk-kontoplatz:empty{display:none}
.hk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:9px;
  border:1px solid var(--border-2,#30353d);background:var(--surface,#121418);color:var(--text,#e7e9ec);font:600 14px var(--font,Inter,system-ui,sans-serif);
  white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s}
.hk-btn:hover{background:var(--surface-2,#181b20);color:var(--text,#e7e9ec)}
.hk-btn.hk-haupt{background:var(--accent,#ff7a1a);border-color:var(--accent,#ff7a1a);color:var(--on-accent,#1a0b00)}
.hk-btn.hk-haupt:hover{background:var(--accent-hover,color-mix(in srgb,var(--marke,#ff7a1a) 88%,#fff));border-color:var(--accent-hover,color-mix(in srgb,var(--marke,#ff7a1a) 88%,#fff));color:var(--on-accent,#1a0b00)}
.hk-btn.hk-geist{background:transparent;border-color:transparent}
.hk-btn.hk-geist:hover{background:var(--surface-2,#181b20)}
.hk-menueknopf{display:none;place-items:center;width:40px;height:40px;padding:0;border-radius:9px;border:1px solid var(--border-2,#30353d);
  background:var(--surface,#121418);color:var(--text,#e7e9ec);cursor:pointer}
.hk-menueknopf:hover{background:var(--surface-2,#181b20)}
.hk-menueknopf svg{width:20px;height:20px}

/* Profil-Chip */
.hk-konto{position:relative}
.hk-chip{display:flex;align-items:center;gap:8px;height:40px;max-width:240px;padding:0 10px 0 5px;border-radius:999px;cursor:pointer;
  border:1px solid var(--border-2,#30353d);background:var(--surface,#121418);color:var(--text,#e7e9ec);font:600 14px var(--font,Inter,system-ui,sans-serif);
  transition:background .15s,border-color .15s}
.hk-chip:hover,.hk-chip[aria-expanded="true"]{background:var(--surface-2,#181b20)}
.hk-chip:focus-visible{outline-offset:2px}
.hk-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hk-pfeil{width:14px;height:14px;flex:none;color:var(--muted,#767d87);transition:transform .15s}
.hk-chip[aria-expanded="true"] .hk-pfeil{transform:rotate(180deg)}
.hk-av{position:relative;flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;overflow:hidden;
  background:var(--hk-farbe,#4f8ef7);color:#fff;font:700 12.5px/1 var(--font,Inter,system-ui,sans-serif);text-transform:uppercase;user-select:none}
.hk-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--surface-2,#181b20)}
.hk-avbox{position:relative;flex:none;display:grid}
.hk-punkt{position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:var(--accent,#ff7a1a);
  box-shadow:0 0 0 2px var(--surface,#121418)}

/* Menü */
.hk-menue{position:absolute;right:0;top:calc(100% + 14px);width:300px;max-width:calc(100vw - 16px);padding:6px;z-index:2;
  background:var(--surface,#121418);border:1px solid var(--border-2,#30353d);border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.2);color:var(--text,#e7e9ec);animation:hk-auf .14s ease-out}
.hk-menue[hidden]{display:none}
@keyframes hk-auf{from{opacity:0;transform:translateY(-4px)}}
.hk-mkopf{display:flex;align-items:center;gap:12px;margin:-6px -6px 6px;padding:16px;border-bottom:1px solid var(--border,#23272e);min-width:0}
.hk-mkopf .hk-av{width:40px;height:40px;font-size:16px}
.hk-mkopf > div{min-width:0;flex:1}
.hk-mkopf b{display:block;font-size:15px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hk-mkopf small{display:block;color:var(--text-2,#a7adb6);font-size:12.5px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hk-hinweis{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:600;
  color:var(--warn,#eab308);background:color-mix(in srgb,var(--warn,#eab308) 12%,transparent);border:1px solid color-mix(in srgb,var(--warn,#eab308) 35%,transparent)}
a.hk-hinweis:hover{color:var(--warn,#eab308);background:color-mix(in srgb,var(--warn,#eab308) 20%,transparent)}
.hk-hinweis svg{width:12px;height:12px}
.hk-gruppe{padding:10px 10px 4px;color:var(--muted,#767d87);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.hk-punkte{display:flex;flex-direction:column;gap:1px}
.hk-menue a.hk-p,.hk-menue button.hk-p{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;border:0;border-radius:8px;background:none;
  color:var(--text,#e7e9ec);font:500 14px var(--font,Inter,system-ui,sans-serif);text-align:left;cursor:pointer;white-space:nowrap}
.hk-menue .hk-p:hover,.hk-menue .hk-p:focus-visible{background:var(--hover,var(--surface-2,#1e2228));color:var(--text,#e7e9ec)}
.hk-menue .hk-p:focus-visible{outline:2px solid var(--accent,#ff7a1a);outline-offset:-2px}
.hk-menue .hk-p[aria-current="page"]{background:var(--accent-weak,rgba(255,122,26,.14))}
.hk-menue .hk-p[aria-current="page"] .hk-i{color:var(--accent-text,#ffa266)}
.hk-i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;color:var(--muted,#767d87)}
.hk-menue .hk-p:hover .hk-i{color:var(--text,#e7e9ec)}
.hk-zahl{margin-left:auto;display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--accent,#ff7a1a);color:var(--on-accent,#1a0b00);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.hk-zahl:empty{display:none}
.hk-trenn{height:1px;margin:6px 4px;background:var(--border,#23272e)}

/* Farbschema Auto / Hell / Dunkel */
.hk-schema{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 6px 6px 10px}
.hk-schema > span{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500}
.hk-seg{display:inline-flex;gap:2px;padding:2px;border-radius:9px;background:var(--surface-2,#181b20);border:1px solid var(--border,#23272e)}
.hk-seg button{display:grid;place-items:center;width:32px;height:26px;padding:0;border:0;border-radius:7px;background:none;color:var(--muted,#767d87);cursor:pointer}
.hk-seg button:hover{color:var(--text,#e7e9ec)}
.hk-seg button[aria-pressed="true"]{background:var(--surface,#121418);color:var(--text,#e7e9ec);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.hk-seg svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* Tablet: Seiten-Links hinter ☰ (wie die Startseite) */
@media (max-width:1100px){
  .hk-mit-nav .hk-innen{justify-content:space-between}
  .hk-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;padding:10px 16px 16px;
    background:var(--bg,#0b0c0e);border-bottom:1px solid var(--border,#23272e);box-shadow:0 18px 30px rgba(0,0,0,.25)}
  .hk-nav.hk-offen{display:flex}
  .hk-nav a{padding:12px}
  .hk-menueknopf{display:grid}
}
/* Handy: Chip nur mit Bild, „Anmelden“ wandert ins ☰-Menü */
@media (max-width:640px){
  :root{--hk-hoehe:58px}
  .hk-innen{gap:10px;padding:0 16px}
  .hk-chip{padding:0 5px;gap:0;width:40px;justify-content:center}
  .hk-chip .hk-name,.hk-chip .hk-pfeil{display:none}
  .hk-mit-nav .hk-anmelden{display:none}
  .hk-nav .hk-nav-konto{display:flex;flex-direction:column;gap:2px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border,#23272e)}
  .hk-menue{position:fixed;top:calc(var(--hk-hoehe) + 6px);right:8px;left:8px;width:auto;max-width:none;max-height:calc(100dvh - var(--hk-hoehe) - 14px);overflow-y:auto}
  .hk-menue a.hk-p,.hk-menue button.hk-p{height:42px}
}
/* Schmales Handy ohne Seiten-Links (Anmelde-Seiten, Ränge): es gibt kein ☰, das „Anmelden“ aufnehmen könnte, und Logo,
   „Anmelden“ und „Konto erstellen“ brauchen zusammen gut 440 px. „Konto erstellen“ bleibt – angemeldet wird über die Seite.
   Steht „Anmelden“ allein da (auf /registrieren), passt es und bleibt. */
@media (max-width:480px){
  .hk-kopf:not(.hk-mit-nav) .hk-anmelden:not(:only-child){display:none}
}
/* Schmale Handys: Logo, „Konto erstellen“ und ☰ (abgemeldet, mit Seiten-Links) brauchen mit 16 px Rand gut 380 px –
   Abstände, Knöpfe und Schriftzug schrittweise enger, damit rechts derselbe Rand bleibt wie links. Der Rand bleibt bis
   381 px bei 16 px wie der Inhalt der Seiten (.wrap), erst darunter 12 px. Unter 360 px bleibt in diesem Fall vom Logo
   nur das Bild (Name per aria-label in kopf.js). */
@media (max-width:420px){
  .hk-innen{gap:8px}
  .hk-rechts,.hk-kontoplatz{gap:6px}
  .hk-btn{padding:0 12px}
}
@media (max-width:390px){
  .hk-marke{font-size:16px}
}
@media (max-width:380px){
  .hk-innen{padding:0 12px}
}
@media (max-width:374px){
  .hk-marke{gap:8px;font-size:15px}
  .hk-btn{padding:0 10px}
}
@media (max-width:359.98px){
  .hk-mit-nav:has(.hk-kontoplatz .hk-haupt) .hk-marke span{display:none}
}
/* Touch (Handy, Tablet): Farbschema-Knöpfe und Menüpunkte groß genug zum Tippen */
@media (max-width:640px),(pointer:coarse){
  .hk-seg button{width:44px;height:36px}
  .hk-seg svg{width:17px;height:17px}
  .hk-menue a.hk-p,.hk-menue button.hk-p{height:42px}
}
@media (prefers-reduced-motion:reduce){ .hk-menue{animation:none} .hk-pfeil,.hk-btn,.hk-chip{transition:none} }