/* ========================================
   IMPRESSUM  (body.cms-impressum / .impressum)
   Rohes Stock-h3/p/br -> ruhiges, scanbares Vertrauensdokument (SS 5 TMG).
   Markup + page_layout=1column kommen aus apply-impressum-content.php (Phase 7d3);
   die Sidebar-Neutralisierung unten ist defensiv (greift auch im 2col-Altzustand).
   Grün sparsam (Links, Bio-Button, Identity-Panel-Tint); Fliesstext #2f2f2f.
======================================== */
body.cms-impressum {
    --imp-ink: #21262b;   /* Ueberschriften (~13:1) */
    --imp-body: #2f2f2f;  /* Fliesstext (~12.6:1) */
    --imp-muted: #586069; /* Labels/Feinabdruck (~6.4:1) */
    --imp-line: #e7e9ea;  /* Hairlines */
    --imp-tint: color-mix(in srgb, var(--theme-color) 6%, #fff);
    --imp-tint-line: color-mix(in srgb, var(--theme-color) 22%, var(--imp-line));
}

/* Tote linke Spalte killen (1column kommt aus dem Seed; hier defensiv) */
body.cms-impressum .column.main {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    float: none !important;
}
body.cms-impressum .sidebar-main,
body.cms-impressum .sidebar-additional { display: none !important; }

/* Lese-Container: ruhiges Mass, zentriert */
body.cms-impressum .impressum {
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3.25rem) 0 clamp(2.5rem, 6vw, 4.5rem);
    color: var(--imp-body);
    font-size: 15px !important;
    line-height: 1.72;
}

/* Kopf */
body.cms-impressum .impressum__head {
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--imp-line);
}
body.cms-impressum .impressum__head h1 {
    margin: 0 0 .4rem !important;
    font-size: clamp(1.9rem, 4.5vw, 2.6rem) !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--imp-ink) !important;
    text-transform: none !important;
    text-wrap: balance;
}
body.cms-impressum .impressum__sub {
    margin: 0 !important;
    font-size: .95rem !important;
    font-weight: 500 !important;
    color: var(--imp-muted) !important;
}

/* Sektionen */
body.cms-impressum .impressum__section { margin-top: clamp(2rem, 4.5vw, 3rem); }
body.cms-impressum .impressum__section h2 {
    margin: 0 0 1.1rem !important;
    font-size: 1.18rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    color: var(--imp-ink) !important;
    text-transform: none !important;
}
body.cms-impressum .impressum__section > p {
    margin: 0;
    max-width: 68ch;
    color: var(--imp-body);
}

/* Label/Wert-Faktenliste (scanbar statt p+br) */
body.cms-impressum .impressum__facts { margin: 0; }
body.cms-impressum .impressum__facts .fact {
    display: grid;
    grid-template-columns: minmax(180px, 230px) 1fr;
    gap: .3rem 2rem;
    padding: .85rem 0;
    border-top: 1px solid var(--imp-line);
}
body.cms-impressum .impressum__facts .fact:last-child { border-bottom: 1px solid var(--imp-line); }
body.cms-impressum .impressum__facts dt {
    margin: 0;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .01em;
    color: var(--imp-muted);
}
body.cms-impressum .impressum__facts dd {
    margin: 0;
    color: var(--imp-body);
}

/* Identitaetsblock: EIN ruhiges Panel (Pflichtangaben hervorgehoben) */
body.cms-impressum .impressum__identity {
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--imp-tint);
    border: 1px solid var(--imp-tint-line);
    border-radius: 8px;
    padding: .25rem clamp(1.1rem, 3vw, 1.75rem) 1.1rem;
}
body.cms-impressum .impressum__identity .fact { border-top-color: color-mix(in srgb, var(--theme-color) 14%, var(--imp-line)); }
body.cms-impressum .impressum__identity .fact:first-child { border-top: 0; }
body.cms-impressum .impressum__identity .fact:last-child { border-bottom: 0; }

/* Links: Marken-Grün + Unterstrich-Affordance (nicht nur Farbe) */
body.cms-impressum .impressum a {
    color: var(--theme-color);
    font-weight: 500;
    text-underline-offset: 2px;
    text-decoration-color: color-mix(in srgb, var(--theme-color) 45%, transparent);
    transition: color .18s ease, text-decoration-color .18s ease;
}
body.cms-impressum .impressum a:hover { text-decoration-color: var(--theme-color); }

/* Bio-Zertifikat: sekundaerer Outline-Button */
body.cms-impressum .impressum__btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1.15rem;
    padding: .7rem 1.15rem;
    border: 1.5px solid var(--theme-color);
    border-radius: 8px;
    font-weight: 600 !important;
    text-decoration: none !important;
    color: var(--theme-color) !important;
    background: #fff;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
body.cms-impressum .impressum__btn:hover {
    background: var(--theme-color);
    color: #fff !important;
    box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--theme-color) 70%, transparent);
}
body.cms-impressum .impressum__btn-meta {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .12rem .42rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--theme-color) 14%, #fff);
    color: var(--theme-color);
}
body.cms-impressum .impressum__btn:hover .impressum__btn-meta { background: rgba(255,255,255,.22); color: #fff; }

/* Bildnachweis: Feinabdruck als Liste */
body.cms-impressum .impressum__credits ul { margin: 0; padding: 0; list-style: none; }
body.cms-impressum .impressum__credits li {
    padding: .5rem 0;
    border-top: 1px solid var(--imp-line);
    font-size: .88rem;
    line-height: 1.6;
    color: var(--imp-muted);
}

/* Mobil: Label ueber Wert stapeln, Button voll */
@media (max-width: 600px) {
    body.cms-impressum .impressum__facts .fact {
        grid-template-columns: 1fr;
        gap: .15rem;
        padding: .8rem 0;
    }
    body.cms-impressum .impressum__btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    body.cms-impressum .impressum a,
    body.cms-impressum .impressum__btn { transition: none; }
}


/* ========================================
   RECHTSSEITEN  (body.cms-agb / cms-datenschutz / cms-widerruf)
   Lange, extern gepflegte Rechtstexte (Haendlerbund-Format, nummerierte
   Abschnitte) -> "Rechnungsrueckseiten"-Look: zweispaltig gesetzt am Desktop
   (column-rule wie ein gesetzter Druck), einspaltig + linksbuendig am Handy.
   NUR CSS (Content extern gepflegt, kein Rewrite). Impressum-Tokens geerbt.
======================================== */
body.cms-agb,
body.cms-datenschutz,
body.cms-widerruf {
    --lg-ink: #21262b;
    --lg-body: #2f2f2f;   /* 12.6:1 auch bei 14px */
    --lg-muted: #586069;
    --lg-line: #dfe2e4;
}

/* Tote linke Spalte killen, volle Breite fuer den Satz */
body.cms-agb .sidebar-main, body.cms-agb .sidebar-additional,
body.cms-datenschutz .sidebar-main, body.cms-datenschutz .sidebar-additional,
body.cms-widerruf .sidebar-main, body.cms-widerruf .sidebar-additional { display: none !important; }

/* Verwaister Magento-Seitentitel ausblenden (echte Ueberschrift = Content-H1;
   nur Datenschutz zeigt ihn redundant ueber der H1) */
body.cms-agb .page-title-wrapper,
body.cms-datenschutz .page-title-wrapper,
body.cms-widerruf .page-title-wrapper { display: none !important; }

body.cms-agb .column.main,
body.cms-datenschutz .column.main,
body.cms-widerruf .column.main {
    width: 100% !important;
    float: none !important;
    max-width: 1180px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.25rem);
    color: var(--lg-body);
    font-size: 14px;
    line-height: 1.62;
}

/* Typo-Hierarchie (gilt ein- wie zweispaltig) */
body.cms-agb .column.main h1,
body.cms-datenschutz .column.main h1,
body.cms-widerruf .column.main h1 {
    font-size: clamp(1.7rem, 3.4vw, 2.3rem) !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em;
    color: var(--lg-ink) !important;
    text-transform: none !important;
    text-align: left;
    margin: 0 0 .25rem !important;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--lg-line);
}
body.cms-agb .column.main h2,
body.cms-datenschutz .column.main h2,
body.cms-widerruf .column.main h2 {
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    color: var(--lg-ink) !important;
    text-transform: none !important;
    margin: 1.5rem 0 .5rem !important;
    break-after: avoid;
    -webkit-column-break-after: avoid;
}
body.cms-agb .column.main h3,
body.cms-datenschutz .column.main h3,
body.cms-widerruf .column.main h3 {
    font-size: .92rem !important;
    font-weight: 700 !important;
    color: var(--lg-ink) !important;
    text-transform: none !important;
    margin: 1.1rem 0 .35rem !important;
    break-after: avoid;
    -webkit-column-break-after: avoid;
}
body.cms-agb .column.main p,
body.cms-datenschutz .column.main p,
body.cms-widerruf .column.main p { margin: 0 0 .7rem; }
body.cms-agb .column.main ul, body.cms-agb .column.main ol,
body.cms-datenschutz .column.main ul, body.cms-datenschutz .column.main ol,
body.cms-widerruf .column.main ul, body.cms-widerruf .column.main ol {
    margin: 0 0 .85rem; padding-left: 1.35rem;
}
body.cms-agb .column.main li,
body.cms-datenschutz .column.main li,
body.cms-widerruf .column.main li { margin: 0 0 .3rem; line-height: 1.55; }
body.cms-agb .column.main a,
body.cms-datenschutz .column.main a,
body.cms-widerruf .column.main a {
    color: var(--theme-color);
    text-underline-offset: 2px;
    word-break: break-word;
}

/* Zweispaltiger "Rechnungsrueckseiten"-Satz ab Desktop */
@media (min-width: 992px) {
    body.cms-agb .column.main,
    body.cms-datenschutz .column.main,
    body.cms-widerruf .column.main {
        columns: 2;
        column-gap: 3rem;
        column-rule: 1px solid var(--lg-line);
        text-align: justify;
        hyphens: auto;
        -webkit-hyphens: auto;
    }
    /* h1 spannt beide Spalten (Dokumentkopf) */
    body.cms-agb .column.main > h1,
    body.cms-datenschutz .column.main > h1,
    body.cms-widerruf .column.main > h1 {
        column-span: all;
        -webkit-column-span: all;
        margin-bottom: 1.25rem !important;
        text-align: left;
    }
    /* Absaetze/Listen nicht ueber den Spaltenumbruch zerreissen */
    body.cms-agb .column.main p, body.cms-agb .column.main li,
    body.cms-datenschutz .column.main p, body.cms-datenschutz .column.main li,
    body.cms-widerruf .column.main p, body.cms-widerruf .column.main li {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }
}

/* Handy: eine Spalte, linksbuendig (Mehrspalten brechen hier unleserlich) */
@media (max-width: 991px) {
    body.cms-agb .column.main,
    body.cms-datenschutz .column.main,
    body.cms-widerruf .column.main {
        columns: 1 !important;
        column-rule: none !important;
        text-align: left !important;
        font-size: 15px;
        line-height: 1.7;
    }
}


/* ========================================
   UEBER UNS  (body.cms-ueber-uns)
   Gruender-Geschichte (Brueder Michaelis, seit 2010) -> editoriales,
   ruhiges Marken-Treatment statt nackter Textwand im 3-Spalten-Layout.
   Lead-Standfirst + gruene Initiale, Kapitel-Rhythmus. NUR CSS, kein
   Fake-Foto (CSP blockt extern, keine echten Gruenderfotos vorhanden).
   Impressum-Tokens geerbt.
======================================== */
body.cms-ueber-uns {
    --ub-ink: #21262b;
    --ub-body: #2f2f2f;   /* 12.6:1 */
    --ub-lead: #3c4248;   /* Standfirst, ~9:1 */
    --ub-line: #e7e9ea;
}

/* Tote Spalten des 3-Spalten-Layouts killen */
body.cms-ueber-uns .sidebar-main,
body.cms-ueber-uns .sidebar-additional { display: none !important; }

body.cms-ueber-uns .column.main {
    width: 100% !important;
    float: none !important;
    display: block !important;   /* Porto setzt im 3-Spalten-Layout inline-block -> margin:auto zentriert nur Block */
    max-width: 680px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: clamp(1.5rem, 4vw, 3.25rem) 0 clamp(2.5rem, 6vw, 4.5rem);
    color: var(--ub-body);
    font-size: 16px;
    line-height: 1.75;
}

body.cms-ueber-uns .column.main h1 {
    font-size: clamp(2rem, 5vw, 2.9rem) !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--ub-ink) !important;
    text-transform: none !important;
    text-align: left;
    margin: 0 0 1.2rem !important;
    padding-bottom: 1.05rem;
    border-bottom: 1px solid var(--ub-line);
    text-wrap: balance;
}

/* Lead = erster Absatz (Standfirst) + gruene Initiale */
body.cms-ueber-uns .column.main > p:first-of-type {
    font-size: 1.18rem;
    line-height: 1.62;
    color: var(--ub-lead);
    margin-bottom: 2rem;
}
body.cms-ueber-uns .column.main > p:first-of-type::first-letter {
    float: left;
    font-size: 3.05rem;
    line-height: 0.84;
    font-weight: 700;
    color: var(--theme-color);
    margin: 0.06em 0.12em 0 0;
}

/* Kapitel-Ueberschriften */
body.cms-ueber-uns .column.main h2 {
    font-size: clamp(1.3rem, 2.6vw, 1.6rem) !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    color: var(--ub-ink) !important;
    text-transform: none !important;
    margin: clamp(2.25rem, 4vw, 3rem) 0 0.85rem !important;
    text-wrap: balance;
}

body.cms-ueber-uns .column.main p { margin: 0 0 1.15rem; }
body.cms-ueber-uns .column.main a {
    color: var(--theme-color);
    text-underline-offset: 2px;
    text-decoration-color: color-mix(in srgb, var(--theme-color) 45%, transparent);
    transition: text-decoration-color .18s ease;
}
body.cms-ueber-uns .column.main a:hover { text-decoration-color: var(--theme-color); }

@media (max-width: 600px) {
    body.cms-ueber-uns .column.main { font-size: 15.5px; }
    body.cms-ueber-uns .column.main > p:first-of-type { font-size: 1.08rem; }
    body.cms-ueber-uns .column.main > p:first-of-type::first-letter { font-size: 2.7rem; }
}


/* ========================================
   ZAHLUNG  (body.cms-zahlung / .zahlung)
   Float-Layout (inline-style-Logos, <br><br>) -> ruhige, scanbare
   Media-Object-Zeilen (Logo links, Name/Text rechts, Haarlinien-Trenner).
   Markup + page_layout=1column + content_heading='' kommen aus
   apply-zahlung-content.php (Phase 7d4). Token-Vokabular vom Impressum geerbt.
======================================== */
body.cms-zahlung {
    --zl-ink: #21262b;   /* Ueberschriften */
    --zl-body: #2f2f2f;  /* Fliesstext (~12.6:1) */
    --zl-muted: #586069; /* Sub/Feinabdruck */
    --zl-line: #e7e9ea;  /* Hairlines */
}

/* Tote linke Spalte killen + verwaisten Magento-Titel ausblenden (Content bringt eigenes h1) */
body.cms-zahlung .column.main {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    float: none !important;
}
body.cms-zahlung .sidebar-main,
body.cms-zahlung .sidebar-additional { display: none !important; }
body.cms-zahlung .page-title-wrapper { display: none !important; }

/* Lese-Container */
body.cms-zahlung .zahlung {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3.25rem) 0 clamp(2.5rem, 6vw, 4.5rem);
    color: var(--zl-body);
    font-size: 15px !important;
    line-height: 1.72;
}

/* Kopf */
body.cms-zahlung .zahlung__head {
    margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--zl-line);
}
body.cms-zahlung .zahlung__head h1 {
    margin: 0 0 .4rem !important;
    font-size: clamp(1.9rem, 4.5vw, 2.6rem) !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--zl-ink) !important;
    text-transform: none !important;
    text-wrap: balance;
}
body.cms-zahlung .zahlung__sub {
    margin: 0 !important;
    font-size: .95rem !important;
    font-weight: 500 !important;
    color: var(--zl-muted) !important;
}
body.cms-zahlung .zahlung__lead {
    margin: clamp(1.25rem, 3vw, 1.75rem) 0 0 !important;
    max-width: 64ch;
    color: var(--zl-body);
}

/* Methodenliste: Media-Object-Zeilen */
body.cms-zahlung .zahlung__methods {
    list-style: none;
    margin: clamp(1.5rem, 3.5vw, 2.25rem) 0 0;
    padding: 0;
}
body.cms-zahlung .pay {
    display: grid;
    grid-template-columns: 168px 1fr;
    gap: clamp(1rem, 3vw, 2rem);
    align-items: start;
    padding: clamp(1.25rem, 3vw, 1.75rem) 0;
    border-top: 1px solid var(--zl-line);
}
body.cms-zahlung .pay:last-child { border-bottom: 1px solid var(--zl-line); }
body.cms-zahlung .pay__logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 48px;
}
body.cms-zahlung .pay__logo img {
    max-width: 100%;
    max-height: 52px;
    width: auto;
    height: auto;
}
body.cms-zahlung .pay__name {
    margin: 0 0 .5rem !important;
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    color: var(--zl-ink) !important;
    text-transform: none !important;
}
body.cms-zahlung .pay__body p {
    margin: 0;
    color: var(--zl-body);
    max-width: 60ch;
}

/* Mobil: Logo ueber Text stapeln */
@media (max-width: 600px) {
    body.cms-zahlung .pay {
        grid-template-columns: 1fr;
        gap: .85rem;
        padding: 1.35rem 0;
    }
}


/* ========================================
   LIEFERUNG  (body.cms-lieferung / .lieferung)
   <table>-in-<p> + inline-styles + Flaggen-<br>-Listen -> echte <table>
   (thead/tbody), gruener Tabellenkopf, Gratisversand-Zellen gruen, Flaggen-
   Laenderlisten als <ul>. Markup/Layout aus apply-lieferung-content.php (7d5).
======================================== */
body.cms-lieferung {
    --lf-ink: #21262b;
    --lf-body: #2f2f2f;
    --lf-muted: #586069;
    --lf-line: #e7e9ea;
    --lf-head: color-mix(in srgb, var(--theme-color) 78%, black); /* dunkleres Gruen -> Weiss >= 4.5:1 (verifiziert) */
    --lf-free: color-mix(in srgb, var(--theme-color) 78%, black); /* gruener Text, kontraststark */
    --lf-tint: color-mix(in srgb, var(--theme-color) 7%, #fff);
    --lf-tint-line: color-mix(in srgb, var(--theme-color) 28%, var(--lf-line));
}

body.cms-lieferung .column.main {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    float: none !important;
}
body.cms-lieferung .sidebar-main,
body.cms-lieferung .sidebar-additional { display: none !important; }
body.cms-lieferung .page-title-wrapper { display: none !important; }

body.cms-lieferung .lieferung {
    max-width: 920px;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3.25rem) 0 clamp(2.5rem, 6vw, 4.5rem);
    color: var(--lf-body);
    font-size: 15px !important;
    line-height: 1.7;
}

/* Kopf */
body.cms-lieferung .lieferung__head {
    margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--lf-line);
}
body.cms-lieferung .lieferung__head h1 {
    margin: 0 0 .4rem !important;
    font-size: clamp(1.9rem, 4.5vw, 2.6rem) !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--lf-ink) !important;
    text-transform: none !important;
    text-wrap: balance;
}
body.cms-lieferung .lieferung__sub {
    margin: 0 !important;
    font-size: .95rem !important;
    font-weight: 500 !important;
    color: var(--lf-muted) !important;
}

/* Intro: DHL-Logo + Satz */
body.cms-lieferung .lieferung__intro {
    display: flex;
    align-items: center;
    gap: clamp(.85rem, 2.5vw, 1.5rem);
    flex-wrap: wrap;
    margin-top: clamp(1.25rem, 3vw, 1.75rem);
}
body.cms-lieferung .lieferung__dhl {
    width: auto;
    max-height: 52px;
    flex: none;
}
body.cms-lieferung .lieferung__intro p { margin: 0; max-width: 56ch; }

/* Gratisversand-Hervorhebung (Schluesselargument) */
body.cms-lieferung .lieferung__free {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: clamp(1.25rem, 3vw, 1.75rem) 0 0 !important;
    padding: .85rem 1.15rem;
    background: var(--lf-tint);
    border: 1px solid var(--lf-tint-line);
    border-radius: 8px;
    font-weight: 600;
    color: var(--lf-free);
}
body.cms-lieferung .lieferung__free::before {
    content: "";
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--theme-color);
    /* weisser Haken */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 13 10 18 19 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
}

/* Sektionen */
body.cms-lieferung .lieferung__section { margin-top: clamp(2rem, 4.5vw, 3rem); }
body.cms-lieferung .lieferung__section h2 {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.1rem !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    color: var(--lf-ink) !important;
    text-transform: none !important;
}
body.cms-lieferung .lieferung__section h2 .flag { width: 26px; }
body.cms-lieferung .lieferung__section > p {
    margin: 0 0 1rem;
    max-width: 72ch;
    color: var(--lf-body);
}

/* Tabellen */
body.cms-lieferung .ship-table-wrap {
    border: 1px solid var(--lf-line);
    border-radius: 8px;
    overflow: hidden;
    overflow-x: auto;
}
body.cms-lieferung .ship-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}
body.cms-lieferung .ship-table--ausland { min-width: 540px; }
body.cms-lieferung .ship-table thead th {
    background: var(--lf-head);
    color: #fff;
    text-align: left;
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .015em;
    line-height: 1.35;
    padding: .8rem 1rem;
    vertical-align: bottom;
}
body.cms-lieferung .ship-table tbody th,
body.cms-lieferung .ship-table tbody td {
    padding: .9rem 1rem;
    border-top: 1px solid var(--lf-line);
    vertical-align: top;
    text-align: left;
    color: var(--lf-body);
}
body.cms-lieferung .ship-table tbody tr:first-child th,
body.cms-lieferung .ship-table tbody tr:first-child td { border-top: 0; }
/* Wert-Spalten zentriert; Beschreibung links */
body.cms-lieferung .ship-table th:not(:first-child),
body.cms-lieferung .ship-table td:not(:first-child) { text-align: center; }
body.cms-lieferung .ship-table .ship-table__country { font-weight: 600; color: var(--lf-ink); white-space: nowrap; }
body.cms-lieferung .ship-table td.is-free {
    color: var(--lf-free);
    font-weight: 700;
    white-space: nowrap;
}
body.cms-lieferung .ship-table .ship-table__days {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--lf-ink);
}
body.cms-lieferung .ship-table--times td:first-child { line-height: 1.6; }

/* Flaggen-Laenderliste in der Auslandstabelle */
body.cms-lieferung .ship-table__countries .ctry {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
body.cms-lieferung .ctry li {
    display: flex;
    align-items: center;
    gap: .55rem;
    white-space: nowrap;
}
body.cms-lieferung .flag {
    width: 20px;
    height: auto;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.10);
    flex: none;
}

/* Hinweise */
body.cms-lieferung .lieferung__note {
    margin: .9rem 0 0;
    font-size: .9rem;
    color: var(--lf-muted);
    max-width: 72ch;
}
body.cms-lieferung .lieferung__hint {
    margin: .65rem 0 0;
    font-weight: 600;
    color: var(--lf-ink);
}

/* Links: Marken-Gruen mit Unterstrich-Affordance (wie Impressum) */
body.cms-lieferung .lieferung a {
    color: var(--theme-color);
    font-weight: 500;
    text-underline-offset: 2px;
    text-decoration-color: color-mix(in srgb, var(--theme-color) 45%, transparent);
    transition: color .18s ease, text-decoration-color .18s ease;
}
body.cms-lieferung .lieferung a:hover { text-decoration-color: var(--theme-color); }

@media (max-width: 600px) {
    body.cms-lieferung .ship-table { font-size: .9rem; }
    body.cms-lieferung .ship-table thead th,
    body.cms-lieferung .ship-table tbody th,
    body.cms-lieferung .ship-table tbody td { padding: .7rem .65rem; }
}

@media (prefers-reduced-motion: reduce) {
    body.cms-lieferung .lieferung a { transition: none; }
}


/* ========================================
   WIDERRUF  (body.cms-widerruf)
   Formular-tragende Seite -> NICHT in den schmalen, justierten 2-Spalten-Satz
   (dort brachen die Muster-Widerrufsformular-Unterstriche um und das Layout
   zerfiel). Stattdessen voll ausgebreitet + einspaltig + linksbuendig: die
   ___-Laeufe passen so in eine Zeile. Bewusst rein CSS (kein Seiten-JS).
======================================== */
body.cms-widerruf .column.main {
    columns: 1 !important;
    column-rule: none !important;
    text-align: left !important;
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
    max-width: 1180px;
}


/* ========================================
   KONTAKTSEITE  (body.contact-index-index)
   Funktionale Flaeche, kein Brand-Hero: Intro + Kontaktformular, einspaltig.
   Google-Map entfernt (porto_settings/contacts/enable=0). Marken-Akzent grun
   (var(--theme-color)) traegt die Wertigkeit, keine Fotografie noetig.
   Submit = Shop-CTA-Grun (kein Orange/keine Versalien).
======================================== */
body.contact-index-index .om-contact {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 0 16px;
}

/* Seitentitel-H1 (global ausgeblendet) hier gezielt als Intro-Heading zeigen */
body.contact-index-index .page-title-wrapper {
    display: block !important;
    margin: 0 auto 6px;
    max-width: 680px;
}
body.contact-index-index .page-title-wrapper .page-title {
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    color: #2f2f2f;
    text-transform: none;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

body.contact-index-index .om-contact__lead {
    max-width: 60ch;
    margin: 0 0 28px;
    font-size: 16px;
    line-height: 1.65;
    color: #4a4a4a;
    text-wrap: pretty;
}

/* ---- Formular (einspaltig, schmale lesbare Spalte via .om-contact) ---- */
body.contact-index-index .form.contact {
    width: 100%;
    min-width: 0;
}
body.contact-index-index .form.contact .fieldset {
    margin: 0;
}
body.contact-index-index .form.contact .legend {
    width: 100%;
    margin: 0 0 18px;
    padding: 0 0 12px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 19px;
    font-weight: 700;
    color: #2f2f2f;
    text-transform: none;
}
body.contact-index-index .form.contact .legend span { border: 0; }

body.contact-index-index .form.contact .field {
    margin: 0 0 16px;
}
body.contact-index-index .form.contact .field > .label {
    display: block;
    margin: 0 0 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: #3a3a3a;
    text-align: left;
    float: none;
    width: auto;
    padding: 0;
}
body.contact-index-index .form.contact .field .om-optional {
    font-weight: 400;
    color: #8a8a8a;
}
/* Pflichtfeld-Stern liefert das Basis-Theme bereits auf .label::after
   (NICHT verdoppeln). Ink statt Default-Rot: Markengruen bleibt Aktionen
   vorbehalten (gruener Stern sah aus wie ein Link, 3,4:1). */
body.contact-index-index .form.contact .field.required > .label:after,
body.contact-index-index .form.contact .field._required > .label:after {
    color: #2f2f2f !important;
}
/* Erklaerung zum Stern, oben im Formular */
body.contact-index-index .form.contact .om-required-hint {
    margin: 0 0 20px;
    font-size: 13px;
    color: #6a6a6a;
}
body.contact-index-index .form.contact .om-required-hint .om-req-star {
    color: #2f2f2f;
    font-weight: 700;
}
body.contact-index-index .form.contact .control {
    width: 100%;
}
body.contact-index-index .form.contact .input-text,
body.contact-index-index .form.contact textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d6d6d6 !important;
    border-radius: 9px !important;
    background: #fff;
    font-size: 15px;
    color: #2f2f2f;
    box-shadow: none;
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
body.contact-index-index .form.contact textarea {
    min-height: 168px;
    resize: vertical;
    line-height: 1.55;
}
body.contact-index-index .form.contact .input-text::placeholder,
body.contact-index-index .form.contact textarea::placeholder {
    color: #8a8a8a;
}
body.contact-index-index .form.contact .input-text:focus,
body.contact-index-index .form.contact textarea:focus {
    border-color: var(--theme-color) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-color) 22%, transparent) !important;
    outline: none;
}

/* ---- Submit: Shop-CTA-Grun, kein Orange, keine Versalien ---- */
body.contact-index-index .form.contact .actions-toolbar {
    margin: 22px 0 0;
    padding: 0;
}
body.contact-index-index .form.contact .actions-toolbar .primary {
    float: none;
}
body.contact-index-index .form.contact button.action.submit.primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 30px;
    border: 0 !important;
    border-radius: 9px !important;
    background: var(--theme-color) !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    text-transform: none !important;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color 150ms ease-out, transform 120ms ease-out;
}
body.contact-index-index .form.contact button.action.submit.primary:hover {
    background: color-mix(in srgb, var(--theme-color) 86%, #000) !important;
}
body.contact-index-index .form.contact button.action.submit.primary:active {
    transform: translateY(1px);
}
body.contact-index-index .form.contact button.action.submit.primary:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--theme-color) 60%, #000);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    body.contact-index-index .form.contact .input-text,
    body.contact-index-index .form.contact textarea,
    body.contact-index-index .form.contact button.action.submit.primary {
        transition: none;
    }
}


/* ========================================
   TEEZUBEREITUNG  (body.cms-teezubereitung / #teezubereitung)
   Langer 7-Kapitel-Ratgeber -> ruhiges, editoriales Long-Read-Treatment
   statt Blocksatz-Textwand im 3-Spalten-Layout. Eine visuelle Sprache mit
   ueber-uns (zentrierte Lesespalte, Lead+gruene Initiale), erweitert um ein
   echtes Kapitel-Register (TOC), Figuren und eine gruen-koepfige Datentabelle.
   NUR CSS. Spezifitaet: Alt-Content hat #teezubereitung (ID=100) + img-inline
   style="float:left" (=1000) -> ALLE Overrides brauchen !important.
   Tokens vom ueber-uns/Impressum geerbt.
======================================== */
body.cms-teezubereitung {
    --tz-ink: #21262b;     /* Ueberschriften */
    --tz-body: #2f2f2f;    /* Fliesstext (~12.6:1) */
    --tz-lead: #3c4248;    /* Lead/Standfirst (~9:1) */
    --tz-muted: #586069;   /* Sub/Bildhinweise */
    --tz-line: #e7e9ea;    /* Hairlines */
    --tz-line-2: #d8dcdf;  /* kraeftigere Linie */
    --tz-tint: #f3f8f6;    /* gruen getoenter Surface (Brand-Hue, nicht warm) */
    --tz-link: #0e7560;    /* dunkleres Grun fuer Inline-Body-Links (~5:1) */
}

/* Tote Spalten des 3-Spalten-Layouts killen, Lesespalte zentrieren.
   h1.page-title BLEIBT (sie IST die Schlagzeile; Content hat kein eigenes h1). */
body.cms-teezubereitung .sidebar-main,
body.cms-teezubereitung .sidebar-additional { display: none !important; }

body.cms-teezubereitung .column.main {
    width: 100% !important;
    float: none !important;
    display: block !important;   /* 3-Spalten-Layout setzt inline-block -> margin:auto greift nur auf block */
    max-width: 860px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: clamp(1rem, 2.5vw, 1.6rem) 0 clamp(2.5rem, 6vw, 4.5rem);
}

/* --- Schlagzeile (page-title-wrapper liegt AUSSERHALB .column.main, direkt
   unter MAIN.page-main -> selbe 760px-Lesebreite zentrieren, damit Headline
   und Artikel buendig sind) ------------------------------------------------ */
body.cms-teezubereitung .page-title-wrapper {
    max-width: 860px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: clamp(1.25rem, 3.5vw, 2.75rem);
}
body.cms-teezubereitung .page-title-wrapper .page-title {
    position: relative;
    display: block !important;
    font-size: clamp(1.85rem, 3.8vw, 2.55rem) !important;
    line-height: 1.14 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--tz-ink) !important;
    text-transform: none !important;
    text-align: left !important;
    margin: 0 !important;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--tz-line);
    text-wrap: balance;
}
body.cms-teezubereitung .page-title-wrapper .page-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 56px;
    height: 3px;
    background: var(--theme-color);
    border-radius: 3px;
}

/* --- Lesecontainer ----------------------------------------------------- */
body.cms-teezubereitung #teezubereitung {
    text-align: left !important;   /* Alt-Inline-Style: #teezubereitung{text-align:justify} */
    color: var(--tz-body);
    font-size: 16px;
    line-height: 1.78;
}
body.cms-teezubereitung #teezubereitung::after {
    content: "";
    display: table;
    clear: both;   /* gefloatete Figuren am Ende einfangen */
}
body.cms-teezubereitung #teezubereitung p {
    text-align: left !important;
    margin: 0 0 1.2rem;
    max-width: none;   /* volle Spaltenbreite (860px) -> buendig mit Headline/TOC/Tabelle */
    color: var(--tz-body);
}
body.cms-teezubereitung #teezubereitung strong { color: var(--tz-ink); font-weight: 700; }

/* Lead = erster Absatz (Standfirst) + gruene Initiale */
body.cms-teezubereitung #teezubereitung > p:first-of-type {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--tz-lead);
    margin-bottom: 1.4rem;
    max-width: none;   /* Lead ebenfalls volle Spaltenbreite */
}
body.cms-teezubereitung #teezubereitung > p:first-of-type::first-letter {
    float: left;
    font-size: 3.1rem;
    line-height: 0.82;
    font-weight: 700;
    color: var(--theme-color);
    margin: 0.06em 0.14em 0 0;
}

/* --- Kapitel-Register --------------------------------------------------- */
/* Legacy-Markup ist verschachtelt: <ol> > <h4> > <li> > <a>. Jede Registerzeile
   ist ein <h4> (NICHT <li>). Generische h4-Stile hier zuruecksetzen. */
body.cms-teezubereitung #teezubereitung > ol {
    counter-reset: tzc;
    list-style: none !important;
    margin: 2.25rem 0 0.5rem !important;
    padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 1.9rem) clamp(0.6rem, 1.5vw, 0.9rem) !important;
    background: var(--tz-tint);
    border: 1px solid var(--tz-line);
    border-radius: 10px;
    max-width: none;
}
body.cms-teezubereitung #teezubereitung > ol::before {
    content: "Auf dieser Seite";
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tz-muted);
    margin: 0 0 0.4rem;
}
body.cms-teezubereitung #teezubereitung > ol > h4 {
    counter-increment: tzc;
    position: relative;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    border-top: 1px solid var(--tz-line);
}
body.cms-teezubereitung #teezubereitung > ol > h4:first-of-type { border-top: 0; }
body.cms-teezubereitung #teezubereitung > ol > h4 > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.cms-teezubereitung #teezubereitung > ol > h4 > li > a {
    position: relative;   /* Bezugsrahmen fuer Nummer + Chevron -> liegen ueber dem Hover-Bg und wandern mit */
    display: block;
    padding: 0.7rem 2rem 0.7rem 2.4rem;
    color: var(--tz-ink) !important;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none !important;
    border-radius: 7px;
    transition: color 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.18s ease;
}
/* Kapitelnummer als a::before (counter-increment bleibt auf dem h4) */
body.cms-teezubereitung #teezubereitung > ol > h4 > li > a::before {
    content: counter(tzc);
    position: absolute;
    left: 0;
    top: 0.7rem;
    width: 1.8rem;
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--theme-color);
    text-align: left;
}
body.cms-teezubereitung #teezubereitung > ol > h4 > li > a::after {
    content: "\203A";   /* › */
    position: absolute;
    right: 0.7rem;
    top: 0.62rem;
    color: var(--tz-line-2);
    font-size: 1.1rem;
    transition: color 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
body.cms-teezubereitung #teezubereitung > ol > h4 > li > a:hover {
    color: var(--theme-color) !important;
    background: #fff;
    transform: translateX(4px);
}
body.cms-teezubereitung #teezubereitung > ol > h4 > li > a:hover::after {
    color: var(--theme-color);
    transform: translateX(3px);
}

/* --- Kapitel-Ueberschriften (h2.anker traegt schon padding-top:45px = Sticky-
   Header-Scroll-Offset; NICHT verdoppeln, nur margin fuer Rhythmus) --------- */
body.cms-teezubereitung #teezubereitung h2 {
    clear: both !important;   /* gefloatete Figuren des Vorkapitels nicht ueberlaufen lassen */
    font-size: clamp(1.4rem, 2.9vw, 1.85rem) !important;
    line-height: 1.22 !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em;
    color: var(--tz-ink) !important;
    text-transform: none !important;
    text-align: left !important;
    margin: clamp(2.25rem, 4.5vw, 3.25rem) 0 1rem !important;
    max-width: 30ch;
    text-wrap: balance;
}

/* Unterabschnitte (Teekannen-Typen in Kap. 3) */
body.cms-teezubereitung #teezubereitung h4 {
    clear: both !important;
    font-size: clamp(1.08rem, 2vw, 1.22rem) !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: var(--tz-ink) !important;
    text-transform: none !important;
    text-align: left !important;
    margin: clamp(1.75rem, 3.5vw, 2.4rem) 0 0.7rem !important;
}

/* --- Inline-Links im Fliesstext (viele Auto-Produktlinks: Ceylon, Assam ...) */
body.cms-teezubereitung #teezubereitung p a {
    color: var(--tz-link) !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--tz-link) 40%, transparent);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.18s ease, color 0.18s ease;
}
body.cms-teezubereitung #teezubereitung p a:hover {
    color: var(--theme-color) !important;
    text-decoration-color: var(--theme-color);
}

/* --- Figuren (Alt-Bilder mit inline float:left + fixen w/h) ---------------- */
body.cms-teezubereitung #teezubereitung img {
    float: left !important;
    margin: 0.4rem 1.6rem 1.1rem 0 !important;
    max-width: 45% !important;
    height: auto !important;
    background: #fff;
    border: 1px solid var(--tz-line);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 2px 12px rgba(33, 38, 43, 0.06);
}

/* --- Datentabelle (Mineralwasser, 10 Spalten) ----------------------------- */
body.cms-teezubereitung #teezubereitung .tg {
    clear: both !important;
    width: 100% !important;
    margin: 1.5rem 0 1.75rem !important;
    border-collapse: collapse !important;
    border: 1px solid var(--tz-line) !important;
    font-size: 0.86rem;
    border-radius: 10px;
    overflow: hidden;
}
body.cms-teezubereitung #teezubereitung .tg td,
body.cms-teezubereitung #teezubereitung .tg th {
    border: 1px solid var(--tz-line) !important;
    padding: 9px 11px !important;
    color: var(--tz-body) !important;
    background: #fff !important;
    text-align: center;
    vertical-align: middle;
    word-break: normal;
}
/* Caption-Kopfzeile gruen */
body.cms-teezubereitung #teezubereitung .tg .tg-hgcj {
    background: var(--theme-color) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    text-align: center !important;   /* sonst greift tr th:first-child -> linksbuendig */
    text-decoration: none !important;
    font-style: normal !important;
    padding: 11px !important;
}
/* Gruppen- und Spaltenkoepfe: getoentes Label-Band, sauber (Underline raus) */
body.cms-teezubereitung #teezubereitung .tg .tg-jxnb,
body.cms-teezubereitung #teezubereitung .tg .tg-ic7p,
body.cms-teezubereitung #teezubereitung .tg .tg-c9cr {
    background: var(--tz-tint) !important;
    color: var(--tz-ink) !important;
    font-weight: 600 !important;
    font-style: normal !important;
    text-decoration: none !important;
}
/* Erste Spalte der DATENzeilen (Markenname) linksbuendig + betont.
   Nur td.tg-031e -> die gruene Caption (.tg-hgcj) behaelt weiss/zentriert. */
body.cms-teezubereitung #teezubereitung .tg td.tg-031e:first-child {
    text-align: left;
    font-weight: 600;
    color: var(--tz-ink) !important;
}
/* Zeilen-Hover zum Scannen */
body.cms-teezubereitung #teezubereitung .tg tr:hover td { background: var(--tz-tint) !important; }

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 768px) {
    body.cms-teezubereitung #teezubereitung .tg {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
    }
}
@media (max-width: 600px) {
    body.cms-teezubereitung #teezubereitung { font-size: 15.5px; }
    body.cms-teezubereitung #teezubereitung > p:first-of-type { font-size: 1.1rem; }
    body.cms-teezubereitung #teezubereitung > p:first-of-type::first-letter { font-size: 2.7rem; }
    /* Figuren nicht mehr floaten -> volle, zentrierte Breite */
    body.cms-teezubereitung #teezubereitung img {
        float: none !important;
        display: block;
        margin: 1rem auto 1.4rem !important;
        max-width: 100% !important;
    }
    body.cms-teezubereitung #teezubereitung h2 { max-width: none; }
}

/* --- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.cms-teezubereitung #teezubereitung > ol > h4 > li > a,
    body.cms-teezubereitung #teezubereitung > ol > h4 > li > a::after,
    body.cms-teezubereitung #teezubereitung p a {
        transition: none !important;
    }
    body.cms-teezubereitung #teezubereitung > ol > h4 > li > a:hover,
    body.cms-teezubereitung #teezubereitung > ol > h4 > li > a:hover::after {
        transform: none !important;
    }
}


/* ========================================
   BIO TEE  (body.cms-bio-tee)
   SEO-Ratgeber-/Kategorie-Landingtext -> selbe editoriale Sprache wie
   teezubereitung/ueber-uns, damit sich die Seite in den Shop einfuegt:
   leere 2-Spalten-Gutter killen, zentrierte Lesespalte, Lead + gruene
   Initiale. Erweitert um ein scanbares Sorten-Register (die 8 Bio-
   Unterkategorie-Links) im Megamenue-/Sidebar-Interaktionsmuster des Shops
   (›-Chevron, translateX(4px), Grun) + CSS-Teeblatt als markentreue Marke.
   NUR CSS. Content = DIREKTE Kinder von .column.main (kein #wrapper) -> ueber
   > p / > h2 / > h3 / > ul selektieren (trifft das versteckte
   #authenticationPopup im DIV-Kind NICHT). Gutter kommt aus
   .column.main{float:right;width:75%} -> float:none + width:100% reclaimt ihn.
   Tokens gespiegelt von teezubereitung; --theme-color = Shop-Akzent.
======================================== */
body.cms-bio-tee {
    --bt-ink: #21262b;     /* Ueberschriften */
    --bt-body: #2f2f2f;    /* Fliesstext (~12.6:1) */
    --bt-lead: #3c4248;    /* Lead/Standfirst (~9:1) */
    --bt-muted: #586069;   /* Sub */
    --bt-line: #e7e9ea;    /* Hairlines */
    --bt-line-2: #d8dcdf;  /* kraeftigere Linie */
    --bt-tint: #f3f8f6;    /* gruen getoenter Surface (Brand-Hue) */
    --bt-link: #0e7560;    /* dunkleres Grun fuer Inline-Body-Links (~5:1) */
}

/* Tote Spalte killen + Lesespalte zentrieren. Sidebar existiert hier nicht
   (no-op, defensiv); der leere Gutter ist Float-Raum von .column.main. */
body.cms-bio-tee .sidebar-main,
body.cms-bio-tee .sidebar-additional { display: none !important; }

body.cms-bio-tee .column.main {
    width: 100% !important;
    float: none !important;
    display: block !important;
    max-width: 860px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: clamp(1rem, 2.5vw, 1.6rem) 0 clamp(2.5rem, 6vw, 4.5rem);
    color: var(--bt-body);
    font-size: 16px;
    line-height: 1.78;
}
/* leere CMS-Absaetze (zwischen H3 und UL, am Seitenende) raus */
body.cms-bio-tee .column.main > p:empty { display: none !important; }

/* --- Schlagzeile (page-title-wrapper liegt AUSSERHALB .column.main, direkt
   unter MAIN.page-main -> selbe 860px-Lesebreite zentrieren) -------------- */
body.cms-bio-tee .page-title-wrapper {
    max-width: 860px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: clamp(1.25rem, 3.5vw, 2.75rem);
}
body.cms-bio-tee .page-title-wrapper .page-title {
    position: relative;
    display: block !important;
    font-size: clamp(1.85rem, 3.8vw, 2.55rem) !important;
    line-height: 1.14 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--bt-ink) !important;       /* war #179c80 Link-Grun (~2.9:1) */
    text-transform: none !important;
    text-align: left !important;
    margin: 0 !important;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--bt-line);
    text-wrap: balance;
}
body.cms-bio-tee .page-title-wrapper .page-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 56px;
    height: 3px;
    background: var(--theme-color);
    border-radius: 3px;
}

/* --- Fliesstext --------------------------------------------------------- */
body.cms-bio-tee .column.main > p {
    text-align: left;
    margin: 0 0 1.2rem;
    max-width: 72ch;
    color: var(--bt-body);
}
body.cms-bio-tee .column.main > p strong,
body.cms-bio-tee .column.main > p b { color: var(--bt-ink); font-weight: 700; }

/* Lead = erster Absatz (Standfirst) + gruene Initiale */
body.cms-bio-tee .column.main > p:first-of-type {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--bt-lead);
    margin-bottom: 1.5rem;
    max-width: 64ch;
}
body.cms-bio-tee .column.main > p:first-of-type::first-letter {
    float: left;
    font-size: 3.1rem;
    line-height: 0.82;
    font-weight: 700;
    color: var(--theme-color);
    margin: 0.06em 0.14em 0 0;
}

/* --- Inline-Links im Fliesstext (Gruener Tee Bio, Bio Schwarztee) -------- */
body.cms-bio-tee .column.main > p a {
    color: var(--bt-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--bt-link) 40%, transparent);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.18s ease, color 0.18s ease;
}
body.cms-bio-tee .column.main > p a:hover {
    color: var(--theme-color);
    text-decoration-color: var(--theme-color);
}

/* --- Zwischenueberschrift ----------------------------------------------- */
body.cms-bio-tee .column.main > h2 {
    font-size: clamp(1.4rem, 2.9vw, 1.85rem) !important;
    line-height: 1.22 !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em;
    color: var(--bt-ink) !important;
    text-transform: none !important;
    text-align: left !important;
    margin: clamp(2.25rem, 4.5vw, 3.25rem) 0 1rem !important;
    max-width: 34ch;
    text-wrap: balance;
}

/* H3 = Kopf des Sorten-Registers, mit gruener Teeblatt-Marke ------------- */
body.cms-bio-tee .column.main > h3 {
    position: relative;
    font-size: clamp(1.12rem, 2.1vw, 1.3rem) !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: var(--bt-ink) !important;
    text-transform: none !important;
    text-align: left !important;
    margin: clamp(2.5rem, 5vw, 3.5rem) 0 1.15rem !important;
    padding-left: 1.55rem;
}
body.cms-bio-tee .column.main > h3::before {
    content: "";                              /* CSS-Teeblatt (Logo ist ein Blatt) */
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 0.85em;
    height: 0.85em;
    background: var(--theme-color);
    border-radius: 0 100% 0 100%;
    transform: rotate(8deg);
}

/* --- Sorten-Register: die 8 Bio-Unterkategorie-Links als scanbares Grid -- */
body.cms-bio-tee .column.main > ul {
    list-style: none !important;
    margin: 0 0 1rem !important;
    padding: 0 !important;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.7rem;
}
body.cms-bio-tee .column.main > ul > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.cms-bio-tee .column.main > ul > li > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 2.2rem 0.85rem 1rem;
    background: #fff;
    border: 1px solid var(--bt-line);
    border-radius: 9px;
    color: var(--bt-ink) !important;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none !important;
    transition: color 0.18s ease, border-color 0.18s ease,
                box-shadow 0.18s ease,
                transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Teeblatt-Marke vor jedem Sortennamen */
body.cms-bio-tee .column.main > ul > li > a::before {
    content: "";
    flex: 0 0 auto;
    width: 0.7rem;
    height: 0.7rem;
    background: var(--theme-color);
    border-radius: 0 100% 0 100%;
    transform: rotate(8deg);
    opacity: 0.85;
    transition: transform 0.18s ease, opacity 0.18s ease;
}
/* ›-Chevron rechts (Shop-Signatur, wandert beim Hover) */
body.cms-bio-tee .column.main > ul > li > a::after {
    content: "\203A";
    position: absolute;
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bt-line-2);
    font-size: 1.15rem;
    line-height: 1;
    transition: color 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
body.cms-bio-tee .column.main > ul > li > a:hover {
    color: var(--theme-color) !important;
    border-color: color-mix(in srgb, var(--theme-color) 55%, var(--bt-line));
    box-shadow: 0 4px 16px rgba(33, 38, 43, 0.07);
    transform: translateX(4px);
}
body.cms-bio-tee .column.main > ul > li > a:hover::before {
    opacity: 1;
    transform: rotate(8deg) scale(1.08);
}
body.cms-bio-tee .column.main > ul > li > a:hover::after {
    color: var(--theme-color);
    transform: translateY(-50%) translateX(3px);
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 600px) {
    body.cms-bio-tee .column.main { font-size: 15.5px; }
    body.cms-bio-tee .column.main > p:first-of-type { font-size: 1.1rem; }
    body.cms-bio-tee .column.main > p:first-of-type::first-letter { font-size: 2.7rem; }
    body.cms-bio-tee .column.main > h2 { max-width: none; }
    body.cms-bio-tee .column.main > ul { grid-template-columns: 1fr; }
}

/* --- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.cms-bio-tee .column.main > ul > li > a,
    body.cms-bio-tee .column.main > ul > li > a::before,
    body.cms-bio-tee .column.main > ul > li > a::after,
    body.cms-bio-tee .column.main > p a {
        transition: none !important;
    }
    body.cms-bio-tee .column.main > ul > li > a:hover,
    body.cms-bio-tee .column.main > ul > li > a:hover::before,
    body.cms-bio-tee .column.main > ul > li > a:hover::after {
        transform: none !important;
    }
}


/* =======================================================================
   TEEKANNEN-LANDINGPAGE  (body.cms-tee-kannen / .tk-lp)
   -----------------------------------------------------------------------
   Redesign der CMS-Seite tee-kannen (apply-teekannen-content.php, Phase 7d6):
   Intro-Hero + zwei Material-"Tafeln" (Specimen-Plates). EdelTee-Editorial-
   Sprache wie body.cms-teezubereitung (Poppins, gruener Akzent, viel Air).
   Bilder sind nur 200x210 px -> bewusst klein als gerahmte Tafel statt
   unscharf hochskaliert. Textuelle Gruens auf #0e7560 (~5:1, AA), reines
   --theme-color #179c80 nur fuer dekorative Striche.
   ======================================================================= */
body.cms-tee-kannen {
    --tk-ink: #21262b;     /* Ueberschriften */
    --tk-body: #2f2f2f;    /* Fliesstext (~12.6:1) */
    --tk-lead: #3c4248;    /* Lead/Standfirst (~9:1) */
    --tk-muted: #586069;   /* Sub/Labels neutral */
    --tk-line: #e7e9ea;    /* Hairlines */
    --tk-line-2: #d8dcdf;  /* kraeftigere Linie */
    --tk-tint: #f3f8f6;    /* gruen getoenter Surface (Brand-Hue) */
    --tk-green: #0e7560;   /* AA-sicheres Grun fuer Text/Border (~5:1) */
}

/* tote linke Spalte ist via page_layout=1column schon weg; Container selbst
   zentrieren (nicht .column.main verbiegen). */
body.cms-tee-kannen .sidebar-main,
body.cms-tee-kannen .sidebar-additional { display: none !important; }

body.cms-tee-kannen .tk-lp {
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(0.5rem, 2vw, 1.5rem) 0 clamp(2rem, 5vw, 3.5rem);
    color: var(--tk-body);
}

/* --- Intro-Hero --------------------------------------------------------- */
body.cms-tee-kannen .tk-lp__intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(2.25rem, 5vw, 3.5rem);
    padding-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
    position: relative;
}
body.cms-tee-kannen .tk-lp__title {
    font-size: clamp(1.95rem, 1.35rem + 2.7vw, 3rem) !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em;
    color: var(--tk-ink) !important;
    text-transform: none !important;
    margin: 0 0 1.1rem !important;
    text-wrap: balance;
}
/* zentrierter gruener Akzentstrich (rein dekorativ -> --theme-color erlaubt) */
body.cms-tee-kannen .tk-lp__intro::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    border-radius: 3px;
    background: var(--theme-color);
}
body.cms-tee-kannen .tk-lp__lead {
    font-size: clamp(1.1rem, 1rem + 0.5vw, 1.28rem);
    line-height: 1.62;
    color: var(--tk-lead);
    margin: 0 auto;
    max-width: 56ch;
    text-wrap: pretty;
}

/* --- Material-Tafel (Specimen-Plate) ------------------------------------ */
body.cms-tee-kannen .tk-plate {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3.25rem);
    align-items: start;
    padding-top: clamp(2rem, 4.5vw, 3.25rem);
    margin-top: clamp(2rem, 4.5vw, 3.25rem);
    border-top: 1px solid var(--tk-line);
}
body.cms-tee-kannen .tk-plate:first-of-type {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
}

/* Tafel-Figur: Bild in nativer Groesse, gerahmt wie ein Exponat */
body.cms-tee-kannen .tk-plate__fig {
    margin: 0;
    text-align: center;
    position: sticky;
    top: 90px;   /* haelt die Tafel beim Lesen im Blick (Desktop) */
}
body.cms-tee-kannen .tk-plate__frame {
    display: inline-block;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--tk-line-2);
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(33, 38, 43, 0.07);
    line-height: 0;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.22s ease, border-color 0.22s ease;
}
body.cms-tee-kannen .tk-plate__frame img {
    display: block;
    width: 200px;
    height: 210px;
    max-width: 100%;
    border-radius: 5px;
}
body.cms-tee-kannen .tk-plate__frame:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(33, 38, 43, 0.13);
    border-color: color-mix(in srgb, var(--theme-color) 50%, var(--tk-line-2));
}
/* Tafel-Label (museales Specimen-Etikett) -> AA-Grun #0e7560 */
body.cms-tee-kannen .tk-plate__label {
    margin-top: 0.95rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6b6b6b; /* gedaempft statt Markengruen: Gruen bleibt den Links im Text */
}

/* Tafel-Text */
body.cms-tee-kannen .tk-plate__name {
    font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2rem) !important;
    line-height: 1.16 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--tk-ink) !important;
    text-transform: none !important;
    margin: 0 0 1.1rem !important;
    text-wrap: balance;
}
body.cms-tee-kannen .tk-plate__sub {
    display: block;
    margin-top: 0.4rem;
    font-size: clamp(0.92rem, 0.85rem + 0.3vw, 1.02rem);
    font-weight: 500;
    letter-spacing: 0;
    color: #4a4a4a; /* Untertitel: dunkel gedaempft, sonst wie der gruene Textlink darunter */
}
body.cms-tee-kannen .tk-plate__body p {
    margin: 0 0 1.15rem;
    font-size: 16px;
    line-height: 1.78;
    color: var(--tk-body);
    max-width: 68ch;
}
body.cms-tee-kannen .tk-plate__body p a {
    color: var(--tk-green) !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--tk-green) 40%, transparent);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.18s ease, color 0.18s ease;
}
body.cms-tee-kannen .tk-plate__body p a:hover {
    color: var(--theme-color) !important;
    text-decoration-color: var(--theme-color);
}

/* CTA-Button: Outline -> Fill bei Hover, Chevron wandert */
body.cms-tee-kannen .tk-plate__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.72rem 1.5rem;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1;
    color: var(--tk-green) !important;
    background: transparent;
    border: 1.5px solid var(--tk-green);
    border-radius: 9px;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
body.cms-tee-kannen .tk-plate__chev {
    font-size: 1.15rem;
    line-height: 0;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
body.cms-tee-kannen .tk-plate__cta:hover {
    color: #fff !important;
    background: var(--tk-green);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--tk-green) 28%, transparent);
}
body.cms-tee-kannen .tk-plate__cta:hover .tk-plate__chev { transform: translateX(4px); }
body.cms-tee-kannen .tk-plate__cta:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: 2px;
}

/* --- Responsive (Tafel ueber Text) -------------------------------------- */
@media (max-width: 768px) {
    body.cms-tee-kannen .tk-plate {
        grid-template-columns: 1fr;
        gap: clamp(1.25rem, 4vw, 1.75rem);
        justify-items: center;
        text-align: center;
    }
    body.cms-tee-kannen .tk-plate__fig { position: static; }
    body.cms-tee-kannen .tk-plate__body { text-align: left; }
    body.cms-tee-kannen .tk-plate__name { text-align: center; }
    body.cms-tee-kannen .tk-plate__body p { max-width: none; }
    body.cms-tee-kannen .tk-plate__cta { width: 100%; justify-content: center; }
}
@media (max-width: 420px) {
    body.cms-tee-kannen .tk-plate__frame img { width: 170px; height: 178px; }
}

/* --- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.cms-tee-kannen .tk-plate__frame,
    body.cms-tee-kannen .tk-plate__cta,
    body.cms-tee-kannen .tk-plate__chev,
    body.cms-tee-kannen .tk-plate__body p a {
        transition: none !important;
    }
    body.cms-tee-kannen .tk-plate__frame:hover { transform: none !important; }
    body.cms-tee-kannen .tk-plate__cta:hover .tk-plate__chev { transform: none !important; }
}


/* =========================================================================
   Teesorten-Landingpage  /tee.html  (CMS-Block teekategorie -> .ts-lp)
   Kategorie "Tee" (display_mode=PAGE) rendert nur diesen Block. Loest das
   krude M1-Inline-Float-Markup ab: poliertes, responsives Teesorten-Register.
   Scope: .category-tee (Body) + .ts-lp (Block). Brand-Sprache wie Megamenue/
   Filter: 8px-Radius, Chevron, Hover translateX(4px), Gruen = var(--theme-color).
   Bilder bleiben nativ 160x100 -> kompakt gerahmt, NICHT hochskaliert.
   ========================================================================= */
.category-tee .ts-lp {
    --ts-ink: #2f2f2f;
    --ts-muted: #636965;
    --ts-line: color-mix(in srgb, var(--theme-color) 15%, #e2e3e0);
    --ts-line-strong: color-mix(in srgb, var(--theme-color) 48%, #ffffff);
    margin: 0 0 0.5rem;
}
.category-tee .ts-lp__intro {
    max-width: 62ch;
    margin: 0 0 clamp(1.25rem, 3.2vw, 2.1rem);
}
.category-tee .ts-lp__title {
    margin: 0 0 0.5em;
    font-size: clamp(1.7rem, 1.05rem + 2.3vw, 2.4rem);
    line-height: 1.12;
    font-weight: 700;
    color: var(--ts-ink);
    text-transform: none;
    text-wrap: balance;
}
.category-tee .ts-lp__lead {
    margin: 0;
    font-size: clamp(1rem, 0.95rem + 0.35vw, 1.12rem);
    line-height: 1.6;
    color: var(--ts-muted);
    text-wrap: pretty;
}

/* --- Grid: viele kleine Spalten -> Thumbs bleiben scharf (~170px @ 160px Quelle) */
.category-tee .ts-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* 160px = native Thumb-Breite; 165px kippte bei 375px-Viewports (335px
       Gridbreite) knapp in 1 Spalte -> Thumbs wurden 2x hochskaliert */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: clamp(0.75rem, 1.4vw, 1.125rem);
}
.category-tee .ts-grid__cell { margin: 0; }

.category-tee .ts-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--ts-line);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1),
                border-color 0.28s ease,
                box-shadow 0.28s ease;
}
/* Die Fliesstext-Link-Regel (base-typography: .ownmag2ext-optionsetting-cms a)
   unterstreicht per !important auch die Karten-Links -> in allen Zustaenden
   neutralisieren; die Hover-Variante der Regel ist ebenfalls !important. */
.category-tee .ts-card,
.category-tee .ts-card:hover,
.category-tee .ts-card:focus-visible {
    text-decoration: none !important;
}
.category-tee .ts-card__media {
    display: block;
    aspect-ratio: 8 / 5; /* == native 160x100 -> object-fit:cover schneidet nicht */
    overflow: hidden;
    background: color-mix(in srgb, var(--theme-color) 5%, #f3f4f1);
}
.category-tee .ts-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.category-tee .ts-card__name {
    display: flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.7rem 0.85rem 0.75rem;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ts-ink);
    transition: color 0.2s ease;
}
.category-tee .ts-card__chev {
    /* direkt hinter dem Namen (gap 0.35em am Flex-Container), nicht an den
       Kachelrand gedrueckt -- Chevron-Muster wie Megamenue/Filter */
    font-weight: 400;
    color: var(--theme-color);
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.2s ease;
}

/* --- Hover / Focus: Karte hebt, Bild zoomt leicht, Gruen + Chevron translateX */
.category-tee .ts-card:hover,
.category-tee .ts-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--ts-line-strong);
    box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--theme-color) 65%, transparent);
}
.category-tee .ts-card:hover .ts-card__media img,
.category-tee .ts-card:focus-visible .ts-card__media img {
    transform: scale(1.045);
}
.category-tee .ts-card:hover .ts-card__name,
.category-tee .ts-card:focus-visible .ts-card__name {
    color: var(--theme-color);
}
.category-tee .ts-card:hover .ts-card__chev,
.category-tee .ts-card:focus-visible .ts-card__chev {
    color: var(--theme-color);
    transform: translateX(4px);
}
.category-tee .ts-card:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--theme-color) 60%, #ffffff);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .category-tee .ts-card,
    .category-tee .ts-card__media img,
    .category-tee .ts-card__chev {
        transition: color 0.2s ease, border-color 0.2s ease;
    }
    .category-tee .ts-card:hover,
    .category-tee .ts-card:focus-visible { transform: none; }
    .category-tee .ts-card:hover .ts-card__media img,
    .category-tee .ts-card:focus-visible .ts-card__media img { transform: none; }
    .category-tee .ts-card:hover .ts-card__chev,
    .category-tee .ts-card:focus-visible .ts-card__chev { transform: none; }
}