/* =================================================================
   PORTAL · Seitenspezifisches Layout des öffentlichen Portals.
   1:1 aus den <style>-Blöcken der Design-Vorlage (index/suche/katalog/
   kategorie/produkt/zustaende) zusammengeführt. Nutzt ausschließlich die
   Tokens aus tokens.css – keine fest verdrahteten Farben.
   ================================================================= */

/* ---------- Startseite (index) ---------- */
.hero { padding-block: clamp(var(--s-9), 8vw, var(--s-11)) var(--s-9); }
.hero__head { text-align: center; max-width: 760px; margin-inline: auto; }
.hero h1 {
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  margin-bottom: var(--s-4);
}
.hero__lede { margin-inline: auto; max-width: 560px; margin-bottom: var(--s-7); }
.hero__search { max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.hero__tags { margin-top: var(--s-5); }

.scan-hint {
  display: none; align-items: center; gap: var(--s-3);
  margin: var(--s-6) auto 0; padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--t-sm); color: var(--c-ink-3);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
@media (max-width: 640px) { .scan-hint { display: inline-flex; } }
.scan-hint strong { color: var(--c-ink); font-weight: var(--fw-semi); }
.scan-hint__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-surface-2); color: var(--c-ink-2); }
.scan-hint__arrow { color: var(--c-ink-4); transition: transform var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.scan-hint:hover { background: var(--c-surface-2); color: var(--c-ink-2); }
.scan-hint:hover .scan-hint__arrow { color: var(--accent); transform: translateX(3px); }

.rubrics { padding-block: var(--s-8); }
.rubric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4);
}
.section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.section-head h2 { font-size: var(--t-h2); }

/* ---------- Trefferliste (suche) ---------- */
.search-head { padding-block: var(--s-7) var(--s-5); }
.search-head h1 { font-size: var(--t-h2); }
.result-count { color: var(--c-ink-3); font-size: var(--t-body); margin-top: var(--s-2); }
.toolbar-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-2); }

/* ---------- Kategorieübersicht (katalog) ---------- */
.cat-head { padding-block: var(--s-8) var(--s-6); max-width: 640px; }
.cat-head h1 { font-size: var(--t-h1); margin-bottom: var(--s-3); }
.rubric-grid--catalog { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); padding-bottom: var(--s-9); }

/* ---------- Breadcrumbs ---------- */
.crumbs { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--c-ink-3); padding-block: var(--s-5) 0; flex-wrap: wrap; }
.crumbs a:hover { color: var(--c-ink); }
.crumbs svg { color: var(--c-ink-4); }

/* ---------- Produkt-Detail (produkt) ---------- */
.product-head { padding-block: var(--s-6) var(--s-7); }
.product-head__grid { display: grid; grid-template-columns: 320px 1fr; gap: var(--s-8); align-items: start; }
.product-shot { aspect-ratio: 1; }
.product-head h1 { font-size: var(--t-h1); line-height: var(--lh-snug); margin-bottom: var(--s-3); }

.id-strip { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: var(--s-6); border-block: var(--bd-hair); }
.id-item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); min-width: 0; }
.id-item:nth-child(odd) { padding-left: 0; }
.id-item:nth-child(even) { border-left: var(--bd-hair); }
.id-item:nth-child(n+3) { border-top: var(--bd-hair); }
.id-item__icon { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--c-surface-2); color: var(--c-ink-3); }
.id-item > div { min-width: 0; }
.id-item dt { font-size: var(--t-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-ink-3); margin-bottom: 3px; }
.id-item dd { margin: 0; font-size: var(--t-sm); font-weight: var(--fw-medium); color: var(--c-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 460px) {
  .id-strip { grid-template-columns: 1fr; }
  .id-item { border-left: 0 !important; padding-left: 0; }
  .id-item:not(:first-child) { border-top: var(--bd-hair); }
}
.product-stand { margin-top: var(--s-5); font-size: var(--t-sm); color: var(--c-ink-3); }
.share-btn { color: var(--c-ink-3); }
.share-btn:hover { color: var(--accent); }

.layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--s-8); align-items: start; padding-bottom: var(--s-9); }
.block + .block { margin-top: var(--s-8); }
.block--dpp { margin-top: var(--s-8); padding-top: var(--s-7); border-top: var(--bd-hair); }
.block--dpp .block__head { margin-bottom: var(--s-4); }
.block__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.block__head h2 { font-size: var(--t-h3); }

.rail { position: sticky; top: calc(var(--header-h) + var(--s-5)); display: flex; flex-direction: column; gap: var(--s-4); }
.rail-card { padding: var(--s-5); }
.rail-card h3 { font-size: var(--t-h4); margin-bottom: var(--s-4); }

.avail { margin-top: var(--s-5); padding-top: var(--s-5); border-top: var(--bd-hair); }
.avail__title { font-size: var(--t-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-ink-4); margin-bottom: var(--s-3); }
.avail__list { display: grid; grid-template-columns: minmax(160px, max-content) 1fr; gap: var(--s-2) var(--s-5); }
.avail__list dt { font-size: var(--t-sm); color: var(--c-ink-2); font-weight: var(--fw-medium); }
.avail__list dd { margin: 0; font-size: var(--t-sm); }
.avail__has { color: var(--c-ink); }
.avail__none { color: var(--c-ink-4); }
@media (max-width: 560px) { .avail__list { grid-template-columns: 1fr; gap: var(--s-1) 0; } .avail__list dd { margin-bottom: var(--s-3); } }

@media (max-width: 920px) {
  .layout { grid-template-columns: 1fr; }
  .product-head__grid { grid-template-columns: 140px 1fr; gap: var(--s-5); }
  .rail { position: static; }
}
@media (max-width: 560px) {
  .product-head__grid { grid-template-columns: 1fr; }
  .product-shot { max-width: 160px; }
}

/* ---------- Zustände (zustaende) ---------- */
.state-page { padding-block: var(--s-7) var(--s-9); }
.state-block { margin-top: var(--s-7); }
.state-label { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.state-label .eyebrow { color: var(--c-ink-3); }
.state-frame { border: var(--bd-hair); border-radius: var(--r-lg); overflow: hidden; background: var(--c-surface); }
@keyframes sk-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.sk { background: linear-gradient(90deg, var(--c-surface-2) 25%, var(--c-surface-3) 37%, var(--c-surface-2) 63%); background-size: 200% 100%; animation: sk-shimmer 1.4s ease infinite; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
.sk-row { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-5); border-bottom: var(--bd-hair); }
.sk-row:last-child { border-bottom: 0; }
.sk-thumb { width: 72px; height: 72px; border-radius: var(--r-md); flex-shrink: 0; }
.sk-line { height: 13px; }