/**
 * STR Aufstockungskonfigurator — Styles
 * MR-Look (Enfold-kompatibel, neutral): Primärblau #1c3a6f, CTA-Grün #2e7d32.
 * Prefix .aufk- — keine globalen Selektoren, Breakpoint 820px.
 */

#str-aufk {
  font-size: 14px;
  color: #1a1a1a;
  line-height: 1.5;
  max-width: 100%;
}
#str-aufk *, #str-aufk *::before, #str-aufk *::after { box-sizing: border-box; }

/* ------------------------------------------------------ Typo / Basis -- */
#str-aufk .aufk-h {
  color: #1c3a6f;
  font-size: 19px;
  margin: 0 0 6px;
  line-height: 1.3;
}
#str-aufk .aufk-lead {
  color: #555;
  font-size: 13px;
  margin: 0 0 14px;
}
#str-aufk .aufk-hint {
  background: #f0f3f8;
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 13px;
  color: #333;
  margin: 10px 0;
}
#str-aufk .aufk-hint-warn {
  background: #fdf1ef;
  border-left: 4px solid #c0392b;
  color: #7a2417;
}
#str-aufk .aufk-hint a { color: #1c3a6f; font-weight: 600; }

/* ---------------------------------------------------------- Breadcrumb */
#str-aufk .aufk-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #777;
  margin: 0 0 16px;
}
#str-aufk .aufk-crumb { padding: 3px 2px; }
#str-aufk .aufk-crumb-active { color: #1c3a6f; font-weight: 700; }
#str-aufk .aufk-crumb-link {
  background: none;
  border: none;
  padding: 3px 2px;
  font-size: 12px;
  color: #1c3a6f;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
}
#str-aufk .aufk-crumb-link:hover { color: #122850; }
#str-aufk .aufk-crumb-sep { color: #bbb; }

/* ------------------------------------------------------ Modell-Filter */
#str-aufk .aufk-filter {
  background: #f5f7fb;
  border: 1px solid #dde3ee;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#str-aufk .aufk-filter-search {
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: 14px;
  border: 1px solid #c3ccdd;
  border-radius: 6px;
  background: #fff;
  color: #1a1a1a;
}
#str-aufk .aufk-filter-search:focus { border-color: #1c3a6f; outline: none; }
#str-aufk .aufk-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#str-aufk .aufk-filter-select {
  flex: 1 1 160px;
  min-width: 0;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  border: 1px solid #c3ccdd;
  border-radius: 6px;
  background: #fff;
  color: #1a1a1a;
  cursor: pointer;
}
#str-aufk .aufk-filter-select:focus { border-color: #1c3a6f; outline: none; }
#str-aufk .aufk-filter-select option:disabled,
#str-aufk .aufk-filter-select option.aufk-opt-disabled { color: #b6bdc9; }
#str-aufk .aufk-filter-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#str-aufk .aufk-filter-count { font-size: 12px; color: #555; }
#str-aufk .aufk-filter-reset {
  font: inherit;
  font-size: 12px;
  color: #1c3a6f;
  background: none;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
  text-decoration: underline;
}
#str-aufk .aufk-filter-reset:hover { color: #14294f; }
#str-aufk .aufk-empty {
  grid-column: 1 / -1;
  margin: 6px 0;
  padding: 16px;
  text-align: center;
  color: #666;
  background: #f7f8fa;
  border: 1px dashed #cfd6e2;
  border-radius: 8px;
  font-size: 13px;
}

/* -------------------------------------------------------- Kachel-Grid */
#str-aufk .aufk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}
#str-aufk .aufk-grid-compact {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  margin-top: 10px;
}
#str-aufk .aufk-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: #fff;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  font: inherit;
  color: inherit;
  width: 100%;
}
#str-aufk .aufk-tile:hover,
#str-aufk .aufk-tile:focus-visible {
  border-color: #1c3a6f;
  box-shadow: 0 2px 8px rgba(28, 58, 111, 0.12);
  outline: none;
}
#str-aufk .aufk-tile-title {
  font-weight: 700;
  color: #1c3a6f;
  font-size: 14px;
  line-height: 1.3;
}
#str-aufk .aufk-tile-sub { font-size: 12px; color: #777; }
/* Hersteller-Raster: 2 Reihen à 4 Kacheln auf Desktop (8 Hersteller) */
#str-aufk .aufk-grid-hersteller {
  grid-template-columns: repeat(4, 1fr);
}
#str-aufk .aufk-tile-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  width: 100%;
  margin-bottom: 6px;
}
#str-aufk .aufk-tile-logo img {
  /* FESTE Höhe + !important: Enfold/Core setzen img height:auto (responsive)
     und übersteuern sonst — SVG wird riesig, kleine PNGs bleiben klein.
     Alle Marken-Logos exakt gleich hoch (Manu 12.07.). */
  height: 56px !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: 56px !important;
  object-fit: contain;
}
#str-aufk .aufk-tile-img {
  display: block;
  width: 100%;
  height: 120px;
  margin-bottom: 4px;
}
#str-aufk .aufk-tile-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
#str-aufk .aufk-tile-img-ph {
  display: block;
  width: 100%;
  height: 100%;
  background: #eef1f6;
  border-radius: 4px;
}

/* ----------------------------------------------------------- Hilfe-Box */
#str-aufk .aufk-help {
  border: 1px solid #e3c983;
  background: #fff8e1;
  border-radius: 6px;
  margin: 4px 0 18px;
}
#str-aufk .aufk-help-summary {
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 700;
  color: #5a4400;
  font-size: 14px;
  list-style: none;
}
#str-aufk .aufk-help-summary::-webkit-details-marker { display: none; }
#str-aufk .aufk-help-summary::before {
  content: '▸ ';
  color: #b98a1f;
}
#str-aufk .aufk-help[open] .aufk-help-summary::before { content: '▾ '; }
#str-aufk .aufk-help-body { padding: 0 16px 16px; }
#str-aufk .aufk-help-list {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: 13px;
  color: #4a3d10;
}
#str-aufk .aufk-help-list li { margin-bottom: 6px; }
#str-aufk .aufk-help-lookup-lead {
  font-size: 13px;
  font-weight: 600;
  color: #4a3d10;
  margin: 0 0 8px;
}
/* Prominentes Such-Panel in Schritt 1 */
#str-aufk .aufk-lookup-panel {
  background: #eef3fb;
  border: 2px solid #1c3a6f;
  border-radius: 8px;
  padding: 16px 18px;
  margin: 0 0 14px;
}
#str-aufk .aufk-lookup-panel-h {
  margin: 0 0 4px;
  color: #1c3a6f;
  font-size: 16px;
  line-height: 1.3;
}
#str-aufk .aufk-lookup-panel-lead {
  margin: 0 0 10px;
  font-size: 13px;
  color: #444;
}
#str-aufk .aufk-lookup-panel .aufk-lookup-input { border-color: #1c3a6f; }
#str-aufk .aufk-lookup-or {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
}

#str-aufk .aufk-lookup-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
#str-aufk .aufk-lookup-input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid #b9a15c;
  border-radius: 4px;
  font-size: 14px;
  background: #fff;
  color: #1a1a1a;
}
#str-aufk .aufk-lookup-input:focus {
  border-color: #1c3a6f;
  outline: none;
  box-shadow: 0 0 0 2px rgba(28, 58, 111, 0.15);
}
#str-aufk .aufk-lookup-result { margin-top: 10px; }
#str-aufk .aufk-lookup-hint { font-size: 13px; color: #4a3d10; margin: 0 0 6px; }
#str-aufk .aufk-lookup-none {
  font-size: 13px;
  color: #4a3d10;
  background: #fff;
  border: 1px solid #e3c983;
  border-radius: 4px;
  padding: 10px 12px;
  margin: 0;
}
#str-aufk .aufk-lookup-none a { color: #1c3a6f; font-weight: 600; }

/* --------------------------------------------------------- Modell-Kopf */
#str-aufk .aufk-modelhead {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 12px;
}
#str-aufk .aufk-modelhead-img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  border: 1px solid #eee;
  border-radius: 6px;
  background: #fff;
  flex: 0 0 auto;
}
#str-aufk .aufk-modelhead-txt .aufk-lead { margin-bottom: 0; }

/* -------------------------------------------------------------- Notice */
#str-aufk .aufk-notice {
  background: #fff8e1;
  border-left: 4px solid #f6b73c;
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 13px;
  color: #4a3d10;
  margin: 0 0 16px;
}

/* ---------------------------------------------------------------- Tabs */
#str-aufk .aufk-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #d8dee8;
  margin: 0 0 16px;
}
#str-aufk .aufk-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  font-family: inherit;
}
#str-aufk .aufk-tab:hover { color: #1c3a6f; }
#str-aufk .aufk-tab-active {
  color: #1c3a6f;
  border-bottom-color: #1c3a6f;
}

/* ------------------------------------------------------------ Dropdowns */
#str-aufk .aufk-selects {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
#str-aufk .aufk-select-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  min-width: 220px;
}
#str-aufk .aufk-select {
  padding: 9px 12px;
  border: 1px solid #b8c0ce;
  border-radius: 4px;
  font-size: 14px;
  background: #fff;
  color: #1a1a1a;
  max-width: 100%;
}
#str-aufk .aufk-select:focus {
  border-color: #1c3a6f;
  outline: none;
  box-shadow: 0 0 0 2px rgba(28, 58, 111, 0.15);
}
#str-aufk .aufk-selects-arrow {
  font-size: 18px;
  color: #1c3a6f;
  padding-bottom: 8px;
}

/* -------------------------------------------------------------- Tabellen */
#str-aufk .aufk-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 14px;
}
#str-aufk .aufk-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 13px;
}
#str-aufk .aufk-table th,
#str-aufk .aufk-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  text-align: left;
  vertical-align: middle;
}
#str-aufk .aufk-table th {
  background: #f0f3f8;
  font-size: 12px;
  color: #444;
  font-weight: 700;
}
#str-aufk .aufk-td-qty { text-align: center; white-space: nowrap; width: 130px; }
#str-aufk .aufk-td-price { text-align: right; white-space: nowrap; width: 120px; }
#str-aufk .aufk-td-sum { text-align: right; white-space: nowrap; width: 130px; font-weight: 600; }
#str-aufk .aufk-td-act { text-align: center; width: 180px; }
#str-aufk .aufk-total-label { text-align: right; font-weight: 700; color: #1c3a6f; }
#str-aufk .aufk-total-val { font-size: 16px; color: #1c3a6f; }
#str-aufk tfoot td { background: #f0f8f0; border-bottom: none; }

/* -------------------------------------------------------- Komponenten */
#str-aufk .aufk-comp {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
}
#str-aufk .aufk-comp-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border: 1px solid #eee;
  border-radius: 4px;
  background: #fff;
  flex: 0 0 auto;
}
#str-aufk .aufk-comp-txt { min-width: 0; }
#str-aufk .aufk-comp-name {
  display: block;
  font-weight: 600;
  color: #1c3a6f;
  text-decoration: none;
}
#str-aufk a.aufk-comp-name:hover { text-decoration: underline; }
#str-aufk .aufk-comp-meta {
  display: block;
  font-size: 11px;
  color: #777;
  margin-top: 2px;
}
#str-aufk .aufk-oos {
  display: block;
  font-size: 11px;
  color: #c0392b;
  font-weight: 700;
  margin-top: 2px;
}

/* -------------------------------------------------------------- Stepper */
#str-aufk .aufk-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #1c3a6f;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  height: 38px;
}
#str-aufk .aufk-step-btn {
  width: 32px;
  background: #1c3a6f;
  border: none;
  border-radius: 0;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
#str-aufk .aufk-step-btn:hover { background: #122850; }
/* !important + input-Element im Selektor: Enfold stylt input[type=number]
   global (Border/Schatten/Höhe) und würde das Feld sonst optisch teilen. */
#str-aufk .aufk-stepper input.aufk-qty-input {
  width: 48px !important;
  min-height: 0 !important;
  height: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 0 !important;
  color: #1a1a1a;
  background: #fff !important;
  -moz-appearance: textfield;
  appearance: textfield;
}
#str-aufk .aufk-stepper input.aufk-qty-input::-webkit-outer-spin-button,
#str-aufk .aufk-stepper input.aufk-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#str-aufk .aufk-stepper input.aufk-qty-input:focus { outline: none; background: #f7faff !important; }

/* -------------------------------------------------------------- Buttons */
#str-aufk .aufk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: background 0.15s;
}
#str-aufk .aufk-btn:disabled { opacity: 0.55; cursor: not-allowed; }
#str-aufk .aufk-btn-primary { background: #1c3a6f; color: #fff; }
#str-aufk .aufk-btn-primary:hover:not(:disabled) { background: #122850; }
#str-aufk .aufk-btn-cta {
  background: #2e7d32;
  color: #fff;
  font-size: 14px;
  padding: 12px 24px;
}
#str-aufk .aufk-btn-cta:hover:not(:disabled) { background: #245d28; }
#str-aufk .aufk-btn-add { background: #2e7d32; color: #fff; padding: 8px 14px; }
#str-aufk .aufk-btn-add:hover:not(:disabled) { background: #245d28; }
#str-aufk .aufk-btn-ghost {
  background: #eef1f6;
  color: #1c3a6f;
  border: 1px solid #c6cede;
}
#str-aufk .aufk-btn-ghost:hover { background: #dfe5ef; }
#str-aufk .aufk-cta-row {
  display: flex;
  justify-content: flex-end;
  margin: 6px 0 4px;
}

/* ---------------------------------------------------- Kompat-Checkbox */
#str-aufk .aufk-kompat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f0f3f8;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 13px;
  color: #333;
  margin: 4px 0 12px;
  cursor: pointer;
}
#str-aufk .aufk-kompat input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: #1c3a6f;
  cursor: pointer;
}

/* -------------------------------------------------- Loading / Fehler -- */
#str-aufk .aufk-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 8px;
  color: #555;
  font-size: 14px;
}
#str-aufk .aufk-spinner {
  width: 18px;
  height: 18px;
  border: 3px solid #d8dee8;
  border-top-color: #1c3a6f;
  border-radius: 50%;
  animation: aufk-spin 0.8s linear infinite;
  flex: 0 0 auto;
}
@keyframes aufk-spin { to { transform: rotate(360deg); } }
#str-aufk .aufk-error {
  background: #fdf1ef;
  border-left: 4px solid #c0392b;
  border-radius: 4px;
  padding: 16px;
  font-size: 14px;
  color: #7a2417;
}
#str-aufk .aufk-error p { margin: 0 0 10px; }
#str-aufk .aufk-error-contact { font-size: 12px; margin: 10px 0 0 !important; }
#str-aufk .aufk-error-contact a { color: #1c3a6f; font-weight: 600; }

/* ----------------------------------------------------------------- Toast */
.aufk-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 520px);
  padding: 13px 18px;
  border-radius: 6px;
  font-size: 14px;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  animation: aufk-toast-in 0.25s ease-out;
}
@keyframes aufk-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.aufk-toast-ok { background: #2e7d32; }
.aufk-toast-err { background: #c0392b; }
.aufk-toast-link {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}
.aufk-toast-link:hover { color: #eaf5ea; }

/* ------------------------------------------------------ Mobile ≤ 820px */
@media (max-width: 820px) {
  #str-aufk .aufk-grid,
  #str-aufk .aufk-grid-compact {
    grid-template-columns: 1fr;
  }
  #str-aufk .aufk-tile { flex-direction: row; align-items: center; gap: 12px; }
  #str-aufk .aufk-tile-img { width: 72px; height: 72px; margin-bottom: 0; flex: 0 0 auto; }
  #str-aufk .aufk-tile-title { flex: 1 1 auto; }
  #str-aufk .aufk-tile-hersteller { flex-direction: column; align-items: flex-start; gap: 4px; }

  #str-aufk .aufk-selects { flex-direction: column; align-items: stretch; gap: 8px; }
  #str-aufk .aufk-select-label { min-width: 0; }
  #str-aufk .aufk-select { width: 100%; }
  #str-aufk .aufk-selects-arrow { display: none; }

  #str-aufk .aufk-filter-row { flex-direction: column; }
  #str-aufk .aufk-filter-select { flex: 1 1 auto; width: 100%; }

  /* Tabellen scrollen horizontal im eigenen Container (min-width bleibt) */
  #str-aufk .aufk-scroll { border: 1px solid #eee; border-radius: 6px; }

  #str-aufk .aufk-cta-row { justify-content: stretch; }
  #str-aufk .aufk-cta-row .aufk-btn { width: 100%; }

  #str-aufk .aufk-tabs { width: 100%; }
  #str-aufk .aufk-tab { flex: 1 1 50%; padding: 10px 6px; font-size: 13px; }

  #str-aufk .aufk-modelhead { align-items: flex-start; }
  #str-aufk .aufk-modelhead-img { width: 64px; height: 64px; }

  #str-aufk .aufk-lookup-row { flex-direction: column; }
  /* In der Spalten-Anordnung darf die 220px-flex-basis NICHT zur Höhe werden */
  #str-aufk .aufk-lookup-input { flex: 0 0 auto; width: 100%; }
  #str-aufk .aufk-lookup-row .aufk-btn { width: 100%; }

  .aufk-toast { bottom: 12px; flex-wrap: wrap; }
}