/* bootspark.css — Layer: pages (lädt nur bei Templates bootspark + boot).
 * Bootspark-Übersicht, Filter/Custom-Listbox, Gate, Boots-Detailseite.
 * Seitenübergreifende Komponenten → components.css, Kirby-Blocks → blocks.css. */
@layer pages {

/* =====================================================
 * Bootspark — Filterleiste, Bootskarten, Detailseite
 * ===================================================== */
.boot-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: flex-end;
  margin-bottom: var(--sp-6);
}
.boot-filter label {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
/* Gemeinsame Optik für natives Select (Fallback) und Custom-Listbox-Button */
.boot-filter select,
.boot-select-button {
  appearance: none;
  min-width: 11rem;
  padding: var(--sp-2) 2.5rem var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right var(--sp-3) center / 1em;
  font: inherit;
  font-size: var(--fs-sm);
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text);
  cursor: pointer;
}
.boot-select-button { text-align: left; }
.boot-filter select:hover,
.boot-select-button:hover { border-color: var(--ink-300); }
.boot-filter select:focus-visible,
.boot-select-button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
/* Aufgeklappte Liste stylen, wo der Browser es erlaubt (Customizable Select,
   Chrome/Edge 135+). Safari/Firefox zeigen weiterhin die OS-native Liste. */
@supports (appearance: base-select) {
  .boot-filter select,
  .boot-filter select::picker(select) {
    appearance: base-select;
  }
  /* base-select bringt einen eigenen Pfeil mit — wir behalten unseren Chevron */
  .boot-filter select::picker-icon { display: none; }
  .boot-filter select::picker(select) {
    margin-top: var(--sp-1);
    padding: var(--sp-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: 0 8px 24px rgba(20, 20, 20, 0.10);
  }
  .boot-filter option {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
  }
  .boot-filter option:hover,
  .boot-filter option:focus-visible {
    background: var(--ink-100);
    outline: none;
  }
  .boot-filter option:checked { font-weight: 600; }
  .boot-filter option::checkmark { color: var(--color-accent); }
}
/* Custom-Listbox (boot-select.js): ersetzt die nativen Selects, damit die
   aufgeklappte Liste in allen Browsern gestylt ist. Optik wie die Selects. */
.boot-select { position: relative; }
.boot-select-list {
  position: absolute;
  top: calc(100% + var(--sp-1));
  left: 0;
  z-index: 20;
  min-width: 100%;
  max-height: 18rem;
  overflow-y: auto;
  margin: 0;
  /* padding explizit 0, nicht --sp-1: im ungelayerten Ist-Zustand gewann
   * immer reset.css' ul[class]-Regel (höhere Spezifität) gegen diese Klasse,
   * --sp-1 war hier also schon vor der Layer-Aufteilung totes CSS. Mit
   * @layer wird die Regel wirksam — daher explizit auf den Wert gesetzt,
   * der tatsächlich gerendert wurde. */
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgba(20, 20, 20, 0.10);
}
.boot-select-list:focus { outline: none; }
.boot-select-option {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
}
.boot-select-option::before {
  content: "✓";
  visibility: hidden;
  font-weight: 600;
  color: var(--color-accent);
}
.boot-select-option[aria-selected="true"] { font-weight: 600; }
.boot-select-option[aria-selected="true"]::before { visibility: visible; }
.boot-select-option:hover,
.boot-select-option.is-active { background: var(--ink-100); }
.boot-filter-count {
  margin: 0 0 var(--sp-2) auto;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.boot-card-media-link {
  display: block;
  height: 100%;
}
.boot-card-media-link:hover .boot-schematic { color: var(--ink-500); }
.boot-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 10rem;
  padding: var(--sp-6);
  background: var(--ink-100);
  color: var(--ink-300);
}
.boot-schematic {
  width: 100%;
  height: auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.boot-card-placeholder .boot-schematic { max-width: 24rem; }
.boot-card-meta {
  font-size: var(--fs-sm);
  color: var(--color-text);
  margin: 0 0 var(--sp-1);
}
.boot-card-hersteller {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0 0 var(--sp-2);
}
.boot-filter-empty {
  padding: var(--sp-6);
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}
.badge-gesperrt { background: var(--frgs-red-soft); color: var(--frgs-red-dark); }
.badge-eingeschraenkt { background: var(--warn-bg); color: var(--warn-ink); }

.boot-status-banner {
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-6);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}
.boot-status-gesperrt { background: var(--frgs-red-soft); color: var(--frgs-red-dark); }
.boot-status-eingeschraenkt { background: var(--warn-bg); color: var(--warn-ink); }
.boot-detail-media {
  margin: 0 0 var(--sp-8);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.boot-detail-media img { display: block; width: 100%; height: auto; }
.boot-detail-schematic {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 var(--sp-8);
  padding: var(--sp-8) var(--sp-6);
  background: var(--ink-100);
  border-radius: var(--radius-md);
  color: var(--ink-300);
}
.boot-detail-schematic .boot-schematic { max-width: 52rem; }
.boot-section { margin-bottom: var(--sp-12); }
.boot-section h2 {
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--color-border);
}
.boot-section h3 {
  margin: var(--sp-8) 0 var(--sp-2);
  font-size: var(--fs-xs);
  font-family: inherit;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.boot-daten {
  display: grid;
  gap: 0 var(--sp-12);
  margin: 0;
}
@media (min-width: 768px) {
  .boot-daten { grid-template-columns: 1fr 1fr; }
}
.boot-daten-zeile {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) 1fr;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.boot-daten dt {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.boot-daten dd { margin: 0; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.boot-rigg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.boot-rigg-table th,
.boot-rigg-table td {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--color-border);
}
.boot-rigg-table td { font-variant-numeric: tabular-nums; }
.boot-rigg-table td:first-child { color: var(--color-text-muted); }
.boot-rigg-notiz {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  font-variant-numeric: normal;
}
.boot-rigg-table th {
  font-weight: 500;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
@media (max-width: 600px) {
  .boot-daten-zeile { grid-template-columns: 1fr; gap: var(--sp-1); }
}

.boot-card-stand,
.boot-card-klartext {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin: 0;
}

/* Basis-Look (Rahmen, Hintergrund, Radius, Summary) kommt aus .frgs-legende
 * in components.css; hier bleibt nur der seitenspezifische Inhalt (Grid,
 * Beispieltext, Druckregel). */
.boot-legende-liste {
  display: grid;
  gap: var(--sp-1) var(--sp-6);
  margin: var(--sp-4) 0 0;
}
@media (min-width: 768px) {
  .boot-legende-liste { grid-template-columns: 1fr 1fr; }
}
.boot-legende-liste > div {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--sp-3);
  align-items: baseline;
}
.boot-legende-liste dt {
  color: var(--color-text-muted);
}
.boot-legende-liste dd { margin: 0; }
.boot-legende-beispiel {
  margin: var(--sp-4) 0 0;
  color: var(--color-text-muted);
}
@media print {
  /* Ein zugeklapptes <details> druckt sonst nur die <summary>-Zeile;
     die eigentliche Erklärung (dl und p) soll aber auch auf Papier sichtbar sein. */
  .boot-legende > *:not(summary) { display: block; }
}

} /* Ende @layer pages */