/*
 * Robinsonliste, Frontend ohne WordPress.
 *
 * Aufbau und Farben folgen der bestehenden Seite: Farbwerte und Schrift stammen
 * aus der Elementor-Konfiguration (global.css, --e-global-color-*), die
 * Abschnittsfolge und die Pillenform der Schaltflaechen aus post-39.css.
 *
 * Bewusst anders als das Original, jeweils mit Grund:
 *  - Im blauen Abschnitt steht dunkler statt hellgrauer Text. Das Original
 *    kommt dort auf ein Kontrastverhaeltnis von 2,5:1 bzw. 3,4:1 und ist damit
 *    schlechter lesbar, als die Richtlinien verlangen (4,5:1). Dunkelblau auf
 *    dem gleichen Blau ergibt 5,6:1.
 *  - Bilder haben ein festes Seitenverhaeltnis, damit die Seite beim Laden
 *    nicht springt.
 *  - Sichtbare Tastaturfokus-Rahmen, im Original fehlen sie.
 */

:root {
  /* Farben der bestehenden Seite */
  --farbe-primaer: #1c244b;
  --farbe-akzent: #34a9e1;
  --farbe-text: #324a6d;
  --farbe-flaeche: #eef2f7;
  --farbe-flaeche-hell: #f7f9fc;
  --farbe-linie: #c8d5dc;
  --farbe-weiss: #ffffff;

  /*
   * Zwei weitere Abstufungen. Vorher lagen flaeche und flaeche-hell so dicht
   * beieinander, dass abwechselnde Abschnitte wie ein Druckfehler wirkten,
   * und fuer Linien gab es nur einen einzigen, recht kraeftigen Ton.
   */
  --farbe-linie-fein: #e3eaf0;
  --farbe-primaer-tief: #141b3a;

  /*
   * Abgeleitet. Das Akzentblau der bestehenden Seite ist als Flaeche schoen,
   * traegt aber keinen weissen Text: #34a9e1 mit Weiss ergibt 2,7:1. Deshalb
   * ein zweiter Ton im selben Farbton (199 Grad), nur dunkler, fuer alles, was
   * weisse Schrift traegt oder selbst Text ist. Er kommt auf 4,5:1.
   */
  --farbe-akzent-dunkel: #1a7eaf;
  --farbe-akzent-tief: #15688f;
  --farbe-text-leise: #5d7590;

  --schrift: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  --breite: 1140px;
  --breite-schmal: 52rem;
  --abstand: 1.5rem;

  /* Das Original setzt Schaltflaechen als Pillen, das bleibt. */
  --radius-pille: 100px;
  --radius: 10px;

  --schatten-klein: 0 1px 3px rgba(28, 36, 75, 0.08);
  --schatten: 0 4px 16px rgba(28, 36, 75, 0.09);
  --schatten-gross: 0 12px 32px rgba(28, 36, 75, 0.13);

  --uebergang: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  /* Der Kopfbereich bleibt oben stehen, sonst verschwinden Sprungziele. */
  scroll-padding-top: 6.5rem;
  /*
   * Platz fuer die Bildlaufleiste immer freihalten. Ohne das ist der Inhalt
   * auf kurzen Seiten rund 17 Pixel breiter als auf langen, und Logo,
   * Navigation und alle Abschnitte springen beim Seitenwechsel seitlich.
   * Genau das war der Eindruck, der Kopfbereich sehe je Seite anders aus.
   */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  overflow-wrap: break-word;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--farbe-text);
  background: var(--farbe-weiss);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--farbe-akzent-dunkel);
  text-decoration: none;
  transition: color var(--uebergang);
}

a:hover {
  color: var(--farbe-primaer);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

h1,
h2,
h3,
h4 {
  color: var(--farbe-primaer);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.5rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem);
}

h3 {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem);
}

p {
  margin: 0 0 1.15em;
  text-wrap: pretty;
}

/* Tastaturbedienung muss sichtbar sein. Im Original ist sie es nicht. */
:focus-visible {
  outline: 3px solid var(--farbe-akzent-dunkel);
  outline-offset: 3px;
  border-radius: 4px;
}

/*
 * Sprungmarke fuer Tastatur und Vorlesewerkzeuge. Sie wird zusammengeklappt
 * statt nach left:-9999px geschoben: so steht sie an ihrem Platz im Dokument
 * und kann die Seitenbreite nicht beeinflussen.
 */
.sprungmarke {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  z-index: 100;
  padding: 0.85rem 1.5rem;
  background: var(--farbe-primaer);
  color: var(--farbe-weiss);
  border-radius: 0 0 var(--radius) 0;
}

.sprungmarke:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  color: var(--farbe-weiss);
  text-decoration: none;
}

/* ---------- Grundbausteine ---------- */

/*
 * Eigener Namensraum, und zwar aus einem konkreten Grund. Die Klasse hiess bis
 * zum 15.09.2026 schlicht .container. Das Vuetify des Spendenwidgets bringt
 * dieselbe Klasse mit (max-width 1185px, padding 12px) und gewinnt, weil sein
 * Stylesheet erst zur Laufzeit dazukommt und damit spaeter steht.
 *
 * Folge: Auf der Startseite, und nur dort, sass der gesamte Inhalt 35 Pixel
 * weiter aussen als auf jeder anderen Seite. Am auffaelligsten am Logo und an
 * der Navigation, die dadurch je nach Seite an anderer Stelle standen.
 *
 * Fremder Code laesst sich nicht daran hindern, allgemeine Klassennamen zu
 * belegen. Der eigene Namensraum ist der einzige verlaessliche Schutz.
 */
.rl-container {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--abstand);
}

.abschnitt {
  padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem);
}

.abschnitt--flaeche {
  background: var(--farbe-flaeche);
  border-block: 1px solid var(--farbe-linie-fein);
}

.abschnitt--hell {
  background: var(--farbe-flaeche-hell);
}

/*
 * Der blaue Abschnitt des Originals. Dort steht dunkelblauer statt hellgrauer
 * Text, siehe Kopfkommentar.
 */
.abschnitt--akzent {
  background: var(--farbe-akzent);
  color: var(--farbe-primaer);
}

.abschnitt--akzent h1,
.abschnitt--akzent h2,
.abschnitt--akzent h3 {
  color: var(--farbe-primaer);
}

.abschnitt--akzent .vorspann {
  color: var(--farbe-primaer);
  opacity: 0.75;
}

.abschnitt--dunkel {
  background: var(--farbe-primaer);
  color: rgba(255, 255, 255, 0.88);
}

.abschnitt--dunkel h1,
.abschnitt--dunkel h2,
.abschnitt--dunkel h3 {
  color: var(--farbe-weiss);
}

.abschnitt--dunkel a {
  color: var(--farbe-weiss);
}

.zentriert {
  text-align: center;
}

.vorspann {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--farbe-akzent-tief);
  margin-bottom: 0.9rem;
}

.lead {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  max-width: 46rem;
  color: inherit;
}

/*
 * .lead ist auf 46rem begrenzt. In einem zentrierten Abschnitt muss deshalb
 * auch der Block selbst mittig sitzen, nicht nur der Text darin: sonst steht
 * die Zeile zwar zentriert, aber der ganze Kasten klebt links, und der Text
 * sitzt sichtbar neben der Mitte der Ueberschrift darueber.
 *
 * Die Regel haengt bewusst nicht nur an .zentriert. Der Bildkopf der
 * Startseite zentriert ueber text-align und traegt die Klasse nicht.
 */
.zentriert .lead,
.buehne--start .lead {
  margin-inline: auto;
}

/* ---------- Schaltflaechen ---------- */

/* Pillenform und Innenabstand wie im Original (border-radius 100px). */
.btn {
  display: inline-block;
  /*
   * Ohne diese beiden Zeilen zwingt eine Schaltflaeche mit langer Beschriftung
   * ("Jetzt schnelle Loesung im FAQ-Bereich finden") den umgebenden Container
   * breiter als den Bildschirm, und die ganze Seite laesst sich seitlich
   * schieben. Auf dem Telefon war rechts jede Zeile abgeschnitten.
   */
  max-width: 100%;
  overflow-wrap: break-word;
  padding: 1em 2.6em;
  border: 2px solid transparent;
  border-radius: var(--radius-pille);
  font: inherit;
  font-weight: 600;
  font-size: 0.975rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--uebergang), color var(--uebergang),
    border-color var(--uebergang), transform var(--uebergang),
    box-shadow var(--uebergang);
}

.btn + .btn {
  margin-left: 0.5rem;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primaer {
  background: var(--farbe-akzent-dunkel);
  border-color: var(--farbe-akzent-dunkel);
  color: var(--farbe-weiss);
  box-shadow: var(--schatten-klein);
}

.btn--primaer:hover {
  background: var(--farbe-primaer);
  border-color: var(--farbe-primaer);
  color: var(--farbe-weiss);
  box-shadow: var(--schatten);
}

/* Auf blauem Grund kehrt sich das um, wie im Original. */
.abschnitt--akzent .btn--primaer,
.abschnitt--dunkel .btn--primaer {
  background: var(--farbe-primaer);
  border-color: var(--farbe-primaer);
}

.abschnitt--akzent .btn--primaer:hover {
  background: var(--farbe-weiss);
  border-color: var(--farbe-weiss);
  color: var(--farbe-primaer);
}

.abschnitt--dunkel .btn--primaer {
  background: var(--farbe-akzent-dunkel);
  border-color: var(--farbe-akzent-dunkel);
}

.abschnitt--dunkel .btn--primaer:hover {
  background: var(--farbe-weiss);
  border-color: var(--farbe-weiss);
  color: var(--farbe-primaer);
}

.btn--rand {
  background: transparent;
  border-color: var(--farbe-linie);
  color: var(--farbe-primaer);
}

.btn--rand:hover {
  background: var(--farbe-primaer);
  border-color: var(--farbe-primaer);
  color: var(--farbe-weiss);
}

/* ---------- Kopfbereich ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Bezugspunkt fuer das aufklappbare Menue der schmalen Ansicht. */
  isolation: isolate;
  /*
   * Deckend statt halbdurchsichtig. Mit backdrop-filter nahm der Kopf die
   * Farbe dessen an, was gerade darunter lag: ueber dem Foto der Startseite
   * wirkte er anders als ueber der hellen Flaeche einer Unterseite, und genau
   * das las sich wie zwei verschiedene Kopfbereiche.
   */
  background: var(--farbe-weiss);
  border-bottom: 1px solid var(--farbe-linie-fein);
  transition: box-shadow var(--uebergang);
}

/* Erst beim Scrollen abheben, gesetzt von main.js. */
.kopf[data-gescrollt="ja"] {
  box-shadow: var(--schatten);
  border-bottom-color: var(--farbe-linie);
}

.kopf__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 5.25rem;
}

.kopf__logo {
  flex-shrink: 0;
}

.kopf__logo img {
  width: 215px;
  max-width: 52vw;
  transition: opacity var(--uebergang);
}

.kopf__logo:hover img {
  opacity: 0.82;
}

.kopf__nav {
  margin-left: auto;
}

.kopf__liste {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 0.1rem + 1.5vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.kopf__liste a {
  position: relative;
  display: inline-block;
  color: var(--farbe-primaer);
  font-weight: 500;
  font-size: 0.975rem;
  padding-block: 0.4rem;
}

.kopf__liste a:hover {
  color: var(--farbe-akzent-dunkel);
  text-decoration: none;
}

/* Unterstrich waechst aus der Mitte, statt hart zu erscheinen. */
.kopf__liste a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--farbe-akzent);
  transform: translateX(-50%);
  transition: width var(--uebergang);
}

.kopf__liste a:not(.btn):hover::after,
.kopf__liste a:not(.btn)[aria-current="page"]::after {
  width: 100%;
}

.kopf__liste a[aria-current="page"] {
  color: var(--farbe-akzent-dunkel);
}

/*
 * Der Knopf im Kopfbereich ist kein Haupt-Handlungsaufruf, sondern ein
 * Navigationspunkt mit Betonung. Vorher trug er dieselbe Wucht wie die grossen
 * Schaltflaechen im Inhalt und wirkte im schmalen Kopf gedrungen.
 */
.kopf__liste .btn {
  padding: 0.62em 1.3em;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: none;
}

.kopf__liste .btn:hover {
  color: var(--farbe-weiss);
  transform: none;
  box-shadow: 0 2px 10px rgba(26, 126, 175, 0.3);
}

/* Die Hebe-Bewegung der grossen Schaltflaechen passt im Kopf nicht. */
.kopf__liste .btn:active {
  transform: none;
}

.kopf__schalter {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: transparent;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-pille);
  color: var(--farbe-primaer);
  font: inherit;
  font-size: 0.925rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--uebergang), border-color var(--uebergang);
}

.kopf__schalter:hover {
  background: var(--farbe-flaeche);
  border-color: var(--farbe-akzent);
}

/* ---------- Bildkopf ---------- */

/*
 * Es gibt genau zwei Arten: die Startseite und eine einheitliche, ruhige
 * Fassung fuer jede Unterseite. Vorher hatte fast jede Seite ihre eigene
 * (Foto, heller Verlauf, dunkles Vollbild), und beim Seitenwechsel sah es aus,
 * als wechsle auch der Kopfbereich.
 *
 * Keine der beiden traegt ein Foto mehr: das Motiv der alten Startseite zeigte
 * Strandurlaub und hatte mit Schutz vor Werbung nichts zu tun. Statt eines
 * Ersatzbildes traegt der Bildkopf die Zahl, die das staerkste Argument der
 * Seite ist.
 */
.buehne {
  position: relative;
  padding-block: clamp(2.5rem, 1.5rem + 2.5vw, 3.75rem);
  background: var(--farbe-flaeche-hell);
  border-bottom: 1px solid var(--farbe-linie-fein);
  overflow: hidden;
}

.buehne__inhalt {
  position: relative;
  max-width: 50rem;
}

.buehne h1 {
  margin-bottom: 0.35em;
}

.buehne .lead {
  margin-bottom: 0;
}

/* Unterseiten. Eine Klasse, ein Aussehen. */
.buehne--schlicht {
  background: linear-gradient(
    170deg,
    var(--farbe-flaeche) 0%,
    var(--farbe-flaeche-hell) 55%,
    var(--farbe-weiss) 100%
  );
}

/* Startseite: etwas mehr Luft, zentriert, mit zartem Farbschimmer. */
.buehne--start {
  background-color: var(--farbe-flaeche-hell);
  background-image: radial-gradient(
    ellipse at 50% 0%,
    rgba(52, 169, 225, 0.14) 0%,
    transparent 60%
  );
  padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  text-align: center;
}

/* Die Zahl ist der Blickfang, der vorher das Foto sein sollte. */
.buehne__zahl {
  margin-top: 2rem;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

.buehne__zahl strong {
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--farbe-akzent-dunkel);
  letter-spacing: -0.02em;
}

.buehne__zahl span {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--farbe-text-leise);
}

.buehne__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.buehne--start .buehne__aktionen {
  justify-content: center;
}

.buehne__aktionen .btn + .btn {
  margin-left: 0;
}

/* ---------- Raster ---------- */

.raster {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
}

/* Grid-Spalten haben min-width:auto, langer Inhalt sprengt sie sonst. */
.raster > * {
  min-width: 0;
}

.raster--2 {
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  align-items: center;
}

.raster--3 {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/*
 * Hochformatiges, freigestelltes Motiv neben einer Textspalte. Es wird
 * vollstaendig gezeigt und in der Hoehe begrenzt, statt es zu beschneiden.
 */
.bild--schmal {
  width: auto;
  max-width: 100%;
  max-height: 30rem;
  margin-inline: auto;
  object-fit: contain;
}

.karte {
  background: var(--farbe-weiss);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--schatten-klein);
  transition: transform var(--uebergang), box-shadow var(--uebergang);
}

.karte:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-gross);
}

.karte img {
  /*
   * 3:2 ist genau das Verhaeltnis der Motive (1200 x 800). Damit wird nichts
   * weggeschnitten, und die Karte springt beim Laden trotzdem nicht.
   */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  width: 100%;
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * Der Zoom beim Ueberfahren geht bewusst nur auf 1.02. Bei 1.04 verschwand
 * sichtbar Rand, und die Motive wirkten angeschnitten.
 */
.karte:hover img {
  transform: scale(1.02);
}

.karte__bild {
  overflow: hidden;
  background: var(--farbe-flaeche);
}

.karte__text {
  padding: 1.75rem;
}

.karte__text :last-child {
  margin-bottom: 0;
}

.karte__text h3 {
  margin-bottom: 0.35em;
}

.karte__text p {
  color: var(--farbe-text-leise);
  font-size: 0.975rem;
}

/* ---------- Partnerlogos ---------- */

/*
 * Die sieben Logodateien sind samt und sonders weiss: gemessen liegt ihre
 * mittlere Helligkeit bei rund 210 von 255, sie stammen aus einer Fassung fuer
 * dunklen Grund. Auf hellem Untergrund verschwinden sie, zwei davon (ABIS,
 * Sander und Doll) praktisch vollstaendig.
 *
 * Bis zum 17.09.2026 sass deshalb jedes Logo auf einer eigenen dunklen Kachel
 * im hellen Abschnitt. Lesbar war das, es sah aber nach sieben dunklen Flecken
 * aus (Rueckmeldung Heike Nowotnick, 16.09.2026: "seltsam sichtbar"). Jetzt
 * traegt der ganze Abschnitt den dunklen Grund, wie im Original: eine Flaeche
 * statt sieben, die Logos stehen frei darauf.
 *
 * Frei stehen sie aber nur, wenn die Datei selbst keinen Grund mitbringt. Bei
 * Sander und Doll und SWN war er ausgemalt, beide standen deshalb bis zum
 * 21.09.2026 als graue Kacheln da. Entfernt hat ihn tools/logo-freistellen.py;
 * tests/test_logo_freistellen.py haelt fest, dass keine Datei ihn zurueckholt.
 *
 * Ohne Verweise, wie im Original und wie auf quadress.de: die Referenzlogos
 * dort waren zwischenzeitlich verlinkt und sind es auf Wunsch der
 * Geschaeftsleitung wieder nicht.
 */

/*
 * Der Logoabschnitt steht direkt ueber dem dunklen Aufruf des Fussbereichs.
 * Im selben Ton verschmelzen beide zu einem Block, deshalb hier der tiefere
 * Ton und unten die feine Grenze.
 */
.abschnitt--logos {
  background: var(--farbe-primaer-tief);
}

.abschnitt--dunkel + .abschnitt--dunkel {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Sieben Logos gehen in keiner Breite glatt auf. Ein Raster reiht die letzte
   Zeile linksbuendig, dadurch stand Driver allein am linken Rand. Flex mit
   justify-content: center zentriert stattdessen, was uebrig bleibt. */
.logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /*
   * Waagerecht mehr Luft als senkrecht: die Logos sollen einzeln stehen, nicht
   * als Band. Mehr als 4rem geht nicht, sonst passen die sieben bei 1140
   * Pixeln Containerbreite nicht mehr in eine Zeile (belegt: 704 Pixel Logos
   * plus sechs Abstaende).
   */
  gap: 2.25rem clamp(2rem, 1.25rem + 3.5vw, 4rem);
  margin-top: 2.75rem;
}

/* Die Dateien sind unterschiedlich breit und hoch. Gemeinsame Hoechsthoehe
   statt gemeinsamer Breite: sonst wirken die breiten Wortmarken riesig neben
   den kompakten. */
.logos img {
  max-height: 2.5rem;
  max-width: 9rem;
  width: auto;
  height: auto;
}

/*
 * Drei der sieben Marken sind kompakt (ABIS, Sander und Doll, SWN), die
 * anderen vier sind breite Schriftzuege. Auf gleiche Hoehe gebracht belegen
 * die kompakten nur ein Viertel der Flaeche der breiten, und ihre Schrift
 * faellt unter die Lesbarkeitsgrenze: "sander und doll" steht bei 40 Pixel
 * Hoehe in zwei Zeilen zu je sechs Pixel. Sie bekommen deshalb mehr Hoehe,
 * damit alle sieben optisch gleich schwer wiegen.
 */
.logos img.logos__kompakt {
  max-height: 3.5rem;
}

/* ---------- Aufklappbare Fragen ---------- */

.faq {
  max-width: var(--breite-schmal);
  margin-inline: auto;
}

.faq details {
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  background: var(--farbe-weiss);
  margin-bottom: 0.85rem;
  transition: border-color var(--uebergang), box-shadow var(--uebergang);
}

.faq details:hover {
  border-color: var(--farbe-akzent);
}

.faq details[open] {
  box-shadow: var(--schatten);
  border-color: var(--farbe-akzent);
}

.faq summary {
  padding: 1.25rem 3.5rem 1.25rem 1.5rem;
  position: relative;
  cursor: pointer;
  font-weight: 600;
  color: var(--farbe-primaer);
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* Kreuz, das sich zum Minus dreht. Kein Zeichenwechsel, damit es ruhig wirkt. */
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: 1.5rem;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--farbe-akzent);
  transition: transform var(--uebergang);
}

.faq summary::before {
  transform: translateY(-50%);
}

.faq summary::after {
  transform: translateY(-50%) rotate(90deg);
}

.faq details[open] summary::after {
  transform: translateY(-50%) rotate(0deg);
}

.faq details[open] summary {
  color: var(--farbe-akzent-dunkel);
}

.faq__antwort {
  padding: 0 1.5rem 1.5rem;
  border-top: 1px solid var(--farbe-flaeche);
  padding-top: 1.25rem;
  margin-top: -0.25rem;
}

.faq__antwort :last-child {
  margin-bottom: 0;
}

.faq__antwort ul {
  padding-left: 1.3em;
}

/* ---------- Formular ---------- */

.formular {
  max-width: 40rem;
}

.feld {
  margin-bottom: 1.35rem;
}

.feld label {
  display: block;
  margin-bottom: 0.45rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--farbe-primaer);
}

.feld input[type="text"],
.feld input[type="email"],
.feld textarea,
.feld select {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  font: inherit;
  font-size: 1rem;
  color: var(--farbe-text);
  background: var(--farbe-weiss);
  transition: border-color var(--uebergang), box-shadow var(--uebergang);
}

.feld input:focus,
.feld textarea:focus {
  border-color: var(--farbe-akzent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(52, 169, 225, 0.22);
}

.feld textarea {
  resize: vertical;
  min-height: 9rem;
}

.feld--pflicht > label::after {
  content: " *";
  color: #c0392b;
}

/* Zustimmungsfeld: Text neben dem Haken, nicht darunter. */
.feld--haken label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  font-weight: 400;
  font-size: 1rem;
  color: var(--farbe-text);
  cursor: pointer;
}

.feld--haken input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.3rem;
  accent-color: var(--farbe-akzent);
  cursor: pointer;
}

.hinweis {
  font-size: 0.9rem;
  color: var(--farbe-text-leise);
}

/* ---------- Spendenbereich ---------- */

.spende {
  background: var(--farbe-primaer);
  color: rgba(255, 255, 255, 0.9);
  position: relative;
  overflow: hidden;
}

/* Sanfter Lichtschein, damit die dunkle Flaeche nicht flach wirkt. */
.spende::before {
  content: "";
  position: absolute;
  top: -40%;
  left: 50%;
  width: 60rem;
  height: 60rem;
  transform: translateX(-50%);
  background: radial-gradient(
    circle,
    rgba(52, 169, 225, 0.22) 0%,
    transparent 62%
  );
  pointer-events: none;
}

.spende .rl-container {
  position: relative;
}

.spende h2 {
  color: var(--farbe-weiss);
}

.spende .vorspann {
  color: var(--farbe-akzent);
}

.spende .lead {
  color: rgba(255, 255, 255, 0.86);
}

.spende strong {
  color: var(--farbe-weiss);
}

/*
 * Einhaengepunkt der Anwendung aus dem Plugin robinsonliste-donations.
 * Ohne Inhalt darf hier keine Luecke klaffen.
 */
#app:empty {
  display: none;
}

#app {
  margin-top: 2.5rem;
}

/*
 * Die Spendenanwendung bringt ihr eigenes Vuetify-Thema mit. Das rechnet mit
 * hellem Grund und setzt Text in rgba(0,0,0,.87), also praktisch schwarz.
 *
 * Der Hintergrund wurde hier zwischenzeitlich auf transparent gesetzt, damit
 * die weisse Flaeche auf dem dunklen Abschnitt nicht wie ein aufgeklebter
 * Zettel wirkt. Das war falsch: sobald die Anwendung nach dem Klick auf einen
 * Betrag das E-Mail-Feld zeigt, stand schwarze Schrift auf Dunkelblau und war
 * nicht mehr zu lesen.
 *
 * Die Anwendung bekommt deshalb ihre helle Flaeche zurueck, nur als
 * gestaltete Karte statt als Kasten mit harten Kanten. So bleibt alles
 * lesbar, was die Anwendung an Text nachliefert, ohne dass wir in fremden
 * Code eingreifen (siehe CLAUDE.md).
 */
.spende .v-application {
  border-radius: var(--radius);
  box-shadow: var(--schatten-gross);
  overflow: hidden;
  max-width: 54rem;
  margin-inline: auto;
}

.spende .v-application,
.spende .v-application--wrap {
  background: var(--farbe-weiss) !important;
}

/*
 * Die Betragskacheln der Anwendung tragen weisse Schrift auf dem hellen
 * Flaechenblau, das ergibt 2,7:1. Derselbe Mangel wie im Rest der alten
 * Seite, und hier per Stylesheet zu beheben, ohne das Buendel anzufassen.
 */
.spende .donation-holder .donation-tier {
  background-color: var(--farbe-akzent-dunkel);
  border-color: var(--farbe-akzent-dunkel);
}

.spende .donation-holder .donation-tier:hover {
  background-color: var(--farbe-primaer);
  border-color: var(--farbe-primaer);
  color: var(--farbe-weiss);
}

/* Der linke Aussenabstand der Anwendung (20px) kippt die Reihe aus der Mitte. */
.spende .donation-holder {
  margin: 20px;
}

.spende__ersatz {
  margin-top: 2.5rem;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.07);
  max-width: 36rem;
  margin-inline: auto;
}

.spende__ersatz p:last-of-type {
  margin-bottom: 1.5rem;
}

/* ---------- Rechtstexte ---------- */

.rechtstext {
  max-width: var(--breite-schmal);
}

.rechtstext h2 {
  margin-top: 2.75rem;
  font-size: 1.35rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--farbe-flaeche);
}

.rechtstext h3 {
  margin-top: 2rem;
  font-size: 1.1rem;
}

.rechtstext ul,
.rechtstext ol {
  margin: 0 0 1.15em;
  padding-left: 1.4em;
}

.rechtstext li {
  margin-bottom: 0.45em;
}

.rechtstext a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ---------- Fussbereich ---------- */

.fuss {
  background: var(--farbe-primaer);
  color: rgba(255, 255, 255, 0.72);
  padding-block: 4rem 2rem;
  font-size: 0.975rem;
}

.fuss a {
  color: rgba(255, 255, 255, 0.86);
}

.fuss a:hover {
  color: var(--farbe-weiss);
  text-decoration: underline;
}

.fuss h3 {
  color: var(--farbe-weiss);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1.1rem;
}

.fuss__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(2rem, 1rem + 2vw, 3rem);
  align-items: start;
}

/*
 * Beide Logos im Fussbereich sind dunkle Dateien auf dunklem Grund und
 * muessen invertiert werden. Vorher galt das nur fuer das erste; das
 * Robinsonabgleich-Logo stand dunkelblau auf Dunkelblau und war praktisch
 * unsichtbar. Der Abstand darunter fehlte ebenfalls, der Text lief in die
 * Grafik hinein.
 */
.fuss img {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.fuss__logo img {
  width: 195px;
  margin-bottom: 1.35rem;
}

.fuss__abgleich img {
  width: 175px;
  margin-bottom: 1.1rem;
}

.fuss ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fuss li {
  margin-bottom: 0.55rem;
}

.fuss__schluss {
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.875rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- Spendenhinweis (Layover) ---------- */

/*
 * Nachbau des Popups der alten Seite (Elementor-Vorlage 468). Dessen
 * Einstellungen: fuenf Sekunden Wartezeit, Einblenden ueber 1,2 Sekunden,
 * gesperrtes Scrollen im Hintergrund.
 *
 * Drei Einstellungen des Originals sind bewusst nicht uebernommen:
 * prevent_close_on_esc_key, prevent_close_on_background_click und der fehlende
 * Schliessknopf. Zusammen ergaben sie ein Fenster, aus dem man mit der Tastatur
 * nicht mehr herauskam. Hier schliessen Escape, ein Klick daneben und ein
 * Schliessknopf; die beiden Schaltflaechen des Originals bleiben wie sie waren.
 */
.layover {
  position: fixed;
  inset: 0;
  /* Ueber dem Kopfbereich (50) und der Sprungmarke (100). */
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--abstand);
  background: rgba(20, 27, 58, 0.62);
  overflow-y: auto;
  animation: layover-auf 1.2s ease both;
}

.layover[hidden] {
  display: none;
}

.layover__fenster {
  position: relative;
  width: min(34rem, 100%);
  margin: auto;
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  background: var(--farbe-weiss);
  border-radius: var(--radius);
  box-shadow: var(--schatten-gross);
  text-align: center;
}

/* Der Robinsonabgleich-Hinweis traegt sein Logo ueber der Ueberschrift. */
.layover__bild {
  max-width: 100%;
  height: auto;
  max-height: 3rem;
  margin-bottom: 1rem;
}

.layover__titel {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.75rem);
}

.layover__lead {
  font-weight: 600;
  color: var(--farbe-primaer);
}

.layover__fenster p {
  margin-bottom: 1rem;
}

.layover__knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/*
 * Der Schliessknopf sitzt in der Ecke des Fensters. 44 Pixel im Quadrat, das
 * ist die kleinste Flaeche, die sich auf einem Telefon zuverlaessig treffen
 * laesst.
 */
.layover__schliessen {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--farbe-text-leise);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--uebergang), color var(--uebergang);
}

.layover__schliessen:hover {
  background: var(--farbe-flaeche);
  color: var(--farbe-primaer);
}

/*
 * Solange der Hinweis offen ist, steht die Seite dahinter still
 * (prevent_scroll im Original). Die Breite des Rollbalkens gleicht das
 * Skript ueber --scrollbalken aus, sonst springt das Layout beim Oeffnen um
 * etwa 15 Pixel zur Seite.
 */
html.layover-offen {
  overflow: hidden;
  padding-right: var(--scrollbalken, 0px);
}

@keyframes layover-auf {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Wer Bewegung abbestellt hat, bekommt den Hinweis ohne Einblendung. */
@media (prefers-reduced-motion: reduce) {
  .layover {
    animation: none;
  }
}

/*
 * Auf den kleinsten Telefonen (320 Pixel) reicht die Hoehe nicht fuer den
 * ganzen Text: die beiden Schaltflaechen stehen dann unter dem Rand. Der
 * Hinweis laesst sich zwar rollen, gesehen wird aber nur, was ohne Rollen
 * dasteht. Enger gesetzt passt er wieder.
 */
@media (max-width: 24rem) {
  .layover__fenster {
    padding: 1.5rem 1.25rem;
  }

  .layover__fenster p {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
  }

  .layover__knoepfe {
    margin-top: 1.25rem;
  }
}

/*
 * Der Robinsonabgleich-Hinweis als Widget (Elementor-Vorlage 723).
 *
 * Er ist bewusst kein Kasten in der Seitenmitte. Das Original sperrte weder
 * das Rollen noch den Klick daneben und flog mit fadeInUp von unten ein, war
 * also nie ein Dialog, der die Seite anhaelt. Daniel Simon hat das am
 * 18.09.2026 bestaetigt: klein, rechts, mittig auf der Hoehe, wie an der
 * alten Seite.
 *
 * Deshalb hebt dieser Abschnitt drei Dinge des Grundaufbaus auf: die
 * Abdunkelung, die Zentrierung und das Abfangen von Klicks auf die Flaeche
 * daneben. Ohne pointer-events: none laege eine unsichtbare Scheibe ueber der
 * ganzen Seite, und niemand koennte etwas anklicken, obwohl man alles sieht.
 */
.layover--widget {
  justify-content: flex-end;
  padding: var(--abstand);
  background: none;
  overflow: visible;
  pointer-events: none;
  animation-name: layover-auf-unten;
  animation-duration: 1.8s;
  /*
   * Eine Stufe ueber dem Spendenfenster (200). Beide duerfen gleichzeitig
   * sichtbar sein, und dann liegt das Widget sonst unter dessen Abdunkelung:
   * es sieht aus, als klebte es am grossen Fenster, statt eigenstaendig am
   * Rand zu sitzen.
   */
  z-index: 210;
  /*
   * Etwas mehr Luft zum rechten Rand als das grosse Fenster. Stehen beide
   * gleichzeitig, beruehrt das Widget sonst fast dessen Kante und die zwei
   * lesen sich als ein Block.
   */
  padding-right: calc(var(--abstand) * 1.5);
}

.layover--widget .layover__fenster {
  /*
   * 22rem statt der 34rem des grossen Fensters. Schmaler ginge, aber dann
   * stehen im Fliesstext nur noch drei bis vier Woerter je Zeile, und der
   * Flattersatz wird unruhiger als der Text lang ist.
   */
  width: min(22rem, 100%);
  margin: 0;
  padding: 1.5rem 1.4rem;
  pointer-events: auto;
  box-shadow: 0 1.25rem 2.5rem rgba(20, 27, 58, 0.22);
}

.layover--widget .layover__bild {
  width: min(12rem, 100%);
  height: auto;
  margin-bottom: 1rem;
}

.layover--widget .layover__titel {
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
}

/*
 * Im schmalen Widget steht der Text linksbuendig statt zentriert. Zentriert
 * ergibt bei dieser Breite auf beiden Seiten einen ausgefransten Rand, und
 * die Zeilen sind zu kurz, als dass die Mitte noch als Ordnung wirkte.
 */
.layover--widget .layover__fenster p {
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: left;
  margin-bottom: 0;
}

/*
 * Die Schaltflaechen sitzen enger als im grossen Fenster und stehen
 * untereinander statt nebeneinander: bei 22rem Breite passen sie nicht in
 * eine Zeile, und zwei ungleich breite Knoepfe nebeneinander sehen aus wie
 * ein Fehler.
 */
.layover--widget .layover__knoepfe {
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

/*
 * Der wichtigste Punkt: die Adresse darf nicht mitten im Wort brechen.
 * `.btn` traegt `overflow-wrap: break-word` und ein seitliches Polster von
 * 2.6em, damit eine lange Beschriftung die Seite nicht breiter macht. Im
 * Widget kostet genau das die Lesbarkeit: aus "www.robinsonabgleich.de"
 * wurde "www.robinsonabgleich." und darunter "de". Hier ist der Knopf
 * ohnehin auf die Breite des Fensters begrenzt, also braucht es den Umbruch
 * nicht.
 */
.layover--widget .layover__knoepfe .btn {
  width: 100%;
  padding: 0.8em 1em;
  font-size: 0.92rem;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

/*
 * Der Schliessknopf sass beim grossen Fenster halb ausserhalb. Beim schmalen
 * Widget waere er damit fast am Bildschirmrand, deshalb rueckt er herein.
 */
.layover--widget .layover__schliessen {
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
}

/*
 * fadeInUp des Originals: von unten herein, nicht nur eingeblendet.
 */
@keyframes layover-auf-unten {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .layover--widget {
    animation: none;
  }
}

/*
 * Auf dem Telefon ist rechts kein Platz fuer eine eigene Spalte. Dort sitzt
 * das Widget unten quer ueber die Breite, wie es Hinweisleisten dort ueblich
 * tun, und laesst den Inhalt darueber frei.
 */
@media (max-width: 40rem) {
  .layover--widget {
    align-items: flex-end;
    justify-content: center;
  }

  .layover--widget .layover__fenster {
    width: 100%;
  }
}

/* ---------- Schmale Ansicht ---------- */

@media (max-width: 880px) {
  .kopf__schalter {
    display: flex;
  }

  .kopf__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--farbe-weiss);
    box-shadow: var(--schatten-gross);
    border-top: 1px solid var(--farbe-linie);
    margin-left: 0;
  }

  .kopf__nav[hidden] {
    display: none;
  }

  .kopf__liste {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--abstand) 1.5rem;
  }

  .kopf__liste li {
    border-bottom: 1px solid var(--farbe-flaeche);
  }

  .kopf__liste li:last-child {
    border-bottom: 0;
    margin-top: 1rem;
  }

  .kopf__liste a:not(.btn) {
    display: block;
    padding: 0.95rem 0;
  }

  .kopf__liste a:not(.btn)::after {
    display: none;
  }

  .kopf__liste .btn {
    display: block;
  }

  .bild--schmal {
    max-height: 22rem;
  }

  .buehne--start {
    min-height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .karte:hover,
  .btn:hover {
    transform: none;
  }
}

/* ---------- Druck ---------- */

@media print {
  .kopf,
  .fuss,
  .spende,
  .buehne__bild,
  .buehne__schleier {
    display: none;
  }

  body {
    color: #000;
    font-size: 11pt;
  }

  .faq details {
    break-inside: avoid;
  }

  .faq details:not([open]) .faq__antwort {
    display: block;
  }
}

/* Einzelnes Bild mit weichen Ecken, im blauen Abschnitt der Startseite. */
.bild--rund {
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

.formular__aktionen {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* ---------- Kontaktformular: Spam-Abwehr und Rueckmeldung ---------- */

/*
 * Honigtopf. Nicht display:none, sondern zusammengeklappt: manche Bots
 * ignorieren versteckte Felder gezielt, ein eingeklapptes fuellen sie eher aus.
 */
.honigtopf {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.feld__zusatz {
  font-weight: 400;
  color: var(--farbe-text-leise);
}

.formular__meldung {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  border-left: 4px solid var(--farbe-linie);
  background: var(--farbe-flaeche);
  font-size: 0.975rem;
}

.formular__meldung--gut {
  border-left-color: #2e7d4f;
  background: #eef7f1;
  color: #1d5334;
}

.formular__meldung--fehler {
  border-left-color: #c0392b;
  background: #fdf0ee;
  color: #8e2b1f;
}

.formular__meldung--warte {
  border-left-color: var(--farbe-akzent-dunkel);
}