/* Alle Regeln wirken nur innerhalb von .hx-page,
   damit dein WordPress-Theme unveraendert bleibt. */
:root{
  --ink:#111A21;
  --ink-soft:#3D4B55;
  --ink-mute:#6C7A83;
  --paper:#E7E9E4;
  --paper-lift:#F6F7F4;
  --white:#FFFFFF;
  --rule:#C2C7BE;
  --rule-soft:#D6DAD2;
  --blue:#1D4ED8;
  --sand:#CDBFA3;
  --sand-soft:#E2D8C4;
  --maxw:1200px;
  --pad:clamp(20px,5vw,64px);
}

.hx-page *{box-sizing:border-box}
html{scroll-behavior:smooth}
.hx-page{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Newsreader",Georgia,serif;
  font-size:18px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(to right, rgba(17,26,33,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,26,33,.045) 1px, transparent 1px);
  background-size:34px 34px;
}
.hx-page h1, .hx-page h2, .hx-page h3, .hx-page h4, .hx-page button, .hx-page nav, .hx-page label, .hx-page th{font-family:"Archivo",Helvetica,Arial,sans-serif}
.hx-page h1, .hx-page h2, .hx-page h3, .hx-page h4{margin:0;letter-spacing:-.02em;line-height:1.06;font-weight:600}
.hx-page p{margin:0 0 1em}
.hx-page a{color:inherit}
.hx-page .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

.hx-page .mono{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.hx-page .eyebrow{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-mute);display:flex;align-items:center;gap:10px;margin-bottom:22px;
}
.hx-page .eyebrow::after{content:"";height:1px;background:var(--rule);flex:1}

.hx-page /* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(231,233,228,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.hx-page .topbar-in{display:flex;align-items:center;gap:20px;height:68px}
.hx-page .logo{font-family:"Archivo";font-weight:700;font-size:19px;letter-spacing:-.03em;text-decoration:none;white-space:nowrap}
.hx-page .logo span{color:var(--blue)}
.hx-page .navlinks{display:flex;gap:24px;margin-left:auto;font-size:14px;font-weight:500}
.hx-page .navlinks a{text-decoration:none;color:var(--ink-soft);padding:6px 0;border-bottom:1px solid transparent}
.hx-page .navlinks a:hover{color:var(--ink);border-bottom-color:var(--blue)}
.hx-page .langswitch{display:flex;border:1px solid var(--rule);border-radius:2px;overflow:hidden;margin-left:auto}
.hx-page .navlinks + .langswitch{margin-left:0}
.hx-page .langswitch button{
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;
  background:transparent;border:0;padding:9px 12px;cursor:pointer;color:var(--ink-mute);
}
.hx-page .langswitch button + button{border-left:1px solid var(--rule)}
.hx-page .langswitch button[aria-pressed="true"]{background:var(--ink);color:var(--paper-lift)}
.hx-page .btn{
  font-family:"Archivo";font-size:14px;font-weight:600;letter-spacing:-.01em;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper-lift);
  padding:12px 20px;border-radius:2px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:9px;transition:background .18s,color .18s,transform .18s;
}
.hx-page .btn:hover{background:var(--blue);border-color:var(--blue)}
.hx-page .btn:active{transform:translateY(1px)}
.hx-page .btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.hx-page .btn-ghost:hover{background:transparent;color:var(--blue);border-color:var(--blue)}
.hx-page .btn-lg{padding:16px 26px;font-size:15px}
.hx-page :focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.hx-page /* ---------- hero ---------- */
.hero{padding:clamp(52px,8vw,104px) 0 clamp(40px,6vw,72px)}
.hx-page .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,72px);align-items:start}
.hx-page .hero h1{font-size:clamp(36px,5.2vw,66px);font-weight:600;font-stretch:expanded;letter-spacing:-.035em}
.hx-page .hero h1 em{font-style:normal;color:var(--blue);position:relative;white-space:nowrap}
.hx-page .hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:3px;background:var(--blue);opacity:.28}
.hx-page .hero-sub{margin-top:26px;font-size:19px;color:var(--ink-soft);max-width:46ch}
.hx-page .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hx-page .hero-note{margin-top:18px;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-mute)}

.hx-page /* ---------- Zahlungsplan ---------- */
.plan{background:var(--paper-lift);border:1px solid var(--rule);border-radius:3px;padding:clamp(20px,3vw,30px)}
.hx-page .plan-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.hx-page .plan-title{font-family:"Archivo";font-size:15px;font-weight:600}
.hx-page .plan-tag{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.hx-page .plan-price{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink-mute);margin-bottom:26px}
.hx-page .ruler{position:relative;margin:0 0 8px}
.hx-page .bar{display:flex;height:52px;border:1px solid var(--ink);border-radius:2px;overflow:hidden}
.hx-page .seg{position:relative;border-right:1px solid var(--ink);display:flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;
  transform-origin:left;animation:grow .7s cubic-bezier(.2,.7,.3,1) both}
.hx-page .seg:last-child{border-right:0}
.hx-page .seg-pay{background:var(--sand-soft);color:var(--ink)}
.hx-page .seg-pay.first{background:var(--sand)}
.hx-page .seg-hand{background:var(--ink);color:var(--paper-lift)}
@keyframes grow{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
.hx-page .seg:nth-child(1){animation-delay:.15s}
.hx-page .seg:nth-child(2){animation-delay:.28s}
.hx-page .seg:nth-child(3){animation-delay:.38s}
.hx-page .seg:nth-child(4){animation-delay:.48s}
.hx-page .seg:nth-child(5){animation-delay:.58s}
.hx-page .seg:nth-child(6){animation-delay:.72s}
.hx-page .dimline{display:flex;margin-top:10px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ink-mute)}
.hx-page .dimline > div{position:relative;padding-top:14px;text-align:center}
.hx-page .dimline > div::before{content:"";position:absolute;top:0;left:50%;width:1px;height:8px;background:var(--rule)}
.hx-page .dim-brace{display:flex;margin-top:16px;gap:8px}
.hx-page .dim-brace > div{position:relative;padding-top:16px;font-family:"IBM Plex Mono",monospace;font-size:11px;text-align:center;color:var(--ink-soft)}
.hx-page .dim-brace > div::before{content:"";position:absolute;top:4px;left:0;right:0;height:5px;border:1px solid var(--rule);border-bottom:none}
.hx-page .dim-brace strong{font-weight:600;color:var(--ink)}
.hx-page .plan-foot{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:30px}
.hx-page .plan-cell{background:var(--paper-lift);padding:16px 18px}
.hx-page .plan-cell .k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.hx-page .plan-cell .v{font-family:"Archivo";font-size:26px;font-weight:600;letter-spacing:-.03em;margin-top:3px}
.hx-page .plan-cell .v small{font-size:13px;font-weight:500;color:var(--ink-mute)}
.hx-page .plan-disc{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ink-mute);margin-top:14px;line-height:1.6}

.hx-page /* ---------- facts ---------- */
.facts{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper-lift)}
.hx-page .facts-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule-soft)}
.hx-page .fact{background:var(--paper-lift);padding:26px var(--pad)}
.hx-page .fact .n{font-family:"Archivo";font-size:30px;font-weight:600;letter-spacing:-.04em;font-stretch:expanded}
.hx-page .fact .t{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);margin-top:6px}

.hx-page section{padding:clamp(56px,8vw,104px) 0}
.hx-page .sec-head{max-width:64ch;margin-bottom:clamp(30px,4vw,52px)}
.hx-page .sec-head h2{font-size:clamp(28px,3.6vw,44px);font-stretch:expanded;letter-spacing:-.035em}
.hx-page .sec-head p{margin-top:18px;color:var(--ink-soft);font-size:19px}

.hx-page /* ---------- wege ---------- */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.hx-page .way{background:var(--paper-lift);padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column}
.hx-page .way-ix{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--blue);letter-spacing:.14em}
.hx-page .way h3{font-size:23px;margin:14px 0 12px;letter-spacing:-.03em}
.hx-page .way p{font-size:16.5px;color:var(--ink-soft);flex:1}
.hx-page .way-meta{border-top:1px solid var(--rule-soft);margin-top:18px;padding-top:14px;display:flex;justify-content:space-between;gap:12px;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-mute)}
.hx-page .way-meta b{color:var(--ink);font-weight:600;text-align:right}
.hx-page .spark{height:44px;width:100%;margin-bottom:4px}

.hx-page /* ---------- rechner ---------- */
.calc{display:grid;grid-template-columns:0.9fr 1.1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.hx-page .calc-in, .hx-page .calc-out{background:var(--paper-lift);padding:clamp(24px,3vw,36px)}
.hx-page .calc-out{background:var(--ink);color:var(--paper-lift)}
.hx-page .tabs{display:flex;border:1px solid var(--rule);border-radius:2px;overflow:hidden;margin-bottom:30px}
.hx-page .tab{flex:1;padding:11px 6px;font-family:"Archivo";font-size:13px;font-weight:600;background:transparent;border:0;border-right:1px solid var(--rule);cursor:pointer;color:var(--ink-mute)}
.hx-page .tab:last-child{border-right:0}
.hx-page .tab[aria-selected="true"]{background:var(--ink);color:var(--paper-lift)}
.hx-page .field{margin-bottom:26px}
.hx-page .field label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;font-weight:600;margin-bottom:10px}
.hx-page .field .val{font-family:"IBM Plex Mono",monospace;font-size:15px;color:var(--blue);font-weight:600;white-space:nowrap}
.hx-page input[type=range]{width:100%;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.hx-page input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--rule)}
.hx-page input[type=range]::-moz-range-track{height:2px;background:var(--rule)}
.hx-page input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--blue);margin-top:-8px;border:3px solid var(--paper-lift);box-shadow:0 0 0 1px var(--blue)}
.hx-page input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--blue);border:3px solid var(--paper-lift)}
.hx-page .hint{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ink-mute);margin-top:8px}
.hx-page .out-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.hx-page .out-row:last-of-type{border-bottom:0}
.hx-page .out-row .lbl{color:#A9B6C0;font-family:"Archivo";font-size:13.5px;font-weight:500}
.hx-page .out-row .num{font-family:"IBM Plex Mono",monospace;font-size:16px;white-space:nowrap}
.hx-page .out-hero{margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.3)}
.hx-page .out-hero .k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8FA0AC}
.hx-page .out-hero .v{font-family:"Archivo";font-size:clamp(40px,5vw,58px);font-weight:600;letter-spacing:-.045em;font-stretch:expanded;line-height:1;margin-top:8px}
.hx-page .out-hero .v span{color:#7FA3FF}
.hx-page .out-note{font-family:"IBM Plex Mono",monospace;font-size:10.5px;line-height:1.65;color:#8FA0AC;margin-top:22px;border-left:2px solid var(--blue);padding-left:12px}

.hx-page /* ---------- schritte ---------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.hx-page .steps::before{content:"";position:absolute;top:31px;left:6%;right:6%;height:1px;background:var(--rule);z-index:0}
.hx-page .step{position:relative;z-index:1}
.hx-page .step-dot{width:62px;height:62px;border-radius:50%;background:var(--paper);border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.hx-page .step-dot svg{width:28px;height:28px}
.hx-page .step-ix{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--blue)}
.hx-page .step h3{font-size:21px;margin:8px 0 10px}
.hx-page .step p{font-size:16.5px;color:var(--ink-soft);margin:0}

.hx-page /* ---------- projekte ---------- */
.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.hx-page .proj{background:var(--paper-lift);border:1px solid var(--rule);border-radius:3px;overflow:hidden;display:flex;flex-direction:column}
.hx-page .proj-img{height:210px;background:linear-gradient(135deg,#2C3E4C,#16232D);position:relative;display:flex;align-items:flex-end;padding:16px;overflow:hidden}
.hx-page .proj-img.merc{background:linear-gradient(135deg,#26333D,#12191F)}
.hx-page .proj-img::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(to right,rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:22px 22px}
.hx-page .proj-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.hx-page .proj-art{position:absolute;left:0;right:0;bottom:0;width:100%;height:82%;color:#8FA9BC;opacity:.85}
.hx-page .proj-dev{position:relative;z-index:3;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#CBD7E0;background:rgba(17,26,33,.72);padding:5px 9px;border-radius:2px}
.hx-page .proj-badge{position:absolute;z-index:3;top:16px;left:16px;font-family:"Archivo",sans-serif;font-size:11.5px;font-weight:600;
  background:var(--blue);color:#fff;padding:6px 11px;border-radius:2px;letter-spacing:-.01em}
.hx-page .proj-body{padding:22px;flex:1;display:flex;flex-direction:column}
.hx-page .proj h3{font-size:21px;letter-spacing:-.025em}
.hx-page .proj .loc{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-mute);margin-top:6px}
.hx-page .proj-desc{font-size:16px;color:var(--ink-soft);margin:16px 0 4px}
.hx-page .proj-facts{margin-top:12px;font-size:15px;color:var(--ink-soft);flex:1}
.hx-page .proj-facts div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dotted var(--rule-soft)}
.hx-page .proj-facts b{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;color:var(--ink);text-align:right}
.hx-page .progress{margin-top:18px}
.hx-page .progress-track{height:5px;background:var(--rule-soft);border-radius:99px;overflow:hidden}
.hx-page .progress-fill{height:100%;background:var(--blue)}
.hx-page .progress-lbl{display:flex;justify-content:space-between;font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ink-mute);margin-top:7px}
.hx-page .proj-calc{margin-top:20px;width:100%;font-family:"Archivo",sans-serif;font-size:14px;font-weight:600;
  background:transparent;border:1px solid var(--ink);color:var(--ink);padding:13px 16px;border-radius:2px;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s}
.hx-page .proj-calc:hover{background:var(--ink);color:var(--paper-lift)}
.hx-page .proj-disc{font-family:"IBM Plex Mono",monospace;font-size:10.5px;line-height:1.7;color:var(--ink-mute);margin-top:22px;max-width:100ch}


.hx-page /* ---------- Bildplaetze ---------- */
body.editmode [data-imgslot]{cursor:pointer}

.hx-page /* ---------- leistungen ---------- */
.svcs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.hx-page .svc{background:var(--paper-lift);padding:26px 22px}
.hx-page .svc svg{width:24px;height:24px;color:var(--blue);margin-bottom:14px}
.hx-page .svc h3{font-size:17.5px;margin-bottom:8px}
.hx-page .svc p{font-size:15.5px;color:var(--ink-soft);margin:0}

.hx-page /* ---------- ehrlich ---------- */
.honest{background:var(--ink);color:var(--paper-lift)}
.hx-page .honest .sec-head h2{color:var(--paper-lift)}
.hx-page .honest .sec-head p{color:#A9B6C0}
.hx-page .honest .eyebrow{color:#8FA0AC}
.hx-page .honest .eyebrow::after{background:rgba(255,255,255,.2)}
.hx-page .risks{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16)}
.hx-page .risk{background:var(--ink);padding:26px}
.hx-page .risk h3{font-size:18px;margin-bottom:10px;color:var(--paper-lift)}
.hx-page .risk p{font-size:16px;color:#A9B6C0;margin:0}
.hx-page .risk .tagline{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#7FA3FF;margin-bottom:12px;display:block}

.hx-page /* ---------- buchung ---------- */
.booking{display:grid;grid-template-columns:1fr 1.25fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.hx-page .book-side, .hx-page .book-main{background:var(--paper-lift);padding:clamp(24px,3vw,34px)}
.hx-page .mode{width:100%;text-align:left;background:transparent;border:1px solid var(--rule);border-radius:2px;padding:16px;margin-bottom:10px;cursor:pointer;display:flex;gap:14px;align-items:flex-start;font-family:"Archivo"}
.hx-page .mode[aria-pressed="true"]{border-color:var(--ink);background:var(--paper);box-shadow:inset 3px 0 0 var(--blue)}
.hx-page .mode svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--blue)}
.hx-page .mode .mt{font-size:15px;font-weight:600;display:block}
.hx-page .mode .md{font-size:13px;color:var(--ink-mute);display:block;margin-top:3px;font-family:"Newsreader",serif}
.hx-page .book-label{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 12px}
.hx-page .days{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:26px}
.hx-page .day{background:transparent;border:1px solid var(--rule);border-radius:2px;padding:10px 4px;cursor:pointer;font-family:"Archivo";text-align:center}
.hx-page .day[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper-lift)}
.hx-page .day .dw{font-size:11px;color:var(--ink-mute);display:block}
.hx-page .day[aria-pressed="true"] .dw{color:#A9B6C0}
.hx-page .day .dd{font-size:17px;font-weight:600;display:block;font-variant-numeric:tabular-nums}
.hx-page .slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:26px}
.hx-page .slot{background:transparent;border:1px solid var(--rule);border-radius:2px;padding:10px 4px;cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:13px}
.hx-page .slot[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.hx-page .bform{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hx-page .bform input{width:100%;padding:13px 14px;border:1px solid var(--rule);border-radius:2px;background:var(--white);font-family:"Archivo";font-size:14.5px}
.hx-page .bform input:focus{border-color:var(--blue);outline:none}
.hx-page .bform .full{grid-column:1/-1}
.hx-page .consent{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.hx-page .consent input{width:auto;margin-top:3px}
.hx-page .confirm{grid-column:1/-1;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--blue);min-height:18px}

.hx-page /* ---------- stadt ---------- */
.city{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,4vw,60px);align-items:center}
.hx-page .city h2{font-size:clamp(26px,3.2vw,38px);font-stretch:expanded;letter-spacing:-.035em}
.hx-page .city-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.hx-page .city-list a{font-family:"IBM Plex Mono",monospace;font-size:12px;text-decoration:none;border:1px solid var(--rule);border-radius:99px;padding:7px 14px;color:var(--ink-soft)}
.hx-page .city-list a:hover{border-color:var(--blue);color:var(--blue)}
.hx-page .office{background:var(--paper-lift);border:1px solid var(--rule);padding:26px}
.hx-page .office + .office{border-top:0}
.hx-page .office .oc{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.hx-page .office h3{font-size:22px;margin:8px 0 10px;font-stretch:expanded}
.hx-page .office p{font-size:15.5px;color:var(--ink-soft);margin:0}

.hx-page /* ---------- faq ---------- */
.faq{border-top:1px solid var(--rule)}
.hx-page details{border-bottom:1px solid var(--rule);padding:20px 0}
.hx-page summary{font-family:"Archivo";font-weight:600;font-size:18px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
.hx-page summary::-webkit-details-marker{display:none}
.hx-page summary::after{content:"+";font-family:"IBM Plex Mono",monospace;color:var(--blue);font-size:20px;flex:none}
.hx-page details[open] summary::after{content:"\2013 "}
.hx-page details p{margin:14px 0 0;color:var(--ink-soft);font-size:17px;max-width:76ch}

.hx-page /* ---------- footer ---------- */
footer{background:var(--ink);color:#A9B6C0;padding:60px 0 34px;font-size:15px}
.hx-page .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
.hx-page footer h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#6C7D89;font-family:"IBM Plex Mono";font-weight:500;margin-bottom:16px}
.hx-page footer a{display:block;color:#C5D0D8;text-decoration:none;padding:5px 0;font-size:15px}
.hx-page footer a:hover{color:#fff}
.hx-page .foot-logo{font-family:"Archivo";font-weight:700;font-size:20px;color:#fff;letter-spacing:-.03em}
.hx-page .foot-logo span{color:#7FA3FF}
.hx-page .foot-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:44px;padding-top:22px;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:#6C7D89;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.hx-page .disclaimer{font-family:"IBM Plex Mono",monospace;font-size:11px;line-height:1.7;color:#6C7D89;max-width:90ch;margin-top:26px}

.hx-page .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.hx-page .rv.in{opacity:1;transform:none}

@media(max-width:1040px){ .hx-page .navlinks{gap:16px;font-size:13px} }
@media(max-width:960px){
  .hx-page .hero-grid, .hx-page .calc, .hx-page .booking, .hx-page .city{grid-template-columns:1fr}
  .hx-page .ways, .hx-page .projects, .hx-page .svcs, .hx-page .risks, .hx-page .steps, .hx-page .facts-in{grid-template-columns:1fr 1fr}
  .hx-page .steps::before{display:none}
  .hx-page .foot-grid{grid-template-columns:1fr 1fr}
  .hx-page .navlinks{display:none}
}
@media(max-width:620px){
  .hx-page{font-size:17px}
  .hx-page .ways, .hx-page .projects, .hx-page .svcs, .hx-page .risks, .hx-page .steps, .hx-page .facts-in, .hx-page .plan-foot, .hx-page .bform, .hx-page .foot-grid{grid-template-columns:1fr}
  .hx-page .days, .hx-page .slots{grid-template-columns:repeat(3,1fr)}
  .hx-page .seg{font-size:10px}
  .hx-page .topbar .btn{padding:10px 14px;font-size:13px}
  .hx-page .langswitch button{padding:8px 9px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .hx-page *{animation:none!important;transition:none!important}
  .hx-page .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

.hx-page /* =====================================================================
   UNTERSEITEN
   Diese Regeln gelten fuer alle Seiten ausser der Startseite.
   ===================================================================== */
.page-head{padding:clamp(40px,6vw,80px) 0 clamp(20px,3vw,32px);border-bottom:1px solid var(--rule)}
.hx-page .crumbs{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-mute);margin-bottom:22px}
.hx-page .crumbs a{text-decoration:none;color:var(--ink-mute)}
.hx-page .crumbs a:hover{color:var(--blue)}
.hx-page .crumbs span{margin:0 6px}
.hx-page .page-head h1{font-size:clamp(32px,4.6vw,56px);font-stretch:expanded;letter-spacing:-.035em}
.hx-page .page-head .lede{margin-top:22px}

.hx-page .page-body{padding:clamp(40px,6vw,72px) 0}
.hx-page .page-body .wrap{max-width:820px}
.hx-page .page-body h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.03em;margin:44px 0 16px}
.hx-page .page-body h2:first-child{margin-top:0}
.hx-page .page-body h3{font-size:20px;margin:32px 0 12px}
.hx-page .page-body p{margin:0 0 18px}
.hx-page .page-body ul, .hx-page .page-body ol{margin:0 0 20px;padding-left:22px}
.hx-page .page-body li{margin-bottom:9px}
.hx-page .page-body a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.hx-page .page-body a:hover{text-decoration-thickness:2px}
.hx-page .page-body table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:16px}
.hx-page .page-body th, .hx-page .page-body td{border:1px solid var(--rule);padding:11px 13px;text-align:left}
.hx-page .page-body th{background:var(--paper-lift);font-size:14px}
.hx-page .page-body blockquote{border-left:3px solid var(--blue);margin:0 0 22px;padding:4px 0 4px 20px;color:var(--ink-soft)}

.hx-page .page-figure{position:relative;height:280px;margin:32px 0;border:1px solid var(--rule);border-radius:3px;
  background:linear-gradient(135deg,#2C3E4C,#16232D);overflow:hidden;display:flex;align-items:flex-end}
.hx-page .page-figure::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(to right,rgba(255,255,255,.07) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:22px 22px}
.hx-page .page-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}

.hx-page .page-cta{margin-top:52px;padding:32px;background:var(--paper-lift);border:1px solid var(--rule);border-radius:3px}
.hx-page .page-cta h3{margin:0 0 10px;font-size:22px}
.hx-page .page-cta p{margin:0 0 20px;color:var(--ink-soft)}

/* ---------------------------------------------------------------
   VOLLE BREITE ERZWINGEN
   Bricht aus der schmalen Inhaltsspalte des Themes aus.
   Falls du das nicht willst, diesen Block loeschen.
   --------------------------------------------------------------- */
/* Zuerst: die Breitenbegrenzung des Themes auf der Startseite aufheben.
   Damit sitzt der Inhalt schon ohne Tricks richtig. */
body.home .wp-site-blocks,
body.home main,
body.home .wp-block-post-content,
body.home .entry-content,
body.home .is-layout-constrained{
  max-width:none !important;
  width:auto !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* Zusaetzlich: aus jedem verbliebenen Container mittig ausbrechen.
   Ueber left/transform statt margin, damit es auch dann stimmt,
   wenn der Container selbst nicht zentriert ist. */
.hx-page{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  max-width:100vw;
}

/* Kein waagerechter Scrollbalken durch die volle Breite */
html,body{overflow-x:hidden;max-width:100%}

/* ---------------------------------------------------------------
   KOPF- UND FUSSZEILE DES THEMES AUSBLENDEN
   Nur auf der Startseite. Diese Seite bringt beides selbst mit.
   Willst du die Theme-Leisten doch sehen, diesen Block loeschen.
   --------------------------------------------------------------- */
body.home > header,
body.home > footer,
body.home .wp-site-blocks > header,
body.home .wp-site-blocks > footer,
body.home header.wp-block-template-part,
body.home footer.wp-block-template-part{
  display:none !important;
}

/* ---------------------------------------------------------------
   ALLE ABSCHNITTE IMMER SICHTBAR
   Die Einblendung beim Scrollen wird abgeschaltet, weil sie
   innerhalb von WordPress nicht zuverlaessig ausgeloest wird.
   --------------------------------------------------------------- */
.hx-page .rv{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

/* ---------------------------------------------------------------
   MENUE AUF DEM HANDY
   Die Menuepunkte rutschen unter das Logo in eine eigene Zeile
   und lassen sich seitlich wischen. Kein Aufklappmenue noetig.
   --------------------------------------------------------------- */
@media(max-width:960px){
  .hx-page .topbar-in{
    height:auto;
    flex-wrap:wrap;
    padding-top:12px;
    padding-bottom:0;
    gap:12px;
  }
  .hx-page .logo{font-size:17px}
  .hx-page .topbar .btn{margin-left:auto;padding:10px 16px;font-size:13px}
  .hx-page .navlinks{
    display:flex;
    order:3;
    width:100%;
    margin-left:0;
    gap:20px;
    overflow-x:auto;
    padding:10px 0 9px;
    border-top:1px solid var(--rule-soft);
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .hx-page .navlinks::-webkit-scrollbar{display:none}
  .hx-page .navlinks a{
    white-space:nowrap;
    font-size:13.5px;
    padding:2px 0;
  }
  /* Hinweis, dass sich die Zeile wischen laesst */
  .hx-page .navlinks::after{
    content:"";
    flex:none;
    width:8px;
  }
}
@media(max-width:420px){
  .hx-page .logo{font-size:15px}
  .hx-page .topbar .btn{padding:9px 12px;font-size:12px}
  .hx-page .navlinks{gap:16px}
  .hx-page .navlinks a{font-size:12.5px}
}

/* ===============================================================
   HANDY-OPTIMIERUNG
   Abschnitt fuer Abschnitt fuer schmale Bildschirme angepasst.
   =============================================================== */

/* Bilder brechen nie aus ihrem Rahmen aus */
.hx-page img{max-width:100%;height:auto}

@media(max-width:860px){
  /* Projektkarten untereinander statt nebeneinander */
  .hx-page .projects{grid-template-columns:1fr;gap:18px}
  /* Leistungen zweispaltig statt vierspaltig */
  .hx-page .svcs{grid-template-columns:1fr 1fr}
}

@media(max-width:640px){
  /* --- Grundlagen --- */
  .hx-page{font-size:16.5px}
  .hx-page .wrap{padding-left:18px;padding-right:18px}
  .hx-page section{padding-top:44px;padding-bottom:44px}
  .hx-page .sec-head{margin-bottom:26px}
  .hx-page .sec-head p{font-size:17px}

  /* --- Ueberschrift oben --- */
  .hx-page .hero{padding-top:34px;padding-bottom:34px}
  .hx-page .hero-grid{gap:28px}
  .hx-page .hero h1{font-size:31px;letter-spacing:-.03em;line-height:1.1}
  .hx-page .hero-sub{font-size:17px;margin-top:18px}
  .hx-page .hero-cta{gap:10px;margin-top:24px}
  .hx-page .hero-cta .btn{width:100%;justify-content:center}

  /* --- Zahlungsplan --- */
  .hx-page .plan{padding:18px}
  .hx-page .bar{height:44px}
  .hx-page .seg{font-size:9.5px}
  .hx-page .seg-hand{font-size:10.5px}
  .hx-page .dimline{font-size:9px}
  .hx-page .dim-brace > div{font-size:10px}
  .hx-page .plan-cell .v{font-size:22px}

  /* --- Kennzahlen --- */
  .hx-page .facts-in{grid-template-columns:1fr 1fr}
  .hx-page .fact{padding:18px}
  .hx-page .fact .n{font-size:25px}
  .hx-page .fact .t{font-size:10px}

  /* --- Anlagestrategien und Leistungen --- */
  .hx-page .ways,
  .hx-page .svcs,
  .hx-page .risks{grid-template-columns:1fr}
  .hx-page .way{padding:22px}
  .hx-page .way h3{font-size:21px}

  /* --- Rechner --- */
  .hx-page .calc-in,
  .hx-page .calc-out{padding:20px}
  .hx-page .tab{font-size:12px;padding:12px 4px}
  .hx-page .out-row{font-size:14px;padding:11px 0}
  .hx-page .out-row .lbl{font-size:12.5px;max-width:58%}
  .hx-page .out-row .num{font-size:14px}
  .hx-page .out-hero .v{font-size:40px}
  /* Groessere Griffe an den Reglern, damit man sie trifft */
  .hx-page input[type=range]::-webkit-slider-thumb{width:26px;height:26px;margin-top:-12px}
  .hx-page input[type=range]::-moz-range-thumb{width:20px;height:20px}
  .hx-page .field{margin-bottom:30px}

  /* --- Drei Schritte --- */
  .hx-page .steps{gap:26px}
  .hx-page .step-dot{width:52px;height:52px;margin-bottom:14px}
  .hx-page .step-dot svg{width:24px;height:24px}

  /* --- Projektkarten --- */
  .hx-page .proj-img{height:190px}
  .hx-page .proj-body{padding:18px}
  .hx-page .proj h3{font-size:19px}
  .hx-page .proj-desc{font-size:15.5px}
  .hx-page .proj-facts div{padding:8px 0}
  .hx-page .proj-facts b{font-size:12px}
  .hx-page .proj-badge{font-size:10.5px;padding:5px 9px;top:12px;left:12px}
  .hx-page .proj-calc{padding:15px 12px}

  /* --- Terminbuchung --- */
  .hx-page .book-side,
  .hx-page .book-main{padding:20px}
  .hx-page .mode{padding:14px}
  .hx-page .days{grid-template-columns:repeat(5,1fr);gap:6px}
  .hx-page .day{padding:9px 2px}
  .hx-page .day .dd{font-size:15px}
  .hx-page .day .dw{font-size:9.5px}
  .hx-page .slots{grid-template-columns:repeat(3,1fr);gap:8px}
  .hx-page .slot{padding:13px 4px;font-size:13px}
  .hx-page .bform input{padding:15px 14px;font-size:16px}
  .hx-page .consent{font-size:13px}

  /* --- Standorte und FAQ --- */
  .hx-page .city{gap:26px}
  .hx-page .office{padding:20px}
  .hx-page summary{font-size:16.5px}
  .hx-page details p{font-size:16px}

  /* --- Fusszeile --- */
  .hx-page footer{padding:44px 0 26px}
  .hx-page .foot-grid{gap:26px}
  .hx-page .foot-bottom{margin-top:30px}
}

/* Sehr schmale Geraete */
@media(max-width:380px){
  .hx-page .hero h1{font-size:27px}
  .hx-page .facts-in{grid-template-columns:1fr}
  .hx-page .days{grid-template-columns:repeat(3,1fr)}
  .hx-page .seg-pay:not(.first){font-size:8.5px}
}

/* Auf Touch-Geraeten keine Hover-Effekte kleben lassen */
@media(hover:none){
  .hx-page .btn:hover{background:var(--ink);border-color:var(--ink)}
  .hx-page .btn-ghost:hover{background:transparent;color:var(--ink);border-color:var(--rule)}
  .hx-page .proj-calc:hover{background:transparent;color:var(--ink)}
}

/* ===============================================================
   HINTERGRUND DES EINSTIEGS
   Drei Ebenen: Foto (oder gezeichnete Skyline), darueber ein
   Aufhellungsverlauf, damit der Text lesbar bleibt.
   =============================================================== */
.hx-page .hero{position:relative;overflow:hidden;isolation:isolate}

.hx-page .hero-bg{
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:var(--hero-foto,none);
  background-size:cover;
  background-position:72% center;   /* Motiv leicht nach rechts */
  background-repeat:no-repeat;
  color:#5F7285;                    /* Farbe der gezeichneten Skyline */
}

/* Gezeichnete Skyline: nur sichtbar, solange kein Foto gesetzt ist */
.hx-page .hero-art{
  position:absolute;
  right:0;
  bottom:0;
  width:min(1400px,116%);
  height:auto;
  opacity:.5;
}

/* Aufhellung: links kraeftig, nach rechts durchsichtiger,
   damit Ueberschrift und Absatz sicher lesbar bleiben */
.hx-page .hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(96deg,
      var(--paper) 0%,
      var(--paper) 34%,
      rgba(231,233,228,.88) 52%,
      rgba(231,233,228,.62) 74%,
      rgba(231,233,228,.48) 100%),
    linear-gradient(to bottom,
      rgba(231,233,228,.55) 0%,
      rgba(231,233,228,0) 26%,
      rgba(231,233,228,0) 72%,
      var(--paper) 100%);
}

/* Feines Raster auch ueber dem Bild, damit der Bauplan-Charakter bleibt */
.hx-page .hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(17,26,33,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,26,33,.05) 1px, transparent 1px);
  background-size:34px 34px;
}

/* Der Zahlungsplan bekommt etwas Tiefe, damit er sich abhebt */
.hx-page .hero .plan{
  background:rgba(246,247,244,.94);
  backdrop-filter:blur(3px);
  box-shadow:0 18px 44px -28px rgba(17,26,33,.5);
}

/* --- Auf dem Handy --- */
@media(max-width:860px){
  .hx-page .hero-bg{background-position:64% center}
  /* Verlauf von oben nach unten statt von links nach rechts,
     weil der Text dort unter der Ueberschrift steht */
  .hx-page .hero-bg::after{
    background:
      linear-gradient(to bottom,
        rgba(231,233,228,.72) 0%,
        rgba(231,233,228,.90) 34%,
        rgba(231,233,228,.95) 62%,
        var(--paper) 100%);
  }
  .hx-page .hero-art{width:150%;right:-16%;opacity:.42}
}

@media(max-width:640px){
  .hx-page .hero{padding-top:26px}
  .hx-page .hero-art{width:186%;right:-34%;bottom:-2%;opacity:.38}
  .hx-page .hero .plan{backdrop-filter:none;background:var(--paper-lift)}
}

/* ===============================================================
   DUNKLER EINSTIEG MIT FOTO
   Das Bild bleibt sichtbar, darueber liegt ein dunkler Schleier,
   die Schrift wird hell. Passt zu warmen Luftbildern.

   Willst du zurueck zur hellen Fassung: diesen gesamten Block
   loeschen, also alles bis zum Ende des Gestaltungsbereichs.
   =============================================================== */

/* Schleier: links kraeftig, rechts offener, unten Uebergang ins Papier */
.hx-page .hero-bg::after{
  background:
    linear-gradient(94deg,
      rgba(10,16,21,.90) 0%,
      rgba(10,16,21,.80) 30%,
      rgba(10,16,21,.56) 58%,
      rgba(10,16,21,.34) 82%,
      rgba(10,16,21,.26) 100%),
    linear-gradient(to bottom,
      rgba(10,16,21,.52) 0%,
      rgba(10,16,21,.10) 34%,
      rgba(10,16,21,.30) 76%,
      rgba(231,233,228,.55) 94%,
      var(--paper) 100%);
}
.hx-page .hero-bg{background-position:60% center}

/* Raster hell statt dunkel, damit es auf dem Bild sichtbar bleibt */
.hx-page .hero::before{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
}

/* Gezeichnete Skyline heller, falls kein Foto gesetzt ist */
.hx-page .hero-art{color:#8FA3B4;opacity:.30}

/* Schrift auf hell umstellen */
.hx-page .hero .eyebrow{color:#B6C3CC}
.hx-page .hero .eyebrow::after{background:rgba(255,255,255,.28)}
.hx-page .hero h1{color:#F4F6F3;font-size:clamp(33px,4.5vw,58px)}
.hx-page .hero h1 em{color:#A8C0FF}
.hx-page .hero h1 em::after{background:#A8C0FF;opacity:.40}
.hx-page .hero-sub{color:#CFD8DD}
.hx-page .hero-note{color:#95A5B1}

/* Knoepfe: heller Hauptknopf, heller Rahmen beim zweiten */
.hx-page .hero .btn{background:var(--paper-lift);color:var(--ink);border-color:var(--paper-lift)}
.hx-page .hero .btn:hover{background:#fff;border-color:#fff;color:var(--ink)}
.hx-page .hero .btn-ghost{background:transparent;color:#E7E9E4;border-color:rgba(255,255,255,.48)}
.hx-page .hero .btn-ghost:hover{background:rgba(255,255,255,.10);color:#fff;border-color:#fff}

/* Zahlungsplan bleibt hell und hebt sich dadurch klar ab */
.hx-page .hero .plan{
  background:rgba(246,247,244,.97);
  backdrop-filter:none;
  box-shadow:0 34px 80px -34px rgba(0,0,0,.75);
}

/* Etwas weniger Hoehe, damit der Einstieg kompakter wirkt */
.hx-page .hero{padding-top:clamp(44px,6vw,84px);padding-bottom:clamp(44px,6vw,80px)}

@media(max-width:860px){
  .hx-page .hero-bg{background-position:56% center}
  .hx-page .hero-bg::after{
    background:
      linear-gradient(to bottom,
        rgba(10,16,21,.62) 0%,
        rgba(10,16,21,.72) 38%,
        rgba(10,16,21,.80) 66%,
        rgba(231,233,228,.60) 93%,
        var(--paper) 100%);
  }
}

/* ===============================================================
   BILD VOLLSTAENDIG ZEIGEN
   Vorher wurde das Bild formatfuellend beschnitten. Jetzt wird es
   komplett in der Breite dargestellt und sitzt unten auf.
   Darueber bleibt ruhige Flaeche fuer die Ueberschrift.

   ZWEI STELLSCHRAUBEN (in den Zeilen darunter):
     --hero-fit    contain = ganzes Bild sichtbar
                   cover   = formatfuellend, wird beschnitten
     --hero-grund  Farbe der Flaeche ueber dem Bild.
                   An den dunkelsten Ton deines Bildes anpassen.
   =============================================================== */
.hx-page .hero-bg{
  --hero-fit:contain;
  --hero-grund:#101820;
  background-color:var(--hero-grund);
  background-size:var(--hero-fit);
  background-position:center bottom;
  background-repeat:no-repeat;
}

/* Schleier deutlich zurueckgenommen: das Bild ist bereits ruhig,
   es braucht nur oben etwas Halt fuer die Schrift und unten
   den Uebergang ins Papier. */
.hx-page .hero-bg::after{
  background:
    linear-gradient(to bottom,
      rgba(16,24,32,.62) 0%,
      rgba(16,24,32,.30) 30%,
      rgba(16,24,32,.00) 58%,
      rgba(16,24,32,.00) 86%,
      rgba(231,233,228,.45) 96%,
      var(--paper) 100%);
}

/* Mindesthoehe, damit Bild und Text nebeneinander Platz haben */
.hx-page .hero{min-height:min(78vh,720px);display:flex;align-items:center}
.hx-page .hero > .wrap{width:100%}

/* Zahlungsplan etwas kompakter, damit er das Bild weniger verdeckt */
.hx-page .hero .plan{background:rgba(246,247,244,.95)}

@media(max-width:860px){
  /* Am Handy laeuft das Bild als schmales Band unten durch */
  .hx-page .hero{min-height:auto;display:block;padding-bottom:clamp(120px,32vw,220px)}
  .hx-page .hero-bg{background-size:contain;background-position:center bottom}
  .hx-page .hero-bg::after{
    background:
      linear-gradient(to bottom,
        rgba(16,24,32,.55) 0%,
        rgba(16,24,32,.35) 34%,
        rgba(16,24,32,.10) 62%,
        rgba(16,24,32,.00) 84%,
        rgba(231,233,228,.35) 97%,
        var(--paper) 100%);
  }
}

/* ===============================================================
   EINSTIEG FUER EIN HELLES BILD
   Das Hintergrundbild ist eine helle Zeichnung, deshalb dunkle
   Schrift und eine sanfte Aufhellung statt dunklem Schleier.

   STELLSCHRAUBEN:
     --hero-grund   Flaeche um das Bild herum. An den Hintergrund
                    deines Bildes anpassen, dann gibt es keine Kante.
     --hero-fit     contain = ganzes Bild sichtbar
                    cover   = formatfuellend, wird beschnitten
   =============================================================== */
.hx-page .hero-bg{
  --hero-grund:#E9E8E2;
  --hero-fit:contain;
  background-color:var(--hero-grund);
  background-size:var(--hero-fit);
  background-position:center center;
  background-repeat:no-repeat;
}

/* Aufhellung: links kraeftig fuer die Lesbarkeit,
   rechts offen, damit die Zeichnung sichtbar bleibt */
.hx-page .hero-bg::after{
  background:
    linear-gradient(97deg,
      rgba(233,232,226,.95) 0%,
      rgba(233,232,226,.90) 30%,
      rgba(233,232,226,.62) 52%,
      rgba(233,232,226,.28) 74%,
      rgba(233,232,226,.12) 100%),
    linear-gradient(to bottom,
      rgba(233,232,226,.45) 0%,
      rgba(233,232,226,0) 24%,
      rgba(233,232,226,0) 80%,
      rgba(231,233,228,.70) 95%,
      var(--paper) 100%);
}

/* Raster wieder dunkel, passend zum hellen Grund */
.hx-page .hero::before{
  background-image:
    linear-gradient(to right, rgba(17,26,33,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,26,33,.05) 1px, transparent 1px);
}
.hx-page .hero-art{color:#5F7285;opacity:.45}

/* Schrift zurueck auf dunkel */
.hx-page .hero .eyebrow{color:var(--ink-mute)}
.hx-page .hero .eyebrow::after{background:var(--rule)}
.hx-page .hero h1{color:var(--ink)}
.hx-page .hero h1 em{color:var(--blue)}
.hx-page .hero h1 em::after{background:var(--blue);opacity:.28}
.hx-page .hero-sub{color:var(--ink-soft)}
.hx-page .hero-note{color:var(--ink-mute)}

/* Knoepfe zurueck auf dunkel */
.hx-page .hero .btn{background:var(--ink);color:var(--paper-lift);border-color:var(--ink)}
.hx-page .hero .btn:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.hx-page .hero .btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.hx-page .hero .btn-ghost:hover{background:transparent;color:var(--blue);border-color:var(--blue)}

/* Zahlungsplan leicht durchscheinend, damit die Zeichnung
   dahinter nicht komplett verschwindet */
.hx-page .hero .plan{
  background:rgba(246,247,244,.93);
  box-shadow:0 20px 50px -30px rgba(17,26,33,.45);
}

@media(max-width:860px){
  /* Am Handy fuellt das Bild wieder den Hintergrund,
     statt als Streifen nach unten zu rutschen */
  .hx-page .hero{min-height:auto;display:block;padding-bottom:clamp(36px,8vw,64px)}
  .hx-page .hero-bg{
    background-size:cover;
    background-position:center center;
  }
  .hx-page .hero-bg::after{
    background:
      linear-gradient(to bottom,
        rgba(233,232,226,.80) 0%,
        rgba(233,232,226,.88) 40%,
        rgba(233,232,226,.92) 70%,
        rgba(231,233,228,.85) 92%,
        var(--paper) 100%);
  }
}

/* ===============================================================
   BILD ALS SICHTBARES BAND UNTEN
   Das Bild sitzt in voller Breite am unteren Rand des Einstiegs.
   Darueber bleibt der Text auf ruhigem Grund, das Band selbst
   bleibt unangetastet und damit klar erkennbar.

   STELLSCHRAUBEN:
     --hero-breite   100% = Bild genau so breit wie die Seite
                     140% = groesser, Bild wird seitlich beschnitten
     --hero-grund    Farbe der Flaeche ueber dem Band
   =============================================================== */
.hx-page .hero-bg{
  --hero-breite:100%;
  --hero-grund:#EDECE6;
  background-color:var(--hero-grund);
  background-size:var(--hero-breite) auto;
  background-position:center bottom;
  background-repeat:no-repeat;
}

/* Aufhellung nur oben, wo der Text steht.
   Im unteren Drittel voellig durchsichtig, damit das Band wirkt. */
.hx-page .hero-bg::after{
  background:
    linear-gradient(to bottom,
      rgba(237,236,230,.94) 0%,
      rgba(237,236,230,.90) 34%,
      rgba(237,236,230,.72) 52%,
      rgba(237,236,230,.24) 66%,
      rgba(237,236,230,.00) 78%,
      rgba(237,236,230,.00) 100%);
}

/* Platz unten, damit das Band frei liegt und nichts verdeckt */
.hx-page .hero{
  min-height:auto;
  display:block;
  padding-bottom:clamp(150px,20vw,300px);
}

/* Uebergang zum naechsten Abschnitt weich halten */
.hx-page .hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:70px;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(231,233,228,0), var(--paper));
}

/* Zahlungsplan wieder deckend - er liegt jetzt nicht mehr auf dem Bild */
.hx-page .hero .plan{background:var(--paper-lift)}

@media(max-width:860px){
  /* Am Handy das Band vergroessern, sonst waere es ein duenner Strich */
  .hx-page .hero-bg{--hero-breite:210%}
  .hx-page .hero{padding-bottom:clamp(130px,42vw,240px)}
  .hx-page .hero-bg::after{
    background:
      linear-gradient(to bottom,
        rgba(237,236,230,.93) 0%,
        rgba(237,236,230,.92) 40%,
        rgba(237,236,230,.70) 58%,
        rgba(237,236,230,.20) 72%,
        rgba(237,236,230,.00) 84%,
        rgba(237,236,230,.00) 100%);
  }
}

@media(max-width:520px){
  .hx-page .hero-bg{--hero-breite:280%}
  .hx-page .hero{padding-bottom:clamp(120px,48vw,220px)}
}

/* ===============================================================
   BILDBAND IM EINSTIEG
   Das Bild ist ein echtes Bildelement, kein Hintergrund. Es sitzt
   in fester Hoehe am unteren Rand und ist dadurch immer sichtbar,
   am Rechner wie am Handy.

   STELLSCHRAUBEN:
     Hoehe des Bandes   -> --band-hoehe
     Bildausschnitt     -> object-position (center bottom / center)
   =============================================================== */

/* alte Ebene stilllegen */
.hx-page .hero-bg,
.hx-page .hero-art{display:none !important}

.hx-page .hero{
  --band-hoehe:clamp(190px,24vw,330px);
  position:relative;
  overflow:hidden;
  min-height:auto;
  display:block;
  background:var(--paper);
  padding-bottom:calc(var(--band-hoehe) + 26px);
}

.hx-page .hero-band{
  position:absolute;
  left:0; right:0; bottom:0;
  height:var(--band-hoehe);
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}
.hx-page .hero-band img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 62%;
  display:block;
}

/* weicher Uebergang von der Textflaeche ins Bild und vom Bild
   in den naechsten Abschnitt */
.hx-page .hero-band::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:38%;
  background:linear-gradient(to bottom, var(--paper), rgba(231,233,228,0));
}
.hx-page .hero-band::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:22%;
  background:linear-gradient(to bottom, rgba(231,233,228,0), var(--paper));
}

/* Text liegt ueber dem Band */
.hx-page .hero > .wrap{position:relative;z-index:1}

/* Raster nur ueber der Textflaeche, nicht ueber dem Bild */
.hx-page .hero::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  bottom:var(--band-hoehe);
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(17,26,33,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,26,33,.05) 1px, transparent 1px);
  background-size:34px 34px;
}
.hx-page .hero::after{display:none}

/* Zahlungsplan deckend */
.hx-page .hero .plan{background:var(--paper-lift);box-shadow:0 18px 44px -30px rgba(17,26,33,.4)}

@media(max-width:860px){
  .hx-page .hero{--band-hoehe:clamp(150px,34vw,260px)}
  .hx-page .hero-band img{object-position:center 60%}
}
@media(max-width:520px){
  .hx-page .hero{--band-hoehe:clamp(130px,40vw,210px)}
}

/* ===============================================================
   BILDBAND IM EINSTIEG - vollstaendig sichtbar
   Das Bild steht im normalen Fluss unter dem Text und wird in
   voller Breite und ganzer Hoehe gezeigt. Nichts wird beschnitten,
   am Rechner wie am Handy.
   =============================================================== */
.hx-page .hero{
  position:relative;
  overflow:hidden;
  min-height:auto;
  display:block;
  background:var(--paper);
  padding-bottom:0;
}

.hx-page .hero-band{
  position:relative;
  z-index:0;
  margin-top:clamp(26px,4vw,52px);
  line-height:0;
}
.hx-page .hero-band img{
  width:100%;
  height:auto;
  display:block;
}
/* weicher Anschluss nach oben und unten */
.hx-page .hero-band::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:26%;
  background:linear-gradient(to bottom, var(--paper), rgba(231,233,228,0));
  pointer-events:none;
}
.hx-page .hero-band::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:14%;
  background:linear-gradient(to bottom, rgba(231,233,228,0), var(--paper));
  pointer-events:none;
}

.hx-page .hero > .wrap{position:relative;z-index:1}

/* Raster nur hinter dem Text */
.hx-page .hero::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0; height:100%;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(17,26,33,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,26,33,.05) 1px, transparent 1px);
  background-size:34px 34px;
}
.hx-page .hero::after{display:none}
.hx-page .hero .plan{background:var(--paper-lift);box-shadow:0 18px 44px -30px rgba(17,26,33,.4)}

/* ===============================================================
   BILDBAND - unten verankert, oben ausgeblendet
   Die Skyline sitzt genau auf der Kante zum naechsten Abschnitt.
   Der obere Bildbereich wird weich ins Papier ausgeblendet,
   damit ein andersfarbiger Himmel im Bild nicht stoert.

   STELLSCHRAUBEN:
     --band-hoehe   Hoehe des sichtbaren Bandes
     --band-blende  Wie weit von oben ausgeblendet wird (Prozent)
   =============================================================== */
.hx-page .hero{
  --band-hoehe:clamp(210px,26vw,360px);
  --band-blende:62%;
}

.hx-page .hero-band{
  position:relative;
  z-index:0;
  margin-top:clamp(20px,3vw,40px);
  height:var(--band-hoehe);
  overflow:hidden;
  line-height:0;
}

.hx-page .hero-band img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;   /* Skyline sitzt unten auf */
  display:block;
  /* obere Bildhaelfte weich ausblenden */
  -webkit-mask-image:linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.35) 26%,
      rgba(0,0,0,.85) 48%,
      rgba(0,0,0,1) var(--band-blende),
      rgba(0,0,0,1) 100%);
  mask-image:linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.35) 26%,
      rgba(0,0,0,.85) 48%,
      rgba(0,0,0,1) var(--band-blende),
      rgba(0,0,0,1) 100%);
}

/* Verlaeufe von vorher nicht mehr noetig */
.hx-page .hero-band::before,
.hx-page .hero-band::after{display:none}

@media(max-width:860px){
  .hx-page .hero{--band-hoehe:clamp(150px,32vw,260px);--band-blende:58%}
}
@media(max-width:520px){
  .hx-page .hero{--band-hoehe:clamp(120px,36vw,200px)}
}


/* Einstieg ohne Bild: normaler Abstand nach unten */
.hx-page .hero{padding-bottom:clamp(48px,6vw,88px);overflow:visible}