/* SSG Landingpage neu - ssg.css + self-hosted Roboto Slab + Elementor-Compat + Native-Widget-Mapping */
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/roboto-slab-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/roboto-slab-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/roboto-slab-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/roboto-slab-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/roboto-slab-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/roboto-slab-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/roboto-slab-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/roboto-slab-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* =========================================================
   SSG — „Reinheit sichtbar machen" 2026
   Design system stylesheet
   ========================================================= */

:root{
  /* Brand anchor */
  --ssg:        #009883;
  --ssg-600:    #00866f;
  --ssg-700:    #0c6e5c;
  --ssg-deep:   #0c5d4c;
  --forest:     #0e5538;

  /* Watery extended palette */
  --aqua:       #41c8bb;
  --mint:       #9fe3d8;
  --mint-soft:  #d6f2ec;
  --sky:        #a9d8ef;
  --sky-soft:   #dcecf6;
  --lime:       #b7cf3f;

  /* Neutrals */
  --ink:        #14302a;
  --ink-soft:   #3f5b54;
  --muted:      #6c847d;
  --line:       rgba(12,93,76,.14);
  --mist:       #f1f8f5;
  --mist-2:     #e8f3ef;
  --white:      #ffffff;

  /* Effects */
  --glass:      rgba(255,255,255,.62);
  --glass-brd:  rgba(255,255,255,.7);
  --shadow-sm:  0 2px 10px rgba(12,80,66,.08);
  --shadow:     0 18px 50px -18px rgba(11,70,58,.30);
  --shadow-lg:  0 40px 90px -30px rgba(11,70,58,.40);
  --radius:     28px;
  --radius-lg:  40px;

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

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body{
  margin:0;
  font-family:"Roboto Slab", Georgia, serif;
  font-weight:400;
  color:var(--ink);
  background:var(--white);
  font-size:18px;
  line-height:1.6;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

::selection{ background:var(--mint); color:var(--forest); }

/* ---------- Layout ---------- */
.wrap{ width:min(100% - 48px, var(--maxw)); margin-inline:auto; }
.section{ position:relative; padding:120px 0; }
.section--tight{ padding:88px 0; }
.eyebrow{
  font-weight:300; letter-spacing:.16em; text-transform:uppercase;
  font-size:.78rem; color:var(--ssg-700); margin:0 0 18px;
  display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before{
  content:""; width:30px; height:1px; background:var(--ssg);
  display:inline-block;
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{ font-weight:700; line-height:1.04; letter-spacing:-.015em; margin:0; }
.h-display{ font-size:clamp(3rem, 7vw, 6rem); }
.h1{ font-size:clamp(2.4rem, 5vw, 4.2rem); }
.h2{ font-size:clamp(2rem, 3.6vw, 3.1rem); }
.h3{ font-size:clamp(1.3rem, 2vw, 1.7rem); }
.lead{
  font-weight:300; font-size:clamp(1.15rem, 1.7vw, 1.5rem);
  line-height:1.5; color:var(--ink-soft); letter-spacing:.002em;
}
.tint{ color:var(--ssg); }
.light{ font-weight:300; }

/* ---------- Buttons ---------- */
.btn{
  --pad:18px 30px;
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:11px;
  padding:var(--pad); border-radius:999px;
  font-weight:500; font-size:1rem; letter-spacing:.005em;
  border:1.5px solid transparent; transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, color .3s;
  will-change:transform;
}
.btn svg{ width:18px; height:18px; }
.btn::after{ /* clean-wipe sheen */
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .65s var(--ease);
}
.btn:hover::after{ transform:translateX(120%); }
.btn:hover{ transform:translateY(-3px); }

.btn--primary{ background:var(--ssg); color:#fff; box-shadow:0 14px 30px -10px rgba(0,152,131,.6); }
.btn--primary:hover{ box-shadow:0 20px 40px -12px rgba(0,152,131,.7); }
.btn--ghost{ background:rgba(255,255,255,.5); color:var(--ssg-700); border-color:var(--ssg); }
.btn--ghost:hover{ background:var(--mint-soft); }
.btn--ghost::after{ background:linear-gradient(105deg, transparent 30%, rgba(0,152,131,.18) 50%, transparent 70%); }
.btn--light{ background:#fff; color:var(--ssg-700); box-shadow:var(--shadow-sm); }
.btn--onDark{ background:#fff; color:var(--forest); }
.btn--lg{ --pad:21px 36px; font-size:1.05rem; }

/* ---------- Grain + gradient backgrounds ---------- */
.grain{ position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:soft-light; }
.grain svg{ width:100%; height:100%; }

.blob{ position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; opacity:.8; }

/* connector node motif from campaign */
.connector{ display:flex; flex-direction:column; align-items:center; gap:0; color:var(--ssg); }
.connector .dot{ width:13px; height:13px; border:1.6px solid currentColor; border-radius:50%; }
.connector .stem{ width:1.6px; height:54px; background:currentColor; opacity:.5; }

/* ---------- Header ---------- */
.ssg-head{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), backdrop-filter .5s;
  padding:22px 0;
}
.ssg-head.scrolled{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 1px 0 rgba(12,93,76,.08), 0 10px 30px -20px rgba(11,70,58,.4);
  padding:14px 0;
}
.head__row{ display:flex; align-items:center; gap:28px; }
.brand{ display:flex; align-items:center; gap:13px; font-weight:700; }
.brand img{ width:44px; height:44px; transition:width .4s var(--ease), height .4s var(--ease); }
.ssg-head.scrolled .brand img{ width:38px; height:38px; }
.brand__txt{ line-height:1; }
.brand__txt b{ font-size:1.05rem; letter-spacing:.01em; display:block; }
.brand__txt span{ font-weight:300; font-size:.72rem; color:var(--muted); letter-spacing:.04em; white-space:nowrap; }
.nav{ display:flex; gap:26px; margin-left:auto; }
.nav a{ font-weight:400; font-size:.98rem; position:relative; padding:6px 0; color:var(--ink); }
.nav a::after{ content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--ssg); transition:width .35s var(--ease); }
.nav a:hover::after{ width:100%; }
.head__cta{ display:flex; gap:12px; align-items:center; }
.ssg-head .btn{ padding:13px 22px; font-size:.92rem; }
.burger{ display:none; width:46px; height:46px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.6); flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.burger span{ width:20px; height:2px; background:var(--ink); border-radius:2px; transition:.3s; }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding:150px 0 90px; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 78% 18%, #d8f0ea 0%, rgba(216,240,234,0) 55%),
    radial-gradient(90% 80% at 95% 75%, #bfe7e0 0%, rgba(191,231,224,0) 60%),
    radial-gradient(80% 80% at 8% 92%, #d6ecc9 0%, rgba(214,236,201,0) 55%),
    linear-gradient(180deg, #f3faf7 0%, #e7f4ef 100%);
}
.hero__canvas{ position:absolute; inset:0; z-index:1; }
.hero__grid{ position:relative; z-index:3; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; width:100%; }
.hero__eyebrow{ display:inline-flex; align-items:center; gap:12px; font-weight:300; letter-spacing:.14em; text-transform:uppercase; font-size:.82rem; color:var(--ssg-700); margin-bottom:26px; padding:9px 18px; border-radius:999px; background:rgba(255,255,255,.55); border:1px solid var(--glass-brd); backdrop-filter:blur(6px); }
.hero__eyebrow .pip{ width:8px; height:8px; border-radius:50%; background:var(--ssg); box-shadow:0 0 0 4px rgba(0,152,131,.18); }
.hero h1{ margin-bottom:26px; }
.hero h1 .word{ display:inline-block; }
.hero__sub{ max-width:30ch; margin-bottom:38px; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero__copy{ padding-left: clamp(32px, 8vw, 120px); }
.hero__trust{ display:flex; gap:30px; margin-top:46px; flex-wrap:wrap; }
.hero__trust .t{ }
.hero__trust b{ font-size:1.7rem; color:var(--ssg-700); display:block; line-height:1; }
.hero__trust span{ font-weight:300; font-size:.86rem; color:var(--muted); }

.hero__sally{ position:relative; justify-self:center; width:min(100%, 460px); }
.hero__sally img{ width:100%; filter:drop-shadow(0 30px 50px rgba(11,80,68,.22)); animation:float 7s ease-in-out infinite; }
.hero__bubble{
  position:absolute; top:12%; left:-18%;
  background:rgba(255,255,255,.78); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.9); border-radius:20px 20px 20px 4px;
  padding:14px 20px; font-weight:700; font-size:1.05rem; color:var(--ssg-700);
  box-shadow:0 8px 28px rgba(11,80,68,.14); white-space:nowrap;
  animation:float 7s ease-in-out infinite; animation-delay:.6s;
}
.hero__bubble::after{
  content:""; position:absolute; bottom:-10px; left:22px;
  width:0; height:0; border-left:10px solid transparent; border-right:4px solid transparent;
  border-top:11px solid rgba(255,255,255,.78);
}
.hero__sally .ring{ position:absolute; inset:0; margin:auto; width:78%; aspect-ratio:1; border-radius:50%; border:1px dashed rgba(0,152,131,.3); animation:spin 38s linear infinite; }
.hero__sally .ring--2{ width:96%; border-style:dotted; animation-duration:55s; animation-direction:reverse; opacity:.5; }

@keyframes float{ 0%,100%{ transform:translateY(0) rotate(-1deg); } 50%{ transform:translateY(-22px) rotate(1.5deg); } }
@keyframes spin{ to{ transform:rotate(360deg); } }

.scrollhint{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:4; display:flex; flex-direction:column; align-items:center; gap:9px; color:var(--ssg-700); font-weight:300; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; }
.scrollhint .m{ width:22px; height:34px; border:1.5px solid var(--ssg); border-radius:14px; position:relative; }
.scrollhint .m::after{ content:""; position:absolute; left:50%; top:7px; width:3px; height:7px; border-radius:2px; background:var(--ssg); transform:translateX(-50%); animation:scrolly 1.8s var(--ease) infinite; }
@keyframes scrolly{ 0%{ opacity:0; transform:translate(-50%,0);} 30%{opacity:1;} 100%{ opacity:0; transform:translate(-50%,12px);} }

/* ---------- Reveal utilities (transform-only entrance — content never hidden) ---------- */
.reveal{ }

/* ---------- Intro / wipe words ---------- */
.intro{ text-align:center; }
.intro .statement{ font-size:clamp(2rem,4.6vw,3.8rem); font-weight:300; line-height:1.18; max-width:18ch; margin:0 auto 10px; }
.intro .statement b{ font-weight:700; color:var(--ssg); }
.intro__body{ max-width:54ch; margin:34px auto 0; }
.eyebrow::before{ display:none; }
.frostword{
  position:relative; display:inline-block; color:var(--ssg);
  -webkit-text-fill-color:transparent; background:linear-gradient(90deg,var(--ssg),var(--aqua)); -webkit-background-clip:text; background-clip:text;
}


/* ---------- Service grid ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.svc-card{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--white); border:1px solid var(--line); border-radius:24px;
  padding:30px 26px 26px; min-height:206px; display:flex; flex-direction:column; gap:14px;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.svc-card::before{ /* glass sheen on hover */
  content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .5s var(--ease);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(0,152,131,.10), transparent 55%),
    radial-gradient(120% 120% at 100% 100%, rgba(65,200,187,.14), transparent 55%);
}
.svc-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); border-color:transparent; }
.svc-card:hover::before{ opacity:1; }
.svc-card__ic{ width:46px; height:46px; color:var(--ssg); }
.svc-card__ic svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.4; }
.svc-card h3{ font-size:1.15rem; }
.svc-card p{ font-weight:300; font-size:.92rem; color:var(--ink-soft); margin:0; line-height:1.5; }
.svc-card__benefit{
  margin-top:auto; display:flex; align-items:center; gap:8px;
  font-size:.84rem; font-weight:500; color:var(--ssg-700);
  opacity:0; transform:translateY(8px); transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.svc-card:hover .svc-card__benefit{ opacity:1; transform:none; }
.svc-card__benefit .ar{ width:15px; height:15px; }
.svc-card--wide{ grid-column:span 2; flex-direction:row; align-items:center; gap:22px; background:linear-gradient(120deg,var(--ssg),var(--ssg-deep)); color:#fff; border:none; }
.svc-card--wide h3{ color:#fff; }
.svc-card--wide p{ color:rgba(255,255,255,.82); }
.svc-card--wide .svc-card__ic{ color:#fff; flex-shrink:0; }
.svc-card--wide .svc-card__benefit{ color:#fff; opacity:.85; transform:none; }

/* ---------- Service finder ---------- */
.finder{ position:relative; overflow:hidden; background:linear-gradient(165deg,#0c6253 0%, #0a4c41 60%, #0e5538 100%); color:#fff; border-radius:var(--radius-lg); padding:64px clamp(28px,5vw,72px); }
.finder__head{ max-width:60ch; }
.finder__head .eyebrow{ color:var(--mint); }
.finder__head .eyebrow::before{ background:var(--mint); }
.finder__head h2{ color:#fff; }
.finder__head p{ color:rgba(255,255,255,.78); font-weight:300; }
.finder__layout{ display:grid; grid-template-columns:1fr .92fr; gap:46px; margin-top:42px; align-items:start; }
.chiprow{ display:flex; flex-wrap:wrap; gap:12px; }
.chip{
  position:relative; overflow:hidden;
  padding:13px 20px; border-radius:999px; border:1.4px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.06); color:#eafaf6; font-size:.96rem; font-weight:400;
  display:inline-flex; align-items:center; gap:9px; transition:.35s var(--ease);
}
.chip:hover{ border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.12); }
.chip.active{ background:#fff; color:var(--ssg-700); border-color:#fff; font-weight:500; }
.chip .ripple{ position:absolute; border-radius:50%; background:rgba(0,152,131,.5); transform:translate(-50%,-50%) scale(0); pointer-events:none; }
.finder__panel{
  position:relative; background:rgba(255,255,255,.96); color:var(--ink); border-radius:28px;
  padding:34px 32px 38px; box-shadow:var(--shadow-lg); min-height:320px; overflow:hidden;
}
.finder__panel .glow{ position:absolute; right:-40px; top:-40px; width:180px; height:180px; background:radial-gradient(circle,rgba(65,200,187,.35),transparent 70%); }
.fp-ic{ width:54px; height:54px; color:var(--ssg); margin-bottom:14px; transition:.4s; }
.fp-ic svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.4; }
.fp-kicker{ font-weight:300; letter-spacing:.12em; text-transform:uppercase; font-size:.72rem; color:var(--muted); margin-bottom:6px; }
.fp-title{ font-size:1.5rem; font-weight:700; margin-bottom:10px; }
.fp-desc{ font-weight:300; color:var(--ink-soft); margin-bottom:18px; max-width:90%; }
.fp-rec{ display:inline-flex; align-items:center; gap:10px; padding:11px 18px; border-radius:14px; background:var(--mist-2); font-size:.9rem; margin-bottom:22px; max-width:78%; }
.fp-rec b{ color:var(--ssg-700); }
.sally-tip{ position:absolute; right:6px; bottom:4px; width:82px; pointer-events:none; z-index:3; }
.sally-tip img{ width:100%; filter:drop-shadow(0 10px 18px rgba(11,80,68,.25)); }
.sally-bubble{ position:absolute; right:74px; bottom:64px; background:#fff; border:1px solid var(--line); padding:9px 13px; border-radius:14px 14px 4px 14px; font-size:.78rem; font-weight:500; color:var(--ssg-700); box-shadow:var(--shadow-sm); max-width:142px; z-index:3; }

/* ---------- Brand / stats ---------- */
.brand-sec{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.stats{ display:grid; grid-template-columns:1fr 1fr; gap:28px 36px; margin-top:36px; }
.stat b{ font-size:clamp(2.4rem,4vw,3.4rem); font-weight:700; color:var(--ssg); line-height:1; display:block; letter-spacing:-.02em; }
.stat span{ font-weight:300; color:var(--ink-soft); font-size:.96rem; display:block; margin-top:8px; }
.brand-photo{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/5; }
.brand-photo .badge{ position:absolute; left:24px; bottom:24px; background:var(--glass); backdrop-filter:blur(12px); border:1px solid var(--glass-brd); padding:16px 20px; border-radius:18px; }
.brand-photo .badge b{ color:var(--ssg-700); display:block; font-size:1.2rem; }
.brand-photo .badge span{ font-weight:300; font-size:.82rem; color:var(--ink-soft); }

/* ---------- Emotional ---------- */
.emotion{ position:relative; overflow:hidden; }
.emotion__grid{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.emotion__scene{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.emotion__scene img{ width:100%; }
.emotion__scene::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 60%, rgba(10,76,65,.25)); }
.circles{ position:relative; }
.feelings{ display:flex; flex-direction:column; gap:18px; margin-top:30px; }
.feeling{ display:flex; align-items:center; gap:16px; }
.feeling .pic{ width:74px; height:74px; border-radius:50%; overflow:hidden; flex-shrink:0; box-shadow:var(--shadow-sm); border:3px solid #fff; }
.feeling .pic img{ width:100%; height:100%; object-fit:cover; }
.feeling .tx b{ display:block; font-size:1.1rem; }
.feeling .tx span{ font-weight:300; color:var(--ink-soft); font-size:.92rem; }

/* ---------- Sustainability ---------- */
.sus{ position:relative; overflow:hidden; background:var(--mist); }
.sus__track{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:46px; }
.sus-step{ position:relative; background:#fff; border:1px solid var(--line); border-radius:24px; padding:30px 26px; transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.sus-step:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.sus-step .n{ font-weight:300; font-size:.78rem; letter-spacing:.14em; color:var(--ssg); }
.sus-step .ic{ width:42px; height:42px; color:var(--ssg); margin:14px 0 16px; }
.sus-step .ic svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.4; }
.sus-step h3{ font-size:1.12rem; margin-bottom:8px; }
.sus-step p{ font-weight:300; font-size:.9rem; color:var(--ink-soft); margin:0; }

/* ---------- Career ---------- */
.career{ position:relative; overflow:hidden; }
.career__inner{ position:relative; background:linear-gradient(140deg,#e9f6f1,#dcefe8 60%, #e9f2cf); border-radius:var(--radius-lg); padding:clamp(40px,5vw,72px); display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; overflow:hidden; }
.career__sally{ position:relative; justify-self:center; width:min(100%,330px); }
.career__sally img{ width:100%; filter:drop-shadow(0 24px 40px rgba(11,80,68,.22)); animation:float 8s ease-in-out infinite; }
.tags{ display:flex; flex-wrap:wrap; gap:10px; margin:24px 0 30px; }
.tag{ padding:9px 16px; border-radius:999px; background:rgba(255,255,255,.7); border:1px solid var(--glass-brd); font-size:.88rem; font-weight:400; color:var(--ssg-700); }

/* ---------- Contact ---------- */
.contact__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:54px; align-items:start; }
.contact__info{ }
.info-row{ display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--line); }
.info-row .ic{ width:42px; height:42px; border-radius:13px; background:var(--mist-2); color:var(--ssg-700); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.info-row .ic svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.6; }
.info-row b{ display:block; font-size:.78rem; font-weight:300; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.info-row a, .info-row span{ font-size:1.05rem; }
.form{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(26px,3vw,40px); box-shadow:var(--shadow); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.82rem; font-weight:400; color:var(--ink-soft); margin-bottom:8px; letter-spacing:.01em; }
.field input, .field select, .field textarea{
  width:100%; font-family:inherit; font-size:1rem; color:var(--ink);
  padding:14px 16px; border:1.4px solid var(--line); border-radius:14px; background:var(--mist);
  transition:border-color .3s, box-shadow .3s, background .3s; font-weight:400;
}
.field input::placeholder, .field textarea::placeholder{ color:#9bb0a9; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--ssg); background:#fff; box-shadow:0 0 0 4px rgba(0,152,131,.12);
}
.field textarea{ resize:vertical; min-height:110px; }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.check{ display:flex; gap:11px; align-items:flex-start; font-weight:300; font-size:.92rem; color:var(--ink-soft); margin-bottom:22px; cursor:pointer; }
.check input{ width:20px; height:20px; accent-color:var(--ssg); margin-top:2px; flex-shrink:0; }
.form .btn{ width:100%; justify-content:center; }
.form__ok{ display:none; text-align:center; padding:30px 10px; }
.form__ok.show{ display:block; }
.form__ok .tickwrap{ width:66px; height:66px; border-radius:50%; background:var(--mint-soft); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.form__ok svg{ width:30px; height:30px; stroke:var(--ssg-700); fill:none; stroke-width:2; }

/* ---------- Footer ---------- */
.foot{ position:relative; overflow:hidden; background:linear-gradient(165deg,#0c5d4c 0%, #0a4c3f 50%, #0e5538 100%); color:#d7ece4; padding:84px 0 34px; }
.foot__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:54px; border-bottom:1px solid rgba(255,255,255,.14); }
.foot__brand{ display:flex; align-items:center; gap:13px; margin-bottom:22px; }
.foot__brand img{ width:46px; height:46px; }
.foot__brand b{ font-size:1.1rem; color:#fff; display:block; }
.foot__brand span{ font-weight:300; font-size:.74rem; color:#9fc6ba; }
.foot__claim{ font-weight:300; font-size:1.4rem; line-height:1.3; color:#fff; max-width:18ch; }
.foot h4{ font-size:.82rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:#7fb4a4; margin-bottom:18px; }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.foot ul a{ font-weight:300; font-size:.96rem; color:#cfe7df; transition:color .3s, padding .3s; }
.foot ul a:hover{ color:#fff; padding-left:5px; }
.foot__bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:26px; flex-wrap:wrap; }
.foot__bottom .legal{ display:flex; gap:24px; font-weight:300; font-size:.86rem; color:#9fc6ba; }
.foot__social{ display:flex; gap:12px; }
.foot__social a{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; transition:.3s; }
.foot__social a:hover{ background:#fff; color:var(--forest); border-color:#fff; }
.foot__social svg{ width:18px; height:18px; }

/* ---------- Responsive ---------- */
@media (max-width:1140px){
  .ssg-head .btn--ghost{ display:none; }
}
@media (max-width:1080px){
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .sus__track{ grid-template-columns:repeat(2,1fr); }
  .foot__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:880px){
  body{ font-size:17px; }
  .section{ padding:84px 0; }
  .nav, .head__cta .btn--ghost{ display:none; }
  .burger{ display:flex; }
  .hero__grid, .brand-sec, .emotion__grid, .contact__grid, .finder__layout, .career__inner{ grid-template-columns:1fr; }
  .hero__sally{ grid-row:1; width:min(72%,330px); }
  .career__sally{ display:none; }
  .stats{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .svc-grid{ grid-template-columns:1fr; }
  .svc-card--wide{ grid-column:span 1; flex-direction:column; align-items:flex-start; }
  .sus__track{ grid-template-columns:1fr; }
  .foot__top{ grid-template-columns:1fr; }
  .field--row{ grid-template-columns:1fr; }
  .hero__trust{ gap:20px; }
}

/* nav drawer (mobile) */
.drawer{ position:fixed; inset:0; z-index:70; background:rgba(255,255,255,.97); backdrop-filter:blur(10px); display:flex; flex-direction:column; padding:90px 32px 40px; gap:6px; transform:translateY(-100%); transition:transform .5s var(--ease); }
.drawer.open{ transform:none; }
.drawer a{ font-size:1.5rem; font-weight:700; padding:14px 0; border-bottom:1px solid var(--line); }
.drawer .btn{ margin-top:20px; justify-content:center; }
.drawer__close{ position:absolute; top:24px; right:24px; width:46px; height:46px; border-radius:14px; border:1px solid var(--line); background:#fff; font-size:1.4rem; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; }
  .js .reveal, .js .reveal.in{ opacity:1 !important; transform:none !important; }
  .js .frostword{ opacity:1 !important; }
}


/* =========================================================
   Elementor / Theme compat layer
   ========================================================= */
.elementor-widget-html .elementor-widget-container{ width:100%; }
body.elementor-page{ margin:0; font-family:"Roboto Slab", Georgia, serif; font-weight:400; color:var(--ink); background:var(--white); font-size:18px; line-height:1.6; overflow-x:hidden; }
body.elementor-page h1, body.elementor-page h2, body.elementor-page h3, body.elementor-page h4{
  font-family:"Roboto Slab", Georgia, serif; font-weight:700; line-height:1.04; letter-spacing:-.015em; margin:0; color:inherit;
}
body.elementor-page .h-display{ font-size:clamp(3rem, 7vw, 6rem); }
body.elementor-page .h1{ font-size:clamp(2.4rem, 5vw, 4.2rem); }
body.elementor-page .h2{ font-size:clamp(2rem, 3.6vw, 3.1rem); }
body.elementor-page .h3{ font-size:clamp(1.3rem, 2vw, 1.7rem); }
/* UA-Default-Margins wiederherstellen, Original-Komponenten-Margins sichern */
body.elementor-page p{ margin-block:1em; }
body.elementor-page p.eyebrow{ margin:0 0 18px; }
body.elementor-page .hero__sub{ margin-bottom:38px; }
body.elementor-page .intro__body{ margin:34px auto 0; }
body.elementor-page .svc-card p{ margin:0; }
body.elementor-page .sus-step p{ margin:0; }
body.elementor-page .hero h1{ margin-bottom:26px; }
body.elementor-page .sus-step h3{ margin-bottom:8px; }
body.elementor-page .foot h4{ margin:0 0 18px; color:#7fb4a4; }
body.elementor-page a.btn{ line-height:1.6; }
body.elementor-page button.btn, body.elementor-page .chip, body.elementor-page .burger{ line-height:normal; }
/* Kit/Theme font-family neutralisieren */
body.elementor-page p, body.elementor-page li, body.elementor-page span, body.elementor-page label,
body.elementor-page a, body.elementor-page b, body.elementor-page ul,
body.elementor-page input, body.elementor-page select, body.elementor-page textarea, body.elementor-page button{
  font-family:inherit;
}
body.elementor-page .nav a, body.elementor-page .drawer a, body.elementor-page .head__cta a{ font-family:"Roboto Slab", Georgia, serif; }
/* Theme uppercase/letter-spacing neutralisieren */
body.elementor-page .btn{ text-transform:none; letter-spacing:.005em; }
body.elementor-page .chip{ text-transform:none; letter-spacing:normal; font-weight:400; }
body.elementor-page .chip.active{ font-weight:500; }
body.elementor-page .tag{ text-transform:none; letter-spacing:normal; }
body.elementor-page a{ color:inherit; text-decoration:none; }
body.elementor-page a:hover{ color:inherit; }
body.elementor-page .field input, body.elementor-page .field select, body.elementor-page .field textarea{
  font-family:"Roboto Slab", Georgia, serif;
}


/* =========================================================
   Native-Widget-Mapping (Rebuild mit Elementor-Widgets)
   ========================================================= */
body.elementor-page .elementor-widget:not(:last-child){ margin-bottom:0; }
body.elementor-page .elementor-widget-text-editor p{ margin:0; }
body.elementor-page .elementor-column > .elementor-element-populated{ padding:0; }
body.elementor-page .elementor-section > .elementor-container{ position:relative; z-index:2; }
/* .wrap-Nachbau */
body.elementor-page .elementor-section.elementor-section-boxed:not(.elementor-inner-section):not(.ssg-hero) > .elementor-container{
  width:min(100% - 48px, 1240px); max-width:1240px; margin-inline:auto;
}
body.elementor-page .elementor-inner-section > .elementor-container{ width:100%; max-width:none; }
/* Heading-Widgets erben Typo von der Wrapper-Klasse */
body.elementor-page .ssg-h .elementor-heading-title{
  font-family:inherit; font-size:inherit; font-weight:inherit; line-height:inherit;
  letter-spacing:inherit; text-transform:inherit; color:inherit; margin:0;
}
body.elementor-page .ssg-h.h-display, body.elementor-page .ssg-h.h1,
body.elementor-page .ssg-h.h2, body.elementor-page .ssg-h.h3{
  font-weight:700; line-height:1.04; letter-spacing:-.015em; color:var(--ink);
}
body.elementor-page .elementor-widget.eyebrow{ margin:0 0 18px; }
body.elementor-page .statement-map{
  font-size:clamp(2rem,4.6vw,3.8rem); font-weight:300; line-height:1.18; max-width:18ch; color:var(--ink);
}
body.elementor-page .statement-map b{ font-weight:700; color:var(--ssg); }
/* Utilities (ehem. Inline-Styles) */
.u-maxw34{ max-width:34ch; } .u-maxw40{ max-width:40ch; } .u-maxw44{ max-width:44ch; }
.u-maxw46{ max-width:46ch; } .u-maxw54{ max-width:54ch; } .u-fs110{ font-size:1.1rem; }

/* ---------- Grain & Blobs als Pseudo-Elemente ---------- */
.komp-sec::before, .sus-map::before, .foot::before, .ssg-hero::after, .career-sec > .elementor-container::before{
  content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light; filter:url(#grainf);
}
.komp-sec::before{ opacity:.35; z-index:1; }
.sus-map::before{ opacity:.3; z-index:1; }
.foot::before{ opacity:.3; mix-blend-mode:overlay; z-index:1; }
.ssg-hero::after{ opacity:.5; z-index:2; }
.career-sec > .elementor-container::before{ opacity:.3; z-index:1; border-radius:inherit; }
.emotion-map::before, .sus-map::after, .foot::after{
  content:""; position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; opacity:.8; z-index:0;
}
.emotion-map::before{ width:420px; height:420px; background:#bfe7e0; top:-100px; right:-80px; }
.sus-map::after{ width:360px; height:360px; background:#d6ecc9; bottom:-120px; left:-100px; }
.foot::after{ width:420px; height:300px; background:#15806a; top:-120px; right:10%; opacity:.5; }
.emotion-map, .sus-map, .komp-sec{ overflow:hidden; }

/* ---------- Hero ---------- */
.ssg-hero{
  position:relative; min-height:100svh; display:flex; align-items:center; padding:150px 0 90px; overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 18%, #d8f0ea 0%, rgba(216,240,234,0) 55%),
    radial-gradient(90% 80% at 95% 75%, #bfe7e0 0%, rgba(191,231,224,0) 60%),
    radial-gradient(80% 80% at 8% 92%, #d6ecc9 0%, rgba(214,236,201,0) 55%),
    linear-gradient(180deg, #f3faf7 0%, #e7f4ef 100%);
}
.ssg-hero > .elementor-container{ z-index:3; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
.ssg-hero .hero__canvas{ position:absolute; inset:0; z-index:1; }
.hero__sally{ position:relative; justify-self:center; width:min(100%, 460px); }
.hero__sally::before, .hero__sally::after{
  content:""; position:absolute; inset:0; margin:auto; aspect-ratio:1; border-radius:50%; pointer-events:none;
}
.hero__sally::before{ width:78%; border:1px dashed rgba(0,152,131,.3); animation:spin 38s linear infinite; }
.hero__sally::after{ width:96%; border:1px dotted rgba(0,152,131,.3); animation:spin 55s linear infinite reverse; opacity:.5; }
.hero-trust > .elementor-container{ display:flex; gap:30px; flex-wrap:wrap; }
.hero-trust .elementor-column{ width:auto; }
body.elementor-page .t-map .elementor-counter-number-wrapper{
  justify-content:flex-start; font-size:1.7rem; font-weight:700; color:var(--ssg-700); line-height:1;
}
body.elementor-page .t-map .elementor-counter-title{
  display:block; text-align:left; font-weight:300; font-size:.86rem; color:var(--muted); line-height:1.6; margin:0;
}

/* ---------- Button-Widgets im Original-Look ---------- */
body.elementor-page .ssgbtn .elementor-button{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:11px;
  padding:18px 30px; border-radius:999px; font-weight:500; font-size:1rem; letter-spacing:.005em;
  border:1.5px solid transparent; transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, color .3s;
  will-change:transform; line-height:1.6; text-transform:none; font-family:"Roboto Slab", Georgia, serif;
  background:none; box-shadow:none;
}
body.elementor-page .ssgbtn .elementor-button-content-wrapper{ display:contents; }
body.elementor-page .ssgbtn .elementor-button::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .65s var(--ease);
}
body.elementor-page .ssgbtn .elementor-button:hover::before{ transform:translateX(120%); }
body.elementor-page .ssgbtn .elementor-button:hover{ transform:translateY(-3px); }
body.elementor-page .ssgbtn--primary .elementor-button{ background:var(--ssg); color:#fff; box-shadow:0 14px 30px -10px rgba(0,152,131,.6); }
body.elementor-page .ssgbtn--primary .elementor-button:hover{ box-shadow:0 20px 40px -12px rgba(0,152,131,.7); }
body.elementor-page .ssgbtn--ghost .elementor-button{ background:rgba(255,255,255,.5); color:var(--ssg-700); border-color:var(--ssg); }
body.elementor-page .ssgbtn--ghost .elementor-button:hover{ background:var(--mint-soft); }
body.elementor-page .ssgbtn--ghost .elementor-button::before{ background:linear-gradient(105deg, transparent 30%, rgba(0,152,131,.18) 50%, transparent 70%); }
body.elementor-page .ssgbtn--lg .elementor-button{ padding:21px 36px; font-size:1.05rem; }
body.elementor-page .ssgbtn--ar .elementor-button::after,
body.elementor-page .ssgbtn--ardown .elementor-button::after{
  content:""; width:18px; height:18px; flex-shrink:0; background:center/contain no-repeat;
}
body.elementor-page .ssgbtn--ar .elementor-button::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
body.elementor-page .ssgbtn--ardown .elementor-button::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E"); }

/* ---------- Service-Karten (Columns) ---------- */
.ssg-svcgrid > .elementor-container{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
/* Karte = Column (Original-.svc-card-Regeln greifen dort); Innenleben nur Layout */
body.elementor-page .svc-card > .elementor-element-populated{
  padding:0; display:flex; flex-direction:column; flex-wrap:nowrap; flex:1; width:100%;
  background:none; border:none;
}
body.elementor-page .svc-card .svc-card__ic{ margin-bottom:14px; }
body.elementor-page .svc-card__benefit{
  margin-top:auto; padding-top:14px; opacity:0; transform:translateY(8px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
body.elementor-page .svc-card:hover .svc-card__benefit{ opacity:1; transform:none; }
body.elementor-page .svc-card__benefit .elementor-widget-container{
  display:flex; align-items:center; gap:8px; font-size:.84rem; font-weight:500; color:var(--ssg-700);
}
body.elementor-page .svc-card__benefit .elementor-widget-container::before{
  content:""; width:15px; height:15px; flex-shrink:0; background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c6e5c' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
body.elementor-page .svc-card--wide{ grid-column:span 2; }
body.elementor-page .svc-card--wide > .elementor-element-populated{
  flex-direction:row; align-items:center; gap:22px; background:none;
}
body.elementor-page .svc-card--wide > .elementor-element-populated > .elementor-widget-text-editor{ flex:0 1 auto; }
body.elementor-page .svc-card--wide .svc-card__benefit{ flex:0 0 auto; max-width:150px; }
body.elementor-page .svc-card--wide > .elementor-element-populated > .elementor-widget{ width:auto; }
body.elementor-page .svc-card--wide .svc-card__ic{ color:#fff; flex-shrink:0; margin-bottom:0; }
body.elementor-page .svc-card--wide h3{ color:#fff; }
body.elementor-page .svc-card--wide p{ color:rgba(255,255,255,.82); }
body.elementor-page .svc-card--wide .svc-card__benefit{ opacity:.85; transform:none; padding-top:0; margin-top:auto; }
body.elementor-page .svc-card--wide .svc-card__benefit .elementor-widget-container{ color:#fff; }
body.elementor-page .svc-card--wide .svc-card__benefit .elementor-widget-container::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.komp-head > .elementor-container{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; }
.komp-head .elementor-column{ width:auto; }
.komp-head__l{ max-width:46ch; }

/* ---------- Connector (Spacer-Widget) ---------- */
body.elementor-page .ssg-connector .elementor-widget-container{ display:flex; justify-content:center; margin-top:44px; }
body.elementor-page .ssg-connector .elementor-spacer-inner{ height:67px !important; width:13px; position:relative; color:var(--ssg); }
body.elementor-page .ssg-connector .elementor-spacer-inner::before{
  content:""; position:absolute; top:0; left:0; width:13px; height:13px; border:1.6px solid currentColor; border-radius:50%; box-sizing:border-box;
}
body.elementor-page .ssg-connector .elementor-spacer-inner::after{
  content:""; position:absolute; top:13px; left:50%; transform:translateX(-50%); width:1.6px; height:54px; background:currentColor; opacity:.5;
}
.intro-map{ text-align:center; }
.intro-map .statement-map{ margin-inline:auto; }
.intro-map .elementor-widget-heading, .intro-map .elementor-widget-text-editor{ display:block; }
.intro-map .eyebrow{ margin-left:auto; margin-right:auto; }

/* ---------- Marke / Stats ---------- */
.brand-map > .elementor-container{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.stats-map > .elementor-container{ display:grid; grid-template-columns:1fr 1fr; gap:28px 36px; }
body.elementor-page .stat .elementor-counter-number-wrapper{
  justify-content:flex-start; font-size:clamp(2.4rem,4vw,3.4rem); font-weight:700; color:var(--ssg);
  line-height:1; letter-spacing:-.02em;
}
body.elementor-page .stat .elementor-counter-title{
  display:block; text-align:left; font-weight:300; color:var(--ink-soft); font-size:.96rem; margin-top:8px; line-height:1.6;
}
body.elementor-page .brand-photo{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/5; }
body.elementor-page .brand-photo > .elementor-element-populated{ position:static; }
body.elementor-page .brand-photo .elementor-widget-image{ position:absolute; inset:0; }
body.elementor-page .brand-photo .elementor-widget-image .elementor-widget-container{ height:100%; }
body.elementor-page .brand-photo img{ width:100%; height:100%; object-fit:cover; }
body.elementor-page .brand-photo .badge{ z-index:2; }

/* ---------- Emotional ---------- */
.emotion-map > .elementor-container{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
body.elementor-page .emotion__scene{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
body.elementor-page .emotion__scene::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 60%, rgba(10,76,65,.25)); z-index:2; pointer-events:none; }
body.elementor-page .emotion__scene img{ width:100%; display:block; }
.feelings-map .elementor-widget:not(:last-child){ margin-bottom:18px; }
body.elementor-page .feeling .elementor-image-box-wrapper{ display:flex; align-items:center; gap:16px; text-align:left; }
body.elementor-page .feeling .elementor-image-box-img{
  width:74px; height:74px; border-radius:50%; overflow:hidden; flex-shrink:0;
  box-shadow:var(--shadow-sm); border:3px solid #fff; margin:0 !important; box-sizing:border-box;
}
body.elementor-page .feeling .elementor-image-box-img img{ width:100%; height:100%; object-fit:cover; border-radius:0; }
body.elementor-page .feeling .elementor-image-box-title{ font-size:1.1rem; font-weight:700; margin:0; color:var(--ink); line-height:1.6; }
body.elementor-page .feeling .elementor-image-box-description{ font-weight:300; color:var(--ink-soft); font-size:.92rem; margin:0; }

/* ---------- Nachhaltigkeit ---------- */
.sus-track-map > .elementor-container{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
body.elementor-page .sus-step{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:24px; padding:30px 26px;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
body.elementor-page .sus-step:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
body.elementor-page .sus-step .n{ font-weight:300; font-size:.78rem; letter-spacing:.14em; color:var(--ssg); }

/* ---------- Karriere ---------- */
.career-sec > .elementor-container{
  position:relative; background:linear-gradient(140deg,#e9f6f1,#dcefe8 60%, #e9f2cf);
  border-radius:var(--radius-lg); padding:clamp(40px,5vw,72px);
  display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; overflow:hidden;
}
.career-sec .elementor-column{ position:relative; z-index:2; }
body.elementor-page .elementor-widget.ssg-tags{ margin:24px 0 30px; }
body.elementor-page .ssg-tags .elementor-icon-list-items{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px;
}
body.elementor-page .ssg-tags .elementor-icon-list-item{ margin:0; padding:0; }
body.elementor-page .ssg-tags .elementor-icon-list-icon{ display:none; }
body.elementor-page .ssg-tags .elementor-icon-list-text{
  padding:9px 16px; border-radius:999px; background:rgba(255,255,255,.7); border:1px solid var(--glass-brd);
  font-size:.88rem; font-weight:400; color:var(--ssg-700); display:inline-block;
}
body.elementor-page .career__sally{ position:relative; justify-self:center; width:min(100%,330px); }
body.elementor-page .career__sally img{ width:100%; filter:drop-shadow(0 24px 40px rgba(11,80,68,.22)); animation:float 8s ease-in-out infinite; }

/* ---------- Kontakt ---------- */
.contact-map > .elementor-container{ display:grid; grid-template-columns:.9fr 1.1fr; gap:54px; align-items:start; }
body.elementor-page .irow .elementor-widget-container{
  display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--line);
}
body.elementor-page .irow .elementor-widget-container::before{
  content:""; width:42px; height:42px; border-radius:13px; background-color:var(--mist-2);
  background-position:center; background-repeat:no-repeat; background-size:20px 20px; flex-shrink:0;
}
body.elementor-page .irow--tel .elementor-widget-container::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c6e5c' stroke-width='1.6'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h2l2 5-2 1a12 12 0 0 0 5 5l1-2 5 2v2a2 2 0 0 1-2 2A16 16 0 0 1 4 5z'/%3E%3C/svg%3E"); }
body.elementor-page .irow--mail .elementor-widget-container::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c6e5c' stroke-width='1.6'%3E%3Cpath d='M3 6h18v12H3z'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
body.elementor-page .irow--pin .elementor-widget-container::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c6e5c' stroke-width='1.6'%3E%3Cpath d='M12 21s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E"); }
body.elementor-page .irow b{
  display:block; font-size:.78rem; font-weight:300; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:3px;
}
body.elementor-page .irow a, body.elementor-page .irow span{ font-size:1.05rem; }

/* ---------- Footer ---------- */
.foot-top-map > .elementor-container{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:54px; border-bottom:1px solid rgba(255,255,255,.14);
}
.foot{ padding-top:84px; padding-bottom:34px; }
body.elementor-page .foot-brand .elementor-image-box-wrapper{ display:flex; align-items:center; gap:13px; text-align:left; }
body.elementor-page .foot-brand .elementor-image-box-img{ width:46px; flex-shrink:0; margin:0 !important; }
body.elementor-page .foot-brand .elementor-image-box-title{ font-size:1.1rem; color:#fff; margin:0; font-weight:700; line-height:1; }
body.elementor-page .foot-brand .elementor-image-box-description{ font-weight:300; font-size:.74rem; color:#9fc6ba; margin:0; }
body.elementor-page .foot-list .elementor-icon-list-items{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
body.elementor-page .foot-list .elementor-icon-list-item{ margin:0; padding:0; }
body.elementor-page .foot-list .elementor-icon-list-icon{ display:none; }
body.elementor-page .foot-list .elementor-icon-list-text{ padding:0; }
body.elementor-page .foot-list a{ font-weight:300; font-size:.96rem; color:#cfe7df; transition:color .3s, padding .3s; }
body.elementor-page .foot-list a:hover{ color:#fff; padding-left:5px; }
.foot-bottom-map > .elementor-container{
  display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:26px; flex-wrap:wrap;
}
.foot-bottom-map .elementor-column{ width:auto; }
body.elementor-page .legal-map .elementor-widget-container{
  display:flex; gap:24px; font-weight:300; font-size:.86rem; color:#9fc6ba; align-items:center;
}
body.elementor-page .foot-social .elementor-social-icon{
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.22);
  background:transparent; display:inline-flex; align-items:center; justify-content:center; transition:.3s;
}
body.elementor-page .foot-social .elementor-social-icon:hover{ background:#fff; border-color:#fff; }
body.elementor-page .foot-social .elementor-social-icon i,
body.elementor-page .foot-social .elementor-social-icon svg{ color:#d7ece4; fill:#d7ece4; font-size:18px; width:18px; height:18px; }
body.elementor-page .foot-social .elementor-social-icon:hover i,
body.elementor-page .foot-social .elementor-social-icon:hover svg{ color:var(--forest); fill:var(--forest); }
body.elementor-page .elementor-widget.foot__claim{ margin-top:0; }

/* Spaltenbreiten in Grid-Kontexten neutralisieren (elementor-col-XX wirkt sonst im Track weiter) */
.ssg-hero > .elementor-container > .elementor-column,
.ssg-svcgrid > .elementor-container > .elementor-column,
.brand-map > .elementor-container > .elementor-column,
.stats-map > .elementor-container > .elementor-column,
.emotion-map > .elementor-container > .elementor-column,
.feelings-map > .elementor-container > .elementor-column,
.sus-track-map > .elementor-container > .elementor-column,
.career-sec > .elementor-container > .elementor-column,
.contact-map > .elementor-container > .elementor-column,
.foot-top-map > .elementor-container > .elementor-column{ width:100%; }
/* Hero-Grid ist im Original full-width (hero__grid width:100% überschreibt .wrap) */
body.elementor-page .ssg-hero > .elementor-container{ width:100%; max-width:none; }
/* Intro: Block-Flow, damit Statement-Margins wie im Original wirken */
body.elementor-page .intro-map .elementor-widget-wrap{ display:block; }
body.elementor-page .intro-map .elementor-widget{ width:auto; }
/* Widgets füllen ihre Spalte (Theme/Kit setzt teils width:auto) */
body.elementor-page .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto){ width:100%; }
body.elementor-page .elementor-widget .elementor-widget-container{ width:100%; }
body.elementor-page .svc-card--wide > .elementor-element-populated > .elementor-widget{ width:auto; }
body.elementor-page .svc-card--wide > .elementor-element-populated > .elementor-widget .elementor-widget-container{ width:auto; }
body.elementor-page .feeling .elementor-image-box-content{ flex:1 1 auto; width:auto; min-width:0; }
body.elementor-page .feeling .elementor-image-box-img{ flex:0 0 74px; }
body.elementor-page .foot-brand .elementor-image-box-content{ flex:0 1 auto; width:auto; }
/* Kit setzt eigene Schriftgröße auf Counter-Zahlen-Spans */
body.elementor-page .stat .elementor-counter-number-wrapper span,
body.elementor-page .t-map .elementor-counter-number-wrapper span{ font-size:inherit; font-weight:inherit; color:inherit; line-height:inherit; }

/* Detail-Fixes Runde 2 */
body.elementor-page .svc-card > .elementor-element-populated{ flex-wrap:nowrap; }
body.elementor-page .ssg-hero > .elementor-container{ width:100% !important; max-width:none !important; }
body.elementor-page .intro-map .statement-map{ max-width:none; margin:0; width:auto; }
body.elementor-page .intro-map .statement-map > .elementor-widget-container{ width:auto; }
body.elementor-page .feelings-map .elementor-widget:not(:last-child){ margin-bottom:18px; }
.career-sec > .elementor-container > .elementor-column.career__sally{ width:min(100%,330px); }
body.elementor-page .stat .elementor-counter-number-wrapper,
body.elementor-page .t-map .elementor-counter-number-wrapper{ align-items:flex-end; line-height:1; }
body.elementor-page .stat .elementor-counter-number-prefix:empty, body.elementor-page .stat .elementor-counter-number-suffix:empty,
body.elementor-page .t-map .elementor-counter-number-prefix:empty, body.elementor-page .t-map .elementor-counter-number-suffix:empty{ display:none; }
body.elementor-page .foot-list .elementor-icon-list-item{ font-size:18px; line-height:1.6; }
body.elementor-page .foot-brand .elementor-image-box-img{ width:46px !important; }
body.elementor-page .foot-brand .elementor-image-box-img img{ width:46px; height:46px; object-fit:contain; }

/* Vertikale Abstände wrapper-basiert (Flex-Items verschlucken innere Margins) */
body.elementor-page .hero__copy .elementor-widget-heading.h-display{ margin-bottom:26px; }
body.elementor-page .elementor-section.hero-trust{ margin-top:46px !important; }
body.elementor-page .ssg-hero .hero__sub{ margin-bottom:38px !important; }
body.elementor-page .ssg-hero > .elementor-container > .elementor-column.hero__sally{ width:min(100%,460px); }
body.elementor-page .foot-top-map .elementor-widget-heading{ margin:0 0 18px; }
body.elementor-page .brand-map .elementor-widget.lead{ margin-top:24px !important; }
body.elementor-page .elementor-section.stats-map{ margin-top:36px !important; }
body.elementor-page .emotion-map .elementor-widget.lead{ margin-top:22px !important; }
body.elementor-page .elementor-section.feelings-map{ margin-top:30px !important; }
body.elementor-page .sus-map .elementor-widget.lead{ margin-top:22px !important; }
body.elementor-page .elementor-section.sus-track-map{ margin-top:46px !important; }
body.elementor-page .career-sec .elementor-widget.lead{ margin-top:20px !important; }
body.elementor-page .contact-map .elementor-widget.lead{ margin-top:20px !important; }
body.elementor-page .contact-map .elementor-widget.irow--tel{ margin-top:34px !important; }
body.elementor-page .elementor-widget.foot-brand{ margin-bottom:22px !important; }
body.elementor-page .elementor-section.komp-head{ margin-bottom:46px !important; }
body.elementor-page .stat .elementor-counter-number-wrapper,
body.elementor-page .t-map .elementor-counter-number-wrapper{ height:1em; }
body.elementor-page .t-map .elementor-counter-title{ line-height:29px; }
body.elementor-page .foot-list .elementor-icon-list-item{ line-height:28.8px; }
/* _margin-Doppelung neutralisieren: Abstände kommen vom Wrapper, nicht vom Container */
body.elementor-page .elementor-widget.lead > .elementor-widget-container,
body.elementor-page .elementor-widget.irow > .elementor-widget-container,
body.elementor-page .elementor-widget.foot-brand > .elementor-widget-container,
body.elementor-page .elementor-widget.hero__sub > .elementor-widget-container{ margin:0 !important; }
body.elementor-page .stat .elementor-counter-number-wrapper,
body.elementor-page .t-map .elementor-counter-number-wrapper{ height:1em !important; min-height:0 !important; flex:0 0 auto !important; align-items:flex-end; overflow:visible; }
body.elementor-page .stat .elementor-counter,
body.elementor-page .t-map .elementor-counter{ justify-content:flex-end; }
/* Footer-H4-Widgets: Typo auf Wrapper-Ebene (ssg-h erbt sie durch) */
body.elementor-page .foot-top-map .elementor-widget-heading.ssg-h{
  font-size:.82rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:#7fb4a4; line-height:1.04;
}

/* ---------- Responsive (Original-Breakpoints) ---------- */
@media (max-width:1080px){
  .ssg-svcgrid > .elementor-container{ grid-template-columns:repeat(2,1fr); }
  .sus-track-map > .elementor-container{ grid-template-columns:repeat(2,1fr); }
  .foot-top-map > .elementor-container{ grid-template-columns:1fr 1fr; }
}
@media (max-width:880px){
  .ssg-hero > .elementor-container, .brand-map > .elementor-container, .emotion-map > .elementor-container,
  .contact-map > .elementor-container, .career-sec > .elementor-container{ grid-template-columns:1fr; }
  body.elementor-page .ssg-hero > .elementor-container > .elementor-column.hero__sally{ grid-row:1; width:min(72%,330px); }
  .career__sally{ display:none; }
}
/* =========================================================
   Service-Finder: Korrekturen gegenüber der HTML-Vorlage
   (in der Vorlage überdeckt das Maskottchen auf schmalen
   Screens den Button; auf Desktop klafft links unten eine Lücke)
   ========================================================= */
/* Header-Sektion über alle anderen Sektionen stapeln — sonst legt sich der Hero
   (eigener Stacking-Context via .elementor-container z-index:2) über den offenen Drawer. */
body.elementor-page .ssg-headwrap{ position:relative; z-index:100; }
body.elementor-page .ssg-headwrap > .elementor-container{ z-index:100; }

/* Header mobil: In der Vorlage passen Logo + „Anfrage starten“ + Burger unter ~460px
   nicht nebeneinander — der Button überdeckt den Logo-Text und wird rechts abgeschnitten.
   Der CTA steckt ohnehin im Menü-Drawer. */
@media (max-width:560px){
  body.elementor-page .head__cta .btn{ display:none; }
}
@media (max-width:880px){
  /* .nav (mit margin-left:auto) ist ausgeblendet — Burger sonst nicht bündig rechts */
  body.elementor-page .head__cta{ margin-left:auto; }
}

/* Empfehlungs-Box: fette Leistung lief rechts aus der Box heraus (nowrap).
   Häkchen aus dem Flex-Fluss nehmen, damit der Text sauber umbricht. */
body.elementor-page .fp-rec{ position:relative; flex-wrap:wrap; row-gap:2px; padding-left:44px; }
body.elementor-page .fp-rec > svg{ position:absolute; left:18px; top:50%; transform:translateY(-50%); }
body.elementor-page .fp-rec b{ min-width:0; }
@media (max-width:480px){
  /* Maskottchen steht mobil unter dem Button — Box darf die volle Breite nutzen */
  body.elementor-page .fp-rec{ max-width:100%; }
}
@media (min-width:881px){
  /* Chips vertikal mittig zum Panel statt oben angeheftet */
  body.elementor-page .finder__layout{ align-items:center; }
}
@media (max-width:480px){
  /* Platz für Maskottchen + Sprechblase unter dem Button reservieren */
  body.elementor-page .finder__panel{ padding-bottom:116px; }
  body.elementor-page .finder__panel .sally-tip{ width:72px; right:10px; bottom:8px; }
  body.elementor-page .finder__panel .sally-bubble{ right:92px; bottom:30px; max-width:150px; }
}

/* Bubble-Widget: Breite am Inhalt (nowrap), nicht 100% */
body.elementor-page .elementor-widget-wrap > .elementor-widget.hero__bubble{ width:auto !important; }
/* Original-Mobile-Regeln, die die Compat-Schicht sonst übersteuert */
@media (max-width:880px){
  body.elementor-page{ font-size:17px; }
  body.elementor-page .elementor-top-section:not(.ssg-hero):not(.foot):not(.ssg-headwrap){ padding-top:84px !important; padding-bottom:84px !important; }
}
/* Statement: die fixen 321/311px-Margins nur auf breiten Viewports; darunter zentriert statt zerquetscht */
@media (max-width:1100px){
  body.elementor-page .intro-map .statement-map{ max-width:18ch; margin:0 auto 10px; }
  body.elementor-page .intro-map .statement-map > .elementor-widget-container{ margin:0 !important; width:auto; }
}
@media (max-width:560px){
  .ssg-svcgrid > .elementor-container{ grid-template-columns:1fr; }
  body.elementor-page .svc-card--wide{ grid-column:span 1; }
  body.elementor-page .svc-card--wide > .elementor-element-populated{ flex-direction:column; align-items:flex-start; gap:22px; }
  body.elementor-page .svc-card--wide > .elementor-element-populated > .elementor-widget{ width:100%; }
  body.elementor-page .svc-card--wide .svc-card__ic{ margin-bottom:0; }
  body.elementor-page .svc-card--wide .svc-card__benefit{ max-width:none; margin-top:auto; padding-top:0; }
  .sus-track-map > .elementor-container{ grid-template-columns:1fr; }
  .foot-top-map > .elementor-container{ grid-template-columns:1fr; }
  .hero-trust > .elementor-container{ gap:20px; }
}


/* ===== Kit-/Theme-Override-Fixes (04.08.2026) =====
   Das Elementor-Kit der Zielsite erzwingt Grau (#7A7A7A/#54595F) auf Elementen,
   die per Vererbung Markenfarben bekommen sollten. Hier explizit zurückgesetzt.
   Zusätzlich: Footer-Lesbarkeit auf Dunkelgrün erhöht (Gewicht 400, hellere Töne). */
body.elementor-page .svc-card__tx h3,
body.elementor-page .sus-step__tx h3{ color:var(--ink); }
body.elementor-page .irow b,
body.elementor-page .irow span,
body.elementor-page .irow a{ color:var(--ink); }
body.elementor-page .irow a:hover{ color:var(--ssg-700); }

body.elementor-page .foot-list a,
body.elementor-page .foot-list .elementor-icon-list-text{ color:#d9ece4 !important; font-weight:400; }
body.elementor-page .foot-list a:hover,
body.elementor-page .foot-list a:hover .elementor-icon-list-text{ color:#fff !important; }
body.elementor-page .legal-map .elementor-widget-container,
body.elementor-page .legal-map span,
body.elementor-page .legal-map a{ color:#a9cec2; }
body.elementor-page .legal-map a:hover{ color:#fff; }


/* ===== Optimized-Markup-Kompat (04.08.2026) =====
   Diese WordPress-Instanz rendert Elementor-Widgets OHNE .elementor-widget-container.
   Alle Container-Regeln hier auf die Widget-Wurzel gemappt (Margin-Neutralisierer bewusst ausgelassen). */
body.elementor-page .svc-card__benefit{ display:flex; align-items:center; gap:8px; font-size:.84rem; font-weight:500; color:var(--ssg-700); }
body.elementor-page .svc-card__benefit::before{ content:""; width:15px; height:15px; flex-shrink:0; background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c6e5c' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
body.elementor-page .svc-card--wide .svc-card__benefit{ color:#fff; }
body.elementor-page .svc-card--wide .svc-card__benefit::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
body.elementor-page .ssg-connector{ display:flex; justify-content:center; margin-top:44px; }
body.elementor-page .brand-photo .elementor-widget-image{ height:100%; }
body.elementor-page .irow{ display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--line); }
body.elementor-page .irow::before{ content:""; width:42px; height:42px; border-radius:13px; background-color:var(--mist-2);
  background-position:center; background-repeat:no-repeat; background-size:20px 20px; flex-shrink:0; }
body.elementor-page .irow--tel::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c6e5c' stroke-width='1.6'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h2l2 5-2 1a12 12 0 0 0 5 5l1-2 5 2v2a2 2 0 0 1-2 2A16 16 0 0 1 4 5z'/%3E%3C/svg%3E"); }
body.elementor-page .irow--mail::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c6e5c' stroke-width='1.6'%3E%3Cpath d='M3 6h18v12H3z'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
body.elementor-page .irow--pin::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c6e5c' stroke-width='1.6'%3E%3Cpath d='M12 21s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E"); }
body.elementor-page .legal-map{ display:flex; gap:24px; font-weight:300; font-size:.86rem; color:#9fc6ba; align-items:center; }
body.elementor-page .svc-card--wide > .elementor-element-populated > .elementor-widget{ width:auto; }
body.elementor-page .intro-map .statement-map{ width:auto; }
body.elementor-page .legal-map{ color:#a9cec2; }

/* Mobile-Fix (04.08.2026): Sally-Bubble kollidierte mit dem Header — auf kleinen Screens in die Spalte holen.
   Scrollhint kollidierte mit den Trust-Countern am Hero-Ende — mobil ausblenden. */
@media (max-width:880px){
  /* Blase raus aus der absoluten Positionierung: statisch im Flow, per order VOR dem Sally-Bild.
     Kann so nie das Maskottchen oder den Header verdecken; der Zeiger deutet auf Sally darunter. */
  body.elementor-page .elementor-widget-wrap > .elementor-widget.hero__bubble,
  .hero__bubble{ position:static; order:-1; margin:104px 0 16px 6vw; align-self:flex-start;
    font-size:.92rem; padding:10px 14px; white-space:normal; max-width:min(78vw, 320px); }
  .scrollhint{ display:none; }
}


/* ===== Widget-Breiten-Fix (04.08.2026) =====
   Ohne .elementor-widget-container greift die ursprüngliche width:100%-Regel nicht mehr.
   Folge: Text-Widgets schrumpfen auf Inhaltsbreite, nachfolgende Buttons rutschen in
   dieselbe Flex-Zeile und stehen mittig statt links (sichtbar zwischen ~640 und 880px).
   Breite hier auf der Widget-Wurzel setzen — außer bei Elementors auto/initial-Widgets
   (Buttons, Sally-Bild), die bewusst inhaltsbreit bleiben. */
body.elementor-page .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial){ width:100%; }
/* Ausnahme: In den breiten Service-Karten liegen Text und Benefit nebeneinander. */
body.elementor-page .svc-card--wide .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto){ width:auto; }

/* Hero-Zeilenbreite: max-width:30ch lag auf der Widget-Wurzel, dadurch blieb das
   Absatz-Widget schmal und der erste Button setzte sich in dieselbe Flex-Zeile
   (Button rutschte nach rechts, zweiter brach um). Zeilenbreite gehört auf den Absatz,
   damit die Wurzel die Zeile füllt und die Buttons darunter beginnen. */
body.elementor-page .ssg-hero .hero__sub{ max-width:none; }
body.elementor-page .ssg-hero .hero__sub p{ max-width:30ch; }


/* ===== Sally Guide (04.08.2026): Tour, Schnellantworten & Fragen ===== */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Ausloeser auf der Seite */
.sg-trigger{ cursor:pointer; }
.hb-cta{ display:block; margin-top:6px; font-size:.8rem; font-weight:500; color:var(--ssg); }

/* Abschnitts-Hervorhebung waehrend der Tour */
.sally-spot{ outline:3px solid rgba(0,152,131,.45); outline-offset:-3px; border-radius:8px; transition:outline-color .4s; }

/* FAB */
.sg-fab{
  position:fixed; right:22px; bottom:22px; z-index:10000;
  width:64px; height:64px; border-radius:50%; border:2px solid var(--ssg);
  background:#fff; padding:0; cursor:pointer; overflow:visible;
  box-shadow:0 12px 30px -8px rgba(11,80,68,.35);
  transition:transform .25s;
}
.sg-fab:hover{ transform:translateY(-3px); }
.sg-fab img{ width:100%; height:100%; object-fit:cover; object-position:top; border-radius:50%; display:block; }
.sg-fab__hint{
  position:absolute; right:72px; top:50%; transform:translateY(-50%);
  background:#fff; color:var(--ssg-700); font-weight:500; font-size:.8rem;
  padding:6px 12px; border-radius:12px 12px 4px 12px; white-space:nowrap;
  box-shadow:0 6px 20px rgba(11,80,68,.16);
}
.sg-fab--off{ display:none; }
.sg-fab--hero{ display:none; } /* solange Sally im Hero steht, begleitet sie von dort */
@keyframes sgPulse{ 0%{ box-shadow:0 0 0 0 rgba(0,152,131,.4); } 100%{ box-shadow:0 0 0 18px rgba(0,152,131,0); } }
.sg-fab:not(.sg-fab--off){ animation:sgPulse 2.2s ease-out 3; }
@media (prefers-reduced-motion: reduce){ .sg-fab{ animation:none !important; } }

/* Dock */
.sg-dock[hidden]{ display:none; } /* display:flex unten würde das hidden-Attribut sonst aushebeln */
.sg-dock{ transition:transform .38s ease; }
.sg-dock--peek{ transform:translateY(calc(100% + 40px)); pointer-events:none; } /* kurz abtauchen, wenn Sally eine Sektion zeigt */
@media (prefers-reduced-motion: reduce){ .sg-dock{ transition:none; } }
.sg-dock{
  position:fixed; right:22px; bottom:22px; z-index:10001;
  width:min(392px, calc(100vw - 24px));
  max-height:min(600px, calc(100vh - 44px));
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:22px;
  box-shadow:0 30px 70px -20px rgba(11,80,68,.35);
  font-size:.95rem; overflow:hidden;
}
.sg-head{ display:flex; align-items:center; gap:12px; padding:14px 16px; background:linear-gradient(135deg, var(--mist), #fff); border-bottom:1px solid var(--line); flex-shrink:0; }
/* Nur der Chatverlauf darf schrumpfen — Kopf, Chips und Eingabe behalten ihre Höhe */
.sg-chips, .sg-ask{ flex-shrink:0; }
.sg-head__av{ width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:top; border:2px solid var(--ssg); background:#fff; }
.sg-head__tx{ display:flex; flex-direction:column; line-height:1.25; flex:1; min-width:0; }
.sg-head__tx b{ color:var(--ink); font-size:1rem; }
.sg-head__tx span{ color:var(--muted); font-size:.78rem; font-weight:300; }
.sg-close{
  border:1px solid rgba(12,110,92,.35); background:#fff; color:var(--ssg-700);
  font-family:inherit; font-size:.8rem; font-weight:500; padding:7px 14px; border-radius:999px; cursor:pointer;
  transition:background .25s;
}
.sg-close:hover{ background:var(--mint-soft); }

.sg-chat{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; min-height:120px; background:#fff; }
.sg-m{ max-width:85%; padding:10px 14px; line-height:1.5; font-weight:300; }
.sg-m a{ color:var(--ssg-700); font-weight:500; text-decoration:underline; text-underline-offset:2px; }
.sg-m--sally{ align-self:flex-start; background:var(--mist); color:var(--ink); border-radius:16px 16px 16px 4px; }
.sg-m--user{ align-self:flex-end; background:var(--ssg); color:#fff; border-radius:16px 16px 4px 16px; font-weight:400; }
.sg-dots{ display:inline-flex; gap:4px; padding:2px 0; }
.sg-dots i{ width:6px; height:6px; border-radius:50%; background:var(--ssg); opacity:.4; animation:sgDot 1s infinite; }
.sg-dots i:nth-child(2){ animation-delay:.16s; }
.sg-dots i:nth-child(3){ animation-delay:.32s; }
@keyframes sgDot{ 0%,100%{ opacity:.25; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-3px); } }

.sg-chips{ display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 12px; background:#fff; }
.sg-chip{
  border:1px solid rgba(12,110,92,.35); background:#fff; color:var(--ssg-700);
  font-family:inherit; font-size:.82rem; font-weight:500; padding:8px 14px; border-radius:999px;
  cursor:pointer; text-decoration:none; transition:background .25s, transform .2s;
}
.sg-chip:hover{ background:var(--mint-soft); transform:translateY(-1px); }
.sg-chip--primary{ background:var(--ssg); border-color:var(--ssg); color:#fff; }
.sg-chip--primary:hover{ background:var(--ssg-600); }

.sg-ask{ display:flex; gap:8px; padding:12px 16px 16px; border-top:1px solid var(--line); background:#fff; }
.sg-ask input{
  flex:1; min-width:0; border:1px solid var(--line); border-radius:999px; padding:11px 16px;
  font-family:inherit; font-size:.9rem; color:var(--ink); background:var(--mist);
}
.sg-ask input:focus{ outline:2px solid rgba(0,152,131,.4); background:#fff; }
.sg-ask button{
  width:44px; height:44px; flex-shrink:0; border:none; border-radius:50%;
  background:var(--ssg); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .25s, transform .2s;
}
.sg-ask button:hover{ background:var(--ssg-600); transform:translateY(-1px); }
.sg-ask button svg{ width:20px; height:20px; }

@media (max-width:560px){
  /* Kompakt-Sheet: maximal ~halbe Bildschirmhöhe, Seite bleibt dahinter sichtbar */
  .sg-dock{ right:12px; left:12px; bottom:12px; width:auto; max-height:min(52vh, 460px); border-radius:18px; }
  .sg-head{ padding:10px 12px; gap:10px; }
  .sg-head__av{ width:36px; height:36px; }
  .sg-head__tx b{ font-size:.95rem; }
  .sg-head__tx span{ font-size:.72rem; }
  .sg-close{ padding:6px 12px; font-size:.76rem; }
  .sg-chat{ padding:12px; gap:8px; min-height:80px; }
  .sg-m{ padding:9px 12px; font-size:.9rem; }
  /* Chips: eine wischbare Zeile statt zwei umbrechender Reihen */
  .sg-chips{ flex-wrap:nowrap; overflow-x:auto; padding:0 12px 10px; scrollbar-width:none; }
  .sg-chips::-webkit-scrollbar{ display:none; }
  .sg-chip{ flex-shrink:0; }
  .sg-ask{ padding:10px 12px 12px; }
  .sg-ask input{ padding:10px 14px; }
  .sg-ask button{ width:40px; height:40px; }
  .sg-fab{ right:16px; bottom:16px; width:58px; height:58px; }
  .sg-fab__hint{ display:none; }
}
/* ===== Sally Tour-Kompaktmodus mobil (04.08.2026) =====
   Waehrend der Tour schrumpft das Panel zur Sprechblasen-Leiste am unteren Rand,
   damit die Seite sichtbar bleibt und zu den Stationen scrollen kann. */
@media (max-width:560px){
  .sg-dock--tour{ max-height:none; background:transparent; border:none; box-shadow:none; overflow:visible; }
  .sg-dock--tour .sg-head{ display:none; }
  .sg-dock--tour .sg-ask{ display:none; }
  .sg-dock--tour .sg-chat{
    flex:0 0 auto; min-height:0; overflow:visible; padding:0 0 10px 52px; background:transparent; position:relative;
  }
  .sg-dock--tour .sg-m{ display:none; }
  .sg-dock--tour .sg-m:last-child{
    display:block; max-width:100%;
    background:rgba(255,255,255,.96); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid var(--line); border-radius:16px 16px 16px 4px;
    box-shadow:0 14px 40px -12px rgba(11,80,68,.35);
  }
  /* Sally-Avatar als Absender neben der Blase */
  .sg-dock--tour .sg-chat::before{
    content:""; position:absolute; left:0; bottom:10px; width:42px; height:42px;
    border-radius:50%; border:2px solid var(--ssg); background:#fff url("assets/sally-upright.png") center top/cover no-repeat;
    box-shadow:0 8px 20px rgba(11,80,68,.25);
  }
  .sg-dock--tour .sg-chips{ padding:0; background:transparent; flex-wrap:nowrap; overflow-x:auto; }
  .sg-dock--tour .sg-chip{ background:#fff; flex-shrink:0; box-shadow:0 6px 16px rgba(11,80,68,.14); }
  .sg-dock--tour .sg-chip--primary{ background:var(--ssg); }
}
/* ===== Dock-Buttons gegen Kit-Globals härten (04.08.2026):
   .elementor-kit-6 button/button:hover überschrieb Farben (weiße Schrift auf Mint). ===== */
.sg-dock .sg-close, .sg-dock .sg-close:hover, .sg-dock .sg-close:focus{
  background:#fff; color:var(--ssg-700); border:1px solid rgba(12,110,92,.35);
}
.sg-dock .sg-close:hover{ background:var(--mint-soft); color:var(--ssg-700); }
.sg-dock .sg-chip, .sg-dock .sg-chip:focus{ background:#fff; color:var(--ssg-700); }
.sg-dock .sg-chip:hover{ background:var(--mint-soft); color:var(--ssg-700); }
.sg-dock .sg-chip--primary, .sg-dock .sg-chip--primary:focus{ background:var(--ssg); color:#fff; }
.sg-dock .sg-chip--primary:hover{ background:var(--ssg-600); color:#fff; }
.sg-dock .sg-ask button, .sg-dock .sg-ask button:hover, .sg-dock .sg-ask button:focus{ background:var(--ssg); color:#fff; border:none; }
.sg-dock .sg-ask button:hover{ background:var(--ssg-600); }
/* ===== Social-Leiste über dem Kontakt (12.08.2026) ===== */
.ssg-social-strip{
  display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap;
  padding:26px 32px; border-radius:20px; background:var(--mist);
  border:1px solid var(--line);
}
.ssg-social-strip__label{ font-weight:500; color:var(--ink); font-size:1.05rem; }
.ssg-social-strip__icons{ display:flex; gap:12px; }
.ssg-social-strip__icons a{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid rgba(12,110,92,.3); color:var(--ssg-700);
  transition:background .25s, color .25s, transform .2s;
}
.ssg-social-strip__icons a:hover{ background:var(--ssg); border-color:var(--ssg); color:#fff; transform:translateY(-2px); }
.ssg-social-strip__icons svg{ width:21px; height:21px; }
@media (max-width:560px){
  .ssg-social-strip{ flex-direction:column; gap:14px; padding:22px 16px; }
}

/* ===== Cookie-/Datenschutz-Hinweis (12.08.2026) ===== */
.ssg-consent{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:10010;
  max-width:560px; margin:0 auto;
  background:#fff; border:1px solid var(--line); border-radius:18px;
  box-shadow:0 24px 60px -18px rgba(11,80,68,.4);
  padding:18px 20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:.9rem; color:var(--ink); line-height:1.5;
}
.ssg-consent p{ margin:0; flex:1; min-width:220px; font-weight:300; }
.ssg-consent a{ color:var(--ssg-700); font-weight:500; text-decoration:underline; text-underline-offset:2px; }
.ssg-consent button{
  border:none; border-radius:999px; background:var(--ssg); color:#fff;
  font-family:inherit; font-weight:500; font-size:.9rem; padding:11px 22px; cursor:pointer;
  transition:background .25s;
}
.ssg-consent button:hover{ background:var(--ssg-600); }
/* ===== Instagram-Bereich über dem Kontakt (18.08.2026) ===== */
.ssg-insta__head{ text-align:center; margin-bottom:34px; }
.ssg-insta__eyebrow{
  font-size:.82rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ssg-700); margin:0 0 10px;
}
.ssg-insta__title{
  font-size:clamp(1.7rem, 3vw, 2.4rem); font-weight:700; color:var(--ink);
  margin:0; line-height:1.15;
}
.ssg-insta__grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:28px;
}
.ssg-insta__grid[hidden]{ display:none; }
.ssg-insta__item{
  position:relative; display:block; aspect-ratio:1; overflow:hidden;
  border-radius:18px; background:var(--mist); box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s;
}
.ssg-insta__item:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.ssg-insta__item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
.ssg-insta__item:hover img{ transform:scale(1.05); }
.ssg-insta__cap{
  position:absolute; inset:auto 0 0 0; padding:34px 14px 14px;
  background:linear-gradient(to top, rgba(12,93,76,.92), rgba(12,93,76,0));
  color:#fff; font-size:.82rem; font-weight:300; line-height:1.45;
  opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s;
}
.ssg-insta__item:hover .ssg-insta__cap{ opacity:1; transform:none; }
.ssg-insta__play{
  position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--ssg-700);
  display:flex; align-items:center; justify-content:center;
}
.ssg-insta__play svg{ width:16px; height:16px; margin-left:2px; }
@media (max-width:760px){
  .ssg-insta__grid{ grid-template-columns:repeat(2, 1fr); gap:12px; }
  .ssg-insta__cap{ display:none; }   /* auf Touch gibt es keinen Hover */
}