/*
Theme Name: Studio Eins
Description: Schlankes Theme fuer studioeinsrecords.de ohne Page Builder. Startseite, Header und Footer liegen als Templates im Theme. Der Hinweis "Wichtige Info" wird im Backend unter dem gleichnamigen Menuepunkt gepflegt.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: studio-eins
*/

:root {
	--se-ink: #2B2C2C;
	--se-ink-soft: #54595F;
	--se-muted: #7A7A7A;
	--se-bg: #FFFFFF;
	--se-alert: #D11B1B;
	--se-link: #1321CF;
	--se-nav: #1C244B;
	--se-nav-hover: #324A6D;
	--se-nav-panel: #F3F5F8;
	--se-rule: #9B9B9B;
	--se-font: "Roboto", sans-serif;
	--se-font-nav: "Poppins", sans-serif;
	--se-width: 1140px;
	--se-pad: 10px;
	--se-inset: 150px;
	--se-header-h: 100px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--se-bg);
	color: var(--se-ink);
	font-family: var(--se-font);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }

:where(h1, h2, h3, h4, h5, h6) {
	margin: 0.5rem 0 1rem;
	font-family: var(--se-font);
	font-weight: 600;
	line-height: 1.2;
	color: var(--se-ink);
}
:where(h1) { font-size: 2.5rem; }
:where(h2) { font-size: 2rem; }
:where(h3) { font-size: 1.75rem; }
:where(h4) { font-size: 1.5rem; }
:where(p) { margin: 0 0 0.9rem; }
:where(a) { color: var(--se-link); text-decoration: none; }
:where(a:hover, a:focus) { text-decoration: underline; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; clip: auto;
	padding: 10px 16px; background: var(--se-bg); color: var(--se-ink);
}

.se-wrap {
	width: 100%;
	max-width: var(--se-width);
	margin-inline: auto;
	padding-inline: var(--se-pad);
}

/* ---------- Header ---------- */

.se-header {
	position: sticky;
	top: 0;
	z-index: 95;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--se-header-h);
	margin-bottom: 5%;
	padding: 0 8%;
	background: var(--se-bg);
}
.admin-bar .se-header { top: 32px; }

.se-header__logo { display: block; flex: 0 0 auto; line-height: 0; }
.se-header__logo img { width: auto; height: 34px; }

.se-nav ul { display: flex; gap: 30px; margin: 0; padding: 0; list-style: none; }
.se-nav a {
	position: relative;
	display: block;
	padding: 5px 0;
	color: var(--se-nav);
	font-family: var(--se-font-nav);
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
}
.se-nav a::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 1px;
	background: var(--se-nav-hover);
	opacity: 0;
	transition: opacity 0.3s;
}
.se-nav a:hover, .se-nav a:focus { color: var(--se-nav-hover); }
.se-nav a:hover::after, .se-nav a:focus::after { opacity: 1; }

.se-nav-toggle {
	display: none;
	padding: 6px;
	border: 0;
	background: transparent;
	color: var(--se-nav);
	cursor: pointer;
	line-height: 0;
}
.se-nav-toggle svg { width: 24px; height: 24px; fill: currentColor; }
.se-nav-toggle .se-icon-close { display: none; }
.se-nav-toggle[aria-expanded="true"] .se-icon-menu { display: none; }
.se-nav-toggle[aria-expanded="true"] .se-icon-close { display: inline; }

/* ---------- Startseite ---------- */

.se-urgent {
	margin: 0 0 20px;
	color: var(--se-alert);
	text-align: center;
}

.se-facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 16px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	color: var(--se-ink-soft);
}
.se-facts li, .se-contact__list li { display: flex; align-items: center; gap: 6px; }
.se-icon { flex: 0 0 auto; width: 14px; height: 14px; fill: var(--se-ink); }

.se-hero { padding-block: 10px; }
.se-hero__photo { display: block; width: 100%; }
/* Logo liegt ueber dem Foto; der untere Abstand gleicht den Versatz wieder aus, damit der folgende Inhalt nicht hochrutscht. */
.se-hero__logo { margin: -284px 0 137px; text-align: center; }
.se-hero__logo img { width: 400px; }
.se-hero__logo-mobile { display: none; padding: 30px; text-align: center; }

.se-section { padding-block: 10px; scroll-margin-top: var(--se-header-h); }
.se-section--intro { margin-top: 70px; }
.se-section--gap { margin-top: 120px; }
.se-section--gap-lg { margin-top: 140px; }

.se-section__title { margin: 0 0 20px; padding-left: var(--se-inset); }
.se-section__text {
	padding-inline: var(--se-inset);
	font-size: 23px;
	text-align: justify;
}
.se-section__text > :last-child { margin-bottom: 0; }

.se-figure { margin: 30px 0 0; padding-block: 10px; text-align: center; }

/* Karussell */
.se-carousel { position: relative; margin-top: 70px; }
.se-carousel__track {
	display: flex;
	margin: 0; padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.se-carousel__track::-webkit-scrollbar { display: none; }
.se-carousel__track li { flex: 0 0 100%; scroll-snap-align: start; }
.se-carousel__track img { display: block; width: 100%; }
.se-carousel__btn {
	position: absolute; top: 50%;
	display: none;
	padding: 10px;
	border: 0;
	background: transparent;
	color: rgba(238, 238, 238, 0.9);
	cursor: pointer;
	line-height: 0;
	transform: translateY(-50%);
}
.se-js .se-carousel__btn { display: block; }
.se-carousel__btn svg { width: 22px; height: 22px; fill: currentColor; filter: drop-shadow(0 0 2px rgba(43, 44, 44, 0.6)); }
.se-carousel__btn--prev { left: 0; }
.se-carousel__btn--next { right: 0; }
.se-carousel__dots { display: flex; justify-content: center; gap: 12px; margin-top: 10px; }
.se-carousel__dots button {
	width: 6px; height: 6px; padding: 0;
	border: 0; border-radius: 50%;
	background: var(--se-ink);
	opacity: 0.2;
	cursor: pointer;
}
.se-carousel__dots button[aria-current="true"] { opacity: 1; }

/* Galerie */
.se-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}
.se-gallery a { display: block; }
.se-gallery img { display: block; width: 100%; }

.se-lightbox {
	max-width: 96vw; max-height: 96vh;
	padding: 0;
	border: 0;
	background: transparent;
}
.se-lightbox::backdrop { background: rgba(43, 44, 44, 0.88); }
.se-lightbox img { display: block; max-width: 96vw; max-height: 96vh; }

/* Kontakt */
.se-contact { margin-top: 100px; text-align: center; }
.se-contact h4 { margin: 0 0 20px; }
.se-contact h4.se-contact__hours { margin-top: 30px; }
.se-contact__list {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}
.se-contact__list a { color: inherit; }
.se-contact__list--social, .se-contact__list--social a { color: var(--se-link); }
.se-contact__list--social .se-icon { fill: var(--se-link); }

/* ---------- Unterseiten ---------- */

.se-page { padding-block: 10px 60px; }
.se-page__inner { max-width: 800px; margin-inline: auto; }
.se-page__inner--wide { max-width: none; }
.se-entry + .se-entry { margin-top: 50px; }
.se-entry__title a { color: inherit; }
.se-pagination { margin-top: 40px; }

/* ---------- Footer ---------- */

.se-footer { padding: 30px 0; background: var(--se-bg); }
.se-footer__nav { padding-bottom: 30px; border-bottom: 1px dotted var(--se-rule); }
.se-footer__nav ul {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 31px;
	margin: 0; padding: 0; list-style: none;
}
.se-footer__nav a {
	display: block;
	padding: 13px 0;
	color: var(--se-muted);
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
}
.se-footer__nav a:hover, .se-footer__nav a:focus { color: var(--se-ink); }

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	:root { --se-inset: 40px; --se-header-h: 85px; }
	.se-header { padding: 0 5%; }
	.se-header__logo img { height: 27px; }
	.se-nav a { font-size: 14px; }
	.se-hero__logo { margin: -209px 0 99px; }
	.se-hero__logo img { width: 300px; }
	.se-footer { padding: 30px 20px; }
	.se-footer__nav a { font-size: 13px; }
}

@media (max-width: 782px) {
	.admin-bar .se-header { top: 46px; }
}

/* Unter 600px scrollt die WordPress-Adminleiste mit weg; der Header klebt dann ganz oben. */
@media (max-width: 600px) {
	.admin-bar .se-header { top: 0; }
}

/* ---------- Mobil ---------- */

@media (max-width: 767px) {
	:root { --se-header-h: 65px; }
	.se-header__logo img { height: 20px; }

	.se-nav ul { flex-wrap: wrap; justify-content: flex-end; gap: 14px; }
	.se-js .se-nav-toggle { display: block; }
	.se-js .se-nav {
		position: absolute; top: 100%; left: 0; right: 0;
		display: none;
		background: var(--se-nav-panel);
	}
	.se-js .se-nav.is-open { display: block; }
	.se-js .se-nav ul { flex-direction: column; gap: 0; }
	.se-js .se-nav a { padding: 14px 20px; }
	.se-js .se-nav a::after { display: none; }

	/* Mobil: gleiches Kopfbild wie am Desktop, Logo mittig darueber. Die Werte folgen aus den
	   Seitenverhaeltnissen von Foto (1200x521) und Logo (1447x532) bei 100vw - 20px Fotobreite. */
	.se-hero__logo { margin: calc(-30.9vw + 4px) 0 calc(12.5vw - 4px); line-height: 0; }
	.se-hero__logo img { width: 50vw; }
	.se-hero__logo-mobile { display: none; }
	.se-section__text { text-align: left; }
	.se-footer { padding: 25px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.se-nav a::after { transition: none; }
}