/* Schriftarten */
body, .navbar, .card { font-family: 'Inter', sans-serif; }
.metal-font { font-family: 'Metal Mania', cursive; }

/* Hero‑Bild */
.hero-bg {
  background: url('../img/dominik-background.avif?v=20250621-3')
              center/cover fixed;
  border-bottom: 3px solid #dc3545;
}

/* Sektionstitel + Unterlinie */
.section-title {
  font-family: 'Metal Mania', cursive;
  position: relative;
  padding-bottom: .35rem;
}
.section-title::after {
  content: '';
  width: 60px;
  height: 3px;
  background: #dc3545;
  position: absolute;
  bottom: 0;
}
/* links‑bündig */
.section-title:not(.text-center)::after { left: 0 }
/* zentriert */
.text-center .section-title::after,
.section-title.text-center::after {
  left: 50%;
  transform: translateX(-50%);
}

/* Kartenhover & Kontrast */
.card {
  transition: transform .2s, box-shadow .2s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.5);
}

/* Verbesserung Lesbarkeit – etwas hellerer Text im dunklen Cardbody */
.card.bg-dark .card-text,
.card.bg-dark .card-title { color: #f2f2f2; }

/* --- Vertical Timeline --- */
.timeline{
  position:relative;
  margin:0 0 2rem 1.25rem;   /* space for line & bottom gap */
}
.timeline::before{
  content:"";
  position:absolute;
  top:0; left:1px; bottom:0;
  width:2px;
  background:#dc3545;        /* brand red */
}
.timeline-item{
  position:relative;
  padding-left:2rem;         /* distance from line */
  margin-bottom:1.25rem;
}
.timeline-item:last-child{margin-bottom:0;}
.timeline-dot{
  position:absolute;
  left:-3.5px;               /* centers dot on line */
  top:.35rem;
  width:.75rem; height:.75rem;
  border-radius:50%;
  background:#dc3545;
}
.timeline-date{
  font-size:.85rem;
  font-weight:600;
  color:#dc3545;
}
/* Small‑screens: tighter spacing */
@media (max-width:576px){
  .timeline{margin-left:.5rem;}
  .timeline-item{padding-left:1.75rem;}
  .timeline-item div {
    overflow-wrap: break-word;
  }
}

/* -------------------------------------
   HERO‑BILD: iOS‑Fix für background‑attachment
------------------------------------- */
@media (max-width: 991.98px) {         /* < lg */
  .hero-bg {
    background-attachment: scroll;     /* statt fixed */
  }
}

/* -------------------------------------
   BADGES: bei sehr kleinem Viewport umbrechen lassen
------------------------------------- */
@media (max-width: 575.98px) {         /* < sm */
  #skills .badge {
    white-space: normal;               /* Zeilenumbruch erlauben */
    word-break: break-word;
    padding-left: .75rem;
    padding-right: .75rem;
  }
}