:root {
  --C_FOOTER_WHITE:  #F9F9F9;  /* (light white/grey) */

  /* --C_WHITE:      #FFFFFF;   nearly white */
  /* --C_LIGHTBLUE:  #CFD5EE;   93D7FF, CCD2EE, 9BD2EE (light grey) border under tab-menu, etc. */
  /* --C_SKYBLUE:    #2874B2;   2874B2, 565BB4, 2E63B2 (middle blue) tabmenu background */
  /* --C_DARKBLUE:   #2A2A65;   (dark blue/black) text for tabmenu: top-items, dropdown-items */
  /* --C_DARKGREY:   #252525;   (dark blue/black) text for tabmenu: top-items, dropdown-items */
  /* --C_BLACK:      #000000;   nearly black */  
  /* --C_ORANGE:     #EF711C;   */


  /* font scaling: from  BS-width 600  -> font size 14+1px 
  **               until BS-width 1200 -> font size 18+1px 
  */
  --scale-font-size-px: clamp(15px, calc(15px + (19 - 15) * (100vw - 600px) / (1200 - 600)), 19px);
  
  /* man verwende diese Skalierung derzeit nur für <h4>*/
  --root-font-size-px: clamp(18px, calc(18px + (24 - 18) * (100vw - 400px) / (800 - 400)), 24px);
}

body {
  /* --- overwrite related to bootstrap.css --- */ 
  /* font-family: "Open Sans" -> existiert font-family */
  /*              "Segoe UI"  -> built-in Schrift nur unter Windows */
  font-family: "Open Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, "Arial", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

/*  
** font-weight: normal;
** color: var(--C_BLACK);
** 
** max-width: 60rem;
** margin: auto;
** background: url("bg_grey_stone.jpg") repeat;
** background-color: #404040;
*/
}


.card-bg {
  background-color:#DDDDDD;
}

.card-hover {
  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
  text-decoration: none;
}
.card-hover:hover {
  background-color:#eaeaea;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.card-hover:hover img {
  opacity: 0.50;
}

/* Textkörper mehrzeilig, bündig untereinander schreiben */
.column-align-table {
  display: table;
}
.column-align-row {
  display: table-row;
}
.column-align-left-side {
  display: table-cell;
  text-align: left;
  /* white-space: pre; -> vgl. HTML <pre>: 
  ** der Text wird genauso ausgegeben wie im Textfile gegeben (Quellcode),
  ** d.h. kein autom. Zeilenumbruch 
  */
  /* ich möchte mit Zeilenumbruch arbeiten */
  /* __white-space: pre; */
}
.column-align-right-side {
  display: table-cell;
  text-align: right;
  /* ich möchte mit Zeilenumbruch arbeiten */
  /* __white-space: pre; */
}

/* media query, aktiv falls Fenster-Breite > 576px (Desktop) */
@media (min-width: 576px) {
  __h3::after { 
    content:'?Desktop'; 
  }
}

/* media query, aktiv falls Fenster-Breite < 576px (Handy) */
@media (max-width: 576px) {
  __h3::after { 
    content:'?-Handy'; 
  }
}


@media (min-width: 576px) {
  :root {
   --myExampleHeight: auto;
  }
}
@media (min-width: 768px) {
  :root {
   --myExampleHeight: 3.0em;
  }
}
@media (min-width: 992px) {
  :root {
   --myExampleHeight: 3.0em;
  }
}
@media (min-width: 1200px) {
  :root {
   --myExampleHeight: 2.3rem;
  }
}
@media (min-width: 1400px) {
  :root {
   --myExampleHeight: 2.3rem;
  }
}

/* nur ein Beispiel */
.media-myExampleHeight {
  height: var(--myExampleHeight);
}


/*----------------------------------------------------------------------------*/
/* bootstrap.css überschreiben */

p, li, ul {
  /* noch ist es unklar, ob die Schrift skaliert werden soll, 
  ** der Eindruck hängt vom Monitor ab
  */
  font-size: round(nearest, var(--scale-font-size-px) * 1.0, 0.5px);
}

h4 {
  font-size: round(nearest, var(--root-font-size-px) * 1.2, 1px);
} 

a {
  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
  text-decoration: none;
}
a:hover {
  color: rgba(var(--bs-link-hover-color-rgb));
  text-decoration: underline;
}

.bullet_arrow li::before {
  content: "\2794\2002";  /* Sonderzeichen &#10132; "fetter Pfeil" | &ensp; &#8194; U+2002 Abstand der Breite des 'n' */
  color: black;
  // font-weight: bold;
}

.bullet_arrow {
  list-style-type: none;
}

.display-6 {
  font-size: calc(2.0rem + 0.2vw);
  font-weight: 300;
  line-height: 1.2;
}

.max-view-width {
  max-width: 50em;
}

/*----------------------------------------------------------------------------*/
#header a {
  __color : #099;
}

/*----------------------------------------------------------------------------*/
#footer {
  background-color : #999;
}

#footer p {
  font-size: 80%;
  font-weight: normal;
  color: var(--C_FOOTER_WHITE);
  line-height: 1rem;
  white-space: nowrap;
}

/*----------------------------------------------------------------------------*/

/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v15-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Light'), local('OpenSans-Light'),
       url('../fonts/open-sans-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-300italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/open-sans-v15-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
       url('../fonts/open-sans-v15-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/open-sans-v15-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Italic'), local('OpenSans-Italic'),
       url('../fonts/open-sans-v15-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v15-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
       url('../fonts/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/open-sans-v15-latin-600italic.eot'); /* IE9 Compat Modes */
  src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
       url('../fonts/open-sans-v15-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-600italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-600italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('../fonts/open-sans-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/open-sans-v15-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
       url('../fonts/open-sans-v15-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-800 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/open-sans-v15-latin-800.eot'); /* IE9 Compat Modes */
  src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
       url('../fonts/open-sans-v15-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-800italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/open-sans-v15-latin-800italic.eot'); /* IE9 Compat Modes */
  src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'),
       url('../fonts/open-sans-v15-latin-800italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-800italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-800italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-800italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-800italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}