/* inhalt-i18n.css — Hinweisbox „Nur auf Deutsch“ + Übersetzen-Formular (static/scripts/features/inhalt-i18n.js).
   Rezeptseite und Lexikon-Begriff, deutsch und Sprachseiten (/en|fr|es/…). Nur Tokens aus beealth-ui.css (hell/dunkel
   wechseln mit html.dark-mode), Formen nach docs/DESIGN-BEEALTH.md: Papier-Karte auf Wachs, Pille = drücken,
   Wabe = Status, Bea als ruhiger Begleiter. Kein Alarm-Look: keine Warnfarbe, kein Rot außer Fehlermeldungen. */

/* ── Hinweisbox ─────────────────────────────────────────────────────────── */
.ue-slot{margin:0 0 var(--sp-4)}
.ue-slot:empty{display:none}
.ue-box{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--sp-3) var(--sp-4);
  padding:var(--sp-4) var(--sp-7) var(--sp-4) var(--sp-4);background:var(--wax);border:1px solid var(--border);
  border-radius:var(--r-lg);color:var(--text);animation:ueEin var(--t-slow) var(--ease-bee) both}
.ue-box .fg-bee{--bee:56px;flex-shrink:0}
.ue-box-text{min-width:0;display:grid;gap:4px}
.ue-box-text .fg-kicker{margin:0}
.ue-box-text p{margin:0;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text-2)}
.ue-box-text strong{color:var(--text)}
.ue-box-tun{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:flex-end}
.ue-box-tun .fg-btn svg{width:18px;height:18px}
.ue-box-tun .fg-btn.sm{min-height:44px}
.ue-box-zu{position:absolute;top:6px;right:6px;width:36px;height:36px}
.ue-box-zu svg{width:16px;height:16px}
.ue-box.is-weg{animation:ueAus var(--t-med) var(--ease-soft) forwards}
@keyframes ueEin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes ueAus{to{opacity:0;transform:translateY(-6px)}}
@media(max-width:640px){
  .ue-box{grid-template-columns:auto 1fr;padding:var(--sp-4) var(--sp-6) var(--sp-4) var(--sp-3)}
  .ue-box .fg-bee{--bee:44px;align-self:start}
  .ue-box-tun{grid-column:1/-1;justify-content:stretch}
  .ue-box-tun .fg-btn{flex:1 1 auto}
  .ue-box-zu{width:44px;height:44px;top:2px;right:2px}
}

/* ── Formular (Sheet) ───────────────────────────────────────────────────── */
.fg-sheet-box.ue-sheet{max-width:960px;padding:14px 0 0;display:flex;flex-direction:column;overflow:hidden}
.ue-kopf{display:flex;align-items:flex-start;gap:var(--sp-3);padding:0 var(--sp-5) var(--sp-3)}
.ue-kopf>div{flex:1;min-width:0;display:grid;gap:4px}
.ue-kopf .fg-iconbtn{width:44px;height:44px;flex-shrink:0}
.ue-kopf h2{margin:0;font:800 var(--fs-xl)/var(--lh-tight) var(--font-display);color:var(--text);overflow-wrap:anywhere}
.ue-kopf .fg-kicker svg{width:14px;height:14px}
.ue-sprachen{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;padding:0 var(--sp-5) var(--sp-3);
  border-bottom:1px solid var(--border)}
.ue-sprachen .fg-tabs{flex:0 1 auto}
.ue-sprachen .fg-tab{display:inline-flex;align-items:center;gap:6px}
.ue-sprachen .fg-tab .ue-punkt{width:8px;aspect-ratio:1/1.1547;clip-path:var(--hex-clip);background:var(--border-strong)}
.ue-sprachen .fg-tab .ue-punkt.da{background:var(--mint-m)}
.ue-stand{font-size:12.5px;font-weight:700;color:var(--muted);margin:0}
.ue-rumpf{flex:1;overflow-y:auto;padding:var(--sp-4) var(--sp-5) var(--sp-5);display:grid;gap:var(--sp-5)}
.ue-tipp{display:flex;gap:var(--sp-3);align-items:center;margin:0;padding:var(--sp-3) var(--sp-4);background:var(--honey-l);
  border-radius:var(--r-md);color:var(--text-2);font-size:var(--fs-sm)}
.ue-tipp .fg-bee{--bee:36px;flex-shrink:0}
.ue-entwurf{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.ue-entwurf .fg-btn{min-height:44px}
.ue-feld{display:grid;gap:var(--sp-2)}
.ue-feld-kopf{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.ue-feld-kopf .fg-label{margin:0}
.ue-paar{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);align-items:stretch}
.ue-orig{margin:0;padding:10px 14px;background:var(--wax);border:1px solid transparent;border-radius:var(--r-md);
  color:var(--text-2);font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;overflow-y:auto}
.ue-orig .ue-de{display:block;font:800 10.5px/1.2 var(--font-body);letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--muted);margin-bottom:4px}
.ue-paar .fg-input,.ue-paar .fg-textarea{height:100%}
.ue-paar .fg-textarea{min-height:88px}
.ue-paar .fg-textarea.lang{min-height:220px}
.ue-schritte{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3);counter-reset:ue}
.ue-schritte>li{display:grid;grid-template-columns:28px 1fr;gap:var(--sp-2);align-items:start}
.ue-nr{display:grid;place-items:center;width:28px;aspect-ratio:1/1.1547;clip-path:var(--hex-clip);background:var(--honey-l);
  color:var(--honey-d);font:800 12px/1 var(--font-display);margin-top:8px}
.ue-veraltet{font-size:11.5px}
.ue-fehler{margin:0}
.ue-fuss{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;justify-content:flex-end;padding:var(--sp-3) var(--sp-5);
  border-top:1px solid var(--border);background:var(--surface)}
.ue-fuss .ue-status{flex:1 1 220px;margin:0;font-size:var(--fs-sm);font-weight:700;color:var(--muted);min-width:0}
.ue-fuss .ue-status.fehler{color:var(--red-d)}
.ue-fuss .fg-btn svg{width:18px;height:18px}
.ue-danke{display:grid;justify-items:center;text-align:center;gap:var(--sp-3);padding:var(--sp-6) var(--sp-5) var(--sp-7)}
.ue-danke .fg-bee{--bee:96px}
.ue-danke h2{margin:0;font:800 var(--fs-2xl)/var(--lh-tight) var(--font-display);color:var(--text)}
.ue-danke p{margin:0;max-width:44ch;color:var(--text-2)}
.ue-danke .fg-row{justify-content:center;margin-top:var(--sp-2)}
.ue-laden{display:grid;gap:var(--sp-3);padding:var(--sp-5)}
.ue-laden .fg-skel{height:44px;border-radius:var(--r-md)}
@media(max-width:720px){
  .fg-sheet-box.ue-sheet{max-height:94vh}
  .ue-kopf,.ue-sprachen,.ue-rumpf,.ue-fuss{padding-left:var(--sp-4);padding-right:var(--sp-4)}
  .ue-paar{grid-template-columns:1fr}
  .ue-orig{max-height:180px}
  .ue-sprachen .fg-tabs{width:100%}
  .ue-sprachen .fg-tab{flex:1 1 0}
  .ue-fuss .fg-btn{flex:1 1 auto}
  .ue-fuss .ue-status{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){.ue-box,.ue-box.is-weg{animation:none}}
html.reduce-motion .ue-box,html.reduce-motion .ue-box.is-weg{animation:none}