/* Owl & Fire — Variante B: sachlich, bildgeführt | Mirostudio */

@font-face{font-family:Grotesk;src:url(../fonts/grotesk-latin.woff2) format('woff2');font-weight:400 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Grotesk;src:url(../fonts/grotesk-latin-ext.woff2) format('woff2');font-weight:400 700;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Serif4;src:url(../fonts/serif-latin.woff2) format('woff2');font-weight:300 500;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Serif4;src:url(../fonts/serif-latin-ext.woff2) format('woff2');font-weight:300 500;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:light;
  --paper:#F5F3EF;
  --surface:#EAE7E1;
  --ink:#121316;
  --ink-2:#54585E;
  --rule:rgba(18,19,22,.16);
  --accent:#B4441F;
  --accent-2:#8E3313;
  --btn-ink:#F7F5F1;
  --inv-bg:#121316;--inv-ink:#F2EFE9;--inv-ink-2:rgba(242,239,233,.68);
  --inv-rule:rgba(242,239,233,.20);--inv-accent:#E97A4E;--inv-accent-2:#F4A483;--inv-btn-ink:#121316;
  --pad:clamp(1.25rem,5vw,4.5rem);
  --wrap:1360px;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0E0F11;--surface:#191B1F;--ink:#EDEAE4;--ink-2:#9CA0A6;
  --rule:rgba(237,234,228,.15);--accent:#E97A4E;--accent-2:#F4A483;--btn-ink:#0E0F11;
  --inv-bg:#F5F3EF;--inv-ink:#121316;--inv-ink-2:#54585E;--inv-rule:rgba(18,19,22,.16);
  --inv-accent:#B4441F;--inv-accent-2:#8E3313;--inv-btn-ink:#F7F5F1;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:Serif4,serif;font-size:19px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-family:Grotesk,sans-serif;font-weight:600;letter-spacing:-.025em;line-height:1.03;margin:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(4rem,8vw,7rem)}
.label{font-family:Grotesk,sans-serif;font-weight:500;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2)}
.lead{font-size:clamp(1.1rem,1.5vw,1.28rem);line-height:1.5;max-width:44ch}
.muted{color:var(--ink-2)}

.btn{display:inline-block;font-family:Grotesk,sans-serif;font-weight:600;font-size:.98rem;letter-spacing:-.01em;
  background:var(--accent);color:var(--btn-ink);padding:1rem 1.6rem;text-decoration:none;transition:background .2s}
.btn:hover{background:var(--accent-2)}
.btn--lg{font-size:1.06rem;padding:1.2rem 2.1rem}
.btn{white-space:nowrap}

.invert{--paper:var(--inv-bg);--ink:var(--inv-ink);--ink-2:var(--inv-ink-2);--rule:var(--inv-rule);
  --accent:var(--inv-accent);--accent-2:var(--inv-accent-2);--btn-ink:var(--inv-btn-ink);
  background:var(--inv-bg);color:var(--inv-ink)}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--rule)}
.header__inner{max-width:var(--wrap);margin-inline:auto;padding:.9rem var(--pad);display:flex;align-items:center;gap:1.5rem}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.logo svg{width:24px;color:var(--ink)}
.logo b{font-family:Grotesk,sans-serif;font-weight:700;font-size:.9rem;letter-spacing:.02em}
.nav{margin-left:auto;display:flex;align-items:center;gap:1.9rem;font-family:Grotesk,sans-serif;font-size:.92rem}
.nav a{text-decoration:none}
.nav a:not(.btn):hover{color:var(--accent)}
.controls{display:flex;align-items:center;gap:1rem;flex:none}
.lang{display:flex;gap:.35rem;font-family:Grotesk,sans-serif;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.lang button{opacity:.45}
.lang button[aria-pressed="true"]{opacity:1;color:var(--accent);font-weight:600}
.theme{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--rule);color:var(--ink);transition:color .2s,border-color .2s}
.theme svg{width:17px;height:17px}
.theme:hover{color:var(--accent);border-color:var(--accent)}
.header .btn{padding:.62rem 1.05rem;font-size:.88rem}
.burger,.nav__close{display:none}

/* ---------- 1. Auftakt ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);align-items:end;
  gap:clamp(1.5rem,4vw,4rem);min-height:calc(100svh - 3.9rem)}
/* Studiolicht als Halo hinter der Freistellung. Nur im dunklen Schema,
   eine Zeile entfernen stellt den flachen Hintergrund wieder her. */
:root[data-theme="dark"] .hero{background:radial-gradient(85% 80% at 72% 46%,#1B1D21 0%,#0E0F11 62%)}
.hero__text{align-self:center;padding:clamp(2.5rem,5vw,4rem) 0 clamp(2.5rem,5vw,4rem) var(--pad);
  max-width:calc(var(--wrap) * .6);margin-left:auto}
.hero h1{font-size:clamp(2.2rem,4.2vw,3.7rem);max-width:15ch;margin:1.3rem 0 0}
.hero .lead{margin-top:1.5rem}
.hero .btn{margin-top:2rem}
.hero__photo{align-self:end;height:100%;display:flex;align-items:flex-end;justify-content:center}
.hero__photo img{width:auto;max-width:100%;height:100%;max-height:calc(100svh - 3.9rem);object-fit:contain;object-position:bottom}

/* ---------- 2. Aussage ---------- */
.manifest{position:relative;isolation:isolate;display:grid;place-items:center;
  min-height:clamp(18rem,42vh,26rem);overflow:hidden;background:#0B0C0E}
.manifest img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);z-index:-2}
.manifest__scrim{position:absolute;inset:0;background:rgba(11,12,14,.62);z-index:-1}
.manifest__text{max-width:min(var(--wrap),46rem);padding-inline:var(--pad);text-align:center;color:#F2EFE9;
  font-family:Serif4,serif;font-weight:300;font-size:clamp(1.5rem,3.1vw,2.6rem);line-height:1.2}

/* ---------- 3. Angebot: Karten mit Bild ---------- */
.head h2{font-size:clamp(1.9rem,3.4vw,2.9rem);margin-top:1.2rem;max-width:24ch}
.cards{margin-top:clamp(2.5rem,5vw,4rem);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,4vw,3.5rem) clamp(2rem,4vw,4rem)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1)}
.card__n{font-family:Grotesk,sans-serif;font-weight:600;font-size:.86rem;letter-spacing:.12em;
  color:var(--accent);margin-top:1.4rem}
.card h3{font-size:clamp(1.25rem,1.9vw,1.65rem);margin-top:.55rem}
.card p{color:var(--ink-2);font-size:1.06rem;margin-top:.9rem;max-width:42ch}
.card__meta{font-family:Grotesk,sans-serif;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;margin-top:1rem}

/* ---------- 4. Person ---------- */
.person{background:var(--surface);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;
  gap:clamp(2rem,5vw,5rem)}
.person__photo{display:flex}
.person__photo img{width:100%;height:100%;min-height:clamp(20rem,52vh,34rem);object-fit:cover;filter:grayscale(1)}
.person__text{padding:clamp(3rem,7vw,5.5rem) var(--pad) clamp(3rem,7vw,5.5rem) 0;max-width:46rem;
  display:flex;flex-direction:column;justify-content:center}
.person__quote{margin:1.4rem 0 2rem;font-family:Serif4,serif;font-weight:300;
  font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.18;letter-spacing:-.01em;max-width:20ch}
.person__text p{max-width:44ch;font-size:1.06rem}
.person__text p+p{margin-top:1.1rem}
.person__name{font-family:Grotesk,sans-serif;font-weight:600;font-size:1.02rem;margin-top:1.8rem}

/* ---------- 5. Standards ---------- */
.invert{padding-block:clamp(3.5rem,7vw,6rem)}
.std{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.6fr);gap:clamp(2rem,5vw,4.5rem)}
.std__head h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-top:1.2rem;max-width:16ch}
.std__list{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.8rem,3.4vw,2.8rem)}
.std__list>div{border-top:1px solid var(--rule);padding-top:1.1rem}
.std__list dt{font-family:Grotesk,sans-serif;font-weight:600;font-size:1.02rem}
.std__list dd{margin:0}
.std__fact{font-family:Grotesk,sans-serif;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin-top:.5rem !important}
.std__list dd+dd{margin-top:.7rem !important;font-size:1rem;color:var(--ink-2)}

/* ---------- 6. Kontakt ---------- */
.cta{position:relative;isolation:isolate;overflow:hidden;background:#0B0C0E;padding-block:clamp(4.5rem,9vw,8rem)}
.cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:grayscale(1);z-index:-2}
.cta__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(11,12,14,.92) 0%,rgba(11,12,14,.78) 45%,rgba(11,12,14,.42) 100%)}
.cta__inner{color:#F2EFE9}
.cta__inner .label{color:rgba(242,239,233,.66)}
.cta h2{font-size:clamp(2rem,3.7vw,3.1rem);margin-top:1.2rem;max-width:14ch}
.cta .lead{margin-top:1.4rem;color:rgba(242,239,233,.84)}
.cta .btn{margin-top:2.2rem;background:#E97A4E;color:#121316}
.cta .btn:hover{background:#F4A483}

/* ---------- Footer ---------- */
.footer{padding-block:clamp(2.5rem,5vw,3.5rem) 2rem}
.footer__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:start}
.footer ul{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.5rem;font-size:1rem}
.footer a{text-decoration:none;border-bottom:1px solid var(--rule)}
.footer a:hover{color:var(--accent)}
.footer__meta{display:grid;gap:.5rem;justify-items:end;text-align:right;
  font-family:Grotesk,sans-serif;font-size:.83rem;color:var(--ink-2);align-self:end}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv{opacity:1;transform:none;transition:none}}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .hero,.person{grid-template-columns:1fr}
  .hero{min-height:0}
  .hero__text{padding:clamp(2.5rem,7vw,4rem) var(--pad) 0;max-width:none;margin:0}
  .hero__photo img{height:auto;max-height:min(58vh,26rem)}
  .person__photo img{min-height:clamp(16rem,42vh,24rem)}
  .person__text{padding:clamp(2.5rem,6vw,4rem) var(--pad)}
  .std{grid-template-columns:1fr}
}
@media (max-width:820px){
  body{font-size:18px}
  .burger{display:grid;place-items:center;width:42px;height:42px;order:3}
  .burger svg{width:24px;height:24px}
  .header .btn{display:none}
  .controls{margin-left:auto}
  .nav{position:fixed;inset:0;z-index:60;background:var(--paper);flex-direction:column;align-items:flex-start;
    justify-content:center;gap:1.4rem;padding:var(--pad);margin:0;transform:translateX(100%);
    transition:transform .3s ease;overflow-y:auto}
  .nav.is-open{transform:none}
  .nav a{font-family:Grotesk,sans-serif;font-weight:600;font-size:1.7rem;letter-spacing:-.02em}
  .nav .btn{display:inline-block;margin-top:.6rem}
  .nav__close{display:grid;place-items:center;position:absolute;top:.9rem;right:var(--pad);width:42px;height:42px}
  .nav__close svg{width:24px;height:24px}
  .cards,.std__list{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:2.5rem}
  .footer__meta{justify-items:start;text-align:left}
  .cta__scrim{background:linear-gradient(180deg,rgba(11,12,14,.72),rgba(11,12,14,.9))}
  /* Volle Breite und mitwachsender Schriftgrad, damit die Beschriftung
     bis hinunter zu 320px in einer Zeile bleibt */
  .hero .btn--lg{display:block;width:100%;max-width:26rem;text-align:center;white-space:nowrap;
    font-size:clamp(.78rem,3.62vw,1.02rem);padding:1.05rem .8rem}
}
@media (max-width:400px){
  .header__inner{gap:.8rem}
  .controls{gap:.65rem}
}
@media (max-width:345px){
  .logo b{display:none}            /* Wortmarke weg, Eule bleibt: sonst platzt die Kopfzeile */
}

/* ==========================================================================
   Bausteine der Unterseiten.

   Die Startseite bringt bereits alles mit, was sich wiederverwenden laesst:
   .head fuer die Kopfzeile eines Abschnitts, .cards fuer Bildkarten, .person
   fuer Bild und Text nebeneinander, .std mit .std__list fuer Ueberschrift und
   Merkmalsliste, .manifest fuer eine Aussage ueber einem Bild, .cta fuer den
   Abschluss. Diese Klassen sind nicht an die Startseite gebunden.

   Hier steht nur, was dort fehlt. Jede Groesse ist aus der Startseite
   uebernommen, keine neue Schriftgroesse und kein neuer Abstand.
   ========================================================================== */



/* ---------- Auftakt einer Unterseite ----------
   Aufbau wie die Aussage ueber Zuerich auf der Startseite: ein Bild ueber die
   volle Breite, ein dunkler Schleier darueber, der Text darauf. Damit kann kein
   Loch entstehen, denn der Text sitzt im Bild statt daneben. Anders als auf der
   Startseite steht er links im Satzspiegel, nicht mittig: so ist der Auftakt
   einer Unterseite auf den ersten Blick von der Startseite zu unterscheiden. */
.pagehero{position:relative;isolation:isolate;display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr);
  min-height:clamp(19rem,44vh,27rem);padding-block:clamp(3rem,6vw,4.5rem);
  background:#0B0C0E}
.pagehero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1);z-index:-2}
.pagehero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(11,12,14,.86) 0%,rgba(11,12,14,.72) 46%,rgba(11,12,14,.42) 100%)}
.pagehero__inner{color:#F2EFE9}
.pagehero .label{color:rgba(242,239,233,.66)}
.pagehero h1{font-size:clamp(2rem,3.7vw,3.1rem);margin-top:1.1rem;max-width:18ch}
.pagehero .lead{margin-top:1.3rem;color:rgba(242,239,233,.84);max-width:46ch}
.pagehero .btn{margin-top:2rem;background:#E97A4E;color:#121316}
.pagehero .btn:hover{background:#F4A483}
.pagehero__inner{min-width:0}
/* Der erste Abschnitt darunter braucht nicht seinen vollen Abstand. */
.pagehero + .section,.pagehero + .invert{padding-top:clamp(3rem,5.5vw,4.5rem)}

/* Auf dem Telefon wird die Schaltflaeche zur vollen Breite und die Schrift
   mit, genau wie im Auftakt der Startseite. Ohne das sprengt der lange
   Beschriftungstext die Spalte, denn Schaltflaechen brechen nicht um. */
@media (max-width:1000px){
  .pagehero .btn--lg{display:block;width:100%;max-width:26rem;text-align:center;
    font-size:clamp(.78rem,3.62vw,1.02rem);padding:1.05rem .8rem}
}


/* ---------- Stimme als heller Block ----------
   Drei dunkle Baender hintereinander werden schwer. Die Stimme steht deshalb
   hell und rein typografisch dazwischen, im Schriftschnitt des Zitats auf der
   Startseite. */
.pullquote{margin:0;background:var(--surface);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.pullquote__photo{display:flex}
.pullquote__photo img{width:100%;height:100%;min-height:clamp(16rem,34vh,24rem);
  object-fit:cover;filter:grayscale(1)}
.pullquote__text{align-self:center;
  padding:clamp(3rem,6vw,5rem) var(--pad) clamp(3rem,6vw,5rem) clamp(2rem,4vw,4rem)}
.pullquote blockquote{margin:0;font-family:Serif4,serif;font-weight:300;
  font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.26;letter-spacing:-.01em;
  max-width:30ch}
.pullquote figcaption{font-family:Grotesk,sans-serif;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-top:1.6rem}
@media (max-width:820px){
  .pullquote{grid-template-columns:1fr}
  .pullquote__photo img{min-height:0;height:min(40vh,16rem)}
  .pullquote__text{padding:clamp(2.5rem,7vw,4rem) var(--pad)}
}

/* ---------- Fliesstext ----------
   Grundschrift der Website, nur mit Zeilenlaenge und Absatzabstand. */
.prose{max-width:64ch;font-size:1.06rem}
.prose p+p,.prose>*+*{margin-top:1.2rem}
.prose h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-top:2.6rem}
.prose h3{font-size:1.22rem;margin-top:2rem}
.prose h2+*,.prose h3+*{margin-top:1rem}
.prose a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--rule)}
.prose a:hover{border-bottom-color:var(--accent)}
.prose strong{font-weight:500}

/* ---------- Fragen und Antworten, ohne Skript ----------
   Die Trennlinien sind dieselben wie in .std__list, die Schrift der Frage
   dieselbe wie dort das dt. */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;align-items:baseline;gap:1rem;padding:1.35rem 0;cursor:pointer;
  list-style:none;font-family:Grotesk,sans-serif;font-weight:600;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-weight:400;font-size:1.4rem;
  line-height:1;color:var(--accent)}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--accent)}
.faq__a{padding-bottom:1.6rem;color:var(--ink-2);font-size:1.06rem;max-width:64ch}
.faq__a p+p{margin-top:.9rem}
.faq__a a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--rule)}

/* ---------- Formular ---------- */
.form{display:grid;gap:1.3rem;max-width:36rem}
.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem}
.field{display:grid;gap:.5rem}
.field>span{font-family:Grotesk,sans-serif;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2)}
.field input,.field textarea{font:inherit;font-size:1.06rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:0;padding:.85rem .9rem;width:100%}
.field textarea{min-height:9rem;resize:vertical}
.field :is(input,textarea):focus{outline:2px solid var(--accent);outline-offset:-2px;border-color:var(--accent)}
.field--check{grid-template-columns:auto 1fr;align-items:start;gap:.8rem}
.field--check input{width:1.15rem;height:1.15rem;margin-top:.3rem;accent-color:var(--accent)}
.field--check span{font-family:Serif4,serif;font-size:.98rem;text-transform:none;letter-spacing:0;color:var(--ink-2)}
.form button[type=submit]{justify-self:start}
.form__note{font-family:Grotesk,sans-serif;font-size:.84rem;color:var(--ink-2);max-width:44ch}
.form__ok{border:1px solid var(--accent);padding:1.1rem 1.3rem;font-size:1.02rem}

/* ---------- Kontaktdaten ---------- */
/* Die Angaben stehen nebeneinander, solange Platz ist, und rutschen erst auf
   schmalen Schirmen untereinander. Als schmale Spalte liessen sie sonst die
   halbe Zeile leer, egal in welchem Block sie stehen. */
.contactlist{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,3vw,2.5rem);align-items:start}
.contactlist>li>span{font-family:Grotesk,sans-serif;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);display:block}
.contactlist :is(a,p){font-family:Grotesk,sans-serif;font-weight:600;font-size:1.1rem;
  text-decoration:none;margin-top:.4rem;display:inline-block}
.contactlist a:hover{color:var(--accent)}

/* ---------- Karte, randabfallend ---------- */
.map{border-block:1px solid var(--rule);background:var(--surface)}
.map iframe{display:block;width:100%;height:clamp(20rem,44vh,30rem);border:0;filter:grayscale(1)}
:root[data-theme="dark"] .map iframe{filter:grayscale(1) invert(.92) hue-rotate(180deg)}

/* ---------- Querverweise am Seitenende ---------- */
.pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem)}
.pager a{border:1px solid var(--rule);padding:clamp(1.2rem,2.2vw,1.8rem);text-decoration:none;
  display:block;transition:border-color .2s}
.pager a:hover{border-color:var(--accent)}
.pager__lbl{font-family:Grotesk,sans-serif;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2)}
.pager h3{font-size:clamp(1.15rem,1.6vw,1.35rem);margin-top:.6rem}
.pager h3::after{content:" \2192";color:var(--accent)}
.pager a:hover h3{color:var(--accent)}
.pager a:only-child{grid-column:1 / -1}

/* ---------- Rhythmus und Varianten ---------- */
.section--tight{padding-block:clamp(3rem,5.5vw,4.5rem)}
/* Frueher hing hier `.section+.section{padding-top:0}`, damit zwei helle
   Abschnitte auf demselben Grund nicht doppelt Luft bekommen. Seit die
   Abschnitte im Ton wechseln, ist das falsch: der zweite begann ohne Luft am
   oberen Rand und hatte unten das ganze Polster. Jeder Abschnitt traegt sein
   Polster nun oben wie unten. */
/* .person ohne eigenen Hintergrund und mit vertauschten Seiten.
   Nur diese beiden Zusaetze. An .person selbst wird nichts geaendert, sonst
   verschoebe sich der Block auf der Startseite. */
.person--plain{background:none}
.person--flip .person__photo{order:2}
.person--flip .person__text{padding:clamp(3rem,7vw,5.5rem) 0 clamp(3rem,7vw,5.5rem) var(--pad);
  margin-left:auto}

/* ---------- Verweis in Textfarbe des Akzents ---------- */
.more{font-family:Grotesk,sans-serif;font-weight:600;font-size:.92rem;color:var(--accent);
  text-decoration:none;display:inline-block}
.more::after{content:" \2192"}
.more:hover{color:var(--accent-2)}

/* ---------- Sprungmarke fuer die Tastatur ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--btn-ink);
  padding:.8rem 1.2rem;font-family:Grotesk,sans-serif;font-weight:600;text-decoration:none}
.skip:focus{left:1rem;top:1rem}

@media (max-width:1000px){
  .person--flip .person__photo{order:0}
  /* Gestapelt braucht der Text auf beiden Seiten denselben Rand. Ohne diese
     Zeile gewinnt die spezifischere Regel fuer die gespiegelte Fassung und
     laesst rechts nichts stehen. */
  .person--flip .person__text{padding-inline:var(--pad)}
}
@media (max-width:820px){
  .form__row,.pager{grid-template-columns:1fr}
}

/* ---------- Ganze Karte als Verweis ----------
   Der Mehrseiter macht aus jeder Programmkarte einen Verweis. Ohne diese Zeilen
   unterstreicht der Browser jeden Text darin und faerbt ihn um: die Karte saehe
   anders aus als auf der abgenommenen Startseite. Der einzige sichtbare
   Unterschied bleibt das Aufhellen des Bildes beim Zeigen. */
.card a{text-decoration:none;color:inherit;display:block}
.card--link img{transition:filter .3s}
.card--link:hover img{filter:grayscale(.35)}
.card--link:hover h3{color:var(--accent)}


/* ---------- Symbolkarten ----------
   Der laufende Auftritt zeigt die Programme und die Einstiege nicht als
   Fotokarten, sondern als Reihe mit je einem Strichsymbol darueber. Genau das
   bildet dieser Baustein ab: vier Programme nebeneinander, drei Einstiege
   nebeneinander. Schriftgroessen und Abstaende sind die der Startseite.
   Die Symbole kommen von Lordicon, beim Bauen aus Lottie in statisches SVG
   gezogen und ueber currentColor eingefaerbt. */
.tiles{margin-top:clamp(2.5rem,5vw,4rem);display:grid;gap:clamp(2rem,4vw,3rem)}
.tiles--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{display:flex;flex-direction:column;align-items:flex-start;
  border-top:1px solid var(--rule);padding-top:1.4rem}
.tile__icon{width:clamp(2.9rem,3.6vw,3.4rem);height:clamp(2.9rem,3.6vw,3.4rem);
  color:var(--accent);margin-bottom:1.15rem}
.tile__icon svg{width:100%;height:100%;display:block}
.tile h3{font-size:clamp(1.1rem,1.5vw,1.3rem);min-height:2.06em}
.tile p{color:var(--ink-2);font-size:1.06rem;margin-top:.8rem}
.tile__meta{font-family:Grotesk,sans-serif;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);margin-top:.7rem}
/* Der Verweis sitzt in jeder Kachel auf derselben Linie, unabhaengig davon,
   wie lang der Text darueber ist. Sonst franst die Reihe unten aus. */
.tile .more{margin-top:auto;padding-top:1.4rem}
a.tile{text-decoration:none;color:inherit;transition:border-color .2s}
a.tile:hover{border-top-color:var(--accent)}
a.tile:hover h3{color:var(--accent)}

@media (max-width:1000px){
  .tiles--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .tiles--4,.tiles--3{grid-template-columns:1fr}
  .tile h3{min-height:0}
}

/* ---------- Aufzaehlung mit Akzentmarke ----------
   Fuer Listen im Fliesstext. Die Marke ist ein kleines Quadrat in der
   Akzentfarbe, dieselbe Sprache wie die Ziffern der Karten auf der Startseite. */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;max-width:56ch}
.checks li{display:grid;grid-template-columns:1.1rem 1fr;gap:.9rem;align-items:start;
  font-size:1.06rem;line-height:1.5}
.checks li::before{content:"";width:.42rem;height:.42rem;margin-top:.62em;
  background:var(--accent);justify-self:start}
.checks a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--rule)}
.checks a:hover{border-bottom-color:var(--accent)}
/* Steht am Zeilenanfang ein eigenes Element, muss der ganze Eintrag in ein
   span, sonst rutscht der Rest in die schmale Markenspalte. */
.checks li>span{display:block}

/* ---------- Merkmale als Definitionsliste ----------
   Wie die Standards auf der Startseite, aber einspaltig fuer schmale Spalten. */
.facts{margin:0;display:grid;gap:1.1rem}
.facts>div{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);
  gap:.6rem 1.4rem;border-top:1px solid var(--rule);padding-top:.9rem}
.facts dt{font-family:Grotesk,sans-serif;font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2)}
.facts dd{margin:0;font-size:1.06rem}
@media (max-width:620px){.facts>div{grid-template-columns:1fr}}

/* ---------- Beitragsliste des Journals ---------- */
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,4vw,3.5rem) clamp(2rem,4vw,4rem)}
.post-card{text-decoration:none;color:inherit;display:block}
.post-card img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1);
  transition:filter .3s}
.post-card:hover img{filter:grayscale(.35)}
.post-card__meta{font-family:Grotesk,sans-serif;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);margin-top:1.1rem}
.post-card h3{font-size:clamp(1.15rem,1.7vw,1.45rem);margin-top:.5rem}
.post-card:hover h3{color:var(--accent)}
.post-card p{color:var(--ink-2);font-size:1.06rem;margin-top:.7rem;max-width:44ch}
@media (max-width:820px){.posts{grid-template-columns:1fr}}

/* ---------- Artikelkopf und Autorenzeile ---------- */
.artmeta{font-family:Grotesk,sans-serif;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:1.2rem}
.artlead{font-size:clamp(1.1rem,1.5vw,1.28rem);line-height:1.5;max-width:52ch;
  color:var(--ink-2);margin-top:1.4rem}
.author{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:1.4rem;
  align-items:center;border-top:1px solid var(--rule);padding-top:1.6rem;max-width:44rem}
.author img{width:4.5rem;height:4.5rem;object-fit:cover;filter:grayscale(1)}
.author p{font-size:1rem;color:var(--ink-2)}
.author b{font-family:Grotesk,sans-serif;font-size:1rem;color:var(--ink);display:block}

/* ---------- Rechtstexte ---------- */
.legal{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
.legal__toc{position:sticky;top:6rem}
.legal__toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;
  font-family:Grotesk,sans-serif;font-size:.9rem}
.legal__toc a{text-decoration:none;color:var(--ink-2)}
.legal__toc a:hover{color:var(--accent)}
.prose--legal{max-width:70ch;font-size:1.06rem}
.prose--legal h2{font-size:clamp(1.2rem,1.8vw,1.45rem);margin-top:2.4rem}
@media (max-width:900px){
  .legal{grid-template-columns:1fr}
  .legal__toc{position:static}
}

/* ---------- Abstandsutilities ganz zum Schluss ----------
   Sie muessen nach allen Bausteinen stehen. Sonst gewinnt bei gleicher
   Spezifitaet die spaeter notierte Regel, und ein `margin:0` eines Bausteins
   (etwa .checks oder .facts) setzt den Abstand wieder auf null. */
.mt{margin-top:clamp(2.5rem,5vw,4rem)}
.mt-s{margin-top:clamp(1.4rem,2.6vw,2rem)}

/* ---------- Nachtraege, aus der Pruefung der Unterseiten ----------
   1. Die Schaltflaeche im Abschlussband bekommt dieselbe Behandlung auf dem
      Telefon wie die im Auftakt. Ohne sie ragt eine lange Beschriftung heraus,
      weil Schaltflaechen nicht umbrechen.
   2. Eine Ueberschrift ausserhalb von .hero und .pagehero hatte keine Groesse
      und fiel auf den Browserwert zurueck. Betrifft die Rechtstexte und 404. */
@media (max-width:1000px){
  /* Nur die Baender der Unterseiten. Das Band der Startseite bleibt, wie es
     abgenommen wurde, deshalb .cta--sub und nicht .cta. */
  .cta--sub .btn--lg{display:block;width:100%;max-width:26rem;text-align:center;
    font-size:clamp(.78rem,3.62vw,1.02rem);padding:1.05rem .8rem}
}
.section h1,.wrap>h1,.person__text h1{font-size:clamp(2rem,3.7vw,3.1rem);margin-top:1.1rem;max-width:20ch}
.person__text h1+.lead{margin-top:1.3rem}
/* .person__text ist eine Flexspalte. Ein Element darin waechst sonst auf die
   volle Breite, und die Schaltflaeche wird zum Balken. */
.person__text .btn{margin-top:2rem;align-self:flex-start}
.section h1{overflow-wrap:break-word}

/* ---------- Bildausschnitt in Baendern mit Text ----------
   Auf der Personenseite gehoert Carsten selbst hinter den Text. Damit die
   Ueberschrift nicht auf seinem Gesicht liegt, wird der Ausschnitt zur freien
   Seite verschoben: der Text steht links, das Motiv rueckt nach rechts. */
.pagehero--focus-right>img,.cta--focus-right img{object-position:78% 28%}

/* ---------- Nachtraege aus der Sichtpruefung der Unterseiten ----------
   1. In der rechten Spalte von .std hat die Hakenliste ihre eigene Zeilenlaenge
      und liess rechts einen Streifen frei. Dort darf sie die Spalte fuellen.
   2. .std__head h2 bekommt seinen oberen Abstand fuer eine Beschriftung
      darueber. Fehlt die, faengt die Ueberschrift zu tief an und steht nicht
      auf einer Linie mit der rechten Spalte. */
.std__list ~ *, .std > div > .checks{max-width:none}
.std .checks{max-width:none}
.std__head > h2:first-child{margin-top:0}

/* ---------- Stimmen als Schieber ----------
   Vier Zitate nebeneinander sind eine Wand. Hier steht immer eines gross und
   lesbar da, weiter geht es mit den Pfeilen, den Punkten, der Tastatur oder auf
   dem Telefon mit dem Daumen.

   Der Lauf ist nativer Bildlauf mit Einrastpunkten. Keine Bibliothek, kein
   Eingriff in das Scrollen der Seite: ohne Skript bleibt es ein Streifen, den
   man seitwaerts schiebt, und alle Zitate sind erreichbar. */
.slider{position:relative}
.slider__track{list-style:none;margin:0;padding:0;display:flex;
  gap:clamp(2rem,5vw,4rem);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.slider__track::-webkit-scrollbar{display:none}
.slider__item{flex:0 0 100%;scroll-snap-align:start;min-width:0}
.slider__q{margin:0;font-family:Serif4,serif;font-weight:300;
  font-size:clamp(1.45rem,2.8vw,2.25rem);line-height:1.26;letter-spacing:-.01em;
  max-width:30ch}
.slider__name{font-family:Grotesk,sans-serif;font-weight:600;font-size:1.02rem;
  margin-top:1.8rem}
.slider__meta{font-family:Grotesk,sans-serif;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin-top:.5rem}
.slider__bar{display:flex;align-items:center;gap:.8rem;margin-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--rule);padding-top:1.4rem}
.slider__btn{width:2.9rem;height:2.9rem;flex:none;border:1px solid var(--rule);
  display:grid;place-items:center;color:var(--ink);transition:border-color .2s,color .2s}
.slider__btn svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:1.6}
.slider__btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.slider__btn:disabled{opacity:.32;cursor:default}
.slider__dots{display:flex;gap:.55rem;margin-left:auto}
.slider__dot{width:.5rem;height:.5rem;background:var(--rule);transition:background .2s}
.slider__dot[aria-current="true"]{background:var(--accent)}
.slider__note{margin-top:1.4rem;font-size:.95rem;color:var(--ink-2)}
@media (max-width:820px){
  .slider__bar{gap:.6rem}
  .slider__btn{width:2.6rem;height:2.6rem}
}

/* ---------- Randabfallende Bloecke an den Satzspiegel binden ----------
   .person und .pullquote laufen ueber die volle Fensterbreite. Ohne diese
   Zeilen endet ihr Text am Fensterrand, waehrend jeder Abschnitt in .wrap
   112 Pixel frueher aufhoert: zwei verschiedene Kanten auf einer Seite.
   Gilt nur fuer die Varianten der Unterseiten. Der Personenblock der
   Startseite bleibt unberuehrt, sonst verschoebe sich dort der Umbruch. */
.person--plain > .person__text,
.pullquote__text{padding-right:max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)))}
.person--flip > .person__text{padding-right:0;
  padding-left:max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)))}
@media (max-width:1000px){
  .person--plain > .person__text,
  .person--flip > .person__text{padding-inline:var(--pad)}
}

/* Der Ausschnitt im Abschlussband der Personenseite. Der Schleier liegt links,
   also gehoert das Motiv nach rechts. Aber weiter oben ansetzen, sonst
   schneidet die Kante Kopf und Hund ab. */
.cta--focus-right img{object-position:74% 12%}

/* ---------- Fuss als Verzeichnis der Website ----------
   Die Kopfzeile fuehrt die drei Hauptpunkte der abgenommenen Startseite. Alles
   Uebrige, Termine, Programme, FAQ, Journal, Kontakt und Rechtliches, muss von
   jeder Seite aus erreichbar sein. Dafuer ist der Fuss da. */
.footer__grid--index{grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(2rem,4vw,3.5rem);align-items:start}
.footer__grid--index nav ul{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.6rem}
.footer__grid--index nav a{text-decoration:none}
.footer__grid--index nav a:hover{color:var(--accent)}
@media (max-width:900px){.footer__grid--index{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.footer__grid--index{grid-template-columns:1fr}}

/* ---------- Hoehe der Bild-und-Text-Bloecke auf Unterseiten ----------
   Die Hoehe richtete sich nach dem Seitenverhaeltnis der Fotografie: bei einem
   Hochformat wurde der Block 911 Pixel hoch, obwohl der Text 209 Pixel braucht.
   Daneben stand dann eine leere Flaeche. Jetzt gibt die Bildspalte nur ein
   Mindestmass vor, gefuellt wird sie vom Ausschnitt. Die Hoehe folgt dem
   laengeren von beiden, Text oder Mindestmass.
   Gilt nur fuer die Varianten der Unterseiten, der Block der Startseite bleibt. */
.person--plain{align-items:stretch}
.person--plain > .person__photo{position:relative;display:block;
  min-height:clamp(18rem,38vh,26rem)}
/* Absolut gesetzt, damit das Seitenverhaeltnis der Datei die Zeilenhoehe nicht
   mehr bestimmen kann. Die Hoehe kommt vom Text oder vom Mindestmass. */
.person--plain > .person__photo img{position:absolute;inset:0;
  width:100%;height:100%;min-height:0;object-fit:cover}

/* ---------- Ein Mass fuer den Fliesstext ----------
   Die Bausteine hatten 1.00, 1.02 und 1.06 rem nebeneinander. Auf einer Seite
   mit Kacheln, Listen, Fragen und Fliesstext sieht das nach drei Schriftgroessen
   aus, wo eine gemeint ist. Alles auf das Mass der Startseite, 1.06 rem.

   Und der Abstand zwischen Bild und Text in den randabfallenden Bloecken ist
   derselbe wie der Seitenrand im Satzspiegel. Vorher war er halb so gross, und
   der Text begann auf keiner erkennbaren Linie. */
.person--plain > .person__text{padding-left:var(--pad)}
.person--flip > .person__text{padding-left:0;padding-right:var(--pad)}
.pullquote__text{padding-left:var(--pad)}
@media (max-width:1000px){
  .person--plain > .person__text,.person--flip > .person__text,
  .pullquote__text{padding-inline:var(--pad)}
}

/* ---------- Ausklappbare Programme in der Navigation ---------- */
.nav__drop{position:relative;display:flex;align-items:center;gap:.3rem}
.nav__toggle{display:grid;place-items:center;padding:.2rem;color:inherit}
.nav__toggle svg{width:1rem;height:1rem;transition:transform .2s}
.nav__drop:hover .nav__toggle svg,.nav__drop.is-open .nav__toggle svg{transform:rotate(180deg)}
.nav__menu{position:absolute;top:100%;left:-1rem;min-width:17rem;z-index:60;
  background:var(--paper);border:1px solid var(--rule);padding:.5rem 0;
  display:grid;opacity:0;visibility:hidden;transform:translateY(-.4rem);
  transition:opacity .18s,transform .18s,visibility .18s}
.nav__drop:hover .nav__menu,.nav__drop:focus-within .nav__menu,
.nav__drop.is-open .nav__menu{opacity:1;visibility:visible;transform:none}
.nav__menu a{padding:.62rem 1.1rem;font-size:.9rem;white-space:nowrap}
.nav__menu a:hover{background:var(--surface);color:var(--accent)}

/* Auf dem Telefon liegt die Navigation als Feld ueber der Seite. Dort steht die
   Liste offen darunter, ein Ausklappen waere ein Klick ohne Gewinn. */
@media (max-width:1000px){
  .nav__drop{display:block}
  .nav__toggle{display:none}
  .nav__menu{position:static;opacity:1;visibility:visible;transform:none;
    background:none;border:0;padding:.2rem 0 0;min-width:0}
  .nav__menu a{padding:.45rem 0 .45rem 1.1rem;font-size:.92rem;white-space:normal;
    border-left:1px solid var(--rule)}
}


/* ---------- Ueberschrift wandert mit ----------
   In .std steht links die Ueberschrift, rechts eine lange Liste. Bei hohen
   Bloecken blieb links eine leere Flaeche stehen. Jetzt laeuft die Ueberschrift
   mit, solange ihr Abschnitt sichtbar ist. */
@media (min-width:1001px){
  .std__head{position:sticky;top:6.5rem;align-self:start}
}

/* Zwei Bild-und-Text-Bloecke hintereinander auf demselben Grund verschmelzen.
   Der zweite bekommt den ruhigen Grund, dann sieht man die Fuge. */
.person--plain + .person--plain{background:var(--surface)}



/* ---------- Wechselnder Grund statt Trennlinien ----------
   Zwei helle Abschnitte hintereinander sahen aus wie einer. Eine Haarlinie
   dazwischen ist eine Notloesung: sie trennt nichts, sie zieht nur einen
   Strich. Stattdessen bekommt jeder zweite helle Abschnitt den ruhigeren,
   grauen Grund der Palette. Das Auge sieht sofort, wo ein Block endet, und
   die Seite bekommt einen Takt, ohne dass eine Linie noetig waere.

   Welcher Abschnitt welchen Grund bekommt, entscheidet `layout.py` beim Bauen:
   es zaehlt die Bloecke der Seite durch und setzt `--alt` bei jedem zweiten
   hellen. So stimmt der Wechsel auf jeder Seite, egal wie sie aufgebaut ist.
   Im dunklen Schema tauschen die beiden Toene mit, der Wechsel bleibt. */
.section--alt{background:var(--surface)}
.section--alt + .section--alt{background:var(--paper)}

/* Der Fuss nimmt den Ton, den der letzte Abschnitt nicht hat. Sonst gehen
   Inhalt und Fuss ineinander ueber. Nach einem Bildband bleibt alles wie auf
   der Startseite, dort trennt das Bild. */
.section:not(.section--alt) + .footer,.map + .footer{background:var(--surface)}
.section--alt + .footer{background:var(--paper)}

/* ---------- Der ruhige Grund, kraeftiger ----------
   Im dunklen Schema lagen die beiden Toene zu nah beieinander, der Wechsel war
   kaum zu sehen. Der zweite Ton bekommt etwas mehr Abstand zum ersten, hell wie
   dunkel, bleibt aber im Charakter der Palette: kein Grau von der Stange,
   sondern derselbe warme Ton eine Stufe tiefer. */
:root{--alt:#EDEAE4}
:root[data-theme="dark"]{--alt:#1C1E23}
.section--alt{background:var(--alt)}
.section--alt + .section--alt{background:var(--paper)}
.section:not(.section--alt) + .footer,.map + .footer{background:var(--alt)}

/* ---------- Lesestrecke der Journalbeitraege ----------
   Ein Beitrag ist zum Lesen da, nicht zum Ueberfliegen. Bisher stand eine
   schmale Textspalte am linken Rand einer breiten Seite, rechts blieb die
   halbe Flaeche leer. Jetzt steht die ganze Strecke, von der Ueberschrift bis
   zur Autorenzeile, als eine mittige Spalte: dieselbe Kante fuer alles, eine
   Zeilenlaenge, die zum Lesen taugt, und etwas groessere Schrift, weil hier
   laenger gelesen wird als anderswo. */
.beitrag{max-width:46rem;margin-inline:auto}
.beitrag > * + *{margin-top:1.6rem}
.beitrag h1{max-width:22ch}
.beitrag .artlead{max-width:none}
.beitrag article.prose{max-width:none;font-size:1.12rem;line-height:1.68}
.beitrag article.prose p + p{margin-top:1.35rem}
.beitrag article.prose h2{font-size:clamp(1.4rem,2.2vw,1.8rem);margin-top:2.8rem}
.beitrag article.prose h3{font-size:1.24rem;margin-top:2.2rem}
.beitrag article.prose blockquote{margin:2.2rem 0;padding-left:1.4rem;
  border-left:2px solid var(--accent);font-family:Serif4,serif;font-weight:300;
  font-size:1.3rem;line-height:1.4}
.beitrag article.prose ul,.beitrag article.prose ol{padding-left:1.3rem;margin-top:1.35rem}
.beitrag article.prose li + li{margin-top:.6rem}
/* Das Beitragsbild darf breiter sein als die Zeile, das gibt der Strecke Luft. */
.beitrag .artfig{max-width:none;width:100%}
@media (min-width:1101px){
  .beitrag .artfig{width:calc(100% + 8rem);margin-inline:-4rem}
}

/* ---------- Merkmale zweispaltig ----------
   Die Werte sind kurz, die Zeile ist breit: einspaltig blieb rechts die halbe
   Flaeche leer und die Liste wurde unnoetig hoch. Am grossen Schirm laufen die
   Paare in zwei Spalten. */
@media (min-width:1001px){
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(2rem,4vw,3.5rem);row-gap:0}
  .facts > div{grid-template-columns:minmax(0,8.5rem) minmax(0,1fr);
    padding-block:1rem}
}

/* ---------- Auswahlfeld ----------
   Gleiche Behandlung wie Eingabe und Textfeld, nur mit eigenem Pfeil, weil das
   Systemdreieck in jedem Browser anders aussieht. */
.field select{font:inherit;font-size:1.06rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:0;padding:.85rem 2.6rem .85rem .9rem;
  width:100%;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 1.35rem) 55%,calc(100% - 1rem) 55%;
  background-size:.4rem .4rem,.4rem .4rem;background-repeat:no-repeat}
.field select:focus{outline:2px solid var(--accent);outline-offset:-2px;border-color:var(--accent)}

/* Das Formular fuellt in einem zweispaltigen Block seine Spalte aus. */
.std .form{max-width:none}

/* ---------- Schlusszeile des Fusses ----------
   Copyright, Rechtliches und der Urhebervermerk standen untereinander und
   rechtsbuendig, das wirkte wie ein vierter Block. Jetzt eine Zeile ganz unten,
   deutlich abgesetzt und auf einem dunkleren Grund, damit sie als Abschluss
   und nicht als Inhalt gelesen wird. */
.footer__meta{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:.6rem 2rem;text-align:left;justify-items:start;
  margin-top:clamp(2.5rem,5vw,4rem);padding-block:1.4rem;
  border-top:1px solid var(--rule)}
.footer__meta > span{display:inline-flex;align-items:center;gap:.5rem}
.footer{padding-bottom:0}
.footer__meta{background:none}
/* Der Streifen laeuft ueber die volle Breite, der Text bleibt im Satzspiegel. */
.footer__saum{background:var(--saum)}
:root{--saum:#EDEAE4}
:root[data-theme="dark"]{--saum:#0A0B0D}
@media (max-width:700px){
  .footer__meta{flex-direction:column;align-items:flex-start;gap:.7rem}
}

/* ---------- Kontaktangaben im Abschlussband ----------
   Der eigene Kontaktstreifen ist weg: auf der Buchungsseite stand er als
   halbleerer Kasten zwischen zwei Abschnitten. Die drei Angaben haengen jetzt
   unter der Schaltflaeche im dunklen Band und brauchen nur die Farben. */
.cta__inner .contactlist{margin-top:clamp(2rem,3.5vw,2.8rem);padding-top:1.6rem;
  max-width:58rem;border-top:1px solid rgba(242,239,233,.18)}
.cta__inner .contactlist>li>span{color:rgba(242,239,233,.6)}
.cta__inner .contactlist :is(a,p){color:#F2EFE9}
.cta__inner .contactlist a:hover{color:#F4A483}

/* ---------- Handlungsleiste und WhatsApp ----------
   Auf dem Handy liegt der Termin dort, wo der Daumen ohnehin ist: eine feste
   Leiste am unteren Rand, zwei Wege, kein drittes Angebot. Der Fuss bekommt
   dafuer Platz, sonst verdeckt die Leiste die letzte Zeile. Das mobile Menue
   liegt mit z-index 60 darueber und deckt beide beim Oeffnen zu. */
/* Leiste und Knopf schwimmen ueber allem, was die Seite gerade zeigt: mal
   Grundton, mal die helle Standardsektion. Der Grundton als eigener Ruecken
   liess sie deshalb je nach Scrollstand verschwinden. Beide tragen jetzt die
   Akzentfarbe als Kante, die sich von jedem Abschnitt abhebt. */
.callbar{position:fixed;inset:auto 0 0;z-index:45;display:none;gap:1px;
  background:var(--accent);border-top:2px solid var(--accent);
  padding-bottom:env(safe-area-inset-bottom)}
.callbar a{flex:1;display:grid;place-items:center;padding:1.05rem .6rem;text-decoration:none;
  font-family:Grotesk,sans-serif;font-weight:600;font-size:1rem;letter-spacing:-.01em;
  background:var(--paper);color:var(--accent)}
.callbar a.callbar__go{background:var(--accent);color:var(--btn-ink)}
@media (max-width:820px){
  .callbar{display:flex}
  body{padding-bottom:4.2rem}
}

/* WhatsApp: am Rechner unten rechts, auf dem Handy ueber der Leiste. */
.wa{position:fixed;right:clamp(1rem,2vw,1.7rem);bottom:clamp(1rem,2vw,1.7rem);z-index:46;
  width:58px;height:58px;display:grid;place-items:center;border-radius:50%;
  background:var(--accent);border:1px solid var(--accent);color:var(--btn-ink);
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.wa:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--btn-ink)}
.wa svg{width:30px;height:30px;fill:currentColor;display:block}
@media (max-width:820px){
  .wa{width:52px;height:52px;bottom:calc(4.9rem + env(safe-area-inset-bottom))}
  .wa svg{width:27px;height:27px}
}
@media print{.callbar,.wa{display:none}}

/* ---------- Bewegung ----------
   Sechs Handgriffe, alle am NATIVEN Scrollen: kein Ruckeln, kein fremdes
   Scrollverhalten. Wer im Betriebssystem weniger Bewegung eingestellt hat,
   bekommt die Seite ruhig, deshalb steht der sichtbare Teil in einer Abfrage. */
.header{transition:transform .35s ease}
.header__progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%}

@media (prefers-reduced-motion:no-preference){
  /* 1. Der Kopf raeumt beim Lesen nach unten das Feld und kommt zurueck,
        sobald jemand nach oben geht. Ueber transform, damit nichts umbricht. */
  .header.is-hidden{transform:translateY(-100%)}

  /* 2. Der Fortschritt der Seite als feine Linie unter dem Kopf. */
  .header__progress{transition:transform .12s linear}

  /* 3. Bilder treten hinter einer Kante hervor statt einfach da zu sein. */
  .rv img{clip-path:inset(0 0 16% 0);
    transition:clip-path .95s cubic-bezier(.22,.61,.36,1)}
  .rv.in img{clip-path:inset(0 0 0 0)}

  /* 4. In einer Reihe kommt eine Karte nach der anderen, nicht alle zugleich.
        Den Zaehler setzt app.js, hier steht nur der Abstand. */
  .cards>.rv,.tiles>.rv{transition-delay:calc(var(--i,0)*90ms)}

  /* 5. Das Bild einer Programmkarte zieht beim Zeigen langsam heran. Der
        Verweis schneidet ab, sonst ragt es ueber die Kante der Karte hinaus.
        Nicht die Karte selbst: sonst beschnitte sie den Fokusrahmen. */
  .card--link a{overflow:clip}
  .cards .card--link img{transition:filter .3s,transform 1s cubic-bezier(.22,.61,.36,1),
    clip-path .95s cubic-bezier(.22,.61,.36,1)}
  .cards .card--link:hover img{transform:scale(1.045)}

  /* 6. Die breiten Baender laufen langsamer als die Seite. Den Versatz rechnet
        app.js, die Vergroesserung steht hier, damit keine Kante frei wird.
        Der Rahmen schneidet ab, sonst waechst das Bild aus seinem Feld. */
  .px{transform:scale(1.14);will-change:transform}
  .pagehero,.person__photo{overflow:clip}
}