/* Wand: Ansicht projekte (docs/DESIGN-WAND-2026-10-26.md). Nur Regeln unter html[data-look="wand"].
   Entwurf D (docs/meine-projekte-varianten-2026-10-26/d-mischung.html): Kopfband in Limette mit Kopfzahlen, Leiste mit Ablagen,
   Werkkarten in Farbwelten; öffentlich zwei Spalten breit mit 16:10-Bild, privat eine Spalte mit 4:5-Bild. */

/* Kopfband: Titel links, Kopfzahlen rechts unten; auf Limette alles in Tinte. */
html[data-look="wand"] #view.view-projects > .wand-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px}
html[data-look="wand"] #view.view-projects > .wand-kopf .wand-zahlen{color:var(--welt-text);padding-bottom:6px}
html[data-look="wand"] #view.view-projects > .wand-kopf .wand-zahlen b{color:var(--welt-text)}
html[data-look="wand"] #view.view-projects > .wand-kopf .wand-zahlen.offen{visibility:hidden}

/* Leiste: Ablagen links, Import rechts. */
html[data-look="wand"] .view-projects .wand-ablagen{display:flex;flex-wrap:wrap;gap:0 24px}
html[data-look="wand"] .view-projects .wand-ablagen .mode-button{min-height:44px;border-bottom-width:3px}
html[data-look="wand"] .view-projects .wand-aktionen{display:flex;flex-wrap:wrap;gap:10px}
html[data-look="wand"] .view-projects .wand-aktionen .button{min-height:44px;padding:0 18px;font-size:15px}
html[data-look="wand"] .view-projects .wand-hinweis button{padding:0}

/* Themenfilter auf Tinte. */
html[data-look="wand"] .view-projects #projects-tags-box{margin:0 0 22px}
html[data-look="wand"] .view-projects #projects-tags-box .chips{margin:0 0 6px}
html[data-look="wand"] .view-projects #projects-tags-box .chip{background:transparent;border-color:var(--paper);color:var(--paper)}
html[data-look="wand"] .view-projects #projects-tags-box .chip[aria-pressed=true]{background:var(--lime);border-color:var(--lime);color:var(--ink)}
html[data-look="wand"] .view-projects #projects-tags-box .textbutton{color:var(--paper)}
/* Fokus auf Tinte: app.css setzt den Ring der Filter mit ID-Gewicht blau (2,8:1 auf Tinte). */
html[data-look="wand"] .view-projects #projects-tags-box .chip:focus-visible{outline-color:var(--paper)}

/* Raster: vier Spalten, öffentliche Werke doppelt breit, Lücken füllt die nächste schmale Karte. */
html[data-look="wand"] .view-projects .wand-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:18px;margin:0 0 28px}
html[data-look="wand"] .view-projects .wand-werk{position:relative;display:flex;flex-direction:column;min-width:0;border:2px solid var(--welt);border-radius:12px;background:var(--welt);color:var(--welt-text);cursor:pointer}
html[data-look="wand"] .view-projects .wand-werk.gross{grid-column:span 2}
html[data-look="wand"] .view-projects .wand-buehne{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:10px 10px 0 0;background:var(--ink)}
html[data-look="wand"] .view-projects .wand-werk.gross .wand-buehne{aspect-ratio:16/10}
html[data-look="wand"] .view-projects .wand-werk.klein .wand-buehne{aspect-ratio:4/5}
html[data-look="wand"] .view-projects .wand-bild{position:absolute;inset:0}
html[data-look="wand"] .view-projects .wand-bild img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top}
html[data-look="wand"] .view-projects .wand-leer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:76px 16px 72px;color:var(--welt);font:800 clamp(26px,2.4vw,40px)/.9 var(--wand-display);letter-spacing:-.05em;text-transform:uppercase;text-align:center;overflow-wrap:break-word;hyphens:auto}
html[data-look="wand"] .view-projects .wand-werk.gross .wand-leer{font-size:clamp(40px,4.6vw,76px)}
/* G3: Violett auf Tinte hat nur 2,97:1; der Titel ohne Bild steht dort in Paper. */
html[data-look="wand"] .view-projects .wand-werk[data-welt="violet"] .wand-leer{color:var(--paper)}

/* Bedienung im Bild: Sticker oben links, „···“ oben rechts, Startaktion unten rechts. */
html[data-look="wand"] .view-projects .wand-buehne .wand-sticker{position:absolute;left:14px;top:14px;z-index:1}
html[data-look="wand"] .view-projects .wand-mehr{position:absolute;right:12px;top:12px;z-index:1;min-width:44px;min-height:44px;padding:0 8px;border:2px solid var(--paper);border-radius:6px;background:var(--ink);color:var(--paper);font:700 16px/1 var(--body);letter-spacing:.04em;cursor:pointer}
html[data-look="wand"] .view-projects .wand-mehr:hover{background:var(--paper);color:var(--ink)}
html[data-look="wand"] .view-projects .wand-start{position:absolute;right:14px;bottom:14px;z-index:1;display:inline-flex;align-items:center;gap:10px;max-width:calc(100% - 28px);min-height:48px;padding:0 18px;border:2px solid var(--ink);border-radius:6px;background:var(--ink);color:var(--paper);font-weight:700;font-size:16px;text-decoration:none}
html[data-look="wand"] .view-projects .wand-start span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-look="wand"] .view-projects .wand-start i{font-style:normal;color:var(--lime)}
html[data-look="wand"] .view-projects .wand-start:hover{border-color:var(--paper)}
html[data-look="wand"] .view-projects .wand-buehne:has(.wand-leer) .wand-start{border-color:var(--welt)}
/* Die Bühne ist hier Tinte (nicht die Bühnenfarbe der Welt): Ringe der Knöpfe im Bild in Paper. */
html[data-look="wand"] .view-projects .wand-buehne :focus-visible{outline-color:var(--paper)}

/* Farbfläche: Projektname, Werktitel, Satz, Fuß. */
html[data-look="wand"] .view-projects .wand-koerper{display:flex;flex:1;flex-direction:column;gap:6px;min-width:0;padding:16px 18px 10px}
html[data-look="wand"] .view-projects .wand-projekt{font:400 12px/1.3 var(--wand-mono);letter-spacing:.05em;text-transform:uppercase;overflow-wrap:anywhere}
html[data-look="wand"] #view.view-projects .wand-werk h3{margin:0;font:800 26px/.98 var(--wand-display);letter-spacing:-.045em;color:inherit;overflow-wrap:break-word;hyphens:auto}
html[data-look="wand"] #view.view-projects .wand-werk.gross h3{font-size:40px}
html[data-look="wand"] .view-projects .wand-satz{margin:0;font-size:16px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html[data-look="wand"] .view-projects .wand-fuss{display:flex;align-items:center;gap:8px 14px;margin-top:auto;padding-top:8px;border-top:2px solid currentColor}
html[data-look="wand"] .view-projects .wand-fuss a,html[data-look="wand"] .view-projects .wand-verwerfen{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0;border:0;background:transparent;color:inherit;font:700 14px/1.2 var(--body);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
html[data-look="wand"] .view-projects .wand-fuss a .arrow{font-size:16px}
html[data-look="wand"] .view-projects .wand-datum{margin-left:auto;font:400 12px/1.2 var(--wand-mono);letter-spacing:.05em;text-align:right}
html[data-look="wand"] .view-projects .wand-rueck{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:transparent;color:inherit;font:400 12px/1 var(--wand-mono);letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
html[data-look="wand"] .view-projects .wand-rueck b{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 6px;border-radius:14px;background:var(--ink);color:var(--paper);font:800 15px/1 var(--wand-display);letter-spacing:0}

/* Sicherung: unauffällig unter den Karten. */
html[data-look="wand"] .view-projects .wand-sicherung{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin:0}
html[data-look="wand"] .view-projects .wand-sicherung .textbutton{padding:0;font:400 13px/1.3 var(--wand-mono);letter-spacing:.02em}
html[data-look="wand"] .view-projects .wand-sicherung .error-text{flex-basis:100%;margin:0}

/* „···“-Dialog: Paneel, Aktionen untereinander, Löschen deutlich. */
html[data-look="wand"] .wand-mehr-dialog{width:min(440px,calc(100% - 32px));border-top:10px solid var(--lime)}
html[data-look="wand"] .wand-mehr-dialog h2{margin:0 0 16px;font:800 28px/1 var(--wand-display);letter-spacing:-.045em;overflow-wrap:anywhere}
html[data-look="wand"] .wand-mehr-liste{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
html[data-look="wand"] .wand-mehr-liste .button{width:100%;justify-content:flex-start;min-height:48px;font-size:16px}
html[data-look="wand"] .wand-mehr-liste .button.wand-gefahr{border-color:var(--pink-dark);color:var(--pink-dark)}
html[data-look="wand"] .wand-mehr-liste .button.wand-gefahr:hover{background:var(--pink);border-color:var(--pink);color:var(--ink)}
html[data-look="wand"] .wand-mehr-dialog .toolbar .button{width:100%}

@media (max-width:1100px){
  html[data-look="wand"] .view-projects .wand-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:600px){
  html[data-look="wand"] #view.view-projects > .wand-kopf{grid-template-columns:1fr;gap:14px}
  html[data-look="wand"] .view-projects .wand-ablagen{gap:0 18px}
  html[data-look="wand"] .view-projects .wand-aktionen #new-project{display:none}
  html[data-look="wand"] .view-projects .wand-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  html[data-look="wand"] .view-projects .wand-werk.gross{grid-column:1/-1}
  html[data-look="wand"] #view.view-projects .wand-werk.gross h3{font-size:28px}
  html[data-look="wand"] .view-projects .wand-werk.klein .wand-koerper{padding:10px 12px 4px}
  html[data-look="wand"] #view.view-projects .wand-werk.klein h3{font-size:18px}
  html[data-look="wand"] .view-projects .wand-werk.klein :is(.wand-satz,.wand-projekt,.wand-datum),html[data-look="wand"] .view-projects .wand-werk.klein .wand-rueck span{display:none}
  /* N8: die Startaktion behält ihre Beschriftung (CLAUDE.md: verständliche Startaktion); die schmale Karte wird dafür eine
     Zeile höher, das Bild bleibt 4:5 darüber, die Aktion steht als Limette-Knopf über die Breite in der Zeile auf Tinte. */
  html[data-look="wand"] .view-projects .wand-werk.klein .wand-buehne{aspect-ratio:auto;height:0;padding-top:125%;padding-bottom:56px}
  html[data-look="wand"] .view-projects .wand-werk.klein .wand-bild{bottom:56px}
  html[data-look="wand"] .view-projects .wand-werk.klein .wand-start{left:8px;right:8px;bottom:6px;max-width:none;min-height:44px;padding:4px 12px;gap:8px;justify-content:space-between;background:var(--lime);border-color:var(--lime);color:var(--ink);font-size:14px}
  html[data-look="wand"] .view-projects .wand-werk.klein .wand-start i{color:var(--ink)}
  html[data-look="wand"] .view-projects .wand-werk.klein .wand-start span{white-space:normal;line-height:1.1}
  html[data-look="wand"] .view-projects .wand-werk.klein .wand-sticker.privat{padding:3px 5px;font-size:12px}
  html[data-look="wand"] .view-projects .wand-werk.klein .wand-leer{padding:56px 10px 16px;font-size:22px}
  html[data-look="wand"] .view-projects .wand-werk.gross .wand-leer{font-size:clamp(30px,10vw,44px)}
  html[data-look="wand"] .wand-mehr-dialog{width:100%;border-top-width:10px}
}