/* Prinzengarde der Stadt Krefeld 1914 e.V. – Gestaltung 1:1 nach der bisherigen Seite (Uncode-Theme), neu geschrieben für PixoSite.
   Maße, Farben und Schriften wurden von der alten Seite abgemessen. Schriften lokal (Crimson Text, Nunito Sans, SIL OFL). */

@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/nunito-sans-v15-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/nunito-sans-v15-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Crimson Text'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/crimson-text-v19-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Crimson Text'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/crimson-text-v19-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Crimson Text'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/crimson-text-v19-latin-700.woff2') format('woff2'); }

:root {
  --gruen: #00853e;
  --gold: #bd9529;
  --gold-hell: #efb318;
  --hell: #fafaf8;
  --menue: #303133;
  --serif: 'Crimson Text', Georgia, 'Times New Roman', serif;
  --sans: 'Nunito Sans', 'Crimson Text', sans-serif;
  --kopf: 200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: #000; font-family: var(--serif); font-size: 16px; line-height: 1.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: var(--gruen); text-decoration: none; transition: color .2s; }
a:hover { color: #006a31; }
strong, b { font-weight: 600; color: var(--gruen); }
p { margin: 18px 0 0; }
p:first-child, .text > :first-child { margin-top: 0; }
ul, ol { margin: 18px 0 0; padding-left: 36px; }
li { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--sans); font-weight: 600; color: var(--gruen); }

/* ---------------------------------------------------------------- Überschriften wie im Theme */
.ue1 { font-size: 35px; line-height: 1.2; letter-spacing: .05em; }
.ue2 { font-size: 29px; line-height: 1.2; letter-spacing: .05em; }
.ue3 { font-size: 24px; line-height: 1.2; letter-spacing: .05em; }
.ue4 { font-size: 20px; line-height: 1.2; letter-spacing: .05em; }
.ue5 { font-size: 17px; line-height: 1.2; letter-spacing: .05em; }
.ue6 { font-size: 14px; line-height: 1.2; letter-spacing: .05em; }
.gross { text-transform: uppercase; }
.gold { color: var(--gold); }
.weiss { color: #fff; }
.mitte { text-align: center; }
.klein-text { font-size: 13px; line-height: 1.75; }
.text-gross { font-size: 18px; line-height: 1.75; }
.text-gross p { margin-top: 18px; }

/* Text aus dem Editor */
.text h3 { font-size: 24px; line-height: 1.2; letter-spacing: .05em; margin: 27px 0 0; }
.text h4 { font-size: 20px; line-height: 1.2; letter-spacing: .05em; margin: 27px 0 0; }
.text h3 + p, .text h4 + p { margin-top: 18px; }
.text ul { list-style: disc; }
.text ol { list-style: decimal; }
.text-links { text-align: left; }
.text-mitte { text-align: center; }
.text-rechts { text-align: right; }
.text-block { text-align: justify; }

/* ---------------------------------------------------------------- Raster */
.inhalt { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 36px; }
.zeile { position: relative; }
.zeile.hell { background: var(--hell); }
.zeile.gruen { background: var(--gruen); }
.zeile > .inhalt { position: relative; z-index: 1; }
.pt-0 { padding-top: 0; } .pt-36 { padding-top: 36px; } .pt-72 { padding-top: 72px; } .pt-108 { padding-top: 108px; } .pt-144 { padding-top: 144px; }
.pb-0 { padding-bottom: 0; } .pb-36 { padding-bottom: 36px; } .pb-72 { padding-bottom: 72px; } .pb-108 { padding-bottom: 108px; } .pb-144 { padding-bottom: 144px; }
.spalten { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); column-gap: 72px; row-gap: 36px; }
.spalten.eng { column-gap: 36px; }
.s-4-8 { display: grid; grid-template-columns: calc((100% + 72px) / 3 - 72px) minmax(0, 1fr); column-gap: 72px; }
.s-4-8.eng { grid-template-columns: calc((100% + 36px) / 3 - 36px) minmax(0, 1fr); column-gap: 36px; }
.mittig { align-items: center; }

/* Wellen am unteren Rand (wie die Theme-Trenner) */
.welle { position: absolute; left: 0; right: 0; bottom: 0; height: var(--wh, 150px); z-index: 0; pointer-events: none; overflow: hidden; }
.welle svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: block; }
.welle.vorne { z-index: 3; }

/* ---------------------------------------------------------------- Kopf und Menü */
.seite { position: relative; }
#kopf { position: absolute; top: 0; left: 0; right: 0; z-index: 50; height: var(--kopf); display: flex; align-items: center; justify-content: space-between; background: #fff; box-shadow: 0 4px 10px -10px rgba(0, 0, 0, .6); }
#kopf.auf-bild { background: rgba(0, 133, 62, .8); box-shadow: none; }
#kopf .logo { display: block; padding: 10px 36px 10px 34px; flex: none; }
#kopf .logo img { height: 180px; width: auto; }
#menue-knopf { display: none; }
#menue > ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0 34px 0 0; }
#menue > ul > li { position: relative; margin-left: 4px; }
#menue > ul > li > a { display: flex; align-items: center; height: var(--kopf); padding: 0 14px; font-family: var(--serif); font-size: 15px; font-weight: 700; letter-spacing: .05em; line-height: 1; color: var(--menue); white-space: nowrap; }
#menue > ul > li:first-child > a { padding-left: 0; }
#menue > ul > li:last-child > a { padding-right: 0; }
#menue > ul > li > a:hover, #menue > ul > li.aktiv > a { color: var(--gruen); }
#kopf.auf-bild #menue > ul > li > a { color: #fff; }
#kopf.auf-bild #menue > ul > li > a:hover, #kopf.auf-bild #menue > ul > li.aktiv > a { color: var(--gold-hell); }
#menue .pfeil { display: inline-block; width: 7px; height: 7px; margin: -4px 0 0 9px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); }
#menue ul ul { list-style: none; margin: 0; padding: 18px; position: absolute; top: 100%; left: 0; min-width: 231px; background: var(--gruen); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 60; }
#menue li:hover > ul, #menue li:focus-within > ul { opacity: 1; visibility: visible; transform: none; }
#menue ul ul a { display: block; padding: 5px 9px; font-size: 15px; line-height: 1.25; color: #fff; white-space: nowrap; }
#menue ul ul a:hover, #menue ul ul li.aktiv > a { color: var(--gold-hell); }

/* ---------------------------------------------------------------- Seitenkopf */
.seitenkopf { padding: calc(var(--kopf) + 109px) 0 108px; text-align: center; }
.seitenkopf.nach-bild { padding-top: 108px; }
.seitenkopf .einleitung { max-width: 900px; margin: 18px auto 0; }
.seitenkopf .einleitung.breit { max-width: 984px; }
.seitenkopf.pb-72 { padding-bottom: 72px; }
.seitenkopf.pb-36 { padding-bottom: 36px; }

.kopfbild { position: relative; height: 540px; overflow: hidden; background: #141618; }
.kopfbild > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kopfbild.oben > img { object-position: 50% 0; }
.kopfbild.unten > img { object-position: 50% 100%; }
.kopfbild.dunkel::after { content: ''; position: absolute; inset: 0; background: rgba(20, 22, 24, .5); }

/* ---------------------------------------------------------------- Knöpfe */
.knopf, a.knopf { display: inline-block; margin-top: 18px; padding: 15px 36px; border: 1px solid var(--gold); border-radius: 140px; background: var(--gold); color: #fff; font-family: var(--serif); font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: .1em; text-align: center; transition: background .2s, border-color .2s, color .2s; }
.knopf:hover, .knopf:visited:hover { background: #a8841f; border-color: #a8841f; color: #fff; }
.knopf:visited, .knopf:active { color: #fff; }
.knopf.gruen { background: var(--gruen); border-color: var(--gruen); }
.knopf.gruen:hover { background: #006a31; border-color: #006a31; }
.knopf .symbol { display: inline-block; width: 11px; height: 11px; margin: 0 7px -1px 0; vertical-align: baseline; }

/* ---------------------------------------------------------------- Bilder */
.rund img { border-radius: 50%; border: 7px solid #fff; aspect-ratio: 1; object-fit: cover; width: 100%; }
.rund.gruen-rand img { border-color: var(--gruen); }
.bild-voll img { width: 100%; }
.bildtext { margin-top: 36px; text-align: center; font-size: 13px; line-height: 1.75; }

/* ---------------------------------------------------------------- Footer */
#fuss { background: var(--gruen); color: #fff; border-top: 1px solid rgba(255, 255, 255, .25); }
#fuss .oben { padding: 72px 36px 36px; text-align: center; }
#fuss .mitte-spalte { max-width: 284px; margin: 0 auto; }
#fuss .fuss-logo { width: 85px; margin: 0 auto; }
#fuss h3 { margin-top: 18px; color: var(--gold-hell); }
#fuss p { margin: 18px 0 0; color: #fff; }
#fuss .sozial { display: flex; justify-content: center; gap: 18px; margin-top: 18px; height: 21px; }
#fuss .sozial a { color: #fff; display: block; width: 18px; height: 18px; }
#fuss .sozial a:hover { color: var(--gold-hell); }
#fuss .sozial svg { width: 15px; height: 15px; margin: 1.5px; display: block; fill: currentColor; }
#fuss .unten { padding: 28px 36px; text-align: center; font-size: 13px; line-height: 1.75; }
#fuss .unten p { margin: 18px 0 0; }
#fuss .unten p:first-child { margin-top: 0; }
#fuss .unten a { color: #fff; }
#fuss .unten a:hover { color: var(--gold-hell); }
#fuss .credit a { color: rgba(255, 255, 255, .85); }

#nach-oben { position: fixed; right: 22px; bottom: 60px; z-index: 40; width: 34px; height: 34px; border: 0; padding: 0; background: var(--gruen); color: #fff; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
#nach-oben.zeigen { opacity: 1; visibility: visible; }
#nach-oben::before { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -2px 0 0 -4px; border-left: 1.6px solid #fff; border-top: 1.6px solid #fff; transform: rotate(45deg); }

/* ---------------------------------------------------------------- Startseite */
.start-kopf { position: relative; height: 765px; overflow: hidden; }
.start-kopf > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.start-kopf .inhalt { position: relative; height: 100%; z-index: 2; }
.start-kopf .band { position: absolute; left: 36px; right: 36px; bottom: 90px; padding: 1px; background: rgba(0, 133, 62, .47); text-align: center; }
.start-kopf h2 { color: #fff; }
.start-neu { padding-bottom: 72px; padding-top: 1px; }
.start-neu .spalten, .start-termine .spalten, .start-stecken .spalten { --n: 2; align-items: center; }
.start-neu h6, .start-neu h3 { color: #fff; }
.start-neu h3, .start-termine h3, .start-stecken h3 { margin-top: 18px; }
.start-termine { padding: 108px 0; position: relative; z-index: 2; }
.collage { position: relative; aspect-ratio: 528 / 504; }
.collage .k { position: absolute; width: 65%; aspect-ratio: 1; box-shadow: 0 15px 50px -10px rgba(0, 0, 0, .3); }
.collage .k img { width: 100%; height: 100%; object-fit: cover; }
.collage .k1 { left: 28.8%; top: 13.7%; }
.collage .k2 { left: 6.1%; top: 18.5%; }
.collage .k3 { left: 17.4%; top: 68.3%; }
.collage .senkrecht { position: absolute; left: -28px; top: 0; bottom: 0; display: flex; align-items: center; }
.collage .senkrecht span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 17px; line-height: 1.2; color: var(--gold); text-transform: uppercase; }
.start-stecken { padding: 0 0 108px; }
.start-stecken .text { margin-top: 18px; }

/* ---------------------------------------------------------------- Personen */
.personen { --n: 3; row-gap: 72px; }
.person h3 { margin-top: 2px; }
.person p { margin-top: 1px; }
.person .mail { display: block; overflow-wrap: anywhere; }
.namensliste { --n: 4; row-gap: 72px; }
.namensliste p { margin-top: 1px; font-size: 18px; line-height: 1.75; }
.portraits { --n: 4; row-gap: 36px; }
.portrait img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.portrait h3 { margin-top: 37px; }
.portrait p { margin-top: 10px; }
.portraits.hoch .portrait img { aspect-ratio: 2 / 3; }
.portraits.hoch .portrait p { font-size: 13px; line-height: 1.75; }

/* Tabellen (Ehrenoffiziere, Sonderfunktionen, Großkreuz) */
.tabelle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 36px; row-gap: 36px; align-items: start; }
.tabelle h4 { line-height: 1.2; }
.tabelle .jahr { text-align: right; padding-top: 3px; }

/* Zwei Spalten mit Überschrift links (Spenden, Kurier, Mitglied werden) */
.abschnitt + .abschnitt { margin-top: 72px; }
.abschnitt .knopf { margin-top: 18px; }
.konto { display: grid; grid-template-columns: 219px 1fr; column-gap: 36px; align-items: center; margin-top: 0; }
.konto + .konto { margin-top: 0; }
.konto .qr img { width: 219px; height: 219px; object-fit: contain; }

/* Galerie der Steckenpferdritter */
.ritter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 36px; }
.ritter figure { margin: 0; position: relative; overflow: hidden; aspect-ratio: 1; background: #ddd; }
.ritter img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ritter figcaption { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 36px; text-align: center; color: #fff; background: rgba(0, 133, 62, .85); opacity: 0; transition: opacity .3s; }
.ritter figure:hover figcaption, .ritter figure:focus-within figcaption { opacity: 1; }
.ritter figure:hover img { transform: scale(1.05); }
.ritter figcaption strong { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: .05em; color: #fff; line-height: 1.35; }
.ritter figcaption span { display: block; margin-top: 9px; line-height: 1.75; }
.ritter figcaption em { font-style: normal; display: block; margin-top: 2px; line-height: 1.75; }
@media (hover: none) { .ritter figcaption { opacity: 1; background: rgba(0, 133, 62, .6); } }

/* Geschichte */
.gesch-box { position: relative; z-index: 2; margin-top: -108px; background: #fff; padding: 54px 0 54px; }
.gesch-box .s-kopf { display: grid; grid-template-columns: 300px 1fr; }
.gesch-box .label { text-align: right; padding: 72px 36px 0 0; border-right: 1px solid #eaeaea; }
.gesch-box .titel { padding: 36px 0 36px 36px; }
.gesch-box .titel p { margin-top: 18px; }
.gesch-text { max-width: 804px; margin-left: 162px; }

.gesch-abschnitt { padding: 36px 0; }
.gesch-abschnitt.erster { padding-top: 72px; }
.gesch-bild { display: grid; grid-template-columns: 158px 1fr; column-gap: 36px; padding: 36px 0 0; }
.gesch-bild img { width: 400px; max-width: 100%; }
.gesch-info { padding: 36px 0 108px; }
.gesch-info h3 { margin-bottom: 9px; }

/* Tanzpaar */
.tanzpaar { display: grid; grid-template-columns: 1fr 1fr; column-gap: 72px; align-items: center; }
.wechsel { position: relative; aspect-ratio: 526 / 659; max-width: 526px; }
.wechsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s; }
.wechsel img.aktiv { opacity: 1; }
.tanzpaar h3 + .text { margin-top: 1px; }
.tanzpaar .text + h3 { margin-top: 36px; }

/* Partner */
.partner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 36px; row-gap: 36px; }
.partner img { width: 100%; aspect-ratio: 2 / 1; object-fit: contain; }

/* Kurier, Steckenpferd, Kontakt */
.ritter-aktuell { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; align-items: start; }
.ritter-aktuell h3 + h3 { margin-top: 18px; }
.ritter-aktuell .text { margin-top: 18px; }
.kontakt-text { max-width: 984px; margin: 0 auto; }

/* JeckDesk */
.jeckdesk-frame { display: block; width: 100%; min-height: 400px; border: 0; }
.jeckdesk-frame.kurz { min-height: 300px; }

/* Rechtstexte */
.recht { padding: calc(var(--kopf) + 72px) 0 108px; }
.recht h1 { margin-bottom: 30px; }

/* ---------------------------------------------------------------- Tablet und Handy */
@media (max-width: 959px) {
  :root { --kopf: 110px; }
  #kopf, #kopf.auf-bild { position: sticky; top: 0; background: #fff; box-shadow: 0 4px 10px -10px rgba(0, 0, 0, .6); height: var(--kopf); }
  .seite > #kopf + * { margin-top: calc(-1 * var(--kopf)); }
  #kopf .logo { padding: 10px 36px; }
  #kopf .logo img { height: 90px; }
  #menue-knopf { display: block; position: relative; width: 92px; height: var(--kopf); border: 0; background: none; cursor: pointer; padding: 0 36px; }
  #menue-knopf span, #menue-knopf::before, #menue-knopf::after { content: ''; position: absolute; left: 36px; width: 20px; height: 2px; background: var(--menue); transition: transform .3s, opacity .3s; }
  #menue-knopf::before { top: calc(50% - 7px); }
  #menue-knopf span { top: calc(50% - 1px); }
  #menue-knopf::after { top: calc(50% + 5px); }
  #menue-knopf.offen span { opacity: 0; }
  #menue-knopf.offen::before { transform: translateY(6px) rotate(45deg); }
  #menue-knopf.offen::after { transform: translateY(-6px) rotate(-45deg); }
  #menue { position: fixed; top: var(--kopf); left: 0; right: 0; bottom: 0; background: var(--gruen); overflow-y: auto; display: none; padding: 36px 0; }
  #menue.offen { display: flex; align-items: center; justify-content: center; }
  #menue > ul { display: block; padding: 0; margin: auto 0; text-align: center; }
  #menue > ul > li { margin: 0; }
  #menue > ul > li > a, #kopf.auf-bild #menue > ul > li > a { display: inline-flex; height: auto; padding: 5px 9px !important; font-size: 20px; letter-spacing: .05em; color: #fff; }
  #menue > ul > li.aktiv > a, #kopf.auf-bild #menue > ul > li.aktiv > a { color: var(--gold-hell); }
  #menue ul ul { position: static; display: none; opacity: 1; visibility: visible; transform: none; background: none; padding: 18px 0; min-width: 0; }
  #menue li.offen > ul { display: block; }
  #menue ul ul a { font-size: 20px; font-weight: 700; padding: 3px 9px; }
  #menue .pfeil { display: none; }

  .seitenkopf { padding: calc(var(--kopf) + 62px) 0 72px; }
  .seitenkopf.nach-bild { padding-top: 72px; }
  .spalten, .s-4-8 { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .personen, .namensliste { row-gap: 36px; }
  .tabelle { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .tabelle > * { margin: 0; }
  .tabelle .jahr { text-align: left; padding-top: 0; }
  .tabelle h4 { margin-top: 0; }
  .tabelle .neu { margin-top: 36px; }
  .tabelle .neu:first-child { margin-top: 0; }
  .portraits { --n: 2; }
  .ritter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tanzpaar, .ritter-aktuell { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .gesch-text { margin-left: 0; }
  .gesch-box { margin-top: 0; padding: 36px 0; }
  .gesch-box .s-kopf { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .gesch-box .label { text-align: center; padding: 0; border: 0; }
  .gesch-box .titel { padding: 36px 0 0; }
  .gesch-bild { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .gesch-bild .klein-text { order: 2; }
  .start-kopf .band { bottom: 72px; }
  .start-termine .text-spalte { text-align: center; }
  .start-termine, .start-neu { padding-top: 72px; padding-bottom: 72px; }
  .start-neu { padding-top: 1px; }
  .start-stecken { padding-bottom: 72px; }
  .collage .senkrecht { display: none; }
  .welle { height: calc(var(--wh, 150px) * .3125); }
  .recht { padding-top: calc(var(--kopf) + 36px); }
  .pt-108 { padding-top: 72px; } .pb-108 { padding-bottom: 72px; } .pb-144 { padding-bottom: 72px; }
  .konto { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .konto .qr img { width: 100%; height: auto; aspect-ratio: 1; }
  .start-kopf { height: 765px; }
}
@media (max-width: 569px) {
  .portraits, .ritter, .personen, .namensliste { grid-template-columns: minmax(0, 1fr); }
  .ue1 { font-size: clamp(26px, 8.2vw, 35px); }
  .partner { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
.wh120 { --wh: 120px; } .wh160 { --wh: 160px; } .wh240 { --wh: 240px; }
.zeile > section, .zeile > .seitenkopf { position: relative; z-index: 1; }
.vorstand-bild { margin-top: 36px; }
.personen-abstand { margin-top: 108px; }
.portraits { row-gap: 72px; }
.vors-titel { margin-bottom: 36px; }
.stecken-text { margin-top: 36px; }
.kontakt-daten { margin-top: 36px; }
.gesch-text h2 { margin-bottom: 36px; }
.gesch-abschnitt.mit-bild { padding-bottom: 0; }
.konto-text p { margin: 0; }
.konto-text .text p { margin: 18px 0 0; font-size: 16px; }
.konto-text strong { font-size: 16px; }
.konto { margin-top: 0; }
.text-gross > .text + .konto { margin-top: 1px; }
.text-gross > .konto + .text { margin-top: 0; }
@media (max-width: 959px) {
  .personen-abstand { margin-top: 108px; }
  .portraits { row-gap: 36px; }
}
.bild-16-9 img { aspect-ratio: 1128 / 634; object-fit: cover; }
.personen.vier { --n: 4; }
.tabelle > p { margin: 0; }
@media (max-width: 959px) {
  .knopf, a.knopf { font-size: 11.2px; padding: 12px 29px; letter-spacing: .1em; }
  .start-stecken .rund { order: -1; }
  .collage { aspect-ratio: 528 / 690; }
  .collage .k1 { top: 10%; } .collage .k2 { top: 14%; } .collage .k3 { top: 50%; }
}