.hero { padding: 76px 0 62px; overflow: hidden; background: radial-gradient(700px 420px at 88% -10%,var(--teal-soft),transparent 60%),radial-gradient(600px 420px at 4% 100%,var(--orange-soft),transparent 60%),linear-gradient(135deg,#fff 0%,#fff 45%,#eefafa 100%); }

.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 58px; }

.hero p { font-size: 1.24rem; max-width: 680px; color: #333; }

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 18px; }

.trust { display: flex; gap: 18px; flex-wrap: wrap; color: #555; font-size: .94rem; }

.hero-media { position: relative; }

.hero-media img { width: 100%; height: 560px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

.stripe { height: 8px; background: linear-gradient(90deg,var(--orange) 0 45%,var(--teal) 45% 100%); }

section { padding: 86px 0; }

.section-intro { max-width: 760px; margin-bottom: 38px; }

.section-intro p { font-size: 1.12rem; color: #555; }

.soft { background: var(--cream); }

.mint { background: var(--mint); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

.split img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

.quote { font-size: clamp(1.7rem,3vw,2.8rem); line-height: 1.25; font-weight: 800; max-width: 900px; }

.small { font-size: .9rem; color: var(--muted-on-dark); }

.pagehero { padding: 72px 0; background: var(--cream); }

.pagehero p { font-size: 1.2rem; max-width: 760px; }

.content-grid { display: grid; grid-template-columns: 1fr 340px; gap: 55px; }

.sidebox { position: sticky; top: 120px; background: var(--mint); border-radius: 24px; padding: 26px; height: max-content; }

.feature-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }

.feature { padding: 24px; border: 1px solid var(--line); border-radius: 20px; }

.premium-hero { background-color: var(--offwhite); background-image: radial-gradient(700px 420px at 88% -10%,var(--teal-soft),transparent 60%),radial-gradient(600px 420px at 4% 100%,var(--orange-soft),transparent 60%); padding: 92px 0 78px; }

.premium-hero h1 { font-size: clamp(3.5rem,7.5vw,7.4rem); max-width: 850px; }

.hero-lead { font-size: clamp(1.15rem,2vw,1.5rem)!important; max-width: 640px!important; }

.editorial img { border-radius: var(--radius-lg); }

.orb { position: absolute; border-radius: 50%; z-index: -1; filter: blur(6px); opacity: .55; }

.orb-a { width: 140px; height: 140px; background: radial-gradient(circle,var(--orange) 0%,transparent 70%); right: -48px; top: -35px; animation: orb-float-a 11s ease-in-out infinite; }

.orb-b { width: 75px; height: 75px; background: radial-gradient(circle,var(--teal) 0%,transparent 70%); left: -30px; top: 70px; animation: orb-float-b 9s ease-in-out infinite; }

@keyframes orb-float-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-10px,12px) scale(1.06); } }

@keyframes orb-float-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(12px,-8px) scale(.94); } }

.path-section { background: #fff; }

.path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.path-card.path-orange { background: linear-gradient(135deg,#FFC79A 0%,var(--orange) 100%); color: var(--charcoal); }

.path-card.path-teal { background: linear-gradient(135deg,#93E2DC 0%,var(--teal) 100%); color: var(--charcoal); }

.path-card.path-light { background: linear-gradient(135deg,var(--cream) 0%,#F1E4D4 100%); color: var(--charcoal); }

.statement { position: relative; overflow: hidden; background: linear-gradient(135deg,var(--surface-dark) 0%,var(--surface-dark-2) 100%); color: var(--black); padding: 84px 0; }

.statement:before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px 300px at 12% 0%,var(--orange-soft),transparent 60%),radial-gradient(520px 300px at 88% 100%,var(--teal-soft),transparent 60%); }

.statement>.wrap { position: relative; z-index: 1; }

.megaquote { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: clamp(1.9rem,3.4vw,3.1rem); line-height: 1.3; max-width: 780px; }

.megaquote em { font-style: normal; color: var(--orange); }

.largecopy { font-size: 1.28rem; }

.editorial-split { gap: 85px; }

.image-stack { position: relative; }

.strong { padding-left: 0; }

.outcomes { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: #ddd; }

.outcomes article { background: #fff; padding: 36px; min-height: 280px; }

.outcomes span { font-size: .76rem; letter-spacing: .13em; color: var(--teal); font-weight: 900; }

.outcomes h3 { font-size: 2rem; margin-top: 35px; }

.trust-section { background: #fff; }

.hero-media img { filter: saturate(.92) contrast(.98); }

.trust-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: start; }

.trust-facts { border-top: 1px solid #d9d9d4; }

.trust-facts>div { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 25px 0; border-bottom: 1px solid #d9d9d4; align-items: center; }

.trust-facts strong { font-family: 'Outfit', sans-serif; font-size: 2rem; text-transform: uppercase; }

.trust-facts span { color: #595955; }

/* Premium subpages */
.subhero { padding: 88px 0 72px; background-color: var(--offwhite); background-image: radial-gradient(700px 420px at 88% -10%,var(--teal-soft),transparent 60%),radial-gradient(600px 420px at 4% 100%,var(--orange-soft),transparent 60%); overflow: hidden; }

.subhero-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: 70px; align-items: center; }

.subhero h1 { font-size: clamp(3.2rem,6.8vw,6.3rem); max-width: 900px; }

.subhero p { font-size: 1.24rem; max-width: 690px; color: #4d4d49; }

.subhero-media { position: relative; }

.subhero-media img { width: 100%; height: 470px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); filter: saturate(.92); }

.intro-band { padding: 42px 0; background: #fff; border-top: 1px solid #e7e7e2; border-bottom: 1px solid #e7e7e2; }

.intro-band .wrap { display: grid; grid-template-columns: .82fr 1.18fr; gap: 55px; align-items: start; }

.intro-band h2 { font-size: clamp(2.1rem,3.5vw,3.6rem); }

.intro-band p { font-size: 1.18rem; color: #555; }

.premium-section { background: #fff; }

.premium-section.soft { background: var(--cream); }

.premium-section.mint { background: var(--mint); }

.value-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: #deded9; }

.value-grid.two { grid-template-columns: repeat(2,1fr); }

.value-grid.four { grid-template-columns: repeat(4,1fr); }

.section-label { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); background: rgba(61,180,176,.12); border-radius: 999px; padding: 8px 16px; margin-bottom: 16px; }

.section-label:before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }

.editorial-copy { font-size: 1.22rem; color: #4b4b47; max-width: 760px; }

.compare-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }

.process-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }

.audience-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }

.fact-strip { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #deded9; border-bottom: 1px solid #deded9; }

.fact-strip>div { padding: 24px 28px; }

.fact-strip>div+div { border-left: 1px solid #deded9; }

.fact-strip strong { display: block; font-size: 1.15rem; margin-bottom: 6px; }

.fact-strip span { font-size: .9rem; color: #666; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.form-grid .full { grid-column: 1/-1; }

section { padding: 96px 0; }

.section-intro { margin-bottom: 46px; }

.section-intro p { line-height: 1.65; }

.editorial-copy, .largecopy { line-height: 1.7; }

.premium-hero h1 { line-height: 1.01; }

.subhero h1 { line-height: 1.02; margin-bottom: 30px; }

.megaquote { line-height: 1.3; }

.quote { line-height: 1.34; }

/* Hero areas */
.hero, .premium-hero { padding-top: 96px; padding-bottom: 84px; }

.hero-grid, .subhero-grid { gap: 72px; }

.hero p, .subhero p { line-height: 1.65; }

.hero-actions { margin-top: 32px; margin-bottom: 24px; gap: 14px; }

.trust { line-height: 1.5; row-gap: 10px; }

/* Keep decorative labels safely inside their media container */
.hero-media, .subhero-media, .image-stack { overflow: hidden; }

.feature-grid { gap: 24px; }

.feature { padding: 28px; }

.path-grid { gap: 24px; }

/* Premium subpage blocks */
.intro-band { padding: 54px 0; }

.intro-band .wrap { gap: 70px; }

.intro-band h2 { line-height: 1.1; margin-bottom: 0; }

.intro-band p { line-height: 1.72; margin-bottom: 0; }

.compare-grid { gap: 24px; }

.process-row { gap: 24px; }

.audience-grid { gap: 24px; }

.fact-strip>div { padding: 28px 30px; }

.fact-strip strong { line-height: 1.35; margin-bottom: 8px; }

.form-grid { gap: 18px; }

/* Trust / outcomes */
.outcomes article { padding: 40px; min-height: 295px; }

.outcomes h3 { line-height: 1.14; margin-top: 32px; margin-bottom: 16px; }

.trust-grid { gap: 88px; }

.trust-facts>div { padding: 28px 0; gap: 28px; }

.trust-facts strong { line-height: 1.1; }

/* =========================================================
   Critical overlap fix – About page + shared two-column layouts
   ========================================================= */
.subhero-grid, .split, .editorial-split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }

.subhero-grid > *, .split > *, .editorial-split > * { min-width: 0; max-width: 100%; }

.subhero-grid > div:first-child, .editorial-split > div { position: relative; z-index: 2; }

.subhero-media, .editorial-split > img { position: relative; z-index: 1; max-width: 100%; }

.subhero-media img, .editorial-split > img { display: block; width: 100%; max-width: 100%; }

.subhero h1, .editorial-split h2 { max-width: 100%; word-break: normal; }

/* About page: keep copy and photography clearly separated */
body:has(.active-nav[href="ueber-uns.html"]) .subhero-grid { grid-template-columns: minmax(0,1.08fr) minmax(360px,.92fr); column-gap: 84px; }

body:has(.active-nav[href="ueber-uns.html"]) .subhero h1 { font-size: clamp(3rem,5.7vw,5.8rem); line-height: 1.03; }

body:has(.active-nav[href="ueber-uns.html"]) .editorial-split { grid-template-columns: minmax(360px,.92fr) minmax(0,1.08fr); column-gap: 80px; align-items: center; }

body:has(.active-nav[href="ueber-uns.html"]) .editorial-split > img { align-self: center; }

/* =========================================================
   Homepage hero headline – definitive spacing fix
   ========================================================= */
.premium-hero .hero-grid { grid-template-columns: minmax(0,1.12fr) minmax(380px,.88fr); column-gap: 72px; }

.premium-hero h1 { max-width: 760px; font-size: clamp(3.8rem,5.4vw,5.7rem); line-height: 1.08; text-wrap: initial; overflow-wrap: normal; word-break: normal; }

@keyframes slamIn { 0% { transform: scale(2) translateY(-100px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }

.premium-hero h1, .subhero h1 { animation: slamIn .8s cubic-bezier(.2,.8,.2,1) both; }

.premium-hero h1 .hero-title-line { display: block; line-height: 1.08; }

.premium-hero h1 .hero-title-line + .hero-title-line { margin-top: .16em; }

.hero-title-line { display: block; line-height: 1.02; }

.hero-title-line+.hero-title-line { margin-top: .10em; }

.subhero h1 { line-height: 1.03; }

.editorial-copy, .largecopy { line-height: 1.65; }

.premium-section p, .intro-band p { line-height: 1.7; }

.path-grid-secondary { grid-template-columns: 1.35fr 1fr; margin-top: 22px; }

/* "Passt das zu Ihnen?" — reuses .premium-panel/.checklist for the "yes"
   side; the "no" side gets a quieter, matter-of-fact counterpart. */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

