/* ══════════════════════════════════════════════════════════════════════════════════════
   TE-Vereinsleben — das Aussehen von Grund und Karten, für die ganze App

   ENTSCHIEDEN AM 2026-08-24. Thomas, nachdem er /design-probe durchprobiert hatte:
   „schwebend mit Verlauf und der Hintergrund son bisschen verschwommen, nicht so eintönig.
    Das möchte ich bitte für die komplette App umgesetzt haben, die Vereinsfarben sollen
    wie bisher geändert werden können von jedem selber.“

   ── Warum eine eigene Datei ──────────────────────────────────────────────────────────

   Die App hat kein durchgehendes Stylesheet. `vereinsleben.css` liegt auf 14 Seiten, die
   grossen Bereiche (dashboard, profil, beiträge, statistik, termin …) bringen ihr Aussehen
   selbst mit. „Für die komplette App“ hiesse dort: dieselbe Regel in dreissig Dateien —
   und ab dem Tag danach dreissig Fassungen davon.

   Diese Datei enthält deshalb NUR das, was überall gleich sein soll: der Grund und die
   Höhe der Karten. Sie ergänzt, sie ersetzt nichts. Jede Seite behält ihr eigenes Layout.

   ── Warum `html body` und `html body .panel` ────────────────────────────────────────

   Nicht aus Vorliebe für lange Selektoren, sondern weil es sonst nicht wirkt: Fast jede
   Seite schreibt `body { background: … }` in ihrem eigenen <style>, und das steht im
   Quelltext NACH dem <link> auf diese Datei. Bei gleicher Gewichtung gewinnt das Spätere.
   `html body` wiegt eine Stufe mehr und gewinnt unabhängig von der Reihenfolge — so muss
   nicht in dreissig Dateien die Reihenfolge der Zeilen stimmen.

   ── Warum nichts fest eingetragen ist ───────────────────────────────────────────────

   „die Vereinsfarben sollen wie bisher geändert werden können von jedem selber“ — deshalb
   steht hier keine einzige Farbe. Alles ist aus den Variablen gemischt, die `welt.js` auf
   jeder Seite aus dem gespeicherten Farbschema setzt:

       --verein-primär       die Hauptfarbe des Vereins
       --verein-sekundär     die Zweitfarbe
       --verein-hintergrund  die Fläche (kann auch dunkel sein!)

   Ändert ein Verein seine Farbe, ändert sich Grund und Schatten mit. Ein festes Blau, wie
   es die Vorlage hatte, hätte genau diese Funktion entwertet.

   ── Und wenn ein Browser color-mix() nicht kennt ───────────────────────────────────

   Dann überliest er die betreffende Zeile. Vor jeder steht deshalb eine einfarbige, die
   ohne sie greift: Die Seite sieht dann aus wie vorher — nie kaputt, nur schlichter.
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* ── Der Grund ────────────────────────────────────────────────────────────────────────
   „verschwommen, nicht so eintönig“: vier weiche Farbwolken übereinander, keine mit einer
   erkennbaren Kante. Radiale Verläufe SIND unscharf — ein weicher Verlauf und ein
   weichgezeichneter Fleck sehen gleich aus. Der Unterschied liegt im Preis: filter:blur()
   kostet auf älteren Handys jedes Bild Rechenzeit, ein Verlauf wird einmal gemalt.

   Die Wolken sitzen absichtlich unregelmässig (18 %/4 %, 88 %/26 %, 45 %/70 %). Zwei
   symmetrische Flecken sehen aus wie ein Muster; drei versetzte sehen aus wie Licht.

   `fixed` hält sie beim Scrollen an ihrem Platz. Ohne das wandert beim Scrollen ein
   Farbfleck über den Bildschirm, und das lenkt genau dann ab, wenn jemand liest. */
html body {
  background: var(--verein-hintergrund, #F9F7F2);
  background:
    radial-gradient(760px 520px at 18% 4%,
      color-mix(in srgb, var(--verein-primär, #1B4D3E) 30%, transparent), transparent 72%),
    radial-gradient(680px 480px at 88% 26%,
      color-mix(in srgb, var(--verein-sekundär, #7A5230) 22%, transparent), transparent 70%),
    radial-gradient(900px 700px at 45% 70%,
      color-mix(in srgb, var(--verein-primär, #1B4D3E) 12%, transparent), transparent 75%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--verein-primär, #1B4D3E) 9%, var(--verein-hintergrund, #F9F7F2)) 0%,
      var(--verein-hintergrund, #F9F7F2) 62%);
  background-attachment: fixed;
  background-color: var(--verein-hintergrund, #F9F7F2);
}

/* ── Karten, die schweben ─────────────────────────────────────────────────────────────
   Drei Zutaten, und die dritte merkt man, ohne sie zu sehen:

     1. MEHRERE Schatten statt einem. Ein enger direkt unter der Karte — der Auflagepunkt
        — und ein weiter, weicher darunter, der den Raum macht. Ein einzelner Schatten
        sieht immer aus wie aufgeklebt; etwas, das wirklich Höhe hat, wirft beides.
     2. Eine helle Kante oben INNEN. Sie tut so, als käme das Licht von oben, und gibt der
        Karte damit eine Dicke, die sie nicht hat.
     3. Drei Prozent Verlauf in der Karte selbst, oben weiss, unten minimal getönt.

   Der weite Schatten trägt einen Hauch der Vereinsfarbe statt reinem Grau. Das ist der
   Unterschied zwischen „liegt auf dem Blatt“ und „gehört dazu“: Ein grauer Schatten auf
   einem farbigen Grund sieht immer schmutzig aus.

   `.panel` ist die Karte der App (rund neunzig Mal in Gebrauch), `.modul-kachel` die der
   Startseite, `.karte` kommt vereinzelt dazu.

   Am 2026-08-24 nachgetragen („website auch noch umsetzen“): `section.block` und `.ebene`
   von der öffentlichen Vereinsseite und `.feature-card` von der Werbeseite. Die drei sahen
   vorher anders aus als alles andere — und das war schwer zu begründen, wenn ein Verein
   von seiner Seite in die App wechselt. */
html body .panel,
html body .modul-kachel,
html body .karte,
html body section.block > .wrap,
html body .ebene,
html body .feature-card {
  border-radius: 18px;
  border: 1px solid var(--verein-linie, #DCD1B4);
  border: 1px solid color-mix(in srgb, var(--verein-linie, #DCD1B4) 30%, transparent);
  background: #fff;
  background: linear-gradient(#fff, color-mix(in srgb, var(--verein-primär, #1B4D3E) 3%, #fff));
  box-shadow:
    0 1px 2px rgba(33, 29, 25, .06),
    0 4px 8px rgba(33, 29, 25, .05),
    0 14px 28px -6px rgba(33, 29, 25, .10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1px 2px rgba(33, 29, 25, .06),
    0 4px 8px rgba(33, 29, 25, .05),
    0 14px 28px -6px color-mix(in srgb, var(--verein-primär, #1B4D3E) 22%, transparent);
}

/* Nur was anklickbar ist, hebt sich beim Darüberfahren. Ein Kasten, der auf die Maus
   reagiert und dann doch nichts tut, verspricht etwas, das er nicht hält. */
html body .modul-kachel,
html body a.karte,
html body a.ebene {
  transition: box-shadow .18s, transform .14s;
}
html body .modul-kachel:hover,
html body a.karte:hover,
html body a.ebene:hover {
  transform: translateY(-4px);
  box-shadow:
    0 2px 4px rgba(33, 29, 25, .07),
    0 8px 16px rgba(33, 29, 25, .06),
    0 26px 44px -8px rgba(33, 29, 25, .14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 2px 4px rgba(33, 29, 25, .07),
    0 8px 16px rgba(33, 29, 25, .06),
    0 26px 44px -8px color-mix(in srgb, var(--verein-primär, #1B4D3E) 30%, transparent);
}

/* Der Messingstrich links oben auf den Karten von Dashboard und Beiträgen entfällt in
   dieser Ansicht. Er war die Markierung „hier fängt eine Karte an“ und stammt aus der Zeit,
   als Karten rechteckig, weiss und randlos waren — da brauchte es etwas, das die obere
   Kante zeigte. Rundung, Schatten und Lichtkante tun das jetzt selbst, und ein gerader
   3-px-Balken auf einer gebogenen Kante sieht nicht nach Absicht aus, sondern nach
   Übriggebliebenem.

   Nicht aus den Seiten gelöscht, nur hier abgeschaltet: Wer diese Datei wegnimmt, bekommt
   das alte Aussehen vollständig zurück. */
html body .panel::before,
html body .feature-card::before {
  display: none;
}

/* ── Was die öffentliche Vereinsseite zusätzlich braucht ──────────────────────────────
   Dort sind die Abschnitte keine Karten, sondern Bänder über die ganze Breite, mit einer
   Haarlinie dazwischen; die Textbreite macht ein `.wrap` darin.

   Karte wird deshalb das `.wrap` und NICHT das Band: Sonst wäre die Karte so breit wie der
   Bildschirm, und auf einem grossen Monitor stünde eine riesige weisse Fläche mit einer
   schmalen Textspalte in der Mitte. Die Trennlinie am Band entfällt — die Karte ist jetzt
   selbst die Trennung. */
html body section.block {
  padding: 8px 0;
  border-bottom: none;
}
/* Der Kopfbereich der öffentlichen Seite (Name, Slogan, Ort) war eine weisse Bahn mit einer
   Trennlinie darunter. Auf dem getönten Grund sah das aus, als hörte die Seite dort auf und
   finge eine zweite an. Er wird durchsichtig und zeigt den Verlauf — das ist die Stelle, an
   der die Farbe des Vereins am meisten wirkt, gleich unter seinem Namen. */
html body .held {
  background: transparent;
  border-bottom: none;
}
html body section.block > .wrap {
  padding: 22px 24px;
  margin-bottom: 4px;
}
/* Die Ebenen-Kacheln („Zug gehört zu Bruderschaft“) waren schon Karten, nur eckiger und
   flacher. Sie brauchen nur den Innenabstand, der zur neuen Rundung passt. */
html body .ebene {
  padding: 14px 16px;
  margin-bottom: 10px;
}

/* Wer weniger will: Diese Klasse am <body> nimmt Grund und Höhe wieder zurück, ohne dass
   irgendwo Zeilen gelöscht werden müssen. Gedacht für den Fall, dass eine einzelne Seite
   den ruhigen Grund braucht — nicht als Schalter für Vereine. */
html body.schlicht {
  background: var(--verein-hintergrund, #F9F7F2);
}
html body.schlicht .panel,
html body.schlicht .modul-kachel,
html body.schlicht .karte {
  box-shadow: none;
  background: #fff;
}

/* ─────────────────────────────────────────────────────────────────────────────────────
   Der Kasten „gesperrt" / „läuft bald aus"  (web/abo-hinweis.js)
   ─────────────────────────────────────────────────────────────────────────────────────
   Gewünscht am 2026-09-01. Er steht ganz oben auf der Seite, auf der man nach dem
   Anmelden landet, und muss zweierlei gleichzeitig sein: nicht zu übersehen, und kein
   Sperrbildschirm — man soll ihn lesen und weiterarbeiten können.

   Deshalb bewusst NICHT in den Vereinsfarben: Ein Verein mit rotem Farbschema hätte
   sonst einen Hinweis, der aussieht wie der Rest der Seite. Die beiden Fälle tragen
   feste Farben — rot für „gesperrt", bernstein für „läuft aus" —, und zwar dieselben
   in jedem Verein, damit sie überall gleich gelesen werden.
   ───────────────────────────────────────────────────────────────────────────────────── */
html body .abo-hinweis {
  border-radius: 16px;
  padding: 16px 18px;
  margin: 0 0 14px;
  border: 1px solid;
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .35);
}
html body .abo-hinweis h2 {
  font-size: 16px;
  margin: 0 0 6px;
  line-height: 1.3;
}
html body .abo-hinweis p {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.45;
}
html body .abo-hinweis p:last-of-type { margin-bottom: 0; }

html body .abo-hinweis .abo-tun {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
}

/* Gesperrt — der Zugang ist weg, das darf ernst aussehen. */
html body .abo-gesperrt_zahlung,
html body .abo-gesperrt_betreiber {
  background: #fdf0f0;
  border-color: #e2b4b4;
  color: #6b1f2a;
}
html body .abo-gesperrt_zahlung .abo-tun,
html body .abo-gesperrt_betreiber .abo-tun { background: #8c2b38; }

/* Läuft aus — eine Vorwarnung, kein Alarm. */
html body .abo-laeuft_bald_aus {
  background: #fdf7e8;
  border-color: #e0c98b;
  color: #6a4e10;
}
html body .abo-laeuft_bald_aus .abo-tun { background: #8a6a15; }

/* Der Demo-Kasten (web/abo-hinweis.js). Eigene Farbe, damit er weder wie eine Sperre
   (rot) noch wie eine Warnung (bernstein) aussieht: Hier ist nichts kaputt und nichts
   fällig — es ist nur nichts echt. */
html body .abo-demo {
  background: #eef3f7;
  border-color: #a9c1d4;
  color: #21455e;
}
html body .abo-demo .abo-tun { background: #2c5c7d; }