/* Dachlugge-Spinner Basel 1955 – Stil angelehnt an die alte Seite */
:root{
  --text:#111; --muted:#555; --line:#ddd; --bg:#fff; --soft:#f5f5f5;
  --dunkel:#222; --blau:#2323c8; --rot:#e0301e; --max:1200px;
  --font:Roboto,system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.6;font-size:17px}
img{max-width:100%;height:auto;display:block}
a{color:var(--blau)}
a:hover{color:var(--rot)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;padding:8px;z-index:99}

/* Kopf mit Logo und Gruppenbild */
.kopfbild{background:#fff;padding:24px 0}
.kopfbild a{display:inline-block}
.kopfbild img{width:100%;max-width:700px;height:auto}
/* Menüleiste */
.leiste{background:var(--dunkel);position:sticky;top:0;z-index:50}
.leiste .wrap{display:flex;align-items:center;justify-content:space-between;min-height:58px;position:relative}
nav.haupt ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
nav.haupt a{display:block;padding:16px 20px;text-decoration:none;color:#fff;font-size:1rem}
nav.haupt a:hover,nav.haupt a[aria-current="page"]{color:var(--rot)}
.menu-knopf{display:none;background:none;border:1px solid #777;color:#fff;border-radius:3px;padding:8px 14px;font:inherit;cursor:pointer}
.leiste .kurz{display:none;color:#fff;font-weight:700}

/* Inhalt */
main{padding:44px 0 64px}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;color:var(--blau);font-weight:700}
h1{font-size:clamp(1.8rem,3.6vw,2.4rem)}
h2{font-size:1.6rem;margin-top:1.4em}
h3{font-size:1.25rem}
.einleitung{font-size:1.1rem;color:var(--muted);max-width:760px}
.mitte{text-align:center}

/* Startseite: Gedicht + Seitenleiste */
.zweispaltig{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:56px;align-items:start}
.gedicht-block{text-align:center}
.gedicht-block h1{margin-bottom:28px}
.gedicht{font-weight:700;white-space:pre-line;margin:0 0 1.2em}
.aufruf{font-weight:700}
.aufruf a{font-style:italic;font-weight:800;font-size:1.1rem}
.seitenleiste{position:sticky;top:90px}
.seitenleiste h2{font-size:1.2rem;color:var(--text);font-weight:500;margin-top:0}
.seitenleiste figure{margin:0 0 24px}
.seitenleiste figure img{border-radius:4px}
.termin-kurz{list-style:none;margin:0 0 20px;padding:0}
.termin-kurz li{border-bottom:1px solid var(--line);padding:10px 0}
.termin-kurz .datum{display:block;color:var(--rot);font-weight:700;font-size:.9rem}

.knopf{display:inline-block;background:var(--blau);color:#fff;text-decoration:none;font-weight:700;padding:12px 22px;border-radius:3px;border:0;cursor:pointer;font:inherit;font-weight:700}
.knopf:hover{background:var(--rot);color:#fff}
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px}
.karte{border:1px solid #222;padding:32px 20px;background:#fff;text-align:center}
.karte .datum{color:var(--rot);font-weight:700}

/* Kontakt */
.person img{width:116px;height:116px;border-radius:50%;margin:0 auto 18px;object-fit:cover}
.person h2{margin:0;font-size:2rem;color:#1c1c3c}
.person .name{font-size:1.15rem;font-weight:500;color:#1c1c3c;margin:.2em 0 1em}
.person .mail a{font-size:.95rem}

/* Termine */
.termine{list-style:none;padding:0;margin:0}
.termine li{display:grid;grid-template-columns:170px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.termine .tag{font-weight:700}
.termine .tag small{display:block;font-weight:400;color:var(--muted)}
.vorbei{opacity:.8}

/* Galerie */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin:20px 0}
.galerie a{display:block;overflow:hidden;background:var(--soft)}
.galerie img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .2s}
.galerie a:hover img{transform:scale(1.04)}
.galerie figure{margin:0}
.galerie figcaption{font-weight:500;text-align:center;padding:6px 2px}
.galerie.zwei-spalten{grid-template-columns:1fr 1fr;gap:16px 28px}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:100}
.lightbox.offen{display:flex}
.lightbox img{max-width:94vw;max-height:86vh;width:auto}
.lightbox button{position:absolute;background:rgba(255,255,255,.15);color:#fff;border:0;font-size:2rem;width:52px;height:52px;border-radius:50%;cursor:pointer}
.lightbox .zu{top:16px;right:16px}.lightbox .zur{left:16px}.lightbox .vor{right:16px}
.lightbox p{position:absolute;bottom:10px;color:#ddd;margin:0;font-size:.9rem}

/* Geschichte */
.geschichte{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:start}
.text p{margin:0 0 1.1em}
.geschichte .text{font-weight:700}
.zitat{font-size:1.1rem}

/* Formular */
form.formular{max-width:680px;display:grid;gap:16px}
.feld label{display:block;font-weight:600;margin-bottom:4px}
.feld input,.feld textarea{width:100%;padding:10px 12px;border:1px solid #aaa;border-radius:3px;font:inherit;background:#fff}
.feld input:focus,.feld textarea:focus{outline:2px solid var(--blau);border-color:var(--blau)}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wahl{display:flex;gap:20px;flex-wrap:wrap}
.wahl label{font-weight:400}
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.hinweis{background:var(--soft);border-left:4px solid var(--blau);padding:12px 16px}
.fehler{border-left-color:var(--rot)}

/* Fuss */
footer.fuss{background:var(--dunkel);color:#bbb;padding:22px 0;font-size:.92rem}
footer.fuss .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer.fuss a{color:#ddd}
footer.fuss a:hover{color:var(--rot)}

@media (max-width:900px){
  .zweispaltig,.geschichte{grid-template-columns:1fr;gap:36px}
  .seitenleiste{position:static}
}
@media (max-width:760px){
  .kopfbild{padding:14px 0}
  .menu-knopf,.leiste .kurz{display:block}
  nav.haupt{display:none;position:absolute;left:0;right:0;top:100%;background:var(--dunkel)}
  nav.haupt.offen{display:block}
  nav.haupt ul{flex-direction:column;padding:4px 0 10px}
  nav.haupt a{padding:12px 20px}
  .zwei{grid-template-columns:1fr}
  .termine li{grid-template-columns:1fr;gap:4px}
  .galerie.zwei-spalten{gap:12px}
}