/* Startseite mit neuer Positionierung (Oktober 2026) und Rechner-Seite.
   Lädt nach home-v2.css. Markup: partials/home-positioning.php, partials/calculator-page.php.
   Raster: 12 Spalten, 24px Abstand, Abschnitte 96px, Knöpfe 56px hoch. Eckig, ohne Schatten.
   Neue Bausteine beginnen mit "hp-"; bestehende Bereiche (Angebot, Geschäftsführung, Mandate, Publikationen) nutzen "hx-". */

:root{--hp-head:105px;--hp-teal:#3d7684;--hp-gold:#a8762c;--hp-night:#172631}

/* ---------- Kopfzeile dunkel über dem Hero ("Navi A") ---------- */
.hx .hx-header--dark{background:transparent;border-top:0;border-bottom:1px solid rgba(232,245,255,.16);transition:background-color .2s ease}
.hx .hx-header--dark.is-scrolled,.hx .hx-header--dark:has(.hx-nav.is-open){background:var(--hp-night)}
.hx-header--dark .hx-header__in{min-height:0;padding-top:16px;padding-bottom:16px;gap:28px}
.hx-header--dark .hx-logo img{height:72px}
.hx .hx-header--dark .hx-nav{gap:28px}
.hx .hx-header--dark .hx-nav a{color:var(--hx-ice)}
.hx .hx-header--dark .hx-nav a:hover{color:#fff;border-bottom-color:var(--hx-amber)}
.hx .hx-header--dark .hx-nav a.is-current{border-bottom-color:var(--hx-amber)}
.hx-header--dark .hx-header__actions{gap:28px}
.hx-header--dark .hx-lang{border-color:var(--hx-ice);height:48px}
.hx .hx-header--dark .hx-lang a{display:flex;align-items:center;justify-content:center;width:44px;padding:0;color:var(--hx-ice)}
.hx .hx-header--dark .hx-lang a[aria-current]{background:var(--hx-ice);color:var(--hp-night)}
.hx .hx-header--dark .hx-lang a:not([aria-current]):hover{background:rgba(232,245,255,.14)}
.hx .hx-header--dark .hx-header__cta{min-height:48px;padding:0 24px}
.hx-header--dark .hx-menu-btn{color:var(--hx-ice);border:2px solid var(--hx-ice);width:48px;height:48px}
.hx-header--dark .hx-menu-btn:hover{color:#fff}
.hx-header--dark .hx-burger{width:22px;height:16px}
.hx-header--dark .hx-burger span{height:2px}
.hx-header--dark .hx-burger span:nth-child(2){top:7px}
.hx-header--dark .hx-burger span:nth-child(3){top:14px}
.hx-header--dark .hx-menu-btn[aria-expanded="true"] .hx-burger span:nth-child(1),
.hx-header--dark .hx-menu-btn[aria-expanded="true"] .hx-burger span:nth-child(3){top:7px}
.hx--pos main section[id]{scroll-margin-top:calc(var(--hp-head) + 8px)}

/* ---------- Grundbausteine ---------- */
.hp-kick{margin:0;font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--hx-petrol)}
.hp-kick--teal{color:var(--hp-teal)}
.hp-kick--sky{color:var(--hx-sky)}
.hp-h2{margin:0;font-size:clamp(30px,3.4vw,44px);line-height:1.15;font-weight:700;color:var(--hx-petrol)}
.hx--pos .hx-mark{color:var(--hp-gold);box-shadow:none}
.hp-sec--dark .hx-mark,.hp-wait .hx-mark,.hp-hero .hx-mark,.hp-contact .hx-mark{color:var(--hx-amber)}
.hp-sec{padding:96px 0}
.hp-sec--amber{background:#fff;border-top:16px solid var(--hx-amber)}
.hp-sec--ice{background:var(--hx-ice)}
.hp-sec--dark{background:radial-gradient(ellipse at 15% 60%,var(--hx-petrol) 0%,var(--hp-night) 65%);color:#fff}
.hp-sec--dark .hp-h2{color:#fff}
.hp-stack{display:flex;flex-direction:column;gap:48px}
.hp-head{display:flex;flex-direction:column;gap:16px;max-width:752px}
.hp-grid{display:grid;gap:24px}
.hp-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hp-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hp-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hp-grid--1{grid-template-columns:minmax(0,1fr)}
.hp-num{width:48px;height:48px;background:var(--hx-amber);color:var(--hx-navy);font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center}
.hp-card{background:var(--hx-ice);border-top:8px solid var(--hx-amber);padding:32px 24px;display:flex;flex-direction:column;gap:16px}
.hp-card__title{margin:0;font-size:20px;line-height:1.3;font-weight:700;color:var(--hx-petrol);min-height:2.6em}
.hp-card__text{margin:0;font-size:16px;line-height:1.5;color:var(--hx-navy)}
.hp-card--navy{background:var(--hx-navy)}
.hp-card--navy .hp-card__title{color:#fff}
.hp-card--navy .hp-card__text{color:var(--hx-ice)}
.hx .hp-btn{min-height:56px;padding:0 28px}
.hx .hp-btn--ghost{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--hx-sky);color:var(--hx-sky);text-decoration:none;font-size:15px;font-weight:500;line-height:1.2;text-align:center;padding:0 24px}
.hx .hp-btn--ghost:hover{background:rgba(145,209,255,.12);color:#fff;border-color:#fff}
.hx .hp-hero a:focus-visible,.hx .hp-sec--dark a:focus-visible,.hx .hp-wait a:focus-visible,.hx .hp-contact a:focus-visible,.hx .hp-contact button:focus-visible,
.hx .hp-contact input:focus-visible,.hx .hp-contact textarea:focus-visible,.hx .hx-header--dark a:focus-visible,.hx .hx-header--dark button:focus-visible{outline-color:var(--hx-sky)}

/* ---------- Hero ---------- */
.hp-hero{position:relative;overflow:hidden;margin-top:calc(-1 * var(--hp-head));padding-top:var(--hp-head);background:radial-gradient(ellipse at 85% 35%,var(--hx-petrol) 0%,var(--hp-night) 62%);color:#fff}
.hp-hero__mosaic{position:absolute;right:0;top:0;height:100%;width:auto;max-width:none;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 120px,#000 300px);mask-image:linear-gradient(to bottom,transparent 0,transparent 120px,#000 300px)}
.hp-hero__in{position:relative;display:flex;align-items:center;gap:72px;min-height:600px;padding-top:56px;padding-bottom:72px}
.hp-hero__copy{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:24px}
.hp-hero__copy .hp-kick{color:var(--hx-sky)}
.hp-hero__title{margin:0;font-size:clamp(34px,4.2vw,52px);line-height:1.12;font-weight:700;color:#fff}
.hp-hero__lead{margin:0;max-width:640px;font-size:20px;line-height:1.5;color:var(--hx-ice)}
.hp-hero__btns{display:flex;flex-wrap:wrap;gap:16px 24px;padding-top:8px}
.hp-hero__meta{margin:0;font-size:15px;color:var(--hx-sky)}
.hp-hero__media{position:relative;z-index:1;flex:0 0 320px}
.hp-hero__media>img{display:block;width:100%;height:auto;aspect-ratio:800/1143;object-fit:cover;object-position:center top}

/* ---------- Belege ---------- */
.hp-proof{background:var(--hx-petrol);color:#fff}
.hp-proof__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-top:48px;padding-bottom:48px}
.hp-proof__item{display:flex;flex-direction:column;gap:8px}
.hp-proof__num{margin:0;font-size:44px;line-height:1.1;font-weight:700;color:var(--hx-amber);white-space:nowrap}
.hp-proof__label{margin:0;font-size:15px;line-height:1.5;color:var(--hx-ice)}

/* ---------- Ergebnis-Check ---------- */
.hp-check__foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px 24px;align-items:start}
.hp-check__copy{grid-column:1/9;display:flex;flex-direction:column;gap:16px}
.hp-band{margin:0;min-height:56px;display:flex;align-items:center;background:var(--hx-amber);color:var(--hp-night);font-size:17px;line-height:1.4;font-weight:700;padding:14px 24px}
.hp-check__tip{margin:0;font-size:15px;line-height:1.5;color:var(--hx-navy)}
.hx .hp-check__btn{grid-column:9/13;width:100%}

/* ---------- Angebot (bestehend) im neuen Rahmen ---------- */
.hx--pos .hx-offer{background:var(--hx-ice);border-top:0}
.hx--pos .hx-tile{background:#fff}
.hx--pos .hx-offer .hx-h2{color:var(--hx-petrol)}

/* ---------- Warum DStratiCX ---------- */
.hp-why__note{margin:0;max-width:752px;font-size:16px;line-height:1.5;color:var(--hx-sky)}

/* ---------- Einstiegstreppe ---------- */
.hp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.hp-steps--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hp-steps--1{grid-template-columns:minmax(0,1fr)}
.hp-step{position:relative;border:2px solid var(--hx-petrol);padding:32px;display:flex;flex-direction:column;gap:16px}
.hp-step>p,.hp-step>h3{margin:0}
.hp-step__label{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--hp-teal)}
.hp-step__title{font-size:22px;line-height:1.3;font-weight:700;color:var(--hx-petrol)}
.hp-step__meta{font-size:15px;font-weight:700;color:var(--hx-navy)}
.hp-step__text{font-size:16px;line-height:1.5;color:var(--hx-navy)}
.hp-step--last{background:var(--hx-petrol)}
.hp-step--last .hp-step__label{color:var(--hx-sky)}
.hp-step--last .hp-step__title{color:var(--hx-amber)}
.hp-step--last .hp-step__meta{color:#fff}
.hp-step--last .hp-step__text{color:var(--hx-ice)}
.hp-step__arrow{position:absolute;top:50%;right:-25px;width:24px;height:16px;margin-top:-8px;fill:var(--hx-sky)}

/* ---------- Kosten des Abwartens ---------- */
.hp-wait{background:var(--hp-night);color:#fff}
.hp-wait .hp-h2{color:#fff}
.hp-wait__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
.hp-wait__copy{grid-column:1/7;display:flex;flex-direction:column;gap:24px;min-width:0}
.hp-wait__text{margin:0;font-size:17px;line-height:1.5;color:var(--hx-ice)}
.hp-wait__text strong{color:var(--hx-amber)}
.hx .hp-wait__btn{align-self:flex-start;margin-top:8px}
.hp-wait__viz{grid-column:7/13;display:flex;flex-direction:column;gap:16px;min-width:0}
.hp-squares{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.hp-squares span{aspect-ratio:1;border:2px solid var(--hx-sky)}
.hp-squares span.is-on{background:var(--hx-amber);border-color:var(--hx-amber)}
.hp-wait__legend{margin:0;font-size:14px;color:var(--hx-sky)}

/* ---------- Referenzen ---------- */
.hp-ref{margin:0;background:#fff;border-top:8px solid var(--hx-amber);padding:32px;display:flex;flex-direction:column;gap:16px}
.hp-ref__tag{margin:0;font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--hp-teal)}
.hp-ref__quote{margin:0;font-size:18px;line-height:1.5;color:var(--hx-navy)}
.hp-ref__source{font-size:14px;font-weight:700;color:var(--hx-petrol)}

/* ---------- Geschäftsführung, Mandate (bestehend) ---------- */
.hx--pos .hx-ceo{background:#fff;border-top:16px solid var(--hx-amber)}
.hx--pos .hx-ceo .hx-h2{color:var(--hx-petrol)}
.hx--pos .hx-mand{border-top:0}
.hx--pos .hx-mand__card{background:var(--hx-ice);border:0;border-top:8px solid var(--hx-amber)}

/* ---------- Kontakt ---------- */
.hp-contact{position:relative;overflow:hidden;background:radial-gradient(ellipse at 20% 40%,var(--hx-petrol) 0%,var(--hp-night) 62%);color:#fff}
.hp-contact__mosaic{position:absolute;left:0;top:0;height:100%;width:auto;max-width:none;opacity:.55;pointer-events:none}
.hp-contact__in{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center;padding-top:96px;padding-bottom:96px}
.hp-contact__copy{grid-column:7/13;grid-row:1;display:flex;flex-direction:column;gap:24px;min-width:0}
.hp-contact__title{margin:0;font-size:clamp(32px,4vw,52px);line-height:1.12;font-weight:700;color:#fff}
.hp-contact__intro{margin:0;font-size:19px;line-height:1.5;color:var(--hx-ice)}
.hx .hp-contact__btn{align-self:flex-start;margin-top:8px}
.hp-contact__rows{margin:0;display:flex;flex-wrap:wrap;gap:4px 8px;font-size:15px;color:var(--hx-sky)}
.hp-contact__rows>*+*::before{content:"·";margin-right:8px;color:var(--hx-sky)}
.hp-contact__addr{margin:-16px 0 0;font-size:15px;color:var(--hx-sky)}
.hx .hp-contact__rows a{color:var(--hx-sky);text-decoration:none}
.hx .hp-contact__rows a:hover{color:#fff;text-decoration:underline}
.hp-contact__form{grid-column:1/6;grid-row:1;background:var(--hx-navy);border-top:8px solid var(--hx-amber);padding:32px;display:flex;flex-direction:column;gap:14px;min-width:0}
.hp-contact__form .hx-fld{color:var(--hx-ice);font-weight:500;font-size:14px}
.hp-contact__form .hx-fld input,.hp-contact__form .hx-fld textarea{border:0}
.hp-contact__form .hx-fld textarea{min-height:112px}
.hp-contact__form .hx-contact__note{color:var(--hx-ice)}
.hx .hp-contact__form .hx-contact__note a{color:var(--hx-sky)}
.hx .hp-contact__form .hp-btn{width:100%;margin-top:4px}
.hx .hp-contact__form .hp-btn:disabled{opacity:.6;cursor:progress}
.hp-ccv{background:#fff}
.hp-ccv__in{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:40px;padding-bottom:40px}
.hp-ccv img{display:block;width:40%;min-width:240px;max-width:100%;height:auto}

/* ---------- Gleiche Maße in DE und EN: nichts springt beim Sprachwechsel ----------
   Feste Mindestbreiten = jeweils die längere der beiden Sprachfassungen (gemessen mit der Hausschrift). */
@media (min-width:1101px){
  .hx-header--pos .hx-nav a[data-nav]{display:inline-flex;justify-content:center}
  .hx-header--pos .hx-nav a[data-nav="method"]{min-width:68px}
  .hx-header--pos .hx-nav a[data-nav="offer"]{min-width:66px}
  .hx-header--pos .hx-nav a[data-nav="calculator"]{min-width:76px}
  .hx-header--pos .hx-nav a[data-nav="pubs"]{min-width:102px}
  .hx-header--pos .hx-nav a[data-nav="ceo"]{min-width:76px}
  .hx .hx-header--pos .hx-header__cta{min-width:188px}
}
/* Hero: Überschrift + Einleitung reservieren gemeinsam die Höhe der längeren Sprachfassung (je Breite gemessen),
   damit die Knöpfe darunter beim Sprachwechsel nicht springen. Freiraum entsteht unter dem Text, nicht dazwischen. */
.hp-hero__text,.hp-svc-hero__text{display:flex;flex-direction:column;gap:24px}
.hp-hero__text{min-height:calc(5 * 1.12 * clamp(30px,8.4vw,38px) + 24px + 6 * 1.5 * 17px)}
.hp-svc-hero__text{min-height:calc(6 * 1.12 * clamp(32px,4.2vw,52px) + 24px + 7 * 1.5 * 19px)}
@media (min-width:721px){
  .hp-hero__text{min-height:calc(5 * 1.12 * clamp(34px,4.2vw,52px) + 24px + 6 * 1.5 * 20px)}
  .hp-svc-hero__text{min-height:calc(3 * 1.12 * clamp(32px,4.2vw,52px) + 24px + 4 * 1.5 * 19px)}
}
@media (min-width:1025px){
  .hp-hero__text{min-height:calc(4 * 1.12 * clamp(34px,4.2vw,52px) + 24px + 3 * 1.5 * 20px)}
  .hp-svc-hero__text{min-height:calc(3 * 1.12 * clamp(32px,4.2vw,52px) + 24px + 3 * 1.5 * 19px)}
}
@media (min-width:721px){
  .hx--pos .hp-btn{min-width:328px}
  .hx--pos .hx-offer__close{flex-direction:column;align-items:flex-start}
  .hx--pos .hx-ceo__links .hx-btn{min-width:260px}
  .hx--pos .hx-offer__close .hx-btn{min-width:328px}
}

/* ---------- Tablet ---------- */
@media (max-width:1100px){
  .hx .hx-header--dark .hx-nav{border-top-color:rgba(232,245,255,.16)}
  .hx .hx-header--dark .hx-nav a{border-bottom-color:rgba(232,245,255,.16)}
  .hx-header--dark .hx-header__actions{gap:16px}
  .hp-hero__in{gap:48px}
  .hp-hero__media{flex-basis:260px}
}
@media (max-width:1023px){
  .hp-grid--4,.hp-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-proof__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .hp-check__copy,.hx .hp-check__btn{grid-column:1/-1}
  .hx .hp-check__btn{width:auto;justify-self:start}
  .hp-steps,.hp-steps--2{grid-template-columns:minmax(0,1fr)}
  .hp-step__arrow{top:auto;bottom:-21px;right:auto;left:50%;margin:0 0 0 -12px;transform:rotate(90deg)}
  .hp-wait__copy,.hp-wait__viz{grid-column:1/-1}
  .hp-wait__viz{max-width:520px}
  .hp-contact__copy,.hp-contact__form{grid-column:1/-1;grid-row:auto}
  .hp-contact__in{gap:40px}
}

/* ---------- Handy ---------- */
@media (max-width:720px){
  :root{--hp-head:85px}
  .hx-header--dark .hx-header__in{gap:12px}
  .hx-header--dark .hx-logo img{height:52px}
  .hx-header--dark .hx-header__actions{gap:8px}
  .hx-header--dark .hx-lang--head{display:inline-flex;height:44px}
  .hx .hx-header--dark .hx-lang--head a{width:40px;font-size:12px}
  .hx-header--dark .hx-lang--menu{display:none!important}
  .hx-header--dark .hx-header__cta{display:none}
  .hx-header--dark .hx-menu-btn{width:44px;height:44px;margin-right:0}
  .hx--pos .hx-top .hx-header{position:static}
  .hp-sec{padding:64px 0}
  .hp-stack{gap:32px}
  .hp-hero__mosaic{right:-140px;opacity:.35;-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 90px,#000 220px);mask-image:linear-gradient(to bottom,transparent 0,transparent 90px,#000 220px)}
  .hp-hero__in{flex-direction:column;align-items:stretch;gap:40px;min-height:0;padding-top:36px;padding-bottom:56px}
  .hp-hero__title{font-size:clamp(30px,8.4vw,38px)}
  .hp-hero__lead{font-size:17px}
  .hp-hero__btns{flex-direction:column}
  .hx .hp-hero__btns .hp-btn{width:100%}
  .hp-hero__media{flex:0 0 auto;width:min(100%,280px);align-self:center}
  .hp-proof__num{font-size:32px}
  .hp-grid--4,.hp-grid--3,.hp-grid--2{grid-template-columns:minmax(0,1fr)}
  .hp-card{padding:24px 20px}
  .hp-card__title{min-height:0}
  .hx .hp-check__btn,.hx .hp-wait__btn,.hx .hp-contact__btn{width:100%;align-self:stretch}
  .hp-step{padding:24px 20px}
  .hp-contact__in{padding-top:64px;padding-bottom:64px}
  .hp-contact__form{padding:24px 20px}
  .hp-contact__mosaic{opacity:.25}
}
@media (max-width:380px){
  .hx-header--dark .hx-logo img{height:44px}
  .hp-proof__grid{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Rechner-Seite ---------- */
.hp-calc{margin-top:calc(-1 * var(--hp-head));padding-top:var(--hp-head);background:radial-gradient(ellipse at 85% 20%,var(--hx-petrol) 0%,var(--hp-night) 60%);color:#fff;position:relative;overflow:hidden}
.hp-calc__mosaic{position:absolute;right:0;top:0;height:560px;width:auto;max-width:none;opacity:.5;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent 100%);mask-image:linear-gradient(to bottom,#000 40%,transparent 100%)}
.hp-calc__in{position:relative;padding-top:64px;padding-bottom:96px;display:flex;flex-direction:column;gap:48px}
.hx .hp-calc__back{align-self:flex-start;color:var(--hx-sky);text-decoration:none;font-size:15px;font-weight:500}
.hx .hp-calc__back:hover{color:#fff;text-decoration:underline}
.hp-calc__head{display:flex;flex-direction:column;gap:16px;max-width:752px}
.hp-calc__title{margin:0;font-size:clamp(32px,4.2vw,52px);line-height:1.12;font-weight:700;color:#fff}
.hp-calc .hx-mark{color:var(--hx-amber);box-shadow:none}
.hp-calc__intro{margin:0;font-size:19px;line-height:1.5;color:var(--hx-ice)}
.hp-calc__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.hp-calc__inputs{grid-column:1/7;background:var(--hx-navy);border-top:8px solid var(--hx-amber);padding:32px;display:flex;flex-direction:column;gap:28px}
.hp-calc__result{grid-column:7/13;background:#fff;color:var(--hx-navy);border-top:8px solid var(--hx-amber);padding:32px;display:flex;flex-direction:column;gap:20px}
.hp-range{display:flex;flex-direction:column;gap:10px}
.hp-range__top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.hp-range label{font-size:15px;color:var(--hx-ice)}
.hp-range output{font-size:20px;font-weight:700;color:var(--hx-amber);white-space:nowrap}
.hp-range input[type=range]{width:100%;margin:0;height:32px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.hp-range input[type=range]::-webkit-slider-runnable-track{height:6px;background:linear-gradient(to right,var(--hx-amber) var(--fill,50%),rgba(232,245,255,.25) var(--fill,50%))}
.hp-range input[type=range]::-moz-range-track{height:6px;background:rgba(232,245,255,.25)}
.hp-range input[type=range]::-moz-range-progress{height:6px;background:var(--hx-amber)}
.hp-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;background:var(--hx-ice);border:3px solid var(--hx-amber);border-radius:0}
.hp-range input[type=range]::-moz-range-thumb{width:18px;height:18px;background:var(--hx-ice);border:3px solid var(--hx-amber);border-radius:0}
.hp-range input[type=range]:focus-visible{outline:3px solid var(--hx-sky);outline-offset:4px}
.hp-calc__note{margin:0;font-size:14px;line-height:1.5;color:var(--hx-sky)}
.hp-calc__result .hp-kick{color:var(--hp-teal)}
.hp-calc__wait{margin:0;font-size:clamp(40px,5vw,60px);line-height:1;font-weight:700;color:var(--hx-petrol)}
.hp-calc__sub{margin:-8px 0 0;font-size:16px;color:var(--hx-navy)}
.hp-calc__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.hp-calc__pair div{background:var(--hx-ice);padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.hp-calc__pair strong{font-size:22px;line-height:1.2;color:var(--hx-petrol)}
.hp-calc__pair span{font-size:14px}
.hp-calc__result .hp-squares span{border-color:var(--hx-line)}
.hp-calc__result .hp-squares span.is-on{border-color:var(--hx-amber)}
.hp-calc__legend{margin:-8px 0 0;font-size:13px;color:#4f6676}
.hx .hp-calc__cta{width:100%}
.hp-calc__meta{margin:-8px 0 0;font-size:14px;text-align:center;color:var(--hx-navy)}
.hp-calc__formula{margin:0;font-size:13px;color:#4f6676;border-top:1px solid var(--hx-mist);padding-top:14px}
.hp-calc__next{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--hx-mist);display:flex;flex-direction:column;gap:10px;font-size:15px}
@media (max-width:1023px){
  .hp-calc__inputs,.hp-calc__result{grid-column:1/-1}
}
@media (max-width:720px){
  .hp-calc__in{padding-top:40px;padding-bottom:64px;gap:32px}
  .hp-calc__inputs,.hp-calc__result{padding:24px 20px}
  .hp-calc__mosaic{right:-160px;opacity:.3}
  .hp-calc__pair{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.hx .hx-header--dark{transition:none}}

/* ---------- „Ursache statt Kontakt“ (lib/home-cause.php): Problem, Methode, Belege aus der Linie, Wachstum, Lead-Magnete ---------- */
.hp-lead{margin:0;font-size:19px;line-height:1.5;color:var(--hx-navy)}
.hx--pos .hp-band:has(strong){display:block}
.hp-sec--dark .hp-lead{color:var(--hx-ice)}

/* Problem: weg von / hin zu */
.hp-problem{background:#fff}
.hp-problem .hp-grid{grid-template-rows:auto auto;row-gap:0}
.hp-shift{display:grid;grid-row:span 2;grid-template-rows:subgrid;border-top:8px solid var(--hx-amber)}
.hp-shift p{margin:0;padding:24px;font-size:17px;line-height:1.45;display:flex;flex-direction:column;gap:10px}
.hp-shift__label{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.hp-shift__from{flex:1 1 auto;background:var(--hx-ice);color:var(--hx-navy)}
.hp-shift__from .hp-shift__label{color:#4f6676}
.hp-shift__to{position:relative;background:var(--hx-petrol);color:#fff;font-weight:700}
.hp-shift__to .hp-shift__label{color:var(--hx-amber)}
.hp-shift__to::before{content:"";position:absolute;left:24px;top:-12px;border:12px solid transparent;border-top:0;border-bottom-color:var(--hx-petrol)}

/* Methode */
.hp-method__top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
.hp-method__top .hp-head{grid-column:1/9}
.hp-method__name{font-size:clamp(34px,4vw,54px);line-height:1.08;text-wrap:balance}
.hp-method__foe{grid-column:9/13;border-left:4px solid var(--hx-amber);padding:4px 0 4px 24px;display:flex;flex-direction:column;gap:8px}
.hp-method__foe p{margin:0;font-size:16px;line-height:1.5;color:var(--hx-ice)}
.hp-method__foe .hp-method__foe-label{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--hx-amber)}
.hp-method__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;counter-reset:none}
.hp-method__step{background:rgba(232,245,255,.07);border-top:8px solid var(--hx-amber);padding:28px 24px 32px;display:flex;flex-direction:column;gap:14px}
.hp-method__num{font-size:15px;font-weight:700;color:var(--hx-amber);letter-spacing:.1em}
.hp-method__title{margin:0;font-size:26px;line-height:1.2;font-weight:700;color:#fff}
.hp-method__text{margin:0;font-size:16px;line-height:1.5;color:var(--hx-ice)}
.hp-method__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.hp-method__note{margin:0;font-size:16px;color:var(--hx-sky)}
.hx .hp-method__more{color:var(--hx-amber)}
.hx .hp-method__more:hover{color:#fff}

/* Belege aus der Linie */
.hp-cases .hp-grid{grid-template-rows:repeat(4,auto);row-gap:0}
.hp-case{background:#fff;border-top:8px solid var(--hx-amber);padding:32px 28px;display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:12px;align-content:start}
.hp-case__num{margin:0;font-size:clamp(40px,4.4vw,56px);line-height:1;font-weight:700;color:var(--hx-petrol);white-space:nowrap}
.hp-case__label{margin:0;font-size:16px;font-weight:700;color:var(--hx-navy)}
.hp-case__text{margin:0;font-size:16px;line-height:1.5;color:var(--hx-navy)}
.hp-case__ctx{margin:8px 0 0;padding-top:14px;align-self:start;border-top:1px solid var(--hx-mist);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--hp-teal)}
.hp-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:2px solid var(--hx-petrol);padding-top:28px}
.hp-fact,.hp-fact>a{display:flex;flex-direction:column;gap:6px}
.hp-fact{padding:0 28px}
.hx .hp-fact>a{text-decoration:none}
.hp-fact strong{font-size:30px;line-height:1.1;color:var(--hx-petrol)}
.hp-fact span{font-size:15px;line-height:1.4;color:var(--hx-navy)}
.hx .hp-fact>a:hover span{text-decoration:underline}

/* Wachstum */
.hp-growth__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.hp-growth__copy{grid-column:1/8;display:flex;flex-direction:column;gap:24px}
.hp-growth__text{margin:0;font-size:18px;line-height:1.5;color:var(--hx-navy)}
.hx .hp-growth__copy .hp-btn{align-self:flex-start}
.hp-growth__side{grid-column:9/13;display:flex;flex-direction:column;gap:20px}
.hp-growth__proof{background:var(--hx-ice);border-top:8px solid var(--hx-amber);padding:24px;display:flex;flex-direction:column;gap:8px}
.hp-growth__hook{margin:0;font-size:17px;line-height:1.45;font-weight:700;color:var(--hx-petrol)}
.hp-growth__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}

/* Wo wir hinschauen (Startseite) und Hebel im Detail (Leistungsseite) */
.hp-head--wide{max-width:860px}
.hp-lever{background:#fff;border-top:8px solid var(--hx-amber);padding:28px 24px;display:flex;flex-direction:column;gap:10px}
.hp-lever__title{margin:0;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--hp-teal)}
.hp-lever__q{margin:0;font-size:21px;line-height:1.3;font-weight:700;color:var(--hx-petrol)}
.hp-lever__text{margin:0;font-size:16px;line-height:1.5;color:var(--hx-navy)}
.hp-levers__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;border-top:2px solid var(--hx-petrol);padding-top:28px}
.hp-levers__foot p{margin:0;font-size:17px;line-height:1.5;color:var(--hx-navy);max-width:640px}

/* Kosten des Abwartens: Hinweis unter dem Rechner-Knopf */
.hp-wait__meta{margin:-8px 0 0;font-size:14px;line-height:1.45;color:var(--hx-sky);max-width:440px}

/* Checkliste unter dem Problem-Bereich */
.hp-checklist{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;background:var(--hx-ice);border-left:8px solid var(--hx-amber);padding:28px 32px}
.hp-checklist--soon{background:#fff;border:2px dashed var(--hx-line);border-left:8px solid var(--hx-amber)}
.hp-checklist__copy{display:flex;flex-direction:column;gap:6px;max-width:760px}
.hp-checklist p{margin:0}
.hp-checklist__label{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--hp-teal)}
.hp-checklist__soon{display:inline-block;margin-left:8px;background:var(--hx-sky);color:var(--hp-night);letter-spacing:.12em;padding:2px 8px}
.hp-checklist__title{font-size:20px;line-height:1.3;font-weight:700;color:var(--hx-petrol)}
.hp-checklist__text{font-size:16px;line-height:1.5;color:var(--hx-navy)}
.hx .hp-checklist .hp-btn{flex:0 0 auto}

@media (max-width:1023px){
  .hp-method__top .hp-head,.hp-method__foe,.hp-growth__copy,.hp-growth__side{grid-column:1/-1}
  .hp-method__steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-cases .hp-grid{grid-template-rows:none;row-gap:24px}
  .hp-case{display:flex;flex-direction:column;grid-row:auto}
}
@media (max-width:720px){
  .hp-lead{font-size:17px}
  .hp-method__steps{grid-template-columns:minmax(0,1fr)}
  .hp-problem .hp-grid{grid-template-rows:none;row-gap:24px}
  .hp-shift{display:flex;flex-direction:column;grid-row:auto}
  .hp-case{padding:24px 20px}
  .hp-facts{grid-template-columns:minmax(0,1fr)}
  .hp-fact{padding:0 20px}
  .hp-checklist{flex-direction:column;align-items:stretch;padding:24px 20px}
  .hp-lever{padding:24px 20px}
  .hx .hp-levers__foot .hp-btn{width:100%}
  .hx .hp-growth__copy .hp-btn{width:100%;align-self:stretch}
}

/* ---------- Leistungsseite /de/angebot/, /en/services/ (partials/services-page.php) ---------- */
.hp-svc-hero .hp-calc__in{padding-bottom:88px}
.hx-svc-page .hx-offer{background:#fff;border-top:16px solid var(--hx-amber)}
.hx-svc-page .hx-tile{background:var(--hx-ice)}
.hp-svc-hero__head{max-width:860px;gap:24px}
.hp-card--white{background:#fff}
.hp-case--ice{background:var(--hx-ice)}
.hp-role{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:#fff;border-top:8px solid var(--hx-amber)}
.hp-role__media{display:block;width:100%;height:100%;min-height:280px;object-fit:cover;object-position:center 20%}
.hp-role__body{padding:36px 40px;display:flex;flex-direction:column;gap:16px}
.hp-role__head{margin:0;display:flex;align-items:center;gap:14px}
.hp-role__name{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--hp-teal)}
.hp-role__hook{margin:0;font-size:22px;line-height:1.3;font-weight:700;color:var(--hx-petrol)}
.hp-role__title{margin:0;font-size:17px;font-weight:700;color:var(--hx-navy)}
.hp-role__text{margin:0;font-size:16px;line-height:1.5;color:var(--hx-navy)}
.hp-role .hx-more{align-self:flex-start}
.hp-role .hx-gain{padding:16px 18px;background:var(--hx-petrol);display:flex;flex-direction:column;gap:6px}
.hp-deliver{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start;background:var(--hx-ice);padding:40px}
.hp-deliver .hp-head{grid-column:1/6}
.hp-deliver__claim{margin:0;font-size:28px;line-height:1.2;font-weight:700;color:var(--hx-petrol)}
.hp-deliver__note{margin:0;font-size:15px;line-height:1.5;color:var(--hx-navy)}
.hp-deliver__list{grid-column:7/13;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.hp-deliver__list li{background:#fff;padding:16px 20px 16px 52px;position:relative;font-size:16px;line-height:1.45;color:var(--hx-navy)}
.hp-deliver__list li::before{content:"";position:absolute;left:20px;top:21px;width:14px;height:14px;background:var(--hx-amber)}
.hp-fit{background:#fff}
.hp-fit__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.hp-fit__col{display:flex;flex-direction:column;gap:20px;padding:32px;border-top:8px solid var(--hx-amber)}
.hp-fit__col--yes{grid-column:1/8;background:var(--hx-ice)}
.hp-fit__col--no{grid-column:8/13;border:2px solid var(--hx-line);border-top-width:8px}
.hp-fit__claim{margin:0;font-size:26px;line-height:1.2;font-weight:700;color:var(--hx-petrol)}
.hp-fit__col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.hp-fit__col li{position:relative;padding-left:30px;font-size:16px;line-height:1.5;color:var(--hx-navy)}
.hp-fit__col--yes li::before{content:"✓";position:absolute;left:0;top:0;font-weight:700;color:var(--hp-teal)}
.hp-fit__col--no li::before{content:"–";position:absolute;left:4px;top:0;font-weight:700;color:#4f6676}
.hp-svc-close__in{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding-top:96px;padding-bottom:96px;max-width:860px;margin-left:auto;margin-right:auto}
@media (max-width:1023px){
  .hp-role{grid-template-columns:minmax(0,1fr)}
  .hp-role__media{min-height:0;aspect-ratio:1200/520;height:auto}
  .hp-deliver .hp-head,.hp-deliver__list,.hp-fit__col--yes,.hp-fit__col--no{grid-column:1/-1}
}
@media (max-width:720px){
  .hp-role__body{padding:24px 20px}
  .hp-deliver{padding:24px 20px}
  .hp-fit__col{padding:24px 20px}
  .hp-svc-close__in{padding-top:64px;padding-bottom:64px}
  .hx .hp-svc-close .hp-btn{width:100%}
}

/* Ergebnis-Check: Band und Knopf in einer eigenen Zeile, gleich hoch und auf dem Kartenraster (Band = Karten 1–3, Knopf = Karte 4) */
.hp-check__foot{display:block}
.hp-check__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:stretch}
.hp-check__row .hp-band{grid-column:1/4;grid-row:auto;height:auto;min-height:76px} /* zwei Zeilen (2 × 23,8 px + 28 px Innenabstand = 75,6 px): auf 76 px fest, damit DE und EN gleich hoch */
.hx .hp-check__row .hp-check__btn{grid-column:4/5;grid-row:auto;align-self:stretch;justify-self:stretch;width:100%;min-width:0;height:auto;min-height:56px;display:flex;align-items:center;justify-content:center}
.hp-check__foot .hp-check__tip{margin-top:16px;max-width:calc(75% - 6px)}
@media (max-width:1023px){
  .hp-check__row{grid-template-columns:minmax(0,1fr);gap:16px}
  .hp-check__row .hp-band,.hx .hp-check__row .hp-check__btn{grid-column:1/-1}
  .hx .hp-check__row .hp-check__btn{width:auto;min-width:328px;justify-self:start;align-self:start}
  .hp-check__foot .hp-check__tip{max-width:none}
}
@media (max-width:720px){
  .hx .hp-check__row .hp-check__btn{width:100%;justify-self:stretch}
}

/* Leistungsseite: Link vom Hebel zur passenden Publikation */
.hx .hp-lever__pub{margin-top:auto;padding-top:6px;font-size:15px;color:var(--hx-petrol)}

/* ---------- Customer Journey (05.11.2026): Startseite schlanker (partials/home-positioning.php, $hp_slim) ---------- */
/* Hero: Nebenweg zur Checkliste */
.hp-hero__alt{margin:0;font-size:16px;line-height:1.45}
.hx .hp-hero__alt a{color:var(--hx-sky);text-decoration:underline;text-underline-offset:3px}
.hx .hp-hero__alt a:hover{color:#fff}
/* Publikationen: vier Themenkacheln statt der neuesten Titel */
.hp-topics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hx .hp-topic{display:flex;flex-direction:column;gap:8px;background:#fff;border-top:4px solid var(--c,var(--hx-amber));padding:20px 20px 18px;text-decoration:none;color:var(--hx-navy);box-shadow:0 1px 0 var(--hx-mist);transition:transform .15s ease,box-shadow .15s ease}
.hx .hp-topic:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(23,38,49,.12)}
.hp-topic__k{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#4f6676}
.hp-topic__q{font-size:19px;line-height:1.25;font-weight:700;color:var(--hx-petrol)}
.hp-topic__t{font-size:14px;line-height:1.5;color:var(--hx-navy)}
.hp-topic__n{margin-top:auto;padding-top:6px;font-size:13px;font-weight:700;color:var(--hx-petrol)}
.hp-topics__foot{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.hx .hp-topics__start{background:#fdf1dc;border:1px solid var(--hx-amber-light);color:var(--hx-ink);padding:9px 14px;font-size:14px;text-decoration:none}
.hx .hp-topics__start:hover{background:#fbe6c2}
@media (max-width:1023px){
  .hp-topics{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Punkt 11: Kontaktbereich auf Handy und Tablet nicht breiter als der Bildschirm (12-Spalten-Raster mit Abständen) */
  .hp-contact__in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .hp-topics{grid-template-columns:minmax(0,1fr)}
  /* Wischbare Reihen: weg von / hin zu, vier Methodenschritte, drei Belege */
  .hx .hp-swipe{display:grid;grid-auto-flow:column;grid-auto-columns:84%;grid-template-columns:none;grid-template-rows:none;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin-left:-20px;margin-right:-20px;padding:0 20px 6px;scroll-padding:0 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hx .hp-swipe::-webkit-scrollbar{display:none}
  .hx .hp-swipe>*{scroll-snap-align:start;min-width:0}
  /* Kosten des Abwartens: zwölf kleine Quadrate in einer Reihe */
  .hp-wait__viz{max-width:none}
  .hp-wait .hp-squares{grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}
  .hp-wait .hp-squares span{border-width:1.5px}
}
@media (prefers-reduced-motion:reduce){.hx .hp-topic{transition:none}}