/* =========================
   GLOBAL LAYOUT HACKS
   ========================= */

/* WICHTIG:
   Dieses Padding ist ein bewusster Layout-Hack.
   Es verschiebt das gesamte Design leicht nach links,
   um breite Elemente (Ribbon, Bilder >100%) optisch zu zentrieren.
   NICHT auf body verschieben! */
html {
    padding: 0 15% 0 0;
}
body {
    position: relative;
    background: linear-gradient(90deg, rgba(28,28,28,1) 0%, rgba(61,61,61,1) 100%);
    font-family: Verdana, Arial, sans-serif;
    color: #cbcbcb;
    width: 800px; /* Fixe Seitenbreite – Grundlage des gesamten Layouts */
    margin: 0 auto;
    font-size: 0.82em;
}
/* box-sizing global gesetzt – gut und nötig,
   auch für Legacy-Layouts */
* { box-sizing: border-box; }

/* =========================
   LINKS
   ========================= */
a { font-family: Verdana, Arial, sans-serif; text-decoration: none; color: #d7d7d7;
    padding: 5px 15px; outline: none; }
a:hover { color: #fff; }

/* =========================
   BILDER
   ========================= */
/* KRITISCHER HACK:
   Bilder dürfen absichtlich über ihre Container hinauswachsen.
   Wird für visuelle Balance mit Navigation & Ribbon benötigt.
   NICHT global ändern! */
img { max-width: 130%; height: auto; }

/* =========================
   HEADER / RIBBON
   ========================= */
header {
    width: 100%;
    height: 100px;
    color: white;
}
header h1 a {
    display: block;
    color: #d7d7d7;
}
/*   Ribbon:
   - negativ verschoben
   - fixiert
   -> bewusstes Stilmittel */
.ribbon {
    position: fixed;
    background: #1c1c1c;
    opacity: .8;
    clear: both;
    text-align: left;
    padding: 10px 0 15px 505px;
    width: 800%;  /* EXTREM breit – NICHT normalisieren */
    margin-left: -300px;
    z-index: 100; 
}

/* =========================
   CONTENT / FLOAT-LAYOUT
   ========================= */
main {
  display: flex;
  width: 100%;
  gap: 30px;
}

article {
  flex: 1;
  width: auto;
}

/* =========================
   TYPOGRAFIE
   ========================= */
h1 {
    font-family: Verdana, Arial;
    font-size: 2.10em; font-weight: bold; font-style: italic;
}
p {
    text-align: left;
    line-height: 1.50em;
    padding: 20px 0;
}
section p img {
    float: left;
    margin: 0 10px 10px 0;
}

/* =========================
   FOOTER
   ========================= */
footer {
    color: #d7d7d7;
    text-align: left;
    padding-left: 230px;
    font-family: Verdana, Arial; font-weight: bold; font-size: 0.85em;
}

/* =========================
   SLIDESHOW CROSSFADE
   ========================= */
.slideshow-container {
    display: grid;
    grid-template-columns: 100%;
    position: relative;
    width: 100%;
    overflow: hidden;
    background: transparent;
}
.mySlides {
    grid-area: 1 / 1;
    opacity: 0;
    width: 100%;
    height: auto;
    transition: opacity 1.5s ease-in-out;
    z-index: 1;
}
.mySlides.active {
    opacity: 1;
    z-index: 2;
}

/* =========================
   RESPONSIVE (vorsichtig!)
   ========================= */
@media only screen and (max-width: 900px) {
    body {
        width: 100%;
    }
    header h1.ribbon {
        width: 97%;
        margin-left: 10px;
        text-align: left;
        padding: 15px 0 15px 20px;
    }
    article {
        width: 100%;
    }
}