/* ####################### Style  Start  #################### */   

 .inhalt{
      max-width: 750px;
      height: auto;
      margin: auto;  
      padding: 10px;
    }  
   
 .hero-content {
      position: relative;
      z-index: 5;
      max-width: 700px;
      animation: fadeUp 1.2s ease both;
    } 
  .hero h1 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.1rem, 6vw, 4.5rem);
      font-weight: bold;
      line-height: 1.15;
      margin-bottom: 1.2rem;
      color: var(--schrift-w);
      animation: fadeUp 1.2s 0.35s ease both;
    }

    .hero h1 em {
      color: var(--error);
      font-style: italic;
    }  
.scroll p{
      max-width: 250px;
      height: auto;
      margin: auto;
      text-align: center;
      color: #969393;
    }
h2 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.8rem, 4vw, 3.5rem);
      color: var(--error);
      margin-bottom: 1.5rem;
      line-height: 1.2;
    } 
    
/* ── QUOTE BAND ── */
    .quote-band {
      background: var(--tabelle);
      padding: 4rem 2rem;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .quote-band::before {
      content: '❝';
      position: absolute;
      top: -0.5rem;
      left: 50%;
      transform: translateX(-50%);
      font-size: 8rem;
      color: rgba(255,255,255,0.07);
      font-family: serif;
      line-height: 1;
      pointer-events: none;
    }
    .quote-band blockquote {
      font-family: 'Raleway', sans-serif;
      font-style: italic;
      font-size: clamp(1.3rem, 3vw, 1.9rem);
      max-width: 710px;
      margin: 0 auto 1rem;
      line-height: 1.5;
    }
    .quote-band cite {
      font-family: 'Lato', sans-serif;
      font-style: normal;
      font-size: 0.8rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(245,237,216,0.6);
    } 
    
/* ── FOTO-GRID ── */
    .foto-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin-top: 2.5rem;
    }
@media (max-width: 550px) {
  .foto-grid {
    /* Ändert das Grid auf eine einzige Spalte */
    grid-template-columns: 1fr;
  }
}

    .foto-item {
      background: var(--mittel);
      border: 1px solid var(--error);    
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 0.5rem;
      cursor: pointer;
      overflow: hidden;
      position: relative;
    }
    
    .foto-item span {
      font-family: 'Raleway', sans-serif;
      font-size: 11px;
      letter-spacing: 2px;
      margin-top: -8px;
      color: var(--pfeil);
    }

 /* ── TIMELINE ── */
    .timeline {
      position: relative;
      padding-left: 2.5rem;
      margin-top: 2.5rem;
    }
    .timeline::before {
      content: '';
      position: absolute;
      left: 0.5rem;
      top: 0; bottom: 0;
      width: 1px;
      background: linear-gradient(180deg, var(--error), rgba(221, 194, 120, 0.1));
    }
    .timeline-item {
      position: relative;
      margin-bottom: 2.5rem;
    }
    .timeline-item::before {
      content: '';
      position: absolute;
      left: -2.1rem;
      top: 0.35rem;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--error);
      box-shadow: 0 0 12px rgba(88, 88, 83, 0.6);
    }
    .timeline-item h3 {
      font-family: 'Playfair Display', serif;
      font-size: 1.2rem;
      color: var(--pfeil);
      margin-bottom: 0.3rem;
    }
    .timeline-item p { margin: 0; } 
    
.footer {
   max-width: 1700px;
   margin: auto;
   height: auto;
   text-align: center;
}

.logo-abstand {
   padding: 8px; /* Abstand in der Fuszzeile */
}

.schrift {
   color: var(--schrift-w);
   font-style: italic;
   font-weight: 300;
}

.schrift:hover {
   color: var(--schrift-w);
   text-decoration: underline;
}

:target {
    caret-color: transparent;
    outline: none;
}

@media (max-width: 600px) {
  .scroll {
    display: none;
  }
}