/* demokratie.today - Grundstil. Hell, warm, kein Dark Mode. Mobil zuerst, Umbruch bei 900 px. */

@font-face { font-family: "Asap"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/asap-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Asap"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/asap-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Asap"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/asap-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Asap"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/asap-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Asap"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/asap-latin-400-italic.woff2") format("woff2"); }

:root {
  --blau: #1863dc;
  --blau-dunkel: #1250b5;
  --herz: #e5484d;
  --text: #212121;
  --grau: #5d5f70;
  --grau-hell: #6e7287;
  --akzent: var(--blau);
  --grund: #fdfcfa;
  --weiss: #ffffff;
  --gelb: #fdb022;
  --gelb-hell: #fff4dc;
  --linie: #ebe8e2;

  --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 24px; --a6: 32px; --a7: 48px; --a8: 64px;
  --r1: 10px; --r2: 14px; --r3: 18px; --rund: 999px;
  --schatten: 0 2px 10px rgba(0, 0, 0, .06);
  --schatten-gross: 0 16px 40px rgba(0, 0, 0, .25);

  --breite: 1160px;
  --rand: 16px;
  --schrift: "Asap", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
img, svg, video { max-width: 100%; height: auto; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 var(--a4); font-weight: 700; }
h1 { font-size: clamp(2rem, 6vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 var(--a4); }
a { color: var(--blau); text-underline-offset: .15em; }
a:hover { color: var(--blau-dunkel); }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

.innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }

.sprunglink {
  position: absolute; left: var(--a2); top: -100px; z-index: 100;
  padding: var(--a3) var(--a4); background: var(--weiss); color: var(--blau);
  border-radius: var(--r1); box-shadow: var(--schatten); font-weight: 600;
}
.sprunglink:focus { top: var(--a2); }

/* ---------- Kopf ---------- */
/* Mobil ist das Menue zu und klappt per Knopf auf. Ohne Skripte (scripting: none,
   siehe unten) steht es offen - ohne Klasse von main.js, also ohne Layoutsprung. */
.kopf { background: var(--weiss); box-shadow: var(--schatten); position: sticky; top: 0; z-index: 50; }
.kopf__innen {
  max-width: var(--breite); margin: 0 auto; padding: var(--a2) var(--rand);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a2);
}
.kopf__logo { display: inline-flex; align-items: center; min-height: 44px; }
.kopf__logo img { width: 52px; height: 52px; display: block; }
.kopf__menue {
  display: inline-flex; align-items: center; gap: var(--a2);
  min-height: 44px; min-width: 44px; padding: 0 var(--a4);
  border: 1px solid var(--linie); border-radius: var(--rund); background: var(--weiss);
  color: var(--text); font: 600 1rem/1 var(--schrift); cursor: pointer;
}
.kopf__menue-strich, .kopf__menue-strich::before, .kopf__menue-strich::after {
  display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative;
}
.kopf__menue-strich::before, .kopf__menue-strich::after { content: ""; position: absolute; left: 0; }
.kopf__menue-strich::before { top: -6px; }
.kopf__menue-strich::after { top: 6px; }
.kopf__menue[aria-expanded="true"] .kopf__menue-strich { background: transparent; }
.kopf__menue[aria-expanded="true"] .kopf__menue-strich::before { top: 0; transform: rotate(45deg); }
.kopf__menue[aria-expanded="true"] .kopf__menue-strich::after { top: 0; transform: rotate(-45deg); }

.kopf__bereich { display: none; width: 100%; padding: var(--a2) 0 var(--a4); }
.kopf--offen .kopf__bereich { display: block; }
.kopf__nav ul { list-style: none; margin: 0; padding: 0; }
.kopf__nav a {
  display: flex; align-items: center; min-height: 48px; padding: 0 var(--a2);
  color: var(--text); text-decoration: none; font-weight: 500; font-size: 1.0625rem;
  border-bottom: 1px solid var(--linie);
}
.kopf__nav a:hover, .kopf__nav a[aria-current="page"] { color: var(--blau); }
.kopf__knoepfe { display: flex; flex-direction: column; gap: var(--a3); margin-top: var(--a4); }

/* Ohne Skripte: Menue offen, kein Menueknopf. Der Kopf scrollt dann mit, damit das
   offene Menue nicht dauerhaft ein Drittel des Bildschirms verdeckt. */
@media (scripting: none) {
  .kopf { position: relative; }
  .kopf__menue { display: none; }
  .kopf__bereich { display: block; }
}

@media (min-width: 900px) {
  .kopf__innen { flex-wrap: nowrap; padding-top: var(--a3); padding-bottom: var(--a3); gap: var(--a5); }
  .kopf__logo img { width: 60px; height: 60px; }
  .kopf__menue { display: none; }
  .kopf__bereich, .kopf--offen .kopf__bereich { display: flex; align-items: center; justify-content: space-between; gap: var(--a5); width: auto; flex: 1; padding: 0; }
  .kopf__nav ul { display: flex; gap: var(--a2); }
  .kopf__nav a { border-bottom: 0; min-height: 44px; padding: 0 var(--a3); }
  .kopf__nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
  .kopf__knoepfe { flex-direction: row; margin-top: 0; }
}

/* ---------- Knoepfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a2);
  min-height: 44px; padding: var(--a2) var(--a5);
  border: 2px solid transparent; border-radius: var(--rund);
  font: 600 1rem/1.2 var(--schrift); text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}
.knopf--blau { background: var(--blau); color: var(--weiss); }
.knopf--blau:hover { background: var(--blau-dunkel); color: var(--weiss); }
.knopf--weiss { background: var(--weiss); color: var(--blau); box-shadow: var(--schatten); }
.knopf--weiss:hover { color: var(--blau-dunkel); box-shadow: 0 4px 16px rgba(0, 0, 0, .1); }
.knopf--rahmen { background: transparent; color: var(--blau); border-color: var(--blau); }
.knopf--rahmen:hover { background: var(--blau); color: var(--weiss); }

/* ---------- Karten, Ueberzeile ---------- */
.karte {
  background: var(--weiss); border-radius: var(--r3); box-shadow: var(--schatten);
  padding: var(--a5); overflow: hidden;
}
.ueberzeile {
  display: block; margin: 0 0 var(--a3);
  color: var(--akzent); font-size: .875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
}
.herz { color: var(--herz); }

/* ---------- Prosa (Beitraege) ---------- */
.prosa { max-width: 70ch; font-size: 1.0625rem; }
.prosa h2 { font-size: 1.625rem; margin-top: var(--a7); }
.prosa h3 { font-size: 1.25rem; margin-top: var(--a6); }
.prosa ul, .prosa ol { padding-left: 1.4em; margin: 0 0 var(--a4); }
.prosa li { margin-bottom: var(--a2); }
.prosa img { display: block; max-width: 100%; height: auto; border-radius: var(--r2); margin: var(--a5) 0; }
.prosa figure { margin: var(--a5) 0; }
.prosa figcaption { color: var(--grau-hell); font-size: .9375rem; margin-top: var(--a2); }
.prosa blockquote {
  margin: var(--a5) 0; padding: var(--a4) var(--a5);
  background: var(--gelb-hell); border-left: 4px solid var(--gelb); border-radius: 0 var(--r1) var(--r1) 0;
}
.prosa blockquote p:last-child { margin-bottom: 0; }
.prosa table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: var(--a5) 0; }
.prosa th, .prosa td { padding: var(--a2) var(--a3); border: 1px solid var(--linie); text-align: left; vertical-align: top; }
.prosa th { background: var(--gelb-hell); }
.prosa pre { overflow-x: auto; padding: var(--a4); background: var(--weiss); border-radius: var(--r1); box-shadow: var(--schatten); }
.prosa iframe, .prosa video { max-width: 100%; }

/* ---------- Beitragsseite ---------- */
.beitrag { max-width: calc(860px + 2 * var(--rand)); margin: 0 auto; padding: var(--a6) var(--rand) 0; }
.beitrag__kopf { max-width: 70ch; }
.beitrag__kopf h1 { font-size: clamp(1.875rem, 5vw, 2.75rem); margin-bottom: var(--a3); }
.beitrag__kopf .ueberzeile { display: inline-flex; align-items: center; min-height: 44px; margin: 0; text-decoration: none; }
.beitrag__meta { color: var(--grau); font-size: .9375rem; }
.beitrag__bild { display: block; width: 100%; border-radius: var(--r3); box-shadow: var(--schatten); margin: var(--a2) 0 var(--a6); }
.hinweis { max-width: 70ch; margin: var(--a7) 0 0; border-left: 4px solid var(--gelb); }
.hinweis__titel { font-weight: 700; font-size: 1.125rem; margin-bottom: var(--a2); }

/* ---------- Beitragskarten, Listen ---------- */
.karten { display: grid; grid-template-columns: 1fr; gap: var(--a5); }
.beitragskarte { display: flex; flex-direction: column; padding: 0; position: relative; }
/* Ganze Karte klickbar (grosses Ziel), die Kategorie bleibt ein eigener Link darueber */
.beitragskarte__titel a::after { content: ""; position: absolute; inset: 0; }
.beitragskarte .ueberzeile { position: relative; z-index: 1; }
.beitragskarte__bild { display: block; }
.beitragskarte__bild img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.beitragskarte__text { display: flex; flex-direction: column; flex: 1; padding: var(--a4) var(--a5) var(--a5); }
.beitragskarte .ueberzeile { display: inline-flex; align-items: center; min-height: 44px; margin: 0; font-size: .8125rem; text-decoration: none; }
.beitragskarte__titel { font-size: 1.25rem; margin: 0 0 var(--a2); }
.beitragskarte__titel a { color: var(--text); text-decoration: none; }
.beitragskarte__titel a:hover { color: var(--blau); text-decoration: underline; }
.beitragskarte__datum { color: var(--grau-hell); font-size: 1rem; margin-bottom: var(--a2); }
.beitragskarte__kurz { color: var(--grau); margin: 0; }
.weitere { margin-top: var(--a8); }
.liste { padding-top: var(--a6); }
.liste__kopf { margin-bottom: var(--a3); }
.liste__kopf h1 { margin-bottom: var(--a2); }
.liste__seite { color: var(--grau); }
.kategorieleiste ul { list-style: none; margin: 0 0 var(--a5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--a2); }
.kategorieleiste a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--a4);
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--rund);
  color: var(--text); text-decoration: none; font-weight: 500;
}
.kategorieleiste a:hover { border-color: var(--blau); color: var(--blau); }
.kategorieleiste a[aria-current="page"] { background: var(--blau); border-color: var(--blau); color: var(--weiss); }
.seitennavi { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--a3); margin-top: var(--a7); }
.seitennavi__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--a1); }
.seitennavi__nr, .seitennavi__luecke, .seitennavi__schritt {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  padding: 0 var(--a3); border-radius: var(--rund); text-decoration: none; font-weight: 600;
}
.seitennavi__nr, .seitennavi__schritt { background: var(--weiss); box-shadow: var(--schatten); }
.seitennavi__schritt { gap: var(--a2); padding: 0 var(--a4); }
.seitennavi__nr[aria-current="page"] { background: var(--blau); color: var(--weiss); box-shadow: none; }
.seitennavi__luecke { min-width: 24px; padding: 0; color: var(--grau-hell); }
.seitennavi__schritt:hover, a.seitennavi__nr:hover { color: var(--blau-dunkel); box-shadow: 0 4px 16px rgba(0, 0, 0, .1); }

@media (min-width: 600px) {
  .karten { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .karten { grid-template-columns: repeat(3, 1fr); gap: var(--a6) var(--a5); }
  .beitrag { padding-top: var(--a7); }
}

/* ---------- Fuss ---------- */
.fuss { margin-top: var(--a8); background: var(--weiss); border-top: 1px solid var(--linie); color: var(--grau); }
.fuss__innen { max-width: var(--breite); margin: 0 auto; padding: var(--a7) var(--rand) var(--a5); }
.fuss__raster { display: grid; grid-template-columns: 1fr; gap: var(--a6); }
.fuss__titel { margin: 0 0 var(--a2); color: var(--text); font-weight: 700; font-size: 1rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li a, .fuss__knopf {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--grau); text-decoration: none;
}
.fuss li a:hover, .fuss__knopf:hover { color: var(--blau); text-decoration: underline; }
.fuss__knopf { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.fuss__sozial { display: flex; flex-wrap: wrap; gap: 0 var(--a4); margin: var(--a2) 0 0; }
.fuss__sozial a { display: inline-flex; align-items: center; min-height: 44px; color: var(--grau); }
.fuss__unten {
  margin-top: var(--a6); padding-top: var(--a5); border-top: 1px solid var(--linie);
  color: var(--grau-hell); font-size: .9375rem;
}
.fuss__unten a { color: var(--grau); }
.fuss__unten p:last-child { margin-bottom: 0; }

@media (min-width: 600px) {
  .fuss__raster { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .fuss__raster { grid-template-columns: repeat(4, 1fr) 1.25fr; gap: var(--a5); }
}

/* ---------- Feste Seiten: Abschnitte ---------- */
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[id] { scroll-margin-top: 96px; }
.abschnitt { padding: var(--a7) 0; }
.abschnitt--eng { padding: var(--a5) 0; }
.abschnitt--weiss { background: var(--weiss); }
.abschnitt__kopf { text-align: center; max-width: 820px; margin: 0 auto var(--a6); }
.abschnitt__kopf--links { text-align: left; margin-left: 0; }
.abschnitt__kopf .ueberzeile, .seitenkopf .ueberzeile { font-size: 1rem; }
.abschnitt__kopf h2 { margin: 0; }
.abschnitt__text { margin: var(--a4) 0 0; color: var(--grau); }
.knoepfe { display: flex; flex-wrap: wrap; gap: var(--a3); margin-top: var(--a6); }
.knoepfe--mitte { justify-content: center; }
.foto { display: block; width: 100%; border-radius: var(--r3); box-shadow: var(--schatten); }
.startseite .knopf, .beratung .knopf { min-height: 52px; padding: var(--a3) var(--a6); }
.knopf--rahmen { background: var(--weiss); }

/* ---------- Kopfbild ---------- */
.kopfbild { position: relative; overflow: hidden; background: #2a2b33; color: var(--weiss); text-align: center; }
.kopfbild__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kopfbild::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(25, 26, 33, .45), rgba(25, 26, 33, .6)); }
.kopfbild__innen { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; padding: var(--a8) var(--rand) 160px; }
.kopfbild__ueberzeile { margin: 0 0 var(--a3); font-size: 1rem; letter-spacing: .4em; text-transform: uppercase; font-weight: 500; }
.kopfbild__motto { margin: 0 0 var(--a5); font-size: clamp(2.125rem, 9vw, 5rem); font-weight: 700; line-height: 1.05; }
.kopfbild__motto .herz { width: .85em; height: .85em; vertical-align: -.1em; }
.kopfbild__titel { font-size: clamp(1.125rem, 2.6vw, 1.625rem); font-weight: 500; color: #ececec; margin: 0; }
.kopfbild__unterzeile { font-size: clamp(1.0625rem, 2.6vw, 1.625rem); font-weight: 500; margin: var(--a1) 0 0; }
.kopfbild .knoepfe { margin-top: var(--a6); }
.welle { position: absolute; z-index: 1; left: 0; bottom: -1px; width: 100%; height: 40px; fill: var(--grund); }
.start-video { position: relative; z-index: 2; max-width: calc(760px + 2 * var(--rand)); margin: -120px auto 0; }

/* ---------- Zwei-Klick-Einbettungen ---------- */
.einbettung { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--a3); padding: var(--a5); background: var(--gelb-hell); border-radius: var(--r2); text-align: center; }
.einbettung__hinweis { margin: 0; color: var(--grau); }
.einbettung__knopf { min-height: 44px; }
.einbettung--gross { aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border-radius: var(--r3); box-shadow: var(--schatten-gross); background: #2a2b33; }
.einbettung__vorschau { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.einbettung--gross .einbettung__knopf { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--a2); padding: var(--a3); border: 0; background: none; color: var(--weiss); font: 600 1rem var(--schrift); cursor: pointer; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.einbettung__abspielen { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 20px rgba(0, 0, 0, .3); transition: transform .15s; }
.einbettung__abspielen::after { content: ""; margin-left: 6px; border-style: solid; border-width: 14px 0 14px 24px; border-color: transparent transparent transparent var(--blau); }
.einbettung__knopf:hover .einbettung__abspielen { transform: scale(1.06); }
.einbettung--gross .einbettung__hinweis { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--a2) var(--a4); background: rgba(25, 26, 33, .65); color: var(--weiss); }
.einbettung--formular { min-height: 220px; }
.einbettung iframe { display: block; width: 100%; border: 0; }
.einbettung--formular iframe { min-height: 600px; }

/* ---------- Logos, Karten ---------- */
.logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--a3); }
.logo-kachel { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 96px; padding: var(--a3); background: var(--weiss); border-radius: var(--r2); box-shadow: var(--schatten); transition: box-shadow .15s, transform .15s; }
a.logo-kachel:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .1); transform: translateY(-2px); }
.logo-kachel img { display: block; width: 100%; max-height: 110px; object-fit: contain; }
.logos--apps { margin-top: var(--a6); }
.logos--apps .logo-kachel img { max-height: 72px; }
.info-karten, .ki-apps, .stimmen, .team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--a4); }
.info-karten { margin-top: var(--a6); }
.info-karte h3 { margin: var(--a3) 0 var(--a2); }
.info-karte p { margin: 0; color: var(--grau); }
.info-karten--mitte { margin-top: 0; }
.info-karten--mitte .info-karte { text-align: center; }
.info-karte__logo { display: flex; align-items: center; justify-content: center; height: 64px; }
.info-karte__logo img { width: auto; max-height: 52px; }

/* ---------- Bild-Text-Bloecke, Merkmale ---------- */
.bild-text { display: grid; gap: var(--a5); align-items: center; }
.bild-text + .bild-text { margin-top: var(--a7); }
.bild-text__text > h3 { font-size: clamp(1.375rem, 3vw, 1.75rem); }
.merkmale { list-style: none; margin: var(--a4) 0 0; padding: 0; display: grid; gap: var(--a4); }
.merkmal { display: flex; gap: var(--a4); align-items: flex-start; }
.merkmal p { margin: 0; color: var(--grau); }
.merkmal strong { color: var(--text); }
.merkmal__symbol { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r1); background: #eef3fc; }
.merkmal__symbol img { width: 32px; height: 32px; }

/* ---------- Versionsvergleich, Aufruf, Beratung ---------- */
.band { display: grid; gap: var(--a5); align-items: center; padding: var(--a6) var(--a5); background: var(--gelb-hell); box-shadow: none; }
.band__bild img { display: block; width: 240px; margin: 0 auto; }
.band__text h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); }
.aufruf { margin-top: var(--a7); padding: var(--a7) var(--a4); border-radius: var(--r3); background: var(--akzent); color: var(--weiss); text-align: center; }
.aufruf h2 { max-width: 32ch; margin: 0 auto var(--a4); font-size: clamp(1.375rem, 4vw, 2.25rem); }
.aufruf p { max-width: 60ch; margin: 0 auto; }
.aufruf .knopf--weiss { color: var(--akzent); }
.aufruf .knopf--weiss:hover { color: var(--blau-dunkel); }
.beratung { max-width: 820px; margin: 0 auto; padding: var(--a7) var(--a5); text-align: center; }
.beratung .knoepfe { margin-top: var(--a5); }

/* ---------- App-Store ---------- */
.ki-apps { margin-top: var(--a4); grid-template-columns: repeat(2, 1fr); }
.ki-app { display: flex; flex-direction: column; align-items: center; gap: var(--a2); padding: var(--a4); text-align: center; }
.ki-app img { width: 100%; max-width: 160px; }
.ki-app p { margin: 0; font-weight: 600; }

/* ---------- Stimmen ---------- */
.stimme { display: flex; flex-direction: column; }
.sterne { width: 108px; height: 20px; margin: 0 0 var(--a3); background: url("/assets/symbole/stern.svg") 0 0 / 22px 20px repeat-x; }
.stimme h3 { font-size: 1.1875rem; }
.stimme blockquote { margin: 0 0 var(--a4); color: var(--grau); }
.stimme__fuss { margin-top: auto; padding-top: var(--a4); border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--a2); }
.stimme__fuss p { margin: 0; }
.stimme__fuss a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* ---------- Newsletter, FAQ ---------- */
.newsletter { display: grid; gap: var(--a6); align-items: start; }
.haken { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a3); }
.haken li { display: flex; gap: var(--a3); align-items: flex-start; }
.haken img { flex: none; margin-top: 5px; }
.newsletter__formular { padding: var(--a4); }
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: var(--a3); }
.faq details { background: var(--grund); border: 1px solid var(--linie); border-radius: var(--r2); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--a4); min-height: 56px; padding: var(--a3) var(--a5); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: 1.0625rem; }
.faq summary::after { content: "+"; flex: none; color: var(--blau); font-size: 1.75rem; line-height: 1; font-weight: 500; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0; padding: 0 var(--a5) var(--a5); color: var(--grau); }

/* ---------- Seitenkopf (Unterseiten), Team, Kontakt, Rechtstexte ---------- */
.seitenkopf { padding: var(--a7) 0 var(--a5); text-align: center; }
.seitenkopf h1 { margin-bottom: var(--a3); }
.seitenkopf__text { max-width: 60ch; margin: 0 auto; color: var(--grau); font-size: 1.125rem; }
.seitenkopf--schmal { padding-bottom: var(--a4); }
.team { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.person { display: flex; flex-direction: column; padding: 0; }
.person__foto { display: block; width: 100%; aspect-ratio: 620 / 628; object-fit: cover; }
.person__foto--leer { display: grid; place-items: center; background: #eef3fc; color: var(--akzent); font-size: 3rem; font-weight: 700; }
.person__text { padding: var(--a4) var(--a5) var(--a5); }
.person__text p { margin: 0; color: var(--grau); }
p.person__name { margin-bottom: var(--a2); color: var(--text); font-weight: 700; font-size: 1.1875rem; }
.person__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.kontakt { max-width: 640px; margin: 0 auto; padding: var(--a6) var(--a5); text-align: center; }
.kontakt__logos { display: flex; flex-direction: column; align-items: center; gap: var(--a3); margin-bottom: var(--a5); }
.kontakt__zeichen { width: 96px; height: 96px; }
.kontakt__wortmarke { width: min(300px, 70vw); }
.kontaktwege { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a2); }
.kontaktwege li { display: flex; flex-direction: column; align-items: center; }
.kontaktwege__art { color: var(--grau-hell); font-size: 1rem; }
.kontaktwege a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.125rem; font-weight: 600; }
.rechtstext { max-width: 860px; margin: 0 auto; padding: var(--a5); }
.rechtstext.prosa h2 { font-size: 1.375rem; margin-top: var(--a6); }
.rechtstext.prosa h3 { font-size: 1.125rem; }
.rechtstext.prosa h4 { font-size: 1.0625rem; margin: var(--a5) 0 var(--a2); }
.rechtstext > :first-child { margin-top: 0; }

@media (max-width: 639px) {
  h1, h2 { hyphens: auto; }
  .einbettung--gross .einbettung__knopftext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (min-width: 640px) {
  .logos { grid-template-columns: repeat(3, 1fr); gap: var(--a4); }
  .ki-apps { grid-template-columns: repeat(3, 1fr); }
  .stimmen { grid-template-columns: repeat(2, 1fr); }
  .info-karten { grid-template-columns: repeat(3, 1fr); }
  .band { grid-template-columns: 240px 1fr; padding: var(--a6); }
  .rechtstext { padding: var(--a6) var(--a7); }
}
@media (min-width: 900px) {
  .abschnitt { padding: var(--a8) 0; }
  .abschnitt--eng { padding: var(--a6) 0; }
  .kopfbild__innen { padding: 120px var(--rand) 260px; }
  .welle { height: 70px; }
  .start-video { margin-top: -220px; }
  .logos { grid-template-columns: repeat(6, 1fr); gap: var(--a5); }
  .logos--partner { grid-template-columns: repeat(5, 1fr); }
  .logos--apps { grid-template-columns: repeat(5, 1fr); }
  .ki-apps { grid-template-columns: repeat(5, 1fr); gap: var(--a5); }
  .bild-text { grid-template-columns: 1fr 1.25fr; gap: var(--a7); }
  .bild-text--umgekehrt { grid-template-columns: 1.25fr 1fr; }
  .bild-text--umgekehrt .bild-text__bild { order: -1; }
  .bild-text + .bild-text { margin-top: var(--a8); }
  .band { grid-template-columns: 300px 1fr; gap: var(--a7); padding: var(--a7); }
  .band__bild img { width: 300px; }
  .newsletter { grid-template-columns: 1fr 1fr; gap: var(--a7); }
  .team { grid-template-columns: repeat(4, 1fr); gap: var(--a5); }
  .seitenkopf { padding: var(--a8) 0 var(--a6); }
}

/* ---------- Einwilligung, geladene Einbettungen ---------- */
.einwilligung { position: fixed; z-index: 60; left: var(--a3); right: var(--a3); bottom: var(--a3); max-width: 600px; max-height: calc(100vh - 24px); overflow: auto; margin: 0 auto; padding: var(--a4) var(--a5); background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r3); box-shadow: var(--schatten-gross); font-size: .9375rem; }
.einwilligung[hidden] { display: none; }
.einwilligung p { margin: 0 0 var(--a3); }
.einwilligung__titel { font-size: 1.125rem; font-weight: 700; }
.einwilligung__knoepfe, .einwilligung__auswahl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a3); }
.einwilligung__knoepfe .knopf { flex: 1 1 150px; }
.einwilligung__auswahl { margin-top: var(--a3); padding-top: var(--a3); border-top: 1px solid var(--linie); }
.einwilligung__wahl { display: inline-flex; align-items: center; gap: var(--a2); min-height: 44px; margin-right: auto; }
.einwilligung__wahl input { width: 22px; height: 22px; }
.einbettung--aktiv { display: block; padding: 0; background: none; overflow: hidden; }
.einbettung--video.einbettung--aktiv { aspect-ratio: 16 / 9; }
.einbettung--video iframe { height: 100%; }

#inhalt:focus { outline: 0; }