@charset "UTF-8";
/* ==========================================================================
   BDOSV – Designsystem
   Messing #9d743e · Anthrazit #14140f · Creme #f1efe8
   ========================================================================== */

@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/source-serif-4.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* ---------------------------------------------------------------- Tokens */
:root {
  --ink:        #14140f;
  --ink-2:      #26251e;
  --ink-3:      #3d3b32;
  --text:       #2a2822;
  --text-mute:  #6b665c;
  --text-soft:  #6f6a5f;

  --brass:      #856231;
  --brass-mid:  #b08c5c;
  --brass-lite: #c8a566;
  --brass-pale: #ecd6b7;
  --brass-wash: #f7f1e6;

  --cream:      #f1efe8;
  --cream-2:    #f8f6f1;
  --white:      #ffffff;
  --line:       #e2ddd2;
  --line-2:     #d3ccbc;

  --gruen:      #3f7a4d;
  --gruen-bg:   #eef5ef;
  --rot:        #a32020;
  --rot-bg:     #fbeeee;
  --gelb:       #8a6410;
  --gelb-bg:    #fbf3e2;
  --blau:       #2b5578;
  --blau-bg:    #eef3f8;

  --serif: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --breite:     1180px;
  --breite-eng: 760px;
  --rund:       3px;

  --schatten-s: 0 1px 2px rgba(20, 20, 15, .06), 0 2px 8px rgba(20, 20, 15, .04);
  --schatten-m: 0 2px 6px rgba(20, 20, 15, .07), 0 12px 28px rgba(20, 20, 15, .07);
  --schatten-l: 0 8px 20px rgba(20, 20, 15, .10), 0 24px 60px rgba(20, 20, 15, .10);

  --tempo: 180ms cubic-bezier(.4, 0, .2, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  tab-size: 4;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.18;
  margin: 0 0 .6em;
  font-weight: 600;
  letter-spacing: -.012em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.35rem + 3.1vw, 3.7rem); font-weight: 700; }
h2 { font-size: clamp(1.65rem, 1.15rem + 2.1vw, 2.6rem); }
h3 { font-size: clamp(1.28rem, 1.05rem + .95vw, 1.7rem); }
h4 { font-size: clamp(1.1rem, 1rem + .45vw, 1.28rem); }
h5 { font-size: 1.02rem; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color var(--tempo); }
a:hover { color: var(--ink); }

img, svg, video { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
small { font-size: .875rem; }
strong, b { font-weight: 650; color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--brass-pale); color: var(--ink); }

.springmarke {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--white);
  padding: .8rem 1.2rem; z-index: 999; text-decoration: none;
}
.springmarke:focus { left: .5rem; top: .5rem; }

.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- Struktur */
.huelle { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
.huelle-eng { max-width: var(--breite-eng); }

.abschnitt { padding-block: clamp(3.4rem, 7vw, 6.5rem); }
.abschnitt-schmal { padding-block: clamp(2.4rem, 4.5vw, 4rem); }
.abschnitt-creme { background: var(--cream); }
.abschnitt-wash  { background: var(--brass-wash); }
.abschnitt-dunkel { background: var(--ink); color: #d8d4c9; }
.abschnitt-dunkel h1, .abschnitt-dunkel h2, .abschnitt-dunkel h3, .abschnitt-dunkel h4 { color: var(--white); }

.augenbraue {
  display: block;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 620;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: .85rem;
}
.abschnitt-dunkel .augenbraue { color: var(--brass-lite); }

.kopfblock { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.kopfblock.mitte { margin-inline: auto; text-align: center; }

.lead {
  font-family: var(--serif);
  font-size: clamp(1.12rem, 1.02rem + .5vw, 1.4rem);
  line-height: 1.6;
  color: var(--ink-3);
}
.abschnitt-dunkel .lead { color: #c9c4b8; }

.zierlinie { width: 58px; height: 2px; background: var(--brass); margin: 1.35rem 0; border: 0; }
.kopfblock.mitte .zierlinie { margin-inline: auto; }

.raster { display: grid; gap: clamp(1.2rem, 2.4vw, 2rem); }
.raster-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.raster-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.raster-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
/* Mitgliederkacheln: auto-fill statt auto-fit, damit eine einzelne Kachel
   nicht auf die volle Breite aufgeblasen wird. */
.raster-kacheln {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  justify-content: start;
}
.raster-kacheln > * { max-width: 22rem; }

/* --------------------------------------------------------------- Buttons */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--sans); font-size: .92rem; font-weight: 620;
  letter-spacing: .045em; text-transform: uppercase;
  padding: .95rem 1.9rem; border: 1px solid transparent; border-radius: var(--rund);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background var(--tempo), color var(--tempo), border-color var(--tempo), transform var(--tempo), box-shadow var(--tempo);
}
.knopf:active { transform: translateY(1px); }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.knopf-haupt { background: var(--brass); color: var(--white); border-color: var(--brass); box-shadow: var(--schatten-s); }
.knopf-haupt:hover { background: #6b4f28; border-color: #6b4f28; color: var(--white); box-shadow: var(--schatten-m); }

.knopf-dunkel { background: var(--ink); color: var(--white); border-color: var(--ink); }
.knopf-dunkel:hover { background: var(--ink-2); color: var(--brass-lite); }

.knopf-linie { background: transparent; color: var(--ink); border-color: var(--line-2); }
.knopf-linie:hover { border-color: var(--brass); color: var(--brass); background: var(--brass-wash); }

/* Umriss-Buttons auf dunklem Grund - gilt auch für Kopfleiste und Hero */
.abschnitt-dunkel .knopf-linie,
.kopfleiste .knopf-linie,
.hero .knopf-linie,
.seitenkopf .knopf-linie {
  color: var(--white);
  border-color: rgba(255, 255, 255, .45);
}
.abschnitt-dunkel .knopf-linie:hover,
.kopfleiste .knopf-linie:hover,
.hero .knopf-linie:hover,
.seitenkopf .knopf-linie:hover {
  border-color: var(--brass-lite);
  color: var(--brass-lite);
  background: rgba(255, 255, 255, .08);
}

.knopf-klein { padding: .55rem 1.05rem; font-size: .78rem; letter-spacing: .04em; }
.knopf-gefahr { background: var(--rot); border-color: var(--rot); color: #fff; }
.knopf-gefahr:hover { background: #871a1a; border-color: #871a1a; color: #fff; }
.knopf-voll { width: 100%; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* ----------------------------------------------------------------- Header */
.kopfleiste {
  position: sticky; top: 0; z-index: 100;
  background: rgba(20, 20, 15, .97);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: saturate(140%) blur(8px);
}
.kopfleiste-innen {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 74px;
}
.marke { display: flex; align-items: center; gap: .8rem; text-decoration: none; flex-shrink: 0; }
.marke img { width: 44px; height: 44px; }
.marke-text { display: flex; flex-direction: column; line-height: 1.1; }
.marke-name {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 700;
  letter-spacing: .1em; color: var(--white);
}
.marke-zusatz {
  font-size: .58rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--brass-lite); margin-top: 2px;
}

.hauptnavi { display: flex; align-items: center; gap: .15rem; }
.hauptnavi a {
  display: block; padding: .6rem .78rem; font-size: .86rem; font-weight: 550;
  color: #cbc6ba; text-decoration: none; border-radius: var(--rund);
  transition: color var(--tempo), background var(--tempo);
  white-space: nowrap;
}
.hauptnavi a:hover { color: var(--white); background: rgba(255,255,255,.07); }
.hauptnavi a[aria-current="page"] { color: var(--brass-lite); }
.hauptnavi a[aria-current="page"]::after {
  content: ''; display: block; height: 2px; background: var(--brass);
  margin-top: 5px; border-radius: 2px;
}

.kopf-aktionen { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }

.menue-schalter {
  display: none; background: transparent; border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--rund); padding: .5rem .7rem; cursor: pointer; color: var(--white);
}
.menue-schalter span { display: block; width: 20px; height: 2px; background: currentColor; margin: 4px 0; transition: transform var(--tempo), opacity var(--tempo); }
.menue-schalter[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menue-schalter[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menue-schalter[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Die Kopfzeile braucht bei voller Navigation rund 1380 px. Damit sie auf
   gängigen Laptop-Breiten (1366 px) nicht überläuft, wird sie gestaffelt
   verschlankt, bevor das Burger-Menü übernimmt. */
@media (max-width: 1440px) {
  .hauptnavi a { padding: .6rem .52rem; font-size: .82rem; }
  .marke img { width: 38px; height: 38px; }
  .marke-name { font-size: 1.18rem; }
}
/* Ersatz-Navigationspunkt für die Anmeldung: nur sichtbar, sobald der
   Anmelden-Knopf aus der Kopfleiste weicht.
   Der Selektor muss den Elternteil nennen: ".hauptnavi a" darüber setzt
   display:block und hätte bei gleicher Spezifität das letzte Wort. */
.hauptnavi .navi-ersatz { display: none; }

@media (max-width: 1320px) {
  /* „Anmelden" weicht als Knopf zuerst und wandert dafür in die Navigation –
     ein Navigationspunkt ist schmaler als ein Knopf mit Rahmen und Innenabstand. */
  .kopf-aktionen .knopf-linie { display: none; }
  .marke-zusatz { display: none; }
  .hauptnavi .navi-ersatz { display: block; }
}

@media (max-width: 1150px) {
  .menue-schalter { display: block; }
  .hauptnavi {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.1);
    padding: .6rem clamp(1.1rem, 4vw, 2.5rem) 1.2rem;
    max-height: calc(100vh - 74px); overflow-y: auto;
  }
  .hauptnavi.offen { display: flex; }
  .hauptnavi a { padding: .82rem .2rem; border-bottom: 1px solid rgba(255,255,255,.07); border-radius: 0; font-size: .95rem; }
  .hauptnavi a[aria-current="page"]::after { display: none; }
  .kopf-aktionen .knopf { display: none; }
  .kopf-aktionen .knopf.immer { display: inline-flex; }
}

/* ------------------------------------------------------------------- Hero */
/* Hero wie auf der bisherigen Website: randloses Bild, darauf eine zentrierte
   Box mit dunklem Überzug. Der Überzug liegt bei 70 % statt der ursprünglichen
   62 % – gemessen an den hellsten Stellen des Bildes reichen 62 % für weißen
   Text nicht aus (3,95:1), 70 % ergeben 5,02:1. */
.hero { position: relative; background: var(--ink); color: var(--white); overflow: hidden; }
.hero-bild { position: absolute; inset: 0; }
.hero-bild img { width: 100%; height: 100%; object-fit: cover; }
.hero-innen { position: relative; z-index: 2; }

.hero-box {
  max-width: 980px;
  margin-inline: auto;
  margin-block: clamp(2rem, 5vw, 5rem);
  background: rgba(51, 51, 51, .70);
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.2rem, 4vw, 2.4rem);
  text-align: center;
  border-radius: var(--rund);
}
.hero-inhalt { max-width: 46rem; margin-inline: auto; }
.hero h1 {
  color: var(--white);
  font-weight: 900;
  font-size: clamp(2.05rem, 1.3rem + 2.6vw, 3.6rem);
  margin-bottom: .35em;
}
.hero-motto {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.1rem, 1rem + .6vw, 1.45rem);
  color: #ffffff; margin-bottom: 1.4rem;
}
.hero-text { font-size: 1.05rem; color: #ffffff; margin-inline: auto; margin-bottom: 1.8rem; }
.hero .knopfreihe { justify-content: center; }

.plakette {
  display: inline-flex; align-items: center; gap: .55rem;
  border: 1px solid rgba(200, 165, 102, .5); border-radius: 100px;
  padding: .42rem 1.1rem; margin-bottom: 1.6rem;
  font-size: .72rem; font-weight: 620; letter-spacing: .17em; text-transform: uppercase;
  color: var(--brass-lite); background: rgba(200, 165, 102, .07);
}
.plakette::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--brass-lite); }

/* Kompakter Seitenkopf für Unterseiten */
/* Bewusst flach gehalten - der dunkle Block soll die Seite nur einleiten */
.seitenkopf { background: var(--ink); color: var(--white); padding-block: clamp(1.5rem, 2.4vw, 2.2rem); position: relative; }
.seitenkopf h1 {
  color: var(--white);
  font-size: clamp(1.65rem, 1.3rem + 1.5vw, 2.35rem);
  margin-bottom: .25em;
}
.seitenkopf p { color: #c3beb2; max-width: 44rem; margin-bottom: 0; font-size: .97rem; }
.seitenkopf .augenbraue { margin-bottom: .45rem; }
.seitenkopf .brotkrumen { margin-bottom: .6rem; }

.brotkrumen { font-size: .8rem; color: var(--text-soft); margin-bottom: 1rem; }
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.brotkrumen li:not(:last-child)::after { content: '›'; margin-left: .4rem; color: var(--text-soft); }
.brotkrumen a { color: #b5b0a4; text-decoration: none; }
.brotkrumen a:hover { color: var(--brass-lite); text-decoration: underline; }
.brotkrumen [aria-current] { color: var(--brass-lite); }

/* ------------------------------------------------------------------ Karten */
.karte {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--rund);
  padding: clamp(1.4rem, 2.4vw, 2.1rem);
  transition: border-color var(--tempo), box-shadow var(--tempo), transform var(--tempo);
}
/* Ruhige Hervorhebung ohne Sprungbewegung - auf Kundenwunsch */
.karte-heb:hover { border-color: var(--brass-mid); box-shadow: var(--schatten-m); }
.karte h3 { margin-bottom: .5rem; }
.karte-titel { font-size: clamp(1.1rem, 1rem + .45vw, 1.28rem); }
.karte p { color: var(--text-mute); font-size: .97rem; }

/* Die Ziffern sind Text, kein Dekor - sie brauchen lesbaren Kontrast */
.karte-nummer {
  font-family: var(--serif); font-size: 2.4rem; font-weight: 700;
  color: var(--brass); line-height: 1; margin-bottom: .5rem;
  display: block;
}

.karte-link { text-decoration: none; color: inherit; display: block; }
.karte-link:hover { color: inherit; }
.karte-mehr {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem;
  font-size: .82rem; font-weight: 620; letter-spacing: .07em; text-transform: uppercase;
  color: var(--brass);
}
.karte-link:hover .karte-mehr { gap: .7rem; }
.karte-mehr::after { content: '→'; transition: transform var(--tempo); }

/* Glossar / Definitionen */
.glossar-eintrag { border-left: 3px solid var(--brass-pale); padding: .3rem 0 .3rem 1.4rem; margin-bottom: 2rem; }
.glossar-eintrag h3 { margin-bottom: .35rem; }
.glossar-beispiel {
  font-size: .88rem; color: var(--text-soft); font-style: italic; margin-top: .6rem; display: block;
}

/* Beitragskarten */
.beitrag-karte { display: flex; flex-direction: column; text-align: center; border-top: 3px solid var(--line-2); }
.beitrag-karte.hervor { border-top-color: var(--brass); box-shadow: var(--schatten-m); }
.beitrag-preis { font-family: var(--serif); font-size: 2.9rem; font-weight: 700; color: var(--ink); line-height: 1; margin: .7rem 0 .1rem; }
.beitrag-intervall { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 1.1rem; }
.beitrag-karte p { flex: 1; }
.beitrag-karte .knopf { margin-top: 1.4rem; }

/* Merkmalliste mit Häkchen */
.hakenliste { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.hakenliste li { position: relative; padding-left: 2rem; color: var(--text-mute); }
.hakenliste li::before {
  content: ''; position: absolute; left: 0; top: .52em;
  width: 1.05rem; height: .55rem;
  border-left: 2px solid var(--brass); border-bottom: 2px solid var(--brass);
  transform: rotate(-45deg);
}

.punktliste { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.punktliste li { position: relative; padding-left: 1.25rem; }
.punktliste li::before { content: ''; position: absolute; left: 0; top: .68em; width: 5px; height: 5px; border-radius: 50%; background: var(--brass); }

/* Auszeichnungen / Chips */
.chipreihe { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex; align-items: center;
  font-size: .74rem; font-weight: 600; letter-spacing: .07em;
  padding: .34rem .8rem; border-radius: 100px;
  background: var(--brass-wash); color: #7d5c2f; border: 1px solid var(--brass-pale);
}
.abschnitt-dunkel .chip { background: rgba(200,165,102,.12); border-color: rgba(200,165,102,.3); color: var(--brass-lite); }

.marke-etikett {
  display: inline-block; font-size: .68rem; font-weight: 650; letter-spacing: .1em;
  text-transform: uppercase; padding: .28rem .7rem; border-radius: 2px;
}
.et-gruen { background: var(--gruen-bg); color: var(--gruen); }
.et-rot   { background: var(--rot-bg);   color: var(--rot); }
.et-gelb  { background: var(--gelb-bg);  color: var(--gelb); }
.et-blau  { background: var(--blau-bg);  color: var(--blau); }
.et-grau  { background: var(--cream);    color: var(--text-mute); }

/* Zitat */
.zitat {
  font-family: var(--serif); font-size: clamp(1.25rem, 1.05rem + 1vw, 1.85rem);
  line-height: 1.45; color: var(--ink); font-weight: 600;
  border-left: 3px solid var(--brass); padding-left: clamp(1.2rem, 3vw, 2.2rem); margin: 0 0 1.6rem;
}
.abschnitt-dunkel .zitat { color: var(--white); }

/* Kennzahlen */
.kennzahl { text-align: center; }
.kennzahl-wert { font-family: var(--serif); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 700; color: var(--brass); line-height: 1; }
.kennzahl-text { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); margin-top: .5rem; }
.abschnitt-dunkel .kennzahl-text { color: #9a948a; }

/* Öffentliches Mitgliedsprofil */
.profil-block {
  display: grid; gap: clamp(1.8rem, 4vw, 3.2rem);
  /* Breiter als das alte Portraitraster: Die Kontaktangaben brauchen Platz,
     sonst brechen E-Mail und Firmenname mitten im Wort um. */
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 860px) { .profil-block { grid-template-columns: 1fr; } }

/* Kompakte Fassung für Profile ohne Vorstellungstext */
.profil-visitenkarte {
  display: grid; gap: clamp(1.4rem, 3vw, 2.4rem);
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 620px) { .profil-visitenkarte { grid-template-columns: 1fr; } }

/* Mit .daten-liste kombiniert, damit diese Regeln die Grundregeln überschreiben –
   bei gleicher Spezifität würde sonst die später notierte Grundregel gewinnen. */
.daten-liste.visitenkarte-liste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 0 1.6rem; margin-top: .8rem;
}
.daten-liste.visitenkarte-liste > div { grid-template-columns: 1fr; gap: .15rem; padding: .55rem 0; }
.daten-liste.visitenkarte-liste dt { font-size: .72rem; letter-spacing: .1em; }
.daten-liste.visitenkarte-liste dd { font-size: .95rem; }

/* Profil / Portrait */
.portrait-block { display: grid; gap: clamp(1.8rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; }
@media (max-width: 800px) { .portrait-block { grid-template-columns: 1fr; } }
.portrait-bild { border-radius: var(--rund); overflow: hidden; box-shadow: var(--schatten-m); background: var(--cream); }
.portrait-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Mitglieder-Kacheln */
.mitglied-kachel { display: flex; flex-direction: column; text-align: center; align-items: center; }
.mitglied-foto {
  width: 132px; height: 132px; border-radius: 50%; overflow: hidden;
  background: var(--cream); border: 3px solid var(--white); box-shadow: var(--schatten-s);
  margin-bottom: 1.1rem; flex-shrink: 0;
}
.mitglied-foto img { width: 100%; height: 100%; object-fit: cover; }
.mitglied-platzhalter {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--brass-pale), var(--brass-wash));
  font-family: var(--serif); font-size: 2.5rem; font-weight: 700; color: var(--brass);
}
.mitglied-name { font-family: var(--serif); font-size: 1.2rem; font-weight: 650; color: var(--ink); margin-bottom: .15rem; }
.mitglied-rolle { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); margin-bottom: .7rem; }
/* Amt im Verband – steht über der Mitgliedsart und wiegt schwerer */
.mitglied-funktion {
  display: inline-block; font-family: var(--serif); font-size: 1rem; font-weight: 650;
  color: var(--ink); background: var(--brass-wash); border: 1px solid var(--brass-pale);
  border-radius: 100px; padding: .18rem .8rem; margin-bottom: .35rem;
}
.mitglied-kachel .mitglied-funktion + .mitglied-rolle { font-size: .72rem; color: var(--text-soft); }
.seitenkopf .amt-zeile {
  color: var(--brass-lite); font-weight: 600; letter-spacing: .02em; margin-bottom: .35rem;
}

/* ------------------------------------------------------------------ Tabelle */
.tabelle-huelle { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--rund); background: var(--white); }
table.liste { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.liste th, table.liste td { padding: .82rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.liste th {
  background: var(--cream-2); font-family: var(--sans); font-size: .74rem; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute);
  /* Kopfzeilen dürfen umbrechen, sonst erzwingen sie einen Scrollbalken */
  white-space: normal; line-height: 1.3;
}
table.liste td { min-width: 0; overflow-wrap: anywhere; }
/* Aktionen umbrechen lassen statt die Tabelle zu verbreitern */
table.liste td .knopfreihe { gap: .35rem; row-gap: .4rem; }
table.liste .knopf-klein { padding: .42rem .7rem; font-size: .72rem; white-space: nowrap; }
table.liste tbody tr:last-child td { border-bottom: 0; }
table.liste tbody tr:hover { background: var(--cream-2); }
table.liste td.rechts, table.liste th.rechts { text-align: right; }

.daten-liste { display: grid; gap: 0; margin: 0; }
/* minmax(0,…) verhindert, dass lange Werte wie E-Mail-Adressen die Karte sprengen */
.daten-liste > div {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
  gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.daten-liste > div:last-child { border-bottom: 0; }
.daten-liste dt {
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-soft); min-width: 0; overflow-wrap: break-word;
}
/* break-word statt anywhere: bricht nur, wenn es sonst überliefe – "anywhere"
   zerlegt auch Wörter, für die noch Platz wäre. */
.daten-liste dd { margin: 0; min-width: 0; overflow-wrap: break-word; }

/* Gestapelt: Beschriftung über dem Wert. In schmalen Spalten steht dem Wert
   damit die volle Breite zur Verfügung. */
.daten-liste.gestapelt > div {
  grid-template-columns: 1fr; gap: .15rem; padding: .6rem 0;
}
.daten-liste.gestapelt dt { font-size: .72rem; letter-spacing: .1em; }
.daten-liste.gestapelt dd { font-size: .95rem; }
@media (max-width: 760px) { .daten-liste > div { grid-template-columns: 1fr; gap: .15rem; } }

/* ------------------------------------------------------------------ Formular */
.formular { display: grid; gap: 1.35rem; }
.feld-reihe { display: grid; gap: 1.35rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
/* align-content: start ist wesentlich - ohne das dehnt das Feld-Grid seine
   Zeilen auf die Hoehe der Reihe, und ein Feld mit Hinweistext schiebt das
   Nachbarfeld nach unten aus der Flucht */
.feld { display: grid; gap: .42rem; align-content: start; }
/* Felder mit fester Länge sollen nicht über die ganze Spalte laufen */
.feld-schmal { max-width: 9rem; }
.feld-mittel { max-width: 16rem; }
@media (max-width: 520px) {
  .feld-schmal, .feld-mittel { max-width: none; }
}

.feld label, .feld-legende {
  font-size: .82rem; font-weight: 620; letter-spacing: .05em;
  color: var(--ink-3); text-transform: uppercase;
}
.pflicht { color: var(--brass); margin-left: .15rem; }
.feld-hinweis { font-size: .84rem; color: var(--text-soft); line-height: 1.5; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="date"], input[type="number"], input[type="search"],
select, textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--text);
  background: var(--white); border: 1px solid var(--line-2); border-radius: var(--rund);
  padding: .72rem .9rem; transition: border-color var(--tempo), box-shadow var(--tempo);
  -webkit-appearance: none; appearance: none;
  /* Einheitliche Höhe: Datums- und Auswahlfelder bringen sonst eigene Maße mit */
  line-height: 1.45;
  min-height: 3rem;
  box-sizing: border-box;
}
/* Safari/Chrome geben Datumsfeldern zusätzliche innere Elemente */
input[type="date"] { min-height: 3rem; }
input[type="date"]::-webkit-datetime-edit { line-height: 1.45; padding: 0; }
input[type="date"]::-webkit-calendar-picker-indicator { margin-inline-start: .4rem; opacity: .55; cursor: pointer; }
input[type="date"]::-webkit-inner-spin-button { display: none; }
select { min-height: 3rem; }
textarea { min-height: 8rem; resize: vertical; line-height: 1.65; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b665c' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 12px;
  padding-right: 2.4rem;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(157, 116, 62, .15);
}
input::placeholder, textarea::placeholder { color: #a9a396; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--rot); background: #fffafa;
}
.feld-fehler { font-size: .85rem; color: var(--rot); font-weight: 550; }

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }

.wahl-gruppe { display: grid; gap: .7rem; }
.wahl {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: .97rem; line-height: 1.55; cursor: pointer; color: var(--text);
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.wahl input[type="checkbox"], .wahl input[type="radio"] {
  width: 1.15rem; height: 1.15rem; margin: .18rem 0 0; flex-shrink: 0;
  accent-color: var(--brass); cursor: pointer;
}

/* Auswahlkarten (Mitgliedsart) */
.wahlkarten { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.wahlkarte { position: relative; }
.wahlkarte input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahlkarte span.box {
  display: block; height: 100%; padding: 1.3rem;
  border: 2px solid var(--line); border-radius: var(--rund); background: var(--white);
  cursor: pointer; transition: border-color var(--tempo), background var(--tempo), box-shadow var(--tempo);
}
.wahlkarte:hover span.box { border-color: var(--brass-mid); }
.wahlkarte input:checked + span.box { border-color: var(--brass); background: var(--brass-wash); box-shadow: var(--schatten-s); }
.wahlkarte input:focus-visible + span.box { outline: 2px solid var(--brass); outline-offset: 2px; }
.wahlkarte-titel { display: block; font-family: var(--serif); font-size: 1.15rem; font-weight: 650; color: var(--ink); margin-bottom: .2rem; }
.wahlkarte-zusatz { display: block; font-size: .86rem; color: var(--text-mute); margin-bottom: .7rem; }
.wahlkarte-preis { display: block; font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--brass); }

.formular-block {
  border: 1px solid var(--line); border-radius: var(--rund);
  padding: clamp(1.3rem, 3vw, 2.2rem); background: var(--white);
}
.formular-block + .formular-block { margin-top: 1.5rem; }
.formular-block > h2, .formular-block > legend > h2 { font-size: 1.28rem; margin-bottom: .35rem; }
.block-nummer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%; margin-right: .7rem;
  background: var(--ink); color: var(--brass-lite);
  font-family: var(--sans); font-size: .82rem; font-weight: 650;
  vertical-align: middle;
}
.block-kopf { display: flex; align-items: center; margin-bottom: 1.4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.block-kopf h2 { margin: 0; }
.block-kopf .zusatz { font-size: .84rem; color: var(--text-soft); font-family: var(--sans); font-weight: 400; text-transform: none; letter-spacing: 0; display: block; margin-top: .15rem; }

/* Schrittformular – ohne JavaScript bleiben alle Schritte sichtbar */
.schritt-kopf { margin-bottom: 1.6rem; }
.schritt-anzeige {
  display: block; font-size: .78rem; font-weight: 650; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brass); margin-bottom: .6rem;
}
.schritt-balken {
  height: 4px; background: var(--line); border-radius: 100px; overflow: hidden;
}
.schritt-balken > span {
  display: block; height: 100%; width: 0; background: var(--brass);
  border-radius: 100px; transition: width var(--tempo);
}
.schritte-aktiv .schritt[hidden] { display: none; }
.schritt-navigation {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1.8rem;
}
.schritt-navigation [hidden] { display: none; }

/* Unterschriftenfeld */
.unterschrift-feld {
  border: 2px dashed var(--line-2); border-radius: var(--rund);
  background: var(--cream-2); position: relative; overflow: hidden;
  transition: border-color var(--tempo), background var(--tempo);
}
.unterschrift-feld.gezeichnet { border-style: solid; border-color: var(--brass-mid); background: var(--white); }
.unterschrift-feld canvas { display: block; width: 100%; height: 190px; touch-action: none; cursor: crosshair; }
.unterschrift-linie {
  position: absolute; left: 8%; right: 8%; bottom: 42px;
  border-bottom: 1px solid var(--line-2); pointer-events: none;
}
.unterschrift-hinweis {
  position: absolute; left: 0; right: 0; bottom: 14px; text-align: center;
  font-size: .8rem; color: var(--text-soft); pointer-events: none;
}
.unterschrift-feld.gezeichnet .unterschrift-hinweis,
.unterschrift-feld.gezeichnet .unterschrift-linie { opacity: .35; }
.unterschrift-leiste { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .7rem; flex-wrap: wrap; }

/* Fotozuschnitt */
.zuschnitt-buehne {
  position: relative; background: #22221c; border-radius: var(--rund); overflow: hidden;
  height: 340px; touch-action: none; cursor: grab; user-select: none;
}
.zuschnitt-buehne:active { cursor: grabbing; }
.zuschnitt-buehne canvas { display: block; width: 100%; height: 100%; }
.zuschnitt-regler { display: flex; align-items: center; gap: 1rem; margin-top: .9rem; }
.zuschnitt-regler input[type="range"] { flex: 1; accent-color: var(--brass); }

.foto-vorschau { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.foto-vorschau .aktuell { width: 110px; height: 110px; border-radius: 50%; overflow: hidden; background: var(--cream); border: 1px solid var(--line); flex-shrink: 0; }
.foto-vorschau .aktuell img { width: 100%; height: 100%; object-fit: cover; }
.foto-dropzone {
  position: relative; display: grid; justify-items: center; gap: .28rem; min-height: 9.5rem;
  padding: 1.2rem; border: 1.5px dashed #9c927e; border-radius: var(--rund);
  background: #fcfbf7; color: var(--ink-3); text-align: center; cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.foto-dropzone:hover, .foto-dropzone.ist-ziehen {
  border-color: var(--brass); background: #f8f2e5;
}
.foto-dropzone:focus-within {
  outline: 3px solid var(--brass); outline-offset: 3px;
}
.foto-dropzone.ist-ausgewaehlt { border-style: solid; border-color: var(--gruen); background: #f4faf6; }
.foto-datei {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}
.foto-dropzone-symbol { font-size: 1.5rem; line-height: 1; color: var(--brass); font-weight: 700; }
.foto-dropzone-titel { font-weight: 650; color: var(--text); }
.foto-dropzone-text, .foto-dateiname { font-size: .88rem; color: var(--text-soft); }
.foto-dateiname:not(:empty) { color: var(--gruen); font-weight: 600; }

/* Meldungen */
.meldung {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1rem 1.2rem; border-radius: var(--rund); border-left: 3px solid;
  font-size: .95rem; margin-bottom: 1.3rem; line-height: 1.6;
}
.meldung p:last-child { margin-bottom: 0; }
.meldung-erfolg { background: var(--gruen-bg); border-color: var(--gruen); color: #26502f; }
.meldung-fehler { background: var(--rot-bg);   border-color: var(--rot);   color: #7a1818; }
.meldung-warnung{ background: var(--gelb-bg);  border-color: var(--gelb);  color: #6b4d0c; }
.meldung-info   { background: var(--blau-bg);  border-color: var(--blau);  color: #234460; }
/* Fließtext-Links erben die Meldungsfarbe. Buttons behalten ihre eigene,
   sonst steht brauner Text auf braunem Knopfgrund. */
.meldung a:not(.knopf) { color: inherit; }

/* -------------------------------------------------------- Interner Bereich */
/* Der interne Bereich zeigt Tabellen und braucht mehr Breite als das Lesemaß
   der öffentlichen Seiten. */
.intern-huelle {
  /* Voller Platz: der interne Bereich zeigt Tabellen, nicht Fließtext */
  max-width: none;
  display: grid; grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.4rem); align-items: start;
}
@media (max-width: 940px) { .intern-huelle { grid-template-columns: 1fr; } }

.intern-navi {
  position: sticky; top: 92px;
  border: 1px solid var(--line); border-radius: var(--rund); background: var(--white);
  padding: 1rem; display: grid; gap: .15rem;
}
@media (max-width: 940px) { .intern-navi { position: static; } }
.intern-navi a {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .62rem .8rem; border-radius: var(--rund);
  font-size: .92rem; font-weight: 550; color: var(--text); text-decoration: none;
  transition: background var(--tempo), color var(--tempo);
}
.intern-navi a:hover { background: var(--cream); color: var(--ink); }
.intern-navi a[aria-current="page"] { background: var(--ink); color: var(--white); }
.intern-navi a[aria-current="page"] .zaehler { background: var(--brass); color: var(--white); }
.intern-navi .gruppe {
  font-size: .68rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-soft); padding: 1rem .8rem .35rem; font-weight: 650;
}
.zaehler {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem;
  padding: 0 .4rem; height: 1.4rem; border-radius: 100px;
  background: var(--brass-wash); color: var(--brass);
  font-size: .74rem; font-weight: 650;
}

.intern-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.intern-kopf h1 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.15rem); margin-bottom: .15rem; }
.intern-kopf p { color: var(--text-mute); margin: 0; font-size: .95rem; }

.kennzahl-karten { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); margin-bottom: 2rem; }
.kennzahl-karte { background: var(--white); border: 1px solid var(--line); border-radius: var(--rund); padding: 1.2rem 1.35rem; }
.kennzahl-karte .wert { font-family: var(--serif); font-size: 2rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.kennzahl-karte .text { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); margin-top: .3rem; }
.kennzahl-karte.betont { border-left: 3px solid var(--brass); }

.leer-zustand { text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; color: var(--text-soft); }
.leer-zustand h3 { color: var(--text-mute); }

.werkzeugleiste { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.4rem; }
.werkzeugleiste form { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.werkzeugleiste input[type="search"], .werkzeugleiste select { width: auto; min-width: 11rem; padding: .55rem .8rem; font-size: .92rem; }

.filter-reiter { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }
.filter-reiter a {
  padding: .6rem 1rem; font-size: .88rem; font-weight: 570; color: var(--text-mute);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.filter-reiter a:hover { color: var(--ink); }
.filter-reiter a[aria-current="page"] { color: var(--brass); border-bottom-color: var(--brass); }

/* Anmeldeseite */
.anmelde-buehne { min-height: 74vh; display: grid; place-items: center; padding-block: clamp(2.5rem, 6vw, 5rem); background: var(--cream); }
.anmelde-karte { width: 100%; max-width: 27rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--rund); padding: clamp(1.8rem, 4vw, 2.8rem); box-shadow: var(--schatten-m); }
.anmelde-karte h1 { font-size: 1.75rem; text-align: center; margin-bottom: .3rem; }
.anmelde-karte .unterzeile { text-align: center; color: var(--text-mute); font-size: .94rem; margin-bottom: 1.8rem; }

/* ------------------------------------------------------------------ Footer */
.fussleiste { background: var(--ink); color: #a29d92; padding-block: clamp(2.8rem, 5vw, 4rem) 0; font-size: .93rem; }
.fuss-raster { display: grid; gap: 2.2rem; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
@media (max-width: 900px) { .fuss-raster { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); } }
.fussleiste h3, .fussleiste h4 { color: var(--white); font-family: var(--sans); font-size: .76rem; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 1.1rem; }
.fussleiste ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.fussleiste a { color: #a29d92; text-decoration: none; }
.fussleiste a:hover { color: var(--brass-lite); text-decoration: underline; }
.fuss-marke { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; }
.fuss-marke img { width: 46px; height: 46px; }
.fuss-abschluss {
  margin-top: 2.8rem; padding-block: 1.4rem; border-top: 1px solid rgba(255,255,255,.09);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .84rem; color: #837e74;
}
address { font-style: normal; }

/* --------------------------------------------------------------- Prosa */
.prosa { max-width: 46rem; }
.prosa h2 { margin-top: 2.6rem; font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.85rem); }
.prosa h3 { margin-top: 2rem; font-size: 1.22rem; }
.prosa h2:first-child, .prosa h3:first-child { margin-top: 0; }
.prosa ul, .prosa ol { padding-left: 1.3rem; margin: 0 0 1.15em; }
.prosa li { margin-bottom: .45em; }
.prosa a { word-break: break-word; }
.prosa table { width: 100%; border-collapse: collapse; margin-bottom: 1.4em; font-size: .94rem; }
.prosa th, .prosa td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: left; }
.prosa th { background: var(--cream-2); }

/* ------------------------------------------------------------- Hilfsklassen */
.mitte { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .8rem; } .mt-2 { margin-top: 1.6rem; } .mt-3 { margin-top: 2.4rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .8rem; } .mb-2 { margin-bottom: 1.6rem; } .mb-3 { margin-bottom: 2.4rem; }
.text-mute { color: var(--text-mute); }
.text-klein { font-size: .88rem; }
.verstecken { display: none !important; }

@media print {
  .kopfleiste, .fussleiste, .intern-navi, .knopf, .werkzeugleiste, .springmarke { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .abschnitt { padding-block: 0; }
  a { text-decoration: none; color: #000; }
}

/* Plakette im Hero: auf dem Bild trägt nur reines Weiß zuverlässig,
   getönte Farben fallen auf hellen Bildstellen unter 4,5:1. */
.hero .plakette {
  color: #ffffff;
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .10);
}
.hero .plakette::before { background: #ffffff; }

/* ---------------------------------------------------- Status und Sichtbarkeit
   Punkt statt Etikett: braucht in dichten Tabellen deutlich weniger Breite,
   sodass "Ausgetreten" nicht mehr mitten im Wort umbricht. */
.status-punkt {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
  font-size: .92rem;
}
.status-punkt .perle {
  width: .58rem;
  height: .58rem;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .045);
}
.perle-gruen { background: #3f7a4f; }
.perle-gelb  { background: #b6862c; }
.perle-rot   { background: #a33131; }
.perle-grau  { background: #9a958c; }

.sichtbar-marke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sichtbar-marke svg { width: 1.25rem; height: 1.25rem; display: block; }
.sichtbar-ja   { color: var(--brass); }
.sichtbar-nein { color: #a8a298; }
a.sichtbar-marke:hover { color: var(--ink); }

/* Kennungen wie Mitglieds- oder Rechnungsnummern duerfen nicht am Bindestrich
   umbrechen - "RG-0001-25" waere sonst ueber zwei Zeilen verteilt */
.kennung { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- Buchhaltung */
.karte-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.karte-kopf h3 { margin: 0; }

.text-warnung { color: #8c2a2a; font-weight: 600; }

/* Positionseingabe: enge Felder, damit sieben Spalten nebeneinander passen */
table.posten-eingabe input,
table.posten-eingabe select {
  width: 100%;
  padding: .45rem .55rem;
  font-size: .88rem;
}
table.posten-eingabe td { padding: .45rem .35rem; vertical-align: top; }
table.posten-eingabe th { white-space: nowrap; }
table.posten-eingabe .feld-schmal { max-width: none; }
.mt-05 { margin-top: .35rem; }

/* Summenblock rechts unter den Positionen */
.summen-block {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.2rem;
}
.summen-block .daten-liste { min-width: min(100%, 22rem); }
.summen-block .summe-gesamt dt,
.summen-block .summe-gesamt dd {
  border-top: 1px solid var(--brass);
  padding-top: .6rem;
  font-size: 1.05rem;
  color: var(--ink);
  font-weight: 700;
}

/* Gesperrtes Feld: sichtbar, aber klar als nicht bearbeitbar erkennbar.
   Ein deaktiviertes Eingabefeld waere schlechter - es liesse sich weder
   markieren noch vorlesen. */
.nur-lesen {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  border-radius: var(--rund);
  padding: .7rem .9rem;
  line-height: 1.6;
}

/* ------------------------------------------------------- Einblenden beim Scrollen
   Die Ausgangslage steht bewusst hinter .js-reveal: die Klasse setzt das
   Skript selbst. Bleibt JavaScript aus, greift die Regel nie und alle
   Inhalte sind von Anfang an sichtbar - ein Einblendeffekt darf niemals
   darüber entscheiden, ob jemand den Text lesen kann.

   Bewegt werden ausschliesslich opacity und transform. Beide beeinflussen
   das Layout nicht, die Seite bleibt bei einer Layoutverschiebung von 0. */
.js-reveal [data-erscheint] {
  opacity: 0;
  transform: translateY(30px) scale(.985);
  will-change: opacity, transform;
}
.js-reveal [data-erscheint].sichtbar {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              transform .7s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--erscheint-verzug, 0ms);
}

/* Die Zierlinie zeichnet sich nach, sobald ihr Block erscheint.
   Bewusst scaleX statt width: eine Breitenaenderung waere Layout, ein
   transform nicht - so bleibt die Layoutverschiebung bei 0. */
.js-reveal [data-erscheint] .zierlinie {
  transform: scaleX(0);
  transform-origin: left center;
}
.js-reveal [data-erscheint] .mitte .zierlinie,
.js-reveal [data-erscheint].mitte .zierlinie {
  transform-origin: center;
}
.js-reveal [data-erscheint].sichtbar .zierlinie {
  transform: scaleX(1);
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--erscheint-verzug, 0ms) + 180ms);
}

/* Hero-Parallax: das Bild bekommt durch die Vergroesserung Spielraum nach
   oben und unten, in dem es sich beim Scrollen bewegen kann. Ohne diesen
   Spielraum wuerde am Rand ein Streifen frei. */
.js-parallax .hero-bild img {
  transform: scale(1.14);
  will-change: transform;
}
/* Nach dem Einblenden die Optimierungszusage zurücknehmen - sonst behält
   der Browser für jedes Element unnötig eine eigene Ebene im Speicher. */
.js-reveal [data-erscheint].fertig { will-change: auto; }

/* Wer Bewegung reduziert haben möchte, bekommt den Inhalt sofort und ohne
   Weg. Der Effekt ist Zierde, keine Information. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-erscheint] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}