/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   HOCHRUNTER OS ÔÇö Page Layout (04)
   Seitenstruktur-Klassen f├╝r Modul-Views.
   Lädt nach 03-components.css.

   COMPONENT CONTRACT ÔÇö verbindliche UI-Klassen
   Neue Views d├╝rfen KEINE eigenen Insel-Komponenten
   f├╝r diese Muster bauen. Vorhandene Klassen nutzen.
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */

/* ÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇ
   PAGE HEADER
   Jede Seite beginnt mit .page-head.
   Enthält Titel + primäre Aktionen.

   <div class="page-head">
     <div class="page-head-left">
       <p class="page-kicker">Modul ┬À Unterbereich</p>
       <h1 class="page-title">Seitentitel</h1>
     </div>
     <div class="page-head-right">
       <button class="btn btn-primary btn-sm">...</button>
     </div>
   </div>
   ÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇ */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.page-head-left  { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.page-head-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.page-kicker {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 0;
}
.page-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--z-950);
  margin: 0;
  line-height: 1.15;
}
.page-subtitle {
  font-size: 13px;
  color: var(--z-400);
  margin: 5px 0 0;
}

/* ÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇ
   PAGE GRID
   Hauptlayout-Raster einer Seite.

   <div class="page-grid">           2-Spalten
   <div class="page-grid page-grid--full">  1-Spalte
   ÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇ */
.page-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}
.page-grid--full  { grid-template-columns: 1fr; }
.page-grid--3     { grid-template-columns: 1fr 1fr 1fr; }
.page-grid--wide  { grid-template-columns: 1fr 380px; }

@media (max-width: 1100px) {
  .page-grid       { grid-template-columns: 1fr; }
  .page-grid--wide { grid-template-columns: 1fr; }
  .page-grid--3    { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .page-grid--3 { grid-template-columns: 1fr; }
}

/* ÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇ
   FILTER BAR (kanonisch)
   Ersetzt alte .filter-bar Insel-Varianten.

   <div class="hos-filter">
     <div class="hos-filter-search">
       <i data-lucide="search"></i>
       <input type="text" placeholder="Suche ">
     </div>
     <select class="hos-filter-select"></select>
     <button class="hos-filter-reset btn btn-ghost btn-sm">Zur├╝cksetzen</button>
     <div class="hos-filter-right">
       <!-- view toggle, extra actions -->
     </div>
   </div>
   ÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇ */
.hos-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.hos-filter-search {
  flex: 1;
  min-width: 180px;
  max-width: 360px;
  position: relative;
}
.hos-filter-search input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 36px;
  border: 1.5px solid rgba(0,0,0,.10);
  border-radius: var(--r-md);
  background: var(--card);
  font-size: 13.5px;
  font-family: inherit;
  color: var(--ink);
  box-shadow: var(--sh-xs);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.hos-filter-search input::placeholder { color: var(--z-400); }
.hos-filter-search input:focus {
  border-color: rgba(79,70,229,.35);
  box-shadow: 0 0 0 3px rgba(79,70,229,.09), 0 1px 3px rgba(0,0,0,.06);
}
.hos-filter-search > i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--z-400);
}
.hos-filter-search > i svg { width: 14px; height: 14px; }

.hos-filter-select {
  height: 36px;
  padding: 0 30px 0 12px;
  border: 1.5px solid rgba(0,0,0,.10);
  border-radius: var(--r-md);
  font-size: 13px;
  font-family: inherit;
  background: var(--card);
  color: var(--z-700);
  cursor: pointer;
  box-shadow: var(--sh-xs);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  outline: none;
}
.hos-filter-select:focus {
  border-color: rgba(79,70,229,.35);
  box-shadow: 0 0 0 3px rgba(79,70,229,.09);
}

.hos-filter-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 600px) {
  .hos-filter { flex-direction: column; align-items: stretch; }
  .hos-filter-search { max-width: none; }
  .hos-filter-right  { margin-left: 0; }
}

/* ÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇ
   VIEW TOGGLE (kanonisch)
   Liste / Karten / Karte

   <div class="hos-view-toggle">
     <button class="hvt-btn active" data-view="list"></button>
     <button class="hvt-btn" data-view="cards"></button>
   </div>
   ÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇ */
.hos-view-toggle {
  display: flex;
  background: var(--z-100);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 2px;
  gap: 2px;
}
.hvt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  border: none;
  border-radius: calc(var(--r-md) - 2px);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--tr-fast), color var(--tr-fast), box-shadow var(--tr-fast);
}
.hvt-btn:hover { background: rgba(255,255,255,.7); color: var(--ink); }
.hvt-btn.active {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--sh-xs);
}
.hvt-btn svg { width: 15px; height: 15px; }

/* ÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇ
   SEGMENTED CONTROL (Tab-Navigation)
   Für Phase-Tabs, Status-Tabs u.ä.

   <div class="hos-seg">
     <button class="hs-btn active" data-phase="all">Alle
       <span class="hs-count">12</span>
     </button>
   </div>
   ÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇ */
.hos-seg {
  display: flex;
  background: var(--z-100);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: var(--r-lg);
  padding: 3px;
  gap: 2px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.hs-btn {
  flex: 1;
  min-height: 38px;
  padding: 6px 14px;
  border-radius: calc(var(--r-lg) - 3px);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border: none;
  background: none;
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  font-family: inherit;
}
.hs-btn:hover:not(.active) {
  background: rgba(255,255,255,.6);
  color: var(--ink);
}
.hs-btn.active {
  background: var(--card);
  color: var(--z-900);
  font-weight: 700;
  box-shadow: 0 1px 6px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.07);
}
.hs-count {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--r-full);
  background: rgba(0,0,0,.07);
  color: var(--z-500);
  letter-spacing: -.01em;
}
.hs-btn.active .hs-count { background: var(--z-900); color: #fff; }
.hs-btn.warn   { color: var(--warn); }
.hs-btn.err    { color: var(--err); }
.hs-btn.err .hs-count  { background: var(--err-bg); color: var(--err); }
.hs-btn.err.active .hs-count { background: var(--err); color: #fff; }

@media (max-width: 640px) {
  .hos-seg { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .hs-btn  { flex: 0 0 auto; }
}