/* =============================================================================
   Blog (seit 13. Oktober 2026)

   Übersicht: Karten mit Bild, Thema, Titel, Kurztext und "Weiterlesen", drei
   in einer Reihe. Beitrag: eine Lesespalte. Vorbild für den Aufbau ist die
   Blogseite von Rexago, die Gestaltung bleibt die der übrigen Seiten.
   ========================================================================== */
.beitraege {
  list-style: none;
  margin: 46px 0 0;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.beitrag {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-alt);
  overflow: hidden;
  transition: border-color 0.25s;
}

.beitrag:hover,
.beitrag:focus-within {
  border-color: var(--glow);
}

.beitrag__bild {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.beitrag__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}

.beitrag:hover .beitrag__bild img {
  transform: scale(1.04);
}

.beitrag__thema {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(10, 10, 11, 0.78);
  color: var(--glow);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.beitrag__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 28px 30px;
}

.beitrag__titel {
  font-size: 21px;
  font-weight: 400;
  line-height: 1.3;
  color: #fff;
}

.beitrag__titel a {
  color: inherit;
  text-decoration: none;
}

.beitrag__kurz {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--mut);
}

/* "Weiterlesen" steht in allen Karten auf einer Höhe, egal wie lang der Text ist. */
.beitrag__mehr {
  margin-top: auto;
}

.beitrag__mehr .link {
  margin-top: 24px;
}

.blog-schluss {
  padding: 80px var(--pad) 110px;
}

/* Abgesetzter Kasten: links Überschrift, Satz und Knopf, rechts ein Bild. */
.blog-schluss__kasten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-alt);
  overflow: hidden;
}

.blog-schluss__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 5vw, 70px);
}

.blog-schluss__text h2 {
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.12;
  color: #fff;
  margin: 0;
}

.blog-schluss__text p {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--mut);
}

.blog-schluss__text .blog-schluss__aktion {
  margin-top: 32px;
}

.blog-schluss__bild {
  min-height: 300px;
}

.blog-schluss__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 800px) {
  .blog-schluss__kasten {
    grid-template-columns: 1fr;
  }

  .blog-schluss__bild {
    min-height: 0;
    aspect-ratio: 16 / 9;
    order: -1;
  }
}

.lesetext .schritte {
  margin-top: 20px;
  max-width: none;
}

@media (max-width: 1040px) {
  .beitraege {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  /* Steht gleich auch in basis.css (Auftrag 043): nur zusammen ändern.
     Grund: .agent/knowledge/css-js-files.md, "Doppelte Regeln". */
  .beitraege,
  .blog-schluss,
  .lesetext {
    padding-left: var(--pad-sm);
    padding-right: var(--pad-sm);
  }
}

@media (max-width: 680px) {
  .beitraege {
    grid-template-columns: 1fr;
  }
}


/* =============================================================================
   HANDY, ZWEITE RUNDE (seit dem 23. Oktober 2026, Wünsche von Jürgen Stanek)
   ========================================================================== */

.lesetext > p b {
  color: #fff;
  font-weight: 400;
}

/* =============================================================================
   "PROJEKT ANFRAGEN" OHNE KASTEN (seit dem 24. Oktober 2026)

   Wunsch von Jürgen Stanek, überall: Der Aufruf steht frei, ohne Hintergrund
   und ohne Rand- oder Leuchtlinie. Betrifft die Auswahlseite, den Schluss der
   Blogübersicht und das Ende der Blogbeiträge.
   ========================================================================== */

.blog-schluss__kasten {
  border: 0;
  border-radius: 0;
  background: none;
}


/* =============================================================================
   LESBARKEIT UND BEDIENBARKEIT (seit dem 24. Oktober 2026)

   Nachbesserungen nach einer Prüfung auf Lesbarkeit und Bedienung mit
   Finger und Tastatur. Am Computer sieht alles aus wie vorher, die
   Änderungen greifen vor allem am Handy.
   ========================================================================== */

/* --- Kleine Beschriftungen am Handy: mindestens 11 Pixel ------------------
   Am Computer bleiben sie bei 9 Pixeln, wie gestaltet. Auf dem kleinen
   Bildschirm waren sie zu klein zum Lesen. Ausgenommen sind die Wochentage
   im Kalender: Sie stehen in sieben schmalen Spalten. */
@media (max-width: 560px) {
  /* Steht gleich auch in anfrage.css, basis.css, loesungen.css, projekte.css, ratgeber.css, termin.css, unternehmen.css (Auftrag 043): nur zusammen ändern.
     Grund: .agent/knowledge/css-js-files.md, "Doppelte Regeln". */
  .hero__scrollcue,
  .facts__label,
  .story__number,
  .project__link,
  .contact__label,
  .schritte b,
  .karte dt,
  .filter__name,
  .stelle .stelle__marke,
  .stelle__zwischen,
  .strip figcaption,
  .field label,
  .themen__nr,
  .faq__gruppe,
  .builder__stand,
  .uebernehmen__marke,
  .stimme__marke,
  .auswahl__weg,
  .anfrage__kachel .auswahl__weg,
  .anfrage__terminkopf,
  .stufenliste__nr,
  .pt__block,
  .liste th,
  .marke h3,
  .lichtprobe figcaption,
  .posten__gruppe,
  .stand__marke,
  .punkte__wer,
  .kette__stand,
  .marke__da,
  .buchen__zusage-marke,
  .karte__feldwort,
  .beitrag__thema,
  .faq__thema small,
  .probleme span,
  .leistungen__nr {
    font-size: 11px;
  }
}

/* Blog-Kopfbild mit der STANEK-Leuchtstele vor einem Bürogebäude (seit dem
   25. Oktober 2026). Die Szene ist KI-gerendert, das Logo auf der Stele ist
   aus der Original-Vektordatei eingesetzt. Breit wird oben und unten
   beschnitten, der Ausschnitt hält den Stelenkopf im Bild. Bis 700 px Breite
   kommt über <picture> eine eigene Hochformat-Fassung mit der ganzen Stele. */
.pagehead__image--stanek picture {
  display: contents;
}

.pagehead__image--stanek img {
  object-position: 50% 35%;
}

@media (max-width: 700px) {
  .pagehead__image--stanek img {
    object-position: 50% 50%;
  }
}