/*
 * Produktkacheln (Kurzbefehl [dv_kacheln]).
 * Gestaltung wie auf der Seite "Drohnen fuer Kinder", ergaenzt um den Preis.
 * Wird nur auf Seiten geladen, die Kacheln enthalten.
 */

.dvk-k {
    --dvk-blau: #385b89;
    --dvk-blau-hell: #eef3f9;
    --dvk-gelb: #ffb40a;
    --dvk-gruen: #0f6b03;
    --dvk-text: #020202;
    --dvk-grau: #5b6470;
    --dvk-linie: #d8dee6;
    color: var(--dvk-text);
    font-size: 16px;
    line-height: 1.55;
}

.dvk-k * {
    box-sizing: border-box;
}

.dvk-k a:focus-visible {
    outline: 3px solid #1f5a96;
    outline-offset: 2px;
}

.dvk-k .dvk-liste {
    display: grid;
    gap: 12px;
    margin: 0 0 1.2em;
    padding: 0;
}

.dvk-k .dvk-kachel {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 12px;
    align-items: start;
    background: #fff;
    border: 1px solid var(--dvk-linie);
    border-radius: 0;
    padding: 12px;
    margin: 0;
    width: auto;
    float: none;
    text-align: left;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.dvk-k .dvk-kachel__bild a {
    display: block;
}

.dvk-k .dvk-kachel__bild img {
    display: block;
    width: 104px;
    height: 104px;
    object-fit: contain;
    border-radius: 0;
}

.dvk-k.dvk-k .dvk-kachel__titel {
    font-weight: 700 !important;
    font-size: 1.1em;
    line-height: 1.3;
    margin: 0 0 .25em;
    min-height: 0;
    color: var(--dvk-text);
}

.dvk-k .dvk-kachel__titel a {
    font-weight: 700 !important;
    color: inherit;
    text-decoration: none;
}

.dvk-k .dvk-kachel__titel a:hover {
    text-decoration: underline;
}

.dvk-k .dvk-marke {
    display: inline-block;
    background: var(--dvk-gruen);
    color: #fff;
    font-size: .75em;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 0;
    margin-bottom: 4px;
}

.dvk-k .dvk-kachel__kurz {
    font-size: .92em;
    margin: 0 0 .5em;
}

.dvk-k .dvk-check {
    list-style: none;
    margin: 0 0 .7em;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    font-size: .82em;
}

.dvk-k .dvk-check li {
    background: #f3f5f8;
    border-radius: 0;
    padding: 3px 7px;
    margin: 0;
}

.dvk-k .dvk-check b {
    font-weight: bold;
}

/* Pluspunkt (z. B. GPS: Ja, Gewicht unter 250 g) */
.dvk-k .dvk-check .dvk-ja {
    background: #e6f3e4;
}

/* Kamera vorhanden */
.dvk-k .dvk-check .dvk-info {
    background: #fff1d0;
}

.dvk-k .dvk-kachel__aktion {
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
}

/* Preis: immer mittig ueber den Knoepfen, ueber die ganze Breite der Kachel */
.dvk-k .dvk-kachel__preis {
    grid-column: 1 / -1;
    margin: 0 0 .1em;
    text-align: center;
    font-size: 1.3em;
    line-height: 1.2;
    color: var(--dvk-text);
}

.dvk-k .dvk-kachel__preis small {
    display: block;
    font-size: .58em;
    font-weight: normal;
    color: var(--dvk-grau);
}

.dvk-k .dvk-kachel__preis--ohne {
    font-size: 1em;
    color: var(--dvk-grau);
}

.dvk-k .dvk-kachel .dvk-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 10px 14px;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
    text-decoration: none;
    border-radius: 0 !important;
    border: 2px solid transparent;
}

.dvk-k .dvk-kachel .dvk-btn--amazon {
    background: var(--dvk-gelb);
    border-color: var(--dvk-gelb);
    color: #000;
}

.dvk-k .dvk-kachel .dvk-btn--amazon:hover {
    background: #ed9c28;
    border-color: #ed9c28;
    color: #000;
}

.dvk-k .dvk-kachel .dvk-btn--detail {
    background: #fff;
    border-color: var(--dvk-blau);
    color: var(--dvk-blau);
    font-weight: normal;
}

.dvk-k .dvk-kachel .dvk-btn--detail:hover {
    background: var(--dvk-blau-hell);
}

.dvk-k .dvk-fussnote {
    font-size: .8em;
    color: var(--dvk-grau);
}

@media (min-width: 600px) {
    .dvk-k .dvk-kachel {
        grid-template-columns: 140px 1fr;
    }

    .dvk-k .dvk-kachel__bild img {
        width: 140px;
        height: 140px;
    }

    .dvk-k .dvk-kachel__aktion {
        grid-column: 2;
        grid-template-columns: 1fr 1fr;
    }
}

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

    .dvk-k .dvk-liste--s1 {
        grid-template-columns: 1fr;
    }

    .dvk-k .dvk-liste--s2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .dvk-k .dvk-liste--s4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .dvk-k .dvk-kachel {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        height: 100%;
    }

    /* feste Hoehe, damit Titel auch ohne Bild auf einer Linie stehen */
    .dvk-k .dvk-kachel__bild {
        min-height: 160px;
    }

    .dvk-k .dvk-kachel__bild img {
        width: 160px;
        height: 160px;
        margin: 0 auto;
    }

    .dvk-k .dvk-kachel__aktion {
        grid-column: 1;
        grid-template-columns: 1fr;
    }

    /*
     * Eine Spalte (spalten="1", z. B. eine einzelne Kachel zwischen zwei
     * Absaetzen): quer statt ueber die volle Breite gestreckt - Bild links,
     * Titel und Stichpunkte in der Mitte, Preis und Knoepfe rechts.
     */
    .dvk-k .dvk-liste--s1 .dvk-kachel {
        grid-template-columns: 160px 1fr 230px;
        grid-template-rows: auto;
        gap: 16px;
        align-items: center;
        height: auto;
    }

    .dvk-k .dvk-liste--s1 .dvk-kachel__bild {
        min-height: 0;
    }

    .dvk-k .dvk-liste--s1 .dvk-kachel__aktion {
        grid-column: 3;
    }
}

/* Filter ueber der Liste (ohne Skript, siehe inc/kacheln-filter.php) */
.dvk-k .dvk-filterform {
    margin: 0;
}

/*
 * Zeile "28 von 217 Drohnen angezeigt": Jede sichtbare Kachel zaehlt eins
 * weiter; ausgeblendete (display: none) zaehlt der Browser nicht mit. Die
 * Zeile steht im HTML hinter der Liste, weil der Stand des Zaehlers erst dort
 * bekannt ist, und wird hier ueber die Liste gestellt.
 */
.dvk-k .dvk-filterform {
    display: flex;
    flex-direction: column;
}

.dvk-k .dvk-filterform > .dvk-liste {
    counter-reset: dvk-sichtbar;
    order: 2;
}

.dvk-k .dvk-filterform > .dvk-liste > .dvk-kachel {
    counter-increment: dvk-sichtbar;
}

.dvk-k .dvk-filterform > .dvk-zaehler {
    order: 1;
}

.dvk-k .dvk-filterform > .dvk-fussnote {
    order: 3;
}

.dvk-k .dvk-zaehler__sichtbar::before {
    content: counter(dvk-sichtbar);
}

/*
 * Platznummer an der Kachel (nummern="ja"): eigener Zaehler, damit er auch
 * ohne Filter laeuft. Ausgeblendete Kacheln zaehlt der Browser nicht mit.
 * Mit Filter muessen beide Zaehler in einer Regel stehen - sonst ersetzt die
 * Regel fuer dvk-sichtbar weiter oben diese hier.
 */
.dvk-k .dvk-liste--nummern {
    counter-reset: dvk-platz;
}

.dvk-k .dvk-liste--nummern > .dvk-kachel {
    counter-increment: dvk-platz;
    position: relative;
}

.dvk-k .dvk-filterform > .dvk-liste.dvk-liste--nummern {
    counter-reset: dvk-sichtbar dvk-platz;
}

.dvk-k .dvk-filterform > .dvk-liste.dvk-liste--nummern > .dvk-kachel {
    counter-increment: dvk-sichtbar dvk-platz;
}

.dvk-k .dvk-liste--nummern > .dvk-kachel::before {
    content: counter(dvk-platz);
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 1;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 0;
    background: var(--dvk-blau);
    color: #fff;
    font-size: .85em;
    font-weight: bold;
    line-height: 26px;
    text-align: center;
    pointer-events: none;
}

.dvk-k .dvk-zaehler {
    margin: 0 0 12px;
    font-size: .95em;
}

.dvk-k .dvk-zaehler__gesamt {
    color: var(--dvk-grau);
    white-space: nowrap;
}

.dvk-k .dvk-filterform > input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.dvk-k .dvk-filter {
    background: var(--dvk-blau-hell);
    border-radius: 0;
    padding: 12px;
    margin: 0 0 12px;
}

.dvk-k .dvk-filter__gruppe {
    border: 0;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/*
 * Preis und Verfuegbarkeit beschreiben das Angebot, nicht die Drohne - eine
 * duenne Linie setzt sie von den Merkmalen darunter ab.
 */
.dvk-k .dvk-filter__gruppe--angebot + .dvk-filter__gruppe:not(.dvk-filter__gruppe--angebot) {
    border-top: 1px solid var(--dvk-linie);
    padding-top: 12px;
    margin-top: 12px;
}

.dvk-k .dvk-filter__gruppe > b {
    flex: 0 0 100%;
    font-size: .85em;
}

.dvk-k .dvk-filter label {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 6px 12px;
    background: #fff;
    border: 2px solid var(--dvk-linie);
    border-radius: 0;
    font-size: .9em;
    font-weight: normal;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.dvk-k .dvk-filter label:hover {
    border-color: var(--dvk-blau);
}

.dvk-k .dvk-filter__reset {
    min-height: 40px;
    padding: 6px 14px;
    background: none;
    border: 0;
    color: #1f5a96;
    text-decoration: underline;
    font-size: .9em;
    cursor: pointer;
}

/*
 * Auffrischung vom 08.10.2026 (Version 2026.10.29): Kacheln mit weicheren
 * Ecken, Wert der Stichpunkte betont, Preis und Stand in einer Zeile, auf dem
 * Handy beide Knoepfe nebeneinander. Filter als weisser Kasten, die Knoepfe
 * auf dem Handy als Raster gleicher Breite (alles sichtbar, ohne Wischen).
 * Die Regeln stehen bewusst hinter den aelteren und ueberschreiben sie.
 *
 * Seit 2026.10.42 (Entwurf E): Kacheln, Kaestchen, Etiketten, Knoepfe, Nummern
 * und Filter ohne Rundungen; Produktdetails blau gefuellt, Knopftext kleiner.
 */
.dvk-k {
    --dvk-linie: #e2e7ee;
    --dvk-flaeche: #f5f7fa;
}

.dvk-k .dvk-kachel {
    border-radius: 0;
    padding: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 8px rgba(16, 24, 40, .04);
}

.dvk-k.dvk-k .dvk-kachel__titel {
    font-size: 1.12em;
    line-height: 1.25;
    margin: 0 0 .4em;
}

/* Stichpunkte: Bezeichnung zurueckhaltend, Wert betont */
.dvk-k .dvk-check {
    gap: 5px;
    font-size: .8em;
    margin: 0 0 .2em;
}

.dvk-k .dvk-check li {
    background: var(--dvk-flaeche);
    border-radius: 0;
    padding: 3px 8px;
    font-weight: 600;
}

.dvk-k .dvk-check b {
    font-weight: normal;
    color: var(--dvk-grau);
}

.dvk-k .dvk-check .dvk-ja {
    background: #e7f4e5;
    color: #0b5202;
}

.dvk-k .dvk-check .dvk-ja b {
    color: #2d5f27;
}

.dvk-k .dvk-check .dvk-info {
    background: #fff3d3;
}

/* Preis links, Stand rechts - eine Zeile statt zwei */
.dvk-k .dvk-kachel__preis {
    display: flex;
    align-items: baseline;
    gap: 3px;
    text-align: left;
    font-size: 1.35em;
    margin: 0;
}

.dvk-k .dvk-kachel__preis small {
    margin-left: auto;
    font-size: .55em;
}

.dvk-k .dvk-kachel .dvk-btn {
    border-radius: 0 !important;
    font-size: .88em;
    padding: 8px 10px;
}

.dvk-k .dvk-kachel .dvk-btn--amazon {
    box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}

/* Produktdetails blau gefuellt wie die Menueleiste (seit 2026.10.42) */
.dvk-k .dvk-kachel .dvk-btn--detail {
    background: var(--dvk-blau);
    border-color: var(--dvk-blau);
    color: #fff;
    font-weight: bold;
}

.dvk-k .dvk-kachel .dvk-btn--detail:hover {
    background: #2c4a72;
    border-color: #2c4a72;
    color: #fff;
}

/* Handy: beide Knoepfe nebeneinander - spart je Kachel eine Knopfhoehe */
.dvk-k .dvk-kachel__aktion {
    grid-template-columns: 1.35fr 1fr;
}

/* Platznummer: eckiges Feld buendig in der linken oberen Ecke (seit 2026.10.42) */
.dvk-k .dvk-liste--nummern > .dvk-kachel::before {
    top: -1px;
    left: -1px;
    min-width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 0;
    font-size: .85em;
}

@media (min-width: 992px) {
    .dvk-k .dvk-liste {
        gap: 16px;
    }

    .dvk-k .dvk-kachel__aktion {
        grid-template-columns: 1fr;
    }

    .dvk-k .dvk-kachel:hover {
        box-shadow: 0 2px 4px rgba(16, 24, 40, .06), 0 8px 20px rgba(16, 24, 40, .08);
    }
}

/* Filter: gemeinsame Grundlage */
.dvk-k .dvk-filter {
    background: #fff;
    border: 1px solid var(--dvk-linie);
    border-radius: 0;
    padding: 12px 12px 2px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.dvk-k .dvk-filter__gruppe > b {
    font-size: .72em;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dvk-grau);
}

.dvk-k .dvk-filter label {
    min-height: 44px;
    border-width: 1px;
    background: var(--dvk-flaeche);
    white-space: nowrap;
}

.dvk-k .dvk-filter__gruppe--angebot + .dvk-filter__gruppe:not(.dvk-filter__gruppe--angebot) {
    padding-top: 10px;
    margin-top: 10px;
}

.dvk-k .dvk-filter__reset {
    min-height: 44px;
    padding: 6px 2px;
    font-size: .85em;
}

.dvk-k .dvk-zaehler {
    font-size: .9em;
    color: var(--dvk-grau);
}

.dvk-k .dvk-zaehler b {
    color: var(--dvk-text);
}

.dvk-k .dvk-filter__gruppe {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin: 0 0 10px;
}

.dvk-k .dvk-filter__gruppe > b {
    grid-column: 1 / -1;
}

.dvk-k .dvk-filter label {
    justify-content: center;
    border-radius: 0;
    padding: 4px 6px;
    font-size: .84em;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
}

/* Gruppen mit zwei Auswahlen (Reihenfolge, Verfuegbarkeit) und die Schalter: zwei Spalten */
.dvk-k .dvk-filter__gruppe--angebot,
.dvk-k .dvk-filter__gruppe[aria-label="Eigenschaften"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Preis hat kurze Beschriftungen ("bis 150 €") - drei Spalten wie die Merkmale */
.dvk-k .dvk-filter__gruppe--angebot[aria-label="Preis"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 600px) {
    .dvk-k .dvk-filter__gruppe,
    .dvk-k .dvk-filter__gruppe--angebot,
    .dvk-k .dvk-filter__gruppe[aria-label="Eigenschaften"] {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .dvk-k .dvk-filter__gruppe > b {
        flex: 0 0 100%;
    }

    .dvk-k .dvk-filter label {
        padding: 6px 14px;
        font-size: .9em;
        white-space: nowrap;
    }
}

@media (min-width: 992px) {
    .dvk-k .dvk-filter {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 24px;
    }

    .dvk-k .dvk-filter__gruppe--angebot + .dvk-filter__gruppe:not(.dvk-filter__gruppe--angebot) {
        border-top: 0;
        padding-top: 0;
        margin-top: 0;
    }
}

/* ------------------------------------------------------------------------
 * Ausgebaute Markenseiten: Vergleichstabelle [dv_markentabelle] und
 * Linkliste [dv_markenliste] - siehe inc/markenseiten-ausbau.php
 * --------------------------------------------------------------------- */
.dvm-tabelle {
    margin: 0 0 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dvm-tabelle table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 15px;
}

.dvm-tabelle th,
.dvm-tabelle td {
    padding: 9px 12px;
    border-bottom: 1px solid #e3e6ea;
    text-align: left;
    white-space: nowrap;
}

.dvm-tabelle thead th {
    background: #f4f6f8;
    border-bottom: 2px solid #cfd5db;
}

.dvm-tabelle tbody th {
    font-weight: 600;
}

.dvm-liste {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    columns: 1;
    column-gap: 32px;
}

.dvm-liste li {
    padding: 4px 0;
    break-inside: avoid;
}

@media (min-width: 600px) {
    .dvm-liste {
        columns: 2;
    }
}

@media (min-width: 992px) {
    .dvm-liste {
        columns: 3;
    }
}

/* ------------------------------------------------------------------------
 * Ausgebaute Markenseiten: Gestaltung des Textes (seit 2026.10.37).
 * Alle Regeln gelten nur innerhalb von .dvm-markenseite.
 * --------------------------------------------------------------------- */
.dvm-markenseite h2 {
    margin: 56px 0 16px;
    font-weight: 700;
    line-height: 1.25;
}

.dvm-markenseite h3 {
    margin: 32px 0 10px;
    font-weight: 700;
    line-height: 1.3;
}

.dvm-markenseite .dvm-einleitung {
    font-size: 17px;
    line-height: 1.6;
}

/* Sprunglinks als Reihe von Knoepfen */
.dvm-markenseite .dvm-sprung {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.dvm-markenseite .dvm-sprung li {
    margin: 0;
    padding: 0;
}

.dvm-markenseite .dvm-sprung a {
    display: inline-block;
    padding: 7px 15px;
    border-radius: 999px;
    background: #eef3f9;
    color: #385b89;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.dvm-markenseite .dvm-sprung a:hover,
.dvm-markenseite .dvm-sprung a:focus {
    background: #385b89;
    color: #fff;
}

/* Karten der Modellreihen: Bild links, Text rechts */
.dvm-markenseite .dvm-reihen {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 20px 0 0;
}

.dvm-markenseite .dvm-reihe {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 20px;
    border: 1px solid #d8dee6;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(20, 40, 70, 0.06);
}

.dvm-markenseite .dvm-reihe h3 {
    margin: 0 0 8px;
}

.dvm-markenseite .dvm-reihe p {
    margin: 0;
}

.dvm-markenseite .dvm-reihe__text {
    flex: 1 1 auto;
    min-width: 0;
}

.dvm-markenseite .dvm-bild {
    flex: 0 0 96px;
    margin: 0;
}

.dvm-markenseite .dvm-bild img {
    display: block;
    width: 100%;
    height: auto;
}

/* Kaesten: "Welche passt zu Ihnen?" und die Drohnenklassen */
.dvm-markenseite .dvm-boxen {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 20px 0;
}

.dvm-markenseite .dvm-box {
    padding: 18px 20px;
    border-radius: 12px;
    background: #eef3f9;
}

.dvm-markenseite .dvm-box h3 {
    margin: 0 0 6px;
    font-size: 17px;
    color: #385b89;
}

.dvm-markenseite .dvm-box p {
    margin: 0;
}

.dvm-markenseite .dvm-marke-klasse {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 10px;
    border-radius: 6px;
    background: #385b89;
    color: #fff;
}

/* Fragen zum Aufklappen */
.dvm-markenseite .dvm-frage {
    margin: 0 0 10px;
    border: 1px solid #d8dee6;
    border-radius: 10px;
    background: #fff;
}

.dvm-markenseite .dvm-frage summary {
    padding: 14px 18px;
    cursor: pointer;
}

.dvm-markenseite .dvm-frage summary h3 {
    display: inline;
    margin: 0;
    font-size: 17px;
}

.dvm-markenseite .dvm-frage[open] summary {
    border-bottom: 1px solid #d8dee6;
}

.dvm-markenseite .dvm-frage p {
    margin: 0;
    padding: 14px 18px;
}

@media (min-width: 600px) {
    .dvm-markenseite .dvm-bild {
        flex-basis: 130px;
    }

    .dvm-markenseite .dvm-boxen {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 992px) {
    .dvm-markenseite .dvm-reihen {
        grid-template-columns: 1fr 1fr;
    }

    .dvm-markenseite .dvm-boxen {
        grid-template-columns: 1fr 1fr 1fr;
    }
}