/* Wand: Ansicht konto (docs/DESIGN-WAND-2026-10-26.md). Nur Regeln unter html[data-look="wand"]. */

/* ---------- Start (#start, Welt pink): drei große Farbblöcke, der nächste offene Schritt ist der größte ---------- */
html[data-look="wand"] #view.view-onboarding > .start-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);align-items:end;gap:20px 56px}
html[data-look="wand"] #view.view-onboarding > .start-kopf .start-intro{margin:0 0 6px;font:italic 400 clamp(22px,2.1vw,30px)/1.15 var(--wand-serif);letter-spacing:-.01em;color:var(--welt-text);max-width:34ch}
html[data-look="wand"] .view-onboarding .start-bloecke{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--wand-gap);align-items:stretch}
html[data-look="wand"] .view-onboarding .start-bloecke > .start-step{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0;min-height:clamp(340px,30vw,460px);margin:0;padding:clamp(22px,2.4vw,36px);border:0;border-radius:12px;background:var(--welt);color:var(--welt-text)}
html[data-look="wand"] .view-onboarding .start-bloecke > .start-step[data-gross=true]{grid-column:span 2}
html[data-look="wand"] #view.view-onboarding .start-bloecke .start-h2{margin:0;font:800 clamp(32px,3vw,48px)/.92 var(--wand-display);letter-spacing:-.05em;color:inherit;overflow-wrap:anywhere}
html[data-look="wand"] #view.view-onboarding .start-bloecke .start-step[data-gross=true] .start-h2{font-size:clamp(52px,6vw,104px);line-height:.86;letter-spacing:-.06em}
html[data-look="wand"] .view-onboarding .start-bloecke .start-zustand[data-zustand=next] + .start-h2{padding-right:84px}
html[data-look="wand"] .view-onboarding .start-bloecke .start-satz{margin:0;font-size:17px;line-height:1.45;max-width:42ch;color:inherit}
html[data-look="wand"] .view-onboarding .start-bloecke .start-step[data-gross=true] .start-satz{font-size:clamp(18px,1.5vw,21px)}
html[data-look="wand"] .view-onboarding .start-bloecke .start-aktion{margin-top:auto;padding-top:10px;width:100%}

/* Sticker: „Als Nächstes“ als runder Aufkleber über der Ecke, „Erledigt“ eckig in Paper. */
html[data-look="wand"] .view-onboarding .start-bloecke .start-zustand{display:inline-flex;align-items:center;font:700 13px/1.2 var(--body);background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:6px;padding:6px 10px}
html[data-look="wand"] .view-onboarding .start-bloecke .start-zustand[data-zustand=next]{position:absolute;top:-22px;right:18px;z-index:1;width:108px;height:108px;padding:12px;justify-content:center;text-align:center;border-radius:50%;background:var(--ink);color:var(--lime);border-color:var(--ink);font:800 21px/.95 var(--wand-display);letter-spacing:-.03em;transform:rotate(-8deg)}

/* Aktion auf der Farbfläche: Tinte-Knopf mit Paper-Text und Pfeil in Limette; erledigt als 2-px-Tinte-Kontur. */
html[data-look="wand"] #view.view-onboarding .start-bloecke .button{min-height:52px;padding:8px 18px;gap:12px;border:2px solid var(--ink);border-radius:6px;background:var(--ink);color:var(--paper);font-size:16px;font-weight:700}
html[data-look="wand"] #view.view-onboarding .start-bloecke .button i{font-style:normal;color:var(--lime)}
html[data-look="wand"] #view.view-onboarding .start-bloecke .button:hover{background:var(--paper);border-color:var(--ink);color:var(--ink)}
html[data-look="wand"] #view.view-onboarding .start-bloecke .button:hover i{color:var(--ink)}
html[data-look="wand"] #view.view-onboarding .start-bloecke .button.secondary{background:transparent;border-color:var(--welt-text);color:var(--welt-text)}
html[data-look="wand"] #view.view-onboarding .start-bloecke .button.secondary i{color:inherit}
html[data-look="wand"] #view.view-onboarding .start-bloecke .button.secondary:hover{background:var(--ink);color:var(--paper)}
html[data-look="wand"] .view-onboarding .start-bloecke .start-wartet{margin:0;padding-top:10px;border-top:2px solid currentColor;font-family:var(--wand-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase}

@media (max-width:1100px){
  html[data-look="wand"] .view-onboarding .start-bloecke{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-look="wand"] #view.view-onboarding > .start-kopf{grid-template-columns:1fr}
}
@media (max-width:600px){
  html[data-look="wand"] .view-onboarding .start-bloecke{grid-template-columns:1fr;gap:28px 0}
  html[data-look="wand"] .view-onboarding .start-bloecke > .start-step,html[data-look="wand"] .view-onboarding .start-bloecke > .start-step[data-gross=true]{grid-column:auto;min-height:0;padding:22px 18px}
  html[data-look="wand"] .view-onboarding .start-bloecke > .start-step[data-gross=true]{min-height:340px}
  html[data-look="wand"] #view.view-onboarding .start-bloecke .start-h2{font-size:34px}
  html[data-look="wand"] #view.view-onboarding .start-bloecke .start-step[data-gross=true] .start-h2{font-size:clamp(44px,13vw,56px)}
  html[data-look="wand"] .view-onboarding .start-bloecke .start-zustand[data-zustand=next]{top:-18px;right:10px;width:88px;height:88px;font-size:17px}
  html[data-look="wand"] .view-onboarding .start-bloecke .start-zustand[data-zustand=next] + .start-h2{padding-right:70px}
  html[data-look="wand"] .view-onboarding .start-bloecke .start-satz{font-size:16px}
  html[data-look="wand"] #view.view-onboarding .start-bloecke .button{width:100%;justify-content:space-between}
  html[data-look="wand"] #view.view-onboarding > .start-kopf .start-intro{font-size:22px}
}

/* ---------- Konto (#konto, Welt mint) ---------- */
/* Kopfband angemeldet: Titel links, die Adresse laut rechts. */
html[data-look="wand"] #view.view-account > .account-kopf{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:end;gap:20px 64px}
html[data-look="wand"] #view.view-account > .account-kopf .account-wer{min-width:0;justify-self:end;text-align:right}
html[data-look="wand"] #view.view-account > .account-kopf .wand-meta{margin:0 0 8px;color:var(--welt-text)}
html[data-look="wand"] #view.view-account > .account-kopf .account-mail{margin:0;font:800 clamp(28px,3.6vw,60px)/.95 var(--wand-display);letter-spacing:-.05em;color:var(--welt-text);overflow-wrap:anywhere}

/* Hinweise der Rückkehr aus Mail-Links direkt auf Tinte. */
html[data-look="wand"] .view-account > .account-notice{margin:0 0 24px;padding:12px 16px;border-left:6px solid var(--lime);font:400 14px/1.45 var(--wand-mono);color:var(--paper)}
html[data-look="wand"] .view-account > .account-notice.error-text{border-left-color:var(--pink)}
html[data-look="wand"] .view-account .status-text{font-size:15px;color:inherit}

/* Abgemeldet: laute Einstiegsbühne in der Bühnenfarbe der Welt (pink), das Formular auf einem Paneel. */
html[data-look="wand"] .view-account .account-buehne{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(24px,3.6vw,56px);border-radius:12px;background:var(--welt-buehne);color:var(--ink)}
html[data-look="wand"] #view.view-account .account-buehne-text h2{margin:0;font:800 clamp(56px,6.6vw,116px)/.86 var(--wand-display);letter-spacing:-.06em;color:var(--ink);overflow-wrap:anywhere}
html[data-look="wand"] .view-account .account-buehne-text .account-lead{margin:22px 0 30px;max-width:30ch;font:italic 400 clamp(24px,2.2vw,32px)/1.15 var(--wand-serif);letter-spacing:-.01em;color:var(--ink)}
html[data-look="wand"] .view-account .account-buehne-text .account-choices .button{width:auto;min-width:280px;min-height:56px;padding:0 24px;justify-content:space-between;gap:24px;background:var(--ink);border-color:var(--ink);color:var(--paper);font-size:17px}
html[data-look="wand"] .view-account .account-buehne-text .account-choices .button .arrow{color:var(--lime)}
html[data-look="wand"] .view-account .account-buehne-text .account-choices .button:hover{background:var(--paper);color:var(--ink)}
html[data-look="wand"] .view-account .account-buehne-text .account-choices .button:hover .arrow{color:var(--ink)}
html[data-look="wand"] .view-account .account-buehne-text .button:focus-visible{outline-color:var(--ink)}
html[data-look="wand"] .view-account .account-buehne-form{min-width:0}
html[data-look="wand"] .view-account .account-buehne-form .account-or{margin:0 0 6px;padding:0;border:0;font:400 12px/1.3 var(--wand-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
html[data-look="wand"] .view-account .account-buehne-form .mode-switch{gap:4px 28px;margin:0 0 18px}
html[data-look="wand"] .view-account .account-buehne-form .mode-button{font-size:17px;font-weight:700}
html[data-look="wand"] .view-account .account-buehne-form .account-form .toolbar{gap:8px 20px;margin-top:6px}
html[data-look="wand"] .view-account .wand-paneel .hint,html[data-look="wand"] .view-account .wand-paneel #privacy-hint{color:var(--ink);font-size:15px}
html[data-look="wand"] .view-account .wand-paneel #privacy-hint{margin:18px 0 0}
html[data-look="wand"] .view-account .wand-paneel #privacy-hint a{color:var(--ink);text-decoration-thickness:2px}
html[data-look="wand"] .view-account > .account-section{max-width:760px;margin-top:var(--wand-gap)}
/* G4: „Neue Mail anfordern“ nach abgelaufenem Link oder unbestätigter Adresse als Paneel unter der Meldung. */
html[data-look="wand"] .view-account > .account-resend{max-width:760px;margin:0 0 var(--wand-gap)}
html[data-look="wand"] .view-account > .card{max-width:760px}

/* Angemeldet: Raster aus Paneelen mit farbiger Kante; Abmelden als Farbblock; Konto löschen als eigener Block. */
html[data-look="wand"] .view-account .account-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"login schluss" "login app" "daten daten" "gefahr gefahr";gap:var(--wand-gap);align-items:stretch}
html[data-look="wand"] .view-account .account-raster > #account-login{grid-area:login}
html[data-look="wand"] .view-account .account-raster > #account-sessions{grid-area:schluss}
html[data-look="wand"] .view-account .account-raster > #account-install{grid-area:app}
html[data-look="wand"] .view-account .account-raster > #account-data{grid-area:daten}
html[data-look="wand"] .view-account .account-raster > #account-delete{grid-area:gefahr}
html[data-look="wand"] .view-account .account-raster > .account-area{margin:0;min-width:0}
html[data-look="wand"] #view.view-account .account-area > h3{margin:0 0 18px;font:800 clamp(36px,3.4vw,56px)/.92 var(--wand-display);letter-spacing:-.05em;color:inherit}
html[data-look="wand"] #view.view-account .account-area h4,html[data-look="wand"] #view.view-account #account-data > .account-section > h3{margin:0 0 12px;font:800 24px/1 var(--wand-display);letter-spacing:-.03em;color:inherit}
html[data-look="wand"] .view-account #account-login{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;align-content:start}
html[data-look="wand"] .view-account #account-login > h3{grid-column:1/-1}
html[data-look="wand"] .view-account #account-data{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;align-content:start}
html[data-look="wand"] .view-account #account-data > h3{grid-column:1/-1}
html[data-look="wand"] .view-account #account-data > .account-section{margin:0;padding:0;border:0}
html[data-look="wand"] .view-account #account-export-hint{margin:0 0 14px;font-size:15px;line-height:1.45}
html[data-look="wand"] .view-account .credits-balance{margin:0 0 8px;font:800 28px/1 var(--wand-display);letter-spacing:-.03em}
/* Guthaben als Zähler auf einem Farbblock (orange, Tinte-Text): Etikett in Plex, Stand groß. */
html[data-look="wand"] .view-account #account-data > .account-zaehler{padding:20px 22px;border-radius:12px;background:var(--orange);color:var(--ink)}
html[data-look="wand"] .view-account .account-zaehler .credits-label{display:block;margin-bottom:6px;font:400 12px/1.3 var(--wand-mono);letter-spacing:.06em;text-transform:uppercase}
html[data-look="wand"] .view-account .account-zaehler .credits-balance b{display:block;font:800 clamp(44px,4.4vw,64px)/.9 var(--wand-display);letter-spacing:-.05em}
html[data-look="wand"] .view-account .account-zaehler .hint{color:var(--ink)}
/* Deine Daten ohne leere Fläche (Gegenprüfung 27.10.2026): Export doppelt breit neben Abgleich, darunter das Guthaben als
   Band über die volle Breite; im Band links der Stand, rechts die Buchungen. */
html[data-look="wand"] .view-account #account-data > .account-teil:first-of-type{grid-column:span 2}
html[data-look="wand"] .view-account #account-data > .account-zaehler{grid-column:1/-1;margin-top:24px}
html[data-look="wand"] .view-account .account-zaehler #credits-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:0 40px;align-items:start}
html[data-look="wand"] .view-account .account-zaehler .credits-ledger{grid-column:2;grid-row:1 / span 3;max-width:none;margin:0;border-top:2px solid var(--ink)}
html[data-look="wand"] .view-account .account-zaehler #credits-box > :not(.credits-ledger){grid-column:1}
html[data-look="wand"] .view-account .credits-ledger .list-item{display:flex;gap:6px 14px;flex-wrap:wrap;border-bottom:2px solid var(--ink);font-size:15px}
html[data-look="wand"] .view-account .credits-ledger .hint{font:400 13px/1.4 var(--wand-mono);color:var(--ink)}
html[data-look="wand"] .view-account .credits-delta{margin-left:auto;font:400 13px/1.4 var(--wand-mono)}
html[data-look="wand"] .view-account .account-area .toolbar{gap:12px 16px}

/* G8: App und Deine Daten sind keine Formulare, darum Farbblöcke in ihrer Welt (data-welt: App pink, Deine Daten violet);
   Knöpfe darauf in Tinte, sekundär als Kontur in der Textfarbe der Welt. Nur die Anmeldung (Formulare) bleibt auf Paper. */
html[data-look="wand"] .view-account .account-block{padding:clamp(22px,2.6vw,36px);border:0;border-radius:12px;background:var(--welt);color:var(--welt-text)}
html[data-look="wand"] .view-account .account-block .button{background:var(--ink);border-color:var(--ink);color:var(--paper)}
html[data-look="wand"] .view-account .account-block .button.secondary{background:transparent;border-color:var(--welt-text);color:var(--welt-text)}
html[data-look="wand"] .view-account .account-block .button:hover{background:var(--paper);border-color:var(--ink);color:var(--ink)}
html[data-look="wand"] .view-account .account-block :is(p,.hint,summary,#account-export-hint){color:inherit}
html[data-look="wand"] .view-account .account-block details{border-top:2px solid currentColor;padding:6px 0}
html[data-look="wand"] .view-account .account-block summary{min-height:44px;display:flex;align-items:center;font-weight:700}
html[data-look="wand"] .view-account > .account-block{max-width:760px;margin-top:var(--wand-gap)}
/* Abgemeldet steht „App“ allein unter den Paneelen; über die volle Breite wie sie (Gegenprüfung 2, Fund 4). */
html[data-look="wand"] .view-account > #account-install{max-width:none}
html[data-look="wand"] .view-account .account-schluss{display:flex;flex-direction:column;padding:clamp(22px,2.6vw,36px);border-radius:12px;background:var(--lime);color:var(--ink)}
html[data-look="wand"] .view-account .account-schluss .toolbar{flex-direction:column;align-items:stretch;margin-top:auto}
html[data-look="wand"] .view-account .account-schluss .button{min-height:56px;justify-content:space-between;padding:0 22px;font-size:17px;background:var(--ink);border-color:var(--ink);color:var(--paper)}
html[data-look="wand"] .view-account .account-schluss .button.secondary{background:transparent;color:var(--ink)}
html[data-look="wand"] .view-account .account-schluss .button:hover{background:var(--paper);color:var(--ink)}

html[data-look="wand"] .view-account .account-gefahr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"titel aktion" "satz aktion" "hinweis hinweis";gap:6px 32px;align-items:center;padding:clamp(22px,3vw,40px);border:3px solid var(--pink);border-radius:12px;background:var(--ink);color:var(--paper)}
html[data-look="wand"] #view.view-account .account-gefahr > h3{grid-area:titel;margin:0;color:var(--paper)}
html[data-look="wand"] .view-account .account-gefahr .account-gefahr-satz{grid-area:satz;margin:0;font-size:17px;color:var(--paper)}
html[data-look="wand"] .view-account .account-gefahr .toolbar{grid-area:aktion}
html[data-look="wand"] .view-account .account-gefahr #account-delete-hint{grid-area:hinweis;margin:0;color:var(--paper)}
html[data-look="wand"] .view-account .account-gefahr .account-gefahr-knopf{min-height:56px;padding:0 26px;font-size:17px;background:var(--pink);border-color:var(--pink);color:var(--ink)}
html[data-look="wand"] .view-account .account-gefahr .account-gefahr-knopf:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* Bestätigung zum Löschen: Paneel mit pinker Kante, der endgültige Knopf in Pink. */
html[data-look="wand"] .view-account #account-delete-dialog{border-top:10px solid var(--pink);max-width:min(560px,calc(100vw - 32px))}
html[data-look="wand"] .view-account #account-delete-dialog .button#account-delete-confirm{background:var(--pink);border-color:var(--ink);color:var(--ink)}
html[data-look="wand"] .view-account #account-delete-dialog .button#account-delete-confirm[disabled]{opacity:.45;cursor:not-allowed}
html[data-look="wand"] .view-account #account-delete-dialog #account-delete-list{margin:12px 0 14px;border-top:2px solid var(--ink)}
html[data-look="wand"] .view-account #account-delete-dialog #account-delete-list li{padding:8px 0;border-bottom:2px solid var(--ink);font-weight:700}
html[data-look="wand"] .view-account #account-delete-dialog #account-delete-backup{margin:0 0 18px}
html[data-look="wand"] .view-account #account-delete-dialog .toolbar{gap:12px;margin-top:14px}

/* Paket 3 Sichtung (Gestaltungsprüfung 28.10.2026, Funde 4 und 5): mit Werken der orange Farbblock (account-block, Welt orange,
   setzt account.js); je Werk erst „Mit der Freigabe öffentlich:“ mit Links ab 44 px, dann „Freigeben“ als Hauptknopf in eigener
   Zeile. Ohne Werke kein fast leerer Kasten: auf Tinte ein Satz groß in Instrument kursiv und genau eine Aktion („Neu laden“). */
html[data-look="wand"] .view-account #account-sichtung:not(.account-block){padding:0;border:0;background:transparent;color:var(--paper)}
html[data-look="wand"] .view-account #account-sichtung .sichtung-zustand.empty{padding:0}
html[data-look="wand"] .view-account #account-sichtung .sichtung-zustand.empty #sichtung-status{margin:0;font:italic 400 clamp(28px,3vw,40px)/1.1 var(--wand-serif);letter-spacing:-.02em;color:var(--paper)}
html[data-look="wand"] .view-account #account-sichtung .sichtung-zustand.empty .toolbar{margin-top:18px}
html[data-look="wand"] .view-account #account-sichtung .sichtung-werk{padding:0 0 24px;border-bottom:2px solid currentColor}
html[data-look="wand"] .view-account #account-sichtung .sichtung-werk + .sichtung-werk{padding-top:24px}
html[data-look="wand"] .view-account #account-sichtung .sichtung-werk:last-child{padding-bottom:0;border-bottom:0}
html[data-look="wand"] .view-account #account-sichtung .sichtung-werk p{margin:0 0 8px}
html[data-look="wand"] .view-account #account-sichtung .sichtung-etikett{margin:20px 0 4px;font-size:16px;font-weight:700}
html[data-look="wand"] .view-account #account-sichtung .sichtung-medien > li{gap:0 20px}
html[data-look="wand"] .view-account #account-sichtung .text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:16px;font-weight:700;color:inherit;text-decoration-color:currentColor}
html[data-look="wand"] .view-account #account-sichtung .sichtung-entscheiden{margin:20px 0 0;padding:20px 0 0;border-top:2px solid currentColor}
html[data-look="wand"] .view-account #account-sichtung .sichtung-entscheiden .button{min-height:56px;padding:0 26px;font-size:17px}

@media (max-width:1100px){
  /* B1: einspaltig stehen die Sitzungen (Abmelden) direkt unter dem Kopfband, wie im Aufbau (account.js). */
  html[data-look="wand"] .view-account .account-raster{grid-template-columns:minmax(0,1fr);grid-template-areas:"schluss" "login" "daten" "app" "gefahr"}
  html[data-look="wand"] .view-account .account-buehne{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  html[data-look="wand"] .view-account #account-data{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-look="wand"] .view-account #account-data > .account-teil:first-of-type{grid-column:auto}
  html[data-look="wand"] .view-account .account-zaehler #credits-box{grid-template-columns:minmax(0,1fr)}
  html[data-look="wand"] .view-account .account-zaehler .credits-ledger{grid-column:auto;grid-row:auto;margin-top:14px}
  html[data-look="wand"] .view-account .account-zaehler #credits-box > :not(.credits-ledger){grid-column:auto}
}
@media (max-width:600px){
  html[data-look="wand"] #view.view-account > .account-kopf{grid-template-columns:minmax(0,1fr);gap:14px}
  html[data-look="wand"] #view.view-account > .account-kopf .account-wer{justify-self:start;text-align:left}
  html[data-look="wand"] #view.view-account > .account-kopf .account-mail{font-size:clamp(24px,7.4vw,32px)}
  html[data-look="wand"] .view-account .account-buehne-form .mode-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:0 16px}
  html[data-look="wand"] .view-account .account-buehne-form .mode-button{font-size:15px;line-height:1.2;text-align:left}
  html[data-look="wand"] .view-account .account-buehne{padding:22px 16px}
  html[data-look="wand"] #view.view-account .account-buehne-text h2{font-size:clamp(44px,13vw,60px)}
  html[data-look="wand"] .view-account .account-buehne-text .account-lead{font-size:22px;margin:16px 0 22px}
  html[data-look="wand"] .view-account .account-buehne-text .account-choices .button{width:100%;min-width:0}
  html[data-look="wand"] .view-account .account-buehne-form{padding:20px 16px}
  html[data-look="wand"] .view-account #account-login,html[data-look="wand"] .view-account #account-data{grid-template-columns:minmax(0,1fr)}
  html[data-look="wand"] .view-account .account-teil + .account-teil,html[data-look="wand"] .view-account #account-data > .account-section{margin-top:22px}
  html[data-look="wand"] .view-account .account-gefahr{grid-template-columns:minmax(0,1fr);grid-template-areas:"titel" "satz" "aktion" "hinweis"}
  html[data-look="wand"] .view-account .account-gefahr .account-gefahr-knopf{width:100%}
  html[data-look="wand"] .view-account #account-sichtung .sichtung-entscheiden .button{width:100%}
}