Style · CSS
/*
Theme Name: KvG Weitmar
Description: Eigenständiges Block-Theme für den DPSG Stamm Kardinal von Galen in Bochum-Weitmar. Kein offizielles DPSG-Theme.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
Author: Stamm Kardinal von Galen
Text Domain: kvg-weitmar
License: GPL-2.0-or-later
*/
 
/* ==========================================================================
   Base
   ========================================================================== */
 
* {
	box-sizing: border-box;
}
 
html {
	scroll-behavior: smooth;
	scroll-padding-top: 2rem;
}
 
body {
	margin: 0;
}
 
img {
	max-width: 100%;
	height: auto;
}
 
a {
	text-underline-offset: 0.2em;
}
 
a:focus-visible,
button:focus-visible,
summary:focus-visible {
	outline: 3px solid #ed8b23;
	outline-offset: 5px;
}
 
h1,
h2,
h3,
p {
	overflow-wrap: break-word;
}
 
.wp-site-blocks > main {
	margin-top: 0;
}
 
.kvg-shell {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 32px;
}
 
.kvg-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 0.8rem;
	font-weight: 750;
}
 
.wp-block-button__link:hover {
	filter: brightness(1.1);
}
 
/* ==========================================================================
   Header
   ========================================================================== */
 
.kvg-header {
	padding-block: 22px;
	border-bottom: 1px solid #dce3e8;
}
 
.kvg-header a {
	text-decoration: none;
}
 
.kvg-logo img {
	width: 70px;
	height: 70px;
	object-fit: contain;
}
 
.kvg-brand p {
	margin: 0;
	line-height: 1.3;
}
 
.kvg-brand-name {
	font-weight: 800;
	font-size: 1.15rem;
}
 
.kvg-header .wp-block-navigation {
	font-size: 0.95rem;
	font-weight: 650;
}
 
.kvg-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 32px;
}
 
.kvg-header .wp-block-navigation__responsive-container.is-menu-open a {
	color: #102b46;
}
 
/* ==========================================================================
   Hero
   ========================================================================== */
 
.kvg-hero {
	background: #102b46;
	color: white;
	padding: 0;
	overflow: hidden;
}
 
.kvg-hero .wp-block-columns {
	gap: 0;
	margin: 0;
	max-width: none;
}
 
.kvg-hero-copy {
	/* Left padding aligns the copy with the 1200px content shell */
	padding: clamp(36px, 6vw, 90px) max(32px, calc((100vw - 1136px) / 2));
	padding-right: 48px;
	min-width: 0;
}
 
.kvg-hero h1 {
	font-size: clamp(3rem, 5.5vw, 5.4rem);
	line-height: 1.02;
	letter-spacing: -0.045em;
	margin: 24px 0;
}
 
.kvg-hero-copy > p:not(.kvg-eyebrow) {
	max-width: 34rem;
	color: #dce7f0;
}
 
.kvg-hero-photo {
	height: 100%;
	margin: 0;
}
 
.kvg-hero-photo img {
	width: 100%;
	height: 100%;
	min-height: 580px;
	object-fit: cover;
	display: block;
}
 
.kvg-hero .wp-block-button__link {
	background: #ed8b23;
	color: #102b46;
}
 
.kvg-hero .is-style-outline .wp-block-button__link {
	color: white;
	background: transparent;
	border: 1px solid #8b9baa;
}
 
/* ==========================================================================
   Ribbon – one segment per stage:
   Woelflinge, Jungpfadfinder, Pfadfinder, Rover, Leiterinnen und Leiter
   ========================================================================== */
 
.kvg-ribbon {
	height: 8px;
	background: linear-gradient(
		to right,
		#ed8b23 0 20%,
		#2776bc 20% 40%,
		#22804a 40% 60%,
		#c93d49 60% 80%,
		#5f6b75 80% 100%
	);
	margin: 0 !important;
}
 
/* ==========================================================================
   Sections
   ========================================================================== */
 
.kvg-section {
	padding-top: 88px;
	padding-bottom: 88px;
	margin-top: 0;
}
 
.kvg-section h2 {
	font-size: clamp(2.2rem, 4vw, 3.3rem);
	letter-spacing: -0.035em;
	margin-top: 12px;
}
 
.kvg-section-intro {
	max-width: 700px;
}
 
.kvg-caption {
	font-size: 0.9rem;
	color: #536778;
}
 
/* ==========================================================================
   Stages
   ========================================================================== */
 
.kvg-stages {
	gap: 18px;
	margin-top: 38px;
}
 
.kvg-stage {
	padding: 28px 24px;
	background: #f0f4f5;
	/* Stage color defaults to orange (Woelflinge) */
	border-top: 6px solid var(--stage, #ed8b23);
	border-radius: 0 0 6px 6px;
	min-width: 0;
}
 
.kvg-stage h3 {
	font-size: 1.45rem;
	margin-block: 16px;
}
 
.kvg-stage p {
	font-size: 1rem;
}
 
.kvg-stage .kvg-eyebrow {
	font-size: 0.8rem;
}
 
.kvg-stage a {
	font-size: 0.95rem;
	font-weight: 750;
}
 
.kvg-stage.juffi {
	--stage: #2776bc;
}
 
.kvg-stage.pfadi {
	--stage: #22804a;
}
 
.kvg-stage.rover {
	--stage: #c93d49;
}
 
/* Leader stage (Leiterinnen und Leiter) – grey */
.kvg-stage.leiter {
	--stage: #5f6b75;
}
 
/* ==========================================================================
   About
   ========================================================================== */
 
.kvg-about {
	background: #f0f4f5;
}
 
.kvg-about .wp-block-columns {
	gap: 70px;
}
 
.kvg-about-photo img {
	width: 100%;
	min-height: 300px;
	object-fit: cover;
	border-radius: 5px;
}
 
/* ==========================================================================
   Contact
   ========================================================================== */
 
.kvg-contact {
	background: #102b46;
	color: #fff;
}
 
.kvg-contact h2 {
	color: white;
}
 
.kvg-contact a {
	color: #fff;
}
 
.kvg-contact p {
	color: #dae5ee;
}
 
.kvg-contact .wp-block-button__link {
	background: #ed8b23;
	color: #102b46;
}
 
.kvg-contact .wp-block-columns {
	gap: 64px;
}
 
.kvg-contact .wp-block-details {
	border-top: 1px solid #597084;
	padding-block: 20px;
	font-size: 1rem;
}
 
.kvg-contact summary {
	font-weight: 700;
	cursor: pointer;
}
 
/* ==========================================================================
   Footer
   ========================================================================== */
 
.kvg-footer {
	padding-block: 38px;
	background: #0b2033;
	color: #d2e0ea;
	margin-top: 0;
}
 
.kvg-footer a {
	color: inherit;
}
 
.kvg-footer p {
	font-size: 0.9rem;
}
 
/* ==========================================================================
   Generic pages
   ========================================================================== */
 
.kvg-page {
	padding-block: 64px;
	min-height: 60vh;
}
 
.kvg-page h1 {
	font-size: clamp(2.5rem, 5vw, 4rem);
}
 
/* ==========================================================================
   Responsive: tablet
   ========================================================================== */
 
@media (max-width: 900px) {
	.kvg-hero-copy {
		padding: 46px 28px;
	}
 
	.kvg-hero-photo img {
		min-height: 510px;
	}
 
	.kvg-stages {
		flex-wrap: wrap !important;
	}
 
	.kvg-stages > .wp-block-column {
		flex-basis: calc(50% - 18px) !important;
	}
 
	/* Stages wrap into a 2x2 grid, so the fifth card spans the full row
	   instead of sitting alone at half width */
	.kvg-stages > .wp-block-column.leiter {
		flex-basis: 100% !important;
	}
 
	.kvg-about .wp-block-columns {
		gap: 32px;
	}
}
 
/* ==========================================================================
   Responsive: mobile (matches the WordPress columns breakpoint)
   ========================================================================== */
 
@media (max-width: 781px) {
	.kvg-shell {
		padding-inline: 24px;
	}
 
	.kvg-header {
		padding-block: 16px;
	}
 
	.kvg-brand-name {
		font-size: 0.95rem;
	}
 
	.kvg-brand .kvg-eyebrow {
		font-size: 0.7rem;
	}
 
	.kvg-logo img {
		width: 54px;
		height: 54px;
	}
 
	.kvg-hero-copy {
		padding: 44px 24px;
	}
 
	.kvg-hero h1 {
		font-size: 3.35rem;
	}
 
	.kvg-hero-photo img {
		height: 300px;
		min-height: 300px;
	}
 
	.kvg-section {
		padding-block: 56px;
	}
 
	.kvg-contact .wp-block-columns {
		gap: 30px;
	}
 
	.kvg-stages > .wp-block-column {
		flex-basis: 100% !important;
	}
 
	.kvg-stage {
		padding: 24px;
	}
 
	.kvg-footer .wp-block-group {
		gap: 18px;
	}
}
 
/* ==========================================================================
   Accessibility
   ========================================================================== */
 
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}