/*
Theme Name: JobMeHappy
Theme URI: https://www.jobmehappy.de
Description: Custom theme for JobMeHappy — Das moderne Karriere-Magazin
Version: 1.0
Author: JobMeHappy Team
Text Domain: jobmehappy
*/

/* ── VARIABLES ── */
:root {
  --blue:       #2e7fc1;
  --navy:       #1e2d5a;
  --navy-dark:  #141e3c;
  --blue-light: #e8f3fb;
  --accent:     #5ba8d4;
  --accent2:    #e05c2a;
  --white:      #ffffff;
  --off-white:  #f8f9fc;
  --gray-100:   #f1f4f9;
  --gray-200:   #e2e8f0;
  --gray-500:   #718096;
  --gray-700:   #374151;
  --dark:       #0f172a;
  --radius:     12px;
  --font-head:  'Playfair Display', Georgia, serif;
  --font-body:  'Source Sans 3', sans-serif;
  --shadow-sm:  0 1px 4px rgba(15,23,42,.06);
  --shadow-md:  0 4px 20px rgba(15,23,42,.10);
  --shadow-lg:  0 12px 40px rgba(15,23,42,.14);
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  font-family: var(--font-body);
  color: var(--dark);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; height:auto }
a { color: var(--blue); text-decoration:none }

/* ── NAV ── */
.jmh-nav {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 9000;
  box-shadow: 0 2px 10px rgba(15,23,42,.06);
}
.jmh-nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.jmh-logo img { height:48px; width:auto; display:block }
.jmh-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
.jmh-nav-links a {
  display: block;
  padding: 8px 14px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--gray-700);
  border-radius: 8px;
  transition: all .15s;
}
.jmh-nav-links a:hover,
.jmh-nav-links a.active {
  background: var(--blue-light);
  color: var(--blue);
}
.jmh-nav-social {
  display: flex !important;
  align-items: center;
  gap: 8px;
}
.jmh-nav-social a {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  transition: all .15s !important;
  text-decoration: none !important;
}
.jmh-nav-ig {
  background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888) !important;
  color: white !important;
  padding: 8px !important;
  border-radius: 8px !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.jmh-nav-ig:hover { opacity:.88; transform:translateY(-1px); color:white !important }
.jmh-nav-li {
  background: #0077B5 !important;
  color: white !important;
  padding: 8px !important;
  border-radius: 8px !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.jmh-nav-li:hover { background:#005f8d !important; transform:translateY(-1px); color:white !important }
/* Dropdown */
.jmh-nav-links > li { position:relative }
.jmh-dropdown > a::after { content:'▾'; margin-left:4px; font-size:.7em; opacity:.5 }
.jmh-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 8px 0;
  z-index: 9999;
}
.jmh-dropdown:hover .jmh-dropdown-menu { display:block }
.jmh-dropdown-menu h5 {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gray-500);
  padding: 8px 18px 4px;
  margin: 4px 0 0;
}
.jmh-dropdown-menu h5:first-child { margin-top:0 }
.jmh-dropdown-menu a {
  display: block;
  padding: 6px 18px !important;
  font-size: .85rem !important;
  color: var(--gray-700) !important;
  border-radius: 0 !important;
  background: none !important;
  transition: all .1s;
}
.jmh-dropdown-menu a:hover {
  background: var(--blue-light) !important;
  color: var(--blue) !important;
}
.jmh-dropdown-divider { height:1px; background:var(--gray-200); margin:6px 0 }

.jmh-ham {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.jmh-ham span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: all .2s;
}

/* ── HERO ── */
.jmh-hero {
  background: var(--navy-dark);
  position: relative;
  overflow: hidden;
  padding: 0 24px;
}
.jmh-hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  min-height: auto;
}
.jmh-hero-text {
  padding: 20px 0 12px;
  position: relative;
  z-index: 2;
}
.jmh-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.jmh-hero-kicker::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--accent);
}
.jmh-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(2rem,4.5vw,3.2rem);
  font-weight: 800;
  color: white;
  line-height: 1.15;
  margin-bottom: 14px;
}
.jmh-hero h1 em { font-style:normal; color:var(--accent) }
.jmh-hero-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,.65);
  max-width: 440px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.jmh-hero-btns { display:flex; gap:12px; flex-wrap:wrap }
.jmh-btn-hero {
  background: var(--accent);
  color: var(--white) !important;
  font-weight: 700;
  padding: 13px 28px;
  border-radius: 6px;
  font-size: .92rem;
  transition: all .2s;
  text-decoration: none !important;
}
.jmh-btn-hero:hover { background:#3d8fbf; transform:translateY(-2px) }
.jmh-btn-hero-ghost {
  border: 1.5px solid rgba(255,255,255,.3);
  color: rgba(255,255,255,.85) !important;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: .9rem;
  font-weight: 500;
  transition: all .2s;
  text-decoration: none !important;
}
.jmh-btn-hero-ghost:hover { border-color:white; color:white !important }
.jmh-hero-stats {
  display: flex;
  gap: 28px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.jmh-hero-stat span {
  display: block;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
}
.jmh-hero-stat small { font-size:.75rem; color:rgba(255,255,255,.5); font-weight:400 }
.jmh-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: auto;
}
.jmh-hero-card-float {
  background: white;
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  position: absolute;
  transition: all .3s;
}
.jmh-hero-card-float.top { top:60px; right:0; width:230px }
.jmh-hero-card-float.bottom { bottom:80px; left:0; width:210px }
.jmh-hero-card-float .card-label { font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-500); margin-bottom:4px }
.jmh-hero-card-float .card-value { font-family:var(--font-head); font-size:1.3rem; font-weight:700; color:var(--navy) }
.jmh-hero-card-float .card-sub { font-size:.8rem; color:var(--gray-500); margin-top:2px }
.jmh-hero-card-float .card-bar { margin-top:10px; height:4px; background:var(--gray-200); border-radius:4px; overflow:hidden }
.jmh-hero-card-float .card-bar-fill { height:100%; background:linear-gradient(90deg,var(--navy),var(--blue)); border-radius:4px }
.jmh-hero-bg-lines {
  position: absolute;
  inset: 0;
  opacity: .06;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 60px,rgba(255,255,255,1) 60px,rgba(255,255,255,1) 61px),
    repeating-linear-gradient(90deg,transparent,transparent 60px,rgba(255,255,255,1) 60px,rgba(255,255,255,1) 61px);
}
.jmh-hero-circle { position:absolute; border-radius:50%; pointer-events:none }
.jmh-hero-circle.c1 { width:400px; height:400px; top:-100px; right:-80px; background:radial-gradient(circle,rgba(46,127,193,.4),transparent 70%) }
.jmh-hero-circle.c2 { width:250px; height:250px; bottom:-50px; left:20px; background:radial-gradient(circle,rgba(240,165,0,.25),transparent 70%) }

/* ── CONTAINER ── */
.jmh-container { max-width:1180px; margin:0 auto; padding:0 24px }

/* ── SECTIONS ── */
.jmh-section { padding:44px 24px }
.jmh-section-gray { background:var(--off-white) }
.jmh-section-title { font-family:var(--font-head); font-size:clamp(1.5rem,3vw,2.1rem); font-weight:700; color:var(--navy); margin-bottom:8px }
.jmh-section-subtitle { font-size:.93rem; color:var(--gray-500); max-width:560px; margin-bottom:24px }

/* ── TOPICS BAR ── */
.jmh-topics { background:var(--white); border-bottom:1px solid var(--gray-200); padding:0 24px }
.jmh-topics-inner { max-width:1180px; margin:0 auto; display:flex; gap:4px; overflow-x:auto; padding:14px 0; scrollbar-width:none }
.jmh-topics-inner::-webkit-scrollbar { display:none }
.jmh-topic-chip { white-space:nowrap; padding:7px 16px; border-radius:20px; font-size:.84rem; font-weight:500; color:var(--gray-700); border:1px solid var(--gray-200); background:var(--gray-100); text-decoration:none; transition:all .15s; flex-shrink:0 }
.jmh-topic-chip:hover,.jmh-topic-chip.active { background:var(--blue); color:white; border-color:var(--blue) }

/* ── CARDS ── */
.jmh-card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s,box-shadow .2s; display:flex; flex-direction:column }
.jmh-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md) }
.jmh-card-body { padding:18px 20px; flex:1; display:flex; flex-direction:column }
.jmh-card-tag { display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--blue); background:var(--blue-light); border-radius:4px; padding:3px 8px; margin-bottom:12px; width:fit-content }
.jmh-card h3 { font-family:var(--font-head); font-size:1.05rem; font-weight:700; color:var(--navy); line-height:1.35; margin-bottom:8px }
.jmh-card p { font-size:.88rem; color:var(--gray-500); flex:1; margin-bottom:14px; line-height:1.55 }
.jmh-card-thumb { aspect-ratio:16/10; background:linear-gradient(135deg,var(--blue-light),var(--gray-100)); display:flex; align-items:center; justify-content:center; font-size:2rem }

/* ── FEATURED ── */
.jmh-featured { display:grid; grid-template-columns:2fr 1fr; gap:20px; align-items:start }
.jmh-card-featured .jmh-card-thumb { aspect-ratio:16/9; font-size:2.8rem }
.jmh-card-featured h3 { font-size:1.35rem !important }
.jmh-sidebar-stack { display:flex; flex-direction:column; gap:10px }
.jmh-card-mini { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); padding:12px 14px; display:flex; gap:12px; align-items:center; box-shadow:var(--shadow-sm); transition:all .2s; text-decoration:none }
.jmh-card-mini:hover { transform:translateY(-2px); box-shadow:var(--shadow-md) }
.jmh-card-mini-icon { width:44px; height:44px; border-radius:10px; background:var(--blue-light); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0 }
.jmh-card-mini-text .tag { font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--blue); display:block; margin-bottom:3px }
.jmh-card-mini-text h4 { font-family:var(--font-head); font-size:.92rem; font-weight:700; color:var(--navy); line-height:1.3 }

/* ── BUTTONS ── */
.jmh-btn { display:inline-flex; align-items:center; gap:6px; font-size:.85rem; font-weight:600; text-decoration:none; border-radius:20px; padding:9px 20px; transition:all .2s; cursor:pointer; border:none; align-self:flex-start }
.jmh-btn-primary { background:var(--blue); color:white }
.jmh-btn-primary:hover { background:var(--navy) }

/* ── GEHALT ── */
.jmh-gehalt-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; overflow:visible }
.jmh-gehalt-card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); padding:20px 20px 16px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; transition:all .2s; text-decoration:none; display:block }
.jmh-gehalt-card::before { content:''; position:absolute; top:0; left:0; width:4px; height:100%; background:linear-gradient(180deg,var(--blue),var(--navy)); border-radius:0 }
.jmh-gehalt-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--blue) }
.jmh-gehalt-card .berufs-title { font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-500); margin-bottom:10px; display:block }
.jmh-gehalt-card .gehalt-wert { font-family:var(--font-head); font-size:1.5rem; font-weight:700; color:var(--blue); line-height:1 }
.jmh-gehalt-card .gehalt-label { font-size:.78rem; color:var(--gray-500); margin-top:4px }
.jmh-gehalt-card .gehalt-badge { position:absolute; top:14px; right:14px; background:var(--navy); color:white; font-size:.7rem; font-weight:600; padding:3px 10px; border-radius:12px; letter-spacing:.03em }

/* ── BERUFE ── */
.jmh-berufe-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.jmh-berufe-card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); padding:22px 20px; box-shadow:var(--shadow-sm) }
.jmh-berufe-card h3 { font-family:var(--font-head); font-size:1.05rem; font-weight:700; color:var(--navy); margin-bottom:16px }
.jmh-link-list { list-style:none; display:flex; flex-direction:column; gap:8px }
.jmh-link-list a { font-size:.88rem; color:var(--gray-700); text-decoration:none; transition:color .15s; display:flex; align-items:center; gap:6px }
.jmh-link-list a::before { content:'→'; color:var(--blue); font-size:.8rem }
.jmh-link-list a:hover { color:var(--blue) }

/* ── CTA STRIP ── */
.jmh-cta-strip { background:linear-gradient(135deg,var(--navy) 0%,var(--navy-dark) 60%,#1a3870 100%); padding:40px 24px; position:relative; overflow:hidden }
.jmh-cta-strip::after { content:''; position:absolute; right:-60px; top:-60px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,rgba(46,127,193,.25),transparent 70%); pointer-events:none }
.jmh-cta-inner { max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:32px }
.jmh-cta-text h2 { font-family:var(--font-head); font-size:clamp(1.4rem,3vw,2rem); font-weight:700; color:white; margin-bottom:8px }
.jmh-cta-text p { font-size:.95rem; color:rgba(255,255,255,.65) }
.jmh-cta-socials { display:flex; gap:12px; flex-shrink:0 }
.jmh-cta-ig { display:inline-flex; align-items:center; gap:10px; padding:14px 28px; border-radius:6px; font-size:.9rem; font-weight:700; text-decoration:none; background:linear-gradient(135deg,#f09433,#e6683c,#dc2743); color:white; transition:all .2s }
.jmh-cta-ig:hover { opacity:.9; transform:translateY(-2px) }
.jmh-cta-li { display:inline-flex; align-items:center; gap:10px; padding:14px 28px; border-radius:6px; font-size:.9rem; font-weight:700; text-decoration:none; background:#0077B5; color:white; transition:all .2s }
.jmh-cta-li:hover { background:#005f8d; transform:translateY(-2px) }

/* Trust strip */
.jmh-cta-strip .jmh-trust-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px;
  text-align: center;
}
.jmh-cta-strip .jmh-trust-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px;
}
.jmh-cta-strip .jmh-trust-item svg { flex-shrink:0; margin-bottom:4px }
.jmh-cta-strip .jmh-trust-item strong {
  display: block;
  font-size: .92rem;
  font-weight: 700;
  color: #ffffff !important;
}
.jmh-cta-strip .jmh-trust-item span {
  display: block;
  font-size: .8rem;
  color: rgba(255,255,255,.55) !important;
}
@media(max-width:640px) {
  .jmh-cta-strip .jmh-trust-inner { grid-template-columns: 1fr !important; gap:24px }
}

/* ── FOOTER ── */
.jmh-footer {
  background: var(--navy-dark);
  color: rgba(255,255,255,.7);
  padding: 44px 24px 0;
}
.jmh-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.jmh-footer-brand p { margin-top:14px; font-size:.9rem; line-height:1.6; max-width:260px; color:rgba(255,255,255,.55) }
.jmh-footer-logo { display:flex; align-items:baseline; margin-bottom:4px }
.jmh-footer-logo-job { font-family:var(--font-head); font-size:1.8rem; font-weight:800; color:var(--blue); letter-spacing:-.01em }
.jmh-footer-logo-happy { font-family:var(--font-head); font-size:1.8rem; font-weight:800; color:white; letter-spacing:-.01em }
.jmh-footer-links h4 { font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:14px }
.jmh-footer-links ul { list-style:none; display:flex; flex-direction:column; gap:8px }
.jmh-footer-links a { font-size:.88rem; color:rgba(255,255,255,.65); transition:color .15s; text-decoration:none }
.jmh-footer-links a:hover { color:white }
.jmh-footer-social { display:flex; gap:10px; margin-top:12px }
.jmh-footer-social a { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); transition:all .2s }
.jmh-footer-social a:hover { background:rgba(255,255,255,.2); transform:translateY(-2px) }
.jmh-footer-social svg { width:16px; height:16px }
.jmh-footer-bottom { max-width:1180px; margin:0 auto; padding:18px 0; font-size:.8rem; color:rgba(255,255,255,.3) }

/* ── COOKIE ── */
.jmh-cookie { position:fixed; bottom:-120px; left:50%; transform:translateX(-50%); width:min(600px,calc(100% - 32px)); background:var(--white); border:1px solid var(--gray-200); border-radius:14px; box-shadow:var(--shadow-lg); z-index:9999; padding:18px 22px; transition:bottom .4s cubic-bezier(.22,1,.36,1) }
.jmh-cookie.show { bottom:20px }
.jmh-cookie-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap }
.jmh-cookie p { font-size:.88rem; color:var(--gray-700) }
.jmh-cookie-btns { display:flex; gap:8px; flex-shrink:0 }
.jmh-cookie-accept { background:var(--blue); color:white; border:none; border-radius:20px; padding:8px 18px; font-size:.83rem; font-weight:600; cursor:pointer; transition:background .15s }
.jmh-cookie-accept:hover { background:var(--navy) }
.jmh-cookie-decline { background:var(--gray-100); color:var(--gray-700); border:none; border-radius:20px; padding:8px 16px; font-size:.83rem; font-weight:500; cursor:pointer }
.jmh-cookie-decline:hover { background:var(--gray-200) }

/* ── PROSE (articles, legal pages) ── */
.jmh-prose { max-width:760px; margin:0 auto; padding:60px 24px }
.jmh-prose h1 { font-family:var(--font-head); font-size:2.2rem; font-weight:700; color:var(--navy); margin-bottom:8px }
.jmh-prose .lead { font-size:1.05rem; color:var(--gray-500); margin-bottom:40px; padding-bottom:32px; border-bottom:2px solid var(--gray-200) }
.jmh-prose h2 { font-family:var(--font-head); font-size:1.3rem; font-weight:700; color:var(--navy); margin:36px 0 12px }
.jmh-prose h3 { font-family:var(--font-head); font-size:1.1rem; font-weight:700; color:var(--navy); margin:28px 0 10px }
.jmh-prose p,.jmh-prose li { font-size:.95rem; color:var(--gray-700); line-height:1.75; margin-bottom:12px }
.jmh-prose ul,.jmh-prose ol { padding-left:20px; margin-bottom:16px }
.jmh-prose a { color:var(--blue); text-decoration:underline }
.jmh-prose strong { color:var(--dark); font-weight:600 }
.jmh-prose table { width:100%; border-collapse:collapse; margin:20px 0 }
.jmh-prose th,.jmh-prose td { padding:10px 14px; border:1px solid var(--gray-200); font-size:.9rem; text-align:left }
.jmh-prose th { background:var(--gray-100); font-weight:600; color:var(--navy) }
.jmh-prose img { border-radius:var(--radius); margin:20px 0 }

/* ── ARTICLE AUTHOR BAR ── */
.jmh-prose p.jmh-article-author-bar {
  font-size: .88rem;
  color: var(--gray-500);
  margin: 8px 0 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gray-200);
  line-height: 36px;
}
.jmh-prose p.jmh-article-author-bar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  vertical-align: middle;
  margin: 0 6px 0 0;
  background: #e8f3fb;
}
.jmh-prose p.jmh-article-author-bar strong {
  color: var(--navy);
  font-weight: 600;
}

/* ── BREADCRUMBS ── */
.jmh-breadcrumbs { font-size:.82rem; color:var(--gray-500); margin-bottom:20px }
.jmh-breadcrumbs a { color:var(--blue); text-decoration:none }
.jmh-breadcrumbs a:hover { text-decoration:underline }

/* ── AUTHOR BYLINE ── */
.jmh-author-byline { display:flex; align-items:center; gap:12px; margin-bottom:24px; padding:16px; background:var(--gray-100); border-radius:var(--radius); border:1px solid var(--gray-200) }
.jmh-author-byline img { width:48px; height:48px; border-radius:50%; object-fit:cover; object-position:top; flex-shrink:0 }
.jmh-author-byline-info { font-size:.85rem; color:var(--gray-700) }
.jmh-author-byline-info strong { display:block; font-family:var(--font-head); font-size:.95rem; color:var(--navy) }
.jmh-author-byline-info span { font-size:.78rem; color:var(--gray-500) }

/* ── ARTICLE TEMPLATE ── */
.jmh-article-hero {
  background: var(--navy-dark);
  padding: 48px 24px 44px;
  position: relative;
  overflow: hidden;
}
.jmh-article-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .05;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 60px,rgba(255,255,255,1) 60px,rgba(255,255,255,1) 61px),
    repeating-linear-gradient(90deg,transparent,transparent 60px,rgba(255,255,255,1) 60px,rgba(255,255,255,1) 61px);
}
.jmh-article-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.jmh-article-breadcrumbs { font-size:.8rem; margin-bottom:16px }
.jmh-article-breadcrumbs,.jmh-article-breadcrumbs a { color:rgba(255,255,255,.45) }
.jmh-article-breadcrumbs a:hover { color:rgba(255,255,255,.8) }
.jmh-article-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: white;
  line-height: 1.2;
  margin-bottom: 14px;
}
.jmh-article-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  color: rgba(255,255,255,.5);
}
.jmh-article-sep { opacity:.4 }

.jmh-article-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
}

/* Article content area */
.jmh-article-content {
  min-width: 0;
}
.jmh-article-content h2 {
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--navy);
  margin: 40px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-200);
}
.jmh-article-content h2:first-child { border-top:none; padding-top:0; margin-top:0 }
.jmh-article-content h3 {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  margin: 28px 0 10px;
}
.jmh-article-content p {
  font-size: .95rem;
  color: var(--gray-700);
  line-height: 1.8;
  margin-bottom: 14px;
}
.jmh-article-content ul,.jmh-article-content ol {
  padding-left: 22px;
  margin-bottom: 18px;
}
.jmh-article-content li {
  font-size: .95rem;
  color: var(--gray-700);
  line-height: 1.75;
  margin-bottom: 6px;
}
.jmh-article-content a { color:var(--blue); text-decoration:underline }
.jmh-article-content a:hover { color:var(--navy) }
.jmh-article-content strong { color:var(--dark); font-weight:600 }
.jmh-article-content img { border-radius:var(--radius); margin:20px 0; max-width:100% }
.jmh-article-content table { width:100%; border-collapse:collapse; margin:24px 0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--gray-200) }
.jmh-article-content th { background:var(--navy); color:white; padding:12px 16px; font-size:.85rem; font-weight:600; text-align:left }
.jmh-article-content td { padding:10px 16px; font-size:.9rem; color:var(--gray-700); border-bottom:1px solid var(--gray-200) }
.jmh-article-content tr:last-child td { border-bottom:none }
.jmh-article-content tr:nth-child(even) td { background:var(--gray-100) }
.jmh-article-content hr { border:none; border-top:1px solid var(--gray-200); margin:32px 0 }

/* Sidebar */
.jmh-article-sidebar {
  position: sticky;
  top: 88px;
}
.jmh-author-box {
  background: var(--gray-100);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
  border: 1px solid var(--gray-200);
}
.jmh-author-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}
.jmh-author-label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gray-500);
  display: block;
  margin-bottom: 2px;
}
.jmh-author-box strong {
  font-family: var(--font-head);
  font-size: .95rem;
  color: var(--navy);
  display: block;
  margin-bottom: 6px;
}
.jmh-author-box p {
  font-size: .82rem;
  color: var(--gray-500);
  line-height: 1.5;
  margin: 0;
}
.jmh-quick-nav {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 20px;
}
.jmh-quick-nav h4 {
  font-family: var(--font-head);
  font-size: .9rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--blue);
}
.jmh-quick-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.jmh-quick-nav a {
  font-size: .82rem;
  color: var(--gray-700);
  text-decoration: none;
  padding: 4px 0;
  display: block;
  transition: color .15s;
  line-height: 1.4;
}
.jmh-quick-nav a:hover { color:var(--blue) }

@media(max-width:900px) {
  .jmh-article-layout { grid-template-columns:1fr; }
  .jmh-article-sidebar { position:static; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
}
@media(max-width:640px) {
  .jmh-article-sidebar { grid-template-columns:1fr; }
  .jmh-article-hero { padding:32px 16px 28px }
}

/* ── GRID (blog listing) ── */
.jmh-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
@media(max-width:900px) { .jmh-grid-3 { grid-template-columns:repeat(2,1fr) } }
@media(max-width:640px) { .jmh-grid-3 { grid-template-columns:1fr } }


/* ── AUDIENCE SECTION ── */
.jmh-audience-section { padding:48px 24px; background:var(--off-white) }
.jmh-audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 28px;
}
.jmh-audience-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 28px 24px 22px;
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.jmh-audience-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}
.jmh-audience-card:nth-child(1)::before { background: linear-gradient(90deg, #2e7fc1, #5ba8d4) }
.jmh-audience-card:nth-child(2)::before { background: linear-gradient(90deg, #1e2d5a, #2e7fc1) }
.jmh-audience-card:nth-child(3)::before { background: linear-gradient(90deg, #e05c2a, #f09433) }
.jmh-audience-card:nth-child(4)::before { background: linear-gradient(90deg, #16a34a, #5ba8d4) }
.jmh-audience-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md) }
.jmh-audience-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.jmh-audience-card:nth-child(1) .jmh-audience-icon { background: #e8f3fb }
.jmh-audience-card:nth-child(2) .jmh-audience-icon { background: #e8edf5 }
.jmh-audience-card:nth-child(3) .jmh-audience-icon { background: #fef3e2 }
.jmh-audience-card:nth-child(4) .jmh-audience-icon { background: #e8f8ee }
.jmh-audience-card h3 {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.jmh-audience-card .jmh-audience-desc {
  font-size: .85rem;
  color: var(--gray-500);
  margin-bottom: 16px;
  line-height: 1.5;
}
.jmh-audience-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.jmh-audience-links a {
  font-size: .84rem;
  color: var(--gray-700);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .15s;
}
.jmh-audience-links a::before { content: '\2192'; color: var(--blue); font-size: .75rem }
.jmh-audience-links a:hover { color: var(--blue) }
@media(max-width:900px) { .jmh-audience-grid { grid-template-columns: repeat(2, 1fr) } }
@media(max-width:640px) { .jmh-audience-grid { grid-template-columns: 1fr } }

/* ── RESPONSIVE ── */
@media(max-width:900px) {
  .jmh-hero-inner { grid-template-columns:1fr; text-align:center }
  .jmh-hero-visual { display:none }
  .jmh-hero-sub { margin:0 auto 32px }
  .jmh-hero-btns { justify-content:center }
  .jmh-hero-stats { justify-content:center }
  .jmh-featured { grid-template-columns:1fr }
  .jmh-gehalt-grid { grid-template-columns:repeat(2,1fr) }
  .jmh-berufe-grid { grid-template-columns:repeat(2,1fr) }
  .jmh-footer-inner { grid-template-columns:1fr 1fr }
  .jmh-cta-inner { flex-direction:column; text-align:center }
}
@media(max-width:640px) {
  .jmh-nav-links { display:none; position:absolute; top:70px; left:0; right:0; flex-direction:column; background:white; padding:12px 16px 20px; border-bottom:1px solid var(--gray-200); box-shadow:var(--shadow-md); gap:2px; z-index:9999 }
  .jmh-nav-links.open { display:flex }
  .jmh-ham { display:flex }
  .jmh-gehalt-grid,.jmh-berufe-grid,.jmh-featured { grid-template-columns:1fr }
  .jmh-footer-inner { grid-template-columns:1fr }
  .jmh-section { padding:32px 16px }
  .jmh-cta-socials { flex-direction:column }
}