/* I do not know what this file does, but if it is deleted, the shop crashes. SO DON'T TOUCH THIS */

/* region THEME V2 - TOKEN-BRUECKEN */

/* Seit dem Settings-Import vom 01.09.2026 laeuft airclip mit aktivem Theme v2
   (Companion -> Theme 2.0 -> Aktivierung). Damit haengt <body> an der Klasse
   niu-theme2, und der Companion gibt einen Satz CSS-Variablen inline im <head>
   aus. Fuer diese Datei aendert das die Arbeitsteilung grundlegend:

   Rundungen und Flaechenfarben gehoeren ab jetzt in die Companion-Einstellung,
   NICHT mehr hierher. Der Parent liest sie ueber var()-Ketten, teils sogar im
   Inline-Style (productlist/header.tpl, productdetails/image.tpl). Ein
   fest verdrahtetes border-radius im Child verliert dagegen entweder auf
   Spezifitaet (die theme2-Regeln stehen unter body.niu-theme2) oder es
   gewinnt nur mit !important gegen einen Inline-Style - beides waere ein
   Kampf gegen das System statt mit ihm.

   Hier bleibt deshalb nur der Fall, den die Einstellung nicht abbilden kann:
   wenn EINE Token-Familie an zwei Stellen zwei verschiedene Werte braucht.
   Loesung ist dann nicht das Ueberschreiben der Eigenschaft, sondern das
   lokale Umdefinieren des Tokens - CSS-Variablen vererben, der Parent loest
   seine var()-Kette also im Unterbaum mit unserem Wert auf, und global bleibt
   die Companion-Einstellung die Quelle der Wahrheit. */

/* Die marker-Familie bedient bei airclip zwei unvereinbare Rollen:
     Pille  -> .ribbon (995px), .niu-productbox-price-label-ribbon (996px),
               .variation.swatches (998px)
     Kachel -> die Unterkategorie-Kacheln der Kategorieseite (16px)
   Global steht die Pille (Companion -> Radien -> Markierungen). Die Kacheln
   holen sich ihre 16px hier. Der Parent setzt ihren Radius als Inline-Style
     border-radius: var(--niu-radius-marker, {$niu->category->subCats->borderRadius})
   (productlist/header.tpl, Grid- und Slider-Variante), deshalb der Weg ueber
   den Token: eine border-radius-Regel braeuchte !important, um am Inline-Style
   vorbeizukommen.
   Descendant-Selektor statt ">", damit die mobile Slider-Variante mitkommt;
   .niu-card-style--flat tragen unter #result-wrapper ausschliesslich diese
   Kacheln, die Ribbons der Artikelkacheln sind davon nicht betroffen. */
#result-wrapper .niu-card-style--flat {
    --niu-radius-marker: 16px;
}

/* Kein Uebergang beim Bildwechsel auf der Artikelkachel.

   Der Parent (themes/base/sass/_productlist.scss) legt beide Bilder
   uebereinander und blendet sie beim Hover ueber die Kachel mit
   $transition-fade (opacity .15s linear) ineinander. Ohne Uebergang wechselt
   das Bild hart.

   Gilt ueberall, wo .list-gallery steht: Artikelkacheln der Listen,
   Wunschzettel und die Produktvorschau in der Sidebar. */
.list-gallery img.first,
.list-gallery img.second{
    transition: none;
}

/* endregion */

/* region RESETS */

/* Selection fix */
body.niu-theme2::selection {
    color: var(--s-accent-text);
}

/* xl-Breakpoint ist bei NIUplus 1300px, nicht Bootstraps 1200px */
@media (min-width: 1300px) {
    .container {
        max-width: 1440px;
    }
}

.ac-buybox .price_wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.5rem;
}

.ac-buybox .price_wrapper .price-note {
    display: contents;
}

.ac-buybox .price_wrapper .ac-old-price {
    flex-basis: 100%;
}

/* Warenkorb-Button */
[data-niu-checkout-btn] {
    background-image: linear-gradient(90deg, var(--primary, #F59500) 0%, #EE6529 100%);
    border-color: transparent;
}

[data-niu-checkout-btn]:hover,
[data-niu-checkout-btn]:focus {
    background-image: linear-gradient(90deg, #EE6529 0%, var(--primary, #F59500) 100%);
    border-color: transparent;
}

/* endregion */

/* region GLOBAL */

/* Top Glow */
body {
    background-image: radial-gradient(50.05% 100% at 50% 0%, rgba(245, 149, 0, 0.06) 0%, rgba(245, 149, 0, 0.00) 100%),
    linear-gradient(180deg, var(--neutral-300-orange, #F2EAE0) 7.23%, #FFF 100%);
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 900px, 100% 900px;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-style: italic;
}

/* endregion */

/* region UTILITIES */

/* Klasse aufs Portlet, Schrift bis in den Text. Das * ist noetig, weil die Klasse bei
   verschachtelten Portlets am Wrapper haengt; die :not() halten FontAwesome heraus,
   dessen .fa/.fas/.far/.fab sonst von dieser Regel ueberschrieben wuerden */
.ac-mono-font,
.ac-mono-font *:not(.fa):not(.fas):not(.far):not(.fab) {
    font-family: 'Space Mono', monospace;
}

/* Feste Template-Klassen in Mono. Beide sind Wrapper, der Text liegt in
   verschachtelten span/li - daher ebenfalls mit * */
.price-note,
.price-note *:not(.fa):not(.fas):not(.far):not(.fab),
.info-essential,
.info-essential *:not(.fa):not(.fas):not(.far):not(.fab) {
    font-family: 'Space Mono', monospace;
}

/* Gleiche :not()-Kette: hebt die Spezifitaet auf (0,5,0) und schlaegt damit
   font-size-sm, das product-sku, product-ean und product-category tragen */
.info-essential,
.info-essential *:not(.fa):not(.fas):not(.far):not(.fab) {
    font-size: 0.75rem;
}

/* endregion */

/* region STREICHPREIS */

.ac-old-price {
    text-decoration: line-through;
}

/* endregion */

/* region PRODUKTKACHEL */

.productbox-inner {
    background-color: #fff;
}

.niu-productbox-caption .price_wrapper:has(.ac-old-price) .productbox-price {
    color: var(--danger, #C0274C);
}

/* Lieferzeit auf der Artikelkachel.

   Die Farbe stand hier bis zum 25.09.2026 fest auf Gruen - unabhaengig davon,
   was die Produktseite zum selben Artikel zeigte. Jetzt traegt die Kachel die
   Stufe als Klasse (productlist/item_box.tpl -> snippets/ac_lieferampel.tpl),
   und die Farben sind dieselben, die der Parent fuer .status-0/-1/-2 nutzt
   (aus themes/clean/clean.css uebernommen, weil die SCSS-Variablen hier nicht
   zur Verfuegung stehen). */

.niu-productbox-delivery-info .estimated_delivery.text-xs,
.niu-productbox-delivery-info .estimated_delivery {
    font-size: 0.7rem !important;
}

.ac-ampel--2 .estimated_delivery { color: var(--success, #02A067); }
.ac-ampel--1 .estimated_delivery { color: #DAAA4E; }
.ac-ampel--0 .estimated_delivery { color: var(--danger, #C0274C); }

/* region QuickView-Button */

.productbox-inner > .row > [class*="col"] {
    position: static;
}

.ac-card-quickview {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 0.75rem 0 0.75rem 0;
    background-color: var(--primary, #F59500);
    color: #fff;
    cursor: pointer;
    transition: filter 0.15s ease-in-out;
}

.ac-card-quickview:hover,
.ac-card-quickview:focus {
    filter: brightness(0.92);
    color: #fff;
}
/* endregion */
/* endregion */

/* region SIDEBAR-PRODUKTVORSCHAU */

[data-niu-sidebar-productpreview-content] .price_wrapper:has(.ac-old-price) .price {
    color: var(--danger, #C0274C);
}

/* endregion */

/* region UNTERKATEGORIE-KACHELN */

#result-wrapper > .container-fluid .niu-card-style--flat {
    background-color: #fff;
    transition: box-shadow .2s ease, transform .2s ease;
}

/* Hover wortgleich zum Portlet ACCategoryCard aus dzm_custom_functions
   (Portlets/ACCategoryCard/ACCategoryCard.css). --s-shadow ist ein Farb-Slot,
   den box-shadow erst sichtbar macht; --niu-card-shadow liefert ihn unter
   Theme v2 aus der Flaechenrolle "shadow" der Karte.

   Die FARBE von Titel und Pfeil beim Hover steht bewusst nicht hier. Unter
   Theme v2 faerbt der Parent Links im Hover ueber var(--s-accent), also ueber
   die Rolle "accent" der umgebenden Flaeche - bei diesen Kacheln die
   Karten-Flaeche. Das Pfeil-Icon folgt automatisch mit, weil seine Maske auf
   currentColor liegt. Steht accent auf demselben Wert wie text, ist der Hover
   ein Nulleffekt und sieht aus wie "greift nicht" - das ist dann eine
   Einstellung (Companion -> Theme 2.0 -> Flaechen -> Karte -> Akzent), kein
   CSS-Fall. Keine feste Hover-Farbe hier eintragen, sonst haengt die
   Kachel wieder am Child statt am Theme. */
#result-wrapper > .container-fluid .niu-card-style--flat:hover {
    --s-shadow: var(--niu-card-shadow, #ededed);
    box-shadow: 0 10px 30px 0 var(--s-shadow);
    transform: translateY(-2px);
    transition: box-shadow .4s ease, transform .4s ease;
}

#result-wrapper > .container-fluid .niu-card-style--flat > a {
    display: block;
    padding: 16px 16px 0;
}

#result-wrapper > .container-fluid .niu-card-style--flat > a picture {
    display: block;
    background-color: #fff9f1;
}

/* Freigestellte Bilder verschmelzen mit der Kachelflaeche. isolation haelt das
   Blending in der Karte, sonst mischt das Bild mit dem Seiten-Gradient dahinter.
   Beide Varianten, weil NIUplus das <picture> nur bei echten Kategoriebildern
   rendert und sonst ein direktes <img> ausgibt */
#result-wrapper > .container-fluid .niu-card-style--flat {
    isolation: isolate;
}

#result-wrapper > .container-fluid .niu-card-style--flat > a img,
#result-wrapper > .container-fluid .niu-card-style--flat > a picture img {
    mix-blend-mode: darken;
}

#result-wrapper > .container-fluid .niu-card-style--flat .d-flex > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    font-weight: 700;
}

#result-wrapper > .container-fluid .niu-card-style--flat .d-flex > a::after {
    content: "";
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2.5 8h10M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2.5 8h10M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}

/* endregion */

/* region PDP */

/* Galeriebild: HIER STEHT BEWUSST KEINE REGEL MEHR.

   Bis zum Theme-v2-Umstieg stand hier ein Radius auf
   "#niu-product-splide-list .splide__slide picture img", weil der
   Companion-SCSS-Compiler dem Bild frueher den Button-Radius aufdrueckte.
   Unter Theme v2 ist diese Baustelle vom Parent geloest, und zwar andersherum:
     body.niu-theme2 #niu-product-splide-list .splide__slide picture img
         { border-radius: 0 }
     body.niu-theme2 #niu-product-splide
         { border-radius: var(--niu-radius-gallery, var(--niu-radius-media, 6px));
           overflow: hidden }
   Das Bild wird also absichtlich flach gelegt, und die Form kommt von der
   Kachel darum herum, die das Bild beschneidet (_niu_theme2_rules.scss,
   "Runde 2": die Vorschauleiste soll ausserhalb der Rundung bleiben).
   Unsere Altregel lag mit (1,1,3) unter der Parent-Regel (1,2,3) und war
   damit ohnehin wirkungslos - sie wieder hochzuziehen wuerde die Rundung
   doppelt setzen und bei kleinem Kachelradius durchscheinen lassen.
   Der Galerieradius gehoert jetzt in die Einstellung
   Companion -> Theme 2.0 -> Radien -> Medien (bzw. Element-Override Galerie). */

/* Die Kaufbox liegt auf .niu-card-style--border und damit auf einer
   Karten-Flaeche des Theme v2. Ihr RADIUS kommt deshalb nicht mehr von hier,
   sondern aus Companion -> Radien -> Karten - so folgt sie demselben Wert wie
   jede andere Karte im Shop.
   Was hier bleibt, ist der airclip-eigene cremefarbene Rahmen: border-color
   setzt der Parent an dieser Klasse nicht an, die Deklaration steht also
   konkurrenzlos. */
.ac-buybox {
    margin-top: 1rem;
    border-color: #faf4eb;
}

/* Der weisse Grund dagegen KOLLIDIERT: theme2 malt die Karte ueber
     body.niu-theme2 .niu-card-style--shadow,
     body.niu-theme2 .niu-card-style--border,
     body.niu-theme2 .niu-card-style--striped { background-color: var(--s-bg) }
   mit (0,2,1), waehrend ".ac-buybox" nur (0,1,0) traegt. Solange die
   Karten-Flaeche im Companion weiss ist, faellt das nicht auf - beide Werte
   sind #fff. Damit die Kaufbox aber auch dann weiss bleibt, wenn jemand die
   Kartenfarbe verstellt, steht sie hier eine Stufe hoeher (0,3,1).
   Bewusst NICHT ueber --s-bg geloest: die Kaufbox soll an dieser Stelle
   gerade nicht der Flaechenrolle folgen. */
body.niu-theme2 .ac-buybox.niu-card-style--border {
    background-color: #fff;
}

.ac-buybox .stock-information hr:first-child {
    display: none;
}

/* Abstaende der Buttons in der Kaufbox nach dem Entwurf (Michael, 02.10.2026).
   Im Entwurf gemessen und auf die Spaltenbreite umgerechnet (Faktor 0,70):

                               Entwurf   bisher   jetzt
     Mengenfeld <-> Warenkorb    11 px    32 px   12 px
     Warenkorb  <-> Leasing      14 px    32 px   16 px
     Leasing    <-> Zahlarten    19 px    32 px   20 px

   Waagerecht steckt der Abstand in den Bootstrap-Rinnen der Zeile: 16px
   Innenabstand je Spalte gegen -16px Aussenabstand der Zeile. Beide Haelften
   muessen zusammen geaendert werden, sonst wandert die Zeile aus der Kaufbox.
   Senkrecht liegen jeweils zwei Abstaende hintereinander (ein mb-3 der Karte
   und ein mt-3 des Nachbarn) - hier faellt der zweite weg. Das braucht
   !important: die Abstands-Hilfsklassen von Bootstrap tragen es selbst, gegen
   sie kommt keine Spezifitaet an. */
.ac-buybox .product-buy .basket-form-inline { margin-left: -6px; margin-right: -6px; }
.ac-buybox .product-buy .basket-form-inline > [class*="col"] { padding-left: 6px; padding-right: 6px; }
.ac-buybox .niu-custom-boxes-container { margin-top: 0 !important; }
.ac-buybox .niu-productdetails-paymethods { margin-top: .25rem !important; }

/* Abstand Preis -> erster Button: immer 16px. Bisher kam er vom mt-3 des
   Warenkorb-Formulars (#add-to-cart) - fehlt das (nicht bestellbar, nur
   Leasing-Box) oder steht dort der Konfigurieren-Button, klebte der Button am
   Preis. Jetzt traegt der Preis den Abstand, das Formular verliert seinen. */
.ac-buybox .price_wrapper { margin-bottom: 1rem; }
.ac-buybox #add-to-cart.product-buy { margin-top: 0 !important; }

/* Untertitel der Produktseite. Ubuntu 700 in 16px nach Vorgabe vom
   02.10.2026 - nicht zu verwechseln mit dem Untertitel auf der
   Artikelkachel, der in Space Mono steht. */
.ac-product-subtitle {
    font-family: Ubuntu, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 1rem;
    color: #08262B;
    margin-bottom: 0.5rem;
}

.info-essential {
    text-transform: uppercase;
}

.info-essential > span + span::before {
    content: "\00B7";
    padding-right: 0.5rem;
}

/* Variationsauswahl: Werte ohne Bestand ausblenden, z.B. ausgebuchte
   Schulungstermine. Die Auswahl ist ein bootstrap-select - das native <option>
   sieht man nicht, die Liste besteht aus <li>, und JTL haengt an nicht
   lieferbare Werte die Pille .badge-not-available ("Bitte Verfuegbarkeit
   anfragen"). Nur ausgeblendet, nicht gesperrt: ein bereits gewaehlter Wert
   bleibt im Schalter sichtbar.

   NUR, WENN MINDESTENS EIN WERT VERFUEGBAR IST. Sind alle Werte nicht
   lieferbar, bleibt die Liste vollstaendig - sonst klappt sie leer auf und es
   laesst sich gar nichts waehlen (DJI Terra auf der Staging: alle vier
   Lizenzen ohne Bestand, Ueberverkaeufe aus). Geprueft wird am nativen
   <select>: gibt es eine Variations-Option ohne die Pille im data-content? */
.bootstrap-select:has(select option.variation:not([data-content*="badge-not-available"])) .dropdown-menu li:has(.dropdown-item.variation .badge-not-available) {
    display: none;
}

/* endregion */

/* region KATEGORIEBESCHREIBUNG (Airclip) */

/* Die Kategorietexte liegen als ein HTML-Feld in der Wawi
   (tkategorie.cBeschreibung) und werden vom Parent in
   productlist/components/category_desc.tpl als <div class="desc col-count-N">
   ausgegeben. N kommt aus der Companion-Einstellung
   category.categoryTextCols.

   Der Entwurf zeigt: aussen eine Karte mit Ueberschrift und Partnerlogo,
   darunter mehrere Abschnittskaertchen in zwei Spalten unterschiedlicher
   Hoehe. Der Kunde pflegt dafuer beliebig viele Abschnittsbloecke in
   dasselbe Feld; Vorlage dazu liegt in der Kundenakte
   (technik/kategorietext-vorlage-airclip.html).

   ZWEI SPALTEN OHNE EINSTELLUNG: Die Spalten kommen aus CSS-Mehrspaltigkeit,
   ausgeloest ueber `:has(.ac-catsec)` - also nur dort, wo der Text die neue
   Struktur wirklich verwendet. Bewusst NICHT ueber categoryTextCols: die
   Einstellung wirkt global, und die rund 200 uebrigen Kategorien fuehren
   normalen Flisstext mit Zwischenueberschriften. Zweispaltig gesetzt bricht
   der an unpassenden Stellen um. Wer es doch global will, stellt
   categoryTextCols auf 2 und kann diesen Block loeschen.

   Mehrspaltigkeit ist hier das richtige Werkzeug und kein Notbehelf: die
   Anzahl der Abschnitte ist offen, und der Browser verteilt sie selbst auf
   zwei ungefaehr gleich hohe Spalten - genau die ungleiche Aufteilung, die
   der Entwurf zeigt. Ein Grid bräuchte eine feste Zuordnung je Spalte. */

:root {
    --ac-catsec-bg: #f4f7f9;      /* Flaeche der Abschnittskaertchen */
    --ac-catdesc-border: #e8edf0; /* Rahmen der aeusseren Karte */
}

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

.desc:has(.ac-catsec) {
    background-color: #fff;
    border: 1px solid var(--ac-catdesc-border);
    border-radius: 1.25rem;
    padding: 2.5rem;
}

@media (min-width: 992px) {
    /* Schlaegt .col-count-1 des Parents: eine Klasse plus :has(eine Klasse)
       gegen eine Klasse. */
    .desc:has(.ac-catsec) {
        column-count: 2;
        column-gap: 1.5rem;
    }
}

/* --- Kopf: Ueberschrift und Partnerlogo, ueber beide Spalten --- */

.ac-catdesc__head {
    /* column-span ist der Grund, warum der Kopf im selben Feld stehen darf:
       er nimmt sich die volle Breite, die Abschnitte fliessen darunter. */
    column-span: all;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.ac-catdesc__head h2,
.ac-catdesc__title {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.25;
    text-wrap: balance;
}

.ac-catdesc__badge { flex: none; }
.ac-catdesc__badge img { display: block; height: 3rem; width: auto; }

@media (max-width: 575px) {
    .desc:has(.ac-catsec) { padding: 1.5rem; }
    .ac-catdesc__head { flex-wrap: wrap; gap: 1rem; }
    .ac-catdesc__head h2,
    .ac-catdesc__title { font-size: 1.375rem; }
}

/* --- Abschnittskaertchen --- */

.ac-catsec {
    /* Ohne break-inside wuerde die Mehrspaltigkeit ein Kaertchen mitten im
       Text auf die naechste Spalte umbrechen - Rahmen und Flaeche
       zerschnitten. */
    break-inside: avoid;
    background-color: var(--ac-catsec-bg);
    border-radius: 1rem;
    padding: 1.5rem 1.75rem;
    /* margin statt gap: in einem Mehrspaltenlayout gibt es kein row-gap. */
    margin-bottom: 1.5rem;
}

.ac-catsec:last-child { margin-bottom: 0; }

.ac-catsec__eyebrow {
    margin: 0 0 .5rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ac-ink-muted);
}

.ac-catsec__title {
    margin: 0 0 .875rem;
    font-size: 1.1875rem;
    line-height: 1.3;
    color: var(--ac-ink);
}

.ac-catsec p {
    margin: 0 0 .875rem;
    font-size: .9375rem;
    line-height: 1.7;
}

.ac-catsec p:last-child { margin-bottom: 0; }

/* --- Haekchenliste im Kaertchen --- */

.ac-catsec__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ac-catsec__list li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: .625rem;
    font-size: .9375rem;
    line-height: 1.6;
}

.ac-catsec__list li:last-child { margin-bottom: 0; }

/* Haken als Bootstrap-Glyphe, gleiche Begruendung wie bei der Haekchenliste
   im Kaufbereich: die Airclip-SVGs sind als Maskenbild nicht einfaerbbar. */
.ac-catsec__list li::before {
    content: "\F270";                   /* bi-check2-circle, wie im Entwurf */
    font-family: bootstrap-icons, sans-serif;
    position: absolute;
    left: 0;
    top: 0;
    color: var(--secondary, #007288);
    font-size: 1.05em;
}

/* endregion */

/* region KOPFZEILE UND MEGAMENUE (Airclip) */

/* Airclip-eigene Werte der Kopfzeile. Die Flaeche der Menuepille steht
   bewusst HIER und nicht in der Companion-Einstellung: sie und die weisse
   Megamenue-Karte lesen dieselbe Token-Familie (--niu-nav-bg, gesetzt auf
   #FFFFFF), brauchen aber zwei verschiedene Werte - Pille warm gebrochen,
   Karte weiss. Die Familie umzudefinieren wuerde beide treffen, denn das
   Megamenue-Panel haengt im DOM unter der Pille. */
:root {
    --ac-navbar-bg: #fbf7f1;     /* Menuepille, eine Spur waermer als weiss */
    --ac-navbar-radius: 999px;
}

/* --- Menuepille: Form, Flaeche, Schreibweise --- */

/* Nur ab 992px: .niu-categories-color-wrap ist unterhalb davon die
   aufklappende Mobilnavigation (.collapse) und darf keine Pille werden. */
@media (min-width: 992px) {
    header .niu-categories-color-wrap {
        background-color: var(--ac-navbar-bg);
        border-radius: var(--ac-navbar-radius);
        /* Damit der erste und letzte Punkt nicht an der Rundung kleben */
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    /* Schreibweise laut Entwurf: Versalien mit etwas Laufweite. Die Laufweite
       gehoert dazu - Versalien ohne sie wirken gedraengt.

       display:flex fuer ALLE Punkte, nicht nur fuer die mit Unterkategorien:
       der Parent macht nur .dropdown-toggle zum Flex-Container, "Software"
       blieb als einziger Eintrag ohne Unterkategorien ein Block. Die
       Beschriftung darin ist ein <span class="text-truncate d-block">, also
       selbst ein Block - der Aufzaehlungspunkt des aktiven Eintrags landete
       dadurch in einer eigenen Zeile darueber und machte den Punkt 72 statt
       48 Pixel hoch. Als Flex-Container stehen Punkt und Beschriftung
       nebeneinander, so wie bei allen anderen Eintraegen auch. */
    header .niu-header-nav > .nav-item > .nav-link {
        display: flex;
        align-items: center;
        text-transform: uppercase;
        letter-spacing: .06em;
        font-weight: 500;
        font-size:13px;
    }

    /* Der zweite Menuepunkt hatte links keinen Abstand. Ursache ist eine
       Zusatzregel von NIUplus in der Bootstrap-Navbar
       (themes/base/bootstrap/scss/_navbar.scss, als "niu added" markiert):

           .navbar-nav .nav-item:nth-child(2) .nav-link { padding-left: 0 }

       Mit vier Klassen und einer Pseudoklasse schlaegt sie die
       .navbar-expand-lg-Regel, die allen anderen Punkten 1.5rem gibt - und
       trifft dabei ausgerechnet nur den zweiten. Fuer die Menuepille ist das
       falsch: dort sollen alle Punkte gleich stehen.

       1.5rem ist kein frei gewaehlter Wert, sondern derselbe, den die
       Geschwister ueber $navbar-nav-link-padding-x bekommen. Aendert sich der
       im Parent, muss er hier mit. */
    header .niu-header-nav > .nav-item:nth-child(2) > .nav-link {
        padding-left: 1.5rem;
    }

    /* Punkte mit Unterkategorien tragen einen Chevron nach unten (Wunsch
       Airclip, 09.10.2026: erkennbar machen, was aufklappt). Der Parent setzt
       dort ein "+" (clean-custom_niu_crit.css):
           header.niu-header-type-1 .dropdown-toggle::after { content:"+" !important }
       und dreht es beim Aufklappen per !important um 45 Grad. Beides wird hier
       mit !important und hoeherer Spezifitaet ersetzt; das Zeichen ist eine
       Maske auf currentColor und folgt damit der Schriftfarbe (auch dem
       orangen aktiven Punkt). Die Bootstrap-Raute aus Rahmenlinien faellt weg.
       Bewusst nur im Desktop: mobil bleibt das "+" des Parents. */
    header .niu-header-nav > .nav-item > .nav-link.dropdown-toggle::after {
        content: "" !important;
        display: inline-block;
        flex: 0 0 auto;
        width: .625rem;
        height: .625rem;
        margin-left: .375rem;
        border: 0 !important;
        opacity: .75;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 6l5 5 5-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
        mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 6l5 5 5-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
        transition: transform .2s ease;
    }

    header .niu-header-nav > .nav-item > .nav-link.dropdown-toggle[aria-expanded=true]::after {
        transform: rotate(180deg) !important;
    }

    /* Aktiver Punkt: der Entwurf setzt einen Punkt vor die Beschriftung. Die
       orange Schriftfarbe bringt der Parent ueber .active schon mit, hier
       kommt nur die Markierung dazu.

       ::before ist an dieser Stelle nicht frei: der Parent baut damit den
       mitwachsenden orangen Unterstrich (`content:""`, absolut positioniert,
       border-bottom, width 0 -> 100%) und schaltet ihn fuer diesen Headertyp
       per `display:none` ab. Der Punkt uebernimmt das Pseudoelement und muss
       deshalb JEDE dieser Eigenschaften zurechtruecken - `display` allein
       genuegt nicht, sonst klebte der Punkt als absolut positionierter Kasten
       unten am Link. */
    header .niu-header-nav > .nav-item.active > .nav-link::before {
        content: "\2022";
        /* `inline-block`, NICHT `block`. Der Wert muss nur weg von `none`,
           aber er muss fuer beide Fassungen des Links stimmen:

             Punkt MIT Unterkategorien  -> .dropdown-toggle, display:flex
             Punkt OHNE                 -> display:block

           In einem Flex-Container wird jedes Kind ohnehin blockifiziert, der
           Wert ist dort also gleichgueltig. Ausserhalb macht `block` aus dem
           Punkt einen eigenen Absatz - bei "Software", dem einzigen Eintrag
           ohne Unterkategorien, stand er dadurch in einer Zeile ueber der
           Beschriftung. */
        display: inline-block;
        vertical-align: baseline;
        position: static;
        transform: none;
        border: 0;
        width: auto;
        margin-right: .4rem;
        speak: never;
    }
}

/* --- Megamenue: weisser Kasten nur ueber die Containerbreite --- */

/* Der Aufklapper spannte den weissen Grund ueber die ganze Fensterbreite. Der
   Entwurf zeigt eine schwebende Karte in Containerbreite. Statt das Panel
   schmaler zu rechnen - dann muessten die Bootstrap-Containerbreiten je
   Breakpoint nachgebaut werden - bleibt es breit und wird durchsichtig; die
   Flaeche traegt der Container, der ohnehin drinsteckt:

       .dropdown-menu (breit, jetzt transparent)
         .dropdown-body
           .container.subcategory-wrapper   <- die weisse Karte

   Zwei Gruende fuer diese Aufteilung:

   - Das Panel behaelt seine Groesse und damit die Hoverflaeche. Wuerde der
     weisse Kasten selbst nach unten ruecken, entstuende zwischen Menuepunkt
     und Karte eine Luecke ohne Element - die Maus verliesse den Trigger und
     das Menue klappte zu. Das Panel deckt die Luecke ab; sichtbar ist sie
     trotzdem, weil es transparent ist.
   - `overflow-auto` bleibt am Panel, lange Menues scrollen weiter.

   `:has(> .dropdown-body)` trifft genau die Aufklapper mit diesem Aufbau -
   Kategorien-Megamenue (snippets/categories_mega.tpl), Themenwelten-Zeilen
   (layout/header_categories_worlds_rows.tpl) und Linkgruppen
   (snippets/linkgroup_list.tpl) - und NICHT die kleinen Kopfzeilen-Dropdowns
   von Konto und Warenkorb, die ihren weissen Grund behalten. Ueber die Klasse
   .niu-nav-dropdown ginge das nicht: die Linkgruppen-Variante traegt sie nicht,
   die drei sahen dann unterschiedlich aus.

   Nur ab 992px. Darunter ist das Menue die Offcanvas-Leiste, anderer Aufbau. */
@media (min-width: 992px) {
    header .dropdown-menu:has(> .dropdown-body) {
        background-color: transparent;
        border: 0;
        box-shadow: none;
    }

    header .dropdown-menu > .dropdown-body {
        /* Luft ueber und unter der Karte - innerhalb der Hoverflaeche */
        padding-top: .5rem;
        padding-bottom: 1.5rem;
    }

    header .dropdown-menu > .dropdown-body > .subcategory-wrapper {
        /* --niu-nav-bg, NICHT --niu-overlay-bg: die Overlay-Familie steht bei
           airclip auf rgba(255,255,255,0.85). Auf dem breiten Panel fiel das
           nicht auf, weil `header .dropdown-menu` es mit einem harten #fff
           uebersteuerte. Auf der Karte schlaegt die Transparenz durch - und
           weil der Modal-Backdrop (rgba(0,0,0,.5)) dahinter liegt, wirkte die
           Karte grau statt weiss. Die nav-Familie ist deckend und ausserdem
           die inhaltlich richtige: das ist Navigation, kein Overlay. */
        background-color: var(--niu-nav-bg, #fff);
        border-radius: 1rem;
        box-shadow: 0 1.25rem 2.5rem rgba(16, 36, 42, .14);
       /* padding-top: 1.75rem;
        padding-bottom: 1.75rem;*/
        padding:.5rem 2rem;
    }

    /* Die Unterlisten sind selbst .dropdown-menu und bringen deshalb ihren
       eigenen weissen Grund mit. Auf dem weissen Panel war er unsichtbar; auf
       der Karte zeichnete er sich als hellere Rechtecke ab, sobald die Karte
       nicht exakt dieselbe Farbe hat. Sie erben ab jetzt die Kartenfarbe. */
    header .dropdown-menu .subcategory-wrapper .categories-recursive-dropdown {
        background-color: transparent;
    }

    /* --- Spaltenueberschriften (Wunsch Airclip, 09.10.2026) ---

       Farben aus den Theme-v2-Rollen der Navigationsflaeche (--s-heading,
       --s-accent), nicht fest: Ueberschriften immer in der Ueberschriftfarbe.
       Bisher waren Ueberschriften OHNE Unterkategorien orange - sie tragen
       keine .nav-link-Klasse und fallen unter die Theme-v2-Linkregel
           body.niu-theme2 a:not(.btn):not([class*=btn-]):not(.nav-link)... { color: var(--s-accent) }
       Deren :not()-Kette hebt die Spezifitaet weit ueber diese Selektoren,
       daher die Farben hier mit !important - die Werte bleiben Theme-Rollen.
       Darunter eine feine Linie in Akzentfarbe. */
    header .subcategory-wrapper .submenu-headline-toplevel {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        color: var(--s-heading) !important;
        border-bottom: 1px solid color-mix(in srgb, var(--s-accent) 25%, transparent);
    }

    header .subcategory-wrapper .submenu-headline-toplevel:hover,
    header .subcategory-wrapper .submenu-headline-toplevel:focus {
        color: var(--s-accent) !important;
        text-decoration: none;
    }

    /* Pfeil hinter JEDER Spaltenueberschrift, auch hinter denen mit
       Unterkategorien (Michael): die Ueberschrift ist immer ein Link auf die
       Kategorie. Gleiche Maske wie bei den Unterkategorie-Kacheln der
       Kategorieseite.
       Ueberschriften mit Unterkategorien tragen .dropdown-toggle; dort setzt
       der Parent sein "+" (content und Drehung beim Aufklappen mit
       !important, siehe Chevron oben) und Bootstraps Raute aus Rahmenlinien.
       Beides wird hier ersetzt, deshalb !important. */
    header .subcategory-wrapper .submenu-headline-toplevel::after,
    header .subcategory-wrapper .submenu-headline-toplevel[aria-expanded=true]::after {
        content: "" !important;
        display: block !important;
        margin: 0 !important;
        border: 0 !important;
        opacity: 1 !important;
        transform: none !important;
        flex: 0 0 auto;
        width: 1rem;
        height: 1rem;
        background-color: var(--s-accent);
        -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2.5 8h10M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
        mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2.5 8h10M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
    }

    /* "Alle Produkte ansehen" unter Spalten ohne Unterkategorien
       (snippets/categories_mega_recursive.tpl) */
    header .subcategory-wrapper .ac-menu-show-all {
        margin-bottom: 1.5rem;
        color: var(--s-accent);
        text-decoration: none;
    }

    header .subcategory-wrapper .ac-menu-show-all:hover {
        color: var(--s-heading) !important;
        text-decoration: none;
    }
}

/* endregion */

/* region PDP-ABSCHNITTE (Airclip)
   Styles zu productdetails/dynamic/. Ein Abschnitt = ein Block hier, in der
   Reihenfolge des Figma-Entwurfs. Farben kommen aus dem Theme
   (--primary #F59500, --secondary #007288); was das Theme nicht hergibt,
   steht als --ac-* Variable am Anfang. */

:root {
    --ac-band: #eef2f5;          /* helles Band hinter Highlights, Einsatzbereiche, Vergleich */
    --ac-cream: #fff9f1;         /* Hinweisbanner und Tabellenkopf */
    --ac-teal-dark: #005768;     /* Zitatblock, dunkler als --secondary */
    --ac-chip: #e1edf2;          /* Icon-Plaettchen */
    --ac-hairline: #dde4e9;
    --ac-ink: #10242a;
    --ac-ink-muted: #5c6a6c;
    /* Die Airclip-SVGs haben viewBox 1000 bei stroke-width 20 – auf Icongroesse
       waeren das 0,4 px und damit unsichtbar. Strichstaerke kommt aus dem CSS. */
    --ac-icon-stroke: 44;
    /* Icongroessen am 02.09.2026 auf Wunsch angehoben: Karten 36->44 px mit
       28 px Symbol, Vorteile 44->56 px, Shop-Leiste 40->48 px mit 30 px
       Symbol. Grund war das DJI-Logo, das kaum erkennbar war.
       Strichstaerke am 02.09.2026 von 55 auf 44 zurueckgenommen - bei den
       groesseren Symbolen wirkte 55 zu fett. */
}

/* --- Geruest: Abschnitt, Kopfzeile, Buttons --- */

.ac-section { padding: 3.5rem 0; }
/* Nur das Hinweisbanner (banner-schulung) nutzt diese Variante. Am 29.09.2026
   von 1.5rem auf 2.5rem gesetzt - es stand zu dicht am Produktblock darueber. */
.ac-section--tight { padding: 2.5rem 0; }
.ac-section--band { background-color: var(--ac-band); }

.ac-sechead { margin-bottom: 2rem; }
.ac-sechead--center { text-align: center; }
.ac-sechead--center .ac-sechead__subtitle { margin-left: auto; margin-right: auto; }

.ac-sechead__eyebrow {
    margin: 0 0 .25rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary, #F59500);
}

.ac-sechead__title { margin: 0; font-style: italic; }

.ac-sechead__subtitle {
    margin: .75rem 0 0;
    max-width: 46rem;
    color: var(--ac-ink-muted);
}

.ac-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem 1.25rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: .9375rem;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.ac-btn--block { display: flex; width: 100%; }
.ac-btn--primary { background-color: var(--primary, #F59500); color: #fff; }
.ac-btn--primary:hover { background-color: #d98300; color: #fff; text-decoration: none; }
.ac-btn--outline { border-color: var(--primary, #F59500); color: var(--primary, #F59500); background: transparent; }
.ac-btn--outline:hover { background-color: var(--primary, #F59500); color: #fff; text-decoration: none; }
.ac-btn--ghost { border-color: rgba(255,255,255,.6); color: #fff; background: transparent; }
.ac-btn--ghost:hover { background-color: #fff; color: var(--secondary, #007288); text-decoration: none; }
.ac-btn--light { background-color: #fff; color: var(--primary, #F59500); }
.ac-btn--light:hover { background-color: #f2f2f2; color: var(--primary, #F59500); text-decoration: none; }
.ac-btn--teal { background-color: var(--secondary, #007288); color: #fff; }
.ac-btn--teal:hover { background-color: #005768; color: #fff; text-decoration: none; }

/* Platzhalterflaechen, solange Bilder fehlen */
.ac-product-section__placeholder,
.ac-banner__placeholder,
.ac-compare__placeholder,
.ac-package__placeholder,
.ac-reference__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(45deg, #f3f5f7 0 10px, #eaedf0 10px 20px);
    color: #97a3a5;
    font-size: .8125rem;
    letter-spacing: .04em;
    min-height: 9rem;
    height: 100%;
    border-radius: .375rem;
}

/* --- Feature Ribbons (Companion) --- */

/* Die Ribbon-Leiste wird immer ausgegeben, sobald die Ribbons aktiv sind -
   auch an Artikeln ohne die betreffenden Merkmale. Sie ist dann 0 hoch, traegt
   aber weiter ihr mb-3 und hinterlaesst 1rem Leerraum zwischen Untertitel und
   Artikelnummernzeile. Betrifft derzeit fast den ganzen Bestand: Merkmale sind
   an 10 von 527 Artikeln gepflegt.

   `:empty` greift hier nicht - der Container enthaelt Zeilenumbrueche und
   damit Textknoten. Deshalb die Abfrage auf fehlende Kindelemente. */
.niu-ribbon-details-container:not(:has(> *)),
.niu-ribbon-list-container:not(:has(> *)) {
    /* `!important` ist hier nicht Bequemlichkeit: der Abstand kommt aus der
       Bootstrap-Utility `mb-3`, und die traegt selbst `!important`. Ohne das
       Gegenstueck bleibt der Leerraum stehen (nachgemessen: 16px). */
    margin-bottom: 0 !important;
}

/* Das Gegenstueck zur Regel darueber: sind Ribbons da, brauchen sie Abstand
   nach OBEN zur Artikelnummernzeile. Der Parent gibt der Leiste nur ein mb-3,
   nach oben nichts - die Ribbons klebten an den essential infos.
   Wieder ueber "hat Kindelemente" statt :not(:empty), aus demselben Grund wie
   oben: der Container enthaelt Zeilenumbrueche und damit Textknoten. */
.niu-ribbon-details-container:has(> *),
.niu-ribbon-list-container:has(> *){
    margin-top: 1rem;
}

/* Nach unten fehlte der Abstand ganz: der Behaelter auf der Kachel traegt
   anders als der auf der Produktseite kein mb-3, die Ribbons klebten am
   Titel. Nur fuer die Kachel und nur, wenn wirklich Ribbons da sind - der
   leere Behaelter soll weiter keinen Platz kosten (Regel oben). */
.niu-ribbon-list-container:has(> *) { margin-bottom: .5rem; }

/* --- Kachelraster der Artikelliste --- */

/* Die Kacheln waren unterschiedlich breit, am deutlichsten auf der
   Softwareseite: 390 / 440 / 294 / 294 px statt vier gleicher Spalten.

   Grund: das Raster steht auf `grid-template-columns: repeat(4, 1fr)`, und
   `1fr` bedeutet `minmax(auto, 1fr)`. Eine Spalte kann damit nicht schmaler
   werden als der laengste unteilbare Inhalt einer ihrer Kacheln. Bei
   "Agisoft Metashape Professional" steckte in der Kurzbeschreibung ein 55
   Zeichen langes Wort (siehe productlist/item_box.tpl im Child), das allein
   447 px breit war - diese Spalte blaehte sich auf und nahm den anderen den
   Platz weg.

   min-width: 0 auf den Rasterkindern hebt genau diese Mindestbreite auf. Das
   ist derselbe Effekt wie `minmax(0, 1fr)`, kostet aber nur eine Regel statt
   einer Wiederholung aller grid-cols-Klassen ueber alle Breakpoints. */
.product-list.d-grid > * { min-width: 0; }

/* Sicherheitsnetz fuer den umgekehrten Fall: ein langes Wort, das jetzt nicht
   mehr die Spalte sprengt, wuerde sonst vom overflow: hidden mitten im Wort
   abgeschnitten. Betrifft ausser Kurztexten auch Artikelnummern und URLs. */
.niu-productbox-short-desc { overflow-wrap: anywhere; }

/* Die Kachel gibt die Kurzbeschreibung zweimal aus: einmal unsere Fassung mit
   sauberen Wortgrenzen (ac-shortdesc, aus dem Child) und einmal die des
   Parents. Warum das so ist, steht in productlist/item_box.tpl.
   ⚠ Bewusst auf .productbox-column eingegrenzt. Die Listenansicht
   (.productbox-row) ist sauber ueber den Block
   'productlist-item-list-description' geloest und hat keinen zweiten Eintrag -
   eine ungefilterte Regel wuerde ihr die Beschreibung ganz wegnehmen. */
.productbox-column .niu-productbox-short-desc:not(.ac-shortdesc) { display: none; }

/* --- Titel, Untertitel und Steuerhinweis auf der Artikelkachel --- */

/* Untertitel aus meta_airclip_product_subtitle, nur wenn auch ein Titel
   gepflegt ist (siehe productlist/item_box.tpl). In Space Mono wie die
   Artikelnummernzeile der Produktseite, ungekuerzt - laengere Untertitel
   brechen also um. Die Kachel vertraegt das, seit der Preisblock von unten
   sitzt. */
.ac-card-subtitle {
    font-family: 'Space Mono', monospace;
    font-size: .75rem;
    line-height: 1.5;
    color: var(--niu-page-text-muted, #788587);
}

/* Der Titel ist sonst fest zwei Zeilen hoch (clean-custom.css). Bei einem
   einzeiligen Titel stuende damit eine leere Zeile zwischen ihm und dem
   Untertitel. Mit Untertitel schrumpft er auf seinen Inhalt; die Deckelung auf
   zwei Zeilen bleibt, sehr lange Titel laufen also weiterhin nicht aus. */
.productbox-column .productbox-title:has(+ .ac-card-subtitle) {
    height: auto;
    max-height: calc(2 * 1lh);
}

/* Steuerhinweis unter dem Preis. Er steht im Preiskasten und muesste sonst
   dessen Groesse und Gewicht erben. */
.productbox-column .ac-tax-note,
.productbox-row .ac-tax-note {
    margin-top: .1rem;
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--niu-page-text-muted, #788587);
}

/* "ab" neben dem Preis, Steuerhinweis darunter. Der Steuerhinweis steht im
   Preisblock (productlist/niu_price_productgallery.tpl), der damit zweizeilig
   wird. Als inline-block richtet sich der Block an seiner LETZTEN Zeile aus -
   "ab" landete so auf Hoehe des Steuerhinweises. Flex richtet an der ersten
   Grundlinie aus. */
.productbox .niu-productbox-price-label {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: .25em;
}

/* --- Kurzbeschreibung auf der Artikelkachel --- */

/* Das Theme deckelt sie auf zwei Zeilen
   (.niu-productbox-short-desc { height: 2lh; overflow: hidden } in
   clean-custom.css) und schneidet laengere Texte mitten im Wort ab. Statt
   dessen vier Zeilen, ein weicher Verlauf an der Unterkante und ein Knopf zum
   Aufklappen.

   Vier Zeilen fest statt "so lang wie noetig": nur so sind alle Kacheln einer
   Reihe von sich aus gleich hoch und Preis, Lieferzeit und Aktionsknopf stehen
   auf einer Linie. Titel (zwei Zeilen), Bild und Preiszeile sind ohnehin bei
   jeder Kachel gleich hoch, die Beschreibung war die einzige Unbekannte.
   max-height statt height, damit ein kuerzerer Text den Kasten nicht kuenstlich
   aufblaeht und der Uebergang beim Aufklappen etwas zum Rechnen hat. */
.productbox-column .niu-productbox-short-desc.ac-shortdesc {
    height: auto;
    /* min und max zusammen ergeben eingeklappt genau vier Zeilen - auch bei
       kuerzeren Texten. Das ist der Punkt: nur wenn dieser Kasten bei jeder
       Kachel gleich hoch ist, stehen Preis und Knopf in einer Reihe auf einer
       Linie. Zum Aufklappen faellt allein die Obergrenze weg, deshalb zwei
       Angaben statt einer festen Hoehe. */
    min-height: calc(4 * 1lh);
    max-height: calc(4 * 1lh);
    overflow: hidden;
    transition: max-height .35s ease;
}

/* Der Verlauf erscheint nur, wo wirklich etwas abgeschnitten ist - die Klasse
   setzt das Skript nach dem Messen. Sonst bleichte auch ein zweizeiliger Text
   unten aus. Bewusst nicht bis auf null: die letzte Zeile soll blasser werden,
   nicht verschwinden. */
.ac-shortdesc-wrap--kuerzbar .ac-shortdesc {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.2lh), rgba(0, 0, 0, .25));
    mask-image: linear-gradient(to bottom, #000 calc(100% - 1.2lh), rgba(0, 0, 0, .25));
}

.ac-shortdesc-wrap--offen .ac-shortdesc {
    max-height: none;
    /* Aufgeklappt darf der Text nicht mehr schrumpfen. Als Flex-Element im
       Rahmen unten wuerde er sonst dem Platzmangel nachgeben, sich wieder auf
       vier Zeilen stauchen und der Knopf haette sichtbar nichts bewirkt. */
    flex: 0 0 auto;
    -webkit-mask-image: none;
    mask-image: none;
}

/* --- Preisblock am unteren Rand der Kachel --- */

/* Eingeklappt sind alle Kacheln einer Reihe von sich aus gleich hoch, da
   genuegte der normale Fluss. Sobald eine Kachel aufgeklappt wird, waechst die
   ganze Reihe mit - bei den Nachbarn entstand der Platz dann unten, waehrend
   ihr Preis oben stehen blieb. Deshalb bekommt der Rahmen um Kurztext und
   Knopf den uebrigen Platz; alles darunter - Preis, Lieferzeit, Aktionsknopf -
   wird dadurch an den unteren Rand geschoben und bleibt in der Reihe auf einer
   Linie.

   Dazu muss die Hoehe vom Rasterfeld bis zur Bildunterschrift durchgereicht
   werden, daher die vier Zwischenschritte. */
.productbox-column .productbox-inner { display: flex; flex-direction: column; }

.productbox-column .productbox-inner > .row {
    flex: 1 1 auto;
    flex-direction: column;
    flex-wrap: nowrap;
}
.productbox-column .productbox-inner > .row > .col { flex: 0 0 auto; width: 100%; max-width: 100%; }

/* flex-direction ist hier Pflicht. Ohne sie stellt der Standardwert row die
   Feature-Ribbons neben die Bildunterschrift statt darueber - sie sind das
   erste Kind dieser Spalte. */
.productbox-column .productbox-inner > .row > .col:last-child {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.productbox-column .productbox-inner > .row > .col:last-child > .niu-ribbon-list-container { flex: 0 0 auto; }

.productbox-column .niu-productbox-caption { display: flex; flex-direction: column; flex: 1 1 auto; }
.productbox-column .niu-productbox-caption > .ac-shortdesc-wrap { flex: 1 1 auto; }

/* jtl.evo.js (registerImageHover) schreibt bei "load" und "resize" die
   gemessene Hoehe als Inline-Style an jedes .product-wrapper und friert sie
   damit ein. Im Raster wird das nicht gebraucht - dort sorgt das Raster selbst
   dafuer, dass alle Kacheln einer Reihe gleich hoch sind. Mit der
   eingefrorenen Hoehe koennte die Kachel aber nicht mehr wachsen, das
   Aufklappen liefe ins Leere. !important ist unvermeidlich: gegen ein
   Inline-Attribut gewinnt sonst nichts. */
.product-list.d-grid > .product-wrapper { height: auto !important; }

/* Der Umschalter sieht aus wie ein Textlink, ist aber ein Knopf - er sitzt
   innerhalb des Kachel-Links, das Skript haelt den Klick davon ab, der
   Produktseite zu folgen. */
.ac-shortdesc-more {
    display: inline-block;
    /* Unsichtbar statt ausgeblendet: der Platz wird in jeder Kachel
       reserviert, sonst staende der Preis in Kacheln ohne Knopf hoeher als
       beim Nachbarn. Sichtbar wird er nur, wo der Text wirklich gekuerzt ist. */
    visibility: hidden;
    margin: -.25rem 0 .75rem;
    padding: 0;
    border: 0;
    background: none;
    /* Bewusst zurueckhaltend: derselbe gedaempfte Grauton wie die
       Kurzbeschreibung darueber, normale Staerke, kein Unterstrich. Er soll
       die Kachel nicht anfuehren - der Preis und der Aktionsknopf bleiben die
       auffaelligen Elemente. */
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--niu-page-text-muted, #788587);
    cursor: pointer;
    transition: color .15s ease;
}
.ac-shortdesc-wrap--kuerzbar .ac-shortdesc-more { visibility: visible; }
.ac-shortdesc-more:hover {
    color: var(--niu-page-text, #07252B);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ac-shortdesc-more [data-ac-shortdesc-zu] { display: none; }
.ac-shortdesc-wrap--offen .ac-shortdesc-more [data-ac-shortdesc-auf] { display: none; }
.ac-shortdesc-wrap--offen .ac-shortdesc-more [data-ac-shortdesc-zu] { display: inline; }

/* Lieferzeitzeile auf der Kachel. Die Mindesthoehe gilt bewusst fuer beide
   Faelle - die echte Zeile und den leeren Platzhalter aus
   productlist/item_box.tpl. Die echte Zeile ist von sich aus 16,8 px hoch,
   der leere Kasten 19,2 px; ohne gemeinsame Mindesthoehe blieben 2 px
   Unterschied und der Preis staende nicht ganz auf einer Linie. */
.productbox-column .niu-productbox-delivery-info { min-height: 1lh; }

/* --- DJI-Partnersiegel im Kopf der Produktseite --- */

/* Steht oben rechts neben dem Titel und ist rein dekorativ, darum absolut
   gesetzt: so schiebt es die Zeilen darunter nicht nach unten und der
   Abstand zwischen Titel, Artikelnummer und Pills bleibt wie auf allen
   anderen Produktseiten. Ausgegeben wird es in productdetails/details.tpl,
   nur bei DJI-Artikeln. */
.product-headline { position: relative; }

.ac-dji-badge {
    position: absolute;
    top: 0;
    right: 0;
    /* Feste Groesse nach Vorgabe vom 29.09.2026. object-fit, weil die Datei
       958 x 1200 ist und damit etwas schmaler als 62 x 76 - ohne das wuerde
       das Siegel gestaucht. So bleibt der Kasten genau 62 x 76 und die
       Grafik unverzerrt darin. */
    width: 62px;
    height: 76px;
    object-fit: contain;
    object-position: top right;
}

/* Die ganze rechte Spalte haelt die Breite des Siegels frei, damit kein Text
   darunter geraet - seit die Spalte auf lg-6 steht, reicht er sonst bis an den
   rechten Rand (Michael, 02.10.2026). 4,5rem = 72px sind die 62px des Siegels
   plus etwas Luft. Nur wenn das Siegel auch da ist: ohne Siegel hat die Spalte
   die volle Breite. Faellt :has() aus, ist der Abstand weg und ein langer
   Titel laeuft unter das Siegel - alles andere bleibt heil.

   Zwei Dinge holen sich die volle Breite zurueck:
   - das Siegel selbst, es soll am echten rechten Rand kleben;
   - alles ab der Kaufbox, also die Boxen "Was ist DJI Care?" und "Lizenz
     benoetigt" (die sonst zu zweit in eine zu schmale Zeile muessten) und die
     Kaufbox darunter, die als Karte so breit bleibt wie die Karten der
     Zusatzprodukte. */
.product-info-inner:has(.ac-dji-badge) { padding-right: 4.5rem; }
.product-info-inner:has(.ac-dji-badge) .ac-dji-badge { right: -4.5rem; }
.product-info-inner:has(.ac-dji-badge) .product-offer { margin-right: -4.5rem; }

/* Mobil faellt das Siegel weg und der Text bekommt die Breite zurueck
   (Michael, 02.10.2026). Auf der schmalen Spalte kostet es rund ein Fuenftel
   der Zeile, und der Titel bricht dadurch frueher um als noetig. Die
   Partnerschaft steht weiter unten ohnehin in den Shop-Vorteilen. */
@media (max-width: 767px) {
    .ac-dji-badge { display: none; }
    .product-info-inner:has(.ac-dji-badge) { padding-right: 0; }
    .product-info-inner:has(.ac-dji-badge) .product-offer { margin-right: 0; }
}

/* --- Custom Boxes im Kaufbereich --- */

/* "Was ist DJI Care?", "Lizenz benoetigt", "Jetzt Leasingangebot anfragen",
   "Preis auf Anfrage" - alles Custom Boxes aus der Companion-Einstellung. Die
   Karten bringen ein mb-3 mit, nach oben aber nichts; sie klebten dadurch an
   dem, was ueber ihnen steht. Der Abstand sitzt am Container und nicht an der
   Karte, sonst summierte er sich zwischen zwei gestapelten Karten mit deren
   mb-3 auf. */
/* Ausgenommen sind Behaelter, die schon eine Abstandsklasse tragen (mt-5 an
   den Boxen unter dem Preis und unter dem Bild) - die wuerden hier sonst von
   3rem auf 1rem zusammenfallen. Betroffen bleiben die Boxen zwischen Titel und
   Preis und die unter dem Warenkorb-Button. */
.niu-custom-boxes-container:not([class*="mt-"]) { margin-top: 1rem; }

/* --- Haekchenliste im Kaufbereich --- */

.ac-checklist { padding: .75rem 0 0; }
.ac-checklist ul { list-style: none; margin: 0; padding: 0; }
.ac-checklist li { position: relative; padding-left: 1.5rem; margin-bottom: .35rem; line-height: 1.5; }

/* Haken als Bootstrap-Glyphe, nicht aus assets/icons/. Grund: als Maske
   eingebunden bleibt das Airclip-SVG bei stroke-width 20 auf viewBox 1000
   haarduenn, und an ein extern geladenes Maskenbild kommt kein CSS heran.
   Die Airclip-Icons laufen deshalb nur dort, wo sie inline stehen. */
.ac-checklist li::before {
    content: "\F26E";
    font-family: bootstrap-icons, sans-serif;
    position: absolute;
    left: 0;
    top: 0;
    color: var(--secondary, #007288);
    font-size: .95em;
}

.ac-checklist p { margin: .75rem 0 .35rem; font-weight: 600; }
.ac-checklist p:first-child { margin-top: 0; }
.ac-shortdesc { padding: .75rem 0 0; }

/* --- Zusatzprodukte "Dazu empfohlen" ---
   Markup: productdetails/dynamic/_partials/additionals.tpl (aus dem Parent
   uebernommen, Kartenaufbau nach dem Entwurf umgestellt). Die Companion-Klasse
   aus der Einstellung additionalProductsCardStyle bleibt im Markup stehen,
   bringt in dieser Optik aber nichts mehr mit - Rahmen, Flaeche und Innenabstand
   kommen von hier. Farben aus dem Entwurf: Preis und "Infos" #194a3a,
   Steuerhinweis #6b7280, Rahmen #e5e5e5, Pille in --primary. */

/* Ueberschrift kommt aus dem Namen der X-Selling-Gruppe ("Dazu empfohlen:").
   Kursiv und etwas groesser als der Fliesstext, wie im Entwurf. */
.ac-additionals__head p {
    margin-bottom: 1rem;
    font-size: 1.125rem;
    font-style: italic;
}

.ac-additional {
    align-items: center;
    gap: 1rem;
    padding: .875rem 1.25rem;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: .75rem;
}

/* Feste Spaltenbreite, damit die Artikelnamen untereinander auf einer Kante
   stehen - die Produktbilder sind unterschiedlich breit. */
.ac-additional__img {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
}

.ac-additional__img img {
    width: auto;
    height: 4rem;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.ac-additional > .d-flex { align-items: center; }

.ac-additional__main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .25rem;
    min-width: 0;
}

.ac-additional__main .form-check { margin-bottom: 0; padding-left: 1.75rem; }
.ac-additional .form-check-label { font-size: .9375rem; line-height: 1.35; }

/* Groessere Box als die 13 px des Browsers. Der Einzug der form-check waechst
   mit, sonst rutscht das Kaestchen unter den Text. */
.ac-additional .form-check-input {
    width: 1.125rem;
    height: 1.125rem;
    margin-left: -1.75rem;
    margin-top: .0625rem;
    accent-color: #194a3a;
}

/* Laeuft im Textfluss des Labels hinter dem Artikelnamen - siehe Begruendung
   im Template. vertical-align statt align-items, weil sie als Inline-Element
   in einer Textzeile sitzt. */
.ac-additional__badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: .375rem;
    padding: .4375rem .875rem;
    border-radius: 999px;
    background-color: var(--primary, #F59500);
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.ac-additional__prices {
    flex: none;
    justify-content: center;
    gap: .125rem;
}

.ac-additional__price { font-size: 1.25rem; color: #194a3a; }

/* Steuerhinweis in Space Mono wie auf den Artikelkacheln. */
.ac-additional__tax {
    font-family: 'Space Mono', monospace;
    color: #6b7280;
}

.ac-additional__info { color: #194a3a; font-weight: 600; cursor: pointer; }
.ac-additional__info:hover { text-decoration: underline; }

@media (max-width: 575px) {
    .ac-additional { padding: .75rem .875rem; gap: .75rem; }
    .ac-additional__img { width: 3.5rem; }
    .ac-additional__img img { height: 3rem; }
}

/* --- Hinweisbanner "Schulung und Drohne" --- */

.ac-banner-notice {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background-color: var(--ac-cream);
    border-radius: .5rem;
    padding: 1.125rem 1.5rem;
}

.ac-banner-notice__icon { flex: none; color: var(--primary, #F59500); }
.ac-banner-notice__icon svg { display: block; width: 1.75rem; height: 1.75rem; }
.ac-banner-notice__body { flex: 1 1 auto; min-width: 0; }
.ac-banner-notice__title { margin: 0; font-weight: 700; font-style: italic; font-size: 1.0625rem; }
.ac-banner-notice__text { margin: .1rem 0 0; font-size: .875rem; color: var(--ac-ink-muted); }
.ac-banner-notice .ac-btn { flex: none; }

@media (max-width: 767px) {
    .ac-banner-notice { flex-wrap: wrap; }
    .ac-banner-notice .ac-btn { width: 100%; }
}

/* --- Lieferumfang der Komplettpakete (snippets/ac_lieferumfang.tpl) ---
   Fester Kasten ueber dem Preis, nur Warengruppe 17. Ersetzt die
   Companion-Box "In Paket enthalten" (schwarz umrandet): warme Flaeche,
   Paket-Symbol im Plaettchen, Haken wie in der Haekchenliste. Der Inhalt
   kommt als HTML aus Tab 2 (<ul><li><p>), darunter optional ein Absatz. */
.ac-lieferumfang {
    margin: 1.25rem 0;
    padding: 1.25rem 1.5rem;
    background-color: var(--ac-cream);
    border-radius: 16px;
    /* Schatten, damit der Kasten sich vom warmen Seitengrund abhebt: weiche
       Flaeche plus enge Kante, in der Staerke halb zwischen ohne und der
       ersten Fassung (Michael) */
    box-shadow: 0 10px 28px rgba(16, 36, 42, .06), 0 1px 3px rgba(16, 36, 42, .04);
}

.ac-lieferumfang__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .875rem;
}

.ac-lieferumfang__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
    background-color: #fff;
    color: var(--primary, #F59500);
}

.ac-lieferumfang__icon svg { display: block; width: 1.75rem; height: 1.75rem; }
.ac-lieferumfang__icon svg [stroke] { stroke-width: var(--ac-icon-stroke); }

.ac-lieferumfang__title { margin: 0; font-size: 1.125rem; font-weight: 700; font-style: italic; color: var(--ac-ink); }

.ac-lieferumfang__body ul { list-style: none; margin: 0; padding: 0; }
.ac-lieferumfang__body li { position: relative; padding-left: 1.625rem; margin-bottom: .4rem; line-height: 1.5; }
.ac-lieferumfang__body li p { margin: 0; }

/* Haken wie .ac-checklist - Bootstrap-Glyphe, Begruendung dort */
.ac-lieferumfang__body li::before {
    content: "\F26E";
    font-family: bootstrap-icons, sans-serif;
    position: absolute;
    left: 0;
    top: 0;
    color: var(--secondary, #007288);
}

.ac-lieferumfang__body > p { margin: .75rem 0 0; font-size: .875rem; color: var(--ac-ink-muted); }
.ac-lieferumfang__body > p:empty { display: none; }

/* --- Bonus-Hinweis vor dem Lieferumfang (sections/bonus.tpl) ---
   Nur Komplettpakete, in der Section auf das Airclip Fly Paket beschraenkt.
   Logo links, Ueberschrift und Text rechts, Flaeche wie der Lieferumfang. */
.ac-bonus {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 1.25rem 0;
    padding: 1rem 1.5rem;
    background-color: var(--ac-cream);
    border: 1px solid color-mix(in srgb, var(--primary, #F59500) 15%, transparent);
    border-radius: 16px;
}

/* Das Logo ist bis zum Original ein Ausschnitt mit cremefarbenem Grund -
   darken laesst den Grund in der Flaeche verschwinden */
.ac-bonus__logo { flex: none; width: 8rem; height: auto; mix-blend-mode: darken; }
.ac-bonus__body { min-width: 0; }
.ac-bonus__title { margin: 0 0 .15rem; font-weight: 700; font-size: 1.0625rem; color: var(--ac-ink); }
.ac-bonus__text { margin: 0; color: var(--ac-ink); }

@media (max-width: 575px) {
    .ac-bonus { gap: 1rem; padding: 1rem; }
    .ac-bonus__logo { width: 6rem; }
}

/* --- Icon-Karten (Highlights, Einsatzbereiche) --- */

.ac-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

@media (max-width: 991px) { .ac-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .ac-cards { grid-template-columns: 1fr; } }

.ac-card {
    background-color: #fff;
    border: 1px solid var(--ac-hairline);
    border-radius: .5rem;
    padding: 1.25rem;
}

.ac-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .5rem;
    background-color: var(--ac-chip);
    color: var(--secondary, #007288);
    margin-bottom: .875rem;
}

/* Die SVGs bringen width/height 1000 mit – ohne das hier sprengen sie die Karte. */
.ac-card__icon svg,
.ac-card__icon img { display: block; width: 1.75rem; height: 1.75rem; object-fit: contain; }
.ac-card__icon svg [stroke] { stroke-width: var(--ac-icon-stroke); }

.ac-card__title { margin: 0 0 .35rem; font-size: 1rem; font-weight: 700; }
.ac-card__text { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--ac-ink-muted); }

/* --- Bildkarten (Einsatzbereiche) ---
   Seit dem 02.09. liefern die Attribute dort ein Bild statt eines Icons, also
   Bild oben statt Plaettchen. Aufbau sonst wie die Icon-Karten. */

.ac-usecases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }

@media (max-width: 991px) { .ac-usecases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .ac-usecases { grid-template-columns: 1fr; } }

.ac-usecase {
    background-color: #fff;
    border: 1px solid var(--ac-hairline);
    border-radius: .5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ac-usecase__media { background-color: #f3f5f7; }
.ac-usecase__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.ac-usecase__title { margin: 1.25rem 1.25rem .35rem; font-size: 1rem; font-weight: 700; }
.ac-usecase__text { margin: 0 1.25rem 1.25rem; font-size: .875rem; line-height: 1.5; color: var(--ac-ink-muted); }

/* FAQ als fertiges HTML aus einem Attribut */
.ac-faq__html { font-size: .9375rem; }

/* --- "Deine Vorteile": Icon ueber Text, ohne Karte --- */

.ac-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 56rem;
    margin: 0 auto;
}

@media (max-width: 767px) { .ac-benefits { grid-template-columns: repeat(2, 1fr); } }

.ac-benefit { text-align: center; }
.ac-benefit__icon { display: block; color: var(--dark, #485051); margin-bottom: .875rem; }
.ac-benefit__icon svg,
.ac-benefit__icon img { display: inline-block; width: 3.5rem; height: 3.5rem; object-fit: contain; }
.ac-benefit__icon svg [stroke] { stroke-width: 35; }
.ac-benefit__text { margin: 0; font-size: .875rem; line-height: 1.45; }

/* --- Abwechselnde Bild-/Text-Bloecke --- */

.ac-product-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.ac-product-section + .ac-product-section { margin-top: 3.5rem; }
.ac-product-section--media-right .ac-product-section__media { order: 2; }
/* Ohne Bild nimmt der Text die ganze Breite, statt eine leere Spalte zu lassen */
.ac-product-section--no-media { grid-template-columns: 1fr; }
.ac-product-section__media img { display: block; width: 100%; height: auto; border-radius: .375rem; }
.ac-product-section__title { margin: 0 0 .75rem; font-style: italic; }
.ac-product-section__text { margin: 0; color: var(--ac-ink-muted); }

@media (max-width: 767px) {
    .ac-product-section { grid-template-columns: 1fr; gap: 1.5rem; }
    .ac-product-section--media-right .ac-product-section__media { order: 0; }
}

/* --- "In 3 Schritten zum Erfolg" ---
   Farben aus dem Entwurf gemessen: Kreisrand #efbc68, Fuellung #fdf6e9,
   Ziffer #e89a36 - allesamt Tints von --primary. Die Verbindungslinie ist
   Dekoration ueber ::before auf der Liste, nicht im Markup. */

.ac-steps {
    --ac-step-ring: #efbc68;
    --ac-step-fill: #fdf6e9;
    --ac-step-ink: #e89a36;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 56rem;
}

/* Gestrichelte Linie auf Hoehe der Kreismitte, zwischen erstem und letztem
   Kreis. Sie endet in den Kreisen, deshalb der Einzug von je einem Sechstel
   der Gesamtbreite - das ist die Mitte der aeusseren Spalten. */
.ac-steps::before {
    content: "";
    position: absolute;
    top: 1.5rem;
    left: 16.66%;
    right: 16.66%;
    border-top: 2px dashed var(--ac-step-ring);
}

.ac-step {
    position: relative;
    text-align: center;
}

.ac-step__num {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 2px solid var(--ac-step-ring);
    background-color: var(--ac-step-fill);
    color: var(--ac-step-ink);
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 1.25rem;
}

.ac-step__text {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.5;
    max-width: 18rem;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    .ac-steps { grid-template-columns: 1fr; gap: 2rem; }
    .ac-steps::before { display: none; }
}

/* --- Breites Bild --- */

.ac-banner img { display: block; width: 100%; height: auto; border-radius: .5rem; }
.ac-banner__placeholder { min-height: 20rem; }

/* --- Shop-Vorteile als Leiste ---
   Masse und Farben aus dem Entwurf gemessen: Leiste #eff2f5 bei 96 px Hoehe,
   Icon-Plaettchen 40 px in #e6eaee, Icon dunkel (nicht petrol wie in den
   Karten weiter oben), Text daneben statt darunter. */

.ac-shopusp { text-align: center; }

.ac-shopusp__logo {
    display: block;
    height: 2.25rem;
    width: auto;
    margin: 0 auto 1.25rem;
}

.ac-shopusp .ac-sechead { margin-bottom: 1.75rem; }

.ac-usps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: var(--ac-band);
    border-radius: .75rem;
}

.ac-usp {
    display: flex;
    align-items: center;
    /* Symbol und Text stehen als Paar in der Mitte der Spalte, nicht am
       linken Rand. Der Text selbst bleibt linksbuendig - bei zwei Zeilen
       sieht zentrierter Flattersatz neben einem Symbol unruhig aus. */
    justify-content: center;
    gap: .875rem;
    padding: 1.75rem 1.5rem;
    text-align: left;
    position: relative;
}

/* Haarlinie zwischen den Eintraegen, nicht an den Aussenkanten. Als
   Pseudoelement und nicht als inset-Schatten: der lief ueber die volle Hoehe
   der Spalte. So ist der Strich halb so lang und steht mittig.
   Zwei Pseudoelemente, weil im Zweispalter der vierte Eintrag gleichzeitig
   einen senkrechten und einen waagerechten Strich braucht: ::before ist immer
   der senkrechte, ::after immer der waagerechte. */
.ac-usp::before,
.ac-usp::after {
    content: "";
    position: absolute;
    background-color: #e1e6eb;
}

.ac-usp + .ac-usp::before {
    left: 0;
    top: 25%;
    width: 1px;
    height: 50%;
}

.ac-usp__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: .625rem;
    background-color: #e6eaee;
    color: var(--ac-ink, #10242a);
}

.ac-usp__icon svg,
.ac-usp__icon img { display: block; width: 1.875rem; height: 1.875rem; object-fit: contain; }

/* Markenzeichen statt Strichsymbol: die Strichstaerke aus dem CSS greift bei
   ihnen nicht, eine eigene Groesse brauchen sie derzeit aber auch nicht - 52 px
   waren zu gross (Michael, 02.09.2026). Die Klasse bleibt als Angriffspunkt
   stehen, falls doch mal ein Logo aus der Reihe faellt. */
.ac-usp__icon svg [stroke] { stroke-width: var(--ac-icon-stroke); }

/* Gleiche Breite in jeder Spalte, damit die vier Symbole auf einer Kante
   stehen (Michael, 02.10.2026). Ohne das richtet sich jede Spalte nach ihrer
   eigenen Textlaenge: "DJI Haendler aus Deutschland" fuellt die Spalte
   komplett und steht damit am Innenabstand, waehrend die kuerzeren Eintraege
   daneben sichtbar mehr Luft haben - das las sich wie ein fehlender Abstand
   beim vierten Symbol. 13rem fasst den laengsten Eintrag einzeilig; wird die
   Spalte schmaler, schrumpfen alle vier gleich weit. */
.ac-usp__text { flex: 0 1 13rem; font-size: .9375rem; line-height: 1.35; }

/* Ab hier keine Trennstriche mehr (Michael, 02.10.2026): im Zweispalter
   braeuchte der vierte Eintrag einen senkrechten UND einen waagerechten, und
   das Kreuz aus beiden zerlegte die Flaeche mehr als es sie ordnete. Das
   Raster selbst trennt die Eintraege deutlich genug. */
@media (max-width: 991px) {
    .ac-usps { grid-template-columns: repeat(2, 1fr); }
    .ac-usp::before,
    .ac-usp::after { content: none; }
}

/* Einspaltig, ohne Trennstriche und linksbuendig (Michael, 02.10.2026).
   Untereinander trennt der Zeilenumbruch die Eintraege schon deutlich genug,
   und am linken Rand stehen die Symbole auf einer Kante - zentriert wandert
   jedes Paar je nach Textlaenge an eine andere Stelle. */
/* Einspaltig: die Eintraege stehen linksbuendig, der Block aus allen vieren
   aber mittig (Michael, 02.10.2026). Dafuer ist die Spalte so breit wie der
   laengste Eintrag (max-content) und wird als Ganzes zentriert - damit teilen
   sich alle vier dieselbe linke Kante, statt dass jeder fuer sich mittig
   sitzt und die Symbole eine Treppe bilden. minmax(0, …) laesst die Spalte
   auf sehr schmalen Geraeten trotzdem schrumpfen, statt seitlich
   hinauszulaufen. */
@media (max-width: 575px) {
    .ac-usps {
        grid-template-columns: minmax(0, max-content);
        justify-content: center;
    }
    .ac-usp { justify-content: flex-start; padding: 1rem 1.25rem; }
}

/* --- Individuelle Beratung ---
   Bandflaeche mit runden Ecken: Portrait links, Text daneben, Terminbutton
   rechts. Der Button sitzt ueber margin-left:auto am rechten Rand - damit
   bleibt die Breite des Textblocks unabhaengig von der Buttonbeschriftung,
   die aus einer Sprachvariablen kommt und in anderen Sprachen laenger sein
   kann. */

.ac-advice {
    display: flex;
    align-items: center;
    gap: 2rem;
    background-color: var(--ac-band);
    border-radius: 1rem;
    padding: 2.25rem 2.5rem;
}

/* Feste Groesse, damit ein nicht quadratisches Foto nicht verzerrt: der
   Ausschnitt kommt aus object-fit, nicht aus der Bilddatei. */
.ac-advice__photo {
    flex: none;
    width: 6.875rem;
    height: 6.875rem;
    border-radius: 50%;
    object-fit: cover;
}

.ac-advice__body { flex: 1 1 auto; min-width: 0; }

.ac-advice__title {
    margin: 0 0 .35rem;
    font-size: 1.75rem;
    line-height: 1.2;
}

.ac-advice__text {
    margin: 0;
    max-width: 32rem;
    color: var(--ac-ink-muted);
    line-height: 1.6;
}

.ac-advice__cta {
    flex: none;
    margin-left: auto;
    padding: .75rem 1.5rem;
}

/* Mobil stehen Portrait, Text und Button untereinander und mittig
   (Michael, 02.10.2026). Das Portrait ist rund und der Button nimmt die
   volle Breite - linksbuendig dazwischen wirkte der Textblock versetzt. */
@media (max-width: 767px) {
    .ac-advice {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.25rem;
        padding: 1.75rem;
    }
    .ac-advice__title { font-size: 1.375rem; }
    /* max-width am Text ist auf der schmalen Spalte wirkungslos, nimmt dem
       Block aber die Mitte, sobald er doch einmal breiter wird. */
    .ac-advice__text { max-width: none; margin-inline: auto; }
    /* Der Button nimmt die volle Breite, sobald er in eine eigene Zeile
       rutscht - ein rechtsbuendiger Pillenbutton unter dem Text sieht aus,
       als haette er sich verlaufen. */
    .ac-advice__cta { margin-left: 0; width: 100%; text-align: center; }
}

/* --- Drohnenvergleich --- */

.ac-compare { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: stretch; }

@media (max-width: 991px) { .ac-compare { grid-template-columns: repeat(2, 1fr); } }

/* Unter 768px nicht untereinander, sondern waagerecht scrollbar mit
   angeschnittener naechster Karte (Michael, 02.10.2026) - dieselbe Bauart wie
   bei den Komplettpaketen: ohne Skript, ohne Pfeile, das Anschneiden zeigt,
   dass es weitergeht, und scroll-snap faengt die Karte nach dem Wischen. */
@media (max-width: 767px) {
    .ac-compare {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 80%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: .5rem;
    }
    .ac-compare__card { scroll-snap-align: start; }
}

/* Ab 992px: feste Kartenbreite statt vier gleicher Spalten (Michael,
   07.10.2026). Eine Karte ist immer ein Viertel der Reihe breit.
   - Weniger als vier Karten: die Reihe steht mittig, statt links zu kleben
     und rechts eine leere Spalte zu lassen.
   - Ab fuenf Karten: waagerecht scrollbar mit scroll-snap - derselbe
     skriptlose Slider wie mobil. Die Mitte wird dabei abgeschaltet: ein
     zentrierter Ueberlauf ragt links aus dem Scrollbereich und waere dort
     nicht mehr erreichbar. ("safe center" loest das eleganter, ist in Safari
     aber erst spaet angekommen - deshalb die Fallunterscheidung ueber :has.)
   Die subgrid-Ausrichtung weiter unten bleibt erhalten: die Karten liegen
   weiter in EINEM Raster, nur in Spalten statt in einer festen Vierergruppe. */
@media (min-width: 992px) {
    .ac-compare {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - 3rem) / 4);
        justify-content: center;
    }
    .ac-compare:has(> .ac-compare__card:nth-child(5)) {
        justify-content: start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: .75rem;
    }
    .ac-compare__card { scroll-snap-align: start; }
}

.ac-compare__card {
    position: relative;
    background-color: #fff;
    border-radius: .5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ac-compare__badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--primary, #F59500);
    color: #fff;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .25rem .625rem;
    border-bottom-left-radius: .375rem;
    z-index: 1;
}

.ac-compare__media { padding: 1.5rem; background-color: #fff; }
.ac-compare__media img { display: block; width: 100%; height: auto; }
.ac-compare__placeholder { min-height: 8rem; }

.ac-compare__body {
    background-color: var(--secondary, #007288);
    color: #fff;
    padding: 1.25rem;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Die Karte des aufgerufenen Artikels bleibt weiss und wird stattdessen
   ueber Badge und vollen Button hervorgehoben. */
.ac-compare__card--current .ac-compare__body { background-color: #fff; color: inherit; }

.ac-compare__name { margin: 0 0 .25rem; font-size: 1.0625rem; font-weight: 700; color: #fff; }
.ac-compare__card--current .ac-compare__name { color: inherit; }
.ac-compare__subtitle { margin: 0 0 .25rem; font-family: 'Space Mono', monospace; font-size: .75rem; line-height: 1.5; opacity: .8; }
.ac-compare__pricebox { margin: 0 0 .75rem; }
.ac-compare__price { margin: 0; font-weight: 700; color: var(--primary, #F59500); }
.ac-compare__tax { margin: 0; font-size: .75rem; opacity: .7; }

/* Der Versandlink kommt aus dem Shopstandard in dunklem Grau – auf dem
   Teal-Grund der Vergleichskarten praktisch unlesbar. Er uebernimmt hier die
   Textfarbe und bleibt als Link an der Unterstreichung erkennbar. */
.ac-compare__tax a { color: inherit; text-decoration: underline; }

.ac-compare__specs { list-style: none; margin: 0 0 1.25rem; padding: 0; font-size: .8125rem; }
.ac-compare__specs li { padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.25); }
.ac-compare__card--current .ac-compare__specs li { border-bottom-color: var(--ac-hairline); }
.ac-compare__specs li:last-child { border-bottom: none; }

/* Ungepflegter Slot: der Strich steht mittig und traegt nicht die Betonung
   eines echten Werts. */
.ac-compare__specs-leer { text-align: center; opacity: .55; }

.ac-compare__body .ac-btn { margin-top: auto; }

/* GLEICHE KARTENHOEHE, GLEICHE PREISHOEHE (Festlegung Michael 02.09.2026)

   Verlangt war zweierlei: alle Karten gleich hoch, und der Preis auf einer
   Linie, auch wenn die Produktnamen unterschiedlich viele Zeilen brauchen. Das
   Zweite geht nicht mit `align-items: stretch` allein – das macht nur die
   Karten gleich hoch, verschiebt aber alles unter einem langen Namen nach
   unten.

   Deshalb `subgrid`: die Reihe gibt fuenf Zeilen vor (Bild, Name, Preis,
   Werteliste, Button), und jede Karte reicht dieselben Zeilen an ihren Inhalt
   durch. Eine Zeile ist damit so hoch wie ihr hoechster Inhalt UEBER ALLE
   KARTEN – der laengste Name bestimmt die Namenszeile, danach setzen alle
   Preise wieder gleich auf.

   Der Weg ueber eine feste Namenshoehe waere ohne subgrid moeglich, wuerde
   aber lange Wawi-Namen abschneiden ("DJI Matrice 4T (inkl. 12 Monate DJI Care
   Enterprise Basic)" braucht bei Kartenbreite drei Zeilen). subgrid richtet
   ohne Kuerzung aus.

   Zwei Punkte zur Umsetzung:

   - `row-gap` muss hier 0 sein. Ein Subgrid erbt die Abstaende des
     Elterngitters, ein row-gap von 1rem wuerde also INNERHALB jeder Karte
     zwischen Bild, Name, Preis, Liste und Button auftauchen. Der Abstand
     zwischen den Karten kommt allein aus `column-gap`.
   - Nur ab 992px, wo die vier Karten in einer Reihe stehen. Sobald die Reihe
     umbricht (2 oder 1 Spalte), stehen die Karten untereinander – dann gibt es
     keine gemeinsame Zeile mehr auszurichten, und die Flex-Variante von oben
     bleibt stehen, inklusive row-gap.

   Ohne subgrid-Unterstuetzung im Browser greift der Block nicht und die Karten
   rendern wie vorher: gleich hoch, Preis nicht ausgerichtet. Kein Bruch. */
@supports (grid-template-rows: subgrid) {
    @media (min-width: 992px) {
        .ac-compare {
            grid-template-rows: auto auto auto auto auto;
            row-gap: 0;
        }

        .ac-compare__card {
            grid-row: span 5;
            display: grid;
            grid-template-rows: subgrid;
        }

        /* Der Body traegt die Farbflaeche und muss deshalb ein Element bleiben.
           Er spannt die Zeilen 2 bis 5 und gibt sie als eigenes Subgrid weiter. */
        .ac-compare__body {
            grid-row: span 4;
            display: grid;
            grid-template-rows: subgrid;
        }
    }
}

/* --- Zitat "Tipp vom Profi" --- */

.ac-reference { display: grid; grid-template-columns: 1fr 2fr; border-radius: .5rem; overflow: hidden; }

/* Festes Bildverhaeltnis 5:4 - ein gaengiges Format, das Airclip direkt
   anlegen kann, und dem Entwurf am naechsten. Das Bild liegt absolut im
   Rahmen und wird per object-fit beschnitten; die Hoehe kommt aus dem
   Verhaeltnis der Spalte, nicht aus dem Foto. Ist der Zitattext laenger,
   waechst die Zeile mit und das Bild fuellt sie weiter aus (aspect-ratio
   ist dann nur Mindestmass). */
.ac-reference__media { position: relative; aspect-ratio: 5 / 4; }
.ac-reference__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.ac-reference__placeholder { min-height: 16rem; border-radius: 0; }

.ac-reference__body { background-color: var(--ac-teal-dark); color: #fff; padding: 2.5rem; margin: 0; display: flex; flex-direction: column; justify-content: center; }
.ac-reference__eyebrow { margin: 0 0 .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary, #F59500); }
.ac-reference__text { margin: 0 0 1.25rem; font-size: 1.25rem; font-weight: 700; font-style: italic; line-height: 1.4; }
.ac-reference__person { display: flex; flex-direction: column; }
.ac-reference__name { font-weight: 700; font-size: .9375rem; }
.ac-reference__rolle { font-size: .8125rem; opacity: .75; }

@media (max-width: 767px) { .ac-reference { grid-template-columns: 1fr; } }

/* --- Komplettpakete ---
   Die Gruppe fuehrt laut Abstimmung zwei bis vier Artikel. Das Raster richtet
   sich nach der tatsaechlichen Anzahl, damit zwei Pakete nicht als schmale
   Saeulen links kleben. Unterhalb von 768 px wird die Reihe horizontal
   scrollbar statt die Karten unlesbar zu quetschen - das ist der Slider aus
   der Abstimmung, ohne Skript. */

.ac-packages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.ac-packages[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 46rem; margin: 0 auto; }
.ac-packages[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 991px) {
    .ac-packages,
    .ac-packages[data-count="2"],
    .ac-packages[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
}

@media (max-width: 767px) {
    .ac-packages,
    .ac-packages[data-count="2"],
    .ac-packages[data-count="4"] {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 80%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* Oben Luft fuer die Pille "Beliebt": sie sitzt zur Haelfte ueber der
           Kartenkante, und overflow-x macht aus der Reihe einen Scrollrahmen,
           der sie sonst auch senkrecht abschneidet. */
        padding-top: .75rem;
        padding-bottom: .5rem;
    }
    .ac-package { scroll-snap-align: start; }
}

.ac-package {
    position: relative;
    background-color: #fff;
    border: 1px solid var(--ac-hairline);
    /* 1rem statt .5rem nach Entwurf (Michael, 02.10.2026) - zusammen mit dem
       orangen Rahmen am zweiten Paket wirkte die flachere Rundung hart. */
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.ac-package--featured { border-color: var(--primary, #F59500); border-width: 2px; }

.ac-package__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--primary, #F59500);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    padding: .2rem .75rem;
    border-radius: 999px;
}

.ac-package__kicker { margin: 0; font-size: .8125rem; color: var(--ac-ink-muted); }
.ac-package__name { margin: 0 0 1rem; font-style: italic; font-size: 1.5rem; }

.ac-package__media {
    display: block;
    margin-bottom: 1.25rem;
    background-color: #f3f5f7;
    border-radius: .375rem;
    overflow: hidden;
}

.ac-package__media img { display: block; width: 100%; height: auto; }

.ac-package__label { margin: 0 0 .5rem; font-weight: 700; font-size: .9375rem; }

.ac-package__list { list-style: none; margin: 0 0 1.5rem; padding: 0; font-size: .875rem; }
.ac-package__list li { position: relative; padding-left: 1.5rem; margin-bottom: .35rem; }
.ac-package__list li::before {
    content: "\F26E";
    font-family: bootstrap-icons, sans-serif;
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary, #F59500);
    font-size: .9em;
}
.ac-package .ac-btn { margin-top: auto; }

/* --- FAQ ---
   Aus dem Entwurf gemessen: Zeilen weiss mit warmem Rand #f2ece5, Pillenform,
   Kontaktzeile creme #fdf9f3 mit orangem Text. Der warme Rand ist Absicht und
   nicht das kuehle --ac-hairline der uebrigen Karten.

   Wichtig: die Regeln greifen sowohl auf .ac-faq__item als auch auf nackte
   <details> innerhalb von .ac-faq__html. Airclip pflegt das FAQ als HTML nach
   Vorlage – ohne Klassen soll es genauso aussehen, damit eine beim Kopieren
   verlorene Klasse nichts kaputt macht. */

.ac-faq {
    --ac-faq-line: #f2ece5;
    max-width: 46rem;
    margin: 0 auto;
}

.ac-faq__item,
.ac-faq__html details {
    background-color: #fff;
    border: 1px solid var(--ac-faq-line);
    border-radius: 999px;
    margin-bottom: .625rem;
}

/* Aufgeklappt braucht es Ecken statt Pille, sonst schneidet der Radius
   die Antwort an den Seiten ab. */
.ac-faq__item[open],
.ac-faq__html details[open] { border-radius: 1.5rem; }

.ac-faq__question,
.ac-faq__html summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.75rem;
    cursor: pointer;
    font-size: .9375rem;
    list-style: none;
}

.ac-faq__question::-webkit-details-marker,
.ac-faq__html summary::-webkit-details-marker { display: none; }

.ac-faq__question::after,
.ac-faq__html summary::after {
    content: "+";
    flex: none;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--ac-ink-muted);
}

.ac-faq__item[open] .ac-faq__question::after,
.ac-faq__html details[open] summary::after { content: "\2013"; }

.ac-faq__answer,
.ac-faq__html details > *:not(summary) {
    padding: 0 1.75rem;
    font-size: .9375rem;
    color: var(--ac-ink-muted);
}

.ac-faq__html details > *:not(summary):last-child { padding-bottom: 1.25rem; }
.ac-faq__answer { padding-bottom: 1.125rem; }

/* Listen und Absaetze aus der Kundenvorlage sollen nicht aus der Zeile fallen.
   Das Padding wird hier vollstaendig gesetzt: die allgemeine Regel darueber
   gibt 1.75rem seitlich, ein blosses padding-left wuerde das ueberschreiben und
   die Aufzaehlungszeichen links aus der Pille schieben. 3rem = 1.75rem Rand
   plus Einzug fuer die Punkte. */
.ac-faq__html details ul,
.ac-faq__html details ol { margin: 0 0 .75rem; }
.ac-faq__html details > ul,
.ac-faq__html details > ol { padding: 0 1.75rem 0 3rem; }

/* Mit strukturierten Daten liegt die Antwort in zwei Huellen (acceptedAnswer
   und text), die Liste ist dann kein direktes Kind mehr von <details>. Den
   seitlichen Abstand bringt in dem Fall schon die aeussere Huelle mit - hier
   bleibt nur der Einzug fuer die Aufzaehlungszeichen. Ohne diese Trennung
   summierten sich beide Abstaende und die Liste rueckte nach rechts ab. */
.ac-faq__html details > :not(summary) ul,
.ac-faq__html details > :not(summary) ol { padding: 0 0 0 1.25rem; }

.ac-faq__html details p { margin: 0 0 .75rem; }

.ac-faq__contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background-color: #fdf9f3;
    border: 1px solid var(--ac-faq-line);
    border-radius: 999px;
    padding: 1.125rem 1.75rem;
    margin-top: .625rem;
    font-size: .9375rem;
    color: var(--primary, #F59500);
}

/* "Support kontaktieren" nimmt die Schriftfarbe der Zeile auf, bleibt aber
   fett (Michael, 02.10.2026). Damit zieht sich die am 02.09. gefasste
   Gegenentscheidung zurueck - damals stand es dunkel, weil Orange auf Orange
   zu dick auftrug; der Unterschied allein ueber die Staerke reicht aus.
   `inherit` statt eines festen Werts, damit es der Zeile folgt, falls deren
   Farbe einmal wechselt.

   ⚠ !important ist hier nicht Bequemlichkeit: Theme v2 faerbt jeden Link ueber
     body.niu-theme2 a:not(.btn):not([class*="btn-"])… – eine Kette aus elf
     :not(), gegen die keine vertretbare Spezifitaet ankommt. Dieselbe Regel
     hat uebrigens schon die dunkle Farbe vom 02.09. geliefert; unsere eigene
     Deklaration war damals wirkungslos und fiel nur nicht auf, weil beide
     Toene dunkel waren. */
.ac-faq__link { color: inherit !important; font-weight: 600; white-space: nowrap; }
.ac-faq__link:hover { color: inherit !important; text-decoration: underline; }

/* Auf- und Zuklappen weich statt sprunghaft (Michael, 02.10.2026).

   Der Weg ueber ::details-content ist der einzige, der ohne Eingriff ins
   Markup auskommt - und das ist hier Bedingung: der FAQ-Block kommt als
   fertiges HTML aus der Wawi, wir zerlegen ihn bewusst nicht. Die sonst
   uebliche Huelle mit grid-template-rows 0fr/1fr gaebe es dafuer nicht.

   `interpolate-size: allow-keywords` erlaubt den Uebergang nach height:auto;
   `transition-behavior: allow-discrete` haelt den Inhalt waehrend des
   Zuklappens sichtbar, sonst verschwaende er sofort und nur der leere Rahmen
   liefe die Animation.

   Hinter @supports, weil ::details-content erst ab Chrome 131 / Safari 18.4
   existiert. Ohne Unterstuetzung klappt das FAQ wie bisher ohne Animation -
   kein Bruch. Wer Bewegung abgestellt hat, bekommt sie ebenfalls nicht. */
@supports selector(::details-content) {
    .ac-faq__item,
    .ac-faq__html details { interpolate-size: allow-keywords; }

    .ac-faq__item::details-content,
    .ac-faq__html details::details-content {
        height: 0;
        overflow: hidden;
        transition: height .3s ease, content-visibility .3s;
        transition-behavior: allow-discrete;
    }

    .ac-faq__item[open]::details-content,
    .ac-faq__html details[open]::details-content { height: auto; }

    @media (prefers-reduced-motion: reduce) {
        .ac-faq__item::details-content,
        .ac-faq__html details::details-content { transition: none; }
    }
}

/* --- Kundenstimmen --- */

.ac-reviews { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; align-items: stretch; }

@media (max-width: 767px) { .ac-reviews { grid-template-columns: 1fr; } }

.ac-reviews__score {
    background-color: #fff;
    border: 1px solid var(--ac-hairline);
    border-radius: .5rem;
    padding: 1.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Die Sternreihe sass links statt mittig. Grund: der Kasten ist eine
   Flex-Spalte, damit ist die Reihe ein Flex-Element und richtet sich nicht
   nach dem text-align: center darueber. align-self erledigt das - und nur
   hier, in den Bewertungskarten stehen die Sterne weiterhin linksbuendig. */
.ac-reviews__score .ac-stars { align-self: center; }

.ac-reviews__label { margin: 0 0 .5rem; font-weight: 700; }
.ac-reviews__count { margin: .5rem 0 0; font-size: .8125rem; color: var(--ac-ink-muted); }
.ac-reviews__brand { margin: .5rem 0 0; font-weight: 700; font-size: .875rem; }

/* Reihe scrollt horizontal – im Entwurf laeuft sie rechts aus dem Bild.
   Bewusst ohne Slider-Skript, das kommt spaeter mit der echten Quelle. */
.ac-reviews__rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 12.5rem;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: .5rem;
}

.ac-review {
    background-color: #fff;
    border: 1px solid var(--ac-hairline);
    border-radius: .5rem;
    padding: 1rem;
}

.ac-review__mark { display: block; font-size: 2rem; line-height: .8; color: #1ea86f; }
.ac-review__title { margin: .35rem 0 .5rem; font-size: .9375rem; font-weight: 700; }
.ac-review__meta { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; }
.ac-review__age { font-size: .6875rem; color: var(--ac-ink-muted); }
.ac-review__text { margin: 0 0 .75rem; font-size: .8125rem; color: var(--ac-ink-muted); }
.ac-review__author { margin: 0; font-size: .8125rem; font-weight: 700; }

/* Bewertungssterne im Trustpilot-Stil: gruenes Kaestchen, weisser Stern
   darin. Der Stern ist ein Zeichen und kein Bild - er skaliert damit mit der
   Kastengroesse und braucht kein Asset. line-height: 1 ist noetig, sonst
   schiebt die Zeilenhoehe der Schrift ihn aus der Mitte. */
.ac-stars { display: inline-flex; gap: 2px; }
.ac-stars i {
    width: .875rem;
    height: .875rem;
    background-color: #00b67a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ac-stars i::before {
    content: "\2605";
    color: #fff;
    font-size: .625rem;
    line-height: 1;
    font-style: normal;
}

/* --- Abschluss-Banner --- */

/* Nach dem Entwurf vom 29.09.2026, gebaut mit den Bildern aus derselben
   Lieferung: assets/img/cta-ansprechpartner.png (freigestelltes Portraet) und
   assets/img/cta-hoehenlinien.svg (Hoehenlinienmuster im Hintergrund).
   Die Masse unten sind am Entwurf abgemessen: er zeigt den Block 1904 x 870
   breit, unsere Inhaltsbreite ist 1408 - alle Werte sind mit 0,74 umgerechnet. */
.ac-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Zwei Ebenen: das Muster rechts ueber die volle Hoehe, darunter der
       waagerechte Verlauf. Die Verlaufsfarben sind die Marken-Primaer- und
       -Tertiaerfarbe; sie kommen aus dem Theme, die Hex-Werte sind nur der
       Rueckfall. */
    /* Das Muster steht ein Zehntel seiner Breite ueber den rechten Rand hinaus.
       4rem sind bei der vollen Inhaltsbreite genau dieses Zehntel (Muster
       633 px breit); der Wert ist fest, weil CSS die eigene Hoehe des Blocks
       nicht rechnen kann. Wird der Block schmaler, verschiebt sich das
       Verhaeltnis leicht - das faellt bei einem Hintergrundmuster nicht auf. */
    background:
        url("../../assets/img/cta-hoehenlinien.svg") right -4rem top 0 / auto 100% no-repeat,
        linear-gradient(90deg, var(--primary, #F59500) 0%, var(--niu-tertiary, #EE6428) 100%);
    /* Das Muster ist schwarz und traegt seine Deckkraft (26%) im SVG selbst.
       Die Pfade tragen dort ausserdem mix-blend-mode:soft-light - das greift
       aber nur innerhalb der Datei und laeuft dort ins Leere, weil hinter den
       Pfaden nichts liegt. Ohne diese Zeile landete schlichtes Schwarz auf dem
       Verlauf, und die Linien wurden deutlich kraeftiger als im Entwurf.
       Hier wird dieselbe Mischung auf Ebenenhoehe nachgeholt: das Muster wird
       weich mit dem Verlauf darunter verrechnet, nicht darueber gelegt.
       Nachgerechnet gegen den Entwurf: Basis rgb(245,115,31) ergibt so die
       Linie rgb(242,99,24), gemessen sind es rgb(234,100,19). */
    background-blend-mode: soft-light, normal;
    border-radius: 1rem;
    overflow: hidden;
    color: #fff;
}

/* Kein vertikales Zentrieren: im Entwurf steht der Text oben und der Platz
   bleibt unten frei, weil das Portraet die Hoehe vorgibt. */
.ac-cta__body {
    padding: 5.5rem 2rem 4rem 5.75rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Es gibt keine helle Logofassung im Child. brightness(0) macht die Grafik
   schwarz, invert(1) daraus weiss - unabhaengig von den Originalfarben. */
.ac-cta__logo {
    display: block;
    width: auto;
    height: 3.25rem;
    margin: 0 0 2rem;
    filter: brightness(0) invert(1);
}

.ac-cta__title {
    margin: 0 0 1.5rem;
    font-size: clamp(2rem, 5vw, 4.5rem);
    font-weight: 700;
    line-height: 1.1;
    /* Farbe und Schriftlage explizit: das Theme setzt auf h2 eine eigene Farbe
       UND Kursive, beide wuerden hier sonst gewinnen. Der Entwurf zeigt die
       Ueberschrift aufrecht. */
    color: #fff;
    font-style: normal;
    text-wrap: balance;
}

/* 28.5rem, damit der Satz wie im Entwurf auf zwei Zeilen umbricht. */
.ac-cta__text {
    margin: 0 0 2rem;
    max-width: 28.5rem;
    line-height: 1.5;
}

/* Umriss-Button wie im Entwurf: weisser Rand, transparente Flaeche.
   ac-btn--ghost bringt das mit, hier nur Groesse und der weite Abstand zum
   Winkel am Ende. */
.ac-cta__cta {
    padding: .6rem 3rem;
    font-size: 1rem;
    gap: .9rem;
}

/* Das Portraet ist freigestellt und steht auf der Unterkante. Es gibt mit
   seinem Seitenverhaeltnis die Hoehe des ganzen Blocks vor - genau wie im
   Entwurf, wo Bildunterkante und Blockunterkante zusammenfallen. */
.ac-cta__media { align-self: end; min-width: 0; }

.ac-cta__media img {
    display: block;
    width: 100%;
    height: auto;
}

/* Unter 1200px wird der Textblock sonst zu schmal fuer die grosse
   Ueberschrift, darum frueher umbrechen als beim Rest der Abschnitte. */
@media (max-width: 1199px) {
    .ac-cta { grid-template-columns: 1fr; }
    .ac-cta__body { padding: 3rem 2rem; }
    .ac-cta__logo { height: 2.5rem; margin-bottom: 1.5rem; }
    .ac-cta__text { max-width: 34rem; }
    .ac-cta__media { justify-self: end; max-width: 26rem; width: 100%; }
    .ac-cta__cta { padding: .6rem 2rem; }
}

.ac-cta__portlet {
    background:
            url("../../assets/img/cta-hoehenlinien.svg") right -4rem top 0 / auto 100% no-repeat,
            linear-gradient(90deg, var(--primary, #F59500) 0%, var(--niu-tertiary, #EE6428) 100%);
    /* Das Muster ist schwarz und traegt seine Deckkraft (26%) im SVG selbst.
       Die Pfade tragen dort ausserdem mix-blend-mode:soft-light - das greift
       aber nur innerhalb der Datei und laeuft dort ins Leere, weil hinter den
       Pfaden nichts liegt. Ohne diese Zeile landete schlichtes Schwarz auf dem
       Verlauf, und die Linien wurden deutlich kraeftiger als im Entwurf.
       Hier wird dieselbe Mischung auf Ebenenhoehe nachgeholt: das Muster wird
       weich mit dem Verlauf darunter verrechnet, nicht darueber gelegt.
       Nachgerechnet gegen den Entwurf: Basis rgb(245,115,31) ergibt so die
       Linie rgb(242,99,24), gemessen sind es rgb(234,100,19). */
    background-blend-mode: soft-light, normal;
    border-radius: 1rem;
    overflow: hidden;
    color: #fff;
}

/* --- Textblock: Ueberschrift und Fliesstext aus dem Attribut --- */

/* Quelle ist meta_airclip_product_textblock, ausgegeben von
   productdetails/dynamic/sections/textblock.tpl. Der gepflegte Block traegt
   KEINE Klassen - deshalb haengen alle Regeln hier an der Verschachtelung
   (> h2, section > h3, p, ul). Das ist Absicht und kein Notbehelf: die
   Klassennamen bleiben so unser Griff ins CSS und aenderbar, ohne dass Airclip
   mehrere hundert Artikeldatensaetze anfassen muss.

   Der Entwurf lag am 22.09.2026 vor (Beispiel "Ablauf & Inhalte der
   Schulung") und ersetzt die schlichte Zwischenloesung vom 21.09.: eine
   getoente Karte auf weissem Grund, Hauptueberschrift zentriert,
   Zwischenueberschriften und Text linksbuendig, grosszuegige Abstaende
   zwischen den Abschnitten.

   Die Karte ist schmaler als der Container. Das ist nicht nur Optik: der Block
   ist reiner Fliesstext, ueber die volle Breite waeren das bei 1408 px Wrapper
   rund 200 Zeichen je Zeile. Aussenmass und Innenabstand zusammen ergeben eine
   Textspalte von rund 49rem, also etwa 90 Zeichen. */

.ac-textblock {
    max-width: 56rem;
    margin: 0 auto;
    padding: 3.5rem;
    border-radius: 1.5rem;
    /* Dieselbe Flaeche wie die Baender hinter Highlights und Vergleich - der
       Abschnitt soll sich einreihen, nicht eine zweite Grauabstufung
       einfuehren. */
    background-color: var(--ac-band);
}

.ac-textblock > h2 {
    /* Als einzige Ueberschrift der Seite zentriert, so zeigt es der Entwurf.
       font-style und Groesse kommen vom Theme, wie bei .ac-sechead__title. */
    margin: 0 0 3rem;
    font-style: italic;
    text-align: center;
    text-wrap: balance;
}

/* Der Abstand zwischen zwei Abschnitten ist im Entwurf deutlich groesser als
   der zwischen Ueberschrift und zugehoerigem Text - erst dadurch liest sich
   die Karte als Folge von Abschnitten und nicht als ein langer Text. */
.ac-textblock section { margin-bottom: 3rem; }
.ac-textblock section:last-child { margin-bottom: 0; }

.ac-textblock section > h3 {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--ac-ink);
}

.ac-textblock p { margin: 0 0 .875rem; line-height: 1.7; }
.ac-textblock p:last-child { margin-bottom: 0; }

/* Verweise im Fliesstext sind im Entwurf unterstrichen. Ohne die Regel sind
   sie im Theme nur farbig und im dunklen Text kaum zu erkennen. */
.ac-textblock a { text-decoration: underline; }

/* Listen im Textblock bekommen dieselben Haken wie die Haekchenliste im
   Kaufbereich und die Kategoriekaertchen - ein Punkt-Listenzeichen wirkt in
   diesem Entwurf fremd. Der Entwurf zeigt keine Liste, die Entscheidung steht
   also weiter auf unserer Seite; auf neutrale Punkte umzustellen sind drei
   Zeilen. */
.ac-textblock ul { list-style: none; margin: 0 0 .875rem; padding: 0; }
.ac-textblock ul:last-child { margin-bottom: 0; }

.ac-textblock li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: .5rem;
    line-height: 1.6;
}

.ac-textblock li:last-child { margin-bottom: 0; }

/* Haken als Bootstrap-Glyphe, gleiche Begruendung wie bei .ac-checklist:
   die Airclip-SVGs sind als Maskenbild nicht einfaerbbar. */
.ac-textblock li::before {
    content: "\F270";                  /* bi-check2-circle */
    font-family: bootstrap-icons, sans-serif;
    position: absolute;
    left: 0;
    top: 0;
    color: var(--secondary, #007288);
    font-size: 1.05em;
}

/* Auf schmalen Viewports frisst der Innenabstand der Karte sonst die halbe
   Textbreite. Der Radius geht mit zurueck, sonst wirkt er bei kleiner Karte
   uebertrieben rund. */
@media (max-width: 575px) {
    .ac-textblock {
        padding: 1.75rem 1.25rem;
        border-radius: 1rem;
    }

    .ac-textblock > h2 { margin-bottom: 2rem; }
    .ac-textblock section { margin-bottom: 2.25rem; }
}

/* endregion */

/* region FILTERLEISTE DER ARTIKELLISTE (Airclip) */

/* Ueber der Artikelliste steht laut Entwurf nur noch ein Button: eine dunkle
   Pille mit Trichtersymbol und der Beschriftung "Filter". Er oeffnet die
   Sidebar mit Filtern, Sortierung und "Artikel pro Seite".

   Markup: productlist/result_options.tpl im Child.
   Die beiden Aufklapper, die vorher daneben standen, sind in
   snippets/productlist_page_nav.tpl leergeraeumt und in
   snippets/filter/mobile.tpl wieder aufgetaucht. */

.ac-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1.25rem;
    border: 0;
    border-radius: 999px;
    background-color: var(--ac-ink);
    color: #fff;
    font-weight: 500;
    line-height: 1.4;
    /* Was .btn sonst mitgebracht haette und hier wirklich gebraucht wird. */
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    text-align: center;
    transition: background-color .2s ease;
}

/* Der Button sitzt im Parent in einer .btn-group. Ohne .btn-Klasse greifen
   deren Radius-Resets nicht mehr an ihm - die Regel bleibt trotzdem stehen,
   weil eine zweite Schaltflaeche in derselben Gruppe den Radius sonst
   stillschweigend wegnaehme. */
.btn-group > .ac-filter-btn { border-radius: 999px; }

.ac-filter-btn:hover,
.ac-filter-btn:focus {
    background-color: #000;
    color: #fff;
}

/* Sichtbarer Fokus: den haette sonst .btn mitgebracht. */
.ac-filter-btn:focus-visible {
    outline: 2px solid var(--primary, #F59500);
    outline-offset: 2px;
}

.ac-filter-btn__icon { font-size: 1.25rem; line-height: 1; }

/* Zahl der aktiven Filter. Sie ersetzt die Symbol-Einfaerbung des Parents,
   die auf dunklem Grund nicht lesbar ist. */
.ac-filter-btn__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 .375rem;
    border-radius: 999px;
    background-color: var(--primary, #F59500);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
}

/* endregion */

/* region NEWSLETTERSEITE (Airclip) */

/* Airclip versendet ueber Brevo; newsletter/index.tpl im Child zeigt statt der
   JTL-Formulare Brevos Anmeldeformular (snippets/brevo_newsletter_form.tpl).

   Seit dem 25.09.2026 ist das Brevos HTML-Variante, nicht mehr der Iframe. Die
   Hoehenangabe, die der Iframe gebraucht hat, entfaellt damit - das Formular
   waechst jetzt mit seinem Inhalt. Die Regeln hier beschraenken sich auf
   Breite und Abstand; alles Weitere bringt das Formular als Inline-Styles und
   ueber Brevos Stylesheet selbst mit.

   ⚠ Sobald das Formular an Severins Entwurf angepasst wird, ist DAS hier der
   Ort dafuer - nicht das Snippet. Es kommt so von Airclip und soll
   austauschbar bleiben. */

.ac-newsletter-embed {
    /* Brevos Formular ist auf 540px gebaut, breiter gezogen stehen die Felder
       verloren in der Flaeche. */
    max-width: 540px;
    margin: 0 auto 2rem;
}

/* Datenschutzhinweis unter der Newsletterbox in der Fusszeile.
   Der Verweis erbt dort die Textfarbe der Kopfleiste und traegt keine
   Unterstreichung - gemessen rgb(36,36,37) auf demselben Ton wie der
   Fliesstext daneben, also nicht als Verweis erkennbar. Die Farbe bleibt
   bewusst geerbt (die Leiste hat ihre eigene Palette), erkennbar macht ihn
   die Unterstreichung. */
.niu-footer-topbar-annotation a {
    text-decoration: underline;
    text-underline-offset: .15em;
}

/* endregion */

/* region AIRCLIP GUIDE UND FAQ (Airclip) */

/* Styles zu productlist/guide/. Gilt fuer den Airclip Guide (Kategorie 107)
   und alle Unterseiten: Guide-Start und Rubriken (Kacheln), Guide-Artikel,
   FAQ-Uebersicht, FAQ-Rubrik, FAQ-Frage. Farben und Bausteine wie bei den
   PDP-Abschnitten (--ac-*, .ac-sechead__eyebrow, .ac-btn). */

.ac-guide-page {
    --ac-guide-radius: 16px;
    --ac-guide-shadow: 0 10px 30px 0 rgba(16, 36, 42, .08);
}

/* --- Seitenkopf --- */

.ac-guide-head { padding-top: .5rem; margin-bottom: 2rem; }
.ac-guide-head__title { margin: 0; font-style: italic; }

.ac-guide-intro {
    max-width: 46rem;
    margin-bottom: 2rem;
    color: var(--ac-ink-muted);
}

/* --- Karte als Grundbaustein --- */

.ac-guide-card {
    background-color: #fff;
    border: 1px solid var(--ac-hairline);
    border-radius: var(--ac-guide-radius);
    padding: 1.5rem;
}

.ac-guide-aside > * + * { margin-top: 1.5rem; }

@media (min-width: 992px) {
    .ac-guide-aside { position: sticky; top: 7rem; }
}

/* --- Linkliste mit Pfeil (Rubriken, verwandte Fragen, FAQ-Uebersicht) --- */

.ac-guide-links { list-style: none; margin: 0; padding: 0; }

.ac-guide-links li + li { border-top: 1px solid var(--ac-hairline); }

.ac-guide-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem 0;
    color: var(--ac-ink);
    font-weight: 500;
    text-decoration: none;
}

.ac-guide-links a::after,
.ac-faq-rubrik__item::after {
    content: "";
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2.5 8h10M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2.5 8h10M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}

.ac-guide-links a:hover,
.ac-guide-links a.is-active { color: var(--secondary, #007288); }

/* --- Kacheln: Guide-Start und Rubriken --- */

.ac-guide-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .ac-guide-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .ac-guide-grid { grid-template-columns: repeat(3, 1fr); }
}

.ac-guide-tile {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: var(--ac-guide-radius);
    overflow: hidden;
    color: var(--ac-ink);
    text-decoration: none;
    isolation: isolate;
    transition: box-shadow .2s ease, transform .2s ease;
}

.ac-guide-tile:hover {
    color: var(--ac-ink);
    text-decoration: none;
    box-shadow: var(--ac-guide-shadow);
    transform: translateY(-2px);
    transition: box-shadow .4s ease, transform .4s ease;
}

.ac-guide-tile__media {
    display: block;
    aspect-ratio: 16 / 9;
    background-color: var(--ac-cream);
}

/* Guide-Start (107): flachere Bilder, 9:3 */
.ac-guide-grid--start .ac-guide-tile__media { aspect-ratio: 3 / 1; }

/* Guide-Start: Text vollstaendig, ohne Zeilenbegrenzung */
.ac-guide-grid--start .ac-guide-tile__text { display: block; -webkit-line-clamp: unset; overflow: visible; }

.ac-guide-tile__media picture,
.ac-guide-tile__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ac-guide-tile__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .5rem;
    padding: 1.25rem 1.5rem 1.5rem;
}

.ac-guide-tile__title {
    font-size: 1.25rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1.3;
}

.ac-guide-tile__text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--ac-ink-muted);
}


/* --- Guide-Artikel: Inhaltsverzeichnis, Text --- */

.ac-guide-toc {
    margin-bottom: 2rem;
    padding: 1.5rem 1.75rem;
    background-color: var(--ac-cream);
    border-radius: var(--ac-guide-radius);
}

.ac-guide-toc__title {
    margin: 0 0 .75rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary, #F59500);
}

.ac-guide-toc__list { margin: 0; padding-left: 1.25rem; }
.ac-guide-toc__list ol { padding-left: 1.25rem; }
.ac-guide-toc__list li { padding: .15rem 0; }
.ac-guide-toc__list a { color: var(--ac-ink); }
.ac-guide-toc__list a:hover { color: var(--secondary, #007288); }

.ac-guide.ac-content h2,
.ac-guide.ac-content h3 { margin-top: 2rem; scroll-margin-top: 8rem; }
.ac-guide.ac-content h4 { scroll-margin-top: 8rem; }

.ac-guide.ac-content img,
.ac-guide-answer img { max-width: 100%; height: auto; border-radius: .5rem; }

/* --- Verweis auf die FAQ bzw. zurueck zur Rubrik (Guide-Artikel, FAQ-Frage) --- */

.ac-guide-faqcard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding: 1.5rem;
    border: 1px solid var(--ac-hairline);
    border-radius: var(--ac-guide-radius);
    background-color: #fff;
    color: var(--ac-ink);
    text-decoration: none;
    transition: box-shadow .2s ease, border-color .2s ease;
}

.ac-guide-faqcard:hover {
    color: var(--ac-ink);
    text-decoration: none;
    border-color: transparent;
    box-shadow: var(--ac-guide-shadow);
}

.ac-guide-faqcard__title { font-size: 1.25rem; font-weight: 700; font-style: italic; }
.ac-guide-faqcard__text { color: var(--ac-ink-muted); }
.ac-guide-faqcard .ac-btn { margin-top: .5rem; }
.ac-guide-faqcard:hover .ac-btn { background-color: var(--primary, #F59500); color: #fff; }

/* Expertenbox (_experte.tpl): Die Hintergrundgrafik (400 x 200) bringt den
   Rahmen und das Foto rechts mit. Die Innenflaeche des Rahmens liegt bei
   etwa 4-56 % der Breite und 26-87 % der Hoehe - genau dort steht der Text.
   Die Box behaelt das Seitenverhaeltnis der Grafik, Schrift und Abstaende
   rechnen in cqw (Prozent der Boxbreite), damit der Text auch in einer
   schmaleren Spalte im Rahmen bleibt. */
.ac-guide-expert {
    position: relative;
    max-width: 400px;
    aspect-ratio: 2 / 1;
    container-type: inline-size;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
}

.ac-guide-expert__body {
    position: absolute;
    top: 26%;
    bottom: 13%;
    left: 5%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .4cqw;
}

.ac-guide-expert__body p { margin: 0; }

.ac-guide-expert__eyebrow {
    font-size: 2.5cqw;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--primary, #F59500);
}

.ac-guide-expert__name {
    font-size: 4.25cqw;
    font-weight: 700;
    font-style: italic;
    line-height: 1.15;
    color: var(--ac-ink);
}

/* Der hervorgehobene Teil ("Rufen Sie mich an!") als eigene Zeile, sonst
   bricht in der schmalen Textspalte ein einzelnes Wort um */
.ac-guide-expert__text {
    margin-bottom: .8cqw !important;
    font-size: 2.9cqw;
    line-height: 1.3;
    color: var(--ac-ink-muted);
}

.ac-guide-expert__text strong { display: block; color: var(--ac-ink); }

.ac-guide-expert__contact {
    font-size: 2.9cqw;
    line-height: 1.4;
    color: var(--ac-ink);
    white-space: nowrap;
    text-decoration: none;
}

.ac-guide-expert__contact:hover { color: var(--secondary, #007288); }
.ac-guide-expert__contact .fa { width: 1.2em; color: var(--primary, #F59500); }

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

.ac-guide-answer > :last-child { margin-bottom: 0; }

/* --- FAQ-Uebersicht: Rubriken mit Fragen --- */

/* Spalten statt Raster: die Rubriken sind sehr unterschiedlich lang (3 bis
   34 Fragen), im Raster entstuenden grosse Luecken unter den kurzen */
.ac-faq-uebersicht {
    columns: 3 20rem;
    column-gap: 1.5rem;
}

.ac-faq-uebersicht__rubrik {
    break-inside: avoid;
    margin-bottom: 1.5rem;
}

.ac-faq-uebersicht__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
    color: var(--ac-ink);
    text-decoration: none;
}

.ac-faq-uebersicht__head:hover { color: var(--secondary, #007288); text-decoration: none; }

.ac-faq-uebersicht__title { margin: 0; font-size: 1.375rem; font-style: italic; }

.ac-faq-uebersicht__count {
    flex: 0 0 auto;
    min-width: 2rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    background-color: var(--ac-chip);
    color: var(--ac-teal-dark);
    font-size: .8125rem;
    font-weight: 600;
    text-align: center;
}

.ac-faq-uebersicht .ac-guide-links a { font-weight: 400; }

/* --- FAQ-Rubrik: Fragen als Karten --- */

.ac-faq-rubrik {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
    gap: 1rem;
}

.ac-faq-rubrik__item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    column-gap: 1rem;
    row-gap: .35rem;
    padding: 1.25rem 1.5rem;
    background-color: #fff;
    border: 1px solid var(--ac-hairline);
    border-radius: var(--ac-guide-radius);
    color: var(--ac-ink);
    text-decoration: none;
    transition: box-shadow .2s ease, border-color .2s ease;
}

.ac-faq-rubrik__item::after {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--primary, #F59500);
}

.ac-faq-rubrik__item:hover {
    color: var(--ac-ink);
    text-decoration: none;
    border-color: transparent;
    box-shadow: var(--ac-guide-shadow);
}

.ac-faq-rubrik__title { grid-column: 1; font-weight: 700; line-height: 1.35; }
.ac-faq-rubrik__text { grid-column: 1; color: var(--ac-ink-muted); font-size: .9375rem; }

/* endregion */

/* region AUSWAHLASSISTENT */

/* Styling aus dem Child, dzm_advisor bleibt unangetastet.

   Zur Spezifitaet: DZMAdvisor.css laedt NACH dieser Datei, Gleichstand verliert
   also. Der Prefix section.dzm-advisor gibt gegenueber den Plugin-Regeln
   (.dzm-advisor ...) ein Element mehr und gewinnt ohne !important. Beim Padding
   ist der Gegner section[class^="dzm-"] { padding: 0 } aus dzm_resources.

   Die Werte sind nicht erfunden, sondern die des Themes: .niu-btn-full-primary
   hat border-radius 998px, font-weight 600, padding 10px/15px und
   transition all .3s ease-in-out. Die Kacheln verhalten sich wie Schaltflaechen,
   also folgen sie dieser Sprache. */

/* Token-Schicht des Plugins umbiegen - die vorgesehene Anpassungsstelle. Ein
   Element mehr als der Theme-v2-Block des Plugins auf body.niu-theme2 .dzm-advisor */
body.niu-theme2 section.dzm-advisor {
    /*--dzm-advisor-radius: var(--niu-radius-marker, 16px);*/
    /*--dzm-advisor-radius-option: 998px;*/
    --dzm-advisor-accent: var(--niu-primary, #F59500);
    --dzm-advisor-option-border: var(--s-border, #eaeaea);
}

/* Wurzel als Kasten. Das Plugin haelt sie bewusst flaechenlos, damit das Widget
   den Untergrund uebernimmt - fuer Airclip ist die Box gewuenscht */
section.dzm-advisor {
    padding: 1.5rem;
    background-color: var(--niu-card-bg, #fff);
    border-radius: 16px;
    box-shadow: 0 10px 30px 0 var(--niu-card-shadow, rgba(0, 0, 0, .08));
}

/* Rahmen, Radius und Innenabstand des Fragenblocks kommen aus dem Plugin und
   bleiben stehen. Hier wird zweierlei geradegezogen:

   Die Linie unter der Legend legt das Theme global auf jedes legend
   (legend { border-bottom: solid 1px }) - die faellt weg.

   Die Luecke im oberen Rahmen zeichnet der Browser selbst, ueber die Boxbreite
   der Legend. Ohne Padding sitzt sie deshalb hart am Text. Das Padding
   verbreitert sie, das negative margin-left holt den Text auf die Kante des
   Inhalts darunter zurueck - sonst stehen Ueberschrift und Antworten versetzt. */
section.dzm-advisor .dzm-advisor__legend {
    padding: 0 .5rem;
    margin-left: -.5rem;
    border-bottom: 0;
}

/* Das Plugin legt die Antworten in ein Grid mit gleich breiten Spalten
   (minmax(13rem, 1fr)) - laengere Antworten brechen dann um, obwohl daneben
   Platz frei ist. Als Flex-Reihe ist jede Kachel so breit wie ihr Text und
   bricht erst um, wenn eine ganze Zeile nicht reicht. Die Listen-Variante
   (eine Antwort pro Zeile) bleibt beim Grid des Plugins */
section.dzm-advisor .dzm-advisor__options:not(.dzm-advisor__options--list) {
    display: flex;
    flex-wrap: wrap;
}

section.dzm-advisor .dzm-advisor__options:not(.dzm-advisor__options--list) .dzm-advisor__option {
    flex: 0 1 auto;
    max-width: 100%;
}

section.dzm-advisor .dzm-advisor__option {
    position: relative;
    padding: .625rem .9375rem;
    font-weight: 600;
    transition: all .3s ease-in-out;
}

/* Die Kachel IST das Steuerelement. Nicht display:none - das Feld muss
   fokussierbar bleiben, den Fokusring zeichnet das Plugin per :focus-within auf
   die Kachel. Absolut, damit das gap der Kachel keine Luecke reserviert */
section.dzm-advisor .dzm-advisor__option-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* Hover und Auswahl sind derselbe Zustand: der Hover zeigt, wie die Kachel
   gewaehlt aussehen wird. Sackgassen ausgenommen, sonst leuchten unwaehlbare
   Antworten auf - das Plugin haelt sie bei opacity .45 und not-allowed */
section.dzm-advisor .dzm-advisor__option:not(.dzm-advisor__option--dead):hover,
section.dzm-advisor .dzm-advisor__option:has(.dzm-advisor__option-input:checked) {
    background-color: var(--niu-primary, #F59500);
    border-color: var(--niu-primary, #F59500);
    color: #fff;
}

/* Das Theme hellt gefuellte Buttons beim Hover auf (#ffab29 in der kompilierten
   CSS). brightness leitet das aus dem Token ab, statt den Ton abzuschreiben */
section.dzm-advisor .dzm-advisor__option:has(.dzm-advisor__option-input:checked):hover {
    filter: brightness(1.08);
}

/* Auf der gefuellten Kachel ist das Grau des Plugins nicht lesbar */
section.dzm-advisor .dzm-advisor__option:not(.dzm-advisor__option--dead):hover .dzm-advisor__option-count,
section.dzm-advisor .dzm-advisor__option:has(.dzm-advisor__option-input:checked) .dzm-advisor__option-count {
    color: rgba(255, 255, 255, .85);
}

section.dzm-advisor .dzm-advisor__option-count {
    font-family: 'Space Mono', monospace;
}

/* Hierarchie der Schaltflaechen. Das Plugin gibt allen vier nur zwei Stufen:
   next und results sind beide full-primary, prev und reset beide
   outlined-secondary - vier Elemente, zwei Lautstaerken, keine Aussage.

   Das Theme kennt drei Stufen (full > outlined > flat), die hier verteilt werden:
     Weiter              full      - die Handlung in diesem Schritt
     Ergebnisse anzeigen outlined  - dauerhaft erreichbares Ziel, nicht die Handlung jetzt
     Zurueck             flat      - Rueckweg
     Neu starten         flat, gedaempft - Ruecksetzen

   Werte aus .niu-btn-outlined-primary und .niu-btn-flat-*, nicht erfunden.
   Angriffspunkt sind die data-Attribute, die laut TPL der Vertrag mit der
   JS-Schicht sind - stabiler als die Button-Klassen. */
section.dzm-advisor [data-dzm-advisor-action="results"] {
    background-color: transparent;
    border-color: var(--niu-primary, #f59500);
    color: var(--niu-primary, #f59500);
}

section.dzm-advisor [data-dzm-advisor-action="results"]:hover {
    background-color: var(--niu-primary, #f59500);
    border-color: var(--niu-primary, #f59500);
    color: #fff;
}

/* Flache Stufe: Flaeche und Rahmen verschwinden. Die outlined-Klassen setzen
   border-width mit !important - abschaltbar nur ueber die Farbe */
section.dzm-advisor [data-dzm-advisor-action="prev"],
section.dzm-advisor [data-dzm-advisor-action="reset"] {
    background-color: transparent;
    border-color: transparent;
}

/* Zurueck und Neu starten sind derselbe Fall - ruhige Nebenwege, gedaempft */
section.dzm-advisor [data-dzm-advisor-action="prev"],
section.dzm-advisor [data-dzm-advisor-action="reset"] {
    color: var(--s-text-muted, #788785);
}

/* Der Hover der outlined-Klasse fuellt nicht nur die Flaeche, er setzt auch
   color:#fff - auf der flachen Stufe blieb davon weisser Text auf weisser Karte.
   Stattdessen die Flaechen-Toenung des Themes, Text wird dunkler */
section.dzm-advisor [data-dzm-advisor-action="prev"]:hover,
section.dzm-advisor [data-dzm-advisor-action="reset"]:hover {
    background-color: var(--s-hover, rgba(0, 0, 0, .06));
    border-color: transparent;
    color: var(--s-text, #07252B);
}

/* Der Fuss ist Statuszeile, nicht zweite Handlungsleiste - die Trennlinie sagt das */
section.dzm-advisor .dzm-advisor__foot {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--s-border, #eaeaea);
}

section.dzm-advisor .dzm-advisor__total {
    font-family: 'Space Mono', monospace;
}

/* Ergebnisraster auf drei Spalten. Das Plugin bringt 1 Spalte und ab 576px zwei
   mit (grid-cols-* gibt es erst ab NIUplus 6, deshalb eigenes Raster im Portlet).
   Die dritte Spalte kommt ab lg, dem Breakpoint des Themes */
@media (min-width: 992px) {
    section.dzm-advisor .dzm-advisor__result-grid--own {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* endregion */


/* region OPC ADDONS */

.ac-hero-image {

    /* Hintergrund am Wrapper statt am img, damit er beim Schweben stehen bleibt.
           Gleiches scale wie das Bild, sonst stimmen Groesse und 70% nicht mehr */
    position: relative;
    isolation: isolate;

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        transform: scale(1.55);
        background-repeat: no-repeat;
        background-image: url(https://staging.airclip.de/media/image/storage/opc/misc/ac-hero-bg-2.png);
        background-size: 70%;
        background-position: center;
        pointer-events: none;
    }

    @media screen and (min-width:992px) {


        img {
            transform:scale(1.55);
            /* Schweben ueber die eigene translate-Property, damit das scale im
               transform stehen bleibt statt vom Keyframe ueberschrieben zu werden */
            animation: heroImage 6s ease-in-out infinite alternate;
            will-change: translate;
            }
      }
}

@keyframes heroImage {
    from {
        translate: 0 -10px;
    }

    to {
        translate: 0 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ac-hero-image img {
        animation: none;
    }
}

.ac-side-usps {
    img {
        max-width:64px;
    }
}

.ac-category-banner-cloud {
    .dzm-btn.btn-link {
        color:white !important;
    }
}


.ac-buybox {
    border-radius:1rem !important;
}

@media screen and (min-width: 992px) {
    #image_wrapper {
        position:sticky;
        top:1rem;
    }
}

.dzm-crs-wrapper {
    padding:2rem 0 !important;
}

.dzm-crs-content-container {
    max-width:unset;
}

.ac-review-slider {
    .splide__arrow--next {
        right:-2rem;
    }

    .splide__arrow--prev {
        left:-2rem;
    }

    .dzm-crs-content-container {

        padding:1rem .85rem;
        background:#fff9f1;
        border-radius: 1rem;

        img {
            display:none;
        }
    }
}

.dzm-script-and-consent-portlet:has(.trustpilot-widget) {
    justify-content:flex-end !important;
}

@media screen and (max-width: 992px) {
    .dzm-script-and-consent-portlet:has(.trustpilot-widget) {
        justify-content:center !important;
    }
}


.product-info-inner {
    margin-bottom:1rem;
}

.niu_subfooter_rating {
    text-align:center;
    margin-top:1rem;
}

@media screen and (max-width: 992px) {
    .niu_subfooter_rating {
        margin-top:2rem;
        margin-bottom:2rem;
    }
}


.ac-customer-slider-xs {
    padding:0 !important;
}

:root {
    --niu-btn-primary-text: #fff !important;
    --niu-btn-checkout-text: #fff !important;
}

#cbtest .btn {
    text-decoration:underline;

    &:hover {
        color:var(--primary);
    }
}

header .navbar-nav>.nav-item>.nav-link, header .niu-header-nav > .nav-item:nth-child(2) > .nav-link {
    padding-left:.65rem;
    padding-right:.65rem;
}

.niu-categories-color-wrap .nav-item .nav-link, .niu-categories-color-wrap .categories-recursive-link {
   /* color: var(--s-text) !important;*/
    transition: color .3s ease;

    &:hover {
        color:var(--primary);
        transition: color .3s ease;
    }
}

.ac-hero-start {
    overflow:clip;
}

.nav-item.nav-scrollbar-item.active {
    color:var(--primary);

    &:before {
        color:var(--primary);
    }
}

#footer {
    margin-top:4rem;
}

.productlist-filter-wrapper a {
    color:var(--s-text) !important;
}

#product-offer {
    margin-bottom:3rem;
}

.niu-lightbox-wrapper {
    background: rgb(255 255 255 / 78%);
}