/* Grundlagen – bewusst knapp gehalten. Das Gesicht macht jeder Entwurf selbst. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.sprung { position: absolute; left: -9999px; top: 0; z-index: 99;
  padding: .7rem 1rem; background: #fff; color: #000; }
.sprung:focus { left: 0; }
.aussen { font-size: .8em; opacity: .55; margin-left: .18em; }
.hauptmenue.ist-offen { display: block; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Anriss auf der Startseite: eine Gruppe, dafür zweispaltig gesetzt. */
.hg--teaser { grid-template-columns: 1fr !important; }
@media (min-width: 46rem) { .hg--teaser ul { columns: 2 18rem; column-gap: 2.4rem; }
  .hg--teaser li { break-inside: avoid; } }

/* Umbruchsicherheit: lange Adressen und Komposita dürfen kein Layout sprengen. */
body { overflow-wrap: break-word; hyphens: none; -webkit-hyphens: none;
       -ms-hyphens: none; word-break: normal; }
.kontakt__feld, .hg__gruppe, .res__gruppe, .aktiv__karte, .termin,
.fuss__spalte, .galerie__punkt, .dreiklang li, .video, .foto,
.galerie__stueck, .hero__blatt, .karte { min-width: 0; }
.kontakt__sozial li, .fuss__sozial li, .res__gruppe li, .hg__gruppe li,
.kontakt__iban, .fuss__iban { overflow-wrap: anywhere; hyphens: none; }
h1, h2, h3, .termin__datum, .knopf { hyphens: none; }

/* ---- Rückruf-Terminkalender: nur das Gerüst. Das Aussehen macht jeder Entwurf. ---- */
.rueckruf__raster { display: grid; gap: 1.6rem; }
@media (min-width: 48rem) { .rueckruf__raster { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (min-width: 64rem) { .rueckruf__raster { grid-template-columns: 22rem minmax(0,1fr); } }
.kalender__kopf { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.kalender__monat { flex: 1 1 auto; text-align: center; }
.kalender__wochentage, .kalender__gitter {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .22rem; }
.kalender__wochentage { text-align: center; }
.kalender__tag { display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; min-height: 2.1rem; }
.kalender__tag--leer { visibility: hidden; }
.kalender__tag:disabled { cursor: default; }
.zeiten__gitter { display: grid; gap: .35rem;
  grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); }
.rueckruf__formular { margin-top: 1.6rem; display: grid; gap: .9rem; }
@media (min-width: 40rem) { .rueckruf__formular { grid-template-columns: repeat(2, 1fr); }
  .feld--breit, .rueckruf__zusammenfassung, .rueckruf__aktionen,
  .rueckruf__meldung, .rueckruf__hinweis { grid-column: 1 / -1; } }
.feld { display: grid; gap: .3rem; }
.feld input, .feld textarea { width: 100%; font: inherit; }
.feld textarea { resize: vertical; }
.rueckruf__aktionen { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.rueckruf__ics[aria-disabled="true"] { opacity: .5; }
.rueckruf__meldung:empty { display: none; }
.rueckruf__raster { align-items: start; }

/* 02 · WAPPEN — Zürcher Klassik. Serifen, feine Linien, viel Weissraum. */

:root{
  --grund:#fbfaf8; --tinte:#000000; --grau:var(--tinte); --hell:#eef1f5;
  --dunkel:#1b2430;
  --schrift:Arial,Helvetica,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --blau:#2f6fa8; --blau-tief:#1d4a72; --gruen:#4f8b1f; --rot:#b3241d;
  --linie:#d6dce4; --breite:66rem;
}

/* Theme-Isolation: Erzwingt den hellen Original-Hintergrund auch bei dunklen WordPress-Themes */
html,
body,
body.page-template-vaz,
body.wp-singular,
.wp-site-blocks,
.seite,
.entwurf--wappen,
.zueri-webseite-wrapper,
#buehne {
  background-color: var(--grund) !important;
  background: var(--grund) !important;
  color: var(--tinte) !important;
  font-family: var(--schrift) !important;
}

body {
  font: 1.0625rem/1.72 var(--schrift);
  margin: 0 !important;
  padding: 0 !important;
}

.zueri-webseite-wrapper {
  background-color: var(--grund) !important;
  background: var(--grund) !important;
  color: var(--tinte) !important;
  font: 1.0625rem/1.72 var(--schrift) !important;
  min-height: 100vh;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}

/* FSE / Gutenberg Theme-Abstände neutralisieren */
.wp-site-blocks {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

h1,h2,h3{font-weight:400; letter-spacing:-.005em; line-height:1.18}
a{color:var(--blau-tief); text-underline-offset:.18em}
a:hover{color:var(--rot)}
.aussen{color:var(--grau)}

/* Spezifische Theme-Absicherung für Links, Knöpfe und Fusszeile */
.zueri-webseite-wrapper a,
.seite a {
  color: var(--blau-tief);
}
.zueri-webseite-wrapper a:hover,
.seite a:hover {
  color: var(--blau);
}
.zueri-webseite-wrapper .kopf a,
.seite .kopf a,
.zueri-webseite-wrapper .hauptmenue a,
.seite .hauptmenue a {
  color: var(--tinte) !important;
  text-decoration: none;
}
.zueri-webseite-wrapper .hauptmenue a:hover,
.seite .hauptmenue a:hover,
.zueri-webseite-wrapper .hauptmenue .ist-aktiv,
.seite .hauptmenue .ist-aktiv {
  color: var(--blau-tief) !important;
}
.zueri-webseite-wrapper .knopf,
.seite .knopf {
  color: var(--blau-tief) !important;
  border-color: var(--blau-tief) !important;
  background: transparent;
  text-decoration: none;
}
.zueri-webseite-wrapper .knopf:hover,
.seite .knopf:hover {
  background: var(--blau-tief) !important;
  color: #fff !important;
}
.zueri-webseite-wrapper .knopf--stark,
.seite .knopf--stark {
  background: var(--blau-tief) !important;
  color: #fff !important;
  border-color: var(--blau-tief) !important;
}
.zueri-webseite-wrapper .knopf--stark:hover,
.seite .knopf--stark:hover {
  background: var(--dunkel) !important;
  border-color: var(--dunkel) !important;
}
.zueri-webseite-wrapper .fuss,
.seite .fuss {
  background: var(--dunkel) !important;
  color: #e7ecf2 !important;
}
.zueri-webseite-wrapper .fuss a,
.seite .fuss a {
  color: #fff !important;
}
.zueri-webseite-wrapper .fuss a:hover,
.seite .fuss a:hover {
  color: #9fc9ea !important;
}

/* ---------- Kopf ---------- */
.kopf{background:#fff; border-bottom:1px solid var(--linie)}
.kopf--band .kopf__innen{max-width:var(--breite); margin:0 auto; padding:1.3rem 1.25rem;
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap}
.marke__logo{width:10.5rem}
.kopf__zusatz{display:none; font-style:italic; color:var(--grau); font-size:.95rem}
.menue-schalter{margin-left:auto; display:flex; align-items:center; gap:.55rem;
  font:.8rem/1 var(--schrift); letter-spacing:.2em; text-transform:uppercase;
  color:var(--blau-tief)}
.menue-schalter__strich{width:1.2rem; height:1px; background:currentColor;
  box-shadow:0 5px 0 currentColor, 0 -5px 0 currentColor}
.hauptmenue{display:none; flex-basis:100%; border-top:1px solid var(--linie); margin-top:1rem}
.hauptmenue ul{display:grid; gap:0}
.hauptmenue a{display:block; padding:.7rem 0; border-bottom:1px solid var(--linie);
  text-decoration:none; font:.98rem/1 var(--schrift); letter-spacing:.04em;
  color:var(--tinte)}
.hauptmenue .ist-aktiv{color:var(--blau)}
@media(min-width:58rem){
  .menue-schalter{display:none}
  .kopf__zusatz{display:block; margin-left:1rem; padding-left:1rem; border-left:1px solid var(--linie)}
  .hauptmenue{display:block; flex:0 0 100%; margin-top:.9rem; border-top:1px solid var(--linie)}
  .hauptmenue ul{display:flex; gap:1.9rem; justify-content:center; flex-wrap:wrap}
  .hauptmenue a{border:0; padding:.85rem 0; position:relative}
  .hauptmenue a::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
    background:var(--blau); transform:scaleX(0); transition:transform .18s ease}
  .hauptmenue a:hover::after,.hauptmenue .ist-aktiv::after{transform:scaleX(1)}
}

/* ---------- Raster ---------- */
main{max-width:var(--breite); margin:0 auto; padding:0 1.25rem}
.block{padding:4rem 0}
.block+.block{border-top:1px solid var(--linie)}
.block__titel{font-size:clamp(1.6rem,3.4vw,2.35rem); margin-bottom:1.2rem;
  padding-bottom:.6rem; border-bottom:1px solid var(--linie)}
.block__lead{max-width:none; color:var(--grau); font-size:1.0625rem; margin-bottom:1.6rem}

.knopf{display:inline-block; padding:.72rem 1.5rem; border:1px solid var(--blau-tief);
  color:var(--blau-tief); text-decoration:none; font:.9rem/1 var(--schrift);
  letter-spacing:.12em; text-transform:uppercase; transition:background .18s ease,color .18s ease}
.knopf:hover{background:var(--blau-tief); color:#fff}
.knopf--stark{background:var(--blau-tief); color:#fff}
.knopf--stark:hover{background:var(--dunkel); border-color:var(--dunkel)}

/* ---------- Hero ---------- */
.hero--wappen{padding:3.6rem 0 0; text-align:center}
.hero__mitte{max-width:44rem; margin:0 auto}
.hero__ort{font:.78rem/1 var(--schrift); letter-spacing:.34em; text-transform:uppercase;
  color:var(--blau)}
.hero--wappen h1{font-size:clamp(2.4rem,7vw,4.4rem); margin:1rem 0 .4rem}
.hero__claim{font-style:italic; font-size:1.25rem; color:var(--grau)}
.hero__linie{width:5rem; height:0; border:0; border-top:2px solid var(--blau); margin:2rem auto}
.hero__satz{font-size:1.15rem; max-width:36rem; margin:0 auto}
.hero__knoepfe{margin-top:2rem}
.hero__breitbild{margin-top:3rem; position:relative}
.hero__breitbild img{width:100%}
.hero__breitbild figcaption{max-width:var(--breite); margin:.7rem auto 0; font-size:.85rem;
  color:var(--grau); font-style:italic; text-align:left}
@media(min-width:60rem){
  .hero__breitbild{margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); width:100vw}
  .hero__breitbild figcaption{padding:0 1.25rem}
}

/* ---------- Intro ---------- */
.intro__satz{font-size:1.0625rem; line-height:1.6}
.intro__spalten{display:grid; gap:1.6rem}
.intro__neben{color:var(--grau); font-size:1.0625rem; border-left:2px solid var(--blau);
  padding-left:1.2rem}
@media(min-width:52rem){.intro__spalten{grid-template-columns:1.35fr 1fr; gap:3rem}}

/* ---------- aktiv sein ---------- */
.aktiv__fliess{max-width:none}
.aktiv__fliess p{margin-bottom:1.15rem}
.aktiv__fliess p:first-child::first-letter{float:left; font-size:3.6rem; line-height:.82;
  padding:.25rem .55rem .1rem 0; color:var(--blau)}
.aktiv__karten{display:grid; gap:1.6rem}
.aktiv__zahl{display:block; font:.8rem/1 var(--schrift); letter-spacing:.2em;
  color:var(--blau); margin-bottom:.4rem}
.aktiv__karte{border-top:1px solid var(--linie); padding-top:.9rem}
@media(min-width:52rem){.aktiv__karten{grid-template-columns:repeat(3,1fr); gap:2.2rem}}

.aktiv__schluss{margin-top:1.6rem; font-size:1.15rem; font-style:italic; color:var(--blau-tief)}

/* ---------- Termine ---------- */
.termine__art{font-style:italic; color:var(--grau); margin:-.6rem 0 1.6rem}
.termine{display:grid}
.termine--zeile .termin{display:grid; gap:.25rem 1.5rem; padding:1.1rem 0;
  border-bottom:1px solid var(--linie); align-items:baseline}
.termine--zeile .termin:first-child{border-top:1px solid var(--linie)}
.termin__datum{font-size:1.12rem}
.termin__zeit{color:var(--grau)}
.termin__ort{font-size:1rem}
.termin__detail{display:block; font-style:italic; color:var(--grau)}
.termin__fb{font:.82rem/1 var(--schrift); letter-spacing:.1em; text-transform:uppercase}
.termine--karte{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.4rem}
.termine--karte .termin{border:1px solid var(--linie); background:#fff; padding:1.4rem}
.termine--karte .termin__datum b{display:block; font-size:1.5rem}
.termine--ticket{gap:1.2rem}
.termine--ticket .termin{display:grid; grid-template-columns:auto 1fr; gap:1.4rem;
  border:1px solid var(--linie); background:#fff; padding:1.2rem}
.termin__abriss{text-align:center; border-right:1px dashed var(--linie); padding-right:1.2rem}
.termin__tagzahl{display:block; font-size:2.4rem; line-height:1; color:var(--blau)}
.termine__hinweis{margin-top:1.6rem; color:var(--grau); font-style:italic; max-width:36rem}
@media(min-width:52rem){.termine--zeile .termin{grid-template-columns:15rem 9rem 1fr auto}}

/* ---------- Fotos ---------- */
.fotos{display:grid; gap:1.6rem}
.fotos figcaption{margin-top:.6rem; font-size:.86rem; color:var(--grau); font-style:italic}
.fotos img{border:1px solid var(--linie)}
@media(min-width:46rem){
  .fotos--raster,.fotos--streifen{grid-template-columns:repeat(3,1fr)}
  .fotos--collage{grid-template-columns:1.5fr 1fr}
}

/* ---------- Galerie ---------- */
.galerie__text{max-width:none; font-size:1.0625rem}
.galerie__punkte{display:grid; gap:1.4rem; margin:2.4rem 0}
.galerie__vorspann{font-style:italic; color:var(--grau)}
.galerie__punkt h3{font-size:1.15rem; color:var(--blau-tief); margin-bottom:.3rem}
.galerie{display:grid; gap:1.6rem}
.galerie__stueck figcaption{margin-top:.55rem; font-size:.85rem; color:var(--grau); font-style:italic}
.galerie__stueck img{border:1px solid var(--linie)}
.galerie__schluss{margin-top:2.4rem; max-width:none}
.galerie__kredit{margin-top:.8rem; font-size:.8rem; color:var(--grau); letter-spacing:.08em}
@media(min-width:46rem){.galerie{grid-template-columns:repeat(2,1fr)}
  .galerie__punkte{grid-template-columns:repeat(3,1fr)}}

/* ---------- Videos ---------- */
.videos{display:grid; gap:1.8rem}
.video__flaeche{position:relative; display:block; background:var(--dunkel); overflow:hidden}
.video__flaeche img{transition:transform .3s ease}
.video__flaeche:hover img{transform:scale(1.03)}
.video__knopf{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:3.4rem; height:3.4rem; border:2px solid #fff; border-radius:50%;
  background:rgba(27,36,48,.5)}
.video__knopf::after{content:""; position:absolute; left:56%; top:50%; transform:translate(-50%,-50%);
  border-left:.85rem solid #fff; border-top:.52rem solid transparent;
  border-bottom:.52rem solid transparent}
.video__quelle{position:absolute; right:.6rem; bottom:.6rem; color:#fff;
  font:.72rem/1 var(--schrift); letter-spacing:.1em; text-transform:uppercase;
  background:rgba(27,36,48,.72); padding:.35rem .5rem}
.video__titel{margin-top:.7rem; font-size:1.1rem}
.video__lead{margin-top:.4rem; font-size:.93rem; color:var(--grau)}
.videos__mehr{margin-top:2rem}
@media(min-width:46rem){.videos{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64rem){.videos--raster{grid-template-columns:repeat(3,1fr)}}

/* ---------- Hintergründe / Ressourcen ---------- */
.hg,.res{display:grid; gap:2.2rem}
.hg__gruppe h3,.res__gruppe h3{font-size:1.2rem; color:var(--blau-tief);
  border-bottom:1px solid var(--linie); padding-bottom:.4rem; margin-bottom:.7rem}
.hg__gruppe li,.res__gruppe li{padding:.32rem 0; font-size:1.0625rem}
.hg__gruppe a,.res__gruppe a{text-decoration:none}
.hg__gruppe a:hover,.res__gruppe a:hover{text-decoration:underline}
.hg__mehr{margin-top:2rem}
@media(min-width:46rem){.hg,.res{grid-template-columns:repeat(2,1fr); gap:2.4rem 3rem}}
@media(min-width:68rem){.res{grid-template-columns:repeat(3,1fr)}}

/* ---------- Broschüre ---------- */
.broschuere{display:grid; gap:1.6rem; align-items:center; background:var(--hell);
  padding:2.4rem 1.6rem}
.broschuere__text p{max-width:32rem; color:var(--grau)}
.broschuere__aktion{margin-top:1.4rem; display:flex; gap:1rem; align-items:center; flex-wrap:wrap}
.broschuere__name{font:.78rem/1 var(--schrift); letter-spacing:.16em;
  text-transform:uppercase; color:var(--grau)}
.broschuere__marke img{width:min(10rem,38vw); opacity:.22}
@media(min-width:46rem){.broschuere{grid-template-columns:1fr auto; padding:3rem 3rem}}

/* ---------- Zitat / Dreiklang / CTA ---------- */
.zitat{text-align:center}
.zitat blockquote{max-width:40rem; margin:0 auto}
.zitat p{font-size:clamp(1.3rem,3.2vw,1.9rem); font-style:italic; line-height:1.4}
.zitat cite{display:block; margin-top:1rem; font-style:normal;
  font:.78rem/1 var(--schrift); letter-spacing:.24em; text-transform:uppercase;
  color:var(--blau)}
.dreiklang{display:grid; gap:1.4rem; text-align:center}
.dreiklang__auf{display:block; font-size:1.3rem}
.dreiklang__ab{display:block; font-style:italic; color:var(--grau)}
@media(min-width:46rem){.dreiklang{grid-template-columns:repeat(3,1fr)}}
.cta{display:grid; gap:1.4rem; align-items:center; border-top:2px solid var(--blau);
  padding-top:2.4rem}
.cta h2{font-size:clamp(1.5rem,3.6vw,2.2rem)}
.cta p{color:var(--grau); max-width:34rem; margin-top:.5rem}
.cta__knoepfe{display:flex; gap:.8rem; flex-wrap:wrap}
@media(min-width:52rem){.cta{grid-template-columns:1fr auto}}

/* ---------- Tischdebatten ---------- */
.tisch{display:grid; gap:2rem}
.tisch__text p{margin-bottom:1.1rem; max-width:36rem}
.tisch__bild img{border:1px solid var(--linie)}
.tisch__bild figcaption{margin-top:.55rem; font-size:.85rem; color:var(--grau); font-style:italic}
.tisch__archiv{margin-top:2.4rem; border-top:1px solid var(--linie); padding-top:1.4rem}
.tisch__archiv h3{font-size:1.15rem; color:var(--blau-tief); margin-bottom:.5rem}
.tisch__archiv li{padding:.25rem 0}
@media(min-width:52rem){.tisch{grid-template-columns:1.25fr 1fr; gap:3rem; align-items:start}}

/* ---------- Kontakt ---------- */
.kontakt{display:grid; gap:1.6rem}
.kontakt__feld{background:#fff; border:1px solid var(--linie); padding:1.6rem}
.kontakt__feld h2{font-size:1.2rem; color:var(--blau-tief); margin-bottom:.6rem}
.kontakt__gross{font-size:1.2rem}
.kontakt__iban{margin-top:.9rem; font-family:var(--schrift); font-size:.92rem;
  line-height:1.6; color:var(--grau)}
.kontakt__sozial li{padding:.3rem 0; border-bottom:1px solid var(--linie)}
.kontakt__dienst{margin-left:.5rem; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grau)}
@media(min-width:46rem){.kontakt{grid-template-columns:repeat(2,1fr)}}

/* ---------- Rückruf: ruhig gesetzt ---------- */
.rueckruf__lead{max-width:38rem; color:var(--grau); font-size:1.05rem}
.rueckruf__raster{margin-top:2rem}
.kalender,.zeiten{background:#fff; border:1px solid var(--linie); padding:1.2rem}
.kalender__monat{font-size:1.15rem}
.kalender__nav{width:2rem; height:2rem; border:1px solid var(--linie); color:var(--blau-tief);
  border-radius:50%}
.kalender__nav:disabled{opacity:.3}
.kalender__wochentage span{font:.7rem/1 var(--schrift); letter-spacing:.16em;
  text-transform:uppercase; color:var(--grau); padding:.6rem 0}
.kalender__tag{border:1px solid transparent; font-size:.95rem}
.kalender__tag:hover:not(:disabled):not(.kalender__tag--gewaehlt){border-color:var(--blau); color:var(--blau-tief)}
.kalender__tag--aus{color:#c2cbd6}
.kalender__tag--heute{font-weight:700; color:var(--blau)}
.kalender__tag--gewaehlt{background:var(--blau-tief); color:#fff; border-color:var(--blau-tief)}
.kalender__fuss,.zeiten__fuss{margin-top:.9rem; font-size:.8rem; color:var(--grau); font-style:italic}
.zeiten__titel{font:.76rem/1 var(--schrift); letter-spacing:.24em; text-transform:uppercase;
  color:var(--blau); margin-bottom:.9rem}
.zeit{border:1px solid var(--linie); padding:.5rem .2rem; font-size:.92rem; background:#fff}
.zeit:hover:not(.zeit--gewaehlt){border-color:var(--blau); color:var(--blau-tief)}
.zeit--gewaehlt{background:var(--blau-tief); color:#fff; border-color:var(--blau-tief)}
.feld label{font:.76rem/1.3 var(--schrift); letter-spacing:.14em; text-transform:uppercase;
  color:var(--grau)}
.feld__pflicht{color:var(--rot)} .feld__wahl{text-transform:none; letter-spacing:0; font-style:italic}
.feld input,.feld textarea{border:1px solid var(--linie); padding:.6rem .75rem; background:#fff}
.feld input:focus,.feld textarea:focus{border-color:var(--blau); outline:none}
.rueckruf__zusammenfassung{border-top:1px solid var(--linie); padding-top:.9rem; font-style:italic;
  color:var(--grau)}
.rueckruf__zusammenfassung.ist-gesetzt{font-style:normal; color:var(--blau-tief); font-size:1.05rem}
.rueckruf__meldung{padding:.7rem .9rem; background:var(--hell); border-left:3px solid var(--blau)}
.rueckruf__meldung.ist-fehler{border-left-color:var(--rot); color:var(--rot)}
.rueckruf__hinweis{font-size:.86rem; color:var(--grau)}

/* ---------- Kontaktformular ---------- */
.kformular__karte{background:#fff; border:1px solid var(--linie); padding:1.6rem; max-width:44rem}
.kformular__lead{margin-top:.5rem; color:var(--grau); font-size:1.02rem}
.kformular{margin-top:1.4rem; display:grid; gap:.9rem}
@media(min-width:40rem){.kformular{grid-template-columns:repeat(2,1fr)}
  .kformular .feld--breit,.kformular__aktionen,
  .kformular__meldung,.kformular__hinweis{grid-column:1 / -1}}
.kformular__aktionen{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center}
.kformular__meldung{padding:.7rem .9rem; background:var(--hell); border-left:3px solid var(--blau)}
.kformular__meldung.ist-fehler{border-left-color:var(--rot); color:var(--rot)}
.kformular__meldung.ist-gut{border-left-color:var(--gruen); color:var(--blau-tief)}
.kformular__meldung:empty{display:none}
.kformular__hinweis{font-size:.86rem; color:var(--grau)}
.kformular button[disabled]{opacity:.55; cursor:default}

/* ---------- Seitenkopf ---------- */
.seitenkopf{padding:3.4rem 0 2.4rem; display:grid; gap:1.8rem; text-align:center}
.seitenkopf__kicker{font:.76rem/1 var(--schrift); letter-spacing:.32em;
  text-transform:uppercase; color:var(--blau)}
.seitenkopf h1{font-size:clamp(2rem,5.4vw,3.2rem); margin:.9rem 0 .7rem}
.seitenkopf__lead{max-width:36rem; margin:0 auto; color:var(--grau); font-size:1.05rem}
.seitenkopf__bild img{width:100%; border:1px solid var(--linie)}

/* ---------- Fuss ---------- */
.fuss{background:var(--dunkel); color:#e7ecf2; margin-top:4rem}
.fuss a{color:#fff}
.fuss a:hover{color:#9fc9ea}
.fuss__innen{max-width:var(--breite); margin:0 auto; padding:3rem 1.25rem 2rem;
  display:grid; gap:2rem}
.fuss h2{font:.76rem/1 var(--schrift); letter-spacing:.24em; text-transform:uppercase;
  color:#8fb4d4; margin-bottom:.8rem}
.fuss__logo{width:9rem; background:#fff; padding:.5rem .6rem; border-radius:2px}
.fuss__claim{margin-top:.9rem; font-style:italic}
.fuss__seit{margin-top:.3rem; font-size:.85rem; color:#8794a5}
.fuss li{padding:.2rem 0; font-size:.96rem}
.fuss__dienst{margin-left:.4rem; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:#8794a5}
.fuss__iban{margin-top:.6rem; font-size:.9rem; line-height:1.6; color:#c3cedb}
.fuss__band{border-top:1px solid rgba(255,255,255,.15)}
.fuss__band>*{max-width:var(--breite); margin:0 auto; padding:0 1.25rem}
.fuss__zitat{padding-top:1.6rem!important; font-style:italic; font-size:1.05rem}
.fuss__zitat cite{color:#8fb4d4}
.fuss__klein{padding:.8rem 1.25rem 2.4rem!important; font-size:.8rem; color:#8794a5}
@media(min-width:46rem){.fuss__innen{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64rem){.fuss__innen{grid-template-columns:1.2fr .8fr 1fr 1fr}}

/* ---------- Neu 2026: Eingangsseite, Rubriken, Leitsätze, Gruppenfoto ---------- */

/* Signet als Eingang: das Wappen trägt die Seite, nicht eine Schlagzeile. */
.hero__signet{margin:1.6rem auto .9rem; width:min(26rem,74vw)}
.hero__signet img{width:100%}

/* Rubriken-Index auf der Startseite – nutzt das Kartenraster von „aktiv sein“. */
.rubriken .aktiv__karte h3{font-size:1.24rem; margin-bottom:.35rem}
.rubriken a{text-decoration:none}
.rubriken a:hover{text-decoration:underline}
.rubriken p{color:var(--grau); font-size:.98rem}
@media(min-width:52rem){.rubriken{grid-template-columns:repeat(3,1fr)}}

/* Die vier Leitsätze aus „Was wir tun“. */
.leitsaetze{display:grid; gap:1.8rem}
.leitsatz{border-top:1px solid var(--linie); padding-top:1rem}
.leitsatz h3{font:.8rem/1 var(--schrift); letter-spacing:.2em;
  text-transform:uppercase; color:var(--blau); margin-bottom:.55rem}
.leitsatz p{font-size:1.0625rem}
@media(min-width:52rem){.leitsaetze{grid-template-columns:repeat(2,1fr); gap:2.2rem 3rem}}

/* Kurztext unter einer Gruppenüberschrift in Hintergründen/Ressourcen. */
.hg__text,.res__text{font-size:1.0625rem; color:var(--grau); margin-bottom:.5rem}

/* Nummerierung der Unterrubriken (4.1, 4.2 …) – dezent, nur zur Orientierung. */
.unter__nr{display:block; font:.8rem/1 var(--schrift); letter-spacing:.2em;
  color:var(--blau); margin-bottom:.4rem}
.block__titel .unter__nr{margin-bottom:.5rem}

/* Noch offene Inhalte sichtbar, aber ruhig markieren. */
.folgt{border-left:2px solid var(--linie); padding-left:1.1rem; color:var(--grau);
  font-style:italic}

/* Vergangene Termine bleiben lesbar, geben sich aber als vergangen zu erkennen. */
.termin--vergangen{opacity:.55}
.termin--vergangen .termin__datum::after{content:" · vergangen";
  font:.72rem/1 var(--schrift); letter-spacing:.14em; text-transform:uppercase;
  color:var(--grau)}
.termine__leer{margin-top:1.2rem; color:var(--grau); font-style:italic}

/* Reservierter Platz für das jeweils aktuelle Gruppenfoto. */
.gruppenfoto img{width:100%; border:1px solid var(--linie); background:var(--hell);
  aspect-ratio:4 / 3; object-fit:cover}
.gruppenfoto figcaption{margin-top:.6rem; font-size:.86rem; color:var(--grau); font-style:italic}

/* Platzhalter, die noch eine echte Angabe brauchen. */
.ist-platzhalter{color:var(--grau); font-style:italic; text-decoration:none; cursor:default}
.termin[hidden],.termine__leer[hidden]{display:none}

/* ---------- Nachbesserungen aus der Prüfung ---------- */

/* Das Signet trägt die Eingangsseite. Muss die h1-Regel des Heros schlagen,
   sonst steht es linksbündig statt in der Mitte. */
.hero--wappen h1.hero__signet{margin:1.6rem auto .9rem; width:min(26rem,74vw)}

/* Vergangene Termine: zurückgenommen, aber noch kontraststark genug (WCAG AA). */
.termin--vergangen{opacity:.72}

/* Die Kopflinie der Terminliste hängt am ersten SICHTBAREN Termin – sonst
   verliert die Liste ihre obere Linie, sobald der erste Termin vorbei ist. */
.termine--zeile .termin--erster{border-top:1px solid var(--linie)}

/* Kontaktkacheln stehen jetzt unter einer Abschnittsüberschrift, daher h3. */
.kontakt__feld h3{font-size:1.2rem; color:var(--blau-tief); margin-bottom:.6rem}

/* Einzelne Kachel ohne Raster darum soll die volle Breite nutzen. */
.kontakt__einzeln{max-width:32rem; margin-inline:auto}

/* Fliesstext unter einer Rubriküberschrift (4.2). */
.wie__text{max-width:none; margin-bottom:1.8rem}
.wie__text p{margin-bottom:1.05rem}
.wie__text p:last-child{margin-bottom:0}

/* ---------- Memes ---------- */
.memes{list-style:none; display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}
.meme img{width:100%; height:auto; display:block; border:1px solid var(--linie)}

/* ---------- Polish 2026: ruhiger, konsistenter, gleiches System auf allen Rubriken ----------
   Nur Erscheinungsbild. Kein Markup, keine Texte, keine Links, keine Assets. */

:root{--radius:4px; --schatten:0 1px 2px rgba(27,36,48,.04), 0 10px 24px -18px rgba(27,36,48,.22)}

/* Vollbreites Hero-Bild: 100vw darf bei sichtbarer Scrollleiste keinen Querlauf erzeugen. */
html{overflow-x:clip}

/* Links: ruhiges Hover in der eigenen Blaufamilie statt Rot; klarer Fokus. */
a{transition:color .15s ease, text-decoration-color .15s ease}
a:hover{color:var(--blau)}
:focus-visible{outline:2px solid var(--blau); outline-offset:3px; border-radius:2px}
.fuss :focus-visible{outline-color:#9fc9ea}

/* Kopf und Navigation: enger, gleichmässige Abstände, deutliche Zustände. */
.kopf--band .kopf__innen{padding:1.1rem 1.25rem 0}
.hauptmenue{margin-top:.9rem}
.hauptmenue a{color:var(--tinte); transition:color .15s ease}
.hauptmenue a:hover{color:var(--blau-tief)}
.hauptmenue .ist-aktiv{color:var(--blau-tief)}
.hauptmenue.ist-offen{padding-bottom:.4rem}
.menue-schalter{padding:.55rem 0 .85rem}
@media(min-width:58rem){
  .hauptmenue{margin-top:.75rem}
  .hauptmenue ul{gap:0 2.2rem}
  .hauptmenue a{padding:.95rem 0 .9rem; letter-spacing:.05em}
  .hauptmenue a::after{height:2px; bottom:-1px}
}
@media(max-width:57.99rem){
  .kopf--band .kopf__innen{padding:1rem 1.25rem}
  .hauptmenue{margin-top:.8rem}
  .hauptmenue a{padding:.85rem 0}
}

/* Vertikaler Rhythmus: gleiche Sektionsabstände, weniger Leerraum unter dem Seitenkopf. */
.block{padding:3.6rem 0}
.block__titel{margin-bottom:1.6rem; padding-bottom:.7rem}
.seitenkopf{padding:3.2rem 0 2rem; gap:1.4rem}
.seitenkopf h1{margin:.8rem 0 .6rem}
.seitenkopf+.block{padding-top:2.2rem}
.seitenkopf+.block.block--broschuere,.seitenkopf+.block.broschuere{margin-top:2.2rem}
.hero--wappen{padding:3rem 0 0}
.hero__knoepfe{margin-top:1.8rem}
.hero__breitbild{margin-top:2.8rem}
.fuss{margin-top:3.6rem}
@media(max-width:46rem){
  .block{padding:2.6rem 0}
  .seitenkopf{padding:2.4rem 0 1.4rem}
  .seitenkopf+.block{padding-top:1.6rem}
  .hero--wappen{padding:2.2rem 0 0}
  .hero__breitbild{margin-top:2rem}
  .fuss{margin-top:2.6rem}
}

/* Knöpfe: ein Radius, gleiche Höhe, ruhige Übergänge. */
.knopf{border-radius:var(--radius); padding:.78rem 1.55rem; line-height:1.1}
.knopf:focus-visible{outline-offset:3px}

/* Karten und Kästen: ein System – weiss, feine Linie, kleiner Radius, kaum sichtbarer Schatten. */
.kontakt__feld,.termine--karte .termin,.termine--ticket .termin,.kalender,.zeiten,
.kformular__karte,.broschuere,.meme{border:1px solid var(--linie); border-radius:var(--radius);
  background:#fff; box-shadow:var(--schatten)}
.fotos img,.galerie__stueck img,.tisch__bild img,.seitenkopf__bild img,.gruppenfoto img{border-radius:var(--radius)}

/* Flyer-Kasten: als Karte wie die übrigen Kästen, nicht als Farbfläche. */
.block--broschuere.broschuere{padding:2.2rem 2.2rem 2.4rem; margin-top:0}
.block+.block--broschuere.broschuere{border-top:1px solid var(--linie)}
.broschuere .block__titel{margin-bottom:.4rem; padding-bottom:.6rem}
.broschuere__aktion{margin-top:1.1rem}
@media(min-width:46rem){.block--broschuere.broschuere{padding:2.6rem 2.8rem 2.8rem}}
@media(max-width:46rem){.block--broschuere.broschuere{padding:1.7rem 1.4rem 1.9rem}}

/* Rubriken-Karten (Start) und Leitsätze: etwas mehr Luft über dem Text. */
.aktiv__karte{padding-top:1.1rem}
.rubriken .aktiv__karte h3{margin-bottom:.45rem}
.rubriken p{line-height:1.6}

/* Rubriken-Karten auf Tablet: zweispaltig statt als lange Einerkolonne. */
@media(min-width:46rem) and (max-width:51.99rem){.rubriken{grid-template-columns:repeat(2,1fr); gap:1.6rem 2.4rem}}

/* Termine: Zeilen mit gleicher Höhe und leicht mehr Luft. */
.termine--zeile .termin{padding:1.25rem 0}
@media(max-width:52rem){.termine--zeile .termin{gap:.15rem 1rem}}

/* Linklisten: gleiche Zeilenhöhe, klare Klickfläche, Pfeil ruhig. */
.hg__gruppe li,.res__gruppe li{padding:.36rem 0}
.hg__gruppe a,.res__gruppe a{text-decoration-line:underline; text-decoration-color:transparent;
  text-underline-offset:.2em; transition:color .15s ease, text-decoration-color .15s ease}
.hg__gruppe a:hover,.res__gruppe a:hover{text-decoration-color:currentColor}
.hg__gruppe h3,.res__gruppe h3{margin-bottom:.8rem; padding-bottom:.5rem}
.hg__gruppe h3 a,.res__gruppe h3 a{text-decoration:none}
.hg__gruppe h3 a:hover,.res__gruppe h3 a:hover{text-decoration:underline; text-decoration-color:currentColor}
.hg__text{line-height:1.65}
.hg__gruppe h4{font-size:1.06rem; font-weight:400; color:var(--blau-tief); margin:1.6rem 0 .5rem}

/* 4.1 Ernährung: eine sehr lange Gruppe neben drei kurzen – die kurzen füllen die zweite
   Spalte auf, statt unter der langen zu hängen. Lesereihenfolge bleibt die des Dokuments. */
@media(min-width:46rem){
  #ernaehrung .hg{display:block; columns:2; column-gap:3rem}
  #ernaehrung .hg__gruppe{break-inside:avoid; margin-bottom:2.4rem}
  #ernaehrung .hg__gruppe:last-child{margin-bottom:0}
}

/* Kontakt (Rubrik 6): zwei gleich breite Karten, mittig, mit Abstand dazwischen. */
.kontakt__feld{padding:1.7rem 1.9rem}
.kontakt__einzeln+.kontakt__einzeln{margin-top:1.1rem}
.kontakt__gross{line-height:1.6}
@media(max-width:46rem){.kontakt__feld{padding:1.3rem 1.25rem}}

/* Memes: gleich grosse Kacheln, Bild vollständig sichtbar (nichts beschnitten), zwei Spalten mobil. */
.memes{gap:1.1rem; grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:46rem){.memes{grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); gap:1.3rem}}
.meme{padding:.45rem; overflow:hidden}
.meme img{border:0; border-radius:2px; aspect-ratio:1 / 1; object-fit:contain; background:#fff}
/* Memes auf Mobile: genau eine Spalte, Bilder in natuerlicher Proportion ueber die
   volle Breite. Die Quadrat-Kachel oben dient der Ausrichtung mehrerer Spalten und
   wird einspaltig nicht gebraucht. Ab 46rem gilt unveraendert die Regel darueber. */
@media(max-width:45.99rem){
  .memes{grid-template-columns:1fr}
  .meme img{aspect-ratio:auto; height:auto}
}

/* Aufruf-Band (Ende «Wie vegan»): gleiche Linie wie die Sektionen, Knöpfe sauber ausgerichtet. */
.cta{border-top-width:1px; border-top-color:var(--linie); padding-top:2.2rem}
.cta h2{margin-bottom:.2rem}

/* Fuss: Logo und Rubriken nebeneinander mit ruhigem Abstand statt leerer Rasterspalten. */
.fuss__innen{padding:2.8rem 1.25rem 2.2rem; gap:2rem 4rem; align-items:start}
.fuss a{text-decoration-color:rgba(255,255,255,.35); text-underline-offset:.2em;
  transition:color .15s ease, text-decoration-color .15s ease}
.fuss a:hover{text-decoration-color:currentColor}
.fuss li{padding:.28rem 0}
.fuss__logo{padding:.55rem .7rem; border-radius:var(--radius)}
@media(min-width:46rem){.fuss__innen{grid-template-columns:auto 1fr}}
@media(min-width:64rem){.fuss__innen{grid-template-columns:auto 1fr}}