/* hanseat-blocks — blocks.css
   ALLE Regeln sind unter `.hb-block-frontend` namensgeschützt.
   Damit ist es ausgeschlossen, dass diese CSS-Datei jemals andere Theme-Klassen
   überschreibt — auch wenn das Plugin auf einer Theme-eigenen Werkstatt-Seite
   geladen wird, bleibt das Theme-Layout vollständig erhalten.
   ─────────────────────────────────────────────────────────────────────── */

.hb-block-frontend {
  /* Reset für Block-Wrapper, vermeidet Erbung weicher Werte */
  margin: 32px 0 56px;
  font-family: var(--font-display, Georgia, 'Times New Roman', serif);
  color: var(--ink, #1a1612);
  line-height: 1.55;
}

/* ── Section-Label ────────────────────────────────────── */
.hb-block-frontend .hb-section-label {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted, #6b6354);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hb-block-frontend .hb-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--paper-edge, rgba(30,58,95,.14));
}

/* ── Sprite-System (gescoped, damit kein Theme-Konflikt) ─ */
.hb-block-frontend .be {
  --s: 24px;
  display: inline-block;
  width: var(--s); height: var(--s);
  background-size: calc(var(--s) * 12) var(--s);
  background-repeat: no-repeat;
  background-position-y: 0;
  flex-shrink: 0;
}
.hb-block-frontend .be-pfeil-links  { background-position-x: 0; }
.hb-block-frontend .be-pfeil-rechts { background-position-x: calc(-1  * var(--s)); }
.hb-block-frontend .be-play         { background-position-x: calc(-4  * var(--s)); }
.hb-block-frontend .be-stop         { background-position-x: calc(-5  * var(--s)); }
.hb-block-frontend .be-pause        { background-position-x: calc(-6  * var(--s)); }
.hb-block-frontend .be-ton-an       { background-position-x: calc(-7  * var(--s)); }
.hb-block-frontend .be-ton-aus      { background-position-x: calc(-8  * var(--s)); }
.hb-block-frontend .be-wiederholen  { background-position-x: calc(-9  * var(--s)); }
.hb-block-frontend .be-vollbild     { background-position-x: calc(-11 * var(--s)); }

.hb-block-frontend .ctrl-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter 150ms ease;
}
.hb-block-frontend .ctrl-btn:hover { filter: brightness(1.3); }

/* ══════════════════════════════════════
   GALERIE — Masonry-Grid
══════════════════════════════════════ */
.hb-block-frontend.hb-galerie { /* outer wrapper IS the galerie */ }

.hb-block-frontend .hb-galerie-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}

.hb-block-frontend .hb-galerie-item {
  margin: 0;
  border-radius: var(--radius, 6px);
  overflow: hidden;
  background: var(--paper-deep, #e8e0d0);
  position: relative;
  aspect-ratio: 4 / 3;
}

.hb-block-frontend .hb-galerie-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 350ms ease;
}
.hb-block-frontend .hb-galerie-item:hover img { transform: scale(1.04); }

.hb-block-frontend .hb-galerie-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 12px 14px 10px;
  background: linear-gradient(transparent, rgba(26,22,18,.65));
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(241,235,224,.9);
  opacity: 0;
  transition: opacity 200ms ease;
  margin: 0;
}
.hb-block-frontend .hb-galerie-item:hover .hb-galerie-caption { opacity: 1; }

/* Masonry-Layout abhängig von Anzahl */
.hb-block-frontend .hb-galerie-grid[data-count="1"] .hb-galerie-item { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

.hb-block-frontend .hb-galerie-grid[data-count="2"] .hb-galerie-item:nth-child(1) { grid-column: 1 / 7; }
.hb-block-frontend .hb-galerie-grid[data-count="2"] .hb-galerie-item:nth-child(2) { grid-column: 7 / 13; }

.hb-block-frontend .hb-galerie-grid[data-count="3"] .hb-galerie-item:nth-child(1) { grid-column: 1 / 8;  grid-row: 1 / 3; aspect-ratio: 16 / 18; }
.hb-block-frontend .hb-galerie-grid[data-count="3"] .hb-galerie-item:nth-child(2) { grid-column: 8 / 13; grid-row: 1; aspect-ratio: 5 / 4; }
.hb-block-frontend .hb-galerie-grid[data-count="3"] .hb-galerie-item:nth-child(3) { grid-column: 8 / 13; grid-row: 2; aspect-ratio: 5 / 4; }

.hb-block-frontend .hb-galerie-grid[data-count="4"] .hb-galerie-item:nth-child(1) { grid-column: 1 / 8;  grid-row: 1; aspect-ratio: 16 / 10; }
.hb-block-frontend .hb-galerie-grid[data-count="4"] .hb-galerie-item:nth-child(2) { grid-column: 8 / 13; grid-row: 1; }
.hb-block-frontend .hb-galerie-grid[data-count="4"] .hb-galerie-item:nth-child(3) { grid-column: 1 / 7;  grid-row: 2; }
.hb-block-frontend .hb-galerie-grid[data-count="4"] .hb-galerie-item:nth-child(4) { grid-column: 7 / 13; grid-row: 2; }

.hb-block-frontend .hb-galerie-grid[data-count="5"] .hb-galerie-item:nth-child(1) { grid-column: 1 / 8;  grid-row: 1; }
.hb-block-frontend .hb-galerie-grid[data-count="5"] .hb-galerie-item:nth-child(2) { grid-column: 8 / 13; grid-row: 1; }
.hb-block-frontend .hb-galerie-grid[data-count="5"] .hb-galerie-item:nth-child(3) { grid-column: 1 / 5;  grid-row: 2; }
.hb-block-frontend .hb-galerie-grid[data-count="5"] .hb-galerie-item:nth-child(4) { grid-column: 5 / 9;  grid-row: 2; }
.hb-block-frontend .hb-galerie-grid[data-count="5"] .hb-galerie-item:nth-child(5) { grid-column: 9 / 13; grid-row: 2; }

/* 6+ : einfaches 3-Spalten-Raster */
.hb-block-frontend .hb-galerie-grid[data-count="6"]  .hb-galerie-item,
.hb-block-frontend .hb-galerie-grid[data-count="7"]  .hb-galerie-item,
.hb-block-frontend .hb-galerie-grid[data-count="8"]  .hb-galerie-item,
.hb-block-frontend .hb-galerie-grid[data-count="9"]  .hb-galerie-item,
.hb-block-frontend .hb-galerie-grid[data-count="10"] .hb-galerie-item,
.hb-block-frontend .hb-galerie-grid[data-count="11"] .hb-galerie-item,
.hb-block-frontend .hb-galerie-grid[data-count="12"] .hb-galerie-item {
  grid-column: span 4;
}

/* ══════════════════════════════════════
   VIDEO-GRID
══════════════════════════════════════ */
.hb-block-frontend .hb-video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.hb-block-frontend .hb-video-card {
  border-radius: var(--radius, 6px);
  overflow: hidden;
  background: var(--ink, #1a1612);
  position: relative;
}
.hb-block-frontend .hb-video-wrap { position: relative; }
.hb-block-frontend .hb-video-card video {
  width: 100%;
  height: auto;
  display: none;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.hb-block-frontend .hb-video-item.is-playing video         { display: block; }
.hb-block-frontend .hb-video-item.is-playing .hb-video-placeholder { display: none; }
.hb-block-frontend .hb-video-item.is-muted .be-ton-an  { opacity: .35; }

.hb-block-frontend .hb-video-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1a1612 0%, #1f3c63 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: rgba(241,235,224,.6);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.hb-block-frontend .hb-video-ctrl-bar {
  background: var(--paper-warm, #f5efe4);
  border: 1px solid var(--paper-edge, rgba(30,58,95,.14));
  border-top: none; border-bottom: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
}
.hb-block-frontend .hb-ctrl-track {
  flex: 1;
  height: 3px;
  background: var(--paper-edge, rgba(30,58,95,.14));
  border-radius: 99px;
  overflow: hidden;
  margin: 0 6px;
  cursor: pointer;
}
.hb-block-frontend .hb-ctrl-fill { height: 100%; background: var(--seal, #c8362d); border-radius: 99px; }
.hb-block-frontend .hb-ctrl-time {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--muted, #6b6354);
  white-space: nowrap;
  margin: 0 4px;
}
.hb-block-frontend .hb-video-meta {
  padding: 14px 16px 16px;
  background: var(--paper-warm, #f5efe4);
  border: 1px solid var(--paper-edge, rgba(30,58,95,.14));
  border-top: none;
  border-radius: 0 0 var(--radius, 6px) var(--radius, 6px);
}
.hb-block-frontend .hb-video-title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 15px; font-weight: 600;
  color: var(--ink, #1a1612); margin-bottom: 4px;
}
.hb-block-frontend .hb-video-dur {
  font-family: var(--font-mono, monospace);
  font-size: 10px; letter-spacing: .08em; color: var(--muted, #6b6354);
}

/* ══════════════════════════════════════
   AUDIO-LISTE
══════════════════════════════════════ */
.hb-block-frontend .hb-audio-list { display: flex; flex-direction: column; gap: 12px; }
.hb-block-frontend .hb-audio-player {
  background: var(--paper-warm, #f5efe4);
  border: 1px solid var(--paper-edge, rgba(30,58,95,.14));
  border-radius: var(--radius, 6px);
  padding: 16px 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
}
.hb-block-frontend .hb-audio-info { min-width: 0; grid-column: 2; }
.hb-block-frontend .hb-audio-title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 15px; font-weight: 600; color: var(--ink, #1a1612);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hb-block-frontend .hb-audio-sub {
  font-family: var(--font-mono, monospace);
  font-size: 10px; letter-spacing: .06em; color: var(--muted, #6b6354); margin-top: 3px;
}
.hb-block-frontend .hb-audio-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hb-block-frontend .hb-audio-ctrl-row { display: flex; align-items: center; gap: 2px; }
.hb-block-frontend .hb-audio-time { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--muted, #6b6354); }
.hb-block-frontend .hb-audio-bar {
  width: 160px; height: 3px;
  background: var(--paper-edge, rgba(30,58,95,.14));
  border-radius: 99px; overflow: hidden; cursor: pointer;
}
.hb-block-frontend .hb-audio-bar-fill { height: 100%; background: var(--seal, #c8362d); border-radius: 99px; }
.hb-block-frontend .hb-audio-native { display: none; }

/* ══════════════════════════════════════
   DOKUMENTE
══════════════════════════════════════ */
.hb-block-frontend .hb-dok-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hb-block-frontend .hb-dok-card {
  background: var(--paper-warm, #f5efe4);
  border: 1px solid var(--paper-edge, rgba(30,58,95,.14));
  border-radius: var(--radius, 6px);
  padding: 18px 20px;
  display: flex; gap: 14px; align-items: flex-start;
  text-decoration: none; color: inherit;
  transition: border-color 150ms, box-shadow 150ms;
}
.hb-block-frontend .hb-dok-card:hover {
  border-color: var(--ink, #1e3a5f);
  box-shadow: 0 2px 12px rgba(30,58,95,.08);
}
.hb-block-frontend .hb-dok-icon {
  width: 36px; height: 36px;
  background: var(--paper-deep, #e8e0d0);
  border-radius: 6px;
  display: grid; place-items: center; flex-shrink: 0;
  font-family: var(--font-mono, monospace);
  font-size: 8px; font-weight: 600;
  letter-spacing: .06em; color: var(--muted, #6b6354);
}
.hb-block-frontend .hb-dok-name { font-family: var(--font-display, Georgia, serif); font-size: 14px; font-weight: 600; color: var(--ink, #1a1612); line-height: 1.3; }
.hb-block-frontend .hb-dok-size { font-family: var(--font-mono, monospace); font-size: 10px; color: var(--muted, #6b6354); margin-top: 3px; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 860px) {
  .hb-block-frontend .hb-video-grid { grid-template-columns: 1fr; }
  .hb-block-frontend .hb-dok-grid   { grid-template-columns: 1fr 1fr; }
  .hb-block-frontend .hb-galerie-grid { grid-template-columns: repeat(6, 1fr); }
  .hb-block-frontend .hb-galerie-grid .hb-galerie-item {
    grid-column: span 3 !important;
    grid-row: auto !important;
    aspect-ratio: 4 / 3 !important;
  }
}
@media (max-width: 600px) {
  .hb-block-frontend .hb-dok-grid   { grid-template-columns: 1fr; }
  .hb-block-frontend .hb-audio-player { grid-template-columns: auto 1fr; }
  .hb-block-frontend .hb-audio-controls { display: none; }
  .hb-block-frontend .hb-galerie-grid { grid-template-columns: 1fr; }
  .hb-block-frontend .hb-galerie-grid .hb-galerie-item {
    grid-column: 1 !important;
    aspect-ratio: 16 / 10 !important;
  }
}