:root{
  --ink:#031216;
  --ink-2:#121315;
  --teal:#1A8DAD;
  --teal-d:#0E576A;
  --cream:#FFFEFA;
  --tint:rgba(3,18,22,.05);
  --tint-solid:#f3f5f5;
  --line:rgba(3,18,22,.14);
  --muted:#5c6b70;
  --shadow:0 19px 38px rgba(0,0,0,.16);
  --pad:clamp(64px,7.5vw,110px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:Roboto,Helvetica,Arial,sans-serif; font-size:19.2px; font-weight:400; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h6{font-family:Niramit,Helvetica,Arial,sans-serif; margin:0; line-height:1.2}
h1{font-weight:900; font-size:clamp(2.5rem,5.2vw,4.3rem)}
h2{font-weight:600; font-size:clamp(1.9rem,3.6vw,3.375rem)}
h3{font-weight:600; font-size:clamp(1.5rem,2.4vw,2rem)}
h4{font-weight:700; font-size:1.4rem; text-transform:uppercase}
h6{font-weight:600; font-size:1.0125rem; letter-spacing:1px; text-transform:uppercase; color:var(--teal-d); margin:0}
p{margin:0}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{width:min(1180px,92vw); margin-inline:auto}
.sec{padding-block:var(--pad)}
.sec.tinted{background:var(--tint)}
section[id]{scroll-margin-top:90px}
.lead{font-size:1rem; color:var(--ink); line-height:1.65}
.center{text-align:center}
.center .lead{max-width:60ch; margin-inline:auto}
.sec-head{margin-bottom:clamp(2.4rem,4vw,3.6rem)}
.sec-head h2{margin-bottom:.9rem}
.sec-head.center h2{max-width:22ch; margin-inline:auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; text-decoration:none; cursor:pointer; border:.8px solid transparent; font-family:Roboto,sans-serif; transition:background .16s ease, color .16s ease, border-color .16s ease}
.btn-dark{background:var(--ink); color:#fff; border-color:var(--ink); border-radius:300px; font-size:1rem; font-weight:400; line-height:1; padding:25px 50px}
.btn-dark:hover{background:#0d3038; border-color:#0d3038}
.btn-light{background:var(--cream); color:var(--ink); border-color:var(--line); border-radius:300px; font-size:1rem; font-weight:400; line-height:1; padding:25px 50px}
.btn-light:hover{border-color:var(--ink)}
.btn-teal{background:var(--teal); color:#fff; border:1.6px solid var(--teal); border-radius:5px; font-size:.75rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; line-height:1; padding:18px 36px}
.btn-teal:hover{background:var(--teal-d); border-color:var(--teal-d)}
.btn-teal.wide{width:100%}
.btn-nav{background:var(--teal); color:#fff; border-color:var(--teal); border-radius:5px; font-size:.7rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; line-height:1; padding:13px 22px}
.btn-nav:hover{background:var(--teal-d); border-color:var(--teal-d)}

/* ---------- header ---------- */
header{position:sticky; top:0; z-index:60; background:#fff; border-bottom:.8px solid var(--line)}
.nav{display:flex; align-items:center; gap:1.6rem; height:82px}
.nav .logo img{height:42px}
.nav ul{display:flex; gap:2rem; list-style:none; margin:0 auto 0 2.5rem; padding:0}
.nav a{text-decoration:none; font-size:.9rem; font-weight:400; color:var(--ink)}
.nav ul a:hover{color:var(--teal)}
.burger{display:none; background:none; border:0; padding:.3rem; cursor:pointer; color:var(--ink)}
.burger svg{width:26px; height:26px}
@media(max-width:1180px){
  .nav .logo img{height:34px}
  .nav ul{gap:1.5rem; margin-left:1.8rem}
}
@media(max-width:1100px){
  .nav .logo img{height:38px}
  .nav ul{display:none; position:absolute; top:82px; left:0; right:0; background:#fff; flex-direction:column; gap:0; padding:.4rem 4vw 1.2rem; border-bottom:.8px solid var(--line)}
  .nav ul.open{display:flex}
  .nav ul li a{display:block; padding:.9rem 0; border-bottom:.8px solid var(--line)}
  .nav .logo{margin-right:auto}
  .burger{display:block; order:3}
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(48px,6vw,80px)}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(2.5rem,5vw,5rem); row-gap:0; align-items:center; min-height:640px}
.hero h1{max-width:14ch}
.hero .lead{margin-top:1.6rem; max-width:46ch}
.hero-cta{display:flex; flex-direction:column; align-items:flex-start; gap:.9rem; margin-top:2.4rem}
.hero-note{margin-top:1.8rem; font-size:.86rem; color:var(--muted); max-width:44ch}
.hero-img-wrap{position:relative; background:var(--tint-solid); border-radius:6px; padding:clamp(1.2rem,3vw,2.4rem); display:flex; align-items:center; justify-content:center; min-height:480px}
.hero-img{width:100%; max-height:680px; object-fit:contain}
.hero-head{grid-column:1; grid-row:1}
.hero-leadprice{grid-column:1; grid-row:2}
.hero-head ~ .hero-cta{grid-column:1; grid-row:3}
.hero-head ~ .hero-note{grid-column:1; grid-row:4}
.hero-head ~ .hero-img-wrap{grid-column:2; grid-row:1/5}
/* Desktop: Bild um ~30% breiter, Textspalte entsprechend schmaler, alles ohne Scrollen sichtbar */
@media(min-width:981px){
  .hero{padding-top:clamp(6px,1vw,14px); padding-bottom:clamp(16px,2.4vw,32px)}
  .hero-grid{grid-template-columns:.8fr 1fr; width:min(1320px,94vw); min-height:0}
  .hero-img{max-height:min(460px,52vh)}
  .hero-img-wrap{min-height:0; padding:clamp(.8rem,1.6vw,1.3rem)}
  .hero h1{font-size:clamp(2.2rem,3.9vw,3.4rem)}
  .hero .lead{margin-top:.8rem}
  .hero-cta{margin-top:1.1rem}
  .hero-note{margin-top:.8rem}
}
@media(max-width:980px){
  .hero{padding-top:14px; padding-bottom:clamp(32px,6vw,48px)}
  .hero-grid{grid-template-columns:1fr; min-height:0; gap:2rem}
  .hero h1{max-width:none}
  .hero-cta{flex-direction:row; flex-wrap:wrap}
  .hero-img-wrap{min-height:0}
  .hero-img{max-height:440px}
  .hero-head{grid-column:1; grid-row:auto; order:1}
  .hero-head ~ .hero-img-wrap{grid-column:1; grid-row:auto; order:2}
  .hero-leadprice{grid-column:1; grid-row:auto; order:3}
  .hero-head ~ .hero-cta{grid-column:1; grid-row:auto; order:4; margin-top:1.4rem}
  .hero-head ~ .hero-note{grid-column:1; grid-row:auto; order:5}
}
@media(max-width:560px){
  .hero-cta{flex-direction:column; align-items:stretch}
  .btn-dark,.btn-light{padding:20px 32px; font-size:.95rem}
  .btn-nav{padding:11px 16px; font-size:.62rem; white-space:nowrap}
  .nav{gap:.7rem}
  .nav .logo img{height:30px}
}

/* ---------- quiz als modal ---------- */
.quiz-modal{display:none; position:fixed; inset:0; z-index:1000; padding:1.5rem; align-items:center; justify-content:center}
.quiz-modal.open{display:flex}
.quiz-modal-backdrop{position:absolute; inset:0; background:rgba(3,18,22,.62)}
.quiz-modal-panel{position:relative; width:100%; max-width:640px; max-height:90vh; overflow-y:auto; z-index:1}
.quiz-modal-close{position:absolute; top:-14px; right:-14px; z-index:2; width:36px; height:36px; border-radius:50%; border:0; background:var(--ink); color:#fff; font-size:1.4rem; line-height:1; cursor:pointer; display:grid; place-items:center}
.quiz-modal-close:hover{background:var(--teal-d)}
body.modal-open{overflow:hidden}
@media(max-width:520px){ .quiz-modal-panel{max-height:94vh} .quiz-modal-close{top:-10px; right:2px} }

/* ---------- quiz ---------- */
.quiz{background:var(--cream); border-radius:6px; box-shadow:var(--shadow); padding:clamp(1.9rem,3vw,2.4rem)}
.quiz-top{display:flex; align-items:baseline; justify-content:space-between; gap:1rem}
.quiz-count{font-family:Niramit,sans-serif; font-size:.8rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.rail{height:2px; background:var(--line); margin:.9rem 0 1.8rem}
.rail i{display:block; height:100%; width:25%; background:var(--teal); transition:width .4s ease}
.quiz h3{margin-bottom:.6rem}
.quiz .hint{font-size:.9rem; color:var(--muted); line-height:1.55}
.opts{display:grid; gap:.55rem; margin-top:1.6rem}
.opt{
  display:block; width:100%; text-align:left; cursor:pointer;
  font-family:Roboto,sans-serif; font-size:.98rem; color:var(--ink);
  background:#fff; border:.8px solid var(--line); border-radius:0;
  padding:15px 18px; transition:border-color .14s ease, color .14s ease;
}
.opt:hover{border-color:var(--teal); color:var(--teal-d)}
.quiz-foot{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.6rem; font-size:.78rem; color:var(--muted)}
.back{background:none; border:0; padding:0; font-family:Roboto,sans-serif; font-size:.78rem; color:var(--muted); cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.back:hover{color:var(--ink)}
.q-panel{display:none}
.q-panel.on{display:block}
.field{margin-top:.9rem}
.field label{display:block; font-family:Roboto,sans-serif; font-size:.8rem; color:var(--ink); margin-bottom:.35rem}
.field input,.field textarea{
  width:100%; font-family:Roboto,sans-serif; font-size:.875rem; color:var(--ink);
  background:var(--cream); border:.8px solid var(--ink); border-radius:0; padding:10px;
}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field textarea:focus{outline:0; border-color:var(--teal); background:#fff}
.two{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
@media(max-width:480px){ .two{grid-template-columns:1fr} }
.consent{display:flex; gap:.6rem; align-items:flex-start; margin:1.3rem 0 1.4rem; font-size:.76rem; line-height:1.5; color:var(--muted)}
.consent input{margin-top:.15rem; accent-color:var(--teal); width:15px; height:15px; flex:none}
.thanks{padding:1rem 0 .4rem}
.thanks h3{margin-bottom:.8rem}

/* ---------- produktband ---------- */
.shot{height:clamp(260px,34vw,440px); width:100%; object-fit:cover; border-radius:6px}

/* ---------- karten ---------- */
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:1.9rem}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.9rem}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1.9rem}
@media(max-width:1000px){ .grid-4{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:1fr} }
@media(max-width:700px){ .grid-4,.grid-2{grid-template-columns:1fr} }
.card{background:var(--cream); box-shadow:var(--shadow); padding:30px}
.card.mid{text-align:center}
.card.mid h4{margin:1.3rem 0 .9rem}
.card p{font-size:.9rem; line-height:1.6; color:var(--ink)}
.card .ico{color:var(--ink); display:inline-block}
.card .ico svg{width:38px; height:38px}
.card .step{font-family:Niramit,sans-serif; font-size:.8rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--teal-d)}
.card.mid h4 + p{margin-top:0}

/* ---------- branchen (ohne karte, wie im original) ---------- */
.branche{display:flex; flex-direction:column}
.branche .ico{color:var(--teal); margin-bottom:1.6rem; display:block}
.branche .ico svg{width:42px; height:42px}
.branche p{font-size:.9rem; line-height:1.6}
.branche .claim{font-weight:700; margin-top:.9rem; font-size:.9rem}
.branche h6{margin-top:auto; padding-top:1.2rem}

/* ---------- referenzen ---------- */
.ref-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:1.4rem}
.ref-grid div{background:var(--cream); box-shadow:var(--shadow); padding:18px; display:grid; place-items:center; min-height:104px}
.ref-grid img{max-height:64px; width:auto; object-fit:contain}
@media(max-width:900px){ .ref-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:520px){ .ref-grid{grid-template-columns:repeat(2,1fr)} }

/* ---------- ansprechpartner ---------- */
.split{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,4.5vw,4rem); align-items:center}
.split img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:6px}
/* Portraitfotos: Hochformat halten und Gesicht sicher im Bild lassen */
.split img.portrait{aspect-ratio:4/5; object-position:center 18%}
@media(max-width:860px){ .split{grid-template-columns:1fr} .split img{aspect-ratio:4/3} .split img.portrait{aspect-ratio:4/5; max-height:520px; width:auto; margin-inline:auto} }
.checks{list-style:none; margin:2rem 0 0; padding:0}
.checks li{position:relative; padding-left:2rem; margin-top:1rem; font-size:.95rem; line-height:1.6}
.checks svg{position:absolute; left:0; top:.25em; width:18px; height:18px; color:var(--teal)}
.contactline{margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:1rem}

/* ---------- faq ---------- */
.faq-card{background:var(--cream); box-shadow:var(--shadow); padding:30px}
.faq-card .q{display:flex; gap:.8rem; align-items:flex-start; font-family:Niramit,sans-serif; font-weight:700; font-size:1.05rem; line-height:1.35}
.faq-card .q svg{width:20px; height:20px; flex:none; color:var(--teal); margin-top:.1em}
.faq-card p{margin-top:1rem; font-size:.9rem; line-height:1.65}

/* ---------- cta-band ---------- */
.band{background:var(--cream); box-shadow:var(--shadow); padding:clamp(1.8rem,3.5vw,2.6rem); display:flex; flex-wrap:wrap; align-items:center; gap:2rem; justify-content:space-between}
.band h3{margin-bottom:.6rem}
.band p{font-size:.92rem; max-width:52ch; color:var(--muted)}

/* ---------- kontakt ---------- */
.kontakt{display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--cream); box-shadow:var(--shadow)}
.kontakt img{width:100%; height:100%; min-height:420px; object-fit:cover}
.kontakt .form{padding:clamp(1.8rem,3.5vw,2.6rem)}
.kontakt h3{margin-bottom:1.2rem}
@media(max-width:800px){ .kontakt{grid-template-columns:1fr} .kontakt img{min-height:260px} }

/* ---------- footer ---------- */
footer{border-top:.8px solid var(--line); padding-block:clamp(40px,5vw,64px); font-size:.85rem; line-height:1.7}
.f-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:2.5rem; align-items:start}
@media(max-width:760px){ .f-grid{grid-template-columns:1fr; gap:2rem} }
footer .flogo{height:40px}
footer h6{margin-bottom:.9rem; font-size:.8rem}
footer ul{list-style:none; margin:0; padding:0}
footer a{text-decoration:none}
footer a:hover{color:var(--teal)}
.f-bottom{margin-top:2.6rem; padding-top:1.4rem; border-top:.8px solid var(--line); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.8rem; color:var(--muted)}

/* ---------- branchenseiten ---------- */
.feature-list{display:grid; grid-template-columns:repeat(2,1fr); gap:0 3rem}
@media(max-width:760px){ .feature-list{grid-template-columns:1fr} }
.feature-list .item{padding:1.5rem 0; border-bottom:.8px solid var(--line)}
.feature-list h4{font-size:1.05rem; margin-bottom:.5rem}
.feature-list p{font-size:.9rem; line-height:1.6; color:var(--muted)}
.taglist{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem}
.taglist span{font-family:Roboto,sans-serif; font-size:.85rem; padding:.55rem 1.1rem; border:.8px solid var(--line); background:var(--cream)}
.factrow{display:grid; grid-template-columns:repeat(4,1fr); gap:1.9rem}
@media(max-width:860px){ .factrow{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .factrow{grid-template-columns:1fr} }
.factrow .fact{background:var(--cream); box-shadow:var(--shadow); padding:26px; text-align:center}
.factrow .fact strong{display:block; font-family:Niramit,sans-serif; font-weight:700; font-size:1.05rem; text-transform:uppercase; line-height:1.25}
.factrow .fact p{margin-top:.7rem; font-size:.85rem; line-height:1.6; color:var(--muted)}
.crumb{font-family:Roboto,sans-serif; font-size:.82rem; color:var(--muted); margin-bottom:1.4rem}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--teal)}

/* ---------- logo-laufband ---------- */
.marquee-sec{background:var(--tint-solid); padding-block:clamp(40px,5vw,64px); overflow:hidden}
.marquee-sec .wrap{margin-bottom:1.9rem}
.marquee{position:relative; overflow:hidden}
.marquee::before,.marquee::after{content:""; position:absolute; top:0; bottom:0; width:clamp(40px,8vw,120px); z-index:2; pointer-events:none}
.marquee::before{left:0; background:linear-gradient(90deg,var(--tint-solid),rgba(243,245,245,0))}
.marquee::after{right:0; background:linear-gradient(270deg,var(--tint-solid),rgba(243,245,245,0))}
.marquee-track{display:flex; width:max-content; animation:marquee 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-row{display:flex; gap:1.4rem; padding-right:1.4rem}
.marquee-item{flex:none; width:200px; height:106px; background:var(--cream); box-shadow:var(--shadow); display:grid; place-items:center; padding:16px}
.marquee-item img{max-height:62px; width:auto; object-fit:contain}
.pm-item{color:var(--ink)}
.pm-item svg,.pm-item img{display:block}
.pm-payjet{width:150px; height:auto}
.pm-orderman{width:150px; height:auto}
.pm-mergeport{width:130px; height:auto}
.pm-item .pm-partnertech{width:140px; height:auto; max-height:none}  /* hoehere Spezifitaet als .marquee-item img{width:auto} */
.pm-lockup{display:inline-flex; align-items:center; gap:.6rem}
.pm-badge{width:32px; height:32px; flex:none; border-radius:7px; background:#001A72; display:grid; place-items:center}
.pm-badge svg{width:19px; height:auto}
.pm-word{font-family:Niramit,Helvetica,Arial,sans-serif; font-weight:700; font-size:1.18rem; letter-spacing:-.01em; color:#001A72}
@keyframes marquee{ from{transform:translateX(-50%)} to{transform:translateX(0)} }
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .marquee{overflow-x:auto}
  .marquee::before,.marquee::after{display:none}
}

/* ---------- problemstellung ---------- */
.problems{display:grid; grid-template-columns:repeat(2,1fr); gap:0 3.5rem}
@media(max-width:800px){ .problems{grid-template-columns:1fr} }
.problems .item{padding:1.8rem 0; border-bottom:.8px solid var(--line)}
.problems .no{font-family:Niramit,sans-serif; font-size:.78rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--teal-d)}
.problems h4{font-size:1.12rem; margin:.55rem 0 .6rem; text-transform:none}
.problems p{font-size:.92rem; line-height:1.65; color:var(--muted)}
.jumpline{margin-top:2.6rem; font-size:.95rem}
.jumpline a{color:var(--teal-d); font-weight:500}

/* ---------- kapitelmarken ---------- */
.chapter{
  display:flex; align-items:center; gap:.75rem; margin:0 0 1.1rem;
  font-family:Niramit,Helvetica,Arial,sans-serif; font-size:.82rem; font-weight:600;
  letter-spacing:1px; text-transform:uppercase; color:var(--teal-d);
}
.chapter .n{color:var(--teal)}
.chapter::after{content:""; flex:1; height:.8px; background:var(--line); max-width:140px}
.sec-head .lead{max-width:56ch}

/* ---------- produktabschnitt "Die Kasse" ---------- */
/* "Die Kasse": drei Rasterkinder (Text, Bild, CTA-Zeile) - explizit platzieren,
   sonst rutscht das Bild unter die CTA-Zeile in die erste Spalte. */
.split.flip{grid-template-columns:1.1fr .9fr; align-items:center; row-gap:0}
.split.flip img{aspect-ratio:1/1; object-fit:contain; grid-column:2; grid-row:1 / 3}
.split.flip .kasse-intro{grid-column:1; grid-row:1}
.split.flip .kasse-details{grid-column:1; grid-row:2}
.split.flip > .cta-row{grid-column:1 / -1; grid-row:3}
@media(max-width:860px){
  /* Mobil: Einleitung -> Bild -> Aufzaehlung -> CTA */
  .split.flip{grid-template-columns:1fr; row-gap:2rem}
  .split.flip .kasse-intro{grid-column:1; grid-row:auto; order:1}
  .split.flip img{grid-column:1; grid-row:auto; order:2}
  .split.flip .kasse-details{grid-column:1; grid-row:auto; order:3}
  .split.flip > .cta-row{grid-column:1; grid-row:auto; order:4}
}
.split .note{margin-top:1.6rem; font-size:.86rem; color:var(--muted)}
.src-note{margin-top:.9rem; font-size:.82rem; color:var(--muted)}
picture{display:contents}
.spec-list{list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:0 3rem; margin-top:2.4rem; font-family:Roboto,sans-serif; font-size:.9rem}
.spec-list li{display:flex; justify-content:space-between; gap:1.5rem; padding:.7rem 0; border-bottom:.8px solid var(--line)}
.spec-list b{font-weight:500; color:var(--ink)}
.spec-list span{color:var(--muted); text-align:right}
@media(max-width:760px){ .spec-list{grid-template-columns:1fr; gap:0} }
.hero-sub{font-family:Niramit,sans-serif; font-weight:600; font-size:clamp(1.05rem,1.8vw,1.3rem); color:var(--teal-d); margin-top:.7rem}
.src-note a{color:var(--teal-d)}
footer{scroll-margin-top:90px}

/* ---------- abschluss-cta je block ---------- */
.cta-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem;
  margin-top:clamp(2.4rem,4vw,3.4rem); padding-top:1.8rem;
  border-top:.8px solid var(--line);
}
.cta-row p{font-size:.9rem; line-height:1.6; color:var(--muted); max-width:46ch}
.cta-row a:not(.btn){color:var(--teal-d); font-weight:500}
.split > .cta-row{grid-column:1/-1}
@media(max-width:560px){
  .cta-row{gap:.9rem}
  .cta-row .btn{width:100%; justify-content:center}
}

/* ---------- preise ---------- */
.price-keywords{font-family:Niramit,sans-serif; font-weight:600; font-size:.85rem; letter-spacing:.06em; color:var(--muted); margin:.9rem 0 0}
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.6rem}
.price-grid.two{grid-template-columns:repeat(2,1fr); max-width:760px}
@media(max-width:900px){ .price-grid{grid-template-columns:1fr} .price-grid.two{grid-template-columns:1fr; max-width:none} }
.price-card{background:var(--cream); box-shadow:var(--shadow); padding:2rem 1.9rem; display:flex; flex-direction:column}
.price-card .tag{font-family:Niramit,sans-serif; font-weight:600; font-size:.78rem; letter-spacing:1px; text-transform:uppercase; color:var(--teal-d)}
.price-card .badge{display:inline-block; margin-left:.6rem; font-family:Roboto,sans-serif; font-weight:600; font-size:.68rem; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); border:.8px solid var(--line); border-radius:300px; padding:.2rem .65rem; vertical-align:middle}
.price-card h4{margin-top:.7rem; font-size:1.22rem; text-transform:none}
.price-card .price{margin-top:1.4rem; font-family:Niramit,sans-serif; font-weight:700; font-size:2.05rem; line-height:1; color:var(--ink)}
.price-card .price small{display:block; margin-top:.35rem; font-family:Roboto,sans-serif; font-weight:400; font-size:.85rem; color:var(--muted)}
.price-card .price-alt{margin-top:.6rem; font-size:.83rem; color:var(--muted); line-height:1.5}
.price-card .desc{margin-top:1.1rem; font-size:.92rem; line-height:1.6; color:var(--muted); flex:1}
.price-card .checks{margin-top:1.2rem}

/* ---------- dynamik: tiefe, bewegung, dezente markenmotive ---------- */

/* Kartenhover: sanftes Anheben statt starrer Flaeche */
.card,.price-card,.faq-card{transition:transform .22s ease, box-shadow .22s ease}
.card:hover,.price-card:hover,.faq-card:hover{transform:translateY(-5px); box-shadow:0 30px 56px -22px rgba(3,18,22,.32)}
.branch .card:hover{box-shadow:none}

/* Hauptprodukt in der Preisuebersicht dezent hervorheben */
.price-card:first-child{border-top:3px solid var(--teal)}

/* Scroll-Reveal: nur aktiv, wenn Skript die Klasse setzt (progressive enhancement) */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.in-view{opacity:1; transform:none}
.grid-4 > *.reveal:nth-child(2),.grid-3 > *.reveal:nth-child(2),.price-grid > *.reveal:nth-child(2){transition-delay:.08s}
.grid-4 > *.reveal:nth-child(3),.grid-3 > *.reveal:nth-child(3),.price-grid > *.reveal:nth-child(3){transition-delay:.16s}
.grid-4 > *.reveal:nth-child(4){transition-delay:.24s}

/* Hero: abstrahiertes Pfeilmotiv als sehr leises Hintergrundelement, an die Logomarke angelehnt */
.hero{position:relative; overflow:hidden}
.hero::before{
  content:""; position:absolute; top:-56px; right:-70px; width:300px; aspect-ratio:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpath d='M40 360 L200 200 L40 40' stroke='%231A8DAD' stroke-width='16' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M190 360 L350 200 L190 40' stroke='%231A8DAD' stroke-width='16' fill='none' stroke-linecap='round' stroke-linejoin='round' opacity='.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:contain;
  opacity:.09; pointer-events:none; z-index:0;
}
@media(max-width:760px){ .hero::before{display:none} }
.hero-grid{position:relative; z-index:1}

/* Partnerband: dasselbe Motiv gespiegelt, verbindet die Sektion optisch mit dem Hero */
.marquee-sec{position:relative}
.marquee-sec::before{
  content:""; position:absolute; top:-22%; left:-9%; width:300px; aspect-ratio:1; transform:rotate(180deg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpath d='M40 360 L200 200 L40 40' stroke='%231A8DAD' stroke-width='20' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:contain;
  opacity:.06; pointer-events:none;
}
.marquee-sec > .wrap,.marquee-sec > .marquee{position:relative; z-index:1}

/* Nummerierte Abschnitte: die Kapitelziffer taucht gross und sehr leise im Hintergrund wieder auf */
.sec[data-num]{position:relative; overflow:hidden}
.sec[data-num]::before{
  content:attr(data-num);
  position:absolute; top:-.08em; right:clamp(-.5rem,1.6vw,1.4rem);
  font-family:Niramit,sans-serif; font-weight:700; font-size:clamp(7rem,16vw,15rem);
  line-height:1; color:var(--ink); opacity:.035; pointer-events:none; z-index:0; user-select:none;
}
.sec[data-num] > .wrap{position:relative; z-index:1}

@media(prefers-reduced-motion:reduce){
  .card,.price-card,.faq-card{transition:none}
  .reveal{opacity:1; transform:none; transition:none}
}

/* ---------- positionierung: drei-saeulen-abschnitt ---------- */
.pill-tag{font-family:Niramit,sans-serif; font-weight:600; font-size:.78rem; letter-spacing:1px; text-transform:uppercase; color:var(--teal-d); margin-top:1rem}
.pill-tag + h4{margin-top:.4rem}

/* ---------- hero-preis ---------- */
.hero-price{margin-top:1.7rem}
.hero-price .num{display:block; font-family:Niramit,sans-serif; font-weight:700; font-size:clamp(2.1rem,4.2vw,3rem); line-height:1; color:var(--ink)}
.hero-price .num small{font-family:Roboto,sans-serif; font-weight:400; font-size:1rem; color:var(--muted); margin-left:.4rem}
.hero-price .alt{display:block; margin-top:.55rem; font-size:.86rem; color:var(--muted); max-width:40ch; line-height:1.5}
@media(max-width:560px){ .hero-price{margin-top:1.3rem} }