/*
 * Katalogpartner - der Hinweisblock auf der Laender-Landingpage.
 *
 * Grosse Schwester von katalogquelle.css: derselbe Gedanke, aber einmal
 * pro Land statt einmal pro Standort, und deshalb mit mehr Raum. Er
 * erscheint nur, wenn die Standorte eines Landes aus einem Fremdkatalog
 * stammen (automaten.extern_quelle).
 *
 * EIGENE DATEI, KEINE TAILWIND-UTILITIES - tailwind.css ist ein
 * gepurgter Build ausserhalb von Git, neue Klassen fehlen auf DEV.
 *
 * GESTALTUNG: Elongando hat um Sichtbarkeit gebeten, "vielleicht wie ein
 * Anzeigenkunde". Trotzdem bewusst KEINE Bannerwerbung - es ist eine
 * Danksagung an einen Partner, kein verkaufter Platz. Ruhige Flaeche,
 * grosse Zahl als Blickfang, die Farbkante als einziges Zitat der
 * spanischen Flagge.
 */

.cq-partnerquelle {
    --cq-pq-a: #c8102e;
    --cq-pq-b: #f0b323;

    position: relative;
    margin: 2rem 0;
    padding: 1.4rem 1.5rem 1.5rem;
    background:
        radial-gradient(120% 140% at 0% 0%, #fffaf0 0%, #fffdf9 55%, #ffffff 100%);
    border: 1px solid #efe5d2;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(40, 33, 20, 0.04),
                0 16px 40px -28px rgba(120, 80, 20, 0.45);
    overflow: hidden;
}

.cq-partnerquelle::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--cq-pq-a) 0%, var(--cq-pq-b) 100%);
}

.cq-partnerquelle__label {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9a8460;
    margin-bottom: 0.55rem;
}

.cq-partnerquelle__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.cq-partnerquelle__marke {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #2f2a22;
    line-height: 1.1;
}

/* Die Zahl der beigesteuerten Standorte ist das eigentliche Argument -
   sie sagt mehr ueber den Beitrag als jeder Werbesatz. */
.cq-partnerquelle__zahl {
    font-size: 0.85rem;
    font-weight: 600;
    color: #8a7550;
    background: #fff;
    border: 1px solid #ecdfc4;
    border-radius: 999px;
    padding: 0.18rem 0.65rem;
}

.cq-partnerquelle__text {
    margin: 0;
    max-width: 62ch;
    font-size: 0.97rem;
    line-height: 1.6;
    color: #4a4237;
}

.cq-partnerquelle__fuss {
    margin-top: 1rem;
}

.cq-partnerquelle__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cq-pq-a), #d8452c);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 16px -8px rgba(200, 16, 46, 0.7);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cq-partnerquelle__link:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px rgba(200, 16, 46, 0.75);
}

.cq-partnerquelle__link::after {
    content: "\2197";
    font-weight: 400;
}

@media (max-width: 480px) {
    .cq-partnerquelle {
        padding: 1.1rem 1.05rem 1.2rem;
    }
    .cq-partnerquelle__marke {
        font-size: 1.25rem;
    }
    .cq-partnerquelle__text {
        font-size: 0.92rem;
    }
}

/* ------------------------------------------------------------------
 * Partner-Abzeichen am Avatar
 *
 * Erscheint bei Konten mit users.is_partner = 1 - als Anerkennung, nicht
 * als Berechtigung. Sichtbar ist es fuer den Angemeldeten selbst; die
 * Ecken des Avatars sind sonst schon belegt (Rang oben links, Punkte
 * unten rechts, Ungelesenes oben rechts), also sitzt es unten links.
 *
 * Die Positionierung steht BEWUSST hier und nicht als Tailwind-Klassen
 * im Template: `-bottom-1` kommt im gepurgten Build nicht vor
 * (nachgesehen in assets/css/tailwind.css - dort gibt es nur
 * `-bottom-2`). Das Abzeichen saesse damit auf DEV an der falschen
 * Stelle, ohne Fehlermeldung.
 * ------------------------------------------------------------------ */

.cq-partnerabzeichen {
    position: absolute;
    bottom: -0.2rem;
    left: -0.2rem;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;

    background: linear-gradient(135deg, #f0b323, #d98c12);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);

    font-size: 0.62rem;
    line-height: 1;
    cursor: default;
    user-select: none;
}

/* Mit Landesflagge: eine eigene SVG-Grafik aus assets/img/flaggen/.
   Kein Flaggen-Emoji - Windows bringt dafuer keine Glyphen mit, Chrome
   und Edge zeigen dort die blossen Buchstaben ("ES"), was nach einem
   Fehler aussieht. Die Grafik traegt die Farbe, der goldene Hintergrund
   stoerte dabei nur; das Weiss ist nur der schmale Rand. */
.cq-partnerabzeichen--flagge {
    width: 1.3rem;
    height: 0.95rem;
    border-radius: 0.25rem;
    background: #fff;
    padding: 0;
    overflow: hidden;
}

.cq-partnerabzeichen--flagge img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}