/* ==========================================================================
   AJC! Nimrod zu Paderborn – Gestaltung (Theme ajc-nimrod)
   Abgenommen am 22.10.2026 (Mockups 1–9, mockups/). Farben aus dem Wappen,
   Schriften Fraunces (Überschriften), Source Sans 3 (Text), Cinzel nur für
   lateinische Inschriften. Schriften: assets/fonts/fonts.css (eigener Server).
   Regeln: Wappenbraun nur für die Haupthandlung, Rasterspalten immer
   minmax(0, 1fr), jede Textstelle mindestens WCAG 2.2 AA.
   ========================================================================== */

/* ======================== aus nimrod.css ======================== */
:root {
  /* Couleur und Wappen – nur für Band, Grafik und Haupthandlung */
  --braun: #C98227;
  --weiss: #FFFFFF;
  --gruen: #33853A;
  --gold: #C4A463;

  /* Flächen und Text */
  --tann-900: #0F2619;
  --tann-800: #143323;
  --tann-700: #1B4430;
  --tann-600: #245A3D;
  --reif: #EEF3EE;
  --reif-2: #DCE6DD;
  --tinte: #1A2B20;
  --tinte-2: #4B5B50;
  --linie: #D5DED6;
  --ocker-text: #8C5414;
  --knopf-hover: #D6913A;

  /* Zustände */
  --ok: #2F6B3A;
  --warnung-grund: #FBF1DC;
  --warnung-text: #6B4A0B;
  --fehler: #A3261C;

  --schrift-titel: "Fraunces", Georgia, "Times New Roman", serif;
  --schrift-text: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --schrift-inschrift: "Cinzel", "Times New Roman", serif;

  --huelle: 1200px;
  --rand: 24px;
  --radius: 4px;
  --schatten: 0 1px 2px rgba(15, 38, 25, .08), 0 8px 24px rgba(15, 38, 25, .06);
}

@media (max-width: 640px) {
  :root { --rand: 16px; }
}

/* --- Grundlagen ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--weiss);
  color: var(--tinte);
  font: 400 1.125rem/1.6 var(--schrift-text);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tann-600); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--tann-800); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--braun); outline-offset: 3px; border-radius: 2px; }
.dunkel :focus-visible { outline-color: var(--gold); }

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 600;
  color: var(--tann-800);
  margin: 0 0 .5em;
  line-height: 1.12;
  letter-spacing: -.005em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.125rem, 1.5rem + 3vw, 4.25rem); }
h1, h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
h2 { font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.75rem); }
h3 { font-size: clamp(1.3rem, 1.2rem + .4vw, 1.5rem); line-height: 1.25; }
h4 { font-size: 1.125rem; line-height: 1.3; }
p { margin: 0 0 1em; }
p, li { text-wrap: pretty; }
.lead { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.3125rem); line-height: 1.55; color: var(--tinte); max-width: 40em; }
.klein { font-size: .9375rem; color: var(--tinte-2); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.huelle { max-width: var(--huelle); margin: 0 auto; padding: 0 var(--rand); }
.schmal { max-width: 46rem; }
.abschnitt { padding: clamp(56px, 6vw, 104px) 0; }
.abschnitt.reif { background: var(--reif); }
.abschnitt.eng { padding: clamp(40px, 4vw, 64px) 0; }
.dunkel { background: var(--tann-800); color: #E9F0EA; }
.dunkel h1, .dunkel h2, .dunkel h3 { color: var(--weiss); }
.dunkel a { color: var(--weiss); }
.dunkel .klein { color: #C9D6CC; }
.springen { position: absolute; left: 12px; top: -60px; background: var(--weiss); padding: 10px 14px; z-index: 100; }
.springen:focus { top: 12px; }

/* Inschrift: Cinzel nur für Latein (Wahlspruch, Prinzipien, Jahreszahl) */
.inschrift {
  font-family: var(--schrift-inschrift);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* --- Band (Couleur braun-weiß-grün mit Goldkante) -------------------------- */
.band {
  height: 9px;
  background: linear-gradient(to bottom, var(--braun) 0 33.33%, var(--weiss) 33.33% 66.66%, var(--gruen) 66.66% 100%);
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  box-sizing: content-box;
}
.band-stueck {
  display: block;
  width: 96px;
  height: 7px;
  background: linear-gradient(to bottom, var(--braun) 0 33.33%, var(--weiss) 33.33% 66.66%, var(--gruen) 66.66% 100%);
  border-top: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  box-sizing: content-box;
  margin: 0 0 22px;
}
.dunkel .band-stueck { border-color: var(--gold); }

/* --- Kopf --------------------------------------------------------------- */
.leiste {
  background: var(--tann-900);
  color: #D3DED5;
  font-size: .875rem;
}
.leiste .huelle { display: flex; align-items: center; gap: 24px; min-height: 40px; flex-wrap: wrap; }
.leiste a { color: #E9F0EA; text-decoration: none; }
.leiste a:hover { text-decoration: underline; }
.leiste .termin { display: flex; align-items: center; gap: 8px; }
.leiste .termin strong { color: var(--weiss); font-weight: 600; }
.leiste .rechts { margin-left: auto; display: flex; gap: 18px; align-items: center; }
.leiste svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 860px) { .leiste .adresse { display: none; } }
@media (max-width: 560px) { .leiste .rechts { display: none; } }

.kopf { background: var(--weiss); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 40; }
.kopf .huelle { display: flex; align-items: center; gap: 28px; min-height: 84px; }
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tann-800); flex: none; }
.marke img { width: 50px; height: auto; }
.marke .name { display: flex; flex-direction: column; line-height: 1.05; }
.marke .name b { font: 700 1.5rem/1 var(--schrift-titel); letter-spacing: -.01em; }
.marke .name span { font-size: .8125rem; color: var(--tinte-2); margin-top: 4px; letter-spacing: .02em; }
.navi { margin-left: auto; }
.navi ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.navi a {
  display: block; padding: 10px 12px; text-decoration: none; color: var(--tinte);
  font-weight: 600; font-size: 1rem; border-radius: var(--radius); position: relative;
}
.navi a:hover { color: var(--tann-800); background: var(--reif); }
.navi a[aria-current="page"] { color: var(--tann-800); }
.navi a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 5px;
  background: linear-gradient(to bottom, var(--braun) 0 33.33%, var(--weiss) 33.33% 66.66%, var(--gruen) 66.66% 100%);
  border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
}
.menue-knopf { display: none; }
@media (max-width: 1080px) {
  .kopf .huelle { min-height: 72px; }
  .navi { position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); background: var(--weiss); box-shadow: -8px 0 32px rgba(0,0,0,.18); padding: 88px 20px 24px; transform: translateX(100%); transition: transform .25s ease; z-index: 60; }
  .navi.offen { transform: none; }
  .navi ul { flex-direction: column; }
  .navi a { font-size: 1.1875rem; padding: 14px 12px; }
  .navi a[aria-current="page"]::after { left: 12px; right: auto; width: 64px; }
  .menue-knopf { display: inline-flex; margin-left: auto; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--linie); background: var(--weiss); border-radius: var(--radius); font: 600 1rem var(--schrift-text); color: var(--tann-800); cursor: pointer; z-index: 70; position: relative; }
  .kopf .knopf.haupt { display: none; }
}
@media (max-width: 420px) { .marke .name span { display: none; } }

/* --- Knöpfe ----------------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: var(--radius);
  font: 600 1.0625rem/1 var(--schrift-text); text-decoration: none; cursor: pointer;
  border: 2px solid var(--tann-700); background: transparent; color: var(--tann-700);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.knopf:hover { background: var(--tann-700); color: var(--weiss); text-decoration: none; }
.knopf.haupt { background: var(--braun); border-color: var(--braun); color: var(--tann-900); }
.knopf.haupt:hover { background: var(--knopf-hover); border-color: var(--knopf-hover); color: var(--tann-900); }
.knopf.klein-k { min-height: 40px; padding: 0 16px; font-size: .9688rem; }
.knopf svg { width: 20px; height: 20px; flex: none; }
.dunkel .knopf { border-color: rgba(255,255,255,.75); color: var(--weiss); }
.dunkel .knopf:hover { background: var(--weiss); color: var(--tann-800); }
.dunkel .knopf.haupt { border-color: var(--braun); color: var(--tann-900); }
.dunkel .knopf.haupt:hover { background: var(--knopf-hover); border-color: var(--knopf-hover); color: var(--tann-900); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.textlink { font-weight: 600; }

/* --- Startseite: Hero mit diagonalem Band ------------------------------------ */
.held { position: relative; overflow: hidden; background: var(--tann-800); color: #E9F0EA; isolation: isolate; }
.held .huelle { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; padding-top: clamp(48px, 7vw, 104px); padding-bottom: clamp(150px, 16vw, 230px); }
.held h1 { color: var(--weiss); font-size: clamp(3rem, 2rem + 5vw, 6rem); font-weight: 650; letter-spacing: -.02em; margin-bottom: 24px; }
.held .lead { color: #DDE7DF; margin-bottom: 32px; }
.held .gruendung { display: block; color: var(--gold); font-size: .9375rem; margin-bottom: 26px; }
.held .wappen-buehne { position: relative; justify-self: center; width: min(400px, 100%); }
.held .wappen-buehne img { position: relative; z-index: 2; width: 100%; filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); }
.held .wappen-buehne .siegel { position: absolute; inset: -6% -12% auto -12%; z-index: 1; width: 124%; aspect-ratio: 1; color: var(--gold); opacity: .55; }
.held .schraeg {
  position: absolute; z-index: -1; left: -10%; right: -10%; bottom: 46px;
  height: clamp(84px, 9vw, 138px);
  background: linear-gradient(to bottom, var(--braun) 0 33.33%, var(--weiss) 33.33% 66.66%, var(--gruen) 66.66% 100%);
  border-top: 3px solid var(--gold); border-bottom: 3px solid var(--gold);
  transform: rotate(-6deg) translateY(10%);
  transform-origin: 0 100%;
  animation: band-ein 1.1s cubic-bezier(.2,.7,.2,1) both .15s;
}
@keyframes band-ein { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .held .schraeg { animation: none; } html { scroll-behavior: auto; } }
@media (max-width: 900px) {
  .held .huelle { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-bottom: 150px; }
  .held .wappen-buehne { width: min(260px, 70%); order: -1; justify-self: start; }
  .held .wappen-buehne .siegel { display: none; }
}

/* --- Seitenkopf (Unterseiten) ---------------------------------------------- */
.seitenkopf { padding: clamp(40px, 5vw, 72px) 0 clamp(40px, 5vw, 64px); background: var(--weiss); }
.seitenkopf .huelle { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.seitenkopf h1 { margin-bottom: 18px; }
.seitenkopf .lead { margin-bottom: 0; }
.seitenkopf .bild-rechts { width: min(420px, 38vw); }
.seitenkopf .bild-rechts img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 900px) { .seitenkopf .huelle { grid-template-columns: minmax(0, 1fr); } .seitenkopf .bild-rechts { width: 100%; } }
.pfad { font-size: .9375rem; color: var(--tinte-2); margin-bottom: 26px; }
.pfad ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.pfad li + li::before { content: "/"; margin-right: 6px; color: var(--linie); }
.pfad a { color: var(--tinte-2); }
.sprung { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; align-items: center; }
.sprung span { font-size: .9375rem; color: var(--tinte-2); margin-right: 4px; }
.sprung a { padding: 7px 14px; border: 1px solid var(--linie); border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .9375rem; color: var(--tann-700); background: var(--weiss); }
.sprung a:hover { border-color: var(--tann-700); }

/* --- Programmliste (wie im Faltblatt gesetzt) -------------------------------- */
.programm { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tann-800); }
.programm > li { display: grid; grid-template-columns: 9.5rem 7.5rem minmax(0, 1fr); gap: 4px 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--linie); }
.programm.breit > li { grid-template-columns: 9.5rem 7.5rem minmax(0, 1fr) auto; gap: 8px 24px; }
.programm .datum { font: 600 1.125rem/1.3 var(--schrift-titel); color: var(--tann-800); font-variant-numeric: lining-nums tabular-nums; }
.programm .datum small { display: block; font: 400 .875rem var(--schrift-text); color: var(--tinte-2); }
.programm .zeit { font-variant-numeric: tabular-nums; color: var(--tinte-2); white-space: nowrap; }
.programm .titel { font-weight: 600; font-size: 1.1875rem; color: var(--tinte); }
.programm .titel a { color: inherit; text-decoration: none; }
.programm .titel a:hover { text-decoration: underline; }
.programm .ort { display: block; font-weight: 400; font-size: .9688rem; color: var(--tinte-2); margin-top: 2px; }
.programm .hinweise { grid-column: 3; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.programm.breit .hinweise { grid-column: auto; justify-content: flex-end; margin-top: 0; }
@media (max-width: 760px) {
  .programm > li, .programm.breit > li { grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; }
  .programm .titel, .programm .hinweise, .programm.breit .hinweise { grid-column: 1 / -1; justify-content: flex-start; }
  .programm .titel { margin-top: 4px; }
  .programm .hinweise { margin-top: 8px; }
}
.monat-titel { font: 600 1.375rem var(--schrift-titel); color: var(--tann-800); margin: 40px 0 10px; }
.monat-titel:first-child { margin-top: 0; }

/* Kennzeichen wie im gedruckten Programm (ho/o/io, D, G, A) */
.marke-art, .kz {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: .8438rem; font-weight: 600; white-space: nowrap; line-height: 1.4;
}
.marke-art.ho { background: var(--tann-800); color: var(--weiss); }
.marke-art.o { background: var(--reif-2); color: var(--tann-800); }
.marke-art.io { background: transparent; color: var(--tinte-2); border: 1px solid var(--linie); }
.kz { background: #F5EBDC; color: var(--ocker-text); }
.kz.anmeldung { background: transparent; border: 1px solid var(--braun); color: var(--ocker-text); }
.kz svg { width: 14px; height: 14px; }

/* --- Prinzipien (Inschriften) ------------------------------------------------- */
.prinzipien { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.prinzip { padding: 36px 28px 32px; position: relative; }
.prinzip + .prinzip { border-left: 1px solid var(--linie); }
.prinzip .inschrift { display: block; font-size: 1.25rem; color: var(--tann-800); margin: 18px 0 10px; }
.prinzip svg.zeichen { width: 44px; height: 44px; color: var(--ocker-text); }
.prinzip p { color: var(--tinte-2); margin: 0 0 14px; }
.prinzip a { font-weight: 600; }
@media (max-width: 960px) { .prinzipien { grid-template-columns: repeat(2, minmax(0, 1fr)); } .prinzip:nth-child(3) { border-left: 0; } .prinzip:nth-child(n+3) { border-top: 1px solid var(--linie); } }
@media (max-width: 560px) { .prinzipien { grid-template-columns: minmax(0, 1fr); } .prinzip + .prinzip { border-left: 0; border-top: 1px solid var(--linie); } .prinzip { padding: 28px 4px; } }

/* --- Wahlspruch ------------------------------------------------------------------ */
.wahlspruch { text-align: center; padding: 8px 0; }
.wahlspruch .inschrift { display: block; font-size: clamp(1.5rem, 1rem + 2.2vw, 2.75rem); color: var(--tann-800); letter-spacing: .16em; line-height: 1.25; }
.wahlspruch .uebersetzung { display: block; font: italic 500 1.25rem var(--schrift-titel); color: var(--tinte-2); margin-top: 14px; }
.dunkel .wahlspruch .inschrift { color: var(--gold); }
.dunkel .wahlspruch .uebersetzung { color: #DDE7DF; }

/* --- Zweispalter Text/Bild ------------------------------------------------------- */
.zweispalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.zweispalt.text-breit { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.zweispalt .bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.zweispalt .bild figcaption { font-size: .875rem; color: var(--tinte-2); margin-top: 8px; }
.zweispalt.mit-wappen { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
@media (max-width: 900px) { .zweispalt, .zweispalt.text-breit, .zweispalt.mit-wappen { grid-template-columns: minmax(0, 1fr); } }
.bildpaar { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; align-items: end; }
.bildpaar img { width: 100%; object-fit: cover; }
.bildpaar img:first-child { aspect-ratio: 4 / 5; }
.bildpaar img:last-child { aspect-ratio: 1; }

/* --- Gründe (Liste mit Zeichen statt Kartenraster) ---------------------------------- */
.gruende { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.gruende li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; }
.gruende svg { width: 40px; height: 40px; color: var(--tann-600); margin-top: 2px; }
.gruende h3 { font-size: 1.25rem; margin-bottom: 6px; }
.gruende p { margin: 0; color: var(--tinte-2); }
@media (max-width: 960px) { .gruende { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .gruende { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* --- Fakten-Tafel ------------------------------------------------------------------- */
.tafel { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 2px solid var(--tann-800); }
.tafel > div { padding: 20px 20px 22px 0; border-bottom: 1px solid var(--linie); }
.tafel.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .tafel.drei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tafel.drei { grid-template-columns: minmax(0, 1fr); } }
.tafel dt { font-size: .9375rem; color: var(--tinte-2); margin-bottom: 4px; }
.tafel dd { margin: 0; font: 600 1.25rem/1.3 var(--schrift-titel); color: var(--tann-800); }
.farben-band { display: inline-block; width: 54px; height: 12px; vertical-align: middle; margin-right: 8px; background: linear-gradient(to bottom, var(--braun) 0 33.33%, var(--weiss) 33.33% 66.66%, var(--gruen) 66.66% 100%); border-top: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); }

/* --- Medaillons (Chargen) ---------------------------------------------------------- */
.medaillon {
  width: 132px; aspect-ratio: 1; border-radius: 50%; flex: none;
  display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 50% 40%, var(--tann-600), var(--tann-800) 70%);
  box-shadow: 0 0 0 3px var(--weiss), 0 0 0 6px var(--gold), var(--schatten);
}
.medaillon .zeichen { font: 600 2.25rem/1 var(--schrift-titel); color: var(--gold); letter-spacing: .02em; }
.medaillon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.medaillon .zeichen-klein { position: absolute; right: -2px; bottom: 6px; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 999px; background: var(--tann-800); color: var(--gold); font: 600 1.0625rem/40px var(--schrift-titel); text-align: center; box-shadow: 0 0 0 3px var(--weiss); }
.chargenreihe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.chargenreihe li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.chargenreihe .medaillon { width: 112px; margin-bottom: 18px; }
.chargenreihe .medaillon .zeichen { font-size: 1.875rem; }
.chargenreihe b { font: 600 1.125rem var(--schrift-titel); color: var(--tann-800); }
.chargenreihe span { color: var(--tinte-2); font-size: .9688rem; }
@media (max-width: 960px) { .chargenreihe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .chargenreihe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } .chargenreihe .medaillon { width: 92px; } }

.charge { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 32px; align-items: start; padding: 36px 0; border-bottom: 1px solid var(--linie); }
.charge:first-child { border-top: 2px solid var(--tann-800); }
.charge .medaillon { width: 140px; }
.charge h3 { margin-bottom: 2px; }
.charge .amt { font: italic 500 1.125rem var(--schrift-titel); color: var(--ocker-text); margin-bottom: 12px; display: block; }
.charge ul { margin: 0 0 16px; padding-left: 1.1em; color: var(--tinte-2); }
.charge ul li { margin-bottom: 4px; }
@media (max-width: 640px) { .charge { grid-template-columns: minmax(0, 1fr); gap: 18px; } .charge .medaillon { width: 104px; } }

/* --- Beitragskarten (Blog) --------------------------------------------------------- */
.beitraege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.beitrag { display: flex; flex-direction: column; }
.beitrag .foto { position: relative; margin-bottom: 18px; overflow: hidden; background: var(--reif); }
.beitrag .foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .4s ease; }
.beitrag:hover .foto img { transform: scale(1.03); }
.beitrag .rubrik { font-size: .9375rem; font-weight: 600; color: var(--ocker-text); margin-bottom: 6px; }
.beitrag h3 { font-size: 1.375rem; margin-bottom: 8px; }
.beitrag h3 a { color: var(--tann-800); text-decoration: none; }
.beitrag h3 a:hover { text-decoration: underline; }
.beitrag p { color: var(--tinte-2); margin-bottom: 10px; }
.beitrag .meta { font-size: .9375rem; color: var(--tinte-2); margin-top: auto; }
.beitrag.gross { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.beitrag.gross .foto { margin: 0; }
.beitrag.gross .foto img { aspect-ratio: 16 / 10; }
.beitrag.gross h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.25rem); }
@media (max-width: 960px) { .beitraege { grid-template-columns: repeat(2, minmax(0, 1fr)); } .beitrag.gross { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
@media (max-width: 600px) { .beitraege { grid-template-columns: minmax(0, 1fr); } }
.platzhalter-foto { display: grid; place-items: center; aspect-ratio: 3 / 2; background: repeating-linear-gradient(-45deg, var(--reif) 0 14px, #E6EDE7 14px 28px); color: var(--tinte-2); font-size: .9375rem; text-align: center; padding: 16px; }
.termin-bezug { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--tann-700); background: var(--reif); border-radius: 999px; padding: 3px 10px; margin-bottom: 10px; }
.termin-bezug svg { width: 14px; height: 14px; }
.beitrag .termin-bezug, .beitrag .rubrik { align-self: flex-start; }

/* --- Filterchips --------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; padding: 0; list-style: none; }
.chips button, .chips a { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linie); background: var(--weiss); color: var(--tann-800); font: 600 .9688rem var(--schrift-text); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.chips [aria-pressed="true"], .chips [aria-current="page"] { background: var(--tann-800); border-color: var(--tann-800); color: var(--weiss); }

/* --- Abschluss-Band (CTA) ------------------------------------------------------------ */
.abschluss { position: relative; overflow: hidden; }
.abschluss .huelle { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.abschluss h2 { margin-bottom: 10px; }
.abschluss p { margin: 0; color: #DDE7DF; max-width: 38em; }
@media (max-width: 800px) { .abschluss .huelle { grid-template-columns: minmax(0, 1fr); } }

/* --- Fuß ------------------------------------------------------------------------------ */
.fuss { background: var(--tann-900); color: #C9D6CC; font-size: 1rem; }
.fuss .oben { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding: 64px 0 48px; }
.fuss h2 { font: 600 1rem var(--schrift-text); color: var(--weiss); margin: 0 0 14px; letter-spacing: .02em; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 8px; }
.fuss a { color: #E9F0EA; text-decoration: none; }
.fuss a:hover { text-decoration: underline; color: var(--weiss); }
.fuss .marke { color: var(--weiss); margin-bottom: 18px; }
.fuss .marke .name span { color: #C9D6CC; }
.fuss .gruss { font: italic 500 1.0625rem var(--schrift-titel); color: var(--gold); margin-top: 18px; }
.fuss .sozial { display: flex; gap: 10px; margin-top: 18px; }
.fuss .sozial a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }
.fuss .sozial svg { width: 20px; height: 20px; }
.fuss .unten { border-top: 1px solid rgba(255,255,255,.12); padding: 20px 0 28px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; font-size: .9375rem; }
.fuss .unten nav ul { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fuss .unten nav li { margin: 0; }
.fuss .unten .einst { margin-left: auto; background: none; border: 0; color: #E9F0EA; font: inherit; text-decoration: underline; cursor: pointer; padding: 8px 0; }
@media (max-width: 960px) { .fuss .oben { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fuss .oben { grid-template-columns: minmax(0, 1fr); gap: 28px; } .fuss .unten .einst { margin-left: 0; } }

/* --- Einwilligung (Cookie-Hinweis) -------------------------------------------------- */
.einwilligung { position: fixed; z-index: 90; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(720px, calc(100% - 24px)); background: var(--weiss); color: var(--tinte); border-radius: 6px; box-shadow: 0 10px 40px rgba(15, 38, 25, .28); border-top: 6px solid transparent; border-image: linear-gradient(to bottom, var(--braun) 0 33.33%, var(--weiss) 33.33% 66.66%, var(--gruen) 66.66% 100%) 1; padding: 22px 24px 20px; }
.einwilligung[hidden] { display: none; }
.einwilligung h2 { font-size: 1.375rem; margin-bottom: 8px; }
.einwilligung p { font-size: 1rem; color: var(--tinte-2); margin-bottom: 14px; }
.einwilligung .wahl { display: none; margin: 0 0 16px; padding: 0; border: 0; }
.einwilligung.einstellungen .wahl { display: grid; gap: 10px; }
.einwilligung .wahl label { display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 1rem; align-items: start; }
.einwilligung .wahl input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--tann-700); }
.einwilligung .wahl small { display: block; color: var(--tinte-2); font-size: .9063rem; }
.einwilligung .knopfreihe .knopf { flex: 1 1 180px; }

/* --- Formulare ------------------------------------------------------------------------ */
.formkarte { background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px; padding: clamp(22px, 3vw, 40px); box-shadow: var(--schatten); }
.formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 20px; }
.formular .ganz { grid-column: 1 / -1; }
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld label, .feld .label { font-weight: 600; font-size: 1rem; color: var(--tinte); }
.feld .pflicht { color: var(--fehler); }
.feld input, .feld select, .feld textarea {
  min-height: 48px; padding: 10px 14px; border: 1px solid #8A988D; border-radius: var(--radius);
  font: 400 1.0625rem var(--schrift-text); color: var(--tinte); background: var(--weiss); width: 100%;
}
.feld textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 3px solid var(--braun); outline-offset: 1px; border-color: var(--tann-700); }
.feld .hilfe { font-size: .9063rem; color: var(--tinte-2); }
.anliegen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border: 0; padding: 0; margin: 0; }
.anliegen legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.anliegen label { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 14px 46px; border: 1px solid #8A988D; border-radius: var(--radius); cursor: pointer; min-height: 72px; background: var(--weiss); }
.anliegen label b { font-weight: 600; color: var(--tann-800); }
.anliegen label span { font-size: .9063rem; color: var(--tinte-2); line-height: 1.35; }
.anliegen input { position: absolute; left: 16px; top: 17px; width: 20px; height: 20px; accent-color: var(--tann-700); margin: 0; }
.anliegen label:has(input:checked) { border: 2px solid var(--tann-700); padding: 13px 15px 13px 45px; background: var(--reif); }
@media (max-width: 760px) { .formular { grid-template-columns: minmax(0, 1fr); } .anliegen { grid-template-columns: minmax(0, 1fr); } }
.ablage { border: 2px dashed #8A988D; border-radius: 6px; padding: 22px; display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; background: var(--reif); }
.ablage.drueber { border-color: var(--tann-700); background: #E3ECE4; }
.ablage svg { width: 36px; height: 36px; color: var(--tann-600); }
.ablage b { display: block; }
.ablage input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 560px) { .ablage { grid-template-columns: minmax(0, 1fr); } }
.dateiliste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.dateiliste li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); font-size: .9688rem; }
.zustimmung { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: 1rem; }
.zustimmung input { width: 20px; height: 20px; margin-top: 4px; accent-color: var(--tann-700); }
.bedingt[hidden] { display: none; }
.honig { position: absolute; left: -9999px; }

/* --- Häufige Fragen ------------------------------------------------------------------ */
.fragen { border-top: 2px solid var(--tann-800); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { list-style: none; cursor: pointer; padding: 20px 48px 20px 0; position: relative; font: 600 1.25rem/1.35 var(--schrift-titel); color: var(--tann-800); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; border-right: 2px solid var(--tann-700); border-bottom: 2px solid var(--tann-700); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.fragen details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.fragen .antwort { padding: 0 0 22px; color: var(--tinte-2); max-width: 46em; }
.fragen .antwort p:last-child { margin-bottom: 0; }

/* --- Weg (echter Ablauf, daher nummeriert) -------------------------------------------- */
.weg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: schritt; position: relative; }
.weg li { counter-increment: schritt; padding: 0 18px 0 0; position: relative; }
.weg li::before { content: counter(schritt); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--weiss); border: 2px solid var(--tann-700); font: 600 1.25rem var(--schrift-titel); color: var(--tann-800); margin-bottom: 16px; position: relative; z-index: 1; }
.weg li::after { content: ""; position: absolute; top: 24px; left: 48px; right: 0; height: 2px; background: var(--linie); }
.weg li:last-child::after { display: none; }
.weg h3 { font-size: 1.1875rem; margin-bottom: 6px; }
.weg p { margin: 0; color: var(--tinte-2); font-size: 1rem; }
@media (max-width: 900px) { .weg { grid-template-columns: minmax(0, 1fr); gap: 22px; } .weg li { display: grid; grid-template-columns: 64px 1fr; padding: 0; } .weg li::before { grid-row: span 2; margin: 0; } .weg li::after { top: 48px; left: 23px; width: 2px; height: calc(100% - 26px); right: auto; } }

/* --- Glossar --------------------------------------------------------------------------- */
.glossar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 0; }
.glossar > div { padding: 16px 0; border-bottom: 1px solid var(--linie); }
.glossar dt { font: 600 1.125rem var(--schrift-titel); color: var(--tann-800); margin-bottom: 2px; }
.glossar dd { margin: 0; color: var(--tinte-2); font-size: 1rem; }
@media (max-width: 760px) { .glossar { grid-template-columns: minmax(0, 1fr); } }

/* --- Hinweisbox -------------------------------------------------------------------------- */
.hinweis { border-left: 0; background: var(--reif); padding: 20px 22px; border-radius: var(--radius); }
.hinweis h3 { font-size: 1.1875rem; margin-bottom: 6px; }
.hinweis p:last-child { margin-bottom: 0; }

/* ======================== aus programm.css ======================== */
/* Semesterprogramm: Aktionen, Liste, Monatsraster, Abo, Dialog */
.programm-aktionen { display: flex; flex-direction: column; gap: 12px; align-items: stretch; min-width: 280px; }
.abo-wahl { position: relative; }
.abo-wahl > .knopf { width: 100%; }
.abo-menue { position: absolute; z-index: 30; right: 0; top: calc(100% + 8px); width: min(340px, 90vw); background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px; box-shadow: var(--schatten); padding: 6px; }
.abo-menue a, .abo-menue button { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; width: 100%; padding: 10px 12px; border-radius: var(--radius); text-decoration: none; color: var(--tinte); background: none; border: 0; text-align: left; font: inherit; cursor: pointer; }
.abo-menue a:hover, .abo-menue button:hover { background: var(--reif); }
.abo-menue svg { width: 24px; height: 24px; color: var(--tann-600); }
.abo-menue b { display: block; font-weight: 600; }
.abo-menue small { display: block; color: var(--tinte-2); font-size: .875rem; }
@media (max-width: 900px) { .programm-aktionen { flex-direction: row; flex-wrap: wrap; min-width: 0; } .programm-aktionen > * { flex: 1 1 240px; } .abo-menue { left: 0; right: auto; } }

.programm-raster { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
@media (max-width: 1080px) { .programm-raster { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
.werkzeugleiste { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; justify-content: space-between; margin-bottom: 18px; padding-top: 8px; border-top: 1px solid var(--linie); padding-top: 24px; }
.klein-feld { min-width: 240px; }
.klein-feld select { min-height: 44px; }
.ansicht { display: inline-flex; border: 2px solid var(--tann-700); border-radius: var(--radius); overflow: hidden; }
.ansicht button { min-height: 44px; padding: 0 20px; border: 0; background: var(--weiss); color: var(--tann-700); font: 600 1rem var(--schrift-text); cursor: pointer; }
.ansicht button[aria-selected="true"] { background: var(--tann-700); color: var(--weiss); }

.programm li.vergangen .datum, .programm li.vergangen .titel { color: var(--tinte-2); }
.programm li.vergangen .datum { font-weight: 500; }
.kz.bericht { background: var(--reif); color: var(--tann-700); text-decoration: none; }
.kz.bericht:hover { text-decoration: underline; }
a.kz.anmeldung { text-decoration: none; }
a.kz.anmeldung:hover { background: var(--braun); border-color: var(--braun); color: var(--tann-900); }
[data-monat][hidden], .programm li[hidden] { display: none; }

.monat-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.kalender { border: 1px solid var(--linie); border-radius: 6px; overflow: hidden; }
.kalender .wt { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--reif); border-bottom: 1px solid var(--linie); }
.kalender .wt span { padding: 8px 10px; font-weight: 600; font-size: .9375rem; }
.kalender .tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kalender .tag { min-height: 104px; padding: 8px; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); font-size: .9375rem; color: var(--tinte-2); display: flex; flex-direction: column; gap: 6px; }
.kalender .tag:nth-child(7n) { border-right: 0; }
.kalender .tag b { color: var(--tann-800); font-family: var(--schrift-titel); }
.kalender .tag.fremd { background: #F7F9F7; color: #5F6E63; }
.kalender .eintrag { display: block; padding: 4px 7px; border-radius: 3px; font-size: .8438rem; line-height: 1.3; text-decoration: none; background: var(--tann-800); color: var(--weiss); }
.kalender .eintrag:hover { background: var(--tann-600); color: var(--weiss); }
@media (max-width: 700px) { .kalender .tag { min-height: 64px; padding: 4px; } .kalender .eintrag { font-size: 0; padding: 0; height: 8px; border-radius: 4px; } .kalender .wt span { padding: 6px 4px; text-align: center; } }

.programm-seite { display: grid; gap: 20px; }
.kasten { border: 1px solid var(--linie); border-radius: 6px; padding: 20px 22px; background: var(--weiss); }
.kasten h2 { font-size: 1.25rem; margin-bottom: 12px; }
.liste-kurz { margin: 0; display: grid; gap: 10px; }
.liste-kurz > div { display: grid; grid-template-columns: 7.2rem 1fr; gap: 10px; align-items: baseline; }
.liste-kurz dt { font-weight: 600; color: var(--tann-800); }
.liste-kurz dd { margin: 0; color: var(--tinte-2); font-size: 1rem; }
.liste-kurz.gestapelt > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
.liste-kurz.legende > div { grid-template-columns: auto 1fr; gap: 12px; }
.liste-kurz.legende dt { min-width: 3.2rem; }
.liste-schlicht { margin: 0; padding-left: 1.1em; color: var(--tinte); }

.abo-schritte { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.abo-schritte h3 { font-size: 1.1875rem; margin-bottom: 6px; }
.abo-schritte p { margin: 0; color: var(--tinte-2); font-size: 1rem; }
@media (max-width: 960px) { .abo-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .abo-schritte { grid-template-columns: minmax(0, 1fr); } }
.abo-adresse { background: var(--weiss); border: 1px solid var(--reif-2); border-radius: 6px; padding: 20px 22px; max-width: 760px; }
.abo-adresse label { display: block; font-weight: 600; margin-bottom: 8px; }
.abo-adresse > div { display: flex; gap: 10px; flex-wrap: wrap; }
.abo-adresse input { flex: 1 1 320px; min-height: 44px; padding: 0 12px; border: 1px solid #8A988D; border-radius: var(--radius); font: 1rem var(--schrift-text); color: var(--tinte); background: var(--reif); }

.termin-dialog { width: min(620px, calc(100% - 24px)); border: 0; border-radius: 6px; padding: 0 26px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.3); color: var(--tinte); }
.termin-dialog::backdrop { background: rgba(15, 38, 25, .55); }
.termin-dialog .dlg-kopf { display: flex; gap: 16px; align-items: start; justify-content: space-between; padding-top: 20px; border-top: 7px solid transparent; border-image: linear-gradient(to bottom, var(--braun) 0 33.33%, var(--weiss) 33.33% 66.66%, var(--gruen) 66.66% 100%) 1; margin: 0 -26px 14px; padding: 20px 26px 0; }
.termin-dialog h2 { font-size: 1.5rem; margin: 0; }
.dlg-zu { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 1px solid var(--linie); border-radius: 50%; background: var(--weiss); cursor: pointer; color: var(--tann-800); }
.dlg-zu svg { width: 20px; height: 20px; }
.termin-dialog .liste-kurz { margin-bottom: 16px; }
.termin-dialog [hidden] { display: none; }

/* ======================== aus kontakt.css ======================== */
/* Kontaktseite: Formular mit Seitenspalte, Anfahrt, Karte nach Zustimmung */
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
@media (max-width: 1080px) { .kontakt-raster { grid-template-columns: minmax(0, 1fr); } }
.kontakt-seite { display: grid; gap: 20px; position: sticky; top: 108px; }
@media (max-width: 1080px) { .kontakt-seite { position: static; } }
.kontaktkarte { border-radius: 6px; padding: 26px 26px 22px; }
.kontaktkarte h2 { font-size: 1.5rem; margin-bottom: 8px; }
.kontaktkarte h3 { font-size: 1.125rem; margin: 22px 0 10px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16); }
.kontaktkarte p { color: #DDE7DF; }
.wege { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wege li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.wege svg { width: 22px; height: 22px; color: var(--gold); margin-top: 2px; }
.ansprech { margin: 0; display: grid; gap: 14px; }
.ansprech dt { font-weight: 600; color: var(--weiss); display: flex; align-items: center; gap: 10px; }
.ansprech dd { margin: 4px 0 0 46px; color: #DDE7DF; font-size: 1rem; }
.zeichen-mini { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 6px; border-radius: 999px; border: 2px solid var(--gold); color: var(--gold); font: 600 1rem/1 var(--schrift-titel); }
.zusagen { list-style: none; margin: 0; padding: 0 4px; display: grid; gap: 12px; }
.zusagen li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; color: var(--tinte-2); font-size: 1rem; }
.zusagen svg { width: 20px; height: 20px; color: var(--ok); margin-top: 3px; }
.datenhinweis { margin: 0; font-size: .9688rem; color: var(--tinte-2); padding: 14px 16px; background: var(--reif); border-radius: var(--radius); }
.gesendet { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 16px 18px; border-radius: var(--radius); background: #E5F0E6; color: var(--tann-800); }
.gesendet svg { width: 28px; height: 28px; color: var(--ok); }
.gesendet b { display: block; }
.gesendet span { color: var(--tinte-2); }
.gesendet[hidden] { display: none; }
.anfahrt { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: stretch; }
@media (max-width: 900px) { .anfahrt { grid-template-columns: minmax(0, 1fr); } }
.adresse-gross { font: 600 1.375rem/1.4 var(--schrift-titel); font-style: normal; color: var(--tann-800); margin-bottom: 22px; }
.haken { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.haken li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; color: var(--tinte-2); }
.haken svg { width: 24px; height: 24px; color: var(--tann-600); }
.karte-platzhalter { min-height: 340px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px; background:
  linear-gradient(rgba(238, 243, 238, .92), rgba(238, 243, 238, .92)),
  repeating-linear-gradient(0deg, transparent 0 38px, #CBD8CD 38px 39px),
  repeating-linear-gradient(90deg, transparent 0 38px, #CBD8CD 38px 39px); border: 1px solid var(--reif-2); }
.karte-platzhalter svg { width: 34px; height: 34px; color: var(--tann-600); margin-bottom: 8px; }
.karte-platzhalter b { font: 600 1.25rem var(--schrift-titel); color: var(--tann-800); }
.karte-platzhalter p { color: var(--tinte-2); font-size: 1rem; max-width: 30em; margin: 6px 0 16px; }

/* ======================== aus blog.css ======================== */
/* Blog: Übersicht und Beitrag */
.blaettern { display: flex; gap: 8px; align-items: center; margin-top: 48px; flex-wrap: wrap; }
.blaettern > span, .blaettern > a:not(.knopf) { display: grid; place-items: center; min-width: 44px; height: 44px; border-radius: var(--radius); border: 1px solid var(--linie); text-decoration: none; font-weight: 600; color: var(--tann-800); }
.blaettern > span[aria-current] { background: var(--tann-800); border-color: var(--tann-800); color: var(--weiss); }
.blaettern .knopf { margin-left: 8px; }
.beitrag[hidden] { display: none; }
.beitrag .foto .platzhalter-foto { width: 100%; }
.beitrag.gross .termin-bezug, .beitrag.gross .meta { display: block; }
.beitrag.gross .termin-bezug { display: inline-flex; }

.einbettung { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 28px; border-radius: 6px; background: var(--weiss); border: 1px dashed #8A988D; }
.einbettung > svg { width: 34px; height: 34px; color: var(--tann-600); }
.einbettung b { font: 600 1.1875rem var(--schrift-titel); color: var(--tann-800); }
.einbettung p { margin: 0 0 8px; font-size: .9688rem; color: var(--tinte-2); max-width: 32em; }
.einbettung .zustimmung { font-size: .9375rem; margin-top: 8px; }

/* Beitrag */
.artikel-kopf { padding: clamp(36px, 4vw, 56px) 0 28px; }
.artikel-kopf h1 { max-width: 18em; font-size: clamp(2.25rem, 1.8rem + 2.2vw, 3.75rem); }
.rubrik-gross { display: inline-block; font-weight: 600; color: var(--ocker-text); margin-bottom: 10px; }
.metazeile { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--tinte-2); margin: 0; }
.metazeile span + span { position: relative; }
.metazeile span + span::before { content: ""; position: absolute; left: -12px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); transform: translateY(-50%); }
.artikel-bild { margin: 0 0 48px; }
.artikel-bild img { width: 100%; max-height: 640px; object-fit: cover; }
.artikel-bild figcaption { font-size: .9375rem; color: var(--tinte-2); padding-top: 10px; }
.artikel-raster { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start; padding-bottom: 72px; }
@media (max-width: 1020px) { .artikel-raster { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
.artikel-text { max-width: 44rem; }
.artikel-text p, .artikel-text li { font-size: 1.1875rem; line-height: 1.7; }
.artikel-text h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.125rem); margin-top: 1.6em; }
.beispiel-hinweis { font-size: .9375rem !important; color: var(--warnung-text); background: var(--warnung-grund); padding: 8px 12px; border-radius: var(--radius); }
.galerie { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; gap: 10px; margin: 32px 0; }
.galerie img { width: 100%; height: 100%; object-fit: cover; grid-row: span 2; aspect-ratio: 4 / 3; }
.galerie .platzhalter-foto { aspect-ratio: auto; min-height: 120px; }
.galerie figcaption { grid-column: 1 / -1; font-size: .9375rem; color: var(--tinte-2); }
.strecke { border-top: 2px solid var(--tann-800); border-bottom: 1px solid var(--linie); padding: 14px 0; margin: 24px 0; }
.strecke h3 { font-size: 1.125rem; margin-bottom: 4px; }
.strecke p { margin: 0; color: var(--tinte-2); }
.teilen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 36px 0; padding-top: 24px; border-top: 1px solid var(--linie); }
.teilen > span { font-weight: 600; margin-right: 6px; }
.autor { display: grid; grid-template-columns: 84px 1fr; gap: 20px; align-items: center; padding: 22px; background: var(--reif); border-radius: 6px; }
.autor .medaillon { width: 76px; box-shadow: 0 0 0 2px var(--reif), 0 0 0 4px var(--gold); }
.autor .medaillon .zeichen { font-size: 1.25rem; }
.autor b { font-family: var(--schrift-titel); font-size: 1.125rem; color: var(--tann-800); }
.autor p { margin: 4px 0 0; font-size: 1rem !important; color: var(--tinte-2); }
.artikel-seite { display: grid; gap: 20px; position: sticky; top: 108px; }
@media (max-width: 1020px) { .artikel-seite { position: static; } }
.termin-kasten { border: 1px solid var(--linie); border-radius: 6px; padding: 22px; }
.termin-kasten.dunkel { border: 0; }
.termin-kasten h2 { font-size: 1.1875rem; margin-bottom: 12px; }
.termin-zeile { display: flex; flex-direction: column; margin-bottom: 12px; }
.termin-zeile b { font: 600 1.25rem var(--schrift-titel); color: var(--tann-800); }
.dunkel .termin-zeile b { color: var(--weiss); }
.termin-zeile span { color: var(--tinte-2); }
.dunkel .termin-zeile span { color: #C9D6CC; }
.termin-kasten.dunkel p { color: #DDE7DF; font-size: 1rem; }

/* --- Unterseiten: Verbindung, Werte, Chargen ------------------------------------ */
.saeulen { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; border-left: 0; }
.saeulen li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--linie); }
.saeulen li:first-child { border-top: 2px solid var(--tann-800); }
.saeulen svg { width: 40px; height: 40px; color: var(--tann-600); }
.saeulen h3 { font-size: 1.25rem; margin-bottom: 4px; }
.saeulen p { margin: 0; color: var(--tinte-2); }
.liste-hell { margin: 0; padding-left: 1.1em; color: #DDE7DF; }
.liste-hell li { margin-bottom: 6px; }
.orte { list-style: none; margin: 14px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.orte li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.orte b { font: 600 1.125rem var(--schrift-titel); color: var(--weiss); }
.orte span { color: #C9D6CC; font-variant-numeric: tabular-nums; }
.orte li.wir b, .orte li.wir span { color: var(--gold); }
@media (max-width: 560px) { .orte { grid-template-columns: minmax(0, 1fr); } }

.prinzip-reihe { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: start; }
.prinzip-reihe > div:last-child { max-width: 44rem; }
.prinzip-marke { display: flex; flex-direction: column; gap: 18px; padding-top: 8px; border-top: 2px solid var(--gold); }
.prinzip-marke svg { width: 64px; height: 64px; color: var(--ocker-text); margin-top: 18px; }
.prinzip-marke .inschrift { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); color: var(--tann-800); }
@media (max-width: 860px) { .prinzip-reihe { grid-template-columns: minmax(0, 1fr); gap: 20px; } .prinzip-marke { flex-direction: row; align-items: center; } .prinzip-marke svg { margin-top: 12px; width: 48px; height: 48px; } }
.so-leben { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.so-leben li { position: relative; padding-left: 30px; color: var(--tinte); }
.so-leben li::before { content: ""; position: absolute; left: 0; top: .55em; width: 16px; height: 6px; background: linear-gradient(to bottom, var(--braun) 0 33.33%, var(--weiss) 33.33% 66.66%, var(--gruen) 66.66% 100%); border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.haltung { margin-top: 26px; padding: 22px 24px; background: var(--tann-800); color: #E9F0EA; border-radius: 6px; }
.haltung h3 { color: var(--weiss); margin-bottom: 10px; }
.haltung ul { margin: 0; padding-left: 1.1em; }
.haltung li { margin-bottom: 6px; }
.ziele { margin: 0; padding: 0; list-style: none; counter-reset: ziel; display: grid; gap: 0; border-top: 2px solid var(--tann-800); }
.ziele li { counter-increment: ziel; display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--reif-2); font: 600 1.375rem/1.3 var(--schrift-titel); color: var(--tann-800); }
.ziele li::before { content: counter(ziel, upper-roman); font: 600 1rem var(--schrift-inschrift); color: var(--ocker-text); letter-spacing: .08em; }
.zwei-traditionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.zwei-traditionen h3 { font-size: 1.5rem; padding-bottom: 10px; border-bottom: 2px solid var(--tann-800); margin-bottom: 0; }
.glossar.einspaltig { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) { .zwei-traditionen { grid-template-columns: minmax(0, 1fr); } }
.chargenliste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.chargenliste .charge:nth-child(2) { border-top: 2px solid var(--tann-800); }
@media (max-width: 960px) { .chargenliste { grid-template-columns: minmax(0, 1fr); } .chargenliste .charge:nth-child(2) { border-top: 0; } }
.zustaendig { margin: 0; border-top: 2px solid var(--tann-800); }
.zustaendig > div { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--reif-2); }
.zustaendig dt { font-weight: 600; }
.zustaendig dd { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--tinte-2); white-space: nowrap; }
.zeichen-chip { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 999px; background: var(--tann-800); color: var(--gold); font: 600 1rem/1 var(--schrift-titel); }

/* ======================== WordPress und Elementor ======================== */
/* Abschnitte füllen den Elementor-Container vollständig. */
.e-con.ajc-sektion { --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; --gap: 0px; --row-gap: 0px; --column-gap: 0px; padding: 0; }
.e-con.ajc-sektion > .elementor-widget { width: 100%; }
.elementor-widget-container > .abschnitt, .elementor-widget-container > section { margin: 0; }
.admin-bar .kopf { top: 32px; }
@media (max-width: 782px) { .admin-bar .kopf { top: 46px; } }
@media (max-width: 600px) { .admin-bar .kopf { top: 0; } }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ajc-symbol { width: 1em; height: 1em; flex: none; }
.symbole-vorrat { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Textseiten (Rechtstexte, Seiten ohne Elementor) */
.textseite { padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 6vw, 96px); }
.textseite .inhalt-text { max-width: 46rem; }
.inhalt-text h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); margin-top: 1.6em; }
.inhalt-text h3 { margin-top: 1.4em; }
.inhalt-text ul, .inhalt-text ol { padding-left: 1.2em; }
.inhalt-text li { margin-bottom: .4em; }
.inhalt-text table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: 1rem; }
.inhalt-text th, .inhalt-text td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.inhalt-text th { background: var(--reif); }
.verzeichnis { border: 1px solid var(--linie); border-radius: 6px; padding: 18px 22px; margin: 0 0 32px; background: var(--weiss); }
.verzeichnis h2 { font-size: 1.125rem; margin: 0 0 10px; }
.verzeichnis ol { margin: 0; padding-left: 1.2em; columns: 2; column-gap: 32px; }
@media (max-width: 640px) { .verzeichnis ol { columns: 1; } }
.stand-zeile { color: var(--tinte-2); font-size: .9375rem; margin-top: 28px; }
/* Block-Editor-Inhalte im Blog */
.artikel-text .wp-block-image img { height: auto; }
.artikel-text figure { margin: 28px 0; }
.artikel-text figcaption, .artikel-text .wp-element-caption { font-size: .9375rem; color: var(--tinte-2); margin-top: 8px; }
.artikel-text .wp-block-gallery { gap: 10px; }
.artikel-text blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--gold); font: italic 500 1.25rem/1.5 var(--schrift-titel); color: var(--tann-800); }
.leer-hinweis { padding: 28px; border: 1px dashed #8A988D; border-radius: 6px; background: var(--weiss); color: var(--tinte-2); }
.leer-hinweis b { display: block; font: 600 1.25rem var(--schrift-titel); color: var(--tann-800); margin-bottom: 6px; }
/* Kontaktformular: Meldungen und Zustände */
.formular-meldung { grid-column: 1 / -1; padding: 14px 18px; border-radius: var(--radius); background: var(--reif); color: var(--tann-800); }
.formular-meldung p { margin: 0; }
.formular-meldung ul { margin: 8px 0 0; padding-left: 1.2em; }
.formular-meldung.fehler { background: #FBEAE8; color: var(--fehler); border-left: 4px solid var(--fehler); }
.formular-meldung.fehler p, .formular-meldung.fehler li { color: #7A1C14; }
.formular-meldung[hidden] { display: none; }
.formular.sendet [data-senden] { opacity: .7; cursor: progress; }
.formular .bedingt[hidden] { display: none; }
.dateiliste li { align-items: center; }
.dateiliste li > span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.dateiliste li.fehler { border-color: var(--fehler); }
.dateiliste li.fehler .klein { color: var(--fehler); }
.datei-weg { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--linie); border-radius: 50%; background: var(--weiss); color: var(--tann-800); font-size: 1.125rem; line-height: 1; cursor: pointer; }
.datei-weg:hover { border-color: var(--tann-700); }
.ablage { position: relative; cursor: pointer; }
.ablage:focus-visible { outline: 3px solid var(--braun); outline-offset: 2px; }
/* Einbettungen (2-Klick) */
.einbettung-figur { margin: 0; }
.einbettung--karte { min-height: 340px; justify-content: center; background: var(--reif); }
.einbettung--video { aspect-ratio: 16 / 9; justify-content: center; position: relative; overflow: hidden; }
.einbettung-vorschau { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .18; }
.einbettung--video > :not(.einbettung-vorschau) { position: relative; }
.einbettung.geladen { padding: 0; border: 0; background: none; display: block; }
.einbettung.geladen iframe { display: block; width: 100%; border: 0; border-radius: 6px; }
.einbettung--video.geladen iframe { aspect-ratio: 16 / 9; height: auto; }
.einbettung--karte.geladen iframe { height: 380px; }
.einbettung-unterschrift { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: .9375rem; color: var(--tinte-2); padding-top: 10px; }
.anfahrt .einbettung-figur, .anfahrt .einbettung { height: 100%; }
/* Blog: aktuelle Seite in der Seitenzählung */
.blaettern .aktuell, .blaettern .current { background: var(--tann-800); border-color: var(--tann-800); color: var(--weiss); }
/* Links im Fließtext unterstrichen (WCAG 1.4.1, wie dh-webseite) */
.inhalt-text a, .artikel-text a, .antwort a, .datenhinweis a, .glossar a { text-decoration: underline; text-underline-offset: .15em; }
/* Elementor setzt „.elementor a { text-decoration: none }“. Textlinks ohne
   eigene Klasse sind wie in den Mockups unterstrichen (gleiche Spezifität,
   design.css lädt danach); Knöpfe und Marken bringen eigene Regeln mit. */
.elementor :is(p, li, dd, td, figcaption) > a:where(:not([class])), .elementor .prinzip > a, .elementor a.textlink { text-decoration: underline; }
.beitrag .foto { text-decoration: none; }
/* Berichte: Galerie-Stil „Großes Bild links“ (Vorlage „Bilder vom Tag“, inc/bloecke.php) */
.wp-block-gallery.is-style-mosaik.has-nested-images { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
/* Doppelte Klasse: WordPress setzt die Spaltenbreite mit gleicher Gewichtung und lädt danach. */
.wp-block-gallery.is-style-mosaik.has-nested-images figure.wp-block-image.wp-block-image:not(#individual-image) { width: auto; max-width: none; margin: 0; }
.wp-block-gallery.is-style-mosaik.has-nested-images figure.wp-block-image:first-child { grid-row: span 2; }
/* Kleine Bilder im festen Format (WordPress gäbe ihnen „flex: 1 0 0%“ – ohne feste
   Höhe fielen sie im Raster auf null zusammen), das große füllt beide Zeilen. */
.wp-block-gallery.is-style-mosaik.has-nested-images figure.wp-block-image.wp-block-image:not(#individual-image) img { flex: none; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.wp-block-gallery.is-style-mosaik.has-nested-images figure.wp-block-image.wp-block-image:not(#individual-image):first-child img { height: 100%; aspect-ratio: auto; }
.wp-block-gallery.is-style-mosaik.has-nested-images > figcaption { grid-column: 1 / -1; text-align: left; font-size: .9375rem; color: var(--tinte-2); }