/* 14.11.2026 abends (CLS 0,07-0,33 bei 4x CPU): body:has(.ok-kopf) entfernt - .ok-kopf steht im DOM hinter dem Suchbereich, die Regeln griffen erst, als der Parser dort ankam (Kopf sprang). Die Datei wird ohnehin nur auf Stadtseiten geladen (header-newdesign: !empty($avOrtKopf)).
   14.11.2026 (Auftrag Max, Vorschau ?vorschau=kopf): Stadtseite mobil oben wie die freie Suche. Nur mit html.kk-js (header-newdesign, nur bei ?vorschau=kopf).
   Felder-Regeln nachgebildet nach apple-feel.css (body.sk-seite -> body:has(.ok-kopf)); apple-feel.* bleibt unveraendert. */
@media (max-width: 767.98px) {
  html.kk-js .section-search-page { padding: 16px 0 12px !important; }
  html.kk-js #searchCollapsible { max-height: none !important; overflow: visible !important; }
  html.kk-js #searchCollapsible .hero-content { display: flex !important; flex-direction: column; align-items: stretch; gap: 12px; padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; }
  html.kk-js #searchCollapsible .form-wrapper { width: 100%; height: auto; }
  html.kk-js #searchCollapsible .search-form-grid { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; box-shadow: none !important; border: 0 !important; background: none !important; }
  html.kk-js #searchCollapsible .search-form-grid > [class*="col-"] { width: 100%; max-width: 100%; flex: 0 0 auto; padding: 0; border: 0 !important; }
  html.kk-js #searchCollapsible .search-form-grid > [class*="col-"]:nth-child(3) { display: none; } /* Name: im Filterblatt */
  html.kk-js #searchCollapsible .input-group {
    position: relative; display: flex; flex-wrap: nowrap; align-items: center; height: auto; min-height: 52px; padding: 0 !important; margin: 0;
    border: 1px solid #cbd5e1 !important; border-radius: 16px; background: #fff; overflow: visible;
  }
  html.kk-js #searchCollapsible .input-group.hr { border-right: 1px solid #cbd5e1 !important; }
  html.kk-js #searchCollapsible .input-group-prepend { margin: 0 !important; padding-left: 14px; display: flex; align-items: center; flex: 0 0 auto; }
  html.kk-js #searchCollapsible .input-group-prepend img { width: 20px; height: 20px; }
  html.kk-js #searchCollapsible .input-group input {
    flex: 1 1 auto; min-width: 0; height: 52px !important; min-height: 52px; padding: 0 14px 0 12px !important; border: 0 !important; background: transparent !important;
    font-size: 16px !important; line-height: 52px; box-shadow: none;
  }
  html.kk-js #searchCollapsible input, html.kk-js #searchCollapsible input::placeholder { font-size: 16px !important; } /* kein iOS-Zoom beim Antippen (13 px vorher) */
  html.kk-js #searchCollapsible .search-form-grid > [class*="col-"]:nth-child(2) .input-group-prepend {
    order: 3; position: relative; width: 44px; height: 44px; margin: 0 4px 0 0 !important; padding: 0; flex: 0 0 44px; border-radius: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3a8a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3C/svg%3E") center/22px no-repeat;
  }
  /* das Bestandssymbol ist fuer den blauen Rechnerkopf weiss gezeichnet: unsichtbar, aber Tippflaeche (Vue @click) */
  html.kk-js #searchCollapsible .search-form-grid > [class*="col-"]:nth-child(2) .input-group-prepend img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0 !important; cursor: pointer; }
  html.kk-js #searchCollapsible .search-form-grid > [class*="col-"]:nth-child(2) .input-group::before {
    content: ""; flex: 0 0 20px; width: 20px; height: 20px; margin-left: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center/20px no-repeat;
  }
  html.kk-js #searchCollapsible .input-group .dropdown-menu { top: 100%; left: 0; right: 0; width: 100%; max-height: 260px; overflow-y: auto; border-radius: 12px; z-index: 40; }
  html.kk-js #searchCollapsible .hero-content > .blue-btn {
    width: 100%; height: 52px; min-height: 52px; padding: 0 24px !important; border-radius: 999px !important; background: #1e3a8a !important; background-image: none !important; color: #fff; font-size: 16px !important; font-weight: 600 !important;
  }
  html.kk-js .section-search-page::before, html.kk-js #searchCollapsible .input-group.hr::after { display: none !important; } /* Leuchtfleck und Trennlinie des Rechnerkopfs */
  html.kk-js #searchCollapsible .hero-content > .blue-btn { box-shadow: none !important; }

  /* Ueberschrift (per kopf-kompakt.js ueber die Felder gestellt, Text ohne Zahl aus config): klein und ruhig, max. 2 Zeilen */
  html.kk-js .section-search-page .kk-h1 { margin: 0 0 12px; padding: 0; font-size: 19px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; color: #0f172a !important; text-shadow: none; }
  html.kk-js .section-search-page { padding: 16px 0 12px !important; }

  /* Ortszeile mit PLZ/Standort entfaellt: Ort und Standort stehen im Suchfeld */
  html.kk-js .all-data-search .ok-nah { display: none; }

  /* Rechtsgebiete (.ok-lab, .ok-geb, .ok-mehr) hinter die Trefferliste: .ok-kopf loest sich auf, die Kinder ordnen sich im Elterncontainer ein */
  html.kk-js .all-data-search { display: flex; flex-direction: column; }
  html.kk-js .all-data-search > .ok-kopf { display: contents; }
  html.kk-js .all-data-search > .ok-kopf > :is(.ok-lab, .ok-geb, .ok-mehr) { order: 20; }
  html.kk-js .all-data-search > .ok-kopf > .ok-lab { margin: 20px 0 8px; font-size: 15px; font-weight: 700; color: #0f172a; }
  html.kk-js .all-data-search .ok-kopf > .ok-geb { flex-wrap: wrap; overflow: visible; padding: 0; -webkit-mask-image: none; mask-image: none; }
  html.kk-js .all-data-search .ok-kopf .ok-geb b { display: none; }
  html.kk-js .all-data-search .ok-mehr { margin-top: 8px; }
  /* 14.11.2026 (Livegang, CLS-Pruefung): .ok-geb steht per order hinter der Liste; solange die Liste noch nicht gerendert ist, stand der Block sichtbar
     unter den Suchfeldern und sprang beim Aufbau weg (mit ?vorschau=formen CLS 0,34 bei 4x CPU, ohne Parameter nur zufaellig 0). Bis die ersten Karten da sind:
     unsichtbar und ohne Hoehe; Rueckfall nach 6 s (Seite ohne Treffer: Links bleiben erreichbar). */
  /* 14.11.2026 abends: "erste Karte da" reichte nicht - weitere Karten luden nach und schoben den Block weiter (CLS 0,14-0,25). Jetzt erst, wenn die
     Seite eingelesen ist (kopf-kompakt.js setzt html.kk-fertig bei DOMContentLoaded); Rueckfall nach 6 s bleibt. */
  html.kk-js:not(.kk-fertig) .all-data-search > .ok-kopf > :is(.ok-lab, .ok-geb, .ok-mehr) { max-height: 0; overflow: hidden; visibility: hidden; margin-top: 0; margin-bottom: 0; animation: kk-geb-zeigen 0s linear 6s forwards; }
  @keyframes kk-geb-zeigen { to { max-height: 600px; visibility: visible; } }

  /* Trefferkopf: nur ein Ort-Filter = Ort der Stadtseite -> keine "1" am Knopf, kein Chip, keine reservierte Chipzeile.
     .kk-fremd (kopf-kompakt.js) hebt das auf, wenn der Ortschip einen anderen Ort nennt. */
  html.kk-js:not(.kk-fremd) .search-result-header:has(.d5-chip[data-clear="ort"]):not(:has(.d5-chip ~ .d5-chip)) .af-sf-zahl { display: none; }
  html.kk-js:not(.kk-fremd) .search-result-header:has(.d5-chip[data-clear="ort"]):not(:has(.d5-chip ~ .d5-chip)) .af-sf.is-on { background: #fff; }
  html.kk-js:not(.kk-fremd) .search-result-header:has(.d5-chip[data-clear="ort"]):not(:has(.d5-chip ~ .d5-chip)) .sm-knoepfe { display: none !important; min-height: 0 !important; margin: 0 !important; }
}

/* 14.11.2026 abends (CLS bis 0,035 bei 4x CPU): Die H1 steht im DOM hinter dem Suchbereich und wird erst beim Einlesen
   nach oben gehaengt - der Suchbereich rutschte dann um eine H1-Hoehe nach unten. Platz fuer zwei Zeilen (drei unter 340 px)
   ist jetzt von Anfang an reserviert; die H1 sitzt absolut darin, unten ausgerichtet (eine Zeile: Luft darueber). */
@media (max-width: 767.98px) {
  html.kk-js .section-search-page > .container { position: relative; padding-top: 60px !important; }
  html.kk-js .section-search-page .kk-h1 {
    position: absolute; top: 0; left: 12px; right: 12px; height: 48px; margin: 0 !important;
    display: flex; align-items: flex-end; overflow: hidden;
  }
}
@media (max-width: 339.98px) {
  html.kk-js .section-search-page > .container { padding-top: 84px !important; }
  html.kk-js .section-search-page .kk-h1 { height: 72px; }
}