/* Laserkatze — Konfigurator UI (nur konfigurator.html) */

.gen-layout { display: grid; gap: var(--space-block); align-items: start; }
/* Grid-Kinder haben von Haus aus min-width:auto und schrumpfen darum nie unter
   ihre Mindest-Inhaltsbreite — auf schmalen Geräten (320 px) schob das die
   Spalte über den Viewport hinaus. min-width:0 erlaubt das Schrumpfen. */
.gen-layout > * { min-width: 0; }
@media (min-width: 900px) { .gen-layout { grid-template-columns: 1.25fr 1fr; } }

/* Mobil-Hinweis: nur auf kleinen Screens sichtbar (Konfigurator ist Desktop-freundlicher) */
.gen-mobile-hint {
  display: none;
  font-size: 0.9rem; line-height: 1.6;
  background: var(--paper-2, #f3f1ec); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 0.8rem 1rem; align-self: flex-start;
}
@media (max-width: 899px) { .gen-mobile-hint { display: block; } }

/* Ablauf nach dem Absenden. Steht bewusst prominent im Kopf der Seite:
   Der Konfigurator rechnet, aber er bestellt nicht — jede Datei geht durch eine
   persönliche Prüfung, und gefertigt wird erst nach Zahlungseingang. Wer das
   vorher weiß, ist nachher nicht enttäuscht. */
.gen-flow {
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--mint-deep);
  border-radius: var(--radius);
  background: var(--paper-2);
  padding: 1rem 1.2rem;
  max-width: 46em;
}
.gen-flow__steps {
  list-style: none;
  counter-reset: flow;
  display: grid;
  gap: 0.45rem;
  margin: 0;
}
.gen-flow__steps li {
  counter-increment: flow;
  position: relative;
  padding-left: 2rem;
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: none;
}
.gen-flow__steps li::before {
  content: counter(flow);
  position: absolute; left: 0; top: 0.1rem;
  width: 1.35rem; height: 1.35rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-head); font-size: 0.7rem; font-weight: 700;
}
.gen-flow__note {
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.88rem;
  color: var(--ink-soft);
  max-width: none;
}

/* Dropzone */
.dropzone {
  border: 1.5px dashed var(--ink);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
  display: flex; align-items: center; gap: 1rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  background: var(--paper);
}
.dropzone:hover, .dropzone.is-drag { background: var(--paper-2); border-color: var(--mint-deep); }
.dropzone .eyebrow { color: var(--ink); }
.dropzone p { font-size: 0.85rem; color: var(--ink-soft); }
.dropzone { position: relative; }
#file-input { display: none; }
#file-meta { font-size: 0.8rem; color: var(--mint-deep); font-weight: 500; }
.dropzone__remove {
  position: absolute; top: 0.5rem; right: 0.5rem;
  width: 1.8rem; height: 1.8rem; line-height: 1;
  border: 1px solid var(--ink); border-radius: var(--radius);
  background: var(--paper); font-size: 1.1rem; cursor: pointer;
}
.dropzone__remove:hover { background: #d0342c; color: var(--paper); border-color: #d0342c; }

/* Bearbeitung nachträglich zuweisen (Klick auf Kontur in der Vorschau) */
#svg-host [data-lk-role] { cursor: pointer; }
#svg-host [data-lk-selected] {
  stroke: var(--mint-deep) !important;
  stroke-width: 2.5 !important;
}
.role-popover {
  position: absolute; z-index: 5;
  background: var(--paper); border: 1px solid var(--ink); border-radius: var(--radius);
  padding: 0.6rem 0.7rem;
  box-shadow: 0 2px 12px rgba(20, 20, 20, 0.18);
}
.role-popover__title {
  display: block; margin-bottom: 0.45rem;
  font-family: var(--font-head); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
}
.role-popover .chip { font-size: 0.68rem; padding: 0.4rem 0.6rem; }

.assign-row { margin-top: -0.2rem; }
.assign-row__hint { font-size: 0.8rem; color: var(--ink-soft); }
.assign-row__status {
  font-size: 0.8rem; font-weight: 500; color: var(--mint-deep); margin-top: 0.35rem;
}
.assign-row__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }

/* Zoom-Leiste */
.zoom-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; }
.zoom-btn { padding: 0.35rem 0.75rem; min-width: 2.1rem; text-align: center; line-height: 1; }
.zoom-level { font-size: 0.78rem; color: var(--ink-soft); min-width: 3.6em; text-align: center; }

/* Bühne + Achsen: Y-Lineal links, X-Lineal unten, Bühne oben rechts */
.stage-wrap {
  display: grid;
  grid-template-columns: 20px 1fr;
  grid-template-rows: 1fr 18px;
}
.stage-wrap .preview-stage { grid-column: 2; grid-row: 1; }
#ruler-y { grid-column: 1; grid-row: 1; position: relative; }
#ruler-x { grid-column: 2; grid-row: 2; position: relative; height: 18px; }

/* Vorschau-Bühne mit Materialtextur */
.preview-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid; place-items: center;
  box-shadow: inset 0 2px 14px rgba(20,20,20,0.08);
}
#svg-host {
  position: absolute; inset: 7%;
  transform-origin: center center;
  transition: transform 0.15s ease;
}
#svg-host svg { filter: drop-shadow(0.5px 1px 0.6px rgba(58,25,5,0.55)); }
#empty-hint { position: relative; z-index: 1; color: var(--ink-soft); font-size: 0.9rem; text-align: center; padding: 1rem; }

/* Maßstabs-Lineale (X unten, Y links) — Ticks per JS positioniert.
   Die Lineale selbst müssen klickbar bleiben (Messlinien herausziehen),
   nur die Tick-Striche darin nicht. */
.ruler__tick {
  position: absolute;
  background: rgba(20,20,20,0.5);
  pointer-events: none;
}
.ruler--x .ruler__tick { top: 0; width: 1px; height: 6px; }
.ruler--x .ruler__tick--cm { height: 10px; background: var(--ink); }
.ruler--x .ruler__tick--cm b {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  font-size: 0.62rem; font-weight: 500; color: var(--ink); white-space: nowrap;
}
.ruler--y .ruler__tick { right: 0; height: 1px; width: 6px; }
.ruler--y .ruler__tick--cm { width: 10px; background: var(--ink); }
.ruler--y .ruler__tick--cm b {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 0.62rem; font-weight: 500; color: var(--ink); white-space: nowrap;
}
.ruler-note { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.5rem; }
.ruler-note span { font-weight: 500; color: var(--ink); }

/* Messlinien: aus den Linealen in die Vorschau ziehen, Position/Abstand in mm.
   Zum Nachmessen der eigenen Datei — es wird nichts gezeichnet oder verändert. */
.ruler { touch-action: none; cursor: crosshair; }
.guide-hint {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.35rem;
}
.guides { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.guide {
  position: absolute; pointer-events: auto; touch-action: none;
  background: var(--mint-deep);
}
.guide--x { top: 0; bottom: 0; width: 1px; cursor: ew-resize; }
.guide--y { left: 0; right: 0; height: 1px; cursor: ns-resize; }
/* unsichtbarer, breiterer Greifbereich — sonst trifft man 1 px nicht (v. a. per Touch) */
.guide::after {
  content: ""; position: absolute;
}
.guide--x::after { top: 0; bottom: 0; left: -9px; right: -9px; }
.guide--y::after { left: 0; right: 0; top: -9px; bottom: -9px; }
.guide__label {
  position: absolute;
  background: var(--mint-deep); color: var(--paper);
  font-family: var(--font-head); font-size: 0.62rem; font-weight: 500;
  padding: 0.1rem 0.3rem; border-radius: var(--radius); white-space: nowrap;
}
.guide--x .guide__label { top: 2px; left: 2px; }
.guide--y .guide__label { left: 2px; top: 2px; }
.guide-span {
  position: absolute; pointer-events: none;
  border-color: var(--mint-deep); border-style: dashed;
}
.guide-span--x { border-width: 0 0 1px 0; }
.guide-span--y { border-width: 0 0 0 1px; }
.guide-span__label {
  position: absolute; transform: translate(-50%, -50%);
  background: var(--ink); color: var(--paper);
  font-family: var(--font-head); font-size: 0.62rem; font-weight: 500;
  padding: 0.12rem 0.35rem; border-radius: var(--radius); white-space: nowrap;
}

/* Ampel-Status-Badge */
.check-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.8rem; }
.check-panel__head .eyebrow { margin-bottom: 0; }
.status-badge {
  font-size: 0.78rem; font-weight: 500; padding: 0.3rem 0.65rem;
  border-radius: var(--radius); border: 1px solid var(--hairline);
}
.status-badge--ok { background: rgba(32, 255, 202, 0.18); border-color: var(--mint-deep); }
.status-badge--warn { background: rgba(230, 190, 40, 0.18); border-color: var(--yellow); }
.status-badge--err { background: rgba(208, 52, 44, 0.12); border-color: #d0342c; }

/* Material-Texturen (CSS, kein Asset nötig) */
.tex-wood-light { background:
  repeating-linear-gradient(93deg, rgba(160,115,60,0.10) 0 2px, transparent 2px 11px),
  repeating-linear-gradient(88deg, rgba(190,150,95,0.16) 0 6px, transparent 6px 34px),
  linear-gradient(90deg, #ead9b8, #e3cea8 45%, #ecdcbf); }
.tex-wood-oak { background:
  repeating-linear-gradient(92deg, rgba(120,70,25,0.16) 0 2px, transparent 2px 9px),
  repeating-linear-gradient(87deg, rgba(150,95,45,0.20) 0 5px, transparent 5px 26px),
  linear-gradient(90deg, #d9a866, #cf9c58 50%, #dcae72); }
.tex-mdf { background:
  radial-gradient(rgba(120,95,70,0.12) 1px, transparent 1.4px),
  linear-gradient(90deg, #cbb59a, #c4ad90);
  background-size: 7px 7px, 100% 100%; }
.tex-acryl { background:
  linear-gradient(115deg, rgba(255,255,255,0.75) 0%, rgba(226,240,238,0.4) 30%, rgba(255,255,255,0.8) 47%, rgba(222,236,234,0.4) 64%, rgba(255,255,255,0.7) 100%),
  linear-gradient(180deg, #f2f7f6, #e8f0ee); }
.tex-card { background:
  repeating-linear-gradient(0deg, rgba(150,130,105,0.08) 0 1px, transparent 1px 4px),
  linear-gradient(90deg, #d9c9a8, #d2c19e); }
.tex-felt { background:
  radial-gradient(rgba(90,90,87,0.25) 0.8px, transparent 1.2px),
  radial-gradient(rgba(120,120,115,0.18) 1px, transparent 1.5px),
  linear-gradient(90deg, #9aa0a2, #8f9598);
  background-size: 5px 5px, 9px 9px, 100% 100%; }
.tex-cork { background:
  radial-gradient(rgba(130,85,40,0.4) 1.5px, transparent 2.2px),
  radial-gradient(rgba(160,110,55,0.3) 2.5px, transparent 3.4px),
  linear-gradient(90deg, #cfa76e, #c69d63);
  background-size: 13px 11px, 29px 23px, 100% 100%; }

/* Chips */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  font-family: var(--font-head); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--ink); border-radius: var(--radius);
  padding: 0.5rem 0.9rem; background: var(--paper);
  transition: background 0.15s ease, color 0.15s ease;
}
.chip:hover { background: var(--paper-2); }
.chip.is-active { background: var(--ink); color: var(--paper); box-shadow: inset 0 -3px 0 var(--mint); }

/* Panels */
.gen-panel { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.3rem; background: var(--paper); }
.gen-panel + .gen-panel { margin-top: 1rem; }
.gen-panel .eyebrow { margin-bottom: 0.8rem; display: block; }

/* Material-Sorten (z. B. Acryl XT/GS) + Farbauswahl */
.variant-row { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--hairline); }
.eyebrow--sub { font-size: 0.7rem; margin-bottom: 0.5rem; color: var(--ink-soft); }
.variant-note {
  font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.6rem; line-height: 1.5;
}

.field-inline { display: flex; align-items: center; gap: 0.7rem; }
.field-inline input {
  font: inherit; width: 6.5em; padding: 0.5rem 0.7rem;
  border: 1px solid var(--ink); border-radius: var(--radius);
  background: var(--paper);
}
.field-inline input:focus { outline: 2px solid var(--mint); outline-offset: 1px; }

/* Datencheck */
#check-list { display: grid; gap: 0.5rem; font-size: 0.9rem; }
#check-list li { padding-left: 1.4rem; position: relative; }
#check-list li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 0.65em; height: 0.65em; border-radius: 50%;
}
.check-ok::before   { background: var(--mint); }
.check-warn::before { background: var(--yellow); }
.check-err::before  { background: #d0342c; }

/* Ergebnisse + Preis */
.res-grid { display: grid; gap: 0.55rem; font-size: 0.95rem; }
.res-grid > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--hairline); padding-bottom: 0.5rem; }
.res-grid dt { color: var(--ink-soft); }
.res-grid dd { font-weight: 500; text-align: right; }

.price-row { display: flex; justify-content: space-between; font-size: 0.9rem; padding-block: 0.3rem; color: var(--ink-soft); }
.price-row--note { display: block; font-size: 0.78rem; color: var(--mint-deep); padding-top: 0.2rem; }
.price-row--note a { border-bottom: 1px solid currentColor; }

/* Ungültige Zahleneingabe sichtbar machen (statt sie still zu verwerfen) */
input[aria-invalid="true"] { border-color: #b3261e; outline-color: #b3261e; }
.field-hint {
  display: block; margin-top: 0.3rem;
  font-size: 0.78rem; color: #b3261e;
}
#price-total {
  font-family: var(--font-head); font-weight: 700; font-size: 1.3rem;
  border-top: 2px solid var(--ink); padding-top: 0.7rem; margin-top: 0.5rem;
}
.placeholder-flag {
  display: inline-block; margin-top: 0.6rem;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--yellow); padding: 0.25rem 0.6rem; border-radius: var(--radius);
}
#cta-mail[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* Farblegende (Schnitt/Ritz/Gravur) */
.legend { display: grid; gap: 0.5rem; font-size: 0.88rem; }
.legend li { display: flex; align-items: center; gap: 0.6rem; }
.swatch { width: 1.5em; height: 1em; flex: none; border-radius: var(--radius); }
.swatch--cut { background: none; border-top: 2.5px solid #d0342c; height: 0; }
.swatch--score { background: none; border-top: 2.5px dashed #2743d8; height: 0; }
.swatch--engrave { background: #00c853; }
.legend-note { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.6rem; }
.legend code { font-size: 0.78rem; color: var(--ink-soft); }

/* Expertencheck-Empfehlung */
.expert-row { border-left: 3px solid transparent; padding-left: 0.5rem; transition: border-color 0.2s ease; }
.expert-row.is-suggested { border-left-color: var(--mint); }

/* Erklär-Tour */
.tour-overlay {
  /* Klick-Fänger; das Abdunkeln macht der Spot-Schatten */
  position: fixed; inset: 0; z-index: 90;
  background: transparent;
}
.tour-spot {
  /* fixed, NICHT absolute: reposition() rechnet mit getBoundingClientRect()
     (viewport-relativ) — bei absolute müsste zusätzlich scrollY/scrollX
     addiert werden, sonst wandert die Box nach dem ersten Scroll um genau
     den Scroll-Betrag daneben. */
  position: fixed; z-index: 91;
  border: 2px solid var(--mint); border-radius: var(--radius);
  box-shadow: 0 0 0 9999px rgba(20, 20, 20, 0.55);
  pointer-events: none;
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}
.tour-tip {
  position: fixed; z-index: 92;
  max-width: 320px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--radius);
  padding: 1rem 1.1rem;
  font-size: 0.9rem; line-height: 1.5;
}
.tour-tip .eyebrow { display: block; margin-bottom: 0.4rem; }
.tour-tip__nav { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.9rem; }
.tour-tip__dots { display: flex; gap: 0.3rem; margin-left: auto; }
.tour-tip__dots span { width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--hairline); }
.tour-tip__dots span.is-active { background: var(--mint-deep); }

/* Bestell-Gate + Auto-Fix (P2/Regelwerk) */
.btn-fix { font-size: 0.8rem; padding: 0.55rem 1rem; }
.confirm-row {
  display: flex; align-items: flex-start; gap: 0.55rem;
  margin-top: 0.9rem; font-size: 0.85rem; cursor: pointer;
}
.confirm-row input { margin-top: 0.2em; accent-color: var(--mint-deep); }
.cta-blocked { margin-top: 0.9rem; font-size: 0.85rem; color: #d0342c; font-weight: 500; }