/* ------------------------------------------------------------------
   posttick.com - Layout fuer die statischen Rechtsseiten
   (page_agbs.php, page_datenschutz.php, page_impressum.php)

   Eigenstaendig: benoetigt weder Bootstrap noch general.css.
   Systemschriften, damit keine externen Font-Requests noetig sind.
   ------------------------------------------------------------------ */

:root{
	--pt-bg:      #f4f4f6;
	--pt-surface: #ffffff;
	--pt-ink:     #16161a;
	--pt-body:    #33333a;
	--pt-muted:   #7a7a85;
	--pt-line:    #e6e6ec;
	--pt-shell:   820px;
	--pt-radius:  14px;
}

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

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

body{
	margin: 0;
	background: var(--pt-bg);
	color: var(--pt-body);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	font-size: 16px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.shell{
	max-width: var(--pt-shell);
	margin: 0 auto;
	padding: 0 20px;
}

/* --- Kopf: Logo zentriert, Sprachumschalter dezent daneben --------- */

.site-header{
	background: var(--pt-surface);
	border-bottom: 1px solid var(--pt-line);
	padding: 26px 0 24px;
}

.site-header .shell{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
}

.brand{
	grid-column: 2;
	display: block;
	line-height: 0;
}

.brand img{
	width: 168px;
	max-width: 60vw;
	height: auto;
	opacity: .9;
	transition: opacity .2s ease;
}

.brand:hover img,
.brand:focus-visible img{ opacity: 1; }

.lang-switch{
	grid-column: 3;
	justify-self: end;
	display: inline-flex;
	padding: 3px;
	background: #f1f1f4;
	border-radius: 999px;
}

.lang-switch a{
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1;
	color: var(--pt-muted);
	text-decoration: none;
	transition: color .18s ease, background-color .18s ease;
}

.lang-switch a:hover{ color: var(--pt-ink); }

.lang-switch a[aria-current="true"]{
	background: var(--pt-surface);
	color: var(--pt-ink);
	box-shadow: 0 1px 2px rgba(20, 20, 30, .1);
}

/* --- Inhalt ------------------------------------------------------- */

.site-main{ padding: 48px 0 64px; }

.doc-title{
	margin: 0 0 28px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--pt-ink);
	text-align: center;
}

.doc{
	background: var(--pt-surface);
	border: 1px solid var(--pt-line);
	border-radius: var(--pt-radius);
	padding: 44px 48px;
	box-shadow: 0 1px 2px rgba(20, 20, 30, .04),
	            0 8px 24px -12px rgba(20, 20, 30, .14);
	/* lange URLs in der Datenschutzerklaerung nicht ueberlaufen lassen */
	overflow-wrap: break-word;
}

/* Silbentrennung nur fuer Deutsch - die langen Komposita brauchen sie,
   im Englischen wirkt sie unruhig. Auf schmalen Displays s.u. fuer beide. */
html[lang="de"] .doc{
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* Die Datenschutz-Inhaltsdatei bringt einen eigenen <style>-Block mit. */
.doc style{ display: none; }

.doc h2,
.doc h3{
	margin: 2.4em 0 .7em;
	color: var(--pt-ink);
	font-weight: 650;
	line-height: 1.35;
	letter-spacing: -.01em;
	text-transform: none;
}

.doc h2{ font-size: 21px; }
.doc h3{ font-size: 17px; }

.doc h2:first-of-type,
.doc h3:first-of-type{ margin-top: 0; }

.doc p{ margin: 0 0 1.15em; }
.doc p:last-child{ margin-bottom: 0; }

.doc a{
	color: var(--pt-ink);
	text-decoration: underline;
	text-decoration-color: #c9c9d2;
	text-underline-offset: 3px;
}

.doc a:hover{ text-decoration-color: var(--pt-ink); }

/* --- Fuss --------------------------------------------------------- */

.site-footer{
	background: var(--pt-surface);
	border-top: 1px solid var(--pt-line);
	padding: 26px 0;
	font-size: 13.5px;
	color: var(--pt-muted);
}

.site-footer .shell{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 22px;
}

.site-footer nav{
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.site-footer a{
	color: var(--pt-muted);
	text-decoration: none;
	transition: color .18s ease;
}

.site-footer a:hover{ color: var(--pt-ink); }

/* --- Zurueck nach oben -------------------------------------------- */

.to-top{
	position: fixed;
	right: 22px;
	bottom: 22px;
	width: 42px;
	height: 42px;
	padding: 0;
	display: grid;
	place-items: center;
	border: 1px solid var(--pt-line);
	border-radius: 50%;
	background: var(--pt-surface);
	color: var(--pt-ink);
	box-shadow: 0 4px 14px rgba(20, 20, 30, .12);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	-webkit-appearance: none;
	appearance: none;
}

.to-top.is-visible{
	opacity: 1;
	visibility: visible;
	transform: none;
}

.to-top:hover{ border-color: #d0d0da; }
.to-top svg{ display: block; width: 16px; height: 16px; }

/* --- Klein / mobil ------------------------------------------------ */

@media (max-width: 640px){
	body{ font-size: 15.5px; }

	.site-header .shell{
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 16px;
	}

	.brand,
	.lang-switch{
		grid-column: auto;
		justify-self: center;
	}

	.site-main{ padding: 32px 0 48px; }
	.doc-title{ margin-bottom: 20px; font-size: 26px; }

	.doc{
		padding: 28px 22px;
		border-radius: 12px;
		-webkit-hyphens: auto;
		hyphens: auto;
	}

	.site-footer .shell{
		justify-content: center;
		text-align: center;
	}

	.site-footer nav{ justify-content: center; }
	.to-top{ right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior: auto; }
	*{ transition-duration: .01ms !important; }
}

/* --- Druck -------------------------------------------------------- */

@media print{
	body{ background: #fff; }
	.lang-switch,
	.to-top,
	.site-footer{ display: none; }
	.site-header{ border: 0; padding: 0 0 18px; }
	.site-main{ padding: 0; }
	.doc{
		border: 0;
		border-radius: 0;
		padding: 0;
		box-shadow: none;
	}
}