:root {
  --navy: #0b2545;
  --navy-deep: #06172e;
  --navy-light: #173f6b;
  --navy-glass: #103758;
  --blue: #2b53f3;
  --blue-hover: #2143c9;
  --mint: #5dfdbd;
  --white: #fff;
  --off-white: #f8faf5;
  --pale-blue: #e7f3ff;
  --ink: #1e1e1e;
  --muted: #4a5a6e;
  /* leise Textfarbe auf hellem Grund — 4,78:1 auf Weiss, 4,55:1 auf Canvas */
  --ink-quiet: #5b7590;
  /* Fliesstext im Ratgeber */
  --ink-prose: #34465a;
  /* Textskala auf dunklen Flaechen — hell nach leise, alle >= 4,5:1 auf Navy */
  --ink-on-deep: #f8faf5;
  --ink-on-deep-soft: #dce8f5;
  --link-on-deep: #cfe1f4;
  --ink-lead-on-deep: #bfd0e2;
  --ink-muted-on-deep: #a8bed6;
  --ink-quiet-on-deep: #8ea8c4;
  --line: #d5dfe9;
  --line-strong: #9eb1c5;
  --line-dark: #254a73;
  --surface-panel: #102f52;
  --veil-on-deep: rgba(255, 255, 255, .09);
  --veil-on-deep-hover: rgba(255, 255, 255, .14);
  --line-on-deep: rgba(220, 232, 245, .18);
  --grad-band: linear-gradient(120deg, #0b2545 0%, #102e52 46%, #1b4570 100%);
  --shadow-header: inset 0 1px 0 rgba(255, 255, 255, .09), 0 18px 44px rgba(1, 12, 26, .24);
  --font: var(--font-geist);
  --wrap: min(1240px, calc(100% - 80px));
  --wrap-copy: min(780px, calc(100% - 40px));
  --section: clamp(78px, 8vw, 124px);
  --shadow-hover: 0 16px 38px rgba(11, 37, 69, .1);
  --card-corner-gap: 18px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--off-white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

.header-scroll-sentinel {
  position: absolute;
  top: 12px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

button, a { -webkit-tap-highlight-color: transparent; }

button, input, textarea { font: inherit; }

h1, h2, h3, h4, p { margin-top: 0; }

h1, h2, h3, h4 {
  color: var(--navy);
  font-weight: 650;
  letter-spacing: -.035em;
  line-height: 1.08;
}

h1 { max-width: 13ch; margin-bottom: 26px; font-size: clamp(3rem, 5.8vw, 5.7rem); }
h2 { margin-bottom: 22px; font-size: clamp(2.1rem, 3.7vw, 3.7rem); }
h3 { margin-bottom: 12px; font-size: clamp(1.28rem, 1.85vw, 1.68rem); letter-spacing: -.025em; line-height: 1.18; }
h4 { font-size: 1.05rem; letter-spacing: -.01em; }
p { margin-bottom: 22px; }

.wrap { width: var(--wrap); margin-inline: auto; }
.wrap-copy { width: var(--wrap-copy); margin-inline: auto; }
.section { padding: var(--section) 0; }
.section-white { background: var(--white); }
.section-blue { background: var(--pale-blue); }
.section-lined { border-top: 1px solid var(--line); }
.section-dark { background: var(--navy); color: var(--white); }
.section-dark h2, .section-dark h3 { color: var(--white); }
.section-dark p { color: var(--ink-muted-on-deep); }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  border-radius: 4px;
  background: var(--mint);
  color: var(--navy);
  font-weight: 750;
  transform: translateY(-160%);
  transition: transform .16s ease;
}

.skip-link:focus { transform: translateY(0); }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.on-dark :focus-visible, .section-dark :focus-visible { outline-color: var(--mint); }

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  isolation: isolate;
  border-bottom: 1px solid rgba(220, 232, 245, .18);
  background: rgba(16, 55, 88, .94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 10px 30px rgba(1, 12, 26, .1);
  color: var(--white);
  -webkit-backdrop-filter: saturate(135%) blur(18px);
  backdrop-filter: saturate(135%) blur(18px);
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.site-header.is-scrolled {
  border-bottom-color: rgba(220, 232, 245, .25);
  background: rgba(9, 39, 68, .96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 18px 44px rgba(1, 12, 26, .24);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header { background: rgba(16, 55, 88, .8); }
  .site-header.is-scrolled { background: rgba(9, 39, 68, .88); }
}

.header-inner {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.logo { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
.logo img { width: 132px; height: auto; }

.desktop-nav { display: flex; align-items: center; gap: clamp(18px, 2.1vw, 34px); }

.desktop-nav > a {
  position: relative;
  min-width: 44px;
  padding: 25px 0 22px;
  color: var(--ink-on-deep);
  font-size: .9rem;
  font-weight: 650;
  text-decoration: none;
}

.desktop-nav > a:not(.nav-cta)::after {
  position: absolute;
  right: 0;
  bottom: 17px;
  left: 0;
  height: 2px;
  background: var(--mint);
  content: "";
  opacity: 0;
  transform: scaleX(.2);
  transition: opacity .16s ease, transform .16s ease;
}

.desktop-nav > a:hover::after,
.desktop-nav > a[aria-current="page"]::after { opacity: 1; transform: scaleX(1); }

.desktop-nav .nav-cta {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  color: var(--white);
}

.desktop-nav .nav-cta:hover { border-color: var(--mint); background: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13); }

.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 6px;
  background: transparent;
  color: var(--white);
  cursor: pointer;
}

.menu-icon { display: grid; gap: 5px; width: 22px; }
.menu-icon span { display: block; height: 2px; background: currentColor; transition: transform .16s ease, opacity .16s ease; }
.menu-toggle[aria-expanded="true"] .menu-icon span:first-child { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-icon span:last-child { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav { display: none; }

.button {
  display: inline-flex;
  min-height: 52px;
  padding: 0 24px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  font-size: .95rem;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.button:hover { background: var(--blue-hover); }
.button-light { background: var(--white); color: var(--navy); }
.button-light:hover { background: var(--pale-blue); }
.button-ghost { border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .06); }
.button-ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, .12); }
.button-outline { border-color: var(--navy); background: transparent; color: var(--navy); }
.button-outline:hover { background: var(--navy); color: var(--white); }

.text-link { color: var(--blue); font-weight: 750; text-decoration: underline; }
.text-link::after { content: "  →"; }

.page-hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 84px;
  background: var(--navy-deep);
  color: var(--white);
}

.leistungen-hero { padding: 40px 0 68px; }
.leistungen-hero .breadcrumbs { margin-bottom: 30px; }
.leistungen-hero h1 { max-width: 14ch; margin-bottom: 22px; font-size: clamp(3rem, 5vw, 4.8rem); }
.leistungen-hero .hero-lead { margin-bottom: 24px; font-size: clamp(1.03rem, 1.3vw, 1.18rem); line-height: 1.58; }

.breadcrumbs { margin-bottom: 42px; color: var(--ink-muted-on-deep); font-size: .82rem; }
.breadcrumbs ol { display: flex; margin: 0; padding: 0; flex-wrap: wrap; gap: 9px; list-style: none; }
/* Trenner steht standardmaessig auf dem dunklen Hero -> Skala fuer Dunkelflaechen.
   Seiten mit hellem Breadcrumb setzen ihn unten auf --ink-quiet zurueck. */
.breadcrumbs li:not(:last-child)::after { margin-left: 9px; content: "/"; color: var(--ink-quiet-on-deep); }
.breadcrumbs a { color: var(--ink-on-deep); }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(320px, .78fr); gap: clamp(52px, 7vw, 100px); align-items: center; }
.page-hero h1 { color: var(--white); }
.hero-lead { max-width: 64ch; margin-bottom: 30px; color: var(--ink-on-deep); font-size: clamp(1.08rem, 1.45vw, 1.28rem); line-height: 1.67; }
.hero-lead strong { color: var(--white); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { margin: 18px 0 0; color: var(--ink-muted-on-deep); font-size: .84rem; }
.section-actions { display: flex; margin-top: clamp(28px, 4vw, 40px); flex-wrap: wrap; gap: 12px; align-items: center; }

/* Grid-Elemente haben per Default min-width: auto und koennen dadurch nicht unter ihre
   Inhaltsmindestbreite schrumpfen — auf schmalen Viewports sprengt das die Spalte.
   Gilt fuer alle Hero- und Profil-Raster gleichermassen. */
.hero-grid > *,
.profile-grid > *,
.collaboration-grid > *,
.article-layout > * {
  min-width: 0;
}

.system-panel,
.hero-summary {
  position: relative;
  min-width: 0;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid rgba(207, 225, 244, .22);
  border-radius: 20px;
  background: var(--surface-panel);
  box-shadow: 0 24px 58px rgba(3, 19, 39, .28);
}

.system-panel::before,
.hero-summary::before {
  position: absolute;
  top: calc(-1 * var(--card-corner-gap));
  right: calc(-1 * var(--card-corner-gap));
  width: 52px;
  height: 52px;
  border-top: 2px solid var(--mint);
  border-right: 2px solid var(--mint);
  content: "";
}

.system-panel::after,
.hero-summary::after {
  position: absolute;
  bottom: calc(-1 * var(--card-corner-gap));
  left: calc(-1 * var(--card-corner-gap));
  width: 52px;
  height: 52px;
  border-bottom: 2px solid var(--mint);
  border-left: 2px solid var(--mint);
  content: "";
}

.panel-label { margin-bottom: 24px; color: var(--mint); font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.system-panel .panel-label { font-size: .86rem; letter-spacing: .1em; line-height: 1.35; }
.system-flow { display: grid; }
.flow-step { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(207, 225, 244, .16); }
.flow-step:last-child { border-bottom: 1px solid rgba(207, 225, 244, .16); }
.flow-step span { display: flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: 1px solid rgba(93, 253, 189, .45); border-radius: 50%; color: var(--mint); font-size: .76rem; font-weight: 800; }
.flow-step strong { display: block; color: var(--white); font-size: .98rem; }
.flow-step small { display: block; color: var(--ink-muted-on-deep); font-size: .8rem; line-height: 1.45; }
.system-result { margin: 22px 0 0; color: var(--white); font-size: 1.12rem; font-weight: 700; line-height: 1.45; }

.summary-problem { margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px solid rgba(207, 225, 244, .16); }
.summary-problem strong { display: block; margin-bottom: 7px; color: var(--white); font-size: 1.14rem; }
.summary-problem span { color: var(--ink-muted-on-deep); font-size: .9rem; }
.summary-list { display: grid; gap: 14px; margin: 0 0 28px; padding: 0; list-style: none; }
.summary-list li { position: relative; padding-left: 24px; color: var(--ink-on-deep); font-size: .92rem; }
.summary-list li::before { position: absolute; left: 0; content: "✓"; color: var(--mint); font-weight: 800; }
.summary-price { margin: 0; padding-top: 22px; border-top: 1px solid rgba(207, 225, 244, .16); color: var(--ink-muted-on-deep); font-size: .82rem; }
.summary-price strong { display: block; color: var(--white); font-size: clamp(1.7rem, 3vw, 2.45rem); letter-spacing: -.04em; }
.hero-summary-sold-out { margin-top: 14px; }
.availability-banner {
  position: absolute;
  z-index: 2;
  top: -18px;
  right: auto;
  left: 24px;
  margin: 0;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
  background: var(--mint);
  box-shadow: 0 10px 24px rgba(3, 19, 39, .3);
  color: var(--navy-deep);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.trust-strip { padding: 28px 0; border-bottom: 1px solid var(--line); background: var(--white); }
.trust-inner { display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.trust-copy { margin: 0; color: var(--muted); font-size: .85rem; font-weight: 650; }
.trust-items { display: flex; align-items: center; justify-content: flex-end; gap: clamp(26px, 4vw, 58px); }
.trust-items img { max-width: 148px; max-height: 48px; object-fit: contain; }
.certificate { display: flex; align-items: center; gap: 10px; color: var(--navy); font-size: .72rem; font-weight: 700; line-height: 1.3; }
.certificate span:first-child { display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 50%; background: var(--navy); color: var(--white); font-size: .72rem; }

.section-heading { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .75fr); gap: 50px; align-items: end; margin-bottom: clamp(42px, 5vw, 68px); }
.section-heading h2 { max-width: 14ch; margin-bottom: 0; }
.section-heading p { margin-bottom: 4px; color: var(--muted); }
.section-dark .section-heading p { color: var(--ink-muted-on-deep); }

.statement-heading {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-bottom: clamp(48px, 6vw, 76px);
}
.statement-heading h2 {
  grid-column: 1 / 10;
  max-width: 16ch;
  margin: 0;
  font-size: clamp(2.7rem, 4.8vw, 4.9rem);
  letter-spacing: -.045em;
}
.statement-heading p {
  grid-column: 8 / 13;
  margin: clamp(28px, 4vw, 48px) 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 1.03rem;
}

.choice-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 1px minmax(280px, .72fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
  margin-bottom: clamp(48px, 6vw, 76px);
}
.choice-heading::before {
  width: 1px;
  min-height: 112px;
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  background: var(--line-strong);
  content: "";
}
.choice-heading h2 {
  grid-column: 1;
  grid-row: 1;
  max-width: 15ch;
  margin: 0;
  font-size: clamp(2.5rem, 4.2vw, 4.25rem);
}
.choice-heading p {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.outcome-heading {
  display: grid;
  grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 6vw, 82px);
  align-items: center;
  margin-bottom: clamp(42px, 5vw, 68px);
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.outcome-heading h2 {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(2.7rem, 4.4vw, 4.55rem);
}
/* Blau liegt jetzt auf "für dich", nicht auf der Auftaktzeile
   (Vorgabe 2026-08-11). */
.outcome-heading h2 span {
  display: block;
  margin-bottom: 4px;
  color: var(--navy);
  font-size: .58em;
  letter-spacing: -.025em;
}

.outcome-heading h2 .accent {
  color: var(--blue);
  font-weight: inherit;
}
.outcome-heading p {
  max-width: 52ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.03rem, 1.4vw, 1.18rem);
}

.editorial-feature {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(360px, 1.06fr);
  gap: clamp(46px, 7vw, 94px);
  align-items: center;
}
.editorial-feature.is-reversed { grid-template-columns: minmax(360px, 1.06fr) minmax(0, .94fr); }
.editorial-copy h2 { max-width: 14ch; }
.editorial-copy p { max-width: 58ch; color: var(--muted); }
.editorial-copy .text-link { display: inline-flex; margin-top: 4px; }
.editorial-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 22px 54px rgba(11, 37, 69, .1);
}
.editorial-feature.is-reversed .editorial-figure { order: 2; }
.editorial-figure::after {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 62px;
  height: 62px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  content: "";
  pointer-events: none;
}
.editorial-figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.editorial-figure.is-portrait img { object-position: center 42%; }
.editorial-figure figcaption,
.wide-figure figcaption,
.media-card figcaption { padding: 14px 18px 16px; color: var(--muted); font-size: .76rem; line-height: 1.5; }

.seo-depth-visual {
  position: relative;
  isolation: isolate;
  margin: clamp(-24px, -2vw, -10px) 0;
  perspective: 1200px;
}
.seo-depth-visual img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 18px 26px rgba(11, 37, 69, .13)) drop-shadow(0 3px 6px rgba(11, 37, 69, .06));
  transform-origin: 50% 54%;
  transform-style: preserve-3d;
  will-change: transform;
  animation: seo-depth-float 10s cubic-bezier(.45, 0, .28, 1) infinite;
}

@keyframes seo-depth-float {
  0%, 100% { transform: perspective(1200px) rotateX(1.5deg) rotateY(-4deg) rotateZ(-1.2deg) translate3d(0, 0, 0) scale(.985); }
  50% { transform: perspective(1200px) rotateX(0) rotateY(-1deg) rotateZ(-.4deg) translate3d(0, -12px, 18px) scale(1); }
}

.wide-figure {
  position: relative;
  margin: clamp(42px, 5vw, 68px) 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 20px 48px rgba(11, 37, 69, .08);
}
.wide-figure img { width: 100%; height: auto; }
.wide-figure + .proof-grid { margin-top: 24px; }
.wide-figure-dark { border-color: var(--line-dark); background: var(--navy-deep); box-shadow: 0 20px 48px rgba(3, 19, 39, .2); }
.wide-figure-dark figcaption { color: var(--ink-lead-on-deep); }

.media-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: clamp(42px, 5vw, 68px);
}
.media-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 18px 42px rgba(11, 37, 69, .08);
}
.media-card img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; object-position: center; background: var(--navy-deep); }

.journey-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.journey-step { position: relative; padding: 30px 26px 32px; border-right: 1px solid var(--line); }
.journey-step:last-child { border-right: 0; }
.journey-number { display: inline-flex; margin-bottom: 42px; color: var(--blue); font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.journey-step p { margin-bottom: 0; color: var(--muted); font-size: .93rem; }

.service-list { display: grid; gap: 28px; }
.service-panel { position: relative; display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--white); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.service-panel:nth-child(even) { grid-template-columns: minmax(0, 1.22fr) minmax(280px, .78fr); }
.service-panel:nth-child(even) .service-media { order: 2; }
.service-panel:hover { border-color: var(--line-strong); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.service-media { min-height: 390px; overflow: hidden; background: var(--pale-blue); }
.service-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.service-media-seo img { object-position: right center; }
.service-panel:hover .service-media img { transform: scale(1.025); }
.service-content { display: flex; padding: clamp(30px, 5vw, 64px); flex-direction: column; justify-content: center; }
.service-kicker { margin-bottom: 18px; color: var(--blue); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.service-content h3 { max-width: 18ch; font-size: clamp(1.8rem, 3vw, 3rem); }
.service-content > p { max-width: 59ch; color: var(--muted); }
.service-fit { margin: 8px 0 22px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--navy); font-size: .9rem; }
.service-fit strong { color: var(--blue); }

.outcome-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line-strong); }
.outcome-card { min-height: 250px; padding: 36px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.outcome-card:nth-child(even) { border-right: 0; }
.outcome-card h3 { max-width: 20ch; }
.outcome-card p { margin-bottom: 0; color: var(--muted); }

.problem-list { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line-dark); }
.problem-item { padding: 30px 28px; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.problem-item:nth-child(even) { border-right: 0; }
.problem-item h3 { color: var(--white); }
.problem-item p { margin-bottom: 0; color: var(--ink-lead-on-deep); }
.problem-list-light { border-top-color: var(--line-strong); }
.problem-list-light .problem-item { border-color: var(--line); }
.problem-list-light .problem-item h3 { color: var(--navy); }
.problem-list-light .problem-item p { color: var(--muted); }

.process { display: grid; max-width: 920px; margin-inline: auto; }
.process-step { display: grid; grid-template-columns: 76px 1fr; gap: 28px; }
/* 29px breit und zentriert, damit die Ziffern genau ueber der Mitte der
   Verbindungslinie stehen (Linie: left 14px + 1px Breite = Mitte 14.5px).
   text-indent gleicht den nachlaufenden Sperrsatz der letzten Ziffer aus. */
.process-marker { position: relative; width: 29px; color: var(--blue); font-size: .76rem; font-weight: 800; letter-spacing: .11em; text-align: center; text-indent: .11em; }
.process-marker::after { position: absolute; top: 32px; bottom: 0; left: 14px; width: 1px; background: var(--line-strong); content: ""; }
.process-step:last-child .process-marker::after { display: none; }
.process-copy { padding-bottom: 42px; }
.process-copy p { max-width: 65ch; margin-bottom: 0; color: var(--muted); }

.benefit-list { border-top: 1px solid var(--line-strong); }
.benefit-row { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: 54px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.benefit-row h3 { font-size: 1.18rem; }
.benefit-row p { margin: 0; color: var(--muted); }

.industry-cloud { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.industry-cloud span { padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--white); color: var(--navy); font-size: .84rem; font-weight: 650; }
.industry-followup { max-width: 760px; margin: 28px 0 0; color: var(--muted); }
.industry-followup strong { color: var(--navy); }
.industry-followup .text-link { display: inline-block; margin-left: 4px; }

/* ---- Vertiefungen als gesetzte Liste statt Fliesstext (2026-08-11) ----
   Linierte Zeilen statt Kacheln: passt zum dokumentarischen Register,
   in dem der Satz wichtiger bleibt als der Rahmen. */
.deep-links {
  margin: clamp(38px, 5vw, 60px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
  list-style: none;
}

.deep-links li { border-bottom: 1px solid var(--line); }

.deep-links a {
  display: grid;
  grid-template-columns: minmax(150px, .3fr) minmax(0, 1fr) auto;
  gap: 6px clamp(24px, 4vw, 56px);
  align-items: baseline;
  padding: clamp(22px, 2.6vw, 30px) 4px;
  color: var(--navy);
  text-decoration: none;
  transition: background 220ms ease, padding-inline 220ms ease;
}

.deep-links-role {
  color: var(--muted);
  font-size: .84rem;
  font-weight: 650;
}

.deep-links-title {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  font-weight: 650;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.deep-links-note {
  grid-column: 2;
  max-width: 62ch;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.6;
}

.deep-links-arrow {
  display: grid;
  grid-row: 1 / span 2;
  grid-column: 3;
  place-items: center;
  align-self: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--blue);
  transition: transform 260ms cubic-bezier(.2, .8, .2, 1), background 220ms ease, border-color 220ms ease;
}

.deep-links-arrow svg { width: 16px; height: 16px; }

@media (hover: hover) {
  .deep-links a:hover { padding-inline: 14px 4px; background: var(--pale-blue); }
  .deep-links a:hover .deep-links-arrow {
    border-color: var(--blue);
    background: var(--blue);
    color: var(--white);
    transform: translateX(4px);
  }
}

.deep-links a:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }

@media (max-width: 760px) {
  .deep-links a {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-block: 22px;
  }
  .deep-links-note { grid-column: 1; }
  .deep-links-arrow { grid-row: 1 / span 3; grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .deep-links a,
  .deep-links a:hover .deep-links-arrow { transition: none; transform: none; }
}

.seo-scope { border-top: 1px solid var(--line-strong); }
#leistungsumfang { scroll-margin-top: 76px; }
.seo-scope-row {
  display: grid;
  grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr);
  gap: clamp(38px, 6vw, 80px);
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
}
.seo-scope-heading h3 { margin-bottom: 10px; font-size: clamp(1.3rem, 1.7vw, 1.55rem); }
.seo-scope-heading p { max-width: 42ch; margin: 0; color: var(--muted); font-size: .92rem; }
.seo-scope-row ul { display: grid; align-content: start; gap: 8px; margin: 0; padding-left: 1.2rem; color: var(--ink); }
.seo-scope-row li { padding-left: 4px; }
.seo-scope-row li::marker { color: var(--navy); }
.seo-scope-note { max-width: 760px; margin: 30px 0 0; color: var(--muted); }
.seo-scope-note strong { color: var(--navy); }

.offer-section { scroll-margin-top: 76px; }
.seo-offer {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: var(--white);
}
.seo-offer-header {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(210px, .45fr);
  gap: clamp(36px, 6vw, 76px);
  padding: clamp(34px, 5vw, 64px);
  align-items: end;
  border-bottom: 1px solid var(--line);
}
.seo-offer-label { margin: 0 0 18px; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.seo-offer-header h2 { max-width: 13ch; margin-bottom: 18px; }
.seo-offer-header > div > p:last-child { max-width: 60ch; margin: 0; color: var(--muted); }
.seo-offer-status { margin: 0; padding-left: 28px; border-left: 1px solid var(--line-strong); }
.seo-offer-status strong, .seo-offer-status span { display: block; }
.seo-offer-status strong { color: var(--navy); font-size: 1.1rem; }
.seo-offer-status span { margin-top: 3px; color: var(--muted); font-size: .9rem; }

.seo-offer-main { display: grid; grid-template-columns: minmax(0, .86fr) minmax(360px, 1.14fr); }
.seo-offer-price { position: relative; padding: clamp(38px, 5vw, 64px); overflow: hidden; }
.seo-offer-price::before,
.seo-offer-price::after { position: absolute; width: 52px; height: 52px; content: ""; pointer-events: none; }
.seo-offer-price::before { top: 26px; right: 28px; border-top: 2px solid var(--blue); border-right: 2px solid var(--blue); }
.seo-offer-price::after { bottom: 26px; left: 28px; border-bottom: 2px solid var(--blue); border-left: 2px solid var(--blue); }
.seo-offer-price > span { display: block; margin-bottom: 22px; color: var(--muted); font-size: .82rem; font-weight: 700; }
.seo-offer-amount { margin: 0 0 14px; color: var(--navy); font-size: clamp(3.2rem, 6vw, 5.4rem); font-weight: 650; letter-spacing: -.04em; line-height: .95; font-variant-numeric: tabular-nums; }
.seo-offer-amount small { display: block; margin-top: 12px; font-size: .98rem; letter-spacing: 0; line-height: 1.4; }
.seo-offer-price > p:last-child { max-width: 34ch; margin: 0; color: var(--muted); font-size: .86rem; }
.seo-offer-included { padding: clamp(38px, 5vw, 64px); border-left: 1px solid var(--line); }
.seo-offer-included h3 { margin-bottom: 24px; }
.seo-offer-included ul { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.seo-offer-included li { padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--navy); }

.seo-offer-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--off-white); }
.seo-offer-terms > div { padding: 26px clamp(24px, 3vw, 38px); border-right: 1px solid var(--line); }
.seo-offer-terms > div:last-child { border-right: 0; }
.seo-offer-terms dt { margin-bottom: 8px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.seo-offer-terms dd { margin: 0; color: var(--navy); }
.seo-offer-terms dd strong, .seo-offer-terms dd span { display: block; }
.seo-offer-terms dd strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.seo-offer-terms dd span { margin-top: 3px; color: var(--muted); font-size: .8rem; line-height: 1.45; }

.seo-offer-addon { display: grid; grid-template-columns: minmax(240px, .62fr) minmax(0, 1.38fr); gap: clamp(34px, 6vw, 78px); padding: clamp(34px, 5vw, 54px) clamp(34px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.seo-offer-addon h3 { max-width: 16ch; margin: 0; }
.seo-offer-addon p { max-width: 66ch; margin-bottom: 12px; color: var(--muted); }
.seo-offer-addon p:last-child { margin-bottom: 0; }
.seo-offer-addon strong { color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }

.seo-offer-action { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: clamp(34px, 5vw, 68px); padding: clamp(34px, 5vw, 54px) clamp(34px, 5vw, 64px); align-items: center; background: var(--off-white); }
.seo-offer-action h3 { margin-bottom: 10px; }
.seo-offer-action p { max-width: 62ch; margin: 0; color: var(--muted); }
.seo-offer-cta { display: flex; min-width: 480px; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.seo-offer-cta .button { min-width: 220px; }
.seo-offer-more { margin: 22px 0 0; }

.decision-list { border-top: 1px solid var(--line-strong); }
.decision-list > div { display: grid; grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr); gap: 44px; padding: 23px 0; border-bottom: 1px solid var(--line); }
.decision-list strong { color: var(--navy); }
.decision-list span { max-width: 68ch; color: var(--muted); }

.faq-layout { display: grid; grid-template-columns: minmax(260px, .62fr) minmax(0, 1.38fr); gap: clamp(48px, 7vw, 94px); align-items: start; }
.faq-intro { position: sticky; top: 118px; }
.faq-intro h2 { max-width: 10ch; }
.faq-intro p { max-width: 38ch; margin: 0; color: var(--muted); }
.faq-list details a { color: var(--blue); font-weight: 700; }

.price-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--white); }
.price-table { width: 100%; min-width: 840px; border-collapse: collapse; }
.price-table th, .price-table td { padding: 22px 24px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.price-table th { background: var(--pale-blue); color: var(--navy); font-size: .78rem; letter-spacing: .04em; }
.price-table tr:last-child td { border-bottom: 0; }
.price-table td { color: var(--muted); font-size: .92rem; }
.price-table td:first-child { color: var(--navy); font-weight: 750; }
.price-table td strong { display: block; color: var(--navy); font-size: 1.1rem; }
.price-table .price-term { display: block; margin-top: 8px; color: var(--blue); font-size: .78rem; font-weight: 750; }
.price-note { margin: 20px 0 0; color: var(--muted); font-size: .86rem; }
.availability-pill { display: inline-flex; width: fit-content; margin: 0 0 18px; padding: 6px 12px; align-items: center; border: 1px solid rgba(93, 253, 189, .48); border-radius: 999px; color: var(--mint); background: rgba(93, 253, 189, .08); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.price-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .75fr); overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--white); }
.price-main { padding: clamp(34px, 5vw, 66px); }
.price-main h2 { max-width: 13ch; }
.price-amount { margin: 28px 0 6px; color: var(--navy); font-size: clamp(2.7rem, 5vw, 4.7rem); font-weight: 650; letter-spacing: -.055em; line-height: 1; }
.price-amount small { font-size: .92rem; letter-spacing: 0; }
.price-sub { color: var(--muted); font-size: .9rem; }
.price-facts { display: grid; align-content: center; padding: clamp(32px, 4vw, 50px); background: var(--pale-blue); }
.price-facts ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.price-facts li { position: relative; padding-left: 24px; color: var(--navy); font-size: .92rem; }
.price-facts li::before { position: absolute; left: 0; content: "✓"; color: var(--blue); font-weight: 800; }

.proof-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.proof-card { display: flex; min-height: 360px; padding: clamp(30px, 4vw, 46px); flex-direction: column; border: 1px solid var(--line); border-radius: 20px; background: var(--white); }
.proof-logo { display: flex; height: 96px; margin-bottom: 34px; align-items: center; border-bottom: 1px solid var(--line); }
.proof-logo img { max-width: 190px; max-height: 58px; object-fit: contain; }
.proof-card p { color: var(--muted); }
.proof-card .text-link { margin-top: auto; align-self: flex-start; }

.risk-band { position: relative; overflow: hidden; }
.risk-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(50px, 7vw, 90px); align-items: center; }
.risk-grid h2 { max-width: 12ch; }
.risk-grid .risk-response-note { margin: 16px 0 0; color: var(--ink-muted-on-deep); font-size: .82rem; }
.risk-points { display: grid; border-top: 1px solid var(--line-dark); }
.risk-point { display: grid; grid-template-columns: 36px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line-dark); }
.risk-point span { color: var(--mint); font-weight: 800; }
.risk-point strong { display: block; color: var(--white); }
.risk-point small { display: block; color: var(--ink-lead-on-deep); font-size: .84rem; line-height: 1.45; }

.faq-list { display: grid; gap: 10px; }
details { border: 1px solid var(--line); border-radius: 4px; background: var(--white); }
summary { position: relative; padding: 22px 60px 22px 24px; color: var(--navy); font-weight: 750; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { position: absolute; top: 50%; right: 24px; content: "+"; color: var(--blue); font-size: 1.35rem; transform: translateY(-50%); }
details[open] summary::after { content: "−"; }
details p { max-width: 72ch; margin: 0; padding: 0 24px 24px; color: var(--muted); }

/* Abschluss-Sektion auf weisser Flaeche — sie steht direkt ueber dem
   Footer und muss hell sein (Vorgabe 2026-08-11). Die Buttons behalten
   ihre Klassennamen und werden hier auf hellen Grund umgestellt. */
.final-cta { padding: clamp(76px, 9vw, 130px) 0; background: var(--white); color: var(--navy); text-align: center; }
.final-cta h2 { max-width: 15ch; margin-inline: auto; color: var(--navy); }
.final-cta p { max-width: 64ch; margin: 0 auto 30px; color: var(--muted); }
.final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.final-cta .response-note { margin: 20px auto 0; color: var(--muted); font-size: .82rem; }
.back-to-hub { display: inline-flex; margin-top: 22px; color: var(--blue); font-size: .86rem; font-weight: 650; }
.secondary-action-link {
  display: inline-flex;
  min-height: 44px;
  margin-top: 8px;
  align-items: center;
  color: var(--blue);
  font-size: .86rem;
  font-weight: 700;
  text-underline-offset: 3px;
}
.page-industry .secondary-action-link,
.page-industry .back-to-hub {
  display: flex;
  width: fit-content;
  min-height: 44px;
  margin-right: auto;
  margin-left: auto;
  align-items: center;
}
.page-industry .back-to-hub { margin-top: 0; }

.final-cta .button-light { border-color: transparent; background: var(--blue); color: var(--white); }
.final-cta .button-light:hover { background: var(--blue-hover); }
.final-cta .button-ghost { border-color: var(--navy); background: transparent; color: var(--navy); }
.final-cta .button-ghost:hover { border-color: var(--navy); background: var(--navy); color: var(--white); }
.final-cta :focus-visible { outline-color: var(--blue); }

/* Warteliste steht auf seo-betreuung.html direkt ueber dem Footer und ist
   deshalb ebenfalls weiss (Vorgabe 2026-08-11). Mint bleibt dunklen
   Flaechen vorbehalten, der Haken wird daher blau. */
.waitlist-section { padding: clamp(76px, 9vw, 124px) 0; background: var(--white); color: var(--navy); scroll-margin-top: 76px; }
.waitlist-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr); gap: clamp(44px, 7vw, 90px); align-items: start; }
.waitlist-copy { position: sticky; top: 118px; }
.waitlist-copy h2 { max-width: 11ch; color: var(--navy); }
.waitlist-copy p { max-width: 52ch; color: var(--muted); }
.waitlist-points { display: grid; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.waitlist-points li { position: relative; padding-left: 26px; color: var(--muted); font-size: .92rem; }
.waitlist-points li::before { position: absolute; left: 0; color: var(--blue); font-weight: 800; content: "✓"; }
.waitlist-form { padding: clamp(28px, 4vw, 46px); border: 1px solid var(--line); border-radius: 20px; background: var(--white); box-shadow: 0 22px 52px rgba(3, 19, 39, .10); }
.waitlist-form h3 { margin-bottom: 8px; }
.waitlist-form > p { margin-bottom: 28px; color: var(--muted); font-size: .92rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.form-field { display: grid; gap: 7px; }
.form-field-wide { grid-column: 1 / -1; }
.form-field label { color: var(--navy); font-size: .84rem; font-weight: 750; }
.form-field input,
.form-field textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--white); color: var(--ink); }
.form-field input { min-height: 52px; padding: 0 14px; }
.form-field textarea { min-height: 132px; padding: 13px 14px; resize: vertical; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--ink-quiet); opacity: 1; }
.form-field input:focus,
.form-field textarea:focus { border-color: var(--blue); outline: 3px solid rgba(43, 83, 243, .18); outline-offset: 1px; }
.form-consent { display: grid; margin: 22px 0; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.form-consent input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--blue); }
.form-consent a { color: var(--blue); }
.waitlist-form .button { width: 100%; border: 0; cursor: pointer; }
.form-note { margin: 13px 0 0 !important; color: var(--muted); font-size: .75rem !important; text-align: center; }

/* Formularversand — Rueckmeldungen aus formulare.js. Die Basisregel steht hier,
   weil seo-betreuung.html site-pages.css nicht laedt. */
.waitlist-form .form-status { margin: 18px 0 0; padding: 16px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--navy); background: var(--pale-blue); font-size: .86rem; }
.form-status.is-success { border-color: var(--navy); color: var(--navy); background: var(--pale-blue); }
.form-status.is-error { border-color: #a4242c; color: #7d1a21; background: #fdf0f0; }
.form-status:focus-visible { outline: 3px solid rgba(43, 83, 243, .28); outline-offset: 2px; }

/* Honigtopf gegen Formular-Bots: fuer Menschen unsichtbar, fuer Screenreader
   durch aria-hidden am Container ausgeblendet, aber von Bots ausfuellbar. */
.form-honeypot { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Footer: einheitliches Volltonblau statt Verlauf (Vorgabe 2026-08-11). */
.footer { padding: 72px 0 28px; border-top: 1px solid rgba(255, 255, 255, .2); background: #0e3255; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); color: var(--white); }
.footer-grid { display: grid; grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(135px, .75fr)); gap: 52px; }
.footer-brand { padding-right: 48px; border-right: 1px solid rgba(255, 255, 255, .13); }
.footer-logo img { width: 154px; height: auto; margin-bottom: 22px; }
.footer-brand p { max-width: 36ch; color: var(--ink-muted-on-deep); font-size: .9rem; }
.footer h3 { margin-bottom: 16px; color: var(--white); font-size: .8rem; letter-spacing: .03em; }
.footer-links { display: grid; border-top: 1px solid rgba(255, 255, 255, .13); }
.footer-links a { padding: 11px 0; border-bottom: 1px solid var(--veil-on-deep); color: var(--ink-muted-on-deep); font-size: .84rem; text-decoration: none; }
.footer-links a:hover { color: var(--white); }
.footer-bottom { display: flex; margin-top: 54px; padding-top: 22px; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid rgba(255, 255, 255, .1); color: var(--ink-muted-on-deep); font-size: .78rem; }
.footer-legal { display: flex; gap: 22px; }

/* Lokale Sichtbarkeit: eigener Rhythmus für Problem, Anfrageweg, Beleg und Entscheidung. */
.page-local-visibility {
  --local-section-compact: clamp(80px, 7vw, 104px);
  --local-section-standard: clamp(92px, 8vw, 120px);
  --local-section-generous: clamp(104px, 9vw, 132px);
}
.page-local-visibility h1,
.page-local-visibility h2,
.page-local-visibility h3 { overflow-wrap: break-word; }

.page-local-visibility .page-hero {
  padding-bottom: clamp(76px, 7vw, 96px);
  border-bottom: 1px solid var(--line);
  background: var(--off-white);
  color: var(--ink);
}
.page-local-visibility .hero-grid { grid-template-columns: minmax(0, 1.28fr) minmax(340px, .72fr); align-items: center; }
.page-local-visibility .page-hero h1 { max-width: 14ch; color: var(--navy); font-size: clamp(3rem, 5.4vw, 5.35rem); letter-spacing: -.04em; text-wrap: balance; }
.page-local-visibility .page-hero .hero-lead { color: var(--muted); }
.page-local-visibility .page-hero .hero-note { color: var(--muted); }
.page-local-visibility .breadcrumbs { color: var(--muted); }
.page-local-visibility .breadcrumbs a { color: var(--blue); }
.page-local-visibility .breadcrumbs li:not(:last-child)::after { color: var(--ink-quiet); content: "›"; }
.page-local-visibility .hero-summary {
  max-width: 440px;
  justify-self: end;
}

.page-local-visibility .local-problems .section-heading,
.page-local-visibility .local-journey .section-heading,
.page-local-visibility .local-benefits .section-heading,
.page-local-visibility .local-proof .section-heading {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 18px;
  text-align: center;
}
.page-local-visibility .local-problems .section-heading h2,
.page-local-visibility .local-journey .section-heading h2,
.page-local-visibility .local-benefits .section-heading h2,
.page-local-visibility .local-proof .section-heading h2 {
  max-width: 20ch;
  margin: 0;
}
.page-local-visibility .local-problems .section-heading p,
.page-local-visibility .local-journey .section-heading p,
.page-local-visibility .local-benefits .section-heading p,
.page-local-visibility .local-proof .section-heading p {
  max-width: 64ch;
  margin: 0;
}

.page-local-visibility .local-problems { padding-block: var(--local-section-compact); }

.page-local-visibility .local-story { padding-block: var(--local-section-standard); }
.page-local-visibility .local-story .editorial-copy h2 { max-width: 12ch; }
.page-local-visibility .local-story .editorial-copy p { max-width: 52ch; }
.page-local-visibility .local-story .editorial-figure { overflow: visible; box-shadow: none; }
.page-local-visibility .local-story .editorial-figure picture { display: block; }
.page-local-visibility .local-story .editorial-figure img { border-radius: 19px 19px 0 0; }
.page-local-visibility .local-story .editorial-figure figcaption { border-radius: 0 0 19px 19px; background: var(--white); }
.page-local-visibility .local-story .editorial-figure::before,
.page-local-visibility .local-story .editorial-figure::after {
  position: absolute;
  z-index: 2;
  width: 58px;
  height: 58px;
  content: "";
  pointer-events: none;
}
.page-local-visibility .local-story .editorial-figure::before {
  top: calc(-1 * var(--card-corner-gap));
  right: calc(-1 * var(--card-corner-gap));
  border-top: 2px solid var(--blue);
  border-right: 2px solid var(--blue);
}
.page-local-visibility .local-story .editorial-figure::after {
  right: auto;
  bottom: calc(-1 * var(--card-corner-gap));
  left: calc(-1 * var(--card-corner-gap));
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  background:
    linear-gradient(var(--mint), var(--mint)) left bottom / 100% 2px no-repeat,
    linear-gradient(var(--mint), var(--mint)) left bottom / 2px 100% no-repeat;
}

.page-local-visibility .local-journey { padding-block: var(--local-section-generous); }
.page-local-visibility .local-journey .process { max-width: 960px; margin-inline: 0; }
.page-local-visibility .local-journey .process-copy { padding-bottom: 48px; }
.page-local-visibility .local-journey .journey-layout {
  display: grid;
  grid-template-columns: minmax(300px, .96fr) minmax(0, 1.04fr);
  gap: clamp(46px, 6vw, 88px);
  align-items: start;
}
.page-local-visibility .local-journey .journey-map {
  position: sticky;
  top: 128px;
  margin: 0;
}
.page-local-visibility .local-journey .journey-label {
  margin-bottom: 18px;
  color: var(--blue);
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.page-local-visibility .local-journey .journey-map picture { display: block; }
.page-local-visibility .local-journey .journey-map img {
  display: block;
  width: 100%;
  height: auto;
}

.page-local-visibility .local-benefits { padding-block: var(--local-section-standard); }
.page-local-visibility .local-benefits .benefit-row { grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr); gap: clamp(36px, 5vw, 68px); padding-block: 30px; }

.page-local-visibility .local-industries { padding-block: var(--local-section-compact); }
.page-local-visibility .local-industries .section-heading { margin-bottom: 36px; align-items: start; }
.page-local-visibility .local-industries .section-heading h2 { max-width: 12ch; }
.page-local-visibility .local-industries .industry-cloud { max-width: 960px; margin-top: 0; }
.page-local-visibility .local-context-links {
  display: flex;
  margin-top: clamp(34px, 4vw, 48px);
  padding-top: 24px;
  flex-wrap: wrap;
  gap: 12px 28px;
  border-top: 1px solid var(--line);
}
.page-local-visibility .local-context-links .text-link { display: inline-flex; }

.page-local-visibility .local-proof { padding-block: var(--local-section-standard); }
.page-local-visibility .local-proof .section-heading { margin-bottom: 0; }
.page-local-visibility .local-proof .section-heading h2 { max-width: 18ch; }
.page-local-visibility .local-proof-ledger {
  display: grid;
  grid-template-columns: minmax(250px, .62fr) minmax(0, 1.38fr);
  margin-top: clamp(48px, 5vw, 64px);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.page-local-visibility .local-proof-brand {
  display: flex;
  padding: clamp(30px, 4vw, 48px) clamp(28px, 4vw, 48px) clamp(30px, 4vw, 48px) 0;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  border-right: 1px solid var(--line);
}
.page-local-visibility .local-proof-brand img { width: min(220px, 100%); height: auto; }
.page-local-visibility .local-proof-brand p { max-width: 30ch; margin: 0; color: var(--muted); font-size: .88rem; }
.page-local-visibility .local-proof-signals { margin: 0; padding: 0 0 0 clamp(28px, 4vw, 52px); list-style: none; }
.page-local-visibility .local-proof-signals li {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 18px;
  padding: 27px 0;
  border-bottom: 1px solid var(--line);
}
.page-local-visibility .local-proof-signals li:last-child { border-bottom: 0; }
.page-local-visibility .local-proof-signals span { color: var(--blue); font-size: .72rem; font-weight: 800; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; }
.page-local-visibility .local-proof-signals strong { display: block; margin-bottom: 5px; color: var(--navy); }
.page-local-visibility .local-proof-signals p { max-width: 58ch; margin: 0; color: var(--muted); font-size: .9rem; }
.page-local-visibility .local-proof-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 28px;
  border-top: 1px solid var(--line);
}
/* Ergebnisblock der Roether-Sektion (Vorgabe 2026-08-12) */
.page-local-visibility .local-proof-result {
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: clamp(30px, 4vw, 42px);
  border-top: 1px solid var(--line);
}

.page-local-visibility .local-proof-result h3 {
  margin: 0 0 clamp(24px, 3vw, 32px);
  font-size: clamp(1.24rem, 2vw, 1.58rem);
  letter-spacing: -.02em;
}

.page-local-visibility .local-proof-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 48px);
  margin: 0 0 clamp(22px, 3vw, 30px);
  padding: 0;
  list-style: none;
}

.page-local-visibility .local-proof-metrics li {
  display: flex;
  padding-left: 18px;
  flex-direction: column;
  gap: 8px;
  border-left: 2px solid var(--mint);
}

.page-local-visibility .local-proof-metrics strong {
  color: var(--navy);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.04;
}

.page-local-visibility .local-proof-metrics span {
  max-width: 34ch;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.6;
}

.page-local-visibility .local-proof-result > p {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.68;
}

/* Abschluss der Roether-Sektion (Vorgabe 2026-08-11) */
.page-local-visibility .local-proof-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: clamp(26px, 4vw, 60px);
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: clamp(30px, 4vw, 42px);
  align-items: center;
  border-top: 1px solid var(--line);
}

.page-local-visibility .local-proof-cta h3 {
  margin: 0 0 10px;
  font-size: clamp(1.24rem, 2vw, 1.58rem);
  letter-spacing: -.02em;
}

.page-local-visibility .local-proof-cta p {
  max-width: 54ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.68;
}

.page-local-visibility .local-proof-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.page-local-visibility .local-proof-cta-actions .button { flex: 1 1 auto; }

@media (max-width: 860px) {
  .page-local-visibility .local-proof-cta { grid-template-columns: 1fr; align-items: start; }
}

.page-local-visibility .local-proof-notes article { display: flex; padding: 34px clamp(26px, 4vw, 44px) 34px 0; flex-direction: column; }
.page-local-visibility .local-proof-notes article + article { padding-right: 0; padding-left: clamp(26px, 4vw, 44px); border-left: 1px solid var(--line); }
.page-local-visibility .local-proof-notes p { color: var(--muted); }
.page-local-visibility .proof-certificate { display: flex; min-height: 72px; margin-bottom: 24px; align-items: center; }

.page-local-visibility .local-pricing { padding-block: var(--local-section-compact); }
.page-local-visibility .local-pricing .price-box {
  grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr);
  gap: clamp(22px, 3vw, 34px);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.page-local-visibility .local-pricing .price-main {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 20px 48px rgba(11, 37, 69, .08);
}
.page-local-visibility .local-pricing .price-facts {
  position: relative;
  border: 1px solid rgba(207, 225, 244, .22);
  border-radius: 20px;
  background: var(--surface-panel);
  box-shadow: 0 24px 58px rgba(3, 19, 39, .24);
}
.page-local-visibility .local-pricing .price-facts::before,
.page-local-visibility .local-pricing .price-facts::after {
  position: absolute;
  width: 52px;
  height: 52px;
  content: "";
  pointer-events: none;
}
.page-local-visibility .local-pricing .price-facts::before {
  top: calc(-1 * var(--card-corner-gap));
  right: calc(-1 * var(--card-corner-gap));
  border-top: 2px solid var(--mint);
  border-right: 2px solid var(--mint);
}
.page-local-visibility .local-pricing .price-facts::after {
  bottom: calc(-1 * var(--card-corner-gap));
  left: calc(-1 * var(--card-corner-gap));
  border-bottom: 2px solid var(--mint);
  border-left: 2px solid var(--mint);
}
.page-local-visibility .local-pricing .price-facts h3 { margin-bottom: 22px; color: var(--white); font-size: 1.1rem; }
.page-local-visibility .local-pricing .price-facts ul { gap: 0; border-top: 1px solid rgba(207, 225, 244, .16); }
.page-local-visibility .local-pricing .price-facts li { padding: 15px 0 15px 25px; border-bottom: 1px solid rgba(207, 225, 244, .16); color: var(--ink-on-deep); }
.page-local-visibility .local-pricing .price-facts li::before {
  top: 15px;
  width: auto;
  height: auto;
  border: 0;
  color: var(--mint);
  content: "✓";
}
.page-local-visibility .price-combination { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(207, 225, 244, .16); }
.page-local-visibility .price-combination strong,
.page-local-visibility .price-combination span { display: block; }
.page-local-visibility .local-pricing .price-combination strong { color: var(--white); }
.page-local-visibility .local-pricing .price-combination span { margin-top: 4px; color: var(--ink-muted-on-deep); font-size: .86rem; line-height: 1.5; }
.page-local-visibility .price-disclosure {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 64px);
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line-strong);
}
.page-local-visibility .price-disclosure p { max-width: 64ch; margin: 0; color: var(--muted); font-size: .88rem; }

.page-local-visibility .local-decision { padding-block: var(--local-section-standard); }
.page-local-visibility .local-decision .risk-grid { align-items: start; }
.page-local-visibility .local-decision .risk-grid h2 { max-width: 11ch; }
.page-local-visibility .local-decision .risk-grid > div:first-child > p { max-width: 58ch; color: var(--muted); }
.page-local-visibility .local-decision .risk-response-note { color: var(--muted); }
.page-local-visibility .local-decision .risk-points { border-top-color: var(--line-strong); }
.page-local-visibility .local-decision .risk-point { grid-template-columns: 1fr; padding-block: 22px; border-bottom-color: var(--line); }
.page-local-visibility .local-decision .risk-point strong { color: var(--navy); }
.page-local-visibility .local-decision .risk-point small { color: var(--muted); }

.page-local-visibility .local-faq { padding-block: var(--local-section-standard); }
.page-local-visibility .local-faq-grid { display: grid; grid-template-columns: minmax(250px, .58fr) minmax(0, 1.42fr); gap: clamp(48px, 8vw, 104px); align-items: start; }
.page-local-visibility .local-faq-intro,
.page-local-visibility .local-faq .faq-list { min-width: 0; }
.page-local-visibility .local-faq .faq-list { grid-template-columns: minmax(0, 1fr); }
.page-local-visibility .local-faq details { min-width: 0; }
.page-local-visibility .local-faq summary { overflow-wrap: anywhere; hyphens: auto; }
.page-local-visibility .local-faq-intro { position: sticky; top: 118px; }
.page-local-visibility .local-faq-intro h2 { max-width: 9ch; margin-bottom: 0; }

.page-local-visibility .final-cta { text-align: center; }
.page-local-visibility .final-cta-inner { display: flex; align-items: center; flex-direction: column; }
.page-local-visibility .final-cta-inner > * { max-width: 44rem; }
.page-local-visibility .final-cta h2 { max-width: 15ch; margin-inline: auto; }
.page-local-visibility .final-cta p { margin-right: auto; margin-left: auto; }
.page-local-visibility .final-actions { justify-content: center; }
.page-local-visibility .footer-address { margin: 0 0 14px; color: var(--ink-muted-on-deep); font-size: .82rem; font-style: normal; line-height: 1.55; }

@media (max-width: 1040px) {
  :root { --wrap: min(100% - 48px, 920px); }
  .desktop-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .mobile-nav {
    position: fixed;
    z-index: 90;
    top: 76px;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 12px 24px 40px;
    overflow-y: auto;
    background: var(--navy-deep);
  }
  .mobile-nav.is-open { display: grid; align-content: start; }
  .mobile-nav a { display: flex; min-height: 56px; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, .12); color: var(--ink-on-deep-soft); font-weight: 650; text-decoration: none; }
  .mobile-nav a:last-child { justify-content: center; margin-top: 20px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 999px; color: var(--white); }
  .hero-grid { grid-template-columns: 1fr; }
  .page-local-visibility .hero-grid { grid-template-columns: 1fr; }
  .page-local-visibility .hero-summary { max-width: 680px; justify-self: start; }
  .page-local-visibility .local-journey .journey-layout { grid-template-columns: 1fr; gap: clamp(40px, 6vw, 56px); }
  .page-local-visibility .local-journey .journey-map { position: static; max-width: 760px; }
  .system-panel, .hero-summary { max-width: 680px; }
  .journey-grid { grid-template-columns: repeat(2, 1fr); }
  .journey-step:nth-child(2) { border-right: 0; }
  .journey-step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .service-panel, .service-panel:nth-child(even) { grid-template-columns: minmax(240px, .75fr) minmax(0, 1.25fr); }
  .service-panel:nth-child(even) .service-media { order: 0; }
  .price-box { grid-template-columns: 1fr; }
  .page-local-visibility .local-pricing .price-box { grid-template-columns: 1fr; gap: 24px; }
  .price-facts { padding-top: 36px; padding-bottom: 36px; }
  .seo-offer-action { grid-template-columns: 1fr; }
  .seo-offer-cta { min-width: 0; justify-content: flex-start; }
  .editorial-feature,
  .editorial-feature.is-reversed { grid-template-columns: 1fr 1fr; gap: 42px; }
  .footer-grid { grid-template-columns: 1.2fr repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; padding: 0 0 34px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .13); }
}

@media (max-width: 760px) {
  :root { --wrap: calc(100% - 32px); --section: 72px; --card-corner-gap: 12px; }
  body { font-size: 16px; }
  .page-local-visibility * { min-width: 0; }
  .page-local-visibility .footer a { overflow-wrap: anywhere; }
  h1 { font-size: clamp(2.65rem, 13vw, 4.2rem); }
  h2 { font-size: clamp(2rem, 10vw, 3rem); }
  .page-hero { padding: 36px 0 64px; }
  .leistungen-hero h1 { font-size: clamp(2.65rem, 13vw, 4.2rem); }
  .breadcrumbs { margin-bottom: 30px; }
  .hero-grid { gap: 42px; }
  .hero-actions, .final-actions, .section-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button, .final-actions .button, .section-actions .button { width: 100%; }
  .trust-inner { align-items: flex-start; flex-direction: column; }
  .trust-items { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .trust-items img { max-width: 120px; max-height: 42px; }
  .section-heading { grid-template-columns: 1fr; gap: 18px; }
  .section-heading h2 { max-width: none; }
  .statement-heading,
  .choice-heading,
  .outcome-heading { grid-template-columns: 1fr; gap: 22px; }
  .statement-heading h2,
  .statement-heading p,
  .choice-heading h2,
  .choice-heading p { grid-column: 1; }
  .statement-heading h2 { font-size: clamp(2.35rem, 11vw, 3.35rem); }
  .statement-heading p { margin-top: 0; }
  .choice-heading h2,
  .choice-heading p { grid-row: auto; }
  .choice-heading::before { display: none; }
  .outcome-heading h2 { max-width: 10ch; font-size: clamp(2.5rem, 12vw, 3.45rem); }
  .journey-grid, .outcome-grid, .problem-list, .proof-grid { grid-template-columns: 1fr; }
  .journey-step, .journey-step:nth-child(2), .outcome-card, .problem-item { border-right: 0; }
  .journey-step:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .service-panel, .service-panel:nth-child(even) { grid-template-columns: 1fr; }
  .service-media { min-height: 260px; }
  .service-panel:nth-child(even) .service-media { order: 0; }
  .service-content { padding: 30px 24px 34px; }
  .editorial-feature,
  .editorial-feature.is-reversed,
  .media-gallery { grid-template-columns: 1fr; }
  .editorial-feature.is-reversed .editorial-figure { order: 0; }
  .editorial-figure img { aspect-ratio: 16 / 11; }
  .page-local-visibility {
    --local-section-compact: 72px;
    --local-section-standard: 80px;
    --local-section-generous: 88px;
  }
  .page-local-visibility .page-hero h1 { max-width: 12ch; font-size: clamp(2.55rem, 12.5vw, 4rem); }
  .page-local-visibility .hero-summary { width: 100%; max-width: none; }
  .page-local-visibility .local-story .editorial-figure { width: calc(100% - 24px); margin-inline: 12px; }
  .page-local-visibility .local-story .editorial-figure::before,
  .page-local-visibility .local-story .editorial-figure::after { width: 48px; height: 48px; }
  .page-local-visibility .local-benefits .benefit-row { grid-template-columns: 1fr; gap: 8px; padding-block: 24px; }
  .page-local-visibility .local-context-links { align-items: flex-start; flex-direction: column; }
  .page-local-visibility .local-proof-ledger { grid-template-columns: 1fr; }
  .page-local-visibility .local-proof-brand {
    padding: 30px 0;
    gap: 26px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .page-local-visibility .local-proof-brand img { width: min(190px, 70%); }
  .page-local-visibility .local-proof-signals { padding-left: 0; }
  .page-local-visibility .local-proof-signals li { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
  .page-local-visibility .local-proof-notes { grid-template-columns: 1fr; }
  .page-local-visibility .local-proof-notes article,
  .page-local-visibility .local-proof-notes article + article { min-height: 0; padding: 30px 0; border-left: 0; }
  .page-local-visibility .local-proof-notes article + article { border-top: 1px solid var(--line); }
  .page-local-visibility .local-proof-metrics { grid-template-columns: 1fr; }
  .page-local-visibility .price-disclosure { grid-template-columns: 1fr; gap: 20px; }
  .page-local-visibility .local-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .page-local-visibility .local-faq-intro { position: static; }
  .page-local-visibility .local-faq-intro h2 { max-width: 12ch; }
  .seo-depth-visual { width: min(100%, 560px); margin: -12px auto 8px; }
  .benefit-row { grid-template-columns: 1fr; gap: 7px; }
  .seo-scope-row,
  .seo-offer-header,
  .seo-offer-main,
  .seo-offer-addon,
  .seo-offer-action,
  .decision-list > div,
  .faq-layout { grid-template-columns: 1fr; }
  .seo-scope-row { gap: 22px; padding: 28px 0; }
  .seo-offer-header { gap: 28px; }
  .seo-offer-status { padding: 22px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .seo-offer-included { border-top: 1px solid var(--line); border-left: 0; }
  .seo-offer-terms { grid-template-columns: 1fr; }
  .seo-offer-terms > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .seo-offer-terms > div:last-child { border-bottom: 0; }
  .seo-offer-addon, .seo-offer-action { gap: 26px; }
  .seo-offer-cta { min-width: 0; flex-direction: column; }
  .seo-offer-cta .button { width: 100%; }
  .decision-list > div { gap: 6px; }
  .faq-intro { position: static; }
  .faq-intro h2 { max-width: 13ch; }
  .price-table-wrap { border-right: 0; border-left: 0; border-radius: 0; }
  .price-box { border-right: 0; border-left: 0; border-radius: 0; }
  .price-main, .price-facts { padding-right: 24px; padding-left: 24px; }
  .risk-grid { grid-template-columns: 1fr; }
  .waitlist-grid { grid-template-columns: 1fr; }
  .waitlist-copy { position: static; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field-wide { grid-column: auto; }
  .footer { padding-top: 58px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 440px) {
  .header-inner { min-height: 70px; }
  .mobile-nav { top: 70px; }
  .logo img { width: 118px; }
  .system-panel, .hero-summary { padding: 24px 20px; }
  .availability-banner { left: 16px; }
  .outcome-card, .problem-item { padding: 26px 22px; }
  .process-step { grid-template-columns: 52px 1fr; gap: 14px; }
  .seo-offer-header,
  .seo-offer-price,
  .seo-offer-included,
  .seo-offer-addon,
  .seo-offer-action { padding-right: 22px; padding-left: 22px; }
  .seo-offer-price::before { right: 18px; }
  .seo-offer-price::after { left: 18px; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (pointer: coarse) {
  .logo,
  .footer-logo,
  .breadcrumbs a,
  .text-link,
  .back-to-hub,
  .footer-legal a { display: inline-flex; min-height: 44px; align-items: center; }
  .breadcrumbs a { margin-block: -10px; padding-block: 10px; }
  .footer-links a { display: flex; min-height: 44px; align-items: center; }
}

/* Bewegungsreduktion gilt global, nicht nur fuer einzelne Komponenten.
   Deckt auch die Hero- und Panel-Einblendungen der Unterseiten ab
   (website-hero-enter, website-media-enter, website-panel-enter, website-faq-enter). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .seo-depth-visual img { transform: none; }
}

/* Shared, restrained scroll reveal for the existing service and legal pages. */
.motion-ready .motion-item.motion-pending:not(.is-visible) {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(18px);
}

.motion-ready .motion-item {
  transition:
    opacity .58s cubic-bezier(.2, .8, .2, 1),
    filter .58s cubic-bezier(.2, .8, .2, 1),
    transform .58s cubic-bezier(.2, .8, .2, 1);
}

.motion-ready .motion-item.is-visible {
  opacity: 1;
  filter: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .motion-item,
  .motion-ready .motion-item.motion-pending:not(.is-visible) {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}

@media print {
  .site-header, .mobile-nav, .hero-actions, .final-cta, .footer { display: none !important; }
  .page-hero { background: var(--white); color: var(--ink); }
  .page-hero h1, .page-hero p { color: var(--ink); }
  .system-panel, .hero-summary { border-color: var(--line); background: var(--white); box-shadow: none; }
  .system-panel *, .hero-summary * { color: var(--ink) !important; }
}

/* Website erstellen: dokumentarische Leistungsseite mit CRO-Fokus. */
.page-website-build {
  background: var(--off-white);
}

.page-website-build h1,
.page-website-build h2,
.page-website-build h3 {
  text-wrap: balance;
}

.page-website-build h2 {
  font-size: clamp(2.05rem, 3.2vw, 3rem);
}

.page-website-build h3 {
  font-size: clamp(1.28rem, 1.7vw, 1.58rem);
}

.page-website-build .page-hero {
  display: flex;
  min-height: calc(100dvh - 76px);
  padding: 30px 0 54px;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--off-white);
  color: var(--ink);
}

.page-website-build .breadcrumbs {
  margin-bottom: clamp(24px, 3vw, 36px);
  color: var(--muted);
}

.page-website-build .breadcrumbs a {
  color: var(--navy);
}

.page-website-build .breadcrumbs li:not(:last-child)::after {
  color: var(--ink-quiet);
}

.page-website-build .hero-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(350px, .72fr);
  gap: clamp(52px, 6vw, 82px);
  align-items: center;
}

.page-website-build .page-hero h1 {
  max-width: 100%;
  margin-bottom: 22px;
  color: var(--navy);
  font-size: clamp(2.7rem, 3.5vw, 3rem);
  letter-spacing: -.038em;
  line-height: 1.03;
}

.page-website-build .hero-lead {
  max-width: 58ch;
  margin-bottom: 25px;
  color: var(--muted);
  font-size: clamp(1.06rem, 1.25vw, 1.18rem);
  line-height: 1.62;
}

.page-website-build .hero-actions {
  align-items: center;
}

.page-website-build .button {
  white-space: nowrap;
}

.page-website-build .button:active {
  transform: scale(.985);
}

/* Seit 2026-08-12 stehen hier drei Angebotsaussagen statt kurzer Eckdaten.
   Als Zeile mit Trennstrichen blieb beim Umbruch ein Strich am Zeilenanfang
   stehen, deshalb eine gestapelte Liste mit Haken-Marker. */
.page-website-build .hero-meta {
  display: grid;
  gap: 8px;
  margin-top: 22px;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.45;
}

.page-website-build .hero-meta span {
  display: grid;
  grid-template-columns: 15px 1fr;
  align-items: start;
  white-space: normal;
}

.page-website-build .hero-meta span::before {
  width: 9px;
  height: 9px;
  margin-top: .38em;
  border-top: 1.5px solid var(--blue);
  border-right: 1.5px solid var(--blue);
  content: "";
  transform: rotate(45deg);
}

.page-website-build .hero-summary {
  margin: 18px 18px 18px 0;
  padding: clamp(28px, 3vw, 36px);
  overflow: visible;
  border: 1px solid var(--line-strong);
  background: var(--white);
  box-shadow: none;
}

.page-website-build .hero-summary::before,
.page-website-build .hero-summary::after {
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 0;
}

.page-website-build .hero-summary::before {
  top: -18px;
  right: -18px;
  border-top: 2px solid var(--blue);
  border-right: 2px solid var(--blue);
}

.page-website-build .hero-summary::after {
  bottom: -18px;
  left: -18px;
  border-bottom: 2px solid var(--blue);
  border-left: 2px solid var(--blue);
}

.page-website-build .panel-label {
  margin-bottom: 20px;
  color: var(--blue);
}

.page-website-build .summary-problem {
  margin-bottom: 18px;
  padding-bottom: 20px;
  border-color: var(--line);
}

.page-website-build .summary-problem strong {
  color: var(--navy);
  font-size: 1.18rem;
}

.page-website-build .summary-problem span {
  display: block;
  color: var(--muted);
  line-height: 1.55;
}

.page-website-build .hero-facts {
  display: grid;
  margin: 0;
}

.page-website-build .hero-facts > div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.page-website-build .hero-facts dt,
.page-website-build .hero-facts dd {
  margin: 0;
  font-size: .82rem;
  line-height: 1.45;
}

.page-website-build .hero-facts dt {
  color: var(--muted);
}

.page-website-build .hero-facts dd {
  color: var(--navy);
  font-weight: 700;
}

.page-website-build .summary-price {
  margin-top: 20px;
  padding-top: 0;
  border: 0;
  color: var(--muted);
}

.page-website-build .summary-price strong {
  margin-bottom: 5px;
  color: var(--navy);
  font-size: clamp(1.8rem, 2.7vw, 2.35rem);
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}

.page-website-build .summary-price span {
  display: block;
  line-height: 1.45;
}

.page-website-build .trust-strip {
  padding-block: 24px;
}

.page-website-build .trust-items img:first-child {
  width: 148px;
}

.page-website-build .trust-items img:nth-child(2) {
  width: 114px;
  max-height: 54px;
}

.page-website-build .section {
  padding-block: clamp(80px, 8vw, 112px);
}

.page-website-build .section-heading {
  display: block;
  max-width: 760px;
  margin-bottom: clamp(40px, 5vw, 60px);
}

.page-website-build .section-heading h2 {
  max-width: 17ch;
  margin-bottom: 18px;
}

.page-website-build .section-heading p {
  max-width: 64ch;
  margin: 0;
  color: var(--muted);
}

.page-website-build .problem-list {
  border-top-color: var(--line-strong);
}

.page-website-build .problem-item {
  min-height: 210px;
  padding: clamp(28px, 3vw, 38px);
}

.page-website-build .problem-item h3 {
  max-width: 24ch;
}

.page-website-build .journey-grid {
  background: var(--off-white);
}

.page-website-build .journey-step {
  min-height: 250px;
  padding: 32px 28px;
}

.page-website-build .journey-number {
  margin-bottom: 54px;
}

.page-website-build .benefit-list {
  border-top-color: var(--line-strong);
}

.page-website-build .benefit-row {
  grid-template-columns: minmax(240px, .68fr) minmax(0, 1.32fr);
  gap: clamp(44px, 6vw, 78px);
  padding-block: 30px;
}

.page-website-build .benefit-row h3 {
  margin: 0;
  font-size: 1.18rem;
}

.page-website-build .benefit-row p {
  max-width: 68ch;
}

.page-website-build .customer-insights {
  border-top: 1px solid var(--line);
}

.page-website-build .customer-insights .section-heading h2 {
  max-width: 18ch;
}

.page-website-build .case-study-list {
  border-top: 1px solid var(--line-strong);
}

.page-website-build .case-study {
  display: grid;
  grid-template-columns: minmax(340px, .82fr) minmax(0, 1.18fr);
  gap: clamp(48px, 7vw, 92px);
  padding-block: clamp(54px, 6vw, 76px);
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.page-website-build .case-study-reversed {
  grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr);
}

.page-website-build .case-study-reversed .case-visual {
  grid-column: 2;
}

.page-website-build .case-study-reversed .case-copy {
  grid-column: 1;
  grid-row: 1;
}

.page-website-build .case-visual {
  position: relative;
  display: grid;
  min-height: 348px;
  padding: clamp(30px, 4vw, 44px);
  align-content: space-between;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--pale-blue);
}

.page-website-build .case-study-reversed .case-visual {
  background: var(--off-white);
}

.page-website-build .case-visual::before {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 54px;
  height: 54px;
  border-top: 1px solid var(--blue);
  border-right: 1px solid var(--blue);
  content: "";
  pointer-events: none;
}

.page-website-build .case-meta,
.page-website-build .case-scope {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.page-website-build .case-logo {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 126px;
  padding: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
}

.page-website-build .case-logo-roether img {
  width: min(100%, 230px);
}

.page-website-build .case-logo-hotels img {
  width: min(100%, 190px);
  max-height: 90px;
  object-fit: contain;
}

.page-website-build .case-copy h3 {
  margin-bottom: 14px;
  font-size: clamp(1.8rem, 2.8vw, 2.65rem);
}

.page-website-build .case-summary {
  max-width: 60ch;
  color: var(--muted);
}

.page-website-build .insight-list {
  margin: 30px 0 28px;
  border-top: 1px solid var(--line-strong);
}

.page-website-build .insight-list > div {
  display: grid;
  grid-template-columns: 138px 1fr;
  gap: clamp(22px, 4vw, 46px);
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}

.page-website-build .insight-list dt,
.page-website-build .insight-list dd {
  margin: 0;
  line-height: 1.55;
}

.page-website-build .insight-list dt {
  color: var(--navy);
  font-size: .84rem;
  font-weight: 750;
}

.page-website-build .insight-list dd {
  color: var(--muted);
  font-size: .9rem;
}

.page-website-build .insights-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px;
  padding: 38px 0 8px;
  align-items: center;
}

.page-website-build .insights-cta h3 {
  margin-bottom: 7px;
}

.page-website-build .insights-cta p {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
}

.page-website-build .evidence-note {
  max-width: 78ch;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: .82rem;
}

.page-website-build .industry-cloud {
  max-width: 960px;
}

/* Schliesst die Aufzaehlung sichtbar ab: die Liste ist ein Ausschnitt,
   kein abschliessender Katalog (Vorgabe 2026-08-12). */
.industry-cloud .industry-more {
  border-color: var(--blue);
  background: var(--pale-blue);
  color: var(--blue);
}

.page-website-build .process {
  max-width: 920px;
  margin-inline: 0;
}

/* Ablaufgrafik zwischen Ueberschrift und den vier Textschritten. Sie ist
   freigestellt und steht ohne Karte oder Flaeche auf dem Abschnitt.
   Breite seit 2026-08-12 auf 780px begrenzt: bei 1080px reichte selbst die
   groesste Ableitung auf Retina nicht mehr und die Grafik wirkte weich. */
.page-website-build .process-figure {
  max-width: 780px;
  margin: clamp(30px, 4vw, 48px) 0 clamp(38px, 5vw, 60px);
}

.page-website-build .process-figure picture { display: block; }

.page-website-build .process-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.page-website-build .process-step {
  grid-template-columns: 66px 1fr;
}

.page-website-build .price-box {
  grid-template-columns: minmax(0, 1.06fr) minmax(360px, .94fr);
  box-shadow: none;
}

.page-website-build .price-main {
  padding: clamp(38px, 5vw, 64px);
}

.page-website-build .price-main h2 {
  max-width: 14ch;
}

/* Einmal- und Monatspreis stehen gleichrangig nebeneinander. Vorher stand
   der Monatsbetrag klein in der Fussnote — das las sich, als sollte er
   nicht auffallen (Vorgabe 2026-08-11). */
.page-website-build .price-amount-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: fit-content;
  margin: 38px 18px 22px 14px;
  padding: 10px 18px 10px 0;
}

.page-website-build .price-amount-monthly { color: var(--navy); }
.page-website-build .price-amount-monthly::before {
  margin-right: 14px;
  color: var(--line-strong);
  content: "+";
  font-weight: 500;
}

.page-website-build .price-amount-wrap::before,
.page-website-build .price-amount-wrap::after {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 0;
  content: "";
  pointer-events: none;
}

.page-website-build .price-amount-wrap::before {
  top: -14px;
  right: -14px;
  border-top: 2px solid var(--blue);
  border-right: 2px solid var(--blue);
}

.page-website-build .price-amount-wrap::after {
  bottom: -14px;
  left: -14px;
  border-bottom: 2px solid var(--blue);
  border-left: 2px solid var(--blue);
}

.page-website-build .price-amount {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Der laufende Monatsbeitrag traegt das Angebot, der Einstiegsbetrag
   ordnet sich ihm optisch unter (Vorgabe 2026-08-12). */
.page-website-build .price-amount:not(.price-amount-monthly) {
  font-size: clamp(1.85rem, 2.9vw, 2.75rem);
  color: var(--muted);
}

.page-website-build .price-amount:not(.price-amount-monthly) small {
  font-size: .8rem;
}

.page-website-build .price-actions {
  display: flex;
  margin-top: 28px;
  flex-wrap: wrap;
  gap: 18px 24px;
  align-items: center;
}

.page-website-build .price-facts {
  border-left: 1px solid var(--line);
  background: var(--off-white);
}

.page-website-build .price-facts li::before {
  width: 9px;
  height: 9px;
  top: .63em;
  border-top: 1.5px solid var(--blue);
  border-right: 1.5px solid var(--blue);
  content: "";
  transform: rotate(45deg);
}

.page-website-build .website-decision .risk-grid {
  align-items: start;
}

.page-website-build .website-decision .risk-grid h2 {
  max-width: 13ch;
  color: var(--navy);
}

.page-website-build .website-decision .risk-grid p {
  max-width: 55ch;
  color: var(--muted);
}

.page-website-build .website-decision .risk-response-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: .82rem;
}

.page-website-build .website-decision .risk-points {
  border-top-color: var(--line-strong);
}

.page-website-build .website-decision .risk-point {
  padding-block: 22px;
  border-bottom-color: var(--line);
}

.page-website-build .website-decision .risk-point span {
  color: var(--blue);
}

.page-website-build .website-decision .risk-point strong {
  color: var(--navy);
}

.page-website-build .website-decision .risk-point small {
  color: var(--muted);
}

.page-website-build .website-faq .faq-layout {
  grid-template-columns: minmax(260px, .58fr) minmax(0, 1.42fr);
}

.page-website-build .faq-intro h2 {
  max-width: 11ch;
}

.page-website-build .faq-intro p {
  max-width: 34ch;
}

.page-website-build details {
  overflow: clip;
}

.page-website-build summary::after {
  transition: transform .22s cubic-bezier(.16, 1, .3, 1);
}

.page-website-build details[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Schlussabschnitt steht seit 2026-08-12 zentriert. */
.page-website-build .final-cta {
  text-align: center;
}

.page-website-build .final-cta-content {
  max-width: 1240px;
}

.page-website-build .final-cta h2 {
  max-width: 20ch;
  margin-inline: auto;
}

.page-website-build .final-cta p {
  max-width: 61ch;
  margin: 0 auto 28px;
}

.page-website-build .final-actions {
  justify-content: center;
}

.page-website-build .final-cta .response-note {
  margin: 18px auto 0;
}

.page-website-build .back-to-hub {
  margin-top: 20px;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes website-hero-enter {
    from { opacity: .72; filter: blur(7px); transform: translateY(16px); }
    to { opacity: 1; filter: blur(0); transform: translateY(0); }
  }

  @keyframes website-panel-enter {
    from { opacity: .8; clip-path: inset(0 0 14% 0); transform: translateY(18px); }
    to { opacity: 1; clip-path: inset(0); transform: translateY(0); }
  }

  @keyframes website-faq-enter {
    from { opacity: .7; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .page-website-build .hero-copy > * {
    animation: website-hero-enter 2.72s cubic-bezier(.16, 1, .3, 1) backwards;
  }

  .page-website-build .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .page-website-build .hero-copy > :nth-child(3) { animation-delay: .14s; }
  .page-website-build .hero-copy > :nth-child(4) { animation-delay: .2s; }

  .page-website-build .hero-summary {
    animation: website-panel-enter 2.8s .14s cubic-bezier(.16, 1, .3, 1) backwards;
  }

  .page-website-build .case-logo img {
    transition: transform .45s cubic-bezier(.16, 1, .3, 1);
  }

  .page-website-build .case-study:hover .case-logo img {
    transform: scale(1.035);
  }

  .page-website-build details[open] p {
    animation: website-faq-enter 2.26s cubic-bezier(.16, 1, .3, 1) backwards;
  }
}

@media (max-width: 1040px) {
  .page-website-build .page-hero {
    min-height: 0;
    padding-bottom: 72px;
  }

  .page-website-build .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .page-website-build .page-hero h1 {
    max-width: 18ch;
  }

  .page-website-build .hero-summary {
    width: min(650px, calc(100% - 36px));
  }

  .page-website-build .case-study,
  .page-website-build .case-study-reversed {
    grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
    gap: 42px;
  }

  .page-website-build .case-study-reversed .case-visual {
    grid-column: 1;
  }

  .page-website-build .case-study-reversed .case-copy {
    grid-column: 2;
  }

  .page-website-build .price-box {
    grid-template-columns: 1fr;
  }

  .page-website-build .price-facts {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .page-website-build .page-hero {
    padding: 30px 0 64px;
  }

  .page-website-build .breadcrumbs {
    margin-bottom: 26px;
  }

  .page-website-build .page-hero h1 {
    max-width: 12ch;
    margin-bottom: 20px;
    font-size: clamp(2.45rem, 11.2vw, 3rem);
    line-height: 1.08;
  }

  .page-website-build .hero-lead {
    margin-bottom: 22px;
    font-size: 1.03rem;
  }

  .page-website-build .hero-meta {
    gap: 8px;
  }

  .page-website-build .hero-summary {
    width: calc(100% - 24px);
    margin: 12px;
    padding: 26px 22px;
  }

  .page-website-build .hero-summary::before {
    top: -12px;
    right: -12px;
  }

  .page-website-build .hero-summary::after {
    bottom: -12px;
    left: -12px;
  }

  .page-website-build .trust-inner {
    gap: 20px;
  }

  .page-website-build .trust-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 28px;
    align-items: center;
  }

  .page-website-build .trust-items .certificate {
    grid-column: 1 / -1;
  }

  .page-website-build .problem-item,
  .page-website-build .journey-step {
    min-height: 0;
  }

  .page-website-build .journey-number {
    margin-bottom: 28px;
  }

  .page-website-build .benefit-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-block: 25px;
  }

  .page-website-build .case-study,
  .page-website-build .case-study-reversed {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-block: 52px;
  }

  .page-website-build .case-study-reversed .case-visual,
  .page-website-build .case-study-reversed .case-copy {
    grid-column: 1;
    grid-row: auto;
  }

  .page-website-build .case-visual {
    min-height: 260px;
    padding: 26px;
  }

  .page-website-build .case-logo {
    min-height: 108px;
    padding: 22px;
  }

  .page-website-build .insight-list > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .page-website-build .insights-cta {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .page-website-build .insights-cta .button {
    width: 100%;
  }

  .page-website-build .price-amount-wrap {
    margin-left: 12px;
  }

  .page-website-build .price-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .page-website-build .price-actions .button {
    width: 100%;
  }

  .page-website-build .website-faq .faq-layout {
    grid-template-columns: 1fr;
  }

  .page-website-build .faq-intro h2,
  .page-website-build .faq-intro p {
    max-width: 14ch;
  }

  .page-website-build .faq-intro p {
    max-width: 42ch;
  }
}

@media (max-width: 440px) {
  .page-website-build .button {
    padding-inline: 18px;
    font-size: .88rem;
  }

  .page-website-build .page-hero h1 {
    font-size: clamp(2.35rem, 10.8vw, 2.75rem);
  }

  .page-website-build .hero-facts > div {
    grid-template-columns: 78px 1fr;
    gap: 12px;
  }

  .page-website-build .case-visual::before {
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
  }
}

@media print {
  .page-website-build .page-hero {
    min-height: 0;
  }

  .page-website-build .hero-summary::before,
  .page-website-build .hero-summary::after,
  .page-website-build .price-amount-wrap::before,
  .page-website-build .price-amount-wrap::after {
    display: none;
  }
}

/* Website Start — proof-led open project file, 2026-08-09. */
.page-website-build .website-hero {
  min-height: 0;
  padding: clamp(34px, 4vw, 56px) 0 clamp(72px, 8vw, 112px);
  overflow: hidden;
}

.page-website-build main {
  overflow-x: clip;
}

.page-website-build .website-hero .hero-grid {
  grid-template-columns: minmax(0, .96fr) minmax(390px, .74fr);
  gap: clamp(52px, 6vw, 88px);
  align-items: center;
}

.page-website-build .website-hero h1 {
  max-width: 11ch;
  margin-bottom: 28px;
  font-size: clamp(3.35rem, 5.2vw, 5.15rem);
  letter-spacing: -.045em;
  line-height: .98;
}

.page-website-build .website-hero .hero-lead {
  max-width: 55ch;
  font-size: clamp(1.08rem, 1.35vw, 1.24rem);
}

/* Zweiter Hero-CTA ist seit 2026-08-12 ein weisser Button. Auf dem
   Off-White-Hero braucht die weisse Flaeche eine Kontur, sonst
   verschwindet der Button im Untergrund. */
.page-website-build .hero-secondary-action {
  border-color: var(--line-strong);
}

.page-website-build .hero-secondary-action:hover {
  border-color: var(--navy);
  background: var(--white);
  color: var(--blue);
}

.page-website-build .mobile-nav a[aria-current="page"] {
  color: var(--white);
  box-shadow: inset 0 -2px 0 var(--mint);
  font-weight: 800;
}

.page-website-build .website-hero-media {
  --corner: 62px;
  position: relative;
  width: min(100%, 530px);
  margin: 0 24px 24px;
  justify-self: end;
}

/* Zwei diagonal gegenueberliegende Winkel rahmen das Foto, seit die
   Preiskarte aus dem Hero entfernt wurde (Vorgabe 2026-08-12). */
.page-website-build .website-hero-media::before,
.page-website-build .website-hero-media::after {
  position: absolute;
  z-index: 2;
  width: var(--corner);
  height: var(--corner);
  content: "";
  pointer-events: none;
}

.page-website-build .website-hero-media::before {
  top: -16px;
  right: -16px;
  border-top: 2px solid var(--blue);
  border-right: 2px solid var(--blue);
}

.page-website-build .website-hero-media::after {
  bottom: -16px;
  left: -16px;
  border-bottom: 2px solid var(--blue);
  border-left: 2px solid var(--blue);
}

/* Descendant-Selektor: das Bild liegt in <picture>, der Kindselektor
   hat nicht gegriffen und das height-Attribut blieb als
   Praesentationshinweis stehen (gestrecktes Bild). */
.page-website-build .website-hero-media picture { display: block; }

.page-website-build .website-hero-media img {
  width: 100%;
  height: clamp(510px, 58vw, 670px);
  border-radius: 20px;
  object-fit: cover;
  object-position: center 44%;
}

.page-website-build .blueprint-layout {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  gap: clamp(56px, 8vw, 112px);
  align-items: center;
}

.page-website-build .blueprint-copy h2 {
  max-width: 12ch;
}

.page-website-build .blueprint-copy p {
  max-width: 56ch;
  color: var(--muted);
}

/* Seit 2026-08-11 traegt diese Flaeche ein Bild statt des gebauten
   Diagramms; seit 2026-08-12 steht das Bild ohne Karte, Rahmen und
   Bildunterschrift direkt auf dem weissen Abschnitt. Der Bildhintergrund
   wurde dafuer auf reines Weiss normalisiert. Die Bausteine
   .blueprint-home / -branches / -foundation werden nicht mehr verwendet. */
.page-website-build .blueprint-map {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.page-website-build .blueprint-map picture { display: block; }

.page-website-build .blueprint-map img {
  display: block;
  width: 100%;
  height: auto;
}

.page-website-build .blueprint-home {
  display: grid;
  grid-template-columns: minmax(120px, .42fr) 1fr;
  gap: 24px;
  padding: 20px 22px;
  border: 1px solid var(--navy);
  border-radius: 4px;
  background: var(--navy);
  color: var(--white);
}

.page-website-build .blueprint-home span,
.page-website-build .blueprint-branches span {
  color: var(--ink-muted-on-deep);
  font-size: .82rem;
}

.page-website-build .blueprint-branches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.page-website-build .blueprint-branches > div {
  display: grid;
  min-height: 140px;
  padding: 22px;
  align-content: space-between;
  border-right: 1px solid var(--line);
}

.page-website-build .blueprint-branches > div:last-child {
  border-right: 0;
}

.page-website-build .blueprint-branches strong {
  color: var(--navy);
  line-height: 1.3;
}

.page-website-build .blueprint-branches span {
  color: var(--muted);
  line-height: 1.45;
}

.page-website-build .blueprint-foundation {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.page-website-build .blueprint-foundation span {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--white);
  color: var(--muted);
  font-size: .76rem;
  text-align: center;
}

.page-website-build .materials-grid {
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
  gap: clamp(54px, 8vw, 112px);
  align-items: center;
}

.page-website-build .materials-figure {
  position: relative;
  margin: 0;
}

.page-website-build .materials-figure::after {
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 54px;
  height: 54px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  content: "";
}

.page-website-build .materials-figure img {
  width: 100%;
  min-height: 570px;
  border-radius: 20px;
  object-fit: cover;
  object-position: 42% center;
}

.page-website-build .materials-copy h2 {
  max-width: 14ch;
}

.page-website-build .materials-copy > p {
  max-width: 62ch;
  color: var(--muted);
}

.page-website-build .materials-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin-top: 34px;
}

.page-website-build .materials-columns > div {
  padding-top: 22px;
  border-top: 1px solid var(--line-strong);
}

.page-website-build .materials-columns h3 {
  font-size: 1.05rem;
}

.page-website-build .materials-columns ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: .9rem;
}

.page-website-build .materials-note {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: .86rem;
}

.page-website-build .website-projects {
  border-top: 1px solid var(--line-dark);
  background: var(--navy-deep);
  color: var(--white);
}

.page-website-build .website-projects .section-heading h2,
.page-website-build .website-projects h3 {
  color: var(--white);
}

.page-website-build .website-projects .section-heading p {
  color: var(--ink-muted-on-deep);
}

.page-website-build .project-ledger {
  border-top: 1px solid var(--line-dark);
}

.page-website-build .project-proof {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
  gap: clamp(48px, 7vw, 94px);
  padding-block: clamp(64px, 8vw, 104px);
  align-items: center;
  border-bottom: 1px solid var(--line-dark);
}

.page-website-build .project-proof-hotels {
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
}

.page-website-build .project-proof-hotels .project-shot-stack {
  grid-column: 2;
}

.page-website-build .project-proof-hotels .project-copy {
  grid-column: 1;
  grid-row: 1;
}

.page-website-build .project-shot,
.page-website-build .project-shot-stack {
  min-width: 0;
  margin: 0;
}

/* Screenshots sitzen in einem Browserrahmen mit Adresszeile. Das erklaert
   den Ausschnitt, belegt dass die Seiten live sind, und ersetzt den nackten
   1px-Rand. Redesign 2026-08-11. */
.page-website-build .project-shot {
  overflow: hidden;
  border: 1px solid rgba(220, 232, 245, .2);
  border-radius: 14px;
  background: #0c2a49;
  box-shadow: 0 26px 60px rgba(2, 14, 30, .42);
}

.page-website-build .shot-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(220, 232, 245, .16);
  background: rgba(255, 255, 255, .05);
}

.page-website-build .shot-dots { display: flex; flex-shrink: 0; gap: 6px; }
.page-website-build .shot-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(220, 232, 245, .26);
}

.page-website-build .shot-url {
  overflow: hidden;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: var(--ink-muted-on-deep);
  font-size: .72rem;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* picture ist inline — ohne display:block entsteht unter dem Bild eine
   Zeilenlücke im Rahmen. height:auto verhindert, dass das height-Attribut
   als Praesentationshinweis das Bild streckt. */
.page-website-build .project-shot picture { display: block; }

.page-website-build .project-shot img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--white);
}

.page-website-build .project-shot figcaption {
  padding: 12px 14px 13px;
  border-top: 1px solid rgba(220, 232, 245, .12);
  color: var(--ink-muted-on-deep);
  font-size: .76rem;
}

.page-website-build .project-shot-stack {
  display: grid;
  gap: 30px;
}

.page-website-build .project-shot-secondary {
  width: 88%;
  margin-left: 12%;
}

/* Beide Kundenlogos sind dunkle Artworks. Auf der Navy-Flaeche waren sie
   ohne helle Traegerflaeche praktisch unsichtbar — das Roether-Logo wirkte
   dadurch kaputt. Einheitliches Plaettchen fuer beide (2026-08-11). */
.page-website-build .project-logo-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 62px;
  margin-bottom: 30px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 10px 26px rgba(2, 14, 30, .26);
}

.page-website-build .project-logo-plate picture { display: block; }

.page-website-build .project-logo {
  display: block;
  width: auto;
  max-width: 158px;
  max-height: 40px;
  margin: 0;
  object-fit: contain;
  object-position: center;
}

.page-website-build .project-logo-hotels { max-width: 132px; }

.page-website-build .project-copy h3 {
  max-width: 14ch;
  margin-bottom: 20px;
  font-size: clamp(2rem, 3.2vw, 3.25rem);
}

.page-website-build .project-copy > p {
  color: var(--ink-muted-on-deep);
}

.page-website-build .project-signals {
  margin: 30px 0;
  padding: 0;
  border-top: 1px solid var(--line-dark);
  list-style: none;
}

.page-website-build .project-signals li {
  position: relative;
  padding: 15px 0 15px 28px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--ink-on-deep);
  font-size: .9rem;
}

.page-website-build .project-signals li::before {
  position: absolute;
  top: 1.25rem;
  left: 0;
  width: 13px;
  height: 1px;
  background: var(--mint);
  content: "";
}

.page-website-build .project-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--mint);
  font-weight: 750;
  text-underline-offset: 5px;
}

.page-website-build .project-link::after {
  margin-left: 8px;
  content: "→";
}

.page-website-build .project-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 42px;
  padding: clamp(38px, 5vw, 58px) 0;
  align-items: center;
  border-bottom: 1px solid var(--line-dark);
}

.page-website-build .project-cta h3 {
  margin-bottom: 8px;
}

.page-website-build .project-cta p {
  max-width: 64ch;
  margin: 0;
  color: var(--ink-muted-on-deep);
}

.page-website-build .project-disclaimer {
  max-width: 80ch;
  margin: 24px 0 0;
  color: var(--ink-muted-on-deep);
  font-size: .8rem;
}

.page-website-build .website-collaboration {
  overflow: hidden;
}

.page-website-build .collaboration-grid {
  display: grid;
  grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr);
  gap: clamp(56px, 8vw, 112px);
  align-items: center;
}

.page-website-build .collaboration-portrait {
  position: relative;
  height: 650px;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--navy);
}

/* Die mintfarbene Eckklammer am Portrait ist entfernt (Vorgabe 2026-08-11). */

.page-website-build .collaboration-portrait img {
  position: absolute;
  right: -4%;
  bottom: 0;
  width: 108%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
}

.page-website-build .collaboration-copy h2 {
  max-width: 14ch;
}

/* Neben dem Weg zu "Ueber Sichtio" steht seit 2026-08-12 ein direkter
   Kontaktweg, damit der Abschnitt nicht nur weiterleitet. */
.page-website-build .collaboration-actions {
  display: flex;
  margin-top: 26px;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.page-website-build .collaboration-cta { margin-top: 0; }

.page-website-build .collaboration-copy > p {
  max-width: 60ch;
  color: var(--muted);
}

.page-website-build .collaboration-facts {
  margin: 34px 0 28px;
  border-top: 1px solid var(--line-strong);
}

.page-website-build .collaboration-facts > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 28px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.page-website-build .collaboration-facts dt,
.page-website-build .collaboration-facts dd {
  margin: 0;
}

.page-website-build .collaboration-facts dt {
  color: var(--navy);
  font-size: .85rem;
  font-weight: 750;
}

.page-website-build .collaboration-facts dd {
  color: var(--muted);
  font-size: .9rem;
}

.page-website-build .collaboration-response {
  margin-bottom: 14px;
  font-size: .86rem;
}

/* Hero-Bild faehrt von rechts ein und setzt sich; erst danach zeichnen sich
   die beiden rechten Winkel in 2s (erst waagerechter, dann senkrechter
   Schenkel). Vorgabe 2026-08-12. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes website-media-enter {
    from { opacity: 0; transform: translateX(78px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes website-corner-draw {
    0% { width: 0; height: 0; }
    45% { width: var(--corner); height: 0; }
    55% { width: var(--corner); height: 0; }
    100% { width: var(--corner); height: var(--corner); }
  }

  .page-website-build .website-hero-media picture {
    animation: website-media-enter .92s .1s cubic-bezier(.16, 1, .3, 1) backwards;
  }

  .page-website-build .website-hero-media::before,
  .page-website-build .website-hero-media::after {
    animation: website-corner-draw 2s 1.02s linear backwards;
  }
}

@media (max-width: 1040px) {
  .page-website-build .website-hero .hero-grid,
  .page-website-build .blueprint-layout,
  .page-website-build .materials-grid {
    grid-template-columns: 1fr;
  }

  .page-website-build .website-hero .hero-grid {
    gap: 62px;
  }

  .page-website-build .website-hero h1 {
    max-width: 12ch;
  }

  .page-website-build .website-hero-media {
    width: min(100%, 720px);
    justify-self: start;
  }

  .page-website-build .website-hero-media > img {
    height: 610px;
  }

  .page-website-build .materials-figure img {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .page-website-build .project-proof,
  .page-website-build .project-proof-hotels {
    grid-template-columns: 1fr;
  }

  .page-website-build .project-proof-hotels .project-shot-stack,
  .page-website-build .project-proof-hotels .project-copy {
    grid-column: 1;
    grid-row: auto;
  }

  .page-website-build .project-copy {
    max-width: 720px;
  }
}

@media (max-width: 760px) {
  .page-website-build * {
    min-width: 0;
  }

  .page-website-build main :where(h1, h2, h3, h4, p, li, dt, dd, a, strong, small) {
    overflow-wrap: anywhere;
  }

  .page-website-build .website-hero {
    padding-top: 28px;
  }

  .page-website-build .button {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .page-website-build .hero-meta {
    gap: 7px;
  }

  .page-website-build .website-hero h1 {
    max-width: 11ch;
    font-size: clamp(2.65rem, 13vw, 3.65rem);
  }

  .page-website-build .hero-secondary-action {
    justify-content: center;
  }

  .page-website-build .website-hero-media {
    --corner: 48px;
    width: 100%;
    margin: 0;
  }

  .page-website-build .website-hero-media::before {
    top: -12px;
    right: -8px;
  }

  .page-website-build .website-hero-media::after {
    bottom: -12px;
    left: -8px;
  }

  .page-website-build .website-hero-media > img {
    height: 460px;
    border-radius: 16px;
  }

  .page-website-build .blueprint-home {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .page-website-build .blueprint-branches,
  .page-website-build .blueprint-foundation,
  .page-website-build .materials-columns {
    grid-template-columns: 1fr;
  }

  .page-website-build .blueprint-branches > div {
    min-height: 0;
    gap: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .page-website-build .blueprint-branches > div:last-child {
    border-bottom: 0;
  }

  .page-website-build .blueprint-foundation {
    gap: 8px;
  }

  .page-website-build .materials-figure img {
    aspect-ratio: 4 / 3;
    border-radius: 16px;
  }

  .page-website-build .materials-columns {
    gap: 26px;
  }

  .page-website-build .project-proof {
    gap: 42px;
    padding-block: 58px;
  }

  .page-website-build .project-shot-secondary {
    width: 100%;
    margin-left: 0;
  }

  .page-website-build .project-logo {
    margin-bottom: 26px;
  }

  .page-website-build .project-cta {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .page-website-build .project-cta .button {
    width: 100%;
  }

  .page-website-build .collaboration-grid {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .page-website-build .collaboration-portrait {
    height: 560px;
    border-radius: 16px;
  }

  .page-website-build .collaboration-facts > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

@media (max-width: 440px) {
  .page-website-build .website-hero-media > img {
    height: 400px;
  }

  .page-website-build .hero-offer-card {
    padding: 20px;
  }

  .page-website-build .blueprint-map {
    padding: 24px 20px;
  }

  .page-website-build .collaboration-portrait {
    height: 480px;
  }
}

@media print {
  .page-website-build .hero-offer-card {
    position: static;
    margin-top: 12px;
  }

  .page-website-build .website-projects {
    background: var(--white);
    color: var(--ink);
  }

  .page-website-build .website-projects h2,
  .page-website-build .website-projects h3,
  .page-website-build .website-projects p,
  .page-website-build .project-signals li {
    color: var(--ink) !important;
  }
}

/* Monatsablauf (SEO Betreuung): Kreislaufgrafik neben den vier Schritten.
   Die Grafik ist freigestellt und steht ohne Karte oder Flaeche direkt auf
   dem weissen Abschnitt. */
.monthly-flow .flow-layout {
  display: grid;
  grid-template-columns: minmax(280px, .88fr) minmax(0, 1.12fr);
  gap: clamp(40px, 5.5vw, 80px);
  align-items: start;
}

.monthly-flow .flow-figure {
  position: sticky;
  top: 128px;
  max-width: 460px;
  margin: 0;
}

.monthly-flow .flow-figure picture { display: block; }

.monthly-flow .flow-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.monthly-flow .process {
  max-width: 960px;
  margin-inline: 0;
}

.monthly-flow .process-copy { padding-bottom: 48px; }

@media (max-width: 1040px) {
  .monthly-flow .flow-layout {
    grid-template-columns: 1fr;
    gap: clamp(36px, 5vw, 52px);
  }

  .monthly-flow .flow-figure {
    position: static;
    max-width: 520px;
    margin-inline: auto;
  }

  .monthly-flow .process { margin-inline: auto; }
}

@media print {
  .monthly-flow .flow-figure { position: static; }
}

/* ==========================================================================
   Griechische Fassung (/el/) — Schriftkorrekturen
   Angelegt am 20.09.2026.

   Unter /el/ steht nicht Geist, sondern Inter (Begruendung in fonts.css:
   Geist hat kein griechisches Alphabet). Die Displaywerte dieser Datei sind
   an Geist und an deutschen Text gemessen. Auf griechischem Text in Inter
   tragen sie nicht:

   1. Laufweite. -.045em ist fuer Inter zu eng. Griechische Grossbuchstaben
      mit Tonos (Ό, Έ, Ά, Ί, Ύ) tragen den Akzent nach links ueber die
      Buchstabenbreite hinaus; bei -.045em beruehrt er den Vorgaenger.
   2. Zeilenhoehe. .98 ist fuer lateinische Versalien gerechnet. Der Tonos
      steht oberhalb der Versalhoehe und stoesst an die Unterlaengen der
      Zeile darueber.
   3. Zeilenbreite. Griechische Woerter sind laenger als deutsche
      ("εντυπώσεις", "ιστοσελίδων"). Bei 11ch bricht dieselbe Aussage in
      sechs statt fuenf Zeilen, die Ueberschrift drueckt Lead und Buttons
      aus dem ersten Bildschirm und die Textspalte wird deutlich hoeher als
      das Foto daneben.

   Ziel auf allen Breiten: hoechstens fuenf Zeilen, Textspalte und Bild
   ungefaehr gleich hoch. Auf dem Desktop reicht dafuer die Zeilenbreite,
   die Schriftgroesse bleibt wie in der deutschen Fassung. Auf dem Handy
   ist die Spalte so breit wie der Bildschirm — dort ist der Schriftgrad
   der einzige Hebel.

   html[lang="el"] davor: die deutschen Seiten bleiben unveraendert.
   ========================================================================== */

html[lang="el"] .page-website-build .website-hero h1 {
  max-width: 13ch;
  letter-spacing: -.03em;
  line-height: 1.03;
}

@media (max-width: 1040px) {
  html[lang="el"] .page-website-build .website-hero h1 {
    max-width: 15ch;
  }
}

@media (max-width: 760px) {
  html[lang="el"] .page-website-build .website-hero h1 {
    max-width: none;
    font-size: clamp(2.3rem, 11vw, 3.1rem);
    line-height: 1.06;
  }
}

/* Gebaute Seitenstruktur statt Bild (/el/, siehe Kommentar im Markup).
   .blueprint-map ist fuer das Bild auf rahmenlos gesetzt; der Modifier
   holt den Rahmen zurueck, den die gebaute Fassung braucht. Sprachneutral
   notiert: die deutsche Seite kann jederzeit denselben Weg gehen. */
.page-website-build .blueprint-map-built {
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 22px 48px -34px rgba(11, 37, 69, .55);
}

.page-website-build .blueprint-map-built .blueprint-home strong {
  font-size: 1.06rem;
  letter-spacing: -.02em;
  line-height: 1.3;
}

/* Verbindungsstriche: ohne sie stehen drei Bloecke untereinander, ohne dass
   die Hierarchie sichtbar waere. 1px, in der Rasterfarbe — es ist eine
   Erklaerung, keine Grafik. */
.page-website-build .blueprint-map-built .blueprint-branches,
.page-website-build .blueprint-map-built .blueprint-foundation {
  position: relative;
}

.page-website-build .blueprint-map-built .blueprint-branches::before,
.page-website-build .blueprint-map-built .blueprint-foundation::before {
  position: absolute;
  top: -18px;
  left: 50%;
  width: 1px;
  height: 18px;
  background: var(--line-strong);
  content: "";
}

.page-website-build .blueprint-map-built .blueprint-foundation span {
  line-height: 1.45;
}

@media (max-width: 620px) {
  .page-website-build .blueprint-map-built .blueprint-branches {
    grid-template-columns: 1fr;
  }

  .page-website-build .blueprint-map-built .blueprint-branches > div {
    min-height: 0;
    padding: 18px 16px;
    gap: 6px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .page-website-build .blueprint-map-built .blueprint-branches > div:last-child {
    border-bottom: 0;
  }

  .page-website-build .blueprint-map-built .blueprint-foundation {
    grid-template-columns: 1fr;
  }
}

/* Textspalte des Blueprint-Abschnitts unter /el/.
   12ch sind in der deutschen Fassung rund 5 Woerter pro Zeile; in
   griechischer Schrift werden daraus knapp 11 Zeichen und fuenf Zeilen
   Ueberschrift neben einem halbleeren Diagramm. Die Spalte bekommt
   etwas mehr Anteil, das Diagramm braucht die 722 px nicht. */
/* min-width-Abfrage ist Absicht: html[lang="el"] (0,4,1) schlaegt die
   1040er-Regel (0,3,1) unabhaengig von der Reihenfolge. Ohne die Schranke
   erzwaenge diese Zeile zwei Spalten auch auf dem Handy — 320px Mindest-
   breite plus zweite Spalte passen nicht in 375px, das Raster kollabiert. */
@media (min-width: 1041px) {
  html[lang="el"] .page-website-build .blueprint-layout {
    grid-template-columns: minmax(320px, .86fr) minmax(0, 1.14fr);
  }
}

html[lang="el"] .page-website-build .blueprint-copy h2 {
  max-width: none;
}

/* Kundenlogos verlinken auf die Kunden-Websites */
.logo-link { display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; transition: opacity 160ms ease, transform 160ms ease; }
.logo-link:hover { opacity: .72; transform: translateY(-1px); }
.logo-link:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }