/* =========================================================
   KRAKENEXPLORER – GUTENBERG STARTSEITE
   ========================================================= */

.khg-home {
    overflow: hidden;
}

.khg-wrap {
    width: min(var(--kr-wide), 92%);
    margin-inline: auto;
}


/* =========================================================
   ALLGEMEIN
   ========================================================= */

.khg-home .khg-eyebrow {
    margin: 0 0 14px;

    color: var(--kr-primary);

    font-size: 12px;
    line-height: 1.3;
    font-weight: 850;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.khg-home .khg-section-title {
    margin: 0 0 20px;

    color: var(--kr-deep);

    font-size: clamp(36px, 4.5vw, 56px);
    line-height: 1.03;
    letter-spacing: -1.8px;
}

.khg-home .khg-section-intro {
    max-width: 620px;

    margin: 0 0 35px;

    color: var(--kr-muted);
}


/* =========================================================
   HERO
   ========================================================= */

.khg-hero {
    margin: 0 !important;

    padding: 70px 0;

    background:
        linear-gradient(
            105deg,
            var(--kr-deep) 0%,
            var(--kr-dark) 48%,
            #a9c4cb 100%
        );

    color: #fff;
}

.khg-hero-grid {
    margin: 0 !important;

    align-items: center;
    gap: clamp(45px, 6vw, 90px);
}

.khg-hero-title {
    margin: 0 0 12px;

    color: #fff;

    font-size: clamp(52px, 6vw, 88px);
    line-height: .88;
    letter-spacing: -3.5px;
    font-weight: 900;
}

.khg-hero-subtitle {
    margin: 0 0 18px;

    color: #fff;

    font-size: clamp(27px, 3vw, 42px);
    line-height: 1.05;
    font-weight: 500;
}

.khg-hero-copy {
    max-width: 590px;

    margin: 0;

    color: rgba(255,255,255,.9);

    font-size: 17px;
    line-height: 1.65;
}

.khg-buttons {
    margin-top: 28px;
}

.khg-button .wp-block-button__link {
    padding: 13px 22px;

    border-radius: 999px;

    background: var(--kr-primary);
    color: var(--kr-deep);

    font-size: 11px;
    font-weight: 850;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.khg-button.is-style-outline .wp-block-button__link {
    border: 1px solid rgba(255,255,255,.7);

    background: transparent;
    color: #fff;
}

.khg-hero-image {
    margin: 0 !important;
}

.khg-hero-image img {
    display: block;

    width: 100%;
    max-height: 440px;

    object-fit: cover;

    border-radius: 22px;

    box-shadow:
        0 24px 70px rgba(0,0,0,.18);
}


/* =========================================================
   DREI HAUPTKARTEN
   ========================================================= */

.khg-main-cards {
    padding: 65px 0 75px;

    background: #fff;
}

.khg-card-grid {
    margin: 0 !important;

    gap: 26px;
}

.khg-card-column {
    display: flex;
}

.khg-card {
    width: 100%;

    overflow: hidden;

    border: 1px solid var(--kr-border);
    border-radius: 20px;

    background: var(--kr-deep);

    box-shadow:
        0 14px 40px rgba(3,55,71,.10);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.khg-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 20px 50px rgba(3,55,71,.16);
}

.khg-card-image {
    margin: 0 !important;
}

.khg-card-image img {
    display: block;

    width: 100%;
    height: 230px;

    object-fit: cover;
}

.khg-card-body {
    padding: 26px;
}

.khg-card-body .khg-eyebrow {
    color: var(--kr-primary);
}

.khg-card-title {
    margin: 0 0 12px;

    color: #fff;

    font-size: 30px;
    line-height: 1.02;
}

.khg-card-copy {
    min-height: 50px;

    margin: 0;

    color: rgba(255,255,255,.78);

    font-size: 14px;
    line-height: 1.55;
}

.khg-card-button {
    margin-top: 20px;
}


/* =========================================================
   DAS IST KRAKEN
   ========================================================= */

.khg-kraken {
    padding: 75px 0;

    background:
        linear-gradient(
            135deg,
            var(--kr-deep),
            var(--kr-dark)
        );

    color: rgba(255,255,255,.83);
}

.khg-kraken-grid {
    margin: 0 !important;

    align-items: center;
    gap: clamp(45px, 6vw, 80px);
}

.khg-kraken .khg-section-title {
    color: #fff;
}

.khg-kraken p:not(.khg-eyebrow) {
    color: rgba(255,255,255,.82);
}

.khg-kraken-image {
    margin: 0 !important;
}

.khg-kraken-image img {
    display: block;

    width: 100%;
    max-height: 520px;

    object-fit: cover;

    border-radius: 22px;
}

.khg-spec-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    margin: 30px 0;
}

.khg-spec {
    padding: 16px;

    border: 1px solid rgba(85,181,193,.35);
    border-radius: 12px;

    background: rgba(255,255,255,.035);
}

.khg-spec-value {
    margin: 0 0 5px !important;

    color: var(--kr-primary) !important;

    font-size: 19px;
}

.khg-spec-label {
    margin: 0 !important;

    color: rgba(255,255,255,.65) !important;

    font-size: 10px !important;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* =========================================================
   RATGEBER
   ========================================================= */

.khg-guides-section {
    padding: 75px 0;

    background: #fff;
}

.khg-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 14px;
}

.khg-guide {
    padding: 28px;

    border: 1px solid var(--kr-border);
    border-radius: 16px;

    background: var(--kr-soft);
}

.khg-guide-icon {
    min-height: 32px;

    margin: 0 0 15px;

    color: var(--kr-primary);

    font-size: 27px;
}

.khg-guide-title {
    margin: 0 0 8px;

    color: var(--kr-dark);

    font-size: 19px;
}

.khg-guide-copy {
    margin: 0;

    color: var(--kr-muted);

    font-size: 14px;
    line-height: 1.55;
}


/* =========================================================
   ÜBER UNS
   ========================================================= */

.khg-about {
    padding: 75px 0;

    background: var(--kr-soft);
}

.khg-about-grid {
    margin: 0 !important;

    align-items: center;
    gap: clamp(45px, 6vw, 80px);
}

.khg-about-image {
    margin: 0 !important;
}

.khg-about-image img {
    display: block;

    width: 100%;
    max-height: 520px;

    object-fit: cover;

    border-radius: 22px;
}

.khg-about-copy p:not(.khg-eyebrow) {
    color: var(--kr-muted);
}


/* =========================================================
   CTA
   ========================================================= */

.khg-cta {
    padding: 72px 0;

    background: var(--kr-deep);

    text-align: center;
}

.khg-cta-inner {
    max-width: 900px;
}

.khg-cta-title {
    margin: 0 auto 14px;

    color: #fff;

    font-size: clamp(42px, 5vw, 65px);
    line-height: 1.02;
    letter-spacing: -2px;
}

.khg-cta-copy {
    margin: 0 auto;

    color: rgba(255,255,255,.72);
}

.khg-cta-buttons {
    justify-content: center;

    margin-top: 26px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .khg-hero-grid,
    .khg-kraken-grid,
    .khg-about-grid {
        gap: 35px;
    }

    .khg-card-image img {
        height: 190px;
    }

    .khg-guide-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .khg-spec-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .khg-wrap {
        width: 88%;
    }

    .khg-hero {
        padding: 48px 0;
    }

    .khg-hero-grid,
    .khg-card-grid,
    .khg-kraken-grid,
    .khg-about-grid {
        display: block;
    }

    .khg-hero-media,
    .khg-kraken-media,
    .khg-about-media {
        margin-top: 35px;
    }

    .khg-hero-title {
        font-size: 49px;
        letter-spacing: -2px;
    }

    .khg-hero-image img {
        max-height: none;
    }

    .khg-card-column + .khg-card-column {
        margin-top: 22px;
    }

    .khg-card-image img {
        height: auto;
        max-height: 300px;
    }

    .khg-main-cards,
    .khg-kraken,
    .khg-guides-section,
    .khg-about {
        padding: 50px 0;
    }

    .khg-guide-grid {
        grid-template-columns: 1fr;
    }

    .khg-spec-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .khg-about-grid {
        display: flex;
        flex-direction: column;
    }

    .khg-about-media {
        order: 1;
    }

    .khg-about-copy {
        order: 2;
    }

    .khg-cta {
        padding: 55px 0;
    }
}

/* =========================================================
   FINAL FEINSCHLIFF STARTSEITE
   ========================================================= */


/* ---------------------------------------------------------
   RATGEBER SEKTION
   kompakter und näher am alten Layout
   --------------------------------------------------------- */

.khg-guides-section {
    padding-top: 66px;
    padding-bottom: 72px;
}

.khg-guides-section .khg-wrap {
    max-width: 1080px;
}

.khg-guides-section .khg-section-title {
    max-width: 760px;
    margin-bottom: 14px;
}

.khg-guides-section .khg-section-intro {
    max-width: 600px;
    margin-bottom: 32px;
}

.khg-guide-grid {
    gap: 12px;
}

.khg-guide {
    position: relative;

    min-height: 160px;

    display: flex;
    flex-direction: column;

    padding: 24px;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
}

.khg-guide:hover {
    transform: translateY(-3px);

    border-color: var(--kr-primary);

    background: #fff;

    box-shadow:
        0 12px 32px rgba(3,55,71,.08);
}

.khg-guide-icon {
    min-height: 28px;
    margin-bottom: 12px;
}

.khg-guide-title {
    margin-bottom: 6px;
}

.khg-guide-copy {
    margin-bottom: 14px;
}

.khg-guide-link {
    margin-top: auto !important;
    margin-bottom: 0 !important;
}

.khg-guide-link a {
    color: var(--kr-dark);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.khg-guide-link a:hover {
    color: var(--kr-primary);
}


/* ---------------------------------------------------------
   "DAS IST KRAKEN"
   optisch etwas kompakter
   --------------------------------------------------------- */

.khg-kraken {
    padding-top: 68px;
    padding-bottom: 68px;
}

.khg-kraken-grid {
    gap: 52px;
}

.khg-spec-grid {
    margin-top: 24px;
    margin-bottom: 24px;
}


/* ---------------------------------------------------------
   ÜBER UNS
   --------------------------------------------------------- */

.khg-about {
    padding-top: 68px;
    padding-bottom: 68px;
}

.khg-about-grid {
    gap: 50px;
}

.khg-about-copy {
    max-width: 560px;
}

.khg-about-copy .khg-section-title {
    margin-bottom: 16px;
}


/* ---------------------------------------------------------
   HAUPTKARTEN
   --------------------------------------------------------- */

.khg-main-cards {
    padding-top: 58px;
    padding-bottom: 68px;
}

.khg-card-grid {
    align-items: stretch;
}

.khg-card-column {
    align-items: stretch;
}

.khg-card {
    display: flex;
    flex-direction: column;
}

.khg-card-body {
    flex: 1;

    display: flex;
    flex-direction: column;
}

.khg-card-button {
    margin-top: auto;
    padding-top: 18px;
}


/* ---------------------------------------------------------
   DESKTOP BREITEN
   --------------------------------------------------------- */

@media (min-width: 1200px) {

    .khg-guides-section .khg-wrap,
    .khg-about .khg-wrap,
    .khg-kraken .khg-wrap {
        width: min(1100px, 92%);
    }
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .khg-guide {
        min-height: 150px;
    }

    .khg-guides-section,
    .khg-about,
    .khg-kraken {
        padding-top: 58px;
        padding-bottom: 58px;
    }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .khg-guide {
        min-height: auto;
    }

    .khg-guide-grid {
        gap: 14px;
    }

    .khg-guides-section .khg-section-title {
        font-size: 34px;
    }
}

/* =========================================================
   GUIDE-KARTEN – FINAL KLICKBAR
   ========================================================= */

.khg-guide-clickable {
    position: relative;
    cursor: pointer;
}

.khg-guide-clickable .khg-guide-buttons {
    margin-top: auto;
    padding-top: 15px;
}

.khg-guide-clickable .khg-guide-button {
    margin: 0;
}

.khg-guide-clickable
.khg-guide-button
.wp-block-button__link {

    padding: 0;

    border: 0;

    background: transparent;
    color: var(--kr-dark);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.khg-guide-clickable
.khg-guide-button
.wp-block-button__link::after {

    content: "";

    position: absolute;
    inset: 0;

    z-index: 5;

    border-radius: 16px;
}

.khg-guide-clickable:hover {
    border-color: var(--kr-primary);

    background: #fff;

    transform: translateY(-3px);

    box-shadow:
        0 12px 32px rgba(3,55,71,.09);
}


/* Wissen-Sektion etwas dichter */
.khg-guides-section {
    padding-top: 62px;
    padding-bottom: 68px;
}

.khg-guides-section .khg-wrap {
    width: min(1100px, 92%);
}

.khg-guide {
    min-height: 178px;

    display: flex;
    flex-direction: column;
}


/* Über uns kompakter */
.khg-about {
    padding-top: 62px;
    padding-bottom: 62px;
}

.khg-about-grid {
    gap: 48px;
}

.khg-about-image img {
    max-height: 460px;
}


/* Kraken-Bereich kompakter */
.khg-kraken {
    padding-top: 64px;
    padding-bottom: 64px;
}

.khg-kraken-image img {
    max-height: 460px;
}

@media (max-width: 700px) {

    .khg-guide {
        min-height: 0;
    }
}

/* =========================================================
   RATGEBER-KARTEN – FINAL KOMPLETT KLICKBAR
   ========================================================= */

/*
 * Der Gutenberg-Button bleibt im Editor erhalten.
 * Im Frontend wird sein Link über die komplette Karte gelegt.
 */

.khg-guide:has(.khg-guide-button) {
    position: relative;
    cursor: pointer;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
}

.khg-guide:has(.khg-guide-button):hover {
    transform: translateY(-3px);

    border-color: var(--kr-primary);

    background: #ffffff;

    box-shadow:
        0 14px 34px rgba(3,55,71,.10);
}


/* Link-Container nimmt keinen sichtbaren Platz ein */

.khg-guide:has(.khg-guide-button) .khg-guide-buttons {
    position: static;

    width: 0;
    height: 0;

    margin: 0 !important;
    padding: 0 !important;
}


/* Gutenberg Button selbst unsichtbar */

.khg-guide:has(.khg-guide-button) .khg-guide-button {
    position: static;

    width: 0;
    height: 0;

    margin: 0 !important;
}


/* Echter <a>-Link wird über die gesamte Karte gespannt */

.khg-guide:has(.khg-guide-button)
.khg-guide-button
.wp-block-button__link {

    position: static;

    width: 0;
    height: 0;

    overflow: hidden;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;

    background: transparent !important;

    font-size: 0;
    line-height: 0;
}


/* Das ist der eigentliche Klickbereich */

.khg-guide:has(.khg-guide-button)
.khg-guide-button
.wp-block-button__link::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 10;

    display: block;

    border-radius: 16px;
}


/* Inhalt bleibt unterhalb des Klicklayers sichtbar */

.khg-guide-icon,
.khg-guide-title,
.khg-guide-copy {
    position: relative;
    z-index: 1;
}


/* =========================================================
   WISSEN & ERFAHRUNGEN – FEINPOSITION
   ========================================================= */

.khg-guides-section {
    padding-top: 64px;
    padding-bottom: 68px;
}

.khg-guides-section > .khg-wrap,
.khg-guides-section .khg-wrap {
    width: min(1100px, 92%);
    margin-left: auto;
    margin-right: auto;
}

.khg-guides-section .khg-eyebrow {
    margin-bottom: 12px;
}

.khg-guides-section .khg-section-title {
    max-width: 780px;

    margin-top: 0;
    margin-bottom: 14px;

    font-size: clamp(36px, 4vw, 50px);
}

.khg-guides-section .khg-section-intro {
    max-width: 600px;

    margin-bottom: 30px;
}

.khg-guide-grid {
    gap: 14px;

    margin-top: 0;
}

.khg-guide {
    min-height: 160px;

    padding: 24px;
}


/* =========================================================
   ÜBER UNS – ABSTÄNDE ANGLEICHEN
   ========================================================= */

.khg-about {
    padding-top: 64px;
    padding-bottom: 64px;
}

.khg-about .khg-wrap {
    width: min(1100px, 92%);
}

.khg-about-grid {
    gap: 48px;
    align-items: center;
}

.khg-about-image img {
    max-height: 450px;

    object-fit: cover;
}


/* =========================================================
   KRAKEN – ABSTÄNDE ANGLEICHEN
   ========================================================= */

.khg-kraken {
    padding-top: 64px;
    padding-bottom: 64px;
}

.khg-kraken .khg-wrap {
    width: min(1100px, 92%);
}

.khg-kraken-grid {
    gap: 50px;
}

.khg-kraken-image img {
    max-height: 450px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .khg-guides-section,
    .khg-about,
    .khg-kraken {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .khg-guide {
        min-height: 0;
    }

    .khg-guides-section .khg-section-title {
        font-size: 34px;
    }
}

/* =========================================================
   KRAKEN SPECS – GLEICHE HÖHE
   ========================================================= */

.khg-spec-grid {
    align-items: stretch;
}

.khg-spec {
    min-height: 74px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding-top: 12px;
    padding-bottom: 12px;
}

.khg-spec-value {
    margin-top: 0 !important;
    margin-bottom: 4px !important;

    line-height: 1.05;
}

.khg-spec-label {
    margin: 0 !important;

    line-height: 1.1;
}

/* =========================================================
   RATGEBER GRID – FINALER FRONTEND FIX
   ---------------------------------------------------------
   Gutenberg hält die Link-Buttons weiter im Editor.
   Im Frontend werden sie aus dem sichtbaren Grid genommen.
   ========================================================= */

.home .khg-guide-grid {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 14px !important;

    align-items: stretch !important;
}


/*
 * Die sechs Gutenberg-Linkblöcke bleiben im Editor bestehen,
 * werden aber auf der echten Startseite nicht angezeigt.
 */

.home .khg-guide-grid > .wp-block-buttons {
    display: none !important;
}


/*
 * Karten selbst sauber im 3x2 Raster.
 */

.home .khg-guide-grid > .khg-guide {
    position: relative;

    display: flex !important;
    flex-direction: column;

    width: 100% !important;
    min-width: 0 !important;

    min-height: 160px;

    margin: 0 !important;

    box-sizing: border-box;

    cursor: pointer;
}


/*
 * Alten Overlay-Versuch neutralisieren.
 */

.home .khg-guide
.khg-guide-button
.wp-block-button__link::after {

    content: none !important;
}


/*
 * Hover für die ganze Karte.
 */

.home .khg-guide-grid > .khg-guide:hover {
    transform: translateY(-3px);

    border-color: var(--kr-primary);

    background: #fff;

    box-shadow:
        0 12px 32px rgba(3,55,71,.10);
}


/*
 * Tastaturfokus.
 */

.home .khg-guide-grid > .khg-guide:focus-visible {
    outline: 3px solid var(--kr-primary);
    outline-offset: 3px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .home .khg-guide-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 600px) {

    .home .khg-guide-grid {
        grid-template-columns: 1fr !important;
    }

    .home .khg-guide-grid > .khg-guide {
        min-height: 0;
    }
}

/* =========================================================
   KRAKEN DATENFELDER – FINAL GLEICHE HÖHE
   ========================================================= */

.khg-spec-grid {
    align-items: stretch !important;
    grid-auto-rows: 78px;
}

.khg-spec-grid > .khg-spec {
    box-sizing: border-box;

    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;

    margin: 0 !important;

    padding: 12px 16px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    gap: 4px !important;
}


/* Gutenberg-Standardabstände innerhalb der Karten ausschalten */

.khg-spec-grid > .khg-spec > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* Wert */

.khg-spec-grid .khg-spec-value {
    margin: 0 !important;

    padding: 0 !important;

    line-height: 1.05 !important;
}


/* Bezeichnung */

.khg-spec-grid .khg-spec-label {
    margin: 0 !important;

    padding: 0 !important;

    line-height: 1.05 !important;
}


/* Auch Gutenberg Flow-Gap innerhalb der Gruppe neutralisieren */

.khg-spec-grid
.khg-spec.is-layout-flow
> * + * {
    margin-block-start: 4px !important;
}

/* =========================================================
   KRAKEN WOMO-BILD – MITTIG IN DER RECHTEN SPALTE
   ========================================================= */

.khg-kraken-media {
    display: flex;
    justify-content: center;
    align-items: center;
}

.khg-kraken-image {
    width: 100%;
    max-width: 520px;

    margin-left: auto !important;
    margin-right: auto !important;
}

.khg-kraken-image img {
    display: block;

    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   HERO – BILD RECHTS MIT LINKEM FADE / AUSWASCH-EFFEKT
   ========================================================= */

.khg-hero {
    position: relative;
    overflow: hidden;
}

.khg-hero-media {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.khg-hero-image,
.khg-hero-media figure,
.khg-hero-media .wp-block-image {
    position: relative;
    z-index: 1;
    margin: 0;
}

.khg-hero-image img,
.khg-hero-media img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 24px;
}

/*
 * Verlauf von links (dunkel) nach rechts (transparent),
 * damit das Bild weich in den Hero-Hintergrund übergeht.
 */
.khg-hero-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(4, 75, 97, 0.98) 0%,
            rgba(4, 75, 97, 0.92) 10%,
            rgba(4, 75, 97, 0.78) 22%,
            rgba(4, 75, 97, 0.52) 34%,
            rgba(4, 75, 97, 0.24) 48%,
            rgba(4, 75, 97, 0.08) 60%,
            rgba(4, 75, 97, 0.00) 74%
        );
}

/*
 * Optional noch leichter Gesamtverlauf über den Hero,
 * damit links/rechts harmonischer zusammenlaufen.
 */
.khg-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(3, 55, 71, 0.18) 0%,
            rgba(3, 55, 71, 0.10) 30%,
            rgba(85, 181, 193, 0.06) 100%
        );
}

.khg-hero > * {
    position: relative;
    z-index: 1;
}

/* Mobile: Verlauf etwas dezenter */
@media (max-width: 900px) {
    .khg-hero-media::before {
        background:
            linear-gradient(
                180deg,
                rgba(4, 75, 97, 0.22) 0%,
                rgba(4, 75, 97, 0.10) 22%,
                rgba(4, 75, 97, 0.00) 55%
            );
    }
}

/* =========================================================
   HERO – PROFESSIONELLER BILDÜBERGANG
   ---------------------------------------------------------
   Kein farbiges Overlay mehr.
   Stattdessen wird das Bild selbst links transparent.
   Dadurch läuft es direkt in den Hero-Hintergrund aus.
   ========================================================= */


/* Alten Overlay-Effekt komplett abschalten */

.khg-hero-media::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

.khg-hero::after {
    content: none !important;
    display: none !important;
    background: none !important;
}


/* Bildbereich */

.khg-hero-media {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: visible !important;
}


/* Gutenberg Figure */

.khg-hero-media .wp-block-image,
.khg-hero-image {
    position: relative;

    width: 100%;
    max-width: 590px;

    margin: 0 !important;

    overflow: hidden;

    border-radius: 24px;
}


/*
 * DAS ist der eigentliche Effekt:
 * linke Bildkante transparent,
 * danach sehr weich bis zum normalen Bild.
 */

.khg-hero-media img,
.khg-hero-image img {

    display: block;

    width: 100%;
    height: auto;

    margin: 0;

    border-radius: 24px;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.08) 5%,
            rgba(0,0,0,.22) 10%,
            rgba(0,0,0,.48) 17%,
            rgba(0,0,0,.75) 25%,
            rgba(0,0,0,.94) 34%,
            #000 43%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.08) 5%,
            rgba(0,0,0,.22) 10%,
            rgba(0,0,0,.48) 17%,
            rgba(0,0,0,.75) 25%,
            rgba(0,0,0,.94) 34%,
            #000 43%,
            #000 100%
        );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}


/*
 * Ganz dezenter Tiefeneffekt nur rechts/unten.
 * Keine sichtbare Box hinter dem Bild.
 */

.khg-hero-media .wp-block-image {
    filter:
        drop-shadow(
            0 18px 28px rgba(3,55,71,.12)
        );
}


/*
 * Hero-Spalten etwas harmonischer zusammenziehen.
 */

.khg-hero-grid {
    column-gap: clamp(20px, 3.5vw, 55px) !important;
}


/*
 * Bild darf etwas in Richtung Text laufen.
 * Dadurch entsteht genau dieser ineinanderlaufende Look.
 */

@media (min-width: 901px) {

    .khg-hero-media {
        margin-left: -28px;
    }

}


/* =========================================================
   TABLET / MOBILE
   ---------------------------------------------------------
   Dort kein seitlicher Fade, weil Bild unter dem Text steht.
   ========================================================= */

@media (max-width: 900px) {

    .khg-hero-media {
        margin-left: 0;
    }

    .khg-hero-media img,
    .khg-hero-image img {

        -webkit-mask-image: none !important;
        mask-image: none !important;

        border-radius: 20px;
    }

}

/* =========================================================
   HERO – FINAL TUNING
   Größeres Bild + deutlich weniger Bildverlust links
   ========================================================= */


/* Bildbereich etwas breiter und höher */

.khg-hero-media .wp-block-image,
.khg-hero-image {
    width: 100%;

    max-width: 650px;

    margin: 0 !important;

    border-radius: 24px;
}


/* Bild vertikal deutlich größer */

.khg-hero-media img,
.khg-hero-image img {
    width: 100%;

    height: 355px !important;

    object-fit: cover;

    object-position: center center;

    border-radius: 24px;


    /*
     * Weniger aggressiver Fade:
     *
     * nur ganz links stark transparent,
     * bereits nach ca. 25 % fast vollständig sichtbar.
     */

    -webkit-mask-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,.08) 0%,
            rgba(0,0,0,.28) 5%,
            rgba(0,0,0,.55) 10%,
            rgba(0,0,0,.78) 16%,
            rgba(0,0,0,.94) 22%,
            #000 28%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,.08) 0%,
            rgba(0,0,0,.28) 5%,
            rgba(0,0,0,.55) 10%,
            rgba(0,0,0,.78) 16%,
            rgba(0,0,0,.94) 22%,
            #000 28%,
            #000 100%
        );

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}


/*
 * Bild minimal weiter nach links,
 * damit Text + Foto stärker zusammengehören.
 */

@media (min-width: 901px) {

    .khg-hero-media {
        margin-left: -40px;
    }

}


/* Tablet / Smartphone */

@media (max-width: 900px) {

    .khg-hero-media {
        margin-left: 0;
    }

    .khg-hero-media img,
    .khg-hero-image img {
        height: auto !important;

        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

}

/* =========================================================
   HERO – BILD VON EYEBROW BIS BUTTONS
   ========================================================= */

@media (min-width: 901px) {

    /*
     * Beide Hero-Spalten bekommen dieselbe Höhe.
     */
    .khg-hero-grid {
        align-items: stretch !important;
    }


    /*
     * Linke Textspalte bestimmt durch ihren Inhalt die Höhe.
     */
    .khg-hero-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }


    /*
     * Rechte Spalte zieht sich auf exakt dieselbe Höhe.
     */
    .khg-hero-media {
        align-self: stretch !important;

        display: flex !important;
        align-items: stretch !important;
        justify-content: center !important;

        margin-left: -40px;
    }


    /*
     * Figure nimmt die komplette verfügbare Höhe ein.
     */
    .khg-hero-media .wp-block-image,
    .khg-hero-image {
        width: 100%;
        max-width: 650px;

        height: 100% !important;
        min-height: 390px;

        margin: 0 !important;

        overflow: hidden;

        border-radius: 24px;
    }


    /*
     * Bild selbst füllt diese Fläche komplett aus.
     */
    .khg-hero-media img,
    .khg-hero-image img {
        display: block;

        width: 100% !important;
        height: 100% !important;

        min-height: 390px;

        object-fit: cover;
        object-position: center center;

        border-radius: 24px;


        /*
         * Fade bleibt, aber nur links.
         * Mehr vom eigentlichen Foto bleibt sichtbar.
         */
        -webkit-mask-image:
            linear-gradient(
                90deg,
                rgba(0,0,0,.12) 0%,
                rgba(0,0,0,.38) 5%,
                rgba(0,0,0,.68) 11%,
                rgba(0,0,0,.88) 17%,
                rgba(0,0,0,.98) 22%,
                #000 27%,
                #000 100%
            );

        mask-image:
            linear-gradient(
                90deg,
                rgba(0,0,0,.12) 0%,
                rgba(0,0,0,.38) 5%,
                rgba(0,0,0,.68) 11%,
                rgba(0,0,0,.88) 17%,
                rgba(0,0,0,.98) 22%,
                #000 27%,
                #000 100%
            );

        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;

        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

}


/* =========================================================
   TABLET / HANDY
   ========================================================= */

@media (max-width: 900px) {

    .khg-hero-grid {
        align-items: initial !important;
    }

    .khg-hero-media {
        margin-left: 0;
    }

    .khg-hero-media .wp-block-image,
    .khg-hero-image {
        height: auto !important;
        min-height: 0;
    }

    .khg-hero-media img,
    .khg-hero-image img {
        width: 100% !important;
        height: auto !important;
        min-height: 0;

        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

}

/* =========================================================
   HERO – FINAL CROP + SOFTER LEFT FADE
   ========================================================= */

@media (min-width: 901px) {

    /*
     * Bildausschnitt:
     * Mehr vom rechten Bereich / Wohnmobil zeigen,
     * damit vorne/rechts weniger abgeschnitten wirkt.
     */
    .khg-hero-media img,
    .khg-hero-image img,
    .kh-hero-photo img {
        object-position: 74% center !important;
    }


    /*
     * Übergang links breiter und weicher machen.
     * Der Fade zieht sich weiter nach rechts,
     * damit links ca. ~50px mehr weich auslaufen.
     */
    .khg-hero-media img,
    .khg-hero-image img,
    .kh-hero-photo img {
        -webkit-mask-image:
            linear-gradient(
                90deg,
                rgba(0,0,0,0.00) 0%,
                rgba(0,0,0,0.08) 6%,
                rgba(0,0,0,0.18) 12%,
                rgba(0,0,0,0.35) 18%,
                rgba(0,0,0,0.58) 24%,
                rgba(0,0,0,0.78) 30%,
                rgba(0,0,0,0.92) 35%,
                rgba(0,0,0,0.98) 39%,
                #000 43%,
                #000 100%
            ) !important;

        mask-image:
            linear-gradient(
                90deg,
                rgba(0,0,0,0.00) 0%,
                rgba(0,0,0,0.08) 6%,
                rgba(0,0,0,0.18) 12%,
                rgba(0,0,0,0.35) 18%,
                rgba(0,0,0,0.58) 24%,
                rgba(0,0,0,0.78) 30%,
                rgba(0,0,0,0.92) 35%,
                rgba(0,0,0,0.98) 39%,
                #000 43%,
                #000 100%
            ) !important;

        -webkit-mask-size: 100% 100% !important;
        mask-size: 100% 100% !important;
        -webkit-mask-repeat: no-repeat !important;
        mask-repeat: no-repeat !important;
    }


    /*
     * Optional minimal näher an den Text,
     * damit der Übergang hochwertiger wirkt.
     */
    .khg-hero-media,
    .kh-hero-photo {
        margin-left: -18px !important;
    }
}

/* =========================================================
   HERO – LINKS MEHR BILD SICHTBAR
   Feintuning: linker Fade etwas schwächer
   ========================================================= */

@media (min-width: 901px) {

    .khg-hero-media img,
    .khg-hero-image img,
    .kh-hero-photo img {
        -webkit-mask-image:
            linear-gradient(
                90deg,
                rgba(0,0,0,0.00) 0%,
                rgba(0,0,0,0.10) 4%,
                rgba(0,0,0,0.22) 8%,
                rgba(0,0,0,0.40) 12%,
                rgba(0,0,0,0.62) 17%,
                rgba(0,0,0,0.80) 22%,
                rgba(0,0,0,0.92) 27%,
                rgba(0,0,0,0.98) 31%,
                #000 35%,
                #000 100%
            ) !important;

        mask-image:
            linear-gradient(
                90deg,
                rgba(0,0,0,0.00) 0%,
                rgba(0,0,0,0.10) 4%,
                rgba(0,0,0,0.22) 8%,
                rgba(0,0,0,0.40) 12%,
                rgba(0,0,0,0.62) 17%,
                rgba(0,0,0,0.80) 22%,
                rgba(0,0,0,0.92) 27%,
                rgba(0,0,0,0.98) 31%,
                #000 35%,
                #000 100%
            ) !important;
    }
}

/* =========================================================
   HERO – LINKS MEHR FOTO SICHTBAR
   Feintuning: linker Fade etwas kürzer
   ========================================================= */

@media (min-width: 901px) {

    .khg-hero-media img,
    .khg-hero-image img,
    .kh-hero-photo img {
        -webkit-mask-image:
            linear-gradient(
                90deg,
                rgba(0,0,0,0.00) 0%,
                rgba(0,0,0,0.10) 3%,
                rgba(0,0,0,0.22) 6%,
                rgba(0,0,0,0.40) 10%,
                rgba(0,0,0,0.62) 14%,
                rgba(0,0,0,0.80) 18%,
                rgba(0,0,0,0.92) 22%,
                rgba(0,0,0,0.98) 25%,
                #000 28%,
                #000 100%
            ) !important;

        mask-image:
            linear-gradient(
                90deg,
                rgba(0,0,0,0.00) 0%,
                rgba(0,0,0,0.10) 3%,
                rgba(0,0,0,0.22) 6%,
                rgba(0,0,0,0.40) 10%,
                rgba(0,0,0,0.62) 14%,
                rgba(0,0,0,0.80) 18%,
                rgba(0,0,0,0.92) 22%,
                rgba(0,0,0,0.98) 25%,
                #000 28%,
                #000 100%
            ) !important;
    }
}

/* =========================================================
   HERO – FINALER WEICHER FOTO-ÜBERGANG
   Ziel:
   - links keinen harten Bildanfang mehr sehen
   - rechter Bereich mit Wohnmobil bleibt sichtbar
   - Übergang deutlich weicher und breiter
   ========================================================= */

@media (min-width: 901px) {

    .khg-hero-media img,
    .khg-hero-image img,
    .kh-hero-photo img {
        object-fit: cover !important;
        object-position: 74% center !important;

        -webkit-mask-image:
            linear-gradient(
                90deg,
                rgba(0,0,0,0.00) 0%,
                rgba(0,0,0,0.00) 6%,
                rgba(0,0,0,0.06) 10%,
                rgba(0,0,0,0.14) 14%,
                rgba(0,0,0,0.24) 18%,
                rgba(0,0,0,0.36) 22%,
                rgba(0,0,0,0.50) 26%,
                rgba(0,0,0,0.66) 30%,
                rgba(0,0,0,0.80) 34%,
                rgba(0,0,0,0.90) 38%,
                rgba(0,0,0,0.97) 42%,
                #000 46%,
                #000 100%
            ) !important;

        mask-image:
            linear-gradient(
                90deg,
                rgba(0,0,0,0.00) 0%,
                rgba(0,0,0,0.00) 6%,
                rgba(0,0,0,0.06) 10%,
                rgba(0,0,0,0.14) 14%,
                rgba(0,0,0,0.24) 18%,
                rgba(0,0,0,0.36) 22%,
                rgba(0,0,0,0.50) 26%,
                rgba(0,0,0,0.66) 30%,
                rgba(0,0,0,0.80) 34%,
                rgba(0,0,0,0.90) 38%,
                rgba(0,0,0,0.97) 42%,
                #000 46%,
                #000 100%
            ) !important;
    }
}

/* =========================================================
   HERO LIVE SEARCH
   ========================================================= */

.khg-live-search {
    position: relative;

    width: min(100%, 590px);

    margin-top: 22px !important;
    margin-bottom: 0 !important;

    z-index: 50;
}


/* Suchformular */

.khg-live-search
.wp-block-search__inside-wrapper {
    position: relative;

    display: flex;

    min-height: 52px;

    padding: 5px;

    border:
        1px solid rgba(255,255,255,.28);

    border-radius: 15px;

    background:
        rgba(255,255,255,.11);

    -webkit-backdrop-filter:
        blur(14px);

    backdrop-filter:
        blur(14px);

    box-shadow:
        0 12px 35px
        rgba(3,55,71,.13);

    transition:
        border-color 170ms ease,
        background 170ms ease,
        box-shadow 170ms ease;
}


.khg-live-search:focus-within
.wp-block-search__inside-wrapper {
    border-color:
        rgba(85,181,193,.95);

    background:
        rgba(255,255,255,.17);

    box-shadow:
        0 14px 42px
        rgba(3,55,71,.19);
}


/* Eingabefeld */

.khg-live-search
.wp-block-search__input {
    min-width: 0;

    padding:
        0 15px !important;

    border: 0 !important;

    outline: 0 !important;

    background:
        transparent !important;

    color: #fff !important;

    font-size: 15px;

    box-shadow:
        none !important;
}


.khg-live-search
.wp-block-search__input::placeholder {
    color:
        rgba(255,255,255,.70);

    opacity: 1;
}


/* Suchbutton */

.khg-live-search
.wp-block-search__button {
    width: 43px;
    height: 42px;

    flex: 0 0 43px;

    margin: 0 !important;
    padding: 0 !important;

    display: grid;
    place-items: center;

    border: 0 !important;
    border-radius: 11px;

    background:
        var(--kr-primary) !important;

    color:
        var(--kr-deep) !important;

    cursor: pointer;

    transition:
        transform 160ms ease,
        background 160ms ease;
}


.khg-live-search
.wp-block-search__button:hover {
    transform:
        translateY(-1px);

    background:
        #6bc4ce !important;
}


.khg-live-search
.wp-block-search__button svg {
    width: 19px;
    height: 19px;
}


/* =========================================================
   LIVE RESULT DROPDOWN
   ========================================================= */

.kr-live-search-results {
    position: absolute;

    top: calc(100% + 8px);
    left: 0;
    right: 0;

    overflow: hidden;

    visibility: hidden;
    opacity: 0;

    transform:
        translateY(-5px);

    border:
        1px solid rgba(3,55,71,.10);

    border-radius: 16px;

    background:
        rgba(255,255,255,.985);

    box-shadow:
        0 24px 60px
        rgba(3,55,71,.22);

    transition:
        opacity 150ms ease,
        transform 150ms ease,
        visibility 150ms ease;

    z-index: 9999;
}


.kr-live-search-results.kr-search-open {
    visibility: visible;
    opacity: 1;

    transform:
        translateY(0);
}


/* Treffer */

.kr-search-result {
    position: relative;

    display: flex;
    align-items: center;

    gap: 13px;

    min-height: 70px;

    padding:
        11px 15px;

    border-bottom:
        1px solid var(--kr-border);

    color:
        var(--kr-deep);

    text-decoration: none;

    transition:
        background 140ms ease;
}


.kr-search-result:last-child {
    border-bottom: 0;
}


.kr-search-result:hover,
.kr-search-result.kr-search-active {
    background:
        var(--kr-soft);
}


/* Icon */

.kr-search-result-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background:
        rgba(85,181,193,.12);

    color:
        var(--kr-primary);

    font-size: 17px;
}


/* Text */

.kr-search-result-copy {
    min-width: 0;

    flex: 1;
}


.kr-search-result-title {
    display: block;

    overflow: hidden;

    color:
        var(--kr-deep);

    font-size: 13px;
    font-weight: 800;

    line-height: 1.3;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.kr-search-result-type {
    display: block;

    margin-top: 3px;

    color:
        var(--kr-muted);

    font-size: 10px;
    font-weight: 650;

    text-transform: uppercase;
    letter-spacing: .6px;
}


.kr-search-result-arrow {
    color:
        var(--kr-primary);

    font-size: 17px;
}


/* Loading / leer */

.kr-search-message {
    padding:
        17px;

    color:
        var(--kr-muted);

    font-size: 12px;

    text-align: center;
}


/* Footer innerhalb Dropdown */

.kr-search-all {
    display: block;

    padding:
        12px 15px;

    background:
        var(--kr-soft);

    color:
        var(--kr-deep);

    font-size: 11px;
    font-weight: 800;

    text-align: center;

    text-decoration: none;
}


.kr-search-all:hover {
    color:
        var(--kr-primary);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .khg-live-search {
        width: 100%;
        max-width: none;

        margin-top: 20px !important;
    }

    .kr-live-search-results {
        position: absolute;
    }

}

/* =========================================================
   LIVE SEARCH – DROPDOWN DARF HERO VERLASSEN
   ========================================================= */

/*
 * Der Hero darf das Ergebnis-Dropdown nicht abschneiden.
 */
.khg-hero {
    position: relative !important;
    overflow: visible !important;
    z-index: 100;
}

.khg-hero-grid,
.khg-hero-text {
    overflow: visible !important;
}


/*
 * Suche über nachfolgenden Bereichen halten.
 */
.khg-live-search {
    position: relative !important;
    z-index: 500 !important;
}

.kr-live-search-results {
    z-index: 99999 !important;
}


/*
 * Nur das eigentliche Hero-Foto bleibt sauber beschnitten.
 * So verändert sich unser Bild/Fade optisch nicht.
 */
.khg-hero-media .wp-block-image,
.khg-hero-image {
    overflow: hidden !important;
}


/*
 * Der nachfolgende Kartenbereich darf sich nicht
 * über das Such-Dropdown legen.
 */
.khg-main-cards,
.khg-card-section,
.khg-home-cards {
    position: relative;
    z-index: 1;
}


/*
 * Ergebnisbox maximal sinnvoll hoch.
 * Bei vielen Treffern scrollt nur die Trefferbox.
 */
.kr-live-search-results {
    max-height: min(430px, 55vh);
    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(85,181,193,.55)
        transparent;
}

.kr-live-search-results::-webkit-scrollbar {
    width: 6px;
}

.kr-live-search-results::-webkit-scrollbar-track {
    background: transparent;
}

.kr-live-search-results::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(85,181,193,.55);
}

/* =========================================================
   HERO SEARCH – PROFESSIONAL POLISH
   ========================================================= */

/*
 * Suchblock als eigener Bereich unter den Buttons
 */

.khg-live-search {
    position: relative !important;

    width: min(100%, 560px) !important;

    margin-top: 28px !important;
    margin-bottom: 0 !important;

    padding-top: 18px;

    z-index: 500 !important;
}


/*
 * Kleine Design-Linie / Label oberhalb
 */

.khg-live-search::before {
    content: "SCHNELL FINDEN";

    display: block;

    margin-bottom: 9px;

    color: var(--kr-primary);

    font-size: 10px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


/*
 * Dezente Linie links vom Label
 */

.khg-live-search::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 34px;
    height: 2px;

    border-radius: 999px;

    background: var(--kr-primary);
}


/* =========================================================
   INPUT WRAPPER
   ========================================================= */

.khg-live-search
.wp-block-search__inside-wrapper {
    min-height: 54px;

    padding: 5px 5px 5px 8px;

    border:
        1px solid rgba(255,255,255,.22);

    border-radius: 16px;

    background:
        rgba(255,255,255,.10);

    box-shadow:
        0 10px 30px
        rgba(3,55,71,.10);

    -webkit-backdrop-filter:
        blur(16px);

    backdrop-filter:
        blur(16px);
}


/*
 * Fokuszustand edler
 */

.khg-live-search:focus-within
.wp-block-search__inside-wrapper {
    border-color:
        rgba(85,181,193,.90);

    background:
        rgba(255,255,255,.14);

    box-shadow:
        0 16px 42px
        rgba(3,55,71,.18);
}


/* =========================================================
   INPUT
   ========================================================= */

.khg-live-search
.wp-block-search__input {
    padding:
        0 14px !important;

    font-size: 14px;

    line-height: 1.2;
}

.khg-live-search
.wp-block-search__input::placeholder {
    color:
        rgba(255,255,255,.62);
}


/* =========================================================
   BUTTON
   ========================================================= */

.khg-live-search
.wp-block-search__button {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    border-radius: 12px;

    background:
        var(--kr-primary) !important;

    box-shadow:
        0 5px 14px
        rgba(3,55,71,.16);
}

.khg-live-search
.wp-block-search__button:hover {
    transform:
        translateY(-1px)
        scale(1.02);
}


/* =========================================================
   RESULTS – FLOATING PANEL
   ========================================================= */

.kr-live-search-results {
    top: calc(100% + 10px);

    border-radius: 17px;

    border:
        1px solid rgba(3,55,71,.10);

    box-shadow:
        0 28px 70px
        rgba(3,55,71,.24);
}


/* Ergebnis etwas kompakter */

.kr-search-result {
    min-height: 64px;

    padding:
        10px 14px;
}

.kr-search-result-icon {
    width: 36px;
    height: 36px;

    flex-basis: 36px;
}

.kr-search-result-title {
    font-size: 12.5px;
}

.kr-search-result-type {
    font-size: 9px;
}


/* =========================================================
   DESKTOP AUSRICHTUNG
   exakt unter linker Hero-Spalte
   ========================================================= */

@media (min-width: 901px) {

    .khg-live-search {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .khg-live-search {
        width: 100% !important;

        margin-top: 24px !important;

        padding-top: 16px;
    }

}