/* ==========================================================================
   LOKANES CSS-Modul: home.css
   Lädt auf der Startseite (is_front_page).
   Inhalt: Seitenblock wordpress/page-blocks/homepage.html.

   Einbindung und Ladereihenfolge: ../lokanes-css.php (global, geschenkefinder, Seitenmodul).
   Ein Seitenmodul lädt immer nach global.css. Hinweise zur Pflege: ../README.md
   Hervorgegangen aus dem früheren WoodMart "Global Custom CSS" (Stand 12.10.2026);
   Regeln und Abschnittskommentare sind unverändert übernommen.
   ========================================================================== */

/* ==========================================================================
   GESCHENKEFINDER: ERGEBNISSE MOBIL
   Ergebniskarten des Finders (.lokanes-hybrid-row.lokanes-gf-results aus
   geschenkfinder-fragen-und-karte.code-snippets.php) stehen auf Mobile
   untereinander statt im horizontalen Swipe-Karussell. Gilt für B2C und
   Firmenkunden. Ab 768px bleibt das Karussell, ab 993px das Dreier-Grid.
========================================================================== */



/* ==========================================================================
   HOMEPAGE V2: SET-INSZENIERUNG ("Vier Geschenke für besondere Momente")
   Seite: wordpress/page-blocks/homepage.html, Abschnitt .lokanes-home__sets.
   Produktkarten: [lokanes_gift_hub_grid ids="..." layout="feature"] (Markup aus dem
   Hub-Snippet, hier nur gestaltet). Alle Regeln unter .lokanes-home gescoped.

   Komposition: Das erste Set (Riesling) steht auf einer dunklen Bühne, die oben und unten
   weich ausläuft. Die drei weiteren Sets stehen treppenförmig auf dem Papier und greifen
   mit ihren Bildern in den Auslauf der Bühne.
   Die Bühne ist ein ::before der ersten Karte; sie ragt seitlich nur bis zum Viewport
   (--home-bleed) und läuft per Maske aus: kein Überstand, kein Overflow-Clipping nötig.
========================================================================== */

.lokanes-home .lokanes-gift-hub__grid--feature {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 72px 24px;
    align-items: start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card {
    position: relative;
    z-index: 1;
    flex: none;
    max-width: none;
    margin: 0;
}

.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:nth-child(1) { grid-column: 1 / -1; grid-row: 1; isolation: isolate; }
.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:nth-child(2) { grid-column: 1 / 5; grid-row: 2; margin-top: 24px; }
.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:nth-child(3) { grid-column: 5 / 9; grid-row: 2; margin-top: 80px; }
.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:nth-child(4) { grid-column: 9 / 13; grid-row: 2; margin-top: 136px; }

.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card-link {
    display: flex;
    flex-direction: column;
    text-align: left;
    text-decoration: none;
}

.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card-link:focus-visible {
    outline: 2px solid var(--home-copper-text) !important;
    outline-offset: 8px;
}

/* Bühne hinter dem Haupt-Set: volle Viewport-Breite, ca. 48px weicher Auslauf oben und unten */
.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:first-child::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -36px;
    bottom: -120px;
    left: calc(-1 * var(--home-bleed));
    right: calc(-1 * var(--home-bleed));
    background-image:
        var(--home-grain),
        linear-gradient(180deg,
            rgba(var(--home-stage-set), 0) 0,
            rgba(var(--home-stage-set), 0.06) 6px,
            rgba(var(--home-stage-set), 0.2) 14px,
            rgba(var(--home-stage-set), 0.45) 24px,
            rgba(var(--home-stage-set), 0.74) 34px,
            rgba(var(--home-stage-set), 0.93) 42px,
            rgb(var(--home-stage-set)) 48px,
            rgb(var(--home-stage-set)) calc(100% - 48px),
            rgba(var(--home-stage-set), 0.93) calc(100% - 42px),
            rgba(var(--home-stage-set), 0.74) calc(100% - 34px),
            rgba(var(--home-stage-set), 0.45) calc(100% - 24px),
            rgba(var(--home-stage-set), 0.2) calc(100% - 14px),
            rgba(var(--home-stage-set), 0.06) calc(100% - 6px),
            rgba(var(--home-stage-set), 0) 100%);
    background-size: 200px 200px, auto;
    pointer-events: none;
}

.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:first-child .lokanes-gift-hub__card-link {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
}

.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:first-child .lokanes-gift-hub__card-media {
    grid-column: 1 / 9;
    margin: 0;
}

.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:first-child .lokanes-gift-hub__card-body {
    grid-column: 9 / 13;
    align-self: end;
    padding: 0 0 6px;
}

/* Bildbühne: schlichter Zuschnitt, langsamer Zoom beim Hover */
.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card-media {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 0 24px;
    border-radius: 10px;
}

.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card-img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card-body {
    display: block;
    flex: none;
    padding: 0;
}

/* Typografie: Eyebrow ruhig, Titel Georgia, Zusatz als Kursiv */
.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card-eyebrow {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #6f655e;
}

.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card-title {
    margin: 0 0 14px;
    font-family: 'Georgia', serif;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: 0;
    text-transform: none;
    color: var(--home-ink);
    text-wrap: balance;
}

.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card-title-main,
.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card-title-sub { display: block; }

.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card-title-sep { display: none; }

.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card-title-sub {
    margin-top: 8px;
    font-size: 18px;
    font-style: italic;
    color: var(--home-copper-text);
}

.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card-line {
    max-width: 440px;
    margin: 0 0 20px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--home-text);
}

/* CTA als Textlink mit Pfeil */
.lokanes-home .lokanes-gift-hub__card-cta--text {
    display: inline-block;
    margin-top: 0;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--home-copper);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--home-ink);
    transition: color 0.3s ease;
}

.lokanes-home .lokanes-gift-hub__card-cta--text::after {
    content: "\2192";
    display: inline-block;
    margin-left: 10px;
    letter-spacing: 0;
    transition: transform 0.3s ease;
}

.lokanes-home .lokanes-gift-hub__card-link:hover .lokanes-gift-hub__card-cta--text {
    background-color: transparent !important;
    color: var(--home-copper-text) !important;
    transform: none;
    box-shadow: none;
}

.lokanes-home .lokanes-gift-hub__card-link:hover .lokanes-gift-hub__card-cta--text::after { transform: translateX(4px); }

/* Haupt-Set: größerer Titel, Elfenbein auf der Bühne */
.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:first-child .lokanes-gift-hub__card-title { font-size: 44px; line-height: 1.04; color: var(--home-ivory); }
.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:first-child .lokanes-gift-hub__card-title-sub { font-size: 23px; color: var(--home-copper); }
.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:first-child .lokanes-gift-hub__card-eyebrow { color: #c4b9ae; }
.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:first-child .lokanes-gift-hub__card-line { color: #ddd7d0; }
.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:first-child .lokanes-gift-hub__card-cta--text { color: var(--home-ivory); }
.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:first-child .lokanes-gift-hub__card-link:hover .lokanes-gift-hub__card-cta--text { color: var(--home-copper) !important; }
.lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:first-child .lokanes-gift-hub__card-link:focus-visible { outline-color: var(--home-copper) !important; outline-offset: 10px; }

@media (hover: hover) {
    .lokanes-home .lokanes-gift-hub__card-link:hover .lokanes-gift-hub__card-img,
    .lokanes-home .lokanes-gift-hub__card-link:focus-visible .lokanes-gift-hub__card-img { transform: scale(1.03); }
}

/* Tablet */
@media (max-width: 1024px) {
    .lokanes-home .lokanes-gift-hub__grid--feature { gap: 56px 20px; }
    .lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:nth-child(3) { margin-top: 56px; }
    .lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:nth-child(4) { margin-top: 96px; }
    .lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:first-child .lokanes-gift-hub__card-link { column-gap: 20px; }
    .lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:first-child .lokanes-gift-hub__card-title { font-size: 32px; }
    .lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card-title { font-size: 21px; }
    .lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card-title-sub { font-size: 16px; }
    .lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:first-child .lokanes-gift-hub__card-title-sub { font-size: 19px; }
}

/* Mobil: Riesling als dunkles Highlight, drei Sets auf hellem Grund; Bilder nutzen die volle Breite */
@media (max-width: 767px) {
    .lokanes-home .lokanes-gift-hub__grid--feature { display: block; }
    .lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:nth-child(n) { margin-top: 0; }
    .lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card + .lokanes-gift-hub__card { margin-top: 44px; }
    .lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:nth-child(2) { margin-top: 72px; }
    .lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:first-child { margin-top: 40px; }

    .lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card-media,
    .lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:first-child .lokanes-gift-hub__card-media {
        width: calc(100% + 32px);
        margin: 0 -16px 20px;
        border-radius: 10px;
    }

    .lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:first-child::before {
        top: -24px;
        bottom: -48px;
    }

    .lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:first-child .lokanes-gift-hub__card-link { display: block; }
    .lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:first-child .lokanes-gift-hub__card-body { padding: 0; }
    .lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:first-child .lokanes-gift-hub__card-title { font-size: 32px; }
    .lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card:first-child .lokanes-gift-hub__card-title-sub { font-size: 19px; }
    .lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card-title { font-size: 26px; }
    .lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card-title-sub { font-size: 18px; }
}

@media (max-width: 400px) {
    .lokanes-home .lokanes-gift-hub__card-cta--text { font-size: 12px; letter-spacing: 0.1em; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
    .lokanes-home .lokanes-gift-hub__grid--feature .lokanes-gift-hub__card-img { transition: none; }
    .lokanes-home .lokanes-gift-hub__card-link:hover .lokanes-gift-hub__card-img,
    .lokanes-home .lokanes-gift-hub__card-link:focus-visible .lokanes-gift-hub__card-img { transform: none; }
    .lokanes-home .lokanes-gift-hub__card-cta--text,
    .lokanes-home .lokanes-gift-hub__card-cta--text::after { transition: none; }
}


/* ==========================================================================
   HOMEPAGE V2
   Seite: wordpress/page-blocks/homepage.html
   Produktkarten: [lokanes_gift_hub_grid ids="..."] (Styles im Abschnitt
   GESCHENKSET-HUB). Alle Regeln unter .lokanes-home gescoped.
========================================================================== */

.lokanes-home {
    --home-copper: #cc9e7e;
    --home-ink: #1a1a1a;
    --home-text: #4a4a4a;
    --home-line: rgba(204, 158, 126, 0.35);
    --home-copper-text: var(--home-copper);
    --home-ivory: #f2f0ef;
    /* Dunkle Bühnen (Hero heller, Set-Bühne tiefer), warmes Anthrazit statt Schwarz */
    --home-stage-hero: 42, 36, 32;
    --home-stage-set: 31, 26, 23;
    /* Bühnen laufen über die volle Viewport-Breite (wie der Header); das Theme schneidet den Überstand der Scrollbar ab (body overflow-x: clip) */
        --home-bleed: max(0px, calc((100vw - 100%) / 2));
    --home-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    font-family: 'Jost', sans-serif;
    color: var(--home-text);
}

.lokanes-home *,
.lokanes-home *::before,
.lokanes-home *::after {
    box-sizing: border-box;
}

.lokanes-home ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lokanes-home li {
    margin: 0;
}

.lokanes-home a:focus-visible {
    outline: 2px solid var(--home-copper);
    outline-offset: 4px;
}

/* Das Produktgrid bringt den Hub-Wrapper mit; hier ohne eigenen Rand. */
.lokanes-home .lokanes-gift-hub {
    max-width: none;
    padding: 0;
}

/* --- Hero: Aufmacher mit dunkler Bühne unter dem Panorama ---
   Headline links, Intro und Buttons rechts als eine Einheit, beide vertikal mittig zueinander;
   das Panorama folgt direkt darunter. Die Bühne ist ein ::before der Bildfläche mit klarer Kante
   (ca. 48px Auslauf oben und unten). Sie reicht seitlich über die volle Viewport-Breite
   (--home-bleed, wie der Header); den Scrollbar-Überstand schneidet das Theme ab (body overflow-x: clip). */
.lokanes-home .lokanes-home__hero {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    padding: 28px 0 0;
    text-align: left;
}

.lokanes-home .lokanes-home__brandline {
    grid-column: 1 / 8;
    grid-row: 1;
    margin: 0 0 14px;
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--home-copper-text);
}

.lokanes-home .lokanes-home__title {
    grid-column: 1 / 8;
    grid-row: 2;
    align-self: center;
    margin: 0 0 30px;
    font-family: 'Georgia', serif;
    font-size: clamp(40px, 4.5vw, 64px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.014em;
    text-transform: none;
    color: var(--home-ink);
    text-wrap: balance;
}

.lokanes-home .lokanes-home__hero-aside {
    grid-column: 8 / 13;
    grid-row: 1 / 3;
    align-self: start;
    margin: 0 0 30px;
}

.lokanes-home .lokanes-home__intro {
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--home-text);
}

.lokanes-home .lokanes-home__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.lokanes-home .lokanes-home__actions a.lokanes-texture-btn,
.lokanes-home .lokanes-home__actions a.lokanes-outline-btn {
    min-height: 48px !important;
    padding: 12px 17px !important;
    font-size: 13px !important;
    letter-spacing: 0.06em !important;
}

.lokanes-home .lokanes-home__hero-media {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
}

/* Rahmen mit festem Seitenverhältnis: kein Layout-Sprung beim Laden. */
.lokanes-home .lokanes-home__hero-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 2161 / 728;
    border-radius: 12px;
    background-color: #e6ddd7;
}

/* Das picture-Element füllt den Hero-Rahmen. */
.lokanes-home .lokanes-home__hero-frame > picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.lokanes-home .lokanes-home__hero-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dunkle Bühne: beginnt auf halber Bildhöhe, endet unter der Trust-Leiste. Klare Kanten,
   ca. 48px weicher Auslauf oben und unten. */
.lokanes-home .lokanes-home__hero-media::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 52%;
    bottom: -98px;
    left: calc(-1 * var(--home-bleed));
    right: calc(-1 * var(--home-bleed));
    background-image:
        var(--home-grain),
        linear-gradient(180deg,
            rgba(var(--home-stage-hero), 0) 0,
            rgba(var(--home-stage-hero), 0.06) 6px,
            rgba(var(--home-stage-hero), 0.2) 14px,
            rgba(var(--home-stage-hero), 0.45) 24px,
            rgba(var(--home-stage-hero), 0.74) 34px,
            rgba(var(--home-stage-hero), 0.93) 42px,
            rgb(var(--home-stage-hero)) 48px,
            rgb(var(--home-stage-hero)) calc(100% - 48px),
            rgba(var(--home-stage-hero), 0.93) calc(100% - 42px),
            rgba(var(--home-stage-hero), 0.74) calc(100% - 34px),
            rgba(var(--home-stage-hero), 0.45) calc(100% - 24px),
            rgba(var(--home-stage-hero), 0.2) calc(100% - 14px),
            rgba(var(--home-stage-hero), 0.06) calc(100% - 6px),
            rgba(var(--home-stage-hero), 0) 100%);
    background-size: 200px 200px, auto;
    pointer-events: none;
}

/* Siegel unten rechts auf der Bildkante, nicht über Gesichtern. */
.lokanes-home .lokanes-home__hero-badge {
    position: absolute;
    right: 28px;
    bottom: -38px;
    z-index: 2;
}

@media (min-width: 1025px) and (max-width: 1280px) {
    .lokanes-home .lokanes-home__brandline { grid-column: 1 / 7; }
    .lokanes-home .lokanes-home__title { grid-column: 1 / 7; }
    .lokanes-home .lokanes-home__hero-aside { grid-column: 7 / 13; }
}

/* --- Trust-Leiste --- */
/* Die Leiste liegt auf der dunklen Hero-Bühne (Elfenbein); mobil auf Papier (siehe Mobile). */
.lokanes-home .lokanes-home__trust {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 32px;
    padding: 18px 0;
}

.lokanes-home .lokanes-home__trust-item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.4;
    color: var(--home-ivory);
    white-space: nowrap;
}

.lokanes-home .lokanes-home__trust-icon,
.lokanes-home .lokanes-home__arrow {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--home-copper);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Bereiche --- */
.lokanes-home .lokanes-home__section {
    padding-top: 88px;
}

.lokanes-home .lokanes-home__head {
    margin-bottom: 34px;
    text-align: center;
}

.lokanes-home .lokanes-home__eyebrow {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--home-copper);
}

.lokanes-home .lokanes-home__h2 {
    margin: 0 0 10px;
    font-family: 'Georgia', serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    color: var(--home-ink);
    text-wrap: balance;
}

.lokanes-home .lokanes-home__h2--small {
    font-size: 28px;
}

.lokanes-home .lokanes-home__text {
    max-width: 620px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.6;
    color: var(--home-text);
}

/* --- Set-Section: Kopf links, Text rechts --- */
.lokanes-home .lokanes-home__sets { padding-top: 120px; }

.lokanes-home .lokanes-home__head--split {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: end;
    margin-bottom: 56px;
    text-align: left;
}

.lokanes-home .lokanes-home__head--split > div { grid-column: 1 / 9; }
.lokanes-home .lokanes-home__head--split .lokanes-home__eyebrow { color: var(--home-copper-text); }

.lokanes-home .lokanes-home__head--split .lokanes-home__h2 {
    margin: 0;
    font-size: clamp(38px, 4vw, 56px);
    line-height: 1.04;
    letter-spacing: -0.014em;
}

.lokanes-home .lokanes-home__head--split .lokanes-home__text {
    grid-column: 9 / 13;
    max-width: none;
    margin: 0 0 6px;
}

.lokanes-home .lokanes-home__more {
    margin-top: 48px;
    text-align: center;
}

.lokanes-home .lokanes-home__more .lokanes-outline-btn,
.lokanes-home .lokanes-home__shipping .lokanes-outline-btn {
    margin-right: 0 !important;
}

/* --- Discovery: vier typografische Einstiege mit feinen Trennern --- */
.lokanes-home .lokanes-home__moments {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 64px;
    max-width: 1040px;
    margin: 0 auto;
}

.lokanes-home .lokanes-home__moment {
    display: flex;
    align-items: center;
    gap: 22px;
    height: 100%;
    padding: 22px 4px 22px;
    border-top: 1px solid var(--home-line);
    text-align: left;
    text-decoration: none;
    color: inherit;
}

.lokanes-home .lokanes-home__moments li:nth-last-child(-n+2) .lokanes-home__moment {
    border-bottom: 1px solid var(--home-line);
}

.lokanes-home .lokanes-home__moment:hover,
.lokanes-home .lokanes-home__moment:focus-visible {
    color: inherit;
}

/* Kleines Stimmungsbild links, quadratisch. */
.lokanes-home .lokanes-home__moment-img {
    flex: 0 0 auto;
    display: block;
    width: 92px;
    height: 92px;
    border-radius: 8px;
    object-fit: cover;
}

.lokanes-home .lokanes-home__moment-copy {
    display: block;
    min-width: 0;
}

.lokanes-home .lokanes-home__moment-title {
    display: block;
    margin-bottom: 5px;
    font-family: 'Georgia', serif;
    font-size: 26px;
    line-height: 1.2;
    color: var(--home-ink);
}

.lokanes-home .lokanes-home__moment-text {
    display: block;
    font-size: 15px;
    line-height: 1.5;
    color: var(--home-text);
}

/* Aktionszeile: sagt, wohin der Einstieg führt (Geschenkefinder oder Sets). */
.lokanes-home .lokanes-home__moment-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--home-copper);
}

.lokanes-home .lokanes-home__moment-action .lokanes-home__arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.lokanes-home .lokanes-home__moment:hover .lokanes-home__arrow,
.lokanes-home .lokanes-home__moment:focus-visible .lokanes-home__arrow {
    transform: translateX(4px);
}

.lokanes-home .lokanes-home__moments-more {
    margin: 26px 0 0;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    color: var(--home-text);
}

.lokanes-home .lokanes-home__moments-more a {
    padding-bottom: 2px;
    border-bottom: 1px solid var(--home-copper);
    color: var(--home-ink);
    text-decoration: none;
}

.lokanes-home .lokanes-home__moments-more a:hover {
    color: var(--home-copper);
}

/* --- Einzelprodukte: Teaser (Text + Bildkomposition) --- */
.lokanes-home .lokanes-home__single {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: 64px;
    padding-top: 104px;
}

.lokanes-home .lokanes-home__single-body {
    order: 1;
    text-align: left;
}

.lokanes-home .lokanes-home__single-body .lokanes-home__text {
    max-width: 460px;
    margin: 0 0 28px;
}

.lokanes-home .lokanes-home__single-body .lokanes-outline-btn {
    margin-right: 0 !important;
}

.lokanes-home .lokanes-home__single-media {
    order: 2;
}

/* Ein Bild (Flat-Lay aller Einzelprodukte), Zuschnitt wie bei Hero und Sets. */
.lokanes-home .lokanes-home__single-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.lokanes-home .lokanes-home__single .lokanes-home__eyebrow { color: var(--home-copper-text); }

/* --- Direktversand --- */
.lokanes-home .lokanes-home__shipping {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-top: 104px;
    padding: 40px 48px;
    background-color: rgba(204, 158, 126, 0.13);
    border-radius: 10px;
}

.lokanes-home .lokanes-home__shipping-copy {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 640px;
}

.lokanes-home .lokanes-home__shipping .lokanes-home__eyebrow {
    margin-bottom: 8px;
}

.lokanes-home .lokanes-home__shipping .lokanes-home__text {
    margin: 0;
}

/* Der Button darf schrumpfen und umbrechen, aber nie den Container verlassen. */
.lokanes-home .lokanes-home__shipping .lokanes-outline-btn {
    flex: 0 1 auto;
    max-width: 100%;
    white-space: normal;
    text-align: center;
}

/* --- Herkunft / Warum Lokanes --- */
.lokanes-home .lokanes-home__origin {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: center;
    margin-top: 88px;
    padding: 48px 56px 48px 24px;
    background-color: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--home-line);
    border-radius: 10px;
}

.lokanes-home .lokanes-home__origin-media {
    margin: 0;
    padding: 0 24px;
    text-align: center;
}

.lokanes-home .lokanes-home__origin-map {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    margin: 0 auto;
}

.lokanes-home .lokanes-home__origin-caption {
    max-width: 260px;
    margin: 16px auto 0;
    font-family: 'Georgia', serif;
    font-size: 15px;
    font-style: italic;
    line-height: 1.5;
    color: var(--home-text);
}

.lokanes-home .lokanes-home__origin-body {
    padding-left: 56px;
    border-left: 1px solid var(--home-line);
    text-align: left;
}

.lokanes-home .lokanes-home__origin-body .lokanes-home__h2 {
    margin-bottom: 16px;
    font-size: 40px;
    line-height: 1.15;
}

.lokanes-home .lokanes-home__origin-text {
    max-width: 560px;
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--home-text);
}

.lokanes-home .lokanes-home__origin-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin: 0 0 28px;
}

.lokanes-home .lokanes-home__origin-list li {
    position: relative;
    padding-left: 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--home-ink);
}

.lokanes-home .lokanes-home__origin-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--home-copper);
}

/* Die globale Button-Regel setzt bis einschließlich 768px width: 100%.
   Das Mobile-Layout der Homepage endet bei 767px, deshalb ab 768px natürliche Breite. */
@media (min-width: 768px) {
    .lokanes-home a.lokanes-texture-btn,
    .lokanes-home a.lokanes-outline-btn {
        width: auto !important;
    }
}

/* --- Tablet --- */
@media (max-width: 1100px) {
    /* Fünf Trust-Punkte brechen sauber in 3 + 2 um. */
    .lokanes-home .lokanes-home__trust {
        padding-left: max(0px, calc((100% - 640px) / 2));
        padding-right: max(0px, calc((100% - 640px) / 2));
    }
    /* Zweizeilige Trust-Leiste: die Bühne reicht weiter nach unten. */
    .lokanes-home .lokanes-home__hero-media::before { bottom: -126px; }
}

@media (max-width: 1024px) {
    .lokanes-home .lokanes-home__hero { padding: 24px 0 0; }
    .lokanes-home .lokanes-home__brandline { grid-column: 1 / 7; }
    .lokanes-home .lokanes-home__title { grid-column: 1 / 7; margin-bottom: 26px; }
    .lokanes-home .lokanes-home__hero-aside { grid-column: 7 / 13; margin-bottom: 26px; }
    .lokanes-home .lokanes-home__hero-badge { right: 20px; }
    .lokanes-home .lokanes-home__sets { padding-top: 96px; }
    .lokanes-home .lokanes-home__moments { column-gap: 36px; }
    .lokanes-home .lokanes-home__moment { gap: 18px; }
    /* Aktionszeile bleibt neben dem Bild einzeilig. */
    .lokanes-home .lokanes-home__moment-action { gap: 6px; font-size: 11px; letter-spacing: 0.08em; }
    .lokanes-home .lokanes-home__moment-img { width: 80px; height: 80px; }
    .lokanes-home .lokanes-home__moment-title { font-size: 23px; }
    .lokanes-home .lokanes-home__single { gap: 40px; padding-top: 88px; }
    /* Direktversand: Text über Button, statt zwei gequetschter Spalten. */
    .lokanes-home .lokanes-home__shipping {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        margin-top: 88px;
        padding: 32px;
    }
    .lokanes-home .lokanes-home__shipping-copy { max-width: 620px; }
    .lokanes-home .lokanes-home__origin { padding: 40px 32px 40px 8px; }
    .lokanes-home .lokanes-home__origin-body { padding-left: 32px; }
    .lokanes-home .lokanes-home__origin-body .lokanes-home__h2 { font-size: 32px; }
}

/* --- Mobile --- */
@media (max-width: 767px) {
    .lokanes-home { padding: 0 16px; }
    /* Mobil: Überschrift, dann sofort das Foto, danach Intro und Buttons. */
    .lokanes-home .lokanes-home__hero { display: flex; flex-direction: column; padding: 16px 0 0; }
    .lokanes-home .lokanes-home__brandline { order: 1; margin-bottom: 12px; font-size: 15px; letter-spacing: 0.12em; }
    .lokanes-home .lokanes-home__title { order: 2; margin: 0 0 16px; font-size: 34px; line-height: 1.04; }
    .lokanes-home .lokanes-home__hero-media { order: 3; }
    .lokanes-home .lokanes-home__hero-media::before { top: 58%; bottom: -34px; }
    .lokanes-home .lokanes-home__hero-aside { order: 4; margin: 56px 0 32px; padding: 0; }
    .lokanes-home .lokanes-home__intro { margin-bottom: 20px; font-size: 16px; line-height: 1.55; }
    .lokanes-home .lokanes-home__actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .lokanes-home .lokanes-home__actions a.lokanes-texture-btn,
    .lokanes-home .lokanes-home__actions a.lokanes-outline-btn {
        width: 100% !important;
        min-height: 48px !important;
        padding: 12px 20px !important;
    }
    /* Mobil zeigt der Rahmen ein eigenes Querformat (4:3, separate Bilddatei im picture-Element). */
    .lokanes-home .lokanes-home__hero-frame { aspect-ratio: 4 / 3; }
    .lokanes-home .lokanes-home__hero-img {
        position: static;
        display: block;
        width: 100%;
        max-width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transform: none;
    }
    .lokanes-home .lokanes-home__hero-badge { right: 14px; bottom: -28px; }
    .lokanes-home .lokanes-home__hero-badge .lokanes-mig-badge { width: 64px; height: 64px; }
    .lokanes-home .lokanes-home__trust {
        z-index: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, max-content));
        justify-content: center;
        gap: 9px 14px;
        padding: 13px 0;
        border-top: 1px solid var(--home-line);
        border-bottom: 1px solid var(--home-line);
    }
    .lokanes-home .lokanes-home__trust-item {
        gap: 7px;
        font-size: 13px;
        letter-spacing: 0;
        white-space: normal;
        color: var(--home-ink);
    }
    .lokanes-home .lokanes-home__trust-item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
    }
    .lokanes-home .lokanes-home__trust-icon { width: 16px; height: 16px; }
    .lokanes-home .lokanes-home__section { padding-top: 60px; }
    .lokanes-home .lokanes-home__head { margin-bottom: 26px; }
    .lokanes-home .lokanes-home__h2 { font-size: 28px; }
    .lokanes-home .lokanes-home__h2--small { font-size: 24px; }
    .lokanes-home .lokanes-home__more { margin-top: 36px; }
    .lokanes-home .lokanes-home__sets { padding-top: 80px; }
    .lokanes-home .lokanes-home__head--split { display: block; margin-bottom: 32px; }
    .lokanes-home .lokanes-home__head--split .lokanes-home__h2 { font-size: 34px; }
    .lokanes-home .lokanes-home__head--split .lokanes-home__text { margin-top: 10px; }
    .lokanes-home .lokanes-home__moments { grid-template-columns: 1fr; }
    .lokanes-home .lokanes-home__moment { gap: 16px; padding: 16px 2px 16px; }
    .lokanes-home .lokanes-home__moment-img { width: 72px; height: 72px; }
    .lokanes-home .lokanes-home__moment-action { margin-top: 9px; }
    .lokanes-home .lokanes-home__moments-more { margin-top: 20px; }
    .lokanes-home .lokanes-home__moments li:nth-last-child(2) .lokanes-home__moment { border-bottom: 0; }
    .lokanes-home .lokanes-home__moment-title { margin-bottom: 3px; font-size: 22px; }
    .lokanes-home .lokanes-home__single {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-top: 64px;
    }
    .lokanes-home .lokanes-home__single-body { order: 2; text-align: center; }
    .lokanes-home .lokanes-home__single-body .lokanes-home__text { margin: 0 auto 22px; }
    .lokanes-home .lokanes-home__single-media { order: 1; margin: 0 -16px; }
    .lokanes-home .lokanes-home__shipping {
        align-items: center;
        gap: 22px;
        margin-top: 64px;
        padding: 30px 22px 32px;
        text-align: center;
    }
    .lokanes-home .lokanes-home__shipping a.lokanes-outline-btn {
        padding: 14px 12px !important;
        font-size: 13px !important;
        letter-spacing: 0.05em !important;
    }
    .lokanes-home .lokanes-home__origin {
        grid-template-columns: 1fr;
        margin-top: 60px;
        padding: 32px 22px 34px;
    }
    .lokanes-home .lokanes-home__origin-media { padding: 0 0 26px; }
    .lokanes-home .lokanes-home__origin-map { max-width: 140px; }
    .lokanes-home .lokanes-home__origin-body {
        padding: 26px 0 0;
        border-left: 0;
        border-top: 1px solid var(--home-line);
        text-align: center;
    }
    .lokanes-home .lokanes-home__origin-body .lokanes-home__h2 { font-size: 28px; }
    .lokanes-home .lokanes-home__origin-text { margin-left: auto; margin-right: auto; font-size: 16px; }
    .lokanes-home .lokanes-home__origin-list { flex-direction: column; align-items: center; gap: 6px; margin-bottom: 24px; }
}


/* ==========================================================================
   HOMEPAGE V2: ANLASS-KACHELN HOVER
   Die vier Einstiege unter "Für welchen Moment suchst du ein Geschenk?"
   (.lokanes-home__moment in wordpress/page-blocks/homepage.html) werden beim
   Überfahren und bei Tastaturfokus zum kupfernen Block, damit sichtbar ist,
   welche Kachel aktiv ist. Der Block liegt als ::before hinter dem Text und
   ragt seitlich über die Kachel hinaus, verschiebt also nichts.
   Muss nach dem Abschnitt HOMEPAGE V2 stehen.
========================================================================== */

.lokanes-home .lokanes-home__moment {
    position: relative;
    z-index: 0;
}

.lokanes-home .lokanes-home__moment::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -16px;
    right: -16px;
    z-index: -1;
    border-radius: 8px;
    background-color: var(--home-copper);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.lokanes-home .lokanes-home__moment-text,
.lokanes-home .lokanes-home__moment-action {
    transition: color 0.25s ease;
}

/* Auf Kupfer wären der graue Text und die kupferne Aktionszeile zu schwach. */
.lokanes-home .lokanes-home__moment:focus-visible::before {
    opacity: 1;
}

.lokanes-home .lokanes-home__moment:focus-visible .lokanes-home__moment-text,
.lokanes-home .lokanes-home__moment:focus-visible .lokanes-home__moment-action {
    color: var(--home-ink);
}

.lokanes-home .lokanes-home__moment:focus-visible .lokanes-home__arrow {
    stroke: currentColor;
}

/* Nur für Geräte mit Maus: auf Touch bliebe die Kachel nach dem Tippen kupfern stehen. */
@media (hover: hover) {
    .lokanes-home .lokanes-home__moment:hover::before {
        opacity: 1;
    }

    .lokanes-home .lokanes-home__moment:hover .lokanes-home__moment-text,
    .lokanes-home .lokanes-home__moment:hover .lokanes-home__moment-action {
        color: var(--home-ink);
    }

    .lokanes-home .lokanes-home__moment:hover .lokanes-home__arrow {
        stroke: currentColor;
    }
}

@media (max-width: 767px) {
    .lokanes-home .lokanes-home__moment::before {
        left: -12px;
        right: -12px;
    }
}

/* --- LOKANES Priority: Hinweis im Direktversand-Kasten (Basisstil in global.css) --- */
.lokanes-home .lokanes-home__shipping .lokanes-priority-hint {
    margin-top: 14px;
    font-size: 14px;
}

@media (max-width: 767px) {
    .lokanes-home .lokanes-home__shipping .lokanes-priority-hint {
        margin-top: 12px;
        font-size: 13.5px;
    }
}