/* Homepage + book.html styles, rebuilt outward from the Apple-style concept
   (design/concepts/concept-apple-style.html): 44px dark translucent nav,
   system type stack, #0071e3 accent, quiet greys, 18px radius.
   booking-form.css styles the shared form. */

:root{
  /* Measured at runtime by nav.js — never hardcode: the hero offset and the
     mobile-menu overlay both read it, and it must agree with reality. */
  --nav-h: 44px;
  --font-sans: -apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --font-mono: "SF Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --bg:      #ffffff;
  --bg2:     #f5f5f7;
  --surface: #ffffff;
  --border:  rgba(0,0,0,0.08);
  --line:    #d2d2d7;
  --text:    #1d1d1f;
  --text2:   #6e6e73;
  --accent:  #0071e3;
  --accent2: #0058b8;
  --gold:    #7a6000;
  --green:   #1a6b3a;
  --err:     #cc0000;
  --gradient:linear-gradient(135deg,#0071e3,#0058b8);
  --shadow:  0 2px 12px rgba(0,0,0,0.06);
  --radius:  18px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  background:var(--bg); color:var(--text);
  overflow-x:hidden;
}
img,svg,iframe{ max-width:100%; }

/* ── NAV — the concept's 44px dark translucent strip ── */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100; height:44px;
  background:rgba(0,0,0,0.8);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:flex; align-items:center; justify-content:center;
}
.nav-inner{
  width:100%; max-width:1100px; padding:0 1.25rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav-logo{
  display:flex; align-items:center; gap:8px;
  font-size:1rem; font-weight:600; letter-spacing:-.01em;
  color:#fff; text-decoration:none; white-space:nowrap;
}
.nav-logo img{ width:26px; height:26px; border-radius:50%; object-fit:contain; }
.nav-links{ display:flex; gap:1.4rem; align-items:center; }
.nav-links a{
  font-size:.72rem; font-weight:400; letter-spacing:.01em; white-space:nowrap;
  color:rgba(255,255,255,.82); text-decoration:none; transition:color .15s;
}
.nav-links a:hover{ color:#fff; }
.nav-links a.nav-book{
  color:#fff; background:var(--accent); font-weight:500;
  padding:.3rem .85rem; border-radius:980px;
}
.nav-links a.nav-book:hover{ background:var(--accent2); }

/* ── HAMBURGER (white, lives inside the 44px bar) ── */
.hamburger{
  display:none;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
  background:none; border:none; cursor:pointer;
  width:44px; height:44px; margin-right:-10px;
  -webkit-tap-highlight-color:transparent;
}
.hamburger span{
  display:block; width:20px; height:2px;
  background:#fff; border-radius:2px;
  transition:all .3s ease; transform-origin:center;
}
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── MOBILE MENU — dark sheet under the dark bar ── */
.mobile-menu{
  display:none;
  position:fixed; top:var(--nav-h); left:0; right:0; bottom:0; z-index:99;
  background:rgba(0,0,0,0.92);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.mobile-menu.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.mobile-menu-inner{
  max-width:480px; margin:0 auto;
  padding:1.5rem 1.5rem calc(2rem + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:.1rem;
}
.mob-link{
  display:block; padding:.85rem .5rem;
  font-size:1.25rem; font-weight:600; letter-spacing:-.02em;
  color:#f5f5f7; text-decoration:none; border-radius:10px;
}
.mob-link:active{ color:#fff; background:rgba(255,255,255,.06); }
.mob-sub{ font-size:.95rem !important; font-weight:400 !important; color:#a1a1a6 !important; padding-left:1.4rem !important; }
.mob-divider{ height:1px; background:rgba(255,255,255,.14); margin:.9rem 0; }
.mob-appt{
  display:flex; align-items:center; gap:10px;
  padding:.9rem 1.1rem; margin-bottom:.5rem; min-height:44px;
  font-size:1rem; font-weight:600; color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.22); border-radius:12px;
}
.mob-appt:active{ background:rgba(255,255,255,.08); }
.mob-call{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:.95rem 1.1rem; min-height:48px;
  font-size:1.05rem; font-weight:600; color:#fff; text-decoration:none;
  background:var(--accent); border-radius:12px;
}
.mob-call:active{ background:var(--accent2); }

/* ── HERO — "Repair." + one line + the booking card. Nothing else. ── */
.hero{
  padding:calc(var(--nav-h) + 3.5rem) 1.5rem 4rem;
  text-align:center; background:var(--bg);
}
.hero h1{
  font-size:clamp(2.8rem,7vw,5.6rem); font-weight:600; letter-spacing:-.02em;
  line-height:1.05; margin-bottom:.6rem;
}
.hero h1 .thin{ font-weight:400; color:var(--text2); display:block; font-size:.5em; margin-top:.3em; letter-spacing:-.01em; }
.hero-sub{
  font-size:1.25rem; color:var(--text2); font-weight:400; line-height:1.5;
  max-width:620px; margin:.9rem auto 1.75rem;
}
.hero-booking{
  max-width:560px; margin:0 auto; text-align:left;
  background:var(--bg2); border-radius:28px; padding:2rem 1.5rem;
  scroll-margin-top:calc(var(--nav-h) + 1rem);
}

/* ── DARK FEATURE — the concept's full-bleed certification band ── */
.feature-dark{ background:#000; color:#fff; text-align:center; padding:5.5rem 1.5rem; }
@media(max-width:900px){ .feature-dark{ padding:3.5rem 1.25rem; } }
.feature-dark .section-label{ color:#86868b; }
.feature-dark h2{
  font-size:clamp(2rem,4.5vw,3.6rem); font-weight:600; letter-spacing:-.02em;
  line-height:1.15; max-width:800px; margin:0 auto 1rem;
}
.feature-dark p{ color:#a1a1a6; font-size:1.1rem; line-height:1.6; max-width:620px; margin:0 auto; }
.feature-dark p a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.feature-pills{
  display:flex; flex-wrap:wrap; gap:.4rem .5rem; justify-content:center;
  margin-top:1.4rem; color:#86868b;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em;
}
.feature-pills span + span::before{ content:"· "; }
.feature-badges{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:2rem; }
.feature-badges img{
  width:132px; height:132px; object-fit:contain;
  background:#fff; border-radius:12px;
}

/* ── SECTION BASE ── */
section{ padding:5.5rem 1.5rem; }
.section-inner{ max-width:1100px; margin:0 auto; }
.section-head{ text-align:center; max-width:680px; margin:0 auto 2.25rem; }
.section-label{ font-size:.95rem; color:var(--text2); font-weight:600; margin-bottom:.5rem; }
.section-title{ font-size:clamp(2rem,4vw,3rem); font-weight:600; letter-spacing:-.02em; line-height:1.15; margin-bottom:.8rem; }
.section-sub{ color:var(--text2); font-size:1.1rem; line-height:1.6; }
.link-blue{ color:var(--accent); text-decoration:none; font-weight:400; }
.link-blue:hover{ text-decoration:underline; }

/* ── REPAIRS WE DO — quiet link list; the SEO-page links, no card chrome ── */
#services{ padding:3.5rem 1.5rem; scroll-margin-top:var(--nav-h); }
#services .section-head{ margin-bottom:1.5rem; }
.svc-list{ list-style:none; max-width:680px; margin:0 auto; border-top:1px solid var(--border); }
.svc-list a{
  display:block; padding:.65rem .2rem; min-height:44px;
  border-bottom:1px solid var(--border); text-decoration:none; color:inherit;
  line-height:1.45;
}
.svc-list strong{ font-size:.95rem; font-weight:600; color:var(--accent); margin-right:.5rem; }
.svc-list span{ font-size:.8rem; color:var(--text2); }
.svc-list a:hover strong{ text-decoration:underline; }
.services-note{
  max-width:680px; text-align:center; color:var(--text2);
  font-size:.82rem; margin:1.5rem auto 0; line-height:1.65;
}

/* ── PROOF — quote slab + one scrollable row of real reviews ── */
#reviews{ background:linear-gradient(160deg,#f5f5f7,#e8e8ea); scroll-margin-top:var(--nav-h); }
.quote-stars{ color:#f5b400; font-size:1.1rem; letter-spacing:2px; margin-bottom:1rem; text-align:center; }
.quote-slab blockquote{
  font-size:clamp(1.4rem,3vw,2.1rem); font-weight:500; letter-spacing:-.01em; line-height:1.35;
  max-width:780px; margin:0 auto 1.2rem; text-align:center;
}
.quote-slab cite{ display:block; text-align:center; font-size:.95rem; color:var(--text2); font-style:normal; }
.rating-row{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:.75rem 1.25rem; margin:1.75rem 0 1.5rem;
}
.rating-count{ font-size:.9rem; color:var(--text2); }
.source-pill{
  font-size:.72rem; padding:5px 12px; border-radius:50px; min-height:28px;
  background:var(--surface); border:1px solid var(--border); color:var(--text2);
  text-decoration:none; display:inline-flex; align-items:center; gap:4px;
}
/* Scroll-snap row, no JS. The track is allowed past the right edge; each card
   takes width (not only min-width) so flex-shrink:0 cannot size it to its
   unwrapped text — the 1230px-wide-card bug. */
.carousel-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; padding-bottom:.75rem; }
.carousel-track{ display:flex; gap:1.25rem; width:max-content; }
.review-card{
  width:min(320px, 82vw); min-width:min(320px, 82vw); flex-shrink:0;
  scroll-snap-align:start;
  background:#fff; border-radius:var(--radius); padding:1.75rem;
  box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.review-stars{ color:#f5b400; font-size:.85rem; letter-spacing:2px; margin-bottom:.9rem; }
.review-text{ font-size:.9rem; line-height:1.65; margin-bottom:1.25rem; }
.reviewer{ display:flex; align-items:center; gap:10px; }
.reviewer-avatar{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:.88rem; color:#fff;
}
.reviewer-name{ font-size:.875rem; font-weight:600; }
.reviewer-source{ font-size:.72rem; color:var(--text2); }
.reviewer-source a{ color:inherit; text-decoration:none; }
.review-ctas{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top:1.5rem; }

/* ── HOW IT WORKS — four steps, with mail-in as the variant ── */
#how{ background:var(--bg); }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem 1.25rem; }
.step{ text-align:center; padding:0 .5rem; }
.step-num{
  width:50px; height:50px; border-radius:50%; margin:0 auto 1rem;
  background:var(--bg2); display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:1rem;
}
.step-title{ font-size:.95rem; font-weight:600; margin-bottom:.4rem; }
.step-desc{ font-size:.82rem; color:var(--text2); line-height:1.6; }

#mailin{
  max-width:860px; margin:3rem auto 0; text-align:center;
  border-top:1px solid var(--border); padding-top:2.5rem;
  scroll-margin-top:var(--nav-h);
}
#mailin h3{ font-size:1.6rem; font-weight:600; letter-spacing:-.01em; margin-bottom:.6rem; }
#mailin > p{ color:var(--text2); font-size:.95rem; line-height:1.6; max-width:560px; margin:0 auto 1.25rem; }
.mi-details{ text-align:left; }
.mi-details > summary{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  max-width:420px; margin:0 auto; min-height:48px;
  background:var(--accent); color:#fff; font-weight:500; font-size:1rem;
  border-radius:980px; padding:.8rem 1.6rem;
}
.mi-details > summary::-webkit-details-marker{ display:none; }
.mi-details > summary:hover{ background:var(--accent2); }
.mi-details[open] > summary{ background:var(--bg2); color:var(--text); margin-bottom:1.75rem; }
.mailin-after{ margin-top:1.5rem; font-size:.9rem; }

/* ── MAIL-IN WIZARD (inside the details) ── */
.mailin-card{
  max-width:820px; margin:0 auto;
  background:var(--bg2); border-radius:28px; padding:2.5rem;
  position:relative; overflow:hidden;
}
.mi-progress{ display:flex; gap:5px; margin-bottom:2rem; }
.mi-seg{ flex:1; height:3px; border-radius:3px; background:rgba(0,0,0,.08); transition:background .4s; }
.mi-seg.done{ background:var(--accent); }
.mi-seg.active{ background:var(--accent2); }
.mi-panel{ display:none; animation:miIn .3s ease; }
.mi-panel.active{ display:block; }
@keyframes miIn{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.mi-panel-title{ font-size:1.35rem; font-weight:600; margin-bottom:4px; }
.mi-panel-sub{ color:var(--text2); font-size:.88rem; margin-bottom:1.8rem; }
.mi-device-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-bottom:1.5rem; }
.mi-device-card{
  background:#fff; border:1.5px solid var(--line); border-radius:12px;
  padding:16px 10px; cursor:pointer; text-align:center;
  transition:border-color .2s, transform .15s; user-select:none;
}
.mi-device-card:hover{ border-color:rgba(0,0,0,.3); transform:translateY(-2px); }
.mi-device-card.mi-sel{ border-color:var(--accent); background:rgba(0,113,227,.05); }
.mi-dicon{ font-size:1.9rem; margin-bottom:6px; display:block; }
.mi-dname{ font-size:.8rem; font-weight:600; line-height:1.3; }
.mi-dsub{ font-size:.68rem; color:var(--text2); margin-top:2px; }
.mi-issue-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:8px; margin-bottom:1.5rem; }
.mi-issue{
  display:flex; align-items:center; gap:8px; min-height:44px;
  background:#fff; border:1.5px solid var(--line); border-radius:9px;
  padding:10px 12px; cursor:pointer; transition:border-color .2s; user-select:none;
}
.mi-issue:hover{ border-color:rgba(0,0,0,.3); }
.mi-issue.mi-sel{ border-color:var(--accent); background:rgba(0,113,227,.05); }
.mi-issue-icon{ font-size:1.05rem; flex-shrink:0; }
.mi-issue-text{ font-size:.8rem; font-weight:500; }
.mi-multi-note{ font-size:.75rem; color:var(--text2); margin-bottom:.75rem; }
.mi-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mi-fg{ display:flex; flex-direction:column; gap:5px; }
.mi-fg.full{ grid-column:1/-1; }
.mi-fg label{ font-size:.72rem; font-weight:600; color:var(--text2); letter-spacing:.07em; text-transform:uppercase; }
.mi-fg input,.mi-fg select,.mi-fg textarea{
  background:#fff; border:1.5px solid var(--line); border-radius:10px; padding:10px 13px;
  /* 16px minimum: anything smaller makes iOS Safari zoom the page when the
     field is focused, breaking the layout mid-form. */
  color:var(--text); font-family:inherit; font-size:1rem;
  transition:border-color .2s; outline:none;
}
.mi-fg input:focus,.mi-fg select:focus,.mi-fg textarea:focus{ border-color:var(--accent); }
.mi-fg textarea{ resize:vertical; min-height:85px; }
.mi-ship-opts{ display:flex; flex-direction:column; gap:7px; margin:1rem 0 1.5rem; }
.mi-ship{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1.5px solid var(--line); border-radius:10px;
  padding:11px 15px; cursor:pointer; transition:border-color .2s;
}
.mi-ship:hover{ border-color:rgba(0,0,0,.3); }
.mi-ship.mi-sel{ border-color:var(--accent); background:rgba(0,113,227,.04); }
.mi-ship input{ display:none; }
.mi-ship-lbl{ display:flex; flex-direction:column; gap:2px; }
.mi-ship-name{ font-size:.88rem; font-weight:500; }
.mi-ship-desc{ font-size:.73rem; color:var(--text2); }
.mi-ship-price{ font-weight:600; font-size:.93rem; color:var(--gold); }
.mi-summary{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:1.3rem; margin-bottom:1.5rem; }
.mi-sum-row{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:7px 0; border-bottom:1px solid var(--border); font-size:.86rem;
}
.mi-sum-row:last-child{ border-bottom:none; }
.mi-sum-key{ color:var(--text2); flex-shrink:0; }
.mi-sum-val{ font-weight:500; text-align:right; max-width:62%; }
.mi-promises{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:1.5rem; }
.mi-promise{
  display:flex; align-items:flex-start; gap:9px;
  background:#fff; border:1px solid var(--border); border-radius:10px;
  padding:11px 13px; font-size:.8rem;
}
.mi-pi{ font-size:1.05rem; flex-shrink:0; margin-top:1px; }
.mi-btn-row{ display:flex; gap:9px; justify-content:flex-end; margin-top:1.5rem; flex-wrap:wrap; }
.mi-btn{
  font-family:inherit; font-weight:600; font-size:.9rem; min-height:44px;
  border:none; border-radius:980px; padding:11px 26px; cursor:pointer; transition:all .2s;
}
.mi-btn-back{ background:#fff; color:var(--text2); border:1px solid var(--line); }
.mi-btn-back:hover{ color:var(--text); border-color:rgba(0,0,0,.3); }
.mi-btn-next{ background:var(--accent); color:#fff; min-width:130px; }
.mi-btn-next:hover{ background:var(--accent2); }
.mi-btn-next:disabled{ background:#ccc; color:#999; cursor:not-allowed; }
.mi-btn-submit{ background:var(--green); color:#fff; min-width:170px; font-size:.95rem; }
.mi-btn-submit:hover{ opacity:.88; }
.mi-status{ display:none; padding:10px 14px; border-radius:10px; font-size:.85rem; margin-top:1rem; }
.mi-status.ok{ display:block; background:rgba(26,107,58,.08); border:1px solid rgba(26,107,58,.25); color:var(--green); }
.mi-status.err{ display:block; background:rgba(204,0,0,.06); border:1px solid rgba(204,0,0,.2); color:var(--err); }
.mi-success{ text-align:center; padding:2rem 1rem; }
.mi-success-icon{
  width:72px; height:72px; border-radius:50%;
  background:rgba(26,107,58,.1); border:2px solid var(--green);
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; margin:0 auto 1.4rem;
}
.mi-success h2{ font-size:1.7rem; font-weight:600; margin-bottom:8px; }
.mi-success-steps{ display:flex; flex-direction:column; gap:8px; max-width:400px; margin:1.5rem auto 0; }
.mi-next-pill{
  display:flex; align-items:center; gap:11px;
  background:#fff; border:1px solid var(--border); border-radius:11px;
  padding:12px 14px; font-size:.84rem; text-align:left;
}
.mi-next-num{
  width:26px; height:26px; border-radius:50%;
  background:rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.15);
  font-size:.72rem; font-weight:600;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px;
  background:var(--accent); color:#fff; font-weight:500; font-size:.95rem;
  padding:.7rem 1.6rem; border-radius:980px; text-decoration:none; transition:background .15s;
}
.btn-primary:hover{ background:var(--accent2); }
.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px;
  background:var(--bg2); color:var(--text); font-weight:500; font-size:.95rem;
  padding:.7rem 1.6rem; border-radius:980px; text-decoration:none;
}

/* ── FAQ — native <details> accordions; answers stay in the DOM so the
   FAQPage schema above stays truthful ── */
#faq{ background:var(--bg2); padding:3.5rem 1.5rem; scroll-margin-top:var(--nav-h); }
#faq .section-head{ margin-bottom:1.5rem; }
.faq-list{ max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:.4rem; }
.faq-item{ background:#fff; border-radius:12px; }
.faq-q{
  list-style:none; cursor:pointer; user-select:none;
  padding:.78rem 1rem; min-height:44px;
  display:flex; justify-content:space-between; align-items:center; gap:.75rem;
  font-weight:600; font-size:.88rem; line-height:1.4;
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q::after{ content:'+'; color:var(--text2); font-size:1.1rem; flex-shrink:0; }
.faq-item[open] > .faq-q::after{ content:'–'; }
.faq-a{ padding:0 1.1rem 1rem; font-size:.88rem; color:var(--text2); line-height:1.65; }
.faq-cta{ text-align:center; margin-top:1.5rem; }
.faq-cta p{ color:var(--text2); font-size:.9rem; line-height:2; }
.faq-cta a{ color:var(--accent); text-decoration:none; font-weight:500; white-space:nowrap; padding:.5rem .2rem; }

/* ── FOOTER — contact, payment, app and links live here now ── */
footer{ background:var(--bg); border-top:1px solid var(--border); padding:3rem 1.5rem 1.5rem; scroll-margin-top:var(--nav-h); }
.footer-inner{ max-width:1100px; margin:0 auto; }
/* One contact card, centered — the map iframe is gone: the address itself
   links to Google Maps. */
.footer-grid{ max-width:640px; margin:0 auto 1.5rem; }
.f-card{ background:var(--bg2); border-radius:var(--radius); padding:1.75rem; }
.f-card h3{ font-size:1.05rem; font-weight:600; margin-bottom:1rem; }
.f-rows{ display:flex; flex-direction:column; gap:.5rem; font-size:.88rem; line-height:1.5; }
.f-rows a{ color:var(--text); text-decoration:none; }
.f-rows a:hover{ color:var(--accent); }
.f-rows .muted{ color:var(--text2); font-size:.82rem; }
.f-zelle{ background:var(--bg2); border-radius:var(--radius); max-width:640px; margin:0 auto 1.5rem; }
.f-zelle > summary{
  list-style:none; cursor:pointer; user-select:none; min-height:48px;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:1rem 1.75rem; font-weight:600; font-size:.95rem;
}
.f-zelle > summary::-webkit-details-marker{ display:none; }
.f-zelle > summary::after{ content:'+'; color:var(--text2); font-size:1.2rem; }
.f-zelle[open] > summary::after{ content:'–'; }
.f-zelle-body{ padding:0 1.75rem 1.75rem; text-align:center; }
.f-zelle-body img{ width:180px; height:180px; border-radius:12px; border:4px solid #fff; box-shadow:0 4px 20px rgba(108,35,218,.18); }
.f-zelle-body p{ font-size:.875rem; color:var(--text2); line-height:1.65; margin-top:1rem; }
.f-zelle-body p a{ color:var(--accent); font-weight:600; text-decoration:none; }
.footer-meta{
  display:flex; flex-wrap:wrap; gap:0 1.25rem; justify-content:center; align-items:center;
  padding:.5rem 0; border-top:1px solid var(--border); font-size:.82rem; color:var(--text2);
}
.footer-meta a{ color:var(--text2); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; }
.footer-meta a:hover{ color:var(--text); }
/* flex-wrap stays: without it both phone numbers go off-screen on phones.
   min-height 44px keeps every link a real tap target. */
.footer-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:0 .9rem; border-top:1px solid var(--border); }
.footer-links a{ font-size:.8rem; color:var(--text2); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; padding:0 .35rem; }
.footer-links a:hover{ color:var(--text); }
.footer-copy{ text-align:center; font-size:.75rem; color:var(--text2); line-height:1.8; padding:.75rem 0 .5rem; }
.footer-copy a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }

/* ── BOOK.HTML PAGE ── */
.book-wrap{ max-width:620px; margin:0 auto; padding:calc(var(--nav-h) + 2.5rem) 1.25rem 4rem; }
/* book.html's page label (the homepage dropped its copy — it duplicated the
   nav wordmark there, but here it names the page). */
.hero-eyebrow{ font-size:.95rem; color:var(--text2); font-weight:600; margin-bottom:.5rem; }
.book-wrap h1{ font-size:clamp(2.1rem,6vw,3rem); font-weight:600; letter-spacing:-.02em; line-height:1.05; margin-bottom:.6rem; }
.book-lede{ color:var(--text2); font-size:1rem; margin-bottom:1.75rem; max-width:46ch; }
.book-after{ font-size:.82rem; color:var(--text2); margin-top:1rem; line-height:1.7; }
.book-foot{ border-top:1px solid var(--border); margin-top:2.5rem; padding-top:1.25rem; font-size:.8rem; color:var(--text2); text-align:center; }

/* ── iOS & ANDROID COMPATIBILITY ── */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
*{ -webkit-tap-highlight-color:transparent; }
a, button{ touch-action:manipulation; }
@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .mi-panel,.mobile-menu{ animation:none !important; transition:none !important; }
}

/* ── RESPONSIVE ── */
@media(max-width:1023px){
  /* Apple collapses early so the bar never wraps: one slim row, always. */
  .nav-links{ display:none; }
  .hamburger{ display:flex; }
  .mobile-menu{ display:block; }
}
@media(max-width:900px){
  .steps{ grid-template-columns:repeat(2,1fr); }
  section{ padding:4rem 1.25rem; }
  #services,#faq{ padding:2.75rem 1.25rem; }
}
@media(max-width:640px){
  section{ padding:3.25rem 1.1rem; }
  #services,#faq{ padding:2.5rem 1.1rem; }
  .hero{ padding:calc(var(--nav-h) + 2rem) 1.1rem 2.5rem; }
  .section-head{ margin-bottom:1.5rem; }
  .hero h1{ font-size:clamp(2.4rem,11vw,3.4rem); }
  .hero-sub{ font-size:1.05rem; }
  .hero-booking{ padding:1.5rem 1rem; border-radius:22px; }
  .section-title{ font-size:1.7rem; }
  .feature-badges img{ width:104px; height:104px; }
  .mi-form-grid{ grid-template-columns:1fr; }
  .mi-promises{ grid-template-columns:1fr; }
  .mailin-card{ padding:1.5rem 1.1rem; }
  .f-card{ padding:1.25rem 1.1rem; }
  footer{ padding-top:2.25rem; }
  .f-zelle > summary{ padding:1rem 1.2rem; }
  .f-zelle-body{ padding:0 1.2rem 1.4rem; }
}
@media(max-width:380px){
  .steps{ grid-template-columns:1fr 1fr; gap:1.5rem 1rem; }
  .nav-logo span{ font-size:.95rem; }
}

/* ── AI CHAT WIDGET ── */
#mnc-widget{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-family:inherit;}
#mnc-panel{width:360px;height:520px;height:min(520px,calc(100dvh - 140px));background:#0d0d0d;border-radius:20px;border:1px solid rgba(255,255,255,0.1);display:none;flex-direction:column;overflow:hidden;transform:scale(0.92) translateY(20px);opacity:0;pointer-events:none;transition:transform 0.28s cubic-bezier(.22,.68,0,1.2),opacity 0.2s ease;box-shadow:0 24px 64px rgba(0,0,0,0.45);}
#mnc-panel.open{display:flex;transform:scale(1) translateY(0);opacity:1;pointer-events:all;}
#mnc-header{padding:14px 16px;background:#111;border-bottom:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;gap:10px;flex-shrink:0;}
.mnc-av{width:38px;height:38px;border-radius:50%;background:#1d1d1f;border:1px solid rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.mnc-ht{flex:1;}
.mnc-hn{color:#f5f5f7;font-size:13.5px;font-weight:600;letter-spacing:-.01em;}
.mnc-hs{color:#6ee7b7;font-size:11px;display:flex;align-items:center;gap:4px;margin-top:2px;}
.mnc-hd{width:6px;height:6px;border-radius:50%;background:#6ee7b7;}
#mnc-x{background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.35);font-size:18px;line-height:1;padding:4px;transition:color .15s;}
#mnc-x:hover{color:rgba(255,255,255,0.75);}
#mnc-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px;scroll-behavior:smooth;}
#mnc-msgs::-webkit-scrollbar{width:3px;}
#mnc-msgs::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:4px;}
.mnc-m{max-width:86%;font-size:13.5px;line-height:1.55;}
.mnc-m.bot{align-self:flex-start;}
.mnc-m.usr{align-self:flex-end;}
.mnc-b{padding:9px 13px;border-radius:16px;}
.mnc-m.bot .mnc-b{background:#1c1c1e;color:#e8e8ea;border-bottom-left-radius:4px;border:1px solid rgba(255,255,255,0.07);}
.mnc-m.usr .mnc-b{background:#f5f5f7;color:#1d1d1f;border-bottom-right-radius:4px;}
.mnc-ty{display:flex;align-items:center;gap:4px;padding:10px 13px;}
.mnc-td{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.3);animation:mnc-bop 1.2s infinite;}
.mnc-td:nth-child(2){animation-delay:.18s;}
.mnc-td:nth-child(3){animation-delay:.36s;}
@keyframes mnc-bop{0%,80%,100%{transform:translateY(0);opacity:.3}40%{transform:translateY(-5px);opacity:.8}}
#mnc-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px;flex-shrink:0;}
.mnc-chip{background:#1c1c1e;border:1px solid rgba(255,255,255,0.1);color:#b0b0b6;font-size:11.5px;padding:5px 10px;border-radius:20px;cursor:pointer;transition:background .15s,color .15s;font-family:inherit;}
.mnc-chip:hover{background:#2a2a2e;color:#f0f0f2;}
#mnc-ir{background:#111;border-top:1px solid rgba(255,255,255,0.08);padding:11px;display:flex;gap:8px;align-items:flex-end;flex-shrink:0;}
/* 16px so iOS Safari does not zoom the page when the chat input is focused. */
#mnc-inp{flex:1;background:#1c1c1e;border:1px solid rgba(255,255,255,0.1);border-radius:12px;color:#f0f0f2;font-size:16px;padding:8px 12px;resize:none;outline:none;font-family:inherit;max-height:80px;overflow-y:auto;transition:border-color .15s;}
#mnc-inp::placeholder{color:rgba(255,255,255,0.22);}
#mnc-inp:focus{border-color:rgba(255,255,255,0.22);}
#mnc-send{width:34px;height:34px;background:#1d1d1f;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .15s,background .15s;}
#mnc-send:hover{background:#333;transform:scale(1.06);}
#mnc-send:active{transform:scale(0.94);}
#mnc-send svg{width:14px;height:14px;fill:#fff;}
#mnc-fab-w{position:relative;}
#mnc-fab{width:60px;height:60px;background:#1d1d1f;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 24px rgba(0,0,0,0.28);transition:transform .2s,background .15s;touch-action:manipulation;-webkit-tap-highlight-color:rgba(255,255,255,.1);}
#mnc-fab:hover{transform:scale(1.07);background:#333;}
#mnc-fab:active{transform:scale(0.95);}
#mnc-fab svg{width:24px;height:24px;}
.mnc-badge{position:absolute;top:-1px;right:-1px;width:14px;height:14px;background:#6ee7b7;border-radius:50%;border:2px solid #fff;}
@media(max-width:420px){#mnc-panel{width:calc(100vw - 32px);}#mnc-widget{right:16px;bottom:16px;}}
/* On phones the bubble shrinks and hugs the corner so it stops sitting on the
   booking chips ("Other" lived under it); still a 52px tap target. */
@media(max-width:768px){#mnc-widget{bottom:calc(74px + env(safe-area-inset-bottom));right:12px;}#mnc-fab{width:52px;height:52px;}#mnc-fab svg{width:21px;height:21px;}}

/* ── STICKY CALL/TEXT BAR (mobile) ── */
.sticky-bar{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:90;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(0,0,0,.1);
  /* env(): keep the bar above the iPhone home indicator. */
  padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
}
.sticky-bar-inner{ display:flex; gap:.5rem; max-width:480px; margin:0 auto; }
.sb-btn{
  flex:1; display:flex; align-items:center; justify-content:center; min-height:44px;
  background:var(--bg2); color:var(--text); border-radius:980px;
  font-weight:600; font-size:.85rem; text-decoration:none;
}
.sb-primary{ background:var(--accent); color:#fff; }
@media(max-width:768px){
  .sticky-bar{ display:block; }
  /* Clear the fixed bar and the chat bubble so nothing at the end of the page
     is left stranded underneath them. */
  body{ padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
  footer{ padding-bottom:5.5rem; }
}

/* ── SEO LANDING PAGES (body.lp) — one copy of the chrome the six service
   pages used to carry as six identical inline stylesheets. Content markup
   (hero, trust, cards, FAQ, CTA) is frozen; only its dress lives here. ── */
.lp .breadcrumb{
  /* The fixed 44px bar overlays the top of the page — clear it. */
  padding:calc(var(--nav-h) + .8rem) 1.5rem .8rem;
  font-size:.78rem; color:var(--text2); background:var(--bg);
  border-bottom:1px solid var(--border);
}
.lp .breadcrumb a{ color:var(--accent); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; margin:-14px 0; }
.lp .hero{ background:var(--bg2); padding:3.5rem 1.5rem 3rem; }
.lp .hero h1{ font-size:clamp(2.1rem,5.5vw,3.4rem); line-height:1.1; margin-bottom:1rem; }
.lp .hero h1 span{ color:var(--accent); }
.hero-label{
  font-family:var(--font-mono); font-size:.72rem; color:var(--accent);
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:1rem;
}
.lp .hero-sub{ font-size:1.05rem; max-width:580px; margin:.9rem auto 1.75rem; }
.btn-row{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px;
  background:transparent; color:var(--text); font-weight:500; font-size:.95rem;
  padding:.7rem 1.6rem; border-radius:980px; border:1.5px solid var(--line);
  text-decoration:none; transition:border-color .15s;
}
.btn-ghost:hover{ border-color:var(--text); }
.trust{ background:var(--bg); border-bottom:1px solid var(--border); padding:.8rem 1.5rem; }
.trust-inner{ max-width:1100px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 2rem; }
.trust span{ font-family:var(--font-mono); font-size:.72rem; color:var(--text2); letter-spacing:.04em; }
.grid-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.25rem; }
.grid-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; }
.card{ background:var(--bg2); border-radius:var(--radius); padding:2rem; }
.card-icon{ font-size:1.8rem; margin-bottom:1rem; }
.card-title{ font-weight:600; font-size:1rem; margin-bottom:.4rem; }
.card-desc{ font-size:.875rem; color:var(--text2); line-height:1.75; }
.lp .faq-item{ border:1px solid var(--border); } /* FAQ sections sit on white here */
.cta-section{ background:#000; color:#fff; text-align:center; padding:4.5rem 1.5rem; }
.cta-section h2{ font-size:clamp(1.6rem,3.5vw,2.4rem); font-weight:600; letter-spacing:-.02em; margin-bottom:.75rem; }
.cta-section p{ color:#a1a1a6; font-size:.95rem; line-height:1.7; margin-bottom:2rem; }
@media(max-width:640px){
  .lp .hero{ padding:2.5rem 1.1rem 2.25rem; }
  .lp .breadcrumb{ padding:calc(var(--nav-h) + .8rem) 1.1rem .8rem; }
  .card{ padding:1.5rem 1.25rem; }
}

/* ── APP PAGE (body.app-page) — the PWA landing shell ── */
.app-page{ background:#1d1d1f; color:#fff; min-height:100vh; min-height:100dvh;
  /* No sticky call bar here (the shell has its own contact bar), so never
     inherit the mobile body padding that clears it. */
  padding-bottom:0; }
.app-hero{
  background:linear-gradient(160deg,#1d1d1f 0%,#2d2d2f 50%,#1a1a2e 100%);
  padding:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 1.25rem) 1.5rem 2rem;
  min-height:40vh; display:flex; flex-direction:column; justify-content:flex-end;
  position:relative; overflow:hidden;
}
.app-hero::before{ content:''; position:absolute; top:-60px; right:-60px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle,rgba(0,113,227,.25) 0%,transparent 70%); }
.app-logo{ height:72px; width:72px; object-fit:contain; display:block; }
.app-title{ font-size:2rem; font-weight:700; line-height:1.15; margin-bottom:.5rem; letter-spacing:-.03em; }
.app-sub{ font-size:.9rem; color:rgba(255,255,255,.6); line-height:1.5; margin-bottom:.75rem; }
.app-badges{ display:flex; gap:.5rem; flex-wrap:wrap; }
.app-badge{ padding:.3rem .7rem; border-radius:20px; font-size:.7rem; font-weight:600; font-family:var(--font-mono); letter-spacing:.04em; }
.app-badge-blue{ background:rgba(0,113,227,.25); color:#5eb3ff; border:1px solid rgba(0,113,227,.3); }
.app-badge-green{ background:rgba(48,209,88,.2); color:#30d158; border:1px solid rgba(48,209,88,.25); }
.actions{ background:var(--bg2); border-radius:28px 28px 0 0; padding:1.75rem 1.25rem; color:var(--text); }
.actions-title{ font-size:1.1rem; font-weight:700; margin-bottom:1.1rem; letter-spacing:-.02em; }
.action-card{
  display:flex; align-items:center; gap:1rem; min-height:44px;
  background:#fff; border-radius:var(--radius); padding:1.1rem 1.25rem; margin-bottom:.75rem;
  text-decoration:none; box-shadow:var(--shadow); color:var(--text);
}
.action-card:active{ transform:scale(.97); }
.action-icon{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; flex-shrink:0; }
.icon-blue{ background:var(--gradient); }
.icon-green{ background:linear-gradient(135deg,#30d158,#25a244); }
.icon-orange{ background:linear-gradient(135deg,#ff9f0a,#d4780a); }
.icon-purple{ background:linear-gradient(135deg,#bf5af2,#9b35d0); }
.action-title{ font-weight:600; font-size:1rem; margin-bottom:.2rem; }
.action-desc{ font-size:.8rem; color:var(--text2); line-height:1.4; }
.action-arrow{ margin-left:auto; color:#c7c7cc; font-size:1.1rem; flex-shrink:0; }
.install-banner{ background:var(--gradient); border-radius:16px; padding:1.1rem 1.25rem; margin-bottom:1.25rem; display:none; }
.install-banner.show{ display:block; }
.install-title{ font-weight:600; font-size:.95rem; color:#fff; margin-bottom:.3rem; }
.install-sub{ font-size:.8rem; color:rgba(255,255,255,.8); margin-bottom:.85rem; line-height:1.4; }
.install-steps{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:.85rem; }
.install-step{ display:flex; align-items:center; gap:.6rem; font-size:.8rem; color:rgba(255,255,255,.9); }
.install-step-num{ width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; flex-shrink:0; }
.install-btn{ background:#fff; color:var(--accent); border:none; border-radius:10px; padding:.65rem 1.25rem; min-height:44px; font-size:.85rem; font-weight:700; font-family:inherit; cursor:pointer; width:100%; }
.info-strip{ display:grid; grid-template-columns:1fr 1fr; gap:.65rem; margin-bottom:.75rem; }
.info-card{ background:#fff; border-radius:14px; padding:.9rem 1rem; text-align:center; box-shadow:var(--shadow); }
.info-icon{ font-size:1.4rem; margin-bottom:.3rem; }
.info-label{ font-size:.7rem; color:var(--text2); margin-bottom:.15rem; font-family:var(--font-mono); letter-spacing:.04em; }
.info-val{ font-size:.82rem; font-weight:600; color:var(--text); line-height:1.3; }
.contact-bar{ display:flex; gap:.65rem; margin-bottom:1.5rem; }
.contact-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:.5rem; min-height:44px; padding:.8rem; border-radius:12px; text-decoration:none; font-size:.85rem; font-weight:600; }
.contact-call{ background:#1d1d1f; color:#fff; }
.contact-sms{ background:#e8e8ed; color:var(--text); }
/* The app shell's footer sits on the light actions sheet and must clear the
   home indicator. */
.app-page footer{ padding-bottom:calc(env(safe-area-inset-bottom,0px) + 1rem); }

/* ── STATUS PAGE (body.status-page) — URL and lookup behavior are frozen
   (v1 SMS templates sent this link to real customers); only the dress moved
   here. ── */
.status-page{ background:var(--bg2); min-height:100vh; min-height:100dvh;
  /* No sticky call bar on this page either — don't inherit its clearance. */
  padding-bottom:0; }
.status-page footer{ padding-bottom:1.5rem; }
.status-page .wrap{ max-width:600px; margin:0 auto; padding:calc(var(--nav-h) + 2rem) 1rem 2rem; }
.status-hero{ text-align:center; margin-bottom:2rem; }
.status-hero h1{ font-size:1.8rem; font-weight:700; letter-spacing:-.02em; margin-bottom:.5rem; }
.status-hero p{ color:var(--text2); font-size:.95rem; }
.search-card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:1.5rem; margin-bottom:1.5rem; }
.search-label{ font-size:.75rem; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:.06em; font-family:var(--font-mono); margin-bottom:.5rem; display:block; }
.search-row{ display:flex; gap:.75rem; }
/* 16px input: smaller makes iOS Safari zoom the page on focus. */
.search-input{ flex:1; min-width:0; border:1.5px solid var(--line); border-radius:10px; padding:.75rem 1rem; font-size:1rem; font-family:var(--font-mono); background:#fafafa; outline:none; transition:border-color .15s; text-transform:uppercase; }
.search-input:focus{ border-color:var(--accent); background:#fff; }
.search-btn{ min-height:44px; padding:.75rem 1.5rem; background:var(--accent); color:#fff; border:none; border-radius:10px; font-size:.9rem; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap; }
.search-btn:hover{ background:var(--accent2); }
.search-hints{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:.75rem; }
.search-hint{ display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--text2); }
.search-hint code{ background:#e8e8ed; padding:.2rem .6rem; border-radius:6px; font-family:var(--font-mono); font-size:.75rem; }
.result-card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; display:none; }
.result-hdr{ background:#1d1d1f; padding:1.25rem 1.5rem; }
.wo-label{ font-family:var(--font-mono); font-size:.7rem; color:rgba(255,255,255,.5); letter-spacing:.1em; margin-bottom:.25rem; }
.wo-num{ font-family:var(--font-mono); font-size:1.25rem; font-weight:700; color:#fff; }
.result-body{ padding:1.5rem; }
.info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:1.5rem; }
.info-item .info-label{ font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.2rem; }
.info-item .info-val{ font-size:.9rem; font-weight:500; }
.status-section{ margin-bottom:1.5rem; }
.status-title{ font-weight:600; margin-bottom:1rem; font-size:.95rem; }
.timeline{ display:flex; flex-direction:column; }
.tl-item{ display:flex; gap:12px; align-items:flex-start; position:relative; }
.tl-dot{ width:28px; height:28px; border-radius:50%; border:2px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; font-size:.8rem; flex-shrink:0; z-index:1; }
.tl-dot.done{ background:var(--green); border-color:var(--green); color:#fff; }
.tl-dot.active{ background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 0 0 4px rgba(0,113,227,.15); }
.tl-line{ position:absolute; left:13px; top:28px; width:2px; height:100%; background:var(--line); z-index:0; }
.tl-line.done{ background:var(--green); }
.tl-content{ padding:.1rem 0 1.25rem; }
.tl-name{ font-weight:600; font-size:.9rem; }
.tl-name.active{ color:var(--accent); }
.tl-name.done{ color:var(--green); }
.tl-desc{ font-size:.8rem; color:var(--text2); margin-top:.15rem; }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:.4rem .9rem; border-radius:20px; font-size:.8rem; font-weight:600; margin-bottom:1rem; }
.badge.received{ background:#f0f9ff; color:var(--accent); }
.badge.diagnosing{ background:#fffbe6; color:#d97706; }
.badge.parts-ordered{ background:#fef3c7; color:#b45309; }
.badge.in-repair{ background:#eff6ff; color:var(--accent); }
.badge.ready{ background:#f0fdf4; color:#16a34a; }
.badge.completed{ background:#f0fdf4; color:#15803d; }
.badge.picked-up{ background:var(--bg2); color:var(--text2); }
.contact-row{ background:var(--bg2); border-radius:12px; padding:1rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; }
.contact-note{ font-size:.85rem; color:var(--text2); }
.contact-links{ display:flex; gap:.5rem; flex-wrap:wrap; }
.contact-link{ display:inline-flex; align-items:center; min-height:44px; padding:.4rem .9rem; border-radius:8px; font-size:.8rem; font-weight:600; text-decoration:none; background:var(--accent); color:#fff; }
.not-found{ text-align:center; padding:2rem; display:none; }
.not-found-icon{ font-size:3rem; margin-bottom:.75rem; }
.not-found-text{ color:var(--text2); font-size:.9rem; }
.photo-title{ font-weight:600; font-size:.95rem; margin-bottom:.75rem; }
.photo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.6rem; }
.photo-wrap{ position:relative; cursor:pointer; }
.photo-thumb{ width:100%; border-radius:10px; display:block; }
.photo-tap{ font-size:.68rem; color:var(--text2); text-align:center; margin-top:2px; }
.modal-overlay{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.92); z-index:9999; align-items:center; justify-content:center; }
.modal-overlay.open{ display:flex!important; }
.modal-img{ max-width:90vw; max-height:85vh; border-radius:12px; object-fit:contain; }
.modal-close{ position:absolute; top:1rem; right:1rem; background:#fff; border:none; width:44px; height:44px; border-radius:50%; font-size:1.1rem; cursor:pointer; z-index:10000; display:flex; align-items:center; justify-content:center; }

/* Hero credential mark. The logo carries "Apple Certified Repair & Support
   Technician" in its artwork, so it is a trust signal rather than decoration —
   it is sized to keep that line legible rather than as small as it could be. */
.hero-mark{
  display:block; margin:0 auto 1rem; width:115px; height:115px;
  border-radius:50%;
}
@media(max-width:400px){ .hero-mark{ width:96px; height:96px; } }