/* Extracted styles from index.html */
:root{
  --bg:#f6f7fb; --card:#fff; --pri:#224488; --pri-weak:#eef2ff;
  --muted:#667; --line:#d9deea; --warn:#b45309; --warn-bg:#fff7ed;
  --event:#e9f1ff; --event-border:#c8d7ff;
}
*{box-sizing:border-box}
/* Ensure images and media never overflow their containers on small screens */
img, video, svg { max-width:100%; height:auto; display:block; }
body{margin:0;background:var(--bg);color:#111;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif}
header{background:var(--pri);color:#fff;padding:18px}
header h1{margin:0;font-size:22px}
header p{margin:4px 0 0;color:#e9eeff}
/* Brand: logo and title inline */
.brand{display:flex;align-items:center;gap:12px}
.brand h1{margin:0;font-size:1.05rem;color:#fff}
.wrap{max-width:1100px;margin:24px auto;padding:0 14px}
.nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.btn{padding:8px 12px;border:0;border-radius:10px;background:#fff;color:var(--pri);cursor:pointer;font-weight:600}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
/* Main two-column layout used on the homepage and similar layouts */
.main-grid{display:grid;grid-template-columns:1.6fr .6fr;gap:14px;margin-top:14px}
@media (max-width:1000px){.main-grid{grid-template-columns:1fr}}
@media (max-width:700px){
  .wrap{padding:0 2vw;}
  .main-grid{grid-template-columns:1fr;gap:10px;margin-top:10px;}
  header{padding:10px 0 0 0;}
  header h1{font-size:1.3rem;}
  header p{font-size:1rem;}
  .nav{gap:6px;margin-top:10px;flex-direction:column;align-items:stretch;}
  .btn,.btn.ghost{font-size:1rem;padding:10px 0;}
  .modal .box{padding:8px;}
  .cal-grid{grid-auto-rows:90px;gap:4px;}
  .day{padding:6px;min-height:80px;display:flex;flex-direction:column;align-items:center}
  .event{margin-top:12px;padding:4px;font-size:11px;}
  .event .badge{font-size:9px;padding:2px 4px;left:4px;}
  .day .num{font-size:11px;margin-bottom:6px}
  .cal-colhead{font-size:11px;padding:4px 0;}
  .card{padding:7px;}
  img[alt="Weltpolitik"]{max-height:90px;border-radius:10px;}
  .modal .box{max-width:99vw;width:99vw;}
  footer{font-size:11px;}
  .post h3{font-size:1rem;}
}

.site{max-width:1100px;margin:20px auto;padding:0 16px}
.hero{margin-top:14px;border-radius:10px;overflow:hidden}
.hero{position:relative}
.hero img{width:100%;height:auto;display:block;max-height:240px;object-fit:cover}
.hero-quote{background:#fff;padding:14px;border-left:6px solid rgba(255,215,0,.9);color:#224;border-radius:0 0 10px 10px}
.quote{font-style:italic;margin:0}
.quote-cite{display:block;margin-top:8px;font-weight:700;color:#334}
.nav{display:flex;gap:8px;margin-top:12px}
.nav a{background:#fff;color:var(--pri);padding:8px 12px;border-radius:8px;text-decoration:none;font-weight:600}
.cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.card{background:var(--card);padding:12px;border-radius:10px;border:1px solid var(--line);text-align:center}
.card a{display:block;color:var(--pri);text-decoration:none;font-weight:700}
.announce{margin-top:12px;padding:18px;border-radius:10px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.announce .when{font-weight:700;margin-bottom:6px}
.announce #downloadIcs{margin-top:8px;display:inline-block}
.calendar{margin-top:12px;background:#fff;padding:12px;border-radius:10px;border:1px solid var(--line)}
.smallcal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center;font-size:13px}
.smallcal .day{padding:6px;border-radius:6px;background:#fafbfd}
footer{margin:28px 0;color:var(--muted);font-size:13px;text-align:center}
@media (max-width:900px){.cards-grid{grid-template-columns:repeat(2,1fr)}.brand h1{font-size:1.2rem}}
.card{background:var(--card);border-radius:12px;box-shadow:0 1px 4px rgba(20,20,30,.06);padding:14px}
h2{margin:12px 0 8px}

/* Utility grid classes for common inline grid patterns */
.two-col-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.two-col-grid.align-start{align-items:start}
.two-col-grid.gap-12{gap:12px}

/* make room for badge */
.card{position:relative}
.count-badge{position:absolute;top:10px;right:10px;background:var(--pri);color:#fff;padding:6px 8px;border-radius:999px;font-weight:700;font-size:12px;box-shadow:0 2px 6px rgba(34,68,136,.18)}

/* Center the intern card and match the hero/site width */
#card-intern{justify-self:center;width:100%;max-width:1100px;margin:0 auto;grid-column:1/-1}

/* Hide the small calendar (user requested) */
.calendar{display:none !important}

/* YouTube card list styling */
.youtube-card{display:flex;gap:10px;align-items:flex-start;text-align:left}
.youtube-card .meta{flex:1}
.youtube-card .title{font-weight:700;color:var(--pri);margin-bottom:4px}
.youtube-card .desc{color:var(--muted);font-size:13px}

/* Book / download description */
.book-desc{color:#334;font-size:14px;margin-top:8px}

h2{margin:0 0 10px;color:var(--pri);font-size:18px}

/* Hinweis / Erinnerung */
.notice{display:none;margin:0 0 16px;background:var(--warn-bg);border:1px solid #fed7aa;color:var(--warn);
  padding:12px 14px;border-radius:10px;text-align:center}
.notice strong{display:block;font-size:15px;margin:4px 0}
.notice a{color:var(--warn);text-decoration:underline}

/* Blog */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
input[type=text],select{border:1px solid var(--line);border-radius:8px;padding:10px;width:100%;background:#fff}
.toolbar > *{flex:1 1 180px}
.post{border-top:1px dashed var(--line);padding:14px 0}
.post:first-child{border-top:0}
.post .meta{font-size:12px;color:var(--muted)}
.tags{display:inline-flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.tag{font-size:12px;background:var(--pri-weak);border-radius:999px;padding:2px 8px}
.post a{color:var(--pri);text-decoration:none}
.post a:hover{text-decoration:underline}
.video{border-radius:10px;width:100%;aspect-ratio:16/9;border:0;margin-top:8px}
.pdf::before{content:"📄 ";} .link::before{content:"🔗 ";} .ext::after{content:" ↗";}
/* kleines Profilbild vor Linktiteln */
.avatar{width:36px;height:36px;border-radius:50%;vertical-align:middle;margin-right:8px;object-fit:cover;box-shadow:0 1px 4px rgba(0,0,0,.12)}

/* Kalender */
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.cal-head h3{margin:0;color:var(--pri);font-size:16px}
.cal-grid{
  display:grid;
  grid-template-columns:44px repeat(7,1fr); /* KW + Mo..So */
  gap:8px;
  grid-auto-rows: 90px;     /* kompaktere Zellhöhe -> passt besser */
  align-items:start;
}
.cal-weeknum{display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted);background:transparent}
/* Sonntage und Feiertage hervorheben */
.day.sunday{background:linear-gradient(180deg,#fff6f0,#fff2ee);border-color:#ffd6c2}
.day.holiday{background:var(--warn-bg);border-color:#fed7aa}
.cal-colhead{
  font-size:12px;color:#334;text-align:center;padding:6px 0;
  background:#f2f4f8;border:1px solid #d7dbe5;border-radius:10px
}
.day{
  background:#fdfefe;border:1px solid #ccd3e0;border-radius:12px;
  padding:10px 8px 8px 8px;overflow:hidden;display:flex;flex-direction:column;align-items:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.02)
}
.day .num{font-size:12px;color:#445;font-weight:700;margin-bottom:6px;text-align:center}
.day.weekend{background:linear-gradient(180deg,#fff,#f6f8fb)}
.event{
  margin-top:26px;background:var(--event);border:1px solid var(--event-border);
  border-radius:10px;padding:6px;font-size:12px;cursor:pointer;position:relative
}
.event b{display:block}
.event .badge{position:absolute;top:-10px;left:8px;background:#224488;color:#fff;border-radius:999px;font-size:10px;padding:2px 6px}
.today{outline:2px solid #ffb703;outline-offset:1px}
.cal-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;color:#445;font-size:12px}
.tip{position:absolute;inset:auto auto 6px 6px;background:#111;color:#fff;font-size:11px;
  padding:6px 8px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .15s}
.event:hover .tip{opacity:1}

/* Sections for categorized blog layout */
.sections{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:12px}
@media (max-width:900px){.sections{grid-template-columns:1fr}}
.section {padding:12px;border-radius:12px;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 4px 18px rgba(20,30,60,.06);}
.section h3{margin:0 0 6px;color:var(--pri);font-size:18px;background:#f2f4f6;padding:8px 10px;border-radius:8px}
.section .desc{color:#556;padding:8px 0 8px 0;font-size:13px}
.section .count{float:right;background:var(--pri-weak);color:var(--pri);padding:4px 8px;border-radius:999px;font-weight:700;font-size:12px;margin-left:8px}
.section .list{margin-top:8px}

/* Compact menu / accordion for main page categories */
#postMenu{margin-top:12px}
.menu-item{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.menu-item .meta{color:var(--muted);font-size:13px;margin-left:8px}
.menu-item .chev{font-weight:700;color:var(--pri);margin-left:12px}
.menu-body{max-height:0;overflow:hidden;transition:max-height .28s ease;padding:0 10px}
.menu-body.open{padding:10px;border-top:1px dashed var(--line);max-height:2000px}
.menu-body .post{border-top:1px dashed var(--line);padding:8px 0;margin:0}
.menu-lede{color:#334;margin-top:8px;font-size:14px}

/* Essay / long-form content styling for KI-Gespräche */
.essay .content{max-width:820px;margin:10px auto;color:#222;line-height:1.6;font-size:15px}
.essay .content p{margin:0 0 12px}
.essay h3{margin-top:8px}

/* Essay headings and epigraph */
.essay h4{font-size:1.15rem;color:var(--pri);margin:14px 0 8px;font-weight:700}
.essay ul{margin:8px 0 12px 20px}
.essay .epigraph{margin-top:14px;font-style:italic;color:#445;text-align:center}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(15,18,30,.45);display:none;align-items:center;justify-content:center;padding:14px}
.modal .box{background:#fff;border-radius:12px;max-width:560px;width:96%;padding:16px}
.modal .box h4{margin:0 0 6px}
.modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.a{padding:8px 12px;border-radius:8px;border:1px solid var(--line);text-decoration:none;color:#111}
.a.primary{background:var(--pri);border:0;color:#fff}

footer{margin:30px 0 18px;text-align:center;color:#667;font-size:12px}
/* Hero image (vor dem Einleitungstext) */
.hero-image{width:100%;height:auto;max-height:320px;object-fit:cover;display:block;border-radius:0;margin:0 auto 12px auto;box-shadow:0 2px 12px rgba(30,40,60,.10)}
@media (max-width:700px){ .hero-image{max-height:180px} }
/* Zentrierter Intro-Block */
.intro-wrap{width:100%;text-align:center;padding:0 14px 12px 14px}
.intro{font-size:1.1rem;margin:12px auto;color:#e9eeff;max-width:700px;line-height:1.45}
/* Titelzeile (Logo + zentrierte Überschrift) */
.title-row h1{font-weight:700}

/* Quote block styling */

.hero-wrap{max-width:980px;margin:0 auto;padding:0}
.hero-quote{
  width:calc(100% + 8px);
  padding:16px 18px 16px 26px; /* increase left padding to compensate for negative margin */
  border:8px solid rgba(58,111,176,0.95);
  background:#ffffff; /* opaque layer to remove "double layer" effect */
  border-radius:0;color:#112;padding-right:18px;box-shadow:none;font-size:1.05rem;line-height:1.45;text-align:center;box-sizing:border-box;overflow:hidden;
}
.hero-quote blockquote{margin:0;font-style:italic;color:#112}

/* Zitate page styling */
.zitate-section{max-width:800px;margin:2em auto;padding:1.5em;background:#fafafa;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.1);font-family:'Georgia',serif}
.zitate-section h2{text-align:center;margin-bottom:1em;font-family:'Helvetica Neue',sans-serif;font-size:1.8em;color:#333}
.zitate-section blockquote{border-left:4px solid #888;padding-left:1em;margin:1.2em 0;font-style:italic}
.zitate-section footer{color:#555;text-align:right;margin-top:0.4em;font-style:normal}

/* Private shelf preview card (Astrid) */
.private-shelf-card{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;background:linear-gradient(180deg,#ffffff,#f7f7fb);color:var(--text);border:1px solid var(--line);box-shadow:0 6px 18px rgba(20,30,60,.04)}
.private-shelf-card img{width:88px;height:120px;object-fit:cover;border-radius:8px;flex:0 0 auto}
.private-shelf-card .title{font-weight:800;color:var(--pri);font-size:15px}
.private-shelf-card .muted{color:var(--muted);font-size:13px}
.private-shelf-card .btn{margin-top:8px}

/* image framing and subtle shadow for covers */
.private-shelf-card img{border:1px solid var(--border);background:#fff;padding:2px}
.private-shelf-card:hover{transform:translateY(-4px);transition:transform .18s ease}
.private-shelf-card .btn{transition:background .12s ease,transform .12s ease}
.private-shelf-card .btn:hover{transform:translateY(-2px);background:#1b2f55}

/* responsive: single column on small screens */
.private-shelves-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:700px){.private-shelves-grid{grid-template-columns:1fr}}

/* Hint box above private shelves */
.shelf-hint{background:linear-gradient(180deg,#f8fafc,#eef2ff);border:1px solid #dbeafe;padding:12px 14px;border-radius:10px;color:#0f1724;margin-bottom:12px}
.shelf-hint p{margin:6px 0 0;color:#334;font-size:14px}
.shelf-hint a{color:var(--pri);font-weight:700;text-decoration:none}
.hero-quote .cite{display:block;margin-top:10px;font-weight:700;color:#3a6fb0;font-size:0.95rem}

/* Translucent centered textbox overlay on the hero image */
.hero-overlay{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  background:transparent; /* vollständig transparent */
  color:#000000; /* schwarze Schrift */
  padding:8px 10px;
  border-radius:8px;
  text-shadow:0 1px 2px rgba(255,255,255,0.65); /* subtiler heller Schein für Kontrast */
  box-shadow:none;
  font-weight:700;
  z-index:10;
  max-width:96%;
  text-align:center;
  font-size:1.1rem;
}

@media (max-width:700px){
  .hero-overlay{font-size:1rem;padding:8px 10px;bottom:12px}
  /* Slightly opaque overlay to improve contrast on small devices */
  .hero-overlay{background:rgba(255,255,255,0.88);color:#0b1220}
  /* Make the count badges less dominant on small displays */
  .count-badge{font-size:10px;padding:4px 6px}
}