@charset "utf-8";

/* ==========================================================================
   GENETIK - CONTAINER BOXEN
   ========================================================================== */
.box-container-genetik {display: grid;grid-template-columns: 1fr 1fr; /* 2 Spalten auf dem Desktop */gap: 20px;/* Abstand zwischen den Boxen */max-width: 100%;margin: 5px auto 20px auto;/* Oben auf 5px reduziert - flexibel anpassbar */padding: 0;/* KORREKTUR: Innenabstand gelöscht für maximale Nähe zum Trenner */font-family: 'Raleway', sans-serif; font-size: 18px; width: 100%; font-weight: bold;}
/* Styling für die einzelnen Boxen */
.box-genetik {border: none;padding: 0; background-color: transparent; 
border-radius: 8px;line-height: 1.6;color: #CFDDFC;/* Deine originale helle Textfarbe */}
/* ==========================================================================
   GENETIK - DEINE BEIDEN KLASSEN - JETZT STARR FÜR 150PX HÖHE EINGESTELLT
   ========================================================================== */
.links-genetik {height: 150px;/* Feste Höhe - linke Spalte */margin-bottom: 24px;/* Abstand zum nächsten Block */padding: 0px;box-sizing: border-box;font-size: 18px;text-align: left;}
.rechts-genetik {height: 150px;/* Feste Höhe - rechte Spalte */margin-bottom: 24px;/* Abstand zum nächsten Block */padding: 0px;color: #CFDDFC;/* Text auf gelb lesbar */box-sizing: border-box;font-size: 18px;text-align: left;}
/* ==========================================================================
   GENETIK - NEU: RAHMEN AUSSCHLIESSLICH FÜR DEINE ÜBERSCHRIFTEN
   ========================================================================== */
.header-genetik {border: groove 1px #D8E3FC;padding: 2px 4px;margin-bottom: 8px;display: block;}
/* ==========================================================================
   GENETIK - MENÜ-HOVER-STIL FÜR ALLE LINKS IN DER BOX (Korrektur: border-radius auch im Normalzustand gegen eckiges Flackern)
   ========================================================================== */
.box-genetik a {color: #CFDDFC;text-decoration: underline;font-weight: bold;font-family: 'Raleway', sans-serif;background: transparent;transition: background 0.2s ease-in-out, color 0.2s ease-in-out;color: #CFDDFC; text-decoration: underline; font-weight: bold; font-size: 18px; font-family: 'Raleway', sans-serif; background: transparent; padding: 0px clamp(6px, 1vw + 2px, 12px); display: inline-block; vertical-align: baseline; border-radius: 5px; /* REAKTIVIERT: Hält die Ecken dauerhaft rund */ transition: background 0.2s ease-in-out, color 0.2s ease-in-out;}
.box-genetik a:hover {background: #CFDDFC; color: #0468FF; text-decoration: underline; border-radius: 5px; cursor: pointer;}
/* ==========================================================================
   GENETIK -  - ANPASSUNG NUR FÜR MOBIL PORTRAIT (< 640px)
   ========================================================================== */
@media screen and (max-width: 640px) {
.box-container-genetik { font-size: 0.9375rem; margin-top: 5px; }
.box-genetik a { font-size: 0.9375rem; padding: 0px 6px; border-radius: 5px; text-decoration: underline; }
.box-genetik a:hover { font-size: 0.9375rem; padding: 0px 6px; text-decoration: underline; } 
.links-genetik { font-size: 0.9375rem; }
.links-genetik a { font-size: 0.9375rem; padding: 0px 6px; text-decoration: underline; }
.links-genetik a:hover { font-size: 0.9375rem; padding: 0px 6px; text-decoration: underline; }}
/* ==========================================================================
   GENETIK - ANPASSUNG - FÜR MINIMALES LANDSCAPE / PORTRAIT IM SPALTENBEREICH
   ========================================================================== */
@media screen and (max-width: 980px) and (orientation: landscape) {
.box-container-genetik { grid-template-columns: 1fr 1fr; font-size: 0.9375rem; }  
.links-genetik, .rechts-genetik { height: 110px; font-size: 0.9375rem; padding-left: 2px; padding-right: 2px; } /* KORREKTUR: Im Querformat Boxen auf 110px herabgesetzt */
.box-genetik a { font-size: 0.9375rem; padding: 0px 4px; text-decoration: underline; }
.box-genetik a:hover { font-size: 0.9375rem; padding: 0px 4px; text-decoration: underline; }
.box-genetik:first-child .links-genetik:last-of-type { height: 40px; } /* KORREKTUR: Letzte Boxen im Querformat knackige 40px */
.box-genetik:last-child .rechts-genetik:last-of-type { height: 40px; }}
/* ==========================================================================
   GENETIK - KORREKTUR IPAD-WEICHE: Startet jetzt ab 741px, damit das iPad Mini (744px) sicher mitgenommen wird
   ========================================================================== */
@media screen and (min-width: 741px) and (max-width: 1024px) {
.box-container-genetik { grid-template-columns: 1fr 1fr; }
.links-genetik, .rechts-genetik { height: 110px; font-size: 0.9375rem; padding-left: 0; padding-right: 0; } /* KORREKTUR: Für iPads im Querformat ebenfalls harmonische 110px */
.box-genetik a { font-size: 0.9375rem; padding: 0px 4px; text-decoration: underline; }
.box-genetik a:hover { font-size: 0.9375rem; padding: 0px 4px; text-decoration: underline; }
.box-genetik:first-child .links-genetik:last-of-type { height: 40px; } /* KORREKTUR: Letzte Boxen auch hier auf 40px gekürzt */
.box-genetik:last-child .rechts-genetik:last-of-type { height: 40px; }}
/* ==========================================================================
   GENETIK - KORREKTUR SMARTPHONE-GRENZE: Auf 740px herabgesetzt, damit das iPad Mini (744px) stabil in 2 Spalten bleibt
   ========================================================================== */
@media screen and (max-width: 740px) {
.box-container-genetik { grid-template-columns: 1fr; text-align: left; }
.links-genetik, .rechts-genetik { width: 100%; height: 110px; padding-left: 2px; padding-right: 2px; margin-right: 0; margin-bottom: 24px; text-align: left; font-size: 0.9375rem; }
.box-genetik a { font-size: 0.9375rem; text-align: left; padding: 0px 4px; text-decoration: underline; }
.box-genetik a:hover { font-size: 0.9375rem; padding: 0px 4px; text-decoration: underline; }
.box-genetik:first-child .links-genetik:last-of-type { height: 40px; }
.box-genetik:last-child .rechts-genetik:last-of-type { height: 40px; }}
/* ==========================================================================
   KORREKTUR: LETZTE BEIDE BOXEN (TEIL 9 & 18) DESKTOP
   ========================================================================= */
.box-genetik:first-child .links-genetik:last-of-type { height: 50px; }
.box-genetik:last-child .rechts-genetik:last-of-type { height: 50px; }


/* ==========================================================================
   GENETIK BOX_CONTAINER_G - BILD LINKS - TEXT RECHTS - RAHMEN
   ========================================================================== */
.box_container_g { width:100%; height:auto; display:flex; flex-wrap: nowrap; align-items: flex-start; font-size: 100%; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; border: groove 1px #D8E3FC; box-sizing: border-box; }
.box-g-links { width: auto; font-size: 100%; font-family: 'Raleway', sans-serif; box-sizing: border-box; flex-shrink: 1; padding-top: 4px; } /* flex-shrink auf 1 geändert, damit das Bild verkleinert werden darf */
.box-g-links img { width: 100%; max-width: 250px; max-height: 165px; height: auto; display: block; object-fit: cover; }
.box-g-rechts { width: 100%; flex-grow: 1; padding-left: 0px; font-size: 100%; font-family: 'Raleway', sans-serif; box-sizing: border-box; min-width: 0; } /* min-width verhindert, dass Text das Layout sprengt */
/* ==========================================================================
   GENETIK BOX_CONTAINER_G - MEDIA QUERIES (GENETIK)
   ========================================================================== */
@media screen and (max-width: 1024px) {
.box-g-links { width: auto; }
.box-g-rechts { width: 100%; padding-left: 0px; }}
/* Für Mobile Landscape: Nebeneinander behalten, aber kontrolliert verkleinern */
@media screen and (max-width: 900px) and (orientation: landscape) {
.box_container_g { flex-wrap: nowrap; padding: 5px; }
.box-g-links { width: 30%; max-width: 200px; min-width: 100px; padding-top: 0px; } /* Begrenzt die Bildbox im Querformat */
.box-g-links img { width: 100%; max-width: 100%; }
.box-g-rechts { padding-left: 10px; }}
@media screen and (max-width: 480px) and (orientation: portrait) {
.box_container_g { flex-wrap: wrap; padding: 10px; }
.box-g-links { width: 100%; margin-bottom: 10px; text-align: left; padding-top: 0px; }
.box-g-rechts { width: 100%; padding-left: 0px; }}


/* ==========================================================================
   TABELLEN - ANPASSUNGEN - GENETIK - BIRMA-ERHÖHTE-NIERENWERTE (Klassenfrei & stabil)
   ========================================================================== */
table { width: 100%; border: 1px groove; border-collapse: separate; margin: 20px auto; font-weight: bold; color: #D8E3FC; }
table, table td { font-size: 1.05em; font-family: 'Raleway', sans-serif; }
td { border: 1px groove; vertical-align: top; overflow: hidden; text-align: left; white-space: nowrap; padding: 4px 6px; }
/* ==========================================================================
   TABELLEN - GENETIK - BIRMA-ERHÖHTE-NIERENWERTE - RESPONSIVE WEICHEN (Mobil, Tablets & Laptops vollautomatisch)
   ========================================================================== */
@media screen and (max-width: 956px) and (max-height: 500px) {
table { display: table; width: 100%; table-layout: auto; }
td { white-space: normal; padding: 2px 3px; text-align: left; }
table, table td { font-size: 1.02em; }}
@media screen and (min-width: 740px) and (max-width: 770px) and (orientation: portrait) {
table { table-layout: auto; }
td { white-space: normal; padding: 3px 4px; }
table, table td { font-size: 1.02em; }}
@media screen and (min-width: 700px) and (max-width: 1024px) and (orientation: portrait) {
table { table-layout: auto; width: 100%; }
td { white-space: normal; padding: 3px 4px; }
table, table td { font-size: 1.00em; }}
@media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
table { table-layout: auto; width: 100%; }
td { white-space: normal; padding: 4px 5px; }
table, table td { font-size: 1.02em; }}
@media screen and (max-width: 640px) {
table { display: table; width: 100%; table-layout: auto; }
td { white-space: normal; padding: 2px 1px; text-align: left; }
table, table td { font-size: 0.78em; }}
/* ==========================================================================
    BOX_CONTAINER6 - DARMVERSCHLUSS - BUCHSTABEN-AUFZÄHLUNG - OL - EINZUG-LINKS 5PX (Ohne important)
   ========================================================================== */
.buchstaben-liste { margin-left: 0; padding-left: 5px; list-style-position: inside; list-style-type: lower-alpha; }
.buchstaben-liste li { margin-bottom: 1em; }
.buchstaben-liste li:last-child { margin-bottom: 0; }
/* ==========================================================================
   MENU-UNTEN & OBEN - FIXIERT AUF EXAKT 18PX (Komplett ohne !important)
   ========================================================================== */
.menu_u { text-align: center; font-family: 'Raleway', sans-serif; font-size: 18px; } 
/* Normalzustand Desktop: Holt sich die echte 18px Schriftgröße und das flexible Footer-Padding */
.menu_u a.menu-u-link { display: inline-block; text-align: center; color: #CFDDFC; font-size: 18px; text-decoration: none; font-weight: bold; font-family: 'Raleway', sans-serif; background: transparent; padding: 3px clamp(6px, 1vw + 2px, 12px); line-height: 1.2; transition: all 0.2s ease-in-out; box-sizing: border-box; } 
/* Hover-Zustand Desktop: Absolut sprungfrei und maßhaltig zum Footer */
.menu_u a.menu-u-link:hover { text-align: center; color: #0468FF; text-decoration: underline; font-weight: bold; font-size: 18px; padding: 3px clamp(6px, 1vw + 2px, 12px); background: #CFDDFC; border-radius: 5px; cursor: pointer; } 
.menu_o { text-align: center; font-family: 'Raleway', sans-serif; border-color: #CFDDFC; border: ridge 1px; font-size: 18px; box-sizing: border-box; } 
/* Normalzustand Desktop für menu_o: Bleibt synchron auf 18px */
.menu_o a.menu-u-link { display: inline-block; color: #CFDDFC; font-size: 18px; text-decoration: none; font-weight: bold; font-family: 'Raleway', sans-serif; background: transparent; padding: 3px clamp(6px, 1vw + 2px, 12px); line-height: 1.2; transition: all 0.2s ease-in-out; box-sizing: border-box; } 
/* Hover-Zustand Desktop für menu_o: Bleibt synchron auf 18px */
.menu_o a.menu-u-link:hover { text-align: center; color: #0468FF; text-decoration: underline; font-weight: bold; font-size: 18px; padding: 3px clamp(6px, 1vw + 2px, 12px); background: #CFDDFC; border-radius: 5px; cursor: pointer; }
/* ==========================================================================
   MENU-UNTEN & OBEN - SYNC MIT DEINER MOBILEN FOOTER-ANPASSUNG (< 640px)
   ========================================================================== */
@media screen and (max-width: 640px) {
.menu_u { font-size: 1.08em; }
.menu_u a.menu-u-link { font-size: 1.08em; padding: 2px 4px; }
.menu_u a.menu-u-link:hover { font-size: 1.08em; padding: 2px 4px; }
.menu_o { font-size: 1.08em; }
.menu_o a.menu-u-link { font-size: 1.08em; padding: 2px 4px; }
.menu_o a.menu-u-link:hover { font-size: 1.08em; padding: 2px 4px; }}

/* ==========================================================================
   MENÜ-UNTEN - TEXT Passt sich exakt der Größe des Inhalts an - Sprungfrei und barrierefrei 
   ========================================================================== */
.text-link { display: inline-block; width: fit-content; color: #CFDDFC; font-size: 18px; text-decoration: none; font-weight: bold; font-family: 'Raleway', sans-serif; transition: background 0.2s ease-in-out, color 0.2s ease-in-out; } 
/* HOVER-ZUSTAND FÜR .text-link: Übernimmt exakt den sprunghaft-freien Menü-Stil */
.text-link:hover { background: #CFDDFC; color: #0468FF; text-decoration: underline; border-radius: 5px; cursor: pointer; }
/* ==========================================================================
   SCHRIFTEN - INHALTE - ÜBERSCHRIFTEN ZENTRIEREN - STRUKTURIEREN
   ========================================================================== */
/* GLOBALE BASIS ÜBERSCHRIFTEN & KLASSEN (STANDARD DESKTOP) */
h1, h2, h3, .h1, .h2 { font-weight: bold; color: #D8E3FC; margin: 8px 0 2px 0; font-family: 'Raleway', sans-serif; }
/* DIE ECHTEN HTML-TAGS AUF DEM DESKTOP */
h1 { font-size: 1.35em; text-align: center; } 
h2 { font-size: 1.15em; text-align: center; } 
h3 { font-size: 1.05em; text-align: left; }   
/* IHRE STRUKTUR- UND INHALTSBOX-KLASSEN (ZENTRIERT) */
.h1 { font-size: 1.35em; text-align: center; } 
.h2 { font-size: 1.15em; text-align: center; }
.h5 { font-size: 100%; text-align: center; text-decoration: underline; } 
/* LINKS FÜR UNTEN ZENTRIERT - NORMALZUSTAND */
.h2 a.text-link { color: #D8E3FC; text-decoration: none; background: transparent; display: inline-block; transition: all 0.2s ease-in-out; }
/* HOVER-ZUSTAND: LINKS VERHALTEN SICH WIE BEIM MENÜ */
.h2 a.text-link:hover { background: #CFDDFC; color: #0468FF; text-decoration: underline; border-radius: 5px; box-shadow: none; cursor: pointer; }
/* EINZEL-ÄNDERUNG: ABSTAND FÜR .h3 */
.h3 { font-size: 1.05em; text-align: left; font-weight: bold; color: #D8E3FC; font-family: 'Raleway', sans-serif; margin: 20px 0px 20px 0px; } 
/* NORMALZUSTAND */
.h3 a.text-link { color: #D8E3FC; text-decoration: none; background: transparent; display: inline-block; transition: all 0.2s ease-in-out; }
/* HOVER-ZUSTAND */
.h3 a.text-link:hover { background: #CFDDFC; color: #0468FF; text-decoration: underline; border-radius: 5px; box-shadow: none; cursor: pointer; }
/* ==========================================================================
   H3 - LISTENPUNKTE - UL - OL
   ========================================================================== */
.h3 ul, .h3 ol { margin-left: 0; padding-left: 0; list-style-position: inside; }
/* ==========================================================================
   KATZENKÖRPER - ENTWURMUNG - BIRMAFARBEN - BIRMASTANDARD - H7 - HOCHMODERN
   ========================================================================== */
.box_container2 .h7, .con_spalte2 .h7, .h7 { font-size: 18px; text-align: left; font-weight: bold; color: #D8E3FC; font-family: 'Raleway', sans-serif; margin: 20px 0 20px 0; border: 1px ridge #CFDDFC; box-sizing: border-box; display: block; width: 100%; } 
.h7 a.text-link { font-size: 18px; color: #D8E3FC; text-decoration: none; background: transparent; display: inline-block; transition: background 0.2s ease-in-out, color 0.2s ease-in-out; }
.h7 a.text-link:hover { background: #CFDDFC; color: #0468FF; text-decoration: underline; border-radius: 5px; cursor: pointer; }
/* ==========================================================================
   8a. AUSNAHME: ÜBERSCHRIFTEN-SCHRUMPFUNG NUR FÜR MOBIL PORTRAIT (< 640px)
   ========================================================================== */
@media screen and (max-width: 640px) { h1 { font-size: 1.25em; } h2 { font-size: 1.12em; } h3 { font-size: 1.02em; } }
@media screen and (max-width: 699px) and (orientation: portrait) { .h7, .h7 a.text-link { font-size: 15px; } }
@media screen and (min-width: 700px) and (max-width: 980px) and (orientation: portrait) { .h7, .h7 a.text-link { font-size: 16px; } }
@media screen and (max-width: 1024px) and (orientation: landscape) { .h7, .h7 a.text-link { font-size: 16px; } }
/* ==========================================================================
   TRENNER INTERAKTIVER (PASSEND ZU .h2 ZENTRIERT & DESIGN - MENÜ
   ========================================================================== */
.trenner { display: block; width: fit-content; margin: 8px auto 2px auto; font-size: 14.5px; font-weight: bold; color: #CFDDFC; font-family: 'Raleway', sans-serif; text-align: center; border: none; text-decoration: none; transition: all 0.2s ease-in-out; }
/* 1. DER LINKSCHUTZ: Schaltet bei JEDEM Banner den störenden Kasten-Hintergrund aus */
.trenner a:hover {background: transparent; text-decoration: none; cursor: pointer; display: inline-block;}
.trenner a:has(div):hover div {color: #D8E3FC; text-decoration: none;}
/* 2. DIE GEMEINSAME OPTIK: Jedes verlinkte Banner-Bild leuchtet jetzt absolut identisch auf */
.trenner a:hover img {border-radius: 5px; box-shadow: 0 0 0 4px #CFDDFC; filter: brightness(1.1); transition: all 0.2s ease-in-out;}
@media screen and (max-width: 640px) { .trenner {font-size: 13px; }}
/* ==========================================================================
   HAUPT-LAYOUT - GLOBALER RESET & NAHTLOSER HINTERGRUND - BG1.WEBP
   ========================================================================== */
* {box-sizing: border-box; padding: 0; margin: 0; }
body {background-image: url(../images/hpgrafik/bg1.webp); background-color: #082666; background-repeat: repeat; background-size: auto; background-attachment: fixed; }
img, object, embed, video {max-width: 100%;height: auto;} 
@font-face {font-display: swap;font-family: 'Raleway';font-style: normal;font-weight: 700;src: url('../fonts/raleway-v37-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-700.woff2') format('woff2');}
/* ==========================================================================
   HAUPTCONTAINER (VOLLBILD-WEITER MIT MINIMIERTEM SEITENABSTAND) - BG1.WEBP
   ========================================================================== */
.gridContainer {margin: 20px auto; display: block; width: 95%; max-width: 100vw; padding: 25px 1.5% 0px 1.5%; 
font-size: clamp(14px, 0.4vw + 12px, 17px); line-height: 1.6; font-family: 'Raleway', sans-serif; color: #CFDDFC; background: transparent; }
/* ==========================================================================
   HEADER (KATZEN-GRAFIK) BEDINGUNGSLOS IN DIE MITTE ZWINGEN
   ========================================================================= */
#header {display: block; text-align: center; width: 100%; margin: -30px auto 15px auto; } 
#header img {display: block; width: 100%;max-width: 1000px; /* Begrenzt die Desktop-Größe auf die gewohnten 1000px, damit er nicht riesig wird */height: auto; margin-left: auto; margin-right: auto;aspect-ratio: 4 / 1; /* Hält den Platz im richtigen Verhältnis (1000x250 und 600x150) stabil frei */}
.fill { object-fit: fill; } 
.contain { object-fit: contain; } 
.cover { object-fit: cover; } 
.none { object-fit: none; } 
.scale-down { object-fit: scale-down; } 
.image-fill { width: 100%; }
/* ==========================================================================
   NAVIGATION-MENU-OBEN - DESKTOP & LANDSCAPE - BG1.WEBP
   ========================================================================== */
#nav {position: relative;width: 100%;margin: 1px auto 15px auto;padding: 0 0 12px 0;font-family: 'Raleway', sans-serif;background-image: url(../images/hpgrafik/bg1.webp);background-repeat: repeat;background-size: auto;font-size: 18px; list-style: none;} 
#nav > ul {margin: 0;padding: 0;list-style: none;display: flex;justify-content: center; flex-wrap: nowrap; } 
#nav ul li {position: relative; white-space: nowrap; list-style: none; list-style-type: none;} 
#nav ul li.close {display: none;}
#nav ul li a {padding: 3px clamp(6px, 1vw + 2px, 12px);display: block;color: #CFDDFC;text-decoration: none;font-size: 18px; font-weight: bold; line-height: 1.2; font-family: 'Raleway', sans-serif;} 
#nav ul li a:hover {background: #CFDDFC;color: #0468FF; text-decoration: underline;border-radius: 5px;box-shadow: none;} 
/* NAVIGATION-MENU-OBEN - DESKTOP-DROPMENÜ & LANDSCAP-DROPDOWN: LEFT BÜNDIG: 6px */
#nav ul ul {position: absolute;top: 100%;left: 6px;z-index: 999;display: none;font-size: 18px;width: auto; min-width: 100%; white-space: nowrap; background: none; box-shadow: none; list-style: none; justify-content: flex-start;} 
#nav ul li:hover > ul, #nav ul li:focus-within > ul {display: flex;} 
#nav ul ul li {width: auto;list-style: none;}
/* NAVIGATION-MENU-OBEN - OPTIMIERT: PADDING-RIGHT AUF 18px ERHÖHT - ABSTAND UNTERMENÜ AN CM OBEN ANZUPASSEN */
#nav ul ul li a {text-align: left;padding: 3px 18px 3px 6px; display: block;width: auto; font-family: 'Raleway', sans-serif; font-size: 18px;}
.nav-open {display: none;} 
/* NAVIGATION-MENU-OBEN - DESKTOP-PFEIL-BASIS: AUF 13.5px ANGEPASST - HÖHE KLEINBUCHSTABEN */
#nav ul li a .menu-arrow, .menu-arrow {font-size: 13.5px; line-height: 0;display: inline-block; }
/* ==========================================================================
   NAVIGATION-MENU-OBEN - ABSOLUTER MOBIL-ZUSCHNAPP-SCHUTZ & PERFEKTE SYMMETRIE (HOCHFORMAT)
   ========================================================================== */
@media screen and (max-width: 640px) { 
.nav-open { position: fixed; top: -5px; left: 32.5%; font-family: 'Raleway', sans-serif; display: block; width: 35%; text-align: center; z-index: 999; background: transparent; padding: 10px 0;} 
.nav-open a { padding: 0 0; display: block; color: #CFDDFC; text-align: center; text-decoration: none; font-weight: bold; font-family: 'Raleway', sans-serif;}
#nav { position: fixed; top: -5px; left: 32.5%; width: 35%; margin: 0; padding: 10px 0; border-radius: 5px; z-index: 1000;
/* NAVIGATION-MENU-OBEN - MOBIL PORTRAIT - BG1.WEBP MIT KACHELUNG NTZTEN */
background-image: url(../images/hpgrafik/bg1.webp);background-repeat: repeat;background-size: auto;background-color: #082666;transform: scaleY(0);transform-origin: top;transition: transform 0.3s ease-in-out;
display: block; font-size: 13px; }     
#nav:target { transform: scaleY(1);}     
#nav > ul { flex-direction: column; flex-wrap: wrap; }
/* NAVIGATION-MENU-OBEN - MOBIL PORTRAIT ANPASSUNGEN: HAUPTLINK AUF 15px ERHÖHT */
#nav ul li { text-align: left; border-bottom: none; width: 100%; display: block; list-style: none; position: relative; } 
#nav ul li a { padding: 1px 6px 1px 8px; line-height: 1.1; font-size: 15px; white-space: normal; }
/* NAVIGATION-MENU-OBEN - SCHLIEßEN-PFEIL ZENTRIERT - ERHÖHT AUF 15px */
#nav ul li.close { display: block; text-align: center; margin-top: 3px; } 
#nav ul li.close a { padding: 3px 0; text-align: center; font-size: 15px; }
#nav ul li:last-child { border-bottom: none; }  
/* NAVIGATION-MENU-OBEN - UNTERMENÜS KLAPPEN AUS */
#nav ul ul {position: static; display: block; width: 100%;box-shadow: none; background: transparent; padding: 0; list-style: none; font-size: 13px; flex-direction: column;}    
#nav ul ul li {display: block;width: 100%; list-style: none;}    
/* NAVIGATION-MENU-OBEN - UNTERMENÜ-LINKS AUF 15px */
#nav ul ul li a {text-align: left;padding: 1px 6px 1px 16px; font-size: 15px; color: #A9C2F0; display: block; font-family: 'Raleway', sans-serif; line-height: 1.1; white-space: normal;}
#nav ul li a::first-letter { font-size: 13px; vertical-align: 0; line-height: inherit; }
/* NAVIGATION-MENU-OBEN - MOBIL-PFEIL-ANPASSUNG: NORMALE INHALTS-PFEILE (MENÜ KATZEN, BIRMA) AUF 12.5px */
#nav ul li a .menu-arrow { font-size: 12.5px; line-height: 1; display: inline-flex;align-items: center;justify-content: center; vertical-align: 0.08em; margin-left: 2px;}
/* NAVIGATION-MENU-OBEN - KORREKTUR ÖFFNEN-PFEIL: AUF 14.5px EINGESTELLT - NACH UNTEN AUSGEMITTELT */
.nav-open a .menu-arrow {font-size: 14.5px;line-height: 1; display: inline-flex;align-items: center;justify-content: center; vertical-align: 0.01em; margin-left: 2px;}
/* NAVIGATION-MENU-OBEN - KORREKTUR SCHLIESSEN-PFEIL: AUF 14.5px EINGESTELLT - UND ABGESENKT */
#nav ul li.close a .menu-arrow {font-size: 14.5px;line-height: 1; display: inline-flex;align-items: center;justify-content: center; vertical-align: -0.02em; margin-right: 2px;}
/* NAVIGATION-MENU-OBEN - BEREINIGTE STEUERUNGS-LINKS - ERHÖHT AUF 16px */
.nav-open a { font-size: 17px; }} 
/* Die leeren, doppelten Medien-Weichen unter 580px, 480px, 380px, 280px wurden entfernt, da sie durch das flexible Flexbox-Layout oben automatisch abgedeckt werden. */
/* NAVIGATION-MENU-OBEN - NUR MOBIL IM QUERFORMAT (LANDSCAPE): ÄNDER AUSSCHLIEßLICH DIE PFEILGRÖßE AUF 13.5px */
@media screen and (max-width: 900px) and (orientation: landscape) {#nav ul li a .menu-arrow, .menu-arrow { font-size: 13.5px; }}
/* ==========================================================================
   FOOTER-NAVIGATION (MODERNISIERT AUF HTML5 'FOOTER')
   ========================================================================== */
footer {position: relative;width: 100%;margin: 1px auto 0px auto;padding: 0 0 15px 0;font-family: 'Raleway', sans-serif;background-image: url(../images/hpgrafik/bg1.webp);background-repeat: repeat;background-size: auto;background-color: #082666;font-size: 18px; list-style: none;} 
footer > ul {margin: 0;padding: 0;list-style: none;display: flex;justify-content: center; flex-wrap: nowrap; } 
footer ul li {position: relative;white-space: nowrap; list-style: none; list-style-type: none;} 
footer ul li a {padding: 3px clamp(6px, 1vw + 2px, 12px); display: block;color: #CFDDFC;text-decoration: none;font-size: 18px; font-weight: bold; line-height: 1.2; font-family: 'Raleway', sans-serif;} 
footer ul li a:hover {background: #CFDDFC;color: #0468FF; text-decoration: underline;border-radius: 5px;box-shadow: none;}
/* KORREKTUR NUR FÜR MOBIL HOCHFORMAT (PORTRAIT): SCHRIFTGÖßE FOOTER-MENÜS */
@media screen and (max-width: 640px) and (orientation: portrait) {footer, footer ul li a { font-size: 1.08em; } 
footer { background-image: url(../images/hpgrafik/bg1.webp); background-repeat: repeat; background-size: auto; }}
/* ==========================================================================
   FOOTER - PFEIL - POSITIONIERUNG & STYLING FÜR DEN "NACH OBEN"-PFEIL (▲) GANZ UNTEN RECHTS
   ========================================================================== */
#arrow {position: fixed;right: 25px;left: auto;bottom: 25px;padding: 0;color: #CFDDFC;font-weight: 700;
width: 28px;height: 28px;display: flex;align-items: center;justify-content: center;font-size: 1.3em;font-family: 'Raleway', sans-serif; z-index: 9999; background: #082666; border-radius: 5px;	
box-shadow: 0 0 5px; border: 1px solid #CFDDFC;}
#arrow a {line-height: 100%;color: #CFDDFC; text-decoration: none;font-family: 'Raleway', sans-serif; display: block; width: 100%; text-align: center;}
#arrow:hover {background: #CFDDFC; border-color: #CFDDFC;}
#arrow:hover a {color: #0468FF; font-size: 27px; text-decoration: none; background: transparent; box-shadow: none;}
/* FOOTER - PFEIL - KORREKTUR FÜR DIE MOBILANSICHT */
@media screen and (max-width: 640px) {#arrow { bottom: 14px; font-size: 1.2em; width: auto; height: auto; display: block; }}
/* FOOTER - PFEIL - DYNAMISCHE ANPASSUNG FÜR GALAXY S10, IPHONE SE & KLEINERE SMARTPHONES (< 480px) */
@media screen and (max-width: 480px) {
#arrow { bottom: 13px; right: calc(0% - 8px); padding: 0; margin: 0; }
#arrow a { padding: 0; margin: 0; box-shadow: none; }}
/* ==========================================================================
   NUR MOBIL IM QUERFORMAT (LANDSCAPE) - PASST AUSSCHLIESSLICH DEN PFEIL AN
   ========================================================================== */
@media screen and (max-width: 900px) and (orientation: landscape) {
#arrow { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; bottom: 25px; right: 15px; }
#arrow a {display: flex;width: 100%;height: 100%;align-items: center;justify-content: center;line-height: 100%;}
#arrow:hover a { font-size: 23px; }}
/* ==========================================================================
   NUR MOBIL IM HOCHFORMAT (PORTRAIT) - PASST AUSSCHLIESSLICH DEN PFEIL AN
   ========================================================================== */
@media screen and (max-width: 640px) and (orientation: portrait) {
#arrow { position: fixed; width: 21px; height: 21px;display: flex;align-items: center; justify-content: center; bottom: 40px; right: 5px; background: #082666; border: 1px solid #CFDDFC;border-radius: 5px;}
#arrow a {display: flex;width: 100%;height: 100%;align-items: center;justify-content: center;line-height: 100%;font-size: 19px;}
#arrow:hover { background: #CFDDFC; border-color: #CFDDFC; }
#arrow:hover a { color: #0468FF; font-size: 19px; text-decoration: none; background: transparent; }}
/* ==========================================================================
   13. ABSTÄNDE UNTEN: REPARATUR GEGEN LEERRAUM & PUFFER UNTER DEM FOOTER
   ========================================================================== */
@media screen and (min-width: 741px) {
html, body { height: auto; min-height: 0; }  
.gridContainer { padding-bottom: 0px; margin-bottom: 5px; min-height: auto; height: auto; }  
.clear, .clr { display: none; height: 0; margin: 0; padding: 0; clear: none; float: none; }}