/* Ü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.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; }
.knopf.zweit, button.zweit { background: #fff; color: #1f2933; border: 1px solid #c9ced6; }
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; }
@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; }
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: flex; flex-wrap: wrap; 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 { color: var(--akzent); font-weight: 600; min-width: 16rem; }
ul.wege a span:not(.etikett) { color: var(--gedaempft); flex: 1 1 18rem; }
ul.wege a::after { content: "→"; color: var(--akzent); margin-left: auto; }
.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 .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; }