/*
 * kail-selz — Custom-CSS
 *
 * Nur für Dinge, die theme.json nicht ausdrücken kann.
 * Tokens immer über CSS-Variablen aus theme.json beziehen
 * (var(--wp--preset--color--primary), var(--wp--preset--spacing--40) …).
 * Klassen folgen BEM (.block__element--modifier).
 */

/* ── Foundation ───────────────────────────────────────── */
/* Lange deutsche Komposita sauber umbrechen (Overflow-Schutz). */
.wp-site-blocks,
.editor-styles-wrapper {
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Spacing-Skala gegen WP-Default-Kollision erzwingen — WP liefert für die
   Slugs 20–80 eigene Werte; :root-Override stellt die theme.json-Werte sicher.
   Editor braucht denselben Override, sonst gewinnt dort der WP-Default. */
:root,
.editor-styles-wrapper {
    --wp--preset--spacing--10: 0.5rem;
    --wp--preset--spacing--20: 1rem;
    --wp--preset--spacing--30: 1.5rem;
    --wp--preset--spacing--40: 2rem;
    --wp--preset--spacing--50: 3rem;
    --wp--preset--spacing--60: 4rem;
    --wp--preset--spacing--70: 5rem;
    --wp--preset--spacing--80: 6rem;
}

/* WP/UA setzen strong auf font-weight:bolder — ausgehend vom Body-Gewicht 300
   ergibt das nur 400. Explizit auf Bold ziehen. */
strong,
b {
    font-weight: 700;
}

/* Module stoßen bündig aneinander: Vertikalabstand kommt aus dem padding-block
   der Sektionen, nicht aus dem Block-Gap der obersten Ebenen. */
.wp-site-blocks > * + *,
.wp-block-post-content > * + * {
    margin-block-start: 0;
}

.editor-styles-wrapper .wp-block-post-content.is-root-container > * {
    margin-block: 0;
}

/* ── Header ───────────────────────────────────────────── */
.site-header {
    padding-block: clamp(1.25rem, 4vw, 3.5rem);
}

/* Schmaler als die Content-Breite — im Design stehen Logo und Nav enger
   zusammen (Lücke ~240px bei 1280), nicht an den Außenkanten der Spalte. */
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--40);
    max-width: 60rem;
    margin-inline: auto;
}

.site-header__logo {
    display: block;
    line-height: 0;
}

.site-header__logo img {
    width: clamp(180px, 21vw, 270px);
    height: auto;
}

/* Hauptmenü (Desktop): flache Liste rechtsbündig. */
.main-nav__list {
    display: flex;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav__list a {
    font-family: var(--wp--preset--font-family--sans);
    font-size: clamp(1.0625rem, 1.7vw, 1.375rem);
    font-weight: 700;
    color: var(--wp--preset--color--contrast);
    text-decoration: none;
}

.main-nav__list a:hover,
.main-nav__list a:focus-visible,
.main-nav__list .current-menu-item > a,
.main-nav__list .current_page_item > a {
    color: var(--wp--preset--color--primary);
}

/* Hamburger: erst auf schmalen Viewports sichtbar. */
.main-nav-toggle {
    display: none;
    position: relative;
    z-index: 110;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.main-nav-toggle__bars,
.main-nav-toggle__bars::before,
.main-nav-toggle__bars::after {
    content: "";
    position: absolute;
    left: 50%;
    display: block;
    width: 1.75rem;
    height: 3px;
    border-radius: 2px;
    background: var(--wp--preset--color--contrast);
    transform: translateX(-50%);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.main-nav-toggle__bars {
    top: 50%;
    transform: translate(-50%, -50%);
}

.main-nav-toggle__bars::before {
    top: -9px;
}

.main-nav-toggle__bars::after {
    top: 9px;
}

.main-nav-toggle[aria-expanded="true"] .main-nav-toggle__bars {
    background: transparent;
}

.main-nav-toggle[aria-expanded="true"] .main-nav-toggle__bars::before {
    top: 0;
    transform: translateX(-50%) rotate(45deg);
}

.main-nav-toggle[aria-expanded="true"] .main-nav-toggle__bars::after {
    top: 0;
    transform: translateX(-50%) rotate(-45deg);
}

@media (max-width: 768px) {
    .main-nav-toggle {
        display: inline-flex;
    }

    /* Overlay-Menü: eingeklappt unsichtbar UND aus dem Tab-Order (a11y). */
    .main-nav--enhanced {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 105;
        visibility: hidden;
        opacity: 0;
        background: var(--wp--preset--color--base);
        box-shadow: 0 12px 24px rgb(0 0 0 / 12%);
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    .main-nav--enhanced.is-open {
        visibility: visible;
        opacity: 1;
    }

    .site-header {
        position: relative;
    }

    .main-nav__list {
        flex-direction: column;
        gap: 0;
        padding: var(--wp--preset--spacing--30);
    }

    .main-nav__list a {
        display: block;
        padding-block: 0.75rem;
        font-size: var(--wp--preset--font-size--medium);
    }
}

@media (prefers-reduced-motion: reduce) {
    .main-nav--enhanced,
    .main-nav--enhanced.is-open,
    .main-nav-toggle__bars,
    .main-nav-toggle__bars::before,
    .main-nav-toggle__bars::after {
        transition: none;
    }
}

/* ── Hero ─────────────────────────────────────────────── */
/* Drei Zonen: Grau-Panel mit Foto | Headline | Grau-Panel (via ::after).
   Variante .hero--flip spiegelt die Anordnung (Kanzlei/Kontakt). */
/* Feste Höhe (Figma: 360px bei 1280) — nur mit definiter Höhe kann das
   Bild per height:100% folgen, min-height würde auf Naturgröße zurückfallen. */
.wp-block-group.hero {
    display: flex;
    align-items: stretch;
    height: clamp(240px, 28.2vw, 360px);
}

/* Zonen folgen der Navigation (Header-Container 60rem zentriert):
   Weiß beginnt kurz vor dem ersten Menüpunkt (50% − 33px − Luft),
   das rechte Grau beginnt am Menüpunkt „Kontakt" (50% + 392px). */
.hero__media {
    display: flex;
    flex: 0 0 calc(50% - 48px);
    justify-content: flex-end;
    align-items: stretch;
    background: var(--wp--preset--color--surface);
}

.hero--flip .hero__media {
    justify-content: flex-start;
}

/* Bildhöhe folgt der Hero-Höhe (Figma: 360×360 in 360px hohem Hero) —
   nicht umgekehrt, sonst treibt das quadratische Bild den Hero in die Höhe. */
.hero__media .hero__img {
    height: 100%;
    width: auto;
    margin: 0;
}

.hero__media .hero__img img {
    height: 100%;
    width: auto;
    object-fit: cover;
}

/* Zone ist durch die Nav-Anker konstant ~440px breit; symmetrisches Padding
   lässt der 367px-Zeile „meine Anwälte." beidseitig gleiche Luft. */
.hero__text {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    padding-block: var(--wp--preset--spacing--40);
    padding-inline: clamp(1rem, 2.5vw, 2rem);
}

.hero__title {
    color: var(--wp--preset--color--contrast);
    font-weight: 300;
    line-height: 1.146;
    hyphens: none;
}

.hero__title mark {
    background: transparent;
    color: var(--wp--preset--color--primary);
    font-weight: 600;
}

.wp-block-group.hero::after {
    content: "";
    flex: 0 0 max(0px, calc(50% - 392px));
    background: var(--wp--preset--color--surface);
}

.hero--flip {
    flex-direction: row-reverse;
}

@media (max-width: 768px) {
    .wp-block-group.hero,
    .hero--flip {
        flex-direction: column;
        height: auto;
    }

    .hero__media {
        justify-content: center;
    }

    /* Gestapelt bestimmt wieder die Breite die Bildgröße. */
    .hero__media .hero__img {
        height: auto;
        width: 72%;
    }

    .hero__media .hero__img img {
        height: auto;
        width: 100%;
    }

    .wp-block-group.hero::after {
        display: none;
    }
}

/* ── Module: gemeinsame Grundlagen ────────────────────── */
/* Vertikaler Rhythmus über padding-block der Sektionen. */
.section {
    padding-block: clamp(2.25rem, 5vw, 3.75rem);
}

/* Zweispaltiges Grundraster: linke Spalte rechtsbündig (Heading-Seite). */
.section .wp-block-columns {
    gap: clamp(2rem, 5vw, 4rem);
}

.section__aside {
    text-align: right;
}

.section__aside h2 {
    margin-block: 0;
}

.section__subline {
    margin-block-start: 0.75rem;
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--large);
    font-weight: 300;
    line-height: 1.33;
    color: var(--wp--preset--color--contrast);
}

/* WP-Block-Gap-Versatz in Spalten neutralisieren. */
.section .wp-block-column > * {
    margin-block-start: 0;
}

.section .wp-block-column > * + * {
    margin-block-start: var(--wp--preset--spacing--30);
}

/* ── Text-Intro („Ihr Partner im Streitfall") ─────────── */
.text-intro__lead {
    font-size: var(--wp--preset--font-size--medium);
}

.text-intro__body p:not(.text-intro__lead) {
    font-size: var(--wp--preset--font-size--small);
}

/* ── CTA-Banner (blaue Zeile mit Rechteck-Icon) ───────── */
.cta-banner {
    padding-block: clamp(2rem, 4.5vw, 3.5rem);
}

/* Web-Silka-Light läuft ~8 % breiter als die Figma-Version — die Zeile
   braucht mehr als contentSize, sonst bricht sie dreizeilig um. */
.cta-banner__text {
    position: relative;
    max-width: min(1160px, 100%);
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--x-large);
    font-style: italic;
    font-weight: 300;
    line-height: 1.146;
    color: var(--wp--preset--color--secondary);
}

.cta-banner__text::before {
    content: "";
    position: absolute;
    top: 0.2em;
    left: clamp(-4.5rem, -3.5vw, -1rem);
    width: 0.46em;
    height: 1em;
    border-radius: 0.09em;
    background: var(--wp--preset--color--primary);
}

.cta-banner__text a {
    color: inherit;
    text-decoration: none;
}

/* ── Rechtsgebiete-Liste ──────────────────────────────── */
.rg-item {
    position: relative;
    padding-right: clamp(4.5rem, 8vw, 7rem);
}

.rg-item::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: clamp(2.4rem, 4vw, 3.2rem);
    height: clamp(3.4rem, 5.5vw, 4.7rem);
    transform: translateY(-50%);
    background: url("../images/chevron-blau.png") no-repeat center / contain;
}

.rg-item h3 {
    margin-block: 0;
    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--wp--preset--color--secondary);
}

.rg-item p {
    margin-block-start: 0.35rem;
    font-size: var(--wp--preset--font-size--small);
}

.rg-item--gold::after {
    background-image: url("../images/chevron-gold.png");
}

.rg-item--gold h3 {
    color: var(--wp--preset--color--contrast);
}

.rg-item--gold p {
    color: var(--wp--preset--color--accent);
}

/* ── Stats (Tacho-Kacheln) ────────────────────────────── */
/* Kopfzeile braucht mehr als contentSize: Heading (472px) + Subline (594px)
   passen mit Web-Silka sonst nicht beide einzeilig nebeneinander. */
.stats > .wp-block-columns:first-child {
    max-width: min(1180px, 100%);
}

.stats > .wp-block-columns:first-child .section__aside {
    flex-basis: 44%;
}

.stats > .wp-block-columns:first-child .wp-block-column:last-child {
    flex-basis: 56%;
}

.stats__grid {
    text-align: center;
}

.stats__grid .wp-block-column > * + * {
    margin-block-start: 0.5rem;
}

/* Tacho-Komposition: Schwung-Bogen + Nadel (rotiert um ihre Nabe).
   Default = Endzustand (Editor/ohne JS); tacho.js armiert die Startposition
   und löst den Schwenk beim Insichtkommen aus. */
.tacho {
    position: relative;
    width: clamp(170px, 17vw, 222px);
    aspect-ratio: 222 / 165;
    margin: 0 auto var(--wp--preset--spacing--20);
}

.tacho__schwung {
    display: block;
    width: 100%;
    color: var(--tacho-schwung);
}

.tacho__nadel {
    position: absolute;
    left: 21%;
    bottom: -2%;
    width: 60%;
    color: var(--tacho-nadel);
    transform: rotate(var(--tacho-end));
    transform-origin: 14.4% 79.2%;
}

.tacho--armed .tacho__nadel {
    transform: rotate(-200deg);
}

.tacho--armed.tacho--run .tacho__nadel {
    transform: rotate(var(--tacho-end));
    transition: transform 2.6s cubic-bezier(0.34, 1.3, 0.42, 1);
}

/* Alle Nadeln enden am Ende des Schwungs (oben rechts). */
.tacho {
    --tacho-end: -8deg;
}

.tacho--gold {
    --tacho-schwung: #cfa243;
    --tacho-nadel: #20467a;
}

.tacho--grau {
    --tacho-schwung: #a3a3a3;
    --tacho-nadel: #cfa243;
}

.tacho--blau {
    --tacho-schwung: #20467a;
    --tacho-nadel: #cfa243;
}

@media (prefers-reduced-motion: reduce) {
    .tacho--armed .tacho__nadel,
    .tacho--armed.tacho--run .tacho__nadel {
        transform: rotate(var(--tacho-end));
        transition: none;
    }
}

.stat__value {
    font-family: var(--wp--preset--font-family--serif);
    font-size: var(--wp--preset--font-size--xx-large);
    font-weight: 700;
    line-height: 1.1;
}

.stat__label {
    font-family: var(--wp--preset--font-family--serif);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 300;
    line-height: 1.25;
}

/* ── Kontakt-Block ────────────────────────────────────── */
/* Figma: ein Textblock Roboto Slab 24/36 — Zeilen innerhalb einer Gruppe
   fließen bündig, Gruppen (Kontakt | Adresse | Zeiten) trennt eine Lücke. */
.kontakt-block__logo {
    margin: 0 0 1.75rem;
    max-width: 322px;
}

.kontakt-block__row {
    display: grid;
    grid-template-columns: minmax(6.5rem, auto) 1fr;
    gap: 0.25rem 1.5rem;
}

.kontakt-block__row strong a {
    color: inherit;
    text-decoration: none;
}

.kontakt-block__info p {
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.5;
}

/* .section-Präfix nötig: sonst verliert die Regel gegen
   .section .wp-block-column > * + * (Spezifität 0,2,0). */
.section .kontakt-block__info > p + p {
    margin-block-start: 0.125rem;
}

.section .kontakt-block__info > figure + p {
    margin-block-start: 0;
}

.section .kontakt-block__info > p:not(.kontakt-block__row),
.section .kontakt-block__info > p:not(.kontakt-block__row) + .kontakt-block__row {
    margin-block-start: 1.25rem;
}

/* ── Formular-Sektion (CF7) ───────────────────────────── */
.form-modul .wpcf7 {
    max-width: 27rem;
}

.form-modul .wpcf7 p {
    margin-block: 0 var(--wp--preset--spacing--20);
}

.form-modul input[type="text"],
.form-modul input[type="email"],
.form-modul textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 0.7rem 1.1rem;
    border: 1px solid var(--wp--preset--color--muted);
    border-radius: 8px;
    font-family: var(--wp--preset--font-family--sans);
    font-size: 1.0625rem;
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
}

.form-modul textarea {
    min-height: 3.1rem;
    resize: vertical;
}

.form-modul ::placeholder {
    font-style: italic;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted);
    opacity: 1;
}

.form-modul .form-modul__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--wp--preset--spacing--40);
    flex-wrap: wrap;
}

.form-modul .wpcf7-acceptance {
    display: inline-block;
    max-width: 13rem;
    font-family: var(--wp--preset--font-family--sans);
    font-size: 0.8125rem;
    line-height: 1.35;
}

.form-modul .wpcf7-acceptance a {
    display: block;
}

.form-modul .wpcf7-submit {
    padding: 0.625rem 2.6rem;
    border: 0;
    border-radius: 10px;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
    font-family: var(--wp--preset--font-family--sans);
    font-size: var(--wp--preset--font-size--medium);
    font-style: italic;
    font-weight: 700;
    cursor: pointer;
}

.form-modul .wpcf7-submit:hover,
.form-modul .wpcf7-submit:focus-visible {
    background: var(--wp--preset--color--secondary);
}

/* ── Text zweispaltig („Wer wir sind") ────────────────── */
.text-columns p {
    font-size: var(--wp--preset--font-size--small);
}

/* ── Team-Karten ──────────────────────────────────────── */
.team__grid {
    gap: clamp(2rem, 4vw, 3.5rem);
}

.team-card .team-card__photo {
    margin: 0 0 var(--wp--preset--spacing--20);
}

.team-card .team-card__photo img {
    width: 100%;
    height: auto;
}

.team-card h3 {
    margin-block: 0;
    font-family: var(--wp--preset--font-family--heading);
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    font-weight: 300;
    color: var(--wp--preset--color--primary);
}

.team-card__role {
    margin-block-start: 0.25rem;
    text-align: right;
    font-size: var(--wp--preset--font-size--medium);
}

.team-card p:not(.team-card__role) {
    font-size: var(--wp--preset--font-size--small);
}

/* ── Button mit optionalem Icon ───────────────────────── */
.btn-cta .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

/* ── Listen mit Icon (decorativ via ::before) ─────────── */
.list-check ul,
ul.list-check {
    list-style: none;
    padding-left: 0;
}

.list-check li {
    position: relative;
    padding-left: 2.2rem;
    margin-block: 0.5rem;
}

.list-check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 1.4rem;
    height: 1.4rem;
    background: var(--wp--preset--color--primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ── Beitrags-Meta ────────────────────────────────────── */
.post-meta {
    gap: var(--wp--preset--spacing--20);
    color: var(--wp--preset--color--secondary);
    font-size: var(--wp--preset--font-size--small);
}

/* ── Footer ───────────────────────────────────────────── */
/* Dezente Verlaufs-Leiste (Figma: schwarz→grau→schwarz bei 10 % über Weiß). */
.site-footer {
    padding-inline: var(--wp--preset--spacing--30);
    background:
        linear-gradient(90deg, rgb(0 0 0 / 10%), rgb(119 119 119 / 10%) 50%, rgb(0 0 0 / 10%)),
        var(--wp--preset--color--base);
    margin-top: 0;
}

/* Inner folgt dem Header-Container (60rem); Typo laut Figma: Noto Sans
   Regular 18/24, Links nicht fett. Inhalt sitzt unten in der 86px-Leiste
   (12px Bodenabstand, Restluft oben) — wie im Figma bottom-verankert. */
.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--30);
    box-sizing: border-box;
    max-width: 60rem;
    margin-inline: auto;
    min-height: 5.375rem;
    padding-block: 0.75rem;
}

.site-footer__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    font-family: var(--wp--preset--font-family--sans);
    font-size: 1.125rem;
    line-height: 1.33;
}

.site-footer__legal {
    display: flex;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.site-footer__legal a {
    color: var(--wp--preset--color--primary);
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
    color: var(--wp--preset--color--secondary);
}

.site-footer__social {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--20);
}

.site-footer__social a {
    display: inline-flex;
    color: var(--wp--preset--color--primary);
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
    color: var(--wp--preset--color--secondary);
}

.site-footer__social img {
    display: block;
    width: 2.8rem;
    height: 2.8rem;
}

.site-footer__social a:hover img,
.site-footer__social a:focus-visible img {
    opacity: 0.8;
}

/* ── Slider (Swiper · progressive enhancement) ────────── */
.wd-slider {
    position: relative;
}

/* Fallback: solange Swiper nicht initialisiert ist (kein/fehlerhaftes JS),
   stehen die Slides als lesbarer Stack untereinander. */
.wd-slider:not(.swiper-initialized) .wd-slider__slide + .wd-slider__slide {
    margin-top: var(--wp--preset--spacing--30);
}

.wd-slider__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
    box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
    cursor: pointer;
}

.wd-slider__nav--prev {
    left: var(--wp--preset--spacing--20);
}

.wd-slider__nav--next {
    right: var(--wp--preset--spacing--20);
}

.wd-slider__nav::before {
    content: "";
    width: 1rem;
    height: 1rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") no-repeat center / contain;
}

.wd-slider__nav--prev::before {
    transform: rotate(180deg);
}

.wd-slider__dots {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: var(--wp--preset--spacing--20);
}

/* Touch-/Mobilbreiten: Pfeile ausblenden — sie überlappen schmale Slides.
   Wischen und die Pagination-Punkte genügen zur Bedienung. */
@media (max-width: 782px) {
    .wd-slider__nav {
        display: none;
    }
}