/* Bausteine: die Muster, die alle Inhaltsseiten teilen — Sektionen, Karten, Listen,
   Knopf-Zweitvariante, Platzhalter. Kopf und Fuss stehen in layout.css, Tokens und
   Grundtypografie in basis.css.

   Farben und Masse kommen ausschliesslich aus den Tokens: hier steht kein roher
   Farbwert. Wer eine neue Farbe braucht, legt sie in basis.css als Token an.
   Die Klassennamen sind der Vertrag fuer die Seitenplaene 03-02 bis 03-05 und
   werden nicht umbenannt. */

/* 1. Sektionen ----------------------------------------------------------- */

/* Eine Sektion laeuft ueber die volle Breite; begrenzt wird erst der innere
   Container. Ohne Flaechen-Modifikator bleibt der helle Seitengrund sichtbar —
   die Seite hat eine durchgehende Farbflaeche, Sektionen sind darauf transparent. */
.sektion {
  padding-block: 2.5rem;
}

.sektion--weiss {
  background: var(--weiss);
}

.sektion--grau {
  background: var(--flaeche-grau);
}

.sektion--blau {
  background: var(--flaeche-blau);
}

/* Der Verlauf traegt weissen Text. Die Vorlage laesst ihn von #0077b6 glatt bis
   #90e0ef laufen — dort steht Weiss in der Verlaufsmitte nur noch bei 2,6:1 und
   verfehlt WCAG AA deutlich. Beide Vorlagenfarben und die Verlaufsrichtung bleiben
   erhalten; nur der Aufhellungsbereich ist in die letzten 30 % geschoben. Gemessen
   (1440x900, 900x900, 360x740) liegt der weisse Kopftext zwischen 3,5 % und 67 %
   der Verlaufslinie und damit vollstaendig auf dem flachen #0077b6 — 4,87:1 fuer
   Normal- und Grosstext. Die helle Ecke unten rechts liegt hinter bzw. unter den
   weissen Karten, wo kein weisser Text steht. */
.sektion--verlauf {
  background: linear-gradient(135deg, var(--primaer) 0, var(--primaer) 70%, var(--flaeche-cyan) 100%);
  color: var(--weiss);
}

.sektion--verlauf h2,
.sektion--verlauf h3,
.sektion--verlauf p {
  color: var(--weiss);
}

/* Gegenregel zur Zeile darueber, direkt neben ihrer Ursache: Karten bringen ihre
   eigene weisse Flaeche mit — ohne diese Regel stuende dort Weiss auf Weiss.
   Sie stand bis zum Review in seite-startseite.css und haette jede weitere Seite
   mit .sektion--verlauf + .karte unlesbar gemacht. */
.sektion--verlauf .karte h3,
.sektion--verlauf .karte p {
  color: var(--text);
}

/* Innerer Container. Die Breitenbegrenzung kommt aus .inhalt-breite, das im Markup
   daneben steht (`class="sektion__innen inhalt-breite"`) — hier steht bewusst kein
   zweites max-width, nur der Bezugsrahmen fuer abgesetzte Elemente. */
.sektion__innen {
  position: relative;
}

.sektion__kopf {
  margin-bottom: 2rem;
  text-align: center;
}

.sektion__unterzeile {
  color: var(--text-gedaempft);
  max-width: 60ch;
  margin-inline: auto;
}

/* Auf faerbenden Sektionen wuerde der gedaempfte Grauton absaufen. */
.sektion--verlauf .sektion__unterzeile {
  color: var(--weiss);
}

/* Auf der 20-%-Blauflaeche kommt #666 nur auf 4,02:1 — unter WCAG AA fuer
   Normaltext. Derselbe Grauton eine Stufe dunkler haelt dort 6,18:1. */
.sektion--blau .sektion__unterzeile {
  color: var(--text-gedaempft-stark);
}

/* 2. Karten -------------------------------------------------------------- */

/* Grundzustand ist eine Spalte (schmale Geraete); die Modifikatoren teilen erst
   ab 768px auf. Die Kopfnavigation schaltet seit Phase 9 erst bei 1200px um
   (layout.css) — das ist bewusst ein anderer Punkt: Karten koennen schmaler
   werden, eine Navigationsreihe nicht. */
.karten {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

/* Deutsche Komposita sind laenger als jede Spalte, die drei Karten auf einem
   Tablet uebrig lassen: „Krankenversicherung" misst allein 235px. Ohne Trennung
   waere das die Mindestbreite der Spalte — genau daran ist das Kartenraster bei
   768px ueber den Viewport hinausgelaufen (aufgefallen mit dem Tablet-Viewport in
   layout-pruefung.mjs). `hyphens` trennt sauber am Wortstamm (die Seite ist
   lang="de-AT"), `overflow-wrap` ist der Rueckfall fuer Browser ohne
   Trennmuster. */
.karte {
  background: var(--weiss);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Zentriert steht der Kartentext seit Ticket d14bd1fa auf ALLEN Seiten und nicht
   mehr nur auf der Startseite: Eine Kachel mit kurzer Beschriftung ist ein
   geschlossener Block, kein Lesetext, und auf 360px stand sie je nach Seite mal so
   und mal so. Die Startseite ist der Massstab — dort sind Kacheln seit Ticket
   197dea4c zentriert (abgenommen und deployt). Ausgenommen sind die Kacheln, deren
   Inhalt Lesetext IST: die Hub-Listen unten und die beiden Karten auf /ratgeber/
   (seite-ratgeber.css).
   Ab 768px wird die Angabe unten wieder zurueckgenommen: Dort stehen Kacheln
   nebeneinander, die Zeilen werden kuerzer und linksbuendig liest sich besser.
   Der Desktop bleibt damit unangetastet — genau das ist der Zweck der
   Rueckstellung, nicht bloss ein Nebeneffekt.

   Die Ausrichtung steht als eigene Regel in :where() — Spezifitaet 0,0,0. Sie und
   ihre Ruecknahme ab 768px duerfen keine seiteneigene Ausrichtung schlagen:
   .vorteil (seite-ueber-uns.css) sowie .weg, .produkt, .schritt und .stimme
   (seite-startseite.css) haben je 0,1,0 und gewinnen damit auf jeder Breite —
   vorher hing genau das an der Reihenfolge der <link>-Zeilen in layout.html, weil
   beide Seiten dieselbe Spezifitaet hatten. Nur die Ausrichtung ist entschaerft,
   nicht die Flaechenangaben oben: Zu denen gibt es keine seiteneigene Gegenregel,
   und 0,0,0 waere dort eine Schwaechung ohne Nutzen. */
:where(.karte) {
  text-align: center;
}

/* Hub-Karten tragen Fliesstext, keine Kachelbeschriftung: Titel und Auszug sind
   vier bis sieben Zeilen und lesen sich nur an einer Kante — zentriert flattern
   beide Textkanten und das Auge findet den Zeilenanfang nicht. Die Kachel selbst
   bleibt zentriert (Bild, Datum), der Lesetext darin nicht.
   0,2,0 und damit staerker als die :where()-Regeln oben und unten: Diese Ausnahme
   gilt bewusst auf JEDER Breite — ab 768px stuende der Text ohnehin links. */
.liste .karte {
  text-align: left;
}

/* Silbentrennung glaettet eine flatternde Kante — bei zentriertem Text gibt es
   keine, dort bleiben nur die Trennstriche als Rauschen. Gemessen bei 360px ueber
   die Zeilenkaesten: In den zentrierten Kachel-Absaetzen der Startseite stehen 16
   Trennstriche (.weg, .produkt, .schritt und der Absenden-Hinweis), auf
   /ueber-uns/ in den zwoelf zentrierten Kacheltexten keiner.
   Ab 768px bleibt die Trennung, denn dort hat sie ihren Grund: Ein deutsches
   Kompositum ist die Mindestbreite seiner Spalte und hat das Kartenraster bei
   768px ueber den Viewport geschoben (siehe .karte oben). Auf 360px steht die
   Kachel allein in ihrer Spalte, und `overflow-wrap: break-word` bleibt als
   Rueckfall stehen — Ueberbreite kann daraus nicht entstehen, layout-pruefung.mjs
   misst sie je Element mit.
   Die Regel deckt auch die beiden linksbuendigen Ausnahmen mit ab (Hub-Karten,
   /ratgeber/). Dort waere die Trennung nicht falsch, aber eine zweite Regel nur
   fuer sie waere mehr Pflegestelle als Gewinn: 272px Spaltenbreite lassen wenig
   Flattern uebrig. */
@media (max-width: 767.98px) {
  .karte {
    hyphens: manual;
  }
}

/* 3. Knopf-Zweitvariante -------------------------------------------------- */

/* Sekundaer-CTA der Vorlage: weisser Grund, blauer Rahmen, beim Ueberfahren gefuellt.
   Ergaenzt .knopf aus basis.css, ersetzt es nicht — beide Klassen stehen zusammen. */
.knopf--umriss {
  background: var(--weiss);
  color: var(--primaer);
  border: 2px solid var(--primaer);
  box-shadow: none;
}

.knopf--umriss:hover {
  background: var(--primaer);
  color: var(--weiss);
}

/* 4. Listen und Bilder ---------------------------------------------------- */

.liste-haken {
  list-style: none;
  padding: 0;
}

.liste-haken li {
  position: relative;
  padding-left: 1.75rem;
}

.liste-haken li::before {
  content: "\2714";
  position: absolute;
  left: 0;
  color: var(--primaer);
}

.bild-rund {
  border-radius: 50%;
  object-fit: cover;
  aspect-ratio: 1;
}

/* 5. Einbettungen --------------------------------------------------------- */

/* Rahmen fuer die GHL-Widgets. Die .platzhalter-box, die hier bis Phase 5 stand,
   ist ersatzlos entfallen — seit den beiden echten Einbettungen nutzt sie keine
   Seite mehr.

   Die Hoehe ist bewusst eine UNTERGRENZE und keine feste Angabe: Das
   form_embed.js von api.leadconnectorhq.com ist ein iframeResizer, der die
   Inhaltshoehe im Widget misst und sie per postMessage als inline height an das
   iframe schreibt. min-height wirkt daneben als Boden — ein zu kurz gemeldetes
   Widget wird nicht abgeschnitten, ein hoeheres darf wachsen. Eine feste height
   wuerde genau dieses Nachziehen verhindern. */
/* Der Container bekommt bewusst KEINE Breitenangabe. Ein div fuellt als Blockbox
   ohnehin die verfuegbare Breite und zieht dabei seine eigenen Raender ab; ein
   width: 100% haette dagegen die volle Elternbreite gefordert und die Raender
   obendrauf gelegt — eine Einbettung in einer Karte mit Innenabstand ragte auf
   360px genau um diesen Abstand heraus. Der Fall ist in Phase 5 einmal
   aufgetreten (layout-pruefung.mjs) und bleibt fuer jede kuenftige Einbettung
   in einer Karte ausgeschlossen.
   Das iframe darunter braucht die Angabe sehr wohl: Als ersetztes Element bringt
   es eine eigene Vorgabebreite von 300px mit. */
.einbettung iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* Der Buchungskalender braucht auf dem Desktop rund 780px. Auf schmalen Geraeten
   stapelt GHL Monatsraster und Zeitliste untereinander statt nebeneinander —
   dort liegt die Untergrenze deshalb deutlich hoeher. */
.einbettung[data-ghl-kalender] iframe {
  min-height: 780px;
}

@media (max-width: 600px) {
  .einbettung[data-ghl-kalender] iframe {
    min-height: 1000px;
  }
}

/* Zwei-Klick-Consent (Ticket 2c2834dc): Vor dem Klick traegt das iframe nur
   data-src — der leere Rahmen wuerde sonst mit seiner min-height als weisse
   Flaeche unter der Consent-Karte stehen. Nach dem Klick setzt
   kalender-consent.js die src und blendet die Karte aus. */
.einbettung[data-ghl-kalender] iframe:not([src]) {
  display: none;
}

.kalender-consent {
  padding: 24px;
  text-align: center;
}

.kalender-consent p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-gedaempft);
  max-width: 46ch;
  margin: 0 auto 16px;
  text-align: left;
}

/* 6. Abschlussbild -------------------------------------------------------- */

/* Die Vorlage setzt diese Sektion auf padding-top/-bottom 0 — das Bild schliesst
   direkt an den Footer an. Steht auf Ueber uns, Impressum und Datenschutz und
   gehoert damit zu den geteilten Mustern; bis zum Review lag der Block dreimal
   wortgleich in den drei Seitendateien. */
.abschlussbild {
  padding-block: 0;
}

.abschlussbild img {
  width: 100%;
}

/* 7. Sicherheitsnetz ------------------------------------------------------ */

/* Seiten ohne Sektionsaufbau (Impressum, Datenschutz, spaeter der Rechner) haengen
   sonst randlos am Fensterrand: main traegt seit Phase 3 keine Breitenbegrenzung
   mehr, weil vollflaechige Sektionen bis zum Rand laufen muessen. */
main > :not(.sektion) {
  max-width: var(--breite-max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* 8. Blogbeitraege und Rasseprofile --------------------------------------- */

/* Diese Muster teilen sich Blog- und Rassenbereich vollstaendig: Beide Hubs
   zeigen dieselbe Liste, beide Beitragsarten haben dieselben Kopf- und
   Fussbausteine (V12). Sie stehen deshalb hier und nicht zweimal in
   seite-blog.css und seite-rasse.css. Wirklich bereichseigen ist nur das
   Datum in der Blog-Liste und die Steckbrief-Tabelle der Rasseprofile. */

/* Brotkruemelnavigation ueber der H1 (V6). Sie steht als direktes Kind von <main>
   und bekommt Breite und Seitenrand vom Sicherheitsnetz weiter oben. */
.brotkrumen {
  padding-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-gedaempft-stark);
}

.brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  list-style: none;
  padding: 0;
}

/* Das Trennzeichen gehoert zur Darstellung, nicht zum Text: Als ::before landet es
   weder in der Vorlesereihenfolge noch in der Zwischenablage. */
.brotkrumen li + li::before {
  content: "\203A";
  margin-right: 0.5rem;
}

/* Hub-Liste. Das Markup erzeugt build.mjs; jeder Eintrag traegt zusaetzlich .karte,
   Flaeche und Innenabstand kommen also von dort. */
.liste {
  display: grid;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
}

.liste__titel {
  font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
}

.liste__titel a {
  text-decoration: none;
}

.liste__titel a:hover {
  color: var(--primaer);
  text-decoration: underline;
}

.liste__titel a:focus-visible {
  outline: 3px solid var(--primaer);
  outline-offset: 2px;
}

.liste__leer {
  color: var(--text-gedaempft);
}

/* Vorschaubild einer Kachel. Breite, Hoehe und Blockdarstellung kommen aus dem
   Reset in basis.css (`img { max-width: 100%; height: auto; display: block }`) —
   hier bleibt genau das uebrig, was das Bild in die Karte einpasst. Es steht als
   erstes Kind der Karte; den Abstand zum Titel setzt das `gap` von .karte.
   Kein voller Anschnitt bis zum Kartenrand: Das kostete einen negativen Rand in
   der Breite des Karten-Innenabstands und braeche, sobald der sich aendert. */
.liste__bild {
  border-radius: var(--radius);
}

/* Autorenzeile direkt unter der H1 (V15). Ohne Foto: Die Portraets stehen auf
   /ueber-uns/, wohin der Name verlinkt — eine zweite Kopie waere eine zweite
   Pflegestelle. */
.autorenzeile {
  max-width: 70ch;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-gedaempft-stark);
}

/* Der Fliesstext eines Beitrags oder Rasseprofils. Dasselbe Zeilenmass wie auf
   Ueber uns: ueber 70 Zeichen wird eine Zeile auf grossen Schirmen unlesbar. */
.beitrag {
  max-width: 70ch;
}

.beitrag h2 {
  margin-top: 2.5rem;
}

/* Deckt zugleich die Fragen des FAQ-Abschnitts ab — sie stehen als h3 (V12). */
.beitrag h3 {
  margin-top: 1.75rem;
}

.beitrag p,
.beitrag ul,
.beitrag ol,
.beitrag table {
  margin-top: 0.75rem;
}

.beitrag li + li {
  margin-top: 0.25rem;
}

/* Titelbild unter der Autorenzeile. Die <figure> braucht einen eigenen Abstand:
   Der Reset nimmt ihr den Vorgabe-Rand des Browsers, und die Abstandsregel eine
   Zeile weiter oben nennt nur p, ul, ol und table. Etwas grosszuegiger als der
   Fliesstext-Abstand — das Bild schliesst den Kopfbereich des Beitrags ab. */
.beitrag__bild {
  margin-top: 1.5rem;
}

.beitrag__bild img {
  border-radius: var(--radius);
}

/* Alle Textlinks der beiden Bereiche in einer Regel — sie stehen alle auf dem
   hellen Seitengrund und teilen dieselbe Begruendung.
   --primaer kommt dort auf 4,43:1 und verfehlt WCAG AA fuer Normaltext (4,5:1);
   --primaer-dunkel haelt 9,28:1, auf der 20-%-Blauflaeche der CTA-Box noch 7,13:1.
   Gleiche Korrektur wie in Phase 4 beim Budget-Hinweis des Versicherungsfinders
   und beim Namen auf der Terminseite.
   Das :not(.knopf) ist kein Beiwerk: .beitrag a (0,2,0) schlaegt .knopf (0,1,0) und
   haette den gefuellten CTA-Knopf in der Box blau auf blau gefaerbt. */
.brotkrumen a,
.autorenzeile a,
.quellen a,
.beitrag a:not(.knopf) {
  color: var(--primaer-dunkel);
}

/* CTA-Box. Genau zwei je Seite (V14): eine nach dem Versicherungsabschnitt, eine am
   Seitenende. Kein Popup, kein Overlay — das ist der einzige CTA-Fehler mit
   belegtem Ranking-Effekt. */
.cta-box {
  background: var(--flaeche-blau);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-top: 2rem;
}

/* Die Ueberschrift ist das erste Kind der Box. Ohne die erste Zeile erbt sie
   .beitrag h3 { margin-top: 1.75rem } und stuende mit einem Loch von fast zwei
   Zeilen unter dem eigenen Innenabstand.
   Zentriert steht auf schmalen Geraeten nur noch sie (Ticket d14bd1fa, ab 768px
   unten zurueckgesetzt): Die Box ist ein Handlungsaufruf mitten im Fliesstext und
   soll sich von ihm absetzen, das leistet die Ueberschrift zusammen mit der
   Knopfreihe darunter. Die beiden Absaetze DAZWISCHEN sind Lesetext und bleiben
   linksbuendig — die Box steht in <article class="beitrag">, und die
   Beitragsfliesstexte sind eine namentliche Bestandsausnahme des Tickets. Der
   zweite Absatz ist ausserdem der Provisionsoffenlegungssatz und steht auf 51
   Beitragsseiten je zweimal; zentrierter Flattersatz ueber drei bis fuenf Zeilen
   ist ausgerechnet dort die schlechteste Darstellung. */
.cta-box h3 {
  margin-top: 0;
  text-align: center;
}

/* Die Knopfreihe ist ein Flexcontainer — text-align der Box greift hier nicht,
   die Ausrichtung macht justify-content (dasselbe Muster wie .hero__aktionen in
   seite-startseite.css). */
.cta-box__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
  justify-content: center;
}

/* Abgrenzungshinweis am Ende jedes Gesundheitsabschnitts (V15). Abgesetzt, aber
   ohne Warnfarbe: Er ordnet ein, er warnt nicht. */
.hinweis {
  border-left: 4px solid var(--primaer);
  padding: 0.75rem 1rem;
  margin-top: 2rem;
  font-size: 0.95rem;
  color: var(--text-gedaempft-stark);
}

/* Quellenblock am Beitragsende (V15): ein bis drei Primaerquellen mit Abrufdatum. */
.quellen {
  margin-top: 2.5rem;
  font-size: 0.9rem;
  color: var(--text-gedaempft-stark);
}

/* Wie bei der CTA-Box: Der Block bringt seinen Abstand schon mit, das erbte
   .beitrag h2 { margin-top: 2.5rem } addierte sich sonst darauf. */
.quellen h2 {
  margin-top: 0;
}

.quellen ul {
  padding-left: 1.25rem;
}

/* Quellenangaben fuehren die URL teils als reinen Text mit (statt als Link mit
   kurzem Ankertext). Eine solche URL ist ein einziges, unumbrechbares Wort und
   schob den Quellenblock auf 360px um bis zu 123px ueber den Rand — belegt von
   layout-pruefung.mjs auf /hunderassen/labrador-retriever/. "anywhere" statt
   "break-word", weil nur ersteres auch in die Mindestbreite des Elements
   eingeht: Der Umbruch muss schon bei der Breitenberechnung gelten, nicht erst
   beim Fuellen der Zeile. */
.quellen li {
  overflow-wrap: anywhere;
}

/* 9. Ab Tablet ------------------------------------------------------------ */

@media (min-width: 768px) {
  .sektion {
    padding-block: 4rem;
  }

  /* Ruecknahme der beiden Zentrierungen von oben. Sie gelten ausschliesslich auf
     schmalen Geraeten; ab hier steht neben jeder Kachel eine zweite und der
     Beitrag hat seine volle Lesebreite. Zugleich die Zusicherung, dass Ticket
     d14bd1fa Tablet, Laptop und Desktop nicht anfasst — belegt ueber den
     Byte-Vergleich der Referenzbilder.
     Seiteneigene Zentrierungen schlagen diese Regel bewusst: .vorteil in
     seite-ueber-uns.css und .weg, .produkt, .schritt, .stimme in
     seite-startseite.css haben 0,1,0 und bleiben deshalb auf jeder Breite
     zentriert — so, wie sie es vor diesem Ticket auch waren. :where() haelt die
     Ruecknahme dafuer auf 0,0,0: Sie greift nur dort, wo KEINE seiteneigene
     Ausrichtung steht, und kann keine schlagen. Vorher hing genau das an der
     Reihenfolge der <link>-Zeilen in layout.html.
     .liste .karte (0,2,0) schlaegt diese Regel ebenfalls — gewollt, die Hub-Karten
     stehen dann auf jeder Breite links, was hier ohnehin das Ergebnis waere. */
  :where(.karte) {
    text-align: left;
  }

  .cta-box h3 {
    text-align: left;
  }

  .cta-box__aktionen {
    justify-content: flex-start;
  }

  /* Zwei Spalten ab Tablet. minmax(0, 1fr) aus demselben Grund wie beim
     Kartenraster darunter: Ein langes Wort schoebe die Spalte sonst ueber ihren
     Anteil hinaus. */
  .liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* minmax(0, 1fr) statt 1fr: Ein blosses `1fr` hat als Mindestbreite den
     laengsten unteilbaren Inhalt der Spalte. Ein langes Wort schiebt die Spalte
     damit ueber ihren Anteil hinaus und das ganze Raster ueber den Viewport —
     bei 768px messbar passiert. Die Null als Minimum bindet die Spalte an ihren
     Anteil; die Trennung im Wort erledigt `hyphens` auf .karte. */
  .karten--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .karten--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Vier Karten nebeneinander werden erst auf grossen Schirmen lesbar —
     dazwischen stehen sie zu zweit. */
  .karten--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nur-mobil {
    display: none;
  }
}

@media (min-width: 1024px) {
  .karten--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}