/* Preisschild-Editor 0.1.0.0 — Oberfläche
   Kontraste, Zielgrößen und Fokus folgen Regelwerk V (V.4, V.5, V.6, V.7).
   Gestaltungsmotiv: die Millimeterskala — das Werkzeug misst, also zeigt es Maß. */

:root {
  --ink:        #14171c;
  --muted:      #535a66;
  --paper:      #ffffff;
  --surface:    #eceef1;
  --surface-2:  #f6f7f9;
  --rule:       #c9ced7;
  --accent:     #0b4f6c;
  --accent-2:   #083c53;
  --danger:     #9c2318;
  --ok:         #12603c;
  --promo:      #a02617;

  --step-1: 4px;
  --step-2: 8px;
  --step-3: 12px;
  --step-4: 16px;
  --step-5: 24px;
  --step-6: 32px;

  --tap: 44px;                 /* V.4: kleinste Zielgröße */
  --radius: 3px;
  --shadow: 0 1px 2px rgba(20,23,28,.10), 0 8px 24px rgba(20,23,28,.06);
  --sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.55 var(--sans);
  color: var(--ink);
  background: var(--surface);
}

h1 { font-size: 1.75rem; letter-spacing: -0.01em; margin: var(--step-5) 0 var(--step-4); }

/* Ueberschrift und Seitenaktionen in einer Zeile. Ist kein Aktionsbereich da,
   verhaelt sich die Zeile wie die Ueberschrift allein. */
.pagehead { display: flex; align-items: center; gap: var(--step-4); flex-wrap: wrap; }
.pagehead h1 { flex: 1 1 auto; }
.form-actions--head { margin: 0 0 0 auto; }
@media (max-width: 34rem) {
  .form-actions--head { width: 100%; margin: 0 0 var(--step-3); justify-content: flex-start; }
}
h2 { font-size: 1.1rem; margin: 0 0 var(--step-3); }
a { color: var(--accent); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface); padding: 1px 5px; border-radius: 2px; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skiplink {
  position: absolute; left: var(--step-2); top: -60px; z-index: 50;
  background: var(--accent); color: #fff; padding: var(--step-3) var(--step-4);
  border-radius: var(--radius); text-decoration: none;
}
.skiplink:focus { top: var(--step-2); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn--primary:focus-visible, .btn--danger:focus-visible { outline-color: var(--ink); }

/* ---------------------------------------------------------------- Kopfzeile */

.top {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--step-4);
  padding: var(--step-3) var(--step-5);
  background: var(--paper);
}
.wordmark {
  font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.wordmark span { color: var(--muted); font-weight: 500; }
.wordmark small {
  display: inline-block; margin-left: var(--step-2); padding: 2px 6px;
  font-size: .7rem; font-variant-numeric: tabular-nums;
  color: var(--muted); background: var(--surface); border-radius: 2px;
}

.mainnav { margin-left: auto; }
.mainnav ul { display: flex; flex-wrap: wrap; gap: var(--step-1); list-style: none; margin: 0; padding: 0; }
.mainnav a {
  display: flex; align-items: center; min-height: var(--tap);
  padding: 0 var(--step-3); border-radius: var(--radius);
  color: var(--muted); text-decoration: none; font-weight: 500;
}
.mainnav a:hover { background: var(--surface-2); color: var(--ink); }
.mainnav a[aria-current="page"] {
  color: var(--ink); background: var(--surface);
  box-shadow: inset 0 -3px 0 var(--accent);      /* Farbe plus Form (V.7) */
}

/* Millimeterskala als Trennlinie — das Motiv des Werkzeugs. */
.rule {
  height: 11px;
  background:
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 40px) bottom/100% 11px no-repeat,
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 8px)  bottom/100% 5px  no-repeat,
    var(--paper);
  border-bottom: 1px solid var(--rule);
}

.wrap { max-width: 76rem; margin: 0 auto; padding: 0 var(--step-5) var(--step-6); }

/* ----------------------------------------------------------------- Meldungen */

.messages { display: grid; gap: var(--step-2); margin-bottom: var(--step-4); }
.msg {
  display: flex; gap: var(--step-2); align-items: baseline; margin: 0;
  padding: var(--step-3) var(--step-4);
  background: var(--paper); border-left: 4px solid var(--muted);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.msg-mark {
  flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  display: inline-grid; place-items: center; font-size: .8rem; font-weight: 700;
  color: #fff; background: var(--muted); transform: translateY(2px);
}
.msg-word { font-weight: 600; }
.msg--ok    { border-left-color: var(--ok); }
.msg--ok .msg-mark { background: var(--ok); }
.msg--warn  { border-left-color: var(--promo); }
.msg--warn .msg-mark { background: var(--promo); }
.msg--error { border-left-color: var(--danger); }
.msg--error .msg-mark { background: var(--danger); }

/* -------------------------------------------------------------------- Flächen */

.card {
  background: var(--paper); border-radius: var(--radius);
  padding: var(--step-5); box-shadow: var(--shadow); margin-bottom: var(--step-4);
}
.card--row { display: flex; align-items: center; gap: var(--step-4); flex-wrap: wrap; }
.card--row h2 { margin: 0; }
.grow { flex: 1 1 12rem; }
.empty { text-align: center; }
.empty p { margin: var(--step-2) 0; }

.cols { display: grid; gap: var(--step-4); grid-template-columns: 1fr 1fr; align-items: start; }
.cols--sidebar { grid-template-columns: 22rem 1fr; }
.cols--print { grid-template-columns: 1.1fr 1fr; }
.grid--3 { display: grid; gap: var(--step-4); grid-template-columns: repeat(3, 1fr); margin-bottom: var(--step-4); }

.bar {
  display: flex; flex-wrap: wrap; gap: var(--step-3); align-items: center;
  margin-bottom: var(--step-4);
}
.bar > :last-child { margin-left: auto; }
.lead { font-size: 1.05rem; color: var(--muted); max-width: 46rem; margin-top: 0; }
.dim { color: var(--muted); }
.hint { display: block; color: var(--muted); font-size: .85rem; margin-top: var(--step-1); }
.err  { display: block; color: var(--danger); font-size: .85rem; font-weight: 600; margin-top: var(--step-1); }
.err::before { content: "! "; }

.cardlist { list-style: none; margin: 0; padding: 0; }

.tile {
  display: grid; gap: var(--step-1); align-content: start;
  background: var(--paper); border-radius: var(--radius); padding: var(--step-5);
  text-decoration: none; color: var(--ink); box-shadow: var(--shadow);
  border-top: 3px solid var(--accent);
}
.tile:hover { background: var(--surface-2); }
.tile-num { font-size: 2.4rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tile-label { color: var(--muted); }
.tile-go { color: var(--accent); font-weight: 600; font-size: .9rem; margin-top: var(--step-2); }

.steps { padding-left: 1.2rem; }
.steps li { margin-bottom: var(--step-2); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: var(--step-2) var(--step-4); margin: 0 0 var(--step-4); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }

.specs { display: flex; flex-wrap: wrap; gap: var(--step-2) var(--step-4); margin: var(--step-2) 0 0; }
.spec { font-variant-numeric: tabular-nums; }
.spec-k { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin-right: 4px; }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: var(--surface); color: var(--muted);
}
.tag--ok    { background: #e3f1ea; color: var(--ok); }
.tag--warn  { background: #fbe9e6; color: var(--danger); }
.tag--promo { background: #fbe9e6; color: var(--promo); }
.tag--off   { background: var(--surface); color: var(--muted); }

/* -------------------------------------------------------------------- Tabellen */

.table { width: 100%; border-collapse: collapse; background: var(--paper); box-shadow: var(--shadow); border-radius: var(--radius); }
.table caption { text-align: left; padding-bottom: var(--step-2); }
.table th, .table td { text-align: left; padding: var(--step-3) var(--step-4); border-bottom: 1px solid var(--rule); vertical-align: middle; }
.table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--surface-2); }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table--tight th, .table--tight td { padding: var(--step-2) var(--step-3); }
.sub { display: block; color: var(--muted); font-weight: 400; font-size: .9rem; }

.row-actions { display: flex; gap: var(--step-3); justify-content: flex-end; flex-wrap: wrap; }
.inline { display: inline; margin: 0; }

/* ------------------------------------------------------------------ Bedienung */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); min-width: var(--tap);
  padding: 0 var(--step-4); gap: var(--step-2);
  font: inherit; font-weight: 600; text-decoration: none;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer;
}
.btn:hover { background: var(--surface-2); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-2); }
.btn--danger { background: var(--paper); border-color: var(--danger); color: var(--danger); }
.btn--danger:hover { background: var(--danger); color: #fff; }
.btn--quiet { border-color: transparent; background: transparent; color: var(--muted); }
.btn--small { min-height: 36px; padding: 0 var(--step-3); font-size: .9rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.form-grid { display: grid; gap: var(--step-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid--mm { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid--add { grid-template-columns: 1fr 1fr auto; }
.field, .field--wide { display: grid; gap: var(--step-1); }
.field--wide { grid-column: 1 / -1; }
.field--narrow input { width: 6rem; }
.field > span, .label { font-weight: 600; font-size: .92rem; }
.field em { font-style: normal; font-weight: 400; color: var(--muted); font-size: .85rem; }

input[type="text"], input[type="search"], input[type="number"], input[type="file"], select {
  min-height: var(--tap); width: 100%;
  padding: 0 var(--step-3); font: inherit; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
}
input[type="file"] { padding: var(--step-2); }
input[type="number"], .count-input { font-variant-numeric: tabular-nums; text-align: right; }
.field--error input, .field--error select { border-color: var(--danger); border-width: 2px; }

.mmwrap { position: relative; display: block; }
.mmwrap input { padding-right: 3rem; text-align: right; font-variant-numeric: tabular-nums; }
.unit {
  position: absolute; right: var(--step-3); top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: .85rem; pointer-events: none;
}

fieldset { border: 0; border-top: 1px solid var(--rule); margin: var(--step-5) 0 0; padding: var(--step-4) 0 0; }
legend { font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 0 var(--step-2) 0 0; }

.check { display: flex; align-items: center; gap: var(--step-3); min-height: var(--tap); cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }
.switches { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--step-2); }

.choices { display: grid; gap: var(--step-3); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.choice { display: flex; gap: var(--step-3); padding: var(--step-3); border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer; }
.choice:hover { background: var(--surface-2); }
.choice input { margin-top: 3px; width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.choice-body { display: grid; gap: 2px; }
.choice-body small { color: var(--muted); }
.choice:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.form-actions { display: flex; gap: var(--step-3); justify-content: flex-end; margin-top: var(--step-5); flex-wrap: wrap; }
.form-actions--left { justify-content: flex-start; }
.form--tight .form-actions { margin-top: var(--step-4); }
.filter { display: flex; gap: var(--step-3); align-items: end; flex-wrap: wrap; }
.field--inline { min-width: 12rem; }
.count { float: right; color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }

.logo-slot {
  flex: none; width: 96px; height: 64px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
}
.logo-slot img { max-width: 88px; max-height: 56px; }
.logo-none { color: var(--muted); font-size: .78rem; }
.logo-current { display: flex; align-items: center; gap: var(--step-4); margin-bottom: var(--step-2); }
.logo-current img { max-width: 140px; max-height: 70px; border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--step-2); background: var(--paper); }

.proportion {
  flex: none; height: 56px; aspect-ratio: var(--w) / var(--h);
  border: 1px solid var(--accent); border-radius: 2px; background: var(--surface-2);
  display: grid; place-items: center; font-size: .7rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
details.fit { margin-top: var(--step-4); border-top: 1px solid var(--rule); padding-top: var(--step-3); }
details.fit summary { cursor: pointer; min-height: 36px; display: flex; align-items: center; font-weight: 600; color: var(--accent); }

/* ------------------------------------------------------------ Blattvorschau */

.sheets { display: grid; gap: var(--step-4); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin: var(--step-4) 0; }
.sheetview { margin: 0; }
.paper {
  position: relative; width: 100%; background: var(--paper);
  border: 1px solid var(--rule); box-shadow: var(--shadow);
}
.paper-margin { position: absolute; border: 1px dashed var(--rule); }
.slot {
  position: absolute; overflow: hidden;
  background: rgba(11, 79, 108, .10); border: 1px solid var(--accent);
  border-left-width: 3px;
  display: grid; place-items: center; padding: 2px;
}
.slot span { font-size: .6rem; line-height: 1.1; color: var(--accent-2); text-align: center; word-break: break-word; }
.slot--promo { background: rgba(160, 38, 23, .10); border-color: var(--promo); }
.slot--promo span { color: var(--promo); }
.sheetview figcaption { margin-top: var(--step-2); font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------- Dialog */

.dlg {
  border: 0; border-radius: var(--radius); padding: 0;
  max-width: 32rem; width: calc(100% - 2rem);
  box-shadow: 0 24px 64px rgba(20,23,28,.28);
  color: var(--ink);
}
.dlg::backdrop { background: rgba(20, 23, 28, .55); }
.dlg-inner { padding: var(--step-5); margin: 0; }
.dlg h2 { font-size: 1.25rem; }
.dlg-hint {
  display: flex; gap: var(--step-2); align-items: flex-start;
  background: var(--surface-2); border-radius: var(--radius);
  padding: var(--step-3); color: var(--muted); font-size: .88rem; margin: var(--step-4) 0 0;
}
.dlg-actions {
  display: flex; gap: var(--step-4);        /* V.4: deutlich mehr als 8 px Trennung */
  justify-content: flex-end; margin-top: var(--step-5); flex-wrap: wrap;
}

/* ------------------------------------------------------------------- Fußzeile */

.foot { color: var(--muted); font-size: .9rem; border-top: 1px solid var(--rule); padding-top: var(--step-4); }
.foot p { margin: 0 0 var(--step-2); }

/* ---------------------------------------------------------------- Anpassung */

@media (max-width: 60rem) {
  .cols, .cols--sidebar, .cols--print, .grid--3 { grid-template-columns: 1fr; }
  .form-grid, .form-grid--mm, .form-grid--add { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wrap { padding: 0 var(--step-4) var(--step-5); }
  .top { padding: var(--step-3) var(--step-4); }
  .mainnav { margin-left: 0; width: 100%; }
}
@media (max-width: 34rem) {
  .form-grid, .form-grid--mm, .form-grid--add { grid-template-columns: 1fr; }
  .row-actions { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------- Vorlagen-Editor (0.2.6.0) */

/* Die Seite besteht aus drei Blöcken: Name über volle Breite, darunter
   Vorschau und Eigenschaften nebeneinander, darunter die Auswahlleiste. */
.editor-page { display: grid; gap: var(--step-4); }
.editor-page > .card { margin: 0; }

/* Die Eigenschaften-Spalte bekommt eine Mindestbreite. Ohne sie fallen die
   Millimeterfelder unter die Breite, die eine Zahl neben dem „mm“ braucht. */
.editor2 {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(19rem, 1fr);
  gap: var(--step-4); align-items: start;
}
.editor2-col { display: flex; flex-direction: column; gap: var(--step-4); min-width: 0; }
.editor2-col > .card { margin: 0; }
@media (max-width: 60rem) { .editor2 { grid-template-columns: 1fr; } }

.barslot:empty { display: none; }

/* Auswahlleiste: Ziele mindestens 44 px hoch (V.4); der Zustand steht als
   Wort dabei, nicht nur als Helligkeit (V.7). */
.fieldbar { display: flex; flex-wrap: wrap; gap: var(--step-2); }
.pick {
  min-height: var(--tap); padding: 0 var(--step-4);
  font: inherit; font-weight: 600; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  cursor: pointer;
}
.pick:hover { border-color: var(--accent); }
.pick[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.pick--off { color: var(--muted); border-style: dashed; }
.pick--off[aria-pressed="true"] { color: var(--paper); }
.pick--label { font-style: italic; }
.pick:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.panel > h2:first-child { margin-top: 0; }
.panel .check { margin-top: var(--step-3); }

/* Im schmalen Container steht ein Feld unter dem anderen - nebeneinander
   bliebe zu wenig Platz fuer die Zahl neben dem „mm“, und ein Wert, den man
   nicht lesen kann, ist kein Wert.
   Innerhalb einer Zeile steht die Beschriftung neben dem Eingabefeld: das
   spart die halbe Hoehe und laesst die Werte in einer Flucht stehen. */
.panel .form-grid,
.panel .form-grid--mm { margin-top: var(--step-3); grid-template-columns: minmax(0, 1fr); gap: var(--step-3); }
.panel fieldset { margin-top: var(--step-4); }

.panel .field {
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: center;
  column-gap: var(--step-3);
}
.panel .field > span:first-child { line-height: 1.25; }
.panel .field .err { grid-column: 2; }

.stage {
  position: relative; width: 100%; aspect-ratio: 90 / 55;
  background: var(--paper); border: 1px solid var(--ink); border-radius: 2px;
  overflow: hidden;
}
.stage-safe { position: absolute; border: 1px dashed var(--rule); pointer-events: none; }

.box {
  position: absolute; min-width: 24px; min-height: 24px;
  padding: 0; margin: 0; font: inherit; text-align: left;
  background: transparent; border: 1px solid var(--muted);
  cursor: move; touch-action: none; overflow: hidden;
}
.box[hidden] { display: none; }
.box-name {
  display: block; padding: 1px 3px; font-size: .7rem; line-height: 1.2;
  color: var(--muted); white-space: nowrap; pointer-events: none;
}
.box-grip {
  position: absolute; right: 0; bottom: 0; width: 24px; height: 24px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 55%, var(--muted) 55%, var(--muted) 65%, transparent 65%),
    linear-gradient(135deg, transparent 75%, var(--muted) 75%, var(--muted) 85%, transparent 85%);
}
.box--on { border: 2px solid var(--accent); }
.box--on .box-name { color: var(--accent); font-weight: 700; }
.box--on .box-grip { background:
    linear-gradient(135deg, transparent 55%, var(--accent) 55%, var(--accent) 65%, transparent 65%),
    linear-gradient(135deg, transparent 75%, var(--accent) 75%, var(--accent) 85%, transparent 85%); }
.box:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.choices--stack { display: grid; gap: var(--step-2); }

.probe-out { min-height: 1.4em; margin: var(--step-2) 0 0; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.probe-out.is-bad { color: var(--danger); font-weight: 600; }

kbd {
  font: inherit; font-size: .85em; padding: 1px 5px;
  border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 3px; background: var(--surface-2);
}

/* ------------------------------------------------------- Logo-Zuschnitt (0.2.8.0) */

.cropcard h2 { margin-top: 0; }
.crop-stage {
  position: relative; display: inline-block; max-width: 100%;
  background:
    repeating-conic-gradient(var(--surface-2) 0% 25%, var(--paper) 0% 50%) 0 0 / 16px 16px;
  border: 1px solid var(--rule); border-radius: 2px;
  touch-action: none;
}
.crop-stage img { display: block; max-width: 100%; max-height: 22rem; user-select: none; }
.crop-frame {
  position: absolute; min-width: 12px; min-height: 12px;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .28); /* dunkelt das Weggeschnittene ab */
  cursor: move; touch-action: none;
}
.crop-frame:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.crop-grip {
  position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 55%, var(--accent) 55%, var(--accent) 65%, transparent 65%),
    linear-gradient(135deg, transparent 75%, var(--accent) 75%, var(--accent) 85%, transparent 85%);
}
.crop-readout { margin: var(--step-2) 0 0; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }


/* ------------------------------------------------------- Eigene Schrift (0.2.9.0) */

.fontslots { display: grid; gap: var(--step-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.fontslots .card { margin: 0; }
.fontslots .card > .form { margin-top: var(--step-4); padding-top: var(--step-4); border-top: 1px solid var(--rule); }