/*
 * CTA Button – im Design-Export der „Störer": breite Fläche mit Bild,
 * Blauverlauf darüber, Kennzeichen, Zeile, Titel und rechts der orange
 * Pfeilknopf.
 *
 * Alle Werte hier stehen 1:1 im Export. Bis hierher war das eine quadratische
 * Kachel mit Icon über dem Text und einem kleinen Pfeil in der Ecke — diese
 * Form gab es im Design nirgends, sie war unsere Erfindung.
 *
 * Der Klassenname `spo-box` bleibt: er steht im Design-Export und in jedem
 * gespeicherten Menü.
 *
 * Teil des Design-Stylesheets. Die Reihenfolge der Dateien steht in
 * MenuStylesheets — Kaskade heißt, dass sie zählt.
 */

/*
 * Design: min-height 123px, Grundfarbe #0f5563, Rundung 8px, Innenabstand
 * 15px oben/unten, 16px links — und 62px rechts, damit der Pfeilknopf seinen
 * Platz behält und der Text nicht darunter läuft.
 *
 * `.spo-tile` trägt diese Fläche nicht mehr: dessen aspect-ratio 1 machte sie
 * quadratisch, und der Text stand mittig statt links.
 */
.spo-box {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 123px;
    border-radius: 8px;
    overflow: hidden;
    --spo-box-padding: 15px 62px 15px 16px;
    --spo-box-bg: #0f5563;
    --spo-box-shadow: 0 6px 18px rgba(10, 60, 80, .28);
    padding: var(--spo-box-padding);
    background: var(--spo-box-bg);
    box-shadow: var(--spo-box-shadow);
    opacity: var(--spo-box-opacity, 1);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

/* Design: eigene Lage über der Grundfarbe, cover/center */
.spo-box-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

/*
 * Design: linear-gradient(90deg, #003C6ED9, #B9C8DA8C) – waagerecht, von
 * Dunkelblau mit 85 % nach Hellblau mit 55 %. Als rgba geschrieben, weil die
 * achtstellige Hex-Schreibweise dasselbe meint und schlechter zu lesen ist.
 */
.spo-box-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 60, 110, .85), rgba(185, 200, 218, .55));
}

/* Über den beiden Lagen; im Design das `position: relative` um den Text */
.spo-box-text {
    position: relative;
}

/* Design: Kennzeichen und Zeile nebeneinander, Abstand 8px */
.spo-box-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

/*
 * Design: weiß mit 92 %, Schrift in der Grundfarbe der Fläche, 10px/800, weit
 * gesperrt.
 */
.spo-box-badge {
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .92);
    color: #0f5563;
    font-size: calc(10px - var(--spo-text-shrink));
    font-weight: 800;
    letter-spacing: .08em;
}

/* Design: 11.5px/600, weiß */
.spo-box-note {
    color: #fff;
    font-size: calc(11.5px - var(--spo-text-shrink));
    font-weight: 600;
}

/* Design: 16.5px/500, 7px unter der Zeile, leicht enger gesetzt */
.spo-box-title {
    display: block;
    margin-top: 7px;
    color: #fff;
    /* 16.5px auf dem Schreibtisch, 16px auf dem Telefon (tokens.css) */
    font-size: var(--spo-text-box-title);
    font-weight: 500;
    letter-spacing: -.01em;
}

/*
 * Design: Kreis 34px, 14px vom rechten Rand, senkrecht mittig, orange mit
 * blauem Pfeil.
 */
.spo-box-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--spo-orange);
    color: var(--spo-blue-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.spo-box--hidden {
    outline: 1px dashed rgba(255, 255, 255, .6);
    --spo-box-opacity: .4;
}

/*
 * Zeiger und Fokus ändern die Fläche nicht — dieselbe Sperre wie bei der Kachel
 * (50-grid.css), samt Anlass: `a:focus { padding: 0; border: 2px solid … }` in
 * der Zielumgebung. Ohne sie verliert die Fläche im Fokus ihre 15/62/16px und
 * das Bild darin seinen Platz.
 */
.spo-box:hover:not(:focus-visible),
.spo-box:focus:not(:focus-visible) {
    background: var(--spo-box-bg) !important;
    box-shadow: var(--spo-box-shadow) !important;
    opacity: var(--spo-box-opacity, 1) !important;
    color: #fff !important;
    text-decoration: none !important;
    transform: none !important;
    filter: none !important;
}

.spo-box:hover,
.spo-box:focus {
    padding: var(--spo-box-padding) !important;
    border: 0 !important;
    white-space: normal !important;
}