/* Apple-style pages inside /slgeneral (no external v5 deps) */

:root{
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Helvetica,Arial,sans-serif;
  --font-text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
  --text:#0d2137;
  --muted:#4a6070;
  --tertiary:#7a92a0;
  --bg:#fff;
  --bg-alt:#eef5fb;
  --bg-alt2:#f4f9f2;
  --line:rgba(13,33,55,.07);
  --link:#4e8840;
  --link-hover:#3d7335;
  --max:980px;
  --sl-p:#7cc268;
  --sl-p-d:#4e8840;
  --sl-navy:#0d2137;
  --sl-gold:#d4af37;
  --sl-blue:#deedf8;
}

*{box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
@media(min-width:1068px){html{font-size:17px}}
body{
  margin:0;
  font-family:var(--font-text);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1;
  text-rendering:optimizeLegibility;
  letter-spacing:-.011em;
}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:.2em}

/* Header – matches index (sg-apple-nav) */
.sg-apple-nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  background:rgba(255,255,255,.72);
}
.sg-apple-nav--scrolled{
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.92);
}
.sg-apple-nav__inner{
  display:flex;align-items:center;justify-content:space-between;
  height:4.25rem;max-width:75rem;margin:0 auto;padding:0 1rem;gap:.75rem;
}
@media(min-width:1068px){.sg-apple-nav__inner{height:5.25rem;padding:0 1.375rem}}
.sg-apple-nav__logo{
  display:inline-flex;flex-shrink:0;align-items:center;line-height:0;text-decoration:none;
}
.sg-apple-nav__logo:hover{text-decoration:none;opacity:.85}
.sg-apple-nav__logo img{
  display:block;height:4.0625rem;width:auto;max-width:15.625rem;
  object-fit:contain;object-position:left center;
}
@media(min-width:734px){.sg-apple-nav__logo img{height:5rem;max-width:18.75rem}}
.sg-type-nav-link{
  font-size:12px;font-weight:400;letter-spacing:-.01em;line-height:1;
  color:rgba(29,29,31,.72);text-decoration:none;white-space:nowrap;
}
.sg-type-nav-link:hover{color:var(--text);text-decoration:none}
.sg-apple-nav__links--desktop{display:none;align-items:center;gap:1.75rem}
@media(min-width:768px){.sg-apple-nav__links--desktop{display:flex}}
.sg-apple-nav__tools{display:flex;align-items:center;gap:.75rem}
@media(min-width:768px){.sg-apple-nav__tools{display:none}}
.sg-apple-nav__cta{display:none}
@media(min-width:768px){.sg-apple-nav__cta{display:inline-flex}}
.sg-apple-nav__menu{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;border:0;background:transparent;cursor:pointer;padding:0;
}
.sg-apple-nav__bar,.sg-apple-nav__bar::before,.sg-apple-nav__bar::after{
  position:absolute;width:1.0625rem;height:1.5px;background:var(--text);border-radius:1px;
  transition:transform .25s ease,opacity .2s ease;content:"";
}
.sg-apple-nav__bar::before{transform:translateY(-5px)}
.sg-apple-nav__bar::after{transform:translateY(5px)}
.sg-apple-nav__bar--open{background:transparent}
.sg-apple-nav__bar--open::before{transform:rotate(45deg)}
.sg-apple-nav__bar--open::after{transform:rotate(-45deg)}
.sg-apple-nav__panel{
  overflow:hidden;border-top:1px solid var(--line);
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
}
.sg-apple-nav__panel[hidden]{display:none}
.sg-apple-nav__drawer{padding:.75rem 1.5rem 1rem}
.sg-apple-nav__drawer a{
  display:block;padding:.75rem 0;font-size:17px;font-weight:400;line-height:1.47;
  color:var(--text);text-decoration:none;
}
.sg-apple-nav__drawer a:hover{color:var(--link);text-decoration:none}
.lang{display:inline-flex;align-items:center;gap:2px}
.lang__btn{
  border:0;background:transparent;cursor:pointer;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tertiary);padding:4px 6px;border-radius:6px;
}
.lang__btn[aria-pressed="true"]{color:var(--text);font-weight:500}
.lang__sep{font-size:10px;color:rgba(0,0,0,.2)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 1.375rem}
.hero{padding:3.5rem 0 2.5rem;text-align:center}
.eyebrow{margin:0 0 .5rem;font-size:13px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.h1{
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2.125rem,5.5vw + 1rem,4rem);
  line-height:1.05;
  letter-spacing:-.032em;
  text-wrap:balance;
}
.h1--gold{
  background:linear-gradient(180deg,#e8c547 0%,#d4af37 42%,#b88a2a 78%,#9a7320 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.sub{
  margin:.9rem auto 0;
  max-width:28rem;
  font-size:clamp(1rem,2.5vw,1.25rem);
  line-height:1.47;
  color:var(--muted);
  letter-spacing:-.011em;
}
.links{margin-top:1.1rem;display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.learn{font-size:17px}
.chev{font-size:1.125em;font-weight:300;position:relative;top:.02em}

.section{padding:3.25rem 0}
@media(min-width:1068px){.section{padding:4.75rem 0}}
.section--alt{background:var(--bg-alt)}
.h2{
  margin:0 0 .9rem;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.75rem,4vw + .5rem,3rem);
  line-height:1.08;
  letter-spacing:-.024em;
  text-wrap:balance;
}
.p{margin:.75rem 0;font-size:15px;line-height:1.55;color:var(--muted)}
.list{margin:1rem 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.list li{padding:1.1rem 0;border-bottom:1px solid var(--line)}
.label{display:block;font-weight:600;color:var(--text);font-size:15px}
.value{display:block;margin-top:.35rem;color:var(--muted);font-size:15px;line-height:1.55}

.card{
  border:1px solid var(--line);
  background:#fff;
  border-radius:18px;
  padding:1.25rem;
}
@media(min-width:734px){.card{padding:1.6rem}}

.card--media{
  padding:0;
  overflow:hidden;
  background:#f5f5f7;
  border:none;
  border-radius:18px;
}
.card--media-sketch{
  background:#fff;
}
@media(min-width:734px){
  .card--media-sketch{
    max-width:40rem;
    margin-left:auto;
    margin-right:auto;
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 6px 28px rgba(0,0,0,.07);
  }
}
.card__sketch{
  width:100%;
  display:block;
  object-fit:contain;
  object-position:center;
  aspect-ratio:1024/682;
  max-height:min(70vh,42.5rem);
}
.card__logo{
  width:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  aspect-ratio:16/10;
  max-height:min(70vh,42.5rem);
}

.btnrow{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-top:1.25rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.85rem 1.25rem;border-radius:999px;
  border:1px solid var(--line);
  background:#fff;color:var(--text);
  font-size:17px;letter-spacing:-.01em;
}
.btn--gold{
  border:none;
  color:#fff;
  background:linear-gradient(180deg,#d4af37 0%,#b88a2a 100%);
}

/* Notdienst – 24/7 Anruf-CTA mit dezentem Glow */
.btn--call-247{
  position:relative;
  gap:.625rem;
  padding:.9rem 1.35rem;
  border:none;
  color:#fff;
  font-weight:600;
  letter-spacing:-.015em;
  background:linear-gradient(180deg,#e8c547 0%,#c9982e 48%,#a67c1f 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.22) inset,
    0 4px 18px rgba(184,138,42,.35),
    0 0 24px rgba(212,175,55,.28);
  animation:nd-call-glow 2.8s ease-in-out infinite;
}
.btn__call-main{
  font-size:17px;
  line-height:1;
}
.btn__call-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.22rem .5rem;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1;
  color:#1a1408;
  background:rgba(255,255,255,.92);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
}
.btn--call-247:hover{
  text-decoration:none;
  opacity:1;
  transform:translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.28) inset,
    0 6px 22px rgba(184,138,42,.42),
    0 0 32px rgba(212,175,55,.38);
}
.btn--call-247:active{
  transform:translateY(0);
}

@keyframes nd-call-glow{
  0%,100%{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.22) inset,
      0 4px 16px rgba(184,138,42,.32),
      0 0 20px rgba(212,175,55,.22);
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.3) inset,
      0 6px 24px rgba(184,138,42,.48),
      0 0 36px rgba(212,175,55,.42);
  }
}

@media (prefers-reduced-motion:reduce){
  .btn--call-247{
    animation:none;
  }
}

.btn:hover:not(.btn--call-247){text-decoration:none;opacity:.92}

.footer{
  border-top:1px solid var(--line);
  background:var(--bg-alt);
  padding:2.75rem 0;
}
.foot__inner{display:flex;flex-direction:column;gap:1.5rem}
@media(min-width:734px){.foot__inner{flex-direction:row;justify-content:space-between;align-items:flex-start}}
.foot__brand{font-size:13px;font-weight:500;color:var(--text);letter-spacing:-.01em}
.foot__meta{font-size:12px;color:var(--muted);margin-top:.25rem;line-height:1.55}
.foot__links{display:flex;flex-direction:column;gap:.5rem}
.foot__link{font-size:12px;color:var(--muted)}
.foot__link:hover{color:var(--text);text-decoration:none}
.foot__link[aria-current="page"]{color:var(--text);font-weight:500}
.copy{margin-top:2rem;font-size:11px;color:var(--tertiary)}

/* ── Prozess-Schritte ── */
.steps{margin-top:1.75rem;display:flex;flex-direction:column}
.step{display:flex;gap:1rem;padding:1.25rem 0;border-bottom:1px solid var(--line)}
.step:first-child{border-top:1px solid var(--line)}
.step__num{font-size:1.375rem;font-weight:700;color:#d4af37;min-width:2.25rem;flex-shrink:0;line-height:1.2}
.step__title{font-size:15px;font-weight:600;color:var(--text);margin:0 0 .3rem}
.step__desc{font-size:14px;color:var(--muted);margin:0;line-height:1.55}

/* ── Feature-Karten ── */
.features{margin-top:1.75rem;display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:600px){.features{grid-template-columns:repeat(2,1fr)}}
.feat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.25rem}
.feat__title{font-size:15px;font-weight:600;color:var(--text);margin:0 0 .4rem}
.feat__desc{font-size:14px;color:var(--muted);margin:0;line-height:1.55}

/* ── Trust-Badges ── */
.trust-row{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.6rem}
.trust-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .85rem;
  border-radius:999px;background:#fff;border:1px solid var(--line);
  font-size:13px;font-weight:500;color:var(--text)}
.trust-badge__dot{width:.5rem;height:.5rem;border-radius:50%;background:#d4af37;flex-shrink:0}

/* ── FAQ auf Unterseiten ── */
.faq-sub{margin-top:1.75rem;border-top:1px solid var(--line)}
.faq-sub__item{border-bottom:1px solid var(--line)}
.faq-sub__q{width:100%;display:flex;justify-content:space-between;align-items:flex-start;
  gap:.75rem;padding:1rem 0;border:0;background:0;text-align:left;
  font-size:15px;font-weight:500;color:var(--text);cursor:pointer;line-height:1.4}
.faq-sub__icon{font-size:1.125rem;color:var(--muted);flex-shrink:0;margin-top:.1rem;
  transition:transform .22s ease}
.faq-sub__item.open .faq-sub__icon{transform:rotate(45deg)}
.faq-sub__a{display:none;padding:.15rem 0 1rem;font-size:14px;color:var(--muted);line-height:1.6}
.faq-sub__item.open .faq-sub__a{display:block}

/* ── CTA-Block ── */
.cta-block{background:var(--bg-alt);padding:3rem 0;text-align:center}

/* ── Highlight-Box ── */
.highlight{background:linear-gradient(135deg,rgba(212,175,55,.08),rgba(212,175,55,.04));
  border:1px solid rgba(212,175,55,.3);border-radius:14px;padding:1.25rem;margin-top:1.25rem}
.highlight__title{font-size:15px;font-weight:600;color:var(--text);margin:0 0 .4rem}
.highlight__body{font-size:14px;color:var(--muted);margin:0;line-height:1.55}

/* ── Brand overrides – makes all sub-pages match the landing page ── */
.eyebrow{color:var(--sl-p-d);letter-spacing:.08em}
.hero{background:linear-gradient(160deg,#fff 55%,var(--bg-alt) 100%);position:relative}
.hero::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;
  background:linear-gradient(to right,var(--sl-p),var(--sl-p-d));pointer-events:none}
.h1{color:var(--sl-navy)}
.h2{color:var(--sl-navy)}
.step__num{color:var(--sl-p-d)}
.trust-badge__dot{background:var(--sl-p-d)}
.trust-badge{border-color:rgba(78,136,64,.15)}
.section--alt{background:var(--bg-alt)}
.feat{border-color:rgba(78,136,64,.12);transition:border-color .2s,box-shadow .2s}
.feat:hover{border-color:rgba(78,136,64,.28);box-shadow:0 4px 16px rgba(78,136,64,.08)}
.feat__title{color:var(--sl-navy)}
.step__title{color:var(--sl-navy)}
.card{border-color:rgba(13,33,55,.08)}
.footer{background:var(--sl-navy);border-top:none}
.foot__brand{color:#fff;font-size:14px;font-weight:600}
.foot__meta{color:rgba(255,255,255,.55)}
.foot__link{color:rgba(255,255,255,.55)}
.foot__link:hover{color:#fff;text-decoration:none}
.copy{color:rgba(255,255,255,.3)}
.cta-block{background:linear-gradient(135deg,var(--bg-alt) 0%,var(--bg-alt2) 100%);
  border-top:1px solid rgba(78,136,64,.12)}
