/* Seiten der App (Anmeldung, Einrichtung, Code). Grundlage: die Stile von site/anmelden.html */
html, body { height: 100%; }
.anmelden { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.seite-links { background: var(--tief); color: #fff; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding-block: 40px; padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: 40px; }
.seite-links .marke { color: #fff; }
.seite-links .marke:hover { color: #fff; }
.seite-links h1 { font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; max-width: 14ch; }
.seite-links p { color: #c5d3ce; max-width: 40ch; margin-top: 16px; }
.bereiche { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 1px; background: var(--tief-2); border: 1px solid var(--tief-2); border-radius: 10px; overflow: hidden; max-width: 440px; }
.bereiche li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; padding: 14px 16px; background: var(--tief); }
.bereiche b { font-weight: 550; }
.bereiche span { grid-column: 2; color: #9fb7ae; font-size: .86rem; }
.bereiche i { grid-row: span 2; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: #7fd6b5; }
.seite-links small { color: #7f968e; font-size: .82rem; }

.seite-rechts { display: grid; place-items: center; padding-block: 48px; padding-left: 32px; padding-right: max(32px, env(safe-area-inset-right, 0px)); }
.karte-anm { width: 100%; max-width: 400px; display: grid; gap: 22px; }
.karte-anm h2 { font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; }
.karte-anm .leise { margin-top: 6px; font-size: .95rem; }
.feld { display: grid; gap: 6px; }
.feld span { display: flex; justify-content: space-between; font-size: .86rem; color: var(--schrift-2); }
.feld input { width: 100%; font: inherit; font-size: 1rem; color: var(--schrift); background: var(--grund); border: 1px solid var(--rand-stark); border-radius: 8px; padding: 11px 12px; transition: border-color .2s, box-shadow .2s; }
.feld input:focus { outline: none; border-color: var(--ton); box-shadow: 0 0 0 3px var(--ton-hell); }
.passwort { position: relative; }
.passwort input { padding-right: 76px; }
.passwort button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--schrift-2); font: inherit; font-size: .84rem; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.passwort button:hover { background: var(--flaeche); color: var(--schrift); }
.form-anm { display: grid; gap: 16px; }
.form-anm .knopf { width: 100%; min-height: 46px; }
.code-felder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.code-felder input { text-align: center; font-size: 1.35rem; font-weight: 600; padding: 10px 0; font-variant-numeric: tabular-nums; }
.schritt-anzeige { display: flex; gap: 6px; }
.schritt-anzeige i { height: 3px; flex: 1; border-radius: 2px; background: var(--rand); transition: background .3s; }
.schritt-anzeige i.an { background: var(--ton); }
.meldung { padding: 14px 16px; border-radius: 10px; background: var(--flaeche); border: 1px solid var(--rand); font-size: .92rem; color: var(--schrift-2); display: grid; gap: 12px; }
.meldung b { color: var(--schrift); }
.links-unten { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .9rem; }
.links-unten a { color: var(--schrift-2); }
.links-unten a:hover { color: var(--schrift); }
.zurueck-start { display: inline-flex; align-items: center; gap: 6px; color: var(--schrift-2); font-size: .9rem; justify-self: start; }
.zurueck-start svg { width: 15px; height: 15px; }
@media (max-width: 900px) {
  .anmelden { grid-template-columns: minmax(0, 1fr); }
  .seite-links { gap: 24px; padding-block: 28px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
  .seite-links .bereiche, .seite-links small, .seite-links p { display: none; }
  .seite-links h1 { font-size: 1.7rem; max-width: none; }
  .seite-rechts { place-items: start center; padding-block: 32px 48px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
}

/* Ergänzungen für die Seiten der App */
.seite-links h1 { font-family: var(--serif); font-weight: 450; }
.karte-anm h2 { font-family: var(--serif); font-weight: 450; font-size: 1.9rem; }
.karte-anm section > .leise { margin-bottom: 18px; }
.meldung { margin: 0 0 16px; display: block; }
.meldung.fehler { background: #fbeeec; border-color: #ecc4bd; color: #8a2a1c; }
.meldung.ok { background: var(--ton-hell); border-color: var(--ton-rand); color: var(--ton-tief); }
.code-feld { font-size: 1.6rem !important; letter-spacing: .32em; text-align: center; font-variant-numeric: tabular-nums; }
.ohne-rand { margin-top: 10px; }
.textknopf { border: 0; background: none; padding: 6px 0; font: inherit; font-size: .9rem; color: var(--schrift-2); cursor: pointer; }
.textknopf:hover { color: var(--schrift); }
.qr { display: grid; place-items: center; padding: 18px; margin-bottom: 14px; background: #fff; border: 1px solid var(--rand); border-radius: 10px; }
.qr svg { width: 200px; height: 200px; }
.geheim { margin-bottom: 18px; font-size: .9rem; color: var(--schrift-2); }
.geheim summary { cursor: pointer; color: var(--ton); }
.geheim p { margin-top: 10px; }
.geheim code { font-size: .95rem; letter-spacing: .04em; color: var(--schrift); word-break: break-all; }
.app-link { width: 100%; margin-bottom: 14px; }