/* ═════════════════════════════════════════════════════════════════════
* Profil-Teaser – CSS v2
* ═════════════════════════════════════════════════════════════════════ */

/* ── gemeinsame Basis ────────────────────────────────────────────────── */
.profile-card {
background: #fff;
border: 1px solid var(--color-border, #e5e7eb);
border-radius: var(--radius-lg, 10px);
box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
padding: 14px;
display: flex;
gap: 12px;
transition: box-shadow .2s, transform .2s;
position: relative;
}

.profile-card:hover {
box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

.profile-card-media {
flex-shrink: 0;
display: block;
width: 72px;
height: 72px;
border-radius: 50%;
overflow: hidden;
background: var(--color-bg-subtle, #f3f4f6);
}

.profile-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.profile-card-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}

.profile-card-head {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 2px;
}

.profile-card-badge {
display: inline-block;
align-self: flex-start;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--color-accent, #4a90d9);
background: rgba(74, 144, 217, .1);
padding: 2px 8px;
border-radius: 999px;
line-height: 1.4;
}

.profile-card-name {
font-size: 15px;
font-weight: 700;
margin: 0;
line-height: 1.25;
color: var(--color-text, #222);
word-wrap: break-word;
}

.profile-card-line {
font-size: 12.5px;
line-height: 1.5;
color: var(--color-text, #333);
margin: 0;
}

.profile-card-label {
color: var(--color-text-muted, #6b7280);
font-weight: 500;
}

.profile-card-link {
font-size: 13px;
font-weight: 500;
color: var(--color-accent, #4a90d9);
text-decoration: none;
}

.profile-card-link:hover {
text-decoration: underline;
}

/* ═════════════════════════════════════════════════════════════════════
* SIDEBAR — Desktop V2
* ═════════════════════════════════════════════════════════════════════ */

.sidebar-profiles {
padding: 0;
overflow: visible;
}

/* Markanter Kopfbalken analog Spotlight/Highlight-Sections */
.sidebar-profiles-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: var(--color-primary);
color: #fff;
padding: 8px 12px;
border-radius: var(--radius) var(--radius) 0 0;
margin: 0;
}

.sidebar-profiles-title {
font-size: var(--font-size-sm);
font-weight: 700;
line-height: 1.2;
}

.sidebar-profiles-info {
color: rgba(255, 255, 255, .7);
font-size: var(--font-size-xs);
font-weight: 400;
text-decoration: none;
white-space: nowrap;
line-height: 1.2;
transition: color .15s;
}

.sidebar-profiles-info:hover {
color: #fff;
text-decoration: none;
}

.sidebar-profiles .profile-card-stack {
display: flex;
flex-direction: column;
gap: 14px;
padding: 14px;
}

.profile-card--sidebar {
padding: 14px 14px 0;                       /* unten kein padding – CTA übernimmt */
background: linear-gradient(135deg, #ffffff 0%, #f5faff 100%);
border: 1px solid rgba(74, 144, 217, .18);
overflow: hidden;
}

/* Bild mit blauem Akzent-Ring */
.profile-card--sidebar .profile-card-media {
width: 64px;
height: 64px;
margin: 3px 0 3px 3px;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(74, 144, 217, .3);
}

/* Name + Badge nebeneinander in einer Zeile statt gestapelt */
.profile-card--sidebar .profile-card-head {
flex-direction: row;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 4px;
}

.profile-card--sidebar .profile-card-name {
font-size: 14.5px;
order: 1;
flex: 1 1 auto;
min-width: 0;
}

.profile-card--sidebar .profile-card-badge {
order: 2;
font-size: 9px;
padding: 2px 7px;
letter-spacing: .05em;
}

/* Info-Zeilen mit Line-Clamp gegen Überlauf */
.profile-card--sidebar .profile-card-line {
font-size: 12px;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

/* CTA als eigener Abschnitt unten quer über die Card */
.profile-card--sidebar .profile-card-link {
display: block;
text-align: center;
/* negative margin hebt das Card-Padding auf, damit der Footer bündig sitzt */
margin: 10px -14px 0;
padding: 10px 14px;
border-top: 1px solid rgba(74, 144, 217, .18);
background: rgba(74, 144, 217, .05);
font-weight: 500;
font-size: 12.5px;
line-height: 1.4;
transition: background .15s, color .15s;
}

.profile-card--sidebar .profile-card-link:hover {
background: rgba(74, 144, 217, .12);
text-decoration: none;
color: var(--color-accent, #4a90d9);
}

/* ═════════════════════════════════════════════════════════════════════
* MOBILE — Einblendung im Joblisting
* ═════════════════════════════════════════════════════════════════════ */
.profile-mobile-block {
display: none;                              /* auf Desktop versteckt */
margin: 15px 0;                             /* oben und unten gleich (vorher 10) */
padding: 14px;
background: linear-gradient(135deg, rgba(74, 144, 217, .04), rgba(74, 144, 217, .01));
border: 1px solid rgba(74, 144, 217, .2);
border-radius: var(--radius-lg, 10px);
position: relative;
}

.profile-mobile-badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--color-accent, #4a90d9);
background: #fff;
padding: 3px 10px;
border-radius: 999px;
margin-bottom: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.profile-mobile-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}

.profile-card--mobile {
flex-direction: column;
padding: 10px;
gap: 8px;
align-items: center;
text-align: center;
}

.profile-card--mobile .profile-card-media {
width: 64px;
height: 64px;
}

.profile-card--mobile .profile-card-body {
align-items: center;
width: 100%;
}

.profile-card--mobile .profile-card-head {
align-items: center;
}

.profile-card--mobile .profile-card-name {
font-size: 13.5px;
text-align: center;
}

.profile-card--mobile .profile-card-line {
font-size: 11.5px;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}

/* CTA-Link: konsistent, egal wie lang der Text ist.
display:block + text-align:center behandelt Pfeil + Text als gemeinsamen
Textfluss. Der Pfeil bleibt stabil am Anfang der ersten Zeile und wandert
nicht je nach Text-Umbruch auf unterschiedliche vertikale Positionen. */
.profile-card--mobile .profile-card-link {
display: block;
width: 100%;
text-align: center;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(0, 0, 0, .06);
font-size: 12px;
line-height: 1.4;
font-weight: 500;
}

/* ── Media-Query: Mobile-Block nur unter Sidebar-Breakpoint sichtbar ── */
@media (max-width: 960px) {
.profile-mobile-block {
display: block;
}
.sidebar-profiles {
display: none;                          /* Doppelung verhindern */
}
}

/* Sehr schmale Handys: Karten untereinander statt 2-spaltig */
@media (max-width: 420px) {
.profile-mobile-grid {
grid-template-columns: 1fr;
}
}

/* ── Profil-Landingpage (Wrapper-Klasse, unverändert) ────────────────── */
.profile-landing h1 {
margin-bottom: 16px;
}

.profile-landing .profile-hero {
display: flex;
gap: 20px;
align-items: center;
padding: 18px;
background: var(--color-bg-subtle, #f9fafb);
border-radius: var(--radius-lg, 10px);
margin-bottom: 22px;
}

.profile-landing .profile-hero-media img {
width: 140px;
height: 140px;
border-radius: 50%;
object-fit: cover;
display: block;
}

@media (max-width: 560px) {
.profile-landing .profile-hero {
flex-direction: column;
text-align: center;
}
}