/* =========================================================
   RATGEBER und GLOSSAR

   Drei Seitentypen:
     .blog        Übersicht   (Figma-Rahmen 2:34837)
     .art         Artikel     (Figma-Rahmen 2:47999)
     .glo         Glossar     (Figma-Rahmen 2:80443)

   Runde 24 – zwei Grundentscheide, die hinter fast allen Regeln stehen:

   1. KEIN BAUSTEIN HÄNGT MEHR AN EINER GEMESSENEN ZEILENZAHL.
      In v38 stand die Einleitung der Übersicht auf einer festen
      Figma-Koordinate unter dem Titel. Der Titel braucht mit der echten
      Schrift (Bodoni Moda aus dem Netz) eine Zeile mehr als mit der
      Ersatzschrift, mit der hier gemessen wurde – er lief dadurch in den
      Text hinein. Titel und Einleitung stehen jetzt in einem Raster
      untereinander; die Einleitung rutscht mit, egal wie hoch der Titel
      ausfällt. Aus demselben Grund haben die Karten eine feste Höhe und
      begrenzte Zeilenzahl: die Liste behält ihren Takt, unabhängig davon,
      wie lang ein Titel ist.

   2. KEIN ÜBERFAHR-EFFEKT AUF DEN KARTEN.
      Der Entwurf zeigt eine Hover-Variante, bei der das Foto wächst und
      rechts eine navyblaue Fläche aufgeht. Auf Wunsch des Auftraggebers
      ist sie entfernt; es bleibt der Pfeil-Link "Artikel lesen" mit dem
      Überfahr-Verhalten aller anderen Pfeil-Links (Pfeil wandert 7 px).
   ========================================================= */

/* ---------------------------------------------------------
   ÜBERSICHT – Kopfbereich
   Figma: Fläche #FAFAFA, senkrechte Linie x85, waagrechte Linie y613,
   blasse Ziffer bei 0/424, Titel 144/233/610, Einleitung 377/546/377.
   Das Newsletter-Feld entfällt auf Wunsch des Auftraggebers.
   --------------------------------------------------------- */
.blog-head-band { background: var(--color-gray-100); }

@media (min-width: 1276px) {
  /* Raster statt fester Koordinaten:
       Spalte 1 = linker Rand 144
       Spalte 2 = 233 (Titel beginnt hier und läuft über Spalte 3)
       Spalte 3 = 377 (Einleitung)
       Spalte 4 = Rest
     Titel 144..754, Einleitung 377..754 – dieselben Kanten wie im Entwurf,
     nur eben untereinander statt auf zwei festen y-Werten. */
  .sub-canvas.blog-head {
    display: grid;
    grid-template-columns: 144px 233px 377px 1fr;
    align-content: start;
    height: auto;
    padding: 233px 0;
    box-sizing: content-box;
  }
  .blog-head > .sub-h1 {
    position: static;
    grid-column: 2 / 4; grid-row: 1;
    width: auto;
  }
  .blog-head > .sub-text {
    position: static;
    grid-column: 3; grid-row: 2;
    width: auto;
    /* Figma: Titelkasten endet 527, Einleitung beginnt 546 */
    margin-top: 19px;
  }
  /* Ziffer und Linien bleiben Dekoration auf ihren Vorlagenkoordinaten. */
  .blog-head > .sub-numeral,
  .blog-head > .sub-line { position: absolute; }
}

/* ---------------------------------------------------------
   ÜBERSICHT – Kartenliste
   Figma je Karte: Foto 610 breit, Textfläche 830 breit, Innenabstand
   144 oben/unten und 89 links, Textspalte 610 breit, Abstände 34.
   Reihe 1 Foto links auf Weiss, Reihe 2 Foto rechts auf Creme,
   danach abwechselnd.
   --------------------------------------------------------- */
.blog-list { position: relative; }
.blog-card {
  display: flex;
  align-items: stretch;
  width: 100%;
  /* Feste Höhe: so bleibt der Takt der Liste gleich, egal wie lang ein
     Titel ausfällt. 562 px ist die Kartenhöhe der Vorlage (Reihe 1). */
  height: 562px;
  color: inherit;
  text-decoration: none;
  background: var(--color-white);
  overflow: hidden;
}
.blog-card-b { flex-direction: row-reverse; background: var(--color-cream); }

.blog-card-photo { position: relative; width: 42.3611%; flex: 0 0 auto; overflow: hidden; }
.blog-card-panel { position: relative; width: 57.6389%; flex: 0 0 auto; overflow: hidden; }
.blog-card-photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* Cremefarbener Filter wie über den Fotos auf /services – er bindet die
   Artikelbilder farblich an den Rest der Website. Bewusst schwächer als
   dort (20/8 statt 34/13), weil diese Fotos grossflächig gezeigt werden. */
.blog-card-photo::after,
.art-figure .art-figure-bild::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(208, 176, 132, 0.20), rgba(208, 176, 132, 0.08));
  pointer-events: none;
}

.blog-card-panel-inner {
  display: flex; flex-direction: column; justify-content: center;
  height: 100%;
  padding: 0 131px 0 89px;
  width: 830px; max-width: 100%;
  box-sizing: border-box;
}
.blog-card-b .blog-card-panel-inner { margin-left: auto; }
.blog-card-title {
  margin: 0;
  width: 610px; max-width: 100%;
  font-size: 34px; line-height: 37.4px; letter-spacing: -0.04em;
  color: var(--color-navy);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.blog-card-lead {
  margin: 34px 0 0;
  width: 610px; max-width: 100%;
  font-weight: 300; font-size: 15px; line-height: 30px;
  color: var(--color-black);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
.blog-card-foot {
  display: flex; align-items: center;
  margin-top: 34px;
  width: 610px; max-width: 100%;
}
.blog-card-foot .arrow-icon { color: var(--color-navy); }
.blog-card-read { font-size: 18px; line-height: 18px; color: var(--color-navy); }
/* Datum, Bildlegenden und die Hinweise unter den Artikeln stehen in
   Advent Pro Medium (Wunsch Runde 24) – dieselbe Schrift wie die
   Kleinschrift der Kopfzeile. */
.blog-card-date,
.art-figure figcaption,
.art-nav-label {
  font-family: var(--font-label);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.blog-card-date {
  margin-left: auto;
  font-size: 15px; line-height: 16.5px;
  color: var(--color-gold);
}

/* ---------------------------------------------------------
   ARTIKEL
   Figma-Takt: 233 oben, Titel 610 zentriert, 34, Lead 610 zentriert,
   89, Bild 1152x610, 13, Bildlegende, 55, Text 1152, 89 vor <h2>,
   34 danach, 144 vor den Teilen-Symbolen, 377 bis zum Fuss.
   --------------------------------------------------------- */
.art { background: var(--color-white); }
.art-stage {
  width: 1440px; max-width: 100%;
  margin: 0 auto;
  padding: 233px 144px 377px;
  box-sizing: border-box;
}
.art-title {
  width: 610px; max-width: 100%;
  margin: 0 auto;
  font-size: 55px; line-height: 60.5px; letter-spacing: -0.04em;
  text-align: center; color: var(--color-navy);
}
.art-lead {
  width: 610px; max-width: 100%;
  margin: 34px auto 0;
  font-weight: 500; font-size: 15px; line-height: 30px;
  letter-spacing: 0.055em; text-align: center; color: var(--color-gold);
}
.art-figure { margin: 89px 0 0; }
.art-figure .art-figure-bild { position: relative; display: block; }
.art-figure img {
  display: block; width: 100%; height: 610px;
  object-fit: cover; object-position: center;
}
.art-figure figcaption {
  margin-top: 13px;
  font-size: 13px; line-height: 16px;
  color: var(--color-gray-400);
}
.art-body { margin-top: 55px; }
.art-body p,
.art-body ul,
.art-body ol {
  margin: 0 0 30px;
  font-weight: 300; font-size: 15px; line-height: 30px;
  color: var(--color-black);
}
.art-body ul, .art-body ol { padding-left: 21px; }
.art-body li { margin: 0; }
.art-body > *:last-child { margin-bottom: 0; }
.art-body h2 {
  margin: 89px 0 34px;
  font-size: 34px; line-height: 37.4px; letter-spacing: -0.04em;
  color: var(--color-navy);
}
.art-body h3 {
  margin: 55px 0 21px;
  font-size: 21px; line-height: 27px; letter-spacing: -0.04em;
  color: var(--color-navy);
}
.art-body h2:first-child, .art-body h3:first-child { margin-top: 0; }
.art-body table {
  width: 100%; margin: 0 0 30px;
  border-collapse: collapse;
  font-weight: 300; font-size: 15px; line-height: 30px;
  color: var(--color-black);
}
.art-body th, .art-body td {
  padding: 8px 21px 8px 0; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--color-gray-200);
}
.art-body th { font-weight: 500; color: var(--color-navy); }
.art-body a { color: var(--color-navy); }

/* Teilen-Symbole, 34x34, Abstand 34, zentriert */
.art-share {
  display: flex; justify-content: center; gap: 34px;
  margin-top: 144px;
}
.art-share a { display: block; width: 34px; height: 34px; color: var(--color-gold); }
.art-share img, .art-share svg { display: block; width: 34px; height: 34px; }

/* Voriger / nächster Artikel: zwei Bilder 720x377 mit Gold-Verlauf,
   Text rechtsbündig 89 px vom äusseren Rand, Block senkrecht zentriert. */
.art-nav { display: flex; width: 100%; }
.art-nav-item {
  position: relative; display: block;
  width: 50%; height: 377px;
  overflow: hidden; text-decoration: none;
}
.art-nav-item img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Runde 28: Der navyblaue Schleier aus Runde 27 ist wieder weg - gewuenscht
   war ein Schlagschatten an der Schrift selbst (siehe --schrift-schatten in
   base.css). Geblieben ist der cremefarbene Filter, jetzt aber durchgehend
   34 % statt von 34 auf 13 % auslaufend: so liegt ueber dem ganzen Bild
   dieselbe Daempfung, nicht nur ueber der linken Haelfte. */
.art-nav-item::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(208, 176, 132, 0.34);
}
.art-nav-text {
  position: absolute; left: 89px; right: 89px; top: 50%;
  transform: translateY(-50%);
  text-align: right; color: var(--color-white);
  /* Runde 27: Der Schleier ueber dem Foto ist ein ::after und liegt damit im
     Quelltext NACH dem Text - ohne diese Zeile lag er also auch ueber der
     Schrift und hat sie mitgedaempft. Das war schon beim cremefarbenen Filter
     so und ein Teil des Grundes, warum die Titel so blass wirkten. */
  z-index: 1;
}
.art-nav-title {
  display: block; margin: 0;
  font-family: var(--font-headline);
  font-size: 34px; line-height: 37.4px; letter-spacing: -0.04em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  text-shadow: var(--schrift-schatten);
}
.art-nav-label {
  /* "inline-block" statt "block": der Unterstrich des Hovers soll nur unter
     dem Text liegen, nicht ueber die ganze Kachelbreite. Im rechtsbuendigen
     Kasten sitzt der Kasten damit ebenfalls rechts. */
  display: inline-block; margin-top: 8px;
  position: relative; padding-bottom: 2px;
  font-size: 15px; line-height: 16.5px;
  text-shadow: var(--schrift-schatten);
}
/* Runde 28: derselbe Hover wie bei den Dienstleistungs-Links der Startseite -
   ein Strich, der sich von links auffuellt (.link-underline in effects.css).
   Ausgeloest wird er hier von der ganzen Kachel, nicht vom Text selbst. */
.art-nav-label::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.art-nav-item:hover .art-nav-label::after,
.art-nav-item:focus-visible .art-nav-label::after { transform: scaleX(1); }

/* ---------------------------------------------------------
   GLOSSAR
   Figma: Goldband 0..640, Titel 233 zentriert, Untertitel 316,
   Suchfeld 299/424/843x55 mit navyblauer Schaltfläche 909/424/233x55.
   Danach Weissfläche: A-Z-Leiste auf 729, je Buchstabe die Grossletter
   auf y, Linie auf y+74, Begriffe ab y+95 in drei Spalten (144/521/898),
   Zeilenabstand 39, danach 144 bis zum nächsten Buchstaben.
   --------------------------------------------------------- */
.glo { background: var(--color-white); }
.glo-head {
  background: var(--color-gold);
  /* 233 oben, unten so viel, dass das Band exakt 640 px hoch ist
     (Suchfeld endet auf 479). */
  padding: 233px 144px 163px;
  text-align: center;
}
.glo-head h1 {
  width: 987px; max-width: 100%;
  margin: 0 auto;
  font-size: 55px; line-height: 60.5px; letter-spacing: -0.04em;
  color: var(--color-white);
}
.glo-head-lead {
  width: 987px; max-width: 100%;
  margin: 23px auto 0;            /* Figma: Titel 233..293.5, Untertitel 316 */
  font-weight: 300; font-size: 15px; line-height: 16.5px;
  color: var(--color-white);
}
.glo-search {
  display: flex; align-items: stretch;
  width: 843px; max-width: 100%;
  margin: 89px auto 0;            /* 424 - 335 = 89 */
  background: var(--color-white);
  border-radius: 5px; overflow: hidden;
}
.glo-search input {
  flex: 1 1 auto; min-width: 0;
  height: 55px; padding: 0 21px;
  border: 0; background: transparent;
  font-family: inherit; font-weight: 500; font-size: 13px; line-height: 21px;
  color: var(--color-black);
}
.glo-search input::placeholder { color: var(--color-gray-400); opacity: 1; }
.glo-search input:focus { outline: 2px solid var(--color-navy); outline-offset: -2px; }
.glo-search button {
  flex: 0 0 233px;
  height: 55px; border: 0; border-radius: 5px;
  background: var(--color-navy); color: var(--color-white);
  font-family: inherit; font-size: 18px; line-height: 18px;
  cursor: pointer;
}
.glo-search button:hover { background: #26405f; }

.glo-body { padding: 89px 144px 377px; }   /* 729 - 640 = 89 */
.glo-index {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 13px 13px;
  margin: 0 0 233px;                        /* Figma: Leiste 729..747, Buchstabe A 980 */
}
.glo-index a {
  display: block; min-width: 17px;
  font-weight: 700; font-size: 21px; line-height: 18px;
  text-align: center; color: var(--color-gold); text-decoration: none;
}
.glo-index a:hover { text-decoration: underline; }
.glo-index a.is-leer { opacity: 0.35; pointer-events: none; }

/* padding:0 hebt die globale Regel "section { padding: 90px 0 }" aus
   site.css auf - ohne sie stünde jeder Buchstabe 90 px zu tief.
   144 px: Figma misst von der Unterkante des letzten Begriffs (1093) bis
   zum nächsten Buchstaben (1238). */
.glo-group { padding: 0; scroll-margin-top: 110px; }
.glo-group + .glo-group { margin-top: 144px; }
.glo-group h2 {
  margin: 0;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--color-gray-200);
  font-family: var(--font-body);
  font-weight: 700; font-size: 55px; line-height: 60.5px;
  color: var(--color-gold);
}
.glo-group ul {
  display: grid;
  /* Figma: Spalten auf x144 / x521 / x898, also 377 breit ohne Abstand;
     Zeilenabstand 39 = Zeilenkasten 18 + 21. */
  grid-template-columns: repeat(3, 377px);
  column-gap: 0; row-gap: 21px;
  margin: 21px 0 0; padding: 0;
  list-style: none;
}
.glo-group li { margin: 0; }
.glo-group a {
  font-size: 15px; line-height: 16.5px;
  color: var(--color-black); text-decoration: none;
}
.glo-group a:hover { text-decoration: underline; text-decoration-color: var(--color-gold); }
.glo-treffer {
  margin: 0 0 34px;
  font-weight: 300; font-size: 15px; line-height: 30px;
  color: var(--color-gray-600);
}
.glo-treffer[hidden] { display: none; }

/* ---------------------------------------------------------
   Startseite: Abschnitt "Tipps und Tricks für die Reinigung"

   Aufbau wie auf /ratgeber: Titel, Lauftext, zwei Artikelkarten im
   selben Kartendesign, darunter der Pfeil-Link. Es sind dieselben
   Bausteine wie auf der Übersicht (.blog-card), damit beide Seiten sich
   nicht auseinanderentwickeln können.

   Der Abschnitt steht im Fluss zwischen Bühne und FAQ (siehe Kommentar
   im Quelltext der Startseite) - er braucht deshalb keine feste Höhe.
   --------------------------------------------------------- */
.home-ratgeber {
  position: relative;
  /* Runde 25: KEIN eigener Hintergrund. Vorher stand hier weiss - dadurch
     verschwanden der hellgraue Seitenhintergrund und die senkrechte
     Rasterlinie, die von der Buehne darueber bis zum Fussband durchlaeuft.
     Die Karten bringen ihre eigene Flaeche mit (weiss bzw. creme), der
     Bereich selbst bleibt durchsichtig.
     0 unten hebt die globale Regel "section { padding: 90px 0 }" aus
     site.css auf - sonst stuenden hier 90 px zu viel. */
  padding: 233px 0 0;
  z-index: 3;
}
/* Blasse Ziffer und waagrechte Rasterlinie des Bereichs (Wunsch Runde 25).
   Die Ziffer ist dieselbe Datei wie auf /ratgeber; sie ist am linken Rand
   angeschnitten wie die Ziffern 01 und 02 der Buehne darueber. Die Linie
   wird in effects.js auf die Mitte ihrer sichtbaren Tinte gelegt - hier
   steht nur ein Startwert, damit sie vor dem ersten Messen nicht springt. */
/* 300 statt 233: so steht die Ziffer unter der zweiten Titelzeile statt
   mitten in der ersten, und ihre Mitte - und damit die Linie - liegt in
   der Luft zwischen Lauftext und erster Karte. */
/* Runde 26: Die Ziffer liegt HINTER allem - hinter dem Titel und hinter den
   Karten. Vorher stand sie mit z-index 1 ueber dem Kopfbereich (sie hat
   "Reinigung" angeschnitten) und auf schmalen Bildschirmen mitten im Foto des
   zweiten Artikels. Die Karten bekommen dafuer eine eigene Ebene. */
/* 319 = Oberkante der Kartenliste (696) minus Zeichenhoehe (377): die
   Ziffer endet damit genau dort, wo die erste Karte beginnt, und reicht
   oben nur noch in die Unterlaengen der Titelzeile hinein. Im Fluss
   rechnet effects.js dasselbe aus (data-num-above im Quelltext). */
.home-ratgeber .home-numeral-04 { top: 319px; z-index: 0; }
.home-ratgeber-kopf,
.home-ratgeber-liste,
.home-ratgeber-fuss { position: relative; z-index: 1; }
.home-ratgeber .home-line-h { top: 489px; }
.home-ratgeber-kopf,
.home-ratgeber-fuss {
  width: 1440px; max-width: 100%;
  margin: 0 auto;
}
.home-ratgeber-kopf {
  display: grid;
  grid-template-columns: 144px 233px 377px 1fr;
  align-content: start;
}
.home-ratgeber-kopf h2 {
  grid-column: 2 / 4; grid-row: 1;
  margin: 0;
  font-size: 55px; line-height: 60.5px; letter-spacing: -0.04em;
  color: var(--color-navy);
}
.home-ratgeber-kopf p {
  grid-column: 3; grid-row: 2;
  margin: 19px 0 0;
  font-weight: 300; font-size: 15px; line-height: 30px;
  color: var(--color-black);
}
/* 233 statt 89: die blasse Ziffer ist 377 px hoch und reicht von 233 bis
   610 hinunter. Mit den alten 89 px haette die erste Karte sie bei 552
   angeschnitten. Jetzt beginnt die Liste bei 696 - die Ziffer steht frei,
   und der Abstand ist einer aus der Reihe (233). */
.home-ratgeber-liste { margin-top: 233px; }
.home-ratgeber-fuss { padding-top: 34px; }
.home-ratgeber-fuss .home-more {
  position: static;
  margin-left: 144px;
  /* Runde 25: navyblau wie alle vergleichbaren Knoepfe. Ohne diese Zeile
     erbt der Knopf die schwarze Schriftfarbe des Bereichs. */
  color: var(--color-navy);
}

/* Der FAQ-Titel steht seit Runde 24 im Fluss (vorher auf der Bühne),
   damit der Ratgeber-Abschnitt davor wachsen kann. Abstände wie zuvor:
   233 über dem Titel, 35 bis zur ersten Frage. */
/* Runde 37, Punkt 1.2: Zwischen "alle Artikel lesen" und "Fragen und
   Antworten" lagen nur 222 px. 388 px Innenabstand ergeben die
   gewuenschten 377 Weissraum (Tinte zu Tinte, wie beim Abstand ueber
   "Tipps und Tricks"). Im Fluss setzt responsive.css hier var(--sp-area)
   = 233 - dort ist das das Hausmass und bleibt so. */
.home-tail { padding-top: 376px; }
.home-faq-titel {
  position: static !important;
  width: 987px; max-width: 100%;
  margin: 0 144px 35px;
  font-size: 55px; line-height: 60.5px; letter-spacing: -0.04em;
  color: var(--color-navy);
}