/* Alleskonverter-Look für die QR-Engine.
   Die Seite nutzt das Standard-Gerüst der Site (base.css); style.css liefert nur
   noch die Komponenten des Editors und wird hier auf den Papier-Look gezogen. */
:root {
  --accent-a: #1B4D3E;
  --accent-b: #2E6E58;
  --accent-grad: linear-gradient(120deg, #1B4D3E, #2E6E58);
  --radius: 0;
  --radius-sm: 0;
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

:root, :root[data-theme="light"] {
  --bg: #E6E4DE;
  --card: #F3F2ED;
  --card-2: #ECEAE3;
  --text: #16191B;
  --text-dim: #5C6268;
  --border: #C9C6BD;
  --shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 24px -18px rgba(0,0,0,.45);
  --input-bg: #ffffff;
  color-scheme: light;
}

/* base.css bestimmt Seite/Typo — style.css-Reste neutralisieren */
body {
  background: var(--bg);
  background-image: repeating-linear-gradient(90deg, var(--grain) 0 1px, transparent 1px 4px);
  font-size: 15px;
}
.layout { max-width: none; padding: 0; }
@media (min-width: 960px) { .layout { padding: 0; } .col-preview { top: 20px; } }

/* Editor-Karten in Papier-Optik */
.card { border: 1px solid var(--border); box-shadow: var(--shadow); }
.card-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Kantige Bedienelemente wie im Rest der Site */
.btn, .chip, .seg-btn, .fab, .toast { border-radius: 0 !important; }

/* Fußzeilen-Links (Markup wie auf den anderen Werkzeugseiten) */
.footlinks { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: 0 0 10px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.footlinks a { color: var(--stamp); }

/* Info-/FAQ-Block wie auf den anderen Werkzeugseiten */
.seotext { margin-top: 46px; max-width: 70ch; font-size: 14px; }
.seotext h3 { font-size: 15px; margin: 20px 0 4px; }
.seotext p { margin: 6px 0 0; color: var(--ink-soft); }
.seotext > p:first-of-type { color: var(--ink); }

/* Platz reservieren, damit beim Aufbau nichts springt (CLS) */
#typeChips { min-height: 46px; }
#typeForm { min-height: 76px; }
#presetGrid { min-height: 188px; }
.preview-stage { min-height: 296px; display: grid; place-items: center; }