/* --- BASIS-STILE --- */
body {
    background-color: #dcdcdc;
    color: #333366;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0; /* Padding wird jetzt über site-wrapper gesteuert */
}

/* Alle Bilder responsiv halten */
img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

a img { border: thin solid #EEEEEE; } 
a:hover img { border: thin solid #000000; } 


/* --- NEUES HAUPT-LAYOUT (EINSPALTIG) --- */

.site-wrapper {
    max-width: 800px; /* Optimale Breite für Text und Bildergalerien */
    margin: 0 auto;
    padding: 20px;
	text-align: left;
}

.site-header, .navigation-area, .content-area, .site-footer {
    width: 100%;
	text-align: left;
    margin-bottom: 20px;
}

/* Namensblock */
.site-header {
    text-align: left;
}

.artist-name {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    line-height: 1.4;
}

.artist-subline {
    font-size: 11px;
}

/* Navigation unter dem Namen */
.navigation-area {
    text-align: left;
}
/* Container für die nebeneinander liegenden Navis */
.nav-flex-container {
    display: flex;
    justify-content: space-between; /* Schiebt Hauptnavi nach links, Unternavi nach rechts */
    align-items: flex-start;       /* Richtet beide oben bündig aus */
    width: 100%;
}

.nav-left {
    text-align: left;
}
.nav-right {
    text-align: right; /* Unternavi wird rechtsbündig */
}

/* Erzeugt zwei Spalten für die lange Unternavi */
.nav-multi-column {
    column-count: 2;         /* Teilt den Text in 2 Spalten */
    column-gap: 20px;        /* Abstand zwischen den Spalten */
    text-align: right;       /* Behält Ihre Rechtsbündigkeit bei */
    width: 100%;
}

/* Verhindert, dass ein Link unschön am Spaltenende zerrissen wird */
.nav-multi-column a, 
.nav-multi-column br {
    display: inline-block; 
    width: 100%;
}
@media (max-width: 600px) {
    .nav-multi-column {
        column-count: 1;
    }
}


/* Inhaltsbereich */
.content-area {
    margin-top: 10px;
}

/* Horizontale Linien */
.header-hr {
    border: 0;
    border-top: 1px solid #333366;
    margin: 10px 0;
    width: 100%;
}

/* --- TABELLEN-RESCUE (Für deine Bildergalerien im Text) --- */


.content-area table {
    width: 100% !important;   /* Überschreibt das HTML-Attribut width="480" */
    max-width: 100% !important;
    border-collapse: collapse;
    margin-left: 0 !important; /* Hebt align="right" auf */
    margin-right: 0 !important;
    table-layout: fixed;      /* Sorgt für gleichmäßige Spaltenverteilung */
}

.content-area td {
    width: auto !important;   /* Hebt feste Zellenbreiten auf */
    padding: 5px;
    vertical-align: top;
}
/* Bilder innerhalb dieser Tabellen */
.content-area td img {
    width: 100%;              /* Bilder füllen die Zelle aus */
    height: auto;
    display: block;
}

/* --- SPEZIAL-LAYOUT: EINZELBILD-GALERIE --- */

.gallery-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert alle Kinder horizontal */
    justify-content: flex-start;
    max-width: 1000px; /* Erlaubt große Bilder */
    margin: 0 auto;
    padding: 20px;
    text-align: center; /* Zentriert Text in der Navigation und Beschreibung */
}

.nav-container {
    margin-bottom: 30px;
    width: 100%;
}

.image-container {
    width: 100%;
	align-items: center;
    margin-bottom: 20px;
}


/* --- DEINE STIL-KLASSEN (Beibehalten) --- */

.Hauptlink { font-size: small; font-weight: normal; font-variant: small-caps; line-height: 1.8; }
.Hauptlink a { color: #999999; text-decoration: none; }
.Hauptlink a:hover { color: #333366; }

.Unternavigation { font-size: 13px; font-variant: small-caps; line-height: 1.6; }
.Unternavigation a { color: #999999; text-decoration: none; }
.Unternavigation a:hover { color: #333366; }

.Hauptlink, .Unternavigation {
    text-align: left;
    display: block; /* Stapelt die Links untereinander */
}

.Normaltext { 
    font-size: 13px; /* Vorher ca. 10px, jetzt deutlich besser lesbar */
    text-align: justify; 
    line-height: 1.6; /* Etwas mehr Zeilenabstand für bessere Lesbarkeit */
}

.Impressumlink, .Impressumgrau { font-size: xx-small; color: #999999; text-align: left; }

/* Abstandshalter-Klasse für alte Dreamweaver-Leerstellen */
.header-spacer { height: 10px; }


	
/* --- OPTIMIERTE GALERIE-NAVIGATION --- */

.gallery-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Abstand zwischen den Links */
    font-family: Verdana, Arial, sans-serif;
    font-variant: small-caps;
    font-size: 14px;
}

.nav-item {
    text-decoration: none;
    color: #660000;
    padding: 10px 15px; /* Vergrößert die Klickfläche enorm! */
    transition: background 0.3s;
}

.nav-item:hover {
    background-color: #e0e0e0;
    border-radius: 4px;
}

.image-container table {
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important; /* Verhindert, dass die Tabelle 100% erzwingt */
    border-collapse: collapse;
}

.image-container td {
    text-align: center !important;
    padding: 0;
}

.image-container img {
    display: block;
    margin: 0 auto !important;
    max-height: 85vh; /* Damit das Bild nicht über den Bildschirmrand hinausragt */
    width: auto;
    max-width: 100%;
}
.video-link {
  display: block;
  width: 100%;
  text-decoration: none;
  cursor: pointer;
}

.video-container {
  width: 100%;
  overflow: hidden;
}

video {
  width: 100%;
  height: auto;
  display: block; /* Verhindert kleine Abstände unter dem Video */
  object-fit: cover; /* Optional: Füllt den Raum komplett aus */
}