:root {
  --primaryFarbe: #F07058; 
  --primaryDownFarbe: #8f4335; 
  --linkFarbe: #F07058; 
  --linkHoverFarbe: #8f4335; 
  --hauptFarbe: #555;
  --hintergrundFarbe: #dadada;
  --uerberschriftFarbe: rgb(59,60,66); 
  --fehlerFarbe: #FF0040;
  --gitternetzlinien: lightgrey;
  

}

/* =============================================================================
 * body
 * ========================================================================== */
body {
	color: var(--hauptFarbe);
	font-size: 16px;
	font-family: 'Source Sans Pro', sans-serif;
	line-height: 1.5;
	font-weight: normal;
	position: relative;
}

/* =============================================================================
 * font classes
 * ========================================================================== */

.font_serif_2 {
	font-family: 'Playfair Display', Georgia, Times, serif;
}

/* =============================================================================
 * headlines
 * ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	margin-bottom: 25px;
	line-height: 1.3;
	color: var(--uerberschriftFarbe);
	word-wrap: break-word;
}

h1 {
	font-size: 45px;
	padding-top: 0;
}

h2 {
	font-size: 35px;
}

h3 {
	font-size: 28px;
}

h4 {
	font-size: 25px;
}

h5 {
	font-size: 20px;
}

h6 {
	font-size: 18px;
}



/* =============================================================================
 * Heikos Abschnitt
 * ========================================================================== */

a:link {
	color: var(--linkFarbe);
	text-decoration:none;
}
a:visited {
	color: var(--linkFarbe);
	text-decoration:none;
}
a:active {
	color: var(--linkHoverFarbe);
	text-decoration:none;
}
a:hover {
	color: var(--linkHoverFarbe);
	text-decoration:none;
}


/*Tabellen by Heiko*/
.table_with_border
{
border: 1px solid var(--gitternetzlinien);
background: var(--hintergrundFarbe);
font-size:100%;
}

.table_without_border
{
border: 0px solid var(--gitternetzlinien);
font-size:100%;
}
.head_left {
font-weight:bold;
border-bottom: 1px solid var(--gitternetzlinien);
border-right: 1px solid var(--gitternetzlinien);
padding: 3px 0px 5px 5px; /*top right bottom left*/
vertical-align:top;
}

.head_middle {
font-weight:bold;
vertical-align:top;
border-bottom: 1px solid var(--gitternetzlinien);
border-right: 1px solid var(--gitternetzlinien);
padding: 3px 0px 5px 5px; /*top right bottom left*/
}

.head_right {
font-weight:bold;
vertical-align:top;
border-bottom: 1px solid var(--gitternetzlinien);
padding: 3px 5px 5px 5px; /*top right bottom left*/
}

.column_left {
border-right: 1px solid var(--gitternetzlinien);
vertical-align:top;
padding: 7px 2px 7px 5px; /*top right bottom left*/
}
.column_left_bold {
font-weight:bold;
border-right: 1px solid var(--gitternetzlinien);
vertical-align:top;
padding: 5px 2px 0px 5px; /*top right bottom left*/
}

.column_middle {
border-right: 1px solid var(--gitternetzlinien);
vertical-align:top;
padding: 5px 2px 7px 5px; /*top right bottom left*/
}

.column_middle_bold {
font-weight:bold;
border-right: 1px solid var(--gitternetzlinien);
vertical-align:top;
padding: 5px 2px 0px 5px; /*top right bottom left*/
}

.column_right {
vertical-align:top;
padding: 5px 2px 7px 5px; /*top right bottom left*/
}

.column_right_center {
padding: 5px 2px 7px 5px; /*top right bottom left*/
text-align:center;
vertical-align:top;
}

.unten {
background: var(--hintergrundFarbe);
border:solid var(--gitternetzlinien);
border-width: 0px 0px 1px 0px; /*top right bottom left*/
padding: 0px 0px 0px 0px; /*top right bottom left*/
}

hr {
	
}

.code-example {
	background-color: #f9f9f9;
	border-left: 3px solid #f36d33;
	padding: 10px;
	margin: 20px 0;
	overflow: auto;
}

.custom-container-no-padding {
  max-width: 1480px;
  margin: -40px auto 0; /* Verschiebt das Element um 10px nach oben */
  padding: 0;
  box-sizing: border-box;
  background-color: white; /* Setzt die Hintergrundfarbe des Containers auf weiß */
}


.custom-container {
    max-width: 14800px;
    margin: 20px auto 0 auto; /* Abstand oben (20px), zentriert horizontal */
    padding: 10px;
    box-sizing: border-box;
    background-color: white;
}

.button-container {
    max-width: 1480px;            /* Maximale Breite des Containers, beschränkt auf 1440px */
    margin: 0 auto;               /* Zentriert den Container horizontal durch automatischen linken und rechten Außenabstand */
    padding: 0px;                 /* Kein innerer Rand innerhalb des Containers */
    box-sizing: border-box;       /* Sorgt dafür, dass Padding und Border zur Gesamtbreite des Elements gezählt werden */
    background-color: white;      /* Setzt die Hintergrundfarbe des Containers auf weiß */
    
    display: flex;                /* Verwendet Flexbox, um ein flexibles Layout zu erstellen */
    flex-wrap: wrap;              /* Optional: Elemente werden umgebrochen, wenn sie den verfügbaren Platz überschreiten */
    gap: 10px;                    /* Fügt einen Abstand von 10 Pixeln zwischen den Elementen hinzu */
    /* justify-content: space-around;  Zentriert die Elemente und fügt Platz zwischen ihnen hinzu, vorübergehend deaktiviert */
    flex-grow: 1;                 /* Erlaubt jedem Element, den verfügbaren Platz gleichmäßig zu nutzen */
    flex-basis: 0;                /* Startet mit einer Basisbreite von 0, um den Platz gleichmäßig zu verteilen */
}