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

.guide-page {
    background: #f8faf8;
    color: #172019;
}

.guide-page .site-header {
    background: rgba(255,255,255,.97);
}

.guide-page .main-nav a[aria-current="page"] {
    color: #1f7a4d;
    font-weight: 700;
}

.guide-narrow {
    max-width: 900px;
}

.guide-hub-hero {
    padding: 54px 0 64px;
    background:
        radial-gradient(circle at 86% 12%, rgba(66, 153, 99, .12), transparent 28%),
        linear-gradient(180deg, #fff 0%, #f5f9f6 100%);
    border-bottom: 1px solid #e3ebe5;
}

.guide-hub-hero h1,
.article-hero h1 {
    margin: 14px 0 20px;
    max-width: 930px;
    font-size: clamp(2.6rem, 5vw, 4.7rem);
    line-height: 1.03;
    letter-spacing: -.045em;
}

.guide-hub-hero h1 span,
.article-hero h1 span {
    color: #277c50;
}

.guide-hub-hero p {
    max-width: 790px;
    margin: 0;
    color: #5b675f;
    font-size: 1.12rem;
    line-height: 1.75;
}

.guide-published {
    padding: 78px 0 58px;
}

.guide-section-title {
    margin-bottom: 28px;
}

.guide-section-title.centered {
    max-width: 720px;
    margin: 0 auto 34px;
    text-align: center;
}

.guide-section-title h2 {
    margin: 8px 0 0;
    font-size: clamp(2rem, 3vw, 3rem);
    letter-spacing: -.035em;
}

.guide-section-title p {
    margin: 12px 0 0;
    color: #68736b;
    line-height: 1.7;
}

.guide-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, .7fr);
    gap: 32px;
    padding: 42px;
    border: 1px solid #dbe6de;
    border-radius: 28px;
    background:
        radial-gradient(circle at 95% 0%, rgba(80, 168, 112, .14), transparent 30%),
        #fff;
    box-shadow: 0 16px 44px rgba(38, 65, 47, .055);
}

.guide-card-kicker {
    color: #287b50;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.guide-feature h2 {
    max-width: 760px;
    margin: 12px 0 14px;
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    line-height: 1.07;
    letter-spacing: -.04em;
}

.guide-feature-copy > p {
    max-width: 720px;
    margin: 0;
    color: #626e66;
    line-height: 1.75;
}

.guide-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 22px 0 26px;
    color: #7a857e;
    font-size: .84rem;
}

.guide-feature-points {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 26px;
    border: 1px solid #deE7e0;
    border-radius: 21px;
    background: #f7faf8;
}

.guide-feature-points > span {
    margin-bottom: 2px;
    color: #7a857e;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.guide-feature-points strong {
    padding-bottom: 11px;
    border-bottom: 1px solid #e2e9e4;
    color: #314039;
    font-size: .92rem;
    line-height: 1.35;
}

.guide-feature-points strong:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.guide-tools-section {
    padding: 58px 0 94px;
}

.guide-tool-grid,
.article-next-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.guide-tool-card,
.article-next-grid article {
    padding: 30px;
    border: 1px solid #dde7df;
    border-radius: 23px;
    background: #fff;
}

.guide-tool-number,
.article-next-number {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 22px;
    border-radius: 12px;
    background: #edf7f0;
    color: #277c50;
    font-size: .78rem;
    font-weight: 800;
}

.guide-tool-card h3,
.article-next-grid h3 {
    margin: 0 0 10px;
    font-size: 1.55rem;
    letter-spacing: -.025em;
}

.guide-tool-card p,
.article-next-grid p {
    min-height: 52px;
    margin: 0 0 24px;
    color: #667169;
    line-height: 1.7;
}

/* =========================================================
   ARTICLE
   ========================================================= */

.article-hero {
    padding: 54px 0 58px;
    background:
        radial-gradient(circle at 82% 18%, rgba(67,155,100,.11), transparent 28%),
        #fff;
    border-bottom: 1px solid #e5ece7;
}

.article-container {
    max-width: 940px;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
    color: #7b857e;
    font-size: .84rem;
}

.breadcrumbs a {
    color: #5f6b63;
    text-decoration: none;
}

.article-lead {
    max-width: 830px;
    margin: 0;
    color: #58645c;
    font-size: 1.18rem;
    line-height: 1.75;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 28px;
    color: #7b857e;
    font-size: .84rem;
}

.article-layout {
    display: grid;
    grid-template-columns: 220px minmax(0,760px);
    justify-content: center;
    gap: 64px;
    padding-top: 64px;
    padding-bottom: 100px;
}

.article-toc {
    position: sticky;
    top: 100px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border: 1px solid #e0e8e2;
    border-radius: 18px;
    background: #fff;
}

.article-toc strong {
    margin-bottom: 5px;
    font-size: .88rem;
}

.article-toc a {
    color: #667169;
    font-size: .83rem;
    line-height: 1.35;
    text-decoration: none;
}

.article-toc a:hover {
    color: #23794c;
}

.article-content section {
    scroll-margin-top: 110px;
    margin-bottom: 68px;
}

.article-content h2 {
    margin: 0 0 18px;
    font-size: clamp(1.85rem,3vw,2.55rem);
    line-height: 1.15;
    letter-spacing: -.035em;
}

.article-content h3 {
    margin: 0 0 10px;
    font-size: 1.18rem;
}

.article-content p,
.article-content li {
    color: #4f5c53;
    font-size: 1rem;
    line-height: 1.82;
}

.article-callout,
.article-note {
    margin-top: 26px;
    padding: 22px 24px;
    border: 1px solid #cfe3d5;
    border-radius: 18px;
    background: #f2f8f4;
}

.article-callout p,
.article-note p {
    margin-bottom: 0;
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
    margin-top: 28px;
}

.tech-card {
    padding: 20px;
    border: 1px solid #e0e8e2;
    border-radius: 18px;
    background: #fff;
}

.tech-card > span {
    color: #2b8054;
    font-size: .76rem;
    font-weight: 800;
}

.tech-card h3 {
    margin-top: 12px;
}

.tech-card p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.65;
}

.section-label {
    margin-bottom: 10px;
    color: #287b50;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.pros-cons {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
    margin-top: 28px;
}

.pros-cons > div {
    padding: 22px 24px;
    border: 1px solid #e0e8e2;
    border-radius: 18px;
    background: #fff;
}

.pros-cons h3 {
    color: #26794e;
}

.pros-cons ul {
    margin: 10px 0 0;
    padding-left: 20px;
}

.pros-cons li + li {
    margin-top: 7px;
}

.fit-table-wrap {
    overflow-x: auto;
    margin-top: 24px;
    border: 1px solid #dfe7e1;
    border-radius: 18px;
    background: #fff;
}

.fit-table {
    width: 100%;
    border-collapse: collapse;
}

.fit-table th,
.fit-table td {
    padding: 17px 18px;
    border-bottom: 1px solid #e7ece8;
    text-align: left;
    vertical-align: top;
}

.fit-table th {
    background: #f3f7f4;
    color: #2d3931;
    font-size: .83rem;
}

.fit-table td {
    color: #536057;
    font-size: .9rem;
    line-height: 1.55;
}

.fit-table tr:last-child td {
    border-bottom: 0;
}

.finder-inline-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-top: 22px;
    padding: 24px;
    border-radius: 18px;
    background: #172a1e;
    color: #fff;
}

.finder-inline-cta p {
    margin: 5px 0 0;
    color: #c8d4cb;
    font-size: .9rem;
}

.buy-list {
    display: grid;
    gap: 12px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: buy;
}

.buy-list li {
    counter-increment: buy;
    position: relative;
    padding: 20px 20px 20px 62px;
    border: 1px solid #e0e8e2;
    border-radius: 16px;
    background: #fff;
}

.buy-list li::before {
    content: counter(buy);
    position: absolute;
    left: 20px;
    top: 20px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: #eaf6ee;
    color: #277b50;
    font-weight: 800;
}

.buy-list strong,
.buy-list span {
    display: block;
}

.buy-list span {
    margin-top: 4px;
}

.article-next-step {
    margin-bottom: 0 !important;
    padding-top: 8px;
}

.article-next-heading {
    margin-bottom: 24px;
}

.article-next-heading h2 {
    margin-top: 8px;
}

.article-next-heading > p {
    max-width: 650px;
    margin-bottom: 0;
}

.article-next-grid article {
    display: flex;
    flex-direction: column;
}

.article-next-grid .button {
    align-self: flex-start;
    margin-top: auto;
}

.article-editorial-note {
    margin: 24px 0 0 !important;
    padding-top: 22px;
    border-top: 1px solid #dfe7e1;
    color: #748078 !important;
    font-size: .86rem !important;
    line-height: 1.65 !important;
}

@media (max-width: 900px) {
    .guide-feature {
        grid-template-columns: 1fr;
    }

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

    .article-toc {
        position: static;
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .article-toc strong {
        grid-column: 1 / -1;
    }

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

@media (max-width: 700px) {
    .guide-hub-hero {
        padding: 58px 0 46px;
    }

    .guide-published {
        padding: 52px 0 38px;
    }

    .guide-feature {
        padding: 26px;
        border-radius: 22px;
    }

    .guide-tools-section {
        padding: 38px 0 66px;
    }

    .guide-tool-grid,
    .article-next-grid,
    .pros-cons {
        grid-template-columns: 1fr;
    }

    .guide-tool-card p,
    .article-next-grid p {
        min-height: 0;
    }

    .article-hero {
        padding: 34px 0 42px;
    }

    .breadcrumbs {
        margin-bottom: 24px;
    }

    .article-layout {
        padding-top: 38px;
        padding-bottom: 70px;
    }

    .article-toc {
        grid-template-columns: 1fr;
    }

    .article-toc strong {
        grid-column: auto;
    }

    .article-content section {
        margin-bottom: 52px;
    }

    .finder-inline-cta {
        align-items: stretch;
        flex-direction: column;
    }
}


/* =========================================================
   MOBILE HORIZONTAL OVERFLOW FIX
   Keep every Ratgeber element inside the viewport.
   ========================================================= */

.guide-page,
.guide-page main,
.article-container,
.article-layout,
.article-content,
.article-content section,
.article-toc,
.tech-grid,
.tech-card,
.pros-cons,
.pros-cons > div,
.finder-inline-cta,
.buy-list,
.buy-list li,
.article-next-grid,
.article-next-grid article,
.fit-table-wrap {
    min-width: 0;
    max-width: 100%;
}

.article-layout {
    width: 100%;
}

.article-content,
.article-content * {
    overflow-wrap: anywhere;
}

.fit-table-wrap {
    width: 100%;
}

@media (max-width: 900px) {
    .article-layout {
        width: 100%;
        max-width: 100%;
    }

    .article-content {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 700px) {
    .guide-page {
        overflow-x: hidden;
    }

    .article-hero h1 {
        font-size: clamp(2.15rem, 11vw, 3.15rem);
    }

    .article-callout,
    .article-note,
    .tech-card,
    .pros-cons > div,
    .finder-inline-cta,
    .buy-list li,
    .article-next-grid article,
    .article-toc {
        box-sizing: border-box;
        width: 100%;
    }

    .fit-table {
        min-width: 620px;
    }
}


/* =========================================================
   MOBILE ARTICLE SIDE SPACING FIX
   Match the article body to the same 16px side gutters
   used by the hero/header container on mobile.
   ========================================================= */

@media (max-width: 700px) {
    .container.article-layout {
        width: calc(100% - 32px);
        max-width: calc(100% - 32px);
        margin-inline: auto;
    }

    .article-content {
        width: 100%;
        max-width: 100%;
    }
}


/* =========================================================
   MOBILE GARDEN-FIT TABLE — NO HORIZONTAL SCROLL
   Turn each desktop table row into a readable mobile card.
   ========================================================= */

@media (max-width: 700px) {
    .fit-table-wrap {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .fit-table {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .fit-table thead {
        display: none;
    }

    .fit-table tbody {
        display: block;
        width: 100%;
    }

    .fit-table tr {
        display: block;
        width: 100%;
        padding: 15px 16px 17px;
        border-bottom: 1px solid #e7ece8;
        box-sizing: border-box;
    }

    .fit-table tr:last-child {
        border-bottom: 0;
    }

    .fit-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        border: 0;
    }

    .fit-table td:first-child {
        color: #172019;
        font-weight: 700;
        line-height: 1.4;
    }

    .fit-table td:first-child::before {
        content: "Gartensituation";
        display: block;
        margin-bottom: 4px;
        color: #1f7a4d;
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .fit-table td:nth-child(2) {
        margin-top: 12px;
    }

    .fit-table td:nth-child(2)::before {
        content: "Darauf würden wir achten";
        display: block;
        margin-bottom: 4px;
        color: #1f7a4d;
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }
}

/* =========================================================
   DESKTOP INLINE FINDER CTA — KEEP LABEL ON ONE LINE
   ========================================================= */
@media (min-width: 901px) {
    .finder-inline-cta .button {
        flex: 0 0 auto;
        min-width: 170px;
        white-space: nowrap;
    }
}


/* =========================================================
   RATGEBER HUB — TOPIC CARDS
   ========================================================= */
.guide-topics-section { padding: 76px 0 42px; }
.guide-topics-container { max-width: 1120px; }
.guide-topic-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.guide-topic-card { position:relative; display:flex; min-height:300px; flex-direction:column; padding:32px; border:1px solid #dce6df; border-radius:24px; background:#fff; color:inherit; text-decoration:none; box-shadow:0 12px 34px rgba(38,65,47,.045); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.guide-topic-card:first-child { grid-column:span 2; min-height:280px; background:radial-gradient(circle at 92% 10%,rgba(75,160,107,.13),transparent 28%),#fff; }
.guide-topic-card.is-live:hover { transform:translateY(-3px); border-color:#b9d5c3; box-shadow:0 18px 42px rgba(38,65,47,.08); }
.guide-topic-number { display:grid; place-items:center; width:40px; height:40px; margin-bottom:28px; border-radius:12px; background:#edf7f0; color:#277c50; font-size:.78rem; font-weight:800; }
.guide-topic-card h2 { max-width:650px; margin:10px 0 12px; font-size:clamp(1.55rem,2.5vw,2.25rem); line-height:1.12; letter-spacing:-.035em; }
.guide-topic-card p { max-width:650px; margin:0 0 26px; color:#667169; line-height:1.7; }
.guide-topic-link,.guide-topic-status { margin-top:auto; font-size:.9rem; font-weight:800; }
.guide-topic-link { color:#24794c; }
.guide-topic-status { color:#8a958e; }
.guide-topic-card.is-coming { background:#fafcfb; }
.guide-topic-card.is-coming::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; }
.guide-hub-cta { padding:38px 0 94px; }
.guide-hub-cta-box { display:flex; align-items:center; justify-content:space-between; gap:34px; padding:38px 40px; border-radius:26px; background:#172a1e; color:#fff; }
.guide-hub-cta-box h2 { margin:8px 0 8px; font-size:clamp(1.8rem,3vw,2.6rem); letter-spacing:-.035em; }
.guide-hub-cta-box p { max-width:620px; margin:0; color:#c8d4cb; line-height:1.7; }
.guide-hub-actions { display:flex; flex-wrap:wrap; gap:10px; flex:0 0 auto; }
.guide-hub-cta .button-secondary { border-color:#52675a; color:#fff; background:transparent; }
.slope-example-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:26px; }
.slope-example-grid > div { padding:22px; border:1px solid #dfe7e1; border-radius:18px; background:#fff; }
.slope-example-grid strong { display:block; color:#277c50; font-size:1.65rem; }
.slope-example-grid span { display:block; margin:3px 0 12px; color:#7a857e; font-weight:700; }
.slope-example-grid p { margin:0; font-size:.88rem; line-height:1.6; }
@media(max-width:700px){ .guide-topics-section{padding:52px 0 28px}.guide-topic-grid{grid-template-columns:1fr}.guide-topic-card:first-child{grid-column:auto}.guide-topic-card{min-height:0;padding:26px}.guide-hub-cta{padding:28px 0 68px}.guide-hub-cta-box{align-items:stretch;flex-direction:column;padding:28px}.guide-hub-actions{flex-direction:column}.guide-hub-actions .button{width:100%;box-sizing:border-box;text-align:center}.slope-example-grid{grid-template-columns:1fr} }

/* =========================================================
   DESKTOP GUIDE TABLE — CLEAN COLUMN PROPORTIONS
   Keep specification labels readable without changing the
   established article width or overall table footprint.
   ========================================================= */
@media (min-width: 701px) {
    .fit-table {
        table-layout: fixed;
    }

    .fit-table th:first-child,
    .fit-table td:first-child {
        width: 22%;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
    }

    .fit-table th:nth-child(2),
    .fit-table td:nth-child(2) {
        width: 20%;
    }

    .fit-table th:nth-child(3),
    .fit-table td:nth-child(3) {
        width: 58%;
    }
}


/* =========================================================
   ARTICLE HERO IMAGE — CONSISTENT DESKTOP + MOBILE LAYOUT
   ========================================================= */
.article-container {
    max-width: 1380px;
}

.article-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr);
    gap: 54px;
    align-items: center;
}

.article-hero-copy {
    min-width: 0;
}

.article-hero-copy h1,
.article-hero-copy .article-lead {
    max-width: 760px;
}

.article-hero-media {
    min-width: 0;
    align-self: center;
}

.article-hero-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 18px 46px rgba(34, 62, 43, .10);
}

@media (max-width: 1000px) {
    .article-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(330px, .78fr);
        gap: 34px;
    }
}

@media (max-width: 820px) {
    .article-hero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .article-hero-media,
    .article-hero-media img {
        width: 100%;
    }

    .article-hero-media img {
        border-radius: 20px;
    }
}

@media (max-width: 700px) {
    .article-hero-grid {
        gap: 22px;
    }

    .article-hero-media img {
        border-radius: 18px;
        box-shadow: 0 12px 30px rgba(34, 62, 43, .09);
    }
}


/* Complex-garden hero: align image vertically with the other article heroes */
.article-hero-media.article-hero-media--top {
    align-self: start;
    margin-top: 22px;
}

@media (max-width: 820px) {
    .article-hero-media.article-hero-media--top {
        margin-top: 0;
    }
}