/* custom.css — projektspezifische UI-Korrekturen ueber Agopa.
   style.css/responsive.css bleiben 1:1; hier nur gezielte Overrides fuer motorrad-hero. */

/* 1) Preloader-Flash (lila Agopa-Ladeanimation) sicher aus */
.preloader { display: none !important; }

/* 2) Seiten-/Blog-Header (page-title): Agopa nutzt 340px/200px Padding (fuer fixed-Header +
   Hero-Hintergrund) -> hier viel zu hoch. Auf sinnvolle Hoehe, die den Header freihaelt. */
.page-title { padding: 200px 0 55px 0 !important; }
@media (max-width: 991px) { .page-title { padding: 140px 0 40px 0 !important; } }

/* 3) Blog-Uebersicht: Karten-Abstaende an die Rasterlogik anpassen.
   - vertikaler Abstand zwischen den Kartenreihen
   - gleiche Kartenhoehe pro Reihe (buendige Unterkanten)
   - weniger Kopf-Padding (Agopa-72px stammen vom ueberlappenden Avatar, der hier unten sitzt) */
.news-section .news-block { margin-bottom: 30px; }
.news-section .news-block-two { height: 100%; }
.news-section .news-block-two .lower-content { padding-top: 32px; padding-bottom: 34px; }

/* 4) Blog-Kategorie-Abschnitte auf /blog/ */
.blog-cat-section { margin-bottom: 46px; scroll-margin-top: 120px; }   /* Anker landet unter dem Header */
.blog-cat-title {
  color: #132b34; font-weight: 700; font-size: 1.7rem;
  margin: 0 0 26px; padding-bottom: .4em; position: relative;
  border-bottom: 2px solid #ece7e3;
}
.blog-cat-title::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 70px; height: 2px; background: #db6d36;
}
.blog-cat-count {
  display: inline-block; margin-left: .5em; padding: 1px 10px; border-radius: 20px;
  background: #f4f1f0; color: #8a868f; font-size: .95rem; font-weight: 600; vertical-align: middle;
}

/* 5) Marken-Raster (feature-block-one): lange Einzelwoerter wie "Markenunabhaengig"
   sind breiter als die Karte und werden von overflow:hidden am Rand abgeschnitten.
   Umbruch + Silbentrennung (lang=de) erlauben -> lange Namen brechen in der Karte um,
   kurze Namen bleiben unveraendert einzeilig. */
.feature-block-one h3,
.feature-block-one h3 a {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* 6) Startseite: "Neueste Beitraege" (news-section.centred) sitzt zu dicht auf der
   blauen Welle der CTA-Section darunter -> etwas Luft schaffen. Nur Home (.centred),
   Blog-Uebersicht (.news-section ohne .centred) bleibt unberuehrt. */
.news-section.centred { padding-bottom: 80px; }
@media (max-width: 767px) { .news-section.centred { padding-bottom: 50px; } }

/* 7) CTA-Section: Agopa-Seegras (cta-1.png/cta-2.png in :before/:after) durch
   passende, farb-/stilgleiche Motorrad-Touren-Deko ersetzen (Berge, Nadelbaeume,
   kurvige Strasse; Flat-Vektor, transparent, Website-Palette). Motiv links,
   rechts gespiegelt. style.css bleibt 1:1, nur hier ueberschrieben. */
.cta-section:before,
.cta-section:after {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom center;
  width: 320px;
  height: 288px;
  bottom: 55px;          /* etwas hoeher auf der Welle (Agopa-Seegras sass ~bottom:100-200px) */
  opacity: 0.75;         /* leicht transparent */
  z-index: 1;
}
.cta-section:before { left: -40px;  background-image: url(../images/custom/deco-cta.svg); }       /* leicht in den linken Rand */
.cta-section:after  { right: -40px; background-image: url(../images/custom/deco-cta-right.svg); } /* leicht in den rechten Rand */
@media (max-width: 767px) {
  .cta-section:before,
  .cta-section:after { width: 180px; height: 162px; bottom: 30px; }
  .cta-section:before { left: -25px; }
  .cta-section:after  { right: -25px; }
}

/* 8) Unterseiten (Blog-Uebersicht + Marken-Seiten, page.njk): Inhalt (.news-section)
   folgt direkt auf den Seiten-Header -> 1. Ueberschrift klebt an der Kopfleiste.
   Abstand oben schaffen. Startseite (.news-section.centred) ausgenommen. */
.news-section:not(.centred) { padding-top: 65px; }
@media (max-width: 767px) { .news-section:not(.centred) { padding-top: 40px; } }

/* 9) Text-Seiten (ueber/impressum/datenschutz, .content-style-one unter page.njk):
   Agopa vergibt oberes Padding nur in Blog-Varianten -> hier klebt der Inhalt an der
   Kopfleiste. Abstand nach oben schaffen. */
.content-style-one { padding-top: 70px; }
@media (max-width: 767px) { .content-style-one { padding-top: 45px; } }

/* 10) Unterseiten-Header (style-seven, page.njk/article.njk): Agopa gibt dort dem Menue
   mehr oberes Padding (52px) und der Logo-Box weniger (20px) als auf der Startseite ->
   Logo sitzt ~20px hoeher als die Menueleiste. Proportionen an die Startseite angleichen
   (Logo-Box 28px, Nav-Links 40/40), damit Logo und Menue auf einer Hoehe sitzen. */
.main-header.style-seven .header-upper .logo-box { padding-top: 28px; padding-bottom: 28px; }
.main-header.style-seven .header-upper .main-menu .navigation > li > a { padding-top: 40px; padding-bottom: 40px; }

/* 11) Startseite Marken-Sektion (features-section .sec-title): Untertitel klebt mit 0px
   direkt auf den Marken-Kacheln -> etwas Luft nach unten schaffen. */
.features-section .sec-title { margin-bottom: 40px; }

/* 12) Artikel-Header (blog-single): Header-upper liegt transparent ueber dem Hero-Bild
   (je nach Artikelbild mal hell). Weisse Nav + Logo gehen dann unter. Leiste oben als
   gleichmaessig halbtransparenter dunkler Balken fuellen -> Logo und Menue bleiben
   ueberall lesbar. Nur Artikelseiten. */
.main-header.blog-single .header-upper {
  background: rgba(0,0,0,0.45);
}

/* 13) Artikel-Header: Agopa gibt der Leiste 56px oberes Padding (0 unten) -> Balken zu
   hoch, Logo/Menue in die untere Haelfte gedrueckt. Padding symmetrisch + kleiner ->
   Leiste niedriger, Items vertikal mittig. Logo-Box auf Menuehoehe (34/34 -> 110px),
   damit auch das Logo mittig statt nur oben-buendig sitzt. Nur Artikelseiten. */
.main-header.blog-single .header-upper { padding-top: 16px; padding-bottom: 16px; }
.main-header.blog-single .header-upper .logo-box { padding-top: 34px; padding-bottom: 34px; }