/* Übergangslösung bis zur Tailwind-Einbindung (AP 3): schlicht, große Schrift, tabletfähig */
:root { --text:#1f2328; --gedaempft:#5f6670; --linie:#d8dde3; --flaeche:#f5f6f8; --akzent:#1d4f91; --fehler:#b42318; --ok:#1a7f37; }
* { box-sizing: border-box; }
body { margin:0; font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--text); background:var(--flaeche); }
.kopf { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; padding:.75rem 1.25rem; background:#fff; border-bottom:1px solid var(--linie); }
.marke { font-weight:600; color:var(--text); text-decoration:none; } .marke span { color:var(--akzent); }
.kopf nav { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; } .kopf nav form { margin:0; }
.wer { color:var(--gedaempft); }
a, .link { color:var(--akzent); } .link { background:none; border:0; padding:0; font:inherit; cursor:pointer; text-decoration:underline; }
.inhalt { max-width:72rem; margin:0 auto; padding:1.5rem 1.25rem; }
h1 { font-size:1.6rem; font-weight:600; margin:0 0 .5rem; }
.hinweis { color:var(--gedaempft); margin-top:0; }
.karte { background:#fff; border:1px solid var(--linie); border-radius:8px; padding:1rem 1.25rem; margin:1rem 0; }
.kacheln { display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1rem; }
.zahl { display:block; font-size:2rem; font-weight:600; }
.meldungen { list-style:none; padding:0; } .meldungen li { background:#fff; border:1px solid var(--linie); border-left-width:4px; padding:.5rem 1rem; margin-bottom:.5rem; }
.meldungen .error { border-left-color:var(--fehler); } .meldungen .success { border-left-color:var(--ok); }
form p, form div { margin-bottom:.75rem; }
input[type=email], input[type=password], input[type=text], input[type=search] { width:100%; max-width:26rem; padding:.6rem .7rem; font:inherit; border:1px solid var(--linie); border-radius:6px; }
button, input[type=submit] { font:inherit; padding:.55rem 1.1rem; border-radius:6px; border:1px solid var(--akzent); background:var(--akzent); color:#fff; cursor:pointer; }
.errorlist { color:var(--fehler); padding-left:1rem; }
h2 { font-size:1.2rem; font-weight:600; margin:1.5rem 0 .5rem; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.titelzeile { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:1rem; }
.knopf { display:inline-block; padding:.55rem 1.1rem; border-radius:6px; background:var(--akzent); color:#fff; text-decoration:none; }
.knopf.deaktiviert { background:#c9d2de; color:#4b5563; cursor:not-allowed; }
.suchleiste { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:1rem 0; }
.suchleiste input[type=search] { flex:1 1 18rem; max-width:none; }
.suchleiste select, .filterfelder input, .filterfelder select { font:inherit; padding:.45rem .5rem; border:1px solid var(--linie); border-radius:6px; background:#fff; }
.suchleiste > * { margin-bottom:0; }
.filter { flex-basis:100%; } .filter summary { cursor:pointer; color:var(--akzent); }
.filterfelder { display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end; background:#fff; border:1px solid var(--linie); border-radius:8px; padding:1rem; margin-top:.5rem; }
.filterfelder label { display:flex; flex-direction:column; gap:.25rem; font-size:.9rem; color:var(--gedaempft); }
.filterfelder label.haken { flex-direction:row; align-items:center; color:var(--text); }
table.liste { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--linie); border-radius:8px; }
.liste th { text-align:left; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; color:var(--gedaempft); padding:.6rem .75rem; border-bottom:1px solid var(--linie); }
.liste th a { color:inherit; text-decoration:none; }
.liste td { padding:.6rem .75rem; border-bottom:1px solid var(--linie); vertical-align:top; }
.liste .z { text-align:right; white-space:nowrap; }
.etikett { display:inline-block; padding:.05rem .5rem; border-radius:999px; font-size:.85rem; }
.etikett.gruen { background:#dcfce7; color:#14532d; } .etikett.rot { background:#fee2e2; color:#7f1d1d; }
select.wahl-ja { background:#dcfce7; color:#14532d; } select.wahl-nein { background:#fef3c7; color:#78350f; }
td.bsl-adresse { background:#fee2e2; } .etikett.gelb { background:#fef3c7; color:#78350f; } .etikett.grau { background:#e5e7eb; color:#374151; }
.seiten { display:flex; gap:1rem; align-items:center; margin:1rem 0; color:var(--gedaempft); }
@media (max-width: 760px) {
  table.liste thead { display:none; }
  table.liste, .liste tbody, .liste tr, .liste td { display:block; width:100%; }
  .liste tr { border-bottom:1px solid var(--linie); padding:.6rem .75rem; }
  .liste td { border:0; padding:.1rem 0; display:flex; justify-content:space-between; gap:1rem; text-align:right; }
  .liste td::before { content:attr(data-label); font-size:.85rem; color:var(--gedaempft); text-align:left; }
  .liste td[data-label="Name"] { font-size:1.05rem; }
}

/* Beratung erfassen */
form.beratung .karte { margin-bottom: 1rem; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .75rem 1.25rem; }
.feld { display: flex; flex-direction: column; gap: .25rem; margin: .5rem 0; }
.feld.haken { flex-direction: row; align-items: center; gap: .5rem; }
.feld input[type=date], .feld textarea { font: inherit; padding: .5rem; border: 1px solid #c9ced6; border-radius: 6px; }
.euro { position: relative; display: block; max-width: 22rem; }
.euro input.betrag { width: 100%; max-width: none; box-sizing: border-box; text-align: right; padding: .5rem 1.8rem .5rem .5rem; font: inherit; border: 1px solid #c9ced6; border-radius: 6px; }
.euro::after { content: "€"; position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); color: #667; }
table.summen { width: 100%; max-width: 34rem; border-collapse: collapse; margin: .75rem 0; }
table.summen td { padding: .3rem 0; border-bottom: 1px solid #eef0f3; }
table.summen .z, table.liste .z { text-align: right; white-space: nowrap; }
table.summen tr.summe td { font-weight: 700; border-top: 2px solid #1f2933; border-bottom: none; }
.knoepfe { display: flex; gap: .75rem; justify-content: flex-end; flex-wrap: wrap; margin: 1rem 0; }
.knoepfe.links { justify-content: flex-start; }
.knopf.zweit, button.zweit { background: #fff; color: #1f2933; border: 1px solid #c9ced6; }
button.gefahr { background: #b42318; border-color: #b42318; color: #fff; }
ul.hinweise { color: #3d4a5c; }
.etikett.grau { background: #eef0f3; color: #3d4a5c; }
.etikett.gelb { background: #fff4cc; color: #6b5200; }
.errorlist { color: #b42318; margin: .25rem 0; padding-left: 1rem; }
.meldungen .warning { border-left-color: #c48a00; }

/* Beratung: tabellenartige Zeilen (Bezeichnung | Betrag | €) */
.zeilen { display: grid; grid-template-columns: minmax(10rem, 24rem) 9.5rem 1.2rem; gap: .5rem .6rem; align-items: center; }
.zeilen > label, .zeilen > span:not(.eur) { line-height: 1.3; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.zeilen small { color: #667; }
.zeilen .wert { text-align: right; font-variant-numeric: tabular-nums; }
.zeilen .wert input.betrag, .zeilen .wert input.datum {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; padding: .45rem .6rem;
  border: 1px solid #c9ced6; border-radius: 6px; text-align: right; background: #fff; color: inherit;
}
.zeilen .wert input.datum { text-align: left; min-height: 2.4rem; }
.zeilen .eur { color: #667; }
.zeilen .summe { font-weight: 700; }
.zeilen .trenner { grid-column: 1 / -1; border-top: 2px solid #1f2933; margin: .25rem 0; max-width: 35.3rem; }
.zeilen .zeilenfehler { grid-column: 1 / -1; }
.karte.kommentar { margin-top: 1.75rem; }
.karte.kommentar textarea { width: 100%; box-sizing: border-box; font: inherit; padding: .6rem; border: 1px solid #c9ced6; border-radius: 6px; min-height: 8rem; }
@media (max-width: 40rem) {
  .zeilen { grid-template-columns: minmax(0, 1fr) 7.5rem 1rem; }
}
form .zeilen > div { margin: 0; }
.zeilen .wert.ergebnis { padding-right: .65rem; }
.zeilen .wert.datumzelle { grid-column: 2 / 4; text-align: left; }
.zeilen .wert.datumzelle input.datum { width: auto; min-width: 10.7rem; }

/* Beratung erfassen – Gestaltung wie die campai-Berater-App: zwei Spalten, Bezeichnung über dem
   Feld, €-Zeichen im Feld, Abschnitte mit Trennlinie */
input, select, textarea, button { font-family: inherit; }
input[type=date]::-webkit-datetime-edit,
input[type=date]::-webkit-datetime-edit-fields-wrapper { font-family: inherit; font-size: inherit; }
.karte.erfassung { padding: 1.5rem 1.75rem; }
.zweispaltig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.eingabefeld { display: flex; flex-direction: column; gap: .35rem; margin: 0; min-width: 0; }
form .eingabefeld, form .zweispaltig, form .betragsbox { margin: 0; }
.eingabefeld > label, .eingabefeld > .bezeichnung { font-weight: 600; font-size: 1rem; color: var(--text); }
.eingabefeld small { font-weight: 400; color: var(--gedaempft); }
.pflicht { color: var(--fehler); }
.betragsbox { position: relative; display: flex; align-items: center; min-height: 3rem;
  border: 1px solid var(--linie); border-radius: 8px; background: #fff; }
.betragsbox:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(29,79,145,.12); }
.betragsbox input.betrag { flex: 1 1 auto; min-width: 0; width: 100%; max-width: none; border: 0; outline: none;
  background: transparent; font: inherit; font-size: 1.05rem; padding: .7rem 2.6rem .7rem 1rem; text-align: left; }
.betragsbox > span:first-child { flex: 1 1 auto; padding: .7rem 2.6rem .7rem 1rem; font-size: 1.05rem; }
.betragsbox .eur { position: absolute; right: 1rem; color: #8a929c; pointer-events: none; }
.betragsbox.nurlesen { background: var(--flaeche); color: #6b737d; }
.betragsbox.nurlesen.summe { color: var(--text); font-weight: 700; }
.eingabefeld input.datum { width: 100%; min-height: 3rem; font: inherit; font-size: 1.05rem; padding: .6rem 1rem;
  border: 1px solid var(--linie); border-radius: 8px; background: #fff; color: var(--text); }
h3.abschnitt { font-size: .85rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--gedaempft);
  margin: 1.5rem 0 .75rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.karte.erfassung textarea { width: 100%; min-height: 9rem; font: inherit; font-size: 1.05rem; padding: .75rem 1rem;
  border: 1px solid var(--linie); border-radius: 8px; }
.hinweis.klein { font-size: .9rem; margin: .1rem 0 0; min-height: 1.2em; }
@media (max-width: 44rem) {
  .zweispaltig { grid-template-columns: minmax(0, 1fr); }
  .karte.erfassung { padding: 1.1rem; }
}
.eingabefeld select.auswahl { width: 100%; min-height: 3rem; font: inherit; font-size: 1.05rem; padding: .6rem 1rem;
  border: 1px solid var(--linie); border-radius: 8px; background: #fff; color: var(--text); }
.filterknoepfe { display:flex; gap:.5rem; align-items:center; }
table.liste th a { color:inherit; text-decoration:none; white-space:nowrap; }
table.liste th a:hover { text-decoration:underline; }
.filterfelder input, .filterfelder select { height:2.4rem; box-sizing:border-box; }
.nur-schmal { display:none; }
@media (max-width: 760px) { .suchleiste .nur-schmal { display:block; } }
/* Mitglied anlegen: Textfelder wie die Beitragsfelder */
.eingabefeld input[type=text], .eingabefeld input[type=email] { width: 100%; min-height: 3rem; font: inherit;
  font-size: 1.05rem; padding: .6rem 1rem; border: 1px solid var(--linie); border-radius: 8px; background: #fff; box-sizing: border-box; }
.eingabefeld input[type=text]:focus, .eingabefeld input[type=email]:focus { border-color: var(--akzent); outline: none; box-shadow: 0 0 0 3px rgba(29,79,145,.12); }
.karte.erfassung label.haken { display: flex; gap: .6rem; align-items: flex-start; margin: .75rem 0 .25rem; font-weight: 400; }
.karte.erfassung label.haken input { margin-top: .3rem; }
.eingabefeld input[type=text], .eingabefeld input[type=email] { max-width: none; }
.karte.erfassung > h3.abschnitt:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
/* Schnellerfassung: drei Spalten, damit ein Formular auf einen Bildschirm passt */
.dreispaltig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem 1.25rem; }
/* Mitglied anlegen: Geschlecht, Titel, Vorname, Nachname in einer Zeile (Vorstand 30.10.2026) */
.namenszeile { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, 1.5fr) minmax(0, 1.5fr); gap: .9rem 1rem; margin-bottom: 1rem; }
@media (max-width: 44rem) { .namenszeile { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 60rem) { .dreispaltig { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 44rem) { .dreispaltig { grid-template-columns: minmax(0, 1fr); } }
#schnell .karte.erfassung textarea { min-height: 4rem; }
/* Anmeldung: Bezeichnungen links, Felder bündig in einer Spalte */
.anmeldeformular form p { display: grid; grid-template-columns: 9rem minmax(0, 24rem) auto; align-items: center;
  column-gap: 1rem; margin: 0 0 .9rem; }
.anmeldeformular form p input { max-width: none; }
.anmeldeformular form p .helptext { font-size: .9rem; }
.anmeldeformular form p ul.errorlist { grid-column: 2 / -1; margin: .3rem 0 0; }
.anmeldeformular form button { margin-left: 10rem; }
@media (max-width: 40rem) {
  .anmeldeformular form p { grid-template-columns: minmax(0, 1fr); row-gap: .3rem; }
  .anmeldeformular form p ul.errorlist { grid-column: 1; }
  .anmeldeformular form button { margin-left: 0; }
}
/* Dokumente */
.upload { display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:flex-end; margin-top:1rem; }
.upload label { display:flex; flex-direction:column; gap:.25rem; font-weight:600; }
.upload input[type=file] { font: inherit; }
.upload select { font: inherit; min-height: 2.6rem; padding: .4rem .75rem; border: 1px solid var(--linie);
  border-radius: 8px; background: #fff; color: var(--text); font-weight: 400; }
.nachweis-upload { margin-top:.35rem; }
.nachweis-upload summary { cursor:pointer; color:var(--akzent); }
.nachweis-upload .upload { flex-direction:column; align-items:stretch; margin-top:.5rem; gap:.5rem; max-width:15rem; }
.nachweis-upload .upload select, .nachweis-upload .upload input[type=file] { width:100%; max-width:15rem; font-size:.9rem; }
form.inline { display:inline; margin:0; }
button.klein { padding:.25rem .6rem; font-size:.85rem; }
.liste td.nowrap { white-space: nowrap; }
.beanstandung + .beanstandung { border-top: 1px solid var(--linie); margin-top: 1rem; padding-top: .5rem; }
.fuss { max-width: 72rem; margin: 1rem auto 1.5rem; padding: 0 1.25rem; color: var(--gedaempft); font-size: .8rem; }
.karte.stammdaten .titelzeile { margin-bottom: .25rem; }
.karte.stammdaten h2 { margin: 0; }
dl.angaben { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .5rem 1.5rem; margin: .5rem 0 0; }
dl.angaben dt { color: var(--gedaempft); font-size: .85rem; }
dl.angaben dd { margin: 0; }
.knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }
.karte.ausweis-hinweis { border-left: 4px solid var(--ok); }
.karte.ausweis-hinweis h2 { margin: 0 0 .25rem; }
.karte.ausweis-hinweis .hinweis { margin-bottom: 0; max-width: 40rem; }
/* Zentrale: klickbare Kacheln und Wegweiser */
a.kachel { position: relative; display: block; color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.kachel:hover, a.kachel:focus-visible { border-color: var(--akzent); box-shadow: 0 2px 10px rgba(29,79,145,.10); outline: none; }
a.kachel .pfeil { position: absolute; right: 1.25rem; top: 1rem; color: var(--akzent); font-size: 1.3rem; }
ul.wege { list-style: none; padding: 0; margin: 1.5rem 0; background: #fff; border: 1px solid var(--linie); border-radius: 8px; }
ul.wege li + li { border-top: 1px solid var(--linie); }
ul.wege a { display: grid; grid-template-columns: 19rem minmax(0, 1fr) auto; align-items: baseline; gap: .25rem 1rem; padding: .9rem 1.25rem; color: var(--text); text-decoration: none; }
ul.wege a:hover, ul.wege a:focus-visible { background: #f8fafc; outline: none; }
ul.wege a strong { grid-column: 1; color: var(--akzent); font-weight: 600; }
ul.wege a span:not(.etikett) { grid-column: 2; color: var(--gedaempft); }
ul.wege a .etikett { grid-column: 2; justify-self: start; }
ul.wege a::after { content: "→"; grid-column: 3; grid-row: 1; color: var(--akzent); }
@media (max-width: 700px) {
  ul.wege a { grid-template-columns: minmax(0, 1fr) auto; }
  ul.wege a strong, ul.wege a span:not(.etikett), ul.wege a .etikett { grid-column: 1; }
  ul.wege a::after { grid-column: 2; }
}
.zurueck { margin: 0 0 .75rem; }
dl.angaben.breit { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.zahlenreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.zahlenreihe .karte { margin: 0; }
.zahlenreihe.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zahlenreihe.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
@media (max-width: 700px) { .zahlenreihe.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zahlenreihe .zahl { font-size: 1.6rem; }
.zahlenreihe small { display: block; color: var(--gedaempft); }
table.liste td.leise, .leise { color: var(--gedaempft); }
.bestaetigen { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; }
.bestaetigen label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; }
.bestaetigen input[type=number] { font: inherit; padding: .55rem .7rem; border: 1px solid var(--linie); border-radius: 6px; width: 10rem; }
.eingabefeld input[type=number], .eingabefeld input[type=search] { width: 100%; min-height: 3rem; font: inherit; font-size: 1.05rem;
  padding: .6rem 1rem; border: 1px solid var(--linie); border-radius: 8px; background: #fff; box-sizing: border-box; }
.eingabefeld input:disabled { background: var(--flaeche); color: var(--gedaempft); }
.suchleiste label.haken { display: flex; gap: .4rem; align-items: center; }
.karte table.liste + p, .karte table.liste + form { margin-top: 1rem; }
.probeband { background:#b45309; color:#fff; text-align:center; font-weight:600; padding:.4rem 1rem; letter-spacing:.02em; }
.probeband a { color:#fff; text-decoration:underline; }

/* Schrift Carlito (SIL OFL, static/fonts/carlito) – unabhängig von installierten Systemschriften */
@font-face { font-family:"Carlito"; src:url("../fonts/carlito/Carlito-Regular.f474e3f5ae87.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Carlito"; src:url("../fonts/carlito/Carlito-Bold.b32e68890464.ttf") format("truetype"); font-weight:600 700; font-style:normal; font-display:swap; }
@font-face { font-family:"Carlito"; src:url("../fonts/carlito/Carlito-Italic.29e88ddd27fd.ttf") format("truetype"); font-weight:400; font-style:italic; font-display:swap; }
/* Oberfläche „frisch“ (08.11.2026): Blau-Türkis-Verlauf, runde weiße Karten mit weichem Schatten.
   Steht bewusst am Ende und überschreibt die schlichte Übergangsgestaltung weiter oben. */
:root { --text:#0f2a3d; --gedaempft:#5b7083; --linie:#e1ebf3; --flaeche:#f3f8fd; --akzent:#2563eb; --akzent2:#0ea5a4;
  --verlauf:linear-gradient(135deg,#2563eb,#0ea5a4); --schatten:0 8px 28px rgba(30,64,120,.08); --ok:#16a34a; --fehler:#dc2626; }
html { min-height:100%; }
body { min-height:100vh; background:linear-gradient(160deg,#eef5ff 0%,#eaf8f7 55%,#f6fbff 100%);
  font-family:Carlito, Calibri, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size:18px; }
h1 { font-size:1.9rem; font-weight:700; }
.hinweis { color:var(--gedaempft); }
.kopf { background:linear-gradient(100deg,#2563eb,#0ea5a4); border:0; color:#fff; padding:.9rem 1.5rem; box-shadow:0 6px 24px rgba(37,99,235,.25); }
.marke, .kopf nav a, .wer, .kopf .link { color:#fff; }
.marke { font-size:1.15rem; letter-spacing:.01em; } .marke span { color:#c8fff9; font-weight:500; }
.wer { opacity:.85; }
.kopf nav a, .kopf .link { text-decoration:none; }
.kopf nav a:hover, .kopf .link:hover { text-decoration:underline; }
.kopf .link { background:rgba(255,255,255,.18); padding:.3rem .8rem; border-radius:999px; }
.karte { border:0; border-radius:18px; box-shadow:var(--schatten); }
.meldungen li { border-radius:12px; box-shadow:var(--schatten); }
/* Zentrale: Kacheln mit Symbol, Wegweiser */
a.kachel { padding:1.25rem 1.5rem 1.25rem 5rem; }
a.kachel:hover, a.kachel:focus-visible { transform:translateY(-3px); box-shadow:0 14px 34px rgba(37,99,235,.18); }
a.kachel .ico { position:absolute; left:1.25rem; top:50%; transform:translateY(-50%); width:3rem; height:3rem; border-radius:14px;
  display:grid; place-items:center; color:#fff; background:var(--verlauf); }
a.kachel .ico svg { width:1.5rem; height:1.5rem; }
a.kachel .zahl { font-size:2.3rem; line-height:1.1; background:var(--verlauf); -webkit-background-clip:text; background-clip:text; color:transparent; }
ul.wege { border:0; border-radius:18px; box-shadow:var(--schatten); overflow:hidden; }
ul.wege li + li { border-color:#eef3f8; }
ul.wege a:hover, ul.wege a:focus-visible { background:linear-gradient(90deg,#eff6ff,#effcfb); }
ul.wege a strong { color:#1d4ed8; }
/* Knöpfe */
button, input[type=submit], .knopf { background:var(--verlauf); border:0; border-radius:12px; padding:.65rem 1.3rem; font-weight:600; box-shadow:0 6px 16px rgba(37,99,235,.28); }
.knopf.zweit, button.zweit { background:#fff; color:#1d4ed8; box-shadow:inset 0 0 0 1.5px #bfd4fb; }
.knopf.deaktiviert { background:#c9d2de; color:#4b5563; box-shadow:none; }
button.gefahr { background:var(--fehler); box-shadow:0 6px 16px rgba(220,38,38,.25); }
button.klein { padding:.25rem .7rem; border-radius:10px; box-shadow:none; }
.kopf .link { box-shadow:none; }
.link { background:none; box-shadow:none; padding:0; border-radius:0; font-weight:400; color:var(--akzent); }
/* Tabellen */
table.liste { border:0; border-radius:18px; box-shadow:var(--schatten); border-collapse:separate; border-spacing:0; overflow:hidden; }
.liste th { background:#eaf2fe; color:#35557a; border:0; }
.liste td { border-color:#eef3f8; }
.liste tbody tr:hover td { background:#f4f9ff; }
.etikett { font-weight:600; padding:.12rem .7rem; }
.etikett.grau { background:#e8eef6; color:#3b5068; } .etikett.gelb { background:#fff1c2; color:#7a5a00; }
/* Formulare */
input[type=email], input[type=password], input[type=text], input[type=search], input[type=number],
.suchleiste select, .filterfelder input, .filterfelder select, .eingabefeld select.auswahl, .eingabefeld input.datum,
.eingabefeld input[type=text], .eingabefeld input[type=email], .eingabefeld input[type=number], .eingabefeld input[type=search],
.betragsbox, .karte.erfassung textarea { border-radius:12px; border-color:#d3e0ee; }
.betragsbox:focus-within, .eingabefeld input[type=text]:focus, .eingabefeld input[type=email]:focus
  { border-color:var(--akzent); box-shadow:0 0 0 4px rgba(37,99,235,.15); }
.betragsbox.nurlesen { background:#f1f6fc; } .eingabefeld input:disabled { background:#f1f6fc; }
h3.abschnitt { color:var(--akzent2); font-weight:700; border-color:var(--linie); }
.karte.erfassung { padding:1.75rem 2rem; }
@media (max-width: 44rem) { .karte.erfassung { padding:1.1rem; } a.kachel { padding-left:4.6rem; } }

/* Breite (09.11.2026): Listen und Tabellen nutzen den Bildschirm; Formulare bleiben lesbar schmal. */
.inhalt { max-width:110rem; padding:1.5rem clamp(1rem, 2.5vw, 2.5rem); }
.karte.erfassung { max-width:72rem; }
/* Anmelde- und Kontoseiten (allauth): schmale Spalte */
.inhalt.schmal { max-width:46rem; }
/* Fußzeile bündig mit dem Inhalt */
.fuss { max-width:110rem; padding:0 clamp(1rem, 2.5vw, 2.5rem); }
.inhalt.schmal ~ .fuss { max-width:46rem; }
/* E-Mail-Adressen in Tabellen einzeilig: Die Spalte darf nicht schmaler werden als die Adresse
   (overflow-wrap:anywhere hätte sie auf ein Zeichen Breite zusammengedrückt). Nur auf dem Handy umbrechen. */
.adresse { white-space:nowrap; }
/* Tabellen kompakter: etwas kleinere Schrift, Etiketten und Aufklapper einzeilig */
table.liste { font-size:.92rem; }
.liste td { padding:.5rem .65rem; }
.liste .etikett { white-space:nowrap; }
.liste details > summary { white-space:nowrap; font-size:.85rem; color:var(--akzent); cursor:pointer; margin-top:.2rem; }
@media (max-width: 760px) { .adresse { white-space:normal; overflow-wrap:anywhere; } }

/* ---- Aufräumen 11.11.2026 ------------------------------------------------------------------- */
/* Titelleiste: Vereinslogo und Name der Anwendung */
.marke { display:inline-flex; align-items:center; gap:.8rem; }
.marke img { height:41px; width:auto; display:block; }
.marke .portal { color:#fff; font-size:1.2rem; font-weight:700; padding-left:.8rem; border-left:1px solid rgba(255,255,255,.45); line-height:1.1; }
@media (max-width: 44rem) { .marke img { height:32px; } .marke .portal { font-size:1rem; } }

/* Auswahlfelder einheitlich: eigener Pfeil, runde Ecken, Fokusring */
select:not([multiple]), input[type=month], input[type=date] {
  -webkit-appearance:none; appearance:none; font:inherit; font-size:.95rem; color:var(--text);
  background-color:#fff; border:1.5px solid #d3e0ee; border-radius:12px; padding:.5rem .85rem; min-height:2.6rem;
  box-shadow:0 1px 2px rgba(30,64,120,.05); cursor:pointer; transition:border-color .15s, box-shadow .15s; }
select:not([multiple]) { padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .7rem center; background-size:1.1rem; }
select:not([multiple]):hover, input[type=month]:hover, input[type=date]:hover { border-color:#9ec0f5; }
select:focus, input[type=month]:focus, input[type=date]:focus { outline:none; border-color:var(--akzent); box-shadow:0 0 0 4px rgba(37,99,235,.15); }
/* klein in Tabellen (z. B. Nachweis Ja/Nein) */
.liste select:not([multiple]) { min-height:2rem; padding:.15rem 2rem .15rem .7rem; font-size:.85rem; border-radius:999px;
  background-position:right .5rem center; background-size:.95rem; }
select.wahl-ja { background-color:#e7f8ee; border-color:#a7e3bf; color:#166534; font-weight:600; }
select.wahl-nein { background-color:#fff7e0; border-color:#f3d38a; color:#7a5a00; font-weight:600; }

/* Datei-Upload */
input[type=file] { font:inherit; font-size:.9rem; color:var(--gedaempft); border:1.5px dashed #9ec0f5; background:#f4f9ff;
  border-radius:14px; padding:.6rem .8rem; max-width:100%; box-sizing:border-box; cursor:pointer; }
input[type=file]::file-selector-button { font:inherit; font-weight:600; font-size:.9rem; color:#1d4ed8; background:#fff; border:0;
  box-shadow:inset 0 0 0 1.5px #bfd4fb; border-radius:10px; padding:.45rem 1rem; margin-right:.9rem; cursor:pointer; }
input[type=file]:hover::file-selector-button { background:#eff6ff; }

/* Filter-Haken in Such- und Filterleisten als Schalter */
.suchleiste label.haken input[type=checkbox], .filterleiste label.haken input[type=checkbox], label.schalter input[type=checkbox] {
  -webkit-appearance:none; appearance:none; width:2.6rem; height:1.5rem; border-radius:999px; background:#cbd5e1; position:relative;
  cursor:pointer; transition:background .15s; margin:0; flex:none; }
.suchleiste label.haken input[type=checkbox]::after, .filterleiste label.haken input[type=checkbox]::after, label.schalter input[type=checkbox]::after {
  content:""; position:absolute; top:.2rem; left:.2rem; width:1.1rem; height:1.1rem; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s; }
.suchleiste label.haken input[type=checkbox]:checked, .filterleiste label.haken input[type=checkbox]:checked, label.schalter input[type=checkbox]:checked { background:var(--verlauf); }
.suchleiste label.haken input[type=checkbox]:checked::after, .filterleiste label.haken input[type=checkbox]:checked::after, label.schalter input[type=checkbox]:checked::after { transform:translateX(1.1rem); }
.suchleiste label.haken input:focus-visible, label.schalter input:focus-visible { outline:3px solid rgba(37,99,235,.35); outline-offset:2px; }
label.schalter { display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; }

/* Segment-Umschalter (z. B. aktiv / inaktiv / alle) */
.segment { display:inline-flex; background:#fff; border-radius:12px; padding:.25rem; box-shadow:var(--schatten); gap:.2rem; }
.segment a { padding:.4rem .95rem; border-radius:9px; text-decoration:none; color:#35557a; font-weight:600; font-size:.9rem; }
.segment a:hover { background:#eff6ff; }
.segment a.an, .segment a[aria-current] { background:var(--verlauf); color:#fff; }

/* Monat blättern */
.monatsblaettern { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin:.5rem 0 1rem; }
.monat-wahl { display:inline-flex; align-items:center; background:#fff; border-radius:14px; box-shadow:var(--schatten); overflow:hidden; }
.monat-wahl a.pfeil-monat { display:grid; place-items:center; width:2.6rem; height:2.9rem; color:var(--akzent); text-decoration:none; font-size:1.35rem; }
.monat-wahl a.pfeil-monat:hover { background:#eff6ff; }
.monat-wahl label { position:relative; display:block; min-width:10.5rem; text-align:center; padding:.35rem .6rem; cursor:pointer;
  border-left:1px solid #eef3f8; border-right:1px solid #eef3f8; }
.monat-wahl label b { display:block; font-size:1.05rem; } .monat-wahl label small { display:block; font-size:.72rem; color:var(--gedaempft); }
.monat-wahl input[type=month] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; min-height:0; border:0; padding:0; }

/* Freigabe in der Prüfung der BSL-Abrechnung */
.freigabe { display:flex; align-items:center; gap:.4rem; white-space:nowrap; }
.freigabe form { display:inline; margin:0; }
.pill { display:inline-flex; align-items:center; gap:.35rem; font-weight:700; font-size:.82rem; padding:.2rem .7rem; border-radius:999px; white-space:nowrap; }
.pill.ok { background:#dcfce7; color:#166534; } .pill.halt { background:#fff1c2; color:#7a5a00; }
button.knopf-text, a.knopf-text { background:none; box-shadow:none; color:#64748b; font-weight:600; font-size:.82rem; padding:.2rem .5rem; border-radius:8px; border:0; cursor:pointer; text-decoration:none; }
button.knopf-text:hover, a.knopf-text:hover, button.knopf-text[aria-expanded=true] { background:#fef3c7; color:#7a5a00; }
.freigabe-notiz { font-size:.78rem; color:#7a5a00; white-space:normal; max-width:18rem; margin-top:.2rem; }
tr.notizzeile td { background:#fffbeb !important; border-top:0; }
.notizform { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.notizform .frage { font-weight:600; color:#7a5a00; white-space:nowrap; }
.notizform input[type=text] { flex:1; min-width:14rem; border:1.5px solid #f3d38a; border-radius:10px; padding:.45rem .7rem; font:inherit; font-size:.9rem; }
.notizform input[type=text]:focus { outline:none; border-color:#eab308; box-shadow:0 0 0 3px rgba(234,179,8,.2); }
.notizform button { padding:.4rem 1rem; font-size:.85rem; }

/* Erfassung Abrechnungen/Anträge: Suchfeld nicht über die ganze Breite */
.ladeleiste { max-width:48rem; }

/* BSL-Abrechnung (12.11.2026): Zahlen und Knöpfe in einer Zeile; BSL-Karten mit Pfeil rechts im Kreis
   und „Entwurf erstellen“ in der Kopfzeile. Ein Knopf im summary klappt die Karte nicht um. */
.aktionszeile { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem 1.5rem; margin:.5rem 0 1rem; }
.aktionszeile > p { margin:0; }
.aktionszeile .knoepfe { display:flex; flex-wrap:wrap; gap:.6rem; }
.aktionszeile .knoepfe form { margin:0; }
.aktionszeile > p.hinweis strong { color:var(--text); }
p.hinweis.stand { margin:1.25rem 0 0; }
details.bsl-block { padding:0 1.25rem; margin:.75rem 0; }
details.bsl-block[open] { padding-bottom:1rem; }
details.bsl-block > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:1rem; margin:0 -1.25rem; padding:.9rem 1.25rem; border-radius:18px; }
details.bsl-block > summary::-webkit-details-marker { display:none; }
details.bsl-block > summary:hover { background:#f7fbff; }
details.bsl-block > summary:focus-visible { outline:none; box-shadow:0 0 0 4px rgba(37,99,235,.15); }
details.bsl-block > summary .titel { flex:1; min-width:0; }
details.bsl-block > summary .zahlen { color:var(--gedaempft); }
details.bsl-block > summary form { margin:0; }
details.bsl-block > summary button.klein { padding:.4rem .95rem; }
.aufklappen { flex:none; width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center; background:#eaf2fe; color:var(--akzent); transition:transform .2s; }
details.bsl-block[open] > summary .aufklappen { transform:rotate(180deg); }
@media (max-width: 44rem) { details.bsl-block > summary { flex-wrap:wrap; } .aktionszeile .knoepfe { width:100%; } }

/* Filterzeile mit Monatswahl (12.11.2026): Schalter mittig zur Monatswahl, mehr Abstand zwischen den Elementen */
.suchleiste .monatsblaettern, .monatsblaettern .monat-wahl { margin:0; }  /* „form div“ gibt sonst unten Rand */
.suchleiste .monatsblaettern + label.haken { margin-left:1.5rem; }
.suchleiste label.haken + label.haken { margin-left:2rem; }
.suchleiste label.haken { gap:.65rem; }

/* BSL-Abrechnung (12.11.2026): Ja/Nein bei Nachweis (Auswahl) und Konto ausgeglichen (Etikett) gleich groß
   und gleichfarbig; Begründung „Zurückhalten“ rechtsbündig unter der Freigabe */
.liste .etikett.gruen, .liste .etikett.gelb { display:inline-flex; align-items:center; box-sizing:border-box; min-height:2rem;
  padding:.15rem .8rem; font-size:.85rem; font-weight:600; border:1px solid; border-radius:999px; line-height:1.2; }
.liste .etikett.gruen, .liste select.wahl-ja { background-color:#e7f8ee; border-color:#a7e3bf; color:#166534; }
.liste .etikett.gelb, .liste select.wahl-nein { background-color:#fff7e0; border-color:#f3d38a; color:#7a5a00; }
.liste select.wahl-ja, .liste select.wahl-nein { border-width:1px; border-style:solid; box-sizing:border-box; line-height:1.2; }
.notizform { justify-content:flex-end; }
.notizform input[type=text] { flex:0 1 28rem; }
td[data-label="Nachweis"] > small { display:block; margin-top:.3rem; line-height:1.3; }

/* Seite der BSL (13.11.2026): Steuernummer beginnt die zweite Zeile, links neben der USt-IdNr. */
dl.angaben > .neue-zeile { grid-column-start:1; }
form.karte.schmal { max-width:46rem; }
.zugaenge td form { margin:0; }

/* Seite der BSL (13.11.2026): „fehlt“ links, „abweichend“ mit Knopf als eigener, abgesetzter Teil */
.meldungen li.campai-meldung { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 2rem; }
.campai-meldung .abweichend { display:inline-flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem;
  padding:.35rem .45rem .35rem .9rem; background:#fff7e0; border:1px solid #f3d38a; border-radius:10px; color:#5c4300; }
.campai-meldung .abweichend form { margin:0; }

/* Anmeldeseite (13.11.2026): Luft um „Konto erstellen“ */
p.konto-erstellen { margin-top:1.75rem; display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem; }

/* Neues Beitragsjahr (15.11.2026): Schrittleiste, Schritte zum Aufklappen, Kennzahlzeile, Prüfliste */
ol.schrittleiste { list-style:none; padding:0; margin:1rem 0 1.25rem; display:grid; grid-template-columns:repeat(auto-fit, minmax(10.5rem, 1fr)); gap:.6rem; }
ol.schrittleiste a { display:grid; grid-template-columns:auto 1fr; column-gap:.6rem; align-items:center; height:100%; box-sizing:border-box;
  padding:.6rem .8rem; border-radius:12px; background:#fff; border:1px solid var(--linie); color:var(--text); text-decoration:none; }
ol.schrittleiste a strong { font-size:.95rem; }
ol.schrittleiste a small { grid-column:2; color:var(--gedaempft); font-size:.82rem; line-height:1.3; }
ol.schrittleiste .nr, details.schritt .nr { display:inline-grid; place-items:center; width:1.6rem; height:1.6rem; border-radius:50%;
  font-size:.85rem; font-weight:700; background:#e8eef6; color:#3b5068; grid-row:span 2; }
ol.schrittleiste li.erledigt .nr, details.schritt.erledigt .nr { background:#dcfce7; color:#14532d; }
ol.schrittleiste li.aktiv .nr, details.schritt.aktiv .nr { background:var(--akzent); color:#fff; }
ol.schrittleiste li.achtung .nr, details.schritt.achtung .nr { background:#fee2e2; color:#7f1d1d; }
ol.schrittleiste li.spaeter a { color:var(--gedaempft); background:transparent; }
ol.schrittleiste li.offen a { border-color:var(--akzent); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
ol.schrittleiste a:hover, ol.schrittleiste a:focus-visible { border-color:var(--akzent); outline:none; }
details.schritt { background:#fff; border-radius:18px; box-shadow:var(--schatten, none); border:1px solid var(--linie); margin:0 0 .75rem; padding:0 1.25rem; }
details.schritt > summary { cursor:pointer; list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .7rem; padding:.85rem 0; font-weight:600; font-size:1.05rem; }
details.schritt > summary::-webkit-details-marker { display:none; }
details.schritt > summary::after { content:"▸"; margin-left:auto; color:var(--gedaempft); }
details.schritt[open] > summary::after { content:"▾"; }
details.schritt > summary small { font-weight:400; color:var(--gedaempft); font-size:.9rem; }
details.schritt[open] { padding-bottom:1rem; }
details.schritt.spaeter > summary { color:var(--gedaempft); }
p.kennzahlen { margin:.25rem 0 .75rem; line-height:1.5; }
p.kennzahlen strong { font-size:1.15rem; }
ul.pruefliste { list-style:none; padding:0; margin:.5rem 0 .75rem; }
ul.pruefliste li { position:relative; padding:.3rem 0 .3rem 1.6rem; line-height:1.4; }
ul.pruefliste li::before { position:absolute; left:0; top:.3rem; width:1.2rem; text-align:center; font-weight:700; }
ul.pruefliste li.ok::before { content:"✓"; color:var(--ok); }
ul.pruefliste li.warn::before { content:"!"; color:#b45309; }
ul.pruefliste li.warn { background:#fff8e1; border-radius:8px; padding-right:.6rem; }
ul.pruefliste li.info::before { content:"i"; color:var(--akzent); font-style:italic; }
details.mehr { margin:.35rem 0; }
details.mehr > summary { cursor:pointer; color:var(--akzent); }
details.mehr[open] > summary { margin-bottom:.5rem; }
ul.laeufe { margin:.25rem 0 .75rem; padding-left:1.1rem; color:var(--gedaempft); }
.aktion { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem 1.25rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--linie); }
.aktion > form, .aktion > p { margin:0; }
.bestaetigen.zeile label { flex-direction:row; align-items:center; gap:.6rem; font-weight:400; }
.bestaetigen.zeile input[type=number] { width:8rem; }
.bestaetigen.druck { flex-direction:column; align-items:flex-start; }
.bestaetigen.druck details.mehr label { margin:.4rem 0; font-weight:400; }
.bestaetigen.druck label.haken { flex-direction:row; align-items:center; gap:.5rem; }
@media (max-width: 700px) {
  ol.schrittleiste { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  ol.schrittleiste a small { display:none; }  /* der Stand steht in der Zeile des Schritts */
  ol.schrittleiste a { padding:.5rem .6rem; }
  details.schritt { padding:0 .9rem; }
  .bestaetigen.zeile label { flex-direction:column; align-items:flex-start; }
}

/* Neues Beitragsjahr, Runde 2 (15.11.2026): Kacheln, Stand der Kopie mit Knopf, Reiter; volle Breite */
.kacheln { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.75rem; margin:.5rem 0 1rem; }
@media (max-width: 900px) { .kacheln { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.kacheln .kachel { background:var(--flaeche); border:1px solid var(--linie); border-radius:14px; padding:.75rem 1rem; display:flex; flex-direction:column; gap:.15rem; }
.kacheln .kachel small { color:var(--gedaempft); font-size:.85rem; }
.kacheln .kachel .zahl { font-size:1.6rem; font-weight:700; line-height:1.2; }
.kacheln .kachel .unter { color:var(--gedaempft); font-size:.85rem; }
.kacheln .kachel .zwei { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.kacheln .kachel.warn { background:#fff8e1; border-color:#f3d38a; }
.datenstand { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1.25rem; padding:.6rem .9rem;
  border:1px solid var(--linie); border-radius:12px; margin:.5rem 0 .75rem; }
.datenstand p { margin:0; flex:1 1 30rem; }
.datenstand .klein { display:block; color:var(--gedaempft); font-size:.85rem; }
.datenstand form { margin:0; }
.datenstand.warn { background:#fff8e1; border-color:#f3d38a; }
details.mehr.hinweise > summary { font-weight:600; }
.reiter { display:flex; flex-wrap:wrap; gap:.25rem; margin:1.25rem 0 0; border-bottom:1px solid var(--linie); }
.reiter [role=tab] { background:none; box-shadow:none; border:0; border-bottom:3px solid transparent; border-radius:0; color:var(--gedaempft);
  padding:.55rem .9rem; font-weight:600; cursor:pointer; }
.reiter [role=tab][aria-selected=true] { color:var(--akzent); border-bottom-color:var(--akzent); }
.reiter [role=tab]:hover { color:var(--akzent); }
.reiterfeld { padding-top:.75rem; }