/* =========================================================
   1) Design-Tokens / Variablen
   ========================================================= */
:root {
  /* Basisfarben / Brand */
  /* --gptbasis:#4ba79c; */
  --gptbasis: #5B3B87;
  /* --gptlogofarbe:#d24228; */
  --gptlogofarbe: #D45077;

  /* Farbspektrum */
  --gptblue: #C1E1EE;
  --gptblau: #476195;
  --gptgelb: #FDF391;
  --gpthellgruen: #DDE28E;
  --gptlila: #6D5092;
  --gptrose: #DE8C9A;
  --gptrot: #D45077;

  /* Themen / Kampagnen */
  --matabg: #ffcb06;
  --matatext: #d02835;
  --mausbg: #F0DBDB;
  --maustext: #A65886;
  --vetterbg: #0072bc;
  --vettertext: #fac0bf;
  --laechelnbg: #0083b7;
  --laechelntext: #feca26;
  --vogelbg: #D2909B;
  --vogeltext: #5A4581;

  --gptstudio: var(--gptgelb);
  --gptstudiotext: var(--gptrot);
  --gptspende: var(--gptgelb);

  /* Produktionen */
  --lesmisbg: #663A78;
  --lesmistext: #76B3C5;
  --peerbg: #F3DA88;
  --peertext: #B25F90;
  --zauberbg: #476195;
  --zaubertext: #DDE28E;
  --weiberbg: #486195;
  --weibertext: #d97588;
  --troyabg: #F3DA89;
  --troyatext: #489772;

  --carmenbg: #434076;
  --carmentext: #DA6884;
  --piratenbg: #C5E1E8;
  --piratentext: #614B8A;
  --alcinabg: #366DA7;
  --alcinatext: #FDF39E;
  --cagebg: #86306A;
  --cagetext: #93C7EC;
  --waldmeisterbg: #DA6884;
  --waldmeistertext: #C8DEBD;
  --liebestrankbg: #D3E3F2;
  --liebestranktext: #434076;
  --parisbg: #FDF17B;
  --paristext: #434076;

  /* Kampagne MUT */
  --mut: #F0E456;
  --muttext: #C7482C;
}

/* =========================================================
   2) Base / Reset / Typo
   ========================================================= */
html {
  -webkit-font-smoothing: antialiased;
  background: #e6e9e9;
  background-image: linear-gradient(270deg, rgb(230, 233, 233) 0%, rgb(216, 221, 221) 100%);
}

body {
  background: #FFF;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
  color: #545454;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  height: 100%;
  line-height: 1.5;
  margin: 80px auto;
  padding: 2em 2em 4em;
}

h1, h2, h3, h4, h5, h6 {
  color: #222;
  font-weight: 600;
}

b, strong {
  font-weight: 600;
}

a {
  color: inherit;
}

/* =========================================================
   3) Layout-Container (Header/Main/Footer/Nav)
   ========================================================= */
header,
main,
footer {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
  color: #545454;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 1000px;
  padding: 8px;
}

header {
  background: #fff;
  font-size: 16px;
}

main {
  background: var(--gptblue);
  font-size: 16px;
}

footer {
  background-color: var(--gptgelb);
  font-size: 16px;
}

main h2,
header h2 {
  background-color: var(--gptlogofarbe);
  color: #fff;
  line-height: 1.0;
  margin: 3px auto;
  margin-top: 1.3em;
  padding: 8px;
}

footer h2 {
  font-size: 16px;
  text-transform: uppercase;
}

footer h2 a,
footer h3 a {
  color: darkblue;
  text-decoration: none;
}

nav {
  color: var(--gptlogofarbe);
  font-weight: bold;
  max-width: 1000px;
}

nav#menu {
  height: 100%;
  width: auto;
}

nav a {
  color: var(--gptlogofarbe);
}

/* =========================================================
   4) Links & Buttons
   ========================================================= */
a#button {
  background-color: var(--gptbasis);
  color: #fff; /* vorher var(--gptlogofarbe) auskommentiert */
  font-weight: 600;
  text-decoration: none;
}

a.termin {
  text-decoration: none;
}

a#ticket {
  background-color: darkred;
  color: azure;
  font-size: 20pt;
}

button.start,
button.start2,
button.gpt,
button.b50,
button.b1,
button.senden,
button.text,
button.kalender,
button.news,
button.spende,
button.termin,
a.termin,
button.linkstudio {
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
}

button.start {
  background-color: var(--gptbasis);
  color: #fff;
  font-size: 15px;
  height: 70px;
  width: 95%;
}

button.start2 {
  background-color: var(--gptbasis);
  color: #fff;
  font-size: 15px;
  height: 70px;
  width: 50%;
}

button.gpt {
  background-color: var(--gptlila);
  color: var(--gpthellgruen);
  font-size: 15px;
  height: 70px;
}

button.b50 {
  background-color: var(--gptrot);
  color: var(--gptgelb);
  float: none;
  font-size: 15px;
  height: 70px;
  margin: 5px 5px 5px 0;
  text-align: center;
  width: 50%;
}

button.b1 {
  background-color: var(--gptrot);
  color: var(--gptgelb);
  font-size: 15px;
  height: 30px;
  margin: 5px 5px 5px 0;
  text-align: center;
}

button.senden {
  background-color: var(--gptrot);
  color: var(--gptgelb);
  float: left;
  font-size: 15px;
  height: 70px;
  margin: 5px 5px 5px 0;
  text-align: center;
  width: 30%;
}

button.text {
  font-size: 15px;
  height: 70px;
}

button.termin,
a.termin {
  font-size: 12px;
  height: 170px;
  vertical-align: top;
  width: 100%;
}

button.linkstudio {
  font-size: 12px;
  height: 170px;
  vertical-align: top;
  width: 100%;
}

button#linkstudio {
  background-color: var(--gptstudio);
  color: var(--gptstudiotext);
}

button#meisterklasse {
  background-color: #663A78;
  color: #76B3C5;
}

button.kalender {
  background-color: var(--gptgelb);
  color: var(--gptrot);
  font-size: 15px;
  font-weight: 800;
  height: 70px;
  text-align: center;
  vertical-align: middle;
  width: 50%;
}

button.news {
  background-color: #FAF0E6;
  color: #000;
  min-height: 270px;
  text-align: left;
  vertical-align: top;
}

button.spende {
  background-color: var(--gptspende);
  color: var(--gptblau);
  font-size: 20px;
  font-weight: 800;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  width: 50%;
}

button.nav_link {
  height: auto;
  width: 300%;
}

/* =========================================================
   5) Content-Blöcke & Hilfsklassen
   ========================================================= */
a#aktuelles {
  background-color: WhiteSmoke;
  color: var(--gptlogofarbe);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

ul#aktuelles {
  background-color: WhiteSmoke;
  line-height: 1.0;
  margin: 3px auto;
  margin-top: 1.3em;
  padding: 8px;
}

h2.studio {
  background-color: var(--gptstudio);
  color: var(--gptstudiotext);
  line-height: 1.0;
  margin: 0 auto;
  padding: 8px;
}

div.studio {
  background-color: var(--gptstudio);
  padding: 8px;
}

h2.mut {
  background-color: var(--mut);
  color: var(--muttext);
  line-height: 1.0;
  margin: 0 auto;
  padding: 8px;
}

div.mut {
  background-color: var(--mut);
  padding: 8px;
}

h2.mata {
  background-color: var(--matabg);
  color: var(--matatext);
  line-height: 1.0;
  margin: 0 auto;
  padding: 8px;
}

div.mata {
  background-color: var(--matabg);
  padding: 8px;
}

h2.vogel {
  background-color: var(--vogelbg);
  color: var(--vogeltext);
  line-height: 1.0;
  margin: 0 auto;
  padding: 8px;
}

div.vogel {
  background-color: var(--vogelbg);
  color: var(--vogeltext);
  padding: 8px;
}

h2.maus {
  background-color: var(--mausbg);
  color: var(--maustext);
  line-height: 1.0;
  margin: 0 auto;
  padding: 8px;
}

div.maus {
  background-color: var(--mausbg);
  color: var(--maustext);
  padding: 8px;
}

h2.vetter {
  background-color: var(--vetterbg);
  color: var(--vettertext);
  line-height: 1.0;
  margin: 0 auto;
  padding: 8px;
}

div.vetter {
  background-color: var(--vetterbg);
  color: #fff;
  padding: 8px;
}

h3.laecheln {
  background-color: var(--laechelnbg);
  color: var(--laechelntext);
  line-height: 1.0;
  margin: 0 auto;
  padding: 8px;
}

h3.box,
h3.boxnews {
  color: #000;
  line-height: 1.0;
  margin: 0 auto;
  min-height: 50px;
  padding: 0;
  vertical-align: top;
}

h3.box_lila,
h3.box_blau,
h3.box_rot {
  font-size: 10pt;
  line-height: 1.4;
  margin: 0 auto;
  min-height: 100px;
  padding: 0;
  text-align: center;
  vertical-align: top;
}

h3.box_lila { color: var(--gptlila); }
h3.box_blau { color: var(--gptblau); }
h3.box_rot  { color: var(--gptrot); }

div.datum { text-align: right; }

div.laecheln {
  background-color: var(--laechelnbg);
  color: var(--laechelntext);
  padding: 8px;
}

header h3 {
  color: var(--gptbasis);
  line-height: 1.0;
  margin: 3px auto;
  margin-top: 1.3em;
  padding: 8px;
}

div.hinweis {
  color: var(--gptbasis);
  font-weight: 600;
  margin: 3px auto;
  padding: 8px;
}

.box80 {
  margin-left: 10%;
  margin-right: 10%;
  width: 80%;
}

.zitat {
  background-color: #fff;
  color: #8FBC8F;
  font: italic;
  padding: 8px;
  text-align: left;
}

.zitat-von {
  background-color: #fff;
  color: #708090;
  padding: 8px;
  text-align: right;
}

samp { display: none; }

/* =========================================================
   6) Formulare & Felder
   ========================================================= */
fieldset div { width: 100%; }

label { min-width: 100px; }

div#label { min-width: 100px; }

textarea.form { width: 20em; }

td.labelma { width: 25%; }

td.eingabe input,
td.eingabe select { width: 35%; }

td.eingabe input.hnr,
td.eingabe input.plz { width: 10%; }

select,
option,
input {
  font-size: 15px;
  width: 66%;
}

input#sepa_erlaubnis,
input#agb {
  width: 6%;
}

input.senden {
  background-color: var(--gptbasis);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  height: 70px;
  text-align: center;
  vertical-align: middle;
  width: 66%;
}

select#item-options,
select#quantitySelect {
  font-size: 25px;
}

/* Nur innerhalb des Formulars .anmeldeform überschreiben */
.anmeldeform td:first-child {
  vertical-align: top;
  font-weight: normal;
  white-space: nowrap;
  padding-top: 2px;
}

.anmeldeform label,
.anmeldeform input,
.anmeldeform select,
.anmeldeform textarea {
  width: auto !important;
  min-width: 0 !important;
  font-size: 15px;
}

.anmeldeform label {
  display: block;
  margin: 0 !important;
  line-height: 1.25;
}

.anmeldeform label > span { margin-left: .25rem; }

.anmeldeform .indent { padding-left: 2rem; }

.anmeldeform .inline-options label {
  display: inline-block;
  margin-right: 1rem !important;
}

.anmeldeform textarea.form { width: 28em !important; }

.anmeldeform input.senden,
.anmeldeform button.senden {
  width: auto !important;
  min-width: 10rem;
  height: 3rem;
}

/* =========================================================
   7) Tabellen & Termin-Boxen
   ========================================================= */
table { width: 100%; }

td#stammtisch, button#stammtisch, a#stammtisch { background-color: lemonchiffon; }

td#meet, button#meet, a#meet { background-color: #99d1c8; }

td#mata, button#mata { background-color: #ffcb06; }

td#fledermaus, td#fledermaus a, button#fledermaus {
  background-color: var(--mausbg);
  color: var(--maustext);
}

td#cage, td#cage a, button#cage, a#cage {
  background-color: var(--cagebg);
  color: var(--cagetext);
}

td#cage h3,
td#cage h4 { color: var(--cagetext); }

td#vogel, td#vogel a, button#vogel, a#vogel {
  background-color: var(--vogelbg);
  color: var(--vogeltext);
}

td#meet h3.termin { color: var(--gptlogofarbe); } /* vorher --gptlogo (nicht definiert) */

td#fuehrung, button#fuehrung, a#fuehrung { background-color: lightblue; }

td#verein, button#verein, a#verein { background-color: violet; }

/* td#theater war doppelt – behalten wir die Variante mit Variablen */
td#theater, button#theater, a#theater {
  background-color: var(--gpthellgruen);
  color: #000;
}

td#mut, button#mut, a#mut {
  background-color: var(--mut);
  color: #000;
}

td#fahrt, button#fahrt, a#fahrt { background-color: lightcoral; }

td#liebestrank, button#liebestrank, a#liebestrank { background-color: lightcoral; }

td#fremdgehen { background-color: lightyellow; }

table#beitrag { max-width: 50em; }

table#beitrag tr {
  background-color: var(--gptgelb);
  color: #000;
}

th.beitrag,
td.beitrag { text-align: right; }

div#termin_titel {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

div#fehler { color: red; }

div#termin_person,
div#termin_person a {
  color: darkgoldenrod;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

div#termin_untertitel {
  font-size: 16px;
  text-align: center;
  text-decoration: none;
}

div#ort,
div#ort a {
  font-size: 16px;
  text-align: center;
  text-decoration: none;
}

div#beschreibung {
  font-size: 15px;
  text-decoration: none;
}

figcaption,
div#foto {
  font-size: 10px;
  text-align: center;
  text-decoration: none;
}

div#fkgpt {
  color: var(--gptlogofarbe);
  font-size: 15px;
  font-weight: bold;
  text-align: left;
  text-transform: none;
  text-decoration: none;
}

div#rolle {
  color: darkblue;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

/* =========================================================
   8) Bilder / Medien
   ========================================================= */
img {
  animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
  background: transparent;
  display: block;
  margin: 1.3em auto;
  max-width: 95%;
}

img.termin { width: 65%; }
img.qr { width: 60%; }

img.article { width: auto; }

@media all {
  img.article { max-height: 70em; }
}

@media all and (min-width: 70em) {
  img.article { max-height: 25em; }
}

img.nwl {
  max-height: 10em;
  width: auto;
}

/* =========================================================
   9) Navigation Icons / Burger & Close
   ========================================================= */
#navlink {
  font-size: 2em;
  text-decoration: none;
  position: fixed;
  top: 1em;
  left: 1em;
  display: inline-block;
  width: 1px;
  overflow: hidden;
  padding-left: 1em;
  margin-right: 2rem;
}

#navlink::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 1em;
  height: 0.2em;
  border-top: 0.6em double var(--gptbasis);
  border-bottom: 0.2em solid var(--gptbasis);
}

#cross-rounded-borders {
  font-size: 2.5em;
  font-weight: bold;
  text-decoration: none;
  position: fixed;
  top: 0.5em;
  left: 1em;
  display: inline-block;
  width: 1px;
  overflow: hidden;
  padding-left: 1em;
  margin-right: 2rem;
}

#cross-rounded-borders::before {
  content: "X";
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 1em;
  height: 0.2em;
  color: var(--gptbasis);
}

/* =========================================================
   10) Animationen
   ========================================================= */
@keyframes colorize {
  0% {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
  }
  100% {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
  }
}

/* =========================================================
   11) Listen / Menüs
   ========================================================= */
.ical::before {
  content: "\f073" !important;
}

ul.menu {
  color: var(--gptbasis);
  font-size: 25px;
  list-style: none;
  text-align: center;
  text-decoration: none;
}

ul.menu li { margin: 20px; }

ul.menu li h2 {
  background-color: var(--gptgelb);
  color: var(--gptlogofarbe);
  font-size: 25px;
  margin: 0;
  padding: 0;
}

ul.menu li a {
  border-bottom: 0.2em solid var(--gptlogofarbe);
  color: var(--gptbasis);
  font-weight: bold;
  margin: 1em;
  text-decoration: none;
}

/* =========================================================
   12) Karten / Tabellen – responsive Varianten
   ========================================================= */
table#karte tr,
table#karte2 tr {
  color: #000;
}

@media all {
  table#karte { max-width: 70em; }
  table#karte tr { background-color: var(--gptbasis); }
  th#karte, td#karte { text-align: right; }

  table#karte2 { max-width: 70em; }
  table#karte2 tr { background-color: var(--gptgelb); }
  th#karte2, td#karte2 { text-align: right; }
}

@media all and (min-width: 70em) {
  table#karte { max-width: 30em; }
  table#karte2 { max-width: 30em; }
}

/* =========================================================
   13) Grid-Container & Iframes
   ========================================================= */
.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.iframe {
  border: none;
  height: 310px;
  width: 100%;
}

@media all and (min-width: 70em) {
  .container { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

/* =========================================================
   14) Textboxen (Flex)
   ========================================================= */
.textbox-container,
.textbox_news-container {
  display: flex;
  flex-wrap: wrap;
}

.textbox,
.textbox_news,
.textbox_rose,
.textbox_gelb,
.textbox_gruen {
  border: 1px solid #ccc;
  box-sizing: border-box;
  flex: 1;
}

.textbox {
  margin: 10px;
  min-width: 300px;
  padding: 20px;
}

.textbox_news {
  margin: 1px;
  min-width: 250px;
  padding: 2px;
  vertical-align: top;
}

.textbox_rose {
  background-color: var(--gptrose);
  margin: 10px;
  min-width: 300px;
  padding: 20px;
}

.textbox_gelb {
  background-color: var(--gptgelb);
  margin: 10px;
  min-width: 300px;
  padding: 20px;
}

.textbox_gruen {
  background-color: var(--gpthellgruen);
  margin: 10px;
  min-width: 300px;
  padding: 20px;
}

/* Mobile Anpassungen */
@media screen and (max-width: 400px) {
  .textbox { flex-basis: calc(100% - 20px); }
  .textbox-container { flex-direction: column; }
}

/* =========================================================
   15) Sonstiges
   ========================================================= */
div#tag,
div#monat,
div#jahr {
  text-align: center;
}

div#tag {
  font-size: 30px;
  font-weight: bold;
}

div#monat,
div#jahr {
  font-size: 12px;
}

/* === HOTFIX: Altes Look&Feel beibehalten ===================== */

/* 1) Body-Abstände wieder wie vorher (kein 80px-Top-Margin) */
body {
  margin: 0 auto;      /* statt 80px auto */
  height: auto;        /* statt 100% */
}

/* 2) Linkfarben nicht global erben lassen */
a {
  color: initial;      /* nimmt Browser/erbte Farbe zurück */
}

/* 3) H2-Abstände nicht zusammenziehen */
main h2, header h2 {
  margin: 0 auto;      /* die 3px entfernen */
  margin-top: 1.3em;   /* das alte optische Gefühl behalten */
}

/* 4) News-Button wieder ohne vertikale Ausrichtung */
button.news {
  vertical-align: baseline; /* war vorher effektiv "ignoriert" */
}

/* 5) Meet-Überschrift nicht hart einfärben */
td#meet h3.termin {
  color: inherit;      /* statt var(--gptlogofarbe) */
}

/* 6) Senden-Button nicht zwangsweise 66% breit */
input.senden {
  width: auto;         /* statt 66% */
}

/* 7) Formular-Spezialregeln nur auf sehr schmalen Screens aktivieren */
@media screen and (max-width: 400px) {
  .anmeldeform td:first-child {
    vertical-align: top;
    font-weight: normal;
    white-space: nowrap;
    padding-top: 2px;
  }
  .anmeldeform label,
  .anmeldeform input,
  .anmeldeform select,
  .anmeldeform textarea {
    width: auto !important;
    min-width: 0 !important;
    font-size: 15px;
  }
  .anmeldeform label { display: block; margin: 0 !important; line-height: 1.25; }
  .anmeldeform label > span { margin-left: .25rem; }
  .anmeldeform .indent { padding-left: 2rem; }
  .anmeldeform .inline-options label { display: inline-block; margin-right: 1rem !important; }
  .anmeldeform textarea.form { width: 28em !important; }
  .anmeldeform input.senden,
  .anmeldeform button.senden { width: auto !important; min-width: 10rem; height: 3rem; }
}

/* ==== Stammtisch-Block gezielt stylen (kapselt Effekte von .container/.iframe) ==== */
.stammtisch-grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr; /* wie vorher: 2 Spalten */
}

.stammtisch-frame {
  width: 100%;
  height: 310px;   /* Deine bisherige Zielhöhe */
  border: none;
}

/* Ab breiter Screens: 4 Spalten */
@media all and (min-width: 70em) {
  .stammtisch-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* =========================================================
   MAIN.CSS – QUALITY & A11Y PATCH (non-breaking, additive)
   ========================================================= */

/* 0) Design-Vars: zentrale Breite, Spacing, Radius, Schatten */
:root {
  --page-max: 1000px;             /* gleiche Begrenzung für header/main/footer */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --radius-sm: .4rem;
  --radius-md: .8rem;
  --radius-lg: 1.2rem;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 10px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 18px rgba(0,0,0,.10);
  /* Breakpoints */
  --bp-sm: 30em;   /* ~480px */
  --bp-md: 48em;   /* ~768px */
  --bp-lg: 70em;   /* ~1120px (passt zu deinen Regeln) */
}

/* 1) Einheitliche Seitenbreite anwenden (nur falls vergessen) */
header, main, footer, nav {
  max-width: var(--page-max);
}

/* 2) Headings: konsistente Außenabstände ohne Optik zu ändern */
h1, h2, h3, h4, h5, h6 {
  margin-top: 1.2em;
  margin-bottom: .6em;
}

/* 3) Fokus-Ringe nur bei Tastaturbedienung (A11y, dezente Optik) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--gptlogofarbe) 70%, black 10%);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* 4) Hover-Zustände leicht aufwerten – nur wenn Hover vorhanden ist */
@media (hover: hover) and (pointer: fine) {
  a#button:hover,
  button.start:hover,
  button.start2:hover,
  button.gpt:hover,
  button.b50:hover,
  button.b1:hover,
  button.senden:hover,
  button.text:hover,
  button.kalender:hover,
  button.news:hover,
  button.spende:hover,
  button.termin:hover,
  button.linkstudio:hover {
    filter: brightness(1.03);
  }
}

/* 5) Bevorzuge weniger Bewegung: Animationen abschalten */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 6) Nützliche Utilities (opt-in, keine bestehende Optik verändert) */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

.center-block {
  margin-left: auto !important;
  margin-right: auto !important;
}

.maxw-30 { max-width: 30rem !important; }
.maxw-40 { max-width: 40rem !important; }
.maxw-50 { max-width: 50rem !important; }

/* 7) Bessere Tabellen-Lesbarkeit (opt-in per Klasse .table-compact) */
.table-compact th,
.table-compact td {
  padding: .4rem .6rem;
}
.table-compact tr:nth-child(odd) {
  background: rgba(0,0,0,.03);
}

/* 8) Forms: Reaktionsschnelles Layout auf schmalen Screens (behutsam) */
@media screen and (max-width: 480px) {
  td.eingabe input,
  td.eingabe select,
  textarea.form {
    width: 100%;
  }
  input.senden,
  button.senden {
    width: auto;          /* du hast das schon für .anmeldeform geregelt – hier global defensiv */
    min-width: 10rem;
  }
}

/* 9) Bilder: harte Maximalhöhe nur in passenden Kontexten */
img.article {
  height: auto;
}

/* 10) Druck-Styles (dezent, damit Ausgaben brauchbar sind) */
@media print {
  html, body {
    background: #fff !important;
    box-shadow: none !important;
  }
  header, footer, nav {
    box-shadow: none !important;
    background: #fff !important;
  }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 90%;
    color: #444;
  }
  #navlink, #cross-rounded-borders { display: none !important; }
}


/* termin2 im Stammtisch-Kasten: niemals unterstreichen */
td#stammtisch a.termin2,
td#stammtisch a.termin2:visited,
td#stammtisch a.termin2:hover,
td#stammtisch a.termin2:active {
  text-decoration: none !important;
  color: inherit !important;
  display: block; /* weil du Block-Elemente im <a> hast */
}

/* falls eine Regel Unterstreichung auf Kind-Elemente legt */
td#stammtisch a.termin2 * {
  text-decoration: none !important;
}

/* Fokus sichtbar lassen (ohne Unterstreichung) */
td#stammtisch a.termin2:focus-visible {
  outline: 2px dotted currentColor;
  outline-offset: 2px;
  text-decoration: none !important;
}