/* ============================================================
   profil.css — Kontoseite „Ihr Stand“ (/konto/, /account/)
   DE und EN byte-identisch. Alles steht unter der Klasse .pf, die
   profil-seite.js auf #accountRoot setzt. Tokens aus styles.css (:root und
   v7-Block); Zuordnung in docs/profilseite-v1/zustaende.md, Abschnitt 4.

   Blöcke, je mit Marke. Die drei letzten füllen eigene Läufe; jeder Lauf
   schreibt nur in seinen Block.
     Gerüst              Tokens, Grundbausteine, Menüband, Admin-Zeile
     Stand               dunkler Kopf, Karrierekarte, drei Zahlen
     Verlauf             Fünfeck, Pfad, Antworten
     Laufbahn            Fakten, Abzeichen
     Szenarien           (Lauf L5)
     Spielraum           (Lauf L6)
     Profil und Konto    (Lauf L7)

   Grundbausteine aus dem Block Gerüst, für alle Bereiche:
     .pf-wrap            Breite und Seitenrand
     .pf-sec             Bereich der Übersicht (Abstand, Sprungziel)
     .pf-eyebrow, .pf-h1, .pf-h2, .pf-h3, .pf-lead
     .pf-card, .pf-card-pro, .pf-card-innen (Polster 20 und 24 px)
     .pf-btn mit -hell, -rand-navy, -rand, -rand-rot, -accent, -pro
     .pf-go              Textlink mit Pfeil, 44 px Zielhöhe
     .pf-chip mit -neutral, -accent, -rand, -gut, -mittel, -eng
     .pf-hinweis         gestrichelte Hinweiskarte (Baustein B9)
     .pf-tnum (Fließtext), .pf-tnum-tab (Tabellenspalten)
     .pf-d-only, .pf-m-only, .pf-hide-sm
   Pro-Chip: .v7-chip.v7-chip-pro aus styles.css, hier im Grün der
   Pro-Signatur; der Admin-Chip trägt zusätzlich .pf-chip-admin und bleibt navy.
   ============================================================ */

/* === Gerüst === */

/* Signalfarben wie im Block .v7 von styles.css (dort nur unter .v7 gesetzt);
   tests/profil-seite.test.js hält beide Stellen gleich. --red bleibt das Rot
   der Site. Zwei eigene Tokens mit Alpha: das Band der Leistung liegt über
   der blauen Fläche, die Füllung des Fünfecks über dem Gitter. */
.pf{
  --green:#087a5b;--green-vivid:#0ea875;--green-soft:#e4f6ee;
  --amber-ink:#8a5700;--amber-soft:#fdf6e4;
  --pf-band:rgba(14,168,117,.14);
  --pf-radar-fill:rgba(29,90,160,.14);
  --pf-h1:clamp(1.75rem,1.5rem + 1.1vw,2.125rem);
  --pf-h2:clamp(1.375rem,1.2rem + .85vw,1.75rem);
  font-family:var(--v7-text);letter-spacing:var(--v7-text-track);color:var(--ink);line-height:1.5;text-align:left;
}
.account-root.pf{margin-top:0}
/* .subpage.active setzt display:block und überstimmt das Attribut hidden. */
#accountGast[hidden],#accountRoot[hidden]{display:none}
/* Vor der Kontoansicht (Laden, Weiterleitung zur Kasse) steht der Inhalt in
   Seitenbreite; #accountRoot selbst läuft über die volle Breite. */
.account-root>.acc-paid{max-width:calc(var(--maxw) - 72px);margin:24px max(20px,calc((100% - var(--maxw)) / 2 + 36px)) 0}
.pf :where(p,h1,h2,h3,figure,dl,dd,ul,ol){margin:0}
.pf :where(ul,ol){padding:0}
.pf :where(button,input,select){font:inherit;letter-spacing:inherit}
.pf :where(a){color:var(--accent)}
.pf :where(a:hover){color:var(--accent-deep)}
.pf [hidden]{display:none !important}

.pf-wrap{max-width:var(--v7-maxw);margin-inline:auto;padding-inline:36px}
/* Schibsted Grotesk setzt mit tabular-nums auch Punkt und Komma auf volle
   Ziffernbreite („86 . 500“). Im Fließtext deshalb nur lining-nums; Spalten
   einer Tabelle nehmen .pf-tnum-tab. */
.pf-tnum{font-variant-numeric:lining-nums}
.pf-tnum-tab{font-variant-numeric:tabular-nums lining-nums}
.pf-m-only{display:none}
.pf-sec{padding-top:48px;scroll-margin-top:168px}
.pf-ende{height:64px}
.acc-laden{margin:48px 0;color:var(--slate);font-size:15px}

.pf-eyebrow{font-size:14px;font-weight:600;color:var(--accent)}
.pf-h1{font-family:var(--v7-display);font-weight:var(--v7-display-wght);letter-spacing:var(--v7-display-track);font-size:var(--pf-h1);line-height:1.12;color:var(--navy);text-wrap:balance}
.pf-h2{font-family:var(--v7-display);font-weight:var(--v7-display-wght);letter-spacing:var(--v7-display-track);font-size:var(--pf-h2);line-height:1.2;color:var(--navy);text-wrap:balance}
.pf-h3{font-family:var(--v7-text);font-size:15px;font-weight:600;letter-spacing:var(--v7-text-track);line-height:1.4;color:var(--graphite)}
.pf-lead{font-size:14px;color:var(--slate);max-width:56ch}
.pf-kopfzeile{display:flex;justify-content:space-between;align-items:flex-end;gap:8px 16px;flex-wrap:wrap;margin-top:6px}

.pf-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card)}
.pf-card-pro{border:1.5px solid var(--green-vivid);box-shadow:0 0 0 3px var(--green-soft)}
.pf-card-innen{padding:20px 24px}

.pf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border:1px solid transparent;border-radius:var(--radius);font-family:var(--v7-text);font-size:15px;font-weight:600;line-height:1.3;text-decoration:none;cursor:pointer;white-space:normal;text-align:center;transition:background .15s,border-color .15s}
.pf-btn-hell,.pf-btn-hell:hover{background:var(--on-navy);color:var(--navy)}
.pf-btn-hell:hover{background:var(--accent-soft)}
.pf-btn-rand-navy,.pf-btn-rand-navy:hover{border-color:var(--navy-hair-2);background:none;color:var(--on-navy)}
.pf-btn-rand-navy:hover{border-color:var(--on-navy-3)}
.pf-btn-rand,.pf-btn-rand:hover{border-color:var(--line);background:var(--bg);color:var(--navy);font-size:14px}
.pf-btn-rand:hover{border-color:var(--slate-2);background:var(--bg-soft)}
/* Umrandung in Rot für die eine zerstörende Aktion (Konto löschen);
   --red auf Weiß 6,9:1, auf --red-soft 5,5:1. */
.pf-btn-rand-rot,.pf-btn-rand-rot:hover{border-color:var(--red);color:var(--red)}
.pf-btn-rand-rot:hover{background:var(--red-soft)}
.pf-btn-accent,.pf-btn-accent:hover{background:var(--accent);color:var(--on-navy)}
.pf-btn-accent:hover{background:var(--accent-deep)}
.pf-btn-pro,.pf-btn-pro:hover{background:var(--green);color:var(--on-navy)}
.pf-btn:disabled{opacity:.55;cursor:default}

.pf-go{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;color:var(--accent);font-family:var(--v7-text);font-size:14px;font-weight:600;text-decoration:none;cursor:pointer}
.pf-go:hover{color:var(--accent-deep)}

.pf-chip{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;border-radius:20px;padding:4px 10px;white-space:nowrap;line-height:1.3}
.pf-chip-neutral{background:var(--bg-soft-2);color:var(--slate)}
.pf-chip-accent{background:var(--accent-soft);color:var(--accent-deep)}
.pf-chip-rand{background:var(--bg);color:var(--slate);border:1px solid var(--line)}
.pf-chip-gut{background:var(--green-soft);color:var(--green)}
.pf-chip-mittel{background:var(--accent-soft);color:var(--accent-deep)}
.pf-chip-eng{background:var(--amber-soft);color:var(--amber-ink)}
/* Pro-Chip aus styles.css (dort navy): im Konto im Grün der Pro-Signatur,
   Weiß darauf 5,3:1. Nur der Admin-Chip bleibt navy. */
.pf .v7-chip-pro{background:var(--green);color:var(--on-navy)}
.pf .v7-chip-pro.pf-chip-admin{background:var(--navy)}

.pf-hinweis{display:flex;gap:14px;align-items:center;padding:14px 16px;border:1.5px dashed var(--slate-3);border-radius:var(--r-card);background:var(--bg-soft)}
.pf-hinweis-ic{flex:none;width:34px;height:34px;border-radius:50%;background:var(--bg);border:1.5px solid var(--slate-3);color:var(--slate-2);display:grid;place-items:center}
.pf-hinweis p{font-size:13px;color:var(--slate);margin-top:2px}

/* Hinweise aus der Kasse (bezahlt, Kasse nicht gestartet) über dem Menüband */
.pf-meldungen{padding-top:16px}
.pf-meldungen .acc-paid{margin-bottom:16px}
.pf-meldungen .acc-msg{margin-bottom:16px}

/* Menüband: Reiter und Sprungmarken kleben unter dem Seitenkopf (70 px) */
.pf-band{position:sticky;top:70px;z-index:35;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--shadow-xs)}
.pf-reiter-zeile{background:var(--bg)}
.pf-reiter-zeile .pf-wrap{display:flex;align-items:stretch;justify-content:space-between;gap:16px}
.pf-reiter{display:flex;align-items:stretch;gap:4px}
.pf-tab{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 14px;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;background:none;font-size:15px;font-weight:600;color:var(--slate);cursor:pointer;white-space:nowrap}
.pf-tab:hover{color:var(--navy)}
.pf-tab[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--accent)}
.pf-tab svg{flex:none}
/* Rechts im Band: E-Mail und Chip gehören zusammen (10 px), der Knopf
   „Abmelden“ steht mit 16 px daneben; 44 px hoch in der 52-px-Zeile. */
.pf-wer{display:flex;align-items:center;gap:16px;min-width:0;font-size:13px;color:var(--slate)}
.pf-wer-id{display:flex;align-items:center;gap:10px;min-width:0}
.pf-wer-mail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-wer-ab{flex:none}
.pf-marken{border-top:1px solid var(--line-2);background:var(--bg-soft)}
.pf-marken-scroll{overflow-x:auto;scrollbar-width:none}
.pf-marken-scroll::-webkit-scrollbar{display:none}
.pf-marken-liste{display:flex;align-items:center;gap:24px;width:max-content;list-style:none}
.pf-marke{display:inline-flex;align-items:center;min-height:44px;color:var(--slate);text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap}
.pf-marke:hover{color:var(--navy)}

/* Admin-Zeile über dem Menüband (Zustand Z8) */
.pf-admin{background:var(--bg-soft);border-bottom:1px solid var(--line)}
.pf-admin .pf-wrap{display:flex;align-items:stretch;justify-content:space-between;gap:16px}
.pf-admin-hinweis{display:flex;align-items:center;font-size:13px;color:var(--slate)}
.pf-analyse{padding-top:32px}

@media(max-width:700px){
  .pf-wrap{padding-inline:20px}
  .pf-hide-sm{display:none !important}
  .pf-m-only{display:block}
  .pf-d-only{display:none !important}
  .pf-tab{padding:0 10px;font-size:14.5px}
  /* Bei 390 px tragen die Wörter die Reiter allein: ohne die beiden Symbole
     (je 26 px) passt „Abmelden“ als Knopf in dieselbe Zeile. */
  .pf-tab svg{display:none}
  .pf-wer-ab{padding-inline:12px}
  /* Nur die Reiterzeile klebt; die Sprungmarken scrollen mit dem Inhalt
     (70 + 52 + 44 px wären ein Fünftel des Bildschirms). */
  .pf-band{display:contents}
  .pf-reiter-zeile{position:sticky;top:70px;z-index:35;border-bottom:1px solid var(--line);box-shadow:var(--shadow-xs)}
  .pf-marken{border-top:0;border-bottom:1px solid var(--line)}
  .pf-marken-scroll{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding-right:40px}
  .pf-sec{scroll-margin-top:130px}
}
/* Bis 480 px rücken Reiter und Knopf enger: bei 360 px Bildbreite bleiben
   so rund 15 px (DE) und 7 px (EN) Luft in der Zeile. */
@media(max-width:480px){
  .pf-reiter-zeile .pf-wrap{gap:8px}
  .pf-tab{padding:0 8px;font-size:14px}
  .pf-wer-ab{padding-inline:10px}
}

/* === Stand === */

.pf-stand{background:var(--navy);color:var(--on-navy);padding:28px 0 24px;scroll-margin-top:168px}
.pf-stand-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.pf-stand-eyebrow{font-size:13.5px;font-weight:600;color:var(--sky)}
.pf-stand .pf-h1{color:var(--on-navy);margin-top:6px}
.pf-stand-knoepfe{display:flex;flex-wrap:wrap;gap:10px}

.pf-karte{margin-top:20px;background:var(--navy-2);border:1px solid var(--navy-hair);border-radius:var(--r-card);padding:20px 24px;display:flex;flex-wrap:wrap;row-gap:16px}
.pf-hcol{flex:1 1 220px;min-width:0;padding:4px 24px;border-left:1px solid var(--navy-hair)}
.pf-hcol:first-child{border-left:0;padding-left:0}
.pf-hcol:last-child{padding-right:0}
.pf-hcol-typ{flex:1 1 250px}
.pf-hcol-sum{flex:2 1 420px}
.pf-hcol-rolle{flex:1 1 240px}
.pf-k-label{font-size:12.5px;font-weight:600;color:var(--sky)}
.pf-k-meta{font-size:12.5px;color:var(--on-navy-3)}
.pf-k-typ{font-family:var(--v7-display);font-weight:var(--v7-display-wght);letter-spacing:var(--v7-display-track);font-size:42px;line-height:1;color:var(--on-navy);margin-top:14px}
.pf-k-titel{font-size:15px;font-weight:600;color:var(--on-navy);margin-top:6px}
.pf-k-antwort{font-family:var(--v7-display);font-weight:var(--v7-display-wght);letter-spacing:var(--v7-display-track);font-size:19px;line-height:1.3;color:var(--sky);margin-top:10px;max-width:34ch}
.pf-sumdl{margin-top:6px;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 14px;font-size:14px;line-height:1.45}
.pf-sumdl dt{color:var(--on-navy-3)}
.pf-sumdl dd{color:var(--on-navy)}
.pf-sumdl dd b{font-weight:600}
.pf-sumdl .pf-sum-next{font-weight:600}
.pf-k-rolle{font-size:17px;font-weight:600;color:var(--on-navy);margin-top:4px}
.pf-k-zeile{font-size:13px;color:var(--on-navy-3)}
.pf-k-abz{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.pf-k-abz svg{display:block}
.pf-k-zahl{font-size:12.5px;color:var(--on-navy-3);margin-top:8px}
.pf-karte .pf-go,.pf-fakten a{color:var(--sky)}
.pf-karte .pf-go:hover,.pf-fakten a:hover{color:var(--on-navy)}
.pf-k-erst{font-size:15px;font-weight:600;color:var(--on-navy);margin-top:14px}
.pf-k-erst-satz{max-width:52ch}
.pf-k-erst-knopf{margin-top:16px}
.pf-fakten{display:flex;flex-wrap:wrap;gap:0 16px;align-items:center;font-size:13.5px;color:var(--on-navy-3);margin-top:8px}
.pf-fakten a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:600}

/* Abzeichen: Ring aus Stufen, Scheibe, Symbol. Auf Navy und auf Weiß. */
.pf-abz-ring{fill:none;stroke:var(--line)}
.pf-abz-voll{fill:none;stroke:var(--accent)}
.pf-abz-scheibe{fill:var(--accent-soft)}
.pf-abz-sym{fill:none;stroke:var(--accent-deep);stroke-linecap:round;stroke-linejoin:round}
.pf-abz-aus .pf-abz-ring{stroke:var(--line-2)}
.pf-abz-aus .pf-abz-scheibe{fill:var(--bg);stroke:var(--slate-3);stroke-width:1.5;stroke-dasharray:3 3}
.pf-abz-aus .pf-abz-sym{stroke:var(--slate-3)}
.pf-abz-navy .pf-abz-ring{stroke:var(--navy-hair)}
.pf-abz-navy .pf-abz-voll{stroke:var(--sky)}
.pf-abz-navy .pf-abz-scheibe{fill:var(--navy-hair)}
.pf-abz-navy .pf-abz-sym{stroke:var(--on-navy)}

/* Drei Zahlen */
.pf-zahlen{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:12px 0}
.pf-zahlen-karte{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));overflow:hidden}
.pf-kz{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:16px;row-gap:2px;align-items:center;padding:12px 20px;text-decoration:none;color:var(--ink);min-height:60px}
.pf-kz:hover{background:var(--bg-soft);color:var(--ink)}
.pf-kz+.pf-kz{border-left:1px solid var(--line-2)}
.pf-kz-l{grid-column:1;grid-row:1;display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:13px;font-weight:600;color:var(--graphite)}
.pf-kz-l .v7-chip{font-size:11px;padding:1px 8px}
.pf-kz-v{grid-column:2;grid-row:1 / span 2;font-family:var(--v7-display);font-weight:var(--v7-display-wght);letter-spacing:var(--v7-display-track);font-size:24px;line-height:1;color:var(--navy);white-space:nowrap;text-align:right}
.pf-kz-s{grid-column:1;grid-row:2;font-size:12.5px;color:var(--slate)}
.pf-plus{color:var(--green)}
.pf-minus{color:var(--red)}

@media(max-width:1000px){
  .pf-zahlen-karte{grid-template-columns:1fr}
  .pf-kz+.pf-kz{border-left:0;border-top:1px solid var(--line-2)}
}
@media(max-width:700px){
  .pf-stand{scroll-margin-top:130px}
  .pf-stand-knoepfe,.pf-stand-knoepfe .pf-btn{width:100%}
  .pf-karte{padding:20px}
  .pf-hcol{flex-basis:100%;border-left:0;border-top:1px solid var(--navy-hair);padding:16px 0 0}
  .pf-hcol:first-child{border-top:0;padding-top:0}
  .pf-sumdl{grid-template-columns:1fr;row-gap:2px}
  .pf-sumdl dd{margin-bottom:8px}
  .pf-k-erst-knopf{width:100%}
  .pf-kz-v{font-size:22px}
}

/* === Verlauf === */

.pf-verlauf{padding-top:40px}
.pf-verlauf-karte{padding:16px 24px;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.pf-fuenfeck{flex:0 0 auto;width:220px;height:auto;display:block}
.pf-fe-ring{fill:none;stroke:var(--line);stroke-width:2}
.pf-fe-ring-i,.pf-fe-achse{fill:none;stroke:var(--line-2);stroke-width:2}
.pf-fe-0{fill:var(--pf-radar-fill);stroke:var(--accent);stroke-width:4}
.pf-fe-1{fill:none;stroke:var(--slate-2);stroke-width:3;stroke-dasharray:9 7}
.pf-fe-2{fill:none;stroke:var(--slate-3);stroke-width:3;stroke-dasharray:2 7;stroke-linecap:round}
.pf-fe-text{font-family:var(--v7-text);font-size:28px;fill:var(--slate)}
.pf-fe-text-an{fill:var(--navy);font-weight:600}
.pf-verlauf-text{flex:1 1 420px;min-width:0}
.pf-verlauf-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:4px 16px;flex-wrap:wrap}
.pf-verlauf-links{display:flex;flex-wrap:wrap;gap:0 16px}
.pf-pfad{list-style:none;margin-top:4px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pf-pfad li{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--slate)}
.pf-pfad-d{font-size:12.5px}
.pf-pfad-pfeil{color:var(--slate-3);font-weight:400}
.pf-pfad .pf-pfad-jetzt{font-weight:600;color:var(--navy)}
.pf-pfad-jetzt .pf-pfad-d{font-weight:500}
.pf-pm{flex:none;width:18px}
.pf-pm-2{border-top:2px dotted var(--slate-3)}
.pf-pm-1{border-top:2px dashed var(--slate-2)}
.pf-pm-0{height:10px;border-radius:2px;background:var(--pf-radar-fill);border:2px solid var(--accent)}
.pf-verlauf-satz{font-size:14.5px;line-height:1.5;color:var(--graphite);margin-top:10px;max-width:58ch}

.pf-antworten{margin-top:16px}
.pf-antworten summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 24px;font-size:15px;font-weight:600;color:var(--graphite);cursor:pointer;list-style:none}
.pf-antworten summary::-webkit-details-marker{display:none}
.pf-antworten summary::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--slate-2);border-bottom:2px solid var(--slate-2);transform:rotate(45deg);margin-right:4px}
.pf-antworten[open] summary::after{transform:rotate(-135deg)}
.pf-antworten[open] summary{border-bottom:1px solid var(--line-2)}
.pf-antw-liste{list-style:none;padding:8px 24px 16px;counter-reset:pfa}
.pf-antw-liste li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 8px;padding:10px 0;border-top:1px solid var(--line-2);font-size:14px;counter-increment:pfa}
.pf-antw-liste li:first-child{border-top:0}
.pf-antw-liste li::before{content:counter(pfa);grid-row:1 / span 2;font-size:13px;font-weight:600;color:var(--slate-2);font-variant-numeric:lining-nums;padding-top:1px}
.pf-antw-f{color:var(--slate);max-width:66ch}
.pf-antw-a{font-weight:600;color:var(--navy);max-width:66ch}
.pf-antw-fuss{display:flex;flex-wrap:wrap;gap:0 16px;padding:0 24px 12px}

@media(min-width:701px){.pf-fuenfeck{width:300px}.pf-fe-text{font-size:22px}}

@media(max-width:700px){
  .pf-verlauf-karte{padding:16px 20px}
  .pf-fuenfeck{margin-inline:auto}
  .pf-verlauf-text{display:flex;flex-direction:column}
  .pf-verlauf-kopf{display:contents}
  .pf-verlauf-links{order:1;margin-top:4px}
  .pf-antworten summary{padding:0 20px}
  .pf-antw-liste{padding:8px 20px 16px}
  .pf-antw-fuss{padding:0 20px 12px}
}

/* === Laufbahn === */

.pf-laufbahn .pf-lead{max-width:52ch}
.pf-laufbahn .pf-kopfzeile{display:block}
.pf-laufbahn .pf-kopfzeile .pf-lead{margin-top:4px}
.pf-lb-fakten{margin-top:20px;padding:14px 24px;display:flex;flex-wrap:wrap;gap:8px 28px;font-size:14px}
.pf-lb-fakten dt{display:inline;color:var(--slate)}
.pf-lb-fakten dd{display:inline;font-weight:600}
.pf-lb-q{font-size:12.5px;font-weight:400;color:var(--slate-2)}
.pf-lb-abz{margin-top:16px;padding:24px}
.pf-lb-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.pf-lb-kopf p{font-size:13px;color:var(--slate)}
.pf-lb-gruppen{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px 32px;margin-top:14px}
.pf-lb-gruppe{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);padding:6px 0}
.pf-lb-liste{list-style:none}
.pf-lb-liste li{display:flex;gap:14px;align-items:center;padding:6px 0;min-height:68px}
.pf-lb-liste svg{flex:none}
.pf-lb-t{min-width:0}
.pf-lb-n{display:block;font-size:14.5px;font-weight:600}
.pf-lb-s{display:block;font-size:13px;color:var(--graphite)}
.pf-lb-x{display:block;font-size:12.5px;color:var(--slate)}
.pf-lb-aus .pf-lb-n{font-weight:400;color:var(--slate)}
.pf-lb-fuss{font-size:13px;color:var(--slate);margin-top:12px;max-width:66ch}

@media(max-width:700px){
  .pf-lb-fakten{padding:14px 20px}
  .pf-lb-abz{padding:20px}
}

/* === Szenarien === */

/* Eine Karte: Tabelle (ab 701 px) oder Liste (bis 700 px), darunter die
   Zeilen, die für beide gelten (Vorschlag, Option anlegen, Pro). */
#szenarien .pf-lead{margin-top:4px}
.pf-sz-karte{margin-top:16px;overflow:hidden}
/* position: die unsichtbaren Zusätze (.sr-only, absolut gesetzt) bleiben im
   Rollbereich und verbreitern die Seite nicht. */
.pf-sz-scroll{position:relative;overflow-x:auto}
.pf-sz-tab{width:100%;min-width:920px;border-collapse:collapse;font-size:14px}
.pf-sz-tab th,.pf-sz-tab td{padding:2px 10px;text-align:left;vertical-align:middle}
.pf-sz-tab th:first-child{padding-left:20px}
.pf-sz-tab thead th{padding-block:12px;font-size:13px;font-weight:500;line-height:1.3;color:var(--slate);vertical-align:bottom}
.pf-sz-tab tbody tr{height:48px;border-top:1px solid var(--line-2)}
.pf-sz-tab tbody th{font-weight:600;color:var(--navy);white-space:nowrap}
.pf-sz-tab .pf-sz-r{text-align:right;white-space:nowrap}
/* Spaltenköpfe dürfen umbrechen, damit die Tabelle mit drei Optionen in die Karte passt. */
.pf-sz-tab thead .pf-sz-r,.pf-sz-tab thead .pf-sz-ab{white-space:normal}
.pf-sz-tab .pf-sz-ab{padding-left:24px;white-space:nowrap}
.pf-sz-tab .pf-sz-akt{text-align:right;padding-right:20px}
.pf-sz-heute{background:var(--bg-soft)}
.pf-sz-fett{font-weight:600;color:var(--navy)}
.pf-sz-neben{font-weight:400;color:var(--slate)}
.pf-sz-aus{color:var(--slate)}
.pf-sz-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none}
.pf-sz-link:hover{text-decoration:underline}
.pf-sz-beste,.pf-sz-beste:hover{color:var(--green)}
.pf-sz-unter{display:block;font-size:12.5px;line-height:1.3;color:var(--slate);margin-top:2px;white-space:normal;max-width:24ch}
.pf-sz-abst{display:inline-flex;align-items:center;gap:8px;color:var(--navy)}
.pf-sz-wert{font-weight:600}
.pf-sz-balken{flex:none;display:block}
.pf-sz-b0{fill:var(--line-2)}
.pf-sz-b1{fill:var(--green-vivid)}
.pf-sz-weg{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border:0;background:none;color:var(--slate);font-size:13px;font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pf-sz-weg:hover{color:var(--navy)}
.pf-sz-weg:disabled{opacity:.55;cursor:default}

/* Gesperrte Option: feste Formen, kein Wert. */
.pf-sz-zu th,.pf-sz-zu .pf-sz-m-t{font-weight:500;color:var(--slate)}
.pf-sz-form{display:inline-block;width:56px;height:8px;border-radius:4px;background:var(--line);vertical-align:middle}
.pf-sz-form-breit{width:160px}

.pf-sz-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-height:48px;padding:2px 20px;border-top:1px solid var(--line-2);font-size:14px}
.pf-sz-vorschlag,.pf-sz-pro{padding-block:8px}
.pf-sz-vorschlag{color:var(--graphite)}
.pf-sz-pro-t{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--navy)}
.pf-sz-pro-t svg{flex:none;color:var(--green-vivid)}
.pf-sz-pro-p{font-size:13px;color:var(--slate)}
.pf-sz-pro .pf-btn{font-size:14px}

.pf-sz-liste{list-style:none}
.pf-sz-m{padding:12px 16px;border-top:1px solid var(--line-2)}
.pf-sz-m:first-child{border-top:0}
.pf-sz-m-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pf-sz-m-l{min-width:0}
.pf-sz-m-t{font-size:14.5px;font-weight:600;color:var(--navy)}
.pf-sz-m-s{font-size:12.5px;color:var(--slate)}
.pf-sz-m-v{flex:none;text-align:right;white-space:nowrap}
.pf-sz-m-v b{display:block;font-family:var(--v7-display);font-weight:var(--v7-display-wght);letter-spacing:var(--v7-display-track);font-size:22px;line-height:1.1;color:var(--navy)}
.pf-sz-m-v .pf-plus{color:var(--green)}
.pf-sz-m-v .pf-minus{color:var(--red)}
.pf-sz-m-v span{font-size:12px;color:var(--slate)}
.pf-sz-m-akt{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 16px;margin-top:4px}

.pf-sz-note{font-size:12.5px;color:var(--slate);margin-top:8px;max-width:66ch}
.pf-sz-karte+.pf-sz-note{margin-top:12px}
.pf-sz-plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-top:24px}
.pf-sz-plan-t{flex:1 1 240px;min-width:0}
.pf-sz-plan-k{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.pf-sz-plan-pro{font-size:12.5px;font-weight:600;color:var(--slate)}
.pf-sz-ohne{flex-wrap:wrap;margin-top:16px}

@media(max-width:1000px){
  .pf-sz-karte .pf-d-only{display:none !important}
  .pf-sz-karte .pf-m-only{display:block}
}
@media(max-width:700px){
  .pf-sz-fuss{padding-inline:16px}
  .pf-sz-pro .pf-btn,.pf-sz-ohne .pf-btn{width:100%}
}

/* === Spielraum === */

/* Kopf, dann Kurve und „Ihre Zahlen“ nebeneinander, darunter der Kasten zur
   Rechnung. Die Kurve steht in zwei Fassungen im HTML: breit ab 701 px,
   schmal darunter (.pf-d-only, .pf-m-only). Beide skalieren mit der Breite
   und behalten ihr Seitenverhältnis; nichts wird beschnitten. */
.pf-sp-kopf{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:6px}
.pf-sp-kopf .pf-h2{max-width:40ch}
.pf-sp-lead{margin-top:8px;max-width:58ch}
.pf-sp-raster{display:flex;flex-wrap:wrap;gap:24px;margin-top:24px;align-items:flex-start}
.pf-sp-fig{flex:2 1 640px;min-width:0;padding:24px}
.pf-sp-fig-leer{padding:0}
.pf-sp-fig-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px}

.pf-sp-svg{width:100%;height:auto;margin-top:12px}
.pf-sp-svg-breit{display:block}
.pf-sp-svg-schmal{max-width:420px;margin-inline:auto}
.pf-sp-svg text{font-family:var(--v7-text);font-size:12px;fill:var(--slate);font-variant-numeric:lining-nums}
.pf-sp-svg-schmal text{font-size:12.5px}
.pf-sp-gitter{stroke:var(--line-2)}
.pf-sp-achse{stroke:var(--slate-3)}
.pf-sp-fl-a{fill:var(--accent-soft)}
.pf-sp-fl-r{fill:var(--line)}
.pf-sp-fl-l{fill:var(--pf-band)}
.pf-sp-li{fill:none;stroke-width:2.5;stroke-linejoin:round}
.pf-sp-li-r{stroke:var(--slate-2);stroke-width:2}
.pf-sp-li-a{stroke:var(--accent)}
.pf-sp-li-lu{stroke:var(--green)}
.pf-sp-li-lo{stroke:var(--green);stroke-width:2;stroke-dasharray:6 4}
.pf-sp-pk-s{fill:var(--navy)}
.pf-sp-pk-r{fill:var(--slate-2)}
.pf-sp-pk-a{fill:var(--accent)}
.pf-sp-pk-l{fill:var(--green)}
.pf-sp-pk-lo{fill:var(--bg);stroke:var(--green);stroke-width:2}
/* Endmarken liegen über Linien und Flächen: ein Rand in der Farbe der Karte
   hält sie lesbar. */
.pf-sp-svg .pf-sp-mk{font-size:12.5px;font-weight:600;paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round}
.pf-sp-svg .pf-sp-mk-r{fill:var(--slate)}
.pf-sp-svg .pf-sp-mk-a{fill:var(--accent)}
.pf-sp-svg .pf-sp-mk-l{fill:var(--green)}
.pf-sp-svg .pf-sp-mk-s{fill:var(--navy)}

/* Legende und Werte in einer Liste */
.pf-sp-leg{list-style:none;margin-top:12px;display:grid;gap:8px;font-size:13.5px;color:var(--graphite)}
.pf-sp-leg li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:2px 8px;align-items:center}
.pf-sp-leg b{font-weight:600;color:var(--navy);text-align:right}
.pf-sp-sw{width:22px;height:12px}
.pf-sp-sw-r{background:var(--line);border-top:2px solid var(--slate-2)}
.pf-sp-sw-a{background:var(--accent-soft);border-top:2.5px solid var(--accent)}
.pf-sp-sw-l{background:var(--pf-band);border-top:2px dashed var(--green);border-bottom:2.5px solid var(--green)}
.pf-sp-unter{font-size:13px;color:var(--slate);margin-top:12px;max-width:66ch}

/* Ohne Pro: feste Formen, darunter die eine Pro-Leiste des Bereichs */
.pf-sp-platz{display:block;width:100%;height:auto;margin-top:16px;filter:blur(5px);user-select:none}
.pf-sp-platz .pf-sp-li{stroke-width:3}
.pf-sp-sperre{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:20px}
.pf-sp-sperre p{font-size:13px;color:var(--slate)}
.pf-sp-sperre p span{display:block}

/* „Ihre Zahlen“ und die Angaben */
.pf-sp-seite{flex:1 1 300px;min-width:0;padding:24px}
.pf-sp-dl{margin-top:12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 24px}
.pf-sp-dl>div{padding:12px 0;border-top:1px solid var(--line-2)}
.pf-sp-dl dt{font-size:13px;color:var(--slate)}
.pf-sp-dl dd{font-size:17px;font-weight:600;line-height:1.3;color:var(--navy);margin-top:2px}
.pf-sp-dl small{display:block;font-size:12.5px;font-weight:400;line-height:1.45;color:var(--slate);margin-top:2px}
.pf-sp-satz{font-size:13px;color:var(--slate);margin-top:8px}
.pf-sp-form{margin-top:12px;border-top:1px solid var(--line-2)}
.pf-sp-form summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;font-size:14px;font-weight:600;color:var(--accent);cursor:pointer;list-style:none}
.pf-sp-form summary::-webkit-details-marker{display:none}
.pf-sp-form summary::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-right:4px}
.pf-sp-form[open] summary::after{transform:rotate(-135deg)}
.pf-sp-felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 16px;margin-top:4px}
.pf-sp-feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.pf-sp-feld label{font-size:13px;font-weight:600;color:var(--graphite)}
.pf-sp-box{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--line-strong);border-radius:6px;background:var(--bg)}
.pf-sp-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft-2)}
.pf-sp-box:has([aria-invalid="true"]){border-color:var(--red)}
.pf-sp-box input,.pf-sp-box select{flex:1;min-width:0;height:42px;padding:0;border:0;outline:0;background:transparent;font-size:16px;color:var(--ink)}
.pf-sp-box input::placeholder{color:var(--slate-2);opacity:1}
.pf-sp-u{font-size:14px;color:var(--slate);white-space:nowrap}
.pf-sp-fh{font-size:12.5px;color:var(--red)}
.pf-sp-fh:empty{display:none}
.pf-sp-fbar{display:flex;justify-content:space-between;align-items:center;gap:12px 16px;flex-wrap:wrap;margin-top:16px;padding-top:12px;border-top:1px solid var(--line-2)}
.pf-sp-meld{flex:1 1 180px;min-width:0;font-size:12.5px;color:var(--slate)}
.pf-sp-ok{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--green)}
.pf-sp-fehler{color:var(--red)}
.pf-sp-form .pf-go{margin-top:4px;text-align:left}

/* Kasten zur Rechnung */
.pf-sp-kasten{margin-top:16px;padding:24px;background:var(--bg-soft)}
.pf-sp-kasten-kopf{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap}
.pf-sp-spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:0 48px}
.pf-sp-fakten{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 24px;margin-top:12px;font-size:14px;max-width:66ch}
.pf-sp-fakten>div{display:contents}
.pf-sp-fakten dt{color:var(--slate)}
.pf-sp-fakten dd{font-weight:600;color:var(--navy)}
.pf-sp-liste{margin-top:16px;padding-left:18px;display:grid;gap:6px;font-size:14px;color:var(--graphite);max-width:66ch}
.pf-sp-h4{margin:16px 0 0;font-family:var(--v7-text);font-size:13px;font-weight:600;letter-spacing:var(--v7-text-track);color:var(--graphite)}
.pf-sp-liste-h{margin-top:6px;font-size:13.5px;color:var(--slate)}
.pf-sp-klein{font-size:13px;color:var(--slate);margin-top:12px;max-width:66ch}
.pf-sp-klein b{font-weight:600;color:var(--graphite)}
.pf-sp-quellen a{text-decoration:underline;text-underline-offset:2px}
.pf-sp-fest{font-size:14px;font-weight:600;color:var(--navy);margin-top:16px;max-width:58ch}

/* Zwischen 701 und 900 px ist die breite Kurve schmaler als ihr Raster:
   größere Schrift im Raster hält die Beschriftung bei rund 11 bis 12 px. */
@media(min-width:701px) and (max-width:800px){
  .pf-sp-svg-breit text,.pf-sp-svg-breit .pf-sp-mk{font-size:15px}
}
@media(min-width:801px) and (max-width:900px){
  .pf-sp-svg-breit text,.pf-sp-svg-breit .pf-sp-mk{font-size:13px}
}
@media(min-width:1036px) and (max-width:1239px){
  .pf-sp-svg-breit text,.pf-sp-svg-breit .pf-sp-mk{font-size:15px}
}
@media(max-width:700px){
  .pf-sp-fig,.pf-sp-seite,.pf-sp-kasten{padding:20px}
  .pf-sp-fig-leer{padding:0}
  .pf-sp-leg li{grid-template-columns:22px minmax(0,1fr)}
  .pf-sp-leg b{grid-column:2;text-align:left}
  .pf-sp-sperre .pf-btn,.pf-sp-fbar .pf-btn{width:100%}
  .pf-sp-fakten{grid-template-columns:1fr;gap:2px}
  .pf-sp-fakten dd{margin-bottom:8px}
}

/* === Profil und Konto === */

/* Reiterinhalt: vier Karten in einer Spalte auf dem hellen Band */
#profil{background:var(--bg-soft);padding:32px 0 64px}
.pf-pk{max-width:980px;margin-inline:auto;display:flex;flex-direction:column;gap:16px}
.pf-pk-kopf .pf-lead{margin-top:6px;max-width:58ch}
.pf-form,#pf-karte-spielraum,#pf-konto{scroll-margin-top:138px}
.pf-form-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:4px 16px;flex-wrap:wrap}
.pf-form-kopf h2{display:flex;align-items:center;gap:8px;font-size:16px;color:var(--navy)}
.pf-form-kopf .v7-chip{font-size:11px;padding:1px 8px}
.pf-form-meta{font-size:12.5px;color:var(--slate)}

/* Felder: Beschriftung über dem Kasten, Hinweis oder Fehler darunter */
.pf-fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px 16px;align-items:start;margin-top:14px}
.pf-fgrid-w{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.pf-fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.pf-fld-l{font-size:13px;font-weight:600;color:var(--graphite)}
.pf-fld-box{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--line-strong);border-radius:6px;background:var(--bg)}
.pf-fld-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft-2)}
.pf-fld-box.pf-fehler{border-color:var(--red)}
.pf-fld-i,.pf-fld-s{flex:1;min-width:0;height:42px;padding:0;border:0;outline:0;background:transparent;font-size:15px;color:var(--ink)}
/* Auswahl ohne Eigenform des Browsers: der Text beginnt wie in den Nachbarfeldern, der Winkel ist gezeichnet */
.pf-fld-s{-webkit-appearance:none;appearance:none;align-self:stretch;height:auto;margin:0 -12px;padding:0 36px 0 12px;border-radius:6px;cursor:pointer;text-overflow:ellipsis}
.pf-fld-wahl::after{content:"";position:absolute;right:17px;top:50%;width:6px;height:6px;margin-top:-5px;border-right:1.7px solid var(--slate-2);border-bottom:1.7px solid var(--slate-2);transform:rotate(45deg);pointer-events:none}
.pf-fld-u{font-size:14px;color:var(--slate);white-space:nowrap}
.pf-fld-h{font-size:12.5px;color:var(--slate)}
.pf-fld-h:empty{display:none}
.pf-fld-h.pf-fehler{color:var(--red)}

/* Ortsfeld: der Knopf aus ortswahl.js im Kasten; das Fenster kommt aus check.css */
.pf .pf-ort .ck-fld{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;height:42px;padding:0;margin:0;border:0;background:none;font-family:inherit;font-size:15px;font-weight:400;line-height:1.3;letter-spacing:inherit;color:var(--ink);text-align:left;white-space:nowrap;cursor:pointer}
.pf .pf-ort .ck-fld.is-leer{border:0;font-weight:400;color:var(--slate)}
.pf .pf-ort .ck-fld:focus-visible{outline:0}
.pf .pf-ort .ck-fld svg{flex:none;margin:0;color:var(--slate-2)}
.pf .pf-ort .ck-fld-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* Bis 640 px ist das Fenster ein Blatt am unteren Rand (check.css); die Lage unter dem Feld gilt nur darüber */
@media(min-width:641px){.pf .pf-ort .ck-pop{top:calc(100% + 8px)}}

/* Anmeldeansicht (#accountGast, außerhalb von .pf): die Überschrift trägt zwei Sätze und bricht zwischen ihnen */
#accountGast .aa-h{max-width:27ch;text-wrap:balance}

/* Lesbare Angaben: aus dem Check (Karte 1), wählbar im nächsten Check (Karte 2), Spielraum (Karte 3) */
.pf-f-check{margin-top:16px;font-size:14px}
.pf-f-check dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 16px}
.pf-f-check dl>div{display:contents}
.pf-f-check dt{color:var(--slate)}
.pf-f-check dd{color:var(--graphite)}
.pf-f-check p,.pf-f-rest{font-size:12.5px;color:var(--slate);margin-top:8px}
.pf-f-rest{margin-top:16px}
.pf-f-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px 16px;margin-top:14px}
.pf-f-liste dt{font-size:13px;font-weight:600;color:var(--graphite)}
.pf-f-liste dd{font-size:15px;color:var(--ink);margin-top:2px}
.pf-f-leer{font-size:14px;color:var(--slate);margin-top:14px;max-width:62ch}

/* Leiste unter der Karte: Hinweis oder Rückmeldung links, Knopf rechts */
.pf-fbar{display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2)}
.pf-fbar-t{flex:1 1 240px;min-width:0;font-size:12.5px;color:var(--slate)}
.pf-meld span{display:inline-flex;align-items:flex-start;gap:6px;font-size:12.5px;line-height:1.4}
.pf-meld span:empty{display:none}
.pf-meld svg{flex:none}
.pf-meld [role="status"]{color:var(--green)}
.pf-meld [role="alert"]{color:var(--red)}

/* Konto: Anmeldung, Abo, Daten */
.pf-konto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px 24px;margin-top:10px;font-size:14px}
.pf-konto-t{font-family:var(--v7-text);font-size:13px;font-weight:600;letter-spacing:var(--v7-text-track);line-height:1.5;color:var(--graphite)}
.pf-konto-sp>p{color:var(--slate);margin-top:4px;max-width:52ch}
.pf-konto-sp>.pf-konto-mail{color:var(--ink);overflow-wrap:anywhere}
.pf-konto-sp>.pf-konto-m{margin-top:0}
/* Je Spalte ein Knopf (.pf-btn-rand, Löschen in Rot). Die Spalten sind gleich
   hoch; der Knopf sitzt unten, damit die drei Knöpfe eine Zeile bilden, auch
   wenn der Text darüber verschieden lang ist. Die Rückmeldung darunter
   bekommt 8 px Luft, sobald sie Text trägt.
   Die drei Knöpfe sind gleich groß: so breit wie ihre Spalte und so hoch wie
   der längste Text („Abo kündigen oder Zahlungsdaten ändern“ bricht bei
   294 px Spalte auf zwei Zeilen: 2 × 18,2 + 20 Polster + 2 Rand = 58 px).
   Ecken 6 px wie die Eingabefelder (.pf-fld-box), Jans Vorgabe vom 16.10.2026;
   dasselbe am Knopf „Abmelden“ oben. */
.pf-konto-sp{display:flex;flex-direction:column}
.pf-konto-akt{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:auto;padding-top:12px}
.pf-konto-akt .pf-btn{flex:1 1 100%;min-height:58px;border-radius:6px}
.pf-wer-ab{border-radius:6px}
.pf-konto-m .pf-meld span{margin-top:8px}

@media(max-width:700px){
  #profil{padding:24px 0 48px}
  .pf-fgrid,.pf-fgrid-w{grid-template-columns:1fr 1fr}
  .pf-w2{grid-column:1 / -1}
  /* 16 px in Eingaben: darunter vergrößert iOS die Seite beim Antippen */
  .pf-fld-i,.pf-fld-s,.pf .pf-ort .ck-fld{font-size:16px}
  .pf-f-check dl{grid-template-columns:1fr;row-gap:0}
  .pf-f-check dd{margin-bottom:8px}
  .pf-f-liste{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .pf-fld-kurz{grid-column:1 / -1}
  .pf-fbar .pf-btn{width:100%}
}