/* Global Dark Mode */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #000;          /* schwarzer Hintergrund */
  color: #e5e5e5;            /* gut lesbares hellgrau */
}
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

/* Header oben fix */
.header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 70px;
  background: #0f0f0f;         /* dunkler, matter Header */
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20px;
  z-index: 1000;
  border-bottom: 1px solid #222;
}

.logo {
  height: 45px;
  margin-right: 20px;
}

nav a {
  color: #ccc;
  margin-right: 20px;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

nav a:hover {
  color: #fff;
}

/* Bereich unter dem Header */
iframe {
  position: absolute;
  top: 70px; left: 0;
  width: 100%;
  height: calc(100vh - 70px);
  border: none;
}

/* Startseiten-Grafik */
.hero-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.hero-image {
  max-width: 1000px;
  width: 95%;        /* passt sich an jede Größe an */
  height: auto;
  border-radius: 12px;
}
/* Hero-Image */
.hero-image {
  max-width: 1000px;
  width: 95%;
  height: auto;
  border-radius: 12px;
}

/* >>> HIER DARUNTER, GANZ NORMAL <<< */

@media (max-width: 600px) {
  nav a {
    margin-right: 10px;
    font-size: 14px;
  }
  .logo {
    height: 35px;
  }
}
/* ========================= */
/*      ARTICLE LAYOUT       */
/* ========================= */

.article-header {
  max-width: 1000px;
  margin: 0 auto;
  margin-top: 40px;
  text-align: center;
}

.article-hero {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 20px;
}

.article-meta h1 {
  font-size: 32px;
  margin-bottom: 8px;
  color: #ffffff;
}

.article-meta p {
  color: #bbb;
  font-size: 15px;
}

.article-content {
  max-width: 900px;
  margin: 30px auto;
  padding: 20px;
  color: #e4e4e4;
  line-height: 1.6;
  font-size: 17px;
}

.article-content h2 {
  margin-top: 40px;
  font-size: 24px;
  color: #5da9ff;
}

.article-content h3 {
  margin-top: 25px;
  font-size: 20px;
  color: #79c3ff;
}

.scenario-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.scenario-table th, .scenario-table td {
  border: 1px solid #444;
  padding: 10px;
  text-align: left;
}

.scenario-table th {
  background: #1a1a1a;
}

.scenario-table tr:nth-child(even) {
  background: #111;
}
/* ----------------------------- */
/* Header-Fix (größer, klarer)   */
/* ----------------------------- */

header {
    background: #000;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    gap: 20px;
}

header .logo {
    height: 55px;       /* größer */
}

header nav a {
    font-size: 18px;    /* lesbarer */
    margin-right: 25px;
}


/* Artikelbild – begrenzte Höhe */
.hero-image {
    display: block;
    margin: 20px auto;
    width: 100%;
    max-width: 950px;
    max-height: 350px;   /* <<< Höhe BEGRENZT – ca. Hälfte der originalen */
    border-radius: 12px;
    object-fit: cover;   /* <<< schneidet sauber oben/unten */
    object-position: center;
}
/* Content-Bereich für Analyse-Seiten */
.analysis-content {
    max-width: 950px;
    margin: 0 auto;
    padding: 20px;
    text-align: left;   /* <<< WICHTIG! */
}

/* Responsive Grid */
.analysis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.hero-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
}
header nav ul {
    flex-wrap: wrap;
}

header nav ul li a {
    font-size: 0.9rem;
    padding: 6px 10px;
}
@media (max-width: 600px) {
    .analysis-content {
        padding: 15px;
        font-size: 1rem;
        line-height: 1.55;
    }

    h1, h2, h3 {
        line-height: 1.3;
    }
}
@media (max-width: 800px) {
    body {
        font-size: 16px;
    }

    .analysis-content {
        padding: 15px;
        line-height: 1.6;
    }

    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.3rem; }
    p, li { font-size: 1rem; }

    table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }
}
/* ------------------------------------------------------
   MOBILE OPTIMIERUNG – FUNKTIONIERT AB 800px / 600px
-------------------------------------------------------*/

/* Tablet + kleine Geräte */
@media (max-width: 800px) {

    body {
        font-size: 16px;
        line-height: 1.55;
        padding: 0;
        margin: 0;
    }

    .analysis-content {
        padding: 15px;
        line-height: 1.6;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    h1 { font-size: 1.6rem; line-height: 1.3; }
    h2 { font-size: 1.3rem; line-height: 1.3; }
    h3 { font-size: 1.15rem; line-height: 1.3; }
    p, li { font-size: 1rem; }

    /* Tabellen mobile scroll bar */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    /* Hero-Bilder */
    .hero-image,
    .analysis-header-image,
    img.header-image {
        max-width: 100%;
        width: 100%;
        height: auto;
        border-radius: 8px;
    }

    /* Header kompakter */
    header {
        padding: 10px;
    }

    /* Navigation */
    header nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    header nav ul li a {
        font-size: 0.85rem;
        padding: 6px 8px;
    }
}



/* Smartphones (unter 600px) */
@media (max-width: 600px) {

    body {
        font-size: 14px;
        line-height: 1.55;
    }

    .analysis-content {
        padding: 10px;
        line-height: 1.55;
    }

    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.2rem; }
    h3 { font-size: 1rem; }

    /* Bilder absolut safe */
    img,
    .hero-image,
    .analysis-header-image,
    img.header-image {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Navigation wird untereinander dargestellt */
    header nav ul {
        flex-direction: column;
        gap: 10px;
        padding: 0;
    }

    header nav ul li a {
        font-size: 0.9rem;
        padding: 10px;
    }

    /* Tabellen sauber scrollbar */
    table {
        width: 100%;
        display: block;
        overflow-x: auto;
    }
}
.hero-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.hero-image {
    max-width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}
@media (max-width: 768px) {

    /* Der Header bekommt genug Platz nach unten */
    header {
        padding-bottom: 70px !important; 
        height: auto !important;
    }

    /* Navigation bleibt so wie sie ist */
    header nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

/* Mobile Header Fix */
@media (max-width: 768px) {

    /* Header sauber halten */
    header {
        padding-top: 10px;    /* kleiner Abstand nach oben */
        padding-bottom: 5px;  /* NICHT ins Bild drücken */
    }

    /* Navigation kompakt + 3 pro Reihe */
    header nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;              /* kleiner Abstand zwischen Items */
        padding: 0;            /* KEIN Padding → bleibt flach */
    }

    /* Links: 3 nebeneinander */
    header nav a {
        width: 30%;            /* → genau 3 pro Zeile */
        text-align: center;
        padding: 6px 0;        /* kleine Höhe, fingerfreundlich */
        font-size: 16px;
        background: none;      /* kein Button-Look */
        border-radius: 0;
        margin: 0;             /* NICHT nach unten schieben */
        line-height: 1.3;      /* kompakt */
    }

    /* Bild darunter mit Abstand */
    .hero-image,
    .analysis-header-image,
    .header-image {
        margin-top: 10px;      /* NICHT ans Menü kleben */
        width: 100%;
        height: auto;
    }
}
/* =======================================
   HEADER / NAV KOMPAKTER MACHEN
   ======================================= */
@media (max-width: 768px) {
    header, .top, .nav-container {
        padding: 8px 0 !important;
        margin: 0 !important;
        height: auto !important;
    }
}

/* =======================================
   NAVIGATION GRID 4/3 ANORDNUNG
   ======================================= */
@media (max-width: 768px) {

    nav {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        width: 100%;
        padding: 0 10px;
    }

    nav a {
        padding: 8px 6px;
        font-size: 15px;
        background: rgba(255,255,255,0.08);
        border-radius: 10px;
        text-align: center;
    }
}