/* Große, kontrastreiche Oberfläche für ältere Nutzer (iPad/iPhone) */
:root {
  --blau: #1f4e79; --blau-hell: #e8f0f8; --rot: #b3261e; --text: #111; --grau: #555;
  --linie: #d0d7de; --hinter: #fff; --gelb: #fff4cc; --gruen: #e3f4e1;
}
@media (prefers-color-scheme: dark) {
  :root { --blau: #8cb8e8; --blau-hell: #1d2a38; --rot: #ff8a80; --text: #f2f2f2; --grau: #b0b0b0;
          --linie: #3a3f45; --hinter: #121416; --gelb: #3d3418; --gruen: #1d3320; }
}
* { box-sizing: border-box; }
html { font-size: 20px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: -apple-system, system-ui, sans-serif; color: var(--text); background: var(--hinter);
       line-height: 1.4; }
.oben { position: sticky; top: 0; z-index: 2; }
header { display: flex; justify-content: space-between; align-items: center;
         gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--blau); }
header a, header span { color: #fff; text-decoration: none; }
@media (prefers-color-scheme: dark) { header { background: #1f4e79; } }
.marke { font-size: 1.4rem; font-weight: 700; }
.zurueck { font-size: 1.2rem; padding: 8px 0; }
main { max-width: 760px; margin: 0 auto; padding: 16px 16px 48px; }
h1 { font-size: 1.6rem; margin: 8px 0 12px; }
h2 { font-size: 1.2rem; margin: 24px 0 8px; }
a { color: var(--blau); }
small { color: var(--grau); font-size: .8rem; font-weight: 400; }

.knopf { display: inline-block; min-height: 52px; padding: 12px 20px; border: 0; border-radius: 12px;
         background: var(--blau); color: #fff; font: inherit; font-weight: 600; text-align: center;
         text-decoration: none; cursor: pointer; }
@media (prefers-color-scheme: dark) { .knopf { background: #2f6aa3; } }
.knopf.hell { background: var(--blau-hell); color: var(--blau); }
header .knopf.hell { background: #fff; color: #1f4e79; }
.knopf.rot { background: var(--rot); color: #fff; }
.knopf.breit { display: block; width: 100%; margin-top: 16px; }

.suche { display: flex; gap: 8px; margin-bottom: 8px; }
input, select, textarea { font: inherit; color: var(--text); background: var(--hinter); width: 100%;
         min-height: 52px; padding: 10px 12px; border: 2px solid var(--linie); border-radius: 10px; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--blau); border-color: var(--blau); }
.suche input { flex: 1; }

.liste { list-style: none; margin: 0; padding: 0; }
.liste li { border-bottom: 1px solid var(--linie); }
.liste li a { display: flex; justify-content: space-between; align-items: center; gap: 12px;
              padding: 14px 4px; color: var(--text); text-decoration: none; min-height: 60px; }
.liste .name { font-size: 1.15rem; }
/* Nummern als zwei feste Spalten („Privat“ | Nummer), damit alles untereinander steht */
.liste .nrn { display: grid; grid-template-columns: 4.2em 14ch; column-gap: .6em; row-gap: 2px;
              align-items: baseline; flex-shrink: 0; }
.liste .nrn .typ { font-size: .85rem; }
.liste .nr { color: var(--grau); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 480px) {
  .liste li a { flex-direction: column; align-items: flex-start; gap: 4px; }
}
.liste .buchstabe { background: var(--blau-hell); color: var(--blau);
                    font-weight: 700; padding: 4px 8px; border: 0; }
.liste .zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 4px; }
.liste .zeile small { display: block; }
.leer { padding: 24px 4px; color: var(--grau); }
.info { color: var(--grau); font-size: .9rem; }

.nummern { list-style: none; padding: 0; margin: 16px 0; }
.nummern li a { display: flex; flex-direction: column; padding: 14px 16px; margin-bottom: 10px; border-radius: 12px;
                background: var(--blau-hell); text-decoration: none; }
.typ { color: var(--grau); font-size: .85rem; }
.nr.gross { font-size: 1.5rem; font-weight: 600; color: var(--blau); font-variant-numeric: tabular-nums; }
.notiz { white-space: pre-wrap; background: var(--blau-hell); padding: 12px; border-radius: 10px; }
.unten { margin-top: 40px; }

.formular label { display: block; margin: 12px 0; }
.nummernzeile { display: grid; grid-template-columns: 9.5em 1fr; gap: 8px; margin: 8px 0; }
@media (max-width: 420px) { .nummernzeile { grid-template-columns: 1fr; } }
.haken { display: flex !important; align-items: center; gap: 10px; font-weight: 600; }
.haken input { width: 28px; min-height: 28px; }

.meldung { padding: 12px 16px; border-radius: 12px; margin: 12px 0; }
.meldung p { margin: 4px 0; }
.fehler { background: var(--gelb); border-left: 6px solid var(--rot); }
.warnung { background: var(--gelb); border-left: 6px solid #c98a00; }
.ok { background: var(--gruen); border-left: 6px solid #2e7d32; }
.code { font-size: 2.4rem; font-weight: 700; letter-spacing: .15em; font-variant-numeric: tabular-nums; }
input.code { font-size: 1.8rem; text-align: center; }
.fuss { margin-top: 32px; color: var(--grau); text-align: center; }
.reiter { display: flex; background: var(--hinter);
          border-bottom: 2px solid var(--linie); }
.reiter a { flex: 1; padding: 14px 6px; text-align: center; font-weight: 600; text-decoration: none; color: var(--grau);
            border-bottom: 4px solid transparent; margin-bottom: -2px; }
.reiter a.an { color: var(--blau); border-bottom-color: var(--blau); }
.zahl { display: inline-block; min-width: 1.6em; padding: 0 .4em; border-radius: 1em; background: var(--rot);
        color: #fff; font-size: .8rem; text-align: center; }
.anruf { display: flex; align-items: center; gap: 12px; }
.anruf .wer { flex: 1; display: flex !important; flex-direction: column; align-items: flex-start !important;
              gap: 2px !important; padding: 12px 4px; }
.anruf.verpasst .name, .anruf.verpasst .info { color: var(--rot); }
.neu-link { color: var(--blau); font-size: .9rem; font-weight: 600; }
.knopf.rueckruf { min-height: 48px; padding: 10px 14px; }
.nachricht { padding: 12px 4px; }
.nachricht .kopfzeile { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.nachricht.neu .name { font-weight: 700; }
.nachricht audio { width: 100%; margin: 10px 0; }
.nachricht .aktionen { display: flex; gap: 10px; flex-wrap: wrap; }
.hinweis-link { display: block; color: var(--text); font-weight: 600; text-decoration: none; }
.knopf.gruen { background: #2e7d32; color: #fff; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.nummern li > .typ { display: block; }
.nummern li:not(:has(a)) { padding: 14px 16px; margin-bottom: 10px; border-radius: 12px; background: var(--blau-hell); }
.stern { color: #c98a00; }
.haken.wichtig { padding: 12px; border: 2px solid var(--linie); border-radius: 12px; }
.haken.wichtig small { display: block; }
.geraet { padding: 10px 4px 16px; }
.geraet .zeile { padding: 0 !important; }
.push-stand { margin: 6px 0; font-size: .9rem; }
.push-wahl { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 6px 0; }
.push-wahl .haken { margin: 0; }
#push-bereich .knopf { margin-top: 8px; }
.liste .firma { display: block; }
.firma-zeile { font-size: 1.1rem; color: var(--grau); margin: -6px 0 8px; }