/* ==========================================================================
   Servus Gelting — Aktuelles (/aktuelles)

   1:1 nach dem Canvas-Rendering. Quelle:
   canvas/roesterei/seite-aktuelles.jsx — Q1 „Zeitungsseite"

   ACHTUNG BEIM INHALT: Für diese Seite lag keine Kunden-Copy vor.
   Alle Beitragstitel, Teaser und Daten sind Platzhalter — so steht es
   im Kopf der Vorlage. „Weiterlesen" führt auf seiten/artikel.html —
   das Template zeigt immer denselben Beispielbeitrag.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Bänder
   -------------------------------------------------------------------------- */

.band--cream2 { background: var(--cream-2); }

.band--dunkel {
  background: var(--espresso);
  color: var(--cream);
}


/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.akt-hero {
  padding-block: 84px 40px;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 72px;
  align-items: end;
}

.akt-hero .eyebrow { display: block; margin-bottom: 16px; }

.akt-hero__titel {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 104px;
  line-height: .94;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--espresso);
}

.akt-hero__vorspann {
  margin-bottom: 16px;
  font-size: 18.5px;
  line-height: 1.7;
  color: var(--muted-brown);
}

.akt-hero__zaehler {
  font-size: 11.5px;
  color: var(--muted-brown);
}


/* --------------------------------------------------------------------------
   2. Kategorie-Filter
   -------------------------------------------------------------------------- */

.filterleiste {
  padding-block: 22px;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* _beitraege-erzeugen.py blendet Filterleiste und Beitragsraster aus,
   solange es nur eine Rubrik bzw. nur einen Beitrag gibt — seit dem
   14.09.2026 der Fall. Ohne diese Regel gewänne display: flex gegen
   das hidden. */
.filterleiste[hidden],
.band--cream2[hidden] { display: none; }

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter button {
  padding: 10px 16px;
  border: 1.5px solid var(--linie);
  border-radius: 4px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-brown);
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.filter button:hover { border-color: var(--espresso); color: var(--espresso); }

.filter button.ist-aktiv {
  border-color: var(--espresso);
  background: var(--espresso);
  color: var(--cream);
}

.filterleiste__zaehler {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .1em;
  line-height: 1;
  color: var(--muted-brown);
}


/* --------------------------------------------------------------------------
   3. Aufmacher
   -------------------------------------------------------------------------- */

.aufmacher {
  padding-block: 64px 72px;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 64px;
  align-items: center;
}

.aufmacher__bild {
  height: 480px;
  border-radius: 6px;
}

.aufmacher__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.aufmacher__titel {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 52px;
  line-height: 1;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--espresso);
}

.aufmacher__teaser {
  max-width: 440px;
  margin: 22px 0 30px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted-brown);
}


/* --------------------------------------------------------------------------
   4. Beitragsraster
   -------------------------------------------------------------------------- */

.beitraege { padding-block: 80px 88px; }

.beitraege__kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 38px;
}

.beitraege__kopf .eyebrow { display: block; margin-bottom: 12px; }
.beitraege__kopf .h2 { font-size: 44px; }

.beitraege__quelle {
  font-size: 11.5px;
  color: var(--muted-brown);
}

.beitraege__raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.beitrag {
  display: flex;
  flex-direction: column;
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-radius: 6px;
  overflow: hidden;
}

.beitrag[hidden] { display: none; }

.beitrag__bild { height: 210px; }

.beitrag__inhalt {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px 26px 28px;
}

.beitrag__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.beitrag__datum { font-size: 11px; }

.beitrag__titel {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--espresso);
}

.beitrag__teaser {
  margin-bottom: 22px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted-brown);
}

.beitrag__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--linie);
}

.beitrag__link {
  padding-bottom: 2px;
  border-bottom: 2px solid #C2540F;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--espresso);
}

.beitrag__lese { font-size: 11px; }

/* Meldung, wenn eine Kategorie nur den Aufmacher enthält */
.beitraege__leer {
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted-brown);
}
.beitraege__leer[hidden] { display: none; }


/* --------------------------------------------------------------------------
   5. Schmalere Fenster

   ACHTUNG: Das Mobil-Artboard „06 · Aktuelles — Mobile 390"
   (SeiteAktuellesMobile) ist hier NICHT umgesetzt. Dort scrollt der
   Kategorie-Filter waagerecht. Was folgt, bricht nur die
   Desktop-Fassung sauber um.
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .akt-hero,
  .aufmacher,
  .newsletter { grid-template-columns: 1fr; gap: 40px; }

  .aufmacher__bild { height: 380px; }
  .beitraege__raster { grid-template-columns: repeat(2, 1fr); }
  .filterleiste { flex-wrap: wrap; gap: 16px; }
}

@media (max-width: 900px) {
  .akt-hero__titel { font-size: clamp(44px, 11vw, 104px); }
  .aufmacher__titel { font-size: clamp(32px, 7vw, 52px); }
  .beitraege__raster { grid-template-columns: 1fr; }
  .beitraege__kopf { flex-wrap: wrap; gap: 16px; }
  .newsletter .h2 { font-size: clamp(32px, 7vw, 52px); }
  .newsletter__feld { flex-wrap: wrap; }
  .newsletter__feld input { flex: 1 1 100%; }
}


/* --------------------------------------------------------------------------
   Mobil — Artboard „06 · Aktuelles — Mobile 390"
   Gemessen gegen die eigenständige Artboard-Ausgabe des Kunden
   (_referenz/aktuelles-mobile.html), geprüft mit _abgleich.html.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  /* Die Vorlage setzt durchgehend 24px Seitenrand; die geteilte
     Grundregel käme bei 390px auf 26px. */
  .akt-hero, .aufmacher, .beitraege, .newsletter { padding-inline: 24px; }

  /* --- Hero ---------------------------------------------------------- */
  .akt-hero { display: block; padding-block: 40px 30px; }

  .akt-hero .eyebrow {
    display: block;
    margin-bottom: 12px;
    font-size: 10.5px;
    letter-spacing: .26em;
  }

  .akt-hero__titel { font-size: 46px; line-height: .96; letter-spacing: .01em; }
  .akt-hero__vorspann { margin: 16px 0 12px; font-size: 15px; line-height: 1.6; }
  .akt-hero__zaehler { font-size: 11px; line-height: 1.9; letter-spacing: .02em; }

  /* --- Filterleiste ---------------------------------------------------
     Sieben Kategorien als waagerecht rollende Reihe, der Zähler darunter
     statt daneben. Die Reihe läuft absichtlich über den rechten Rand —
     sie ist ihr eigener Rollbereich, die Seite bleibt ohne Überlauf. */
  .filterleiste { display: block; padding: 18px 0; }

  .filter {
    flex-wrap: nowrap;
    gap: 8px;
    padding-inline: 24px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .filter::-webkit-scrollbar { display: none; }

  .filter button {
    flex: 0 0 auto;
    padding: 12px 15px;
    font-size: 11.5px;
    letter-spacing: .12em;
  }

  .filterleiste__zaehler { padding: 14px 24px 0; font-size: 11px; }

  /* --- Aufmacher ------------------------------------------------------ */
  .aufmacher { display: block; padding-block: 34px 40px; }

  .aufmacher__bild { height: 257px; }
  .aufmacher__meta { gap: 12px; margin: 18px 0 14px; }
  .aufmacher__meta .katmarke { padding: 7px 10px; font-size: 10px; }
  .aufmacher__meta .beitragsmeta { font-size: 11px; }

  .aufmacher__titel { font-size: 32px; line-height: 1.02; letter-spacing: .01em; }
  .aufmacher__teaser { margin: 14px 0 22px; font-size: 15px; line-height: 1.6; }
  .aufmacher .btn { padding: 15px 26px; font-size: 13px; }

  /* --- Beitragsliste --------------------------------------------------- */
  .beitraege { padding-block: 40px 44px; }

  .beitraege__kopf { display: block; margin-bottom: 0; }
  .beitraege__kopf .eyebrow { font-size: 10.5px; letter-spacing: .26em; }
  .beitraege__kopf .h2 { font-size: 30px; line-height: 1.04; letter-spacing: .01em; }
  .beitraege__quelle { margin: 14px 0 28px; font-size: 11px; line-height: 1.9; }

  .beitraege__raster { display: flex; flex-direction: column; gap: 22px; }

  .beitrag__bild { height: 192px; }
  .beitrag__inhalt { padding: 20px 22px 22px; }

  .beitrag__meta { gap: 12px; margin-bottom: 12px; }
  .beitrag__meta .katkennung { font-size: 10px; }
  .beitrag .beitragsmeta { font-size: 10.5px; }

  .beitrag__titel {
    margin-bottom: 10px;
    font-size: 24px;
    line-height: 1.05;
    letter-spacing: .01em;
  }

  .beitrag__teaser { margin-bottom: 18px; font-size: 15px; line-height: 1.6; }
  .beitrag__fuss { padding-top: 14px; }
  .beitrag__lese, .beitrag__link { font-size: 11.5px; }

  /* --- Newsletter -------------------------------------------------------
     Feld und Knopf stehen untereinander, beide über die volle Breite. */
  .newsletter { display: block; padding-block: 44px 48px; }

  .newsletter .eyebrow {
    display: block;
    margin-bottom: 12px;
    font-size: 10.5px;
    letter-spacing: .26em;
  }
  .newsletter .h2 { font-size: 32px; line-height: 1.04; letter-spacing: .01em; }
  .newsletter__text { margin: 16px 0 24px; font-size: 15px; line-height: 1.6; }

  .newsletter__feld { display: block; }
  .newsletter__feld input { width: 100%; height: 52px; padding-inline: 16px; }

  .newsletter__feld .btn {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 12px;
    padding: 15px 26px;
    font-size: 13px;
    letter-spacing: .1em;
    border-radius: 8px;
  }

  .newsletter__hinweis { margin-top: 14px; font-size: 11px; line-height: 1.9; }
}