/* HdKD — Kooperationspartner & Förderer im Frontend (v5.287.0).
   Selbst-enthalten und theme-neutral: erbt Schrift und Farben vom Theme,
   setzt nur eigene Abstände, Rahmen und Größen. Alles über Variablen, damit
   ein Theme (oder ihr) einzelne Werte überschreiben kann. */

.hdkd-pf {
    --pf-hoehe: 62px;          /* Kachelhöhe — von .hdkd-pf--klein/--gross überschrieben */
    --pf-breite: 108px;        /* Mindestbreite einer Kachel */
    --pf-rand: #e3e3e3;
    --pf-radius: 9px;
    --pf-luft: 14px;
    --pf-ton: currentColor;
    margin: 26px 0;
}
.hdkd-pf--klein { --pf-hoehe: 46px; --pf-breite: 84px;  --pf-luft: 11px; }
.hdkd-pf--gross { --pf-hoehe: 84px; --pf-breite: 140px; --pf-luft: 18px; }

.hdkd-pf-gruppe + .hdkd-pf-gruppe { margin-top: 22px; }

.hdkd-pf-titel {
    margin: 0 0 12px;
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .65;
}

/* ── Kachel: Logo oder (ohne Logo) der Name ── */
.hdkd-pf-kachel {
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    min-height: var(--pf-hoehe);
    min-width: var(--pf-breite);
    padding: 8px 14px;
    border: 1px solid var(--pf-rand);
    border-radius: var(--pf-radius);
    background: transparent;
    text-decoration: none;
    color: inherit;
    transition: border-color .18s ease, transform .18s ease;
}
a.hdkd-pf-kachel:hover,
a.hdkd-pf-kachel:focus-visible {
    border-color: var(--pf-ton);
    transform: translateY(-1px);
}
a.hdkd-pf-kachel:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
.hdkd-pf-bild {
    display: block;
    max-height: calc(var(--pf-hoehe) - 18px);
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
/* Ohne hinterlegtes Logo: Name im gleich großen Rahmen — die Reihe bleibt ruhig. */
.hdkd-pf-kachel--text { padding: 9px 15px; }
.hdkd-pf-name {
    display: block;
    max-width: 190px;
    font-size: .78em;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    opacity: .8;
}

/* ── A · Logoleiste ── */
.hdkd-pf-reihe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pf-luft);
}

/* ── A2 · Eine gemeinsame Reihe (v5.291.0) ──
   Partner und Förderer stehen nebeneinander statt in zwei Blöcken untereinander,
   und die Logos sind deutlich größer. Umbrechen darf die Reihe trotzdem — sonst
   liefe sie auf schmalen Seiten aus dem Bild. */
.hdkd-pf--einereihe,
.hdkd-pf--reihen { --pf-luft: 26px; }
.hdkd-pf--einereihe.hdkd-pf--gross,
.hdkd-pf--reihen.hdkd-pf--gross     { --pf-hoehe: 104px; --pf-breite: 172px; --pf-luft: 28px; }
.hdkd-pf--einereihe.hdkd-pf--normal,
.hdkd-pf--reihen.hdkd-pf--normal    { --pf-hoehe: 84px;  --pf-breite: 140px; }
.hdkd-pf--reihen .hdkd-pf-reihe { row-gap: 18px; }
.hdkd-pf--einereihe .hdkd-pf-name,
.hdkd-pf--reihen .hdkd-pf-name,
.hdkd-pf--fahnen .hdkd-pf-name { max-width: 240px; font-size: .84em; }

/* ── „Groß + Überschrift" (v5.294.0) ──
   Die beiden Gruppen stehen NEBENEINANDER, jede mit ihrer Überschrift darüber
   — bis v5.293 standen sie untereinander, was sich von der Logoleiste kaum
   unterschied. Passt es nicht in eine Zeile, rutscht die zweite Gruppe samt
   ihrer Überschrift darunter; die Beschriftung bleibt also immer bei ihren
   Logos. */
.hdkd-pf--reihen {
    display: flex;
    flex-wrap: wrap;
    gap: 34px;
    align-items: flex-end;
}
.hdkd-pf--reihen .hdkd-pf-gruppe + .hdkd-pf-gruppe { margin-top: 0; }

/* ── „Eine Reihe + Beschriftung" (v5.294.0) ──
   Eine durchgehende Zeile: Fahne, Logos, nächste Fahne, Logos. */
.hdkd-pf--fahnen,
.hdkd-pf--reihen { --pf-luft: 22px; }
.hdkd-pf--fahnen.hdkd-pf--gross { --pf-hoehe: 96px; --pf-breite: 150px; }
.hdkd-pf--fahnen .hdkd-pf-reihe { flex-wrap: wrap; row-gap: 16px; }
.hdkd-pf-fahne {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    min-height: var(--pf-hoehe);
    width: 92px;
    flex: 0 0 92px;
    padding-right: 13px;
    border-right: 1px solid var(--pf-rand);
    font-size: .66em;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    line-height: 1.35;
    opacity: .62;
}

/* Sehr breite Logos würden die Zeile sprengen — deshalb eine Höchstbreite.
   Die Logos bleiben vollständig sichtbar, nutzen dann aber nicht die volle Höhe. */
.hdkd-pf--reihen .hdkd-pf-kachel,
.hdkd-pf--fahnen .hdkd-pf-kachel,
.hdkd-pf--einereihe .hdkd-pf-kachel { max-width: 190px; }

/* „Große Reihe" bleibt IMMER eine Zeile — bräche sie um, wäre sie von der
   Logoleiste kaum zu unterscheiden. Die Kacheln geben dafür Breite ab; wird
   es trotzdem zu eng (viele Logos, schmales Handy), lässt sich die Reihe
   seitlich wischen, statt die Logos unlesbar zu quetschen. */
.hdkd-pf--einereihe .hdkd-pf-reihe {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.hdkd-pf--einereihe .hdkd-pf-kachel {
    flex: 0 1 auto;
    /* Ohne das greift die Mindestbreite der Kachel und verhindert das Schrumpfen. */
    min-width: 92px;
    /* Feste Höhe: Eine Kachel mit langem Namen würde sonst wachsen, und die
       Reihe sähe aus wie zwei Zeilen — genau das soll hier nicht passieren. */
    height: var(--pf-hoehe);
    min-height: 0;
    overflow: hidden;
}
.hdkd-pf--einereihe .hdkd-pf-bild { max-width: 100%; }
/* Lange Namen ohne Logo: lieber drei Zeilen und dann kürzen als die Reihe sprengen. */
.hdkd-pf--einereihe .hdkd-pf-name {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 600px) {
    /* Am Handy zuerst verkleinern — erst danach greift das Wischen. */
    .hdkd-pf--einereihe.hdkd-pf--gross,
    .hdkd-pf--reihen.hdkd-pf--gross { --pf-hoehe: 78px; --pf-breite: 130px; --pf-luft: 16px; }
    .hdkd-pf--einereihe .hdkd-pf-kachel { min-width: 76px; }
}

/* ── B · Logo mit Namen darunter ── */
.hdkd-pf-karten {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--pf-luft) + 4px);
}
.hdkd-pf-karte {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: calc(var(--pf-breite) + 26px);
    text-align: center;
}
.hdkd-pf-karte .hdkd-pf-kachel { width: 100%; }
.hdkd-pf-kname {
    font-size: .72em;
    line-height: 1.35;
    opacity: .7;
}

/* ── C · Eine Zeile im Fließtext ── */
.hdkd-pf--zeile { margin: 18px 0; }
.hdkd-pf--zeile .hdkd-pf-gruppe { display: inline; }
.hdkd-pf-satz {
    display: inline;
    font-size: .85em;
    line-height: 2.1;
    opacity: .85;
}
.hdkd-pf-satz + .hdkd-pf-satz::before {
    content: "·";
    margin: 0 .5em;
    opacity: .5;
}
.hdkd-pf-satz b { font-weight: 700; opacity: 1; }
.hdkd-pf-mini {
    min-height: 28px;
    min-width: 46px;
    padding: 3px 7px;
    margin: 0 .18em 0 .4em;
    border-radius: 5px;
    vertical-align: middle;
}
.hdkd-pf-mini .hdkd-pf-bild { max-height: 20px; }
.hdkd-pf-mini .hdkd-pf-name { font-size: .68em; max-width: 120px; }
.hdkd-pf-zname { vertical-align: middle; }
.hdkd-pf-trenn { opacity: .55; }

/* ── Handy: nie schmaler als lesbar, nie über den Rand ── */
@media (max-width: 480px) {
    .hdkd-pf { --pf-hoehe: 52px; --pf-breite: 92px; --pf-luft: 10px; }
    .hdkd-pf-karte { width: calc(50% - 8px); }
    .hdkd-pf-name { max-width: 140px; }
}

/* Dunkle Themes: der Rahmen darf nicht schwarz auf schwarz stehen. */
@media (prefers-color-scheme: dark) {
    .hdkd-pf { --pf-rand: rgba(255, 255, 255, .22); }
}

@media (prefers-reduced-motion: reduce) {
    .hdkd-pf-kachel { transition: none; }
    a.hdkd-pf-kachel:hover { transform: none; }
}