.gjpcc,
.gjpcc * { box-sizing: border-box; }

.gjpcc {
  position: relative !important;
  left: auto !important;
  /* JS setzt die tatsächliche Layout-Viewportbreite (ohne Scrollbar). Dadurch
     bleibt der Full-Width-Ausbruch auch bei Browser-Zoom exakt im Sichtbereich. */
  width: var(--gjpcc-viewport-width, 100vw) !important;
  max-width: var(--gjpcc-viewport-width, 100vw) !important;
  margin-left: calc(50% - (var(--gjpcc-viewport-width, 100vw) / 2)) !important;
  margin-right: calc(50% - (var(--gjpcc-viewport-width, 100vw) / 2)) !important;
  flex: 0 0 var(--gjpcc-viewport-width, 100vw);
  flex-basis: var(--gjpcc-viewport-width, 100vw);
  --gjpcc-safe-gutter: max(12px, min(var(--gjpcc-gutter), 5vw));
  /* Eigene Sicherheitszone für die vertikale Abschnittsleiste. Auf breiten
     Viewports liegt sie im ohnehin vorhandenen Außenrand. Wird die CSS-
     Viewportbreite durch Browser-Zoom kleiner, reserviert das Layout nur den
     tatsächlich fehlenden Platz innerhalb des Inhaltscontainers. */
  --gjpcc-tab-current-width: var(--gjpcc-tab-width);
  --gjpcc-tab-rail-gap: clamp(14px, 1.1vw, 22px);
  --gjpcc-tab-rail-offset: max(12px, var(--gjpcc-tab-offset));
  --gjpcc-tab-rail-width: calc(var(--gjpcc-tab-rail-offset) + var(--gjpcc-tab-current-width) + var(--gjpcc-tab-rail-gap));
  --gjpcc-content-origin: max(var(--gjpcc-safe-gutter), calc((var(--gjpcc-viewport-width, 100vw) - var(--gjpcc-content)) / 2));
  --gjpcc-tab-content-inset: max(0px, calc(var(--gjpcc-tab-rail-width) - var(--gjpcc-content-origin)));
  overflow: clip;
  overflow-x: clip;
  color: var(--gjpcc-text);
  background: var(--gjpcc-bg);
  font-family: var(--gjpcc-body-font);
  font-size: var(--gjpcc-base);
  font-weight: var(--gjpcc-body-weight);
  line-height: var(--gjpcc-line-height);
  -webkit-font-smoothing: antialiased;
}

/* Compatibility with Gutenberg Columns/Groups and themes that constrain block children. */
body:has(.gjpcc) { overflow-x: clip; }
.wp-block-column:has(> .gjpcc),
.wp-block-group:has(> .gjpcc),
.entry-content:has(.gjpcc),
.wp-site-blocks:has(.gjpcc) { overflow: visible !important; }

.gjpcc.gjpcc .gjpcc__hero-media,
.gjpcc.gjpcc .gjpcc__testimonial-media,
.gjpcc.gjpcc .gjpcc__services-image-frame { box-sizing: border-box !important; }

.gjpcc a { color: inherit; text-decoration: none; }
.gjpcc img { display: block; width: 100% !important; max-width: none !important; margin: 0 !important; }
.gjpcc p { margin: 0 0 1.1em; }
.gjpcc h1,
.gjpcc h2,
.gjpcc h3,
.gjpcc blockquote {
  margin: 0;
  color: var(--gjpcc-navy);
  font-family: var(--gjpcc-heading-font);
  font-weight: var(--gjpcc-heading-weight);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.gjpcc h2 { font-size: clamp(var(--gjpcc-h2-mobile), 3.1vw, var(--gjpcc-h2)); }
.gjpcc h3 { font-family: var(--gjpcc-body-font); font-weight: 700; letter-spacing: 0; line-height: 1.35; }

.gjpcc__container {
  width: min(var(--gjpcc-content), calc(100% - (var(--gjpcc-safe-gutter) * 2)));
  max-width: calc(100% - (var(--gjpcc-safe-gutter) * 2));
  margin-inline: auto;
}
.gjpcc__section { padding-block: var(--gjpcc-space); }
.gjpcc__section,
.gjpcc__trust,
.gjpcc__testimonial { position: relative; overflow: visible; }
.gjpcc__section-tab-wrap {
  position: absolute;
  z-index: 8;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: visible;
  pointer-events: none;
}
.gjpcc__section-tab {
  position: absolute;
  top: var(--gjpcc-tab-inset);
  bottom: var(--gjpcc-tab-inset);
  left: var(--gjpcc-tab-offset);
  isolation: isolate;
  display: flex;
  width: var(--gjpcc-tab-current-width);
  min-width: var(--gjpcc-tab-current-width);
  height: auto;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 0;
  border-radius: var(--gjpcc-tab-radius);
  color: var(--gjpcc-tab-color);
  background: transparent;
  box-shadow: none;
}
.gjpcc__section-tab::before,
.gjpcc__section-tab::after,
.gjpcc__section-tab-label::before {
  position: absolute;
  content: "";
  pointer-events: none;
}
.gjpcc__section-tab-label {
  position: relative;
  z-index: 2;
  isolation: isolate;
  display: inline-flex;
  min-height: 0;
  max-height: calc(100% - 16px);
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--gjpcc-tab-padding-x) max(7px, var(--gjpcc-tab-padding-y));
  border: 1px solid color-mix(in srgb, var(--gjpcc-tab-bg) 36%, transparent);
  border-radius: var(--gjpcc-tab-radius);
  color: inherit;
  font-family: var(--gjpcc-tab-font);
  font-size: var(--gjpcc-tab-size);
  font-style: var(--gjpcc-tab-font-style);
  font-weight: var(--gjpcc-tab-weight);
  line-height: 1.2;
  letter-spacing: var(--gjpcc-tab-letter-spacing);
  text-align: center;
  text-shadow: 0 1px 5px rgba(16,38,67,.26);
  text-transform: var(--gjpcc-tab-text-transform);
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  /* Fallback für ältere Browser. Moderne Browser überschreiben dies weiter
     unten mit sideways-lr, wodurch die gewünschte Leserichtung ohne gedrehte
     Rasterebene und damit deutlich schärfer dargestellt wird. */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  transform-origin: center;
  /* Native font hinting is intentionally retained. Grayscale-only antialiasing
     and geometricPrecision made small vertical type look soft on Windows/Chromium. */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-backdrop-filter: blur(var(--gjpcc-tab-blur));
  backdrop-filter: blur(var(--gjpcc-tab-blur));
}
.gjpcc__section-tab-label::before {
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: var(--gjpcc-tab-bg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gjpcc-tab-bg) 82%, white), var(--gjpcc-tab-bg));
  opacity: calc(var(--gjpcc-tab-opacity) * .82);
}

/* Premium-Linie: eine feine, durchgehende Achse über die Blockhöhe und ein
   schwebendes Label in der Mitte. So bleiben die Bereiche optisch verbunden,
   ohne wie massive farbige Balken zu wirken. */
.gjpcc--tab-elegant .gjpcc__section-tab {
  left: max(12px, var(--gjpcc-tab-offset));
}
.gjpcc--tab-elegant .gjpcc__section-tab::before {
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  width: max(1px, var(--gjpcc-tab-line-width));
  border-radius: 999px;
  background: var(--gjpcc-tab-bg);
  opacity: calc(var(--gjpcc-tab-line-opacity) * .38);
  transform: translateX(-50%);
}
.gjpcc--tab-elegant .gjpcc__section-tab::after {
  z-index: 1;
  top: 50%;
  left: 50%;
  width: calc(var(--gjpcc-tab-width) + 16px);
  height: 1px;
  border-radius: 999px;
  background: var(--gjpcc-tab-bg);
  opacity: calc(var(--gjpcc-tab-line-opacity) * .48);
  transform: translate(-50%, -50%);
}
.gjpcc--tab-elegant .gjpcc__section-tab-label {
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(23,48,82,.11), inset 0 1px 0 rgba(255,255,255,.34);
}
.gjpcc--tab-elegant .gjpcc__section-tab-label::before {
  opacity: calc(var(--gjpcc-tab-opacity) * .78);
}

/* Glasleiste: dezente, vollhohe Fläche mit klarer Innenkante. */
.gjpcc--tab-glass .gjpcc__section-tab {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gjpcc-tab-bg) 18%, transparent);
  background: color-mix(in srgb, var(--gjpcc-tab-bg) 5%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(var(--gjpcc-tab-blur));
  backdrop-filter: blur(var(--gjpcc-tab-blur));
}
.gjpcc--tab-glass .gjpcc__section-tab::before {
  z-index: -1;
  inset: 0;
  background: var(--gjpcc-tab-bg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gjpcc-tab-bg) 54%, white), var(--gjpcc-tab-bg));
  opacity: calc(var(--gjpcc-tab-opacity) * .22);
}
.gjpcc--tab-glass .gjpcc__section-tab::after {
  z-index: 0;
  top: 10%;
  right: 0;
  bottom: 10%;
  width: max(1px, var(--gjpcc-tab-line-width));
  border-radius: 999px;
  background: var(--gjpcc-tab-bg);
  opacity: calc(var(--gjpcc-tab-line-opacity) * .7);
}
.gjpcc--tab-glass .gjpcc__section-tab-label {
  min-height: 0;
  max-height: calc(100% - 24px);
  border: 0;
  background: transparent;
  box-shadow: none;
}
.gjpcc--tab-glass .gjpcc__section-tab-label::before { display: none; }

/* Minimalistisch: nur Linie und Typografie, ohne farbige Kapsel. */
.gjpcc--tab-minimal .gjpcc__section-tab::before {
  top: 0;
  bottom: 0;
  left: 50%;
  width: max(1px, var(--gjpcc-tab-line-width));
  border-radius: 999px;
  background: var(--gjpcc-tab-bg);
  opacity: calc(var(--gjpcc-tab-line-opacity) * .46);
  transform: translateX(-50%);
}
.gjpcc--tab-minimal .gjpcc__section-tab-label {
  min-height: 0;
  padding: 18px 7px;
  border-color: color-mix(in srgb, var(--gjpcc-tab-bg) 20%, transparent);
  color: var(--gjpcc-tab-bg);
  background: color-mix(in srgb, var(--gjpcc-bg) 92%, transparent);
  box-shadow: 0 8px 22px rgba(23,48,82,.06);
  text-shadow: none;
}
.gjpcc--tab-minimal .gjpcc__section-tab-label::before { display: none; }

/* Nur Text mit Strichen: keine Kapsel, keine Fläche und kein Schatten.
   Der vertikale Text wird oben und unten von einer feinen Linie gerahmt: – Text – */
.gjpcc--tab-dashes .gjpcc__section-tab {
  left: max(10px, var(--gjpcc-tab-offset));
}
.gjpcc--tab-dashes .gjpcc__section-tab::before,
.gjpcc--tab-dashes .gjpcc__section-tab::after {
  display: none;
}
.gjpcc--tab-dashes .gjpcc__section-tab-label {
  gap: clamp(9px, 1.1vh, 15px);
  max-height: calc(100% - 20px);
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--gjpcc-tab-plain-color);
  background: transparent;
  box-shadow: none;
  text-shadow: none;
  /* Leserichtung wie in Version 1.0.10; die eigentliche Drehung erfolgt
     in modernen Browsern ohne CSS-Transform über sideways-lr. */
  direction: ltr;
  unicode-bidi: isolate;
  letter-spacing: min(var(--gjpcc-tab-letter-spacing), .11em);
  word-spacing: .32em;
  line-height: 1;
  /* A very fine same-colour outline keeps the rotated glyph edges crisp at
     9–14 px without changing the selected font family or reading direction. */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-text-stroke: var(--gjpcc-tab-text-stroke, .22px) currentColor;
  paint-order: stroke fill;
  opacity: 1;
  filter: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Schriftfarbe auf dunklen Blockflächen.
   Die vorhandene Einstellung „Schriftfarbe auf dunkler Fläche“ gilt bewusst
   unabhängig vom gewählten Reiter-Design. Dadurch bleibt insbesondere das
   Design „Nur Text mit Strichen“ auf dem navyfarbenen Kundenstimmen-Block
   lesbar. text-fill-color verhindert zusätzlich, dass Chromium bei vertikaler
   Schrift eine alte Füllfarbe aus dem Font-Raster übernimmt. */
.gjpcc__section--surface-dark .gjpcc__section-tab,
.gjpcc__section--surface-dark .gjpcc__section-tab-label,
.gjpcc--tab-dashes .gjpcc__section--surface-dark .gjpcc__section-tab-label,
.gjpcc--tab-minimal .gjpcc__section--surface-dark .gjpcc__section-tab-label {
  color: var(--gjpcc-tab-color) !important;
  -webkit-text-fill-color: var(--gjpcc-tab-color) !important;
}

/* Scharfe Leserichtung von unten nach oben ohne transformierte Textebene.
   sideways-lr entspricht für lateinische Schrift der gewünschten bisherigen
   Orientierung, vermeidet aber die in Chromium sichtbare Verpixelung durch
   rotate(180deg). */
@supports (writing-mode: sideways-lr) {
  .gjpcc__section-tab-label,
  .gjpcc--tab-dashes .gjpcc__section-tab-label {
    writing-mode: sideways-lr;
    text-orientation: mixed;
    transform: none;
  }
}

.gjpcc--tab-dashes .gjpcc__section-tab-label::before,
.gjpcc--tab-dashes .gjpcc__section-tab-label::after {
  position: static;
  z-index: auto;
  inset: auto;
  display: block;
  flex: 0 0 auto;
  width: clamp(14px, calc(var(--gjpcc-tab-width) * .4), 24px);
  height: max(1px, var(--gjpcc-tab-line-width));
  border-radius: 999px;
  content: "";
  background: var(--gjpcc-tab-dash-color);
  opacity: max(.35, var(--gjpcc-tab-line-opacity));
}

.gjpcc__eyebrow {
  margin: 0 0 1.15rem;
  color: var(--gjpcc-navy);
  font-size: var(--gjpcc-eyebrow);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.gjpcc__hero { background: var(--gjpcc-bg); }

/* Dezente Trennlinie zwischen Hero und folgendem Inhaltsblock. Der eigene
   Zwischenraum verhindert, dass die Linie optisch am Bild oder Text klebt. */
.gjpcc__hero-divider {
  position: relative;
  z-index: 4;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding-block: var(--gjpcc-hero-divider-spacing);
  background: var(--gjpcc-bg);
  pointer-events: none;
}
.gjpcc__hero-divider-line {
  position: relative;
  display: block;
  width: min(var(--gjpcc-hero-divider-width), calc(100% - (var(--gjpcc-safe-gutter) * 2)));
  max-width: var(--gjpcc-content);
  height: max(1px, var(--gjpcc-hero-divider-thickness));
  border-radius: 999px;
  background: var(--gjpcc-hero-divider-color);
  opacity: var(--gjpcc-hero-divider-opacity);
}
.gjpcc--hero-divider-soft .gjpcc__hero-divider-line {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--gjpcc-hero-divider-color) 7%,
    var(--gjpcc-hero-divider-color) 93%,
    transparent 100%);
}
.gjpcc--hero-divider-accent .gjpcc__hero-divider-line::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(44px, 5vw, 82px);
  height: max(1px, var(--gjpcc-hero-divider-thickness));
  border-radius: inherit;
  content: "";
  background: var(--gjpcc-hero-divider-accent);
  transform: translate(-50%, -50%);
}
.gjpcc__hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(var(--gjpcc-hero-image-width), 56vw));
  min-height: var(--gjpcc-hero-height);
}
.gjpcc__hero-copy { position: relative; z-index: 2; display: flex; align-items: center; background: var(--gjpcc-bg); }
.gjpcc__hero-copy::after {
  position: absolute;
  z-index: -1;
  inset: 0 calc(var(--gjpcc-hero-fade) * -1) 0 auto;
  width: var(--gjpcc-hero-fade);
  content: "";
  background: linear-gradient(90deg, var(--gjpcc-bg), rgba(255,255,255,0));
  pointer-events: none;
}
.gjpcc__hero-copy-inner { width: min(calc(100% - var(--gjpcc-safe-gutter)), calc(var(--gjpcc-content) * .44)); max-width: calc(100% - var(--gjpcc-safe-gutter)); margin-left: max(var(--gjpcc-safe-gutter), calc((var(--gjpcc-viewport-width, 100vw) - var(--gjpcc-content)) / 2)); padding-block: 4rem; padding-right: 2rem; container-type: inline-size; }
.gjpcc__hero-title { max-width: 100%; font-size: clamp(1.75rem, 10.5cqw, var(--gjpcc-h1)); }
.gjpcc__hero-title-line { display: block; max-width: 100%; }
.gjpcc--hero-lines-nowrap .gjpcc__hero-title-line { white-space: nowrap; }
@supports not (font-size: 1cqw) {
  .gjpcc__hero-title { font-size: clamp(1.75rem, 4.1vw, var(--gjpcc-h1)); }
}
.gjpcc__lead { max-width: 47rem; margin-top: 1.55rem; color: var(--gjpcc-muted); font-size: 1.03em; }
.gjpcc__hero-media { width: 100% !important; max-width: none !important; min-width: 0; min-height: var(--gjpcc-hero-height); overflow: hidden; background: var(--gjpcc-soft); }
.gjpcc__hero-image { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: var(--gjpcc-image-position, center center); }
.gjpcc__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.gjpcc__button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  overflow: hidden;
  padding: .85rem 1.35rem;
  border: 1px solid var(--gjpcc-navy);
  border-radius: var(--gjpcc-button-radius);
  font-size: .9em;
  font-weight: 700;
  line-height: 1.2;
  transition: color .28s ease, border-color .28s ease, transform .28s ease, box-shadow .28s ease, background-color .28s ease;
}
.gjpcc__button span:last-child { font-size: 1.2em; transition: transform .28s ease; }
.gjpcc__button--primary { border-color: var(--gjpcc-accent); color: #fff; background: var(--gjpcc-accent); }
.gjpcc__button--secondary { color: var(--gjpcc-navy); background: transparent; }
.gjpcc__button::before { position: absolute; z-index: -1; inset: 0; content: ""; background: var(--gjpcc-navy); transform: scaleX(0); transform-origin: left; transition: transform .32s cubic-bezier(.4,0,.2,1); }
.gjpcc--button-fill .gjpcc__button:hover::before { transform: scaleX(1); }
.gjpcc--button-fill .gjpcc__button:hover { color: #fff; border-color: var(--gjpcc-navy); }
.gjpcc--button-lift .gjpcc__button:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(23,48,82,.16); }
.gjpcc--button-arrow .gjpcc__button:hover span:last-child { transform: translateX(5px); }
.gjpcc__button:focus-visible,
.gjpcc a:focus-visible,
.gjpcc input:focus-visible,
.gjpcc textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--gjpcc-accent) 55%, white); outline-offset: 3px; }
.gjpcc__button:disabled { opacity: .65; cursor: wait; }
.gjpcc__facts { display: flex; flex-wrap: wrap; gap: .8rem 1.65rem; margin: 2.2rem 0 0; padding: 0; list-style: none; color: var(--gjpcc-muted); font-size: .82em; }
.gjpcc__facts li { display: inline-flex; align-items: center; gap: .55rem; transition: color .28s ease, transform .28s ease; }
.gjpcc__fact-label { display: inline-block; transition: transform .28s ease, color .28s ease; }
.gjpcc__fact-check {
  position: relative;
  display: grid;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--gjpcc-navy);
  border-radius: 50%;
  color: var(--gjpcc-navy);
  background: transparent;
  transition: color .28s ease, background-color .28s ease, border-color .28s ease, transform .36s cubic-bezier(.2,.75,.2,1), box-shadow .28s ease;
}
.gjpcc__fact-check::before,
.gjpcc__fact-check::after {
  position: absolute;
  width: 4px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  transform: translateY(-1px) rotate(45deg);
  transform-origin: 65% 65%;
}
.gjpcc__fact-check::after { color: #fff; opacity: 0; }
.gjpcc__facts li:hover { color: var(--gjpcc-navy); transform: translateY(-2px); }
.gjpcc__facts li:hover .gjpcc__fact-label { transform: translateX(2px); }

/* Haken zeichnet sich beim Hover neu. Der statische Haken bleibt zuvor sichtbar,
   damit die Merkmale auch ohne Maus eindeutig erkennbar sind. */
.gjpcc--facts-draw .gjpcc__fact-check::after {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .38s cubic-bezier(.25,.8,.25,1) .06s;
}
.gjpcc--facts-draw .gjpcc__facts li:hover .gjpcc__fact-check {
  border-color: var(--gjpcc-accent);
  background: var(--gjpcc-accent);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--gjpcc-accent) 24%, transparent);
}
.gjpcc--facts-draw .gjpcc__facts li:hover .gjpcc__fact-check::before { opacity: 0; }
.gjpcc--facts-draw .gjpcc__facts li:hover .gjpcc__fact-check::after { clip-path: inset(0 0 0 0); }

.gjpcc--facts-pulse .gjpcc__facts li:hover .gjpcc__fact-check {
  border-color: var(--gjpcc-accent);
  color: var(--gjpcc-accent);
  transform: scale(1.13);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--gjpcc-accent) 12%, transparent);
}
.gjpcc--facts-rotate .gjpcc__facts li:hover .gjpcc__fact-check {
  border-color: var(--gjpcc-accent);
  color: #fff;
  background: var(--gjpcc-accent);
  transform: rotate(360deg) scale(1.08);
}
.gjpcc--facts-none .gjpcc__facts li,
.gjpcc--facts-none .gjpcc__fact-label,
.gjpcc--facts-none .gjpcc__fact-check { transition: none; }
.gjpcc--facts-none .gjpcc__facts li:hover { color: inherit; transform: none; }
.gjpcc--facts-none .gjpcc__facts li:hover .gjpcc__fact-label { transform: none; }

.gjpcc__intro-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(3rem, 8vw, 9rem); align-items: center; }
.gjpcc__intro h2 { max-width: 14ch; margin-bottom: 1.5rem; }
.gjpcc__intro p:not(.gjpcc__eyebrow) { max-width: 48rem; color: var(--gjpcc-muted); }
.gjpcc__audiences h3 { padding-bottom: .9rem; border-bottom: 1px solid var(--gjpcc-line); color: var(--gjpcc-navy); }
.gjpcc__audiences ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; margin: 0; padding: 0; list-style: none; }
.gjpcc__audiences li { display: flex; align-items: center; gap: .8rem; min-height: 56px; border-bottom: 1px solid var(--gjpcc-line); }
.gjpcc__audiences li span { color: var(--gjpcc-accent); font-size: 1.15em; }

/* Zielgruppen erscheinen beim ersten Sichtkontakt bewusst nacheinander. Die
   JS-Klasse verhindert, dass Inhalte bei deaktiviertem JavaScript verborgen bleiben. */
.gjpcc.gjpcc-is-js.gjpcc--animate.gjpcc--audience-sequence .gjpcc__audiences [data-gjpcc-audience-item] {
  opacity: 0;
  transition: opacity var(--gjpcc-audience-duration) cubic-bezier(.2,.7,.2,1), transform var(--gjpcc-audience-duration) cubic-bezier(.2,.7,.2,1), filter var(--gjpcc-audience-duration) cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--gjpcc-audience-index, 0) * var(--gjpcc-audience-stagger));
  will-change: opacity, transform;
}
.gjpcc--audience-fade-up .gjpcc__audiences [data-gjpcc-audience-item] { transform: translateY(18px); }
.gjpcc--audience-slide-left .gjpcc__audiences [data-gjpcc-audience-item] { transform: translateX(-24px); }
.gjpcc--audience-slide-right .gjpcc__audiences [data-gjpcc-audience-item] { transform: translateX(24px); }
.gjpcc--audience-soft-scale .gjpcc__audiences [data-gjpcc-audience-item] { transform: scale(.965); filter: blur(2px); }
.gjpcc.gjpcc-is-js.gjpcc--animate.gjpcc--audience-sequence .gjpcc__audiences.is-audience-visible [data-gjpcc-audience-item] {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Premium-Vorteilsbereich: klarer Titelblock und vier eigenständige Karten
   statt einer breiten Reihe mit harten Trennlinien. */
.gjpcc__trust {
  padding-block: var(--gjpcc-trust-padding-y);
  border-block: 1px solid color-mix(in srgb, var(--gjpcc-trust-card-border) 74%, transparent);
  background: var(--gjpcc-trust-bg);
  background-image:
    radial-gradient(circle at 12% 15%, color-mix(in srgb, var(--gjpcc-accent) 8%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--gjpcc-trust-bg) 90%, white), var(--gjpcc-trust-bg));
}
.gjpcc__trust-layout { display: grid; grid-template-columns: minmax(220px, .78fr) minmax(0, 3fr); align-items: center; gap: clamp(2rem, 4.6vw, 5rem); }
.gjpcc__trust-title {
  max-width: 12ch;
  margin: 0;
  color: var(--gjpcc-navy);
  font-family: var(--gjpcc-heading-font);
  font-size: clamp(1.65rem, 2.05vw, var(--gjpcc-trust-title-size));
  font-weight: var(--gjpcc-heading-weight);
  line-height: 1.08;
  letter-spacing: -.025em;
}
.gjpcc__trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.65rem, 1vw, 1rem); }
.gjpcc__trust-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 108px;
  align-items: center;
  gap: .9rem;
  overflow: hidden;
  padding: 1rem clamp(.85rem, 1.1vw, 1.15rem);
  border: 1px solid var(--gjpcc-trust-card-border);
  border-radius: var(--gjpcc-trust-card-radius);
  background: var(--gjpcc-trust-card-bg);
  box-shadow: 0 14px 34px rgba(23,48,82,var(--gjpcc-trust-shadow-opacity));
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background-color .28s ease;
}
.gjpcc__trust-item::before {
  position: absolute;
  top: 0;
  right: 16%;
  left: 16%;
  height: 2px;
  border-radius: 0 0 999px 999px;
  content: "";
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gjpcc-accent) 78%, white), transparent);
  opacity: .72;
}
.gjpcc__trust-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--gjpcc-trust-icon-color) 12%, transparent);
  border-radius: calc(var(--gjpcc-trust-card-radius) * .72);
  color: var(--gjpcc-trust-icon-color);
  background: var(--gjpcc-trust-icon-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}
.gjpcc__trust-icon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.gjpcc__trust-item strong,
.gjpcc__trust-item span { display: block; }
.gjpcc__trust-item strong { color: var(--gjpcc-navy); font-size: .88em; line-height: 1.25; }
.gjpcc__trust-item span { margin-top: .24rem; color: var(--gjpcc-muted); font-size: .74em; line-height: 1.35; }
.gjpcc--card-lift .gjpcc__trust-item:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--gjpcc-accent) 28%, var(--gjpcc-trust-card-border)); box-shadow: 0 18px 40px rgba(23,48,82,calc(var(--gjpcc-trust-shadow-opacity) + .045)); }
.gjpcc--card-soft .gjpcc__trust-item:hover { border-color: color-mix(in srgb, var(--gjpcc-accent) 24%, var(--gjpcc-trust-card-border)); background: color-mix(in srgb, var(--gjpcc-trust-card-bg) 91%, var(--gjpcc-accent)); }

.gjpcc__services { scroll-margin-top: 2rem; }
.gjpcc__services-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 8rem); align-items: end; }
.gjpcc__services-visual h2 { max-width: none; margin-bottom: 2rem; }
.gjpcc__services-title--single { max-width: 100% !important; white-space: nowrap; }
.gjpcc__services-visual { min-width: 0; }
.gjpcc__services-image-frame { width: min(100%, var(--gjpcc-services-image-width)) !important; max-width: var(--gjpcc-services-image-width) !important; aspect-ratio: 1.45 / 1; overflow: hidden; border-radius: var(--gjpcc-image-radius); background: var(--gjpcc-soft); }
.gjpcc__services-image-frame > .gjpcc__services-image,
.gjpcc__services-image-frame > .gjpcc__image-placeholder { width: 100% !important; height: 100% !important; max-width: none !important; min-height: 0 !important; border-radius: inherit; object-fit: cover !important; object-position: center; }
.gjpcc__services-list { padding-bottom: .25rem; }
.gjpcc__service-row { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; min-height: 72px; border-bottom: 1px solid var(--gjpcc-line); color: var(--gjpcc-text); transition: color .25s ease, padding .25s ease, background .25s ease; }
.gjpcc__service-number { color: var(--gjpcc-navy); font-family: var(--gjpcc-heading-font); font-size: 2em; line-height: 1; }
.gjpcc__service-title { font-size: 1em; }
.gjpcc__service-arrow { color: var(--gjpcc-accent); font-size: 1.55em; transition: transform .25s ease; }
.gjpcc--service-slide .gjpcc__service-row:hover { padding-inline: .7rem; color: var(--gjpcc-navy); }
.gjpcc--service-slide .gjpcc__service-row:hover .gjpcc__service-arrow { transform: translateX(7px); }
.gjpcc--service-soft .gjpcc__service-row:hover { padding-inline: .8rem; background: var(--gjpcc-soft); }
.gjpcc--service-line .gjpcc__service-row { position: relative; }
.gjpcc--service-line .gjpcc__service-row::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; content: ""; background: var(--gjpcc-accent); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.gjpcc--service-line .gjpcc__service-row:hover::after { transform: scaleX(1); }
.gjpcc__text-link { display: inline-flex; align-items: center; gap: .8rem; margin-top: 1.6rem; color: var(--gjpcc-accent); font-size: .9em; font-weight: 700; }
.gjpcc__text-link span { transition: transform .25s ease; }
.gjpcc__text-link:hover span { transform: translateX(5px); }

.gjpcc__process { padding-block: var(--gjpcc-process-space); border-top: 1px solid var(--gjpcc-line); }
.gjpcc__process-heading { text-align: center; }
.gjpcc__process-heading h2 { max-width: 28ch; margin-inline: auto; }
.gjpcc__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2.1rem; }
.gjpcc__step { position: relative; min-height: var(--gjpcc-process-step-height); padding: 0 clamp(1rem, 3.2vw, 4rem); border-left: 1px solid var(--gjpcc-line); }
.gjpcc__step:first-child { padding-left: 0; border-left: 0; }
.gjpcc__step:last-child { padding-right: 0; }
.gjpcc__step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; color: var(--gjpcc-navy); font-family: var(--gjpcc-heading-font); font-size: 2.15em; line-height: 1; }
.gjpcc__step-top i { font-family: var(--gjpcc-body-font); font-size: 1.15em; font-style: normal; font-weight: 400; }
.gjpcc__step h3 { margin-bottom: .6rem; color: var(--gjpcc-text); font-size: .92em; }
.gjpcc__step p { max-width: 34ch; margin: 0; color: var(--gjpcc-muted); font-size: .82em; }

.gjpcc__testimonial { position: relative; height: var(--gjpcc-testimonial-height); background: var(--gjpcc-navy); }
.gjpcc__testimonial-stage,
.gjpcc__testimonial-slides,
.gjpcc__testimonial-slide,
.gjpcc__testimonial-grid { height: var(--gjpcc-testimonial-height); min-height: 0; }
.gjpcc__testimonial-stage { position: relative; overflow: hidden; }
.gjpcc__testimonial-slides { display: grid; }
.gjpcc__testimonial-slide {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: opacity var(--gjpcc-testimonial-transition) ease, transform var(--gjpcc-testimonial-transition) cubic-bezier(.22,.61,.36,1), visibility 0s linear var(--gjpcc-testimonial-transition);
}
.gjpcc__testimonial-slide.is-active { z-index: 2; opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(0, 0, 0) scale(1); transition-delay: 0s; }
.gjpcc__testimonial--fade-slide .gjpcc__testimonial-slide { transform: translate3d(2.5%, 0, 0); }
.gjpcc__testimonial--fade-slide[data-direction="prev"] .gjpcc__testimonial-slide { transform: translate3d(-2.5%, 0, 0); }
.gjpcc__testimonial--fade-slide .gjpcc__testimonial-slide.is-active { transform: translate3d(0, 0, 0); }
.gjpcc__testimonial--zoom .gjpcc__testimonial-slide { transform: scale(1.025); }
.gjpcc__testimonial--zoom .gjpcc__testimonial-slide.is-active { transform: scale(1); }
.gjpcc__testimonial-grid { display: grid; grid-template-columns: minmax(300px, 43%) minmax(0, 57%); overflow: hidden; }
.gjpcc__testimonial-copy {
  display: flex;
  min-width: 0;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
  padding: var(--gjpcc-testimonial-padding-y) max(var(--gjpcc-safe-gutter), calc((var(--gjpcc-viewport-width, 100vw) - var(--gjpcc-content)) / 2));
  padding-right: clamp(1.1rem, 3.4vw, 4rem);
  scrollbar-width: thin;
}
.gjpcc__testimonial-copy h2 { max-width: 18ch; color: #fff; font-size: clamp(1.45rem, 1.8vw, 2.05rem); line-height: 1.08; }
.gjpcc__quote-line { width: 34px; height: 1px; margin: .65rem 0 .55rem; background: rgba(255,255,255,.72); }
.gjpcc__testimonial blockquote { max-width: 40rem; color: #fff; font-family: var(--gjpcc-body-font); font-size: clamp(.72rem, .72vw, .9rem); font-style: normal; font-weight: 400; letter-spacing: 0; line-height: 1.42; }
.gjpcc__testimonial-copy > p { margin: .45rem 0 0; color: rgba(255,255,255,.63); font-size: clamp(.62rem, .62vw, .72rem); }
.gjpcc__testimonial-media { position: relative; min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
.gjpcc__testimonial-media > .gjpcc__testimonial-image,
.gjpcc__testimonial-media > .gjpcc__image-placeholder {
  position: absolute !important;
  inset: 0 !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform var(--gjpcc-testimonial-transition) cubic-bezier(.22,.61,.36,1);
}
.gjpcc__testimonial-slide:not(.is-active) .gjpcc__testimonial-image { transform: scale(1.025); }
.gjpcc__testimonial-slide.is-active .gjpcc__testimonial-image { transform: scale(1); }

/* Navigation nur als zwei schwebende Randpfeile. Keine Punkte und keine
   dauerhaft sichtbare Steuerleiste. Die Pfeile erscheinen bei Hover oder
   Tastaturfokus und liegen mittig an den Außenkanten des Sliders. */
.gjpcc__testimonial-edge-nav { position: absolute; z-index: 7; inset: 0; pointer-events: none; }
.gjpcc__testimonial-arrow {
  appearance: none;
  position: absolute;
  top: 50%;
  display: grid;
  width: clamp(38px, 2.5vw, 48px);
  height: clamp(38px, 2.5vw, 48px);
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
  background: rgba(12,28,49,.62);
  color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0,-50%,0) scale(.88);
  transition: opacity .24s ease, transform .24s ease, background .24s ease, border-color .24s ease;
}
.gjpcc__testimonial-arrow span { display: block; margin-top: -2px; font-family: Arial, sans-serif; font-size: clamp(1.55rem, 2vw, 2rem); font-weight: 300; line-height: 1; }
.gjpcc__testimonial-arrow--prev { left: max(14px, calc(var(--gjpcc-tab-rail-width) + 4px)); }
.gjpcc__testimonial-arrow--next { right: clamp(14px, 1.5vw, 28px); }
.gjpcc__testimonial:hover .gjpcc__testimonial-arrow,
.gjpcc__testimonial:focus-within .gjpcc__testimonial-arrow,
.gjpcc__testimonial-arrow:focus-visible { opacity: 1; pointer-events: auto; transform: translate3d(0,-50%,0) scale(1); }
.gjpcc__testimonial-arrow:hover,
.gjpcc__testimonial-arrow:focus-visible { border-color: rgba(255,255,255,.9); background: var(--gjpcc-accent); outline: none; }


.gjpcc__contact { scroll-margin-top: 2rem; }
.gjpcc__contact-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(3rem, 8vw, 9rem); align-items: start; }
.gjpcc__contact-copy h2 { max-width: 12ch; }
.gjpcc__contact-copy > p { max-width: 34rem; margin-top: 1.25rem; color: var(--gjpcc-muted); }
.gjpcc__phone { display: inline-flex; align-items: center; gap: .7rem; margin-top: 1rem; color: var(--gjpcc-navy); font-size: 1.28em; font-weight: 700; }
.gjpcc__phone span { font-size: 1.25em; font-weight: 400; }
.gjpcc__form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
.gjpcc__form label { display: block; }
.gjpcc__form label > span { display: block; margin-bottom: .35rem; color: var(--gjpcc-text); font-size: .78em; }
.gjpcc__form input,
.gjpcc__form textarea {
  width: 100%;
  border: 1px solid var(--gjpcc-line);
  border-radius: var(--gjpcc-radius);
  background: #fff;
  color: var(--gjpcc-text);
  font: inherit;
  transition: border-color .22s ease, box-shadow .22s ease;
}
.gjpcc__form input { min-height: 46px; padding: .65rem .8rem; }
.gjpcc__form textarea { min-height: 126px; padding: .8rem; resize: vertical; }
.gjpcc__form input:hover,
.gjpcc__form textarea:hover { border-color: color-mix(in srgb, var(--gjpcc-navy) 45%, var(--gjpcc-line)); }
.gjpcc__form-full { grid-column: 1 / -1; }
.gjpcc__consent { display: flex !important; align-items: flex-start; gap: .65rem; margin-top: 1rem; }
.gjpcc__consent input { width: 18px; min-height: 18px; flex: 0 0 18px; margin-top: .1rem; }
.gjpcc__consent span { margin: 0 !important; color: var(--gjpcc-muted) !important; line-height: 1.45; }
.gjpcc__form-footer { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.gjpcc__form-status { margin: 0; font-size: .82em; }
.gjpcc__form-status.is-success { color: #1f7a4d; }
.gjpcc__form-status.is-error { color: #b72f2f; }
.gjpcc__honeypot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(1px,1px,1px,1px) !important; }

.gjpcc__image-placeholder { display: grid; min-height: 260px; place-items: center; background: linear-gradient(135deg, var(--gjpcc-soft), #fff); color: var(--gjpcc-muted); border: 1px dashed var(--gjpcc-line); }
.gjpcc__hero-media.gjpcc__image-placeholder { min-height: var(--gjpcc-hero-height); }

.gjpcc--animate [data-gjpcc-animate] { opacity: 0; transition-duration: var(--gjpcc-animation-duration); transition-delay: var(--gjpcc-delay, 0s); transition-property: opacity, transform, filter; transition-timing-function: cubic-bezier(.2,.7,.2,1); }
.gjpcc--animation-fade-up [data-gjpcc-animate] { transform: translateY(24px); }
.gjpcc--animation-fade-in [data-gjpcc-animate] { transform: none; }
.gjpcc--animation-slide-left [data-gjpcc-animate] { transform: translateX(-32px); }
.gjpcc--animation-slide-right [data-gjpcc-animate] { transform: translateX(32px); }
.gjpcc--animation-zoom [data-gjpcc-animate] { transform: scale(.97); filter: blur(3px); }
.gjpcc--animate [data-gjpcc-animate].is-visible { opacity: 1; transform: none; filter: none; }

/* 1.0.23: Die Hero-Buttons fahren beim ersten Laden getrennt ein.
   Der linke Button kommt von links, der rechte von rechts – unabhängig von
   der allgemein gewählten Eingangsanimation des restlichen Blocks. */
.gjpcc__actions .gjpcc__button[data-gjpcc-button-enter] {
  will-change: opacity, transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
.gjpcc--animate .gjpcc__actions .gjpcc__button[data-gjpcc-button-enter="left"] {
  transform: translate3d(-56px, 0, 0);
}
.gjpcc--animate .gjpcc__actions .gjpcc__button[data-gjpcc-button-enter="right"] {
  transform: translate3d(56px, 0, 0);
}
.gjpcc--animate .gjpcc__actions .gjpcc__button[data-gjpcc-button-enter].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: none;
}


/* Browser-Zoom- und Überlauf-Absicherung. Alle Rasterkinder dürfen schrumpfen;
   feste Medienbreiten bleiben nur ihr Maximalwert und nie breiter als die
   tatsächlich verfügbare Spalte. */
.gjpcc :where(.gjpcc__hero-layout, .gjpcc__intro-grid, .gjpcc__trust-layout,
  .gjpcc__trust-grid, .gjpcc__services-grid, .gjpcc__steps,
  .gjpcc__testimonial-grid, .gjpcc__contact-grid, .gjpcc__form-grid) > * {
  min-width: 0;
  max-width: 100%;
}
.gjpcc :where(h1, h2, h3, p, li, blockquote, a, span, strong, label) {
  overflow-wrap: break-word;
}
.gjpcc :where(.gjpcc__hero-media, .gjpcc__services-image-frame,
  .gjpcc__testimonial-media, .gjpcc__image-placeholder) {
  max-inline-size: 100% !important;
}
.gjpcc__actions > *,
.gjpcc__facts > *,
.gjpcc__form-footer > * { max-width: 100%; }
.gjpcc__button { max-width: 100%; }
.gjpcc__service-row { min-width: 0; }
.gjpcc__service-title { min-width: 0; overflow-wrap: anywhere; }

/* Bei einer durch Browser-Zoom verkleinerten CSS-Viewportbreite werden große
   Desktopabstände stufenweise reduziert, bevor sie einen Überlauf erzeugen. */
@media (max-width: 1380px) and (min-width: 1101px) {
  .gjpcc__hero-layout { grid-template-columns: minmax(0, 44%) minmax(0, 56%); }
  .gjpcc__hero-copy-inner { padding-right: 1.15rem; }
  .gjpcc__intro-grid { gap: clamp(2.25rem, 5vw, 5rem); }
  .gjpcc__services-grid { gap: clamp(2.25rem, 5vw, 5rem); }
  .gjpcc__contact-grid { gap: clamp(2.25rem, 5vw, 5rem); }
  .gjpcc__step { padding-inline: clamp(1rem, 2.2vw, 2.4rem); }
  .gjpcc__services-title--single { white-space: normal; text-wrap: balance; }
}

@media (max-width: 1180px) and (min-width: 901px) {
  .gjpcc__trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gjpcc__testimonial-grid { grid-template-columns: minmax(280px, 42%) minmax(0, 58%); }
}

@media (min-width: 1800px) {
  .gjpcc__hero-copy-inner { padding-block: 5.5rem; }
  .gjpcc__hero-layout { min-height: max(var(--gjpcc-hero-height), 700px); }
  .gjpcc__hero-media { min-height: max(var(--gjpcc-hero-height), 700px); }
}

@media (max-width: 1500px) and (min-width: 1101px) {
  .gjpcc__hero-copy-inner { padding-right: 1.5rem; }
  .gjpcc__facts { gap: .7rem 1.1rem; }
  .gjpcc__trust-layout { grid-template-columns: minmax(190px, .72fr) minmax(0, 3fr); gap: 2rem; }
  .gjpcc__trust-item { min-height: 102px; gap: .72rem; padding-inline: .8rem; }
  .gjpcc__trust-icon { width: 42px; height: 42px; flex-basis: 42px; }
  .gjpcc__trust-icon svg { width: 25px; height: 25px; }
}

@media (max-width: 1100px) {
  .gjpcc__hero-layout { grid-template-columns: 48% 52%; }
  .gjpcc__hero-media { width: 100%; }
  .gjpcc__hero-copy::after { width: 12%; right: -12%; }
  .gjpcc__hero-copy-inner { margin-left: var(--gjpcc-gutter); padding-right: 1rem; }
  .gjpcc__intro-grid { gap: 4rem; }
  .gjpcc__trust-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .gjpcc__trust-title { max-width: none; }
  .gjpcc__trust-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .gjpcc__services-grid { gap: 4rem; }
  .gjpcc__services-title--single { white-space: normal; }
}

@media (max-width: 900px) {
  .gjpcc__hero-divider { padding-block: min(var(--gjpcc-hero-divider-spacing), 14px); }
  .gjpcc {
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-basis: auto;
    --gjpcc-tab-current-width: clamp(34px, calc(var(--gjpcc-tab-width) * .78), 46px);
    --gjpcc-tab-rail-gap: 14px;
    --gjpcc-tab-rail-offset: 4px;
  }
  .gjpcc__section { padding-block: var(--gjpcc-space-mobile); }
  /* 1.0.25: Auf Tablet und Mobil steht das Hero-Bild garantiert als erstes
     Element direkt unter dem Seitenheader. Flexbox und !important verhindern,
     dass Theme-/Spaltenregeln die Reihenfolge wieder umdrehen. */
  .gjpcc__hero-layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    min-height: 0 !important;
  }
  .gjpcc__hero-media {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: clamp(330px, 64vw, 500px) !important;
    min-height: 0 !important;
  }
  .gjpcc__hero-copy {
    order: 2 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
  }
  .gjpcc__hero-copy::after { display: none; }
  .gjpcc__hero-copy-inner { width: min(var(--gjpcc-content), calc(100% - (var(--gjpcc-safe-gutter) * 2))); max-width: calc(100% - (var(--gjpcc-safe-gutter) * 2)); margin-inline: auto; padding: 3.5rem 0; }
  .gjpcc__hero-title { font-size: clamp(1.75rem, 10.5cqw, var(--gjpcc-h1-tablet)); }
  .gjpcc__intro-grid,
  .gjpcc__services-grid,
  .gjpcc__contact-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .gjpcc__intro h2,
  .gjpcc__services-visual h2,
  .gjpcc__contact-copy h2 { max-width: 18ch; }
  .gjpcc__services-title--single { white-space: normal; }
  .gjpcc__process { padding-block: var(--gjpcc-space-mobile); }
  /* 1.0.24: Mobil beginnt jede Kundenstimme mit dem Bild. Bild und Text
     füllen gemeinsam eine kompakte, feste Bühne – ohne nachlaufende blaue
     Leerfläche unterhalb des Bildes. */
  .gjpcc__testimonial,
  .gjpcc__testimonial-stage,
  .gjpcc__testimonial-slides,
  .gjpcc__testimonial-slide,
  .gjpcc__testimonial-grid { height: 480px; min-height: 480px; max-height: 480px; }
  .gjpcc__testimonial-grid { grid-template-columns: 1fr; grid-template-rows: minmax(0, 54%) minmax(0, 46%); }
  .gjpcc__testimonial-media { grid-column: 1; grid-row: 1; order: 1; height: 100%; min-height: 0; }
  .gjpcc__testimonial-copy {
    grid-column: 1;
    grid-row: 2;
    order: 2;
    justify-content: center;
    overflow: hidden;
    padding: 20px var(--gjpcc-safe-gutter) 18px;
    padding-left: max(var(--gjpcc-safe-gutter), var(--gjpcc-tab-rail-width));
    background: var(--gjpcc-navy);
  }
  .gjpcc__testimonial-copy h2 { max-width: 24ch; font-size: clamp(1.35rem, 4.8vw, 1.8rem); }
  .gjpcc__testimonial blockquote { max-width: 48rem; font-size: clamp(.72rem, 2vw, .86rem); line-height: 1.4; }
  .gjpcc__testimonial-copy > p { margin-top: .38rem; }
  .gjpcc__testimonial .gjpcc__section-tab { top: calc(54% + 10px); bottom: 10px; }
  .gjpcc__steps { gap: 0; }
  .gjpcc__step { padding-inline: 1.5rem; }
  /* Tablet: Die Glasleiste bleibt blockhoch und wird schmaler. */
  .gjpcc__section-tab { top: max(12px, calc(var(--gjpcc-tab-inset) * .75)); bottom: max(12px, calc(var(--gjpcc-tab-inset) * .75)); left: min(var(--gjpcc-tab-offset), 4px); width: var(--gjpcc-tab-current-width); min-width: var(--gjpcc-tab-current-width); }
  .gjpcc__section-tab-label { min-height: 0; padding: max(12px, calc(var(--gjpcc-tab-padding-x) * .75)) 7px; font-size: min(var(--gjpcc-tab-size), 10px); }
}

@media (max-width: 680px) {
  .gjpcc__hero-divider { padding-block: min(var(--gjpcc-hero-divider-spacing), 10px); }
  .gjpcc__hero-divider-line { width: min(100%, calc(100% - (var(--gjpcc-safe-gutter) * 2))); }
  .gjpcc { --gjpcc-tab-current-width: 30px; --gjpcc-tab-rail-gap: 10px; --gjpcc-tab-rail-offset: 2px; }
  .gjpcc__container { width: min(var(--gjpcc-content), calc(100% - (var(--gjpcc-safe-gutter) * 2))); max-width: calc(100% - (var(--gjpcc-safe-gutter) * 2)); }
  .gjpcc__section-tab { top: 10px; bottom: 10px; left: min(var(--gjpcc-tab-offset), 2px); width: var(--gjpcc-tab-current-width); min-width: var(--gjpcc-tab-current-width); }
  .gjpcc__section-tab-label { min-height: 0; padding: 10px 6px; font-size: min(var(--gjpcc-tab-size), 9px); letter-spacing: min(var(--gjpcc-tab-letter-spacing), .1em); }
  .gjpcc h2 { font-size: var(--gjpcc-h2-mobile); }
  .gjpcc__hero-title { max-width: 100%; font-size: clamp(1.75rem, 10.5cqw, var(--gjpcc-h1-mobile)); }
  .gjpcc__hero-copy-inner { padding-block: 3rem; }
  .gjpcc__hero-media { height: clamp(260px, 72vw, 360px) !important; min-height: 0 !important; }
  .gjpcc__actions { display: grid; grid-template-columns: 1fr; }
  .gjpcc__button { width: 100%; }
  .gjpcc__facts { display: grid; grid-template-columns: 1fr; }
  .gjpcc__audiences ul { grid-template-columns: 1fr; }
  .gjpcc__trust { padding-block: max(24px, calc(var(--gjpcc-trust-padding-y) * .78)); }
  .gjpcc__trust-grid { grid-template-columns: 1fr; gap: .8rem; }
  .gjpcc__trust-item { min-height: 88px; padding: .85rem; }
  .gjpcc__services-image { aspect-ratio: 1.25 / 1; }
  .gjpcc__service-row { grid-template-columns: 52px 1fr auto; min-height: 66px; }
  .gjpcc__service-number { font-size: 1.55em; }
  .gjpcc__service-title { padding-right: .6rem; font-size: .92em; }
  .gjpcc__steps { grid-template-columns: 1fr; margin-top: 2.4rem; }
  .gjpcc__step,
  .gjpcc__step:first-child,
  .gjpcc__step:last-child { min-height: auto; padding: 1.6rem 0; border-top: 1px solid var(--gjpcc-line); border-left: 0; }
  .gjpcc__step-top i { transform: rotate(90deg); }
  .gjpcc__testimonial,
  .gjpcc__testimonial-stage,
  .gjpcc__testimonial-slides,
  .gjpcc__testimonial-slide,
  .gjpcc__testimonial-grid { height: 440px; min-height: 440px; max-height: 440px; }
  .gjpcc__testimonial-grid { grid-template-rows: minmax(0, 52%) minmax(0, 48%); }
  .gjpcc__testimonial-copy { padding: 18px 18px 16px; padding-left: max(46px, var(--gjpcc-safe-gutter)); }
  .gjpcc__testimonial-copy h2 { font-size: clamp(1.28rem, 6.6vw, 1.62rem); }
  .gjpcc__testimonial blockquote { font-size: clamp(.7rem, 3vw, .8rem); }
  .gjpcc__testimonial .gjpcc__section-tab { top: calc(52% + 10px); bottom: 10px; }
  .gjpcc__testimonial-arrow { width: 38px; height: 38px; }
  .gjpcc__testimonial-arrow--prev { left: max(8px, calc(var(--gjpcc-tab-rail-width) + 2px)); }
  .gjpcc__testimonial-arrow--next { right: 8px; }
  .gjpcc__form-grid { grid-template-columns: 1fr; }
  .gjpcc__form-full { grid-column: auto; }
  .gjpcc__form-footer { align-items: stretch; flex-direction: column; }
}

/* Zoom-sichere Leisten-Spur: Die Leiste bleibt links, aber jeder direkt
   folgende Inhaltscontainer erhält bei knapper Viewportbreite automatisch eine
   freie Spur. Auf großen Monitoren ist der Wert 0, weil der natürliche
   Außenrand bereits ausreicht. So überlagert die Leiste weder Text noch Bilder. */
.gjpcc__section-tab-wrap + .gjpcc__container {
  padding-inline-start: var(--gjpcc-tab-content-inset);
}

/* Der Kundenstimmenbereich besitzt keinen Standard-Container. Dort wird die
   bestehende linke Einrückung direkt um die Leisten-Spur erweitert. */
.gjpcc__testimonial > .gjpcc__section-tab-wrap + .gjpcc__testimonial-stage .gjpcc__testimonial-copy {
  padding-left: max(var(--gjpcc-content-origin), var(--gjpcc-tab-rail-width));
}

@media (max-width: 900px) {
  .gjpcc__testimonial > .gjpcc__section-tab-wrap + .gjpcc__testimonial-stage .gjpcc__testimonial-copy {
    padding-left: max(var(--gjpcc-safe-gutter), var(--gjpcc-tab-rail-width));
  }
}

@media (max-width: 680px) {
  .gjpcc__testimonial > .gjpcc__section-tab-wrap + .gjpcc__testimonial-stage .gjpcc__testimonial-copy {
    padding-left: max(46px, var(--gjpcc-safe-gutter));
  }
}

/* Sehr schmale Viewports: feste Obergrenze für die reservierte Spur, damit der
   Hauptinhalt weiterhin ausreichend Platz behält und sauber umbricht. */
@media (max-width: 480px) {
  .gjpcc__section-tab-wrap + .gjpcc__container {
    padding-inline-start: min(var(--gjpcc-tab-content-inset), 42px);
  }
  .gjpcc__testimonial > .gjpcc__section-tab-wrap + .gjpcc__testimonial-stage .gjpcc__testimonial-copy {
    padding-left: max(var(--gjpcc-safe-gutter), 46px);
  }
  .gjpcc__testimonial .gjpcc__section-tab { top: calc(52% + 8px); bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .gjpcc *, .gjpcc *::before, .gjpcc *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
  .gjpcc--animate [data-gjpcc-animate],
  .gjpcc--animate .gjpcc__audiences [data-gjpcc-audience-item] { opacity: 1 !important; transform: none !important; filter: none !important; transition-delay: 0ms !important; }
  .gjpcc__testimonial-slide { transition: none !important; }
  .gjpcc__testimonial-image { transition: none !important; }
}