/* ==========================================================================
   PapaChriLo – gemeinsames Stylesheet
   Enthält alle Styles, die auf mehreren Seiten identisch verwendet werden
   (Basis-Variablen, Header/Footer, Buttons, Cards, Lightbox, ...).
   Seitenspezifische Ergänzungen (z. B. Hero-Layouts) bleiben lokal im
   <style>-Block der jeweiligen HTML-Datei.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --bg:#4F5A61;
  --bg-alt:#434D53;
  --bg-card:#48525A;
  --ink:#FFFFFF;
  --sub:#C7CDD1;
  --sub-dim:#9BA4A9;
  --accent:#C9A05C;
  --accent-ink:#2C2416;
  --line:rgba(255,255,255,0.14);
  --line-strong:rgba(255,255,255,0.26);
  --radius:8px;
  --max:1080px;
  --font-display:'Fraunces', Georgia, serif;
  --font-sans:'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}

.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 12px;
}

h1,h2,h3{font-family:var(--font-display); font-weight:500; margin:0; letter-spacing:-0.01em;}
h1{font-size:38px; line-height:1.25;}
h2{font-size:26px; line-height:1.3;}
h3{font-size:19px; line-height:1.4;}
p{color:var(--sub); margin:0;}

/* header */
header.site{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--line);
}
/* Weichzeichner-Hintergrund als eigenes Pseudo-Element statt direkt auf
   header.site: "backdrop-filter" auf einem Element mit position:fixed
   -Nachfahren (das mobile Menue, siehe nav.main) macht dieses Element sonst
   zum "Containing Block" fuer diese Nachfahren - das mobile Menue wuerde
   dann nicht mehr am Bildschirm, sondern nur am (winzigen) Header
   ausgerichtet und faelschlich auf dessen Hoehe zusammengequetscht. Das
   Pseudo-Element hat keine eigenen Nachfahren, daher kein Problem. */
header.site::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:rgba(79,90,97,0.92);
  backdrop-filter:blur(6px);
}
header.site .bar{display:flex; align-items:center; justify-content:space-between; padding:16px 28px;}
.logo{font-family:var(--font-display); font-size:19px; font-weight:600; letter-spacing:-0.01em;}
.logo span{color:var(--accent);}
nav.main{display:flex; gap:26px; font-size:14px;}
nav.main a{color:var(--sub); transition:color .15s;}
nav.main a:hover, nav.main a.active{color:var(--ink);}
nav.main a.active{color:var(--accent);}
.nav-toggle{display:none; background:none; border:none; color:var(--ink); font-size:22px; cursor:pointer;}
.nav-wrap{display:flex; align-items:center; gap:24px;}
.header-social{display:flex; gap:14px; align-items:center;}
.header-social a{color:var(--sub); transition:color .15s; display:flex;}
.header-social a:hover{color:var(--accent);}

@media (max-width:760px){
  nav.main{
    position:fixed; top:57px; left:0; right:0; bottom:0;
    background:var(--bg-alt); flex-direction:column; gap:0;
    padding:8px 28px; transform:translateY(-110%); transition:transform .2s ease; overflow:auto;
  }
  nav.main.open{transform:translateY(0);}
  nav.main a{padding:14px 0; border-bottom:1px solid var(--line); font-size:16px;}
  .nav-toggle{display:block;}
}

/* hero */
.hero{padding:56px 0 40px; border-bottom:1px solid var(--line);}
.hero h1{max-width:640px; margin-bottom:16px;}
.hero p.lead{max-width:520px; font-size:15px; margin-bottom:24px;}
.btn{
  display:inline-block; background:var(--accent); color:var(--accent-ink);
  font-weight:600; font-size:14px; padding:11px 20px; border-radius:6px; border:none; cursor:pointer;
  transition:opacity .15s;
}
.btn:hover{opacity:0.88;}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line-strong);}

/* hero-icon: Hero mit Icon-Kachel (Podcast, Blog, Buecher, Newsletter) */
.hero-icon{display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center;}
.hero-icon .icon-card{
  width:170px; height:170px; border-radius:var(--radius);
  background:var(--bg-card); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; justify-self:center;
}
@media (max-width:760px){
  .hero-icon{grid-template-columns:1fr;}
  .hero-icon .icon-card{width:120px; height:120px; order:-1;}
}

/* section shells */
section{padding:44px 0;}
section.alt{background:var(--bg-alt);}
section.bordered{border-bottom:1px solid var(--line);}

/* grid + cards */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:0;}
.grid-2 > div{padding:26px 0;}
.grid-2 > div:first-child{border-right:1px solid var(--line); padding-right:32px;}
.grid-2 > div:last-child{padding-left:32px;}
@media (max-width:760px){
  .grid-2{grid-template-columns:1fr;}
  .grid-2 > div:first-child{border-right:none; border-bottom:1px solid var(--line); padding-right:0; padding-bottom:26px;}
  .grid-2 > div:last-child{padding-left:0; padding-top:26px;}
}

.card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px;
}
.card h3{margin-bottom:8px;}
.card p{font-size:13.5px; margin-bottom:14px;}
.card .meta{font-family:var(--font-mono); font-size:11px; color:var(--sub-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px; display:block;}
.card .link{color:var(--accent); font-size:13px; font-weight:600;}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.cards{grid-template-columns:1fr;}}

.cards-2col{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
@media (max-width:600px){.cards-2col{grid-template-columns:1fr;}}

/* tags */
.tags{display:flex; flex-wrap:wrap; gap:8px;}
.tag{
  background:rgba(255,255,255,0.08); color:var(--ink); font-size:12.5px;
  padding:6px 14px; border-radius:20px; border:1px solid transparent; transition:.15s;
}
.tag:hover{border-color:var(--accent); color:var(--accent);}
.tag.active{background:var(--accent); color:var(--accent-ink);}

/* footer */
footer.site{border-top:1px solid var(--line); padding:32px 0; background:var(--bg-alt);}
footer.site .row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;}
footer.site p{font-size:12.5px; color:var(--sub-dim);}
footer .foot-links{display:flex; gap:18px; font-size:12.5px;}
footer .foot-links a:hover{color:var(--accent);}

/* newsletter inline block */
.newsletter-inline{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:24px 0;}
.newsletter-inline form{display:flex; gap:8px;}
input[type=email]{
  font-size:13px; padding:10px 12px; border:1px solid var(--line-strong); border-radius:6px;
  background:rgba(255,255,255,0.06); color:var(--ink); width:200px;
}
input[type=email]::placeholder{color:var(--sub-dim);}

/* lists */
.divider-list > *{border-bottom:1px solid var(--line); padding:20px 0;}
.divider-list > *:first-child{padding-top:0;}
.divider-list > *:last-child{border-bottom:none;}
/* Quellen-Seite: Links sehen aus wie normaler Text, nur ein kleines Symbol
   dahinter zeigt "das geht extern weiter" - bewusst nicht farbig/unterstrichen
   wie .article-link, damit sich Fliesstext und Quellenangaben nicht wie
   Artikel-Empfehlungen anfuehlen. */
.divider-list a{color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:6px;}
.divider-list a svg{color:var(--sub-dim); flex-shrink:0;}
.divider-list a:hover{color:var(--accent);}
.divider-list a:hover svg{color:var(--accent);}

.pill-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px;}
.small-caps{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--sub-dim);}
.pill-note{font-size:12.5px; color:var(--sub-dim); border:1px dashed var(--line-strong); border-radius:6px; padding:10px 14px;}

blockquote{
  font-family:var(--font-display); font-size:22px; line-height:1.45; font-weight:500;
  border-left:3px solid var(--accent); padding-left:20px; margin:0;
}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
@media (max-width:760px){.two-col{grid-template-columns:1fr;}}

/* Audio-Player (Podcast-Folgen, u.a. auf generierten Folgen-Seiten) */
.audio-player{width:100%; margin:14px 0; border-radius:6px;}

/* Reels (reels.html + Einbettung auf passenden Artikelseiten): eingebettetes
   Video im 9:16-Hochformat (Instagram/Facebook-Reel-Seitenverhaeltnis), mit
   nativen Browser-Steuerelementen statt eigenem Player - die Clips sind kurz
   genug (unter einer Minute), dass sich ein eigener Player wie beim Podcast
   nicht lohnt. */
.reel-video{
  display:block; width:100%; aspect-ratio:9/16; max-height:70vh;
  object-fit:cover; background:var(--bg-alt); border-radius:var(--radius);
}
/* Innerhalb einer .card randlos bis zum Kartenrand (wie .card .thumb auf
   Blog/Buecher), damit sich Reel-Karten optisch in die uebrigen Cards-Grids
   einfuegen. */
.card .reel-video{
  width:calc(100% + 44px); margin:-22px -22px 16px; border-radius:0;
  aspect-ratio:9/16; max-height:none;
}
/* Reel-Einbettung innerhalb eines Artikel-Fliesstexts (siehe reel_embed_html
   in build.py) - abgesetzter Block statt einfach nur ein Video zwischen zwei
   Absaetzen, damit klar erkennbar ist, dass hier ein eigenstaendiges Element
   beginnt. */
.reel-embed{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; margin:32px 0;
}

/* Beitragsseiten (generierte Artikel, beitrag-<slug>.html) */
.post-detail-img{
  display:block; width:100%; aspect-ratio:16/9; object-fit:cover; object-position:top;
  border-radius:var(--radius); margin-bottom:24px; background:var(--bg-alt);
}

.article-body{margin-bottom:8px;}
.article-body p{margin-bottom:18px;}
.article-body h2{margin:36px 0 14px;}
.article-body h3{margin:28px 0 12px;}
.article-body strong{color:var(--ink);}
.article-body blockquote{margin:24px 0;}
.article-body ul, .article-body ol{color:var(--sub); padding-left:22px; margin-bottom:18px;}
.article-body li{margin-bottom:8px;}
.article-img{
  display:block; width:100%; max-width:100%; border-radius:var(--radius);
  margin:24px 0; background:var(--bg-alt);
}
.article-link, .quellen-list a{
  color:var(--accent); text-decoration:underline;
  text-decoration-color:rgba(201,160,92,0.4);
}
.article-link:hover, .quellen-list a:hover{text-decoration-color:var(--accent);}

.article-cta{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px;
}
.article-cta p{margin-bottom:16px;}
.article-cta .pill-row{margin-bottom:0;}

/* Erklaer-Popup vor externem Redirect (z.B. Substack-Abo) */
.pc-modal-overlay{
  position:fixed; inset:0; background:rgba(20,22,24,0.86);
  display:none; align-items:center; justify-content:center;
  z-index:210; padding:24px;
}
.pc-modal-overlay.open{display:flex;}
.pc-modal{
  position:relative; max-width:440px; width:100%;
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius); padding:36px 28px 28px;
}
.pc-modal p{margin-bottom:16px; font-size:14px;}
.pc-modal .btn{margin-top:4px;}
.pc-modal-close{
  position:absolute; top:14px; right:14px;
  width:32px; height:32px; border-radius:50%;
  background:transparent; border:1px solid var(--line-strong);
  color:var(--ink); font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.pc-modal-close:hover{border-color:var(--accent); color:var(--accent);}
.pc-modal-wide{max-width:640px; max-height:80vh; overflow-y:auto;}

/* Podcast: zentraler Popup-Player (podcast.html, #player-modal) */
.pc-player-row{display:flex; align-items:center; justify-content:center; gap:14px; margin:4px 0 18px;}
.pc-player-toggle{
  width:50px; height:50px; border-radius:50%; flex-shrink:0;
  background:var(--accent); color:var(--accent-ink); border:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.pc-player-skip, .pc-player-stop{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:transparent; color:var(--ink); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.pc-player-skip:hover, .pc-player-stop:hover{border-color:var(--accent); color:var(--accent);}
.pc-player-track{
  height:6px; background:rgba(255,255,255,0.14); border-radius:3px;
  position:relative; cursor:pointer; margin-bottom:10px;
}
.pc-player-fill{
  position:absolute; left:0; top:0; height:100%; width:0%;
  background:var(--accent); border-radius:3px;
}
.pc-player-meta-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px;}
.pc-player-time{
  font-family:var(--font-mono); font-size:11px; color:var(--sub-dim); white-space:nowrap;
}
.pc-player-volume{display:flex; align-items:center; gap:8px; color:var(--sub-dim);}
.pc-player-volume input[type=range]{width:80px;}
.pc-player-share{display:flex; gap:8px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:16px;}
.pc-share-fallback{display:flex; gap:8px; flex-wrap:wrap; width:100%; margin-top:8px;}
.pc-share-fallback[hidden]{display:none;}
.pc-share-intro{font-size:14px; color:var(--sub); margin-bottom:10px;}
.pc-share-hint{font-size:12px; color:var(--sub-dim); margin-top:8px; width:100%;}
.btn-share svg{vertical-align:-2px; margin-right:6px;}
.podcast-card.pc-highlight{
  outline:2px solid var(--accent); outline-offset:4px;
  transition:outline-color .3s;
}
.pc-share-email-form{width:100%; margin-top:10px; padding-top:12px; border-top:1px solid var(--line);}
.pc-share-email-form input[type=email]{
  width:100%; padding:9px 12px; border-radius:6px; border:1px solid var(--line-strong);
  background:var(--bg); color:var(--ink); font-size:14px; margin-bottom:10px;
}
.pc-share-email-actions{display:flex; gap:8px;}
.pc-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.pc-share-email-status{font-size:12px; margin:8px 0 0;}
.pc-share-email-status.error{color:#e5847f;}
.pc-share-email-status.success{color:var(--accent);}

/* Lightbox (Startseite, Ueber mich) */
.lightbox-trigger{cursor:zoom-in;}
.lightbox-overlay{
  position:fixed; inset:0; background:rgba(20,22,24,0.86);
  display:none; align-items:center; justify-content:center;
  z-index:200; padding:32px;
}
.lightbox-overlay.open{display:flex;}
.lightbox-overlay img{max-width:min(90vw,560px); max-height:85vh; border-radius:12px; display:block;}
.lightbox-close{
  position:absolute; top:24px; right:28px;
  width:42px; height:42px; border-radius:50%;
  background:var(--bg-card); border:1px solid var(--line-strong);
  color:var(--ink); font-size:22px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.lightbox-close:hover{border-color:var(--accent); color:var(--accent);}