/* ==========================================================================
   SM Hörakustik – Basis-Stile
   Ergänzt Elementor. Layout kommt aus Elementor, hier nur was Elementor
   nicht nativ kann: CI-Schriftkaskade, Accessibility, Signature-Visual.
   ========================================================================== */

:root{
  --sm-braun:#5A3525; --sm-gold:#DF9827; --sm-orange:#D25522;
  --sm-orange-text:#A63E15; --sm-braun5:#F7F3F1; --sm-muted:#8A7268;
  --sm-line:#E3D7D0; --sm-offwhite:#FDFDFD;
  /* CI-Vorgabe aus dem Brand Manual – bewusst ohne Webfont-Download */
  --sm-font:"Aptos","Segoe UI",system-ui,-apple-system,"Roboto",sans-serif;
}

/* 1 — Schriftkaskade global. Elementor setzt keine font-family, alles erbt hier. */
body, button, input, select, textarea, optgroup,
h1,h2,h3,h4,h5,h6,
.elementor-widget-container, .elementor-button, .elementor-heading-title{
  font-family:var(--sm-font);
}

/* 2 — Accessibility-Grundlagen (Zielgruppe 60+) */
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
p{ max-width:68ch; }                       /* Zeilenlänge begrenzen */
.sm-wide p{ max-width:none; }

/* Touch-Ziele deutlich über WCAG 2.2 (2.5.8 fordert 24px, wir nehmen 48+) */
.elementor-button, .sm-btn, .sm-cta, a.sm-tel{
  min-height:56px; display:inline-flex; align-items:center; justify-content:center;
  gap:.55em; text-decoration:none; line-height:1.2;
}
.elementor-button{ transition:background-color .18s ease, transform .18s ease; }
.elementor-button:hover{ transform:translateY(-1px); }

/* Sichtbarer Fokus – niemals outline:none */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .elementor-button:focus-visible{
  outline:3px solid var(--sm-orange); outline-offset:3px; border-radius:3px;
}

/* Links im Fließtext erkennbar – nicht nur über Farbe */
.sm-prose a:not(.elementor-button){ color:var(--sm-orange-text); text-decoration:underline; text-underline-offset:3px; }

/* 3 — Wiederkehrende Bausteine */
.sm-headertel a.sm-tel{ color:#A63E15; text-decoration:none; }
.sm-eyebrow{
  font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:#6B5347; margin:0 0 .6em;
}
.sm-goldline{ width:56px; height:3px; background:var(--sm-gold); border:0; margin:0 0 1.4em; }
.sm-card{ background:#fff; border:1px solid var(--sm-line); border-radius:6px; }

/* Trust-Leiste */
.sm-trust{ display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; }
.sm-trust__item{ display:flex; align-items:center; gap:.5em; font-size:16px; color:var(--sm-braun); }
.sm-trust__stars{ color:var(--sm-gold); letter-spacing:.06em; font-size:19px; }
.sm-trust__num{ font-weight:700; }

/* 4 — SIGNATURE: Klangbogen
   Fünf Bögen. Ruhezustand = ungeordnet/blass. Im Viewport ordnen sie sich.
   Ohne JS und bei reduced-motion steht sofort der Endzustand. */
.sm-signal{ display:block; width:auto; height:clamp(240px,30vw,360px); max-width:100%; margin-inline:auto; }
@media (max-width:767px){ .sm-signal{ height:200px; } }
.sm-signal__arc{
  fill:none; stroke-linecap:round;
  stroke-dasharray:var(--len) var(--len);
  stroke-dashoffset:var(--len);
  opacity:.25;
  transform-origin:14px 80px;
  transform:translateX(-10px) scaleY(.82);
  transition:
    stroke-dashoffset 1.1s cubic-bezier(.22,.61,.36,1),
    opacity .7s ease,
    transform .9s cubic-bezier(.22,.61,.36,1);
}
.sm-signal.sm-inview .sm-signal__arc{
  stroke-dashoffset:0; opacity:1; transform:translateX(0) scaleY(1);
}
.sm-signal__arc--1{ transition-delay:0s;   stroke:var(--sm-braun); }
.sm-signal__arc--2{ transition-delay:.12s; stroke:var(--sm-braun); }
.sm-signal__arc--3{ transition-delay:.24s; stroke:var(--sm-gold);  }
.sm-signal__arc--4{ transition-delay:.36s; stroke:var(--sm-orange);}
.sm-signal__arc--5{ transition-delay:.48s; stroke:var(--sm-braun); }
.sm-signal.sm-inview .sm-signal__arc--1{ opacity:.30; }
.sm-signal.sm-inview .sm-signal__arc--2{ opacity:.50; }

/* Auf SM Braun: helle Boegen, sonst verschwinden sie im Hintergrund */
.sm-signal--ondark .sm-signal__arc--1{ stroke:#FFFFFF; }
.sm-signal--ondark .sm-signal__arc--2{ stroke:#FFFFFF; }
.sm-signal--ondark .sm-signal__arc--3{ stroke:#EFB35C; }
.sm-signal--ondark .sm-signal__arc--4{ stroke:#E8734A; }
.sm-signal--ondark .sm-signal__arc--5{ stroke:#FFFFFF; }
.sm-signal--ondark.sm-inview .sm-signal__arc--1{ opacity:.30; }
.sm-signal--ondark.sm-inview .sm-signal__arc--2{ opacity:.52; }
.sm-signal--ondark.sm-inview .sm-signal__arc--5{ opacity:.85; }

/* Ablauf-Verbindungslinie */
.sm-steps__line{ height:2px; background:linear-gradient(90deg,var(--sm-gold),rgba(223,152,39,.15)); border:0; margin:0; }

/* 5 — Karten-Raster, das auf Mobil nicht bricht */
.sm-grid-fix .e-con-inner{ align-items:stretch; }

/* 6 — Reduced Motion: alles aus, Endzustand sofort */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important;
                        transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .sm-signal__arc{ stroke-dashoffset:0!important; opacity:1!important; transform:none!important; }
  .sm-signal__arc--1{ opacity:.30!important; } .sm-signal__arc--2{ opacity:.50!important; }
  .sm-signal--ondark .sm-signal__arc--5{ opacity:.85!important; }
  .elementor-button:hover{ transform:none; }
}

/* 7 — Mobile Sticky-CTA */
.sm-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:998;
  display:none; gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97); border-top:1px solid var(--sm-line);
  box-shadow:0 -4px 18px rgba(46,26,18,.08);
}
.sm-sticky a{
  flex:1; min-height:52px; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:19px; border-radius:4px; text-decoration:none;
}
/* Spezifitaet bewusst erhoeht: Elementors globale Linkfarbe wuerde sonst gewinnen */
.sm-sticky a.sm-sticky__call{ background:#FFFFFF; color:#5A3525; border:2px solid #5A3525; }
.sm-sticky a.sm-sticky__book{ background:#D25522; color:#FFFFFF; }
.sm-sticky a.sm-sticky__call:hover{ background:#F7F3F1; color:#5A3525; }
.sm-sticky a.sm-sticky__book:hover{ background:#A63E15; color:#FFFFFF; }
@media (max-width:767px){ .sm-sticky{ display:flex; } body{ padding-bottom:78px; } }

/* 8 — Karte erst auf Klick laden */
.sm-map{ position:relative; aspect-ratio:16/10; background:var(--sm-braun5);
         border:1px solid var(--sm-line); border-radius:6px; overflow:hidden; }
.sm-map__btn{ position:absolute; inset:0; width:100%; height:100%; border:0; cursor:pointer;
              background:transparent; display:flex; flex-direction:column; gap:.5em;
              align-items:center; justify-content:center; color:var(--sm-braun);
              font-family:var(--sm-font); font-size:17px; font-weight:600; }
.sm-map iframe{ width:100%; height:100%; border:0; display:block; }

/* 9 — Standortkarte: gleiche Höhe, auch wenn Daten fehlen */
.sm-loc{ display:flex; flex-direction:column; height:100%; }
.sm-loc__body{ flex:1; }
.sm-loc__data{ list-style:none; margin:0 0 1.3em; padding:0; }
.sm-loc__data li{ display:flex; gap:.7em; padding:.42em 0; border-bottom:1px solid var(--sm-line); font-size:17px; }
.sm-loc__data li:last-child{ border-bottom:0; }
.sm-loc__data b{ min-width:104px; color:var(--sm-muted); font-weight:600; }

@media (max-width:767px){
  p{ max-width:none; }
  .sm-trust{ gap:10px 18px; }
  .sm-trust__item{ font-size:15px; }
}

/* Header mobil/tablet: Burger rechtsbündig (rechte Gruppe: Menü, Telefon, CTA) */
@media (max-width: 1024px) {
  .elementor-location-header .e-con:has(> .elementor-widget-nav-menu) { justify-content: flex-end; }
}