/* =========================================================
   avitech catalog.css
   Universelle Basis fuer Katalogseiten, Occasionen,
   Mietlisten, Setupdatenblaetter und Wiki-/Infoseiten.

   Ziel:
   - Einheitliche Gestaltung fuer neue Katalog- und Wiki-Seiten.
   - Kompatibilitaet zu bestehenden Occasion-Seiten mit .oc-* Klassen.
   - Subsites duerfen weiterhin eigene Zusatz-Styles verwenden.
   - Keine globalen Eingriffe in body, main, header, footer usw.

   Einbindung:
   <link rel="stylesheet" href="../../assets/css/catalog.css">
   nach site.css und subcards.css laden.
   ========================================================= */

/* =========================================================
   1. Grundcontainer
   ========================================================= */

.catalog-page,
.setup-page,
.mt4-main,
.mt4-detail,
.mt4-wiki {
  max-width: 1120px;
  margin: 0 auto;
}

.mt4-wiki,
.mt4-detail {
  max-width: 1150px;
}

.catalog-intro,
.mt4-hero {
  margin-bottom: 2rem;
}

.catalog-page .lead,
.setup-page .lead,
.mt4-main .lead,
.mt4-detail .lead,
.mt4-wiki .lead,
.mt4-hero .lead,
.page-head .lead {
  font-size: 1.05rem;
  color: #444;
  margin-bottom: 1.4rem;
}

.mt4-hero .lead {
  font-size: 1.08rem;
}

/* =========================================================
   2. Ueberschriften innerhalb Katalog-/Setupbereichen
   ========================================================= */

.catalog-page h1,
.setup-page h1,
.mt4-main h1,
.mt4-detail h1,
.mt4-wiki h1 {
  color: #173a57;
  line-height: 1.2;
}

.mt4-wiki h1,
.mt4-detail h1 {
  border-bottom: 3px solid #173a57;
  padding-bottom: 10px;
}

.catalog-page h2,
.catalog-page h3,
.setup-page h2,
.setup-page h3,
.mt4-main h2,
.mt4-main h3,
.mt4-detail h2,
.mt4-detail h3,
.mt4-wiki h2,
.mt4-wiki h3 {
  color: #173a57;
  line-height: 1.2;
}

.catalog-group h2,
.catalog-family h3,
.setup-section h2,
.mt4-section h2,
.mt4-detail .section h2,
.mt4-wiki .section h2,
.mt4-wiki h2 {
  margin-top: 0;
}

.catalog-family h3,
.mt4-section h3 {
  margin-bottom: .35rem;
}

/* =========================================================
   3. Abschnittsstruktur
   ========================================================= */

.catalog-group,
.catalog-family,
.setup-section,
.mt4-section,
.mt4-detail .section,
.mt4-wiki .section,
.section {
  margin: 2rem 0;
}

.catalog-group {
  margin: 2.2rem 0;
}

.catalog-group h2 {
  margin-bottom: .35rem;
}

.catalog-group > p,
.catalog-family p {
  color: #444;
}

.catalog-family {
  margin: 1.4rem 0 1rem 0;
  padding-top: 1rem;
  border-top: 1px solid #e9eef7;
}

.catalog-family .family-meta,
.subline,
.catalog-small,
.small,
.caption,
.source-list,
.moto-price-note,
.oc-price__note {
  color: #555;
}

.catalog-family .family-meta {
  font-size: .96rem;
}

.catalog-small,
.small,
.caption,
.moto-price-note,
.oc-price__note {
  font-size: .92rem;
}

.source-list li {
  margin-bottom: 6px;
}

/* =========================================================
   4. Neue Katalogtabellen
   ========================================================= */

.catalog-table-wrap,
.mt4-catalog-wrap,
.table-wrap {
  overflow-x: auto;
}

.catalog-table,
.setup-table,
.mt4-catalog,
.mt4-detail table,
.mt4-wiki table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.2rem 0;
  background: #fff;
  font-size: .94rem;
}

.catalog-table th,
.catalog-table td,
.setup-table th,
.setup-table td,
.mt4-catalog th,
.mt4-catalog td,
.mt4-detail th,
.mt4-detail td,
.mt4-wiki th,
.mt4-wiki td {
  border: 1px solid #e2e9f3;
  padding: .68rem .75rem;
  vertical-align: top;
  text-align: left;
}

.mt4-wiki th,
.mt4-wiki td,
.mt4-detail th,
.mt4-detail td {
  border-color: #ccc;
  padding: 8px 10px;
}

.catalog-table th,
.setup-table th,
.mt4-catalog th,
.mt4-detail th,
.mt4-wiki th {
  background: #f4f7ff;
  color: #222;
}

.mt4-wiki th,
.mt4-detail th {
  background: #e8eef4;
}

.catalog-table td.price,
.mt4-catalog td.price {
  white-space: nowrap;
  text-align: right;
  font-weight: 600;
}

.catalog-table td.position,
.mt4-catalog td.position {
  white-space: nowrap;
}

.catalog-table .headline,
.mt4-catalog .headline,
.headline {
  font-weight: 700;
}

.catalog-table .subline,
.mt4-catalog .subline,
.subline {
  margin-top: .15rem;
  color: #555;
  font-size: .95em;
}

.mt4-list {
  margin-top: .75rem;
}

/* =========================================================
   5. Legacy Occasion-Tabellen (.oc-*)
   Kompatibilitaet fuer bestehende Motorrad-/Occasion-Seiten.
   ========================================================= */

.oc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 1rem;
  background: transparent;
}

.oc-table thead th {
  text-align: left;
  background: #f8fafc;
  color: #111;
  font-weight: 600;
  padding: .6rem .9rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}

.oc-table tbody tr {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}

.oc-table tbody tr:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,0,0,.12);
}

.oc-table tbody td {
  padding: 1rem;
  vertical-align: top;
  border-bottom: none;
}

.oc-title {
  font-weight: 600;
  margin-bottom: .25rem;
}

.oc-desc a {
  text-decoration: underline;
}

.oc-price__value {
  font-weight: 700;
  font-size: 1.05rem;
}

.oc-price__note {
  margin-top: .25rem;
}

.oc-btn {
  display: inline-block;
  margin-top: .6rem;
  padding: .45rem .85rem;
  background: #005bbb;
  color: #fff;
  border-radius: .35rem;
  font-size: .9rem;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}

.oc-btn:hover {
  background: #004a96;
  color: #fff;
  transform: translateY(-1px);
}

/* =========================================================
   6. Hinweisboxen und Statusfarben
   ========================================================= */

.catalog-note,
.setup-note,
.mt4-note,
.mt4-facts,
.note {
  background: #f8faff;
  border-left: 4px solid #0044cc;
  padding: .9rem 1rem;
  margin: 1rem 0;
}

.mt4-wiki .note,
.mt4-detail .note {
  background: #f4f7fa;
  border-left-color: #173a57;
  padding: 12px 15px;
  margin: 18px 0;
}

.recommend,
.mt4-wiki .recommend,
.mt4-detail .recommend {
  background: #eaf3ff;
  border-left: 4px solid #2272b9;
  padding: 12px 15px;
  margin: 18px 0;
}

.setup-warning,
.warningbox,
.warnbox,
.mt4-wiki .warningbox,
.mt4-detail .warningbox {
  background: #fff7e8;
  border-left: 4px solid #d88400;
  padding: 12px 15px;
  margin: 18px 0;
}

.ok,
.mt4-wiki .ok,
.mt4-detail .ok {
  background: #eaf7ea;
}

.warn,
.mt4-wiki .warn,
.mt4-detail .warn {
  background: #fff5d8;
}

.crit,
.mt4-wiki .crit,
.mt4-detail .crit {
  background: #ffe9e9;
}

/* =========================================================
   7. Bilder, Artikelbilder und SVG-Container
   ========================================================= */

.figure,
.setup-fig,
.mt4-detail .fig {
  margin: 1.2rem 0 1.6rem 0;
  padding: 1rem;
  border: 1px solid #ccd6df;
  border-radius: 8px;
  overflow-x: auto;
  background: #fbfdff;
}

.mt4-wiki .figure,
.mt4-detail .figure {
  margin: 22px 0;
  padding: 14px;
}

.figure h3 {
  margin-top: 0;
}

.svg-wrap {
  width: 100%;
  overflow-x: auto;
  background: #fff;
  border: 1px solid #dde5ec;
  border-radius: 6px;
  padding: 8px;
  box-sizing: border-box;
}

.figure svg,
.setup-fig svg,
.mt4-detail svg,
.mt4-wiki svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
}

.caption {
  font-size: .9em;
  color: #555;
  margin-top: 8px;
}

.moto-photos,
.oc-photos {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  min-width: 250px;
}

.moto-photos a,
.oc-photos a {
  display: inline-block;
}

.moto-photos img,
.oc-photos img {
  display: block;
  width: 110px;
  height: auto;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: .25rem;
  background: #fff;
  padding: 2px;
  transition: transform .15s ease-in-out;
}

.moto-photos a:hover img,
.oc-photos a:hover img {
  transform: translateY(-1px);
}

.moto-price-note {
  display: block;
  margin-top: .25rem;
  color: #555;
  font-size: .92rem;
  font-weight: 400;
  white-space: normal;
}

/* =========================================================
   8. Lightbox
   Wird fuer alte Occasion-/Motorbike-Seiten bereitgestellt.
   ========================================================= */

.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(3px);
  z-index: 3500;
  cursor: zoom-out;
}

.lightbox.open {
  display: flex;
}

#lightbox[aria-hidden="true"] {
  display: none !important;
}

.lightbox img {
  max-width: 95%;
  max-height: 95%;
  border-radius: .5rem;
  box-shadow: 0 5px 25px rgba(0,0,0,.4);
}

/* =========================================================
   9. Legenden
   ========================================================= */

.legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: .9em;
  margin-top: 8px;
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid #888;
  flex: 0 0 auto;
}

/* =========================================================
   10. Code / technische Notizen
   ========================================================= */

.catalog-page code,
.setup-page code,
.mt4-main code,
.mt4-detail code,
.mt4-wiki code {
  background: #f1f1f1;
  padding: 2px 5px;
  border-radius: 3px;
}

.catalog-page pre,
.setup-page pre,
.mt4-main pre,
.mt4-detail pre,
.mt4-wiki pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  padding: 12px;
  overflow-x: auto;
  line-height: 1.25;
}

/* =========================================================
   11. Aktionen / Links
   ========================================================= */

.catalog-actions,
.mt4-links {
  margin-top: .7rem;
}

/* =========================================================
   12. SVG-Fallback-Klassen fuer programmgenerierte Grafiken
   SVG-interne Styles duerfen diese Regeln ueberschreiben.
   ========================================================= */

.stage { fill: #f1f4f7; stroke: #9aa7b2; stroke-width: 2; }
.aud { fill: #e8f3ff; stroke: #bdd6ee; stroke-width: 1; opacity: .75; }
.top { fill: #2d75b9; stroke: #144b7f; stroke-width: 2; }
.sub { fill: #d98b2b; stroke: #8a4f0d; stroke-width: 2; }
.fill { fill: #56a05c; stroke: #2b6c31; stroke-width: 2; }
.beam, .mainbeam { fill: #8ec7ff; opacity: .25; stroke: #5c9fd8; stroke-width: 1.5; }
.outbeam { fill: #b7dbff; opacity: .22; stroke: #6aa7dc; stroke-width: 1.5; }
.frontbeam, .fillbeam { fill: #63b96b; opacity: .22; stroke: #33863d; stroke-width: 1.5; }
.subbeam, .lowbeam { fill: #ffa640; opacity: .20; stroke: #d4831f; stroke-width: 1.5; }
.centerbeam { fill: #ffcc66; opacity: .28; stroke: #c98a00; stroke-width: 1.5; }
.ground { fill: #f4f4f4; stroke: #9aa7b2; stroke-width: 2; }
.long { fill: #8ec7ff; opacity: .24; stroke: #5c9fd8; stroke-width: 2; }
.down { fill: #9ed0ff; opacity: .30; stroke: #5c9fd8; stroke-width: 2; }
.front { fill: #63b96b; opacity: .25; stroke: #33863d; stroke-width: 1.5; }
.hole { fill: #ff6d6d; opacity: .25; stroke: #cc3333; stroke-width: 1.3; }
.axis { stroke: #8795a1; stroke-width: 1; }
.grid { stroke: #e1e7ec; stroke-width: 1; }
.subbox { fill: #d98b2b; stroke: #8a4f0d; stroke-width: 2; }
.topbox { fill: #2d75b9; stroke: #144b7f; stroke-width: 2; }
.lobeA { fill: #ffad4d; opacity: .35; stroke: #d88400; stroke-width: 2; }
.lobeB { fill: #ff8c4d; opacity: .25; stroke: #c46422; stroke-width: 2; }
.lobeC { fill: #ffcc66; opacity: .35; stroke: #c98a00; stroke-width: 2; }
.barLR { fill: #d98b2b; opacity: .82; }
.barC { fill: #ffcc66; opacity: .95; }
.barTop { fill: #2d75b9; opacity: .82; }
.tick { stroke: #56636e; stroke-width: 1; }
.dist { stroke: #173a57; stroke-width: 2; stroke-dasharray: 4 4; }
.line { stroke: #173a57; stroke-width: 2; stroke-dasharray: 5 5; }

.label,
.txt,
.smalllabel,
.title {
  font-family: Arial, Helvetica, sans-serif;
}

.label,
.txt {
  fill: #173a57;
}

.title {
  font-weight: bold;
  fill: #173a57;
}

.smalllabel {
  fill: #344;
}

/* =========================================================
   13. Mobile Optimierung
   ========================================================= */

@media (max-width: 760px) {
  .catalog-page,
  .setup-page,
  .mt4-main,
  .mt4-detail,
  .mt4-wiki {
    max-width: 100%;
  }

  .catalog-table,
  .setup-table,
  .mt4-catalog,
  .mt4-detail table,
  .mt4-wiki table {
    font-size: .9rem;
  }

  .catalog-table th,
  .catalog-table td,
  .setup-table th,
  .setup-table td,
  .mt4-catalog th,
  .mt4-catalog td,
  .mt4-detail th,
  .mt4-detail td,
  .mt4-wiki th,
  .mt4-wiki td {
    padding: .58rem .6rem;
  }

  .catalog-table td.price,
  .mt4-catalog td.price {
    text-align: left;
  }

  .legend {
    gap: .6rem;
  }

  .moto-photos,
  .oc-photos {
    min-width: 210px;
  }

  .moto-photos img,
  .oc-photos img {
    width: 95px;
  }
}

@media (max-width: 720px) {
  .oc-table thead {
    display: none;
  }

  .oc-table,
  .oc-table tbody,
  .oc-table tr,
  .oc-table td {
    display: block;
    width: 100%;
  }

  .oc-table tbody tr {
    border-spacing: 0;
  }

  .oc-table td + td {
    border-top: 1px dashed rgba(0,0,0,.06);
  }

  .oc-photos {
    margin-bottom: .5rem;
  }

  .oc-price__value {
    margin-top: .25rem;
  }
}