/* Canonical modernisation landing. Rules are scoped to this page. */
.page-modernisierung-b { --modb-deep: var(--gruen-dunkel); background: var(--papier); }
.page-modernisierung-b .container { max-width: 1220px; }
.page-modernisierung-b .modb { color: var(--tinte); }
.page-modernisierung-b .modb :is(h1, h2, h3, p, figure) { margin: 0; }
.page-modernisierung-b .modb :is(h1, h2, h3) { text-wrap: balance; overflow-wrap: anywhere; }
.page-modernisierung-b .modb h3 { hyphens: auto; }
.page-modernisierung-b .modb :is(p, li) { overflow-wrap: anywhere; }
.page-modernisierung-b .modb section[id] { scroll-margin-top: 100px; }
.page-modernisierung-b .modb :is(a, summary):focus { scroll-margin-top: 100px; }
.page-modernisierung-b .modb section { padding-block: clamp(3rem, 6vw, 5rem); }
.page-modernisierung-b .modb-eyebrow {
  display: block;
  margin-bottom: var(--space-4);
  color: var(--gruen-dunkel);
  font: 500 0.72rem/1.5 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.page-modernisierung-b .modb-section-head { margin-bottom: var(--space-8); }
.page-modernisierung-b .modb-section-head h2,
.page-modernisierung-b .modb-faq h2,
.page-modernisierung-b .modb-final h2 {
  max-width: 23ch;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.045em;
}
.page-modernisierung-b .modb-section-head > p { max-width: 46ch; margin-top: var(--space-4); color: var(--grau); font-size: 1rem; }
.page-modernisierung-b .modb .btn { min-height: 48px; gap: var(--space-3); border-radius: var(--radius-s); line-height: 1.4; text-align: center; }
.page-modernisierung-b .modb .btn > span[aria-hidden] { font-size: 1.25em; }
.page-modernisierung-b .modb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); }
.page-modernisierung-b .modb-secondary-link {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px;
  color: var(--tinte); font-size: 0.9rem; font-weight: 600;
  text-underline-offset: 5px; text-decoration-color: var(--grau);
}
.page-modernisierung-b .modb-secondary-link:hover { color: var(--gruen); }
.page-modernisierung-b .modb-btn-outline { color: var(--gruen-dunkel); background: var(--karte); border: 1px solid var(--gruen); }
.page-modernisierung-b .modb-btn-outline:hover { background: var(--gruen-tint); }

/* The offer and primary action precede the illustration on small screens. */
.page-modernisierung-b .modb .modb-hero { padding-block: 0; background: var(--papier); isolation: isolate; }
.page-modernisierung-b .modb-hero-grid {
  display: grid; grid-template-areas: "copy" "visual" "trust"; gap: var(--space-8);
  padding-top: clamp(2.5rem, 5vw, 4rem);
}
.page-modernisierung-b .modb-hero-copy { grid-area: copy; min-width: 0; }
.page-modernisierung-b .modb-hero h1 { font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 650; line-height: 1.04; letter-spacing: -0.052em; }
.page-modernisierung-b .modb-hero h1 > span { display: block; color: var(--gruen); }
.page-modernisierung-b .modb-hero-lead {
  max-width: 53ch; margin-block: var(--space-6) !important;
  color: var(--grau); font-size: 1.0625rem; line-height: 1.65; text-wrap: pretty;
}
/* The illustration shares the hero's paper surface instead of sitting in a card. */
.page-modernisierung-b .modb-hero-visual {
  grid-area: visual; align-self: center; min-width: 0; mix-blend-mode: multiply;
}
.page-modernisierung-b .modb-hero-visual :is(picture, img) { display: block; width: 100%; }
.page-modernisierung-b .modb-hero-visual img {
  height: auto; aspect-ratio: 4 / 3; object-fit: contain;
}
.page-modernisierung-b .modb-trust-grid {
  grid-area: trust; display: grid; gap: var(--space-4); padding: var(--space-6) 0;
  margin: 0; list-style: none; border-top: 1px solid var(--linie);
}
.page-modernisierung-b .modb-trust-item { display: flex; align-items: center; gap: var(--space-3); font-size: 0.82rem; line-height: 1.5; font-weight: 500; }
.page-modernisierung-b .modb-trust-item .icon { width: 22px; height: 22px; stroke: var(--gruen); }

/* Native anchors and a contextual action; reserved space prevents layout shifts. */
.page-modernisierung-b .modb-page-nav { position: sticky; top: 0; z-index: 10; background: var(--karte); border-block: 1px solid var(--linie); }
.page-modernisierung-b .modb-page-nav > .container {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  min-height: 76px; padding-block: var(--space-2);
}
.page-modernisierung-b .modb-page-links { display: flex; gap: var(--space-8); }
.page-modernisierung-b .modb-page-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--grau); font-size: 0.9rem; text-decoration: none; }
.page-modernisierung-b .modb-page-links a:first-child { color: var(--tinte); font-weight: 600; }
.page-modernisierung-b .modb-page-links a:hover { color: var(--gruen); text-decoration: underline; text-underline-offset: 4px; }
.page-modernisierung-b .modb-page-nav .btn { font-size: 0.85rem; }

/* Prices come from the existing catalogue; no arbitrary recommended package. */
.page-modernisierung-b .modb-offer-grid { display: grid; gap: var(--space-4); }
.page-modernisierung-b .modb-offer { display: flex; flex-direction: column; min-width: 0; padding: var(--space-6); background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius-m); }
.page-modernisierung-b .modb-offer-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-6); }
.page-modernisierung-b .modb-offer-top .icon { width: 32px; height: 32px; stroke: var(--gruen); }
.page-modernisierung-b .modb-offer-top > span { font: 400 0.75rem/1.5 var(--mono); color: var(--grau); }
.page-modernisierung-b .modb-offer-situation { color: var(--grau); font-size: 0.92rem; line-height: 1.6; }
.page-modernisierung-b .modb-offer h3 { margin-top: var(--space-4); font-size: 1.65rem; letter-spacing: -0.035em; line-height: 1.16; font-weight: 650; }
.page-modernisierung-b .modb-offer-price { display: grid; gap: var(--space-2); margin-top: var(--space-6); }
.page-modernisierung-b .modb-offer-price strong { color: var(--gruen-dunkel); font-size: 1.3rem; font-weight: 600; line-height: 1.35; }
.page-modernisierung-b .modb-offer-price > span { color: var(--grau); font-size: 0.75rem; line-height: 1.5; }
.page-modernisierung-b .modb-offer ul { display: grid; gap: var(--space-3); list-style: none; margin-block: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--linie); }
.page-modernisierung-b .modb-offer li { display: flex; gap: var(--space-2); font-size: 0.88rem; line-height: 1.6; }
.page-modernisierung-b .modb-offer li .check { margin-top: 4px; }
.page-modernisierung-b .modb-offer .btn { margin-top: auto; padding-inline: var(--space-3); font-size: 0.85rem; }
.page-modernisierung-b .modb-offers .b2b-seitenhinweis { margin-top: var(--space-6); color: var(--grau); font-size: 0.78rem; }

/* Real project experience, with the existing team portraits. */
.page-modernisierung-b .modb-proof { background: var(--karte); border-block: 1px solid var(--linie); }
.page-modernisierung-b .modb-case-grid { display: grid; gap: var(--space-8); }
.page-modernisierung-b .modb-case { min-width: 0; padding-top: var(--space-6); border-top: 1px solid var(--linie); }
.page-modernisierung-b .modb-case-head {
  display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-6);
  background: none; border: 0; color: var(--gruen-dunkel);
  font: 500 0.7rem/1.5 var(--mono); text-transform: uppercase;
}
.page-modernisierung-b .modb-case-label { color: var(--grau); font: 400 0.65rem/1.5 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.page-modernisierung-b .modb-case h3 { margin-block: var(--space-2) var(--space-6); font-size: 1.3rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.025em; }
.page-modernisierung-b .modb-case > p:not(.modb-case-label) { margin-top: var(--space-2); color: var(--grau); font-size: 0.92rem; line-height: 1.65; }
.page-modernisierung-b .modb-case-link { display: inline-block; margin-top: var(--space-6); font-weight: 600; }
.page-modernisierung-b .modb-team-proof { display: flex; align-items: center; gap: var(--space-6); margin-bottom: var(--space-8); padding: var(--space-6); background: var(--papier); border-radius: var(--radius-m); }
.page-modernisierung-b .modb-team-faces { display: flex; flex: none; padding-left: var(--space-2); }
.page-modernisierung-b .modb-team-faces picture { display: block; width: 68px; height: 68px; margin-left: -8px; border: 3px solid var(--papier); border-radius: 50%; overflow: hidden; }
.page-modernisierung-b .modb-team-faces img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-modernisierung-b .modb-team-proof p { display: grid; gap: var(--space-1); max-width: 64ch; font-size: 0.94rem; line-height: 1.65; }

/* Emphasise the free assessment rather than the optional paid step. */
.page-modernisierung-b .modb-ladder-grid { display: grid; gap: var(--space-6); padding: 0; margin: 0; list-style: none; }
.page-modernisierung-b .modb-ladder-grid li { position: relative; min-width: 0; padding: var(--space-6); border-top: 2px solid var(--linie); }
.page-modernisierung-b .modb-ladder-grid li:first-child { background: var(--gruen-tint); border-color: var(--gruen); border-radius: 0 0 var(--radius-m) var(--radius-m); }
.page-modernisierung-b .modb-step-number { display: block; margin-bottom: var(--space-8); color: var(--gruen); font: 500 1.7rem/1 var(--mono); }
.page-modernisierung-b .modb-step-price { display: block; margin-bottom: var(--space-3); color: var(--gruen-dunkel); font: 500 0.75rem/1.5 var(--mono); text-transform: uppercase; }
.page-modernisierung-b .modb-ladder-grid h3 { margin-bottom: var(--space-3); font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.25; }
.page-modernisierung-b .modb-ladder-grid p { color: var(--grau); font-size: 0.92rem; line-height: 1.65; }
.page-modernisierung-b .modb-ladder-note { display: flex; gap: var(--space-3); max-width: 78ch; margin-top: var(--space-6); color: var(--grau); font-size: 0.85rem; }
.page-modernisierung-b .modb-ladder-note .icon { stroke: var(--gruen); }
/* Kurze Karte, ausführliche Antwort im FAQ: der Link führt zur passenden Frage. */
.page-modernisierung-b .modb-step-link { display: inline-block; margin-top: var(--space-4); color: var(--gruen-dunkel); font-size: 0.9rem; font-weight: 600; text-underline-offset: 4px; }
.page-modernisierung-b .modb-step-link:hover { color: var(--gruen); }
.page-modernisierung-b .modb-faq-list details[id] { scroll-margin-top: 100px; }

/* Outcomes and handover documents are grouped; hero guarantees are not repeated. */
.page-modernisierung-b .modb-outcomes { background: var(--gruen-tint); }
.page-modernisierung-b .modb-assurance-grid { display: grid; gap: var(--space-8); align-items: start; }
.page-modernisierung-b .modb-outcome-grid { display: grid; gap: var(--space-6); }
.page-modernisierung-b .modb-outcome-grid article { display: flex; gap: var(--space-4); }
.page-modernisierung-b .modb-outcome-grid .icon { stroke: var(--gruen); margin-top: 2px; }
.page-modernisierung-b .modb-outcome-grid h3 { margin-bottom: var(--space-2); font-size: 1.15rem; font-weight: 650; line-height: 1.3; }
.page-modernisierung-b .modb-outcome-grid p { max-width: 50ch; color: var(--grau); font-size: 0.95rem; line-height: 1.65; }
.page-modernisierung-b .modb-deliverables { padding: var(--space-8); background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius-m); }
.page-modernisierung-b .modb-deliverables h3 { max-width: 20ch; font-size: 1.65rem; letter-spacing: -0.035em; line-height: 1.15; }
.page-modernisierung-b .modb-deliverables-list { display: grid; gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--linie); list-style: none; }
.page-modernisierung-b .modb-deliverables-list li { display: flex; gap: var(--space-3); font-size: 0.9rem; line-height: 1.6; }
.page-modernisierung-b .modb-deliverables-list .check { margin-top: 4px; }

.page-modernisierung-b .modb-faq-grid { display: grid; gap: var(--space-8); }
.page-modernisierung-b .modb-faq-intro p { margin-top: var(--space-6); font-size: 0.9rem; }
.page-modernisierung-b .modb-faq-intro a { color: var(--gruen-dunkel); text-underline-offset: 4px; }
.page-modernisierung-b .modb-faq-list details { border-bottom: 1px solid var(--linie); }
.page-modernisierung-b .modb-faq-list details:first-child { border-top: 1px solid var(--linie); }
.page-modernisierung-b .modb-faq-list summary { display: flex; align-items: baseline; gap: var(--space-4); padding-block: var(--space-6); min-height: 48px; list-style: none; cursor: pointer; font-size: 1rem; font-weight: 600; line-height: 1.5; }
.page-modernisierung-b .modb-faq-list summary::-webkit-details-marker { display: none; }
.page-modernisierung-b .modb-faq-list summary > span { color: var(--gruen); font: 400 0.75rem/1.5 var(--mono); }
.page-modernisierung-b .modb-faq-list summary::after { content: "+"; flex: none; margin-left: auto; color: var(--gruen); font-size: 1.25rem; }
.page-modernisierung-b .modb-faq-list details[open] summary::after { content: "−"; }
.page-modernisierung-b .modb-faq-list details p { padding: 0 0 var(--space-6) var(--space-8); color: var(--grau); font-size: 0.94rem; line-height: 1.7; }

.page-modernisierung-b .modb-final { color: var(--karte); background: var(--gruen-dunkel); }
.page-modernisierung-b .modb-final-grid { display: grid; align-items: center; gap: var(--space-8); }
.page-modernisierung-b .modb-final .modb-eyebrow { color: var(--gruen-tint); }
.page-modernisierung-b .modb-final h2 { max-width: 20ch; font-size: clamp(2.3rem, 4.2vw, 3.5rem); }
.page-modernisierung-b .modb-final p { max-width: 54ch; margin-top: var(--space-6); color: var(--gruen-tint); font-size: 1rem; }
.page-modernisierung-b .modb-final-action { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.page-modernisierung-b .modb-primary-inverse { background: var(--karte); color: var(--gruen-dunkel); }
.page-modernisierung-b .modb-primary-inverse:hover { background: var(--gruen-tint); }
.page-modernisierung-b .modb-final-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--karte); font-size: 0.9rem; text-underline-offset: 5px; }
.page-modernisierung-b .modb-final small { max-width: 43ch; color: var(--gruen-tint); font-size: 0.78rem; line-height: 1.7; }
.page-modernisierung-b .modb-final :focus-visible { outline-color: var(--karte); }

@media (min-width: 720px) {
  .page-modernisierung-b .modb-trust-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .page-modernisierung-b .modb-section-head--split { display: grid; grid-template-columns: 1.3fr 1fr; align-items: end; gap: var(--space-12); }
  .page-modernisierung-b .modb-section-head > p { margin-top: 0; }
  .page-modernisierung-b .modb-assurance-grid { grid-template-columns: 1.2fr 1fr; gap: var(--space-12); }
  .page-modernisierung-b .modb-faq-grid { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-12); }
}
@media (min-width: 900px) {
  .page-modernisierung-b .modb-hero-grid { grid-template-columns: 1.1fr 1fr; grid-template-areas: "copy visual" "trust trust"; column-gap: var(--space-4); }
  .page-modernisierung-b .modb-hero-copy { align-self: center; padding-block: var(--space-4); }
  .page-modernisierung-b .modb-offer-grid,
  .page-modernisierung-b .modb-case-grid,
  .page-modernisierung-b .modb-ladder-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-modernisierung-b .modb-offer-situation { min-height: 3em; }
  .page-modernisierung-b .modb-offer h3 { min-height: 2.32em; }
  .page-modernisierung-b .modb-offer-price { min-height: 5.1rem; }
  .page-modernisierung-b .modb-final-grid { grid-template-columns: 1.4fr 1fr; gap: var(--space-16); }
}
@media (min-width: 1220px) {
  .page-modernisierung-b .modb-hero-visual { width: calc(100% + 32px); }
}
@media (min-width: 1380px) {
  .page-modernisierung-b .modb-hero-visual { width: calc(100% + 80px); }
}
@media (max-width: 899px) {
  .page-modernisierung-b .modb-hero-visual { max-width: 560px; width: 100%; justify-self: center; }
  .page-modernisierung-b .modb-hero h1 { font-size: clamp(2.6rem, 7.2vw, 4rem); }
  .page-modernisierung-b .modb-hero-lead { max-width: 60ch; }
  .page-modernisierung-b .modb-page-links { gap: var(--space-4); }
  .page-modernisierung-b .modb-page-links a:last-child { display: none; }
}
@media (max-width: 599px) {
  .page-modernisierung-b .container { padding-inline: var(--space-6); }
  .page-modernisierung-b > header .container { padding-inline: var(--space-4); }
  .page-modernisierung-b .modb-hero h1 { font-size: clamp(2.15rem, 9.2vw, 3.5rem); }
  .page-modernisierung-b .modb-hero .modb-eyebrow { font-size: 0.65rem; letter-spacing: 0.06em; }
  .page-modernisierung-b .modb-hero-lead { font-size: 1rem; margin-block: var(--space-4) var(--space-6) !important; }
  .page-modernisierung-b .modb-actions { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .page-modernisierung-b .modb-actions > .btn { min-height: 54px; font-size: 0.94rem; }
  .page-modernisierung-b .modb-secondary-link { justify-content: center; font-size: 0.85rem; }
  .page-modernisierung-b .modb-trust-grid { gap: var(--space-3); }
  .page-modernisierung-b .modb-trust-item { font-size: 0.8rem; }
  .page-modernisierung-b .modb-page-nav > .container { gap: var(--space-2); min-height: 68px; padding-inline: var(--space-4); }
  .page-modernisierung-b .modb-page-links a { font-size: 0.78rem; }
  .page-modernisierung-b .modb-page-links a:not(:first-child) { display: none; }
  .page-modernisierung-b .modb-page-nav .btn { max-width: 65%; min-height: 44px; padding: var(--space-3); font-size: 0.75rem; gap: var(--space-2); }
  .page-modernisierung-b .modb-team-proof { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .page-modernisierung-b .modb-deliverables { padding: var(--space-6); }
  .page-modernisierung-b .modb-final-action { align-items: stretch; }
  .page-modernisierung-b .modb-final-link { justify-content: center; }
  .page-modernisierung-b .modb-faq-list summary { gap: var(--space-3); font-size: 0.94rem; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.page-modernisierung-b) { scroll-behavior: auto; }
  .page-modernisierung-b .btn { transition: none; }
  .page-modernisierung-b .btn:hover { transform: none; }
}
@media (max-height: 450px), print { .page-modernisierung-b .modb-page-nav { position: static; } }
@media print {
  .page-modernisierung-b .modb-page-nav { display: none; }
  .page-modernisierung-b .modb section { padding-block: var(--space-6); }
  .page-modernisierung-b .modb-final { color: var(--tinte); background: var(--papier); }
  .page-modernisierung-b .modb-final :is(p, small, a, .modb-eyebrow) { color: var(--tinte); }
}