/* Definieren von Grundfarben im System */

:root {
  --hauptfarbe_verwaltung: #315A84; /* graublau */
  --hauptfarbe_verwaltung_alternativ: #22364A; /* dunkleres graublau */
  --hauptfarbe_verwaltung_hellhinterg: #dce2e8; /* graublau hell als Hintergrundfarbe */
  --hauptfarbe_verwaltung_dunkelhinterg: #acc0d5; /* graublau dunkler als Hintergrundfarbe */
  
  --hauptfarbe: #8f101e; /* mediamor rot */
  --hauptfarbe_alternativ: #ab313f; /* hellere Version des mediamor rot */
  --hauptfarbe_hellhinterg: #efe2e3; /* leicht gefärbtes hellgrau in Richtung Hauptfarbe */
  --hauptfarbe_dunkelhinterg: #c19da1; /* leicht gefärbtes dunkleres grau in Richtung Hauptfarbe */
  --zweitfarbe: #003068; /* 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 */
  --back_to_top_btn_hg_farbe: #eaeaea; /* hellgrau */
  --system_dlg_titel_farbe: #eaeaea; /* hellgrau */
  
  color-scheme: auto !important;
}

/* Definieren von Grundwerten im System */

:root {
  --borderradius: 5px; /* Standard Border Radius */
}


.indiv_seitenvorlage {display: flex; flex-wrap: wrap;}

.meldung {margin: 10px auto; padding: 3px 10px; border-left: solid 4px var(--meldung); color: var(--meldung); background-color: var(--hell); width: calc(100% - 24px);}

.hinweis {margin: 10px auto; padding: 3px 10px; border-left: solid 4px var(--hinweis); color: var(--hinweis); background-color: var(--hell); width: calc(100% - 24px);}

.bold {font-weight: bold;}

.strong_link {text-decoration: underline; color: inherit;}
.strong_link:hover {cursor: pointer; color: var(--dunkel)}

.a_als_button {background-color: var(--hauptfarbe); color: var(--hell); border: 2px solid var(--hauptfarbe); border-radius: 5px; padding: 4px 8px; transition: 0.3s; display: inline-flex; margin: 8px 0;}
.a_als_button:hover {background-color: var(--hell); color: var(--dunkel); cursor: pointer;}



input[type="submit"] {-webkit-appearance: none; /* Damit auf Apple-Geräten nicht der hässliche Default-Button angezeigt werden, sondern unser CSS verwendet wird. Dadurch werden aber auch sonst grundlegendene, voreingestellte Dinge entfernt, wie der Hover-Effekt, deshalb folgendes CSS (würde alles von inputs, was nur durch Classes beschrieben ist, überschreiben, deshalb erstmal wieder ausgeklammert*/ /*border-radius: 3px; border: 1px solid gray; background-color: #d8d8d8; padding: 2px 7px; transition: 0.3s;*/}
input[type="submit"]:hover {cursor: pointer; /*background-color: #eaeaea;*/}

input[type="submit"].gesperrt {
 opacity: 0.5;
 cursor: not-allowed;
}

button.gesperrt {
  opacity: 0.5;
  cursor: not-allowed;
}

button {-webkit-appearance: none;}

/*Ein- und Aufklappen*/
.element_oeffnen {display: block; }
.element_schliessen {display: none; }

.datei_download_multi .download_beschreibung_haupt p  {margin: 0 !important;}
.datei_download_multi .download_beschreibung_haupt p a {border-bottom: unset !important;}
.datei_download_multi .download_beschreibung_haupt .download_beschreibung_haupt_groesse {color: var(--dunkelgrau); padding-top: 0.3em;}

.multibox_bearbeiten .cms_button {background-color: var(--hauptfarbe_verwaltung); margin: 3px 0 0 0; color: var(--hell); border: 2px solid var(--hauptfarbe_verwaltung); transition: 0.2s; padding: 5px 10px;}
.multibox_bearbeiten .cms_button:hover {cursor: pointer; background-color: var(--hell); color: var(--hauptfarbe_verwaltung);}


/*Baustein Bearbeiten Redsign übernommen von Multibox*/

#bausteine_bearbeiten_span .el_bearbeiten_redesign {position: fixed; width: 100%; top: 0; left: 0; z-index: 180;}
#bausteine_bearbeiten_span .el_bearbeiten_redesign .baustein_bearbeiten {width: 85em; height: 78vh;}
#bausteine_bearbeiten_span .el_bearbeiten_redesign .baustein_bearbeiten_kopf {background-color: var(--hauptfarbe_verwaltung); width: calc(100% - 30px); padding: 6px 15px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
#bausteine_bearbeiten_span .el_bearbeiten_redesign .baustein_bearbeiten_kopf .x {position: relative !important; top: unset !important; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; order: 2; background-color: var(--hell); padding: 3px; border-radius: 3px;}

#bausteine_bearbeiten_span .el_bearbeiten_redesign .bst_bearbeiten_body { overflow-y: auto;overflow-x: hidden; width: 99%; height: 73vh; padding: .4em; background-color: var(--hellgrau);}
#bausteine_bearbeiten_span .el_bearbeiten_redesign .bst_bearbeiten_body .formular_unterteilung_horizontal { display: grid; gap: 0.8em; grid-template-columns: 22% 76%;}
#bausteine_bearbeiten_span .el_bearbeiten_redesign .bst_bearbeiten_body .bst_bearbeiten_formular_sektion {margin: 10px; background-color: var(--hell); width: calc(100% - 30px); padding: 8px 15px; box-shadow: 0 0 15px -10px #000000; border-radius: 5px; display: block;}

#bausteine_bearbeiten_span .el_bearbeiten_redesign .bst_bearbeiten_body .bst_bearbeiten_formular_titel { height: 26px; width: 3.32em; margin: 3px 12px 0.9em 0; display: inline-block; font-weight: bold; font-size: 1.55em;}
#bausteine_bearbeiten_span .el_bearbeiten_redesign .bst_bearbeiten_body .bst_bearbeiten_formular_titel_eingabe { font-size: 1.55em; width: 80%;}
#bausteine_bearbeiten_span .el_bearbeiten_redesign .bst_bearbeiten_body .bst_bearbeiten_formular_text { width: 97%;}
#bausteine_bearbeiten_span .el_bearbeiten_redesign .bst_bearbeiten_body .bildkasten {margin: 10px; background-color: var(--hell); display: block; width: calc(100% - 30px); padding: 8px 15px; box-shadow: 0 0 15px -10px #000000; border-radius: 5px;}
#bausteine_bearbeiten_span .el_bearbeiten_redesign .bst_bearbeiten_body .cms_button {background-color: var(--hauptfarbe_verwaltung); margin: 3px 0 0 0; color: var(--hell); border: 2px solid var(--hauptfarbe_verwaltung); transition: 0.2s; padding: 5px 10px;}
#bausteine_bearbeiten_span .el_bearbeiten_redesign .bst_bearbeiten_body .cms_bildbox_oben .cms_button {margin-bottom: 0.8em; margin-left: 0.5em;}
#bausteine_bearbeiten_span .el_bearbeiten_redesign .bst_bearbeiten_body h4 {width: 100%; font-size: 1.2rem; line-height: 1.5rem; margin: 10px 0 5px 3px !important;}

#bausteine_bearbeiten_span .el_bearbeiten_redesign .bst_bearbeiten_body .bst_bearbeiten_formular_untertitel {height: 26px; margin: 3px 12px 0.5em 0; display: inline-block; font-weight: bold; font-size: 1.15em}
#bausteine_bearbeiten_span .el_bearbeiten_redesign .bst_bearbeiten_body  .bst_bearbeiten_formular_untertitel_eingabe {font-size: 1.15em; width: 80%;}

#bausteine_bearbeiten_span .el_bearbeiten_redesign .bst_bearbeiten_body .bst_bearbeiten_formular_sektion.multi {display: grid; grid-template-columns: 19% 78%; row-gap: 10px; padding-bottom: 1.7em;}
#bausteine_bearbeiten_span .el_bearbeiten_redesign .bst_bearbeiten_body .bst_bearbeiten_formular_sektion.multi .bst_bearbeiten_formular_titel {width: auto;}
#bausteine_bearbeiten_span .el_bearbeiten_redesign .bst_bearbeiten_body .bst_bearbeiten_formular_sektion.multi .bst_bearbeiten_formular_untertitel {width: auto;}
#bausteine_bearbeiten_span .el_bearbeiten_redesign .bst_bearbeiten_body .bst_bearbeiten_formular_sektion.multi select {width: unset}
#bausteine_bearbeiten_span .el_bearbeiten_redesign .bst_bearbeiten_body .bst_bearbeiten_formular_sektion.multi input {width: unset}

/*Download Multi*/
#bausteine_bearbeiten_span .el_download_bearbeiten .bst_bearbeiten_body .download_datei_auswaehlen { margin-bottom: 0.5em;}
#bausteine_bearbeiten_span .el_download_bearbeiten .download_element_bearbeiten_datei td { padding: 0.4rem}