/* Designsprache „Wand“ (26.10.2026, docs/DESIGN-WAND-2026-10-26.md): Fundament für alle Ansichten.
   Gilt nur unter html[data-look="wand"] (Schalter ?look=wand, siehe app.html); ohne Schalter bleibt alles wie bisher.
   Ansichtsspezifisches steht in wand-<ansicht>.css. Keine Schatten, keine Verläufe. */

html[data-look="wand"]{
  --wand-display:'Bricolage Grotesque','Arial Black',Arial,sans-serif;
  --wand-serif:'Instrument Serif',Georgia,serif;
  --wand-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --wand-gap:clamp(16px,2vw,28px);
  background:var(--ink);
}

/* Farbwelten: Fläche, Text auf der Fläche, Bühne hinter Bildern und Text auf der Bühne (wie site/farbwelt.css, dazu mint). */
html[data-look="wand"] [data-welt]{--welt:var(--pink);--welt-text:var(--ink);--welt-buehne:var(--mint);--welt-buehne-text:var(--ink)}
html[data-look="wand"] [data-welt="lime"]{--welt:var(--lime);--welt-text:var(--ink);--welt-buehne:var(--violet);--welt-buehne-text:var(--paper)}
html[data-look="wand"] [data-welt="violet"]{--welt:var(--violet);--welt-text:var(--paper);--welt-buehne:var(--orange);--welt-buehne-text:var(--ink)}
html[data-look="wand"] [data-welt="orange"]{--welt:var(--orange);--welt-text:var(--ink);--welt-buehne:var(--lilac);--welt-buehne-text:var(--ink)}
html[data-look="wand"] [data-welt="mint"]{--welt:var(--mint);--welt-text:var(--ink);--welt-buehne:var(--pink);--welt-buehne-text:var(--ink)}

/* Grund: die ganze Seite ist Tinte, Text Paper. */
html[data-look="wand"] body{background:var(--ink);color:var(--paper)}
html[data-look="wand"] .site-header{border-bottom:0}
html[data-look="wand"] #main{padding:40px 0 72px}
html[data-look="wand"] .site-footer{border-top:2px solid var(--paper)}
html[data-look="wand"] .site-footer .notice{color:var(--paper);font-family:var(--wand-mono);font-size:12px;letter-spacing:.04em}
/* N6: die Fußzeile hat schon ihre Linie; die Hinweislinie (.notice) darüber entfällt dort. */
html[data-look="wand"] .site-footer .notice{border-top:0}
/* N5: Meldungen stehen als Paper-Fläche mit Tinte-Kante über Tinte und über Paneelen. */
html[data-look="wand"] .toast{background:var(--paper);color:var(--ink);border:2px solid var(--ink)}
/* N3: feste Leisten unten (Speichern, Import, Editor, mobile Hauptaktion) verdecken kein fokussiertes Element; der Browser
   scrollt beim Tabben so weit, dass unten Platz für die Leiste bleibt. Mobil sind die Leisten höher und Felder länger. */
html[data-look="wand"]{scroll-padding-bottom:128px}
/* N9: Skip-Link mit Ring aus zwei Tönen (Paper außen, Tinte innen), sichtbar auf Tinte, auf Farbflächen und auf Paneelen. */
html[data-look="wand"] .skip:focus{outline:3px solid var(--paper);outline-offset:0;border:3px solid var(--ink)}
html[data-look="wand"] ::selection{background:var(--lime);color:var(--ink)}

/* Titel: riesig, letztes Wort kursiv in Limette (.akzent setzt die Shell). */
html[data-look="wand"] #view > h1,html[data-look="wand"] #view > header > h1,html[data-look="wand"] #view > .wand-kopf > h1,html[data-look="wand"] .wand-titel{font:800 clamp(56px,8vw,132px)/.86 var(--wand-display);letter-spacing:-.06em;color:var(--paper);margin:0 0 28px;overflow-wrap:anywhere}
html[data-look="wand"] .akzent{font-family:var(--wand-serif);font-style:italic;font-weight:400;letter-spacing:-.04em;color:var(--lime)}
/* Zwischentitel ohne ID-Gewicht (:where), damit Ansichten ihre Größen selbst setzen können. */
html[data-look="wand"] :where(#view) h2{font-size:clamp(28px,3.4vw,48px);letter-spacing:-.05em;line-height:.95}
html[data-look="wand"] :where(#view) h3{letter-spacing:-.04em}

/* Etiketten und Nebenangaben: Plex Mono; Hinweise lesbar (14 px, Paper auf Tinte, Tinte im Paneel, nie grau). */
html[data-look="wand"] .eyebrow,html[data-look="wand"] .wand-meta{font-family:var(--wand-mono);font-size:12px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--lime)}
html[data-look="wand"] .hint,html[data-look="wand"] .notice,html[data-look="wand"] .micro,html[data-look="wand"] .status-text{font-size:14px;color:var(--paper)}
html[data-look="wand"] .notice{border-top:2px solid var(--paper)}
html[data-look="wand"] .error-text{color:var(--pink);font-size:14px;font-weight:700}

/* Knöpfe auf Tinte: primär Limette, sekundär Paper-Kontur. */
html[data-look="wand"] .button{border:2px solid var(--lime);background:var(--lime);color:var(--ink);font-weight:700;border-radius:6px}
html[data-look="wand"] .button:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
html[data-look="wand"] .button.secondary{background:transparent;border-color:var(--paper);color:var(--paper)}
html[data-look="wand"] .button.secondary:hover{background:var(--paper);color:var(--ink)}
html[data-look="wand"] .button[disabled]:hover{background:var(--lime);color:var(--ink)}
html[data-look="wand"] .textbutton,html[data-look="wand"] .text-link{color:var(--paper);text-decoration-color:var(--lime);text-decoration-thickness:2px}
html[data-look="wand"] .textbutton:hover,html[data-look="wand"] .text-link:hover{color:var(--lime)}
/* Auf Farbflächen (Kopfband, Blöcke und Karten mit eigener Welt) gilt die Textfarbe der Welt für Textlinks, Hinweise und
   Etiketten. :where hält das Gewicht niedrig, damit Paneele darin und Ansichtsregeln gewinnen. */
html[data-look="wand"] :where(.wand-kopf,.editor-head,.product-head,[data-welt]:not(#view,.editor,.product-page,.wand-werkseite)) :is(.textbutton,.text-link),html[data-look="wand"] :where(.wand-kopf,.editor-head,.product-head,[data-welt]:not(#view,.editor,.product-page,.wand-werkseite)) :is(.textbutton,.text-link):hover{color:var(--welt-text);text-decoration-color:currentColor}
html[data-look="wand"] :where(.wand-kopf,.editor-head,.product-head,[data-welt]:not(#view,.editor,.product-page,.wand-werkseite)) :is(.hint,.notice,.micro,.status-text,.eyebrow,.wand-meta){color:var(--welt-text)}

/* Reiter und Moduswahl auf Tinte. */
html[data-look="wand"] .mode-button{color:var(--paper);font-size:15px}
html[data-look="wand"] .mode-button:hover{border-bottom-color:var(--paper)}
html[data-look="wand"] .mode-button[aria-pressed=true],html[data-look="wand"] .mode-button[aria-current=page],html[data-look="wand"] .mode-button[aria-selected=true]{border-bottom:3px solid var(--lime);color:var(--lime)}

/* Paneel: Paper-Fläche für Formulare und lange Texte; darin gelten wieder Tinte-Farben. */
html[data-look="wand"] .card,html[data-look="wand"] .input-shell,html[data-look="wand"] .wand-paneel,html[data-look="wand"] dialog{background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:12px}
html[data-look="wand"] .card,html[data-look="wand"] .wand-paneel{padding:clamp(18px,2.4vw,32px)}
html[data-look="wand"] :is(.card,.input-shell,.wand-paneel,dialog) :is(.eyebrow,.wand-meta){color:var(--ink)}
html[data-look="wand"] :is(.card,.input-shell,.wand-paneel,dialog) :is(.hint,.notice,.micro,.status-text){color:var(--ink)}
html[data-look="wand"] :is(.card,.input-shell,.wand-paneel,dialog) .notice{border-top-color:var(--ink)}
html[data-look="wand"] :is(.card,.input-shell,.wand-paneel,dialog) .error-text{color:var(--pink-dark)}
html[data-look="wand"] :is(.card,.input-shell,.wand-paneel,dialog) :is(.textbutton,.text-link){color:var(--ink);text-decoration-color:var(--ink)}
html[data-look="wand"] :is(.card,.input-shell,.wand-paneel,dialog) :is(.textbutton,.text-link):hover{color:var(--ink);text-decoration-color:var(--pink)}
html[data-look="wand"] :is(.card,.input-shell,.wand-paneel,dialog) .button{background:var(--ink);border-color:var(--ink);color:var(--paper)}
html[data-look="wand"] :is(.card,.input-shell,.wand-paneel,dialog) .button:hover{background:var(--pink);border-color:var(--pink);color:var(--ink)}
html[data-look="wand"] :is(.card,.input-shell,.wand-paneel,dialog) .button.secondary{background:var(--paper);border-color:var(--ink);color:var(--ink)}
html[data-look="wand"] :is(.card,.input-shell,.wand-paneel,dialog) .button.secondary:hover{background:var(--lime)}
html[data-look="wand"] :is(.card,.input-shell,.wand-paneel,dialog) .mode-button{color:var(--ink)}
html[data-look="wand"] :is(.card,.input-shell,.wand-paneel,dialog) .mode-button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink)}

/* Felder: 48 px, 16 px Schrift, 2 px Tinte-Rand. */
html[data-look="wand"] .field input,html[data-look="wand"] .field select,html[data-look="wand"] .field textarea,html[data-look="wand"] input.field,html[data-look="wand"] select.field,html[data-look="wand"] textarea.field{border:2px solid var(--ink);border-radius:6px;font-size:16px;background:var(--white);color:var(--ink)}
html[data-look="wand"] label.field,html[data-look="wand"] div.field{font-size:14px;font-weight:700}

/* Leerer Zustand: kein gestrichelter Kasten, ein Satz groß und kursiv. */
html[data-look="wand"] .empty{border:0;background:transparent;color:var(--paper);padding:24px 0}
html[data-look="wand"] .empty p:first-child{font:italic 400 clamp(28px,3vw,40px)/1.1 var(--wand-serif);letter-spacing:-.02em;color:var(--paper)}
/* In Paneelen und Karten (Paper) steht der leere Zustand in Tinte (Messung 27.10.2026: Bausteine Paper auf Paper). */
html[data-look="wand"] :is(.card,.input-shell,.wand-paneel,dialog) .empty,html[data-look="wand"] :is(.card,.input-shell,.wand-paneel,dialog) .empty p:first-child{color:var(--ink)}

/* Pillen und Chips als Plex-Etiketten. */
html[data-look="wand"] .pill{font-family:var(--wand-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;border-width:2px}
/* Abzeichen haben in app.css eine weiße Fläche, die Phasenbasis steht im Projektkopf auf Tinte (Messung 27.10.2026). */
html[data-look="wand"] .badge{color:var(--ink)}
html[data-look="wand"] .phase-basis{color:var(--paper)}

/* Sticker. */
html[data-look="wand"] .wand-sticker{display:inline-flex;align-items:center;justify-content:center;width:66px;height:66px;border-radius:50%;background:var(--lime);color:var(--ink);border:2px solid var(--ink);transform:rotate(-8deg);font:800 19px/1 var(--wand-display);letter-spacing:-.02em}
html[data-look="wand"] .wand-sticker.privat{width:auto;height:auto;border-radius:6px;padding:6px 10px;transform:none;background:var(--paper);font:700 12px/1.2 var(--body);letter-spacing:0}

/* Kopfzahlen und Leiste. */
html[data-look="wand"] .wand-zahlen{display:flex;gap:28px;font-family:var(--wand-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
html[data-look="wand"] .wand-zahlen b{display:block;font:800 64px/.9 var(--wand-display);letter-spacing:-.05em;color:var(--lime)}
html[data-look="wand"] .wand-zahlen > :nth-child(2) b{color:var(--paper)}
html[data-look="wand"] .wand-leiste{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:2px solid var(--paper);border-bottom:2px solid var(--paper);padding:6px 0;margin:0 0 22px}
html[data-look="wand"] .wand-hinweis{font-family:var(--wand-mono);font-size:13px;color:var(--paper);display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:0 0 22px}
html[data-look="wand"] .wand-hinweis :is(a,button){color:var(--lime);text-decoration:underline;text-underline-offset:4px;background:none;border:0;min-height:44px;font:inherit;cursor:pointer}

/* Mobil: Hauptaktion als Limette-Leiste unten. Baustein für Ansichten: jede Ansicht, die eine mobile Hauptaktion hat, setzt
   .wand-unten selbst in ihr Markup (die Shell setzt sie nicht). Stand 26.10.: Meine Projekte und Start nutzen .wand-unten;
   Profil (.profil-speichern), GitHub (.wand-github-aktion) und Editor (.editor-bar) haben eigene Leisten gleicher Gestalt. */
html[data-look="wand"] .wand-unten{display:none}
@media (max-width:600px){
  html[data-look="wand"]{scroll-padding-bottom:180px}
  html[data-look="wand"] #main{padding:22px 0 24px}
  html[data-look="wand"] #view > h1,html[data-look="wand"] #view > header > h1,html[data-look="wand"] #view > .wand-kopf > h1,html[data-look="wand"] .wand-titel{font-size:clamp(48px,15vw,72px);margin-bottom:18px}
  html[data-look="wand"] .wand-zahlen b{font-size:44px}
  html[data-look="wand"] .wand-unten{display:flex;gap:10px;position:sticky;bottom:0;z-index:20;margin:0 -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--ink)}
  html[data-look="wand"] .wand-unten :is(a,.button){flex:1;min-height:52px;display:flex;align-items:center;justify-content:center;background:var(--lime);border:2px solid var(--lime);color:var(--ink);font-weight:700;font-size:16px;border-radius:6px;text-decoration:none}
}
@media (prefers-reduced-motion:reduce){html[data-look="wand"] *{transition:none!important;animation:none!important}}

/* Bunt (Tom 26.10.: „Wand ja, aber bunt“): Tinte nur als Fuge. Kopfband je Ansicht in ihrer Farbwelt über die volle Breite,
   Paneele mit dicker Kante in derselben Welt. */
html[data-look="wand"] #view > .wand-kopf{background:var(--welt);color:var(--welt-text);margin:-40px calc(50% - 50vw) 32px;padding:clamp(28px,4vw,56px) max(56px,calc((100vw - 1336px) / 2)) clamp(24px,3vw,40px);border-bottom:2px solid var(--ink)}
html[data-look="wand"] #view > .wand-kopf > h1{color:var(--welt-text);margin:0}
html[data-look="wand"] #view > .wand-kopf .akzent{color:var(--welt-text)}
/* Kopfzahlen und Etiketten im Kopfband stehen in der Textfarbe der Welt (Limette und Paper wären auf hellen Welten unsichtbar). */
html[data-look="wand"] #view > .wand-kopf :is(.wand-zahlen,.wand-zahlen b,.wand-meta,.eyebrow){color:var(--welt-text)}
html[data-look="wand"] #view[data-welt] .card,html[data-look="wand"] #view[data-welt] .wand-paneel{border-top:10px solid var(--welt)}
@media (max-width:600px){
  html[data-look="wand"] #view > .wand-kopf{margin:-22px -16px 22px;padding:24px 16px 20px}
}

/* Fokus (R2): der Ring muss auf seinem Grund sichtbar sein. Auf Tinte Paper, auf Farbflächen die Textfarbe der Welt, auf
   Bildflächen (Bühnenfarbe hinter Bildern) deren Textfarbe, auf Paneelen das Fokusblau. Gleiches Gewicht (:where), die spätere Regel gewinnt: Paneel vor Bild vor
   Farbfläche vor Tinte. Der weiße Composer im Import-Einstieg (.entry-composer) zählt als Paneel (N2). Eigene Ringe behalten nur Labels mit verstecktem Eingabefeld (:has(input:focus-visible)) und Flächen, die das Fundament
   nicht kennt (Tinte-Leiste im Editor-Paneel, Bühne in Meine Projekte, pinke Einstiegsbühne im Konto). */
html[data-look="wand"] :focus-visible{outline:3px solid var(--paper);outline-offset:3px}
html[data-look="wand"] :where(.wand-kopf,.editor-head,.product-head,[data-welt]:not(#view,.editor,.product-page,.wand-werkseite)) :focus-visible{outline-color:var(--welt-text)}
html[data-look="wand"] :where(.wand-bild,.profil-werk-bild,.wand-werkkarte-buehne) :focus-visible{outline-color:var(--welt-buehne-text)}
html[data-look="wand"] :where(.card,.input-shell,.wand-paneel,dialog:not(.editor-sheet),.wand-werkseite,.entry-composer) :focus-visible{outline-color:var(--focus)}
/* Tags (app.css setzt ihren Ring mit höherem Gewicht blau): Ring in der Schriftfarbe des Etiketts, die zu seinem Grund passt. */
html[data-look="wand"] a.label.tag:focus-visible{outline-color:currentColor}

/* Mobiler Kopf in einer Zeile (Entwurf D): Marke links, „Menü“ rechts; die Navigation klappt darunter auf. */
html[data-look="wand"] .wand-menue{display:none}
@media (max-width:600px){
  html[data-look="wand"] .site-header{flex-wrap:nowrap;min-height:64px;padding-block:10px}
  html[data-look="wand"] .site-header .wand-menue{display:inline-flex;align-items:center;margin-left:auto;min-height:44px;padding:0 16px;border:2px solid var(--paper);border-radius:6px;background:transparent;color:var(--paper);font:700 15px/1 var(--body);cursor:pointer}
  html[data-look="wand"] .site-header .wand-menue[aria-expanded="true"]{background:var(--lime);border-color:var(--lime);color:var(--ink)}
  html[data-look="wand"] .site-header .app-nav{display:none}
  html[data-look="wand"] .site-header.menue-offen{flex-wrap:wrap}
  html[data-look="wand"] .site-header.menue-offen .app-nav{display:flex;flex-direction:column;align-items:stretch;flex-basis:100%;gap:0;margin:10px 0 4px;border-top:2px solid var(--paper)}
  /* B1: Konto und Abmelden sind volle Zeilen wie die übrigen; Abmelden steht als letzte. */
  html[data-look="wand"] .site-header.menue-offen .app-nav :is(a,.header-signout){justify-content:flex-start;min-height:52px;font-size:18px;font-weight:700;border-bottom:2px solid var(--paper);text-decoration:none}
  html[data-look="wand"] .site-header.menue-offen .app-nav a[aria-current=page]{color:var(--lime);border-bottom-color:var(--paper)}
  html[data-look="wand"] .site-header.menue-offen .app-nav a.account-link{position:static;max-width:none;line-height:1.2;display:flex;align-items:center}
  html[data-look="wand"] .site-header.menue-offen .app-nav .header-signout{display:flex;width:100%;text-align:left}
}

/* B1 (27.10.2026, Variante C): Konto als Minze-Block (Welt des Kontos), Abmelden als Paper-Kontur daneben. */
html[data-look="wand"] .site-header nav a.account-link{padding:0 16px;border:2px solid var(--mint);border-radius:6px;background:var(--mint);color:var(--ink);font-size:14px;font-weight:700;text-decoration:none}
html[data-look="wand"] .site-header nav a.account-link:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
html[data-look="wand"] .site-header nav a.account-link[aria-current=page]{color:var(--ink);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
html[data-look="wand"] .site-header nav .header-signout{margin-left:-16px;padding:0 16px;border:2px solid var(--paper);border-radius:6px;font-size:14px;font-weight:700;text-decoration:none}
html[data-look="wand"] .site-header nav .header-signout:hover{background:var(--paper);color:var(--ink)}
@media (max-width:600px){
  /* Mobil: jede Zeile ein Farbblock in der Welt ihrer Ansicht, Text je Fläche fest; Abmelden zuletzt als Tinte-Zeile. */
  html[data-look="wand"] .site-header.menue-offen .app-nav{gap:6px;border-top:0}
  html[data-look="wand"] .site-header.menue-offen .app-nav :is(a,.header-signout){padding:0 16px;border:0;border-radius:6px;color:var(--ink)}
  html[data-look="wand"] .site-header.menue-offen .app-nav a[data-nav=entdecken]{background:var(--pink);color:var(--ink)}
  html[data-look="wand"] .site-header.menue-offen .app-nav a[data-nav=produkte]{background:var(--lime);color:var(--ink)}
  html[data-look="wand"] .site-header.menue-offen .app-nav a[data-nav=kontakte]{background:var(--orange);color:var(--ink)}
  html[data-look="wand"] .site-header.menue-offen .app-nav a[data-nav=profil]{background:var(--violet);color:var(--paper)}
  html[data-look="wand"] .site-header.menue-offen .app-nav a[data-nav=konto]{background:var(--mint);color:var(--ink);text-decoration:none}
  html[data-look="wand"] .site-header.menue-offen .app-nav a[aria-current=page]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
  html[data-look="wand"] .site-header.menue-offen .app-nav .header-signout{margin:6px 0 0;background:var(--ink);color:var(--paper);border:2px solid var(--paper)}
}