/* ==========================================================================
   Lützower Artillerie 1813 "Traugott Fritze" e.V.
   Gestaltungssystem, siehe PLAN.md

   Grundregel gegen Überschneidungen:
   Alles steht im normalen Fluss. Position absolute wird für Inhalte
   nirgends verwendet, Breiten werden nie in festen Pixeln gesetzt.
   ========================================================================== */

:root {
  /* Farben, abgeleitet vom Uniformobjekt */
  --tuchschwarz:   #16130F;
  --tuch-2:        #241F18;
  --tuch-3:        #3A332A;
  --krapprot:      #8E2F26;
  --krapprot-hell: #C4564A;
  --messing:       #A8863C;
  --messing-hell:  #D4AC63;
  --papier:        #FAF8F5;
  --leinen:        #F0EBE3;
  --linie:         #DED5C8;
  --linie-stark:   #C3B7A5;
  --text:          #211C16;
  --text-2:        #5C5346;
  --text-3:        #857A6B;
  --text-hell:     #EDE7DD;
  --text-hell-2:   #B3A996;

  /* Maße */
  --rand:     clamp(20px, 5vw, 56px);
  --spalte:   1140px;
  --schmal:   720px;
  --luft:     clamp(56px, 9vw, 104px);

  /* Schrift */
  --serif: 'Palatino Linotype', 'Book Antiqua', Palatino, 'Iowan Old Style', Georgia, serif;
  --sans:  system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono:  ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;            /* letzte Schutzlinie gegen seitliches Scrollen */
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.18;
  text-wrap: balance;
  margin: 0;
  overflow-wrap: break-word;
}
p, li { overflow-wrap: break-word; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--krapprot); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--tuchschwarz); }
:focus-visible { outline: 3px solid var(--messing); outline-offset: 2px; }

/* ---------- Grundgerüst ---------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--spalte);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.wrap--schmal { max-width: calc(var(--schmal) + 2 * var(--rand)); }

.abschnitt { padding-block: var(--luft); }
.abschnitt--leinen  { background: var(--leinen); }
.abschnitt--dunkel  { background: var(--tuchschwarz); color: var(--text-hell); }
.abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: var(--text-hell); }
.abschnitt--dunkel a { color: var(--messing-hell); }
.abschnitt--dunkel a:hover { color: #fff; }

/* ---------- Kopfzeile ------------------------------------------------- */

.kopf {
  background: var(--tuchschwarz);
  border-bottom: 3px solid var(--krapprot);   /* der rote Vorstoß */
  position: sticky;
  top: 0;
  z-index: 50;
}
.kopf__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  flex-wrap: wrap;
}

.marke {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-hell);
  text-decoration: none;
  padding-block: 12px;
  min-width: 0;
}
.marke__knopf {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--messing-hell), var(--messing) 62%, #6E551F);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.marke__text { display: flex; flex-direction: column; min-width: 0; }
.marke__name {
  font-family: var(--serif);
  font-size: 18px; font-weight: 700; line-height: 1.1;
  letter-spacing: .01em;
}
.marke__zusatz {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--messing-hell); margin-top: 3px;
}

.nav-schalter {
  display: none;
  background: transparent;
  border: 1px solid var(--tuch-3);
  border-radius: 3px;
  color: var(--text-hell);
  font: inherit; font-size: 14px;
  padding: 9px 14px;
  cursor: pointer;
  align-items: center; gap: 9px;
}
.nav-schalter__balken {
  display: block; width: 18px; height: 2px;
  background: currentColor; position: relative;
}
.nav-schalter__balken::before,
.nav-schalter__balken::after {
  content: ''; position: absolute; left: 0;
  width: 18px; height: 2px; background: currentColor;
}
.nav-schalter__balken::before { top: -6px; }
.nav-schalter__balken::after  { top: 6px; }

.nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px;
}
.nav a {
  display: block;
  padding: 10px 13px;
  color: var(--text-hell-2);
  text-decoration: none;
  font-size: 15px;
  border-radius: 3px;
}
.nav a:hover { color: #fff; background: var(--tuch-2); }
.nav a[aria-current="page"] {
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--krapprot-hell);
}
.nav .nav__cta {
  background: var(--krapprot);
  color: #fff;
  padding-inline: 16px;
}
.nav .nav__cta:hover { background: var(--krapprot-hell); color: #fff; }

@media (max-width: 860px) {
  .kopf__inner { min-height: 56px; gap: 10px; }
  /* Marke und Schalter sollen in eine Zeile passen, damit der Kopf
     nicht die halbe erste Bildschirmhoehe belegt. */
  .marke { gap: 9px; padding-block: 9px; }
  .marke__knopf { width: 24px; height: 24px; }
  .marke__name { font-size: 15.5px; }
  .marke__zusatz { font-size: 9.5px; letter-spacing: .13em; margin-top: 2px; }
  .nav-schalter { display: inline-flex; padding: 8px 11px; font-size: 13.5px; gap: 8px; }
  .nav-schalter { display: inline-flex; }
  .nav {
    flex-basis: 100%;
    display: none;
    padding-bottom: 14px;
  }
  .nav.ist-offen { display: block; }
  .nav ul { flex-direction: column; gap: 2px; }
  .nav a { padding: 13px 12px; font-size: 16px; }
  .nav .nav__cta { text-align: center; margin-top: 6px; }
}

/* ---------- Titelbereich ---------------------------------------------- */

.titel {
  background: var(--tuchschwarz);
  color: var(--text-hell);
  padding-block: clamp(40px, 7vw, 76px);
}
.titel__gitter {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 46px);
  align-items: center;
}
@media (min-width: 900px) {
  .titel__gitter { grid-template-columns: 1.05fr .95fr; }
}
.titel__gitter > * { min-width: 0; }

.augenbraue {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--messing-hell);
  margin: 0 0 14px;
  font-family: var(--sans);
}
.titel h1 {
  font-size: clamp(31px, 5.4vw, 52px);
  margin-bottom: 18px;
}
.titel__text { color: var(--text-hell-2); font-size: clamp(17px, 2vw, 19px); max-width: 52ch; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.knopf {
  display: inline-block;
  font: inherit; font-size: 16px; font-weight: 600;
  padding: 13px 24px;
  border-radius: 3px;
  text-decoration: none;
  border: 1px solid transparent;
  text-align: center;
}
.knopf--rot   { background: var(--krapprot); color: #fff; }
.knopf--rot:hover { background: var(--krapprot-hell); color: #fff; }
.knopf--rand  { border-color: var(--tuch-3); color: var(--text-hell); }
.knopf--rand:hover { border-color: var(--messing); color: var(--messing-hell); }
.knopf--dunkel { background: var(--tuchschwarz); color: #fff; }
.knopf--dunkel:hover { background: var(--tuch-2); color: #fff; }

/* ---------- Bilder ----------------------------------------------------- */

.bild {
  margin: 0;
  background: var(--leinen);
  border: 1px solid var(--linie);
  padding: 10px;
}
.abschnitt--dunkel .bild, .titel .bild {
  background: var(--tuch-2);
  border-color: var(--tuch-3);
}
.bild img { width: 100%; }
.bild figcaption {
  font-size: 13.5px;
  color: var(--text-2);
  padding-top: 9px;
  line-height: 1.5;
}
.abschnitt--dunkel .bild figcaption, .titel .bild figcaption { color: var(--text-hell-2); }

.bild--band { padding: 8px; }

.hinweis-ki {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--linie-stark);
  border-radius: 2px;
  padding: 2px 7px;
  margin-right: 7px;
}

/* ---------- Abschnittsköpfe -------------------------------------------- */

.kopfzeile { margin-bottom: clamp(28px, 4vw, 44px); max-width: 62ch; }
.kopfzeile h2 { font-size: clamp(26px, 3.6vw, 36px); margin-bottom: 12px; }
.kopfzeile p  { color: var(--text-2); font-size: 17.5px; margin: 0; }
.abschnitt--dunkel .kopfzeile p { color: var(--text-hell-2); }

/* ---------- Raster ------------------------------------------------------ */

.gitter { display: grid; gap: clamp(18px, 2.6vw, 28px); }
.gitter > * { min-width: 0; }
.gitter--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.gitter--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }

.karte {
  background: #fff;
  border: 1px solid var(--linie);
  border-top: 3px solid var(--messing);
  padding: clamp(22px, 3vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.karte h3 { font-size: 21px; }
.karte p  { color: var(--text-2); font-size: 16.5px; margin: 0; }
.karte--wichtig { border-top-color: var(--krapprot); }

.abschnitt--dunkel .karte {
  background: var(--tuch-2);
  border-color: var(--tuch-3);
  border-top-color: var(--messing);
}
.abschnitt--dunkel .karte p { color: var(--text-hell-2); }

/* ---------- Zahlenreihe -------------------------------------------------- */

.zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 1px;
  background: var(--tuch-3);
  border: 1px solid var(--tuch-3);
}
.zahlen > div { background: var(--tuchschwarz); padding: 22px 20px; min-width: 0; }
.zahlen dt {
  font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--messing-hell); margin-bottom: 7px;
}
.zahlen dd {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  color: var(--text-hell);
  font-variant-numeric: tabular-nums;
}
.zahlen dd small {
  display: block;
  font-family: var(--sans);
  font-size: 14px; font-weight: 400;
  color: var(--text-hell-2);
  margin-top: 5px;
  line-height: 1.45;
}

/* ---------- Zeitleiste --------------------------------------------------- */

.zeitleiste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.zeitleiste > li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 22px;
  padding-block: 20px;
  border-top: 1px solid var(--linie);
}
.zeitleiste > li:last-child { border-bottom: 1px solid var(--linie); }
@media (min-width: 620px) {
  .zeitleiste > li { grid-template-columns: 190px 1fr; }
}
.zeitleiste > li > * { min-width: 0; }
.zeit {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--krapprot);
  letter-spacing: .02em;
  padding-top: 4px;
}
.zeitleiste h3 { font-size: 20px; margin-bottom: 5px; }
.zeitleiste p  { color: var(--text-2); font-size: 16.5px; margin: 0; }

/* ---------- Tabelle ------------------------------------------------------ */

.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.liste {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 16.5px;
}
table.liste th {
  text-align: left;
  font-family: var(--sans);
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  padding: 0 16px 10px 0;
  border-bottom: 2px solid var(--linie-stark);
  white-space: nowrap;
}
table.liste td {
  padding: 15px 16px 15px 0;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
  color: var(--text-2);
}
table.liste td:first-child {
  font-family: var(--mono);
  font-size: 14.5px;
  color: var(--krapprot);
  white-space: nowrap;
}
table.liste td:nth-child(2) { color: var(--text); font-weight: 600; }

/* ---------- Frage und Antwort -------------------------------------------- */

.faq { display: flex; flex-direction: column; gap: 0; }
.faq > details {
  border-bottom: 1px solid var(--linie);
}
.faq > details:first-child { border-top: 1px solid var(--linie); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 40px 20px 0;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-size: 24px; font-weight: 400;
  color: var(--messing); line-height: 1;
}
.faq > details[open] summary::after { content: '–'; }
.faq > details > div { padding: 0 0 22px; color: var(--text-2); max-width: 66ch; }

/* ---------- Textseiten ---------------------------------------------------- */

.fliess { max-width: 66ch; }
.fliess h2 { font-size: clamp(23px, 3vw, 29px); margin: 2em 0 .55em; }
.fliess h2:first-child { margin-top: 0; }
.fliess h3 { font-size: 20px; margin: 1.7em 0 .45em; }
.fliess p  { color: var(--text-2); }
.fliess ul, .fliess ol { color: var(--text-2); padding-left: 1.3em; margin: 0 0 1em; }
.fliess li { margin-bottom: .45em; }
.fliess strong { color: var(--text); }

.merksatz {
  border-left: 3px solid var(--krapprot);
  background: var(--leinen);
  padding: 18px 22px;
  margin: 1.8em 0;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  color: var(--text);
}

.angaben {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 20px;
  margin: 0 0 1.6em;
}
@media (min-width: 560px) {
  .angaben { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
}
.angaben dt {
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-3); padding-top: 5px;
}
.angaben dd { margin: 0 0 12px; color: var(--text); }

/* ---------- Aufruf -------------------------------------------------------- */

.aufruf {
  background: var(--tuchschwarz);
  color: var(--text-hell);
  border-top: 3px solid var(--krapprot);
  padding-block: clamp(46px, 7vw, 76px);
}
.aufruf__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 26px;
}
.aufruf__inner > * { min-width: 0; }
.aufruf h2 { font-size: clamp(24px, 3.4vw, 33px); margin-bottom: 10px; }
.aufruf p  { color: var(--text-hell-2); margin: 0; max-width: 52ch; }

/* ---------- Fußzeile ------------------------------------------------------ */

.fuss {
  background: var(--tuch-2);
  color: var(--text-hell-2);
  padding-block: clamp(40px, 5vw, 58px);
  font-size: 16px;
}
.fuss__gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 32px;
}
.fuss__gitter > * { min-width: 0; }
.fuss h3 {
  font-family: var(--sans);
  font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--messing-hell); font-weight: 600;
  margin-bottom: 14px;
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 8px; }
.fuss a { color: var(--text-hell-2); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss__adresse { font-style: normal; line-height: 1.75; }
.fuss__mail { overflow-wrap: anywhere; }        /* nie abschneiden, das war der alte Fehler */
.fuss__unten {
  border-top: 1px solid var(--tuch-3);
  margin-top: 34px; padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-size: 14px; color: var(--text-3);
}

/* ---------- Kleinteile ----------------------------------------------------- */

.sprung {
  position: absolute; left: -9999px;
  background: var(--krapprot); color: #fff;
  padding: 12px 18px; z-index: 100;
}
.sprung:focus { left: 8px; top: 8px; position: fixed; }

[id] { scroll-margin-top: 86px; }

/* ---------- Platzhalter für noch fehlende Bilder -------------------------- */

.platzhalter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 20px;
  width: 100%;
  background:
    repeating-linear-gradient(135deg,
      var(--tuch-2) 0 14px, var(--tuchschwarz) 14px 28px);
  border: 1px dashed var(--tuch-3);
  color: var(--text-hell-2);
  font-size: 14px;
}
.platzhalter code {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--messing-hell);
  overflow-wrap: anywhere;
}
.platzhalter__hinweis { color: var(--text-3); font-size: 13px; max-width: 34ch; }

/* ==========================================================================
   FARBIGE FASSUNG
   Entscheidung: deutlich mehr Rot und Gold. Rote Flaechen statt roter Linien,
   goldene Trennbaender, farbige Abschnittskoepfe. Verhaeltnis wie an der
   Uniform bleibt: Schwarz traegt, Rot setzt, Gold begrenzt.
   ========================================================================== */

/* ---------- Wappen in der Kopfzeile ---------- */
.marke__wappen { flex: 0 0 auto; width: 38px; height: auto; display: block; }
@media (max-width: 860px) { .marke__wappen { width: 30px; } }

/* ---------- Goldenes Trennband zwischen den Abschnitten ---------- */
.vorstoss {
  height: 6px;
  background: linear-gradient(90deg,
    var(--messing) 0 22%, var(--krapprot) 22% 78%, var(--messing) 78% 100%);
}
.vorstoss--schmal { height: 3px; }

/* ---------- Abschnittskoepfe bekommen Farbe ---------- */
.kopfzeile { position: relative; padding-top: 18px; }
.kopfzeile::before {
  content: '';
  display: block;
  position: absolute; top: 0; left: 0;
  width: 64px; height: 5px;
  background: var(--krapprot);
}
.abschnitt--dunkel .kopfzeile::before,
.abschnitt--rot .kopfzeile::before { background: var(--messing-hell); }

/* ---------- Roter Abschnitt ---------- */
.abschnitt--rot {
  background: var(--krapprot);
  color: #FCEFE9;
}
.abschnitt--rot h2, .abschnitt--rot h3 { color: #fff; }
.abschnitt--rot .kopfzeile p, .abschnitt--rot p { color: #F6DCD4; }
.abschnitt--rot a { color: var(--messing-hell); }
.abschnitt--rot .karte {
  background: #7E271F;
  border-color: #A8443A;
  border-top-color: var(--messing-hell);
}
.abschnitt--rot .karte p { color: #F6DCD4; }
.abschnitt--rot .bild { background: #7E271F; border-color: #A8443A; }
.abschnitt--rot .bild figcaption { color: #F0CFC6; }

/* ---------- Titelbereich mit Tuchtextur ---------- */
.titel {
  background-color: var(--tuchschwarz);
  background-image:
    linear-gradient(rgba(21,18,14,.90), rgba(21,18,14,.94)),
    url('../images/ki-textur.jpg');
  background-size: cover;
  background-position: center;
  border-bottom: 6px solid var(--krapprot);
}
.titel--schlicht { background-image: none; }

/* ---------- Zahlenreihe auf Rot ---------- */
.zahlen { background: #7E271F; border-color: #7E271F; }
.zahlen > div { background: var(--krapprot); }
.zahlen dt { color: var(--messing-hell); }
.zahlen dd { color: #fff; }
.zahlen dd small { color: #F6DCD4; }

/* ---------- Karten kraeftiger ---------- */
.karte { border-top-width: 5px; }
.karte h3 { color: var(--krapprot); }
.abschnitt--dunkel .karte h3 { color: var(--messing-hell); }
.abschnitt--rot .karte h3 { color: #fff; }
.karte--wichtig { border-top-color: var(--krapprot); background: #FFF9F7; }
.abschnitt--leinen .karte--wichtig { background: #fff; }

/* ---------- Aufruf in Rot statt Schwarz ---------- */
.aufruf {
  background: var(--krapprot);
  color: #fff;
  border-top: 6px solid var(--messing);
}
.aufruf h2 { color: #fff; }
.aufruf p  { color: #F6DCD4; }
.aufruf .knopf--rot { background: var(--tuchschwarz); color: #fff; }
.aufruf .knopf--rot:hover { background: #000; }
.aufruf .knopf--rand { border-color: rgba(255,255,255,.45); color: #fff; }
.aufruf .knopf--rand:hover { border-color: var(--messing-hell); color: var(--messing-hell); }

/* ---------- Zeitleiste mit goldener Fuehrung ---------- */
.zeitleiste > li { border-top-color: var(--linie-stark); }
.zeit {
  color: #fff;
  background: var(--krapprot);
  display: inline-block;
  padding: 3px 10px;
  border-radius: 2px;
  font-weight: 600;
  padding-top: 3px;
}
.zeitleiste h3 { color: var(--tuchschwarz); }
.abschnitt--dunkel .zeitleiste h3 { color: var(--messing-hell); }
.abschnitt--dunkel .zeitleiste > li { border-top-color: var(--tuch-3); }
.abschnitt--dunkel .zeitleiste > li:last-child { border-bottom-color: var(--tuch-3); }

/* ---------- Merksatz kraeftiger ---------- */
.merksatz {
  border-left-width: 6px;
  background: #FBF1EE;
  color: var(--tuchschwarz);
}
.abschnitt--dunkel .merksatz { background: var(--tuch-2); color: var(--text-hell); }

/* ---------- Bilder mit goldener Fassung ---------- */
.bild { border-color: var(--linie-stark); }
.bild--gold { border-color: var(--messing); border-width: 2px; }
.abschnitt--dunkel .bild--gold { border-color: var(--messing); }

/* ---------- Tabelle ---------- */
table.liste th { color: var(--krapprot); border-bottom-color: var(--krapprot); }
table.liste td:first-child { color: var(--tuchschwarz); font-weight: 600; }
table.liste td:nth-child(2) { color: var(--krapprot); }

/* ---------- Fusszeile mit goldener Oberkante ---------- */
.fuss { border-top: 5px solid var(--messing); }

/* ---------- Aufklappbare Fragen ---------- */
.faq summary { color: var(--tuchschwarz); }
.faq > details[open] summary { color: var(--krapprot); }
.faq summary::after { color: var(--krapprot); font-weight: 700; }

/* ---------- Bildergalerie ---------- */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(14px, 2vw, 22px);
}
.galerie > * { min-width: 0; }

/* ==========================================================================
   KORREKTUREN NACH PRUEFUNG
   Bildschirmbreite, Zeilenlaenge, Kontrast. Alle Werte gemessen, nicht geschaetzt.
   ========================================================================== */

/* ---------- 1. Bildschirmbreite nutzen ----------
   Vorher fest 1140px: bei 1920px blieben 765px ungenutzt, bei 2560px sogar 1405px.
   Jetzt waechst der Inhalt mit, bis zu einer sinnvollen Obergrenze. */
.wrap { max-width: min(92vw, 1800px); }
.wrap--schmal { max-width: min(92vw, 780px); }

/* ---------- 2. Zeilenlaenge in den Karten ----------
   Vorher 262px = 32 Zeichen pro Zeile. Angenehm sind 45 bis 75. */
.gitter--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.gitter--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.galerie   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.karte p, .zeitleiste p { max-width: 62ch; }

/* Deutsche Woerter sind lang. Silbentrennung nimmt den Rand die Unruhe,
   ohne dass Luecken im Blocksatz entstehen. Greift ueber lang="de". */
.karte p, .fliess p, .fliess li, .zeitleiste p, .kopfzeile p, .faq > details > div p {
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Sehr breite Bildschirme: Titelspalte nicht ins Uferlose laufen lassen */
.titel h1 { max-width: 20ch; }
.titel--schlicht h1 { max-width: 26ch; }

/* ---------- 3. Kontrast ----------
   Alle folgenden Werte lagen unter der Anforderung von 4,5:1 fuer Fliesstext. */

/* Fliesstext und Hervorhebung in dunklen Abschnitten: 2,45 und 1,10, also unlesbar */
.abschnitt--dunkel .fliess p,
.abschnitt--dunkel .fliess li,
.abschnitt--dunkel .fliess ul,
.abschnitt--dunkel .fliess ol { color: var(--text-hell-2); }
.abschnitt--dunkel .fliess strong { color: #fff; }
.abschnitt--dunkel .fliess h2, .abschnitt--dunkel .fliess h3 { color: var(--messing-hell); }

/* Fusszeile unten: 3,89 */
.fuss__unten { color: var(--text-hell-2); }

/* Beschriftungen im Impressum: 3,97 */
.angaben dt { color: var(--text-2); }

/* Beschriftungen der Zahlenreihe auf Rot: 3,82 */
.zahlen dt { color: #F3DCBE; }

/* Kennzeichnung der Illustrationen: 3,54 hell / 3,89 dunkel */
.hinweis-ki { color: var(--text-2); border-color: var(--text-3); }
.abschnitt--dunkel .hinweis-ki,
.titel .hinweis-ki { color: var(--text-hell-2); border-color: var(--tuch-3); }
.abschnitt--rot .hinweis-ki { color: #F6DCD4; border-color: #A8443A; }

/* ---------- 4. Ueberschrift in Karten, wenn sie in der Gliederung zaehlt ---------- */
.karte h2 { font-size: 21px; color: var(--krapprot); font-family: var(--serif); line-height: 1.18; }
.abschnitt--rot .karte h2 { color: #fff; }

/* ---------- 5. Tippziele in der Fusszeile ----------
   Waren 22px hoch, WCAG 2.2 verlangt mindestens 24x24. Links mitten im
   Fliesstext sind davon ausgenommen (Inline-Ausnahme) und bleiben, wie sie sind. */
.fuss li { margin-bottom: 4px; }
.fuss li a {
  display: inline-block;
  padding-block: 5px;
  min-height: 24px;
}

/* Links, die allein in einem Absatz oder einer Angabe stehen, sind keine
   Inline-Links im Satz, sie brauchen daher die vollen 24px Tippflaeche. */
.fliess p > a:only-child,
.karte p > a:only-child,
.angaben dd > a:only-child {
  display: inline-block;
  padding-block: 3px;
  min-height: 24px;
}

/* ---------- 6. Vereinswappen in der Kopfzeile ----------
   Das echte Wappen des Vereins (preussisches Artilleriewappen, PRO GLORIA ET
   PATRIA) ersetzt die zuvor gezeichnete Marke. Der weisse Scanhintergrund wurde
   freigestellt, damit es auf dem schwarzen Kopf steht und nicht als Kachel wirkt. */
.marke { padding-block: 8px; }
.marke__wappen { width: 46px; height: auto; }
@media (max-width: 860px) {
  .marke { padding-block: 6px; }
  .marke__wappen { width: 36px; }
}

/* ---------- 7. Kopfzeile auf schmalen Geraeten ----------
   Mit dem Vereinswappen braucht die Marke mehr Platz. Gemessen: 313px noetig,
   305px vorhanden. Der Platz wird an zwei Stellen geholt, damit Marke und
   Schalter in einer Zeile bleiben und der Kopf nicht die halbe Anzeige belegt. */
@media (max-width: 480px) {
  .marke__name { font-size: 14.5px; }
  .marke__zusatz { font-size: 9px; }
  .nav-schalter { padding: 9px 11px; }
}
/* Sehr schmal: der Schalter wird zum Symbol. Der Name bleibt fuer
   Vorleseprogramme ueber aria-label erhalten. */
@media (max-width: 400px) {
  .nav-schalter__text { display: none; }
  .nav-schalter { padding: 10px; gap: 0; min-width: 40px; min-height: 40px;
                  justify-content: center; align-items: center; }
  .marke__wappen { width: 32px; }
}