/* ─── Variablen ─────────────────────────────────────────────────────────── */
:root {
  --blue:    #1e3a5f;
  --blue-lt: #2c5282;
  --green:   #276749;
  --amber:   #b7791f;
  --red:     #c53030;
  --gray-50: #f7fafc;
  --gray-100:#edf2f7;
  --gray-200:#e2e8f0;
  --gray-400:#a0aec0;
  --gray-600:#718096;
  --gray-800:#2d3748;
  --white:   #ffffff;
  --shadow:  0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
  --radius:  6px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ─── Reset & Basis ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); background: var(--gray-50); color: var(--gray-800);
       font-size: 14px; line-height: 1.5; }
a { color: var(--blue-lt); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.4rem; font-weight: 700; color: var(--blue); margin-bottom: .5rem; }
h2 { font-size: 1.1rem; font-weight: 600; color: var(--blue); margin-bottom: .75rem; }
h3 { font-size: .95rem; font-weight: 600; color: var(--gray-800); }

/* ─── Header ────────────────────────────────────────────────────────────── */
.app-header { background: var(--blue); padding: 0 1.5rem; height: 52px;
              display: flex; align-items: center; }
.header-inner { max-width: 1200px; width: 100%; margin: 0 auto;
                display: flex; justify-content: space-between; align-items: center; }
.logo { color: var(--white); font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; }
.logo span { font-weight: 300; opacity: .8; }
nav a { color: rgba(255,255,255,.85); margin-left: 1.5rem; font-size: .875rem; }
nav a:hover { color: #fff; text-decoration: none; }

/* Angebot-Badge im Header */
.angebot-badge { display: inline-flex; align-items: center; gap: .4rem;
                 padding: .25rem .7rem; border-radius: 999px;
                 background: rgba(255,255,255,.12); color: rgba(255,255,255,.85);
                 font-size: .8rem; }
.angebot-badge:hover { background: rgba(255,255,255,.2); color: #fff; }
.angebot-badge__count { background: rgba(255,255,255,.25); color: #fff;
                        padding: .05rem .45rem; border-radius: 999px;
                        font-weight: 600; font-size: .72rem; min-width: 1.2rem;
                        text-align: center; }
.angebot-badge--filled { background: var(--amber); color: #fff; }
.angebot-badge--filled .angebot-badge__count { background: rgba(255,255,255,.35); }

/* ─── Layout ────────────────────────────────────────────────────────────── */
.main-content { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem; }
.app-footer { text-align: center; padding: 1.25rem; color: var(--gray-400);
              font-size: .78rem; border-top: 1px solid var(--gray-200); margin-top: 2rem; }

/* ─── Cards ─────────────────────────────────────────────────────────────── */
.card { background: var(--white); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 1.25rem; margin-bottom: 1rem; }

/* ─── Flash ─────────────────────────────────────────────────────────────── */
.flash { padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem;
         font-size: .875rem; }
.flash-error   { background: #fff5f5; border: 1px solid #feb2b2; color: var(--red); }
.flash-success { background: #f0fff4; border: 1px solid #9ae6b4; color: var(--green); }

/* ─── Upload ────────────────────────────────────────────────────────────── */
.upload-card { max-width: 600px; margin: 0 auto 1.5rem; text-align: center; }
.upload-card .subtitle { color: var(--gray-600); margin-bottom: 1.5rem; }
.upload-area { border: 2px dashed var(--gray-200); border-radius: var(--radius);
               padding: 2.5rem 1rem; cursor: pointer; transition: border-color .2s;
               position: relative; margin-bottom: 1rem; }
.upload-area:hover, .upload-area.drag-over { border-color: var(--blue-lt); background: #ebf4ff; }
.upload-area input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.upload-icon { font-size: 2.5rem; margin-bottom: .5rem; }
.file-name { color: var(--green); font-weight: 600; margin-top: .5rem; font-size: .9rem; }

/* ─── Quellfarben-System (STEP=grün, DXF=gelb-orange, PDF=rosa-pink) ──── */
:root {
  --src-step-bg:  #c6f6d5; --src-step-fg:  #276749; --src-step-light: #f0fff4; --src-step-border: #9ae6b4;
  --src-dxf-bg:   #fef3c7; --src-dxf-fg:   #92400e; --src-dxf-light:  #fffbeb; --src-dxf-border:  #fcd34d;
  --src-pdf-bg:   #fce7f3; --src-pdf-fg:   #9d174d; --src-pdf-light:  #fdf2f8; --src-pdf-border:  #f9a8d4;
}

/* PDF Prefill Badge */
.pdf-prefill-badge { display: inline-block; background: var(--src-pdf-bg); color: var(--src-pdf-fg);
                     border-radius: 3px; padding: .05rem .3rem; font-size: .68rem;
                     font-weight: 700; margin-left: .3rem; vertical-align: middle;
                     letter-spacing: .03em; }
.pdf-prefilled  { border-color: var(--src-pdf-border) !important;  background: var(--src-pdf-light) !important; }
.step-prefilled { border-color: var(--src-step-border) !important; background: var(--src-step-light) !important; }
.dxf-prefilled  { border-color: var(--src-dxf-border) !important;  background: var(--src-dxf-light) !important; }

/* Source-Badges (DXF / STEP / PDF) */
.source-badge { display: inline-block; padding: .05rem .3rem; border-radius: 3px;
                font-size: .65rem; font-weight: 700; letter-spacing: .03em;
                vertical-align: middle; margin-right: .3rem; }
.source-badge-dxf  { background: var(--src-dxf-bg);  color: var(--src-dxf-fg); }
.source-badge-step { background: var(--src-step-bg); color: var(--src-step-fg); }
.source-badge-pdf  { background: var(--src-pdf-bg);  color: var(--src-pdf-fg); }

/* Upload: has-files state */
.upload-area.has-files { border-color: var(--src-step-border); background: var(--src-step-light); }

/* File Chips (uploaded files) */
.file-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
              margin-bottom: 1rem; min-height: 0; }
.file-chip { display: inline-flex; align-items: center; gap: .35rem;
             padding: .3rem .65rem; border-radius: 20px; font-size: .82rem;
             font-weight: 500; border: 1px solid var(--gray-200); background: var(--white); }
.file-chip-dxf  { border-color: var(--src-dxf-border);  background: var(--src-dxf-light); }
.file-chip-step { border-color: var(--src-step-border); background: var(--src-step-light); }
.file-chip-pdf  { border-color: var(--src-pdf-border);  background: var(--src-pdf-light); }
.file-chip-icon { font-size: 1rem; }
.file-chip-label { font-weight: 700; font-size: .72rem; text-transform: uppercase;
                   letter-spacing: .04em; color: var(--gray-600); }
.file-chip-name { color: var(--gray-800); max-width: 180px; overflow: hidden;
                  text-overflow: ellipsis; white-space: nowrap; }
.file-chip-remove { background: none; border: none; cursor: pointer; color: var(--gray-400);
                    font-size: .85rem; padding: 0 0 0 .2rem; line-height: 1; }
.file-chip-remove:hover { color: var(--red); }

/* Loading spinner */
.btn-loading { display: inline-flex; align-items: center; gap: .5rem; }
.spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid rgba(255,255,255,.3);
           border-top-color: #fff; border-radius: 50%;
           animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-primary:disabled { opacity: .7; cursor: wait; }
.btn-secondary { background: var(--white); color: var(--blue); border: 1px solid var(--gray-200); }
.btn-secondary:hover { background: var(--gray-100); }

/* Hinweise aus Zeichnung Panel */
.hint-panel { }
.hint-panel-empty { color: var(--gray-400); font-size: .85rem; font-style: italic; }
.hint-item { display: flex; gap: .5rem; align-items: flex-start;
             padding: .45rem .5rem; border-radius: 4px; margin-bottom: .35rem;
             font-size: .85rem; }
.hint-item-ok   { background: var(--src-pdf-light); border-left: 3px solid var(--src-pdf-border); }
.hint-item-warn { background: var(--src-pdf-light); border-left: 3px solid var(--src-pdf-border); }
.hint-item-ext  { background: #fff5f5; border-left: 3px solid var(--red); }
.hint-icon      { flex-shrink: 0; font-size: 1rem; line-height: 1.4; }
.hint-body      { flex: 1; }
.hint-delete-form { flex-shrink: 0; margin: 0; line-height: 1; }
.hint-delete-btn { background: transparent; border: none; cursor: pointer;
                   color: var(--gray-400); font-size: 1.1rem; line-height: 1;
                   padding: 0 .25rem; border-radius: 3px;
                   transition: color .12s, background .12s; }
.hint-delete-btn:hover { color: var(--red); background: #fff5f5; }
.hint-text      { word-break: break-word; }
.hint-badge     { display: inline-block; padding: .05rem .3rem; border-radius: 3px;
                  font-size: .72rem; font-weight: 700; margin-right: .3rem;
                  vertical-align: middle; }
.hint-badge-ag  { background: #e2e8f0; color: var(--gray-800); }
.hint-badge-ext { background: #fed7d7; color: var(--red); }
.hint-badge-typ { background: var(--src-pdf-bg); color: var(--src-pdf-fg); }
.pdf-scanned-notice { background: #fffbeb; border: 1px solid #f6d860;
                       border-radius: var(--radius); padding: .6rem .75rem;
                       font-size: .82rem; color: var(--amber); }

/* Preview+Hinweise nebeneinander */
.preview-hints-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
                     align-items: start; }
@media (max-width: 900px) {
  .preview-hints-row { grid-template-columns: 1fr; }
}

.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: .5rem; }
.info-card { background: var(--white); border-radius: var(--radius); padding: 1rem;
             box-shadow: var(--shadow); text-align: center; }
.info-icon { font-size: 1.75rem; margin-bottom: .5rem; }
.info-card h3 { margin-bottom: .35rem; font-size: .9rem; }
.info-card p  { color: var(--gray-600); font-size: .82rem; }

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn { display: inline-block; padding: .5rem 1.25rem; border-radius: var(--radius);
       border: none; cursor: pointer; font-size: .875rem; font-weight: 600;
       font-family: var(--font); transition: background .15s; }
.btn-primary  { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-lt); }
.btn-large    { padding: .75rem 2rem; font-size: 1rem; }
.btn-export   { background: var(--green); color: #fff; display: block;
                text-align: center; padding: .6rem; margin-top: 1rem;
                border-radius: var(--radius); font-weight: 600; }
.btn-export:hover { background: #276749cc; text-decoration: none; }

/* ─── Freestyle ────────────────────────────────────────────────────────── */
.freestyle-divider { text-align: center; margin: 1.25rem 0 1rem;
                     position: relative; color: var(--gray-400); font-size: .85rem; }
.freestyle-divider::before,
.freestyle-divider::after { content: ""; position: absolute; top: 50%;
                            width: calc(50% - 1.5rem); height: 1px;
                            background: var(--gray-200); }
.freestyle-divider::before { left: 0; }
.freestyle-divider::after  { right: 0; }
.btn-freestyle { display: block; width: 100%; text-align: center;
                 background: var(--white); color: var(--gray-800);
                 border: 2px dashed var(--gray-400); }
.btn-freestyle:hover { border-color: var(--blue); color: var(--blue);
                       background: #f0f4f8; text-decoration: none; }
.freestyle-banner { background: #fffbeb; border: 2px solid #f59e0b; border-radius: var(--radius);
                    padding: .65rem 1rem; margin-bottom: 1rem;
                    display: flex; align-items: center; gap: .5rem;
                    font-weight: 600; color: #92400e; font-size: .9rem; }
.freestyle-banner-icon { font-size: 1.2rem; }
.badge-ok-freestyle { background: #fef3c7; color: #92400e; }
.source-badge-freestyle { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

/* ─── Result-Layout ─────────────────────────────────────────────────────── */
.result-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.left-col, .right-col { display: flex; flex-direction: column; gap: 1rem; }

/* ─── Features Table ────────────────────────────────────────────────────── */
.features-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.features-table th { text-align: left; padding: .4rem .6rem;
                     background: var(--gray-50); color: var(--gray-600);
                     font-weight: 600; border-bottom: 1px solid var(--gray-200); }
.features-table td { padding: .4rem .6rem; border-bottom: 1px solid var(--gray-100); }

/* ─── Badges ────────────────────────────────────────────────────────────── */
.badge { display: inline-block; padding: .1rem .35rem; border-radius: 3px;
         font-size: .75rem; font-weight: 700; }
.badge-ok   { background: var(--src-step-bg); color: var(--src-step-fg); }
.badge-ok-dxf  { background: var(--src-dxf-bg);  color: var(--src-dxf-fg); }
.badge-ok-step { background: var(--src-step-bg); color: var(--src-step-fg); }
.badge-ok-pdf  { background: var(--src-pdf-bg);  color: var(--src-pdf-fg); }
.badge-warn { background: #fefcbf; color: var(--amber); }
.badge-low  { background: var(--gray-100); color: var(--gray-600); }

/* ─── Warnings ──────────────────────────────────────────────────────────── */
.warnings-box { background: #fffbeb; border: 1px solid #f6d860; border-radius: var(--radius);
                padding: .75rem 1rem; margin-bottom: 1rem; font-size: .85rem; }
.warnings-box ul { margin-left: 1.25rem; margin-top: .35rem; }

/* ─── DXF-Qualitätsbox ──────────────────────────────────────────────────── */
.quality-box { border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: 1rem;
               font-size: .85rem; }
.quality-box ul { margin-left: 1.25rem; margin-top: .35rem; }
.quality-score { font-weight: normal; color: inherit; opacity: .7; margin-left: .4rem; font-size: .8rem; }
.quality-ok       { background: var(--src-step-light); border: 1px solid var(--src-step-border); }
.quality-warning  { background: #fffbeb; border: 1px solid #f6d860; }
.quality-critical { background: #fff5f5; border: 1px solid #fc8181; }
.quality-hint     { background: #f5f5ff; border: 1px solid #b0b8e8; }

/* ─── Batch-Review (Multi-Upload Block 8 Sprint 1c) ────────────────────── */
.batch-summary {
  padding: .9rem 1.2rem; margin-bottom: 1.2rem;
  border-radius: var(--radius); background: var(--gray-50);
  border: 1px solid var(--gray-200);
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
}
.batch-summary__count { font-size: 1.05rem; font-weight: 600; color: var(--blue); }
.batch-summary__hint  { color: var(--gray-600); font-size: .9rem; }

.batch-section-title {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--gray-600); margin: 1.4rem 0 .5rem;
}
.batch-section-title--attention { color: var(--amber); }
.batch-safe-summary {
  font-size: .9rem; color: var(--gray-600); padding: .5rem 0;
}

details.batch-safe-details > summary {
  cursor: pointer; padding: .5rem 0;
  color: var(--gray-600); font-size: .9rem;
  list-style: revert;
}
details.batch-safe-details > summary:hover { color: var(--blue); }

.batch-position-card {
  padding: .8rem 1rem; margin-bottom: .6rem;
  border-radius: var(--radius); background: var(--white);
  border-left: 4px solid var(--gray-200);
}
.confidence-high      { border-left-color: var(--green);  background: #f0fdf4; }
.confidence-medium    { border-left-color: var(--amber);  background: #fffbeb; }
.confidence-unmatched { border-left-color: var(--red);    background: #fff5f5; }

.batch-position-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .75rem; margin-bottom: .5rem;
}
.batch-position-title { font-weight: 600; color: var(--blue); }
.batch-position-id    { color: var(--gray-400); font-size: .8rem; margin-right: .3rem; }
.batch-position-badge {
  font-size: .7rem; padding: .1rem .55rem; border-radius: 10px;
  text-transform: uppercase; letter-spacing: .03em; font-weight: 600;
  background: var(--white);
}
.confidence-high      .batch-position-badge { color: var(--green); border: 1px solid var(--green); }
.confidence-medium    .batch-position-badge { color: var(--amber); border: 1px solid var(--amber); }
.confidence-unmatched .batch-position-badge { color: var(--red);   border: 1px solid var(--red); }

.batch-position-files {
  display: flex; flex-direction: column; gap: .3rem;
  margin: .4rem 0 .65rem;
}
.batch-file-row {
  display: flex; align-items: center; gap: .55rem;
  padding: .3rem .55rem; border-radius: 4px;
  background: rgba(255, 255, 255, .65);
  font-size: .88rem;
}
.batch-file-type {
  font-size: .68rem; font-weight: 700; padding: .12rem .42rem;
  border-radius: 3px; text-transform: uppercase;
  min-width: 2.6rem; text-align: center;
}
.batch-file-type-dxf  { background: var(--src-dxf-bg);  color: var(--src-dxf-fg); }
.batch-file-type-step { background: var(--src-step-bg); color: var(--src-step-fg); }
.batch-file-type-pdf  { background: var(--src-pdf-bg);  color: var(--src-pdf-fg); }
.batch-file-name { flex: 1; font-family: monospace; font-size: .82rem; color: var(--gray-800);
                   word-break: break-all; }

.batch-position-actions {
  display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem;
  align-items: center;
}
.batch-position-actions select,
.batch-position-actions button {
  font-size: .8rem; padding: .25rem .55rem; border-radius: 4px;
  border: 1px solid var(--gray-200); background: var(--white); cursor: pointer;
}
.batch-position-actions button:hover { background: var(--gray-50); }
.batch-position-actions .btn-link {
  background: none; border: none; color: var(--blue-lt);
  text-decoration: underline; padding: .2rem .3rem;
}

/* Smart-Merge-Vorschlag (Sprint 3) — unverbindlicher Hinweis, kein Auto-Merge */
.batch-merge-suggestion {
  margin-top: .5rem; padding: .45rem .65rem;
  border-radius: 6px; background: #eff6ff; border: 1px dashed #bfdbfe;
  font-size: .82rem; color: var(--gray-700);
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
}
.batch-merge-suggestion code {
  background: var(--white); border: 1px solid #bfdbfe;
  border-radius: 4px; padding: 0 .3rem; font-size: .8rem;
}
.batch-merge-suggestion .btn-mini { margin-left: auto; }

/* Reupload einer Position aus dem Skip-Through-Banner (Sprint 3) */
.batch-reupload { margin-top: .5rem; font-size: .82rem; }
.batch-reupload > summary { cursor: pointer; color: var(--blue-lt); }
.batch-reupload__form {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  margin-top: .5rem;
}

/* Drag-&-Drop im Review (Sprint 3) */
.batch-drag-hint {
  font-size: .8rem; color: var(--gray-600); margin: .25rem 0 1rem;
}
.batch-position-card[draggable="true"] { cursor: grab; }
.batch-file-row[draggable="true"] { cursor: grab; }
.batch-drag-handle { color: var(--gray-400); user-select: none; }
.dragging { opacity: .45; }
.drop-target { outline: 2px dashed var(--blue); outline-offset: 2px; }
.batch-dropzone-new {
  margin-top: 1rem; padding: .9rem 1rem; text-align: center;
  border: 2px dashed var(--gray-300); border-radius: var(--radius);
  color: var(--gray-600); font-size: .85rem; background: var(--gray-50);
}
.batch-dropzone-new.drop-target {
  border-color: var(--blue); color: var(--blue); background: #eff6ff;
}

/* 3D-Viewer (Stufe 1) */
.viewer3d-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: .25rem;
}
.viewer3d {
  position: relative;
  width: 100%; height: 360px;
  border: 1px solid var(--gray-200); border-radius: var(--radius);
  overflow: hidden; background: #f3f4f6; cursor: grab;
}
.viewer3d:active { cursor: grabbing; }
.viewer3d canvas { display: block; }

/* Angeheftet: schwebendes Panel, bleibt beim Scrollen sichtbar */
.viewer3d.is-pinned {
  position: fixed; right: 1rem; bottom: 1rem;
  width: 360px; height: 300px; z-index: 1000;
  border-color: var(--blue);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.viewer3d-unpin {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  display: none;
  width: 26px; height: 26px; padding: 0; line-height: 1;
  border: none; border-radius: 4px; cursor: pointer;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: .9rem;
}
.viewer3d.is-pinned .viewer3d-unpin { display: block; }

.batch-proceed-bar {
  margin-top: 1.5rem; padding: 1rem 1.25rem;
  border-radius: var(--radius); background: var(--blue); color: var(--white);
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
}
.batch-proceed-bar__hint { font-size: .88rem; opacity: .85; }
.batch-proceed-bar button {
  background: var(--white); color: var(--blue); border: none;
  padding: .6rem 1.4rem; border-radius: 4px; font-weight: 600;
  cursor: pointer; font-size: .95rem;
}
.batch-proceed-bar button:disabled {
  background: var(--gray-200); color: var(--gray-600); cursor: not-allowed;
}

/* ─── Batch Calculate-Phase (Sprint 2) ──────────────────────────────────── */
.batch-calc-progress { margin: 1rem 0 1.5rem; }
.batch-calc-progress__label { font-size: .9rem; color: var(--gray-600); margin-bottom: .4rem; }
.batch-calc-progress__count { font-weight: 600; color: var(--blue); }
.batch-calc-bar {
  height: 10px; border-radius: 999px; background: var(--gray-200); overflow: hidden;
}
.batch-calc-bar__fill {
  height: 100%; width: 0; background: var(--blue);
  transition: width .25s ease;
}
.batch-calc-list { list-style: none; padding: 0; margin: 0; display: flex;
  flex-direction: column; gap: .35rem; }
.batch-calc-row {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem;
  border: 1px solid var(--gray-200); border-radius: var(--radius);
  font-size: .85rem; color: var(--gray-800);
}
.batch-calc-row__icon { width: 1.2rem; text-align: center; }
.batch-calc-row__name { flex: 1; font-family: monospace; font-size: .82rem; }
.batch-calc-row[data-state="ok"]    { border-left: 3px solid var(--green); }
.batch-calc-row[data-state="error"] { border-left: 3px solid var(--red); background: #fff5f5; }
.batch-calc-row[data-state="running"] { border-left: 3px solid var(--blue); }
.batch-calc-done { margin-top: 1.25rem; }

/* ─── Form ──────────────────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.form-group { display: flex; flex-direction: column; gap: .25rem; }
.form-group label { font-size: .8rem; font-weight: 600; color: var(--gray-600); }
.form-group input, .form-group select {
  padding: .4rem .6rem; border: 1px solid var(--gray-200); border-radius: var(--radius);
  font-size: .875rem; font-family: var(--font); color: var(--gray-800);
  background: var(--white); }
.form-group input:focus, .form-group select:focus {
  outline: 2px solid var(--blue-lt); outline-offset: 1px; }

/* ─── AG Table ──────────────────────────────────────────────────────────── */
.ag-table { width: 100%; border-collapse: collapse; font-size: .82rem; margin-top: .5rem; }
.ag-table th { text-align: left; padding: .4rem .5rem; background: var(--gray-50);
               color: var(--gray-600); font-weight: 600; border-bottom: 1px solid var(--gray-200);
               font-size: .78rem; }
.ag-table td { padding: .35rem .5rem; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
.ag-table input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; }
.time-input { width: 70px; padding: .25rem .4rem; border: 1px solid var(--gray-200);
              border-radius: 3px; font-size: .82rem; text-align: right; }
.ag-nr { display: inline-block; background: var(--gray-100); border-radius: 3px;
         padding: .05rem .3rem; font-size: .75rem; color: var(--gray-600);
         font-family: monospace; margin-right: .25rem; }

/* ─── Kalkulation ───────────────────────────────────────────────────────── */
.kalk-section { margin-bottom: 1rem; }
.kalk-section-title { font-size: .75rem; font-weight: 700; text-transform: uppercase;
                      letter-spacing: .06em; color: var(--gray-400);
                      margin-bottom: .35rem; }
.kalk-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.kalk-table th { text-align: left; padding: .4rem .5rem; color: var(--gray-600);
                 font-weight: 600; border-bottom: 1px solid var(--gray-200); font-size: .78rem; }
.kalk-table td { padding: .35rem .5rem; border-bottom: 1px solid var(--gray-100); }
.kalk-table .cost  { text-align: right; font-family: monospace; white-space: nowrap; }
.kalk-table .overhead-row td { color: var(--gray-600); font-size: .82rem; }
.kalk-table .subtotal-row td { background: var(--gray-50); font-weight: 600;
                                border-top: 1px solid var(--gray-200); }
.kalk-table .total-row td { background: #ebf4ff; font-weight: 700; font-size: .95rem;
                             border-top: 2px solid var(--blue); }
.summary-table .total-row td { font-size: 1rem; }

/* ─── Price Card ────────────────────────────────────────────────────────── */
.price-card { background: var(--blue); color: #fff; }
.price-header { display: flex; justify-content: space-between; align-items: flex-start; }
.price-label  { font-size: .78rem; opacity: .7; text-transform: uppercase;
                letter-spacing: .05em; margin-bottom: .2rem; }
.price-total  { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }
.price-each   { font-size: 1.2rem; font-weight: 600; }
.price-per    { text-align: right; }

/* ─── Staffelpreise ────────────────────────────────────────────────────── */
.staffel-card { padding-bottom: .75rem; }
.staffel-card h2 { margin-bottom: .5rem; }
.staffel-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.staffel-table th { text-align: left; padding: .35rem .5rem; border-bottom: 2px solid var(--gray-200);
                    font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-400); }
.staffel-table td { padding: .35rem .5rem; border-bottom: 1px solid var(--gray-100); }
.staffel-table th.cost,
.staffel-table td.cost { text-align: right; font-family: monospace; }
.staffel-current { background: #ebf8ff; font-weight: 600; }
.staffel-current td { border-bottom-color: var(--blue-lt); }
.staffel-edit summary { font-size: .8rem; color: var(--gray-400); }

/* ─── Hinweise zur Position (extern/intern) ────────────────────────────── */
.hinweise-card { padding-bottom: .75rem; }
.hinweise-card h2 { margin-bottom: .6rem; }
.hint-toggle { border: 1px solid var(--gray-200); border-radius: 6px; padding: .5rem .7rem;
               margin-bottom: .5rem; background: #fff; }
.hint-toggle[open] { background: #fafbfc; }
.hint-toggle summary { display: flex; justify-content: space-between; align-items: center;
                       list-style: none; cursor: pointer; gap: .5rem; color: var(--gray-800);
                       font-size: .85rem; }
.hint-toggle summary::-webkit-details-marker { display: none; }
.hint-toggle summary::before { content: "▸"; color: var(--gray-400); font-size: .75rem;
                               transition: transform .12s; flex-shrink: 0; }
.hint-toggle[open] summary::before { transform: rotate(90deg); }
.hint-toggle-label { flex: 1; }
.hint-toggle-label strong { display: block; color: var(--gray-800); font-weight: 600; }
.hint-toggle-sub { display: block; font-size: .72rem; color: var(--gray-400); font-weight: 400; margin-top: .1rem; }
.hint-badge { font-size: .68rem; padding: .1rem .45rem; border-radius: 10px; font-weight: 600;
              text-transform: uppercase; letter-spacing: .03em; flex-shrink: 0; }
.hint-badge-extern { background: #ebf8ff; color: var(--blue-lt); }
.hint-badge-intern { background: #f3e5f5; color: #6a1b9a; }
.hinweis-textarea { width: 100%; margin-top: .5rem; padding: .45rem .55rem;
                    border: 1px solid var(--gray-200); border-radius: 4px; font: inherit;
                    font-size: .85rem; resize: vertical; min-height: 2.4rem; box-sizing: border-box; }
.hinweis-textarea:focus { outline: 2px solid var(--blue-lt); outline-offset: 1px; border-color: var(--blue-lt); }
.hinweis-extern { border-left: 3px solid var(--blue-lt); }
.hinweis-intern { border-left: 3px solid #ce93d8; }

/* ─── Utilities ─────────────────────────────────────────────────────────── */
.hint  { color: var(--gray-400); font-size: .8rem; }
.mono  { font-family: monospace; }
.prio-a { color: var(--green);  font-weight: 600; font-size: .8rem; }
.prio-b { color: var(--amber);  font-size: .8rem; }
.prio-c { color: var(--gray-400); font-size: .8rem; }

details summary { cursor: pointer; color: var(--blue-lt); font-size: .85rem; }

/* ─── Login-Seite ───────────────────────────────────────────────────────── */
.login-shell   { display: flex; justify-content: center; align-items: flex-start;
                 padding: 3rem 1rem; }
.login-card    { width: 100%; max-width: 380px; background: var(--white);
                 border: 1px solid var(--gray-200); border-radius: var(--radius);
                 box-shadow: var(--shadow); padding: 2rem; }
.login-card h1 { margin-bottom: .25rem; }
.login-hint    { color: var(--gray-600); font-size: .85rem; margin-bottom: 1.5rem; }
.login-form    { display: flex; flex-direction: column; gap: 1rem; }
.login-form .form-group input {
                 padding: .5rem .75rem; border: 1px solid var(--gray-200);
                 border-radius: var(--radius); font: inherit; font-size: .95rem; }
.login-form .form-group input:focus {
                 outline: none; border-color: var(--blue-lt);
                 box-shadow: 0 0 0 2px rgba(44, 82, 130, .15); }
.login-submit  { margin-top: .5rem; width: 100%; }

/* User-Block im Header (rechts neben dem Nav) */
.header-user      { display: inline-flex; align-items: center; gap: .75rem;
                    margin-left: 1.5rem; padding-left: 1.5rem;
                    border-left: 1px solid rgba(255,255,255,.18); }
.header-user__email { color: rgba(255,255,255,.85); font-size: .8rem; }
.header-logout-form { margin: 0; }
.header-logout-btn  { background: transparent; color: rgba(255,255,255,.85);
                      border: 1px solid rgba(255,255,255,.25); padding: .25rem .7rem;
                      border-radius: var(--radius); font-size: .8rem; cursor: pointer;
                      font-family: inherit; }
.header-logout-btn:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .result-layout { grid-template-columns: 1fr; }
  .info-grid     { grid-template-columns: 1fr; }
  .form-grid     { grid-template-columns: 1fr; }
}