/* ── CSS-Reset & Variablen ────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --farbe-hg:         #F6F4F0;
      --farbe-flaeche:    #FFFFFF;
      --farbe-primaer:    #002440;
      --farbe-primaer-h:  #003366;
      --farbe-akzent:     #FFED00;
      --farbe-akzent-h:   #FFF44F;
      --farbe-gefahr:     #A4243B;
      --farbe-text:       #1A1A1A;
      --farbe-text-ged:   #6B7280;
      --farbe-rahmen:     #D6D3CD;
      --farbe-deaktiv:    #C5C3BE;
      --farbe-erfolg:     #002440;

      --schrift-text:    'DM Sans', sans-serif;
      --schrift-anzeige: 'DM Serif Display', serif;
      --radius:          10px;
      --schatten-kl:     0 1px 3px rgba(0,0,0,.06);
      --schatten-md:     0 4px 16px rgba(0,0,0,.08);
      --schatten-gr:     0 8px 30px rgba(0,0,0,.10);
      --uebergang:       .25s cubic-bezier(.4,0,.2,1);
    }

    html { font-size: 16px; }
    body {
      font-family: var(--schrift-text);
      background: var(--farbe-hg);
      color: var(--farbe-text);
      min-height: 100vh;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    .sr-only {
      position: absolute; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0,0,0,0); border: 0;
    }

    @media print {
      body { background: #fff; }
      app-huelle::part(kopfzeile) { display: none; }
    }

    /* Profilseite: Die Komponente liegt im App-Slot und braucht globale Regeln. */
    .profil-seite { display:block; width:100%; max-width:none; margin:0; padding:clamp(1.25rem,3vw,2rem); background:var(--farbe-flaeche); border-radius:var(--radius); box-shadow:var(--schatten-md); animation:profil-einblenden .35s ease-out; }
    @keyframes profil-einblenden { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
    .profil-seite h1, .profil-seite h2 { color:var(--farbe-primaer); font-family:var(--schrift-anzeige); }
    .profil-seite h1 { font-size:1.35rem; margin-bottom:.35rem; }
    .profil-seite h2 { font-size:1.1rem; margin-bottom:.35rem; }
    .profil-seite p { color:var(--farbe-text-ged); margin-bottom:1rem; }
    .profil-seite .untertitel { font-size:.88rem; margin-bottom:1.75rem; }
    .profil-abschnitt + .profil-abschnitt { margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--farbe-rahmen); }
    .profil-seite form, .profil-totp-aktionen { display:grid; gap:.7rem; }
    .profil-seite .form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; align-items:start; }
    .profil-seite .feld { min-width:0; margin-bottom:0; }
    .profil-passwortbereich { margin:1.25rem 0 0; padding:1rem; border:1px solid var(--farbe-rahmen); border-radius:var(--radius); }
    .profil-passwortbereich legend { padding:0 .35rem; color:var(--farbe-primaer); font-weight:700; }
    .profil-hinweis { font-size:.88rem; margin-bottom:.8rem !important; }
    .profil-seite .form-actions { display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; margin-top:.45rem; }
    .profil-seite .form-actions button { margin:0; }
    .profil-seite label { display:block; color:var(--farbe-text-ged); font-size:.8rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
    .profil-seite input { width:100%; min-height:44px; margin-top:.35rem; padding:.7rem .85rem; border:1.5px solid var(--farbe-rahmen); border-radius:var(--radius); background:var(--farbe-hg); font:inherit; outline:none; transition:var(--uebergang); }
    .profil-seite input:focus { border-color:var(--farbe-akzent); box-shadow:0 0 0 3px rgba(255,237,0,.2); }
    .profil-seite input[readonly] { color:var(--farbe-text-ged); }
    .profil-seite button { width:max-content; margin:0; font:600 .9rem var(--schrift-text); padding:.65rem 1.5rem; border-radius:var(--radius); border:0; cursor:pointer; transition:var(--uebergang); }
    .profil-seite .btn-primaer { background:var(--farbe-primaer); color:#fff; }
    .profil-seite .btn-primaer:hover { background:var(--farbe-primaer-h); }
    .profil-seite .btn-sekundaer { background:transparent; color:var(--farbe-primaer); border:1.5px solid var(--farbe-rahmen); }
    .profil-seite .btn-sekundaer:hover { border-color:var(--farbe-primaer); }
    .profil-seite .btn-gefahr { background:var(--farbe-gefahr); color:#fff; }
    .profil-meldung { padding:.7rem; border-radius:var(--radius); background:var(--farbe-hg); }
    .profil-meldung.fehler { color:var(--farbe-gefahr); }
    .profil-meldung.erfolg { color:var(--farbe-erfolg); }
    .profil-secret { display:block; overflow-wrap:anywhere; padding:.7rem; border:1px solid var(--farbe-rahmen); border-radius:var(--radius); background:var(--farbe-hg); font:600 .82rem/1.35 ui-monospace,SFMono-Regular,Menlo,monospace; }
    .profil-totp-setup { display:grid; grid-template-columns:180px minmax(0,1fr); gap:.9rem; align-items:start; }
    .profil-totp-qr { display:block; width:180px; height:180px; padding:.35rem; background:#fff; border:1px solid var(--farbe-rahmen); border-radius:var(--radius); image-rendering:pixelated; }
    @media(max-width:520px){.profil-totp-setup{grid-template-columns:1fr}.profil-totp-qr{margin:auto}}