/* ── Parameter ── */
:root {
  --header-padding:    20px;   /* Innenabstand Header und Footer */
  --logo-size:         60px;   /* Breite und Höhe des Hauptlogos */
  --social-size:       40px;   /* Breite und Höhe der Social-Media-Icons */
  --social-gap:        15px;   /* Abstand zwischen den Social-Media-Icons */
  --global-bg-color:   #2f2f2f;  /* Hintergrundfarbe für Header UND Footer – einmalig hier ändern */
}
/* ── Browser-Standard-Margin entfernen ── */
body {
  margin: 0;   /* Entfernt weißen Rand rund um die Seite */
  padding: 0;  /* Entfernt weißen Innenabstand */
}
/* ── main: Standard-Abstand entfernen ── */
main {
  margin:  0; /* Entfernt weißen Rand um main */
  padding: 0; /* Entfernt weißen Innenabstand */
}
/* ── Header: zwei Zeilen untereinander ── */
#GlobalFooter,
#GlobalHeader {
  background-color: var(--global-bg-color); /* Hintergrundfarbe aus Parameter */
  color: white;                              /* Schriftfarbe weiß */
  padding: var(--header-padding);            /* Innenabstand aus Parameter */
  display: flex;                             /* Flexbox-Layout aktivieren */
  flex-direction: column;                    /* Kindelemente untereinander anordnen */
  position: sticky;                          /* Header bleibt beim Scrollen oben fixiert */
  top: 0;                                    /* Klebt am oberen Rand des Browserfensters */
  z-index: 1000;                             /* Liegt über allen anderen Seitenelementen */
  font-family: Arial, Helvetica, sans-serif; /* Schriftart des Headers */
  text-align: center;                        /* Schrift horizontal zentrieren */
  font-weight: bold;                         /* Schrift fett darstellen */
  line-height:      2.0;                     /* Zeilenabstand – 1.6 = 160% der Schriftgröße */
}
/* ── Zeile 1: Logo links, Social rechts ── */
#HeaderLinks {
  display: flex;                 /* Logo und Social-Icons nebeneinander anordnen */
  align-items: center;           /* Kindelemente vertikal zentrieren */
  width: 100%;                   /* Volle Breite des Headers ausnutzen */
}
/* ── Logo ── */
#HeaderLogo {
  width:  var(--logo-size);      /* Breite aus Parameter */
  height: var(--logo-size);      /* Höhe aus Parameter */
  display: block;                /* Bild als Block-Element darstellen */
}
/* ── Social-Icons ── */
#GlobalNav {
  margin-left: auto;             /* Schiebt die Social-Icons automatisch nach rechts */
  display: flex;                 /* Icons nebeneinander anordnen */
  align-items: center;           /* Icons vertikal zentrieren */
  gap: var(--social-gap);        /* Abstand zwischen Icons aus Parameter */
}
#HeaderYoutube,
#HeaderFacebook {
  width:  var(--social-size);    /* Breite der Icons aus Parameter */
  height: var(--social-size);    /* Höhe der Icons aus Parameter */
  display: block;                /* Icons als Block-Elemente darstellen */
  transition: opacity 0.2s;      /* Weicher Übergang beim Hover-Effekt (0.2 Sekunden) */
}
#HeaderYoutube:hover,
#HeaderFacebook:hover {
  opacity: 0.7;                  /* Icons beim Hover auf 70% Deckkraft abdunkeln */
}
/* ── Zeile 2: Unterseiten-Links ── */
#SubPagesNav {
  display: flex;                         /* Links nebeneinander anordnen */
  justify-content: flex-end;             /* Links an den rechten Rand schieben */
  gap: var(--social-gap);                /* Abstand zwischen den Links aus Parameter */
  margin-top: 10px;                      /* Abstand zur ersten Header-Zeile */
}
#SubPagesNav a {
  color: white;                          /* Linkfarbe weiß */
  text-decoration: none;                 /* Standardunterstrich entfernen */
  font-size: 0.95rem;                    /* Schriftgröße leicht kleiner als Standard */
  letter-spacing: 1px;                   /* Zeichenabstand für bessere Lesbarkeit */
  padding-bottom: 2px;                   /* Kleiner Abstand unter dem Text */
  border-bottom: 2px solid transparent;  /* Unsichtbare Linie als Platzhalter für Hover-Effekt */
  transition: border-color 0.2s;         /* Weicher Übergang der Unterstrich-Farbe beim Hover */
}
#SubPagesNav a:hover {
  border-bottom-color: white;            /* Weißer Unterstrich beim Darüberfahren mit der Maus */
}
/* ── Standard-Schrift für Links ── */
.StdFont a {
  color:       #ffffff;                      /* Linkfarbe weiß als Hex-Wert */
  font-weight: bold;                         /* Links fett darstellen */
  font-family: Arial, Helvetica, sans-serif; /* Schriftart – Fallback-Kette falls Arial nicht verfügbar */
}
/* ── Dates Tabelle ── */
#DatesTable {
  width:           100%;         /* Tabelle füllt die ContentBox aus */
  border-collapse: collapse;     /* Doppelte Rahmen zwischen Zellen zusammenführen */
}
#DatesTable th,
#DatesTable td {
  border:  none;                 /* Keine sichtbaren Trennlinien */
  padding: 10px 20px;            /* Innenabstand: 10px oben/unten, 20px links/rechts */
  text-align: left;              /* Text linksbündig */
}
#DatesTable thead th {
  border-bottom: 1px solid rgba(255,255,255,0.3); /* Dezente Trennlinie unter Überschriften */
  letter-spacing: 1px;           /* Zeichenabstand für bessere Lesbarkeit */
}
#DatesTable tbody tr:hover {
  background-color: rgba(255,255,255,0.08); /* Zeile beim Hover leicht aufhellen */
}
/* ── Youtube-Link in ContentBox ── */
#YoutubeLinkMedia {
  width:      120px;             /* Breite des Youtube-Logos in Pixel */
  height:     auto;              /* Höhe passt sich proportional zur Breite an */
  display:    block;             /* Block-Element damit margin: auto funktioniert */
  margin:     30px auto 0 auto;  /* Abstand oben 30px, links/rechts auto = zentriert */
  transition: opacity 0.2s;      /* Weicher Übergang beim Hover-Effekt */
}
#YoutubeLinkMedia:hover {
  opacity: 0.7;                  /* Logo beim Hover auf 70% Deckkraft abdunkeln */
}
/* ── Inline-Text-Link ── */
.InTextLink {
  color:            #ff8c00;             /* ← eigene Farbe hier anpassen (Beispiel: Orange) */
  text-decoration:  none;                /* Standardunterstrich entfernen */
  font-family:      Arial, Helvetica, sans-serif; /* Schriftart */
  font-weight:      bold;                /* Schrift fett darstellen */
  letter-spacing:   1px;                 /* Zeichenabstand für bessere Lesbarkeit */
  padding-bottom:   2px;                 /* Kleiner Abstand unter dem Text */
  border-bottom:    2px solid transparent; /* Unsichtbare Linie als Platzhalter für Hover-Effekt */
  transition:       border-color 0.2s;   /* Weicher Übergang der Unterstrich-Farbe beim Hover */
}

.InTextLink:hover {
  border-bottom-color: #ff8c00;          /* Unterstrich beim Hover in derselben eigenen Farbe */
}
#VideoIndex {
    width: 560px;
    height: 315px;
    border: none;
}
/* ── Consent-Banner ── */
#ConsentBanner {
  display:          none;                /* Standardmäßig versteckt */
  position:         fixed;               /* Fixiert am unteren Rand */
  bottom:           0;                   /* Klebt am Seitenboden */
  left:             0;
  width:            100%;                /* Volle Browserbreite */
  box-sizing:       border-box;          /*padding in width einrechnen */
  background-color: rgba(20, 20, 20, 0.97); /* Fast schwarz */
  color:            white;               /* Weiße Schrift */
  padding:          15px 20px;           /* Innenabstand */
  z-index:          9999;                /* Liegt über allem */
  justify-content:  space-between;       /* Text links, Buttons rechts */
  align-items:      center;
  gap:              20px;
  font-family:      Arial, Helvetica, sans-serif; /* Schriftart */
  font-size:        0.9rem;              /* Schriftgröße */
}

#ConsentBanner p {
  margin: 0;                             /* Kein Standardabstand */
}

#ConsentButtons {
  display: flex;                         /* Buttons nebeneinander */
  gap:     15px;                         /* Abstand zwischen Buttons */
}

#BtnAccept,
#BtnDecline {
  padding:       10px 24px;             /* Innenabstand der Buttons */
  border:        none;                  /* Kein Standardrahmen */
  border-radius: 6px;                   /* Runde Ecken */
  cursor:        pointer;               /* Mauszeiger als Hand */
  font-weight:   bold;                  /* Schrift fett */
  font-size:     0.9rem;
  transition:    opacity 0.2s;          /* Sanfter Hover-Übergang */
}

#BtnAccept {
  background-color: #4CAF50;            /* Grün für Zustimmung */
  color:            white;
}

#BtnDecline {
  background-color: #888;               /* Grau für Ablehnung */
  color:            white;
}

#BtnAccept:hover,
#BtnDecline:hover {
  opacity: 0.85;                        /* Leicht abdunkeln beim Hover */
}

/* ── Video-Platzhalter ── */
#VideoPlaceholder {
  display:          flex;               /* Flexbox für Zentrierung */
  flex-direction:   column;             /* Inhalt untereinander */
  justify-content:  center;             /* Vertikal zentriert */
  align-items:      center;             /* Horizontal zentriert */
  width:            560px;               /* Identisch mit Video-Breite */
  height:           315px;              /* Identisch mit Video-Höhe */
  box-sizing:       border-box;         /* ← neu: verhindert Überschreitung der Breite */
  margin:           0 auto;             /* ← neu: zentriert in der ContentBox */
  background-color: rgba(0, 0, 0, 0.7); /* Etwas dunkler für bessere Lesbarkeit */
  border-radius:    0;                  /* ← war: 8px – auf 0 für exakte Übereinstimmung mit iframe */
  color:            white;              /* Weiße Schrift */
  font-family:      Arial, Helvetica, sans-serif;
  text-align:       center;             /* Text zentriert */
  gap:              15px;               /* Abstand zwischen Text und Button */
}

#VideoPlaceholder button {
  padding:          10px 24px;          /* Innenabstand */
  background-color: #ff0000;            /* YouTube-Rot */
  color:            white;              /* Weiße Schrift */
  border:           none;              /* Kein Rahmen */
  border-radius:    6px;                /* Runde Ecken */
  cursor:           pointer;            /* Mauszeiger als Hand */
  font-weight:      bold;               /* Schrift fett */
  transition:       opacity 0.2s;       /* Sanfter Hover-Übergang */
}

#VideoPlaceholder button:hover {
  opacity: 0.85;                        /* Abdunkeln beim Hover */
}

/* ── Video-Wrapper ── */
#VideoWrapper {
  margin: 0 auto;                       /* ← neu: zentriert in der ContentBox */
  width:  560px;                        /* Breite explizit auf Wrapper setzen */
}

#VideoWrapper iframe {
  width:      560px;   /* Muss identisch mit #VideoPlaceholder width sein */
  height:     315px;   /* Muss identisch mit #VideoPlaceholder height sein */
  border:     none;
  display:    block;   /* ← neu: verhindert kleinen Lückenabstand unter dem iframe */
}
/* ── 2x2 Grid für Angebote ── */
#OfferGrid {
  display:               grid;       /* Grid-Layout aktivieren */
  grid-template-columns: 1fr 1fr;    /* Zwei gleichbreite Spalten */
  gap:                   40px;       /* Abstand zwischen den Boxen */
  max-width:             1200px;     /* Maximale Breite des gesamten Grids */
  margin:                0 auto;     /* Grid horizontal zentrieren */
}

/* ── Content Box ── */
#ContentBox {
  background-color: rgba(47, 47, 47, 0.75);
  border-radius:    12px;
  padding:          60px;            /* ← reduziert, damit Boxen im Grid nicht zu groß werden */
  margin:           0;               /* ← entfernt, da Grid den Abstand übernimmt */
  width:            auto;            /* ← war: 1000px — passt sich jetzt der Grid-Spalte an */
  color:            white;
  text-align:       center;
  font-weight:      bold;
  font-family:      Arial, Helvetica, sans-serif;
  line-height:      2.0;
}

#ContentBox h2 {
  font-size: 32px;   /* ← leicht reduziert für Grid-Darstellung */
}
#ContentBox p {
  font-size: 18px;   /* ← leicht reduziert für Grid-Darstellung */
}

.ContentBoxOffer {
  background-color: rgba(47, 47, 47, 0.75);
  border-radius:    12px;
  padding:          60px;            /* ← reduziert, damit Boxen im Grid nicht zu groß werden */
  margin:           0;               /* ← entfernt, da Grid den Abstand übernimmt */
  width:            auto;            /* ← war: 500px — passt sich jetzt der Grid-Spalte an */
  color:            white;
  text-align:       center;
  font-weight:      bold;
  font-family:      Arial, Helvetica, sans-serif;
  line-height:      2.0;
}
.ContentBoxOffer h2 {
  font-size: 32px;
}
.ContentBoxOffer p {
  font-size: 18px;
}
@media (max-width: 800px) {
  #OfferGrid {
    grid-template-columns: 1fr;   /* Auf schmalen Screens: eine Spalte */
  }
}
.ContactBox {
  background-color: rgba(151, 8, 8, 0.75);
  border-radius:    12px;
  padding:          60px;            /* ← reduziert, damit Boxen im Grid nicht zu groß werden */
  margin:           0;               /* ← entfernt, da Grid den Abstand übernimmt */
  width:            auto;            /* ← war: 500px — passt sich jetzt der Grid-Spalte an */
  color:            white;
  text-align:       center;
  font-weight:      bold;
  font-family:      Arial, Helvetica, sans-serif;
  line-height:      2.0;
}
.ContactBox h2 {
  font-size: 32px;
}
.ContactBox p {
  font-size: 18px;
}
.WelcomeBox {
  background-color: rgba(47, 47, 47, 0.75);
  border-radius:    12px;
  padding:          60px;            /* ← reduziert, damit Boxen im Grid nicht zu groß werden */
  margin:           0 auto;               /* ← entfernt, da Grid den Abstand übernimmt */
  width:            34%;            /* ← war: 500px — passt sich jetzt der Grid-Spalte an */
  color:            white;
  text-align:       center;
  font-weight:      bold;
  font-family:      Arial, Helvetica, sans-serif;
  line-height:      2.0;
}
.WelcomeBox h2 {
  font-size: 32px;
}
.WelcomeBox p {
  font-size: 18px;
}
/* ── Datenschutz Box ── */
.DatenschutzBox {
  background-color: rgba(47, 47, 47, 0.75); /* Anthrazit transparent */
  border-radius:    12px;                    /* Runde Ecken */
  padding:          60px;                    /* Innenabstand */
  margin:           40px auto;              /* Außenabstand oben/unten, links/rechts zentriert */
  width:            50%;                     /* 70% Breite – je 15% frei links und rechts */
  color:            white;                   /* Schriftfarbe weiß */
  text-align:       center;                    /* Fließtext linksbündig – besser lesbar für langen Text */
  font-family:      Arial, Helvetica, sans-serif; /* Schriftart */
  line-height:      1.8;                     /* Angenehmer Zeilenabstand für langen Fließtext */
}

.DatenschutzBox h1 {
  font-size:    28px;                        /* Hauptüberschrift */
  text-align:   center;                      /* Titel zentriert */
  margin-bottom: 30px;                       /* Abstand unter dem Titel */
}

.DatenschutzBox h2 {
  font-size:    20px;                        /* Abschnittsüberschriften */
  margin-top:   30px;                        /* Abstand über jeder Überschrift */
  margin-bottom: 10px;                       /* Abstand unter jeder Überschrift */
}

.DatenschutzBox p {
  font-size:    16px;                        /* Fließtextgröße */
  font-weight:  normal;                      /* Normales Gewicht für langen Text */
  margin-bottom: 12px;                       /* Abstand zwischen Absätzen */
}


/* ── Impressum ── */
.ImpressumBox {
  background-color: rgba(47, 47, 47, 0.75); /* Anthrazit transparent */
  border-radius:    12px;                    /* Runde Ecken */
  padding:          60px;                    /* Innenabstand */
  margin:           40px auto;              /* Außenabstand oben/unten, links/rechts zentriert */
  width:            50%;                     /* 70% Breite – je 15% frei links und rechts */
  color:            white;                   /* Schriftfarbe weiß */
  text-align:       center;                    /* Fließtext linksbündig – besser lesbar für langen Text */
  font-family:      Arial, Helvetica, sans-serif; /* Schriftart */
  line-height:      1.8;                     /* Angenehmer Zeilenabstand für langen Fließtext */
}

.ImpressumBox h1 {
  font-size:    28px;                        /* Hauptüberschrift */
  text-align:   center;                      /* Titel zentriert */
  margin-bottom: 30px;                       /* Abstand unter dem Titel */
}

.ImpressumBox h2 {
  font-size:    20px;                        /* Abschnittsüberschriften */
  margin-top:   30px;                        /* Abstand über jeder Überschrift */
  margin-bottom: 10px;                       /* Abstand unter jeder Überschrift */
}

.ImpressumBox p {
  font-size:    16px;                        /* Fließtextgröße */
  font-weight:  normal;                      /* Normales Gewicht für langen Text */
  margin-bottom: 12px;                       /* Abstand zwischen Absätzen */
}
/* ── Hintergrundbild Index ── */
#BackgroundIndex {
  background-image:      url('../pictures/backgrounds/low-voltage-background-index.jpg'); /* Pfad zum Hintergrundbild */
  background-size:       cover;                               /* Bild füllt den gesamten Bereich – wird ggf. zugeschnitten */
  background-position:   center;                              /* Bild wird horizontal und vertikal zentriert */
  background-attachment: fixed;                               /* Bild bleibt beim Scrollen fixiert (Parallax-Effekt) */
  min-height:            100vh;                               /* Mindesthöhe entspricht der vollen Browserfensterhöhe */
  display:               flex;                                /* Flexbox aktivieren um ContentBox zu positionieren */
  justify-content:       center;                              /* ContentBox horizontal zentrieren */
  align-items:           flex-start;                          /* ContentBox am oberen Rand ausrichten */
  padding-top:           40px;                                /* Abstand der ContentBox vom oberen Rand in Pixel */
}
/* ── Hintergrundbild Dates ── */
#BackgroundDates {
  background-image:      url('../pictures/backgrounds/low-voltage-background-dates.jpg'); /* Pfad zum Hintergrundbild */
  background-size:       contain;                             /* Bild vollständig anzeigen ohne Zuschneiden */
  background-position:   center;                              /* Bild horizontal und vertikal zentrieren */
  background-attachment: fixed;                               /* Bild bleibt beim Scrollen fixiert */
  background-repeat:     no-repeat;                           /* Bild wird nicht wiederholt */
  background-color:      black;                             /* Nicht vom Bild abgedeckte Bereiche werden schwarz */
  min-height:            100vh;                               /* Mindesthöhe entspricht der vollen Browserfensterhöhe */
  display:               flex;                                /* Flexbox aktivieren um ContentBox zu positionieren */
  justify-content:       center;                              /* ContentBox horizontal zentrieren */
  align-items:           flex-start;                          /* ContentBox am oberen Rand ausrichten */
  padding-top:           40px;                                /* Abstand der ContentBox vom oberen Rand in Pixel */
}
/* ── Hintergrundbild Media ── */
#BackgroundMedia {
  background-image:      url('../pictures/backgrounds/low-voltage-background-media.jpg'); /* Pfad zum Hintergrundbild */
  background-size:       cover;                               /* Bild füllt den gesamten Bereich – wird ggf. zugeschnitten */
  background-position:   center;                              /* Bild wird horizontal und vertikal zentriert */
  background-attachment: fixed;                               /* Bild bleibt beim Scrollen fixiert (Parallax-Effekt) */
  min-height:            100vh;                               /* Mindesthöhe entspricht der vollen Browserfensterhöhe */
  display:               flex;                                /* Flexbox aktivieren um ContentBox zu positionieren */
  justify-content:       center;                              /* ContentBox horizontal zentrieren */
  align-items:           flex-start;                          /* ContentBox am oberen Rand ausrichten */
  padding-top:           40px;                                /* Abstand der ContentBox vom oberen Rand in Pixel */
}
/* ── Hintergrundbild Members ── */
#BackgroundMembers {
  background-image:      url('../pictures/backgrounds/low-voltage-background-members.jpg'); /* Pfad zum Hintergrundbild der Members-Seite */
  background-size:       cover;                                 /* Bild füllt den gesamten Bereich */
  background-position:   center;                                /* Bild zentrieren */
  background-attachment: fixed;                                 /* Parallax-Effekt */
  min-height:            100vh;                                 /* Mindesthöhe = volle Fensterhöhe */
  padding:               40px;                                  /* Abstand zum Seitenrand */
}
/* ── 2x2 Grid für Members-Seite ── */
#BackgroundMembers main {
  display:               grid;                    /* Grid-Layout aktivieren */
  grid-template-columns: 1fr 1fr;                 /* Zwei gleichbreite Spalten */
  gap:                   40px;                    /* Abstand zwischen den Boxen */
  max-width:             1400px;                  /* Maximale Breite des Grids */
  margin:                0 auto;                  /* Grid horizontal zentrieren */
}
/* ── Hintergrundbild Booking ── */
#BackgroundBooking {
  background-image:      url('../pictures/backgrounds/low-voltage-background-contact.jpg'); /* Pfad zum Hintergrundbild */
  background-size:       cover;                               /* Bild füllt den gesamten Bereich – wird ggf. zugeschnitten */
  background-position:   center;                              /* Bild wird horizontal und vertikal zentriert */
  background-attachment: fixed;                               /* Bild bleibt beim Scrollen fixiert (Parallax-Effekt) */
  min-height:            100vh;                               /* Mindesthöhe entspricht der vollen Browserfensterhöhe */
  display:               flex;                                /* Flexbox aktivieren um ContentBox zu positionieren */
  justify-content:       center;                              /* ContentBox horizontal zentrieren */
  align-items:           flex-start;                          /* ContentBox am oberen Rand ausrichten */
  padding-top:           40px;                                /* Abstand der ContentBox vom oberen Rand in Pixel */
}
/* ── Hintergrundbild TechnicalRider ── */
#BackgroundTechnicalRider {
  background-image:      url('../pictures/backgrounds/low-voltage-background-technical-rider.jpeg'); /* Pfad zum Hintergrundbild */
  background-size:       cover;                               /* Bild füllt den gesamten Bereich – wird ggf. zugeschnitten */
  background-position:   center;                              /* Bild wird horizontal und vertikal zentriert */
  background-attachment: fixed;                               /* Bild bleibt beim Scrollen fixiert (Parallax-Effekt) */
  min-height:            100vh;                               /* Mindesthöhe entspricht der vollen Browserfensterhöhe */
  display:               flex;                                /* Flexbox aktivieren um ContentBox zu positionieren */
  justify-content:       center;                              /* ContentBox horizontal zentrieren */
  align-items:           flex-start;                          /* ContentBox am oberen Rand ausrichten */
  padding-top:           40px;                                /* Abstand der ContentBox vom oberen Rand in Pixel */
}
/* ── Hintergrundbild Impressum ── */
#BackgroundImpressum {
  background-image:      url('../pictures/backgrounds/low-voltage-background-impressum.jpg'); /* Pfad zum Hintergrundbild */
  background-size:       cover;                               /* Bild füllt den gesamten Bereich – wird ggf. zugeschnitten */
  background-position:   center;                              /* Bild wird horizontal und vertikal zentriert */
  background-attachment: fixed;                               /* Bild bleibt beim Scrollen fixiert (Parallax-Effekt) */
  min-height:            100vh;                               /* Mindesthöhe entspricht der vollen Browserfensterhöhe */
  display:               flex;                                /* Flexbox aktivieren um ContentBox zu positionieren */
  justify-content:       center;                              /* ContentBox horizontal zentrieren */
  align-items:           flex-start;                          /* ContentBox am oberen Rand ausrichten */
  padding-top:           40px;                                /* Abstand der ContentBox vom oberen Rand in Pixel */
}
/* ── Hintergrundbild Datenschutz ── */
#BackgroundDatenschutz {
  background-image:      url('../pictures/backgrounds/low-voltage-background-datenschutz.jpeg'); /* Pfad zum Hintergrundbild */
  background-size:       cover;                               /* Bild füllt den gesamten Bereich – wird ggf. zugeschnitten */
  background-position:   center;                              /* Bild wird horizontal und vertikal zentriert */
  background-attachment: fixed;                               /* Bild bleibt beim Scrollen fixiert (Parallax-Effekt) */
  min-height:            100vh;                               /* Mindesthöhe entspricht der vollen Browserfensterhöhe */
  display:               flex;                                /* Flexbox aktivieren um ContentBox zu positionieren */
  justify-content:       center;                              /* ContentBox horizontal zentrieren */
  align-items:           flex-start;                          /* ContentBox am oberen Rand ausrichten */
  padding-top:           40px;                                /* Abstand der ContentBox vom oberen Rand in Pixel */
}