/* Queb Podcast-Planer – Gestaltung angelehnt an queb.org
   Ink #182246 · Navy #101B3A · Navy deep #0A1230 · Pink #D71852 · Blau #2454FF
   Creme #FCF2E8 · Paper #F6F6F4 · Stone #E6E7EC / #D9DBE3 / #5B6072 · Schrift: Geist */
:root {
  --ink: #182246;
  --navy: #101B3A;
  --navy-deep: #0A1230;
  --pink: #D71852;
  --pink-dark: #B8113F;
  --pink-light: #FFD1D5;
  --blue: #2454FF;
  --blue-link: #2180C3;
  --blue-pale: #E7ECFF;
  --cream: #FCF2E8;
  --paper: #F6F6F4;
  --stone-100: #F1F1EF;
  --stone-200: #E6E7EC;
  --stone-300: #D9DBE3;
  --stone-500: #5B6072;
  --white: #FFFFFF;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-soft: 0 1px 3px rgba(16,27,58,.07), 0 8px 24px rgba(16,27,58,.08);
  --shadow-card: 0 2px 6px rgba(16,27,58,.06), 0 12px 30px rgba(16,27,58,.09);
  --font: 'Geist', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 15px/1.6 var(--font); letter-spacing: -0.3px; }
body.is-admin { background: var(--paper); }
a { color: var(--blue-link); }
h1, h2, h3, h4 { font-family: var(--font); font-weight: 700; line-height: 1.15; margin: 0 0 .6em; color: var(--ink); }
h1 { font-size: clamp(2rem, 1.82rem + 0.89vw, 2.625rem); letter-spacing: -0.9px; }
h2 { font-size: clamp(1.5rem, 1.4rem + 0.5vw, 1.875rem); letter-spacing: -0.75px; margin-top: 1.4em; }
h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.4px; }
code { background: var(--blue-pale); padding: 1px 6px; border-radius: 5px; font-size: 13px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 780px; }
main.wrap { padding-top: 36px; padding-bottom: 64px; min-height: 70vh; }
.muted { color: var(--stone-500); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }

/* ---------- Header ---------- */
.site-header { background: var(--white); border-bottom: 1px solid var(--stone-200); position: sticky; top: 0; z-index: 20; }
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 72px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand .logo { width: 44px; height: 44px; border-radius: 50%; display: block; }
.brand-text { font-size: 20px; font-weight: 500; letter-spacing: -0.6px; }
.brand-text strong { font-weight: 700; color: var(--pink); }
.brand-text small { font-size: 13px; font-weight: 600; color: var(--stone-500); margin-left: 4px; padding: 2px 8px; background: var(--stone-100); border-radius: 999px; letter-spacing: 0; vertical-align: 2px; }
.main-nav { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.main-nav a { color: var(--ink); text-decoration: none; padding: 8px 11px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.main-nav a:hover { background: var(--stone-100); }
.main-nav a.active { background: var(--ink); color: #fff; }
.main-nav a.btn-nav { background: var(--navy); color: #fff; padding: 10px 18px; margin-left: 8px; }
.main-nav a.btn-nav:hover { background: var(--pink); }
.main-nav a.btn-sm-nav { box-shadow: inset 0 0 0 1px var(--stone-300); margin-left: 6px; }
.count { background: var(--pink); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 12px; margin-left: 3px; }
.main-nav a.active .count { background: #fff; color: var(--pink); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; color: var(--ink); font-size: 26px; cursor: pointer; }
@media (max-width: 1080px) {
  .is-admin .nav-toggle { display: block; }
  .is-admin .main-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: 14px; }
  .is-admin.nav-open .main-nav { display: flex; }
  .is-admin .main-nav a.btn-sm-nav { margin-left: 0; text-align: center; }
  .public-nav a:not(.btn-nav):not(.btn-nav-ghost) { display: none; }
}
@media (max-width: 760px) {
  .public-nav a.btn-nav-ghost { display: none; }
  .brand-text { font-size: 18px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,.82); padding: 56px 0 28px; font-size: 14px; }
.footer-inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.footer-brand { display: flex; gap: 14px; max-width: 480px; }
.footer-brand img { border-radius: 50%; flex: none; }
.footer-brand strong { display: block; color: #fff; font-size: 17px; margin-bottom: 4px; }
.site-footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-copy { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: rgba(255,255,255,.55); }

/* ---------- Public sections ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; }
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); }
.hero { padding: 64px 0 56px; }
.hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(2.25rem, 1.96rem + 1.43vw, 3.25rem); letter-spacing: -1.2px; line-height: 1.08; margin-bottom: 20px; }
.hero h1 .accent { color: var(--pink); display: block; }
.hero p { color: var(--ink); max-width: 560px; margin: 0 0 10px; }
.hero p.lead { font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem); }
.hero-visual { display: flex; justify-content: center; }
.hero-visual img { width: min(360px, 100%); height: auto; filter: drop-shadow(0 18px 40px rgba(215,24,82,.25)); }
@media (max-width: 860px) {
  .hero { padding: 40px 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-visual { order: -1; justify-content: flex-start; }
  .hero-visual img { width: 120px; }
}
.counter { background: var(--pink); color: #fff; padding: 40px 0; }
.counter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.counter-grid div { text-align: center; }
.counter-grid strong { display: block; font-size: clamp(2.5rem, 2.29rem + 1.07vw, 3.25rem); font-weight: 700; letter-spacing: -1.5px; line-height: 1.1; }
.counter-grid span { font-size: 14px; font-weight: 500; opacity: .92; }
@media (max-width: 700px) { .counter-grid { grid-template-columns: repeat(2, 1fr); } }
.section { padding: 72px 0; }
.section.cream { background: var(--cream); }
.section-title { font-size: clamp(1.875rem, 1.77rem + 0.54vw, 2.25rem); margin-top: 0; }
.section-lead { max-width: 640px; margin: -4px 0 28px; }
.format-card { background: var(--paper); border-radius: var(--radius); padding: 24px; }
.format-card .nr { font-weight: 700; color: var(--pink); font-size: 14px; }
.format-card h3 { margin: 8px 0 8px; }
.format-card p { margin: 0; color: var(--stone-500); font-size: 14px; }
.cta-band { background: linear-gradient(120deg, var(--navy) 0%, var(--blue) 65%, #E31C79 130%); color: #fff; padding: 56px 0; }
.cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; margin: 0 0 6px; }
.cta-band p { margin: 0; color: rgba(255,255,255,.85); }

/* ---------- Cards & layout ---------- */
.card { background: var(--white); border: 1px solid var(--stone-200); border-radius: var(--radius); padding: 22px; margin-bottom: 16px; box-shadow: var(--shadow-soft); }
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.grid.formats { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid2 { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cols { display: grid; gap: 24px; grid-template-columns: 2fr 1fr; align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }
.kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 24px; }
.kpi { background: var(--white); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-soft); }
.kpi strong { display: block; font-size: 32px; letter-spacing: -1px; line-height: 1.1; }
.kpi span { color: var(--stone-500); font-size: 13px; font-weight: 500; }
.kpi.accent { background: var(--pink); color: #fff; }
.kpi.accent span { color: rgba(255,255,255,.9); }

/* ---------- Topic cards ---------- */
.topic { display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-card); transition: transform .15s ease, box-shadow .15s ease; }
.topic:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(16,27,58,.08), 0 18px 40px rgba(16,27,58,.12); }
.topic-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.topic .nr { font-weight: 700; font-size: 14px; color: #fff; background: var(--ink); border-radius: 999px; padding: 2px 10px; }
.topic.cat-employer-branding .nr { background: var(--pink); }
.topic.cat-regulierung .nr { background: var(--blue); }
.topic.cat-ki-hr-tech .nr { background: var(--navy-deep); }
.topic.cat-arbeitswelt-fuehrung .nr { background: var(--stone-500); }
.topic .cat { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--stone-500); }
.topic h3 { margin: 0 0 10px; font-size: 18px; line-height: 1.3; }
.topic p { color: var(--stone-500); font-size: 14px; margin: 0 0 18px; flex: 1; }
.topic .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.topic.taken { opacity: .78; box-shadow: var(--shadow-soft); }
.topic.taken:hover { transform: none; }
.topic .actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }

.chip { display: inline-block; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: var(--stone-100); color: var(--ink); white-space: nowrap; }
.chip.format { background: var(--blue-pale); color: var(--ink); font-weight: 600; }

.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.s-offen, .s-frei { background: var(--blue-pale); color: var(--blue); }
.s-angefragt, .s-reserviert { background: var(--white); color: var(--pink); box-shadow: inset 0 0 0 1.5px var(--pink); }
.s-gebucht, .s-bestaetigt { background: var(--ink); color: #fff; }
.s-aufgenommen { background: var(--blue); color: #fff; }
.s-geschnitten { background: var(--pink-light); color: var(--pink-dark); }
.s-veroeffentlicht { background: var(--pink); color: #fff; }
.s-abgelehnt, .s-storniert { background: var(--stone-100); color: var(--stone-500); text-decoration: line-through; }
.s-gesperrt { background: var(--stone-100); color: var(--stone-500); }

/* ---------- Filters ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.filters a { text-decoration: none; padding: 7px 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--stone-300); color: var(--ink); font-size: 14px; font-weight: 500; }
.filters a:hover { border-color: var(--ink); }
.filters a.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.filters .sep { width: 1px; height: 22px; background: var(--stone-300); margin: 0 4px; }
.section .filters:last-of-type { margin-bottom: 28px; }

/* ---------- Buttons ---------- */
.btn { display: inline-block; background: var(--pink); color: #fff; border: 1px solid transparent; border-radius: 999px; padding: 11px 22px; font: 700 14px var(--font); letter-spacing: -0.2px; text-decoration: none; cursor: pointer; transition: background .15s ease; }
.btn:hover { background: var(--pink-dark); }
.btn.accent { background: var(--pink); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--stone-300); }
.btn.ghost:hover { border-color: var(--ink); background: var(--white); }
.btn.light { background: #fff; color: var(--ink); }
.btn.light:hover { background: var(--pink-light); }
.btn.danger { background: transparent; color: var(--pink); border-color: var(--pink); }
.btn.danger:hover { background: var(--pink); color: #fff; }
.btn.sm { padding: 6px 13px; font-size: 13px; }
.btn[disabled] { background: var(--stone-200); color: var(--stone-500); cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.is-admin .btn:not(.ghost):not(.danger):not(.light) { background: var(--ink); }
.is-admin .btn:not(.ghost):not(.danger):not(.light):hover { background: var(--navy-deep); }

/* ---------- Forms ---------- */
.form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 14px; }
.form label .hint { font-weight: 400; color: var(--stone-500); font-size: 13px; }
input[type=text], input[type=email], input[type=url], input[type=password], input[type=tel], input[type=date], input[type=time], input[type=number], input[type=datetime-local], input:not([type]), input[type=file], select, textarea {
  width: 100%; margin-top: 5px; padding: 10px 13px; border: 1px solid var(--stone-300); border-radius: var(--radius-sm); font: 400 15px var(--font); background: #fff; color: var(--ink);
}
textarea { min-height: 100px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--blue-pale); border-color: var(--blue); }
.form label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.form label.check input { margin-top: 4px; width: auto; accent-color: var(--pink); }
input[type=radio], input[type=checkbox] { accent-color: var(--pink); }
.hp { position: absolute; left: -9999px; }
fieldset { border: 0; background: var(--white); border-radius: var(--radius); padding: 22px 22px 8px; margin: 0 0 18px; box-shadow: var(--shadow-soft); }
legend { float: left; width: 100%; font-weight: 700; font-size: 18px; letter-spacing: -0.4px; padding: 0; margin-bottom: 14px; }
legend + * { clear: both; }
.is-public main.wrap { background: transparent; }
body.page-form { background: var(--cream); }

.slot-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin: 4px 0 14px; }
.form .slot-opt, .slot-opt { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--stone-300); border-radius: var(--radius-sm); padding: 11px 13px; cursor: pointer; font-weight: 400 !important; margin: 0 !important; background: #fff; transition: border-color .12s; }
.slot-opt:hover { border-color: var(--ink); }
.slot-opt:has(input:checked) { border-color: var(--pink); background: #FFF6F8; box-shadow: inset 0 0 0 1px var(--pink); }
.slot-opt input { margin-top: 4px; }
.slot-opt strong { display: block; }

/* ---------- Alerts ---------- */
.alert { padding: 13px 18px; border-radius: var(--radius-sm); margin-bottom: 14px; background: var(--blue-pale); color: var(--ink); }
.alert.ok { background: var(--blue-pale); }
.alert.err { background: #FDE7EC; color: var(--pink-dark); }
.alert.warn { background: var(--cream); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-soft); }
table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
table.list th { text-align: left; font-weight: 600; color: var(--stone-500); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding: 12px 14px; border-bottom: 1px solid var(--stone-200); white-space: nowrap; }
table.list td { padding: 12px 14px; border-bottom: 1px solid var(--stone-200); vertical-align: top; }
table.list tr:last-child td { border-bottom: 0; }
table.list tr:hover td { background: #FAFAF9; }
table.list select { margin: 0; padding: 5px 9px; font-size: 13px; width: auto; border-radius: 999px; }

/* ---------- Pipeline board ---------- */
.board { display: grid; grid-template-columns: repeat(6, minmax(190px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.col { background: var(--stone-100); border-radius: var(--radius); padding: 12px; min-height: 120px; }
.col h3 { font-size: 14px; display: flex; justify-content: space-between; margin: 2px 4px 12px; }
.col .item { background: #fff; border-radius: var(--radius-sm); padding: 12px; margin-bottom: 8px; font-size: 13px; box-shadow: 0 1px 2px rgba(16,27,58,.06); }
.col .item a { color: var(--ink); text-decoration: none; font-weight: 600; }
.col .item .muted { font-size: 12px; margin-top: 4px; }

/* ---------- Calendar ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--stone-200); gap: 1px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); }
.calendar .dow { background: #fff; padding: 9px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--stone-500); text-align: center; }
.calendar .day { background: #fff; min-height: 112px; padding: 7px; font-size: 12px; }
.calendar .day.other { background: var(--paper); color: #A3A7B4; }
.calendar .day.today .num { background: var(--pink); color: #fff; border-radius: 999px; padding: 0 8px; display: inline-block; }
.calendar .num { font-weight: 600; margin-bottom: 5px; display: block; }
.ev { display: block; border-radius: 6px; padding: 3px 6px; margin-bottom: 3px; text-decoration: none; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.ev.rec { background: var(--ink); color: #fff; }
.ev.pub { background: var(--pink); color: #fff; }
.ev.free { background: var(--blue-pale); color: var(--blue); }
.ev.req { background: #fff; color: var(--pink); box-shadow: inset 0 0 0 1px var(--pink); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; margin-top: 12px; }
.legend span::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.legend .l-rec::before { background: var(--ink); }
.legend .l-pub::before { background: var(--pink); }
.legend .l-free::before { background: var(--blue-pale); }
.legend .l-req::before { background: #fff; box-shadow: inset 0 0 0 1px var(--pink); }
@media (max-width: 700px) {
  .calendar { grid-template-columns: 1fr; }
  .calendar .dow, .calendar .day.other { display: none; }
  .calendar .day { min-height: 0; }
  .calendar .day:not(:has(.ev)) { display: none; }
}

dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
dl.facts dt { color: var(--stone-500); }
dl.facts dd { margin: 0; }
.avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid var(--pink-light); }
.avatar.sm { width: 36px; height: 36px; border-width: 2px; vertical-align: middle; }
.steps { display: flex; gap: 4px; margin: 14px 0 6px; flex-wrap: wrap; }
.steps span { font-size: 12px; font-weight: 600; padding: 5px 12px; background: var(--stone-100); color: var(--stone-500); border-radius: 999px; }
.steps span.done { background: var(--ink); color: #fff; }
.steps span.cur { background: var(--pink); color: #fff; }
.empty { text-align: center; color: var(--stone-500); padding: 32px; }

/* ---------- Host ---------- */
.host-grid { display: grid; grid-template-columns: 320px 1fr; gap: 56px; align-items: center; }
.host-photo { position: relative; }
.host-photo::before { content: ''; position: absolute; inset: -14px 14px 14px -14px; border-radius: 50%; background: var(--pink); }
.host-photo img { position: relative; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; display: block; box-shadow: var(--shadow-card); }
.host .section-title { margin-bottom: 4px; }
.host-role { color: var(--pink); font-weight: 600; margin: 0 0 16px; }
.host p { max-width: 640px; }
.host-links { margin-top: 20px; }
.section.host + .section { padding-top: 24px; }
@media (max-width: 760px) {
  .host-grid { grid-template-columns: 1fr; gap: 32px; }
  .host-photo { width: 200px; margin-left: 14px; }
}

/* ---------- Themenvorschlag ---------- */
.main-nav a.btn-nav-ghost { box-shadow: inset 0 0 0 1.5px var(--pink); color: var(--pink); padding: 9px 16px; margin-left: 8px; }
.main-nav a.btn-nav-ghost:hover { background: var(--pink); color: #fff; }
.topic.propose-card { text-decoration: none; color: var(--ink); background: transparent; box-shadow: none; border: 2px dashed var(--pink); align-items: flex-start; justify-content: center; min-height: 260px; }
.topic.propose-card:hover { background: #fff; box-shadow: var(--shadow-card); }
.topic.propose-card .plus { width: 44px; height: 44px; border-radius: 50%; background: var(--pink); color: #fff; font-size: 28px; font-weight: 500; line-height: 42px; text-align: center; margin-bottom: 14px; }
.topic.propose-card p { flex: 0; }
.s-neu { background: #fff; color: var(--pink); box-shadow: inset 0 0 0 1.5px var(--pink); }
.s-angenommen { background: var(--ink); color: #fff; }
.is-admin .main-nav a { padding: 8px 9px; font-size: 13.5px; }
.is-admin .main-nav a.btn-sm-nav { padding: 8px 12px; }