/* ===================================================================
   Bella.tax — Mandantenportal
   -------------------------------------------------------------------
   Gestaltet für den einen Menschen, der das hier benutzt: jemand, der
   mit Steuerformularen nichts zu tun haben will, auf dem Telefon steht
   und eine Frage hat — was fehlt noch von mir?

   Drei Entscheidungen tragen das Ganze:

   1. KEINE EIGENE FORMENSPRACHE. Alle Farben und Schriften kommen aus
      site.css. Die erste Fassung hatte eine eigene warmgraue Skala und
      einen grünen Akzent erfunden — neben dem Slate der Website sah das
      aus wie zwei Firmen. Hier gibt es genau einen Akzent, und das ist
      der der Marke.

   2. KEINE 71 GLEICHEN KARTEN. Eine Checkliste aus siebzig umrandeten
      Kästen ist eine Wand. Die Gruppe ist der Behälter, die Position
      ist eine Zeile darin. Erledigtes klappt zusammen; sichtbar bleibt,
      was noch offen ist.

   3. LICHT, FEST. Die übrige Website hat keinen Dunkelmodus. Nur das
      Portal umzustellen hieße, den Mandanten mitten im Klick in eine
      andere Website zu schicken. Bekommt bella.tax einen Dunkelmodus,
      bekommt ihn das Portal am selben Tag — nicht vorher.

   Präfix mp- gegen Kollisionen mit site.css und pfb.css.
   =================================================================== */

.mp {
  /* Alles abgeleitet. Wer die Marke ändert, ändert das Portal mit. */
  --mp-flaeche:      var(--paper);
  --mp-gruppe:       #fff;
  --mp-linie:        var(--line);
  --mp-linie-stark:  var(--line-2);

  --mp-text:         var(--ink);
  --mp-text-leise:   var(--ink-soft);
  /* NICHT var(--muted). Der Marken-Ton #8A8F9C erreicht auf Weiß nur 3,24:1
     und fällt damit durch WCAG AA — gemessen, nicht geschätzt. Auf der
     Website steht er unter großen Überschriften, wo die 3:1 für große Schrift
     reichen; hier trägt er Fließtext. Dieser Wert liegt bei 4,87:1 und bleibt
     im selben Slate-Ton. */
  --mp-text-still:   #6B7183;

  --mp-akzent:       var(--accent);
  --mp-akzent-hover: var(--accent-hover);

  /* Nur zwei Zustandsfarben, beide zum Slate hin entsättigt. Sie sagen
     etwas aus; sie sind keine zweite Markenfarbe. */
  --mp-fertig:       #4A7359;
  --mp-fertig-flach: #EEF3EF;
  --mp-offen:        #9C5A33;
  --mp-offen-flach:  #F7F0EA;

  /* Ein Radius für alles: Gruppen, Knöpfe, Felder. */
  --mp-radius:       10px;
  --mp-radius-klein: 6px;
  /* Daumengröße, nicht Mauszeigergröße. */
  --mp-tipp:         48px;
}

/* =============================================================
   Kopf
   ============================================================= */

.mp-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 1.75rem;
}

/* Nur für Vorlesegeräte. Eine Tabellenspalte ohne Überschrift ist für
   sehende Nutzer selbsterklärend, für einen Screenreader nicht. */
.mp .visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mp-feldgruppe { margin: 0; padding: 0; border: 0; }

/* site.css setzt .eyebrow auf --brand (#71778D). Auf dem Papierton sind das
   gemessene 4,26:1 — bei 11px Schrift zu wenig für WCAG AA. Hier eine Spur
   dunkler; die Marke selbst bleibt unangetastet, das waere eine Entscheidung
   fuer die ganze Website und nicht fuer diese eine Seite. */
.mp .eyebrow { color: #676D84; }

.mp-titel { margin-bottom: .25rem; }

/* Das Anmeldeformular ist ein Feld, keine Seite. */
.mp-anmeldung { max-width: 30rem; margin-left: auto; margin-right: auto; }

.mp-jahre { display: flex; flex-wrap: wrap; gap: .4rem; }

.mp-jahr {
  min-height: 44px;
  padding: .4rem 1rem;
  border: 1px solid var(--mp-linie-stark);
  border-radius: var(--mp-radius-klein);
  background: transparent;
  color: var(--mp-text-leise);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

.mp-jahr:hover { border-color: var(--mp-akzent); color: var(--mp-text); }

.mp-jahr[aria-pressed="true"] {
  background: var(--mp-akzent);
  border-color: var(--mp-akzent);
  color: #fff;
}

/* =============================================================
   Fortschritt
   -------------------------------------------------------------
   Die einzige Zahl, die zählt, steht als Satz da und nicht als
   Prozentwert. „Noch 7 Punkte" beantwortet die Frage; „64 %" nicht.
   ============================================================= */

.mp-stand {
  border-top: 1px solid var(--mp-linie);
  border-bottom: 1px solid var(--mp-linie);
  padding: 1.25rem 0;
  margin-bottom: 2.5rem;
}

.mp-stand__satz {
  margin: 0 0 .3rem;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -.015em;
}

.mp-stand__dazu {
  margin: 0 0 1rem;
  color: var(--mp-text-leise);
  font-size: .9375rem;
}

.mp-balken {
  height: 6px;
  border-radius: 999px;
  background: var(--brand-soft);
  overflow: hidden;
}

.mp-balken__voll {
  height: 100%;
  border-radius: 999px;
  background: var(--mp-fertig);
  transition: width .4s cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .mp-balken__voll { transition: none; }
}

/* =============================================================
   Gruppe
   -------------------------------------------------------------
   Der Behälter ist die Gruppe, nicht die einzelne Position.
   ============================================================= */

.mp-gruppe {
  background: var(--mp-gruppe);
  border: 1px solid var(--mp-linie);
  border-radius: var(--mp-radius);
  margin-bottom: 1.25rem;
  overflow: hidden;

  /* site.css setzt für jedes <section> content-visibility:auto mit
     contain-intrinsic-size:800px. Das ist auf den langen Ratgeberseiten
     richtig; hier sind es sechzehn kurze Gruppen, und die reservierten
     800px je Gruppe blähten die Seite um 12.800 Phantompixel auf. Der
     Scrollbalken zeigte damit eine Länge an, die es nicht gab. */
  content-visibility: visible;
  contain-intrinsic-size: auto;
}

.mp-gruppe__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem .85rem;
  border-bottom: 1px solid var(--mp-linie);
}

.mp-gruppe__h {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.mp-gruppe__zahl {
  flex: none;
  color: var(--mp-text-still);
  font-size: .8125rem;
  white-space: nowrap;
}

.mp-gruppe--durch .mp-gruppe__zahl { color: var(--mp-fertig); }

/* =============================================================
   Position
   -------------------------------------------------------------
   Zeile, keine Karte. Getrennt wird mit einer Haarlinie, und nur
   zwischen den Zeilen, nicht über und unter jeder.
   ============================================================= */

.mp-pos { padding: 1.1rem 1.25rem; }
.mp-pos + .mp-pos { border-top: 1px solid var(--mp-linie); }

.mp-pos--nachgefordert {
  background: var(--mp-offen-flach);
  box-shadow: inset 3px 0 0 var(--mp-offen);
}

.mp-pos__titel {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.mp-pflicht {
  display: inline-block;
  margin-left: .5rem;
  vertical-align: 1px;
  color: var(--mp-offen);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.mp-pos__hinweis {
  margin: .45rem 0 0;
  max-width: 60ch;
  color: var(--mp-text-leise);
  font-size: .9375rem;
  line-height: 1.6;
}

/* Die Hinweise sind mit Absicht ausführlich: Sie beantworten die Frage, an
   der Mandanten tatsächlich scheitern — nicht „was ist das", sondern „wo
   bekomme ich das her". Vollständig gezeigt sind es am Telefon aber 535px
   je Position, gemessen auf 812px Bildschirm. Wer die Liste durchgeht,
   sucht am Titel; den Hinweis braucht er nur, wenn er den Titel nicht
   erkennt. Also drei Zeilen, der Rest auf Tippen. */
.mp-pos__hinweis--kurz {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mp-mehr {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  margin-top: .1rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mp-akzent);
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.mp-mehr:hover { color: var(--mp-akzent-hover); }
.mp-mehr:focus-visible { outline: 2px solid var(--mp-akzent); outline-offset: 2px; }

/* Der eigentliche Zweck des Portals: „das hatten wir letztes Jahr schon". */
.mp-vorjahr {
  margin-top: .75rem;
  padding-left: .8rem;
  border-left: 2px solid var(--brand-soft);
  color: var(--mp-text-leise);
  font-size: .875rem;
  line-height: 1.55;
}

.mp-vorjahr b { color: var(--mp-text); font-weight: 600; }

/* =============================================================
   Aktionen
   -------------------------------------------------------------
   Eine Haupttaste, zwei stille Textwege. Drei gleich schwere
   Knöpfe nebeneinander wären drei gleich wahrscheinliche
   Entscheidungen, und das sind sie nicht.
   ============================================================= */

.mp-tun {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.25rem;
  margin-top: .9rem;
}

.mp-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--mp-tipp);
  padding: 0 1.4rem;
  border: 1px solid var(--mp-akzent);
  border-radius: var(--mp-radius-klein);
  background: var(--mp-akzent);
  color: #fff;
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, transform .1s;
}

.mp-knopf:hover { background: var(--mp-akzent-hover); border-color: var(--mp-akzent-hover); }
.mp-knopf:active { transform: translateY(1px); }
.mp-knopf[disabled] { opacity: .5; cursor: default; transform: none; }

.mp-knopf--still {
  background: transparent;
  border-color: var(--mp-linie-stark);
  color: var(--mp-text);
}

.mp-knopf--still:hover {
  background: var(--brand-tint);
  border-color: var(--mp-akzent);
  color: var(--mp-text);
}

/* Textweg statt Knopf: sichtbar, aber ohne Gewicht. */
.mp-weg {
  min-height: var(--mp-tipp);
  padding: 0;
  border: 0;
  background: none;
  color: var(--mp-text-leise);
  font: inherit;
  font-size: .9375rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--mp-linie-stark);
  cursor: pointer;
}

.mp-weg:hover { color: var(--mp-text); text-decoration-color: currentColor; }

/* Das native Dateifeld ist am Telefon kaum zu treffen. Es liegt
   unsichtbar über einer richtigen Taste. */
.mp-datei { position: relative; display: inline-flex; }

.mp-datei input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.mp-knopf:focus-visible,
.mp-weg:focus-visible,
.mp-jahr:focus-visible,
.mp-datei input[type="file"]:focus-visible + .mp-knopf {
  outline: 2px solid var(--mp-akzent);
  outline-offset: 2px;
}

/* =============================================================
   Belege
   ============================================================= */

.mp-belege { list-style: none; margin: .85rem 0 0; padding: 0; }

.mp-beleg {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .75rem;
  border-radius: var(--mp-radius-klein);
  background: var(--brand-tint);
  font-size: .9375rem;
}

.mp-beleg + .mp-beleg { margin-top: .35rem; }
.mp-beleg__name { flex: 1; overflow-wrap: anywhere; }

.mp-beleg__gr {
  flex: none;
  color: var(--mp-text-still);
  font-size: .8125rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* =============================================================
   Erledigtes
   -------------------------------------------------------------
   Zusammengeklappt. Wer siebzig Zeilen durchscrollen muss, um die
   drei offenen zu finden, benutzt das Portal genau einmal.
   ============================================================= */

.mp-fertig-block { border-top: 1px solid var(--mp-linie); }

.mp-fertig-block > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: var(--mp-tipp);
  padding: 0 1.25rem;
  color: var(--mp-fertig);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.mp-fertig-block > summary::-webkit-details-marker { display: none; }

.mp-fertig-block > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: .15rem;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.mp-fertig-block[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.mp-fertig-block > summary:focus-visible { outline: 2px solid var(--mp-akzent); outline-offset: -2px; }

.mp-erledigt {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .7rem 1.25rem;
  border-top: 1px solid var(--mp-linie);
  color: var(--mp-text-leise);
  font-size: .9375rem;
}

.mp-erledigt__zeichen { flex: none; color: var(--mp-fertig); font-weight: 700; }
.mp-erledigt__was { flex: 1; }
.mp-erledigt__grund { color: var(--mp-text-still); font-size: .875rem; }

.mp-erledigt__zurueck {
  flex: none;
  padding: .25rem;
  border: 0;
  background: none;
  color: var(--mp-text-still);
  font: inherit;
  font-size: .8125rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.mp-erledigt__zurueck:hover { color: var(--mp-text); }

/* =============================================================
   Rückmeldung und Begründung
   ============================================================= */

.mp-sagt {
  margin-top: .8rem;
  padding: .6rem .85rem;
  border-radius: var(--mp-radius-klein);
  font-size: .9375rem;
  line-height: 1.55;
}

.mp-sagt--fehler { background: #FBEDEA; color: #8C2F1E; }
.mp-sagt--gut    { background: var(--mp-fertig-flach); color: #2F5340; }
.mp-sagt--laeuft { background: var(--brand-tint); color: var(--mp-text-leise); }

.mp-grund { margin-top: .9rem; }

.mp-grund__l {
  display: block;
  margin-bottom: .4rem;
  font-size: .9375rem;
  font-weight: 600;
}

.mp-grund__feld {
  width: 100%;
  min-height: 3.25rem;
  padding: .65rem .8rem;
  border: 1px solid var(--mp-linie-stark);
  border-radius: var(--mp-radius-klein);
  background: #fff;
  color: var(--mp-text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
}

.mp-grund__feld::placeholder { color: var(--mp-text-still); }

.mp-grund__feld:focus-visible {
  outline: 2px solid var(--mp-akzent);
  outline-offset: 1px;
  border-color: var(--mp-akzent);
}

.mp-grund__hilfe {
  margin: .45rem 0 0;
  color: var(--mp-text-leise);
  font-size: .875rem;
  line-height: 1.5;
}

/* =============================================================
   Abschluss
   ============================================================= */

.mp-schluss {
  margin: 2.5rem 0 1rem;
  padding: 1.75rem;
  border: 1px solid var(--mp-linie-stark);
  border-radius: var(--mp-radius);
}

.mp-schluss--fertig { border-color: var(--mp-fertig); background: var(--mp-fertig-flach); }

.mp-schluss__h {
  margin: 0 0 .5rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.015em;
}

.mp-schluss__p {
  margin: 0 0 1.25rem;
  max-width: 55ch;
  color: var(--mp-text-leise);
  line-height: 1.6;
}

.mp-schluss__offen {
  margin: 0 0 1.25rem;
  padding-left: 1.15rem;
  color: var(--mp-offen);
  line-height: 1.8;
}

/* =============================================================
   Leerlauf
   ============================================================= */

.mp-leer {
  padding: 3.5rem 1.25rem;
  text-align: center;
  color: var(--mp-text-leise);
  line-height: 1.7;
}

/* =============================================================
   Kanzleisicht
   -------------------------------------------------------------
   Dashboard, kein Marketing. Hier gilt Dichte vor Geste: schmale
   Zeilen, Zahlen in Ziffernbreite, keine Verzierung.
   ============================================================= */

.mp-tabelle-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.mp-tabelle { width: 100%; border-collapse: collapse; font-size: .9375rem; }

.mp-tabelle th,
.mp-tabelle td {
  padding: .7rem .65rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--mp-linie);
}

.mp-tabelle th {
  color: var(--mp-text-still);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mp-tabelle tbody tr:hover td { background: var(--brand-tint); }
.mp-tabelle td:first-child { font-weight: 600; }

.mp-tabelle__leer {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--mp-text-still);
  font-weight: 400;
}

.mp-tabelle__zahl  { font-variant-numeric: tabular-nums; }
.mp-tabelle__still { color: var(--mp-text-still); font-weight: 400; }
.mp-tabelle__warn  { color: var(--mp-offen); }
.mp-tabelle__gut   { color: var(--mp-fertig); }
.mp-tabelle__tun   { white-space: nowrap; }

.mp-minibalken {
  display: inline-block;
  width: 4.5rem;
  height: 5px;
  margin-right: .5rem;
  border-radius: 999px;
  background: var(--brand-soft);
  overflow: hidden;
  vertical-align: middle;
}

.mp-minibalken__voll { display: block; height: 100%; background: var(--mp-fertig); }

.mp-marken { display: flex; flex-wrap: wrap; gap: .3rem; }

.mp-marke {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: var(--mp-radius-klein);
  background: var(--brand-tint);
  color: var(--mp-text-leise);
  font-size: .78125rem;
  font-weight: 600;
  white-space: nowrap;
}

.mp-marke--gut  { background: var(--mp-fertig-flach); color: var(--mp-fertig); }
.mp-marke--warn { background: var(--mp-offen-flach);  color: var(--mp-offen); }

/* Zugangsdaten: genau einmal sichtbar, deshalb nicht zu übersehen. */
.mp-zugang {
  margin-top: 1.25rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--mp-linie-stark);
  border-radius: var(--mp-radius);
  background: var(--bg-warm);
}

.mp-zugang__l {
  margin: 1rem 0 .25rem;
  color: var(--mp-text-leise);
  font-size: .875rem;
}

.mp-zugang__l:first-of-type { margin-top: .9rem; }

.mp-zugang__wert {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: .02em;
  user-select: all;
}

.mp-zugang__warnung {
  margin: 1rem 0 0;
  color: var(--mp-offen);
  font-size: .875rem;
  line-height: 1.55;
}

/* =============================================================
   Telefon
   -------------------------------------------------------------
   Unter 768px wird alles einspaltig. Die Haupttaste nimmt die
   volle Breite; die stillen Wege bleiben Text.
   ============================================================= */

@media (max-width: 767px) {
  .mp-kopf { flex-direction: column; align-items: flex-start; gap: 1rem; }

  .mp-gruppe__kopf,
  .mp-pos,
  .mp-fertig-block > summary,
  .mp-erledigt { padding-left: 1rem; padding-right: 1rem; }

  .mp-tun { gap: .75rem 1rem; }
  .mp-datei,
  .mp-datei .mp-knopf { width: 100%; }
  .mp-schluss { padding: 1.25rem; }
  .mp-stand__satz { font-size: 1.1875rem; }
}