/* ============================================================
   mediaplan Digitale Medien GmbH – Child-Theme
   Corporate Design HKS 43 Blau. Übernommen von der statischen
   Seite; die Abschnitte stehen jetzt als Blöcke in der Seite.
   ============================================================ */

/* ------------------------------------------------------------------
   1. Farben und Maße

   Das Basis-Theme arbeitet durchgängig mit diesen Variablen. Werden
   sie hier überschrieben, übernimmt der ganze Auftritt – Kopf, Fuß,
   Beiträge, Formulare – das Corporate Design, ohne dass eine einzige
   Regel des Parents kopiert werden muss.

   Warum zusätzlich „.editor-styles-wrapper“: Im Seiteneditor schreibt das
   Basis-Theme seine Farben ganz zum Schluss noch einmal nach „:root“. Ein
   schlichtes „:root“ hier verlöre dieses Rennen, und der Editor zeigte Blau,
   wo die Seite Orange zeigt. Vorne ändert die Ergänzung nichts – die Klasse
   gibt es dort nicht.
   ------------------------------------------------------------------ */
:root,
.editor-styles-wrapper {
  --brand: #004f9f;
  --brand-dark: #0a1a2f;
  --brand-light: #0066bf;
  --surface-deep: #0a1524;
  --accent: #ff9900;
  --accent-dark: #e07d00;
  --ok: #129d63;
  --muted: #5b6675;
  --bg-soft: #f2f5f7;
  --bg-soft-2: #eef3f8;
  --shadow-sm: 0 2px 10px rgba(0, 41, 83, .06);
  --shadow-lg: 0 26px 60px rgba(0, 41, 83, .18);

  /* Variablen des Basis-Themes */
  --sky: #004f9f;
  --sky-deep: #003a76;
  --sky-deeper: #002d5c;
  --sky-bright: #0066bf;
  --sky-soft: #9dc0e6;
  --sky-mist: #eef3f8;
  --sky-wash: #dbe7f4;
  --blush: #f2f5f7;
  --ink: #13293e;
  --ink-soft: #5b6675;
  --paper: #ffffff;
  --surface: #ffffff;
  --line: #e2e8f0;
  --font-body: Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif;
  --font-heading: Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif;
  --shell: 1180px;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --header-h: 74px;
  --shadow: 0 12px 34px rgba(0, 41, 83, .12);
  --shadow-soft: 0 2px 10px rgba(0, 41, 83, .06);
}

html { scroll-behavior: smooth; }
body { line-height: 1.65; }

/* Der Kopf bleibt beim Scrollen stehen; Sprungmarken landen sonst darunter. */
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.18; font-weight: 800; letter-spacing: -.02em; }

/* ------------------------------------------------------------------
   2. Kopf und Fußbereich
   Markup kommt aus dem Basis-Theme, die Gestaltung von hier.
   ------------------------------------------------------------------ */
.site-header {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); border-color: var(--line); }
/* Im Markup des Basis-Themes steht der Handlungsaufruf vor der Navigation.
   Hier gehört er ans rechte Ende – Logo, Menü, „Anfrage starten“ –, deshalb
   die Reihenfolge über „order“ statt über eine eigene header.php. */
.site-header__inner { min-height: var(--header-h); flex-wrap: nowrap; gap: 1.5rem; }
/* Solange kein Logo hochgeladen ist, steht hier der Firmenname – und der ist
   lang. Ohne diese Bremse schöbe er sich über das Menü. */
.site-brand { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.site-brand__text { min-width: 0; max-width: 100%; }
.site-brand__name,
.site-brand__tag { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-nav { order: 2; margin-left: auto; }
.site-header__actions { order: 3; display: flex; align-items: center; gap: 12px; flex: none; }
.nav-toggle { order: 4; }
.site-brand img,
.custom-logo { height: 30px; width: auto; }
.nav-list a { font-weight: 600; font-size: .98rem; border-radius: 0; padding: .35rem 0; }
.nav-list { gap: .35rem 1.6rem; flex-wrap: nowrap; white-space: nowrap; }
.nav-list a:hover,
.nav-list a[aria-current="page"] { background: none; color: var(--brand); }

/* Wird es eng, rückt das Menü zusammen, bevor etwas umbricht. */
@media (max-width: 1240px) {
  .nav-list { gap: .35rem 1.1rem; }
  .nav-list a { font-size: .92rem; }
}
@media (max-width: 800px) {
  .site-nav { margin-left: 0; }
  .nav-list { flex-wrap: wrap; white-space: normal; }
}

.site-footer { background: #06182e; }
.site-footer a:hover { color: #fff; }

/* ------------------------------------------------------------------
   3. Bausteine, die in mehreren Abschnitten vorkommen
   ------------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 22px;
}

/* Auf der Startseite laufen die Abschnitte randlos. Das Basis-Theme regelt
   „alignfull“ nur innerhalb von Beitragstexten – hier gilt es für die
   gesamte Leinwand. */
.site-main--leinwand > .alignfull,
.site-main--leinwand > * {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  transform: none;
}

.section { padding: 92px 0; }
.section--soft { background: var(--bg-soft); }
.section--dark { background: linear-gradient(135deg, var(--surface-deep), #123a63); color: #fff; }
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: #fff; }
.section--dark p { color: #c6dbf5; }

.section-head { max-width: 720px; margin: 0 auto 54px; text-align: center; }
.section-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin-bottom: 14px; }
.section-head p { color: var(--muted); font-size: 1.08rem; }
.section--dark .section-head p { color: #c6dbf5; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  background: rgba(0, 79, 159, .08);
  padding: 7px 14px;
  border-radius: 999px;
  margin: 0 0 18px;
}
.section--dark .eyebrow,
.eyebrow.on-dark { color: #cfe2ff; background: rgba(255, 255, 255, .1); }

/* Hervorgehobene Wörter in Überschriften.
   Ausgezeichnet wird mit <mark>, weil das die Betonung auch ohne Stylesheet
   trägt. Der Browser malt darunter aber seinen gelben Textmarker – im Abschnitt
   „Ein Flow“ stand deshalb ein gelber Kasten auf dem dunklen Bild. Gestaltet war
   die Auszeichnung nur im Startbereich; diese Regel gilt überall und wird dort
   vom Farbverlauf überschrieben. */
mark,
.hl {
  background: none;
  color: var(--accent);
}

/* Schaltflächen: Der Kern liefert die Blöcke, die Optik kommt von hier.
   „Akzent“ ist der Handlungsaufruf, „Hell“ gehört auf dunkle Flächen. */
.btn,
.wp-block-button__link,
.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 700 1rem/1 var(--font-body);
  padding: 15px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 79, 159, .28);
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn svg,
.wp-block-button__link svg { width: 18px; height: 18px; flex: none; }
.btn:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {
  background: var(--brand-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0, 79, 159, .34);
}
/* Die Farbe der Schaltflächen braucht dieselbe Tiefe wie im Basis-Theme.
   Dort steht der Verlauf unter „.wp-block-button:not(…) > .wp-block-button__link:not(…)“;
   eine kürzere Regel hier verliert dagegen, und der Handlungsaufruf bliebe
   blau statt orange. Deshalb greifen die folgenden Regeln genauso tief und
   löschen den Verlauf ausdrücklich mit „background-image: none“. */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background) {
  background-image: none;
  background-color: var(--brand);
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background):hover {
  background-image: none;
  background-color: var(--brand-dark);
}

.btn-accent,
.wp-block-button.is-style-akzent > .wp-block-button__link:not(.has-background) {
  background-image: none;
  background-color: var(--accent);
  color: #1a1200;
  box-shadow: 0 10px 24px rgba(255, 153, 0, .34);
}
.btn-accent:hover,
.wp-block-button.is-style-akzent > .wp-block-button__link:not(.has-background):hover {
  background-image: none;
  background-color: var(--accent-dark);
  color: #fff;
  box-shadow: 0 16px 34px rgba(255, 153, 0, .42);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
  background-image: none;
  background-color: transparent;
  color: var(--brand);
  border-color: var(--brand);
  box-shadow: none;
}
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
  background-image: none;
  background-color: var(--brand);
  color: #fff;
}

.wp-block-button.is-style-hell > .wp-block-button__link:not(.has-background) {
  background-image: none;
  background-color: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .4);
  box-shadow: none;
}
.wp-block-button.is-style-hell > .wp-block-button__link:not(.has-background):hover {
  background-image: none;
  background-color: #fff;
  color: var(--brand-dark);
}
.btn-lg,
.wp-block-buttons.is-gross .wp-block-button__link { padding: 18px 34px; font-size: 1.08rem; }
.btn-header svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------------
   Symbole

   Die Symbole stehen bewusst nicht als SVG im Seiteninhalt. WordPress
   putzt beim Speichern alles weg, was ein Benutzer ohne das Recht
   „unfiltered_html“ nicht schreiben darf – und dazu gehört <svg>. Ein
   Redakteur, der nur einen Tippfehler auf der Startseite ausbessert,
   hätte damit sämtliche Symbole gelöscht, ohne es zu merken.

   Deshalb steht im Inhalt nur ein leeres Kästchen mit einer Klasse; das
   Bild kommt hier aus einer Maske. Die Farbe erbt es von der Umgebung,
   dunkle wie helle Flächen brauchen also keine zweite Datei.
   ------------------------------------------------------------------ */
[class*="ic--"]::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.ic--erp::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v6c0 1.66 3.58 3 8 3s8-1.34 8-3V5'/%3E%3Cpath d='M4 11v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v6c0 1.66 3.58 3 8 3s8-1.34 8-3V5'/%3E%3Cpath d='M4 11v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6'/%3E%3C/svg%3E");
}
.ic--shop::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
}
.ic--auto::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}
.ic--web::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M9 21V9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M9 21V9'/%3E%3C/svg%3E");
}
.ic--ki::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3'/%3E%3C/svg%3E");
}
.ic--daten::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Crect x='7' y='11' width='3' height='7' rx='1'/%3E%3Crect x='12' y='7' width='3' height='11' rx='1'/%3E%3Crect x='17' y='13' width='3' height='5' rx='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Crect x='7' y='11' width='3' height='7' rx='1'/%3E%3Crect x='12' y='7' width='3' height='11' rx='1'/%3E%3Crect x='17' y='13' width='3' height='5' rx='1'/%3E%3C/svg%3E");
}
.ic--team::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.ic--experten::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E");
}
.ic--dran::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");
}
.ic--netz::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.59 13.51 6.83 3.98M15.41 6.51 8.59 10.49'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.59 13.51 6.83 3.98M15.41 6.51 8.59 10.49'/%3E%3C/svg%3E");
}

/* Ein Raster für Karten, Angebote, Schritte und Stärken: Es füllt die
   Breite selbst auf, sodass eine im Editor gelöschte Karte keine Lücke
   hinterlässt. */
.cards,
.offer-grid,
.process-grid,
.why-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
/* Die Mindestbreite bestimmt die Spaltenzahl: drei Karten, zwei Angebote,
   vier Schritte – wie auf der bisherigen Seite. Weil das Raster trotzdem
   „auto-fit“ bleibt, hinterlässt eine im Editor gelöschte Kachel keine Lücke
   und auf schmalen Bildschirmen rutscht alles von selbst untereinander. */
.offer-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
/* Die Projektangebote stehen zu dritt: Sie sind der Nebenweg, und fünf Karten in
   der Breite der buchbaren würden den Abschnitt zu einer Liste machen, in der
   nichts mehr Vorrang hat. */
.offer-grid--kompakt { gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.5rem), 1fr)); }
.process-grid { gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.why-grid { gap: 22px; }

/* Der Abstand kommt aus „gap“ – und nur daraus.
   WordPress gibt jedem Block einer Gruppe ausser dem ersten zusätzlich einen
   oberen Abstand (--wp--style--block-gap, hier 24px). In einer Reihe schiebt
   dieser Rand jede Kachel ausser der ersten 24 Pixel nach unten; weil die Zeile
   sich an der höchsten Kachel ausrichtet, wird die erste dafür 24 Pixel höher.
   Ergebnis: drei Kacheln, die gleich sein sollen, stehen sichtbar schief, und
   der Fehler ist im Editor nicht zu finden, weil er nicht im Inhalt steht.
   Die Klasse .wp-block-group steht mit im Selektor, damit diese Regel die von
   WordPress in jedem Fall überstimmt. */
.wp-block-group.cards > *,
.wp-block-group.offer-grid > *,
.wp-block-group.offer-grid--kompakt > *,
.wp-block-group.process-grid > *,
.wp-block-group.why-grid > * { margin-block-start: 0; }

/* ------------------------------------------------------------------
   4. Startbereich
   Die Ebenen im Hintergrund setzt mediaplan.js ein; ohne JavaScript
   bleibt der Verlauf stehen und der Text ist trotzdem lesbar.
   ------------------------------------------------------------------ */
.hero {
  --mx: 0;
  --my: 0;
  --cx: 50%;
  --cy: 40%;
  position: relative;
  color: #eaf2ff;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(620px, 92vh, 920px);
  display: flex;
  align-items: center;
  background: radial-gradient(110% 80% at 50% 0%, #0b2c56 0%, #06203f 45%, #021227 75%, #000a14 100%);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-aurora { position: absolute; inset: 0; }
.aur { position: absolute; border-radius: 50%; will-change: transform; }
.aur-1 {
  width: 72vmax; height: 72vmax; left: -18vmax; top: -34vmax;
  background: radial-gradient(circle, rgba(0, 102, 191, .5), rgba(0, 79, 159, .16) 45%, transparent 68%);
  animation: aurDrift1 26s ease-in-out infinite;
  translate: calc(var(--mx) * 30px) calc(var(--my) * 22px);
}
.aur-2 {
  width: 60vmax; height: 60vmax; right: -22vmax; top: -10vmax;
  background: radial-gradient(circle, rgba(35, 140, 235, .34), rgba(10, 80, 160, .12) 48%, transparent 70%);
  animation: aurDrift2 32s ease-in-out infinite;
  translate: calc(var(--mx) * -44px) calc(var(--my) * -30px);
}
.aur-3 {
  width: 44vmax; height: 44vmax; left: 30%; bottom: -26vmax;
  background: radial-gradient(circle, rgba(255, 153, 0, .17), rgba(255, 153, 0, .05) 46%, transparent 68%);
  animation: aurDrift3 22s ease-in-out infinite;
  translate: calc(var(--mx) * 20px) calc(var(--my) * 26px);
}
@keyframes aurDrift1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(6%, 8%, 0) scale(1.12); } }
@keyframes aurDrift2 { 0%,100% { transform: translate3d(0,0,0) scale(1.05); } 50% { transform: translate3d(-7%, 5%, 0) scale(.94); } }
@keyframes aurDrift3 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(9%, -7%, 0) scale(1.15); } }

.hero-gridlines {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(110, 165, 230, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 165, 230, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 100%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 100%, #000 30%, transparent 78%);
  translate: calc(var(--mx) * 10px) calc(var(--my) * 8px);
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-spot {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(560px circle at var(--cx) var(--cy), rgba(90, 160, 255, .16), rgba(90, 160, 255, .05) 42%, transparent 70%);
}
.hero.has-pointer .hero-spot { opacity: 1; }
.hero-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(90% 62% at 50% 46%, rgba(1, 16, 36, .38) 0%, transparent 62%),
    linear-gradient(0deg, rgba(0, 10, 20, .72), transparent 26%),
    linear-gradient(180deg, rgba(0, 10, 20, .45), transparent 18%);
}

.hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 120px 22px 110px; max-width: 880px;
}
.hero-inner > * { max-width: 100%; }

/* Der grüne Punkt vor dem Hinweis ist Dekoration – als Pseudo-Element
   bleibt der Absatz im Editor reiner Text. */
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 18px; border-radius: 999px; margin: 0 0 26px;
  font-size: .88rem; font-weight: 700; letter-spacing: .02em; color: #d9e9ff;
  background: rgba(20, 60, 115, .38); border: 1px solid rgba(130, 180, 240, .32);
  backdrop-filter: blur(6px);
}
.hero-badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #35d07f; flex: none;
  box-shadow: 0 0 0 0 rgba(53, 208, 127, .55); animation: badgePulse 2.4s ease-out infinite;
}
@keyframes badgePulse { 70% { box-shadow: 0 0 0 9px rgba(53, 208, 127, 0); } 100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0); } }

.hero h1 { color: #fff; font-size: clamp(2.3rem, 5vw, 3.9rem); line-height: 1.12; margin: 0 0 22px; text-wrap: balance; }
.hero h1 mark,
.hero .hl {
  color: var(--accent); background: none;
  background-image: linear-gradient(92deg, #ffb84d, var(--accent) 55%, #ff8a00);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero .sub { font-size: 1.22rem; color: #c6d9f2; max-width: 640px; margin: 0 auto 34px; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 22px; }
.hero-note { font-size: .9rem; color: #9fbbdd; margin: 0 0 40px; }

.hero-pillars {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 26px;
  padding-top: 26px; border-top: 1px solid rgba(140, 180, 230, .18); width: 100%;
  list-style: none; margin: 0;
}
.hero-pillars li {
  display: inline-flex; align-items: center; gap: 9px; position: relative;
  color: #e8f2ff; font-weight: 600; font-size: 1rem;
}
.hero-pillars li + li::before {
  content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .35);
}
.hero-pillars svg { width: 20px; height: 20px; color: var(--accent); flex: none; }

/* Die Symbole vor den drei Schwerpunkten sind reine Zierde und hängen an der
   Position im Listenpunkt. So bleibt im Editor nur Text stehen, den jeder
   ändern kann, ohne sich an SVG-Code vorbeizuschreiben. „order: -1“ schiebt
   das Symbol vor die Schrift, weil der Listenpunkt selbst ein Flex-Kasten ist. */
.hero-pillars li::after {
  content: "";
  order: -1;
  width: 20px;
  height: 20px;
  flex: none;
  background-color: var(--accent);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.hero-pillars li:nth-child(1)::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
}
.hero-pillars li:nth-child(2)::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9 17 7M7 17l-2.1 2.1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9 17 7M7 17l-2.1 2.1'/%3E%3C/svg%3E");
}
.hero-pillars li:nth-child(3)::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M9 21V9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M9 21V9'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------
   5. Kennzahlen und Logoleisten
   ------------------------------------------------------------------ */
.stats { background: var(--surface-deep); color: #fff; padding: 34px 0; }
.stats .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 24px; }
.stat { text-align: center; }
.stats .wp-block-group.container > * { margin-block-start: 0; }
.stat p { margin: 0; color: #a9c3e6; font-size: .95rem; font-weight: 600; }

/* Zahl, Logo und Symbol bekommen dieselbe Kopfhöhe, damit alle vier
   Beschriftungen auf einer Linie sitzen. Eine Schriftzeile in 2,1rem ist rund
   55 Pixel hoch, ein Logo 30 – ohne feste Höhe steht die Beschriftung unter
   „1998“ deutlich höher als die unter dem PlentyONE-Zeichen. Das fällt auf,
   ohne dass man benennen könnte, was stört. */
.stat .stat-wert,
.stat figure,
.stat .stat-icon {
  display: flex; align-items: center; justify-content: center;
  height: 3.4rem; margin: 0 auto .55rem;
}
.stat .stat-wert { font-size: 2.1rem; color: #fff; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.stat img { height: 30px; width: auto; }
.stat .stat-icon { width: 100%; color: #fff; }
.stat .stat-icon::before { width: 30px; height: 30px; }

.trustbar { background: #fff; border-bottom: 1px solid var(--line); padding: 26px 0; }
.trustbar p.trustbar-label {
  text-align: center; color: var(--muted); font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 20px;
}
.trustbar .marquee-track { animation-duration: 64s; }
.logo-strip {
  list-style: none; display: flex; align-items: center; flex: none;
  gap: 0 60px; padding: 0 60px 0 0; margin: 0;
}
.logo-strip figure { margin: 0; }
.logo-strip img {
  height: 30px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .6; transition: filter .25s ease, opacity .25s ease;
}
.logo-strip img:hover { filter: grayscale(0); opacity: 1; }

/* Laufband: Im Editor steht eine Liste, im Frontend hängt mediaplan.js
   Kopien an, bis die Reihe nahtlos umläuft. */
.marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ------------------------------------------------------------------
   6. Leistungen, Bild-Text-Reihen, Angebote, Ablauf, Stärken
   ------------------------------------------------------------------ */
/* Spalte, damit der weiterführende Link unten am Kartenfuß hängt (margin-top:
   auto) statt direkt unter der Stichpunktliste. Sonst sitzt er in jeder Karte
   auf einer anderen Höhe, weil die Texte unterschiedlich lang sind - und drei
   Karten nebeneinander sehen dann aus wie drei verschiedene Bausteine. */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px;
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(0, 79, 159, .3); }
.card .ic,
.why-item .ic { line-height: 0; }
.card .ic {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px;
  background: linear-gradient(135deg, var(--brand), var(--brand-light)); color: #fff;
}
.card .ic svg { width: 28px; height: 28px; }
.card .ic::before { width: 28px; height: 28px; }
.card h3 { font-size: 1.24rem; margin: 0 0 10px; }
.card p { color: var(--muted); font-size: .98rem; margin: 0; }
.card ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.card ul li { position: relative; padding-left: 24px; color: var(--ink); font-size: .94rem; }
.card ul li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 8px;
  border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); transform: rotate(-45deg);
}
/* Weiterführender Link einer Karte: ein Textlink, kein Knopf - die Karte wirbt
   nicht, sie führt weiter. Orange bleibt den Handlungsknöpfen vorbehalten. */
.card .card-mehr { margin: auto 0 0; padding-top: 18px; }
.card .card-mehr a {
  font-size: .94rem; font-weight: 700; color: var(--brand); text-decoration: none;
}
.card .card-mehr a::after { content: "\00a0\2192"; }
.card .card-mehr a:hover,
.card .card-mehr a:focus-visible { text-decoration: underline; }

.feature { align-items: center; gap: 56px; }
.feature + .feature { margin-top: 90px; }
.feature figure { margin: 0; }
.feature img { border-radius: var(--radius); box-shadow: var(--shadow); background: var(--bg-soft); }
.feature h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 14px; }
.feature p { color: var(--muted); margin: 0 0 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 0; padding: 0; }
.chips li {
  font-size: .86rem; font-weight: 600; color: var(--brand-dark);
  background: var(--bg-soft-2); border: 1px solid var(--line); padding: 7px 13px; border-radius: 999px;
}
/* Systeme und Marktplätze: echte Logos, Schriftzug nur wo keine Marke existiert. */
.tool-logos {
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: 0 36px; padding-right: 36px; margin: 0; list-style: none;
}
.tool-logos li {
  padding: 0; background: none; border: none; border-radius: 0;
  font-size: inherit; white-space: nowrap;
}
.tool-logos img {
  display: block; height: 28px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .65;
  transition: filter .25s ease, opacity .25s ease;
}
.tool-logos img:hover { filter: grayscale(0); opacity: 1; }
.tool-logos .tool-text {
  font-size: .95rem; font-weight: 700; color: var(--brand-dark);
  letter-spacing: .02em;
}
.marquee-track:has(.tool-logos) { animation-duration: 90s; }

.offer {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 32px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.offer:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.offer--featured { border: 2px solid var(--brand); background: linear-gradient(180deg, #fff, #f7fbff); }
/* Der Name des Angebots ist die gesuchte Information und gehört deshalb über den
   Preis. Vorher war es umgekehrt: Titel 21, Preiszahl 25 Pixel - im unscharfen
   Blick blieben die Zahlen stehen und die Namen verschwanden. Wer aber nach
   „Schulung“ sucht, sucht nicht nach „500“. */
.offer h3,
.offer h4 { font-size: 1.45rem; line-height: 1.25; margin: 0 0 10px; }
.offer p { color: var(--muted); font-size: .97rem; margin: 0 0 16px; }
.offer .tag {
  position: absolute; top: -13px; left: 30px; background: var(--accent); color: #1a1200;
  font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; margin: 0;
}
.offer .live {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: #d12;
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 10px;
}
.offer .live::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: #e11;
  box-shadow: 0 0 0 0 rgba(238, 17, 17, .5); animation: pulse 1.8s infinite;
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(238, 17, 17, .5); } 70% { box-shadow: 0 0 0 12px rgba(238, 17, 17, 0); } 100% { box-shadow: 0 0 0 0 rgba(238, 17, 17, 0); } }
.offer .offer-price {
  margin: auto 0 16px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px;
  color: var(--muted); font-size: .95rem; font-weight: 600;
}
.offer .offer-price strong { font-size: 1.28rem; font-weight: 800; color: var(--ink); }
.offer .offer-price em { font-style: normal; font-weight: 700; color: var(--brand); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; width: 100%; }
/* Die Bedingung eines Angebots steht unter dem Preis und nicht im Fließtext:
   Dort, wo über Geld entschieden wird, wird gelesen; der Beschreibungstext
   darüber wird überflogen. */
.offer .offer-note { margin: -10px 0 16px; font-size: .84rem; line-height: 1.45; }

/* Die ganze Karte führt auf die Seite, die das Angebot erklärt. Dafür wächst
   die Fläche dieses einen Links auf die Karte, statt den Kasten mit JavaScript
   anklickbar zu machen: So steht das Ziel im Quelltext, ist mit der Tastatur
   erreichbar und zählt für Suchmaschinen als Verweis.

   Die Fläche liegt auf ::before, weil ::after den Pfeil hinter dem Text trägt. */
.offer .offer-mehr { margin: 0 0 16px; }
.offer .offer-mehr a {
  font-size: .92rem; font-weight: 700; color: var(--brand); text-decoration: none;
}
/* Geschütztes Leerzeichen: Sonst steht der Pfeil auf schmalen Karten allein in
   der nächsten Zeile. */
.offer .offer-mehr a::after { content: "\00a0\2192"; }
.offer .offer-mehr a::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius); z-index: 1;
}
.offer .offer-mehr a:hover,
.offer .offer-mehr a:focus-visible { text-decoration: underline; }
/* Die Knöpfe liegen über der Fläche – sonst führte „Direkt buchen“ auf die
   Produktseite statt in den Warenkorb. */
.offer .wp-block-buttons { margin-top: auto; gap: 10px; position: relative; z-index: 2; }
/* Bei Tastaturbedienung gehört der Rahmen um die Karte. Er sitzt auf derselben
   Fläche, die auch den Klick annimmt – sonst umrandete er nur die Textzeile,
   während die halbe Karte gemeint ist. */
.offer .offer-mehr a:focus-visible { outline: none; }
.offer .offer-mehr a:focus-visible::before { outline: 2px solid var(--brand); outline-offset: 3px; }

/* Zwei Schaltflächen auf einer Karte: anfragen und direkt buchen. Auf schmalen
   Karten stehen sie untereinander und dann über die ganze Breite - zwei halbe
   Knöpfe nebeneinander treffen mit dem Daumen schlechter. */
@media (max-width: 30rem) {
  .offer .wp-block-buttons .wp-block-button { width: 100%; }
  .offer .wp-block-buttons .wp-block-button__link { width: 100%; justify-content: center; }
}

/* Bleibt in der letzten Zeile eine Karte allein, füllt sie die Zeile. Sonst
   steht daneben ein Loch, das aussieht wie eine vergessene Karte.
   Nicht im kompakten Raster: Dort wäre die letzte Karte plötzlich die größte
   Fläche des Abschnitts, und das ausgerechnet beim unbestimmtesten Angebot. */
.offer-grid:not(.offer-grid--kompakt) > .offer:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---------- Gruppen im Angebotsteil ----------
   Zwei Klassen von Angeboten in einem Abschnitt: zwei mit festem Preis, sofort
   buchbar, und fünf, deren Umfang erst im Gespräch entsteht. Als sieben gleich
   große Karten sah beides gleich aus - der Blick rutschte ab der zweiten Reihe
   ohne Halt durch, und die Überschrift „buchbare Leistungen“ stimmte für fünf
   Karten nicht. Jede Gruppe sagt deshalb selbst, was sie ist. */
.offer-gruppe + .offer-gruppe { margin-top: 58px; }
.offer-gruppe > .gruppe-kopf { margin: 0 0 26px; }
.gruppe-kopf h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin: 0 0 6px; }
.gruppe-kopf p { color: var(--muted); font-size: 1rem; margin: 0; max-width: 62ch; }
/* Die zweite Gruppe steht optisch zurück: kleinere Karten, ruhigerer Rahmen. Sie
   ist nicht weniger wichtig, aber der zweite Blick. */
.offer-grid--kompakt .offer { padding: 26px 24px; box-shadow: none; }
.offer-grid--kompakt .offer:hover { box-shadow: var(--shadow-sm); }
.offer-grid--kompakt .offer h3,
.offer-grid--kompakt .offer h4 { font-size: 1.2rem; }
.offer-grid--kompakt .offer p { font-size: .93rem; margin-bottom: 14px; }
.offer-grid--kompakt .offer .offer-price { margin-bottom: 12px; }
.offer-grid--kompakt .offer .offer-price strong { font-size: 1.14rem; }
.offer-grid--kompakt .offer .offer-mehr { margin-bottom: 14px; }

.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow-sm); }
.step .num { font-size: 2.4rem; font-weight: 900; color: rgba(0, 79, 159, .16); line-height: 1; margin: 0; }
.step h3, .step h4 { font-size: 1.12rem; margin: 8px 0; }
.step p { color: var(--muted); font-size: .93rem; margin: 0; }

.why-item { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius); padding: 28px 26px; }
.why-item .ic { color: var(--accent); margin-bottom: 12px; }
.why-item .ic svg { width: 30px; height: 30px; }
.why-item .ic::before { width: 30px; height: 30px; }
.why-item h3, .why-item h4 { color: #fff; font-size: 1.15rem; margin: 0 0 8px; }
.why-item p { color: #cfe0f7; font-size: .96rem; margin: 0; }

/* ------------------------------------------------------------------
   7. PlentyONE-Ablauf mit Hintergrundbild oder -video
   Umgesetzt als Cover-Block: Medium im Editor austauschbar.
   ------------------------------------------------------------------ */
/* Das Standbild hängt am Video (poster="", gesetzt in inc/flow-video.php) und
   nicht mehr als Hintergrund an dieser Fläche. Beides zusammen hiess dieselbe
   Datei zweimal laden: einmal aus dem Stylesheet ohne Fassungsnummer, einmal mit.
   Das Attribut ist die bessere der beiden Stellen, weil es die Fassungsnummer
   trägt - ohne sie zeigt ein Browser nach dem Austausch monatelang das alte Bild. */
.pflow.wp-block-cover {
  min-height: min(94vh, 900px); padding: 78px 22px 72px; color: #eaf3ff;
  background-color: #061426;
}
/* Der gleichmäßige Schleier des Cover-Blocks reicht hier nicht: Das Video zeigt
   mehrere Szenen, und in einer davon steht ein hell leuchtendes Telefon genau
   dort, wo die Überschrift liegt. Dieser Verlauf dunkelt die Mitte zusätzlich ab
   und lässt die Ränder frei - der Text sitzt damit in jeder Szene auf ruhigem
   Grund, ohne dass das Bild flächig zugedeckt wird. */
.pflow.wp-block-cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 76% 58% at 50% 50%,
    rgba(3, 11, 24, .74) 0%, rgba(3, 11, 24, .52) 45%, rgba(3, 11, 24, .12) 78%, rgba(3, 11, 24, 0) 100%);
}
.pflow .wp-block-cover__inner-container { max-width: var(--shell); margin: 0 auto; width: 100%; position: relative; z-index: 1; }
.pflow h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin: 0 auto 14px; max-width: 760px; text-shadow: 0 2px 24px rgba(0, 8, 20, .65); }
.pflow .pflow-lead { color: #e9f1fc; font-size: 1.08rem; max-width: 56ch; margin: 0 auto 40px; text-shadow: 0 1px 16px rgba(0, 8, 20, .7); }
.pflow-steps {
  list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 6px 16px;
}
.pflow-steps li {
  display: inline-flex; align-items: center; color: #eef4fd; font-weight: 600; font-size: 1.02rem;
  text-shadow: 0 1px 12px rgba(0, 8, 20, .9);
}
.pflow-steps li::after { content: "\2192"; margin-left: 16px; color: rgba(233, 241, 252, .5); font-weight: 400; }
.pflow-steps li:last-child::after { content: none; }
.pflow-steps img { height: 26px; width: auto; filter: drop-shadow(0 1px 8px rgba(0, 8, 20, .95)); }

/* ------------------------------------------------------------------
   8. Referenzen, Fragen, Kontakt, Abschlussbanner
   ------------------------------------------------------------------ */
.logo-wall {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 16px;
}
.logo-wall li {
  display: flex; align-items: center; justify-content: center;
  height: 92px; padding: 12px 18px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); transition: box-shadow .25s ease, transform .25s ease;
  font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); font-size: 1rem; line-height: 1.25; text-align: center;
}
.logo-wall li:hover { box-shadow: var(--shadow); transform: translateY(-2px); color: var(--brand); }
.logo-wall img {
  max-height: 48px; max-width: 100%; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .68; transition: filter .25s ease, opacity .25s ease;
}
.logo-wall li:hover img { filter: none; opacity: 1; }

.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 14px; }
.faq-list .wp-block-details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); overflow: hidden; padding: 0;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-list .wp-block-details[open] { border-color: rgba(0, 79, 159, .35); box-shadow: var(--shadow); }
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 22px; font-weight: 700; color: var(--ink); font-size: 1.06rem; line-height: 1.4;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-top: 6px;
  border-right: 2.5px solid var(--brand); border-bottom: 2.5px solid var(--brand);
  transform: rotate(45deg); transition: transform .25s ease;
}
.faq-list .wp-block-details[open] summary::after { transform: rotate(-135deg); }
.faq-list summary:hover { color: var(--brand); }
.faq-list .wp-block-details > *:not(summary) { padding: 0 22px; }
.faq-list .wp-block-details > *:last-child { padding-bottom: 20px; }
.faq-list p { color: var(--muted); margin: 0; }
.faq-cta { margin: 40px auto 0; max-width: 820px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 20px; text-align: center; }
.faq-cta p { font-weight: 700; color: var(--ink); font-size: 1.08rem; margin: 0; }

.contact-grid { align-items: stretch; gap: 40px; }
.contact-info h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin: 0 0 16px; }
.contact-info > p { color: var(--muted); font-size: 1.08rem; margin: 0 0 26px; }
/* Telefon, E-Mail, Anschrift: links das Kärtchen mit dem Symbol, rechts
   Bezeichnung über Angabe. Das Symbol steckt im Stylesheet, im Seiteninhalt
   steht nur Text – so übersteht es jedes Speichern im Editor. */
.contact-list { list-style: none; display: grid; gap: 16px; margin: 0 0 26px; padding: 0; }
.contact-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 14px;
  align-items: center;
  color: var(--muted);
}
.contact-list li::before {
  content: "";
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  background: #fff center / 20px 20px no-repeat;
}
.contact-list li:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004f9f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.contact-list li:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004f9f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E");
}
.contact-list li:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004f9f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
.contact-list strong { display: block; grid-column: 2; color: var(--ink); font-size: 1rem; }
.contact-list li > a { grid-column: 2; justify-self: start; }
.assurance { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.assurance li { display: flex; align-items: center; gap: 9px; color: var(--brand-dark); font-weight: 600; font-size: .95rem; }
.assurance li::before {
  content: ""; flex: none; width: 14px; height: 8px; margin-top: -4px;
  border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); transform: rotate(-45deg);
}

.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; padding: 0;
}
.form-card .form-head { padding: 22px 26px; background: linear-gradient(135deg, var(--brand), var(--brand-light)); color: #fff; }
.form-card .form-head p { margin: 0; color: #d6e7ff; font-size: .92rem; }
.form-card .form-head strong { font-size: 1.15rem; display: block; color: #fff; }

/* Das Formular kommt von Contact Form 7. Statt dessen Optik zu übernehmen,
   bekommt es hier die Felder der ursprünglichen Seite. */
.form-card .wpcf7 { padding: 24px 26px 28px; }
.form-card .wpcf7 p { margin: 0 0 14px; font-size: .9rem; font-weight: 600; color: var(--ink); }
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="tel"],
.form-card textarea {
  width: 100%; font: inherit; font-weight: 400; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; margin-top: 6px; transition: border-color .15s, box-shadow .15s;
}
.form-card input:focus,
.form-card textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 79, 159, .15); }
.form-card textarea { resize: vertical; min-height: 120px; }
.form-card .wpcf7-list-item { margin: 0; }
.form-card .wpcf7-acceptance .wpcf7-list-item-label { font-weight: 400; font-size: .84rem; color: var(--muted); }
/* Der Absendeknopf in Akzentfarbe. Das Basis-Theme färbt Absendeknöpfe blau, weil
   das für jede Kundenseite passt; hier soll er dieselbe orange Farbe tragen wie die
   übrigen Handlungsaufforderungen der Seite. Der Aufzählungspfad ist nötig, weil die
   Regel im Basis-Theme über den Typ des Feldes greift und eine einzelne Klasse sie
   nicht überstimmen würde. */
.form-card .wpcf7 input[type="submit"] {
  width: 100%;
  justify-content: center;
  padding: 18px 34px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 700 1.08rem/1 var(--font);
  background: var(--accent);
  color: #1a1200;
  box-shadow: 0 10px 24px rgba(255, 153, 0, .34);
  transition: transform .18s ease, box-shadow .18s ease;
}
.form-card .wpcf7 input[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255, 153, 0, .42); }
.form-card .wpcf7 p.form-note {
  font-weight: 400; font-size: .8rem; color: var(--muted);
  text-align: center; margin: 12px 0 0;
}
.form-card .wpcf7-not-valid-tip { color: #c00; font-weight: 600; font-size: .82rem; }

.cta-banner { text-align: center; }
.cta-banner h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin: 0 0 14px; }
.cta-banner p { color: #c6dbf5; font-size: 1.12rem; max-width: 640px; margin: 0 auto 28px; }
.cta-banner .wp-block-buttons { justify-content: center; }

/* Ruhiges Leuchten auf den dunklen Flächen – Verläufe, keine Filter. */
.stats,
.section--dark { position: relative; overflow: hidden; isolation: isolate; }
.stats > .container,
.section--dark > .container { position: relative; z-index: 1; }
.stats::before,
.section--dark::before {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  width: 44vmax; height: 44vmax; right: -14vmax; top: -20vmax;
  background: radial-gradient(circle, rgba(0, 122, 224, .24), transparent 62%);
  animation: glowDrift 24s ease-in-out infinite;
}
@keyframes glowDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .65; }
  50%      { transform: translate3d(4%, -5%, 0) scale(1.14); opacity: 1; }
}

/* ------------------------------------------------------------------
   9. Mitlaufende Schaltfläche, Einblenden
   ------------------------------------------------------------------ */
/* Form und Verhalten von Fortschrittsbalken und Schaltfläche liefert das
   Basis-Theme (ab 1.8.0). Der Balken trifft über --sky/--sky-bright/--accent
   ohnehin die Markenfarben; bei der Schaltfläche bleibt nur, was hier anders
   ist: dunkle Schrift auf dem Orange und der kräftigere Schatten. */
.float-cta {
  --float-cta-fg: #1a1200;
  --float-cta-bg-hover: var(--accent-dark);
  --float-cta-fg-hover: #fff;
  box-shadow: var(--shadow-lg);
}

/* Einblenden beim Scrollen.
   Versteckt wird nur unter .js - die Klasse setzt das Basis-Theme im Kopf, wenn
   JavaScript läuft. Ohne diese Bedingung stünde der halbe Seiteninhalt auf
   durchsichtig und würde erst von einem Skript sichtbar gemacht: Ein Fehler in
   irgendeinem Plugin, ein Skriptblocker oder ein Ladefehler hätte gereicht, und
   unter dem Startbereich wäre die Seite leer geblieben. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------
   10. Textseiten: Leistungen, Rechtstexte
   ------------------------------------------------------------------ */
/* Die Überschrift im Kopfbereich steht im Basis-Theme kursiv und 16 Zeichen
   breit. Das gehört zur anderen Marke, die dieses Theme ebenfalls trägt; bei
   mediaplan ist Verdana in 800 gesetzt und nichts kursiv. 16 Zeichen brechen
   außerdem einen Titel wie „Webdesign: Websites und Onlineshops“ in vier
   Zeilen. */
.page-hero h1 { font-style: normal; max-width: 30ch; text-wrap: balance; }
.page-hero__text { max-width: 60ch; }

/* Das Basis-Theme begrenzt den Lesetext auf 720 Pixel, lässt ihn aber im
   1180 Pixel breiten Rahmen links stehen. Auf einer Rechtstextseite fällt das
   kaum auf, auf einer Leistungsseite mit 600 Wörtern schon: Die halbe Seite
   bleibt leer, und der Text sieht aus wie versehentlich abgeschnitten. Deshalb
   steht die Spalte hier mittig - und etwas breiter, weil Verdana bei gleicher
   Punktzahl mehr Platz braucht als die Schriften, für die 720 gedacht war. */
.entry--page .entry-content {
  max-width: 780px;
  margin-inline: auto;
  font-size: 1.03rem;
}

/* Der Kopfbereich steht in derselben Spalte wie der Text darunter. Sonst beginnt
   die Überschrift am Rand des Rahmens, der erste Absatz aber 200 Pixel weiter
   rechts - zwei linke Kanten übereinander, und keine davon sieht gewollt aus.
   Ausgenommen bleiben Warenkorb, Kasse, Konto und Bestellbestätigung: Dort läuft
   der Inhalt über die ganze Breite, dort ist die Kante am Rahmen die richtige. */
.page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.woocommerce-order-received)
  .page-hero:not(.page-hero--mit-bild) .page-hero__inhalt {
  max-width: 780px;
  margin-inline: auto;
}
.entry--page .entry-content > h2 { margin-top: 2.4rem; font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
.entry--page .entry-content > h3 { margin-top: 1.8rem; }
.entry--page .entry-content > ul,
.entry--page .entry-content > ol { padding-left: 1.35rem; }
.entry--page .entry-content > ul li + li,
.entry--page .entry-content > ol li + li { margin-top: .5rem; }
.entry--page .entry-content > ul li::marker { color: var(--brand); }

/* ------------------------------------------------------------------
   11. Kleinere Bildschirme
   ------------------------------------------------------------------ */
@media (max-width: 980px) {
  .hero-inner { padding: 72px 22px 84px; }
  .feature + .feature { margin-top: 56px; }
}
@media (max-width: 760px) {
  .section { padding: 64px 0; }
  .site-header__actions .btn-header { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none !important; transform: none !important; flex-wrap: wrap; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .logo-strip { flex-wrap: wrap; justify-content: center; gap: 24px 40px; padding-right: 0; }
  .tool-logos { flex-wrap: wrap; justify-content: center; gap: 18px 28px; padding-right: 0; }
  .hero-canvas, .hero-spot { display: none !important; }
}

/* ------------------------------------------------------------------
   10a. Rechtstexte
   Das Muster-Widerrufsformular in der Belehrung ist zum Abschreiben da
   und nicht zum Ausfüllen. Ohne Rahmen liest es sich wie ein Teil der
   Belehrung – dann füllt es jemand aus und wartet auf eine Antwort.
   ------------------------------------------------------------------ */
.widerruf-muster {
  padding: 22px 26px;
  border: 1px solid var(--line, #d9e2e8);
  border-radius: var(--radius, 14px);
  background: var(--surface, #fff);
}
.widerruf-muster > :first-child { margin-top: 0; }
.widerruf-muster > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
   10b. Dankeseiten
   Vier Seiten unter /danke/, je Fall eine. Nach einem Kauf steht ihr
   Inhalt auf der Bestellbestätigung von WooCommerce – dort gibt es
   weder .entry-content noch dessen Spaltenbreite, deshalb bringt
   .danke-block seine eigene mit.
   ------------------------------------------------------------------ */
.danke-block {
  max-width: 780px;
  margin: 0 auto 44px;
}
.danke-block > :first-child { margin-top: 0; }

/* Das Video ist der Grund für die Seite: volle Spaltenbreite, ohne
   Beschnitt. Ein Standbild (poster) gehört im Editor dazu – ohne steht
   dort eine schwarze Fläche, bis jemand auf Abspielen drückt. */
.danke-block .wp-block-video,
.entry--page .entry-content > .wp-block-video { margin: 26px 0 30px; }
.danke-block .wp-block-video video,
.entry--page .entry-content > .wp-block-video video {
  width: 100%;
  height: auto;
  border-radius: var(--radius, 14px);
  background: #061426;
  box-shadow: 0 18px 44px rgba(8, 28, 54, .16);
}

/* Die nächsten Schritte stehen in derselben Lesespalte wie der Text.
   Bei 26rem Mindestbreite (wie im Angebotsraster) bliebe dort eine
   Karte pro Zeile und die Seite würde unnötig lang; 18rem ergeben zwei. */
.danke-schritte { margin-top: 40px; }
.danke-schritte > h2 { margin-bottom: 18px; font-size: clamp(1.25rem, 2vw, 1.55rem); }
.danke-schritte .offer-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }

/* Platzhalter für das Dankevideo: nur im Editor sichtbar, damit Besucher
   keinen Hinweis „Video folgt“ lesen. Im Editor eine gestrichelte Fläche,
   damit klar ist, wohin der Video-Block gehört. */
.danke-video-hinweis { display: none; }
.editor-styles-wrapper .danke-video-hinweis {
  display: block;
  margin: 26px 0 30px;
  padding: 48px 24px;
  border: 2px dashed var(--line, #d9e2e8);
  border-radius: var(--radius, 14px);
  background: var(--bg-soft, #f2f5f7);
  color: var(--muted, #5a6b78);
  text-align: center;
}
.editor-styles-wrapper .danke-video-hinweis::before {
  content: "Platz für das Dankevideo. Diesen Absatz durch einen Video-Block ersetzen.";
}

/* ------------------------------------------------------------------
   10c. Produktseite
   Sie ist das Ziel der Angebotskarten und damit die Seite, auf der
   erklärt steht, was gebucht wird. Unter dem Buchen-Knopf steht der
   Weg ins Formular: Wer hier landet, ist noch nicht entschieden.
   ------------------------------------------------------------------ */
.produkt-anfrage {
  flex-basis: 100%;
  margin: 14px 0 0;
  font-size: .92rem;
  color: var(--muted, #5a6b78);
}
.produkt-anfrage a { color: var(--brand, #004f9f); font-weight: 700; }

/* ------------------------------------------------------------------
   12. Editor
   Im Seiteneditor gibt es weder Kopf noch Fuß; die dunklen Abschnitte
   brauchen dort trotzdem helle Schrift, sonst sieht man nichts.
   ------------------------------------------------------------------ */
.editor-styles-wrapper .hero,
.editor-styles-wrapper .section--dark { color: #eaf2ff; }
.editor-styles-wrapper .hero h1,
.editor-styles-wrapper .section--dark h2,
.editor-styles-wrapper .section--dark h3 { color: #fff; }
.editor-styles-wrapper .hero .hero-inner { min-height: 0; }

/* Die Einblendung beim Scrollen macht mediaplan.js – im Editor läuft das
   Skript nicht, die Abschnitte blieben also unsichtbar. Dort gilt: alles
   sichtbar, nichts verschoben. */
.editor-styles-wrapper .reveal { opacity: 1; transform: none; }