/*	===============================================================================
	OVGU WEBSITE - ZENTRALE STYLESHEET
	===============================================================================
	
	KRITISCHE HINWEISE FUER ENTWICKLER:
	1. Diese Datei steuert das gesamte Layout und Design der OVGU Website
	2. Aenderungen hier wirken sich auf ALLE Seiten aus (index, lehre, forschung, etc.)
	3. Die Reihenfolge der CSS-Regeln ist wichtig - nicht beliebig umstellen!
	4. Responsive Design: Mobile-First Ansatz mit Media Queries
	5. OVGU-Farbschema: Beere (#5a0038), Bordeaux (#7a0034), Magenta (#7a003f)
	
	BESONDERHEITEN:
	- Globaler Graustufen-Filter fuer alle Bilder (ausser UI-Elementen)
	- Hover-Effekt zeigt Originalfarben der Bilder
	- Fix fuer 768px-Bildschirmbreite (weisser Balken Bug)
	- Burger-Menue fuer mobile Ansicht
	- 3D-Slider mit Animationen
	
	=============================================================================== */

/* Eine Quelle der Wahrheit – alle Farben mit light-dark() */
:root {
	--container-pad: 2rem;
	--slider-col: 25%;
	--slider-col-active: 50%;
	
	/* Seite unterstützt beide Schemata; Standard ist die Systempräferenz */
	color-scheme: light dark;
	
	--body-bg-color: light-dark(#fff, #1a1a1a);
	--body-color: light-dark(#000, #fff);
	--header-bg-color: light-dark(#fff, #2d2d2d);
	--header-box-shadow: light-dark(rgba(0, 0, 0, .08), rgba(0, 0, 0, .2));
	--nav-item-color: light-dark(#000, #fff);
	--nav-item-color-hover: light-dark(var(--color-1), var(--color-2));
	--nav-item-bg-after-color: light-dark(var(--color-1), var(--color-2));
	--search-box-bg-color: light-dark(#f5f5f5, #3d3d3d);
	--search-box-border-color: light-dark(#ddd, #4d4d4d);
	--search-input-color: light-dark(initial, #fff);
	--hero-text-color: light-dark(var(--ovgu-beere)/*#353535*/, var(--ovgu-beere)/*#a8a8a8*/);
	--hero-text-shadow: light-dark(rgba(0,0,0,0), white/*black*/);
	--bounce-frame-border-color: light-dark(var(--color-1), var(--color-2));
	--footer-bg-color: light-dark(var(--color-2), #2d2d2d);
	--featured-slider-bg-color: light-dark(#f5f5f5, #2a2a2a);
	--slider-card-bg-color: light-dark(#fff, #333);
	--slider-content-h3-color: light-dark(#333, #fff);
	--slider-content-active-color: light-dark(#555, #ccc);
	--slider-dot-active-bg-color: light-dark(var(--color-1), #ff99cc);
	--article-card-bg-color: light-dark(#fff, #2d2d2d);
	--article-card-box-shadow: light-dark(rgba(0,0,0,.05), rgba(0,0,0,.2));
	--article-date-color: light-dark(#777, #aaa);
	--article-excerpt-color: light-dark(#555, #ccc);
	--read-more-color: light-dark(var(--color-1), #ff99cc);
	--page-link-color: light-dark(#333, #ccc);
	--page-link-active-bg-color: light-dark(var(--color-1), var(--color-2));
	--page-link-hover-color: light-dark(#f0f0f0, #3d3d3d);
	--sidebar-section-bg-color: light-dark(#fff, #2d2d2d);
	--sidebar-section-title-color: light-dark(var(--ovgu-beere), #fff);
	--sidebar-section-share-bg-color: light-dark(var(--article-card-box-shadow), var(--ovgu-beere));
	--sidebar-section-share-color: light-dark(var(--ovgu-beere), #fff);
	--category-box-bg-color: light-dark(#fff, #3d3d3d);
	--category-box-h4-color: light-dark(var(--color-1), #ff99cc);
	--top-articles-border-color: light-dark(#eee, #444);
	--top-article-card-bg-color: light-dark(#f9f9f9, #f9f9f9); /* bleibt gleich */
	--top-article-card-box-shadow: light-dark(rgba(0,0,0,.05), rgba(0,0,0,.2));
	--top-article-title-color: light-dark(#333, #fff);
	--top-article-card-hover-title-color: light-dark(var(--color-1), #ff99cc);
	--section-title-color: light-dark(#2d2d2d, #fff);
	--section-title-after-bg-color: light-dark(var(--color-1), #ff99cc);
	--article-highlight-bg-color: light-dark(#f0f0f0, var(--article-card-bg-color));
	--glossary-item-bg-color: light-dark(#F9F9F9, #242424);
	--comment-captcha-bg-color: light-dark(#F5F5F5, #333);
	--mobile-burger-bar-bg-color: light-dark(var(--color-1), #fff);
	--mobile-category-nav-bg-color: light-dark(rgba(255,255,255,.95), rgba(45,45,45,.95));
	--mobile-search-box-border-color: light-dark(#eee, #4d4d4d);
	--mobile-search-box-bg-color: light-dark(#f5f5f5, #3d3d3d);
	--pre-footer-container-color: light-dark(#f9f9f9, #2D2D2D);
	--article-title-color: light-dark(#333, #fff);
	--article-content-color: light-dark(#444, #fff);
	--more-articles-box-bg-color: light-dark(#FFFFFF, #4D4D4D);
	--more-article-excerpt-color: light-dark(#666, #fff);
	
	/* Nicht-Farben: kleine Ausnahmen (siehe Hinweise unten) */
	--filter-invert: 0; /* wird im Dark-Mode via data-theme überschrieben */
}

:root[data-theme="dark"]  { color-scheme: dark;  --filter-invert: 1; }
/* User zwingt Light: */
:root[data-theme="light"] { color-scheme: light; --filter-invert: 0; }

/*	====================================
	Grundlegende Stile und Zuruecksetzen
	==================================== */
/* Entfernen Sie die Standard-Margen und Paddings aller Elemente */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Verhindert horizontales Scrollen und fixiert Darstellungsprobleme */
html, body {
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
}

/*	============================================================================
	KRITISCHER BILDERFILTER - NICHT LOESCHEN!
	============================================================================
	Dieser Filter ist das Herzstueck des visuellen Designs der OVGU Website:
	
	WAS PASSIERT HIER:
	1. ALLE Bilder werden automatisch in Graustufen (95%) dargestellt
	2. Brightness/Contrast sorgen fuer bessere Lesbarkeit ueber den Bildern
	3. Hover-Effekt bringt Originalfarben zurueck (siehe naechste Regel)
	4. UI-Elemente sind explizit ausgenommen (:not() Selektoren)
	
	WARUM SO KOMPLEX:
	- Konsistentes Design ohne jeden Artikel einzeln bearbeiten zu muessen
	- Automatischer "Wow-Effekt" beim Hover ueber Artikel
	- Bessere Lesbarkeit von Texten ueber Bildern
	
	ACHTUNG: Aenderungen hier betreffen das gesamte visuelle Erscheinungsbild!
	============================================================================ */
/* Basis: Graustufen für Content-Bilder, nicht für UI */
/* 1) Global vereinfachen */
.content img {
	filter: grayscale(95%) brightness(1.15) contrast(.9);
	transition: filter .3s ease, transform .3s ease;
}
/* 2) Ausnahmen ohne !important dank :is() */
.content :is(img.search-icon, img.audio-icon, img.theme-icon, img.logo),
.utility-controls img,
.slider__images img,
.burger-menu-icon img,
.mobile-utility-controls img,
.hero-image img {
	filter: none;
}


/* Explizit Ausnahmen von der Graustufen-Regel definieren */
.search-icon, 
.audio-icon, 
.theme-icon, 
.logo, 
.utility-controls img, 
.burger-menu-icon img,
.mobile-utility-controls img,
.hero-image img,
.slider__images img {
	filter: none !important;
}

/* Grundlegende Schriftart fuer alles */
body {
	font-family: var(--barlow, sans-serif);
	line-height: 1.6;
	background-color: var(--body-bg-color, #fff);
	color: var(--body-color, #000);
	margin: 0;
	padding: 0;
}

/* Grundlegende Link-Stile */
a {
	text-decoration: none;
	color: inherit;
}

/* Entfernen Sie die Standard-Listenpunkte */
ul {
	list-style: none;
}

/* Container-Styling fuer die gesamte Seite */
.container {
	width: 100%;
	max-width: var(--container-width, 1480px);
	margin: 0 auto;
	padding: var(--container-padding, 0 1rem);
}

/*	====================================
	Header-Bereich
	==================================== */
/* Header mit Schatten fuer visuelle Abtrennung */
header {
	background-color: var(--header-bg-color, #fff);
	box-shadow: 0 .25rem .5rem -0.125rem var(--header-box-shadow);
	position: relative;
	z-index: 100;
}

/* Flex-Container fuer Logo und Navigation */
.header-container {
	display: flex;
	justify-content: space-between;
	max-width: var(--container-width, 1480px);
	margin: 0 auto;
	padding: 1rem 2rem;
}

/* Logo-Bereich */
.logo-area {
	flex: 0 0 auto;
}

/* Logo-Styling */
.logo {
	width: 10rem;/* Noch groesser: von 18.75rem auf 33.125rem */
	height: auto;
	display: block;
	margin: 10%;
}

.logo img {
	width: 100%;
	height: auto;
}

/* Navigationsbereich (rechte Seite) */
.navigation-area {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-end; /* Rechtsbuendige Ausrichtung */
}

/* Obere Leiste mit Suche und Utilities */
.top-bar {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

/* Suchfeld-Styling */
.search-box {
	display: flex;
	align-items: center;
	border: 1px solid var(--search-box-border-color, #ddd);
	border-radius: 1.25rem;
	overflow: hidden;
	max-width: 8.125rem;
	background-color: var(--search-box-bg-color, #f5f5f5);
}

/* Suchfeld-Eingabe */
.search-input {
	padding: .3rem .6rem;
	border: none;
	outline: none;
	width: 5.625rem;
	font-size: .85rem;
	background-color: transparent;
	color: var(--search-input-color, initial);
	font-family: var(--barlow, sans-serif);
}

/* Lupen-Button */
.search-button {
	background: none;
	border: none;
	cursor: pointer;
	padding: .3rem .5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: .8;
}

/* Lupen-Icon als Bild */
.search-icon {
	width: 1rem;
	height: 1rem;
	object-fit: contain;
	filter: invert(var(--filter-invert, 0));
}

/* Utility-Controls (Dark Mode, Audio, Sprache) */
.utility-controls {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* Audio-Button */
.audio-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: .3rem;
	display: flex;
	align-items: center;
	opacity: .8;
}

.audio-icon {
	width: 1.25rem;
	height: 1.25rem;
	object-fit: contain;
	filter: invert(var(--filter-invert, 0));
}

/* Dark Mode Toggle */
.theme-toggle-wrapper {
	position: relative;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0 .625rem;
}

.theme-toggle-input {
	display: none;
}

.theme-toggle-label {
	cursor: pointer;
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	padding: .5rem;
	text-align: center;
}

.theme-icon {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transition: transform .6s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
	transform-origin: center;
	filter: invert(var(--filter-invert));
}

.sun-icon {
	transform: rotate(0deg);
	opacity: 1;
}

.moon-icon {
	transform: rotate(360deg);
	opacity: 0;
}

/* Dark Mode aktiviert */
.theme-toggle-input:checked + .theme-toggle-label .sun-icon {
	transform: rotate(-360deg);
	opacity: 0;
}

.theme-toggle-input:checked + .theme-toggle-label .moon-icon {
	transform: rotate(0deg);
	opacity: 1;
}

/*	====================================
	Hauptnavigation
	==================================== */
/* Kategorie-Navigation */
.category-nav {
	display: flex;
	gap: 3rem;
	justify-content: flex-end;
}

.nav-item {
	font-weight: 700;/* Memory: Bold text (700 weight) */
	position: relative;
	text-decoration: none;
	color: var(--nav-item-color, #000);
	font-size: 1.1rem;
	padding-bottom: .3rem;
	transition: color .3s;
}

.nav-item::after,
.nav-item:focus-visible {
	content: '';
	position: absolute;
	width: 100%;
	height: .125rem;
	bottom: -0.25rem;
	left: 0;
	background-color: var(--nav-item-bg-after-color);
	transform: scaleX(0);
	transform-origin: bottom right;
	transition: transform .3s ease;
}

.nav-item:hover {
	color: var(--nav-item-color-hover);
}

.nav-item:hover::after {
	transform: scaleX(1);
	transform-origin: bottom left;
}

/*	====================================
	Hero-Bereich
	==================================== */
/* Hero-Bereich mit Hintergrundbild */
.hero-section {
	position: relative;
	width: 100%;
	height: var(--hero-height, auto);
	min-height: var(--hero-min-height, calc(100vh - 9.375rem));
	display: flex;
	flex-direction: column;
	margin-bottom: var(--hero-margin-bottom, 0);
}

/* Hero-Image */
.hero-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

/*	=========================================================================
	BLOG HERO-BILDER - Ohne Graustufenfilter
	========================================================================= 
	
	KRITISCHE UeBERSCHREIBUNG:
	- filter: none; ueberschreibt den globalen grayscale(95%) Filter
	- Bilder werden in voller Farbe angezeigt (nicht grau)
	- Sanfter Hover-Effekt mit scale(1.02) statt scale(1.05)
	
	WARUM KEINE GRAUSTUFENFILTER?
	- Blog-Artikel sollen ansprechend und farbig wirken
	- Bessere Artikel-Praesentation ohne Ablenkung
	- Konsistent mit modernen Blog-Designs
	========================================================================= */
.hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.hero-image:hover img {
	transform: scale(1.02);
}

.hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 100%); /* Angepasster Verlauf fuer bessere Sichtbarkeit der Farben */
	z-index: 2;
}

.hero-content {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 2rem 0;
	color: #ffffff;
	text-shadow: 0 .125rem .25rem rgba(0,0,0,.7);
	z-index: 3;
}

.hero-content * {
	color: #fff;
}

/* Hero-Text */
.hero-text {
	position: relative;
	width: 100%;
	max-width: var(--container-width, 1480px);
	margin: 0 auto;
	padding: 4rem 2rem 2rem;
	text-shadow: 0px 0px 5px var(--hero-text-shadow), 1px 1px 2px var(--hero-text-shadow);
}

.hero-text h1 {
	font-family: var(--baskervville, sans-serif);
	font-style: italic;
	font-size: 9rem;
	font-weight: normal;
	color: var(--hero-text-color);
	margin: 0;
}

.hero-text h1 > span {
	display: inline-block;
	line-height: 1;/* Verhindert unerwuenschte Zeilenabstaende */
	letter-spacing: 0;/* Kein zusaetzlicher Buchstabenabstand */
}

.hero-text-mag {
	font-size: 3rem !important;
	padding: 0 .2em;
}

/* Kategorie-Grid */
.category-grid {
	display: grid;
	grid-template-columns: repeat(2, 13.75rem);/* Memory: 220x13.75rem tiles */
	gap: 3rem;/* Memory: 3rem gap between tiles */
	position: absolute;/* Absolute Position fuer korrekte Ausrichtung */
	right: calc(2rem + 13.75rem + 3rem);/* Memory: align with Campus link */
	top: 12%;/* Memory: top position */
	z-index: 1;/* Stellt sicher, dass das Grid ueber dem Header liegt */
	
	padding: 1em;
	border-radius: 1.5rem;
}

/* Bounce-Rahmen */
.bounce-frame {
	position: absolute;
	width: 13.75rem;
	height: 13.75rem;
	border: .25rem solid var(--bounce-frame-border-color);
	border-radius: 1.5rem;
	pointer-events: none;
	opacity: 0;
	z-index: 10;
	transition: all .5s cubic-bezier(.5, 2, .5, .8); /* Extra starker Bounce */
	
	display:none; /*Bounce-Frame deaktiviert*/
}

/* Kategorie-Kachel */
.category-tile {
	width: 13.75rem;
	height: 13.75rem;
	position: relative;
	overflow: hidden;
	display: block;
	border-radius: 1.5rem;
	transition: all .3s ease;
}

.category-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.category-tile:hover img { 
	filter: none !important; 
	transform: scale(1.05);
}

.category-tile h2:not(.article-category-tag) {
	font-weight: 700;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 1.8rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0;
	text-shadow: .125rem .125rem .25rem rgba(0, 0, 0, .5);
	z-index: 2;
	transition: transform .3s ease;
	text-align: center;
	width: 100%;
	white-space: normal;
}

.category-tile:hover h2:not(.article-category-tag) {
	transform: translate(-50%, -50%) scale(1.05);
}

/*	====================================
	Footer
	==================================== */
/* Footer-Bereich */
footer {
	background-color: var(--footer-bg-color);
	color: #fff;
	padding: 2rem 0;
	width: 100%;
}

/* Footer-Obere-Haelfte */
.footer-top {
	color: #fff;
	width: 100%;
	/*height: 2.5rem;*/
	border-bottom: 1px solid rgba(255, 255, 255, .2);
	max-width: var(--container-width, 1480px);
	margin: 0 auto;
	padding: 0 var(--container-pad, 2rem);
	font-weight: 700;
}

/* Archiv-Links */
.archive {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	padding-top: .5rem;
}

.archive span {
	font-weight: bold;
}

/* Jahre-Links */
.years {
	display: flex;
	gap: 1rem;
	justify-content: flex-end;
}

.years a {
	color: #fff;
	opacity: .8;
}

.years a:hover {
	opacity: 1;
}

/* Footer-Untere-Haelfte */
.footer-bottom {
	display: flex;
	justify-content: space-between;
	max-width: var(--container-width, 1480px);
	margin: 0 auto;
	padding: 2rem 2rem 0;
}

/* Footer-Sektion */
.footer-section {
	flex: 1;
	margin-right: 2rem;
	font-weight: 700;
}

.footer-section h3 {
	margin-bottom: 1rem;
	font-size: 1rem;
	font-weight: bold;
}

.footer-section p, .footer-section li {
	margin-bottom: .5rem;
}

/* Soziale-Medien-Icons */
.social-icons {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
}

.social-icon {
	width: 1.875rem;
	height: 1.875rem;
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--color-2, #000);
}

.social-icon:hover {
	transform: translateY(-.25rem);
}

/*body.dark-mode .category-tile {
	box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .3);
}*/

/*	====================================
	Kategorie-Seite Stile
	==================================== */
/* Artikel-Slider */
.featured-slider {
	width: 100%;
	margin-bottom: 3rem;
	padding: 2rem 0;
	background-color: var(--featured-slider-bg-color);
}

.slider-container {
	max-width: var(--container-width, 1480px);
	margin: 0 auto;
	position: relative;
	padding: 0 var(--container-pad, 2rem);
}

.slider-track {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	position: relative;
}

.slider-item {
	flex: 0 0 var(--slider-col);
	transition: all .5s ease;
	opacity: .7;
	transform: scale(.85);
}

.slider-item.active {
	flex: 0 0 var(--slider-col-active);
	opacity: 1;
	transform: scale(1);
	z-index: 2;
}

.slider-card {
	background-color: var(--slider-card-bg-color);
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .1);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.slider-item.active .slider-card {
	box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .15);
}

.slider-card img {
	width: 100%;
	height: 11.25rem;
	object-fit: cover;
}

.slider-item.active .slider-card img {
	height: 15.625rem;
}

.slider-content {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.slider-content h3 {
	font-weight: 700;
	font-size: 1.2rem;
	margin: .5rem 0;
	color: var(--slider-content-h3-color);
}

.slider-item.active .slider-content h3 {
	font-size: 1.6rem;
	margin-bottom: 1rem;
}

.slider-item.active .slider-content p {
	display: block;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--slider-content-active-color);
}

.slider-item:not(.active) .slider-content p {
	display: none;
}

.slider-controls {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 2rem;
	gap: 1rem;
}

.slider-prev,
.slider-next {
	background-color: var(--color-1);
	color: #fff;
	border: none;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 1.2rem;
	transition: background-color .3s ease;
}

.slider-prev:hover,
.slider-next:hover {
	background-color: var(--color-2);
}

.slider-dots {
	display: flex;
	gap: .5rem;
}

.slider-dot {
	width: .625rem;
	height: .625rem;
	border-radius: 50%;
	background-color: #ccc;
	cursor: pointer;
	transition: background-color .3s ease;
}

.slider-dot.active {
	background-color: var(--slider-dot-active-bg-color);
}

/* Kategorie-Header mit Banner */
.category-header {
	width: 100%;
	position: relative;
	margin-bottom: 3rem;
}

.category-banner {
	width: 100%;
	height: 18.75rem;
	position: relative;
	overflow: hidden;
}

.banner-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(.7);
}

.category-title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	width: 100%;
}

.category-title h1 {
	font-weight: 700;
	font-size: 4rem;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .125rem;
	margin: 0;
	text-shadow: .125rem .125rem .25rem rgba(0, 0, 0, .5);
}

/* Artikel-Sektion */
.article-section {
	margin-top: 20vh; /* Abstand erhoeht, gleicher Abstand wie beim Slider zum Menue */
	padding: 2rem 0 4rem;
	min-height: 900px;
}

/* Artikel-Liste */
.article-list {
	display: flex;
	flex-direction: column;
	gap: 3rem;
	margin-bottom: 3rem;
}

/* Artikel-Karte */
.article-card {
	display: flex;
	background-color: var(--article-card-bg-color);
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 .25rem .5rem var(--article-card-box-shadow);
	transition: transform .3s ease, box-shadow .3s ease;
	border-left: .25rem solid rgba(90, 0, 56, .2);
	height: 18.75rem; /* Feste Hoehe fuer einheitliches Aussehen */
}

.article-card:hover {
	transform: translateY(-0.25rem);
	box-shadow: 0 .5rem 1rem rgba(90, 0, 56, .3);
	border-left: .25rem solid var(--color-1);
}

.article-image {
	flex: 0 0 15.625rem;
	height: 18.75rem; /* Feste Hoehe gleich der Kartenhoehe */
	overflow: hidden;
	position: relative;
	font-size: 0;
	line-height: 0;
}

.article-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease, filter .3s ease;
	display: block;
	margin: 0;
	padding: 0;
}

.article-card:hover .article-image img {
	transform: scale(1.05);
}

.article-content {
	flex: 1;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-start; /* Startet oben, keine automatische Verteilung */
}

.article-date {
	display: block;
	font-size: .85rem;
	color: var(--article-date-color);
	margin-bottom: .5rem;
}

.article-title {
	font-weight: 700;
	font-size: var(--article-title-font-size, 1.6rem);
	margin: var(--article-title-margin, 0 0 1.5rem);
	color: var(--article-title-color, #333);
	line-height: var(--article-title-line-height, inherit);
	max-width: var(--article-title-max-width, auto);
}

.article-meta {
	display: flex;
	gap: 1.5rem;
	font-size: 1rem;
	opacity: .9;
	flex-wrap: wrap;
	align-items: center;
}

.article-excerpt {
	font-size: 1rem;
	line-height: 1.3;
	color: var(--article-excerpt-color);
	margin-bottom: 1.5rem;
	
	max-height: 100px;
	
	text-overflow: ellipsis;
	overflow: hidden;
	
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.article-category-tag {
	display: inline-block;
	background-color: var(--color-1);
	color: #fff;
	padding: .4rem 1rem;
	font-size: .9rem;
	font-weight: 600;
	text-transform: uppercase;
	border-radius: .1875rem;
	margin-left: 1rem;
	width: fit-content; /* Beschraenkt die Breite auf den Inhalt */
	max-width: 12.5rem; /* Maximale Breite setzen */
	position: relative; /* Stellt sicher, dass es sich nicht dehnt */
}

.read-more {
	display: inline-block;
	color: var(--read-more-color);
	font-weight: 700;
	position: relative;
	padding-bottom: .125rem;
	margin-top: auto; /* Schiebt den Link automatisch nach unten */
}

.read-more::after,
.read-more:focus-visible {
	content: '';
	position: absolute;
	width: 100%;
	height: .125rem;
	bottom: 0;
	left: 0;
	background-color: var(--read-more-color);
	transform: scaleX(0);
	transform-origin: bottom right;
	transition: transform .3s ease;
}

.read-more:hover::after {
	transform: scaleX(1);
	transform-origin: bottom left;
}

/* Pagination */
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .5rem;
	margin-top: 3rem;
}

.page-link {
	border: none;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	font-weight: 700;
	color: var(--page-link-color, #333);
	transition: all .3s ease;
}

.page-link.active {
	background-color: var(--page-link-active-bg-color);
	color: #fff;
	}

.page-link:hover:not(.active) {
	background-color: var(--page-link-hover-color, #f0f0f0);
}

.page-dots {
	margin: 0 .5rem;
}

.page-link.prevnext {
	width: auto;
	padding: 0 1rem;
	border-radius: 1.25rem;
}

/*	====================================
	Layout mit Seitenleiste
	==================================== */
.content-with-sidebar {
	display: flex;
	gap: 3rem;
	max-width: var(--container-width, 1480px);
	margin: 0 auto;
	padding: 0 var(--container-pad, 2rem);
	position: relative;
}

.main-content {
	flex: 0 0 800px;
	margin: 0 auto;
}

/* Hauptinhalt-Grid */
.main-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-bottom: 4rem;
}

/* Artikel-Styling */
.blog-article {
	margin-bottom: 3rem;
}

.article-content p {
	margin-bottom: 1.5rem;
	font-size: .9rem;
	line-height: 1.3;
	color: var(--article-content-color);
}

.article-highlight {
	position: relative;
	background-color: #f0f0f0;
	padding: 2rem;
	margin: 2.5rem 0;
	font-style: italic;
	font-size: 1.3rem;
	color: #333;
	border-radius: .3125rem;
}

.quote-marks {
	position: absolute;
	font-size: 5rem;
	color: var(--color-1);
	/*font-family: Georgia, serif;*/
	font-family: var(--baskervville);
	font-style: italic;
	font-weight:bold;
	line-height: 1;
	z-index: 1;
}

.quote-start {
	top: -1.25rem;
	left: 1rem;
}

.quote-end {
	bottom: -2.8125rem;
	right: 1rem;
}

/* Fremdwoerter-Erklaerung */
.glossary-section {
	background-color: #fff;
	padding: 2.5rem;
	border-radius: .625rem;
	box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, .05);
	margin-bottom: 3rem;
}

.glossary-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.glossary-item {
	background-color: #f9f9f9;
	border-radius: .5rem;
	padding: 1.5rem;
	transition: transform .3s ease, box-shadow .3s ease;
}

.glossary-item:hover {
	transform: translateY(-0.25rem);
	box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, .1);
}

.glossary-term {
	font-weight: 700;
	color: var(--color-1);
	margin-bottom: .8rem;
	font-size: 1.1rem;
}

.glossary-definition {
	font-size: .95rem;
	line-height: 1.6;
	color: var(--article-excerpt-color);
}

/* Kommentarbereich */
.comments-section {
	margin-bottom: 3rem;
}

.comment-form {
	padding: 2rem;
	border-radius: 10px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	margin-bottom: 2rem;
}

.comment-textarea {
	width: 100%;
	padding: 1rem;
	border: 1px solid #e0e0e0;
	border-radius: .25rem;
	margin-bottom: 1rem;
	min-height: 120px;
	resize: vertical;
	font-family: inherit;
}

.comment-input {
	width: 100%;
	height: 150px;
	padding: 1rem;
	border: 1px solid #ddd;
	border-radius: 5px;
	resize: vertical;
	margin-bottom: 1rem;
	font-family: inherit;
	transition: border-color 0.3s ease;
}

.comment-input:focus {
	border-color: #5a0038; /* OVGU Beere */
	outline: none;
}

.comment-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	border-top: 1px solid #eee;
	padding-top: 0.8rem;
}

.comment-submit {
	background-color: #5a0038;
	color: white;
	border: none;
	border-radius: .25rem;
	padding: 10px 20px;
	cursor: pointer;
	font-weight: bold;
	transition: background-color 0.2s ease;
}

.comment-submit:hover {
	background-color: #7a0050;
}

.sidebar {
	width: 17.5rem;
	flex-shrink: 0;
	position: var(--sidebar-position, absolute);
	right: 2rem;
	top: var(--sidebar-top, 0);
}

.sidebar-section {
	background-color: var(--sidebar-section-bg-color);
	border-radius: var(--sidebar-section-border-radius, 1rem);
	padding: 1.5rem;
	margin-bottom: 2rem;
	box-shadow: var(--sidebar-section-box-shadow, 0 .25rem .5rem rgba(0, 0, 0, .05));
}

.sidebar-section.no-background-color {
	background-color: #fff;
}

.sidebar-section h3 {
	font-weight: 700;
	font-size: 1.5rem;
	margin: 0 0 1rem;
	text-align: center;
	padding: .5rem 0;
	letter-spacing: .5px;
}

.sidebar-title {
	font-weight: 700;
	font-size: 1.2rem;
	color: #333;
	margin-bottom: 1.2rem;
	position: relative;
	padding-bottom: .5rem;
}

.sidebar-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 2.5rem;
	height: .1875rem;
	background-color: var(--color-1);
}

/* Social Media Icons in der Seitenleiste */
.sidebar-social-icons {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin-top: 1rem;
	flex-wrap: wrap;
}

.sidebar-social-icons .social-icon {
	width: 2.5rem;
	height: 2.5rem;
	margin: .5rem;
}

/* Kategorien in der Seitenleiste */
.sidebar-categories {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.category-link {
	display: block;
	width: 100%;
}

.category-box {
	background-color: var(--category-box-bg-color);
	border-radius: .625rem;
	padding: 1rem;
	text-align: center;
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .05);
	transition: transform .3s ease, box-shadow .3s ease;
	position: relative;
	overflow: hidden;
	border: 1px solid transparent;
	box-sizing: border-box;
	height: 4.375rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.category-box:hover {
	transform: translateY(.125rem);
	box-shadow: 0 .25rem .5rem rgba(90, 0, 56, .3);
	border-color: rgba(90, 0, 56, .2);
}

.category-box h4 {
	font-weight: 700;
	font-size: 1rem;
	margin: 0;
	color: var(--category-box-h4-color);
}

/*	====================================
	Top Artikel Sektion
	==================================== */
.top-articles {
	margin-top: 4rem;
	border-top: 1px solid var(--top-articles-border-color);
	padding-top: 2rem;
}

.section-title {
	font-weight: 700;
	font-size: 1.8rem;
	margin: var(--section-title-margin, 0 0 2rem);
	color: var(--section-title-color);
	text-align: center;
	position: relative;
	padding: var(--section-title-padding, 0);
}

.section-title::after {
	content: '';
	display: block;
	width: var(--section-title-width, 3.125rem);
	height: var(--section-title-height, .25rem);
	background-color: var(--section-title-after-bg-color);
	margin: .5rem auto 0;
	position: absolute;
	bottom: 0;
	left: 0;
}

.top-articles-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin-top: 2rem;
}

.top-article-card {
	background-color: var(--top-article-card-bg-color);
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 .25rem .5rem var(--top-article-card-box-shadow);
	transition: transform .3s ease, box-shadow .3s ease;
}

.top-article-card:hover {
	transform: translateY(-0.25rem);
	box-shadow: 0 .5rem 1rem rgba(90, 0, 56, .3);
}

.top-article-image {
	width: 100%;
	height: 11.25rem;
	overflow: hidden;
	position: relative;
	font-size: 0;
	line-height: 0;
}

.top-article-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease, filter .3s ease;
	display: block;
	margin: 0;
	padding: 0;
}

.top-article-card:hover .top-article-image img {
	transform: scale(1.05);
}

.top-article-content {
	padding: 1.2rem;
}

.top-article-title {
	font-weight: 700;
	font-size: 1.1rem;
	margin: 0;
	color: var(--top-article-title-color);
	transition: color .3s ease;
}

.top-article-card:hover .top-article-title {
	color: var(--top-article-card-hover-title-color);
}

/* Burger-Menue Styles */
.burger-menu-icon {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 1.875rem;
	height: 1.25rem;
	cursor: pointer;
	position: relative;
	margin-left: 1.25rem;
	z-index: 200;
}

.burger-bar {
	width: 100%;
	height: .1875rem;
	background-color: var(--mobile-burger-bar-bg-color);
	border-radius: .1875rem;
	transition: all .3s ease;
}

/* Mobile Navigation Styles */
.mobile-nav-active .burger-bar:nth-child(1) {
	transform: translateY(.5rem) rotate(45deg);
}

.mobile-nav-active .burger-bar:nth-child(2) {
	opacity: 0;
}

.mobile-nav-active .burger-bar:nth-child(3) {
	transform: translateY(-0.5rem) rotate(-45deg);
}

.mobile-nav-active .burger-menu-icon {
	position: fixed;
	top: 1.5rem;
	right: 1.5rem;
}

/* Standardeinstellungen fuer mobile Elemente */
.mobile-utility-controls {
	display: none;
}

.mobile-search-box {
	display: none;
}


/*Klaro Fix*/
div[data-type='placeholder'][data-name='youtube'] {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.cm-switch .slider {
	margin-top:0;
	height: 20px;
	padding: .8em;
}

/*	====================================
	Responsive Design
	==================================== */
@media (max-width: 1200px) {
	/* Hintergrund ausblenden */
	.hero-background {
		display: none;
	}

	/* Komplettes Layout umstellen - moderate Abstaende */
	.hero-section {
		align-items: center;
		padding-top: 1rem; /* Moderater Abstand zum Menue */
		padding-bottom: 2rem; /* Abstand zum Footer */
		min-height: 80vh; /* Mindesthoehe um sicherzustellen, dass es nicht den Footer beruehrt */
	}

	/* Guericke-Ueberschrift zentrieren und ueber die Kacheln setzen */
	.hero-text {
		margin-top: .5rem; /* Leichter Abstand oben */
		margin-bottom: 2rem; /* Moderater Abstand zu den Kategorien */
		text-align: center;
		padding-top: .5rem; /* Leichte Polsterung */
	}

	.hero-text h1 {
		font-size: 7rem;
		margin-top: 0; /* Kein oberer Abstand */
		line-height: 1; /* Line-Height reduzieren fuer kompakteres Layout */
	}

	/* Kategorien mittig positionieren */
	.category-grid {
		position: static;
		grid-template-columns: repeat(2, 13.75rem);
		gap: 2rem;
		justify-content: center;
		margin: 0 auto;
		margin-bottom: 2rem; /* Mehr Abstand zum Footer */
	}

	.category-tile, .bounce-frame {
		width: 13.75rem;
		height: 13.75rem;
	}
}

@media(max-width: 1920px) {
	.hero-text h1 {
		font-size: 9vw;
	}
}

/* Tablet und kleinere Desktops */
@media (max-width: 1440px) {
	.nav-container {
		flex-wrap: wrap;
		gap: 1rem;
	}

	.category-grid {
		justify-content: flex-end;
		right: 5rem;
	}

	.content-with-sidebar {
		flex-direction: column;
	}

	.main-content {
		max-width: 100%;
		flex: none;
		margin: 0;
	}

	.sidebar:not(.article-sidebar) {
		width: 100%;
		margin-top: 2rem;
		position: static;
		display: flex;
		flex-direction: row;
	    justify-content: center;
	    gap: 2em;
	}
	
	.sidebar-section {
		max-width: 300px;
	}

	.sidebar-categories {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Tablets und kleinere Desktops */
@media (max-width: 1024px) {
	:root { 
		--slider-col: 30%;
		--slider-col-active: 40%;
	}

	.article-card {
		flex-direction: column;
		height: auto; /* Stellt sicher, dass die Karte so hoch ist, wie der Inhalt es erfordert */
	}

	.article-image {
		flex: none;
		width: 100%;
		height: 15.625rem;
	}

	.article-content {
		padding: 1.5rem;
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.more-article-excerpt {
		display: block; /* Stellt sicher, dass der Text angezeigt wird */
		margin-bottom: 1.5rem;
		font-size: .95rem;
		color: #555;
		line-height: 1.6;
	}
}

@media (min-width: 992px) {
	.main-grid {
		grid-template-columns: 2fr 1fr;
	}
}

@media (max-width: 992px) {
	.sidebar {
		width: 100%;
		margin-top: 2rem;
		position: static;
		display: flex;
		flex-direction: row;
	    justify-content: center;
	    gap: 2em;
	}
}

/*	============================================================================
	KRITISCHER RESPONSIVE BREAKPOINT - 768px
	============================================================================
	
	ACHTUNG: Dieser Breakpoint ist das Herzstueck des responsive Designs!
	
	WARUM 768px:
	- Standard-Tablet-Breakpoint (iPad Portrait: 768px)
	- Ab hier wird Desktop-Navigation zu Burger-Menue
	- Layout wechselt von horizontal zu vertikal
	- Header wird stapelbar
	
	WICHTIGE AENDERUNGEN AB 768px:
	1. Burger-Menue wird aktiviert
	2. Top-Bar wird ausgeblendet
	3. Navigation wird Vollbild-Overlay
	4. Slider wird niedriger (40vh statt 60vh)
	5. Grid-Layouts werden einspaltig
	
	VORSICHT: Aenderungen hier betreffen ALLE mobilen Geraete!
	============================================================================ */

/* Tablets */
@media (max-width: 768px) {
	:root {
		--slider-col: 100%;
		--slider-col-active: 100%;
	}
	/* Burger-Menue anzeigen */
	.burger-menu-icon {
		display: flex;
		margin-left: auto;
	}

	/* Header und Navigation */
	header {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 50;
		box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .1);
	}

	.header-container {
		flex-direction: row;
		align-items: center;
		padding: 1rem;
		height: 5rem;
	}

	.logo {
		max-width: 13.75rem;
		max-height: 3.75rem;
	}

	.navigation-area {
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		position: relative;
		margin-top: 1rem;
	}

	/* Mobile Navigation */
	.category-nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: var(--mobile-category-nav-bg-color);
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 100;
		transform: translateX(-100%);
		transition: transform .3s ease;
		padding-top: 5rem; /* Platz fuer den Header */
		gap: 1rem;
		flex-wrap: wrap;
	}

	.mobile-nav-active .category-nav {
		transform: translateX(0);
	}

	.category-nav .nav-item {
		margin: .8rem 0;
		font-size: 1.2rem;
		padding: .5rem 1rem;
		border-radius: .3125rem;
		transition: background-color .3s ease;
	}

	.category-nav .nav-item:hover {
		background-color: rgba(90, 0, 56, .1);
	}

	/* Mobile Utility Controls im mobilen Modus anzeigen */
	.mobile-nav-active .mobile-utility-controls {
		display: flex;
		flex-direction: row /*column*/;
		align-items: center;
		margin-top: 2rem;
		gap: 1.5rem;
		/*width: 80%;*/
	}

	/* Suchleiste und Utility-Controls im Burger-Menue */
	/*.mobile-nav-active .category-nav::before {
		content: '';
		display: block;
		width: 80%;
		height: 1px;
		background-color: rgba(0, 0, 0, .1);
		margin: 1rem auto;
	}*/

	.mobile-search-box {
		display: flex;
		width: 100%;
		max-width: 18.75rem;
		margin-top: 1rem;
		background-color: var(--mobile-search-box-bg-color);
		border-radius: 3.125rem;
		padding: .5rem;
		border: 1px solid var(--mobile-search-box-border-color);
		box-shadow: 0px 0px 4px black;
	}

	.mobile-search-box .search-input {
		flex: 1;
		border: none;
		background: transparent;
		padding: .5rem 1rem;
		font-size: .9rem;
		outline: none;
	}

	/* Top Bar */
	.top-bar {
		display: none; /* Im mobilen Modus ausblenden */
	}
	
	.main-content {
		width: 100%;
		margin-bottom: 2rem;
		max-width: 100%;
		flex: 1 0 auto;
	}
	
	.sidebar {
		width: 100%;
		position: static;
		margin-top: 2rem;
		flex-direction: column !important;
	}
	
	.sidebar-section {
		max-width: 100%;
	}

	.sidebar-categories {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Slider */
	.slider {
		height: 40vh;
		margin-top: 5rem;
	}

	.slider__text-item h3 {
		font-size: 2.5em;
	}

	.slider__text-item p {
	font-size: .9em;
	}

	.slider-track {
		gap: 1rem;
	}

	.slider-item:not(.active) {
		display: none;
	}

	.category-title h1 {
		font-size: 3rem;
	}

	/* Container volle Breite geben und Padding anpassen */
	.container, .content-with-sidebar {
		width: 100%;
		max-width: 100%;
		padding: 0 1rem;
		overflow-x: hidden;
	}

	.utility-controls {
		margin: 1rem 0;
	}



	.article-card {
		width: 100%;
	}

	.top-articles-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas:
			"article1 article2"
			"article3 article3";
		gap: 2rem;
	}

	.top-article-card:nth-child(1) {
		grid-area: article1;
	}

	.top-article-card:nth-child(2) {
		grid-area: article2;
	}

	.top-article-card:nth-child(3) {
		grid-area: article3;
	}

	.article-section {
		padding-top: 1.25rem;
	}
}

@media (max-width: 576px) {
	/* Header und Navigation */
	.utility-controls {
		flex-wrap: wrap;
	}

	/* Slider */
	.slider {
		height: 30vh;
		margin-top: 3.75rem;
	}

	/* Artikel-Sektion fuer kleine Bildschirme optimieren */
	.article-section {
		padding-top: 1rem;
	}

	/* Container-Abstand reduzieren */
	.container {
		padding: 0 .625rem;
	}

	/* Footer fuer kleine Bildschirme anpassen */
	.footer-bottom {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.footer-section {
		margin-right: 0;
		margin-bottom: 1.5rem;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.social-icons {
		justify-content: center;
	}

	.slider__text-item h3 {
		font-size: 2em;
	}

	.slider__text-item p {
		font-size: .8em;
		padding: .7em;
	}

	.slider__nav-arrow {
		font-size: 0;
		width: 1.875rem;
		height: 1.875rem;
	}

	/* Sidebar */
	.sidebar-categories {
		grid-template-columns: 1fr;
	}

	.category-box {
		height: 3.75rem;
	}
	
	/* Kategorie-Grid fuer schmale Displays umformatieren */
	.category-grid {
		grid-template-columns: 1fr; /* Eine Spalte */
		gap: 1.5rem; /* Reduzierter Abstand zwischen den Kacheln */
		max-width: 90%; /* Begrenzt die Breite auf 90% des Bildschirms */
		width: 90%;
	}
	
	.category-tile, .bounce-frame {
		width: 100%; /* Kacheln werden so breit wie der Container */
		height: 11.25rem; /* Etwas niedrigere Hoehe fuer bessere Proportionen */
		margin: 0 auto; /* Zentriert die Kacheln */
	}
	
	/* Textgroesse fuer Kategorietitel anpassen */
	.category-tile h2 {
		font-size: 1.5rem; /* Etwas kleinere Schrift */
	}

	/* Guericke-Ueberschrift kleiner machen */
	.hero-text h1 {
		font-size: 4rem; /* Deutlich kleinere Ueberschrift (von 7rem auf 4rem) */
		margin-top: .5rem;
		margin-bottom: 1.5rem;
	}

	/* Hero-Bereich kompakter gestalten */
	.hero-text {
		margin-bottom: 1.5rem;
	}
}

/* Smartphones */
@media (max-width: 480px) {
	.utility-controls {
		margin-top: 1rem;
	}
	
	.category-banner {
		height: 12.5rem;
	}

	.category-title h1 {
		font-size: 2.5rem;
	}

	.article-content {
		padding: 1.5rem;
	}

	.article-title {
		font-size: 1.4rem;
	}

	.pagination {
		flex-wrap: wrap;
	}

	.top-articles-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"article1"
			"article2"
			"article3";
	}

	/* Footer fuer sehr kleine Bildschirme optimieren */
	.footer-bottom {
		padding: 1.5rem 1rem 0;
		align-items: center;
	}

	.footer-section {
		margin-bottom: 1.5rem;
		text-align: center;
	}

	/* Verbesserte Zentrierung fuer Footer-Links */
	.footer-section ul {
		padding-left: 0;
		list-style-position: inside;
		text-align: center;
	}

	.footer-section li {
		text-align: center;
	}

	/* Kontakt und rechtliche Links zentrieren */
	.footer-section a {
		display: inline-block;
		text-align: center;
		margin: 0 auto;
	}
	
	.archive {
		flex-direction: column;
	}
}