/* =====================================================================
   A+ PDP Builder — Ergänzungen zum Prototyp-CSS (pdp.base.css)
   1) Builder-Leiste (Kategorie → SKU)
   2) Neue Block-Typen (USP, Galerie, FAQ, CTA, Richtext)
   3) API-Hilfe auf der Startseite
   ===================================================================== */

/* ---------------------------------------------------------- Builder-Bar -- */
.bbar{position:sticky;top:0;z-index:200;background:#111;color:#fff;
  font-family:"Plus Jakarta Sans",system-ui,Arial,sans-serif;font-size:13px}
.bbar .in{max-width:1400px;margin:0 auto;padding:9px 20px;display:flex;
  align-items:center;gap:12px;flex-wrap:wrap}
.bbar .brand{font-weight:800;letter-spacing:-.3px;display:flex;align-items:center;gap:7px}
.bbar .brand b{background:#fff;color:#111;border-radius:5px;padding:2px 6px;font-size:12px}
.bbar .brand small{color:#8f8f8b;font-weight:500}
.bbar select{background:#1e1e1e;color:#fff;border:1px solid #3a3a3a;border-radius:8px;
  padding:7px 10px;font:inherit;min-width:170px;max-width:340px}
.bbar select:focus{outline:2px solid #4a4a4a}
.bbar .sp{flex:1}
.bbar a.act,.bbar button.act{background:#fff;color:#111;border-radius:100px;padding:7px 15px;
  font-weight:700;font-size:12.5px;border:none;cursor:pointer;white-space:nowrap}
.bbar a.act.ghost,.bbar button.act.ghost{background:transparent;color:#fff;border:1px solid #4a4a4a}
.bbar .warn{background:#7a2318;color:#ffd9d4;border-radius:100px;padding:5px 12px;font-size:12px}

/* ------------------------------------------------------------ Landing --- */
.lz{max-width:1200px;margin:0 auto;padding:44px 20px 70px;
  font-family:"Plus Jakarta Sans",system-ui,Arial,sans-serif}
.lz h1{font-size:34px;letter-spacing:-.6px;font-weight:800}
.lz .sub{color:#5a5a5a;margin-top:10px;font-size:16px;max-width:720px;line-height:1.6}
.lz h2{font-size:15px;text-transform:uppercase;letter-spacing:.7px;color:#8a8a86;
  margin:38px 0 14px;font-weight:700}
.lz .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.lz .card{border:1px solid #e6e6e4;border-radius:14px;padding:14px;display:flex;gap:12px;
  background:#fff;transition:border-color .15s,box-shadow .15s}
.lz .card:hover{border-color:#111;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.lz .card .th{width:64px;height:64px;border-radius:10px;background:#f2f2ef;flex:none;
  object-fit:cover;display:block}
.lz .card .nm{font-weight:700;font-size:13.5px;line-height:1.35}
.lz .card .mt{color:#8a8a86;font-size:11.5px;margin-top:4px;display:flex;gap:8px;flex-wrap:wrap}
.pill{border-radius:100px;padding:2px 8px;font-size:10.5px;font-weight:700;letter-spacing:.3px}
.pill.draft{background:#f3f3f0;color:#77776f}
.pill.live{background:#e4f4ee;color:#0a6552}
.pill.empty{background:#fdf1e6;color:#a45b12}
.pill.nofeed{background:#fdeaea;color:#a4231a}

/* --------------------------------------------------------- neue Blöcke -- */
.premium .pc-lead{max-width:660px;margin:14px auto 0;text-align:center;color:#4a4a4a;
  font-size:16px;line-height:1.6}

/* USP-Reihe */
.pc-usp{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px;margin-top:40px}
.pc-usp .u{text-align:center}
.pc-usp .u .ic{font-size:26px;line-height:1}
.pc-usp .u h4{font-size:17px;font-weight:700;margin:12px 0 6px;letter-spacing:-.2px}
.pc-usp .u p{color:#4a4a4a;font-size:14.5px;line-height:1.55}

/* Merkmal-Kreise (iconspecs) — der Nachbau des gebackenen Icon-Grids aus dem
   Shop. Ring statt Kachel, weil die Shop-Vorlage denselben Kreis benutzt. */
.pc-icons{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:34px 24px;
  margin-top:40px}
/* Volle Zeilen statt einer Waise am Ende — auto-fit macht aus sechs Merkmalen
   sonst 5 + 1. */
.pc-icons.n4{grid-template-columns:repeat(4,1fr)}
.pc-icons.n6{grid-template-columns:repeat(3,1fr);max-width:900px;margin-left:auto;margin-right:auto}
.pc-icons.n8{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){
  .pc-icons,.pc-icons.n4,.pc-icons.n6,.pc-icons.n8{grid-template-columns:repeat(2,1fr)}
}
.pc-icons .ic-item{text-align:center}
.pc-icons .ic-ring{width:78px;height:78px;margin:0 auto 14px;border-radius:50%;
  border:1px solid #d8d8d2;display:flex;align-items:center;justify-content:center;
  font-size:30px;line-height:1;background:#fff}
.pc-icons .ic-label{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:#9a9a96;
  font-weight:700}
.pc-icons .ic-value{font-size:17px;font-weight:700;letter-spacing:-.2px;margin-top:3px}
.pc-icons .ic-text{color:#4a4a4a;font-size:13.5px;line-height:1.55;margin-top:7px}

/* Kachel-Variante: das grüne Raster, das der Shop heute als Bild ausliefert. */
.pc-icons.st-kacheln{gap:12px}
.pc-icons.st-kacheln .ic-item{background:#e4efe0;border-radius:6px;padding:26px 18px 22px}
.pc-icons.st-kacheln .ic-ring{border-color:#2f4f36;background:transparent;width:66px;height:66px;
  font-size:26px;margin-bottom:12px}
.pc-icons.st-kacheln .ic-label{color:#2f4f36}
.pc-icons.st-kacheln .ic-value{color:#1d3323}
.pc-icons.st-kacheln .ic-text{color:#3c5442;font-size:12.5px}

/* ------------------------------------------------- Markenkasten ---------- */
/* Weiße Karte auf randabfallendem Foto. Im Shop ein gebackenes JPEG; die Karte
   liegt hier über dem Bild, nicht daneben — genau das kann `split` nicht. */
.pc-brand{position:relative;min-height:520px;display:flex;align-items:center;
  margin:0;overflow:hidden}
.pc-brand .bm-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pc-brand .pcw{position:relative;width:100%;display:flex}
.pc-brand.flip .pcw{justify-content:flex-end}
.bm-card{background:#fff;max-width:430px;padding:38px 36px 34px;
  box-shadow:0 10px 40px rgba(0,0,0,.14)}
.bm-logo{max-width:150px;height:auto;display:block;margin-bottom:20px}
.bm-mark{display:inline-flex;align-items:stretch;margin-bottom:22px;border:2px solid #111}
.bm-mark-k{background:#111;color:#fff;font-weight:900;font-size:26px;letter-spacing:-1px;
  padding:8px 12px;line-height:1}
.bm-mark-n{display:flex;align-items:center;padding:0 14px;font-weight:800;font-size:14px;
  letter-spacing:3px;text-transform:uppercase}
.bm-card h2{font-size:23px;letter-spacing:-.4px;margin:0 0 12px;font-weight:800}
.bm-card p{margin:0;font-size:14.5px;line-height:1.7;color:#4a4a4a}

/* -------------------------------------------- Fakten-Karten auf Foto ----- */
.pc-facts{position:relative;padding:70px 0;display:flex;align-items:center;overflow:hidden}
.pc-facts .fc-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pc-facts .pcw{position:relative;width:100%}
.fc-row{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.fc-row.n2{max-width:760px;grid-template-columns:repeat(2,1fr)}
.fc-row.n3{grid-template-columns:repeat(3,1fr)}
.fc-card{background:#fff;padding:30px 26px;text-align:center;
  box-shadow:0 10px 34px rgba(0,0,0,.12)}
.fc-ring{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;border:1px solid #2f4f36;
  display:flex;align-items:center;justify-content:center;font-size:25px;line-height:1}
.fc-card h3{margin:0 0 10px;font-size:16px;font-weight:800;letter-spacing:-.2px}
.fc-card p{margin:0;font-size:13.5px;line-height:1.65;color:#4a4a4a}
@media (max-width:820px){
  .pc-brand{min-height:0;padding:0}
  .pc-brand .bm-bg{position:relative;height:260px}
  .pc-brand .pcw{margin-top:-60px}
  .bm-card{max-width:none}
  .fc-row,.fc-row.n2,.fc-row.n3{grid-template-columns:1fr}
}

/* Galerie */
.pc-gal{display:grid;gap:20px;margin-top:40px}
.pc-gal.c2{grid-template-columns:repeat(2,1fr)}
.pc-gal.c3{grid-template-columns:repeat(3,1fr)}
.pc-gal.c4{grid-template-columns:repeat(4,1fr)}
.pc-gal figure{margin:0}
.pc-gal img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#eee;display:block;border-radius:4px}
.pc-gal figcaption{color:#8a8a86;font-size:12.5px;margin-top:8px}

/* FAQ */
.pc-faq{max-width:820px;margin:36px auto 0}
.pc-faq details{border-bottom:1px solid #e4e4df}
.pc-faq summary{cursor:pointer;list-style:none;padding:18px 34px 18px 2px;position:relative;
  font-size:16.5px;font-weight:700;letter-spacing:-.2px}
.pc-faq summary::-webkit-details-marker{display:none}
.pc-faq summary::after{content:"+";position:absolute;right:6px;top:15px;font-size:22px;
  font-weight:400;color:#8a8a86;transition:transform .18s}
.pc-faq details[open] summary::after{transform:rotate(45deg)}
.pc-faq .a{padding:0 34px 20px 2px;color:#4a4a4a;font-size:15px;line-height:1.65}

/* Richtext */
.pc-rich{max-width:760px;margin:32px auto 0;color:#333;font-size:16px;line-height:1.72}
.pc-rich h3{font-size:21px;margin:28px 0 10px;font-weight:700}
.pc-rich ul,.pc-rich ol{padding-left:22px}
.pc-rich li{margin:6px 0}
.pc-rich a{text-decoration:underline}

/* CTA-Band */
.pc-cta{position:relative;text-align:center;padding:84px 24px;background:#111;color:#fff;
  background-size:cover;background-position:center}
.pc-cta::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45)}
.pc-cta.plain::before{display:none}
.pc-cta .in{position:relative;max-width:640px;margin:0 auto}
.pc-cta h2{font-size:32px;font-weight:700;letter-spacing:-.5px;line-height:1.2}
.pc-cta p{margin-top:14px;color:#e2e2df;font-size:16px;line-height:1.6}
.pc-cta a.b{display:inline-block;margin-top:26px;background:#fff;color:#111;border-radius:100px;
  font-weight:700;font-size:15px;padding:15px 32px}

/* Platzhalter, solange ein Block noch kein Bild hat */
.ph-img{width:100%;aspect-ratio:1/1.12;background:repeating-linear-gradient(45deg,#f3f3f1,
  #f3f3f1 12px,#eaeae6 12px,#eaeae6 24px);display:flex;align-items:center;justify-content:center;
  color:#a5a59f;font-size:12px;letter-spacing:.4px}

@media(max-width:1000px){
  .pc-gal.c3,.pc-gal.c4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .pc-gal.c2,.pc-gal.c3,.pc-gal.c4{grid-template-columns:1fr}
  .bbar select{min-width:0;flex:1}
}

.lz .cat{padding-top:30px}
/* Trennlinie zwischen den Kategorien — nicht über der ersten */
.lz .cat + .cat{border-top:1px solid #e6e6e4;margin-top:34px}
.lz .cat h2{margin:0 0 14px}

/* ------------------------------------------------------- Produktreihen -- */
/* Kurzbeschreibung: was IST diese Reihe. Steht direkt unter der Überschrift,
   weil man das beim Sichten liest und nicht sucht. */
.lz .reihe-info{margin:-4px 0 12px;padding-left:13px;max-width:760px;font-size:12.5px;
  line-height:1.55;color:#5a5a5a}
.lz .reihe-info a{color:#8a8a86;text-decoration:underline;white-space:nowrap;font-size:11.5px}

/* Zwischenebene bei den Bodenbelägen: Kategorie → Reihe → Dekor. Die Reihe
   bekommt bewusst nur eine dünne Linie und keine Box — sonst sieht die
   Übersicht nach Karteikasten aus statt nach Sortiment. */
.lz .reihe{margin:0 0 26px}
.lz .reihe h3{font-size:13.5px;font-weight:800;letter-spacing:-.1px;margin:0 0 10px;
  padding-left:10px;border-left:3px solid #111}
.lz .reihe.no-serie h3{border-left-color:#dcdcd6;color:#77776f}
/* Reihe, in der noch kein Artikel im Builder liegt: schmaler, blasser Strich —
   sie soll da sein, aber die Reihen mit eigener Arbeit nicht zuschütten. */
.lz .reihe.leer{margin-bottom:14px}
.lz .reihe.leer h3{border-left-color:#ebebe6;font-weight:700;color:#5a5a5a}
.lz .reihe h3 .muted{font-weight:400;color:#a9a9a4;font-size:12px;letter-spacing:0}
.lz .reihe-more{margin-top:12px}
.lz .reihe-more summary{cursor:pointer;list-style:none;font-size:12px;color:#77776f;
  padding:7px 12px;border:1px dashed #dcdcd6;border-radius:100px;display:inline-block}
.lz .reihe-more summary::-webkit-details-marker{display:none}
.lz .reihe-more summary:hover{border-color:#111;color:#111}
.lz .reihe-more[open] summary{margin-bottom:12px}
/* Dekore, die es nur im Shop gibt: blass, bis sie jemand übernimmt. */
.lz .card.ghost{background:#fbfbf9;border-style:dashed;cursor:default}
.lz .card.ghost:hover{border-color:#dcdcd6;box-shadow:none}
.lz .card.ghost .th{opacity:.72}
.lz .card.ghost .nm{font-weight:600;color:#5a5a5a}
.pill.feed{background:#f1f1ee;color:#8a8a86}
.pill.erbt{background:#eef1fb;color:#3c4a86}
.lz .card.ghost .th-l{flex:none;line-height:0}
.lz .card.ghost a.nm{display:block;color:#5a5a5a;text-decoration:none}
.lz .card.ghost a.nm:hover{color:#111;text-decoration:underline}

/* Vorschau-Leiste: der Artikel steht nur im Feed. Sie sitzt über dem Shop-Kopf,
   weil die Seite darunter echt aussieht — ohne Hinweis hält man sie für fertig. */
.vorschau-bar{position:sticky;top:0;z-index:150;display:flex;align-items:center;gap:16px;
  background:#fdf1e6;border-bottom:1px solid #f0dcc4;padding:11px 20px;
  font-family:"Plus Jakarta Sans",system-ui,Arial,sans-serif;font-size:13px;color:#7a4a12;
  line-height:1.5}
.vorschau-bar > div{flex:1}
.vorschau-bar b{color:#a45b12}
.vorschau-bar button{border:none;background:#111;color:#fff;border-radius:100px;
  padding:8px 18px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.vorschau-bar button:disabled{opacity:.55;cursor:default}
.lz .card .adopt{margin-top:7px;border:1px solid #d8d8d2;background:#fff;border-radius:100px;
  padding:4px 11px;font:inherit;font-size:11px;font-weight:700;cursor:pointer;color:#111}
.lz .card .adopt:hover{border-color:#111;background:#111;color:#fff}
.lz .card .adopt:disabled{opacity:.55;cursor:default;background:#fff;color:#111}

/* ------------------------------------------------------- Shop-Kulisse --- */
/* Zubehör, ähnliche Artikel, Merkmaltabelle, Bewertungen: gehört dem Shop, nicht
   dem A+-Teil. Bewusst nüchtern gehalten — es soll den Rahmen zeigen, in dem der
   A+-Content steht, und ihm nicht die Aufmerksamkeit wegnehmen. */
.sk{padding:10px 0 40px}
.sk-sec{padding-top:36px}
.sk-sec h2{font-size:20px;font-weight:700;letter-spacing:-.3px;margin:0 0 16px}
.sk-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.sk-card{border:1px solid var(--line,#e4e4df);border-radius:8px;padding:14px;display:flex;
  flex-direction:column;gap:8px;text-decoration:none;color:inherit;background:#fff}
.sk-card:hover{border-color:#111}
.sk-card img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#f7f7f5}
.sk-card .t{font-size:13px;line-height:1.4}
.sk-card .p{font-weight:700;font-size:15px}
.sk-tab{width:100%;border-collapse:collapse;font-size:14px}
.sk-tab tr:nth-child(odd){background:#fafaf8}
.sk-tab th{text-align:left;font-weight:400;color:#77776f;padding:10px 12px;width:38%}
.sk-tab td{padding:10px 12px;font-weight:600}
.sk-rev{display:flex;gap:34px;flex-wrap:wrap;align-items:flex-start}
.sk-score{display:flex;flex-direction:column;gap:2px;font-size:13px;color:#77776f}
.sk-score b{font-size:34px;color:#111;line-height:1}
.sk-rev .st{color:#f0a020;letter-spacing:2px}
.sk-rev-list{flex:1;min-width:280px;display:grid;gap:14px}
.sk-rev-list p{margin:4px 0 0;color:#4a4a4a;font-size:14px;line-height:1.55}
.sk-hint{margin-top:12px;font-size:12px;color:#a5a59f}
/* Zubehör-Box in der Buybox */
.sk-zub{margin-top:18px;border:1px solid var(--line,#e4e4df);border-radius:8px;padding:12px 14px}
.sk-zub .sk-h{font-weight:700;font-size:14px;margin-bottom:8px}
.sk-zub-row{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:12.5px;cursor:pointer}
.sk-zub-row img{width:34px;height:34px;object-fit:contain;background:#f7f7f5;flex:none}
.sk-zub-row .n{flex:1;line-height:1.35}
.sk-zub-row .p{font-weight:700;white-space:nowrap}
.sk-zub-add{margin-top:9px;width:100%;border:1px solid #111;background:#fff;border-radius:100px;
  padding:8px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}

/* ---------------------------------------------------------- Bausteine --- */
/* Jeder Baustein bekommt eine Kopfleiste und darunter sich selbst, in voller
   Breite und mit demselben Template wie auf der Produktseite. */
.el-kopf{padding-bottom:10px}
.el-nav{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.el-nav a{border:1px solid #e6e6e4;border-radius:100px;padding:5px 12px;font-size:12px;
  color:#5a5a5a;text-decoration:none}
.el-nav a:hover{border-color:#111;color:#111}
.el-bar{background:#faf9f7;border-top:1px solid #e6e6e4;border-bottom:1px solid #e6e6e4;
  margin-top:54px;font-family:"Plus Jakarta Sans",system-ui,Arial,sans-serif}
.el-bar .lz{padding:22px 20px}
.el-bar h2{margin:0;font-size:15px;text-transform:none;letter-spacing:-.2px;color:#111;
  font-weight:800;display:flex;align-items:baseline;gap:10px}
.el-bar h2 code{background:#111;color:#fff;border-radius:6px;padding:3px 8px;font-size:12px}
.el-wofuer{margin:8px 0 0;font-size:13.5px;color:#4a4a4a;max-width:760px;line-height:1.55}
.el-felder{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.el-felder span{background:#fff;border:1px solid #e6e6e4;border-radius:6px;padding:2px 8px;
  font-size:11px;color:#8a8a86;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.el-felder b{color:#111;font-weight:700;margin-right:5px}
.el-code{margin-top:12px}
.el-code summary{cursor:pointer;list-style:none;font-size:12px;color:#77776f;
  border:1px dashed #dcdcd6;border-radius:100px;padding:5px 12px;display:inline-block}
.el-code summary::-webkit-details-marker{display:none}
.el-code pre{margin:10px 0 0;background:#111;color:#e8e8e3;border-radius:10px;padding:14px 16px;
  overflow-x:auto;font-size:12px;line-height:1.6}
.el-demo{padding:0 0 10px}

/* ------------------------------------------------------------ Notizen --- */
/* Querblick über alle kommentierten Dateien. Bild links, Notiz rechts und
   groß — man liest hier den Kommentar, das Bild ist nur die Erinnerung daran,
   worum es ging. */
.nz .nz-sum{color:#5a5a5a;font-size:13px;margin:14px 0 6px}

/* Reiter: dieselbe Liste, drei Ausschnitte (mit Notiz / ohne / alles). */
.nz-tabs{display:flex;gap:8px;margin:24px 0 0;flex-wrap:wrap}
.nz-tabs a{display:inline-flex;align-items:center;gap:7px;border:1px solid #d8d8d2;
  border-radius:100px;padding:8px 15px;font-size:12.5px;font-weight:700;color:#111;
  text-decoration:none;background:#fff}
.nz-tabs a:hover{border-color:#111}
.nz-tabs a.on{background:#111;border-color:#111;color:#fff}
.nz-tabs a .n{font-weight:400;font-size:11px;color:#8a8a86}
.nz-tabs a.on .n{color:#b5b5ae}

/* Gruppe je Artikel. In den großen Ansichten zugeklappt — der Browser lädt
   nichts, was in einem geschlossenen <details> steht. */
.nz .nz-grp{padding-top:18px}
.nz .nz-grp + .nz-grp{border-top:1px solid #e6e6e4;margin-top:18px}
.nz-grp > summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:8px;
  flex-wrap:wrap;font-size:15px;letter-spacing:-.2px;color:#111;padding:2px 0}
.nz-grp > summary::-webkit-details-marker{display:none}
.nz-grp > summary::before{content:'▸';color:#a9a9a4;font-size:12px;font-weight:400}
.nz-grp[open] > summary::before{content:'▾'}
.nz-grp > summary:hover b{text-decoration:underline}
.nz-grp > summary .muted{font-weight:400;color:#a9a9a4;font-size:12.5px;letter-spacing:0}
.nz-grp > summary .cnt{margin-left:auto;font-size:11.5px;color:#8a8a86;font-weight:400}
.nz-grp > summary .zur{font-size:11.5px;font-weight:700;color:#111;text-decoration:none;
  border:1px solid #d8d8d2;border-radius:100px;padding:3px 10px}
.nz-grp > summary .zur:hover{border-color:#111}
.nz-grp[open] > .nz-list{margin-top:12px}
.nz-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:12px}
.nz-item{display:flex;gap:12px;margin:0;padding:10px;border:1px solid #e6e6e4;border-radius:12px;
  background:#fff}
.nz-item > a{flex:none;width:104px;height:104px;border-radius:9px;overflow:hidden;
  background:#f2f2ef;display:flex;align-items:center;justify-content:center}
.nz-item img{width:100%;height:100%;object-fit:cover}
.nz-item figcaption{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
/* Die Notiz ist hier direkt schreibbar — sonst müsste man zum Kommentieren erst
   auf die Produktseite und wieder zurück. */
.nz-note{margin:0;width:100%;border:1px solid #ececE8;border-radius:8px;padding:7px 9px;
  font:inherit;font-size:13px;line-height:1.45;font-weight:600;color:#111;background:#fcfcfa;
  resize:vertical;outline:none;min-height:52px}
.nz-note::placeholder{font-weight:400;color:#b5b5ae}
.nz-note:focus{border-color:#111;background:#fff}
.nz-note.busy{border-color:#c9a227}
.nz-note.err{border-color:#c0392b;background:#fff5f4}
.nz-item.has-note .nz-note{background:#fff;border-color:#dcdcd6}
.nz-meta{margin:0;display:flex;align-items:center;gap:7px;font-size:10.5px;color:#8a8a86}
.nz-meta a{color:#111;font-weight:700;text-decoration:none}
.nz-file{margin:auto 0 0;font-size:9.5px;color:#b5b5ae;overflow-wrap:anywhere}
.mt-tag.scope{background:#eef1fb;color:#3c4a86}

/* --------------------------------------------------------- API-Hilfe ----- */
/* Werkzeugleiste der Arbeitsliste */
.lz .toolbar{display:flex;align-items:center;gap:12px;margin:26px 0 4px;flex-wrap:wrap}
.lz .toolbar input{height:42px;min-width:290px;border:1px solid #d8d8d2;border-radius:100px;
  padding:0 18px;font:inherit;font-size:14px;background:#fff;outline:none}
.lz .toolbar input:focus{border-color:#111}
.lz .toolbar .muted{color:#8a8a86;font-size:12.5px}
.lz .toolbar a.act{background:#111;color:#fff;border-radius:100px;padding:9px 16px;
  font-size:12.5px;font-weight:700}
.lz .toolbar a.act.ghost{background:transparent;color:#111;border:1px solid #d8d8d2}
.lz h2 .muted{text-transform:none;letter-spacing:0;font-weight:400;color:#a9a9a4}
.lz .card .assets{color:#5a5a5a}
.lz .card .assets b{color:#111;font-weight:800}

/* ================================================== Werkstatt-Sidebar ==== */
/* Sie schiebt die Seite zur Seite, statt sie zu überdecken: der A+-Content ist
   das, was beurteilt werden soll — halb verdeckt taugt er dafür nicht. Erst
   unter 1200 px legt sie sich als Overlay darüber, da ist kein Platz mehr. */
:root{--side-w:400px}
body.side-on{padding-right:var(--side-w)}
body.side-on .bbar{padding-right:0}

.side{position:fixed;top:0;right:0;bottom:0;width:var(--side-w);z-index:400;background:#fff;
  border-left:1px solid #e0e0dc;display:none;flex-direction:column;
  font-family:"Plus Jakarta Sans",system-ui,Arial,sans-serif;font-size:13px;color:#222}
body.side-on .side{display:flex}

.side-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:13px 16px;border-bottom:1px solid #ececE8;background:#111;color:#fff}
.side-head b{font-size:14px;letter-spacing:-.2px}
.side-sub{display:block;color:#9a9a94;font-size:11.5px;margin-top:2px}
.side-x{background:transparent;border:none;color:#9a9a94;font-size:16px;cursor:pointer;line-height:1}
.side-x:hover{color:#fff}

.side-tabs{display:flex;border-bottom:1px solid #ececE8;flex:none}
.side-tabs button{flex:1;background:none;border:none;border-bottom:2px solid transparent;
  padding:10px 6px;font:inherit;font-weight:700;font-size:12.5px;color:#8a8a86;cursor:pointer}
.side-tabs button.on{color:#111;border-bottom-color:#111}
.side-tabs .n{background:#f0f0ec;border-radius:100px;padding:1px 6px;font-size:10.5px;
  color:#77776f;margin-left:4px}

.side-pane{display:none;overflow-y:auto;padding:14px 16px 26px;flex:1}
.side-pane.on{display:block}
.side-note{color:#77776f;font-size:11.5px;line-height:1.55;margin-bottom:12px}
.side-note b{color:#111}
.side-note code{background:#f0f0ec;border-radius:4px;padding:1px 4px;font-size:10.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.side-empty{color:#a0a09a;font-size:12.5px;line-height:1.6;text-align:center;padding:30px 0}

/* Material-Kacheln */
.mt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.mt-grid figure{margin:0;border:1px solid #e8e8e4;border-radius:9px;overflow:hidden;background:#fafaf8}
.mt-grid figure.mt-raw{border-color:#ecd9c0}
.mt-grid a{display:block}
.mt-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#eee}
.mt-ph{display:flex;align-items:center;justify-content:center;gap:6px;aspect-ratio:4/3;
  background:#22221f;color:#c9c9c2;font-size:11px;font-weight:700;letter-spacing:.5px}
.mt-3d{flex-direction:column;gap:3px;background:#1c2b26;color:#8fd6bd;font-size:12px}
.mt-3d small{color:#5d8a7b;font-weight:500;font-size:10px}
.mt-grid figure.is-3d{border-color:#0a6552}
.mt-grid figcaption{display:flex;align-items:center;gap:5px;padding:5px 7px;font-size:10px;
  color:#8a8a86}
.mt-tag{border-radius:100px;padding:1px 6px;font-weight:800;font-size:9.5px;letter-spacing:.3px}
.mt-tag.raw{background:#fdf1e6;color:#a45b12}
.mt-tag.web{background:#e4f4ee;color:#0a6552}
.mt-sz{flex:1}
.mt-dl{color:#111;font-weight:800;text-decoration:none;font-size:12px}
.mt-id{color:#b5b5ae}
.mt-name{display:block;padding:0 7px 4px;font-size:9.5px;color:#a5a59f;line-height:1.3;
  word-break:break-all;max-height:26px;overflow:hidden}

/* Notizfeld je Datei — wächst beim Fokus, damit es im Ruhezustand nicht die
   Kachelreihe auseinanderzieht, beim Schreiben aber genug Platz hat. */
.mt-note{display:block;width:calc(100% - 12px);margin:0 6px 6px;border:1px solid #e4e4df;
  border-radius:6px;padding:4px 6px;font:inherit;font-size:10.5px;line-height:1.4;
  background:#fff;resize:none;height:24px;transition:height .12s,border-color .12s;color:#222}
.mt-note::placeholder{color:#c2c2bb}
.mt-note:focus{outline:none;border-color:#111;height:58px}
.mt-note.busy{border-color:#b9b9b2}
.mt-note.err{border-color:#c0392b;background:#fdf3f2}
.mt-grid figure.has-note{border-color:#111;background:#fff}
.mt-grid figure.has-note .mt-note{border-color:#d4d4cd;background:#fafaf8}

/* Reichweite je Datei — „gilt für die ganze Reihe/Kategorie". Steht unter der
   Notiz, weil beides beim selben Blick entschieden wird: was ist das Bild, und
   für wen gilt es. */
.mt-scope{display:block;width:calc(100% - 12px);margin:0 6px 6px;border:1px solid #e4e4df;
  border-radius:6px;padding:3px 5px;font:inherit;font-size:10px;background:#fff;color:#5a5a5a}
.mt-scope:focus{outline:none;border-color:#111}
.mt-grid figure.is-erbe{border-style:dashed;background:#fbfbf9}
.mt-erbe{display:block;margin:0 6px 5px;padding:2px 6px;border-radius:100px;font-size:9.5px;
  font-weight:700;background:#f1f1ee;color:#77776f;text-decoration:none;text-align:center}
.mt-erbe:hover{background:#111;color:#fff}

/* Videovorschau: natives <dialog>, kein Player-Framework. Es liegt über der
   ganzen Seite (nicht nur über der Sidebar), weil ein Reel im 400-px-Streifen
   nichts taugt. */
/* width:max-content, damit der Rahmen dem Video folgt — ein Hochkant-Reel in
   einer 1100 px breiten schwarzen Fläche sieht aus wie ein Fehler. */
.lb{border:none;border-radius:14px;padding:0;background:#111;color:#e8e8e3;
  max-width:min(1100px,92vw);width:max-content}
.lb::backdrop{background:rgba(0,0,0,.72)}
.lb video{display:block;max-width:min(1100px,92vw);max-height:78vh;background:#000}
.lb-bar{display:flex;align-items:center;gap:12px;padding:9px 12px;font-size:12px}
.lb-name{flex:1;min-width:0;color:#a5a59f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-dl{color:#e8e8e3;font-weight:700;text-decoration:underline}
.lb-bar button{border:1px solid #3a3a35;background:transparent;color:#e8e8e3;border-radius:100px;
  padding:4px 12px;font:inherit;font-size:12px;cursor:pointer}
.lb-bar button:hover{background:#2a2a26}
.lb-err{display:none;padding:0 12px 12px;font-size:12px;color:#f0b8ae;line-height:1.5}

.side-filter{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#77776f;
  margin:0 0 10px;cursor:pointer;user-select:none}
.side-filter input{accent-color:#111;margin:0}
.side-filter .n{background:#f0f0ec;border-radius:100px;padding:1px 6px;font-size:10.5px}

/* PIM-Merkmale */
.side-grp{border-bottom:1px solid #f0f0ec}
.side-grp summary{cursor:pointer;list-style:none;padding:9px 2px;font-weight:700;font-size:12px}
.side-grp summary::-webkit-details-marker{display:none}
.side-grp summary::before{content:"›";display:inline-block;width:13px;color:#a5a59f;
  transition:transform .15s}
.side-grp[open] summary::before{transform:rotate(90deg)}
.side-grp .n{color:#a5a59f;font-weight:500;font-size:11px}
.side-dl{display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);gap:1px 10px;
  padding:0 2px 10px 15px;margin:0}
.side-dl dt{color:#8a8a86;font-size:11.5px;padding:3px 0;overflow-wrap:anywhere}
.side-dl dd{margin:0;font-size:11.5px;font-weight:600;padding:3px 0;overflow-wrap:anywhere}
.side-text{padding:0 2px 12px 15px;font-size:11.5px;line-height:1.6;color:#4a4a4a}

.side-foot{flex:none;display:flex;gap:14px;padding:10px 16px;border-top:1px solid #ececE8;
  background:#fafaf8;font-size:11.5px}
.side-foot a{color:#111;text-decoration:underline}

.side-open{position:fixed;right:0;top:96px;z-index:399;background:#111;color:#fff;border:none;
  border-radius:8px 0 0 8px;padding:10px 12px;font:inherit;font-size:12px;font-weight:700;
  cursor:pointer;font-family:"Plus Jakarta Sans",system-ui,Arial,sans-serif}
body.side-on .side-open{display:none}

@media(max-width:1200px){
  body.side-on{padding-right:0}
  .side{box-shadow:-14px 0 40px rgba(0,0,0,.16)}
}
@media(max-width:520px){
  :root{--side-w:100vw}
}

.api-help{margin-top:30px;border:1px solid #e6e6e4;border-radius:14px;padding:20px 22px;
  background:#fafaf8}
.api-help h3{font-size:14px;font-weight:800;letter-spacing:-.2px;margin-bottom:12px}
.api-help pre{margin:0;overflow-x:auto;background:#111;color:#e8e8e4;border-radius:10px;
  padding:16px 18px;font-size:12.5px;line-height:1.65}
.api-help code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.api-help .muted{color:#8a8a86;font-size:12.5px;margin-top:12px;line-height:1.6}
.api-help .muted code{background:#efefec;border-radius:5px;padding:1px 5px;font-size:12px}
.api-help a{text-decoration:underline}
.pc-note code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#efefec;
  border-radius:5px;padding:1px 5px}