/* ─────────────────────────────────────────────────────────────────────────────
   SPOTS – Listenansicht & Detailseite
   /assets/css/spots.css
   ───────────────────────────────────────────────────────────────────────────── */

/* Kein eigenes :root mehr hier – alle Variablen sind in spoliday.css:root
   definiert. spots.css lädt immer NACH spoliday.css, daher hier keine
   Neudeklaration – bei neuen, wirklich spots-spezifischen Variablen: in
   spoliday.css:root ergänzen, nicht hier ein neues :root aufmachen. */

/* ── Seiten-Hintergrund Listenansicht ──────────────────────────────────────── */
body.page-spots {
    background-color: #f0f5f8;
}

/* ── Spots Hero ────────────────────────────────────────────────────────────── */
.spots-hero {
    background: linear-gradient(135deg, #e4eef5 0%, #dceaf3 100%);
    border-bottom: 1px solid #cfe0eb;
}
.spots-hero-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--sp-dark);
}
.spots-hero-sub { font-size: .95rem; }

/* ── Sport-Tabs Bar ────────────────────────────────────────────────────────── */
.sport-tabs-bar { z-index: 100; }
.sticky-sport-tabs { position: sticky; top: 60px; }

.sport-tab {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: .4rem .85rem;
    border-radius: 20px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--sp-dark);
    text-decoration: none;
    transition: background var(--sp-transition), color var(--sp-transition);
    border: 1.5px solid transparent;
}
/* Gleiches Zustands-Konzept wie im Hauptmenü: Hover = volle Primary-Farbe
   (kräftiges Signal), aktive Kategorie = helle Hinterlegung (dezent). */
.sport-tab:hover,
.sport-tab.active:hover { background: var(--sp-primary); color: #fff; text-decoration: none; }
/* Aktiv: exakt wie im Hauptmenü – helle Hinterlegung, KEIN Rand
   (der Rand stand schon immer im Code, war auf blauem Grund nur unsichtbar) */
.sport-tab.active  { background: var(--sp-primary-light); color: var(--sp-primary); border-color: transparent; }

.sport-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    border-radius: 10px;
    font-size: .7rem;
    font-weight: 700;
    margin-left: .4rem;
    /* Einheitlich in ALLEN Zuständen: Secondary (Braun) mit Weiß –
       Farbkonzept: Braun = Akzent. Keine zustandsabhängigen Sonderregeln. */
    background: var(--sp-secondary-90);
    color: #fff;
}

.active .sport-tab-count{
    background: var(--sp-secondary);
}

.sport-tab:hover .sport-tab-count{
    background: #fff;
    color: var(--sp-dark);
}

/* ── Filter Sidebar ────────────────────────────────────────────────────────── */
.filter-sidebar {
    background: #fff;
    border: 1px solid #e4ecf0;
    border-radius: var(--sp-radius);
    padding: 1.25rem;
    /* KEIN position:sticky – der Filter scrollt auf allen Seiten normal
       mit (Referenz: Betriebe-Seite; das Sticky erzeugte auf der Jobs-Seite
       Überlagerungen mit der Benachrichtigungs-Leiste). */
}
.filter-group { margin-bottom: 1.25rem; }
.filter-group:last-child { margin-bottom: 0; }

.filter-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8899a6;
    margin-bottom: .6rem;
    display: block;
}

/* Länder-Einträge – klarer aktiver Zustand */
.filter-option {
    padding: .18rem 0;
}
.filter-option a {
    display: block;
    padding: .3rem .6rem;
    border-radius: 6px;
    color: var(--sp-dark);
    text-decoration: none;
    font-size: .875rem;
    transition: background var(--sp-transition), color var(--sp-transition);
}
/* Zustände wie überall sonst (Hauptnav, Kategorie-Pills): Hover = volle
   Primary-Farbe mit weißem Text (kräftiges Signal), aktiv = helle
   Hinterlegung mit Primary-Text (dezent). War vorher vertauscht. */
.filter-option a:hover {
    background: var(--sp-primary);
    color: #fff;
}
.filter-option.active a {
    background: var(--sp-primary-light);
    color: var(--sp-primary);
    font-weight: 600;
}
.filter-option.active a:hover {
    background: var(--sp-primary);
    color: #fff;
}

/* ── Spots-Cards-Grid: Card-Breite begrenzen ───────────────────────────────── */
.spots-cards-grid > .col {
    display: flex;
    justify-content: center;
}
.spots-cards-grid > .col > .spot-card-link {
    width: 100%;
    max-width: 24rem;
}

/* ── Link-Card: EINE Komponente für alle Karten, die als Ganzes ein Link sind
   (.spot-card, .job-card, .story-mini-card – Klasse .sp-link-card in der View).
   Normal: dünner Primary-Rand mit Transparenz (Blau = interaktiv, aber dezent).
   Hover: voller Primary-Rand + Lift + dezenter Schatten (Zustands-Matrix:
   Hover = volle Farbe). Statische Cards nutzen .sp-static-card (spoliday.css)
   und haben KEINEN Hover – Erhebung ist Link-Cards vorbehalten. ───────────── */
.sp-link-card {
    background: #fff;
    border: 1px solid var(--sp-primary-40);
    border-radius: var(--sp-radius);
    transition: transform var(--sp-transition),
                box-shadow var(--sp-transition),
                border-color var(--sp-transition);
}
/* Hover-Trigger auf dem LINK-Wrapper, nicht auf der Card selbst: Die Card
   bewegt sich beim Lift unter dem Zeiger weg - laege der Hover auf ihr,
   entsteht am unteren Rand eine Flacker-Schleife (anheben, Hover weg,
   zurueckfallen, Hover wieder da). Die Layout-Box des Wrappers bleibt beim
   Transform stehen = stabiler Hover. a.sp-link-card:hover deckt Cards ab,
   die selbst der Link sind (story-mini-card, job-list-item). */
a:hover > .sp-link-card,
a.sp-link-card:hover {
    transform: translateY(-4px);
    border-color: var(--sp-primary);
    box-shadow: 0 6px 16px rgba(35, 45, 51, .10);
}

/* Modifier fuer kompakte/flache Link-Cards (z.B. Sportarten-Cards Home,
   ~72px hoch): 4px Lift wirkt dort proportional 5x so stark wie bei hohen
   Cards - halber Lift, identisches Timing/Easing = gleiches Gleiten. */
a:hover > .sp-link-card--compact,
a.sp-link-card--compact:hover {
    transform: translateY(-2px);
}

/* ── Spot-Karte (Optik & Hover: .sp-link-card) ─────────────────────────────── */
.spot-card-link { color: inherit; }

.spot-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Premium-Betrieb: brauner Glow von unten statt braunem Rand.
   Braun = Highlight, Blau bleibt dem Interaktions-Rand vorbehalten. */
.spot-card--premium {
    position: relative;
}
.spot-card--premium::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(0deg, var(--sp-glow), transparent 45%);
}

/* Logo-Bereich: quadratisch, zentriert, heller Hintergrund */
.spot-card-logo-wrap {
    position: relative;
    height: 190px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid #edf2f5;
    padding: 1.25rem;
}
.spot-card-logo {
    max-width: 70%;
    max-height: 110px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .35s ease;
}
.spot-card-link:hover .spot-card-logo { transform: scale(1.05); }

/* Premium-Badge: blau */
.spot-badge-premium {
    position: absolute;
    top: .6rem;
    right: .6rem;
    background: var(--sp-secondary);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: .2rem .6rem;
    border-radius: 20px;
}

/* Card Body: flex-grow damit alle Cards gleich hoch werden */
.spot-card-body {
    padding: 1.1rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    background-color: #f8f9fa;
    margin-bottom: 0;
}

.spot-card-sport-tag {
    display: inline-flex;
    align-items: center;
    font-size: .72rem;
    font-weight: 700;
    color: var(--sp-primary);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .4rem;
}

.spot-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sp-dark);
    margin-bottom: .25rem;
    line-height: 1.3;
}

.spot-card-location {
    font-size: .8rem;
    color: #7a8c96;
    margin-bottom: .5rem;
}

/* Slogan: feste Höhe, gleiche Zeilenzahl auf allen Cards */
.spot-card-slogan {
    font-size: .85rem;
    color: #5a6872;
    font-style: italic;
    line-height: 1.45;
    min-height: 2.5em;   /* Platz für 2 Zeilen auch wenn leer */
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Spacer drückt Footer nach unten */
.spot-card-spacer { flex: 1; }

/* Card Footer */
.spot-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem 1rem .75rem;
    border-top: 1px solid #e8edf0;
    background-color: #fff;
    border-radius: 0 0 var(--sp-radius, .75rem) var(--sp-radius, .75rem);
}
/* Wrapper für die Footer-Badges links (offene Stellen + Stories) - ersetzt
   den vorherigen leeren <span></span>-Platzhalter; funktioniert mit
   .spot-card-footer's justify-content:space-between auch leer (0 Badges),
   der Pfeil rechts bleibt dadurch weiterhin korrekt positioniert. */
.spot-card-footer-badges {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.spot-card-jobs,
.spot-card-stories {
    font-size: .78rem;
    color: #6c757d;
    font-weight: 600;
}
.spot-card-jobs-empty { display: block; }
.spot-card-arrow {
    color: #b0bec5;
    transition: color var(--sp-transition), transform var(--sp-transition);
}
.spot-card-link:hover .spot-card-arrow {
    color: var(--sp-primary);
    transform: translateX(3px);
}

/* ── Spot Detailseite – Hero / Galerie ─────────────────────────────────────── */
.spot-hero {
    background: #1a252e;
    overflow: hidden;
    max-width: 1400px;
    margin: 0 auto;
}
.spot-hero-gallery,
.spot-hero-single {
    overflow: hidden;
    line-height: 0;
}
.spot-hero-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    object-position: center center;
    display: block;
}
@media (max-width: 768px) {
    .spot-hero-img { height: 240px; }
    .spot-hero-gallery,
    .spot-hero-single { max-height: 240px; }
}

/* ── Spot Header Bar ───────────────────────────────────────────────────────── */
.spot-header-bar {
    position: sticky;
    top: 60px;
    z-index: 99;
    background: #fff;
}
.spot-detail-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--sp-dark);
    display: inline;
}
.spot-detail-location { font-size: .85rem; color: #7a8c96; }

.spot-sport-badge {
    display: inline-flex;
    align-items: center;
    background: var(--sp-primary-light);
    color: var(--sp-primary);
    font-size: .78rem;
    font-weight: 700;
    padding: .2rem .65rem;
    border-radius: 20px;
}

/* Premium-Badge auf Detailseite: blau */
.badge-premium-inline {
    display: inline-flex;
    align-items: center;
    background: var(--sp-secondary);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    padding: .2rem .65rem;
    border-radius: 20px;
}

/* ── Spot Sections ─────────────────────────────────────────────────────────── */
.spot-section {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #eef2f5;
}
.spot-section:last-child { border-bottom: none; }
.spot-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--sp-dark);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.spot-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--sp-primary);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    border-radius: 50%;
    margin-left: .25rem;
}
.sp-rich-text {
    /* EINE Klasse für sämtliches Summernote-gerendertes Inhalts-HTML in der
       Live-Ansicht (Spot-Beschreibung, Job-Beschreibung, Story-Text).
       .note-editable (Editor) bleibt als einzige weitere Klasse bestehen, da
       sie von Summernote selbst fest vergeben wird - sie bekommt aber
       exakt dieselben Regeln (s. Abschnitt "Description-HTML" weiter unten). */
    font-size: .95rem;
    color: var(--sp-dark);
    /* line-height nicht mehr hier einzeln, sondern gemeinsam mit .note-
       editable weiter unten (Abschnitt "Description-HTML") - EIN Wert für
       Editor und Live-Ansicht. */
    /* white-space: pre-wrap bewusst NICHT gesetzt: pre-wrap preserviert JEDE
       Whitespace-Sequenz aus dem Quelltext wörtlich, inklusive des
       Zeilenumbruchs + der Einrückung zwischen dem öffnenden Element und dem
       ersten <p> im PHP-Template (spot-description-card.php) - das erzeugt
       eine unsichtbare, aber layoutwirksame Leerzeile+Einrückung VOR dem
       eigentlichen Text. purify_html() (s. app/App.php) wandelt jeden
       Zeilenumbruch/jedes <div> bereits zuverlässig in echte <p>/<br>-Tags
       um - pre-wrap ist damit nicht nur überflüssig, sondern aktiv
       schädlich. */
}

/* ── Kurs-Cards ────────────────────────────────────────────────────────────── */
.course-level-title {
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sp-primary);
    margin-bottom: .75rem;
}
.course-group { margin-bottom: 1.5rem; }
.course-card {
    background: #f8fbfd;
    border: 1px solid #dcedf5;
    border-radius: 8px;
    padding: .85rem 1rem;
    height: 100%;
}
.course-card-header {
    font-size: .9rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}
.course-card-header .badge { flex-shrink: 0; }
.course-card-meta  { line-height: 1.6; }
.course-card-notes { line-height: 1.5; }

/* ── Aktivangebot ──────────────────────────────────────────────────────────── */
.activities-grid { display: flex; flex-wrap: wrap; gap: .75rem; }
.activity-item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--sp-primary-light);
    color: var(--sp-primary);
    font-size: .875rem;
    font-weight: 600;
    padding: .45rem .9rem;
    border-radius: 20px;
}
.activity-item i   { font-size: 1rem; }
.activity-notes    { line-height: 1.6; }
.activity-detail   { font-size: .9rem; }

/* ── Jobs Liste ────────────────────────────────────────────────────────────── */
.jobs-list { display: flex; flex-direction: column; gap: .75rem; }
/* Job-Zeile Betriebsseite: ganze Zeile = Link → Optik & Hover kommen von
   .sp-link-card (Klasse in der View), keine eigene Hover-Variante mehr. */
.job-list-item {
    display: block;
    overflow: hidden;
}
.job-list-item-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1.1rem;
    gap: 1rem;
}
.job-list-title { font-size: .95rem; color: var(--sp-dark); }
.job-list-action { flex-shrink: 0; }

/* ── Story Mini-Cards (Optik & Hover: .sp-link-card) ───────────────────────── */
.story-mini-card {
    display: block;
    overflow: hidden;
}
.story-mini-img { width: 100%; height: 110px; object-fit: cover; }
.story-mini-body {
    padding: .6rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.story-mini-title {
    font-size: .85rem;
    color: var(--sp-dark);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.story-mini-date { font-size: .75rem; }

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
.spot-sidebar   { position: sticky; top: 130px; }
.sidebar-card {
    background: #fff;
    border: 1px solid #e4ecf0;
    border-radius: var(--sp-radius);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
.sidebar-card:last-child { margin-bottom: 0; }
.sidebar-card-title {
    font-size: .8rem;
    font-weight: 700;
    color: var(--sp-dark);
    margin-bottom: .85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.sidebar-card--cta {
    background: linear-gradient(135deg, #f0f7fb 0%, #e8f4f9 100%);
    border-color: var(--sp-primary);
}
.sidebar-card--premium-cta {
    background: var(--sp-secondary-light);
    border-color: var(--sp-secondary);
}
.contact-item {
    font-size: .9rem;
    color: var(--sp-dark) !important;
    padding: .3rem 0;
    border-bottom: 1px solid #f0f4f7;
}
.contact-item:last-of-type { border-bottom: none; }
.contact-item:hover         { color: var(--sp-primary) !important; }

.back-link {
    font-size: .85rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    transition: color var(--sp-transition);
}
.back-link:hover { color: var(--sp-primary) !important; }

/* ── Breadcrumb ────────────────────────────────────────────────────────────── */
.breadcrumb { --bs-breadcrumb-divider: '›'; }
.breadcrumb-item a { color: var(--sp-primary); text-decoration: none; }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .filter-sidebar  { position: static; margin-bottom: 1.5rem; }
    .spot-sidebar    { position: static; }
    .spot-header-bar { position: static; }
    .sticky-sport-tabs { top: 0; }
}

/* ── Mobile Filter Toggle ──────────────────────────────────────────────────── */
.filter-toggle-btn {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1.5px solid #e4ecf0;
    border-radius: var(--sp-radius);
    padding: .7rem 1rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--sp-dark);
    cursor: pointer;
    transition: border-color var(--sp-transition);
}
.filter-toggle-btn:hover { border-color: var(--sp-primary); color: var(--sp-primary); }

.filter-active-dot {
    width: 8px;
    height: 8px;
    background: var(--sp-primary);
    border-radius: 50%;
    margin-left: .4rem;
    flex-shrink: 0;
}
.filter-chevron {
    transition: transform .25s ease;
    font-size: .8rem;
}
.filter-chevron--open { transform: rotate(180deg); }

/* ── Nach oben Button ──────────────────────────────────────────────────────── */
.back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--sp-primary);
    color: #fff;
    border: none;
    box-shadow: 0 3px 12px rgba(31,117,171,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
    z-index: 999;
}
.back-to-top--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.back-to-top:hover {
    background: #1560a0;
    box-shadow: 0 4px 16px rgba(31,117,171,.45);
}

/* ── Slogan auf Detailseite ────────────────────────────────────────────────── */
.spot-detail-slogan {
    font-size: 1rem;
    font-style: italic;
    color: #5a7a8a;
    line-height: 1.4;
}

/* ── Description-HTML: Editor (.note-editable) UND Live-Ansicht
   (.sp-rich-text) - EIN gemeinsames Regelwerk für beide. Wichtig: das ist
   KEIN Summernote-Limit - Summernote läuft nur im Editor, auf den
   öffentlichen Seiten rendert ausschließlich unser eigenes CSS. Die
   Bootstrap-Utility-Klasse "lh-lg" (line-height:2 !important) darf auf
   keiner .sp-rich-text-Instanz hartkodiert werden (s. story-detail-card.php)
   - sie würde jede Zeilenhöhen-Regel hier überstimmen. p/li/ul/ol-Abstände
   sind bewusst auf die Editor-Werte gezogen, nicht umgekehrt. */
.note-editable,
.sp-rich-text                { line-height: 1.6; }
.note-editable p,
.sp-rich-text p               { margin: 0 0 .5rem; }
.note-editable ul, .note-editable ol {
    padding-left: 20px;
    margin: 0px;
}
.sp-rich-text ul, .sp-rich-text ol {
    margin: 0px;
}
.note-editable li,
.sp-rich-text li               { margin-bottom: .15rem; }
.note-editable strong, .sp-rich-text strong { font-weight: 700; }
.note-editable em, .sp-rich-text em         { font-style: italic; }
.note-editable h2, .note-editable h3, .note-editable h4,
.sp-rich-text h2, .sp-rich-text h3, .sp-rich-text h4 {
    font-weight: 700;
    margin-top: .9rem;
    margin-bottom: .35rem;
}
.sp-rich-text a { color: var(--sp-primary); }
.note-editable p:has(+ ul), .sp-rich-text p:has(+ ul),.note-editable p:has(+ ol), .sp-rich-text p:has(+ ol) {
    margin-bottom: 0px;
}
/* Klassenbasiert statt rein struktureller :has()-Prüfung: :has(:not(br))
   sieht nur Element-Kinder, keine Textknoten, und "enthält Text" lässt sich
   in CSS grundsätzlich nicht prüfen. Die Klasse sp-br-only wird deshalb an
   zwei Stellen gesetzt, die echten Text sehen können: live im Editor per JS
   (spoliday.js::markBrOnlyParagraphs()) und serverseitig beim Speichern
   (app/App.php::purify_html(), Sicherheitsnetz für Alt-Inhalte/Copy-Paste/
   verlorene Klasse). Beide berechnen dieselbe Regel: <p>, das außer <br>
   und Whitespace nichts enthält.
   :not(:only-child) ist nötig, weil Summernote einen komplett leeren Editor
   intern als genau dieses <p><br></p> darstellt (einziges Kind von
   .note-editable) - ohne :not(:only-child) hätte der leere Editor eine
   line-height von 0.8 statt der normalen 1.6, während der separate
   Platzhaltertext (.note-placeholder) weiterhin die normale line-height
   nutzt, was zu einem sichtbaren Cursor-Sprung führt. Mit :not(:only-child)
   greift die kompakte Darstellung weiterhin für bewusst eingefügte
   Leerzeilen MITTEN im Text, aber nicht mehr für den alleinstehenden
   Leer-Absatz eines komplett leeren Editors/einer komplett leeren
   Beschreibung. */
.note-editable p.sp-br-only:not(:only-child),
.sp-rich-text p.sp-br-only:not(:only-child) {
    line-height: 0.8;
    margin: 0px;
}
/* blockquote-Regel bleibt erhalten, obwohl "Quote" nicht mehr im
   Editor-Dropdown verfügbar ist - bereits veröffentlichte Beschreibungen/
   Stories können weiterhin ein <blockquote> enthalten (purify_html() lässt
   das Tag bewusst weiter zu), das soll nicht plötzlich unformatiert
   erscheinen. */
.note-editable blockquote,
.sp-rich-text blockquote {
    border-left: 3px solid var(--sp-primary);
    padding-left: 1rem;
    color: #5a7a8a;
    font-style: italic;
    margin: .75rem 0;
}
/* Leere Summernote-Divs/BRs ausblenden */
.sp-rich-text div:empty, .sp-rich-text p:empty { display: none; }
/* Erstes/letztes Element ohne oberen/unteren Rand-Abstand - vermeidet
   unnötigen Leerraum direkt am Card-/Container-Rand. */
.sp-rich-text > :first-child { margin-top: 0; }
.sp-rich-text > :last-child  { margin-bottom: 0; }

/* ── Hero responsive ───────────────────────────────────────────────────────── */
/* Hero-Höhe skaliert via aspect-ratio automatisch mit der Breite */
@media (max-width: 576px) {
    .spot-hero-img { aspect-ratio: 4 / 3; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   JOBS – Listenansicht & Komponenten
   /assets/css/spots.css (ergänzt)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Seiten-Hintergrund ────────────────────────────────────────────────────── */
body.page-jobs {
    background-color: #f0f5f8;
}

/* ── Jobs Hero ─────────────────────────────────────────────────────────────── */
.jobs-hero {
    background: linear-gradient(135deg, #e4eef5 0%, #dceaf3 100%);
    border-bottom: 1px solid #cfe0eb;
}
.jobs-hero-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--sp-dark);
}
.jobs-hero-sub { font-size: .95rem; }

/* ── Filter-Sidebar ────────────────────────────────────────────────────────── */
/* Formular-Gruppen (.filter-group/.filter-label) sind die gemeinsame
   Komponente mit der Betriebe-Seite, definiert weiter oben in dieser Datei –
   keine Jobs-spezifische Label-Regel mehr nötig. */
.job-agent-box {
    background: var(--sp-primary-light);
    border: 1px solid var(--sp-primary-mid);
}

/* Job-Liste: Sidebar wurde auf col-xl-2 (wie Betriebe-Seite) verbreitert,
   dadurch würde die Liste ab 1200px breiter als bisher. Breitenbremse hält
   die Job-Cards bei der bisherigen, bewusst gewählten Breite. */
.jobs-col-list {
    max-width: 966px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Job-Card (Optik & Hover: .sp-link-card) ───────────────────────────────── */
.job-card {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 1.25rem 1.4rem;
}
.job-card-link { color: inherit; }

/* Top-Job: brauner Glow wie spot-card--premium. Die Job-Card ist flach und
   horizontal – der Gradient läuft höher aus (70% statt 45%), damit der Glow
   nicht als schmaler Streifen unten klebt. Wert nach Sichtprüfung anpassbar. */
.job-card--top {
    position: relative;
}
.job-card--top::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(0deg, var(--sp-glow), transparent 70%);
}

/* Logo */
.job-card-logo-wrap {
    flex-shrink: 0;
}
.job-card-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #e8edf1;
    background: #ffffff;   /* weißer Hintergrund für Logos */
    padding: 4px;
}
.job-card-logo--guest {
    background: var(--sp-primary-light);
    border-color: var(--sp-primary-mid);
}

/* Body */
.job-card-body {
    flex-grow: 1;
    min-width: 0;
}
.job-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--sp-dark);
    margin: 0.2rem 0 0.3rem;
    line-height: 1.35;
}
.job-card-meta {
    font-size: 0.875rem;
    color: var(--sp-dark);
    margin-bottom: 0.3rem;
}
.job-card-spot-link {
    color: var(--sp-primary);
    text-decoration: none;
    font-weight: 500;
}
.job-card-spot-link:hover {
    text-decoration: underline;
}
.job-card-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8rem;
}

/* Badges */
.job-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    white-space: nowrap;
}
.job-badge--sport {
    background: var(--sp-primary-light);
    color: var(--sp-primary);
}
.job-badge--category {
    background: var(--sp-secondary-light);
    color: var(--sp-secondary);
}
.job-badge--contract {
    background: #f0f0f0;
    color: #555;
}
.job-badge--top {
    background: var(--sp-secondary);
    color: #fff;
    font-weight: 700;
}

/* Pfeil rechts unten – gleich wie spot-card-arrow */
.job-card-arrow {
    flex-shrink: 0;
    align-self: flex-end;
    padding-bottom: 0.1rem;
    font-size: 1.2rem;
    color: #b0bec5;
    transition: color var(--sp-transition), transform var(--sp-transition);
}
.job-card-link:hover .job-card-arrow {
    color: var(--sp-primary);
    transform: translateX(3px);
}

/* Responsive */
@media (max-width: 575px) {
    .job-card {
        flex-wrap: wrap;
    }
    .job-card-arrow {
        display: none;
    }
    .job-card-logo-wrap {
        display: none;
    }
}

/* ── Job-Detailseite ───────────────────────────────────────────────────────── */
.job-detail-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--sp-dark);
    line-height: 1.3;
}
.job-detail-logo {
    max-width: 120px;
    max-height: 80px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #e8edf1;
    border-radius: 8px;
    padding: 6px;
}
.job-detail-logo-placeholder {
    width: 80px;
    height: 80px;
    background: var(--sp-primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 2rem;
    color: var(--sp-primary);
}

/* Job-Detail Zurück-Link */
.job-detail-back-link {
    color: var(--sp-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}
.job-detail-back-link:hover {
    text-decoration: underline;
    color: var(--sp-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STORIES – Feed & Listenansicht
   /assets/css/spots.css (ergänzt) – alle Story-bezogenen Regeln stehen ab hier
   gebündelt bis zum Ende der Datei (Story-Feed Arrow, Story-Mini-Cards),
   analog zu den SPOTS/JOBS-Blöcken weiter oben.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Seiten-Hintergrund ────────────────────────────────────────────────────── */
body.page-stories {
    background-color: #f0f5f8;
}

/* ── Stories Hero ──────────────────────────────────────────────────────────── */
.stories-hero {
    background: linear-gradient(135deg, #e4eef5 0%, #dceaf3 100%);
    border-bottom: 1px solid #cfe0eb;
}
.stories-hero-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--sp-dark);
}
.stories-hero-sub { font-size: .95rem; }

/* ── Story-Feed-Card (Optik & Hover: .sp-link-card) ─────────────────────────── */
.story-feed-card {
    color: inherit;
}

/* ── Kurs-Formular: Select-Text darf nicht unter den Pfeil laufen ──────────── */
.course-row .form-select {
    /* Pfeil näher an den Rand + Text strikt vor dem Pfeil abschneiden.
       Wichtig für Safari: padding allein reicht dort nicht zuverlässig. */
    padding-right: 1.7rem;
    background-position: right 0.45rem center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Anker-Sprünge: Sektions-Anfang unter der Sticky-Navbar sichtbar ──────── */
.spot-section {
    /* Muss Navbar (60px) UND die Sticky-Spot-Header-Bar (~200px, variiert
       mit Titel/Slogan) freihalten – sonst verschwindet die Sektions-
       Überschrift beim Anker-Sprung unter dem Header-Block. */
    scroll-margin-top: 280px;
}

/* ── Story-Mini-Cards: gleiche Höhe innerhalb einer Reihe ─────────────────── */
/* Bootstrap-Row streckt die Cols – die Card muss die volle Höhe füllen,
   das Datum sitzt über margin-top:auto immer unten. */
.story-mini-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.story-mini-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.story-mini-body .story-mini-date {
    margin-top: auto;
    padding-top: .35rem;
}