/* Blog: Übersicht, Aufmacher, Karten, Beitragsseite.
   Eigene Gestaltung, kein Nachbau einer Divi-Seite.

   Namen: Klassen deutsch und nach dem Muster block__element--art.
   Werte, die aus dem Bestand kommen, reisen als CSS-Eigenschaft am
   Element mit (--bereich-eigenschaft) – siehe includes/stil.php. */

/* ------------------------------------------------------------ Aufmacher */

/* Der neueste Beitrag: Bild und Text nebeneinander, deutlich vom Raster
   darunter abgesetzt – aber nicht bildschirmfüllend. */
.aufmacher {
  margin-bottom: var(--abstand-xl);
}

.aufmacher__verweis {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.aufmacher__bild {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-gross);
  overflow: hidden;
  box-shadow: var(--schatten-flach);
}

.aufmacher__bild picture {
  display: block;
  height: 100%;
}

.aufmacher__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

@media (hover: hover) {
  .aufmacher__verweis:hover .aufmacher__bild img {
  transform: scale(1.03);
  }
}

.aufmacher__marke {
  display: inline-block;
  margin-bottom: 0.7rem;
  padding: 0.2em 0.8em;
  border-radius: 999px;
  background: rgba(15, 74, 126, 0.09);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blau);
}

.aufmacher__titel {
  margin-bottom: 0.5rem;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.25;
}

@media (hover: hover) {
  .aufmacher__verweis:hover .aufmacher__titel {
  color: var(--blau-hell);
  }
}

.aufmacher__kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  margin-bottom: 0.7rem;
  font-size: 0.87rem;
  color: var(--text-gedaempft);
}

.aufmacher__anriss {
  margin-bottom: 0.8rem;
  color: var(--text-gedaempft);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 900px) {
  .aufmacher__verweis {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* -------------------------------------------------------- Beitragskarten */

.beitragskarten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--abstand-l) var(--abstand-m);
}

.beitragskarten--drei {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-top: var(--abstand-m);
}

.beitragskarte {
  display: flex;
}

.beitragskarte__verweis {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--radius-gross);
  overflow: hidden;
  background: var(--rein-weiss);
  box-shadow: var(--schatten-flach);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.25s ease;
}

@media (hover: hover) {
  .beitragskarte__verweis:hover {
    box-shadow: var(--schatten-karte);
  }
}

/* Feste Bildhöhe, damit die Titel im Raster auf einer Linie beginnen. */
.beitragskarte__bild {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--hell);
  overflow: hidden;
}

/* Das <picture> muss die Fläche mitnehmen, sonst greift die 100-%-Höhe des
   Bildes ins Leere und unter dem Motiv bleibt ein grauer Streifen stehen. */
.beitragskarte__bild picture {
  display: block;
  height: 100%;
}

.beitragskarte__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

@media (hover: hover) {
  .beitragskarte__verweis:hover .beitragskarte__bild img {
  transform: scale(1.04);
  }
}

/* Zwei Beiträge haben überhaupt kein Bild – statt einer Lücke steht dort
   das Logo als Monogramm auf ruhigem Grund. */
.beitragskarte__ersatz {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--hell), #dbe4ea);
}

.beitragskarte__ersatz img {
  width: 34%;
  height: auto;
  opacity: 0.4;
}

/* Als Spalte, damit „Weiterlesen“ unten sitzt und alle Karten einer Reihe
   auf gleicher Höhe abschließen. */
.beitragskarte__inhalt {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem 1.2rem 1.3rem;
}

.beitragskarte__kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  margin-bottom: 0.3rem;
  font-size: 0.84rem;
  color: var(--text-gedaempft);
}

.beitragskarte__dauer::before {
  content: "·";
  margin-right: 0.8rem;
}

.beitragskarte__titel {
  margin-bottom: 0.45rem;
  font-size: 1.2rem;
  line-height: 1.3;
}

@media (hover: hover) {
  .beitragskarte__verweis:hover .beitragskarte__titel {
  color: var(--blau-hell);
  }
}

.beitragskarte__anriss {
  margin-bottom: 0.5rem;
  font-size: 0.94rem;
  color: var(--text-gedaempft);
  /* Vier Zeilen reichen als Vorgeschmack; alles andere zerreißt das Raster. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.beitragskarte__reihe {
  align-self: flex-start;
  margin-bottom: 0.5rem;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  background: var(--hell);
  font-size: 0.78rem;
  color: var(--blau-akzent);
}

.beitragskarte__mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin: auto 0 0;
  font-weight: 700;
  color: var(--blau);
}

.beitragskarte__mehr svg {
  width: 0.7em;
  height: 0.7em;
  transition: transform 0.2s ease;
}

@media (hover: hover) {
  .beitragskarte__verweis:hover .beitragskarte__mehr svg, .aufmacher__verweis:hover .beitragskarte__mehr svg {
  transform: translateX(3px);
  }
}

/* ----------------------------------------------------------- Themenfilter */

/* Ein Thema je Beitrag, abgeleitet aus der Reihe (BLOG_THEMEN). Die Wahl
   steht als Zeile unter dem Vorspann; das aktive Thema trägt die Marke. */
.blogfilter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--abstand-m);
}

.blogfilter__wahl {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 1em;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--rein-weiss);
  color: var(--text);
  font-size: 0.92rem;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
  .blogfilter__wahl:hover {
    border-color: var(--blau);
    color: var(--blau);
  }
}

.blogfilter__wahl[aria-current] {
  border-color: var(--blau);
  background: var(--blau);
  color: var(--weiss);
  font-weight: 700;
}

.blogfilter__zahl {
  font-size: 0.8em;
  opacity: 0.75;
}

/* -------------------------------------------------------- Beitragsseite */

.beitragskopf {
  padding-top: var(--abstand-l);
}

/* Nur Angemeldete sehen Entwürfe – die Zeile sagt, warum die Seite so
   aussieht, und wo im Text noch etwas fehlt. */
.beitragskopf__entwurf {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: var(--abstand-s);
  padding: 0.6em 1em;
  border-radius: var(--radius);
  background: #fff4d6;
  color: #6b4b00;
  font-size: 0.9rem;
}

.beitragskopf__entwurf svg {
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
}

/* Offene Stelle „[Von dir: …]“ im Entwurf. */
.luecke {
  padding: 0.05em 0.3em;
  border-radius: 3px;
  background: #ffe28a;
  color: #4a3400;
}

.brotkrumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
  margin-bottom: var(--abstand-m);
  font-size: 0.85rem;
  color: var(--text-gedaempft);
}

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

@media (hover: hover) {
  .brotkrumen a:hover {
  color: var(--blau);
  text-decoration: underline;
  }
}

.brotkrumen svg {
  width: 0.6em;
  height: 0.6em;
  opacity: 0.6;
}

.brotkrumen span[aria-current] {
  color: var(--text);
}

.beitragskopf__reihe {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.6rem;
  padding: 0.3em 0.9em;
  border-radius: 999px;
  background: var(--hell);
  font-size: 0.85rem;
  color: var(--blau-akzent);
}

.beitragskopf__reihe svg {
  width: 1.05em;
  height: 1.05em;
}

.beitragskopf__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-gedaempft);
}

.beitragskopf__angabe {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

.beitragskopf__angabe svg {
  width: 1.05em;
  height: 1.05em;
  opacity: 0.75;
}

.beitragskopf__bild {
  margin: var(--abstand-l) 0 0;
}

.beitragskopf__bild img {
  width: 100%;
  max-height: 30rem;
  object-fit: cover;
  border-radius: var(--radius-gross);
}

/* Fließtext eines Beitrags: Lesebreite, größere Schrift, ruhige Bilder. */
.beitragstext .abschnitt {
  padding-block: var(--abstand-l);
}

.beitragstext .bahn {
  width: min(100% - 2 * var(--abstand-m), var(--inhalt-schmal));
}

.beitragstext .fliesstext {
  font-size: 1.08rem;
  line-height: 1.75;
}

.beitragstext .fliesstext > p {
  margin-bottom: var(--abstand-m);
}

.beitragstext .fliesstext h2 {
  margin-top: var(--abstand-l);
}

/* Bilder im Text dürfen etwas über die Lesespalte hinausragen. */
.beitragstext .fliesstext figure {
  margin: var(--abstand-l) 0;
}

/* Bilder laufen bis zur Lesespalte, aber nie über ihre eigene Größe hinaus –
   die 188 px schmale Unterschrift stand sonst bildschirmbreit und unscharf da.
   Fotos aus der Mediathek sind breiter als die Spalte und füllen sie damit
   weiterhin ganz. Schmalere Bilder stehen mittig, wie das Titelbild – nur
   volle Breite sieht bündig aus, alles andere wirkte angeklebt. */
.beitragstext .fliesstext figure img,
.beitragstext .fliesstext p > img {
  display: block;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  border-radius: var(--radius);
}

.beitragstext .fliesstext figcaption {
  margin-top: var(--abstand-xs);
  font-size: 0.88rem;
  color: var(--text-gedaempft);
  text-align: center;
}

@media (min-width: 1100px) {
  .beitragstext .fliesstext figure.size-large,
  .beitragstext .fliesstext figure.alignwide {
    width: calc(100% + 10rem);
    margin-left: -5rem;
  }
}

/* Fragen zum Beitrag (faq-Baustein) laufen in der Lesespalte, nicht
   schmaler – der Text darüber ist genauso breit. */
.beitragstext .faq {
  max-width: none;
  margin-bottom: var(--abstand-m);
}

/* ------------------------------------------------------- Fuß des Beitrags */

.beitragsfuss {
  padding-block: var(--abstand-l) var(--abschnitt-luft);
}

/* Das eine Ziel am Ende: ein Knopf auf ruhiger Fläche, vor der Autorzeile. */
.beitragsaufruf {
  display: flex;
  justify-content: center;
  margin-bottom: var(--abstand-l);
  padding: var(--abstand-m);
  border-radius: var(--radius-gross);
  background: var(--hell);
}

.beitragsaufruf .knopf svg {
  width: 0.8em;
  height: 0.8em;
}

.autorzeile {
  display: flex;
  align-items: center;
  gap: var(--abstand-m);
  padding: var(--abstand-m);
  border-radius: var(--radius-gross);
  background: var(--hell);
}

.autorzeile__bild {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.autorzeile__name {
  margin: 0;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--blau);
}

.autorzeile__rolle {
  margin: 0 0 0.3rem;
  font-size: 0.92rem;
  color: var(--text-gedaempft);
}

.autorzeile__weiter {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin: 0;
  font-weight: 700;
}

.autorzeile__weiter svg {
  width: 0.7em;
  height: 0.7em;
}

.teilen {
  margin-top: var(--abstand-l);
}

.teilen__titel {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-gedaempft);
}

.teilen__titel svg {
  width: 1.05em;
  height: 1.05em;
}

.teilen__wege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
}

.teilen__weg {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1em;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--rein-weiss);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
  .teilen__weg:hover {
  border-color: var(--blau);
  color: var(--blau);
  }
}

.teilen__weg svg {
  width: 1.1em;
  height: 1.1em;
}

.teilen__weg[data-erledigt] {
  border-color: #2e7d32;
  color: #2e7d32;
}

.nachbarn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-m);
  margin-top: var(--abstand-l);
  padding-top: var(--abstand-m);
  border-top: 1px solid var(--linie);
}

.nachbar {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--abstand-s) var(--abstand-m);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease;
}

@media (hover: hover) {
  .nachbar:hover {
  border-color: var(--blau);
  }
}

.nachbar--weiter {
  text-align: right;
}

.nachbar__richtung {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.8rem;
  color: var(--text-gedaempft);
}

.nachbar--weiter .nachbar__richtung {
  justify-content: flex-end;
}

.nachbar__richtung svg {
  width: 0.65em;
  height: 0.65em;
}

.nachbar__titel {
  font-weight: 700;
  color: var(--blau);
}

.beitragsfuss__titel {
  margin-top: var(--abschnitt-luft);
  padding-top: var(--abstand-l);
  border-top: 1px solid var(--linie);
  font-size: 1.4rem;
}

.knopf--schlicht {
  background: transparent;
  border: 1px solid var(--linie);
  color: var(--blau);
  font-size: 1rem;
}

@media (hover: hover) {
  .knopf--schlicht:hover {
  background: var(--hell);
  border-color: var(--blau);
  color: var(--blau);
  }
}

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

  .nachbar--weiter {
    text-align: left;
  }

  .nachbar--weiter .nachbar__richtung {
    justify-content: flex-start;
  }

  .autorzeile {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

.blaettern {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--abstand-xl);
}

.blaettern__seite {
  display: grid;
  place-items: center;
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 0.6rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  text-decoration: none;
}

@media (hover: hover) {
  .blaettern__seite:hover {
  border-color: var(--blau);
  }
}

.blaettern__seite--hier {
  background: var(--blau);
  border-color: var(--blau);
  color: var(--weiss);
}

/* Aus Divi-Code-Modulen übernommenes Markup bringt eigene Stile mit.
   Der Kasten begrenzt sie und fängt zu breite Inhalte ab. */
.uebernommen {
  max-width: 100%;
  overflow-x: auto;
}

.uebernommen img {
  max-width: 100%;
  height: auto;
}