/* ============ icon button: hover-scale + tooltip ============
   Circular 3em button, white ground, centred icon. Hovering one scales it
   to 1.1 while its siblings drop to 0.9, via the :has() pattern. Tooltip
   text comes from each button's aria-label, so no markup carries a
   duplicate string.
   Used in two places: the team cards and the footer socials. */
.icon-btns{display:flex;gap:12px;justify-content:center;align-items:center}
.icon-btns > a{
  position:relative;
  width:3em;height:3em;flex:none;
  border-radius:50%;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
  transition:transform .45s cubic-bezier(.625,.05,0,1),
             background .3s ease, box-shadow .3s ease;
}
/* the scale pair */
.icon-btns:has(> a:hover) > a{transform:scale(.9)}
.icon-btns:has(> a:hover) > a:hover{transform:scale(1.1)}

/* tooltip, below the button so it never covers the name above it */
.icon-btns > a::after{
  content:attr(aria-label);
  position:absolute;top:calc(100% + 9px);left:50%;
  transform:translateX(-50%) translateY(-5px);
  background:#1a1a1a;color:#fff;
  font-family:var(--font-body),Arial,sans-serif;
  font-size:11px;font-weight:600;line-height:1;letter-spacing:.01em;
  padding:6px 9px;border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;z-index:5;
  transition:opacity .22s ease,transform .22s ease;
}
.icon-btns > a::before{
  content:'';position:absolute;top:calc(100% + 4px);left:50%;
  transform:translateX(-50%) translateY(-5px);
  border:5px solid transparent;border-bottom-color:#1a1a1a;
  opacity:0;pointer-events:none;z-index:5;
  transition:opacity .22s ease,transform .22s ease;
}
.icon-btns > a:hover::after,.icon-btns > a:hover::before{
  opacity:1;transform:translateX(-50%) translateY(0);
}

/* --- team cards --- */
.team-card-contact-icons{font-size:12px}          /* 3em = 36px here */
.team-card-contact-icons > a{
  background:var(--surface-sunken,#f5f6f7);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
.team-card-contact-icons > a:hover{background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.14)}
.team-card-contact-icons img{width:16px;height:16px;display:block}
.team-card-contact-icons .team-card-wa img{width:18px;height:18px}

/* --- footer socials --- */
.footer2-social{font-size:12px}                    /* 3em = 36px here */
.footer2-social > a{
  background:rgba(255,255,255,.15);color:#fff;
  width:3em;height:3em;border-radius:50%;
}
.footer2-social > a:hover{background:#fff;color:var(--brand-600,#c8102e)}
.footer2-social svg{width:18px;height:18px;fill:currentColor}

@media (prefers-reduced-motion:reduce){
  .icon-btns:has(> a:hover) > a,
  .icon-btns:has(> a:hover) > a:hover{transform:none}
}

/* ---- nav icon buttons (right side of the bar) ----
   The three links sit in .gnav-end next to the CTA and the burger, so the
   :has() pair is scoped to the icon links themselves rather than wrapping
   them. Transparent at rest so the bar looks unchanged; the disc only
   appears on hover, tinted from currentColor so it works on the white bar
   and on the homepage's red wash alike. */
.gnav-icon-link{
  position:relative;
  width:2.4em;height:2.4em;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;
  transition:transform .45s cubic-bezier(.625,.05,0,1), background .25s ease;
}
.gnav-end:has(.gnav-icon-link:hover) .gnav-icon-link,
.gnav-center-icons:has(.gnav-icon-link:hover) .gnav-icon-link{transform:scale(.9)}
.gnav-end:has(.gnav-icon-link:hover) .gnav-icon-link:hover,
.gnav-center-icons:has(.gnav-icon-link:hover) .gnav-icon-link:hover{
  transform:scale(1.1);
  background:color-mix(in srgb,currentColor 12%,transparent);
}
/* tooltip, same treatment as the other two locations */
.gnav-icon-link::after{
  content:attr(data-tip);
  position:absolute;top:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(-5px);
  background:#1a1a1a;color:#fff;
  font-family:var(--font-body),Arial,sans-serif;
  font-size:11px;font-weight:600;line-height:1;
  padding:6px 9px;border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;z-index:120;
  transition:opacity .22s ease,transform .22s ease;
}
.gnav-icon-link::before{
  content:'';position:absolute;top:calc(100% + 3px);left:50%;
  transform:translateX(-50%) translateY(-5px);
  border:5px solid transparent;border-bottom-color:#1a1a1a;
  opacity:0;pointer-events:none;z-index:120;
  transition:opacity .22s ease,transform .22s ease;
}
.gnav-icon-link:hover::after,.gnav-icon-link:hover::before{
  opacity:1;transform:translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion:reduce){
  .gnav-end:has(.gnav-icon-link:hover) .gnav-icon-link,
  .gnav-end:has(.gnav-icon-link:hover) .gnav-icon-link:hover{transform:none}
}

/* Below 1024px the bar's icons are hidden and only the menu panel shows
   them. The existing rule hides the <img> inside each link; that worked
   while the links were bare anchors, but this component gives them a
   2.4em box, so the empty boxes were still pushing the burger past the
   right edge. Hide the links themselves. */
@media (max-width:1024px){
  .gnav-end .gnav-icon-link{display:none!important}
}

/* ---- Checkboxes (Oct 2026) ----
   One look on every page and device. The browser's own checkbox, tinted
   with accent-color, is drawn by iPhone Safari with a thick grey frame -
   inside the white round "Vergleichen" chips on the vehicle photos that
   showed as a grey ring (it was also on the filters, forms and the cookie
   options). Drawn here instead: white box, warm grey border, brand red with
   a white tick when checked. Loaded after each page's own styles. */
input[type=checkbox]{-webkit-appearance:none;appearance:none;box-sizing:border-box;width:18px;height:18px;margin:0;flex:none;
  display:inline-grid;place-content:center;vertical-align:middle;border:1.5px solid #b9b2a5;border-radius:5px;background:#fff;
  cursor:pointer;transition:background-color .15s,border-color .15s,box-shadow .15s}
/* the tick is a background image: Safari draws no ::before on a checkbox */
input[type=checkbox]:checked{border-color:var(--brand-600,#c8102e);background:var(--brand-600,#c8102e) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/78% no-repeat}
@media (hover:hover){input[type=checkbox]:hover:not(:disabled){border-color:var(--brand-600,#c8102e)}}
input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(200,16,46,.25)}
input[type=checkbox]:disabled{opacity:.45;cursor:not-allowed}
/* the round "Vergleichen" chips on the photos: the chip is the tap target,
   the box inside stays small (the phones' 24px touch-target rule would
   stretch it to fill the chip) */
.v-compare-chip input[type=checkbox]{width:14px!important;height:14px!important;min-width:0!important;min-height:0!important;border-radius:4px}
.v-compare-chip input[type=checkbox]:checked{border-color:#fff}

/* ---- consent note under "Suche speichern" (homepage pop-up and the
   Automarkt drawer) - the newsletter note's small print, on a light card */
.ss-consent-note{font-size:11.5px;line-height:1.45;color:var(--fg-muted,#6b7580);margin:12px 0 0;text-align:left}
.ss-consent-note a{color:inherit;text-decoration:underline}

/* Merkliste backdrop (ShellExport.jsx FavPanel): dims the page on phones and
   tablets, where the Automarkt's floating "Suche & Filter" tab is shown;
   on desktop it only catches the click that closes the panel */
@media (min-width:1025px){.gnav-fav-backdrop{background:transparent!important}}

/* ---- Anrufen / E-Mail under the bullet points of the service pages ----
   Anrufen = the nav's call link (call-popup.js shows the number on desktop,
   phones dial); E-Mail = anfrage@. Same pill size as "Termin jetzt buchen". */
.svc-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:900px;margin:0 auto 96px;padding:0 20px;box-sizing:border-box}
.feature-grid:has(~ .svc-contact),.feature-footnote:has(~ .svc-contact){margin-bottom:32px!important}
.svc-contact-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 32px;border-radius:100px;white-space:nowrap;
  font:700 15px/1.2 var(--font-body),Arial,sans-serif;text-decoration:none;box-sizing:border-box;transition:background-color .15s,color .15s,border-color .15s}
.svc-call{background:#141414;color:#fff;border:2px solid #141414}
.svc-call:hover{background:#000;border-color:#000}
.svc-mail{background:#fff;color:#141414;border:2px solid #141414}
.svc-mail:hover{background:#141414;color:#fff}
.svc-contact-btn:focus-visible{outline:3px solid var(--brand-600,#c8102e);outline-offset:3px}
.svc-contact-termin{margin-bottom:64px}
.svc-contact-termin #open-appointment-modal-stat{min-height:52px;box-sizing:border-box}
@media (max-width:640px){.svc-contact{margin-bottom:56px}.svc-contact-btn{flex:1 1 150px;padding:14px 18px}
  .svc-contact-termin #open-appointment-modal-stat{flex:1 1 100%}}
.ins-sections:has(+ .svc-contact){margin-bottom:32px!important;padding-bottom:0!important}