@charset "UTF-8";
/* basis.css - Variablen, Reset, Schrift, Grundlayout, Cookie-Hinweis
   Reines CSS ohne Build-Schritt. Eingebunden in id_head.php; nach
   Aenderungen dort $cssVersion hochzaehlen. Farben und Schrift als
   Variablen (--rot, --gold ...) stehen oben in basis.css. */

/* ==================================================================
   Farben & Schrift
   Zentral hier aendern - gilt dann ueberall.
   ================================================================== */

:root {
  /* Markenfarben */
  --rot: #a1142e;          /* Hauptfarbe: Buttons, Balken, Akzente */
  --rot-dunkel: #851126;   /* Hover-Zustand und dunkle Flaechen */
  --blau: #2a3f75;         /* Zweitfarbe, Fokusrahmen */

  /* Termin-Buttons: warmes Gold statt Signalorange. Weisse Schrift auf
     --gold erreicht 3,1:1 - reicht fuer grosse, fette Schrift (WCAG AA).
     Kleine Buttons nutzen deshalb --gold-dunkel (4,5:1). */
  --gold: #c68400;
  --gold-dunkel: #9d6900;
  --gold-hell: #ef9f00;    /* Leuchtakzent auf dunklem Grund (Kontakt-Widget) */

  --grau-hell: #f1f1f1;    /* helle Hintergrundflaechen */

  --schrift: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Abstand nach oben, wenn ein Link zu einem Anker (#...) springt -
     sonst verschwindet das Ziel unter der festen Kopfzeile (128 px, mobil
     80 px). 40 px Reserve, weil noch nicht eingeblendete Bloecke beim
     Sprung um 40 px tiefer stehen und danach hochrutschen. */
  --anker-abstand: 180px;
}

@media (max-width: 768px) {
  :root {
    --anker-abstand: 130px;
  }
}

/* Sprungziele nicht unter der Kopfzeile verstecken. Das weiche Scrollen
   selbst regelt der Reset (html:focus-within), ganz ohne JavaScript. */
[id] {
  scroll-margin-top: var(--anker-abstand);
}


/* ==================================================================
   Reset
   ================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
}
ul[role='list'],
ol[role='list'] {
  list-style: none;
}
html:focus-within {
  scroll-behavior: smooth;
}
a:not([class]) {
  text-decoration-skip-ink: auto;
}
img,
picture,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
}
input,
button,
textarea,
select {
  font: inherit;
}
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transition: none;
  }
}
body,
html {
  height: 100%;
  scroll-behavior: smooth;
}


/* ==================================================================
   Schrift Montserrat (lokal eingebunden)
   ================================================================== */
/* montserrat-100 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/montserrat-v26-latin-100.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-200 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/montserrat-v26-latin-200.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-300 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/montserrat-v26-latin-300.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v26-latin-regular.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/montserrat-v26-latin-italic.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-500 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/montserrat-v26-latin-500.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-500italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/montserrat-v26-latin-500italic.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/montserrat-v26-latin-600.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/montserrat-v26-latin-600italic.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/montserrat-v26-latin-700.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/montserrat-v26-latin-700italic.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-800 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/montserrat-v26-latin-800.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-800italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/montserrat-v26-latin-800italic.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-900 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/montserrat-v26-latin-900.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-900italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/montserrat-v26-latin-900italic.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* ==================================================================
   Grundlayout: Raster, Abstände, Buttons, Cookie-Hinweis
   ================================================================== */
/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.shd {
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
}
.shd-light {
  box-shadow: 0 12px 32px -6px rgba(0, 0, 0, 0.5);
}
.shd-txt {
  text-shadow: 0.04em 0.04em 0.02em rgba(0, 0, 0, 0.6);
}
.is-matop {
  margin-top: auto !important;
}
html {
  margin: 0;
  padding: 0;
  width: 100%;
}
body {
  font-size: 1.1em;
  line-height: 1.6em;
  padding: 0;
  margin: 0;
  /* Ausweichschriften mit aehnlichen Proportionen: der Textumbruch
     springt beim Nachladen von Montserrat weniger. */
  font-family: var(--schrift);
  width: 100%;
  color: #000000;
  letter-spacing: .02px;
}
.nodesktop {
  display: none;
}
a {
  text-decoration: none;
  color: var(--rot);
}
/* Sichtbarer Fokus fuer die Tastaturbedienung. :focus-visible trifft nur die
   Tastatur, Mausklicks bleiben unveraendert. */
:focus-visible {
  outline: 3px solid var(--rot);
  outline-offset: 2px;
}
/* auf dunklem Grund heller, sonst geht der Rahmen unter */
header :focus-visible,
nav :focus-visible,
footer :focus-visible,
.contact-wrapper :focus-visible,
.headimage :focus-visible {
  outline-color: #fff;
}
/* Sprunglink: liegt ausserhalb des Bildes und kommt nur bei Fokus hervor */
.skip-link {
  position: fixed;
  top: -100px;
  left: 0;
  z-index: 100000;
  padding: 14px 22px;
  background-color: var(--rot);
  color: #fff;
  font-weight: 700;
  transition: top .15s ease;
}
.skip-link:focus {
  top: 0;
}
/* Telefonnummern: antippbar, aber optisch weiter Fliesstext */
a.telefonlink {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
a.telefonlink:hover,
a.telefonlink:focus-visible {
  text-decoration: underline;
}
h1,
.is-h1 {
  font-weight: 900;
  font-size: 1.6em;
  line-height: 1.1em;
  margin-bottom: 15px;
  color: var(--rot);
  text-transform: uppercase;
  letter-spacing: .05em;
}
h2 {
  font-weight: 700;
  font-size: 1.4em;
  line-height: 1.1em;
  margin-bottom: 15px;
}
h3,
.is-h3 {
  font-weight: 500;
  font-size: 1.2em;
  line-height: 1.1em;
  margin-bottom: 10px;
}
h4,
.is-h4 {
  font-weight: 600;
  font-size: 1.1em;
  line-height: 1.1em;
  margin-bottom: 10px;
}
.txtred {
  color: var(--rot);
}
.txtwhite {
  color: #ffffff;
}
/* Container */
.container {
  padding: 20px;
  margin: 0 auto;
  position: relative;
}
.row {
  margin-bottom: 30px;
}
.row.bot60 {
  margin-bottom: 60px;
}
.row.bot90 {
  margin-bottom: 90px;
}
.row.bot120 {
  margin-bottom: 120px;
}
.row.bot150 {
  margin-bottom: 150px;
}
.row.top60 {
  margin-top: 60px;
}
.row.top90 {
  margin-top: 90px;
}
.row.top120 {
  margin-top: 120px;
}
.row.top150 {
  margin-top: 150px;
}
.full-width {
  width: 100%;
}
.max-width {
  max-width: 1280px;
  margin: 0 auto;
}
/* Grid-System */
.grid {
  display: grid;
  gap: 25px;
}
.one-column {
  grid-template-columns: 1fr;
}
.two-columns {
  grid-template-columns: repeat(2, 1fr);
  gap: 80px;
}
.three-columns {
  grid-template-columns: repeat(3, 1fr);
}
.four-columns {
  grid-template-columns: repeat(4, 1fr);
}
.five-columns {
  grid-template-columns: repeat(5, 1fr);
}
.six-columns {
  grid-template-columns: repeat(6, 1fr);
}
.seven-columns {
  grid-template-columns: repeat(7, 1fr);
}
.column {
  padding: 0;
}
.column.txtcenter {
  text-align: center;
}
/* Kleine Helfer statt style="..." im HTML
   Sie ersetzen fruehere Inline-Styles und muessen sich wie diese gegen
   die Bausteine durchsetzen - daher !important. Sparsam verwenden. */
.pt90 { padding-top: 90px !important; }
.pt160 { padding-top: 160px !important; }
.py80 { padding-top: 80px !important; padding-bottom: 80px !important; }
.mt25 { margin: 25px 0 0 0 !important; }
.mt40 { margin-top: 40px !important; }
.mb90 { margin-bottom: 90px !important; }
.z10 { z-index: 10 !important; }
.z50 { z-index: 50 !important; }
.pos-rel { position: relative !important; }
.bg-weiss { background-color: #fff !important; }
.bg-grau { background-color: var(--grau-hell) !important; }
.bg-rot { background-color: var(--rot) !important; }
.bg-gelb { background-color: #ffcd02 !important; }
.bild-voll { width: 100% !important; }
.txt-gross { font-size: 1.4em !important; }
.txt-schwarz { color: #000 !important; }
.flex-mitte { display: flex !important; justify-content: center; }
.is-zentriert { display: inline-block !important; margin: 0 auto !important; }
.ausgeblendet { display: none !important; }
.headlinebox span {
  text-transform: uppercase;
  letter-spacing: 4px;
}
.headlinebox h1,
.headlinebox .is-h1 {
  font-size: 36px;
  color: var(--rot);
  line-height: 1.4em;
  text-align: center;
  text-transform: uppercase;
  margin: 20px 0;
  font-weight: 400;
}
.headlinebox h2 {
  font-size: 1.1em;
  font-weight: 400;
  color: var(--blau);
}
ul.mitgliedleistung {
  margin: 20px 0 30px 0;
  display: flex;
  flex-direction: column;
}
ul.mitgliedleistung li {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
  margin-left: 10px;
  font-size: .9em;
  color: var(--blau);
  text-align: left;
}
ul.mitgliedleistung li:before {
  content: "";
  background-image: url("../images/check-white.svg");
  background-size: 30px;
  background-position: center center;
  background-repeat: no-repeat;
  width: 30px;
  min-width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--rot);
  margin-right: 14px;
}
ul.mitgliedleistung li.bonus:before {
  background-color: var(--gold);
}
.tunnellinkwrapper {
  display: flex;
  flex-wrap: wrap;
}
a.tunnellink {
  width: calc(100% / 2 - 40px);
  margin: 20px;
  display: flex;
  flex-direction: column;
}
a.tunnellink img {
  margin-bottom: 15px;
}
a.tunnellink h2 {
  text-align: center;
}
.kontaktrow {
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
}
.kontaktrow:last-of-type {
  margin-bottom: 0;
}
.is-front {
  z-index: 10;
  position: relative;
}
.txtcenter {
  text-align: center;
}
.txt-w {
  color: #ffffff !important;
}
.txt-r {
  color: var(--rot) !important;
}
.txt-b {
  color: var(--blau) !important;
}
a.mainbtn {
  padding: 4px 12px;
  transition: all .5s ease;
  position: relative;
  align-items: center;
  background-color: var(--rot);
  display: inline-flex;
  text-align: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-size: 1.0em;
  letter-spacing: .1em;
  margin: 10px;
}
a.mainbtn:hover {
  background-color: var(--blau);
}
a.mainbtn.is-big {
  padding: 12px 20px;
  font-size: 1.2em;
}
a.mainbtn.is-small {
  padding: 2px 12px;
  font-size: .8em;
}
a.mainbtn.is-blue {
  background-color: var(--blau);
}
a.mainbtn.arrow-right:after {
  content: "";
  border-right: 2px solid;
  border-bottom: 2px solid;
  border-color: #fff;
  transform: rotate(-45deg);
  width: 12px;
  height: 12px;
  margin-left: 8px;
}
a.mainbtn.arrow-down:after {
  content: "";
  border-right: 2px solid;
  border-bottom: 2px solid;
  border-color: #fff;
  transform: rotate(45deg);
  width: 12px;
  height: 12px;
  margin-left: 12px;
  margin-top: -5px;
}
a.mainbtn.is-round {
  border-radius: 24px;
}
/* Termin-Button
   ------------------------------------------------------------------
   Alle Buttons, die auf termin.php fuehren, sehen gleich aus: orange,
   Pillenform, Kalendersymbol. Das Symbol kommt als Hintergrundbild vor
   dem Text, damit es nicht in jeder Datei einzeln im Markup steht.
   Der Kontaktkasten unten rechts (.contact-*) bleibt eigenstaendig. */
a.mainbtn.termin-btn {
  gap: .6em;
  border-radius: 999px;
  background-color: var(--gold);
  /* fett: hebt den Haupt-Handlungsaufruf hervor und laesst den helleren
     Goldton zu (grosse Schrift ab 18,66 px fett) */
  font-weight: 700;
  /* kleine Variante in der Kopfzeile - dunkler, siehe --gold-dunkel */
}
a.mainbtn.termin-btn:hover {
  background-color: var(--gold-dunkel);
}
a.mainbtn.termin-btn.is-small {
  background-color: var(--gold-dunkel);
}
a.mainbtn.termin-btn.is-small:hover {
  background-color: #744e00;
}
a.mainbtn.termin-btn:before {
  content: "";
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  background: url("../images/icon-calendar.svg") no-repeat center center;
  background-size: contain;
}
a.ankerbtn {
  padding: 10px 20px;
  transition: all .5s ease;
  position: relative;
  align-items: center;
  background-color: #daeef8;
  display: inline-flex;
  color: var(--blau);
  text-decoration: none;
  font-size: .8em;
  letter-spacing: .1em;
  border-radius: 30px;
  font-weight: 700;
  text-transform: uppercase;
}
/* Cookie-Hinweis - zentriertes Overlay
   ------------------------------------------------------------------
   Aufbau: Kopf (Titel, Text) -> Kategorien -> feste Button-Leiste.
   Die Kategorien zeigen nur Name + Stichwort, die Erklaerung steckt
   in einem <details>-Aufklapper. Rechts sitzt je ein Schiebeschalter
   (ein normales Checkbox-Feld, nur anders gezeichnet). */
#cookie-hinweis {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.65);
  font-size: 1rem;
  z-index: 999999;
}
#cookie-hinweis.is-open {
  display: flex;
}
.popup-box {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  text-align: left;
}
.popup-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  width: 36px;
  height: 36px;
  padding: 0;
  background: #fff;
  border: 0;
  border-radius: 50%;
  color: #777;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.popup-close:hover,
.popup-close:focus-visible {
  background-color: var(--grau-hell);
  color: #000;
}
.popup-content {
  flex: 1 1 auto;
  min-height: 0;
  padding: 26px 32px 6px;
  overflow-x: hidden;
  overflow-y: auto;
  color: #222;
  font-size: .95rem;
  line-height: 1.55;
}
.popup-content a {
  color: var(--rot);
}
.popup-content p {
  margin: 0;
}
#cookie-hinweis .cookie-titel {
  margin: 0 48px 10px 0;
  padding: 0;
  color: #000;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: none;
}
.cookie-text {
  color: #444;
}
/* Kategorien */
.cookie-optionen {
  list-style: none;
  margin: 20px 0 14px;
  padding: 0;
  border-top: 1px solid #e6e6e6;
}
.cookie-kat {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #e6e6e6;
}
.cookie-kat__info {
  flex: 1 1 auto;
  min-width: 0;
}
.cookie-kat__info summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  position: relative;
  padding: 2px 0 2px 26px;
  cursor: pointer;
  list-style: none;
}
.cookie-kat__info summary::-webkit-details-marker {
  display: none;
}
/* Pfeil links vom Namen, dreht sich beim Aufklappen */
.cookie-kat__info summary::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .55em;
  width: 7px;
  height: 7px;
  border-right: 2px solid #777;
  border-bottom: 2px solid #777;
  transform: rotate(-45deg);
  transition: transform .2s ease;
}
.cookie-kat__info[open] summary::before {
  transform: rotate(45deg);
  top: .45em;
}
.cookie-kat__info summary strong {
  color: #000;
  font-size: 1rem;
}
.cookie-kat__kurz {
  color: #777;
  font-size: .85rem;
}
.cookie-kat__info summary:hover strong {
  color: var(--rot);
}
.cookie-kat__info summary:focus-visible {
  outline: 2px solid var(--rot);
  outline-offset: 2px;
  border-radius: 4px;
}
.cookie-kat__info p {
  margin: 6px 0 4px 26px;
  color: #555;
  font-size: .875rem;
  line-height: 1.5;
}
.cookie-kat__immer {
  flex: 0 0 auto;
  padding-top: 3px;
  color: #2e7d32;
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
}
/* Schiebeschalter */
.cookie-schalter {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  position: relative;
  width: 46px;
  height: 26px;
  margin: 0;
  border-radius: 13px;
  background-color: #c7c7c7;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cookie-schalter::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform .2s ease;
}
.cookie-schalter:checked {
  background-color: var(--rot);
}
.cookie-schalter:checked::before {
  transform: translateX(20px);
}
.cookie-schalter:focus-visible {
  outline: 2px solid var(--rot);
  outline-offset: 3px;
}
.cookie-links {
  font-size: .85rem;
  color: #999;
}
.popup-content .cookie-links a {
  color: #555;
}
/* Button-Leiste: bleibt stehen, waehrend der Inhalt darueber scrollt.
   "Alle akzeptieren" und "Nur notwendige" sind bewusst gleich gewichtet. */
.popup-aktionen {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 32px 22px;
  border-top: 1px solid #e6e6e6;
  background-color: #fafafa;
}
a.popup-btn,
.popup-btn {
  flex: 1 1 0;
  min-width: 150px;
  margin: 0;
  padding: 12px 14px;
  background-color: var(--rot);
  border: 2px solid var(--rot);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
a.popup-btn:hover,
.popup-btn:hover {
  background-color: var(--rot-dunkel);
  border-color: var(--rot-dunkel);
}
.popup-btn:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: 2px;
}
.popup-btn.is-sekundaer {
  background-color: #fff;
  border-color: #bbb;
  color: #333;
}
.popup-btn.is-sekundaer:hover {
  background-color: var(--grau-hell);
  border-color: #888;
  color: #000;
}
@media (max-width: 560px) {
  #cookie-hinweis {
    padding: 10px;
    align-items: flex-end;
  }
  .popup-content {
    padding: 22px 20px 4px;
  }
  .popup-aktionen {
    padding: 12px 20px 16px;
    gap: 8px;
  }
  .popup-btn {
    flex-basis: 100%;
    padding: 10px 14px;
  }
  #cookie-hinweis .cookie-titel {
    font-size: 1.3rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-schalter,
  .cookie-schalter::before,
  .cookie-kat__info summary::before {
    transition: none;
  }
}
/* Externe Einbettung: Platzhalter statt Direktladen
   ------------------------------------------------------------------
   Der Platzhalter belegt dieselbe Flaeche wie das spaetere Widget,
   damit beim Laden nichts springt. */
.externbox {
  width: 100%;
}
.externbox__platzhalter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 700px;
  padding: 40px 25px;
  text-align: center;
  background-color: #f4f4f4;
  background-image: linear-gradient(180deg, #fafafa 0%, #ededed 100%);
  border: 1px dashed #c4c4c4;
  border-radius: 10px;
}
.externbox__platzhalter h3,
.externbox__platzhalter .is-h3 {
  font-size: 1.5em;
  font-weight: 700;
  color: var(--rot);
}
.externbox__platzhalter p {
  max-width: 460px;
  margin: 0 0 6px;
  font-size: .95em;
  line-height: 1.5em;
  color: #444;
}
.externbox__merken {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: .85em;
  color: #555;
  cursor: pointer;
}
.externbox__merken input {
  width: 18px;
  height: 18px;
  accent-color: var(--rot);
}
.externbox__hinweis {
  margin-top: 18px !important;
  padding-top: 16px;
  border-top: 1px solid #ddd;
  font-size: .85em !important;
  color: #666;
}
@media (max-width: 767px) {
  .externbox__platzhalter {
    min-height: 520px;
    padding: 30px 18px;
  }
}
/* Responsive Anpassungen */
@media (max-width: 960px) {
  .nodesktop {
    display: inline;
  }
  a.mainbtn {
    padding: 4px 12px;
    font-size: .9em;
  }
  a.mainbtn.is-big {
    padding: 6px 12px;
    font-size: 1.0em;
  }
  a.mainbtn.is-small {
    padding: 2px 8px;
    font-size: .7em;
  }
  .headlinebox h1,
  .headlinebox .is-h1 {
    font-size: 28px;
  }
  .headlinebox h2 {
    font-size: 1.0em;
  }
  a.tunnellink {
    width: calc(100% / 1 - 40px);
  }
  a.tunnellink h2 {
    font-size: 1.2em;
  }
  .nomobile {
    display: none !important;
  }
  .grid {
    gap: 15px;
  }
  .grid.four-columns {
    grid-template-columns: repeat(2, 1fr);
  }
  .two-columns {
    grid-template-columns: 1fr;
  }
  .three-columns {
    grid-template-columns: repeat(2, 1fr);
  }
  .four-columns {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .five-columns {
    grid-template-columns: repeat(3, 1fr);
  }
  .six-columns {
    grid-template-columns: repeat(3, 1fr);
  }
  .seven-columns {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .two-columns,
  .three-columns,
  .four-columns,
  .five-columns,
  .six-columns,
  .seven-columns,
  .one-column {
    grid-template-columns: 1fr;
  }
  .grid.four-columns {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .grid.four-columns.isfootercol {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  .grid.three-columns.aktionbenefitcolumn {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .six-columns,
  .seven-columns,
  .five-columns {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}