/* =============================================================
   Adam Haustechnik – Standorte / Einsatzgebiete (locations.php)
   Rebuilt: card-based directory, built to scale to many more
   location pages over time. Depends on tokens from css/global.css.
============================================================= */

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }

.locations-page main{ background:var(--c-bg-alt); }

/* ============= 1. HERO =============================================
   Dark hero consistent with the rest of the site, but the search
   field lives INSIDE the hero — the primary action, front and
   center, instead of buried further down the page. ============= */
.loc-hero{
  position:relative;
  background:var(--c-dark, #061122);
  color:#fff;
  padding:6rem 0 8.5rem;
  overflow:hidden;
  isolation:isolate;
}
.loc-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url('/img/locations-maps.webp');
  background-size:cover;
  background-position:center right;
  opacity:.28;
  -webkit-mask-image:linear-gradient(to right, transparent 22%, #000 92%);
          mask-image:linear-gradient(to right, transparent 22%, #000 92%);
  z-index:-2;
}
.loc-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 100% 20%, rgba(239,73,51,.32), transparent 55%),
    linear-gradient(100deg, rgba(6,17,34,.96) 0%, rgba(6,17,34,.72) 62%, rgba(6,17,34,.28) 100%);
  z-index:-1;
}
.loc-hero__inner{ position:relative; max-width:760px; }

.loc-breadcrumb{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  list-style:none;
  padding:.5rem 1.05rem;
  margin:0 0 1.75rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
  border-radius:50px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.loc-breadcrumb li{ display:inline-flex; align-items:center; gap:.6rem; }
.loc-breadcrumb a{ color:rgba(255,255,255,.78); text-decoration:none; transition:color .2s; }
.loc-breadcrumb a:hover{ color:#fff; }
.loc-breadcrumb li+li::before{ content:"/"; color:rgba(255,255,255,.35); }
.loc-breadcrumb .current{ color:#fff; }

.loc-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-weight:700;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--primary); margin-bottom:1rem;
}
.loc-eyebrow i{ font-size:.9em; }

.loc-hero h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.1rem, 4vw, 3.1rem) !important;
  line-height:1.12;
  margin:0 0 1.1rem;
  letter-spacing:-.01em;
      color: white;
}
.loc-hero h1 span{ color:var(--primary); }

.loc-hero__lead{
  font-size:1.06rem;
  line-height:1.7;
  color:rgba(255,255,255,.78);
  max-width:56ch;
  margin:0 0 2.25rem;
}

/* Search box inside hero */
.loc-hero__search{
  display:flex;
  align-items:center;
  gap:.6rem;
  background:rgba(255,255,255,.98);
  border-radius:var(--radius-pill);
  padding:.55rem .6rem .55rem 1.35rem;
  box-shadow:var(--shadow-lg);
  max-width:520px;
}
.loc-hero__search i{ color:var(--c-muted); font-size:1.05rem; }
.loc-hero__search input{
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  font-family:var(--font-body);
  font-size:.98rem;
  color:var(--c-text);
  min-width:0;
}
.loc-hero__search input::placeholder{ color:var(--c-muted); }
.loc-hero__search button{
  flex:none;
  border:0;
  cursor:pointer;
  background:var(--primary);
  color:#fff;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.88rem;
  padding:.72rem 1.35rem;
  border-radius:var(--radius-pill);
  transition:background var(--transition);
  white-space:nowrap;
}
.loc-hero__search button:hover{ background:var(--primary-hover); }

/* Stat chips */
.loc-hero__stats{
  display:flex; flex-wrap:wrap; gap:.75rem 1.6rem;
  margin-top:2.1rem;
}
.loc-hero__stats div{ display:flex; align-items:baseline; gap:.5rem; }
.loc-hero__stats strong{
  font-family:var(--font-display); font-weight:800;
  font-size:1.5rem; color:#fff;
}
.loc-hero__stats span{
  font-size:.85rem; color:rgba(255,255,255,.62);
}

 
.loc-toolbar-wrap{ position:relative; z-index:3; margin-top:-4.75rem; }

.az-toolbar{
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:1.4rem 1.5rem;
  display:flex;
  flex-direction:column;
  gap:1.1rem;
}

.az-toolbar__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

.az-search__count{
  font-family:var(--font-display); font-weight:600;
  font-size:.92rem; color:var(--c-text-soft);
  white-space:nowrap;
  display:flex; align-items:center; gap:.55rem;
}
.az-search__count::before{
  content:"";
  width:8px; height:8px; border-radius:50%;
  background:var(--c-success, #10b981);
  flex:none;
}

.view-toggle{ display:flex; gap:.3rem; background:var(--c-bg-alt); border-radius:var(--radius-pill); padding:.25rem; flex:none; }
.view-toggle button{
  border:0; background:transparent; cursor:pointer;
  width:38px; height:34px; border-radius:var(--radius-pill);
  color:var(--c-text-soft); font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--transition), color var(--transition);
}
.view-toggle button.is-active{ background:var(--c-dark); color:#fff; }
.view-toggle button:hover:not(.is-active){ background:#fff; color:var(--c-text); }

 
.az-nav{ overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; }
.az-nav::-webkit-scrollbar{ display:none; }
.az-nav ul{
  list-style:none; display:flex; gap:.4rem;
  margin:0; padding:.15rem 0;
}
.az-nav li{ scroll-snap-align:start; flex:none; }
.az-letter{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  border-radius:10px;
  font-family:var(--font-display); font-weight:700; font-size:.88rem;
  color:var(--c-text-soft);
  background:var(--c-bg-alt);
  text-decoration:none;
  transition:background var(--transition), color var(--transition), transform var(--transition);
}
a.az-letter:hover{ background:var(--primary-l); color:var(--primary-hover); transform:translateY(-2px); }
a.az-letter.is-active{ background:var(--primary); color:#fff; }
.az-letter--disabled{ opacity:.35; cursor:default; }

 
.directory-index{ padding:4rem 0 5rem; }

/* List view: letter sections sit side-by-side in a grid instead of
   stacking full-width down the page; each section's cities collapse
   into a compact single-column list underneath its letter. */
.az-list.view-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:0 2.5rem;
  align-items:start;
}
.az-list.view-list .az-section{ margin-bottom:1.75rem; }
.az-list.view-list .az-grid{ grid-template-columns:1fr; gap:.4rem; }
.az-list.view-list .az-item a{
  padding:.55rem .8rem;
  border-radius:8px;
}

.az-section{ margin-bottom:2.75rem; scroll-margin-top:calc(var(--header-h, 76px) + 190px); }
.az-section__heading{
  display:flex; align-items:center; gap:1rem;
  font-family:var(--font-display); font-weight:800; margin:0 0 1.15rem;
}
.az-section__heading span{
  flex:none;
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  background:var(--c-dark);
  color:#fff;
  font-size:1.15rem !important;
}
.az-section__heading::after{ content:""; flex:1; height:1px; background:var(--c-border); }

.az-grid{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:.75rem;
}
.az-item{
  opacity:0; transform:translateY(6px);
  animation:azFadeIn .45s ease forwards;
}
@keyframes azFadeIn{ to{ opacity:1; transform:none; } }

.az-item a{
  display:flex; align-items:center; gap:.65rem;
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:12px;
  padding:.85rem 1.05rem;
  text-decoration:none;
  color:var(--c-text);
  font-weight:600;
  font-size:.94rem;
  transition:border-color var(--transition), box-shadow var(--transition), color var(--transition), transform var(--transition);
}
.az-item a i{ color:var(--primary); font-size:.85rem; flex:none; }
.az-item a:hover{
  border-color:transparent;
  box-shadow:0 8px 20px rgba(15,23,42,.09);
  color:var(--primary-hover);
  transform:translateY(-2px);
}

.az-empty{
  display:none;
  text-align:center;
  padding:3rem 1rem;
  color:var(--c-text-soft);
  font-size:1rem;
}
.az-empty a{ color:var(--primary); font-weight:700; text-decoration:none; }
.az-empty a:hover{ text-decoration:underline; }

/* ============= 5. CLOSING CTA ========================================= */
.loc-cta{
  position:relative;
  background:var(--c-dark);
  color:#fff;
  padding:4.5rem 0;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
.loc-cta::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(239,73,51,.28), transparent 60%);
  z-index:-1;
}
.loc-cta h2{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.5rem, 3vw, 2.1rem) !important;
  margin:0 0 .85rem;
      color: white;
}
.loc-cta p{
  color:rgba(255,255,255,.75);
  max-width:52ch; margin:0 auto 1.75rem;
  line-height:1.65;
}

/* ============= 6. RESPONSIVE =========================================== */
@media (max-width: 1024px){
  .az-grid{ grid-template-columns:repeat(3, 1fr); }
  .loc-toolbar-wrap{ margin-top:-3.5rem; }
}

@media (max-width: 768px){
  .loc-hero{ padding:4.5rem 0 7rem; }
  .az-grid{ grid-template-columns:repeat(2, 1fr); }
  .az-toolbar{ padding:1.15rem; }
  .az-toolbar__row{ flex-direction:column; align-items:stretch; }
  .view-toggle{ align-self:flex-end; }
}

@media (max-width: 480px){
  .az-grid{ grid-template-columns:1fr; }
  .az-list.view-list{ grid-template-columns:repeat(2, 1fr); gap:0 1.25rem; }
  .loc-hero__search{ flex-wrap:wrap; border-radius:var(--radius-lg); padding:.9rem; }
  .loc-hero__search button{ width:100%; }
  .loc-hero__stats{ gap:1rem 1.4rem; }
}

@media (prefers-reduced-motion: reduce){
  .az-item{ animation:none; opacity:1; transform:none; }
  .az-item a, .az-letter{ transition:none; }
}