/* ==========
   index.css
   ========== */

/* index.htm: Base-Layout-Regeln aus level1.css (alle divs und tables als Textblöcke) für Div/Table zurücksetzen */
.page{
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* die Index-Tabelle und ihre inneren Blöcke sollen keine Textblock-Geometrie erben */
.index-head,
.index-head table,
.index-head td,
.index-head .index-name,
.index-head .index-link{
  max-width: none;
  margin: 0;
  padding: 0;
}

/* sichtbarer Bereich (oben) */
.index-fold{
  min-height: 100vh;              /* ersetzt min-height:100% */
  display: flex;
  flex-direction: column;
  justify-content: center;  /* vertikal zentriert */
}

/* Kopfbereich volle Breite */
.index-head{
  max-width: none;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  padding-top: 1.2rem;
  padding-bottom: 0.6rem;
}

/* Innen: wie Textblock auf Folgeseiten */
.index-inner{
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  padding-top: 1.2rem;
  padding-bottom: 0.6rem;
}

/* Tabelle als Layout, aber ohne Tabellen-Optik */
table.index-grid{
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
table.index-grid td{
  vertical-align: top;
  padding: 0;
}
table.index-grid td:first-child{
  padding-right: 1.6rem;
  vertical-align: middle;
}
table.index-grid td:last-child{
  vertical-align: top;
}

/* Name links: wie h1/h2, aber nicht kursiv */
.index-name{
  display: inline-block;
  position: relative;
  transform: translateY(clamp(-10px, -1.2vw, -4px));  /* nach oben schieben; Werte ggf. feinjustieren */
  color: #004400;
  font-weight: 700;
  font-style: normal;
  line-height: 1.05;
  font-size: clamp(2.4rem, 4vw, 2.9rem);
  margin-right: 1.5rem;
  white-space: nowrap;            /* verhindert ungünstigen Umbruch */
}

.index-link{
  margin: 0;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.1vw, 1.3rem);
  line-height: 1.15;
/*  margin-bottom: 0.9rem;      */
}
.index-link small{
  display: block;
  margin-top: 0.15rem;
  margin-bottom: 0.95rem;   /* 0.95rem; dein gewünschter Abstand nach small */
  font-size: clamp(0.9rem, 1.6vw, 1.05rem);
  font-weight: 400;
  opacity: 0.9;
}

/* Link-Optik nur auf der Startseite: keine Unterstreichung im Titel,
   Unterstreichung nur in small */
.index-link a{
  display:inline-block;
  text-decoration: none;
  color: var(--link);
}
.index-link a:hover{
  background-color: var(--hover-bg);
}
.index-link a small{
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Hero Bild volle Breite */
.hero-full{
  width:100%;
  margin:0;
  padding:0;
}
.hero-full img{
  margin-top: 1.2rem;
  display:block;
  width:100%;
  height:auto;
}

/* Mobil: untereinander */
@media (max-width: 720px){
  table.index-grid, table.index-grid tr, table.index-grid td{
    display: block;
    width: 100%;
  }
  .index-name{
    position: static !important;  /* killt den Desktop-Shift */
    transform: none !important;
    padding-bottom: 2.25rem !important;         /* Abstand nach unten */
  }
}

hr.index{
  display:block;
  height:0;
  border:0;
  border-top:1px solid var(--fg);
}