/* ================ main.css ==================== */
/* ======================== Globale Grundlagen (Basiseinstellungen) ============================= */
/* ====================== Menü Schrift normale Einträge ====================== */
.metismenu.mod-menu .metismenu-item {
font-size: clamp(0.85rem, 0.8rem + 0.5vw, 1rem);
font-weight: 700;
}
/* ====================== Menü Schrift Auswahl Einträge ====================== */
.metismenu.mod-menu .mm-toggler{
font-size: clamp(0.85rem, 0.8rem + 0.5vw, 1rem);
font-weight: 700;
}
/* ====================== Typografie Standard Schriften ====================== */
body,
p,
li {
font-size: clamp(0.80rem, 0.8rem + 0.5vw, 1rem);
line-height: 1.2;
}
h1 {
font-size: 1.25rem;
font-weight: 700;
}
h2 {
font-size: 1.1rem;
margin: 4px;
font-weight: 700;
}
h3 {
font-size: 1rem;
font-weight: 600;
}
h4 {
font-size: clamp(0.90rem, 0.8rem + 0.5vw, 1.2rem);
font-weight: 600;
}
h5 {
font-size: 1rem;
font-weight: 500;
margin: 2px;
line-height: 1;
}
h6 {
font-size: 1rem;
font-weight: 500;
margin: 2px;
line-height: 1;
}
legend{ /* Bespiel beim Kontakt formular Titel */
font-size: 1.1rem;
font-weight: 700;
margin: 4px;
}
dl {
margin: 0;
padding: 0;
}
/* – Begriff */
dt {
font-weight: bold;
margin-bottom: 0.2em;
margin-top: 0.1em; /* eventuell zu groß? */
line-height: 1.2; /* Kompakter */
}
/* – Beschreibung */
dd {
margin: 0 0 0 0; /* Standard: Einzug links */
line-height: 1.2; /* Kompakter */
}
/* Schriftarten und -größen */
:root {
/* Farbenblock 01 benutzt im Header und Footer*/
--color-background_normal_01: rgb(252, 111, 61); /* Hintegrund Farbe Normal 01 */
--color-background_hover_01: rgba(252, 111, 61, 0.9); /* Hintegrund Farbe Hover 01 */
--color-forecolor_normal_01: rgba(238, 238, 238, 0.85); /* Vordergrund Farbe Normal 01 */
--color-forecolor_hover_01: rgba(238, 238, 238, 0.85); /* Vordergrund Farbe Hover 01 */
--color-shadow_01: rgba(238, 238, 238, 0.85); /* Schatten Farbe 01 */
--color-spezial_01: rgba(238, 238, 238, 0.85); /* Spezial Farbe 01 */
/* Farbenblock 02 benutz im Menü*/
--color-background_normal_02: rgba(252, 111, 61, 0.9); /* Hintegrund Farbe Normal 02 */
--color-background_hover_02: rgba(252, 111, 61, 0); /* Hintegrund Farbe Hover 02 */
--color-forecolor_normal_02: rgb(255, 255, 255); /* Vordergrund Farbe Normal 02 */
--color-forecolor_hover_02: rgba(238, 238, 238, 0.85); /* Vordergrund Farbe Hover 02 */
--color-shadow_02: rgba(238, 238, 238, 0.85); /* Schatten Farbe 02 */
--color-spezial_02: rgba(238, 238, 238, 0.85); /* Spezial Farbe 02 */
/* Farbenblock 03 benutz im Kategroie Blog */
--color-background_normal_03: rgb(252, 111, 61); /* Hintegrund Farbe Normal 03 */
--color-background_hover_03: rgb(252, 111, 61); /* Hintegrund Farbe Hover 03 */
--color-forecolor_normal_03: rgb(255, 255, 255); /* Vordergrund Farbe Normal 03 */
--color-forecolor_hover_03: rgb(255, 255, 255); /* Vordergrund Farbe Hover 03 */
--color-shadow_03: rgba(238, 238, 238, 0.85); /* Schatten Farbe 03 */
--color-spezial_03: rgba(238, 238, 238, 0.85); /* Spezial Farbe 03 */
/* Hintergrund Farbverlauf bei Start bis Slideshow geladen wird ======================= */
--HTML-background: linear-gradient(135deg, #fff4ee 0%, #ffe3d6 35%, #ffd0bb 60%, #fff4ee 100%);
--footer-background-image: none; /* Hintergrundbild für den Footer, kann überschrieben oder leer gesetzt werden */
}
/* ======================== Farben für Hamburger Menü ======================= */
.navbar-collapse { /* Hamburger Menü */
background-color: rgba(252, 111, 61, 0.72) !important; /* Hintergrundfarbe des Hamburger Menüs */
border-radius: 6px;
}
.metismenu a { /* Links im Hamburger Menü */
/*color: #dbdbdb !important; /* Textfarbe der Links im Hamburger Menü */
}
.metismenu a:hover { /* Hover-Effekt für Links im Hamburger Menü */
/*color: #0f0482 !important; /* Textfarbe beim Hover-Effekt */
/*background-color: #eaeaea; /* Hintergrundfarbe beim Hover-Effekt */
}
.metismenu .active > a { /* Aktive Links im Hamburger Menü */
/*background-color: #3d3d3d !important; /* Hintergrundfarbe des aktiven Links */
/*color: #9a9999 !important; /* Textfarbe des aktiven Links */
}
.metismenu .mm-collapse a { /* Links in den Unter menüs */
/*background-color: #181818 !important; /* oder was Helles */
/*color: #e3e3e3 !important; /* Textfarbe der Links in den Untermenüs */
/*padding-left: 2rem; /* Einrückung sichtbar */
}
.metismenu .mm-collapse a:hover { /* Hover-Effekt für Links in den Untermenüs */
/*background-color: #eaeaea !important; /* Hintergrundfarbe beim Hover-Effekt */
/*color: #050505 !important; /* Textfarbe beim Hover-Effekt */
}
.metismenu.mod-menu .mm-collapse { /* Hintergrundfarbe der Untermenüs */
/*background-color: #262626; /* oder was Helles */
/*box-shadow: 1px 1px 4px #0000001a; /* Optional: Schatten für die Untermenüs */
}
.container-header .navbar-toggler { /* Hamburger-Icon Farbe */
color: rgb(0, 0, 0);; /* Farbe des Hamburger-Icons */
border: 1px solid rgb(0, 0, 0);; /* Rahmenfarbe des Hamburger-Icons anpassen */
}
.container-header .mod-menu { /* Menü-Textfarbe */
color: var(--color-forecolor_normal_02); /* Textfarbe ganzes Menü wird vererbe */
}
/* Farben und Farbschema */
/* ================ body.css ==================== */
/* Hintergrund Farbverlauf bei Start bis Slideshow geladen wird ======================= */
html {
background: var(--HTML-background);
}
/* Body für die Slideshow transparent machen damit man das Bild sieht*/
body {
background-color: transparent !important;
}
/* Abstand zwischen den Elementen in der Site-Grid dynamisch anpassen */
body.wrapper-fluid .site-grid {
/*gap: clamp(0.1rem, 0.8rem + 1vw, 2rem);*/
/*GAP:0px*/
gap: 5px 5px;
}
/*
body.wrapper-fluid .site-grid {
grid-gap: 00PX;
grid-template-columns: [main-start] repeat(4, minmax(0, 1fr)) [main-end];
} */
/* =========================
Kompaktere Formulare
========================= */
.form-control {
padding: 0.3rem 0.5rem; /* weniger Innenabstand */
font-size: 0.9rem; /* etwas kleinere Schrift */
border-radius: 0.35rem; /* dezenter Radius */
}
.form-label {
font-size: 0.8rem;
margin-bottom: 0.3rem;
}
.form-text {
font-size: 0.7rem;
margin-top: 0.15rem;
}
/* Etwas eleganterer Focus */
.form-control:focus {
border-color: #7aa7ff;
box-shadow: 0 0 0 0.12rem rgba(122, 167, 255, 0.25);
}
/* Body Einstellungen */
/*@import url("container.css"); /* Container Einstellungen */
/* ======================== Strukturelle Komponenten (Seitenaufbau) ============================= */
/* ================ haeder.css ==================== */
* Darstellung */
header.header {
z-index: 1000; /* Über anderen Inhalten */
background-color: rgba(249, 249, 249, 0); /* Hintegrundfarbe fals nicht überdeckt von Bild */
background-image: none; /* Das Hintergrundbild von Cassiopeia überschreiben oder Leer setzen */
}
.container-header {
z-index: 1000;
background-color: rgba(249, 249, 249, 0);
background-image: none;
position: relative;
box-shadow: inset 0 5px 5px #00000008;
}
@media (min-width: 992px) {
header.header.container-header {
display: grid;
/* Nutzt min-content für minimale Zeilenhöhe */
grid-template-rows: min-content min-content;
grid-template-columns: auto 1fr auto;
align-items: end;
gap: 0; /* Entfernt ungewollte Abstände zwischen den Grid-Zellen */
}
header.header .container-topbar {
grid-column: 1 / -1;
grid-row: 1;
/* Inhalt der Topbar rechtsbündig */
display: flex;
justify-content: flex-end;
padding-top: 4px; /* Minimale Abstände für schlankeres Design */
padding-bottom: 4px;
}
header.header .navbar-brand {
grid-row: 2;
grid-column: 1;
line-height: 1; /* Verhindert extra Höhe durch Zeilenabstand */
}
header.header .container-nav--navigation {
grid-row: 2;
grid-column: 2;
justify-self: center;
padding-bottom: 5px; /* Reduziert von 8px auf 5px */
}
header.header .container-nav--search {
grid-row: 2;
grid-column: 3;
justify-self: end;
padding-bottom: 5px;
}
}
/* ==================== Header Logo: ohne @media, ohne Variablen ==================== */
header.header .navbar-brand { /* navbar-brand Container soll nicht das Layout sprengen */
flex: 0 1 auto; /* darf schrumpfen, wächst aber nicht unendlich */
min-width: 80px; /* Logo bleibt sichtbar */
margin-right: clamp(0px, 1vw, 12px); /* rechts wenig auf Mobile, etwas Luft auf Desktop */
margin-left: clamp(0px, 1vw, 40px);
}
header.header .brand-logo img { /* ogo-Bild responsiv skalieren (min → fluid → max) */
width: clamp(140px, 18vw, 300px); /* Mobile klein, wächst weich, Desktop gedeckelt */
height: auto; /* Seitenverhältnis bleibt korrekt */
max-width: 100%; /* Sicherheit gegen Overflow */
}
/* Breadcrumb Hintergrund + Radius */
.mod-breadcrumbs.breadcrumb {
background-color: rgba(248,248,248,0.75);
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.6);
backdrop-filter: blur(4px);
box-shadow: 0 3px 12px rgba(0,0,0,0.10);
}
/* Header Einstellungen mit Logo*/
/* footer.css */
/* =========================== Footer Menue im Fussbereich==================== */
.container-footer { /* Container für den Footer fix am unteren Rand*/
position: sticky; /* Fixiert den Footer am unteren Rand der Seite */
bottom: 0; /* Positioniert den Footer am unteren Rand */
height: 35px; /* fixe Höhe der Fusszeile */
width: 100%; /* Breite des Footers */
background-color: var(--color-background_normal_01); /* Hintegrundfarbe fals nicht überdeckt von Bild */
background-image: none; /* Das Hintergrundbild von Cassiopeia überschreiben oder Leer setzen */
}
.container-footer .grid-child { /* Container für den Footer fix am unteren Rand */
height: 35px; /* fixe Höhe der Fusszeile */
padding-left: 20px; /* Abstand links damit der text nicht aussen klebt */
padding-right: 20px; /* Abstand rechts damit der text nicht aussen klebt */
padding-top: 0; /* Abstand oben damit sich den fuss verkleinert */
padding-bottom: 0; /* Abstand unten damit sich den fuss verkleinert */
}
/* Footer Einstellungen */
/* ======================== Inhaltsbereiche (Content-spezifisch) =============================== */
/* ======================== Slideshow Hauptseite (Hintergrund)====================== */
.background-slideshow {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.background-slideshow .slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
animation: fadeSlide 15s infinite;
display: flex;
align-items: center;
justify-content: center;
}
.background-slideshow .slide:nth-child(1) { animation-delay: 0s; }
.background-slideshow .slide:nth-child(2) { animation-delay: 5s; }
.background-slideshow .slide:nth-child(3) { animation-delay: 10s; }
.background-slideshow .slide-text {
font-size: 2rem;
padding: 1rem 2rem;
opacity: 0;
transform: translateY(50px); /* mehr Bewegung nach unten */
animation: textSlide 15s infinite ease-in-out;
animation-fill-mode: both;
transition: opacity 1s ease, transform 1s ease;
}
.background-slideshow .slide:nth-child(1) .slide-text { animation-delay: 0s; }
.background-slideshow .slide:nth-child(2) .slide-text { animation-delay: 5s; }
.background-slideshow .slide:nth-child(3) .slide-text { animation-delay: 10s; }
@keyframes fadeSlide {
0%, 10% { opacity: 0; }
15%, 45% { opacity: 1; }
50%, 100% { opacity: 0; }
}
@keyframes textSlide {
0%, 12% { opacity: 0; transform: translateY(50px); }
18%, 42% { opacity: 1; transform: translateY(0); }
48%, 100% { opacity: 0; transform: translateY(50px); }
}
/* Slideshow Hintergrund Einstellungen */
/* ======================== category-blog.css Blog -Liste ======================= */
/* Gemeinsamer Style für ALLE Blog-Kacheln (leading + normal) */
.com-content-category-blog__items {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
padding: 1rem 0;
}
.com-content-category-blog__item.blog-item {
width: 300px;
background-color: var(--color-background_normal_03);
color: var(--color-forecolor_normal_03);
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 5px;
border-radius: 6px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.com-content-category-blog__item.blog-item:hover {
transform: translateY(-4px) scale(1.015);
box-shadow: 0 8px 16px var(--color-shadow_03);
}
.com-content-category-blog__item .item-image img {
width: 300px;
height: 300px;
object-fit: cover;
margin-bottom: 0px;
display: block;
}
.com-content-category-blog__item .item-content {
text-align: center;
padding: 0 10px;
}
.com-content-category-blog__item h3 {
font-size: 1rem;
font-weight: 600;
color: var(--color-forecolor_normal_03);
margin: 6px 0 2px;
line-height: 1.0;
}
.com-content-category-blog__item p {
margin: 2px 0;
font-size: 0.95rem;
line-height: 1.2;
color: var(--color-forecolor_normal_03);
}
/* ======================== Bilder haten einen kleinen rand oben beim Kategorie blog======================= */
figure.item-image {
margin: 0 !important;
padding: 0 !important;
}
/* Blog Navigation Hintergrund über volle Breite */
.com-content-category-blog__navigation{
box-sizing: border-box; /* Border zählt in die Höhe rein */
background-color: rgba(248,248,248,0.75);
border: 1px solid rgba(255,255,255,0.6);
border-radius: 12px;
box-shadow: 0 3px 12px rgba(0,0,0,0.10);
}
/* Bootstrap-Margins entfernen, die sonst “aufblasen” */
.com-content-category-blog__navigation .pagination{
margin: 3px !important; /* killt mb-4 */
}
.com-content-category-blog__navigation .com-content-category-blog__counter{
margin: 3px !important;
}
/* Kategorie Blog Einstellungen */
/*@import url("categories.css"); /* Kategorien Einstellungen */
/* ================ com_articles.css ==================== */
.com-content-article__body { /* einzelner Joomla Beitrag */
background-color: rgba(189, 189, 189, 0.863) !important; /* hellblau Transparent */
padding-left: 20px; /* Abstand links damit der text nicht aussen klebt */
padding-right: 20px; /* Abstand rechts damit der text nicht aussen klebt */
padding-top: 20px; /* Abstand oben damit der text nicht aussen klebt */
padding-bottom: 20px; /* Abstand unten damit der text nicht aussen klebt */
}
/* ================== Einzelansicht von einem Beitrag mit Bild rechts und responsive ======================= */
/* Container für gesamte Artikel in Einzelansicht - Text links, Bild rechts */
.com-content-article.item-page {
display: flex;
flex-direction: row; /* Standardanordnung nebeneinander */
display: flex;
flex-direction: row; /* Standardanordnung nebeneinander */
flex-wrap: nowrap;
align-items: stretch; /* Bild- und Textspalte gleich hoch */
gap: 1rem;
background-color: rgba(215, 214, 214, 0.775);
border-radius: 0.50rem;
padding: clamp(0.05rem, 1.2vw, 1rem); /* Dynamische Innenabstände für bessere Optik auf verschiedenen Bildschirmgrößen */
}
/* Textbereich - rechts mit flex-order */
.com-content-article.item-page .com-content-article__body {
flex: 2; /* nimmt etwa 2/3 der Breite ein */
order: 2; /* Text zuerst, links */
padding: 1.5rem;
background-color: rgba(189, 189, 189, 0.863);
border-radius: 0.50rem;
}
/* Hover-Effekt */
.com-content-article.item-page figure.item-image:hover img {
transform: scale(1.1);
}
/* ======================= Hover-Effekt mit Texthinweis beim Bild ======================= */
/* Der Hinweistext „Klicken zum Vergrößern“ erscheint beim Überfahren des Bildes */
.com-content-article.item-page figure.item-image::after {
content: "Klicken zum Vergrößern"; /* Der sichtbare Hinweistext */
position: absolute; /* Absolute Positionierung im Bild-Container */
bottom: 8px; /* Abstand vom unteren Rand */
left: 8px; /* Abstand vom linken Rand */
background-color: rgba(0, 0, 0, 0.6); /* Dunkler halbtransparenter Hintergrund */
color: white; /* Weiße Textfarbe für Kontrast */
padding: 4px 8px; /* Innenabstand (etwas Luft um den Text) */
font-size: 0.85rem; /* Etwas kleinere Schriftgröße */
border-radius: 4px; /* Abgerundete Ecken */
opacity: 0; /* Unsichtbar im Normalzustand */
transition: opacity 0.3s ease; /* Weiche Überblendung beim Einblenden */
pointer-events: none; /* Klicks gehen weiter aufs Bild (wichtig!) */
}
/* Beim Hover über das Bild wird der Hinweis eingeblendet */
.com-content-article.item-page figure.item-image:hover::after {
opacity: 1; /* Sichtbar beim Hover */
}
/* =================== Artikelansicht: Textbereich =================== */
.com-content-article.item-page .com-content-article__body {
order: unset; /* Keine erzwungene Reihenfolge */
width: 100%; /* Volle Breite */
}
.com-content-article.item-page figure.item-image {
order: unset; /* Keine erzwungene Reihenfolge */
width: 100% !important;
position: relative; /* Stelle sicher, dass der Bild-Container relativ positioniert ist, damit wir den Text absolut im Verhältnis dazu positionieren können */
flex: none;
display: flex;
justify-content: center;
align-items: center;
max-width: 300px;
margin: 0 auto; /* zentriert das Bild */
border-radius: 0.5rem;
}
.com-content-article.item-page figure.item-image img {
width: 100% ; /* Volle Breite */
height: auto ; /* Höhe proportional */
max-height: 40vh; /* Maximale Höhe: 40 % des sichtbaren Browserfensters */
display: block;
object-fit: cover; /* Ganze Bildfläche wird gezeigt, mit evtl. Rand */
border-radius: 0.5rem; /* Abgerundete Ecken für modernes Design */
transition: transform 0.3s ease-in-out; /* Animation für Zoom-Effekt */
cursor: zoom-in; /* Mauszeiger wird zur Lupe – Hinweis auf Interaktivität */
}
@media (max-width: 768px) {
.com-content-article.item-page {
flex-direction: column;
}
.com-content-article.item-page figure.item-image,
.com-content-article.item-page .com-content-article__body {
width: 100%;
max-width: 100%;
}
}
/* Beiträge Artikel Einstellungen ab Menü*/
/* ======================== mod_articles.css (identisch wie category-blog Cards) ======================= */
/* --- GESAMTE SIDEBAR CARD --- */
.main-bottom.card {
border-radius: 8px;
overflow: hidden;
border: 1px solid #fc6f3d; /* DEIN BLAU */
background: rgba(247, 249, 252, 0.37); /* leichtes technisches Grau */
box-shadow: none; /* kein Schatten */
}
.main-bottom .card-header {
background: #fc6f3d; /* DEIN BLAU */
color: rgba(215, 214, 214, 0.775);
font-size: 1.0rem;
font-weight: 600;
border-bottom: 1px solid #002244; /* dunklere Linie für Tiefe */
}
.main-bottom .card-body {
padding: var(--card-spacer-y)var(--card-spacer-x);
color: var(--card-color);
flex: auto;
background-color: rgba(215, 214, 214, 0.775);
}
/* Container: wie Blog-Liste */
.mod-articles-items.mod-articles-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
padding: 1rem 0;
list-style: none;
margin: 0;
}
/* Einzelne Karte */
.mod-articles-items.mod-articles-grid > li {
margin: 0; /* keine List-Abstände */
padding: 0;
}
/* Card-Body */
.mod-articles-item {
width: 100%;
background-color: var(--color-background_normal_03);
color: var(--color-forecolor_normal_03);
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 5px;
border-radius: 6px;
overflow: hidden; /* wichtig: Bild + Radius sauber */
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Hover wie Blog */
.mod-articles-item:hover {
transform: translateY(-4px) scale(1.015);
box-shadow: 0 8px 16px var(--color-shadow_03);
}
/* Bild: exakt 300x300 wie Blog */
.mod-articles-image.item-image {
margin: 0 !important;
padding: 0 !important;
width: 100%;
}
.mod-articles-image.item-image img {
width: 300px;
height: 300px;
object-fit: cover;
display: block;
margin: 0;
}
/* Inhalt zentriert */
.mod-articles-item-content {
width: 100%;
text-align: center;
}
/* Titel wie Blog */
.mod-articles-title {
font-size: 0.9rem;
font-weight: 500;
color: var(--color-forecolor_normal_03);
margin: 4px 0 4px;
line-height: 1.0;
}
/* Link im Titel: gleiche Farbe, keine Unterstreichung */
.mod-articles-title a {
color: inherit;
text-decoration: none;
}
.mod-articles-title a:hover {
text-decoration: none;
}
/* Optional: wenn im Modul noch Text/Intro ausgegeben wird */
.mod-articles-item p {
margin: 2px 0;
font-size: 0.95rem;
line-height: 1.2;
color: var(--color-forecolor_normal_03);
}
/* Module Artikel Einstellungen ab Modul*/
/* contact.css - Stile für die Kontaktseite */
/* ============================= Kontaktformular ========================== */
.com-contact__container { /* Hintergrund und Padding für das gesamte Kontaktformular */
background-color: #fc946e; /* Fast deckend, leicht grau */
padding-left: 10px;
padding-right: 10px;
padding-top: 0px; /* Abstand oben damit der text nicht aussen klebt */
padding-bottom: 0px; /* Abstand unten damit der text nicht aussen klebt */
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Optional: weicher Schatten */
}
.com-contact__info { /* Hintergrund und Padding für eigene Adresse auf Kontaktformular */
background-color: #fc946e; /* Hellgrau, wenig Transparenz */
padding-left: 10px;
padding-right: 10px;
padding-top: 0px; /* Abstand oben damit der text nicht aussen klebt */
padding-bottom: 0px; /* Innenabstand */
border-radius: 8px; /* Optionale abgerundete Ecken für modernes Aussehen */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Optional: dezenter Schatten */
}
.com-contact__form.contact-form { /* Kontaktformular mit den Feldern zum senden*/
background-color: #fc946e; /* Hellgrauer Hintergrund */
padding: 20px; /* Innenabstand */
border-radius: 8px; /* Optionale abgerundete Ecken für modernes Aussehen */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: leichte Schatten für Tiefe */
}
.control-group{
margin-top: 6px; /* Abstand zwischen den Formularfeldern */
margin-bottom: 6px; /* Abstand zwischen den Formularfeldern */
}
/* Kontakt-Formular Einstellungen */
/*@import url("gallery.css"); /* Galerie Einstellungen */
/* --- GESAMTE SIDEBAR CARD --- */
.sidebar-right.card {
border-radius: 8px;
overflow: hidden;
border: 1px solid #fc6f3d; /* DEIN BLAU */
background: rgba(247, 249, 252, 0.37); /* leichtes technisches Grau */
box-shadow: none; /* kein Schatten */
}
/* --- HEADER --- */
.sidebar-right .card-header {
background: #fc6f3d; /* DEIN BLAU */
color: rgba(215, 214, 214, 0.775);
font-size: 1.0rem;
font-weight: 600;
border-bottom: 1px solid #002244; /* dunklere Linie für Tiefe */
}
/* --- EINLEITUNGSTEXT --- */
.sidebar-right .sidebar-intro {
font-size: 0.95rem;
color: #222;
margin-bottom: 14px; /* kleinerer Abstand */
line-height: 1.5;
background: #ffffff;
padding: 12px 14px;
border-left: 4px solid #fc6f3d; /* DEIN BLAU */
border-radius: 8px;
}
/* --- BEITRÄGE ALS MINI-CARDS --- */
.sidebar-right .mod-articles-items li {
list-style: none;
margin-bottom: 12px; /* Abstand halbiert */
}
.sidebar-right .mod-articles-item {
background: #aaaaaa84;
border-radius: 12px;
padding: 12px;
border: 1px solid #fc6f3d; /* klare Linie */
box-shadow: none; /* kein Schatten */
transition: transform 0.2s ease, border-color 0.2s ease;
}
/* Hover: nur Linie dunkler, kein Schatten */
.sidebar-right .mod-articles-item:hover {
transform: translateY(-2px);
border-color: #001a33; /* dunkleres Blau */
}
/* --- TITEL --- */
.sidebar-right .mod-articles-title a {
font-size: 1.05rem;
font-weight: 600;
text-align: center; /* Zentrierter Text */
color: #fc6f3d; /* DEIN BLAU */
text-decoration: none;
display: block;
margin-bottom: 8px;
transition: color 0.2s ease;
}
.sidebar-right .mod-articles-title a:hover {
color: #001a33; /* dunkleres Blau */
}
/* --- BILDER --- */
.sidebar-right .mod-articles-image img {
/*width: auto;*/ /* Bewusst deaktiviert gesetzt, damit Bilder immer die volle Breite der Card ausfüllen */
height: 300px;
object-fit: cover;
border-radius: 10px;
display: block;
margin-top: 6px;
box-shadow: none; /* kein Schatten */
border: 1px solid #d0d0d0; /* feine Linie für Struktur */
transition: transform 0.2s ease;
}
.sidebar-right .mod-articles-image img:hover {
transform: scale(1.015);
}
.sidebar-right .mod-articles-item-content p {
text-align: center;
margin-bottom: 0px;
}
/* Sidbar Rechts */
/* --- GESAMTE SIDEBAR CARD --- */
.sidebar-left.card {
border-radius: 18px;
overflow: hidden;
border: 1px solid #fc6f3d; /* DEIN BLAU */
background: rgba(247, 249, 252, 0.37); /* leichtes technisches Grau */
box-shadow: none; /* kein Schatten */
}
/* --- HEADER --- */
.sidebar-left .card-header {
background: #fc6f3d; /* DEIN BLAU */
color: #ffffff;
font-size: 1.2rem;
font-weight: 700;
padding: 16px 20px;
border-bottom: 1px solid #002244; /* dunklere Linie für Tiefe */
}
/* --- EINLEITUNGSTEXT --- */
.sidebar-left .sidebar-intro {
font-size: 0.95rem;
color: #222;
margin-bottom: 14px; /* kleinerer Abstand */
line-height: 1.5;
background: #ffffff;
padding: 12px 14px;
border-left: 4px solid #fc6f3d; /* DEIN BLAU */
border-radius: 8px;
}
/* --- BEITRÄGE ALS MINI-CARDS --- */
.sidebar-left .mod-articles-items li {
list-style: none;
margin-bottom: 12px; /* Abstand halbiert */
}
.sidebar-left .mod-articles-item {
background: #aaaaaae0;
border-radius: 12px;
padding: 12px;
border: 1px solid #fc6f3d; /* klare Linie */
box-shadow: none; /* kein Schatten */
transition: transform 0.2s ease, border-color 0.2s ease;
}
/* Hover: nur Linie dunkler, kein Schatten */
.sidebar-left .mod-articles-item:hover {
transform: translateY(-2px);
border-color: #001a33; /* dunkleres Blau */
}
/* --- TITEL --- */
.sidebar-left .mod-articles-title a {
font-size: 1.05rem;
font-weight: 600;
text-align: center; /* Zentrierter Text */
color: #fc6f3d; /* DEIN BLAU */
text-decoration: none;
display: block;
margin-bottom: 8px;
transition: color 0.2s ease;
}
.sidebar-left .mod-articles-title a:hover {
color: #001a33; /* dunkleres Blau */
}
/* --- BILDER --- */
.sidebar-left .mod-articles-image img {
/*width: auto;*/ /* Bewusst deaktiviert gesetzt, damit Bilder immer die volle Breite der Card ausfüllen */
height: 300px;
object-fit: cover;
border-radius: 10px;
display: block;
margin-top: 6px;
box-shadow: none; /* kein Schatten */
border: 1px solid #d0d0d0; /* feine Linie für Struktur */
transition: transform 0.2s ease;
}
.sidebar-left .mod-articles-image img:hover {
transform: scale(1.015);
}
.sidebar-left .mod-articles-item-content p {
text-align: center;
margin-bottom: 0px;
}
/* Sidbar Links */
/* ======================== Seiten-spezifisch (spezielle Fälle, zuletzt) ======================= */
/*@import url("home.css"); /* Als Letztes die Startseite, damit es nicht übersteuert wird */
/*@import url("decoration.css"); /* Farben (direkt, ohne Variablen) */
img {
content-visibility: auto; /* Optimiert die Ladezeit von Bildern, indem sie erst geladen werden, wenn sie in den Viewport kommen. */
}
.cle-lightbox__inner{
overflow: auto; /* erlaubt Scroll im Popup */
}
.cle-lightbox__img{
max-height: none; /* Bild darf höher als 88vh sein */
}
/* Für Footer Menü damit der Hintergrund orange grösser wird */
@media (max-width: 768px) {
.container-footer {
position: relative;
bottom: auto;
height: auto;
width: 100%;
background-color: var(--color-background_normal_01);
background-image: none;
}
.container-footer .grid-child {
height: auto;
padding: 0;
background-color: var(--color-background_normal_01);
}
.container-footer .mod-menu {
margin: 0;
padding: 0;
background-color: var(--color-background_normal_01);
}
.container-footer .mod-menu li {
margin: 0;
padding: 0;
background-color: var(--color-background_normal_01);
}
.container-footer .mod-menu a {
display: block;
padding: 0.1rem 011rem;
line-height: 1.1;
color: var(--color-forecolor_normal_01);
background-color: var(--color-background_normal_01);
text-align: center;
}
}