/*
Theme Name: KSC Stockschützen
Theme URI: https://stocksport-ksc.de
Author: Kirchheimer SC Stockschützen
Description: Modernes, klares Design für die Stockschützen des Kirchheimer SC – Hero mit den neuesten Beiträgen, Karten-Grid, Archiv-Navigation und Sponsorenbereich.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2.0 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ksc-stocksport
Tags: sports, club, blog, custom-menu, featured-images, translation-ready
*/

/* =========================================================================
   1. Tokens
   ========================================================================= */
:root {
	--navy: #003760;
	--navy-900: #002742;
	--navy-700: #0b4a7a;
	--blue: #0a72c4;
	--blue-soft: #e8f1f8;
	--ink: #12212f;
	--muted: #5a6b7c;
	--line: #dfe6ee;
	--table-line: #000;      /* Rahmen der Zeiten-Tabellen (Öffnungszeiten/Training) */
	--bg: #f4f7fa;
	--white: #fff;
	--card: #fff;            /* Karten-/Flächenhintergrund */
	--heading: var(--navy-900); /* Überschriftenfarbe */
	--text-soft: #3d4c5a;    /* Fließtext in Karten/Abschnitten */
	--gold: #d8a13a;
	--radius: 14px;
	--radius-sm: 9px;
	--shadow: 0 2px 4px rgba(0, 39, 66, .04), 0 12px 28px -12px rgba(0, 39, 66, .18);
	--shadow-lg: 0 4px 8px rgba(0, 39, 66, .06), 0 24px 48px -16px rgba(0, 39, 66, .28);
	--wrap: 1200px;
	--font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =========================================================================
   2. Base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 400 17px/1.65 var(--font);
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

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

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--navy); text-decoration: underline; }

h1, h2, h3, h4 {
	margin: 0 0 .5em;
	color: var(--navy-900);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -.015em;
}
h1 { font-size: clamp(2rem, 3.4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }

blockquote {
	margin: 1.6em 0;
	padding: .4em 0 .4em 1.3em;
	border-left: 4px solid var(--blue);
	color: var(--navy-900);
	font-size: 1.1rem;
	font-weight: 600;
}

code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
pre { overflow: auto; padding: 1em 1.2em; background: var(--navy-900); color: #e6eef6; border-radius: var(--radius-sm); }

hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }

table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; }
th, td { padding: .7em .9em; border-bottom: 1px solid var(--line); text-align: left; }
th { background: var(--blue-soft); color: var(--navy-900); font-weight: 700; }

input, button, select, textarea { font: inherit; color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 999;
	clip: auto; width: auto; height: auto;
	padding: .6em 1em; background: var(--card); color: var(--navy);
	border-radius: 8px; box-shadow: var(--shadow);
}

/* =========================================================================
   3. Buttons & chips
   ========================================================================= */
.btn {
	display: inline-flex; align-items: center; gap: .5em;
	padding: .75em 1.4em;
	border: 0; border-radius: 999px;
	font-size: .95rem; font-weight: 700; line-height: 1;
	letter-spacing: .01em;
	cursor: pointer;
	text-decoration: none;
	transition: transform .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--blue); color: var(--white); box-shadow: 0 8px 20px -10px rgba(10, 114, 196, .9); }
.btn-primary:hover { background: var(--navy-700); color: var(--white); }
.btn-light { background: var(--white); color: var(--navy); }
.btn-light:hover { background: var(--blue-soft); color: var(--navy-900); }
.btn-ghost { background: rgba(255, 255, 255, .1); color: var(--white); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.btn-ghost:hover { background: rgba(255, 255, 255, .2); color: var(--white); }
.btn-outline { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-outline:hover { box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue); }

.chip {
	display: inline-block;
	padding: .3em .75em;
	border-radius: 999px;
	background: var(--blue-soft); color: var(--navy-700);
	font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
a.chip:hover { background: var(--blue); color: var(--white); text-decoration: none; }
.chip-gold { background: rgba(216, 161, 58, .18); color: #8d610f; }

.eyebrow {
	display: inline-block;
	margin: 0 0 .7em;
	font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
	color: var(--blue);
}

/* =========================================================================
   4. Topbar + header + nav
   ========================================================================= */
.topbar { background: var(--navy-900); color: rgba(255, 255, 255, .82); font-size: .82rem; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.topbar a { color: rgba(255, 255, 255, .82); }
.topbar a:hover { color: var(--white); text-decoration: none; }
.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar img { width: 22px; height: auto; opacity: .95; }
.topbar .club { font-weight: 700; letter-spacing: .02em; color: var(--white); }

.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 28px; min-height: 78px; }

.brand { display: flex; align-items: center; flex: 0 0 auto; gap: 12px; }
.brand a { display: flex; align-items: center; }
.brand img { height: 50px; width: auto; display: block; }
.brand-fallback-icon { height: 44px !important; width: auto; }
.brand-text { color: var(--navy-900); font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.brand:hover { text-decoration: none; }

.main-nav { margin-left: auto; }
.main-nav ul { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.main-nav li { position: relative; }
.main-nav a {
	display: block;
	white-space: nowrap;
	padding: .6em .8em;
	border-radius: 8px;
	color: var(--navy-900);
	font-size: .94rem; font-weight: 700;
}
.main-nav a:hover { background: var(--blue-soft); color: var(--navy); text-decoration: none; }
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a { background: var(--navy); color: var(--white); }

.main-nav .sub-menu {
	position: absolute; top: 100%; left: 0; z-index: 60;
	display: block; min-width: 210px; padding: 8px; margin: 0;
	background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.main-nav .sub-menu a { padding: .5em .7em; font-weight: 600; font-size: .9rem; }

/* Instagram-Icon vor dem Menüpunkt „Instagram“ (Menüpunkt-ID menu-item-1781,
   reines CSS – das Icon erbt die Linkfarbe über currentColor). */
.main-nav .menu-item-1781 > a {
	display: inline-flex; align-items: center; gap: .5em;
}
.main-nav .menu-item-1781 > a::before {
	content: "";
	width: 1.05em; height: 1.05em;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.2c3.2 0 3.6 0 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.25.07 1.63.07 4.81s0 3.56-.07 4.81c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.25.06-1.63.07-4.85.07s-3.6 0-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.2 15.59 2.2 15.21 2.2 12s0-3.56.07-4.81c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.4 2.2 8.79 2.2 12 2.2Zm0 1.98c-3.12 0-3.49.01-4.72.07-.9.04-1.39.19-1.71.32-.43.17-.74.37-1.06.69-.32.32-.52.63-.69 1.06-.13.32-.28.81-.32 1.71-.06 1.23-.07 1.6-.07 4.72s.01 3.49.07 4.72c.04.9.19 1.39.32 1.71.17.43.37.74.69 1.06.32.32.63.52 1.06.69.32.13.81.28 1.71.32 1.23.06 1.6.07 4.72.07s3.49-.01 4.72-.07c.9-.04 1.39-.19 1.71-.32.43-.17.74-.37 1.06-.69.32-.32.52-.63.69-1.06.13-.32.28-.81.32-1.71.06-1.23.07-1.6.07-4.72s-.01-3.49-.07-4.72c-.04-.9-.19-1.39-.32-1.71a2.85 2.85 0 0 0-.69-1.06 2.85 2.85 0 0 0-1.06-.69c-.32-.13-.81-.28-1.71-.32-1.23-.06-1.6-.07-4.72-.07Zm0 3.37a5.05 5.05 0 1 1 0 10.1 5.05 5.05 0 0 1 0-10.1Zm0 1.98a3.07 3.07 0 1 0 0 6.14 3.07 3.07 0 0 0 0-6.14Zm5.35-2.28a1.18 1.18 0 1 1 0 2.36 1.18 1.18 0 0 1 0-2.36Z'/></svg>") center / contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.2c3.2 0 3.6 0 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.25.07 1.63.07 4.81s0 3.56-.07 4.81c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.25.06-1.63.07-4.85.07s-3.6 0-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.2 15.59 2.2 15.21 2.2 12s0-3.56.07-4.81c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.4 2.2 8.79 2.2 12 2.2Zm0 1.98c-3.12 0-3.49.01-4.72.07-.9.04-1.39.19-1.71.32-.43.17-.74.37-1.06.69-.32.32-.52.63-.69 1.06-.13.32-.28.81-.32 1.71-.06 1.23-.07 1.6-.07 4.72s.01 3.49.07 4.72c.04.9.19 1.39.32 1.71.17.43.37.74.69 1.06.32.32.63.52 1.06.69.32.13.81.28 1.71.32 1.23.06 1.6.07 4.72.07s3.49-.01 4.72-.07c.9-.04 1.39-.19 1.71-.32.43-.17.74-.37 1.06-.69.32-.32.52-.63.69-1.06.13-.32.28-.81.32-1.71.06-1.23.07-1.6.07-4.72s-.01-3.49-.07-4.72c-.04-.9-.19-1.39-.32-1.71a2.85 2.85 0 0 0-.69-1.06 2.85 2.85 0 0 0-1.06-.69c-.32-.13-.81-.28-1.71-.32-1.23-.06-1.6-.07-4.72-.07Zm0 3.37a5.05 5.05 0 1 1 0 10.1 5.05 5.05 0 0 1 0-10.1Zm0 1.98a3.07 3.07 0 1 0 0 6.14 3.07 3.07 0 0 0 0-6.14Zm5.35-2.28a1.18 1.18 0 1 1 0 2.36 1.18 1.18 0 0 1 0-2.36Z'/></svg>") center / contain no-repeat;
}

.header-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.nav-toggle {
	display: none;
	width: 44px; height: 44px;
	background: var(--navy); color: var(--white);
	border: 0; border-radius: 10px; cursor: pointer;
	font-size: 1.2rem; line-height: 1;
}

/* search */
.search-form { display: flex; align-items: center; }
.search-form label { display: flex; align-items: center; margin: 0; }
.search-form input[type="search"] {
	width: 190px;
	padding: .6em .9em;
	background: var(--card);
	border: 1.5px solid var(--line); border-radius: 999px;
	font-size: .9rem;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.search-form input[type="search"]:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(10, 114, 196, .18); }
.search-form button,
.search-form input[type="submit"] {
	margin-left: 8px; padding: .6em 1.1em;
	background: var(--navy); color: var(--white);
	border: 0; border-radius: 999px; font-size: .88rem; font-weight: 700; cursor: pointer;
}
.search-form button:hover, .search-form input[type="submit"]:hover { background: var(--blue); }

/* =========================================================================
   5. Hero
   ========================================================================= */
.hero { position: relative; isolation: isolate; color: var(--white); background: var(--navy-900); }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(102deg, rgba(0, 39, 66, .96) 0%, rgba(0, 55, 96, .9) 42%, rgba(10, 114, 196, .58) 100%),
		repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 26px);
}
.hero .wrap { padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(56px, 8vw, 104px); }
.hero-inner { max-width: 720px; }
.hero h1 { color: var(--white); text-shadow: 0 2px 20px rgba(0, 20, 40, .35); }
.hero h1 a, .hero h1 a:hover { color: var(--white); text-decoration: none; }
.hero .eyebrow { color: rgba(255, 255, 255, .85); }
.hero .hero-excerpt { margin-bottom: 1.6em; color: rgba(255, 255, 255, .9); font-size: 1.06rem; max-width: 62ch; }
.hero .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .hero-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 1.1em; color: rgba(255, 255, 255, .8); font-size: .86rem; }

/* =========================================================================
   6. Layout
   ========================================================================= */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 44px; padding-top: 48px; padding-bottom: 64px; }
.layout.no-sidebar { grid-template-columns: minmax(0, 1fr); }
.content { min-width: 0; }

.block { margin-bottom: 52px; }
.block:last-child { margin-bottom: 0; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.block-title { margin: 0; font-size: 1.45rem; }
.block-title .rule { display: block; width: 54px; height: 4px; margin-top: 10px; border-radius: 4px; background: var(--blue); }
.block-link { font-size: .9rem; font-weight: 700; white-space: nowrap; }

/* =========================================================================
   7. Cards & teasers
   ========================================================================= */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.card {
	display: flex; flex-direction: column;
	background: var(--card); border-radius: var(--radius); overflow: hidden;
	box-shadow: var(--shadow);
	transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card-media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--blue-soft); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card-media img { transform: scale(1.04); }
.card-media .chip { position: absolute; top: 12px; left: 12px; background: rgba(255, 255, 255, .94); box-shadow: 0 2px 8px rgba(0, 39, 66, .18); }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.card h3 { margin: 0 0 .4em; font-size: 1.16rem; }
.card h3 a { color: var(--navy-900); }
.card h3 a:hover { color: var(--blue); text-decoration: none; }
.card .meta { margin: 0 0 .7em; color: var(--muted); font-size: .8rem; letter-spacing: .02em; text-transform: uppercase; font-weight: 600; }
.card p { margin: 0 0 1em; color: var(--text-soft); font-size: .95rem; }
.card .more { margin-top: auto; font-size: .88rem; font-weight: 700; }

.teasers { display: grid; gap: 18px; }
.teaser {
	display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; align-items: center;
	padding: 14px; background: var(--card); border-radius: var(--radius);
	box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease;
}
.teaser:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.teaser-media { display: block; aspect-ratio: 16 / 10; border-radius: var(--radius-sm); overflow: hidden; background: var(--blue-soft); }
.teaser-media.is-empty, .card-media.is-empty { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 60%, var(--blue) 100%); }
.teaser-media img { width: 100%; height: 100%; object-fit: cover; }
.teaser h3 { margin: 0 0 .25em; font-size: 1.05rem; }
.teaser h3 a { color: var(--navy-900); }
.teaser h3 a:hover { color: var(--blue); text-decoration: none; }
.teaser .meta { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.teaser p { margin: .4em 0 0; color: var(--text-soft); font-size: .92rem; }

/* =========================================================================
   8. Archive navigation
   ========================================================================= */
.panel {
	padding: 22px 24px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
}
.panel + .panel { margin-top: 24px; }
.panel h3 { margin: 0 0 .3em; font-size: 1.05rem; }
.panel .panel-sub { margin: 0 0 1em; color: var(--muted); font-size: .9rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip-row:last-child { margin-bottom: 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* =========================================================================
   9. Sidebar / widgets
   ========================================================================= */
.sidebar { min-width: 0; }
.sidebar-sticky {
	position: sticky; top: 100px;
	padding: 24px;
	background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
}
.widget { margin: 0 0 26px; }
.widget:last-child { margin-bottom: 0; }
.widget + .widget { padding-top: 4px; }
.widget h2, .widget .wp-block-heading {
	margin: 0 0 .8em;
	font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--navy);
}
.widget h2::after, .widget .wp-block-heading::after {
	content: ""; display: block; width: 42px; height: 3px; margin-top: 9px; border-radius: 3px; background: var(--blue);
}
.widget ul { margin: 0; padding: 0; list-style: none; }
.widget li + li { margin-top: .45em; }
.widget .wp-block-categories-list { display: flex; flex-wrap: wrap; gap: 8px; }
.widget .wp-block-categories-list li { margin: 0; }
.widget .wp-block-categories-list li a {
	display: inline-block; padding: .35em .8em;
	background: var(--blue-soft); color: var(--navy-700);
	border-radius: 999px; font-size: .82rem; font-weight: 700;
}
.widget .wp-block-categories-list li a:hover { background: var(--blue); color: var(--white); text-decoration: none; }
.widget .wp-block-categories-list .cat-count { opacity: .65; font-weight: 600; }
.widget .wp-block-separator { margin: 1.4em 0; border-color: var(--line); }
.widget .wp-block-archives-list li a { color: var(--navy-900); font-weight: 600; }
.widget .wp-block-archives-list li a:hover { color: var(--blue); }

/* metaslider inside widgets: neutralise its inline sizing a bit */
.widget .metaslider, .widget .ml-slider { border-radius: var(--radius-sm); overflow: hidden; }
.widget .metaslider .flexslider { margin: 0; border: 0; border-radius: var(--radius-sm); box-shadow: none; }
.widget .metaslider img { border-radius: 0; }

/* Fallback-Medienrahmen ohne Beitragsbild */
.thumb-placeholder {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%; min-height: 120px;
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 55%, var(--blue) 100%);
}
.thumb-placeholder-mark {
	color: rgba(255, 255, 255, .55);
	font-size: 1.6rem; font-weight: 800; letter-spacing: .18em;
}

/* Archiv-Beschreibung über den Karten */
.archive-desc { margin: -6px 0 26px; color: var(--muted); max-width: 74ch; }

/* =========================================================================
   10. Single / page
   ========================================================================= */
.page-head { padding: 46px 0 0; }
.page-head .wrap { max-width: 860px; }
.entry-header { margin-bottom: 26px; }
.entry-header .meta { margin: 0; color: var(--muted); font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.entry-header h1 { margin: .3em 0 .4em; }
.entry-featured { margin: 0 0 32px; }
.entry-featured img { width: 100%; border-radius: var(--radius); display: block; }
.entry-content { font-size: 1.05rem; }
.entry-content > * { margin-left: 0; margin-right: auto; max-width: 74ch; }
.entry-content > .alignwide { max-width: 100%; }
.entry-content h2, .entry-content h3 { margin-top: 1.6em; }
.entry-content img { border-radius: var(--radius-sm); }
.entry-content .wp-block-image img { display: block; }
.entry-content figcaption, .entry-content .wp-caption-text { color: var(--muted); font-size: .85rem; text-align: center; }
.entry-content a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* Zeiten-Tabellen (Seite „Training“ = .ksc-training-times, Geschäftsstelle = .ksc-times-table) */
.entry-content .ksc-section-title { margin-top: 1.9em; }
.entry-content .ksc-training-times,
.entry-content .ksc-times-table { margin: 1.3em 0 1.9em; }
.entry-content .ksc-training-times table,
.entry-content .ksc-times-table table {
	border: 1px solid var(--line);
	border-collapse: separate; border-spacing: 0;   /* erlaubt die abgerundeten Ecken */
	border-radius: var(--radius); overflow: hidden;
	margin: 0;
}
.entry-content .ksc-training-times thead th,
.entry-content .ksc-times-table thead th {
	background: var(--navy); color: var(--white); border-bottom: 0;
	font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
}
.entry-content .ksc-training-times td,
.entry-content .ksc-times-table td { border-bottom: 1px solid var(--line); vertical-align: middle; }
.entry-content .ksc-training-times tbody tr:last-child td,
.entry-content .ksc-times-table tbody tr:last-child td { border-bottom: 1px solid currentColor; }
/* WP-Core setzt `.wp-block-table td, th { border: 1px solid }` (= currentColor),
   dadurch war der Rahmen links schwarz und rechts blau. Auf eine Farbe festziehen. */
.entry-content .ksc-times-table table,
.entry-content .ksc-training-times table,
.entry-content .ksc-times-table th, .entry-content .ksc-times-table td,
.entry-content .ksc-training-times th, .entry-content .ksc-training-times td,
.entry-content .ksc-times-table tbody tr:last-child td,
.entry-content .ksc-training-times tbody tr:last-child td { border-color: var(--table-line); }
.entry-content .ksc-training-times tbody tr:nth-child(even),
.entry-content .ksc-times-table tbody tr:nth-child(even) { background: #fafcfe; }
.entry-content .ksc-training-times td:nth-child(1),
.entry-content .ksc-times-table td:nth-child(1) { white-space: nowrap; font-weight: 700; color: var(--navy-900); }
.entry-content .ksc-training-times td:nth-child(2),
.entry-content .ksc-times-table td:nth-child(2) { white-space: nowrap; font-weight: 700; color: var(--blue); }
.entry-content .ksc-training-times td:nth-child(3),
.entry-content .ksc-times-table td:nth-child(3) { color: var(--text-soft); font-weight: 700; }
/* <strong> in den Zellen würde via `bolder` auf 900 hochziehen → wieder angleichen */
.entry-content .ksc-training-times td strong,
.entry-content .ksc-times-table td strong { font-weight: inherit; }
.entry-content .ksc-training-times figcaption,
.entry-content .ksc-times-table figcaption { margin-top: .8em; }

/* Anfahrt / Karte (Seite „Training“) ---------------------------------------- */
.entry-content .ksc-anfahrt {
	margin: 1.6em 0 2.2em;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
}
.entry-content .ksc-anfahrt .wp-block-media-text__media { margin: 0; overflow: hidden; }
.entry-content .ksc-anfahrt .wp-block-media-text__media a { display: block; }
.entry-content .ksc-anfahrt .wp-block-media-text__media img {
	display: block; width: 100%; border-radius: 0;
	transition: transform .6s ease;
}
.entry-content .ksc-anfahrt:hover .wp-block-media-text__media img { transform: scale(1.035); }
.entry-content .ksc-anfahrt .wp-block-media-text__content { padding: 26px 30px; }
.entry-content .ksc-anfahrt .ksc-anfahrt-address {
	margin: 0 0 .9em; font-size: 1.02rem; line-height: 1.55; color: var(--text-soft);
}
.entry-content .ksc-anfahrt .ksc-anfahrt-address strong { color: var(--navy-900); }
.entry-content .ksc-anfahrt p:last-child { margin-bottom: 0; }
.ksc-anfahrt-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.3em 0 0 !important; }

@media (max-width: 600px) {
	.entry-content .ksc-anfahrt .wp-block-media-text__content { padding: 20px; }
	.ksc-anfahrt-actions .btn { width: 100%; justify-content: center; }
}

/* Terminliste (Seite „Veranstaltungen“, Shortcode [ksc_terminliste]) ---------- */
.ksc-events { margin: 1.4em 0 2em; }
.ksc-events-month {
	display: flex; align-items: center; gap: 14px;
	margin: 2.2em 0 1em;
	font-size: .82rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
	color: var(--navy);
}
.ksc-events-month:first-child { margin-top: .4em; }
.ksc-events-month::after { content: ""; flex: 1; height: 2px; background: var(--line); }
.ksc-events-group { display: grid; gap: 14px; }

.ksc-event {
	display: grid; grid-template-columns: 76px minmax(0, 1fr) auto;
	gap: 18px; align-items: center;
	padding: 14px 18px 14px 14px;
	background: var(--card);
	border: 1px solid var(--line);
	border-left: 4px solid var(--navy);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ksc-event:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-left-color: var(--blue); }

.ksc-event-date {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 9px 6px; border-radius: var(--radius-sm);
	background: var(--blue-soft); color: var(--navy-900); line-height: 1.05;
	text-align: center;
}
.ksc-event-date:hover { text-decoration: none; background: var(--blue); color: var(--white); }
.ksc-event-date .dow { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.ksc-event-date .day { font-size: 1.5rem; font-weight: 800; }
.ksc-event-date .mon { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.ksc-event.is-today { border-left-color: var(--gold); }
.ksc-event.is-today .ksc-event-date { background: var(--gold); color: #fff; }

.ksc-event-title { margin: 0 0 .25em; font-size: 1.08rem; }
.ksc-event-title a { color: var(--navy-900); }
.ksc-event-title a:hover { color: var(--blue); text-decoration: none; }
.ksc-event-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; color: var(--muted); font-size: .88rem; }
.ksc-event-time { font-weight: 600; }

.ksc-event-badges { display: flex; align-items: center; gap: 8px; }
.ksc-badge {
	display: inline-block; padding: .3em .7em; border-radius: 999px;
	font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	white-space: nowrap;
}
.ksc-badge-cat { background: var(--blue-soft); color: var(--navy-700); }
.ksc-badge-series { background: #eef3f7; color: var(--muted); }
.ksc-badge-today { background: var(--gold); color: #fff; }
.ksc-badge-soon { background: var(--blue); color: #fff; }
.ksc-event-go {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--blue-soft); color: var(--navy);
	font-weight: 800; text-decoration: none;
}
.ksc-event-go:hover { background: var(--navy); color: var(--white); text-decoration: none; }

.ksc-events-empty { padding: 1.2em 1.4em; background: var(--blue-soft); border-radius: var(--radius); }
.ksc-events-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 2em 0 0 !important; }

@media (max-width: 600px) {
	.ksc-event { grid-template-columns: 62px minmax(0, 1fr); gap: 14px; padding: 12px; }
	.ksc-event-badges { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
	.ksc-event-date .day { font-size: 1.25rem; }
	.ksc-event-title { font-size: 1rem; }
	.ksc-events-actions .btn { width: 100%; justify-content: center; }
}

/* Trenner zwischen Abschnitten in Seiteninhalten (z. B. Kontakt) */
.entry-content .ksc-divider {
	border: 0;
	border-top: 2px solid var(--line);
	margin: 2.8em 0 2.2em;
}

/* Ansprechpartner-Karten (Seite „Kontakt“) ---------------------------------- */
.entry-content .ksc-contact {
	margin: 0 0 18px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
}
.entry-content .ksc-contact .wp-block-media-text__media { margin: 0; }
.entry-content .ksc-contact .wp-block-media-text__media img {
	display: block; width: 100%; height: 100%;
	aspect-ratio: 1 / 1; object-fit: cover;
}
.entry-content .ksc-contact .wp-block-media-text__content { padding: 22px 26px; }
.entry-content .ksc-contact h3 { margin: 0 0 .35em; font-size: 1.2rem; }
.entry-content .ksc-contact .ksc-contact-role {
	display: inline-block; margin: 0 0 .7em;
	padding: .25em .7em; border-radius: 999px;
	background: var(--blue-soft); color: var(--navy-700);
	font-size: .78rem; font-weight: 700; letter-spacing: .04em;
}
.entry-content .ksc-contact .ksc-contact-mail { margin: 0; font-size: .95rem; }
.entry-content .ksc-contact .ksc-contact-mail a { font-weight: 700; word-break: break-word; }

@media (max-width: 600px) {
	/* Tabelle darf umbrechen und zur Not seitlich scrollen statt abzuschneiden */
	.entry-content .ksc-training-times,
	.entry-content .ksc-times-table { overflow-x: auto; }
	.entry-content .ksc-training-times table,
	.entry-content .ksc-times-table table { font-size: .88rem; }
	.entry-content .ksc-training-times th, .entry-content .ksc-training-times td,
	.entry-content .ksc-times-table th, .entry-content .ksc-times-table td { padding: .5em .55em; }
	.entry-content .ksc-training-times td:nth-child(1),
	.entry-content .ksc-training-times td:nth-child(2),
	.entry-content .ksc-times-table td:nth-child(1),
	.entry-content .ksc-times-table td:nth-child(2) { white-space: normal; }
	/* Kontaktkarte: Foto oben, kleiner und zentriert */
	.entry-content .ksc-contact .wp-block-media-text__media { max-width: 150px; margin: 16px auto 0; }
	.entry-content .ksc-contact .wp-block-media-text__content { padding: 14px 20px 22px; text-align: center; }
}

.alignleft { float: left; margin: .3em 1.4em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.4em; }
.aligncenter { display: block; margin: 0 auto 1.4em; }

.entry-footer { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.entry-footer .label { color: var(--muted); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

/* Aufrufzähler des Post-Views-Counter-Plugins ruhig stellen */
.entry-content .post-views-count { margin-bottom: .8em; color: var(--muted); font-size: .86rem; font-weight: 600; }

.post-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.post-nav a {
	display: block; padding: 18px 20px;
	background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
	color: var(--navy-900);
}
.post-nav a:hover { text-decoration: none; box-shadow: var(--shadow-lg); }
.post-nav .dir { display: block; margin-bottom: .3em; color: var(--blue); font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.post-nav .t { font-weight: 700; }
.post-nav .next { text-align: right; }

/* archive/category/month lists inside page content (Archiv page) */
.entry-content .wp-block-archives-list,
.entry-content .wp-block-categories-list,
.entry-content .wp-block-page-list {
	padding: 0; margin: 0 0 1.6em; list-style: none;
	columns: 3 180px; column-gap: 28px;
}
.entry-content .wp-block-archives-list li,
.entry-content .wp-block-categories-list li,
.entry-content .wp-block-page-list li {
	margin: 0 0 .5em; break-inside: avoid;
}
.entry-content .wp-block-archives-list a,
.entry-content .wp-block-categories-list a,
.entry-content .wp-block-page-list a {
	display: flex; justify-content: space-between; gap: 10px;
	padding: .55em .9em;
	background: var(--card); border-radius: 10px; box-shadow: var(--shadow);
	color: var(--navy-900); font-weight: 600; text-decoration: none;
}
.entry-content .wp-block-archives-list a:hover,
.entry-content .wp-block-categories-list a:hover { background: var(--blue-soft); }

/* =========================================================================
   11. Pagination
   ========================================================================= */
.pagination { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 40px; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 14px;
	background: var(--card); color: var(--navy-900);
	border-radius: 12px; box-shadow: var(--shadow);
	font-size: .92rem; font-weight: 700;
}
.pagination .page-numbers:hover { background: var(--blue-soft); text-decoration: none; }
.pagination .page-numbers.current { background: var(--navy); color: var(--white); }
.pagination .page-numbers.dots { box-shadow: none; background: transparent; }

/* =========================================================================
   12. Footer
   ========================================================================= */
.site-footer { margin-top: 24px; background: var(--navy-900); color: rgba(255, 255, 255, .78); font-size: .92rem; }
.site-footer a { color: rgba(255, 255, 255, .82); }
.site-footer a:hover { color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding: 56px 0 40px; }
.footer-brand img { height: 46px; width: auto; display: block; margin-bottom: 16px; filter: brightness(0) invert(1); }
.site-footer .brand-text { color: var(--white); }
.site-footer .brand-fallback-icon { filter: brightness(0) invert(1); height: 46px !important; }
.footer-brand p { margin: 0; max-width: 34ch; }
.footer-title { margin: 0 0 1em; color: var(--white); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li + li { margin-top: .55em; }
.footer-bottom {
	display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
	padding: 20px 0 26px; border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: .84rem;
}
.footer-bottom .legal { display: flex; flex-wrap: wrap; gap: 18px; }

/* =========================================================================
   13. Empty state / 404
   ========================================================================= */
.empty-state { padding: 60px 0; text-align: center; }
.empty-state h1 { margin-bottom: .3em; }
.empty-state .lede { color: var(--muted); max-width: 52ch; margin: 0 auto 1.6em; }

/* =========================================================================
   13. Kommentare
   ========================================================================= */
.comments { margin-top: 56px; }
.comment-list { margin: 0 0 32px; padding: 0; list-style: none; }
.comment-list ol.children { margin: 18px 0 0 24px; padding: 0; list-style: none; }
.comment-list li.comment { margin-bottom: 18px; }
.comment-list .comment-body {
	padding: 20px 22px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
}
.comment-list .comment-meta { margin-bottom: .6em; color: var(--muted); font-size: .82rem; }
.comment-list .comment-author img { float: left; margin: 0 14px 10px 0; border-radius: 50%; }
.comment-list .comment-author .fn { font-weight: 700; color: var(--navy-900); }
.comment-list .reply a { font-size: .85rem; font-weight: 700; }
.comment-form {
	padding: 24px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
}
.comment-form label { display: block; margin-bottom: .35em; font-size: .82rem; font-weight: 700; color: var(--navy-900); text-transform: uppercase; letter-spacing: .06em; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%; padding: .7em .9em; background: var(--bg);
	border: 1.5px solid var(--line); border-radius: var(--radius-sm);
}
.comment-form input:focus, .comment-form textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(10, 114, 196, .18); }
.comment-form .form-submit { margin-bottom: 0; }
.comment-form input[type="submit"] { border: 0; cursor: pointer; }

/* =========================================================================
   14. Termine (The Events Calendar) – nur Feinschliff
   ========================================================================= */
.tribe-events-page-title, .tribe-events-list h2.tribe-events-list-event-title,
.tribe-events-single-event-title { color: var(--navy-900); font-weight: 800; }
.tribe-events-list .tribe-events-list-separator-month,
.tribe-events-list-separator-month span { background: var(--blue-soft); color: var(--navy); }
.tribe-events-button, .tribe-events-list .tribe-events-read-more { font-weight: 700; }
.widget .tribe-events-list-widget-events h4 a { color: var(--navy-900); font-weight: 700; }


/* =========================================================================
   16. Dark Mode (Umschalter im Kopfbereich, Wahl in localStorage)
   ========================================================================= */
:root { color-scheme: light; }

[data-theme="dark"] {
	color-scheme: dark;

	--bg: #0f1419;
	--card: #182029;
	--ink: #e6edf3;
	--muted: #97a7b6;
	--line: #2b3643;
	--table-line: #3c4b5a;   /* schwarz wäre auf dunklem Grund unsichtbar */
	--blue-soft: #1c2836;
	--heading: #f3f8fc;
	--text-soft: #c3cfdb;
	--navy-900: #0b1218;
	--shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 28px -12px rgba(0, 0, 0, .55);
	--shadow-lg: 0 4px 8px rgba(0, 0, 0, .35), 0 24px 48px -16px rgba(0, 0, 0, .65);
}

/* Akzentfarben etwas heller, damit sie auf dunklem Grund lesbar bleiben */
[data-theme="dark"] a,
[data-theme="dark"] .block-link,
[data-theme="dark"] .more { color: #6fb3ec; }
[data-theme="dark"] a:hover { color: #9ccbf5; }

/* Textfarben, die im hellen Design Marken-Navy nutzen */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] .brand-text,
[data-theme="dark"] .main-nav a,
[data-theme="dark"] .card h3 a, [data-theme="dark"] .teaser h3 a,
[data-theme="dark"] .ksc-event-title a, [data-theme="dark"] .post-nav a,
[data-theme="dark"] .widget h2, [data-theme="dark"] .widget .wp-block-heading,
[data-theme="dark"] .entry-content .wp-block-archives-list a,
[data-theme="dark"] .entry-content .wp-block-categories-list a,
[data-theme="dark"] .entry-content .wp-block-page-list a,
[data-theme="dark"] .ksc-anfahrt .ksc-anfahrt-address strong,
[data-theme="dark"] .ksc-contact h3 { color: var(--heading); }

[data-theme="dark"] .pagination .page-numbers { color: var(--heading); background: var(--card); }
[data-theme="dark"] .pagination .page-numbers.current { background: #24557f; color: #fff; }
[data-theme="dark"] .pagination .page-numbers:hover { background: var(--blue-soft); }

[data-theme="dark"] .ksc-events-month { color: #6fb3ec; }
[data-theme="dark"] .ksc-event { border-left-color: #2f6fa8; }
[data-theme="dark"] .ksc-event:hover { border-left-color: #6fb3ec; }
[data-theme="dark"] .ksc-event-date { background: var(--blue-soft); color: var(--ink); }
[data-theme="dark"] .ksc-event-date:hover { background: #24557f; color: #fff; }
[data-theme="dark"] .ksc-event-go { background: var(--blue-soft); color: #9ccbf5; }
[data-theme="dark"] .ksc-event-go:hover { background: #24557f; color: #fff; }
[data-theme="dark"] .ksc-badge-cat { background: #1d3247; }
[data-theme="dark"] .ksc-badge-series { background: #202a35; color: #9fb0c0; }

[data-theme="dark"] .widget .wp-block-categories-list li a { background: var(--blue-soft); color: #9ccbf5; }
[data-theme="dark"] .widget .wp-block-categories-list li a:hover { background: #24557f; color: #fff; }
[data-theme="dark"] .ksc-contact .ksc-contact-role { background: var(--blue-soft); color: #9ccbf5; }
[data-theme="dark"] .chip { background: var(--blue-soft); color: #9ccbf5; }
[data-theme="dark"] .chip-gold { background: rgba(216, 161, 58, .22); color: #e7bd6f; }
[data-theme="dark"] a.chip:hover { background: #24557f; color: #fff; }

[data-theme="dark"] .site-header { background: rgba(15, 20, 25, .93); }
[data-theme="dark"] .main-nav a:hover { background: var(--blue-soft); color: var(--heading); }
[data-theme="dark"] .main-nav .current-menu-item > a,
[data-theme="dark"] .main-nav .current_page_item > a { background: #24557f; color: #fff; }
[data-theme="dark"] .search-form input[type="search"] { background: var(--card); color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .search-form button,
[data-theme="dark"] .search-form input[type="submit"] { background: #24557f; color: #fff; }

[data-theme="dark"] .entry-content th { background: var(--blue-soft); color: var(--heading); }
[data-theme="dark"] .entry-content .ksc-training-times thead th,
[data-theme="dark"] .entry-content .ksc-times-table thead th { background: #17324c; color: #fff; }
[data-theme="dark"] .entry-content .ksc-training-times tbody tr:nth-child(even),
[data-theme="dark"] .entry-content .ksc-times-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .02); }
[data-theme="dark"] .entry-content .ksc-training-times td:nth-child(2),
[data-theme="dark"] .entry-content .ksc-times-table td:nth-child(2) { color: #6fb3ec; }

[data-theme="dark"] .ksc-events-empty { background: var(--blue-soft); }
[data-theme="dark"] .thumb-placeholder { background: linear-gradient(135deg, #16222e 0%, #1d3247 60%, #24557f 100%); }
[data-theme="dark"] pre { background: #0b1218; color: #dbe6f0; }

/* Logo/Wappen im Kopfbereich auf dunklem Grund aufhellen */
[data-theme="dark"] .brand img,
[data-theme="dark"] .brand-fallback-icon { filter: brightness(0) invert(1); }
[data-theme="dark"] .brand-text { color: var(--heading); }

/* Umschalter */
.theme-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; flex: 0 0 auto;
	background: var(--card); color: var(--ink);
	border: 1px solid var(--line); border-radius: 50%;
	cursor: pointer; font-size: 1.05rem; line-height: 1;
	transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.theme-toggle:hover { border-color: var(--blue); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(10, 114, 196, .28); }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: inline; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* =========================================================================
   15. Responsive
   ========================================================================= */
@media (max-width: 1080px) {
	.layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.sidebar-sticky { position: static; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Mittlere Breiten: Navigation und Suche passen nicht mehr in eine Zeile,
   also die Suche unter die Navigation setzen (Hamburger erst ab 900px). */
@media (max-width: 1150px) {
	.site-header .wrap { flex-wrap: wrap; }
	.header-tools { flex: 1 1 100%; order: 3; padding: 2px 0 14px; }
	.search-form { max-width: 460px; margin-left: auto; }
	.search-form, .search-form label { flex: 1 1 auto; }
	.search-form input[type="search"] { flex: 1; width: auto; }
}

@media (max-width: 900px) {
	.site-header .wrap { flex-wrap: wrap; min-height: 68px; }
	.brand img { height: 42px; }
	.nav-toggle { display: block; margin-left: auto; }
	.header-tools { flex: 1 1 100%; order: 3; padding-bottom: 14px; }
	.search-form { max-width: none; margin-left: 0; }
	.search-form, .search-form label { flex: 1 1 auto; }
	.search-form input[type="search"] { flex: 1; width: auto; }
	.main-nav {
		order: 4; flex: 1 1 100%;
		display: none; margin: 0 0 8px;
	}
	.main-nav.open { display: block; }
	.main-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
	.main-nav a { padding: .7em .9em; border-radius: 10px; }
	.main-nav .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; background: transparent; padding: 0 0 0 14px;
	}
	.main-nav .sub-menu a { color: var(--navy-700); }
	.cards { grid-template-columns: minmax(0, 1fr); }
	.hero .hero-excerpt { font-size: 1rem; }
}

@media (max-width: 640px) {
	body { font-size: 16px; }
	.wrap { padding: 0 18px; }
	.teaser { grid-template-columns: 116px minmax(0, 1fr); gap: 14px; }
	.teaser p { display: none; }
	.post-nav { grid-template-columns: minmax(0, 1fr); }
	.footer-grid { grid-template-columns: 1fr; gap: 32px; padding: 40px 0 28px; }
	.topbar .club { display: none; }
	.hero .wrap { padding-top: 48px; padding-bottom: 48px; }
}