/* Quadratdesign – statische Version, Design übernommen von der ProcessWire-Seite */

/* ---------- Schriften (Fira Sans, SIL Open Font License) ---------- */

@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/fira-sans-400.ttf) format('truetype');
}
@font-face {
	font-family: 'Fira Sans';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/fira-sans-400-italic.ttf) format('truetype');
}
@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(fonts/fira-sans-500.ttf) format('truetype');
}

/* ---------- Grundlagen ---------- */

:root {
	--dunkel: #0f0f28;
	--text: #0a0a26;
	--akzent: #ffb005;
	--linie: #f3f3f4;
	--hell: #fdfdfd;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0;
	font: 400 14px/21px 'Fira Sans', sans-serif;
	color: var(--text);
	background-color: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, th, b, strong { font-weight: 500; }
em { font-style: italic; font-weight: 400; }
abbr[title] { text-decoration: none; border-bottom: 1px dotted; }
img { border: 0; max-width: 100%; height: auto; }

a:link, a:visited, a:hover, a:focus, a:active { color: var(--akzent); }
a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

h1, .subheadline {
	display: inline-block;
	padding: 0 3px;
	font-weight: 500;
	line-height: 27px;
	background-color: var(--dunkel);
	border-radius: 3px;
}
h1 { font-size: 19px; color: #fff; }
.subheadline { font-size: 16px; color: var(--akzent); margin: 2px 0 35px 0; }

.header-icon { display: none; }
@media only screen and (min-width: 390px) {
	.header-icon {
		display: block;
		width: 74px;
		height: 74px;
		position: absolute;
		margin-top: -10px;
		z-index: 10;
		font-size: 35px;
		font-weight: 500;
		line-height: 74px;
		text-align: center;
		border-radius: 37px;
		color: #fff;
		background-color: var(--akzent);
	}
	h1.no-margin, .subheadline { margin-left: 37px; padding-left: 47px; }
}

h2 { font-size: 17px; font-weight: 500; margin-top: 35px; }
h3 { font-size: 14px; font-weight: 500; margin-top: 35px; }
h4 { font-size: 14px; font-weight: 500; margin: 25px 0 10px 0; }

ul, ol { margin: 25px 0; }
ul { list-style-type: none; padding: 0 0 0 30px; }
ol { padding: 0 0 0 25px; }
ul li::before {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	margin: 6px 0 0 -20px;
	background-color: var(--akzent);
}
li { margin: 0 0 5px 0; }

table { width: 100%; border-spacing: 0; border-collapse: collapse; border-top: 1px solid var(--linie); }
th, td { padding: 10px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
th { width: 1%; }
td ul { margin: 0; }

address {
	margin: 25px 0;
	padding: 10px 30px;
	font-style: normal;
	border: 1px solid var(--linie);
	border-width: 1px 0;
	background-color: var(--hell);
}

hr { margin: 25px 0; border: 0; border-top: 1px solid var(--linie); }

/* ---------- Icons (inline SVG) ---------- */

.icon { width: 1.1em; height: 1.1em; vertical-align: -0.2em; }
.icon--big { width: 28px; height: 28px; }
th .icon { margin-right: 4px; color: var(--dunkel); }
.icon-link { display: inline-block; margin-left: 10px; }
.icon-link:hover { color: var(--dunkel); }

/* ---------- Akkordeon (Leistungen) ---------- */

.accordion { border-top: 1px solid var(--linie); }
.accordion__item { border-bottom: 1px solid var(--linie); }
.accordion__item summary {
	display: block;
	padding: 15px 0 15px 30px;
	cursor: pointer;
	list-style: none;
}
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__item summary::before {
	content: '→';
	position: absolute;
	margin: -1px 0 0 -25px;
	font-size: 18px;
	font-weight: 500;
	color: var(--akzent);
	transition: transform .2s;
}
.accordion__item[open] summary::before { transform: rotate(90deg); }
.accordion__item summary h3 { display: inline; margin: 0; }
.accordion__item summary:hover h3 { color: var(--dunkel); text-decoration: underline; text-decoration-color: var(--akzent); }
.accordion__item p { margin: 0; padding: 0 0 15px 30px; }

/* ---------- Seitenaufbau ---------- */

.wrapper, .wrapper-nav { width: 90%; margin: 0 auto; border: 1px solid transparent; }
@media only screen and (min-width: 980px) {
	.wrapper { width: 880px; }
}
@media only screen and (min-width: 485px) {
	.block { margin: 0 0 0 35px; }
}
@media only screen and (min-width: 780px) {
	.block { margin: 0 35px; }
	.content-full .block { margin: 0 0 0 35px; }
}

.page-head, .page-foot { background: var(--dunkel) url(img/hintergrund.png) repeat-y left top; }
.logo-wrap { display: block; text-align: center; margin: 0; }
@media only screen and (min-width: 980px) {
	.logo-wrap { width: 320px; text-align: left; }
}
.logo { width: 100%; max-width: 320px; height: auto; margin: 50px 0; }
.page-foot { padding: 50px 0; color: #fff; }

.site-nav { margin: 0; background-color: #fff; box-shadow: 0 0 10px 0 rgba(0, 1, 1, .5); }
.site-nav__list { margin: 0; padding: 10px 0; list-style-type: none; counter-reset: li-counter; text-align: center; }
.site-nav__item { display: inline-block; margin: 5px 12px; padding: 10px 0; line-height: 24px; }
.site-nav__item::before {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: 0 10px 0 0;
	font-size: 15px;
	line-height: 24px;
	font-weight: 500;
	vertical-align: middle;
	text-align: center;
	color: #fff;
	background-color: var(--dunkel);
	border-radius: 12px;
	content: counter(li-counter);
	counter-increment: li-counter;
}
.site-nav__item--active::before { background-color: var(--akzent); }
.site-nav__link:link, .site-nav__link:visited, .site-nav__link:hover, .site-nav__link:focus, .site-nav__link:active {
	font-size: 18px;
	color: var(--dunkel);
	text-decoration: none;
}
.site-nav__link:hover { background-color: var(--linie); }
.site-nav__active { font-weight: 500; }
@media only screen and (min-width: 500px) {
	.site-nav__item { margin: 15px 30px 15px 0; }
	.site-nav__item:last-child { margin-right: 0; }
}
@media only screen and (min-width: 980px) {
	.site-nav { position: absolute; left: 50%; top: 0; margin-left: 180px; padding: 0; }
	.site-nav__list { width: 200px; margin: 35px; padding: 0; text-align: left; }
	.site-nav__item { display: block; margin: 15px 0; }
}

.page-content { padding: 60px 0 0 0; }
.page-content::after { display: block; clear: both; content: ''; }
.content-main, .content-full { padding: 0 0 35px 0; margin: 0; }
@media only screen and (min-width: 740px) {
	.content-main { width: 67%; }
}
@media only screen and (min-width: 980px) {
	.page-content { padding: 100px 0 0 0; }
}

/* ---------- Portfolio ---------- */

.intro { max-width: 500px; }
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; padding: 0; margin: 0 0 25px 0; }
.portfolio-grid li { margin: 0; }
.portfolio-grid li::before { display: none; }
.portfolio-grid a { display: block; transition: opacity .2s; }
.portfolio-grid a:hover { opacity: .8; }
.portfolio-grid img { display: block; width: 100%; }
.portfolio-nav { margin-top: 30px; }
.screenshot-wrap { margin: 0 0 25px 0; }
.screenshot { display: block; width: 100%; border: 1px solid var(--linie); }

/* ---------- Kontakt ---------- */

.with-icon { display: flex; align-items: center; gap: 10px; }
.with-icon > .icon { flex: none; color: var(--dunkel); }
.with-icon address { flex: 1; }

/* ---------- Hilfsklassen ---------- */

.legal { overflow-wrap: break-word; hyphens: auto; }
.no-margin { margin: 0; }
.float-right { float: right; margin: 2px 2px 2px 10px; }
.nobr { white-space: nowrap; }
.not-bold { font-weight: normal; }
.row-even { background-color: var(--hell); }
.row-odd { background-color: #fff; }