/* Eigene Anpassungen an der fertigen Website.
   Die Dateien in _astro/ hält der Browser ein Jahr lang fest (immutable).
   Diese Datei nicht: Änderungen hier kommen bei allen Besuchern sofort an. */

/* „Zurück nach oben“ ist auf dem Handy leichter zu treffen (44 px hoch),
   ohne dass sich etwas verschiebt. */
.top-link {
  display: inline-block;
  padding-block: 10px;
  margin-block: -10px;
}

/* Akzentfarbe Rosa statt Blau (Knöpfe, Sternchen, Markierungen).
   "html:root" ist stärker als das ":root" der Seiten. */
html:root {
  --accent: #f4a7c1;
  --accent-hover: #ee8fb0;
  --accent-soft: #fdeef3;
  --accent-text: #c9517d; /* dunkleres Rosa für Schrift auf Weiß */
}

/* Auf hellem Rosa ist weiße Schrift schlecht lesbar: dunkle Schrift. */
html .btn:not(.btn--ghost):not(.btn--light) { --btn-fg: var(--ink); }
html .btn--light:hover { --btn-fg: var(--ink); }
html ::selection { color: var(--ink); }
html .skip-link { color: var(--ink); }
html .social[data-astro-cid-jo6i4kqk] a[data-astro-cid-jo6i4kqk]:hover { color: var(--ink); }

/* Schrift, die beim Drüberfahren die Akzentfarbe bekommt: dunkleres Rosa,
   damit sie auf Weiß lesbar bleibt. */
html a:hover { color: var(--accent-text); }
html .faq__item[data-astro-cid-lcdefpme] summary[data-astro-cid-lcdefpme]:hover h3[data-astro-cid-lcdefpme] {
  color: var(--accent-text);
}

/* Schatten unter dem festen „Anfragen“-Knopf auf dem Handy, passend zum Rosa. */
html .sticky-cta[data-astro-cid-bjs4jpu3] .btn[data-astro-cid-bjs4jpu3] {
  box-shadow: 0 10px 30px -10px #f4a7c1b3;
}

/* Kleine Medien-Namen über den Presseartikeln: dunkleres Rosa, lesbar. */
html .article__outlet[data-astro-cid-h5idnoh3] { color: var(--accent-text); }

/* Auf hellem Rosa dunkle Schrift: Auszeichnungs-Schild (Bildungsprojekte)
   und Abspiel-Knopf der Videos. */
html .award__badge[data-astro-cid-ffnncsoy] { color: var(--ink); }
html .yt__play[data-astro-cid-rgggrgzz] { color: var(--ink); }

/* Presse: beide Spalten immer gleich breit, damit die Bilder links und rechts
   gleich groß und auf einer Höhe sind. Lange Wörter in den Titeln dürfen
   umbrechen, statt die Spalte breiter zu drücken. */
html .articles[data-astro-cid-h5idnoh3] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (width >= 48rem) {
  html .articles[data-astro-cid-h5idnoh3] {
    grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  }
}
html .article__title[data-astro-cid-h5idnoh3] {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Presse: in jeder Reihe beginnen Bild, Medium und Titel links und rechts
   auf derselben Höhe – auch wenn ein Medienname zwei Zeilen braucht.
   Jeder Beitrag nutzt dafür die Zeilen des gemeinsamen Rasters. */
@supports (grid-template-rows: subgrid) {
  html .article[data-astro-cid-h5idnoh3] {
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: .35rem;
    align-content: stretch;
  }
  html .article__body[data-astro-cid-h5idnoh3] { display: contents; }
  html .article__media[data-astro-cid-h5idnoh3] { margin-bottom: .5rem; }
}