/*
 * Bewusst als plain CSS (nicht über Tailwind-Utility-Klassen) umgesetzt:
 * Der Tailwind-Build des Themes scannt nur explizit gelistete Ordner
 * (siehe pplus/src/css/tailwind.css @source) - unser Plugin-Ordner ist dort
 * nicht enthalten. Damit das Layout unabhängig vom Theme-Build zuverlässig
 * funktioniert (auch ohne Rebuild), steht es hier direkt.
 */
.footer-top-menu__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 24px;
    row-gap: 16px;
}

@media (min-width: 520px) {
    .footer-top-menu__nav {
        column-gap: 40px;
    }
}

@media (min-width: 1024px) {
    .footer-top-menu__nav {
        column-gap: 64px;
    }
}

@media (min-width: 1500px) {
    .footer-top-menu__nav {
        column-gap: 100px;
    }
}

.footer-top-menu__link {
    font-family: var(--font-copy);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-prim1);
    text-decoration: none;
}

.footer-top-menu__link::after {
    content: "\e900";
    margin-left: calc(var(--spacing) * 4);
    color: var(--color-prim3);
    font-family: icomoon !important;
    speak: never;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}

/* Links im Fließtext des Text/Bild-Combo-Widgets: rot + unterstrichen. */
.cdw-text-image-combo__text a {
    color: var(--color-prim3);
    text-decoration: underline;
    font-weight: 700;
}

.cdw-text-image-combo__image-caption {
    margin-top: 12px;
}

/* Statement Box */
.cdw-statement-box__box {
    background-color: #00394a;
    padding: 48px 32px;
}

@media (min-width: 768px) {
    .cdw-statement-box__box {
        padding: 64px;
    }
}

.cdw-statement-box__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
}

.cdw-statement-box__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cdw-statement-box__text {
    font-size: 28px;
    line-height: 38px;
    font-weight: 700;
    color: #ffffff;
}

@media (max-width: 767px) {
    .cdw-statement-box__text {
        font-size: 18px;
        line-height: 27px;
    }
}

/* Slider */
.cdw-slider__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    /* Hintergrundfarbe kommt bewusst über die Tailwind bg-*-Klasse aus dem
       "card_background_color"-Control (kein fixer Wert hier), sonst würde
       diese Regel die Auswahl per Style-Specificity überstimmen. */
}

.cdw-slider__image {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
}

.cdw-slider__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cdw-slider__body {
    flex: 1 1 auto;
    padding: 24px;
}

.cdw-slider__title {
    margin-bottom: 8px;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--color-prim1);
}

.cdw-slider__text {
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-prim1);
}

.cdw-slider__text p {
    margin: 0 0 12px;
}

.cdw-slider__text p:last-child {
    margin-bottom: 0;
}

/* Nur im Elementor-Editor: einfache Zeilen-Ansicht statt Splide-Slider. */
.cdw-slider__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.cdw-slider__grid-item {
    flex: 1 1 300px;
    max-width: 360px;
}

/*
 * Pfeile: flach an der Kante der Section sitzend (praktisch Fensterrand bei
 * einer vollbreiten Section) - nicht an der Kante des schmaleren
 * Karten-Containers. ".splide" trägt hier bewusst KEINE Max-Width-Klassen
 * (die stecken stattdessen auf ".splide__track", siehe render()), damit
 * ".splide" selbst (positionierter Elternkontext der Pfeile) die volle
 * Section-Breite hat. Bewusst unter ".cdw-slider" verschachtelt, damit der
 * Slider-Modus von "Teaser Row" (kwpel-widgets) dadurch nicht mitverändert
 * wird - beide teilen sich dieselben .splide-Basisklassen.
 */
/*
 * Seitlicher Abstand: dieselbe responsive Skala wie cdw_get_container_class()
 * (siehe z.B. Statement Box-Container) - px-6 / sm:px-8 / md:px-10 / lg:px-12
 * / xl:px-15 / xxl:px-20, in px umgerechnet, als plain CSS statt
 * Tailwind-Klassen (siehe Hinweis am Dateianfang).
 */
.cdw-slider .splide {
    position: relative;
    padding-left: 24px;
    padding-right: 24px;
}

@media (min-width: 520px) {
    .cdw-slider .splide {
        padding-left: 32px;
        padding-right: 32px;
    }
}

@media (min-width: 768px) {
    .cdw-slider .splide {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (min-width: 1024px) {
    .cdw-slider .splide {
        padding-left: 48px;
        padding-right: 48px;
    }
}

@media (min-width: 1500px) {
    .cdw-slider .splide {
        padding-left: 60px;
        padding-right: 60px;
    }
}

@media (min-width: 1800px) {
    .cdw-slider .splide {
        padding-left: 80px;
        padding-right: 80px;
    }
}

.cdw-slider .splide__arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Unterhalb 991px halb so groß wie im Layout (80x150px). */
.cdw-slider .splide__arrow {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 75px;
    background: #fff;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    /* opacity:1 überschreibt bewusst das globale ".splide__arrow:disabled"-
       Dimmen aus dem Theme (_splide.scss) - hier soll nur die Icon-Farbe den
       Zustand zeigen, nicht Transparenz. */
    opacity: 1;
}

@media (min-width: 991px) {
    .cdw-slider .splide__arrow {
        width: 80px;
        height: 150px;
    }
}

.cdw-slider .splide__arrow--prev {
    border-radius: 0 20px 20px 0;
}

.cdw-slider .splide__arrow--next {
    border-radius: 20px 0 0 20px;
}

@media (min-width: 991px) {
    .cdw-slider .splide__arrow--prev {
        border-radius: 0 30px 30px 0;
    }

    .cdw-slider .splide__arrow--next {
        border-radius: 30px 0 0 30px;
    }
}

.cdw-slider .splide__arrow i {
    display: inline-block;
    font-size: 24px;
    color: var(--color-sec2);
}

.cdw-slider .splide__arrow--prev i {
    transform: rotate(180deg);
}

/* Nicht deaktiviert = "aktiv": rotes Icon. */
.cdw-slider .splide__arrow:not(:disabled) i {
    color: var(--color-prim3);
}

.cdw-slider .splide__arrow:disabled {
    cursor: default;
}

/* Kein Indikator/Pagination unter dem Slider. */
.cdw-slider .splide__pagination {
    display: none;
}

/*
 * Teaser Single: der Original-Klassenname "teaser-single__box" wird auch von
 * kwpel-widgets verwendet - ein getippter Fehler dort ("md:[500px]" statt
 * "md:min-h-[500px]") verhindert, dass die mittlere Höhenstufe je griff. Wir
 * korrigieren das nur für unsere eigene Instanz (".cdw-teaser-single__box"),
 * damit bestehende Inhalte des Alt-Widgets nicht ungewollt mitverändert werden.
 */
@media (min-width: 768px) {
    .cdw-teaser-single__box {
        min-height: 500px;
    }
}

/*
 * Referenzen: Nummerierung per CSS-Counter statt fest im PHP-Markup.
 * Bewusst OHNE ".text-tinymce"-Klasse im Markup - die setzt global eigene
 * li::before-Icons (siehe _tinymce.scss), was unseren Nummer-Counter
 * überschrieben hat. Basis-Typografie (Farbe) daher hier direkt gesetzt.
 */
.cdw-referenzen__list {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--color-prim1);
    counter-reset: cdw-referenz;
}

/*
 * Hängender Einzug: Nummer ist absolut positioniert und aus dem Textfluss
 * genommen, damit umgebrochene Zeilen bündig unter dem eigentlichen Text
 * beginnen (nicht unter der Zahl).
 */
.cdw-referenzen__item {
    position: relative;
    padding-left: 24px;
    margin-bottom: 12px;
    counter-increment: cdw-referenz;
}

.cdw-referenzen__item:last-child {
    margin-bottom: 0;
}

.cdw-referenzen__item::before {
    content: counter(cdw-referenz);
    position: absolute;
    left: 0;
    top: 0.1em;
    font-size: 0.7em;
}

.cdw-referenzen__item p {
    display: inline;
    margin: 0;
}

/* Multi Images */
.cdw-multi-images__box {
    padding: 32px;
}

@media (min-width: 768px) {
    .cdw-multi-images__box {
        padding: 48px;
    }
}

.cdw-multi-images__item {
    padding-bottom: 32px;
    margin-bottom: 32px;
    border-bottom: 2px dotted var(--color-prim1);
}

.cdw-multi-images__item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.cdw-multi-images__item img {
    display: block;
}

/* Tabelle */
.cdw-tabelle__heading {
    margin-bottom: 32px;
    font-size: 28px;
    line-height: 38px;
    font-weight: 400;
}

.cdw-tabelle__box {
    border-radius: 24px;
    overflow: hidden;
    background-color: #ffffff;
}

.cdw-tabelle__header-bar {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 8px 24px;
    background-color: var(--color-prim1);
}

@media (min-width: 768px) {
    .cdw-tabelle__header-bar {
        min-height: 72px;
        padding: 8px 48px;
    }
}

/*
 * Gleiche Spaltenaufteilung wie ".cdw-tabelle__row" (220px/1fr, 32px
 * Spaltenabstand), damit die beiden Überschriften exakt über den Spalten
 * "Begriff" und "Beschreibung" sitzen.
 */
.cdw-tabelle__header-bar-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 32px;
    width: 100%;
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
}

@media (min-width: 768px) {
    .cdw-tabelle__header-bar-row {
        grid-template-columns: 220px 1fr;
    }
}

.cdw-tabelle__rows {
    padding: 24px 24px 8px;
}

@media (min-width: 768px) {
    .cdw-tabelle__rows {
        padding: 40px 48px 16px;
    }
}

.cdw-tabelle__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 32px;
    padding: 16px 0;
}

@media (min-width: 768px) {
    .cdw-tabelle__row {
        grid-template-columns: 220px 1fr;
        align-items: start;
        padding: 20px 0;
    }
}

.cdw-tabelle__row + .cdw-tabelle__row {
    border-top: 1px dotted var(--color-sec1);
}

.cdw-tabelle__col1 {
    font-weight: 700;
    color: var(--color-prim1);
}

.cdw-tabelle__col2 {
    color: var(--color-prim1);
}

.cdw-tabelle__col2 p {
    margin: 0;
}

/* Tabelle 3-spaltig */
.cdw-tabelle-3col__heading {
    margin-bottom: 32px;
    font-size: 28px;
    line-height: 38px;
    font-weight: 400;
}

.cdw-tabelle-3col__box {
    border-radius: 24px;
    overflow: hidden;
    background-color: #ffffff;
}

/*
 * Kopf und Inhalt liegen in EINEM gemeinsamen Grid (statt zwei getrennten
 * Grids), Positionierung läuft über "grid-area" (siehe Inline-Styles im
 * PHP-Template) - dadurch bleibt beim Umbrechen auf Mobile jeder Kopf
 * automatisch über seinem passenden Inhalt, statt dass sich erst alle Köpfe
 * und danach erst alle Inhalte stapeln. Die beiden "grid-template-areas"
 * (mobil gestapelt / desktop nebeneinander) kommen dynamisch nach
 * Spaltenanzahl gebaut als CSS-Variablen vom PHP-Template.
 */
.cdw-tabelle-3col__grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: var(--cdw-tabelle-areas-mobile);
}

@media (min-width: 768px) {
    .cdw-tabelle-3col__grid {
        grid-template-columns: repeat(var(--cdw-tabelle-cols), 1fr);
        grid-template-areas: var(--cdw-tabelle-areas-desktop);
    }
}

.cdw-tabelle-3col__header-cell {
    padding: 24px 32px;
    color: #ffffff;
    text-align: center;
    background-color: var(--color-prim1);
}

/* Trennung zwischen gestapelten Kopf/Inhalt-Gruppen auf Mobile. */
.cdw-tabelle-3col__header-cell + .cdw-tabelle-3col__header-cell {
    border-top: 1px dotted rgba(255, 255, 255, 0.4);
}

@media (min-width: 768px) {
    .cdw-tabelle-3col__header-cell + .cdw-tabelle-3col__header-cell {
        border-top: none;
    }
}

.cdw-tabelle-3col__header-title {
    margin-bottom: 4px;
    font-weight: 700;
}

.cdw-tabelle-3col__header-subtitle {
    font-weight: 400;
    opacity: 0.85;
}

/*
 * Die <hr> selbst existiert nur bei Desktop (dort als eigene, durchgehende
 * Grid-Area "hr" über alle Spalten hinweg) - auf Mobile trennen die
 * gestapelten Kopf/Inhalt-Gruppen bereits die gepunktete Linie oben drüber
 * (siehe ".header-cell + .header-cell"), eine zusätzliche <hr> pro Spalte
 * wäre redundant.
 */
.cdw-tabelle-3col__header-line {
    display: none;
    margin: 0 32px 24px;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
}

@media (min-width: 768px) {
    .cdw-tabelle-3col__header-line {
        display: block;
    }
}

.cdw-tabelle-3col__col {
    position: relative;
    padding: 24px 32px;
}

/*
 * Gepunktete Trennlinie ZWISCHEN den äußeren Spalten nur bei Desktop (als
 * ::before statt border-left, damit sie oben/unten Abstand zum Rand der Box
 * hat statt volle Höhe durchzulaufen) - bewusst NICHT zwischen erstem und
 * zweitem Inhalt innerhalb einer Spalte (siehe .cdw-tabelle-3col__col-inner
 * unten). Auf Mobile übernimmt stattdessen ".header-cell + .header-cell"
 * die Trennung zwischen den gestapelten Kopf/Inhalt-Gruppen (siehe oben) -
 * eine Linie direkt über ".col" würde dort fälschlich zwischen einem Kopf
 * und seinem eigenen, direkt darüber gestapelten Inhalt landen.
 */
@media (min-width: 768px) {
    .cdw-tabelle-3col__col + .cdw-tabelle-3col__col::before {
        content: "";
        position: absolute;
        top: 32px;
        bottom: 32px;
        left: 0;
        border-left: 1px dotted var(--color-sec1);
    }
}

/*
 * "Zweiter Inhalt": zwei Content-Blöcke innerhalb EINER Spalte, nebeneinander
 * bei genug Platz, sonst untereinander - bewusst ohne Trennlinie dazwischen.
 * Der gemeinsame Spaltenkopf sitzt automatisch über beiden, ohne dass der
 * Kopf selbst mehrere äußere Grid-Spalten überspannen müsste.
 */
.cdw-tabelle-3col__col-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 640px) {
    .cdw-tabelle-3col__col-inner--split {
        grid-template-columns: 1fr 1fr;
    }
}

.cdw-tabelle-3col__col-title {
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--color-prim1);
}

.cdw-tabelle-3col__col-text {
    color: var(--color-prim1);
}

.cdw-tabelle-3col__col-text p {
    margin: 0;
}

/*
 * Number Boxes: Nummer läuft per CSS-Counter mit (kein manuelles Feld nötig).
 * Startzahl kommt über die CSS-Variable "--cdw-number-start" (aus dem Feld
 * "Start bei Nummer"), per Inline-Style auf ".cdw-number-boxes__list" gesetzt.
 * Alle Maße nach Vorgabe; unter 768px Padding und Abstände halbiert.
 */
.cdw-number-boxes__list {
    counter-reset: cdw-number-box var(--cdw-number-start, 0);
}

.cdw-number-boxes__item {
    display: flex;
    align-items: center;
    gap: 25px;
    background-color: #c9dae7;
    border-radius: 24px;
    padding: 60px 80px;
    counter-increment: cdw-number-box;
}

.cdw-number-boxes__item + .cdw-number-boxes__item {
    margin-top: 50px;
}

.cdw-number-boxes__number {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--color-prim1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cdw-number-boxes__number::before {
    content: counter(cdw-number-box) ".";
    font-size: 30px;
    font-weight: 700;
    color: #ffffff;
}

.cdw-number-boxes__text {
    font-size: 20px;
    color: var(--color-prim1);
}

.cdw-number-boxes__text p {
    margin: 0;
}

@media (max-width: 767px) {
    .cdw-number-boxes__item {
        padding: 30px 40px;
        gap: 13px;
    }

    .cdw-number-boxes__item + .cdw-number-boxes__item {
        margin-top: 25px;
    }
}

/*
 * Text/Bild-Combo: "Box so hoch wie das Bild?" - "items-stretch" ist keine
 * kompilierte Tailwind-Klasse (nirgends sonst im Theme verwendet), daher
 * hier als eigene Regel. !important stellt sicher, dass sie das eh schon
 * vorhandene "items-center" auf demselben Element zuverlässig überschreibt,
 * unabhängig von der CSS-Ladereihenfolge.
 */
.cdw-text-image-combo__wrapper--stretch {
    align-items: stretch !important;
}

/* Link List */
.cdw-link-list__list {
    display: flex;
    flex-wrap: wrap;
    row-gap: 16px;
    column-gap: 24px;
}

.cdw-link-list__list--column {
    flex-direction: column;
    flex-wrap: nowrap;
}

/* Reihe: Ausrichtung wirkt horizontal (justify-content, Hauptachse). */
.cdw-link-list__list--row.cdw-link-list__list--left {
    justify-content: flex-start;
}

.cdw-link-list__list--row.cdw-link-list__list--center {
    justify-content: center;
}

/* Spalte: Ausrichtung wirkt horizontal quer zur Hauptachse (align-items). */
.cdw-link-list__list--column.cdw-link-list__list--left {
    align-items: flex-start;
}

.cdw-link-list__list--column.cdw-link-list__list--center {
    align-items: center;
}

/*
 * Pfeil nach Vorgabe (identisch zum bereits im Theme genutzten
 * ".text-tinymce .btn::after") - bewusst nur auf unserer eigenen Klasse,
 * nicht global auf ".btn", damit andere ".btn"-Stellen im Theme (die ihr
 * Icon selbst als <i> mitbringen) keinen doppelten Pfeil bekommen.
 */
.cdw-link-list__link::after {
    font-family: icomoon !important;
    speak: never;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #ff324e;
    content: "\e900";
    font-size: 14px;
    vertical-align: text-bottom;
}

/* Download-Link: Pfeil zeigt nach unten statt nach rechts. */
.cdw-link-list__link--download::after {
    display: inline-block;
    transform: rotate(90deg);
}

/* Link Cards */
.cdw-link-cards__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 640px) {
    .cdw-link-cards__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .cdw-link-cards__grid {
        grid-template-columns: repeat(var(--cdw-link-cards-cols, 4), 1fr);
    }
}

.cdw-link-cards__card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cdw-link-cards__image {
    margin-bottom: 16px;
    border-radius: 1.5rem;
    overflow: hidden;
}

.cdw-link-cards__image img {
    display: block;
    width: 100%;
    height: auto;
}

/*
 * width:100% + justify-content:center per !important, da das Theme
 * ".btn" ab 520px selbst auf "width:auto; justify-content:flex-start;"
 * umschaltet (@media min-width:520px) - hier soll es bei allen
 * Breiten bei voller Breite/zentriert bleiben.
 */
.cdw-link-cards__button {
    margin-top: auto;
    width: 100% !important;
    justify-content: center !important;
}

/* Pfeil nach demselben Muster wie bei Link List (normale Richtung, kein Download). */
.cdw-link-cards__button::after {
    font-family: icomoon !important;
    speak: never;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #ff324e;
    content: "\e900";
    font-size: 14px;
    vertical-align: text-bottom;
}

/*
 * Das Theme setzt global "[role="region"] { overflow: hidden; }" (fürs
 * Zuklapp-Höhen-Animation), zusätzlich hat unser ".accordeon__item" per
 * Tailwind "overflow-hidden" (für die abgerundeten Ecken der Box). Beides
 * schneidet einen Tooltip innerhalb des Akkordeon-Texts ab, sobald er über
 * den Rand hinausragt.
 *
 * Statt an ".is-open" zu koppeln (das bleibt laut Theme-JS
 * "src/js/accordeon.js" beim Schließen noch die vollen 0.4s bestehen, bevor
 * es entfernt wird - overflow wäre also während der ganzen Zuklapp-Animation
 * fälschlich noch "visible"), hängen wir direkt am echten Zustand, den das
 * JS setzt: Es setzt "height: auto" per Inline-Style NUR, wenn die
 * Öffnen-Animation fertig und die Box vollständig offen ist. Beim Schließen
 * wird "height" sofort synchron (noch bevor die Klapp-Animation beginnt) auf
 * einen px-Wert umgeschaltet - overflow springt dadurch exakt im selben
 * Moment zurück auf "hidden", der Inhalt klappt also natürlich mit ein,
 * statt bis zum Animationsende sichtbar stehen zu bleiben.
 */
.cdw-accordeon-text .accordeon__item:has([role="region"][style*="height: auto"]),
.cdw-accordeon-text .accordeon__item [role="region"][style*="height: auto"] {
    overflow: visible;
}

/* Download Cards */
.cdw-download-cards__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 640px) {
    .cdw-download-cards__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .cdw-download-cards__grid {
        grid-template-columns: repeat(var(--cdw-download-cards-cols, 4), 1fr);
    }
}

.cdw-download-cards__card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cdw-download-cards__image {
    border-radius: 1.5rem;
    overflow: hidden;
}

.cdw-download-cards__image img {
    display: block;
    width: 100%;
    height: auto;
}

.cdw-download-cards__downloads {
    margin-top: 16px;
}

.cdw-download-cards__toggle {
    width: 100% !important;
    justify-content: center !important;
    /*
     * ".btn" bekommt seine Hover-Transition normalerweise nur über die
     * globale "a { transition: color .3s, opacity .2s; }"-Regel im Theme -
     * die gilt aber nur für <a>-Tags. Unser Toggle ist ein <button>, daher
     * hier explizit ergänzen, sonst wirkt der Opacity-Hover abrupt/ruckelig.
     */
    transition: opacity 0.2s ease, filter 0.2s ease;
}

/*
 * ".btn:hover" im Theme dimmt per "opacity:.7" ab - auf dem dunklen
 * Button wirkt das eher noch dunkler/trüber statt heller. Stattdessen
 * Opacity wieder zurücksetzen und per "filter:brightness()" tatsächlich
 * aufhellen.
 */
.cdw-download-cards__toggle:hover {
    opacity: 1;
    filter: brightness(1.3);
}

.cdw-download-cards__dropdown {
    overflow: hidden;
    height: 0;
    margin-top: 8px;
    transition: height 0.3s ease;
    background-color: #00394a;
    border-radius: 24px;
}

.cdw-download-cards__dropdown-inner {
    padding: 16px 28px 20px;
}

.cdw-download-cards__lang-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px;
    margin: 0 -12px;
    border-radius: 12px;
    color: #fff;
    font-weight: 700;
    transition: background-color 0.2s ease;
}

/* Dieselbe Logik wie beim Toggle-Button: heller statt per Opacity dunkler. */
.cdw-download-cards__lang-link:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.12);
}

.cdw-download-cards__lang-link i {
    color: #ff324e;
    font-size: 14px;
    transform: rotate(90deg);
    flex-shrink: 0;
}

/*
 * Text mit Kreis-Störer: komplett eigenes CSS statt Tailwind-Utilities
 * (wie bei Statement Box) - unsere Plugin-Dateien liegen nicht im
 * Tailwind-"@source"-Scan des Theme-Builds.
 */
.cdw-text-circle-badge__wrapper {
    margin-left: auto;
    margin-right: auto;
}

.cdw-text-circle-badge__row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

@media (min-width: 768px) {
    .cdw-text-circle-badge__row {
        flex-direction: row;
        gap: 48px;
    }

    .cdw-text-circle-badge__row--top {
        align-items: flex-start;
    }

    .cdw-text-circle-badge__row--center {
        align-items: center;
    }

    .cdw-text-circle-badge__row--bottom {
        align-items: flex-end;
    }
}

.cdw-text-circle-badge__text {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.cdw-text-circle-badge__circle {
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    padding: 24px;
}

.cdw-text-circle-badge__circle-text {
    font-weight: 700;
}

/*
 * Multi Download Cards: eigenes CSS statt Tailwind-Utilities (wie bei
 * Slider/Statement Box) - unsere Plugin-Dateien liegen nicht im
 * Tailwind-"@source"-Scan des Theme-Builds. Bild randlos nach demselben
 * Muster wie ".cdw-slider__image" (Karte clippt per "overflow:hidden",
 * nicht das Bild selbst).
 */
.cdw-multi-download-cards__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.cdw-multi-download-cards__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 300px;
    border-radius: 1.5rem;
    overflow: hidden;
}

.cdw-multi-download-cards__image {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
}

.cdw-multi-download-cards__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cdw-multi-download-cards__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.cdw-multi-download-cards__text {
    margin-bottom: 20px;
}

/*
 * "margin-top:auto": Button hängt sich unten an (gleiche Kartenhöhe bei
 * unterschiedlich langem Text). Volle Breite + zentriert wie bei Link
 * Cards - per !important aus demselben Grund: das Theme schaltet ".btn"
 * ab 520px selbst auf "width:auto; justify-content:flex-start;" um.
 */
.cdw-multi-download-cards__button {
    margin-top: auto;
    width: 100% !important;
    justify-content: center !important;
}

.cdw-multi-download-cards__button::after {
    font-family: icomoon !important;
    speak: never;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #ff324e;
    content: "\e900";
    font-size: 14px;
    vertical-align: text-bottom;
}

/* Download-Variante: Pfeil zeigt nach unten statt nach rechts. */
.cdw-multi-download-cards__button--download::after {
    display: inline-block;
    transform: rotate(90deg);
}