@font-face {
  font-family: 'SourceSans3';
  src: url('/SourceSans3-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'WorkSans';
  src: url('/WorkSans-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* inkludiertes CSS Reset */
div, span, h1, h2, h3, h4, h5, h6, p, a, img, dl, dd, ul {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

/* Base HTML Styles */
html {
    font-size: 62.5%;
    line-height: 1.5;
}

body {
    font-size: 1.6rem;
	font-family: 'WorkSans', Arial, sans-serif;
    background-color: #E3F4F3;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    text-decoration: none;
}

dd {
    list-style: none;
}

img {
    vertical-align: middle;
    max-width: 100%;
}


h1 {
	font-size: 4.0rem;
    margin-bottom: 3.0rem;
}

h2 {
	font-size: 2.6rem;
    margin-bottom: 2.0rem;
}

.page-wrapper {
	flex: 1;
    padding: 9.0rem 0 10.0rem;
    text-align: center;
    position: relative;
}

.main-container {
    max-width: 120.0rem;
    margin: 3rem auto;
}

.content {
    max-width: 90.0rem;
    margin: 0 auto;
    text-align: left;
    line-height: 1.6;
}

.g3-7 {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3rem;
}

.g4-6 {
    display: grid;
    grid-template-columns: 4fr 6fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3rem;
}

.g5-5 {
    display: grid;
    grid-template-columns: 5fr 5fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3rem;
}

.g6-4 {
    display: grid;
    grid-template-columns: 6fr 4fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3rem;
}

.g7-3 {
    display: grid;
    grid-template-columns: 3fr 7fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3rem;
}

.presentation-area {
    display: grid;
    grid-template-columns: 4fr 6fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 5.0rem;
}

.presentation-area.presentation-area-flip {
    grid-template-columns: 6fr 4fr;
}

.presentation-area img {
	position: sticky;
	top: 8rem;
	align-self: start;
	transform: scale(0.7);
	transform-origin: center;
}

.presentation-area .text-content {
    text-align: left;
}

.presentation-area .text-content p {
    font-size: 1.6rem;
    color: #0026FF;
    margin-bottom: 1.5rem;
}

.more-link:hover::after {
    transform: translateX(0.5rem);
}

.logo-container {
    margin-bottom: 4.0rem;
}

.logo {
    max-width: 20.0rem;
    height: auto;
	margin: 0 auto;
}

.content hr{
    margin-top: 2.0rem;
    margin-bottom: 2.0rem;
	border: none;
    border-top: 0.5px solid;
}	

.content h1 {
    text-align: center;
}

.content h2 {
    margin-top: 4.0rem;
    padding-bottom: 1.0rem;
	
	/*
    border-bottom: 2px solid;
	border-color: #0026FF;
	*/
}

.icon-list {
    text-align: left;
}

.icon-list dd {
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
    position: relative;
}
.icon-list dd:before {
    position: absolute;
    display: inline-block;
    color: #0026FF; 
    font-size: 2.0rem;
    top: -0.4rem;
    left: -2.0rem;
}

/* Diverse Icons */
.icon-list.arrow dd:before {
    content: '▶';
}

.icon-list.bullet dd:before {
    content: '•';
}

.icon-list.check dd:before {
    content: '✓';
}

.icon-list.star dd:before {
    content: '★';
}

.icon-list.warning dd:before { 
	content: '⚠'; 
}

.icon-list.info dd:before { 
    content: "\2139"; 
    font-weight: bold;
	}

.icon-list.heart dd:before { 
	content: '♥'; 
}


.content h3 {
    margin-top: 3.0rem;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
}

.content p {
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
}

.content ul {
    margin-bottom: 1.5rem;
    padding-left: 2.0rem;
}

.content ul li {
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
}


@media all and (min-width: 1201px) {

    .presentation-area {
        max-width: 100.0rem; 
        margin: auto;
        margin-bottom: 10.0rem; 
    }
}

@media all and (max-width: 1200px) {

    .main-container {
        margin: 3rem 1.5rem;
    }
}

@media all and (max-width: 750px) {
	
    .page-wrapper {
        overflow: visible;
    }
	
    .g3-7,
    .g4-6,
    .g5-5,
    .g6-4,
	.g7-3,
    .presentation-area,
    .presentation-area.presentation-area-flip {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
    
    .presentation-area .text-content {
        margin-top: 0;
    }
    
    .presentation-area-flip img {
        order: 2;
    }
    
    .presentation-area-flip .text-content {
        order: 1;
        margin-top: 0;
        margin-bottom: 0.2rem; 
    }    
	
	.presentation-area img {
        transform: scale(0.5);
        position: static;
    } 
	
	.icon-list dd:before {
      left: -1.5rem;
    }

    html {
        font-size: 80%;
    }
}