... */
.hero-section.hero-full #mod-custom110 > .container,
.hero-section.hero-full .mod-custom.custom > .container{
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
/* Hintergrund soll bis zur Layoutkante reichen */
box-sizing: border-box;
}/* Inhalt weiterhin sauber im Layout zentrieren */
.hero-section.hero-full .mod-custom.custom > .container > .hero-content{
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--spacing-md);
box-sizing: border-box;
}/* Falls der Hintergrund auf dem inneren Container liegt */
.hero-section.hero-full .mod-custom.custom > .container{
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}/* --- HERO Background bis zur Layoutkante (inkl. Layout-Padding) ---
Hintergrund sitzt typischerweise auf dem Modul-Wrapper (.mod-custom.custom).
Wir halten den Hero in Layoutbreite (max-width), aber lassen den Modul-Wrapper
in das Container-Padding "bluten", damit links/rechts keine helle Kante bleibt.
*/
.hero-section.hero-full > .hero-container{
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding-left: var(--spacing-md);
padding-right: var(--spacing-md);
box-sizing: border-box;
}/* Modul-Wrapper wird auf volle Layoutkante erweitert */
.hero-section.hero-full > .hero-container > .mod-custom.custom,
.hero-section.hero-full > .hero-container > .module,
.hero-section.hero-full > .hero-container > .moduletable{
margin-left: calc(-1 * var(--spacing-md)) !important;
margin-right: calc(-1 * var(--spacing-md)) !important;
width: calc(100% + (2 * var(--spacing-md))) !important;
max-width: none !important;
box-sizing: border-box !important;
}/* Falls der Hintergrund über Pseudo-Elemente kommt */
.hero-section.hero-full > .hero-container > .mod-custom.custom::before,
.hero-section.hero-full > .hero-container > .mod-custom.custom::after{
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}/* Falls der Hintergrund direkt auf dem Wrapper liegt */
.hero-section.hero-full > .hero-container > .mod-custom.custom{
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}/* =========================================================
HERO (boxed): Hero liegt im .container und nutzt dessen Layoutbreite
========================================================= */
.hero-section.hero-full{
width: 100%;
margin: 0;
padding: 0;
background-color: #fff;
/* Seam-Fix bei sehr hellem PNG */;
}.hero-section.hero-full .mod-custom.custom,
.hero-section.hero-full .module,
.hero-section.hero-full .moduletable{
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
background-color: #fff;
/* Seam-Fix */;
}/* =========================================================
HERO im Grid: über Sidebar1 + Content + Sidebar2 spannen
========================================================= */
.content-wrapper.has-sidebar .hero-section.hero-in-grid{
grid-column: 1 / -1;
width: 100%;
margin: 0 0 var(--spacing-lg) 0;
padding: 0;
background-color: #fff;
/* Seam-Fix */;
}.content-wrapper.has-sidebar .hero-section.hero-in-grid .mod-custom.custom,
.content-wrapper.has-sidebar .hero-section.hero-in-grid .module,
.content-wrapper.has-sidebar .hero-section.hero-in-grid .moduletable{
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
background-color: #fff;
}/* =========================================================
HERO (clean): spannt über Sidebar1 + Content + Sidebar2
- Hero-Section im Grid: grid-column: 1 / -1
- Keine Phi-Begrenzung im Hero (volle Breite für Background)
- Innerer .container im Hero-Modul neutralisieren
========================================================= */
/* 1) Hero im 3-Spalten-Grid über alle Spalten ziehen */
.content-wrapper .hero-section.hero-full{
grid-column: 1 / -1;
}/* 2) Falls Joomla/Module einen inneren .container ausgeben: nicht erneut begrenzen */
.content-wrapper .hero-section.hero-full .container{
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}/* 3) Hero-Content im Hero darf nicht durch Phi-Formel beschnitten werden */
.content-wrapper .hero-section.hero-full .hero-content{
width: 100% !important;
max-width: none !important;
margin: 0 auto !important;
text-align: center !important;
}/* 4) Module Wrapper im Hero: volle Breite + saubere Background-Defaults */
.content-wrapper .hero-section.hero-full .mod-custom.custom,
.content-wrapper .hero-section.hero-full .module,
.content-wrapper .hero-section.hero-full .moduletable{
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}/* 5) Optional: helle PNG-Fades sollen nicht "beige" wirken */
.content-wrapper .hero-section.hero-full{
background-color: #fff !important;
}/* =========================================================
LAYOUT: keine Zwischenräume zwischen Sidebars und Content
(grün markierte Bereiche entfernen)
========================================================= */
/* Standard: Seiten mit Sidebars sollen ohne Grid-Gap laufen */
.content-wrapper.has-sidebar,
.content-wrapper.has-sidebar-left,
.content-wrapper.has-sidebar-right{
gap: 0 !important;
}/* Falls irgendwo explizit column/row-gap gesetzt wurde */
.content-wrapper.has-sidebar,
.content-wrapper.has-sidebar-left,
.content-wrapper.has-sidebar-right{
column-gap: 0 !important;
row-gap: 0 !important;
}/* Sicherheit: Sidebars nicht durch zusätzliche Außenabstände absetzen */
.content-wrapper.has-sidebar .sidebar,
.content-wrapper.has-sidebar-left .sidebar,
.content-wrapper.has-sidebar-right .sidebar{
margin: 0 !important;
}/* Optional: Content-Area keine Außenmargen, damit sie direkt anliegt */
.content-wrapper.has-sidebar .content-area,
.content-wrapper.has-sidebar-left .content-area,
.content-wrapper.has-sidebar-right .content-area{
margin: 0 !important;
}/* =========================================================
LAYOUT: keine Zwischenräume zwischen Sidebars und Content
(grün markierte Bereiche entfernen)
========================================================= */
/* Standard: Seiten mit Sidebars sollen ohne Grid-Gap laufen */
.content-wrapper.has-sidebar,
.content-wrapper.has-sidebar-left,
.content-wrapper.has-sidebar-right{
}/* Falls irgendwo explizit column/row-gap gesetzt wurde */
.content-wrapper.has-sidebar,
.content-wrapper.has-sidebar-left,
.content-wrapper.has-sidebar-right{
}/* Sicherheit: Sidebars nicht durch zusätzliche Außenabstände absetzen */
.content-wrapper.has-sidebar .sidebar,
.content-wrapper.has-sidebar-left .sidebar,
.content-wrapper.has-sidebar-right .sidebar{
}/* Optional: Content-Area keine Außenmargen, damit sie direkt anliegt */
.content-wrapper.has-sidebar .content-area,
.content-wrapper.has-sidebar-left .content-area,
.content-wrapper.has-sidebar-right .content-area{
}/* =========================================
PATCH: Layout ohne Rahmen + volle Hintergrundhöhe
(gefügt von ChatGPT)
========================================= */
/* --- Option C: Content-Spalte ohne Innenabstand, aber Artikel mit definierter Innenluft --- */
.content-area{
padding: 0 !important;
}.content-area .item-page,
.content-area .blog,
.content-area .blog-featured,
.content-area .com-content-article,
.content-area article{
padding: var(--spacing-md) !important;
box-sizing: border-box;
}/* --- Keine Rahmen / keine Schatten (Content, Sidebars, Module, Artikel) --- */
/* Hauptcontainer ohne Rahmen */
.content-area,
.sidebar,
.moduletable-card,
.content-area .item-page,
.content-area .blog,
.content-area .blog-featured,
.content-area .com-content-article,
.content-area .com-content-article__body,
.content-area article,
article.item-page,
article.com-content-article,
.item-page,
.com-content-article,
.blog-item,
.page-header,
.content-area > div,
.content-area > section{
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* Tabellen dürfen Rahmen haben */
.content-area table{
border-collapse: collapse;
border: 1px solid var(--color-border) !important;
}
.content-area table td,
.content-area table th{
border: 1px solid var(--color-border) !important;
padding: var(--spacing-sm);
}
/* Blockquotes dürfen border-left haben */
.content-area blockquote{
border-left: calc(var(--spacing-xs) * var(--phi)) solid var(--color-secondary) !important;
}
/* HR dürfen Border haben */
.content-area hr{
border: none;
border-top: 1px solid var(--color-border) !important;
}/* --- Einheitlicher Hintergrund über die komplette Höhe der Layout-Spalten --- */
/* Der Wrapper trägt die Fläche, Spalten selbst sind transparent. Dadurch endet die Farbe nicht an den Modulen. */
.site-main{
min-height: 100vh;
}.site-main .content-wrapper.has-sidebar,
.site-main .content-wrapper.has-sidebar-left,
.site-main .content-wrapper.has-sidebar-right{
background: var(--content-background, var(--color-surface)) !important;
}.site-main .content-wrapper.has-sidebar > .sidebar,
.site-main .content-wrapper.has-sidebar > .content-area,
.site-main .content-wrapper.has-sidebar-left > .sidebar,
.site-main .content-wrapper.has-sidebar-left > .content-area,
.site-main .content-wrapper.has-sidebar-right > .sidebar,
.site-main .content-wrapper.has-sidebar-right > .content-area{
background: transparent !important;
}/* =========================================
Startseite (Itemid 105): Titel-Links in Listenansichten neutralisieren (Fallback)
Primär soll der Menüpunkt auf "Beiträge → Einzelner Beitrag" stehen.
Wenn dennoch Blog/Featured gerendert wird, verhindert dies das "Titel ist Link"-Verhalten.
========================================= */
body.itemid-105 .com-content-featured .page-header a,
body.itemid-105 .com-content-category-blog .page-header a,
body.itemid-105 .blog-items .page-header a,
body.itemid-105 .items-leading .page-header a,
body.itemid-105 .items-row .page-header a,
body.itemid-105 article .page-header a{
pointer-events: none;
cursor: text;
text-decoration: none;
color: inherit;
}/* --- Rechtes (und ggf. linkes) Menü: Standard-Einzüge/Bullets entfernen, damit Sidebars optisch gleich wirken --- */
/* Wichtig: Diese Regeln betreffen NUR Sidebars, nicht den Content-Bereich */
.sidebar ul:not(.content-area ul):not(.item-page ul):not(.com-content-article ul),
.sidebar .mod-menu ul{
list-style: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
.sidebar li:not(.content-area li):not(.item-page li):not(.com-content-article li){
margin-left: 0 !important;
padding-left: 0 !important;
}/* === TYPO: FORCE ARTICLE TITLES SMALLER (Joomla 5) === */
/* NUR die Artikel-Überschrift, NICHT alle H1/H2 im Content */
.content-area > .page-header h1,
.content-area .page-title,
.content-area > .page-header .page-title,
.content-area .com-content-article__title,
.content-area .item-title,
.content-area .blog-item-title,
.content-area .blog-item .page-header h2,
.content-area .blog-item h2.item-title,
.content-area > article > .page-header h1,
.content-area > .item-page > .page-header h1{
font-size: clamp(1.85rem, 2.2vw, 2.45rem) !important;
line-height: 1.18 !important;
margin: 0 0 0.85rem 0 !important;
letter-spacing: -0.02em !important;
font-weight: 600 !important;
}
/* Blog overview titles a bit smaller */
.content-area .blog-item h2.item-title,
.content-area .blog h2.item-title,
.content-area .blog-featured h2.item-title{
font-size: clamp(1.35rem, 1.6vw, 1.75rem) !important;
line-height: 1.25 !important;
margin: 0 0 0.75rem 0 !important;
letter-spacing: -0.01em !important;
}
/* === TECH-CLEAN TYPO SYSTEM === */
/* HERO */
.hero h1{
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.1;
}
/* Body text */
.content-area{
font-size: 1.05rem;
line-height: 1.7;
}/* Links: tech-clean underline */
.content-area a{
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,0.25);
transition: border-color .2s ease;
}.content-area a:hover{
border-bottom-color: rgba(0,0,0,0.6);
}/* === ARTICLE NAVIGATION VARIANTE C (Tech-clean text links) === */
/* Remove old box/button styles */
.content-area .pagenavigation,
.content-area nav.pagenavigation,
.content-area .com-content-article__navigation{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin-top: 2rem;
}/* Links as clean text links */
.content-area .pagenavigation a,
.content-area .com-content-article__navigation a{
display: inline-block;
padding: 0;
margin-right: 1.5rem;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,.25);
transition: border-color .2s ease, opacity .2s ease;
}/* Hover effect */
.content-area .pagenavigation a:hover,
.content-area .com-content-article__navigation a:hover{
border-bottom-color: rgba(0,0,0,.65);
opacity: .85;
}/* Optional arrow for "Zurück" */
.content-area a[rel="prev"]::before,
.content-area a[rel="up"]::before{
content: "← ";
font-weight: 700;
}
/* Logo (Template-Parameter) */
.logo-link{display:inline-flex;align-items:center;gap:var(--brand-gap,12px);text-decoration:none;}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-title{font-size:var(--brand-title-size,0.95rem);font-weight:600;letter-spacing:0.2px;}
.brand-tagline{font-size:var(--brand-tagline-size,0.75rem);opacity:0.8;}
.logo-img{height:var(--logo-height,42px);width:auto;display:block;}
/* Footer responsive */
@media (max-width: 900px){
.footer-cols-2, .footer-cols-3{ grid-template-columns: 1fr; }
}
/* Global UL/OL margins are risky because they also affect menus/modules.
Keep list rhythm scoped to the article/content area. */
.content-area ul,
.content-area ol{
margin-top: 0.35rem;
margin-bottom: var(--spacing-lg);
}
/* ========================================
Layout Components
======================================== */
.container{
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--spacing-md);
}.page-wrapper{
/* "Papier"-Bereich nur innerhalb des Layouts */
max-width: var(--container-width);
margin: 0 auto;
background: var(--color-background);
border-left: 1px solid rgba(0,0,0,0.06);
border-right: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 10px 30px rgba(0,0,0,0.06);
display: flex;
flex-direction: column;
min-height: auto;
opacity: 0;
animation: fadeIn var(--transition-slow) forwards;
}@keyframes fadeIn{
to{
opacity: 1;
}
}/* ========================================
Header
======================================== */
.site-header{
position: sticky;
top: 0;
z-index: 1000;
background-color: var(--header-background, var(--color-surface));
border-bottom: 1px solid var(--header-border, var(--color-border));
transition: all var(--transition-medium);
animation: slideDown var(--transition-slow) ease-out;
}@keyframes slideDown{
from{
transform: translateY(-100%);
}to{
transform: translateY(0);
}
}.site-header.header-transparent{
background-color: transparent;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
position: sticky;
/* bleibt im Dokumentfluss -> Hero startet darunter */
top: 0;
width: 100%;
}.header-inner{
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-height);
gap: var(--spacing-lg);
}.site-logo{
flex-shrink: 0;
}.logo-text{
font-family: var(--font-display);
font-size: var(--font-size-medium);
font-weight: 800;
color: var(--header-text, var(--color-primary));
letter-spacing: -0.02em;
transition: color var(--transition-fast);
}.site-logo a:hover .logo-text{
color: var(--nav-hover, var(--color-secondary));
}.site-logo a::after{
display: none;
}/* Navigation */
.site-navigation{
flex-grow: 1;
display: flex;
justify-content: flex-end;
}.menu-toggle{
display: none;
flex-direction: column;
gap: calc(var(--spacing-xs) * var(--phi));
background: none;
border: none;
cursor: pointer;
padding: var(--spacing-xs);
}.menu-toggle span{
display: block;
width: calc(var(--spacing-base) * 1.75);
height: 2px;
background-color: var(--nav-text, var(--color-primary));
transition: all var(--transition-fast);
}.nav-wrapper ul{
display: flex;
list-style: none;
gap: var(--spacing-lg);
align-items: center;
}.nav-wrapper li{
position: relative;
}.nav-wrapper a{
font-family: var(--font-sans);
font-size: var(--font-size-small);
font-weight: 500;
color: var(--nav-text, var(--color-text));
text-transform: uppercase;
letter-spacing: 0.05em;
padding: var(--spacing-xs);
transition: color var(--transition-fast);
}.nav-wrapper a::after{
bottom: 0;
background-color: var(--nav-active, var(--color-accent));
}.nav-wrapper a:hover,
.nav-wrapper li.active > a{
color: var(--nav-hover, var(--color-secondary));
}/* Dropdown Menu */
.nav-wrapper li ul{
position: absolute;
top: 100%;
left: 0;
background-color: var(--header-background, var(--color-surface));
border: 1px solid var(--header-border, var(--color-border));
padding: var(--spacing-sm);
min-width: calc(var(--spacing-base) * 12.5);
opacity: 0;
visibility: hidden;
transform: translateY(calc(var(--spacing-sm) * -1));
transition: all var(--transition-medium);
box-shadow: var(--shadow-medium);
}.nav-wrapper li:hover > ul{
opacity: 1;
visibility: visible;
transform: translateY(0);
}.nav-wrapper li ul li{
display: block;
}.nav-wrapper li ul a{
display: block;
padding: var(--spacing-xs) var(--spacing-sm);
text-transform: none;
}/* ========================================
Hero Section
======================================== */
.hero-section{
padding: 0;
background: linear-gradient(135deg, var(--color-background) 0%, var(--color-hover) 100%);
position: relative;
overflow: hidden;
}.hero-section::before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 48%, var(--color-border) 49%, var(--color-border) 51%, transparent 52%),
linear-gradient(-45deg, transparent 48%, var(--color-border) 49%, var(--color-border) 51%, transparent 52%);
background-size: 60px 60px;
opacity: 0.03;
pointer-events: none;
}.hero-section .container{
position: relative;
z-index: 1;
}/* ========================================
Main Content
======================================== */
.site-main{
flex: 1;
padding: 0 0 var(--spacing-lg) 0;
}.main-top{
margin-bottom: var(--spacing-lg);
animation: fadeInUp var(--transition-slow) ease-out 0.2s both;
}@keyframes fadeInUp{
from{
opacity: 0;
transform: translateY(30px);
}to{
opacity: 1;
transform: translateY(0);
}
}.content-wrapper{
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-xl);
animation: fadeInUp var(--transition-slow) ease-out 0.4s both;
}/* =========================================================
Layout: Keine Lücke zwischen Sidebars und Content
(entfernt das sichtbare "Gutter" zwischen den Spalten)
========================================================= */
.content-wrapper.has-sidebar,
.content-wrapper.has-sidebar-left,
.content-wrapper.has-sidebar-right{
gap: 0;
column-gap: 0;
row-gap: 0;
align-items: stretch;
/* Spalten ohne "Luft" auf gleicher Höhe */;
}/* =========================================================
Sidebars bündig an den Content (kein "Zwischenraum" sichtbar)
Ursache: Sidebars waren transparent (Seiten-Background scheint durch).
Lösung: Sidebars bekommen die gleiche Fläche wie Content + Rahmen.
Zusätzlich entfernen wir die innenliegenden Content-Rahmen, damit
zwischen den Spalten keine doppelte Border entsteht.
========================================================= */
.content-wrapper.has-sidebar .sidebar,
.content-wrapper.has-sidebar-left .sidebar,
.content-wrapper.has-sidebar-right .sidebar{
background-color: var(--content-background, var(--color-surface));
border: 1px solid var(--color-border);
padding: 0;
/* keine Innenkanten als "Abstand" */;
}/* Content-Rahmen dort entfernen, wo Sidebars angrenzen */
.content-wrapper.has-sidebar .content-area{
border-left: 0 !important;
border-right: 0 !important;
}.content-wrapper.has-sidebar-left .content-area{
border-left: 0 !important;
}.content-wrapper.has-sidebar-right .content-area{
border-right: 0 !important;
}/* 3-Spalten-Layout: Sidebar links (15%) + Content (70%) + Sidebar rechts (15%) */
.content-wrapper.has-sidebar{
/* Use fr tracks + minmax(0, …) so sidebars don't "grow" because of
grid item's default min-width: auto (e.g. long labels/login forms).
Keeps a true 15/70/15 ratio at all times.
*/
grid-template-columns: minmax(0, 15fr) minmax(0, 70fr) minmax(0, 15fr);
}/* Nur linke Sidebar (15% + 85%) */
.content-wrapper.has-sidebar-left{
grid-template-columns: minmax(0, 15fr) minmax(0, 85fr);
}/* Nur rechte Sidebar (85% + 15%) */
.content-wrapper.has-sidebar-right{
grid-template-columns: minmax(0, 85fr) minmax(0, 15fr);
}.content-area{
min-width: 0;
background-color: var(--content-background, var(--color-surface));
padding: calc(var(--spacing-lg) * var(--phi));
border: 0;
color: var(--content-text, var(--color-text));
}.sidebar{
position: sticky;
top: calc(var(--header-height) + var(--spacing-lg));
height: fit-content;
min-width: 0;
/* allow the grid column to shrink (prevents "sidebar grows") */;
}.sidebar-right{
grid-column: 3;
}.main-bottom{
margin-top: var(--spacing-lg);
animation: fadeInUp var(--transition-slow) ease-out 0.6s both;
}/* =========================================================
HERO: Hintergrund bis zur Layoutkante (gezielt für .mod-custom.custom)
========================================================= */
.hero-section.hero-full > .hero-container{
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding-left: var(--spacing-md);
padding-right: var(--spacing-md);
box-sizing: border-box;
}/* Der Hero-Hintergrund sitzt i.d.R. auf dem Modul-Wrapper */
.hero-section.hero-full > .hero-container > .mod-custom.custom{
margin-left: calc(-1 * var(--spacing-md)) !important;
margin-right: calc(-1 * var(--spacing-md)) !important;
width: calc(100% + (2 * var(--spacing-md))) !important;
max-width: none !important;
box-sizing: border-box !important;
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}/* Falls das Hintergrundbild über Pseudo-Elemente kommt */
.hero-section.hero-full > .hero-container > .mod-custom.custom::before,
.hero-section.hero-full > .hero-container > .mod-custom.custom::after{
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}/* =========================================================
HERO Seam-Fix: falls PNG/Background Transparenz hat, kein beiger Rand sichtbar
========================================================= */
.hero-section.hero-full{
}.hero-section.hero-full > .hero-container > .mod-custom.custom{
}/* ========================================
Phi-Perfect Layout (merged)
======================================== */
/**
* Phi-Perfect Layout Erweiterungen
* Optimierungen für asymmetrisches Layout mit Hero-Bereich
*/
/* ========================================
Hero-Bereich (boxed) – Template neutral, Bild kommt aus Joomla-Modul
======================================== */
.hero-section{
width: auto !important;
max-width: none !important;
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
/* kein Flex-Zentrieren -> kein Leerraum */
left: auto !important;
right: auto !important;
transform: none !important;
}/* Container bleibt normal */
.hero-section > .container{
padding-top: 0 !important;
padding-bottom: 0 !important;
}/* Hero mit Hintergrundbild - Optimiert für volle Abdeckung */
.hero-section.hero-with-image{
background-size: cover !important;
/* Füllt kompletten Bereich */
background-position: center center !important;
/* Zentriert das Bild */
background-repeat: no-repeat !important;
background-attachment: scroll;
/* Bessere Mobile-Performance */;
}/* Alternativer Modus: Bild oben ausrichten (falls oberer Teil wichtig ist) */
.hero-section.hero-bg-top{
background-position: center top !important;
}/* Alternativer Modus: Bild unten ausrichten */
.hero-section.hero-bg-bottom{
background-position: center bottom !important;
}/* Dunkles Overlay für bessere Text-Lesbarkeit */
.hero-section.hero-with-image::before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.5) 0%,
rgba(0, 0, 0, 0.2) 100%
);
z-index: 1;
}/* Stärkeres Overlay (falls Text schwer lesbar) */
.hero-section.hero-dark-overlay::before{
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.7) 0%,
rgba(0, 0, 0, 0.4) 100%
);
}/* Kein Overlay (falls Bild schon dunkel genug) */
.hero-section.hero-no-overlay::before{
display: none;
}.hero-section .container{
z-index: 2;
width: 100%;
}/* Hero Content */
.hero-content{
max-width: calc(var(--container-width) * var(--phi-inverse));
text-align: left;
}.hero-content h1{
font-size: clamp(var(--font-size-large), 8vw, var(--font-size-xxlarge));
margin-bottom: calc(var(--spacing-lg) * var(--phi));
line-height: var(--line-height-tight);
color: var(--color-primary);
}.hero-section.hero-with-image .hero-content h1{
color: white;
text-shadow: 0 2px 30px rgba(0, 0, 0, 0.7), 0 4px 10px rgba(0, 0, 0, 0.5);
font-weight: 800;
}.hero-content .lead{
font-size: var(--font-size-medium);
line-height: var(--line-height-relaxed);
margin-bottom: calc(var(--spacing-xl) * var(--phi));
color: var(--color-text);
}.hero-section.hero-with-image .hero-content .lead{
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 1px 20px rgba(0, 0, 0, 0.6), 0 2px 5px rgba(0, 0, 0, 0.4);
font-weight: 500;
}/* Hero CTA Buttons */
.hero-cta{
display: flex;
gap: var(--spacing-lg);
flex-wrap: wrap;
}.hero-cta .btn{
padding: var(--spacing-md) calc(var(--spacing-lg) * var(--phi));
font-size: var(--font-size-base);
}.hero-cta .btn-primary{
background-color: var(--button-background, var(--color-secondary));
color: var(--button-text, white);
}.hero-cta .btn-secondary{
background-color: transparent;
border: 2px solid var(--color-secondary);
color: var(--color-secondary);
}.hero-section.hero-with-image .hero-cta .btn-secondary{
border-color: white;
color: white;
}.hero-cta .btn-secondary:hover{
background-color: var(--color-secondary);
color: white;
}/* ========================================
Sidebar Optimierungen
======================================== */
/* Sidebar "Card" Style für Module */
.sidebar .moduletable,
.sidebar .module{
background-color: var(--color-surface);
border: 1px solid var(--color-border);
padding: calc(var(--spacing-lg) * var(--phi));
margin-bottom: calc(var(--spacing-lg) * var(--phi));
transition: all var(--transition-medium);
}.sidebar .moduletable:hover,
.sidebar .module:hover{
box-shadow: var(--shadow-medium);
transform: translateY(-2px);
}.sidebar .moduletable h3,
.sidebar .module h3{
font-size: var(--font-size-medium);
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-sm);
border-bottom: 2px solid var(--color-secondary);
}/* Sidebar Navigation/Menu */
.sidebar nav ul,
.sidebar .menu ul{
list-style: none;
padding: 0;
margin: 0;
}.sidebar nav li,
.sidebar .menu li{
margin-bottom: var(--spacing-sm);
}.sidebar nav a,
.sidebar .menu a{
display: block;
padding: var(--spacing-xs) var(--spacing-sm);
color: var(--nav-text, var(--color-text));
border-left: 3px solid transparent;
transition: all var(--transition-fast);
}.sidebar nav a:hover,
.sidebar .menu a:hover,
.sidebar nav li.active > a,
.sidebar .menu li.active > a{
border-left-color: var(--color-secondary);
background-color: var(--color-hover);
color: var(--nav-hover, var(--color-secondary));
padding-left: var(--spacing-md);
}.sidebar nav a::after,
.sidebar .menu a::after{
display: none;
}/* Sidebar Social Links */
.sidebar .social-links{
display: flex;
gap: var(--spacing-md);
flex-wrap: wrap;
}.sidebar .social-links a{
display: flex;
align-items: center;
justify-content: center;
width: calc(var(--spacing-base) * 2.5);
height: calc(var(--spacing-base) * 2.5);
background-color: var(--color-secondary);
color: white;
border-radius: 50%;
transition: all var(--transition-fast);
text-decoration: none;
}.sidebar .social-links a:hover{
background-color: var(--color-accent);
transform: translateY(-2px) scale(1.1);
}.sidebar .social-links a::after{
display: none;
}/* Sidebar Bio/About */
.sidebar .bio-widget{
text-align: center;
}.sidebar .bio-widget img{
width: calc(var(--spacing-base) * 10);
height: calc(var(--spacing-base) * 10);
border-radius: 50%;
object-fit: cover;
margin: 0 auto var(--spacing-lg);
border: 4px solid var(--color-secondary);
box-shadow: var(--shadow-medium);
}.sidebar .bio-widget h3{
border: none;
margin-bottom: var(--spacing-sm);
}.sidebar .bio-widget p{
font-size: var(--font-size-small);
line-height: var(--line-height-normal);
}/* ========================================
Content-Bereich Optimierungen
======================================== */
/* Optimale Lesbarkeit: Content-Breite begrenzen */
.content-area article,
.content-area .item-page{
max-width: 100%;
}.content-area article p,
.content-area article li,
.content-area .item-page p,
.content-area .item-page li{
max-width: none;
/* Volle Breite der Content-Area nutzen */;
}/* Article Grid (für Blog-Übersicht) */
.blog-items,
.articles-grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(calc(var(--spacing-base) * 18.75), 1fr));
gap: calc(var(--spacing-lg) * var(--phi));
}.blog-item,
.article-card{
background-color: var(--content-background, var(--color-surface));
border: 1px solid var(--color-border);
transition: all var(--transition-medium);
overflow: hidden;
}.blog-item img,
.article-card img{
width: 100%;
aspect-ratio: var(--phi) / 1;
object-fit: cover;
transition: transform var(--transition-slow);
}.blog-item-content,
.article-card-content{
padding: calc(var(--spacing-lg) * var(--phi));
}.blog-item h3,
.article-card h3{
font-size: var(--font-size-medium);
margin-bottom: var(--spacing-md);
}.blog-item .article-info,
.article-card .article-info{
font-size: var(--font-size-small);
color: var(--color-text-muted);
margin-bottom: var(--spacing-sm);
}/* Featured Article (erstes Element größer) */
.blog-items .blog-item:first-child,
.articles-grid .article-card:first-child{
grid-column: 1 / -1;
display: grid;
grid-template-columns: calc(var(--phi) * 1fr) 1fr;
gap: calc(var(--spacing-lg) * var(--phi));
}.blog-items .blog-item:first-child img,
.articles-grid .article-card:first-child img{
height: 100%;
}/* ========================================
Scroll-Indikator
======================================== */
.scroll-indicator{
position: absolute;
bottom: var(--spacing-xl);
left: 50%;
transform: translateX(-50%);
z-index: 2;
animation: bounce 2s infinite;
}.scroll-indicator::before{
content: '↓';
font-size: var(--font-size-large);
color: var(--color-secondary);
opacity: 0.7;
}.hero-section.hero-with-image .scroll-indicator::before{
color: white;
}@keyframes bounce{
0%, 20%, 50%, 80%, 100%{
transform: translateY(0);
}40%{
transform: translateY(-10px);
}60%{
transform: translateY(-5px);
}
}/* ========================================
Responsive Anpassungen
======================================== */
@media (max-width: 768px){
.hero-section {
min-height: calc(100vh * 0.8);
/* Auf mobil etwas niedriger */
padding: var(--spacing-xl) 0;
}
.hero-content {
max-width: 100%;
}
.hero-cta {
flex-direction: column;
}
.hero-cta .btn {
width: 100%;
text-align: center;
justify-content: center;
}
.blog-items .blog-item: first-child,
.articles-grid .article-card:first-child {
grid-template-columns: 1fr;
}
.scroll-indicator {
display: none;
};
}@media (max-width: 480px){
.hero-section{
min-height: 70vh;
/* 70% auf Mobile statt auto */
padding: var(--spacing-lg) 0;
}.hero-content{
text-align: center;
/* Zentriert auf Mobile */;
}.hero-content h1{
font-size: var(--font-size-large);
}.sidebar .bio-widget img{
width: calc(var(--spacing-base) * 6.25);
height: calc(var(--spacing-base) * 6.25);
}
}/* ========================================
Accordion-Menü in Sidebar
======================================== */
/* Parent-Menüpunkt mit Accordion */
.sidebar nav li.parent > a,
.sidebar .menu li.parent > a{
position: relative;
cursor: pointer;
}/* Untermenu-Styling */
.sidebar nav li ul,
.sidebar .menu li ul{
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding-left: var(--spacing-md);
}/* Geöffnetes Untermenu */
.sidebar nav li.menu-open > ul,
.sidebar .menu li.menu-open > ul{
max-height: none !important;
}/* Unterpunkte einrücken */
.sidebar nav li ul li a,
.sidebar .menu li ul li a{
padding-left: calc(var(--spacing-sm) * 1.5);
font-size: 0.9em;
}/* Toggle-Icon Animation */
.menu-toggle-icon{
display: inline-block;
transition: transform 0.3s ease;
}/* Aktiver Parent hat Icon gedreht */
.sidebar nav li.menu-open > a .menu-toggle-icon,
.sidebar .menu li.menu-open > a .menu-toggle-icon{
transform: rotate(180deg);
}/* ========================================
PFEILE BEI ALLEN LINKS ENTFERNEN
======================================== */
/* Globale Pfeil-Entfernung - überschreibt Joomla Core CSS */
a[href^="http://"]::after,
a[href^="https://"]::after,
a[href^="mailto:"]::after,
a[href*="://"]::after,
a[target="_blank"]::after,
a.external::after,
a.external-link::after{
display: none !important;
content: "" !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
}/* Speziell in Modulen und Sidebar */
.moduletable a::after,
.module a::after,
.sidebar a::after,
.sidebar-left a::after,
.sidebar-right a::after{
display: none !important;
content: "" !important;
}/* Bio-Widget und Social Icons */
.bio-widget a::after,
.bio-widget a::before,
.social-links a::after,
.social-links a::before,
a[aria-label]::after,
a[title*="Facebook"]::after,
a[title*="Twitter"]::after,
a[title*="X"]::after,
a[title*="XING"]::after,
a[title*="Xing"]::after,
a[title*="LinkedIn"]::after,
a[title*="Instagram"]::after,
a[title*="Mail"]::after,
a[title*="E-Mail"]::after{
display: none !important;
content: "" !important;
visibility: hidden !important;
}/* Zusätzliche Absicherung für alle img-Link-Kombinationen */
a > img{
pointer-events: none;
}a:has(> img)::after,
a:has(> img)::before{
display: none !important;
}/* ========================================
SPACING-FIXES für Hero-Bereich
Entfernt Abstände vor/nach Hero
======================================== */
/* Entfernt Abstand ÜBER dem Hero (zwischen Header und Hero) */
.site-main{
margin-top: 0 !important;
padding-top: 0 !important;
overflow-x: hidden;
/* Wichtig für Hero-Breakout */;
}.page-wrapper{
margin-top: 0 !important;
padding-top: 0 !important;
overflow-x: hidden;
/* Wichtig für Hero-Breakout */;
}body > .page-wrapper{
margin-top: 0 !important;
}.site-header + .site-main .hero-section,
.site-header + * .hero-section{
margin-top: 0 !important;
}/* Hero-Container muss volle Breite erlauben */
jdoc[name="hero"],
.position-hero,
[data-position="hero"]{
padding: 0 !important;
margin: 0 !important;
max-width: none !important;
width: 100% !important;
}/* Entfernt Abstand UNTER dem Hero (zwischen Hero und Content) */
.hero-section + *{
margin-top: 0 !important;
padding-top: 0 !important;
}.site-main .hero-section ~ .container,
.site-main .hero-section ~ *{
margin-top: 0 !important;
padding-top: 0 !important;
}/* Body und HTML ohne Abstände */
body{
margin: 0 !important;
padding: 0 !important;
}html{
margin: 0 !important;
padding: 0 !important;
}/* Falls Modulpositionen verwendet werden */
jdoc[name="hero"]{
margin: 0 !important;
padding: 0 !important;
}/* ========================================
OPTIONAL: Wenn Sie ETWAS Abstand wollen
Kommentieren Sie diese Zeilen ein:
======================================== */
/* Kleiner Abstand nach Hero (z.B. 30px) */
/*
.hero-section + *{
margin-top: 30px !important;
}*/
/* Kleiner Abstand vor Hero (z.B. 20px) */
/*
.hero-section{
margin-top: 20px !important;
}*/
/* --- Final Safety: ensure HERO never breaks out of container --- */
.hero-section{
width: auto !important;
max-width: none !important;
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
}/* --- HERO Layoutbreite: keine Phi-MinHeight/Breakouts erzwingen --- */
.hero-section.hero-full{
min-height: 0 !important;
height: auto !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}.hero-section.hero-full > .hero-container{
width: 100% !important;
max-width: var(--container-width) !important;
margin: 0 auto !important;
padding: 0 !important;
}/* --- HERO (Phi-Safety): Modul-Wrapper immer 100% Breite (verhindert "rechts bleibt frei") --- */
.hero-section.hero-full > .hero-container > *{
width: 100%;
max-width: 100%;
}.hero-section.hero-full .moduletable,
.hero-section.hero-full .module,
.hero-section.hero-full .mod-custom,
.hero-section.hero-full .custom{
}/* Falls das Bild als Background in einem inneren Wrapper liegt */
.hero-section.hero-full [style*="background"]{
}/* --- HERO Strong Force: alles im Hero wirklich 100% Layoutbreite --- */
.hero-section.hero-full .hero-container{
}/* Häufige Ursache: Modul/Custom-HTML rendert inline/auto-width -> erzwingen */
.hero-section.hero-full .hero-container > *{
}/* Joomla-Module Wrapper (verschiedene Renderer) */
.hero-section.hero-full .moduletable,
.hero-section.hero-full .moduletable > *,
.hero-section.hero-full .module,
.hero-section.hero-full .module > *,
.hero-section.hero-full .mod-custom,
.hero-section.hero-full .custom,
.hero-section.hero-full .custom > *{
}/* Bilder niemals durch max-width oder inline sizing begrenzen */
.hero-section.hero-full img{
}/* Wenn irgendwo text-align:center wirkt, kann das Layout "komisch" aussehen */
.hero-section.hero-full .moduletable,
.hero-section.hero-full .module,
.hero-section.hero-full .mod-custom,
.hero-section.hero-full .custom{
}/* --- HERO Layoutkante exakt treffen: Container-Padding + Modul-Bleed --- */
/* hero-container wie .container (Layoutbreite + Innenpadding) */
.hero-section.hero-full > .hero-container{
}/* Modul/Hintergrund soll bis zur äußeren Layoutkante (inkl. Padding) reichen */
.hero-section.hero-full > .hero-container > *{
}/* --- HERO Fix: verschachteltes .container im Hero-Modul darf NICHT erneut begrenzen --- */
.hero-section.hero-full .hero-container .container{
}/* Inhalt im Hero weiterhin sauber zentrieren (optional) */
.hero-section.hero-full .hero-container .hero-content{
}/* --- HERO Fix (final): innerer .container im Hero-Modul darf NICHT begrenzen --- */
/* Trifft deinen konkreten DOM:
... */
.hero-section.hero-full #mod-custom110 > .container,
.hero-section.hero-full .mod-custom.custom > .container{
}/* Inhalt weiterhin sauber im Layout zentrieren */
.hero-section.hero-full .mod-custom.custom > .container > .hero-content{
}/* Falls der Hintergrund auf dem inneren Container liegt */
.hero-section.hero-full .mod-custom.custom > .container{
}/* --- HERO Background bis zur Layoutkante (inkl. Layout-Padding) ---
Hintergrund sitzt typischerweise auf dem Modul-Wrapper (.mod-custom.custom).
Wir halten den Hero in Layoutbreite (max-width), aber lassen den Modul-Wrapper
in das Container-Padding "bluten", damit links/rechts keine helle Kante bleibt.
*/
.hero-section.hero-full > .hero-container{
}/* Modul-Wrapper wird auf volle Layoutkante erweitert */
.hero-section.hero-full > .hero-container > .mod-custom.custom,
.hero-section.hero-full > .hero-container > .module,
.hero-section.hero-full > .hero-container > .moduletable{
}/* Falls der Hintergrund über Pseudo-Elemente kommt */
.hero-section.hero-full > .hero-container > .mod-custom.custom::before,
.hero-section.hero-full > .hero-container > .mod-custom.custom::after{
}/* Falls der Hintergrund direkt auf dem Wrapper liegt */
.hero-section.hero-full > .hero-container > .mod-custom.custom{
}/* =========================================================
HERO: Hintergrund bis zur Layoutkante (gezielt für .mod-custom.custom)
========================================================= */
.hero-section.hero-full > .hero-container{
}/* Der Hero-Hintergrund sitzt i.d.R. auf dem Modul-Wrapper */
.hero-section.hero-full > .hero-container > .mod-custom.custom{
}/* Falls das Hintergrundbild über Pseudo-Elemente kommt */
.hero-section.hero-full > .hero-container > .mod-custom.custom::before,
.hero-section.hero-full > .hero-container > .mod-custom.custom::after{
}/* =========================================================
HERO Seam-Fix: falls PNG/Background Transparenz hat, kein beiger Rand sichtbar
========================================================= */
.hero-section.hero-full{
}.hero-section.hero-full > .hero-container > .mod-custom.custom{
}/* =========================================================
HERO (boxed): Hero liegt im .container und nutzt dessen Layoutbreite
========================================================= */
.hero-section.hero-full{
/* Seam-Fix bei sehr hellem PNG */;
}.hero-section.hero-full .mod-custom.custom,
.hero-section.hero-full .module,
.hero-section.hero-full .moduletable{
/* Seam-Fix */;
}/* =========================================================
HERO im Grid: über Sidebar1 + Content + Sidebar2 spannen
========================================================= */
.content-wrapper.has-sidebar .hero-section.hero-in-grid{
/* Seam-Fix */;
}.content-wrapper.has-sidebar .hero-section.hero-in-grid .mod-custom.custom,
.content-wrapper.has-sidebar .hero-section.hero-in-grid .module,
.content-wrapper.has-sidebar .hero-section.hero-in-grid .moduletable{
}/* =========================================================
HERO (clean): spannt über Sidebar1 + Content + Sidebar2
- Hero-Section im Grid: grid-column: 1 / -1
- Keine Phi-Begrenzung im Hero (volle Breite für Background)
- Innerer .container im Hero-Modul neutralisieren
========================================================= */
/* 1) Hero im 3-Spalten-Grid über alle Spalten ziehen */
.content-wrapper .hero-section.hero-full{
}/* 2) Falls Joomla/Module einen inneren .container ausgeben: nicht erneut begrenzen */
.content-wrapper .hero-section.hero-full .container{
}/* 3) Hero-Content im Hero darf nicht durch Phi-Formel beschnitten werden */
.content-wrapper .hero-section.hero-full .hero-content{
}/* 4) Module Wrapper im Hero: volle Breite + saubere Background-Defaults */
.content-wrapper .hero-section.hero-full .mod-custom.custom,
.content-wrapper .hero-section.hero-full .module,
.content-wrapper .hero-section.hero-full .moduletable{
}/* 5) Optional: helle PNG-Fades sollen nicht "beige" wirken */
.content-wrapper .hero-section.hero-full{
}/* =====================================================
HERO-FIX (merged) — formerly css/hero-fix.css
Loaded last by being appended here
===================================================== */
/* HERO-FIX (loaded last) - wenn du diesen Kommentar in DevTools findest, wird die Datei geladen */
/* 1) Hero liegt im Grid-Container (.content-wrapper) und soll über alle Spalten laufen */
.content-wrapper .hero-section.hero-in-grid{
grid-column: 1 / -1 !important;
width: 100% !important;
margin: 0 !important;
background-color: #fff !important;
/* verhindert beige "Kanten" bei sehr hellem PNG */;
}/* 2) Joomla/Module erzeugen oft einen inneren .container -> hier darf nichts begrenzen */
.content-wrapper .hero-section.hero-in-grid .container{
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}/* 3) Hero-Content: keine Phi-Max-Width, Text zentrieren (damit nichts links "abbricht") */
.content-wrapper .hero-section.hero-in-grid .hero-content{
width: 100% !important;
max-width: none !important;
margin: 0 auto !important;
text-align: center !important;
}/* 4) Hintergrund sitzt i.d.R. auf dem Modul-Wrapper */
.content-wrapper .hero-section.hero-in-grid .mod-custom.custom,
.content-wrapper .hero-section.hero-in-grid .module,
.content-wrapper .hero-section.hero-in-grid .moduletable{
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-color: #fff !important;
}/* Ultra-specific overrides (win against any template rule) */
.hero-section.hero-in-grid .hero-content{
max-width: none !important;
width: 100% !important;
text-align: center !important;
}.hero-section.hero-in-grid #mod-custom110,
.hero-section.hero-in-grid [id^="mod-custom"]{
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}/* =====================================================
HERO TYPOGRAPHY OPTIMIZATION
===================================================== */
.hero-section.hero-in-grid{
padding: clamp(80px, 10vw, 160px) 0 !important;
text-align: center !important;
}.hero-section.hero-in-grid h2{
font-size: clamp(2.2rem, 4vw, 3.6rem);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.02em;
margin-bottom: 1.5rem;
}.hero-section.hero-in-grid p.lead{
font-size: clamp(1.1rem, 1.5vw, 1.35rem);
line-height: 1.6;
max-width: 900px !important;
margin: 0 auto 2.5rem auto !important;
opacity: 0.9;
}.hero-section.hero-in-grid .hero-cta{
margin-top: 1.5rem;
}.hero-section.hero-in-grid .btn{
padding: 0.9rem 2rem;
font-size: 1rem;
font-weight: 500;
border-radius: 6px;
transition: all 0.25s ease;
}.hero-section.hero-in-grid .btn-primary{
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}.hero-section.hero-in-grid .btn:hover{
transform: translateY(-2px);
}/* =====================================================
HERO FLUSH (bündig & sauber)
Entfernt den "beigen Leerraum" oberhalb/unterhalb des Heroes
und sorgt für einen sauberen Anschluss an Header und Content.
===================================================== */
/* 0) Häufige Ursache: Grid-Gap/Margins im Wrapper */
.content-wrapper{
row-gap: 0 !important;
}/* 1) Hero selbst: keine äußeren Abstände */
.hero-section.hero-in-grid{
margin: 0 !important;
padding: 0 !important;
/* entfernt Leerraum oben/unten im Hero */;
}/* 2) Falls der Bereich oberhalb vom Hero aus Main/Wrapper-Padding kommt */
.site-header + main,
.site-header + main .site-main,
.site-header + main .main-content{
margin-top: 0 !important;
padding-top: 0 !important;
}/* 3) Hintergrund-Wrapper: kein Padding, damit unten keine "leere Zone" entsteht */
.hero-section.hero-in-grid .mod-custom.custom,
.hero-section.hero-in-grid .module,
.hero-section.hero-in-grid .moduletable{
margin: 0 !important;
padding: 0 !important;
}/* 4) Innenabstand für Inhalte (Text/Buttons), ohne extra Fläche außerhalb des Backgrounds */
.hero-section.hero-in-grid .hero-content{
padding: clamp(56px, 8vw, 120px) var(--spacing-md) clamp(40px, 6vw, 96px) !important;
}/* 5) Lead-Text: kompakter, ohne zusätzliche Leerzeilen */
.hero-section.hero-in-grid p.lead{
margin-top: 0 !important;
margin-bottom: 2.0rem !important;
}/* 6) CTA: kein zusätzlicher Spacer nach unten */
.hero-section.hero-in-grid .hero-cta{
margin-top: 1.0rem !important;
margin-bottom: 0 !important;
}/* =====================================================
UNDER HERO MENU (horizontal navigation between Hero and Content)
===================================================== */
.under-hero-menu{
grid-column: 1 / -1;
margin: 0;
padding: 0;
}/* Ensure the menu module doesn't reintroduce width constraints */
.under-hero-menu .container{
max-width: none !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}/* Default Joomla menu modules usually output ul.menu */
.under-hero-menu ul{
list-style: none;
margin: 0;
padding: 0;
}/* Horizontal layout */
.under-hero-menu ul.menu,
.under-hero-menu ul.nav,
.under-hero-menu .mod-menu__nav{
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.25rem;
align-items: center;
justify-content: flex-start;
padding: 0.75rem 0;
border-top: 1px solid rgba(0,0,0,0.06);
border-bottom: 1px solid rgba(0,0,0,0.06);
background: rgba(255,255,255,0.6);
backdrop-filter: blur(6px);
}/* Links */
.under-hero-menu a{
display: inline-block;
text-decoration: none;
padding: 0.35rem 0.2rem;
font-weight: 500;
letter-spacing: 0.01em;
}/* Active/Current item */
.under-hero-menu li.active > a,
.under-hero-menu li.current > a{
text-decoration: underline;
text-underline-offset: 0.25rem;
}/* Hover */
.under-hero-menu a:hover{
text-decoration: underline;
text-underline-offset: 0.25rem;
}/* -----------------------------------------------------
Menu separator support
Joomla separators are often rendered as:
---
or sometimes ---
We render them as a thin line and hide the placeholder text.
----------------------------------------------------- */
.under-hero-menu li.separator,
.under-hero-menu li.divider,
.under-hero-menu li.menu-separator,
.under-hero-menu li.em-divider{
display: flex;
align-items: center;
padding: 0;
margin: 0 0.25rem;
}.under-hero-menu li.separator > span.separator,
.under-hero-menu li.separator > span,
.under-hero-menu li.divider > span,
.under-hero-menu li.menu-separator > span,
.under-hero-menu li.em-divider > span,
.under-hero-menu li.separator > a,
.under-hero-menu li.divider > a,
.under-hero-menu li.menu-separator > a,
.under-hero-menu li.em-divider > a{
display: block;
width: 2.25rem;
height: 1px;
padding: 0;
margin: 0;
background: rgba(0,0,0,0.20);
color: transparent;
text-decoration: none;
overflow: hidden;
text-indent: -9999px;
border: 0;
}.under-hero-menu li.separator > a,
.under-hero-menu li.divider > a,
.under-hero-menu li.menu-separator > a,
.under-hero-menu li.em-divider > a{
pointer-events: none;
cursor: default;
}/* Small screens */
@media (max-width: 640px){
.under-hero-menu ul.menu,
.under-hero-menu ul.nav,
.under-hero-menu .mod-menu__nav{
justify-content: flex-start;
padding-left: var(--spacing-md);
padding-right: var(--spacing-md);
};
}/* =====================================================
UNDER HERO MENU (alignment override): left aligned + layout width
===================================================== */
.under-hero-menu{
width: 100%;
max-width: var(--container-width);
margin-left: auto;
margin-right: auto;
padding-left: var(--spacing-md);
padding-right: var(--spacing-md);
box-sizing: border-box;
text-align: left;
}/* Some menu renderers wrap inside