/* ============================================================
   OVB24 PR Story Search – Stylesheet v1.2.0
   story-premium.ovb24.de | Post-Type: story
   ============================================================ */

.ovb24-pr-wrap {
    --pr-red:        #E30613;
    --pr-red-light:  #fff0f0;
    --pr-bg:         #f4f5f7;
    --pr-surface:    #ffffff;
    --pr-border:     #e2e4e9;
    --pr-text:       #1a1d23;
    --pr-text-muted: #6b7280;
    --pr-text-light: #9ca3af;
    --pr-accent:     #2563eb;
    --pr-accent-bg:  #eff6ff;
    --pr-vev:        #7c3aed;
    --pr-vev-bg:     #f5f3ff;
    --pr-portal:     #0369a1;
    --pr-portal-bg:  #e0f2fe;
    --pr-radius:     10px;
    --pr-radius-sm:  6px;
    --pr-shadow:     0 1px 3px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.04);
    --pr-shadow-lg:  0 4px 24px rgba(0,0,0,.10);
    --pr-font:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --pr-transition: 170ms ease;

    font-family:  var(--pr-font);
    color:        var(--pr-text);
    background:   var(--pr-bg);
    min-height:   100vh;
    padding:      0 0 64px;
    box-sizing:   border-box;
}

.ovb24-pr-wrap *, .ovb24-pr-wrap *::before, .ovb24-pr-wrap *::after {
    box-sizing: inherit;
}

/* ── Header ─────────────────────────────────────────────────── */
.ovb24-pr-header {
    background:    var(--pr-surface);
    border-bottom: 1px solid var(--pr-border);
    padding:       0 24px;
    position:      sticky;
    top:           0;
    z-index:       100;
}

.ovb24-pr-header__inner {
    max-width:       960px;
    margin:          0 auto;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          54px;
    gap:             12px;
}

.ovb24-pr-header__logo {
    display:     flex;
    align-items: center;
    gap:         10px;
}

.ovb24-pr-header__title {
    font-size:      15px;
    font-weight:    700;
    letter-spacing: -.2px;
}

.ovb24-pr-header__domain {
    font-size:   12px;
    color:       var(--pr-text-muted);
    padding:     2px 8px;
    background:  var(--pr-bg);
    border:      1px solid var(--pr-border);
    border-radius: 20px;
}

.ovb24-pr-header__badge {
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color:          var(--pr-text-muted);
    background:     var(--pr-bg);
    border:         1px solid var(--pr-border);
    border-radius:  20px;
    padding:        3px 10px;
}

/* ── Suchleiste ─────────────────────────────────────────────── */
.ovb24-pr-search-bar {
    background:    var(--pr-surface);
    border-bottom: 1px solid var(--pr-border);
    padding:       18px 24px;
}

.ovb24-pr-search-bar__inner {
    max-width: 960px;
    margin:    0 auto;
}

.ovb24-pr-search-bar__field-wrap {
    position:    relative;
    display:     flex;
    align-items: center;
}

.ovb24-pr-search-bar__icon {
    position:       absolute;
    left:           14px;
    color:          var(--pr-text-muted);
    pointer-events: none;
}

.ovb24-pr-search-bar__input {
    width:         100%;
    height:        48px;
    padding:       0 44px 0 46px;
    font-size:     15.5px;
    font-family:   var(--pr-font);
    color:         var(--pr-text);
    background:    var(--pr-bg);
    border:        2px solid var(--pr-border);
    border-radius: var(--pr-radius);
    outline:       none;
    transition:    border-color var(--pr-transition), box-shadow var(--pr-transition);
    -webkit-appearance: none;
    appearance:    none;
}

.ovb24-pr-search-bar__input:focus {
    border-color: var(--pr-red);
    box-shadow:   0 0 0 3px rgba(227,6,19,.10);
    background:   var(--pr-surface);
}

.ovb24-pr-search-bar__input::placeholder { color: var(--pr-text-light); }

.ovb24-pr-search-bar__clear {
    position:        absolute;
    right:           12px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           28px;
    height:          28px;
    border:          none;
    background:      transparent;
    color:           var(--pr-text-muted);
    border-radius:   50%;
    cursor:          pointer;
    transition:      background var(--pr-transition);
    padding:         0;
}

.ovb24-pr-search-bar__clear:hover {
    background: var(--pr-border);
    color:      var(--pr-text);
}

.ovb24-pr-search-bar__meta {
    margin-top: 8px;
    font-size:  13px;
    color:      var(--pr-text-muted);
    min-height: 18px;
}

.ovb24-pr-search-bar__meta strong { color: var(--pr-text); }

/* ── Status / Spinner ───────────────────────────────────────── */
.ovb24-pr-status {
    display:     flex;
    align-items: center;
    gap:         10px;
    max-width:   960px;
    margin:      20px auto 0;
    padding:     0 24px;
    font-size:   13.5px;
    color:       var(--pr-text-muted);
}

.ovb24-pr-spinner svg {
    animation: ovb24-spin 0.75s linear infinite;
    color:     var(--pr-red);
}

@keyframes ovb24-spin { to { transform: rotate(360deg); } }

/* ── Ergebnisliste ──────────────────────────────────────────── */
.ovb24-pr-results {
    max-width:      960px;
    margin:         20px auto 0;
    padding:        0 24px;
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

/* ── Empty State ────────────────────────────────────────────── */
.ovb24-pr-empty-state {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         56px 24px;
    text-align:      center;
    color:           var(--pr-text-muted);
    gap:             10px;
}

.ovb24-pr-empty-state svg { opacity: .3; }
.ovb24-pr-empty-state p   { margin: 0; font-size: 15px; }
.ovb24-pr-empty-state__hint { font-size: 13px !important; color: var(--pr-text-light); }

/* ── Story-Karte ────────────────────────────────────────────── */
.ovb24-pr-card {
    background:    var(--pr-surface);
    border:        1px solid var(--pr-border);
    border-radius: var(--pr-radius);
    box-shadow:    var(--pr-shadow);
    overflow:      hidden;
    display:       flex;
    transition:    box-shadow var(--pr-transition), border-color var(--pr-transition);
    animation:     ovb24-card-in 200ms ease both;
}

.ovb24-pr-card:hover {
    box-shadow:   var(--pr-shadow-lg);
    border-color: #c5c9d4;
}

@keyframes ovb24-card-in {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Thumbnail */
.ovb24-pr-card__thumb {
    flex-shrink: 0;
    width:       148px;
    min-height:  130px;
    overflow:    hidden;
    background:  var(--pr-bg);
    position:    relative;
}

.ovb24-pr-card__thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 280ms ease;
}

.ovb24-pr-card:hover .ovb24-pr-card__thumb img { transform: scale(1.04); }

.ovb24-pr-card__thumb--empty {
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--pr-text-light);
}

/* Body */
.ovb24-pr-card__body {
    flex:    1;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap:     7px;
    min-width: 0;
}

/* Top-Zeile: Portal-Pills + Badge + Datum */
.ovb24-pr-card__top {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
}

/* Badges */
.ovb24-pr-badge {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .6px;
    text-transform: uppercase;
    border-radius:  4px;
    padding:        2px 7px;
    line-height:    1.6;
    flex-shrink:    0;
}

.ovb24-pr-badge--story {
    color:      var(--pr-red);
    background: var(--pr-red-light);
    border:     1px solid #ffd0d0;
}

.ovb24-pr-badge--vev {
    color:      var(--pr-vev);
    background: var(--pr-vev-bg);
    border:     1px solid #ddd6fe;
}

/* Datum */
.ovb24-pr-card__date {
    font-size:   12px;
    color:       var(--pr-text-muted);
    margin-left: auto;
    white-space: nowrap;
}

/* Titel */
.ovb24-pr-card__title {
    margin:      0;
    font-size:   15.5px;
    font-weight: 700;
    line-height: 1.35;
}

.ovb24-pr-card__title a {
    color:           var(--pr-text);
    text-decoration: none;
    transition:      color var(--pr-transition);
}

.ovb24-pr-card__title a:hover { color: var(--pr-red); }

/* Kunde · Ort */
.ovb24-pr-card__meta-line {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
    font-size:   12.5px;
}

.ovb24-pr-card__client {
    font-weight: 600;
    color:       var(--pr-text);
}

.ovb24-pr-card__location {
    display:     inline-flex;
    align-items: center;
    gap:         3px;
    color:       var(--pr-text-muted);
}

.ovb24-pr-card__meta-sep {
    color:     var(--pr-text-light);
    font-size: 11px;
}

/* Excerpt */
.ovb24-pr-card__excerpt {
    font-size:   13px;
    color:       var(--pr-text-muted);
    line-height: 1.55;
    margin:      0;
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

/* Permalink-Zeile */
.ovb24-pr-card__permalink-row {
    display:     flex;
    align-items: center;
    gap:         7px;
    flex-wrap:   wrap;
}

.ovb24-pr-card__permalink {
    font-size:       12px;
    color:           var(--pr-accent);
    text-decoration: none;
    font-family:     "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    background:      var(--pr-accent-bg);
    border:          1px solid #bfdbfe;
    border-radius:   var(--pr-radius-sm);
    padding:         3px 8px;
    overflow:        hidden;
    text-overflow:   ellipsis;
    white-space:     nowrap;
    max-width:       400px;
    display:         inline-block;
    transition:      background var(--pr-transition);
}

.ovb24-pr-card__permalink:hover {
    background:   #dbeafe;
    border-color: #93c5fd;
}

/* Copy-Button */
.ovb24-pr-copy-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    font-size:     12px;
    font-weight:   600;
    color:         var(--pr-text-muted);
    background:    transparent;
    border:        1px solid var(--pr-border);
    border-radius: var(--pr-radius-sm);
    padding:       3px 10px;
    cursor:        pointer;
    transition:    all var(--pr-transition);
    white-space:   nowrap;
    font-family:   var(--pr-font);
}

.ovb24-pr-copy-btn:hover {
    background:   var(--pr-bg);
    border-color: #9ca3af;
    color:        var(--pr-text);
}

.ovb24-pr-copy-btn--copied {
    color:        #16a34a !important;
    border-color: #86efac !important;
    background:   #f0fdf4 !important;
}

/* Portal-Pills (prominent, oben in der Karte) */
.ovb24-pr-portal-pill {
    display:        inline-flex;
    align-items:    center;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .3px;
    color:          #fff;
    background:     var(--pr-portal);
    border-radius:  4px;
    padding:        2px 8px;
    white-space:    nowrap;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* ── Highlight ──────────────────────────────────────────────── */
.ovb24-pr-highlight {
    background:    #fef9c3;
    color:         #713f12;
    border-radius: 2px;
    padding:       0 1px;
}

/* ── Pagination ─────────────────────────────────────────────── */
.ovb24-pr-pagination {
    max-width:  960px;
    margin:     24px auto 0;
    padding:    0 24px;
    text-align: center;
}

.ovb24-pr-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    font-size:     14px;
    font-weight:   600;
    font-family:   var(--pr-font);
    border-radius: var(--pr-radius-sm);
    padding:       9px 22px;
    cursor:        pointer;
    transition:    all var(--pr-transition);
    border:        none;
    outline:       none;
}

.ovb24-pr-btn--outline {
    background:   var(--pr-surface);
    border:       2px solid var(--pr-border);
    color:        var(--pr-text);
}

.ovb24-pr-btn--outline:hover {
    border-color: var(--pr-red);
    color:        var(--pr-red);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ovb24-pr-header__domain,
    .ovb24-pr-header__badge { display: none; }

    .ovb24-pr-card__thumb { width: 100px; min-height: 100px; }
    .ovb24-pr-card__permalink { max-width: 180px; }
    .ovb24-pr-card__body { padding: 11px 13px; }
    .ovb24-pr-card__title { font-size: 14px; }
}

@media (max-width: 480px) {
    .ovb24-pr-card { flex-direction: column; }
    .ovb24-pr-card__thumb { width: 100%; height: 160px; min-height: unset; }
}