/* ==========================================================================
   SM Hörakustik – Creative Pass V1.1
   Farbklima, Tiefe, Rhythmus, Signature, Reviews, Microinteractions.
   Nur CI-Farben: Braun #5A3525 · Gold #DF9827 · Orange #D25522 + Tonwerte.
   ========================================================================== */
:root{
  --sm-braun-deep:#3A2117; --sm-braun-ink:#2A160F;
  --sm-gold-soft:rgba(223,152,39,.18); --sm-orange-soft:rgba(210,85,34,.14);
  --sm-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Farbklima: Sektionsflächen ---------- */
.sm-bg-hero{
  background:
    radial-gradient(900px 600px at 82% 18%, rgba(223,152,39,.22), transparent 60%),
    radial-gradient(700px 520px at 8% 90%, rgba(210,85,34,.10), transparent 60%),
    linear-gradient(180deg,#FDFDFD 0%,#F7F3F1 100%);
  position:relative; overflow:hidden;
}
.sm-bg-white{ background:#FFFFFF; }
.sm-bg-warm{ background:linear-gradient(180deg,#F7F3F1 0%,#FDFDFD 100%); }
.sm-bg-signature{
  background:
    radial-gradient(800px 500px at 15% 30%, rgba(223,152,39,.28), transparent 62%),
    radial-gradient(600px 420px at 90% 85%, rgba(210,85,34,.30), transparent 60%),
    linear-gradient(160deg,#5A3525 0%,#47291C 100%);
  position:relative; overflow:hidden;
}
.sm-bg-deep{
  background:
    radial-gradient(1000px 600px at 50% -10%, rgba(223,152,39,.20), transparent 60%),
    linear-gradient(180deg,#3A2117 0%,#2A160F 100%);
  position:relative; overflow:hidden;
}
.sm-bg-final{
  background:
    radial-gradient(700px 500px at 88% 20%, rgba(223,152,39,.34), transparent 60%),
    radial-gradient(600px 500px at 10% 100%, rgba(210,85,34,.38), transparent 62%),
    linear-gradient(135deg,#5A3525 0%,#3A2117 100%);
  position:relative; overflow:hidden;
}

/* Dekorations-Wrapper: Elementor-Widgets sind position:relative und 0px hoch –
   die absoluten Deko-Elemente sollen sich an der SEKTION ausrichten */
.elementor-widget:has(> .sm-bgarc), .elementor-widget:has(> .sm-bgear), .elementor-widget:has(> .sm-curve),
.elementor-widget:has(> .sm-bgarc + .sm-curve){ position:static !important; }
/* Grosse abstrakte CI-Form im Hintergrund (nur Dekoration) */
.sm-bgarc{ position:absolute; pointer-events:none; z-index:0; }
.sm-bgarc svg{ display:block; width:100%; height:100%; }
.sm-bgarc--hero{ right:-8%; top:-14%; width:min(62vw,860px); aspect-ratio:1; opacity:.55; }
.sm-bgarc--final{ left:-10%; bottom:-30%; width:min(50vw,640px); aspect-ratio:1; opacity:.5; }
.sm-bg-hero > .e-con, .sm-bg-final > .e-con, .sm-bg-signature > .e-con, .sm-bg-deep > .e-con{ position:relative; z-index:1; }

/* Gradient-Linien */
.sm-line-gold{ height:3px; border:0; width:72px;
  background:linear-gradient(90deg,#DF9827,#D25522); border-radius:2px; }
.sm-hr-fade{ height:1px; border:0;
  background:linear-gradient(90deg,transparent,rgba(90,53,37,.25) 20%,rgba(90,53,37,.25) 80%,transparent); }

/* ---------- Hero: Bildinszenierung mit Tiefe ---------- */
.sm-hero-frame{ position:relative; }
.sm-hero-frame::before{                    /* goldene Rueckplatte, leicht versetzt */
  content:""; position:absolute; inset:12% -16px -16px 12%; border-radius:24px;
  background:linear-gradient(135deg,#DF9827,#D25522); opacity:.55; z-index:0;
  transform:rotate(-1.4deg);
}
/* Elementor 4 rendert das Bild ohne Wrapper-Div direkt im Widget */
.sm-hero-frame > img, .sm-hero-frame .elementor-widget-container, .sm-hero-frame figure{ position:relative; z-index:1; }
.sm-hero-frame img{
  border-radius:22px !important;
  box-shadow:0 30px 60px -24px rgba(58,33,23,.45), 0 8px 18px -8px rgba(58,33,23,.25);
  display:block;
}
/* sehr subtiler Glow-Drift, Dekoration */
@keyframes sm-glow{ 0%,100%{ transform:translate3d(0,0,0) } 50%{ transform:translate3d(0,-10px,0) } }
.sm-bgarc--hero{ animation:sm-glow 14s ease-in-out infinite; }

/* Hero-Trust als „Chip"-Reihe */
.sm-trust{ gap:10px 12px; }
.sm-trust__item{
  background:rgba(255,255,255,.72); border:1px solid rgba(90,53,37,.12);
  padding:9px 14px; border-radius:999px; font-size:15.5px; backdrop-filter:blur(6px);
}
.sm-trust__item:first-child{ background:#fff; border-color:rgba(223,152,39,.55); }

/* Gebogener Sektionsuebergang */
.sm-curve{ position:absolute; left:0; right:0; bottom:-1px; height:64px; z-index:2; pointer-events:none; }
.sm-curve svg{ width:100%; height:100%; display:block; }

/* ---------- Karten mit Tiefe & Gradient-Kante ---------- */
.sm-card-p{ position:relative; overflow:hidden;
  transition:transform .28s var(--sm-ease), box-shadow .28s var(--sm-ease); }
.sm-card-p::after{ content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,#DF9827,#D25522); opacity:0; transition:opacity .28s; }
.sm-card-p:hover{ transform:translateY(-4px); box-shadow:0 22px 40px -22px rgba(58,33,23,.35); }
.sm-card-p:hover::after{ opacity:1; }

/* Wiedererkennung: Zahlreihe statt Icon-Boxen */
.sm-sit{ display:flex; gap:16px; align-items:flex-start; }
.sm-sit__n{ font-size:13px; font-weight:700; letter-spacing:.12em; color:#D25522;
  padding-top:5px; min-width:26px; }
.sm-sit__t{ font-size:19px; font-weight:600; line-height:1.4; color:#5A3525; }
.sm-sit-grid > .e-con{ border-bottom:1px solid rgba(90,53,37,.14); }

/* Stefan: Foto mit Goldrahmen-Offset */
.sm-photo-frame{ position:relative; }
.sm-photo-frame::before{ content:""; position:absolute; inset:-12px 12px 12px -12px; border-radius:18px;
  border:2px solid rgba(223,152,39,.55); z-index:0; }
.sm-photo-frame > img, .sm-photo-frame img{ border-radius:16px !important; position:relative; z-index:1;
  box-shadow:0 26px 50px -26px rgba(58,33,23,.45); }

/* ---------- Buttons & Links: Microinteractions ---------- */
.elementor-button{ transition:background-color .2s var(--sm-ease), transform .2s var(--sm-ease), box-shadow .2s var(--sm-ease); }
.elementor-button:hover{ transform:translateY(-2px); box-shadow:0 12px 24px -12px rgba(210,85,34,.55); }
.elementor-button .elementor-button-icon svg, .elementor-button .elementor-button-icon i{ transition:transform .2s var(--sm-ease); }
.elementor-button:hover .elementor-button-icon svg, .elementor-button:hover .elementor-button-icon i{ transform:translateX(3px); }
.sm-link{ color:#A63E15; font-weight:600; text-decoration:none; background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 2px; transition:background-size .25s var(--sm-ease); }
.sm-link:hover{ background-size:100% 2px; }
.elementor-nav-menu--main .elementor-item{ transition:color .18s; }

/* ---------- Reveal-Stagger ---------- */
.sm-reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--sm-ease), transform .8s var(--sm-ease); transition-delay:calc(var(--i,0) * 90ms); }
.sm-reveal.sm-inview{ opacity:1; transform:none; }

/* ---------- REVIEWS: Signature Trust ---------- */
.sm-gsum{ text-align:center; color:#fff; }
.sm-gsum__g{ display:inline-flex; align-items:center; gap:10px; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:#E8D5C9; font-weight:600; }
.sm-gsum__g svg{ width:22px; height:22px; }
.sm-gsum__stars{ font-size:34px; letter-spacing:.12em; color:#DF9827; line-height:1; margin:18px 0 10px; }
.sm-gsum__num{ font-size:clamp(56px,7vw,84px); font-weight:700; line-height:1; letter-spacing:-.03em; color:#fff; }
.sm-gsum__num small{ font-size:.38em; font-weight:600; color:#E8D5C9; letter-spacing:0; margin-left:.25em; }
.sm-gsum__sub{ font-size:18px; color:#E8D5C9; margin:10px 0 0; }

.sm-masonry{ display:block !important; column-count:3; column-gap:22px; }
.sm-masonry > .e-con{ display:inline-flex !important; width:100% !important; break-inside:avoid; margin:0 0 22px; }
@media (max-width:1024px){ .sm-masonry{ column-count:2; } }
@media (max-width:767px){ .sm-masonry{ column-count:1; } .sm-masonry > .e-con:nth-child(n+5){ display:none !important; } }

.sm-rev{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:16px; }
.sm-rev:hover{ background:rgba(255,255,255,.09); border-color:rgba(223,152,39,.45); }
.sm-rev__head{ display:flex; align-items:center; gap:12px; }
.sm-rev__av{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; color:#3A2117; background:linear-gradient(135deg,#F0B45C,#DF9827); flex:none; }
.sm-rev__name{ font-weight:700; color:#fff; font-size:16px; line-height:1.2; }
.sm-rev__meta{ font-size:13px; color:#C9AE9E; margin-top:2px; }
.sm-rev__stars{ color:#DF9827; font-size:15px; letter-spacing:.08em; margin:12px 0 8px; }
.sm-rev__text{ color:#F0E3DA; font-size:17px; line-height:1.6; }
.sm-rev__src{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:#C9AE9E; margin-top:14px; }
.sm-rev__src svg{ width:14px; height:14px; }

.sm-fade-wrap{ position:relative; }
.sm-fade-wrap .sm-masonry{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
}
.sm-fade-cta{ position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; z-index:3; }
@media (max-width:767px){
  .sm-fade-wrap .sm-masonry{ -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 84%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 84%,transparent 100%); padding-bottom:70px; }
  .sm-fade-cta{ bottom:0; }
  .sm-team-grid > .e-con{ width:47% !important; }
  .sm-sit-grid > .e-con{ width:100% !important; }
}

/* ---------- SIGNATURE: „Aus Unruhe wird Klarheit" ---------- */
.sm-clar{ display:block; width:100%; max-width:560px; height:auto; margin-inline:auto; --p:0; }
.sm-clar__l{ fill:none; stroke-linecap:round; stroke-width:2.6;
  stroke-dasharray:calc(6px + var(--p) * 600px) calc(16px - var(--p) * 16px);
  opacity:calc(.35 + var(--p) * .65);
  transform-origin:70px 90px;
  transform:translate(calc(var(--dx) * (1 - var(--p)) * 1px), calc(var(--dy) * (1 - var(--p)) * 1px))
            rotate(calc(var(--r) * (1 - var(--p)) * 1deg));
  transition:stroke .4s;
}
.sm-clar__l--w{ stroke:rgba(255,255,255,calc(.45 + var(--p) * .45)); }
.sm-clar__l--g{ stroke:#DF9827; }
.sm-clar__l--o{ stroke:#D25522; }
.sm-clar__core{ fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round;
  opacity:calc(var(--p) * var(--p)); stroke-dasharray:420; stroke-dashoffset:calc(420 - var(--p) * 420); }
.sm-clar-cap{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#E8D5C9; font-weight:600; }

/* ---------- Lieboch: Standort-Visual in CI ---------- */
.sm-locvis{ position:relative; aspect-ratio:16/10; border-radius:8px; overflow:hidden;
  background:radial-gradient(500px 300px at 85% 20%, rgba(223,152,39,.45), transparent 60%),
             linear-gradient(140deg,#5A3525 0%,#3A2117 100%); }
.sm-locvis svg{ position:absolute; right:-6%; bottom:-18%; width:62%; height:auto; opacity:.9; }
.sm-locvis__t{ position:absolute; left:22px; bottom:18px; color:#fff; }
.sm-locvis__t b{ display:block; font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1; }
.sm-locvis__t span{ display:block; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#E8D5C9; margin-bottom:8px; font-weight:600; }

/* Einheitliche Bildformate in Rastern */
.sm-step-img img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px !important;
  box-shadow:0 18px 36px -22px rgba(58,33,23,.4); }
.sm-team-grid img{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:50% 20%; border-radius:12px !important; }

/* Route-CTA Pfeil */
.sm-route .elementor-button-text::after{ content:"→"; display:inline-block; margin-left:.45em; transition:transform .2s var(--sm-ease); }
.sm-route:hover .elementor-button-text::after{ transform:translateX(4px); }

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion:reduce){
  .sm-bgarc--hero{ animation:none; }
  .sm-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .sm-clar{ --p:1 !important; }
  .sm-card-p:hover, .elementor-button:hover{ transform:none; }
}
@media (max-width:767px){
  .sm-bgarc--hero{ width:90vw; right:-30%; top:-8%; opacity:.4; }
  .sm-hero-frame::before{ inset:10% -8px -8px 10%; }
  .sm-gsum__stars{ font-size:26px; }
}

/* ---------- Pass 2: Trust-Details, Icons, Ohr-Hintergrund ---------- */
.sm-microline{ font-size:14.5px; color:#8A7268; margin:-14px 0 16px; letter-spacing:.01em; }
.sm-trust__item--g{ text-decoration:none; color:#5A3525; cursor:pointer; transition:box-shadow .2s var(--sm-ease), transform .2s var(--sm-ease); }
.sm-trust__item--g:hover{ box-shadow:0 8px 20px -12px rgba(58,33,23,.35); transform:translateY(-1px); }
.sm-trust__gicon{ display:inline-flex; width:20px; height:20px; flex:none; }
.sm-trust__gicon svg{ width:100%; height:100%; }
.sm-chk{ width:16px; height:16px; color:#D25522; flex:none; }

.sm-hero-col{ position:relative; }
.sm-badge{ position:absolute; left:-14px; bottom:26px; z-index:3; display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid rgba(90,53,37,.12); border-radius:14px; padding:10px 16px 10px 12px;
  box-shadow:0 18px 40px -18px rgba(58,33,23,.45); font-size:14px; font-weight:600; line-height:1.25; color:#5A3525; }
.sm-badge .sm-earico{ width:26px; height:34px; color:#5A3525; flex:none; }
.sm-badge__chk{ width:22px; height:22px; border-radius:50%; background:#D25522; color:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
.sm-badge__chk .sm-chk{ width:13px; height:13px; color:#fff; }
@media (max-width:767px){ .sm-badge{ left:10px; bottom:12px; font-size:13px; padding:8px 12px 8px 10px; } .sm-microline{ margin-top:-10px; } }

/* Ohr-Icon als stiller Hintergrund der Signature-Sektion */
.sm-bgear{ position:absolute; right:-3%; bottom:-16%; width:min(36vw,460px); opacity:.09; z-index:0; pointer-events:none; }
.sm-bgear svg{ width:100%; height:auto; display:block; }
@media (max-width:767px){ .sm-bgear{ width:60vw; right:-18%; bottom:-6%; opacity:.06; } }

/* Leistungs-Icons: Eingangsanimation mit den Karten, Farbumkehr beim Hover */
.sm-ico{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  color:#5A3525; background:linear-gradient(135deg,rgba(223,152,39,.22),rgba(210,85,34,.12));
  border:1px solid rgba(223,152,39,.35); margin-bottom:6px;
  transform:scale(.6) rotate(-8deg); opacity:0;
  transition:transform .55s var(--sm-ease) .25s, opacity .4s ease .25s, background-color .25s var(--sm-ease), color .25s var(--sm-ease), border-color .25s; }
.sm-ico svg{ width:26px; height:26px; transition:transform .3s var(--sm-ease); }
.sm-inview .sm-ico, .sm-ico:where(.no-js *){ transform:none; opacity:1; }
.sm-card-p:hover .sm-ico{ background:#D25522; color:#fff; border-color:#D25522; }
.sm-card-p:hover .sm-ico svg{ transform:scale(1.08); }

/* Dezente Hintergrundbewegung in der Abschluss-Sektion */
@keyframes sm-spin{ to{ transform:rotate(360deg); } }
.sm-bgarc--final svg{ animation:sm-spin 90s linear infinite; transform-origin:50% 50%; }
@media (prefers-reduced-motion:reduce){ .sm-bgarc--final svg{ animation:none; } .sm-ico{ transform:none; opacity:1; transition:none; } }

/* ---------- Mobile-Feinschliff (Feedback 15.09.) ---------- */
/* Lieboch-Visual: Wrapper-Widget muss die Hoehe tragen */
.elementor-widget-html:has(> .sm-locvis){ display:block !important; width:100% !important; height:auto !important; min-height:1px; }
.sm-locvis{ display:block; width:100%; min-height:180px; margin-bottom:8px; }
@media (max-width:767px){
  /* Klangbogen kompakt, Text dicht darunter */
  .sm-clar{ height:220px !important; width:auto !important; max-width:100%; }
  .sm-bg-signature .e-con .e-con:first-child{ width:100% !important; }
  .sm-bgear{ width:52vw; right:-14%; bottom:-4%; opacity:.06; }
  /* Header: Luft nach oben (kollabierende Browser-Toolbar), nichts anschneiden */
  .elementor-location-header .e-con{ overflow:visible !important; }
  .elementor-location-header > .e-con > .e-con{ padding-top:14px !important; padding-bottom:12px !important; }
  .sm-logo img{ max-height:44px; width:auto; }
  /* Hero: Rueckplatte dezenter, Badge nicht ueber den Rand */
  .sm-hero-frame::before{ inset:10% -6px -6px 10%; opacity:.45; }
  .sm-badge{ left:8px; bottom:10px; }
  /* Reviews: Zahl etwas kleiner, Karten voll breit */
  .sm-gsum__num{ font-size:56px; }
  .sm-masonry > .e-con{ margin-bottom:14px; }
  /* Standortkarten: gleichmaessige Innenabstaende */
  .sm-loc__data li{ font-size:16px; }
  /* Sektionen: Abstaende etwas enger */
  .sm-bg-deep, .sm-bg-signature, .sm-bg-final{ padding-left:18px !important; padding-right:18px !important; }
}
@media (max-width:420px){ .sm-trust__item{ font-size:14.5px; padding:8px 12px; } .sm-microline{ font-size:13.5px; } }

/* ---------- Phase 3: Unterseiten, Blog, Rechtliches ---------- */
.sm-prose h2{ font-size:26px; font-weight:700; color:#5A3525; margin:1.6em 0 .5em; line-height:1.25; }
.sm-prose h3{ font-size:21px; font-weight:700; color:#5A3525; margin:1.4em 0 .4em; }
.sm-prose ul, .sm-prose ol{ padding-left:1.3em; } .sm-prose li{ margin-bottom:.4em; }
.sm-prose img{ border-radius:10px; }
.sm-legal p, .sm-legal li{ font-size:17px; }
.sm-postcontent p{ font-size:18.5px; line-height:1.7; }
.elementor-posts .elementor-post{ border:1px solid var(--sm-line); border-radius:12px; overflow:hidden; background:#fff;
  transition:transform .28s var(--sm-ease), box-shadow .28s var(--sm-ease); }
.elementor-posts .elementor-post:hover{ transform:translateY(-4px); box-shadow:0 22px 40px -22px rgba(58,33,23,.35); }
.elementor-posts .elementor-post__text{ padding:18px 20px 22px; }
.elementor-posts .elementor-post__title{ font-size:21px; line-height:1.3; }
.elementor-posts .elementor-post__read-more{ font-weight:600; }
.elementor-pagination{ font-size:17px; margin-top:32px; } .elementor-pagination a, .elementor-pagination span{ padding:8px 12px; }
.elementor-location-header .elementor-nav-menu .current-menu-item > a{ color:#D25522; }