@charset "utf-8";

/**
 * @file riedersberger.css
 * @description Haupt-Stylesheet für riedersberger.de (Header, Kachel-System, CSS-Variablen, Responsive Design)
 * @project riedersberger.de
 * @version 1.0
 * @since 2026-06-23
 *
 * Riedersberger Stylesheet
 *
 * Haupt-Stylesheet für die Riedersberger Website
 * Verwendet CSS Custom Properties für konsistente Farbgestaltung
 * Responsive Design für optimale Darstellung auf allen Geräten
 *
 * @author   Riedersberger
 * @version  5.0
 * @updated  2026-07-15
 *
 * ÄNDERUNGEN V5.0:
 * - px→rem, Modernisierung
 * - Logo-Square-Dimensionen (24px, 20px, 18px) auf rem umgestellt
 * - Kachel-Icon-Dimensionen (80px, 60px) auf rem umgestellt
 * - Responsive padding-left-Werte (8px, 6px) auf rem umgestellt
 *
 * ÄNDERUNGEN V4.0:
 * - Hintergrundfarbe auf warmes Creme (#FAF7F0) optimiert (ohne Grünstich)
 * - Footer-Border auf Gelb (#ffc855) angepasst
 * - Header-Balken mit Logo und Hamburger-Menü integriert
 * - Kachel-System für Startseite hinzugefügt
 * - Durchgängige Verwendung von CSS-Variablen
 * - Code-Duplikate entfernt
 */

/* ============================================
   CSS Variablen / Custom Properties
   Überschreibt teilweise Werte aus standard.css
   ============================================ */
:root {
	/* Primärfarben */
	--color-primary: #30395C;         /* Dunkelblau (Footer/Header) */
	--color-primary-dark: #1e2740;    /* Noch dunkler für Hover */
	--color-accent: #ffc855;          /* Gelb (Logo, Akzente) */

	/* Hintergrundfarben */
	--bg-body: #FAF7F0;               /* Warmes Creme ohne Grünstich */
	--bg-kachel: #ffffff;             /* Weiß für Kacheln */

	/* Footer-Farben: Überschreibt standard.css */
	--color-footer-bg: #30395C;
	--color-footer-text: #efefef;
	--color-footer-link: lightgrey;
	--color-footer-border: #ffc855;   /* Gelbe Akzentlinie unten */
	--color-fussmenue-bg: #C0C0C0;

	/* Textfarben */
	--color-text-primary: #30395C;
	--color-text-light: #ffffff;
	--color-text-muted: #666;

	/* Abstände */
	--space-1: 0.3rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-5: 1.5rem;
	--spacing-xl: 2rem;
	--spacing-xxl: 3rem;

	/* Schatten */
	--shadow-sm: 0 1px 3px rgba(48, 57, 92, 0.08);
	--shadow-md: 0 2px 8px rgba(48, 57, 92, 0.1);
	--shadow-lg: 0 6px 20px rgba(48, 57, 92, 0.25);

	/* Border Radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;

	/* Transitions */
	--transition-fast: 0.2s ease;
	--transition-standard: 0.3s ease;
}

/* ============================================
   Dark Mode – bewusst deaktiviert
   riedersberger.de verwendet ausschließlich
   das helle Design (kein Dark Mode Support)
   ============================================ */
/*
@media (prefers-color-scheme: dark) {
	:root {
		--color-text:             #30395C;
		--color-text-light:       #ffffff;
		--color-bg:               #FAF7F0;
		--color-bg-alt:           #f0ece0;
		--color-link:             #0070a8;
		--color-link-hover:       #005580;
		--color-link-footer:      #efefef;
		--color-link-table:       #0070a8;
		--color-link-table-hover: #005580;
		--color-footer-bg:        #30395C;
		--color-footer-text:      #efefef;
		--color-footer-border:    #ffc855;
		--color-fussmenue-bg:     #C0C0C0;
		--color-table-bg:         #ffffff;
		--color-table-text:       #30395C;
		--color-table-row-odd:    #FAF7F0;
		--color-table-row-even:   #f0ece0;
		--color-table-border:     #dcdcdc;
		--color-grey-lightest:    #f8f8f8;
		--color-grey-lighter:     #f5f5f5;
		--color-grey-light:       #ebebeb;
		--color-grey-medium:      #dcdcdc;
		--color-grey:             #d3d3d3;
	}
}
*/
/* ============================================
   Body - Hintergrundfarbe
   ============================================ */
body {
	background-color: var(--bg-body);
}

/* ============================================
   Footer - Gelbe Akzentlinie
   ============================================ */
footer {
	border-bottom: 7px solid var(--color-footer-border) !important;
}

/* ============================================
   Header-Balken (wie Fußzeile)
   Version: 1.0
   Datum: 2025-12-07
   ============================================ */

.site-header {
	background-color: var(--color-primary);
	padding: 0.8rem var(--space-3);
	box-shadow: var(--shadow-md);
	position: sticky;
	top: 0;
	z-index: 1000;
}

.header-content {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 0;
}

/* Site Title im Header */
.site-header .site-title {
	margin: 0 0 0 -5px;
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 1.2;
}

.site-header .site-title a {
	color: var(--color-text-light);
	text-decoration: none;
	background-image: none !important;
	padding-left: 0 !important;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	transition: opacity var(--transition-standard);
}

.site-header .site-title a:hover {
	opacity: 0.9;
}

.site-header .site-title a:visited {
	color: var(--color-text-light);
}

/* Gelbes Logo-Quadrat */
.site-logo-square {
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--color-accent);
	border-radius: var(--radius-sm);
	display: block;
	flex-shrink: 0;
	transition: transform var(--transition-fast);
}

.site-header .site-title a:hover .site-logo-square {
	transform: scale(1.1);
}

/* Hamburger-Button im Header */
.site-header .hamburger-button {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	transition: all var(--transition-standard);
}

.site-header .hamburger-button:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.3);
}

.site-header .hamburger-line {
	background-color: var(--color-text-light);
}

/* ============================================
   Kachel-System für Startseite
   Version: 1.2
   Datum: 2025-12-07
   ============================================ */

/* Container für alle Kacheln */
.kachel-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-xl);
	max-width: 1000px;
	margin: var(--spacing-xxl) auto;
	padding: 0 var(--space-3);
}

/* Einzelne Kachel */
.kachel {
	background-color: var(--bg-kachel);
	border: 2px solid var(--color-primary);
	border-radius: var(--radius-lg);
	padding: var(--spacing-xl);
	text-align: center;
	transition: all var(--transition-standard);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none !important;
	color: var(--color-text-primary);
	box-shadow: var(--shadow-md);
	background-image: none !important;
	padding-left: var(--spacing-xl) !important;
}

.kachel:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-lg);
	border-color: var(--color-primary-dark);
	text-decoration: none !important;
}

.kachel:active {
	transform: translateY(-2px);
	font-style: normal !important;
}

.kachel:visited {
	color: var(--color-text-primary);
}

/* Icon-Bereich */
.kachel-icon {
	width: 5rem;
	height: 5rem;
	margin-bottom: var(--space-5);
	transition: all var(--transition-standard);
}

.kachel:hover .kachel-icon {
	transform: scale(1.1);
}

.kachel-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* SVG-Elemente mit expliziter Farbe */
.kachel-icon svg rect,
.kachel-icon svg path,
.kachel-icon svg circle,
.kachel-icon svg line {
	fill: var(--color-primary);
}

.kachel-icon svg rect[fill="none"],
.kachel-icon svg path[fill="none"],
.kachel-icon svg circle[fill="none"] {
	fill: none;
	stroke: var(--color-primary);
}

.kachel:hover .kachel-icon svg rect,
.kachel:hover .kachel-icon svg path,
.kachel:hover .kachel-icon svg circle,
.kachel:hover .kachel-icon svg line {
	fill: var(--color-primary-dark);
}

.kachel:hover .kachel-icon svg rect[fill="none"],
.kachel:hover .kachel-icon svg path[fill="none"],
.kachel:hover .kachel-icon svg circle[fill="none"] {
	fill: none;
	stroke: var(--color-primary-dark);
}

/* Kachel-Titel */
.kachel-titel {
	font-size: 1.5rem;
	margin: 0 0 var(--space-2) 0;
	color: var(--color-text-primary);
}

/* Kachel-Beschreibung */
.kachel-beschreibung {
	font-size: 0.95rem;
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1.4;
}

/* Inaktive Kachel – sichtbar aber nicht klickbar */
.kachel--inaktiv {
	opacity: 0.4;
	filter: grayscale(100%);
	cursor: not-allowed;
	pointer-events: none;
}

.kachel--inaktiv:hover {
	transform: none;
	box-shadow: var(--shadow-md);
	border-color: var(--color-primary);
}

.kachel--inaktiv:hover .kachel-icon {
	transform: none;
}

.kachel--inaktiv:hover .kachel-icon svg rect,
.kachel--inaktiv:hover .kachel-icon svg path,
.kachel--inaktiv:hover .kachel-icon svg circle,
.kachel--inaktiv:hover .kachel-icon svg line {
	fill: var(--color-primary);
}

.kachel--inaktiv:hover .kachel-icon svg rect[fill="none"],
.kachel--inaktiv:hover .kachel-icon svg path[fill="none"],
.kachel--inaktiv:hover .kachel-icon svg circle[fill="none"] {
	fill: none;
	stroke: var(--color-primary);
}

/* ============================================
   Responsive Design
   ============================================ */

/* Tablets (bis 768px) */
@media screen and (max-width: 768px) {
	/* Header */
	.site-header {
		padding: 0.6rem 0.8rem;
	}

	.header-content {
		padding-left: 0.5rem;
	}

	.site-header .site-title {
		font-size: 1.2rem;
	}

	.site-logo-square {
		width: 1.25rem;
		height: 1.25rem;
	}

	/* Kacheln bleiben 2x2 */
	.kachel-container {
		gap: var(--space-5);
		margin: var(--spacing-xl) auto;
	}

	.kachel {
		padding: var(--space-5);
	}

	.kachel-icon {
		width: 3.75rem;
		height: 3.75rem;
		margin-bottom: var(--space-3);
	}

	.kachel-titel {
		font-size: 1.3rem;
	}
}

/* Smartphones (bis 480px) */
@media screen and (max-width: 480px) {
	/* Header */
	.site-header {
		padding: var(--space-2) 0.6rem;
	}

	.header-content {
		padding-left: 0.375rem;
	}

	.site-header .site-title {
		font-size: 1.1rem;
	}

	.site-logo-square {
		width: 1.125rem;
		height: 1.125rem;
		border-radius: var(--radius-sm);
	}

	/* Kacheln - Eine Spalte */
	.kachel-container {
		grid-template-columns: 1fr;
		gap: var(--space-5);
		margin: var(--space-5) auto;
	}

	.kachel {
		padding: var(--space-5);
	}
}