/* Exposé-Beispiele – ergänzt rw.css, alle Klassen mit ex- */
/* xb-page, xb-sheet, xb-list statt ex-…: die Namen belegt rw.css schon für den App-Exposé-Editor */
.ex-banner{background:#b3261e;color:#fff;text-align:center;font:600 .9rem/1.35 var(--sans);padding:8px 16px;letter-spacing:.01em}
.xb-page{padding:24px 0 8px}
.ex-crumb{margin:0 0 14px}
.xb-sheet{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);box-shadow:0 10px 30px rgba(30,40,35,.08);overflow:hidden;max-width:920px;margin:0 auto}
.xb-sheet::after{content:"MUSTER";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 clamp(4rem,16vw,10rem)/1 var(--sans);color:rgba(47,93,80,.045);transform:rotate(-24deg);pointer-events:none;letter-spacing:.08em}
.ex-cover{position:relative;line-height:0}
.ex-cover img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;max-height:520px}
.ex-cover .ex-ki{position:absolute;right:10px;top:10px;line-height:1.2;background:rgba(20,30,25,.72);color:#fff;font-size:.75rem;padding:4px 9px;border-radius:999px}
.ex-head{background:var(--brand);color:#fff;padding:20px 24px 22px}
.ex-head .ex-kicker{margin:0 0 4px;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.ex-head h1{margin:0 0 6px;font-size:clamp(1.45rem,3.6vw,2.1rem);line-height:1.2;color:#fff}
.ex-head .ex-sub{margin:0;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;opacity:.95}
.ex-head .ex-price{font-weight:700;font-size:1.25rem;color:#fff}
.ex-body{padding:8px 24px 24px;position:relative;z-index:1}
.ex-body h2{font-size:1.15rem;margin:26px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--brand-l);color:var(--brand-d)}
.ex-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:18px 0 4px}
.ex-fact{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.ex-fact span{display:block;font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.ex-fact b{display:block;font-size:1.02rem;margin-top:2px}
.xb-list{columns:2 240px;column-gap:28px;padding-left:1.1em;margin:0}
.xb-list li{margin:0 0 6px;break-inside:avoid}
.ex-cmps{display:grid;gap:18px}
.ex-cmpcap{margin:8px 0 0;font-size:.88rem;color:var(--muted)}
.ex-energy{margin:6px 0 4px}
.ex-scale{display:grid;grid-template-columns:repeat(9,1fr);border-radius:8px;overflow:hidden;font:700 .78rem/1 var(--sans);color:#fff;text-align:center}
.ex-scale span{padding:8px 0}
.ex-mark{position:relative;height:30px}
.ex-mark i{position:absolute;top:0;transform:translateX(-50%);font-style:normal;font-size:.82rem;font-weight:700;white-space:nowrap;color:var(--ink)}
.ex-mark i::before{content:"▲";display:block;text-align:center;color:var(--ink);line-height:1}
.ex-tbl{width:100%;border-collapse:collapse;font-size:.93rem}
.ex-tbl th,.ex-tbl td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.ex-tbl th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.ex-tbl td.r,.ex-tbl th.r{text-align:right;white-space:nowrap}
.ex-tbl tfoot td{border-bottom:0;padding-top:6px}
.ex-tbl tfoot tr:last-child td{font-weight:700;font-size:1.02rem;border-top:2px solid var(--ink)}
.ex-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.ex-gal figure{margin:0}
.ex-gal img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block}
.ex-gal figcaption{font-size:.86rem;color:var(--muted);margin-top:6px}
.ex-contact{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.ex-avatar{width:56px;height:56px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;flex:none}
.ex-contact p{margin:0;line-height:1.5}
.ex-foot{border-top:1px solid var(--line);margin-top:24px;padding-top:12px;font-size:.8rem;color:var(--muted);display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px}
.ex-cta{max-width:920px;margin:26px auto 0;background:var(--brand-l);border-radius:var(--r-l);padding:22px 24px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between}
.ex-cta h2{margin:0 0 4px;font-size:1.2rem}
.ex-cta p{margin:0}
.ex-cta-btns{display:flex;flex-wrap:wrap;gap:10px}
.ex-more{max-width:920px;margin:30px auto 0}
.ex-more h2{font-size:1.1rem}
.ex-chips{display:flex;flex-wrap:wrap;gap:8px}
.ex-chips a{border:1px solid var(--line-d);border-radius:999px;padding:6px 12px;text-decoration:none;color:var(--ink);font-size:.9rem;background:#fff}
.ex-chips a:hover,.ex-chips a[aria-current]{border-color:var(--brand);color:var(--brand-d)}
/* Übersicht */
.ex-grp{margin:30px 0 0}
.ex-grp h2{font-size:1.2rem;margin:0 0 12px}
.ex-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.ex-card{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);transition:box-shadow .15s,transform .15s}
.ex-card:hover{box-shadow:0 8px 24px rgba(30,40,35,.12);transform:translateY(-2px)}
.ex-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.ex-card div{padding:12px 14px 14px}
.ex-card b{display:block;margin-bottom:3px}
.ex-card span{font-size:.88rem;color:var(--muted)}
@media (max-width:600px){
  .ex-head,.ex-body{padding-left:16px;padding-right:16px}
  .ex-scale{font-size:.66rem}
  .ex-tbl{font-size:.85rem}
}
@media print{
  header.top,footer.foot,.ex-cta,.ex-more,.ex-crumb{display:none}
  .xb-sheet{box-shadow:none;border:0}
}
/* Tablet-Rahmen: Exposé scrollt im Bildschirm */
.ex-tablet{position:relative;width:min(640px,100%,calc((86vh - 76px)*.75 + 36px));margin:0 auto;padding:38px 18px;background:linear-gradient(145deg,#2b2f33,#121416);border-radius:44px;box-shadow:0 0 0 2px #3a3f44,0 0 0 4px #0c0d0e,0 24px 60px rgba(20,25,22,.35)}
.ex-tablet::before{content:"";position:absolute;top:15px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#4a5866,#0b0e11 70%);box-shadow:0 0 0 1px #000}
.ex-tablet::after{content:"";position:absolute;top:-6px;right:80px;width:56px;height:4px;border-radius:3px 3px 0 0;background:#2b2f33}
.ex-screen{aspect-ratio:3/4;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border-radius:16px;background:#fff;scrollbar-width:thin;scrollbar-color:rgba(47,93,80,.45) transparent}
.ex-screen:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.ex-screen .xb-sheet{max-width:none;border:0;border-radius:0;box-shadow:none}
.ex-hint{text-align:center;margin:12px 0 0}
@media (max-width:600px){
  .ex-tablet{width:100%;padding:24px 10px;border-radius:28px}
  .ex-tablet::after{right:50px;width:40px}
  .ex-tablet::before{top:9px;width:6px;height:6px;margin-left:-3px}
  .ex-screen{aspect-ratio:auto;height:72vh;border-radius:10px}
}
@media print{
  .ex-tablet{padding:0;background:none;box-shadow:none}
  .ex-tablet::before,.ex-tablet::after,.ex-hint{display:none}
  .ex-screen{aspect-ratio:auto;height:auto;overflow:visible}
}