@font-face {
	font-family: 'FiraSans';
	font-weight: 400;
	src: url('../fonts/FiraSans-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'FiraSans';
	font-weight: 600;
	src: url('../fonts/FiraSans-SemiBold.ttf') format('truetype');
}

@font-face {
	font-family: 'Lobster';
	src: url('../fonts/Lobster-Regular.ttf') format('truetype');
}

:root {
	--clr-primary: #ff7e00;
	--clr-primary-light: #ffa965;
	--clr-primary-dark: #a45311;
	--clr-photo: #bd2e59;
	--clr-photo-shift: #ff2465;
	--clr-dl: #b3c819;
	--clr-dl-shift: #cfeb00;
	--clr-contact: #122950;
	--clr-contact-shift: #018be8;
	--clr-base: #282828;
	--clr-neutral: #f3f3f3;
	--clr-white: #ffffff;
	--clr-shadow: rgba(0, 0, 0, 0.28);
	
	--svg_white: white;
	--svg-light: #fff;
	--svg-dark: #000;
	
	--ff-primary: 'FiraSans', sans-serif;
	--ff-hero: 'Lobster', sans-serif;
	--fw-regular: 400;
	--fw-semi-bold: 600;
/*-------------------------------------------###*/
	--page-max-width: 2000px;
	/*medium*/
	--fs-body-md: clamp(1rem, 1vw + 1rem, 2.5rem);
	--lh-body-md: 1.2;
	/*small*/
	--fs-body-sm: 1rem;
	--lh-body-sm: 1.2;
	--fs-h1: clamp(2rem, 2vw + 1rem, 3rem);
	--lh-h1: 1.2;
	--fs-h2: clamp(1.66rem, 1.66vw + 0.88rem, 2.5rem);
	--lh-h2: 1.15;
	--fs-h3: clamp(1.15rem, 1.7vw, 1.5rem);
	--lh-h3: 1.3;
/*-------------------------------------------###*/
	--fs-h4: 1.375rem;
	--lh-h4: 1.45;
	--fs-h5: 1.25rem;
	--lh-h5: 1.45;
	
	--tile-hero-max-width: 654px; /*###*/
	
	--topbar-height: 4.4rem;
	--tile-radius: 1rem;
	/* --tile-gap: 1rem; */
	/* --tile-gap: 1vw; */
	--tile-gap: clamp(1rem, 0.4vw + 0.9rem, 18rem);
	/* --tile-gap: min(5%, 1rem);  ###  */
	--tile-padding: 2rem;
	--fade-duration: 400ms;

	/* Overlay tuning */
	--overlay-fade-duration: 320ms;
	--overlay-close-size: clamp(2.5rem, 4vw, 2.85rem);
	--overlay-close-font-size: clamp(1.5rem, 2vw, 2rem);
	--overlay-default-radius: 2rem;
	--overlay-default-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, 0.28);

	--contact-overlay-bg: rgba(0, 0, 0, 0.72);
	--contact-overlay-blur: 3px;
    --contact-overlay-width: min(52rem, 92vw);
    --contact-overlay-height: min(27rem, 70vh);
	--contact-overlay-dialog-bg: #ffdddd; /*###*/
	--contact-overlay-radius: var(--overlay-default-radius);
	--contact-overlay-shadow: var(--overlay-default-shadow);
	--contact-overlay-padding: 1rem;
	--contact-overlay-close-bg: rgba(126, 0, 0, 0.92);
	--contact-overlay-close-bg-hover: rgba(255, 0, 0, 0.92);
	--contact-overlay-close-color: #ffffff;

	--gallery-overlay-bg: rgba(0, 0, 0, 0.86);
	--gallery-overlay-blur: 6px;
	--gallery-overlay-width: min(160rem, 98vw);
	--gallery-overlay-height: 96vh;
	--gallery-overlay-dialog-bg: rgba(10, 10, 10, 0.22);
	--gallery-overlay-radius: 1.25rem;
	--gallery-overlay-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
	--gallery-overlay-padding: 1rem;
	--gallery-overlay-close-bg: rgba(0, 0, 0, 0.7);
	--gallery-overlay-close-bg-hover: rgba(0, 0, 0, 0.9);
	--gallery-overlay-close-color: #ffffff;
	--gallery-image-fit: contain;
	--gallery-thumbnail-size: 5.5rem;
	--gallery-thumbnail-gap: 0.65rem;
	--gallery-nav-bg: rgba(0, 0, 0, 0.4);
	--gallery-nav-bg-hover: rgba(0, 0, 0, 0.62);
	--gallery-nav-color: #ffffff;
	--gallery-caption-color: #ffffff;
	--gallery-meta-bg: linear-gradient(to top, rgba(0,0,0,.58), rgba(0,0,0,0));
	
    --description-overlay-bg: rgba(0, 0, 0, 0.72);
    --description-overlay-blur: 4px;
    --description-overlay-width: min(92rem, 96vw);
    /* --description-overlay-height: min(88vh, 60rem); */
	--description-overlay-height: clamp(80%, 100vh, 100%); /*###*/
    --description-overlay-padding: 1rem;
    --description-overlay-close-bg: rgba(0, 0, 0, 0.7);
    --description-overlay-close-bg-hover: rgba(0, 0, 0, 0.9);
    --description-overlay-close-color: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, p, ul, figure { margin: 0; }
body {
	min-height: 100%;
	font-family: var(--ff-primary);
	font-weight: var(--fw-regular);
	font-size: var(--fs-body-md);
	line-height: var(--lh-body-md);
	color: var(--clr-base);
	/* background: radial-gradient(circle at top left, #ffffff 0%, #f7f7f7 38%, #ededed 100%); */
	background: #d4d0c9;
	text-rendering: optimizeSpeed;
}
img { max-width: 100%; height: auto; display: block; object-fit: contain; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; border: 0; }
ul { padding: 0; list-style: none; }

svg {
	width: 100%;       /* Passt sich der Containerbreite an */
	height: auto;      /* Behält das Seitenverhältnis bei */
}
.svg:hover{ 
	opacity: 0.4; 
	fill: none; 
}
.svg_w100 {
	max-width: 100px; 
}
.svg_w150 {
	max-width: 150px; 
}
.svg_w200 {
	max-width: 200px; 
}
.svg_fill_none { fill: none; }
.svg_fill_white { fill: #fff; }
.svg_fill_black { fill: #000; }
.svg_fill_light { fill: var(--svg-light); }
.svg_fill_dark { fill: var(--svg-dark); }
.qr_code_svg{
	max-width: 100px; 
}
.qr_code_svg:hover{
	filter: url('assets/filter.svg#blurme5');
}
.h1, .h2, .h3, .h4, .h5 { font-weight: var(--fw-semi-bold); }
.h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); }
.hero__title, .solo__title { 
	font-family: var(--ff-hero); 
	font-size: var(--fs-h1); 
	line-height: var(--lh-h1); 
	margin: 0 0 0.6rem 0;
}
.line-break { display: block; }
.uppercase { text-transform: uppercase; }

.container {
	width: min(100%, var(--page-max-width));
	margin: 0 auto;
	/* padding-top: calc(var(--topbar-height) + 1rem); */ /*### topbar*/
}
.main { padding: 0 1rem 1rem; }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.125rem;
	padding: 0.9rem 1.5rem;
	background: var(--clr-primary);
	color: var(--clr-white);
	border-radius: 0.625rem;
	transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.btn:hover, .btn:focus-visible { 
    background: var(--clr-white);
    box-shadow: 0px 0px 4px 7px var(--clr-primary) inset;
    color: var(--clr-base);
    /* transform: scale(1.1); */
}

.topbar {
    visibility: hidden; /*###*/
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: var(--topbar-height);
	display: flex;
	align-items: center;
		background: rgba(255, 255, 255, 0.5);
		backdrop-filter: blur(3px);
		box-shadow: 0 0 1rem rgba(0, 0, 0, 0.35);
}
.nav {
	width: min(100%, var(--page-max-width));
	margin: 0 auto;
	padding: 0 1rem;
}
.nav__list {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.nav__link {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;
	padding: 0.35rem 0;
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semi-bold);
}
.nav__link::before { width: 1.5rem; height: 1.5rem; }
.nav__link--photo-icon::before { content: url('../img/icons/camera.svg'); }
.nav__link--dl-icon::before { content: url('../img/icons/dl_24_282828.svg'); }
.nav__link--home-icon::before { content: url('../img/icons/home.svg'); }
.nav__link--contact-phone-icon::before { content: url('../img/icons/contact_phone.svg'); }
.nav__link:hover::after, .active-link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.12rem;
	border-bottom: 0.45rem solid var(--clr-primary);
}

.overview__container {
	display: grid;
	/* grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); */
	grid-template-columns: minmax(0, var(--tile-hero-max-width)) minmax(50%, 1fr);
	grid-template-rows: minmax(300px, 39rem);
	grid-template-areas:
		'hero dl'
		'hero photo'
		'contact contact';
	gap: var(--tile-gap);
	padding: 0.5rem;
}
.tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	justify-content: space-between;
	min-width: 0;
	padding: var(--tile-padding);
	border-radius: var(--tile-radius);
	color: var(--clr-white);
	overflow: hidden;
	box-shadow: 0rem 0.3rem 0.6rem 0.1rem rgb(0 0 0 / 24%);
	transition: background-color var(--fade-duration) ease, color var(--fade-duration) ease, box-shadow var(--fade-duration) ease;
}
.tile:hover { 
	box-shadow: none;
	}
.tile--hero {
    grid-area: hero;
    display: block;
	position: relative; /* über .tile bereits, ist aber ok redundant */
	color: var(--clr-base);	
    border: 5px solid var(--clr-primary);
	min-height: min-content;
    min-width: auto;
	max-width: fit-content;
    /* backdrop-filter: blur(6px); */
    /* background: rgba(255, 255, 255, .72); */
}
.tile--hero:hover { 
	background-color: var(--clr-white); 
	box-shadow: 0rem 0.3rem 0.6rem 0.1rem var(--clr-primary);
	}

/* Der Bereich, der abgeschnitten wird */
.hero__clip {
    max-height: clamp(18rem, 42vh, 36rem);
    overflow: hidden;
    padding-bottom: 4.5rem; /* Platz, damit der Button nicht den Text komplett überdeckt */
}
/* Button als Overlay unten */
.hero__more {
    position: absolute;
    left: 2rem;   /* entspricht var(--tile-padding) */
    right: 2rem;  /* entspricht var(--tile-padding) */
    bottom: 2rem; /* entspricht var(--tile-padding) */
    z-index: 2;
}
/* visuelles „Ausblenden“ unten (Fade) */
.hero__clip::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4rem;
    pointer-events: none;
    /* muss zum tile--hero Hintergrund passen, hier: rgba(255,255,255,.72) */
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.72)
    );
}
/* damit ::after absolut positioniert werden kann */
.hero__clip {
    position: relative;
}

.tile--photo { 
	grid-area: photo;
	background-color: var(--clr-photo); 
}
.tile--photo:hover { 
	background-color: var(--clr-photo-shift);
	box-shadow: 0rem 0rem 0.9rem 0.1rem var(--clr-photo-shift);  
	}
.tile--dl { 
	grid-area: dl; ;
	background-color: var(--clr-dl); 
	color: var(--clr-white); 
}
.tile--dl:hover { 
	background-color: var(--clr-dl-shift); 
	color: var(--clr-base); 
	/* box-shadow: 0rem 0rem 0.9rem 0.1rem var(--clr-dl-shift); */
	/* box-shadow: inset 0rem 0.3rem 0.86rem 0.2rem var(--clr-dl); */
	.tile__title--dl-icon::after { content: url('../img/icons/dl_46_282828.svg'); }
	}
.tile--contact {
	min-height: 20rem;
	grid-area: contact;
	background-color: var(--clr-contact);
	background-image: url('../img/handshake08.webp');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 80% 50%;
	/* background-blend-mode: hard-light; */
	background-blend-mode: difference;
}
.tile--contact:hover { 
	background-color: var(--clr-contact-shift); 
	}
.tile__title { margin-bottom: 0.4rem; }
.tile__title--photo-icon, .tile__title--dl-icon, .tile__title--contact-icon {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.tile__title--photo-icon::after { content: url('../img/icons/camera_wh.svg'); }
.tile__title--dl-icon::after { content: url('../img/icons/dl_46_ffffff.svg'); }
/* .tile__title--dl-icon::after { content: url('../img/icons/dl_46_282828.svg'); } */
.tile__title--contact-icon::after { content: url('../img/icons/contact_phone_wh.svg'); }
.tile__description--hero { margin-bottom: 0.6rem; }
.tile__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: fit-content;
}
.tile__link::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.35rem;
	border-bottom: 0.35rem solid transparent;
	transition: border-color var(--fade-duration) ease;
}
.tile:hover .tile__link::before { border-color: currentColor; }
.tile__link--dark { color: inherit; }
.tile__media {
	overflow: hidden;
	border-radius: 0.75rem;
	/* background: rgba(255,255,255,.08);  */
}
.tile__media img {
    width: -webkit-fill-available;
	max-height: 300px;
    height: 100%;
    aspect-ratio: auto 16 / 10;
    object-fit: contain;
}

.catalogue { padding: 0.5rem; }
.catalogue__container__solo {
	padding: 2rem;
	border: 5px solid var(--clr-primary);
	background: rgba(255,255,255,.72);
	color: var(--clr-base);	
    border: 5px solid var(--clr-primary);
	backdrop-filter: blur(4px);
}
.ul__solo { 
	display: flex; 
	flex-direction: 
	column; gap: 1rem; 
    align-items: center;
	}
.li__solo { text-align: justify; }
.li__h2 { font-style: italic; font-weight: var(--fw-semi-bold); }
.inset {
	margin-top: 0.35rem;
	width: fit-content;
	min-width: 18ch;
	white-space: pre-wrap;
	text-align: right;
	border-bottom: solid 1px currentColor;
}

/* Overlay system */
.overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--overlay-padding, 1rem);
	background: transparent;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--overlay-fade-duration) ease, visibility 0s linear var(--overlay-fade-duration);
}
.overlay::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--overlay-bg, rgba(0, 0, 0, 0.72));
	opacity: 0;
	backdrop-filter: blur(var(--overlay-blur, 0));
	-webkit-backdrop-filter: blur(var(--overlay-blur, 0));
	transition: opacity var(--overlay-fade-duration) ease;
}
.overlay.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity var(--overlay-fade-duration) ease, visibility 0s linear 0s;
}
.overlay.is-active::before { opacity: 1; }
.overlay__dialog {
	position: relative;
	z-index: 1;
	width: var(--overlay-dialog-width, min(52rem, 92vw));
	height: var(--overlay-dialog-height, min(80vh, 42rem));
	/* background: var(--overlay-dialog-bg, #ffffff); */
	border-radius: var(--overlay-dialog-radius, var(--overlay-default-radius));
	box-shadow: var(--overlay-dialog-shadow, var(--overlay-default-shadow));
	overflow: hidden;
	opacity: 0;
	transform: translateY(0.8rem) scale(0.985);
	transition: opacity var(--overlay-fade-duration) ease, transform var(--overlay-fade-duration) ease;
}
.overlay.is-active .overlay__dialog { opacity: 1; transform: translateY(0) scale(1); }
.overlay__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--overlay-close-size);
	height: var(--overlay-close-size);
	border-radius: 999px;
	background: var(--overlay-close-bg, rgba(0, 0, 0, 0.7));
	color: var(--overlay-close-color, #fff);
	font-size: var(--overlay-close-font-size);
	line-height: 1;
	transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.overlay__close:hover, .overlay__close:focus-visible { background: var(--overlay-close-bg-hover, rgba(0,0,0,.9)); transform: scale(1.5); }
.overlay__close:focus-visible, .gallery__nav:focus-visible, .gallery__thumbnail:focus-visible, .btn:focus-visible, .nav__link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.overlay__frame { display: block; width: 100%; height: 100%; border: 0; /*background: #fff;*/ }
.overlay__close-icon { line-height: 1; }

.overlay--contact {
	--overlay-bg: var(--contact-overlay-bg);
	--overlay-blur: var(--contact-overlay-blur);
	--overlay-dialog-width: var(--contact-overlay-width);
	--overlay-dialog-height: var(--contact-overlay-height);
	--overlay-dialog-bg: var(--contact-overlay-dialog-bg);
	--overlay-dialog-radius: var(--contact-overlay-radius);
	--overlay-dialog-shadow: var(--contact-overlay-shadow);
	--overlay-padding: var(--contact-overlay-padding);
	--overlay-close-bg: var(--contact-overlay-close-bg);
	--overlay-close-bg-hover: var(--contact-overlay-close-bg-hover);
	--overlay-close-color: var(--contact-overlay-close-color);
}
.overlay--gallery {
	--overlay-bg: var(--gallery-overlay-bg);
	--overlay-blur: var(--gallery-overlay-blur);
	--overlay-dialog-width: var(--gallery-overlay-width);
	--overlay-dialog-height: var(--gallery-overlay-height);
	--overlay-dialog-bg: var(--gallery-overlay-dialog-bg);
	--overlay-dialog-radius: var(--gallery-overlay-radius);
	--overlay-dialog-shadow: var(--gallery-overlay-shadow);
	--overlay-padding: var(--gallery-overlay-padding);
	--overlay-close-bg: var(--gallery-overlay-close-bg);
	--overlay-close-bg-hover: var(--gallery-overlay-close-bg-hover);
	--overlay-close-color: var(--gallery-overlay-close-color);
}

.overlay--description {
    --overlay-bg: var(--description-overlay-bg);
    --overlay-blur: var(--description-overlay-blur);
    --overlay-dialog-width: var(--description-overlay-width);
    --overlay-dialog-height: var(--description-overlay-height);
    --overlay-padding: var(--description-overlay-padding);
    --overlay-close-bg: var(--description-overlay-close-bg);
    --overlay-close-bg-hover: var(--description-overlay-close-bg-hover);
    --overlay-close-color: var(--description-overlay-close-color);
}

.gallery {
	position: relative;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto auto;
}
.gallery__viewport {
	min-height: 0;
	display: grid;
	place-items: center;
	padding: 3.75rem 0 0;
	overflow: hidden;
}
.gallery__image {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: var(--gallery-image-fit, contain);
	box-shadow: 0 1rem 2.4rem rgba(0,0,0,.25);
}
.gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 999px;
	background: var(--gallery-nav-bg);
	color: var(--gallery-nav-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	line-height: 1;
	transition: background-color 180ms ease, transform 180ms ease;
}
.gallery__nav:hover, .gallery__nav:focus-visible { background: var(--gallery-nav-bg-hover); }
.gallery__nav--prev { left: 0.9rem; }
.gallery__nav--next { right: 0.9rem; }
.gallery__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.9rem 1.25rem 0.75rem;
	background: var(--gallery-meta-bg);
	color: var(--gallery-caption-color);
}
.gallery__caption, .gallery__counter { font-size: 0.95rem; line-height: 1.35; }
.gallery__thumbnails {
	display: flex;
	gap: var(--gallery-thumbnail-gap);
	align-items: center;
	min-height: 0;
	overflow-x: auto;
	padding: 0 1.25rem 1rem;
	scrollbar-width: thin;
}
.gallery__thumbnails:empty { display: none; }
.gallery__thumbnail {
	flex: 0 0 auto;
	width: var(--gallery-thumbnail-size);
	height: calc(var(--gallery-thumbnail-size) * 0.72);
	padding: 0;
	border: 2px solid transparent;
	border-radius: 0.55rem;
	overflow: hidden;
	background: rgba(255,255,255,.08);
	opacity: 0.72;
	transition: opacity 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.gallery__thumbnail:hover,
.gallery__thumbnail:focus-visible,
.gallery__thumbnail.is-active {
	opacity: 1;
}
.gallery__thumbnail.is-active {
	border-color: rgba(255,255,255,.88);
}
.gallery__thumbnail-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.popup-page { background: #000; color: #fff; }
.popup-page--gallery { background: #111; }
.popup-content { padding: 2rem; line-height: 1.5; }
.popup-content--gallery { max-width: 92rem; margin: 0 auto; }
.contact-actions {
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 1.5rem;
}
.contact-actions__number { font-size: clamp(1.5rem, 2.5vw, 2rem); }
.gallery-page__intro { margin: 1rem 0 1.5rem; }
.gallery-page__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}
.gallery-page__item {
	background: rgba(255,255,255,.06);
	padding: 1rem;
	border-radius: 0.75rem;
}
.gallery-page__item img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; }
.gallery-page__item figcaption { margin-top: 0.75rem; }


@media (max-width: 48rem) {
	/* .container { padding-top: calc(var(--topbar-height) + 0.75rem); } */ /*### topbar*/
	.main { padding: 0 0.5rem 0.75rem; }
	/* .topbar { height: auto; min-height: var(--topbar-height); } */ /*### topbar*/
	.nav { padding: 0.5rem 0.75rem; }
	.nav__list { gap: 0.8rem 1rem; }
	.tile { padding: 1.25rem; }
	.overview__container {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-template-areas:
			'hero'
			'dl'
			'photo'
			'contact';
	}
	.tile--hero {
			max-width: 100%
	}
	.tile--contact { 
		min-height: 20rem;
		background-position: 78% 50%;
	}
	.overlay--contact {
        --overlay-dialog-width: max(96vw, 100%);
        --overlay-dialog-height: max(40rem, 53%);
	}
	.overlay--gallery {
		--overlay-dialog-width: 98vw;
		--overlay-dialog-height: min(95vh, 95vh);
		--overlay-padding: 0.5rem;
	}
	.gallery__viewport { padding: 4rem 0 0; }
	.gallery__nav--prev { left: 0.5rem; }
	.gallery__nav--next { right: 0.5rem; }
	.gallery__meta { flex-direction: column; align-items: flex-start; }
	.contact-actions {
        display: flex;
        margin-top: 1.5rem;
        align-items: center;
        flex-wrap: unset;
        flex-direction: column;
    }
}

/* @media (max-width: 49rem) {
	.overview__container {
		grid-template-columns: 1fr;
		grid-template-areas:
			'hero'
			'photo'
			'dl'
			'contact';
	}
	.tile--contact { 
		min-height: 20rem;
		background-position: 70% 38%;
		}
} */

/* @media (prefers-reduced-motion: reduce) { */
	/* html { scroll-behavior: auto; } */
	/* .tile, .btn, .overlay, .overlay::before, .overlay__dialog, .overlay__close, .gallery__nav, .gallery__thumbnail, .tile__link::before { transition: none; } */
/* } */