/* 0.38.0 „Eingangskorb“ – Mein Amt (Zielbild docs/entwurf-management/bilder). Vorsilbe bt-. Schrift ≥ 17 px, Nebentext 15 px, Kontrast ≥ 4,5:1. */

/* --- Knopf „Mein Amt“ in der Dienstleiste (alle Seiten) ---------------------------------------- */
/* Umrandet statt gefüllt: Der eigentliche Hauptknopf jeder Seite bleibt der auffälligste (Leitplanke „EIN Hauptknopf“) */
.zustand .dl-amt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 6px 14px; border-radius: 99px; background: #fff; color: var(--akzent-text); border: 2px solid var(--akzent); font-weight: 800; font-size: 15px; text-decoration: none; white-space: nowrap; box-shadow: none; }
.zustand .dl-amt span { display: inline; padding: 0; background: none; border-radius: 0; }
.zustand .dl-amt:hover, .zustand .dl-amt:focus-visible { background: var(--lavendel); }
.zustand .dl-amt[aria-current="page"] { background: var(--lavendel); outline: 3px solid var(--akzent-hell); }
@media (max-width: 640px) { .zustand .dl-amt { grid-column: 1 / -1; justify-self: center; min-height: 44px; padding: 4px 18px; font-size: 16px; } }

/* --- Seite ------------------------------------------------------------------------------------- */
.bt-seite { max-width: 560px; margin: 0 auto; display: grid; gap: 12px; font-size: 17px; line-height: 1.4; }
.bt-seite .karte { margin: 0; border-radius: 18px; padding: 14px 16px; }
.bt-leise { color: #4b5563; font-size: 15px; }
.bt-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bt-marke { display: inline-block; font-size: 15px; font-weight: 700; padding: 2px 10px; border-radius: 99px; background: var(--lavendel); color: var(--akzent-text); }

.bt-kopf { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border: 3px solid var(--akzent); border-radius: 99px; background: #fff; box-shadow: 0 8px 22px rgba(79, 70, 229, .14); }
.bt-gesicht { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: block; background: var(--lavendel); }
.bt-gesicht svg { width: 44px; height: 44px; display: block; }
.bt-kopf h1 { font-size: 17px; line-height: 1.2; margin: 0; font-weight: 800; letter-spacing: -.01em; }
.bt-uhr { display: block; color: #4b5563; font-size: 15px; }
.bt-konto { display: grid; justify-items: end; line-height: 1.05; }
.bt-konto b { font-size: 20px; font-weight: 850; color: var(--akzent-text); font-variant-numeric: tabular-nums; }
.bt-konto span { font-size: 15px; color: #4b5563; font-weight: 600; }

.bt-stufe h2 { font-size: 22px; margin: 0; font-weight: 850; letter-spacing: -.02em; }
.bt-balken { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 14px; margin: 10px 0 6px; border: 0; border-radius: 99px; background: var(--flaeche2); color: var(--akzent); overflow: hidden; }
.bt-balken::-webkit-progress-bar { background: var(--flaeche2); border-radius: 99px; }
.bt-balken::-webkit-progress-value { background: var(--akzent); border-radius: 99px; }
.bt-balken::-moz-progress-bar { background: var(--akzent); border-radius: 99px; }
.bt-stufe .bt-zeile.bt-leise b { color: var(--text); }

.bt-szene { padding: 0 !important; overflow: hidden; }
.bt-szene svg { display: block; width: 100%; height: auto; }
.bt-szene .bt-s1, .bt-szene .bt-s2, .bt-szene .bt-s3, .bt-szene .bt-s4 { transition: opacity .25s; }
.bt-szene[data-stapel="0"] .bt-s1, .bt-szene[data-stapel="0"] .bt-s2, .bt-szene[data-stapel="0"] .bt-s3, .bt-szene[data-stapel="0"] .bt-s4,
.bt-szene[data-stapel="1"] .bt-s2, .bt-szene[data-stapel="1"] .bt-s3, .bt-szene[data-stapel="1"] .bt-s4,
.bt-szene[data-stapel="2"] .bt-s3, .bt-szene[data-stapel="2"] .bt-s4,
.bt-szene[data-stapel="3"] .bt-s4 { opacity: 0; }
.bt-zahlen { padding: 8px 16px 12px; }
.bt-korb { font-size: 19px; font-variant-numeric: tabular-nums; }
.bt-prostd { font-size: 15px; color: #4b5563; }
.bt-prostd b { color: var(--gruen-text); font-size: 17px; }
.bt-hilfe-zeile { margin: 2px 0 0; color: #4b5563; font-size: 15px; }
.bt-feierabend { margin: 6px 0 0; padding: 6px 10px; border-radius: 10px; background: var(--butter); border: 1px solid #fde68a; font-size: 15px; color: #78350f; }

.bt-haupt { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 64px; padding: 10px 16px; border-radius: 16px; background: var(--akzent); color: #fff; font: inherit; font-size: 20px; font-weight: 800; border: 0; box-shadow: 0 6px 16px rgba(79, 70, 229, .30); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.bt-haupt:active { transform: scale(.985); }
.bt-haupt:focus-visible { outline: 4px solid #a5b4fc; outline-offset: 2px; }
.bt-haupt[aria-disabled="true"] { background: var(--flaeche2); color: #4b5563; box-shadow: none; cursor: default; }
.bt-haupt.wechsel { animation: bt-wechsel .8s ease; }
@keyframes bt-wechsel { 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, .55); } 100% { box-shadow: 0 0 0 14px rgba(79, 70, 229, 0); } }

.bt-engpass { margin: 0; background: var(--mint); border: 1px solid #a7f3d0; border-radius: 12px; padding: 10px 12px; font-size: 15px; color: var(--text); }
.bt-engpass b { color: var(--gruen-text); }

.bt-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bt-kachel { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 88px; padding: 8px 6px; background: #fff; border: 1px solid var(--linie); border-radius: 16px; text-align: center; font-size: 15px; }
.bt-kachel b { font-size: 17px; }
.bt-kachel.zu { background: transparent; border-style: dashed; border-color: #9ca3af; color: #4b5563; }
.bt-kachel-satz { margin: -4px 0 0; text-align: center; }
.bt-erst { margin-top: 12px; min-height: 52px; font-size: 17px; }

.bt-knopf2 { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 8px 16px; border-radius: 16px; background: #fff; color: var(--akzent-text); border: 2px solid var(--akzent); font: inherit; font-size: 18px; font-weight: 800; cursor: pointer; list-style: none; text-align: center; }
.bt-knopf2::-webkit-details-marker { display: none; }
.bt-knopf2:focus-visible { outline: 4px solid #a5b4fc; outline-offset: 2px; }
.bt-personal[open] > .bt-knopf2 { margin-bottom: 12px; }
.bt-personal > :not(summary) { margin-top: 10px; }

.bt-bewerbung h2 { font-size: 24px; margin: 4px 0 4px; font-weight: 850; }
.bt-bewerber { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: start; background: #fff; border: 1px solid var(--linie); border-radius: 18px; padding: 14px; margin-top: 10px; }
.bt-bewerber h3 { margin: 0 0 2px; font-size: 19px; }
.bt-bewerber p { margin: 4px 0; }
.bt-bew-bild svg { width: 64px; height: 64px; border-radius: 14px; display: block; }
.bt-knopf-kauf { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 8px; padding: 8px 14px; border-radius: 14px; border: 0; background: var(--akzent); color: #fff; font: inherit; font-size: 18px; font-weight: 800; cursor: pointer; }
.bt-knopf-kauf[disabled] { background: #f3f4f6; color: #4b5563; cursor: default; }
.bt-knopf-kauf.leise { background: #fff; color: var(--akzent-text); border: 2px solid var(--akzent); }

.bt-angebot { background: #fff; border: 1px solid var(--linie); border-radius: 16px; padding: 12px 14px; margin-top: 10px; }
.bt-angebot.empfohlen { border: 2px solid var(--gruen); background: var(--mint); }
.bt-angebot.grau { background: #f3f4f6; }
.bt-angebot h3 { margin: 0; font-size: 17px; }
.bt-angebot p { margin: 2px 0; font-size: 15px; color: #4b5563; }
.bt-angebot .bt-grund { color: #374151; font-weight: 600; }
.bt-angebot .bt-emp { color: var(--gruen-text); font-weight: 800; }

.bt-was { font-size: 15px; }
.bt-was > summary { min-height: 48px; }
.bt-test { border-style: dashed; }
.bt-test .klein, .bt-test .knopf { font-size: 15px; }
.bt-test-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }

/* Begrüßung „Während Sie weg waren …“ */
.bt-gruss-hinter { position: fixed; inset: 0; z-index: 60; background: rgba(17, 24, 39, .45); display: grid; place-items: start center; overflow-y: auto; padding: 72px 16px 24px; }
.bt-gruss { width: 100%; max-width: 480px; background: #fff; border-radius: 22px; padding: 20px 18px; box-shadow: var(--schatten-hoch); display: grid; gap: 10px; font-size: 17px; }
.bt-gruss:focus { outline: none; }
.bt-gruss h2 { margin: 0; font-size: 26px; font-weight: 850; letter-spacing: -.02em; }
.bt-gruss p { margin: 0; }
.bt-gruss-liste { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 8px; }
.bt-gruss-liste li { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; }
.bt-gruss-bild { width: 48px; height: 48px; border-radius: 12px; background: var(--lavendel); display: grid; place-items: center; font-size: 24px; }
.bt-plus { color: var(--gruen-text); font-size: 19px; }
.bt-gruss-statistik { border-top: 1px solid var(--linie); padding-top: 10px; }
.bt-balken7 { display: block; width: 100%; height: auto; margin-top: 8px; }

.bt-akte-flug { position: fixed; z-index: 70; width: 34px; height: 24px; border-radius: 3px; background: #fde7b0; border: 1px solid #d6b98a; pointer-events: none; animation: bt-flug .5s ease-in forwards; }
@keyframes bt-flug { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--dx, 0), var(--dy, -120px)) rotate(-12deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .bt-akte-flug { display: none; }
  .bt-haupt.wechsel { animation: none; }
  .bt-szene .bt-s1, .bt-szene .bt-s2, .bt-szene .bt-s3, .bt-szene .bt-s4 { transition: none; }
}

/* Der Hauptknopf läge sonst unter dem Bildrand (Handy 390×844 und Laptop 1366×768: erst nach Scrollen sichtbar): er bleibt unten stehen, am Handy über der Tab-Leiste */
.bt-seite > .bt-haupt { position: sticky; bottom: 12px; z-index: 20; }
@media (max-width: 900px) {
  .bt-seite > .bt-haupt { bottom: calc(var(--tab-hoehe) + max(var(--sicher-unten), 8px) + 8px); }
}