/* ==========================================================================
   Bausteine: Container, Buttons, Sektionsköpfe, Hero, Karten, Bänder
   ========================================================================== */

/* Ein Breitenmaß für alle Sektionen. */
.db-wrap {
    max-width: var(--db-container);
    margin-inline: auto;
    padding-inline: var(--db-gutter);
}

/* GeneratePress' Container auf dieselbe Kante bringen. */
.site-content .content-area,
.inside-article {
    max-width: 100%;
}

/* ---------- Buttons ---------- */

.db-btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Der Punkt vor der Beschriftung ersetzt jedes Icon. */
.db-btn::before {
    content: "";
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
}

.db-btn--ink {
    background: var(--db-ink);
    border-color: var(--db-ink);
    color: #FBFAF7;
}

.db-btn--ink:hover,
.db-btn--ink:focus-visible {
    background: transparent;
    color: var(--db-ink);
    border-color: var(--db-ink);
}

.db-btn--line {
    background: transparent;
    border-color: currentColor;
    color: inherit;
}

.db-btn--line:hover,
.db-btn--line:focus-visible {
    background: var(--db-ink);
    border-color: var(--db-ink);
    color: #FBFAF7;
}

.db-btn--light {
    background: #FBFAF7;
    border-color: #FBFAF7;
    color: var(--db-ink);
}

.db-btn--light:hover,
.db-btn--light:focus-visible {
    background: transparent;
    color: #FBFAF7;
    border-color: #FBFAF7;
}

/* Bestandsklassen aus der ersten Fassung weiterreichen. */
.db-btn--cta { background: var(--db-ink); border-color: var(--db-ink); color: #FBFAF7; }
.db-btn--cta:hover { background: transparent; color: var(--db-ink); }
.db-btn--ghost { background: transparent; border-color: currentColor; color: inherit; }
.db-btn--ghost:hover { background: var(--db-ink); border-color: var(--db-ink); color: #FBFAF7; }
.db-btn--ghost-light { background: transparent; border-color: rgb(255 255 255 / .5); color: #fff; }
.db-btn--ghost-light:hover { background: #fff; color: var(--db-ink); border-color: #fff; }

/* Textlink mit Pfeil */
.db-textlink {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: .15rem;
}

.db-textlink::after {
    content: "\2197";
    font-size: .9em;
    transition: translate .15s ease;
}

.db-textlink:hover::after {
    translate: .15em -.15em;
}

/* ---------- Sektionskopf ---------- */

.db-secthead {
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.db-secthead__kicker {
    margin: 0 0 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--db-line);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--db-text-muted);
}

.db-secthead__title {
    margin: 0;
    max-width: 16ch;
}

.db-secthead__text {
    margin: 1.5rem 0 0;
    color: var(--db-text-muted);
    font-size: 1.0625rem;
}

/* ---------- Brotkrumen ---------- */

.db-crumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .6rem;
    margin: 0 0 2rem;
    padding: 0;
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--db-text-muted);
}

.db-crumbs li + li::before {
    content: "/";
    margin-right: .6rem;
    opacity: .5;
}

.db-crumbs a {
    color: inherit;
    text-decoration: none;
}

.db-crumbs a:hover {
    color: var(--db-text);
}

/* ---------- Seitenkopf ---------- */

/* Dunkle Fläche wie der Hero, mit denselben Farbschleiern. Der Header
   liegt durchsichtig darüber (negativer Rand, Polsterung gibt den Platz
   zurück) – die Fläche wird dadurch nicht höher. */
.db-pagehead {
    position: relative;
    overflow: hidden;
    background: var(--db-signal);
    color: var(--db-signal-ink);
    margin-top: calc(-1 * var(--db-header-h, 5rem));
    padding-top: var(--db-header-h, 5rem);
}

.db-pagehead .db-hero__blob { opacity: .38; }
.db-pagehead .db-hero__blob--2 { opacity: .22; }

.db-pagehead__mark {
    position: absolute;
    right: calc(-1 * var(--db-gutter));
    bottom: -22%;
    width: min(26rem, 40vw);
    aspect-ratio: 1;
    background: var(--db-pagehead-mark) no-repeat center / contain;
    opacity: .1;
    pointer-events: none;
}

.db-pagehead__in {
    position: relative;
    z-index: 1;
    max-width: var(--db-container);
    margin-inline: auto;
    padding: clamp(3rem, 7vw, 6rem) var(--db-gutter) clamp(2.5rem, 5vw, 4rem);
}

.db-pagehead .db-crumbs ol { color: var(--db-on-deep-muted); }
.db-pagehead .db-crumbs a:hover { color: var(--db-signal-ink); }

.db-pagehead__kicker {
    margin: 0 0 1.25rem;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--db-on-deep-muted);
}

.db-pagehead__title {
    margin: 0;
    max-width: 14ch;
    font-size: clamp(2.6rem, 7vw, 6.5rem);
    color: var(--db-signal-ink);
}

.db-pagehead__intro {
    margin: 2rem 0 0;
    max-width: 46ch;
    font-size: 1.125rem;
    color: var(--db-on-deep-muted);
}

.db-pagehead__jump {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 2.5rem;
}

.db-pagehead__jump a {
    padding: .5rem 1.1rem;
    border: 1px solid rgb(255 255 255 / .35);
    border-radius: 999px;
    font-size: .875rem;
    color: var(--db-signal-ink);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.db-pagehead__jump a:hover {
    background: var(--db-signal-ink);
    border-color: var(--db-signal-ink);
    color: var(--db-ink);
}

/* Feine Linie am Fuß, wie beim Hero. */
.db-pagehead::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgb(255 255 255 / .12);
}

/* ---------- Hero ---------- */

/* Auf der dunklen Fläche sind die Knopf-Rollen vertauscht: der
   Hauptknopf ist hell, der zweite nur eine Linie. */
.db-hero .db-btn--ink {
    background: var(--db-signal-ink);
    border-color: var(--db-signal-ink);
    color: var(--db-ink);
}

.db-hero .db-btn--ink:hover,
.db-hero .db-btn--ink:focus-visible {
    background: transparent;
    color: var(--db-signal-ink);
    border-color: var(--db-signal-ink);
}

.db-hero .db-btn--line {
    border-color: rgb(255 255 255 / .35);
    color: var(--db-signal-ink);
}

.db-hero .db-btn--line:hover,
.db-hero .db-btn--line:focus-visible {
    background: var(--db-signal-ink);
    border-color: var(--db-signal-ink);
    color: var(--db-ink);
}

.db-hero {
    position: relative;
    background: var(--db-signal);
    color: var(--db-signal-ink);
    overflow: hidden;
}

.db-hero--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--db-hero-image) no-repeat center / cover;
    mix-blend-mode: multiply;
    opacity: .2;
    pointer-events: none;
}

.db-hero__in {
    position: relative;
    max-width: var(--db-container);
    margin-inline: auto;
    padding: clamp(3.5rem, 9vw, 8rem) var(--db-gutter) clamp(2.5rem, 4vw, 3.5rem);
}

.db-hero__kicker {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 clamp(2rem, 5vw, 4rem);
    font-size: .875rem;
    color: var(--db-signal-ink);
}

.db-hero__badge {
    padding: .3rem .8rem;
    background: var(--db-brand-orange);
    border-radius: 999px;
    color: #12161A;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.db-hero__title {
    margin: 0;
    /* Die Zeile darf großzügig laufen – der Umbruch ist Teil der
       Gestaltung, deshalb kein enges Maß. */
    max-width: 15ch;
    color: var(--db-signal-ink);
}

.db-hero__title em {
    font-style: italic;
}

.db-hero__body {
    display: grid;
    gap: 2rem;
    margin-top: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 860px) {
    .db-hero__body {
        grid-template-columns: minmax(0, 34ch) auto;
        align-items: end;
        justify-content: space-between;
        gap: 3rem;
    }
}

.db-hero__lead {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
}

.db-hero__actions {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

/* Kennzahlen auf einer Haarlinie – dieselbe Idee wie im Sektionskopf. */
.db-hero__proof {
    list-style: none;
    margin: clamp(3rem, 6vw, 5rem) 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid rgb(255 255 255 / .18);
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.db-hero__proof-value {
    display: block;
    font-family: var(--db-font-display);
    font-weight: 400;
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    line-height: 1;
}

.db-hero__proof-label {
    display: block;
    margin-top: .5rem;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--db-on-deep-muted);
}

/* ---------- Leistungen: Liste statt Karten ---------- */

/* Große Zeilen mit Haarlinien dazwischen. Karten mit Rahmen und
   Schatten zerhacken die Fläche; Linien halten sie zusammen. */
.db-services__grid {
    display: grid;
    border-top: 1px solid var(--db-line);
}

.db-card {
    display: grid;
    gap: .5rem 3rem;
    padding: clamp(1.75rem, 3vw, 2.5rem) 0;
    border-bottom: 1px solid var(--db-line);
    color: inherit;
    text-decoration: none;
    transition: padding-inline .2s ease, background-color .2s ease;
}

@media (min-width: 800px) {
    .db-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) auto;
        align-items: baseline;
    }
}

a.db-card:hover,
a.db-card:focus-visible {
    background: var(--db-bg-alt);
    padding-inline: clamp(1rem, 2vw, 2rem);
}

.db-card__icon {
    display: none;
}

.db-card__kicker {
    display: block;
    order: -1;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--db-text-muted);
}

@media (min-width: 800px) {
    .db-card__kicker {
        order: 0;
        grid-row: 1;
        grid-column: 3;
        text-align: right;
    }
}

.db-card__title {
    margin: 0;
    font-family: var(--db-font-display);
    font-weight: 400;
    font-size: clamp(1.75rem, 3.2vw, 2.6rem);
    line-height: 1.02;
    letter-spacing: -.015em;
}

.db-card__text {
    margin: 0;
    color: var(--db-text-muted);
    font-size: 1rem;
    max-width: 46ch;
}

.db-card__more {
    display: none;
}

.db-services__more,
.db-work__more,
.db-news__more {
    margin: 3rem 0 0;
}

/* ---------- Referenzen ---------- */

.db-work {
    background: var(--db-bg-alt);
}

.db-work__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.db-work__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.db-work__media {
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--db-bg);
    overflow: hidden;
}

.db-work__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale .4s ease;
}

.db-work__link:hover .db-work__img {
    scale: 1.02;
}

.db-work__body {
    display: block;
    padding-top: 1.25rem;
}

.db-work__meta {
    display: block;
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--db-text-muted);
}

.db-work__title {
    display: block;
    margin: .5rem 0 .6rem;
    font-family: var(--db-font-display);
    font-weight: 400;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    line-height: 1.05;
    letter-spacing: -.01em;
}

.db-work__link:hover .db-work__title {
    text-decoration: underline;
    text-underline-offset: .12em;
}

.db-work__text {
    display: block;
    color: var(--db-text-muted);
    font-size: .9375rem;
}

.db-work__tag {
    display: inline-block;
    margin-top: 1rem;
    padding: .2rem .7rem;
    border: 1px solid var(--db-line-strong);
    border-radius: 999px;
    font-size: .6875rem;
    letter-spacing: .06em;
    color: var(--db-text-muted);
}

/* ---------- Kundenstimmen ---------- */

/* Mehrspaltensatz statt Grid: unterschiedlich lange Zitate füllen die
   Spalten gleichmäßig, kein einsamer Nachzügler in einer neuen Zeile. */
.db-voices__grid {
    columns: 1;
    column-gap: clamp(1.25rem, 2.5vw, 2rem);
}

@media (min-width: 760px) {
    .db-voices__grid { columns: 2; }
}

@media (min-width: 1280px) {
    .db-voices__grid { columns: 3; }
}

.db-voice {
    position: relative;
    break-inside: avoid;
    margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--db-bg-alt);
    color: var(--db-text);
}

/* Erste Karte dunkel – ein Ankerpunkt in der Fläche. */
.db-voice:first-child {
    background: var(--db-ink);
    color: var(--db-on-deep);
}

.db-voice__mark {
    display: block;
    font-family: var(--db-font-display);
    font-weight: 700;
    font-size: 4.5rem;
    line-height: .55;
    height: .55em;
    margin-bottom: 1.25rem;
    color: var(--db-brand-orange);
}

/* GeneratePress gibt Blockquotes Kursivschrift, Linie und Einzug – alles
   zurücksetzen. */
.db-voice__quote,
.db-voice__quote p {
    margin: 0;
    padding: 0;
    border: 0;
    font-style: normal;
}

.db-voice__quote {
    font-family: var(--db-font-display);
    font-weight: 400;
    font-size: clamp(1.15rem, 1.5vw, 1.4rem);
    line-height: 1.35;
    letter-spacing: -.01em;
}

.db-voice__quote p + p { margin-top: .75rem; }

.db-voice__by {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-top: 1.75rem;
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--db-text-muted);
}

.db-voice:first-child .db-voice__by { color: var(--db-on-deep-muted); }

.db-voice__avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--db-ink);
    color: var(--db-on-deep);
    font-family: var(--db-font-display);
    font-weight: 700;
    font-size: .875rem;
    letter-spacing: .02em;
}

.db-voice:first-child .db-voice__avatar {
    background: var(--db-brand-orange);
    color: var(--db-ink);
}

.db-voice__who b {
    display: block;
    color: var(--db-text);
    font-weight: 600;
}

.db-voice:first-child .db-voice__who b { color: var(--db-on-deep); }

/* ---------- Schritte ---------- */

.db-steps__list {
    list-style: none;
    counter-reset: step;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
    border-top: 1px solid var(--db-line);
}

@media (min-width: 900px) {
    .db-steps__list {
        grid-template-columns: repeat(4, 1fr);
        gap: 0 clamp(1.5rem, 3vw, 3rem);
    }
}

.db-steps__item {
    counter-increment: step;
    padding: 2rem 0;
    border-bottom: 1px solid var(--db-line);
}

.db-steps__item::before {
    content: counter(step, decimal-leading-zero);
    display: block;
    margin-bottom: 1.25rem;
    font-family: var(--db-font-display);
    font-weight: 400;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    line-height: 1;
    color: var(--db-line-strong);
}

.db-steps__title {
    margin: 0 0 .6rem;
    font-size: 1.0625rem;
}

.db-steps__text {
    margin: 0;
    color: var(--db-text-muted);
    font-size: .9375rem;
}

/* ---------- Band ---------- */

.db-band {
    position: relative;
    overflow: hidden;
}

.db-band--deep {
    background: var(--db-ink);
    color: var(--db-on-deep);
}

.db-band--accent {
    background: var(--db-signal);
    color: var(--db-signal-ink);
}

.db-band--soft {
    background: var(--db-bg-alt);
}

.db-band__mark {
    position: absolute;
    left: calc(-1 * var(--db-gutter));
    bottom: -25%;
    width: min(28rem, 45vw);
    aspect-ratio: 1;
    background: var(--db-band-mark) no-repeat center / contain;
    opacity: .07;
    pointer-events: none;
}

.db-band__in {
    position: relative;
    max-width: var(--db-container);
    margin-inline: auto;
    padding: var(--db-space) var(--db-gutter);
}

.db-band__kicker {
    margin: 0 0 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid currentColor;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .6;
}

.db-band__title {
    margin: 0 0 2rem;
    max-width: 15ch;
    color: inherit;
}

.db-band__text {
    max-width: 48ch;
    font-size: 1.0625rem;
}

.db-band__text p {
    margin: 0 0 1.1rem;
}

.db-band--deep .db-band__text { color: var(--db-on-deep-muted); }

.db-band__actions {
    margin: 2.5rem 0 0;
}

/* Auf der dunklen Fläche muss der Knopf hell sein – mit der
   Signalfarbe wäre er dunkel auf dunkel und praktisch unsichtbar. */
.db-band--deep .db-btn--cta,
.db-band--deep .db-btn--ink {
    background: var(--db-signal-ink);
    border-color: var(--db-signal-ink);
    color: var(--db-ink);
}

.db-band--deep .db-btn--cta:hover,
.db-band--deep .db-btn--ink:hover {
    background: var(--db-brand-orange);
    border-color: var(--db-brand-orange);
    color: var(--db-ink);
}

/* ---------- FAQ ---------- */

.db-faq__list {
    max-width: 60rem;
    border-top: 1px solid var(--db-line);
}

.db-faq__item {
    border-bottom: 1px solid var(--db-line);
}

.db-faq__q {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem 0;
    font-family: var(--db-font-display);
    font-weight: 400;
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    line-height: 1.2;
    letter-spacing: -.01em;
    cursor: pointer;
    list-style: none;
}

.db-faq__q::-webkit-details-marker { display: none; }

.db-faq__q::after {
    content: "+";
    flex: 0 0 auto;
    margin-left: auto;
    font-family: var(--db-font);
    font-size: 1.25rem;
    line-height: 1;
    transition: rotate .2s ease;
}

.db-faq__item[open] .db-faq__q::after {
    content: "+";
    rotate: 45deg;
}

.db-faq__a {
    padding-bottom: 1.75rem;
    max-width: var(--db-measure);
    color: var(--db-text-muted);
}

.db-faq__a p { margin: 0 0 .75rem; }

/* ---------- News ---------- */

.db-news__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.db-news__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
    border-top: 1px solid var(--db-line-strong);
    padding-top: 1.5rem;
}

.db-news__media {
    display: block;
    aspect-ratio: 16 / 10;
    margin-bottom: 1.25rem;
    overflow: hidden;
    background: var(--db-bg-alt);
    order: 2;
}

.db-news__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.db-news__date {
    display: block;
    font-size: .6875rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--db-text-muted);
}

.db-news__title {
    display: block;
    margin: .6rem 0 .6rem;
    font-family: var(--db-font-display);
    font-weight: 400;
    font-size: clamp(1.3rem, 2vw, 1.75rem);
    line-height: 1.08;
    letter-spacing: -.01em;
}

.db-news__link:hover .db-news__title {
    text-decoration: underline;
    text-underline-offset: .12em;
}

.db-news__text {
    display: block;
    color: var(--db-text-muted);
    font-size: .9375rem;
}

/* ---------- Kennzahlen ---------- */

.db-facts {
    padding-block: clamp(2.5rem, 5vw, 4rem);
    background: var(--db-bg);
    border-bottom: 1px solid var(--db-line);
}

.db-facts__title {
    margin: 0 0 2rem;
    font-size: .75rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--db-text-muted);
}

.db-facts__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.db-facts__value {
    display: block;
    font-family: var(--db-font-display);
    font-weight: 400;
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    line-height: 1;
}

.db-facts__label {
    display: block;
    margin-top: .6rem;
    font-size: .8125rem;
    color: var(--db-text-muted);
}

/* ---------- Logowand ---------- */

.db-logos {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.db-logos__title {
    margin: 0 0 2rem;
    text-align: center;
    font-size: .75rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--db-text-muted);
}

.db-logos__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 4rem);
}

.db-logos__img {
    display: block;
    max-height: 2.5rem;
    width: auto;
    filter: grayscale(1);
    opacity: .55;
    transition: filter .2s ease, opacity .2s ease;
}

.db-logos__item:hover .db-logos__img {
    filter: none;
    opacity: 1;
}

/* ---------- Kontakt ---------- */

.db-contact__in {
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 900px) {
    .db-contact__in {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        gap: 4rem;
    }
}

.db-contact__title {
    margin: 0 0 .9rem;
}

.db-contact__text {
    margin: 0 0 2rem;
    color: var(--db-text-muted);
}

.db-contact__ways {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: .5rem 1rem;
    margin: 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--db-line);
}

.db-contact__ways dt {
    font-size: .8125rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--db-text-muted);
}

.db-contact__ways dd {
    margin: 0;
}

.db-contact__ways address {
    font-style: normal;
    line-height: 1.6;
}

.db-contact__form {
    padding: 1.75rem;
    background: var(--db-bg-alt);
    border: 1px solid var(--db-line);
    border-radius: var(--db-radius);
}

/* Formulare (WPForms) an die Seite angleichen. */
.db-contact__form input[type="text"],
.db-contact__form input[type="email"],
.db-contact__form input[type="tel"],
.db-contact__form textarea {
    width: 100%;
    padding: .7rem .9rem;
    background: var(--db-bg);
    border: 1px solid var(--db-line-strong);
    border-radius: var(--db-radius-sm);
    font: inherit;
    color: var(--db-text);
}

.db-contact__form button[type="submit"],
.db-contact__form input[type="submit"] {
    padding: .8rem 1.5rem;
    background: var(--db-cta);
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-weight: 600;
    color: #1B1206;
    cursor: pointer;
}

/* ---------- Beitragsinhalt ---------- */

.db-prose {
    max-width: var(--db-measure);
}

.db-prose h2 {
    margin-top: 2.5rem;
}

.db-prose h3 {
    margin-top: 2rem;
}

.db-prose img {
    height: auto;
    border-radius: var(--db-radius);
}

.db-prose table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

/* ---------- Seiten, die nur aus Sektionen bestehen ---------- */

/* Der Inhaltsbereich bringt bei GeneratePress ein Polster mit. Sektions-
   seiten setzen ihre Abstände selbst, sonst entstehen doppelte Ränder
   und die vollbreiten Bänder bekommen einen weißen Rahmen. */
.db-sections .site-content,
.db-sections .content-area,
.db-sections .site-main,
.db-sections .inside-article,
.db-sections .entry-content {
    padding: 0;
    margin: 0;
    max-width: 100%;
}

/* Der Hero ist ausgenommen: er wird bewusst mit negativem Rand unter
   den Header gezogen. */
.db-sections .entry-content > :first-child:not(.db-hero) {
    margin-top: 0;
}

/* Normale Textseiten (Impressum, Blogbeiträge) bekommen Lesebreite.
   Die Klasse db-sections sitzt am <body>, db-has-prose am <article> –
   ein :not() am Artikel greift deshalb nie. */
/* Der Textblock steht auf derselben linken Kante wie Header und
   Seitenkopf; die Lesebreite begrenzt nur die Zeilen selbst, nicht
   den Block. Sonst schwimmt der Text mittig und nichts fluchtet. */
.db-has-prose .entry-content {
    max-width: var(--db-container);
    margin-inline: auto;
    padding-block: var(--db-space);
    padding-inline: var(--db-gutter);
}

.db-has-prose .entry-content > * {
    max-width: var(--db-measure);
}

.db-has-prose .entry-content > .db-code,
.db-has-prose .entry-content > table {
    max-width: 100%;
}

.db-has-prose .entry-content h2 { margin-top: 2.5rem; }
.db-has-prose .entry-content h3 { margin-top: 2rem; }

.db-has-prose .entry-content img,
.db-figure img {
    height: auto;
    border-radius: var(--db-radius);
}

.db-figure {
    margin: 2rem 0;
}

.db-list {
    padding-left: 1.2rem;
}

.db-code {
    overflow-x: auto;
    padding: 1.1rem 1.25rem;
    background: var(--db-ink);
    color: #E7EDF2;
    border-radius: var(--db-radius);
    font-size: .875rem;
    line-height: 1.55;
}

.db-code code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ==========================================================================
   Boutique-Feinschliff
   ========================================================================== */

/* Kontaktband: große Überschrift, Formular ohne Kasten. */
.db-contact__title {
    font-size: clamp(2.4rem, 5vw, 4rem);
}

.db-contact__form {
    padding: 0;
    background: transparent;
    border: 0;
}

.db-contact__ways {
    border-top: 1px solid var(--db-line);
}

.db-contact__ways dt {
    font-size: .6875rem;
    letter-spacing: .16em;
}

.db-contact__form input[type="text"],
.db-contact__form input[type="email"],
.db-contact__form input[type="tel"],
.db-contact__form textarea {
    border: 0;
    border-bottom: 1px solid var(--db-line-strong);
    background: transparent;
    border-radius: 0;
    padding: .8rem 0;
}

.db-contact__form input:focus,
.db-contact__form textarea:focus {
    outline: 0;
    border-bottom-color: var(--db-text);
}

.db-contact__form button[type="submit"],
.db-contact__form input[type="submit"] {
    background: var(--db-ink);
    color: #FBFAF7;
    padding: .85rem 1.6rem;
}

/* Beitragstext: die Zwischenüberschriften bleiben in der Grotesk,
   nur die Einstiegszeile trägt die Didone. */
.db-has-prose .entry-content > h2 {
    font-family: var(--db-font-display);
    font-weight: 400;
    font-size: clamp(1.9rem, 3.2vw, 2.75rem);
    line-height: 1.05;
    margin-top: 3.5rem;
}

.db-has-prose .entry-content > h3 {
    margin-top: 2.5rem;
    font-size: 1.125rem;
}

.db-has-prose .entry-content > p:first-of-type {
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--db-text);
}

.db-list {
    padding-left: 0;
    list-style: none;
}

.db-list li {
    padding: .6rem 0 .6rem 1.5rem;
    border-bottom: 1px solid var(--db-line);
    position: relative;
}

.db-list li::before {
    content: "";
    position: absolute;
    left: 0;
    /* An der Zeilenmitte ausrichten, nicht an einem festen Abstand –
       sonst schwebt der Punkt über der ersten Zeile. */
    top: calc(.6rem + .55em);
    width: .35rem;
    height: .35rem;
    background: var(--db-signal);
    border-radius: 50%;
}

ol.db-list {
    counter-reset: dblist;
}

ol.db-list li {
    counter-increment: dblist;
    padding-left: 2.5rem;
}

ol.db-list li::before {
    content: counter(dblist, decimal-leading-zero);
    top: .6rem;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    font-family: var(--db-font-display);
    font-size: 1rem;
    color: var(--db-text-muted);
}

/* ==========================================================================
   Hero-Hintergrund: wandernde Farbschleier und feines Korn

   Eine reine Volltonfläche wirkt flach. Drei sehr weich gezeichnete
   Farbfelder wandern langsam darüber, darüber liegt ein feines Korn.
   Beides ist bewusst schwach: es soll Tiefe geben, nicht ablenken.
   ========================================================================== */

.db-hero__aurora {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    /* screen hellt nur auf – auf der dunklen Fläche entsteht Leuchten
       statt Schmutz. */
    mix-blend-mode: screen;
}

.db-hero__blob {
    position: absolute;
    width: 62vw;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
    will-change: transform;
}

.db-hero__blob--1 {
    top: -28%;
    left: -12%;
    background: radial-gradient(circle at 50% 50%, #1A729C 0%, rgb(26 114 156 / 0) 68%);
    animation: db-drift-1 26s ease-in-out infinite alternate;
}

.db-hero__blob--2 {
    top: 6%;
    right: -18%;
    width: 55vw;
    background: radial-gradient(circle at 50% 50%, #F7931E 0%, rgb(247 147 30 / 0) 66%);
    opacity: .3;
    animation: db-drift-2 32s ease-in-out infinite alternate;
}

.db-hero__blob--3 {
    bottom: -38%;
    left: 28%;
    width: 70vw;
    background: radial-gradient(circle at 50% 50%, #2E9BC7 0%, rgb(46 155 199 / 0) 70%);
    opacity: .32;
    animation: db-drift-3 38s ease-in-out infinite alternate;
}

@keyframes db-drift-1 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(14vw, 10vh, 0) scale(1.18); }
}

@keyframes db-drift-2 {
    from { transform: translate3d(0, 0, 0) scale(1.1); }
    to   { transform: translate3d(-12vw, 14vh, 0) scale(.92); }
}

@keyframes db-drift-3 {
    from { transform: translate3d(0, 0, 0) scale(.95); }
    to   { transform: translate3d(-16vw, -12vh, 0) scale(1.2); }
}

/* Korn: eine SVG-Turbulenz als Datei-URI, kein Bild-Request. */
.db-hero__grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* Eine feine Linie am unteren Rand fasst die Fläche ein. */
.db-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / .18), rgb(255 255 255 / 0));
    pointer-events: none;
}

/* Inhalt über den Hintergrund heben. */
.db-hero__in {
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .db-hero__blob {
        animation: none;
    }
}


/* Hero unter den durchsichtigen Header ziehen. Der Header ist sticky und
   bleibt damit im Fluss – ein negativer Rand am Hero schiebt ihn darunter,
   die Innenpolsterung gibt den Platz zurück. */
.db-home .db-hero {
    margin-top: calc(-1 * var(--db-header-h, 5rem));
    padding-top: var(--db-header-h, 5rem);
}

/* ==========================================================================
   Hero passt auf eine Bildschirmhöhe
   Kennzahlen und Knöpfe müssen ohne Scrollen sichtbar sein – also
   kleinere Headline, engere Abstände und die Fläche auf Viewporthöhe,
   Inhalt über die Höhe verteilt.
   ========================================================================== */

.db-home .db-hero {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

.db-home .db-hero__in {
    /* Als Flex-Kind mit auto-Rändern schrumpft der Block sonst auf
       Inhaltsbreite – volle Breite erzwingen. */
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: clamp(1.5rem, 3vh, 3rem);
    padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
}

.db-hero__title {
    font-size: clamp(2.75rem, 6.4vw, 6rem);
    max-width: 20ch;
}

.db-hero__kicker {
    margin-bottom: clamp(1.25rem, 3vh, 2.5rem);
}

.db-hero__body {
    margin-top: clamp(1.5rem, 3.5vh, 2.75rem);
}

.db-hero__proof {
    margin-top: auto;
    padding-top: 1.25rem;
    gap: 1rem;
}

.db-hero__proof-value {
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
}

/* Reihenfolge: Text, dann Kennzahlen mit Luft dazwischen. */
.db-hero__proof {
    margin-top: clamp(2rem, 6vh, 4rem);
}

/* ---------- Mini-Formular ---------- */

.db-form__row {
    display: grid;
    gap: .4rem;
    margin: 0 0 1.25rem;
}

.db-form__row label {
    font-size: .6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--db-text-muted);
}

.db-form input[type="text"],
.db-form input[type="email"],
.db-form textarea {
    width: 100%;
    padding: .7rem 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--db-line-strong);
    border-radius: 0;
    font: inherit;
    color: var(--db-text);
}

.db-form input:focus,
.db-form textarea:focus {
    outline: 0;
    border-bottom-color: var(--db-text);
}

.db-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.db-form__consent {
    margin: 0 0 1.5rem;
    font-size: .8125rem;
    color: var(--db-text-muted);
}

.db-form__submit {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0;
}

.db-form__alt {
    font-size: .875rem;
}

.db-form__notice {
    margin: 0 0 1.5rem;
    padding: .9rem 1rem;
    border-left: 3px solid var(--db-brand-orange);
    background: var(--db-bg-alt);
}

.db-form__notice--error {
    border-left-color: #C0392B;
}

/* ==========================================================================
   Showcase-Kacheln
   ========================================================================== */

.db-showcase {
    padding-block: var(--db-space) 0;
    background: var(--db-bg-alt);
}

.db-showcase__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
}

@media (max-width: 1100px) { .db-showcase__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .db-showcase__grid { grid-template-columns: 1fr; } }

.db-showcase__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--db-ink);
    color: var(--db-on-deep);
    text-decoration: none;
    overflow: hidden;
}

/* Bühne: der Desktop-Screenshot oben angeschnitten, das Telefon davor. */
.db-showcase__stage {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3.4;
    overflow: hidden;
    background:
        radial-gradient(120% 80% at 20% 0%, rgb(26 114 156 / .35), transparent 60%),
        var(--db-ink);
}

.db-showcase__desk {
    /* Beide Screenshots liegen komplett in der Bühne, nichts wird
       angeschnitten: Desktop oben links, Telefon unten rechts davor. */
    position: absolute;
    top: 8%;
    left: 6%;
    width: 76%;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 30px 60px -20px rgb(0 0 0 / .7);
    transition: translate .5s cubic-bezier(.22, 1, .36, 1);
}

.db-showcase__phone {
    position: absolute;
    bottom: 6%;
    right: 6%;
    width: 27%;
    border-radius: 14px;
    border: 3px solid #0B0E11;
    overflow: hidden;
    box-shadow: 0 30px 50px -15px rgb(0 0 0 / .8);
    transition: translate .5s cubic-bezier(.22, 1, .36, 1);
}

.db-showcase__img {
    display: block;
    width: 100%;
    height: auto;
}

.db-showcase__link:hover .db-showcase__desk  { translate: -1.5% -1.5%; }
.db-showcase__link:hover .db-showcase__phone { translate: 0 -3%; }

.db-showcase__logo {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20%;
}

.db-showcase__logo img {
    max-width: 100%;
    max-height: 100%;
    padding: 1.5rem;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 30px 60px -20px rgb(0 0 0 / .7);
}

.db-showcase__body {
    display: block;
    padding: 1.5rem 1.5rem 1.75rem;
    border-top: 1px solid var(--db-on-deep-line);
}

.db-showcase__meta {
    display: block;
    font-size: .6875rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--db-on-deep-muted);
}

.db-showcase__title {
    display: block;
    margin: .5rem 0 .3rem;
    font-family: var(--db-font-display);
    font-weight: 600;
    font-size: clamp(1.4rem, 2vw, 1.9rem);
    letter-spacing: -.02em;
    line-height: 1.05;
}

.db-showcase__host {
    display: block;
    font-size: .875rem;
    color: var(--db-on-deep-muted);
}

.db-showcase__link:hover .db-showcase__host { color: var(--db-brand-orange); }

.db-showcase__more { padding-block: 2rem; margin: 0; }

/* ==========================================================================
   Geräte-Rahmen (reines CSS)
   ========================================================================== */

.db-device {
    position: relative;
    display: block;
    width: 100%;
    /* Laptop 82 % breit + Telefon rechts unten, Höhe aus dem Laptop. */
    padding-bottom: 66%;
}

.db-device__laptop {
    position: absolute;
    top: 0;
    left: 0;
    width: 84%;
}

.db-device__screen {
    display: block;
    padding: 2.2% 2.2% 2.2%;
    background: #1B1F24;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 30px 60px -20px rgb(0 0 0 / .7);
}

.db-device__screen .db-device__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: top;
}

.db-device__base {
    display: block;
    height: 10px;
    margin: 0 -3%;
    background: linear-gradient(#3A3F46, #22262B);
    border-radius: 0 0 10px 10px;
}

.db-device__base::after {
    content: "";
    display: block;
    width: 14%;
    height: 3px;
    margin: 0 auto;
    background: #0B0E11;
    border-radius: 0 0 4px 4px;
}

.db-device__phone {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 24%;
    padding: 3px;
    background: #1B1F24;
    border-radius: 18px;
    box-shadow: 0 30px 50px -15px rgb(0 0 0 / .8);
    overflow: hidden;
}

.db-device__notch {
    position: absolute;
    top: 3px;
    left: 50%;
    translate: -50% 0;
    width: 40%;
    height: 10px;
    background: #1B1F24;
    border-radius: 0 0 8px 8px;
    z-index: 1;
}

.db-device__phone .db-device__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 18.5;
    object-fit: cover;
    object-position: top;
    border-radius: 15px;
}

/* Showcase-Kachel: Gerät auf der Bühne */
.db-showcase__stage .db-device {
    position: absolute;
    left: 7%;
    right: 7%;
    top: 10%;
    width: auto;
    padding-bottom: 0;
    height: 80%;
}

.db-showcase__link:hover .db-device__laptop { translate: -1% -1.5%; }
.db-showcase__link:hover .db-device__phone  { translate: 0 -3%; }
.db-device__laptop, .db-device__phone { transition: translate .5s cubic-bezier(.22, 1, .36, 1); }

/* Referenz-Grid */
.db-work__media--device {
    aspect-ratio: auto;
    padding: 8% 6% 4%;
    background: radial-gradient(120% 80% at 20% 0%, rgb(26 114 156 / .35), transparent 60%), var(--db-ink);
}

.db-work__media--logo {
    display: grid;
    place-items: center;
    padding: 18%;
    background: #fff;
}

/* Slider: mehr als vier Kacheln laufen waagerecht mit Einrasten. */
.db-showcase__grid[data-db-slider] {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 2px;
}

.db-showcase__grid[data-db-slider]::-webkit-scrollbar { display: none; }

.db-showcase__grid[data-db-slider] > li {
    flex: 0 0 calc(25% - 2px);
    scroll-snap-align: start;
}

@media (max-width: 1100px) { .db-showcase__grid[data-db-slider] > li { flex-basis: calc(50% - 2px); } }
@media (max-width: 560px)  { .db-showcase__grid[data-db-slider] > li { flex-basis: 88%; } }

.db-showcase__nav {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    padding: 1.25rem var(--db-gutter) 0;
}

.db-showcase__arrow {
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--db-line-strong);
    border-radius: 50%;
    background: transparent;
    color: var(--db-text);
    font: inherit;
    cursor: pointer;
}

.db-showcase__arrow:hover { background: var(--db-ink); color: #FAF9F6; border-color: var(--db-ink); }

/* Einzelne Referenz */
.db-ref__in {
    display: grid;
    gap: 3rem;
    padding-block: var(--db-space);
}

@media (min-width: 960px) {
    .db-ref__in { grid-template-columns: 1.3fr 1fr; gap: 5rem; align-items: start; }
}

.db-ref__media { padding: 8% 6% 4%; background: radial-gradient(120% 80% at 20% 0%, rgb(26 114 156 / .35), transparent 60%), var(--db-ink); }
.db-ref__logo { display: grid; place-items: center; padding: 10%; background: #fff; }
.db-ref__facts { display: grid; grid-template-columns: 7rem 1fr; gap: .5rem 1rem; margin: 2rem 0; padding-top: 1.5rem; border-top: 1px solid var(--db-line); }
.db-ref__facts dt { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--db-text-muted); }
.db-ref__facts dd { margin: 0; }

/* Einzelseite: Sektionsseiten-Regeln greifen hier nicht, Polster selbst setzen. */
.single-db_referenz .site-main { padding: 0; margin: 0; }
.single-db_referenz .db-ref__body > p:first-of-type { font-size: 1.25rem; }
.single-db_referenz .site,
.single-db_referenz .site-content,
.single-db_referenz .content-area {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* ---------- CTA-Zwischenband ---------- */

.db-cta {
    background: var(--db-bg);
    border-block: 1px solid var(--db-line);
}

.db-cta__in {
    max-width: var(--db-container);
    margin-inline: auto;
    padding: clamp(2.5rem, 5vw, 4rem) var(--db-gutter);
    display: grid;
    gap: 1.5rem 3rem;
    align-items: center;
}

@media (min-width: 900px) {
    .db-cta__in { grid-template-columns: minmax(0, 1.4fr) auto; }
}

.db-cta__title {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    max-width: 22ch;
}

.db-cta__text {
    margin: .5rem 0 0;
    color: var(--db-text-muted);
}

.db-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 0;
}

.db-cta--deep { background: var(--db-ink); color: var(--db-on-deep); border: 0; }
.db-cta--deep .db-cta__title { color: inherit; }
.db-cta--deep .db-cta__text { color: var(--db-on-deep-muted); }
.db-cta--deep .db-btn--ink { background: var(--db-signal-ink); border-color: var(--db-signal-ink); color: var(--db-ink); }
.db-cta--deep .db-btn--ink:hover { background: var(--db-brand-orange); border-color: var(--db-brand-orange); }
.db-cta--deep .db-btn--line { border-color: rgb(255 255 255 / .35); color: inherit; }

/* ---------- Hero-Porträt: Blick aus dem Laptop ---------- */

/* Der Freisteller sitzt im Bildschirm eines CSS-Laptops, die Arme liegen
   von innen auf der unteren Blende, die Finger hängen darüber. Maße sind
   auf das Bild sven-peek abgestimmt: Auflagekante bei 92,07 % der
   Bildhöhe, Person 70 % der Bildschirmbreite, Kopf knapp unter dem
   oberen Rand eines 3:2-Schirms. */
.db-peek {
    --db-peek-w: clamp(14rem, 18vw, 21rem);
    --db-peek-bezel: 2.6%;
    --db-peek-chin: 5%;
    --db-peek-person: .70;
    --db-peek-hang: 7.93%;
    display: block;
    margin: 0;
    width: var(--db-peek-w);
    text-align: left;
}

.db-peek__laptop {
    display: block;
    position: relative;
    width: 100%;
}

.db-peek__screen {
    display: block;
    position: relative;
    aspect-ratio: 3 / 2;
    box-sizing: content-box;
    padding: var(--db-peek-bezel) var(--db-peek-bezel) var(--db-peek-chin);
    background: #1B1F24;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 30px 60px -20px rgb(0 0 0 / .7);
}

.db-peek__glass {
    display: block;
    position: absolute;
    inset: var(--db-peek-bezel) var(--db-peek-bezel) var(--db-peek-chin);
    border-radius: 3px;
    overflow: hidden;
    background:
        radial-gradient(60% 70% at 25% 85%, rgb(247 147 30 / .22), transparent 70%),
        radial-gradient(70% 60% at 85% 20%, rgb(93 153 217 / .35), transparent 70%),
        linear-gradient(160deg, #0F1B26, #06090D);
}

/* Feiner Lichtreflex oben rechts, wie eine Glasscheibe. */
.db-peek__glass::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 55%, rgb(255 255 255 / .06) 56%, rgb(255 255 255 / .02) 80%, transparent);
    pointer-events: none;
}

.db-peek__person {
    position: absolute;
    left: var(--db-peek-bezel);
    bottom: var(--db-peek-chin);
    width: calc((100% - 2 * var(--db-peek-bezel)) * var(--db-peek-person));
    height: auto;
    max-width: none;
    translate: 0 var(--db-peek-hang);
    filter: drop-shadow(0 14px 22px rgb(0 0 0 / .55));
    z-index: 1;
}

.db-peek__base {
    display: block;
    height: 10px;
    margin: 0 -3%;
    background: linear-gradient(#3A3F46, #22262B);
    border-radius: 0 0 10px 10px;
}

.db-peek__base::after {
    content: "";
    display: block;
    width: 14%;
    height: 3px;
    margin: 0 auto;
    background: #0B0E11;
    border-radius: 0 0 4px 4px;
}

.db-peek__caption {
    display: block;
    margin: 1rem 0 0 .25rem;
    color: var(--db-on-deep-muted);
    font-size: .8125rem;
    line-height: 1.35;
}

.db-peek__caption b {
    display: block;
    color: var(--db-signal-ink);
    font-weight: 600;
}

/* Reihe: Lead – Laptop – Knöpfe, alles auf der Grundlinie. */
@media (min-width: 860px) {
    .db-hero__body--portrait {
        grid-template-columns: minmax(0, 34ch) auto auto;
        grid-template-areas: "lead portrait actions";
        align-items: end;
        justify-content: space-between;
        column-gap: clamp(2rem, 4vw, 4rem);
    }

    .db-hero__body--portrait .db-hero__lead     { grid-area: lead; }
    .db-hero__body--portrait .db-hero__portrait { grid-area: portrait; }
    .db-hero__body--portrait .db-hero__actions  { grid-area: actions; }
}

/* Auf schmalen Schirmen ist der Laptop kleiner und steht links. */
@media (max-width: 859px) {
    .db-hero__portrait { --db-peek-w: min(16rem, 70vw); }
}

/* ---------- Hero-Globus ---------- */

/* Große Kugel rechts, teils aus dem Bild geschoben; nach links und unten
   weich ausgeblendet, damit sie hinter dem Text nicht stört. */
.db-hero__globe {
    --db-globe: min(108vh, 90vw);
    position: absolute;
    width: var(--db-globe);
    height: var(--db-globe);
    top: 50%;
    right: calc(var(--db-globe) * -0.16);
    translate: 0 -50%;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 5%, #000 32%), linear-gradient(to bottom, #000 62%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 5%, #000 32%), linear-gradient(to bottom, #000 62%, transparent 100%);
    mask-composite: intersect;
}

@media (max-width: 859px) {
    .db-hero__globe {
        --db-globe: 130vw;
        top: 38%;
        right: calc(var(--db-globe) * -0.45);
        opacity: .45;
    }
}

/* ==========================================================================
   Redaktionelle Sektionen: Intro, Team, Fotoreihe, Textblock
   ========================================================================== */

/* Fotos in diesen Sektionen: leicht gerundet, ruhig, kein Rahmen. */
.db-intro__photo img,
.db-member__photo img,
.db-photos__item img,
.db-textblock__photo img,
.db-rail__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* ---------- Intro ---------- */

.db-intro { padding-bottom: 0; }

.db-intro__in {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 1000px) {
    .db-intro__in {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        column-gap: clamp(3rem, 6vw, 7rem);
    }
}

.db-intro__title {
    margin: 0 0 1.5rem;
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    max-width: 18ch;
}

.db-intro__body p {
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    line-height: 1.5;
    max-width: 34em;
}

.db-intro__body p:first-child { margin-top: 0; }

.db-intro__photo {
    margin: 0;
    aspect-ratio: var(--db-ratio, 4/5);
    overflow: hidden;
    border-radius: 6px;
}

.db-intro__photo figcaption {
    font-size: .8125rem;
    color: var(--db-text-muted);
    margin-top: .75rem;
}

/* ---------- Team ---------- */

.db-team__list {
    display: grid;
    gap: clamp(3rem, 6vw, 6rem);
}

.db-member {
    display: grid;
    gap: 1.75rem;
    align-items: center;
}

@media (min-width: 900px) {
    .db-member {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: clamp(2.5rem, 5vw, 6rem);
    }

    /* Jede zweite Reihe: Foto rechts. */
    .db-member:nth-child(even) .db-member__photo { order: 2; }
}

.db-member__photo {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 6px;
    background: var(--db-bg-alt);
}

.db-member__placeholder {
    display: grid;
    place-items: center;
    height: 100%;
    font-family: var(--db-font-display);
    font-weight: 700;
    font-size: clamp(5rem, 12vw, 9rem);
    color: var(--db-line-strong);
}

.db-member__name {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.05;
}

.db-member__role {
    margin: .5rem 0 1.25rem;
    color: var(--db-text-muted);
    font-size: .9375rem;
    letter-spacing: .02em;
}

.db-member__body p { max-width: 50ch; }
.db-member__body p:first-child { margin-top: 0; }

.db-member__focus {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.db-member__focus li {
    padding: .35rem .8rem;
    border: 1px solid var(--db-line-strong);
    border-radius: 999px;
    font-size: .8125rem;
}

/* Ohne Foto: kompakte Zeile mit Initial statt leerer Fläche. */
.db-member--nophoto {
    grid-template-columns: 7rem minmax(0, 1fr);
    column-gap: 2rem;
    align-items: start;
}

.db-member--nophoto .db-member__photo {
    aspect-ratio: 1;
    border-radius: 50%;
    order: 0 !important;
}

.db-member--nophoto .db-member__placeholder { font-size: 3rem; }

@media (max-width: 899px) {
    .db-member--nophoto { grid-template-columns: 5rem minmax(0, 1fr); }
}

/* ---------- Fotoreihe ---------- */

.db-photos { padding-block: clamp(1.5rem, 3vw, 2.5rem); }

.db-photos__bleed { padding-inline: clamp(.5rem, 1.5vw, 1.5rem); }

.db-photos__row {
    display: flex;
    gap: clamp(.5rem, 1.5vw, 1.25rem);
}

/* Breite nach Seitenverhältnis: alle Bilder gleich hoch. */
.db-photos__item {
    margin: 0;
    flex: var(--db-ratio, 1.5) 1 0;
    aspect-ratio: var(--db-ratio, 1.5);
    overflow: hidden;
    min-width: 0;
}

@media (max-width: 640px) {
    .db-photos__row { flex-direction: column; }
    .db-photos__item { flex: none; width: 100%; }
}

.db-photos__caption {
    margin: .75rem 0 0;
    font-size: .8125rem;
    color: var(--db-text-muted);
}

/* ---------- Textblock ---------- */

.db-textblock__in {
    display: grid;
    gap: 2rem;
}

@media (min-width: 900px) {
    .db-textblock__in {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
        column-gap: clamp(2.5rem, 5vw, 6rem);
        align-items: start;
    }
}

.db-textblock__title {
    margin: 0;
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    max-width: 14ch;
}

.db-textblock__photo {
    margin: 1.75rem 0 0;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    max-width: 26rem;
}

.db-textblock__body p {
    font-size: 1.125rem;
    line-height: 1.6;
    max-width: 60ch;
}

.db-textblock__body p:first-child { margin-top: 0; }

.db-textblock--soft { background: var(--db-bg-alt); }

/* ==========================================================================
   Textseiten in voller Breite: Text links, Randspalte rechts
   ========================================================================== */

.db-has-prose .entry-content {
    max-width: var(--db-container);
}

.db-has-prose .entry-content > .db-prose-grid {
    display: grid;
    gap: clamp(2.5rem, 5vw, 5rem);
    max-width: none;
}

@media (min-width: 1000px) {
    .db-has-prose .entry-content > .db-prose-grid {
        grid-template-columns: minmax(0, 1fr) clamp(18rem, 24vw, 22rem);
        column-gap: clamp(3rem, 6vw, 7rem);
        align-items: start;
    }
}

.db-prose-main {
    --db-measure: 72ch;
    min-width: 0;
    font-size: 1.0625rem;
}

.db-prose-main > * { max-width: var(--db-measure); }
.db-prose-main > .db-code,
.db-prose-main > table,
.db-prose-main > .db-photos,
.db-prose-main > figure,
.db-prose-main > .wp-block-image { max-width: 100%; }

.db-prose-main > h2 {
    font-family: var(--db-font-display);
    font-weight: 400;
    font-size: clamp(1.9rem, 3.2vw, 2.75rem);
    line-height: 1.05;
    margin-top: 3.5rem;
}

.db-prose-main > h3 {
    margin-top: 2.5rem;
    font-size: 1.125rem;
}

.db-prose-main > p:first-of-type {
    font-size: 1.3rem;
    line-height: 1.5;
}

.db-prose-main .db-photos { padding-inline: 0; }
.db-prose-main .db-photos .db-wrap { padding: 0; }

/* Randspalte: Foto, Ansprechpartner, Knöpfe, Verwandtes. Klebt beim Scrollen. */
.db-rail {
    position: sticky;
    top: calc(var(--db-header-h, 5rem) + 1.5rem);
    display: grid;
    gap: 1.5rem;
}

.db-rail__photo {
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 6px;
}

.db-rail__card {
    padding: 1.5rem;
    background: var(--db-bg-alt);
}

.db-rail__kicker {
    margin: 0 0 .75rem;
    font-size: .6875rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--db-text-muted);
}

.db-rail__name {
    margin: 0;
    font-family: var(--db-font-display);
    font-size: 1.35rem;
    line-height: 1.1;
}

.db-rail__role {
    margin: .25rem 0 1rem;
    color: var(--db-text-muted);
    font-size: .875rem;
}

.db-rail__text {
    margin: 0 0 1.25rem;
    font-size: .9375rem;
    line-height: 1.5;
}

.db-rail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
}

.db-rail__actions .db-btn { padding: .65rem 1.1rem; font-size: .875rem; }

.db-rail__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.db-rail__list li {
    border-top: 1px solid var(--db-line);
}

.db-rail__list a {
    display: block;
    padding: .7rem 0;
    color: inherit;
    text-decoration: none;
    font-size: .9375rem;
}

.db-rail__list a:hover { color: var(--db-accent); }
.db-rail__list .is-current a { font-weight: 600; }

@media (max-width: 999px) {
    .db-rail { position: static; }
    .db-rail__photo { max-width: 22rem; }
}

/* Die Textseiten-Regel „img { height: auto }" würde das Randspalten-Foto
   sonst nicht das 4:5-Feld füllen lassen. */
.db-has-prose .entry-content .db-rail__photo img,
.db-has-prose .entry-content .db-photos__item img { height: 100%; }

/* GeneratePress blendet das Änderungsdatum aus; wir zeigen es bewusst. */
.entry-meta .updated:not(.published) { display: inline; }

/* ---------- Standortkarte ---------- */

.db-map__frame {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}

.db-map__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.db-map__card {
    background: var(--db-bg);
    padding: clamp(1.5rem, 3vw, 2rem);
}

@media (min-width: 800px) {
    .db-map__card {
        position: absolute;
        left: clamp(1.5rem, 3vw, 2.5rem);
        bottom: clamp(1.5rem, 3vw, 2.5rem);
        max-width: 24rem;
        border-radius: 4px;
        box-shadow: 0 24px 48px -24px rgb(0 0 0 / .35);
    }
}

@media (max-width: 799px) {
    .db-map__frame { border-radius: 6px 6px 0 0; }
    .db-map__img { aspect-ratio: 4 / 3; }
    .db-map__card { border: 1px solid var(--db-line); border-top: 0; }
}

.db-map__kicker {
    margin: 0 0 .75rem;
    font-size: .6875rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--db-text-muted);
}

.db-map__addr {
    margin: 0;
    line-height: 1.5;
}

.db-map__addr b {
    display: block;
    font-weight: 600;
}

.db-map__text {
    margin: .75rem 0 0;
    font-size: .9375rem;
    color: var(--db-text-muted);
}

.db-map__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.5rem 0 0;
}

.db-map__actions .db-btn { padding: .7rem 1.2rem; font-size: .875rem; }