/* such.css - Website-Suche (Overlay), Prototyp ab 04.10.2026. Nur mobil (<=820px). Farben wie Glossar-Suche. */
.such-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2500; display: none; flex-direction: column;
  background: #FAF9F6; color: #1A1A18; font-family: 'DM Sans', sans-serif; }
.such-overlay.such-offen { display: flex; }
.such-kopf { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fff; border-bottom: 1px solid #e5e3dc; flex-shrink: 0; }
.such-form { flex: 1; min-width: 0; margin: 0; position: relative; }
.such-feld::-webkit-search-cancel-button, .such-feld::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.such-loeschen { position: absolute; right: 2px; top: 0; width: 44px; height: 44px; padding: 0; border: none; background: none; color: #5a5a56; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.such-loeschen[hidden] { display: none; }
.such-loeschen:focus-visible { outline: 3px solid #F5C000; outline-offset: -3px; border-radius: 10px; }
.such-feld { width: 100%; box-sizing: border-box; height: 44px; padding: 0 44px 0 14px; font: inherit; font-size: 16px; /* 16px verhindert Zoom auf iOS */
  border: 2px solid #1A1A18; border-radius: 10px; background: #fff; color: #1A1A18; -webkit-appearance: none; appearance: none; }
.such-feld:focus { outline: 3px solid #F5C000; outline-offset: 1px; }
.such-zu { flex-shrink: 0; min-width: 44px; height: 44px; padding: 0 8px; border: none; background: none; font: inherit; font-size: 15px; font-weight: 600; color: #1A1A18; cursor: pointer; }
.such-zu:focus-visible, .such-bsp:focus-visible, .such-mehr:focus-visible, .such-abk:focus-visible, .such-treffer a:focus-visible { outline: 3px solid #F5C000; outline-offset: 2px; }
.such-mitte { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px 20px; }
.such-datenhinweis { margin: 0 0 8px; font-size: 13px; color: #5a5a55; }
.such-datenhinweis a { color: inherit; text-decoration: underline; }
.such-status { margin: 4px 0 12px; font-size: 14px; color: #5a5a55; min-height: 20px; }
.such-hinweis { margin: 4px 0 12px; font-size: 15px; line-height: 1.5; }
.such-beispiele { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.such-bsp { min-height: 44px; padding: 0 16px; border: 1px solid #d9d6cc; border-radius: 22px; background: #fff; font: inherit; font-size: 15px; font-weight: 600; color: #1A1A18; cursor: pointer; }
.such-treffer { list-style: none; margin: 0; padding: 0; }
.such-treffer li { margin: 0 0 10px; }
.such-treffer a { display: block; padding: 12px 14px; background: #fff; border: 1px solid #e5e3dc; border-radius: 12px; color: inherit; text-decoration: none; }
.such-treffer li.such-aktuell a { box-shadow: -4px 0 0 0 #F5C000; background: #f5f5f3; }
.such-etikett { display: inline-block; margin-bottom: 4px; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: #EDE7F9; color: #5B2A9E; }
.such-etikett.such-t-a { background: #FDF3CC; color: #6B5300; }
.such-etikett.such-t-k { background: #E1F0E4; color: #1F5B2E; }
.such-etikett.such-t-f { background: #E4ECF7; color: #1F3F73; }
.such-titel { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; margin-bottom: 4px; }
.such-vorschau { display: block; font-size: 14px; line-height: 1.45; color: #4a4a46; }
mark.such-mark { background: #FBE79A; color: #1A1A18; font-weight: 700; border-radius: 3px; padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
mark.such-mark.such-mark-syn { background: #FDF3CC; font-weight: 600; border-bottom: 2px dotted #C9A200; border-radius: 3px 3px 0 0; }
.such-mehr[hidden] { display: none; }
.such-mehr { display: block; width: 100%; min-height: 44px; margin: 4px 0 8px; border: 1px solid #1A1A18; border-radius: 10px; background: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.such-fuss { flex-shrink: 0; display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #e5e3dc; }
.such-abk { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 10px; font-size: 15px; font-weight: 700; text-decoration: none; }
.such-abk-termin { background: #F5C000; color: #1A1A18; }
.such-abk-kontakt { background: #1A1A18; color: #fff; }

/* Lupe und Hamburger: zwei getrennte Tippflaechen, je mindestens 44 x 44 px (nur wo der Mobil-Header steht) */
@media (max-width: 820px) {
  .global-nav:has(.nav-logo-mobile) .nav-search-mobile { width: 44px; height: 44px; }
  .global-nav:has(.nav-logo-mobile) .hamburger { width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; }
  .global-nav:has(.nav-logo-mobile) .nav-right { gap: 0; }
}
@media (min-width: 821px) { .such-overlay { display: none !important; } }
@media (prefers-reduced-motion: no-preference) { .such-overlay.such-offen { animation: suchEin .16s ease-out; } @keyframes suchEin { from { opacity: 0; } to { opacity: 1; } } }

/* Unterseiten: Lupe und Hamburger als Paar (Markup .nav-mobil, Header-Rollout 04.10.2026). Auf dem Desktop ohne eigene Box. */
.nav-mobil { display: contents; }
@media (max-width: 820px) {
  .global-nav:has(.nav-logo-mobile) .nav-mobil { display: flex; align-items: center; order: -1; gap: 0; }
}

/* Lupe naeher an den linken Rand (Frank 05.10.2026): Tippflaeche bleibt 44 px, das Symbol rueckt auf die Flucht des Seitenrands. */
@media (max-width: 820px) {
  .global-nav:has(.nav-logo-mobile) > .nav-right,
  .global-nav:has(.nav-logo-mobile) > .nav-mobil { margin-left: -12px; }
}