/* Sandhan Design — Unterseiten-Ebene auf cook.css (Landingpages, Ratgeber-Artikel, Rechtsseiten). */

.sub main{padding-bottom:var(--sec)}
.sub .eyebrow{font:500 .76rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--terra-text);margin:0 0 1rem}
.sub h2{font-size:clamp(1.9rem,2.6vw,2.6rem);line-height:1.12;margin:0 0 1rem}
.sub h3{font-size:1.45rem;margin:1.8rem 0 .6rem}
.sub p,.sub li{max-width:46rem}
.sub a:not(.button){text-underline-offset:4px;text-decoration-thickness:1px}
.sub ul,.sub ol{padding-left:1.2rem}
.sub li{margin-bottom:.45rem}
.plain-link{display:inline-flex;align-items:center;gap:.7rem;font-size:.95rem;color:var(--ink);text-decoration:none!important;margin-top:1rem}
.plain-link:before{content:"";width:22px;height:1px;background:currentColor;transform:rotate(-50deg);opacity:.7}
.plain-link:hover{color:var(--terra-text)}
.rail-check{font-size:.82rem;color:var(--text);text-decoration:underline;text-underline-offset:4px}
.rail-lang{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none;margin-top:.4rem}

/* ── Seitenkopf (Landingpages) ─────────────────── */
.seo-hero,.article-hero{margin:2rem var(--gut) 0 clamp(1rem,3vw,3rem);padding:clamp(3.5rem,7vw,7rem) clamp(1.5rem,4vw,4rem);background:#141412;color:#e2ddd4;position:relative;overflow:hidden}
.seo-hero:after,.article-hero:after{content:"";position:absolute;right:-8rem;top:-8rem;width:28rem;height:28rem;border-radius:50%;background:radial-gradient(circle,rgba(196,113,58,.22),transparent 65%);pointer-events:none}
.seo-hero h1,.article-title{font:400 clamp(2.4rem,4.4vw,4.6rem)/1 var(--serif);text-transform:uppercase;letter-spacing:.01em;color:#fbf8f3;margin:0;max-width:20ch}
.seo-hero .lead,.article-hero .lead{max-width:38rem;margin:1.8rem 0 0;font-size:1.12rem;color:#e2ddd4}
.seo-hero .eyebrow,.article-eyebrow{display:block;font:500 .76rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#d9a37d;margin:0 0 1.2rem}
.breadcrumb{font-size:.82rem;color:#bdb6aa;margin:0 0 2.2rem}
.breadcrumb a{color:#e2ddd4}
.seo-hero .button,.landing-cta{margin-top:2rem}
.seo-hero .button{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.landing-facts{list-style:none;padding:0!important;margin:2rem 0 0;display:grid;gap:.7rem;max-width:40rem}
.landing-facts li{position:relative;padding-left:1.9rem;color:#f2eee7}
.landing-facts li:before{content:"";position:absolute;left:0;top:.42em;width:1rem;height:.55rem;border-left:1.5px solid #d9a37d;border-bottom:1.5px solid #d9a37d;transform:rotate(-45deg)}
.landing-proof{margin:1.4rem 0 0}
.landing-proof a{color:#efe9df}
.seo-portrait{float:right;width:min(320px,40%);margin:0 0 2rem 3rem;filter:grayscale(1) contrast(1.05);box-shadow:0 40px 80px -40px rgba(28,27,25,.45)}

/* ── Inhaltsabschnitte ─────────────────────────── */
.seo-section{padding:clamp(4rem,7vw,7rem) var(--gut) 0 clamp(1rem,3vw,3rem)}
.seo-copy{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:clamp(2rem,6vw,7rem)}
.seo-copy>h2{grid-column:1;grid-row:1/span 30;align-self:start;position:sticky;top:3rem}
.seo-copy>*:not(h2){grid-column:2}
.seo-copy>p:first-of-type{margin-top:0}
.seo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0 clamp(1.5rem,3vw,3rem);margin-top:2.5rem}
.seo-card,.seo-grid>article{border-top:1px solid var(--line);padding:1.6rem 0 2rem}
.seo-card h3,.seo-grid>article h3{margin-top:0}
.seo-card h3 a{text-decoration:none}
.seo-card h3 a:hover{color:var(--terra-text)}
.seo-note{font-size:.92rem;color:var(--muted);border-left:2px solid var(--terra);padding-left:1rem;margin-top:2rem}
.seo-section>.packages{margin-top:0}
.packages>article>b{display:none}

/* Abschluss-CTA */
.seo-cta{margin:clamp(4rem,7vw,7rem) var(--gut) 0 clamp(1rem,3vw,3rem);padding:clamp(3rem,6vw,6rem) clamp(1.5rem,4vw,4rem);background:var(--forest);color:#e7ece8}
.seo-cta .eyebrow{color:#b9cbc3}
.seo-cta h2{color:#fbf8f3;font-size:clamp(2rem,3.2vw,3.2rem)}
.seo-cta p{color:#e7ece8}
.seo-cta .button{background:var(--paper);color:var(--ink);border-color:var(--paper);margin:1.4rem 1.5rem 0 0}
.seo-cta .plain-link{color:#fff}

/* Referenzen (projekte) */
.project-case,.reference-example{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.case-preview img,.project-case img{width:100%;box-shadow:0 40px 80px -40px rgba(28,27,25,.45);border:10px solid #fff}
.case-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:1.5rem;font-size:.92rem}
.case-details>*{border-top:1px solid var(--line);padding-top:1rem}
.reference-preview{display:flex;flex-direction:column;justify-content:flex-end;min-height:320px;padding:2.5rem;background:#1b1a18;color:#efe9df;text-decoration:none!important;box-shadow:0 40px 80px -40px rgba(28,27,25,.45);transition:transform .5s cubic-bezier(.2,.7,.1,1)}
.reference-preview:hover{transform:translateY(-6px)}
.reference-preview small{font-size:.72rem;letter-spacing:.18em;color:#d9a37d}
.reference-preview strong{font:400 2.4rem/1.05 var(--serif);margin:1rem 0}
.reference-preview span{font-size:.85rem;color:#bdb6aa}
.reference-preview-light{background:#fff;color:var(--ink)}
.reference-preview-light span{color:var(--muted)}
.reference-preview-light small{color:var(--terra-text)}

/* Website-Check + Kontakt */
.check{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2rem,6vw,7rem);margin:clamp(4rem,7vw,6rem) var(--gut) 0 clamp(1rem,3vw,3rem);padding:clamp(3rem,6vw,6rem);background:var(--forest);color:#e7ece8}
.check h2,.check h3{color:#fbf8f3}
.check strong{color:#fff}
.conversion-check-list{list-style:none;padding:0!important}
.conversion-check-list li{position:relative;padding-left:1.9rem}
.conversion-check-list li:before{content:"";position:absolute;left:0;top:.42em;width:1rem;height:.55rem;border-left:1.5px solid #d9a37d;border-bottom:1.5px solid #d9a37d;transform:rotate(-45deg)}
.check form,.contact-form form{display:grid;gap:1.2rem;align-content:start;background:var(--paper);color:var(--ink);padding:clamp(1.8rem,3vw,2.8rem)}
.check form label,.contact-form form label{display:grid;gap:.4rem;font-size:.8rem;letter-spacing:.06em;color:var(--text)}
.check input:not([type=checkbox]),.check textarea,.contact-form input:not([type=checkbox]),.contact-form textarea{width:100%;font:300 1rem var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid #b9b0a2;padding:.6rem 0;border-radius:0}
.check input:focus,.check textarea:focus,.contact-form input:focus,.contact-form textarea:focus{outline:none;border-bottom-color:var(--forest);box-shadow:0 1px 0 var(--forest)}
.check .consent,.contact-form .consent{display:flex!important;gap:.7rem;align-items:flex-start;letter-spacing:0!important;font-size:.85rem!important}
.check button,.contact-form button{justify-self:start}
.sub .contact-form{margin-top:clamp(3rem,6vw,5rem)}

/* ── Ratgeber-Artikel ──────────────────────────── */
.article-hero-inner{position:relative;z-index:1;max-width:60rem}
.article-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:1.8rem;font-size:.85rem;color:#bdb6aa}
.article-meta span{display:inline-flex;align-items:center;gap:.4rem}
.article-wrap{display:block;max-width:48rem;margin:0 0 0 clamp(1rem,3vw,3rem);padding:clamp(3rem,6vw,5rem) var(--gut) 0 0}
.article-wrap>h2{margin-top:3.4rem}
.article-wrap>p,.article-wrap li{font-size:1.06rem}
.article-wrap .lead{font-size:1.25rem;line-height:1.6;color:var(--ink)}
.back-link{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none!important;margin-bottom:2rem}
.back-link:hover{color:var(--terra-text)}
.article-quick-answer,.box,.source-box,.seo-related{background:#fff;padding:1.8rem 2rem;margin:2rem 0;border-left:3px solid var(--forest);box-shadow:0 20px 50px -35px rgba(28,27,25,.35)}
.article-quick-answer h2,.source-box h2,.seo-related h2{font-size:1.5rem;margin:0 0 .6rem}
.box-title{font:500 .76rem/1.4 var(--sans)!important;letter-spacing:.16em;text-transform:uppercase;color:var(--forest);margin:0 0 .7rem!important}
.box p:last-child,.article-quick-answer p:last-child{margin-bottom:0}
.box-danger{border-left-color:#8b2020;background:#fbf3f2}
.box-danger .box-title{color:#8b2020}
.box-ok{border-left-color:#1e5c38;background:#f1f7f3}
.box-ok .box-title{color:#1e5c38}
.box-note{border-left-color:var(--terra)}
.box-note .box-title{color:var(--terra-text)}
.article-service-link{font-size:.95rem;color:var(--muted)}
.article-table,.compare{width:100%;border-collapse:collapse;margin:2rem 0;font-size:.95rem;background:#fff}
.article-table th,.compare th{font:500 .76rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-align:left;background:var(--forest);color:#fff;padding:.9rem 1rem}
.article-table td,.compare td{padding:.85rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
.table-hint{font-size:.85rem;color:var(--muted)}
.neutral{color:var(--forest)}
.tag{display:inline-block;font-size:.72rem;letter-spacing:.08em;padding:.15rem .5rem;border:1px solid currentColor}
.tag-ok{color:#1e5c38}.tag-warn{color:#8a5a12}.tag-bad{color:#8b2020}
.cost-block{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1.5rem;margin:2.2rem 0;padding:2rem;background:#141412;color:#efe9df}
.cost-block>div{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.18);padding-top:1rem}
.cost-num{font:400 2rem/1.1 var(--serif);color:#fbf8f3}
.cost-lbl{font-size:.8rem;letter-spacing:.06em;color:#bdb6aa;margin-top:.5rem}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:0;border:1px solid var(--line);margin:2rem 0;background:#fff}
.price-card{padding:1.8rem;border-left:1px solid var(--line)}
.price-card:first-child{border-left:0}
.price-card.featured{background:var(--forest);color:#e7ece8}
.price-card-label{font-size:.72rem!important;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0}
.price-card-name{font:400 1.6rem var(--serif)!important;margin:.4rem 0 0!important;color:inherit}
.price-card-price{font:400 2.4rem/1.1 var(--serif)!important;margin:.3rem 0 1rem!important}
.price-card-features{font-size:.9rem;padding-left:1.1rem}
.price-card.featured .price-card-label{color:#b9cbc3}
.faq-mini{margin:3rem 0}
.faq-item-mini{border-top:1px solid var(--line)}
.faq-item-mini:last-child{border-bottom:1px solid var(--line)}
.faq-q-mini{width:100%;display:flex;justify-content:space-between;gap:1rem;text-align:left;background:none;border:0;padding:1.2rem 0;font:400 1.3rem var(--serif);color:var(--ink);cursor:pointer}
.faq-icon-mini{font-family:var(--sans);font-weight:200;transition:transform .3s}
.faq-q-mini[aria-expanded=true] .faq-icon-mini{transform:rotate(45deg)}
.faq-a-mini{display:none;padding:0 0 1.2rem}
.faq-item-mini.open .faq-a-mini,.faq-q-mini[aria-expanded=true]+.faq-a-mini{display:block}
.author-box{display:flex;gap:1.6rem;align-items:center;margin:3.5rem 0;padding:2rem;background:var(--paper-2)}
.author-img{width:96px;height:96px;object-fit:cover;border-radius:50%;filter:grayscale(1)}
.author-name{font:400 1.4rem var(--serif);color:var(--ink)}
.author-bio{font-size:.92rem;margin:.3rem 0 0}
.article-cta{margin:3.5rem 0;padding:clamp(2.5rem,5vw,4rem);background:var(--forest);color:#e7ece8;text-align:center}
.article-cta h2{color:#fbf8f3;margin:0 auto 1rem;max-width:30ch}
.article-cta p{margin-left:auto;margin-right:auto}
.article-cta-inner>p{color:#e7ece8}
.article-contact-form{border-radius:0!important;background:var(--paper)!important}
.article-contact-form button,.article-contact-submit{background:var(--forest)!important;font:500 .78rem var(--sans)!important;letter-spacing:.16em!important;padding:1.1rem 1.6rem!important}
.seo-related ul{margin-top:1rem}

/* ── Rechtsseiten ──────────────────────────────── */
main.section,main.wrap{max-width:none}
.legal,main.wrap>*{max-width:48rem}
main.wrap{padding:clamp(3rem,6vw,5rem) var(--gut) var(--sec) clamp(1rem,3vw,3rem)}
.legal h2,main.wrap h2{font-size:1.7rem;margin:2.6rem 0 .6rem}
.legal address{font-style:normal}
.legal hr{border:0;border-top:1px solid var(--line);margin:1.6rem 0}
.optout{width:100%;max-width:48rem;height:200px;border:1px solid var(--line);background:#fff}
.updated{font-size:.88rem;color:var(--muted)}

@media (max-width:1100px){
  .seo-hero,.article-hero,.seo-cta,.check{margin-left:var(--gut)}
  .seo-section,.article-wrap{padding-left:var(--gut);margin-left:0}
  .article-wrap{padding-left:var(--gut)}
}
@media (max-width:820px){
  .seo-copy,.project-case,.reference-example,.check{grid-template-columns:1fr}
  .seo-copy>h2{position:static;grid-row:auto}
  .seo-copy>*:not(h2){grid-column:1}
  .case-details{grid-template-columns:1fr}
  .seo-portrait{float:none;width:100%;margin:0 0 2rem}
  .author-box{flex-direction:column;align-items:flex-start}
  .article-table,.compare{display:block;overflow-x:auto}
  .seo-hero,.article-hero{padding:3rem 1.4rem}
}
.faq-a-mini.open{display:block}

/* sub-r2 Korrekturen */
.sub .article-hero{margin-left:calc(var(--rail) + clamp(1rem,3vw,3rem))}
.seo-copy:has(h2 ~ h2){display:block}
.seo-copy:has(h2 ~ h2)>*{max-width:46rem}
.seo-copy:has(h2 ~ h2)>h2{position:static;margin-top:2.6rem}
.seo-copy:has(h2 ~ h2)>h2:first-child{margin-top:0}
.seo-copy:has(.seo-portrait){display:block}
.seo-copy:has(.seo-portrait)>h2{position:static}
.seo-copy:has(.seo-portrait)::after{content:"";display:block;clear:both}
@media (max-width:1100px){.sub .article-hero{margin-left:var(--gut)}}
section.seo-portrait{float:none;width:auto;margin:0;filter:none;box-shadow:none;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem);align-items:center}
section.seo-portrait>img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;filter:grayscale(1) contrast(1.05);box-shadow:0 40px 80px -40px rgba(28,27,25,.45)}
@media (max-width:820px){section.seo-portrait{grid-template-columns:1fr}}
:root{--ink-light:#6b665f;--ink-mid:#4a4640}
.seo-hero strong,.article-hero strong,.seo-cta strong,.article-cta strong,.cost-block strong,.price-card.featured strong,.reference-preview strong,.reference-preview-light strong{color:inherit}
.contact-form .eyebrow,.check .eyebrow{color:#e6bb98}
.check .success,.check .error,.check .success h3,.check .success p{color:var(--ink)}
.reference-example>*,.project-case>*{min-width:0}
.reference-preview strong{font-size:clamp(1.6rem,7vw,2.4rem);overflow-wrap:break-word}
@media (max-width:480px){.reference-preview{padding:1.6rem;min-height:240px}}
.sub [style*="#7a7672"],.sub [style*="var(--ink-light)"]{color:var(--muted)!important}

/* Referenz-Projektblöcke: Kopf über volle Breite, Bild links, Text rechts */
.project-case{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(2rem,5vw,5rem);row-gap:0;align-items:start}
.project-case>*{grid-column:2}
.project-case>.eyebrow,.project-case>h2{grid-column:1/-1;grid-row:auto;position:static}
.project-case>h2{margin-bottom:2.5rem;max-width:30ch}
.project-case>.case-preview{grid-column:1;grid-row:3/span 6}
.project-case>p:first-of-type{margin-top:0}
.project-case .case-details{grid-template-columns:1fr;gap:1rem}
@media (max-width:820px){.project-case{grid-template-columns:1fr}.project-case>*,.project-case>.case-preview{grid-column:1;grid-row:auto}.project-case>.case-preview{margin-bottom:1.5rem}}
.case-details dt{font:500 .76rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}.case-details dd{margin:.3rem 0 0}
.seo-card .card-shot-link{display:block;margin-bottom:1.4rem}
.seo-card .card-shot{margin-bottom:0;padding:1rem 1rem 0;background:var(--paper-2)}