/* BI-Nonnweiler: lightweight responsive layout (no framework).
   Desktop keeps the original look (80% width, navigation left, logo right);
   below 700px the navigation collapses into a burger menu (CSS only, no JS). */

/* logo colours, darkened for readable contrast on white: green "I" (navigation), red dot (text links) */
:root { --green: #1a7f50; --red: #c62d36; --line: #ddd; }

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: #000; font: 15px/1.4 Arial, Helvetica, sans-serif; }

.wrap { width: 80%; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

/* ---- header and navigation ---- */

.site-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-top: 20px; padding-bottom: 20px; }
.site-logo img { display: block; }

.site-nav ul { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.site-nav a { color: #000; font-size: 14px; font-weight: bold; text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--green); }
.site-nav a[aria-current="page"] { color: var(--green); border-bottom-color: var(--green); }

/* burger: checkbox is visually hidden but keyboard-usable, the label draws the icon */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger { display: none; }

/* ---- content ---- */

.site-main { padding-top: 20px; padding-bottom: 20px; overflow-wrap: break-word; }
.site-main img { max-width: 100%; height: auto; }
.site-main table { max-width: 100%; }

/* text links: logo red and bold instead of underlined; underline only on hover */
.site-main a[href], .site-footer a[href] { color: var(--red); font-weight: bold; text-decoration: none; }
.site-main a[href]:hover { text-decoration: underline; text-underline-offset: 3px; }

/* calmer content: <u> headings rely on bold only, light divider lines */
.site-main u { text-decoration: none; }
.site-main hr { border: 0; border-top: 1px solid var(--line); }

/* legacy classes used inside page and database content */
.base_03, .footline_02 { font: inherit; color: inherit; }

/* ---- footer ---- */

.site-footer { text-align: center; font-size: 13px; padding-top: 20px; padding-bottom: 20px; }

/* ---- phones ---- */

@media (max-width: 700px) {
	.wrap { width: auto; padding: 0 14px; }

	.site-header { flex-wrap: wrap; align-items: center; gap: 0; padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid #ccc; }
	.site-logo { order: 1; }
	.site-logo img { width: 81px; height: auto; }

	.nav-burger { display: block; order: 2; position: relative; width: 32px; height: 26px; cursor: pointer; }
	.nav-burger span, .nav-burger span::before, .nav-burger span::after {
		content: ""; position: absolute; left: 0; width: 32px; height: 3px; background: #000; }
	.nav-burger span { top: 11px; }
	.nav-burger span::before { top: -9px; }
	.nav-burger span::after { top: 9px; }
	.nav-toggle:focus-visible + .nav-burger { outline: 2px solid #000; outline-offset: 4px; }

	.site-nav { display: none; order: 3; flex-basis: 100%; margin-top: 12px; }
	.nav-toggle:checked ~ .site-nav { display: block; }
	.site-nav ul { display: block; margin: 0; }
	.site-nav a { display: block; padding: 10px 0; border-bottom: 0; border-top: 1px solid var(--line); font-size: 15px; }

	/* legacy fixed-width tables fill the screen; list tables stack date above text */
	.site-main table { width: 100% !important; }
	.liste, .liste tbody, .liste tr, .liste td { display: block; width: auto !important; }
}