/* Computer Club Ottensheim: gesamtes Stylesheet, ohne Build-Schritt.
   Breakpoints: 991 px, 767 px, 479 px (am Dateiende). */

@font-face {
  font-family: 'Gobold';
  src: url('../fonts/Gobold-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gobold';
  src: url('../fonts/Gobold-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Italic-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Farbschema: Jede Farbe steht einmal, mit Dunkel- und Hellwert in einer Zeile.
   Die beiden Schalter entscheiden, welcher Wert gilt: Der aktive steht auf initial, dann greift
   sein Rückfallwert in var(); der andere ist leer und ergibt nichts. Die Leerstelle nach dem
   Doppelpunkt ist nötig. Gesetzt werden sie nur hier: data-theme von js/theme.js, sonst System. */
:root {
  --wenn-dunkel: ;
  --wenn-hell: initial;
  color-scheme: var(--wenn-dunkel, dark) var(--wenn-hell, light);
  --farbe-hintergrund: var(--wenn-dunkel, #121212) var(--wenn-hell, #fff);
  --farbe-text: var(--wenn-dunkel, #e6e6e6) var(--wenn-hell, #333);
  --farbe-footer-link: var(--wenn-dunkel, #d0d0d0) var(--wenn-hell, #444);
  --farbe-gedaempft: var(--wenn-dunkel, #a3a3a3) var(--wenn-hell, #737373);
  --farbe-rechtstext: var(--wenn-dunkel, #e6e6e6) var(--wenn-hell, #595959);
  --farbe-flaeche: var(--wenn-dunkel, #1e1e1e) var(--wenn-hell, #eee);
  --farbe-gruen: var(--wenn-dunkel, #38bd71) var(--wenn-hell, #008d36);
  --farbe-orange: var(--wenn-dunkel, #ff8a4d) var(--wenn-hell, #ff661e);
  --farbe-blau: var(--wenn-dunkel, #38aee0) var(--wenn-hell, #0088c2);
  --farbe-rot: var(--wenn-dunkel, #ff5c5c) var(--wenn-hell, #c00);
  /* Text-Links: etwas dunkler als die Vereinsfarben, mindestens 4,5:1 auf Weiß. */
  --farbe-link-gruen: var(--wenn-dunkel, #38bd71) var(--wenn-hell, #008734);
  --farbe-link-orange: var(--wenn-dunkel, #ff8a4d) var(--wenn-hell, #c75017);
  --farbe-link-blau: var(--wenn-dunkel, #38aee0) var(--wenn-hell, #007db2);
  /* Vereins-Cloud: Karten auf der blauen Fläche, Rahmen in den Logotönen (Grundfarbe und 20 % Weiß). */
  --farbe-verein-karte: var(--wenn-dunkel, #1e1e1e) var(--wenn-hell, #fff);
  --farbe-verein-trenner: var(--wenn-dunkel, #3a3a3a) var(--wenn-hell, #e2e2e2);
  --farbe-verein-rahmen-a: var(--wenn-dunkel, #38aee0) var(--wenn-hell, #0088c2);
  --farbe-verein-rahmen-b: var(--wenn-dunkel, #60bee6) var(--wenn-hell, #33a0ce);
  /* Fehlermeldungen im Formular: rot, damit sie sich von den orangen Links im Abschnitt abheben. */
  --farbe-fehler: var(--wenn-dunkel, #ff9d8f) var(--wenn-hell, #b3261e);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wenn-dunkel: initial;
    --wenn-hell: ;
  }
}
:root[data-theme="dark"] {
  --wenn-dunkel: initial;
  --wenn-hell: ;
}

/* Grundlagen */
* {
  box-sizing: border-box;
}
html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  min-height: 100%;
  background-color: var(--farbe-hintergrund);
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: var(--farbe-text);
}
a {
  color: var(--farbe-link-gruen);
  text-decoration: underline;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  display: inline-block;
}
h1, h2 {
  font-family: 'Gobold', Impact, 'Arial Narrow', sans-serif;
  font-weight: 700;
}
h1, h2 {
  margin-bottom: 10px;
}
h1, .heading-2, .heading-mitgliedschaft, .heading-2-cloud, .heading-2-security {
  font-size: 38px;
  line-height: 44px;
  margin-top: 20px;
}
h2 {
  font-size: 32px;
  line-height: 36px;
  margin-top: 20px;
}
p {
  margin-top: 0;
  margin-bottom: 10px;
}
ul {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

/* Barrierefreiheit */
a:focus-visible {
  outline: 3px solid var(--farbe-gruen);
  outline-offset: 2px;
}

/* Links im Fließtext der Startseite: Farbe nach Abschnitt. Menü, Footer und Rechtstexte liegen außerhalb. */
section { --farbe-abschnitt-link: var(--farbe-link-gruen); }
#mitgliedschaft, #faq { --farbe-abschnitt-link: var(--farbe-link-orange); }
#was-wir-tun h2, #was-wir-tun h3 { color: var(--farbe-gruen); }
#cloud { --farbe-abschnitt-link: var(--farbe-link-blau); }
#security { --farbe-abschnitt-link: var(--farbe-rot); }
section p a,
section li a,
section label a,
section .paragraph-bigger a {
  color: var(--farbe-abschnitt-link);
}
section p a:hover,
section li a:hover,
section label a:hover,
section .paragraph-bigger a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
section p a:focus-visible,
section li a:focus-visible,
section label a:focus-visible,
section .paragraph-bigger a:focus-visible {
  outline-color: var(--farbe-abschnitt-link);
}

/* Hilfsklassen */
.link-block {
  max-width: 100%;
  display: inline-block;
}
.list-plain {
  padding-left: 0;
  list-style: none;
}
.container-narrow {
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
}
/* Hält die Abstände der Kindelemente im Container (kein Zusammenfallen der Außenabstände). */
.container-narrow:before, .container-narrow:after {
  content: " ";
  display: table;
}
/* Langes Einzelwort: Schrift schrumpft, sobald es sonst nicht mehr ins Fenster passt. */
.heading-lang {
  font-size: min(38px, calc((100vw - 40px) / 10.8));
  overflow-wrap: break-word;
}
.main-heading-wrap {
  margin-bottom: 60px;
}
.container {
  width: 100%;
  max-width: 1140px;
  margin-right: auto;
  margin-left: auto;
}
.heading-2 {
  margin-right: 2%;
  margin-left: 2%;
  color: var(--farbe-gruen);
}
.main-paragraph-wrap {
  display: block;
  margin-top: 60px;
  margin-bottom: 150px;
}
.paragraph-bigger {
  margin-right: 2%;
  margin-bottom: 10px;
  margin-left: 2%;
  opacity: 1;
  font-family: Montserrat, sans-serif;
  font-size: 24px;
  line-height: 34px;
  font-weight: 400;
  text-align: left;
}
.centered-container {
  display: block;
  text-align: center;
}
.paragraph-2 {
  display: block;
  overflow: visible;
  margin-right: 2%;
  margin-left: 2%;
  font-family: Montserrat, sans-serif;
  color: var(--farbe-text);
  font-size: 18px;
  line-height: 24px;
  text-align: justify;
}
/* Abstand zum Abschnittsende, stand früher als leere Zeilen im Text. */
.paragraph-abstand {
  padding-bottom: 48px;
}
.section {
  margin-top: 0px;
}
.paragraph-3 {
  display: block;
  overflow: visible;
  margin-right: 2%;
  margin-left: 2%;
  font-family: Montserrat, sans-serif;
  color: var(--farbe-text);
  font-size: 18px;
  line-height: 24px;
  text-align: left;
}
.link-vorstand.is-current {
  color: var(--farbe-gruen);
}
.link-mitgliedschaft.is-current {
  color: var(--farbe-orange);
}
.link-cloud.is-current {
  color: var(--farbe-blau);
}
.link-security.is-current {
  color: var(--farbe-rot);
}
.link-impressum.is-current {
  color: var(--farbe-gruen);
}
.link-datenschutzerkl-rung.is-current {
  color: var(--farbe-gruen);
}

/* Startseite: Einstieg */
.intro-header {
  position: relative;
  display: block;
  width: 100.0001803008255%;
  height: 500px;
  max-height: 500px;
  max-width: 100%;
  min-height: 200px;
  min-width: 100%;
  margin-top: 98px;
  margin-bottom: 0px;
  pointer-events: none;
}
.intro-header::before,
.intro-header canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* Poster: gleicher Maßstab wie die Szene, mittig, ohne Verzerrung. Das Bild ist mindestens so breit wie der Bereich
   und läuft an den Fensterrändern aus. Ohne Alphakanal, spart Dateigröße: Der Bildhintergrund verschwindet per
   Mischmodus, sichtbar bleibt die Farbe der Seite. Das Element selbst darf daher nicht isolieren. */
.intro-header::before {
  content: "";
  background-image: image-set(var(--poster-mittel) 1x, var(--poster-mittel-2x) 2x);
  background-position: 50% 50%;
  background-size: cover;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mix-blend-mode: var(--wenn-dunkel, screen) var(--wenn-hell, multiply);
  transition: opacity 1.2s ease;
}
.intro-header canvas {
  opacity: 0;
  transition: opacity 1.2s ease;
}
.intro-header.hero-aktiv::before {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease, visibility 0s 1.2s;
}
.intro-header.hero-aktiv canvas {
  opacity: 1;
}
/* Bis 991 px liegt das Menü über dem oberen Rand des Bereichs: Die Grafik zeichnet erst darunter, nichts wird angeschnitten. */
@media screen and (max-width: 991px) {
  .intro-header::before {
    background-image: var(--poster-klein);
  }
  .intro-header::before,
  .intro-header canvas {
    top: 30px;
    height: calc(100% - 30px);
  }
}
@media screen and (min-width: 1921px) {
  .intro-header::before {
    background-image: var(--poster-gross);
  }
}
.home {
  position: static;
  margin-top: 0px;
  padding-top: 0px;
  padding-bottom: 25.6px;
}
.bold-text-3 {
  font-weight: 600;
}
.bold-text-4 {
  font-weight: 600;
}

/* Mitgliedschaft */
.mitgliedschaft {
  overflow: visible;
  width: 100%;
  height: 100%;
  max-height: 14.4834230331614%;
  max-width: 100.00015433044%;
  min-height: 14.483%;
  min-width: 100%;
  padding-top: 100px;
  padding-bottom: 100px;
}
.heading-4 {
  margin-right: 2%;
  margin-left: 2%;
  font-family: 'Gobold', Impact, 'Arial Narrow', sans-serif;
  color: var(--farbe-orange);
  font-size: 24px;
  line-height: 30px;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 400;
}
.bold-text-2 {
  color: var(--farbe-orange);
  font-weight: 400;
}
.heading-mitgliedschaft {
  margin-right: 2%;
  margin-left: 2%;
  color: var(--farbe-orange);
}
.link-block-download-mitgliedsantragsformular {
  min-height: 150px;
  min-width: 133px;
  background-position: 0px 0px;
  background-size: 100% 100%;
}
.link-block-mitgliedsbeitrag {
  min-height: 150px;
  min-width: 133px;
  background-position: 0px 0px;
  background-size: 100% 100%;
}
.link-block-schicken {
  min-height: 150px;
  min-width: 133px;
  background-position: 0px 0px;
  background-size: 100% 100%;
}
.grid-2 {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  width: 40%;
  margin-top: 0%;
  margin-right: auto;
  margin-left: auto;
  row-gap: 0px;
  grid-template-columns: 0.25fr 1fr;
}
.link-block-ausfuellen {
  min-height: 150px;
  min-width: 133px;
  background-position: 0px 0px;
  background-size: 100% 100%;
}
.email-link-mitglied {
  font-style: italic;
  text-decoration: none;
}
.step-icon {
  grid-row: span 2;
}

/* Vorstand */
.vorstand {
  position: static;
  padding-top: 100px;
  padding-bottom: 100px;
  float: none;
  clear: none;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
.gallery-thumbnail {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
  object-position: 50% 50%;
}
.gallery-thumbnail:hover {
  width: 110%;
  height: 110%;
}
.heading-3 {
  margin-top: 5px;
  margin-bottom: 15px;
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  line-height: 30px;
  font-weight: 500;
}
.vorstand-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 32px;
  align-items: start;
}
.vorstand-card {
  text-align: center;
}
.vorstand-card .gallery-thumbnail {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.vorstand-card .heading-3 {
  margin-top: 16px;
}

/* Cloud */
.cloud, .security {
  padding-top: 100px;
  padding-bottom: 100px;
}
.heading-2-cloud, .heading-2-security {
  margin-right: 2%;
  margin-left: 2%;
  color: var(--farbe-blau);
}
.link-4 {
  text-decoration: none;
}

/* Security: Warnungen von CERT.at, kommen aus daten/warnungen.json (feed/warnungen.py) */
.heading-2-security {
  color: var(--farbe-rot);
}
.warnungen-rahmen {
  width: min(800px, 92%);
  margin: 40px auto 0;
}
.warnungen-rahmen .paragraph-2 {
  margin: 0 0 16px;
  padding: 0;
  text-align: left;
}
.warnungen {
  margin: 0;
  padding: 0;
  font-family: Montserrat, sans-serif;
  list-style: none;
}
.warnungen[hidden], .warnungen-mehr[hidden] {
  display: none;
}
.warnungen li {
  padding: 14px 0;
  border-top: 1px solid var(--farbe-flaeche);
}
.warnungen time {
  display: block;
  color: var(--farbe-gedaempft);
  font-size: 0.875rem;
}
.warnungen a {
  overflow-wrap: anywhere;
  font-weight: 600;
}
.warnung-aktiv {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 4px;
  background-color: var(--farbe-rot);
  color: var(--farbe-hintergrund);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.warnungen-mehr {
  margin-top: 16px;
  padding: 10px 18px;
  border: 2px solid var(--farbe-rot);
  border-radius: 4px;
  background: none;
  color: var(--farbe-rot);
  font-family: Montserrat, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.warnungen-mehr:hover {
  background-color: var(--farbe-rot);
  color: var(--farbe-hintergrund);
}
.warnungen-mehr:focus-visible {
  outline: 3px solid var(--farbe-rot);
  outline-offset: 2px;
}
.warnungen-stand {
  margin-top: 16px;
  color: var(--farbe-gedaempft);
  font-size: 0.875rem;
}

/* Passwort-Prüfung */
.passwort-titel {
  margin-top: 60px;
  color: var(--farbe-rot);
  text-align: left;
}
.passwort-form[hidden] {
  display: none;
}
.passwort-form {
  font-family: Montserrat, sans-serif;
}
.passwort-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 1rem;
  font-weight: 600;
}
.passwort-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}
.passwort-zeile input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 10px 12px;
  border: 2px solid var(--farbe-gedaempft);
  border-radius: 4px;
  background-color: var(--farbe-hintergrund);
  color: var(--farbe-text);
  font-size: 1rem;
}
.passwort-zeile input:focus-visible {
  border-color: var(--farbe-rot);
  outline: 3px solid var(--farbe-rot);
  outline-offset: 1px;
}
.passwort-zeile .warnungen-mehr {
  margin-top: 0;
}
.passwort-zeile .warnungen-mehr:disabled {
  opacity: 0.6;
  cursor: wait;
}
.passwort-ergebnis {
  margin: 16px 0 0;
  font-size: 1rem;
  line-height: 1.5;
}
.passwort-ergebnis:empty {
  display: none;
}
.passwort-treffer, .passwort-fehler {
  color: var(--farbe-rot);
  font-weight: 600;
}
.passwort-frei {
  color: var(--farbe-gruen);
  font-weight: 600;
}

/* Vereins-Cloud */
/* CCO Cloud für Mitglieder: ruhige Karte über dem Vereins-Block, mit demselben Sechseck. */
.mitglied {
  display: grid;
  box-sizing: border-box;
  width: min(1180px, calc(100% - 40px));
  margin: 60px auto 0;
  padding: 32px 56px;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  border-radius: 20px;
  background: var(--farbe-flaeche);
  font-family: Montserrat, sans-serif;
}
.mitglied .verein-tb { width: 170px; margin: 0; }
.mitglied .verein-tb span { font-size: 40px; line-height: 1; text-align: center; }
.mitglied-marke {
  margin: 0 0 6px;
  color: var(--farbe-link-blau);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 20px;
  text-transform: uppercase;
}
.mitglied-titel {
  margin: 0 0 10px;
  color: var(--farbe-text);
  font-family: Gobold, Montserrat, sans-serif;
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 700;
  line-height: 1.15;
}
.mitglied-text p:not(.mitglied-marke) {
  max-width: 68ch;
  margin: 0 0 10px;
  color: var(--farbe-text);
  font-size: 17px;
  line-height: 28px;
}
.mitglied-text p:last-child { margin-bottom: 0; }
.mitglied-text a {
  color: var(--farbe-link-blau);
  font-weight: 600;
}

/* Vereins-Cloud: Blickfang im Abschnitt Cloud, in den CCO-Farben. Die Fläche ist #007db2, das
   CCO-Blau der Text-Links: Weiß erreicht darauf 4,59:1, auf #0088c2 nur 3,96:1. */
.verein {
  --verein-weiss: #fff;
  --verein-linie: rgb(255 255 255 / 0.35);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: min(1180px, calc(100% - 40px));
  margin: 24px auto 60px;
  padding: 56px;
  border-radius: 20px;
  color: var(--verein-weiss);
  font-family: Montserrat, sans-serif;
  background: #007db2;
}
.verein-muster {
  position: absolute;
  top: 0;
  right: 0;
}
.verein-wabe { transform-box: fill-box; transform-origin: center; }
.verein-wabe { fill: #33a0ce; }
@media (prefers-reduced-motion: no-preference) {
  .verein-wabe { animation: verein-atmen 6s ease-in-out infinite alternate; }
  .verein-kachel { transition: transform 0.2s ease; }
  .verein-kachel:hover { transform: translateY(-3px); }
  .verein-knopf { transition: transform 0.2s ease; }
  .verein-knopf:hover { transform: translateY(-2px); }
}
@keyframes verein-atmen {
  from { transform: scale(0.82); }
  to { transform: scale(1); }
}
.verein-kopf, .verein-vorteile { position: relative; }
.verein-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr);
  gap: 48px;
  align-items: start;
}
.verein-marke {
  margin: 0 0 14px;
  color: var(--verein-weiss);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 20px;
  text-transform: uppercase;
}
.verein-titel {
  margin: 0;
  color: var(--verein-weiss);
  font-family: Gobold, Montserrat, sans-serif;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 700;
  line-height: 1.12;
}
.verein-adresse {
  display: inline-flex;
  max-width: 100%;
  box-sizing: border-box;
  align-items: center;
  gap: 10px;
  margin: 24px 0 0;
  padding: 10px 18px;
  border: 1px solid var(--verein-linie);
  border-radius: 999px;
  background: rgb(0 0 0 / 0.22);
  color: var(--verein-weiss);
  font-size: 17px;
  line-height: 24px;
}
.verein-adresse svg { flex: none; }
.verein-adresse b { color: var(--verein-weiss); font-weight: 700; }
.verein-leitsatz {
  margin: 24px 0 0;
  color: var(--verein-weiss);
  font-size: 22px;
  font-weight: 700;
  line-height: 30px;
}
.verein-text {
  max-width: 58ch;
  margin: 24px 0 0;
  color: var(--verein-weiss);
  font-size: 17px;
  line-height: 28px;
}
.verein-leitsatz + .verein-text { margin-top: 8px; }
.verein-text a {
  color: var(--verein-weiss);
  text-decoration: underline;
}
.verein-preis {
  padding: 30px;
  border-radius: 16px;
  background: var(--farbe-verein-karte);
  color: var(--farbe-text);
  box-shadow: 0 14px 40px rgb(0 0 0 / 0.25);
}
.verein-betrag {
  margin: 0;
  color: var(--farbe-gedaempft);
  font-size: 18px;
  line-height: 1;
}
.verein-betrag b {
  color: var(--farbe-text);
  font-size: 60px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.verein-fuer {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}
.verein-aufteilung { margin: 18px 0 22px; }
.verein-aufteilung div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--farbe-verein-trenner);
  font-size: 14px;
  line-height: 20px;
}
.verein-aufteilung dt { font-weight: 400; }
.verein-aufteilung dd { margin: 0; font-weight: 700; white-space: nowrap; }
.verein-knopf {
  display: block;
  padding: 14px 20px;
  border-radius: 10px;
  background: #ff661e;
  color: #1a1a1a;
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
}
.verein-knopf:hover { color: #1a1a1a; }
.verein-mail {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}
.verein-mail a { color: var(--farbe-link-blau); }
.verein-domain {
  margin: 16px 0 0;
  color: var(--farbe-gedaempft);
  font-size: 13px;
  line-height: 20px;
}
.verein-vorteile {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}
.verein-kachel {
  padding: 24px;
  border-radius: 14px;
  background: var(--farbe-verein-karte);
  color: var(--farbe-text);
}
.verein-kachel-gross {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.verein-kachel h4 {
  margin: 0 0 8px;
  color: var(--farbe-text);
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}
.verein-kachel p {
  margin: 0;
  text-wrap: pretty;
  color: var(--farbe-text);
  font-size: 15px;
  line-height: 23px;
}
.verein-kachel-gross p { text-wrap: balance; }
.verein-fest { display: block; }
.verein-tb {
  display: grid;
  width: min(210px, 70%);
  margin-bottom: 16px;
  place-items: center;
}
.verein-tb > * { grid-area: 1 / 1; }
.verein-tb svg { display: block; width: 100%; height: auto; }
.verein-tb span {
  font-size: clamp(38px, 4.4vw, 50px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--farbe-link-blau);
  white-space: nowrap;
}
.verein-rahmen-a { fill: var(--farbe-verein-rahmen-a); }
.verein-rahmen-b { fill: var(--farbe-verein-rahmen-b); }
.verein-symbole { position: absolute; width: 0; height: 0; }
/* Symbole im selben Sechseck-Rahmen wie die CCO-Logos. */
.verein-icon {
  display: grid;
  width: 56px;
  height: 64.6px;
  margin-bottom: 14px;
  place-items: center;
  color: var(--farbe-link-blau);
}
.verein-icon > * { grid-area: 1 / 1; }
.verein-icon svg:not(.verein-rahmen) {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.verein-rahmen { width: 100%; height: 100%; }
.verein-kachel-breit { grid-column: span 2; }
.verein-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 23px;
}
.verein-liste li { position: relative; padding-left: 20px; }
.verein-liste li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 10px;
  height: 11.5px;
  background: var(--farbe-blau);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
/* Bis 1199 px zwei Spalten: So passen die Punkte der Sicherheits-Kachel in je eine Zeile. */
@media screen and (max-width: 1199px) {
  .verein-vorteile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .verein-kachel-gross, .verein-kachel-breit { grid-column: 1 / -1; grid-row: auto; }
  .verein-kachel-gross .verein-tb { width: 170px; }
}
@media screen and (max-width: 991px) {
  .verein { padding: 40px; }
  .verein-kopf { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media screen and (max-width: 767px) {
  .verein { width: 100%; margin: 16px 0 40px; padding: 28px 20px; border-radius: 16px; }
  .mitglied { width: 100%; margin-top: 32px; padding: 24px 20px; grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: center; border-radius: 16px; }
  .mitglied .verein-tb { width: 130px; margin: 0; }
  .mitglied .verein-tb span { font-size: 30px; }
  .verein-vorteile { grid-template-columns: minmax(0, 1fr); margin-top: 32px; gap: 12px; }
  .verein-preis { padding: 22px; }
  .verein-betrag b { font-size: 52px; }
  .verein-kachel:not(.verein-kachel-gross) {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 16px;
    padding: 18px;
  }
  .verein-kachel:not(.verein-kachel-gross) .verein-icon { grid-row: 1 / span 2; margin: 0; }
  .verein-kachel-gross { padding: 20px; }
  .verein-wabe { display: none; }
  .verein-kachel-breit { grid-column: auto; }
  .verein-kachel-breit .verein-liste { grid-column: 1 / -1; margin-top: 14px; }
  .verein-liste { grid-template-columns: minmax(0, 1fr); }
}

/* Footer */
.footer {
  padding-top: 60px;
  padding-bottom: 40px;
  background-color: var(--farbe-flaeche);
  text-align: center;
}
.footer-flex-container {
  display: flex;
  margin-bottom: 40px;
  justify-content: space-between;
  text-align: left;
}
.footer-logo-link {
  max-height: 60px;
  min-width: 60px;
  flex: 0 auto;
}
.footer-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 0% 50%;
}
.footer-heading {
  margin-top: 0px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
}
.footer-link {
  display: block;
  margin-bottom: 10px;
  font-family: Montserrat, sans-serif;
  color: var(--farbe-footer-link);
  text-decoration: none;
}
.footer-link:hover {
  text-decoration: underline;
}

/* Rechtstexte */
.paragraph-light-copy {
  margin-right: 20px;
  margin-bottom: 0px;
  margin-left: 20px;
  color: var(--farbe-rechtstext);
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;
  text-transform: none;
}

.faq-antwort {
  margin-bottom: 24px;
}

/* Fehlerseite */
.utility-page-wrap {
  display: flex;
  width: 100vw;
  height: 100vh;
  max-height: 100%;
  max-width: 100%;
  justify-content: center;
  align-items: center;
}
.utility-page-content {
  display: flex;
  width: 260px;
  flex-direction: column;
  text-align: center;
}
.link-block-4 {
  width: 100px;
  height: 100px;
}
.utility-page-content h1 {
  font-size: 32px;
  line-height: 36px;
}

/* Sprungziele */
#mitgliedschaft, #vorstand, #cloud, #security {
  scroll-margin-top: 80px;
}
#home {
  scroll-margin-top: 100vh;
}
#inhalt {
  scroll-margin-top: 80px;
}

/* Mitgliedsantrag */
.grid-2.antrag-raster {
  width: min(640px, 92%);
  margin-right: auto;
  margin-left: auto;
  grid-template-columns: 133px minmax(0, 1fr);
}
.antrag-raster .link-block-ausfuellen {
  align-self: start;
}
.antrag-bereich {
  width: 96%;
  min-width: 0;
  margin-right: 2%;
  margin-left: 2%;
  margin-bottom: 40px;
  font-family: Montserrat, sans-serif;
  color: var(--farbe-text);
  font-size: 16px;
  line-height: 22px;
}
.antrag-hinweis {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 20px;
}
.antrag-zeile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  column-gap: 16px;
}
.antrag-feld {
  min-width: 0;
  margin-bottom: 16px;
}
.antrag-feld label,
.antrag-gruppe legend {
  display: block;
  margin-bottom: 4px;
  padding: 0;
  font-weight: 700;
}
.antrag-feld input,
.antrag-feld textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--farbe-text);
  border-radius: 0;
  background-color: var(--farbe-hintergrund);
  color: var(--farbe-text);
  font: inherit;
}
.antrag-feld textarea {
  resize: vertical;
}
.antrag-gruppe {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.antrag-verein {
  margin-bottom: 16px;
  padding-left: 12px;
  border-left: 3px solid var(--farbe-link-orange);
}
.antrag-wahl {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
  cursor: pointer;
}
.antrag-wahl > input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--farbe-link-orange);
}
/* Fokussierte Felder und Meldungen nicht unter dem festen Menü verstecken. */
.antrag input,
.antrag textarea,
.antrag-absenden,
.antrag-meldung {
  scroll-margin-top: 85px;
}
.antrag input:focus-visible,
.antrag textarea:focus-visible,
.antrag-absenden:focus-visible {
  outline: 3px solid var(--farbe-link-orange);
  outline-offset: 2px;
}
/* Vom Browser ausgefüllte Felder behalten die Farben des aktiven Schemas. Chrome und Safari erlauben
   den Hintergrund nur über einen Schatten nach innen. */
.antrag input:-webkit-autofill,
.antrag input:-webkit-autofill:hover,
.antrag input:-webkit-autofill:focus,
.antrag textarea:-webkit-autofill,
.antrag textarea:-webkit-autofill:hover,
.antrag textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--farbe-text);
  box-shadow: inset 0 0 0 100px var(--farbe-hintergrund);
  caret-color: var(--farbe-text);
}
.antrag input:autofill,
.antrag textarea:autofill {
  background-color: var(--farbe-hintergrund);
  color: var(--farbe-text);
}
.antrag-fehlerhaft input:not([type="radio"], [type="checkbox"]),
.antrag-fehlerhaft textarea {
  border-width: 2px;
  border-color: var(--farbe-fehler);
}
.antrag-fehlertext {
  display: block;
  margin-top: 4px;
  color: var(--farbe-fehler);
  font-size: 14px;
  font-weight: 700;
}
.antrag > .antrag-fehlertext {
  margin-bottom: 16px;
}
.antrag-honig {
  position: absolute;
  left: -9999px;
}
.antrag-absenden {
  width: 100%;
  min-height: 48px;
  padding: 10px 16px;
  border: 2px solid var(--farbe-text);
  border-radius: 0;
  background-color: var(--farbe-text);
  color: var(--farbe-hintergrund);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.antrag-absenden:hover:not(:disabled) {
  background-color: transparent;
  color: var(--farbe-text);
}
.antrag-absenden:disabled {
  opacity: 0.6;
  cursor: wait;
}
.antrag-meldung {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-left: 4px solid var(--farbe-link-orange);
  background-color: var(--farbe-flaeche);
  font-weight: 700;
}
.antrag-seite {
  max-width: 640px;
  margin: 0 auto;
  padding: 60px 16px;
}

@media screen and (max-width: 991px) {
  .container-narrow {
    max-width: 728px;
  }
  .heading-2 {
    margin-left: 20px;
  }
  .main-paragraph-wrap {
    margin-right: 2%;
    margin-left: 2%;
  }
  .intro-header {
    display: block;
    width: auto;
    height: auto;
    margin-top: 0;
  }
  .home {
    margin-top: 0;
    padding-bottom: 0;
  }
  .heading-mitgliedschaft {
    margin-left: 20px;
  }
  .grid-2 {
    margin-right: 5%;
    margin-left: 10%;
    grid-template-columns: 0.25fr minmax(auto, auto);
  }
  .vorstand-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
  .heading-2-cloud, .heading-2-security {
    margin-right: 20px;
    margin-left: 20px;
  }
  .footer {
    padding-right: 20px;
    padding-left: 20px;
  }
  #mitgliedschaft, #vorstand, #cloud, #security {
    scroll-margin-top: 84px;
  }
}

/* 768 bis 991 px: dasselbe Band wie am Handy statt des dünnen Streifens, ohne die Ausgleichsabstände. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .home {
    margin-top: 0;
    padding-top: 0;
  }
  .intro-header {
    margin-top: 0;
    height: 340px;
    height: clamp(300px, 42svh, 380px);
    min-height: 0;
    max-height: none;
    pointer-events: auto;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  .intro-header::before,
  .intro-header canvas {
    top: 0;
    height: 100%;
  }
}
@media screen and (max-width: 767px) {
  .container {
    text-align: center;
  }
  .main-paragraph-wrap {
    display: block;
    width: auto;
    min-height: 100%;
    min-width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
  .paragraph-bigger {
    font-size: 16px;
    line-height: 28px;
  }
  .paragraph-2 {
    font-size: 16px;
  }
  .paragraph-3 {
    font-size: 16px;
  }
  /* Eigenes Band mit fester Höhe: Das Einblenden der Animation verschiebt nichts.
     svh statt vh, damit die Adressleiste beim Scrollen die Höhe nicht ändert. */
  .intro-header {
    margin-top: 0;
    height: 340px;
    height: clamp(280px, 42svh, 380px);
    max-height: none;
    /* Berührbar und nicht markierbar: Halten spielt die Animation ab, ohne Text in der Nähe zu markieren. */
    pointer-events: auto;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    min-height: 0;
  }
  .intro-header::before,
  .intro-header canvas {
    top: 0;
    height: 100%;
  }
  .intro-header::before {
    background-image: var(--poster-handy);
  }
  .home {
    margin-top: 0;
    padding-top: 0px;
  }
  .mitgliedschaft {
    padding: 40px 20px;
  }
  .heading-4 {
    font-size: 20px;
  }
  .grid-2 {
    margin-left: 1%;
  }
  .vorstand {
    display: block;
    padding: 40px 20px;
  }
  .cloud, .security {
    padding: 40px 20px;
  }
  .footer {
    padding: 40px 20px;
  }
  .footer-image {
    object-fit: contain;
  }
  #mitgliedschaft, #vorstand, #cloud, #security {
    scroll-margin-top: 84px;
  }
  /* Abstand zwischen den Abschnitten der Startseite, Unterseiten bleiben unberührt. */
  .home .main-paragraph-wrap, .mitgliedschaft .main-paragraph-wrap {
    margin-bottom: 40px;
  }
}

/* Die Footer-Spalten passen unter 600 px nicht mehr nebeneinander. */
@media screen and (min-width: 480px) and (max-width: 599px) {
  .footer-flex-container {
    flex-wrap: wrap;
    gap: 20px;
  }
}

@media screen and (max-width: 479px) {
  .container-narrow {
    max-width: none;
  }
  .heading-2 {
    margin-right: 20px;
  }
  .centered-container {
    text-align: left;
  }
  /* Blocksatz reißt bei dieser Breite große Lücken. */
  .paragraph-2 {
    text-align: left;
  }
  /* Der Einstieg hat keinen Seitenabstand wie die übrigen Abschnitte. */
  .home .paragraph-bigger, .home .paragraph-2 {
    margin-right: 20px;
    margin-left: 20px;
  }
  .home {
    margin-top: 0%;
  }
  .mitgliedschaft {
    display: block;
  }
  .heading-4 {
    font-size: 18px;
    text-align: center;
  }
  .bold-text-2 {
    font-size: 100%;
    line-height: 100%;
    text-align: center;
  }
  .heading-mitgliedschaft {
    margin-right: 2%;
    margin-left: 2%;
  }
  .grid-2 {
    display: flex;
    width: 96%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    grid-template-columns: 0.25fr;
  }
  .vorstand-grid {
    grid-template-columns: 1fr;
  }
  .footer {
    padding-right: 20px;
    padding-left: 20px;
    text-align: left;
  }
  .footer-flex-container {
    flex-direction: column;
  }
  .footer-logo-link {
    height: 60px;
  }
  .footer-heading {
    margin-top: 20px;
  }
  #mitgliedschaft, #vorstand, #cloud, #security {
    scroll-margin-top: 68px;
  }
  /* Nur der Einstieg braucht Luft unter dem Menü, in den übrigen Abschnitten genügt deren Innenabstand. */
  .mitgliedschaft .main-heading-wrap, .vorstand .main-heading-wrap, .cloud .main-heading-wrap, .security .main-heading-wrap {
    padding-top: 0;
  }
}

/* Links in großen Einleitungssätzen nicht nur über die Farbe erkennbar. */
.paragraph-bigger a {
  text-decoration: underline;
}
/* Kein Rechteck beim Antippen am Handy. Für die Tastatur bleibt der Fokusrahmen. */
nav a,
nav button {
  -webkit-tap-highlight-color: transparent;
}
.schema-schalter {
  display: none;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--farbe-gedaempft);
  cursor: pointer;
}
[data-theme] .schema-schalter {
  display: flex;
}
.schema-schalter:hover {
  color: var(--farbe-text);
}
.schema-schalter:focus-visible {
  outline: 3px solid var(--farbe-gruen);
  outline-offset: 2px;
}
/* Cloud Login, Lage und Größe stehen im Menü-Block. */
.cloud-login {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--farbe-gedaempft);
  border-radius: 999px;
  color: var(--farbe-gedaempft);
  font: 400 18px/1 'Gobold', Impact, 'Arial Narrow', sans-serif;
  text-decoration: none;
  white-space: nowrap;
}
.cloud-login svg { flex: none; }
.cloud-login:hover {
  border-color: var(--farbe-blau);
  color: var(--farbe-blau);
}
.cloud-login:focus-visible {
  outline: 3px solid var(--farbe-link-blau);
  outline-offset: 2px;
}
.schema-mond {
  display: var(--wenn-dunkel, none) var(--wenn-hell, block);
}
.schema-sonne {
  display: var(--wenn-dunkel, block) var(--wenn-hell, none);
}
/* Unter 360 px passt der Knopf neben die Menü-Icons nur mit engerem Abstand. */
/* Vier Menü-Icons, Logo und Hell/Dunkel-Knopf: schmal müssen die Icons enger und kleiner stehen. */
/* Breiter als 1440 px: Das Menü behält seine Maße von 1440 px und steht mittig im Fenster. */
/* Platz für den Cloud Login: Das Logo rückt an die Menüpunkte, schmal bleibt nur das Symbol. */
/* Schmal: Den Platz für den Login holen wir aus den Rändern, die Menü-Icons bleiben groß. */
/* Auf den Unterseiten ragt das Logo unter 480 px um 15 px aus dem Menü, der Knopf bleibt auf seiner Höhe. */

/* Dunkel-Varianten der Logos und Icons (*-dunkel.svg): nur Farben, Geometrie gleich.
   Beide Dateien stehen hier, die Regeln oben tragen deshalb kein Bild. */
/* Navigation */
.link-block-2 { background-image: var(--wenn-dunkel, url('../images/CCO_Logo_1-dunkel.svg')) var(--wenn-hell, url('../images/CCO_Logo_1.svg')); }
.link-block-2.is-current { background-image: var(--wenn-dunkel, url('../images/CCO_Logo-dunkel.svg')) var(--wenn-hell, url('../images/CCO_Logo.svg')); }
.link-block-mitgliedschaft { background-image: var(--wenn-dunkel, url('../images/CMO-members_1-dunkel.svg')) var(--wenn-hell, url('../images/CMO-members_1.svg')); }
.link-block-mitgliedschaft.is-current { background-image: var(--wenn-dunkel, url('../images/CMO-members-dunkel.svg')) var(--wenn-hell, url('../images/CMO-members.svg')); }
.link-block-vorstand { background-image: var(--wenn-dunkel, url('../images/COO-vorstand-dunkel.svg')) var(--wenn-hell, url('../images/COO-vorstand.svg')); }
.link-block-vorstand.is-current { background-image: var(--wenn-dunkel, url('../images/COO-vorstand_1-dunkel.svg')) var(--wenn-hell, url('../images/COO-vorstand_1.svg')); }
.link-block-cloud { background-image: var(--wenn-dunkel, url('../images/CCO-cloud_1-dunkel.svg')) var(--wenn-hell, url('../images/CCO-cloud_1.svg')); }
.link-block-cloud.is-current { background-image: var(--wenn-dunkel, url('../images/CCO-cloud-dunkel.svg')) var(--wenn-hell, url('../images/CCO-cloud.svg')); }
.link-block-security { background-image: var(--wenn-dunkel, url('../images/CSO-security_1-dunkel.svg')) var(--wenn-hell, url('../images/CSO-security_1.svg')); }
.link-block-security.is-current { background-image: var(--wenn-dunkel, url('../images/CSO-security-dunkel.svg')) var(--wenn-hell, url('../images/CSO-security.svg')); }
/* Menü: Logo links, Punkte in der Mitte, Knopf und Umschalter rechts. Der freie Platz verteilt sich
   über die beiden automatischen Ränder. Drei Stufen: Handy, Tablet, PC. Ohne JavaScript fehlt der Umschalter. */
nav {
  --logo: 48px;
  --icon: 44px;
  --knopf: 36px;
  --abstand: 6px;
  --rand: 6px;
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-height: 60px;
  padding: 6px max(var(--rand), calc((100% - 1440px) / 2 + 72px));
  align-items: center;
  background-color: var(--farbe-hintergrund);
}
.navigation {
  position: sticky;
  top: 0;
  z-index: 999999999;
}
nav .grid { display: contents; }
nav .link-block {
  flex: none;
  width: var(--icon);
  height: var(--icon);
  margin-left: var(--abstand);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
nav .link-block-2 {
  width: var(--logo);
  height: var(--logo);
  margin: 0 auto 0 0;
  background-position: left center;
  text-decoration: none;
}
.text-block { display: none; }
.text-block a {
  display: block;
  color: var(--farbe-gedaempft);
  font: 700 18px/1 'Gobold', Impact, 'Arial Narrow', sans-serif;
  text-decoration: none;
  white-space: nowrap;
}
.nav-name { display: none; }
.cloud-login {
  flex: none;
  width: var(--knopf);
  height: var(--knopf);
  margin-left: auto;
  padding: 0;
  justify-content: center;
}
.cloud-login span { display: none; }
.schema-schalter {
  flex: none;
  width: var(--knopf);
  height: var(--knopf);
  margin-left: 8px;
}
/* Handy, sehr schmal */
@media screen and (max-width: 359px) {
  nav {
    --logo: 44px;
    --icon: 38px;
    --knopf: 34px;
    --abstand: 4px;
    --rand: 6px;
  }
  .schema-schalter { margin-left: 4px; }
}
@media screen and (min-width: 400px) {
  nav {
    --abstand: 12px;
    --rand: 12px;
  }
}
/* Tablet: nur Icons */
@media screen and (min-width: 600px) {
  nav {
    --logo: 64px;
    --icon: 52px;
    --knopf: 44px;
    --abstand: 24px;
    --rand: 24px;
    min-height: 76px;
  }
}
/* PC: Icons mit Text */
@media screen and (min-width: 992px) {
  nav {
    --logo: 56px;
    --icon: 36px;
    --abstand: 28px;
    --rand: 32px;
    min-height: 72px;
  }
  .text-block { display: block; margin-left: 10px; }
  .text-block + .text-block { margin-left: var(--abstand); }
}
/* Unterseiten: nur zwei Textlinks, die passen schon früher neben das Logo. */
@media screen and (min-width: 480px) {
  nav:not(.navigation) .text-block { display: block; margin-left: 12px; }
}
@media screen and (min-width: 992px) {
  nav:not(.navigation) .text-block { margin-left: 10px; }
  nav:not(.navigation) .text-block + .text-block { margin-left: var(--abstand); }
}
/* Sobald Platz ist: Knopf mit Text, dann Vereinsname */
@media screen and (min-width: 1100px) {
  .cloud-login { width: auto; padding: 0 16px; }
  .cloud-login span { display: inline; }
}
@media screen and (min-width: 1280px) {
  nav .link-block-2 {
    display: flex;
    width: auto;
    padding-left: calc(var(--logo) + 8px);
    align-items: center;
  }
  .nav-name {
    display: block;
    color: var(--farbe-gedaempft);
    font: 700 20px/1 'Gobold', Impact, 'Arial Narrow', sans-serif;
    white-space: nowrap;
  }
  .link-block-2.is-current .nav-name { color: var(--farbe-gruen); }
}
@media (hover: hover) {
  .link-block-2:hover .nav-name { color: var(--farbe-gruen); }
}
/* Menü: Beim Darüberfahren wie der aktive Punkt, Icon und Text gemeinsam. */
@media (hover: hover) {
  .link-block-mitgliedschaft:hover, .link-block-mitgliedschaft:has(+ .text-block a:hover) { background-image: var(--wenn-dunkel, url('../images/CMO-members-dunkel.svg')) var(--wenn-hell, url('../images/CMO-members.svg')); }
  .link-block-mitgliedschaft:hover + .text-block a, .link-mitgliedschaft:hover { color: var(--farbe-orange); }
  .link-block-vorstand:hover, .link-block-vorstand:has(+ .text-block a:hover) { background-image: var(--wenn-dunkel, url('../images/COO-vorstand_1-dunkel.svg')) var(--wenn-hell, url('../images/COO-vorstand_1.svg')); }
  .link-block-vorstand:hover + .text-block a, .link-vorstand:hover { color: var(--farbe-gruen); }
  .link-block-cloud:hover, .link-block-cloud:has(+ .text-block a:hover) { background-image: var(--wenn-dunkel, url('../images/CCO-cloud-dunkel.svg')) var(--wenn-hell, url('../images/CCO-cloud.svg')); }
  .link-block-cloud:hover + .text-block a, .link-cloud:hover { color: var(--farbe-blau); }
  .link-block-security:hover, .link-block-security:has(+ .text-block a:hover) { background-image: var(--wenn-dunkel, url('../images/CSO-security-dunkel.svg')) var(--wenn-hell, url('../images/CSO-security.svg')); }
  .link-block-security:hover + .text-block a, .link-security:hover { color: var(--farbe-rot); }
  .link-block-2:hover { background-image: var(--wenn-dunkel, url('../images/CCO_Logo-dunkel.svg')) var(--wenn-hell, url('../images/CCO_Logo.svg')); }
  .link-impressum:hover, .link-datenschutzerkl-rung:hover { color: var(--farbe-gruen); }
}
/* Aufmacher: Poster je Modus, gerendert aus derselben Szene wie js/hero.js */
.intro-header {
  --poster-handy: var(--wenn-dunkel, url('../images/hero-dunkel-handy.webp')) var(--wenn-hell, url('../images/hero-hell-handy.webp'));
  --poster-klein: var(--wenn-dunkel, url('../images/hero-dunkel-klein.webp')) var(--wenn-hell, url('../images/hero-hell-klein.webp'));
  --poster-mittel: var(--wenn-dunkel, url('../images/hero-dunkel-1920.webp')) var(--wenn-hell, url('../images/hero-hell-1920.webp'));
  --poster-mittel-2x: var(--wenn-dunkel, url('../images/hero-dunkel-2880.webp')) var(--wenn-hell, url('../images/hero-hell-2880.webp'));
  --poster-gross: var(--wenn-dunkel, url('../images/hero-dunkel-3840.webp')) var(--wenn-hell, url('../images/hero-hell-3840.webp'));
}
/* Mitgliedschaft */
.link-block-download-mitgliedsantragsformular { background-image: var(--wenn-dunkel, url('../images/admit-process-download_1-dunkel.svg')) var(--wenn-hell, url('../images/admit-process-download_1.svg')); }
.link-block-download-mitgliedsantragsformular:hover { background-image: var(--wenn-dunkel, url('../images/admit-process-download-dunkel.svg')) var(--wenn-hell, url('../images/admit-process-download.svg')); }
.link-block-ausfuellen { background-image: var(--wenn-dunkel, url('../images/admit-process-ausfuellen_1-dunkel.svg')) var(--wenn-hell, url('../images/admit-process-ausfuellen_1.svg')); }
.link-block-ausfuellen:hover { background-image: var(--wenn-dunkel, url('../images/admit-process-ausfuellen-dunkel.svg')) var(--wenn-hell, url('../images/admit-process-ausfuellen.svg')); }
.link-block-schicken { background-image: var(--wenn-dunkel, url('../images/admit-process-schicken_1-dunkel.svg')) var(--wenn-hell, url('../images/admit-process-schicken_1.svg')); }
.link-block-schicken:hover { background-image: var(--wenn-dunkel, url('../images/admit-process-schicken-dunkel.svg')) var(--wenn-hell, url('../images/admit-process-schicken.svg')); }
.link-block-mitgliedsbeitrag { background-image: var(--wenn-dunkel, url('../images/admit-process-mitgliedsbeitrag_1-dunkel.svg')) var(--wenn-hell, url('../images/admit-process-mitgliedsbeitrag_1.svg')); }
.link-block-mitgliedsbeitrag:hover { background-image: var(--wenn-dunkel, url('../images/admit-process-mitgliedsbeitrag-dunkel.svg')) var(--wenn-hell, url('../images/admit-process-mitgliedsbeitrag.svg')); }
/* Cloud */

/* Nur im Dunkeln: Im Hellen ist var() ungültig, es gilt der Grundwert. */
/* Rechtstexte etwas gedämpft, die Linkfarbe bleibt über 4,5:1. */
.paragraph-light-copy {
  opacity: var(--wenn-dunkel, 0.8);
}
/* Logo als <img>: Browser ohne content auf img zeigen das Original, das bleibt lesbar. */
.footer-image,
.link-block-4 img {
  content: var(--wenn-dunkel, url('../images/CCO_Logo-dunkel.svg'));
}