/* ─────────────────────────────────────────────────────────────────────────
   omaneo — Komponenten-Klassen
   Quelle der Wahrheit: 00 Kontext/Webseiten-CI.md §1.1, §5-7
   Festgeschrieben 2026-05-25, Migration Phase C 2026-05-25.

   Nutzung:
   - Diese Klassen sind die EINZIG erlaubten Stilträger für die definierten
     Rollen (Schrift, Buttons, Form-Elemente, Card/Modal/Edit-Form).
   - Inline-Style für Geometrie/Schrift = Verstoß. Stattdessen Klasse setzen.
   - Neue Variante? Erst Webseiten-CI.md erweitern, dann hier.
   ───────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────
   §1.1 Typografie-Hierarchie — 13 Rollen
   ────────────────────────────────────────────────────────── */

.t-h1        { font-family:var(--font-head); font-size:clamp(2rem,3.5vw,3rem);   font-weight:400; line-height:1.18; color:var(--text); }
.t-h1-page   { font-family:var(--font-head); font-size:clamp(1.6rem,2.5vw,2.4rem); font-weight:400; line-height:1.2;  color:var(--text); }
.t-h2        { font-family:var(--font-head); font-size:clamp(1.6rem,2.5vw,2.2rem); font-weight:400; line-height:1.2;  color:var(--text); }
.t-h3        { font-family:var(--font-head); font-size:28px;                       font-weight:400; line-height:1.25; color:var(--text); }
.t-h3-card   { font-family:var(--font-head); font-size:16px;                       font-weight:400; line-height:1.3;  color:var(--text); }
.t-price     { font-family:var(--font-head); font-size:28px;                       font-weight:400; color:var(--text); }
.t-price-sm  { font-family:var(--font-head); font-size:18px;                       font-weight:400; color:var(--text); }
.t-body-muted{ font-family:var(--font);      font-size:14px;                       font-weight:400; color:var(--muted); }
.t-subtitle  { font-family:var(--font);      font-size:14px;                       font-weight:400; font-style:italic; color:var(--muted); }
.t-subtitle::placeholder { font-style:italic; color:var(--subtle); }
.t-eyebrow   { font-family:var(--font);      font-size:11px;                       font-weight:600; letter-spacing:var(--ls-wider); text-transform:uppercase; color:var(--accent); }
.t-label     { font-family:var(--font);      font-size:12px;                       font-weight:500; color:var(--text); }
.t-meta      { font-family:var(--font);      font-size:11px;                       font-weight:500; letter-spacing:var(--ls-wide); color:var(--muted); }
.t-mono      { font-family:var(--font-mono); font-size:12px;                       font-weight:500; color:var(--text); }

/* Inline-Input-Varianten für Edit-Form.
   Konsistenz-Regel (Dieter 2026-05-25 spät): alle Text-Eingabefelder im
   Edit-Form bekommen den SELBEN Rahmen (Box-Border 1px, 4px Radius, gleiches
   Padding-Verhalten). Nur die Schrift variiert. Keine underline-only / pill /
   bare Sonderstile mehr — der Mix war das Problem. */
/* Einheitliche Input-Geometrie für alle Edit-Form-Felder (Dieter 2026-05-25 spät:
   „was soll dieser mix aus formen größen stilen"). Padding 11px 14px = exakt
   die globale `.form-group input`-Höhe, damit alle Felder einer Reihe gleich
   hoch sind. */
input.t-name-input {
  font-family:var(--font-head); font-size:24px; font-weight:400;
  padding:11px 14px; background:#fff; color:var(--text);
  border:1px solid var(--border); border-radius:var(--r-sm);
  width:100%; transition:border-color .2s;
}
input.t-name-input:focus { outline:none; border-color:var(--accent); }

input.t-price-input {
  font-family:var(--font-head); font-size:22px; font-weight:400;
  padding:11px 14px; background:#fff; color:var(--text);
  border:1px solid var(--border); border-radius:var(--r-sm);
  width:100%; transition:border-color .2s;
}
input.t-price-input:focus { outline:none; border-color:var(--accent); }

/* ──────────────────────────────────────────────────────────
   §5 Buttons — 4 Varianten + Größen
   ────────────────────────────────────────────────────────── */

/* Reset-Basis. Geometrie kommt aus der Variante. */
.btn {
  display:inline-flex; align-items:center; gap:var(--space-2);
  border:none; background:none; cursor:pointer;
  font-family:var(--font); white-space:nowrap;
  transition:background .2s, color .2s, border-color .2s, transform .15s;
  text-decoration:none;
}

/* §5.1 .btn-primary */
.btn-primary {
  background:var(--text); color:#fff;
  padding:13px 28px; border-radius:var(--r-sm);
  font-size:12px; font-weight:600;
  letter-spacing:var(--ls-wide); text-transform:uppercase;
}
.btn-primary:hover { background:#333; color:#fff; }

/* §5.2 .btn-accent */
.btn-accent {
  background:var(--accent); color:#fff;
  padding:13px 28px; border-radius:var(--r-sm);
  font-size:12px; font-weight:600;
  letter-spacing:var(--ls-wide); text-transform:uppercase;
}
.btn-accent:hover { background:var(--accent-h); color:#fff; }

/* §5.3 .btn-outline */
.btn-outline {
  background:transparent; color:var(--text);
  border:1px solid var(--border);
  padding:13px 28px; border-radius:var(--r-sm);
  font-size:12px; font-weight:600;
  letter-spacing:var(--ls-wide); text-transform:uppercase;
}
.btn-outline:hover { border-color:var(--text); color:var(--text); }

/* §5.4 .btn-icon (rund, nur Icon) — Basis 38×38 */
.btn-icon {
  width:38px; height:38px; padding:0;
  border-radius:var(--r-circle);
  background:#fff; color:var(--accent);
  border:1.5px solid var(--accent);
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.btn-icon:hover { background:var(--accent); color:#fff; transform:scale(1.08); }
.btn-icon:active { transform:scale(0.95); }
.btn-icon svg { width:18px; height:18px; stroke:currentColor; }

/* Größen-Varianten */
.btn-icon-sm { width:34px; height:34px; }
.btn-icon-sm svg { width:16px; height:16px; }
.btn-icon-md { width:38px; height:38px; }
.btn-icon-md svg { width:18px; height:18px; }
.btn-icon-lg { width:44px; height:44px; }
.btn-icon-lg svg { width:20px; height:20px; }

/* Roter Status-Variant */
.btn-icon.is-danger {
  color:var(--danger); border-color:var(--danger);
}
.btn-icon.is-danger:hover { background:var(--danger); color:#fff; }

/* Ghost-Variante — Nav-Icons, ohne Border, soft hover */
.btn-icon-ghost {
  width:40px; height:40px; padding:0;
  border-radius:var(--r-sm); border:none;
  background:none; color:var(--text);
  display:inline-flex; align-items:center; justify-content:center;
  position:relative; flex-shrink:0;
  transition:background .2s, color .2s;
}
.btn-icon-ghost:hover { background:var(--surface); color:var(--accent); }
.btn-icon-ghost svg { width:20px; height:20px; stroke:currentColor; }

/* ──────────────────────────────────────────────────────────
   §6 Form-Elemente
   ────────────────────────────────────────────────────────── */

.t-input {
  padding:var(--space-3); border:1px solid var(--border);
  border-radius:var(--r-sm); background:#fff;
  font:14px var(--font); color:var(--text);
  width:100%; transition:border-color .2s;
}
.t-input:focus { outline:none; border-color:var(--accent); }
.t-input.is-error { border-color:var(--danger); }

.t-textarea {
  padding:var(--space-3); border:1px solid var(--border);
  border-radius:var(--r-sm); background:#fff;
  font:14px var(--font); color:var(--text);
  width:100%; resize:vertical; min-height:90px;
  transition:border-color .2s;
}
.t-textarea:focus { outline:none; border-color:var(--accent); }

/* §6.3 Select — gleicher Box-Look wie Inputs. Nativer Browser-Pfeil wird per
   `appearance:none` entfernt, ersetzt durch ein einheitliches Custom-Chevron
   (SVG als background-image). Dadurch wirkt der Select EXAKT wie ein Text-Input
   nebenan — nur der dezente Chevron rechts signalisiert „klickbar als Dropdown". */
select.t-select {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding:11px 36px 11px 14px;
  border:1px solid var(--border); border-radius:var(--r-sm);
  background-color:#fff;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6560' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center;
  font-family:var(--font); font-size:14px;
  color:var(--text);
  width:100%; transition:border-color .2s;
}
select.t-select:focus { outline:none; border-color:var(--accent); }
select.t-select::-ms-expand { display:none; }

/* WYSIWYG-Textareas — gleiche Schrift-Sprache wie Detail-Modal-Output.
   Edit-Field sieht aus wie der späteren Output, kein Stil-Bruch beim Speichern.
   Bezug zu §7.2-Output-Stilen (.pf-detail-short, .pf-detail-desc). */
textarea.wysiwyg-short {
  font:500 15px/1.65 var(--font);
  color:var(--text);
  padding:var(--space-3); border:1px solid var(--border);
  border-radius:var(--r-sm); background:#fff;
  width:100%; resize:vertical; min-height:90px;
  transition:border-color .2s;
}
textarea.wysiwyg-short:focus { outline:none; border-color:var(--accent); }
textarea.wysiwyg-short::placeholder { font-weight:400; color:var(--subtle); }

textarea.wysiwyg-desc {
  font:400 14px/1.7 var(--font);
  color:var(--text);
  padding:var(--space-3); border:1px solid var(--border);
  border-radius:var(--r-sm); background:#fff;
  width:100%; resize:vertical; min-height:140px;
  transition:border-color .2s;
}
textarea.wysiwyg-desc:focus { outline:none; border-color:var(--accent); }
textarea.wysiwyg-desc::placeholder { color:var(--subtle); }

/* §6.2 Subtitle-Input: kursiv (Output-Stil), aber SELBER Rahmen wie alle anderen
   Text-Felder. Konsistenz vor WYSIWYG — beim Tippen soll klar sein, dass es ein
   Eingabefeld ist (Dieter 2026-05-25 spät). */
input.wysiwyg-subtitle {
  font-family:var(--font); font-size:14px; font-style:italic;
  color:var(--text);
  padding:11px 14px; background:#fff;
  border:1px solid var(--border); border-radius:var(--r-sm);
  width:100%; transition:border-color .2s;
}
input.wysiwyg-subtitle:focus { outline:none; border-color:var(--accent); }
input.wysiwyg-subtitle::placeholder { font-style:italic; color:var(--subtle); }

/* §6.5 Pille — toggleable Status-Marker */
.t-pill {
  width:38px; height:38px; border-radius:var(--r-circle);
  border:1px solid var(--border); background:#fff;
  color:var(--muted);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0;
  transition:background .2s, color .2s, border-color .2s;
}
.t-pill:hover { border-color:var(--accent); color:var(--accent); }
.t-pill.on, .t-pill[aria-pressed="true"] {
  background:var(--accent); color:#fff; border-color:var(--accent);
}
.t-pill svg { width:18px; height:18px; stroke:currentColor; }

/* §6.6 Badge-Input — gleicher Rahmen wie der Kategorie-Select daneben.
   Kein pill-shape mehr (Konsistenz vor Dekoration). */
input.t-pill-input {
  text-align:left;
  padding:11px 14px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  font-family:var(--font); font-size:14px;
  color:var(--text); background:#fff;
  width:100%;
  transition:border-color .2s;
}
input.t-pill-input:focus { outline:none; border-color:var(--accent); }

/* ──────────────────────────────────────────────────────────
   §7 Komponenten
   ────────────────────────────────────────────────────────── */

/* §7.3 Sidebar-Box (Edit-Form rechte Spalte)
   - Jeweils ein eigenständiger Box-Block mit dem Surface/Border/Radius-Look.
   - Interne Anordnung übernimmt der jeweilige Block (Grid/Flex/Block).
   - Größen-Varianten: .sidebar-box-sm (kompakter, für Medien/YouTube) */
.sidebar-box {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:var(--space-5);
}
.sidebar-box-sm {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:var(--space-4) 18px;
}
.sidebar-box h4, .sidebar-box-sm h4 {
  font-family:var(--font); font-size:11px; font-weight:600;
  letter-spacing:var(--ls-wider); text-transform:uppercase;
  color:var(--muted); margin:0 0 var(--space-2) 0;
}

/* Tag-Pillen (klein, im Card/Modal — read-only) */
.tag-pill {
  display:inline-flex; align-items:center;
  padding:3px 10px; border-radius:var(--r-pill);
  background:var(--accent-dim); color:var(--accent);
  font-size:11px; font-weight:500; letter-spacing:var(--ls-tight);
}

/* Action-Row (Card + Modal CTA-Reihe) — bis zu 3 .btn-icon */
.action-row {
  display:flex; align-items:center; gap:var(--space-2);
}

/* Form-Stack — komprimierte Vertikalliste von Textareas/Inputs ohne Box drumherum.
   CI §7.3: Labels werden via Placeholder gezeigt, Reihenfolge erklärt die Fußnote.
   Kleinerer Absatz-Abstand zwischen Feldern. */
.form-stack {
  display:flex; flex-direction:column; gap:var(--space-3); /* 12px */
}
.form-stack .form-group { gap:0; }

/* ──────────────────────────────────────────────────────────
   §7.0 Produktkarte — EINE Quelle, EIN Look
   Dieter-Briefing 2026-05-25 sehr spät: Eyebrow=HERSTELLER·ART-NR, Name,
   Desc, Kategorie↔Preis (eine Zeile justify-between), Action-Row drunter.
   ────────────────────────────────────────────────────────── */
.product-card .product-body {
  padding:16px 20px 16px; gap:4px;  /* kompakter — kein 8px gap mehr */
}
.product-card .product-meta {
  font-family:var(--font); font-size:11px; font-weight:600;
  letter-spacing:var(--ls-wider); text-transform:uppercase;
  color:var(--accent);
  margin-bottom:2px;
}
.product-card .product-meta-artnr {
  /* Wird im Eyebrow nicht mehr verwendet — Art-Nr ist jetzt im Footer-Slot
     (.product-artnr). Klasse bleibt für eventuelle Wiederverwendung. */
  font-family:var(--font-mono); font-weight:500;
  color:var(--muted); letter-spacing:0;
  text-transform:none;
}
.product-card .product-meta-cat {
  /* Kategorie als zweiter Teil des Eyebrows (nach „HERSTELLER · "). */
  letter-spacing:var(--ls-wider);
}
.product-card .product-desc {
  font-size:13px; color:var(--muted); line-height:1.5;
  margin:2px 0 6px;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-card .product-restock {
  font-size:12px; color:var(--danger); font-style:italic;
  margin:4px 0;
}
.product-card .product-footer {
  border-top:none; padding-top:6px;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin-top:auto;
}
.product-card .product-category {
  font-size:11px; font-weight:500;
  letter-spacing:var(--ls-wide); text-transform:uppercase;
  color:var(--muted);
}
.product-card .product-artnr {
  /* Art-Nr im Footer links neben Preis. Mono-Schrift wie Edit-Form-Header. */
  font-family:var(--font-mono); font-size:12px; font-weight:500;
  color:var(--muted);
}
.product-card .product-price {
  font-family:var(--font-head); font-size:18px; font-weight:400;
  color:var(--text); text-align:right;
}
.product-card .product-price-old {
  font-size:12px; color:var(--subtle); text-decoration:line-through; margin-right:6px;
}
.product-card .product-price-now {
  color:var(--danger);
}
.product-card .product-actions {
  margin-top:10px; gap:8px;
}

/* Badges-Stack (oben links auf der Card) */
.product-card .product-badges {
  position:absolute; top:8px; left:8px;
  display:flex; flex-direction:column; gap:4px; z-index:2; align-items:flex-start;
}
.product-card .product-badges .product-badge {
  position:static; background:var(--text); color:#fff;
  font-size:9px; font-weight:700; letter-spacing:1px;
  padding:4px 10px; border-radius:2px; text-transform:uppercase;
}
.product-card .product-badges .product-badge-offer { background:var(--danger); }
.product-card .product-badges .product-badge-used  { background:#555; }

/* Sold-out-Banner — Schrägband mittig auf dem Bild */
.product-card .product-soldout-banner {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(-12deg);
  background:rgba(122,76,76,.92); color:#fff;
  padding:6px 22px; font-weight:700; text-transform:uppercase;
  letter-spacing:2px; font-size:13px;
  border:2px solid #fff; white-space:nowrap;
  pointer-events:none; box-shadow:0 2px 10px rgba(0,0,0,.25); z-index:5;
}

/* Image-Helper-Klassen (ersetzen Inline-Styles) */
.product-card .product-img { width:100%; height:100%; object-fit:contain; transition:transform .3s; }
.product-card .product-img-fallback { width:80px; height:80px; opacity:.15; color:var(--muted); }