/* =========================================================
   BuildByMi – Blog: Galerie + Beitragsseiten (ergänzt style.css)
   ========================================================= */
.blog-page [hidden],
.post-page [hidden] { display: none !important; }

/* ---------- Brotkrumen ---------- */
.bl-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(22px, 4vh, 36px);
  font-size: .88rem;
  color: var(--muted);
}
.bl-crumbs a { color: var(--ink-2); font-weight: 600; }
.bl-crumbs a:hover { color: var(--brand); }
.bl-crumbs [aria-current] {
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 600;
}

/* =========================================================
   Galerie (blog.html)
   ========================================================= */
.bl-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: calc(var(--nav-h) + var(--header-pad) + clamp(28px, 5vh, 64px)) 0 clamp(36px, 5vw, 64px);
}
.bl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(40% 60% at 90% 10%, rgba(139, 108, 255, .25), rgba(139, 108, 255, 0) 70%);
}
.bl-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: end;
  gap: 24px clamp(32px, 5vw, 80px);
}
.bl-hero__title {
  margin: 0;
  font-size: clamp(3rem, 1rem + 5.4vw, 6.4rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.055em;
}
.bl-hero__quote {
  margin: .3em 0 0;
  font-family: var(--font-script);
  font-size: clamp(1.7rem, 1.1rem + 1.5vw, 2.6rem);
  line-height: 1.4;
  color: var(--brand);
  rotate: -4deg;
  transform-origin: left center;
}
.bl-hero__lead {
  max-width: 30rem;
  margin: 0;
  font-size: clamp(1.05rem, .98rem + .3vw, 1.2rem);
  line-height: 1.65;
  color: var(--ink-2);
}

.bl-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.bl-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
}
.bl-chip span {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: .75rem;
  text-align: center;
}
.bl-chip:hover { border-color: var(--ink); color: var(--ink); }
.bl-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.bl-chip[aria-pressed="true"] span { background: rgba(255, 255, 255, .16); }

.bl-gallery { padding-block: 0 clamp(80px, 10vw, 140px); }
.bl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Beitragskarte */
.bl-card {
  border-radius: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 24px 48px -36px rgba(13, 11, 30, .3);
  overflow: hidden;
  transition: transform .45s var(--ease-out), box-shadow .45s, border-color .3s;
}
.bl-card:hover {
  transform: translateY(-4px);
  border-color: rgba(85, 48, 245, .25);
  box-shadow: 0 34px 64px -36px rgba(85, 48, 245, .5);
}
.bl-card__link { display: flex; flex-direction: column; height: 100%; }
.bl-card__media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #120A36;
}
.bl-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.bl-card:hover .bl-card__media img { transform: scale(1.05); }
.bl-card__cat {
  position: absolute;
  left: 16px;
  top: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--brand-strong);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.bl-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}
.bl-card__meta {
  margin: 0 0 10px;
  font-size: .84rem;
  color: var(--muted);
}
.bl-card__title {
  margin: 0 0 10px;
  font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.bl-card__excerpt {
  margin: 0 0 18px;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.bl-card__more {
  margin-top: auto;
  font-weight: 700;
  font-size: .92rem;
  color: var(--brand);
}
.bl-card__more::after { content: " →"; transition: margin .3s; }
.bl-card:hover .bl-card__more::after { margin-left: 4px; }

/* Großer Beitrag (neuester) */
.bl-card--featured { grid-column: span 2; }
.bl-card--featured .bl-card__link {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}
.bl-card--featured .bl-card__media { aspect-ratio: auto; min-height: 100%; }
.bl-card--featured .bl-card__body { justify-content: center; padding: clamp(24px, 3vw, 40px); }
.bl-card--featured .bl-card__title { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); }
.bl-card__new {
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--grad);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}

/* Platzhalter („Bald verfügbar“) – halten das Raster immer gleich */
.bl-ghost {
  pointer-events: none;
  background: rgba(255, 255, 255, .5);
  border: 1.5px dashed rgba(85, 48, 245, .18);
  box-shadow: none;
  opacity: .75;
}
.bl-ghost:hover { transform: none; box-shadow: none; }
.bl-ghost__media {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #EEEAFB 0%, #E3DCF8 100%);
}
.bl-ghost__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(85, 48, 245, .16) 1px, transparent 1.3px);
  background-size: 18px 18px;
}
.bl-ghost__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 70%);
  transform: translateX(-100%);
  animation: ghost-shimmer 2.8s ease-in-out infinite;
}
.bl-ghost[data-ghost="1"] .bl-ghost__media::after { animation-delay: .3s; }
.bl-ghost[data-ghost="2"] .bl-ghost__media::after { animation-delay: .6s; }
.bl-ghost[data-ghost="3"] .bl-ghost__media::after { animation-delay: .9s; }
.bl-ghost__pill {
  position: relative;
  z-index: 1;
  padding: 6px 13px;
  border-radius: 999px;
  background: #fff;
  font-size: .76rem;
  font-weight: 700;
  color: var(--brand-strong);
  box-shadow: 0 8px 18px -10px rgba(85, 48, 245, .5);
}
.bl-ghost__line {
  display: block;
  height: 10px;
  margin-bottom: 11px;
  border-radius: 6px;
  background: #ECE9F4;
}
.bl-ghost__line--title { height: 16px; background: #E4E0F0; }
.bl-ghost__line:last-child { margin-bottom: 0; }

@keyframes ghost-shimmer {
  0%   { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* Kleine Kacheln */
.bl-tile a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  height: 100%;
  min-height: 220px;
  padding: 24px;
  border-radius: 28px;
  transition: transform .45s var(--ease-out);
}
.bl-tile a:hover { transform: translateY(-4px); }
.bl-tile h2 { margin: 0 0 6px; font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; }
.bl-tile p { margin: 0; font-size: .93rem; line-height: 1.55; }
.bl-tile__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
}
.bl-tile__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bl-tile__go { font-weight: 700; font-size: .9rem; }

.bl-tile--soon a {
  border: 1.5px dashed rgba(85, 48, 245, .35);
  background: rgba(255, 255, 255, .6);
  color: var(--ink);
}
.bl-tile--soon p { color: var(--ink-2); }
.bl-tile--soon .bl-tile__icon { background: var(--brand-tint); color: var(--brand); }
.bl-tile--soon .bl-tile__go { color: var(--brand); }

.bl-tile--yt a {
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(255, 90, 95, .25), rgba(255, 90, 95, 0) 65%),
    #0B0A17;
  color: #fff;
}
.bl-tile--yt p { color: rgba(255, 255, 255, .72); }
.bl-tile--yt .bl-tile__icon { background: #FF3B30; }
.bl-tile--yt .bl-tile__icon svg { fill: currentColor; stroke: none; margin-left: 3px; }

.bl-tile--ws a {
  background: linear-gradient(150deg, #7556FF 0%, #5530F5 55%, #3A10EE 100%);
  color: #fff;
  box-shadow: 0 24px 48px -28px rgba(85, 48, 245, .8);
}
.bl-tile--ws p { color: rgba(255, 255, 255, .86); }
.bl-tile--ws .bl-tile__icon { background: #fff; color: var(--brand); }

.bl-empty {
  margin: 18px 0 0;
  padding: 24px;
  border-radius: 22px;
  border: 1px dashed rgba(85, 48, 245, .3);
  text-align: center;
  color: var(--ink-2);
}

/* =========================================================
   Beitragsseite (blog/*.html)
   ========================================================= */
.read-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 70;
  height: 3px;
  pointer-events: none;
}
.read-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--grad);
  transform: scaleX(var(--read, 0));
  transform-origin: 0 50%;
}

.art-hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--nav-h) + var(--header-pad) + clamp(28px, 5vh, 56px));
}
.art-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 30% 0;
  z-index: -1;
  background: radial-gradient(45% 70% at 85% 0%, rgba(139, 108, 255, .22), rgba(139, 108, 255, 0) 70%);
}
.art-hero__inner { max-width: calc(860px + 2 * var(--gutter)); }

.art-cat {
  display: inline-flex;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--brand-tint);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--brand-strong);
  transition: background-color .25s;
}
.art-cat:hover { background: #DCD4FF; }
.art-title {
  margin: 16px 0 0;
  font-size: clamp(2.1rem, 1rem + 3.4vw, 3.8rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.art-excerpt {
  max-width: 44rem;
  margin: 18px 0 0;
  font-size: clamp(1.08rem, 1rem + .35vw, 1.28rem);
  line-height: 1.6;
  color: var(--ink-2);
}
.art-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}
.art-meta img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  box-shadow: 0 0 0 3px #fff, 0 6px 14px -6px rgba(13, 11, 30, .4);
}
.art-meta strong { display: block; font-size: .98rem; }
.art-meta span { font-size: .88rem; color: var(--muted); }

.art-cover-wrap { margin-top: clamp(32px, 5vw, 56px); max-width: calc(1120px + 2 * var(--gutter)); }
.art-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: clamp(22px, 3vw, 36px);
  box-shadow: 0 50px 100px -50px rgba(20, 6, 90, .7);
}

.art-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 720px);
  justify-content: center;
  gap: clamp(32px, 5vw, 72px);
  margin-top: clamp(40px, 6vw, 72px);
  max-width: calc(1120px + 2 * var(--gutter));
}
.art-aside {
  position: sticky;
  top: calc(var(--nav-h) + var(--header-pad) + 32px);
  align-self: start;
  /* lange Inhaltsverzeichnisse: Seitenleiste scrollt selbst, statt unten abgeschnitten zu werden */
  max-height: calc(100vh - var(--nav-h) - var(--header-pad) - 56px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  padding: 4px 6px 6px 2px;
  margin: -4px -6px -6px -2px;
}
.art-aside__label {
  margin: 0 0 10px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.art-toc ol {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--line);
}
.art-toc a {
  display: block;
  margin-left: -2px;
  padding: 7px 0 7px 14px;
  border-left: 2px solid transparent;
  font-size: .9rem;
  line-height: 1.4;
  color: var(--ink-2);
  transition: color .2s, border-color .2s;
}
.art-toc a:hover { color: var(--ink); }
.art-toc a.is-active { border-left-color: var(--brand); color: var(--brand); font-weight: 600; }

.art-share { margin-top: 28px; }
.art-share__row { display: flex; gap: 8px; }
.art-share a,
.art-share button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .25s, color .25s;
}
.art-share a:hover,
.art-share button:hover { border-color: var(--brand); color: var(--brand); }
.art-share svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.art-share__hint { margin: 8px 0 0; font-size: .8rem; color: var(--brand); min-height: 1.2em; }

/* ---------- Lesetext ---------- */
.prose {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--ink-2);
}
.prose > * + * { margin-top: 1.1em; }
.prose p { margin: 0; }
.prose .art-lead {
  font-size: 1.28rem;
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink);
}
.prose h2 {
  margin: 2.2em 0 0;
  font-size: clamp(1.45rem, 1.2rem + .8vw, 1.85rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.03em;
  color: var(--ink);
  scroll-margin-top: calc(var(--nav-h) + var(--header-pad) + 24px);
}
.prose h2 + * { margin-top: .7em; }
.prose strong { color: var(--ink); }
.prose a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.prose ul,
.prose ol {
  display: grid;
  gap: .55em;
  padding: 0;
  list-style: none;
}
.prose ul li,
.prose ol li { position: relative; padding-left: 34px; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: .55em;
  width: 11px;
  height: 7px;
  border-left: 2.5px solid var(--brand);
  border-bottom: 2.5px solid var(--brand);
  rotate: -45deg;
}
.prose ol { counter-reset: step; }
.prose ol li { counter-increment: step; }
.prose ol li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: .15em;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--grad);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}

.prose blockquote {
  margin: 1.4em 0 0;
  padding: 20px 24px;
  border-radius: 0 20px 20px 0;
  border-left: 4px solid var(--brand);
  background: var(--surface);
  box-shadow: 0 20px 40px -32px rgba(13, 11, 30, .35);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ink);
}

.prose code {
  padding: 2px 7px;
  border-radius: 7px;
  background: var(--brand-tint);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .88em;
  color: var(--brand-strong);
}
.prose pre {
  margin: 1.4em 0 0;
  padding: 22px 24px;
  border-radius: 20px;
  background: #120A36;
  overflow-x: auto;
  box-shadow: 0 30px 60px -36px rgba(20, 6, 90, .7);
}
.prose pre code {
  padding: 0;
  background: none;
  font-size: .92rem;
  line-height: 1.7;
  color: #E2DAFF;
  white-space: pre;
}

.art-callout {
  padding: 22px 26px;
  border-radius: 20px;
  background: var(--grad);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.55;
  color: #fff;
  box-shadow: 0 20px 40px -24px rgba(85, 48, 245, .8);
}
.prose .art-callout strong { color: #fff; }

.prose .art-source {
  margin-top: 2.4em;
  padding-top: 18px;
  border-top: 1px solid rgba(13, 11, 30, .1);
  font-size: .9rem;
  line-height: 1.6;
  color: rgba(13, 11, 30, .58);
}
.prose .art-source a { font-weight: 500; }

/* ---------- Autor ---------- */
.art-foot {
  max-width: calc(1120px + 2 * var(--gutter));
  margin-top: clamp(48px, 7vw, 88px);
}
.art-author {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  max-width: 1012px;
  margin-left: auto;
  padding: 26px;
  border-radius: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 24px 48px -36px rgba(13, 11, 30, .3);
}
.art-author img {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  object-fit: cover;
  object-position: 50% 20%;
}
.art-author__label {
  margin: 0;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.art-author h2 { margin: 4px 0 6px; font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.art-author p { margin: 0; font-size: .96rem; line-height: 1.6; color: var(--ink-2); }
.art-author__links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.art-author__links a { font-weight: 600; font-size: .92rem; color: var(--brand); }
.art-author__links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Weitere Beiträge + CTA ---------- */
.art-more { padding-block: clamp(64px, 9vw, 120px) clamp(40px, 6vw, 72px); }
.art-more__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.art-more__all { font-weight: 700; color: var(--brand); }
.art-more__all:hover { text-decoration: underline; text-underline-offset: 3px; }
.art-more .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.art-cta { padding: 0 clamp(8px, 1.4vw, 20px) clamp(24px, 4vw, 56px); }
.art-cta__panel {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 6vw, 80px);
  border-radius: clamp(28px, 4vw, 48px);
  color: #fff;
  background:
    radial-gradient(55% 80% at 85% 30%, rgba(196, 180, 255, .45), rgba(196, 180, 255, 0) 70%),
    linear-gradient(135deg, #7556FF 0%, #5530F5 45%, #3A10EE 100%);
}
.art-cta__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
}
.art-cta h2 {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(2rem, 1rem + 2.8vw, 3.2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.045em;
}
.art-cta p { margin: 12px 0 0; max-width: 30rem; line-height: 1.6; color: rgba(255, 255, 255, .85); }
.art-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .art-layout { grid-template-columns: minmax(0, 720px); }
  .art-aside { position: static; order: 2; max-height: none; overflow: visible; padding: 0; margin: 0; }
  .art-toc { display: none; }
  .art-share { margin-top: 32px; }
}

@media (max-width: 960px) {
  .bl-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-card--featured { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .bl-grid,
  .art-more .bl-grid { grid-template-columns: minmax(0, 1fr); }
  .bl-card--featured .bl-card__link { grid-template-columns: minmax(0, 1fr); }
  .bl-card--featured .bl-card__media { aspect-ratio: 16 / 10; }
  .bl-tile a { min-height: 0; }
  /* auf dem Handy reicht ein Platzhalter als Hinweis */
  .bl-ghost:not([data-ghost="0"]) { display: none; }
  .prose { font-size: 1.04rem; }
  .prose .art-lead { font-size: 1.15rem; }
  .art-author { grid-template-columns: minmax(0, 1fr); }
  .art-cta__actions .btn { width: 100%; justify-content: space-between; }
  .art-cta__actions .btn--glass { justify-content: center; }
}