/* v4 complete conversion and visual integration: uses established Solum brand tokens */
html{scroll-behavior:smooth}#pakete-preise,#demos,#problem,#branchen,#ablauf,#faq,#kontakt,#kontakt-formular{scroll-margin-top:105px}
.solum-legacy-hidden{display:none!important}
.solum-offers-v4{padding-top:clamp(70px,8vw,112px);padding-bottom:clamp(62px,7vw,98px)}
.solum-offers-v4 .solum-lead{max-width:690px}
.solum-offers-v4 .solum-cards{margin-top:42px;gap:19px}
.solum-offers-v4 .solum-card-v4{border-radius:24px;padding:clamp(22px,2.7vw,32px);overflow:hidden}
.solum-offers-v4 .solum-card-v4::after{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,rgba(214,173,79,.32),transparent)}
.solum-offers-v4 .solum-card-v4.featured::after{background:linear-gradient(90deg,transparent,#d6ad4f,transparent)}
.solum-card-v4-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:50px}
.solum-offers-v4 .solum-icon{display:grid;place-items:center;width:47px;height:47px;flex-shrink:0;border-radius:15px;background:var(--so-pill);border:1px solid var(--so-stroke);color:var(--so-gold)}
.solum-offers-v4 .solum-icon svg{height:23px;width:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.solum-offers-v4 .solum-card h3{margin-top:22px;margin-bottom:13px}
.solum-offers-v4 .solum-product-desc{font-size:14px;min-height:92px;line-height:1.75}
.solum-offers-v4 .solum-price-block{padding:18px 0 16px;margin:5px 0 9px;border-top:1px solid var(--so-stroke);border-bottom:1px solid var(--so-stroke)}
.solum-offers-v4 .solum-price-label{font-weight:760;font-size:10px;letter-spacing:.13em;display:block;color:var(--so-muted)}
.solum-offers-v4 .solum-price{margin:7px 0 13px;line-height:1.1}
.solum-offers-v4 .solum-month{font-size:clamp(24px,2.2vw,29px);margin:7px 0 0;line-height:1.2}
.solum-offers-v4 .solum-month span{font-size:13px;font-weight:600;color:var(--so-muted)}
.solum-offers-v4 .solum-card ul{margin-top:7px;margin-bottom:12px}
.solum-offers-v4 .solum-card .solum-note{font-size:12px;min-height:45px;margin:7px 0 14px!important}
.solum-offers-v4 .solum-product-actions{margin-top:auto;display:flex;flex-direction:column;gap:14px}
.solum-offers-v4 .solum-btn{width:100%;align-self:stretch;justify-content:space-between;padding-inline:20px}
.solum-offers-v4 .solum-link,.solum-page .solum-link{color:var(--so-gold);font-weight:750;font-size:12px;line-height:1.5;text-decoration:none}
.solum-offers-v4 .solum-link:hover,.solum-page .solum-link:hover{text-decoration:underline;text-underline-offset:4px}
.solum-offers-v4 .solum-price-assurance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--so-stroke);border-radius:20px;overflow:hidden;background:var(--so-surface)}
.solum-price-assurance>div{padding:22px 21px;display:flex;flex-direction:column;gap:8px}
.solum-price-assurance>div+div{border-left:1px solid var(--so-stroke)}
.solum-price-assurance strong{font-size:13px;color:var(--so-ink)}
.solum-price-assurance span{font-size:12px;line-height:1.7;color:var(--so-body)}
.solum-offers-v4 .solum-pricing-fine{font-size:12px;line-height:1.7;color:var(--so-muted);margin:18px 2px 26px}
.solum-offers-v4 .solum-details{border-radius:18px;margin-top:12px;padding:19px 22px;background:var(--so-surface);border:1px solid var(--so-stroke)}
.solum-offers-v4 .solum-details summary{color:var(--so-ink);font-size:14px;font-weight:740;display:flex;gap:12px;justify-content:space-between;align-items:center}
.solum-offers-v4 .solum-details[open] summary span{transform:rotate(45deg)}
.solum-offers-v4 .solum-extra-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:21px 0 11px}
.solum-extra-grid>div{border:1px solid var(--so-stroke);border-radius:15px;padding:19px}
.solum-extra-grid h3{font-weight:760;font-size:15px;line-height:1.45;margin:0 0 8px;color:var(--so-ink)}
.solum-extra-grid p{font-size:13px;color:var(--so-body);line-height:1.7;margin:0 0 11px}
.solum-extra-grid strong{font-size:12px;color:var(--so-gold)}
.solum-offers-v4 .solum-section-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:24px;padding:26px 0 0;border-top:1px solid var(--so-stroke)}
.solum-section-cta p{margin:0;font-size:13px;line-height:1.75;color:var(--so-body)}
.solum-section-cta strong{font-size:15px;color:var(--so-ink)}
.solum-section-cta .solum-btn{width:auto;min-width:220px}
.solum-demo-context{display:flex;align-items:center;gap:16px;max-width:940px;margin:-8px auto 30px;padding:15px 18px;border:1px solid rgba(214,173,79,.26);border-radius:16px;background:rgba(214,173,79,.045);color:var(--solum-tone-primary,#f2ede3)}
.solum-demo-context-icon{flex-shrink:0;color:var(--solum-tone-gold,#d6ad4f);font-size:24px}
.solum-demo-context>div{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.solum-demo-context strong{font-size:13px;line-height:1.5}
.solum-demo-context div span{font-size:12px;line-height:1.65;color:var(--solum-tone-muted,#aaa)}
.solum-demo-context>a{font-size:12px;color:var(--solum-tone-gold,#d6ad4f);font-weight:740;white-space:nowrap}
.solum-extra-faq{border:1px solid rgba(214,173,79,.26);border-radius:15px;padding:18px 22px;color:var(--solum-tone-primary,#f2ede3)}
.solum-extra-faq summary{cursor:pointer;font-size:15px;font-weight:650;display:flex;justify-content:space-between;gap:14px;list-style:none}
.solum-extra-faq summary::-webkit-details-marker{display:none}
.solum-extra-faq summary span{color:var(--solum-tone-gold,#d6ad4f)}
.solum-extra-faq p{margin:13px 0 0;font-size:14px;line-height:1.75;color:var(--solum-tone-muted,#aaa)}
#solum-mobile-cta{display:none}
/* Light and dark come from the same persistent toggle used by the original site. */
html[data-theme="dark"] .solum-demo-context{background:rgba(214,173,79,.065)}
html[data-theme="light"] .solum-demo-context{background:rgba(166,119,24,.055);border-color:rgba(166,119,24,.19)}
/* Interior pages */
.solum-page .solum-topbar{position:sticky;top:0;z-index:50;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.solum-page .solum-detail-hero{position:relative;overflow:hidden}
.solum-page .solum-detail-hero::before{content:"";position:absolute;top:-110px;right:-110px;width:430px;height:430px;background:radial-gradient(circle,rgba(214,173,79,.12),transparent 67%);pointer-events:none}
.solum-page .solum-detail-hero .solum-wrap{position:relative;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:36px;max-width:1160px}
.solum-page .solum-detail-hero p{max-width:680px}
.solum-page .solum-detail-panel{background:var(--so-surface);border:1px solid var(--so-stroke);border-radius:22px;padding:28px;box-shadow:var(--so-shadow)}
.solum-page .solum-detail-panel .solum-eyebrow{font-size:11px}
.solum-page .solum-detail-panel .solum-price{font-size:46px;margin:13px 0 3px}
.solum-page .solum-detail-panel .solum-month{font-size:21px}
.solum-page .solum-detail-panel ul{list-style:none;padding:0;margin:20px 0;display:flex;flex-direction:column;gap:11px}
.solum-page .solum-detail-panel li{color:var(--so-body);font-size:13px;line-height:1.6;display:flex;align-items:start;gap:10px}
.solum-page .solum-detail-panel li:before{content:'✓';font-weight:800;color:var(--so-gold)}
.solum-page .solum-detail-panel .solum-btn{width:100%;margin-top:11px}
.solum-page .solum-detail-panel .solum-note{margin:14px 0 0}
.solum-page .solum-detail-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-top:28px}
.solum-page .solum-step{padding:21px;border:1px solid var(--so-stroke);border-radius:18px;background:var(--so-surface)}
.solum-page .solum-step>span{display:inline-block;color:var(--so-gold);font-size:12px;font-weight:800;letter-spacing:.15em;margin-bottom:16px}
.solum-page .solum-step h3{font-size:16px;line-height:1.4;color:var(--so-ink);font-weight:750;margin:0 0 8px}
.solum-page .solum-step p{font-size:12px;line-height:1.7;color:var(--so-body);margin:0}
.solum-page .solum-detail-note{padding:19px 23px;border:1px solid var(--so-stroke);border-radius:16px;margin-top:22px;background:var(--so-surface);font-size:13px;line-height:1.75;color:var(--so-body)}
.solum-page .solum-detail-note strong{color:var(--so-ink)}
.solum-page .solum-hero .solum-actions{margin-top:25px}
.solum-page .solum-detail-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.solum-page .solum-feature{border:1px solid var(--so-stroke);border-radius:18px;padding:21px;background:var(--so-surface)}
.solum-page .solum-feature h3{font-size:17px;font-weight:750;margin:0 0 10px;color:var(--so-ink)}
.solum-page .solum-feature p{font-size:13px;line-height:1.75;color:var(--so-body);margin:0}
.solum-page .solum-detail-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:33px;border:1px solid var(--so-stroke);border-radius:22px;background:var(--so-surface)}
.solum-page .solum-detail-cta h2{font-family:'Space Grotesk',sans-serif;color:var(--so-ink);font-size:clamp(23px,3vw,30px);line-height:1.2;margin:0 0 9px}
.solum-page .solum-detail-cta p{color:var(--so-body);font-size:13px;line-height:1.7;margin:0}
.solum-page .solum-section+.solum-section{border-top:1px solid var(--so-stroke)}
.solum-page .solum-page-nav{display:flex;gap:13px;align-items:center;flex-wrap:wrap}
.solum-page .solum-page-nav a{font-size:13px;color:var(--so-body);font-weight:650}
.solum-page .solum-page-nav a:hover{color:var(--so-gold)}
.solum-page .solum-topbar{gap:16px}
.solum-page .solum-faq{border-top:1px solid var(--so-stroke)}
@media(max-width:1050px){.solum-page .solum-page-nav{display:none}}
@media(max-width:920px){.solum-offers-v4 .solum-cards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}.solum-offers-v4 .solum-card-v4.featured{grid-column:1/-1;max-width:none}.solum-page .solum-detail-hero .solum-wrap{grid-template-columns:1fr}.solum-page .solum-detail-panel{max-width:650px}.solum-page .solum-detail-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
 .solum-offers-v4{padding:66px 20px 80px}.solum-offers-v4 .solum-cards{grid-template-columns:1fr;gap:16px;max-width:none;margin:28px 0 23px}.solum-offers-v4 .solum-card-v4.featured{grid-column:auto}
 .solum-offers-v4 .solum-card-v4{padding:24px}.solum-offers-v4 .solum-card .solum-btn{width:100%;font-size:13px;min-height:52px}
 .solum-offers-v4 .solum-product-desc{min-height:0}.solum-offers-v4 .solum-price-assurance{grid-template-columns:1fr}.solum-price-assurance>div{padding:19px 20px}.solum-price-assurance>div+div{border-left:0;border-top:1px solid var(--so-stroke)}
 .solum-offers-v4 .solum-extra-grid{grid-template-columns:1fr}.solum-offers-v4 .solum-section-cta{flex-direction:column;align-items:stretch}.solum-section-cta .solum-btn{width:100%}
 .solum-demo-context{flex-wrap:wrap;padding:15px}.solum-demo-context>a{width:100%;white-space:normal;padding-left:0}
 .solum-page .solum-detail-steps,.solum-page .solum-detail-pair{grid-template-columns:1fr}.solum-page .solum-detail-cta{flex-direction:column;align-items:stretch;padding:24px}.solum-page .solum-detail-cta .solum-btn{width:100%}
 .solum-page .solum-detail-panel{padding:23px}
 /* Do not introduce a new fixed overlay competing with the existing telephone/WhatsApp controls. */
 #solum-mobile-cta{display:none!important}
}
@media(prefers-reduced-motion:no-preference){.solum-offers-v4 .solum-card-v4.featured{animation:solum-gold-appear .75s ease both}@keyframes solum-gold-appear{from{opacity:.86;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.solum-offers-v4 .solum-card-v4.featured{animation:none}}

#top .solum-old-count-hidden{display:none!important}

@media(max-width:640px){
 /* Prevent the existing fixed call/WhatsApp controls from obscuring offer cards. */
 body.solum-cta-focus div[style*="position: fixed; right: 18px; bottom: 18px"]{
  opacity:0!important;pointer-events:none!important;transition:opacity .2s ease;
 }
}

/* v5: remove 100vh-sized heading wrappers caused by inherited h-full inside auto-height sections.
   Only headings are affected; motion, grids and interactive demos remain untouched. */
#problem > .mx-auto:first-child > .h-full,
#branchen > .mx-auto:first-child > .h-full,
#demos > .mx-auto:first-child > .h-full,
#leistungen > .mx-auto:first-child > .h-full,
#ablauf > .mx-auto:first-child > .h-full,
#faq > .mx-auto:first-child > .h-full {
  height:auto!important; min-height:0!important;
}
/* Give each stage its own breathing room but avoid unnecessary blank screens. */
#problem,#branchen,#demos,#leistungen,#ablauf,#faq,#kontakt{padding-top:clamp(62px,7vw,102px);padding-bottom:clamp(62px,7vw,102px)}
#problem > .mx-auto:first-child,#branchen > .mx-auto:first-child,
#demos > .mx-auto:first-child,#leistungen > .mx-auto:first-child,
#ablauf > .mx-auto:first-child,#faq > .mx-auto:first-child{margin-bottom:clamp(27px,4vw,50px)}
/* The original React cards, icons and gradients retain their own animations and original styling. */
#leistungen:not(.solum-legacy-hidden){position:relative}
#leistungen:before{content:'';pointer-events:none;position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(90%,980px);height:1px;background:linear-gradient(90deg,transparent,rgba(214,173,79,.28),transparent)}
/* Anchor and focus visibility under the existing fixed navigation. */
#top,#problem,#branchen,#demos,#pakete-preise,#leistungen,#ablauf,#faq,#kontakt,#kontakt-formular{scroll-margin-top:110px}
html{scroll-padding-top:110px}
header a:focus-visible,#pakete-preise a:focus-visible,#leistungen a:focus-visible,
.solum-page a:focus-visible{outline:2px solid #d6ad4f;outline-offset:4px}
/* Mobile readability and spacing; do not cover buttons with additional fixed UI. */
@media(max-width:650px){
 #problem,#branchen,#demos,#leistungen,#ablauf,#faq,#kontakt{padding-top:65px;padding-bottom:65px}
 #top,#problem,#branchen,#demos,#pakete-preise,#leistungen,#ablauf,#faq,#kontakt,#kontakt-formular{scroll-margin-top:96px}
 html{scroll-padding-top:96px}
}

/* On-brand interactive example, intentionally not connected to a live chatbot */
.solum-chat-preview{scroll-margin-top:108px}
.solum-chat-shell{margin:28px auto 0;max-width:680px;border-radius:24px;border:1px solid var(--so-stroke);background:var(--so-surface);box-shadow:var(--so-shadow);overflow:hidden}
.solum-chat-header{display:flex;gap:13px;align-items:center;padding:21px 24px;border-bottom:1px solid var(--so-stroke);color:var(--so-ink)}
.solum-chat-pulse{width:12px;height:12px;border-radius:50%;background:var(--so-gold);box-shadow:0 0 0 5px rgba(214,173,79,.12)}
.solum-chat-header>div{display:flex;flex-direction:column;gap:4px}
.solum-chat-header strong{font-size:15px}.solum-chat-header small{color:var(--so-muted);font-size:11px}
.solum-chat-messages{min-height:225px;padding:28px 24px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:16px}
.solum-chat-bubble{font-size:14px;line-height:1.6;max-width:min(85%,430px);padding:15px 18px;border-radius:18px;margin:0}
.solum-chat-bot{background:var(--so-pill);color:var(--so-ink);border:1px solid var(--so-stroke);border-bottom-left-radius:5px}
.solum-chat-user{background:var(--so-gold);color:#17140d;align-self:flex-end;border-bottom-right-radius:5px}
.solum-chat-choices{border-top:1px solid var(--so-stroke);padding:18px 21px;display:flex;flex-wrap:wrap;gap:9px}
.solum-chat-choices button{border:1px solid var(--so-stroke);border-radius:99px;padding:10px 15px;font:600 12px/1.35 Inter,sans-serif;color:var(--so-ink);background:transparent;cursor:pointer;transition:background .2s,border-color .2s}
.solum-chat-choices button:hover,.solum-chat-choices button:focus-visible{border-color:var(--so-gold);background:var(--so-pill)}
@media(max-width:650px){.solum-chat-messages{min-height:245px;padding:20px 18px}.solum-chat-choices{padding:16px}.solum-chat-choices button{width:100%;text-align:left}}

/* V7: active product cards—benefit-first pricing hierarchy.
   Unlike the old home-update component, these rules target the currently mounted V5 cards. */
.solum-offers-v4 .solum-card-v4 h3{font-size:clamp(23px,2.25vw,29px);line-height:1.23;margin:17px 0 12px;letter-spacing:-.025em}
.solum-offers-v4 .solum-product-desc{font-size:14px;line-height:1.75;min-height:78px;margin-bottom:12px}
.solum-offers-v4 .solum-price-block{padding:15px 0 13px;margin:5px 0 10px;border-color:var(--so-stroke)}
.solum-offers-v4 .solum-price-label{font-size:10px;font-weight:680;letter-spacing:.11em;color:var(--so-muted);opacity:.95}
.solum-offers-v4 .solum-price{font-size:clamp(24px,2.12vw,28px);font-weight:700;letter-spacing:-.032em;line-height:1.24;margin:5px 0 13px;color:var(--so-ink)}
.solum-offers-v4 .solum-month{font-size:clamp(18px,1.75vw,21px);font-weight:700;letter-spacing:-.018em;line-height:1.35;margin:5px 0 1px;color:var(--so-gold)}
.solum-offers-v4 .solum-month span{font-size:12px;font-weight:550;letter-spacing:0;color:var(--so-muted)}
.solum-offers-v4 .solum-card ul{margin:6px 0 14px}
@media(max-width:650px){
  .solum-offers-v4 .solum-card-v4 h3{font-size:24px}
  .solum-offers-v4 .solum-product-desc{min-height:0}
  .solum-offers-v4 .solum-price{font-size:25px}
  .solum-offers-v4 .solum-month{font-size:19px}
}
