/* fd-bau: universal-inhalt v1 */
/* Universal-Clip Inhaltsseite /fd/ratgeber/seite: Stil */
.rgb{--soft:#f7f2ea;--line:#e9e3d8;--ink:#2a2722;--muted:#7a7367;--acc:#a96544;--accd:#87502f;--paper:#fffdf9;
  --fd:"Noto Sans","Segoe UI",Roboto,Arial,sans-serif;
  font-family:var(--fd);color:var(--ink);background:var(--soft);line-height:1.55;font-size:17px;
  max-width:1320px;margin:0 auto;overflow:hidden;border-radius:14px}
.rgb *{box-sizing:border-box;margin:0;padding:0}
.rgb a{color:inherit;text-decoration:none}
.rgb h1,.rgb h2,.rgb h3{font-family:var(--fd);font-weight:900;line-height:1;letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.rgb p{max-width:40em}
.rgb b,.rgb strong{font-weight:700}
.rgb .eyebrow{font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:.55rem}
.rgb .tiny{font-size:.82rem;color:var(--muted)}
.rgb .btn{display:inline-flex;align-items:center;gap:.6em;font-weight:700;font-size:.95rem;letter-spacing:.02em;padding:.9em 1.5em;border-radius:999px;background:var(--ink);color:var(--soft);transition:transform .2s,background .2s}
.rgb .btn:hover{background:var(--accd);transform:translateY(-2px)}
.rgb .btn svg{width:1.1em;height:1.1em;flex:0 0 auto}
.rgb .btn.light{background:var(--paper);color:var(--ink);border:1px solid var(--line)}
.rgb .btn.light:hover{background:var(--acc);color:var(--paper);border-color:var(--acc)}
.rgb .ghost{display:inline-flex;align-items:center;gap:.4em;font-weight:600;color:var(--accd);border-bottom:2px solid var(--line);padding-bottom:.1em;transition:border-color .2s}
.rgb .ghost:hover{border-color:var(--acc)}
.rgb .btn:focus-visible,.rgb .ghost:focus-visible,.rgb .chip:focus-visible,.rgb summary:focus-visible,.rgb .karte:focus-visible,.rgb .figur:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.rgb .rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.rgb .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rgb .rv{opacity:1;transform:none;transition:none}}

/* ---------- HERO ---------- */
.rgb .hero{padding:clamp(2.4rem,6vw,4.4rem) clamp(1.2rem,5vw,4rem) clamp(1.6rem,3.6vw,2.6rem)}
.rgb .hero h1{font-size:clamp(2rem,4.9vw,3.8rem);line-height:.96;overflow-wrap:anywhere;max-width:17em}
.rgb .hero h1 em{font-style:normal;color:var(--acc);display:block;font-weight:500;font-size:.36em;letter-spacing:0;margin-top:.6em;line-height:1.3}
.rgb .hero p{margin-top:1.4rem;font-size:1.08rem;color:var(--muted)}
.rgb .krume{font-size:.85rem;color:var(--muted);margin-bottom:1.1rem}
.rgb .krume a{border-bottom:1px solid var(--line)}
.rgb .krume a:hover{border-color:var(--acc)}
.rgb .chips{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.6rem}
.rgb .chip{display:inline-flex;align-items:center;gap:.5em;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.55em 1.1em;font-weight:600;font-size:.92rem;transition:border-color .2s,background .2s}
.rgb .chip:hover{border-color:var(--acc);background:#fff}
.rgb .chip svg{width:1em;height:1em;stroke:var(--accd);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- FAKTEN-BAND ---------- */
.rgb .facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);
  padding:clamp(1.2rem,2.6vw,1.8rem) clamp(1.2rem,5vw,4rem);display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem 2rem}
.rgb .facts>div{display:flex;gap:.8rem;align-items:flex-start}
.rgb .facts svg{width:1.5rem;height:1.5rem;flex:0 0 auto;stroke:var(--accd);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-top:.1rem}
.rgb .facts b{font-weight:800;font-size:.98rem;display:block;letter-spacing:-.02em}
.rgb .facts span{font-size:.9rem;color:var(--muted);display:block}

/* ---------- ABSCHNITT ---------- */
.rgb section.blk{padding:clamp(2.6rem,6vw,4.4rem) clamp(1.2rem,5vw,4rem)}
.rgb section.blk+section.blk{border-top:1px solid var(--line)}
.rgb .blk h2{font-size:clamp(1.8rem,4.4vw,3rem);line-height:.96;margin-left:-.03em}
.rgb .blk .lead{font-size:1.15rem;font-weight:500;line-height:1.45;margin-top:1.1rem}
.rgb .blk p+p{margin-top:.9rem}
.rgb .blk h3{font-size:1.22rem;margin-bottom:.5rem;letter-spacing:-.025em}

/* ---------- ZWEI SPALTEN: Text + Bild ---------- */
.rgb .zwei{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.4rem,3.4vw,2.8rem);align-items:start;margin-top:1.6rem}
.rgb .zwei.schmal{grid-template-columns:minmax(0,1fr) 320px}

/* ---------- BILD MIT LUPE ---------- */
.rgb .figur{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;cursor:zoom-in;position:relative}
.rgb .figur img{display:block;width:100%;height:auto}
/* Beschnitt fuer Bilder mit stoerendem Rand (Hersteller-Grafik: links steht ein
   angeschnittener Textblock). --ar = sichtbares Seitenverhaeltnis, --op = welcher
   Teil stehen bleibt. In der Lupe erscheint immer das GANZE Bild. */
.rgb .figur .cut{display:block;overflow:hidden;aspect-ratio:var(--ar,1)}
.rgb .figur .cut img{width:100%;height:100%;object-fit:cover;object-position:var(--op,center)}
.rgb .figur figcaption{padding:.55rem 3.2rem .6rem .8rem;font-size:.82rem;color:var(--muted);line-height:1.4;border-top:1px solid var(--line);background:var(--paper)}
.rgb .figur figcaption b{color:var(--ink)}
.rgb .lupe{position:absolute;right:.6rem;bottom:3.4rem;width:2.2rem;height:2.2rem;border-radius:50%;background:rgba(42,39,34,.78);color:#fff;display:flex;align-items:center;justify-content:center;pointer-events:none}
.rgb .lupe svg{width:1.15rem;height:1.15rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* ---------- KARTEN (Hub + Themen) ---------- */
.rgb .karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.4vw,1.6rem);margin-top:1.8rem}
.rgb .karte{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .2s,transform .2s}
.rgb .karte:hover{border-color:var(--acc);transform:translateY(-3px)}
.rgb .karte .bild{aspect-ratio:16/9;overflow:hidden;background:var(--soft)}
.rgb .karte .bild img{width:100%;height:100%;object-fit:cover;display:block}
.rgb .karte .txt{padding:clamp(1rem,2.2vw,1.5rem);display:flex;flex-direction:column;gap:.55rem;flex:1}
.rgb .karte h3{font-size:1.28rem}
.rgb .karte p{font-size:.97rem;color:var(--muted);max-width:34em}
.rgb .karte .mehr{margin-top:auto;font-weight:700;color:var(--accd);display:inline-flex;align-items:center;gap:.4em;font-size:.95rem}
.rgb .karte .mehr svg{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- WEG-KARTEN (Text ohne Bild) ---------- */
.rgb .weg{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,2vw,1.3rem);margin-top:1.6rem}
.rgb .weg.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.rgb .weg li{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:clamp(1rem,2.2vw,1.4rem)}
.rgb .weg b{display:block;font-weight:800;letter-spacing:-.02em;margin-bottom:.35rem}
.rgb .weg span{display:block;font-size:.96rem;color:var(--muted)}
.rgb .weg .ic{width:1.6rem;height:1.6rem;margin-bottom:.5rem;display:block;stroke:var(--accd);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- TABELLE ---------- */
.rgb .tabwrap{margin-top:1.6rem;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper)}
.rgb table{width:100%;border-collapse:collapse;font-size:.95rem}
.rgb caption{text-align:left;padding:.9rem 1rem;font-weight:800;letter-spacing:-.02em;border-bottom:1px solid var(--line)}
.rgb th,.rgb td{padding:.7rem 1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.rgb thead th{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.rgb tbody tr:last-child td{border-bottom:none}
.rgb tbody th{font-weight:700}

/* ---------- SKIZZEN (gezeichnet, keine Fotos) ---------- */
.rgb .skizze{margin:1.6rem 0 0;border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:clamp(1rem,2.4vw,1.6rem)}
.rgb .skizze svg{display:block;width:100%;height:auto}
/* Zwei Fassungen je Zeichnung: Auf dem Handy ist die Zeichenflaeche nur rund ein
   Drittel so breit; eine 1:1 verkleinerte Fassung haette 5 Pixel hohe Beschriftungen.
   Die schmale Fassung bricht deshalb um und schreibt groesser. */
.rgb .skizze .schmal{display:none}
@media (max-width:560px){
  .rgb .skizze .weit{display:none}
  .rgb .skizze .schmal{display:block}
}
.rgb .skizze figcaption{margin-top:.8rem;font-size:.85rem;color:var(--muted);line-height:1.45}
.rgb .skizze figcaption b{color:var(--ink)}

/* ---------- AKKORDEON ---------- */
.rgb .gruppe{margin-top:1.6rem}
.rgb details{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:0 1.2rem;margin-top:.7rem}
.rgb details[open]{border-color:#ddd4c4}
.rgb summary{cursor:pointer;list-style:none;font-weight:700;padding:1rem 2rem 1rem 0;position:relative;letter-spacing:-.01em}
.rgb summary::-webkit-details-marker{display:none}
.rgb summary::after{content:"";position:absolute;right:.2rem;top:1.35rem;width:.6rem;height:.6rem;border-right:2px solid var(--accd);border-bottom:2px solid var(--accd);transform:rotate(45deg);transition:transform .2s}
.rgb details[open] summary::after{transform:rotate(-135deg)}
.rgb details .a{padding:0 0 1.1rem;color:var(--muted);font-size:.98rem}
.rgb details .a p+p{margin-top:.7rem}
.rgb details .a ul{margin:.5rem 0 0 1.1rem}
.rgb details .a li{margin-bottom:.35rem}

/* ---------- DUNKLES BAND ---------- */
.rgb .band{margin:clamp(1.4rem,3vw,2.4rem) clamp(1.2rem,5vw,4rem);border-radius:14px;background:var(--ink);color:var(--soft);
  padding:clamp(1.8rem,4.4vw,3.2rem);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.4rem,3.4vw,2.6rem);align-items:start}
.rgb .band h2{color:var(--soft);font-size:clamp(1.6rem,3.4vw,2.6rem)}
.rgb .band p{color:#d9d2c6;margin-top:1rem}
.rgb .band .eyebrow{color:#e2a486}
.rgb .band ul{list-style:none;display:grid;gap:.8rem;background:rgba(255,253,249,.06);border:1px solid #4a4239;border-radius:14px;padding:clamp(1rem,2.2vw,1.5rem)}
.rgb .band li{font-size:.96rem;color:#e6e0d5}
.rgb .band li b{color:var(--soft);display:block}
.rgb .band a.ghost{color:#e2a486;border-color:#5a5048}
.rgb .band a.ghost:hover{border-color:#e2a486}

/* ---------- WEITERLESEN + SCHLUSS ---------- */
.rgb .weiter{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.rgb .ende{padding:0 clamp(1.2rem,5vw,4rem) clamp(2.4rem,5vw,3.6rem);display:flex;flex-direction:column;gap:1rem}
.rgb .ende h2{font-size:clamp(1.5rem,3vw,2.2rem)}
.rgb .ende .row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:.4rem}
.rgb .quelle{margin-top:1.4rem;font-size:.84rem;color:var(--muted);max-width:46em}

/* ---------- BILDLUPE (ganzes Bild ueber der Seite) ---------- */
.rgb-lupe{position:fixed;inset:0;z-index:2147483000;background:rgba(24,22,19,.96);display:none;
  align-items:center;justify-content:center;padding:clamp(.8rem,3vw,2rem);
  font-family:"Noto Sans","Segoe UI",Roboto,Arial,sans-serif}
.rgb-lupe.an{display:flex}
.rgb-lupe figure{margin:0;max-width:min(96vw,1100px);max-height:100%;display:flex;flex-direction:column;gap:.7rem}
.rgb-lupe img{max-width:100%;max-height:calc(100vh - 8rem);width:auto;height:auto;margin:0 auto;border-radius:10px;background:#fff;object-fit:contain}
.rgb-lupe figcaption{color:#e6e0d5;font-size:.9rem;line-height:1.45;text-align:center}
.rgb-lupe button{position:absolute;border:none;background:rgba(247,242,234,.14);color:#fff;border-radius:999px;cursor:pointer;
  width:2.9rem;height:2.9rem;display:flex;align-items:center;justify-content:center}
.rgb-lupe button:hover{background:rgba(247,242,234,.28)}
.rgb-lupe button svg{width:1.3rem;height:1.3rem;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rgb-lupe .zu{top:1rem;right:1rem}
.rgb-lupe .vor{right:1rem;top:50%;margin-top:-1.45rem}
.rgb-lupe .zur{left:1rem;top:50%;margin-top:-1.45rem}
.rgb-lupe .zaehler{position:absolute;bottom:1rem;left:0;right:0;text-align:center;color:#b9b1a5;font-size:.85rem}

/* ---------- SCHMALER ---------- */
@media (max-width:900px){
  .rgb{font-size:16px;border-radius:0}
  .rgb .facts{grid-template-columns:1fr;gap:1rem}
  .rgb .zwei,.rgb .zwei.schmal{grid-template-columns:minmax(0,1fr)}
  .rgb .karten,.rgb .weg,.rgb .weg.drei{grid-template-columns:minmax(0,1fr)}
  .rgb .band{grid-template-columns:minmax(0,1fr)}
  .rgb .zwei .figur{max-width:520px}
}
@media (max-width:560px){
  .rgb .hero{padding:1.8rem 1.1rem 1.2rem}
  .rgb .hero h1{font-size:1.85rem}
  .rgb .hero h1 em{font-size:.42em}
  .rgb .hero p{font-size:1rem}
  .rgb .chip{font-size:.86rem;padding:.5em .9em}
  .rgb section.blk{padding:2.1rem 1.1rem}
  .rgb .blk h2{font-size:1.65rem}
  .rgb .blk .lead{font-size:1.04rem}
  .rgb .band{margin:1rem .9rem;padding:1.4rem}
  .rgb .ende{padding:0 1.1rem 2.2rem}
  .rgb .figur figcaption{padding:.5rem 2.9rem .55rem .7rem;font-size:.79rem}
  .rgb .lupe{bottom:3.9rem;width:2rem;height:2rem}
  /* Tabellen brechen in Karten um */
  .rgb table,.rgb tbody,.rgb tr,.rgb td,.rgb th,.rgb caption{display:block;width:100%}
  .rgb thead{display:none}
  .rgb tbody tr{border-bottom:1px solid var(--line);padding:.5rem 0}
  .rgb tbody tr:last-child{border-bottom:none}
  .rgb th,.rgb td{border:none;padding:.28rem 1rem}
  .rgb tbody th{padding-top:.7rem;font-size:1.02rem}
  .rgb td::before{content:attr(data-t) ": ";font-weight:700;color:var(--ink)}
  .rgb td.ohne::before{content:none}
}
/* Native Ueberschrift der Seite verstecken - die H1 steht im Clip. Der Seitentitel
   bleibt erhalten, weil Fussleiste und Brotkrume ihn ziehen. */
#content > .sqrallwaysboxed > h1{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}