body { font-family: Arial, sans-serif; margin:0; padding:0; background:#FFFFFF; }

header { position:relative; width:100%; height:450px; }
header img { width:100%; height:450px; object-fit:cover; }
.header-title { position:absolute; bottom:100px; left:20px; color:white; font-size:60px; font-weight:bold; text-shadow:2px 2px 5px rgba(0,0,0,0.7); margin:0; }

.container { display:flex; width:100%; flex-wrap:nowrap; }

.sidebar { width:200px; height:100vh; background:#333; color:white; padding:20px; position:sticky; top:0; overflow-y:auto; flex-shrink:0; }
.sidebar h2 { font-size:20px; text-align:center; }
.sidebar ul { list-style:none; padding:0; margin:0; }
.sidebar ul li { padding:10px 0; }
.sidebar ul li a { color:white; text-decoration:none; display:block; padding:10px; transition: background 0.3s; }
.sidebar ul li a:hover { background-color:#575757; }

.content { flex-grow:1; margin-left:10px; padding-right:15px; text-align:justify; line-height:1.6; }
.site-title { text-align:center; font-size:2.5em; margin-top:40px; margin-bottom:60px; color:#222; font-weight:bold; }
p { margin-bottom:20px; }

@media(max-width:800px){
    .container{flex-direction:column;}
    .sidebar{width:100%; height:auto; position:relative; top:0;}
    .sidebar ul li{display:inline-block; margin-right:10px;}
    .sidebar ul li a{padding:8px 12px; background:#444; border-radius:4px;}
    .sidebar ul li a:hover{background:#575757;}
    .content{margin-left:0; padding:15px;}
    .site-title{font-size:2.2em; margin-top:20px; margin-bottom:40px;}
}

.schick {
  border-collapse: collapse;
  margin: 20px auto;           /* zentriert die Tabelle */
  min-width: 300px;            /* verhindert zu enge Darstellung */
  table-layout: auto;
  width: auto;                 /* passt sich dem Inhalt an */
  border-top: 2px solid #000;  /* obere Linie der gesamten Tabelle */
  border-bottom: 2px solid #000; /* untere Linie der gesamten Tabelle */
}

.schick th,
.schick td {
  padding: 6px 12px;    /* kleinere Abstände oben/unten */
  line-height: 1.2;     /* Text dichter setzen */
  text-align: left;
}

/* Linie unter der ersten Zeile */
.schick thead th {
  border-bottom: 2px solid #000;
}

.float-table {
  float: right;      /* Tabelle rechts vom Text */
  margin: 0 0 15px 15px; /* Abstand zum Text */
  border-collapse: collapse;
}

.bild {
  display: block;
  margin: 0 auto; /* horizontal zentriert */
  width: 50%;      /* 50% der verfügbaren Breite */
  height: auto;    /* proportional */
}

.figure {
  display: block;
  margin: 0 auto; /* horizontal zentriert */
  width: 75%;      /* 75% der verfügbaren Breite */
  height: auto;    /* proportional */
}

.foto {
  display: block;
  margin: 0 auto; /* horizontal zentriert */
  width: 100%;      /* 50% der verfügbaren Breite */
  height: auto;    /* proportional */
}

/* Mobile Optimierung */
@media (max-width: 600px) {
  .bild {
    width: 70%;  /* auf kleinen Bildschirmen etwas größer */
  }
}

.float-figure {
  float: right;               /* Ganze Figure floatet rechts */
  margin: 0 0 15px 15px;      /* Abstand zum Text */
  width: 25%;               /* feste oder relative Breite */
}

.float-figure img {
  display: block;
  width: 100%;                /* Bild füllt die Figure-Breite */
  height: auto;
}

.float-figure figcaption {
  text-align: justify;         /* Caption Blocksatz */
  font-size: 0.9em;           /* kleiner als Fließtext */
  margin-top: 5px;            /* Abstand zwischen Bild und Caption */
}

.float-figure2 {
  float: right;               /* Ganze Figure floatet rechts */
  margin: 0 0 15px 15px;      /* Abstand zum Text */
  width: 15%;               /* feste oder relative Breite */
}

.float-figure2 img {
  display: block;
  width: 100%;                /* Bild füllt die Figure-Breite */
  height: auto;
}

.float-figure2 figcaption {
  text-align: justify;         /* Caption Blocksatz */
  font-size: 0.9em;           /* kleiner als Fließtext */
  margin-top: 5px;            /* Abstand zwischen Bild und Caption */
}

/* Topbar passend zur Sidebar gestalten */
.topbar {
    background-color: #333;       /* gleiche Farbe wie Sidebar */
    color: white;                 /* Textfarbe weiß */
    display: flex;                /* horizontale Anordnung */
    align-items: center;           /* vertikal zentrieren */
    padding: 20px;                /* gleiches Padding wie Sidebar */
    gap: 15px;                    /* Abstand zwischen Links */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* optional: leichter Schatten */
}

.topbar a {
    color: white;                 /* Textfarbe */
    text-decoration: none;        /* keine Unterstreichung */
    font-size: 1em;               /* anpassbar */
    padding: 10px 15px;           /* klickbare Fläche */
    border-radius: 4px;           /* leicht abgerundet */
    transition: background 0.3s;
}

.topbar a:hover {
    background-color: #575757;    /* Hover-Effekt analog Sidebar */
}

/* Mobile-Optimierung für Topbar */
@media(max-width:800px){
    .topbar {
        flex-direction: column;     /* Links untereinander statt nebeneinander */
        align-items: flex-start;    /* Links am Rand ausrichten */
        padding: 15px;              /* etwas weniger Padding für kleine Bildschirme */
        gap: 10px;                  /* Abstand zwischen Links reduzieren */
    }

    .topbar a {
        display: block;             /* volle Breite klickbar */
        width: 100%;                /* Links füllen Breite */
        text-align: left;           /* Links ausrichten */
        padding: 10px 12px;         /* angepasstes Padding */
        margin: 0;                  /* kein extra Margin */
    }
}

.main-text {
    max-width: 1000px;          /* maximale Breite für Lesbarkeit */
    margin: 0 auto;             /* zentriert die Texte auf der Seite */
    padding: 0 20px;            /* Abstand links und rechts vom Seitenrand */
    line-height: 1.6;           /* wie in den anderen Inhalten */
    font-size: 1em;             /* anpassbar */
    text-align: justify; /* Blocksatz */
}