/* ============================================================
   style.css – ausloeschung.spirgi.com
   Stand: 22. Oktober 2026 · v=16 · Dark Mode
   ============================================================ */

/* ---------- 0. Farben (hell / dunkel) ---------- */
:root {
  color-scheme: light dark;

  --bg:        #ffffff;
  --fg:        #1a1a1a;
  --heading:   #111111;
  --quote:     #444444;
  --muted:     #555555;
  --faint:     #666666;
  --nav-label: #777777;
  --link:      #0645ad;
  --link-hover:#a00000;
  --rule:      #dddddd;
}

/* automatisch dunkel, wenn das System dunkel ist */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #141414;
    --fg:        #d6d6d6;
    --heading:   #f2f2f2;
    --quote:     #bdbdbd;
    --muted:     #a8a8a8;
    --faint:     #9a9a9a;
    --nav-label: #8a8a8a;
    --link:      #8ab4f8;
    --link-hover:#ff9b9b;
    --rule:      #333333;
  }
}

/* manueller Umschalter (überschreibt die Systemeinstellung) */
[data-theme="dark"] {
  --bg:        #141414;
  --fg:        #d6d6d6;
  --heading:   #f2f2f2;
  --quote:     #bdbdbd;
  --muted:     #a8a8a8;
  --faint:     #9a9a9a;
  --nav-label: #8a8a8a;
  --link:      #8ab4f8;
  --link-hover:#ff9b9b;
  --rule:      #333333;
}

[data-theme="light"] {
  --bg:        #ffffff;
  --fg:        #1a1a1a;
  --heading:   #111111;
  --quote:     #444444;
  --muted:     #555555;
  --faint:     #666666;
  --nav-label: #777777;
  --link:      #0645ad;
  --link-hover:#a00000;
  --rule:      #dddddd;
}

/* ---------- 1. Grundlagen ---------- */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 1rem clamp(1rem, 2.5vw, 2.5rem);

  font-family: Verdana, Geneva, serif;
  font-size: clamp(1.25rem, 1.08rem + 0.6vw, 1.5rem);
  line-height: 1.7;
  color: var(--fg);
  background: var(--bg);

  hyphens: auto;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }
pre, code, .tabelle-scroll { overflow-x: auto; }

/* alte 90er-Tags: Schriftart UND Grösse zurücksetzen */
font,
font[size],
small {
  font-family: inherit;
  font-size: 1em;
}

center { display: block; }

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover, a:focus { color: var(--link-hover); }

/* ---------- 2. Typografie ---------- */
h1, h2, h3, h4 {
  font-weight: normal;
  line-height: 1.22;
  color: var(--heading);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.55rem + 1.7vw, 3rem); margin: 0 0 0.7em; }
h2 { font-size: clamp(1.55rem, 1.35rem + 0.9vw, 2.05rem); margin: 1.8em 0 0.5em; }
h3 { font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem); font-style: italic; margin: 1.5em 0 0.4em; }

h1 img { display: block; max-width: 100%; height: auto; margin: 0 0 1.2rem; }

p {
  margin: 0 0 1.1em;
  max-width: 72ch;
}

blockquote {
  margin: 1.5em 0;
  padding-left: 1.2em;
  border-left: 3px solid var(--rule);
  font-style: italic;
  color: var(--quote);
  max-width: 64ch;
}

ul, ol { margin: 0 0 1.2em; padding-left: 1.4em; }
li { margin-bottom: 0.35em; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }

/* ---------- 3. Layout-Tabelle ---------- */
table.layout,
table:has(td.menu) {
  width: 100% !important;
  max-width: 92rem;
  table-layout: auto;
  border-collapse: collapse;
  margin: 0 !important;
}

table.layout > tbody > tr > td,
table:has(td.menu) > tbody > tr > td { vertical-align: top; }

/* Inhaltsspalte */
table.layout td.inhalt,
table:has(td.menu) td.inhalt,
table:has(td.menu) > tbody > tr > td:first-child {
  width: auto;
  padding-right: clamp(1rem, 1.8vw, 1.75rem);
}

/* Menüspalte */
table.layout td.menu,
table:has(td.menu) td.menu {
  width: 17rem;
  padding-left: clamp(0.5rem, 1vw, 1rem);
  font-size: 1.30em;
  line-height: 1.5;
}

/* ---------- 4. Navigation ---------- */
td.menu h3,
.menu h3 {
  font-size: 1rem;
  font-style: normal;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--nav-label);
  margin: 1.6em 0 0.45em;
}

td.menu ul, .menu ul { list-style: none; padding-left: 0; margin: 0 0 1.1em; }
td.menu ul ul, .menu ul ul { padding-left: 0.9em; margin-bottom: 0.4em; }
td.menu li, .menu li { margin-bottom: 0.4em; }
td.menu a, .menu a { text-decoration: none; }
td.menu a:hover, .menu a:hover { text-decoration: underline; }

/* ---------- 5. Fusszeile (ausserhalb der Tabelle) ---------- */
.fusszeile {
  margin-top: 2.5rem;
  font-size: 0.1em;
  line-height: 1.05;
  color: var(--faint);
  max-width: none;
  width: 100%;
}

.fusszeile p {
  margin: 0 0 0.6em;
  max-width: none;
}

.fusszeile img {
  margin: 0.3rem 0 0.6rem;
  max-width: 20rem;
}

/* Fallback ohne Klasse – gleiche Werte */
table:has(td.menu) ~ div,
table:has(td.menu) ~ p {
  font-size: 0.78em;
  line-height: 1.55;
  color: var(--faint);
  max-width: none;
  width: 100%;
}

/* ---------- 6. Breakpoint: früh stapeln (960 px) ---------- */
@media (max-width: 60rem) {
  body { padding: 1rem; }

  table.layout, table:has(td.menu),
  table.layout tbody, table:has(td.menu) tbody,
  table.layout tr, table:has(td.menu) tr,
  table.layout td, table:has(td.menu) td {
    display: block;
    width: auto !important;
    max-width: none;
  }

  table.layout td.inhalt,
  table:has(td.menu) td.inhalt,
  table:has(td.menu) > tbody > tr > td:first-child {
    padding-right: 0;
    padding-bottom: 1.5rem;
  }

  table.layout td.menu,
  table:has(td.menu) td.menu {
    width: auto !important;
    padding-left: 0;
    border-top: 1px solid var(--rule);
    margin-top: 0.5rem;
    padding-top: 1.3rem;
  }

  td.menu ul, .menu ul { columns: 2; column-gap: 2rem; }
  td.menu ul ul, .menu ul ul { columns: 1; }
}

@media (max-width: 26rem) {
  td.menu ul, .menu ul { columns: 1; }
}

/* ---------- 7. Aufklappbares Menü ---------- */
.menu summary {
  cursor: pointer;
  font-weight: bold;
  padding: 0.4rem 0;
}
@media (min-width: 60.01rem) {
  .menu summary { display: none; }
}

/* ---------- 8. Umschalter-Knopf ---------- */
.theme-toggle {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;

  font: inherit;
  font-size: 0.8rem;
  line-height: 1;
  padding: 0.5rem 0.7rem;

  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 0.4rem;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--nav-label); }

/* Nur zeigen, wenn du den Umschalter einbaust */