* { box-sizing: border-box; }

:root {
  --sans: Helvetica, Arial, sans-serif;
  --serif: "Times New Roman", Times, serif;
  --text: #111;
  --muted: #777;
}

body {
  margin: 0;
  font-family: var(--serif);
  color: var(--text);
  background: #FEF8BB;
}

.header {
  width: 100vw;
  height: 90vh;
  aspect-ratio: 16 / 9;
  background: url("cover_alt_txt.png") center bottom / cover no-repeat;

  /* aus zentrierten Containern ausbrechen */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.page {
  display: grid;
  grid-template-columns: 160px minmax(520px, 640px) 300px;
  gap: 60px;
  padding: 80px 80px 120px;
}

.nav {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 200;
      line-height: 1.4;
    letter-spacing: 0.5px;
  position: sticky;  /* macht es sticky */
  top: 80px;         /* Abstand vom oberen Rand beim Scrollen */
  align-self: start; /* optional, sorgt dass es oben beginnt */
}

.nav a {
  display: block;
  text-decoration: none;
  color: var(--muted);
  margin-bottom: 6px;
}

.nav a.active {
  color: var(--text);
  text-decoration: underline;
}

.content section {
  margin-bottom: 120px;
}

.content section.no-gap-after {
  margin-bottom: 0;
}

.content h2 {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: normal;
  margin-bottom: 24px;
}

.content {
    font-size: 16px;
  line-height: 1.8;
   font-weight: 100;
    font-family: var(--sans); /* gleiche Schrift wie linke Spalte */
}

.content img,
.section-image {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
}

.media {
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  justify-self: end;
}

.media-scroll {
  height: 100%;
  overflow-y: auto;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

.media-scroll::-webkit-scrollbar {
  display: none;
}

.media-scroll img {
  width: 85%;
  display: block;
  margin-left: auto;
  margin-bottom: 16px;
}




.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.95);
  display: none;
  align-items: center;
  justify-content: center;
}

.lightbox.active {
  display: flex;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
}

.indented {
    text-indent: 30px; /* Abstand am Anfang der ersten Zeile */
}

.footer {
    width: 100%;                
    padding: 40px 80px;         
    background-color: #fff;         /* gleiche Farbe wie Rest der Seite */
    color: #111;                    
    font-family: var(--sans);
    font-weight: 300;               
    font-size: 10px;
    text-align: left;              /* rechtsbündig */
    border-top: none;               /* keine Trennlinie */
    letter-spacing: 1px;            /* optional: luftiger Typografie-Look */
}

.nav-header {
    font-family: var(--sans); /* gleiche Schrift wie Menü */
    font-weight: 200;          /* normal, nicht zu fett */
    font-size: 16px;           /* größer als die Links */
    margin-bottom: 16px;       /* Abstand zum Menü */
    line-height: 1.6;
    letter-spacing: 0.5px;
}

/* Top Navigation */
.top-nav {
  position: fixed;           /* immer sichtbar */
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  gap: 10px;                 /* Abstand zwischen den Boxen */
  padding: 6px 40px;        /* optional horizontaler Innenabstand */
  background: transparent;    /* transparenter Bereich hinter den Boxen */
  z-index: 999;              /* über allen Inhalten */
}

.top-box {
  flex: 1;                  
  background-color: rgba(255, 100, 150, 0.2); /* halbtransparentes Grau */
  padding: 4px 10px;        /* weniger Innenabstand → niedrigere Box */
  font-family: var(--sans);
  font-weight: 500;          /* fetter */
  font-size: 8px;           /* kleinere Schrift → Box niedriger */
  text-align: center;
  white-space: nowrap;        /* keine Umbrüche */
  overflow: hidden;           /* Überlauf ausblenden */
  text-overflow: ellipsis;    /* Überlauf als … */
  border-radius: 2px;
  text-decoration: none;      
  color: #990050; /* dunkleres Pink für den Text */
  transition: background-color 0.3s ease; /* sanfte Animation beim Hover */
}

/* Hover-Effekt: Hintergrund dunkler / weniger durchsichtig */
.top-box:hover {
  background-color: rgba(255, 100, 150, 0.4); /* weniger durchsichtig, dunkler */
}


/* Abstand zum Inhalt, sonst Top-Navigation überlappt */
.page {
  display: grid;
  grid-template-columns: 160px minmax(520px, 640px) 200px;
  gap: 60px;
  padding: 80px 80px 120px;
  margin-top: 28px; /* entspricht ca. Höhe der Top-Boxen + Padding */
}

.quote {
  margin-left: 0;                 /* kein klassischer Einzug */
  margin-right: 33%;              /* Zeilen umbrechen früher (≈ 2/3 Breite) */
  font-style: normal;             /* optional */
  line-height: 1.6;
}

@media (max-width: 768px) {
  
  .page {
    padding: 40px 20px 80px;
    gap: 40px;
  }
  
  .footer {
    padding-left: 0;
    padding-right: 0;

    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

}