/* Ratgeber (02.10.2026): helle Lesetexte im Welten-System. Farben und Schriften aus marke-b.css. */
body.ratgeber { padding-bottom: 0; background: var(--bg); overflow-x: clip; }
body.ratgeber .wrap { box-sizing: border-box; width: min(calc(100% - 72px), 1340px); max-width: none; padding-inline: 0; margin-inline: auto; }
@media (max-width: 760px) { body.ratgeber .wrap { width: calc(100% - 32px); } }

/* Kopf */
.rg-head { padding: clamp(118px, 13vw, 168px) 0 clamp(28px, 4vw, 52px); }
.rg-head-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.rg-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; font: 600 12px/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rg-crumb a { color: var(--muted); text-decoration: none; }
.rg-crumb a:hover { color: var(--olive); }
.rg-crumb b { color: var(--olive); font-weight: 600; }
.ratgeber h1.display { margin: 0; font-size: clamp(34px, 4.1vw, 64px); line-height: 1.02; color: var(--ink); }
.ratgeber h1.display span { display: block; }
.rg-head .lead { max-width: 640px; margin: 20px 0 0; }
.rg-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 22px 0 0; font: 500 13.5px/1.4 var(--text); color: var(--muted); }
.rg-meta span + span::before { content: '\B7 '; margin-right: 18px; color: var(--line); }
.rg-meta span:first-child { color: var(--ink); font-weight: 600; }
.rg-head-pic, .rg-fig { position: relative; margin: 0; overflow: hidden; border-radius: 10px; aspect-ratio: var(--ar); background: var(--surface-2); box-shadow: 0 30px 60px -38px rgba(23, 28, 21, .55); }
.rg-head-pic img, .rg-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rg-head-pic figcaption { position: absolute; inset: auto 0 0; padding: 8px 12px; background: rgba(23, 28, 21, .86); color: #fff; font: 400 12px/1.4 var(--text); }
.rg-head-pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 28, 21, 0) 60%, rgba(23, 28, 21, .28)); pointer-events: none; }

/* Kurz gesagt */
.rg-kurz { position: relative; margin: 0 0 clamp(40px, 6vw, 80px); padding: clamp(22px, 2.6vw, 34px); border-radius: 10px; background: var(--moss-1); color: var(--on-dark); overflow: hidden; }
.rg-kurz-k { margin: 0 0 16px; font: 600 12px/1.2 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--lime); }
.rg-kurz ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.rg-kurz li { display: grid; gap: 6px; padding: 18px 18px 16px; border-radius: 7px; background: rgba(243, 240, 232, .06); box-shadow: inset 0 0 0 1px rgba(243, 240, 232, .1); }
.rg-kurz li span { font: 500 14px/1.35 var(--text); color: var(--on-dark-2); }
.rg-kurz li b { font: 600 clamp(20px, 1.7vw, 26px)/1.1 var(--display); text-transform: uppercase; color: #fff; }
.rg-kurz li em { font-style: normal; font: 600 14px/1.3 var(--text); color: var(--lime); }

/* Inhalt + Text */
.rg-layout { display: grid; grid-template-columns: 230px minmax(0, 760px); gap: clamp(36px, 6vw, 110px); justify-content: start; }
.rg-toc { position: sticky; top: 110px; align-self: start; }
.rg-toc p { margin: 0 0 12px; font: 600 12px/1.2 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.rg-toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); counter-reset: t; }
.rg-toc li { counter-increment: t; }
.rg-toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; font: 500 14.5px/1.35 var(--text); color: var(--muted); text-decoration: none; transition: color .2s, border-color .2s; }
.rg-toc a:hover, .rg-toc a.is-on { color: var(--ink); border-left-color: var(--olive); }

.rg-text { font-size: 17.5px; line-height: 1.7; color: #2c3128; }
.rg-text > section { margin: 0 0 clamp(44px, 5vw, 64px); scroll-margin-top: 100px; }
.rg-text h2 { margin: 0 0 18px; font: 700 clamp(26px, 2.5vw, 36px)/1.08 var(--display); text-transform: uppercase; letter-spacing: .005em; color: var(--ink); }
.rg-text p { margin: 0 0 18px; }
.rg-text a { color: var(--olive); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rg-text strong { color: var(--ink); }
.rg-note { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.rg-fig { margin: 26px 0 8px; }
.rg-fig figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; font: 500 14px/1.4 var(--text); color: #fff; background: linear-gradient(0deg, rgba(20, 25, 18, .82), rgba(20, 25, 18, 0)); }

/* Tabellen */
.rg-table { margin: 22px 0 16px; border-radius: 9px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.rg-table table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; }
.rg-table th, .rg-table td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.rg-table tr:last-child > * { border-bottom: 0; }
.rg-table thead th { font: 600 12px/1.25 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
.rg-table tbody th { font-weight: 600; color: var(--ink); }
.rg-table.compare tbody th { width: 22%; }

/* Rechenbeispiel */
.rg-calc { margin: 26px 0; padding: clamp(20px, 2.4vw, 30px); border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -40px rgba(23, 28, 21, .5); }
.rg-calc-k { margin: 0 0 16px !important; font: 600 12px/1.2 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--olive); }
.rg-calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rg-calc-grid > div { display: grid; gap: 4px; padding: 16px; border-radius: 7px; background: var(--bg); }
.rg-calc-grid span { font: 500 13.5px/1.3 var(--text); color: var(--muted); }
.rg-calc-grid b { font: 600 clamp(24px, 2.2vw, 32px)/1.05 var(--display); color: var(--ink); }
.rg-calc-grid small { font-size: 13px; line-height: 1.35; color: var(--muted); }
.rg-calc-grid .hl { background: var(--moss-1); }
.rg-calc-grid .hl span, .rg-calc-grid .hl small { color: var(--on-dark-2); }
.rg-calc-grid .hl b { color: var(--lime); }

/* Werkstatt-Tipps */
.rg-tipp { position: relative; isolation: isolate; overflow: hidden; margin: 22px 0; padding: clamp(22px, 2.6vw, 34px); border-radius: 10px; background: var(--moss-1); color: var(--on-dark); }
.rg-tipp .grain { z-index: -1; }
.rg-tipp-k { margin: 0 0 18px !important; font: 600 12px/1.2 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--lime); }
.rg-tipp ol { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: tp; }
.rg-tipp li { counter-increment: tp; display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; }
.rg-tipp li::before { content: counter(tp, decimal-leading-zero); grid-row: span 2; font: 600 22px/1.1 var(--display); color: var(--lime); }
.rg-tipp li b { font: 600 18px/1.25 var(--display); text-transform: uppercase; letter-spacing: .01em; color: #fff; }
.rg-tipp li span { font-size: 15.5px; line-height: 1.55; color: var(--on-dark-2); }

/* Phasen */
.rg-phase { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; }
.rg-phase > div { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: 9px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.rg-phase-k { margin: 0 !important; font: 600 12px/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--olive); }
.rg-phase b { font: 600 19px/1.2 var(--display); text-transform: uppercase; color: var(--ink); }
.rg-phase span { font-size: 15.5px; line-height: 1.55; color: var(--muted); }

/* Knopf-Kasten im Text */
.rg-cta { display: grid; gap: 16px; margin: 26px 0; padding: 22px 24px; border-radius: 10px; background: var(--surface-2); }
.rg-cta p { margin: 0 !important; font-weight: 500; color: var(--ink); }
.rg-cta > div { display: flex; flex-wrap: wrap; gap: 12px; }
.rg-cta .btn { width: auto; height: auto; min-height: 50px; padding: 0 22px; display: inline-flex; align-items: center; text-decoration: none; }
.rg-cta .btn-ghost { color: var(--ink); }

/* FAQ und Quellen */
.rg-faq .faq-list { margin-top: 6px; }
.rg-quellen h2 { font-size: 20px !important; }
.rg-quellen ul { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.rg-quellen a { font-weight: 500; color: var(--muted); }

/* Weiterlesen */
.rg-more { padding: clamp(20px, 3vw, 40px) 0 clamp(56px, 7vw, 96px); }
.rg-more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.rg-more-card { display: grid; gap: 8px; padding: 24px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
.rg-more-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--olive), 0 24px 40px -30px rgba(23, 28, 21, .5); }
.rg-more-card small { font: 600 12px/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--olive); }
.rg-more-card b { font: 600 22px/1.12 var(--display); text-transform: uppercase; }
.rg-more-card span { font-weight: 600; color: var(--olive); }

/* Übersicht */
.rg-hub { padding: clamp(118px, 13vw, 168px) 0 clamp(56px, 7vw, 96px); }
.rg-hub .lead { max-width: 700px; margin: 20px 0 0; }
.rg-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px; margin-top: clamp(32px, 4vw, 52px); }
.rg-hub-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.rg-hub-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--olive), 0 30px 50px -36px rgba(23, 28, 21, .55); }
.rg-hub-pic { display: block; aspect-ratio: var(--ar); overflow: hidden; background: var(--surface-2); }
.rg-hub-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rg-hub-in { display: grid; gap: 10px; align-content: start; padding: 24px; }
.rg-hub-in small { font: 600 12px/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--olive); }
.rg-hub-in b { font: 600 clamp(22px, 2vw, 28px)/1.08 var(--display); text-transform: uppercase; }
.rg-hub-in > span { font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.rg-hub-in em { font-style: normal; font-weight: 600; color: var(--olive); }

/* Handy */
@media (max-width: 960px) {
  .rg-head-grid { grid-template-columns: 1fr; }
  .rg-layout { grid-template-columns: minmax(0, 1fr); }
  .rg-toc { position: static; padding: 18px 20px; border-radius: 9px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
}
@media (max-width: 760px) {
  .rg-head { padding-top: 104px; }
  .ratgeber h1.display { font-size: clamp(30px, 8.6vw, 40px); }
  .rg-head .lead { font-size: 16.5px; }
  .rg-kurz ul, .rg-calc-grid, .rg-phase { grid-template-columns: 1fr; }
  .rg-text { font-size: 16.5px; }
  .rg-text h2 { font-size: 26px; }
  .rg-fig figcaption { position: static; padding: 10px 2px 0; color: var(--muted); background: none; }
  .rg-fig { overflow: visible; aspect-ratio: auto; background: none; box-shadow: none; }
  .rg-fig img { border-radius: 10px; height: auto; aspect-ratio: var(--ar); box-shadow: 0 24px 50px -36px rgba(23, 28, 21, .55); }
  /* Tabellen werden zu Karten: jede Zeile ein Block, jede Zelle mit ihrer Spaltenüberschrift */
  .rg-table { background: none; box-shadow: none; overflow: visible; }
  .rg-table thead { display: none; }
  .rg-table table, .rg-table tbody, .rg-table tr, .rg-table th, .rg-table td { display: block; width: auto !important; }
  .rg-table tr { margin-bottom: 10px; border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
  .rg-table tbody th { padding: 12px 14px; background: var(--surface-2); border: 0; }
  .rg-table td { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 15px; }
  .rg-table td::before { content: attr(data-l); font: 600 11.5px/1.35 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
  .rg-table tr > td:last-child { border-bottom: 0; }
  .rg-cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* Heller Kopf: die Seite beginnt hell, also gleich die Farben wie beim Scrollen */
body.ratgeber .n-header[data-global-nav]:not(.has-mega):not(.is-open) { color: #151b16 !important; }
body.ratgeber .n-header[data-global-nav]:not(.has-mega):not(.is-open) .n-logo { color: #151b16 !important; }
body.ratgeber .n-header[data-global-nav]:not(.has-mega):not(.is-open) .n-logo-word { background: #151b16 !important; }
body.ratgeber .n-header[data-global-nav]:not(.has-mega):not(.is-open) .n-logo small { color: #151b16 !important; }
body.ratgeber .n-header[data-global-nav]:not(.has-mega):not(.is-open) .n-logo img { filter: brightness(.78) saturate(1.2) !important; }

/* Tabellenzellen umbrechen (eine allgemeine Regel setzt sonst nowrap) */
.rg-table table { table-layout: fixed; }
.rg-table th, .rg-table td { white-space: normal; overflow-wrap: break-word; hyphens: auto; }
.rg-table.wide table { font-size: 14.5px; }
.rg-table.wide th, .rg-table.wide td { padding: 12px 12px; }
.rg-table.compare tbody th { width: auto; }
.rg-table.compare thead th:first-child { width: 17%; }

/* Grid-Kinder dürfen schmaler werden als ihr Inhalt; Überschriften umbrechen */
.rg-head-grid > *, .rg-layout > *, .rg-text, .rg-text > section { min-width: 0; }
.ratgeber h1.display span { white-space: normal; width: auto; }
@media (max-width: 960px) { .rg-head-grid { grid-template-columns: minmax(0, 1fr); } }
.rg-table table { min-width: 0; }
@media (max-width: 760px) { .rg-meta { display: grid; gap: 4px; } .rg-meta span + span::before { content: none; } }

/* Rauschen auf allen dunklen Flächen */
.rg-kurz { isolation: isolate; }
.rg-kurz > .grain, .rg-calc-grid .hl > .grain { z-index: -1; }
.rg-calc-grid .hl { position: relative; isolation: isolate; overflow: hidden; }

/* Neue Themencluster und kurze, zweizeilige Artikelköpfe (07.10.2026). */
.ratgeber h1.display { font-size: clamp(32px, 3.2vw, 54px); }
.rg-cluster-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 44px; }
.rg-cluster-nav a { padding: 11px 16px; border: 1px solid var(--line); border-radius: 6px; color: var(--olive); text-decoration: none; font-weight: 600; }
.rg-cluster-nav a:hover { background: var(--surface-2); }
.rg-hub-cluster { margin-top: 52px; scroll-margin-top: 105px; }
.rg-hub-cluster h2 { margin: 0 0 12px; font: 600 clamp(26px, 2.5vw, 36px)/1.1 var(--display); text-transform: uppercase; }
.rg-hub-cluster > p { max-width: 760px; color: var(--muted); }
.rg-hub-cluster .rg-hub-grid { margin-top: 24px; }
.rg-start-cta { margin: -34px 0 40px; }
.rg-start-cta a { color: var(--olive); font-weight: 600; text-underline-offset: 4px; }
.rg-text ul { padding-left: 23px; margin: 0 0 22px; }
.rg-text li + li { margin-top: 10px; }
.rg-more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .ratgeber h1.display { font-size: clamp(24px, 7.2vw, 32px); }
  .rg-start-cta { margin-top: -18px; }
  .rg-more-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Gemeinsame Bildsprache: Moos-Verlauf, vorhandenes Korn, Lime-Akzent und dieselbe Bewegung wie auf den Branchenseiten. */
body.ratgeber { --rg-image-ease:var(--gm-ease,cubic-bezier(.2,.78,.24,1)); }
.rg-head-pic,.rg-hub-pic { position:relative;isolation:isolate;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--moss-1); }
.rg-head-pic img,.rg-hub-pic img { transform:scale(1.07);object-position:50% 55%;filter:saturate(.86) contrast(1.04);transition:scale .85s var(--rg-image-ease),filter .6s ease; }
.rg-head-pic::before,.rg-hub-pic::before { content:'';position:absolute;z-index:1;inset:0;background:url('bilder/rauschen.webp') 0 0/180px 180px;opacity:.15;mix-blend-mode:soft-light;pointer-events:none; }
.rg-head-pic::after,.rg-hub-pic::after { content:'';position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(23,28,21,.14),rgba(23,28,21,0) 36%,rgba(23,28,21,.32) 72%,rgba(23,28,21,.67)),linear-gradient(110deg,rgba(23,28,21,.13),rgba(23,28,21,0) 70%); }
.rg-hub-pic::after { background:linear-gradient(180deg,rgba(23,28,21,.18),rgba(23,28,21,.03) 30%,rgba(23,28,21,.55) 64%,rgba(23,28,21,.94)),linear-gradient(110deg,rgba(23,28,21,.12),transparent 75%); }
.rg-image-tag { position:absolute;z-index:3;top:20px;left:20px;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 40px);padding:9px 12px;border:1px solid rgba(239,234,224,.2);border-radius:4px;background:rgba(23,28,21,.78);color:#f3f0e8;font:600 11px/1.25 var(--text);letter-spacing:.11em;text-transform:uppercase; }
.rg-image-tag::before { content:'';flex:0 0 5px;width:5px;height:5px;border-radius:50%;background:var(--lime); }
.rg-image-caption { position:absolute;z-index:3;inset:auto 26px 24px;display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:end;gap:16px; }
.rg-image-title { display:block;margin:0;font:600 clamp(24px,2vw,34px)/1.06 var(--display);letter-spacing:.005em;text-transform:uppercase;color:#f3f0e8; }
.rg-image-title>span { display:block; }
.rg-image-title>span+span { color:var(--lime); }
.rg-image-arrow { display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(239,234,224,.3);border-radius:50%;color:var(--lime);font:400 23px/1 var(--text);transition:background .35s ease,color .35s ease,translate .5s var(--rg-image-ease); }
.rg-head-pic figcaption { z-index:3;padding:14px 20px;background:none;color:#f3f0e8;font-size:11px; }
.rg-hub-card { container-type:inline-size;border-radius:8px;transition:transform .5s var(--rg-image-ease),box-shadow .5s ease; }
.rg-image-title { font-size:clamp(22px,4.9cqw,34px); }
.rg-hub-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.rg-hub-card .rg-hub-pic { border-radius:0; }
.rg-hub-in { padding:22px 26px 24px;gap:16px;grid-template-rows:1fr auto;align-content:stretch; }
.rg-hub-in em { display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid var(--line);font:600 13px/1.3 var(--text); }
.rg-hub-card:focus-visible,.rg-more-card:focus-visible { outline:3px solid var(--lime);outline-offset:5px; }
@media(hover:hover) and (pointer:fine){
  .rg-hub-card:hover,.rg-hub-card:focus-visible { transform:translateY(-5px); }
  .rg-hub-card:is(:hover,:focus-visible) img,.rg-head-pic:hover img { scale:1.045;filter:saturate(1) contrast(1.04); }
  .rg-hub-card:is(:hover,:focus-visible) .rg-image-arrow { translate:2px -2px;background:var(--lime);color:var(--lime-ink,#172419);border-color:var(--lime); }
}
@media(max-width:760px){
  .rg-hub-grid { grid-template-columns:minmax(0,1fr); }
  .rg-image-tag { top:16px;left:16px;font-size:10px;max-width:calc(100% - 32px); }
  .rg-image-caption { inset:auto 18px 20px;grid-template-columns:minmax(0,1fr) 36px;gap:10px; }
  .rg-image-title { font-size:clamp(21px,6vw,27px); }
  .rg-image-arrow { width:36px;height:36px;font-size:20px; }
  .rg-hub-in { padding:20px; }
  .rg-head-pic img,.rg-hub-pic img { transform:scale(1.025); }
  .rg-head-pic figcaption { padding:12px 16px; }
  .rg-hub-card:hover { transform:none; }
}
@media(prefers-reduced-motion:reduce){
  .rg-head-pic img,.rg-hub-pic img { transform:none!important;translate:none!important;scale:1!important;transition:none!important; }
  .rg-hub-card,.rg-more-card,.rg-image-arrow { transform:none!important;translate:none!important;transition:none!important;animation:none!important; }
  body.ratgeber .grain { animation:none!important; }
}