/*!
 * WAB News – Nachrichtenliste (Liste, Raster), Karten und Detailansicht.
 * Farben, Rundungen, Schatten und Schriftgrößen aus der globalen root.css (--wab-color-*, --wab-radius-*, --wab-shadow, --wab-h*-size).
 */

.wab-news,
.wab-news-full {
    --wab-news-accent: var(--wab-color-primary, #1d6b3a);
    --wab-news-accent-text: var(--wab-color-primary-text, #fff);
    --wab-news-border: var(--wab-color-border, #dfe5e1);
    --wab-news-soft: var(--wab-color-light, #f4f7f5);
    --wab-news-gap: clamp(20px, 2.5vw, 32px);
}

/* ------------------------------------------------------------------ */
/* Button                                                              */
/* ------------------------------------------------------------------ */

.wab-news__more {
    margin: var(--wab-news-gap) 0 0;
    text-align: center;
}

.wab-news-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .8rem 1.5rem;
    border: 2px solid var(--wab-news-accent);
    border-radius: var(--wab-radius-button, 999px);
    background: var(--wab-news-accent);
    color: var(--wab-news-accent-text);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color var(--wab-speed, .3s) ease, color var(--wab-speed, .3s) ease;
}

.wab-news-button:hover,
.wab-news-button:focus-visible {
    background: transparent;
    color: var(--wab-news-accent);
}

/* ------------------------------------------------------------------ */
/* Anordnung                                                           */
/* ------------------------------------------------------------------ */

.wab-news__items {
    display: grid;
    gap: var(--wab-news-gap);
}

.wab-news--grid .wab-news__items {
    grid-template-columns: repeat(var(--wab-news-cols, 1), minmax(0, 1fr));
}

.wab-news--cols-2 { --wab-news-cols: 2; }
.wab-news--cols-3 { --wab-news-cols: 3; }
.wab-news--cols-4 { --wab-news-cols: 4; }

.wab-news__item {
    display: flex;
    min-width: 0;
}

.wab-news__item > .wab-news-card {
    flex: 1 1 auto;
}

/* ------------------------------------------------------------------ */
/* Karte                                                               */
/* ------------------------------------------------------------------ */

.wab-news-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--wab-news-border);
    border-radius: var(--wab-radius-card, 8px);
    background: var(--wab-color-background, #fff);
    box-shadow: var(--wab-shadow, 0 10px 30px rgba(0, 0, 0, .08));
}

.wab-news-card__media figure,
.wab-news-card__media .image_container {
    margin: 0;
}

.wab-news-card__media a,
.wab-news-card__media img {
    display: block;
}

.wab-news-card__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .6s var(--wab-ease, ease);
}

.wab-news-card__media {
    overflow: hidden;
}

.wab-news-card:hover .wab-news-card__media img {
    transform: scale(1.04);
}

.wab-news-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: clamp(20px, 2.5vw, 30px);
}

.wab-news-card__date {
    margin: 0 0 .4em;
    color: var(--wab-news-accent);
    font-size: var(--wab-font-size-small, .875em);
    font-weight: 600;
}

.wab-news-card__title {
    margin: 0 0 .5em;
    font-size: var(--wab-h4-size, 1.3rem);
}

.wab-news-card__title a {
    color: inherit;
    text-decoration: none;
}

.wab-news-card__title a:hover,
.wab-news-card__title a:focus-visible {
    color: var(--wab-news-accent);
}

.wab-news-card__subtitle {
    margin: -.25em 0 .75em;
    font-weight: 600;
}

.wab-news-card__teaser > :first-child { margin-top: 0; }
.wab-news-card__teaser > :last-child { margin-bottom: 0; }

.wab-news-card__more {
    margin: auto 0 0;
    padding-top: 1.25em;
}

.wab-news-card__more a {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    color: var(--wab-news-accent);
    font-weight: 700;
    text-decoration: none;
}

.wab-news-card__more a::after {
    content: '→';
    transition: transform var(--wab-speed, .3s) ease;
}

.wab-news-card__more a:hover::after,
.wab-news-card__more a:focus-visible::after {
    transform: translateX(4px);
}

/* Liste und eine Karte je Reihe/Slide: Bild links, Text rechts */
@media (min-width: 768px) {
    .wab-news--cols-1 .wab-news-card--image {
        flex-direction: row;
    }

    .wab-news--cols-1 .wab-news-card--image .wab-news-card__media {
        flex: 0 0 42%;
    }

    .wab-news--cols-1 .wab-news-card--image .wab-news-card__media :is(figure, .image_container, a, picture) {
        height: 100%;
    }

    .wab-news--cols-1 .wab-news-card--image .wab-news-card__media img {
        height: 100%;
        min-height: 260px;
        aspect-ratio: auto;
    }

    .wab-news--cols-1 .wab-news-card__body {
        justify-content: center;
        padding: clamp(24px, 4vw, 48px);
    }
}

@media (max-width: 1023px) {
    .wab-news--grid.wab-news--cols-3 .wab-news__items,
    .wab-news--grid.wab-news--cols-4 .wab-news__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .wab-news--grid .wab-news__items {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Seitenzahlen */
.wab-news .pagination {
    margin-top: var(--wab-news-gap);
}

.wab-news .pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wab-news .pagination p {
    margin: 0 0 .5em;
    text-align: center;
    font-size: var(--wab-font-size-small, .875em);
}

.wab-news .pagination :is(a, strong) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--wab-news-border);
    border-radius: var(--wab-radius-button, 999px);
    color: var(--wab-news-accent);
    text-decoration: none;
}

.wab-news .pagination strong,
.wab-news .pagination a:hover {
    border-color: var(--wab-news-accent);
    background: var(--wab-news-accent);
    color: var(--wab-news-accent-text);
}

.wab-news__empty {
    margin: 0;
    padding: 1.5em;
    border-radius: var(--wab-radius-card, 8px);
    background: var(--wab-news-soft);
    text-align: center;
}

/* ------------------------------------------------------------------ */
/* Detailansicht                                                       */
/* ------------------------------------------------------------------ */

.wab-news-full {
    max-width: 860px;
    margin: 0 auto;
}

.wab-news-full__date {
    margin: 0 0 .5em;
    color: var(--wab-news-accent);
    font-weight: 600;
}

.wab-news-full__title {
    margin-top: 0;
}

.wab-news-full__subtitle {
    margin: -.25em 0 1em;
    font-size: var(--wab-h4-size, 1.3rem);
    font-weight: 600;
}

.wab-news-full__media {
    margin: 0 0 1.5em;
}

.wab-news-full__media figure {
    margin: 0;
}

.wab-news-full__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--wab-radius-image, 16px);
}

.wab-news-full__enclosure {
    margin: 1.5em 0 0;
    padding: 1em 1.25em;
    border-radius: var(--wab-radius-card, 8px);
    background: var(--wab-news-soft);
    list-style: none;
}

.mod_newsreader .back {
    max-width: 860px;
    margin: 2em auto 0;
}

.mod_newsreader .back a {
    display: inline-flex;
    gap: .4em;
    color: var(--wab-color-primary, #1d6b3a);
    font-weight: 700;
    text-decoration: none;
}

.mod_newsreader .back a::before {
    content: '←';
}

/*
 * root.css – zentrale Gestaltung der gesamten Seite und aller WAB-Plugins
 * ==========================================================================
 *
 * Eingebunden im Seitenlayout „Layout Standard“ unter „Externe Stylesheets“.
 * Alle Einstellungen stehen als Variablen im ersten :root-Block. Wer hier einen Wert ändert,
 * ändert ihn überall: Fließtext, Überschriften, Buttons, Slider, Boxen, Bild & Text, Seitentrenner, Header, Footer …
 *
 * Für ein neues Projekt genügt es meist, die Farben, die Schriften (inkl. @font-face) und die Schriftgrößen anzupassen.
 *
 * Nicht hier, sondern im Backend unter Layout → Seitenlayout → „Breakpoints und Inhaltsbreite“ eingestellt
 * (weil Media Queries keine Variablen können): Breakpoints, Inhaltsbreiten (--wab-container …), Seitenrand (--wab-gutter)
 * und die Abschnittsabstände S–XL (--wab-space-s … --wab-space-xl).
 */

:root {
    /* ======================================================================
       1. Farben
       Zu jeder Farbe gehört eine Textfarbe (-text), die auf dieser Farbe gut lesbar ist.
       ====================================================================== */

    /* Primärfarbe – Rot aus dem Logo (Praxis Dr. Püschel) */
    --wab-color-primary: #b72e2c;
    --wab-color-primary-text: #ffffff;

    /* Sekundärfarbe – dunkles Anthrazit (Text der Seite) */
    --wab-color-secondary: #2b2e34;
    --wab-color-secondary-text: #ffffff;

    /* Komplementärfarbe – Petrol, gegenüber dem Rot im Farbkreis */
    --wab-color-complementary: #2c8f91;
    --wab-color-complementary-text: #ffffff;

    /* Hell – für ruhige Hintergründe */
    --wab-color-light: #efefef;
    --wab-color-light-text: #2b2e34;

    /* Dunkel – für Fußbereiche und kontrastreiche Abschnitte */
    --wab-color-dark: #000000;
    --wab-color-dark-text: #ffffff;

    /* Grundfarben der Seite */
    --wab-color-text: #2b2e34;          /* Fließtext */
    --wab-color-heading: inherit;     /* Überschriften (inherit = wie der Text) */
    --wab-color-background: #ffffff;    /* Seitenhintergrund */
    --wab-color-link: var(--wab-color-primary);
    --wab-color-link-hover: var(--wab-color-dark);
    --wab-color-border: #d9d9d9;        /* Linien, Rahmen */

    /* Topbar (Leiste über der Navigation, Topbar-Modul, Hintergrundfarbe „Topbarfarbe (root.css)“) */
    --wab-color-topbar: #ffffff;           /* Hintergrund */
    --wab-color-topbar-text: var(--wab-color-text); /* Text und Icons */

    /* Navigation (Header-Modul, Hintergrundfarbe „Navigationsfarbe (root.css)“) – gilt auch für das mobile Menü */
    --wab-color-nav: #ffffff;                       /* Hintergrund */
    --wab-color-nav-text: #000000;    /* Menüpunkte */
    --wab-color-nav-accent: var(--wab-color-primary); /* aktive Seite, Unterstreichung, Hover */

    /* Footer (Footer-Modul, Hintergrundfarbe „Footerfarbe (root.css)“) */
    --wab-color-footer: var(--wab-color-dark);           /* Hintergrund */
    --wab-color-footer-text: var(--wab-color-dark-text); /* Text */
    --wab-color-footer-accent: var(--wab-color-primary); /* Striche unter Überschriften, Icons, Pfeile, Hover */

    /* ======================================================================
       2. Schriften
       Die Dateien liegen lokal unter files/content/fonts/ (kein Abruf bei Google → DSGVO-konform).
       Austausch: neue .woff2-Dateien ablegen, @font-face unten anpassen, die beiden Namen hier ändern.
       ====================================================================== */

    --wab-font-main: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --wab-font-accent: var(--wab-font-main);

    --wab-font-weight-normal: 300;
    --wab-font-weight-bold: 700;
    --wab-font-accent-weight: 600;      /* Stärke der Akzentschrift (Überschriften h1/h2) */
    --wab-font-accent-spacing: 0;   /* Buchstabenabstand der Akzentschrift */

    /* ======================================================================
       3. Schriftgrößen – dynamisch
       Die Schrift wächst mit der Fensterbreite von „min“ (Smartphone, 360 px) bis „max“ und bleibt dann stehen.
       --wab-font-fluid: Wachstum pro Pixel Fensterbreite (0 = feste Größe, 0.004 = wächst um 4 px je 1000 px)
       ====================================================================== */

    --wab-font-size-min: 1.0625rem;     /* 17 px – Fließtext auf Smartphones */
    --wab-font-size-max: 1.2188rem;      /* 20 px – Fließtext höchstens (große Bildschirme) */
    --wab-font-fluid: .003;

    --wab-font-size-small: .875em;      /* kleine Texte (relativ zum Fließtext) */
    --wab-line-height: 1.6;             /* Zeilenabstand Fließtext */

    /* Überschriften: jeweils kleinste und größte Größe, dazwischen wachsen sie mit */
    --wab-h1-min: 2rem;      --wab-h1-max: 2.5rem;
    --wab-h2-min: 1.625rem;  --wab-h2-max: 2.6rem;
    --wab-h3-min: 1.375rem;  --wab-h3-max: 1.5rem;
    --wab-h4-min: 1.1875rem; --wab-h4-max: 1.375rem;
    --wab-h5-min: 1.0625rem; --wab-h5-max: 1.125rem;
    --wab-h6-min: 1rem;      --wab-h6-max: 1rem;
    --wab-heading-fluid: .012;          /* Wachstum der Überschriften (wie --wab-font-fluid) */
    --wab-heading-line-height: 1.2;

    /* ======================================================================
       4. Abstände im Text
       ====================================================================== */

    --wab-paragraph-gap: 1em;           /* Abstand über und unter Absätzen und Listen */
    --wab-heading-gap-top: 1.5em;       /* Abstand über Überschriften im Fließtext */
    --wab-heading-gap-bottom: .5em;     /* Abstand unter Überschriften */

    /* ======================================================================
       5. Formen, Schatten, Bewegung
       ====================================================================== */

    --wab-radius-button: 0;         /* Buttons (999px = Pillenform, 4px = leicht abgerundet) */
    --wab-radius-box: 6px;              /* Textboxen in Slider und Seitentrenner */
    --wab-radius-card: 0;             /* Boxen-Karten */
    --wab-radius-image: 0;           /* Bilder bei „Bild & Text“ */

    --wab-shadow: 0 10px 30px rgba(0, 0, 0, .08);

    --wab-speed: .35s;                  /* Dauer von Übergängen (Hover, Header) */
    --wab-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   Ab hier wird nur noch berechnet und angewendet – Einstellungen bitte oben ändern.
   ========================================================================== */

/* Schriftdateien (Pfade relativ zu dieser Datei) */

/* Hauptschrift: Atkinson Hyperlegible Next – vom Braille Institute für Menschen mit Sehschwäche entwickelt,
   eindeutige Buchstabenformen (I/l/1, O/0, b/d). Variable Schrift, Stärken 200–800. */
@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../../files/content/fonts/atkinson-hyperlegible-next.woff2') format('woff2');
}

@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
    src: url('../../files/content/fonts/atkinson-hyperlegible-next-italic.woff2') format('woff2');
}

/* Dynamische Größen: clamp(kleinste, mitwachsend ab 360 px Fensterbreite, größte) */
:root {
    --wab-font-size-base: clamp(var(--wab-font-size-min), calc(var(--wab-font-size-min) + (100vw - 360px) * var(--wab-font-fluid)), var(--wab-font-size-max));

    --wab-h1-size: clamp(var(--wab-h1-min), calc(var(--wab-h1-min) + (100vw - 360px) * var(--wab-heading-fluid)), var(--wab-h1-max));
    --wab-h2-size: clamp(var(--wab-h2-min), calc(var(--wab-h2-min) + (100vw - 360px) * var(--wab-heading-fluid)), var(--wab-h2-max));
    --wab-h3-size: clamp(var(--wab-h3-min), calc(var(--wab-h3-min) + (100vw - 360px) * var(--wab-heading-fluid)), var(--wab-h3-max));
    --wab-h4-size: clamp(var(--wab-h4-min), calc(var(--wab-h4-min) + (100vw - 360px) * var(--wab-heading-fluid)), var(--wab-h4-max));
    --wab-h5-size: clamp(var(--wab-h5-min), calc(var(--wab-h5-min) + (100vw - 360px) * var(--wab-heading-fluid)), var(--wab-h5-max));
    --wab-h6-size: clamp(var(--wab-h6-min), calc(var(--wab-h6-min) + (100vw - 360px) * var(--wab-heading-fluid)), var(--wab-h6-max));
}

/*
 * Grundgestaltung. :where() hat keine Spezifität – jede Regel eines Plugins oder Elements gewinnt,
 * die Werte hier sind nur die Vorgabe für alles, was nichts Eigenes festlegt.
 * Ausnahme body: normale Spezifität, damit das Contao-Grund-CSS (body { font-size: 100.01% }) nicht gewinnt.
 */
body {
    margin: 0;
    background-color: var(--wab-color-background);
    color: var(--wab-color-text);
    font-family: var(--wab-font-main);
    font-size: var(--wab-font-size-base);
    font-weight: var(--wab-font-weight-normal);
    line-height: var(--wab-line-height);
}

:where(h1, h2, h3, h4, h5, h6) {
    margin: var(--wab-heading-gap-top) 0 var(--wab-heading-gap-bottom);
    color: var(--wab-color-heading);
    font-weight: var(--wab-font-weight-bold);
    line-height: var(--wab-heading-line-height);
}

:where(h1) { font-size: var(--wab-h1-size); }
:where(h2) { font-size: var(--wab-h2-size); }
:where(h3) { font-size: var(--wab-h3-size); }
:where(h4) { font-size: var(--wab-h4-size); }
:where(h5) { font-size: var(--wab-h5-size); }
:where(h6) { font-size: var(--wab-h6-size); }

/* Akzentschrift: automatisch für h1 und h2, sonst per CSS-Klasse „wab-font-accent“ (z. B. im Feld „CSS-Klasse“ eines Elements) */
:where(h1, h2),
.wab-font-accent {
    font-family: var(--wab-font-accent);
    font-weight: var(--wab-font-accent-weight);
    letter-spacing: var(--wab-font-accent-spacing);
}

/* Kein Abstand über dem ersten Element eines Inhaltselements – den Abstand regelt der Abschnitt (Artikel) */
:where([class^="content-"], .rte) > :first-child {
    margin-top: 0;
}

:where(p, ul, ol, dl, blockquote) {
    margin-block: var(--wab-paragraph-gap);
}

:where(small) {
    font-size: var(--wab-font-size-small);
}

:where(a) {
    color: var(--wab-color-link);
    text-underline-offset: .15em;
    transition: color var(--wab-speed) var(--wab-ease);
}

:where(a:hover, a:focus-visible) {
    color: var(--wab-color-link-hover);
}

:where(hr) {
    border: 0;
    border-top: 1px solid var(--wab-color-border);
}

/* Praxis Dr. Püschel – ergänzende Gestaltung (Farben, Schrift und Größen stehen in root.css) */
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; }
figure { margin: 0; }

/* Hilfsklassen für Inhaltselemente (Feld „CSS-Klasse“) */
.pu-center { text-align: center; }
.pu-left { text-align: left; }
.pu-lead { max-width: 62ch; margin-left: auto; margin-right: auto; }
.pu-kicker p { margin: 0 0 .6rem; text-transform: uppercase; font-size: .8rem; letter-spacing: .08em; font-weight: 400; }

/* Buttons: Element „Hyperlink“ mit Klasse pu-btn */
.content-hyperlink.pu-btn { display: inline-block; margin: 1.2rem 1rem 0 0; }
.content-hyperlink.pu-btn a {
  display: inline-block; border: 1px solid #444; background: #fff; color: #000; text-decoration: none; text-transform: uppercase;
  font-size: .8rem; letter-spacing: .05em; padding: .85em 1.6em; transition: var(--wab-speed, .3s);
}
.content-hyperlink.pu-btn a:hover { background: #000; border-color: #000; color: #fff; }
.content-hyperlink.pu-btn--red a { background: var(--wab-color-primary); border-color: var(--wab-color-primary); color: #fff; font-weight: 700; }
.content-hyperlink.pu-btn--red a:hover { background: #8f2321; border-color: #8f2321; }
.pu-center + .content-hyperlink.pu-btn { margin-left: .5rem; margin-right: .5rem; }

/* Topbar-Button */
.wab-topbar a { text-decoration: none; }
.pu-topbtn { display: inline-block; background: var(--wab-color-primary); color: #fff !important; text-transform: uppercase; font-size: .78rem; letter-spacing: .04em; padding: .7em 1.4em; font-weight: 700; margin-left: 1rem; }

/* Hinweisleiste (Startseite) */
.pu-alert { background: var(--wab-color-primary); color: #fff; text-transform: uppercase; font-weight: 700; letter-spacing: .03em; text-align: center; padding: .9rem 1rem; font-size: .9rem; }
.pu-alert p { margin: 0; }

/* Sprechzeiten */
.pu-hours dl.company-opening-hours { display: grid; grid-template-columns: max-content max-content; gap: .5rem 2.5rem; justify-content: center; text-align: left; margin: 1.5rem auto; }
.pu-hours dl.company-opening-hours dt { font-weight: 700; }
.pu-hours dl.company-opening-hours dd { margin: 0; }

/* FAQ (Modul „FAQ-Seite“ mit Template mod_faqpage) */
.pu-faq { max-width: 900px; margin: 2.5rem auto 0; }
.pu-faq details { border-bottom: 1px solid var(--wab-color-border); padding: 1.1rem 0; }
.pu-faq details:first-child { border-top: 1px solid var(--wab-color-border); }
.pu-faq summary { cursor: pointer; font-weight: 700; font-size: 1.1rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.pu-faq summary::-webkit-details-marker { display: none; }
.pu-faq summary::after { content: "﹀"; color: var(--wab-color-primary); transition: transform .2s; }
.pu-faq details[open] summary::after { transform: rotate(180deg); }
.pu-faq details .content-text { margin-top: 1rem; }

/* Galerie */
.content-image img, .content-gallery img { display: block; width: 100%; height: auto; }
.content-gallery ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.content-gallery--cols-5 ul { grid-template-columns: repeat(5, 1fr); }
.content-gallery li { margin: 0; }
.wab-section--full .content-image { margin: 0; padding: 0; }
.wab-section--full { padding-left: 0; padding-right: 0; }

/* Formulare */
.formbody { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 3rem; }
.formbody .widget { margin: 0; }
.formbody .widget-textarea, .formbody .widget-radio, .formbody .widget-checkbox, .formbody .widget-submit, .formbody .widget-explanation { grid-column: 1 / -1; }
.formbody label { display: block; font-weight: 700; font-size: .85rem; margin-bottom: .3rem; }
.formbody input.text, .formbody textarea, .formbody select { width: 100%; box-sizing: border-box; border: 1px solid #ccc; background: #fff; padding: .8rem 1rem; font: inherit; border-radius: 0; }
.formbody textarea { min-height: 180px; }
.formbody fieldset { border: 0; padding: 0; margin: 0; }
.formbody .radio_container span, .formbody .checkbox_container span { display: inline-block; margin-right: 1.5rem; }
.formbody button.submit, .formbody .submit { background: var(--wab-color-primary); color: #fff; border: 0; padding: 1em 2.2em; text-transform: uppercase; font-weight: 700; letter-spacing: .05em; cursor: pointer; font-family: inherit; }

@media (max-width: 1024px) { .content-gallery--cols-5 ul { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) {
  .formbody { grid-template-columns: 1fr; }
  .content-gallery ul, .content-gallery--cols-5 ul { grid-template-columns: repeat(2, 1fr); }
  .pu-topbtn { margin-left: 0; }
}

/* Navigation */
.wab-site-header nav a { text-transform: uppercase; font-size: .85rem; letter-spacing: .03em; }
.content-hyperlink.pu-btn { vertical-align: top; }

/* ==========================================================================
   Header nach XD: Logo links über zwei Zeilen, rechts oben Telefon/E-Mail/Button, darunter die Navigation
   ========================================================================== */
.wab-topbar a.pu-topbtn {
  display: inline-block; background: var(--wab-color-primary); background-image: none; color: #fff !important;
  text-transform: uppercase; font-size: .8rem; letter-spacing: .04em; padding: 0 1.8rem; line-height: 3rem; height: 3rem; font-weight: 500; margin-left: 1.5rem; vertical-align: middle;
}
.wab-topbar a.pu-topbtn:hover { background: #8f2321; }
.wab-topbar__col--right p { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0 1.2rem; }

@media (min-width: 1025px) {
  .wab-site-header:not(.is-compact) .wab-site-header__bar {
    display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 3rem;
    padding-inline: max(var(--wab-gutter, 16px), calc((100% - var(--wab-container, 1470px)) / 2));
    background: #fff;
  }
  .wab-site-header:not(.is-compact) .wab-site-header__topbar,
  .wab-site-header:not(.is-compact) .wab-site-header__topbar-inner { display: contents; }
  .wab-site-header:not(.is-compact) .wab-topbar { grid-column: 2; grid-row: 1; background: transparent; color: var(--wab-color-text); padding: 0; }
  .wab-site-header:not(.is-compact) .wab-topbar__inner { padding: .6rem 0 0; grid-template-columns: 1fr; }
  .wab-site-header:not(.is-compact) .wab-topbar__col--left,
  .wab-site-header:not(.is-compact) .wab-topbar__col--center { display: none; }
  .wab-site-header:not(.is-compact) .wab-header,
  .wab-site-header:not(.is-compact) .wab-header__inner { display: contents; }
  .wab-site-header:not(.is-compact) .wab-header__logo { grid-column: 1; grid-row: 1 / span 2; }
  .wab-site-header:not(.is-compact) .wab-header__menu { grid-column: 2; grid-row: 2; justify-self: end; }
}
.wab-site-header nav a { text-transform: uppercase; font-size: .85rem; letter-spacing: .03em; }

/* ==========================================================================
   Zweispaltige Abschnitte (Element-Gruppe „pu-split“) und Icons vor Überschriften
   ========================================================================== */
.pu-split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.pu-split__img img { display: block; width: 100%; height: auto; }
.pu-split__text > :first-child { margin-top: 0; }
.pu-split__text .content-hyperlink.pu-btn { margin-top: 1.5rem; }
.pu-cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 1024px) { .pu-split { grid-template-columns: 1fr; gap: 2rem; } .pu-cols2 { grid-template-columns: 1fr; } }

.pu-ico h2::before {
  content: ""; display: inline-block; width: 94px; height: 74px; margin-right: 1.2rem; vertical-align: middle;
  background: var(--wab-color-secondary); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.pu-ico h2 { display: flex; align-items: center; }

/* Leistungsbereiche (Boxen mit Icon links) */
/* Leistungsbereiche: keine Linien, dünne Schrift */
.pu-areas h3 { font-size: 1.1rem; font-weight: 400; letter-spacing: .02em; margin: 0 0 1.2rem; text-transform: uppercase; border: 0; padding: 0; }
.pu-areas .wab-box h3, .pu-areas .wab-box__title { font-size: 1rem; font-weight: 400; text-transform: uppercase; }
.pu-areas .wab-box { border: 0; }

/* Akkordeon (Elemente „Akkordeon“ und FAQ) mit Plus-Symbol */
details.ce_accordion, .pu-faq details { border-bottom: 1px solid var(--wab-color-secondary); }
details.ce_accordion:first-of-type, .pu-faq details:first-child { border-top: 1px solid var(--wab-color-secondary); }
details.ce_accordion summary, .pu-faq summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem .5rem; font-weight: 700; font-size: 1.15rem; color: var(--wab-color-secondary);
}
details.ce_accordion summary::-webkit-details-marker, .pu-faq summary::-webkit-details-marker { display: none; }
details.ce_accordion summary::after, .pu-faq summary::after {
  content: ""; flex: none; width: 1rem; height: 1rem;
  background: linear-gradient(var(--wab-color-secondary), var(--wab-color-secondary)) center / 100% 2px no-repeat, linear-gradient(var(--wab-color-secondary), var(--wab-color-secondary)) center / 2px 100% no-repeat;
  transition: transform .2s;
}
details.ce_accordion[open] summary::after, .pu-faq details[open] summary::after { transform: rotate(45deg); }
.ce_accordion__body { padding: 0 .5rem 1.2rem; }
.pu-faq summary { font-size: clamp(1.2rem, 1.5vw, 1.7rem); }
.pu-faq { max-width: 1000px; }

/* Notfall-Tabelle */
.pu-emergency { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.pu-emergency td { padding: .9rem .5rem; border-top: 1px solid var(--wab-color-border); }
.pu-emergency tr:last-child td { border-bottom: 1px solid var(--wab-color-border); }
.pu-emergency td:last-child { text-align: right; font-weight: 700; font-size: 1.6rem; color: var(--wab-color-primary); white-space: nowrap; }

/* Icons vor Überschriften (SVG aus files/content/icons, als Maske in Primärfarbe) */
.pu-ico--allgemein{--ico:url('../../files/content/icons/3c1e92-artzt.svg')}
.pu-ico--vorsorge{--ico:url('../../files/content/icons/d8950b-bildschirmfoto-2026-01-1513-um-13-38.svg')}
.pu-ico--diagnostik{--ico:url('../../files/content/icons/9a5542-bildschirmfoto-2026-01-158-um-13-41.svg')}
.pu-ico--diabetologie{--ico:url('../../files/content/icons/4f77ad-vorsorge.svg')}
.pu-ico--kardiologie{--ico:url('../../files/content/icons/18ebbe-kardiologie.svg')}
.pu-ico--gastroenterologie{--ico:url('../../files/content/icons/6e5ceb-gastroenterologi.svg')}
.pu-ico--pulmologie{--ico:url('../../files/content/icons/525e49-pulmologie.svg')}
.pu-ico--termin{--ico:url('../../files/content/icons/cc5171-bildschirmfoto-2026-01-152-um-13-39.svg')}
.pu-ico--rezept{--ico:url('../../files/content/icons/351cd9-checkliste.svg')}
.pu-ico--notfall{--ico:url('../../files/content/icons/e9171a-arztkoffer.svg')}
.pu-ico--hausbesuche{--ico:url('../../files/content/icons/0762ec-hausbesuche.svg')}
.pu-ico--sprechzeiten{--ico:url('../../files/content/icons/ea507a-bildschirmfoto-2026-01-14-um-19-21-48.svg')}

/* Header: Logo nicht abschneiden */
@media (min-width: 1025px) { .wab-site-header:not(.is-compact) .wab-site-header__bar { padding-block: .6rem; } }

/* Überschriften bündig mit der Bildoberkante */
.pu-split > * { margin-top: 0; }
.pu-split__text > :first-child, .pu-split__text > :first-child h2, .pu-split__text > :first-child h3 { margin-top: 0; }
.pu-ico h2, .pu-split__text h2 { margin-top: 0; }
.pu-ico.content-text { line-height: 0; }
.pu-ico.content-text h2 { line-height: 1.15; }
.pu-ico .rte:empty { display: none; }
.pu-areas .wab-box { align-items: center; }
.pu-areas .wab-box > * { align-self: center; }

/* Überschriften auf hellem Grund schwarz, auf dunklem Abschnitt erbt die Schrift die helle Textfarbe */
h1, h2, h3 { color: #000; }
.wab-section[class*="wab-bg-dark"] :where(h1, h2, h3, p, a) { color: inherit; }

/* Praxisteam: Fotos füllen die Karte, Zuschnitt oben, Namen hell auf dunklem Grund */
.wab-contact { background: transparent; box-shadow: none; padding: 0; border-radius: 0; color: inherit; }
.wab-contact__image { width: 100%; margin-bottom: 1rem; }
.wab-contact__image img { aspect-ratio: 676 / 573; object-position: center top; }
.wab-contact__name, .wab-contact__body h3, .wab-contact__body strong { color: inherit; text-transform: none; font-size: 1.1rem; }

/* Zentrierte Button-Reihen (Element-Gruppe „pu-btnrow“) */
.pu-btnrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2rem; }
.pu-btnrow .content-hyperlink.pu-btn { margin: 0; }

/* Leistungsspektrum (Startseite): erste Box ist die Überschrift */
.pu-spectrum .wab-box:first-child h2 { margin: 0; }
.pu-spectrum .wab-box h3 { font-size: 1.05rem; text-transform: uppercase; margin-bottom: .6rem; }
.pu-spectrum .wab-box { font-size: .9rem; }

/* Seitenbuttons rechts (in der XD am Rand fixiert) */
.pu-sidetabs { position: fixed; right: 0; top: 46%; z-index: 60; width: auto; background: transparent; }
.pu-sidetabs .wab-topbar, .pu-sidetabs .wab-topbar__inner { display: block; padding: 0; min-height: 0; background: transparent; }
.pu-sidetabs .wab-topbar__col--left, .pu-sidetabs .wab-topbar__col--center { display: none; }
.pu-sidetabs p { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.pu-sidetabs a.pu-tab { display: block; width: 48px; height: 48px; padding: 0; font-size: 0; background: var(--wab-color-primary); background-image: none; position: relative; border-radius: 3px 0 0 3px; }
.pu-sidetabs a.pu-tab::before { content: ""; position: absolute; inset: 12px; background: #fff; -webkit-mask: var(--tab) center / contain no-repeat; mask: var(--tab) center / contain no-repeat; margin: 0; width: auto; height: auto; }
.pu-sidetabs a.pu-tab--phone { --tab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E"); }
.pu-sidetabs a.pu-tab--mail { --tab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1 2v.5l8 5 8-5V7zm16 3.3-8 5-8-5V17h16z'/%3E%3C/svg%3E"); }
@media (max-width: 767px) { .pu-sidetabs { display: none; } }
.pu-btnrow--left { justify-content: flex-start; }

/* ==========================================================================
   Feinabstimmung nach XD (Maße: XD-Wert / 2 = Pixel bei 1920 px Breite)
   ========================================================================== */

/* Navigation: Regular statt Fett, 19,5 px */
.wab-site-header nav a, .wab-site-header nav strong { font-weight: 400; font-size: clamp(.95rem, 1.02vw, 1.22rem); letter-spacing: 0; color: #18252e; }
.wab-site-header .level_1 > li > :is(a, strong).active, .wab-site-header .level_1 > li > strong { font-weight: 400; }
.wab-topbar { font-size: clamp(.9rem, .86vw, 1.03rem); color: #18252e; }
.wab-topbar a.pu-topbtn { font-weight: 500; font-size: clamp(.9rem, 1.02vw, 1.22rem); }

/* Buttons: transparent, 1 px schwarzer Rahmen, 20 px Schrift (XD: 245 x 58 px) */
.content-hyperlink.pu-btn a {
  background: transparent; border: 1px solid #000; color: #000; font-size: 1.25rem; font-weight: 400; letter-spacing: 0;
  min-width: 245px; box-sizing: border-box; height: 58px; line-height: 56px; padding: 0 1.5rem; text-align: center;
}
.content-hyperlink.pu-btn a:hover { background: #000; color: #fff; }
.pu-hero .content-hyperlink.pu-btn a { border-color: #000; }

/* Hero (Startseite): Kicker über der Überschrift, 68 px Überschrift, 20 px Text */
.pu-hero h1 { font-size: clamp(2.6rem, 3.55vw, 4.25rem); font-weight: 600; line-height: 1.1; }
.pu-hero h1::before {
  content: "Privatpraxis  DR. PÜSCHEL"; display: block; font-size: clamp(1.1rem, 1.2vw, 1.45rem); font-weight: 400; margin-bottom: 1.4rem; line-height: 1.2;
}
.pu-hero p { font-size: 1.25rem; font-weight: 300; }

/* Hinweisleiste: 60 px hoch, 22 px */
.pu-alert { font-size: clamp(.95rem, 1.15vw, 1.375rem); font-weight: 500; padding: 0 1rem; height: 60px; line-height: 60px; text-transform: uppercase; }
.pu-alert p { margin: 0; line-height: 60px; }

/* Erster Trenner (USP-Leiste): senkrechte Striche, Titel 27 px Regular, „Mehr ›“ klein */
.pu-usp .wab-boxes { gap: 0; }
.pu-usp .wab-box { padding: 0 2rem; position: relative; }
.pu-usp .wab-box + .wab-box { border-left: 1px solid #000; }
.pu-usp .wab-box__headline { font-size: clamp(1.4rem, 1.43vw, 1.72rem); font-weight: 400; text-transform: none; line-height: 1.2; margin: 0 0 1rem; color: #000; }
.pu-usp .wab-box__link { color: #000; font-size: .95rem; font-weight: 400; text-decoration: none; background: none; padding: 0; border: 0; }

/* Leistungsspektrum-Boxen: Titel 25 px Semibold in Anthrazit, „Mehr ›“ klein schwarz */
.pu-spectrum .wab-box__headline { font-size: 1.56rem; font-weight: 600; color: var(--wab-color-secondary); }
.pu-spectrum .wab-box:first-child .wab-box__headline { font-size: clamp(2.2rem, 3.1vw, 3.1rem); color: #000; text-transform: none; line-height: 1.1; }
.pu-spectrum .wab-box__link { color: #000; font-size: .95rem; font-weight: 400; text-decoration: none; }

/* Seitenbuttons rechts: 52 px hoch, Telefon klappt beim Überfahren aus, Nach-oben-Button */
.pu-sidetabs a.pu-tab { width: 52px; height: 52px; border-radius: 0; transition: width .3s ease-out; overflow: hidden; white-space: nowrap; }
.pu-sidetabs a.pu-tab::before { inset: 14px auto 14px 14px; width: 24px; height: auto; }
.pu-sidetabs a.pu-tab--phone::after { content: attr(data-phone); position: absolute; left: 62px; top: 0; font-size: 1.2rem; font-weight: 700; line-height: 52px; color: #fff; }
.pu-sidetabs a.pu-tab--phone:hover { width: 252px; }
.pu-sidetabs p { align-items: flex-end; }
.pu-sidetabs { top: 55%; }
.pu-sidetabs a.pu-tab--top { position: fixed; right: 0; top: calc(55% + 230px); background: var(--wab-color-secondary); }
.pu-sidetabs a.pu-tab--top { --tab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8l8 8-1.8 1.8L12 11.6l-6.2 6.2L4 16z'/%3E%3C/svg%3E"); }

/* Split-Abschnitt mittig ausgerichtet (Fragen-Abschnitt) */
.pu-split--center { align-items: center; }

/* Footer wie in der XD: Logo + Adresse links, darunter Sprechzeiten / Notfälle / Hausbesuche mit Icons */
.wab-section .pu-footer__cols { display: grid; grid-template-columns: 1fr 3fr; gap: 3rem; align-items: start; font-size: 1.2rem; }
.pu-footer__col1 img { display: block; width: 284px; height: auto; margin-bottom: 1.5rem; }
.pu-footer__col1 p { margin: 0 0 1rem; }
.pu-footer__boxes .wab-box__headline { font-size: 1.2rem; font-weight: 600; color: #fff; text-transform: uppercase; margin: 1rem 0 1.4rem; position: relative; padding-bottom: .9rem; }
.pu-footer__boxes .wab-box__headline::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 64px; margin-left: -32px; border-bottom: 2px solid #fff; }
.pu-footer__boxes .wab-box__text, .pu-footer__boxes .wab-box__body { font-size: 1.1rem; line-height: 1.5; color: #fff; }
.pu-footer__boxes .wab-box__text p { margin: 0 0 1rem; }
.pu-hours-table { margin: 0 auto 1rem; border-collapse: collapse; text-align: left; font-size: 1rem; }
.pu-hours-table td { padding: 0 .5rem; vertical-align: top; }
.pu-footer__bottom { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 3rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 2px solid #fff; font-size: .95rem; }
.pu-footer__bottom p { margin: 0; }
.pu-footer__bottom ul { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.pu-footer__bottom a { color: #fff; text-decoration: none; text-transform: none; }
@media (max-width: 1024px) { .wab-section .pu-footer__cols { grid-template-columns: 1fr; } }

/* Blog (Seite „Bleib gesund“): Bild links, Text rechts, WEITERLESEN mit Strich, Seitenzahlen als Kästchen */
.wab-news--list .wab-news__items { display: block; }
.wab-news--list .wab-news__item { margin: 0 0 3.2rem; }
.wab-news--list .wab-news-card { display: grid; grid-template-columns: minmax(0, 503px) 1fr; gap: 5rem; align-items: start; max-width: 1320px; margin-inline: auto; background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
.wab-news--list .wab-news-card__media img { display: block; width: 100%; height: auto; }
.wab-news-card__date { font-size: 1.4rem; margin: 0 0 .7rem; color: #000; }
.wab-news-card__title { font-size: clamp(1.8rem, 2.1vw, 2.5rem); font-weight: 600; line-height: 1.15; margin: 0 0 1.2rem; }
.wab-news-card__title a { color: #000; text-decoration: none; }
.wab-news-card__teaser { font-weight: 300; }
.wab-news-card__more a, .wab-news-card__more { text-transform: uppercase; font-size: 1.25rem; color: #000; text-decoration: none; }
.wab-news-card__more a { display: inline-block; border-bottom: 3px solid #000; padding-bottom: .35rem; }
.wab-news-card__more a::after { content: " ›"; }
.pagination { text-align: center; margin-top: 2rem; }
.pagination p { margin: 0 0 1rem; }
.pagination ul { display: flex; justify-content: center; gap: .6rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.pagination li a, .pagination li strong, .pagination li span { display: block; min-width: 72px; height: 32px; line-height: 30px; box-sizing: border-box; border: 1px solid #000; background: #fff; color: #000; text-decoration: none; text-align: center; font-weight: 400; padding: 0 .8rem; }
@media (max-width: 900px) { .wab-news--list .wab-news-card { grid-template-columns: 1fr; gap: 1.5rem; } }

/* Korrekturen (höhere Spezifität gegen Plugin-CSS) */
.wab-header__menu .level_1 > li > :is(a, strong) { font-weight: 400; }
.wab-box__link--stretched.wab-box__link--visible::before { content: none; }
.pu-usp .wab-box__link--stretched.wab-box__link--visible, .pu-spectrum .wab-box__link--stretched.wab-box__link--visible { color: #000; }
.pu-alert, .pu-alert p { font-size: clamp(.8rem, .95vw, 1.15rem); }
.pu-footer .wab-box__icon, .pu-footer__boxes .wab-box__icon { color: var(--wab-color-primary); }
.pu-footer a, .pu-footer__col1 a { color: #fff; text-decoration: none; }

/* Hero (Artikel mit festem Hintergrundbild) */
.pu-hero { max-width: 700px; }
.pu-hero .pu-btnrow { margin-top: 2rem; }

/* Blog-Slider (Startseite): Text links fest, Bild schiebt von rechts herein, Pfeile oben links, ohne Farbe */
.pu-blogslider { position: relative; padding-top: 7.5rem; }
.pu-blogslider::before {
  content: "Blog"; position: absolute; left: 0; top: 0; right: 0; font-weight: 700; font-size: 1.2rem; line-height: 1.2;
  background: linear-gradient(#000, #000) right .55em / calc(100% - 3.6rem) 2px no-repeat;
}
.pu-blogslider .wab-slider { --wab-nav-bg: transparent; --wab-nav-color: #000; }
.pu-blogslider .wab-slider .slick-arrow {
  top: -4.6rem; transform: none; width: 54px; height: 54px; border: 1px solid #000; border-radius: 50%; background: transparent; color: #000; opacity: 1;
}
.pu-blogslider .wab-slider .slick-arrow::before { border-color: #000; }
.pu-blogslider .wab-slider .slick-prev { left: 0; right: auto; }
.pu-blogslider .wab-slider .slick-next { left: 66px; right: auto; }
.pu-blogslider .wab-slider .slick-arrow:hover:not(.slick-disabled) { background: #000; opacity: 1; }
.pu-blogslider .wab-slider .slick-arrow:hover:not(.slick-disabled)::before { border-color: #fff; }
.pu-blogslider .wab-slider.wab-slider--layout-split .wab-slide__inner { background: transparent; box-shadow: none; border-radius: 0; grid-template-columns: minmax(0, 1fr) 55%; gap: 4rem; }
.pu-blogslider .wab-slider--layout-split .wab-slide__inner > .wab-slide__content { padding: 0; }
.pu-blogslider .wab-slider--layout-split .wab-slide__headline { font-size: clamp(1.8rem, 2.1vw, 2.5rem); font-weight: 600; line-height: 1.15; margin-bottom: 1.2rem; }
.pu-blogslider .wab-slider--layout-split .wab-slide__text { font-weight: 300; }
.pu-blogslider .wab-slider--layout-split .wab-slide__media { overflow: hidden; }
.pu-blogslider .wab-slide__link, .pu-blogslider .wab-slide__links a { color: #000; text-decoration: none; border-bottom: 2px solid #000; padding-bottom: .2rem; background: none; }
.pu-hero .pu-btnrow, .pu-split__text .pu-btnrow--left { justify-content: flex-start; }

/* Video im Inhaltsbereich (YouTube-Element mit Poster, 16:9) */
.pu-video { max-width: 100%; }
.pu-video .responsive, .pu-video iframe, .pu-video video { width: 100%; }

/* Header: Beim Scrollen wieder kleiner (Topbar klappt weg, Logo und Menü stehen in einer Zeile) */
@media (min-width: 1025px) {
  .wab-site-header.is-topbar-hidden:not(.is-compact) .wab-topbar { display: none; }
  .wab-site-header.is-topbar-hidden:not(.is-compact) .wab-site-header__bar { padding-block: .35rem; }
  .wab-site-header.is-topbar-hidden:not(.is-compact) .wab-header__logo { grid-row: 1; }
  .wab-site-header.is-topbar-hidden:not(.is-compact) .wab-header__menu { grid-row: 1; align-self: center; }
  .wab-site-header .wab-site-header__bar { transition: padding .3s ease; }
  .wab-site-header.is-scrolled:not(.is-compact) .wab-header__logo img { height: var(--wab-logo-h-scrolled, 60px); }
}

/* Blog-Slider (Startseite): Text fest links, Bilder laufen von rechts durch, nächstes Bild schaut am rechten Rand hervor */
html { overflow-x: clip; }
.pu-blogslider .wab-slider { --pu-text: 76%; --pu-gap: 5.4%; }
.pu-blogslider .wab-slider .slick-list { overflow: visible; margin-left: 45%; }
.pu-blogslider .wab-slider .slick-slide { padding-right: 2.5rem; }
.pu-blogslider .wab-slider.wab-slider--layout-split .wab-slide__inner { display: block; position: relative; grid-template-columns: none; gap: 0; }
.pu-blogslider .wab-slider--layout-split .wab-slide__inner > .wab-slide__media { display: block; min-height: 0; }
.pu-blogslider .wab-slider--layout-split .wab-slide__media img { width: 100%; height: auto; min-height: 0; aspect-ratio: 3 / 2; object-fit: cover; animation: none; }
.pu-blogslider .wab-slider--layout-split .wab-slide__inner > .wab-slide__content {
  position: absolute; top: 0; right: 100%; width: var(--pu-text); margin-right: var(--pu-gap); padding: 0; opacity: 0; transition: opacity .5s ease;
}
.pu-blogslider .wab-slider .slick-current .wab-slide__inner > .wab-slide__content { opacity: 1; }
.pu-blogslider .wab-slider .slick-slide:not(.slick-active) .wab-slide__media { opacity: 1; }
.pu-blogslider .wab-slider .slick-slide { visibility: hidden; }
.pu-blogslider .wab-slider .slick-current, .pu-blogslider .wab-slider .slick-current ~ .slick-slide { visibility: visible; }
.pu-blogslider .wab-slider .wab-slide, .pu-blogslider .wab-slider .wab-slide__inner { overflow: visible; }
.pu-blogslider .wab-slider .wab-slide__inner > .wab-slide__content { display: block; align-items: flex-start; justify-content: flex-start; }
.pu-blogslider .wab-slider .wab-slide__box { text-align: left !important; max-width: none; }
.pu-blogslider .wab-slider .wab-slide__text p { margin-top: 0; }
.pu-blogslider .wab-slider .wab-slide__box { padding: 0; }
.pu-blogslider .wab-slider .wab-slide__links { text-align: left; justify-content: flex-start; }
.pu-blogslider .wab-slider .wab-slide__inner > .wab-slide__content { padding-left: 0; padding-right: 0; }

/* Video: volle Inhaltsbreite im Format 16:9 */
.pu-video figure { margin: 0; }
.pu-video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.pu-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; object-fit: cover; }

/* Video-Element generell: nie breiter als der Inhaltsbereich, Format 16:9 (auch ohne CSS-Klasse am Element) */
.content-player figure { margin: 0; }
.content-player video { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; object-fit: cover; }

/* Navigation: auch der aktive Punkt (strong) in Großbuchstaben */
.wab-site-header nav :is(a, strong), .wab-header__menu :is(a, strong) { text-transform: uppercase; }