@charset "UTF-8";
body {
	font-family: "Nunito", sans-serif;
	background-color: #000;
	font-size: 22px;
	line-height: 32px;
}

/* Konsistente Box-Sizing-Basis */
*, *::before, *::after { box-sizing: border-box; }

/* Fokus sichtbar (WCAG) */
a:focus-visible { outline: 2px solid #3AADE9; outline-offset: 2px; }

/* von ChatGPT - wegen H1-Tag - setzt oben schwarzen Rand auf 0 */
.hide-visually {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

@font-face{
  font-family:'Nunito';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('../fonts/nunito-v25-latin-300.woff2') format('woff2'),
      url('../fonts/nunito-v25-latin-300.woff') format('woff');
}
@font-face{
  font-family:'Nunito';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/nunito-v25-latin-700.woff2') format('woff2'),
      url('../fonts/nunito-v25-latin-700.woff') format('woff');
}
@font-face{
  font-family:'Nunito';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('../fonts/nunito-v25-latin-800.woff2') format('woff2'),
      url('../fonts/nunito-v25-latin-800.woff') format('woff');
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#nicolas h4 {
    font-weight: 300;
    background-color: #FFFFFF;
    text-align: justify;
    padding: 40px;
    margin-top: 0px;
    margin-bottom: 0px;
}

/* WICHTIG: leistung jetzt als Klasse */
.leistung h4  {
    font-weight: 300;
    background-color: #ECF8FF;
    text-align: justify;
    padding: 40px;
    margin-top: 0px;
    margin-bottom: 0px;
}
#leistungblau h4  {
    font-weight: 300;
    background-color: #f0cc5e;
    text-align: justify;
    padding: 40px;
    margin-top: 0px;
    margin-bottom: 0px;
}
#leistungrot h4  {
    font-weight: 300;
    background-color: #40cae3;
    text-align: justify;
    padding: 40px;
    margin-top: 0px;
    margin-bottom: 0px;
}
#magic h5, #sieben h5, #top1500 h5   {
    font-weight: 300;
    background-color: #3AADE9;
    text-align: center;
    padding: 40px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 0px;
}
.h2_textfett {
    font-weight: 700;
    color: #000;
}
.h5_textfett {
	font-weight: 700;
	color: #000;	
}
#nicolas a {  /* von Nic */
	font-weight: 300;
	color: #000;
}
#nicolas a:hover {  /* von Nic */
	font-weight: 300;
	color: #3AADE9;
}

/* WICHTIG: Links in leistung jetzt über Klasse */
.leistung a {  /* von Nic */
	color: #000;
	text-decoration: none;
}
.leistung a:hover {  /* von Nic */
	color: #3AADE9;
}

#leistungrot a {  /* von Nic */
	color: #000;
	text-decoration: none;
}
#leistungrot a:hover {  /* von Nic */
	color: #ffffff;
}
#magic a {  /* von Nic */
	color: #000;
	text-decoration: none;
}
#magic a:hover {  /* von Nic */
	color: #fff;
}
#sieben a {  /* von Nic */
	color: #000;
	text-decoration: none;
}
#sieben a:hover {  /* von Nic */
	color: #fff;
}
#top1500 a {  /* von Nic */
	color: #000;
	text-decoration: none;
}
#top1500 a:hover {  /* von Nic */
	color: #fff;
}

/* --- Mobiler Abstand unter drittem blauen Kasten --- */
@media (max-width: 900px) {
  #top1500 h5 {
    margin-bottom: 4px; /* Abstand zwischen letztem blauen Block und folgendem Bild */
  }
}

/* === von ChatGPT - UNIVERSAL: saubere Bilddarstellung + keine Baseline-Lücke === */
img {
  display: block;        /* eliminiert die kleine Lücke unter inline-Bildern */
  max-width: 100%;       /* Bild nie breiter als sein Container */
  height: auto;          /* hält Seitenverhältnis */
  border: 0;
  margin: 0;
  padding: 0;
}

/* === SPEZIFISCH: deine großen Bildblöcke === */
.break_image {
  margin: 0;
  padding: 0;
}
.break_image img {
  width: 100%;
  height: auto;
  display: block;
}

/* 0) Browser-Default-Abstand killen (kann sonst „Streifen“ erzeugen) */
html, body { margin: 0; padding: 0; }

/* 1) Centering robust machen */
.gridContainer {
  max-width: 1200px;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-inline: 16px;
  float: none;              /* neutralisiert alte float-basierte Grids */
  display: block;
}

/* 2) Auf kleinen Screens nichts „weirdes“ zulassen */
@media (max-width: 900px) {
  .gridContainer {
    width: 100% !important;      /* alte %-Breiten überstimmen */
    padding-inline: 16px;        /* Innenabstand behalten */
  }
}

/* 3) Breiten-Überläufe verhindern, die nach „links schieben“ */
iframe, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* === Randloses Layout auf Smartphones === */
@media (max-width: 900px) {
  .gridContainer {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* === gegen zu großen schwarzen Abstand unter blauem Kasten fuer Top 1500  === */
@media (max-width: 900px) {
  #top1500 { margin-bottom: 4px !important; }
  #top1500 h5 { margin-bottom: 0 !important; }
  .break_image { margin-top: 0 !important; }
}