/* ueber-uns.html – zwei Vereine, eine Karte */
.ue-hero{padding-block:clamp(56px,8vw,120px) 0}
.ue-hero .kopf{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.ue-hero h1{margin:0}
.ue-hero .lede{margin:0}
.ue-hero .kopf{row-gap:0}
.ue-hero .hero-btn{margin:24px 0 0;grid-column:2}
.ue-hero figure{margin:0;aspect-ratio:16/9;background:var(--sky);overflow:hidden;width:min(100% - 2*var(--gutter), var(--max));margin-inline:auto}
.ue-hero img{width:100%;height:100%;object-fit:cover;background:var(--sky)}

/* Vereine: Text auf der einen Seite, Bild + Zahlen auf der anderen */
.verein .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,112px);align-items:start}
/* biberCard: anders komponiert – Text in zwei Spalten, darunter das Bild in voller Breite */
.verein--bc .wrap{grid-template-columns:minmax(0,1fr)}
.verein--bc .text{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,6vw,112px);row-gap:0;align-items:start}
.verein--bc .text > h2{grid-column:1/-1}
.verein--bc .text > p{grid-column:1}
.verein--bc .text > .zahlen{grid-column:2;grid-row:2;margin-top:12px}
.verein--bc .text > .personen{grid-column:2;grid-row:3;margin-top:32px}
.verein--bc .seite{min-height:0;width:100%;max-width:100%;height:auto;aspect-ratio:21/9;margin-top:clamp(40px,5vw,72px);align-self:start;justify-self:stretch}
.verein h2{max-width:16ch}
.verein .text p{max-width:60ch}
.verein .seite{margin:0;position:relative;min-height:clamp(360px,48vw,720px);background:var(--sky);overflow:hidden;align-self:stretch}
.verein .seite img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;background:var(--sky)}
/* Blick von der Stadtmauer: Ausschnitt nach unten, damit Kirchturm und Dächer im Band bleiben */
.verein--bc .seite img{object-position:50% 90%}
.verein .zahlen{margin-top:clamp(32px,4vw,48px)}
.zahlen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.zahlen li{display:grid;gap:4px}
.zahlen .zahl{font-family:var(--display);font-size:var(--step-3);line-height:.9;letter-spacing:-.03em;color:var(--blue);font-weight:600;font-variation-settings:"opsz" 144,"SOFT" 30}
.zahlen p{margin:0;max-width:30ch;font-weight:500}
.field-cream .zahlen .zahl{color:var(--deep)}
.personen{margin-top:32px;display:grid;gap:8px}
.personen p{margin:0;max-width:none}
.personen strong{color:var(--blue)}
.field-cream .personen strong{color:var(--deep)}

/* Band: Überschrift + Satz, darunter breites Bild */
.ue-band .kopf{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.ue-band h2{margin:0;max-width:14ch}
.ue-band .lede{margin:0;max-width:60ch}
.ue-band figure{margin:0;aspect-ratio:21/9;background:var(--sky);overflow:hidden}
.ue-band img{width:100%;height:100%;object-fit:cover;background:var(--sky)}

/* Zitat: Überschrift, große Zeile, voller Wortlaut, Quelle */
.zitat .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,80px);align-items:start}
.zitat h2{margin:0;max-width:12ch}
.zitat figure{margin:0}
.zitat blockquote{margin:0}
.zitat .gross{font-family:var(--display);font-size:var(--step-4);line-height:.95;letter-spacing:-.03em;font-weight:600;font-variation-settings:"opsz" 144,"SOFT" 30;color:var(--yellow);margin:0 0 .4em;max-width:14ch;text-wrap:balance}
.zitat .voll{font-size:var(--step-1);line-height:1.4;color:#fff;max-width:40ch;margin:0 0 1.2em}
.zitat figcaption{font-size:var(--step-0);color:#C9D6E2;max-width:40ch}

/* Ansprechpartner: offene Liste, links wer, rechts wie */
.kontakt .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,96px);align-items:start}
.kontakt h2{margin-bottom:.5em}
.kontakt .kontakt-kopf p{max-width:30ch}
.kontakt .liste{list-style:none;margin:0;padding:0;display:grid;gap:clamp(28px,3vw,40px)}
.kontakt .liste li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px clamp(24px,3vw,48px);align-items:start}
.kontakt .liste h3{font-size:var(--step-1);margin-bottom:.3em}
.kontakt .liste p{margin:0 0 .5em;max-width:34ch}
.kontakt .liste .wer p{color:var(--ink-2)}
.kontakt .liste p:last-child{margin:0}
.kontakt .liste a{font-weight:500}
.kontakt .liste li,.zahlen li{transition:transform .25s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.kontakt .liste li:hover,.zahlen li:hover{transform:translateY(-1px)}.kontakt .liste li:hover h3,.zahlen li:hover .zahl{color:var(--deep)}}
@media (prefers-reduced-motion:reduce){.kontakt .liste li:hover,.zahlen li:hover{transform:none}}

@media (max-width:860px){
  .ue-hero .kopf{grid-template-columns:1fr}
  .ue-hero .lede{margin-top:24px}
  .ue-hero .hero-btn{grid-column:1}
  .verein--bc .wrap{grid-template-columns:minmax(0,1fr)}
  .verein--bc .text{grid-template-columns:1fr}
  .verein--bc .text > p,.verein--bc .text > .zahlen,.verein--bc .text > .personen{grid-column:1;grid-row:auto}
  .verein--bc .seite{aspect-ratio:4/3;margin-top:32px}
  .kontakt .wrap{grid-template-columns:1fr;gap:24px}
  .ue-hero figure{width:100%;aspect-ratio:4/3}
  .verein .wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .zahlen{grid-template-columns:1fr}
  .ue-band .kopf{grid-template-columns:1fr}
  .ue-band figure{aspect-ratio:16/9}
  .zitat .wrap{grid-template-columns:1fr}
}
@media (max-width:600px){
  .verein .wrap{grid-template-columns:1fr}
  .kontakt .liste li{grid-template-columns:1fr}
  .verein .seite{margin-inline:calc(-1*var(--gutter));width:calc(100% + 2*var(--gutter));min-height:0;aspect-ratio:4/3}
  /* Marktplatz-Hochformat: schmal höher zeigen, damit Turm und Giebelhäuser im Bild sind */
  .verein:not(.verein--bc) .seite{aspect-ratio:4/5}
  .zahlen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zahlen .zahl{font-size:40px}
  .ue-band figure{margin-inline:calc(-1*var(--gutter));width:calc(100% + 2*var(--gutter));aspect-ratio:4/3}
}