/* =====================================================================
   Praxis für Pneumologie — Andrey Petrov, Bad Salzuflen
   Global stylesheet · pure CSS, no external requests (GDPR-safe)
   --------------------------------------------------------------------
   Self-hosting note: the design renders on a GDPR-safe system-font
   stack. If you want the brand display font, drop woff2 files into
   /assets/fonts/ and add @font-face here, then prepend the family to
   --font-sans. No Google Fonts links are used anywhere.
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root{
  /* brand + neutrals */
  --bg:        #F6F8FB;
  --surface:   #FFFFFF;
  --surface-2: #EEF3F8;
  --ink:       #0F172A;   /* slate-900 — headings */
  --ink-2:     #334155;   /* slate-700 — body     */
  --muted:     #64748B;   /* slate-500            */
  --line:      #E2E8F0;   /* slate-200 borders    */
  --line-2:    #CBD5E1;

  --brand:        #C75B12; /* burnt orange (logo) */
  --brand-strong: #A8480B;
  --brand-deep:   #8A3B09;
  --brand-tint:   #FBEFE6;
  --brand-tint-2: #F6E2D2;
  --brand-ring:   rgba(199,91,18,.16);

  /* type */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;

  /* radius */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* shadow */
  --shadow-xs: 0 1px 2px rgba(15,23,42,.05);
  --shadow:    0 1px 2px rgba(15,23,42,.04), 0 10px 30px -12px rgba(15,23,42,.12);
  --shadow-lg: 0 2px 4px rgba(15,23,42,.04), 0 24px 50px -18px rgba(15,23,42,.22);
  --shadow-brand: 0 10px 26px -10px rgba(199,91,18,.55);

  /* layout */
  --container: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);
  --header-h: 76px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--font-sans);
  font-size:clamp(1.05rem, .55rem + .55vw, 1.18rem);
  line-height:1.7;
  color:var(--ink-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
ul{ list-style:none; padding:0; }
:focus-visible{ outline:3px solid var(--brand-ring); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--brand-tint-2); color:var(--brand-deep); }

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family:var(--font-sans);
  color:var(--ink);
  line-height:1.08;
  letter-spacing:-.022em;
  font-weight:800;
  text-wrap:balance;
}
h1{ font-size:clamp(2.4rem, 1.1rem + 4.6vw, 4.3rem); }
h2{ font-size:clamp(1.9rem, 1.1rem + 2.6vw, 3rem); }
h3{ font-size:clamp(1.3rem, 1rem + 1vw, 1.7rem); letter-spacing:-.015em; }
h4{ font-size:1.18rem; letter-spacing:-.01em; font-weight:700; }
p{ text-wrap:pretty; }
strong{ color:var(--ink); font-weight:700; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brand);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--brand);
  display:inline-block; border-radius:2px;
}
.eyebrow.center::before{ display:none; }

.lead{
  font-size:clamp(1.18rem, .9rem + .8vw, 1.4rem);
  line-height:1.6; color:var(--ink-2);
}

/* ---------- Layout ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:var(--section-y); position:relative; }
.section--tint{ background:var(--surface-2); }
.section--ink{ background:var(--ink); color:#CBD5E1; }
.section--ink h2,.section--ink h3{ color:#fff; }
.section-head{ max-width:46rem; margin-bottom:clamp(2.5rem,5vw,3.75rem); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ margin-top:.7rem; }
.section-head p{ margin-top:1rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.92em 1.5em; border-radius:var(--r-pill);
  font-weight:650; font-size:1rem; letter-spacing:-.01em;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s;
  white-space:nowrap; line-height:1;
}
.btn svg{ width:1.15em; height:1.15em; }
.btn-primary{ background:var(--brand); color:#fff; box-shadow:var(--shadow-brand); }
.btn-primary:hover{ background:var(--brand-strong); transform:translateY(-2px); box-shadow:0 16px 32px -10px rgba(199,91,18,.6); }
.btn-primary:active{ transform:translateY(0); }
.btn-ghost{ background:var(--surface); color:var(--ink); border:1.5px solid var(--line-2); }
.btn-ghost:hover{ border-color:var(--brand); color:var(--brand); transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-on-ink{ background:#fff; color:var(--ink); }
.btn-on-ink:hover{ background:var(--brand); color:#fff; transform:translateY(-2px); }
.btn-lg{ padding:1.05em 1.9em; font-size:1.08rem; }
.btn-block{ width:100%; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(246,248,251,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.site-header.scrolled{
  background:rgba(255,255,255,.9);
  border-bottom-color:var(--line);
  box-shadow:0 6px 24px -18px rgba(15,23,42,.5);
}
.nav{
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.brand{ display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.brand img{ height:40px; width:auto; }
.brand .brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand .brand-text b{ font-size:1.02rem; color:var(--ink); letter-spacing:-.02em; font-weight:800; }
.brand .brand-text span{ font-size:.72rem; color:var(--muted); font-family:var(--font-mono); letter-spacing:.06em; }

.nav-links{ display:flex; align-items:center; gap:.35rem; }
.nav-links a{
  padding:.55rem .85rem; border-radius:var(--r-pill);
  font-size:.98rem; font-weight:550; color:var(--ink-2);
  transition:color .2s, background .2s;
}
.nav-links a:hover{ color:var(--ink); background:var(--surface-2); }
.nav-links a.active{ color:var(--brand); }
.nav-actions{ display:flex; align-items:center; gap:.6rem; }
.nav-tel{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:650;
  color:var(--ink); padding:.5rem .6rem; border-radius:var(--r-pill);
  font-size:.98rem; transition:color .2s;
}
.nav-tel svg{ width:1.1em; height:1.1em; color:var(--brand); }
.nav-tel:hover{ color:var(--brand); }
.nav-tel{ white-space:nowrap; }

.nav-toggle{ display:none; width:46px; height:46px; border-radius:12px; align-items:center; justify-content:center; color:var(--ink); border:1.5px solid var(--line); background:var(--surface); }
.nav-toggle svg{ width:24px; height:24px; }

/* mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:80;
  background:var(--surface);
  padding:calc(var(--header-h) + 1rem) var(--gutter) 2rem;
  display:flex; flex-direction:column; gap:.25rem;
  transform:translateX(100%); transition:transform .38s var(--ease);
  overflow-y:auto;
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu a{ font-size:1.4rem; font-weight:700; color:var(--ink); padding:1rem .25rem; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.mobile-menu a svg{ width:1.1em; height:1.1em; color:var(--brand); }
.mobile-menu .btn{ margin-top:1.5rem; }
.mobile-close{ position:absolute; top:1rem; right:var(--gutter); width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--line); }
.mobile-close svg{ width:24px; height:24px; }
.mobile-contact{ margin-top:auto; padding-top:2rem; color:var(--muted); font-size:.95rem; }
.mobile-contact a{ color:var(--brand); font-weight:600; }
body.menu-open{ overflow:hidden; }

/* ---------- Hero ---------- */
.hero{ position:relative; padding-top:clamp(3rem,7vw,5.5rem); padding-bottom:var(--section-y); overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero-copy{ max-width:38rem; }
.hero h1{ margin-top:1.1rem; }
.hero .hero-sub{ margin-top:1.5rem; max-width:34rem; }
.hero .hero-tagline{
  margin-top:1.6rem; padding-left:1.1rem; border-left:3px solid var(--brand);
  color:var(--ink-2); font-style:italic; font-size:1.08rem;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.2rem; }
.hero-note{ display:flex; gap:.55rem; align-items:flex-start; margin-top:1.1rem; font-size:.93rem; color:var(--muted); }
.hero-note svg{ width:1.1rem; height:1.1rem; color:var(--brand); flex-shrink:0; margin-top:.18rem; }
.hero-note a{ color:var(--brand); font-weight:600; white-space:nowrap; }
.hero-note a:hover{ text-decoration:underline; }
.hero-trust{ display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:2.6rem; padding-top:1.8rem; border-top:1px solid var(--line); }
.hero-trust .ht{ display:flex; align-items:center; gap:.7rem; }
.hero-trust .ht svg{ width:1.5rem; height:1.5rem; color:var(--brand); flex-shrink:0; }
.hero-trust .ht b{ display:block; color:var(--ink); font-size:1.05rem; line-height:1.2; }
.hero-trust .ht span{ font-size:.85rem; color:var(--muted); }

/* hero visual */
.hero-visual{ position:relative; display:grid; place-items:center; min-height:380px; }
.hero-orb{
  position:relative; width:min(420px,80%); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 38%, var(--brand-tint) 0%, #fff 62%);
  display:grid; place-items:center;
  box-shadow:var(--shadow-lg), inset 0 0 0 1px var(--line);
}
.hero-orb::after{
  content:""; position:absolute; inset:-6%; border-radius:50%;
  border:1.5px dashed var(--brand-tint-2);
}
.hero-orb img{ width:62%; filter:drop-shadow(0 22px 40px rgba(199,91,18,.28)); animation:breathe 6.5s var(--ease) infinite; }
@keyframes breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.045); } }
@media (prefers-reduced-motion: reduce){ .hero-orb img{ animation:none; } }
.hero-chip{
  position:absolute; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:.6rem 1rem; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:.55rem; font-size:.92rem; font-weight:600; color:var(--ink);
}
.hero-chip svg{ width:1.2rem; height:1.2rem; color:var(--brand); }
.hero-chip.c1{ top:8%; left:-2%; animation:floaty 7s ease-in-out infinite; }
.hero-chip.c2{ bottom:14%; right:-4%; animation:floaty 8s ease-in-out infinite reverse; }
.hero-chip.c3{ bottom:-2%; left:14%; animation:floaty 6s ease-in-out infinite .5s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@media (prefers-reduced-motion: reduce){ .hero-chip{ animation:none !important; } }

/* background lung watermark */
.bg-motif{ position:absolute; pointer-events:none; opacity:.04; z-index:0; }
.bg-motif img{ width:100%; }
.section > .container{ position:relative; z-index:1; }

/* ---------- Trust band ---------- */
.logos-band{ border-block:1px solid var(--line); background:var(--surface); }
.logos-band .container{ display:flex; flex-wrap:wrap; gap:clamp(1rem,4vw,3.5rem); justify-content:space-between; align-items:center; padding-block:1.6rem; }
.logos-band .lb-item{ display:flex; align-items:center; gap:.7rem; color:var(--ink-2); font-weight:600; font-size:.98rem; }
.logos-band .lb-item svg{ width:1.4rem; height:1.4rem; color:var(--brand); flex-shrink:0; }

/* ---------- Cards / service grid ---------- */
.grid{ display:grid; gap:1.25rem; }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-auto{ grid-template-columns:repeat(auto-fill, minmax(290px,1fr)); }

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.7rem; box-shadow:var(--shadow-xs);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  position:relative; overflow:hidden;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--brand-tint-2); }
.card .ic{
  width:54px; height:54px; border-radius:14px; display:grid; place-items:center;
  background:var(--brand-tint); color:var(--brand); margin-bottom:1.1rem;
  transition:background .3s, color .3s, transform .3s var(--ease);
}
.card .ic svg{ width:26px; height:26px; }
.card:hover .ic{ background:var(--brand); color:#fff; transform:scale(1.06) rotate(-3deg); }
.card h4{ margin-bottom:.5rem; }
.card p{ color:var(--muted); font-size:1rem; line-height:1.6; }

/* category cards (home overview) */
.cat-card{ display:flex; flex-direction:column; gap:1rem; }
.cat-card .cat-count{ font-family:var(--font-mono); font-size:.8rem; color:var(--brand); letter-spacing:.08em; }
.cat-card ul{ display:flex; flex-direction:column; gap:.55rem; margin-top:.3rem; }
.cat-card li{ display:flex; gap:.6rem; align-items:flex-start; color:var(--ink-2); font-size:1rem; }
.cat-card li svg{ width:1.15rem; height:1.15rem; color:var(--brand); flex-shrink:0; margin-top:.28rem; }
.cat-card .more{ margin-top:auto; padding-top:.4rem; color:var(--brand); font-weight:650; display:inline-flex; align-items:center; gap:.4rem; font-size:.98rem; }
.cat-card .more svg{ width:1.05em; height:1.05em; transition:transform .25s var(--ease); }
.cat-card:hover .more svg{ transform:translateX(4px); }

/* value props */
.value{ display:flex; gap:1.1rem; align-items:flex-start; }
.value .ic{ width:48px; height:48px; border-radius:12px; background:var(--brand-tint); color:var(--brand); display:grid; place-items:center; flex-shrink:0; }
.value .ic svg{ width:24px; height:24px; }
.value h4{ margin-bottom:.35rem; }
.value p{ color:var(--muted); font-size:1rem; }

/* ---------- About / split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.about-visual{ position:relative; }
.about-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(1.8rem,4vw,2.8rem); box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:1.3rem; position:relative; overflow:hidden;
}
.about-card .doc-row{ display:flex; align-items:center; gap:1.1rem; }
.about-card .doc-mark{ width:72px; height:72px; border-radius:18px; background:var(--brand-tint); display:grid; place-items:center; flex-shrink:0; }
.about-card .doc-mark img{ width:64%; }
.about-card .doc-row b{ font-size:1.25rem; color:var(--ink); display:block; letter-spacing:-.01em; }
.about-card .doc-row span{ color:var(--muted); font-size:.95rem; }
.about-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.about-stats .st{ background:var(--surface-2); border-radius:var(--r); padding:1.1rem 1.2rem; }
.about-stats .st b{ font-size:1.9rem; color:var(--brand); line-height:1; letter-spacing:-.02em; display:block; }
.about-stats .st span{ font-size:.88rem; color:var(--ink-2); display:block; margin-top:.35rem; }

/* ---------- Hours + contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3rem); align-items:start; }
.hours{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.2rem); box-shadow:var(--shadow-xs); }
.hours h3{ display:flex; align-items:center; gap:.6rem; margin-bottom:1.2rem; }
.hours h3 svg{ width:1.3rem; height:1.3rem; color:var(--brand); }
.hours-row{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.85rem 0; border-bottom:1px dashed var(--line); }
.hours-row:last-child{ border-bottom:0; }
.hours-row .day{ font-weight:650; color:var(--ink); display:flex; align-items:center; gap:.6rem; }
.hours-row .time{ color:var(--ink-2); text-align:right; font-variant-numeric:tabular-nums; }
.hours-row.is-today{ background:var(--brand-tint); margin-inline:-1rem; padding-inline:1rem; border-radius:12px; border-bottom-color:transparent; }
.hours-row.is-today .day{ color:var(--brand-deep); }
.today-badge{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; background:var(--brand); color:#fff; padding:.18em .5em; border-radius:6px; }
.hours-note{ margin-top:1.2rem; font-size:.92rem; color:var(--muted); display:flex; gap:.55rem; align-items:flex-start; }
.hours-note svg{ width:1.1rem; height:1.1rem; color:var(--brand); flex-shrink:0; margin-top:.2rem; }

.contact-list{ display:flex; flex-direction:column; gap:1rem; }
.contact-item{
  display:flex; align-items:center; gap:1.1rem; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); padding:1.2rem 1.3rem;
  box-shadow:var(--shadow-xs); transition:border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
a.contact-item:hover{ border-color:var(--brand); transform:translateY(-2px); box-shadow:var(--shadow); }
.contact-item .ic{ width:48px; height:48px; border-radius:12px; background:var(--brand-tint); color:var(--brand); display:grid; place-items:center; flex-shrink:0; }
.contact-item .ic svg{ width:23px; height:23px; }
.contact-item .ct-label{ font-size:.8rem; color:var(--muted); font-family:var(--font-mono); letter-spacing:.06em; text-transform:uppercase; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.contact-item .ct-value{ font-size:1.12rem; font-weight:650; color:var(--ink); letter-spacing:-.01em; }
.contact-item .ct-hint{ font-size:.9rem; color:var(--ink-2); margin-top:.25rem; }
.contact-item .ct-badge{ font-size:.62rem; letter-spacing:.1em; background:var(--brand); color:#fff; padding:.22em .55em; border-radius:6px; }
.contact-item.is-primary{ border-color:var(--brand-tint-2); background:linear-gradient(180deg,var(--brand-tint),var(--surface) 60%); }

/* ---------- Anfahrt & Karte ---------- */
.anfahrt{
  margin-top:clamp(1.5rem,3vw,2.2rem); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-xs); overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
}
.anfahrt-info{ padding:clamp(1.5rem,3vw,2.2rem); }
.anfahrt-info h3{ display:flex; align-items:center; gap:.6rem; margin-bottom:1.2rem; }
.anfahrt-info h3 svg{ width:1.3rem; height:1.3rem; color:var(--brand); flex-shrink:0; }
.anfahrt-list{ display:flex; flex-direction:column; gap:1.05rem; margin-bottom:1.6rem; }
.anfahrt-list li{ display:flex; gap:.75rem; align-items:flex-start; }
.anfahrt-list li > svg{ width:1.15rem; height:1.15rem; color:var(--brand); flex-shrink:0; margin-top:.28rem; }
.anfahrt-list b{ display:block; color:var(--ink); font-weight:650; }
.anfahrt-list span{ display:block; color:var(--ink-2); font-size:.95rem; margin-top:.2rem; }
.anfahrt-map{ display:flex; flex-direction:column; background:var(--surface-2); border-left:1px solid var(--line); }
.anfahrt-map iframe{ width:100%; flex:1; min-height:340px; border:0; display:block; }
.map-note{
  display:flex; gap:.5rem; align-items:flex-start; font-size:.82rem; color:var(--muted);
  padding:.85rem 1.1rem; border-top:1px solid var(--line); margin:0;
}
.map-note svg{ width:1rem; height:1rem; color:var(--brand); flex-shrink:0; margin-top:.15rem; }
.map-note a{ color:var(--brand); font-weight:550; }
.map-note a:hover{ text-decoration:underline; }

/* Zwei-Klick-Platzhalter statt automatisch ladender Google-Maps-Karte */
.map-consent{
  flex:1; min-height:340px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  gap:.85rem; padding:2rem 1.6rem;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--brand-tint) 0%, transparent 62%),
    var(--surface-2);
}
.map-consent-ic{ width:2rem; height:2rem; color:var(--brand); opacity:.85; }
.map-consent h3{ margin:0; font-size:1.05rem; font-weight:650; color:var(--ink); }
.map-consent > p{
  margin:0; max-width:38ch; font-size:.9rem; line-height:1.6; color:var(--ink-2);
}
.map-consent .btn{ margin-top:.2rem; }
.map-consent-alt{
  max-width:40ch; font-size:.78rem; line-height:1.55; color:var(--muted);
  border-top:1px solid var(--line); padding-top:.85rem; margin-top:.3rem;
}
.map-consent-alt a{ color:var(--brand); font-weight:550; }
.map-consent-alt a:hover{ text-decoration:underline; }

/* ---------- FAQ ---------- */
.faq{ max-width:54rem; margin-inline:auto; }
.faq-item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); margin-bottom:.85rem; overflow:hidden; transition:border-color .25s, box-shadow .25s; }
.faq-item.open{ border-color:var(--brand-tint-2); box-shadow:var(--shadow); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.3rem 1.5rem; text-align:left; font-size:1.12rem; font-weight:650; color:var(--ink); }
.faq-q .pm{ width:30px; height:30px; flex-shrink:0; border-radius:50%; background:var(--brand-tint); color:var(--brand); display:grid; place-items:center; transition:transform .3s var(--ease), background .25s, color .25s; }
.faq-q .pm svg{ width:18px; height:18px; }
.faq-item.open .pm{ background:var(--brand); color:#fff; transform:rotate(135deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-a-inner{ padding:0 1.5rem 1.4rem; color:var(--ink-2); }
.faq-a-inner p + p{ margin-top:.9rem; }
.faq-list{ display:flex; flex-direction:column; gap:.6rem; margin:.9rem 0; }
.faq-list li{ display:flex; gap:.65rem; align-items:flex-start; }
.faq-list li svg{ width:1.05rem; height:1.05rem; color:var(--brand); flex-shrink:0; margin-top:.28rem; }
.faq-list b{ color:var(--ink); font-weight:650; }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; }
.cta-inner{ background:var(--ink); color:#fff; border-radius:var(--r-xl); padding:clamp(2.5rem,6vw,4.5rem); text-align:center; position:relative; overflow:hidden; }
.cta-inner h2{ color:#fff; max-width:24ch; margin-inline:auto; }
.cta-inner p{ color:#94A3B8; margin-top:1rem; max-width:46ch; margin-inline:auto; }
.cta-inner .hero-cta{ justify-content:center; }
.cta-motif{ position:absolute; right:-6%; bottom:-30%; width:340px; opacity:.07; pointer-events:none; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:#94A3B8; padding-block:clamp(3rem,6vw,4.5rem) 2rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(2rem,5vw,4rem); }
.footer-brand img{ height:42px; margin-bottom:1.1rem; }
.footer-brand p{ color:#94A3B8; max-width:30ch; font-size:.98rem; }
.footer-col h5{ color:#fff; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1.1rem; font-weight:600; }
.footer-col ul{ display:flex; flex-direction:column; gap:.7rem; }
.footer-col a, .footer-col li{ color:#94A3B8; font-size:.98rem; transition:color .2s; }
.footer-col a:hover{ color:#fff; }
.footer-col a:hover .fi{ color:var(--brand); }
.footer-col li{ display:flex; gap:.6rem; align-items:flex-start; }
.footer-col li > a{ display:flex; gap:.6rem; align-items:flex-start; min-width:0; overflow-wrap:anywhere; }
.footer-col .fi{ width:1.15rem; height:1.15rem; color:var(--brand); flex-shrink:0; margin-top:.18rem; transition:color .2s; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.8rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; font-size:.9rem; }
.footer-bottom a{ color:#CBD5E1; }
.footer-bottom a:hover{ color:#fff; }
.footer-legal{ display:flex; gap:1.5rem; flex-wrap:wrap; }

/* ---------- Page hero (subpages) ---------- */
.page-hero{ padding-top:clamp(2.5rem,6vw,4.5rem); padding-bottom:clamp(2rem,4vw,3rem); }
.page-hero .crumbs{ font-family:var(--font-mono); font-size:.8rem; color:var(--muted); letter-spacing:.05em; margin-bottom:1.2rem; }
.page-hero .crumbs a:hover{ color:var(--brand); }
.page-hero h1{ font-size:clamp(2.2rem,1.2rem + 3.4vw, 3.6rem); }
.page-hero p{ margin-top:1.1rem; max-width:50rem; }

/* category section header (leistungen) */
.cat-head{ display:flex; align-items:center; gap:1.1rem; margin-bottom:1.8rem; flex-wrap:wrap; }
.cat-head .ic{ width:56px; height:56px; border-radius:16px; background:var(--brand); color:#fff; display:grid; place-items:center; flex-shrink:0; box-shadow:var(--shadow-brand); }
.cat-head .ic svg{ width:28px; height:28px; }
.cat-head h2{ font-size:clamp(1.7rem,1.2rem + 1.6vw,2.4rem); }
.cat-head .tag{ font-family:var(--font-mono); font-size:.75rem; color:var(--brand); letter-spacing:.1em; text-transform:uppercase; padding:.3em .7em; background:var(--brand-tint); border-radius:var(--r-pill); }
.cat-block{ margin-bottom:clamp(3rem,6vw,5rem); }
.cat-block:last-child{ margin-bottom:0; }

/* ---------- Legal pages ---------- */
.legal{ max-width:50rem; margin-inline:auto; }
.legal h2{ font-size:1.5rem; margin-top:2.5rem; margin-bottom:.9rem; padding-bottom:.6rem; border-bottom:1px solid var(--line); }
.legal h3{ font-size:1.18rem; margin-top:1.8rem; margin-bottom:.5rem; }
.legal p{ margin-bottom:1rem; color:var(--ink-2); }
.legal a{ color:var(--brand); font-weight:550; }
.legal a:hover{ text-decoration:underline; }
.legal ul.bullets{ list-style:disc; padding-left:1.4rem; margin-bottom:1rem; }
.legal ul.bullets li{ margin-bottom:.5rem; }
.legal .legal-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.5rem 1.7rem; box-shadow:var(--shadow-xs); margin-bottom:1.5rem; }

/* ---------- Reveal hooks ----------
   The preview/runtime environment can pause the compositor, which freezes any
   time-based entrance (animation or transition) at its first frame. To stay
   pixel-perfect and never hide content, reveals resolve to their FINAL state.
   (If you deploy and want a scroll entrance, the .reveal/.in hooks + the
   IntersectionObserver in main.js are already wired — just add a transform
   transition here; in a normal browser it will animate cleanly.) */
.reveal{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- Helpers ---------- */
.center{ text-align:center; }
.mt-1{ margin-top:1rem; } .mt-2{ margin-top:2rem; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--brand); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 10px 0; z-index:100; }
.skip-link:focus{ left:0; }

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; min-height:300px; }
  .hero-orb{ width:min(320px,70%); }
  .split{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .anfahrt{ grid-template-columns:1fr; }
  .anfahrt-map{ border-left:0; border-top:1px solid var(--line); }
  .anfahrt-map iframe{ min-height:280px; }
  .map-consent{ min-height:280px; padding:1.75rem 1.25rem; }
  .cols-3{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width: 1080px){
  .nav-tel{ display:none; }
}
@media (max-width: 760px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-actions .btn{ display:none; }
}
@media (max-width: 560px){
  .cols-2, .cols-3{ grid-template-columns:1fr; }
  .about-stats{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-chip.c1{ left:0; } .hero-chip.c2{ right:0; }
  .hero-trust{ gap:1.1rem; }
}