:root {
    --bg: #0c0c0b;
    --bg-soft: #141310;
    --card: #181713;
    --card-hover: #201e18;
    --gold: #c79545;
    --gold-light: #e0b76e;
    --text: #f3efe7;
    --muted: #a9a398;
    --border: rgba(255,255,255,.09);
    --max: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    line-height: 1.65;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: min(var(--max), calc(100% - 40px));
    margin: 0 auto;
}

.site-header {
    position: absolute;
    z-index: 20;
    width: 100%;
    top: 0;
    left: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.header-inner {
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-mark {
    width: 42px;
    height: 42px;
    border: 1px solid var(--gold);
    display: grid;
    place-items: center;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 23px;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    letter-spacing: .12em;
}

.logo-text strong {
    font-size: 15px;
}

.logo-text small {
    color: var(--gold);
    font-size: 10px;
    margin-top: 5px;
}

.main-nav {
    display: flex;
    gap: 32px;
    font-size: 14px;
    color: #d2cdc4;
}

.main-nav a {
    transition: color .2s ease;
}

.main-nav a:hover {
    color: var(--gold-light);
}

.hero {
    min-height: 760px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 78% 52%, rgba(172,105,29,.22), transparent 23%),
        radial-gradient(circle at 73% 55%, rgba(255,174,56,.08), transparent 38%),
        linear-gradient(115deg, #080808 0%, #0e0d0b 52%, #181109 100%);
}

.hero::after {
    content: "";
    position: absolute;
    right: 10%;
    top: 23%;
    width: 230px;
    height: 440px;
    border-radius: 35% 35% 16% 16%;
    border: 1px solid rgba(216,165,83,.18);
    background:
        linear-gradient(90deg, transparent, rgba(255,190,83,.05), transparent);
    box-shadow: 0 0 100px rgba(178,108,27,.12);
    transform: rotate(4deg);
}

.hero-content {
    position: relative;
    z-index: 3;
    padding-top: 80px;
}

.eyebrow {
    color: var(--gold);
    font-size: 12px;
    letter-spacing: .22em;
    font-weight: 700;
}

.hero h1,
.section-heading h2,
.knowledge h2,
.recommendation h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

.hero h1 {
    font-size: clamp(55px, 7vw, 92px);
    line-height: .98;
    letter-spacing: -.045em;
    max-width: 850px;
    margin: 24px 0;
}

.hero h1 span {
    color: var(--gold-light);
    font-style: italic;
}

.hero-copy {
    max-width: 600px;
    color: #bdb7ad;
    font-size: 18px;
}

.hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 35px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 25px;
    border: 1px solid var(--border);
    font-size: 14px;
    font-weight: 650;
    transition: .2s ease;
}

.button-primary {
    background: var(--gold);
    border-color: var(--gold);
    color: #111;
}

.button-primary:hover {
    background: var(--gold-light);
    border-color: var(--gold-light);
}

.button-secondary:hover {
    border-color: var(--gold);
    color: var(--gold-light);
}

.hero-facts {
    display: flex;
    gap: 0;
    margin-top: 65px;
}

.hero-facts div {
    min-width: 190px;
    padding-right: 30px;
    margin-right: 30px;
    border-right: 1px solid var(--border);
}

.hero-facts div:last-child {
    border: 0;
}

.hero-facts strong,
.hero-facts span {
    display: block;
}

.hero-facts strong {
    font-family: Georgia, serif;
    font-size: 20px;
}

.hero-facts span {
    color: var(--muted);
    font-size: 12px;
    margin-top: 5px;
}

.section {
    padding: 110px 0;
}

.section-heading {
    max-width: 720px;
    margin: 0 auto 55px;
    text-align: center;
}

.section-heading.left {
    text-align: left;
    margin-left: 0;
}

.section-heading h2,
.knowledge h2,
.recommendation h2 {
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.08;
    margin: 15px 0;
}

.section-heading p,
.knowledge p,
.recommendation p {
    color: var(--muted);
}

.taste-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.taste-card {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 35px;
    min-height: 330px;
    transition: .25s ease;
}

.taste-card:hover {
    transform: translateY(-5px);
    background: var(--card-hover);
    border-color: rgba(199,149,69,.35);
}

.taste-icon {
    font-size: 32px;
    margin-bottom: 32px;
}

.taste-card > span {
    color: var(--gold);
    font-size: 10px;
    letter-spacing: .18em;
    font-weight: 700;
}

.taste-card h3 {
    font-family: Georgia, serif;
    font-size: 27px;
    font-weight: 400;
    margin: 9px 0;
}

.taste-card p {
    color: var(--muted);
    font-size: 14px;
}

.taste-card a,
.text-link {
    color: var(--gold-light);
    font-size: 13px;
    font-weight: 700;
}

.regions {
    background: #11100e;
}

.region-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--border);
}

.region-card {
    padding: 35px 27px;
    min-height: 290px;
    border-right: 1px solid var(--border);
}

.region-card:last-child {
    border: 0;
}

.region-card > span {
    color: var(--gold);
    font-size: 11px;
}

.region-card h3 {
    font-family: Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    margin: 40px 0 8px;
}

.region-card p {
    color: var(--muted);
    min-height: 75px;
    font-size: 14px;
}

.region-card strong {
    color: var(--gold);
    font-size: 9px;
    letter-spacing: .16em;
}

.knowledge-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
}

.knowledge-box {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 40px;
}

.knowledge-box h3 {
    font-family: Georgia, serif;
    font-size: 23px;
    margin: 5px 0;
}

.knowledge-box p {
    color: var(--muted);
    font-size: 14px;
}

.knowledge-number {
    color: var(--gold);
    font-size: 10px;
    letter-spacing: .15em;
}

.knowledge-box hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 27px 0;
}

.recommendation {
    background:
        radial-gradient(circle at center, rgba(172,105,29,.16), transparent 40%),
        #11100e;
    text-align: center;
}

.recommendation-inner {
    max-width: 760px;
}

.recommendation .button {
    margin-top: 20px;
}

.footer {
    border-top: 1px solid var(--border);
    padding: 50px 0 25px;
    background: #090909;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 15px;
}

.footer-brand p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.footer-links {
    display: flex;
    gap: 25px;
    color: var(--muted);
    font-size: 13px;
}

.copyright {
    border-top: 1px solid var(--border);
    margin-top: 35px;
    padding-top: 20px;
    color: #69655f;
    font-size: 11px;
}

@media (max-width: 850px) {
    .main-nav {
        display: none;
    }

    .hero {
        min-height: 720px;
    }

    .hero::after {
        opacity: .35;
        right: -80px;
    }

    .hero-facts {
        flex-wrap: wrap;
        gap: 25px;
    }

    .hero-facts div {
        min-width: 140px;
    }

    .taste-grid {
        grid-template-columns: 1fr;
    }

    .region-grid {
        grid-template-columns: 1fr 1fr;
    }

    .region-card:nth-child(2) {
        border-right: 0;
    }

    .region-card {
        border-bottom: 1px solid var(--border);
    }

    .knowledge-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
}

@media (max-width: 520px) {
    .container {
        width: min(100% - 28px, var(--max));
    }

    .header-inner {
        height: 72px;
    }

    .hero {
        min-height: 690px;
    }

    .hero h1 {
        font-size: 51px;
    }

    .hero-copy {
        font-size: 16px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-facts {
        margin-top: 45px;
    }

    .hero-facts div {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid var(--border);
        padding-bottom: 15px;
    }

    .section {
        padding: 75px 0;
    }

    .region-grid {
        grid-template-columns: 1fr;
    }

    .region-card {
        border-right: 0;
    }

    .footer-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 30px;
    }

    .footer-links {
        flex-wrap: wrap;
    }
}

/* =========================================================
   WHISKY V2
========================================================= */

.detail-header {
    position: relative;
    background: #0a0a09;
}

.hero-stats {
    display: flex;
    gap: 0;
    margin-top: 60px;
}

.hero-stats div {
    padding-right: 45px;
    margin-right: 45px;
    border-right: 1px solid var(--border);
}

.hero-stats div:last-child {
    border: 0;
}

.hero-stats strong {
    display: block;
    font-family: Georgia, serif;
    color: var(--gold-light);
    font-size: 34px;
    font-weight: 400;
}

.hero-stats span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.filter-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 40px;
}

.filter {
    appearance: none;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    padding: 10px 18px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    transition: .2s;
}

.filter:hover,
.filter.active {
    background: var(--gold);
    border-color: var(--gold);
    color: #111;
}

.whisky-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.whisky-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--card);
    border: 1px solid var(--border);
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.whisky-card:hover {
    transform: translateY(-6px);
    border-color: rgba(199,149,69,.5);
    background: var(--card-hover);
}

.whisky-card.hidden {
    display: none;
}

.card-image {
    position: relative;
    height: 360px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(197,149,69,.11), transparent 42%),
        #100f0d;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 25px;
}

.age-badge {
    position: absolute;
    z-index: 5;
    right: 17px;
    top: 17px;
    padding: 6px 9px;
    background: rgba(8,8,8,.75);
    border: 1px solid var(--border);
    color: var(--gold-light);
    font-size: 10px;
    letter-spacing: .08em;
}

.card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 26px;
}

.card-region {
    color: var(--gold);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
}

.card-content h3 {
    margin: 8px 0 6px;
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: 26px;
    line-height: 1.15;
}

.card-meta {
    color: #817c73;
    font-size: 11px;
}

.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 18px 0 8px;
}

.card-tags span,
.tags span {
    padding: 5px 9px;
    border: 1px solid var(--border);
    color: #bdb7ad;
    font-size: 10px;
}

.card-content p {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 22px;
}

.card-link {
    margin-top: auto;
    color: var(--gold-light);
    font-size: 12px;
}

.bottle-placeholder {
    position: relative;
    width: 160px;
    height: 280px;
}

.bottle-cap {
    position: absolute;
    width: 55px;
    height: 22px;
    left: 52px;
    top: 0;
    background: #29251e;
    border: 1px solid rgba(255,255,255,.13);
}

.bottle-neck {
    position: absolute;
    width: 48px;
    height: 65px;
    left: 56px;
    top: 21px;
    background: linear-gradient(90deg,#402813,#7a4a20,#39220f);
}

.bottle-body {
    position: absolute;
    width: 150px;
    height: 205px;
    left: 5px;
    bottom: 0;
    border-radius: 18px 18px 10px 10px;
    background:
        linear-gradient(90deg,#281608,#8a4b16 48%,#301908);
    border: 1px solid rgba(255,190,90,.18);
    box-shadow: 0 15px 40px rgba(0,0,0,.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px;
}

.bottle-body::before {
    content: "";
    position: absolute;
    inset: 48px 12px;
    background: #e3d8bd;
    border: 3px double #9b773d;
}

.bottle-body span,
.bottle-body strong,
.bottle-body small {
    position: relative;
    z-index: 2;
    color: #252018;
}

.bottle-body span {
    text-transform: uppercase;
    font-size: 8px;
    letter-spacing: .12em;
}

.bottle-body strong {
    font-family: Georgia, serif;
    font-size: 14px;
    line-height: 1.1;
    margin: 6px 0;
}

.bottle-body small {
    font-size: 9px;
}

.mini-bottle {
    height: 190px;
    width: 95px;
    border-radius: 14px 14px 8px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg,#2c1708,#92501a,#2b1608);
    color: #e7d6b5;
    text-align: center;
    padding: 10px;
    font-family: Georgia, serif;
}

.region-grid-three {
    grid-template-columns: repeat(3,1fr);
}

.detail-main {
    background: var(--bg);
}

.breadcrumb {
    padding-top: 30px;
    color: #777168;
    font-size: 11px;
}

.breadcrumb a:hover {
    color: var(--gold);
}

.breadcrumb span {
    margin: 0 8px;
}

.whisky-detail {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 80px;
    padding-top: 55px;
    padding-bottom: 100px;
    align-items: center;
}

.detail-image {
    min-height: 570px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at center,rgba(190,126,39,.18),transparent 43%),
        #11100e;
    border: 1px solid var(--border);
}

.detail-image img {
    max-width: 90%;
    max-height: 560px;
    object-fit: contain;
}

.detail-image .bottle-placeholder {
    transform: scale(1.45);
}

.detail-content h1 {
    font-family: Georgia,serif;
    font-size: clamp(45px,5vw,68px);
    font-weight: 400;
    line-height: 1.03;
    margin: 14px 0 20px;
}

.detail-lead {
    color: #c3bdb3;
    font-size: 18px;
    max-width: 650px;
}

.facts {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    margin: 35px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.facts div {
    padding: 18px 12px 18px 0;
}

.facts span,
.facts strong {
    display: block;
}

.facts span {
    color: #716c64;
    font-size: 8px;
    letter-spacing: .15em;
}

.facts strong {
    margin-top: 5px;
    font-family: Georgia,serif;
    font-size: 16px;
    font-weight: 400;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.detail-description {
    color: var(--muted);
    margin: 28px 0;
}

.button-amazon {
    background: #d6a04a;
    border-color: #d6a04a;
    color: #111;
}

.button-amazon:hover {
    background: #edbd70;
}

.affiliate-note {
    max-width: 520px;
    color: #6f6a62;
    font-size: 9px;
}

.tasting-section {
    padding: 100px 0;
    background: #11100e;
}

.tasting-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border: 1px solid var(--border);
}

.tasting-grid article {
    padding: 35px;
    min-height: 230px;
    border-right: 1px solid var(--border);
}

.tasting-grid article:last-child {
    border: 0;
}

.tasting-grid span {
    color: var(--gold);
    font-size: 10px;
}

.tasting-grid h3 {
    font-family: Georgia,serif;
    font-size: 26px;
    font-weight: 400;
}

.tasting-grid p {
    color: var(--muted);
    font-size: 14px;
}

.cask-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.cask-grid h2 {
    font-family: Georgia,serif;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.08;
}

.cask-info {
    padding: 40px;
    border-left: 1px solid var(--gold);
    background: var(--card);
}

.cask-info p {
    font-family: Georgia,serif;
    font-size: 22px;
    line-height: 1.5;
    margin: 0;
}

.more-whisky {
    background: #11100e;
}

.error-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    text-align: center;
}

.error-page h1 {
    font-family: Georgia,serif;
    font-size: 55px;
    font-weight: 400;
}

.error-page p {
    color: var(--muted);
    margin-bottom: 30px;
}

@media (max-width: 950px) {

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

    .whisky-detail {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .detail-image {
        min-height: 480px;
    }

}

@media (max-width: 700px) {

    .hero-stats div {
        padding-right: 20px;
        margin-right: 20px;
    }

    .whisky-grid,
    .region-grid-three,
    .tasting-grid,
    .cask-grid {
        grid-template-columns: 1fr;
    }

    .tasting-grid article {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

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

    .card-image {
        height: 330px;
    }

    .detail-image {
        min-height: 420px;
    }

    .detail-image .bottle-placeholder {
        transform: scale(1.2);
    }

}


/* =========================================================
   DETAILSEITEN V3
========================================================= */

.detail-story {
    margin: 35px 0 30px;
}

.detail-story h2 {
    margin: 0 0 10px;
    font-family: Georgia, serif;
    font-size: 25px;
    font-weight: 400;
}

.detail-story p {
    color: var(--muted);
}


.whisky-info-section {
    background: var(--bg);
}

.whisky-info-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 90px;
    align-items: start;
}

.whisky-info-main h2,
.editorial-grid h2,
.recommend-box h2 {
    font-family: Georgia, serif;
    font-size: clamp(38px,4vw,55px);
    line-height: 1.08;
    font-weight: 400;
    margin: 14px 0 25px;
}

.whisky-info-main p,
.editorial-grid p {
    color: var(--muted);
}

.large-copy {
    font-family: Georgia, serif;
    font-size: 22px;
    line-height: 1.6;
    color: #ddd5c8 !important;
}


.whisky-specs {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 35px;
}

.whisky-specs h3 {
    font-family: Georgia, serif;
    font-size: 25px;
    font-weight: 400;
    margin: 0 0 25px;
}

.whisky-specs dl {
    margin: 0;
}

.whisky-specs dl div {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
}

.whisky-specs dl div:last-child {
    border: 0;
}

.whisky-specs dt {
    color: #777168;
    font-size: 11px;
}

.whisky-specs dd {
    margin: 0;
    text-align: right;
    font-size: 12px;
    color: #d9d2c7;
}


.distillery-section {
    background: #11100e;
}

.region-detail-section {
    background: #0c0c0b;
}

.editorial-grid {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 100px;
    align-items: start;
}


.recommend-box-section {
    background:
        radial-gradient(
            circle at 70% 50%,
            rgba(199,149,69,.13),
            transparent 40%
        ),
        #11100e;
}

.recommend-box {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    padding: 55px;
    border: 1px solid rgba(199,149,69,.25);
    background: rgba(12,12,11,.72);
}

.recommend-box > p {
    max-width: 650px;
    margin: 0 auto 25px;
    color: var(--muted);
    font-size: 17px;
}

.recommend-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 25px 0 30px;
}

.recommend-tags span {
    padding: 8px 13px;
    border: 1px solid var(--border);
    color: var(--gold-light);
    font-size: 11px;
}


@media (max-width: 850px) {

    .whisky-info-grid,
    .editorial-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

}


@media (max-width: 520px) {

    .whisky-specs,
    .recommend-box {
        padding: 25px;
    }

    .large-copy {
        font-size: 19px;
    }

}



/* ==========================================================
   WHISKY RANGLISTE
   ========================================================== */

.ranking-page {
    background: #0b0b0a;
}


/* Header */

.ranking-header {
    position: absolute;
}

.main-nav .nav-active {
    color: var(--gold-light);
}


/* Hero */

.ranking-hero {
    min-height: 760px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 76% 45%,
            rgba(193,125,35,.25),
            transparent 20%
        ),
        radial-gradient(
            circle at 72% 50%,
            rgba(255,183,76,.08),
            transparent 38%
        ),
        linear-gradient(
            115deg,
            #070707 0%,
            #0d0c0a 50%,
            #191108 100%
        );
}

.ranking-hero::before {
    content: "01";
    position: absolute;
    right: 5%;
    bottom: -115px;

    font-family: Georgia, serif;
    font-size: clamp(300px, 38vw, 570px);
    line-height: 1;

    color: transparent;

    -webkit-text-stroke:
        1px rgba(224,183,110,.08);

    pointer-events: none;
}

.ranking-hero-inner {
    position: relative;
    z-index: 2;
    padding-top: 100px;
}

.ranking-hero h1 {
    max-width: 930px;

    margin:
        24px 0
        28px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(58px, 8vw, 104px);

    font-weight: 400;

    line-height: .94;

    letter-spacing: -.05em;
}

.ranking-hero h1 span {
    color: var(--gold-light);
    font-style: italic;
}

.ranking-intro {
    max-width: 690px;

    margin: 0;

    color: #bbb4aa;

    font-size: 18px;

    line-height: 1.8;
}

.ranking-hero-meta {
    display: flex;

    margin-top: 45px;
}

.ranking-hero-meta > div {
    min-width: 180px;

    margin-right: 30px;

    padding-right: 30px;

    border-right:
        1px solid var(--border);
}

.ranking-hero-meta > div:last-child {
    border-right: 0;
}

.ranking-hero-meta strong,
.ranking-hero-meta span {
    display: block;
}

.ranking-hero-meta strong {
    font-family: Georgia, serif;

    color: var(--gold-light);

    font-size: 25px;

    font-weight: 400;
}

.ranking-hero-meta span {
    margin-top: 4px;

    color: var(--muted);

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: .08em;
}

.ranking-start-button {
    margin-top: 38px;
}


/* ==========================================================
   PODIUM
   ========================================================== */

.ranking-top-section {
    padding: 120px 0;

    background:
        linear-gradient(
            180deg,
            #0c0c0b,
            #11100e
        );
}

.ranking-podium {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;

    align-items: stretch;
}

.podium-card {
    position: relative;

    overflow: hidden;

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

    background:
        linear-gradient(
            180deg,
            #1a1813,
            #12110f
        );

    transition:
        transform .25s ease,
        border-color .25s ease;
}

.podium-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(224,183,110,.35);
}

.podium-rank-1 {
    border-color:
        rgba(224,183,110,.42);

    box-shadow:
        0 25px 80px
        rgba(151,92,22,.12);
}

.podium-position {
    position: absolute;

    z-index: 4;

    top: 22px;
    left: 22px;

    display: flex;

    align-items: center;

    gap: 9px;
}

.podium-medal {
    font-size: 28px;
}

.podium-position strong {
    color: #e8dfd0;

    font-size: 10px;

    letter-spacing: .18em;
}

.podium-image {
    position: relative;

    display: flex;

    height: 440px;

    align-items: flex-end;

    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 62%,
            rgba(204,133,42,.25),
            transparent 35%
        ),
        #0c0c0b;
}

.podium-image::after {
    content: "";

    position: absolute;

    left: 12%;
    right: 12%;
    bottom: 5%;

    height: 45px;

    border-radius: 50%;

    background:
        rgba(0,0,0,.65);

    filter: blur(18px);
}

.podium-image img {
    position: relative;

    z-index: 2;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .4s ease;
}

.podium-card:hover
.podium-image img {
    transform: scale(1.025);
}

.podium-content {
    padding: 30px;
}

.ranking-label {
    display: inline-block;

    color: var(--gold);

    font-size: 10px;

    font-weight: 750;

    letter-spacing: .15em;

    text-transform: uppercase;
}

.podium-content h3,
.ranking-row-content h3 {
    margin:
        8px 0
        5px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 400;
}

.podium-content h3 {
    font-size: 34px;
}

.ranking-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    color: #8f897f;

    font-size: 12px;
}

.podium-content p {
    margin:
        22px 0;

    color: #b8b1a7;

    font-size: 14px;

    line-height: 1.8;
}

.ranking-detail-link {
    color: var(--gold-light);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .03em;
}


/* ==========================================================
   RANKING LISTE
   ========================================================== */

.ranking-list-section {
    padding: 120px 0;

    background: #0b0b0a;
}

.ranking-list {
    border-top:
        1px solid var(--border);
}

.ranking-row {
    position: relative;

    display: grid;

    grid-template-columns:
        115px
        210px
        1fr;

    min-height: 310px;

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

    transition:
        background .2s ease;
}

.ranking-row:hover {
    background:
        rgba(255,255,255,.018);
}

.ranking-number {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-right:
        1px solid var(--border);
}

.ranking-number span {
    color: #777168;

    font-size: 8px;

    letter-spacing: .2em;
}

.ranking-number strong {
    margin-top: 2px;

    font-family:
        Georgia,
        serif;

    color: var(--gold-light);

    font-size: 54px;

    font-weight: 400;

    line-height: 1;
}

.ranking-row-image {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(182,115,31,.16),
            transparent 46%
        );
}

.ranking-row-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .35s ease;
}

.ranking-row:hover
.ranking-row-image img {
    transform: scale(1.03);
}

.ranking-row-content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        34px 45px;
}

.ranking-row-content h3 {
    font-size: 32px;
}

.ranking-row-content p {
    max-width: 740px;

    margin:
        17px 0;

    color: #aaa49b;

    font-size: 14px;

    line-height: 1.8;
}

.ranking-row-top {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 12px;
}


/* Glencadam */

.ranking-rising {
    background:
        linear-gradient(
            90deg,
            rgba(199,149,69,.055),
            transparent 75%
        );
}

.ranking-rising::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    bottom: 0;

    width: 2px;

    background:
        var(--gold);
}

.ranking-rising-badge {
    padding:
        5px 8px;

    border:
        1px solid
        rgba(199,149,69,.3);

    color:
        var(--gold-light);

    font-size: 8px;

    font-weight: 750;

    letter-spacing: .1em;
}


/* ==========================================================
   RANGLISTE LEBT
   ========================================================== */

.ranking-changing {
    padding:
        130px 0;

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            rgba(172,105,29,.17),
            transparent 38%
        ),
        #11100e;
}

.ranking-changing-inner {
    max-width: 790px;
}

.ranking-changing h2 {
    margin:
        15px 0
        25px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(45px, 6vw, 70px);

    font-weight: 400;

    line-height: 1.02;

    letter-spacing: -.03em;
}

.ranking-changing p {
    max-width: 660px;

    margin:
        0 auto
        32px;

    color: var(--muted);

    line-height: 1.8;
}

.ranking-footer-note {
    color: #777168;

    font-size: 12px;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 980px) {

    .ranking-podium {
        grid-template-columns: 1fr;
    }

    .podium-card {
        display: grid;

        grid-template-columns:
            minmax(280px, .8fr)
            1fr;
    }

    .podium-image {
        height: 100%;
        min-height: 430px;
    }

    .podium-content {
        display: flex;

        flex-direction: column;

        justify-content: center;

        padding: 45px;
    }

    .ranking-row {
        grid-template-columns:
            90px
            180px
            1fr;
    }

}


@media (max-width: 760px) {

    .ranking-hero {
        min-height: auto;

        padding:
            150px 0
            90px;
    }

    .ranking-hero-inner {
        padding-top: 0;
    }

    .ranking-hero h1 {
        font-size:
            clamp(48px, 14vw, 72px);
    }

    .ranking-intro {
        font-size: 16px;
    }

    .ranking-hero-meta {
        display: grid;

        grid-template-columns:
            repeat(3, 1fr);

        gap: 0;

        width: 100%;
    }

    .ranking-hero-meta > div {
        min-width: 0;

        margin: 0;

        padding:
            0 12px;

        text-align: center;
    }

    .ranking-hero-meta > div:first-child {
        padding-left: 0;
    }

    .ranking-top-section,
    .ranking-list-section {
        padding:
            80px 0;
    }

    .podium-card {
        display: block;
    }

    .podium-image {
        height: 420px;

        min-height: 0;
    }

    .podium-content {
        display: block;

        padding: 28px;
    }

    .ranking-row {
        display: grid;

        grid-template-columns:
            70px
            120px
            1fr;

        min-height: 240px;
    }

    .ranking-number strong {
        font-size: 40px;
    }

    .ranking-row-content {
        padding:
            25px 22px;
    }

    .ranking-row-content h3 {
        font-size: 25px;
    }

    .ranking-row-content p {
        font-size: 13px;
    }

}


@media (max-width: 580px) {

    .ranking-hero-meta {
        grid-template-columns: 1fr;

        gap: 18px;

        text-align: left;
    }

    .ranking-hero-meta > div {
        border-right: 0;

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

        padding:
            0 0 15px;

        text-align: left;
    }

    .ranking-hero-meta > div:last-child {
        border-bottom: 0;
    }

    .ranking-row {
        display: grid;

        grid-template-columns:
            72px
            1fr;
    }

    .ranking-number {
        grid-row:
            1 / span 2;

        border-right:
            1px solid var(--border);
    }

    .ranking-row-image {
        height: 250px;
    }

    .ranking-row-content {
        grid-column: 2;

        padding:
            25px 20px
            35px;
    }

    .ranking-row-content h3 {
        font-size: 27px;
    }

    .ranking-changing {
        padding:
            90px 0;
    }

    .ranking-footer-note {
        display: none;
    }

}


/* ==========================================================
   AMAZON AFFILIATE BOX
   ========================================================== */

.amazon-affiliate-section {
    padding: 35px 0 100px;
    background: #0c0c0b;
}

.amazon-affiliate-box {
    position: relative;
    overflow: hidden;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 60px;

    padding: 45px 50px;

    border:
        1px solid rgba(199,149,69,.22);

    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(199,149,69,.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #171510,
            #11100e
        );
}

.amazon-affiliate-box::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    bottom: 0;

    width: 3px;

    background:
        var(--gold);
}

.amazon-affiliate-label {
    display: block;

    margin-bottom: 9px;

    color: var(--gold);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .18em;

    text-transform: uppercase;
}

.amazon-affiliate-copy h2 {
    margin: 0 0 12px;

    max-width: 650px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(25px, 3vw, 36px);

    font-weight: 400;

    line-height: 1.15;
}

.amazon-affiliate-copy > p {
    max-width: 650px;

    margin: 0;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.7;
}

.amazon-affiliate-disclosure {
    margin-top: 15px !important;

    color: #777168 !important;

    font-size: 10px !important;

    line-height: 1.6 !important;
}

.amazon-buy-button {
    min-width: 225px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    padding:
        18px 22px;

    border:
        1px solid var(--gold);

    background:
        var(--gold);

    color:
        #0b0b0a;

    font-size: 12px;

    font-weight: 750;

    letter-spacing: .025em;

    transition:
        transform .2s ease,
        background .2s ease;
}

.amazon-buy-button:hover {
    transform: translateY(-2px);

    background:
        var(--gold-light);
}

.amazon-buy-button strong {
    font-size: 18px;
}


/* MOBILE */

@media (max-width: 760px) {

    .amazon-affiliate-section {
        padding:
            20px 0
            70px;
    }

    .amazon-affiliate-box {
        grid-template-columns: 1fr;

        gap: 28px;

        padding:
            32px 28px;
    }

    .amazon-buy-button {
        width: 100%;

        min-width: 0;
    }

}


/* ==========================================================
   STARTSEITE HERO V3 – ECHTES HERO-BILD
   ========================================================== */

.hero {
    min-height: 760px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 82% 50%, rgba(172,105,29,.20), transparent 24%),
        radial-gradient(circle at 77% 52%, rgba(255,174,56,.07), transparent 39%),
        linear-gradient(115deg, #080808 0%, #0e0d0b 52%, #181109 100%);
}

.hero::after {
    display: none;
    content: none;
}

.hero-layout {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr);
    gap: 34px;
    align-items: center;
    min-height: 760px;
    padding-top: 105px;
    padding-bottom: 55px;
}

.hero-content {
    position: relative;
    z-index: 4;
    padding-top: 0;
    min-width: 0;
}

.hero h1 {
    max-width: 760px;
    font-size: clamp(55px, 6.2vw, 86px);
}

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

.hero-stats {
    margin-top: 55px;
}

.hero-image {
    position: relative;
    z-index: 2;
    align-self: stretch;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.hero-image::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 51%;
    width: min(42vw, 510px);
    height: min(42vw, 510px);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(217,145,48,.19) 0%, rgba(160,93,22,.09) 42%, transparent 72%);
    filter: blur(12px);
    pointer-events: none;
}

.hero-image img {
    position: relative;
    z-index: 2;
    display: block;
    width: min(100%, 520px);
    height: 610px;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 28px 34px rgba(0,0,0,.48));
}

@media (max-width: 1050px) {
    .hero-layout {
        grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr);
        gap: 18px;
    }

    .hero h1 {
        font-size: clamp(52px, 6.6vw, 76px);
    }

    .hero-image img {
        width: min(100%, 450px);
        height: 560px;
    }
}

@media (max-width: 850px) {
    .hero {
        min-height: auto;
    }

    .hero-layout {
        min-height: auto;
        grid-template-columns: minmax(0, 1.05fr) minmax(245px, .95fr);
        gap: 8px;
        padding-top: 125px;
        padding-bottom: 65px;
    }

    .hero h1 {
        font-size: clamp(48px, 7.5vw, 66px);
    }

    .hero-copy {
        font-size: 16px;
    }

    .hero-stats div {
        padding-right: 24px;
        margin-right: 24px;
    }

    .hero-image img {
        width: min(100%, 390px);
        height: 500px;
    }
}

@media (max-width: 700px) {
    .hero-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding-top: 118px;
        padding-bottom: 55px;
    }

    .hero-content {
        width: 100%;
    }

    .hero h1 {
        max-width: none;
        font-size: clamp(46px, 12.5vw, 62px);
    }

    .hero-image {
        width: 100%;
        height: 450px;
        margin-top: 30px;
        align-self: auto;
    }

    .hero-image::before {
        width: 360px;
        height: 360px;
    }

    .hero-image img {
        width: min(100%, 390px);
        height: 450px;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
        margin-top: 42px;
    }

    .hero-stats div {
        min-width: 0;
        margin: 0;
        padding: 0 14px;
        text-align: center;
        border-right: 1px solid var(--border);
        border-bottom: 0;
    }

    .hero-stats div:first-child {
        padding-left: 0;
    }

    .hero-stats div:last-child {
        padding-right: 0;
        border-right: 0;
    }
}

@media (max-width: 520px) {
    .hero {
        min-height: auto;
    }

    .hero-layout {
        padding-top: 105px;
        padding-bottom: 48px;
    }

    .hero h1 {
        font-size: clamp(44px, 13.5vw, 54px);
    }

    .hero-actions {
        width: 100%;
    }

    .hero-image {
        height: 390px;
        margin-top: 25px;
    }

    .hero-image::before {
        width: 300px;
        height: 300px;
    }

    .hero-image img {
        width: min(100%, 340px);
        height: 390px;
    }

    .hero-stats {
        margin-top: 34px;
    }

    .hero-stats strong {
        font-size: 27px;
    }

    .hero-stats span {
        font-size: 9px;
    }
}

/* ==========================================================
   WHISKY PREISNIVEAU
   ========================================================== */

.whisky-price-level {
    position: relative;

    display: inline-flex;
    flex-direction: column;

    margin: 22px 0 5px;

    padding: 14px 20px 13px 22px;

    border: 1px solid rgba(199,149,69,.28);

    background:
        linear-gradient(
            135deg,
            rgba(199,149,69,.10),
            rgba(255,255,255,.015)
        );
}

.whisky-price-level::before {
    content: "";

    position: absolute;

    top: -1px;
    bottom: -1px;
    left: -1px;

    width: 3px;

    background: var(--gold);
}

.whisky-price-level-label {
    margin-bottom: 5px;

    color: var(--gold);

    font-size: 8px;
    font-weight: 750;

    letter-spacing: .18em;
    text-transform: uppercase;
}

.whisky-price-level strong {
    color: var(--text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;
    font-weight: 400;

    line-height: 1.25;
}

.whisky-price-level small {
    margin-top: 5px;

    color: #777168;

    font-size: 9px;
}


@media (max-width: 600px) {

    .whisky-price-level {
        width: 100%;
        box-sizing: border-box;
    }

}


/* ==========================================================
   HERO FINAL – FULL BLEED WHISKY MOTIV
   ========================================================== */

.hero {
    position: relative;

    min-height: 760px;

    overflow: hidden;

    display: flex;
    align-items: center;

    background: #080808;
}


/*
 * Der normale Container bleibt ausschließlich
 * für die Positionierung des Inhalts zuständig.
 */

.hero-layout {
    position: relative;
    z-index: 2;

    width: 100%;
    min-height: 760px;

    display: flex;
    align-items: center;
}


/*
 * TEXT
 */

.hero-content {
    position: relative;
    z-index: 5;

    width: min(730px, 60%);

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

.hero h1 {
    max-width: 730px;
}

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


/*
 * ==========================================================
 * FULL-BLEED BILD
 * ==========================================================
 *
 * Wichtig:
 * Das Element ist zwar innerhalb .hero-layout,
 * wird aber auf 100vw aufgezogen und auf die
 * komplette Browserbreite zentriert.
 *
 * Dadurch existiert KEINE Bildkante innerhalb
 * des Containers mehr.
 */

.hero-image {
    position: absolute;

    z-index: 1;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 100vw;
    height: 100%;

    transform: translateX(-50%);

    pointer-events: none;

    overflow: hidden;
}


/*
 * Das vorhandene IMG füllt jetzt die GANZE Fläche.
 */

.hero-image img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    /*
     * Motiv bewusst nach rechts gewichtet.
     * Die Flasche bleibt rechts,
     * die dunklere Fläche läuft nach links.
     */
    object-position: 72% 50%;

    opacity: .93;

    filter:
        saturate(.90)
        contrast(1.04)
        brightness(.78);

    transform: none;
}


/*
 * ==========================================================
 * SCHWARZ → BILD
 * ==========================================================
 *
 * Der Verlauf beginnt NICHT erst irgendwo in der Mitte,
 * sondern läuft über die komplette Bildschirmbreite.
 */

.hero-image::before {
    content: "";

    position: absolute;

    z-index: 2;

    inset: 0;

    background:
        linear-gradient(
            90deg,

            #080808 0%,

            rgba(8,8,8,.995) 18%,

            rgba(8,8,8,.97) 30%,

            rgba(8,8,8,.88) 42%,

            rgba(8,8,8,.67) 53%,

            rgba(8,8,8,.38) 64%,

            rgba(8,8,8,.15) 78%,

            rgba(8,8,8,.06) 100%
        );
}


/*
 * Warmer Lichtschein hinter der Flasche.
 * Verbindet Bild und schwarzen Seitenhintergrund
 * noch stärker miteinander.
 */

.hero-image::after {
    content: "";

    position: absolute;

    z-index: 3;

    inset: 0;

    background:

        radial-gradient(
            ellipse at 76% 54%,
            rgba(178,105,25,.13) 0%,
            rgba(134,76,18,.06) 30%,
            transparent 58%
        ),

        linear-gradient(
            180deg,
            rgba(8,8,8,.35) 0%,
            transparent 22%,
            transparent 72%,
            rgba(8,8,8,.58) 100%
        );
}


/*
 * Alte künstliche Flaschenkontur aus dem ursprünglichen
 * Hero wird nicht mehr benötigt.
 */

.hero::after {
    display: none;
}


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

.hero-stats {
    display: flex;

    width: fit-content;

    margin-top: 55px;
    padding-top: 22px;

    border-top: 1px solid rgba(255,255,255,.08);
}

.hero-stats div {
    min-width: 135px;

    margin-right: 26px;
    padding-right: 26px;

    border-right: 1px solid rgba(255,255,255,.09);
}

.hero-stats div:last-child {
    margin-right: 0;
    padding-right: 0;

    border-right: 0;
}

.hero-stats strong,
.hero-stats span {
    display: block;
}

.hero-stats strong {
    color: var(--text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 23px;
    font-weight: 400;
}

.hero-stats span {
    margin-top: 4px;

    color: var(--muted);

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

    letter-spacing: .08em;
    text-transform: uppercase;
}


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

@media (max-width: 980px) {

    .hero,
    .hero-layout {
        min-height: 710px;
    }

    .hero-content {
        width: 68%;
    }

    .hero-image img {
        object-position: 68% 50%;
    }

    .hero-image::before {
        background:
            linear-gradient(
                90deg,

                #080808 0%,
                rgba(8,8,8,.98) 25%,
                rgba(8,8,8,.88) 42%,
                rgba(8,8,8,.60) 58%,
                rgba(8,8,8,.25) 78%,
                rgba(8,8,8,.08) 100%
            );
    }

}


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

@media (max-width: 720px) {

    .hero,
    .hero-layout {
        min-height: 700px;
    }

    .hero-content {
        width: 100%;

        padding-top: 90px;
        padding-bottom: 45px;
    }

    .hero-image img {
        object-position: 64% 48%;

        opacity: .52;

        filter:
            saturate(.80)
            contrast(1.02)
            brightness(.55);
    }

    .hero-image::before {
        background:
            linear-gradient(
                90deg,

                rgba(8,8,8,.98) 0%,
                rgba(8,8,8,.94) 44%,
                rgba(8,8,8,.72) 68%,
                rgba(8,8,8,.42) 100%
            );
    }

    .hero-image::after {
        background:
            linear-gradient(
                180deg,

                rgba(8,8,8,.55) 0%,
                rgba(8,8,8,.15) 30%,
                rgba(8,8,8,.25) 68%,
                #080808 100%
            );
    }

    .hero h1 {
        max-width: 95%;

        font-size:
            clamp(45px, 13vw, 66px);
    }

    .hero-copy {
        max-width: 92%;

        font-size: 16px;
    }

    .hero-actions {
        flex-wrap: wrap;
    }

    .hero-stats {
        width: 100%;

        margin-top: 40px;
    }

    .hero-stats div {
        flex: 1;

        min-width: 0;

        margin-right: 15px;
        padding-right: 15px;
    }

    .hero-stats strong {
        font-size: 19px;
    }

    .hero-stats span {
        font-size: 8px;
    }

}


/* ==========================================================
   HERO FINAL POSITIONING
   ========================================================== */


/*
 * Inhalt wieder exakt auf normalen Seiten-Container setzen.
 * Damit fluchten Logo, Hero und restliche Seite.
 */

.hero-layout {
    width: min(calc(100% - 48px), var(--max));
    max-width: var(--max);

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


/*
 * Text etwas kompakter halten.
 */

.hero-content {
    width: 58%;
    max-width: 700px;

    position: relative;
    z-index: 5;
}


/*
 * Das Hintergrund-Element bleibt über die volle
 * Browserbreite gespannt.
 */

.hero-image {
    left: 50%;

    width: 100vw;

    transform: translateX(-50%);
}


/*
 * Entscheidende Änderung:
 *
 * Das Foto selbst wird NICHT mehr über 100 % aufgezogen.
 * Stattdessen sitzt es rechts und ist etwas kleiner.
 *
 * Die linke Seite der Originalgrafik bleibt trotzdem sichtbar
 * und der Overlay-Verlauf verbindet sie mit dem Schwarz.
 */

.hero-image img {
    inset: auto;

    top: 0;
    bottom: 0;

    left: auto;
    right: -2%;

    width: 82%;
    height: 100%;

    object-fit: cover;
    object-position: 64% 50%;

    opacity: .92;

    filter:
        saturate(.92)
        contrast(1.03)
        brightness(.79);
}


/*
 * Verlauf bewusst über die GANZE Hero-Fläche.
 *
 * Die Flasche sitzt rechts,
 * aber das warme Licht darf weit nach links hineinlaufen.
 */

.hero-image::before {
    background:
        linear-gradient(
            90deg,

            #080808 0%,

            rgba(8,8,8,1) 22%,

            rgba(8,8,8,.98) 31%,

            rgba(8,8,8,.90) 40%,

            rgba(8,8,8,.72) 49%,

            rgba(8,8,8,.46) 59%,

            rgba(8,8,8,.22) 70%,

            rgba(8,8,8,.08) 84%,

            rgba(8,8,8,.03) 100%
        );
}


/*
 * Lichtschwerpunkt weiter nach rechts.
 */

.hero-image::after {
    background:

        radial-gradient(
            ellipse at 79% 53%,
            rgba(190,113,29,.15) 0%,
            rgba(143,81,20,.07) 32%,
            transparent 61%
        ),

        linear-gradient(
            180deg,
            rgba(8,8,8,.38) 0%,
            transparent 22%,
            transparent 73%,
            rgba(8,8,8,.62) 100%
        );
}


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

@media (max-width: 980px) {

    .hero-layout {
        width: min(calc(100% - 36px), var(--max));
    }

    .hero-content {
        width: 65%;
    }

    .hero-image img {
        right: -10%;

        width: 92%;

        object-position: 66% 50%;
    }

}


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

@media (max-width: 720px) {

    .hero-layout {
        width: calc(100% - 32px);

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

    .hero-content {
        width: 100%;
        max-width: none;
    }

    .hero-image img {
        top: 0;
        right: -30%;

        width: 125%;
        height: 100%;

        object-position: 65% 48%;

        opacity: .48;
    }

}


/* ==========================================================================
   WHISKY-WISSEN
   ========================================================================== */

.nav-new-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 2px 6px;
    border: 1px solid rgba(199, 159, 86, .5);
    border-radius: 999px;
    color: #d6b36c;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.3;
    vertical-align: 2px;
}

.knowledge-page,
.knowledge-article-page {
    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(175, 125, 49, .09),
            transparent 35%
        ),
        #0b0b0b;
    color: #eee9df;
}

.knowledge-container,
.knowledge-article-container {
    width: min(calc(100% - 48px), 1180px);
    margin: 0 auto;
}

.knowledge-hero {
    position: relative;
    overflow: hidden;
    padding: 112px 0 96px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background:
        radial-gradient(
            circle at 75% 40%,
            rgba(185, 134, 54, .18),
            transparent 37%
        ),
        linear-gradient(
            135deg,
            #090909 0%,
            #12100d 58%,
            #171108 100%
        );
}

.knowledge-hero-inner {
    width: min(calc(100% - 48px), 1180px);
    margin: 0 auto;
    max-width: 850px;
    margin-left: max(24px, calc((100vw - 1180px) / 2));
}

.knowledge-eyebrow,
.knowledge-mini-label,
.knowledge-card-badge,
.knowledge-article-badge,
.knowledge-sidebar-label,
.knowledge-personal-link > span,
.knowledge-answer-box > span,
.knowledge-cta-box > span {
    display: inline-flex;
    align-items: center;
    width: max-content;
    border: 1px solid rgba(203, 164, 91, .36);
    border-radius: 999px;
    padding: 7px 11px;
    color: #d6b36c;
    background: rgba(176, 128, 53, .08);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.knowledge-hero h1 {
    max-width: 820px;
    margin: 22px 0 24px;
    color: #fff;
    font-size: clamp(48px, 6vw, 82px);
    line-height: .98;
    letter-spacing: -.045em;
}

.knowledge-hero h1 em {
    display: block;
    color: #caa35e;
    font-family: Georgia, serif;
    font-weight: 400;
}

.knowledge-hero p {
    max-width: 720px;
    color: rgba(244, 239, 229, .73);
    font-size: 18px;
    line-height: 1.75;
}

.knowledge-intro {
    padding: 82px 0 46px;
}

.knowledge-intro-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 80px;
    align-items: start;
}

.knowledge-intro h2 {
    margin: 18px 0 0;
    color: #fff;
    font-size: clamp(36px, 4vw, 54px);
    line-height: 1.06;
    letter-spacing: -.035em;
}

.knowledge-intro p {
    margin: 0 0 18px;
    color: rgba(238,233,223,.72);
    font-size: 17px;
    line-height: 1.75;
}

.knowledge-category {
    padding: 54px 0;
}

.knowledge-section-head {
    margin-bottom: 27px;
}

.knowledge-section-head > span {
    color: #b78e4c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
}

.knowledge-section-head h2 {
    margin: 7px 0 0;
    color: #fff;
    font-size: 31px;
    letter-spacing: -.025em;
}

.knowledge-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 18px;
}

.knowledge-card {
    position: relative;
    min-height: 285px;
    padding: 28px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 20px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.015)
        );
    color: inherit;
    text-decoration: none;
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.knowledge-card:hover {
    transform: translateY(-3px);
    border-color: rgba(204,163,88,.36);
    background:
        linear-gradient(
            145deg,
            rgba(202,163,94,.08),
            rgba(255,255,255,.018)
        );
}

.knowledge-card h3 {
    margin: 22px 0 13px;
    color: #fff;
    font-size: 23px;
    line-height: 1.17;
    letter-spacing: -.02em;
}

.knowledge-card p {
    margin: 0;
    color: rgba(235,229,218,.65);
    font-size: 15px;
    line-height: 1.65;
}

.knowledge-card-link {
    position: absolute;
    left: 28px;
    bottom: 25px;
    color: #d3ad67;
    font-size: 13px;
    font-weight: 700;
}

.knowledge-cta {
    padding: 70px 0 110px;
}

.knowledge-cta-box {
    padding: 48px;
    border: 1px solid rgba(198,155,78,.22);
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(196,146,66,.17),
            transparent 32%
        ),
        rgba(255,255,255,.025);
}

.knowledge-cta-box h2 {
    max-width: 650px;
    margin: 18px 0 12px;
    color: #fff;
    font-size: clamp(34px,4vw,52px);
    letter-spacing: -.04em;
}

.knowledge-cta-box p {
    max-width: 680px;
    margin: 0 0 28px;
    color: rgba(237,231,219,.7);
    font-size: 17px;
    line-height: 1.7;
}


/* ==========================================================================
   WISSENSARTIKEL
   ========================================================================== */

.knowledge-article-hero {
    padding: 58px 0 68px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(185,134,54,.13),
            transparent 32%
        );
}

.knowledge-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 38px;
    color: rgba(238,233,223,.46);
    font-size: 13px;
}

.knowledge-breadcrumb a {
    color: rgba(238,233,223,.65);
    text-decoration: none;
}

.knowledge-breadcrumb a:hover {
    color: #d2aa62;
}

.knowledge-article-hero h1 {
    max-width: 850px;
    margin: 20px 0 18px;
    color: #fff;
    font-size: clamp(42px,5vw,68px);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.knowledge-article-lead {
    max-width: 790px;
    margin: 0;
    color: rgba(239,234,224,.74);
    font-size: 19px;
    line-height: 1.75;
}

.knowledge-article-layout {
    display: grid;
    grid-template-columns: minmax(0,760px) 300px;
    justify-content: space-between;
    gap: 70px;
    padding: 76px 0 110px;
}

.knowledge-content {
    min-width: 0;
}

.knowledge-answer-box {
    margin-bottom: 56px;
    padding: 27px 30px;
    border-left: 3px solid #c79d54;
    border-radius: 4px 16px 16px 4px;
    background: rgba(188,141,62,.075);
}

.knowledge-answer-box p {
    margin: 14px 0 0;
    color: rgba(247,242,232,.87);
    font-size: 18px;
    line-height: 1.7;
}

.knowledge-text-section {
    padding: 0 0 48px;
}

.knowledge-text-section + .knowledge-text-section {
    padding-top: 9px;
    border-top: 1px solid rgba(255,255,255,.055);
}

.knowledge-text-section h2 {
    margin: 37px 0 19px;
    color: #fff;
    font-size: clamp(28px,3vw,37px);
    line-height: 1.14;
    letter-spacing: -.03em;
}

.knowledge-richtext p {
    margin: 0 0 19px;
    color: rgba(238,233,223,.76);
    font-size: 17px;
    line-height: 1.83;
}

.knowledge-richtext strong {
    color: #fff1d3;
}

.knowledge-sidebar {
    position: relative;
}

.knowledge-sidebar-box {
    position: sticky;
    top: 28px;
    padding: 25px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 18px;
    background: rgba(255,255,255,.025);
}

.knowledge-sidebar-box h3 {
    margin: 16px 0 18px;
    color: #fff;
    font-size: 22px;
}

.knowledge-related-link {
    display: block;
    padding: 17px 0;
    border-top: 1px solid rgba(255,255,255,.065);
    color: inherit;
    text-decoration: none;
}

.knowledge-related-link strong {
    display: block;
    color: rgba(255,255,255,.88);
    font-size: 14px;
    line-height: 1.4;
}

.knowledge-related-link span {
    display: block;
    margin-top: 7px;
    color: #c89f59;
    font-size: 12px;
}

.knowledge-all-link {
    display: block;
    margin-top: 15px;
    color: #d2aa62;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.knowledge-personal-link {
    margin-top: 12px;
    padding: 34px;
    border: 1px solid rgba(201,158,83,.22);
    border-radius: 20px;
    background:
        linear-gradient(
            145deg,
            rgba(190,142,65,.08),
            rgba(255,255,255,.02)
        );
}

.knowledge-personal-link h2 {
    margin: 17px 0 12px;
    color: #fff;
    font-size: 32px;
}

.knowledge-personal-link p {
    color: rgba(239,233,222,.7);
    font-size: 16px;
    line-height: 1.7;
}

.knowledge-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 23px;
}


@media (max-width: 960px) {

    .knowledge-card-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .knowledge-article-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .knowledge-sidebar-box {
        position: static;
    }

    .knowledge-intro-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}


@media (max-width: 640px) {

    .knowledge-container,
    .knowledge-article-container {
        width: min(calc(100% - 32px),1180px);
    }

    .knowledge-hero {
        padding: 72px 0 62px;
    }

    .knowledge-hero-inner {
        width: min(calc(100% - 32px),1180px);
        margin-left: 16px;
    }

    .knowledge-card-grid {
        grid-template-columns: 1fr;
    }

    .knowledge-card {
        min-height: 255px;
    }

    .knowledge-article-layout {
        padding-top: 50px;
    }

    .knowledge-article-hero {
        padding-top: 38px;
    }

    .knowledge-answer-box,
    .knowledge-personal-link,
    .knowledge-cta-box {
        padding: 24px;
    }
}


/* ==========================================================================
   WHISKY-WISSEN – CARD TEXT / WEITERLESEN FIX
   ========================================================================== */

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

.knowledge-card p {
    flex: 0 0 auto;
}

.knowledge-card-link {
    position: static;
    left: auto;
    bottom: auto;
    display: inline-flex;
    align-items: center;
    width: max-content;
    margin-top: auto;
    padding-top: 22px;
    color: #d3ad67;
    font-size: 13px;
    font-weight: 700;
}


/* ==========================================================================
   GLOBAL MOBILE NAVIGATION
   ========================================================================== */

.mobile-menu-toggle {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 10px;
    background: rgba(255,255,255,.035);
    cursor: pointer;
    flex: 0 0 44px;
}

.mobile-menu-toggle:hover {
    border-color: rgba(205,165,91,.35);
    background: rgba(205,165,91,.06);
}

.mobile-menu-toggle span {
    position: absolute;
    left: 11px;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: #f5f1e8;
    transition:
        transform .22s ease,
        opacity .22s ease,
        top .22s ease;
}

.mobile-menu-toggle span:nth-child(1) {
    top: 14px;
}

.mobile-menu-toggle span:nth-child(2) {
    top: 21px;
}

.mobile-menu-toggle span:nth-child(3) {
    top: 28px;
}


/* geöffnet -> X */

.site-header.mobile-nav-open .mobile-menu-toggle span:nth-child(1) {
    top: 21px;
    transform: rotate(45deg);
}

.site-header.mobile-nav-open .mobile-menu-toggle span:nth-child(2) {
    opacity: 0;
}

.site-header.mobile-nav-open .mobile-menu-toggle span:nth-child(3) {
    top: 21px;
    transform: rotate(-45deg);
}


@media (max-width: 820px) {

    .site-header .header-inner {
        position: relative;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .mobile-menu-toggle {
        display: block;
    }

    /*
     * Die globale Navigation wird mobil unter Header/Logo geöffnet.
     * Die Selektoren sind absichtlich auf nav innerhalb des site-header
     * begrenzt, damit Breadcrumbs und sonstige Navigationen nicht
     * beeinflusst werden.
     */

    .site-header .header-inner > nav {
        display: none !important;
        order: 20;
        width: 100%;
        margin: 14px 0 0;
        padding: 10px 0 6px;
        border-top: 1px solid rgba(255,255,255,.075);
    }

    .site-header.mobile-nav-open .header-inner > nav {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .site-header .header-inner > nav > a {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 48px;
        padding: 11px 4px;
        border-bottom: 1px solid rgba(255,255,255,.055);
        color: rgba(255,255,255,.88);
        text-decoration: none;
    }

    .site-header .header-inner > nav > a:last-child {
        border-bottom: 0;
    }

    .site-header .header-inner > nav > a:hover,
    .site-header .header-inner > nav > a[aria-current="page"] {
        color: #d3ad67;
    }

}


@media (max-width: 640px) {

    .knowledge-card {
        min-height: 0;
    }

    .knowledge-card-link {
        padding-top: 20px;
    }

}


/* ==========================================================================
   MOBILE MENÜ – EIGENE EBENE / HINTERGRUND / Z-INDEX
   ========================================================================== */

@media (max-width: 820px) {

    .site-header {
        position: relative;
        z-index: 999;
        background: #090909;
    }

    .site-header .header-inner {
        position: relative;
        z-index: 1000;
    }

    .site-header .header-inner > nav {
        position: absolute;
        z-index: 9999;

        top: 100%;
        left: 0;
        right: 0;

        width: 100%;
        margin: 0;
        padding: 8px 22px 16px;

        background: #090909;

        border-top: 1px solid rgba(255,255,255,.08);
        border-bottom: 1px solid rgba(255,255,255,.08);

        box-shadow:
            0 18px 35px rgba(0,0,0,.55);

        box-sizing: border-box;
    }

    .site-header:not(.mobile-nav-open) .header-inner > nav {
        display: none !important;
    }

    .site-header.mobile-nav-open .header-inner > nav {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .site-header .header-inner > nav > a {
        display: flex;
        align-items: center;

        width: 100%;
        min-height: 52px;

        padding: 12px 6px;

        border-bottom:
            1px solid rgba(255,255,255,.07);

        background: transparent;

        box-sizing: border-box;
    }

    .site-header .header-inner > nav > a:last-child {
        border-bottom: 0;
    }

    .mobile-menu-toggle {
        position: relative;
        z-index: 10001;
    }

}


/* ==========================================================================
   FOOTER – BROSchisBlog.com
   ========================================================================== */

.footer-blog-link {
    width: min(calc(100% - 48px), 1180px);
    margin: 0 auto;
    padding: 18px 0 24px;

    border-top: 1px solid rgba(255,255,255,.07);

    text-align: center;
    box-sizing: border-box;
}

.footer-blog-link a {
    color: #d3ad67;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
}

.footer-blog-link a:hover {
    text-decoration: underline;
}

@media (max-width: 700px) {

    .footer-blog-link {
        width: min(calc(100% - 32px), 1180px);
        padding: 16px 0 22px;
    }

}


/* ==========================================================================
   WHISKY-REGIONEN
   ========================================================================== */

.regions-page {
    overflow: hidden;
}

.regions-hero {
    padding: 92px 0 84px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background:
        radial-gradient(
            circle at 75% 15%,
            rgba(190,145,70,.11),
            transparent 34%
        ),
        #0b0b0b;
}

.regions-hero-inner {
    max-width: 900px;
}

.regions-badge {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 6px 13px;
    margin-bottom: 24px;

    border: 1px solid rgba(211,173,103,.38);
    border-radius: 999px;

    background: rgba(211,173,103,.07);

    color: #d3ad67;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
}

.regions-eyebrow,
.regions-section-kicker,
.region-feature-kicker {
    display: block;

    margin-bottom: 14px;

    color: #b8975c;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
}

.regions-hero h1 {
    max-width: 850px;

    margin: 0;

    font-size: clamp(44px, 6vw, 78px);
    line-height: .98;
    letter-spacing: -.045em;
}

.regions-hero h1 em,
.regions-intro h2 em,
.regions-knowledge-box h2 em {
    color: #d3ad67;
    font-family: Georgia, serif;
    font-weight: 400;
}

.regions-lead {
    max-width: 760px;

    margin: 28px 0 0;

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

    font-size: 18px;
    line-height: 1.75;
}

.regions-hero-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 34px;
}

.regions-hero-links a {
    display: inline-flex;
    align-items: center;

    min-height: 38px;
    padding: 8px 14px;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 999px;

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

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

    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.regions-hero-links a:hover {
    border-color: rgba(211,173,103,.35);
    color: #d3ad67;
}


.regions-intro {
    padding: 76px 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.regions-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 80px;
    align-items: start;
}

.regions-intro h2 {
    max-width: 530px;
    margin: 0;

    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.06;
    letter-spacing: -.035em;
}

.regions-intro-copy p {
    margin: 0 0 20px;

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

    font-size: 16px;
    line-height: 1.8;
}

.regions-intro-copy p:last-child {
    margin-bottom: 0;
}


.regions-list {
    padding: 28px 0 86px;
}

.region-feature {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 42px;

    padding: 62px 0;

    border-bottom: 1px solid rgba(255,255,255,.075);
}

.region-feature:last-child {
    border-bottom: 0;
}

.region-feature-number {
    color: rgba(211,173,103,.28);

    font-family: Georgia, serif;
    font-size: 54px;
    line-height: 1;
}

.region-feature-content {
    max-width: 960px;
}

.region-feature-content h2 {
    margin: 0;

    font-size: clamp(36px, 5vw, 62px);
    line-height: 1;
    letter-spacing: -.04em;
}

.region-feature-intro {
    max-width: 800px;

    margin: 22px 0 0;

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

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


.region-whisky-block {
    margin-top: 34px;
}

.region-whisky-block h3 {
    margin: 0 0 14px;

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

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.region-whisky-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.region-whisky-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    min-height: 54px;
    padding: 13px 16px;

    border: 1px solid rgba(255,255,255,.075);
    border-radius: 10px;

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

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

    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.region-whisky-links a:hover {
    border-color: rgba(211,173,103,.28);
    background: rgba(211,173,103,.045);
    color: #d3ad67;
}

.region-whisky-links a span:last-child {
    color: #d3ad67;
}


.region-empty-note {
    margin-top: 28px;
    padding: 17px 18px;

    border: 1px dashed rgba(255,255,255,.11);
    border-radius: 10px;

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

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

.region-knowledge-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-top: 25px;

    color: #d3ad67;

    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.region-knowledge-link:hover {
    text-decoration: underline;
}


.regions-knowledge-cta {
    padding: 0 0 92px;
}

.regions-knowledge-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 60px;
    align-items: center;

    padding: 42px;

    border: 1px solid rgba(211,173,103,.18);
    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(211,173,103,.07),
            rgba(255,255,255,.018)
        );
}

.regions-knowledge-box h2 {
    max-width: 600px;

    margin: 0;

    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.05;
    letter-spacing: -.035em;
}

.regions-knowledge-box p {
    max-width: 700px;

    margin: 20px 0 0;

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

    line-height: 1.75;
}

.regions-knowledge-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;

    min-width: 245px;
}

.regions-primary-link,
.regions-secondary-link {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 12px 18px;

    border-radius: 9px;

    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.regions-primary-link {
    background: #d3ad67;
    color: #111;
}

.regions-secondary-link {
    border: 1px solid rgba(255,255,255,.11);
    color: rgba(255,255,255,.75);
}


@media (max-width: 820px) {

    .regions-hero {
        padding: 62px 0 58px;
    }

    .regions-lead {
        font-size: 16px;
    }

    .regions-intro {
        padding: 56px 0;
    }

    .regions-intro-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .region-feature {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 46px 0;
    }

    .region-feature-number {
        font-size: 34px;
    }

    .region-whisky-links {
        grid-template-columns: 1fr;
    }

    .regions-knowledge-box {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 30px;
    }

    .regions-knowledge-actions {
        min-width: 0;
    }

}


@media (max-width: 560px) {

    .regions-hero {
        padding-top: 48px;
    }

    .regions-badge {
        margin-bottom: 20px;
        font-size: 10px;
    }

    .regions-hero h1 {
        font-size: 43px;
    }

    .regions-hero-links {
        gap: 8px;
    }

    .regions-hero-links a {
        min-height: 35px;
        padding: 7px 11px;
        font-size: 11px;
    }

    .regions-knowledge-box {
        padding: 24px 20px;
    }

}