/* dienstagsrunde.de – Farben und Schriften aus dem FrontPage-Design "diru 1011" */

:root {
  --gelb: #fc0;
  --hell: #ffc;
  --blau: #00f;
  --signatur: #36f;
  --besucht: #690;
  --grau: #808080;
  --banner: 56px;
  --menue: 176px;
  --comic: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive;
  --fett: "Arial Black", "Arial Bold", Arial, Helvetica, sans-serif;
  --cooper: "Cooper Black", "Arial Black", Impact, serif;
}

* { box-sizing: border-box; }

html { color-scheme: dark; scroll-padding-top: var(--banner); }

body {
  margin: 0;
  background: #000 url(bilder/sterne.jpg);
  color: var(--hell);
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

a { color: var(--gelb); }
a:visited { color: var(--besucht); }
a:active { color: #f63; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--hell); outline-offset: 2px; }

h1, h2, h3 { color: var(--gelb); font-weight: normal; line-height: 1.2; }
h1 { font-size: 2rem; margin: 0.4em 0 0.6em; }
h1 small { font-size: 1.1rem; font-style: italic; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }
hr { border: 0; border-top: 1px dashed var(--hell); margin: 1.5em 0; }
img { max-width: 100%; height: auto; }

.sprung { position: absolute; left: -999em; }
.sprung:focus { left: 8px; top: 8px; z-index: 30; background: #000; padding: 4px 8px; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.rechts { text-align: right; }
.mitte { text-align: center; }
.breit { display: block; }

/* Aufteilung wie das alte Frameset: Banner oben, Menü links, Inhalt rechts */

.banner {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--banner);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: #000 url(bilder/sterne.jpg);
}
.banner .logo { display: block; line-height: 0; }

.rahmen { display: grid; grid-template-columns: var(--menue) minmax(0, 1fr); }

.menue {
  position: sticky;
  top: var(--banner);
  align-self: start;
  max-height: calc(100vh - var(--banner));
  overflow-y: auto;
  padding: 4px 6px 16px;
  text-align: center;
}
.menue ul { list-style: none; margin: 0; padding: 0; }
.menue li { margin: 5px 0; }

/* Nachbau der FrontPage-Hoverschaltflächen: gelbe fette Schrift, beim Überfahren blaues Leuchten */
.menue li a, .knopf {
  display: inline-block;
  min-width: 80px;
  padding: 3px 10px;
  border: 0;
  border-radius: 2px;
  background: #000;
  color: var(--gelb);
  font: bold 14px/18px Arial, Helvetica, sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.menue li a:visited, .knopf:visited { color: var(--gelb); }
.menue li a:hover, .menue li a:focus-visible, .knopf:hover, .knopf:focus-visible {
  background: radial-gradient(ellipse at center, var(--blau) 0%, #000 78%);
}
.menue li a[aria-current] { text-decoration: underline; text-underline-offset: 3px; }

/* Schloss an Verweisen, die in den geschützten Bereich führen */
a[data-zu]::after {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.8em;
  margin-left: 0.35em;
  background: currentColor;
  opacity: 0.6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M3 7V5a4 4 0 0 1 8 0v2h1v9H2V7zm2 0h4V5a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M3 7V5a4 4 0 0 1 8 0v2h1v9H2V7zm2 0h4V5a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.menuefuss { margin-top: 18px; font-size: 11px; font-family: "Palatino Linotype", Palatino, Georgia, serif; }
.menuefuss p { margin: 2px 0; }
.menuefuss a { color: var(--hell); }
.menuefuss .musik { margin-bottom: 12px; font-size: 12px; }
.musik[aria-pressed="true"] { background: radial-gradient(ellipse at center, var(--blau) 0%, #000 78%); }

.zaehler { margin: 0 0 10px !important; }
.zaehler .ziffern { display: block; margin-bottom: 2px; }
.zaehler .ziffern span {
  display: inline-block;
  min-width: 14px;
  margin: 0 1px;
  padding: 2px 0;
  border: 1px solid var(--gelb);
  border-radius: 2px;
  background: #1a1200;
  color: var(--gelb);
  font: bold 14px/1 "Courier New", Courier, monospace;
}

.menueknopf { display: none; }

main { min-width: 0; padding: 4px 20px 48px 12px; }

/* News */

.meldung { margin: 0 0 1.3em; }
.meldung .datum { margin: 0 0 0.35em; color: var(--hell); font: 900 0.82rem var(--fett); }
.meldung .text { margin: 0; font-family: var(--comic); font-size: 0.94rem; }
.meldung .text a, .meldung .text a:visited { color: var(--hell); }
.meldung .text img { vertical-align: middle; }
.autor { margin-left: 0.3em; color: var(--signatur); font: italic 900 0.66rem var(--fett); }

/* On Tour: Jahresspalten */

.jahre { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 8px; }
.jahre section { text-align: center; }
.jahre h2 { margin: 0 0 6px; color: var(--hell); font: italic bold 2rem var(--cooper); white-space: nowrap; }
.jahre ul { list-style: none; margin: 0; padding: 0; }
.jahre li { margin: 10px 0; }
.jahre .knopf { min-width: 0; }
.jahre .schmuck { margin-top: 10px; }

/* Galerie */

.galerie {
  list-style: none;
  margin: 1.2rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
}
.galerie li { margin: 0; text-align: center; font-size: 0.8rem; }
.galerie a { display: block; aspect-ratio: 4 / 3; border: 1px solid #fff; background: #000; overflow: hidden; }
.galerie a:hover, .galerie a:focus-visible { border-color: var(--gelb); box-shadow: 0 0 8px var(--blau); }
.galerie img { display: block; width: 100%; height: 100%; object-fit: cover; }
.galerie .bu { display: block; margin-top: 3px; }
.galerie-fuss { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: center; }
.anzahl { color: var(--grau); font-size: 0.85rem; }

.lichtkasten {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.94);
  color: var(--hell);
}
.lichtkasten::backdrop { background: #000; }
.lichtkasten[open] { display: grid; grid-template: 44px minmax(0, 1fr) auto / 56px minmax(0, 1fr) 56px; }
.lichtkasten .lk-zahl { grid-area: 1 / 1 / 2 / 3; align-self: center; padding-left: 14px; font-size: 0.9rem; }
.lichtkasten button {
  border: 0;
  background: none;
  color: var(--gelb);
  font: bold 2.2rem/1 Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.lichtkasten button:hover { text-shadow: 0 0 10px var(--blau), 0 0 4px var(--blau); }
.lichtkasten .lk-zu { grid-area: 1 / 3; }
.lichtkasten .lk-vor { grid-area: 2 / 1; }
.lichtkasten .lk-nach { grid-area: 2 / 3; }
.lichtkasten figure {
  grid-area: 2 / 2;
  margin: 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lichtkasten img { border: 1px solid #fff; max-width: none; }
.lichtkasten .lk-text { grid-area: 3 / 1 / 4 / 4; min-height: 2.2em; padding: 6px 12px 10px; text-align: center; }

/* Kontakt und Steckbriefe */

.kontaktkopf img { vertical-align: middle; margin-left: 0.5em; }
.mitglieder {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 44px 8px;
  max-width: 900px;
  text-align: center;
}
.mitglieder img { border: 2px solid var(--gelb); width: 76px; height: 90px; object-fit: cover; }
.mitglieder .name { display: block; margin-top: 12px; }

.steckbrief { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 16px 42px; max-width: 760px; }
.steckbild { position: relative; display: block; margin: 0 auto; width: fit-content; line-height: 0; }
.steckbild .klickpunkt { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }
.steckbrief .links { text-align: center; }
.steckbrief .unter-bild { margin: 8px 0 0; color: var(--grau); font-size: 0.82rem; }
.steckbrief .name { margin: 0.2em 0 0.6em; color: var(--hell); font-size: 1.5rem; font-weight: bold; }
.steckbrief dl { display: grid; grid-template-columns: 10.5em minmax(0, 1fr); gap: 12px 8px; margin: 0; font-size: 0.85rem; }
.steckbrief dt, .steckbrief dd { margin: 0; }
.steckbrief dd a, .steckbrief dd a:visited { color: var(--hell); }
.steckbrief dd img { vertical-align: middle; }

/* Kasse */

.tabelle-rollen { overflow-x: auto; margin: 0 0 1rem; }
.kasse { border-collapse: separate; border-spacing: 3px; border: 1px outset #990; }
.kasse th, .kasse td { border: 1px inset #990; padding: 6px; text-align: center; white-space: nowrap; height: 43px; }
.kasse .jahr { color: var(--hell); font: italic bold 1.15rem var(--cooper); text-align: left; }
.kasse .monat, .kasse .wer { color: var(--gelb); font: italic bold 1rem "Century Gothic", "Trebuchet MS", Arial, sans-serif; }
.kasse .wer { position: sticky; left: 0; background: #000; min-width: 89px; }
.kasse td { font-size: 0.85rem; }
.kasse td img { display: block; margin: 0 auto; max-width: none; }
.kasse .kreuz { color: var(--gelb); font-size: 1.15rem; font-weight: bold; }
.kasse .schwein { position: sticky; left: 0; background: #000; }

/* Links */

.linkliste {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 36px 20px;
  text-align: center;
  font-family: var(--comic);
}
.linkliste a, .linkliste a:visited { color: var(--gelb); }
.linkliste .rot { color: #f00; }
.linkliste .gruen { color: #3c3; }
.linkliste .blau { color: var(--signatur); font: bold 1.05rem "Palatino Linotype", Palatino, Georgia, serif; }
.linkliste .offline { color: var(--grau); text-decoration: line-through; }
.linkliste .offline img { filter: grayscale(1); opacity: 0.5; }
.linkliste .vermerk { display: block; color: var(--grau); font-size: 0.72rem; }
.linkliste .notiz { display: block; margin-top: 8px; font: 0.7rem Arial, Helvetica, sans-serif; text-align: left; }
.hinweis { color: var(--grau); font-size: 0.85rem; }

/* Kalender */

.kalender { max-width: 900px; }
.kalender iframe { display: block; width: 100%; height: 620px; border: 0; background: #fff; }
.kalender .kasten { padding: 20px; border: 1px dashed var(--hell); }

/* Rechtliches und freie Seiten */

.fliesstext { max-width: 46em; font-size: 0.95rem; }
.fliesstext h2 { margin-top: 1.6em; font-size: 1.25rem; }
.platzhalter { background: #400; padding: 0 4px; color: #fff; }

/* Schmale Bildschirme: Menü klappt unter das Banner */

@media (max-width: 720px) {
  .rahmen { display: block; }
  .menueknopf {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--gelb);
    border-radius: 3px;
    background: #000;
    color: var(--gelb);
    font: bold 14px Arial, Helvetica, sans-serif;
    cursor: pointer;
  }
  .menue {
    display: none;
    position: fixed;
    top: var(--banner);
    left: 0;
    right: 0;
    z-index: 15;
    max-height: calc(100vh - var(--banner));
    border-bottom: 1px solid var(--gelb);
    background: #000 url(bilder/sterne.jpg);
  }
  .menue.offen { display: block; }
  .menue li a { min-width: 160px; padding: 9px 10px; font-size: 16px; }
  main { padding: 4px 14px 40px; }
  h1 { font-size: 1.6rem; }
  .meldung .text { font-size: 1rem; }
  .mitglieder { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 28px 8px; }
  .steckbrief { grid-template-columns: minmax(0, 1fr); }
  .steckbrief dl { grid-template-columns: 8.5em minmax(0, 1fr); font-size: 0.95rem; }
  .galerie { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
  .lichtkasten[open] { grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .jahre { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

@media (prefers-reduced-motion: no-preference) {
  .menue li a, .knopf { transition: background 0.15s; }
}