/* =====================================================================
   HEUREKA STIL · Bausteine                               Version 1.0
   Benötigt heureka-tokens.css (vorher einbinden).
   Alle Klassen beginnen mit  hs-  (Heureka Stil) – keine Überschneidung
   mit der Landingpage (hk-…) oder altem OS-CSS.
   ===================================================================== */

/* Alle Bausteine rechnen Rand und Innenabstand in die Breite ein */
[class^="hs-"],[class*=" hs-"],[class^="hs-"]::before,[class*=" hs-"]::before,[class^="hs-"]::after,[class*=" hs-"]::after{box-sizing:border-box}

/* ---------- Texte ---------- */
.hs-h1,.hs-h2,.hs-h3{font-family:var(--hk-font);font-weight:var(--hk-fw-bold);line-height:var(--hk-lh-title);color:var(--hk-ink);margin:0 0 var(--hk-sp-3);letter-spacing:-.01em}
.hs-h1{font-size:var(--hk-fs-3xl)}
.hs-h2{font-size:var(--hk-fs-2xl)}
.hs-h3{font-size:var(--hk-fs-xl)}
.hs-eyebrow{display:block;font-size:var(--hk-fs-xs);font-weight:var(--hk-fw-bold);letter-spacing:var(--hk-ls-eyebrow);text-transform:uppercase;color:var(--hk-gold-text);margin:0 0 var(--hk-sp-2)}
.hs-lead{font-size:var(--hk-fs-lg);color:var(--hk-ink-2);max-width:var(--hk-max-text)}
.hs-muted{color:var(--hk-ink-2)}
.hs-hint{font-size:var(--hk-fs-sm);color:var(--hk-ink-3)}
.hs-hand{font-family:var(--hk-font-hand);font-weight:400;transform:rotate(-8deg);display:inline-block}

/* ---------- Knöpfe ---------- */
.hs-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--hk-sp-2);min-height:44px;padding:0 var(--hk-sp-5);border:1px solid transparent;border-radius:var(--hk-r-pill);
  font:var(--hk-fw-bold) var(--hk-fs-md)/1 var(--hk-font);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform var(--hk-dur-fast) var(--hk-ease),filter var(--hk-dur-fast),background var(--hk-dur-fast)}
.hs-btn:hover{transform:translateY(-1px)}
.hs-btn:active{transform:none}
.hs-btn svg{width:18px;height:18px;flex:none}
.hs-btn--gold{background:linear-gradient(180deg,var(--hk-gold-hell),var(--hk-gold));color:var(--hk-gold-ink)}
.hs-btn--gold:hover{filter:brightness(1.05)}
.hs-btn--blau{background:var(--hk-blau);color:var(--hk-blau-ink)}
.hs-btn--blau:hover{filter:brightness(1.1)}
.hs-btn--rahmen{background:transparent;color:var(--hk-ink);border-color:var(--hk-line-strong)}
.hs-btn--rahmen:hover{background:var(--hk-surface-2)}
.hs-btn--leise{background:transparent;color:var(--hk-link);padding:0 var(--hk-sp-3)}
.hs-btn--leise:hover{background:var(--hk-blau-soft)}
.hs-btn--gefahr{background:var(--hk-fehler);color:#fff}
.hs-btn--klein{min-height:36px;padding:0 var(--hk-sp-4);font-size:var(--hk-fs-sm)}
.hs-btn--rund{width:44px;padding:0}
.hs-btn[disabled],.hs-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;filter:none}

/* ---------- Karten ---------- */
.hs-card{background:var(--hk-surface);color:var(--hk-ink);border:1px solid var(--hk-line);border-radius:var(--hk-r-lg);box-shadow:var(--hk-shadow);padding:var(--hk-sp-5)}
.hs-card--flach{box-shadow:none}
.hs-card--klick{cursor:pointer;transition:transform var(--hk-dur) var(--hk-ease),box-shadow var(--hk-dur)}
.hs-card--klick:hover{transform:translateY(-2px);box-shadow:var(--hk-shadow-lg)}
.hs-card__kopf{display:flex;align-items:center;gap:var(--hk-sp-3);margin-bottom:var(--hk-sp-3)}
.hs-icon{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--hk-r-md);background:var(--hk-gold-soft);color:var(--hk-gold-text);flex:none}
.hs-icon svg{width:22px;height:22px}

/* ---------- Bühne (dunkle Fläche wie im Landing-Hero) ---------- */
.hs-buehne{background:var(--hk-dunkel);color:var(--hk-ink-invers)}
.hs-buehne .hs-h1,.hs-buehne .hs-h2,.hs-buehne .hs-h3{color:var(--hk-ink-invers)}
.hs-buehne .hs-eyebrow{color:var(--hk-gold)}

/* ---------- Formulare ---------- */
.hs-field{display:block;margin-bottom:var(--hk-sp-4)}
.hs-label{display:block;font-size:var(--hk-fs-sm);font-weight:var(--hk-fw-semi);color:var(--hk-ink);margin-bottom:var(--hk-sp-2)}
.hs-input,.hs-select,.hs-textarea{width:100%;min-height:46px;padding:var(--hk-sp-3) var(--hk-sp-4);font:var(--hk-fs-md)/1.4 var(--hk-font);color:var(--hk-ink);
  background:var(--hk-surface);border:1px solid var(--hk-line-strong);border-radius:var(--hk-r-md);transition:border-color var(--hk-dur-fast),box-shadow var(--hk-dur-fast)}
.hs-textarea{min-height:110px;resize:vertical}
.hs-input::placeholder,.hs-textarea::placeholder{color:var(--hk-ink-3)}
.hs-input:focus,.hs-select:focus,.hs-textarea:focus{outline:none;border-color:var(--hk-gold);box-shadow:var(--hk-focus)}
.hs-input[aria-invalid="true"]{border-color:var(--hk-fehler)}
.hs-field__fehler{display:block;font-size:var(--hk-fs-sm);color:var(--hk-fehler);margin-top:var(--hk-sp-1)}
.hs-check{display:flex;align-items:center;gap:var(--hk-sp-2);font-size:var(--hk-fs-md);cursor:pointer}
.hs-check input{width:20px;height:20px;accent-color:var(--hk-gold)}

/* Gesprächsleiste (Eingabe an Penelope) */
.hs-dialog-bar{display:flex;align-items:center;gap:var(--hk-sp-2);background:var(--hk-surface);border:1px solid var(--hk-line);border-radius:var(--hk-r-pill);padding:6px;box-shadow:var(--hk-shadow)}
.hs-dialog-bar input{flex:1;min-width:0;border:0;background:transparent;font:var(--hk-fs-md) var(--hk-font);color:var(--hk-ink);padding:var(--hk-sp-2) var(--hk-sp-3)}
.hs-dialog-bar input:focus{outline:none}
.hs-dialog-bar:focus-within{box-shadow:var(--hk-focus),var(--hk-shadow)}
.hs-mic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;background:var(--hk-surface-2);color:var(--hk-penelope)}
.hs-mic[aria-pressed="true"],.hs-mic.is-aktiv{background:var(--hk-penelope);color:#fff;animation:hs-puls 1.4s infinite}
.hs-senden{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;background:var(--hk-gold);color:var(--hk-gold-ink)}
.hs-mic svg,.hs-senden svg{width:22px;height:22px}
@keyframes hs-puls{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--hk-penelope) 50%,transparent)}100%{box-shadow:0 0 0 14px transparent}}

/* ---------- Chips & Abzeichen ---------- */
.hs-chip{display:inline-flex;align-items:center;gap:var(--hk-sp-2);min-height:32px;padding:0 var(--hk-sp-3);border-radius:var(--hk-r-pill);
  background:var(--hk-surface-2);color:var(--hk-ink);border:1px solid var(--hk-line);font-size:var(--hk-fs-sm);font-weight:var(--hk-fw-semi);text-decoration:none}
a.hs-chip:hover,button.hs-chip:hover{border-color:var(--hk-line-strong)}
.hs-chip.is-aktiv{background:var(--hk-ink);color:var(--hk-bg);border-color:var(--hk-ink)}
.hs-chip b{color:var(--hk-gold-text)}
.hs-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:var(--hk-r-pill);font-size:var(--hk-fs-xs);font-weight:var(--hk-fw-bold);letter-spacing:.02em}
.hs-badge--ok{background:var(--hk-ok-soft);color:var(--hk-ok)}
.hs-badge--warn{background:var(--hk-warn-soft);color:var(--hk-warn)}
.hs-badge--fehler{background:var(--hk-fehler-soft);color:var(--hk-fehler)}
.hs-badge--info{background:var(--hk-info-soft);color:var(--hk-info)}
.hs-badge--gold{background:var(--hk-gold-soft);color:var(--hk-gold-text)}

/* ---------- Hinweise ---------- */
.hs-alert{display:flex;gap:var(--hk-sp-3);align-items:flex-start;padding:var(--hk-sp-4);border-radius:var(--hk-r-md);border-left:4px solid;font-size:var(--hk-fs-md)}
.hs-alert--info{background:var(--hk-info-soft);border-color:var(--hk-info)}
.hs-alert--ok{background:var(--hk-ok-soft);border-color:var(--hk-ok)}
.hs-alert--warn{background:var(--hk-warn-soft);border-color:var(--hk-warn)}
.hs-alert--fehler{background:var(--hk-fehler-soft);border-color:var(--hk-fehler)}
.hs-alert strong{display:block;margin-bottom:2px}

/* ---------- Penelope ---------- */
.hs-penelope{display:flex;gap:var(--hk-sp-3);align-items:flex-start}
.hs-penelope__bild{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 3px var(--hk-penelope-soft)}
.hs-bubble{background:var(--hk-surface);border:1px solid var(--hk-line);border-radius:var(--hk-r-lg) var(--hk-r-lg) var(--hk-r-lg) var(--hk-r-sm);padding:var(--hk-sp-3) var(--hk-sp-4);box-shadow:var(--hk-shadow-sm);max-width:560px}
.hs-bubble__name{display:block;font-size:var(--hk-fs-xs);font-weight:var(--hk-fw-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--hk-penelope);margin-bottom:2px}
.hs-bubble--du{margin-left:auto;background:var(--hk-blau-soft);border-color:transparent;border-radius:var(--hk-r-lg) var(--hk-r-lg) var(--hk-r-sm) var(--hk-r-lg)}

/* ---------- Reiter ---------- */
.hs-tabs{display:flex;gap:var(--hk-sp-1);flex-wrap:wrap;padding:4px;background:var(--hk-surface-2);border-radius:var(--hk-r-pill);width:max-content;max-width:100%}
.hs-tab{border:0;background:transparent;color:var(--hk-ink-2);font:var(--hk-fw-semi) var(--hk-fs-sm) var(--hk-font);padding:8px 16px;border-radius:var(--hk-r-pill);cursor:pointer}
.hs-tab:hover{color:var(--hk-ink)}
.hs-tab[aria-selected="true"],.hs-tab.is-aktiv{background:var(--hk-surface);color:var(--hk-ink);box-shadow:var(--hk-shadow-sm)}

/* ---------- Fenster (Modal) ---------- */
.hs-overlay{position:fixed;inset:0;z-index:var(--hk-z-fenster);background:var(--hk-overlay);display:flex;align-items:center;justify-content:center;padding:var(--hk-sp-4)}
.hs-modal{position:relative;background:var(--hk-bg);color:var(--hk-ink);border-radius:var(--hk-r-xl);box-shadow:var(--hk-shadow-lg);width:min(640px,100%);max-height:90vh;overflow:auto;padding:var(--hk-sp-6)}
.hs-modal__x{position:absolute;top:var(--hk-sp-4);right:var(--hk-sp-4)}

/* ---------- Kennzahlen ---------- */
.hs-stat{background:var(--hk-surface);border:1px solid var(--hk-line);border-radius:var(--hk-r-lg);padding:var(--hk-sp-3) var(--hk-sp-4);text-align:center;min-width:96px}
.hs-stat b{display:block;font-size:var(--hk-fs-2xl);font-weight:var(--hk-fw-bold);line-height:1.1}
.hs-stat span{font-size:var(--hk-fs-xs);font-weight:var(--hk-fw-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--hk-ink-2)}

/* ---------- Hell/Dunkel-Umschalter ---------- */
.hs-theme{display:inline-flex;gap:2px;padding:3px;border-radius:var(--hk-r-pill);background:var(--hk-surface-2);border:1px solid var(--hk-line)}
.hs-theme button{width:34px;height:30px;border:0;border-radius:var(--hk-r-pill);background:transparent;color:var(--hk-ink-2);cursor:pointer;display:grid;place-items:center}
.hs-theme button svg{width:16px;height:16px}
.hs-theme button[aria-pressed="true"]{background:var(--hk-surface);color:var(--hk-gold-text);box-shadow:var(--hk-shadow-sm)}

/* ---------- Tabelle ---------- */
.hs-table{width:100%;border-collapse:collapse;font-size:var(--hk-fs-sm)}
.hs-table th{text-align:left;font-size:var(--hk-fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--hk-ink-2);font-weight:var(--hk-fw-bold);padding:var(--hk-sp-2) var(--hk-sp-3);border-bottom:1px solid var(--hk-line-strong)}
.hs-table td{padding:var(--hk-sp-3);border-bottom:1px solid var(--hk-line)}
.hs-table tr:hover td{background:var(--hk-surface-2)}

/* ---------- Schweben: leichtes, lebendiges Schwanken ---------- */
/* Für Elemente, die „im Raum stehen“: Häuser, Türen, Steine, schwebende Karten.
   Jedes Element bekommt einen eigenen Takt über --d (Dauer) und --v (Verzögerung, negativ = mitten im Takt starten),
   z. B. style="--d:7.5s;--v:-1s". Beim Überfahren hält es an. Nicht für Text, Formulare oder Listen verwenden. */
@keyframes hsSchweben{0%,100%{translate:0 0;rotate:0deg}25%{translate:1px -3px;rotate:.5deg}50%{translate:0 -6px;rotate:0deg}75%{translate:-1px -3px;rotate:-.5deg}}
@keyframes hsSchwebenLeise{0%,100%{translate:0 0;rotate:0deg}30%{translate:0 -3px;rotate:.35deg}70%{translate:0 -2px;rotate:-.35deg}}
.hs-schweben{animation:hsSchweben var(--d,7s) ease-in-out var(--v,0s) infinite}
.hs-schweben--leise{animation:hsSchwebenLeise var(--d,8s) ease-in-out var(--v,0s) infinite}
.hs-schweben:hover,.hs-schweben:focus-visible,.hs-schweben--leise:hover,.hs-schweben--leise:focus-visible{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.hs-schweben,.hs-schweben--leise{animation:none}}