/* ============================ Tokens ============================ */
:root{
  --paper:#F1F3EE;
  --surface:#FFFFFF;
  --surface-2:#E7EAE1;
  --text:#18212A;
  --muted:#5B6874;
  --line:#D5DACE;
  --line-soft:#E3E7DD;
  --brand:#1F497D;
  --accent:#5F7D22;
  --accent-soft:#E9F0D4;
  --slate:#54677B;
  --shadow:0 1px 2px rgba(19,26,33,.05), 0 8px 24px -12px rgba(19,26,33,.18);
  /* Kopf- und Fußbereich bleiben in beiden Themes dunkel */
  --deep:#131A21;
  --deep-2:#1B242D;
  --on-deep:#EDF0E8;
  --on-deep-muted:#9CA9A2;
  --on-deep-line:rgba(237,240,232,.16);
  --lichen:#CBDF80;
  --radius:3px;
  --maxw:1160px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#101720;
    --surface:#18212B;
    --surface-2:#1F2A35;
    --text:#E3E8DF;
    --muted:#96A3A8;
    --line:#2B3846;
    --line-soft:#232F3B;
    --brand:#8FB2E0;
    --accent:#B7D164;
    --accent-soft:#22301A;
    --slate:#8EA0B4;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --paper:#101720;
  --surface:#18212B;
  --surface-2:#1F2A35;
  --text:#E3E8DF;
  --muted:#96A3A8;
  --line:#2B3846;
  --line-soft:#232F3B;
  --brand:#8FB2E0;
  --accent:#B7D164;
  --accent-soft:#22301A;
  --slate:#8EA0B4;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
}

/* ============================ Basis ============================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:"Newsreader",Georgia,"Times New Roman",serif; font-weight:500; text-wrap:balance; margin:0}
p{margin:0}
button{font:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

.wrap{width:min(100% - 2.5rem, var(--maxw)); margin-inline:auto}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}

/* ============================ Kopfzeile ============================ */
.top{position:sticky; top:0; z-index:60; background:var(--deep); color:var(--on-deep);
  border-bottom:1px solid var(--on-deep-line)}
.top .wrap{display:flex; align-items:center; gap:1.5rem; min-height:68px}
.brandmark{display:flex; align-items:center; gap:.85rem; text-decoration:none; margin-right:auto}
.brandmark img{height:34px; width:auto}
.brandmark span{display:none}
@media(min-width:1040px){ .brandmark span{display:block; font-family:"IBM Plex Mono",monospace;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--on-deep-muted);
  border-left:1px solid var(--on-deep-line); padding-left:.85rem; line-height:1.5} }
nav.main{display:flex; gap:1.6rem; align-items:center}
nav.main a{text-decoration:none; font-size:.9rem; color:var(--on-deep); opacity:.82; padding-block:.4rem}
nav.main a:hover{opacity:1; color:var(--lichen)}
@media(max-width:880px){ nav.main{display:none} }
.btn{
  display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--accent);
  background:var(--accent); color:#0F1508; text-decoration:none; padding:.58rem 1.05rem;
  border-radius:var(--radius); font-size:.88rem; font-weight:600; letter-spacing:.01em;
  transition:filter .15s ease;
}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--on-deep); border-color:var(--on-deep-line)}
.btn.ghost:hover{border-color:var(--lichen); color:var(--lichen); filter:none}
.btn.outline{background:transparent; color:var(--text); border-color:var(--line)}
.btn.outline:hover{border-color:var(--accent); color:var(--accent); filter:none}

/* ============================ Hero ============================ */
.hero{position:relative; background:var(--deep); color:var(--on-deep); overflow:hidden}
.hero img.bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.62; filter:saturate(.9)
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(19,26,33,.94) 0%, rgba(19,26,33,.72) 42%, rgba(19,26,33,.25) 100%);
}
.hero .wrap{position:relative; z-index:2; padding:5.5rem 0 4.25rem; max-width:min(100% - 2.5rem, var(--maxw))}
.hero h1{
  font-size:clamp(2.6rem, 6.2vw, 4.6rem); line-height:1.02; letter-spacing:-.018em;
  margin:1.1rem 0 0; max-width:15ch;
}
.hero h1 em{font-style:italic; color:var(--lichen)}
.hero .lede{margin-top:1.4rem; max-width:46ch; font-size:1.08rem; color:#D9DFD4}
.hero .cta{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.1rem}
.hero .facts{
  display:flex; flex-wrap:wrap; gap:2.4rem; margin-top:3.2rem;
  padding-top:1.5rem; border-top:1px solid var(--on-deep-line);
}
.hero .facts div{min-width:0}
.hero .facts dt{font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-deep-muted)}
.hero .facts dd{margin:.3rem 0 0; font-family:"Newsreader",serif; font-size:1.5rem; line-height:1.2}

/* ============================ Abschnitte ============================ */
section{padding-block:5rem}
section.tight{padding-block:3.5rem}
.section-head{display:flex; align-items:baseline; gap:1.25rem; flex-wrap:wrap;
  padding-bottom:1.1rem; border-bottom:1px solid var(--line); margin-bottom:2.6rem}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1.1; letter-spacing:-.012em}
.section-head .eyebrow{margin-left:auto}
.prose{max-width:62ch; color:var(--text)}
.prose p + p{margin-top:1rem}
.lead{font-size:1.12rem; line-height:1.6}

/* Club */
.club{display:grid; grid-template-columns:1.35fr .9fr; gap:3.5rem}
@media(max-width:860px){ .club{grid-template-columns:1fr; gap:2.25rem} }
.keyfacts{display:grid; gap:0; align-content:start; border-top:1px solid var(--line)}
.keyfacts div{display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.85rem 0; border-bottom:1px solid var(--line-soft)}
.keyfacts dt{color:var(--muted); font-size:.9rem}
.keyfacts dd{margin:0; font-family:"Newsreader",serif; font-size:1.35rem}

/* Nächste Veranstaltung */
.next{background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow)}
.next-head{display:grid; grid-template-columns:1.1fr .9fr}
@media(max-width:860px){ .next-head{grid-template-columns:1fr} }
.next-head .txt{padding:2.4rem}
.next-head figure{margin:0; position:relative; min-height:260px}
.next-head figure img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.next h3{font-size:clamp(1.8rem,3vw,2.35rem); line-height:1.1; margin-top:.5rem}
.datarail{display:grid; gap:0; margin-top:1.6rem; border-top:1px solid var(--line-soft)}
.datarail div{display:grid; grid-template-columns:9.5rem 1fr; gap:1rem; padding:.6rem 0;
  border-bottom:1px solid var(--line-soft); font-size:.94rem}
.datarail dt{font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); padding-top:.28rem}
.datarail dd{margin:0}
@media(max-width:520px){ .datarail div{grid-template-columns:1fr; gap:.1rem} }

/* Programmkalender */
.kalender{width:100%; border-collapse:collapse; font-size:.9rem; min-width:640px}
.kalender th{
  text-align:left; padding:.7rem .9rem; background:var(--deep); color:var(--on-deep);
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:500; border-right:1px solid rgba(237,240,232,.12)
}
.kalender th:first-child{width:3.2rem; text-align:center}
.kalender td{padding:.85rem .9rem; border:1px solid var(--line); vertical-align:top; background:var(--surface)}
.kalender td.slot{
  background:var(--deep-2); color:var(--on-deep); text-align:center; font-family:"IBM Plex Mono",monospace;
  font-weight:500; width:3.2rem
}
.kalender .tag{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:.7rem;
  background:var(--accent-soft); color:var(--accent); padding:.1rem .38rem; border-radius:2px; margin-right:.4rem}
.scrollx{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius)}

/* Touren-Steckbriefe */
.touren{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line)}
.tour{background:var(--surface); padding:1.5rem 1.4rem}
.tour .letter{
  display:inline-flex; align-items:center; justify-content:center; width:1.9rem; height:1.9rem;
  border-radius:50%; background:var(--accent); color:#0F1508; font-family:"IBM Plex Mono",monospace;
  font-weight:500; font-size:.9rem
}
.tour h4{font-size:1.16rem; line-height:1.25; margin:.85rem 0 .2rem}
.tour .charakter{font-size:.82rem; color:var(--muted)}
.tour dl{display:grid; gap:0; margin:1.1rem 0 0; border-top:1px solid var(--line-soft)}
.tour dl div{display:flex; justify-content:space-between; gap:.75rem; padding:.42rem 0;
  border-bottom:1px solid var(--line-soft)}
.tour dt{font-size:.78rem; color:var(--muted)}
.tour dd{margin:0; font-family:"IBM Plex Mono",monospace; font-size:.82rem; text-align:right}

/* Vollflächiges Bildband */
.band{position:relative; height:min(46vh,380px); overflow:hidden; background:var(--deep)}
.band img{width:100%; height:100%; object-fit:cover; opacity:.9}
.band figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.1rem 0;
  background:linear-gradient(transparent, rgba(19,26,33,.85)); color:var(--on-deep)
}
.band figcaption .wrap{font-family:"IBM Plex Mono",monospace; font-size:.74rem; letter-spacing:.1em;
  text-transform:uppercase}

/* Chronik */
.chronik{border-top:1px solid var(--line)}
.eintrag{display:grid; grid-template-columns:7rem 1fr; gap:2rem; padding:2.1rem 0;
  border-bottom:1px solid var(--line-soft); align-items:start}
@media(max-width:720px){ .eintrag{grid-template-columns:1fr; gap:.6rem; padding:1.6rem 0} }
.eintrag .jahr{font-family:"IBM Plex Mono",monospace; font-size:1.5rem; color:var(--muted); line-height:1.1}
.eintrag .jahr small{display:block; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  margin-top:.35rem; color:var(--accent)}
.eintrag h3{font-size:1.5rem; line-height:1.2}
.eintrag .ort{font-size:.92rem; color:var(--muted); margin-top:.15rem}
.eintrag p.beschreibung{margin-top:.7rem; max-width:60ch; font-size:.96rem}
.eintrag .bild{margin-top:1.1rem; max-width:520px; border:1px solid var(--line)}
.eintrag .bild img{aspect-ratio:16/9; object-fit:cover; width:100%}

/* Vorstand */
.vorstand{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line)}
.person{background:var(--surface); padding:1.6rem 1.4rem}
.person .rolle{font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent)}
.person .name{font-family:"Newsreader",serif; font-size:1.4rem; margin-top:.55rem; line-height:1.2}
.person .seit{font-size:.82rem; color:var(--muted); margin-top:.5rem}

/* Mitglied werden */
.aufnahme{display:grid; grid-template-columns:1fr 1fr; gap:3rem}
@media(max-width:860px){ .aufnahme{grid-template-columns:1fr; gap:2rem} }
.schritte{counter-reset:s; display:grid; gap:1.4rem; margin:0; padding:0; list-style:none}
.schritte li{display:grid; grid-template-columns:2.1rem 1fr; gap:1rem; align-items:start}
.schritte li::before{
  counter-increment:s; content:counter(s); font-family:"IBM Plex Mono",monospace; font-size:.8rem;
  width:2.1rem; height:2.1rem; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--accent); color:var(--accent); border-radius:50%
}
.schritte strong{display:block; font-weight:600; margin-bottom:.15rem}
.schritte span{font-size:.94rem; color:var(--muted)}

/* Fußbereich */
.seitenfuss{background:var(--deep); color:var(--on-deep); padding-block:3.5rem 2.5rem; margin-top:2rem}
.seitenfuss a{color:var(--lichen)}
.footgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem}
@media(max-width:800px){ .footgrid{grid-template-columns:1fr 1fr; gap:2rem} }
@media(max-width:520px){ .footgrid{grid-template-columns:1fr} }
.seitenfuss h4{font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--on-deep-muted); font-weight:500; margin-bottom:.9rem}
.seitenfuss p, .seitenfuss li{font-size:.9rem; color:#CBD3C9}
.seitenfuss ul{list-style:none; margin:0; padding:0; display:grid; gap:.4rem}
.seitenfuss img.mark{height:38px; width:auto; margin-bottom:1.1rem}
.legal{margin-top:2.75rem; padding-top:1.4rem; border-top:1px solid var(--on-deep-line);
  display:flex; flex-wrap:wrap; gap:1.25rem; font-size:.8rem; color:var(--on-deep-muted)}

/* ============================ Mitgliederbereich ============================ */
.gate{min-height:64vh; display:grid; place-items:center; padding-block:4rem}
.gate-card{width:min(100%,430px); background:var(--surface); border:1px solid var(--line);
  padding:2.4rem; box-shadow:var(--shadow)}
.gate-card h2{font-size:1.75rem; margin-bottom:.4rem}
label.f{display:block; font-size:.82rem; color:var(--muted); margin-bottom:.4rem}
input[type=text], input[type=email], input[type=password], input[type=date], textarea, select{
  width:100%; font:inherit; font-size:.95rem; padding:.62rem .75rem; color:var(--text);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
}
textarea{resize:vertical; min-height:5.5rem; line-height:1.5}
input:focus, textarea:focus, select:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.field + .field{margin-top:1rem}
.hinweis{font-size:.82rem; color:var(--muted); margin-top:1rem; line-height:1.5}
.fehler{color:#B4341F; font-size:.86rem; margin-top:.75rem}
:root[data-theme="dark"] .fehler, :root:not([data-theme="light"]) .fehler{color:#F08D7A}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .fehler{color:#B4341F} }

.memberbar{display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:1rem 0; border-bottom:1px solid var(--line); margin-bottom:2.5rem}
.memberbar .who{font-size:.9rem; color:var(--muted); margin-right:auto}
.memberbar .who b{color:var(--text); font-weight:600}
.linkbtn{background:none; border:none; color:var(--brand); font-size:.86rem; padding:0; text-decoration:underline}

.polls{display:grid; gap:1.5rem}
.poll{background:var(--surface); border:1px solid var(--line); padding:1.75rem}
.poll header{display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap}
.poll h3{font-size:1.42rem; line-height:1.22; flex:1 1 16rem}
.chip{font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.22rem .5rem; border:1px solid var(--line); border-radius:2px; color:var(--muted); white-space:nowrap}
.chip.offen{border-color:var(--accent); color:var(--accent)}
.poll .frist{font-size:.85rem; color:var(--muted); margin-top:.4rem}
.poll p.desc{margin-top:.8rem; font-size:.95rem; color:var(--muted); max-width:60ch}
.optionen{display:grid; gap:.5rem; margin-top:1.4rem}
.option{
  position:relative; display:flex; align-items:center; gap:.9rem; width:100%; text-align:left;
  padding:.8rem 1rem; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); color:var(--text); overflow:hidden;
}
.option:hover:not(:disabled){border-color:var(--accent)}
.option .bar{position:absolute; inset:0 auto 0 0; background:var(--accent-soft); z-index:0;
  transition:width .45s cubic-bezier(.2,.7,.3,1)}
.option .label, .option .zahl{position:relative; z-index:1}
.option .label{flex:1}
.option .label small{display:block; color:var(--muted); font-size:.8rem; margin-top:.1rem}
.option .zahl{font-family:"IBM Plex Mono",monospace; font-size:.85rem; color:var(--muted)}
.option.gewaehlt{border-color:var(--accent)}
.option.gewaehlt .label::after{content:" ✓"; color:var(--accent); font-weight:600}
.poll footer{margin-top:1.1rem; display:flex; gap:1rem; flex-wrap:wrap; align-items:center;
  font-size:.84rem; color:var(--muted)}
.stimmen{list-style:none; margin:.5rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem}
.stimmen li{font-size:.76rem; color:var(--muted); border:1px solid var(--line-soft); padding:.1rem .45rem; border-radius:2px}

details.neu{margin-top:2rem; border:1px solid var(--line); background:var(--surface)}
details.neu summary{padding:1rem 1.5rem; cursor:pointer; font-weight:600; font-size:.95rem; list-style:none}
details.neu summary::-webkit-details-marker{display:none}
details.neu summary::before{content:"+ "; color:var(--accent); font-family:"IBM Plex Mono",monospace}
details.neu[open] summary::before{content:"– "}
details.neu .body{padding:0 1.5rem 1.6rem; max-width:36rem}

.docs{display:grid; gap:0; border-top:1px solid var(--line)}
.docs div{display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:baseline;
  padding:.85rem 0; border-bottom:1px solid var(--line-soft)}
.docs .n{font-size:.96rem}
.docs .m{font-family:"IBM Plex Mono",monospace; font-size:.76rem; color:var(--muted); white-space:nowrap}

.termine{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line)}
.termin{background:var(--surface); padding:1.4rem}
.termin .d{font-family:"IBM Plex Mono",monospace; font-size:.8rem; color:var(--accent)}
.termin .t{font-family:"Newsreader",serif; font-size:1.28rem; margin-top:.4rem; line-height:1.2}
.termin .o{font-size:.86rem; color:var(--muted); margin-top:.3rem}

.leer{padding:2.5rem; text-align:center; color:var(--muted); border:1px dashed var(--line); font-size:.94rem}
.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:.5rem; z-index:99; background:var(--accent); color:#0F1508; padding:.5rem .9rem}

/* ===================================================================
   Mitgliederbereich und Verwaltung
   =================================================================== */

/* Konto-Links in der Kopfzeile */
.kopf-konto{display:flex; align-items:center; gap:1.1rem}
.kopf-konto a{color:var(--on-deep); text-decoration:none; font-size:.86rem; opacity:.85}
.kopf-konto a:hover{opacity:1; color:var(--lichen)}
.kopf-konto a.abmelden{padding-left:1.1rem; border-left:1px solid var(--on-deep-line)}
@media(max-width:620px){ .kopf-konto a:not(.abmelden){display:none} }

/* Rückmeldungen nach einer Aktion */
.meldungen{display:grid; gap:.6rem; padding-top:1.5rem}
.meldung{padding:.85rem 1.1rem; border:1px solid var(--line); background:var(--surface);
  font-size:.93rem; border-left-width:3px; line-height:1.55}
.meldung.ok{border-left-color:var(--accent)}
.meldung.fehler{border-left-color:#B4341F}
:root[data-theme="dark"] .meldung.fehler{border-left-color:#F08D7A}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .meldung.fehler{border-left-color:#F08D7A} }
.meldung code.kopierbar{display:inline-block; margin-top:.4rem; padding:.4rem .6rem;
  background:var(--paper); border:1px solid var(--line); font-family:"IBM Plex Mono",monospace;
  font-size:.76rem; word-break:break-all; user-select:all}

/* Formularseiten */
.gate-card.breit{width:min(100%,560px)}
.gate-text{color:var(--muted); font-size:.95rem; margin-bottom:1.6rem; line-height:1.6}
.gate-aktion{margin-top:1.5rem}
.btn.weit{width:100%; justify-content:center}
.f-zusatz{float:right; font-weight:400; color:var(--muted); font-size:.78rem}
.untertitel{font-size:1.05rem; margin:0 0 .9rem; font-family:"Archivo",sans-serif;
  font-weight:600; letter-spacing:.01em}
.warnung{margin-top:1.4rem; padding:.9rem 1.1rem; background:var(--accent-soft);
  border-left:3px solid var(--accent); font-size:.92rem; line-height:1.55}
.klein{font-size:.88rem; color:var(--muted); line-height:1.6}
.klein + .klein{margin-top:.8rem}
.rechts{text-align:right}

/* Prüfliste in der Einrichtung */
.pruefliste{list-style:none; margin:0 0 1.6rem; padding:0; display:grid; gap:.4rem}
.pruefliste li{font-size:.92rem; padding-left:1.6rem; position:relative}
.pruefliste li::before{position:absolute; left:0; font-weight:600}
.pruefliste li.ja::before{content:"✓"; color:var(--accent)}
.pruefliste li.nein::before{content:"✗"; color:#B4341F}
:root[data-theme="dark"] .pruefliste li.nein::before{color:#F08D7A}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pruefliste li.nein::before{color:#F08D7A} }

/* Benutzertabelle */
table.benutzer{width:100%; border-collapse:collapse; font-size:.92rem; min-width:720px;
  background:var(--surface)}
table.benutzer th{text-align:left; padding:.7rem .9rem; background:var(--deep); color:var(--on-deep);
  font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.11em;
  text-transform:uppercase; font-weight:500}
table.benutzer td{padding:.8rem .9rem; border-bottom:1px solid var(--line-soft); vertical-align:middle}
table.benutzer tr:last-child td{border-bottom:none}
.bname{display:block; font-weight:500}
.bmail{display:block; font-family:"IBM Plex Mono",monospace; font-size:.76rem; color:var(--muted);
  margin-top:.15rem; word-break:break-all}
.klein.mono, td.mono{font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--muted)}
.status{display:inline-block; font-size:.76rem; padding:.18rem .5rem; border-radius:2px;
  border:1px solid var(--line); white-space:nowrap}
.status.aktiv{border-color:var(--accent); color:var(--accent)}
.status.eingeladen{border-color:var(--slate); color:var(--slate)}
.status.gesperrt{border-color:#B4341F; color:#B4341F}
:root[data-theme="dark"] .status.gesperrt{border-color:#F08D7A; color:#F08D7A}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .status.gesperrt{border-color:#F08D7A; color:#F08D7A} }
table.benutzer select{font-size:.85rem; padding:.3rem .45rem; width:auto; min-width:7.5rem}

.inline-form{display:inline}
.aktionen{display:flex; flex-wrap:wrap; gap:.25rem .9rem; justify-content:flex-end}
.linkbtn.gefahr{color:#B4341F}
:root[data-theme="dark"] .linkbtn.gefahr{color:#F08D7A}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .linkbtn.gefahr{color:#F08D7A} }
.linkbtn:disabled{color:var(--muted); text-decoration:none; cursor:not-allowed; opacity:.55}

/* Zweispaltige Verwaltungsbereiche */
.verwaltung-grid{display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start}
@media(max-width:860px){ .verwaltung-grid{grid-template-columns:1fr; gap:2rem} }
.kasten{background:var(--surface); border:1px solid var(--line); padding:1.6rem}
.haken{display:flex; align-items:flex-start; gap:.6rem; margin-top:1.1rem; font-size:.9rem;
  cursor:pointer; line-height:1.5}
.haken input{width:auto; margin-top:.22rem; accent-color:var(--accent)}

/* Abstimmungsoptionen sind jetzt echte Formularknöpfe */
form.optionen{display:grid; gap:.5rem; margin-top:1.4rem}
.option:disabled{cursor:default}
.poll footer form.inline-form{margin-left:auto}

/* ===================================================================
   Band „Mitgliederbereich" auf der Startseite
   =================================================================== */
.mitgliederband{background:var(--deep); color:var(--on-deep)}
.mitgliederband h2{font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1.1; letter-spacing:-.012em;
  margin-top:.5rem}
.eyebrow.hell{color:var(--lichen)}
.mb-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:4rem; align-items:start}
@media(max-width:880px){ .mb-grid{grid-template-columns:1fr; gap:2.5rem} }
.mb-lede{margin-top:1.2rem; max-width:46ch; color:#CBD3C9; font-size:1.04rem; line-height:1.62}
.mb-status{margin-top:1.6rem; color:#CBD3C9; font-size:.95rem}
.mb-status strong{color:var(--on-deep)}
.mb-aktion{margin-top:1.8rem}
.mb-fuss{margin-top:1.2rem; max-width:44ch; font-size:.88rem; color:var(--on-deep-muted);
  line-height:1.6}

.mb-liste{list-style:none; margin:0; padding:0; display:grid; gap:0;
  border-top:1px solid var(--on-deep-line)}
.mb-liste li{display:grid; grid-template-columns:3.2rem 1fr; gap:1rem; align-items:start;
  padding:1.25rem 0; border-bottom:1px solid var(--on-deep-line)}
.mb-nr{font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--lichen);
  padding-top:.2rem; letter-spacing:.06em}
.mb-liste strong{display:block; font-weight:600; font-size:1rem; margin-bottom:.25rem}
.mb-liste span{display:block; font-size:.9rem; color:var(--on-deep-muted); line-height:1.6}

/* Zeile in der Verwaltung, die gerade bearbeitet wird */
tr.in-bearbeitung td{background:var(--accent-soft)}
.zeilenform{display:grid; grid-template-columns:1fr 1.4fr auto; gap:1rem; align-items:end;
  padding:.4rem 0}
@media(max-width:780px){ .zeilenform{grid-template-columns:1fr} }
.zeilenform .field + .field{margin-top:0}
.zeilenform-aktion{display:flex; align-items:center; gap:1rem; white-space:nowrap}

/* Prüfseite */
table.pruefung{width:100%; border-collapse:collapse; font-size:.93rem; min-width:640px;
  background:var(--surface)}
table.pruefung th{text-align:left; width:16rem; padding:.9rem 1rem; vertical-align:top;
  font-weight:600; border-bottom:1px solid var(--line-soft)}
table.pruefung td{padding:.9rem 1rem; vertical-align:top; border-bottom:1px solid var(--line-soft)}
table.pruefung tr:last-child th, table.pruefung tr:last-child td{border-bottom:none}
table.pruefung th::before{display:inline-block; width:1.3rem; font-weight:700}
table.pruefung tr.ja th::before{content:"✓"; color:var(--accent)}
table.pruefung tr.nein th::before{content:"✗"; color:#B4341F}
table.pruefung tr.offen th::before{content:"·"; color:var(--muted)}
table.pruefung tr.nein td{color:var(--text)}
table.pruefung code{font-family:"IBM Plex Mono",monospace; font-size:.85em; word-break:break-all}
:root[data-theme="dark"] table.pruefung tr.nein th::before{color:#F08D7A}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) table.pruefung tr.nein th::before{color:#F08D7A} }

/* Hinweiskasten nur im Testbetrieb (debug => true) */
.testbetrieb{margin-top:1.4rem; padding:1rem 1.1rem; background:var(--accent-soft);
  border-left:3px solid var(--accent); font-size:.88rem; line-height:1.55}
.testbetrieb p{margin:0 0 .6rem}
.testbetrieb a{color:var(--brand)}
.testbetrieb code.kopierbar{display:block; margin-top:.3rem; padding:.45rem .6rem;
  background:var(--surface); border:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace; font-size:.74rem; word-break:break-all; user-select:all}

/* ===================================================================
   Dokumentenablage
   =================================================================== */
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
input[type=search], input[type=file]{
  width:100%; font:inherit; font-size:.95rem; padding:.62rem .75rem; color:var(--text);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
}
input[type=file]{padding:.5rem .6rem; font-size:.88rem}
input[type=search]:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}

.dok-suche{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; max-width:46rem}
.dok-suche input{flex:1 1 18rem}
.dok-stand{margin:1.4rem 0 .6rem; font-family:"IBM Plex Mono",monospace; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}

.dokliste{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.dok{display:grid; grid-template-columns:3.4rem 1fr auto; gap:1.1rem; align-items:start;
  padding:1.1rem 0; border-bottom:1px solid var(--line-soft)}
.dok-art{display:flex; align-items:center; justify-content:center; height:2.6rem; border:1px solid var(--line);
  background:var(--surface); font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.06em;
  color:var(--accent); border-radius:var(--radius)}
.dok-kern{min-width:0}
.dok-titel{font-family:"Newsreader",Georgia,serif; font-size:1.2rem; line-height:1.3; text-decoration:none;
  overflow-wrap:anywhere}
.dok-titel:hover{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.dok-text{margin-top:.25rem; font-size:.9rem; color:var(--muted); overflow-wrap:anywhere}
.dok-meta{margin-top:.35rem; display:flex; flex-wrap:wrap; gap:.15rem 1rem; font-size:.78rem; color:var(--muted)}
.dok-meta span:first-child{font-family:"IBM Plex Mono",monospace; overflow-wrap:anywhere}
.dok-aktion{display:flex; flex-direction:column; align-items:flex-end; gap:.45rem; padding-top:.1rem}
.dok-aktion .btn{padding:.42rem .85rem; font-size:.8rem}
.dokliste mark{background:var(--accent-soft); color:inherit; padding:0 .08em; border-radius:2px}
@media(max-width:620px){
  .dok{grid-template-columns:2.8rem 1fr}
  .dok-aktion{grid-column:2; flex-direction:row; align-items:center; gap:1rem}
}

.blaettern{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:1.3rem; font-size:.88rem}
.blaettern .aus{color:var(--muted); opacity:.5; font-size:.86rem}
.blaettern .seiten{display:flex; gap:.3rem; align-items:center}
.blaettern .seiten a, .blaettern .seiten .aktuell{display:inline-flex; align-items:center; justify-content:center;
  min-width:2.1rem; height:2.1rem; padding:0 .4rem; border:1px solid var(--line); border-radius:var(--radius);
  font-family:"IBM Plex Mono",monospace; font-size:.8rem; text-decoration:none; background:var(--surface)}
.blaettern .seiten a:hover{border-color:var(--accent); color:var(--accent)}
.blaettern .seiten .aktuell{background:var(--accent); border-color:var(--accent); color:#0F1508}
.blaettern .luecke{color:var(--muted); padding:0 .2rem}
#dokumente{scroll-margin-top:84px}

/* ===================================================================
   Termine mit Status
   =================================================================== */
#termine{scroll-margin-top:84px}
.termin{display:flex; flex-direction:column}
.termin-kopf{display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap}
.termin .termin-kopf .d{font-family:"IBM Plex Mono",monospace; font-size:.8rem; color:var(--accent)}
.tstatus{font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.18rem .45rem; border:1px solid currentColor; border-radius:2px; white-space:nowrap}
.tstatus.s-forum{color:var(--brand)}
.tstatus.s-abstimmung{color:#B86A14}
.tstatus.s-geplant{color:var(--accent); background:var(--accent-soft)}
.tstatus.s-durchgefuehrt{color:var(--muted)}
.tstatus.s-archiviert{color:var(--muted); border-style:dashed}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tstatus.s-abstimmung{color:#F0B060} }
:root[data-theme="dark"] .tstatus.s-abstimmung{color:#F0B060}
.termin.status-durchgefuehrt .t, .termin.status-archiviert .t{color:var(--muted)}
.termin-link{margin-top:.55rem; font-size:.84rem}
.termin-link a{color:var(--brand)}
.termin-pflege{margin-top:auto; padding-top:.9rem; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem;
  border-top:1px dashed var(--line); margin-block-start:1rem}
.status-form select{width:auto; font-size:.8rem; padding:.3rem .45rem}
.termin-edit{flex-basis:100%}
.termin-edit > summary{list-style:none; cursor:pointer; display:inline}
.termin-edit > summary::-webkit-details-marker{display:none}
.termin-edit[open] > summary{display:block; margin-bottom:.8rem}
.termin-edit form + form{margin-top:.6rem}
.termin-daten{display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:1rem}
.termin-daten .field + .field{margin-top:0}
details.termin-archiv{margin-top:1.5rem}
details.termin-archiv > summary{cursor:pointer; font-family:"IBM Plex Mono",monospace; font-size:.74rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:.4rem 0; list-style:none}
details.termin-archiv > summary::-webkit-details-marker{display:none}
details.termin-archiv > summary::before{content:"+ "; color:var(--accent)}
details.termin-archiv[open] > summary::before{content:"– "}
details.termin-archiv .termine{margin-top:.8rem}
.termin-daten + .field{margin-top:1rem}

/* ===================================================================
   Touren
   =================================================================== */
.tstatus.s-chronik{color:var(--brand); background:transparent}
.tourgruppe + .tourgruppe{margin-top:2.6rem}
.tourgruppe-kopf{font-size:1.45rem; margin-bottom:1rem; display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap}
.tourgruppe-kopf span{font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted)}
.tourkarten{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem}
.tourkarte{display:flex; flex-direction:column; gap:.35rem; background:var(--surface); padding:1.35rem 1.4rem;
  border:1px solid var(--line); text-decoration:none; color:var(--text); transition:background .15s, border-color .15s}
.tourkarte:hover{border-color:var(--accent)}
.tourkarte:hover{background:var(--paper)}
.tourkarte:hover .tk-titel{color:var(--accent)}
.tk-kopf{display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap}
.tk-kopf .d{font-family:"IBM Plex Mono",monospace; font-size:.8rem; color:var(--accent)}
.tk-titel{font-family:"Newsreader",Georgia,serif; font-size:1.3rem; line-height:1.2; margin-top:.2rem}
.tk-ort{font-size:.86rem; color:var(--muted)}
.tk-fuss{margin-top:auto; padding-top:.6rem; font-size:.76rem; color:var(--muted); font-family:"IBM Plex Mono",monospace}
.tourkarte.status-durchgefuehrt .tk-titel{color:var(--muted)}

.tour-kopf{padding-bottom:1.6rem; border-bottom:1px solid var(--line); margin-bottom:2.2rem}
.tour-kopf .tk-kopf{justify-content:flex-start; gap:.9rem}
.tour-kopf h1{font-size:clamp(2rem,4vw,2.9rem); line-height:1.08; letter-spacing:-.012em; margin-top:.6rem; overflow-wrap:anywhere}
.tour-ort{margin-top:.5rem; color:var(--muted)}
.tour-kopf .klein{margin-top:.6rem}
.tour-kopf .klein a{color:var(--brand)}
.tour-werkzeug{display:flex; flex-wrap:wrap; align-items:flex-end; gap:.6rem 1.4rem; margin-top:1.3rem}
.tour-werkzeug .status-form{display:flex; align-items:center; gap:.6rem}
.tour-werkzeug .status-form label.f{margin:0}
.tour-form{max-width:46rem}
.tour-inhalt{display:grid; grid-template-columns:1fr 1fr; gap:3rem}
@media(max-width:860px){ .tour-inhalt{grid-template-columns:1fr; gap:2rem} }
.tour-block h2{font-size:1.5rem; padding-bottom:.6rem; border-bottom:1px solid var(--line); margin-bottom:1rem}
.tour-block .prose p + p{margin-top:.9rem}
.tour-block .programm p:first-line{font-weight:600}
.chronik-raster{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:2.5rem; align-items:start}
@media(max-width:860px){ .chronik-raster{grid-template-columns:1fr} }
.chronik-form .haken{margin-top:.55rem}
.chronik-vorschau .chronik{border-top:1px solid var(--line)}
.eintrag div.beschreibung{margin-top:.7rem; max-width:60ch; font-size:.96rem}
.eintrag div.beschreibung p + p{margin-top:.7rem}
.eintrag .chronik-programm{font-size:.88rem; color:var(--muted)}

/* ===================================================================
   Navigation der geschützten Bereiche
   =================================================================== */
.bereichsleiste{display:flex; align-items:flex-end; justify-content:space-between; gap:.6rem 1.5rem; flex-wrap:wrap;
  border-bottom:1px solid var(--line); margin:1.4rem 0 2.2rem}
.bereichsleiste .reiter{display:flex; gap:.25rem; flex-wrap:wrap}
.bereichsleiste .reiter a{display:inline-block; padding:.7rem 1.05rem .75rem; text-decoration:none; font-weight:600;
  font-size:.95rem; color:var(--muted); border-bottom:3px solid transparent; margin-bottom:-1px}
.bereichsleiste .reiter a:hover{color:var(--text)}
.bereichsleiste .reiter a.aktiv{color:var(--text); border-bottom-color:var(--accent)}
.bereichsleiste .wer{display:flex; align-items:center; gap:.4rem 1.1rem; flex-wrap:wrap; padding-bottom:.7rem; font-size:.84rem; color:var(--muted)}
.bereichsleiste .wer > span{color:var(--text); font-weight:500}
.bereichsleiste .wer a{color:var(--brand)}
.bereichsleiste .wer a.aktiv{font-weight:600; text-decoration:none}
@media(max-width:620px){
  .bereichsleiste{margin-top:.6rem}
  .bereichsleiste .reiter{width:100%; overflow-x:auto; flex-wrap:nowrap}
  .bereichsleiste .reiter a{padding:.6rem .7rem; white-space:nowrap}
  .bereichsleiste .wer{order:-1; width:100%; padding:0}
}
.admin-reiter{display:flex; gap:.4rem; flex-wrap:wrap; margin:-1rem 0 2.2rem}
.admin-reiter a{padding:.42rem .85rem; border:1px solid var(--line); border-radius:999px; font-size:.84rem;
  text-decoration:none; color:var(--muted); background:var(--surface)}
.admin-reiter a:hover{border-color:var(--accent); color:var(--text)}
.admin-reiter a.aktiv{background:var(--accent); border-color:var(--accent); color:#0F1508; font-weight:600}
.abschnitt-sprung, .tour-sprung{display:flex; gap:.3rem 1.2rem; flex-wrap:wrap; margin:-1rem 0 2rem;
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase}
.tour-sprung{margin:1rem 0 0}
.abschnitt-sprung a, .tour-sprung a{color:var(--muted); text-decoration:none}
.abschnitt-sprung a:hover, .tour-sprung a:hover{color:var(--accent)}
.zurueck-zeile{margin:-1.2rem 0 1.6rem; font-size:.88rem}
.zurueck-zeile .zurueck{color:var(--text); text-decoration:none; font-weight:500}
.zurueck-zeile .zurueck:hover{color:var(--accent)}
#forum, #bilder, #unterlagen{scroll-margin-top:84px}

/* ---------- Daumen (auch außerhalb des Forums) */
.like-form{display:inline}
.daumen{display:inline-flex; align-items:center; gap:.38rem; min-height:2rem; padding:.22rem .65rem .22rem .5rem;
  background:transparent; color:var(--muted); border:1px solid var(--line); border-radius:999px; font-size:.8rem; line-height:1;
  transition:border-color .15s, color .15s, background .15s}
.daumen svg{width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round}
.daumen:hover{border-color:var(--accent); color:var(--accent)}
.daumen.an{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.daumen.an svg{fill:currentColor}
.daumen .zahl{font-family:"IBM Plex Mono",monospace; font-weight:500}
.daumen .zahl:empty{display:none}
.daumen.pop svg{animation:daumen-pop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes daumen-pop{0%{transform:scale(1)} 45%{transform:scale(1.35) rotate(-12deg)} 100%{transform:scale(1)}}
.chip.neu-chip{border-color:#B86A14; color:#B86A14}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .chip.neu-chip{border-color:#F0B060; color:#F0B060} }

/* ---------- Forum im Mitgliederbereich */
.forum-kurz{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.forum-kurz li{display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .7rem; padding:.95rem 0; border-bottom:1px solid var(--line-soft)}
.forum-kurz .fk-titel{font-family:"Newsreader",Georgia,serif; font-size:1.18rem; text-decoration:none}
.forum-kurz li.neu .fk-titel{font-weight:600}
.forum-kurz .fk-titel:hover{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.forum-kurz .fk-chips{display:inline-flex; gap:.3rem}
.forum-kurz .fk-meta{flex-basis:100%; font-size:.8rem; color:var(--muted)}
.forum-aktionen{display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-top:1.3rem}

/* ---------- Bildergalerie */
.bild-upload{display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1rem; margin-bottom:1.6rem}
.upload-feld{flex:1 1 22rem; position:relative; display:flex; align-items:center; justify-content:center; min-height:5rem;
  padding:1rem; border:1.5px dashed var(--line); border-radius:var(--radius); background:var(--surface); cursor:pointer;
  text-align:center; transition:border-color .15s, background .15s}
.upload-feld:hover, .upload-feld.drueber{border-color:var(--accent); background:var(--accent-soft)}
.upload-feld input{position:absolute; inset:0; opacity:0; cursor:pointer}
.upload-text{font-size:.9rem; color:var(--muted); line-height:1.5}
.upload-text b{color:var(--text)}
.upload-stand{flex-basis:100%; font-size:.84rem; color:var(--muted); min-height:1.2em}
.galerie-leiste{display:flex; align-items:center; gap:.6rem 1.4rem; flex-wrap:wrap; margin-bottom:1rem; font-size:.86rem; color:var(--muted)}
.galerie-leiste .sortierung{display:flex; gap:.9rem}
.galerie-leiste .sortierung a{color:var(--muted); text-decoration:none}
.galerie-leiste .sortierung a.aktiv{color:var(--text); font-weight:600; text-decoration:underline; text-underline-offset:4px}
.galerie-leiste .btn{margin-left:auto; padding:.4rem .8rem; font-size:.8rem}
.galerie{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem}
.gbild{background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; scroll-margin-top:90px}
.gbild-link{display:block; aspect-ratio:4/3; overflow:hidden; background:var(--surface-2)}
.gbild-link img{width:100%; height:100%; object-fit:cover; transition:transform .3s ease}
.gbild-link:hover img{transform:scale(1.03)}
.gbild-leiste{display:flex; align-items:center; gap:.6rem; padding:.55rem .6rem}
.gbild-autor{flex:1; min-width:0; font-size:.78rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gbild-aktion{display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border:none;
  background:none; color:var(--muted); border-radius:50%; padding:0}
.gbild-aktion svg{width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.gbild-aktion:hover{background:var(--paper); color:var(--text)}
.gbild-aktion.gefahr:hover{color:#B4341F}
.lightbox{position:fixed; inset:0; z-index:200; background:rgba(10,14,18,.94); display:flex; align-items:center; justify-content:center}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0; max-width:min(92vw,1800px); text-align:center}
.lightbox img{max-width:100%; max-height:84vh; margin:0 auto; box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lightbox figcaption{margin-top:.8rem; color:#CBD3C9; font-size:.84rem}
.lightbox figcaption a{color:var(--lichen)}
.lightbox button{position:absolute; background:rgba(255,255,255,.08); border:none; color:#fff; font-size:2rem; line-height:1;
  width:3rem; height:3rem; border-radius:50%}
.lightbox button:hover{background:rgba(255,255,255,.18)}
.lb-zu{top:1rem; right:1rem}
.lb-vor{left:1rem; top:50%; transform:translateY(-50%)}
.lb-nach{right:1rem; top:50%; transform:translateY(-50%)}
body.lb-offen{overflow:hidden}
.titelbild-wahl{display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:.5rem}
.tb-option{position:relative; cursor:pointer; border:2px solid transparent; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3;
  background:var(--surface-2); display:flex; align-items:center; justify-content:center}
.tb-option input{position:absolute; opacity:0}
.tb-option img{width:100%; height:100%; object-fit:cover}
.tb-option:has(input:checked){border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
.tb-option:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px}
.tb-leer{font-size:.76rem; color:var(--muted)}
.tb-likes{position:absolute; right:.25rem; bottom:.25rem; background:rgba(0,0,0,.6); color:#fff; font-size:.66rem; padding:.05rem .3rem; border-radius:2px}
.haken.haupt{padding:.9rem 1rem; background:var(--accent-soft); border-radius:var(--radius); margin-top:0}
.haken.haupt input{margin-top:.35rem}

/* ---------- Administration */
.admin-form{display:grid; gap:1.4rem; max-width:62rem}
.admin-gruppe{margin:0; padding:1.4rem 1.6rem 1.6rem}
.admin-gruppe legend{padding:0 .4rem; font-weight:600; font-size:.95rem}
.admin-felder{display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.4rem}
.admin-felder .field + .field{margin-top:0}
.admin-felder .breit{grid-column:1 / -1}
@media(max-width:700px){ .admin-felder{grid-template-columns:1fr} }
.personenliste{list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.8rem}
.person-zeile{padding:1.1rem 1.3rem}
.person-form{display:grid; grid-template-columns:1fr 1fr 2fr auto; gap:.8rem; align-items:end}
.person-form .field + .field{margin-top:0}
.person-form .btn{padding:.55rem .9rem}
@media(max-width:860px){ .person-form{grid-template-columns:1fr 1fr} .person-form .breit{grid-column:1 / -1} }
.person-aktionen{display:flex; gap:1.2rem; margin-top:.6rem}
.chronik-tabelle td a{color:var(--text); text-decoration:none}
.chronik-tabelle td a:hover{color:var(--accent)}
.chronik-tabelle tr.aus td{color:var(--muted)}
.chronik-tabelle tr.aus td b{font-weight:500}
.warnhinweis{color:#B86A14}
.schalter{position:relative; display:inline-block; width:2.6rem; height:1.45rem; cursor:pointer}
.schalter input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.schalter span{position:absolute; inset:0; background:var(--line); border-radius:999px; transition:background .15s}
.schalter span::after{content:""; position:absolute; top:.15rem; left:.15rem; width:1.15rem; height:1.15rem; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.3); transition:transform .15s}
.schalter input:checked + span{background:var(--accent)}
.schalter input:checked + span::after{transform:translateX(1.15rem)}
.schalter input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.eigene-liste{display:grid; gap:1rem}
.eigener-eintrag{padding:.4rem 1.4rem 1.1rem}
.eigener-eintrag.aus .eintrag{opacity:.55}
.vorschau-klein .eintrag{border-bottom:none; padding-bottom:.6rem}
@media(max-width:560px){
  .galerie{grid-template-columns:1fr 1fr; gap:.5rem}
  .gbild-autor{display:none}
  .gbild-leiste{padding:.4rem; gap:.2rem; justify-content:space-between}
  .galerie-leiste .btn{margin-left:0}
}

/* ===================================================================
   Impressum und Datenschutz
   =================================================================== */
.rechtstext .prose{max-width:68ch}
.rechtstext .prose h3{font-family:"Archivo",sans-serif; font-size:1rem; font-weight:600; letter-spacing:.01em;
  margin:2rem 0 .5rem; scroll-margin-top:90px}
.rechtstext .prose h3:first-child{margin-top:0}
.rechtstext .prose p + p{margin-top:.75rem}
.rechtstext .prose ul{margin:.6rem 0 0; padding-left:1.2rem}
.rechtstext .prose li + li{margin-top:.45rem}
.rechtstext .prose a{color:var(--brand)}
.rechtstext code{font-family:"IBM Plex Mono",monospace; font-size:.85em; background:var(--surface-2); padding:.05rem .3rem; border-radius:2px}
.rechts-raster{display:grid; grid-template-columns:1fr 1fr; gap:3rem}
@media(max-width:860px){ .rechts-raster{grid-template-columns:1fr; gap:1rem} }
.rechts-inhalt{display:flex; flex-wrap:wrap; gap:.35rem 1.1rem; margin:-1rem 0 2.2rem; padding-bottom:1.2rem;
  border-bottom:1px solid var(--line-soft); font-size:.84rem}
.rechts-inhalt a{color:var(--muted); text-decoration:none}
.rechts-inhalt a:hover{color:var(--accent)}
.legal a{color:var(--on-deep-muted)}
.legal a:hover{color:var(--lichen)}

/* Administration · E-Mail-Versand */
.mail-stand{display:flex; flex-wrap:wrap; gap:.8rem 1.4rem; align-items:center; justify-content:space-between; margin-bottom:1.4rem}
.mail-stand p{margin:0}
.mail-vorlage{margin-left:.6rem}
#vorlage-hinweis{margin:-.4rem 0 1rem; color:var(--ink)}