/* Büro — eigene Stile, keine externen Schriften (Systemschrift). Kontraste WCAG AA, Schrift ≥ 16 px. */
:root { --text: #1a1a1a; --leise: #4a4a4a; --flaeche: #ffffff; --linie: #c8c8c8; --haupt: #0b4f8a; --haupt-text: #ffffff;
        --warn: #8a1c1c; --gut: #1d5e2f; --hinweis: #fff6d6; --fokus: #ffbf47; }
* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
       font-size: 1rem; line-height: 1.5; color: var(--text); background: #f4f4f2; }
a { color: var(--haupt); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--fokus); outline-offset: 2px; }
.kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem;
        padding: .75rem 1rem; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.marke { font-weight: 700; font-size: 1.25rem; text-decoration: none; color: var(--text); }
nav { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
nav a { padding: .5rem; min-height: 44px; display: inline-flex; align-items: center; }
nav a[aria-current="page"] { font-weight: 700; text-decoration: none; border-bottom: 3px solid var(--haupt); }
main { max-width: 52rem; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.5rem; margin: .5rem 0 1rem; } h2 { font-size: 1.2rem; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 1rem; margin: 1rem 0; }
label { display: block; margin: .75rem 0 .25rem; font-weight: 600; }
p.feldtitel { font-weight: 600; margin: .75rem 0 .25rem; }
label.schalter { font-weight: 400; display: flex; gap: .5rem; align-items: center; min-height: 44px; margin: .25rem 0; }
input, select, textarea { font: inherit; font-size: 1rem; width: 100%; padding: .6rem; border: 1px solid #767676; border-radius: 6px;
  background: #fff; color: var(--text); min-height: 44px; }
input[type="checkbox"], input[type="radio"] { width: 1.4rem; height: 1.4rem; min-height: 0; }
fieldset { border: 0; padding: 0; margin: 0 0 1rem; } legend { font-weight: 700; font-size: 1.1rem; margin-bottom: .25rem; }
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .6rem 1rem; font: inherit;
  font-size: 1rem; border: 1px solid var(--haupt); border-radius: 6px; background: #fff; color: var(--haupt); cursor: pointer;
  text-decoration: none; margin: .25rem .25rem .25rem 0; }
.knopf.haupt { background: var(--haupt); color: var(--haupt-text); font-weight: 700; }
.knopf.warn { border-color: var(--warn); color: var(--warn); }
.knopf.leise { border-color: var(--linie); color: var(--text); }
form.inline { display: inline; }
.filter { display: grid; grid-template-columns: 1fr; gap: .25rem; align-items: end; }
@media (min-width: 700px) { .filter { grid-template-columns: auto 1fr auto 1fr auto; gap: .5rem; } .filter label { margin: 0; } }
.liste { list-style: none; padding: 0; margin: 1rem 0; }
.eintrag { display: grid; grid-template-columns: 1fr auto; gap: .1rem .75rem; padding: .85rem 1rem; margin-bottom: .5rem;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; text-decoration: none; color: var(--text); }
.eintrag .art { font-weight: 700; } .eintrag .betrag { font-weight: 700; text-align: right; }
.eintrag .betreff { grid-column: 1 / -1; } .eintrag .empf, .eintrag .datum { color: var(--leise); }
.eintrag .datum { text-align: right; }
.leer { color: var(--leise); }
.status { color: var(--leise); }
.angaben { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; }
.angaben dt { font-weight: 600; } .angaben dd { margin: 0; } .gross { font-size: 1.3rem; font-weight: 700; }
pre.inhalt { white-space: pre-wrap; font-family: inherit; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 8px; padding: 1rem; }
.aktionen { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0; }
.aktionen form, .aktionen details { margin: 0; }
.aktionen .knopf.haupt { width: 100%; font-size: 1.1rem; min-height: 52px; }
details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; }
.meldung { padding: .75rem 1rem; border-radius: 8px; background: #e7f2ea; border: 1px solid var(--gut); }
.meldung.fehler { background: #fbeaea; border-color: var(--warn); }
.hinweis-gross { background: var(--hinweis); border: 1px solid #8a6d00; }
.warnung { background: #fbeaea; border: 2px solid var(--warn); border-radius: 8px; padding: .75rem 1rem; margin: 1rem 0; }
.hinweis { color: var(--leise); min-height: 1.5em; }
.logo-bild { max-width: 200px; max-height: 90px; display: block; margin: .5rem 0; background: #fff; border: 1px solid var(--linie); }
.sprachwahl { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.sprachwahl a { padding: .5rem; min-height: 44px; display: inline-flex; align-items: center; }
.sprachwahl a[aria-current="true"], .sprachwahl button[aria-pressed="true"] { font-weight: 700; border-bottom: 3px solid var(--haupt); }
.knopf.klein { min-height: 44px; padding: .25rem .6rem; }
[hidden] { display: none !important; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nur-schmal { display: block; }
.nur-breit { display: none; }
@media (min-width: 700px) { .nur-schmal { display: none; } .nur-breit { display: flex; } }
.sprachmenue { position: relative; }
.sprachmenue summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.sprachmenue summary::-webkit-details-marker { display: none; }
.sprachliste { display: flex; flex-direction: column; gap: .25rem; position: absolute; right: 0; z-index: 2; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: .5rem; }
.zweispaltig { display: grid; grid-template-columns: 1fr; gap: 0 .75rem; }
@media (min-width: 700px) { .zweispaltig { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); } }
.suche { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.suche input { flex: 1 1 12rem; }
fieldset.position legend { font-weight: 700; padding: 0 .25rem; }
table.vorschau { width: 100%; border-collapse: collapse; }
table.vorschau th, table.vorschau td { text-align: left; padding: .35rem .25rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
table.vorschau .zahl { text-align: right; white-space: nowrap; }
.marke { display: inline-block; font-weight: 700; padding: .1rem .4rem; border: 1px solid var(--linie); border-radius: 4px; }
.sprachmarke.fehlt { text-decoration: line-through; opacity: .75; }
.bezahlt-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.hinweis-uebersetzung { border-left: 4px solid #8a5a00; }
.tableiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--flaeche); border-top: 1px solid var(--linie); padding-bottom: env(safe-area-inset-bottom); }
.tableiste a { min-height: 56px; display: flex; align-items: center; justify-content: center; text-align: center; padding: .25rem; }
.tableiste a[aria-current="page"] { font-weight: 700; border-top: 3px solid var(--haupt); }
@media (max-width: 699px) { body { padding-bottom: 72px; } }
@media (min-width: 700px) { .tableiste { display: none; } }
.menueliste { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.bezahlt-klappe summary { list-style: none; display: inline-flex; }
.bezahlt-klappe summary::-webkit-details-marker { display: none; }
.bezahlt-klappe[open] summary { margin-bottom: .5rem; }
.morgen h2 { font-size: 1.15rem; margin-top: 0; }
.morgen h3 { font-size: 1rem; margin: .75rem 0 .25rem; }
.kurzliste { margin: 0; padding-left: 1.1rem; }
.kurzliste li { margin: .2rem 0; }
.m-rot { color: #8b1a1a; } .m-gelb { color: #6b4b00; }
.punkt { display: inline-block; font-size: .85rem; padding: .05rem .4rem; margin-left: .25rem; border-radius: 4px; border: 1px solid var(--linie); }
.p-rot { background: #fde8e8; color: #8b1a1a; } .p-gelb { background: #fff4d6; color: #6b4b00; } .p-gruen { background: #e7f5ea; color: #1d5b2a; }
.ampel { margin-top: .75rem; }
.ampel-zeile { margin: 0; }
.ampel-gruende { margin-top: .25rem; }

/* Haftung im Produkt (S1, S3, S4) */
.vor-ok { margin: .5rem 0; font-weight: 600; }
.knopf[disabled] { opacity: .55; cursor: not-allowed; }
.quelle { display: inline-block; font-size: .85rem; padding: 0 .4rem; border-radius: 4px; margin-left: .25rem; }
.quelle-gross { display: inline-block; padding: .3rem .6rem; border-radius: 6px; margin: .25rem 0 .5rem; font-weight: 600; }
.quelle-ki { background: #fff3cd; color: #5c4400; border: 1px solid #b38600; }
.quelle-automat { background: #e8eef6; color: #1d3b5c; border: 1px solid #6b88a8; }