/* Neutrales Fachverzeichnis /rechtsanwaelte/{stadt}/{gebiet} und Verzeichnis-Knopf auf Profilseiten
   (16.10.2026, Freigabe Max Variante B; nur hinter ?vorschau=verzeichnis, bis config basisprofile.verzeichnis_live).
   Marken-Tokens: Inter, Navy #1e3a8a, Link #2563eb, Soft #eff6ff. Bewegung nur 150-250 ms ease-out,
   alles ausser Farbe entfaellt bei prefers-reduced-motion. Hover nur mit echter Maus. */

/* ---------- Knopf auf Basis- und Kundenprofil ---------- */
.vz-knoepfe { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; }
.vz-knoepfe .vz-knopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; min-height: 48px; padding: 10px 16px; border: 1.5px solid #1e3a8a; border-radius: 12px; background: #fff; color: #1e3a8a; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.35; font-weight: 600; text-align: left; text-decoration: none; overflow-wrap: anywhere; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background-color 160ms ease-out; }
.vz-knoepfe .vz-knopf svg { flex: none; }
/* 16.10.2026 (Abnahme U2): zweiteilig - kleine Zeile (Art), Hauptzeile (Gebiet, Ort, Zahl) */
.vz-knoepfe .vz-kt { display: block; min-width: 0; }
.vz-knoepfe .vz-kl { display: block; margin: 0 0 1px; font-size: 12px; line-height: 1.35; font-weight: 500; color: #475569; }
.vz-knoepfe .vz-kh { display: block; font-size: 14.5px; line-height: 1.35; font-weight: 600; }
.vz-knoepfe .vz-knopf:active { transform: scale(.97); background: #eff6ff; }
.vz-knoepfe .vz-knopf:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .vz-knoepfe .vz-knopf:hover { background: #eff6ff; color: #1e3a8a; text-decoration: none; } }
@media (prefers-reduced-motion: reduce) { .vz-knoepfe .vz-knopf { transition: background-color 150ms ease-out; } .vz-knoepfe .vz-knopf:active { transform: none; } }

/* Mobiler Knopf im Hero des Kundenprofils (Sidebar entfaellt unter 768 px): auf dunklem Grund heller Rahmen */
.vz-knoepfe--mobil { margin-top: 12px; }
@media (min-width: 768px) { .vz-knoepfe--mobil { display: none; } }
/* 16.10.2026 (Abnahme U4): Kundenprofil zeigt genau einen Knopf je Breite - unter 768 px der Hero-Knopf, ab 768 px der Sidebar-Knopf */
@media (max-width: 767px) { .vz-knoepfe--seite { display: none; } }
/* 16.10.2026 (Abnahme U3): auf dem Basisprofil gleich breit wie "Anwalt anrufen" (Hauptaktion bleibt dominanter: Navy gefuellt, hier nur Rahmen); ab 768 px ist der Anrufknopf kein Vollbreit-Knopf mehr, beide teilen dieselbe Obergrenze */
@media (min-width: 768px) { .bq-anruf { width: 100%; max-width: 340px; box-sizing: border-box; } .bq-anruf ~ .vz-knoepfe { max-width: 340px; } }
/* 16.10.2026 (Abnahme U2/U5): schmale Breiten - Polster und Schrift etwas enger, damit der Knopf bei 320 px und in der schmalen Sidebar (768-991 px) hoechstens 3 Zeilen braucht */
@media (max-width: 359px) { .vz-knoepfe .vz-knopf { padding: 8px 12px; gap: 8px; } .vz-knoepfe .vz-kh { font-size: 14px; } }
@media (min-width: 768px) and (max-width: 991px) { .vz-knoepfe--seite .vz-knopf { padding: 8px 6px 8px 8px; } .vz-knoepfe--seite .vz-knopf svg { display: none; } .vz-knoepfe--seite .vz-kh { font-size: 14px; } }

/* ---------- Seite ---------- */
.vz { max-width: 880px; margin: 0 auto; padding: 20px 16px 64px; box-sizing: border-box; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #0f172a; line-height: 1.6; }
.vz *, .vz *::before, .vz *::after { box-sizing: border-box; }
.vz a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.vz h1.vz-titel { margin: 0 0 14px; font-family: inherit; font-size: 30px; line-height: 1.12; font-weight: 700; letter-spacing: -.022em; color: #0f172a; text-wrap: balance; overflow-wrap: anywhere; }
.vz-fakten { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.vz-fakten li { display: block; padding: 5px 12px; border-radius: 16px; background: #eff6ff; color: #1e3a8a; font-size: 13.5px; line-height: 1.4; font-weight: 500; font-variant-numeric: tabular-nums; }
.vz-fakten strong { font-weight: 700; }
.vz p.vz-einleitung { margin: 0; max-width: 46em; font-size: 16px; line-height: 1.6; color: #334155; text-wrap: pretty; }

/* A-Z-Leiste: klebt unter dem Seitenkopf (70 px; faehrt der Kopf weg, oben), einzeilig, waagerecht wischbar */
.vz-abc { position: sticky; top: 70px; z-index: 30; margin: 20px -16px 4px; padding: 6px 16px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); border-bottom: 1px solid #e2e8f0; }
body:has(#modernHeader.header-hidden) .vz-abc { top: 0; }
/* 16.10.2026 (Abnahme U7): Leiste gleitet mit dem Kopf statt zu springen; Kopfschatten nur auf Verzeichnisseiten weg, solange der Kopf eingefahren ist */
.vz-abc { transition: top 300ms cubic-bezier(.23, 1, .32, 1); }
body:has(.vz-abc) .modern-header.header-hidden { box-shadow: none; }
/* 16.10.2026 (Abnahme U10): kurze Seiten (unter az_index_ab Eintraegen) ohne klebende Leiste */
.vz-abc.vz-abc--kurz { position: static; }
.vz-abc ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.vz-abc ol::-webkit-scrollbar { display: none; }
.vz-abc li { flex: none; scroll-snap-align: center; }
.vz-abc a { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px; border-radius: 10px; color: #1e3a8a; font-size: 15px; line-height: 1; font-weight: 600; text-decoration: none; transition: background-color 150ms ease-out, color 150ms ease-out, transform 150ms cubic-bezier(.23, 1, .32, 1); }
.vz-abc a:active { transform: scale(.95); background: #dbeafe; }
.vz-abc a[aria-current="true"] { background: #1e3a8a; color: #fff; }
.vz-abc a:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .vz-abc a:not([aria-current="true"]):hover { background: #eff6ff; } }

/* Liste */
.vz h2.vz-buchstabe { margin: 28px 0 4px; font-family: inherit; font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: #1e3a8a; scroll-margin-top: 136px; }
.vz-liste { list-style: none; margin: 0; padding: 0; }
.vz-eintrag { position: relative; display: grid; gap: 10px 16px; padding: 14px 0; border-top: 1px solid #e2e8f0; scroll-margin-top: 136px; }
.vz-eintrag:target { margin: 0 -12px; padding: 14px 12px; border-radius: 14px; border-top-color: transparent; background: #eff6ff; animation: vz-ziel 400ms ease-out; }
/* 16.10.2026 (Abnahme U11): Markierung als Element, nur beim Ziel sichtbar */
.vz-ziel { display: none; margin: 0 0 2px; color: #1e3a8a; font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: .02em; }
.vz-eintrag:target .vz-ziel { display: block; }
.vz-eintrag:target .vz-tel { background: #fff; }
@keyframes vz-ziel { from { background: #bfdbfe; } to { background: #eff6ff; } }
.vz-info { min-width: 0; }
.vz-name { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -.005em; overflow-wrap: anywhere; }
.vz-name a { color: #0f172a; text-decoration: none; }
.vz-name a::after { content: ''; position: absolute; inset: 0; }
.vz-name a:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .vz-name a:hover { color: #1e3a8a; text-decoration: underline; text-underline-offset: 3px; } }
.vz-etikett { display: inline-flex; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: #eff6ff; color: #1e3a8a; font-size: 12px; line-height: 1.5; font-weight: 600; vertical-align: 2px; white-space: nowrap; }
.vz-titel-zeile { margin: 2px 0 0; font-size: 14.5px; line-height: 1.4; color: #1e3a8a; font-weight: 500; }
.vz-kanzlei, .vz-adr { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: #475569; overflow-wrap: anywhere; }
.vz-tel { position: relative; z-index: 1; align-self: start; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px; background: #eff6ff; color: #1e3a8a; font-size: 15px; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; transition: transform 150ms cubic-bezier(.23, 1, .32, 1), background-color 150ms ease-out; }
.vz-tel:active { transform: scale(.97); background: #dbeafe; }
.vz-tel:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .vz-tel:hover { background: #dbeafe; text-decoration: none; color: #1e3a8a; } }
@media (min-width: 640px) { .vz-eintrag { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .vz-tel { justify-self: end; } }

.vz p.vz-legende { margin: 16px 0 0; font-size: 13.5px; line-height: 1.6; color: #475569; text-wrap: pretty; }
.vz p.vz-legende .vz-etikett { margin: 0 4px 0 0; }
.vz-leer { margin: 20px 0 0; padding: 14px 16px; border-radius: 14px; background: #f8fafc; border: 1px solid #e2e8f0; font-size: 14.5px; color: #334155; }

/* Erklaerblock und Verweise */
.vz-block { margin: 40px 0 0; padding: 20px; border-radius: 16px; background: #f8fafc; border: 1px solid #e2e8f0; }
.vz-block h2 { margin: 0 0 8px; font-family: inherit; font-size: 18px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: #0f172a; }
.vz-block p { margin: 0 0 8px; max-width: 46em; font-size: 15px; line-height: 1.65; color: #334155; text-wrap: pretty; }
.vz-block p:last-child { margin-bottom: 0; }
.vz-block a { color: #2563eb; }
.vz-nav { margin: 32px 0 0; }
.vz-nav h2 { margin: 0 0 10px; font-family: inherit; font-size: 18px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: #0f172a; }
.vz-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vz-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border: 1px solid #cbd5e1; border-radius: 12px; background: #fff; color: #1e3a8a; font-size: 14.5px; line-height: 1.3; font-weight: 500; text-decoration: none; transition: background-color 150ms ease-out, transform 150ms cubic-bezier(.23, 1, .32, 1); }
.vz-nav a small { color: #475569; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.vz-nav a:active { transform: scale(.97); background: #eff6ff; }
.vz-nav a:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .vz-nav a:hover { background: #eff6ff; } }
.vz-az { margin: 24px 0 0; }
.vz-az a { display: inline-flex; align-items: center; min-height: 44px; color: #2563eb; font-size: 15px; font-weight: 600; text-decoration: none; }
.vz-az a:hover, .vz-az a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.vz-hinweis { margin: 32px 0 0; padding-top: 16px; border-top: 1px solid #e2e8f0; font-size: 13.5px; line-height: 1.6; color: #475569; }
.vz-hinweis p { margin: 0 0 6px; }
.vz-hinweis a { color: #2563eb; }

@media (max-width: 479px) { .vz h1.vz-titel { font-size: 26px; } .vz-eintrag:target { margin: 0 -8px; padding: 14px 8px; } }
@media (prefers-reduced-motion: reduce) {
    .vz-eintrag:target { animation: none; }
    .vz-abc { transition: none; }
    .vz-abc a, .vz-tel, .vz-nav a { transition: background-color 150ms ease-out, color 150ms ease-out; }
    .vz-abc a:active, .vz-tel:active, .vz-nav a:active { transform: none; }
    .vz-abc ol { scroll-behavior: auto; }
}
@media (prefers-reduced-transparency: reduce) { .vz-abc { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-contrast: more) { .vz-eintrag { border-top-color: #64748b; } .vz-nav a { border-color: #64748b; } }
/* 16.10.2026 (Auflage 4, Rechtspruefung): dauerhafter Satz zur Premium-Pille im blauen Profilkopf, klein und ruhig (Marken-Navy als Grund, weil der Verlauf des Kopfes mit Weiss nur 3,6:1 ergibt: gemessen 16.10.2026); nur unter ?vorschau=verzeichnis. */
.vz-premium-hinweis { display: block; box-sizing: border-box; margin: 8px 0 0; max-width: 46em; padding: 6px 10px; border-radius: 8px; background: #1e3a8a; font-size: 12px; line-height: 1.5; font-weight: 400; color: #fff; }