@charset "UTF-8";

/* open-sans-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v40-latin-300.woff2') format('woff2'),
       url('../fonts/open-sans-v40-latin-300.ttf') format('truetype');
}

/* open-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2'),
       url('../fonts/open-sans-v40-latin-regular.ttf') format('truetype');
}

/* open-sans-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/open-sans-v40-latin-500.woff2') format('woff2'),
       url('../fonts/open-sans-v40-latin-500.ttf') format('truetype');
}

/* open-sans-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v40-latin-600.woff2') format('woff2'),
       url('../fonts/open-sans-v40-latin-600.ttf') format('truetype');
}

/* open-sans-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v40-latin-700.woff2') format('woff2'),
       url('../fonts/open-sans-v40-latin-700.ttf') format('truetype');
}

/* open-sans-800 - latin */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/open-sans-v40-latin-800.woff2') format('woff2'),
       url('../fonts/open-sans-v40-latin-800.ttf') format('truetype');
}

/* --------------------------------------------------
        Allgemeine Grundeinstellungen                              
 ----------------------------------------------------*/

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration:none;
    box-sizing: inherit;
}


body {
    color: #1d2731;
    /* Ivory Black*/
    background-color: #FFFFFF;
    /* Neutral */
    font-family:		OpenSans, sans-serif;

    margin: 0;
}

ul {
    padding: 0;
}

.grid {
    display: grid;
    grid-template-rows: 100px auto auto auto auto;
    grid-template-columns: repeat(10, 10%);
}


/*-----------------------------------------------------------------------------------------------------------
/*-----------------------------------------------------------------------------------------------------------
Kleine Auflösunegen
-------------------------------------------------------------------- */
h1 {
  font-size: 1.5rem;
}
.pfliesstext {
  text-align: left;
}

/* Header */
.header {
    width:100%;
    grid-column: 1 / 11;
    grid-row: 1 / 2;
    text-align: left;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    color: #efefef;
   /* border-bottom: 1px solid #efefef;*/
    height: 80px; /* Feste Höhe für Header */
    z-index: 1000; /* Damit der Header immer oben bleibt */
    overflow: hidden; /* Verhindert Scrollen im Header */
    background-color: #ffffff;
}

/* Header-Inhalt */
.header-content {
    display: flex;
    align-items: center;
    height: 65px;
    background-image: url('../images/allgemein/hintergrund-01.svg');
    background-repeat: repeat;
    background-size: inherit; /* Bild proportional anpassen */
    background-color: #ffffff; /* Hintergrundfarbe, um Inhalt darunter zu überdecken */
  }
  
  /* Logo-Bereich */
  .logo {
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .logo a {
  display: block; /* oder inline-block, je nach Bedarf */
  line-height: 0; /* verhindert zusätzliches Padding durch Zeilenhöhe */
  }

  .logo img {
  display: block; /* entfernt untere Leerzeile durch img als Inline-Element */
  }

  
  /* Kontaktbereich */
  .contact {
    flex-grow: 1; /* Kontaktbereich füllt restlichen Platz */
    /*vertical-align: middle; /* Vertikal zentrieren */

    margin-top: -15px; /* Feinabstimmung (falls nötig) */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-right: 1px;
    
  }

  .phone-link {
    font-size: 18px; /* Schriftgröße anpassen */
    color: #FFF; /* Textfarbe */
    font-weight: bold;
    text-decoration: none; /* Keine Unterstreichung */
    display: inline-block;
    padding: 5px;
    background-color: transparent; /* Optional, falls du einen Hintergrund möchtest */
    border-radius: 0Spx; /* Optionale abgerundete Ecken */
  }
  
  .phone-link:hover {
    color: #d0e6f0; /* Farbe ändern bei Hover */
    font-weight: 900;
  }

  /* Laufschrift */
 .scrolling-text {
    background-color: #2963B5; /* Blau für die gesamte Breite */
    color: white;
    overflow: hidden; /* Überschuss verstecken */
    white-space: nowrap; /* Alles in einer Zeile */
  }
  
  .scrolling-text div {
    display: inline-block;
    animation: scroll-left 100s linear infinite; /* Laufschrift animieren */
    margin: 0; /* Keine weißen Lücken */
    padding: 0;
  }
  
  @keyframes scroll-left {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
  }

/* Sprach-Menu */

.navlang {
    position: fixed; /* Fixiert an einer Position */
    top: 80px; /* Abstand vom oberen Rand */
    left: 0; /* Abstand vom linken Rand */
    width: 100%; /* Nimmt die gesamte Breite ein */
    z-index: 1000; /* Priorität über anderen Elementen */
    background-color: #ffffff; /* Hintergrundfarbe, um Inhalt darunter zu überdecken */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Schatten für Abhebung */
    overflow: hidden; /* Kein Scrollen innerhalb der Navigation */
    color: #555555;
    grid-column: 1 / 11;
    grid-row: 2 / 3;
    text-align: left;
    width:100%;
    padding-left: 1rem;
    padding-top: 0.3rem; /* Reduziere den oberen Abstand */
    padding-bottom: 0.3rem; /* Reduziere den unteren Abstand */
    font-size: 0.5rem; /* Kleinere Schriftgröße */
}

.navlang ul {
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    display: flex; /* Flexbox anstelle von Inline-Block */
    justify-content: flex-start; /* Links ausrichten */
    list-style: none;
    align-items: center; /* Vertikale Ausrichtung */
    flex-direction: row;  
    justify-content: left; /* Links ausrichten */
   }

  .navlang ul br {
    display: none;
}

.navlang li {
    color: #555555;
    list-style: none;
    margin-left: 0;
    padding: 0 8px; /* Abstand zwischen den Listeneinträgen */
    /*border-bottom: 1px solid #e2e2e2;*/
    display: inline-block;
}

.navlang li br {
  display: none;
}

.navlang li a {
  color: #555555; /* Textfarbe */
  font-size: 0.9rem; /* Kleinere Schriftgröße */
  line-height: 24px;
  font-weight: 400;
  padding: 6px 8px; /* Innenabstand */
  border-radius: 4px; /* Abgerundete Ecken */
  text-decoration: none; /* Keine Unterstreichung */
  display: inline; /* Nur der Text wird als Block behandelt, der Hintergrund wird nur für den Text gesetzt */
  transition: background-color 0.3s, color 0.3s; /* Sanfter Übergang für den Hover-Effekt */

}
/* Optional: Trennzeichen zwischen den Listenelementen */
.navlang li:not(:last-child):after {
  content: '|';
  margin-left: 10px; /* Etwas Abstand zwischen Trennzeichen und Text */
  display: inline-block; /* Stellen sicher, dass Trennzeichen nebeneinander bleiben */

}

.navlang ul a:link {
    text-decoration: none;
}

.navlang ul a:link,
.navlanggul a:visited {
    color: #555555;
    /* white*/
}

.navlang ul a:hover,
.navlang ul a:focus,
.navlang ul a:active {
 
    background-color: #000; /* Schwarzer Hintergrund */
    color: #efefef; /* Helle Schriftfarbe */
    padding: 6px 8px; /* Padding bleibt gleich, der Hintergrund um den Text wird schmaler */

}

.navlang active {
    color: #000;
    /* Black */
    background-color: #fff;
    /* White */
}

.navh {
    width: 100%;
    height: auto;

    text-align: left;
    color: #555555;
    grid-column: 1 / 11;
    grid-row: 2 / 4;
}

.navh ul {
    background-color: #ffffff;
    /* Watermelon */
    /*margin: 0; */
    display: none; /*hide the menu on mobile */

} 

.navh li {
    list-style: none;
    margin-left: 0;
    border-bottom: px solid #e2e2e2;
   
}

.navh li:first-child {
  border-top: 1px solid #e2e2e2; /* Füge border-top nur beim ersten Element hinzu */
}

/* hamburger */
.checkbox {
    display: none;
  }
  
  .button {
    position: relative;
    background-color: white;
    height: 2rem;
    width: 2rem;
    border-radius: 0; /*border-radius: 50%;*/
    border-radius: 5px; /* abgerundete Ecken */
    border: 1px solid gray; /* Rahmen */
    position: fixed;
    top:12vh; 
    right: 6vw; 
    z-index: 2000;
    box-shadow: 0.1 0rem 0rem black;
    text-align: center; 
    cursor: pointer;
  }
  
  .background {
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
    position: fixed;
    top: 10vh; 
    right: 3vw; 
    background-image: radial-gradient(white, rgba(255, 255, 255, 0));
    z-index: 1000;
    transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
  }
  
  .nav {
    height: 100vh;
    position: fixed;
    top: 0;
    right: -60vw;
    z-index: 1500;
    opacity: 0;
    width: 0;
    transition: all 0.8s;
  }
  
  .list {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    list-style: none;
    text-align: center;
    width: 100%;
  }
  
  .item {
    margin: 1rem;
    font-size: 36px;
  }
  
  .link:link,
  .link:visited {
    display: inline-block;
    font-size: 3rem;
    font-weight: 300;
    padding: 1rem 2rem;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    background-image: linear-gradient(
      120deg,
      transparent 0%,
      transparent 50%,
      white 50%
    );
    background-size: 220%;
    transition: all 0.4s;
  }
  
  .link:hover,
  .link:active {
    color: lightgreen;
    cursor: pointer;
  }
  
  /* functionality */
  .checkbox:checked ~ .background {
    transform: scale(80);
  }
  .checkbox:checked ~ .navh ul {
    display: block; /* Menü sichtbar machen */
    position: absolute; /* Optional: Layout-Anpassungen */
    top: 10vh; /* Optional */
    right: 0; /* Optional */
    background-color: #fff; /* Optional: Hintergrundfarbe */
    z-index: 1500; /* Optional: Deckkraft */

    display: flex; /* Flexbox aktivieren */
    flex-direction: column; /* Vertikale Ausrichtung */
    align-items: center; /* Horizontal zentrieren */
    justify-content: center; /* Optional: Vertikal zentrieren */
    padding: 1rem 0; /* Abstand innen hinzufügen */
    margin: 0; /* Außenabstand entfernen */
    list-style: none; /* Keine Punkte oder Zahlen */
    height: auto; /* Höhe automatisch anpassen */

    opacity: 1;
    width: 100%;
    right: 0;
  }
  
  /*  */
  /* styling hamb ICON */
  .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .icon,
  .icon::before,
  .icon::after {
    width: 1.5rem;
    height: 2px;
    background-color: gray;
    display: inline-block;
  }
  
  .icon::before,
  .icon::after {
    content: "";
    position: absolute;
    left: 0;
    transition: all 0.2s;
  }
  
  .icon::before {
    top: -0.6rem;
  }
  .icon::after {
    top: 0.6rem;
  }
  
  .button:hover icon::before {
    top: -1rem;
  }
  .button:hover icon::after {
    top: 1rem;
  }
  
  .checkbox:checked + .button .icon {
    background-color: transparent;
  }
  
  .checkbox:checked + .button .icon::before {
    top: 0;
    transform: rotate(135deg);
  }
  .checkbox:checked + .button .icon::after {
    top: 0;
    transform: rotate(-135deg);
  }




/* Content */ 

.content {
    grid-column: 1 / 11;
    grid-row: 4 / 5;
    padding: 5rem 1rem 0 2rem;
}

/* Produkte übersicht */
.container {
    display: grid;
    flex-wrap: wrap;
    gap: 15px; /* Kleinere Lücke zwischen den Containern */
    padding: 5px; /* Weniger Padding */
    justify-content: center;
}
.container {
    grid-template-areas: 
        "order1"
        "order3"
        "order5"
        "order7"
        "order9"
        "order2"
        "order4"
        "order6"
        "order8"
        "order10";
}

.product-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1px; /* Weniger Padding */
    max-width: 400px; /* Reduzierte maximale Breite */
    min-width: 355px; /* Mindestbreite hinzugefügt */
    flex: 1 1 calc(50% - 15px); /* Flex-Layout optimiert */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
    min-height: 120px; /* Minimale Höhe für gleichbleibende Containerhöhe */
    margin: 2px;

}
      /* Zuordnung der Bereiche */
      .order1 { grid-area: order1; }
      .order2 { grid-area: order2; }
      .order3 { grid-area: order3; }
      .order4 { grid-area: order4; }
      .order5 { grid-area: order5; }
      .order6 { grid-area: order6; }
      .order7 { grid-area: order7; }
      .order8 { grid-area: order8; }
      .order9 { grid-area: order9; }
      .order10 { grid-area: order10; }

.product-card:hover {
    border: 1px #A6C0D0 solid; border-radius: 8px; background-image: url("../images/allgemein/quer.gif");
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.product-image {
    text-align: center;
    flex: 0 0 95px; /* Kleinere Bildbreite */
    margin-left: 1px;
}
.product-image img {
    width: 100%;
    max-width: 100px; /* Kleinere maximale Bildgröße */

}
.product-info {
    flex: 1;
    margin-left: 1px; /* Weniger Abstand */
    font-size: 14px; /* Kleinere Schrift */
    padding-left: 2px;
}
.product-icon {
    text-align: center;
    flex: 0 0 35px; /* Kleinere Breite für das Symbol */
    margin-right: 1px;
}
.product-icon img {
    width: 20px; /* Kleinere Symbolgröße */
    margin-bottom: 2px; /* Weniger Abstand */
}
.product-kat b {
    font-size: 20px; /* Kleinere Zahl */
    color: #2C6BA5; 
    font-weight: 900;
}
.product-kat-fr b {
      font-size: 20px; /* Kleinere Zahl */
      color: #880000; 
      font-weight: 900;
}
.product-description {
    font-size: calc(16px + (28 - 16) * ((100vw - 320px) / (1600 - 320)));
    /*font-size: 12px; /* Kleinere Schriftgröße */
}
.product-title {
    font-size: 14px; /* Kleinere Schriftgröße */
    font-weight: bold;
    color: #00A000;
}
.certification-icons img {
    margin-right: 2px; /* Weniger Abstand zwischen den Icons */
    width: 70px;
}
.certification-icons2 img {
    margin-right: 2px; /* Weniger Abstand zwischen den Icons */
    width: 20px;
    display: inline;
}


.checkbox {
    display: none;
  }

/* Aside - Adresse */

.aside {
    grid-column: 1 / 11;
    grid-row: 5 / 6;
    /* border-top: 1px solid #a9a9a9; */
    padding: 0 1rem 0 2rem;
    justify-self: center;
  }
    

/* Footer */

.footer {
    grid-column: 1 / 11;
    grid-row: 6 / 7;
    background-color: #ffffff;
    font-size: 7px;
    /* Carbon */
    color: #000000;
    /* Neutral */
    padding: 1em;
    text-align: center;
    /* border-top: 1px solid #efefef; */
}

/* Warenanlieferung */

  /* Warenlieferung */
 
.delivery-times {
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 20px;
}

.contact-info {
  display: flex;
  flex-wrap: wrap;
  gap: 5px; /* Abstand zwischen den Feldern */
  margin-top: 30px;
}

.contact-item {
  flex: 1 1 100%;  /* Standardmäßig 100% der Breite auf kleinen Bildschirmen */
  margin-bottom: 5px;
}

.contact-item p,
.contact-item a {
  font-size: 1rem;
  color: #333;
}

.contact-item a {
  color: #295A9C;
  text-decoration: none;
}

/* Download Dokumente Definition */
.dwld-dev {
  display: flex;                   /* Flexbox-Layout aktivieren */
  justify-content: center;          /* Zentriert die Items horizontal */
  /*  align-items: center;             Zentriert die Items vertikal */
  gap: 20px;                        /* Abstand zwischen den Items */
  flex-wrap: wrap;                  /* Erlaubt das Umbrechen der Items bei zu wenig Platz */
  padding: 10px;                    /* Padding für den Container */
  width: 100%;                      /* Sicherstellen, dass der Container die volle Breite einnimmt */
  height: 100%;                     /* Sicherstellen, dass der Container die volle Höhe einnimmt */
}

.dwld-item {
  text-align: center;              /* Text in jedem Element zentrieren */
  align-items: center;              /* Bild und Text horizontal zentrieren */
  padding: 10px;                   /* Padding für die Items */
  flex: 0 0 140px;                 /* Flex-Eigenschaft für die Breite der Items */
  box-sizing: border-box;          /* Verhindert, dass Padding die Gesamtbreite beeinflusst */
  font-size: 14px;
  display: flex;                    /* Flexbox für die Elemente im `dwld-item` */
  flex-direction: column;           /* Bilder und Text untereinander anordnen */

}

.dwld-picture {
  text-align: center; 
  display: block;
  width: 140px;                    /* Bildgröße */
  height: auto;                    /* Automatische Höhe */
  border-radius: 8px;              /* Abgerundete Ecken */
  transition: box-shadow 0.3s ease; /* Sanfter Übergang für den Hover-Effekt */
  position: relative;              /* Position für das Hinzufügen von Schatten */
}


a.dwld-picture {
  text-align: center; 
  display: block;                  /* Das Bild als Blockelement anzeigen */
  width: 140px;                    /* Bildgröße */
  height: auto;                    /* Automatische Höhe */
  border: 1px solid #FFFFFF;       /* Weißer Rand um das Bild */
  color: #333333;                  /* Textfarbe */
  text-decoration: none;           /* Keine Unterstreichung des Links */
  border-radius: 8px;              /* Abgerundete Ecken */
  padding: 10px;                   /* Innenabstand */
  background-position: center;     /* Hintergrundbild zentrieren */
  background-size: repeat;          /* Hintergrundbild auf Containergröße skalieren */
  transition: border-color 0.3s, background-image 0.3s;  /* Sanfter Übergang für Rand und Hintergrund */
}

/* Hover-Effekt für den Link */
a.dwld-picture:hover {
  border: 1px solid #B6D0E0;        /* Neuer Rand bei Hover */
  background-image: url("../images/allgemein/quer.gif"); /* Hintergrundbild beim Hover */
}

/* Stil für die Bilder */
a.dwld-picture img {
   border: none;                     /* Kein zusätzlicher Rand um das Bild */
  display: block;                   /* Verhindert einen kleinen Abstand unter dem Bild */
  width: 100%;                      /* Bild auf Container-Breite anpassen */
  height: auto;                     /* Bildhöhe automatisch anpassen */
}
/*Links Seite */
.linkinfo-text {
  margin-bottom: 20px;
}

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.link-item {
  width: 30%; /* Standard: 3 Elemente nebeneinander */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}

.link-item img {
  max-width: 100%;
  height: auto;
}

.linkdisclaimer {
  margin-top: 20px;
  font-family: OpenSans, sans-serif;
  color: #880000;	
  font-size: 10px;	
  font-weight: 300;
  text-align: center;
}

.isoimage {
  display: flex;
  flex-direction: column; 
  justify-content: center;
  align-items: center;
}

.isoimage img {
  width: 160px;
  height: auto;
  display: block;
}



/*-----------------------------------------------------------------------------------------------------------
/*-----------------------------------------------------------------------------------------------------------
/*-----------------------------------------------------------------------------------------------------------
    Tablet ab 768 Pixel                         
      768px / 16px/em = 48em
      + 3 Spalten
        - Header oben
        - Navigation, Hauptinhalt und Seitenleisten nebeneinander
        - Fußleiste unten		
 ------------------------------------------------------------------- */

@media screen and (min-width: 48em) {
  h1 {
    font-size: 2rem;
}
/* Header */ 

  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; /* Feste Höhe für Header */
    z-index: 1000; /* Damit der Header immer oben bleibt */
    overflow: hidden; /* Verhindert Scrollen im Header */
    background-color: #ffffff;
  }
  .contact {
    flex-grow: 1; /* Kontaktbereich füllt restlichen Platz */
    vertical-align: middle; /* Vertikal zentrieren */
  }

  /* hamburger */
.checkbox {
  display: none;
}

.button {
  position: relative;
  background-color: white;
  height: 2rem;
  width: 2rem;
  border-radius: 0; /*border-radius: 50%;*/
  border-radius: 5px; /* abgerundete Ecken */
  border: 1px solid gray; /* Rahmen */
  position: fixed;
  top:9vh; 
  right: 10vw; 
  z-index: 2000;
  box-shadow: 0.1 0rem 0rem black;
  text-align: center; 
  cursor: pointer;
}
 
    .container {
      grid-template-areas: 
        "order1 order2"
        "order3 order4"
        "order5 order6"
        "order7 order8"
        "order9 order10";
   }

}

/*-----------------------------------------------------------------------------------------------------------
/*-----------------------------------------------------------------------------------------------------------
/*-----------------------------------------------------------------------------------------------------------
/*-----------------------------------------------------------------------------------------------------------
    Bildschirme ab 1024 Pixel                         
      1024px / 16px/em = 64em
      + 3 Spalten
        - Header oben
        - Navigation, Hauptinhalt und Seitenleisten nebeneinander
        - Fußleiste unten		
 ------------------------------------------------------------------- */

 @media screen and (min-width: 64em) {

  h1 {
    font-size: 2rem;
}
 
  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; /* Feste Höhe für Header */
    z-index: 1000; /* Damit der Header immer oben bleibt */
    overflow: hidden; /* Verhindert Scrollen im Header */
    background-color: #ffffff;
  }
  .contact {
    flex-grow: 1; /* Kontaktbereich füllt restlichen Platz */
    vertical-align: middle; /* Vertikal zentrieren */
  }

  .content {
    grid-column: 3 / 11;
    grid-row: 2 / 6;
    padding: 1em 1.5em;
    position: static; /* Standardposition */
    overflow: hidden; /* Verhindert das Scrollen */
  }
    
  .navlang {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    padding-left: 1rem;
    display: block;
    position: static; /* Standardposition */
    top: auto;
    left: auto;
    width: 100%; /* Nimmt die gesamte Breite ein */
    z-index: auto;
    background-color: #ffffff;
    box-shadow: none;
    overflow: hidden; /* Verhindert das Scrollen */
    list-style: none;
    flex-direction: column;  
    justify-content: left; /* Links ausrichten */
    padding-left: 1rem;
    padding-top: 0.2rem; /* Reduziere den oberen Abstand */
    padding-bottom: 0.2rem; /* Reduziere den unteren Abstand */
    font-size: 0.5rem; /* Kleinere Schriftgröße */
  }

  .navlang ul {
      background-color: #ffffff;
      margin: 0;
      display: inline-block;
      flex-direction: column;   
      list-style: none;  
  }

  .navlang li {
    color: #555555;
    list-style: none;
    margin-left: 0;
    margin-bottom: 30px; /* Fügt Abstand zwischen den Listeneinträgen hinzu */
  }
  
  /* Optional: Wenn du Trennzeichen zwischen den Listeneinträgen haben möchtest */
  .navlang li:not(:last-child):after {
      content: '';
      margin-left: 10px;
  }
  
  .navlang li a {
    color: #555555; /* Textfarbe */
    font-size: 1.5rem; /* Schriftgröße */
    line-height: 24px;
    font-weight: 400;
    padding: 6px 8px; /* Innenabstand */
    border-radius: 4px; /* Abgerundete Ecken */
    text-decoration: none; /* Keine Unterstreichung */
    display: inline; /* Nur der Text wird als Block behandelt, der Hintergrund wird nur für den Text gesetzt */
  
  }

  .navlang ul a:hover,
  .navlang ul a:focus,
  .navlang ul a:active {
 
    background-color: #000; /* Schwarzer Hintergrund */
    color: #efefef; /* Helle Schriftfarbe */
    padding: 6px 8px; /* Padding bleibt gleich, der Hintergrund um den Text wird schmaler */

}

  .navh {
    width: 100%;
    height: auto;
    text-align: left;
    color: #555555;
    grid-column: 1 / 3;
    grid-row: 3 / 5;
    background-color: #ffffff;
    padding-left: 1rem;
    display: block;
  }
    
  .navh ul {
    display: block;
    box-shadow: none;
    margin: 1em 0;
    padding: 0;
    
  }
    
  .navh li {
    list-style: none;
    margin-left: 0;
    border-bottom: 1.5px solid #e2e2e2;
    padding: 10px 10px 0px 10px;
       
  }
 
  .button,.background {
    display:none;
  }
  
  .aside {
    grid-column: 1 / 3;
    grid-row: 5 / 6;
    padding: 1em 1.5em;
   }
 
    .container {
      grid-template-areas: 
        "order1 order2"
        "order3 order4"
        "order5 order6"
        "order7 order8"
        "order9 order10";
   }

}
/* Download Dokumente Definition */
.dwld-dev {
  display: flex;                   /* Flexbox-Layout aktivieren */
  justify-content: flex-start;       /* Items nach links ausrichten */
  align-items: flex-start;           /* Vertikal ebenfalls nach oben ausrichten */
  gap: 10px;                       /* Abstand zwischen den Items */
  flex-wrap: wrap;                 /* Erlaubt das Umbrechen der Items bei zu wenig Platz */
  padding: 10px;                   /* Padding für den Container */
  
}

.dwld-item {
  text-align: center;              /* Text in jedem Element zentrieren */
  padding: 10px;                   /* Padding für die Items */
  flex: 0 0 140px;                 /* Flex-Eigenschaft für die Breite der Items */
  box-sizing: border-box;          /* Verhindert, dass Padding die Gesamtbreite beeinflusst */
  font-size: 14px;
}

.dwld-picture {
  display: block;
  width: 140px;                    /* Bildgröße */
  height: auto;                    /* Automatische Höhe */
  border-radius: 8px;              /* Abgerundete Ecken */
  transition: box-shadow 0.3s ease; /* Sanfter Übergang für den Hover-Effekt */
  position: relative;              /* Position für das Hinzufügen von Schatten */
}


a.dwld-picture {
  display: block;                  /* Das Bild als Blockelement anzeigen */
  width: 140px;                    /* Bildgröße */
  height: auto;                    /* Automatische Höhe */
  border: 1px solid #FFFFFF;       /* Weißer Rand um das Bild */
  color: #333333;                  /* Textfarbe */
  text-decoration: none;           /* Keine Unterstreichung des Links */
  border-radius: 8px;              /* Abgerundete Ecken */
  padding: 10px;                   /* Innenabstand */
  background-position: center;     /* Hintergrundbild zentrieren */
  background-size: repeat;          /* Hintergrundbild auf Containergröße skalieren */
  transition: border-color 0.3s, background-image 0.3s;  /* Sanfter Übergang für Rand und Hintergrund */
}

/* Hover-Effekt für den Link */
a.dwld-picture:hover {
  border: 1px solid #B6D0E0;        /* Neuer Rand bei Hover */
  background-image: url("../images/allgemein/quer.gif"); /* Hintergrundbild beim Hover */
}

/* Stil für die Bilder */
a.dwld-picture img {
  border: none;                     /* Kein zusätzlicher Rand um das Bild */
  display: block;                   /* Verhindert einen kleinen Abstand unter dem Bild */
  width: 100%;                      /* Bild auf Container-Breite anpassen */
  height: auto;                     /* Bildhöhe automatisch anpassen */
}
/*Links Seite */
.linkinfo-text {
  margin-bottom: 20px;
}

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.link-item {
  width: 30%; /* Standard: 3 Elemente nebeneinander */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}

.link-item img {
  max-width: 100%;
  height: auto;
}

.linkdisclaimer {
  margin-top: 20px;
  font-family: OpenSans, sans-serif;
  color: #880000;	
  font-size: 10px;	
  font-weight: 300;
  text-align: center;
}

.isoimage {
  display: flex;
  flex-direction: column; 
  justify-content: left; 
  margin-left: 30px;
}

.isoimage img {
  width: 180px;
  height: auto;
  display: block;
  display: flex;
  flex-direction: column; 
  justify-content: left; 
}


/*-----------------------------------------------------------------------------------------------------------
/*-----------------------------------------------------------------------------------------------------------
/*-----------------------------------------------------------------------------------------------------------
/*-----------------------------------------------------------------------------------------------------------
/*-----------------------------------------------------------------------------------------------------------
    Große Bildschirme (>1280 Pixel) 
      1280px / 16px/em = 80em
	    + 3 Spalten
          - Header oben
          - Navigation, Hauptinhalt und Seitenleisten nebeneinander
			* Zwei Artikel im Hauptinhalt nebeneinander
          - Fußleiste unten	
  -------------------------------------------------------------------- */

@media screen and (min-width: 80em) {
    .grid {
        margin: 0 auto;
        max-width: 80em;
    }
    .clear {
        clear: both;
  
    }
}