/* NovaCMS – Boxen
   ------------------------------------------------------------------
   Das Aussehen aller Boxen im Frontend: Panel mit abgerundeten Ecken und
   einem Titelschild, das mittig auf dem oberen Rand sitzt.

   Die Farben kommen aus dem installierten Theme. Gesucht wird der Reihe
   nach nach den Variablen der Radio-Themes (--rs-…), denen des
   Standard-Themes (--…) und zuletzt einem neutralen Wert. Ein selbst
   gebautes Theme braucht deshalb keine bestimmten Variablennamen: Ohne
   Treffer erbt die Schrift ihre Farbe, Flächen bleiben durchsichtig und
   Linien sind ein neutrales Grau.

   Diese Datei wird nach dem Theme geladen und vor dem eigenen CSS aus
   „Design → Eigenes CSS" – eigene Regeln haben also weiterhin Vorrang.
   ------------------------------------------------------------------ */

.nova-box {
    --nb-surface:  var(--rs-surface, var(--surface, transparent));
    --nb-surface-2: var(--rs-surface-2, var(--surface-2, rgba(128, 128, 128, .10)));
    --nb-frame:    var(--rs-frame, var(--nb-surface));
    --nb-line:     var(--rs-line, var(--line, rgba(128, 128, 128, .30)));
    --nb-line-soft: var(--rs-line-soft, rgba(128, 128, 128, .18));
    --nb-text:     var(--rs-text, var(--text, inherit));
    --nb-soft:     var(--rs-text-soft, var(--text-soft, rgba(128, 128, 128, .95)));
    --nb-accent:   var(--rs-accent, var(--accent, #3b6fff));
    --nb-radius:   var(--rs-radius-lg, var(--radius, 14px));
    --nb-radius-sm: var(--rs-radius, var(--radius-sm, 9px));
    --nb-shadow:   var(--rs-shadow-sm, var(--shadow, 0 10px 28px rgba(0, 0, 0, .14)));

    --nb-pill-bg: var(--rs-surface, var(--surface, rgba(128, 128, 128, .22)));

    --nb-open:  #2fbf71;
    --nb-taken: #e0544a;

    position: relative;
    margin-top: 14px;
    padding: 26px 16px 16px;
    border: 1px solid var(--nb-line);
    border-radius: var(--nb-radius);
    background-color: var(--nb-surface);
    background-image: var(--rs-img-box-body, none);
    background-repeat: var(--rs-img-box-body-repeat, no-repeat);
    background-position: var(--rs-img-box-body-position, bottom center);
    background-size: var(--rs-img-box-body-size, 100% 100%);
    box-shadow: var(--nb-shadow);
    color: var(--nb-text);
    overflow: visible;
}

/* Die erste Box einer Spalte braucht oben keinen zusätzlichen Abstand,
   das Titelschild darf trotzdem überstehen. */
.nova-sidebar > .nova-box:first-child,
.nova-boxes > .nova-box:first-child { margin-top: 14px; }

/* ------------------------------------------------------------ Titelschild */

.nova-box-title {
    display: block;
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 1;
    background: none;
    border: 0;
    font-size: inherit;
}

/* Dekoration älterer Themes vor dem Titel entfällt – das Schild steht für sich. */
.nova-box-title::before,
.nova-box-title::after { content: none; }

.nova-box-title > span {
    display: inline-block;
    max-width: 100%;
    padding: 7px 18px;
    border: 1px solid var(--nb-line);
    border-radius: 999px;
    background: var(--nb-pill-bg);
    color: var(--nb-accent);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .10);
}

/* Boxen ohne Titel brauchen den Platz oben nicht. */
.nova-box.is-untitled { padding-top: 16px; margin-top: 0; }

/* Der Innenabstand kommt von der Box – so sitzt der Inhalt in jedem Theme gleich. */
.nova-box-body { padding: 0; }
.nova-box-body > *:first-child { margin-top: 0; }
.nova-box-body > *:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- Zeilen mit Wert */

.nova-box-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nova-box-rows > li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 2px;
    font-size: .9rem;
}

.nova-box-rows > li + li { border-top: 1px solid var(--nb-line-soft); }

.nova-box-rows .nova-box-label {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--nb-text);
}

.nova-box-rows .nova-box-value {
    flex: 0 0 auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.nova-box-rows > li.is-soft .nova-box-label,
.nova-box-rows > li.is-soft .nova-box-value { color: var(--nb-soft); font-weight: 600; }

.nova-box-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    color: var(--nb-accent);
    opacity: .9;
}

/* Gleiches Aussehen für den alten Besucherzähler */
.nova-stats-box {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nova-stats-box > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 2px;
    font-size: .9rem;
}

.nova-stats-box > li + li { border-top: 1px solid var(--nb-line-soft); }
.nova-stats-box strong { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- Listen */

.nova-box-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nova-box-list > li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: .92rem;
}

.nova-box-list > li::before {
    content: "";
    flex: 0 0 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--nb-accent);
    transform: translateY(-2px);
}

.nova-box-list a { color: var(--nb-accent); text-decoration: none; }
.nova-box-list a:hover { text-decoration: underline; }

.nova-box-note {
    margin: 10px 0 0;
    font-size: .9rem;
    color: var(--nb-soft);
}

.nova-box-note strong,
.nova-box-note a { color: var(--nb-accent); font-weight: 600; text-decoration: none; }
.nova-box-note a:hover { text-decoration: underline; }

.nova-box-empty {
    margin: 8px 0 0;
    font-size: .9rem;
    color: var(--nb-soft);
}

/* --------------------------------------------------- Link am Boxenfuß */

.nova-box-more {
    display: block;
    margin: 14px 0 0;
    text-align: center;
    color: var(--nb-accent);
    font-size: .92rem;
    font-weight: 700;
    text-decoration: none;
}

.nova-box-more:hover { text-decoration: underline; }

/* --------------------------------------------------------- Wir suchen */

.nova-team {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nova-team > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
}

.nova-team-post {
    flex: 1 1 auto;
    min-width: 40%;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
}

.nova-pill {
    flex: 0 0 auto;
    padding: 4px 12px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.nova-pill-open { color: var(--nb-open); }
.nova-pill-taken { color: var(--nb-taken); }

/* ------------------------------------------------ Menüs und Seitenlisten */

.nova-box .nova-menu,
.nova-box .nova-pagelist {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ------------------------------------------------------------- Formulare */

.nova-box .nova-login-form,
.nova-box .nova-search-form { gap: 9px; }

.nova-box .nova-btn { width: 100%; }

/* In schmalen Spalten rutscht die Plakette unter den Posten. */
@media (max-width: 520px) {
    .nova-box-title > span { letter-spacing: .06em; }
}