.stellen-scan {
  --stellen-navy: #14324a;
  --stellen-blue: #0b75b7;
  --stellen-cyan: #eaf7fc;
  --stellen-line: #d9e5ec;
  --stellen-danger: #b42318;
  box-sizing: border-box;
  max-width: 760px;
  margin: 2rem auto;
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border: 1px solid var(--stellen-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(20, 50, 74, 0.09);
  color: var(--stellen-navy);
}

.stellen-scan *, .stellen-scan *::before, .stellen-scan *::after { box-sizing: inherit; }
.stellen-scan__header h2 { margin: 0 0 .5rem; font-size: clamp(1.65rem, 4vw, 2.35rem); line-height: 1.15; color: var(--stellen-navy); }
.stellen-scan__header p { margin: 0; line-height: 1.55; }
.stellen-scan__header .stellen-scan__eyebrow { margin-bottom: .4rem; color: var(--stellen-blue); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.stellen-scan__form { margin-top: 1.6rem; }
.stellen-scan__form label { display: block; margin-bottom: .45rem; font-weight: 700; }
.stellen-scan__input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .7rem; }
.stellen-scan__input { width: 100%; min-height: 48px; padding: .75rem .9rem; border: 1px solid #aebfca; border-radius: 10px; background: #fff; color: #172b3a; font: inherit; }
.stellen-scan__input:focus { outline: 3px solid rgba(11, 117, 183, .18); border-color: var(--stellen-blue); }
.stellen-scan__actions { display: flex; gap: .65rem; margin-top: .75rem; }
.stellen-scan__button { min-height: 44px; padding: .7rem 1rem; border: 1px solid var(--stellen-blue); border-radius: 10px; background: #fff; color: var(--stellen-blue); font: inherit; font-weight: 700; cursor: pointer; }
.stellen-scan__button:hover { background: var(--stellen-cyan); }
.stellen-scan__button--primary { background: var(--stellen-blue); color: #fff; }
.stellen-scan__button--primary:hover { background: #075f96; }
.stellen-scan__button:disabled { cursor: wait; opacity: .65; }
.stellen-scan__camera-panel { position: relative; overflow: hidden; margin-top: 1rem; border-radius: 14px; background: #07131c; min-height: 280px; }
.stellen-scan__reader { width: 100%; min-height: 280px; color: #fff; }
.stellen-scan__reader video { display: block; width: 100% !important; min-height: 280px; max-height: 520px; object-fit: cover; }
.stellen-scan__reader canvas { max-width: 100%; }
.stellen-scan__guide { position: absolute; z-index: 20; top: 50%; left: 50%; display: grid; place-items: start center; width: min(88%, 420px); aspect-ratio: 1.55 / 1; transform: translate(-50%, -50%); border: 3px solid #e32626; border-radius: 12px; box-shadow: 0 0 0 999px rgba(3, 16, 26, .12), 0 0 14px rgba(227, 38, 38, .75); pointer-events: none; }
.stellen-scan__guide::before, .stellen-scan__guide::after { content: ""; position: absolute; background: #fff; }
.stellen-scan__guide::before { top: -3px; bottom: -3px; left: 50%; width: 1px; opacity: .18; }
.stellen-scan__guide::after { right: -3px; bottom: 50%; left: -3px; height: 1px; opacity: .18; }
.stellen-scan__guide span { padding: 4px 7px; transform: translateY(calc(-100% - 8px)); border-radius: 5px; background: rgba(0, 0, 0, .72); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.2; text-align: center; }
.stellen-scan__status { min-height: 1.5em; margin: 1rem 0 0; color: #31546c; font-weight: 600; }
.stellen-scan__status.is-error { color: var(--stellen-danger); }
.stellen-scan__result { margin-top: 1rem; padding: 1.25rem; border-radius: 14px; background: var(--stellen-cyan); }
.stellen-scan__result h3 { margin: 0 0 .8rem; color: var(--stellen-navy); }
.stellen-scan__result dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.25rem; margin: 0; }
.stellen-scan__result dl div { padding-bottom: .65rem; border-bottom: 1px solid rgba(20, 50, 74, .14); }
.stellen-scan__result dt { color: #557082; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.stellen-scan__result dd { margin: .18rem 0 0; color: var(--stellen-navy); font-size: 1.02rem; font-weight: 700; overflow-wrap: anywhere; }

@media (max-width: 600px) {
  .stellen-scan__input-row { grid-template-columns: 1fr; }
  .stellen-scan__actions { flex-wrap: wrap; }
  .stellen-scan__button { width: 100%; }
  .stellen-scan__result dl { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .stellen-scan * { scroll-behavior: auto !important; transition: none !important; }
}