/* apple-feel.css - "Apple-Touch" (Vorschau 14.11.2026, Livegang 14.11.2026, Auftrag Max).
   Fuer alle Seiten (Einbindung in header-newdesign.blade.php, Schalter config oberflaeche.apple_touch).
   Inhalt, Texte und Reihenfolge bleiben unveraendert; hier nur Beruehrung,
   Felder, Scrollen, Karten. Nur transform/opacity werden animiert.
   Quellen: apple-design, emil-design-eng, mobile-native, animate (Skills). */

:root {
  --af-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --af-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --af-sh1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.06);
  --af-sh2: 0 2px 4px rgba(15, 23, 42, 0.05), 0 12px 32px rgba(15, 23, 42, 0.11);
  --af-fokus: #2563eb;
}

/* --- Grundlage: keine Tap-Blitzer, kein Doppeltipp-Verzoegern, sanftes Scrollen --- */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height, 70px) + 16px);
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* 14.11.2026 (BT-15): tote Regel "scroll-behavior: smooth" entfernt - new-design.css setzt :root{scroll-behavior:auto} (hoehere Spezifitaet),
   die Regel wirkte nie; haette sie gegriffen, waere filter-blatt.js mit scrollTo nach dem Schliessen sichtbar zur Position gefahren. */
a, button, input, select, textarea, label, summary, [role="button"] { touch-action: manipulation; }

/* --- Knoepfe und Pills: Druckzustand mit kurzer Feder --- */
:root :is(.blue-btn, .new-search-submit, .new-country-pill, .hero-lead-fab, .nav-btn, .btn, .btn-primary,
  .btn-register, .btn-login, .d5c-go, .d5c-call, .d5c-slot, .d5-zbtn, .fb-anwenden, .fb-reset,
  .load-more-lawyer-bnt, .sm-chip, .d5-rstep, .fb-stufe, .lf-chip, .rk-chip, .bpt-mehr-knopf, .fx-cta__btn,
  .mobile-filter-btn, .category-card-item, .avv-karte, .rk-wahl-eintrag, .nav-row) {
  transition: transform 0.22s var(--af-spring), box-shadow 0.2s ease, background-color 0.2s ease,
    border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
:root :is(button, .blue-btn, .btn, .nav-btn, .hero-lead-fab, .d5c-go, .d5c-call, .d5c-slot, .sm-chip,
  .d5-rstep, .fb-stufe, .lf-chip, .rk-chip, .category-card-item, .nav-row) {
  -webkit-user-select: none;
  user-select: none;
}
:root :is(button) { -webkit-touch-callout: none; }
:root :is(.blue-btn, .new-search-submit, .new-country-pill, .hero-lead-fab, .nav-btn, .btn, .btn-primary,
  .btn-register, .btn-login, .d5c-go, .d5c-call, .d5c-slot, .d5-zbtn, .fb-anwenden, .fb-reset,
  .load-more-lawyer-bnt, .sm-chip, .d5-rstep, .fb-stufe, .lf-chip, .rk-chip, .bpt-mehr-knopf, .fx-cta__btn,
  .mobile-filter-btn, .rk-wahl-eintrag, .nav-row):active {
  transform: scale(0.97);
  transition-duration: 0.12s;
  transition-timing-function: ease-out;
}
:root :is(.category-card-item, .avv-karte):active {
  transform: scale(0.98);
  transition-duration: 0.12s;
  transition-timing-function: ease-out;
}

/* 14.11.2026 (Design-Pruefung BT-04): Tippflaechen ohne Rueckmeldung bekamen keinen Druckzustand (gemessen: transform none bei :active).
   Nur transform, keine Farbe. Kurze Dauer beim Druecken, ease-out. */
:root :is(.menu-toggle, .ok-nah button, .ok-geb a, .fab-register, .nav-link, .header-logo-link, .fx-uebersicht, .d5c-anz-info, .bw-info):active {
  transform: scale(0.96);
  transition-duration: 0.12s;
  transition-timing-function: ease-out;
}
@media (pointer: coarse) {
  :root .bk3-karte:active { transform: scale(0.985); transition-duration: 0.12s; transition-timing-function: ease-out; }
}
/* 14.11.2026 (BT-05): Bestands-Hover hebt Pille/Knoepfe/Karten per translateY/scale an und bleibt nach dem Tippen auf Touch stehen
   (mobile-native: klebender Hover); die Druck-Skalierung verlor gegen translateY(-1px). Auf Geraeten ohne Hover: kein Hover-Versatz,
   Druck gewinnt. Farben und Schatten der Bestands-Hoverregeln bleiben unberuehrt. */
@media (hover: none) {
  :root :is(.new-country-pill, .new-search-submit, .blue-btn, .hero-lead-fab, .category-card-item):hover:not(:active) { transform: none; }
  :root :is(.new-country-pill, .new-search-submit, .blue-btn, .hero-lead-fab):hover:active { transform: scale(0.97); }
  :root .category-card-item:hover:active { transform: scale(0.98); }
  /* Startseiten-Suchknopf: Bestand setzt Hover (translateY(-3px) scale(1.02)) und Druck (translateY(-1px) scale(1)) mit !important */
  :root .hero-section-form .blue-btn:hover:not(:active), :root .hero-section .header-search-box .search-submit-btn:hover:not(:active) { transform: none !important; }
  :root .hero-section-form .blue-btn:active, :root .hero-section .header-search-box .search-submit-btn:active { transform: scale(0.97) !important; transition-duration: 0.12s; }
}

/* Mindest-Klickziel 44 px (nur Touch, damit der Desktop unveraendert dicht bleibt) */
@media (pointer: coarse) {
  :root :is(.d5c-slot, .rk-chip, .lf-chip, .sm-chip, .fb-stufe, .rk-wahl-eintrag, .btn, .nav-btn) { min-height: 44px; }
}

/* Hover nur, wenn es Hover wirklich gibt (kein klebender Hover auf dem Handy) */
@media (hover: hover) and (pointer: fine) {
  :root :is(.category-card-item, .avv-karte, .d5card, .area-card, .av-verz__karte):hover {
    transform: translateY(-2px);
    box-shadow: var(--af-sh2);
  }
  :root :is(.rk-chip, .lf-chip, .sm-chip, .d5-rstep):hover { transform: translateY(-1px); }
  :root :is(.d5-rstep, .sm-chip, .rk-chip, .lf-chip):hover:active { transform: scale(0.97); }
}

/* Auswahl-Animation: Pill springt einmal kurz, wenn sie gewaehlt wird */
@keyframes af-pop { 0% { transform: scale(0.96); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }
/* 14.11.2026 (BT-08): spielte beim Seitenaufruf und bei jedem Neu-Render der Leiste ab, ohne dass jemand tippte; Ueberschwinger 1,04 beschnitt den
   Scroller. Jetzt nur noch mit Klasse af-popped (apple-feel.js setzt sie kurz nach einer Nutzeraktion), Ueberschwinger 1,02. */
:root :is(.d5-rstep, .fb-stufe, .sm-chip, .rk-chip, .lf-chip).af-popped {
  animation: af-pop 0.32s var(--af-ease) 1;
}

/* --- Fokus: sichtbarer Ring, Abstand 2 px --- */
html :is(a, button, summary, select, [tabindex]):focus-visible {
  outline: 2px solid var(--af-fokus) !important;
  outline-offset: 2px !important;
}
html :is(.modern-header, .hero-section, .new-hero, .modern-footer, .slide-nav) :is(a, button):focus-visible {
  outline-color: #fff !important;
}

/* 14.11.2026 (BT-06): In waagerechten Leisten (overflow-x:auto, Hoehe = Chiphoehe) kappte der Scroller den Ring oben und unten. Ring nach innen legen. */
html :is(.sm-knoepfe, .ok-geb, .lf-chips, .rk-chips) :is(a, button, [tabindex]):focus-visible { outline-offset: -3px !important; }

/* --- Felder: 16 px mobil, weicher Fokus mit Schein --- */
@media (max-width: 768px) {
  :root :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { font-size: 16px; }
}
:root :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]), select, textarea) {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
:root :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus {
  border-color: var(--af-fokus) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18) !important;
  outline: none !important;
}
:root ::placeholder { transition: opacity 0.2s ease; } /* 14.11.2026: Platzhalterfarbe wie live */
:root :focus::placeholder { opacity: 0.55; }

/* Loeschen-X (vom Skript eingefuegt) */
.af-x-host { position: relative; }
.af-clear {
  position: absolute; z-index: 3; width: 32px; height: 32px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: rgba(100, 116, 139, 0.16); color: #475569;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; visibility: hidden; transform: scale(0.8);
  transition: opacity 0.16s ease, transform 0.2s var(--af-spring), visibility 0s linear 0.16s;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.af-clear::after { content: ""; position: absolute; inset: -6px; }
.af-clear svg { width: 12px; height: 12px; display: block; }
.af-clear.af-on { opacity: 1; visibility: visible; transform: scale(1); transition-delay: 0s; }
.af-clear:active { transform: scale(0.9); }
@media (hover: hover) and (pointer: fine) { .af-clear:hover { background: rgba(100, 116, 139, 0.28); } }

/* 14.11.2026 (Max: "farblich darf nichts veraendert werden"): Milchglas-Kopf entfernt, Kopf behaelt seinen Verlauf. */
/* --- Seitenkopf und Ergebniskopf mobil (14.11.2026, Entscheidung Max; ersetzt die Kompakt-Leiste) ---
   Seitenkopf: scrollt auf Suchergebnisseiten mit der Seite weg (nichts angeheftet, nichts blendet ein/aus). position:absolute statt fixed:
   der Platzhalter body{padding-top:var(--header-height)} bleibt, deshalb keine Luecke und kein Sprung (CLS 0). Spezifitaet schlaegt .header-hidden. */
@media (max-width: 767.98px) {
  html.af-js body:has(.search-result-header) .modern-header,
  html.af-js body:has(.search-result-header) .modern-header.header-hidden { position: absolute !important; transform: none !important; transition: none !important; }
  html.af-js body:has(.search-result-header) .vz-abc { position: static; }

  /* Kopf der Trefferliste: scrollt mit dem Inhalt (nicht sticky). Reihenfolge: Trefferzahl, Linkzeile, Knopf, Filterchips. */
  html.af-js .search-result-header { position: static !important; transition: none !important; box-shadow: none; padding: 4px 0 8px !important; margin: 0 0 4px !important; }
  /* 14.11.2026 (Video Max: weisser Streifen ueber der ersten Karte beim Runterscrollen): das Bestandsskript setzt weiter .ist-weg
     (translateY(-110%)) - im Fluss stehend schob das den Kopf der Trefferliste aus dem Bild. Hier wirkungslos machen. */
  html.af-js .search-result-header,
  html.af-js .search-result-header.ist-weg { transform: none !important; will-change: auto !important; }
  html.af-js .search-result-header .search-result-title { order: 0; }
  html.af-js .search-result-header .af-rang { order: 1; }
  html.af-js .search-result-header .af-sf { order: 2; }
  html.af-js .search-result-header .sm-knoepfe { order: 3; }
  /* Trefferzahl als Ueberschrift, Kontext klein darunter */
  html.af-js .search-result-header .search-result-title {
    font-size: 22px !important; line-height: 28px !important; font-weight: 700 !important; padding: 0 0 2px !important; letter-spacing: -0.01em;
  }
  html.af-js .search-result-header .search-result-title strong { font-size: 24px; line-height: 28px; }
  html.af-js .search-result-header .search-result-title strong,
  html.af-js .search-result-header .search-result-title .srh-context { line-height: inherit; }
  html.af-js .search-result-header .search-result-title .srh-context { display: block !important; font-size: 13.5px; line-height: 20px; margin-top: 2px; }
  html.af-js .search-result-header .search-result-title .srh-context::before { content: none; }
  /* Hinweisabsatz entfaellt (ersetzt durch Linkzeile); Live-Chips i/Filter/Umkreis/Sortieren ersetzt der eine Knopf */
  html.af-js .search-result-header .search-result-kurz { display: none !important; }
  html.af-js .sm-knoepfe > .sm-chip { display: none !important; }
  /* 14.11.2026 (CLS 0,026 bei 4x CPU): die Filterchips haengt suche-mobil.js erst nach dem ersten Bild ein. Sind laut Server
     Filter aktiv (.af-sf.is-on), bleibt die Zeile von Anfang an stehen (44 px reserviert) - kein Nachrutschen der Liste. */
  html.af-js .search-result-header:not(:has(.af-sf.is-on)) .sm-knoepfe:not(:has(.d5-chip)) { display: none !important; }
  html.af-js .search-result-header:has(.af-sf.is-on) .sm-knoepfe { min-height: 44px; }
  html.af-js .sm-knoepfe { margin-top: 10px; }

  /* Linkzeile (Rechtsauflage a, b): Tippziel >= 44 px, als Link erkennbar */
  html.af-js .search-result-header .sm-chip.af-rang {
    height: auto; min-height: 44px; align-self: flex-start; padding: 0; margin: 0; gap: 0;
    border: 0; border-radius: 8px; background: none; color: #2563eb; font-size: 14px; font-weight: 500; line-height: 20px;
    text-decoration: underline; text-underline-offset: 3px; text-align: left; white-space: normal;
  }
  html.af-js .search-result-header .sm-chip.af-rang[hidden] { display: none; }
  html.af-js .search-result-header .sm-chip.af-rang:active { background: none; opacity: 0.7; }

  /* Ein Knopf "Sortieren und Filtern" */
  html.af-js .search-result-header .af-sf {
    align-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px; /* volle Breite: Reserve fuer die Beschriftung (optik-pruefen) */
    border: 1px solid #1e3a8a; border-radius: 24px; background: #fff; color: #1e3a8a;
    font-family: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer;
  }
  html.af-js .af-sf.is-on { background: #eff6ff; }
  html.af-js .af-sf:active { background: #eff6ff; }
  .af-sf-ico { width: 18px; height: 18px; flex: 0 0 auto; }
  .af-sf-zahl {
    display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: 11px; background: #1e3a8a; color: #fff; font-size: 12.5px; font-weight: 700;
  }

  /* Suchfelder oben sichtbar (freie Suche): Rechtsthema und Ort untereinander, darunter "Suchen" */
  html.af-js body.sk-seite .section-search-page { padding: 16px 0 12px !important; }
  html.af-js body.sk-seite #searchCollapsible { max-height: none !important; overflow: visible !important; }
  html.af-js body.sk-seite #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.af-js body.sk-seite #searchCollapsible .form-wrapper { width: 100%; height: auto; }
  html.af-js body.sk-seite #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.af-js body.sk-seite #searchCollapsible .search-form-grid > [class*="col-"] { width: 100%; max-width: 100%; flex: 0 0 auto; padding: 0; border: 0 !important; }
  html.af-js body.sk-seite #searchCollapsible .search-form-grid > [class*="col-"]:nth-child(3) { display: none; } /* Name: im Filterblatt */
  html.af-js body.sk-seite #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.af-js body.sk-seite #searchCollapsible .input-group.hr { border-right: 1px solid #cbd5e1 !important; }
  html.af-js body.sk-seite #searchCollapsible .input-group-prepend { margin: 0 !important; padding-left: 14px; display: flex; align-items: center; flex: 0 0 auto; }
  html.af-js body.sk-seite #searchCollapsible .input-group-prepend img { width: 20px; height: 20px; }
  html.af-js body.sk-seite #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.af-js #searchCollapsible input, html.af-js #searchCollapsible input::placeholder { font-size: 16px !important; } /* kein iOS-Zoom beim Antippen (13 px vorher) */
  html.af-js .ok-kopf { padding-top: 16px; } /* O-03: Stadtseite, H1 klebte am Seitenkopf */
  /* Ortsfeld: Standort-Knopf (Bestand: Symbol im Feld, Vue @click) rechts */
  html.af-js body.sk-seite #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.af-js body.sk-seite #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.af-js body.sk-seite #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.af-js body.sk-seite #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.af-js body.sk-seite #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.af-js body.sk-seite .section-search-page::before, html.af-js body.sk-seite #searchCollapsible .input-group.hr::after { display: none !important; } /* Leuchtfleck und Trennlinie des Rechnerkopfs */
  html.af-js body.sk-seite #searchCollapsible .hero-content > .blue-btn { box-shadow: none !important; }
  .af-bt-m { display: none; }
}
@media (max-width: 767.98px) {
  html.af-js .af-bt-d { display: none; }
  html.af-js .af-bt-m { display: inline; }
}
@media (max-width: 339.98px) { /* 280 bis 339 px: Knopf braucht sonst 96 % der Breite (optik-Reserve) */
  html.af-js .search-result-header .af-sf { padding: 0 14px; gap: 6px; font-size: 14.5px; }
  .af-sf-ico { width: 16px; height: 16px; }
}
@media (min-width: 768px) { .af-rang, .af-sf { display: none !important; } }

/* Sortierung im Filterblatt (Abschnitt unter den Filtern; Stufenknoepfe .fb-stufe aus filter-blatt.css) */
.af-sort { padding: 0 0 16px; border-bottom: 1px solid #e8ecf3; margin-bottom: 16px; } /* 14.11.2026: Sortierung steht oben im Blatt */
.af-sort-h { font-size: 15px; font-weight: 700; color: #0f172a; margin: 0 0 10px; }
.af-sort-z { display: flex; flex-wrap: wrap; gap: 8px; }
/* Waagerechte Leisten: Einrasten mit Schwung, kein Durchreichen an die Seite */
:root :is(ul.ok-geb, .sm-knoepfe, .lf-chips, .rk-chips) {
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
:root :is(ul.ok-geb, .sm-knoepfe, .lf-chips, .rk-chips)::-webkit-scrollbar { display: none; }
:root :is(ul.ok-geb > *, .sm-knoepfe > *, .lf-chips > *, .rk-chips > *) { scroll-snap-align: start; }
:root :is(.slide-nav, .fb-rumpf, .filter-form-body, .rk-wahl-liste, .cc-modal) { overscroll-behavior: contain; }

/* 14.11.2026 (BT-01, Design-Pruefung): Seitenmenue hatte height:100vh - auf iOS ist das die grosse Flaeche, die Safari-Leiste verdeckt die Fussknoepfe
   (Registrieren/Anmelden). 100vh bleibt als Rueckfall, dvh darueber. Scroller .nav-content reicht nicht an die Seite durch; unten sicherer Bereich. */
html.af-js .slide-nav { height: 100vh; height: 100dvh; padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box; }
html.af-js .nav-content { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
html.af-js .nav-footer { flex: 0 0 auto; }
/* 14.11.2026 (BT-09): Menue oeffnete mit ease-in-out 0,4 s (langsamer Start, 516 ms bis zum Ziel) und glitt auch bei reduzierter Bewegung; Overlay animierte "all".
   Blur und Farben unangetastet. */
html.af-js .slide-nav { transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
html.af-js .nav-overlay { transition: opacity 0.25s ease-out, visibility 0.25s; }
@media (prefers-reduced-motion: reduce) { html.af-js .slide-nav, html.af-js .nav-overlay { transition-duration: 0.001ms; } }

/* 14.11.2026 (BT-03): Wisch nach unten schliesst die Blaetter. touch-action:none nur am Griff/Kopf (nicht am scrollenden Rumpf), damit der Browser den
   Zug nicht als Scrollen uebernimmt. Griff bekommt eine groessere unsichtbare Trefferflaeche; das Filterblatt wird an der Kopfzeile gezogen (kein neuer Griff, Optik unveraendert). */
.sm-blatt-griff, .sm-blatt > h3, #filterBlatt .fb-kopf { touch-action: none; }
.sm-blatt-griff { position: relative; }
.sm-blatt-griff::before { content: ""; position: absolute; inset: -12px -48px; }

/* --- Karten: Radius, feine Schatten-Ebenen --- */
:root :is(.category-card-item, .avv-karte) { border-radius: 16px; box-shadow: var(--af-sh1); }
:root :is(.d5card, .av-verz__karte) { border-radius: 18px; box-shadow: var(--af-sh1); }
/* Die Trefferzeilen sind am Desktop eine flache Liste (Trennlinien) - Karte nur auf dem Handy */
@media (max-width: 767px) {
  :root .bk3-karte { border-radius: 18px; box-shadow: var(--af-sh1); }
}
:root :is(.area-card) { border-radius: 20px; }
:root :is(.d5card, .bk3-karte, .av-verz__karte, .area-card) {
  transition: transform 0.22s var(--af-ease), box-shadow 0.22s ease, background-color 0.16s ease;
}

/* --- Einblenden von unten (Skript setzt die Klassen, nur unterhalb des ersten Bildschirms) --- */
.af-reveal { opacity: 0; transform: translateY(16px); }
.af-reveal.af-in {
  opacity: 1; transform: none;
  transition: opacity 0.5s ease-out, transform 0.55s var(--af-ease);
}

/* --- Sicherer Bereich unten (iPhone mit Home-Balken, Standalone) --- */
.fab-register { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

/* --- Bewegung aus, wenn gewuenscht --- */
@media (prefers-reduced-motion: reduce) {
  :root *, :root *::before, :root *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  :root :is(.blue-btn, .new-search-submit, .new-country-pill, .hero-lead-fab, .nav-btn, .btn, .d5c-go, .d5c-call,
    .d5c-slot, .sm-chip, .d5-rstep, .fb-stufe, .lf-chip, .rk-chip, .category-card-item, .avv-karte, .nav-row,
    .d5card, .bk3-karte, .area-card, .af-clear):is(:active, :hover) { transform: none; }
  .af-reveal { opacity: 1; transform: none; }
}

/* 14.11.2026 (Max): Premium-Pille erst nach dem Suchbereich - sie verdeckte "Anliegen schildern" und das Laufband.
   Ohne Skript (keine Klasse af-js) bleibt sie wie bisher sichtbar. */
@media (max-width: 767.98px) {
  html.af-js .fab-register { transition: opacity 0.2s ease, transform 0.2s ease; }
  html.af-js:not(.af-hero-weg) .fab-register { opacity: 0 !important; transform: translateY(8px) !important; pointer-events: none; } /* !important: Einblend-Animation der Pille haelt sonst opacity 1 */
}
@media (prefers-reduced-motion: reduce) { html.af-js .fab-register { transition: none; } }

/* 14.11.2026 (Pruefung UX-01, WCAG 2.4.7): In der Trefferliste schaltete die Bestandsregel "#yahape a { outline: none !important }"
   (lawyer-cards.css, .yahape/#yahape) jeden Fokusrahmen ab - bei Tastaturbedienung war nicht zu sehen, wo man steht. Nur :focus-visible
   (Tastatur), Maus und Finger sehen keinen Rahmen. Farben aus dem Bestand (#2563eb, #fff, #1e3a8a). */
html body :is(#yahape, .yahape.yahape.yahape) :is(a, button, summary):focus-visible { outline: 2px solid #2563eb !important; outline-offset: 2px !important; }
html body :is(#yahape, .yahape.yahape.yahape) .d5c-go.d5c-go:focus-visible { outline: 2px solid #fff !important; outline-offset: 0 !important; box-shadow: 0 0 0 4px #1e3a8a !important; }

/* 14.11.2026 (Design-Pruefung O-01, O-02, O-04; LIVE seit 14.11.2026, Freigabe Max): einheitliche Formen.
   Alle Regeln stehen unter html.af-formen; das Inline-Skript im Kopf (header-newdesign) setzt die Klasse seit 14.11.2026 fuer alle (Freigabe Max, Schalter config oberflaeche.formen). Farben unveraendert; Anfrageformular (#leadForm) ausgenommen. !important: Bestandsregeln mit hoeherer Spezifitaet
   (gemessen: .category-card-item r12 statt r16, .d5card r14 statt r18). */
/* O-01: Knoepfe und Chips = Pille (wie /kanzleimarketing), Hauptknoepfe 48 px */
html.af-formen body :is(.new-search-submit, .blue-btn, .new-country-pill, .nav-btn, .d5c-go, .d5c-call, .ok-nah__los, .sm-chip, .d5c-slot, .fb-stufe,
  .fb-anwenden, .fb-reset, .lf-chip, .rk-chip, .d5-rstep, .af-sf, .load-more-lawyer-bnt):not(#leadForm *) { border-radius: 999px !important; }
html.af-formen body :is(.d5c-go, .d5c-call, .ok-nah__los):not(#leadForm *) { min-height: 48px !important; }
html.af-formen body .ok-nah__los:not(#leadForm *) { min-width: 48px !important; }
/* O-04: Felder = Radius 12, Standardhoehe 48 px, Rand der Auswahl wie die Felder (2 px, Farbe bleibt) */
html.af-formen body :is(.d5-ortfilter-feld, select.filter-sort):not(#leadForm *) { height: 48px !important; border-radius: 12px !important; }
html.af-formen body select.filter-sort:not(#leadForm *) { border-width: 2px !important; }
/* O-02: Karten */
html.af-formen body :is(.category-card-item, .avv-karte):not(#leadForm *) { border-radius: 16px !important; box-shadow: var(--af-sh1) !important; }
@media (max-width: 767.98px) {
  html.af-formen body :is(.d5card, .bk3-karte):not(#leadForm *) { border-radius: 18px !important; box-shadow: var(--af-sh1) !important; }
}

/* 14.11.2026 (Fehler aus dem Livegang, 1440 px): Der Suchknopf der Ergebnisseiten zeigte am Rechner beide Beschriftungen
   ("Anwalt finden" und "Suchen") - die Grundregel stand versehentlich in einer Handy-Medienabfrage. Rechner: nur die
   Rechner-Beschriftung; mobil schaltet html.af-js .af-bt-m (hoehere Spezifitaet, oben) auf "Suchen". */
.af-bt-m { display: none; }

/* 14.11.2026 (Vorschau ?vorschau=formen, Auftrag Max: Touch-Punkte): Griff am Filterblatt wie .sm-blatt-griff (36x4, Radius 2, #cbd5e1); das Skript fuegt ihn nur mit
   dem Parameter ein. Seitenmenue: horizontaler Wisch gehoert dem Skript, senkrechtes Scrollen dem Browser. */
@media (max-width: 991.98px) {
  html.af-formen #filterBlatt > .af-griff { flex: 0 0 auto; width: 36px; height: 4px; border-radius: 2px; background: #cbd5e1; margin: 8px auto 2px; }
}
@media (min-width: 992px) { html.af-formen #filterBlatt > .af-griff { display: none; } }
html.af-formen #slideNav { touch-action: pan-y; }