/*
  Gemeinsames Aussehen aller Re:Fuel-Seiten nach dem Brand Kit (marke/MARKE.md). Mobil zuerst.
  Schriften liegen selbst in schriften/ (keine externen Schriften, Datenschutz). Unsere Schrift ist Albertus Nova;
  sie kostet für Webseiten Lizenzgeld, deshalb gibt es genau eine Ersatzschrift: Marcellus (Steve, 21.10.2026: „nur
  eine Backup-Schriftart“), Notlösung Georgia. „ReFuel Titel“ (Überschriften, Knöpfe) ist dieselbe Marcellus-Datei.
  Marcellus hat keinen fetten Schnitt; Überschriften müssen aber fett sein (Steve, 21.10.2026), deshalb ist die Datei
  als normales Gewicht angemeldet und der Browser rechnet sie bei font-weight 700 fett.
  Eigene Familiennamen, weil „Marcellus“ ein reservierter Schriftname (OFL) und die Datei eine Teilmenge ist.
*/
@font-face {
  font-family: "ReFuel Titel";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(schriften/marcellus-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "ReFuel Titel";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(schriften/marcellus-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "ReFuel Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(schriften/marcellus-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "ReFuel Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(schriften/marcellus-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Die fünf Markenfarben */
  --lime: #c7f77c;    /* Fresh Lime – Hintergrund */
  --wald: #073921;    /* Deep Forest – Text und alle Rahmen */
  --blau: #4cc7dd;    /* Cool Charge – nur Fläche (Info) */
  --gelb: #f2d828;    /* Spark Yellow – nur Fläche (Hauptknopf, Hinweise) */
  --papier: #f8f6f1;  /* Soft Paper – Karten */
  /* Hilfstöne, aus den Markenfarben abgeleitet */
  --leise: #2e5a3e;   /* Nebentext: 6,4 : 1 auf Lime, 7,3 : 1 auf Papier */
  --feld: #ffffff;    /* Eingabefelder (Weiß wie die Wortmarke) */
  --gelb-hell: #f7e45e;
  --gelb-tief: #e3c816;
  --lime-hell: #d6fa9c;
  --titel: "ReFuel Titel", Georgia, serif;
  --text: "ReFuel Text", Georgia, serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--lime);
  color: var(--wald);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.5;
}
/* Energie-Band oben: Blau → Grün → Gelb, darunter die dunkelgrüne Linie (höchstens ein Band pro Seite) */
body::before {
  content: "";
  flex: none;
  height: 8px;
  background: linear-gradient(90deg, var(--blau), var(--lime) 50%, var(--gelb));
  border-bottom: 3px solid var(--wald);
}
h1, h2, h3, legend { font-family: var(--titel); font-weight: 700; line-height: 1.15; }
a { color: var(--wald); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--wald); outline-offset: 2px; }

/* Logo: immer die Originaldatei. Schutzraum ringsum mindestens die Höhe des „R“ (≈ 23 % der Logobreite). */
.logo {
  --logo-b: 150px;
  width: var(--logo-b);
  margin: 0 0 calc(var(--logo-b) * .23);
  line-height: 0;
}
.logo img { display: block; width: 100%; height: auto; }
.logo a { display: block; border-radius: 12px; }

/* ---------- Anmeldeseite ---------- */
.start {
  flex: 1;
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  padding: 24px 16px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.start .logo {
  --logo-b: clamp(200px, 62vw, 280px);
  margin-left: auto;
  margin-right: auto;
}
.unterzeile {
  margin: 0 0 28px;
  font-size: 1.1875rem;
  text-align: center;
}
.karte {
  background: var(--papier);
  border: 3px solid var(--wald);
  border-radius: 16px;
  padding: 20px;
}
.feld-titel {
  display: block;
  margin-bottom: 8px;
  font-family: var(--titel);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}
input[type="email"],
input[type="password"] {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 2px solid var(--wald);
  border-radius: 12px;
  background: var(--feld);
  color: var(--wald);
  font: inherit;
  font-size: 1.0625rem; /* ab 16px zoomt iOS nicht ins Feld */
}
input[type="email"]::placeholder { color: #5b7a65; }
input[type="email"]:focus,
input[type="password"]:focus { outline: 3px solid var(--blau); outline-offset: 1px; }
input[aria-invalid="true"] { background: #fff9d6; }

/* Sprachumschalter oben rechts */
.sprachen {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 12px 16px 0;
}
.sprachen button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 44px;
  min-height: 36px;
  padding: 4px 12px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--wald);
  font-family: var(--titel);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
}
.sprachen button:hover { border-color: var(--wald); }
.sprachen button[aria-pressed="true"] { border-color: var(--wald); background: var(--papier); }

/* Kleine Flaggen neben den Sprachen (als Bild, weil Windows Flaggen-Emojis nur als Buchstaben zeigt) */
.flagge {
  flex: none;
  width: 21px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
  outline: 1px solid rgba(7, 57, 33, .35);
}

/* Auswahl der Newsletter-Sprache */
.newsletter-sprache {
  margin: 20px 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.newsletter-sprache legend { padding: 0; }
.wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wahl label { position: relative; display: block; cursor: pointer; }
/* Der runde Auswahlknopf ist unsichtbar, die ganze Karte ist die Auswahl */
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.wahl-feld {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 7px;
  min-height: 44px;
  padding: 8px 4px;
  font-size: .9375rem;
  border: 2px solid var(--wald);
  border-radius: 12px;
  background: var(--feld);
  color: var(--wald);
}
.wahl label:hover .wahl-feld { background: var(--lime-hell); }
.wahl input:checked + .wahl-feld {
  background: var(--lime);
  box-shadow: inset 0 0 0 1px var(--wald); /* dickerer Rahmen ohne Verrutschen */
  font-family: var(--titel);
  font-weight: 700;
}
.wahl input:focus-visible + .wahl-feld { outline: 3px solid var(--wald); outline-offset: 2px; }

.einwilligung {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 20px 0 0;
  font-size: .9375rem;
  cursor: pointer;
}
.einwilligung input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--wald);
  cursor: pointer;
}

/* Knöpfe wie im Brand Kit: Pille mit dunkelgrünem Rahmen. Hauptknopf Gelb, Nebenknopf Lime. */
.knopf {
  display: block;
  width: 100%;
  min-height: 52px;
  margin-top: 20px;
  padding: 10px 20px;
  border: 3px solid var(--wald);
  border-radius: 999px;
  background: var(--gelb);
  color: var(--wald);
  font-family: var(--titel);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
}
.knopf:hover { background: var(--gelb-hell); }
.knopf:active { background: var(--gelb-tief); }
.knopf[disabled] { opacity: .6; cursor: progress; }
/* Ausgegraut, solange die Einwilligung fehlt (Anmeldeformular) */
.knopf.ausgegraut, .knopf.ausgegraut:hover, .knopf.ausgegraut:active {
  background: var(--gelb);
  opacity: .45;
  filter: grayscale(.7);
  cursor: not-allowed;
}

.meldung { margin: 12px 0 0; font-size: .9375rem; }
.meldung:empty { display: none; }
/* Fehler: gelbe Fläche mit Rahmen, Schrift bleibt dunkelgrün (Gelb nie als Schrift) */
.meldung.fehler {
  padding: 10px 14px;
  border: 2px solid var(--wald);
  border-radius: 12px;
  background: var(--gelb);
}

.versteckt {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.erfolg { text-align: center; }
.erfolg .haken {
  width: 56px;
  height: 56px;
  margin: 4px auto 14px;
  border: 3px solid var(--wald);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--lime);
  color: var(--wald);
  font-size: 1.625rem;
  font-weight: 900;
}
.erfolg h1, .erfolg h2 { margin: 0 0 10px; font-size: 1.5rem; }
.erfolg p { margin: 8px 0 0; color: var(--leise); }
.erfolg strong { color: var(--wald); word-break: break-all; }

/* ---------- Landingpage (index.html) ---------- */
html { scroll-behavior: smooth; }
/* Oben rechts: Teilen und Sprachwahl */
.kopf-leiste {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 0;
}
.kopf-leiste .sprachen { padding: 0; }
.teilen-knopf {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 4px 14px;
  border: 2px solid var(--wald);
  border-radius: 999px;
  background: var(--papier);
  color: var(--wald);
  font-family: var(--titel);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
}
.teilen-knopf:hover { background: var(--lime-hell); }
.teilen-knopf svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--wald); stroke-width: 2.2; stroke-linecap: round; }
/* Auf schmalen Handys nur das Zeichen, damit Teilen und Sprachen in eine Zeile passen */
@media (max-width: 419px) {
  .teilen-knopf { padding: 4px 10px; }
  .teilen-knopf span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Fenster „Teilen“ mit QR-Code */
.teilen-fenster {
  width: min(calc(100vw - 32px), 380px);
  padding: 28px 24px 24px;
  border: 3px solid var(--wald);
  border-radius: 16px;
  background: var(--papier);
  color: var(--wald);
  text-align: center;
}
.teilen-fenster[open] { animation: fenster-auf .25s cubic-bezier(.2, .8, .2, 1); }
@keyframes fenster-auf { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.teilen-fenster::backdrop { background: rgba(7, 57, 33, .55); }
.teilen-fenster h2 { margin: 0 0 18px; padding: 0 36px; font-size: 1.5rem; }
.teilen-fenster p { margin: 0 0 16px; }
.qr {
  display: block;
  width: 232px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 12px;
  border: 3px solid var(--wald);
  border-radius: 12px;
  background: #fff;
}
.teilen-link { font-family: var(--titel); font-weight: 700; overflow-wrap: anywhere; }
.teilen-fenster .knopf { margin-top: 10px; }
.knopf.knopf-zweit { background: var(--lime); }
.knopf.knopf-zweit:hover { background: var(--lime-hell); }
.fenster-zu {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid var(--wald);
  border-radius: 50%;
  background: var(--feld);
  color: var(--wald);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.fenster-zu:hover { background: var(--lime-hell); }
/* Sprungziele (Abschnitte) bekommen beim Springen den Fokus, aber keinen Rahmen */
.abschnitt[tabindex="-1"]:focus { outline: none; }
.held-titel span { display: block; }
.held { width: 100%; }
.held-inhalt {
  max-width: 46rem;
  margin: 0 auto;
  padding: 8px 16px 48px;
  text-align: center;
}
.held .logo {
  --logo-b: clamp(180px, 52vw, 260px);
  margin: 8px auto calc(var(--logo-b) * .23);
}
.marke-zeile {
  display: inline-block;
  margin: 0;
  padding: 4px 14px;
  border: 2px solid var(--wald);
  border-radius: 999px;
  background: var(--papier);
  font-family: var(--titel);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .04em;
}
.held-titel {
  margin: 20px 0 16px;
  font-size: clamp(2.125rem, 8.5vw, 4rem);
  line-height: 1.04;
  text-wrap: balance;
}
.held-text {
  max-width: 36rem;
  margin: 0 auto 28px;
  font-size: 1.25rem;
}
.knopf.knopf-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 260px;
  margin: 0;
  padding: 12px 32px;
  font-size: 1.125rem;
  text-decoration: none;
}
.cta-hinweis { margin: 12px 0 0; color: var(--leise); font-size: .9375rem; }
.mehr { margin: 20px 0 0; font-size: .9375rem; }
/* Bild der FH JOANNEUM: nur am Computer (bis das Foto da ist, eine Zeichnung auf blauer Fläche) */
.held-bild { display: none; }

.seite { flex: 1; width: 100%; }
.abschnitt {
  padding: 48px 16px;
  scroll-margin-top: 16px;
}
.abschnitt + .abschnitt { border-top: 3px solid var(--wald); }
/* Kleine Überzeile wie im Brand Kit: Pille + Text in Kapitälchen */
.abschnitt-marke {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-family: var(--titel);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.abschnitt-marke::before {
  content: "";
  flex: none;
  width: 30px;
  height: 8px;
  border: 2px solid var(--wald);
  border-radius: 999px;
  background: var(--papier);
}
.abschnitt h2 {
  margin: 0 0 14px;
  font-size: clamp(1.875rem, 6vw, 2.75rem);
  line-height: 1.08;
  text-wrap: balance;
}
.einleitung { max-width: 42rem; margin: 0 0 24px; font-size: 1.1875rem; }


/* Das Team: großes Gruppenbild (bis das Foto da ist, eine Zeichnung) und die Vornamen als Pillen */
.team-bild {
  display: grid;
  place-items: center;
  margin: 8px 0 20px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 3px solid var(--wald);
  border-radius: 16px;
  background: var(--blau);
}
.team-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.team-zeichnung {
  width: min(78%, 640px);
  height: auto;
  fill: none;
  stroke: var(--wald);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.team-namen { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.team-namen:empty { display: none; }
.team-namen li {
  padding: 6px 18px;
  border: 2px solid var(--wald);
  border-radius: 999px;
  background: var(--papier);
  font-family: var(--titel);
  font-weight: 700;
  font-size: 1.125rem;
}

/* Energie-Meter aus dem Brand Kit: 0 % → 100 %, Verlauf nur Blau → Grün → Gelb */
/* Der Verlauf liegt auf der ganzen Leiste, eine Papier-Fläche deckt den leeren Teil ab und zieht sich beim Laden zurück */
.meter {
  position: relative;
  height: 26px;
  border: 3px solid var(--wald);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blau), var(--lime) 50%, var(--gelb));
  overflow: hidden;
}
.meter::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: var(--papier);
  border-left: 3px solid var(--wald);
  transition: width 2s cubic-bezier(.2, .8, .2, 1) .2s;
}
.meter.geladen::after { width: calc(100% - var(--ziel)); }
/* Lädt sichtbar weiter: ein heller Schimmer läuft immer wieder durch den gefüllten Teil */
.meter::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--ziel);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent) no-repeat;
  background-size: 45% 100%;
  animation: aufladen 2.4s ease-in-out infinite;
}
@keyframes aufladen {
  from { background-position: -82% 0; }
  to { background-position: 182% 0; }
}

/* „Unsere Strategie:“ leitet zur Roadmap über */
.strategie-titel { margin: 36px 0 16px; font-size: 1.375rem; }
.fortschritt { max-width: 42rem; margin: 0 0 28px; }
.meter-beschriftung { position: relative; display: flex; justify-content: space-between; margin-top: 8px; font-size: .875rem; color: var(--leise); }
.meter-hier {
  position: absolute;
  left: var(--ziel);
  transform: translateX(-50%);
  color: var(--wald);
  font-family: var(--titel);
  font-weight: 700;
  white-space: nowrap;
}
.schritte { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.schritte li {
  position: relative;
  padding: 16px 16px 16px 72px;
  border: 3px solid var(--wald);
  border-radius: 16px;
  background: var(--papier);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s cubic-bezier(.2, .8, .2, 1);
}
/* Beim Darüberfahren hebt sich die Karte kurz ab (flache dunkelgrüne Kante wie bei den Bildern oben) */
.schritte li:hover { transform: translateY(-6px); box-shadow: 5px 8px 0 var(--wald); }
.schritte h3 { margin: 0 0 4px; font-size: 1.125rem; }
.schritte p { margin: 0; }
.schritt-nr {
  position: absolute;
  left: 16px;
  top: 16px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 3px solid var(--wald);
  border-radius: 50%;
  background: var(--feld);
  font-family: var(--titel);
  font-weight: 700;
}
.schritte .erledigt .schritt-nr { background: var(--lime); }
.schritte .aktuell { background: var(--feld); }
.schritte .aktuell .schritt-nr { background: var(--gelb); }

/* Aufruf unten: Frage, Text und Formular in einer gemeinsamen Mitte */
.cta-unten { text-align: center; }
.cta-text, .cta-unten .karte { max-width: 34rem; margin: 0 auto; }
.cta-unten .abschnitt-marke { justify-content: center; }
.cta-unten .unterzeile { margin: 0 0 24px; }
.cta-unten .karte { text-align: left; }

@media (min-width: 640px) {
  .abschnitt { padding: 64px 24px; }
}
@media (min-width: 900px) {
  /* Ganze Bildschirmbreite; der Rand wächst mit */
  .abschnitt { padding: 80px clamp(32px, 5vw, 96px); }
  .team-bild { aspect-ratio: 21 / 9; }
  .fortschritt { max-width: none; }
  .schritte { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .schritte li { padding: 72px 16px 20px; }

  /* Kopf füllt den ersten Bildschirm: links Logo und worum es geht, rechts die Bilder */
  .kopf-leiste {
    position: absolute;
    top: 23px; /* unter dem Energie-Band */
    right: 16px;
    padding: 0;
  }
  .kopf-leiste .sprachen {
    padding: 4px;
    border: 2px solid var(--wald);
    border-radius: 999px;
    background: var(--papier);
  }
  .teilen-knopf { min-height: 48px; padding: 4px 18px; }
  .held {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: calc(100vh - 11px); /* 11 px = Energie-Band oben */
    min-height: calc(100svh - 11px);
    border-bottom: 3px solid var(--wald);
  }
  .held-inhalt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    max-width: none;
    margin: 0;
    padding: 32px clamp(32px, 5vw, 96px);
    text-align: left;
  }
  .held .logo {
    --logo-b: clamp(200px, min(20vw, 30vh), 340px);
    margin: 0 0 calc(var(--logo-b) * .23);
  }
  .held-titel { margin: 18px 0 14px; font-size: clamp(2.5rem, min(3.9vw, 6.6vh), 4.75rem); }
  .held-text { margin: 0 0 26px; }
  .mehr { margin-top: 16px; }
  /* Rechts: zwei Bilder, leicht in den Raum gekippt, mit flacher dunkelgrüner Kante (kein weicher Schatten) */
  .held-bild {
    display: grid;
    place-items: center;
    padding: 84px clamp(24px, 4vw, 72px) 48px;
  }
  .collage { position: relative; width: min(100%, 76vh); aspect-ratio: 1; }
  .bild-karte {
    position: absolute;
    margin: 0;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    border: 3px solid var(--wald);
    border-radius: 16px;
    background: var(--papier);
    box-shadow: 14px 14px 0 var(--wald);
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  }
  .bild-karte img, .bild-karte svg { display: block; width: 100%; height: 100%; object-fit: cover; }
  .bild-heute {
    left: 0;
    top: 3%;
    width: 60%;
    background: var(--blau);
    transform: perspective(1200px) rotateY(16deg) rotateX(6deg) rotate(-3deg);
  }
  .bild-zukunft {
    right: 2%;
    bottom: 5%;
    width: 66%;
    z-index: 1;
    transform: perspective(1200px) rotateY(-14deg) rotateX(5deg) rotate(2deg);
  }
  .bild-karte:hover { transform: perspective(1200px) rotateY(0) rotateX(0) rotate(0); }
  .bild-zeichnung {
    fill: none;
    stroke: var(--wald);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* Pfeil vom linken auf das rechte Bild */
  .collage-pfeil {
    position: absolute;
    left: 58%;
    top: 5%;
    width: 34%;
    height: 37%;
    z-index: 2;
    overflow: visible;
    fill: none;
    stroke: var(--wald);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .wip {
    position: absolute;
    left: 16px;
    top: 16px;
    padding: 5px 16px;
    border: 3px solid var(--wald);
    border-radius: 999px;
    background: var(--gelb);
    font-family: var(--titel);
    font-weight: 700;
    font-size: .9375rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    transform: rotate(-3deg);
  }

  /* Newsletter: links die Frage, rechts das Formular */
  .cta-unten {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
    gap: clamp(48px, 6vw, 120px);
    align-items: center;
    text-align: left;
  }
  .cta-text, .cta-unten .karte { max-width: none; margin: 0; }
  .cta-unten .abschnitt-marke { justify-content: flex-start; }
  .cta-text h2 { font-size: clamp(2.25rem, 4vw, 3.5rem); }
  .cta-text .unterzeile { max-width: 34rem; text-align: left; }
}

/* ---------- Fußzeile ---------- */
.fuss {
  padding: 24px 16px 32px;
  text-align: center;
  font-size: .9375rem;
}
.fuss a { margin: 0 10px; }
/* Gründer-Login: bewusst klein und unauffällig */
.gruender-zeile { margin: 14px 0 0; font-size: .75rem; }
.fuss .gruender-zeile a { color: var(--leise); text-decoration: none; }
.fuss .gruender-zeile a:hover { text-decoration: underline; }

/* ---------- Gründer-Bereich ---------- */
.gruender .karte h2 { margin-top: 0; margin-bottom: 14px; }
.konto { margin-top: 24px; }
.konto .feld-titel { margin-top: 16px; }
.konto .feld-titel:first-of-type { margin-top: 0; }
.konto .hinweis, .liste .hinweis { color: var(--leise); font-size: .9375rem; margin: 0 0 16px; }
.konto-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 16px 0 0; }
.link-knopf {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--wald);
  font: inherit;
  font-size: .9375rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-knopf:hover { text-decoration-thickness: 2px; }
.meldung-box {
  margin: 20px 0 0;
  padding: 12px 14px;
  border: 2px solid var(--wald);
  border-radius: 12px;
  background: var(--papier);
  color: var(--wald);
  font-size: .9375rem;
}
.meldung-box.fehler { background: var(--gelb); }
.meldung-box.gut { background: var(--lime-hell); }
.kopfzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 24px; }
.kopfzeile p { margin: 0; }
.stand-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 12px; }
.gruender .stand { margin: 0; }
.knopf-klein {
  display: inline-block;
  width: auto;
  min-height: 40px;
  margin: 0;
  padding: 6px 18px;
  border-width: 2px;
  background: var(--lime);
  font-size: .9375rem;
}
.knopf-klein:hover { background: var(--lime-hell); }
.knopf-klein:active { background: var(--lime); }
.liste { margin-top: 16px; }
.liste h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.125rem; }
.liste h2 .flagge { width: 27px; height: 18px; }
/* Anzahl als Info-Marke: blaue Fläche, dunkelgrüner Rahmen */
.anzahl {
  margin-left: auto;
  min-width: 36px;
  padding: 1px 10px;
  border: 2px solid var(--wald);
  border-radius: 999px;
  background: var(--blau);
  color: var(--wald);
  font-size: .9375rem;
  text-align: center;
}
.tabelle-rahmen { overflow-x: auto; margin: 0 0 8px; }
.liste table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.liste th, .liste td { padding: 8px 6px; text-align: left; border-bottom: 1px solid rgba(7, 57, 33, .25); }
.liste th { font-family: var(--titel); font-weight: 700; font-size: .8125rem; }
.liste td:first-child { word-break: break-all; }
.liste td:last-child, .liste th:last-child { white-space: nowrap; text-align: right; }
.liste td:nth-child(2), .liste th:nth-child(2) { white-space: nowrap; }
.liste td.aktion { width: 1%; }
.liste td.aktion .bestaetigen { justify-content: flex-end; }

/* Reiter (Newsletter-Listen | Interviews) */
.reiter { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 4px; }
.reiter [role="tab"] {
  min-height: 44px;
  padding: 6px 20px;
  border: 3px solid var(--wald);
  border-radius: 999px;
  background: var(--papier);
  color: var(--wald);
  font-family: var(--titel);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}
.reiter [role="tab"]:hover { background: var(--lime-hell); }
.reiter [role="tab"][aria-selected="true"] { background: var(--gelb); }

/* ---------- Interviews (werkzeuge/interviews.js) ---------- */
.gruender input[type="text"], .gruender input[type="date"], .gruender select, .gruender textarea {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 2px solid var(--wald);
  border-radius: 12px;
  background: var(--feld);
  color: var(--wald);
  font: inherit;
  font-size: 1rem;
}
.gruender textarea { resize: vertical; line-height: 1.5; }
.gruender input:focus, .gruender select:focus, .gruender textarea:focus { outline: 3px solid var(--blau); outline-offset: 1px; }
.gruender select:disabled, .gruender input:disabled { opacity: .6; }
.knopf-klein.knopf-haupt { background: var(--gelb); }
.knopf-klein.knopf-haupt:hover { background: var(--gelb-hell); }
.knopf-klein.knopf-warnung { background: var(--gelb); }
.knopf-klein[disabled] { opacity: .55; cursor: default; }
.iv-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 20px 0 12px; }
.gruender .iv-kopf h2 { margin: 0; font-size: 1.625rem; }
.iv-titel { overflow-wrap: anywhere; }
.iv-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.iv-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.karte.iv-leiste { margin-bottom: 16px; }
.iv-feld-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .9375rem; }
.gruender .iv-feld-inline select { display: inline-block; width: auto; min-height: 40px; padding: 6px 10px; }
.iv-fortschritt { color: var(--leise); font-size: .9375rem; }
.iv-leer p { margin: 0; }
.gruender .iv-liste { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.iv-eintrag { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.gruender .iv-eintrag h3 { margin: 0 0 4px; font-size: 1.25rem; }
.iv-eintrag h3 a { text-decoration: none; }
.iv-eintrag h3 a:hover { text-decoration: underline; }
.iv-eintrag .hinweis { margin: 0; color: var(--leise); font-size: .9375rem; }
.iv-neu { margin-bottom: 16px; }
.gruender .iv-neu h3, .gruender .iv-block h3 { margin: 0 0 14px; font-size: 1.25rem; }
.iv-raster { display: grid; gap: 14px; margin-bottom: 16px; }
.iv-raster .feld-titel { margin-top: 0; }
.iv-zurueck { margin: 16px 0 0; }
.iv-status { margin: 0; color: var(--leise); font-size: .9375rem; }
.iv-block { margin-bottom: 16px; }
.iv-block > .hinweis { color: var(--leise); font-size: .9375rem; margin: 0 0 14px; }
.iv-fragen { display: grid; gap: 14px; margin: 0 0 14px; padding: 0; list-style: none; }
.iv-frage { padding: 14px; border: 2px solid var(--wald); border-radius: 12px; background: var(--lime-hell); }
.iv-frage-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-bottom: 6px; }
.iv-frage-kopf .feld-titel { margin: 0; }
.iv-frage-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.iv-frage-knoepfe .link-knopf { min-width: 28px; }
.iv-frage-knoepfe .link-knopf[disabled] { opacity: .35; cursor: default; }
.iv-antwort-titel { margin-top: 12px; }
.bestaetigen { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .9375rem; }
.bestaetigen .knopf-klein { min-height: 34px; padding: 4px 14px; }
.iv-zweispaltig { display: grid; gap: 14px; }
.iv-zweispaltig .feld-titel { margin: 0 0 6px; }
.iv-transkript { padding-top: 16px; margin-top: 16px; border-top: 2px solid var(--wald); }
.iv-transkript-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.iv-transkript-kopf h4 { margin: 0; font-family: var(--titel); font-size: 1.0625rem; }
.iv-transkript-kopf .hinweis { color: var(--leise); font-size: .875rem; }
.iv-leiste-klein { margin-top: 10px; }
.iv-mitschrift .einwilligung { margin: 4px 0 16px; }
.iv-pegel { height: 14px; margin-top: 8px; border-width: 2px; }
.iv-pegel.live::after { transition: width .08s linear; }
.iv-aufnahme-knopf.laeuft { background: var(--blau); }
.iv-aufnahme-status { margin: 0; color: var(--leise); font-size: .9375rem; }
.iv-live { margin-top: 16px; }
.iv-live-text {
  min-height: 140px;
  max-height: 320px;
  overflow-y: auto;
  padding: 12px;
  border: 2px solid var(--wald);
  border-radius: 12px;
  background: var(--feld);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#iv-live-uebersetzung { background: var(--lime-hell); }
.iv-zwischen { color: var(--leise); font-style: italic; }
.iv-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 0; }
/* Unterfragen (im Interview und im Fragenkatalog) */
.gruender .iv-unterfragen { display: grid; gap: 10px; margin: 12px 0 0; padding: 0 0 0 14px; list-style: none; border-left: 3px solid var(--wald); }
.iv-unterfrage { padding: 10px 12px; border: 2px solid var(--wald); border-radius: 10px; background: var(--papier); }
.iv-unterfrage-neu { margin-top: 10px; }
.iv-erklaerung { margin: 0 0 16px; color: var(--leise); font-size: .9375rem; }
.gruender .iv-erstes-feld { margin-top: 0; }
/* Aufklappbare Karten (Interviews, Transkripte): Kopfzeile mit Pfeil, darunter der Inhalt zum Lesen */
.karte.iv-klapp { display: block; padding: 0; }
.iv-klapp-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 18px; }
.iv-klapp-kopf {
  flex: 1 1 18rem;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.iv-klapp-kopf:focus-visible { outline: 3px solid var(--blau); outline-offset: 4px; border-radius: 8px; }
.iv-klapp-pfeil {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border: 2px solid var(--wald);
  border-radius: 999px;
  background: var(--lime-hell);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), background-color .2s ease;
}
.iv-klapp-pfeil::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2.5px solid var(--wald);
  border-bottom: 2.5px solid var(--wald);
  transform: translate(-65%, -50%) rotate(-45deg);
}
.iv-klapp-kopf:hover .iv-klapp-pfeil { background: var(--gelb); }
.iv-klapp.offen .iv-klapp-pfeil { transform: rotate(90deg); background: var(--gelb); }
.iv-klapp-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.iv-klapp-titel { font-family: var(--titel); font-size: 1.25rem; font-weight: 700; overflow-wrap: anywhere; }
.iv-klapp-text .hinweis { margin: 0; color: var(--leise); font-size: .9375rem; }
.iv-klapp-inhalt { margin: 0 18px; padding: 16px 0 18px; border-top: 2px solid var(--wald); }
.iv-klapp-inhalt h4 { margin: 18px 0 8px; font-family: var(--titel); font-size: 1.0625rem; }
.iv-klapp-inhalt h4:first-child { margin-top: 0; }
.iv-lesen-fragen, .iv-lesen-unter { display: grid; gap: 10px; margin: 0; padding-left: 1.5em; }
.iv-lesen-unter { margin-top: 8px; }
.iv-lesen-frage { margin: 0; font-weight: 700; }
.iv-lesen-antwort { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.iv-lesen-antwort.leer { color: var(--leise); font-style: italic; }
.iv-lesen-transkript { padding: 12px 0 4px; border-top: 1px solid rgba(7, 57, 33, .25); }
.iv-lesen-transkript:first-of-type { border-top: 0; padding-top: 0; }
.iv-lesen-kopf { margin: 0 0 8px; font-size: .9375rem; }
/* Angaben zu einem Transkript, je eine Zeile (Uhrzeit, Sprache, Datei) */
.iv-angaben { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 14px; margin: 0 0 12px; font-size: .9375rem; }
.iv-angaben dt { color: var(--leise); }
.iv-angaben dd { margin: 0; overflow-wrap: anywhere; }
.iv-lesen-text {
  max-height: 280px;
  overflow-y: auto;
  margin: 0 0 4px;
  padding: 10px 12px;
  border: 2px solid var(--wald);
  border-radius: 12px;
  background: var(--feld);
  font-size: .9375rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.iv-transkript.ohne-kopf { margin-top: 0; padding-top: 0; border-top: 0; }
.iv-zweispaltig .link-knopf { margin-top: 6px; }
/* Ein Interview am breiten Bildschirm: links die Fragen, rechts die Live-Aufnahme, die beim Scrollen stehen bleibt */
.iv-arbeit { display: grid; gap: 0 16px; }
@media (min-width: 1100px) {
  .iv-arbeit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .iv-arbeit-rechts { position: sticky; top: 16px; }
}
/* Ganze Breite wie die Startseite, der Rand wächst mit */
.text.gruender { max-width: none; }
@media (min-width: 900px) { .text.gruender { padding: 40px clamp(32px, 5vw, 96px) 24px; } }
/* Aufnahme hochladen */
.gruender input[type="file"] { display: block; width: 100%; padding: 8px 0; font: inherit; font-size: .9375rem; color: var(--wald); }
.gruender input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 16px;
  border: 2px solid var(--wald);
  border-radius: 999px;
  background: var(--lime-hell);
  color: var(--wald);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s ease, transform .15s ease;
}
.gruender input[type="file"]::file-selector-button:hover { background: var(--lime); transform: translateY(-1px); }
.iv-datei .einwilligung, .iv-neu .einwilligung { margin: 4px 0 16px; }
.iv-neu > .hinweis { margin: 0 0 14px; color: var(--leise); font-size: .9375rem; }
.iv-balken { margin-top: 12px; }
.iv-balken::after { transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.iv-datei-ergebnis { margin-top: 16px; }
.iv-datei-ergebnis .feld-titel { margin: 0 0 6px; }
.iv-datei-ergebnis textarea { margin-bottom: 10px; }

/* ---------- Bewegung im Gründer-Bereich ----------
   Steve wünscht die Animationen ausdrücklich: nicht an prefers-reduced-motion koppeln (sein Handy meldet „reduce“,
   ohne dass er weniger Bewegung will). Flach wie das Brand Kit: Einblenden, Rutschen, Farbe – keine Schatten.
   Ansichten der Interviews (.rf-ansicht, werkzeuge/interviews.js): Blöcke tauchen nacheinander auf (--i = Reihenfolge). */
@keyframes rf-auftauchen { from { opacity: 0; transform: translateY(14px); } }
@keyframes rf-einblenden { from { opacity: 0; } }
@keyframes rf-rein { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes rf-weg { to { opacity: 0; transform: translateX(18px) scale(.98); } }
@keyframes rf-markiert { from { background-color: var(--gelb); } }
@keyframes rf-blink { from { opacity: .15; } }
@keyframes rf-pop { 40% { transform: scale(1.1); } }
@keyframes rf-puls { from { outline: 3px solid var(--wald); outline-offset: 0; } to { outline: 3px solid transparent; outline-offset: 10px; } }
@keyframes rf-atmen { from { opacity: .35; } }

.gruender > .logo, .gruender > h1, .gruender > .konto:not([hidden]), .gruender > #ansicht-listen:not([hidden]) {
  animation: rf-auftauchen .55s cubic-bezier(.2, .8, .2, 1) both;
}
.gruender > h1 { animation-delay: .07s; }
.gruender > .konto, .gruender > #ansicht-listen { animation-delay: .14s; }
.gruender [role="tabpanel"]:not([hidden]) { animation: rf-einblenden .3s ease both; }
#listen > .karte { animation: rf-auftauchen .45s cubic-bezier(.2, .8, .2, 1) both; }
#listen > .karte:nth-child(2) { animation-delay: .08s; }
#listen > .karte:nth-child(3) { animation-delay: .16s; }
.gruender .liste .anzahl { animation: rf-pop .5s .4s ease both; }

.rf-ansicht > *, .rf-ansicht .iv-liste > li {
  animation: rf-auftauchen .45s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
.rf-ansicht > .iv-liste { animation: none; }
.rf-ansicht.rf-sanft > *, .rf-ansicht.rf-sanft .iv-liste > li { animation: rf-einblenden .25s ease both; }

.rf-rein { animation: rf-rein .35s cubic-bezier(.2, .8, .2, 1) both !important; }
.rf-weg { animation: rf-weg .3s ease-in forwards !important; pointer-events: none; }
.rf-markiert { animation: rf-markiert 1.2s ease-out !important; }
.rf-blink { animation: rf-blink .5s ease-out !important; }
.rf-pop { animation: rf-pop .35s ease-out !important; }
.rf-laedt { animation: rf-atmen .9s ease-in-out infinite alternate; }
.gruender .bestaetigen { animation: rf-rein .2s ease-out both; }
.gruender .meldung-box.rf-zeigen { animation: rf-rein .3s cubic-bezier(.2, .8, .2, 1) both; }
.iv-aufnahme-knopf.laeuft { animation: rf-puls 1.4s ease-out infinite; }

/* Knöpfe heben sich beim Darüberfahren leicht und geben beim Drücken nach */
.gruender .knopf, .gruender .link-knopf, .gruender .reiter [role="tab"], .sprachen-gruender button {
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease, opacity .2s ease;
}
.gruender .knopf:not([disabled]):hover, .gruender .reiter [role="tab"]:hover, .sprachen-gruender button:hover { transform: translateY(-2px); }
.gruender .knopf:not([disabled]):active, .gruender .reiter [role="tab"]:active, .sprachen-gruender button:active {
  transform: translateY(1px) scale(.97);
}
.gruender input, .gruender select, .gruender textarea { transition: background-color .2s ease, border-color .2s ease; }
@media (min-width: 640px) {
  .iv-raster { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .iv-zweispaltig { grid-template-columns: 1fr 1fr; }
}

/* ---------- Unterreiter (Nutzerdaten) ---------- */
.reiter.unterreiter { margin: 14px 0 0; gap: 6px; }
.reiter.unterreiter [role="tab"] { min-height: 38px; padding: 4px 16px; border-width: 2px; font-size: .9375rem; }
.reiter.unterreiter [role="tab"][aria-selected="true"] { background: var(--blau); }
.gruender input[type="url"], .gruender input[type="search"] {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 2px solid var(--wald);
  border-radius: 12px;
  background: var(--feld);
  color: var(--wald);
  font: inherit;
  font-size: 1rem;
}

/* ---------- Branding (Brand Kit im Gründer-Bereich, kompakt) ---------- */
.br-block { margin-bottom: 14px; }
.karte.br-block { padding: 16px 20px; }
.gruender .br-block h3 { margin: 0 0 10px; font-size: 1.125rem; }
/* Oben Logo und Schrift nebeneinander, darunter die Farben */
.br-oben { display: grid; gap: 0 14px; }
@media (min-width: 800px) { .br-oben { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.br-logo-zeile { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 20px; }
.br-logo-bild { display: block; width: 230px; height: auto; }
/* Herunterladen: Knopf oben neben dem Logo, die Formate klappen darunter auf und bleiben im Rahmen */
.br-laden { position: relative; }
.br-formate {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  min-width: 15rem;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 2px solid var(--wald);
  border-radius: 12px;
  background: var(--feld);
}
.br-formate a {
  display: flex;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 8px;
  color: var(--wald);
  text-decoration: none;
  font-size: .875rem;
  line-height: 1.4;
}
.br-formate a:hover, .br-formate a:focus-visible { background: var(--lime-hell); }
.br-formate span { color: var(--leise); }
.br-schrift { display: grid; align-content: start; justify-items: start; }
/* Der Name steht in Albertus Nova, wenn sie auf dem Rechner installiert ist, sonst in der Ersatzschrift */
.br-muster { margin: 0 0 4px; font-family: "Albertus Nova", var(--text); font-weight: 700; font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.15; }
.br-ersatz { margin: 0 0 12px; color: var(--leise); font-size: .9375rem; }
.br-ersatz strong { color: var(--wald); }
.br-schrift-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.br-schrift-knoepfe .knopf, .br-laden .knopf { text-decoration: none; }
.br-farben { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.br-farben li {
  display: grid;
  align-content: start;
  padding: 8px 10px 6px;
  border: 2px solid var(--wald);
  border-radius: 12px;
  background: var(--feld);
  font-size: .875rem;
}
.br-feld { height: 40px; margin-bottom: 6px; border: 2px solid var(--wald); border-radius: 8px; }
.br-farben strong { font-family: var(--titel); font-size: .9375rem; line-height: 1.3; }
.br-farben code { font-size: .8125rem; }
.br-farben li > span:not(.br-feld) { color: var(--leise); }
.br-farben .link-knopf { justify-self: start; padding: 2px 0; font-size: .875rem; }
@media (min-width: 700px) {
  .br-farben { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ---------- Nutzerdaten (werkzeuge/nutzerdaten.js) ---------- */
.nd-leiste { display: grid; gap: 12px; margin-bottom: 16px; padding: 14px 18px; }
.nd-statistik { margin: 0; font-family: var(--titel); font-weight: 700; font-size: 1rem; }
.nd-leiste-unten { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.nd-leiste-rechts { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.nd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nd-chip {
  padding: 4px 12px;
  border: 2px solid var(--wald);
  border-radius: 999px;
  background: var(--feld);
  color: var(--wald);
  font: inherit;
  font-size: .875rem;
  cursor: pointer;
  transition: background-color .2s ease, transform .15s ease;
}
.nd-chip:hover { background: var(--lime-hell); transform: translateY(-1px); }
.nd-chip[aria-pressed="true"] { background: var(--lime); }
.nd-quelle-chip[aria-pressed="false"] { opacity: .7; text-decoration: line-through; text-decoration-thickness: 1px; }
.nd-chip-thema { background: var(--farbe, var(--feld)); }
.nd-begriff:hover { background: var(--gelb); }

/* Mindmap: Karte und Detail nebeneinander, erst auf breiten Bildschirmen */
.mm-bereich { display: grid; gap: 16px; }
/* Das Detail ist eine Schublade rechts über der Seite: Sie geht nur auf, wenn etwas gewählt ist, und die Karte
   behält ihre volle Größe */
.karte.mm-detail {
  position: fixed;
  z-index: 30;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: min(480px, calc(100vw - 24px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mm-detail:not([hidden]) { animation: mm-schublade .32s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes mm-schublade { from { opacity: 0; transform: translateX(40px); } }
@media (min-width: 1400px) {
}
.karte.mm-karte { padding: 10px; overflow: hidden; background: var(--papier); }
.mm-svg { display: block; width: 100%; height: auto; min-height: 380px; max-height: 82vh; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.mm-svg.zieht { cursor: grabbing; }
.mm-oben { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 0 8px; }
.mm-steuerung { display: flex; gap: 6px; margin-left: auto; }
.mm-zoom {
  width: 38px;
  height: 38px;
  border: 2px solid var(--wald);
  border-radius: 999px;
  background: var(--feld);
  color: var(--wald);
  font: 700 1.125rem/1 var(--titel);
  cursor: pointer;
  transition: background-color .2s ease, transform .15s ease;
}
.mm-zoom:hover { background: var(--lime-hell); transform: translateY(-1px); }
.mm-knopf { cursor: pointer; outline: none; }
.mm-knopf:focus-visible > rect, .mm-knopf:focus-visible > circle:not(.mm-ring) { stroke-width: 4; stroke-dasharray: 3 3; }
.mm-ring { display: none; }
.mm-thema.an .mm-ring { display: inline; animation: mm-puls 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.mm-thema:hover > circle:not(.mm-ring), .mm-gruppe:hover > rect, .mm-ohne:hover > rect { stroke-width: 4; }
/* Knopf +/− hinter dem Thema */
.mm-auf:hover > circle, .mm-auf:focus-visible > circle { fill: var(--lime-hell); stroke-width: 3; }
.mm-thema:hover .mm-beschriftung, .mm-erk.mm-knopf:hover .mm-beschriftung { text-decoration: underline; }
.mm-erk.mm-knopf:hover > circle { stroke-width: 3.5; }
.mm-erk.an > circle { stroke-width: 4; }
.mm-erk.an .mm-beschriftung { font-weight: 700; }
.mm-link-knopf { cursor: pointer; }
.mm-link-knopf:hover > rect, .mm-link-knopf:focus-visible > rect { fill: var(--lime-hell); stroke-width: 3; }
.mm-laedt { animation: rf-atmen .9s ease-in-out infinite alternate !important; }
.mm-knoten, .mm-kante, .mm-links > * { transition: opacity .25s ease; }
.hat-auswahl .mm-thema:not(.an):not(.verbunden), .hat-auswahl .mm-auf:not(.an):not(.verbunden), .hat-auswahl .mm-gruppe:not(.an), .hat-auswahl .mm-ohne:not(.an),
.hat-auswahl .mm-erk:not(.an):not(.verbunden) { opacity: .28; }
.hat-auswahl .mm-kante:not(.an) { opacity: .18; }
.mm-gruppe.an > rect, .mm-ohne.an > rect { stroke-width: 4.5; }
/* Aufbau der Karte: Linien wachsen aus der Mitte, Knoten tauchen nacheinander auf */
.mm-kante:not([stroke-dasharray]) { stroke-dasharray: 1; animation: mm-zeichnen .9s cubic-bezier(.3, .7, .2, 1) backwards; }
.mm-kante[stroke-dasharray] { animation: rf-einblenden .9s ease backwards; }
.mm-kante-thema { animation-delay: .25s; }
.mm-knoten { animation: mm-auftauchen .5s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(120ms + var(--i, 0) * 22ms); transform-box: fill-box; transform-origin: center; }
/* Neu gezeichnet nach einem Klick: nur Neues taucht auf (kurz und ohne Staffel), alles andere steht still */
.mm-ruhig .mm-knoten:not(.mm-neu), .mm-ruhig .mm-kante:not(.mm-neu) { animation: none; }
.mm-ruhig .mm-knoten.mm-neu { animation-duration: .35s; animation-delay: 0s; }
.mm-ruhig .mm-kante.mm-neu { animation-duration: .45s; animation-delay: 0s; }
/* Teile, die nach einer Änderung ausgetauscht werden, tauchen nicht noch einmal auf */
.rf-ansicht > .rf-ruhig, .rf-ruhig { animation: none !important; }
.mm-links > * { animation: rf-einblenden .35s ease both; }
@keyframes mm-zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mm-auftauchen { from { opacity: 0; transform: scale(.6); } }
@keyframes mm-puls { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }

/* Detail zum gewählten Thema */
.karte.mm-detail { padding: 18px 20px; }
.mm-detail-zu {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 2px solid var(--wald);
  border-radius: 999px;
  background: var(--feld);
  color: var(--wald);
  font: 700 1.125rem/1 var(--titel);
  cursor: pointer;
}
.mm-detail-zu:hover { background: var(--lime-hell); }
.mm-detail .nd-detail-kopf { padding-right: 40px; }
/* Erkenntnisse eines Themas im Detail: Zeile mit Text und Anzahl, Klick zeigt die Belege */
.nd-erk-liste { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nd-erk-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  border: 2px solid var(--wald);
  border-radius: 12px;
  background: var(--feld);
  color: var(--wald);
  font: inherit;
  font-size: .9375rem;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease;
}
.nd-erk-zeile:hover { background: var(--lime-hell); }
.nd-erk-zeile.rest { border-style: dashed; font-style: italic; }
.nd-erk-zahl { flex: none; color: var(--leise); font-size: .8125rem; white-space: nowrap; }
.nd-ki-hinweis { margin: 8px 0 0; color: var(--leise); font-size: .8125rem; }
.nd-thema-marke { cursor: pointer; }
.nd-thema-marke:hover { transform: translateY(-1px); }
.nd-beides { display: grid; gap: 14px; }
.nd-beides-person { display: grid; gap: 6px; justify-items: start; }
.nd-beides-person > div, .nd-beides-person > ul { width: 100%; }
.gruender .mm-detail h3 { margin: 6px 0 6px; font-size: 1.375rem; }
.gruender .mm-detail h4 { margin: 18px 0 8px; font-family: var(--titel); font-size: 1rem; }
.mm-detail > .hinweis { margin: 0 0 8px; color: var(--leise); font-size: .875rem; }
.nd-detail-kopf { display: flex; flex-wrap: wrap; gap: 6px; }
.nd-zweig {
  display: inline-block;
  padding: 2px 12px;
  border: 2px solid var(--wald);
  border-radius: 999px;
  color: var(--wald);
  font: 700 .8125rem/1.6 var(--titel);
  cursor: pointer;
}
button.nd-zweig:hover { transform: translateY(-1px); }
.nd-zweig-gross { font-size: 1.0625rem; padding: 4px 16px; cursor: default; }
.nd-gross { margin: 0 0 10px; font-size: 1rem; }
.nd-zahlen { display: flex; flex-wrap: wrap; gap: 6px; }
.nd-art, .nd-herkunft-zahl {
  display: inline-block;
  padding: 1px 10px;
  border: 2px solid var(--wald);
  border-radius: 999px;
  font-size: .8125rem;
  line-height: 1.5;
  white-space: nowrap;
}
.nd-art[data-art="wunsch"] { background: var(--lime); }
.nd-art[data-art="huerde"] { background: var(--gelb); }
.nd-art[data-art="erfahrung"] { background: var(--feld); }
.nd-art[data-art="auswahl"] { background: #d9f2f7; }
.nd-herkunft-zahl { background: var(--papier); border-style: dashed; }
.nd-zitate { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.nd-zitat { padding: 10px 12px; border: 2px solid var(--wald); border-radius: 12px; background: var(--feld); }
.nd-zitat-text { margin: 0 0 8px; overflow-wrap: anywhere; }
.nd-zitat-text mark { padding: 0 2px; border-radius: 4px; background: var(--gelb); color: var(--wald); }
.nd-zitat-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nd-frage { margin: 6px 0 0; color: var(--leise); font-size: .8125rem; font-style: italic; }
/* Person einer Aussage (nur Beschriftung) */
.nd-person {
  padding: 1px 10px;
  border: 2px solid var(--wald);
  border-radius: 999px;
  background: var(--lime-hell);
  color: var(--wald);
  font: 700 .8125rem/1.5 var(--titel);
}
/* Herkunft: farbiger Punkt je Quellenart, Klick öffnet die Quelle */
.nd-herkunft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 1px 10px 1px 8px;
  border: 2px solid var(--wald);
  border-radius: 999px;
  background: var(--papier);
  color: var(--wald);
  font: inherit;
  font-size: .8125rem;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.nd-herkunft::before { content: ""; flex: none; width: 10px; height: 10px; border: 1.5px solid var(--wald); border-radius: 50%; background: var(--feld); }
.nd-herkunft[data-art="umfrage"]::before, .nd-herkunft-zahl[data-art="umfrage"] { background: var(--blau); }
.nd-herkunft[data-art="notizen"]::before, .nd-herkunft-zahl[data-art="notizen"] { background: var(--gelb); }
.nd-herkunft[data-art="transkript"]::before, .nd-herkunft-zahl[data-art="transkript"] { background: var(--lime); }
.nd-herkunft:hover { background: var(--lime-hell); }
.nd-mehr { margin-top: 8px; }
.nd-begriffe { margin-top: 18px; padding-top: 12px; border-top: 2px solid var(--wald); }
.nd-begriffe summary, .nd-alle summary { font-family: var(--titel); font-weight: 700; cursor: pointer; }
.nd-begriffe .hinweis { margin: 8px 0; color: var(--leise); font-size: .8125rem; }
.nd-begriff-neu { margin-top: 10px; }
.nd-begriff-neu input { flex: 1 1 10rem; width: auto !important; }
.nd-wort-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.nd-alle { margin-top: 18px; }
.nd-alle > :not(summary) { margin-top: 10px; }
/* Quellen */
.nd-hochladen.nd-ziehen { background: var(--lime-hell); border-style: dashed; }
.nd-wege { display: grid; gap: 18px; }
@media (min-width: 1000px) { .nd-wege { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nd-weg { display: grid; align-content: start; gap: 8px; }
.nd-weg .feld-titel { margin: 0; }
.nd-weg .hinweis { margin: 0; color: var(--leise); font-size: .8125rem; }
.nd-weg > .knopf { justify-self: start; }
.nd-zone {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 2px dashed var(--wald);
  border-radius: 14px;
  background: var(--feld);
  font-size: .9375rem;
  cursor: pointer;
  transition: background-color .2s ease;
}
.nd-zone:hover { background: var(--lime-hell); }
.nd-zone strong { font-family: var(--titel); font-size: 1.0625rem; }
.nd-link-zeile input { flex: 1 1 12rem; width: auto !important; }
/* Umfrage unter „Quellen“: Ergebnisse je Frage, dann einzelne Personen */
.nd-ergebnis { margin: 0 0 18px; max-width: 56rem; }
.nd-ergebnis-frage { margin: 0 0 8px; font-family: var(--titel); font-weight: 700; }
.nd-werte { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.nd-werte li { display: grid; grid-template-columns: minmax(8rem, 18rem) minmax(4rem, 1fr) 6rem; align-items: center; gap: 10px; font-size: .9375rem; }
.nd-wert-name { overflow-wrap: anywhere; line-height: 1.25; }
.nd-wert-spur { height: 12px; border: 2px solid var(--wald); border-radius: 999px; background: var(--feld); overflow: hidden; }
.nd-wert-balken { display: block; height: 100%; border-right: 2px solid var(--wald); background: var(--lime); }
.nd-wert-zahl { font-size: .8125rem; white-space: nowrap; }
@media (max-width: 600px) {
  .nd-werte li { grid-template-columns: 1fr auto; }
  .nd-wert-spur { grid-column: 1 / -1; grid-row: 2; }
}
.nd-antworten { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nd-antworten li { padding: 8px 12px; border: 2px solid var(--wald); border-radius: 12px; background: var(--feld); }
.nd-antworten p { margin: 0 0 6px; overflow-wrap: anywhere; }
.nd-umschalter { margin: 4px 0 16px; }
.nd-blaettern { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.nd-blaettern select { width: auto; min-width: 12rem; }
.nd-blaettern .hinweis { margin: 0; color: var(--leise); font-size: .875rem; }
.nd-person-dl { display: grid; gap: 2px; margin: 0; max-width: 56rem; font-size: .9375rem; }
.nd-person-dl dt { margin-top: 12px; color: var(--leise); font-size: .875rem; }
.nd-person-dl dt:first-child { margin-top: 0; }
.nd-person-dl dd { margin: 0; overflow-wrap: anywhere; }
/* Notizen: erst lesen, „Bearbeiten“ macht ein Textfeld daraus */
.nd-notiz-text { max-height: 420px; }
.nd-notiz textarea { margin-bottom: 4px; }
.nd-link { margin: 0 0 4px; overflow-wrap: anywhere; font-size: .9375rem; }
/* Aufnahme wird unter „Daten hinzufügen“ in Text umgewandelt */
.nd-aufnahme:not(:empty) { margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--wald); }
.nd-aufnahme .hinweis { margin: 0 0 10px; color: var(--leise); font-size: .875rem; }

/* Listen im Gründer-Bereich ohne Einzug (die Regel für Textseiten „.text ul“ würde sonst einrücken) */
.text.gruender :is(.br-farben, .br-formate, .nd-zitate, .nd-erk-liste, .nd-werte, .nd-antworten, .iv-liste) { padding-left: 0; }

/* ---------- Textseiten (Impressum, Datenschutz) ---------- */
.text {
  flex: 1;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 32px 16px 16px;
  overflow-wrap: break-word;
}
.text h1 { margin: 0 0 10px; font-size: 2rem; line-height: 1.1; }
.text h2 { margin: 36px 0 8px; font-size: 1.375rem; }
.text h3 { margin: 24px 0 4px; font-size: 1.0625rem; }
.text ul { padding-left: 1.25rem; }
.text .stand { color: var(--leise); font-size: .875rem; margin-top: 40px; }
.text .andere-sprachen { color: var(--leise); font-size: .9375rem; }
.text .hinweis-uebersetzung { color: var(--leise); font-size: .9375rem; font-style: italic; }

/* Sehr schmale Handys (z. B. 320 px): etwas enger, damit nichts seitlich herausragt */
/* Handy: Flagge oben, darunter die Sprache */
@media (max-width: 639px) {
  .wahl-feld { flex-direction: column; gap: 6px; padding: 10px 4px; line-height: 1.2; }
}

@media (max-width: 359px) {
  .karte { padding: 16px; }
  .wahl { gap: 6px; }
  .wahl-feld { font-size: .875rem; }
}

@media (min-width: 640px) {
  .karte { padding: 28px; }
  .text { padding-top: 48px; }
}