/* ==========================================================================
   BASE.CSS – Reset, CSS-Variablen, Typografie
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap');

:root {
	--color-black: #111111;
	--color-dark: #2b2b2b;
	--color-dark-mid: #222222;
	--color-dark-nav: #1a1a1a;
	--color-standort-bg: #222222;
	--color-red: #cc2027;
	--color-hero-bg: #F5EDE3;
	--color-white: #ffffff;
	--color-bg-light: #f7f7f7;
	--color-text-primary: #111111;
	--color-text-secondary: #555555;
	--color-text-on-dark: #cccccc;
	--color-text-muted: #767676;
	--color-border-dark: #3a3a3a;
	--font-main: 'IBM Plex Sans', sans-serif;
	--transition: 300ms ease;
}

/* Reset & Base
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-main);
	color: var(--color-text-primary);
	background: var(--color-white);
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.5;
	padding-top: 0;
}

body.has-sticky-header {
	padding-top: var(--header-height, 0px);
}

a {
	text-decoration: none;
	color: inherit;
}

a:hover {
	text-decoration: none;
}

img {
	max-width: 100%;
	display: block;
}

ul,
ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Typografie
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-main);
	font-weight: 700;
	margin: 0 0 0.5em 0;
	line-height: 1.2;
}

p {
	margin: 0 0 1em 0;
}

/* Buttons
   ========================================================================== */

.btn-primary-red {
	display: inline-block;
	background: var(--color-red);
	color: var(--color-white);
	font-family: var(--font-main);
	font-weight: 700;
	font-size: 13px;
	padding: 10px 22px;
	border: none;
	cursor: pointer;
	letter-spacing: 0.05em;
	transition: background var(--transition);
	text-transform: uppercase;
}

.btn-primary-red:hover {
	background: #aa1a1f;
	color: var(--color-white);
}

.btn-secondary-dark {
	display: inline-block;
	background: var(--color-black);
	color: var(--color-white);
	font-family: var(--font-main);
	font-weight: 700;
	font-size: 13px;
	padding: 10px 22px;
	border: none;
	cursor: pointer;
	letter-spacing: 0.05em;
	transition: background var(--transition);
}

.btn-secondary-dark:hover {
	background: #333;
	color: var(--color-white);
}

.btn-ghost {
	display: inline-block;
	background: transparent;
	color: var(--color-black);
	font-family: var(--font-main);
	font-weight: 700;
	font-size: 13px;
	padding: 10px 22px;
	border: 2px solid var(--color-black);
	cursor: pointer;
	letter-spacing: 0.05em;
	transition: all var(--transition);
}

.btn-ghost:hover {
	background: var(--color-black);
	color: var(--color-white);
}

/* Platzhalter-Elemente
   ========================================================================== */

.img-placeholder {
	background: #d0d0d0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #888;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	width: 100%;
}

.img-placeholder.dark {
	background: #333;
	color: #666;
}

/* Abschnitt-Überschriften
   ========================================================================== */

.section-heading {
	font-size: 24px;
	font-weight: 700;
	color: var(--color-text-primary);
	margin-bottom: 28px;
	padding-bottom: 10px;
	border-bottom: 3px solid var(--color-red);
	display: inline-block;
}

.section-eyebrow {
	font-size: 11px;
	font-weight: 700;
	color: var(--color-red);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 8px;
}

/* Container-Anpassung
   ========================================================================== */

.container-fluid {
	max-width: 1440px;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* Karten
   ========================================================================== */

.gc-card {
	background: var(--color-white);
	border: 1px solid #e5e5e5;
	padding: 20px;
}

/* Tags / Badges
   ========================================================================== */

.gc-tag {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 3px 8px;
	border: 1px solid #ccc;
	color: var(--color-text-secondary);
	letter-spacing: 0.05em;
	margin-right: 4px;
	margin-bottom: 4px;
}

/* Hauptinhaltsbereich
   ========================================================================== */

.page-content {
	min-height: calc(100vh - 400px);
}

/* Utility
   ========================================================================== */

.text-red {
	color: var(--color-red);
}

.text-muted-custom {
	color: var(--color-text-muted);
}

.fw-bold-custom {
	font-weight: 700;
}

.uppercase {
	text-transform: uppercase;
}

/* ==========================================================================
   Scroll-Animationen
   ========================================================================== */

[data-animate] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

[data-animate].is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ==========================================================================
   Micro-Interactions
   ========================================================================== */

/* Buttons – leichter Lift + Schatten */
.btn-primary-red,
.btn-secondary-dark,
.btn-ghost,
.btn-standort-link,
.btn-termin {
	transition: background var(--transition), transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary-red:hover,
.btn-secondary-dark:hover,
.btn-ghost:hover,
.btn-termin:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.btn-standort-link:hover {
	transform: translateX(3px);
}

/* Standort-Cards – Lift + Schatten */
.standort-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.standort-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.13);
}

/* Aktionsartikel-Cards – Lift */
.aktions-artikel-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.aktions-artikel-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

/* Panel-Overlays – leichte Helligkeitsänderung */
.home-highlight-panel,
.home-themen-panel {
	transition: filter 0.3s ease;
}

.home-highlight-panel:hover,
.home-themen-panel:hover {
	filter: brightness(1.06);
}

/* CTA-Pfeile in Panels – nach rechts schieben */
.home-highlight-cta,
.home-themen-cta {
	transition: letter-spacing 0.25s ease, padding-right 0.25s ease;
}

.home-highlight-panel:hover .home-highlight-cta,
.home-themen-panel:hover .home-themen-cta {
	letter-spacing: 0.06em;
	padding-right: 4px;
}

/* News-Links – Pfeil bewegt sich */
.news-link {
	display: inline-block;
	transition: transform 0.2s ease;
}

.news-link:hover {
	transform: translateX(4px);
}

/* Kurs-Kacheln */
.kurs-tile {
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.kurs-tile:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
	border-color: var(--color-red);
}

/* USP-Icons – kurzer Bounce bei Hover */
.usp-icon-circle {
	transition: transform 0.25s ease;
}

.usp-item:hover .usp-icon-circle {
	transform: scale(1.12);
}

/* Instagram-Posts */
.insta-post-item {
	transition: transform 0.25s ease;
}

.insta-post-item:hover {
	transform: scale(1.04);
}

/* Content-Templates */
.content-template {
	transition: box-shadow 0.25s ease;
}

.content-template:hover {
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}