/* Gewerbepark Elbestrasse 2 — static site
   Hand-written replacement for the former WordPress/twentyseventeen install. */

/* Palette lifted from twentyseventeen's "dark" colorscheme, which is what the
   WordPress site used (theme_mods_twentyseventeen -> colorscheme: dark).
   Several supplied logos — lagercontainer.png especially — have light artwork
   on transparency, so they only read correctly against a dark background. */
:root {
	--ink: #eee;       /* body text        (colors-dark: body)     */
	--muted: #bbb;     /* secondary text   (colors-dark: h5, meta) */
	--heading: #ccc;   /* headings         (colors-dark: h2)       */
	--rule: #333;      /* borders          (colors-dark)           */
	--bg: #222;        /* page background  (colors-dark: body)     */
	--accent: #ddd;    /* links            (colors-dark: a)        */
	--accent-hi: #fff; /* link hover       (colors-dark: a:hover)  */
}

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

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 400 17px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); }
a:hover, a:focus { color: var(--accent-hi); }

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

.hero img {
	width: 100%;
	max-height: 60vh;
	object-fit: cover;
}

.masthead {
	text-align: center;
	padding: 2.2rem 1.25rem 1.4rem;
}

.masthead h1 {
	margin: 0;
	font-size: clamp(1.6rem, 4.5vw, 2.6rem);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.masthead h1 a { color: inherit; text-decoration: none; }

.masthead p {
	margin: 0.5rem 0 0;
	color: var(--muted);
	font-size: clamp(1rem, 2.2vw, 1.15rem);
}

nav {
	border-bottom: 1px solid var(--rule);
	text-align: center;
	padding-bottom: 1.1rem;
}

nav a {
	display: inline-block;
	margin: 0 0.85rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--ink);
}

nav a:hover, nav a:focus, nav a[aria-current="page"] {
	color: var(--accent-hi);
	text-decoration: underline;
}

/* ---- Content --------------------------------------------------------- */

main {
	max-width: 720px;
	margin: 0 auto;
	padding: 2.5rem 1.25rem 3rem;
}

main h2 {
	font-size: 1.35rem;
	margin: 0 0 1.5rem;
	color: var(--heading);
}

/* Tenant list — a WP table originally; a definition-style grid reads
   better and reflows properly on a phone. */

.tenants {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tenants li {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--rule);
}

.tenants li:last-child { border-bottom: 0; }

/* Every logo is scaled to the same WIDTH; height follows each image's own
   aspect ratio. The supplied logos range from square (jhk, picnic) to a
   6.25:1 banner (lagercontainer), so rendered heights vary from 27px to
   116px — that variance is intended. */
.tenants .logo {
	flex: 0 0 170px;
	width: 170px;
}

.tenants .logo img {
	width: 100%;
	height: auto;
}

.tenants .name {
	font-weight: 600;
	font-size: 1.05rem;
}

.tenants .name a { text-decoration: none; }
.tenants .name a:hover, .tenants .name a:focus { text-decoration: underline; }

@media (max-width: 480px) {
	.tenants li {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}
}

/* ---- Impressum ------------------------------------------------------- */

.legal h2 { margin-top: 2.25rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal p { margin: 0 0 1.15rem; }

/* The Datenschutzerklärung is long, so it needs a real heading hierarchy
   (h2 page title > h3 numbered part > h4 clause) to stay scannable. */
.legal h3 {
	margin: 2.75rem 0 1rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rule);
	font-size: 1.2rem;
	color: var(--heading);
}

.legal h4 {
	margin: 1.9rem 0 0.6rem;
	font-size: 1rem;
	color: var(--ink);
}

.legal ul {
	margin: 0 0 1.15rem;
	padding-left: 1.3rem;
}

.legal li { margin-bottom: 0.6rem; }

/* The Art. 21 objection notice is conventionally set in capitals. Keep the
   capitals (they are part of the standard wording) but reduce the size and
   open the tracking, so a wall of uppercase stays readable. */
.legal .caps {
	font-size: 0.88rem;
	letter-spacing: 0.02em;
	color: var(--muted);
}

.legal .source {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rule);
	font-size: 0.85rem;
	color: var(--muted);
}

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

footer {
	border-top: 1px solid var(--rule);
	padding: 1.75rem 1.25rem 2.5rem;
	text-align: center;
	color: var(--muted);
	font-size: 0.9rem;
}

footer a { color: var(--muted); }