:root {
  --hauptfarbe: #0a2863; /* mediamor rot */
  --hauptfarbe_alternativ: #304877; /* hellere Version des mediamor rot */
  --hauptfarbe_hellhinterg: #dfe2e9; /* leicht gefärbtes hellgrau in Richtung Hauptfarbe */
  --hauptfarbe_dunkelhinterg: #b1b4bd; /* leicht gefärbtes dunkleres grau in Richtung Hauptfarbe */
  --zweitfarbe: #6f1540; /* dunkelblau */
  --hell: #ffffff; /* weiß */
  --hell_transparent: #ffffff45; /* weiß, stark durchsichtig */
  --hell_wenig_transparent: #ffffffab; /* weiß, wenig durchsichtig */
  --hellgrau: #eaeaea; /* helles grau */
  --mittelgrau: #afafaf; /* mittelgrau - zwischen hellgrau und grau */
  --grau: gray; /* grau */
  --dunkelgrau: #696969; /* dunkelgrau */
  --schwarzgrau: #404040; /* besonders dunkeles grau */
  --dunkel: #000000; /* schwarz */
  --hinweis: darkgreen; /* dunkelgrün */
  --meldung: #900; /* dunkelrot */
}




/*------------- Allgemein ----------------*/

#inhalt h1 {color: var(--zweitfarbe); font-family: sans-serif; font-weight: normal; font-size: 2rem; line-height: 2.8rem; margin-bottom: 10px; margin-top: 0;}
#inhalt h2 {color: var(--hauptfarbe); font-family: sans-serif; font-weight: normal; font-size: 1.6rem; line-height: 2.4rem; margin-top: 10px;}
#inhalt h3 {color: var(--hauptfarbe); font-family: sans-serif; font-weight: bold; font-size: 1.4rem; line-height: 2rem;}

#inhalt a {color: var(--zweitfarbe);}
#inhalt a:hover {text-decoration: underline;}



/*------------- Bilderleiste ----------------*/

#bilderleiste {height: 22vh;}
#bilderleiste a {height: 75%; max-width: 80%;}
#bilderleiste a img {max-width: 100%; object-fit: contain;}









/*------------- Inhalt ----------------*/

#vorl200_sprungmarken_bausteinbereiche li a {background-color: var(--hauptfarbe); letter-spacing: 1px; text-transform: uppercase; padding: 5px 15px;}
#vorl200_sprungmarken_bausteinbereiche li a:hover {background-color: var(--zweitfarbe); text-decoration: none;}



.bausteinbereich {display: flex; flex-wrap: wrap; align-items: flex-start;}
.nurtext_global {width: 100%; padding: 0; margin: 8vh 0 1vh 0;}
.kurztext_global {flex: 1; min-width: 300px; max-width: 100%; flex-direction: column; margin: 15px 30px 15px 0; background-color: var(--hauptfarbe_hellhinterg); border-radius: 5px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
.kurztext_global h3 {margin: 10px 0 5px 0;}
.kurztext_global h3 .beruf {font-weight: normal; font-size: 1rem;}
.kurztext_global .kurztext_nur_der_text {display: flex !important; flex-wrap: wrap;}
.kurztext_global .kurztext_nur_der_text .kurztext_text_div {padding-left: 0 !important;}
.kurztext_global .kurztext_nur_der_text .kurztext_text_div p {margin: 8px 0; font-size: 0.9rem; line-height: 1.5rem;}

.kurztext_global .kurztext_nur_der_text .kurztext_bilderleiste .kurztext_einzelbildkasten {margin-right: 10px;}
.kurztext_global .kurztext_nur_der_text .kurztext_bilderleiste .kurztext_einzelbildkasten .bildausgabe input[type="image"] {border-radius: 5px;}




/*------------- Fuß ----------------*/
#fuss {min-height: 7vh; color: var(--hell);}
#fuss a {color: var(--hell); text-transform: uppercase; letter-spacing: 3px; transition: 0.3s; margin: 5px 10px;}
#fuss a:hover {color: var(--hell); letter-spacing: 1px;}



@media screen and (max-width: 768px) {
 .kurztext_global .kurztext_nur_der_text .kurztext_bilderleiste {width: auto !important; max-width: 100%;}
}