/* Hyperlizer App: vier Designs, per body[data-theme] umschaltbar (Mandant waehlt im Admin, ?theme= zur Vorschau).
   Alle Farben laufen ueber die Variablen aus app.css; hier werden nur die Werte je Design gesetzt. */

/* Basis-Polish fuer alle Designs */
body{background:var(--grund);color:var(--text)}
.kopf{padding:.9rem 1.2rem;gap:1rem;box-shadow:0 2px 12px rgba(0,0,0,.12)}
.kopf .logo{height:38px;width:auto;max-width:200px;display:block;border-radius:6px}
.kopf .marke{display:flex;align-items:center;gap:.6rem}
.intro h1{letter-spacing:-.01em}
.schritt{border-radius:var(--radius);box-shadow:var(--schatten);border:1px solid var(--linie)}
.folie{background:var(--flaeche-2,var(--flaeche));border-radius:10px}
.folie .bild{border-radius:8px}
.folie[aria-pressed="true"]{border-color:var(--akzent);box-shadow:0 0 0 2px var(--akzent) inset,0 6px 18px rgba(0,0,0,.12)}
.chip[aria-pressed="true"]{background:var(--akzent);border-color:var(--akzent);color:var(--akzent-text,#fff)}
.knopf{background:var(--akzent);color:var(--akzent-text,#fff);letter-spacing:.01em;box-shadow:0 6px 18px var(--akzent-schatten,rgba(0,0,0,.18))}
.knopf:hover:not([disabled]){background:var(--akzent-hover,var(--navy-2));filter:brightness(1.05)}
.knopf-leise{background:var(--flaeche);color:var(--text);border-color:var(--linie)}
.knopf-leise:hover{border-color:var(--akzent);color:var(--akzent-ink,var(--text))}
.leiste{background:var(--leiste,rgba(255,255,255,.96));border-top:1px solid var(--linie)}
.gewaehlt img{border-color:var(--akzent)}
.nr{background:var(--akzent);color:var(--akzent-text,#fff)}
.balken-fuellung{background:linear-gradient(90deg,var(--akzent),var(--akzent-hover,var(--akzent)))}
.filter input,.filter select,.code-feld input,.teilen-zeile input{background:var(--eingabe,#fff);color:var(--text);border-color:var(--linie)}
.filter input:focus,.filter select:focus{outline-color:var(--akzent)}
.ergebnis-innen{background:var(--flaeche);color:var(--text)}
.schliessen{background:var(--flaeche);color:var(--text)}
.teilen-box,.video-box{background:var(--flaeche-2,#f8f9fa);border-color:var(--linie)}
.ablage{border-color:var(--linie)}
.ablage:hover,.ablage.aktiv{border-color:var(--akzent);background:var(--flaeche-2,#f2f6fc)}
.zustimmung input{accent-color:var(--akzent)}
.fuss,.fuss a,.klein,.treffer,.gewaehlt span,.badge,.badge a{color:var(--text-2)}
.folie .meta{color:var(--text-2)}
.hinweis{border-top-color:var(--linie);color:var(--text-2)}

/* 1) KLAR: hell, sachlich (Standard) */
body[data-theme="klar"]{
  --grund:#f5f6f8; --flaeche:#ffffff; --flaeche-2:#f2f4f7; --linie:#dfe2e5; --text:#1f2937; --text-2:#5b6472;
  --akzent:#1f2947; --akzent-hover:#2a5298; --akzent-text:#fff; --akzent-ink:#1f2947; --leiste:rgba(255,255,255,.96); --eingabe:#fff;
}
/* 2) STUDIO: dunkel, edel, fuer Folierer und Showrooms */
body[data-theme="studio"]{
  --grund:#0f1218; --flaeche:#181c24; --flaeche-2:#20252f; --linie:#2c3340; --text:#eef1f5; --text-2:#9aa3b0;
  --akzent:#f5b400; --akzent-hover:#ffc933; --akzent-text:#14171d; --akzent-ink:#f5b400; --leiste:rgba(18,21,28,.96); --eingabe:#12151b;
  --schatten:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); --akzent-schatten:rgba(245,180,0,.25);
}
/* Browser-Elemente (Scrollbalken, Formularfelder) im iframe ebenfalls dunkel zeichnen */
html:has(body[data-theme="studio"]){color-scheme:dark}
body[data-theme="studio"] .kopf{background:#0b0e13;border-bottom:1px solid #2c3340}
body[data-theme="studio"] .fehler{background:#2a1416;border-color:#7f1d1d;color:#fca5a5}
body[data-theme="studio"] .vergleich{background:#000}
/* 3) WERKSTATT: warm, industriell, kraeftiger Orange-Akzent */
body[data-theme="werkstatt"]{
  --grund:#f4efe8; --flaeche:#fffdf9; --flaeche-2:#f7f1e8; --linie:#e2d8ca; --text:#2a221b; --text-2:#6e6256;
  --akzent:#e2571b; --akzent-hover:#f06a2e; --akzent-text:#fff; --akzent-ink:#b8420f; --leiste:rgba(255,253,249,.97); --eingabe:#fff;
  --schatten:0 1px 2px rgba(60,40,20,.08),0 8px 24px rgba(60,40,20,.10); --akzent-schatten:rgba(226,87,27,.25);
}
body[data-theme="werkstatt"] .kopf{background:#2a221b}
/* 4) MINIMAL: weiss, schwarz, viel Luft */
body[data-theme="minimal"]{
  --grund:#ffffff; --flaeche:#ffffff; --flaeche-2:#f6f6f6; --linie:#e6e6e6; --text:#111111; --text-2:#6b6b6b;
  --akzent:#111111; --akzent-hover:#333333; --akzent-text:#fff; --akzent-ink:#111; --leiste:rgba(255,255,255,.98); --eingabe:#fff;
  --schatten:none; --akzent-schatten:rgba(0,0,0,.12); --radius:6px;
}
body[data-theme="minimal"] .kopf{background:#111}
body[data-theme="minimal"] .schritt{box-shadow:none}
body[data-theme="minimal"] .folie{border-radius:4px}
body[data-theme="minimal"] .folie .bild{border-radius:3px}

/* Kopfzeile: mit Logo verschwindet der Textname, auf schmalen Schirmen auch der Untertitel */
.kopf .marke .logo:not([hidden]) + #marke-name{position:absolute;left:-9999px}
@media(max-width:520px){.kopf-titel{display:none}.kopf .logo{max-width:180px}}
.hinweis-unten a{color:var(--akzent-ink,var(--text))}