/* LeZo Konto (Entwurf #6012, «Mein Konto» als Zentrale: Andrin #6608). Eigene Datei, nutzt die Variablen aus lezo-ui.css. Mindestgrösse 16 px, Tippflächen 44 px. */
.konto-main{max-width:560px;margin:0 auto;padding:0 16px 40px}
.konto-main .card{margin:16px 0}
.konto-form{display:flex;flex-direction:column;gap:8px}
.konto-form label{font-weight:600;font-size:1rem}
.konto-form input[type=email],.konto-form input[type=password],.konto-form input[type=text],.konto-form input[type=tel]{width:100%;min-height:44px;padding:8px 12px;font-size:1rem;border:1px solid var(--linie,#c9cfe0);border-radius:8px;box-sizing:border-box}
.konto-form .haken{display:flex;gap:10px;align-items:flex-start;font-weight:400;margin:6px 0}
.konto-form .haken input{width:22px;height:22px;flex:none;margin-top:2px}
.konto-form .btn,.konto-knoepfe .btn{width:100%;font-size:1rem;min-height:44px;white-space:normal}
.konto-form .zwei{display:grid;grid-template-columns:1fr 2fr;gap:8px}
.konto-form .zwei>div{display:flex;flex-direction:column;gap:8px}
.konto-knoepfe{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.konto-links{display:flex;flex-wrap:wrap;gap:4px 16px;margin:12px 0}
.konto-links a,.konto-main p a,.konto-hub p a{display:inline-flex;align-items:center;min-height:44px}
.konto-main .meldung,.konto-hub .meldung{font-size:1rem}
#k-lizenz,#a-lizenz{word-break:break-all}

/* «Mein Konto»: Bereiche links, Inhalt rechts (Muster Google-/Microsoft-Konto); schmal: Bereiche als waagrechte Leiste */
.konto-hub{max-width:var(--breite,1120px);margin:0 auto;padding:var(--a6,24px) var(--a5,20px) 40px}
.hub-kopf{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.hub-kopf h1{margin:0}
.hub-kopf p{margin:2px 0 0}
.hub-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:56px;height:56px;margin:0;border-radius:50%;background:var(--akzent,#5b3df5);color:#fff;font-size:1.5rem;font-weight:700}
.hub{display:grid;grid-template-columns:240px 1fr;gap:var(--a8,32px);align-items:start;margin-top:16px}
.hub-nav{position:sticky;top:calc(var(--kopf-h,64px) + 16px);display:flex;flex-direction:column;gap:2px}
.hub-nav a{display:flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:var(--r-pill,999px);color:var(--text-2);text-decoration:none;font-weight:500}
.hub-nav a:hover{background:var(--flaeche-2)}
.hub-nav a[aria-current="page"]{background:var(--akzent-weich,#f0edff);color:var(--akzent-text,#4527d6);font-weight:600}
.hub-bereich[hidden]{display:none}
.hub-bereich h2{margin-top:0}
.hub-bereich .card{margin:0 0 16px}
.hub-bereich .card h3{margin-top:0}
.hub-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.hub-karten .card{margin:0;display:flex;flex-direction:column}
.hub-karten .card p:last-child{margin-top:auto}
.hub-knoepfe{display:flex;flex-wrap:wrap;gap:10px}
.hub .konto-form{max-width:520px}
.abo-liste,.app-liste{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.abo-liste li{margin:0}
.abo-status{display:inline-block;padding:2px 10px;border-radius:var(--r-pill,999px);font-size:.85rem;font-weight:600}
.abo-status.an{background:var(--ok-weich);color:var(--ok)}
.abo-status.aus{background:var(--flaeche-3);color:var(--text-2)}
.app-liste{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.app-liste .app{display:flex;flex-direction:column;gap:4px;margin:0;height:100%;color:var(--text);text-decoration:none;box-sizing:border-box}
.app-liste .app:hover{border-color:var(--akzent-rand)}
.app-liste .app span{color:var(--text-2);font-size:.95rem}
.app-liste .app em{font-style:normal;font-size:.85rem;color:var(--text-3);margin-top:auto}
.app-liste .app em.frei{color:var(--ok);font-weight:600}
@media (max-width:820px){
  .hub{grid-template-columns:1fr;gap:12px}
  .hub-nav{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:6px;padding-bottom:4px}
  .hub-nav::-webkit-scrollbar{display:none}
  .hub-nav a{white-space:nowrap;background:var(--flaeche-2)}
  .hub-knoepfe .btn{width:100%}
}
.konto-vorteile{margin:0 0 8px;padding-left:22px}.konto-vorteile li{margin:4px 0}

/* #7057 (Andrin: «übersichtlicher, Produkte besser trennen, einfach und intuitiv»): Abo oben, je Produkt eine Karte, Abo-Aktionen als grosse Knöpfe */
.nur-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ueberzeile{margin:0 0 4px;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.abo-kurz{border-left:4px solid var(--akzent,#5b3df5)}
.abo-kurz-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.abo-kurz-kopf h3{margin:0;font-size:1.35rem}
.abo-kurz #u-abo{margin:6px 0 0;font-size:1.05rem}
.abo-status[hidden]{display:none}
.block-titel{margin:28px 0 4px;font-size:1.15rem}
.block-text{margin:0 0 12px}
.produkt-liste{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.produkt-liste .produkt{margin:0;display:flex;flex-direction:column;gap:6px;box-sizing:border-box}
.produkt-liste .produkt[hidden]{display:none}
.produkt-liste .produkt p{margin:0}
.produkt-liste .produkt.aktiv{border-color:var(--ok,#1a7f37)}
.produkt-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 8px}
.produkt-kopf strong{font-size:1.1rem;white-space:nowrap}
.produkt-knopf{margin-top:auto !important;padding-top:8px}
.pill{display:inline-block;flex:none;padding:2px 10px;border-radius:var(--r-pill,999px);font-size:.8rem;font-weight:600;font-style:normal;background:var(--flaeche-3,#eceef3);color:var(--text-2)}
.pill.frei{background:var(--ok-weich,#e6f4ea);color:var(--ok,#1a7f37)}
.firma-kurz{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.firma-kurz>div{flex:1 1 260px;min-width:0}
.firma-kurz p{margin:0 0 4px}
.abo-karte .abo-name{font-size:1.1rem}
.abo-karte p{margin:6px 0 0}
.abo-preis{font-weight:500}
.abo-aktionen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:8px 0 12px;max-width:720px}
.abo-aktionen[hidden],.abo-aktionen .aktion[hidden],#a-neu[hidden],#a-kein-portal[hidden],#a-portal-hinweis[hidden]{display:none}
.abo-aktionen .aktion{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:64px;padding:12px 14px;text-align:left;font:inherit;color:var(--text);background:var(--flaeche,#fff);border:1px solid var(--linie,#c9cfe0);border-radius:12px;cursor:pointer}
.abo-aktionen .aktion:hover{border-color:var(--akzent-rand,#5b3df5);background:var(--akzent-weich,#f0edff)}
.abo-aktionen .aktion:focus-visible{outline:3px solid var(--akzent,#5b3df5);outline-offset:2px}
.abo-aktionen .aktion:disabled{opacity:.6;cursor:wait}
.abo-aktionen .aktion strong{font-size:1rem}
.abo-aktionen .aktion span{font-size:.9rem;color:var(--text-2)}
.abo-aktionen .aktion.leise strong{color:var(--fehler,#b42318)}
@media (max-width:820px){.abo-aktionen{grid-template-columns:1fr}.produkt-liste{grid-template-columns:1fr}}

/* #9752 (Befund #9750): Haken-Zeilen als Block statt Flex. Als Flex wurde jedes Textstück und jeder Link im Zustimmungs-Haken
   (registrieren.html) ein eigenes, nicht umbrechendes Element: Zeile 384 px breit, Seite bei 360 px 425 px breit (Seitwärts-Scrollen). */
.konto-form .haken{display:block;position:relative;padding:9px 0 9px 32px;margin:0}
.konto-form .haken input{position:absolute;left:0;top:11px;margin:0}
/* Tippfläche der ganzen Haken-Zeile mindestens 44 px (26 px Text + 2×9 px) */
/* #9867 (FL-15): Haken 24×24 und Zeile ≥ 44 px. Bewusst Block statt Flex (sonst kehrt der Seitwärts-Scroll aus #9752 zurück). */
.konto-form .haken{min-height:44px;box-sizing:border-box;padding-left:36px}
.konto-form .haken input[type=checkbox]{width:24px;height:24px;top:10px}