/*! purity-reinigung.de — Blog-Typografie + Nachtrag fehlender Utilities  (v1, 30.07.2026)
 * ---------------------------------------------------------------------------------------
 * WARUM ES DIESE DATEI GIBT
 * Die Blogartikel entstehen NICHT im React-Quellcode, sondern in
 * tools/blog-automation/publish-daily-blog.mjs. Der Tailwind-Purge in
 * private/source hat dieses Template nie gesehen. Ergebnis: 15 Klassen, die das
 * Template benutzt, fehlen in BEIDEN index-*.css-Bundles.
 *
 * WARUM KEIN REBUILD
 * `prose`/`prose-lg` kommen aus @tailwindcss/typography — das Plugin ist in
 * private/source ueberhaupt nicht installiert. Ein Rebuild braeuchte also eine
 * neue npm-Abhaengigkeit auf dem Kundenserver, wuerde neue Asset-Hashes erzeugen
 * (212 HTML-Dateien muessten nachgezogen werden) und dabei nicht deployte
 * Quellcode-Aenderungen mitliefern. Deshalb dieses additive Stylesheet.
 *
 * SPEZIFITAETS-REGEL (wichtig beim Erweitern)
 * Die Datei ist bewusst NICHT gelayert. Damit schlaegt sie den Tailwind-Preflight
 * (@layer base), der p/h2/ul auf margin:0 und h2 auf font-size:inherit setzt.
 * Alle Fliesstext-Regeln laufen ueber :where(...) (Spezifitaet 0) und greifen nur
 * auf Elemente OHNE class-Attribut. Damit gewinnt jede Tailwind-Utility aus dem
 * Hauptbundle gegen diese Datei — der CTA-Block im Artikel bleibt unangetastet.
 *
 * CACHE / DATEINAME
 * Caddy liefert /assets/* mit `immutable`. Aenderungen deshalb IMMER als neue
 * Datei (-v2, -v3 ...) plus Verweis im Publisher-Template nachziehen.
 * Der Dateiname darf NICHT mit "index-" beginnen — latestAsset() im Publisher
 * waehlt sonst diese Datei als Haupt-Bundle aus.
 */

/* ============================================================
   1) Fehlende Tailwind-Utilities (Werte = Tailwind-v4-Defaults)
   ============================================================ */

/* Layout-Container */
.max-w-6xl { max-width: 72rem; }          /* Artikel-Sektion; vorher volle Fensterbreite */
.max-w-sm  { max-width: 24rem; }          /* Footer-Beschreibungstext */

/* Abstaende */
.mt-5  { margin-top: calc(var(--spacing, .25rem) * 5); }
.p-7   { padding: calc(var(--spacing, .25rem) * 7); }     /* Artikel-Karte mobil */
.px-7  { padding-inline: calc(var(--spacing, .25rem) * 7); } /* CTA-Button */
.top-28 { top: calc(var(--spacing, .25rem) * 28); }       /* sticky Inhaltsverzeichnis */

/* Hero-Bild abdunkeln — ohne das steht weisse Schrift auf hellem Foto */
.opacity-30 { opacity: .3; }

/* Weisstoene mit Deckkraft (Tailwind schreibt hier Hex-Alpha) */
.text-white\/75 { color: #ffffffbf; }
.text-white\/65 { color: #ffffffa6; }

/* Responsive: sm = 40rem, md = 48rem, lg = 64rem (Tailwind-v4-Defaults) */
@media (min-width: 40rem) {
  .sm\:inline-flex { display: inline-flex; }   /* Header-CTA "Angebot anfordern" */
}
@media (min-width: 48rem) {
  .md\:flex { display: flex; }                 /* Desktop-Navigation */
  .md\:grid-cols-\[1\.2fr_1fr_1fr\] { grid-template-columns: 1.2fr 1fr 1fr; }
}
@media (min-width: 64rem) {
  .lg\:grid-cols-\[minmax\(0\,1fr\)_280px\] { grid-template-columns: minmax(0, 1fr) 280px; }
}

/* ============================================================
   2) prose / prose-lg — Ersatz fuer @tailwindcss/typography
   Werte entsprechen dem prose-lg-Profil des Plugins.
   Greift NUR auf Elemente ohne class-Attribut (= der vom Bot
   erzeugte Fliesstext). Alles mit class bleibt unberuehrt.
   ============================================================ */

:where(.prose) {
  color: #374151;
  max-width: none;              /* Template setzt zusaetzlich max-w-none */
}

:where(.prose-lg) {
  font-size: 1.125rem;
  line-height: 1.7777778;
}

/* Absaetze */
:where(.prose) :where(p:not([class])) {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
}
:where(.prose) > :where(p:not([class])):first-child { margin-top: 0; }

/* Ueberschriften — Preflight setzt sie sonst auf Fliesstextgroesse/-gewicht */
:where(.prose) :where(h2:not([class])) {
  color: #002157;
  font-size: 1.6666667em;
  font-weight: 700;
  line-height: 1.3333333;
  margin-top: 1.8666667em;
  margin-bottom: 1.0666667em;
  scroll-margin-top: 6rem;      /* fixe Kopfleiste: Sprungziele nicht verdecken */
}
:where(.prose) > :where(h2:not([class])):first-child { margin-top: 0; }

:where(.prose) :where(h3:not([class])) {
  color: #002157;
  font-size: 1.3333333em;
  font-weight: 600;
  line-height: 1.5;
  margin-top: 1.6666667em;
  margin-bottom: .6666667em;
  scroll-margin-top: 6rem;
}

/* Listen — Preflight nimmt ihnen list-style und Einzug */
:where(.prose) :where(ul:not([class])) {
  list-style-type: disc;
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
  padding-inline-start: 1.5555556em;
}
:where(.prose) :where(ol:not([class])) {
  list-style-type: decimal;
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
  padding-inline-start: 1.5555556em;
}
:where(.prose) :where(li:not([class])) {
  margin-top: .6666667em;
  margin-bottom: .6666667em;
  padding-inline-start: .4444444em;
}
:where(.prose) :where(li:not([class])::marker) { color: #4a90e2; }
:where(.prose) :where(li:not([class])) > :where(p:not([class])) {
  margin-top: .8888889em;
  margin-bottom: .8888889em;
}

/* Links im Fliesstext — Preflight setzt a{color:inherit} => vorher unsichtbar.
   Farbe absichtlich dunkler als #4A90E2 (Kontrast >= 4.5:1 auf Weiss). */
:where(.prose) :where(a:not([class])) {
  color: #1a5fa8;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
:where(.prose) :where(a:not([class])):hover { color: #002157; }

/* Auszeichnungen */
:where(.prose) :where(strong:not([class])),
:where(.prose) :where(b:not([class])) { color: #002157; font-weight: 700; }
:where(.prose) :where(em:not([class])) { font-style: italic; }
:where(.prose) :where(hr:not([class])) {
  border-top: 1px solid #e5e7eb;
  margin-top: 2.6666667em;
  margin-bottom: 2.6666667em;
}
:where(.prose) :where(blockquote:not([class])) {
  border-inline-start: 4px solid #4a90e2;
  color: #002157;
  font-style: italic;
  margin-top: 1.6666667em;
  margin-bottom: 1.6666667em;
  padding-inline-start: 1em;
}
:where(.prose) :where(table:not([class])) {
  width: 100%;
  margin-top: 1.7777778em;
  margin-bottom: 1.7777778em;
  font-size: .8888889em;
  line-height: 1.5;
}
:where(.prose) :where(th:not([class])) {
  color: #002157;
  font-weight: 600;
  text-align: start;
  border-bottom: 1px solid #d1d5db;
  padding: .6666667em .8888889em;
}
:where(.prose) :where(td:not([class])) {
  border-bottom: 1px solid #e5e7eb;
  padding: .6666667em .8888889em;
}
:where(.prose) :where(img:not([class])) {
  border-radius: .75rem;
  margin-top: 1.7777778em;
  margin-bottom: 1.7777778em;
}