:root{
  --ink:#0b2540;
  --muted:#66717d;
  --line:#dfe4e8;
  --paper:#ffffff;
  --wash:#f6f8f9;
  --blue:#003f78;
  --focus:#8ec5ff;
  --danger:#9f2431;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,textarea{font:inherit}
button{color:inherit}
img{max-width:100%;display:block}
[hidden]{display:none!important}
.skip-link{position:absolute;left:-9999px;top:8px;background:#fff;padding:8px 12px;z-index:100}.skip-link:focus{left:8px}
.shell{width:min(var(--max),calc(100% - 40px));margin:0 auto}
.site-header{height:84px;display:flex;align-items:center;border-bottom:1px solid transparent}
.site-header .shell{display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{text-decoration:none;display:inline-flex;align-items:center;gap:10px}.wordmark img{width:119px;height:auto}.wordmark small{font-size:10px;letter-spacing:.19em;font-weight:700;color:var(--blue)}
.site-nav{display:flex;gap:30px;align-items:center}.site-nav a{text-decoration:none;font-size:14px;color:#33495e}.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--blue)}
.menu-btn{display:none;border:0;background:none;padding:10px;font-size:15px}
@media(max-width:720px){.site-header{height:72px}.shell{width:min(var(--max),calc(100% - 28px))}.site-nav{gap:18px}.site-nav a{font-size:13px}.wordmark small{display:none}}
@media(max-width:520px){.site-nav{gap:13px}.site-nav a{font-size:12px}}

/* Home: intentionally sparse */
.home-main{min-height:calc(100svh - 132px);display:grid;place-items:center;padding:54px 0 80px}
.home-panel{width:min(920px,100%);margin:0 auto}
.home-panel h1{font-size:clamp(40px,6.3vw,76px);line-height:1.03;letter-spacing:-.045em;font-weight:560;max-width:13ch;margin:0 0 54px}
.home-question{font-size:14px;color:var(--muted);margin:0 0 14px}
.choice-list{display:grid;border-top:1px solid var(--line)}
.choice{appearance:none;width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;display:flex;align-items:center;justify-content:space-between;gap:24px;text-align:left;padding:23px 4px;cursor:pointer;font-size:clamp(21px,3vw,30px);letter-spacing:-.02em}
.choice::after{content:"→";font-size:.9em;font-weight:400;transition:transform .16s ease}.choice:hover::after{transform:translateX(4px)}.choice:hover{color:var(--blue)}
.choice:focus-visible,.back-link:focus-visible,.btn:focus-visible,.site-nav a:focus-visible,details summary:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.home-step[hidden]{display:none}.back-link{border:0;background:none;padding:0;margin:0 0 24px;color:var(--muted);cursor:pointer;font-size:14px}.back-link:hover{color:var(--blue)}
.pain-title{font-size:clamp(28px,4vw,44px);line-height:1.12;letter-spacing:-.03em;font-weight:560;margin:0 0 34px;max-width:16ch}
.home-legal{position:fixed;bottom:16px;left:0;width:100%;pointer-events:none}.home-legal .shell{display:flex;justify-content:flex-end;gap:14px}.home-legal a{pointer-events:auto;color:#8a949d;font-size:11px;text-decoration:none}.home-legal a:hover{color:var(--blue)}
@media(max-width:720px){.home-main{place-items:start;padding-top:72px}.home-panel h1{margin-bottom:44px}.choice{padding:19px 2px}.home-legal{position:static;padding:0 0 16px}}

/* Inner pages */
.inner-main{padding:90px 0 110px}.inner-hero{max-width:760px;margin-bottom:78px}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:0 0 16px}.inner-hero h1{font-size:clamp(42px,6vw,68px);line-height:1.02;letter-spacing:-.045em;font-weight:560;margin:0}.inner-hero .intro{font-size:clamp(19px,2.2vw,24px);line-height:1.45;color:#34495e;margin:28px 0 0;max-width:58ch}
.content-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:80px;align-items:start}.copy-block{max-width:670px}.copy-block h2{font-size:clamp(27px,3.5vw,38px);line-height:1.12;letter-spacing:-.025em;font-weight:560;margin:0 0 18px}.copy-block p{font-size:18px;color:#405264;margin:0 0 24px}.copy-block + .copy-block{margin-top:58px}.feature-image{border-radius:2px;overflow:hidden;background:var(--wash)}.feature-image img{width:100%;height:auto}.caption{font-size:12px;color:var(--muted);margin-top:10px}
.text-link{display:inline-flex;align-items:center;gap:10px;margin-top:12px;color:var(--blue);font-weight:600;text-decoration:none}.text-link::after{content:"→"}.text-link:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:800px){.inner-main{padding:64px 0 80px}.inner-hero{margin-bottom:52px}.content-grid{grid-template-columns:1fr;gap:48px}.feature-image{order:-1;max-width:620px}}

/* FAQ */
.role-filter{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 46px}.filter-btn{border:1px solid var(--line);background:#fff;padding:10px 14px;border-radius:999px;cursor:pointer;font-size:14px}.filter-btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}.faq-list{max-width:820px;border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line)}details summary{list-style:none;cursor:pointer;padding:25px 0;font-size:clamp(18px,2.3vw,23px);display:flex;justify-content:space-between;gap:22px}details summary::-webkit-details-marker{display:none}details summary::after{content:"+";font-weight:300;color:var(--muted)}details[open] summary::after{content:"−"}.faq-answer{padding:0 0 25px;color:#405264;font-size:17px;max-width:68ch}.faq-answer p{margin:0}

/* Contact */
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:880px}.person{border-top:1px solid var(--line);padding-top:22px}.person img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 25%;margin-bottom:20px}.person h2{font-size:24px;font-weight:560;letter-spacing:-.02em;margin:0 0 4px}.person .role{color:var(--muted);font-size:14px;margin:0 0 18px}.person a{display:block;text-decoration:none;margin:3px 0;font-size:16px}.person a:hover{text-decoration:underline;text-underline-offset:3px}.contact-cta{margin-top:70px;padding-top:32px;border-top:1px solid var(--line);max-width:880px;display:flex;align-items:center;justify-content:space-between;gap:24px}.contact-cta p{font-size:23px;letter-spacing:-.02em;margin:0}.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ink);background:var(--ink);color:#fff;text-decoration:none;padding:13px 18px;min-height:48px;border-radius:2px;cursor:pointer;font-weight:600;font-size:15px}.btn.secondary{background:#fff;color:var(--ink)}.btn:hover{opacity:.9}
@media(max-width:680px){.people{grid-template-columns:1fr}.contact-cta{align-items:flex-start;flex-direction:column}}

/* Questionnaire */
.form-header{border-bottom:1px solid var(--line)}.form-header .site-header{height:76px}.progress{height:2px;background:#eef1f3}.progress span{display:block;height:100%;background:var(--blue);width:0;transition:width .2s ease}.form-main{max-width:760px;padding:72px 0 100px}.step-label{font-size:12px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px}.form-step{border:0;padding:0;margin:0}.form-step h1,.form-step h2{font-size:clamp(34px,5vw,52px);line-height:1.06;letter-spacing:-.038em;font-weight:560;margin:0 0 34px}.form-step .hint{font-size:16px;color:var(--muted);margin:-18px 0 30px}.js-form .form-step{display:none}.js-form .form-step.is-active{display:block}.field{margin:0 0 22px}.field label{display:block;font-size:14px;margin:0 0 7px}.field .optional{color:var(--muted);font-weight:400}.field input,.field textarea{width:100%;border:1px solid #aeb7bf;background:#fff;color:var(--ink);border-radius:2px;padding:13px 14px;min-height:50px;font-size:17px}.field textarea{min-height:130px;resize:vertical}.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--blue)}.field input[aria-invalid="true"]{border-color:var(--danger)}.field-error{color:var(--danger);font-size:13px;margin:7px 0 0}.field-error[hidden]{display:none}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-actions{display:flex;align-items:center;gap:20px;margin-top:34px}.plain-back{border:0;background:none;color:var(--muted);padding:12px 0;cursor:pointer}.plain-back:hover{color:var(--ink)}.summary{border-top:1px solid var(--line);margin-top:6px}.summary-row{display:grid;grid-template-columns:150px 1fr auto;gap:18px;border-bottom:1px solid var(--line);padding:15px 0}.summary-row dt{color:var(--muted);font-size:13px}.summary-row dd{margin:0;white-space:pre-line}.summary-row button{border:0;background:none;text-decoration:underline;color:var(--muted);cursor:pointer}.privacy-check{display:flex;align-items:flex-start;gap:11px;margin:26px 0}.privacy-check input{width:20px;height:20px;margin-top:3px}.privacy-check label{font-size:14px;color:#4c5d6d}.privacy-check a{color:var(--blue)}.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.turnstile-wrap{min-height:66px;margin-top:16px}.submit-message{margin:18px 0;padding:14px;border:1px solid var(--line);font-size:14px}.submit-message.error{border-color:var(--danger);color:var(--danger)}.form-footer{border-top:1px solid var(--line);padding:20px 0 30px;color:var(--muted);font-size:12px}.form-footer .shell{display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap}.form-footer a{text-decoration:none}.form-footer a:hover{text-decoration:underline}.context-line{font-size:15px;color:var(--muted);margin:-18px 0 36px}.context-line strong{color:var(--ink);font-weight:560}.direct-role-pick{display:grid;border-top:1px solid var(--line);margin-top:28px}.direct-role-pick label{border-bottom:1px solid var(--line);padding:18px 0;cursor:pointer;font-size:20px}.direct-role-pick input{margin-right:10px}
@media(max-width:620px){.form-main{padding:54px 0 80px}.form-grid{grid-template-columns:1fr}.summary-row{grid-template-columns:1fr auto}.summary-row dt{grid-column:1}.summary-row dd{grid-column:1/-1}.summary-row button{grid-column:2;grid-row:1}.form-actions{align-items:flex-start;flex-direction:column}.form-actions .btn{width:100%}}

/* =======================================================================
   CIRRUS-Design über die minimale Struktur
   Schrift, Farben, Hell- und Dunkelmodus, Wortmarke, Knöpfe, Flächen.
   Die Struktur und die Klassennamen bleiben unverändert.
   ======================================================================= */

:root{
  --blue:#00407B;
  --blue-dk:#00305C;
  --blue-lt:#8CA9C3;
  --ink:#273349;
  --muted:#5B6880;
  --line:#DDE3EA;
  --paper:#FFFFFF;
  --wash:#F4F6F9;
  --gray:#B9BCC1;
  --focus:#8CA9C3;
  --danger:#9A2A2A;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --blue:#7FA8D4; --blue-dk:#6E97C4; --blue-lt:#8CA9C3;
    --ink:#E8ECF3; --muted:#A5B0C4; --line:#26314A;
    --paper:#0B111B; --wash:#151E2E; --gray:#7B8698; --danger:#E58C8C;
  }
}

/* Schrift */
body{
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.6; font-weight:400;
  background:var(--paper); color:var(--ink);
}
h1,h2,h3,.home-panel h1,.pain-title,.inner-hero h1,.copy-block h2,.form-step h1,.form-step h2,.person h2{
  font-weight:600 !important; letter-spacing:-.015em !important; line-height:1.14 !important;
  hyphens:none; text-wrap:balance;
}
p,li,.faq-answer,.copy-block p,.inner-hero .intro{text-wrap:pretty; hyphens:none}
.eyebrow,.step-label,.home-question{font-size:12.5px !important; letter-spacing:.14em !important;
  font-weight:600 !important; color:var(--blue) !important; text-transform:uppercase}

/* Wortmarke: HOSPITALITY zentriert unter CIRRUS, unterstrichen */
.wordmark{flex-direction:column; align-items:center; gap:7px}
.wordmark img{width:119px; height:auto}
@media (prefers-color-scheme: dark){ .wordmark img{filter:brightness(0) invert(1)} }
.wordmark small{
  display:block; width:100%; text-align:center;
  font-size:10.5px; letter-spacing:.24em; text-indent:.24em; font-weight:500;
  color:var(--gray); border-bottom:1px solid currentColor; padding-bottom:6px;
}

/* Kopfzeile */
.site-header{border-bottom:1px solid var(--line)}
.site-nav a{font-size:15px; color:var(--muted); font-weight:400}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--blue)}

/* Startseite */
.home-panel h1{font-size:clamp(34px,5.4vw,62px) !important; letter-spacing:-.02em !important; max-width:16ch; margin-bottom:46px !important}
.home-question{margin-bottom:12px !important}
.choice-list{border-top-color:var(--line)}
.choice{
  border-bottom-color:var(--line); font-size:clamp(20px,2.6vw,27px) !important;
  letter-spacing:-.01em; font-weight:500; padding:22px 6px !important; color:var(--ink);
  transition:color .15s ease, padding-left .15s ease;
}
.choice:hover{color:var(--blue); padding-left:12px !important}
.choice::after{color:var(--blue)}
.pain-title{font-size:clamp(26px,3.6vw,40px) !important}
.back-link{color:var(--muted)} .back-link:hover{color:var(--blue)}
.home-legal a{color:var(--muted); font-size:12px}

/* Innenseiten */
.inner-hero h1{font-size:clamp(32px,4.8vw,54px) !important; letter-spacing:-.02em !important}
.inner-hero .intro{font-size:clamp(17.5px,2vw,21px) !important; color:var(--muted); font-weight:300; line-height:1.55 !important}
.copy-block h2{font-size:clamp(23px,3vw,32px) !important}
.copy-block p{font-size:17px; color:var(--muted); font-weight:300}
.feature-image{border-radius:10px; background:var(--wash)}
.feature-image img{border-radius:10px}
.caption{font-size:13px; color:var(--muted); font-weight:300}
.text-link{color:var(--blue); font-weight:500}

/* FAQ */
.filter-btn{border:1.5px solid var(--line); background:var(--paper); color:var(--ink);
  border-radius:999px; padding:10px 16px; font-size:15px; transition:.14s}
.filter-btn:hover{border-color:var(--blue-lt)}
.filter-btn[aria-pressed="true"]{background:var(--blue); border-color:var(--blue); color:#fff}
.faq-list{border-top-color:var(--line)}
details{border-bottom-color:var(--line)}
details summary{font-size:clamp(17px,2vw,20px) !important; font-weight:500; padding:22px 0 !important}
details summary::after{color:var(--blue); font-weight:400}
.faq-answer{color:var(--muted); font-size:16.5px; font-weight:300}

/* Kontakt */
.person{border-top-color:var(--line)}
.person img{border-radius:10px; aspect-ratio:4/3}
.person h2{font-size:22px !important}
.person .role{color:var(--muted); font-size:14.5px; font-weight:300}
.person a{color:var(--blue); font-weight:500; font-size:16px; text-decoration:none;
  border-bottom:1px solid transparent; width:max-content}
.person a:hover{border-bottom-color:var(--blue); text-decoration:none !important}
.contact-cta{border-top-color:var(--line)}
.contact-cta p{font-size:21px; font-weight:500; letter-spacing:-.01em}

/* Knöpfe */
.btn{
  background:var(--blue); border:1.5px solid var(--blue); color:#fff;
  border-radius:6px; padding:15px 26px; min-height:50px; font-weight:500; font-size:16.5px;
  transition:.15s;
}
.btn:hover{background:var(--blue-dk); border-color:var(--blue-dk); opacity:1}
.btn.secondary{background:transparent; color:var(--blue); border-color:var(--blue)}
.btn.secondary:hover{background:var(--blue); color:#fff}

/* Formularstrecke */
.form-header{border-bottom-color:var(--line)}
.progress{background:var(--line)}
.progress span{background:var(--blue)}
.form-step h1,.form-step h2{font-size:clamp(28px,4.2vw,44px) !important; letter-spacing:-.02em !important}
.form-step .hint{color:var(--muted); font-size:16px; font-weight:300}
.field label{font-size:15px; font-weight:500}
.field .optional{color:var(--muted); font-weight:300}
.field input,.field textarea{
  border:1.5px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink);
  font-size:16.5px; padding:14px 16px; min-height:52px;
}
.field input:focus-visible,.field textarea:focus-visible{border-color:var(--blue); outline:2px solid var(--blue-lt); outline-offset:1px}
.field input[aria-invalid="true"]{border-color:var(--danger)}
.summary,.summary-row{border-color:var(--line)}
.summary-row dt{color:var(--muted); font-weight:300}
.summary-row button{color:var(--blue)}
.privacy-check label{color:var(--muted); font-size:15px; font-weight:300}
.privacy-check a{color:var(--blue)}
.submit-message{border:1px solid var(--line); border-radius:8px; background:var(--wash); font-size:15.5px}
.submit-message.error{border-color:var(--danger); color:var(--danger); background:transparent}
.direct-role-pick{border-top-color:var(--line)}
.direct-role-pick label{border-bottom-color:var(--line); font-size:18px}
.plain-back{color:var(--muted)} .plain-back:hover{color:var(--blue)}
.context-line{color:var(--muted); font-weight:300}
.context-line strong{color:var(--ink); font-weight:500}
.form-footer{border-top-color:var(--line); color:var(--muted)}

/* Flächen und Linien überall an die Farbvariablen koppeln */
.step-label{color:var(--blue)}
.skip-link{background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:6px}
@media (prefers-reduced-motion: reduce){*{transition:none !important}}

/* ===== Startseite: drei Kacheln und Skyline ===== */
.home-main{position:relative; overflow:hidden}
.home-skyline{
  position:absolute; right:0; bottom:0; width:58%; max-width:720px; display:block;
  z-index:0; pointer-events:none; opacity:.9;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 20%, #000 50%);
  mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 20%, #000 50%);
}
.home-skyline img{width:100%; height:auto; display:block}
@media (prefers-color-scheme: light){
  .home-skyline img{filter:invert(1) sepia(.35) saturate(1.6) hue-rotate(176deg) brightness(.92); opacity:.32}
}
.home-main > .shell{position:relative; z-index:2}

.situation-cards{display:grid; gap:16px; margin-top:4px}
@media(min-width:900px){.situation-cards{grid-template-columns:repeat(3,1fr)}}
.scard{
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  background:var(--paper); border:1.5px solid var(--line); border-radius:14px;
  padding:22px 20px; cursor:pointer; font:inherit; color:var(--ink);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.scard:hover{border-color:var(--blue); transform:translateY(-3px); box-shadow:0 16px 34px rgba(0,64,123,.14)}
.snum{font-size:12.5px; letter-spacing:.14em; font-weight:600; color:var(--blue); text-transform:uppercase}
.srole{font-size:14px; font-weight:500; color:var(--muted); margin-top:4px}
.stitle{font-size:19px; font-weight:600; line-height:1.3; margin-top:12px; letter-spacing:-.01em}
.ssub{font-size:15px; font-weight:300; color:var(--muted); margin-top:6px; line-height:1.45}
.sgo{margin-top:16px; color:var(--blue); font-size:18px; transition:transform .16s ease}
.scard:hover .sgo{transform:translateX(4px)}

/* ===== Schritt 2: Pain-Punkte als Chips ===== */
.pain-chips{display:flex; flex-wrap:wrap; gap:10px; max-width:760px}
.pchip{
  font:inherit; font-size:16px; padding:12px 18px; border-radius:999px;
  border:1.5px solid var(--line); background:var(--paper); color:var(--ink); cursor:pointer; transition:.14s;
}
.pchip:hover{border-color:var(--blue-lt)}
.pchip.on{background:var(--blue); border-color:var(--blue); color:#fff}
.pain-actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin-top:28px}
.pain-hint{font-size:15px; color:var(--muted); font-weight:300}

/* ===== Kontaktseite ===== */
.contact-grid{display:grid; gap:34px; align-items:start}
@media(min-width:960px){.contact-grid{grid-template-columns:1.25fr .75fr; gap:48px}}
.people{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:none}
.person img{aspect-ratio:1/1; max-width:220px; border-radius:12px; margin-bottom:16px}
@media(max-width:680px){.person img{max-width:160px}}
.contact-box{
  background:var(--wash); border:1px solid var(--line); border-radius:14px; padding:26px 24px;
  display:flex; flex-direction:column; gap:0;
}
.contact-box h2{font-size:20px !important; margin:0 0 14px; max-width:20ch}
.contact-box ul{list-style:none; margin:0 0 22px; padding:0}
.contact-box li{position:relative; padding-left:24px; font-size:16px; color:var(--muted); font-weight:300; margin-bottom:8px}
.contact-box li::before{content:"✓"; position:absolute; left:0; color:var(--blue); font-weight:600}
.contact-box .btn{width:100%}
.contact-box .btn.icon{margin-top:10px; width:auto; align-self:flex-start; padding:12px 16px; min-height:46px}
.btn.icon svg{display:block}

/* ===== Skyline dichter an die Überschrift ===== */
.home-skyline{
  right:-2% !important; bottom:4% !important; width:66% !important; max-width:820px !important;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.25) 26%, #000 58%) !important;
  mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.25) 26%, #000 58%) !important;
}
@media(max-width:860px){
  .home-skyline{position:static !important; width:100% !important; max-width:320px !important;
    margin:22px 0 0 !important; -webkit-mask-image:none !important; mask-image:none !important}
}

/* ===== Über uns: Projektspalte ===== */

/* ===== Ratgeber unter den häufigen Fragen ===== */
.ratgeber{margin-top:84px; padding-top:48px; border-top:1px solid var(--line)}
.ratgeber h2{font-size:clamp(25px,3.2vw,34px) !important; margin:0 0 12px}
.ratgeber-intro{color:var(--muted); font-weight:300; font-size:17px; margin:0 0 30px; max-width:58ch}
.ratgeber-item summary{align-items:flex-start; gap:18px; flex-direction:column}
.ratgeber-item .rtag{display:block; font-size:12px; letter-spacing:.12em; font-weight:600; color:var(--blue); text-transform:uppercase}
.ratgeber-item .rtitel{display:block; font-size:clamp(17px,2vw,20px); font-weight:500; margin-top:6px; padding-right:34px}
.ratgeber-item summary{position:relative}
.ratgeber-item summary::after{position:absolute; right:0; top:50%; transform:translateY(-50%)}
.ratgeber-item .faq-answer p{margin:0 0 14px}
.ratgeber-item .faq-answer p:last-child{margin-bottom:0}

/* ===== Kontakt: runde Porträts ===== */
.person img{border-radius:50% !important; aspect-ratio:1/1 !important; max-width:180px !important; object-position:center 20%}
@media(max-width:680px){.person img{max-width:150px !important}}

/* ===== Korrekturen: Bilder, Kacheln, Skyline, Anrufknopf ===== */

/* Porträts: scharf, rund, nicht verzerrt (Quelldateien sind 260 x 260) */
.person img{
  width:150px !important; height:150px !important; max-width:150px !important;
  aspect-ratio:auto !important; border-radius:50% !important;
  object-fit:cover !important; object-position:center !important; margin-bottom:16px;
}

/* Innenansichten: Querformat statt Quadrat, kleiner und damit scharf */

/* Situationskacheln: Titel einzeilig, Pfeile auf gleicher Höhe unten links */
.scard{min-height:200px}
.stitle{font-size:17px !important; line-height:1.3; white-space:nowrap}
@media(max-width:1100px){ .stitle{font-size:15.5px !important} }
@media(max-width:899px){ .stitle{white-space:normal} }
.ssub{margin-top:6px}
.sgo{margin-top:auto !important; padding-top:16px; align-self:flex-start}

/* Skyline auf Höhe der Überschrift, vor den Kacheln sichtbar */
.home-skyline{
  top:0 !important; bottom:auto !important; right:0 !important;
  width:50% !important; max-width:600px !important;
}
@media(min-width:900px){ .home-panel h1{max-width:13ch} }

/* Anrufknopf in der Kopfzeile */
.callbtn{display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  border:1.5px solid var(--blue); color:var(--blue); border-radius:6px; padding:8px 14px;
  font-size:14.5px; font-weight:500; transition:.15s}
.callbtn:hover{background:var(--blue); color:#fff}
@media(max-width:720px){ .callbtn span{display:none} .callbtn{padding:8px 10px} }

/* Anruf-Fenster */
.cm{border:0; border-radius:14px; padding:0; max-width:520px; width:calc(100% - 32px); background:var(--paper); color:var(--ink)}
.cm::backdrop{background:rgba(12,20,32,.72)}
.cm .box2{padding:28px 26px; position:relative}
.cm h2{font-size:21px !important; margin:0 0 6px}
.cm .lead2{color:var(--muted); font-weight:300; font-size:15.5px; margin:0 0 20px}
.cm .who2{display:flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:10px;
  padding:14px; text-decoration:none; color:inherit; margin-bottom:10px}
.cm .who2:hover{border-color:var(--blue); background:var(--wash)}
.cm .who2 img{width:58px; height:58px; border-radius:50%; object-fit:cover; flex:none}
.cm .n2{display:block; font-weight:600; font-size:16.5px}
.cm .r2{display:block; font-size:13.5px; color:var(--muted); font-weight:300; margin:2px 0 5px}
.cm .p2{display:block; font-weight:600; color:var(--blue); font-size:16px}
.cm .x{position:absolute; right:12px; top:8px; background:none; border:0; font-size:26px; color:var(--muted); cursor:pointer}

/* Ratgeber als Kachelraster mit Fenster */
.rgrid{display:grid; gap:14px; margin-top:4px}
@media(min-width:620px){.rgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.rgrid{grid-template-columns:repeat(3,1fr)}}
.rcard{display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:0;
  background:var(--paper); border:1.5px solid var(--line); border-radius:12px; padding:20px 18px;
  cursor:pointer; font:inherit; color:var(--ink); transition:.15s}
.rcard:hover{border-color:var(--blue); transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,64,123,.12)}
.rcard .rtag{font-size:11.5px; letter-spacing:.12em; font-weight:600; color:var(--blue); text-transform:uppercase}
.rcard .rtitel{font-size:16.5px; font-weight:500; line-height:1.35; margin-top:10px}
.rcard .rmehr{margin-top:auto; padding-top:14px; font-size:14.5px; font-weight:500; color:var(--blue)}
.rmodal{border:0; border-radius:14px; padding:0; max-width:680px; width:calc(100% - 32px); background:var(--paper); color:var(--ink)}
.rmodal::backdrop{background:rgba(12,20,32,.76)}
.rmodal .rbox{padding:32px 30px; position:relative}
.rmodal .rtag{font-size:11.5px; letter-spacing:.12em; font-weight:600; color:var(--blue); text-transform:uppercase}
.rmodal h2{font-size:24px !important; margin:10px 0 16px}
.rmodal p{font-size:16.5px; color:var(--muted); font-weight:300; margin:0 0 14px}
.rmodal .btn{margin-top:10px}
.rmodal .x{position:absolute; right:14px; top:10px; background:none; border:0; font-size:26px; color:var(--muted); cursor:pointer}
.ueber-cta{margin:18px 0 0}

/* ===== Korrekturen, Teil 2 ===== */

/* picture ist von Haus aus inline – dadurch kippte das Seitenverhältnis */
picture{display:block; width:100%}

/* Über uns: Bild höher, Einleitung schmaler, damit nichts überläuft */
@media(min-width:800px){
  .inner-hero .intro{max-width:42ch}
}

/* Kontaktseite: Personen untereinander, Kasten daneben */
.contact-grid{grid-template-columns:1fr; gap:34px}
@media(min-width:900px){.contact-grid{grid-template-columns:1.1fr .9fr; gap:44px; align-items:start}}
.people{grid-template-columns:1fr !important; gap:24px !important}
.person{display:flex; align-items:flex-start; gap:18px; border-top:1px solid var(--line); padding-top:20px}
.person img{width:104px !important; height:104px !important; max-width:104px !important; margin:0 !important; flex:none}
.person h2{font-size:19px !important; margin:0 0 2px}
.person .role{font-size:14px; margin:0 0 10px}
.person a{font-size:15.5px; margin:2px 0}
.person > div{min-width:0}

/* Kasten: kompakter, beide Knöpfe gleich groß */
.contact-box{padding:24px 22px}
.contact-box h2{font-size:19px !important; margin-bottom:12px}
.contact-box li{font-size:15.5px; margin-bottom:7px}
.contact-box .btn{width:100% !important; min-height:50px; padding:14px 18px; font-size:16px}
.contact-box .btn.icon{width:100% !important; align-self:stretch !important; margin-top:10px; gap:10px}
.contact-box .btn.icon::after{content:"Jetzt anrufen"}

/* ===== Korrekturen, Teil 3 ===== */

/* Kontakt: linke Spalte mit Überschrift und beiden Personen, Kasten daneben */
.contact-left{min-width:0}
.contact-left .inner-hero{margin-bottom:34px}
.contact-left .inner-hero h1{font-size:clamp(28px,3.6vw,42px) !important}
.contact-left .inner-hero .intro{font-size:17px !important; max-width:44ch}
@media(min-width:900px){
  .contact-grid{grid-template-columns:1.15fr .85fr; align-items:start}
  .contact-box{position:sticky; top:24px}
}

/* Über uns: Bild höher, keine abweichende Fläche dahinter */
.feature-image{background:transparent !important}

/* Startseite: Überschrift ohne Quetschung, ein Satz pro Zeile */
.home-panel h1{
  font-size:clamp(28px,3.6vw,44px) !important;
  max-width:40ch !important; margin-bottom:40px !important; line-height:1.18 !important;
}
.home-panel h1 .satz{display:block; text-wrap:balance}
.home-panel h1 .satz + .satz{margin-top:2px}

/* Skyline mittig zur Überschrift, dicht am Text */
.home-skyline{
  top:6% !important; bottom:auto !important; right:-1% !important;
  width:46% !important; max-width:560px !important;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.3) 24%, #000 56%) !important;
  mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.3) 24%, #000 56%) !important;
}
@media(max-width:860px){
  .home-skyline{position:static !important; width:100% !important; max-width:300px !important;
    margin:18px 0 0 !important; -webkit-mask-image:none !important; mask-image:none !important}
}

/* Kacheln exakt gleich breit */
.situation-cards{grid-template-columns:1fr !important}
@media(min-width:900px){.situation-cards{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
.scard{min-width:0}
.stitle{white-space:normal !important; font-size:16.5px !important; min-height:2.6em; display:block}

/* ===== Korrekturen, Teil 4 ===== */
/* Skyline weiter zur Mitte */
.home-skyline{right:12% !important; width:44% !important; max-width:520px !important}
@media(max-width:1200px){ .home-skyline{right:4% !important} }
@media(max-width:860px){ .home-skyline{right:auto !important; width:100% !important; max-width:300px !important} }

/* ===== Korrekturen, Teil 5 ===== */

/* Startseite: Überschrift darf je Satz umbrechen, ohne Einzelwörter */
.home-panel h1{max-width:28ch !important; font-size:clamp(28px,3.4vw,40px) !important}
.home-panel h1 .satz{display:block; text-wrap:balance; max-width:26ch}

/* Skyline: von der linken Kante der zweiten bis zur rechten Kante der dritten Kachel */
.home-skyline{
  left:34% !important; right:0 !important; width:auto !important; max-width:none !important;
  top:4% !important;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.3) 16%, #000 44%) !important;
  mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.3) 16%, #000 44%) !important;
}
@media(max-width:860px){
  .home-skyline{left:auto !important; right:auto !important; width:100% !important; max-width:300px !important}
}

/* Über uns: beide Bildblöcke gleichmäßig neben dem Text verteilt */
@media(min-width:800px){
  .content-grid{align-items:stretch}
}

/* FAQ: enger an die Überschrift, Fragen etwas kleiner */
.faq-list{margin-top:0}
.role-filter{margin-bottom:30px !important}
.inner-main .inner-hero{margin-bottom:46px}
details summary{font-size:clamp(15.5px,1.8vw,18px) !important; padding:19px 0 !important}
.faq-answer{font-size:15.5px; padding-bottom:20px}

/* Ratgeber-Kacheln breiter als hoch, aber kompakter */
.rcard{aspect-ratio:3/2; justify-content:flex-start}
.rcard .rtitel{font-size:16px}
@media(max-width:620px){ .rcard{aspect-ratio:auto; min-height:0} }

/* Kontakt: Kasten beginnt auf Höhe der ersten Trennlinie */
@media(min-width:900px){
  .contact-grid{grid-template-columns:1.1fr .9fr; grid-template-rows:auto auto; column-gap:44px; row-gap:0}
  .contact-grid > .inner-hero{grid-column:1; grid-row:1; margin-bottom:34px}
  .contact-grid > .people{grid-column:1; grid-row:2}
  .contact-grid > .contact-box{grid-column:2; grid-row:2; align-self:start}
}

/* ===== Korrekturen, Teil 6 ===== */

/* Schriftgrad überall rund 10 Prozent kleiner */
html{font-size:90%}
body{font-size:16px}

/* Über uns: Bildunterschrift dicht an der Viererkachel */

/* Startseite: Skyline kleiner und höher */
.home-skyline{
  left:46% !important; right:4% !important; top:-2% !important;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.3) 14%, #000 40%) !important;
  mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.3) 14%, #000 40%) !important;
}
@media(max-width:860px){
  .home-skyline{left:auto !important; right:auto !important; top:auto !important; width:100% !important; max-width:260px !important}
}

/* Ratgeber: vier Kacheln je Reihe, quadratischer, kompakter */
@media(min-width:1000px){.rgrid{grid-template-columns:repeat(4,1fr) !important}}
@media(min-width:620px) and (max-width:999px){.rgrid{grid-template-columns:repeat(2,1fr) !important}}
.rcard{aspect-ratio:5/4 !important; padding:18px 16px; gap:0}
.rcard .rtitel{font-size:15px; margin-top:8px; line-height:1.3}
.rcard .rmehr{margin-top:auto !important; padding-top:10px !important; font-size:13.5px}
@media(max-width:620px){ .rcard{aspect-ratio:auto !important} }

/* ===== Korrekturen, Teil 7 ===== */

/* Skyline: rund 20 Prozent kleiner und weiter nach links */
.home-skyline{left:34% !important; right:22% !important}
@media(max-width:1200px){.home-skyline{left:30% !important; right:14% !important}}
@media(max-width:860px){.home-skyline{left:auto !important; right:auto !important; max-width:240px !important}}

/* Über uns: Fassadenbild auf Höhe der Viererkachel, Unterschriften gleich dicht */


/* Ratgeber: flacher, Abstände oben und unten gleich */
.rcard{aspect-ratio:auto !important; min-height:0 !important; padding:16px !important; justify-content:flex-start !important}
.rcard .rtag{line-height:1.2}
.rcard .rtitel{margin-top:10px !important; font-size:15px}
.rcard .rmehr{margin-top:10px !important; padding-top:0 !important}

/* Kontakt: Kasten auf Höhe der Einleitung, Einleitung schmaler */
.contact-grid > .inner-hero .intro{max-width:34ch !important}
@media(min-width:900px){
  .contact-grid{grid-template-rows:auto auto}
  .contact-grid > .contact-box{grid-row:1 / span 2; align-self:start; margin-top:64px}
  .contact-grid > .inner-hero{margin-bottom:26px}
}

/* ===== Korrekturen, Teil 8 ===== */

/* Startseite: Skyline ein Drittel kleiner, nahe Originalgröße = scharf */
.home-skyline{left:40% !important; right:30% !important; top:0 !important}
@media(max-width:1200px){.home-skyline{left:36% !important; right:22% !important}}
@media(max-width:860px){.home-skyline{left:auto !important; right:auto !important; max-width:220px !important}}

/* Startseite: Überschrift größer */
.home-panel h1{font-size:clamp(32px,4.4vw,52px) !important; max-width:30ch !important}
.home-panel h1 .satz{max-width:28ch}

/* Über uns: zwei Reihen, jedes Bild neben seinem Textblock */
.content-grid.two-rows{display:block !important}
.two-rows .row{display:grid; gap:36px; align-items:start}
.two-rows .row + .row{margin-top:56px}
@media(min-width:800px){.two-rows .row{grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); gap:72px}}
.two-rows .col-text{max-width:640px}
.two-rows .copy-block + .copy-block{margin-top:44px}
.two-rows .col-media{display:block; padding-top:6px}
.two-rows figure{margin:0; max-width:380px}
.two-rows .feature-image img, .two-rows .collage img{width:100%; height:auto; display:block}
.two-rows .feature-image img{aspect-ratio:4/3; object-fit:cover; border-radius:10px}
.two-rows .collage{list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:0; padding:0}
.two-rows .collage img{aspect-ratio:1/1; object-fit:cover; border-radius:8px}
.two-rows .cap-center{display:block; text-align:center; margin:10px 0 0; padding:0; font-size:13px; color:var(--muted); font-weight:300}
@media(max-width:799px){.two-rows .col-media{order:-1} .two-rows figure{max-width:420px}}

/* FAQ: alles näher an die Kopfzeile */
.inner-main{padding-top:64px}
@media(max-width:800px){.inner-main{padding-top:48px}}

/* Kopfzeile farblich abgesetzt */
.site-header{background:var(--wash); border-bottom:1px solid var(--line)}
.form-header .site-header{background:var(--wash)}
@media (prefers-color-scheme: dark){ .site-header{background:#0F1726} }

/* Kontakt: Kasten schmaler, Oberkante auf Höhe der Einleitung */
@media(min-width:900px){
  .contact-grid{grid-template-columns:minmax(0,1.2fr) minmax(300px,360px) !important; column-gap:56px !important}
  .contact-grid > .contact-box{margin-top:96px !important}
}
.contact-box{max-width:360px}
.contact-grid > .inner-hero .intro{max-width:34ch !important}

/* ===== Korrekturen, Teil 9 ===== */

/* Skyline: rechte Kante bündig mit der rechten Kante von Situation 3 */
.home-skyline{
  left:auto !important;
  right:calc((100% - min(var(--max), 100% - 40px)) / 2) !important;
  width:calc(min(var(--max), 100% - 40px) * .30) !important;
  top:0 !important;
}
@media(max-width:720px){ .home-skyline{right:calc((100% - min(var(--max), 100% - 28px)) / 2) !important} }
@media(max-width:860px){ .home-skyline{position:static !important; width:100% !important; max-width:220px !important; margin:18px 0 0 !important} }

/* Kontakt: Linien enden auf Breite der Überschrift, Kasten symmetrisch daneben */
.contact-grid > .inner-hero h1{max-width:12ch}
.contact-grid > .people{max-width:400px}
@media(min-width:900px){
  .contact-grid{grid-template-columns:400px minmax(300px,360px) !important; column-gap:48px !important; justify-content:start}
  .contact-grid > .contact-box{margin-top:96px !important}
}

/* ===== Korrekturen, Teil 10 ===== */

/* Startseite Schritt 2: keine Linie, Chips mit Kästchen wie im Formular */
#pain-list.choice-list{border-top:0 !important}
.pain-chips{margin-top:6px}
.pchip{display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:10px 16px; font-size:15.5px}
.pchip .box{width:16px; height:16px; border:1.5px solid currentColor; border-radius:4px; flex:none;
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; line-height:1}
.pchip.on .box::before{content:"✓"; font-weight:700}
@media (prefers-color-scheme: dark){ .pchip.on{color:#0B111B} }

/* Skyline: tiefer, weiter rechts, blasser, etwas größer */
.home-skyline{
  top:auto !important; bottom:18% !important;
  right:calc((100% - min(var(--max), 100% - 40px)) / 2 - 2%) !important;
  width:calc(min(var(--max), 100% - 40px) * .36) !important;
  opacity:.62 !important;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 22%, #000 52%) !important;
  mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 22%, #000 52%) !important;
}
@media (prefers-color-scheme: light){ .home-skyline img{opacity:.26 !important} }
@media(max-width:860px){ .home-skyline{position:static !important; width:100% !important; max-width:220px !important; margin:18px 0 0 !important; opacity:.7 !important} }

/* Formular: näher an die Kopfzeile, kompaktere Schritte */
.form-main{padding-top:40px !important; padding-bottom:70px !important}
.form-step h1,.form-step h2{margin-bottom:22px !important; font-size:clamp(26px,3.8vw,40px) !important}
.step-label{margin-bottom:10px !important}
.context-line{margin:-6px 0 24px !important}
.field{margin-bottom:16px !important}
.field textarea{min-height:110px !important}
.form-actions{margin-top:24px !important}
.privacy-check{margin:20px 0 !important}
@media(max-width:620px){ .form-main{padding-top:32px !important} }

/* Turnstile-Hinweis eine halbe Zeile tiefer */
#turnstile-status{display:block; margin-top:.6em; font-size:14px; color:var(--muted)}

/* Kontakt: Überschrift über beide Spalten, darunter zwei gleichhohe Kacheln */
.contact-grid > .inner-hero h1{max-width:none !important; font-size:clamp(30px,4vw,46px) !important}
.contact-grid > .inner-hero .intro{max-width:52ch !important}
@media(min-width:900px){
  .contact-grid{grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr) !important; column-gap:28px !important;
    grid-template-rows:auto auto; justify-content:stretch}
  .contact-grid > .inner-hero{grid-column:1 / -1 !important; grid-row:1; margin-bottom:30px !important}
  .contact-grid > .people{grid-column:1; grid-row:2; max-width:none !important}
  .contact-grid > .contact-box{grid-column:2; grid-row:2; margin-top:0 !important; position:static !important; max-width:none !important; height:100%}
}
.people.tile{background:var(--wash); border:1px solid var(--line); border-radius:14px; padding:22px 22px 6px; display:block}
.people.tile .person{border-top:0; padding:0 0 18px; margin-bottom:18px; border-bottom:1px solid var(--line)}
.people.tile .person:last-child{border-bottom:0; margin-bottom:0; padding-bottom:16px}
.contact-box{display:flex; flex-direction:column}
.contact-box ul{margin-bottom:auto; padding-bottom:22px}

/* ===== Kontakt nach dem Vorbild der Vorgängerseite ===== */
.kontakt{display:grid; gap:32px; align-items:start; margin-top:0}
@media(min-width:900px){
  /* Mittellinie der Seite: linke Hälfte Text, rechte Hälfte Kasten mit Luft */
  .kontakt{grid-template-columns:1fr 1fr; gap:56px}
  .kontakt .kbox{max-width:420px; justify-self:start}
}
.kontakt h1{font-size:clamp(28px,3.6vw,40px) !important; margin:0 0 10px}
.kontakt .unter{color:var(--muted); font-weight:300; font-size:17px; max-width:40ch; margin:0}
.kontakt .people{display:grid; gap:18px; margin:24px 0 0; padding:0; list-style:none}
.pc{display:flex; align-items:center; gap:15px}
.pc img{width:68px; height:68px; border-radius:50%; object-fit:cover; flex:none; border:2px solid var(--line)}
.pc.primary-contact img{border-color:var(--blue)}
.pc .nm{display:block; font-weight:600; font-size:16.5px}
.pc .role{display:block; font-size:14px; color:var(--muted); font-weight:300; margin:1px 0 4px; line-height:1.35}
.pc .ways{display:flex; flex-direction:column; align-items:flex-start; gap:3px}
.pc .ways a{display:inline-flex; align-items:center; min-height:28px; color:var(--blue); font-size:15.5px; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.kbox{background:var(--wash); border:1px solid var(--line); border-radius:14px; padding:28px 26px; display:flex; flex-direction:column}
.kbox h3{font-size:20px; font-weight:600; margin:0 0 14px; max-width:22ch}
.kbox ul{list-style:none; margin:0 0 24px; padding:0}
.kbox li{position:relative; padding-left:26px; font-size:16px; color:var(--muted); font-weight:300; margin-bottom:8px}
.kbox li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--blue); font-weight:700}
.kbox .btn{width:100%}
.kbox .btn + .btn{margin-top:10px; gap:10px}
.kbox .btn svg{margin-right:2px}

/* Skyline auf Höhe der Überschrift, vor den Kacheln – nicht dahinter */
.home-skyline{
  top:0 !important; bottom:auto !important;
  right:calc((100% - min(var(--max), 100% - 40px)) / 2) !important;
  width:calc(min(var(--max), 100% - 40px) * .34) !important;
  opacity:.72 !important;
}
@media (prefers-color-scheme: light){ .home-skyline img{opacity:.3 !important} }
.home-panel h1{position:relative; z-index:2}
@media(max-width:860px){ .home-skyline{position:static !important; width:100% !important; max-width:220px !important; margin:18px 0 0 !important} }

/* ===== Korrekturen, Teil 11 ===== */

/* Skyline: Mitte auf der Mittellinie von Situation 2, Höhe auf der Zeile "braucht eine Lösung" */
.home-panel{position:relative}
.home-panel h1{--h1:clamp(32px,4.4vw,52px); font-size:var(--h1) !important; line-height:1.18 !important}
.home-skyline{
  position:absolute !important; left:50% !important; right:auto !important; bottom:auto !important;
  top:calc(clamp(32px,4.4vw,52px) * 1.18 * 1.5) !important;
  transform:translate(-50%,-50%) !important;
  width:calc(min(var(--max), 100% - 40px) * .44) !important; max-width:none !important;
  margin:0 !important; opacity:.7 !important;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.4) 18%, #000 42%, #000 100%) !important;
  mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.4) 18%, #000 42%, #000 100%) !important;
}
.home-main > .shell{position:static}
.home-step{position:relative; z-index:2}
.home-skyline{z-index:1 !important}
.home-panel h1{z-index:3}
@media(max-width:860px){
  .home-skyline{position:static !important; transform:none !important; width:100% !important; max-width:220px !important; margin:18px 0 0 !important}
}

/* FAQ: Überschrift kleiner, oberer Teil enger – Ratgeber bleibt wo er ist */
.faq-page .inner-hero h1, body.faq .inner-hero h1{font-size:clamp(28px,3.8vw,46px) !important}
.inner-hero + .role-filter{margin-top:-10px}

/* Kontakt: Kasten auf der horizontalen Mittellinie der linken Spalte */
@media(min-width:900px){ .kontakt{align-items:center !important} }
.faq-page .inner-main{padding-top:48px}
.faq-page .inner-hero{margin-bottom:30px}
.faq-page .inner-hero h1{font-size:clamp(28px,3.8vw,46px) !important}

/* ===== Korrekturen, Teil 12 ===== */

/* Skyline: Höhe bleibt, rechte Kante bündig mit Situation 3 */
.home-skyline{left:auto !important; right:0 !important; transform:translateY(-50%) !important}
@media(max-width:860px){ .home-skyline{position:static !important; transform:none !important} }

/* Kontakt: Kasten beginnt auf Höhe der Überschrift, nicht darüber */
@media(min-width:900px){
  .kontakt{align-items:start !important}
  .kontakt .kbox{margin-top:36px}
}

/* Übersprungener Rollenschritt im Formular */
.js-form .form-step.is-skipped{display:none !important}

/* Pain-Points ohne Kästchen */
.pchip .box{display:none}
.pchip{gap:0; padding:11px 18px}

/* ===== Einheitliche Kopfzeile in Dunkelblau, Startseite mit hellem Blau ===== */

/* Kopfzeile auf allen Seiten */
.site-header, .form-header .site-header{background:#00305C !important; border-bottom:1px solid rgba(255,255,255,.12) !important}
@media (prefers-color-scheme: dark){ .site-header, .form-header .site-header{background:#0B2340 !important} }
.site-header .wordmark img{filter:brightness(0) invert(1)}
.site-header .wordmark small, .site-header .wordmark .sub2{color:#B9C8DA; border-bottom-color:rgba(255,255,255,.45)}
.site-header .site-nav a{color:#D5E0EE}
.site-header .site-nav a:hover, .site-header .site-nav a[aria-current="page"]{color:#fff}
.site-header .callbtn{border-color:rgba(255,255,255,.6); color:#fff}
.site-header .callbtn:hover{background:#fff; color:#00305C}
.form-header{border-bottom:0}
.progress{background:rgba(255,255,255,.14)}
.form-header .progress span{background:#8CA9C3}

/* Startseite: Fläche hinter der Skyline in hellem Blau mit Lichtkegel */
.home-main{
  background:
    radial-gradient(60% 55% at 72% 22%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(160deg, #E7EFF8 0%, #D9E6F3 55%, #CFDFEF 100%);
}
@media (prefers-color-scheme: dark){
  .home-main{
    background:
      radial-gradient(60% 55% at 72% 22%, rgba(140,169,195,.18) 0%, rgba(140,169,195,0) 70%),
      linear-gradient(160deg, #0F1E33 0%, #0C1A2D 55%, #0A1626 100%);
  }
}
.home-main .scard{background:var(--paper)}
@media (prefers-color-scheme: light){ .home-skyline img{opacity:.42 !important} }

/* Rechtsseiten: Fließtext im minimalen Stil */
.prose{max-width:760px}
.prose h2{font-size:21px !important; margin:30px 0 8px}
.prose h2:first-child{margin-top:0}
.prose p{font-size:16.5px; color:var(--muted); font-weight:300; margin:0 0 14px}
.prose a{color:var(--blue)}
.prose .stand{margin-top:34px; font-size:14px}

/* ===== Kopfzeile im Seiten-Navy, helles Blau nur auf dem ersten Funnel-Schritt ===== */
.site-header, .form-header .site-header{background:#00305C !important}
@media (prefers-color-scheme: dark){
  .site-header, .form-header .site-header{background:var(--paper) !important; border-bottom-color:var(--line) !important}
  .form-header .progress{background:var(--line)}
}

/* Schritt 2 (Pain-Points): wieder der normale Seitenhintergrund */
body.pain-view .home-main{background:var(--paper) !important}
body.pain-view .home-skyline{display:none}

/* ===== Pillen, Anrufknopf, Anfrage-Knopf ===== */

/* Ausgewählte Pillen überall gleich: Blau mit weißer Schrift */
.pchip.on, .filter-btn[aria-pressed="true"]{background:var(--blue) !important; border-color:var(--blue) !important; color:#fff !important}
@media (prefers-color-scheme: dark){
  .pchip.on, .filter-btn[aria-pressed="true"]{color:#fff !important}
}

/* Anrufknopf in der Kopfzeile: beim Überfahren hellblau statt weiß */
.site-header .callbtn:hover, .site-header .callbtn:focus-visible{background:#8CA9C3 !important; border-color:#8CA9C3 !important; color:#0B2340 !important}

/* "Anfrage starten" auf Über uns im Stil des Anrufknopfs */
.ueber-cta .btn{background:transparent !important; border:1.5px solid var(--blue) !important; color:var(--blue) !important;
  border-radius:6px; padding:10px 18px !important; min-height:0 !important; font-size:15px !important; font-weight:500}
.ueber-cta .btn:hover, .ueber-cta .btn:focus-visible{background:#8CA9C3 !important; border-color:#8CA9C3 !important; color:#0B2340 !important}

/* ===== Hover wie die Pillen: Pillen-Blau mit weißer Schrift, Ecken bleiben eckig ===== */
.site-header .callbtn:hover, .site-header .callbtn:focus-visible,
.ueber-cta .btn:hover, .ueber-cta .btn:focus-visible{
  background:var(--blue) !important; border-color:var(--blue) !important; color:#fff !important;
}
.site-header .callbtn, .ueber-cta .btn{border-radius:6px !important}

/* ===== Kacheln: Rolle groß und fett, Kernsatz hervorgehoben, Zielgruppe klein ===== */
.scard .snum{font-size:12px; letter-spacing:.14em; color:var(--blue)}
.scard .srole{font-size:21px !important; font-weight:600 !important; color:var(--ink) !important; margin-top:8px !important; line-height:1.2}
.scard .stitle{font-size:16.5px !important; font-weight:600 !important; line-height:1.35 !important; margin-top:14px !important;
  min-height:0 !important; white-space:normal !important; color:var(--ink)}
.scard .ssub{font-size:14px !important; font-weight:300 !important; color:var(--muted) !important; margin-top:10px !important}
.scard{min-height:0 !important}

/* Überschrift: zwei kurze Zeilen */
.home-panel h1 .satz{max-width:none}

/* ===== Korrekturen, Teil 13 ===== */

/* Kacheln: Rolle fett, Kernsatz nicht fett, gleiche Höhe */
.scard .stitle{font-weight:400 !important; font-size:16px !important; line-height:1.45 !important; margin-top:12px !important; color:var(--ink)}
.scard .sgo{margin-top:auto !important; padding-top:14px}
.situation-cards{align-items:stretch}
.scard{height:100%}

/* Überschrift: drei Zeilen, nie umgebrochen */
.home-panel h1 .satz{white-space:nowrap}
@media(max-width:560px){ .home-panel h1 .satz{white-space:normal} }

/* Danke-Seite */
.danke-grid{display:grid; gap:34px; align-items:start}
@media(min-width:900px){ .danke-grid{grid-template-columns:1.1fr .9fr; gap:56px} .danke-grid .kbox{margin-top:34px; max-width:440px} }
.danke-grid .kbox .people{margin-top:18px}
.kbox-text{margin:0 0 6px; font-size:15.5px; color:var(--muted); font-weight:300}