/* Template "Helferkreis" – einfaches, responsives Layout ohne Framework */

:root {
	--hk-primary: #2a7f62;
	--hk-accent: #e8a33d;
	--hk-text: #25302c;
	--hk-muted: #66746e;
	--hk-bg: #fbfaf7;
	--hk-card: #ffffff;
	--hk-line: #e3e0d8;
	--hk-radius: 10px;
	--hk-width: 1120px;
}

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

html { scroll-behavior: smooth; }

body.site {
	margin: 0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--hk-text);
	background: var(--hk-bg);
}

.container {
	width: 100%;
	max-width: var(--hk-width);
	margin: 0 auto;
	padding: 0 1.25rem;
}

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

a { color: var(--hk-primary); text-underline-offset: 2px; }
a:hover, a:focus { color: color-mix(in srgb, var(--hk-primary) 70%, #000); }

:focus-visible { outline: 3px solid var(--hk-accent); outline-offset: 2px; }

h1, h2, h3, h4 { line-height: 1.25; color: var(--hk-text); margin: 1.6em 0 .5em; }
h1 { font-size: 2rem; margin-top: 0; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

.skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--hk-primary);
	color: #fff;
	padding: .6rem 1rem;
	z-index: 100;
}
.skip-link:focus { left: 0; }

/* Topbar */
.topbar {
	background: color-mix(in srgb, var(--hk-primary) 85%, #000);
	color: #fff;
	font-size: .9rem;
	padding: .4rem 0;
}
.topbar a { color: #fff; }

/* Header */
.site-header {
	background: var(--hk-card);
	border-bottom: 4px solid var(--hk-accent);
	position: relative;
}
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.brand {
	display: flex;
	align-items: center;
	gap: .8rem;
	text-decoration: none;
	color: var(--hk-text);
}
.brand-logo {
	flex: 0 0 auto;
	width: var(--hk-logo-size, 80px);
	height: var(--hk-logo-size, 80px);
	object-fit: contain;
	border-radius: 12px;
}
.brand-text { display: flex; flex-direction: column; }
.brand-name { font-size: 1.5rem; font-weight: 700; color: var(--hk-primary); line-height: 1.2; }
.brand-tagline { font-size: .9rem; color: var(--hk-muted); }

/* Navigation */
.main-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
}
.main-nav a {
	display: block;
	padding: .55rem .9rem;
	border-radius: var(--hk-radius);
	text-decoration: none;
	color: var(--hk-text);
	font-weight: 600;
}
.main-nav a:hover,
.main-nav a:focus,
.main-nav .active > a,
.main-nav .current > a {
	background: var(--hk-primary);
	color: #fff;
}
.main-nav ul ul { display: none; }

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger { display: none; cursor: pointer; padding: .5rem; }
.nav-burger span {
	display: block;
	width: 26px;
	height: 3px;
	margin: 5px 0;
	background: var(--hk-primary);
	border-radius: 2px;
}

/* Banner */
.banner {
	background: linear-gradient(135deg, var(--hk-primary), color-mix(in srgb, var(--hk-primary) 60%, #000));
	color: #fff;
	padding: 2.5rem 0;
}
.banner h1, .banner h2, .banner h3 { color: #fff; margin-top: 0; }
.banner a { color: #fff; }
.banner img { border-radius: var(--hk-radius); }

/* Seitenaufbau */
.page { padding-top: 1.5rem; padding-bottom: 2.5rem; }

.breadcrumbs { font-size: .9rem; color: var(--hk-muted); margin-bottom: 1rem; }
.breadcrumbs ol, .breadcrumbs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }

.columns {
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1fr);
}
.layout-main-r .columns { grid-template-columns: minmax(0, 1fr) 280px; }
.layout-lmain .columns { grid-template-columns: 280px minmax(0, 1fr); }
.layout-lmain-r .columns { grid-template-columns: 240px minmax(0, 1fr) 260px; }

.content {
	background: var(--hk-card);
	border: 1px solid var(--hk-line);
	border-radius: var(--hk-radius);
	padding: 1.75rem;
	min-width: 0;
}

.sidebar > * {
	background: var(--hk-card);
	border: 1px solid var(--hk-line);
	border-radius: var(--hk-radius);
	padding: 1.1rem 1.25rem;
	margin-bottom: 1.25rem;
}
.sidebar h3, .sidebar .module-title {
	margin: 0 0 .6rem;
	font-size: 1.1rem;
	color: var(--hk-primary);
}
.sidebar ul { margin: 0; padding-left: 1.1rem; }

.main-top, .main-bottom { margin: 1.25rem 0; }

/* Joomla-Inhalte */
.item-page .page-header h1,
.blog .page-header h1 { margin-bottom: .75rem; }

.com-content-article__body table,
table {
	border-collapse: collapse;
	max-width: 100%;
}
th, td { border: 1px solid var(--hk-line); padding: .5rem .7rem; text-align: left; }
th { background: color-mix(in srgb, var(--hk-primary) 10%, #fff); }

blockquote {
	margin: 1.2rem 0;
	padding: .6rem 1.2rem;
	border-left: 5px solid var(--hk-accent);
	background: color-mix(in srgb, var(--hk-accent) 10%, #fff);
	border-radius: 0 var(--hk-radius) var(--hk-radius) 0;
}

.btn, button, input[type="submit"] {
	display: inline-block;
	background: var(--hk-primary);
	color: #fff;
	border: 0;
	border-radius: var(--hk-radius);
	padding: .6rem 1.2rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}
.btn:hover, button:hover, input[type="submit"]:hover {
	background: color-mix(in srgb, var(--hk-primary) 75%, #000);
	color: #fff;
}

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="tel"], select, textarea {
	width: 100%;
	max-width: 100%;
	padding: .55rem .7rem;
	border: 1px solid #bfbcb2;
	border-radius: 8px;
	font: inherit;
	background: #fff;
}

/* Systemmeldungen */
#system-message-container { margin-bottom: 1rem; }
.alert, joomla-alert {
	display: block;
	padding: .8rem 1rem;
	border-radius: 8px;
	border: 1px solid var(--hk-line);
	background: #eef6f2;
}

/* Footer */
.site-footer {
	background: #26322d;
	color: #d8dfdb;
	padding: 1.75rem 0;
	font-size: .95rem;
}
.site-footer a { color: #fff; }
.site-footer ul { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.copyright { margin: 0; color: #a9b5af; }

/* Tablet */
@media (max-width: 960px) {
	.layout-main-r .columns,
	.layout-lmain .columns,
	.layout-lmain-r .columns {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Smartphone */
@media (max-width: 760px) {
	body.site { font-size: 1rem; }
	h1 { font-size: 1.6rem; }
	.content { padding: 1.1rem; }

	.brand-logo {
		width: min(var(--hk-logo-size, 80px), 56px);
		height: min(var(--hk-logo-size, 80px), 56px);
	}
	.brand-name { font-size: 1.25rem; }

	.nav-burger { display: block; }
	.main-nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--hk-card);
		border-bottom: 4px solid var(--hk-accent);
		padding: .5rem 1.25rem 1rem;
		z-index: 50;
		box-shadow: 0 8px 16px rgba(0, 0, 0, .08);
	}
	.nav-toggle:checked ~ .main-nav { display: block; }
	.main-nav ul { flex-direction: column; }
	.nav-toggle:focus-visible ~ .nav-burger { outline: 3px solid var(--hk-accent); }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

@media print {
	.site-header, .topbar, .banner, .sidebar, .site-footer { display: none; }
	.content { border: 0; padding: 0; }
}