/* ==========================================================================
   AdaReviews — Bewertungsdarstellung
   --------------------------------------------------------------------------
   GESTALTUNGSGRUNDSATZ: eigenständige, shop-unabhängige Identität.

   Das Plugin läuft in beliebigen JTL-Shops. Würde es die Farben und Formen
   des jeweiligen Themes erben, sähe es in jedem Shop anders (und in vielen
   schlecht) aus. Stattdessen dieselbe Sprache wie das Vorbild: eine
   zurückhaltende Schwarz-Weiß-Basis, die sich neben jede Markenfarbe stellen
   lässt, ohne mit ihr zu streiten — die FOTOS der Kundschaft sind der Akzent.

   Kernentscheidungen (alle aus der DOM-Messung am Vorbild):
     Sterne SCHWARZ, nicht gold — Gold konkurriert mit Shop-Akzentfarben
     Karten weiß auf dem Seitengrund, weicher Radius, feiner Rand
     Knöpfe als Umriss-Pillen, 1 px, kein Farbfeld
     Verifiziert-Haken als schwarzer Kreis direkt am Namen
     Systemschriften — kein externer Font (Ladezeit und Einwilligung)

   Alle Werte sind als Variablen gesetzt. Wer das Plugin doch an eine Marke
   angleichen will, überschreibt --adarev-akzent bzw. --adarev-stern im
   Theme — ohne diese Datei anzufassen.
   ========================================================================== */

/* Die Variablen gelten für ALLE Wurzeln des Plugins, nicht nur die Sektion:
   Der Tab-Ersatzblock sitzt im Markup des Themes und die Lightbox hängt am
   Body — beide liegen außerhalb von .adarev. Ohne diese Aufzählung fielen
   dort die Sterne auf Schwarz zurück (im Browser gemessen). */
.adarev,
.adarev-tabinfo,
.adarev-lightbox,
.adarev-dialog {
    /* --- Palette -------------------------------------------------------- */
    --adarev-tinte: #1c1c1c;
    --adarev-text: #3e3e3e;
    --adarev-leise: #6b7075;
    --adarev-rahmen: #e5e5e3;
    --adarev-rahmen-stark: #1c1c1c;
    --adarev-flaeche: #fff;
    --adarev-flaeche-warm: #f6f5f2;
    --adarev-spur: #ebebe8;
    --adarev-balken: #767676;
    /* Sternegelb: satt genug, um auf Weiß zu tragen, ohne ins Orange zu
       kippen. Im Theme überschreibbar (--adarev-stern). */
    --adarev-stern: #ffb400;
    --adarev-stern-leer: #dcdcd8;
    --adarev-akzent: #1c1c1c;

    /* --- Form ----------------------------------------------------------- */
    --adarev-radius: 10px;
    --adarev-radius-pille: 999px;
    --adarev-gap: 14px;
    --adarev-schatten: 0 1px 3px rgba(20, 20, 20, .06);
    --adarev-schatten-hoch: 0 10px 30px rgba(20, 20, 20, .13);

    /* --- Abstände ------------------------------------------------------
       EINE Skala für die ganze Sektion. Vorher standen an zwölf Stellen
       gewachsene Einzelwerte (16, 18, 20, 22, 28 px), die zusammen kein
       Raster ergaben — genau das liest sich als „Abstände passen nicht".
       Regel: Abstand INNERHALB eines Blocks kleiner als der Abstand ZWISCHEN
       Blöcken. Wer etwas ändert, ändert die Variable, nicht die Einzelstelle. */
    --adarev-raum-eng: 6px;    /* zwischen eng verwandten Zeilen           */
    --adarev-raum-klein: 10px; /* zwischen Bedienelementen                 */
    --adarev-raum-mittel: 16px;/* innerhalb eines Blocks                   */
    --adarev-raum-gross: 26px; /* zwischen den Blöcken der Sektion         */
    --adarev-raum-weit: 40px;  /* vor und nach der Sektion                 */

    /* --- Schrift: eigener Stack, damit die Darstellung in jedem Shop
           gleich aussieht und nichts nachgeladen werden muss ------------- */
    --adarev-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   0. Sektion
   ========================================================================== */

.adarev {
    font-family: var(--adarev-font);
    color: var(--adarev-text);
    margin: var(--adarev-raum-weit) auto;
    padding: 0 var(--adarev-raum-mittel);
    max-width: 1320px;
    /* Schutz gegen Flex-/Grid-Eltern: OPC-Themes bauen Container per
       Client-JS um, die Sektion muss die volle Zeile behalten. */
    width: 100%;
    min-width: 0;
    flex: 0 0 100%;
    grid-column: 1 / -1;
    clear: both;
    box-sizing: border-box;
}

.adarev *,
.adarev *::before,
.adarev *::after { box-sizing: border-box; }

.adarev-kopf__titel {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--adarev-tinte);
    text-align: center;
    margin: 0 0 var(--adarev-raum-gross);
    font-family: var(--adarev-font);
}

/* ==========================================================================
   1. Kopfzeile — großer Stern, große Zahl, Verteilung, Aktionen
   ========================================================================== */

/* Kompakter Block: Durchschnitt, Verteilung und Aktionen sollen als eine
   Einheit lesen. Zu große Lücken lassen die Zeile auseinanderfallen. */
.adarev-zusammenfassung {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--adarev-raum-gross);
    margin: 0 0 var(--adarev-raum-gross);
    padding: 0;
}

.adarev-zusammenfassung__wert {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}

/* Der große Stern neben der Zahl ist das Erkennungszeichen des Vorbilds. */
.adarev-zusammenfassung__ikone {
    width: 54px;
    height: 54px;
    fill: var(--adarev-stern);
    flex: 0 0 auto;
}

.adarev-zusammenfassung__zahlen { display: flex; flex-direction: column; }

.adarev-zusammenfassung__schnitt {
    font-size: 46px;
    font-weight: 500;
    color: var(--adarev-tinte);
    line-height: 1;
    letter-spacing: -1.5px;
}

.adarev-zusammenfassung__anzahl {
    font-size: 15px;
    color: var(--adarev-text);
    margin-top: 6px;
}

/* Filter, Sortierung und der Aufruf zum Schreiben — eine Gruppe, gleiche
   Höhe, gleicher Abstand. `margin-left:auto` schiebt sie an das rechte Ende
   der Kopfzeile; bricht die Zeile um, sitzt die Gruppe darunter und darf die
   volle Breite nutzen (siehe Mobilblock am Dateiende). */
.adarev-kopf__aktionen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--adarev-raum-klein);
    margin-left: auto;
    flex: 0 1 auto;
}

/* Die Kopfzeile bricht um, sobald links (230) + Verteilung (260) + Aktionen
   (530) plus zwei Lücken nicht mehr nebeneinander passen — gemessen bei
   1072 px. Ab hier sitzt die Gruppe in einer eigenen Zeile; sie soll diese
   dann auch füllen, statt rechts zu kleben und links eine Lücke zu lassen. */
@media (max-width: 1100px) {
    .adarev-kopf__aktionen {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    .adarev-kopf__aktionen > .adarev-btn,
    .adarev-kopf__aktionen > .adarev-sort { flex: 1 1 auto; }
}

.adarev-echtheit {
    font-size: 12px;
    color: var(--adarev-leise);
    text-align: center;
    margin: 0 0 var(--adarev-raum-gross);
    line-height: 1.6;
}

/* ==========================================================================
   2. Sterne
   ========================================================================== */

.adarev-sterne {
    display: inline-flex;
    gap: 1px;
    vertical-align: middle;
    line-height: 1;
}

.adarev-sterne__stern {
    width: 15px;
    height: 15px;
    fill: var(--adarev-stern-leer);
    flex: 0 0 auto;
}

.adarev-sterne__stern.is-voll { fill: var(--adarev-stern); }

.adarev-sterne--gross .adarev-sterne__stern { width: 19px; height: 19px; }

.adarev-sterne--galerie .adarev-sterne__stern { width: 13px; height: 13px; fill: rgba(255, 255, 255, .5); }
.adarev-sterne--galerie .adarev-sterne__stern.is-voll { fill: #fff; }

/* ==========================================================================
   3. Verteilung — Sterne, Balken, Anzahl in Klammern
   ========================================================================== */

.adarev-dist {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 340px;
    max-width: 480px;
    min-width: 260px;
}

.adarev-dist__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    background: none;
    border: 0;
    border-radius: var(--adarev-radius);
    padding: 3px 6px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background-color .15s ease;
}

.adarev-dist__row:hover { background: var(--adarev-flaeche-warm); }
.adarev-dist__row[aria-pressed="true"] { background: var(--adarev-flaeche-warm); }
.adarev-dist__row[aria-pressed="true"] .adarev-dist__count { color: var(--adarev-tinte); font-weight: 700; }

.adarev-dist__bar {
    display: block;
    height: 9px;
    border-radius: var(--adarev-radius-pille);
    background: var(--adarev-spur);
    overflow: hidden;
}

.adarev-dist__fill {
    display: block;
    height: 100%;
    border-radius: var(--adarev-radius-pille);
    background: var(--adarev-balken);
    transition: width .45s cubic-bezier(.4, 0, .2, 1);
}

.adarev-dist__count {
    font-size: 13px;
    color: var(--adarev-leise);
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 46px;
}

/* ==========================================================================
   4. Knöpfe — Umriss-Pillen, bewusst ohne Farbfeld
   ========================================================================== */

/* --------------------------------------------------------------------------
   BEDIENELEMENTE — gegen fremdes Shop-CSS gehärtet.

   Themes stylen `button`, `select` und `.btn` global (Rahmen, Schatten,
   Versalien, Innenabstände, eigene Pfeile). Wer sich darauf verlässt, dass
   das Theme mitspielt, bekommt in jedem Shop ein anderes Bild. Deshalb
   setzt diese Basis JEDE relevante Eigenschaft selbst — auch die, die
   „eigentlich" schon stimmen. Das ist der Preis dafür, dass die Leiste
   überall gleich aussieht.
   -------------------------------------------------------------------------- */
.adarev-btn,
.adarev-sort {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    min-height: 42px;
    margin: 0;
    padding: 0 20px;
    border-radius: var(--adarev-radius-pille);
    border: 1px solid var(--adarev-rahmen);
    background: var(--adarev-flaeche);
    background-image: none;
    color: var(--adarev-tinte);
    font-family: var(--adarev-font);
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    outline: none;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* Hover nur andeuten — Schwarz bleibt dem AKTIVEN Zustand vorbehalten.
   Sonst sieht ein bloß überfahrener Filter aus wie ein gesetzter. */
.adarev-btn:hover,
.adarev-sort:hover {
    background: var(--adarev-flaeche-warm);
    border-color: #cfcfca;
    color: var(--adarev-tinte);
    text-decoration: none;
}

.adarev-btn:focus-visible,
.adarev-sort:focus-visible {
    outline: 2px solid var(--adarev-tinte);
    outline-offset: 2px;
}

.adarev-btn[aria-pressed="true"] {
    background: var(--adarev-tinte);
    color: #fff;
    border-color: var(--adarev-tinte);
}

.adarev-btn[aria-pressed="true"]:hover { background: #000; color: #fff; border-color: #000; }

/* Der Hauptknopf trägt den kräftigen Rand — er ist die Einladung zum
   Schreiben und darf sich von den Filtern abheben. */
.adarev-btn--stark { border-color: var(--adarev-rahmen-stark); font-weight: 600; padding: 0 24px; }
.adarev-btn--stark:hover { background: var(--adarev-tinte); color: #fff; border-color: var(--adarev-tinte); }

/* Eigener Pfeil statt des nativen: Der sieht je nach Browser und Theme
   anders aus, mancher Shop zeichnet sogar einen zweiten dazu. */
.adarev-sort {
    padding: 0 42px 0 20px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 15px 15px;
    text-align: left;
    justify-content: flex-start;
}

/* Safari und Firefox setzen bei <select> eigene Innenabstände. */
.adarev-sort::-ms-expand { display: none; }

/* ==========================================================================
   5. Foto-Galerie — 4:5-Karussell
   ========================================================================== */

.adarev-gal-wrap { position: relative; margin: 0 0 var(--adarev-raum-gross); }

.adarev-gal {
    display: flex;
    gap: var(--adarev-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.adarev-gal::-webkit-scrollbar { display: none; }

.adarev-gal__item {
    position: relative;
    flex: 0 0 auto;
    aspect-ratio: 4 / 5;
    border: 0;
    padding: 0;
    border-radius: var(--adarev-radius);
    overflow: hidden;
    background: #ececea;
    scroll-snap-align: start;
    cursor: pointer;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), box-shadow .28s ease;
}

/* Mobil 1–2 Kacheln, nächste angeschnitten (Peek als Scroll-Hinweis) */
.adarev-gal__item { width: 62%; }

@media (min-width: 480px) { .adarev-gal__item { width: 38%; } }
@media (min-width: 768px) { .adarev-gal__item { width: 26%; } }
@media (min-width: 992px) { .adarev-gal__item { width: 19%; } }

.adarev-gal__item:hover { transform: translateY(-2px); box-shadow: var(--adarev-schatten-hoch); }

.adarev-gal__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Der Verlauf über dem unteren Drittel ist der eigentliche Vorbild-Look.
   57.81 % ist der gemessene Wert — bitte nicht "aufräumen". */
.adarev-gal__item::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(rgba(0, 0, 0, 0) 57.81%, rgba(0, 0, 0, .5));
    pointer-events: none;
}

.adarev-gal__meta {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    padding: 14px 10px;
    color: #fff;
    pointer-events: none;
}

.adarev-gal__name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.adarev-gal__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    display: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 14px rgba(20, 20, 20, .18);
    border: 0;
    color: var(--adarev-tinte);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: transform .15s ease;
}

.adarev-gal__nav:hover { transform: translateY(-50%) scale(1.06); }
.adarev-gal__nav--zurueck { left: -16px; }
.adarev-gal__nav--vor { right: -16px; }

@media (hover: hover) and (min-width: 992px) {
    .adarev-gal__nav { display: grid; place-items: center; }
}

/* ==========================================================================
   6. Bewertungswand — Masonry über Spalten
   --------------------------------------------------------------------------
   Bewertungen sind unterschiedlich lang. In einem Zeilenraster streckt sich
   jede Karte auf die Höhe der längsten ihrer Zeile und reißt Löcher; Spalten
   packen dicht wie beim Vorbild. Die Lesereihenfolge läuft dadurch
   spaltenweise — bei einer Bewertungswand die richtige Abwägung.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ECHTE SPALTEN STATT column-count.

   column-count schichtet den Inhalt bei JEDER Höhenänderung neu zwischen den
   Spalten um: ein nachgeladenes Bild, ein gesetzter Filter, „Mehr anzeigen",
   eine andere Schrift — und die Karten springen an andere Stellen. Genau das
   war als „die Wand ruckelt" gemeldet (06.08.2026).

   Jetzt gibt es feste Spaltenbehälter, in die ada-reviews.js die Karten
   einsortiert (immer in die kürzeste). Eine Karte, die einmal in Spalte 2
   steht, bleibt dort — sie kann sich nicht mehr umsortieren. Neu verteilt
   wird nur, wenn sich die SPALTENZAHL ändert, also beim Drehen des Geräts
   oder beim Ändern der Fensterbreite.

   OHNE JAVASCRIPT: Die Karten liegen flach im Raster und stehen dank
   flex-wrap nebeneinander — eine Spalte weniger dicht, aber vollständig
   lesbar. Nichts hängt vom Skript ab.
   -------------------------------------------------------------------------- */
.adarev-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--adarev-gap);
    transition: opacity .2s ease;
}

/* Spaltenzahl als Variable — das JavaScript liest sie aus, damit CSS und
   Skript nicht auseinanderlaufen können. */
.adarev-grid { --adarev-spalten: 2; }
@media (min-width: 480px)  { .adarev-grid { --adarev-spalten: 3; } }
@media (min-width: 920px)  { .adarev-grid { --adarev-spalten: 4; } }
@media (min-width: 1150px) { .adarev-grid { --adarev-spalten: 5; } }

.adarev-spalte {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--adarev-gap);
}

/* Rückfall ohne JavaScript: Karten liegen direkt im Raster. */
.adarev-grid > .adarev-card { flex: 1 1 240px; }

.adarev-grid.is-laden { opacity: .4; pointer-events: none; }

.adarev-card {
    display: block;
    width: 100%;
    margin: 0;
    background: var(--adarev-flaeche);
    border: 1px solid var(--adarev-rahmen);
    border-radius: var(--adarev-radius);
    overflow: hidden;
    vertical-align: top;
    transition: box-shadow .2s ease, transform .2s ease;
}

/* Karten heben sich beim Überfahren nur leicht — ein Sprung im Masonry
   lässt die ganze Wand unruhig wirken. */
.adarev-card:hover { box-shadow: var(--adarev-schatten-hoch); border-color: #d8d8d4; }

/* --------------------------------------------------------------------------
   BILDER DER KARTE — eins, zwei oder mehr.

   Ein Zähler „+2" verlangt einen Klick ins Ungewisse. Nebeneinander sieht
   man auf einen Blick, was es zu sehen gibt, und trifft jedes Bild einzeln.
   Bei zwei und mehr Bildern zwingt das Raster sie ins Quadrat — ungleiche
   Seitenverhältnisse ergäben sonst eine Treppe.
   -------------------------------------------------------------------------- */
.adarev-card__bilder { display: grid; gap: 2px; }

.adarev-card__bilder--zwei { grid-template-columns: 1fr 1fr; }

/* Drei und mehr: das erste über die volle Breite, die übrigen darunter in
   einer Reihe. Bei genau drei ergibt das 1 + 2, bei vier 1 + 3 — beides
   liest sich als ein Bild mit Beiwerk, nicht als Galerie ohne Hauptmotiv. */
.adarev-card__bilder--viele { grid-template-columns: repeat(2, 1fr); }
.adarev-card__bilder--viele > .adarev-card__img:first-child { grid-column: 1 / -1; }

.adarev-card__img {
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
    background: none;
    cursor: zoom-in;
    position: relative;
}

/* Sobald mehrere Bilder nebeneinander stehen: quadratisch. Das inline
   gesetzte padding-bottom des Platzhalters gilt nur beim Einzelbild. */
.adarev-card__bilder--zwei .adarev-ratio,
.adarev-card__bilder--viele .adarev-ratio { padding-bottom: 100% !important; }

.adarev-card__img:focus-visible { outline: 2px solid var(--adarev-tinte); outline-offset: -2px; }

/* Platzhalter mit nativem Seitenverhältnis — verhindert Layout-Sprünge.
   Höhe kommt inline aus nBreite/nHoehe, Farbe aus cDominanz. */
.adarev-ratio {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    overflow: hidden;
    background: #ececea;
}

.adarev-ratio img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.01); /* verhindert Subpixel-Ränder */
    transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.adarev-card:hover .adarev-ratio img { transform: scale(1.035); }

/* "+N" für weitere Fotos — dunkler Chip mit Bildsymbol, wie beim Vorbild */

.adarev-card__body {
    padding: 14px 15px 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.adarev-card__body p { margin: 0; }

.adarev-card__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--adarev-tinte);
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* Verifiziert: schwarzer Kreis mit weißem Haken direkt am Namen — knapp,
   erkennbar, ohne Farbfeld. */
.adarev-verifiziert {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    fill: var(--adarev-tinte);
}

.adarev-card__stars { line-height: 1; }

.adarev-card__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--adarev-tinte);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.adarev-card__text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--adarev-text);
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.adarev-card__variante { font-size: 12px; color: var(--adarev-leise); }

.adarev-card__date { font-size: 12px; color: var(--adarev-leise); }

/* Händlerantwort bewusst leiser — sie soll die Kundenstimme nicht übertönen */
.adarev-reply {
    background: var(--adarev-flaeche-warm);
    border-radius: 8px;
    margin-top: 8px;
    padding: 10px 12px;
}

.adarev-reply__head { font-size: 12.5px; font-weight: 600; color: var(--adarev-tinte); margin-bottom: 3px; }
.adarev-reply__text { font-size: 13px; line-height: 1.5; color: var(--adarev-leise); }

/* ==========================================================================
   7. Leere Zustände, Nachladen
   ========================================================================== */

.adarev-leer {
    text-align: center;
    color: var(--adarev-leise);
    font-size: 15px;
    background: var(--adarev-flaeche-warm);
    border-radius: var(--adarev-radius);
    padding: 40px 16px;
    margin: 0;
}

.adarev-mehr-wrap { text-align: center; margin: var(--adarev-raum-gross) 0 0; }
.adarev-mehr-wrap .adarev-btn { min-width: 240px; }

/* ==========================================================================
   8. Ersatzblock in den Tab-Instanzen des Themes
   ========================================================================== */

.adarev-tabinfo {
    font-family: var(--adarev-font);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.adarev-tabinfo__zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }

.adarev-tabinfo__schnitt { font-size: 26px; font-weight: 500; color: #1c1c1c; letter-spacing: -.5px; }

.adarev-tabinfo__anzahl { font-size: 14px; color: #6b7075; }

.adarev-tabinfo .adarev-btn { text-decoration: none; }

/* ==========================================================================
   9. Lightbox — zweigeteilt: Bild links, Bewertung rechts
   ========================================================================== */

.adarev-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(28, 28, 28, .82);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: var(--adarev-font);
    animation: adarev-fade .18s ease;
}

@keyframes adarev-fade { from { opacity: 0; } to { opacity: 1; } }

.adarev-lightbox__box {
    position: relative;
    display: flex;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    max-width: min(1100px, 96vw);
    max-height: 88vh;
    width: 100%;
}

.adarev-lightbox__bildseite {
    position: relative;
    flex: 1 1 58%;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    /* Wischen soll blättern, nicht die Seite hinter der Lightbox scrollen */
    touch-action: pan-y;
}

.adarev-lightbox__zaehler {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 99px;
    pointer-events: none;
    letter-spacing: .3px;
}

.adarev-lightbox__bild {
    max-width: 100%;
    max-height: 88vh;
    object-fit: contain;
    display: block;
}

.adarev-lightbox__textseite {
    flex: 1 1 42%;
    padding: 28px 26px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.adarev-lightbox__name {
    font-size: 17px;
    font-weight: 700;
    color: var(--adarev-tinte);
    display: flex;
    align-items: center;
    gap: 6px;
}

.adarev-lightbox__text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--adarev-text);
    white-space: pre-line;
    margin: 0;
}

.adarev-lightbox__datum { font-size: 13px; color: var(--adarev-leise); margin: 0; }

.adarev-lightbox__zu,
.adarev-lightbox__nav {
    position: absolute;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .92);
    color: var(--adarev-tinte);
    font-size: 18px;
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 4;
    transition: background-color .15s ease;
}

.adarev-lightbox__zu:hover,
.adarev-lightbox__nav:hover { background: #fff; }

.adarev-lightbox__zu { top: 14px; left: 14px; }
.adarev-lightbox__nav--zurueck { left: 14px; top: 50%; transform: translateY(-50%); }
.adarev-lightbox__nav--vor { right: 14px; top: 50%; transform: translateY(-50%); }

@media (max-width: 860px) {
    /* Vollbild statt schwebender Kasten: Auf dem Handy zählt jeder Pixel
       für das Foto. Geblättert wird gewischt, die Pfeile entfallen. */
    .adarev-lightbox { padding: 0; }

    .adarev-lightbox__box {
        flex-direction: column;
        border-radius: 0;
        max-height: 100dvh;
        height: 100dvh;
        max-width: 100vw;
    }

    .adarev-lightbox__bildseite {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }

    .adarev-lightbox__bild { max-height: 100%; width: 100%; object-fit: contain; }

    .adarev-lightbox__textseite {
        flex: 0 0 auto;
        max-height: 42dvh;
        padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--adarev-rahmen);
    }

    .adarev-lightbox__nav { display: none; }

    .adarev-lightbox__zu {
        top: calc(10px + env(safe-area-inset-top));
        left: 10px;
        width: 44px;
        height: 44px;
    }

    .adarev-lightbox__zaehler { bottom: 10px; }
}

/* ==========================================================================
   10. Formular
   ========================================================================== */

/* Nur visuell verstecken, für Screenreader UND Formular voll vorhanden —
   für Radios und Datei-Eingaben. NICHT für den Honeypot verwenden! */
.adarev-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.adarev-versteckt { display: none !important; }

.adarev-dialog {
    width: min(620px, calc(100vw - 24px));
    max-height: calc(100dvh - 40px);
    border: 0;
    border-radius: 14px;
    padding: 0;
    color: var(--adarev-text);
    font-family: var(--adarev-font);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(20, 20, 20, .3);
}

.adarev-dialog::backdrop { background: rgba(28, 28, 28, .6); }

.adarev-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 26px 26px 0;
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
}

/* In einem Spalten-Flexcontainer schrumpfen Kinder, sobald der Inhalt höher
   als der Dialog ist — der Absendeknopf war dadurch 18 statt 54 px hoch
   (im Browser gemessen). Nichts im Formular darf gestaucht werden. */
.adarev-form > * { flex-shrink: 0; }

.adarev-form__kopf { display: flex; align-items: center; gap: 12px; }

.adarev-form__kopf img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    flex: 0 0 auto;
    border: 1px solid var(--adarev-rahmen);
}

.adarev-form__titel { font-size: 18px; font-weight: 700; margin: 0; color: var(--adarev-tinte); }

/* KEIN Fokusring auf der Überschrift.
   Das JavaScript setzt den Fokus beim Öffnen hierher, damit nicht das
   Lockfeld ihn bekommt und die Tastatur hochfährt (siehe oeffne() in
   ada-reviews.js). Der Browser zeichnet dafür einen Ring — auf
   design-heizungen.de ein dunkelrotes Kästchen um „Ihre Bewertung".

   WARUM !important, was hier sonst nirgends steht: Das Theme setzt
   `:focus-visible { outline: 2px solid var(--brand-primary) !important }`
   ohne jede Einschränkung für die ganze Seite. Gegen ein globales
   !important kommt keine Spezifität an — nur ein eigenes. Der Eingriff
   bleibt auf DIESE eine Überschrift beschränkt.

   Der Ring ist an dieser Stelle wertlos: Niemand ist mit der Tastatur
   dorthin navigiert, es gibt nichts zu bedienen. Für alles, was man
   wirklich bedient, bleibt er erhalten. */
.adarev-form__titel:focus,
.adarev-form__titel:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.adarev-form__artikel {
    font-size: 13px;
    color: var(--adarev-leise);
    margin: 2px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.adarev-form__zu {
    margin-left: auto;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: none;
    font-size: 18px;
    color: var(--adarev-leise);
    cursor: pointer;
    align-self: flex-start;
}

.adarev-form__zu:hover { background: var(--adarev-flaeche-warm); color: var(--adarev-tinte); }

/* Sternewahl mittig und groß — der Einstieg soll einladend sein. */
.adarev-rating { border: 0; padding: 0; margin: 0; text-align: center; }

.adarev-form__frage {
    font-size: 19px;
    font-weight: 600;
    color: var(--adarev-tinte);
    padding: 0;
    margin: 0 auto 14px;
    float: none;
    width: 100%;
    text-align: center;
}

.adarev-stars {
    display: flex;
    gap: 6px;
    border: 0;
    padding: 0;
    margin: 0 auto;
    justify-content: center;
    max-width: 360px;
}

.adarev-star {
    flex: 1 1 0;
    min-width: 48px;
    height: 58px;
    display: grid;
    place-items: center;
    cursor: pointer;
    margin: 0;
}

.adarev-star svg {
    width: 44px;
    height: 44px;
    fill: none;
    stroke: var(--adarev-stern-leer);
    stroke-width: 1.4;
    transition: transform 130ms ease, fill 130ms ease, stroke 130ms ease;
}

.adarev-star:hover svg { stroke: var(--adarev-stern); }

.adarev-star.is-voll svg { fill: var(--adarev-stern); stroke: var(--adarev-stern); }

.adarev-star input:checked + svg { transform: scale(1.12); }

.adarev-star input:focus-visible + svg { outline: 2px solid var(--adarev-tinte); outline-offset: 4px; border-radius: 4px; }

/* Enden beschriften wie beim Vorbild: "Gar nicht zufrieden" ... "Begeistert" */
.adarev-stars__enden {
    display: flex;
    justify-content: space-between;
    max-width: 360px;
    margin: 2px auto 0;
    font-size: 13px;
    color: var(--adarev-leise);
}

/* Fester Slot, damit der Inhalt beim Umschalten nicht springt */
.adarev-stars__label {
    min-height: 24px;
    font-size: 15px;
    font-weight: 600;
    color: var(--adarev-tinte);
    margin: 10px 0 0;
    text-align: center;
}

/* --------------------------------------------------------------------------
   NACH DER STERNWAHL WIRD DER STERNBLOCK KLEIN.

   Vorher: Frage (19px), fünf 44-px-Sterne mit 58-px-Trefferflächen, zwei
   Endbeschriftungen, dann die Wertung — zusammen rund 190 px. Das ist beim
   Einstieg genau richtig: Es ist die einzige Frage. Sobald sie beantwortet
   ist, hat der Block seine Aufgabe erledigt und soll den Feldern Platz
   machen, statt sie unter den Bildschirmrand zu drücken.

   Danach: EINE Zeile mit kleinen Sternen und der Wertung daneben, rund
   44 px. Die Sterne bleiben anklickbar — wer sich vertan hat, korrigiert
   ohne Umweg. Gespart: rund 145 px, also fast ein ganzes Feld.

   Gesetzt wird die Klasse in zeigeRestDesFormulars() (ada-reviews.js).
   -------------------------------------------------------------------------- */
.adarev-form.is-offen .adarev-rating {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.adarev-form.is-offen .adarev-form__frage,
.adarev-form.is-offen .adarev-stars__enden { display: none; }

.adarev-form.is-offen .adarev-stars {
    margin: 0;
    max-width: none;
    gap: 2px;
    justify-content: flex-start;
}

/* 34 px Trefferfläche statt 58 — bequem genug zum Antippen, aber die Zeile
   bleibt niedrig. */
.adarev-form.is-offen .adarev-star { flex: 0 0 auto; min-width: 34px; height: 38px; }
.adarev-form.is-offen .adarev-star svg { width: 30px; height: 30px; }

.adarev-form.is-offen .adarev-stars__label {
    min-height: 0;
    margin: 0;
    font-size: 14.5px;
    text-align: left;
}

.adarev-feld { display: flex; flex-direction: column; gap: 6px; }

.adarev-feld label { font-size: 14px; font-weight: 600; color: var(--adarev-tinte); }

/* Erklärzeile unter einem Feld — nur dort, wo die Beschriftung allein nicht
   sagt, wozu die Angabe gut ist (Bestellnummer). Bewusst leise: Sie soll
   beruhigen, nicht ablenken. */
.adarev-feld__hinweis {
    margin: 5px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--adarev-leise);
}

.adarev-optional { color: var(--adarev-leise); font-weight: 400; }

/* 16px verhindert den Zoom von iOS Safari beim Fokus — nicht kleiner setzen */
.adarev-form input[type="text"],
.adarev-form textarea {
    font-size: 16px;
    min-height: 48px;
    width: 100%;
    border: 1px solid var(--adarev-rahmen);
    border-radius: 8px;
    padding: 11px 13px;
    color: var(--adarev-text);
    background: #fff;
    font-family: inherit;
}

.adarev-form textarea { min-height: 112px; line-height: 1.5; resize: vertical; }

.adarev-form input[type="text"]:focus,
.adarev-form textarea:focus { outline: 2px solid var(--adarev-tinte); outline-offset: 0; border-color: transparent; }

/* Lockfeld. NUR so verstecken — die sr-only-Technik hielte es für
   Screenreader absichtlich lesbar, blinde Kunden würden es ausfüllen. */
.adarev-f2 { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Ablagefläche: am Rechner Ziehen-und-Ablegen, auf dem Handy ein Tippziel
   über die volle Breite — kein 96-px-Kästchen, das man treffen muss. */
.adarev-drop {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 88px;
    padding: 16px 18px;
    border: 1.5px dashed #cfcfca;
    border-radius: 12px;
    background: var(--adarev-flaeche-warm);
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
}

.adarev-drop:hover,
.adarev-drop.is-ueber {
    border-color: var(--adarev-tinte);
    background: #f0efec;
}

.adarev-drop__ikone { width: 30px; height: 30px; fill: var(--adarev-leise); flex: 0 0 auto; }
.adarev-drop.is-ueber .adarev-drop__ikone { fill: var(--adarev-tinte); }

.adarev-drop__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adarev-drop__text strong { font-size: 15px; color: var(--adarev-tinte); font-weight: 600; }
.adarev-drop__klein { font-size: 12.5px; color: var(--adarev-leise); }

.adarev-drop.is-voll { opacity: .5; pointer-events: none; }

.adarev-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.adarev-thumbs:empty { display: none; }

.adarev-thumb {
    position: relative;
    width: 92px;
    height: 92px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--adarev-rahmen);
    background: var(--adarev-flaeche-warm);
}

.adarev-thumb--bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Entfernen: sichtbarer runder Knopf statt unsichtbarer Fläche — auf dem
   Handy muss man sehen, worauf man tippt. 44 px ist das Mindestmaß. */
.adarev-thumb__del {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: rgba(28, 28, 28, .78);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    font-size: 13px;
    line-height: 1;
    padding: 0;
}

.adarev-thumb__del:hover { background: #1c1c1c; }

/* Ladefortschritt je Bild beim Absenden */
.adarev-thumb.is-laden::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .6) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231c1c1c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9'/%3E%3C/svg%3E") center / 24px no-repeat;
    animation: adarev-dreh .8s linear infinite;
}

@keyframes adarev-dreh { to { transform: rotate(360deg); } }

.adarev-form__hinweis { font-size: 12.5px; color: var(--adarev-leise); margin: 0; }

.adarev-form__recht { font-size: 12px; color: var(--adarev-leise); line-height: 1.5; margin: 0; }

.adarev-form__fehler {
    font-size: 14px;
    color: #9b2226;
    background: #fdf2f2;
    border-radius: 8px;
    padding: 11px 13px;
    margin: 0;
}

/* Absendeknopf klebt unten; gefüllt, weil es die einzige Hauptaktion ist. */
.adarev-submit {
    height: 54px;
    width: 100%;
    position: sticky;
    bottom: 0;
    background: var(--adarev-tinte);
    border-color: var(--adarev-tinte);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 22px;
}

.adarev-submit:hover { background: #000; border-color: #000; color: #fff; }

/* ZWEI verschiedene gesperrte Zustände, die nicht gleich aussehen dürfen:
   VOR der Sternwahl ist der Knopf noch nicht dran — hell, mit Zeigern, die
   „geht noch nicht" sagen. WÄHREND des Sendens ist er dran, aber beschäftigt
   — dunkel wie sonst, nur gedimmt. Ein dunkler, satter Knopf, der auf einen
   Klick nicht reagiert, liest sich als Fehler. */
.adarev-submit[disabled] {
    background: var(--adarev-flaeche-warm);
    border-color: var(--adarev-rahmen);
    color: var(--adarev-leise);
    cursor: not-allowed;
}

.adarev-submit[disabled]:hover {
    background: var(--adarev-flaeche-warm);
    border-color: var(--adarev-rahmen);
    color: var(--adarev-leise);
}

.adarev-submit[aria-busy="true"] {
    background: var(--adarev-tinte);
    border-color: var(--adarev-tinte);
    color: #fff;
    opacity: .65;
    cursor: progress;
}

.adarev-danke { text-align: center; padding: 40px 26px 34px; font-family: var(--adarev-font); }

.adarev-danke__haken {
    width: 62px;
    height: 62px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--adarev-flaeche-warm);
    font-size: 28px;
    color: var(--adarev-tinte);
}

.adarev-danke h3 { font-size: 20px; font-weight: 700; color: var(--adarev-tinte); margin: 0 0 10px; }

/* Der Beleg: was bewertet wurde, wie, und was mitgeschickt wurde.
   Ein ruhiger Kasten statt vieler einzelner Zeilen — er fasst die drei
   Angaben zusammen und trennt sie vom Hinweis darunter, was als Nächstes
   passiert. */
.adarev-danke__beleg {
    background: var(--adarev-flaeche-warm);
    border-radius: var(--adarev-radius);
    padding: 14px 16px;
    margin: 0 0 18px;
}

.adarev-danke__artikel {
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
}

.adarev-danke__artikel img {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 8px;
    background: #fff;
}

/* Zwei Zeilen reichen: Der Kunde weiß, was er bewertet hat — der Name ist
   die Bestätigung, nicht die Nachricht. */
.adarev-danke__artikel span {
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--adarev-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.adarev-danke__sterne { font-size: 22px; color: var(--adarev-stern); letter-spacing: 3px; margin: 10px 0 0; }

.adarev-danke__fotos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.adarev-danke__fotos img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--adarev-rahmen);
    background: #fff;
    display: block;
}

.adarev-danke__status { font-size: 14px; color: var(--adarev-leise); margin: 0 0 16px; line-height: 1.55; }

.adarev-danke__hilfe { font-size: 14px; margin: 0 0 20px; }
.adarev-danke__hilfe a { color: var(--adarev-tinte); }

/* ==========================================================================
   11. Mobil
   ========================================================================== */

@media (max-width: 700px) {
    .adarev { margin: var(--adarev-raum-gross) auto; }
    .adarev-kopf__titel { font-size: 20px; margin-bottom: var(--adarev-raum-mittel); }
    .adarev-zusammenfassung { gap: var(--adarev-raum-mittel); }
    .adarev-zusammenfassung__ikone { width: 40px; height: 40px; }
    .adarev-zusammenfassung__schnitt { font-size: 34px; }
    .adarev-dist { max-width: none; }

    /* Die Aktionsgruppe nimmt die volle Breite: Filter und Sortierung teilen
       sich eine Zeile, der Aufruf zum Schreiben bekommt seine eigene — er
       ist die wichtigste Schaltfläche der Sektion und soll auf dem Handy
       nicht auf ein Drittel zusammenschrumpfen. */
    .adarev-kopf__aktionen { margin-left: 0; width: 100%; }
    .adarev-kopf__aktionen > .adarev-btn,
    .adarev-kopf__aktionen > .adarev-sort { flex: 1 1 140px; }
    .adarev-kopf__aktionen > .adarev-btn--stark { flex: 1 1 100%; }

    /* ---------------------------------------------------------------------
       FORMULAR ALS BLATT VON UNTEN.
       Ein mittig schwebender Dialog ist auf dem Handy unbrauchbar: Er
       springt mit der Bildschirmtastatur, und der Absendeknopf verschwindet
       aus dem Sichtfeld. Von unten einfahrend über die volle Breite, Kopf
       und Knopf fest, der Inhalt scrollt dazwischen.
       --------------------------------------------------------------------- */
    .adarev-dialog {
        width: 100vw;
        max-width: 100vw;
        max-height: 92dvh;
        margin: 0;
        margin-top: auto;
        border-radius: 16px 16px 0 0;
        animation: adarev-hoch .22s cubic-bezier(.4, 0, .2, 1);
    }

    .adarev-form {
        padding: 0;
        max-height: 92dvh;
        gap: 0;
    }

    .adarev-form__kopf {
        position: sticky;
        top: 0;
        z-index: 3;
        background: #fff;
        padding: 18px 16px 14px;
        border-bottom: 1px solid var(--adarev-rahmen);
        margin: 0;
    }

    /* Griff zum Wegwischen andeuten — auf dem Handy erwartet man ihn */
    .adarev-form__kopf::before {
        content: '';
        position: absolute;
        top: 7px;
        left: 50%;
        transform: translateX(-50%);
        width: 38px;
        height: 4px;
        border-radius: 99px;
        background: #dcdcd8;
    }

    .adarev-form__kopf img { width: 48px; height: 48px; }
    .adarev-form__titel { font-size: 16px; }

    .adarev-rating,
    .adarev-feld,
    .adarev-form__recht,
    .adarev-form__fehler { margin-left: 16px; margin-right: 16px; }

    .adarev-rating { margin-top: 18px; }
    .adarev-feld { margin-top: 14px; }
    .adarev-form__recht { margin-top: 14px; }

    .adarev-star svg { width: 40px; height: 40px; }
    .adarev-form__frage { font-size: 17px; }
    .adarev-stars__enden { font-size: 12px; }

    /* ----------------------------------------------------------------------
       KOMPAKTE FELDER AUF DEM HANDY.

       Gemessen an der Meldung vom 06.08.2026: Nach der Sternwahl war das
       Formular rund 900 px hoch und passte auf keinen Handybildschirm — man
       musste dreimal scrollen, um bis zum Absendeknopf zu kommen.

       Jede Zeile hier spart Höhe, ohne etwas wegzunehmen: kleinere
       Beschriftungen, engere Abstände, ein Textfeld in der Höhe, die man
       tatsächlich zum Losschreiben braucht (es wächst beim Tippen), und
       eine flache Fotofläche statt eines 88-px-Kastens. Zusammen mit dem
       geschrumpften Sternblock passt alles ohne Scrollen.
       ---------------------------------------------------------------------- */
    .adarev-feld { gap: 4px; }
    .adarev-feld label { font-size: 13px; }
    /* Basisregeln stehen auf .adarev-form — hier denselben Selektor
       verwenden, sonst gewinnt die Grundregel. 16px Schriftgröße bleibt:
       darunter zoomt iOS Safari beim Fokus in die Seite hinein. */
    .adarev-form input[type="text"] { min-height: 46px; padding: 9px 12px; }
    .adarev-form textarea { min-height: 78px; padding: 9px 12px; }

    .adarev-drop { min-height: 58px; padding: 10px 14px; gap: 11px; border-radius: 10px; }
    .adarev-drop__ikone { width: 24px; height: 24px; }
    .adarev-drop__text strong { font-size: 14px; }
    .adarev-drop__klein { font-size: 11.5px; }

    .adarev-form__recht { font-size: 11.5px; line-height: 1.45; }
    .adarev-submit { height: 50px; }

    .adarev-submit {
        position: sticky;
        bottom: 0;
        width: auto;
        margin: 14px 16px calc(14px + env(safe-area-inset-bottom));
        /* Der Knopf schwebt über dem scrollenden Inhalt. Ein reiner Verlauf
           nach oben reicht nicht: Der Knopf ist schmaler als das Formular,
           und der Rechtstext lief links und rechts an ihm vorbei durchs Bild
           (gemessen 06.08.2026).
           Erster Schatten: deckendes Weiß bis an beide Ränder, nach unten
           versetzt — so bleibt seine Oberkante im 14-px-Zwischenraum über
           dem Knopf und schneidet das Feld darüber nicht an.
           Zweiter Schatten: weicher Verlauf, der Text erst ausblendet statt
           ihn hart abzuschneiden. */
        box-shadow: 0 10px 0 18px #fff, 0 -6px 12px 8px #fff;
    }

    .adarev-danke { padding: 32px 18px calc(32px + env(safe-area-inset-bottom)); }
}

@keyframes adarev-hoch { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .adarev *,
    .adarev-lightbox { transition: none !important; animation: none !important; }
}