/* ==============================================
   Startseite (.cms-home .om-home)
   Hero (Split), Trust-Leiste, Kategorie-Chips,
   Neuheiten-Carousel, Saison-Panel, SEO-Details.
   Markup-Quelle: try_migration_m2/fix-m1-branding/
   apply-homepage.php (Seed Phase 7d8).
   ============================================== */
/* Porto rendert die CMS-Home OHNE aeusseren .container (die Theme-Demos
   wrappen ihre Sektionen selbst) -> das Markup traegt deshalb selbst
   class="om-home container" und erbt Portos gestufte Container-Breiten
   (1200 @1400 / 1420 @1920 / 20px-Raender mobil) samt Header-/Footer-Flucht.
   KEINE eigenen max-width-/padding-inline-Nachbauten hier (waren @1920
   120px schmaler als der Rest der Seite -> wirkte eingerueckt). */
.cms-home .om-home {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 6vw, 72px);
    padding-block: clamp(16px, 3vw, 40px) clamp(40px, 6vw, 64px);
}
.cms-home .om-home h2 {
    font-size: clamp(21px, 1.1rem + 1vw, 27px);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin: 0 0 18px;
}

/* --- Hero: Copy links, Bild rechts (Bild 870x387 nativ -> halbe Breite bleibt scharf) --- */
.cms-home .om-hero {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6.5fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}
.cms-home .om-hero__media { order: 2; }
.cms-home .om-hero__media img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}
.cms-home .om-hero__copy h1 {
    font-size: clamp(28px, 1.4rem + 2.2vw, 44px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.015em;
    text-wrap: balance;
    margin: 0 0 14px;
}
.cms-home .om-hero__lead {
    font-size: 16.5px;
    line-height: 1.65;
    color: #4b545e;
    max-width: 46ch;
    margin: 0 0 26px;
}
.cms-home .om-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* --- Buttons (Marken-CTA wie Buy-Box: Gruen, 8px) --- */
.cms-home .om-btn {
    display: inline-block;
    padding: 13px 28px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.cms-home .om-btn:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: 2px;
}
.cms-home .om-btn--primary,
.cms-home .om-btn--primary:visited {
    background: var(--theme-color);
    color: #fff;
    border: 1px solid var(--theme-color);
}
.cms-home .om-btn--primary:hover,
.cms-home .om-btn--primary:focus-visible {
    background: color-mix(in srgb, var(--theme-color) 82%, #00281f);
    border-color: color-mix(in srgb, var(--theme-color) 82%, #00281f);
    color: #fff;
    text-decoration: none;
}
.cms-home .om-btn--ghost,
.cms-home .om-btn--ghost:visited {
    background: #fff;
    color: color-mix(in srgb, var(--theme-color) 78%, #00281f);
    border: 1px solid color-mix(in srgb, var(--theme-color) 45%, #fff);
}
.cms-home .om-btn--ghost:hover,
.cms-home .om-btn--ghost:focus-visible {
    background: color-mix(in srgb, var(--theme-color) 7%, #fff);
    border-color: var(--theme-color);
    color: color-mix(in srgb, var(--theme-color) 78%, #00281f);
    text-decoration: none;
}

/* --- Trust-Leiste: 4 Spalten -> 2x2 mobil --- */
.cms-home .om-trust {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 24px;
    margin: 0;
    padding: 20px clamp(16px, 3vw, 28px);
    border-block: 1px solid #e7ebee;
}
.cms-home .om-trust li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}
.cms-home .om-trust__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--theme-color) 10%, #fff);
    color: var(--theme-color);
}
.cms-home .om-trust__text {
    display: flex;
    flex-direction: column;
    font-size: 13.5px;
    line-height: 1.45;
    color: #4b545e;
}
.cms-home .om-trust__text strong {
    font-size: 14.5px;
    color: #21293c;
}

/* --- Kategorie-Chips (Megamenue-Sprache: 8px-Radius, Chevron, translateX) --- */
.cms-home .om-cat-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
}
.cms-home .om-cat-grid li { margin: 0; }
.cms-home .om-cat-grid a,
.cms-home .om-cat-grid a:visited {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px 10px 10px;
    border: 1px solid #e4e8eb;
    border-radius: 8px;
    color: #21293c;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Fester Bildrahmen + object-fit: normalisiert die gemischten Quellformate
   (160x100 Menuebilder, 170x170 Katalogbild, 870x387 Slide). */
.cms-home .om-cat__media {
    flex: 0 0 auto;
    width: 84px;
    height: 56px;
    border-radius: 6px;
    overflow: hidden;
    line-height: 0;
}
.cms-home .om-cat__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cms-home .om-cat__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    overflow-wrap: break-word;
    hyphens: auto;
}
.cms-home .om-cat__chev {
    color: #9aa3ab;
    font-size: 20px;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
}
.cms-home .om-cat-grid a:hover,
.cms-home .om-cat-grid a:focus-visible {
    border-color: color-mix(in srgb, var(--theme-color) 45%, #fff);
    box-shadow: 0 2px 10px rgba(23, 156, 128, 0.08);
    color: var(--theme-color);
}
.cms-home .om-cat-grid a:hover .om-cat__chev,
.cms-home .om-cat-grid a:focus-visible .om-cat__chev {
    color: var(--theme-color);
    transform: translateX(4px);
}
.cms-home .om-cat-grid a:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--theme-color) 60%, #fff);
    outline-offset: 2px;
}

/* --- Sortenband: alle Teesorten als Bildkacheln (5x2 ab 992px) -------------
   Loest die alte 8er-Chipliste ab, die nur 5 der 10 Teesorten zeigte.
   Bild oben statt links ist keine Stilfrage: 10 Kacheln brauchen 5 Spalten,
   das sind ~258px Kachelbreite - darin passt "Bild links + Name + Chevron"
   nicht mehr nebeneinander. Nebeneffekt: Bild waechst von 84x56 auf 258x172.
   Die .om-cat-grid-Regeln oben bleiben unangetastet, weil homepage.css mit
   naturteil geteilt wird und dort weiter die Chip-Variante laufen kann. */
/* Beide Baender sitzen in EINER Section: .om-home ist ein Flex-Container mit
   gap clamp(40px,6vw,72px) -- als zwei Sections stuenden sie so weit
   auseinander wie Hero und Trust-Leiste, obwohl sie eine Einheit sind. */
.cms-home .om-sorts > h2 { margin-bottom: 4px; }
.cms-home .om-sorts__sub {
    margin: 0 0 18px;
    font-size: 14px;
    color: #4b545e;
}
.cms-home .om-sort-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
}
.cms-home .om-sort-grid li { margin: 0; }
.cms-home .om-sort-grid a,
.cms-home .om-sort-grid a:visited {
    display: flex;
    flex-direction: column;
    border: 1px solid #e4e8eb;
    border-radius: 8px;
    overflow: hidden;
    color: #21293c;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* 8/5 == native 160x100 der Menuebilder -> object-fit:cover schneidet nichts
   weg. Gleiches Verhaeltnis wie .ts-card__media auf der Sorten-Landingpage
   /tee.html, damit Startseite und Kategorieseite dieselbe Sprache sprechen. */
.cms-home .om-sort__media {
    display: block;
    aspect-ratio: 8 / 5;
    overflow: hidden;
    background: color-mix(in srgb, var(--theme-color) 5%, #f3f4f1);
    line-height: 0;
}
.cms-home .om-sort__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cms-home .om-sort__cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 13px;
}
.cms-home .om-sort__name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: break-word;
    hyphens: auto;
}
/* #9aa3ab aus der Chip-Variante misst nur 2.56:1 gegen Weiss; als rein
   dekoratives Zeichen zwar zulaessig, aber schlecht sichtbar. */
.cms-home .om-sort__chev,
.cms-home .om-more__chev {
    flex: 0 0 auto;
    color: #6b7a83;
    font-size: 18px;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
}
.cms-home .om-sort-grid a:hover,
.cms-home .om-sort-grid a:focus-visible,
.cms-home .om-more-grid a:hover,
.cms-home .om-more-grid a:focus-visible {
    border-color: color-mix(in srgb, var(--theme-color) 45%, #fff);
    box-shadow: 0 2px 10px rgba(23, 156, 128, 0.08);
    color: var(--theme-color);
}
.cms-home .om-sort-grid a:hover .om-sort__chev,
.cms-home .om-sort-grid a:focus-visible .om-sort__chev,
.cms-home .om-more-grid a:hover .om-more__chev,
.cms-home .om-more-grid a:focus-visible .om-more__chev {
    color: var(--theme-color);
    transform: translateX(4px);
}
.cms-home .om-sort-grid a:focus-visible,
.cms-home .om-more-grid a:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--theme-color) 60%, #fff);
    outline-offset: 2px;
}

/* --- Zweitband "Rund um den Tee": Warengruppen bewusst ohne Bild ----------
   Teekannen/Teezubehoer/Kaffee/Trinkschokolade standen bisher optisch
   gleichrangig neben den Teesorten. Ohne Bild und mit leiserer Typo
   ordnen sie sich unter, ohne aus der Startseite zu verschwinden. */
.cms-home .om-more { margin-top: 32px; }
.cms-home .om-more > h2 {
    font-size: 20px;
    margin-bottom: 14px;
}
.cms-home .om-more-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
}
.cms-home .om-more-grid li { margin: 0; }
.cms-home .om-more-grid a,
.cms-home .om-more-grid a:visited {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 15px;
    background: #fafbfb;
    border: 1px solid #e4e8eb;
    border-radius: 8px;
    color: #4b545e;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* --- Neuheiten: Section-Head mit "Alle Neuheiten"-Link --- */
.cms-home .om-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.cms-home .om-sec-head h2 { margin-bottom: 14px; }
.cms-home .om-sec-head__all,
.cms-home .om-sec-head__all:visited {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--theme-color);
    text-decoration: none;
    white-space: nowrap;
}
.cms-home .om-sec-head__all:hover,
.cms-home .om-sec-head__all:focus-visible {
    color: color-mix(in srgb, var(--theme-color) 78%, #00281f);
    text-decoration: underline;
}

/* Neuheiten-Carousel: owl-nav-Pfeile in Markenfarbe (Porto-Default ist
   Orange rgb(244,99,27); Porto-CSS laedt nach my_custom.css -> !important). */
.cms-home .om-news .owl-carousel .owl-nav button.owl-prev,
.cms-home .om-news .owl-carousel .owl-nav button.owl-next {
    background: var(--theme-color) !important;
    color: #fff !important;
}
.cms-home .om-news .owl-carousel .owl-nav button.owl-prev:hover,
.cms-home .om-news .owl-carousel .owl-nav button.owl-next:hover {
    background: color-mix(in srgb, var(--theme-color) 82%, #00281f) !important;
}
.cms-home .om-news .owl-carousel .owl-nav button.disabled {
    opacity: 0.35;
}

/* Neuheiten-Karten: Porto-Grid-Leak (.products-grid .product-item{width:50%})
   quetschte das Produkt auf die halbe Owl-Slot-Breite -> Bild nur ~69px
   ("mikrig" auf Mobil). Jede Karte fuellt jetzt ihren Owl-Slot voll aus; owl
   bestimmt weiter die Slot-Zahl (items 2/3/5). Breakpoint-unabhaengig,
   Desktop = No-op (dort ist product-item ohnehin 100%). */
.cms-home .om-news .product-item {
    width: 100% !important;
    float: none !important;
}
/* Katalog-/Produktbilder auf Weiss: volle Kartenbreite, contain (kein Crop),
   damit gemischte Quellformate sauber fluchten. */
.cms-home .om-news .product-item-photo img,
.cms-home .om-news .product-image-photo {
    width: 100% !important;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}
/* Produktname auf 2 Zeilen begrenzen + Mindesthoehe -> Preise fluchten
   kartenuebergreifend statt 6-zeiligem Notumbruch im schmalen Slot. */
.cms-home .om-news .product-item-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
    line-height: 1.35;
}

/* Owl-Pfeile bis zum Porto-Mobile-Breakpoint (<=991px, Touch): kompakte
   weisse Kreise, vertikal auf dem Bildband zentriert (owl-nav wird Flex-
   Overlay in Bildhoehe) -> keine Ueberlappung von Name/Preis wie bei den
   Default-Quadraten. Desktop (>=992px) behaelt die gruenen Pfeile oben. */
@media (max-width: 991px) {
    .cms-home .om-news .owl-carousel .owl-nav {
        position: absolute !important;
        top: 0 !important;
        left: 0;
        right: 0;
        margin: 0 !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 4px;
        pointer-events: none;
    }
    .cms-home .om-news .owl-carousel .owl-nav button.owl-prev,
    .cms-home .om-news .owl-carousel .owl-nav button.owl-next {
        position: static !important;
        transform: none !important;
        pointer-events: auto;
        width: 40px !important;
        height: 40px !important;
        min-width: 0 !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.95) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
        font-size: 0 !important;
    }
    .cms-home .om-news .owl-carousel .owl-nav button.owl-prev::before { content: '\2039'; }
    .cms-home .om-news .owl-carousel .owl-nav button.owl-next::before { content: '\203A'; }
    .cms-home .om-news .owl-carousel .owl-nav button.owl-prev::before,
    .cms-home .om-news .owl-carousel .owl-nav button.owl-next::before {
        font-size: 24px;
        line-height: 1;
        color: var(--theme-color);
    }
}
/* Overlay-Hoehe = Bildhoehe je Item-Band, damit die Pfeile mittig aufs Bild
   treffen (Bild ist quadratisch = Slot-Breite): 2 Items ~42vw, 3 Items ~31vw. */
@media (max-width: 767px) {
    .cms-home .om-news .owl-carousel .owl-nav { height: 42vw; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .cms-home .om-news .owl-carousel .owl-nav { height: 31vw; }
}

/* --- Saison-Panel (einziger Committed-Color-Block der Seite) --- */
.cms-home .om-season {
    background: #0e6b58;
    border-radius: 8px;
    padding: clamp(28px, 5vw, 52px) clamp(20px, 5vw, 56px);
    text-align: center;
}
.cms-home .om-season h2 {
    color: #fff;
    margin-bottom: 10px;
}
.cms-home .om-season p {
    color: #d9efe9;
    font-size: 15.5px;
    line-height: 1.6;
    max-width: 52ch;
    margin: 0 auto 22px;
}
.cms-home .om-btn--light,
.cms-home .om-btn--light:visited {
    background: #fff;
    color: #0e6b58;
    border: 1px solid #fff;
}
.cms-home .om-btn--light:hover,
.cms-home .om-btn--light:focus-visible {
    background: #e4f3ee;
    border-color: #e4f3ee;
    color: #0a5445;
    text-decoration: none;
}
.cms-home .om-btn--light:focus-visible { outline-color: #fff; }

/* --- SEO-Text am Ende: 3-Spalten-Register ueber die volle Breite
       (Lead + 2 Themenbloecke, alles sichtbar; Muster wie Rechtsseiten-Multicol) --- */
.cms-home .om-about__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 48px;
    align-items: start;
}
.cms-home .om-about p {
    font-size: 15px;
    line-height: 1.7;
    color: #3c4650;
    text-wrap: pretty;
    margin: 0;
}
.cms-home .om-about__lead {
    font-size: 16px;
    color: #2c343e;
}
.cms-home .om-about h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 10px;
    text-wrap: balance;
}
@media (max-width: 991px) {
    .cms-home .om-about__cols { grid-template-columns: 1fr; gap: 26px; }
}

/* --- Responsive --- */
@media (max-width: 991px) {
    .cms-home .om-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* 5 Spalten liessen der Kachel hier nur ~140px -> 3 Spalten. */
    .cms-home .om-sort-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cms-home .om-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Hero-Split erst ab 992px: bei 768-991 ist die Copy-Spalte zu schmal
       (3-zeilige h1, verlorenes Bild) -> gestapelt, Bild volle Breite. */
    .cms-home .om-hero { grid-template-columns: 1fr; gap: 20px; }
    .cms-home .om-hero__media { order: 0; }
}
@media (max-width: 767px) {
    .cms-home .om-hero__actions .om-btn { flex: 1 1 auto; text-align: center; }
    /* 16:9 statt 3:2 und einzeiliger Name halten den Hoehenaufschlag klein:
       10 Sorten kosten so ~130px mehr als die alten 8 Chips, nicht ~290px. */
    .cms-home .om-sort-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .cms-home .om-sort__media { aspect-ratio: 16 / 9; }
    .cms-home .om-sort__cap { padding: 9px 11px; }
    .cms-home .om-sort__name { font-size: 13.5px; }
    .cms-home .om-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cms-home .om-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cms-home .om-cat-grid a { gap: 10px; padding: 8px 12px 8px 8px; }
    /* Kompaktes Quadrat: laesst dem Namen ~100px -> lange Woerter brechen
       an den &shy;-Stellen des Markups statt per Notbruch. */
    .cms-home .om-cat__media { width: 48px; height: 48px; }
    .cms-home .om-cat__name { font-size: 13.5px; }
}
@media (max-width: 479px) {
    /* 2 Spalten lassen dem Namen <70px -> Notbrueche trotz &shy;;
       einspaltig = grosse Tap-Targets, saubere Woerter. */
    .cms-home .om-cat-grid { grid-template-columns: 1fr; gap: 10px; }
    /* Das Sortenband bleibt bewusst 2-spaltig: der Name sitzt hier UNTER dem
       Bild und hat die volle Kachelbreite (~139px bei 375px Viewport), nicht
       nur die ~70px neben einem Chip-Thumbnail. Einspaltig waeren es 10 Reihen. */
    .cms-home .om-trust { gap: 12px 14px; padding-inline: 8px; }
    .cms-home .om-trust__icon { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
    .cms-home .om-btn,
    .cms-home .om-cat-grid a,
    .cms-home .om-cat__chev,
    .cms-home .om-sort-grid a,
    .cms-home .om-more-grid a,
    .cms-home .om-sort__chev,
    .cms-home .om-more__chev { transition: none; }
    .cms-home .om-cat-grid a:hover .om-cat__chev,
    .cms-home .om-cat-grid a:focus-visible .om-cat__chev,
    .cms-home .om-sort-grid a:hover .om-sort__chev,
    .cms-home .om-sort-grid a:focus-visible .om-sort__chev,
    .cms-home .om-more-grid a:hover .om-more__chev,
    .cms-home .om-more-grid a:focus-visible .om-more__chev { transform: none; }
}