/* Überarbeitetes Design – liegt über style.css.
   Gleiche Farben, Schrift, Logo und Ähren; nur ruhiger, lesbarer, zeitgemässer. */
:root {
  --text: #4d443d;          /* warmes Dunkelbraun statt Grau, besserer Kontrast */
  --heading: #2f2620;
  --muted: #8a7d72;
  --line: #ece5de;
  --paper: #fbf8f5;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(80, 58, 44, .06), 0 6px 20px rgba(80, 58, 44, .07);
  --font-body: "PT Sans", Helvetica, Arial, sans-serif;
}

body {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.65;
  color: var(--text);
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { color: var(--heading); text-wrap: balance; letter-spacing: -.01em; }
p, li { text-wrap: pretty; }
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 3px; border-radius: 3px; }

/* ---------- Kopfbereich ---------- */
.main-nav a { font-family: var(--font-head); font-size: 17px; font-weight: 700; letter-spacing: .01em; }
.main-nav > ul > li > a { position: relative; }
.main-nav > ul > li > a::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
.main-nav .has-children > a::before { right: 18px; }
.main-nav > ul > li > a:hover, .main-nav > ul > li.active > a { opacity: 1; }
.main-nav > ul > li > a:hover::before, .main-nav > ul > li.active > a::before { transform: scaleX(1); }
.sub-menu { border-top: 0; border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 0 !important; top: calc(100% + 6px); }
.sub-menu a { font-family: var(--font-body); font-weight: 400; font-size: 16px; padding: 8px 20px; }
.sub-menu a:hover { background: rgba(255, 255, 255, .12); }
/* Schlanke Kopfleiste: bleibt beim Scrollen oben */
.m-header {
  position: sticky; top: 0; z-index: 70;
  background: var(--brown);
  transition: box-shadow .2s;
}
/* Beim Scrollen: Leiste behält unten die leichte Krümmung des braunen Bogens */
.m-header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: 34px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1280 140' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2398765d' d='M0 0h1280v140C573.08 140 0 0 0 0z'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
  opacity: 0; transition: opacity .2s;
}
.m-header.is-scrolled::after { opacity: 1; }
.m-header.is-scrolled { filter: drop-shadow(0 3px 8px rgba(47, 38, 32, .18)); }
.m-header-inner { display: flex; align-items: center; gap: 20px; min-height: 96px; }
.m-logo { flex: none; display: block; position: relative; align-self: flex-start; height: 96px; width: 350px; }
/* Gross, solange man oben ist; beim Scrollen verkleinert (nur per transform, damit nichts springt) */
.m-logo img {
  position: absolute; left: 0; top: 14px;
  display: block; height: 130px; width: auto;
  transform-origin: left top;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.m-header.is-scrolled .m-logo img { transform: translateY(-6px) scale(.62); }
.m-header .main-nav { margin-left: auto; }
.m-header .main-nav > ul { gap: 0 14px; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
/* Kopfleiste etwas breiter als der Inhalt, damit Logo und Menü nebeneinander Platz haben */
.m-header .m-header-inner { width: 90%; max-width: 1220px; }
.m-header .main-nav > ul > li { flex: none; }
.nav-newsletter a {
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px;
  padding: 5px 14px !important; font-size: 15px !important;
}
.nav-newsletter a::before { display: none; }
.nav-newsletter a:hover { background: rgba(255, 255, 255, .14); }
.m-actions { display: flex; align-items: center; gap: 4px; }
.search-toggle {
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: #fff; cursor: pointer;
}
.search-toggle:hover, .search-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .16); }

/* Suchfeld: kleines Feld unter der Lupe statt eines grossen Balkens */
.search-pop { position: absolute; left: 0; right: 0; top: 100%; pointer-events: none; }
.search-pop .container { display: flex; justify-content: flex-end; }
.m-search {
  pointer-events: auto;
  display: flex; gap: 8px; width: min(420px, 100%);
  margin-top: 8px; padding: 10px;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
}
.m-search input {
  flex: 1; min-width: 0; height: 42px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 6px;
  font: 16px var(--font-body); color: var(--heading); background: var(--paper);
}
.m-search input:focus { outline: none; border-color: var(--brown); background: #fff; }
.m-search button {
  height: 42px; padding: 0 16px; border: 0; border-radius: 6px;
  background: var(--green-dark); color: #fff; font: 700 15px var(--font-head); cursor: pointer;
}
.m-search button:hover { background: var(--green); }

/* Brauner Streifen mit Ähren und Bogen (wie bisher, nur niedriger) */
.m-band {
  position: relative; height: 120px;
  background: var(--brown) url(/img/header-bg.jpg) center bottom / 100% auto no-repeat;
}

/* ---------- Inhalt ---------- */
.content-area { padding: 90px 0 110px; }
.page-title { font-size: clamp(32px, 4vw, 44px); margin-bottom: 28px; }
.entry-content { max-width: 760px; }
.page-jens .entry-content, .page-kathi .entry-content, .sermons-page .entry-content { max-width: none; }
.entry-content h2 { margin-top: 1.8em; }
.entry-content h3, .entry-content h4 { margin-top: 1.6em; }
.entry-content a:not(.button):not(.download-file) { text-decoration: underline; text-decoration-color: rgba(58, 130, 51, .35); }
.entry-content a:not(.button):not(.download-file):hover { text-decoration-color: currentColor; }
.entry-content blockquote { border-left-width: 1px; border-color: var(--brown); color: var(--heading); font-size: 1.05em; }
.entry-content img { border-radius: var(--radius); }
.entry-content table { border-radius: var(--radius); }
.entry-content .portrait { border-radius: 50%; box-shadow: var(--shadow); }
.page-kathi .entry-content .portrait { border-radius: var(--radius); }
.entry-content a.button, .button { border-radius: var(--radius); border-width: 1px; padding: 8px 20px; }

/* Bibletunes-Logo als klar erkennbarer Link */
.entry-content p:has(> a > .partner-logo) { margin-top: 36px; }
.entry-content a:has(> .partner-logo) {
  display: inline-flex; align-items: center; gap: 22px;
  padding: 14px 22px 14px 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; box-shadow: 0 1px 2px rgba(80, 58, 44, .06);
  text-decoration: none !important;
  transition: border-color .15s, box-shadow .15s;
}
.entry-content a:has(> .partner-logo)::after {
  content: "Zu bibletunes.de →";
  font: 700 16px var(--font-head); color: var(--green-dark); white-space: nowrap;
}
.entry-content a:has(> .partner-logo):hover { border-color: var(--brown); box-shadow: var(--shadow); }
.entry-content a:has(> .partner-logo):hover::after { text-decoration: underline; text-underline-offset: 3px; }
.entry-content .partner-logo { margin: 0 !important; width: 170px; border-radius: 0; }

/* Nummerierte Angebote: ruhigere Ziffern */
ol.offer-list > li::before {
  background: transparent; color: var(--brown);
  border: 1px solid rgba(152, 118, 93, .45);
  font-weight: 700;
}
.offer-list > li { padding-top: 26px; padding-bottom: 22px; }

/* ---------- Beitragslisten ---------- */
.blog-list { max-width: 820px; }
.post-excerpt { margin-bottom: 0; padding: 30px 0; border-bottom: 1px solid var(--line); }
.post-excerpt:first-child { padding-top: 0; }
.entry-title { font-size: 26px; }
.entry-title a:hover { color: var(--green-dark); text-decoration: none; }
.post-meta { font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--muted); margin-bottom: 12px; }
.post-meta .author, .post-meta .published { color: var(--green); font-weight: 700; }
.more-link { display: inline-block; margin-top: 8px; font-family: var(--font-head); }
.more-link::after { content: " →"; }
.pagination { margin-top: 40px; font-family: var(--font-head); }

/* ---------- Predigten ---------- */
.sermon-search input, .list-filter {
  height: 50px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); font-family: var(--font-body);
  padding-left: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a7d72' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 16px center; background-size: 18px;
}
.sermon-search input:focus, .list-filter:focus { background-color: #fff; border-color: var(--brown); }
.series-filter { gap: 8px; }
.series-filter a {
  display: inline-block; padding: 6px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 15px; color: var(--brown-dark); background: #fff;
  transition: background .15s, border-color .15s;
}
.series-filter a:hover { border-color: var(--brown); text-decoration: none; }
.series-filter a.active { background: var(--brown); border-color: var(--brown); color: #fff; text-decoration: none; }
.series-filter a span { color: inherit; opacity: .6; }
.year-heading { font-size: 20px; border-bottom-width: 1px; border-color: var(--line); color: var(--brown); padding-bottom: 10px; }
.sermon { padding: 20px 12px; margin: 0 -12px; border-radius: var(--radius); border-bottom-color: var(--line); transition: background .15s; }
.sermon:hover { background: var(--paper); }
.sermon.is-playing { background: #f4ede6; }
.sermon-title { font-size: 21px; }
.sermon-title a:hover { color: var(--green-dark); text-decoration: none; }
.sermon-series { font-weight: 400; color: var(--green); }
.sermon-excerpt { color: var(--muted); }
.dl-btn { border-width: 1px; }
.mini-player { background: var(--brown-dark); }

/* Artikelliste */
.title-list li { padding: 14px 0; }
.title-list a:hover { text-decoration: none; }

/* ---------- Einzelbeitrag ---------- */
.single-post .entry-content { max-width: 760px; }
.post-title { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 36px; }
.audio-module { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); min-height: 0; }
.audio-content { padding: 32px 36px; }
.audio-content h2 { font-size: 22px; }
.audio-meta { font-size: 15px; color: rgba(255, 255, 255, .85); }
.downloads { border-left: 0; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.back-link a { font-family: var(--font-head); }

/* ---------- Fussbereich ---------- */
.footer-cols h2 { font-size: 26px; }
.footer-cols p { font-weight: 400; font-size: 17px; }
.footer-cols a { font-weight: 400; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); }
.footer-cols a:hover { text-decoration-color: #fff; }
.footer-bottom p { font-weight: 400; }
.footer-bottom a { color: #a8d49a; font-weight: 400; }

@media (max-width: 1300px) {
  .m-logo { width: 280px; }
  .m-logo img { height: 110px; }
  .m-header .main-nav > ul { gap: 0 16px; }
  .m-header .main-nav a { font-size: 16px; }
}
@media (min-width: 981px) and (max-width: 1120px) {
  .m-logo { width: 220px; }
  .m-logo img { height: 87px; top: 10px; }
  .m-header.is-scrolled .m-logo img { transform: translateY(-4px) scale(.85); }
  .nav-newsletter { display: none; }
  .m-header .main-nav > ul { gap: 0 14px; }
  .m-header .main-nav a { font-size: 15.5px; }
}
@media (max-width: 980px) {
  .m-header::after { height: 20px; }
  .m-header-inner { min-height: 70px; gap: 12px; }
  .m-logo { width: 210px; height: 70px; }
  .m-logo img { height: 84px; top: 8px; }
  .m-header.is-scrolled .m-logo img { transform: translateY(-4px) scale(.7); }
  .m-actions { margin-left: auto; }
  .m-header .menu-toggle { position: static; display: flex; }
  .m-header .main-nav {
    position: absolute; left: 4%; right: 4%; top: 100%; margin: 6px 0 0;
    max-height: calc(100vh - 90px); overflow-y: auto;
  }
  .m-header .main-nav > ul { display: block; }
  .nav-newsletter a { border: 0; border-radius: 0; padding: 10px 5% !important; font-size: 17px !important; }
  .m-band { height: 80px; }
  .main-nav { border-top: 0; border-radius: var(--radius); box-shadow: var(--shadow); }
  .main-nav > ul > li > a::before { display: none; }
  .main-nav a { font-size: 17px; }
  .sub-menu a:hover { background: none; }
  .content-area { padding: 56px 0 70px; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .entry-content a:has(> .partner-logo) { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sermon { padding: 16px 8px; margin: 0 -8px; }
  .series-filter a { font-size: 14px; padding: 5px 12px; }
}

/* Anklickbare Einträge in Angebotslisten (z.B. Predigtserien): die ganze Zeile ist der Link */
.offer-list > li:has(h3 a) { transition: background .15s; }
.offer-list > li:has(h3 a):hover { background: var(--paper); }
.entry-content .offer-list h3 a { color: var(--heading); text-decoration: none; }
.entry-content .offer-list h3 a::before { content: ""; position: absolute; inset: 0; }
.entry-content .offer-list h3 a::after { content: " →"; color: var(--green-dark); }
.entry-content .offer-list > li:has(h3 a):hover h3 a { color: var(--green-dark); }