/*
* home.css – Startseite
* Hero, Startseiten-Leaderboard und hervorgehobene Stellenanzeigen.
* Wird nach texterjobs.css geladen.
*/

/* Optionaler Leaderboard-Slot direkt unter dem Startseiten-Hero */
.home-leaderboard-wrap {
margin: 14px -11px 14px;
padding: 12px 12px 24px;
background: #fff;
border: 1px solid var(--color-border-light);
border-radius: 8px;
text-align: center;
}
.home-leaderboard-wrap .ad-label { margin-bottom: 6px; }
.home-leaderboard-inner {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-width: 0;
overflow: hidden;
}
.home-leaderboard-inner .ad-banner,
.home-leaderboard-inner .ad-banner-code {
width: 100%;
max-width: 768px;
}
.home-leaderboard-inner .ad-banner img {
width: auto;
max-width: 100%;
height: auto;
}
@media (min-width: 800px) {
.page-home .content-area > .home-leaderboard-wrap {
margin-right: calc(-1 * (var(--gap) + var(--sidebar-width) + 11px));
}
}
@media (min-width: 1140px) {
.page-home .content-area > .home-leaderboard-wrap {
margin-left: -15px;
margin-right: calc(-1 * (var(--gap) + var(--sidebar-width) + 15px));
}
}

/* ═══════════════════════════════════════════════════════════════════════════
STARTSEITEN-HERO – breiter, mit Gradient und Personenbild
═══════════════════════════════════════════════════════════════════════════ */
.hero {
/* Mesh-Gradient: lineares Basis-Indigo + drei radiale Lichthighlights für Tiefe.
   Reihenfolge in CSS: oben gemalt = oberster Layer.
   Stops: oben-links Blue-400 Glow, unten-rechts Indigo-500 Hauch,
   Mitte Blue-500 als ruhiger Halo, darunter der eigentliche Linear-Verlauf. */
background:
radial-gradient(ellipse 55% 60% at 18% 22%, rgba(var(--hero-mesh-1), 0.45) 0%, transparent 60%),
radial-gradient(ellipse 50% 55% at 85% 80%, rgba(var(--hero-mesh-2), 0.30) 0%, transparent 60%),
radial-gradient(ellipse 70% 70% at 55% 50%, rgba(var(--hero-mesh-3), 0.18) 0%, transparent 70%),
linear-gradient(135deg, var(--hero-gradient-start) 0%, var(--hero-gradient-mid) 50%, var(--hero-gradient-end) 100%);
padding: 0;
position: relative;
overflow: hidden;
/* Hero ragt über Content + Sidebar – volle Breite des page-wrapper, 5px Rand */
margin-left: -11px;
margin-right: -11px;
border-radius: 8px;
}

/* Startseite: Hero über BEIDE Grid-Spalten (Content + Sidebar) */
@media (min-width: 800px) {
.page-home .content-area > .hero {
margin-right: calc(-1 * (var(--gap) + var(--sidebar-width) + 11px));
}
}
@media (min-width: 1140px) {
.hero {
margin-left: -15px;
margin-right: -15px;
}
.page-home .content-area > .hero {
margin-right: calc(-1 * (var(--gap) + var(--sidebar-width) + 15px));
}
}
.hero .container {
position: relative;
z-index: 1;
display: flex;
align-items: stretch;
min-height: 250px;
}


.hero-content {
flex: 1 1 auto;
padding: 38px 0 34px;
padding-right: 340px;   /* Reserviert Platz für das absolut positionierte Bild */
min-width: 0;
}
.hero-title {
font-size: clamp(19px, 3.2vw, 27px);
color: #fff;
font-weight: 700;
margin-bottom: 8px;
line-height: 1.3;
}
.hero-subtitle {
font-size: var(--font-size-md);
color: rgba(255,255,255,.72);
margin-bottom: 24px;
}
.hero-stats {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.hero-stat {
background: rgba(255,255,255,.12);
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,.18);
border-radius: var(--radius-lg);
padding: 12px 18px;
text-align: center;
min-width: 100px;
}
.hero-stat .stat-num {
font-size: var(--font-size-lg);
font-weight: 700;
color: #fff;
display: block;
line-height: 1.2;
}
.hero-stat .stat-lbl {
font-size: var(--font-size-xs);
color: rgba(255,255,255,.65);
}

/* Hero-Bild rechts (Originalmaße: 300×360px, transparent) */
.hero-image {
flex: 0 0 247px;
display: flex;
align-items: flex-end;
justify-content: flex-end;
position: absolute;
right: 70px;           /* Abstand vom rechten Rand – größer = weiter links */
bottom: 0;
}
.hero-image img {
display: block;
max-height: 260px;
width: auto;
object-fit: contain;
object-position: bottom right;
filter: drop-shadow(0 8px 28px rgba(0,0,0,.35));
}

@media (max-width: 860px) {
.hero-image { flex-basis: 190px; }
.hero-image img { max-height: 200px; }
.hero-content { padding-right: 280px; }
}
@media (max-width: 640px) {
.hero-image { display: none; }
.hero-content { padding-right: 0; }
.hero { margin: 0 -11px; border-radius: 8px; }
}



.hero-mobile-cta {
display: none;
}

@media (max-width: 799px) {
.hero-mobile-cta {
display: flex;
margin-top: 24px;
}
}

/* ─── Spotlight-Jobs-Bereich ────────────────────────────────────────────── */
.spotlight-section { margin-bottom: 4px; }
.spotlight-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
margin-bottom: 8px;
}
.spotlight-card {
background: linear-gradient(135deg, #fff 0%, #f2f9ff 100%);
border: 1.5px solid rgba(58,181,232,.40);
border-radius: 14px;
padding: 16px;
transition: box-shadow var(--transition), transform var(--transition);
position: relative;
overflow: hidden;
}
.spotlight-card::before {
content: '★ Highlight';
position: absolute;
top: 8px; right: -1px;
background: #0d7bb0;
color: #fff;
font-size: 10px; font-weight: 700;
padding: 2px 10px 2px 8px;
border-radius: 3px 0 0 3px;
letter-spacing: .4px;
}
.spotlight-card:hover {
box-shadow: 0 10px 28px var(--color-shadow-md);
transform: translateY(-2px);
border-color: rgba(58,181,232,.60);
}
.spotlight-card.spotlight-card--clickable { cursor: pointer; }
.spotlight-card.spotlight-card--clickable:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.spotlight-card-title {
font-size: var(--font-size-md); font-weight: 700; color: var(--color-primary);
margin-bottom: 6px; padding-right: 70px;
}
.spotlight-card-title a { color: inherit; }
.spotlight-card-title a:hover { color: var(--color-accent); text-decoration: none; }
.spotlight-card-meta {
font-size: var(--font-size-xs); color: var(--color-text-muted);
display: flex; gap: 10px; flex-wrap: wrap;
}