/* Wand: Ansicht profil (docs/DESIGN-WAND-2026-10-26.md). Nur Regeln unter html[data-look="wand"].
   Creator-Bühne in violet als Live-Vorschau (Avatar groß, Claim kursiv, Alias riesig, Sichtbarkeit als Sticker), darunter die
   öffentlichen Werke als kleine Wand (das neueste groß), dann die Einstellungen: Paneele mit Farbkante, Sichtbarkeit als drei
   Farbblöcke auf der Tinte, Avatar mit großer Vorschau und bunten Kacheln, Speichern als feste Leiste unten.
   Keine Schatten, keine Verläufe, keine gestrichelten Linien; Bewegung nur das gewählte Atmen, abschaltbar (wand.css). */

/* ---- Bühne ---- */
html[data-look="wand"] #view.view-profile > .profil-buehne{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(28px,4.5vw,72px);padding-top:clamp(40px,5vw,80px);padding-bottom:clamp(40px,5vw,80px);margin-bottom:40px}
html[data-look="wand"] .view-profile .profil-avatar-rahmen{position:relative;width:clamp(200px,24vw,340px)}
html[data-look="wand"] .view-profile .profil-avatar{width:100%;aspect-ratio:1;border-radius:50%;border:2px solid var(--ink);background:var(--orange);overflow:hidden;display:flex;align-items:center;justify-content:center}
html[data-look="wand"] .view-profile .profil-avatar img{display:block;width:88%;height:88%;object-fit:contain}
html[data-look="wand"] .view-profile .profil-avatar img[data-motion="breathe"],html[data-look="wand"] .view-profile .profil-avatar-gross img[data-motion="breathe"]{animation:avatar-breathe 4s ease-in-out infinite}
/* Hintergrund der Frucht je Farbwelt des Avatars: kräftig und mit Abstand zu den Fruchtfarben. */
html[data-look="wand"] .view-profile :is(.profil-avatar,.profil-avatar-gross)[data-palette="original"]{background:var(--orange)}
html[data-look="wand"] .view-profile :is(.profil-avatar,.profil-avatar-gross)[data-palette="original"][data-frucht="orange"]{background:var(--lime)}
html[data-look="wand"] .view-profile :is(.profil-avatar,.profil-avatar-gross)[data-palette="pink"]{background:var(--mint)}
html[data-look="wand"] .view-profile :is(.profil-avatar,.profil-avatar-gross)[data-palette="violet"]{background:var(--lime)}
html[data-look="wand"] .view-profile :is(.profil-avatar,.profil-avatar-gross)[data-palette="orange"]{background:var(--lime)}
html[data-look="wand"] .view-profile :is(.profil-avatar,.profil-avatar-gross)[data-palette="leer"]{background:var(--lime)}
/* Ohne Avatar: lauter Platzhalter, eine Limette-Scheibe mit Anfangsbuchstaben, führt zur Fruchtwahl. */
html[data-look="wand"] .view-profile button.profil-avatar-leer{width:100%;height:100%;border:0;border-radius:50%;background:var(--lime);color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0}
html[data-look="wand"] .view-profile .profil-avatar-initial{font:800 clamp(110px,14vw,210px)/.8 var(--wand-display);letter-spacing:-.06em}
html[data-look="wand"] .view-profile .profil-avatar-hinweis{font:400 13px/1 var(--wand-mono);letter-spacing:.06em;text-transform:uppercase;border-bottom:2px solid var(--ink);padding-bottom:3px}
html[data-look="wand"] .view-profile button.profil-avatar-leer:hover{background:var(--paper)}
/* Sichtbarkeit als Sticker oben links auf dem Avatar: öffentlich rund Limette, Netzwerk rund Mint, privat eckig Paper. */
html[data-look="wand"] .view-profile .profil-buehne .profil-sticker{position:absolute;left:-6px;top:-6px;width:118px;height:118px;font-size:21px;z-index:1}
html[data-look="wand"] .view-profile .profil-buehne .profil-sticker[data-sichtbarkeit="network"]{background:var(--mint)}
html[data-look="wand"] .view-profile .profil-buehne .profil-sticker[data-sichtbarkeit="private"]{width:auto;height:auto;border-radius:6px;padding:8px 12px;transform:rotate(-4deg);background:var(--paper);font:700 16px/1.1 var(--body);left:0;top:4px}
html[data-look="wand"] .view-profile .profil-text{min-width:0;display:flex;flex-direction:column;gap:14px}
html[data-look="wand"] .view-profile .profil-claim{margin:0;font:italic 400 clamp(30px,3.8vw,62px)/1 var(--wand-serif);letter-spacing:-.02em;color:var(--welt-text);overflow-wrap:anywhere}
html[data-look="wand"] #view.view-profile > .wand-kopf > .profil-text > h1.profil-alias{margin:0;font:800 clamp(56px,9.4vw,164px)/.84 var(--wand-display);letter-spacing:-.065em;color:var(--welt-text);overflow-wrap:anywhere}
html[data-look="wand"] .view-profile .profil-buehne.ohne-alias h1.profil-alias{font-size:clamp(52px,8vw,136px)}
html[data-look="wand"] .view-profile .profil-anzeige{margin:0;font:400 13px/1.3 var(--wand-mono);letter-spacing:.06em;text-transform:uppercase}
html[data-look="wand"] .view-profile .profil-pitch{margin:0;max-width:44ch;font-size:clamp(18px,1.6vw,22px);line-height:1.35;overflow-wrap:anywhere}

/* ---- Werkwand: das neueste Werk groß, die übrigen kleiner ---- */
html[data-look="wand"] .view-profile .profil-werke{margin:0 0 48px}
html[data-look="wand"] .view-profile .profil-werke-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:2px solid var(--paper);padding-bottom:10px;margin-bottom:22px}
html[data-look="wand"] #view.view-profile .profil-werke-kopf h2{margin:0;color:var(--paper)}
html[data-look="wand"] .view-profile .profil-werke-kopf .wand-meta{margin:0;font-size:13px}
html[data-look="wand"] .view-profile .profil-wand{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:18px}
html[data-look="wand"] .view-profile .profil-werk{position:relative;display:flex;flex-direction:column;border:2px solid var(--welt);border-radius:12px;overflow:hidden;background:var(--welt);color:var(--welt-text);min-width:0}
html[data-look="wand"] .view-profile .profil-werk.gross{grid-column:span 2}
/* Letzte Reihe ohne Lücke (profile.js letzteReihe): allein groß über die volle Breite in flacherem Bild, ein kleines nach
   einem großen doppelt breit mit Bild 16:10 wie die großen. */
html[data-look="wand"] .view-profile .profil-werk.voll{grid-column:1/-1}
html[data-look="wand"] .view-profile .profil-werk.voll .profil-werk-bild{aspect-ratio:16/7}
html[data-look="wand"] .view-profile .profil-werk.breit{grid-column:span 2}
html[data-look="wand"] .view-profile .profil-werk-bild{position:relative;display:block;aspect-ratio:16/10;background:var(--welt-buehne);overflow:hidden;text-decoration:none}
html[data-look="wand"] .view-profile .profil-werk.klein .profil-werk-bild{aspect-ratio:4/5}
html[data-look="wand"] .view-profile .profil-werk.klein .profil-werk-bild img{object-position:left top}
/* „klein breit“ trägt beide Klassen; erst drei Klassen wiegen mehr als die Regel für klein (Gegenprüfung 2, Fund 1). */
html[data-look="wand"] .view-profile .profil-werk.klein.breit .profil-werk-bild{aspect-ratio:16/10}
html[data-look="wand"] .view-profile .profil-werk.klein.breit .profil-werk-bild img{object-position:top}
html[data-look="wand"] .view-profile .profil-werk-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
html[data-look="wand"] .view-profile .profil-werk-leer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--ink);color:var(--welt);font:800 clamp(28px,2.6vw,44px)/.9 var(--wand-display);letter-spacing:-.05em;text-transform:uppercase;text-align:center;overflow-wrap:anywhere}
/* G3: Violett auf Tinte hat nur 2,97:1; der Titel ohne Bild steht dort in Paper. */
html[data-look="wand"] .view-profile .profil-werk[data-welt="violet"] .profil-werk-leer{color:var(--paper)}
html[data-look="wand"] .view-profile .profil-werk-koerper{flex:1;display:flex;flex-direction:column;gap:6px;padding:16px 18px 10px}
html[data-look="wand"] #view.view-profile .profil-werk h3{margin:0;font:800 26px/.98 var(--wand-display);letter-spacing:-.045em;overflow-wrap:anywhere}
html[data-look="wand"] #view.view-profile .profil-werk.gross h3{font-size:clamp(30px,3vw,42px)}
html[data-look="wand"] .view-profile .profil-werk-koerper p{margin:0;font-size:15px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html[data-look="wand"] .view-profile .profil-werk-fuss{margin-top:auto;padding-top:6px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:2px solid currentColor}
html[data-look="wand"] .view-profile .profil-werk-link{min-height:44px;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:15px;color:inherit;text-decoration:underline;text-underline-offset:4px}
html[data-look="wand"] .view-profile .profil-werk-datum{font:400 13px/1 var(--wand-mono);letter-spacing:.05em}

/* ---- Einstellungen ---- */
html[data-look="wand"] .view-profile .profil-form{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px;align-items:stretch}
html[data-look="wand"] .view-profile .profil-form > *{grid-column:1/-1;min-width:0}
html[data-look="wand"] .view-profile .profil-form > .profil-paneel-alias{grid-column:span 7}
html[data-look="wand"] .view-profile .profil-form > .profil-paneel-ueber{grid-column:span 5}
html[data-look="wand"] .view-profile .profil-form:not(:has(.profil-paneel-ueber)) > .profil-paneel-alias{grid-column:1/-1}
html[data-look="wand"] #view.view-profile .profil-paneel h2{margin:0 0 14px;color:var(--ink);font-size:clamp(30px,3vw,44px)}
html[data-look="wand"] .view-profile .profil-paneel .hint,html[data-look="wand"] .view-profile .profil-paneel .micro{color:var(--ink);font-size:14px;line-height:1.45}
html[data-look="wand"] .view-profile .profil-paneel div.field{margin-bottom:18px}
html[data-look="wand"] .view-profile .profil-paneel .field .hint{font-weight:400}
html[data-look="wand"] .view-profile .profil-paneel .field input,html[data-look="wand"] .view-profile .profil-paneel .field textarea,html[data-look="wand"] .view-profile .profil-paneel select{min-height:48px;border:2px solid var(--ink);border-radius:6px;background:var(--white);color:var(--ink);font-size:16px}
html[data-look="wand"] .view-profile .profil-paneel #profile-handle{min-height:58px;font-size:22px;font-weight:700}
html[data-look="wand"] .view-profile .profil-paneel .handle-state{font-size:15px;font-weight:700}

/* Sichtbarkeit: drei große Farbblöcke direkt auf der Tinte, die Wahl mit Paper-Rahmen und „✓ Gewählt“. */
html[data-look="wand"] .view-profile .profil-sicht{margin:10px 0}
html[data-look="wand"] #view.view-profile .profil-sicht h2{margin:0 0 16px;color:var(--paper)}
html[data-look="wand"] .view-profile .profil-sicht-bloecke{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
html[data-look="wand"] .view-profile .profil-sicht-block{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:184px;padding:22px 22px 18px;border:4px solid var(--welt);border-radius:12px;background:var(--welt);color:var(--welt-text);text-align:left;font:inherit;cursor:pointer}
html[data-look="wand"] .view-profile .profil-sicht-block:hover .profil-sicht-marke{background:var(--paper);color:var(--ink);border-color:var(--ink)}
html[data-look="wand"] .view-profile .profil-sicht-block[aria-pressed="true"]{border-color:var(--paper)}
html[data-look="wand"] .view-profile .profil-sicht-name{font:800 clamp(34px,3.4vw,52px)/.9 var(--wand-display);letter-spacing:-.05em}
html[data-look="wand"] .view-profile .profil-sicht-satz{font-size:17px;line-height:1.35;max-width:30ch}
html[data-look="wand"] .view-profile .profil-sicht-marke{margin-top:auto;font:400 13px/1 var(--wand-mono);letter-spacing:.06em;text-transform:uppercase;padding:8px 10px;border-radius:6px;border:2px solid currentColor}
html[data-look="wand"] .view-profile .profil-sicht-block[aria-pressed="true"] .profil-sicht-marke{background:var(--ink);color:var(--paper);border-color:var(--ink)}
html[data-look="wand"] .view-profile .profil-sicht .hint{margin:14px 0 0;color:var(--paper);font-size:15px}

/* Avatar: große Vorschau links, Früchte und Farbwelten als bunte Kacheln rechts. */
html[data-look="wand"] .view-profile .profil-paneel div.profil-avatar-feld{margin:0;font-size:16px;font-weight:400}
html[data-look="wand"] .view-profile .profil-avatar-satz{margin:0 0 22px;font-size:16px;max-width:60ch}
html[data-look="wand"] .view-profile .profil-avatar-raster{display:grid;grid-template-columns:clamp(200px,20vw,280px) minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start}
html[data-look="wand"] .view-profile .profil-avatar-gross{width:100%;aspect-ratio:1;border-radius:50%;border:2px solid var(--ink);overflow:hidden;display:flex;align-items:center;justify-content:center;position:sticky;top:24px}
html[data-look="wand"] .view-profile .profil-avatar-gross img{display:block;width:88%;height:88%;object-fit:contain}
html[data-look="wand"] .view-profile span.profil-avatar-leer{font:800 clamp(110px,12vw,180px)/.8 var(--wand-display);letter-spacing:-.06em;color:var(--ink)}
html[data-look="wand"] .view-profile .profil-avatar-optionen fieldset{border:0;margin:0 0 22px;padding:0;min-width:0}
html[data-look="wand"] .view-profile .profil-avatar-optionen legend{padding:0;margin:0 0 10px;font:400 13px/1 var(--wand-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
html[data-look="wand"] .view-profile .profil-fruechte{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:10px}
html[data-look="wand"] .view-profile .profil-frucht{aspect-ratio:1;min-height:44px;padding:4px;border:2px solid var(--ink);border-radius:10px;background:var(--welt,var(--paper));color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
html[data-look="wand"] .view-profile .profil-frucht img{display:block;width:100%;height:100%;object-fit:contain}
html[data-look="wand"] .view-profile .profil-frucht:not([data-welt]){grid-column:span 2;aspect-ratio:auto;background:var(--paper);font-weight:700;font-size:14px;line-height:1.15;padding:8px}
html[data-look="wand"] .view-profile .profil-frucht[aria-pressed="true"]{outline:4px solid var(--ink);outline-offset:3px}
html[data-look="wand"] .view-profile .profil-frucht:hover{border-width:4px}
html[data-look="wand"] .view-profile .profil-paletten{display:flex;flex-wrap:wrap;gap:12px}
html[data-look="wand"] .view-profile .profil-palette{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:8px 16px 8px 10px;border:2px solid var(--ink);border-radius:10px;background:var(--paper);color:var(--ink);font-weight:700;font-size:15px;cursor:pointer}
html[data-look="wand"] .view-profile .profil-palette[data-avatar-palette="pink"]{background:var(--pink)}
html[data-look="wand"] .view-profile .profil-palette[data-avatar-palette="violet"]{background:var(--violet);color:var(--paper)}
html[data-look="wand"] .view-profile .profil-palette[data-avatar-palette="orange"]{background:var(--orange)}
html[data-look="wand"] .view-profile .profil-palette-farben{display:inline-flex}
html[data-look="wand"] .view-profile .profil-palette-farben span{display:block;width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);background:var(--paper)}
html[data-look="wand"] .view-profile .profil-palette-farben span + span{margin-left:-8px}
html[data-look="wand"] .view-profile .profil-palette[data-avatar-palette="original"] .profil-palette-farben{display:none}
html[data-look="wand"] .view-profile .profil-palette[data-avatar-palette="original"]{padding-left:16px}
html[data-look="wand"] .view-profile .profil-palette[data-avatar-palette="pink"] .profil-palette-farben span:first-child{background:var(--pink)}
html[data-look="wand"] .view-profile .profil-palette[data-avatar-palette="pink"] .profil-palette-farben span + span{background:var(--lime)}
html[data-look="wand"] .view-profile .profil-palette[data-avatar-palette="violet"] .profil-palette-farben span:first-child{background:var(--violet);border-color:var(--paper)}
html[data-look="wand"] .view-profile .profil-palette[data-avatar-palette="violet"] .profil-palette-farben span + span{background:var(--mint)}
html[data-look="wand"] .view-profile .profil-palette[data-avatar-palette="orange"] .profil-palette-farben span:first-child{background:var(--orange)}
html[data-look="wand"] .view-profile .profil-palette[data-avatar-palette="orange"] .profil-palette-farben span + span{background:var(--pink)}
html[data-look="wand"] .view-profile .profil-palette[aria-pressed="true"]{outline:4px solid var(--ink);outline-offset:3px}
html[data-look="wand"] .view-profile .profil-avatar-selects{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:14px}
html[data-look="wand"] .view-profile .profil-avatar-selects label{display:flex;flex-direction:column;gap:8px;flex:1 1 220px;font-size:14px;font-weight:700;color:var(--ink)}
html[data-look="wand"] .view-profile .profil-avatar-selects select{width:100%;padding:10px 12px}

/* Speichern: feste Leiste unten über die volle Breite, Limette-Knopf, Zustand in Paper daneben. */
html[data-look="wand"] .view-profile .profil-speichern{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px;margin:8px calc(50% - 50vw) 0;padding:14px max(56px,calc((100vw - 1336px) / 2));background:var(--ink);border-top:2px solid var(--paper)}
html[data-look="wand"] .view-profile .profil-speichern #profile-save{min-height:52px;padding:0 30px;font-size:17px}
html[data-look="wand"] .view-profile .profil-speichern .status-text{margin:0;color:var(--paper);font-size:15px}
html[data-look="wand"] .view-profile .profil-speichern .status-text.error-text{color:var(--pink)}
html[data-look="wand"] .view-profile .profil-speichern #profile-form-error{margin:0;flex-basis:100%;font-size:15px}

/* Watchlist auf der Tinte, ohne graue Kleinschrift. */
html[data-look="wand"] .view-profile .profile-watchlist{max-width:none;margin-top:48px;border-top:2px solid var(--paper);padding-top:24px}
html[data-look="wand"] #view.view-profile .profile-watchlist h2{color:var(--paper)}
html[data-look="wand"] .view-profile .profile-watchlist .hint,html[data-look="wand"] .view-profile .profile-watchlist .status-text{color:var(--paper);font-size:15px}
html[data-look="wand"] .view-profile .profile-watchlist .list-item{border-bottom:2px solid var(--paper)}

@media (max-width:1100px){
  html[data-look="wand"] .view-profile .profil-wand{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-look="wand"] .view-profile .profil-form > .profil-paneel-alias,html[data-look="wand"] .view-profile .profil-form > .profil-paneel-ueber{grid-column:1/-1}
}
@media (max-width:820px){
  html[data-look="wand"] .view-profile .profil-sicht-bloecke{grid-template-columns:1fr}
  html[data-look="wand"] .view-profile .profil-sicht-block{min-height:0}
  html[data-look="wand"] .view-profile .profil-avatar-raster{grid-template-columns:1fr}
  html[data-look="wand"] .view-profile .profil-avatar-gross{position:static;width:min(220px,60%)}
}
@media (max-width:600px){
  html[data-look="wand"] #view.view-profile > .profil-buehne{grid-template-columns:1fr;gap:22px;padding-top:28px;padding-bottom:30px;margin-bottom:28px}
  html[data-look="wand"] .view-profile .profil-avatar-rahmen{width:min(196px,58vw);margin-left:6px}
  html[data-look="wand"] .view-profile .profil-buehne .profil-sticker{width:88px;height:88px;font-size:16px}
  html[data-look="wand"] .view-profile .profil-avatar-initial{font-size:120px}
  html[data-look="wand"] .view-profile .profil-claim{font-size:28px}
  html[data-look="wand"] #view.view-profile > .wand-kopf > .profil-text > h1.profil-alias{font-size:clamp(44px,13.5vw,64px)}
  html[data-look="wand"] .view-profile .profil-buehne.ohne-alias h1.profil-alias{font-size:clamp(44px,13vw,60px)}
  html[data-look="wand"] .view-profile .profil-pitch{font-size:17px}
  html[data-look="wand"] .view-profile .profil-wand{gap:12px}
  html[data-look="wand"] .view-profile .profil-werk.gross{grid-column:1/-1}
  html[data-look="wand"] .view-profile .profil-werk.voll .profil-werk-bild{aspect-ratio:16/10}
  html[data-look="wand"] #view.view-profile .profil-werk.gross h3{font-size:28px}
  html[data-look="wand"] .view-profile .profil-werk.klein .profil-werk-koerper{padding:10px 12px 4px}
  html[data-look="wand"] #view.view-profile .profil-werk.klein h3{font-size:18px}
  html[data-look="wand"] .view-profile .profil-werk.klein .profil-werk-koerper p,html[data-look="wand"] .view-profile .profil-werk.klein .profil-werk-datum{display:none}
  html[data-look="wand"] .view-profile .profil-werk.klein .profil-werk-leer{font-size:22px}
  html[data-look="wand"] .view-profile .profil-form{gap:16px}
  html[data-look="wand"] .view-profile .profil-sicht-block{padding:16px 16px 14px;gap:6px}
  html[data-look="wand"] .view-profile .profil-sicht-name{font-size:34px}
  html[data-look="wand"] .view-profile .profil-sicht-satz{font-size:16px}
  html[data-look="wand"] .view-profile .profil-fruechte{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px}
  html[data-look="wand"] .view-profile .profil-speichern{margin:8px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
  html[data-look="wand"] .view-profile .profil-speichern #profile-save{flex:1 1 100%;justify-content:center}
}