/* ------------------------------------------------------------------
   Möbel Schmitz – Overrides zu main.combined.css

   Die SCSS-Quelle unter assets/src/scss wird auf dem Server nicht mehr
   kompiliert (letzter Build: 28.05.2023). Korrekturen gehören deshalb
   hierher und nicht in die SCSS-Quelle – sonst bleiben sie wirkungslos.
   Diese Datei wird in system/enqueue-assets.php nach mainCSS geladen.
   ------------------------------------------------------------------ */

/* Startseite: Hero-Headline "Möbelhaus in Trier für" ist mehrzeilig.

   Im Theme ist .text-span (das Schreibschrift-Wort) absolut positioniert
   mit right:-10% und ohne top-Wert. Sie übernimmt damit ihre statische
   Position – also die letzte Zeile der Überschrift. Das ist für einzeilige
   Headlines gedacht ("Über" + "uns"). Bei einer zweizeiligen Headline
   landet das Wort auf Zeile 2 und überlappt den Text; zusätzlich schiebt
   right:-10% das lange Wort "Designmöbel" über den Containerrand hinaus,
   wo es abgeschnitten wird.

   Auf Seiten mit mehrzeiliger Headline fließt das Wort deshalb als eigener
   Block unter der Überschrift, ohne negativen Versatz. Hero-Seiten mit
   kurzer, einzeiliger Headline (Über uns, Markenwelten, Kontakt …) bleiben
   unverändert – dort funktioniert der Überlappungs-Effekt wie gedacht.

   Betroffen: Startseite (48), Lebensräume (52). */
body.home .hero .primary__title .text-span,
body.page-id-52 .hero .primary__title .text-span {
  position: static;
  display: block;
  right: auto;
  top: auto;
  margin-top: 0.6rem;
  line-height: 1.1;
}


/* Lebensräume: Das Hero-Bild (Heaven_Polo) ist deutlich heller als die
   übrigen Hero-Motive. Der Theme-Gradient ist auf dunkle Fotos ausgelegt
   (in der Textzone nur rgba(0,0,0,.12)), dadurch steht der weiße Fließtext
   fast ohne Kontrast auf Fenster und Teppich.
   Die ursprüngliche Section hatte dafür einen schwarzen Overlay - der wird
   hier als etwas kräftigerer Verlauf wiederhergestellt.
   Zum Nachjustieren: die Alpha-Werte (0.45 / 0.28) erhöhen = dunkler. */
body.page-id-52 .hero .hero__gradient {
  background-image: linear-gradient(135deg, #000, rgba(0, 0, 0, 0.45) 56%, rgba(0, 0, 0, 0.28));
}

@media (max-width: 480px) {
  body.page-id-52 .hero .hero__gradient {
    background: linear-gradient(132deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.62) 50%, rgba(0, 0, 0, 0.5) 75%, rgba(0, 0, 0, 0.38) 100%);
  }
}


/* Handy: Headline zentrieren, passend zu Fließtext und CTA.

   Das Theme zentriert im Hero auf dem Handy den Fließtext und den CTA
   (.hero__desc { text-align:center }), die Überschrift erbt aber
   text-align:start. Bei kurzen Headlines faellt das nicht auf, weil der
   h1-Kasten dann nur so breit wie sein Inhalt ist und mittig sitzt
   (siehe "Über uns"). Bei den langen Headlines hier bricht der Text um,
   der Kasten wird volle Breite - und die Zeilen stehen links.

   text-align:center stellt damit den vom Theme gedachten Zustand her.
   Breakpoint 480px = der Mobile-Breakpoint des Themes. */
@media (max-width: 480px) {
  body.home .hero .primary__title,
  body.page-id-52 .hero .primary__title {
    text-align: center;
  }
}


/* Handy: etwas Luft um den Titelblock - oben zum Logo/Burger, unten zum
   Fließtext. Der Hero-Container ist mobil flex-column mit space-between;
   Margins am .hero__title verschieben die Verteilung entsprechend.
   Theme-Basis: margin-bottom 3rem (1rem = 10px). */
@media (max-width: 480px) {
  body.home .hero .hero__title,
  body.page-id-52 .hero .hero__title {
    margin-top: 3rem;
    margin-bottom: 5rem;
  }
}