/* TCG Keeper — gemeinsames Stylesheet, Teil 5 von 8: Filterbox, Statistik-Zeile, Schiebeschalter, Boxen anordnen, Seite bearbeiten, Bearbeitungsmodus, Größenstufen.
   Bis 09.10.2026 eine einzige Datei app.css; aufgeteilt ohne inhaltliche Änderung.
   Alle Teile werden in includes/layout_top.php in dieser Reihenfolge eingebunden —
   die Reihenfolge bestimmt die Kaskade, Regeln nicht zwischen Teilen verschieben. */
/* width:100% statt nur min-width:140px, damit jedes Feld (Name, Kartentyp,
   Energie-Typ, Sortierung, Filtern/Zurücksetzen) immer die volle Breite der
   Box einnimmt und untereinander steht — vorher passten je nach verfügbarer
   Boxbreite mal zwei schmalere Felder (z. B. Kartentyp+Energie-Typ) in eine
   Zeile, mal nicht, wodurch die Felder unterschiedlich breit wirkten. */
.filter-rail .field{ display:flex; flex-direction:column; gap:4px; width:100%; min-width:0; }
.filter-rail .field label{ font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; }
/* "Filtern"/"Filter zurücksetzen" sitzen in einem eigenen .field (siehe
   oben) und sollen sich wie die anderen Aktions-Knöpfe über die volle
   Boxbreite strecken statt sich nur an ihrer eigenen Textbreite zu
   orientieren. */
.filter-rail .field .btn{ width:100%; justify-content:center; min-height:40px; }

/* Checkbox-Mehrfachauswahl für Filterfelder (Mario, 16.09.2026: "alle
   Filter außer Sortierung sollen Mehrfachauswahl können") — ersetzt die
   vorherigen <select>-Dropdowns bei Kartentyp/Energie-Typ/Pokemon Typ/
   Seltenheit/In Sammlung auf cards.php/set.php/collection.php, siehe
   render_filter_checklist() in helpers.php. max-height+overflow nur damit
   eine lange Seltenheiten-Liste die Box nicht sprengt — bei kurzen Listen
   (z. B. Kartentyp, In Sammlung) greift das gar nicht erst. */
.check-list{ display:flex; flex-direction:column; gap:3px; max-height:160px; overflow-y:auto; border:1px solid var(--line); border-radius:8px; padding:7px 9px; background:var(--paper-sunken); }
.check-item{ display:flex; align-items:center; gap:7px; font-size:12.5px; cursor:pointer; line-height:1.3; }
.check-item input{ margin:0; flex-shrink:0; }
/* Zwischenüberschrift innerhalb eines Filterfelds, z. B. um den "Set"-Filter
   auf cards.php sichtbar in TCG/TCG Pocket zu trennen (Mario, 17.09.2026
   Bugreport Punkt 2) — mehrere .check-list direkt hintereinander statt
   einer gemeinsamen gemischten Liste. */
.filter-group-label{ margin:8px 0 3px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); }
.filter-group-label:first-child{ margin-top:0; }

/* Ein-/Ausklapp-Schiebeschalter oben rechts in jeder Filterbox (Mario,
   16.09.2026 Folgerunde: "Die Filterboxen sind mittlerweile alle recht
   lang") — cards.php/set.php/collection.php/sets.php. .filterbox-head sitzt
   als erstes Element der Box, der Schalter dank justify-content:flex-end
   immer oben rechts. .filterbox-body enthält den kompletten bisherigen
   Inhalt der Box (Filterformular, Ansichtsumschalter, Aktions-Knöpfe) und
   wird im eingeklappten Zustand komplett ausgeblendet. Das Label
   "Filterbox" bleibt seit Mario's dritter Folgerunde (16.09.2026: "Die
   Bezeichnung 'Filterbox' auch im ausgeklappten Modus lassen") IMMER
   sichtbar, nicht mehr nur eingeklappt — dasselbe gilt seitdem einheitlich
   auch für .statsbox-label und den Titel von .value-box (siehe unten).
   Zustand wird von assets/filterbox.js in localStorage gemerkt
   (seitenübergreifend, wie der Ansichts-Umschalter in assets/viewmode.js). */
.filterbox-head{ display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-bottom:14px; }
.filterbox-label{
  margin-right:auto; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-faint);
}
.filterbox.is-collapsed .filterbox-body{ display:none; }

/* Ein-/Ausklapp-Schiebeschalter für die Statistik-Zeile in "Meine Sammlung"
   (Mario, 16.09.2026 zweite Folgerunde: "Einen Schiebeschalter ebenfalls
   für die Statistikboxen ... Rechts oberhalb der Sammlungswert-Box") —
   gleiches Prinzip wie .filterbox-* oben (eigene, unabhängige Box-Gruppe,
   siehe assets/filterbox.js), aber ohne .card-box-Fläche: die einzelnen
   .stat-tile-Kacheln darunter haben bereits ihre eigene Fläche/ihren
   eigenen Rand, eine zusätzliche Umrandung um die ganze Zeile hätte nur zu
   verschachtelten Kästen geführt. */
.statsbox-head{ display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-bottom:10px; }
.statsbox-label{
  margin-right:auto; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-faint);
}
.statsbox.is-collapsed .statsbox-body{ display:none; }

/* Schiebeschalter für die "Wertvollste Karten"-Box (Mario, 16.09.2026
   dritte Folgerunde: "Die Box: Wertvollste Karten muss ebenfalls mit einem
   Schiebeschalter ein und ausblendbar sein") — Schalter hängt sich rechts
   an den bereits bestehenden, flexiblen .value-box-title an (siehe
   render_value_highlights_box() in helpers.php); der Titel-Text bleibt wie
   bei .filterbox-label/.statsbox-label immer sichtbar, nur die Kartenliste
   darunter verschwindet im eingeklappten Zustand. */
.value-box-title .switch, .value-section-title .switch{ margin-left:auto; }
.value-box.is-collapsed .value-box-title{ margin-bottom:0; }
.value-box.is-collapsed .value-box-list{ display:none; }
.value-section.is-collapsed .value-section-title{ margin-bottom:0; }
.value-section.is-collapsed .value-box-list{ display:none; }

.switch{ position:relative; display:inline-flex; flex:none; width:34px; height:20px; cursor:pointer; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch-slider{
  position:absolute; inset:0; background:var(--line); border-radius:999px; transition:background .15s;
}
.switch-slider::before{
  content:""; position:absolute; width:14px; height:14px; left:3px; top:3px;
  background:var(--paper-raised); border-radius:50%; transition:transform .15s; box-shadow:var(--shadow);
}
.switch input:checked ~ .switch-slider{ background:var(--accent); }
.switch input:checked ~ .switch-slider::before{ transform:translateX(14px); }
.switch input:focus-visible ~ .switch-slider{ outline:2px solid var(--accent); outline-offset:2px; }

/* Pfeil-Akkordeon für einzelne Abschnitte INNERHALB einer Filterbox (Mario,
   16.09.2026 dritte Folgerunde) — siehe accordion_open()/accordion_close()
   in helpers.php und initAccordions() in assets/filterbox.js. Ersetzt die
   bisherigen <hr class="filter-divider">-Trennstriche zwischen Filterformular,
   Ansichtseinstellungen und Anlegen-Knöpfen: statt einer reinen optischen
   Trennung ist jeder Abschnitt jetzt einzeln über eine Kopfzeile mit Pfeil
   ein-/ausklappbar. Auch die einzelnen Checkbox-Filterfelder (Set,
   Kartentyp, Energie-Typ, Pokemon Typ, Seltenheit, In Sammlung, Serie)
   nutzen dieselbe Komponente, jeweils in ihr bestehendes .field
   eingebettet. .accordion-head ist ein <button> (nicht nur optisch klickbar,
   auch per Tastatur bedienbar), .accordion-arrow dreht sich per CSS-
   Transform statt zwei verschiedene Pfeil-Zeichen vorzuhalten. */
.accordion + .accordion{ margin-top:14px; }
.field .accordion{ margin-top:2px; }
.accordion-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  background:none; border:none; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; text-align:left;
}
.field .accordion-label{ font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; }
.accordion-label{ font-size:11px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; }
/* Rechte Seite der Kopfzeile (Zähler-Badge + Pfeil) als eigene Gruppe, damit
   .accordion-head weiterhin nur zwei Elemente per justify-content:
   space-between auseinanderschiebt (Label links, diese Gruppe rechts) — der
   Zähler sitzt dadurch immer direkt links neben dem Pfeil, wie von Mario
   gewünscht (16.09.2026 vierte Folgerunde), statt an den Rand der ganzen
   Kopfzeile zu wandern. */
.accordion-head-right{ flex:none; display:flex; align-items:center; gap:6px; }
/* Anzahl aktiver Filter je Filterbereich (Mario, 16.09.2026 vierte
   Folgerunde: "die Anzahl der aktiven Filter ... als Zahl in einer kleinen
   Box links neben den Pfeil anzeigen") — siehe $activeCount in
   accordion_open() (helpers.php). Erscheint nur, wenn mindestens ein Wert
   ausgewählt ist. */
.accordion-count{
  flex:none; min-width:16px; height:16px; padding:0 5px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent); font-family:var(--font-mono);
  font-size:10.5px; font-weight:700; line-height:16px; text-align:center;
}
.accordion-arrow{
  /* Mario, 16.09.2026 vierte Folgerunde: "der Pfeil ... etwas größer" —
     von 14x14/11px auf 20x20/16px angehoben. */
  flex:none; width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  color:var(--ink-faint);
}
.accordion-arrow::before{ content:"▸"; display:inline-block; transition:transform .15s; font-size:16px; }
.accordion:not(.is-collapsed) .accordion-arrow::before{ transform:rotate(90deg); }
.accordion:not(.is-collapsed) .accordion-body{ margin-top:8px; }
.accordion.is-collapsed .accordion-body{ display:none; }
/* Abschnitts-Überschriften ("Ansichten", "Karten und Sets anlegen" u. Ä.)
   sitzen direkt in der Filterbox, nicht in einem .field — etwas mehr
   Abstand nach oben als bei den Filterfeldern selbst. */
.filterbox-body > .accordion{ margin-top:14px; }

/* "Boxen anordnen" — Seitenanpassung Schritt 3 (assets/boxorder.js), plus
   Erweiterung um Größenstufen. Im normalen Ansichtsmodus unsichtbar; erst
   body.box-order-editing zeigt Ziehgriff + Größen-Auswahl und macht die
   Boxen optisch als verschiebbar erkennbar. */
.box-order-toolbar{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.box-order-toolbar .form-hint{ margin:0; }
body.box-order-editing .box-order-item{
  cursor:grab;
  outline:2px dashed var(--line);
  outline-offset:3px;
  border-radius:12px;
}
body.box-order-editing .box-order-item:active{ cursor:grabbing; }
.box-order-item.box-order-dragging{ opacity:.4; }

/* „Seite bearbeiten" (03.10.2026, assets/pageedit.js + pagetexts.js): ein
   gemeinsamer Knopf für Administratoren auf jeder Seite (layout_top.php),
   ersetzt das frühere „Boxen anordnen". Im Bearbeitungsmodus wird der Text
   unter dem Mauszeiger umrandet, bereits geänderte Texte sind gelb
   hinterlegt, ein Klick öffnet das kleine Bearbeitungsfenster (.pt-pop). */
.page-edit-toolbar{ flex-wrap:wrap; row-gap:6px; }
.page-edit-option{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-soft); cursor:pointer; user-select:none; }
.page-edit-option[hidden], .page-edit-help[hidden]{ display:none; }
.page-edit-help{ flex:1 1 260px; }
body.page-editing .page-edit-toolbar{
  position:sticky; top:8px; z-index:60; padding:8px 10px; border-radius:10px;
  background:var(--paper-raised); border:1px solid var(--accent); box-shadow:0 4px 14px rgba(0,0,0,.12);
}
body.page-editing-text .pt-hover{
  outline:2px solid var(--accent) !important; outline-offset:2px; cursor:text !important;
  background-color:color-mix(in srgb, var(--accent) 10%, transparent);
}
body.page-editing .pt-changed{
  background-color:color-mix(in srgb, #f5c400 28%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, #f5c400 70%, transparent);
  border-radius:3px;
}
body.page-editing .pt-active{ outline:2px solid var(--accent) !important; outline-offset:2px; }
.pt-pop{
  position:fixed; z-index:10000; box-sizing:border-box;
  background:var(--paper-raised); color:var(--ink); border:1px solid var(--accent);
  border-radius:12px; padding:12px; box-shadow:0 10px 30px rgba(0,0,0,.25);
  font-size:13px; line-height:1.4;
}
.pt-pop-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.pt-pop-x{ border:0; background:none; font-size:20px; line-height:1; cursor:pointer; color:var(--ink-soft); padding:0 2px; }
.pt-pop-meta{ font-size:12px; color:var(--ink-soft); margin-bottom:8px; word-break:break-word; }
.pt-pop-meta .pt-k{ color:var(--ink-faint); }
.pt-pop-input{ width:100%; box-sizing:border-box; min-height:52px; resize:vertical; font:inherit; font-size:14px; }
.pt-pop-info{ margin:6px 0 10px; font-size:12px; }
.pt-pop-actions{ display:flex; flex-wrap:wrap; gap:6px; }
@media (max-width:640px){
  body.page-editing .page-edit-toolbar{ top:60px; }
  .pt-pop{ left:8px !important; right:8px; width:auto !important; }
}

/* Bearbeitungsmodus per Schiebeschalter (Mario, 04.10.2026): Schalter oben
   rechts in der Kopfzeile, die Leiste (#pageEditToolbar) erscheint an der
   Stelle des früheren „Seite bearbeiten“-Knopfs. Modi: Texte (nur Admin),
   Farben, Seite bedienen. Ungespeicherte Änderungen → Status orange. */
#pageEditToolbar[hidden]{ display:none !important; }
.pc-edit-switch{ display:inline-flex; align-items:center; gap:6px; width:auto; padding:0 4px; }
.pc-edit-switch .switch-slider{ position:relative; width:34px; height:20px; flex:none; }
.pc-edit-switch input{ z-index:1; }
.pc-edit-switch-icon{ font-size:15px; line-height:1; }
.pc-edit-bar{ flex-direction:column; align-items:stretch; gap:6px; }
.pc-edit-bar .page-edit-help{ flex:none; margin:0; }
.pc-edit-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.pc-edit-title{ font-size:14px; }
.pc-edit-scope{ font-size:12px; color:var(--ink-soft); }
.pc-edit-modes{ display:inline-flex; flex-wrap:wrap; gap:4px; margin-left:auto; }
.pc-edit-modes label{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  border:1px solid var(--line); font-size:12.5px; cursor:pointer; user-select:none; background:var(--paper);
}
.pc-edit-modes label:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:600; }
.pc-edit-modes input{ margin:0; accent-color:var(--accent); }
.pc-edit-status{ font-size:12.5px; color:var(--ink-soft); flex:1 1 200px; }
.pc-edit-status.has-pending{ color:#c46a00; font-weight:600; }
.pc-edit-status.is-error{ color:var(--danger); font-weight:600; }
.pc-edit-status.is-ok{ color:var(--good); }
.pc-edit-bar .btn[disabled]{ opacity:.45; cursor:not-allowed; }
body.page-editing .pc-edit-bar{ border-width:2px; }
body.page-editing .pc-edit-bar.has-pending{ border-color:#e08a00; }
/* Farb-Modus: Element unter dem Mauszeiger / ausgewähltes Element */
body.page-editing-color .pc-hover{ outline:2px dashed #d0347c !important; outline-offset:2px; cursor:crosshair !important; }
body.page-editing-color .pc-sel{ outline:3px solid #d0347c !important; outline-offset:2px; }
body.page-editing-color svg.pc-hover, body.page-editing-color svg.pc-sel{ border-radius:4px; }
.pc-color-pop{ width:320px; }
.pc-color-rows{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.pc-color-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; font-size:13px; cursor:pointer; }
.pc-color-row input[type=color]{ width:44px; height:28px; padding:0 2px; border:1px solid var(--line); border-radius:6px; background:var(--paper); cursor:pointer; }
.pc-color-opt{ display:flex; align-items:center; gap:6px; font-size:12.5px; margin:4px 0; cursor:pointer; }
/* Dialog (Bearbeitungsmodus verlassen / beenden / zurücksetzen) */
.pc-modal{ position:fixed; inset:0; z-index:10050; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(10,14,24,.55); }
.pc-modal-box{
  width:min(460px,100%); box-sizing:border-box; background:var(--paper-raised); color:var(--ink);
  border:1px solid var(--accent); border-radius:14px; padding:18px 18px 14px; box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.pc-modal-box h3{ margin:0 0 8px; font-size:17px; }
.pc-modal-box p{ margin:0 0 14px; font-size:14px; line-height:1.5; color:var(--ink-soft); }
.pc-modal-actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
@media (max-width:640px){
  .pc-edit-modes{ margin-left:0; }
  .pc-color-pop{ width:auto; }
}
/* Im Hamburger-Menü (mobil oder per Umschalter erzwungen) als eigene,
   beschriftete Zeile wie die übrigen Knöpfe dort. */
.pc-edit-switch-text{ display:none; }
@media (max-width:640px){
  .nav-panel .pc-edit-switch{ width:100%; box-sizing:border-box; height:auto; padding:9px 12px; border:1px solid var(--line); border-radius:8px; gap:8px; }
  .nav-panel .pc-edit-switch-text{ display:inline; flex:1; color:var(--ink); font-weight:600; }
}
html[data-nav-view="mobile"] .nav-panel .pc-edit-switch{ width:100%; box-sizing:border-box; height:auto; padding:9px 12px; border:1px solid var(--line); border-radius:8px; gap:8px; }
html[data-nav-view="mobile"] .nav-panel .pc-edit-switch-text{ display:inline; flex:1; color:var(--ink); font-weight:600; }
html[data-nav-view="mobile"] .nav-panel .pc-edit-switch-icon{ display:inline; }

/* Werkzeugleiste (Ziehgriff + Größen-Auswahl) — echtes, vorangestelltes
   Kindelement statt absolut positioniert, damit es sich in jeder Box
   (Kachel, Formularfeld, Kartenbereich, …) automatisch richtig einreiht. */
.box-order-controls{ display:none; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
body.box-order-editing .box-order-controls{ display:flex; }
.box-order-handle{
  flex:0 0 auto;
  font-size:15px;
  line-height:1;
  color:var(--ink-faint);
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:6px;
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.box-size-select{
  font-size:11px;
  padding:3px 4px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--paper);
  color:var(--ink-soft);
  max-width:150px;
  cursor:pointer;
}

/* ---- Größenstufen ----
   --box-basis ist die "Mittel/Standard"-Breite jeder Boxen-Art (siehe die
   einzelnen Boxen-Gruppen weiter unten) — Klein/Groß skalieren relativ dazu,
   Volle Breite ignoriert sie ganz. !important ist hier bewusst: die
   spezifischeren Boxen-Art-Regeln (z. B. für die Statistik-Kacheln) setzen
   sonst ihre eigene, höher gewichtete flex-Regel und eine gewählte
   Größenstufe hätte keine sichtbare Wirkung. */
.box-order-item.box-size-s{ flex:0 1 calc(var(--box-basis, 100%) * 0.6) !important; }
.box-order-item.box-size-l{ flex:0 1 calc(var(--box-basis, 100%) * 1.6) !important; }
.box-order-item.box-size-full{ flex:1 1 100% !important; }

/* ---- Boxen-Arten: Standardbreite je Kontext (Größenstufe "Mittel") ---- */
.stat-row.box-order-group{ display:flex; flex-wrap:wrap; }
.stat-row.box-order-group > .box-order-item{ --box-basis:150px; flex:1 1 var(--box-basis); }
.box-order-group[data-box-order-group="sections"],
.box-order-group[data-box-order-group="set_sections"]{ display:flex; flex-wrap:wrap; }
.box-order-group[data-box-order-group="sections"] > .box-order-item,
.box-order-group[data-box-order-group="set_sections"] > .box-order-item{ --box-basis:100%; flex:1 1 var(--box-basis); min-width:0; }
.filter-rail.box-order-group > .box-order-item{ --box-basis:100%; flex:1 1 var(--box-basis); }
.grid.box-order-group{ display:flex; flex-wrap:wrap; }
/* flex-grow bewusst 0 (nicht 1): mit flex-grow verteilt der Browser den
   übrigen Platz einer unvollständigen letzten Zeile auf genau die dort noch
   vorhandenen Kacheln — die werden dadurch sichtbar breiter als alle
   Kacheln in den vollen Zeilen darüber, besonders auffällig beim
   Herunterscrollen auf sets.php. Ohne Wachstum bleiben alle Kacheln exakt
   gleich groß; am Zeilenende bleibt dafür etwas Restplatz, was optisch
   unauffälliger ist als "springende" Kachelbreiten. */
.grid.box-order-group > .box-order-item{ --box-basis:var(--settile-basis-standard,220px); flex:0 1 var(--box-basis); }
/* Die Kompakt-/Listen-Ansicht (assets/viewmode.js) hat Vorrang vor der neuen
   Boxen-Größe: wer bewusst in eine dichtere/gelistete Ansicht wechselt, soll
   dort auch wirklich kleinere bzw. gestapelte Kacheln sehen, unabhängig von
   den admin-seitig gewählten Größenstufen (die gelten nur in der
   Standardansicht). Höhere Spezifität (3 statt 2 Klassen) gewinnt hier
   unabhängig von der Regel-Reihenfolge. */
.view-mode-compact .grid.box-order-group{ display:grid; }
.view-mode-list .grid.box-order-group{ display:flex; flex-direction:column; flex-wrap:nowrap; }
/* In der Listenansicht wird die Hauptachse der Gruppe vertikal (Zeilen
   untereinander statt Kacheln nebeneinander) — die "Breite" (--box-basis,
   z. B. 220px für Setkacheln) wäre als flex-basis dann plötzlich die HÖHE
   jeder Zeile, nicht mehr ihre Breite, und machte jede Setzeile exakt so
   hoch wie in der Standardansicht breit (daher die auffällig hohen,
   größtenteils leeren Zeilen in der Listenansicht). Höhe soll sich hier
   immer nach dem tatsächlichen Inhalt richten — auch bei einer gewählten
   Größenstufe (Klein/Groß/Volle Breite), deshalb mit !important und
   ausreichend Spezifität, um sowohl die Standardregel als auch die
   Größenstufen-Regeln (ebenfalls !important, aber nur 2 statt 4 Klassen)
   zuverlässig zu schlagen. */
.view-mode-list .grid.box-order-group > .box-order-item{ flex:0 0 auto !important; }
/* Filter-Seitenleiste und Kartenbereich nebeneinander (page-with-sidebar
   war schon vorher ein flex-Container mit genau diesen Breiten — hier nur
   um die Größenstufen-Variable ergänzt). */
.page-with-sidebar.box-order-group > .box-order-item[data-box-id="sidebar"]{ --box-basis:300px; }
.page-with-sidebar.box-order-group > .box-order-item[data-box-id="main"]{ --box-basis:400px; min-width:0; }

/* Am Handy soll jede Box unabhängig von ihrer gewählten Größenstufe die
   volle Breite einnehmen — muss nach den Regeln oben stehen (siehe Hinweis
   zur Regel-Reihenfolge weiter oben in dieser Datei). */
@media (max-width:640px){
  .box-order-group{ flex-wrap:wrap; }
  .box-order-item,
  .box-order-item.box-size-s,
  .box-order-item.box-size-l,
  .box-order-item.box-size-full{ flex:1 1 100% !important; }
}