/* UVD Vereinsseite — Richtung "Buehne".
   Aus dem Handoff "UVD Design System (9)" vom 14.08.2026 uebernommen
   (design/colors_and_type.css + design/stil.css), zusammengelegt zu einer
   Datei. Geaendert wurde genau eins:

   Die Vorlage bindet "Libre Franklin" als lokale Schriftdatei ein. Die Datei
   lag dem Paket nicht bei. Bis sie da ist, steht am Anfang des Stapels
   dieselbe Systemschrift wie unter /mv/ und /beitritt — dann sehen alle drei
   Strecken gleich aus statt zwei davon anders. Kommt die Schrift nach, wird
   hier ein @font-face ergaenzt und "Libre Franklin" vorangestellt; sonst
   aendert sich nichts.

   Farben ausschliesslich aus dem Farbsystem des Vereins. */

:root{
  --uvd-hellgruen:#CAFF96;
  --uvd-pastell:#EAF9DC;
  --uvd-dunkelgruen:#003A42;
  --uvd-schwarzgruen:#052024;
  --uvd-paper:#FAFBF7;
  --font-sans:"Franklin Gothic Medium","ITC Franklin Gothic Std",
              "Franklin Gothic","Segoe UI Semibold",-apple-system,
              BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#0A2A2E;color:var(--uvd-pastell);font-family:var(--font-sans);font-size:16px;line-height:1.55;letter-spacing:.01em}
.app{max-width:480px;margin:0 auto;background:var(--uvd-schwarzgruen);min-height:100vh;position:relative;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0;text-wrap:pretty}
h1,h2,h3{text-wrap:balance;font-weight:600;color:var(--uvd-pastell)}
.foto{filter:grayscale(1) contrast(1.08);object-fit:cover;width:100%}
.eyb{font-weight:500;font-size:10px;letter-spacing:.24em;text-transform:uppercase}
.dot{width:7px;height:7px;border-radius:50%;background:var(--uvd-hellgruen);display:inline-block;flex:none}
.pad{padding-left:22px;padding-right:22px}
.hr{height:1px;background:rgba(234,249,220,.16);border:0;margin:0}

/* Live-Leiste */
.live{display:flex;align-items:center;gap:9px;background:var(--uvd-dunkelgruen);color:var(--uvd-pastell);padding:11px 22px;font-size:12.5px}
.live b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.live a{margin-left:auto;color:var(--uvd-hellgruen);font-weight:500;white-space:nowrap;flex:none}

/* Kopf */
.hd{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;position:sticky;top:0;z-index:40;background:rgba(5,32,36,.86);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.hd.solo{background:transparent;position:absolute;left:0;right:0;top:0;border:0;backdrop-filter:none}
.hd img{height:15px}
.nav-btn{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;align-items:flex-end;background:none;border:0;padding:0;cursor:pointer;color:var(--uvd-pastell)}
.nav-btn i{display:block;height:1.5px;width:22px;background:currentColor;transition:transform .2s cubic-bezier(.2,.6,.2,1),opacity .12s}
.nav-open .nav-btn i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-open .nav-btn i:nth-child(2){opacity:0}
.nav-open .nav-btn i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* overflow-y:auto ist Pflicht, nicht Vorsicht: der Inhalt braucht 553px, ein
   iPhone SE mit sichtbaren Safari-Leisten hat 460px. Ohne Rollbalken ist der
   mfoot — also Beitrag und Aufnahmegebuehr — unerreichbar (gemessen 17.08.2026,
   Chromium und WebKit). */
.menu{position:fixed;inset:0;max-width:480px;margin:0 auto;background:var(--uvd-schwarzgruen);z-index:39;padding:88px 22px 32px;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;transition:opacity .2s cubic-bezier(.2,.6,.2,1),visibility .2s}
.nav-open .menu{opacity:1;visibility:visible}
.menu a.ml{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-top:1px solid rgba(234,249,220,.16);font-weight:600;font-size:22px;color:var(--uvd-pastell)}
.menu a.ml span{color:var(--uvd-hellgruen);font-size:16px}
.menu .btn{margin-top:auto}
.menu .mfoot{font-size:12px;color:rgba(234,249,220,.5);margin-top:18px;text-align:center}

/* Knopf */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;border-radius:999px;background:var(--uvd-hellgruen);color:var(--uvd-schwarzgruen);font-weight:600;font-size:15.5px;padding:12px 20px;line-height:1.2;text-align:center;transition:background .12s linear,transform .12s linear}
.btn:hover{background:color-mix(in oklab,#CAFF96,#003A42 8%)}
.btn:active{transform:scale(.98)}
.btn.geist{background:transparent;color:var(--uvd-pastell);border:1px solid rgba(234,249,220,.34)}
.btn.geist:hover{background:rgba(234,249,220,.08)}
.btn.tief{background:var(--uvd-schwarzgruen);color:var(--uvd-hellgruen)}
.btn.tief:hover{background:#0a2b30}

/* Bühne / Hero */
.buehne{position:relative;min-height:560px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--uvd-dunkelgruen)}
.buehne>.foto{position:absolute;inset:0;height:100%;object-position:95% 38%;filter:grayscale(1) contrast(1.12) brightness(.6)}
.buehne .tint{position:absolute;inset:0;background:rgba(5,32,36,.56)}
.buehne .txt{position:relative;padding:0 22px 34px}
.badge{display:inline-flex;align-items:center;white-space:nowrap;gap:8px;border:1px solid rgba(202,255,150,.5);border-radius:999px;padding:7px 13px;color:var(--uvd-hellgruen);margin-bottom:18px}
.buehne h1{font-size:38px;line-height:1.05;letter-spacing:-.02em}
.buehne h1 em{font-style:normal;color:var(--uvd-hellgruen)}
.buehne p{font-size:15px;color:rgba(234,249,220,.74);margin-top:14px}

/* Abschnitte */
.sec{padding:36px 22px;border-top:1px solid rgba(234,249,220,.16)}
.sec.first{border-top:0}
.sec>.eyb{color:var(--uvd-hellgruen);display:block;margin-bottom:12px}
.sec h2{font-size:27px;line-height:1.15}
.sec .sub{font-size:14.5px;color:rgba(234,249,220,.68);margin-top:10px}
.cta{padding:26px 22px 34px}
.fine{font-size:12px;color:rgba(234,249,220,.52);text-align:center;margin-top:12px}

.liste>div{padding:20px 0;border-top:1px solid rgba(234,249,220,.16)}
.liste>div:first-child{border-top:0;padding-top:22px}
.liste h3{font-size:19px;color:var(--uvd-hellgruen);margin-bottom:6px}
.liste p{font-size:14.5px;color:rgba(234,249,220,.68)}

.portrait .foto{height:360px;filter:grayscale(1) contrast(1.06) brightness(.82)}
.zitat{background:var(--uvd-dunkelgruen);padding:30px 22px 34px}
.zitat p{font-weight:500;font-size:21px;line-height:1.32;color:var(--uvd-pastell)}
.zitat .who{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--uvd-hellgruen);margin-top:16px}
.zitat .mehr{font-size:14px;color:rgba(234,249,220,.7);margin-top:16px}

/* Nächster LiveCall — präsent inkl. Anmeldung */
.next{background:var(--uvd-dunkelgruen);padding:32px 22px 36px;border-top:1px solid rgba(234,249,220,.16);scroll-margin-top:70px}
.next .kopf{display:flex;align-items:center;gap:9px;color:var(--uvd-hellgruen)}
.next .kopf .dot{animation:puls 2s cubic-bezier(.2,.6,.2,1) infinite}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.35}}
.next h2{font-size:28px;line-height:1.12;letter-spacing:-.015em;margin:14px 0 10px}
.next .wann{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.next .wann span{border:1px solid rgba(234,249,220,.28);border-radius:999px;padding:7px 13px;font-size:12.5px;color:rgba(234,249,220,.86)}
.next .wann span.hell{background:var(--uvd-hellgruen);border-color:var(--uvd-hellgruen);color:var(--uvd-schwarzgruen);font-weight:500}
.next .was{font-size:14.5px;line-height:1.6;color:rgba(234,249,220,.72)}
.uhr{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0 4px}
.uhr div{border:1px solid rgba(234,249,220,.18);border-radius:14px;padding:12px 6px;text-align:center}
.uhr b{display:block;font-weight:600;font-size:24px;line-height:1;letter-spacing:-.02em;color:var(--uvd-hellgruen);font-variant-numeric:tabular-nums}
.uhr span{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(234,249,220,.5);margin-top:7px}
.next .folgt{font-size:12.5px;color:rgba(234,249,220,.55);margin-top:16px}
.form{margin-top:22px;display:grid;gap:10px}
.form label{display:block}
.form .lb{font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:rgba(234,249,220,.6);margin-bottom:7px;display:block}
.form input{width:100%;min-height:52px;border-radius:14px;border:1px solid rgba(234,249,220,.28);background:rgba(234,249,220,.06);color:var(--uvd-pastell);font:400 16px/1.4 var(--font-sans);letter-spacing:.01em;padding:14px 16px;transition:border-color .12s linear,background .12s linear}
.form input::placeholder{color:rgba(234,249,220,.38)}
.form input:focus{outline:0;border-color:var(--uvd-hellgruen);background:rgba(234,249,220,.1)}
.form .btn{margin-top:6px}
.form .recht{font-size:11.5px;line-height:1.5;color:rgba(234,249,220,.5)}
.form .recht a{color:rgba(234,249,220,.75);text-decoration:underline;text-underline-offset:3px}
.danke{display:none;border:1px solid var(--uvd-hellgruen);border-radius:14px;padding:22px;margin-top:22px}
.danke h3{font-size:19px;color:var(--uvd-hellgruen);margin-bottom:8px}
.danke p{font-size:14px;line-height:1.55;color:rgba(234,249,220,.72)}
.next.gesendet .form{display:none}
.next.gesendet .danke{display:block}

/* Vereinsleben — Rhythmus */
.rhythm>div{display:grid;grid-template-columns:88px 1fr;gap:14px;padding:18px 0;border-top:1px solid rgba(234,249,220,.16)}
.rhythm .takt{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--uvd-hellgruen);padding-top:4px}
.rhythm h3{font-size:17px;color:var(--uvd-pastell);margin-bottom:5px}
.rhythm p{font-size:13.5px;line-height:1.55;color:rgba(234,249,220,.64)}
.zahlen{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(234,249,220,.16);border:1px solid rgba(234,249,220,.16);border-radius:14px;overflow:hidden;margin-top:22px}
.zahlen div{background:var(--uvd-schwarzgruen);padding:18px}
.zahlen b{display:block;font-weight:600;font-size:26px;line-height:1;letter-spacing:-.02em;color:var(--uvd-hellgruen);font-variant-numeric:tabular-nums}
.zahlen span{display:block;font-size:11.5px;line-height:1.4;color:rgba(234,249,220,.6);margin-top:8px}

/* Themen-Karten */
.themen{display:grid;gap:12px;margin-top:22px}
.thema{border:1px solid rgba(234,249,220,.18);border-radius:14px;padding:20px}
.thema h3{font-size:17px;color:var(--uvd-pastell);margin-bottom:6px}
.thema p{font-size:13.5px;line-height:1.5;color:rgba(234,249,220,.62)}

/* Mitgliedskarte */
.karte{background:var(--uvd-hellgruen);color:var(--uvd-schwarzgruen);border-radius:22px;padding:28px 24px;margin:0 22px}
.karte .eyb{color:rgba(5,32,36,.65)}
.karte .big{font-weight:600;font-size:54px;line-height:1;letter-spacing:-.03em;margin-top:12px}
.karte .sub{font-size:13.5px;color:rgba(5,32,36,.72);margin-top:8px}
.karte ul{list-style:none;margin:22px 0 24px;padding:0}
.karte li{display:grid;grid-template-columns:18px 1fr;gap:9px;font-size:14px;line-height:1.5;padding:11px 0;border-top:1px solid rgba(5,32,36,.16)}
.karte .fine{color:rgba(5,32,36,.6);margin-top:12px}

/* Ablauf */
.step{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:16px 0;border-top:1px solid rgba(234,249,220,.16)}
.step .n{font-weight:600;font-size:12px;letter-spacing:.14em;color:rgba(234,249,220,.42);padding-top:4px}
.step b{font-weight:500;font-size:16px;color:var(--uvd-hellgruen)}
.step p{font-size:13.5px;color:rgba(234,249,220,.62);margin-top:3px}

/* FAQ */
details{border-top:1px solid rgba(234,249,220,.16)}
details summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:14px;padding:17px 0;font-size:15px;font-weight:500;color:var(--uvd-pastell)}
details summary::-webkit-details-marker{display:none}
details summary span{color:var(--uvd-hellgruen);transition:transform .2s cubic-bezier(.2,.6,.2,1)}
details[open] summary span{transform:rotate(45deg)}
details p{font-size:14px;line-height:1.6;color:rgba(234,249,220,.68);padding:0 0 18px}

/* LiveCall- & Artikel-Einträge */
.call{border:1px solid rgba(234,249,220,.18);border-radius:14px;padding:20px;margin-top:12px}
.call .wann{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--uvd-hellgruen)}
.call h3{font-size:19px;margin:12px 0 6px}
.call p{font-size:13.5px;color:rgba(234,249,220,.64)}
.call .btn{margin-top:16px;min-height:46px;font-size:14px}
.artikel a{display:grid;grid-template-columns:1fr 16px;gap:10px;align-items:start;padding:18px 0;border-top:1px solid rgba(234,249,220,.16)}
.artikel .k{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(234,249,220,.5);font-weight:500}
.artikel h3{font-size:18px;line-height:1.25;margin:8px 0 5px}
.artikel p{font-size:13.5px;color:rgba(234,249,220,.62)}
.artikel a span{color:var(--uvd-hellgruen);padding-top:22px}
.leer{border:1px dashed rgba(234,249,220,.28);border-radius:14px;padding:24px;text-align:center;font-size:14px;color:rgba(234,249,220,.6)}

/* Tabelle */
.daten .r{display:grid;grid-template-columns:1fr auto;gap:14px;padding:14px 0;border-top:1px solid rgba(234,249,220,.16);font-size:14.5px}
.daten .k{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(234,249,220,.5);font-weight:500;align-self:center}
.daten .v{font-weight:500;color:var(--uvd-hellgruen);text-align:right}

.hinweis{background:var(--uvd-dunkelgruen);border-radius:14px;padding:20px;font-size:13.5px;line-height:1.6;color:rgba(234,249,220,.72);margin-top:20px}

/* Fuß */
.ft{padding:34px 22px 40px;border-top:1px solid rgba(234,249,220,.16);font-size:12px;line-height:1.65;color:rgba(234,249,220,.5)}
.ft img{height:13px;opacity:.85;margin-bottom:20px}
.ft .n{display:flex;flex-wrap:wrap;gap:14px 20px;margin-bottom:20px}
.ft .n a{color:var(--uvd-pastell);font-size:13.5px}
.ft .n a:hover{color:var(--uvd-hellgruen)}
.ft .rechts{margin-top:16px;font-size:11.5px;color:rgba(234,249,220,.38)}

/* Fixierte Beitritts-Leiste */
.bar{position:fixed;bottom:0;left:0;right:0;max-width:480px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:12px 18px calc(14px + env(safe-area-inset-bottom));background:rgba(0,58,66,.96);backdrop-filter:blur(12px);border-top:1px solid rgba(234,249,220,.14);z-index:38;transform:translateY(110%);transition:transform .32s cubic-bezier(.2,.6,.2,1)}
.bar.an{transform:none}
.bar .pr{font-size:12px;line-height:1.3;color:rgba(234,249,220,.68)}
.bar .pr b{display:block;font-weight:600;font-size:15px;color:var(--uvd-hellgruen)}
.bar .pr span{display:block;font-size:11px;color:rgba(234,249,220,.5)}
.bar .btn{margin-left:auto;min-height:46px;padding:12px 22px;font-size:14.5px}
.app{padding-bottom:0}
/* Die Sohle ist der Platzhalter der fixierten Leiste — sie muss genau so hoch
   sein wie die Leiste, sonst legt sich die Leiste ueber das Ende des Fusses
   (Vereinsregister, Anschrift). Seit die Aufnahmegebuehr in der Leiste steht
   (15.08.2026), ist die Leiste 91px hoch, mit Home-Indicator bis 125px — die
   festen 86px reichten nicht mehr. buehne.js misst die Leiste und setzt
   --barh; der Wert hier gilt, solange kein JavaScript laeuft. */
.sohle{height:var(--barh, calc(98px + env(safe-area-inset-bottom)))}

@media (min-width:481px){body{background:#0A2A2E}.app{box-shadow:0 0 80px rgba(0,0,0,.35)}}

/* --- Fliesstext eines Fachartikels ------------------------------------
   Die Artikel liegen als fertiges HTML im Bestand (h2/h3/p/ul/blockquote).
   Der Entwurf sieht dafuer nichts vor — er zeigt nur die Artikelliste.
   Deshalb hier die Regeln, in derselben Sprache wie der Rest der Seite. */
.fliess{margin-top:24px;font-size:15.5px;line-height:1.7;color:rgba(234,249,220,.78)}
.fliess h2{font-size:22px;line-height:1.2;margin:32px 0 10px;color:var(--uvd-hellgruen)}
.fliess h3{font-size:18px;line-height:1.25;margin:26px 0 8px;color:var(--uvd-pastell)}
.fliess p{margin:0 0 16px}
.fliess ul,.fliess ol{margin:0 0 18px;padding-left:20px}
.fliess li{margin:0 0 8px}
.fliess a{color:var(--uvd-hellgruen);text-decoration:underline;text-underline-offset:3px}
.fliess strong,.fliess b{color:var(--uvd-pastell);font-weight:600}
.fliess blockquote{margin:22px 0;padding:16px 18px;border-left:2px solid var(--uvd-hellgruen);
  background:var(--uvd-dunkelgruen);border-radius:0 14px 14px 0;font-size:15px}
.fliess img{border-radius:14px;margin:20px 0}
.fliess table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px;display:block;overflow-x:auto}
.fliess td,.fliess th{border-top:1px solid rgba(234,249,220,.16);padding:10px 8px;text-align:left}