/* SCF Partner – Frontend-Styles v1.0.0
   ───────────────────────────────────────────────────────────
   Spendentafel, Partnerwand, Paketübersicht.
   Kachelfarben kommen pro Kachel als CSS-Variablen aus PHP,
   die Textfarbe wird serverseitig nach Helligkeit berechnet.
   Schriften wie im übrigen Auftritt: Saira Stencil / Semi Condensed.
   ─────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════
   SPENDENTAFEL ([scf_spendentafel])
   Feste Tafel mit durchnummerierten Feldern. Freie Felder zeigen
   ihre Nummer, gekaufte den Namen und belegen 1–6 Felder.
   ══════════════════════════════════════════════════════════ */
.scf-tafel {
    display: grid;
    grid-template-columns: repeat(var(--tafel-spalten, 8), minmax(0, 1fr));
    gap: clamp(4px, 0.5vw, 8px);
    padding: clamp(8px, 1vw, 14px);
    background: #0a0a0a;
}

.scf-kachel {
    container-type: inline-size;
    grid-column: span var(--kachel-span, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    aspect-ratio: calc(var(--kachel-span, 1) * 1.25) / 1;
    padding: clamp(6px, 4cqw, 14px);
    text-align: center;
    text-decoration: none;
    overflow: hidden;
}

/* ── Belegtes Feld ── */
.scf-kachel-belegt {
    background: var(--kachel-bg, #006ead);
    color: var(--kachel-text, #ffffff);
    transition: transform .2s ease, box-shadow .2s ease;
}

a.scf-kachel-belegt:hover {
    transform: scale(1.04);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    z-index: 2;
}

.scf-kachel-logobox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 55%;
    min-height: 0;
}

.scf-kachel-logo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.scf-kachel-text { display: block; max-width: 100%; }

.scf-kachel-name {
    display: block;
    font-family: 'Saira Stencil', sans-serif;
    font-weight: 700;
    font-size: clamp(11px, 11cqw, 22px);
    line-height: 1.05;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Mit Logo tritt der Name zurück */
.scf-kachel-mit-logo .scf-kachel-name {
    font-size: clamp(10px, 7cqw, 15px);
    font-family: 'Saira Semi Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: .04em;
}

.scf-kachel-zusatz {
    display: block;
    margin-top: 3px;
    font-family: 'Saira Semi Condensed', sans-serif;
    font-size: clamp(9px, 5.5cqw, 14px);
    font-weight: 600;
    line-height: 1.25;
    color: var(--kachel-text-schwach, rgba(255, 255, 255, .72));
}

/* ── Freies Feld ── */
.scf-kachel-frei {
    background: #e8e5de;
    color: #6b6b6b;
    transition: background-color .2s, color .2s;
}

.scf-kachel-nummer {
    font-family: 'Saira Stencil', sans-serif;
    font-weight: 900;
    font-size: clamp(13px, 26cqw, 30px);
    line-height: 1;
    color: #0a0a0a;
    opacity: .55;
}

.scf-kachel-frei-text {
    font-family: 'Saira Semi Condensed', sans-serif;
    font-size: clamp(8px, 9cqw, 12px);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .2s;
}

a.scf-kachel-frei:hover {
    background: #006ead;
    color: #ffffff;
}

a.scf-kachel-frei:hover .scf-kachel-nummer { color: #ffffff; opacity: .35; }
a.scf-kachel-frei:hover .scf-kachel-frei-text { opacity: 1; }

/* ══════════════════════════════════════════════════════════
   PARTNERWAND ([scf_partner])
   ══════════════════════════════════════════════════════════ */
.scf-partnerwand {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: clamp(12px, 2vw, 28px);
    align-items: center;
}

.scf-partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: #ffffff;
    min-height: 90px;
}

.scf-partner-logo img {
    max-width: 100%;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .75;
    transition: filter .25s, opacity .25s;
}

a.scf-partner-logo:hover img { filter: none; opacity: 1; }

/* ══════════════════════════════════════════════════════════
   PAKETE ([scf_pakete])
   ══════════════════════════════════════════════════════════ */
.scf-pakete {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(10px, 1.6vw, 22px);
}

.scf-paket {
    display: flex;
    flex-direction: column;

    border-top: 6px solid #006ead;
    padding: 2%;
}

.scf-paket-sichtbarkeit { border-top-color: #00a5ad; }
.scf-paket-premium      { border-top-color: #00ad5c; }

.scf-paket-name {
    font-family: 'Saira Stencil', sans-serif;
    font-weight: 700;
    font-size: clamp(1.05rem, 2.2vw, 1.4rem);
    line-height: 1.1;
    text-transform: uppercase;
    color: #0a0a0a;
    margin: 0 0 4px;
}

.scf-paket-preis {
    font-family: 'Saira Stencil', sans-serif;
    font-weight: 900;
    font-size: clamp(34px, 3.4vw, 46px);
    line-height: 1;
    color: #006ead;
    margin: 0 0 18px;
}

.scf-paket-sichtbarkeit .scf-paket-preis { color: #00a5ad; }
.scf-paket-premium      .scf-paket-preis { color: #00ad5c; }

.scf-paket-liste {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    font-family: 'Saira Semi Condensed', sans-serif;
    font-size: clamp(15px, 1.2vw, 17px);
}

.scf-paket-liste li {
    padding: 7px 0 7px 24px;
    border-bottom: 1px solid #d9d5cc;
    position: relative;
}

.scf-paket-liste li::before {
    content: '✓';
    position: absolute;
    left: 0;
    font-weight: 700;
    color: #00ad5c;
}

.scf-paket-liste li.scf-paket-ohne { color: #6b6b6b; }
.scf-paket-liste li.scf-paket-ohne::before { content: '–'; color: #d9d5cc; }

.scf-paket-cta {
    margin-top: auto;
    align-self: flex-start;
    display: inline-block;
    padding: 12px 24px;
    background: #0a0a0a;
    color: #ffffff;
    font-family: 'Saira Semi Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(14px, 1.1vw, 16px);
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .2s;
}

.scf-paket-cta:hover { background: #2a2a2a; color: #ffffff; }

/* ══════════════════════════════════════════════════════════
   RESPONSIV
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .scf-tafel { grid-template-columns: repeat(min(var(--tafel-spalten, 8), 6), minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .scf-tafel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .scf-kachel { aspect-ratio: calc(var(--kachel-span, 1) * 1.1) / 1; }
    .scf-partnerwand { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .scf-kachel,
    .scf-partner-logo img { transition: none; }
    a.scf-kachel-belegt:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════
   WOOCOMMERCE – Kachelfelder auf der Produktseite
   ══════════════════════════════════════════════════════════ */
.scf-kachel-felder {
    margin: 0 0 24px;
    padding: 18px 20px;
    background: #f5f3ee;
    border-left: 4px solid #006ead;
}

.scf-kachel-felder .form-row { margin: 0 0 14px; }
.scf-kachel-felder .form-row:last-of-type { margin-bottom: 0; }

.scf-kachel-felder label {
    display: block;
    margin-bottom: 4px;
    font-family: 'Saira Semi Condensed', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #0a0a0a;
}

.scf-kachel-felder input[type="text"],
.scf-kachel-felder input[type="url"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d9d5cc;
    background: #ffffff;
}

.scf-kachel-felder input[type="color"] {
    width: 64px;
    height: 40px;
    padding: 2px;
    border: 1px solid #d9d5cc;
    background: #ffffff;
    cursor: pointer;
}

.scf-logo-hinweis {
    margin: 14px 0 0;
    font-size: 14px;
    color: #6b6b6b;
}

/* ══════════════════════════════════════════════════════════
   FESTE SPONSOREN ([scf_sponsoren])
   Stufen bestimmen die Größe: Hauptsponsor groß und allein,
   darunter die kleineren Stufen.
   ══════════════════════════════════════════════════════════ */
.scf-sponsoren {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 4vw, 52px);
}

.scf-stufe-titel {
    font-family: 'Saira Semi Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(14px, 1.2vw, 16px);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6b6b6b;
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #d9d5cc;
}

.scf-sponsor-liste {
    display: grid;
    gap: clamp(10px, 1.6vw, 22px);
    align-items: stretch;
}

/* Größe je Stufe */
.scf-stufe-haupt   .scf-sponsor-liste { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.scf-stufe-premium .scf-sponsor-liste { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.scf-stufe-partner .scf-sponsor-liste,
.scf-stufe-foerder .scf-sponsor-liste { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

.scf-sponsor {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(16px, 2vw, 28px);
    background: #ffffff;
    border: 1px solid #d9d5cc;
    text-decoration: none;
    color: #0a0a0a;
    transition: border-color .2s, box-shadow .2s;
}

a.scf-sponsor:hover {
    border-color: #0a0a0a;
    box-shadow: 0 8px 24px rgba(10, 10, 10, .12);
}

.scf-sponsor-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70px;
    flex: 1;
}

.scf-stufe-haupt .scf-sponsor-logo { min-height: 130px; }

.scf-sponsor-logo img {
    max-width: 100%;
    max-height: 110px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.scf-stufe-haupt .scf-sponsor-logo img { max-height: 170px; }

/* Kein Logo: Name als Ersatz */
.scf-sponsor-name {
    font-family: 'Saira Stencil', sans-serif;
    font-weight: 700;
    font-size: clamp(17px, 1.6vw, 24px);
    line-height: 1.1;
    text-transform: uppercase;
    text-align: center;
    color: #0a0a0a;
}

.scf-sponsor-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid #d9d5cc;
    padding-top: 12px;
}

.scf-sponsor-titel {
    font-family: 'Saira Stencil', sans-serif;
    font-weight: 700;
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.15;
    text-transform: uppercase;
}

.scf-sponsor-seit {
    font-family: 'Saira Semi Condensed', sans-serif;
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #006ead;
}

.scf-sponsor-beschreibung {
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.6;
    color: #2a2a2a;
}

@media (max-width: 640px) {
    .scf-stufe-haupt .scf-sponsor-liste { grid-template-columns: 1fr; }
    .scf-stufe-partner .scf-sponsor-liste,
    .scf-stufe-foerder .scf-sponsor-liste { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}