@charset "utf-8";

/* ============================================================
   slotcar-treff.de
   Neuaufbau des bisherigen Layouts (Editorial by HTML5 UP)

   Ziele:
   - optisch praktisch identisch zum bisherigen Auftritt
   - dieselben Klassennamen, damit vorhandene Seiten weiterlaufen
   - keine externen Requests mehr (Google Fonts, Font Awesome)
   - Anzeigenflaechen, die AdSense messen und fuellen kann

   Wichtigste Aenderungen gegenueber main.css sind im Text
   kommentiert und in der Uebergabe zusammengefasst.
   ============================================================ */


/* ---------- 1. Farben, Masse, Schriften ---------- */

:root {
  --coral:        #f56a6a;   /* Akzentfarbe des Originals */
  --coral-weich:  rgba(245, 106, 106, 0.05);
  --coral-fest:   rgba(245, 106, 106, 0.15);

  --ueberschrift: #3d4449;
  --text:         #7f888f;
  --leise:        #9fa3a6;

  --linie:        rgba(210, 215, 217, 0.75);
  --linie-zart:   rgba(230, 235, 237, 0.25);

  --leiste:       #f5f6f7;   /* Hintergrund Seitenleiste */
  --leiste-alt:   #eff1f2;   /* abgesetzter Block darin */

  --radius:       0.375em;

  /* Die Seitenleiste ist bewusst breiter als bisher.
     Vorher: 26em bei 0.9em Schriftgroesse, abzueglich 2,2em
     Innenabstand auf jeder Seite - das ergab rund 285 px
     nutzbare Breite. Eine 300er Anzeige passt da nicht hinein,
     und genau daran scheitern in der Regel die Standardformate
     in der Seitenleiste. Jetzt bleiben ueber 340 px frei. */
  --leiste-breite: 27rem;
  --leiste-innen:  2.2rem;

  /* Zwei Schriften wie bisher: Grotesk fuer den Fliesstext,
     Slab-Serif fuer Ueberschriften und Navigation.
     Siehe Abschnitt 2 zum Selbsthosten. */
  --ff-text: "Open Sans", "Segoe UI", Roboto, -apple-system,
             "Helvetica Neue", Arial, sans-serif;
  --ff-head: "Roboto Slab", "Bitter", "Droid Serif", Georgia,
             "Times New Roman", serif;
}


/* ---------- 2. Schriften selbst ausliefern ---------- */

/* Bisher wurden Open Sans und Roboto Slab per @import direkt von
   fonts.googleapis.com geladen. Das uebertraegt bei jedem Aufruf
   die IP-Adresse des Besuchers an Google und ist in Deutschland
   abgemahnt worden. Ausserdem kostet der fremde Server zwei
   zusaetzliche Verbindungen vor dem ersten Textbild.

   Loesung: die beiden Schriften einmal als WOFF2 herunterladen,
   nach /fonts/ legen und die folgenden Bloecke aktivieren. Bis
   dahin greift die Fallback-Kette oben, das Layout steht trotzdem.

@font-face {
  font-family: "Open Sans";
  src: url("fonts/open-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/open-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/open-sans-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Roboto Slab";
  src: url("fonts/roboto-slab-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto Slab";
  src: url("fonts/roboto-slab-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
*/


/* ---------- 3. Grundlagen ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Bisher: 13pt, per Media Query auf 11pt, 10pt und 9pt gestuft.
     Punktangaben sind fuer Bildschirme unpassend und die Stufen
     sprangen sichtbar. Jetzt gleitet die Groesse stufenlos mit. */
  font-size: clamp(15px, 0.9rem + 0.25vw, 17.5px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #ffffff;
  color: var(--text);
  font-family: var(--ff-text);
  font-weight: 400;
  line-height: 1.65;
}

/* Verhindert, dass beim Laden Animationen losspringen. */
body.is-preload *,
body.is-preload *::before,
body.is-preload *::after {
  animation: none !important;
  transition: none !important;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--coral);
  border-bottom: dotted 1px;
  text-decoration: none;
  transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
}
a:hover {
  border-bottom-color: var(--coral);
  color: var(--coral);
}

strong, b { color: var(--ueberschrift); font-weight: 600; }
em, i { font-style: italic; }

p { margin: 0 0 2em 0; }

h1, h2, h3, h4, h5, h6 {
  color: var(--ueberschrift);
  font-family: var(--ff-head);
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 1em 0;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: inherit;
  border-bottom: 0;
}

/* Das Original sprang von 4em auf 3,5em, 3,25em und 2em.
   clamp() macht daraus einen weichen Verlauf. */
h1 { font-size: clamp(2em, 1.2em + 2.6vw, 3.6em); line-height: 1.25; margin-bottom: 0.5em; }
h2 { font-size: clamp(1.5em, 1.3em + 0.6vw, 1.75em); }
h3 { font-size: 1.25em; }
h4 { font-size: 1.1em; }
h5 { font-size: 0.9em; }
h6 { font-size: 0.7em; }

sub { font-size: 0.8em; position: relative; top: 0.5em; }
sup { font-size: 0.8em; position: relative; top: -0.5em; }

blockquote {
  border-left: solid 3px var(--linie);
  font-style: italic;
  margin: 0 0 2em 0;
  padding: 0.5em 0 0.5em 2em;
}

code {
  background: var(--linie-zart);
  border: solid 1px var(--linie);
  border-radius: var(--radius);
  font-family: "Courier New", monospace;
  font-size: 0.9em;
  margin: 0 0.25em;
  padding: 0.25em 0.65em;
}

pre {
  font-family: "Courier New", monospace;
  font-size: 0.9em;
  margin: 0 0 2em 0;
}
pre code { display: block; line-height: 1.75; padding: 1em 1.5em; overflow-x: auto; }

hr {
  border: 0;
  border-bottom: solid 1px var(--linie);
  margin: 2em 0;
}
hr.major { margin: 3em 0; }

.align-left   { text-align: left; }
.align-center { text-align: center; }
.align-right  { text-align: right; }

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 2px;
}

/* Sprungmarke - im Original fehlte sie ganz. */
.skiplink {
  position: absolute;
  left: -9999px;
  background: #fff;
  border: 1px solid var(--linie);
  color: var(--ueberschrift);
  padding: 0.6em 1em;
  z-index: 10001;
}
.skiplink:focus { left: 1em; top: 1em; }


/* ---------- 4. Listen, Boxen, Bilder ---------- */

ol { list-style: decimal; margin: 0 0 2em 0; padding-left: 1.25em; }
ol li { padding-left: 0.25em; }

ul { list-style: disc; margin: 0 0 2em 0; padding-left: 1em; }
ul li { padding-left: 0.5em; }

ul.alt { list-style: none; padding-left: 0; }
ul.alt li {
  border-top: solid 1px var(--linie);
  padding: 0.5em 0;
}
ul.alt li:first-child { border-top: 0; padding-top: 0; }

dl { margin: 0 0 2em 0; }
dl dt { display: block; font-weight: 600; margin: 0 0 1em 0; }
dl dd { margin-left: 2em; }

.box {
  border: solid 1px var(--linie);
  border-radius: var(--radius);
  margin-bottom: 2em;
  padding: 1.5em;
}
.box > :last-child,
.box > :last-child > :last-child { margin-bottom: 0; }
.box.alt { border: 0; border-radius: 0; padding: 0; }

.image { border-radius: var(--radius); display: inline-block; position: relative; }
.image img { border-radius: var(--radius); display: block; }
.image.left, .image.right { max-width: 40%; }
.image.left img, .image.right img { width: 100%; }
.image.left  { float: left;  padding: 0 1.5em 1em 0; top: 0.25em; }
.image.right { float: right; padding: 0 0 1em 1.5em; top: 0.25em; }
.image.fit  { display: block; margin: 0 0 2em 0; width: 100%; }
.image.fit img  { width: 100%; }
.image.main { display: block; margin: 0 0 3em 0; width: 100%; }
.image.main img { width: 100%; }

a.image { overflow: hidden; border-bottom: 0; }
a.image img { transition: transform 0.2s ease; }
a.image:hover img { transform: scale(1.075); }

/* Auf schmalen Displays sind 40 % breite Umflussbilder unlesbar. */
@media screen and (max-width: 736px) {
  .image.left, .image.right {
    float: none;
    display: block;
    max-width: 100%;
    padding: 0 0 1.5em 0;
  }
}

figure { margin: 0 0 2em 0; }
figure figcaption {
  font-size: 0.9em;
  color: var(--leise);
  margin-top: 0.5em;
}


/* ---------- 5. Tabellen ---------- */

.table-wrapper {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  margin: 0 0 2em 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 0 2em 0;
  width: 100%;
}
table tbody tr {
  border: solid 1px var(--linie);
  border-left: 0;
  border-right: 0;
}
table tbody tr:nth-child(2n + 1) { background-color: var(--linie-zart); }
table td { padding: 0.75em; }
table th {
  color: var(--ueberschrift);
  font-size: 0.9em;
  font-weight: 600;
  padding: 0 0.75em 0.75em 0.75em;
  text-align: left;
}
table thead { border-bottom: solid 2px var(--linie); }
table tfoot { border-top: solid 2px var(--linie); }

table.alt { border-collapse: separate; }
table.alt tbody tr td {
  border: solid 1px var(--linie);
  border-left-width: 0;
  border-top-width: 0;
}
table.alt tbody tr td:first-child { border-left-width: 1px; }
table.alt tbody tr:first-child td { border-top-width: 1px; }
table.alt thead { border-bottom: 0; }
table.alt tfoot { border-top: 0; }


/* ---------- 6. Schaltflaechen ---------- */

input[type="submit"], input[type="reset"], input[type="button"],
button, .button {
  appearance: none;
  background-color: transparent;
  border: 0;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 2px var(--coral);
  color: var(--coral);
  cursor: pointer;
  display: inline-block;
  font-family: var(--ff-head);
  font-size: 0.8em;
  font-weight: 700;
  height: 3.5em;
  letter-spacing: 0.075em;
  line-height: 3.5em;
  padding: 0 2.25em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.button { border-bottom: 0; }
input[type="submit"]:hover, input[type="reset"]:hover,
input[type="button"]:hover, button:hover, .button:hover {
  background-color: var(--coral-weich);
  color: var(--coral);
}
input[type="submit"]:active, input[type="reset"]:active,
input[type="button"]:active, button:active, .button:active {
  background-color: var(--coral-fest);
}
.button.fit   { width: 100%; }
.button.small { font-size: 0.6em; }
.button.large { font-size: 1em; height: 3.65em; line-height: 3.65em; }
.button.primary {
  background-color: var(--coral);
  box-shadow: none;
  color: #ffffff;
}
.button.primary:hover { background-color: #f37f7f; color: #ffffff; }
.button.disabled, .button:disabled {
  pointer-events: none;
  opacity: 0.25;
}

ul.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  list-style: none;
  margin: 0 0 2em 0;
  padding: 0;
}
ul.actions li { padding: 0; }
ul.actions.fit { width: calc(100% + 1em); }
ul.actions.fit li { flex: 1; }
ul.actions.fit li > * { width: 100%; }


/* ---------- 7. Formulare ---------- */

label {
  color: var(--ueberschrift);
  display: block;
  font-size: 0.9em;
  font-weight: 600;
  margin: 0 0 1em 0;
}

input[type="text"], input[type="email"], input[type="search"],
input[type="url"], input[type="tel"], select, textarea {
  appearance: none;
  background: transparent;
  border-radius: var(--radius);
  border: solid 1px var(--linie);
  color: inherit;
  display: block;
  outline: 0;
  padding: 0 1em;
  text-decoration: none;
  width: 100%;
  font: inherit;
  font-size: 1em;
}
input[type="text"], input[type="email"], input[type="search"],
input[type="url"], input[type="tel"], select { height: 2.75em; }
textarea { padding: 0.75em 1em; }

input:focus, select:focus, textarea:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 1px var(--coral);
}

::placeholder { color: var(--leise); opacity: 1; }


/* ---------- 8. Abschnittskoepfe ---------- */

section.special, article.special { text-align: center; }

header p {
  font-family: var(--ff-head);
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0.075em;
  margin-top: -0.5em;
  text-transform: uppercase;
}

/* Der charakteristische kurze Korallenstrich unter der Ueberschrift. */
header.major > :last-child {
  border-bottom: solid 3px var(--coral);
  display: inline-block;
  margin: 0 0 2em 0;
  padding: 0 0.75em 0.5em 0;
}
header.main > :last-child { margin: 0 0 1em 0; }


/* ---------- 9. Grundgeruest ---------- */

/* Frueher: display:flex mit row-reverse. Das ist mit den
   automatischen Anzeigen riskant - alles, was AdSense auf dieser
   Ebene einfuegt, wuerde als dritte Flex-Spalte landen und die
   beiden vorhandenen zusammenquetschen.

   Jetzt ein Raster mit fester Zuweisung: Seitenleiste in Spalte 1,
   Inhalt in Spalte 2, beide in Zeile 1. Ein eingefuegtes Element
   bekommt automatisch eine eigene Zeile ueber die volle Breite und
   kann nichts kaputtmachen. Die Quelltextreihenfolge bleibt
   Inhalt vor Navigation. */
#wrapper {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 100vh;
}
#sidebar { grid-column: 1; grid-row: 1; }
#main    { grid-column: 2; grid-row: 1; }
#wrapper > *:not(#main):not(#sidebar) { grid-column: 1 / -1; }

#main {
  min-width: 0;                  /* verhindert Ueberlauf breiter Tabellen */
  width: 100%;
}

#main > .inner {
  padding: 0 6em 0.1em 6em;
  margin: 0 auto;
  max-width: 110em;
}
#main > .inner > section {
  padding: 6em 0 4em 0;
  border-top: solid 2px var(--linie);
}
#main > .inner > section:first-of-type { border-top: 0 !important; }

@media screen and (max-width: 1680px) {
  #main > .inner { padding: 0 5em 0.1em 5em; }
  #main > .inner > section { padding: 5em 0 3em 0; }
}
@media screen and (max-width: 1280px) {
  #main > .inner { padding: 0 4em 0.1em 4em; }
  #main > .inner > section { padding: 4em 0 2em 0; }
}
@media screen and (max-width: 736px) {
  #main > .inner { padding: 0 1.5em 0.1em 1.5em; }
  #main > .inner > section { padding: 3em 0 1em 0; }
}


/* ---------- 10. Kopfbereich mit den vier Themenbereichen ---------- */

#header {
  border-bottom: solid 5px var(--coral);
  padding: 4em 0 0 0;
  position: relative;
}
@media screen and (max-width: 1280px) {
  #header { padding-top: 6em; }   /* Platz fuer den Menuknopf */
}

#header .logo {
  border-bottom: 0;
  color: var(--text);
  display: inline-block;
  font-family: var(--ff-head);
  font-size: 1.125em;
  margin: 0 0 1em 0;
}
#header .logo strong { color: var(--ueberschrift); }

/* Die vier Bereiche. Frueher waren es drei fette Links ohne
   eigene Auszeichnung; jetzt eine echte Navigation, in der der
   aktive Bereich den Korallenstrich des Templates traegt. */
.themen ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2.25em;
  list-style: none;
  margin: 0;
  padding: 0;
}
.themen li { padding: 0; }

.themen a {
  border-bottom: solid 3px transparent;
  color: var(--ueberschrift);
  display: block;
  font-family: var(--ff-head);
  font-size: 0.9em;
  font-weight: 400;
  letter-spacing: 0.075em;
  padding: 0.5em 0 0.75em 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.themen a:hover { color: var(--coral); }
.themen a[aria-current="page"] {
  border-bottom-color: var(--coral);
  color: var(--ueberschrift);
  font-weight: 700;
}

@media screen and (max-width: 736px) {
  .themen ul { gap: 0 1.25em; }
  .themen a { font-size: 0.8em; white-space: normal; }
}


/* ---------- 11. Banner und Fusszeile ---------- */

#banner {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4em;
  padding: 6em 0 4em 0;
}
#banner h1 { margin-top: -0.125em; }
#banner .content { flex: 1 1 22em; min-width: 0; }
#banner .image {
  flex: 1 1 22em;
  display: block;
  margin: 0 0 2em 0;
}
#banner .image img {
  width: 100%;
  height: 100%;
  max-height: 26em;
  object-fit: cover;
  object-position: center;
}
@media screen and (orientation: portrait) {
  #banner { flex-direction: column-reverse; padding-top: 3em; }
  #banner h1 br { display: none; }
  #banner .image { margin: 0 0 3em 0; }
  #banner .image img { max-height: 45vh; }
}

#footer {
  border-top: solid 2px var(--linie);
  padding: 3em 0 4em 0;
}
#footer .copyright {
  color: var(--leise);
  font-size: 0.9em;
  list-style: none;
  padding: 0;
  margin: 0;
}
#footer .copyright li {
  border-left: solid 1px var(--linie);
  display: inline-block;
  margin-left: 1em;
  padding: 0 0 0 1em;
}
#footer .copyright li:first-child {
  border-left: 0;
  margin-left: 0;
  padding-left: 0;
}
#footer .copyright a { color: inherit; }


/* ---------- 12. Seitenleiste ---------- */

#sidebar {
  background-color: var(--leiste);
  font-size: 0.9em;
  position: relative;
  transition: margin-left 0.5s ease, box-shadow 0.5s ease;
  width: var(--leiste-breite);
}
#sidebar h2 { font-size: 1.4em; }

#sidebar > .inner {
  padding: var(--leiste-innen) var(--leiste-innen) 2.4rem var(--leiste-innen);
  position: relative;
  width: var(--leiste-breite);
}
#sidebar > .inner > * {
  border-bottom: solid 2px var(--linie);
  margin: 0 0 2.75em 0;
  padding: 0 0 2.75em 0;
}
#sidebar > .inner > * > :last-child { margin-bottom: 0; }
#sidebar > .inner > *:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
#sidebar > .inner > .alt {
  background-color: var(--leiste-alt);
  border-bottom: 0;
  margin: calc(var(--leiste-innen) * -1) 0 3.5em calc(var(--leiste-innen) * -1);
  padding: var(--leiste-innen);
  width: calc(100% + var(--leiste-innen) * 2);
}

/* Menuknopf. Zeichnet die drei Balken jetzt mit CSS statt
   ueber Font Awesome - das spart die komplette Icon-Schrift. */
/* Kein text-indent-Trick mehr wie im Original: bei einem echten
   <button> blitzt der versteckte Text sonst am Rand durch. Die
   Beschriftung steckt jetzt in einem .sr-only-Element und der
   Knopf zeichnet nur noch die drei Balken. */
#sidebar .toggle {
  --toggle-bg: transparent;
  background: var(--toggle-bg);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--text);
  cursor: pointer;
  display: block;
  font-size: 1em;
  height: 5em;
  left: var(--leiste-breite);
  line-height: normal;
  outline: 0;
  padding: 0;
  position: absolute;
  top: 0;
  transition: left 0.5s ease;
  width: 5em;
  z-index: 901;
}
#sidebar .toggle:hover { background: var(--toggle-bg); color: var(--coral); }
#sidebar .toggle::before {
  background: currentColor;
  box-shadow: 0 -0.5em 0 currentColor, 0 0.5em 0 currentColor;
  content: '';
  height: 2px;
  left: 50%;
  position: absolute;
  text-indent: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.6em;
}

#sidebar.inactive { margin-left: calc(var(--leiste-breite) * -1); }

/* Ab hier faehrt die Leiste als Overlay ueber den Inhalt. */
@media screen and (max-width: 1280px) {
  #sidebar {
    box-shadow: 0 0 5em 0 rgba(0, 0, 0, 0.175);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    z-index: 900;      /* unter den Anker- und Vignettenanzeigen */
  }
  #sidebar.inactive { box-shadow: none; }
  #sidebar > .inner {
    -webkit-overflow-scrolling: touch;
    height: 100%;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    top: 0;
  }
  #sidebar > .inner::after { content: ''; display: block; height: 4em; }
  #sidebar .toggle {
    --toggle-bg: rgba(222, 225, 226, 0.85);
    border-radius: var(--radius);
    height: 3.5em;
    left: calc(var(--leiste-breite) + 1em);
    top: 1em;
    width: 5em;
  }
}
@media screen and (max-width: 480px) {
  #sidebar { width: 100%; }
  #sidebar > .inner { width: 100%; }
  #sidebar .toggle { left: auto; right: 1em; }
  #sidebar.inactive .toggle { left: 1em; right: auto; }
}


/* ---------- 13. Inhaltsverzeichnis in der Seitenleiste ---------- */

#menu ul {
  color: var(--ueberschrift);
  font-family: var(--ff-head);
  font-weight: 400;
  letter-spacing: 0.075em;
  list-style: none;
  margin-bottom: 0;
  padding: 0;
  text-transform: uppercase;
  user-select: none;
}
#menu ul li { padding: 0; }

#menu ul a,
#menu ul summary {
  border-bottom: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  font-size: 0.9em;
  padding: 0.625em 0;
}
#menu ul a:hover,
#menu ul summary:hover { color: var(--coral); }

/* Aktuelle Seite im Inhaltsverzeichnis. Im Original hing das an
   class="selected"; die Klasse bleibt erhalten, dazu kommt
   aria-current fuer Screenreader. */
#menu ul a.selected,
#menu ul a[aria-current="page"] {
  color: var(--coral);
  font-weight: 700;
}

#menu > ul > li {
  border-top: solid 1px var(--linie);
  margin: 0.5em 0 0 0;
  padding: 0.5em 0 0 0;
}
#menu > ul > li:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

/* Untermenue - sowohl direkt als auch innerhalb von <details>. */
#menu > ul > li > ul,
#menu > ul > li > details > ul {
  color: var(--leise);
  margin: 0.5em 0 1.5em 0;
  padding-left: 1em;
}
#menu > ul > li > ul a,
#menu > ul > li > details > ul a { font-size: 0.8em; }
#menu > ul > li > ul > li,
#menu > ul > li > details > ul > li { margin: 0.125em 0 0 0; padding: 0.125em 0 0 0; }

/* <details> darf die Trennlinie der Ebene daruber nicht erben. */
#menu > ul > li > details { border: 0; margin: 0; padding: 0; }

/* Aufklappbare Gruppen ohne JavaScript. Das Original brauchte
   dafuer jQuery plus browser.js plus util.js plus Font Awesome
   fuer den Pfeil - hier reicht das <details>-Element. */
#menu details > summary { list-style: none; position: relative; }
#menu details > summary::-webkit-details-marker { display: none; }
#menu details > summary::after {
  border-right: 2px solid var(--leise);
  border-bottom: 2px solid var(--leise);
  content: '';
  height: 0.45em;
  position: absolute;
  right: 0.2em;
  top: 50%;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
  width: 0.45em;
}
#menu details[open] > summary::after { transform: translateY(-25%) rotate(-135deg); }
#menu details > summary:hover::after { border-color: var(--coral); }


/* ---------- 14. Automatische Anzeigen ---------- */

/* AdSense laeuft domainweit ueber Auto Ads: im <head> steht nur
   der Loader, Google sucht sich die Platzierungen selbst.

   Das heisst, es gibt hier keine festen Anzeigenplaetze mehr.
   Stattdessen sorgen die folgenden Regeln dafuer, dass die
   eingefuegten Container das Layout nicht stoeren.

   Was Auto Ads brauchen und was ihnen schadet:
   - Sie fuegen <ins class="adsbygoogle"> zwischen Absaetze und in
     Container ein. Deshalb bekommen diese unten sinnvolle
     Aussenabstaende und clear:both, damit sie nicht neben einem
     umflossenen Bild kleben.
   - Ein Vorfahre mit overflow:hidden oder fester Hoehe schneidet
     die Anzeige ab. Im ganzen Stylesheet gibt es das nur noch
     innerhalb von a.image, das ist unkritisch.
   - Anker- und Vignettenanzeigen legen sich ueber die Seite. Die
     Seitenleiste lag mit z-index 10000 darueber; sie steht jetzt
     tiefer, damit sich beides nicht in die Quere kommt.

   Ehrlicher Nachteil: bei Auto Ads laesst sich der Platz nicht
   vorab reservieren, weil vorher niemand weiss, wo eine Anzeige
   landet. Ein Rest an Layout-Verschiebung bleibt also. Wenn die
   Core Web Vitals darunter zu stark leiden, hilft im AdSense-Konto
   der Regler fuer die Anzeigenmenge, oder du gehst spaeter doch
   auf feste Bloecke zurueck. */

ins.adsbygoogle {
  background: transparent;
  clear: both;
  display: block;
  margin: 2em auto;
  max-width: 100%;
  overflow: visible;
}

/* Innerhalb der schmalen Seitenleiste bleibt der Abstand kleiner. */
#sidebar ins.adsbygoogle { margin: 1.5em auto; }

/* Falls AdSense direkt in eine Textspalte einfuegt, soll die
   Anzeige die volle Breite bekommen und nicht die Zeilenlaenge
   des Textes erben. */
#main > .inner ins.adsbygoogle { width: 100%; }

/* ---------- 15. Bewegung und Druck ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  a.image:hover img { transform: none; }
}

@media print {
  #sidebar, ins.adsbygoogle, .skiplink, .themen { display: none !important; }
  #wrapper { display: block; }
  #main > .inner { padding: 0; max-width: none; }
  a { color: inherit; border-bottom: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* ---------- 16. Spaltenraster ---------- */

/* Gleiche Klassennamen wie bisher (.row, .col-6, .col-12-small ...),
   damit vorhandene Seiten unveraendert weiterlaufen. */

.row {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  align-items: stretch;
  margin-left: -2em;
}
.row > * { box-sizing: border-box; padding: 0 0 0 2em; }
.row.gtr-uniform { margin-top: -2em; }
.row.gtr-uniform > * { padding-top: 2em; }
.row.gtr-uniform > * > :last-child { margin-bottom: 0; }
.row.aln-left   { justify-content: flex-start; }
.row.aln-center { justify-content: center; }
.row.aln-right  { justify-content: flex-end; }
.row.aln-top    { align-items: flex-start; }
.row.aln-middle { align-items: center; }
.row.aln-bottom { align-items: flex-end; }
.row > .imp { order: -1; }

.row > .col-1 { width: 8.33333%; }
.row > .off-1 { margin-left: 8.33333%; }
.row > .col-2 { width: 16.66667%; }
.row > .off-2 { margin-left: 16.66667%; }
.row > .col-3 { width: 25%; }
.row > .off-3 { margin-left: 25%; }
.row > .col-4 { width: 33.33333%; }
.row > .off-4 { margin-left: 33.33333%; }
.row > .col-5 { width: 41.66667%; }
.row > .off-5 { margin-left: 41.66667%; }
.row > .col-6 { width: 50%; }
.row > .off-6 { margin-left: 50%; }
.row > .col-7 { width: 58.33333%; }
.row > .off-7 { margin-left: 58.33333%; }
.row > .col-8 { width: 66.66667%; }
.row > .off-8 { margin-left: 66.66667%; }
.row > .col-9 { width: 75%; }
.row > .off-9 { margin-left: 75%; }
.row > .col-10 { width: 83.33333%; }
.row > .off-10 { margin-left: 83.33333%; }
.row > .col-11 { width: 91.66667%; }
.row > .off-11 { margin-left: 91.66667%; }
.row > .col-12 { width: 100%; }
.row > .off-12 { margin-left: 100%; }

.row.gtr-0 { margin-left: -0em; }
.row.gtr-0 > * { padding: 0 0 0 0em; }
.row.gtr-0.gtr-uniform { margin-top: -0em; }
.row.gtr-0.gtr-uniform > * { padding-top: 0em; }
.row.gtr-25 { margin-left: -0.5em; }
.row.gtr-25 > * { padding: 0 0 0 0.5em; }
.row.gtr-25.gtr-uniform { margin-top: -0.5em; }
.row.gtr-25.gtr-uniform > * { padding-top: 0.5em; }
.row.gtr-50 { margin-left: -1em; }
.row.gtr-50 > * { padding: 0 0 0 1em; }
.row.gtr-50.gtr-uniform { margin-top: -1em; }
.row.gtr-50.gtr-uniform > * { padding-top: 1em; }
.row.gtr-150 { margin-left: -3em; }
.row.gtr-150 > * { padding: 0 0 0 3em; }
.row.gtr-150.gtr-uniform { margin-top: -3em; }
.row.gtr-150.gtr-uniform > * { padding-top: 3em; }
.row.gtr-200 { margin-left: -4em; }
.row.gtr-200 > * { padding: 0 0 0 4em; }
.row.gtr-200.gtr-uniform { margin-top: -4em; }
.row.gtr-200.gtr-uniform > * { padding-top: 4em; }

@media screen and (max-width: 1680px) {
  .row > .col-1-xlarge { width: 8.33333%; }
  .row > .off-1-xlarge { margin-left: 8.33333%; }
  .row > .col-2-xlarge { width: 16.66667%; }
  .row > .off-2-xlarge { margin-left: 16.66667%; }
  .row > .col-3-xlarge { width: 25%; }
  .row > .off-3-xlarge { margin-left: 25%; }
  .row > .col-4-xlarge { width: 33.33333%; }
  .row > .off-4-xlarge { margin-left: 33.33333%; }
  .row > .col-5-xlarge { width: 41.66667%; }
  .row > .off-5-xlarge { margin-left: 41.66667%; }
  .row > .col-6-xlarge { width: 50%; }
  .row > .off-6-xlarge { margin-left: 50%; }
  .row > .col-7-xlarge { width: 58.33333%; }
  .row > .off-7-xlarge { margin-left: 58.33333%; }
  .row > .col-8-xlarge { width: 66.66667%; }
  .row > .off-8-xlarge { margin-left: 66.66667%; }
  .row > .col-9-xlarge { width: 75%; }
  .row > .off-9-xlarge { margin-left: 75%; }
  .row > .col-10-xlarge { width: 83.33333%; }
  .row > .off-10-xlarge { margin-left: 83.33333%; }
  .row > .col-11-xlarge { width: 91.66667%; }
  .row > .off-11-xlarge { margin-left: 91.66667%; }
  .row > .col-12-xlarge { width: 100%; }
  .row > .off-12-xlarge { margin-left: 100%; }
}

@media screen and (max-width: 1280px) {
  .row > .col-1-large { width: 8.33333%; }
  .row > .off-1-large { margin-left: 8.33333%; }
  .row > .col-2-large { width: 16.66667%; }
  .row > .off-2-large { margin-left: 16.66667%; }
  .row > .col-3-large { width: 25%; }
  .row > .off-3-large { margin-left: 25%; }
  .row > .col-4-large { width: 33.33333%; }
  .row > .off-4-large { margin-left: 33.33333%; }
  .row > .col-5-large { width: 41.66667%; }
  .row > .off-5-large { margin-left: 41.66667%; }
  .row > .col-6-large { width: 50%; }
  .row > .off-6-large { margin-left: 50%; }
  .row > .col-7-large { width: 58.33333%; }
  .row > .off-7-large { margin-left: 58.33333%; }
  .row > .col-8-large { width: 66.66667%; }
  .row > .off-8-large { margin-left: 66.66667%; }
  .row > .col-9-large { width: 75%; }
  .row > .off-9-large { margin-left: 75%; }
  .row > .col-10-large { width: 83.33333%; }
  .row > .off-10-large { margin-left: 83.33333%; }
  .row > .col-11-large { width: 91.66667%; }
  .row > .off-11-large { margin-left: 91.66667%; }
  .row > .col-12-large { width: 100%; }
  .row > .off-12-large { margin-left: 100%; }
}

@media screen and (max-width: 980px) {
  .row > .col-1-medium { width: 8.33333%; }
  .row > .off-1-medium { margin-left: 8.33333%; }
  .row > .col-2-medium { width: 16.66667%; }
  .row > .off-2-medium { margin-left: 16.66667%; }
  .row > .col-3-medium { width: 25%; }
  .row > .off-3-medium { margin-left: 25%; }
  .row > .col-4-medium { width: 33.33333%; }
  .row > .off-4-medium { margin-left: 33.33333%; }
  .row > .col-5-medium { width: 41.66667%; }
  .row > .off-5-medium { margin-left: 41.66667%; }
  .row > .col-6-medium { width: 50%; }
  .row > .off-6-medium { margin-left: 50%; }
  .row > .col-7-medium { width: 58.33333%; }
  .row > .off-7-medium { margin-left: 58.33333%; }
  .row > .col-8-medium { width: 66.66667%; }
  .row > .off-8-medium { margin-left: 66.66667%; }
  .row > .col-9-medium { width: 75%; }
  .row > .off-9-medium { margin-left: 75%; }
  .row > .col-10-medium { width: 83.33333%; }
  .row > .off-10-medium { margin-left: 83.33333%; }
  .row > .col-11-medium { width: 91.66667%; }
  .row > .off-11-medium { margin-left: 91.66667%; }
  .row > .col-12-medium { width: 100%; }
  .row > .off-12-medium { margin-left: 100%; }
}

@media screen and (max-width: 736px) {
  .row > .col-1-small { width: 8.33333%; }
  .row > .off-1-small { margin-left: 8.33333%; }
  .row > .col-2-small { width: 16.66667%; }
  .row > .off-2-small { margin-left: 16.66667%; }
  .row > .col-3-small { width: 25%; }
  .row > .off-3-small { margin-left: 25%; }
  .row > .col-4-small { width: 33.33333%; }
  .row > .off-4-small { margin-left: 33.33333%; }
  .row > .col-5-small { width: 41.66667%; }
  .row > .off-5-small { margin-left: 41.66667%; }
  .row > .col-6-small { width: 50%; }
  .row > .off-6-small { margin-left: 50%; }
  .row > .col-7-small { width: 58.33333%; }
  .row > .off-7-small { margin-left: 58.33333%; }
  .row > .col-8-small { width: 66.66667%; }
  .row > .off-8-small { margin-left: 66.66667%; }
  .row > .col-9-small { width: 75%; }
  .row > .off-9-small { margin-left: 75%; }
  .row > .col-10-small { width: 83.33333%; }
  .row > .off-10-small { margin-left: 83.33333%; }
  .row > .col-11-small { width: 91.66667%; }
  .row > .off-11-small { margin-left: 91.66667%; }
  .row > .col-12-small { width: 100%; }
  .row > .off-12-small { margin-left: 100%; }
}

@media screen and (max-width: 480px) {
  .row > .col-1-xsmall { width: 8.33333%; }
  .row > .off-1-xsmall { margin-left: 8.33333%; }
  .row > .col-2-xsmall { width: 16.66667%; }
  .row > .off-2-xsmall { margin-left: 16.66667%; }
  .row > .col-3-xsmall { width: 25%; }
  .row > .off-3-xsmall { margin-left: 25%; }
  .row > .col-4-xsmall { width: 33.33333%; }
  .row > .off-4-xsmall { margin-left: 33.33333%; }
  .row > .col-5-xsmall { width: 41.66667%; }
  .row > .off-5-xsmall { margin-left: 41.66667%; }
  .row > .col-6-xsmall { width: 50%; }
  .row > .off-6-xsmall { margin-left: 50%; }
  .row > .col-7-xsmall { width: 58.33333%; }
  .row > .off-7-xsmall { margin-left: 58.33333%; }
  .row > .col-8-xsmall { width: 66.66667%; }
  .row > .off-8-xsmall { margin-left: 66.66667%; }
  .row > .col-9-xsmall { width: 75%; }
  .row > .off-9-xsmall { margin-left: 75%; }
  .row > .col-10-xsmall { width: 83.33333%; }
  .row > .off-10-xsmall { margin-left: 83.33333%; }
  .row > .col-11-xsmall { width: 91.66667%; }
  .row > .off-11-xsmall { margin-left: 91.66667%; }
  .row > .col-12-xsmall { width: 100%; }
  .row > .off-12-xsmall { margin-left: 100%; }
}

@media screen and (max-width: 736px) {
  .row:not(.no-collapse) > [class*="col-"]:not([class*="-small"]):not([class*="-xsmall"]) {
    width: 100%;
  }
}

/* ---------- 17. Kleinigkeiten ---------- */

/* Beschriftungen, die nur Screenreader brauchen. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

table caption {
  color: var(--ueberschrift);
  padding: 0 0 0.75em 0;
  text-align: left;
}