/* ==========================================================================
   innBuild Landingpage
   Design: technische Bauzeichnung — Papier, Raster, Maßketten
   ========================================================================== */

:root{
  /* Die Seite bringt eine eigene dunkle Fassung mit (siehe ganz unten).
     Damit bestimmt sie selbst, wie sie im Dunkelmodus aussieht, statt
     sich von Browsern oder Erweiterungen automatisch umfärben zu lassen —
     dabei bleiben nämlich die Schriftfarben stehen und Navy landet auf
     Schwarz. */
  color-scheme: light;

  /* Markenfarben, ausgelesen aus der Logodatei:
     Petrolblau #0582AF und Navy #082137.

     Das Logo-Blau selbst erreicht auf hellem Grund nur ein
     Kontrastverhältnis von 4,18:1 und liegt damit knapp unter dem
     Mindestwert 4,5:1 nach WCAG AA. Es bleibt deshalb den grafischen
     Elementen vorbehalten (Häkchen, Bildmarke, Linien), während Text
     und Schaltflächen die etwas dunklere Variante nutzen — optisch
     kaum unterscheidbar, aber sauber lesbar. */
  --brand:#0582AF;        /* Logo-Blau — nur grafisch */
  --blue:#04688C;         /* Text und Schaltflächen, 5,98:1 */
  --blue-dark:#035571;    /* Zustand beim Überfahren */
  --blue-light:#6FC3E4;   /* Akzent auf dunklem Grund, 8,26:1 */

  --ink:#082137;          /* Logo-Navy — Text, dunkle Flächen */
  --ink-2:#16324B;        /* Trennlinien innerhalb dunkler Flächen */
  --ink-text:#A9BBC9;     /* Fließtext auf dunklem Grund, 7,4:1 */

  --paper:#FBFAF8;        /* warmes Zeichenpapier */
  --paper-2:#F1F2F1;
  --grid:#DCE3E8;         /* Bauplan-Linien */
  --rule:#C3CFD8;
  --grey:#55606E;         /* Fließtext, 6,13:1 */
  --yellow:#FFC400;       /* Baustellen-Gelb, sehr sparsam */
  --white:#FFFFFF;
  --ok:#12855B;
  --err:#C02626;

  --shadow:0 1px 2px rgba(8,33,55,.07), 0 8px 24px -12px rgba(8,33,55,.20);
  --shadow-lg:0 2px 4px rgba(8,33,55,.07), 0 24px 48px -20px rgba(8,33,55,.30);

  --display:'Archivo', system-ui, sans-serif;
  --body:'Public Sans', system-ui, sans-serif;
  --mono:'Roboto Mono', ui-monospace, monospace;

  --wrap:1180px;
  --gut:clamp(20px, 5vw, 48px);
}

*,*::before,*::after{box-sizing:border-box}

/* --- Barrierefreiheit: Skip-Link ------------------------------------------
   Im normalen Seitenaufruf unsichtbar. Er wird nur eingeblendet, wenn ein
   Tastaturnutzer ihn mit Tab fokussiert. */
.skip{
  position:fixed;
  left:16px;
  top:16px;
  z-index:1000;
  transform:translateY(-160%);
  padding:12px 16px;
  border-radius:8px;
  background:var(--ink);
  color:#fff;
  font-family:var(--body);
  font-size:.92rem;
  font-weight:700;
  text-decoration:none;
  box-shadow:var(--shadow);
  transition:transform .15s ease;
}
.skip:focus,.skip:focus-visible{
  transform:translateY(0);
  outline:3px solid var(--yellow);
  outline-offset:3px;
}
main:focus{outline:none}

/* --- Typografie ---------------------------------------------------------- */

h1,h2,h3,h4{font-family:var(--display); font-weight:800; letter-spacing:-.03em; line-height:1.04; margin:0}
h1{font-size:clamp(2.9rem, 7.5vw, 5.1rem)}
h2{font-size:clamp(2rem, 4.4vw, 3.1rem); line-height:1.06}
h3{font-size:1.25rem; letter-spacing:-.02em; line-height:1.25}
p{margin:0 0 1.1em}
.lede{font-size:clamp(1.05rem,1.9vw,1.24rem); color:var(--grey); line-height:1.62; max-width:56ch}

.eyebrow{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue);
  display:flex; align-items:center; gap:10px; margin:0 0 18px;
}
.eyebrow::before{content:''; width:26px; height:2px; background:var(--blue); flex:none}

.section{padding-block:clamp(72px,10vw,124px); position:relative}
.section--tint{background:var(--paper-2)}
.section--ink{background:var(--ink); color:var(--white)}
.section--ink h2, .section--ink h3{color:var(--white)}
.section--ink .lede{color:var(--ink-text)}
.section--ink .eyebrow{color:var(--blue-light)}
.section--ink .eyebrow::before{background:var(--blue-light)}
.section-head{max-width:64ch; margin-bottom:clamp(40px,5vw,60px)}

/* --- Maßkette (Signature-Element) ---------------------------------------- */

.dim{
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grey); margin:0 0 14px;
}
.dim__line{
  flex:1 1 auto; height:9px; position:relative; min-width:36px;
  border-left:1px solid var(--rule); border-right:1px solid var(--rule);
}
.dim__line::after{
  content:''; position:absolute; left:0; right:0; top:50%;
  border-top:1px solid var(--rule);
}
.section--ink .dim{color:#8FA2B2}
.section--ink .dim__line{border-color:var(--ink-2)}
.section--ink .dim__line::after{border-color:var(--ink-2)}

/* --- Buttons ------------------------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--display); font-weight:700; font-size:.98rem; letter-spacing:-.01em;
  padding:15px 26px; border-radius:3px; border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; transition:background .18s, color .18s, border-color .18s, transform .12s;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--blue); color:#fff; border-color:var(--blue)}
.btn--primary:hover{background:var(--blue-dark); border-color:var(--blue-dark); color:#fff}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--rule)}
.btn--ghost:hover{border-color:var(--ink); color:var(--ink); background:transparent}
.btn--light{background:#fff; color:var(--ink); border-color:#fff}
.btn--light:hover{background:#DFEDF4; color:var(--ink)}
.btn--block{width:100%}
.btn[disabled]{opacity:.55; cursor:not-allowed}

/* --- Header -------------------------------------------------------------- */

.hdr{
  position:sticky; top:0; z-index:60;
  background:rgba(251,250,247,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--grid);
}
.hdr__in{display:flex; align-items:center; gap:24px; height:70px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto}
.logo__mark{width:30px; height:30px; flex:none}
.logo__txt{font-family:var(--display); font-weight:800; font-size:1.42rem; letter-spacing:-.045em; color:var(--ink); line-height:1}
.logo__txt b{color:var(--brand); font-weight:800}
.logo__sub{display:block; font-family:var(--mono); font-size:.44rem; letter-spacing:.22em; color:var(--grey); text-transform:uppercase; margin-top:3px}

.nav{display:flex; align-items:center; gap:28px}
.nav a{
  font-size:.93rem; font-weight:600; color:var(--ink); text-decoration:none;
  padding:6px 0; border-bottom:2px solid transparent;
}
.nav a:hover{border-bottom-color:var(--blue); color:var(--ink)}
.hdr__cta{display:flex; align-items:center; gap:12px}
.hdr .btn{padding:11px 20px; font-size:.9rem}

.burger{display:none; background:none; border:1px solid var(--rule); border-radius:3px; padding:9px; cursor:pointer}
.burger span{display:block; width:20px; height:2px; background:var(--ink); margin:4px 0}

@media (max-width:940px){
  .nav{
    position:fixed; inset:70px 0 auto; flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--grid); padding:8px var(--gut) 20px;
    display:none; max-height:calc(100dvh - 70px); overflow:auto;
  }
  .nav[data-open="true"]{display:flex}
  .nav a{padding:14px 0; border-bottom:1px solid var(--grid)}
  .hdr__cta .btn--ghost{display:none}
  .burger{display:block; order:3}
}

/* --- Hero ---------------------------------------------------------------- */

.hero{position:relative; overflow:hidden; padding-block:clamp(56px,8vw,96px) clamp(64px,9vw,108px)}
.hero::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 70% at 65% 30%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 65% 30%, #000 20%, transparent 78%);
  opacity:.85;
}
.hero__in{position:relative; z-index:1; display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(32px,5vw,64px); align-items:center}
.hero h1{margin:0 0 22px}
.hero h1 em{font-style:normal; color:var(--blue); display:block}
.hero__lede{max-width:46ch}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hero__note{font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; color:var(--grey); margin:20px 0 0}

.plan{background:#fff; border:1px solid var(--rule); border-radius:4px; box-shadow:var(--shadow-lg); padding:14px}
.plan__cap{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--grey); padding:0 4px 12px; border-bottom:1px solid var(--grid); margin-bottom:12px;
}
.plan__cap b{color:var(--blue); font-weight:500}

@keyframes pinPulse{
  0%,100%{r:5; opacity:1}
  50%{r:8.5; opacity:.55}
}
.pin-halo{animation:pinPulse 2.6s ease-in-out infinite}
.pin-halo--2{animation-delay:.85s}
.pin-halo--3{animation-delay:1.7s}

@media (max-width:900px){
  .hero__in{grid-template-columns:1fr}
  .plan{order:-1}
}

/* --- Trust-Leiste -------------------------------------------------------- */

.trust{border-block:1px solid var(--grid); background:var(--white)}
.trust__in{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--grid)}
.trust__i{background:var(--white); padding:26px 22px}
.trust__n{font-family:var(--display); font-weight:800; font-size:1.7rem; letter-spacing:-.03em; color:var(--blue); line-height:1}
.trust__l{font-size:.87rem; color:var(--grey); margin:7px 0 0; line-height:1.4}
@media (max-width:760px){.trust__in{grid-template-columns:repeat(2,1fr)}}

/* --- Module-Raster ------------------------------------------------------- */

.mods{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:4px; overflow:hidden}
.mod{background:var(--white); padding:26px 24px 28px; transition:background .18s}
.mod:hover{background:#F4F9FC}
.mod__no{font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; color:var(--blue)}
.mod h3{margin:12px 0 8px; font-size:1.09rem}
.mod p{margin:0; font-size:.91rem; color:var(--grey); line-height:1.55}

/* --- Zwei-Spalten-Block -------------------------------------------------- */

.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center}
@media (max-width:880px){.split{grid-template-columns:1fr}}

.checks{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:13px}
.checks li{display:flex; gap:12px; align-items:flex-start; font-size:.98rem}
.checks svg{flex:none; margin-top:3px}

.quote{
  border-left:3px solid var(--blue); padding:4px 0 4px 22px; margin:0 0 26px;
  font-family:var(--display); font-weight:700; font-size:1.32rem; letter-spacing:-.02em; line-height:1.32;
}

/* --- Ablauf (echte Sequenz → Nummerierung trägt Information) ------------- */

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,44px); counter-reset:s}
.step{position:relative; padding-top:26px; border-top:2px solid var(--blue)}
.step__no{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--blue); margin-bottom:14px}
.step h3{margin:0 0 10px}
.step p{margin:0; color:var(--grey); font-size:.95rem}
.section--ink .step{border-top-color:var(--blue-light)}
.section--ink .step p{color:var(--ink-text)}
.section--ink .step__no{color:var(--blue-light)}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

/* --- Pakete -------------------------------------------------------------- */

.plans{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:stretch}
@media (max-width:1080px){.plans{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.plans{grid-template-columns:1fr}}

.plan-c{
  background:var(--white); border:1px solid var(--rule); border-radius:4px;
  padding:26px 22px 24px; display:flex; flex-direction:column; position:relative;
}
.plan-c--hot{border-color:var(--ink); border-width:2px; box-shadow:var(--shadow)}
.plan-c__tag{
  position:absolute; top:-11px; left:20px; background:var(--yellow); color:var(--ink);
  font-family:var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  padding:4px 10px; border-radius:2px;
}
.plan-c__name{font-family:var(--display); font-weight:800; font-size:1.3rem; letter-spacing:-.03em; margin:0 0 6px}
.plan-c__desc{font-size:.88rem; color:var(--grey); margin:0 0 20px; min-height:3.2em; line-height:1.45}
.plan-c__price{display:flex; align-items:baseline; gap:5px; font-family:var(--display); font-weight:800; letter-spacing:-.04em}
.plan-c__price b{font-size:2.5rem; line-height:1}
.plan-c__price span{font-family:var(--mono); font-size:.8rem; font-weight:400; letter-spacing:0; color:var(--grey)}
.plan-c__setup{font-family:var(--mono); font-size:.73rem; color:var(--grey); margin:9px 0 20px; letter-spacing:.02em}
.plan-c ul{list-style:none; margin:0 0 24px; padding:20px 0 0; border-top:1px solid var(--grid); display:grid; gap:10px; font-size:.9rem}
.plan-c li{display:flex; gap:10px; align-items:flex-start}
.plan-c li svg{flex:none; margin-top:4px}
.plan-c li b{font-family:var(--mono); font-weight:500; font-size:.86rem}
.plan-c .btn{margin-top:auto}

.plans-note{
  margin-top:22px; display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center;
  font-family:var(--mono); font-size:.75rem; color:var(--grey); letter-spacing:.02em;
}

.addon{
  margin-top:16px; background:var(--white); border:1px solid var(--rule); border-radius:4px;
  padding:22px 24px; display:flex; flex-wrap:wrap; gap:16px 32px; align-items:center; justify-content:space-between;
}
.addon h3{margin:0 0 4px; font-size:1.05rem}
.addon p{margin:0; font-size:.9rem; color:var(--grey)}
.addon__price{font-family:var(--display); font-weight:800; font-size:1.5rem; letter-spacing:-.03em; white-space:nowrap}
.addon__price span{font-family:var(--mono); font-size:.76rem; font-weight:400; letter-spacing:0; color:var(--grey)}

/* --- Formulare ----------------------------------------------------------- */

.forms{display:grid; grid-template-columns:1.18fr .82fr; gap:clamp(28px,4vw,52px); align-items:start}
@media (max-width:940px){.forms{grid-template-columns:1fr}}

.card{background:var(--white); border:1px solid var(--rule); border-radius:4px; padding:clamp(24px,3.4vw,38px)}
.card--ghost{background:transparent; border-style:dashed}

.field{margin-bottom:16px}
.field label{display:block; font-family:var(--mono); font-size:.71rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); margin-bottom:7px}
.field .req{color:var(--blue)}
.field input, .field select, .field textarea{
  width:100%; font-family:var(--body); font-size:1rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--rule); border-radius:3px; padding:12px 14px; transition:border-color .16s, background .16s;
}
.field textarea{min-height:118px; resize:vertical}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--blue); background:#fff; outline:none; box-shadow:0 0 0 3px rgba(5,130,175,.18)}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"]{border-color:var(--err); background:#FFF7F7}
.field__err{display:none; color:var(--err); font-size:.82rem; margin-top:6px}
.field__err[data-show="true"]{display:block}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}

.check{display:flex; gap:11px; align-items:flex-start; margin-bottom:14px; font-size:.87rem; line-height:1.5; color:var(--grey)}
.check input{flex:none; width:19px; height:19px; margin-top:2px; accent-color:var(--brand)}

.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.sum{background:var(--paper); border:1px solid var(--grid); border-radius:3px; padding:16px 18px; margin-bottom:20px; font-family:var(--mono); font-size:.84rem}
.sum__r{display:flex; justify-content:space-between; gap:16px; padding:5px 0}
.sum__r--tot{border-top:1px solid var(--rule); margin-top:7px; padding-top:11px; font-weight:700; color:var(--ink)}
.sum__r span:first-child{color:var(--grey)}

.msg{display:none; border-radius:3px; padding:14px 16px; font-size:.92rem; margin-bottom:18px; line-height:1.5}
.msg[data-show="true"]{display:block}
.msg--ok{background:#EAF7F1; border:1px solid #A8DCC5; color:#0B5C40}
.msg--err{background:#FDF0F0; border:1px solid #F0C0C0; color:#8C1D1D}

/* --- FAQ ----------------------------------------------------------------- */

.faq{border-top:1px solid var(--rule); max-width:900px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer; list-style:none; padding:22px 44px 22px 0; position:relative;
  font-family:var(--display); font-weight:700; font-size:1.08rem; letter-spacing:-.02em; line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:''; position:absolute; right:8px; top:50%; width:12px; height:12px;
  border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s;
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq summary:hover{color:var(--blue)}
.faq__a{padding:0 32px 24px 0; color:var(--grey); font-size:.97rem}
.faq__a p:last-child{margin-bottom:0}
.faq__a ul{margin:0 0 1em; padding-left:20px}
.faq__a li{margin-bottom:6px}

/* --- Kontakt / Footer ---------------------------------------------------- */

.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ink-2); border:1px solid var(--ink-2); border-radius:4px; overflow:hidden}
@media (max-width:800px){.contact-grid{grid-template-columns:1fr}}
.contact-i{background:var(--ink); padding:28px 26px}
.contact-i .eyebrow{margin-bottom:12px}
.contact-i a{color:#fff; font-family:var(--display); font-weight:700; font-size:1.18rem; letter-spacing:-.02em; text-decoration:none; word-break:break-word}
.contact-i a:hover{color:var(--blue-light)}
.contact-i p{margin:8px 0 0; font-size:.87rem; color:var(--ink-text)}

.ftr{background:var(--ink); color:var(--ink-text); padding:clamp(48px,6vw,72px) 0 30px; font-size:.9rem}
.ftr a{color:var(--ink-text); text-decoration:none}
.ftr a:hover{color:#fff; text-decoration:underline}
.ftr__top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px; border-bottom:1px solid var(--ink-2)}
@media (max-width:860px){.ftr__top{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ftr__top{grid-template-columns:1fr}}
.ftr h4{font-family:var(--mono); font-weight:500; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-light); margin:0 0 14px}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.ftr__logo .logo__txt{color:#fff}
.ftr__logo .logo__txt b{color:var(--blue-light)}
.ftr__bot{display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between; padding-top:24px; font-family:var(--mono); font-size:.74rem; letter-spacing:.03em}

/* --- Rechtstexte (Unterseiten) ------------------------------------------- */

.legal{max-width:78ch; padding-block:clamp(48px,7vw,84px)}
.legal h1{font-size:clamp(2.1rem,4.6vw,3rem); margin-bottom:12px}
.legal h2{font-size:1.5rem; margin:44px 0 14px}
.legal h3{font-size:1.09rem; margin:28px 0 10px}
.legal p, .legal li{color:#39434F; font-size:1rem}
.legal ul{padding-left:22px; margin:0 0 1.1em}
.legal li{margin-bottom:7px}
.legal table{width:100%; border-collapse:collapse; margin:0 0 1.4em; font-size:.93rem}
.legal th, .legal td{text-align:left; vertical-align:top; padding:10px 12px; border:1px solid var(--rule)}
.legal th{background:var(--paper-2); font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; font-weight:500}
.legal .updated{font-family:var(--mono); font-size:.76rem; color:var(--grey); letter-spacing:.05em}
.todo{background:#FFF9E6; border:1px solid var(--yellow); border-left-width:4px; border-radius:3px; padding:14px 18px; margin:0 0 1.4em; font-size:.92rem; color:#5A4300}
.todo b{color:#3D2E00}

/* --- Sprachumschalter ---------------------------------------------------- */

.langsw{
  display:flex; align-items:center; gap:0;
  border:1px solid var(--rule); border-radius:3px; overflow:hidden; flex:none;
}
.langsw a{
  font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.06em;
  color:var(--grey); text-decoration:none; padding:8px 10px; line-height:1;
  border-right:1px solid var(--rule); transition:background .16s, color .16s;
}
.langsw a:last-child{border-right:none}
.langsw a:hover{background:var(--paper-2); color:var(--ink)}
.langsw a[aria-current="true"]{background:var(--ink); color:#fff}

@media (max-width:940px){
  .langsw{order:2; margin-right:6px}
  .langsw a{padding:8px 9px}
}

/* Ab hier wird es im Kopf eng: Der Bestell-Button verschwindet, weil er
   im aufgeklappten Menü ohnehin an erster Stelle steht. */
@media (max-width:720px){
  .hdr__in{gap:12px}
  .logo__sub{display:none}
  .logo__txt{font-size:1.3rem}
  .hdr .btn--primary{padding:10px 14px; font-size:.85rem}
}
@media (max-width:560px){
  .hdr .btn--primary{display:none}
  .nav__cta{display:flex}
}
@media (max-width:380px){
  .logo__mark{width:26px; height:26px}
  .logo__txt{font-size:1.18rem}
  .langsw a{padding:7px 7px; font-size:.68rem}
}

/* Bestell-Knopf im aufgeklappten Menü — nur dort sichtbar, wo der
   Knopf aus dem Kopf ausgeblendet ist. */
.nav__cta{display:none; margin-top:14px}
.nav__cta .btn{width:100%}

/* --- Unterseiten-Kopf ---------------------------------------------------- */

.sub-hero{padding-block:clamp(48px,6.5vw,86px) clamp(40px,5.5vw,72px)}
.sub-hero__h1{font-size:clamp(2.3rem,5.2vw,3.7rem); margin:0 0 20px; max-width:20ch}
.sub-hero .lede{max-width:62ch}

.card__h{font-family:var(--display); font-weight:800; font-size:1.55rem; letter-spacing:-.03em; margin:0 0 8px}
.form-fine{font-family:var(--mono); font-size:.72rem; color:var(--grey); margin:14px 0 0; text-align:center; line-height:1.5}

.phone-big{font-family:var(--display); font-weight:800; font-size:1.75rem; letter-spacing:-.03em; margin:0 0 6px}
.phone-big a{color:var(--ink); text-decoration:none}
.phone-big a:hover{color:var(--blue)}
.phone-big--light{margin:26px 0 22px; font-size:2.1rem}
.phone-big--light a{color:#fff}
.phone-big--light a:hover{color:var(--blue-light)}

.mail-big{font-family:var(--display); font-weight:700; font-size:1.12rem; letter-spacing:-.02em; margin:0 0 4px; word-break:break-word}
.mail-big a{color:var(--ink); text-decoration:none}
.mail-big a:hover{color:var(--blue)}

/* --- „Kennen Sie das?“ --------------------------------------------------- */

.pains{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:4px; overflow:hidden}
@media (max-width:760px){.pains{grid-template-columns:1fr}}
.pain-i{background:var(--white); padding:28px 26px 30px}
.pain-i__q{font-family:var(--display); font-weight:800; font-size:1.16rem; letter-spacing:-.02em; line-height:1.3; color:var(--ink); margin:0 0 12px}
.pain-i__a{margin:0; font-size:.95rem; color:var(--grey); line-height:1.6}

/* --- Auswahlkarten ------------------------------------------------------- */

.picks{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:880px){.picks{grid-template-columns:1fr}}
.pick{background:var(--white); border:1px solid var(--rule); border-radius:4px; padding:28px 26px 26px; display:flex; flex-direction:column}
.pick__e{font-family:var(--mono); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--blue); margin:0 0 12px}
.pick h3{font-size:1.32rem; margin:0 0 10px}
.pick__p{font-size:.94rem; color:var(--grey); margin:0 0 24px; line-height:1.6; flex:1}

/* --- Werte (Über uns) ---------------------------------------------------- */

.values{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:4px; overflow:hidden}
@media (max-width:760px){.values{grid-template-columns:1fr}}
.value{background:var(--white); padding:30px 28px 32px}
.value h3{font-size:1.18rem; margin:0 0 12px}
.value p{margin:0; font-size:.95rem; color:var(--grey); line-height:1.65}

.prose p{font-size:1.03rem; line-height:1.75; color:#39434F}
.prose p:last-child{margin-bottom:0}

.quote--big{font-size:1.5rem; line-height:1.35; margin-bottom:18px}

.checks--2col{grid-template-columns:repeat(2,1fr); column-gap:36px}
@media (max-width:760px){.checks--2col{grid-template-columns:1fr}}

.arrow-link{font-family:var(--display); font-weight:700; font-size:1rem; text-decoration:none; display:inline-flex; align-items:center; gap:7px}
.arrow-link::after{content:'→'; transition:transform .18s}
.arrow-link:hover::after{transform:translateX(4px)}

/* Formular-Layout auf den Unterseiten */
.forms{align-items:start}

/* --- Logo als Bilddatei -------------------------------------------------- */

/* Die Logodatei enthält Bildmarke, Schriftzug und die Zeile
   „Baustellenverwaltung“. Höhe steuert die Größe, die Breite ergibt
   sich aus dem Seitenverhältnis (462 : 128). */
.logo__img{height:40px; width:auto; display:block}
.ftr .logo__img{height:38px}
@media (max-width:720px){.logo__img{height:34px}}
@media (max-width:380px){.logo__img{height:30px}}

/* ==========================================================================
   DUNKLE FASSUNG

   Die Seite bringt eine eigene Gestaltung für den Dunkelmodus mit, statt
   sich vom Browser umfärben zu lassen. Beim automatischen Umfärben werden
   nämlich nur die Hintergründe getauscht, die Schriftfarben bleiben stehen
   — dann steht dunkles Navy auf Schwarz.

   Grundlage bleibt die Marke: das Logo-Navy #082137 wird zur Fläche, das
   Petrolblau in einer aufgehellten Fassung zum Akzent. Alle Textfarben
   sind gegen ihren Untergrund auf mindestens 4,5:1 geprüft.
   ========================================================================== */



/* Kein automatisches Umfärben durch Erweiterungen: Wir liefern die
   dunkle Fassung selbst. */


.logo picture{display:block; line-height:0}

/* --- Automatische Umstellung ---------------------------------------------- */

.autoscale{
  margin-top:16px; background:var(--white); border:1px solid var(--rule); border-radius:4px;
  display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(24px,3vw,44px);
  padding:clamp(24px,3vw,34px);
}
@media (max-width:820px){.autoscale{grid-template-columns:1fr}}
.autoscale h3{font-size:1.3rem; margin:0 0 12px}
.autoscale p{margin:0 0 12px; font-size:.96rem; color:var(--grey); line-height:1.65}
.autoscale__note{font-size:.87rem !important; padding-top:12px; border-top:1px solid var(--grid); margin:0 !important}
.autoscale__tbl{width:100%; border-collapse:collapse; font-size:.88rem; align-self:start}
.autoscale__tbl td{padding:11px 6px; border-bottom:1px solid var(--grid); vertical-align:top}
.autoscale__tbl tr:last-child td{border-bottom:none}
.autoscale__tbl td:first-child{white-space:nowrap; width:1%; padding-right:14px}
.autoscale__tbl td b{font-family:var(--mono); font-size:.82rem; font-weight:500; color:var(--blue)}
.autoscale__tbl .num{font-family:var(--mono); font-size:.8rem; text-align:right; color:var(--grey); white-space:nowrap}

/* --- Vergleichstabelle ---------------------------------------------------- */

.cmp-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--rule); border-radius:4px; background:var(--white)}
.cmp{width:100%; border-collapse:collapse; font-size:.9rem; min-width:660px}
.cmp th, .cmp td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--grid); vertical-align:top}
.cmp thead th{
  font-family:var(--display); font-weight:800; font-size:1.05rem; letter-spacing:-.02em;
  background:var(--paper-2); border-bottom:2px solid var(--rule); white-space:nowrap;
}
.cmp tbody th{
  font-family:var(--mono); font-weight:500; font-size:.78rem; letter-spacing:.04em;
  color:var(--grey); white-space:nowrap; background:var(--paper); width:1%;
}
.cmp td{color:var(--ink)}
.cmp .is-hot{background:rgba(5,130,175,.06)}
.cmp thead .is-hot{background:rgba(5,130,175,.13)}
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td{border-bottom:none}
.cmp__foot{margin:16px 0 0; font-family:var(--mono); font-size:.76rem; color:var(--grey); line-height:1.6}

.addon--plus{margin-top:26px; align-items:flex-start}
.addon__note{margin:12px 0 0 !important; font-size:.85rem !important; padding-top:12px; border-top:1px solid var(--grid)}
.addon__sub{font-family:var(--mono); font-size:.76rem; color:var(--grey); margin:2px 0 14px}

/* --- Schulungspakete ------------------------------------------------------ */

.trains{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:4px; overflow:hidden}
@media (max-width:900px){.trains{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.trains{grid-template-columns:1fr}}
.train{background:var(--white); padding:24px 22px 26px; display:flex; flex-direction:column}
.train h3{font-size:1.1rem; margin:0 0 8px}
.train p{margin:0 0 20px; font-size:.89rem; color:var(--grey); line-height:1.55; flex:1}
.train__p{font-family:var(--display) !important; font-weight:800; font-size:1.6rem; letter-spacing:-.03em; color:var(--ink) !important; margin:0 !important}
.train__p span{font-family:var(--mono); font-size:.8rem; font-weight:400; color:var(--grey)}

/* --- Hinweis im Bestellformular ------------------------------------------ */

.msg--hint{background:rgba(5,130,175,.08); border:1px solid var(--brand); color:var(--blue); font-size:.88rem}
.sum__sep{height:1px; background:var(--rule); margin:11px 0}



.plan-c__sub{display:block; font-family:var(--body); font-weight:400; font-size:.82rem; color:var(--grey); line-height:1.45; margin-top:2px}
.plan-c li b{display:block}

/* --- Vorankündigung ------------------------------------------------------ */

.soon{
  margin-top:26px; background:var(--white); border:1px solid var(--brand); border-radius:4px;
  display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(24px,3.5vw,48px);
  padding:clamp(26px,3.4vw,38px); align-items:center;
}
@media (max-width:880px){.soon{grid-template-columns:1fr} .soon__art{max-width:300px}}
.soon h3{font-size:1.45rem; margin:0 0 14px; line-height:1.2}
.soon > .soon__txt > p{margin:0 0 18px; font-size:.98rem; color:var(--grey); line-height:1.68}
.soon .checks{margin:0 0 26px}
.soon__note{font-family:var(--mono); font-size:.75rem; color:var(--grey); margin:14px 0 0 !important; line-height:1.6}
.soon__art svg{width:100%; height:auto}



/* ==========================================================================
   DESIGN REFRESH 2026-08
   Ziel: klarere SaaS-Hierarchie, mehr Weißraum, stärkere visuelle Führung
   bei unveränderter innBuild-Farbwelt und bestehender Funktionalität.
   ========================================================================== */

:root{
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --blue-soft:#EAF6FA;
  --blue-mist:#D9EEF5;
  --ink-soft:#153D59;
  --shadow-card:0 14px 38px -28px rgba(8,33,55,.38), 0 2px 8px rgba(8,33,55,.05);
  --shadow-float:0 34px 80px -42px rgba(8,33,55,.55), 0 12px 30px -18px rgba(8,33,55,.24);
}

html{scroll-behavior:smooth}
body{overflow-x:hidden}
.wrap{width:min(calc(100% - 2 * var(--gut)),var(--wrap)); margin-inline:auto}
.section{padding-block:clamp(76px,9vw,118px)}
.section-head{max-width:730px; margin-bottom:clamp(38px,5vw,58px)}
.section-head h2{max-width:18ch}
.section-head .lede{margin-top:20px}

.eyebrow{
  width:max-content; max-width:100%; padding:8px 12px; border:1px solid rgba(5,130,175,.18);
  border-radius:999px; background:rgba(5,130,175,.06); letter-spacing:.12em; gap:8px;
  margin-bottom:20px;
}
.eyebrow::before{width:7px; height:7px; border-radius:50%}
.section--ink .eyebrow{background:rgba(111,195,228,.09); border-color:rgba(111,195,228,.22)}

.btn{border-radius:10px; padding:14px 24px; box-shadow:none}
.btn--primary{box-shadow:0 10px 22px -13px rgba(4,104,140,.65)}
.btn--primary:hover{transform:translateY(-1px); box-shadow:0 13px 26px -14px rgba(4,104,140,.75)}
.btn--ghost{background:rgba(255,255,255,.62)}
.btn--ghost:hover{background:#fff; border-color:rgba(8,33,55,.36)}

/* Kopfbereich: ruhiger und hochwertiger */
.hdr{background:rgba(251,250,248,.82); border-bottom:1px solid rgba(195,207,216,.62); box-shadow:0 8px 32px -30px rgba(8,33,55,.6)}
.hdr__in{height:76px}
.nav{gap:22px}
.nav a{font-size:.9rem; color:#294357}
.nav a:hover{color:var(--blue); border-bottom-color:transparent}
.logo__img{height:43px}

/* Hero: klare Produktbühne statt technischer Tabellenoptik */
.hero{
  min-height:710px; display:flex; align-items:center;
  padding-block:clamp(64px,7vw,96px) clamp(84px,10vw,130px);
  background:
    radial-gradient(circle at 80% 16%, rgba(5,130,175,.12), transparent 30%),
    linear-gradient(180deg,#FBFAF8 0%,#F8FBFC 100%);
}
.hero::before{
  background-image:linear-gradient(rgba(5,130,175,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(5,130,175,.07) 1px,transparent 1px);
  background-size:42px 42px; opacity:.65;
  mask-image:linear-gradient(90deg,transparent 0%,#000 54%,#000 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 54%,#000 100%);
}
.hero::after{
  content:''; position:absolute; width:430px; height:430px; border-radius:50%; right:-180px; bottom:-250px;
  background:rgba(5,130,175,.06); pointer-events:none;
}
.hero__in{grid-template-columns:minmax(0,.93fr) minmax(460px,1.07fr); gap:clamp(48px,7vw,92px)}
.hero h1{font-size:clamp(3.25rem,6.2vw,5.65rem); line-height:.98; letter-spacing:-.055em; margin-bottom:26px}
.hero h1 em{position:relative; width:max-content; max-width:100%}
.hero h1 em::after{content:''; position:absolute; left:0; right:0; bottom:-8px; height:7px; border-radius:999px; background:rgba(5,130,175,.12); z-index:-1}
.hero__lede{max-width:52ch; font-size:clamp(1.05rem,1.6vw,1.22rem); line-height:1.7}
.hero__cta{margin-top:34px; gap:14px}
.hero__proof{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.hero__proof span{
  display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:999px;
  border:1px solid rgba(5,130,175,.16); background:rgba(255,255,255,.72);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.015em; color:#4A6171;
}
.hero__proof span::before{content:'✓'; color:var(--brand); font-weight:700}

.plan{
  position:relative; transform:rotate(.7deg); border:1px solid rgba(195,207,216,.75); border-radius:20px;
  padding:16px; box-shadow:var(--shadow-float); background:rgba(255,255,255,.96);
}
.plan::before{
  content:''; position:absolute; inset:18px -18px -18px 18px; z-index:-1; border-radius:20px;
  border:1px solid rgba(5,130,175,.18); background:rgba(5,130,175,.035);
}
.plan::after{
  content:''; position:absolute; width:88px; height:88px; right:-34px; top:-34px; border-radius:24px;
  background:linear-gradient(145deg,var(--brand),#42A7C9); box-shadow:0 18px 30px -20px rgba(5,130,175,.7);
  opacity:.16; transform:rotate(14deg); pointer-events:none;
}
.plan__cap{border-bottom:0; margin-bottom:6px; padding:4px 4px 12px}
.plan__cap b{padding:5px 9px; background:#FFF2F2; border-radius:999px; color:#A82A2A}
.plan svg{display:block; width:100%; border-radius:12px; overflow:hidden}

/* Problemzone: einzelne Aussagen statt Tabellenraster */
.section--tint{background:linear-gradient(180deg,#F4F6F6 0%,#F0F5F6 100%)}
.pains{background:transparent; border:0; overflow:visible; gap:18px}
.pain-i{
  border:1px solid rgba(195,207,216,.72); border-radius:var(--radius-md); padding:30px 28px 32px;
  box-shadow:var(--shadow-card); position:relative; overflow:hidden;
}
.pain-i::before{content:'“'; position:absolute; right:18px; top:4px; font-family:Georgia,serif; font-size:5rem; line-height:1; color:rgba(5,130,175,.08)}
.pain-i:nth-child(2),.pain-i:nth-child(4){transform:translateY(18px)}
.pain-i__q{font-size:1.22rem; max-width:26ch}
.pain-i__a{max-width:52ch}

/* Kennzahlen als ruhiger Beweisstreifen */
.trust{border:0; background:var(--ink); padding:0}
.trust__in{gap:0; background:transparent}
.trust__i{background:transparent; padding:31px 28px; border-right:1px solid rgba(255,255,255,.1)}
.trust__i:last-child{border-right:0}
.trust__n{color:var(--blue-light); font-size:1.9rem}
.trust__l{color:#BED0DC; max-width:24ch}

/* Funktions-Bento: Wichtiges visuell priorisieren */
#funktionen{background:#fff}
#funktionen .section-head{margin-bottom:44px}
#funktionen .dim{display:none}
.mods{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-flow:dense; gap:16px;
  background:transparent; border:0; overflow:visible;
}
.mod{
  min-height:205px; border:1px solid rgba(195,207,216,.72); border-radius:var(--radius-md);
  padding:26px 24px 28px; box-shadow:var(--shadow-card); position:relative; overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.mod:hover{background:#fff; transform:translateY(-3px); border-color:rgba(5,130,175,.34); box-shadow:0 22px 44px -30px rgba(8,33,55,.5)}
.mod:nth-child(2),.mod:nth-child(3){grid-column:span 2; min-height:230px; background:linear-gradient(135deg,#F8FCFD,#EEF8FB)}
.mod:nth-child(10){grid-column:span 2; background:linear-gradient(135deg,#082137,#123F5A); border-color:#123F5A}
.mod:nth-child(10) h3{color:#fff}
.mod:nth-child(10) p{color:#BDD0DC}
.mod:nth-child(10) .mod__no{color:var(--blue-light); background:rgba(111,195,228,.12); border-color:rgba(111,195,228,.25)}
.mod__no{
  width:38px; height:38px; display:grid; place-items:center; margin:0;
  border-radius:11px; border:1px solid rgba(5,130,175,.18); background:var(--blue-soft);
  font-size:.7rem; font-weight:700; color:var(--blue);
}
.mod h3{margin:22px 0 10px; font-size:1.12rem}
.mod p{font-size:.9rem; line-height:1.62}
.mod::after{content:''; position:absolute; width:90px; height:90px; border-radius:50%; right:-48px; bottom:-48px; background:rgba(5,130,175,.045)}

/* Signatur-/Rechtssicherheitsblock wie ein Produktfeature */
.split{gap:clamp(48px,7vw,88px)}
.split .card{border-radius:var(--radius-lg); border-color:rgba(195,207,216,.7); box-shadow:var(--shadow-float); padding:clamp(26px,3vw,38px); transform:rotate(-.4deg)}
.checks{gap:15px}
.checks li{line-height:1.58}
.checks li b{color:var(--ink)}

#warum .checks--2col{
  gap:0 22px; padding:0; margin-top:6px;
}
#warum .checks--2col li{
  background:#fff; border:1px solid rgba(195,207,216,.68); border-radius:14px; padding:20px 18px;
  margin-bottom:14px; box-shadow:0 12px 26px -28px rgba(8,33,55,.35);
}

/* Ablauf als zusammenhängende Timeline */
.section--ink{background:linear-gradient(145deg,#061A29 0%,#082B42 100%)}
#ablauf{overflow:hidden}
#ablauf::before{content:''; position:absolute; width:460px; height:460px; border:1px solid rgba(111,195,228,.08); border-radius:50%; right:-230px; top:-180px}
.steps{gap:24px; position:relative}
.step{
  border:1px solid rgba(111,195,228,.16); border-top:1px solid rgba(111,195,228,.16);
  background:rgba(255,255,255,.045); border-radius:16px; padding:26px 24px 28px;
  backdrop-filter:blur(4px);
}
.step__no{display:inline-block; padding:5px 8px; border-radius:999px; background:rgba(111,195,228,.11); margin-bottom:18px}
.step h3{font-size:1.26rem}
.step p{line-height:1.62}

/* Preise: erst Entscheidung, dann Extras */
#pakete{background:#fff}
#pakete>.wrap>.dim{display:none}
.plans{gap:18px}
.plan-c{
  border-radius:18px; border-color:rgba(195,207,216,.72); padding:30px 24px 26px;
  box-shadow:var(--shadow-card); overflow:hidden;
}
.plan-c--hot{
  border:2px solid var(--brand); box-shadow:0 24px 54px -36px rgba(5,130,175,.75),0 10px 24px -20px rgba(8,33,55,.25);
  transform:translateY(-9px);
}
.plan-c--hot::before{content:''; position:absolute; left:0; right:0; top:0; height:5px; background:linear-gradient(90deg,var(--brand),#62C3DF)}
.plan-c__tag{top:14px; left:auto; right:14px; border-radius:999px; background:#FFF3B4; padding:5px 9px}
.plan-c__name{font-size:1.38rem}
.plan-c__desc{min-height:0; margin-bottom:24px; padding-right:8px}
.plan-c__price b{font-size:2.85rem}
.plan-c ul{border-top:1px solid rgba(195,207,216,.55); padding-top:20px; gap:12px}
.plan-c li{line-height:1.45}
.pricing-extras{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:30px}
.pricing-extras .addon{margin-top:0; height:100%}
.addon{
  border-radius:14px; border-color:rgba(195,207,216,.72); padding:22px 24px; background:#F8FBFC;
}
.autoscale{
  margin-top:16px; border-radius:18px; border:0; background:linear-gradient(135deg,#EEF7FA,#F7FBFC);
  box-shadow:inset 0 0 0 1px rgba(5,130,175,.12); padding:28px 30px;
}
.plans-note{justify-content:center; margin-top:24px; gap:8px 22px}
.plans-note span{padding:7px 10px; border-radius:999px; background:#F3F8FA}

/* Sekundäre Preisinfos: optisch eine Ebene leiser */
.cmp-wrap{border-radius:16px; border-color:rgba(195,207,216,.72); box-shadow:var(--shadow-card)}
.cmp thead th{padding-block:16px}
.soon{border-radius:20px; border-color:rgba(5,130,175,.24); background:linear-gradient(135deg,#fff,#F1FAFC); box-shadow:var(--shadow-card)}
.addon--plus{border-radius:16px; background:#fff}
.trains{gap:16px; background:transparent; border:0; overflow:visible}
.train{border:1px solid rgba(195,207,216,.72); border-radius:14px; box-shadow:var(--shadow-card); padding:26px 22px}

/* CTA-Auswahl und FAQ */
.picks{gap:18px}
.pick{border-radius:18px; border-color:rgba(195,207,216,.72); box-shadow:var(--shadow-card); padding:30px 26px}
.pick:first-child{border-color:rgba(5,130,175,.34); background:linear-gradient(180deg,#F6FBFD,#fff)}
.faq{max-width:980px; border-top:0; display:grid; gap:10px}
.faq details{border:1px solid rgba(195,207,216,.68); border-radius:13px; background:#fff; padding-inline:20px; box-shadow:0 8px 22px -28px rgba(8,33,55,.35)}
.faq summary{padding:19px 38px 19px 0}
.faq__a{padding-bottom:20px}

.contact-grid{border-radius:18px; gap:1px}
.contact-i{padding:32px 28px}
.ftr{padding-top:64px}

/* Unterseiten: neue Karten-/Formensprache mitziehen */
.card{border-radius:16px; border-color:rgba(195,207,216,.72); box-shadow:var(--shadow-card)}
.field input,.field select,.field textarea{border-radius:9px; padding:13px 14px}
.sum{border-radius:10px}

@media (max-width:1080px){
  .hero__in{grid-template-columns:1fr 1fr; gap:42px}
  .hero h1{font-size:clamp(3rem,6vw,4.8rem)}
  .mods{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mod:nth-child(2),.mod:nth-child(3),.mod:nth-child(10){grid-column:span 1}
}
@media (max-width:900px){
  .hero{min-height:0}
  .hero__in{grid-template-columns:1fr}
  .plan{order:0; max-width:680px; margin-inline:auto; transform:none}
  .hero h1{max-width:12ch}
  .hero::before{mask-image:linear-gradient(180deg,transparent 0%,#000 40%,#000 100%); -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 40%,#000 100%)}
  .mods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pain-i:nth-child(2),.pain-i:nth-child(4){transform:none}
  .pricing-extras{grid-template-columns:1fr}
  .plan-c--hot{transform:none}
}
@media (max-width:700px){
  .section{padding-block:66px}
  .eyebrow{font-size:.64rem}
  .hero{padding-top:50px}
  .hero h1{font-size:clamp(2.8rem,13vw,4rem)}
  .hero__proof{display:grid}
  .hero__proof span{width:max-content; max-width:100%}
  .mods{grid-template-columns:1fr}
  .trust__in{grid-template-columns:1fr 1fr}
  .trust__i{border-bottom:1px solid rgba(255,255,255,.1)}
  .trust__i:nth-child(2){border-right:0}
  .plans{gap:14px}
  .plan-c{padding:26px 22px 24px}
  .autoscale{padding:24px 20px}
}
@media (max-width:460px){
  .hero__cta{display:grid}
  .hero__cta .btn{width:100%}
  .trust__in{grid-template-columns:1fr}
  .trust__i{border-right:0}
}



/* ==========================================================================
   innBuild V3 — freundlich, hell, verkaufsorientiert
   ========================================================================== */
:root{
  color-scheme:light;
  --paper:#fff;--paper-2:#F4FAFC;--white:#fff;--ink:#09283C;--ink-2:#D6E8EF;
  --grey:#50697A;--grid:#DDEBF0;--rule:#C9DDE5;--brand:#0A98C5;--blue:#087CA3;
  --blue-dark:#066887;--blue-light:#75D3EC;--yellow:#FFD44D;--blue-soft:#EAF8FC;--blue-mist:#DDF2F8;
  --shadow-card:0 18px 50px -38px rgba(9,40,60,.34);--shadow-float:0 34px 80px -42px rgba(9,40,60,.44);
  --radius-sm:12px;--radius-md:20px;--radius-lg:30px;--wrap:1220px;
}
html{background:#fff;color-scheme:light}
body{background:#fff;color:var(--ink);font-size:16px;line-height:1.58}
h1,h2,h3,h4{color:var(--ink)}
h1{font-size:clamp(3.2rem,6.7vw,5.65rem);line-height:.96;letter-spacing:-.055em}
h2{font-size:clamp(2.35rem,4.6vw,3.65rem);line-height:1.02;letter-spacing:-.045em}
h3{letter-spacing:-.025em}
.lede{color:var(--grey);font-size:clamp(1.08rem,1.6vw,1.26rem);line-height:1.65}
.wrap{max-width:var(--wrap)}
.section{padding-block:clamp(74px,8vw,108px)}
.section--tint{background:#F3F9FB}
.section--ink{background:#F0F9FC;color:var(--ink)}
.section--ink h2,.section--ink h3{color:var(--ink)}
.section--ink .lede{color:var(--grey)}
.section--ink .eyebrow{color:var(--blue)}
.section--ink .eyebrow::before{background:var(--brand)}
.section-head{max-width:770px;margin-bottom:48px}.section-head .lede{margin-top:18px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;width:auto;padding:7px 11px;border-radius:999px;background:var(--blue-soft);color:var(--blue);font-weight:700;letter-spacing:.12em;margin-bottom:18px}
.eyebrow::before{width:7px;height:7px;border-radius:50%;background:var(--brand)}
.dim{display:none}
.btn{border-radius:13px;padding:15px 24px;font-size:.96rem;box-shadow:none}
.btn--primary{background:linear-gradient(135deg,#0B9DCA,#0A83AF);border-color:transparent;color:#fff;box-shadow:0 14px 30px -20px rgba(10,131,175,.9)}
.btn--primary:hover{background:linear-gradient(135deg,#098CB6,#08779C);color:#fff;transform:translateY(-1px)}
.btn--ghost{background:#fff;border-color:#C8DDE6;color:var(--ink)}
.btn--ghost:hover{background:#F5FBFD;border-color:#98C5D5;color:var(--ink)}

/* Header */
.hdr{background:rgba(255,255,255,.94);border-bottom:1px solid #E0EDF2;box-shadow:0 10px 30px -34px rgba(9,40,60,.45)}
.hdr__in{height:76px}.logo__img{height:44px}.nav{gap:24px}.nav a{color:#234657;font-size:.91rem}
.langsw{border-color:#D7E8EE;background:#F8FCFD}.langsw a{color:#56707E}.langsw a[aria-current="true"]{background:#DDF3FA;color:#0B6684}

/* Hero: Baustellenbild + Produktansicht */
.hero{min-height:720px;padding-block:78px 96px;background:linear-gradient(130deg,#F8FCFD 0%,#EEF9FC 58%,#DDF2F8 100%);overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 86% 10%,rgba(255,212,77,.24),transparent 23%),radial-gradient(circle at 75% 90%,rgba(10,152,197,.13),transparent 30%);opacity:1;mask:none;-webkit-mask:none}
.hero::after{content:'';position:absolute;width:520px;height:520px;border:1px solid rgba(10,152,197,.12);border-radius:50%;right:-250px;bottom:-290px}
.hero__in{grid-template-columns:.92fr 1.08fr;gap:64px;align-items:center}.hero__copy{position:relative;z-index:3}
.hero h1{max-width:10.5ch;margin-bottom:28px}.hero h1 em{display:block;color:var(--brand);font-style:normal;position:relative}.hero h1 em::after{display:none}
.hero__lede{max-width:50ch;color:#456273;font-size:1.17rem}.hero__cta{margin-top:32px}
.hero__proof{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.hero__proof span{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.82);border:1px solid rgba(10,152,197,.14);font-family:var(--body);font-size:.78rem;font-weight:650;color:#385766;box-shadow:0 8px 22px -20px rgba(9,40,60,.4)}.hero__proof span::before{content:'✓';color:var(--brand);font-weight:800}
.hero__visual{position:relative;min-height:560px}.hero-photo{position:absolute;inset:0 24px 70px 0;border-radius:32px;overflow:hidden;background:linear-gradient(145deg,#DDF3FA,#A8D4DF);box-shadow:var(--shadow-float);border:8px solid rgba(255,255,255,.92)}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:2}.hero-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(9,40,60,.16));z-index:3}.hero-photo__fallback,.hero-photo__fallback svg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.plan--overlay{position:absolute;width:min(430px,68%);right:-18px;bottom:0;z-index:4;transform:rotate(1.2deg);border-radius:21px;padding:12px;border:1px solid rgba(176,206,217,.8);box-shadow:0 28px 70px -36px rgba(9,40,60,.55)}.plan--overlay::before,.plan--overlay::after{display:none}.plan--overlay .plan__cap{padding:3px 4px 8px;font-size:.58rem}
.hero-float{position:absolute;z-index:6;background:#fff;border:1px solid rgba(10,152,197,.14);border-radius:16px;box-shadow:0 20px 50px -28px rgba(9,40,60,.5);padding:13px 15px;display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center}.hero-float span{grid-row:1/3;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#E2F6FB;color:#0787B1;font-weight:900}.hero-float b{font-size:.82rem;color:var(--ink)}.hero-float small{font-size:.69rem;color:var(--grey)}.hero-float--one{left:-28px;bottom:86px}.hero-float--two{right:8px;top:28px}

/* Vertrauensleiste */
.trust{background:#fff;border:0;border-bottom:1px solid #E3EEF2}.trust__in{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#fff;border:1px solid #E1EDF2;border-radius:20px;overflow:hidden;transform:translateY(-34px);box-shadow:0 22px 70px -46px rgba(9,40,60,.45)}.trust__i{background:#fff;padding:28px 26px;border-right:1px solid #E4EFF3}.trust__i:last-child{border-right:0}.trust__n{color:var(--brand);font-size:1.65rem}.trust__l{color:#5E7684;font-size:.88rem}

/* Problemstories */
.pains{background:transparent;border:0;gap:18px}.pain-i{background:#fff;border:1px solid #DDEAF0;border-radius:22px;padding:30px 30px 32px;box-shadow:var(--shadow-card)}.pain-i:nth-child(2),.pain-i:nth-child(4){transform:none}.pain-i::before{color:rgba(10,152,197,.1)}.pain-i__q{font-size:1.25rem;margin-bottom:12px;color:var(--ink)}.pain-i__a{color:#5C7482;line-height:1.64}

/* Funktionen */
#funktionen{background:#fff}.mods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;background:transparent;border:0;overflow:visible}.mod{background:#F9FCFD;border:1px solid #DCEBF0;border-radius:22px;min-height:200px;padding:26px 24px;box-shadow:none;transition:.2s ease}.mod:hover{background:#fff;border-color:#B9DCE8;transform:translateY(-4px);box-shadow:var(--shadow-card)}.mod:nth-child(2),.mod:nth-child(3){grid-column:span 2;background:linear-gradient(145deg,#EBF8FC,#F7FCFD)}.mod:nth-child(10){grid-column:span 2;background:linear-gradient(145deg,#0A89B4,#0B6F93);border:0}.mod__top{display:flex;align-items:center;justify-content:space-between}.mod__icon{width:46px;height:46px;border-radius:14px;background:#E2F5FA;display:grid;place-items:center;color:#087FA7}.mod__icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.mod__no{width:auto;height:auto;padding:5px 8px;border-radius:999px;background:#fff;border:1px solid #D8EAF0;font-size:.66rem}.mod h3{margin:20px 0 9px;font-size:1.18rem}.mod p{font-size:.91rem;color:#58717F;line-height:1.6}.mod:nth-child(10) .mod__icon{background:rgba(255,255,255,.16);color:#fff}.mod:nth-child(10) .mod__no{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#E6F8FD}.mod:nth-child(10) h3{color:#fff}.mod:nth-child(10) p{color:#E0F1F6}

/* Signatur */
.split{gap:70px}.split .card{background:#fff;border:1px solid #DDEAF0;border-radius:28px;box-shadow:var(--shadow-float);transform:rotate(-.5deg)}.checks li{line-height:1.6;color:#4F6877}.checks li b{color:var(--ink)}

/* Praxis / Unternehmen */
.why-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr);gap:48px;align-items:start}#warum .section-head{margin-bottom:28px}#warum .checks--2col{gap:12px;display:grid;grid-template-columns:1fr 1fr}#warum .checks--2col li{background:#F8FCFD;border:1px solid #DDEBF0;border-radius:16px;padding:18px 17px;margin:0;box-shadow:none}.practice-card{position:sticky;top:105px;border-radius:28px;overflow:hidden;background:#fff;border:1px solid #DCEAF0;box-shadow:var(--shadow-card)}.practice-card__photo{height:260px;position:relative;background:linear-gradient(145deg,#A7DCE9,#E8F8FC);overflow:hidden}.practice-card__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}.practice-card__photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(9,40,60,.18));z-index:3}.practice-card__fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#0A6F92;font-weight:700;padding:30px;z-index:1}.practice-card__big{font-family:var(--display);font-size:4.2rem;line-height:1;color:#0791BC;margin-bottom:10px}.practice-card__body{padding:24px;display:grid;gap:7px}.practice-card__body strong{font-size:1.13rem}.practice-card__body span{color:var(--grey);font-size:.92rem}

/* Ablauf hell */
#ablauf{background:linear-gradient(135deg,#ECF8FB,#F7FCFD);color:var(--ink);overflow:hidden}#ablauf::before{border-color:rgba(10,152,197,.1)}.steps{position:relative;gap:18px}.step{background:#fff;border:1px solid #DCEBF0;border-radius:22px;padding:28px 25px;box-shadow:var(--shadow-card)}.step__no{background:#E4F5FA;color:#087CA3;margin-bottom:18px}.step h3{color:var(--ink);font-size:1.25rem}.step p{color:#5B7482;line-height:1.62}

/* Preise */
#pakete{background:#fff}.plans{gap:18px}.plan-c{background:#fff;border:1px solid #D9E8EE;border-radius:24px;padding:30px 24px;box-shadow:0 18px 46px -40px rgba(9,40,60,.55)}.plan-c--hot{border:2px solid #16A1CB;transform:translateY(-10px);box-shadow:0 26px 70px -42px rgba(10,152,197,.55)}.plan-c--hot::before{height:6px;background:linear-gradient(90deg,#0A98C5,#64D0EB)}.plan-c__tag{background:#FFF3B6;color:#6C5200}.plan-c__desc{color:#607984;line-height:1.5}.plan-c__price b{font-size:2.8rem}.plan-c ul{border-top:1px solid #E1EDF2}.plan-c li{color:#4D6775}.plan-c li b{color:var(--ink)}.pricing-extras .addon,.addon{background:#F6FBFC;border:1px solid #DCEAF0;border-radius:18px}.autoscale{background:linear-gradient(135deg,#EAF8FB,#F8FCFD);border-radius:22px;box-shadow:inset 0 0 0 1px #D7EAF0}.plans-note span{background:#F0F8FA;border:1px solid #E0EDF2;color:#466270}
.pricing-detail{padding-top:40px}.compare-details{background:#fff;border:1px solid #D9E8EE;border-radius:20px;box-shadow:var(--shadow-card);overflow:hidden;margin-bottom:34px}.compare-details>summary{list-style:none;cursor:pointer;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:var(--display);font-weight:800;font-size:1.18rem;color:var(--ink)}.compare-details>summary::-webkit-details-marker{display:none}.compare-details>summary::after{content:'+';width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#E7F6FA;color:#087EA6;font-size:1.35rem}.compare-details[open]>summary::after{content:'–'}.compare-details>summary small{margin-left:auto;font-family:var(--body);font-size:.8rem;font-weight:600;color:var(--grey)}.compare-details .cmp-wrap{margin:0 18px 18px;border-radius:14px;box-shadow:none}.soon{background:linear-gradient(135deg,#F8FCFD,#EAF8FB);border-color:#CFE5ED;border-radius:24px}.addon--plus{background:#fff;border-radius:20px}.trains{gap:16px;background:transparent;border:0}.train{background:#fff;border:1px solid #DCEAF0;border-radius:18px;box-shadow:none}

/* CTA, FAQ, Kontakt */
.picks{gap:18px}.pick{border-radius:22px;border:1px solid #DCEAF0;box-shadow:none;padding:30px 27px;background:#fff}.pick:first-child{background:linear-gradient(145deg,#0A93BF,#08779C);border:0;color:#fff;box-shadow:0 26px 66px -42px rgba(8,119,156,.65)}.pick:first-child h3,.pick:first-child p{color:#fff}.pick:first-child .btn{background:#fff;color:#08779C;border-color:#fff}.faq{max-width:980px;gap:10px}.faq details{background:#fff;border:1px solid #DDEAF0;border-radius:15px;padding-inline:20px;box-shadow:none}.faq summary{color:var(--ink)}
.contact-grid{background:#0B2D41;border-color:#0B2D41;border-radius:22px;overflow:hidden}.contact-i{background:#0D354C;color:#DCEEF4;padding:30px 28px}.contact-i h3,.contact-i a{color:#fff}.ftr{background:#071F2E;color:#BFD3DD;padding-top:62px}.ftr a{color:#D7E8EF}.ftr__top{border-bottom-color:#173C50}
.sub-hero{background:linear-gradient(135deg,#F7FCFD,#EAF7FB)}.card{background:#fff;border:1px solid #DCEAF0;border-radius:20px;box-shadow:var(--shadow-card)}.field input,.field select,.field textarea{background:#fff;color:var(--ink);border-color:#CFE1E8;border-radius:11px}.field input:focus,.field select:focus,.field textarea:focus{background:#fff;border-color:var(--brand);box-shadow:0 0 0 3px rgba(10,152,197,.12)}.sum{background:#F5FAFC;border-color:#DDEAF0}

@media(max-width:1080px){.hero__in{grid-template-columns:.95fr 1.05fr;gap:38px}.hero__visual{min-height:500px}.mods{grid-template-columns:repeat(3,minmax(0,1fr))}.mod:nth-child(2),.mod:nth-child(3),.mod:nth-child(10){grid-column:span 1}.why-grid{grid-template-columns:1fr}.practice-card{position:relative;top:auto;display:grid;grid-template-columns:.8fr 1.2fr}.practice-card__photo{height:100%;min-height:220px}}
@media(max-width:940px){.nav{background:#fff;border-bottom-color:#DDEBF0}}
@media(max-width:900px){.hero{min-height:0;padding-top:58px}.hero__in{grid-template-columns:1fr}.hero__visual{min-height:620px}.hero h1{max-width:10ch}.hero-photo{inset:0 0 110px 0}.plan--overlay{right:20px;max-width:430px}.hero-float--one{left:14px}.hero-float--two{right:14px}.trust__in{grid-template-columns:1fr 1fr}.trust__i:nth-child(2){border-right:0}.trust__i{border-bottom:1px solid #E5EFF3}.mods{grid-template-columns:repeat(2,minmax(0,1fr))}.plan-c--hot{transform:none}}
@media(max-width:700px){.section{padding-block:66px}.hero{padding-bottom:78px}.hero h1{font-size:clamp(3rem,14vw,4.4rem)}.hero__visual{min-height:520px}.hero-photo{border-width:5px;border-radius:24px;inset:0 0 120px}.plan--overlay{width:76%;right:4px}.hero-float--two{top:14px}.hero-float--one{bottom:75px;left:0}.mods{grid-template-columns:1fr}.trust__in{grid-template-columns:1fr}.trust__i{border-right:0}.why-grid{gap:30px}.why-copy .checks--2col{grid-template-columns:1fr!important}.practice-card{grid-template-columns:1fr}.practice-card__photo{min-height:210px}.compare-details>summary small{display:none}}
@media(max-width:460px){.hero__visual{min-height:455px}.plan--overlay{width:86%}.hero-float{display:none}.hero__proof{display:grid}.hero__proof span{width:max-content;max-width:100%}}

/* ==========================================================================
   innBuild V4 — bildstark, menschlich, verkaufsorientiert
   ========================================================================== */

:root{
  --v4-navy:#082A40;
  --v4-navy-2:#0D3B55;
  --v4-blue:#0797C4;
  --v4-blue-dark:#08779B;
  --v4-sky:#EAF7FB;
  --v4-sky-2:#F5FBFD;
  --v4-text:#163647;
  --v4-muted:#607985;
  --v4-line:#D9E9EF;
  --v4-warm:#FFF8EA;
}
body{font-size:17px;color:var(--v4-text);background:#fff}
.lede{font-size:clamp(1.08rem,1.55vw,1.3rem);line-height:1.68;color:#55717F}
.section-head{max-width:790px}
.btn{border-radius:11px;padding:15px 25px;box-shadow:none}
.btn--primary{background:linear-gradient(135deg,#079BC9,#087BA1);border-color:#0792BD;box-shadow:0 13px 30px -18px rgba(7,123,161,.65)}
.btn--primary:hover{background:linear-gradient(135deg,#078CB6,#066C8D)}
.btn--ghost{background:#fff;border-color:#C8DDE5}
.btn--ghost:hover{background:#F5FBFD;border-color:#93C8D8}

/* Header ruhiger und hochwertiger */
.hdr{background:rgba(255,255,255,.94);border-bottom:1px solid rgba(206,226,234,.92);box-shadow:0 8px 24px -28px rgba(9,40,60,.55)}
.hdr__in{height:76px}
.nav{gap:25px}.nav a{font-size:.9rem;color:#294B5C}.hdr .btn{border-radius:10px}

/* Hero: echtes Bild statt technischer Zeichnung */
.hero-v4{padding-block:clamp(64px,7.3vw,104px) clamp(82px,8vw,118px);background:linear-gradient(135deg,#FFFFFF 0%,#F7FCFE 58%,#EAF7FB 100%)}
.hero-v4::before{opacity:.2;background-size:68px 68px;mask-image:linear-gradient(90deg,transparent 0%,#000 58%,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 58%,#000 100%)}
.hero-v4::after{width:520px;height:520px;right:-260px;bottom:-300px;background:rgba(10,152,197,.07)}
.hero-v4 .hero__in{grid-template-columns:minmax(0,.84fr) minmax(540px,1.16fr);gap:clamp(48px,6vw,82px);align-items:center}
.hero-v4 .hero__copy{padding-block:18px}
.hero-v4 h1{max-width:10.5ch;font-size:clamp(3.45rem,6.2vw,5.8rem);line-height:.95}
.hero-v4 h1 em{color:#078EB8;background:linear-gradient(180deg,transparent 70%,rgba(57,191,226,.18) 70%);width:max-content}
.hero-v4 h1 em::after{display:none}
.hero-v4 .hero__lede{max-width:49ch;margin-top:26px}
.hero-v4 .hero__proof{margin-top:26px;gap:9px}
.hero-v4 .hero__proof span{background:#fff;border-color:#DCECF2;box-shadow:0 10px 28px -24px rgba(8,42,64,.5);font-family:var(--body);font-size:.78rem;letter-spacing:0;padding:8px 11px}
.hero__visual--photo{min-height:590px;position:relative}
.hero-media{position:absolute;inset:0;margin:0;border-radius:32px;overflow:hidden;background:#DDEFF5;box-shadow:0 34px 90px -44px rgba(8,42,64,.5);border:7px solid rgba(255,255,255,.96)}
.hero-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(5,31,47,.28));pointer-events:none}
.hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.hero-media__cap{position:absolute;z-index:2;left:24px;bottom:22px;display:flex;align-items:center;gap:9px;padding:9px 13px;background:rgba(255,255,255,.93);border:1px solid rgba(255,255,255,.8);border-radius:999px;box-shadow:0 16px 34px -24px rgba(7,31,48,.6);font-size:.75rem;color:#45616E}
.hero-media__cap strong{color:#092D43}.hero-media__dot{width:8px;height:8px;border-radius:50%;background:#0BA2CF;box-shadow:0 0 0 4px rgba(11,162,207,.12)}
.hero-v4 .hero-float{border:1px solid rgba(204,226,234,.9);background:rgba(255,255,255,.96)}
.hero-v4 .hero-float--one{left:-25px;bottom:78px}.hero-v4 .hero-float--two{right:-18px;top:46px}

/* Faktenleiste weniger "Dashboard" */
.trust{background:#fff;border:0}.trust__in{transform:translateY(-30px);border-radius:20px;border:1px solid #DEEBF0;box-shadow:0 24px 60px -46px rgba(8,42,64,.5)}
.trust__n{color:#078DB6}.trust__l{color:#607985}

/* Produktbeweis */
.product-proof{background:linear-gradient(135deg,#F0FAFC,#E7F5F9);overflow:hidden;padding-block:clamp(72px,8vw,112px)}
.product-proof__grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(540px,1.22fr);gap:clamp(40px,6vw,84px);align-items:center}
.product-proof__copy h2{max-width:12ch}.product-proof__copy .lede{max-width:44ch;margin-top:22px}
.product-proof__checks{margin-top:30px;gap:17px}.product-proof__checks li{color:#466674}.product-proof__checks li b{display:inline;color:#123A4D}
.product-proof__link{display:inline-block;margin-top:28px;font-weight:750;text-decoration:none;color:#087EA6}
.product-proof__visual{position:relative;min-height:500px;display:grid;place-items:center}
.product-proof__visual::before{content:'';position:absolute;inset:13% 6% 5% 8%;background:linear-gradient(145deg,#0B3852,#061D2B);border-radius:38px;transform:rotate(-2deg);box-shadow:0 38px 90px -48px rgba(6,29,43,.65)}
.product-proof__glow{position:absolute;width:65%;height:60%;right:-10%;top:-8%;border-radius:50%;background:rgba(39,190,226,.25);filter:blur(70px)}
.product-proof__visual img{position:relative;z-index:2;width:108%;max-width:none;height:auto;filter:drop-shadow(0 26px 30px rgba(8,42,64,.22));transform:translateX(2%)}

/* Problemkarten mit mehr Lesbarkeit */
.section--tint{background:#F7FAFB}
.pains{grid-template-columns:repeat(2,1fr);gap:18px}.pain-i{padding:31px 30px;background:#fff}.pain-i__q{font-size:1.26rem}.pain-i__a{font-size:.96rem;color:#607985;line-height:1.65}

/* Module weniger technisch: weichere Karten und große Icons */
#funktionen{background:#fff}.mods{gap:18px}.mod{border-radius:22px;background:#FAFDFE;min-height:215px}.mod:nth-child(2),.mod:nth-child(3){background:linear-gradient(145deg,#EEF9FC,#F9FDFE)}
.mod__icon{width:48px;height:48px;border-radius:15px}.mod h3{font-size:1.2rem}.mod p{font-size:.94rem;line-height:1.64}

/* Bildstrecke: Praxis + Entwicklung */
.visual-story{background:#F1F8FA;padding-top:clamp(74px,8vw,108px)}
.visual-story__head{max-width:850px}.visual-story__head h2{max-width:16ch}
.visual-story__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:22px;align-items:stretch}
.story-card{background:#fff;border:1px solid #DCEAF0;border-radius:28px;overflow:hidden;box-shadow:0 24px 65px -52px rgba(8,42,64,.5)}
.story-card--dev{transform:translateY(38px)}
.story-card__media{aspect-ratio:16/10;overflow:hidden;background:#DCECF2}.story-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}.story-card:hover .story-card__media img{transform:scale(1.025)}
.story-card__body{padding:25px 27px 29px}.story-card__kicker{display:inline-grid;place-items:center;min-width:34px;height:30px;padding-inline:8px;border-radius:999px;background:#E6F6FA;color:#087EA6;font-family:var(--mono);font-size:.7rem;font-weight:700}
.story-card h3{font-size:1.38rem;margin:15px 0 8px}.story-card p{margin:0;color:#5D7784;line-height:1.62}

/* Signatur: luftiger */
.split .card{transform:none;border-radius:25px}.split{gap:clamp(46px,6vw,78px)}

/* Persönlicher Vertrauensanker */
.why-v4{background:#fff}.why-grid{grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);gap:55px;align-items:center}
#warum .checks--2col{grid-template-columns:1fr 1fr;gap:12px}
#warum .checks--2col li{border-radius:16px;padding:18px;background:#F8FCFD}
.practice-card--portrait{position:relative;top:auto;border:0;border-radius:30px;box-shadow:0 30px 70px -48px rgba(8,42,64,.58);background:#0B3148;overflow:hidden}
.practice-card--portrait .practice-card__photo{height:490px;background:#DDECF1}.practice-card--portrait .practice-card__photo img{object-position:center 18%;object-fit:cover}
.practice-card--portrait .practice-card__photo::after{background:linear-gradient(180deg,transparent 52%,rgba(7,30,44,.58))}
.practice-card--portrait .practice-card__body{padding:25px 27px 27px;background:#0B3148;color:#fff}
.practice-card--portrait .practice-card__body strong{color:#fff;font-size:1.25rem}.practice-card--portrait .practice-card__body span{color:#D5E7EE}.practice-card__eyebrow{font-family:var(--mono);font-size:.72rem!important;letter-spacing:.07em;text-transform:uppercase;color:#76D2EA!important}

/* Ablauf: Bild + drei klare Schritte statt technische Kartenwand */
.how-v4{background:linear-gradient(135deg,#F4FBFD,#E9F6F9);overflow:hidden}
.how-v4__grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(460px,1.12fr);gap:clamp(46px,6vw,80px);align-items:center}
.how-v4 .section-head{margin-bottom:30px}.how-v4 .section-head h2{max-width:12ch}
.steps--stack{display:grid;grid-template-columns:1fr;gap:12px}.steps--stack .step{display:grid;grid-template-columns:78px 1fr;column-gap:18px;align-items:start;padding:20px 21px;border:1px solid #D9E9EF;background:#fff;border-radius:18px;box-shadow:none}
.steps--stack .step__no{grid-row:1/3;margin:0;align-self:start;text-align:center;padding:9px 8px;background:#E8F7FB}.steps--stack .step h3{margin:1px 0 6px;font-size:1.16rem}.steps--stack .step p{font-size:.92rem}
.how-v4__media{margin:0;position:relative;border-radius:30px;overflow:hidden;min-height:590px;background:#D9E9EE;box-shadow:0 32px 78px -48px rgba(8,42,64,.55)}
.how-v4__media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(5,29,44,.45))}.how-v4__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.how-v4__media figcaption{position:absolute;z-index:2;left:25px;bottom:24px;display:grid;gap:2px;color:#fff}.how-v4__media figcaption span{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#CBEAF3}.how-v4__media figcaption strong{font-family:var(--display);font-size:1.4rem}

/* Preise: Lesbarkeit vor Dichte */
#pakete .section-head h2{max-width:13ch}.plan-c{border-radius:22px}.plan-c__desc{font-size:.9rem}.plan-c ul{font-size:.9rem}.pricing-detail{background:#F5FAFB}

/* Über-uns-Seite mit Portrait und Entwicklung */
.about-hero{background:linear-gradient(135deg,#F5FBFD,#E6F4F8);padding-block:clamp(54px,6vw,86px)}
.about-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:clamp(44px,7vw,90px);align-items:center}.about-hero__copy .sub-hero__h1{max-width:12ch}.about-hero__copy .lede{max-width:48ch;margin-top:24px}
.about-portrait{margin:0;border-radius:30px;overflow:hidden;background:#0A3047;box-shadow:0 34px 80px -50px rgba(8,42,64,.6)}.about-portrait img{width:100%;height:520px;object-fit:cover;object-position:center 18%;display:block}.about-portrait figcaption{display:grid;gap:5px;padding:22px 24px 25px;color:#fff;background:#0A3047}.about-portrait figcaption strong{font-size:1.12rem}.about-portrait figcaption span{font-size:.9rem;line-height:1.55;color:#CFE4EC}
.about-story__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.88fr);gap:clamp(48px,7vw,90px);align-items:center}.about-story .prose{margin-top:26px}.about-story .quote{margin-top:34px}.quote-who{margin:0;font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;color:var(--grey)}
.about-dev{margin:0;border-radius:30px;overflow:hidden;box-shadow:0 28px 70px -50px rgba(8,42,64,.55)}.about-dev img{width:100%;height:auto;display:block}
.about-cta{background:linear-gradient(145deg,#092D43,#0B4865);color:#fff}.about-cta h2{color:#fff}.about-cta .lede{color:#CBE0E8}

@media(max-width:1100px){
  .hero-v4 .hero__in{grid-template-columns:.9fr 1.1fr;gap:38px}.hero__visual--photo{min-height:520px}
  .product-proof__grid{grid-template-columns:.9fr 1.1fr;gap:38px}.product-proof__visual{min-height:430px}
  .why-grid{grid-template-columns:1fr}.practice-card--portrait{display:grid;grid-template-columns:360px 1fr}.practice-card--portrait .practice-card__photo{height:420px}.practice-card--portrait .practice-card__body{align-content:end}
  .how-v4__grid{grid-template-columns:1fr 1fr;gap:40px}.how-v4__media{min-height:520px}
}
@media(max-width:900px){
  .hero-v4 .hero__in,.product-proof__grid,.how-v4__grid,.about-hero__grid,.about-story__grid{grid-template-columns:1fr}
  .hero-v4 h1{max-width:11ch}.hero__visual--photo{min-height:560px}.hero-v4 .hero-float--one{left:10px}.hero-v4 .hero-float--two{right:10px}
  .product-proof__copy h2{max-width:15ch}.product-proof__visual{min-height:500px}.product-proof__visual img{width:100%;transform:none}
  .visual-story__grid{grid-template-columns:1fr}.story-card--dev{transform:none}
  .practice-card--portrait{grid-template-columns:1fr 1fr}.practice-card--portrait .practice-card__photo{height:430px}
  .how-v4__media{min-height:520px;order:-1}.steps--stack .step{grid-template-columns:70px 1fr}
  .about-hero__grid{grid-template-columns:1fr 340px}.about-portrait img{height:440px}
}
@media(max-width:760px){
  body{font-size:16px}.hero-v4{padding-top:48px}.hero-v4 h1{font-size:clamp(3rem,13vw,4.45rem)}.hero__visual--photo{min-height:440px}.hero-media{border-width:5px;border-radius:24px}.hero-media__cap{left:14px;bottom:14px}
  .hero-v4 .hero-float{display:none}.trust__in{transform:translateY(-18px)}
  .product-proof__visual{min-height:360px}.product-proof__visual::before{inset:17% 2% 4% 5%;border-radius:24px}
  .pains{grid-template-columns:1fr}.visual-story__grid{gap:16px}
  #warum .checks--2col{grid-template-columns:1fr}.practice-card--portrait{display:block}.practice-card--portrait .practice-card__photo{height:470px}
  .how-v4__media{min-height:430px}.steps--stack .step{grid-template-columns:1fr}.steps--stack .step__no{grid-row:auto;width:max-content;margin-bottom:5px}
  .about-hero__grid,.about-story__grid{grid-template-columns:1fr}.about-portrait{max-width:430px}.about-portrait img{height:500px}
}
@media(max-width:480px){
  .hero__visual--photo{min-height:330px}.hero-media__cap span:last-child{display:none}.product-proof__visual{min-height:270px}
  .practice-card--portrait .practice-card__photo{height:390px}.how-v4__media{min-height:340px}
}


/* ================================================================
   innBuild V4.2 — Hero ohne schwebende Blasen, Produktvisual clean
   ================================================================ */

/* Hero: das starke Baustellenbild spricht für sich. Keine losgelösten UI-Blasen. */
.hero-v4 .hero-float,
.hero-v4 .hero-media__cap{display:none!important}
.hero-v4 .hero__visual--photo{min-height:570px}
.hero-v4 .hero-media{
  inset:8px 0 8px 0;
  border-radius:30px;
  border:6px solid rgba(255,255,255,.98);
  box-shadow:0 30px 72px -42px rgba(8,42,64,.46),0 8px 24px -18px rgba(8,42,64,.2)
}
.hero-v4 .hero-media::after{
  background:linear-gradient(180deg,transparent 72%,rgba(5,31,47,.08));
}

/* Produktbeweis: echte UI auf einer ruhigen, hellen Präsentationsfläche. */
.product-proof__visual{
  min-height:520px;
  padding:32px 26px;
  border-radius:30px;
  background:linear-gradient(145deg,#FFFFFF 0%,#F8FCFD 55%,#EEF8FB 100%);
  border:1px solid #D8E9EF;
  box-shadow:0 28px 70px -52px rgba(8,42,64,.46);
  overflow:hidden;
}
.product-proof__visual::before{
  content:'';
  position:absolute;
  inset:18px;
  border-radius:23px;
  background:
    linear-gradient(rgba(10,152,197,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,152,197,.035) 1px,transparent 1px),
    #FBFEFF;
  background-size:32px 32px;
  transform:none;
  box-shadow:none;
  border:1px solid rgba(10,152,197,.07);
}
.product-proof__glow{
  width:48%;height:52%;right:-8%;top:-10%;
  background:rgba(36,183,219,.16);filter:blur(80px)
}
.product-proof__visual img{
  position:relative;z-index:2;
  width:104%;max-width:none;height:auto;
  transform:translateX(1%);
  filter:drop-shadow(0 24px 30px rgba(8,42,64,.16));
}
/* Die alten dekorativen Punkte/Pluszeichen liegen ausschließlich links unten
   außerhalb der eigentlichen Screens. Ein ruhiger Vordergrund blendet sie aus. */
.product-proof__visual::after{
  content:'';
  position:absolute;
  z-index:3;
  left:0;
  bottom:0;
  width:29%;
  height:35%;
  background:linear-gradient(145deg,#FBFEFF 0%,#F7FCFD 100%);
  border-bottom-left-radius:30px;
  pointer-events:none;
}

@media(max-width:900px){
  .hero-v4 .hero__visual--photo{min-height:540px}
  .product-proof__visual{min-height:430px;padding:24px 18px}
}
@media(max-width:700px){
  .hero-v4 .hero__visual--photo{min-height:430px}
  .product-proof__visual{min-height:330px;padding:18px 10px}
  .product-proof__visual::after{width:27%;height:34%}
}


/* ==========================================================================
   innBuild V4.3 — Kontaktspalte Telefon sauber untereinander
   ========================================================================== */
.contact-i > .eyebrow{
  display:flex;
  width:max-content;
  max-width:100%;
  margin:0 0 14px;
}
.contact-i > a{
  display:block;
}
.contact-i--phone > a{
  white-space:nowrap;
  line-height:1.25;
}
@media(max-width:420px){
  .contact-i--phone > a{
    white-space:normal;
  }
}


/* v4.4 — klare B2B-Netto-Preiskennzeichnung */\n.price-tax-note{margin:12px 0 0;color:#617987;font-size:.78rem;line-height:1.5}\n.price-tax-note--hero{max-width:54ch;margin-top:14px}\n.price-tax-note--pricing{max-width:78ch;margin:8px 0 24px;padding:10px 13px;border-left:3px solid #0A98C5;background:#F5FBFD;border-radius:0 10px 10px 0;color:#486673}\n.price-tax-note--order{margin:14px 0 20px;padding:10px 12px;background:#F5FBFD;border:1px solid #D8EBF1;border-radius:10px}\n.tax-under{margin:3px 0 0;font-size:.68rem;line-height:1.35;color:#718792;font-weight:600}\n.tax-under--right{text-align:right}\n.plan-c__price + .tax-under{margin-top:-7px;margin-bottom:10px}\n.train__p + .tax-under{margin-top:4px}\n@media(max-width:720px){.tax-under--right{text-align:left}.price-tax-note--hero{font-size:.74rem}}\n

/* ==========================================================================
   innBuild V4.5 — Kontaktseite mit persönlicher Bildsprache
   ========================================================================== */
.contact-forms{
  grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr);
  gap:clamp(32px,4.5vw,60px);
}
.contact-aside{
  display:grid;
  gap:16px;
  align-content:start;
}
.contact-emotion{
  position:relative;
  margin:0;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:24px;
  background:#E9F5F8;
  border:1px solid #D8E9EF;
  box-shadow:0 26px 70px -44px rgba(8,42,64,.48);
}
.contact-emotion img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 39%;
}
.contact-emotion::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 52%,rgba(4,35,53,.28) 100%);
  pointer-events:none;
}
.contact-emotion figcaption{
  position:absolute;
  z-index:2;
  left:18px;
  bottom:18px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  max-width:calc(100% - 36px);
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.86);
  box-shadow:0 12px 34px -20px rgba(5,36,54,.55);
  color:#0A3047;
  font-family:var(--display);
  font-weight:700;
  font-size:.86rem;
  line-height:1.2;
  backdrop-filter:blur(8px);
}
.contact-emotion__dot{
  width:9px;
  height:9px;
  flex:none;
  border-radius:50%;
  background:#0A9BC8;
  box-shadow:0 0 0 5px rgba(10,155,200,.12);
}
.contact-aside > .card{
  margin-top:0!important;
}
@media(max-width:940px){
  .contact-forms{grid-template-columns:1fr}
  .contact-aside{grid-template-columns:1fr 1fr;align-items:start}
  .contact-emotion{grid-column:1/-1;aspect-ratio:16/9}
  .contact-emotion img{object-position:center 35%}
}
@media(max-width:680px){
  .contact-aside{grid-template-columns:1fr}
  .contact-emotion{aspect-ratio:4/3}
  .contact-emotion figcaption{left:14px;bottom:14px;font-size:.8rem}
}

/* ==========================================================================
   innBuild V4.6 — Sammelupdate: Bildkarten, Preise, Bestell-Hero, Telefon
   ========================================================================== */

/* Praxis/Entwicklung: beide Karten exakt auf einer Linie und gleichwertig. */
.visual-story__grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}
.story-card,
.story-card--dev{
  transform:none;
  height:100%;
  display:flex;
  flex-direction:column;
}
.story-card__media{
  aspect-ratio:16/10;
  height:auto;
  flex:none;
}
.story-card__body{
  flex:1;
  display:flex;
  flex-direction:column;
}
.story-card__body p{margin-top:auto}

/* Preisraster: identische optische Achsen trotz unterschiedlicher Features. */
.plan-c{
  min-height:610px;
}
.plan-c__name{min-height:1.75rem}
.plan-c__desc{
  min-height:4.15rem;
  margin-bottom:18px;
}
.plan-c__price{
  min-height:3.2rem;
  margin:0;
}
.plan-c__price + .tax-under{
  min-height:1.05rem;
  margin-top:5px;
  margin-bottom:14px;
}
.plan-c__setup{
  min-height:2.8rem;
  margin:0 0 18px;
}
.plan-c ul{
  flex:1 1 auto;
  align-content:start;
  margin-bottom:22px;
}
.plan-c .btn{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Bestellseite: emotionales Startmotiv mit Helm + Kugelschreiber. */
.order-hero{overflow:hidden}
.order-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
  gap:clamp(42px,6vw,84px);
  align-items:center;
}
.order-hero__copy .sub-hero__h1{max-width:13ch}
.order-hero__art{
  position:relative;
  margin:0;
  justify-self:end;
  width:min(100%,590px);
  aspect-ratio:1.15/1;
  overflow:hidden;
  border-radius:30px;
  border:7px solid rgba(255,255,255,.96);
  background:#E8F5F8;
  box-shadow:0 30px 76px -44px rgba(8,42,64,.5);
  transform:rotate(1.2deg);
}
.order-hero__art img{
  width:100%;height:100%;object-fit:cover;display:block;
  object-position:center 48%;
}
.order-hero__art::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 70%,rgba(4,35,53,.08));
  pointer-events:none;
}
.order-hero__signmark{
  position:absolute;z-index:2;right:22px;bottom:22px;
  width:74px;height:74px;border-radius:22px;
  display:grid;place-items:center;
  color:#078EB8;background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 18px 38px -24px rgba(5,36,54,.55);
  transform:rotate(-4deg);
}

/* Telefonkarte: Symbol + Rufnummer als klare, freundliche Einheit. */
.phone-card{border-style:solid;background:#fff}
.phone-card__main{
  display:flex;align-items:center;gap:15px;margin:2px 0 10px;
}
.phone-card__icon{
  width:54px;height:54px;flex:none;border-radius:18px;
  display:grid;place-items:center;
  color:#078EB8;background:#E7F7FB;
  box-shadow:inset 0 0 0 1px #D2EEF5;
}
.phone-card .phone-big{margin:0;line-height:1.15}
.phone-card__note{margin:0 0 0 69px;font-size:.92rem;color:var(--grey);line-height:1.55}

@media(max-width:1080px){
  .plan-c{min-height:590px}
}
@media(max-width:940px){
  .order-hero__grid{grid-template-columns:1fr 420px;gap:34px}
  .order-hero__art{width:100%;border-radius:24px}
}
@media(max-width:820px){
  .order-hero__grid{grid-template-columns:1fr}
  .order-hero__art{justify-self:start;width:min(100%,620px);transform:none}
  .plan-c{min-height:0}
}
@media(max-width:760px){
  .visual-story__grid{grid-template-columns:1fr}
  .story-card,.story-card--dev{height:auto}
  .phone-card__note{margin-left:0}
}
@media(max-width:520px){
  .order-hero__art{aspect-ratio:1/1;border-width:5px;border-radius:22px}
  .order-hero__signmark{width:62px;height:62px;right:14px;bottom:14px;border-radius:18px}
  .phone-card__main{align-items:flex-start}
  .phone-card__icon{width:48px;height:48px;border-radius:15px}
}
/* V4.6: auch das hervorgehobene Business-Paket bleibt exakt im gemeinsamen Raster. */
#pakete .plan-c--hot{transform:none!important}

/* V5.3 — Hinweis zur maßgeblichen Sprache der Rechtstexte */
.legal-lang-note {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border-left: 3px solid var(--cyan, #0582af);
  border-radius: 0 8px 8px 0;
  background: rgba(5,130,175,.07);
  color: var(--grey, #5f6b76);
  font-size: .78rem;
  line-height: 1.5;
}
.legal-lang-note--footer {
  margin-top: 12px;
  max-width: 29ch;
  background: rgba(255,255,255,.06);
  border-left-color: rgba(111,195,228,.9);
  color: rgba(255,255,255,.72);
}