/* SPELLSTROSS WELCOME CLEAN 20260826 BEGIN */
/* ==========================================================
HAUPTMENÜ
========================================================== */
/*
* Größer und links beginnend.
* Suchfeld und Hamburger bleiben rechts und werden nicht
* in ihrer Schriftgröße verändert.
*/
#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span {
font-size: 19px !important;
}
/*
* Desktop:
* Menü links im verfügbaren Menübereich,
* Suchfeld und Hamburger bleiben anschließend rechts.
*/
@media (min-width: 992px) {
#sp-header #sp-menu > .sp-column {
display: flex !important;
align-items: center !important;
}
#sp-header .sp-megamenu-parent {
display: flex !important;
flex: 1 1 auto !important;
justify-content: flex-start !important;
float: none !important;
margin-left: 0 !important;
margin-right: auto !important;
}
}
/* ==========================================================
WILLKOMMEN
========================================================== */
.spellstross-home-intro-col,
.spellstross-home-intro-col > .sp-column {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
}
/*
* Gesamter Block.
*/
.spellstross-home-intro {
width: 100% !important;
max-width: 960px !important;
margin: 0 auto !important;
}
/*
* Wichtig:
* diesmal FLEX statt Grid.
* Dadurch können Helix/Bootstrap keine merkwürdige
* intrinsische Grid-Minimalbreite mehr erzeugen.
*/
.spellstross-home-grid {
display: flex !important;
width: 100% !important;
max-width: 960px !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 52px !important;
}
/*
* Text bekommt eine harte, stabile Breite.
*/
.spellstross-home-copy {
display: block !important;
flex: 0 0 568px !important;
width: 568px !important;
min-width: 568px !important;
max-width: 568px !important;
font-size: 16px !important;
line-height: 1.55 !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
/*
* Alle alten Inline-/Heading-Eigenheiten neutralisieren.
*/
.spellstross-home-copy br {
display: inline;
}
.spellstross-home-copy a {
font-size: inherit !important;
}
/*
* Bildspalte.
*/
.spellstross-home-images {
display: flex !important;
flex: 0 0 340px !important;
width: 340px !important;
min-width: 340px !important;
max-width: 340px !important;
flex-direction: column !important;
align-items: center !important;
gap: 22px !important;
}
.spellstross-home-image {
display: block !important;
width: 100% !important;
}
.spellstross-home-image img {
float: none !important;
display: block !important;
width: 100% !important;
max-width: 337px !important;
height: auto !important;
margin: 0 auto !important;
}
/*
* Smartphone / kleineres Tablet
*/
@media (max-width: 767px) {
.spellstross-home-grid {
display: block !important;
max-width: 100% !important;
}
.spellstross-home-copy {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin-bottom: 28px !important;
}
.spellstross-home-images {
width: 100% !important;
min-width: 0 !important;
max-width: 337px !important;
margin: 0 auto !important;
}
}
/* ==========================================================
FOOTER
========================================================== */
/*
* Den derzeit guten Footer unverändert lassen.
* Nur seine schon gewünschte Lesbarkeit absichern.
*/
#sp-bottom .row > [class*="col-"] {
text-align: center;
}
#sp-bottom .sp-module ul,
#sp-bottom .sp-module ul > li,
#sp-bottom .sp-module ul > li > a {
font-size: 16px !important;
}
#sp-bottom .sp-module ul {
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
}
/* SPELLSTROSS WELCOME CLEAN 20260826 END */
/* SPELLSTROSS LEFT ALIGN 20260826 BEGIN */
/* ==========================================================
GEMEINSAME DESKTOP-BREITE
Menü, Breadcrumb und Willkommen erhalten denselben
horizontalen Bezugsbereich.
========================================================== */
@media (min-width: 992px) {
/*
* Der transparente Logo-Dummy bleibt als Datei und in den
* Helix-Einstellungen erhalten, belegt vorläufig aber
* keinen sichtbaren Platz.
*/
#sp-header #sp-logo {
display: none !important;
}
/*
* Header auf dieselbe Nutzbreite wie Willkommen bringen.
*/
#sp-header > .container,
#sp-header .container {
width: 100% !important;
max-width: 960px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/*
* Menüspalte übernimmt die komplette verfügbare Breite.
*/
#sp-header #sp-menu {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
}
#sp-header #sp-menu > .sp-column {
width: 100% !important;
display: flex !important;
align-items: center !important;
}
/*
* Hauptmenü links.
* Suchfeld + Hamburger folgen weiter rechts.
*/
#sp-header .sp-megamenu-parent {
display: flex !important;
flex: 1 1 auto !important;
justify-content: flex-start !important;
float: none !important;
margin-left: 0 !important;
margin-right: auto !important;
padding-left: 0 !important;
}
/*
* Willkommen benutzt exakt denselben 960px-Bezug.
*/
.spellstross-home-intro {
width: 100% !important;
max-width: 960px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/*
* Breadcrumb ebenfalls auf denselben linken Rand.
*/
.spellstross-home-intro-row,
.spellstross-home-intro-col {
margin-left: 0 !important;
}
}
/* SPELLSTROSS LEFT ALIGN 20260826 END */
/* SPELLSTROSS NAV NOWRAP 20260826 BEGIN */
/*
* Desktop-Menü wieder garantiert einzeilig.
* Willkommen-Inhalt, Footer, Suchfeld und Hamburger
* werden nicht umgebaut.
*/
@media (min-width: 992px) {
#sp-header #sp-menu > .sp-column {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
}
#sp-header .sp-megamenu-parent {
display: flex !important;
flex: 1 1 auto !important;
flex-wrap: nowrap !important;
align-items: center !important;
}
#sp-header .sp-megamenu-parent > li {
flex: 0 0 auto !important;
white-space: nowrap !important;
}
/*
* 19 px waren im Screenshot etwas zu breit.
* 18 px bleiben deutlich größer als vorher, passen aber
* wesentlich besser in eine einzige Zeile.
*/
#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span {
font-size: 18px !important;
padding-left: 11px !important;
padding-right: 11px !important;
white-space: nowrap !important;
}
/*
* Suchfeld und Hamburger dürfen nicht schrumpfen.
*/
#sp-header .offcanvas-toggler {
flex: 0 0 auto !important;
}
}
/* SPELLSTROSS NAV NOWRAP 20260826 END */
/* SPELLSTROSS BREADCRUMB DIRECT CHILD 20260826 BEGIN */
/*
* Tatsächliches Joomla-6-HTML:
*
*
*
* Deshalb direkt ALLE li-Kinder horizontal behandeln.
*/
.mod-breadcrumbs__wrapper > ol.mod-breadcrumbs {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
width: 100% !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/*
* Wichtig:
* auch "Aktuelle Seite:" ist ein und trägt float-start.
*/
.mod-breadcrumbs__wrapper > ol.mod-breadcrumbs > li {
display: inline-flex !important;
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
float: none !important;
clear: none !important;
align-items: center !important;
white-space: nowrap !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/*
* Bootstrap .float-start ausdrücklich überschreiben.
*/
.mod-breadcrumbs__wrapper
> ol.mod-breadcrumbs
> li.mod-breadcrumbs__here.float-start {
float: none !important;
}
/*
* Breadcrumb-Trenner bleiben innerhalb derselben Zeile.
*/
.mod-breadcrumbs__wrapper
> ol.mod-breadcrumbs
> li.breadcrumb-item::before {
float: none !important;
}
/*
* Links / Text ebenfalls nicht auf volle Breite ziehen.
*/
.mod-breadcrumbs__wrapper
> ol.mod-breadcrumbs
> li > a,
.mod-breadcrumbs__wrapper
> ol.mod-breadcrumbs
> li > span {
display: inline !important;
width: auto !important;
}
/* SPELLSTROSS BREADCRUMB DIRECT CHILD 20260826 END */
/* SPELLSTROSS BREADCRUMB WIDTH 20260826 BEGIN */
/*
* Helix-Spalte wirklich vollbreit.
*/
.spellstross-breadcrumb-col,
.spellstross-breadcrumb-col > .sp-column {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
}
/*
* Desktop:
* gesamte Breadcrumb-Kette in EINER Zeile.
*/
@media (min-width: 768px) {
.mod-breadcrumbs__wrapper {
width: 100% !important;
max-width: 100% !important;
}
.mod-breadcrumbs__wrapper > ol.mod-breadcrumbs {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
width: 100% !important;
max-width: none !important;
}
.mod-breadcrumbs__wrapper
> ol.mod-breadcrumbs
> li {
display: inline-flex !important;
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
float: none !important;
clear: none !important;
white-space: nowrap !important;
}
}
/*
* Mobil darf die Kette bei Bedarf umbrechen.
*/
@media (max-width: 767px) {
.mod-breadcrumbs__wrapper
> ol.mod-breadcrumbs {
display: flex !important;
flex-wrap: wrap !important;
}
}
/* SPELLSTROSS BREADCRUMB WIDTH 20260826 END */
/* SPELLSTROSS FIXED STACK 20260826 BEGIN */
/* ==========================================================
FALLBACK-HÖHEN
JavaScript misst sie anschließend exakt.
Die Werte entsprechen dem derzeitigen Desktop-Layout.
========================================================== */
:root {
--spellstross-topbar-height: 25px;
--spellstross-header-height: 54px;
--spellstross-breadcrumb-height: 47px;
}
/*
* Weil fixed-Elemente aus dem normalen Dokumentfluss genommen
* werden, benötigt der Seiteninhalt oben entsprechenden Platz.
*/
body {
padding-top:
calc(
var(--spellstross-topbar-height)
+
var(--spellstross-header-height)
+
var(--spellstross-breadcrumb-height)
) !important;
}
/*
* Bei Sprungmarken ebenfalls unterhalb der drei Leisten landen.
*/
html {
scroll-padding-top:
calc(
var(--spellstross-topbar-height)
+
var(--spellstross-header-height)
+
var(--spellstross-breadcrumb-height)
+
12px
);
}
/* ==========================================================
1. SOCIAL-/KONTAKTLEISTE
========================================================== */
#sp-top-bar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
margin: 0 !important;
z-index: 1300 !important;
transform: none !important;
}
/* ==========================================================
2. MENÜZEILE
========================================================== */
#sp-header,
#sp-header.header-sticky {
position: fixed !important;
top:
var(--spellstross-topbar-height)
!important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
margin: 0 !important;
z-index: 1290 !important;
transform: none !important;
}
/*
* Helix darf den Header beim Scrollen nicht zusätzlich
* verschieben oder animieren.
*/
#sp-header.header-sticky {
animation: none !important;
}
/* ==========================================================
3. BREADCRUMB
========================================================== */
/*
* Wir fixieren jetzt direkt den tatsächlich vorhandenen
* Breadcrumb-Wrapper. Damit sind wir nicht mehr von einer
* bestimmten Helix-Section oder deren overflow-Einstellungen
* abhängig.
*/
.mod-breadcrumbs__wrapper {
position: fixed !important;
top:
calc(
var(--spellstross-topbar-height)
+
var(--spellstross-header-height)
) !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
z-index: 1280 !important;
background: #e8e8e8 !important;
transform: none !important;
box-sizing: border-box !important;
}
/*
* Breadcrumb-Inhalt bleibt auf unserer bisherigen
* Inhaltsbreite zentriert.
*/
.mod-breadcrumbs__wrapper
> ol.mod-breadcrumbs {
width: 100% !important;
max-width: 960px !important;
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 0 !important;
box-sizing: border-box !important;
}
/*
* Desktop weiterhin zwingend eine Zeile.
*/
@media (min-width: 768px) {
.mod-breadcrumbs__wrapper
> ol.mod-breadcrumbs {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
}
.mod-breadcrumbs__wrapper
> ol.mod-breadcrumbs
> li {
flex: 0 0 auto !important;
float: none !important;
width: auto !important;
white-space: nowrap !important;
}
}
/* ==========================================================
MOBIL-FALLBACK
========================================================== */
@media (max-width: 767px) {
:root {
--spellstross-topbar-height: 25px;
--spellstross-header-height: 60px;
--spellstross-breadcrumb-height: 62px;
}
.mod-breadcrumbs__wrapper
> ol.mod-breadcrumbs {
flex-wrap: wrap !important;
}
}
/* SPELLSTROSS FIXED STACK 20260826 END */
/* SPELLSTROSS TEXTS OVERVIEW 20260826 BEGIN */
/* ==========================================================
TEXTE-ÜBERSICHT
========================================================== */
.spellstross-texts-overview-row {
padding: 40px 0 46px 0 !important;
}
/*
* Wichtig: auch die Helix-Elternspalte wirklich vollbreit.
* Damit vermeiden wir den schmalen Effekt des ersten Versuchs.
*/
.spellstross-texts-overview-col {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
}
.spellstross-texts-overview-col
> .sp-column {
width: 100% !important;
max-width: 960px !important;
margin-left: auto !important;
margin-right: auto !important;
display: grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap: 22px !important;
}
/* Überschrift */
.spellstross-texts-heading {
grid-column: 1 / -1;
margin-bottom: 5px !important;
}
.spellstross-texts-heading
.sp-module-title {
margin-bottom: 10px !important;
font-size: 28px !important;
line-height: 1.2 !important;
font-weight: 500 !important;
}
.spellstross-texts-heading p {
margin-bottom: 8px !important;
font-size: 16px;
line-height: 1.5;
}
/* ==========================================================
EINZELNE KATEGORIEKARTE
========================================================== */
.spellstross-text-card {
position: relative;
display: flex !important;
flex-direction: column !important;
min-width: 0;
padding: 20px 22px 18px 22px !important;
background: #f5f5f5 !important;
border:
1px solid rgba(0,0,0,.07);
border-radius: 6px;
}
.spellstross-text-card
.sp-module-title {
margin: 0 0 14px 0 !important;
font-size: 20px !important;
line-height: 1.25 !important;
font-weight: 500 !important;
}
.spellstross-text-card
.sp-module-title a {
color: inherit !important;
text-decoration: none !important;
}
.spellstross-text-card
.sp-module-title a:hover {
text-decoration: underline !important;
}
/* keine alten Bullet-Listen */
.spellstross-text-card ul {
list-style: none !important;
margin: 0 0 16px 0 !important;
padding: 0 !important;
}
.spellstross-text-card li {
margin: 0 !important;
padding: 7px 0 !important;
border-bottom:
1px solid rgba(0,0,0,.08);
}
.spellstross-text-card li:last-child {
border-bottom: 0;
}
/*
* Weiter-Link sitzt immer unten.
*/
.spellstross-card-more {
margin:
auto 0 0 0 !important;
padding-top: 12px;
font-weight: 500;
}
.spellstross-card-more a {
display: inline-block;
text-decoration: none !important;
}
.spellstross-card-more a:hover {
text-decoration: underline !important;
}
/* ==========================================================
KATEGORIE-BLOG
Ebene 1: 2 große Beiträge nebeneinander.
========================================================== */
.com-content-category-blog
.blog-items.items-leading {
display: grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap: 24px !important;
margin-bottom: 28px;
}
.com-content-category-blog
.blog-items.items-leading
> .blog-item {
min-width: 0;
padding: 20px !important;
background: #f5f5f5;
border:
1px solid rgba(0,0,0,.06);
border-radius: 6px;
}
/* ==========================================================
Ebene 2: vier weitere Beiträge in 4 Spalten.
========================================================== */
.com-content-category-blog
.blog-items.items-items {
display: grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr));
gap: 18px !important;
margin-bottom: 28px;
}
.com-content-category-blog
.blog-items.items-items
> .blog-item {
min-width: 0;
padding: 16px !important;
background: #ffffff;
border:
1px solid rgba(0,0,0,.08);
border-radius: 6px;
}
/* ==========================================================
Ebene 3: Rest als klare Titel-Liste.
========================================================== */
.com-content-category-blog
.items-more {
clear: both;
margin-top: 28px !important;
padding-top: 20px !important;
border-top:
1px solid rgba(0,0,0,.10);
}
.com-content-category-blog
.items-more ol,
.com-content-category-blog
.items-more ul {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
columns: 2;
column-gap: 36px;
}
.com-content-category-blog
.items-more li {
break-inside: avoid;
padding: 5px 0;
}
/* ==========================================================
TABLET
========================================================== */
@media
(min-width:768px)
and
(max-width:991px) {
.spellstross-texts-overview-col
> .sp-column {
grid-template-columns:
repeat(2,minmax(0,1fr));
}
.com-content-category-blog
.blog-items.items-items {
grid-template-columns:
repeat(2,minmax(0,1fr));
}
}
/* ==========================================================
MOBIL
========================================================== */
@media (max-width:767px) {
.spellstross-texts-overview-row {
padding:
28px 18px 34px 18px !important;
}
.spellstross-texts-overview-col
> .sp-column {
grid-template-columns:
1fr !important;
gap: 16px !important;
}
.com-content-category-blog
.blog-items.items-leading,
.com-content-category-blog
.blog-items.items-items {
grid-template-columns:
1fr !important;
}
.com-content-category-blog
.items-more ol,
.com-content-category-blog
.items-more ul {
columns: 1;
}
}
/* SPELLSTROSS TEXTS OVERVIEW 20260826 END */
/* SPELLSTROSS TEXTS WIDE RESPONSIVE 20260826 BEGIN */
/* ==========================================================
GESAMTE HELIX-ROW AUF VOLLE NUTZBARE BREITE
========================================================== */
.spellstross-texts-overview-row {
width: 100% !important;
max-width: none !important;
}
/*
* Helix-Container nicht auf die schmale bisherige Breite
* begrenzen.
*/
.spellstross-texts-overview-row > .container,
.spellstross-texts-overview-row .container {
width: 100% !important;
max-width: 1240px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
}
/*
* Sämtliche Bootstrap-/Helix-Zwischenhüllen wirklich
* auf 100 % bringen.
*/
.spellstross-texts-overview-row .row,
.spellstross-texts-overview-row
[class*="col-"],
.spellstross-texts-overview-col,
.spellstross-texts-overview-col
> .sp-column {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
/* ==========================================================
EIGENTLICHER KARTEN-CONTAINER
========================================================== */
.spellstross-text-card-grid {
width: 100% !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
display: grid !important;
grid-template-columns:
repeat(3, minmax(0, 1fr))
!important;
gap: 24px !important;
align-items: stretch !important;
box-sizing: border-box !important;
}
/*
* Überschrift + Einleitung über alle Spalten.
*/
.spellstross-text-card-grid
> .spellstross-texts-heading {
grid-column:
1 / -1 !important;
}
/* ==========================================================
KARTEN
========================================================== */
.spellstross-text-card-grid
> .spellstross-text-card {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/*
* Alte Bootstrap-Breiten ausdrücklich neutralisieren.
*/
.spellstross-text-card-grid
> [class*="col-"].spellstross-text-card {
width: 100% !important;
max-width: none !important;
flex: none !important;
}
/*
* Titel dürfen normal umbrechen, aber nicht Wort für Wort
* aufgrund künstlicher Minimalbreiten.
*/
.spellstross-text-card
.sp-module-title {
width: 100% !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
/* ==========================================================
DESKTOP
========================================================== */
@media (min-width: 992px) {
.spellstross-text-card-grid {
grid-template-columns:
repeat(3, minmax(0, 1fr))
!important;
}
}
/* ==========================================================
TABLET
========================================================== */
@media
(min-width: 768px)
and
(max-width: 991px) {
.spellstross-text-card-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr))
!important;
gap: 20px !important;
}
}
/* ==========================================================
MOBIL
========================================================== */
@media (max-width: 767px) {
.spellstross-texts-overview-row > .container,
.spellstross-texts-overview-row .container {
padding-left: 16px !important;
padding-right: 16px !important;
}
.spellstross-text-card-grid {
grid-template-columns:
1fr !important;
gap: 16px !important;
}
}
/* SPELLSTROSS TEXTS WIDE RESPONSIVE 20260826 END */