/* Büchsenmacher Köln-Bonn — Fassung „Wechsel".
   Helle und dunkle Lagen wechseln, jede dunkle Fläche trägt ein Bild oder eine
   Aussage. Lodengrün des Hauses als einzige Farbe. Eine Schrift: Petrona,
   300 für Text, 600 für Überschriften und die kleinen Versalmarken.
   Logo, Texte und Bilder unverändert. */
@font-face{font-family:'Petrona';font-style:normal;font-weight:300;font-display:swap;src:url('../schriften/petrona-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Petrona';font-style:normal;font-weight:300;font-display:swap;src:url('../schriften/petrona-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Petrona';font-style:normal;font-weight:600;font-display:swap;src:url('../schriften/petrona-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Petrona';font-style:normal;font-weight:600;font-display:swap;src:url('../schriften/petrona-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  --loden:#305730; --loden-tief:#22401f; --loden-licht:#86ad83;
  --stahl:#14171a; --stahl-tief:#0e1113; --stahl-hoch:#1e2226;
  --grund:#f2f1ed; --grund-tief:#e7e5df; --weiss:#fbfaf8;
  --text:#191c1d; --leise:#585e5a;
  --linie:rgba(25,28,29,.15); --linie-hell:rgba(251,251,250,.17);
  --kreide:rgba(251,251,250,.72);
  --breite:1320px; --schmal:64ch; --rand:26px; --kopf:104px;
  /* Schriftsystem: eine Schrift, sechs Größen, mehr gibt es nicht.
     Petrona hat niedrige Versalien, die Marke steht deshalb bei 13 px. */
  --serif:'Petrona',Georgia,'Times New Roman',serif;
  --g-titel:clamp(2rem, 1.55rem + 1.3vw, 2.625rem);
  --g-ueber:clamp(1.45rem, 1.2rem + .75vw, 1.75rem);
  --g-zwischen:clamp(1.2rem, 1.1rem + .35vw, 1.3rem);
  /* In rem, damit eine größere Standardschrift im Browser auch den Text vergrößert */
  --g-text:1.125rem; --g-klein:1rem; --g-marke:.8125rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
::selection{background:var(--loden);color:#fff}
body{margin:0;font-family:var(--serif);font-weight:300;
  font-size:var(--g-text);line-height:1.72;color:var(--text);background:var(--grund);
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--loden);outline-offset:4px}
:target{scroll-margin-top:120px}

/* Alle Überschriften in einer Schrift und einem Schnitt */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;
  line-height:1.14;margin:0 0 .5em;overflow-wrap:break-word}
h1{font-size:var(--g-titel);letter-spacing:-.018em}
h2{font-size:var(--g-ueber)}
h3,h4{font-size:var(--g-zwischen)}
p{margin:0 0 1.25em}
p:last-child{margin-bottom:0}
/* Die eine Versalmarke: Leiste, Menü, Randnotiz, Beschriftungen, Knöpfe */
.augenbraue,.sprungmarke,.leiste,.navi > ul > li > a,.navi .unter > ul a,.randnotiz,.aussage cite,
.zeile-name,.zeile-pfeil,.knopf,.anschrift .name,.daten dt,.feld label,.fuss h2,.fuss .schluss{
  font-family:var(--serif);font-size:var(--g-marke);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;font-style:normal}
.augenbraue{display:block;color:var(--loden);margin:0 0 1.5em}
.bahn{width:100%;max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.nur-fuer-vorleser{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ohne-umbruch{white-space:nowrap}
.sprungmarke{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--loden);color:#fff;padding:14px 24px}
.sprungmarke:focus{left:0}

/* Menschen im Bild: nie den Kopf beschneiden */
.person img{object-position:50% 18%}

/* ------------------------------------------------------------------ Leiste */
.leiste{background:var(--stahl-tief);color:var(--kreide);letter-spacing:.08em}
.leiste .bahn{display:flex;flex-wrap:wrap;gap:6px 34px;align-items:center;min-height:40px;padding-top:9px;padding-bottom:9px}
.leiste a:hover{color:var(--loden-licht)}
.leiste span,.leiste a{display:inline-flex;align-items:center;gap:9px}
.leiste svg{width:12px;height:12px;flex:none;fill:currentColor;opacity:.66}

/* -------------------------------------------------------------------- Kopf */
.kopf{background:var(--stahl);position:relative;z-index:30}
.kopf .bahn{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:block;padding:14px 0;transition:padding .4s ease}
.logo img{width:270px;max-width:54vw;filter:brightness(0) invert(1);transition:width .4s ease}
.menue-knopf{display:none;width:46px;height:46px;border:1px solid var(--linie-hell);background:transparent;
  color:var(--kreide);cursor:pointer;align-items:center;justify-content:center;padding:0;
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.menue-knopf:hover{background:var(--loden);color:#fff;border-color:var(--loden)}
.menue-knopf svg{width:19px;height:19px;fill:currentColor}
.navi ul{display:flex;list-style:none;margin:0;padding:0}
.navi li{position:relative}
.navi > ul > li > a{display:flex;align-items:center;min-height:var(--kopf);padding:0 15px;
  color:var(--kreide);position:relative;transition:color .5s ease,min-height .4s ease}
.navi > ul > li > a::after{content:"";position:absolute;left:15px;right:15px;bottom:32px;height:1px;
  background:var(--loden-licht);transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.19,1,.22,1)}
.navi > ul > li > a:hover,.navi > ul > li > a:focus-visible{color:#fff}
.navi > ul > li > a:hover::after,.navi > ul > li > a:focus-visible::after,
.navi > ul > li > a[aria-current="page"]::after,.navi .aktiv > a::after{transform:scaleX(1)}
.navi > ul > li > a[aria-current="page"],.navi .aktiv > a{color:#fff}
.navi .unter > ul{position:absolute;top:100%;right:0;left:auto;min-width:268px;background:var(--stahl-hoch);
  border:1px solid var(--linie-hell);border-top:1px solid var(--loden-licht);flex-direction:column;padding:10px 0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .32s ease,transform .32s ease,visibility 0s linear .32s}
.navi .unter:hover > ul,.navi .unter:focus-within > ul{opacity:1;visibility:visible;transform:none;
  transition:opacity .32s ease,transform .32s ease}
.navi .unter > ul a{display:block;padding:11px 24px;color:var(--kreide);transition:color .3s ease,padding-left .3s ease}
.navi .unter > ul a:hover,.navi .unter > ul a:focus-visible{color:#fff;padding-left:30px}
.navi .aufklapp{display:none}
.platzhalter{height:0}
body.geklebt .platzhalter{height:calc(var(--kopf) + 40px)}
body.start.geklebt .platzhalter{height:0}
body.geklebt .kopf,body.start.geklebt .kopf{position:fixed;top:0;left:0;right:0;z-index:40;
  background:rgba(20,23,26,.88);border-bottom:1px solid var(--linie-hell)}
@supports (backdrop-filter:blur(14px)){
  body.geklebt .kopf,body.start.geklebt .kopf{background:rgba(20,23,26,.74);backdrop-filter:blur(14px) saturate(1.3)}}
body.geklebt .navi > ul > li > a,body.start.geklebt .navi > ul > li > a{min-height:74px}
body.geklebt .navi > ul > li > a::after,body.start.geklebt .navi > ul > li > a::after{bottom:18px}
body.geklebt .logo,body.start.geklebt .logo{padding:9px 0}
body.geklebt .logo img,body.start.geklebt .logo img{width:218px}
body.start .kopf{position:absolute;left:0;right:0;background:transparent}

/* ------------------------------------------------------------------ Bühne */
.buehne{position:relative;background:var(--stahl-tief)}
.buehne .bilder{position:relative;width:100%;aspect-ratio:16/8;min-height:440px}
.buehne figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.4s ease}
.buehne figure[data-sichtbar="ja"]{opacity:1}
.buehne img{width:100%;height:100%;object-fit:cover}
.buehne figure::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(14,17,19,.8) 0%,rgba(14,17,19,.58) 34%,rgba(14,17,19,.14) 64%,rgba(14,17,19,.04) 100%),
             linear-gradient(to top,rgba(14,17,19,.5) 0%,rgba(14,17,19,0) 40%)}
.buehne .texte{position:absolute;inset:0}
.buehne .text{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  width:100%;max-width:var(--breite);margin:0 auto;padding:var(--kopf) var(--rand) 40px;
  color:#fff;opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.buehne .text[data-sichtbar="ja"]{opacity:1}
.buehne .text p{color:rgba(255,255,255,.86);margin:0;max-width:42ch;
  font-size:var(--g-zwischen);line-height:1.5;text-shadow:0 1px 14px rgba(14,17,19,.6)}
/* Alle drei Folientitel gleich gesetzt, ohne Versalien. Keine Breitengrenze:
   „Büchsenmacher Köln-Bonn“ steht in einer Zeile, wo sie passt, sonst bricht
   sie nach „Büchsenmacher“ um. */
.buehne .text h1,.buehne .text .gross{color:#fff;margin:0 0 .34em;max-width:none;
  font-family:var(--serif);font-weight:600;text-transform:none;
  font-size:var(--g-titel);line-height:1.1;letter-spacing:-.018em}
.buehne .text > *{transform:translateY(22px);opacity:0;
  transition:transform 1s cubic-bezier(.19,1,.22,1),opacity 1s ease}
.buehne .text[data-sichtbar="ja"] > *:nth-child(1){transform:none;opacity:1;transition-delay:.2s}
.buehne .text[data-sichtbar="ja"] > *:nth-child(2){transform:none;opacity:1;transition-delay:.36s}
.buehne .blaettern{position:absolute;bottom:0;width:60px;height:60px;border:0;background:rgba(20,23,26,.55);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .4s ease}
.buehne .blaettern:hover,.buehne .blaettern:focus-visible{background:var(--loden)}
.buehne .zurueck{right:60px}.buehne .weiter{right:0}
/* Pause für den automatischen Bildwechsel (WCAG 2.2.2). Nur sichtbar, wenn
   er wirklich läuft: ohne JavaScript und bei reduzierter Bewegung steht er. */
.buehne .anhalten{right:120px}
.buehne .anhalten[hidden]{display:none}
.buehne .anhalten .abspielen,.buehne .anhalten[aria-pressed="true"] .pause{display:none}
.buehne .anhalten[aria-pressed="true"] .abspielen{display:block}
.buehne .blaettern svg{width:16px;height:16px;fill:currentColor}
.buehne .punkte{position:absolute;left:0;bottom:0;display:flex;margin:0;padding:0;list-style:none}
.buehne .punkte button{width:72px;height:60px;border:0;padding:0;cursor:pointer;background:transparent;position:relative}
.buehne .punkte button::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:rgba(255,255,255,.24);transition:background .5s ease}
.buehne .punkte button[aria-current="true"]::before{background:var(--loden-licht)}
.buehne .punkte button:hover::before{background:#fff}
@media(max-width:760px){.buehne .blaettern{display:none}.buehne .punkte button{width:56px;height:50px}
  .buehne .anhalten{display:flex;right:0;width:50px;height:50px}
  .buehne .anhalten[hidden]{display:none}}

/* ------------------------------------------------ Kopfband der Unterseiten */
.kopfband{position:relative;background:var(--stahl-tief);overflow:hidden}
.kopfband > picture,.kopfband > picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kopfband > picture img{opacity:.34}
.kopfband::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(14,17,19,.9) 0%,rgba(14,17,19,.52) 62%,rgba(14,17,19,.26) 100%)}
.kopfband .bahn{position:relative;z-index:2;padding-top:78px;padding-bottom:78px}
body.geklebt .kopfband .bahn{padding-top:78px}
.kopfband h1{color:#fff;margin:0;max-width:18ch}

/* ---------------------------------------------------- Text mit Randnotiz */
.lage{padding:96px 0}
.lage.eng{padding:72px 0}
.lage.warm{background:var(--weiss)}
.lage.dunkel{background:var(--stahl);color:rgba(255,255,255,.82)}
.lage.dunkel h2,.lage.dunkel h3{color:#fff}
.raster{display:grid;gap:44px;grid-template-columns:1fr}
@media(min-width:1000px){.raster{grid-template-columns:210px minmax(0,1fr);gap:84px}}
.randnotiz{color:var(--loden);line-height:2.15;margin:.55em 0 0;max-width:none}
.lage.dunkel .randnotiz{color:var(--loden-licht)}
.spalte{max-width:var(--schmal)}
.spalte p{line-height:1.78}
.spalte > p:first-of-type{font-size:var(--g-zwischen);line-height:1.5;color:#0f1213;margin-bottom:1.5em;font-weight:300}
.lage.dunkel .spalte > p:first-of-type{color:#fff}
.spalte h2{margin-top:2em}
.spalte h2:first-child{margin-top:0}
.spalte h3{margin-top:1.7em}
.spalte a{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:.06em;
  text-decoration-color:var(--loden);overflow-wrap:anywhere}
.spalte ul{padding-left:1.2em}
.spalte li{margin-bottom:.45em}

/* -------------------------------------------------------------- Bildlagen */
.vollbild{position:relative;background:var(--stahl-tief)}
.vollbild img{width:100%;aspect-ratio:2/1;object-fit:cover}
@media(max-width:760px){.vollbild img{aspect-ratio:4/3}}
.paarlage .paar{display:grid;gap:30px;grid-template-columns:1fr}
@media(min-width:820px){.paarlage .paar{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
.paarlage figure{margin:0}
.paarlage img{width:100%;aspect-ratio:3/2;object-fit:cover}
.paarlage figure.hoch img{aspect-ratio:3/4}

/* -------------------------------------------------------------- Aussage */
.aussage{background:var(--stahl);color:#fff;padding:104px 0}
.aussage .bahn{max-width:1020px}
.aussage blockquote{margin:0;font-weight:300;
  font-size:var(--g-ueber);line-height:1.4;letter-spacing:-.008em}
.aussage cite{display:block;margin-top:1.7em;color:var(--loden-licht)}

/* ------------------------------------------- Leistungsregister mit Bildtafel */
.register{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:1000px){.register{grid-template-columns:minmax(0,1fr) minmax(0,40%);gap:76px;align-items:start}}

.verzeichnis{border-top:1px solid var(--linie)}
.zeile{position:relative;display:grid;grid-template-columns:1fr;gap:6px;padding:30px 0 30px 0;
  border-bottom:1px solid var(--linie);transition:padding-left .7s cubic-bezier(.19,1,.22,1)}
@media(min-width:1000px){.zeile{grid-template-columns:minmax(150px,34%) 1fr;gap:4px 34px;align-items:baseline}}
/* Grüne Führungslinie der aktiven Zeile */
.zeile::before{content:"";position:absolute;left:0;top:30px;bottom:30px;width:2px;background:var(--loden);
  transform:scaleY(0);transform-origin:top;transition:transform .7s cubic-bezier(.19,1,.22,1)}
@media(min-width:1000px){
  .zeile.an{padding-left:22px}
  .zeile.an::before{transform:scaleY(1)}
}
.zeile-bild{display:none}
.zeile-name{color:var(--text);transition:color .5s ease,opacity .5s ease}
.zeile-name a::after{content:"";position:absolute;inset:0;z-index:1}
.zeile-text{margin:0;color:var(--leise);font-size:var(--g-klein);line-height:1.62;max-width:48ch;transition:opacity .5s ease,color .5s ease}
.zeile-pfeil{grid-column:1/-1;color:var(--loden);margin-top:10px;
  opacity:0;transform:translateY(4px);transition:opacity .5s ease,transform .5s cubic-bezier(.19,1,.22,1)}
@media(min-width:1000px){.zeile-pfeil{grid-column:2}}
.zeile-pfeil .pfeil{display:inline-block;transition:transform .5s cubic-bezier(.19,1,.22,1)}
.zeile.an .zeile-name{color:var(--loden)}
.zeile.an .zeile-pfeil{opacity:1;transform:none}
.zeile.an:hover .zeile-pfeil .pfeil,.zeile:focus-within .zeile-pfeil .pfeil{transform:translateX(6px)}
/* Die Liste tritt zurück, sobald eine Zeile im Fokus steht */
.register.fokus .zeile:not(.an) .zeile-name,
.register.fokus .zeile:not(.an) .zeile-text{opacity:.4}

/* Bildtafel: feste Fläche, klebt beim Scrollen */
.tafel{display:none}
@media(min-width:1000px){
  .tafel{display:block;position:sticky;top:112px;text-decoration:none;color:#fff}
}
.tafel-rahmen{position:relative;display:block;aspect-ratio:5/4;overflow:hidden;background:var(--stahl)}
.tafel figure{position:absolute;inset:0;margin:0;z-index:1;clip-path:inset(100% 0 0 0);
  transition:clip-path 1s cubic-bezier(.77,0,.18,1)}
.tafel figure.vorher{clip-path:inset(0 0 0 0);z-index:1}
.tafel figure.an{clip-path:inset(0 0 0 0);z-index:2}
.tafel figure picture,.tafel figure img{display:block;width:100%;height:100%}
.tafel figure img{object-fit:cover;transform:scale(1.12);transition:transform 1.8s cubic-bezier(.19,1,.22,1)}
.tafel figure.an img{transform:scale(1)}
.tafel-leiste{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:space-between;
  align-items:flex-end;gap:20px;padding:26px 26px 22px;
  background:linear-gradient(to top,rgba(14,17,19,.84) 0%,rgba(14,17,19,.44) 60%,rgba(14,17,19,0) 100%)}
.tafel-name{font-family:var(--serif);font-weight:600;font-size:var(--g-ueber);line-height:1.15;
  letter-spacing:-.012em;transition:opacity .35s ease,transform .45s cubic-bezier(.19,1,.22,1)}
.tafel-name.wechsel{opacity:0;transform:translateY(8px)}
.tafel-marken{display:flex;gap:6px;padding-bottom:6px}
.tafel-marken span{width:18px;height:2px;background:rgba(255,255,255,.34);transition:background .5s ease,width .5s ease}
.tafel-marken span.an{background:var(--loden-licht);width:30px}

/* Schmale Geräte: jede Zeile trägt ihr eigenes Bild */
@media(max-width:999px){
  .zeile{padding:26px 0 28px}
  .zeile-bild{display:block;margin-bottom:16px;overflow:hidden}
  .zeile-bild img{width:100%;aspect-ratio:16/10;object-fit:cover}
  .zeile-pfeil{opacity:1;transform:none}
  .register.fokus .zeile:not(.an) .zeile-name,.register.fokus .zeile:not(.an) .zeile-text{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .tafel figure{transition:none}
  .tafel figure img{transform:none;transition:none}
  .tafel-name.wechsel{opacity:1;transform:none}
}

/* ---------------------------------------------------- Weiterführender Fuß */
.weiter{border-top:1px solid var(--linie)}
.weiter .bahn{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between;
  align-items:baseline;padding-top:38px;padding-bottom:92px}
.weiter .augenbraue{margin:0;color:var(--leise)}
.weiter a{font-family:var(--serif);font-weight:600;font-size:var(--g-zwischen);display:inline-flex;
  align-items:center;gap:.7em;transition:gap .45s cubic-bezier(.19,1,.22,1),color .35s ease}
.weiter a:hover,.weiter a:focus-visible{gap:1.3em;color:var(--loden)}

/* ------------------------------------------------------------------ Knöpfe */
.knopf{display:inline-flex;align-items:center;gap:.8em;background:var(--loden);color:#fff;
  padding:15px 28px;border:1px solid var(--loden);cursor:pointer;
  transition:background .45s ease,border-color .45s ease,gap .45s ease}
.knopf:hover,.knopf:focus-visible{background:var(--loden-tief);border-color:var(--loden-tief);gap:1.3em;color:#fff}
.knopf.zweit{background:transparent;color:var(--loden)}
.knopf.zweit:hover{background:var(--loden);color:#fff}

/* --------------------------------------------------------------- Anschrift */
.anschrift{font-style:normal;line-height:1.95}
.anschrift .name{display:block;margin-bottom:.55em}
.anschrift a{text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--loden)}
.karte-bild{display:block;overflow:hidden;background:var(--stahl)}
.karte-bild img{transition:transform 1.4s cubic-bezier(.19,1,.22,1),opacity .5s ease;opacity:.95}
.karte-bild:hover img{transform:scale(1.03);opacity:1}
.karte-hinweis{font-size:var(--g-klein);color:var(--leise);margin-top:.8em}
.karte-hinweis a{text-decoration:underline}

/* -------------------------------------------------------------- Datenspalte */
.daten{border-top:2px solid var(--text);padding-top:8px}
.daten dl{margin:0}
.daten div{display:grid;gap:4px;padding:18px 0;border-bottom:1px solid var(--linie)}
.daten dt{color:var(--leise);margin:0}
.daten dd{margin:0;font-size:var(--g-klein);line-height:1.5}
.daten dd a{text-decoration:underline;text-underline-offset:.2em}

/* ---------------------------------------------------------------- Formular */
.formular{display:grid;gap:24px;max-width:660px}
.feld{display:grid;gap:8px}
.feld label{color:var(--leise)}
.feld .pflicht{color:var(--loden)}
.feld input,.feld textarea{font-family:var(--serif);font-size:var(--g-text);font-weight:300;
  padding:14px 0;border:0;border-bottom:1px solid var(--linie);background:transparent;color:var(--text);
  width:100%;border-radius:0;transition:border-color .4s ease,box-shadow .4s ease}
.feld textarea{min-height:150px;resize:vertical}
.feld input:hover,.feld textarea:hover{border-bottom-color:var(--leise)}
.feld input:focus,.feld textarea:focus{border-bottom-color:var(--loden);box-shadow:0 1px 0 0 var(--loden)}
.feld input:focus-visible,.feld textarea:focus-visible{outline:2px solid var(--loden);outline-offset:4px}
/* Die Einwilligung ist ein Satz, keine Beschriftung: normaler Text */
.feld .zustimmung{display:flex;gap:14px;align-items:flex-start;font-family:var(--serif);font-size:var(--g-klein);
  text-transform:none;letter-spacing:0;color:var(--text);font-weight:300}
.zustimmung input{width:20px;height:20px;margin:4px 0 0;flex:none;accent-color:var(--loden);border-bottom:0}
.zustimmung a{text-decoration:underline;text-underline-offset:.2em}
.lockfeld{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.meldung{padding:18px 22px;border-left:2px solid var(--loden);background:var(--grund-tief)}
.meldung[data-art="fehler"]{border-left-color:#9c3128}

/* -------------------------------------------------------------------- Fuß */
.fuss{background:var(--stahl-tief);color:rgba(255,255,255,.72);padding:92px 0 32px;font-size:var(--g-klein)}
.fuss a{color:#fff}
.fuss a:hover{color:var(--loden-licht)}
.fuss h2{color:var(--loden-licht);margin-bottom:1.7em}
.fuss .spalten{display:grid;gap:50px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:.6em}
.fuss .anschrift{line-height:2}
.fuss .anschrift .name{color:#fff}
.fuss .schluss{margin-top:64px;padding-top:22px;border-top:1px solid var(--linie-hell);
  color:rgba(255,255,255,.62);display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between}
.mitte{text-align:center;padding:124px 0}
.mitte .spalte{margin:0 auto}

/* ------------------------------------------------- Bewegung beim Scrollen */
.zeigt-auf{opacity:0;transform:translateY(20px)}
.zeigt-auf.sichtbar{opacity:1;transform:none;transition:opacity 1s ease,transform 1s cubic-bezier(.19,1,.22,1)}
.verzeichnis .zeigt-auf.sichtbar:nth-child(2){transition-delay:.08s}
.verzeichnis .zeigt-auf.sichtbar:nth-child(3){transition-delay:.14s}
.verzeichnis .zeigt-auf.sichtbar:nth-child(4){transition-delay:.21s}

/* ------------------------------------------------------------------- Mobil */
@media(max-width:999px){
  :root{--kopf:70px;--rand:20px;--g-text:1.0625rem}
  .menue-knopf{display:inline-flex}
  body.start .kopf{position:static;background:var(--stahl)}
  body.geklebt .platzhalter,body.start.geklebt .platzhalter{height:0}
  body.geklebt .kopf,body.start.geklebt .kopf{position:relative;background:var(--stahl);backdrop-filter:none}
  body.geklebt .logo,body.start.geklebt .logo{padding:14px 0}
  body.geklebt .logo img,body.start.geklebt .logo img{width:270px}
  .navi{position:absolute;left:0;right:0;top:100%;background:var(--stahl-hoch);
    box-shadow:0 18px 34px rgba(14,17,19,.34);max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .4s ease,visibility 0s linear .4s;z-index:50}
  .navi[data-offen="ja"]{max-height:84vh;overflow-y:auto;visibility:visible;transition:max-height .4s ease}
  .navi ul{flex-direction:column}
  .navi > ul > li > a{min-height:0;padding:15px var(--rand);border-bottom:1px solid var(--linie-hell)}
  .navi > ul > li > a::after{display:none}
  .navi > ul > li > a[aria-current="page"],.navi .aktiv > a{color:var(--loden-licht)}
  .navi .unter > ul{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;
    padding:0;max-height:0;overflow:hidden;transition:max-height .4s ease;min-width:0}
  .navi .unter[data-offen="ja"] > ul{max-height:900px}
  .navi .unter > ul a{padding-left:calc(var(--rand) + 22px);background:var(--stahl-tief);
    border-bottom:1px solid var(--linie-hell)}
  .navi .aufklapp{display:flex;position:absolute;right:0;top:0;width:56px;height:53px;align-items:center;
    justify-content:center;border:0;background:transparent;color:var(--kreide);cursor:pointer}
  .navi .aufklapp svg{width:13px;height:13px;fill:currentColor;transition:transform .35s ease}
  .navi .unter[data-offen="ja"] .aufklapp svg{transform:rotate(180deg)}
  .buehne .bilder{aspect-ratio:3/4;min-height:0}
  .buehne .text{padding:0 var(--rand) 84px;justify-content:flex-end}
  .buehne .text h1,.buehne .text .gross{max-width:none}
  .kopfband .bahn{padding-top:52px;padding-bottom:52px}
  .lage{padding:62px 0}
  .aussage{padding:66px 0}
  .weiter .bahn{padding-bottom:64px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0s!important}
  .zeigt-auf{opacity:1;transform:none}
  .buehne .text > *{transform:none;opacity:1}
  }

@media print{
  .leiste,.kopf,.fuss,.buehne .blaettern,.buehne .punkte,.sprungmarke,.platzhalter,.weiter{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .lage,.kopfband,.aussage{padding:12pt 0;background:#fff!important;color:#000!important}
  .kopfband h1,.aussage blockquote,.aussage cite{color:#000!important}
  .kopfband::after,.kopfband > picture{display:none!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .zeigt-auf{opacity:1;transform:none}
}

/* ======================================================================
   Kopf hell, Logo in Originalfarben. Das Logo ist gesetzt und wird nicht
   umgefärbt. Die obere Leiste bleibt dunkel wie im Original, das Stahlgrau
   trägt weiter die Bänder darunter.
   ====================================================================== */
.kopf{background:rgba(251,250,248,.97);border-bottom:1px solid var(--linie)}
.logo img{filter:none;opacity:1}
.menue-knopf{border-color:var(--linie);color:var(--text)}
.menue-knopf:hover{background:var(--loden);color:#fff;border-color:var(--loden)}
.navi > ul > li > a{color:#3a3f41}
.navi > ul > li > a:hover,.navi > ul > li > a:focus-visible{color:var(--loden)}
.navi > ul > li > a[aria-current="page"],.navi .aktiv > a{color:var(--loden)}
.navi > ul > li > a::after{background:var(--loden);height:2px}
.navi .unter > ul{background:var(--weiss);border:1px solid var(--linie);border-top:2px solid var(--loden);
  box-shadow:0 18px 40px rgba(20,23,26,.12)}
.navi .unter > ul a{color:#3a3f41}
.navi .unter > ul a:hover,.navi .unter > ul a:focus-visible{color:var(--loden)}

/* Klebender Kopf: hell, durchscheinend */
body.geklebt .kopf,body.start.geklebt .kopf{background:rgba(251,250,248,.9);border-bottom:1px solid var(--linie);
  box-shadow:0 2px 22px rgba(20,23,26,.08)}
@supports (backdrop-filter:blur(14px)){
  body.geklebt .kopf,body.start.geklebt .kopf{background:rgba(251,250,248,.78);backdrop-filter:blur(14px) saturate(1.25)}
}

/* Startseite: helles, durchscheinendes Band über der Bühne, wie im Original */
body.start .kopf{position:absolute;left:0;right:0;background:rgba(251,250,248,.84);border-bottom:0}
@supports (backdrop-filter:blur(10px)){
  body.start .kopf{background:rgba(251,250,248,.88);backdrop-filter:blur(16px) saturate(.9)}
}

@media(max-width:999px){
  body.start .kopf{position:static;background:var(--weiss);backdrop-filter:none}
  body.geklebt .kopf,body.start.geklebt .kopf{background:var(--weiss);backdrop-filter:none;box-shadow:none}
  .navi{background:var(--weiss);box-shadow:0 18px 34px rgba(20,23,26,.14)}
  .navi > ul > li > a{border-bottom:1px solid var(--linie);color:#3a3f41}
  .navi > ul > li > a[aria-current="page"],.navi .aktiv > a{color:var(--loden)}
  .navi .unter > ul a{background:var(--grund);border-bottom:1px solid var(--linie);color:#3a3f41}
  .navi .aufklapp{color:var(--text)}
}

/* ------------------------------------------------ Personen auf „Das Team" */
.person-block{padding:104px 0}
.person-block.warm{background:var(--weiss)}
.person-raster{display:grid;gap:40px;grid-template-columns:1fr;align-items:start}
@media(min-width:1000px){
  .person-raster{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:92px}
  .person-raster.rechts{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .person-raster.rechts .person-bild{order:2}
  /* Das Foto bleibt stehen, während man den längeren Text liest */
  .person-bild{position:sticky;top:124px}
}
.person-bild{margin:0}
.person-bild img{width:100%;object-fit:cover}
.person-bild.hoch img{aspect-ratio:4/5;object-position:50% 14%}
.person-bild.quer img{aspect-ratio:4/3;object-position:70% 35%}
.person-text{max-width:60ch}
.person-text h2{line-height:1.08;margin-bottom:.7em}
.person-text .augenbraue{margin-bottom:1.1em}
@media(max-width:999px){.person-block{padding:64px 0}}

/* Gerahmtes Vollbild: für Originale, die randlos nicht scharf blieben */
.vollbild.gerahmt{background:transparent;max-width:1128px;margin:0 auto;padding:12px var(--rand) 96px}
.vollbild.gerahmt img{aspect-ratio:16/9}
@media(max-width:999px){.vollbild.gerahmt{padding-bottom:62px}}

/* Schmale Bildschirme: Schrift steht unten, also Verlauf von unten statt von links */
@media(max-width:999px){
  .buehne figure::after{background:linear-gradient(to top,rgba(14,17,19,.88) 0%,rgba(14,17,19,.64) 34%,rgba(14,17,19,.14) 66%,rgba(14,17,19,.04) 100%)}
}

/* ------------------------------------------------ Telefon: Tippflächen und Lesegrößen */
/* Telefonnummer in der oberen Leiste: Tippfläche vergrößert, ohne das Layout zu verschieben */
.leiste a{padding:11px 0;margin:-11px 0}
/* Einwilligung im Formular: Kästchen auf die Mindestgröße von 24 Pixel */
.zustimmung input{width:24px;height:24px;margin-top:2px}
@media(max-width:999px){ .randnotiz{line-height:2} }

/* Startseite auf dem Telefon: Kopf muss Bezugsrahmen für das Menü bleiben */
@media(max-width:999px){ body.start .kopf{position:relative;z-index:40} }

/* ------------------------------- Telefon: Kopf klebt, weicht beim Lesen aus */
.kopf-knoepfe{display:none}
@media(max-width:999px){
  .kopf-knoepfe{display:flex;align-items:center;gap:10px}
  .anruf{display:inline-flex;width:46px;height:46px;align-items:center;justify-content:center;
    border:1px solid var(--linie);color:var(--loden);
    transition:background .3s ease,color .3s ease,border-color .3s ease}
  .anruf:hover,.anruf:focus-visible{background:var(--loden);color:#fff;border-color:var(--loden)}
  .anruf svg{width:19px;height:19px;fill:currentColor}
  /* Der ganze Kopfbereich klebt, um die Höhe der Leiste nach oben versetzt:
     die Adresszeile geht, Logo und Knöpfe bleiben */
  .seitenkopf{position:sticky;top:calc(-1 * var(--leiste-hoehe, 0px));z-index:45;
    transition:transform .38s cubic-bezier(.2,.7,.2,1)}
  body.geklebt .kopf,body.start.geklebt .kopf{box-shadow:0 2px 18px rgba(20,23,26,.1)}
  body.geklebt .logo,body.start.geklebt .logo{padding:9px 0}
  body.geklebt .logo img,body.start.geklebt .logo img{width:196px}
  body.kopf-weg .seitenkopf{transform:translateY(-100%)}
}
@media(max-width:999px) and (prefers-reduced-motion:reduce){ .seitenkopf{transition:none} }