/*
 * /mein-profil/ — Pflegeoberfläche für Premium-Mitglieder (inc/premium-konto/).
 *
 * Richtung: Für Inhaber, oft Handwerker und ältere Menschen, die zwischendurch
 * am Handy oder am Büro-PC ihr Profil aktualisieren. Charakter: ruhig und
 * eindeutig wie ein gut beschriftetes Papierformular – ein Bereich nach dem
 * anderen, ein Knopf je Bereich, Meldungen in ganzen Sätzen. Nicht: ein
 * App-Dashboard mit Kacheln und Symbolen ohne Text. Auch der Reiter „Statistik“
 * (Chris 04.10.2026) spricht in Tabellen mit Worten, nicht in Diagrammkacheln.
 *
 * Nur Token aus theme.json. Bausteine .wir-knopf, .wir-karte, .wir-leer aus
 * assets/css/gestaltung.css. Fließtext 18 px, Beschriftungen ≥ 16 px,
 * Ziele ≥ 48 px, Felder 56 px hoch. 390 px zuerst.
 */

.wir-pk {
	--pk-fehler: #8F1D17;
	--pk-fehler-flaeche: #FFF6F5;
	--pk-fehler-rand: #B3261E;
	max-width: 46rem;
	margin: 0 auto;
	padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 5rem);
	font-size: var(--wp--preset--font-size--normal);
}
.wir-pk > * + * { margin-top: 1.5rem; }
/* „hidden“ gilt immer, auch gegen .wir-knopf (inline-flex) und die Fortschrittsbalken (block). */
.wir-pk [hidden] { display: none !important; }
/* Fokussierte Felder und Meldungen nicht unter dem festen Kopf verstecken. */
.wir-pk input, .wir-pk select, .wir-pk textarea, .wir-pk-meldung--gross, .wir-pk-flaeche, .wir-pk-eintragform { scroll-margin-top: calc(var(--wp--custom--kopfhoehe) + 1.5rem); }

/* ── Kopf ─────────────────────────────────────────────────────────────── */
.wir-pk__titel { font-size: var(--wp--preset--font-size--titel-2); margin: 0; }
.wir-pk__einleitung { margin: .75rem 0 0; color: var(--wp--preset--color--text-leise); font-size: var(--wp--preset--font-size--gross); max-width: 38ch; }
.wir-pk__status { display: inline-flex; align-items: center; gap: .5rem; margin: .9rem 0 0; font-weight: 600; color: var(--wp--preset--color--wald); }
.wir-pk__status .wir-symbol { width: 20px; height: 20px; color: var(--wp--preset--color--premium); flex: none; }
/* Wer angemeldet ist und wie man rauskommt: Textzeile über dem Titel, kein Knopf (Chris 04.10.2026). */
.wir-pk__konto { margin: 0 0 .75rem; color: var(--wp--preset--color--text-leise); font-size: var(--wp--preset--font-size--meta); overflow-wrap: anywhere; }
.wir-pk__konto a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; }
.wir-pk__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 0; }
.wir-pk__hinweis { background: var(--wp--preset--color--hinweis); border-radius: var(--wp--custom--radius--kachel); padding: 1rem 1.25rem; margin: 1rem 0 0; }
.wir-pk__hinweis--fehler { background: var(--pk-fehler-flaeche); color: var(--pk-fehler); font-weight: 600; border: 2px solid var(--pk-fehler-rand); }
.wir-pk__hilfe, .wir-pk__klein { color: var(--wp--preset--color--text-leise); font-size: var(--wp--preset--font-size--meta); }
.wir-pk__hilfe a { display: inline-flex; align-items: center; min-height: 48px; }
.wir-pk__laden { color: var(--wp--preset--color--text-leise); }

/* ── Anmeldung ───────────────────────────────────────────────────────── */
.wir-pk__anmeldung { gap: 0; }
.wir-pk__anmeldung form p { margin: 0 0 1.1rem; }
.wir-pk__anmeldung label { display: block; font-weight: 600; margin-bottom: .4rem; }
.wir-pk__anmeldung .login-remember label { display: inline-flex; align-items: center; gap: .6rem; font-weight: 400; min-height: 48px; }
.wir-pk__anmeldung input[type="checkbox"] { width: 26px; height: 26px; accent-color: var(--wp--preset--color--primaer); margin: 0; }
.wir-pk__anmeldung input[type="submit"] {
	min-height: var(--wp--custom--knopfhoehe); padding: var(--wp--custom--knopfpolster); width: 100%;
	border-radius: var(--wp--custom--radius--knopf); border: 2px solid var(--wp--preset--color--primaer);
	background: var(--wp--preset--color--primaer); color: var(--wp--preset--color--flaeche);
	font: 600 var(--wp--preset--font-size--meta)/1.2 var(--wp--preset--font-family--text); cursor: pointer;
}
.wir-pk__anmeldung input[type="submit"]:hover { background: var(--wp--preset--color--primaer-dunkel); border-color: var(--wp--preset--color--primaer-dunkel); }
.wir-pk__vergessen { margin: .25rem 0 0; }
.wir-pk__vergessen a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; }

/* ── Felder (Anmeldung und Oberfläche) ───────────────────────────────── */
.wir-pk input[type="text"], .wir-pk input[type="password"], .wir-pk input[type="email"],
.wir-pk input[type="tel"], .wir-pk input[type="url"], .wir-pk input[type="date"],
.wir-pk select, .wir-pk textarea {
	display: block; width: 100%; box-sizing: border-box; min-height: var(--wp--custom--feldhoehe);
	border: 1.5px solid var(--wp--preset--color--linie-stark); border-radius: var(--wp--custom--radius--knopf);
	background: var(--wp--preset--color--flaeche); color: var(--wp--preset--color--text);
	font: 400 var(--wp--preset--font-size--normal)/1.3 var(--wp--preset--font-family--text);
	padding: .7rem .95rem;
}
.wir-pk textarea { resize: vertical; min-height: 7rem; }
.wir-pk select { appearance: none; -webkit-appearance: none; padding-right: 2.8rem; cursor: pointer; background: var(--wp--preset--color--flaeche) no-repeat right .9rem center / 20px var(--wir-symbol-aufklappen-text); } /* Aufklapper wie in feld.css */
.wir-pk input:focus-visible, .wir-pk select:focus-visible, .wir-pk textarea:focus-visible {
	outline: 3px solid var(--wp--preset--color--primaer); outline-offset: 0; border-color: var(--wp--preset--color--primaer);
}
.wir-pk ::placeholder { color: var(--wp--preset--color--text-leise); opacity: 1; }

.wir-pk-feld { margin: 0 0 1.5rem; }
.wir-pk-feld__label { display: block; font-weight: 700; color: var(--wp--preset--color--wald); margin: 0 0 .35rem; font-size: var(--wp--preset--font-size--gross); }
.wir-pk-feld__pflicht { font-weight: 400; font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--text-leise); }
.wir-pk-feld__hinweis { margin: 0 0 .6rem; color: var(--wp--preset--color--text-leise); font-size: var(--wp--preset--font-size--meta); max-width: 60ch; }
.wir-pk-feld__zaehler { display: block; margin-top: .4rem; font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--text-leise); font-variant-numeric: tabular-nums; }
.wir-pk-feld__zaehler.ist-zu-viel { color: var(--pk-fehler); font-weight: 700; }
.wir-pk-feld__fehler { margin: .4rem 0 0; color: var(--pk-fehler); font-weight: 700; font-size: var(--wp--preset--font-size--meta); }
.wir-pk-feld__fehler:empty { display: none; }
.wir-pk-feld.hat-fehler input, .wir-pk-feld.hat-fehler select, .wir-pk-feld.hat-fehler textarea { border-color: var(--pk-fehler-rand); border-width: 2px; background: var(--pk-fehler-flaeche); }

/* ── Reiter ──────────────────────────────────────────────────────────── */
/* Tabs statt Knopfkacheln (Chris 04.10.2026: „zu sehr Buttons … eher Tabs“).
   Text auf einer Trennlinie; aktiv = volle Schriftstärke und unterstrichenes
   Wort, kein Balken, keine Fläche. Auf dem Handy brechen die Reiter um
   statt seitlich zu scrollen. */
.wir-pk-reiter { display: flex; flex-wrap: wrap; gap: 0 1.6rem; margin: 2rem 0 0; border-bottom: 1px solid var(--wp--preset--color--linie-stark); }
.wir-pk-reiter__knopf {
	min-height: 48px; padding: .5rem 0; border: 0; background: none; cursor: pointer;
	color: var(--wp--preset--color--wald);
	font: 400 var(--wp--preset--font-size--normal)/1.25 var(--wp--preset--font-family--text);
	text-decoration: none; text-underline-offset: .45em;
}
.wir-pk-reiter__knopf:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.wir-pk-reiter__knopf[aria-selected="true"] { color: var(--wp--preset--color--text); font-weight: 700; text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--wp--preset--color--primaer); }
.wir-pk-reiter__knopf:focus-visible { outline: 3px solid var(--wp--preset--color--primaer); outline-offset: 2px; }

.wir-pk-flaeche { margin-top: 1.75rem; }
.wir-pk-flaeche:focus-visible { outline-offset: 6px; }
.wir-pk-flaeche__titel { font-size: var(--wp--preset--font-size--titel-3); margin: 0; }
.wir-pk-flaeche__text { margin: .5rem 0 1.5rem; color: var(--wp--preset--color--text-leise); max-width: 60ch; }

.wir-pk-form__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: .5rem; }
.wir-pk-form__fuss .wir-pk-meldung { flex-basis: 100%; }

/* ── Meldungen ───────────────────────────────────────────────────────── */
.wir-pk-meldung { margin: .75rem 0 0; font-weight: 600; }
.wir-pk-meldung:empty { display: none; }
.wir-pk-meldung--ok { color: var(--wp--preset--color--wald); }
.wir-pk-meldung--ok::before { content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-right: .35em; vertical-align: -.2em; background: var(--wp--preset--color--primaer); -webkit-mask: var(--wir-symbol-haken) center / contain no-repeat; mask: var(--wir-symbol-haken) center / contain no-repeat; } /* Haken aus wir_theme_symbole() statt Textzeichen */
.wir-pk-meldung--fehler { color: var(--pk-fehler); }
.wir-pk-meldung--gross { padding: 1rem 1.25rem; border-radius: var(--wp--custom--radius--kachel); background: var(--wp--preset--color--primaer-hell); color: var(--wp--preset--color--wald); margin-top: 1.25rem; }
.wir-pk-meldung--gross.wir-pk-meldung--fehler { background: var(--pk-fehler-flaeche); color: var(--pk-fehler); }
.wir-pk-meldung--gross:focus { outline: 3px solid var(--wp--preset--color--primaer); outline-offset: 2px; }

/* ── Bilder ──────────────────────────────────────────────────────────── */
.wir-pk-bilder { margin: 0 0 1.25rem; gap: .5rem; }
.wir-pk-bilder__titel { font-size: var(--wp--preset--font-size--gross); margin: 0; }
.wir-pk-knopfreihe { display: flex; flex-wrap: wrap; gap: .6rem; margin: .5rem 0 0; }
.wir-pk-datei { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wir-pk-datei:focus-visible + .wir-pk-datei__knopf { outline: 3px solid var(--wp--preset--color--primaer); outline-offset: 3px; }
.wir-pk-datei__knopf { cursor: pointer; }
/* Ablagefläche für Drag-and-drop; der Knopf darin bleibt der Weg für Tastatur und Handy. */
.wir-pk-ablage { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; width: 100%; box-sizing: border-box; padding: 1rem 1.25rem; border: 1.5px dashed var(--wp--preset--color--linie-stark); border-radius: var(--wp--custom--radius--klein); background: var(--wp--preset--color--grund); }
.wir-pk-ablage__text { color: var(--wp--preset--color--text-leise); }
.wir-pk-ablage.ist-ueber { border-style: solid; border-color: var(--wp--preset--color--primaer); background: var(--wp--preset--color--primaer-hell); }
@media (hover: none) { .wir-pk-ablage { border: 0; padding: 0; background: none; } .wir-pk-ablage__text { display: none; } }
.wir-pk-fortschritt { display: block; width: 100%; height: 14px; margin: .75rem 0 0; accent-color: var(--wp--preset--color--primaer); }

.wir-pk-logo { display: grid; place-items: center; width: 100%; max-width: 16rem; aspect-ratio: 3 / 2; border: 1.5px solid var(--wp--preset--color--linie); border-radius: var(--wp--custom--radius--klein); background: var(--wp--preset--color--flaeche); overflow: hidden; }
.wir-pk-logo img { max-width: 88%; max-height: 88%; object-fit: contain; }
.wir-pk-logo--foto { max-width: 20rem; }
.wir-pk-logo--foto img { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: cover; }
.wir-pk-logo__leer { color: var(--wp--preset--color--text-leise); }

/* Vorschau: echtes Markup der Profilseite (inert), Kopf mit eigener Kante, Galerie ohne zweiten Kasten. */
.wir-pk-vorschau { margin: .5rem 0 0; border-radius: var(--wp--custom--radius--klein); overflow: hidden; }
.wir-pk-vorschau--kopf .wir-profilkopf__innen { padding-inline: clamp(1rem, 3vw, 1.75rem); }
.wir-pk-vorschau--galerie .wir-box { border: 0; padding: 0; background: none; box-shadow: none; }
.wir-pk-vorschau--galerie .wir-box > h2 { font-size: var(--wp--preset--font-size--gross); margin: 0 0 .8rem; }
.wir-pk-vorschau--kopf .wir-krume-leiste { display: none; } /* Brotkrume gehört nicht zum Kopf */
.wir-pk-vorschau__huelle { position: relative; margin: .5rem 0 0; }
.wir-pk-vorschau__huelle.ist-ueber .wir-pk-vorschau { outline: 3px dashed var(--wp--preset--color--primaer); outline-offset: 3px; }
.wir-pk-vorschau__schild { position: absolute; top: .75rem; right: .75rem; padding: .45rem .8rem; border-radius: var(--wp--custom--radius--klein); background: var(--wp--preset--color--flaeche); color: var(--wp--preset--color--wald); font-weight: 700; }
.wir-pk-vorschau--kontakt .wir-box { margin: 0; max-width: 24rem; }
.wir-pk-kopfbilder__raster { display: grid; gap: 1.5rem; margin-top: 1.25rem; }
@media (min-width: 640px) { .wir-pk-kopfbilder__raster { grid-template-columns: 1fr 1fr; } }
.wir-pk-kopfbilder__teil { display: flex; flex-direction: column; gap: .5rem; padding: .25rem; border-radius: var(--wp--custom--radius--klein); }
.wir-pk-kopfbilder__teil.ist-ueber { background: var(--wp--preset--color--primaer-hell); outline: 2px dashed var(--wp--preset--color--primaer); }
.wir-pk-kopfbilder__name { margin: 0; font-weight: 700; color: var(--wp--preset--color--wald); }
.wir-pk-vorschau__titel { margin-top: 1.25rem; font-weight: 700; }

/* „Wo steht das“: Satz und Link. */
.wir-pk-wo { margin: .25rem 0 .75rem; }
.wir-pk-plan__satz { margin: .25rem 0 0; max-width: 60ch; }
.wir-pk-plan__link { margin: 0; }
.wir-pk-plan__link a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; }

.wir-pk-raster { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); gap: 1rem; }
.wir-pk-raster__bild { position: relative; display: flex; flex-direction: column; gap: .5rem; margin: 0; }
.wir-pk-raster__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--wp--custom--radius--klein); background: var(--wp--preset--color--linie); }
.wir-pk-raster__nr { position: absolute; top: .4rem; left: .4rem; min-width: 2rem; padding: .1rem .5rem; border-radius: var(--wp--custom--radius--klein); background: var(--wp--preset--color--wald); color: var(--wp--preset--color--flaeche); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.wir-pk-raster__aktionen { display: flex; flex-wrap: wrap; gap: .4rem; }
.wir-pk-raster__aktionen .wir-knopf { flex: 1 1 auto; }
.wir-pk-raster__schieben { display: flex; gap: .4rem; flex: 1 1 100%; }
.wir-pk-raster__schieben .wir-knopf { flex: 1 1 0; min-width: 0; padding-inline: .5rem; }
.wir-pk-pfeilknopf { gap: .4rem; }
.wir-pk-pfeilknopf:disabled { opacity: .35; cursor: default; }
.wir-pk-pfeil { display: inline-flex; }
.wir-pk-raster__bild[draggable="true"] img { cursor: grab; }
.wir-pk-raster__bild.ist-gezogen { opacity: .45; }
.wir-pk-raster__bild.ist-ziel img { outline: 3px dashed var(--wp--preset--color--primaer); outline-offset: 3px; }

/* ── Einträge ────────────────────────────────────────────────────────── */
.wir-pk-neu { margin-bottom: .5rem; }
.wir-pk-eintraege { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1rem; }
.wir-pk-eintrag { flex-direction: row; align-items: flex-start; gap: 1rem; }
.wir-pk-eintrag > img { width: 6rem; height: 6rem; object-fit: cover; border-radius: var(--wp--custom--radius--klein); flex: none; }
.wir-pk-eintrag__text { min-width: 0; flex: 1; }
.wir-pk-eintrag__meta { margin: 0; color: var(--wp--preset--color--text-leise); font-size: var(--wp--preset--font-size--meta); }
.wir-pk-eintrag__titel { margin: .3rem 0 .5rem; font-size: var(--wp--preset--font-size--gross); overflow-wrap: anywhere; }
.wir-pk-marke { display: inline-block; padding: .1rem .55rem; border-radius: var(--wp--custom--radius--klein); font-weight: 700; font-size: var(--wp--preset--font-size--klein); }
.wir-pk-marke--online { background: var(--wp--preset--color--primaer-hell); color: var(--wp--preset--color--wald); }
.wir-pk-marke--aus { background: var(--wp--preset--color--hinweis); color: var(--wp--preset--color--text); }
.wir-pk-gefahr { color: var(--pk-fehler); }
.wir-pk-gefahr:hover { background: var(--pk-fehler-flaeche); border-color: var(--pk-fehler-rand); color: var(--pk-fehler); }
.wir-pk-eintragform { margin: 1rem 0 1.5rem; }
@media (max-width: 520px) {
	.wir-pk-eintrag { flex-direction: column; }
	.wir-pk-eintrag > img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
	.wir-pk-form__fuss .wir-knopf { width: 100%; }
}

.wir-pk-editorhinweis { color: var(--wp--preset--color--text-leise); }

@media (prefers-reduced-motion: no-preference) {
	.wir-pk .wir-knopf, .wir-pk-ablage { transition: background-color var(--wp--custom--uebergang), border-color var(--wp--custom--uebergang); }
}

/* ── Stand des Profils (über den Reitern) ────────────────────────────── */
/* Bausteine: .wir-karte + .wir-pk-bilder (Abstände, Titel und Balken wie die Bilderkästen). Der Titel
   ist hier ein h3 (direkt unter dem Namen, h2) und bekommt deshalb ausdrücklich die Textschrift der
   Kastentitel (h4) – Titelschrift erst ab titel-3 (Befund Einheitlichkeit 04.10.2026). */
.wir-pk-stand .wir-pk-bilder__titel { font-family: var(--wp--preset--font-family--text); line-height: 1.3; }
.wir-pk-stand__text { margin: 0; max-width: 60ch; }
.wir-pk-stand .wir-pk-form__fuss { flex-direction: column; align-items: flex-start; margin-top: .75rem; padding-top: 1rem; border-top: 1px solid var(--wp--preset--color--linie); }
.wir-pk-stand .wir-pk-form__fuss > p { margin: 0; }
.wir-pk-stand__geprueft { font-weight: 600; color: var(--wp--preset--color--wald); }

/* ── Reiter „Statistik“ (inc/premium-konto/statistik.php) ─────────────── */
/* Bausteine: .wir-zahlen (Kennzahlen), Zahlentabelle (.wp-block-table.is-style-zahlen, blockstile.css), .wir-pk-feld, .wir-knopf. */
.wir-pk-statistik__wahl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; }
.wir-pk-statistik__wahl .wir-pk-feld { margin: 0; flex: 1 1 14rem; max-width: 20rem; }
.wir-pk-statistik__wahl .wir-knopf { min-height: var(--wp--custom--feldhoehe); }
.wir-pk-statistik__zahlen .wir-zahl b { font-variant-numeric: tabular-nums; }
.wir-pk-statistik__gruppe { margin-top: 2.25rem; }
.wir-pk-statistik__gruppe .wir-pk-flaeche__text { margin-bottom: .75rem; }
.wir-pk-statistik__tabelle { margin: .75rem 0 0; }
.wir-pk-statistik__tabelle td:last-child { color: var(--wp--preset--color--text-leise); }
.wir-pk-statistik__anteil { color: var(--wp--preset--color--text-leise); }
/* Verlauf: der Balken steht vor der Zahl und ist nur Zugabe – die Zahl trägt. */
.wir-pk-statistik__verlauf td:last-child { color: inherit; }
.wir-pk-statistik__balken { display: inline-block; width: calc(var(--anteil) * .9); max-width: 6rem; height: .55rem; margin-right: .6rem; background: var(--wp--preset--color--primaer); vertical-align: middle; }
.wir-pk-statistik__verlauf tbody th { white-space: nowrap; }
.wir-pk-statistik__verlauf td:first-of-type { width: auto; }
.wir-pk-statistik__fuss { margin-top: 2rem; max-width: 60ch; }
@media (max-width: 480px) {
	.wir-pk-statistik__anteil { display: block; }
	.wir-pk-statistik__balken { max-width: 2.5rem; margin-right: .4rem; }
}