@charset "UTF-8";

/* ==========================================================
   mobile.css – wird nur bis 768 px Bildschirmbreite geladen
   (per media-Attribut im <link>, daher keine eigene @media-
   Abfrage nötig). Muss NACH style.css eingebunden sein.
   ========================================================== */

/* Header: Titel + Menü links, Logo rechts daneben (spart Höhe) */
.header-inner {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
}

.header-left {
  flex: 1 1 auto;
  min-width: 0;
  gap: 10px;
}

.brand h1 {
  font-size: 1.5rem;
}

/* Header ist auf dem Handy zu hoch, um fest zu bleiben:
   hebt das position: sticky aus style.css auf, der Header
   scrollt mit. Zum Rückgängigmachen diese Regel löschen. */
.site-header {
  position: static;
}

/* Menü in zwei Zeilen:
   1. Zeile: Start, Episoden
   2. Zeile: Team, Spenden */
.main-nav ul {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 8px;
}

/* Gleich breite Schaltflächen je Spalte */
.main-nav a {
  display: block;
  text-align: center;
  padding: 6px 14px;
}

/* Slogan auf dem Handy ausgeblendet */
.slogan {
  display: none;
}

.header-right {
  flex-shrink: 0;
}

.header-logo-wrapper {
  width: 70px;
}

/* Layout: etwas weniger Abstand */
.content-area {
  gap: 20px;
  padding: 20px 0 40px;
}

/* Blocksatz auf schmalen Spalten: automatische Silbentrennung
   verhindert große Wortlücken (benötigt <html lang="de">) */
.post-excerpt,
.widget-list {
  hyphens: auto;
}