@charset "UTF-8";

/* Nur für die Startseite (index.html): ausklappbare Artikeltexte.
   Zusammen mit dem Weiterlesen-Skript am Ende von index.html. */

:root {
  --excerpt-collapsed-height: 240px;
}

@media (max-width: 640px) {
  :root {
    --excerpt-collapsed-height: 170px;
  }
}

/* Ausklappbarer Artikeltext (wird nur aktiv, wenn per JS entsprechende
   Klassen gesetzt werden – betrifft daher ausschließlich Seiten, die das
   zugehörige Skript einbinden, z.B. die Startseite).

   Zwei unabhängige Bausteine:
   - "has-extra": weitere Kind-Elemente nach dem ersten Absatz (Video-Embed,
     Bilder, weitere Absätze) werden im eingeklappten Zustand komplett
     ausgeblendet statt mittig abgeschnitten – so kann es nie zu
     Überlappungen mit eingebetteten Videos/iframes kommen, die selbst
     absolut positionierte Elemente enthalten.
   - "has-long-preview": der erste Absatz selbst ist länger als die
     Vorschau-Höhe und wird dafür sanft gekürzt (nur reiner Text/Inline-
     Inhalt, nie ein Video). */
.post-excerpt.excerpt-collapsible.has-extra.is-collapsed > :not(:first-child) {
  display: none;
}

.post-excerpt.excerpt-collapsible.has-long-preview > :first-child {
  position: relative;
  overflow: hidden;
  transition: max-height .45s ease;
}

.post-excerpt.excerpt-collapsible.has-long-preview.is-collapsed > :first-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.96) 75%);
  pointer-events: none;
}

@media (max-width: 640px) {
  .post-excerpt.excerpt-collapsible.has-long-preview.is-collapsed > :first-child::after {
    height: 44px;
  }
}

.excerpt-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 8px 4px;
  background: none;
  border: none;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media (max-width: 640px) {
  .excerpt-toggle {
    padding: 12px 6px;
    min-height: 44px; /* ausreichend große Tippfläche auf Touch-Geräten */
    font-size: 1rem;
  }
}

.excerpt-toggle:hover {
  text-decoration: underline;
}

.excerpt-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 3px;
}

.excerpt-toggle__icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .3s ease;
}

.excerpt-toggle[aria-expanded="true"] .excerpt-toggle__icon {
  transform: rotate(225deg);
}

@media (prefers-reduced-motion: reduce) {
  .post-excerpt.excerpt-collapsible.has-long-preview > :first-child,
  .excerpt-toggle__icon {
    transition: none;
  }
}

/* Ab Desktop/Laptop-Breite (deckt sich mit dem content-area-Breakpoint
   weiter unten) immer den kompletten Artikeltext zeigen. Das JS setzt beim
   Laden für lange Artikel unabhängig von der Bildschirmbreite eine feste
   max-height als Inline-Style sowie die "is-collapsed"/"has-extra"-Klassen –
   diese werden hier gezielt mit !important überschrieben, um das Verhalten
   ausschließlich auf Smartphone/Tablet (<= 980px) zu begrenzen. */
@media (min-width: 981px) {
  .post-excerpt.excerpt-collapsible.has-extra.is-collapsed > :not(:first-child) {
    display: revert !important;
  }

  .post-excerpt.excerpt-collapsible.has-long-preview > :first-child {
    max-height: none !important;
    overflow: visible !important;
  }

  .post-excerpt.excerpt-collapsible.has-long-preview.is-collapsed > :first-child::after {
    display: none !important;
  }

  .excerpt-toggle {
    display: none !important;
  }
}