/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/
/*
Main: #009999 R:0 G:153 B:153
Main-Dark:  #007d7d R:0 G:125 B:125
Main-Darkest:  #003333 R:0 G:51 B:51
Main-Bright:  #a8ecec R:168 G:236 B:236
Secondary: #663333 R:102 G:51 B:51
Secondary-Dark: #683333 R:51 G:25 B:25
*/
/*
Min screen width: 360px
Max screen width: 1440px
*/
/*
Abstände der Texte
padding-left & padding-right: 16
Bei Rahmen Textabstand: Oben: 24 | Unten: 36
*/
/*
Bildgrößen
Teaser Vorschaubild: 1280 × 720
Teaser Vorschaubild: 960 × 540
*/

/* ========================
   DESKTOP (Standard)
   ======================== */

.einleitung-all {
    margin-bottom: 2rem;
}

.artikel-single {
    margin-bottom: 2rem;
}

.artikel-media {
    margin-top: 2rem;
    margin-bottom: 2.5rem;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.artikel-text-basic {
    margin-bottom: 1rem;
}
.artikel-text-basic:last-child {
    margin-bottom: 2rem;
}

.teaser-all {
    margin-bottom: 2rem;
}

.teaser-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 2rem;
}

.teaser-box {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
}

.teaser-title {
    margin-top: 1.5rem;
    margin-bottom: 0.6rem;
    color: #009999;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.2rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
}

.teaser-link {
    text-transform: uppercase;
    color: #702B2B;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.1rem;
    align-self: flex-end;
	margin-top: 0.5rem;
	margin-bottom: 1rem;
}
.link-block {
	display: block;
	color: #702B2B;
	text-decoration: underline;	
}

.artikel-head-h1 {
    color: #009999;
    letter-spacing: 0.1rem;
    margin-top: 1.2rem;
	line-height: 3.8rem;
	margin-bottom: 0.8rem;
}

.artikel-head-h2 {
    width: 100%;
    max-width: 100%;
	color: #666666;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    margin-top: 1.2rem;
	line-height: 2.8rem;
	margin-bottom: 0.8rem;
}

.artikel-head-h3 {
	font-weight: 600;
	font-size: 2.2rem;
	line-height: 2.5rem;
	color: #666666;
	padding-top: 0.2rem;
	padding-bottom: 0.7rem;
}


.artikel-bildunterschrift {
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
    color: #333333;
}

.artikel-bildunterschrift:last-child {
    padding-bottom: 5rem;
}

/* ========================
   TABLET PORTRAIT (bis 991px)
   ======================== */
@media (max-width: 991px) {

	
	.artikel-single {
		width: 100% !important;
		max-width: 100% !important;
        overflow: hidden;
    }
	 .artikel-single {
        width: 100% !important;
        overflow: hidden;
    }
    .artikel-media img {
        width: 100% !important;
        height: auto !important;
    }
	.artikel-media {
        padding-left: 3rem;
    }
    .einleitung-all .artikel-text-basic,
    .einleitung-all .artikel-head-h1 {
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .teaser-container {
        flex-wrap: wrap !important;
    }
    .teaser-box {
        flex: 1 1 100%;
    }
    .teaser-title, .teaser-text, .teaser-link,
    .artikel-head-h1, .artikel-head-h2, .artikel-head-h3,
    .artikel-text-basic, .artikel-bildunterschrift, .link-block {
        padding-left: 3rem;
        padding-right: 3rem;
    }

	.artikel-bildunterschrift {
        padding-left: 0;
        padding-right: 0;
    }
	.artikel-bildunterschrift:last-child {
        padding-bottom: 3.5rem;
    }
	
}

/* ========================
   MOBILE LANDSCAPE (bis 767px)
   ======================== */
@media (max-width: 767px) {
        .artikel-single {
        overflow: hidden;
    }
	.artikel-media {
        grid-template-columns: 1fr !important;
		padding-left: 0;
    }
	
	.artikel-bildunterschrift:last-child {
        padding-bottom: 0.5rem;
    }
    .artikel-media img {
        width: 100% !important;
        height: auto !important;
    }
		.artikel-bildunterschrift {
        padding-left:3rem;
        padding-right: 3rem;
    }
}

/* ========================
   MOBILE PORTRAIT (bis 478px)
   ======================== */
@media (max-width: 478px) {
}