@charset "utf-8";
/*
 * sampowidmann.de – base and frame, loaded on every page.
 * A square world: a colored square panel ("tafel") centered on the blue, navigation and
 * footer on one line below it. No rounded corners, no shadows, no gradients.
 *
 * The panel is measured in the old site's grid: 570 px side, 15 px padding, 10 px gaps,
 * 100 px squares, five across. Everything scales from the panel width (100cqi inside it).
 * Section colors come from /farben.css as classes (--farbe, --schrift, --auf-weiss).
 */

@font-face {
	font-family: "News Cycle";
	src: url("../fonts/newscycle-regular-webfont.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "News Cycle";
	src: url("../fonts/newscycle-bold-webfont.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--blau: #001487;
	--weiss: #fff;
	--schriften: "News Cycle", "News Gothic MT", "Franklin Gothic Book", "Arial Narrow", Arial, sans-serif;
	--aussen: max(16px, 2.5vw);               /* side gutter */
	--oben: clamp(16px, 3svh, 32px);          /* space above the panel */
	--navi-zeile: 3.75rem;                    /* room for the navigation line below */
	/* Panel side: fits the width and (down to 480 px) the height of the screen, at most 960 px. */
	--breite: min(100%, max(100svh - 2 * var(--oben) - var(--navi-zeile), 480px), 960px);
	--federnd: cubic-bezier(0.34, 1.35, 0.64, 1);
	color-scheme: dark;
}

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

body {
	margin: 0;
	background: var(--blau);
	color: var(--weiss);
	font-family: var(--schriften);
	font-size: 1rem;
	line-height: 1.4;
	letter-spacing: 0.1em;
}

a {
	color: inherit;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
:focus-visible {
	outline: 2px solid var(--schrift, var(--weiss));
	outline-offset: 3px;
}
::selection {
	background: var(--weiss);
	color: var(--blau);
}
img,
video {
	max-width: 100%;
}

.unsichtbar {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* =========================================================================
   Stage: panel (or home menu) centered, navigation line below
   ========================================================================= */

.buehne {
	box-sizing: border-box;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--oben) var(--aussen) calc(var(--oben) + env(safe-area-inset-bottom, 0px));
}

/* =========================================================================
   Panel
   ========================================================================= */

.tafel {
	width: var(--breite);
	background: var(--farbe, var(--blau));
	color: var(--schrift, var(--weiss));
	container: tafel / inline-size;
}

/* Registered as lengths, so they are computed once on .tafel-innen (panel = 100cqi) and
   inherited as pixels: inside a tile, which is a container itself, 100cqi means the tile. */
@property --polster { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --luecke { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --zelle { syntax: "<length>"; inherits: true; initial-value: 0px; }

.tafel-innen {
	--polster: calc(100cqi * 15 / 570);
	--luecke: calc(100cqi * 10 / 570);
	--spalten: 5;
	--zelle: calc((100cqi - 2 * var(--polster) - (var(--spalten) - 1) * var(--luecke)) / var(--spalten));
	box-sizing: border-box;
	min-height: 100cqi;                        /* at least square; grows by whole rows */
	padding: var(--polster);
	display: flex;
	flex-direction: column;
	gap: var(--luecke);
}
@container tafel (width < 560px) {
	.tafel-innen {
		--spalten: 3;
	}
}

.tafel-titel {
	box-sizing: border-box;
	min-height: var(--zelle);                  /* the title takes the first row of squares */
	margin: 0;
	font-size: clamp(1.35rem, 100cqi * 30 / 570, 3rem);
	font-weight: 400;
	line-height: 1.15;
	overflow-wrap: break-word;
	hyphens: auto;
}

.tafel-inhalt {
	margin-top: auto;                          /* content sits at the bottom, like the old site */
}

/* =========================================================================
   Navigation line: "<<" and "<" left, legal links right
   ========================================================================= */

.fuss {
	box-sizing: border-box;
	width: var(--breite);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding-top: 0.5rem;
}

.navi {
	display: flex;
	gap: 0.6em;
	font-size: clamp(1.5rem, 1.1rem + 1vw, 1.9rem);
	line-height: 1.2;
}
.navi a {
	display: inline-block;
	min-width: 1.4em;                         /* bold on hover must not push the neighbour */
	padding: 0 0.1em;
}
.navi a:hover {
	font-weight: 700;
	text-decoration: none;
}

.rechtliches {
	margin: 0 0 0 auto;
	font-size: 0.8rem;
}