@import url("https://use.typekit.net/eho4jqg.css");


/* AUSGEWÄHLTER TEXT */
::selection {
  background-color: rgb(235, 235, 235);
}


* {
  margin: 0;
  margin-left: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* FLIESSTEXT */
p {
  color: black;
  font-family: "manop-variable", sans-serif;
  font-variation-settings: "wdth" 120, "wght" 350;
  font-style: normal;
  font-size: 1vw;
  line-height: 150%;
  margin: 3%;
  margin-top: 5%;
}

h1{
  color: black;
  font-family: "manop-variable", sans-serif;
  font-variation-settings: "wdth" 120, "wght" 700;
  font-style: normal;
  font-size: 1vw;
}

/* LISTE */
nav {
  overflow: hidden;
  position: fixed;
  /* bleibt oben fixiert */
  top: 0;
  width: 100%;
  height: 8vw;
  font-size: 1vw;
}

nav ul {
  display: flex;
  justify-content: space-between;
  /* erster Link links, letzter rechts */
  align-items: center;
  /* vertikal mittig in der Höhe von nav */
  list-style: none;
  margin: 3%;
  padding: 0;
}

nav li {
  margin: 0;
  /* Abstand jetzt besser über padding/margin in ul steuern */
}

.nav-arrow {
  font-size: 1.5rem;   /* größer/kleiner machen: z.B. 1.5rem, 3rem */
  line-height: 1;    /* kompaktere Höhe */
  text-decoration: none;
}

/* Bearbeitung der Links */
a {
  transition: all 0, 1s;
  text-decoration: none;
  color: black;
  font-family: "manop-variable", sans-serif;
  font-variation-settings: "wdth" 120, "wght" 700;
  font-style: normal;
  font-size: 1vw;
}

/* Bearbeitung des Hover-Effekt der Links */
a:hover {
  font-family: "manop-variable", sans-serif;
  font-variation-settings: "wdth" 120, "wght" 350;
}



table {
  margin-top: 50px;
  margin-left: 3%;
}

td,
th {
  text-align: left;
  padding: 2px;
  padding-right: 10px;
  width:fit-content;
}

th {
  color: black;
    font-family: "manop-variable", sans-serif;
  font-variation-settings: "wdth" 120, "wght" 350;
  font-style: normal;
  font-size: 1vw;
}

td {
  color: black;
  font-family: "manop-variable", sans-serif;
  font-variation-settings: "wdth" 120, "wght" 350;
  font-style: normal;
  font-size: 1vw;
}

/* Erste Spalte fixieren */
table td:first-child, 
table th:first-child {
  white-space: nowrap;   /* verhindert Zeilenumbruch */
  width: 1%;             /* lässt die Spalte so schmal wie möglich */
  padding-right: 20px;   /* etwas Abstand zum Text der 2. Spalte */
}




.container {
  display: flex;
  height: 100vh; /* Gesamte Höhe des Viewports */
  overflow: hidden; /* Verhindert, dass die gesamte Seite scrollt */
}

/* Rechte Seite - Text */
.text {
  width: 60%;
  overflow-y: auto; /* Falls nötig, kann der Textbereich scrollen */

}

/* Linke Seite - Bilder */
.image-container {
  width: 40%;
  height: auto; /* Fixe Höhe */  
}

/* Bildgrößen für Layout */
.image-container img {
  width: 100%; /* Zwei Hochformat-Bilder nebeneinander */
  height: auto;
}

.skip{
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: #fff;
  border-top: 1px solid #eee;


  /* möglichst flach */
  padding: .50rem 2vw;

  /* stapeln ohne <br> */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;          /* minimaler Abstand zwischen den zwei Zeilen */
}

.skip a{
  display: block;      /* neue Zeile je Link */
  line-height: 1.1;    /* eng */
  padding: 0;          /* keine Extra-Höhe */
  text-decoration: none;
  line-height: normal;
}






/* --- MOBILE LAYOUT ------------------------------------------------------- */
@media (max-width: 768px) {

  /* Nav bleibt oben, bekommt fixe Höhe in px und Hintergrund */
  nav {
    height: 56px;
    font-size: 16px;      /* gut finger-tappable */
    z-index: 1000;
  }

  nav ul {
    margin: 0 12px;
    height: 56px;
  }

  /* Platz unter der fixen Nav schaffen */
  body {
    padding-top: 56px;
  }

  /* Typo-Größen auf Handy lesbarer machen */
  p { 
    font-size: 16px; 
    line-height: 1.55;
    margin: 16px;
    margin-top: 20px;
  }

  h1 {
    font-size: 18px;
    margin: 16px;
    margin-bottom: 8px;
  }

  a {
    font-size: 16px;
  }

  /* Spalten zusammenfassen: Bild oben, Text darunter */
  .container {
    display: block;      /* statt Flex */
    height: auto;
    overflow: visible;
  }

  .image-container,
  .text {
    width: 100%;
  }

  .image-container img {
    width: 100%;
    height: auto;
    display: block;
  }

  .text {
    overflow: visible; /* kein eigener Scrollbereich auf Handy */
  }

  /* Tabelle als Einspalter: linke Zelle = Überschrift über rechter Zelle */
  table {
    width: 100%;
    margin: 12px 0 24px 0;
    border-collapse: collapse;
  }

  /* Jede Tabellenzeile als eigener „Block“ mit Innenabstand */
  table tr {
    display: block;
    padding: 0 16px 10px 16px;
  }

  /* Überschriften-Zeilen (mit <th><h1>…) enger machen */
  table tr:has(h1) {
    padding-top: 22px;   /* Abstand zu vorherigem Block */
    padding-bottom: 6px;
  }

  /* Zellen stapeln untereinander */
  table th,
  table td {
    display: block;
    width: 100%;
    padding: 0;
    font-size: 16px;
  }

  /* Linke Spalte als „Label“ oben */
  table td:first-child {
    font-weight: 700;
    font-variation-settings: "wdth" 120, "wght" 700;
    margin-top: 10px;
    margin-bottom: 2px;
    white-space: normal; /* wieder umbrechen erlauben */
  }

  /* Die globale Regel, die die erste Spalte fixiert, für Mobile neutralisieren */
  table td:first-child, 
  table th:first-child {
    width: auto;
    padding-right: 0;
  }

  /* Abschnittsüberschriften in der Tabelle (deine <th><h1>…)</h1> */
  th h1 {
    margin: 0 0 6px 0;
    font-size: 18px;
  }

  /* Skip-Links bleiben am unteren Rand, mit etwas Luft */
  .skip{
    padding: 8px 16px;
    border-top: 1px solid #eee;
  }
}