/* =============================================================================
   LOCAL SEO COMPONENTS
   Everything the local landing pages need that the rest of the site does not:
   the "in Ihrer Nähe" link block, the price table and the hub link lists.

   Deliberately a separate stylesheet rather than an append to real.css:
   real.css is versioned with BEMUAR_VER, and a Cloudflare-cached real.css
   under an already-published version number would not be re-fetched. This file
   carries its own version (BEMUAR_LOCAL_VER in inc/local-seo.php) and loads
   after real.css, so it still gets the last word.

   REVERT: delete this file and inc/local-seo.php, drop the require at the
   bottom of inc/seo.php. Nothing else references these class names.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. LOCAL LINK BLOCK — printed under every local landing page by
   inc/local-seo.php. Reads as a signpost, not as a keyword dump: one calm
   heading, wrapped pill links, one sentence for the places we have no page for.
   -------------------------------------------------------------------------- */
.local-links-sec{ padding-top:0; }
.local-links{
  border-top:1px solid var(--border,#E2E5EA);
  padding-top:clamp(24px,4vw,40px);
}
.local-links-head{
  font-size:clamp(1.05rem,2.2vw,1.25rem);
  margin:0 0 14px;
  color:var(--text,#0A1016);
  letter-spacing:-.01em;
}
.local-links-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px 10px;
}
.local-links-list li{ margin:0; }
.local-links-list a{
  display:inline-block;
  padding:7px 13px;
  border:1px solid var(--border,#E2E5EA);
  border-radius:6px;
  font-size:.92rem;
  line-height:1.3;
  color:var(--muted,#5F6B79);
  text-decoration:none;
  transition:color .2s, border-color .2s, background-color .2s;
}
.local-links-list a:hover,
.local-links-list a:focus-visible{
  color:var(--text,#0A1016);
  border-color:var(--primary,#3B55E6);
  background:var(--bmx-tint,#E3E6EB);
}
.local-links-foot{
  margin:16px 0 0;
  font-size:.9rem;
  color:var(--faint,#8A93A0);
  max-width:62ch;
}
.local-links-foot a{ color:var(--muted,#5F6B79); }
.local-links-foot a:hover{ color:var(--text,#0A1016); }

/* The region rows grew from 3 to 4 — keep them readable on a phone. */
.footer-region-row{ line-height:1.9; }

/* -----------------------------------------------------------------------------
   2. PRICE TABLE + HUB LISTS — used by the local landing pages
   (_local/lib.php renders both). Plain, readable, no zebra stripes.
   -------------------------------------------------------------------------- */
.price-table{
  width:100%;
  border-collapse:collapse;
  margin:20px 0 12px;
  font-size:.95rem;
}
.price-table th,
.price-table td{
  text-align:left;
  padding:11px 12px;
  border-bottom:1px solid var(--border,#E2E5EA);
  vertical-align:top;
}
.price-table th{
  font-weight:600;
  color:var(--text,#0A1016);
  border-bottom-width:2px;
}
.price-table td:last-child{
  color:var(--muted,#5F6B79);
  white-space:normal;
}
@media (max-width:560px){
  .price-table, .price-table tbody, .price-table tr, .price-table td{ display:block; width:100%; }
  .price-table thead{ display:none; }
  .price-table tr{ border-bottom:1px solid var(--border,#E2E5EA); padding:10px 0; }
  .price-table td{ border:0; padding:2px 0; }
  .price-table td:first-child{ font-weight:600; color:var(--text,#0A1016); }
}

.hub-list{
  list-style:none; margin:14px 0 22px; padding:0;
  display:grid; gap:8px 16px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}
.hub-list--wide{ grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); }
.hub-list li{ margin:0; }
.hub-list a{
  display:block;
  padding:9px 12px;
  border:1px solid var(--border,#E2E5EA);
  border-radius:6px;
  text-decoration:none;
  color:var(--muted,#5F6B79);
  transition:color .2s, border-color .2s, background-color .2s;
}
.hub-list a:hover,
.hub-list a:focus-visible{
  color:var(--text,#0A1016);
  border-color:var(--primary,#3B55E6);
  background:var(--bmx-tint,#E3E6EB);
}

/* -----------------------------------------------------------------------------
   3. WORK-PROOF BAND — the three reference cards printed on every local
   landing page by _local/lib.php (bemuar_local_work_html).

   Its own component rather than a reuse of the homepage marquee: the .bmx-*
   rules live in bmx.css / bmx-v6.css, which are enqueued on roughly a dozen
   pages only. These landing pages never load them, so a .bmx-ref-card here
   would render unstyled.

   The screenshots are 720x450 (16:10). aspect-ratio pins that shape before the
   file decodes, and object-fit keeps the crop honest if a future screenshot
   comes in at a different size.
   -------------------------------------------------------------------------- */
.work-grid{
  display:grid;
  gap:clamp(18px,2.4vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-top:clamp(24px,3.5vw,40px);
}
.work-card{
  display:flex;
  flex-direction:column;
  background:var(--surface,#fff);
  border:1px solid var(--border,#E2E5EA);
  border-radius:12px;
  overflow:hidden;
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.work-card:hover,
.work-card:focus-within{
  border-color:var(--primary,#3B55E6);
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(10,16,22,.09);
}
.work-shot{
  position:relative;
  display:block;
  aspect-ratio:720/450;
  background:var(--surface-2,#F5F6F8);
  overflow:hidden;
  text-decoration:none;
}
.work-shot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  transition:transform .4s ease;
}
.work-card:hover .work-shot img{ transform:scale(1.035); }
.work-badge{
  position:absolute;
  left:10px; bottom:10px;
  padding:5px 10px;
  border-radius:999px;
  font-size:.74rem;
  line-height:1.3;
  letter-spacing:.01em;
  color:#fff;
  /* A hairline keeps the chip readable as a chip on the dark screenshots
     (SE Group, ShiftCV), where the translucent fill alone melts into the shot. */
  background:rgba(12,20,30,.72);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.work-body{
  padding:clamp(14px,2vw,20px);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.work-body h3{
  margin:0;
  font-size:1.08rem;
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--text,#0A1016);
}
.work-body p{
  margin:0;
  font-size:.94rem;
  line-height:1.6;
  color:var(--muted,#5F6B79);
}
.work-domain{ font-size:.85rem !important; }
.work-domain a{
  color:var(--primary,#3B55E6);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.work-domain a:hover,
.work-domain a:focus-visible{ border-bottom-color:currentColor; }
.work-note{
  margin:clamp(18px,2.5vw,26px) 0 0;
  text-align:center;
  font-size:.88rem;
  color:var(--faint,#8A93A0);
}
.work-note a{ color:var(--muted,#5F6B79); }
.work-note a:hover{ color:var(--text,#0A1016); }

/* Motion-sensitive visitors get the card, not the lift and the zoom. */
@media (prefers-reduced-motion:reduce){
  .work-card,
  .work-shot img{ transition:none; }
  .work-card:hover{ transform:none; }
  .work-card:hover .work-shot img{ transform:none; }
}

/* -----------------------------------------------------------------------------
   4. SERVICE PHOTO — one CC0 photograph of the work the page sells (web
   design, SEO, network cabinets, security cameras, restaurants), printed by
   bemuar_local_photo_html() in inc/local-seo.php.

   It replaced the town and district photos on 2026-09-26 (owner decision).
   No caption: CC0 needs no credit line, and a sentence restating the alt text
   under a desk photo is noise.

   840px, the width of the intro text column, so the picture lines up with the
   words above it — and the 1024px sources stay close to their own size.
   -------------------------------------------------------------------------- */
.service-shot{
  margin:0 auto;
  max-width:840px;
}
.service-shot img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--border,#E2E5EA);
  background:var(--surface-2,#F5F6F8);
}
/* Added straight after the intro on seeded pages that never had a place
   photo: no top padding, so it reads as the end of the intro. */
.service-shot-sec{ padding-top:0; }

@media (max-width:560px){
  .service-shot img{ aspect-ratio:4/3; }
}

/* -----------------------------------------------------------------------------
   5. SISTER-SITE NOTE — the resmuar.de cross-link printed on ten gastro pages
   by inc/resmuar-link.php.

   Deliberately quiet. This is a signpost saying "the same company also runs a
   finished platform", not a second call to action competing with the page's
   own. A loud box here would read as an ad on our own page and pull attention
   away from the enquiry the page is built around.
   -------------------------------------------------------------------------- */
.resmuar-sec{ padding-top:0; }
.resmuar-note{
  max-width:840px;
  margin-inline:auto;
  padding:16px 18px;
  border:1px solid var(--border,#E2E5EA);
  border-left-width:3px;
  border-left-color:var(--primary,#3B55E6);
  border-radius:8px;
  background:var(--surface,#fff);
}
.resmuar-note p{
  margin:0;
  font-size:.96rem;
  line-height:1.65;
  color:var(--muted,#5F6B79);
}
.resmuar-note a{
  color:var(--primary,#3B55E6);
  text-decoration:none;
  border-bottom:1px solid currentColor;
}
.resmuar-note a:hover,
.resmuar-note a:focus-visible{ color:var(--text,#0A1016); }

/* --------------------------------------------------------------------------
   5b. THE SAME NOTE, WITH A PRODUCT SHOT — the five gastro product pages.

   WHY A SHOT AT ALL: on those five pages the sentence claims we also run a
   finished platform. A claim about software with nothing to look at is the
   weakest thing on the page. The screenshots come from the product's own
   site, so this shows the real thing rather than a stock photo of a laptop.

   WHY IT STAYS INSIDE THE NOTE: it is still a signpost, not a second offer.
   Giving it its own full-width band would put a competing call to action
   above the enquiry form the page is built around.
   -------------------------------------------------------------------------- */
.resmuar-note--shot{
  max-width:980px;
  display:grid;
  gap:clamp(14px,2vw,22px);
  align-items:center;
  /* Text first and full width until there is room for two columns; the
     sentence is what carries the link, the picture only supports it. */
  grid-template-columns:1fr;
}
@media (min-width:760px){
  .resmuar-note--shot{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); }
}

.resmuar-shot{ margin:0; min-width:0; }
.resmuar-shot a{
  display:block;
  border:1px solid var(--border,#E2E5EA);
  border-radius:8px;
  overflow:hidden;
  /* The panel shots are 1200x703, the guest shots taller. A fixed ratio with
     cover keeps the five pages looking like one set instead of five heights. */
  aspect-ratio:1200/703;
  background:var(--surface-2,#F5F6F8);
}
.resmuar-shot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
}
.resmuar-shot figcaption{
  margin-top:7px;
  font-size:.82rem;
  line-height:1.5;
  color:var(--faint,#8A93A0);
}