/* ============================================================================
   DELTACON — Sektionslayouts
   ----------------------------------------------------------------------------
   Was theme.json nicht abdeckt: Raster, Trennlinien und die wenigen
   Sonderformen der Abschnitte.

   Grundregel aus der Planung: keine Inline-Styles in den Patterns. Alles
   ueber Klassen, sonst zerschiesst der Kunde beim Bearbeiten das Layout,
   weil der Blockeditor Inline-Styles nicht sauber zurueckschreibt.

   Breakpoints wie im Entwurf: 900 (Raster brechen), 760 (Menue), 560 (Raender)
   ========================================================================== */

/* ---------------------------------------------------------------- Basis ---
   Seitenrand: bewusst NICHT ueber das globale Padding von WordPress.
   Mit useRootPaddingAwareAlignments vergibt WordPress den Rand einmal am
   <main> und noch einmal an jeder vollbreiten Sektion, der Inhalt wird dadurch
   doppelt eingerueckt (gemessen 262px statt 350px bei 390px Viewport).
   Stattdessen setzt ihn hier jede Sektion selbst, genau wie im Entwurf. */
:root { --dc-rand: 32px; }

.dc-hero,
.dc-branchenhero,
.dc-seitenkopf,
.dc-bildband,
.dc-facts,
.dc-section,
.dc-zitat {
  padding-inline: var(--dc-rand);
  /* Der Entwurf rechnet die 1180px inklusive der 32px Seitenpolsterung, der
     Textkoerper ist dort also 1116px breit. WordPress wuerde die Kinder auf
     die vollen 1180px setzen. Deshalb hier die Inhaltsbreite lokal auf den
     Wert des Entwurfs. Die Sektion selbst bleibt vollbreit, damit getoente
     Flaechen und Trennlinien bis an den Bildschirmrand laufen. */
  --wp--style--global--content-size: 1116px;
}

.dc-section { padding-block: var(--wp--custom--abschnitt--oben) var(--wp--custom--abschnitt--unten); }
/* Trennlinien als Blockstile: der Kunde waehlt sie im Editor in der
   Seitenleiste unter "Stile" pro Sektion aus. */
.dc-section--linie-oben,
.is-style-linie-oben { border-top: 1px solid var(--wp--preset--color--linie); }
.is-style-linie-unten { border-bottom: 1px solid var(--wp--preset--color--linie); }
.is-style-linie-beide { border-block: 1px solid var(--wp--preset--color--linie); }
.dc-section--flaeche {
  background: var(--wp--preset--color--flaeche);
  border-block: 1px solid var(--wp--preset--color--linie);
}

/* ---------------------------------------------------- Blockabstand aus ----
   WordPress gibt jedem Geschwisterelement im Flow-Layout einen oberen
   Aussenabstand (blockGap, hier 24px). In unseren CSS-Rastern erzeugt das
   versetzte Spalten, zwischen den Sektionen einen ungewollten Spalt.
   Gemessen: erste Leistungsspalte 24px hoeher als die beiden anderen,
   Hero-Bild 24px ueber der Kennzahlen-Leiste. */
.entry-content > .dc-hero,
.entry-content > .dc-facts,
.entry-content > .dc-section,
.entry-content > .dc-zitat,
.dc-dreispalter > *,
.dc-stepper__steps > *,
.dc-stepper__panels > *,
.dc-facts .wp-block-column,
.dc-hero .wp-block-column,
.dc-zitat .wp-block-column,
.dc-kontakt .wp-block-column { margin-block: 0; }

/* Versalien-Label ueber einem Abschnitt. */
.dc-eyebrow {
  margin: 0 0 20px;
  font-size: var(--wp--preset--font-size--label);
  font-weight: 600;
  letter-spacing: var(--wp--custom--label--letter-spacing);
  text-transform: uppercase;
  color: var(--wp--preset--color--akzent-dunkel);
}

/* --------------------------------------------------------------- Hero ----- */
.dc-hero { padding-block: 72px 0; overflow: hidden; }

.dc-hero .wp-block-columns {
  display: grid;
  /* Etwas mehr Platz fuer die Bildseite als im Entwurf (dort 1.25fr/1fr),
     damit Text- und Bildhoehe naeher beieinander liegen. */
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 32px;
  min-height: 540px;
}

/* WordPress setzt auf .wp-block-columns ein `align-items: normal !important`.
   Deshalb hier ueber align-self an den Spalten, das laesst sich sauber setzen. */
.dc-hero .wp-block-column {
  flex-basis: auto !important;
  align-self: end;
}

.dc-hero__text { padding-bottom: 64px; position: relative; z-index: 2; }
.dc-hero__text .dc-eyebrow { letter-spacing: .1em; margin-bottom: 22px; }
.dc-hero__text h1 {
  /* Kleiner als im Entwurf (dort bis 3.9rem). Die Ueberschrift wirkte
     gegenueber dem Bild zu dominant und drueckte die Textspalte auf fuenf
     Zeilen, wodurch die beiden Spalten stark unterschiedlich hoch waren. */
  font-size: clamp(2.2rem, 2.6vw + 1.2rem, 3.2rem);
  line-height: 1.06;
  margin: 0 0 24px;
  text-wrap: balance;
}
.dc-hero__lead {
  font-size: 17px;
  max-width: 54ch;
  margin: 0 0 34px;
  text-wrap: pretty;
}
.dc-hero__hinweis {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--wp--preset--color--text-gedaempft);
}

/* Bildseite: getoente Flaeche hinter der freigestellten Person. */
.dc-hero__bild {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.dc-hero {
  --dc-hero-flaeche-oben: 40px;   /* wo die getoente Flaeche beginnt */
  --dc-hero-name-abstand: 22px;   /* Abstand der Beschriftung zur Flaechenkante */
}
.dc-hero__bild::before {
  content: "";
  position: absolute;
  left: 8%; right: 0; top: var(--dc-hero-flaeche-oben); bottom: 0;
  background: var(--wp--preset--color--flaeche);
  border-radius: 3px;
}
.dc-hero__bild .wp-block-image {
  position: relative;
  z-index: 1;
  /* Groesser als im Entwurf (dort 112 % / 560px), damit das Portrait die
     Textspalte optisch aufwiegt. */
  width: 118%;
  max-width: 640px;
  margin: 0;
  /* Ohne flex-shrink:0 staucht der Flex-Container die 112 % wieder auf die
     Spaltenbreite zusammen. Genau daran haengt der Ueberstand: das Bild ist
     hoeher als die getoente Flaeche und ragt oben darueber hinaus. */
  flex-shrink: 0;
}
.dc-hero__bild img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 36px rgba(11, 6, 32, .18));
}
/* Gleicher Abstand nach oben und nach rechts, gemessen an der Flaechenkante.
   Die Flaeche endet rechts buendig mit der Spalte, oben liegt sie um
   --dc-hero-flaeche-oben tiefer. */
.dc-hero__name {
  position: absolute;
  top: calc(var(--dc-hero-flaeche-oben) + var(--dc-hero-name-abstand));
  right: var(--dc-hero-name-abstand);
  z-index: 2;
  margin: 0;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-sekundaer);
}

/* Textlink neben dem Knopf, z.B. die Telefonnummer. */
.dc-textlink a, a.dc-textlink {
  font-size: 15px;
  text-decoration: none;
  color: var(--wp--preset--color--text-sekundaer);
  border-bottom: 1px solid var(--wp--preset--color--linie);
  padding-bottom: 2px;
}
.dc-textlink a:hover, a.dc-textlink:hover {
  color: var(--wp--preset--color--text);
  border-bottom-color: var(--wp--preset--color--akzent);
}
.dc-textlink strong { color: var(--wp--preset--color--text); }

/* --------------------------------------------------- Kennzahlen-Leiste ---- */
.dc-facts { border-top: 1px solid var(--wp--preset--color--linie); }
.dc-facts .wp-block-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.dc-facts .wp-block-column {
  flex-basis: auto !important;
  padding: 22px 22px 26px 24px;
  border-left: 1px solid var(--wp--preset--color--linie);
}
.dc-facts .wp-block-column:first-child { padding-left: 0; border-left: 0; }
.dc-facts .wp-block-column:last-child { padding-right: 0; }

.dc-fact__k {
  display: block;
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-sekundaer);
}
.dc-fact__v {
  display: block;
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: 17px;
  line-height: 1.3;
  color: var(--wp--preset--color--text);
}

/* -------------------------------------------------------- Sektorenliste --- */
.dc-sektor {
  display: grid;
  grid-template-columns: 56px minmax(220px, 340px) 1fr;
  gap: 0 40px;
  padding: 36px 0;
  border-top: 1px solid var(--wp--preset--color--linie);
  align-items: start;
}
.dc-sektor__n {
  margin: 0;
  padding-top: 10px;
  font-family: var(--wp--preset--font-family--display);
  font-size: 15px;
  color: var(--wp--preset--color--akzent);
}
.dc-sektor__titel {
  margin: 0;
  font-size: clamp(1.8rem, 1.4vw + 1.2rem, 2.4rem);
  line-height: 1.1;
}
.dc-sektor__text { margin: 0; font-size: 15px; max-width: 60ch; }
.dc-sektor__text strong { color: var(--wp--preset--color--text); }
.dc-sektor__link { margin: 18px 0 0; grid-column: 3; font-size: 14.5px; }

/* ------------------------------------------------------------- < 900px ---- */
@media (max-width: 899px) {
  .dc-section { padding-block: 64px 68px; }

  .dc-hero { padding-block: 48px 0; }
  .dc-hero .wp-block-columns,
  .dc-facts .wp-block-columns {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .dc-hero__text { padding-bottom: 40px; }
  /* Auf schmalen Schirmen laeuft der Einleitungssatz sonst ueber viele
     Zeilen und nimmt der Ueberschrift das Gewicht. */
  .dc-hero__lead { font-size: 15.5px; margin-bottom: 28px; }
  .dc-hero__bild { min-height: 0; }
  .dc-hero__name { display: none; }
  .dc-hero__bild .wp-block-image { width: 100%; max-width: 420px; }
  .dc-hero .wp-block-column { align-self: auto; }

  /* Zweispaltig, aber weiterhin mit Trennlinien: senkrecht zwischen den
     Spalten, waagerecht zwischen den Zeilen. */
  .dc-facts .wp-block-columns { grid-template-columns: 1fr 1fr; }
  .dc-facts .wp-block-column {
    padding: 18px 0 20px 20px;
    border-left: 1px solid var(--wp--preset--color--linie);
  }
  .dc-facts .wp-block-column:nth-child(odd) {
    padding-left: 0;
    padding-right: 20px;
    border-left: 0;
  }
  .dc-facts .wp-block-column:nth-child(n + 3) {
    border-top: 1px solid var(--wp--preset--color--linie);
  }

  .dc-sektor {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
  .dc-sektor__n { padding-top: 0; }
  .dc-sektor__link { grid-column: auto; }
}

/* ------------------------------------------------------------- < 560px ---- */
@media (max-width: 559px) {
  :root { --dc-rand: 20px; }
  .dc-section { padding-block: 56px 60px; }
}

/* ==========================================================================
   Weitere Sektionen der Startseite
   ========================================================================== */

/* --------------------------------------------------- Kopf mit Seitenlink --
   Ueberschrift links, weiterfuehrender Link rechts auf gleicher Grundlinie. */
.dc-kopfzeile {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.dc-kopfzeile h2 {
  margin: 0;
  font-size: clamp(1.9rem, 1.9vw + 1.2rem, 2.6rem);
  line-height: 1.15;
  max-width: 32ch;
}
.dc-kopfzeile .dc-eyebrow { margin: 0 0 20px; }

/* ------------------------------------------------ Dreispalter mit Linien -- */
.dc-dreispalter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--wp--preset--color--linie);
}
.dc-dreispalter > .wp-block-group {
  padding: 28px 32px 32px;
  border-left: 1px solid var(--wp--preset--color--linie);
}
.dc-dreispalter > .wp-block-group:first-child { padding-left: 0; border-left: 0; }
.dc-dreispalter > .wp-block-group:last-child { padding-right: 0; }

.dc-nummer {
  margin: 0 0 14px;
  font-family: var(--wp--preset--font-family--display);
  font-size: 14px;
  color: var(--wp--preset--color--akzent);
}
.dc-leistung__titel {
  margin: 0 0 10px;
  font-family: var(--wp--preset--font-family--display);
  font-size: 19px;
  line-height: 1.3;
  color: var(--wp--preset--color--text);
}
.dc-leistung__text { margin: 0; font-size: 15px; }

/* ------------------------------------------------------ Referenz-Zitat ---- */
.dc-zitat { padding-block: 104px; }
.dc-zitat .wp-block-columns {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 0 72px;
}
.dc-zitat .wp-block-column { flex-basis: auto !important; align-self: center; }

/* Nur das eigentliche Motiv wird ins Hochformat beschnitten. Das Siegel ist
   ein breiter Streifen und muss sein eigenes Seitenverhaeltnis behalten. */
.dc-hochformat .wp-block-image:not(.dc-siegel) img {
  border-radius: 3px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
}
.dc-hochformat .dc-siegel img,
.dc-siegel img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  display: block;
}
.dc-zitat blockquote {
  margin: 0;
  border: 0;
  padding: 0;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.6rem, 1.8vw + 1rem, 2.1rem);
  line-height: 1.35;
  text-wrap: pretty;
}
.dc-zitat__name { margin: 28px 0 0; font-size: 15.5px; font-weight: 600; color: var(--wp--preset--color--text); }
.dc-zitat__rolle { margin: 4px 0 0; font-size: 14px; letter-spacing: .02em; }

/* --------------------------------------------------- Zweispalter Bild/Text */
.dc-bildtext .wp-block-columns {
  display: grid;
  gap: 72px;
}
.dc-bildtext .wp-block-column { flex-basis: auto !important; }
.dc-bildtext--textlinks .wp-block-columns { grid-template-columns: 1.08fr .92fr; }
.dc-bildtext--bildlinks .wp-block-columns { grid-template-columns: .92fr 1.08fr; }
.dc-bildtext--oben .wp-block-column { align-self: start; }
.dc-bildtext--mitte .wp-block-column { align-self: center; }

.dc-bildtext h2 {
  margin: 0 0 20px;
  font-size: clamp(1.9rem, 1.8vw + 1.2rem, 2.6rem);
  line-height: 1.16;
}
.dc-bildtext p:not(.dc-eyebrow) { max-width: 54ch; }
.dc-bildtext figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--wp--preset--color--text-sekundaer);
}

.dc-querformat img {
  border-radius: 3px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
}

/* Faktenliste unter dem Ueber-uns-Text. */
.dc-faktenliste {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  font-size: 14.5px;
}
.dc-faktenliste li {
  padding: 10px 0;
  border-top: 1px solid var(--wp--preset--color--linie);
}
.dc-faktenliste li:last-child { border-bottom: 1px solid var(--wp--preset--color--linie); }
.dc-faktenliste strong { color: var(--wp--preset--color--text); }

/* Auszeichnungen im Portrait. */
.dc-portrait { position: relative; }
.dc-portrait .dc-siegel {
  position: absolute;
  left: 20px;
  bottom: 20px;
  width: 62%;
  max-width: 350px;
  margin: 0;
}

/* Zweitrangiger Knopf: Umriss statt Flaeche. */
.dc-knopf-umriss .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--text);
  border: 1px solid var(--wp--preset--color--formularlinie);
  padding: 12px 26px;
}
.dc-knopf-umriss .wp-block-button__link:hover {
  background: transparent;
  border-color: var(--wp--preset--color--akzent);
  color: var(--wp--preset--color--akzent-dunkel);
}

@media (max-width: 899px) {
  .dc-dreispalter { grid-template-columns: 1fr; }
  .dc-dreispalter > .wp-block-group {
    padding: 24px 0 26px;
    border-left: 0;
    border-top: 1px solid var(--wp--preset--color--linie);
  }
  .dc-dreispalter > .wp-block-group:first-child { border-top: 0; }

  .dc-zitat { padding-block: 64px; }
  .dc-zitat .wp-block-columns,
  .dc-bildtext--textlinks .wp-block-columns,
  .dc-bildtext--bildlinks .wp-block-columns { grid-template-columns: 1fr; gap: 36px; }

  /* Steht das Bild im Markup vor dem Text, gehoert es einspaltig darunter.
     Erst die Aussage, dann die Illustration. */
  .dc-bildtext--bildlinks .wp-block-column:first-child { order: 2; }
  .dc-bildtext--bildlinks .wp-block-column:last-child { order: 1; }

  /* Sobald die Spalten untereinander stehen, ist das Bild so breit wie der
     Text. Ein Zuschnitt ins Querformat schnitt dem Hochformat mehr als die
     Haelfte weg (1024px Motiv auf 251px Anzeige). Es behaelt deshalb sein
     eigenes Seitenverhaeltnis und steht in voller Hoehe. */
  .dc-hochformat .wp-block-image:not(.dc-siegel) img { aspect-ratio: auto; }
  .dc-kopfzeile { margin-bottom: 32px; }
}

/* Bildunterschriften in Patterns (der Kunde soll sie als Absatz bearbeiten). */
.dc-bildunterschrift { margin-top: 10px; font-size: 12.5px; color: var(--wp--preset--color--text-sekundaer); }

/* ==========================================================================
   Ablauf-Stepper
   --------------------------------------------------------------------------
   Ohne JavaScript (Klasse .is-bereit fehlt) stehen alle Schritte und alle
   Tafeln untereinander. Erst das Skript macht daraus eine Tab-Steuerung.
   ========================================================================== */

.dc-stepper__kopf {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 0 72px;
  align-items: start;
  margin-bottom: 52px;
}
.dc-stepper__kopf h2 {
  margin: 0;
  font-size: clamp(1.9rem, 1.9vw + 1.2rem, 2.6rem);
  line-height: 1.15;
}
.dc-stepper__kopf .dc-eyebrow { margin: 0 0 20px; }
.dc-stepper__intro { margin: 0; font-size: 17px; max-width: 60ch; text-wrap: pretty; }

.dc-stepper__buehne { position: relative; padding-top: 6px; }

/* Schiene und Schrittleiste sind Geschwister. WordPress legt zwischen sie den
   Blockabstand von 24px, wodurch die Punkte unter dem Zeitstrahl haengen. */
.dc-stepper__buehne > * { margin-block: 0; }

.dc-stepper__rail {
  position: relative;
  height: 2px;
  background: var(--wp--preset--color--linie);
}
.dc-stepper__progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  height: 100%;
  background: var(--wp--preset--color--akzent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

.dc-stepper__steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}

/* Die Schritte sind im Editor normale Gruppen. Erst hier werden sie zu
   Schaltflaechen umgestylt. */
.dc-stepper__steps > * {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.dc-stepper__steps > *:focus-visible {
  outline: 2px solid var(--wp--preset--color--akzent);
  outline-offset: 4px;
}

.dc-stepper__dot {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  display: block;
  margin: -9px 0 24px 1px;
  background: var(--wp--preset--color--flaeche);
  border: 2px solid var(--wp--preset--color--formularlinie);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  transition: background-color .3s ease, border-color .3s ease;
}

/* WordPress setzt auf das erste Kind einer Flow-Gruppe
   `margin-block-start: 0`. Diese Regel hat dieselbe Spezifitaet wie
   `.dc-stepper__dot` und steht spaeter in der Kaskade, gewinnt also den
   Gleichstand. Der negative Rand, der den Punkt auf den Zeitstrahl hebt,
   ging dadurch verloren. Deshalb hier eine Stufe spezifischer. */
.dc-stepper__steps .dc-stepper__dot { margin-top: -9px; }
.dc-stepper__steps > .is-erledigt .dc-stepper__dot {
  background: var(--wp--preset--color--akzent);
  border-color: var(--wp--preset--color--akzent);
}

.dc-stepper__week {
  font-family: var(--wp--preset--font-family--display);
  font-size: 13px;
  margin: 0 0 8px;
  color: var(--wp--preset--color--text-sekundaer);
  transition: color .3s ease;
}
.dc-stepper__label {
  font-size: 16px;
  margin: 0;
  line-height: 1.3;
  color: var(--wp--preset--color--text-sekundaer);
  transition: color .3s ease;
}
.dc-stepper__steps > .is-aktiv .dc-stepper__week,
.dc-stepper__steps > .is-aktiv .dc-stepper__label { color: var(--wp--preset--color--text); }

.dc-stepper__panels {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--wp--preset--color--linie);
  min-height: 96px;
  /* Tafel links, Blaetterpfeile rechts, wie im Entwurf. */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.dc-stepper__panels > [role="tabpanel"] { flex: 1; }
.dc-stepper__panels > [hidden] { display: none; }
.dc-stepper__panels h3 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.4;
}
.dc-stepper__panels p { margin: 0; max-width: 64ch; font-size: 16px; text-wrap: pretty; }

/* ------------------------------------------------------ Blaetterpfeile ---- */
.dc-stepper__pfeile {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  padding-top: 2px;
}
.dc-stepper__pfeil {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--wp--preset--color--formularlinie);
  background: var(--wp--preset--color--flaeche);
  color: var(--wp--preset--color--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: opacity .2s ease, border-color .2s ease;
}
.dc-stepper__pfeil:hover:not(:disabled) { border-color: var(--wp--preset--color--akzent); }
.dc-stepper__pfeil:focus-visible {
  outline: 2px solid var(--wp--preset--color--akzent);
  outline-offset: 3px;
}
.dc-stepper__pfeil:disabled { opacity: .35; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .dc-stepper__pfeil { transition: none; }
}
.dc-stepper__panels > *:focus-visible {
  outline: 2px solid var(--wp--preset--color--akzent);
  outline-offset: 4px;
}

/* Solange das Skript nicht gelaufen ist: Schiene und Punkte weglassen,
   damit die reine Liste sauber aussieht. */
.dc-stepper:not(.is-bereit) .dc-stepper__dot { display: none; }
.dc-stepper:not(.is-bereit) .dc-stepper__steps { grid-template-columns: 1fr; gap: 14px; }
.dc-stepper:not(.is-bereit) .dc-stepper__steps > * { cursor: default; }
.dc-stepper:not(.is-bereit) .dc-stepper__panels { display: block; }
.dc-stepper:not(.is-bereit) .dc-stepper__panels > * { margin-bottom: 28px; }

.dc-stepper-ohne-bewegung .dc-stepper__progress { transition: none; }

@media (max-width: 899px) {
  .dc-stepper__kopf { grid-template-columns: 1fr; row-gap: 24px; margin-bottom: 36px; }

  /* Aus der Waagerechten in eine senkrechte Liste. Der Zeitstrahl bleibt,
     dreht sich aber mit: die Schiene laeuft links durch die Punkte, der
     Balken waechst von oben nach unten. Lage und Laenge misst stepper.js,
     weil sie von der Hoehe der Schritte abhaengen. */
  .dc-stepper__rail {
    height: auto;
    width: 2px;
  }
  .dc-stepper__progress {
    transform: scaleY(0);
    transform-origin: center top;
  }
  .dc-stepper__steps { grid-template-columns: 1fr; gap: 0; }
  .dc-stepper__steps > * {
    flex-direction: row;
    align-items: baseline;
    gap: 14px;
    padding: 15px 0;
  }
  .dc-stepper__steps .dc-stepper__dot { margin: 0; flex: 0 0 auto; align-self: center; }
  .dc-stepper__week { margin-bottom: 0; flex: 0 0 auto; min-width: 7em; }

  /* Pfeile vor den Beschreibungstext. */
  .dc-stepper__panels { flex-direction: column; align-items: stretch; }
  .dc-stepper__pfeile { order: -1; align-self: flex-start; margin-bottom: 20px; }
}

/* ------------------------------------------------------------------ FAQ ---
   Core-Details-Block. Der Kunde legt neue Fragen an, indem er einen weiteren
   Details-Block einfuegt. */
.dc-faq__liste .wp-block-details {
  border-top: 1px solid var(--wp--preset--color--linie);
  padding: 0;
}
.dc-faq__liste .wp-block-details:last-child { border-bottom: 1px solid var(--wp--preset--color--linie); }

.dc-faq__liste summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 44px 20px 0;
  position: relative;
  font-size: 17px;
  line-height: 1.35;
  color: var(--wp--preset--color--text);
}
.dc-faq__liste summary::-webkit-details-marker { display: none; }
.dc-faq__liste summary:focus-visible {
  outline: 2px solid var(--wp--preset--color--akzent);
  outline-offset: -2px;
}

/* Pluszeichen, das sich beim Oeffnen zum Kreuz dreht. */
.dc-faq__liste summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -6px;
  background:
    linear-gradient(var(--wp--preset--color--akzent), var(--wp--preset--color--akzent)) center/13px 1.5px no-repeat,
    linear-gradient(var(--wp--preset--color--akzent), var(--wp--preset--color--akzent)) center/1.5px 13px no-repeat;
  transition: transform .25s ease;
}
.dc-faq__liste details[open] summary::after { transform: rotate(45deg); }

.dc-faq__liste .wp-block-details > :not(summary) {
  margin: 0 0 22px;
  max-width: 78ch;
  font-size: 16px;
}
@media (prefers-reduced-motion: reduce) {
  .dc-faq__liste summary::after { transition: none; }
}

/* -------------------------------------------------------------- Kontakt --- */
.dc-kontakt .wp-block-columns {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 0 72px;
  align-items: start;
}
.dc-kontakt .wp-block-column { flex-basis: auto !important; }
.dc-kontakt h2 {
  margin: 0 0 16px;
  font-size: clamp(1.9rem, 2vw + 1.2rem, 2.7rem);
  line-height: 1.15;
}
.dc-kontaktzeile { margin: 26px 0 0; font-size: 15px; }
.dc-kontaktzeile strong {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-sekundaer);
}
.dc-pflichtfeld-hinweis {
  margin-top: 64px;
  padding-top: 20px;
  border-top: 1px solid var(--wp--preset--color--linie);
  font-size: 13px;
  color: var(--wp--preset--color--text-gedaempft);
}

@media (max-width: 899px) {
  .dc-kontakt .wp-block-columns { grid-template-columns: 1fr; gap: 40px; }
  .dc-pflichtfeld-hinweis { margin-top: 40px; }
}

/* ==========================================================================
   Knopfvarianten (als Blockstile im Editor waehlbar)
   ========================================================================== */

/* Umriss statt Flaeche. */
.wp-block-button.is-style-umriss .wp-block-button__link,
.dc-knopf-umriss .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--text);
  border: 1px solid var(--wp--preset--color--formularlinie);
  padding: 12px 26px;
}
.wp-block-button.is-style-umriss .wp-block-button__link:hover,
.dc-knopf-umriss .wp-block-button__link:hover {
  background: transparent;
  border-color: var(--wp--preset--color--akzent);
  color: var(--wp--preset--color--akzent-dunkel);
}

/* Textlink: kein Knopf, nur Schrift mit Unterstreichung. Entspricht den
   weiterfuehrenden Links im Entwurf ("Leistungen im Überblick →"). */
.wp-block-button.is-style-textlink .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--text-sekundaer);
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--linie);
  border-radius: 0;
  padding: 0 0 2px;
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: normal;
}
.wp-block-button.is-style-textlink .wp-block-button__link:hover {
  background: transparent;
  color: var(--wp--preset--color--text);
  border-bottom-color: var(--wp--preset--color--akzent);
}
.wp-block-button.is-style-textlink .wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--akzent);
  outline-offset: 3px;
}

/* Grosser Link fuer Telefonnummer und E-Mail, wie im Kontaktblock des
   Entwurfs: Forum 26px mit feiner Unterstreichung, kein Knopfkoerper. */
.wp-block-button.is-style-gross .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--text);
  font-family: var(--wp--preset--font-family--display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.2;
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--linie);
  border-radius: 0;
  padding: 0 0 3px;
}
.wp-block-button.is-style-gross .wp-block-button__link:hover {
  background: transparent;
  color: var(--wp--preset--color--akzent-dunkel);
  border-bottom-color: var(--wp--preset--color--akzent);
}
.wp-block-button.is-style-gross .wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--akzent);
  outline-offset: 3px;
}

/* ------------------------------------------------- Kontakt: Formularkarte --
   Im Entwurf sitzt das Formular auf der getoenten Flaeche mit Rahmen. */
.dc-formcard {
  background: var(--wp--preset--color--flaeche);
  border: 1px solid var(--wp--preset--color--linie);
  border-radius: 3px;
  padding: 40px 40px 44px;
}
.dc-formcard .dc-form-grid { max-width: none; gap: 26px 24px; }
.dc-formcard .dc-form-danke { min-height: 320px; border: 0; padding: 0; }
.dc-formcard .dc-danke-titel { font-size: 30px; }

/* Beschriftung ueber den grossen Links. */
.dc-kontaktlabel {
  margin: 0 0 5px;
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--wp--preset--color--text-sekundaer);
}
/* Die Abstaende um die Kontaktangaben stehen bewusst explizit, statt sich auf
   den Blockabstand zu verlassen: `margin: 0 0 18px` hatte den oberen Abstand
   auf null gesetzt, dadurch klebte "MOBIL" direkt am Absatz darueber
   (gemessen 0px statt der 34px des Entwurfs). */
.dc-kontaktblock { margin: 0; }
p + .dc-kontaktblock { margin-top: 34px; }
.dc-kontaktblock + .dc-kontaktblock { margin-top: 18px; }

@media (max-width: 899px) {
  .dc-formcard { padding: 28px 22px 32px; }
  .dc-formcard .dc-form-danke { min-height: 0; }
  .wp-block-button.is-style-gross .wp-block-button__link { font-size: 22px; }
}
@media (max-width: 559px) {
  .dc-formcard { padding: 26px 20px 30px; }
  .wp-block-button.is-style-gross .wp-block-button__link { font-size: 20px; }
}

/* ==========================================================================
   Kopfbereich
   ========================================================================== */
/* Die Kopfleiste bleibt beim Scrollen stehen.
   Wichtig: sticky gehoert an den Vorlagenteil, nicht an .dc-header. Ein
   klebendes Element bewegt sich nur im eigenen Elternelement, und das
   <header> ist genau so hoch wie die Leiste selbst (67px). Innen gesetzt
   scrollte die Leiste deshalb nach 67px mit aus dem Bild. */
.wp-site-blocks > header {
  position: sticky;
  top: 0;
  z-index: 30;
}

.dc-header {
  /* Bezugspunkt fuer die getoente Flaeche in ::before. */
  position: relative;
  background: transparent;
  border-bottom: 1px solid var(--wp--preset--color--linie);
  padding-inline: var(--dc-rand);
  --wp--style--global--content-size: 1116px;
}

/* Weichzeichner und Hintergrund liegen bewusst auf einem Pseudo-Element.
   Ein Element mit backdrop-filter wird zum Bezugsrahmen fuer alle
   position:fixed-Nachfahren. Stand der Filter auf .dc-header selbst, bezog
   sich das Overlay-Menue von WordPress auf die 51px hohe Kopfleiste statt
   auf das Fenster: es klappte auf, ueberlagerte die Seite aber nicht. */
.dc-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(251, 250, 249, .92);
  backdrop-filter: blur(10px);
}
.dc-header__inner {
  padding-block: 16px;
  gap: 28px;
}
.dc-header .wp-block-site-logo img { height: 32px; width: auto; display: block; }
.dc-header__nav { gap: 26px; }

/* Navigation: Schriftgroesse und Farben wie im Entwurf. */
.dc-header .wp-block-navigation {
  --navigation-layout-justification-setting: flex-end;
  font-size: 14px;
  font-weight: 400;
  gap: 26px;
}
/* Aufklapppfeil neben "Branchen" auf die Mitte der Beschriftung bringen.
   WordPress stellt den Pfeil als eigenen Knopf neben den Menuepunkt und laesst
   ihn auf der Grundlinie sitzen; er stand dadurch gut 3px zu tief. Erst die
   gemeinsame Achse, dann der kleine Ausgleich fuer die Schriftmetrik: die
   Mitte des Zeilenkastens liegt tiefer als die optische Mitte der Wortmitte. */
.dc-header .wp-block-navigation .wp-block-navigation-submenu {
  display: flex;
  align-items: center;
}
.dc-header .wp-block-navigation .wp-block-navigation__submenu-icon { padding: 0; }
.dc-header .wp-block-navigation__submenu-icon svg {
  display: block;
  position: relative;
  top: -0.23em;
}

.dc-header .wp-block-navigation a { color: var(--wp--preset--color--text-sekundaer); }
.dc-header .wp-block-navigation a:hover { color: var(--wp--preset--color--text); }
.dc-header .wp-block-navigation .wp-block-navigation-item__content:hover { text-decoration: none; }

/* Aufklappmenü "Branchen". */
.dc-header .wp-block-navigation .wp-block-navigation__submenu-container {
  min-width: 222px;
  background: var(--wp--preset--color--hintergrund);
  border: 1px solid var(--wp--preset--color--linie);
  border-radius: 2px;
  box-shadow: 0 14px 30px rgba(11, 6, 32, .10);
  padding: 6px 0;
}
/* WordPress setzt auf den Eintrag im Aufklappmenü `padding: .5em 1em`,
   gemessen 7px/14px statt der 9px/18px des Entwurfs. Die Regel liess sich
   ueber Spezifitaet nicht schlagen, auch nicht mit vier Klassen im Selektor.
   Deshalb hier ausnahmsweise `!important`, begrenzt auf diese eine Angabe. */
.dc-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 9px 18px !important;
  font-size: 14px;
  white-space: nowrap;
  /* Der Link fuellt die Zeile, damit die Hervorhebung beim Zeigen den ganzen
     Streifen einnimmt und nicht nur das Wort. */
  width: 100%;
  box-sizing: border-box;
}
/* Ohne das bleibt der Listeneintrag so breit wie sein Wort und die
   Hervorhebung endet mittendrin. */
.dc-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
  display: block;
  width: 100%;
}
.dc-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.dc-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
  background: var(--wp--preset--color--flaeche);
}

/* Kopf-Knopf ist kleiner als die Knoepfe im Inhalt. */
.dc-header__cta .wp-block-button__link {
  font-size: 13.5px;
  padding: 9px 20px;
  white-space: nowrap;
}

@media (max-width: 899px) {
  .dc-header__inner { padding-block: 10px; gap: 14px; }
  .dc-header__nav { gap: 12px; }
  .dc-header .wp-block-site-logo img { height: 26px; }
  /* Der Entwurf schiebt den Knopf ins Burger-Menü. Er bleibt hier sichtbar,
     weil die Vakanzanfrage das Ziel der Seite ist, wird aber kompakter. */
  .dc-header__cta .wp-block-button__link { font-size: 12.5px; padding: 8px 14px; }
}

@media (max-width: 400px) {
  .dc-header .wp-block-site-logo img { height: 22px; }
  .dc-header__cta .wp-block-button__link { font-size: 12px; padding: 8px 12px; }
}

/* ==========================================================================
   Fussbereich
   ========================================================================== */
.dc-footer {
  border-top: 1px solid var(--wp--preset--color--linie);
  padding: 64px var(--dc-rand) 40px;
  --wp--style--global--content-size: 1116px;
}

.dc-footcols {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 44px;
}
.dc-footcols > * { margin-block: 0; }

.dc-footmarke .wp-block-site-logo img { height: 26px; width: auto; display: block; }
.dc-footadresse {
  margin: 18px 0 20px;
  font-size: 14px;
  line-height: 1.7;
  /* 34ch brach mitten in "Executive Search" um. Die Zeile ist 40 Zeichen
     lang, der Umbruch soll allein am <br> stattfinden. */
  max-width: 44ch;
  text-wrap: pretty;
}

.dc-footsocial { gap: 18px; }
.dc-footsocial .wp-block-social-link { margin: 0; }
.dc-footsocial .wp-social-link svg { width: 18px; height: 18px; }

.dc-footlabel {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-gedaempft);
}
.dc-footspalte p:not(.dc-footlabel) { margin: 0 0 12px; font-size: 14px; }
.dc-footspalte p:last-child { margin-bottom: 0; }
.dc-footspalte a { color: var(--wp--preset--color--text-sekundaer); }
.dc-footspalte a:hover { color: var(--wp--preset--color--text); }

.dc-proofs { gap: 24px; margin-bottom: 32px; }
.dc-proofs .dc-badges img,
.dc-proofs .dc-innovator img,
.dc-proofs .dc-proseal img { height: 130px; width: auto; display: block; }
/* Das ProvenExpert-Siegel liegt als festes Bild im Theme und verlinkt auf das
   Bewertungsprofil. Es steht damit in derselben Zeile und derselben Hoehe wie
   die uebrigen Siegel, ohne dass ein fremdes Skript geladen werden muss. */
.dc-proseal { flex: 0 0 auto; margin: 0; }
.dc-proseal a { display: block; }

.dc-footunten {
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--wp--preset--color--linie);
}
.dc-footunten p { margin: 0; font-size: 12.5px; }
.dc-footunten a { color: var(--wp--preset--color--text-sekundaer); }
.dc-footunten a:hover { color: var(--wp--preset--color--text); }

@media (max-width: 899px) {
  .dc-footer { padding-block: 48px 32px; }
  /* Markenblock ueber die volle Breite, Linkspalten zu zweit. */
  .dc-footcols { grid-template-columns: 1fr 1fr; gap: 36px 32px; }
  .dc-footcols > :first-child { grid-column: 1 / -1; }
  /* Auf schmalen Schirmen brechen die Siegel um, deshalb mehr Luft zwischen
     den Zeilen. */
  .dc-proofs { flex-wrap: wrap; gap: 34px 18px; }
  .dc-proofs .dc-badges img,
  .dc-proofs .dc-innovator img,
  .dc-proofs .dc-proseal img { height: 96px; }
}

/* ==========================================================================
   Burger-Menü (Overlay der Core-Navigation)
   --------------------------------------------------------------------------
   Gestaltung nach dem Entwurf (responsive.css, Abschnitt "< 760px"):
   linksbuendig, volle Breite, jede Zeile mindestens 44px hoch mit feiner
   Trennlinie, Untermenue dauerhaft aufgeklappt und um 16px eingerueckt,
   kein Aufklapp-Pfeil.
   ========================================================================== */
.wp-block-navigation__responsive-container.is-menu-open { padding: 0; }

/* Die Kopfleiste richtet die Navigation rechtsbuendig aus. WordPress setzt
   dafuer auf dem Listenpunkt `align-items: flex-end`, mit derselben
   Spezifitaet wie eine eigene Regel und spaeter in der Kaskade. Im Overlay
   muss das zurueckgenommen werden, sonst kleben alle Eintraege rechts. */
.is-menu-open .wp-block-navigation__container,
.is-menu-open .wp-block-navigation-item {
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100%;
  /* Die Navigation traegt in der Kopfleiste 26px Abstand. Im Overlay
     trennen die Linien die Eintraege, zusaetzliche Luecken stoeren. */
  gap: 0 !important;
}

.is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100%;
  padding: 6px var(--dc-rand) 18px;
  box-sizing: border-box;
}

/* Zeilen wie im Entwurf: 44px Berührungsziel, feine Trennlinie. */
.is-menu-open .wp-block-navigation-item__content,
.is-menu-open .wp-block-navigation-submenu__toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 44px;
  padding: 4px 0;
  box-sizing: border-box;
  font-size: 16px;
  color: var(--wp--preset--color--text-sekundaer);
  border-bottom: 1px solid var(--wp--preset--color--linie-hell);
  background: transparent;
  text-align: left;
}
.is-menu-open .wp-block-navigation-submenu__toggle { border: 0; border-bottom: 1px solid var(--wp--preset--color--linie-hell); }
.is-menu-open .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--text); }

/* Untermenue: dauerhaft sichtbar, eingerueckt, ohne Karte und ohne Pfeil. */
.is-menu-open .wp-block-navigation__submenu-icon { display: none !important; }
.is-menu-open .wp-block-navigation__submenu-container {
  display: block !important;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 100%;
  min-width: 0 !important;
  margin: 0;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding-left: 16px;
  font-size: 15px;
}

.is-menu-open .wp-block-navigation__responsive-container-close {
  top: 14px;
  right: var(--dc-rand);
}

/* ------------------------------------------------------------------------
   Reihenfolge in der Kopfleiste auf schmalen Geraeten:
   Logo, Knopf, Menue-Symbol.
   ------------------------------------------------------------------------ */
@media (max-width: 899px) {
  .dc-header__nav { align-items: center; }
  .dc-header__nav .wp-block-navigation { order: 2; }
  .dc-header__cta { order: 1; }
}

/* ==========================================================================
   Einfache Textlinks: Unterstreichung statt Rahmen
   --------------------------------------------------------------------------
   Bisher lag auf jedem Link ein `:focus`-Rahmen in der Akzentfarbe. `:focus`
   greift auch beim Mausklick, deshalb blieb nach einem Klick ein roter Kasten
   um den Link stehen.

   Jetzt: beim Überfahren eine dezente Linie, beim Anklicken und bei
   Tastaturfokus eine rote. `:focus-visible` statt `:focus` heisst, die Maus
   hinterlaesst keinen bleibenden Zustand, die Tastaturbedienung bleibt aber
   sichtbar. Der Ersatz fuer den Rahmen darf nicht ersatzlos entfallen, sonst
   weiss bei Tastaturbedienung niemand mehr, wo er sich befindet.

   Umgesetzt mit border-bottom statt text-decoration, so wie im Entwurf.
   Die Linie liegt von Anfang an durchsichtig unter dem Text, dadurch
   verschiebt sich beim Ueberfahren nichts.

   Knoepfe behalten ihren Rahmen: dort gibt es keine Schrift zum Unterstreichen.
   ========================================================================== */
.dc-header .wp-block-navigation a,
.dc-header .wp-block-navigation-submenu__toggle,
.dc-footspalte a,
.dc-footunten a {
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}

.dc-header .wp-block-navigation a:hover,
.dc-header .wp-block-navigation-submenu__toggle:hover,
.dc-footspalte a:hover,
.dc-footunten a:hover {
  color: var(--wp--preset--color--text);
  border-bottom-color: var(--wp--preset--color--formularlinie);
}

.dc-header .wp-block-navigation a:active,
.dc-header .wp-block-navigation a:focus-visible,
.dc-header .wp-block-navigation-submenu__toggle:active,
.dc-header .wp-block-navigation-submenu__toggle:focus-visible,
.dc-footspalte a:active,
.dc-footspalte a:focus-visible,
.dc-footunten a:active,
.dc-footunten a:focus-visible {
  outline: none;
  color: var(--wp--preset--color--text);
  border-bottom-color: var(--wp--preset--color--akzent);
}

/* Die aktuell aufgerufene Seite bleibt dauerhaft rot unterstrichen. */
.dc-header .wp-block-navigation a[aria-current="page"],
.dc-header .wp-block-navigation .current-menu-item > a {
  color: var(--wp--preset--color--text);
  border-bottom-color: var(--wp--preset--color--akzent);
}

/* ---------------------------------------------------- Aufklappmenü ---------
   Im Aufklappmenü keine Unterstreichungen. Der Entwurf hebt die Zeile dort
   ueber eine getoente Flaeche hervor, das passt zu einer Liste in einer Karte
   besser als eine Linie unter jedem Eintrag.
   Die Regeln stehen eine Ebene spezifischer als die allgemeinen Linkzustaende
   darueber und setzen sich deshalb durch. */
.dc-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.dc-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.dc-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:active,
.dc-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible,
.dc-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current="page"] {
  border-bottom: 0;
}
.dc-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.dc-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
  outline: none;
  background: var(--wp--preset--color--flaeche);
  color: var(--wp--preset--color--text);
}
/* Angeklickt und aktuelle Seite: Text in der Akzentfarbe statt einer Linie. */
.dc-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:active,
.dc-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current="page"] {
  background: var(--wp--preset--color--flaeche);
  color: var(--wp--preset--color--akzent-dunkel);
}

/* Im Burger-Menue trennen bereits Linien die Zeilen. Dort waere eine zweite
   Linie direkt darueber unruhig, deshalb nur Farbwechsel und eine rote
   Trennlinie im aktiven Zustand. */
.is-menu-open .wp-block-navigation a,
.is-menu-open .wp-block-navigation-submenu__toggle {
  border-bottom: 1px solid var(--wp--preset--color--linie-hell);
  padding-bottom: 0;
}
.is-menu-open .wp-block-navigation a:hover {
  color: var(--wp--preset--color--text);
  border-bottom-color: var(--wp--preset--color--formularlinie);
}
.is-menu-open .wp-block-navigation a:active,
.is-menu-open .wp-block-navigation a:focus-visible {
  outline: none;
  color: var(--wp--preset--color--text);
  border-bottom-color: var(--wp--preset--color--akzent);
}

/* ==========================================================================
   Sektionen der Branchenseiten
   ========================================================================== */

/* -------------------------------------------------- Brotkrume ueber Hero -- */
.dc-krume {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 22px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.dc-krume p { margin: 0; }
.dc-krume a { color: var(--wp--preset--color--text-sekundaer); }
.dc-krume .dc-krume__trenner { color: var(--wp--preset--color--formularlinie); font-weight: 400; }
.dc-krume .dc-krume__hier { color: var(--wp--preset--color--akzent-dunkel); }

/* ------------------------------------------------------ Hero Branchenseite */
/* Bewusst die Werte des Entwurfs. Die kleinere Ueberschrift und das groessere
   Bild gelten nur fuer den Hero der Startseite, wo Text und Portrait
   nebeneinander stehen. Hier traegt ein Querformat-Bild die rechte Spalte,
   das Verhaeltnis stimmt schon. */
.dc-branchenhero { padding-block: 56px 88px; }
.dc-branchenhero .wp-block-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  min-height: 480px;
}
.dc-branchenhero .wp-block-column { flex-basis: auto !important; }
.dc-branchenhero h1 {
  font-size: clamp(2.4rem, 3.2vw + 1.3rem, 4rem);
  line-height: 1.05;
  margin: 0 0 24px;
  text-wrap: balance;
}
.dc-branchenhero__lead {
  font-size: 18px;
  max-width: 50ch;
  margin: 0 0 34px;
  text-wrap: pretty;
}
.dc-branchenhero__bild img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  box-shadow: 0 30px 50px rgba(11, 6, 32, .16);
}

/* ------------------------------------- Zweispalter: Label, Aussage, Text -- */
/* Alle Abschnitts-Label laufen im selben Format wie die uebrigen Taglines
   der Seite: Open Sans, 12,5px, Versalien, .08em Laufweite. Vorher hatten
   die Branchenseiten .09em und das Label "Warum DELTACON" stand sogar in
   Forum, weil es ein h2 ist und die Ueberschriftenregel griff. */
/* Das h2 im Selektor ist noetig, nicht Kosmetik: Abschnittsregeln wie
   `.dc-bildtext h2` sind spezifischer als eine reine Klasse und haben das
   Label sonst auf Ueberschriftengroesse gesetzt (gemessen: 36,6px statt
   12,5px im Block "Wer wir sind"). */
.dc-aussage__label,
h2.dc-aussage__label {
  margin: 0 0 30px;
  font-family: var(--wp--preset--font-family--text);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--wp--custom--label--letter-spacing);
  text-transform: uppercase;
  color: var(--wp--preset--color--akzent-dunkel);
}
/* Der Satz steht in .dc-aussage__kopf, einer Gruppe im Flow-Layout. Direkt
   im Constrained-Layout wuerde WordPress ihn zentrieren, weil er schmaler
   als die Inhaltsbreite ist (gemessen: margin-left 216px). Im Flow-Layout
   greift diese Regel nicht, deshalb hier kein !important noetig. */
.dc-aussage__satz {
  margin: 0 0 44px;
  /* Der Entwurf setzt diese Aussage in Forum 600. Ohne die Angabe erbt der
     Absatz Open Sans, weil er kein Ueberschriftenelement ist. */
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: clamp(1.7rem, 1.9vw + 1rem, 2.6rem);
  line-height: 1.2;
  max-width: 34ch;
  color: var(--wp--preset--color--text);
  text-wrap: balance;
}
.dc-aussage__spalten {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 72px;
  padding-top: 34px;
  border-top: 1px solid var(--wp--preset--color--linie);
}
.dc-aussage__spalten > * { margin-block: 0; }
.dc-aussage__spalten p { margin: 0; font-size: 17px; text-wrap: pretty; }

/* ------------------------------------------------------- Positionsliste -- */
.dc-positionen {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 0 72px;
  align-items: start;
}
.dc-positionen > * { margin-block: 0; }
.dc-positionen__intro { margin: 0; font-size: 15px; max-width: 30ch; }
.dc-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 72ch;
}
.dc-liste li {
  padding: 18px 0;
  border-top: 1px solid var(--wp--preset--color--linie);
  font-size: 16.5px;
}
.dc-liste li:last-child { border-bottom: 1px solid var(--wp--preset--color--linie); }
.dc-liste strong { color: var(--wp--preset--color--text); }

/* --------------------------------------------- Zentrierte Argumentliste -- */
.dc-argument {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.dc-argument > * { margin-block: 0; }
.dc-argument__label,
h2.dc-argument__label {
  margin: 0 0 22px;
  font-family: var(--wp--preset--font-family--text);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--wp--custom--label--letter-spacing);
  text-transform: uppercase;
  color: var(--wp--preset--color--akzent-dunkel);
}
/* Breiter als im Entwurf (dort 32ch und 58ch). Mittig gesetzter Text auf so
   schmaler Spalte bricht in sehr viele kurze Zeilen und wirkt gedraengt. */
.dc-argument__satz {
  margin: 0 0 44px;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: clamp(1.7rem, 2vw + 1rem, 2.6rem);
  line-height: 1.22;
  max-width: 44ch;
  color: var(--wp--preset--color--text);
  text-wrap: balance;
}
.dc-argument__text { margin: 0; font-size: 17px; max-width: 72ch; text-wrap: pretty; }

/* ----------------------------------------------------------- CTA-Band ---- */
.dc-ctaband {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  flex-wrap: wrap;
}
.dc-ctaband > * { margin-block: 0; }
.dc-ctaband h2 {
  margin: 0 0 14px;
  font-size: clamp(1.9rem, 2vw + 1.2rem, 2.7rem);
  line-height: 1.15;
  max-width: 26ch;
}
.dc-ctaband .dc-eyebrow { margin: 0 0 16px; }
.dc-ctaband__text { margin: 0; font-size: 16px; max-width: 46ch; }
.dc-ctaband__aktion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
/* Wie beim zentrierten Band: Abstand kommt aus gap, nicht aus dem Blockabstand,
   sonst stehen Knopf und Telefonlink 42px statt 18px auseinander. */
.dc-ctaband__aktion > * { margin-block: 0; }

/* ---------------------------------------------------------- Querverweise -- */
.dc-verweise {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 0 72px;
  align-items: start;
}
.dc-verweise > * { margin-block: 0; }
.dc-verweise__liste { display: flex; flex-direction: column; }
.dc-verweise__liste p { margin: 0; }
/* Gleiche Groesse wie die Kontaktangaben im Kontaktblock der Startseite:
   Forum 26px. Die Verweise sind der Absprung von der Seite, sie duerfen
   dasselbe Gewicht haben wie Telefon und E-Mail. */
.dc-verweise__liste a {
  display: block;
  padding: 18px 0;
  border-top: 1px solid var(--wp--preset--color--linie);
  font-family: var(--wp--preset--font-family--display);
  font-size: 26px;
  line-height: 1.25;
  color: var(--wp--preset--color--text);
}
.dc-verweise__liste a:hover { color: var(--wp--preset--color--akzent-dunkel); }
.dc-verweise__liste strong { color: var(--wp--preset--color--akzent); font-weight: 400; }

/* Kernsatz im Block „Wer wir sind“, etwas kleiner als eine Abschnitts-
   ueberschrift, weil daneben ein Portrait steht. */
.dc-werwirsind__satz {
  margin: 0 0 22px;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: clamp(1.7rem, 1.6vw + 1.1rem, 2.3rem);
  line-height: 1.16;
  max-width: 24ch;
  color: var(--wp--preset--color--text);
}

@media (max-width: 899px) {
  /* Gleicher Anlauf wie beim Seitenkopf der uebrigen Unterseiten, damit die
     erste Zeile auf jeder Seite auf derselben Hoehe beginnt. */
  .dc-branchenhero { padding-block: 32px 56px; }
  .dc-branchenhero .wp-block-columns { grid-template-columns: 1fr; gap: 36px; min-height: 0; }
  .dc-aussage__spalten { grid-template-columns: 1fr; gap: 20px; }
  .dc-positionen,
  .dc-verweise { grid-template-columns: 1fr; row-gap: 24px; }
  .dc-ctaband { flex-direction: column; align-items: flex-start; gap: 28px; }
}

/* ==========================================================================
   Sektionen der übrigen Seiten
   ========================================================================== */

/* -------------------------------------------------------------- Seitenkopf */
.dc-seitenkopf { padding-block: 88px 72px; }
.dc-seitenkopf .dc-eyebrow { letter-spacing: .1em; margin-bottom: 24px; }
.dc-seitenkopf .wp-block-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 56px;
  align-items: end;
}
.dc-seitenkopf .wp-block-column { flex-basis: auto !important; margin-block: 0; }
.dc-seitenkopf h1 {
  margin: 0;
  font-size: clamp(2.4rem, 3vw + 1.3rem, 3.9rem);
  line-height: 1.06;
  text-wrap: balance;
}
.dc-seitenkopf__lead {
  margin: 0 0 8px;
  font-size: 18px;
  text-wrap: pretty;
}

/* Bildband unter dem Seitenkopf. Seitenrand und Inhaltsbreite kommen aus der
   gemeinsamen Regel ganz oben, damit die Kante mit allen anderen Sektionen
   fluchtet. */
.dc-bildband img {
  width: 100%;
  height: auto;
  aspect-ratio: 1173 / 279;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  border-radius: 3px;
}

/* ---------------------------------------- Leere Absaetze aus dem Editor ----
   Speichert jemand eine Seite, deren Blockmarkup Leerzeilen zwischen den
   Bloecken enthaelt, macht WordPress daraus leere Absaetze. Sie sind 0 Pixel
   hoch und faellen im Fliesstext nicht auf, besetzen in den Rastern unten
   aber eigene Zellen und schieben die Spalten untereinander. */
.dc-section p:empty { display: none; }

/* --------------------------------------------- Nummerierter Abschnittskopf */
.dc-nr {
  display: block;
  margin: 0 0 12px;
  font-family: var(--wp--preset--font-family--display);
  font-size: 15px;
  color: var(--wp--preset--color--akzent);
}
.dc-abschnitt__titel {
  margin: 0;
  font-size: clamp(1.8rem, 1.4vw + 1.2rem, 2.4rem);
  line-height: 1.12;
}

/* ---------------------------------------------------- Unternehmensabschnitt */
.dc-unternehmen {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(260px, .95fr);
  gap: 0 72px;
  align-items: start;
}
.dc-unternehmen > * { margin-block: 0; }
.dc-unternehmen__text { margin-top: 28px; max-width: 62ch; }
.dc-unternehmen__text p { font-size: 17.5px; text-wrap: pretty; }
.dc-unternehmen__text strong { color: var(--wp--preset--color--text); }
/* Die Fakten stehen rechts neben dem Text, Beschriftung ueber dem Wert. */
.dc-unternehmen__fakten .dc-fakten { margin-top: 28px; }

/* Fakten als Beschriftung und Wert nebeneinander. */
.dc-fakten {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
}
.dc-fakten li {
  display: grid;
  grid-template-columns: minmax(96px, 120px) 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--wp--preset--color--linie);
}
.dc-fakten li:last-child { border-bottom: 1px solid var(--wp--preset--color--linie); }
.dc-fakten .dc-fakten__k {
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-sekundaer);
}
.dc-fakten .dc-fakten__v {
  font-family: var(--wp--preset--font-family--display);
  font-size: 17px;
  line-height: 1.35;
  color: var(--wp--preset--color--text);
}

/* ------------------------------------------- Die Gruppe: Netzwerk und Karte
   Gleiches Raster wie der Unternehmensabschnitt, damit beide Bloecke auf der
   Seite "Ueber uns" auf derselben Kante sitzen. */
.dc-gruppe {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(260px, .95fr);
  gap: 0 72px;
  align-items: start;
}
.dc-gruppe > * { margin-block: 0; }
.dc-gruppe__text { max-width: 62ch; }
.dc-gruppe__text p { font-size: 17.5px; text-wrap: pretty; }
.dc-gruppe__text .dc-abschnitt__titel { margin-bottom: 24px; }
.dc-gruppe__text strong { color: var(--wp--preset--color--text); }
.dc-gruppe__label {
  margin: 40px 0 0;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-sekundaer);
}
.dc-gruppe .dc-fakten { margin-top: 14px; }
/* In der schmalen Kartenspalte steht die Beschriftung ueber dem Wert, sonst
   bliebe fuer die neun deutschen Staedte zu wenig Zeilenbreite. */
.dc-gruppe__karte .dc-fakten li,
.dc-unternehmen__fakten .dc-fakten li { grid-template-columns: 1fr; gap: 6px; }
.dc-gruppe__vorteil { margin-top: 32px; }
.dc-gruppe__karte img { width: 100%; height: auto; display: block; }

/* ------------------------------------------------------------ Personenprofil */
.dc-person {
  display: grid;
  grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr);
  gap: 0 72px;
  align-items: start;
}
.dc-person > * { margin-block: 0; }
.dc-person__marke {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 28px;
}
.dc-person__marke p { margin: 0; }
.dc-person__nr { font-family: var(--wp--preset--font-family--display); font-size: 15px; color: var(--wp--preset--color--akzent); }
.dc-person__rolle {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-sekundaer);
}
.dc-person h2 {
  margin: 0 0 10px;
  font-size: clamp(2.1rem, 2.4vw + 1.1rem, 3.1rem);
  line-height: 1.06;
}
.dc-person__funktion {
  margin: 0 0 34px;
  font-size: 13.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-sekundaer);
}
/* Hervorgehobener Kernsatz mit roter Kante. */
.dc-merksatz {
  margin: 0 0 30px;
  padding-left: 22px;
  border-left: 2px solid var(--wp--preset--color--akzent);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.25rem, 1.1vw + .85rem, 1.6rem);
  line-height: 1.3;
  color: var(--wp--preset--color--text);
  text-wrap: pretty;
}
.dc-person p:not(.dc-merksatz):not(.dc-person__funktion) { font-size: 16px; text-wrap: pretty; }

/* ------------------------------------------------------ Zweispalter schmal */
.dc-schmalspalter {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 0 72px;
  align-items: start;
}
.dc-schmalspalter > * { margin-block: 0; }
.dc-grossaussage {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.3rem, 1.2vw + .9rem, 1.75rem);
  line-height: 1.35;
  color: var(--wp--preset--color--text);
  text-wrap: pretty;
}

/* ------------------------------------------------------------- Standorte -- */
.dc-standorte {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 72px;
}
.dc-standorte > * { margin-block: 0; }
.dc-standort__k {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-gedaempft);
}
.dc-standort__ort {
  margin: 0 0 10px;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.6rem, 1.3vw + 1rem, 2.1rem);
  line-height: 1.15;
  color: var(--wp--preset--color--text);
}
.dc-standort__adresse { margin: 0; font-size: 16px; line-height: 1.7; }

/* ------------------------------------------------------------ Rechtstext -- */
.dc-rechtstext {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 0 72px;
  align-items: start;
}
.dc-rechtstext > * { margin-block: 0; }
.dc-rechtstext__inhalt { max-width: 74ch; }
.dc-rechtstext__inhalt h3 {
  margin: 32px 0 10px;
  font-family: var(--wp--preset--font-family--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--wp--preset--color--text);
}
.dc-rechtstext__inhalt h3:first-child { margin-top: 0; }
.dc-rechtstext__inhalt p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.7; }
.dc-rechtstext__inhalt p:last-child { margin-bottom: 0; }

@media (max-width: 899px) {
  /* Siehe .dc-branchenhero: derselbe Anlauf auf allen Unterseiten. */
  .dc-seitenkopf { padding-block: 32px 40px; }
  .dc-seitenkopf .wp-block-columns { grid-template-columns: 1fr; gap: 24px; }
  .dc-unternehmen,
  .dc-gruppe,
  .dc-person,
  .dc-schmalspalter,
  .dc-rechtstext { grid-template-columns: 1fr; row-gap: 32px; }
  .dc-standorte { grid-template-columns: 1fr; row-gap: 36px; }
  .dc-gruppe__karte { max-width: 420px; }
  .dc-bildband img { aspect-ratio: 16 / 9; }
}

/* ------------------------------------------------- Angaben im Impressum ---
   Beschriftung ueber dem Wert, jede Angabe durch eine Linie getrennt. */
.dc-angaben > div {
  padding: 20px 0;
  border-top: 1px solid var(--wp--preset--color--linie);
}
.dc-angaben > div:last-child { border-bottom: 1px solid var(--wp--preset--color--linie); }
.dc-angaben .dc-angabe__k {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-sekundaer);
}
.dc-angaben .dc-angabe__v {
  display: block;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--wp--preset--color--text);
}
.dc-angaben a { color: var(--wp--preset--color--text); border-bottom: 1px solid var(--wp--preset--color--linie); }
.dc-angaben a:hover { border-bottom-color: var(--wp--preset--color--akzent); }

/* ==========================================================================
   Sektionen der Methode- und Leistungsseite
   ========================================================================== */

/* Kopf aus Label und Kernaussage, linksbuendig.
   Bewusst ohne max-width-Angabe: WordPress setzt im Constrained-Layout die
   Inhaltsbreite auf die Kinder, ein `max-width: none` haette den Block auf
   die volle Polsterbreite gezogen und ihn 50px zu weit links stehen lassen. */
.dc-blockkopf .dc-eyebrow { margin: 0 0 20px; }
.dc-blockkopf__satz {
  margin: 0 0 48px;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: clamp(1.8rem, 1.6vw + 1.1rem, 2.4rem);
  line-height: 1.2;
  max-width: 34ch;
  color: var(--wp--preset--color--text);
  text-wrap: balance;
}

/* ------------------------------------------------- Vorteile, zweispaltig -- */
.dc-vorteile {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 64px;
}
.dc-vorteile > * {
  margin-block: 0;
  padding: 26px 0;
  border-top: 1px solid var(--wp--preset--color--linie);
}
.dc-vorteil__titel {
  margin: 0 0 8px;
  font-family: var(--wp--preset--font-family--display);
  font-size: 19px;
  line-height: 1.3;
  color: var(--wp--preset--color--text);
}
.dc-vorteil__text { margin: 0; font-size: 15px; }

/* ------------------------------------------- Nummerierte Prozessliste ----- */
.dc-schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 60ch;
}
.dc-schritte li {
  position: relative;
  padding: 20px 0 20px 52px;
  border-top: 1px solid var(--wp--preset--color--linie);
  font-size: 15.5px;
  counter-increment: dc-schritt;
}
.dc-schritte li::before {
  content: "0" counter(dc-schritt);
  position: absolute;
  left: 0;
  top: 20px;
  font-family: var(--wp--preset--font-family--display);
  font-size: 15px;
  color: var(--wp--preset--color--akzent);
}
.dc-schritte { counter-reset: dc-schritt; }
.dc-schritte strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400;
  font-size: 18px;
  color: var(--wp--preset--color--text);
}

/* Zweispalter: Kopf links, Liste rechts. */
.dc-prozess {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 72px;
  align-items: start;
}
.dc-prozess > * { margin-block: 0; }
.dc-prozess .dc-blockkopf__satz { margin-bottom: 20px; max-width: none; }
.dc-prozess__intro { margin: 0; font-size: 16.5px; max-width: 48ch; }

/* Bild links, Text mit Liste rechts. */
.dc-saeulen {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 0 72px;
  align-items: start;
}
.dc-saeulen > * { margin-block: 0; }
.dc-saeulen img { width: 100%; height: auto; display: block; }
.dc-saeulen .dc-blockkopf__satz { margin-bottom: 20px; }
.dc-saeulen__intro { margin: 0 0 36px; font-size: 17px; text-wrap: pretty; }

/* Kopfzeile mit Siegel rechts. */
.dc-siegelkopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px 56px;
  align-items: end;
  margin-bottom: 48px;
}
.dc-siegelkopf > * { margin-block: 0; }
.dc-siegelkopf .dc-blockkopf__satz { margin-bottom: 0; }
.dc-siegelkopf img { height: 104px; width: auto; max-width: 100%; object-fit: contain; display: block; }

/* --------------------------------------------------- CTA, zentriert ------- */
.dc-ctazentriert {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.dc-ctazentriert > * { margin-block: 0; }
.dc-ctazentriert h2 {
  margin: 0 0 20px;
  font-size: clamp(1.9rem, 2vw + 1.2rem, 2.7rem);
  line-height: 1.2;
  max-width: 28ch;
  text-wrap: balance;
}
.dc-ctazentriert__text { margin: 0 0 36px; font-size: 17px; max-width: 56ch; text-wrap: pretty; }
.dc-ctazentriert__aktion {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
}
/* Der Blockabstand von WordPress zaehlt beim Zentrieren mit: align-items
   richtet die Randbox aus, nicht den sichtbaren Kasten. Der Telefonlink sass
   dadurch 12px (halbe Marge) tiefer als der Knopf. Abstand macht hier gap. */
.dc-ctazentriert__aktion > * { margin-block: 0; }
.dc-ctazentriert .dc-hero__hinweis { margin-top: 14px; text-align: center; }

@media (max-width: 899px) {
  .dc-vorteile { grid-template-columns: 1fr; }
  .dc-prozess,
  .dc-saeulen { grid-template-columns: 1fr; row-gap: 36px; gap: 36px; }
  .dc-siegelkopf { grid-template-columns: 1fr; align-items: start; margin-bottom: 32px; }
  .dc-siegelkopf img { height: 80px; }
  .dc-blockkopf__satz { margin-bottom: 32px; }
}

/* ------------------------------------------------- Leistungsblock mit Bild */
.dc-leistungsblock {
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  gap: 0 64px;
  align-items: center;
}
.dc-leistungsblock--bildrechts { grid-template-columns: 1fr minmax(300px, 420px); }
.dc-leistungsblock > * { margin-block: 0; }
.dc-leistungsblock img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
}
.dc-leistungsblock__titel {
  margin: 0 0 22px;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: clamp(1.6rem, 1.3vw + 1rem, 2.1rem);
  line-height: 1.22;
  max-width: 28ch;
  color: var(--wp--preset--color--text);
}
.dc-leistungsblock__punkte { display: grid; gap: 16px; }
.dc-leistungsblock__punkte p { margin: 0; font-size: 15.5px; }
.dc-leistungsblock__punkte strong { color: var(--wp--preset--color--text); }

@media (max-width: 899px) {
  .dc-leistungsblock,
  .dc-leistungsblock--bildrechts { grid-template-columns: 1fr; row-gap: 32px; }
  /* Einspaltig steht die Grafik unter dem Text, sie erlaeutert ihn. */
  .dc-leistungsblock .dc-leistungsblock__bild { order: 2; }
  .dc-leistungsblock .dc-leistungsblock__text { order: 1; }
  .dc-leistungsblock img { max-width: 380px; }
}