/* ==========================================================================
   Katja Seibert-Bolz – zentrales Stylesheet
   Gilt für alle Seiten (Startseite, Kontakt, Podcast, Blog, Beiträge, Impressum)
   ========================================================================== */

:root{
  --navy:#1B2A44;
  --navy-deep:#14213A;
  --gold:#FFBF2D;
  --ink:#20293A;
  --muted:#5B6472;
  --line:#E7E7E7;
  --bg:#FFFFFF;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Work Sans', system-ui, sans-serif;
  -webkit-text-size-adjust:100%;
}
h1, h2, h3{ font-family:'Libre Franklin', system-ui, sans-serif; margin:0; }
a{ color:var(--navy); }
img{ max-width:100%; display:block; }

.container{ max-width:1120px; margin:0 auto; padding-inline:24px; }
.container-narrow{ max-width:760px; margin:0 auto; padding-inline:24px; }

/* Accessibility */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--navy); color:#fff; padding:12px 20px;
  z-index:100; border-radius:0 0 6px 0;
}
.skip-link:focus{ left:0; top:0; }
a:focus-visible, summary:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px;
}

/* Navigation */
header{ border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:10; }
.nav-row{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.logo{ font-family:'Libre Franklin',sans-serif; font-weight:800; font-size:1.05rem; color:var(--navy); text-decoration:none; }
.nav-links{ display:flex; align-items:center; gap:32px; list-style:none; margin:0; padding:0; }
.nav-links a{ font-size:0.85rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; text-decoration:none; color:var(--ink); padding-bottom:4px; }
.nav-links a[aria-current="page"]{ color:var(--navy); border-bottom:2px solid var(--gold); }
.nav-toggle{ display:none; }

@media (max-width:760px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  details.nav-toggle{ position:relative; }
  details.nav-toggle summary{
    list-style:none; cursor:pointer; width:40px; height:40px;
    display:flex; align-items:center; justify-content:center; border-radius:6px;
  }
  details.nav-toggle summary::-webkit-details-marker{ display:none; }
  details.nav-toggle[open] summary{ background:#F2F2F2; }
  details.nav-toggle .menu{
    position:absolute; right:0; top:52px; background:#fff;
    border:1px solid var(--line); border-radius:10px; padding:8px;
    display:flex; flex-direction:column; min-width:200px;
    box-shadow:0 12px 28px rgba(20,33,58,0.12);
  }
  details.nav-toggle .menu a{ padding:12px 14px; font-size:0.9rem; font-weight:600; color:var(--ink); text-decoration:none; border-radius:6px; }
  details.nav-toggle .menu a:hover{ background:#F5F5F5; }
}

/* Eyebrow label + page headers */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.8rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--navy); margin-bottom:16px;
}
.eyebrow::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--gold); }
.page-head{ padding:clamp(40px,7vw,72px) 0 clamp(24px,5vw,40px); }
.page-head h1{ font-size:clamp(28px,4.2vw,42px); font-weight:800; margin-bottom:16px; }
.page-head p{ font-size:clamp(15px,2vw,17px); color:var(--muted); max-width:640px; line-height:1.65; }

/* Buttons */
.btn{
  display:inline-block; background:var(--navy); color:#fff; text-decoration:none;
  font-size:0.85rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  padding:16px 28px; border-radius:4px; border:none; cursor:pointer;
  transition:background-color .15s ease;
}
.btn:hover{ background:var(--navy-deep); }

/* ---- Startseite: Hero ---- */
.hero{ padding:clamp(40px,8vw,88px) 0; }
.hero-grid{ display:grid; grid-template-columns:300px 1fr; gap:clamp(28px,6vw,64px); align-items:center; }
@media (max-width:760px){ .hero-grid{ grid-template-columns:1fr; text-align:center; justify-items:center; } }
.portrait{
  width:clamp(180px,26vw,300px); height:clamp(180px,26vw,300px);
  border-radius:50%; overflow:hidden; border:4px solid var(--gold); flex-shrink:0;
}
.portrait img{ width:100%; height:100%; object-fit:cover; }
.hero h1{ font-size:clamp(28px,4.2vw,46px); font-weight:800; line-height:1.2; margin-bottom:18px; }
.hero p{ font-size:clamp(15px,2vw,17px); color:var(--muted); max-width:560px; line-height:1.65; margin-bottom:28px; }
@media (max-width:760px){ .hero p{ margin-inline:auto; } }

/* ---- Startseite / Blog: Beitragsliste ---- */
.blog{ padding:clamp(48px,8vw,88px) 0; border-top:1px solid var(--line); }
.blog h2{ font-size:clamp(22px,3vw,28px); font-weight:800; margin-bottom:32px; }
.post-list{ display:flex; flex-direction:column; }
.post{ display:grid; grid-template-columns:140px 1fr; gap:24px; padding:24px 0; border-top:1px solid var(--line); }
.post:last-child{ border-bottom:1px solid var(--line); }
@media (max-width:600px){ .post{ grid-template-columns:1fr; gap:8px; } }
.post time{ font-size:0.8rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted); }
.post .tag{ display:inline-block; margin-top:8px; font-size:0.72rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--navy); }
.post h2, .post h3{ font-size:1.05rem; font-weight:700; margin:8px 0 6px; }
.post h2 a, .post h3 a{ color:var(--ink); text-decoration:none; }
.post h2 a:hover, .post h3 a:hover{ color:var(--navy); text-decoration:underline; }
.post p{ font-size:0.9rem; color:var(--muted); margin:0 0 8px; line-height:1.6; }
.post .readmore{ font-size:0.85rem; font-weight:600; text-decoration:none; }

/* ---- Kontakt ---- */
.kontakt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; padding:0 0 clamp(56px,9vw,96px); align-items:start; }
@media (max-width:820px){ .kontakt-grid{ grid-template-columns:1fr; gap:40px; } }
.info-list{ display:flex; flex-direction:column; gap:24px; }
.info-item{ display:flex; align-items:flex-start; gap:14px; }
.info-item svg{ flex-shrink:0; margin-top:2px; }
.info-item .label{ font-size:0.75rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.info-item .value{ font-size:1rem; font-weight:600; color:var(--ink); text-decoration:none; }
.info-item .value:hover{ text-decoration:underline; }
.hours{ margin-top:8px; padding-top:24px; border-top:1px solid var(--line); font-size:0.92rem; color:var(--muted); line-height:1.7; }

form{ display:flex; flex-direction:column; gap:18px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:0.8rem; font-weight:700; letter-spacing:0.03em; color:var(--ink); }
.field input, .field textarea{
  font:inherit; font-size:0.95rem; padding:12px 14px; border:1px solid #D6D6D6; border-radius:6px; color:var(--ink); background:#fff;
}
.field textarea{ resize:vertical; min-height:130px; }
.field input:focus, .field textarea:focus{ border-color:var(--navy); outline:none; }
.form-note{ font-size:0.82rem; color:var(--muted); }

/* ---- Podcast: Episodenliste ---- */
.episode-list{ display:flex; flex-direction:column; margin-bottom:clamp(12px,2vw,16px); }
.episode{ display:grid; grid-template-columns:140px 1fr; gap:24px; padding:24px 0; border-top:1px solid var(--line); }
.episode:last-child{ border-bottom:1px solid var(--line); }
@media (max-width:600px){ .episode{ grid-template-columns:1fr; gap:8px; } }
.episode time{ font-size:0.8rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted); }
.episode h3{ font-size:1.05rem; font-weight:700; margin:8px 0 6px; }
.episode p{ font-size:0.9rem; color:var(--muted); margin:0 0 12px; line-height:1.6; }
.episode audio{ width:100%; height:36px; }
.episode-note{ font-size:0.82rem; color:var(--muted); margin:0 0 clamp(40px,6vw,64px); }
.platforms{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:clamp(40px,6vw,64px); }
.platform-pill{ padding:10px 18px; border-radius:20px; border:1px solid var(--line); font-size:0.85rem; font-weight:600; color:var(--ink); }
.note-card{ display:flex; align-items:center; gap:16px; background:#F6F6F6; border-radius:8px; padding:24px; margin-bottom:clamp(56px,9vw,96px); }
.note-card p{ margin:0; font-size:0.9rem; color:var(--muted); line-height:1.6; }
.note-card a{ font-weight:600; }

/* ---- Blogbeitrag (Einzelseite) ---- */
.back{ display:inline-flex; align-items:center; gap:6px; font-size:0.85rem; font-weight:600; text-decoration:none; color:var(--muted); margin:clamp(32px,6vw,48px) 0 24px; }
.back:hover{ color:var(--navy); }
article .post-head{ padding:0 0 clamp(24px,4vw,32px); }
.tag{ display:inline-block; font-size:0.72rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--navy); margin-bottom:12px; }
article h1{ font-size:clamp(26px,4vw,38px); font-weight:800; line-height:1.25; margin-bottom:12px; }
article time{ font-size:0.85rem; color:var(--muted); }
.post-body{ font-size:1.02rem; line-height:1.75; color:#333B47; padding-bottom:clamp(48px,7vw,72px); }
.post-body p{ margin:0 0 20px; }
.placeholder{ border:1px dashed #C7CDD6; border-radius:8px; padding:20px 22px; color:var(--muted); font-size:0.92rem; font-style:italic; background:#FAFAFA; }

/* ---- Impressum ---- */
main.legal{ padding:clamp(40px,7vw,64px) 0 clamp(56px,9vw,88px); }
main.legal h1{ font-size:clamp(26px,4vw,36px); font-weight:800; margin-bottom:32px; }
main.legal h2{ font-size:1.05rem; font-weight:700; margin:32px 0 10px; }
main.legal p{ font-size:0.96rem; line-height:1.7; color:#333B47; margin:0 0 12px; }

/* ---- Kontakt-/Fußzeile (auf jeder Seite) ---- */
.contact-band{ background:var(--navy); color:#fff; }
.contact-inner{ padding:44px 0 24px; display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; align-items:center; }
.contact-item{ display:flex; align-items:center; gap:10px; font-size:0.92rem; font-weight:600; }
.contact-item a{ color:#fff; text-decoration:none; }
.contact-item a:hover{ text-decoration:underline; }
.contact-item svg{ flex-shrink:0; }
footer .bottom-row{
  border-top:1px solid rgba(255,255,255,0.15); padding:18px 0;
  display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:center;
}
footer .bottom-links{ display:flex; gap:24px; flex-wrap:wrap; }
footer .bottom-links a{ font-size:0.75rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:#CBD2DC; text-decoration:none; }
footer .bottom-links a:hover{ text-decoration:underline; }
footer .copyright{ font-size:0.75rem; color:#8E99AC; }