/* Quiet beige selection, shared by the full header and compact phone bar. */
.masthead .primary-areas a[aria-current="page"],
.masthead .primary-areas a[aria-current="page"]:is(:hover,:focus-visible,:active,.touch-near,.pointer-near) {
  --action-gold:#765726;
  background:#e9e3d8;
  color:#765726;
  text-decoration:none;
}
@media (max-width:700px), (max-width:1100px) and (max-height:600px) and (hover:none) and (pointer:coarse) {
  .mobile-scrollbar {
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:6px;
    padding:3px 8px;
  }
  .mobile-scrollbar .mobile-primary-areas {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    min-width:0;
    border:0;
    padding:0 2px;
    gap:2px;
  }
  .mobile-scrollbar .mobile-primary-areas::before {
    content:"";
    position:absolute;
    inset:6px 0;
    border:1px solid var(--line);
    pointer-events:none;
  }
  .mobile-scrollbar .mobile-primary-areas a {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:8px 4px;
    white-space:normal;
    text-align:center;
    line-height:1.2;
    font-weight:700;
    color:var(--ink);
    text-decoration:none;
  }
  .mobile-scrollbar .mobile-primary-areas a[aria-current="page"],
  .mobile-scrollbar .mobile-primary-areas a[aria-current="page"]:is(:hover,:focus-visible,:active,.touch-near,.pointer-near) {
    /* A 28px visual box inside the unchanged easy-to-tap 44px area. */
    background:linear-gradient(to bottom,transparent 8px,#e9e3d8 8px,#e9e3d8 calc(100% - 8px),transparent calc(100% - 8px));
    color:#765726;
    text-decoration:none;
  }
  .mobile-scrollbar .mobile-primary-areas a:focus-visible {
    outline:2px solid #765726;
    outline-offset:1px;
  }
  .mobile-scrollbar > .header-contact { padding:6px 2px; }
  .mobile-scrollbar .languages .language-toggle { min-width:64px; padding:6px 2px; }
}
@media (max-width:360px) {
  .mobile-scrollbar { gap:4px; }
  .mobile-scrollbar a { font-size:.875rem; }
  .mobile-scrollbar .mobile-primary-areas a { padding-inline:3px; }
}
/* Approved black comparison: both area labels keep the same ink in every state. */
.masthead .primary-areas a,
.mobile-scrollbar .mobile-primary-areas a {
  --action-gold:#191b1c!important;
  color:#191b1c!important;
}
:is(.masthead .primary-areas a,.mobile-scrollbar .mobile-primary-areas a):is(:link,:visited,:hover,:focus-visible,:active,.touch-near,.pointer-near) {
  --action-gold:#191b1c!important;
  color:#191b1c!important;
}
/* Approved shared selection marker: no changes to link size or scroll geometry. */
.masthead .primary-areas a,
.mobile-scrollbar .mobile-primary-areas a,
.area-shortcuts > a {
  position:relative;
}
:is(.masthead .primary-areas a,.mobile-scrollbar .mobile-primary-areas a,.area-shortcuts > a):is(:link,:visited,:hover,:focus-visible,:active,.touch-near,.pointer-near) {
  text-decoration:none!important;
}
.masthead .primary-areas a[aria-current="page"]::after,
.mobile-scrollbar .mobile-primary-areas a[aria-current="page"]::after,
.area-shortcuts > a[aria-current="location"]::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:7px;
  width:28px;
  height:2px;
  transform:translateX(-50%);
  background:#b48740;
  pointer-events:none;
}
.mobile-scrollbar .mobile-primary-areas a[aria-current="page"]::after {
  bottom:9px;
}
/* The inset highlight preserves the measured shortcut widths and sticky height. */
.area-shortcuts > a {
  isolation:isolate;
}
.area-shortcuts > a[aria-current="location"],
.area-shortcuts > a[aria-current="location"]:is(:hover,:focus-visible,:active,.touch-near,.pointer-near) {
  color:#191b1c;
}
.area-shortcuts > a[aria-current="location"]::before {
  content:"";
  position:absolute;
  inset:-8px -10px;
  background:#f4efe5;
  z-index:-1;
  pointer-events:none;
}
.area-shortcuts > a[aria-current="location"]::after {
  /* Match the main selector's approx. 4px gap beneath the visible text. */
  bottom:-2px;
}
/* Hover is a link cue, not a selected state. Touch keeps the approved selection. */
@media (hover:hover) and (pointer:fine) {
  :is(.masthead .primary-areas a,.mobile-scrollbar .mobile-primary-areas a,.area-shortcuts > a):hover {
    text-decoration-line:underline!important;
    text-decoration-thickness:1px!important;
    text-underline-offset:3px;
  }
  .masthead .primary-areas a:hover:not([aria-current="page"]),
  .mobile-scrollbar .mobile-primary-areas a:hover:not([aria-current="page"]) {
    background:transparent;
  }
}
/* Let the German FAQ title use the available desktop width; keep natural wrapping. */
@media (min-width:1100px) {
  html[lang="de-CH"] .atelier-page #fragen .section-heading {
    max-width:none;
  }
}