/* ════════════════════════════════════════════════════════════════════
   ohne-js.css — mykeyz.ch ohne JavaScript (v0.001, 06.11.2026, Celine)

   Wozu: Manche Arbeitsplätze, Schulen und Ämter sperren JavaScript.
   Damit die Seiten zum Lesen trotzdem gehen, steht alles fest im HTML.
   Ein Einzeiler im <head> setzt die Klasse "js" auf <html>, sobald
   JavaScript läuft. Alles hier mit html:not(.js) gilt nur OHNE JavaScript.

   1. Feste Kopfleiste   (<nav class="mkz-s-nav"> in <mykeyz-header>)
   2. Feste Fusszeile    (<footer class="mkz-s-fuss"> in <mykeyz-footer>)
      Kopf und Fuss schreibt _werkzeuge/ohne-js/bauen.py in jede Seite.
      Mit JavaScript ersetzen die Bauteile diesen Inhalt wie bisher.
   3. Aufklappen ohne Skript (Startseite, About, Projects)
   4. Hinweis «braucht JavaScript» (Spiele, Apps, Community)
   5. Links statt onclick
   CCMS: c-vault, projekte/mykeyz-ch/ccms/ohne-javascript-ccms-v0.001.html
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. FESTE KOPFLEISTE ─────────────────────────────────────────── */
.mkz-s-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h, 64px);
  display: flex; align-items: center; gap: 0.5rem; padding: 0 1rem;
  background: rgba(13, 13, 15, 0.92);
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  font-family: 'DM Sans', sans-serif;
}
.mkz-s-logo {
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.1rem; letter-spacing: -0.02em;
  color: var(--text, #f0eee8); text-decoration: none; white-space: nowrap;
}
.mkz-s-logo span { color: var(--accent, #e03030); }
.mkz-s-rechts { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.mkz-s-lang, .mkz-s-menu > summary {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 0.6rem;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08)); border-radius: 8px;
  color: var(--text, #f0eee8); font-size: 0.85rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.mkz-s-lang:hover, .mkz-s-menu > summary:hover, .mkz-s-menu[open] > summary { border-color: var(--accent, #e03030); }
.mkz-s-menu > summary { list-style: none; font-size: 1.1rem; }
.mkz-s-menu > summary::-webkit-details-marker { display: none; }
.mkz-s-menu ul {
  box-sizing: border-box;
  position: fixed; top: var(--nav-h, 64px); left: 0; right: 0; margin: 0; padding: 0.5rem 0; list-style: none;
  background: rgba(13, 13, 15, 0.97); border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.mkz-s-menu li a {
  display: block; padding: 0.75rem 2rem; text-align: center; text-decoration: none;
  color: var(--muted, #8a8794); font-size: 0.95rem; font-weight: 500;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.mkz-s-menu li:last-child a { border-bottom: none; }
.mkz-s-menu li a:hover { color: var(--text, #f0eee8); background: var(--border, rgba(255, 255, 255, 0.08)); }
.mkz-s-menu li a.active { color: var(--accent, #e03030); }
.mkz-s-menu li a.lc { color: var(--accent, #e03030); }
@media (max-width: 768px) { .mkz-s-logo { font-size: 0.75rem; } }
/* Titel ab Tablet-Breite in der Mitte, am Handy bleibt er links (Mikey, 10.11.2026) */
@media (min-width: 769px) { .mkz-s-logo { position: absolute; left: 50%; transform: translateX(-50%); } }

/* ── 2. FESTE FUSSZEILE ──────────────────────────────────────────── */
.mkz-s-fuss {
  margin-top: 4rem; padding: 2rem 1.5rem 2.5rem;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  background: var(--bg2, #13131a); color: var(--muted, #8a8794);
  font-family: 'DM Sans', sans-serif; font-size: 0.85rem;
}
.mkz-s-fuss-innen { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-start; justify-content: space-between; }
.mkz-s-fuss-logo { font-family: 'Syne', sans-serif; font-weight: 800; color: var(--text, #f0eee8); }
.mkz-s-fuss-logo span { color: var(--accent, #e03030); }
.mkz-s-fuss-logo .mkz-footer-copy { display: block; margin-top: 0.3rem; font-family: 'DM Sans', sans-serif; font-weight: 400; font-size: 0.78rem; color: var(--muted, #8a8794); }
.mkz-s-fuss-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; }
.mkz-s-fuss details > summary { cursor: pointer; color: var(--muted, #8a8794); list-style: none; padding: 0.4rem 0; }
.mkz-s-fuss details > summary::-webkit-details-marker { display: none; }
.mkz-s-fuss details > summary:hover, .mkz-s-fuss details[open] > summary { color: var(--accent, #e03030); }
.mkz-s-fuss details > div {
  margin: 0.4rem 0 0.8rem; padding: 1rem 1.2rem; max-width: 34rem;
  background: var(--surface, #1a1a24); border: 1px solid var(--border, rgba(255, 255, 255, 0.08)); border-radius: 12px;
  color: var(--text, #f0eee8); line-height: 1.6;
}
.mkz-s-fuss details p { margin: 0 0 0.6rem; }
.mkz-s-fuss details p:last-child { margin-bottom: 0; }
.mkz-s-fuss a { color: var(--accent, #e03030); }
.mkz-s-fuss .mkz-panel-note { color: var(--muted, #8a8794); font-size: 0.8rem; }
.mkz-s-hoch { display: inline-block; margin-top: 1rem; color: var(--muted, #8a8794) !important; text-decoration: none; }
.mkz-s-hoch:hover { color: var(--text, #f0eee8) !important; }
/* Mit JavaScript gibt es den Zurück-nach-oben-Knopf schon */
.js .mkz-s-hoch { display: none; }

/* Hell-Modus gibt es nur mit JavaScript (Knopf in der Kopfleiste). Ohne JavaScript bleibt die Seite dunkel. */

/* ── 3. AUFKLAPPEN OHNE SKRIPT ───────────────────────────────────── */
/* Startseite: Aktuelles offen */
html:not(.js) .news-body { max-height: none; }
html:not(.js) .news-arrow { display: none; }
html:not(.js) .news-trigger { cursor: default; }
/* About: die Reise offen, Hinweis «Klick …» weg */
html:not(.js) .reise-body { grid-template-rows: 1fr; }
html:not(.js) .reise-hint, html:not(.js) .reise-chevron { display: none; }
html:not(.js) #reise-trigger { cursor: default !important; }
/* Projects: alle Kategorien und Details offen */
html:not(.js) .acc-body { display: block; }
html:not(.js) .acc-chevron { display: none; }
html:not(.js) .acc-header { cursor: default; }
html:not(.js) .card-detail-panel { max-height: none; border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08)); margin-top: 0.75rem; padding-top: 0.75rem; }
html:not(.js) .btn-detail-toggle { display: none; }
/* Knöpfe, die nur eine Meldung zeigen (Abstimmen, Feedback), tun ohne JavaScript nichts */
html:not(.js) [onclick^="showToast"] { display: none; }
/* Ohne Reiter steht alles untereinander: am Handy darf nichts breiter als der Bildschirm werden */
html:not(.js) main { min-width: 0; max-width: 100%; }
html:not(.js) .tut .zp { min-width: 0; overflow-x: auto; }
@media (max-width: 600px) {
  html:not(.js) .projects-grid, html:not(.js) .concept-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Game-Design 101: feste Fassung der Kapitel nur ohne JavaScript */
.js .nur-ohne-js { display: none !important; }

/* ── 4. HINWEIS «BRAUCHT JAVASCRIPT» ─────────────────────────────── */
html:not(.js) a[href*="/games/"]::after,
html:not(.js) a[href*=".vercel.app"]::after,
html:not(.js) a[href$="community-center.html"]::after {
  content: "braucht JavaScript";
  display: inline-block; margin: 0.4rem 0.4rem 0; padding: 0.15rem 0.55rem;
  border: 1px solid rgba(224, 48, 48, 0.5); border-radius: 999px;
  color: #ff8a8a; background: rgba(224, 48, 48, 0.1);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.4; white-space: nowrap;
}
html:not(.js):lang(en) a[href*="/games/"]::after,
html:not(.js):lang(en) a[href*=".vercel.app"]::after,
html:not(.js):lang(en) a[href$="community-center.html"]::after { content: "needs JavaScript"; }
/* Kasten in <noscript> */
.mkz-s-hinweis {
  margin: 1rem auto; padding: 0.9rem 1.1rem; max-width: 46rem;
  border: 1px solid rgba(224, 48, 48, 0.5); border-radius: 12px; background: rgba(224, 48, 48, 0.08);
  color: var(--text, #f0eee8); font-family: 'DM Sans', sans-serif; font-size: 0.95rem; line-height: 1.55;
}
.mkz-s-hinweis b { color: #ff8a8a; }

/* ── 5. LINKS STATT ONCLICK ──────────────────────────────────────── */
a.card { display: block; color: inherit; text-decoration: none; }
a.cta-main, a.cta-secondary { display: inline-block; text-decoration: none; }
html { scroll-behavior: smooth; }
#sektionen { scroll-margin-top: calc(var(--nav-h, 64px) + 1rem); }