/* Die Grundfarben stammen von der bestehenden Vereinsseite -- dort gemessen, nicht
   geschaetzt: Ueberschriften rgb(111,84,65), Flaeche rgb(248,244,241), Zweitton
   rgb(157,137,124). `--gruen` heisst weiterhin so, traegt aber jetzt das Braun: Der
   Name steht ueberall im Stil, und ihn umzubenennen haette nichts verbessert. */
:root{
  --papier:#F8F4F1; --karte:#FFFFFF; --flaeche2:#EFE8E2;
  --tinte:#411E06; --tinte2:#7D6D63; --linie:#E2D8D0;
  /* --tinte2 ist der Zweitton der alten Seite (#9D897C), etwas abgedunkelt:
     Im Original ergibt er auf dem Beige nur 3.0:1 und ist damit fuer kleinen
     Text zu schwach. #7D6D63 ist derselbe Farbton bei 4.5:1 -- die Anmutung
     bleibt, die Lesbarkeit stimmt. Bei einem Verein, dessen Auflage-Disziplinen
     ab 65 beginnen, ist das keine Formalie. */
  --gruen:#6F5441; --rot:#A8332A; --gold:#B08430; --auf-farbe:#FBF8F5;
  --r:10px;
}
/* Bewusst nur eine Fassung: Die Vereinsfarben sind die Marke, und ein Dunkelmodus
   faerbt sie um. `color-scheme: light` gehoert dazu -- ohne das faerbt der Browser auf
   einem dunkel gestellten Geraet weiterhin Formularfelder, Rollbalken und Auswahllisten
   dunkel ein, und dann stehen dunkle Eingabefelder auf hellem Grund. */
:root{ color-scheme: light }

*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--tinte);
     font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif;font-size:16.5px;
     line-height:1.62}
h1,h2,h3{font-family:Bitter,Georgia,serif;text-wrap:balance;letter-spacing:-.005em}
h1{font-size:clamp(1.9rem,5vw,2.8rem);line-height:1.06;margin:0 0 14px;font-weight:800}
h2{font-size:clamp(1.25rem,3.2vw,1.65rem);line-height:1.16;margin:0 0 12px;font-weight:700}
h3{font-size:1.05rem;margin:0 0 6px;font-weight:700}
p{margin:0 0 14px;max-width:68ch}
a{color:var(--gruen)}
ul,ol{margin:0 0 14px;padding-left:20px;max-width:66ch}
li{margin-bottom:5px}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.87em;
     background:var(--flaeche2);padding:1px 5px;border-radius:4px}
.neben{font-size:.85rem;color:var(--tinte2)}
/* Das Layout nutzt die Breite -- Banner, Kacheln, Tabellen und der Kalender laufen bis
   an den Rand. Der Fliesstext tut das bewusst nicht (siehe `p`): Eine Zeile ueber die
   volle Breite eines grossen Schirms liest niemand zu Ende. */
.huelle{width:100%;padding:0 clamp(16px,3vw,48px)}
/* Wo laengerer Text steht, wird die Spalte eingezogen -- nicht die ganze Seite. */
.lesespalte{max-width:74ch}

/* ── Die naechste Seite schiebt sich seitlich herein ──
   Rene: "kommt auch bei den anderen immer gut an." Frueher brauchte es dafuer ein
   Skript, das die Seite nachlaedt und selbst animiert. Heute macht es der Browser beim
   ganz normalen Seitenwechsel. Wo er es nicht kann, wechselt die Seite schlicht -- es
   geht nichts kaputt, es ist nur weniger huebsch. */
@view-transition{ navigation:auto }
@keyframes rein-von-rechts{ from{ transform:translateX(26px); opacity:0 } }
@keyframes raus-nach-links{ to{ transform:translateX(-16px); opacity:0 } }
::view-transition-old(root){ animation:raus-nach-links .22s ease both }
::view-transition-new(root){ animation:rein-von-rechts .3s ease both }
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),::view-transition-new(root){ animation:none }
}

/* ── Entwurfsband: Die Seite sieht aus wie die echte. Ohne diesen Streifen
      waere das eine Verwechslung, die man selbst herbeigefuehrt hat. ── */
.entwurfsband{background:var(--rot);color:#fff;font-size:.83rem;padding:7px 0}
.entwurfsband .huelle{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.entwurfsband b{font-family:Bitter,Georgia,serif;letter-spacing:.1em;
                text-transform:uppercase;font-size:.72rem}
.entwurfsband a{color:#fff}

/* ── Neuigkeiten-Band ── */
.ticker{background:var(--gruen);color:var(--auf-farbe);font-size:.89rem;padding:8px 0}
.ticker .huelle{display:flex;gap:12px;align-items:baseline}
.ticker b{font-family:Bitter,Georgia,serif;font-size:.72rem;letter-spacing:.12em;
          text-transform:uppercase;flex:0 0 auto;opacity:.85}
.ticker .lauf{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ticker a{color:var(--auf-farbe)}

/* ── Kopf ── */
header{background:linear-gradient(180deg,var(--flaeche2),var(--papier));
       border-bottom:1px solid var(--linie)}
/* Die alte Kopfzeile mit kleinem Logo, Vereinsname und Spartenzeile ist entfallen:
   Der Name stand dreimal untereinander -- gezeichnet im Logo, als Ueberschrift daneben
   und als Zeile darunter. Das Logo traegt ihn selbst. */
nav.menue{display:flex;flex-wrap:wrap;gap:6px 26px;font-size:1.2rem;font-weight:600;
          padding-bottom:16px;line-height:1.35}
nav.menue a{text-decoration:none;color:var(--tinte);padding:4px 0;
            border-bottom:2px solid transparent}
nav.menue a:hover{border-bottom-color:var(--linie)}
nav.menue a.an{border-bottom-color:var(--rot)}
nav.menue .rechts{margin-left:auto;display:flex;gap:16px;font-weight:400;
                  align-items:baseline}
/* Die Nebenpunkte bleiben kleiner: Sie sind nachgeordnet, und wenn alles gleich
   gross ist, ist nichts mehr betont. */
nav.menue .rechts a{color:var(--tinte2);font-size:1rem}

main{padding:clamp(26px,5vw,46px) 0 60px}
section{margin-bottom:clamp(30px,5vw,50px)}

/* ── Bausteine ── */
.gitter{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);
       padding:17px 19px}
.karte p:last-child{margin-bottom:0}
.karte.rand{border-top:3px solid var(--sf,var(--gruen))}
a.karte{text-decoration:none;color:inherit;display:block}
a.karte:hover{border-color:var(--sf,var(--gruen))}
.karte .mehr{font-size:.85rem;font-weight:600;color:var(--sf,var(--gruen))}

.hero{display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:780px){ .hero{grid-template-columns:1.3fr .7fr} }
@media(min-width:1200px){ .hero{gap:38px} }

.platzhalter{border:1px dashed var(--rot);border-radius:var(--r);padding:13px 15px;
             background:var(--flaeche2);font-size:.88rem;color:var(--tinte2)}
.platzhalter b{color:var(--rot);font-family:Bitter,Georgia,serif;font-size:.72rem;
               letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:3px}

.rahmen{width:100%;border:1px solid var(--linie);border-radius:var(--r);background:var(--karte)}

table{border-collapse:collapse;width:100%;font-size:.92rem}
.rollt{overflow-x:auto;border:1px solid var(--linie);border-radius:var(--r);
       background:var(--karte)}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--linie);
      vertical-align:top}
th{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tinte2);
   font-weight:700;white-space:nowrap}
tr:last-child td{border-bottom:0}

.knopf{display:inline-block;border:0;border-radius:7px;padding:10px 17px;font-weight:700;
       font-size:.93rem;background:var(--gruen);color:var(--auf-farbe);
       font-family:inherit;cursor:pointer;text-decoration:none}
.knopf.leise{background:transparent;color:var(--tinte);border:1px solid var(--linie)}
.knopf.paypal{background:var(--gold);color:#1B1403}
label{display:block;margin-bottom:12px;font-size:.9rem;font-weight:600}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--linie);border-radius:7px;
  background:var(--karte);color:var(--tinte);font:inherit;font-weight:400;margin-top:4px}
.zweispalt-form{display:grid;gap:0 16px;grid-template-columns:1fr}
@media(min-width:620px){ .zweispalt-form{grid-template-columns:1fr 1fr} }

/* ── Das echte Logo im Kopf ── */
/* ── Fahnenband: links und rechts die beiden Seiten der Vereinsfahne, in der Mitte
   das Logo. Auf schmalen Schirmen umgestellt -- drei Bilder nebeneinander waeren auf
   375 px alle drei unkenntlich. */
/* Die Fahnen werden ueber die BREITE bemessen, nicht ueber die Hoehe. Beide bekommen
   dieselbe feste Breite, damit sind die Aussenteile per Konstruktion gleich und das
   Logo sitzt in der Mitte -- ohne dass ein Raster etwas ausrechnen muss. Ueber `height`
   bemessen haengt die Breite dagegen am Bildinhalt, und dann kaempft jedes Raster
   gegen sie an (gemessen: erst 42 px daneben, dann 160).
   Beide Bilder haben dasselbe Seitenverhaeltnis (900x1200), also stimmt die Hoehe
   von selbst. */
.fahnenband{display:flex;align-items:center;justify-content:center;
            gap:clamp(12px,3vw,46px);padding:clamp(10px,1.6vw,20px) 0}
.fahne{width:clamp(78px,11vw,158px);height:auto;flex:0 0 auto;border-radius:6px;
       box-shadow:0 5px 18px rgba(55,44,36,.16)}
.grosslogo{width:100%;max-width:440px;height:auto;display:block}
.fahnenmitte{text-align:center;text-decoration:none;color:inherit;display:block;
             flex:0 1 auto;min-width:0}
@media(max-width:640px){
  /* Auf schmalen Schirmen waeren drei Bilder nebeneinander alle drei unkenntlich:
     Logo nach oben, die beiden Fahnenseiten darunter nebeneinander -- so bleibt der
     Vergleich Vorder- zu Rueckseite erhalten, um den es geht. */
  .fahnenband{flex-wrap:wrap}
  .fahnenmitte{order:-1;flex:1 0 100%}
  .fahne{width:min(42%,190px)}
}
}

.bild{display:block;width:100%;height:auto;border-radius:var(--r);
      border:1px solid var(--linie)}

/* ── Vorstandskacheln zum Umdrehen ──
   Bei Wix ein kostenpflichtiges Add-on, hier zwanzig Zeilen CSS. Umgedreht wird per
   Klick (Klasse `um`), nicht beim Darueberfahren: Auf dem Handy gibt es kein
   Darueberfahren, und eine Kachel, die sich nur am Schreibtisch oeffnen laesst, ist
   keine. */
.kacheln{display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.kachel{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
        perspective:1000px;height:296px;text-align:left}
/* display:block ist hier keine Kosmetik: .blatt ist ein <span>, und bei einem
   Zeilenelement wirken width und height nicht -- die Kachel blieb dann so gross wie
   ihr Inhalt und die drehenden Seiten schrumpften mit. */
.kachel .blatt{display:block;position:relative;width:100%;height:100%;
               transition:transform .65s cubic-bezier(.4,.2,.2,1);
               transform-style:preserve-3d}
.kachel.um .blatt{transform:rotateY(180deg)}
.kachel .vorn,.kachel .hinten{position:absolute;inset:0;backface-visibility:hidden;
        border:1px solid var(--linie);border-radius:var(--r);padding:15px 16px;
        background:var(--karte);display:flex;flex-direction:column;justify-content:flex-end;
        overflow:hidden}
.kachel .hinten{transform:rotateY(180deg);background:var(--flaeche2);
                justify-content:flex-start;font-size:.86rem;color:var(--tinte2);
                overflow-y:auto}
/* Die inneren Elemente sind <span> -- ohne `display:block` bleiben sie Zeilenelemente,
   und dann stimmen im Flex-Kasten weder Umbrueche noch Abstaende. */
.kachel .vorn>*,.kachel .hinten>*{display:block}
/* Fotokachel: Das Bild fuellt die Vorderseite, Name und Amt liegen in einem Verlauf
   darauf. Der Verlauf ist nicht Dekoration, sondern das, was den Text auf einem
   beliebigen Foto lesbar haelt. */
.kachel .vorn.mitfoto{padding:0}
.kachel .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
              object-position:center 22%}
.kachel .verlauf{position:relative;padding:40px 15px 14px;color:#fff;
                 background:linear-gradient(to top,rgba(12,14,10,.88),rgba(12,14,10,.55) 55%,transparent)}
.kachel .verlauf .kname{color:#fff}
.kachel .verlauf .kamt{color:rgba(255,255,255,.82)}
.kachel .verlauf .dreh{color:rgba(255,255,255,.7)}
.kachel .initialen{font-family:Bitter,Georgia,serif;font-size:1.95rem;font-weight:800;
                   color:var(--gruen);line-height:1;margin-bottom:auto}
.kachel .kname{font-family:Bitter,Georgia,serif;font-weight:700;font-size:1rem;
               line-height:1.25;margin-bottom:2px}
.kachel .kamt{font-size:.85rem;color:var(--tinte2);line-height:1.35}
.kachel .dreh{font-size:.7rem;color:var(--tinte2);margin-top:8px;letter-spacing:.06em;
              text-transform:uppercase;opacity:.8}
@media (prefers-reduced-motion: reduce){ .kachel .blatt{transition:none} }

footer{border-top:1px solid var(--linie);background:var(--flaeche2);
       padding:26px 0 34px;font-size:.87rem;color:var(--tinte2)}
footer .spalten{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
footer a{color:var(--gruen)}
footer h3{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte2);
          margin-bottom:7px}