/* /assets/css/site.css */
:root{
--bg0: #dfe3ec;            /* vorher #f6f7fb */
  --bg1: #ffffff;

--glass: rgba(255,255,255,.9);     /* deutlich klarer */
  --glass-strong: rgba(255,255,255,.92);

  --stroke: rgba(20, 25, 35, .12);      /* etwas kräftiger */
--shadow: 0 30px 100px rgba(20,25,35,.22); /* stärkerer Tiefeneffekt */

  --radius: 18px;
}

html, body { height: 100%; }
body{
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(100, 140, 255, .18), transparent 60%),
    radial-gradient(800px 520px at 85% 15%, rgba(180, 120, 220, .15), transparent 55%),
    radial-gradient(900px 520px at 50% 95%, rgba(120, 200, 180, .12), transparent 55%),
    var(--bg0);

  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;

  color: #111827;
}

.page { min-height: 70vh; }

.site-header .navbar-glass{
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--stroke);
}

.brand-mark{
  width: 12px; height: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(79,70,229,1), rgba(236,72,153,1));
  box-shadow: 0 6px 18px rgba(79,70,229,.25);
}

.card-glass{
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.btn-glass{
  background: var(--glass-strong);
  border: 1px solid var(--stroke);
  border-radius: 999px;
}

.btn-cta{
  border-radius: 999px;
  padding-inline: 1.1rem;
}

.badge-soft{
  border: 1px solid var(--stroke);
}

.hero-wrap{
  padding-top: .5rem;
}

.hero-card .hero-media img,
.teaser-card .teaser-media img,
.timeline-thumb img,
.mini-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* fixes „springen“ durch konstante Ratios */
  display: block;
}

.hero-teaser{
  font-size: 1.02rem;
  line-height: 1.6;
}

.teaser-text{
  color: rgba(17,24,39,.82);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.chip{
  font-size: .75rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.45);
  color: rgba(17,24,39,.75);
}

.link-more{
  text-decoration: none;
  color: rgba(17,24,39,.75);
}
.link-more:hover{ color: rgba(17,24,39,1); }

.mini-row{
  display: flex;
  gap: .85rem;
  padding: .75rem;
  border-radius: 14px;
  border: 1px solid rgba(20,25,35,.06);
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,.35);
  transition: transform .12s ease, background .12s ease;
}
.mini-row:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.55);
}
.mini-thumb{
  width: 56px;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 auto;
}
.mini-meta{
  display:flex; gap:.45rem; align-items:center;
  font-size: .78rem;
  color: rgba(17,24,39,.6);
}
.mini-title{ font-weight: 600; margin-top: .15rem; }
.mini-sub{
  font-size: .88rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mini-icon{
  opacity: .6;
  margin-top: .2rem;
}

.dot{ opacity: .5; }

.search-glass .input-group{
  background: rgba(255,255,255,.45);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  overflow: hidden;
}
.search-glass .form-control:focus{
  box-shadow: none;
}

.timeline-row{
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(20,25,35,.06);
}
.timeline-row:first-child{ border-top: 0; }
.timeline-thumb{
  width: 52px;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 auto;
}

.site-footer{
  border-top: 1px solid var(--stroke);
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.link-muted{
  color: rgba(17,24,39,.62);
  text-decoration: none;
}
.link-muted:hover{ color: rgba(17,24,39,1); }


.article-content{
  font-size: 1.02rem;
  line-height: 1.75;
}

.article-content p { margin-bottom: 1rem; }
.article-content h2, .article-content h3{
  margin-top: 2rem;
  margin-bottom: .75rem;
  font-weight: 650;
}

.article-content img{
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(20,25,35,.08);
  box-shadow: 0 18px 60px rgba(20,25,35,.10);
}

.article-content blockquote{
  padding: 1rem 1.25rem;
  border-left: 4px solid rgba(79,70,229,.5);
  background: rgba(255,255,255,.35);
  border-radius: 16px;
}
.article-content code{
  padding: .15rem .35rem;
  border-radius: 10px;
  background: rgba(17,24,39,.06);
}
.article-content pre{
  padding: 1rem;
  border-radius: 16px;
  background: rgba(17,24,39,.06);
  overflow: auto;
}


.pagination-glass .page-link{
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(20,25,35,.08);
  color: rgba(17,24,39,.75);
}
.pagination-glass .page-item.active .page-link{
  background: rgba(255,255,255,.75);
  border-color: rgba(20,25,35,.12);
  color: rgba(17,24,39,1);
}
.pagination-glass .page-item.disabled .page-link{
  opacity: .55;
}

li, p, .article-teaser{font-size: 18px; line-height: 24px;}


.img-desc{
  font-size: .9rem;
  line-height: 1.6;
  color: rgba(17,24,39,.65);

  margin-top: .75rem;
  padding: .65rem .9rem;

  background: rgba(255,255,255,.35);
  border: 1px solid rgba(20,25,35,.08);
  border-radius: 14px;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Responsive polish */
@media (max-width: 575.98px){
  :root{ --radius: 16px; }
}






/* Wichtig für Bootstrap stretched-link */
.hero-card,
.teaser-card,
.timeline-row,
.mini-row {
  position: relative;
}