:root {
	--bg: #314200;
	--text: #D59EEC;
	--muted: #6b6b6b;

	--max: 1600px;
	--pad: 0px;

	/* Typekit fonts included by https://use.typekit.net/lps3kos.css */
	--font-display: "forager", Roboto, sans-serif;
    --font-meta: Courier, sans-serif;
}

body {
	background: var(--bg);
	color: var(--text);
	line-height: 1.4;
    margin: 0px;
}

.site-header,
.site-main,
.site-footer {
    max-width: var(--max);
	margin: 0 auto;
	padding: var(--pad);
}

.site-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
    background: var(--text);
    padding-left: 2px;
}

.logo {
	font-family: var(--font-display);
	font-size: 18px;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var(--bg);
    font-weight: 700;
}

/*.site-main {
	padding-top: 56px;
	padding-bottom: 56px;
}*/

.headline {
	font-family: var(--font-display);
	font-size: clamp(32px, 5vw, 64px);
	line-height: 1.05;
	letter-spacing: 0.08em;
	margin-bottom: 28px;
    font-weight: 700;
    text-transform: uppercase;
}

.meta-text{
    font-family: var(--font-meta);
}

.underline{
    border-bottom: 1px solid;
}

.image-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(3, 1fr);
	gap: 0px;
    min-height: 100vh;
    min-height: 100dvh;
}

.preview {
	overflow: hidden;
	background: #f6f6f6;
    margin: 0px;
}

.preview img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* Layout im Grid */
.preview--1 {
	grid-column: 1 / 2;
	grid-row: 1 / 3; /* über 3 Zeilen */
}

.preview--2 {
	grid-column: 2 / 3;
	grid-row: 2 / 3; /* 2. Zeile, 2. Spalte */
}

.preview--3 {
	grid-column: 3 / 4;
	grid-row: 1 / 1; /* 3. Zeile, 3. Spalte */
}

.preview--4 {
	grid-column: 3 / 4;
    grid-row: 3 / 4; /* 3. Zeile, 3. Spalte */    
}

.text--1{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    padding: 20px;
}

.text--2{
    grid-column: 3 / 4;
    grid-row: 2 / 2;
    padding: 20px;
}

.text--3{
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    padding: 20px;
    border-right: 1px dotted var(--text);
}

.text--4{
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    padding: 20px;
	align-content: end; 
    text-align: right;

}

@media (max-width: 640px){
	.image-grid{ grid-template-columns: 1fr; }
}