/* Grundlegende Layout-Stile */
@font-face {
  font-family: classic-sans-reg;
  src: url("/fonts/ClassicSansRounded-Roman.otf");
}

@font-face {
  font-family: roboto-reg;
  src: url("/fonts/roboto-regular.ttf");
}

@font-face {
  font-family: roboto-condensed-med;
  src: url("/fonts/RobotoCondensed-Medium.ttf");
}

@font-face {
  font-family: roboto-bold;
  src: url("/fonts/roboto-bold.ttf");
}

@font-face {
  font-family: roboto-med;
  src: url("/fonts/Roboto-Medium.ttf");
}

@font-face {
  font-family: roboto-condensed-bold-italic;
  src: url("/fonts/RobotoCondensed-BoldItalic.ttf");
}

@font-face {
  font-family: roboto-black;
  src: url("/fonts/roboto-black.ttf");
}

@font-face {
  font-family: roboto-condensed-reg;
  src: url("/fonts/robotocondensed-regular.ttf");
}

@font-face {
  font-family: roboto-condensed-bold;
  src: url("/fonts/robotocondensed-bold.ttf");
}

@font-face {
  font-family: roboto-condensed-light;
  src: url("/fonts/RobotoCondensed-Light.ttf");
}

@font-face {
  font-family: roboto-condensed-medium-italic;
  src: url("/fonts/RobotoCondensed-MediumItalic.ttf");
}

@font-face {
  font-family: roboto-condensed-light-italic;
  src: url("/fonts/RobotoCondensed-LightItalic.ttf");
}

@font-face {
  font-family: roboto-bold-italic;
  src: url("/fonts/Roboto-BoldItalic.ttf");
}

@font-face {
  font-family: roboto-light-italic;
  src: url("/fonts/Roboto-LightItalic.ttf");
}

@font-face {
  font-family: roboto-medium-italic;
  src: url("/fonts/Roboto-MediumItalic.ttf");
}

html,
body {
  margin: 0;
  padding: 0;
  color: #5e5e5e;
}

html {
  min-height: 100%;
  position: relative;
  scroll-behavior: smooth;
}

h1 {
  font-family: roboto-condensed-reg;
  color: #5e5e5e;
  font-size: 1.7rem;
  line-height: 2rem;
  background: #e6e6e6;
  padding: 10px;
  display: grid;
}

h2 {
  font-family: roboto-condensed-light;
  color: #5e5e5e;
}

h3 {
  font-family: roboto-condensed-light;
  color: #fff;
  font-size: 1.7rem;
  text-align: left;
  margin: 5px 0;
  line-height: 1.9rem;
}

.img-left {
  float: left;
  padding: 0px 0px 0px 0px;
}

.img-move-left {
  margin-left: -15%;
}

.img-60 {
  width: 60%;
}

.grey p, .grey h3 {
  color: #5e5e5e !important;
}

.framed {
	border: 1px solid #ccc;
	padding: 1rem;
}

.framed-veris {
	border: 1px solid #3d5c3d;
	padding: 1rem !important;
	margin: 1rem;
}

p {
  font-family: roboto-reg;
  color: #5e5e5e;
  font-size: 14px;
  text-align: left;
  line-height: 22px;
}

p.main {
  font-family: roboto-bold;
}

b {
  font-family: roboto-med;
}

.bg-tactical {
  background: #647964 !important;
}

.bg-blaulicht {
  background: #3962a2 !important;
}

.bg-outdoor {
  background: #9fdfff !important;
}

.bg-cf {
  background: #eb5e00 !important;
}

.veris-vision {
  color: #3d5c3d !important;
}

.bg-veris {
  background: #b0d215 !important;
}

.bg-vision {
  background: #eb5e00 !important;
}

.veris-headline {
  color: #3d5c3d;
  background: none;
  text-align: left;
  padding: 0px 0px 0px 20px;
}

.container {
  display: grid;
}

.white {
  color: #fff !important;
}

.item {
  font-family: roboto-condensed-reg;
  text-align: center;
  color: #5e5e5e;
  position: relative;
}

.logo {
  width: 100%;
}

.mini-menu.notvorrat {
  justify-content: center;
}

.cf {
  float: left;
  padding: 0px 10px 0px 0px;
}

.mini-menu {
  width: auto;
  background-color: #00000040;
  padding: 10px;
  display: flex;
  /* Flexbox aktivieren */
  flex-wrap: wrap;
  /* Erlaubt Umbruch nach dem ersten Element */
  gap: 10px;
  /* Abstand zwischen den Buttons */
  justify-content: left;
  /* Zentriert die Buttons horizontal */
  align-items: center;
  /* Vertikal zentrieren */
  color: #fff;
  font-weight: bold;
  text-align: left;
  position: relative;
  z-index: 2;
}

.title {
  font-size: 30px;
  line-height: 32px;
  font-family: roboto-condensed-bold;
  font-weight: normal;
  text-align: left;
}

.notvorrat .title {
  font-size: 3.5em;
  line-height: 1.1em;
}

.mini-menu-btn {
  background-color: #00000052;
  color: white;
  padding: 5px 10px;
  text-align: center;
  cursor: pointer;
  font-weight: normal;
  border: 1px solid #ffffff59;
  width: fit-content;
  font-size: 15px;
  text-decoration: none;
}

.notvorrat {
  height: 8em;
  color: #fff;
  background: none;
}

.notvorrat .mini-menu-btn {
  background-color: #fff0;
}

.notvorrat .mini-menu {
  justify-content: center !important;
}

#dark {
  background: #000000b2;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  display: none;
}

.more-info {
  display: none;
  padding: 15px;
  background-color: #fff;
  position: relative;
  z-index: 3;
}

.img-small {
  width: 45%;
  float: left;
  padding: 20px 20px 20px 0px;
}

.img-link {
  padding: 10px 0px 5px 0px;
}

.fit-100 {
  width: 100%;
}

.more-info p {
  color: #fff;
  text-align: left;
}

p.underline {
  border-bottom: 1px solid #ffffff5e;
  padding-bottom: 10px;
}

.jump-station {
  display: flex;
  border-top: 1px solid #ffffff5e;
  padding-top: 10px;
}

.jump-station a {
  margin-right: 10px;
}

#changelang {
  float: left;
  padding-right: 10px;
  font-size: 17px;
  font-family: roboto-condensed-reg;
  padding-top: 3px;
}

#sport-text {
  color: #fff;
  text-align: left;
  padding-left: 5%;
  width: 40%;
  padding-bottom: 2%;
  padding-top: 2%;
}

#sport-text p {
  color: #fff;
}

#labor {
  background: #0009;
  text-align: left;
  padding: 20px;
  color: #fff;
  position: absolute;
  bottom: 0;
  z-index: 10000;
}

#labor p {
  color: #fff;
}

#taste {
  text-align: left;
  padding: 1.5em;
}

/* Allgemeine Klassen */
.G {
  display: contents;
  box-sizing: border-box;
  /* Stellt sicher, dass Padding nicht die Größe überschreitet */
  position: relative;
}

.V {
  display: flex;
  /* Aktiviert Flexbox */
  justify-content: center;
  /* Zentriert horizontal */
  align-items: center;
  /* Zentriert vertikal */
  box-sizing: border-box;
  /* Stellt sicher, dass Padding nicht die Größe überschreitet */
  position: relative;
  padding: 1em;
}

.V img {
  max-width: 100%;
  /* Verhindert Überlauf */
  max-height: 100%;
  /* Verhindert Überlauf */
}

.R {
  display: flex;
  /* Aktiviert Flexbox */
  justify-content: center;
  /* Zentriert horizontal */
  align-items: center;
  /* Zentriert vertikal */
  padding: 1.1em;
  /* Abstand von 15% zu allen Seiten */
  box-sizing: border-box;
  /* Stellt sicher, dass Padding nicht die Größe überschreitet */
}

.R img {
  max-width: 100%;
  /* Verhindert Überlauf */
  max-height: 100%;
  /* Verhindert Überlauf */
}

/* Hintergrundfarben */
.C {
  background: #ffffff;
  display: flex;
}

/* Blau */
.G {
  background: #ffffff;
  flex: 0;
}

/* Grün */
.V {
  background: #ffffff;
  flex: 3;
}

/* Lila */
.R {
  background: #eb5e00;
  flex: 5;
}

/* Grün */
.PT {
  background: #ffffff;
}

/* Grün */
.D {
  background-image: url('/img/bg-notvorrat.jpg');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  width: 100%;
  height: 50em;
  position: relative;
}

span.big-headline {
  color: #fff;
  font-size: 5em;
  font-family: roboto-condensed-bold;
  background: #eb5e00;
  display: block;
  padding: 0.4em;
  line-height: 1em;
}

#footer {
  color: #fff;
  font-family: roboto-condensed-reg;
  background: #eb5e00;
  display: block;
  padding: 2em;
  text-align: left;
}

.footer {
  background: none;
}

.footer-info {
  color: #fff;
  background: #eb5e00;
}

span.big-headline.veris {
  font-size: 3em;
}

.mini-menu.footer {
  padding-left: 0px;
}

.datenschutz {
  background: #fff !important;
}

#social-jump {
  font-size: 2rem;
}

#social-jump a {
  font-size: 2rem;
  text-decoration: none;
  color: #fff;
}

.M {
  background-image: url('/img/bg-convar-feldkueche.jpg');
  /* Pfad zum Bild */
  background-size: cover;
  /* Bild passt sich an, ohne Verzerrung */
  background-position: center;
  /* Bild bleibt zentriert */
  background-repeat: no-repeat;
  /* Kein Wiederholen des Bildes */
  width: 100%;
  /* Stellt sicher, dass es die gesamte Breite füllt */
  height: 100%;
}

.N {
  background: #e67e22;
}

/* Orange */
.A {
  /* Pfad zum Bild */
  background-size: cover;
  /* Bild passt sich an, ohne Verzerrung */
  background-position: center;
  /* Bild bleibt zentriert */
  background-repeat: no-repeat;
  /* Kein Wiederholen des Bildes */
  width: 100%;
  /* Stellt sicher, dass es die gesamte Breite füllt */
  height: 100%;
}

.B {
  background: #ffffff;
  padding: 1.5em;
  text-align: left;
  position: relative;
}

.language-selector {
	background: #f60;
	padding: 15px;
	display: block;
	color: #fff;
}

.language-selector img {
  cursor: pointer;
}

.T {
  background-image: url('/img/bg-convar-7.jpg');
  /* Pfad zum Bild */
  background-size: cover;
  /* Bild passt sich an, ohne Verzerrung */
  background-position: center;
  /* Bild bleibt zentriert */
  background-repeat: no-repeat;
  /* Kein Wiederholen des Bildes */
  width: 100%;
  /* Stellt sicher, dass es die gesamte Breite füllt */
  height: 100%;
}

.X {
  background-image: url('/img/bg-gemuese.jpg');
  /* Pfad zum Bild */
  background-size: cover;
  /* Bild passt sich an, ohne Verzerrung */
  background-position: center;
  /* Bild bleibt zentriert */
  background-repeat: no-repeat;
  /* Kein Wiederholen des Bildes */
  text-align: left;
}

.pic-headline {
  color: #fff;
  font-size: 3.5em;
  line-height: 1.1em;
  text-align: left;
  font-family: revert;
  display: inline-grid;
  font-family: roboto-condensed-bold;
  margin-top: 1em;
}

#notvorrat-text {
  background: #fff;
  width: auto;
  margin-left: 30%;
  padding: 1.5em;
}

.Y {
  background-image: url('/img/bg-veris.jpg');
  /* Pfad zum Bild */
  background-size: cover;
  /* Bild passt sich an, ohne Verzerrung */
  background-position: center;
  /* Bild bleibt zentriert */
  background-repeat: no-repeat;
  /* Kein Wiederholen des Bildes */
  width: 100%;
  /* Stellt sicher, dass es die gesamte Breite füllt */
}

.Z {
  background: #ffed00;
}

.Z p {
  padding: 0px 20px 0px 20px;
  color: #3d5c3d !important;
}

.S {
  background-image: url('/img/bg-convar-sports.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  background-position: top center;
}

.E {
  background-image: url('/img/bg-entwicklung.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.P {
  /* background-image: url('/img/bg-produktion.jpg');  Pfad zum Bild */
  background-size: cover;
  /* Bild passt sich an, ohne Verzerrung */
  background-position: center;
  /* Bild bleibt zentriert */
  background-repeat: no-repeat;
  /* Kein Wiederholen des Bildes */
  width: 100%;
  /* Stellt sicher, dass es die gesamte Breite füllt */
}

/* Grid-Layout für große Bildschirme (Desktop) */
@media (min-width: 769px) {
  .container {
    grid-template-columns: 55% 30% 15%;
    grid-template-rows: auto auto;
    grid-template-areas:
      "C C C"
      "M N T"
      "D D D"
      "X Y Z"
      "S S S"
      "E P P";
  }

  #m-i-g {
    display: none;
  }

  .C {
    grid-area: C;
    display: flex;
  }

  /* C nimmt die volle Breite ein */
  .G {
    flex: 0;
  }

  /* 2/3 von C */
  .V {
    flex: 3;
  }

  /* 1/3 von C */
  .R {
    flex: 5;
  }

  /* 2/3 von C */
  .T {
    grid-area: T;
  }

  .M {
    grid-area: M;
  }

  .N {
    grid-area: N;
    display: grid;
    grid-template-rows: auto auto;
  }

  .A {
    grid-row: 1;
    height: 25em;
  }

  .B {
    grid-row: 2;
  }

  .D {
    grid-area: D;
  }

  .X {
    grid-area: X;
  }

  .Y {
    grid-area: Y;
  }

  .Z {
    grid-area: Z;
  }

  .S {
    grid-area: S;
  }

  .E {
    grid-area: E;
  }

  .P {
    grid-area: P;
    grid-template-areas:
      "P"
      "P"
      "PT";
  }

  .PT {
    grid-area: PT;
  }
}

/* Grid-Layout für kleine Bildschirme (Mobile) */
@media (max-width: 768px) {
  .more-info img {
    width: 100%;
  }

  #m-i-g {
    display: block;
  }

  #m-i-g img {
    width: 50%;
  }

  .img-link {
    width: 100%;
  }

  .img-small {
    width: 100%;
    float: none;
  }

  .img-60 {
    width: 90%;
  }

  #sport-text {
    width: 90%;
    background: #00000052;
    margin-left: 2%;
  }

  .img-move-left {
    margin-left: 0;
  }

  .container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "C"
      "B"
      "M"
      "T"
      "A"
      "D"
      "X"
      "Y"
      "Z"
      "S"
      "E"
      "PT"
      "P";
  }

  span.big-headline {
    font-size: 2em;
  }

  span.big-headline.veris {
    font-size: 2em;
  }

  .pic-headline {
    font-size: 1.8em;
  }

  .C {
    grid-area: C;
    display: flex;
    flex-direction: column;
  }

  /* V & R untereinander */
  .V,
  .R,
  .G {
    width: 100%;
  }

  /* Volle Breite in Mobile */
  .G {
    display: none;
  }

  .B {
    grid-area: B;
  }

  .M {
    grid-area: M;
  }

  .T {
    grid-area: T;
  }

  .Y {
    grid-area: Y;
    height: 300px;
  }

  .A {
    grid-area: A;
  }

  .D {
    grid-area: D;
    height: 20em;
  }

  .N {
    display: contents;
  }

  .E {
    height: 60rem;
  }

  #social-jump {
	font-size: 1.5rem;
  }

  /* Versteckt die N-Spalte in Mobile */
  .P {
    display: flex;
    width: fit-content;
  }

  .mini-menu {
    display: grid;
  }

  .mini-menu.bg-veris {
    display: flex;
  }

  .mini-menu.bg-cf {
    display: flex;
  }

  #sport-text {
	padding: 20px;
  }

  #notvorrat-text {
    margin-left: 0;
  }
}