/* mila-profil.css — Reiterstruktur fuer Mein Profil (Phase 4A-1).
 *
 * BEFUND: profil.html bindet mila-theme.css NICHT ein, sondern bringt alle
 * Stile in einem 198-Zeilen-Inline-Block selbst mit (dort ausdruecklich so
 * vermerkt). Diese Datei laedt danach und ergaenzt nur die Gliederung — sie
 * ueberschreibt keine bestehende Regel und definiert keine Tokens neu.
 *
 * Sie aendert ausschliesslich Darstellung und Navigation. Kein Request, kein
 * gespeicherter Wert, keine Sicherheitspruefung, keine kommerzielle Funktion.
 * Alle 16 Sektionen bleiben im DOM und erreichbar.
 */

/* ---- Reiterleiste ---------------------------------------------------------
   Fuenf Bereiche. Auf schmalen Geraeten wird waagerecht gescrollt statt Text
   abzuschneiden — das ist das Muster aus Phase 2/3, keine neue Sprache. */
.pf-tabs{display:flex;gap:4px;margin:4px 0 22px;padding-bottom:2px;
  border-bottom:1px solid var(--card-border);
  overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.pf-tab{flex:0 0 auto;background:transparent;border:none;border-bottom:2px solid transparent;
  color:var(--muted);font:inherit;font-size:.95rem;font-weight:600;
  padding:10px 14px;cursor:pointer;white-space:nowrap;border-radius:8px 8px 0 0;
  transition:color .15s,border-color .15s}
.pf-tab:hover{color:var(--text-strong)}
.pf-tab.akt{color:var(--text-strong);border-bottom-color:var(--blue)}
.pf-tab:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

/* Der Rollbalken der Leiste soll nicht als Rahmen wirken. */
.pf-tabs::-webkit-scrollbar{height:3px}
.pf-tabs::-webkit-scrollbar-thumb{background:var(--card-border);border-radius:3px}

/* ---- Panels ---------------------------------------------------------------
   [hidden] muss das display der .secs-Regel schlagen, sonst bleiben alle
   Bereiche gleichzeitig sichtbar. */
.pf-panel[hidden]{display:none !important}
.pf-panel{min-width:0}

/* Innerhalb eines Bereichs stehen die Sektionen untereinander — die
   bestehende .secs-Spaltenaufteilung gilt weiter, nur eben je Bereich. */
.pf-panel>.sec{min-width:0}

/* REGRESS AUS 4A-1, hier behoben:
   profil.html schuetzt seine Karten mit  .secs > .sec { break-inside: avoid }.
   Das ist ein KIND-Selektor. Seit die Bereiche eingezogen sind, ist .sec ein
   Enkel (.secs > .pf-panel > .sec) — die Regel griff nicht mehr, und die
   Mehrspalten-Darstellung ab 1100px hat Karten mitten durchgerissen:
   Kartenkopf in Spalte 1, Rest in Spalte 2.
   Die Regel wird hier fuer die neue Verschachtelung wiederhergestellt. */
.secs .pf-panel>.sec{
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid}

/* ---- Lange Inhalte --------------------------------------------------------
   Lange Namen, E-Mail-Adressen, Hochschulen und Studiengaenge duerfen die
   Seite nie aufspannen. */
.pf-panel h2,.pf-panel h3,.pf-panel p,.pf-panel label,.pf-panel span,
.pf-panel a,.pf-panel li,.pf-panel div{overflow-wrap:break-word}
.pf-panel input,.pf-panel select,.pf-panel textarea{max-width:100%;min-width:0}
.pf-panel .row{flex-wrap:wrap}
.pf-panel .row>*{min-width:0}

/* ---- Mobil ----------------------------------------------------------------
   Kein gestauchter Desktop: kompaktere Reiter, mehr Luft in den Feldern. */
@media(max-width:640px){
  .pf-tabs{margin:2px -4px 18px;padding:0 4px 2px;gap:2px}
  .pf-tab{padding:9px 11px;font-size:.9rem}
}
@media(max-width:380px){
  .pf-tab{padding:9px 9px;font-size:.86rem}
}

@media(prefers-reduced-motion:reduce){
  .pf-tab{transition:none}
}

/* ---- Druck ----------------------------------------------------------------
   Beim Drucken alle Bereiche zeigen, sonst fehlt der halbe Inhalt. */
@media print{
  .pf-tabs{display:none !important}
  .pf-panel[hidden]{display:block !important}
}

/* ===========================================================================
   Phase 4A-2 — Abo, Speicher, Rechnungen, Rechnungsadresse
   ---------------------------------------------------------------------------
   WICHTIG: Die kommerzielle Oberflaeche wird von JavaScript erzeugt
   (renderManage, renderOffers, renderSwitch, die Rechnungszeilen als
   Template-Literale). Diese Skripte werden NICHT angefasst — der gesamte
   Umbau laeuft ueber die vorhandenen ids/Klassen und die statischen
   Sektionshuellen. Kein Request, kein Payload, kein Redirect, keine
   Bestaetigung, kein Feature-Flag wird beruehrt.
   =========================================================================== */

/* ---- Rhythmus im Abo-Reiter ----------------------------------------------
   Reihenfolge im Markup: Dein Abo -> Speicher & Kontingent -> Rechnungen ->
   Rechnungsadresse. Der aktuelle Tarif steht damit zuerst. */
#pf-panel-abo>.sec{margin-bottom:18px}
#pf-panel-abo>.sec:last-child{margin-bottom:0}

/* ---- Dein Abo -------------------------------------------------------------
   Planname, Preis und Status als ruhige Kopfzeile. */
#abo #planName{overflow-wrap:break-word}
#abo #planPrice{font-variant-numeric:tabular-nums;overflow-wrap:break-word}
#abo #planSub{color:var(--muted);line-height:1.55;overflow-wrap:break-word}

/* ---- Tarife und Verwaltung ------------------------------------------------
   Tarifkarten duerfen nie schmaler werden als ihr Inhalt erlaubt, aber auch
   nie breiter als ihr Container (minmax(min(...))-Muster wie bei .grid-2). */
#aboOffers{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
#aboOffers>*{min-width:0}
#aboOffers .btn{white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:1.3}

#aboManage,#aboSwitch,#aboUpgrade{display:flex;flex-wrap:wrap;gap:10px;align-items:center;min-width:0}
#aboManage .btn,#aboSwitch .btn,#aboUpgrade .btn{white-space:normal;line-height:1.3}
#aboManage>.muted{flex:1 1 100%;margin:0 0 2px}

/* Kuendigen wird sichtbar von den harmlosen Aktionen abgesetzt: eigene Zeile,
   linker Abstand, ruhige Farbe. Der Knopf bleibt derselbe, mit derselben
   confirm()-Rueckfrage — er wird NICHT groesser und NICHT prominenter. */
#aboManage .btn-danger{margin-left:auto;order:9}
@media(max-width:560px){
  #aboManage .btn-danger{margin-left:0;flex:1 1 100%;
    margin-top:8px;padding-top:10px;border-top:1px solid var(--card-border)}
}

/* Zustimmung vor dem Kauf bleibt vollstaendig sichtbar und anklickbar. */
#aboConsent{width:17px;height:17px;flex:0 0 auto}
#aboBlocked{line-height:1.55;overflow-wrap:break-word}

/* ---- Speicher & Kontingent ------------------------------------------------ */
#pf-panel-abo .store-bar{height:10px}
#pf-panel-abo #usedNum{font-variant-numeric:tabular-nums}
#pf-panel-abo #usedSub{color:var(--muted);overflow-wrap:break-word}

/* ---- Rechnungen -----------------------------------------------------------
   Aus einer Aufzaehlung wird eine verwaltbare Liste: Suche oben, Zeilen mit
   fester Anatomie, Betraege rechtsbuendig in Ziffernbreite. */
#invSearch{width:100%;max-width:320px;min-width:0}
#invList{margin-top:10px;min-width:0}
#invList .card{transition:border-color .15s}
#invList .card:hover{border-color:var(--card-border-2,var(--muted))}
#invList .strong{overflow-wrap:anywhere}
#invList .small{overflow-wrap:anywhere;line-height:1.5}
#invList .btn{white-space:nowrap}
/* Leerer Zustand, Suche ohne Treffer und Ladehinweis bekommen dieselbe ruhige
   Flaeche statt nacktem Text. */
#invList:not(:has(.card)){padding:18px;border:1px dashed var(--card-border);
  border-radius:12px;color:var(--muted);line-height:1.55;display:block}
@media(min-width:560px){
  /* Betrag und Aktionen stehen ab hier in einer festen Spur, damit die
     Zeilen untereinander fluchten. */
  #invList .card>div:nth-child(2){min-width:96px;text-align:right}
}
@media(max-width:559px){
  #invList .card{gap:8px}
  #invList .card>div:nth-child(3){flex:1 1 100%}
  #invList .btn{flex:1 1 auto}
}

/* ---- Rechnungsadresse -----------------------------------------------------
   Eigener Bereich, nicht zwischen allgemeinen Profilfeldern versteckt.
   Alle neun Felder bleiben sichtbar; der Schalter blendet sie wie bisher
   ueber [hidden] ein und aus — das ist bestehende Logik. */
#billFields{margin-top:12px}
#billFields[hidden]{display:none !important}
#billFields input,#billFields select{max-width:100%;min-width:0}
#billFields .field{min-width:0}
#bVat{font-variant-numeric:tabular-nums}

/* ---- Lange Inhalte --------------------------------------------------------
   Lange Tarifnamen, Rechnungsnummern, Status, VAT-IDs und Firmendaten
   duerfen die Seite nie aufspannen. */
#pf-panel-abo *{overflow-wrap:break-word}
#pf-panel-abo .row{flex-wrap:wrap}
#pf-panel-abo .row>*{min-width:0}