/* Die Farben sind seit dem 23.10.2026 die der Festseiten (Aktuell, Herr Müller, Wissen auf
   event.sg-tell-wolfegg.de), die schon in der Wix-Seite stecken -- René: „das sollten wir auch hier
   tun“. Damit sieht eine eingebettete Festseite aus wie der Rest. Das Grün #1f5a2a ist zugleich das
   Dunkelgrün der Wix-Seite. Fläche bleibt #F8F4F1 wie bisher. Vorher stand hier Braun (#6F5441),
   gemessen im September auf der damaligen Wix-Seite.
   Lesbarkeit auf #F8F4F1: Text #1d2a1f 14:1, Grün 7,5:1, Zweitton #5b6a5e 5,3:1. */
:root{
  --papier:#F8F4F1; --karte:#FFFFFF; --flaeche2:#eaf3de;
  --tinte:#1d2a1f; --tinte2:#5b6a5e; --linie:#dfe3d5;
  --gruen:#1f5a2a; --rot:#a32d2d; --gold:#e3b62e; --gold-dunkel:#8a6512; --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}
/* 18 px statt 16,5: Bei einem Verein, dessen Auflage-Disziplinen ab 65 Jahren
   beginnen, ist eine gut lesbare Grundschrift keine Kosmetik. Die Zeilenhoehe waechst
   mit -- groessere Schrift in engen Zeilen wirkt gedraengt statt lesbarer. */
body{margin:0;background:var(--papier);color:var(--tinte);
     font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif;font-size:18px;
     line-height:1.6}
h1,h2,h3{font-family:Bitter,Georgia,serif;text-wrap:balance;letter-spacing:-.005em}
/* Ueberschriften gruen wie auf den Festseiten */
h1,h2{color:var(--gruen)}
h1{font-size:clamp(1.9rem,5vw,2.8rem);line-height:1.06;margin:0 0 26px;font-weight:800}
h2{font-size:clamp(1.25rem,3.2vw,1.65rem);line-height:1.16;margin:0 0 18px;font-weight:700}
h3{font-size:1.05rem;margin:0 0 6px;font-weight:700}
/* 92 Zeichen statt 68: "Ganze Breite" soll spuerbar breit sein, sonst verspricht die
   Einstellung etwas, das nicht eintritt. Ganz ohne Grenze waeren es auf einem breiten
   Schirm ueber 140 Zeichen je Zeile -- dann findet das Auge beim Umbruch den naechsten
   Zeilenanfang nicht mehr, und man liest dieselbe Zeile zweimal. */
p{margin:0 0 16px;max-width:92ch}
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 }

/* Was auf jeder Seite gleich ist, bleibt stehen (René, 28.10.2026: „Die Seite läd das
   ganze Menü und den Seitenkopf immer mit."). Ein Element mit demselben Namen auf alter
   und neuer Seite erkennt der Browser wieder und bewegt es nicht. Ohne diese Namen galt
   die ganze Seite als ein Block -- Kopf samt Fahnen und Logo schoben bei jedem Klick mit.
   Jeder Name darf je Seite nur EINMAL vorkommen, sonst schaltet der Browser den Übergang
   stillschweigend ab; alle drei Elemente hier gibt es genau einmal. */
.entwurfsband{ view-transition-name: band-entwurf }
.ticker-band { view-transition-name: band-ticker }
header       { view-transition-name: seitenkopf }

/* Überblenden statt schieben. Solange der Kopf mitwanderte, trug das Schieben die
   Bewegung; jetzt, wo er steht, liefe der Inhalt darunter weg -- unruhiger als vorher.
   Herein etwas länger als hinaus: Ein schnelles Verschwinden verzeiht das Auge, ein
   hartes Erscheinen nicht. */
@keyframes seite-ein{ from{ opacity:0 } }
@keyframes seite-aus{ to{ opacity:0 } }
::view-transition-old(root){ animation:seite-aus .14s ease both }
::view-transition-new(root){ animation:seite-ein .26s ease both }

/* Firefox kennt `@view-transition` noch nicht und überspringt alles davon. Damit der
   Wechsel dort nicht nackt bleibt, blendet wenigstens der Inhalt ein. */
@supports not (view-transition-name: none){
  main{ animation:seite-ein .26s ease-out both }
}

/* Wer Bewegung abgestellt hat, bekommt keine -- auch nicht im Fallback. */
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),::view-transition-new(*){ animation:none !important }
  main{ animation:none !important }
}

/* ── 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}
/* News-Ticker unter dem Entwurfsband (28.10.2026) -- die Laufschrift bringt ihren Kasten selbst mit */
.ticker-band{padding:8px 0 0}
.ticker-band iframe{display:block;width:100%;height:58px;border:0;background:transparent}
.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. */
/* Genauso gross wie der Fliesstext, nicht groesser: Ein Menue, das den Text
   ueberragt, den es erschliesst, dreht die Rangfolge um. */
/* 18px, nicht 1rem: Die Einheit rem bezieht sich auf die Grundgroesse des
   Browsers (16px), nicht auf die der Seite -- damit waere das Menue kleiner als
   der Text statt gleich gross. Bei vierzehn Punkten kann es auf schmalen Schirmen
   zweizeilig werden; der Abstand nach unten ist entsprechend bemessen. */
nav.menue{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:18px;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(--gold)}
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}
/* Untermenues: Hauptpunkt + kleiner Pfeil, darunter eine Karte mit den Unterpunkten;
   die zweite Unterebene steht eingerueckt in derselben Karte. */
nav.menue .mp{position:relative;display:inline-flex;align-items:baseline;gap:2px}
nav.menue .auf{border:0;background:none;font:inherit;font-size:14px;color:var(--tinte2);
  cursor:pointer;padding:4px 6px;line-height:1;border-radius:6px}
nav.menue .auf:focus-visible{outline:2px solid var(--gruen)}
nav.menue .unter{display:none;position:absolute;left:-14px;top:100%;z-index:30;flex-direction:column;
  min-width:230px;padding:8px 0;background:var(--karte);border:1px solid var(--linie);
  border-radius:var(--r);box-shadow:0 12px 30px rgba(65,30,6,.16)}
nav.menue .mp:hover .unter,nav.menue .mp:focus-within .unter,nav.menue .mp.offen .unter{display:flex}
nav.menue .unter a{border:0;padding:9px 18px;font-size:16px;white-space:nowrap}
nav.menue .unter a:hover{background:var(--flaeche2)}
nav.menue .unter a.e3{padding-left:34px;font-weight:400;font-size:15px}

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],input[type=password],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}
.fuss-recht{margin:18px 0 0;font-size:.85rem}
.sozial{display:flex;gap:12px;margin:20px 0 0}
.sozial a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
          background:var(--gruen);color:#fff}
.sozial a:hover{background:#163f1e}
.sozial svg{width:22px;height:22px}
/* Interner Bereich (26.10.2026) */
.b-intern{max-width:900px}
.b-intern h2{margin-top:26px}
.i-mitteilung{border-left:4px solid var(--gold);background:var(--karte);border-radius:var(--r);padding:12px 16px;margin-bottom:10px}
.i-mitteilung p:last-of-type{margin-bottom:4px}
.i-termin{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);padding:10px 14px;margin-bottom:8px}
.i-ordner{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);padding:4px 14px;margin-bottom:8px}
.i-ordner>summary{cursor:pointer;min-height:48px;display:flex;align-items:center;gap:6px;font-weight:700}
.i-datei{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:8px 0;border-top:1px solid var(--linie)}
.i-datei>a:first-child{flex:1 1 260px}
/* Kacheln und echte Knöpfe (29.10.2026) */
.b-intern{max-width:1100px}
.i-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:18px;margin-top:14px}
.i-kachel{background:var(--karte);border:1px solid var(--linie);border-radius:12px;padding:6px 18px 18px;
          box-shadow:0 1px 3px rgba(0,0,0,.06);min-width:0}
.i-kachel.i-breit{grid-column:1/-1}
.i-kachel>h2{margin-top:12px}
.i-kachel .i-mitteilung,.i-kachel .i-termin,.i-kachel .i-ordner{background:#FAF8F2}
.i-neu{margin:10px 0 4px}
.i-neu>summary{display:inline-flex;align-items:center;min-height:46px;padding:8px 16px;border-radius:7px;cursor:pointer;
               background:var(--gruen);color:var(--auf-farbe,#fff);font-weight:700;list-style:none;user-select:none}
.i-neu>summary::-webkit-details-marker{display:none}
.i-neu>summary:hover{filter:brightness(1.12)}
.i-neu[open]>summary{background:transparent;color:var(--gruen);border:1px solid var(--gruen)}
.i-neu[open]>form{margin-top:12px}
.b-intern .knopf.leise{background:#EEF4EE;color:var(--gruen);border:1px solid #B5CBB5;
                       box-shadow:0 1px 0 rgba(0,0,0,.08);min-height:40px;display:inline-flex;align-items:center}
.b-intern .knopf.leise:hover{background:#DFEBDF}
.b-intern .knopf.gefahr{background:#FBEFED;color:#9B2C1F;border-color:#E3C3BD}
.b-intern .knopf.gefahr:hover{background:#F6DEDA}
.i-schritte{margin:8px 0 10px 20px;padding:0}
.i-schritte li{margin:4px 0}
.i-vorstand{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:1px 7px;border-radius:10px;
            background:#F3E7C7;color:#6B4E00;margin-right:4px}
.i-vorstandsbereich{border:2px solid #D9C27A;background:#FFFBEF}
.i-freigabe{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.i-freigabe select{width:auto;margin:0;padding:4px 6px;font-size:.85rem}
.i-haken{display:flex!important;gap:8px;align-items:center;font-weight:400}
.i-telegram{margin-top:14px;padding:10px 14px;border:1px solid var(--linie);border-radius:var(--r);background:#F2F7FB}
.i-telegram p{margin:4px 0 10px}
.knopf.klein{padding:6px 11px;font-size:.85rem}
/* Karte (26.10.2026): Bild ueber die volle Blockbreite, darunter Adresse und zwei grosse Knoepfe */
.b-karte figure{margin:0}
.b-karte img{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--linie)}
.b-karte figcaption{font-size:.75rem;color:var(--tinte2);text-align:right;margin-top:4px}
.b-karte address{font-style:normal;margin:10px 0 12px}
.karte-knoepfe{display:flex;gap:10px;flex-wrap:wrap}
.karte-knoepfe .knopf{min-height:48px;display:inline-flex;align-items:center}
/* Freie Formulare (26.10.2026): zwei Spalten fuer Felder mit „halber Breite“, sonst ganze Zeile. Ankreuzfelder
   gross genug zum Treffen, Fehlermeldung rot unter dem Knopf, Danke-Text an Stelle des Formulars. */
.b-formular{max-width:760px}
.ff-felder{display:grid;gap:0 16px;grid-template-columns:1fr}
@media(min-width:620px){ .ff-felder{grid-template-columns:1fr 1fr} }
.ff-feld{grid-column:1/-1}
.ff-feld.ff-schmal{grid-column:auto}
.ff-hinweis{display:block;font-weight:400;font-size:.85rem;color:var(--tinte2)}
.ff-pflicht{color:var(--rot)}
.ff-haken{display:flex;gap:10px;align-items:flex-start;font-weight:400;min-height:44px}
.ff-haken input{width:22px;height:22px;margin-top:3px;flex:0 0 auto}
input[type=date],input[type=number]{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}
.ff textarea{min-height:150px;resize:vertical}
.ff .knopf{min-height:48px;font-size:1rem}
.ff-fang{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ff-legende{margin:0 0 12px}
.ff-meldung{margin:12px 0 0;font-weight:600}
.ff-meldung:empty{display:none}
.ff-fehler{color:var(--rot)}
.ff-danke{border:1px solid var(--linie);border-left:4px solid var(--gruen);border-radius:var(--r);
          background:var(--flaeche2);padding:14px 16px;font-weight:600;max-width:760px;white-space:pre-line}
.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 (seit 26.10.2026 quer, 1159x679), also
   stimmt die Hoehe von selbst. Am selben Tag um 25 % groesser (René: „die Fahnen 25
   vergroessern“), weil sie quer kleiner wirkten. Auf dem Handy unveraendert. */
.fahnenband{display:flex;align-items:center;justify-content:center;
            gap:clamp(12px,3vw,46px);padding:clamp(10px,1.6vw,20px) 0;
            /* René, 26.10.2026: Fahnen „oben und unten mit dem Logo in der Mitte gleich“. Die Fahnenbreite haengt
               deshalb an der Logobreite: Logo 900x344, Fahnen 1159x679 -> gleich hoch bei Fahne = 0,6524 x Logo.
               Das Logo nimmt hoechstens 440 px und so viel, dass Logo + zwei Fahnen + Abstaende in die Zeile passen
               (2,305 Logobreiten plus Rand). Neue Bilder mit anderem Seitenverhaeltnis: Faktor nachrechnen. */
            --logo-b:min(440px,calc((100vw - 150px) / 2.31))}
.fahne{width:calc(var(--logo-b) * .6524);height:auto;flex:0 0 auto;border-radius:6px;
       box-shadow:0 5px 18px rgba(55,44,36,.16)}
.grosslogo{width:var(--logo-b);max-width:100%;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)}
  .grosslogo{width:100%;max-width:440px}
}
}

.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. */
/* Feste Stufen statt auto-fit: Bei acht Personen wuerde auto-fit je nach
   Fensterbreite eine Reihe mit fuenf und eine mit drei ergeben. Eine auf dem Handy,
   zwei auf dem grossen Handy, drei auf dem Tablet, vier am Schreibtisch.
   Auf dem Handy stand hier lange ein Paar nebeneinander. Das ging, solange alle
   Beschreibungen kurz waren -- seit die Kachel mit ihrem Text waechst, zieht eine
   lange Vorstellung die Nachbarkachel mit: gemessen 537 px Hoehe bei 164 px Breite,
   und aus einem Portraitfoto wird ein Streifen, auf dem man niemanden erkennt.
   Ueber die volle Breite braucht derselbe Text nur 294 px und passt damit in die
   Mindesthoehe. */
/* Höchstens 230 px breit (René, 28.10.2026: „die Größe der einzelnen Kachel etwas kleiner machen. Die erschlagen einen“) --
   vorher teilten sich vier Kacheln die ganze Breite, auf einem breiten Schirm 361 × 570 px je Person. */
.kacheln{display:grid;gap:15px;grid-template-columns:repeat(2,minmax(0,1fr))}
/* So viele nebeneinander, wie ins Fenster passen, und die Reihe immer bis zum Rand gefüllt (René, 28.10.2026: „Es sollten
   alle wechseln und sich dem Monitorfenster anpassen. Die Länge der Kacheln ist perfekt“) -- jede mindestens 210 px, der
   Rest wird verteilt; leere Spalten fallen weg (auto-fit), damit rechts nichts frei bleibt. Auf dem Handy fest zwei. */
/* Nachgezogen (René: „sobald eine Kachel nach unten springt, werden die anderen Kacheln wieder größer“): Die Kachel hat
   immer dieselbe Breite, der übrige Platz geht in die Abstände -- so bleibt die Reihe gefüllt, ohne dass die Größe springt. */
@media(min-width:560px){ .kacheln{grid-template-columns:repeat(auto-fit,236px);justify-content:space-between;row-gap:18px} }
.kachel{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
        perspective:1000px;text-align:left;display:block;width:100%}
.kachel.ohne{cursor:default}
/* Vorder- und Rückseite liegen im selben Rasterfeld übereinander; die höhere gibt die Höhe vor. Die Vorderseite hat
   ein festes Hochformat (Foto 3:4, darunter Name und Amt) -- so bleiben Köpfe drin, egal wie breit der Bildschirm
   ist (25.10.2026; vorher war die Kachel auf breiten Schirmen quer und das Hochformat-Foto darin riesig). */
.kachel .blatt{display:grid;position:relative;width:100%;
               transition:transform .65s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
.kachel.um .blatt{transform:rotateY(180deg)}
.kachel .vorn,.kachel .hinten{grid-area:1/1;position:relative;backface-visibility:hidden;
        border:1px solid var(--linie);border-radius:var(--r);background:var(--karte);
        display:flex;flex-direction:column;overflow:hidden}
.kachel .hinten{transform:rotateY(180deg);background:var(--flaeche2);padding:15px 16px;
                font-size:.86rem;color:var(--tinte2);overflow-y:auto}
/* Die Rückseite bestimmt die Höhe nicht mit (28.10.2026): Mit kleineren Kacheln wurde eine Kachel mit langem Text so hoch
   wie dieser Text, und vorne blieb unter dem Foto eine leere Fläche. Jetzt liegt sie genau über der Vorderseite und
   scrollt, wenn der Text länger ist. */
.kachel .hinten{position:absolute;inset:0}
/* Die inneren Elemente sind <span> -- ohne display:block bleiben sie Zeilenelemente. */
.kachel .vorn>*,.kachel .hinten>*,.kachel .unter>*{display:block}
.kachel .fotorahmen{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--flaeche2)}
/* Größe und Lage stehen als style am Bild (person_bild_stil); ohne Einstellung das ganze Foto. */
.kachel .foto{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover}
.kachel .fotorahmen.ohnefoto{display:flex;align-items:center;justify-content:center}
.kachel .unter{padding:11px 14px 12px;flex:1}
.kachel .mehr{margin-top:8px}
.kachel .mehr .absatz{display:block}
.kachel .mehr .absatz + .absatz{margin-top:6px}
.kachel .initialen{font-family:Bitter,Georgia,serif;font-size:2.6rem;font-weight:800;color:var(--gruen);line-height:1}
.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}


/* ═══════════════════════════════════════ Handy: eigene Fassung, nicht nur enger ═══ */

.nur-klein{display:none}
@media(max-width:760px){
  .nur-gross{display:none !important}
  .nur-klein{display:block}
}

/* Klappmenue: <details> statt eines Skripts -- das funktioniert auch dann, wenn sonst
   nichts laedt. Jeder Eintrag ist 48 px hoch, damit man ihn mit dem Daumen trifft. */
.klappmenue{margin:0 0 12px}
.klappmenue summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:9px;min-height:48px;padding:0 4px;font-weight:700;font-size:1.1rem;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.klappmenue summary::-webkit-details-marker{display:none}
.klappmenue summary::before{content:"≡";font-size:1.5rem;line-height:1}
.klappmenue[open] summary::before{content:"×";font-size:1.5rem;line-height:1}
.klappliste{display:flex;flex-direction:column;padding:6px 0 10px}
.klappliste a{min-height:48px;display:flex;align-items:center;padding:0 6px;
  text-decoration:none;color:var(--tinte);font-weight:600;font-size:1.05rem;
  border-bottom:1px solid var(--linie)}
.klappliste a.leise{color:var(--tinte2);font-weight:400;font-size:.95rem}
.klappliste a.e2{padding-left:24px;font-weight:500;font-size:1rem}
.klappliste a.e3{padding-left:44px;font-weight:400;font-size:.95rem}

/* Tabellen werden auf dem Handy zu Karten. Vier Spalten auf 375 px sind entweder
   unlesbar klein oder man schiebt sie seitwaerts -- beides ist Mist. */
.t-karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);
  padding:13px 15px;margin-bottom:10px}
.t-karte h3{margin:0 0 8px;color:var(--gruen)}
.t-feld{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:4px 0;
  border-top:1px solid var(--linie)}
.t-feld dt{font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tinte2);font-weight:700;margin:0}
.t-feld dd{margin:0;font-weight:600}

/* Zwei Bloecke nebeneinander. Auf dem Handy untereinander -- zwei Spalten auf 375 px
   sind keine zwei Spalten, sondern zwei zu schmale. */
.paar{display:grid;gap:clamp(20px,3.5vw,40px);grid-template-columns:1fr;
      align-items:start;margin-bottom:clamp(30px,5vw,50px)}
@media(min-width:820px){ .paar{grid-template-columns:1fr 1fr} }
/* Innerhalb einer Spalte brauchen mehrere Bloecke Abstand -- nur der letzte nicht,
   sonst haengt unten Luft, die die beiden Spalten ungleich lang aussehen laesst. */
/* In einer Spalte begrenzt schon die Spalte die Zeilenlaenge -- die zusaetzliche
   Begrenzung auf 68 Zeichen laesst den Text frueher umbrechen als das Bild daneben
   breit ist, und die Spalte sieht ungleich aus. Ueber die volle Breite gilt sie
   weiterhin: Dort waere eine Zeile sonst zu lang zum Lesen. */
.paar p, .paar ul, .paar ol{max-width:none}
/* „ganze Breite“ heißt ganze Breite (René, 25.10.2026: Block 4 auf der Luftdruck-Seite „nutzt nicht die volle
   Breite. Ist aber so eingestellt“). Die Lesebreite oben (p 92ch, Listen 66ch) gilt deshalb nicht mehr in Textblöcken. */
.b-text p, .b-text ul, .b-text ol{max-width:none}
.paar > div > section{margin-bottom:clamp(20px,3vw,32px)}
.paar > div > section:last-child{margin-bottom:0}

/* Kachel mit Bild: Das Bild fuellt die Breite und hat ein festes Verhaeltnis, damit
   eine Reihe gleich hoch bleibt. Der Text bekommt seinen eigenen Innenabstand -- das
   Bild soll bis an die Kante gehen. */
.karte.mitbild{padding:0;overflow:hidden}
.karte.mitbild .k-text{padding:15px 17px}
.k-rahmen{display:block;position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;
          border-bottom:1px solid var(--linie)}
.k-bild{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;
        object-fit:cover}
.karte.mitbild .mehr{display:block;padding:0 17px 15px}

/* Trennlinie. Der Abstand ist groesser als zwischen normalen Bloecken -- eine Linie,
   die eng zwischen zwei Absaetzen klebt, trennt optisch nichts und sieht aus wie ein
   Versehen. */
.trenner{border-top:1px solid var(--linie);margin:clamp(30px,5vw,52px) 0}
.trenner.beschriftet{border-top:0;display:flex;align-items:center;gap:16px;
                     color:var(--tinte2)}
.trenner.beschriftet::before,.trenner.beschriftet::after{
  content:"";flex:1;border-top:1px solid var(--linie)}
.trenner.beschriftet span{font-family:Bitter,Georgia,serif;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}

/* Bloecke */
/* Ein Bild ohne Breitenbegrenzung wird in Originalgroesse gezeigt und sprengt die
   Seite -- bei einem 1600 px breiten Foto in einem 1280 px breiten Fenster laeuft es
   rechts hinaus. Die Regel ganz unten (img{max-width:100%}) ist das Sicherheitsnetz
   fuer jedes Bild, das kuenftig irgendwo dazukommt. */
.b-bild figure{margin:0}
.b-bild img{display:block;width:100%;height:auto;border-radius:var(--r);
            border:1px solid var(--linie)}
/* Vier Stufen in Prozent der Blockbreite -- dasselbe Bild kann in einer halben Spalte
   und ueber die ganze Seite stehen, ein fester Pixelwert waere an einer der beiden
   Stellen falsch. Linksbuendig, nicht mittig: Ein verkleinertes Bild in der Mitte
   laesst links und rechts Luft stehen, die wie ein Fehler aussieht. */
.b-bild.g-klein figure{max-width:34%}
.b-bild.g-mittel figure{max-width:55%}
.b-bild.g-gross figure{max-width:78%}
@media(max-width:620px){
  /* Auf dem Handy sind 34 % einer schmalen Spalte eine Briefmarke. */
  .b-bild.g-klein figure{max-width:60%}
  .b-bild.g-mittel figure{max-width:80%}
  .b-bild.g-gross figure{max-width:100%}
}
.b-bild figcaption{font-size:.85rem;color:var(--tinte2);margin-top:7px}
.b-teil{margin:0 0 28px}
.b-teil .sgt-teil h1{margin-top:0}
.b-rahmen iframe{width:100%;border:1px solid var(--linie);border-radius:var(--r);
  background:var(--karte)}
.meldung-block{border-bottom:1px solid var(--linie);padding-bottom:22px;margin-bottom:22px}
.meldung-block:last-child{border-bottom:0}
.m-datum{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinte2);font-weight:700}
.meldung-block h2{margin:4px 0 10px}
.meldung-block .bild{max-width:520px;margin-bottom:12px}
.meldung-block h2 a{color:inherit;text-decoration:none}
.meldung-block .weiter{font-weight:700}
.meldung-block.einzeln .bild{max-width:100%}
/* Beiträge als Kacheln (29.10.2026) -- wie die Personen: Rahmen, Foto oben, darunter Datum und Überschrift */
.nkacheln{display:grid;gap:15px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:560px){ .nkacheln.viertel{grid-template-columns:repeat(auto-fit,236px);justify-content:space-between;row-gap:18px} }
.nkacheln.halb{grid-template-columns:1fr}
@media(min-width:700px){ .nkacheln.halb{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} }
.paar .nkacheln.halb{grid-template-columns:1fr}
.nkachel{display:flex;flex-direction:column;border:1px solid var(--linie);border-radius:var(--r);background:var(--karte);
         overflow:hidden;color:inherit;text-decoration:none;transition:box-shadow .15s,transform .15s}
.nkachel:hover{box-shadow:0 6px 18px rgba(0,0,0,.12);transform:translateY(-2px)}
.nkachel .n-rahmen{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--flaeche2)}
.nkachel .n-rahmen img{width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.nkachel .n-rahmen.ohne{display:flex;align-items:center;justify-content:center}
.nkachel .n-rahmen.ohne img{width:70%;height:auto;object-fit:contain;opacity:.85}
.nkachel .n-unter{display:flex;flex-direction:column;gap:4px;padding:11px 14px 12px;flex:1}
.nkachel .n-datum{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinte2)}
.nkachel .n-titel{font-family:Bitter,Georgia,serif;font-weight:700;font-size:1rem;line-height:1.25}
.nkacheln.halb .n-titel{font-size:1.12rem}
/* Lange Wörter („Bezirksmeisterschaft“) liefen in der Viertel-Kachel am Handy über den Rand */
.nkachel .n-titel{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
@media(max-width:559px){ .nkacheln.viertel .n-titel{font-size:.9rem} .nkacheln.viertel .n-unter{padding:9px 10px 10px} }
.nkachel .n-anfang{font-size:.88rem;color:var(--tinte2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;
                   -webkit-box-orient:vertical;overflow:hidden}
.nkachel .n-mehr{margin-top:auto;padding-top:6px;font-size:.78rem;font-weight:700;color:var(--gruen)}
.b-beitragkopf h1{margin:4px 0 6px}
.m-figur{margin:16px 0}
.b-beitragtext .m-galerie{margin:14px 0 20px}
.b-galerie .m-galerie{margin-top:6px}
.m-figur img{width:100%;height:auto;display:block;border-radius:6px}
.m-figur.g-klein{max-width:33%}
.m-figur.g-mittel{max-width:55%}
.m-figur.g-gross{max-width:75%}
@media(max-width:559px){ .m-figur.g-klein{max-width:55%} .m-figur.g-mittel{max-width:80%} .m-figur.g-gross{max-width:100%} }
.m-galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:18px}
.m-galerie a{display:block;aspect-ratio:1;overflow:hidden;border-radius:6px;background:var(--linie)}
.m-galerie img{width:100%;height:100%;object-fit:cover;display:block}
.m-video{width:100%;max-width:720px;display:block;margin:16px 0;border-radius:6px;background:#000}

/* Sicherheitsnetz: Kein Bild darf breiter werden als sein Platz. Ohne diese eine Zeile
   sprengt jedes Foto, das groesser als das Fenster ist, die ganze Seite -- und man sucht
   den Fehler beim Layout statt beim Bild. */
img{max-width:100%;height:auto}