/*--- custom.css | das-webstudio.de ---*/
@charset "utf-8";
@import url("../../css/fonts.css");
/*
==================================================
ROOT / VARS
==================================================
*/
/* -------------------------------------------------
Globale Design-Variablen
------------------------------------------------- */
:root{
/* -------------------------------------------------
Farben / Brand
------------------------------------------------- */
--color-accent: #e9ba37;
--accent: var(--color-accent); /* Legacy-Alias für Bestand */
--color-brand-900: #07112f;
--color-brand-800: #0e1d53;
--color-brand-700: #14283d;
--color-brand-650: #152353;
--color-brand-600: #17265b;
--color-brand-550: #1b3aa0;
--color-brand-500: #1f3650;
--color-brand-450: #2d4485;
--color-brand-400: #243b53;
--color-brand-300: #374e66;
--color-cta-500: #f97806; /* Button Orange */
--color-cta-400: #f99706; /* Button Orange heller / Hover-Basis */
--color-white: #ffffff;
--color-black: #000000;
--color-surface: #ffffff;
--color-surface-soft: #f3f5f7;
--color-surface-muted: #f4f5f7;
--color-surface-warm: #fef9f1;
--color-border: rgba(10,25,40,0.12);
--color-border-soft: rgba(10,25,40,0.08);
--color-border-strong: #dbdbdb;
--color-text: var(--color-brand-400);
--color-text-inverse: #ffffff;
/* -------------------------------------------------
Radius
------------------------------------------------- */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 18px;
--radius-2xl: 22px;
/* -------------------------------------------------
Shadows
------------------------------------------------- */
--shadow-card: 0 5px 15px rgba(0,0,0,.08);
--shadow-card-soft: 0 6px 18px rgba(0,0,0,.08);
--shadow-card-lg: 0 10px 28px rgba(0,0,0,.06);
--shadow-panel: 0 10px 30px rgba(0,0,0,.12);
/* -------------------------------------------------
Motion
------------------------------------------------- */
--transition-fast: .25s ease;
--transition-base: .35s ease;
--transition-slow: .6s ease-out;
/* -------------------------------------------------
Dekorative Linien
------------------------------------------------- */
--line-w: clamp(60px, 12vw, 150px);
--line-w-sm: clamp(60px, 12vw, 110px);
--line-h: 3px;
--line-h-sm: 2px;
/* -------------------------------------------------
Layout
------------------------------------------------- */
--hero-height: 90vh; /* Höhe für Body-Gradient */
--container-max: 1400px; /* globales Max-Width */
--container-pad-x: 36px; /* Standard-Container Padding */
--container-pad-x-sm: 20px; /* Padding <= 767.98px */
--footer-space-y: 2.5rem; /* Footer Standard-Abstand */
/* Header-Padding (Default = L/XL) */
--header-pad-y: clamp(14px, 2vw, 22px);
--header-pad-x: clamp(16px, 4vw, 36px);
/* Header-Padding im Shrink-State */
--header-pad-y-min: clamp(10px, 1.5vw, 12px);
--header-pad-x-min: clamp(14px, 3vw, 20px);
/* Logo-Box (Header-Höhe über Logo-Container) */
--logo-box-h: clamp(84px, 8vw, 130px);
--logo-box-h-min: clamp(56px, 5vw, 70px);
/* Logo-Bild */
--logo-img-h: clamp(56px, 5vw, 80px);
--logo-img-h-min: clamp(40px, 3vw, 52px);
/* -------------------------------------------------
Buttons
------------------------------------------------- */
--btn-gap: .55rem;
--btn-font-weight: 700;
--btn-radius: var(--radius-md);
--btn-pad-y: 12px;
--btn-pad-x: 16px;
--btn-pad-x-tec: 28px; /* Orange CTA: mehr Luft links/rechts */
--btn-shadow: 0 8px 20px rgba(10,25,40,.10);
--btn-shadow-hover: 0 10px 24px rgba(10,25,40,.14);
/* Orange CTA */
--btn-cta-bg-start: var(--color-cta-400);
--btn-cta-bg-end: #dc6200;
--btn-cta-border: #d36a00;
--btn-cta-text: var(--color-text);
--btn-cta-hover-bg-start: #ffab2f;
--btn-cta-hover-bg-end: #e06a00;
--btn-cta-hover-border: #d66f00;
/* Gelber Kontakt-Button */
--btn-accent-bg-start: #f0c54a;
--btn-accent-bg-end: #d7a623;
--btn-accent-border: #d2a01d;
--btn-accent-text: var(--color-text);
--btn-accent-hover-bg-start: #f3cc60;
--btn-accent-hover-bg-end: #dfad2e;
--btn-accent-hover-border: #d7a623;
}
/*
==================================================
BASICS
==================================================
*/
html body { background: transparent; }
/* -------------------------------------------------
Global: Modultitel in allen T4-Sektionen
------------------------------------------------- */
/* .module-title: Standard-T4 Modultitel (inkl. gelber Linie) */
div[id*="t4-section-"] .module-title{
border: 0;
padding: 0;
margin: 0 0 clamp(1.25rem, 1.2vw, 1.75rem) 0; /* EINHEITLICHER Abstand nach unten → OVERRIDE */
margin-left: clamp(12px, 2vw, 25px); /* linker Einzug (Template-Optik) */
max-width: none; /* nicht unnötig begrenzen */
/*font-size: clamp(1.45rem, 1.1vw + 1.15rem, 1.85rem);*/
font-size: clamp(0.85rem, 0.9vw + 1.15rem, 1.85rem);
line-height: 1.1;
color: var(--body-text-color);
font-weight: 400;
position: relative; /* für gelbe Linie */
display: inline-block; /* damit Linie passende Breite hat */
padding-bottom: .35rem; /* Abstand zur gelben Linie */
}
/* .module-title::after: gelbe Linie (wie im Hero) */
div[id*="t4-section-"] .module-title::after{
width: var(--line-w);
height: var(--line-h);
background-color: var(--accent);
margin-top: .6rem;
animation-delay: 0.3s; /* schneller als Hero → wirkt harmonischer */
}
/* .module-title (<=575px): mobile Typo + Einzug */
@media (max-width: 575px){
div[id*="t4-section-"] .module-title{
font-size: clamp(1.6rem, 3.2vw + 1rem, 2.05rem);
margin-bottom: 2rem;
margin-left: clamp(10px, 3vw, 18px);
}
}
/* .module-title > span: falls Template span-styling reinbringt */
div[id*="t4-section-"] .module-title > span{
display: inline;
}
/* -------------------------------------------------
Content: Article H1 (clamp, max 2.85rem, keine Abstände oben/links)
------------------------------------------------- */
#t4-main-body .t4-col.component .com-content-article .article-body > h1{
border: 0;
padding: 0;
margin: 0 0 clamp(1.25rem, 1.2vw, 1.75rem) 0 !important; /* oben 0 */
margin-left: 0 !important; /* links 0 */
padding-left: 0 !important; /* Sicherheitsnetz */
max-width: none;
font-size: clamp(2.05rem, 2.2vw + 1.15rem, 2.85rem); /* max 2.85rem */
line-height: 1.1;
color: var(--body-text-color);
font-weight: 400;
position: relative; /* für gelbe Linie */
display: inline-block; /* Linie nur unter Titelbreite */
padding-bottom: .35rem; /* Abstand zur gelben Linie */
}
#t4-main-body .t4-col.component .com-content-article .article-body > h1::after{
width: var(--line-w);
height: var(--line-h);
background-color: var(--accent);
margin-top: .6rem;
animation-delay: 0.3s;
}
/*EOF H1*/
/*Main-Body 1-Spalter*/
.item-page {
max-width: 1000px;
margin: 0 auto;
}
/* -------------------------------------------------
Global: Animationen
------------------------------------------------- */
/* hero-line: gelbe Linie aufziehen (wird global genutzt) */
@keyframes hero-line{
from{ transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* -------------------------------------------------
Global: Dekorative Linien unter Titeln
------------------------------------------------- */
/* Gemeinsame Basis für gelbe Titel-Linien */
div[id*="t4-section-"] .module-title::after,
#t4-main-body .t4-col.component .com-content-article .article-body > h1::after,
.hero-title-text::after,
.sub-hero__title::after,
.t4-offcanvas .module-title > span::after{
content: "";
display: block;
transform-origin: left;
transform: scaleX(0);
animation: hero-line 0.6s ease-out forwards;
}
/* -------------------------------------------------
Global: Card Hover + Rahmen-Effekt
------------------------------------------------- */
/* Gemeinsame Basis für Rahmen-Animationen */
#t4-section-1 .teaser-leistung__item::before,
#t4-section-1 .teaser-leistung__item::after,
.ref-card::before,
.ref-card::after{
content: "";
position: absolute;
width: 0;
height: 0;
transition: all .3s ease;
pointer-events: none;
}
/* obere linke Ecke */
#t4-section-1 .teaser-leistung__item::before,
.ref-card::before{
top: 0;
left: 0;
border-top: 1px solid var(--color-border-strong);
border-left: 1px solid var(--color-border-strong);
}
/* untere rechte Ecke */
#t4-section-1 .teaser-leistung__item::after,
.ref-card::after{
bottom: 0;
right: 0;
border-bottom: 5px solid var(--color-border-strong);
border-right: 1px solid var(--color-border-strong);
}
/* Hover/Focus: Card Lift */
#t4-section-1 .teaser-leistung__item:hover,
#t4-section-1 .teaser-leistung__item:focus-within,
.ref-card:hover,
.ref-card:focus-within{
transform: translateY(-5px);
transition: transform .3s ease;
}
/* Hover/Focus: Rahmen fährt auf */
#t4-section-1 .teaser-leistung__item:hover::before,
#t4-section-1 .teaser-leistung__item:hover::after,
#t4-section-1 .teaser-leistung__item:focus-within::before,
#t4-section-1 .teaser-leistung__item:focus-within::after,
.ref-card:hover::before,
.ref-card:hover::after,
.ref-card:focus-within::before,
.ref-card:focus-within::after{
width: 100%;
height: 100%;
border-radius: var(--radius-lg);
}
/* -------------------------------------------------
Global: Listen-Marker (Check-Kreis)
------------------------------------------------- */
/* Gemeinsame Basis für Listen mit gelbem Check-Kreis */
#t4-main-body .t4-col.component .com-content-article .article-body ul:not(.nav):not(.navbar-nav):not(.sb-services) li,
.t4-module.module.drei-spalter .tiles-3__list li{
position: relative;
padding-left: calc(18px + .7rem);
}
/* Marker */
#t4-main-body .t4-col.component .com-content-article .article-body ul:not(.nav):not(.navbar-nav):not(.sb-services) li::before,
.t4-module.module.drei-spalter .tiles-3__list li::before{
content: "\f00c";
font-family: "Font Awesome 6 Free";
font-weight: 900;
width: 18px;
height: 18px;
border-radius: 999px;
display: inline-block;
text-align: center;
line-height: 18px;
background: var(--accent);
color: var(--color-text-inverse);
font-size: .65rem;
position: absolute !important;
left: 0;
top: .55em !important;
margin-top: 0 !important;
transform: none !important;
}
/* -------------------------------------------------
Global: Modul-Teasertexte
------------------------------------------------- */
/* Gemeinsame Basis für modulare Einleitungstexte */
#t4-section-1 .teaser-leistung__teaser,
.ref-module__teaser{
margin-left: clamp(12px, 2vw, 25px);
opacity: .9;
line-height: 1.35;
letter-spacing: -0.01em;
}
/* -------------------------------------------------
Global: Weiße Card-Grundflächen
------------------------------------------------- */
/* Gemeinsame Basis für helle Content-Cards */
#t4-section-1 .teaser-leistung__item,
.ref-card,
.t4-module.module.drei-spalter .tiles-3__card,
.next-step{
background: var(--color-surface);
box-shadow: var(--shadow-card);
}
/* -------------------------------------------------
Global Container System (max-width: 1400px)
------------------------------------------------- */
/* Container: einheitliche Max-Width + horizontales Padding */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.t4-section-inner,
.hero-inner,
.header-inner,
.topbar-inner,
.section2-madein__container{
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--container-pad-x);
padding-right: var(--container-pad-x);
}
/* Container (<=767.98px): engeres Padding */
@media (max-width: 767.98px){
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.t4-section-inner,
.hero-inner,
.header-inner,
.topbar-inner,
.section2-madein__container{
padding-left: var(--container-pad-x-sm);
padding-right: var(--container-pad-x-sm);
}
}
/*
==================================================
HTML / BODY
==================================================
*/
/* html, body: volle Höhe */
html, body{ min-height: 100%; }
/* body::before: fixer Neutral-Grau Verlauf */
body::before{
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background: linear-gradient(
180deg,
#e3e5e8 0%,
#f4f5f7 calc(var(--hero-height) * 0.66),
#f4f5f7 100%
);
}
/* T4 Wrapper: keine Rahmen / transparenter Content */
.t4-wrapper{ border-width: 0; }
.t4-content{ background-color: transparent; }
/*
==================================================
HEADER (Topbar + Header)
==================================================
*/
/* -------------------------------------------------
Sticky Stage
------------------------------------------------- */
/* .header-stage: Sticky-Container über Topbar + Header */
.header-stage{
position: sticky;
top: 0;
z-index: 1200;
}
/* -------------------------------------------------
TOPBAR
------------------------------------------------- */
/* .topbar: obere Info-Leiste */
.topbar{
background: linear-gradient(180deg, var(--color-brand-600) 0%, var(--color-brand-450) 100%);
font-size: 0.85rem;
color: rgba(255,255,255,0.9);
}
/* .topbar-inner: Flex-Layout */
.topbar-inner{
min-height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
}
/* .topbar-left/.topbar-right: Gruppen */
.topbar-left,
.topbar-right{
display: flex;
align-items: center;
gap: 20px;
}
/* .topbar-left .dot: gelbe Doppelpunkte */
.topbar-left .dot{
position: relative;
width: 6px;
height: 6px;
background: var(--accent);
border-radius: 50%;
margin-right: 14px;
}
.topbar-left .dot::after{
content: "";
position: absolute;
left: 10px;
top: 0;
width: 6px;
height: 6px;
background: var(--accent);
border-radius: 50%;
}
/* .topbar-left .sep: Separator-Punkte */
.topbar-left .sep{
color: var(--accent);
font-size: 2em;
line-height: 1;
margin: 0 8px;
}
/* .topbar a: Links */
.topbar a{
color: rgba(255,255,255,0.9);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.topbar a:hover{ color: var(--color-text-inverse); }
/* .topbar i: Icons */
.topbar i{
color: var(--accent);
font-size: 0.9em;
}
/* Mobile: topbar-left ausblenden <=767.98px */
@media (max-width: 767.98px){
.topbar-left{ display: none !important; }
}
/* -------------------------------------------------
HEADER MAIN
------------------------------------------------- */
/* .header-main: Hintergrund + Shadow */
.header-main{
background: rgba(255,255,255,0.97);
box-shadow: 0 8px 22px rgba(0,0,0,0.06);
transition: box-shadow 0.4s ease;
}
/* .header-inner: Layout + responsive Padding */
.header-inner{
padding: var(--header-pad-y) var(--header-pad-x);
display: flex;
justify-content: space-between;
align-items: center;
transition: padding .4s ease;
}
/* -------------------------------------------------
LOGO
------------------------------------------------- */
/* .header-logo: Logo-Container (steuert Header-Höhe) */
.header-logo{
transition: height 1s;
height: var(--logo-box-h);
display: flex;
align-items: center;
}
/* .header-logo img: Logo-Bild (skalierend) */
.header-logo img{
height: var(--logo-img-h);
width: auto;
max-height: 100%;
display: block;
transition: height 1s;
transform-origin: left center;
}
/* Shrink-States: body.min UND .not-at-top (beide nutzbar) */
body.min .header-inner{
padding: var(--header-pad-y-min) var(--header-pad-x-min);
}
body.min .header-logo,
.not-at-top .header-logo{
height: var(--logo-box-h-min);
}
body.min .header-logo img,
.not-at-top .header-logo img{
height: var(--logo-img-h-min);
}
/* XS: Logo + Padding deutlich kleiner */
@media (max-width: 575.98px){
.header-inner{
padding: 10px 14px !important;
}
body.min .header-inner{
padding: 6px 12px !important;
}
.header-logo{
height: clamp(48px, 12vw, 68px) !important;
}
/*.header-logo img{
height: clamp(28px, 9vw, 44px) !important;
width: auto;
max-height: 100%;
display: block;
}
*/
.header-logo img{
height: clamp(28px, 9vw, 44px) !important;
}
body.min .header-logo,
.not-at-top .header-logo{
height: clamp(40px, 10vw, 56px) !important;
}
body.min .header-logo img,
.not-at-top .header-logo img{
height: clamp(24px, 7.5vw, 36px) !important;
}
}
/* S: etwas größer als XS */
@media (min-width: 576px) and (max-width: 767.98px){
:root{
--logo-box-h: clamp(68px, 12vw, 92px);
--logo-box-h-min: clamp(52px, 8vw, 66px);
--logo-img-h: clamp(44px, 8vw, 62px);
--logo-img-h-min: clamp(36px, 6vw, 50px);
}
}
/* M: leicht kompakter als Desktop */
@media (min-width: 768px) and (max-width: 991.98px){
:root{
--logo-box-h: clamp(78px, 9vw, 110px);
--logo-img-h: clamp(52px, 6vw, 74px);
}
}
/* -------------------------------------------------
Navigation (Template-Compatibility)
------------------------------------------------- */
/* .nav-item .nav-link span: Zeilenhöhe normalisieren */
.nav-item .nav-link span{
line-height: normal;
}
/* .t4-megamenu: Nav Padding */
.t4-megamenu .navbar-nav>li>a,
.t4-megamenu .navbar-nav>li>.nav-link{
height: inherit;
padding: 0 18px;
}
/*
==================================================
HERO
==================================================
*/
/* -------------------------------------------------
Grundcontainer
------------------------------------------------- */
/* .hero-home: Card-Container im Headerbereich */
.hero-home{
background: var(--color-surface);
border-radius: 0 0 var(--radius-xl) var(--radius-xl);
box-shadow: var(--shadow-card-soft);
padding: 4rem 2rem 3.5rem;
}
/* .hero-inner: Innenabstand (überschreibt Container-Padding bewusst) */
.hero-inner{
padding: 0 2rem;
}
/* -------------------------------------------------
Typografie + Schreibanimation
------------------------------------------------- */
/* .hero-title: Headline */
.hero-title,
.hero-title *{
font-family: "Poppins", "Open Sans", Arial, sans-serif;
font-synthesis: none;
}
.hero-title{
font-size: clamp(0.8rem, 3vw, 3rem);
font-weight: 500;
line-height: 1.5;
margin: 0 0 1.2rem;
color: var(--body-text-color);
}
/* .hero-title-text: Schreibmaschinen-Effekt (ohne Cursor) */
.hero-title-text{
display: inline-block;
width: 0;
overflow: hidden;
white-space: nowrap;
font-family: inherit;
font-weight: inherit;
font-synthesis: none;
animation: hero-type 0.8s steps(42, end) forwards;
}
/* .hero-title-text::after: gelbe Linie */
.hero-title-text::after{
width: var(--line-w);
height: var(--line-h);
background-color: var(--accent);
margin-top: 0.6rem;
animation-delay: 1.1s;
}
/* .hero-subline: Subheadline */
.hero-subline,
.hero-subline *{
font-family: "Open Sans", Arial, sans-serif;
font-synthesis: none;
}
.hero-subline{
line-height: 1.6;
max-width: 800px;
margin-bottom: 2rem;
}
/* .hero-divider: Trenner */
.hero-divider{
width: 100%;
height: 2px;
background-color: #d6d8db;
border: none;
margin: 1.8rem 0 1.6rem;
}
/* -------------------------------------------------
Features
------------------------------------------------- */
/* .hero-features: Feature-Liste */
.hero-features,
.hero-features *{
font-family: "Open Sans", Arial, sans-serif;
font-synthesis: none;
}
.hero-features{
display: flex;
flex-wrap: wrap;
align-items: center;
line-height: 1.7;
gap: 0.25rem;
}
/* .hero-features .sep: gelbe Dots */
.hero-features .sep,
.hero-features .sep-first{
color: var(--accent);
font-size: 2em;
line-height: 1;
margin: 0 8px;
}
.hero-features .sep-first{ margin: 0 8px 0 0; }
/* -------------------------------------------------
Animationen (Hero)
------------------------------------------------- */
/* hero-type: Typewriter */
@keyframes hero-type{
from{ width: 0; }
to{ width: 100%; }
}
/* -------------------------------------------------
Responsive
------------------------------------------------- */
@media (max-width: 768px){
.hero-home{
padding: 3rem 0 2.5rem 0 !important;
}
.hero-subline br{ display: none; }
.hero-features{
flex-direction: column;
align-items: flex-start;
}
.hero-features .sep,
.hero-features .sep-first{ display: none; }
}
/*
==================================================
SECTION 1 — TEASER LEISTUNG
==================================================
*/
/* #t4-section-1: Abstand oben/unten */
#t4-section-1{
margin-bottom: clamp(1.5rem, 3vw, 3rem);
}
@media (max-width: 575px){
#t4-section-1{
margin-bottom: clamp(1.25rem, 5vw, 2.25rem);
}
}
/* #t4-section-1 .module-title: näher an Subline */
#t4-section-1 .module-title{ margin-bottom: .35rem; }
/* .teaser-leistung__header: Subline bündig mit Überschrift */
#t4-section-1 .teaser-leistung__header{
margin: 0 0 clamp(1.25rem, 1.2vw, 1.75rem);
padding-left: 0;
}
#t4-section-1 .teaser-leistung__teaser{
max-width: 85ch;
font-size: clamp(1rem, 0.9vw + 0.95rem, 1.25rem);
}
/* .teaser-leistung__grid: Cards-Grid */
#t4-section-1 .teaser-leistung__grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
@media (max-width: 1199.98px){
#t4-section-1 .teaser-leistung__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px){
#t4-section-1 .teaser-leistung__grid{ grid-template-columns: 1fr; }
}
/* .teaser-leistung__item: Card */
#t4-section-1 .teaser-leistung__item{
border-radius: var(--radius-lg);
overflow: visible;
position: relative;
min-height: clamp(200px, 16vw, 270px);
height: 100%;
transition: transform .3s ease;
}
/* .teaser-leistung__item::before/::after: z-index für globalen Rahmen-Effekt */
#t4-section-1 .teaser-leistung__item::before,
#t4-section-1 .teaser-leistung__item::after{
z-index: 5;
}
/* .teaser-leistung__link: ganze Card klickbar */
#t4-section-1 .teaser-leistung__link{
display: flex;
flex-direction: column;
height: 100%;
padding: 24px 24px 36px;
text-decoration: none;
color: inherit;
position: relative;
z-index: 2;
border-radius: var(--radius-lg);
overflow: hidden;
transition: color .25s ease;
}
/* .teaser-leistung__link::before: BG-Overlay */
#t4-section-1 .teaser-leistung__link::before{
content: "";
position: absolute;
inset: 0;
background: var(--color-surface-warm);
opacity: 0;
transform: scale(0.985);
transition: opacity .3s ease, transform .3s ease;
z-index: 0;
}
#t4-section-1 .teaser-leistung__item:hover .teaser-leistung__link::before,
#t4-section-1 .teaser-leistung__item:focus-within .teaser-leistung__link::before{
opacity: 1;
transform: scale(1);
}
/* .teaser-leistung__head: Icon links, Text rechts */
#t4-section-1 .teaser-leistung__head{
display: flex;
gap: 16px;
align-items: flex-start;
flex: 1;
position: relative;
z-index: 1;
}
/* .teaser-leistung__icon: feste Icon-Box (50x50) */
#t4-section-1 .teaser-leistung__icon{
flex: 0 0 50px;
width: 50px;
height: 50px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
/* .teaser-leistung__icon img: Icon füllt 50x50 */
#t4-section-1 .teaser-leistung__icon img{
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
display: block;
margin: 0;
object-fit: contain;
}
/* .teaser-leistung__intro > h2: Headline */
#t4-section-1 .teaser-leistung__intro > h2{
margin: 0 0 10px;
font-size: clamp(1.25rem, 0.9vw + 1.05rem, 1.5rem);
line-height: 1.1;
color: var(--body-text-color);
font-weight: 400;
letter-spacing: -0.01em;
}
/* .teaser-leistung__intro > p: Subline (3-Zeilen Clamp) */
#t4-section-1 .teaser-leistung__intro > p{
margin: 0;
font-size: clamp(0.95rem, 0.2vw + 0.9rem, 1rem);
line-height: 1.55;
max-width: 46ch;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
/* .teaser-leistung__intro *: Links/Tags ohne Unterstreichung */
#t4-section-1 .teaser-leistung__intro *{ text-decoration: none; }
/*
==================================================
SECTION 2 — PARALLAX (Made in Sachsen)
==================================================
*/
/* -------------------------------------------------
Desktop: Grundlayout + Parallax
------------------------------------------------- */
/* .section2-madein: Parallax-Hintergrund (nur Desktop) */
#t4-section-2 .section2-madein{
position: relative;
min-height: 100vh;
background-image: var(--s2-bg) !important;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
/* .section2-madein__bg: Hintergrund-Ebene */
#t4-section-2 .section2-madein__bg{
position: absolute;
inset: 0;
z-index: 1;
}
/* .section2-madein__shade: Overlay */
#t4-section-2 .section2-madein__shade{
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.06));
z-index: 2;
}
/* .section2-madein__container: Inhalt */
#t4-section-2 .section2-madein__container{
position: relative;
z-index: 3;
display: flex;
justify-content: flex-end;
align-items: center;
height: 100%;
padding: clamp(1.25rem, 3vw, 3rem);
}
/* .section2-madein__panel: Panel */
#t4-section-2 .section2-madein__panel{
width: 100%;
max-width: 540px !important;
margin-right: clamp(0rem, 2vw, 2rem);
background: rgba(255,255,255,.70);
backdrop-filter: blur(2px);
border-radius: var(--radius-lg);
padding: clamp(1.1rem, 2vw, 1.75rem);
box-shadow: var(--shadow-panel);
text-align: center;
}
/* .section2-madein__badge: Siegel */
#t4-section-2 .section2-madein__badge{
display: flex;
justify-content: center;
margin-bottom: .9rem;
}
#t4-section-2 .section2-madein__badge img{
width: clamp(140px, 18vw, 210px);
height: auto;
}
/* .section2-madein__content h2: Headline */
#t4-section-2 .section2-madein__content h2{
margin-bottom: .6rem;
font-size: clamp(1rem, 0.5vw + 0.9rem, 1.3rem);
font-weight: 500;
line-height: 1.22;
color: var(--color-brand-700) !important;
}
/* .section2-madein__content p: Text */
#t4-section-2 .section2-madein__content p{
margin: 0 0 .65rem;
line-height: 1.55;
color: var(--color-brand-700) !important;
}
/* .section2-madein__cta: CTA-Spacer */
#t4-section-2 .section2-madein__cta{
margin-top: 1rem;
}
/* -------------------------------------------------
Mobile / <=1300.98px: Kein Parallax, BG-Bild oben
------------------------------------------------- */
@media (max-width: 1300.98px){
#t4-section-2{ background: var(--color-brand-700) !important; }
#t4-section-2 .section2-madein{
background-attachment: scroll !important;
background-image: none !important;
min-height: auto;
padding: 0;
}
/* .section2-madein__bg-mobile: Vollbreites BG-Bild */
#t4-section-2 .section2-madein__bg-mobile{
width: 100%;
height: 260px;
background-image: var(--s2-bg);
background-size: cover;
background-position: center;
}
#t4-section-2 .section2-madein__shade{ display: none !important; }
#t4-section-2 .section2-madein__container{
justify-content: center;
padding: 1.5rem 1rem;
}
#t4-section-2 .section2-madein__panel{
background: rgba(255,255,255,.75) !important;
backdrop-filter: none;
margin-right: 0;
max-width: 100% !important;
box-shadow: 0 8px 25px rgba(0,0,0,.12);
}
}
/*
==================================================
SECTION 3 — REFERENZEN
==================================================
*/
/* .ref-module__header: Teaser-Header (aus Modul-Notiz) */
.ref-module__header{ margin: 0 0 12px; }
/* .ref-module__teaser: Teaser-Text */
.ref-module__teaser{
margin-top: 0;
margin-bottom: 0;
max-width: 65ch;
font-size: clamp(1.25rem, 0.9vw + 1.05rem, 1.5rem);
}
/* .ref-grid: Grid Layout */
.ref-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
max-width: var(--container-max);
margin: 0 auto;
padding: 20px 0;
}
/* .ref-card: Card Grundzustand + Animationsstart */
.ref-card{
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
opacity: 0;
transform: translateX(60px);
transition: opacity .6s ease-out, transform .6s ease-out;
display: flex;
flex-direction: column;
min-height: clamp(340px, 26vw, 420px);
}
/* .ref-animate-in: sichtbar (wird per JS/AOS gesetzt) */
.ref-card.ref-animate-in{
opacity: 1;
transform: translateX(0);
}
/* .ref-card__link: Card voll klickbar */
.ref-card__link{
display: block;
height: 100%;
color: inherit;
text-decoration: none;
}
/* .ref-card::before/::after: z-index für globalen Rahmen-Effekt */
.ref-card::before,
.ref-card::after{
z-index: 4;
}
/* .ref-card__image: Bild-Bühne */
.ref-card__image{
width: 100%;
aspect-ratio: 1 / 1;
position: relative;
overflow: hidden;
flex-shrink: 0;
}
/* .ref-img-default/.ref-img-hover: Bildzustände */
.ref-img-default,
.ref-img-hover{
width: 100%;
height: 100%;
position: absolute;
inset: 0;
}
.ref-img-default{
object-fit: cover;
z-index: 1;
opacity: 1;
transition: opacity .45s ease;
}
.ref-img-hover{
object-fit: contain;
background: var(--color-surface);
z-index: 2;
opacity: 0;
transform: scale(0.96);
transition: opacity .45s ease, transform .45s ease;
}
.ref-card:hover .ref-img-hover{
opacity: 1;
transform: scale(1);
}
.ref-card:hover .ref-img-default{ opacity: 0; }
/* .ref-card__content: Text-Inhalt */
.ref-card__content{
position: relative;
z-index: 3;
padding: 24px 26px 28px;
flex-grow: 1;
}
/* .ref-card__title: Titel */
.ref-title,
.ref-card__title{
margin: 0 0 12px;
font-size: clamp(1.1rem, 0.6vw + 0.9rem, 1.2rem);
line-height: 1.12;
color: var(--body-text-color);
font-weight: 400;
letter-spacing: -0.01em;
}
/* .ref-card__subtitle: Untertitel */
.ref-info,
.ref-card__subtitle{
margin: 0;
font-size: clamp(0.9rem, 0.2vw + 0.85rem, 1rem);
line-height: 1.55;
color: var(--body-text-color);
}
/* Responsive Grid */
@media (max-width: 991px){
.ref-grid{
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
@media (max-width: 767.98px){
.ref-grid{
grid-template-columns: 1fr;
gap: 22px;
}
.ref-card{
min-height: clamp(300px, 60vw, 380px);
}
}
/*
==================================================
SECTION 4 — TECHNIKEN (Joomla & WordPress)
==================================================
*/
/* .tech-section: Wrapper mit Background */
.tech-section{
position: relative;
width: 100%;
min-height: 700px;
border-top: 1px solid var(--color-text-inverse);
background-image: var(--tech-bg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
padding: clamp(4rem, 8vw, 9rem) 0;
}
/* .tech-container: Panel links */
.tech-container{
position: relative;
z-index: 2;
display: flex;
justify-content: flex-start;
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding-left: clamp(1rem, 4vw, 4rem);
}
/* .tech-panel: Inhaltspanel */
.tech-panel{
width: 100%;
max-width: 540px;
background: rgba(2, 10, 28, 0.9);
border-radius: var(--radius-lg);
padding: clamp(1.4rem, 2vw, 2rem);
box-shadow: 0 10px 30px rgba(0,0,0,.18);
backdrop-filter: blur(2px);
text-align: center;
}
/* .tech-logos: Logos Reihe */
.tech-logos{
display: flex;
align-items: center;
justify-content: center;
gap: 26px;
margin-bottom: 1rem;
}
/* .tech-logo: Logo-Assets */
.tech-logo{
height: auto;
max-height: 85px;
width: auto;
}
/* .tech-title: Headline */
.tech-title{
margin: 2rem 0 1rem 0;
font-size: clamp(1.1rem, 0.9vw + 1rem, 1.3rem);
line-height: 1.15;
font-weight: 500;
color: var(--color-text-inverse);
text-align: center;
}
/* .tech-text: Fließtext */
.tech-text{
margin: 0 0 1.05rem;
font-size: clamp(0.9rem, 0.2vw + 0.85rem, 1rem);
line-height: 1.55;
color: rgba(255,255,255,0.92);
}
/* .custom-btn-tec im Panel: Abstand */
.tech-panel .custom-btn-tec{ margin-top: 0.8rem; }
/* Responsive (Tablet) */
@media (max-width: 991px){
.tech-panel{
max-width: 90%;
margin: 0 auto;
}
.tech-container{
justify-content: center;
padding-left: 0;
}
}
/* Responsive (XS) */
@media (max-width: 575px){
.tech-logo{ max-height: 70px; }
.tech-title{ font-size: 1.2rem; }
}
/*
==================================================
SECTION 5 — ÜBER MICH
==================================================
*/
/* #t4-section-5: Full-Width Background + Padding */
#t4-section-5{
background: var(--color-surface);
width: 100%;
padding: clamp(3rem, 6vw, 6rem) 0;
}
/* .about-wrapper: Grid auf 1200px */
#t4-section-5 .about-wrapper{
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(1rem, 3vw, 2rem);
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 3vw, 4rem);
}
/* .about-image img: Bild */
#t4-section-5 .about-image img{
width: 100%;
display: block;
border-radius: var(--radius-lg);
object-fit: cover;
}
/* .about-text: Textblock (mit BG-Stamp) */
#t4-section-5 .about-text{
font-size: clamp(0.95rem, 0.4vw + 0.9rem, 1.05rem);
line-height: 1.65;
color: var(--color-text);
position: relative;
padding-top: clamp(1.2rem, 2.2vw, 2.4rem);
}
/* .about-text h4: Headline */
#t4-section-5 .about-text h4{
margin: 0 0 1.9rem 0;
font-size: clamp(1.15rem, 0.6vw + 1.05rem, 1.55rem);
font-weight: 500;
color: var(--color-text);
letter-spacing: 0.2px;
}
/* .about-text::before: BG-Stamp (est.2004) */
#t4-section-5 .about-text::before{
content: "";
position: absolute;
top: 0;
right: 0;
width: clamp(95px, 11vw, 160px);
height: clamp(95px, 11vw, 160px);
background: url("/images/est.2004.png") no-repeat center / contain;
opacity: 0.1;
pointer-events: none;
z-index: 0;
}
/* .about-text > *: Text über Stamp */
#t4-section-5 .about-text > *{
position: relative;
z-index: 1;
}
/* .about-text p: Absatzabstand */
#t4-section-5 .about-text p{ margin-bottom: 1.4rem; }
/* Responsive (<=768px): 1-Spalte, zentriert */
@media (max-width: 768px){
#t4-section-5 .about-wrapper{
grid-template-columns: 1fr;
text-align: center;
}
#t4-section-5 .about-image img{
max-width: 360px;
margin: 0 auto;
}
#t4-section-5 .about-text{ padding-top: 1rem; }
#t4-section-5 .about-text::before{
width: 110px;
height: 110px;
opacity: 0.06;
top: 0;
right: 0;
}
}
/* XS (<=420px): Stamp ausblenden */
@media (max-width: 420px){
#t4-section-5 .about-text::before{ display: none; }
}
/*
==================================================
BUTTONS (Readmore / Custom)
==================================================
*/
/* -------------------------------------------------
Grundstil: Readmore + .custom-btn + .custom-btn-tec
------------------------------------------------- */
/* Gemeinsame Basis */
.readmore .btn.btn-readmore,
.btn.btn-readmore,
.custom-btn,
.custom-btn-tec{
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--btn-gap);
box-sizing: border-box;
font-family: var(--body-font-family);
font-size: 1rem;
line-height: 1.4;
text-decoration: none;
cursor: pointer;
border: 1px solid transparent;
transition:
background var(--transition-base),
color var(--transition-base),
border-color var(--transition-base),
transform var(--transition-fast),
box-shadow var(--transition-fast);
}
/* Standard-Padding / Radius für Readmore + .custom-btn */
.readmore .btn.btn-readmore,
.btn.btn-readmore,
.custom-btn{
padding: 0.50rem 3rem;
border-radius: var(--radius-sm);
font-weight: 400;
}
/* Icon rechts (FontAwesome) */
.readmore .btn.btn-readmore::after,
.btn.btn-readmore::after,
.custom-btn::after,
.custom-btn-tec::after{
content: "\f061";
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-left: 0.75rem;
display: inline-block;
line-height: 1;
color: inherit;
transition: transform var(--transition-fast);
}
/* Standard-Buttons: Text/Icon weiß */
.readmore .btn.btn-readmore,
.btn.btn-readmore,
.custom-btn{
color: var(--color-text-inverse);
}
/* Hover: Standard-Buttons */
.readmore .btn.btn-readmore:hover,
.readmore .btn.btn-readmore:focus,
.btn.btn-readmore:hover,
.btn.btn-readmore:focus,
.custom-btn:hover,
.custom-btn:focus{
background: rgba(55, 78, 102, 0.85);
border-color: var(--color-brand-700);
color: var(--color-text-inverse);
}
/* Icon-Shift: alle Button-Typen */
.readmore .btn.btn-readmore:hover::after,
.readmore .btn.btn-readmore:focus::after,
.btn.btn-readmore:hover::after,
.btn.btn-readmore:focus::after,
.custom-btn:hover::after,
.custom-btn:focus::after,
.custom-btn-tec:hover::after,
.custom-btn-tec:focus::after{
transform: translateX(4px);
}
/* -------------------------------------------------
CUSTOM BUTTON – TECH (orange Standardvariante)
------------------------------------------------- */
.custom-btn-tec{
--btn-bg-start: var(--btn-cta-bg-start);
--btn-bg-end: var(--btn-cta-bg-end);
--btn-border-color: var(--btn-cta-border);
--btn-text-color: var(--btn-cta-text);
--btn-bg-start-hover: var(--btn-cta-hover-bg-start);
--btn-bg-end-hover: var(--btn-cta-hover-bg-end);
--btn-border-color-hover: var(--btn-cta-hover-border);
padding: var(--btn-pad-y) var(--btn-pad-x-tec);
border-radius: var(--btn-radius);
border-color: var(--btn-border-color);
background: linear-gradient(
to bottom right,
var(--btn-bg-start),
var(--btn-bg-end)
);
color: var(--btn-text-color);
font-weight: var(--btn-font-weight);
box-shadow: var(--btn-shadow);
}
/* Hover / Focus */
.custom-btn-tec:hover,
.custom-btn-tec:focus{
background: linear-gradient(
to bottom right,
var(--btn-bg-start-hover),
var(--btn-bg-end-hover)
);
border-color: var(--btn-border-color-hover);
color: var(--btn-text-color);
box-shadow: var(--btn-shadow-hover);
}
/* Optional: klarer Tastaturfokus */
.custom-btn-tec:focus-visible,
.readmore .btn.btn-readmore:focus-visible,
.btn.btn-readmore:focus-visible,
.custom-btn:focus-visible{
outline: 2px solid rgba(36, 59, 83, 0.22);
outline-offset: 2px;
}
/* -------------------------------------------------
Kontaktbox: gelbe Button-Variante
------------------------------------------------- */
#t4-main-body .sb-contact-box .custom-btn-tec{
--btn-bg-start: var(--btn-accent-bg-start);
--btn-bg-end: var(--btn-accent-bg-end);
--btn-border-color: var(--btn-accent-border);
--btn-text-color: var(--btn-accent-text);
--btn-bg-start-hover: var(--btn-accent-hover-bg-start);
--btn-bg-end-hover: var(--btn-accent-hover-bg-end);
--btn-border-color-hover: var(--btn-accent-hover-border);
width: 100%;
margin-top: 14px;
padding-left: var(--btn-pad-x);
padding-right: var(--btn-pad-x);
}
/* =====================================================
FOOTER – Zeile 1 (#t4-footer-info)
Module: footinfo-1 | footinfo-2 | footnav-1
- Accent-Farbe (gelb) zentral als CSS-Variable
- Trennlinien: global + „full-bleed“ im Responsive
===================================================== */
#t4-footer-info{
--accent: var(--color-accent);
}
/* Grundabstand nach oben (Zeile 1) */
.t4-footer-info > div{
padding-top: var(--footer-space-y);
}
/* -----------------------------------------------------
FOOTINFO-1: Logo + Claim
----------------------------------------------------- */
/* Logo mit Luft nach unten */
#t4-footer-info .t4-col.footinfo-1 img{
display:block;
margin-bottom: clamp(1rem, 1.6vw, 1.6rem);
}
/* Claim-Text (kleiner, gut lesbar) */
#t4-footer-info .footer-claim{
font-size: clamp(0.78rem, 0.22vw + 0.74rem, 0.8rem);
line-height: 1.65;
max-width: 62ch;
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
overflow-wrap: break-word;
word-break: normal;
}
/* „Topbar“-Dots (2 gelbe Punkte) vor dem Claim */
#t4-footer-info .footer-claim .dot{
display:inline-block;
position:relative;
width:18px;
height:10px;
margin-right:10px;
transform: translateY(1px);
}
#t4-footer-info .footer-claim .dot::before,
#t4-footer-info .footer-claim .dot::after{
content:"";
position:absolute;
top:50%;
width:7px;
height:7px;
border-radius:50%;
background: var(--accent);
transform: translateY(-50%);
}
#t4-footer-info .footer-claim .dot::before{ left:0; }
#t4-footer-info .footer-claim .dot::after { right:0; }
/* -----------------------------------------------------
FOOTINFO-2 / FOOTNAV-1: Überschriften + Kontaktblöcke
----------------------------------------------------- */
/* Überschriften („Anschrift“, „Kontakt“) */
#t4-footer-info .footer-head{
font-weight: 600;
margin: 0 0 .75rem 0;
}
/* Icons (FontAwesome) im gelben Accent */
#t4-footer-info .footer-kontakt i{
color: var(--accent);
margin-right: .75rem;
}
/* Anschrift: Icon vorne, Folgezeilen bündig (trotz
) */
#t4-footer-info .t4-col.footinfo-2 .footer-kontakt{
position:relative;
padding-left: 1.85rem; /* Einzug für Zeilenumbruch */
}
#t4-footer-info .t4-col.footinfo-2 .footer-kontakt i.fa-house{
position:absolute;
left:0;
top:.15em;
margin-right:0;
}
#t4-footer-info .t4-col.footnav-1 .footer-kontakt a:hover i{
color: var(--color-text-inverse);
}
/* -----------------------------------------------------
DESKTOP (>=992px)
- Anschrift/Kontakt-Spalten rechts ausrichten,
Inhalte innerhalb der Box linksbündig
----------------------------------------------------- */
@media (min-width: 992px){
#t4-footer-info .t4-col.footinfo-2,
#t4-footer-info .t4-col.footnav-1{
display:flex;
justify-content:flex-end;
align-items:flex-start;
}
#t4-footer-info .t4-col.footinfo-2 .custom > div,
#t4-footer-info .t4-col.footnav-1 .custom > div{
text-align:left;
}
}
/* -----------------------------------------------------
RESPONSIVE (<992px)
- Layout stapelt: erst Logo/Claim, dann Trennlinie,
danach Anschrift + Kontakt (mit Luft nach oben)
- Trennlinie full-bleed (100vw) wie die globale border-top
----------------------------------------------------- */
@media (max-width: 991.98px){
/* Reihenfolge: Linie soll wirklich zwischen Block 1 und Block 2 liegen */
#t4-footer-info .t4-row.row{ position:relative; overflow:visible; }
#t4-footer-info .t4-col.footinfo-1{ order:1; }
#t4-footer-info .t4-col.footinfo-2{ order:3; }
#t4-footer-info .t4-col.footnav-1 { order:4; }
/* Abstand unter dem ersten Block (Logo/Claim) */
#t4-footer-info .t4-col.footinfo-1{
margin-bottom: clamp(2.2rem, 5vw, 3rem);
}
/* Anschrift + Kontakt links starten und Abstand nach oben */
#t4-footer-info .t4-col.footinfo-2,
#t4-footer-info .t4-col.footnav-1{
text-align:left;
padding-top: clamp(1.3rem, 3.5vw, 2rem);
}
/* Full-bleed Trennlinie als Flex-Item im Row-Wrapper */
#t4-footer-info .t4-row.row::before{
content:"";
order:2;
flex: 0 0 auto; /* kein flex-basis:100% -> sonst „eingekürzt“ */
display:block;
height:0;
border-top: 1px solid rgba(255,255,255,.07);
width:100vw; /* full-bleed */
margin-left: calc(50% - 50vw); /* auf Viewport zentrieren */
}
/* Sicherheitsnetz: alte Column-Linie deaktivieren (falls noch vorhanden) */
#t4-footer-info .t4-col.footinfo-2::before{
content:none !important;
display:none !important;
}
}
/* -----------------------------------------------------
<576px
- zusätzliche Trennlinie zwischen Anschrift & Kontakt
----------------------------------------------------- */
@media (max-width: 575.98px){
#t4-footer-info .t4-col.footnav-1{
position:relative;
margin-top: clamp(1.4rem, 3.5vw, 2rem);
padding-top: clamp(1.3rem, 3.5vw, 2rem);
}
#t4-footer-info .t4-col.footnav-1::before{
content:"";
position:absolute;
left:0;
top:0;
width:100vw;
margin-left: calc(50% - 50vw);
border-top: 1px solid rgba(255,255,255,.07);
}
}
/* Claim ausblenden (optisch gewollt) */
@media (max-width: 1199.98px){
#t4-footer-info .footer-claim{ display:none; }
}
/* =====================================================
FOOTER – Zeile 2 (footnav-2 links / footnav-3 rechts)
- Links links: Copyright + Impressum + Datenschutz
- Rechts: Navigation als „Inline“-Menü mit Dots
===================================================== */
/* Grundabstand nach unten (Zeile 2) */
.t4-footer > div,
.t4-footnav > div{
padding-bottom: var(--footer-space-y);
}
/* Beide Spalten als Flex, vertikal sauber ausgerichtet */
.t4-col.footnav-2,
.t4-col.footnav-3{
--accent: var(--color-accent);
--footer-row2-color: var(--color-text-inverse);
--footer-row2-line-height: 1.4;
display:flex !important;
align-items:center !important;
padding-top:0 !important;
padding-bottom:0 !important;
}
/* -----------------------------------------------------
Gemeinsame Footer-Separatoren / Dots
----------------------------------------------------- */
/* Basis für Separator-Dots im Footer */
.t4-col.footnav-2 .sep,
.t4-col.footnav-3 h3::after,
.t4-col.footnav-3 .module-title::after,
.t4-col.footnav-3 .footer-head::after,
.t4-col.footnav-3 ul > li + li::before{
color: var(--accent);
font-size: 1.6em;
line-height: 1;
display: inline-block;
vertical-align: middle;
}
/* -----------------------------------------------------
FOOTNAV-2: Copyright + Links
----------------------------------------------------- */
.t4-col.footnav-2 .foot-cnt{
margin:0 !important;
line-height: var(--footer-row2-line-height) !important;
}
.t4-col.footnav-2 .foot-link{
color: var(--color-text-inverse);
text-decoration:none;
opacity:1;
transition: color .22s ease;
}
.t4-col.footnav-2 .foot-link:hover{
color: var(--accent);
text-decoration:none;
opacity:1;
}
/* Separator-Dot (wie Topbar) */
.t4-col.footnav-2 .sep{
margin: 0 .4rem;
transform: translateY(-0.08em);
}
/* =====================================================
FOOTNAV-3: Navigation (Desktop rechtsbündig)
===================================================== */
/* Spalte rechts ausrichten */
.t4-col.footnav-3{
justify-content:flex-end !important;
}
/* Modulwrapper „neutralisieren“ und rechts ausrichten */
.t4-col.footnav-3 .t4-module,
.t4-col.footnav-3 .module,
.t4-col.footnav-3 .moduletable{
width:100%;
display:flex !important;
flex-wrap:wrap;
align-items:center !important;
justify-content:flex-end !important;
margin:0 !important;
padding:0 !important;
}
/* Basiseintrag (z.B. „Websites“) bewusst NICHT fett */
.t4-col.footnav-3 h3,
.t4-col.footnav-3 .module-title,
.t4-col.footnav-3 .footer-head,
.t4-col.footnav-3 h3 *{
margin:0 !important;
padding:0 !important;
font-weight:400 !important;
color: var(--footer-row2-color) !important;
line-height: var(--footer-row2-line-height) !important;
display:inline-flex;
align-items:center;
}
/* Dot nach Basiseintrag */
.t4-col.footnav-3 h3::after,
.t4-col.footnav-3 .module-title::after,
.t4-col.footnav-3 .footer-head::after{
content:"·";
margin: 0 .55rem;
transform: translateY(-0.08em);
}
/* Menü als Inline-Liste */
.t4-col.footnav-3 ul,
.t4-col.footnav-3 ul.menu,
.t4-col.footnav-3 ul.nav,
.t4-col.footnav-3 ul.mod-menu{
list-style:none !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
flex-direction:row !important;
flex-wrap:wrap !important;
align-items:center !important;
justify-content:flex-end !important;
line-height:1.4 !important;
}
.t4-col.footnav-3 ul > li{
display:inline-flex !important;
align-items:center !important;
margin:0 !important;
padding:0 !important;
}
/* Dots zwischen Menüpunkten */
.t4-col.footnav-3 ul > li + li::before{
content:"·";
margin: 0 .55rem;
}
/* Link-Styles + Hover */
.t4-col.footnav-3 ul > li > a{
color: var(--footer-row2-color) !important;
text-decoration:none !important;
font-weight:400 !important;
opacity:1 !important;
transition: color .22s ease;
}
.t4-col.footnav-3 ul > li > a:hover{
color: var(--accent) !important;
text-decoration:none !important;
opacity:1 !important;
}
/* =====================================================
FOOTNAV-3: Label-Override (nur im Footer)
"Suchmaschinenoptimierung" -> "SEO"
===================================================== */
/* Variante A: über Menu-Item-Klasse (empfohlen, wenn stabil) */
.t4-col.footnav-3 li.item-117 > a{
position: relative;
}
/* Originaltext visuell ausblenden (bleibt im DOM) */
.t4-col.footnav-3 li.item-117 > a .menu-item-title{
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Ersatztext */
.t4-col.footnav-3 li.item-117 > a::after{
content: "SEO";
font-weight: inherit;
color: inherit;
}
/* Variante B (optional): über URL targeten – nur nutzen, wenn item-117 nicht passt */
/*
.t4-col.footnav-3 a[href^="/leistungen/suchmaschinenoptimierung"]{
position: relative;
}
.t4-col.footnav-3 a[href^="/leistungen/suchmaschinenoptimierung"] .menu-item-title{
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.t4-col.footnav-3 a[href^="/leistungen/suchmaschinenoptimierung"]::after{
content:"SEO";
font-weight: inherit;
color: inherit;
}
*/
/* =====================================================
Optische Ausblendungen (gewollt)
===================================================== */
@media (max-width: 1199.98px){
.t4-col.footnav-3{ display:none !important; }
}
@media (max-width: 1399.98px){
.t4-col.footnav-2 .foot-sitename{ display:none; }
}
/*
==================================================
OFF-CANVAS
==================================================
*/
/* -------------------------------------------------
Burger Button
------------------------------------------------- */
/* #triggerButton: Hintergrund fix */
#triggerButton.t4-offcanvas-toggle,
#triggerButton.t4-offcanvas-toggle:hover,
#triggerButton.t4-offcanvas-toggle:focus,
#triggerButton.t4-offcanvas-toggle:active{
background: var(--color-brand-650) !important;
border: 1px solid var(--color-brand-700) !important;
opacity: 1 !important;
filter: none !important;
}
/* Burger Icon: Hover gelb */
#triggerButton.t4-offcanvas-toggle .fa-bars{
color: var(--color-text-inverse) !important;
transition: color 0.35s ease !important;
}
#triggerButton.t4-offcanvas-toggle:hover .fa-bars,
#triggerButton.t4-offcanvas-toggle:focus .fa-bars{
color: var(--accent) !important;
}
/* Offcanvas Body Padding */
.t4-offcanvas .t4-off-canvas-body{
padding: 3rem 0 0 0 !important;
}
/* -------------------------------------------------
Off-Canvas Header
------------------------------------------------- */
/* Header Background */
.t4-offcanvas .t4-off-canvas-header{
background-color: var(--oc-panel-bg);
}
/* Header: Text ersetzen + gelber Punkt */
.t4-off-canvas-header a{
position: relative;
padding-left: 18px;
color: var(--color-text-inverse) !important;
font-size: 0 !important; /* Originaltext ausblenden */
line-height: 0 !important;
}
.t4-off-canvas-header a::before{
content: "";
position: absolute;
left: 0;
top: 60%;
transform: translateY(-50%);
width: var(--oc-header-dot-size);
height: var(--oc-header-dot-size);
border-radius: 50%;
background: var(--accent);
}
.t4-off-canvas-header a::after{
content: "das-webstudio.de";
font-size: 16px;
line-height: 1.2;
font-weight: 600;
color: inherit;
}
/* Close Icon */
.t4-offcanvas .t4-off-canvas-header .close span{
color: var(--oc-close-color);
}
/* -------------------------------------------------
Module-Titel "Navigation" + Linie
------------------------------------------------- */
/* .t4-offcanvas .module-title: Titel im Offcanvas */
.t4-offcanvas .module-title{
color: var(--color-text-inverse);
font-size: 18px;
line-height: 1.2;
font-weight: 400;
}
/* Linie unter "Navigation" */
.t4-offcanvas .module-title > span::after{
width: var(--line-w-sm);
height: var(--line-h-sm);
background-color: var(--accent);
margin-top: .6rem;
animation-delay: 1.1s;
}
/* -------------------------------------------------
Offcanvas Hintergrund + Body Card
------------------------------------------------- */
.t4-offcanvas{
--oc-line-1: #000;
--oc-line-2: #202e3c;
--oc-panel-bg: #050a21;
--oc-panel-border: #838fa4;
--oc-close-color: #838fa4;
--oc-shell-bg: #0e1d53;
--oc-actions-grad-a: #4b5366;
--oc-actions-grad-b: #272c3b;
--oc-actions-border: rgba(255,255,255,.10);
--oc-actions-divider: rgba(255,255,255,.10);
--oc-actions-icon: rgba(240,180,0,.96);
--oc-submenu-indent: 35px;
--oc-submenu-offset-l: 40px;
--oc-submenu-offset-r: -70px;
--oc-header-dot-size: 8px;
background:
radial-gradient(900px 600px at 12% 10%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%),
radial-gradient(900px 700px at 90% 95%, rgba(0,0,0,.22), rgba(0,0,0,0) 55%),
linear-gradient(135deg, var(--oc-shell-bg) 0%, var(--oc-shell-bg) 100%) !important;
}
.t4-offcanvas .t4-off-canvas-body.menu-item-drill{
margin: 1rem 0.7rem 0 0.5rem;
background:
radial-gradient(900px 420px at 12% 8%, rgba(255,255,255,.10), rgba(255,255,255,0) 58%),
linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 22%),
var(--oc-panel-bg) !important;
border: 1px solid var(--oc-panel-border) !important;
border-radius: var(--radius-2xl) !important;
overflow: hidden;
}
/* -------------------------------------------------
Offcanvas: gemeinsame Textfarbe für Menüpunkte
------------------------------------------------- */
.t4-offcanvas .t4-off-canvas-body .navbar .nav-link,
.t4-offcanvas .t4-off-canvas-body .navbar .separator,
.t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .dropdown-item,
.t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .nav-link{
color: var(--color-text-inverse);
}
/* -------------------------------------------------
Ebene 1: Links + Punkt + Hover
------------------------------------------------- */
/* Active (Ebene 1) */
.t4-offcanvas .t4-off-canvas-body .navbar .nav-item.active > .nav-link,
.t4-offcanvas .t4-off-canvas-body .navbar .nav-item.active > .separator{
color: var(--accent);
}
/* Basis Links */
.t4-offcanvas .t4-off-canvas-body .navbar .nav-link,
.t4-offcanvas .t4-off-canvas-body .navbar .separator{
position: relative;
padding: .625rem 0 .875rem 1.25rem; /* links Platz für Punkt */
}
/* -------------------------------------------------
Offcanvas: gemeinsame Akzent-Punkte
------------------------------------------------- */
.t4-offcanvas .t4-off-canvas-body .navbar .nav-link::before,
.t4-offcanvas .t4-off-canvas-body .navbar .separator::before,
#off-canvas-left-push .navbar.drilldown-effect .dropdown-menu .menu-item-title::before{
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
}
/* -------------------------------------------------
Offcanvas: gemeinsamer Hover/Focus-State
------------------------------------------------- */
.t4-offcanvas .t4-off-canvas-body .navbar .nav-link:hover,
.t4-offcanvas .t4-off-canvas-body .navbar .nav-link:focus,
.t4-offcanvas .t4-off-canvas-body .navbar .separator:hover,
.t4-offcanvas .t4-off-canvas-body .navbar .separator:focus,
.t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .dropdown-item:hover,
.t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .dropdown-item:focus,
.t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .nav-link:hover,
.t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .nav-link:focus{
color: var(--accent) !important;
}
/* -------------------------------------------------
Offcanvas: gemeinsame Linien für Menü-Items
------------------------------------------------- */
/* Basis für Linien unter Menüeinträgen in Ebene 1 + 2 */
.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .navbar-nav .nav-item::before,
.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .navbar-nav .nav-item::after,
.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .dropdown-menu > li.nav-item::before,
.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .dropdown-menu > li.nav-item::after{
content: "";
position: absolute;
left: 0;
right: 0;
}
.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .navbar-nav .nav-item::before,
.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .dropdown-menu > li.nav-item::before{
bottom: 2px;
height: 1px;
background: var(--oc-line-1);
}
.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .navbar-nav .nav-item::after,
.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .dropdown-menu > li.nav-item::after{
bottom: 0;
height: 2px;
background: var(--oc-line-2);
}
/* -------------------------------------------------
Ebene 1: Linien an
------------------------------------------------- */
.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .navbar-nav .nav-item{
position: relative;
}
/* -------------------------------------------------
Submenü (Ebene 2)
------------------------------------------------- */
/* 2. Ebene einrücken */
.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect ul.dropdown-menu{
padding-left: var(--oc-submenu-indent) !important;
}
/* Back-Link (← Leistungen) */
.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .sub-menu-back{
background-color: transparent !important;
border: none !important;
color: var(--accent);
margin-left: 10px;
margin-right: 0;
transition: color 0.35s ease !important;
}
.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .sub-menu-back i{
color: currentColor !important;
margin-right: 1rem;
font-size: 12px;
transition: color 0.35s ease !important;
}
.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .sub-menu-back:hover,
.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .sub-menu-back:focus{
color: var(--color-text-inverse) !important;
}
/* Ebene 2: Linien + Framework-Border neutralisieren + Geometrie */
.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .dropdown-menu > li.nav-item{
position: relative;
padding-bottom: 3px;
border-bottom: 0 !important;
margin-left: var(--oc-submenu-offset-l);
margin-right: var(--oc-submenu-offset-r);
}
/*Sub Pfeil rechts*/
.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .navbar-nav .btn-toggle::after{
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-top: 2px solid var(--accent);
border-right: 2px solid var(--accent);
transform: rotate(45deg);
box-sizing: border-box;
}
/* Ebene 2: Linienfarben explizit wie Ebene 1 */
.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .dropdown-menu > li.nav-item::before{
background: var(--oc-line-1) !important;
}
.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .dropdown-menu > li.nav-item::after{
background: var(--oc-line-2) !important;
}
/* Ebene 2: Linkbasis + visuelle Neutralisierung */
.t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .dropdown-item,
.t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu .nav-link{
background: transparent !important;
border: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
font-weight: 600;
padding: 0.3rem 0 0.4rem 0;
transition: color .35s ease !important;
}
/* Ebene 2: Punkt direkt am Text */
#off-canvas-left-push .navbar.drilldown-effect .dropdown-menu .menu-item-title{
position: relative !important;
display: inline-block !important;
padding-left: 1.25rem !important;
}
/* -------------------------------------------------
FIX: Aktiver Link in Ebene 2 GELB + Punkt korrekt
(Joomla nutzt oft .current statt .active)
------------------------------------------------- */
#off-canvas-left-push .navbar.drilldown-effect .dropdown-menu > li.nav-item.current > a,
#off-canvas-left-push .navbar.drilldown-effect .dropdown-menu > li.nav-item.active > a{
color: var(--accent) !important;
}
/* -------------------------------------------------
Label-Override (OFF-CANVAS)
"Suchmaschinenoptimierung" -> "SEO & Inhalt"
(bleibt sauber in Linie + Punkt, weil am menu-item-title)
------------------------------------------------- */
#off-canvas-left-push li.item-117 .menu-item-title{
font-size: 0 !important; /* Originaltext ausblenden */
}
#off-canvas-left-push li.item-117 .menu-item-title::after{
content: "SEO & Inhalt" !important;
font-size: 1rem !important; /* passt i.d.R. zu den restlichen Einträgen */
font-weight: inherit !important;
line-height: inherit !important;
color: inherit !important; /* wird gelb, wenn der Link aktiv ist */
display: inline-block !important;
}
/* Toggle (Pfeil rechts) transparent */
.t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle,
.t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle:hover,
.t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle:focus,
.t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle:active,
.t4-offcanvas .t4-off-canvas-body .navbar .btn-toggle:focus-visible{
background-color: transparent !important;
background: transparent !important;
box-shadow: none !important;
}
/* -------------------------------------------------
Offcanvas Actions Bar (Short-Icons)
------------------------------------------------- */
/* Mod126: Innenabstand */
#off-canvas-left-push #Mod126 .module-inner{
padding: 2rem var(--container-pad-x) 0 var(--container-pad-x) !important;
}
/* .oc-actions-bar: Grid */
#off-canvas-left-push .oc-actions-bar{
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
padding: 6px 0 !important;
border-radius: var(--radius-2xl) !important;
border: 1px solid var(--oc-actions-border) !important;
backdrop-filter: blur(14px) saturate(120%) !important;
-webkit-backdrop-filter: blur(14px) saturate(120%) !important;
background:
radial-gradient(900px 600px at 12% 10%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%),
radial-gradient(900px 700px at 90% 95%, rgba(0,0,0,.22), rgba(0,0,0,0) 55%),
linear-gradient(135deg, var(--oc-actions-grad-a) 0%, var(--oc-actions-grad-b) 100%) !important;
}
/* .oc-action: einzelner Action-Link */
#off-canvas-left-push .oc-action{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
padding: 6px 0 !important;
color: var(--color-text-inverse) !important;
text-decoration: none !important;
font-weight: 600 !important;
letter-spacing: 0.05rem;
border-right: 1px solid var(--oc-actions-divider) !important;
}
#off-canvas-left-push .oc-action:last-child{ border-right: 0 !important; }
#off-canvas-left-push .oc-action i{
color: var(--oc-actions-icon) !important;
font-size: 20px !important;
}
#off-canvas-left-push .oc-action span{ font-size: 10px !important; }
/*
==================================================
BACK TO TOP
==================================================
*/
/* #back-to-top: Button (animiert via .is-visible) */
#back-to-top{
--bt-dur: 0.75s;
--bt-ease: cubic-bezier(.16,1,.3,1);
--bt-shift: 16px;
background-color: rgba(0,0,0,.5);
border-radius: 5px;
position: fixed;
right: 36px;
bottom: calc(36px + env(safe-area-inset-bottom) + var(--vv-bottom, 0px));
width: 50px;
height: 50px;
display: flex !important;
align-items: center;
justify-content: center;
z-index: 9999;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
opacity: 0;
visibility: hidden;
transform: translateY(var(--bt-shift));
pointer-events: none;
will-change: opacity, transform;
transition:
opacity var(--bt-dur) var(--bt-ease),
transform var(--bt-dur) var(--bt-ease),
background-color 0.35s ease,
visibility 0s linear var(--bt-dur);
}
/* Sichtbar */
#back-to-top.is-visible{
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition:
opacity var(--bt-dur) var(--bt-ease),
transform var(--bt-dur) var(--bt-ease),
background-color 0.35s ease,
visibility 0s;
}
/* Hover/Focus */
#back-to-top.is-visible:hover,
#back-to-top.is-visible:focus,
#back-to-top.is-visible:active{
background-color: var(--color-primary);
outline: none;
transform: translateY(0);
}
/* Icon */
#back-to-top i{
color: var(--color-text-inverse);
font-size: 22px;
line-height: 1;
display: block;
}
/* Fokus-Ring */
#back-to-top:focus-visible{
box-shadow: 0 0 0 4px rgba(233,186,55,0.45);
}
/* XS */
@media (max-width: 575.98px){
#back-to-top{
right: 16px;
bottom: calc(16px + env(safe-area-inset-bottom) + var(--vv-bottom, 0px));
width: 46px;
height: 46px;
--bt-shift: 14px;
}
#back-to-top i{ font-size: 20px; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
#back-to-top{
transition: none;
transform: none;
}
}
/*
==================================================
SECTION 7 — SUB-HERO (Contentseiten)
==================================================
*/
/* #t4-section-7.sub-hero: Wrapper */
#t4-section-7.sub-hero{
position: relative;
min-height: 560px;
display: flex;
align-items: center;
overflow: hidden;
padding: 0;
}
/* .sub-hero__bg: Background */
.sub-hero__bg{
position: absolute;
inset: 0;
z-index: 1;
}
.sub-hero__bg img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: right center;
}
/* .sub-hero__overlay: Overlay (mobil dunkler) */
.sub-hero__overlay{
position: absolute;
inset: 0;
z-index: 2;
background: transparent;
pointer-events: none;
}
@media (max-width: 991.98px){
.sub-hero__overlay{
background: rgba(8, 18, 51, 0.72);
}
}
/* .sub-hero__inner: Content */
.sub-hero__inner{
position: relative;
z-index: 3;
max-width: var(--container-max);
margin: 0 auto;
padding-block: clamp(64px, 7vw, 96px);
color: var(--color-text-inverse) !important;
text-align: left;
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* -------------------------------------------------
Breadcrumb
------------------------------------------------- */
.sub-hero__inner nav[aria-label="Breadcrumbs"]{
margin: 0 0 16px 0;
position: relative;
z-index: 5;
}
.sub-hero__inner nav[aria-label="Breadcrumbs"] .mod-breadcrumbs.breadcrumb{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
font-size: clamp(0.85rem, 0.95vw, 0.95rem);
line-height: 1.4;
color: rgba(255,255,255,0.92);
}
.sub-hero__inner nav[aria-label="Breadcrumbs"] .mod-breadcrumbs.breadcrumb > li{
display: inline-flex;
align-items: center;
margin: 0;
padding: 0;
}
.sub-hero__inner nav[aria-label="Breadcrumbs"] .mod-breadcrumbs.breadcrumb > li:first-child{
margin-right: .35rem;
}
/* Bootstrap "/" entfernen */
.sub-hero__inner nav[aria-label="Breadcrumbs"] .breadcrumb-item + .breadcrumb-item::before{
content: none !important;
}
/* Links */
.sub-hero__inner nav[aria-label="Breadcrumbs"] a{
color: rgba(255,255,255,0.92);
text-decoration: none;
font-weight: inherit !important;
}
.sub-hero__inner nav[aria-label="Breadcrumbs"] a:hover{
color: var(--color-text-inverse);
text-decoration: underline;
text-underline-offset: 3px;
}
/* Active: nur gelb */
.sub-hero__inner nav[aria-label="Breadcrumbs"] .breadcrumb-item.active,
.sub-hero__inner nav[aria-label="Breadcrumbs"] .breadcrumb-item.active a{
color: var(--accent) !important;
font-weight: inherit !important;
}
/* Divider: Container */
.sub-hero__inner nav[aria-label="Breadcrumbs"] .mod-breadcrumbs__item .divider{
display: inline-flex !important;
align-items: center;
justify-content: center;
font-size: inherit !important;
line-height: 1;
}
/* Alte Punkt-Grafik entfernen */
.sub-hero__inner nav[aria-label="Breadcrumbs"] .mod-breadcrumbs__item .divider::before{
content: "" !important;
}
/* FA Angle Right */
.sub-hero__inner nav[aria-label="Breadcrumbs"] .mod-breadcrumbs__item .divider::after{
content: "\f105";
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: var(--accent);
font-size: 0.7rem;
line-height: 1;
display: inline-block;
vertical-align: middle;
margin-left: 0.85rem;
}
@media (max-width: 767.98px){
.sub-hero__inner nav[aria-label="Breadcrumbs"] .mod-breadcrumbs.breadcrumb > li:first-child{
display: none !important;
}
}
/* -------------------------------------------------
TYPO
------------------------------------------------- */
/* .sub-hero__title: Titel */
.sub-hero__title{
color: var(--color-text-inverse) !important;
font-weight: 400 !important;
letter-spacing: -0.02em;
line-height: 1.08;
font-size: clamp(2.2rem, 3.4vw, 3.5rem);
margin: 0 0 16px 0;
}
/* .sub-hero__title::after: gelbe Linie */
.sub-hero__title::after{
width: var(--line-w);
height: var(--line-h);
background: var(--accent);
margin-top: .6rem;
animation-delay: .25s;
}
/* .sub-hero__subtitle: Subline */
.sub-hero__subtitle{
max-width: clamp(420px, 36vw, 560px);
font-size: clamp(1.05rem, 1.8vw, 3rem) !important;
line-height: 1.55;
color: rgba(255,255,255,0.92) !important;
margin: 0 0 28px 0;
}
/* Button spacing */
.sub-hero__inner .custom-btn-tec--hero{ margin-top: 4px; }
/* Responsive */
@media (max-width: 900px){
#t4-section-7.sub-hero{ min-height: 520px; }
}
@media (max-width: 560px){
#t4-section-7.sub-hero{ min-height: 500px; }
.sub-hero__bg img{ object-position: center; }
}
/* FIX: Mobile-Lücke nur im Banner */
@media (max-width: 991.98px){
#t4-banner > .t4-module.module{ margin-top: 0 !important; }
}
/*### EOF BANNER CONTENT-SITES ###*/
/*### MAIN BODY (components | sidebar-r) ###*/
/* ==================================================
MAIN BODY (T4) – Layout: component 8 | sidebar-r 4
================================================== */
#t4-main-body{
background: var(--color-surface-soft);
padding: clamp(28px, 4vw, 56px) 0;
--card-radius: var(--radius-xl);
--card-border: 1px solid var(--color-border-soft);
--card-shadow: var(--shadow-card-lg);
--gutter-x: 28px;
--gutter-y: 28px;
--component-pad: clamp(20px, 2.5vw, 36px);
--sb-pad: 22px;
--sb-gap: 26px;
--sb-grad-a:#f6f6fa;
--sb-grad-b:#efeff4;
--menu-radius: var(--radius-lg);
}
/* Bootstrap gutter */
#t4-main-body .t4-row.row{
--bs-gutter-x: var(--gutter-x);
--bs-gutter-y: var(--gutter-y);
--half-gutter: calc(var(--bs-gutter-x) * .5);
}
/* ==================================================
FIX: verhindert Wrap 1201–1224px
Ursache: Sidebar wird ab 1200px auf 396px gefixt
Lösung: im #t4-main-body wieder Bootstrap 8/4 erzwingen
================================================== */
@media (min-width: 992px){
/* Component wieder sauber 8/12 */
#t4-main-body .t4-col.component{
flex: 0 0 auto !important;
width: 66.6666667% !important;
max-width: none !important;
}
/* Sidebar wieder sauber 4/12 */
#t4-main-body .t4-col.sidebar-r{
flex: 0 0 auto !important;
width: 33.3333333% !important;
max-width: none !important; /* killt max-width:396px */
}
}
/* extra Absicherung: falls die 396px-Regel erst bei 1200 feuert */
@media (min-width: 1200px){
#t4-main-body .t4-col.sidebar-r{
flex-basis: auto !important;
max-width: none !important;
width: 33.3333333% !important;
}
}
/* --------------------------------------------------
Main Body: gemeinsame Shell für Component + Sidebar
-------------------------------------------------- */
#t4-main-body .t4-col.component,
#t4-main-body .t4-col.sidebar-r{
position: relative;
z-index: 0;
}
#t4-main-body .t4-col.component::before,
#t4-main-body .t4-col.sidebar-r::before{
content:"";
position:absolute;
inset:0;
left: var(--half-gutter);
right: var(--half-gutter);
border: var(--card-border);
box-shadow: var(--card-shadow);
pointer-events:none;
z-index:0;
}
#t4-main-body .t4-col.component > *,
#t4-main-body .t4-col.sidebar-r > *{
position:relative;
z-index:1;
}
/* --------------------------------------------------
COMPONENT (col-8): Card über Pseudo (Gutter sichtbar)
-------------------------------------------------- */
#t4-main-body .t4-col.component{
padding-top: var(--component-pad);
padding-bottom: var(--component-pad);
padding-left: calc(var(--half-gutter) + var(--component-pad));
padding-right: calc(var(--half-gutter) + var(--component-pad));
}
#t4-main-body .t4-col.component::before{
background: var(--color-surface);
border-radius: var(--card-radius);
}
/* --------------------------------------------------
SIDEBAR-R (col-4): Verlauf liegt auf der Spalte (unten ohne Radius)
-------------------------------------------------- */
#t4-main-body .t4-col.sidebar-r{
padding-top: var(--sb-pad);
padding-bottom: var(--sb-pad);
padding-left: calc(var(--half-gutter) + var(--sb-pad));
padding-right: calc(var(--half-gutter) + var(--sb-pad));
}
#t4-main-body .t4-col.sidebar-r::before{
background: linear-gradient(180deg, var(--sb-grad-a) 0%, var(--sb-grad-b) 100%);
border-radius: var(--card-radius) var(--card-radius) 0 0;
}
/* --------------------------------------------------
Sidebar: gemeinsame Navbar-Basis
-------------------------------------------------- */
#t4-main-body .t4-col.sidebar-r nav.navbar{
display:block !important;
background:transparent !important;
}
/* Sidebar Wrapper transparent halten, damit Verlauf sichtbar bleibt */
#t4-main-body .t4-col.sidebar-r .module-inner,
#t4-main-body .t4-col.sidebar-r .module-ct,
#t4-main-body .t4-col.sidebar-r .custom{
background: transparent !important;
}
/* --------------------------------------------------
Sidebar: gemeinsame Neutralisierung
-------------------------------------------------- */
#t4-main-body .t4-col.sidebar-r .t4-module.module:not(.sb-contact),
#t4-main-body .sb-contact-card{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Module spacing & neutralisieren (WICHTIG: sb-contact AUSNEHMEN) */
#t4-main-body .t4-col.sidebar-r .t4-module.module:not(.sb-contact){
border-radius: 0 !important;
padding: 0 !important;
margin: 0 0 var(--sb-gap) 0 !important;
}
#t4-main-body .t4-col.sidebar-r .t4-module.module:not(.sb-contact):last-child{
margin-bottom: 0 !important;
}
/* --------------------------------------------------
Sidebar: gemeinsame Titelbasis
-------------------------------------------------- */
#t4-main-body .t4-col.sidebar-r .module-title,
#t4-main-body .t4-col.sidebar-r .t4-module.sb-kurz .sb-kurz__title{
margin: 0 0 14px 0;
color: var(--color-text);
}
/* Modultitel: 400 */
#t4-main-body .t4-col.sidebar-r .module-title{
font-weight: 400 !important;
}
/* ==================================================
KONTAKT (t4-module.module.sb-contact)
- Full-bleed weiß innerhalb Sidebar
- Radius + Linie links/oben/rechts
================================================== */
#t4-main-body .t4-col.sidebar-r .t4-module.module.sb-contact{
margin-left: calc(-1 * var(--sb-pad)) !important;
margin-right: calc(-1 * var(--sb-pad)) !important;
margin-top: calc(-1 * var(--sb-pad)) !important;
margin-bottom: var(--sb-gap) !important;
background: var(--color-surface) !important;
padding: var(--sb-pad) !important;
border-radius: var(--card-radius) var(--card-radius) 0 0 !important;
border-left: var(--card-border) !important;
border-right: var(--card-border) !important;
border-top: var(--card-border) !important;
border-bottom: 0 !important;
overflow: hidden;
}
/* Innenwrapper im Kontakt: keine Extra-Card */
#t4-main-body .sb-contact-card{
padding: 0 !important;
margin: 0 !important;
}
/* Blauer Kasten: oben+unten Radius */
#t4-main-body .sb-contact-box{
background:
/* Schatten links oben */
radial-gradient(700px 500px at 12% 10%,
rgba(0,0,0,.28) 0%,
rgba(0,0,0,0) 60%),
/* Highlight rechts unten */
radial-gradient(900px 700px at 90% 95%,
rgba(255,255,255,.14) 0%,
rgba(255,255,255,0) 55%),
/* Basis: dunkel -> hell (links oben -> rechts unten) */
linear-gradient(to bottom right,
#07112f 0%,
#0e1d53 45%,
#1b3aa0 100%) !important;
border-radius: 12px;
padding: 18px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
#t4-main-body .sb-contact-row{
display:flex;
align-items:center;
gap:10px;
padding:6px 0;
color: rgba(255,255,255,0.92);
text-decoration:none;
font-weight:600;
line-height:1.35;
}
#t4-main-body .sb-contact-row i{
color: var(--accent);
width: 18px;
text-align:center;
}
/* ALTER BUTTON GELB DIREKTER KONTAKT */
/*#t4-main-body .sb-contact-box .custom-btn-tec{
width:100%;
margin-top:14px;
display:flex;
align-items:center;
justify-content:center;
background: var(--accent) !important;
color: var(--color-text) !important;
border-radius:10px;
padding:12px 16px;
font-weight:700;
text-decoration:none;
}*/
/* ==================================================
KURZ ERKLÄRT
================================================== */
/* Dein Titel im Freitext */
#t4-main-body .t4-col.sidebar-r .t4-module.sb-kurz .sb-kurz__title{
font-weight: 400;
font-size: clamp(1.15rem, 1.1vw, 1.35rem);
line-height: 1.25;
}
/* Bullets */
#t4-main-body .t4-col.sidebar-r .t4-module.sb-kurz .sb-bullets{
list-style:none;
margin:0;
padding:0;
display:grid;
gap:12px;
}
#t4-main-body .t4-col.sidebar-r .t4-module.sb-kurz .sb-bullets li{
display:flex;
align-items:flex-start;
gap:10px;
color: var(--color-text);
font-size: clamp(0.98rem, 0.95vw, 1.06rem);
line-height: 1.55;
}
#t4-main-body .t4-col.sidebar-r .t4-module.sb-kurz .sb-bullets li::before{
content:"";
width:8px;
height:8px;
border-radius:999px;
background: var(--accent);
flex:0 0 8px;
margin-top: .45em; /* sauber zur ersten Textzeile */
}
/* Trennlinie */
#t4-main-body .t4-col.sidebar-r .t4-module.sb-kurz .sb-hr{
border:0;
height:1px;
background: rgba(10,25,40,0.30); /* bei Bedarf auf 0.30 erhöhen */
margin: 18px 0 22px;
}
/* ==================================================
WEITERE LEISTUNGEN (ul.sb-services)
-> stabil gegen Bootstrap (nav/navbar-nav/dropdown-item)
================================================== */
/* Navbar padding kill */
#t4-main-body .t4-col.sidebar-r .module-ct > nav.navbar{
padding:0 !important;
margin:0 !important;
}
/* Active/current ausblenden */
/* WICHTIG: das hier NICHT mehr global ausblenden, sonst verschwindet der Parent ebenfalls */
/* #t4-main-body ul.sb-services > li.active { display:none !important; } */
#t4-main-body ul.sb-services > li.current,
#t4-main-body ul.sb-services > li:has(> a[aria-current="page"]),
#t4-main-body ul.sb-services > li:has(> a[aria-current="true"]),
#t4-main-body ul.sb-services > li:has(> a.dropdown-item.active[aria-current]){
display:none !important;
}
/* --------------------------------------------------
Sidebar: gemeinsame Basis für sb-services
-------------------------------------------------- */
#t4-main-body ul.sb-services,
#t4-main-body ul.sb-services > li{
display: block !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* UL als Panel (vollbreit innerhalb Sidebar-Padding) */
#t4-main-body ul.sb-services{
list-style:none !important;
background: var(--color-surface);
border: var(--card-border);
border-radius: var(--menu-radius);
box-shadow: 0 8px 18px rgba(0,0,0,0.06);
overflow:hidden;
}
#t4-main-body ul.sb-services > li > a.dropdown-item{
display:flex !important;
align-items:center;
justify-content:space-between;
width:100% !important;
padding: 12px 18px 12px 44px !important;
background: transparent !important;
color: var(--color-text) !important;
text-decoration:none !important;
font-weight:600 !important;
position:relative;
}
#t4-main-body ul.sb-services > li + li > a.dropdown-item{
border-top: 1px solid var(--color-border-soft);
}
#t4-main-body ul.sb-services > li > a.dropdown-item::before{
content:"";
position:absolute;
left:18px;
top:50%;
transform: translateY(-50%);
width:4px;
height:18px;
border-radius:3px;
background: var(--accent);
}
#t4-main-body ul.sb-services > li > a.dropdown-item::after{
content:"\f105";
font-family:"Font Awesome 6 Free";
font-weight:900;
color:#7b8fa6;
margin-left:12px;
}
#t4-main-body ul.sb-services > li > a.dropdown-item:hover{
background: var(--color-surface-soft) !important;
}
/* --------------------------------------------------
Responsive
-------------------------------------------------- */
@media (max-width: 991.98px){
#t4-main-body{
padding: 28px 0 40px;
--card-radius:16px;
--sb-pad:18px;
--sb-gap:22px;
--menu-radius:12px;
}
#t4-main-body .t4-row.row{
--bs-gutter-x: 22px;
--bs-gutter-y: 22px;
}
}
/* ==================================================
Sidebar-R nicht auf Component-Höhe stretchen
+ ca. 50px Abschluss unter letztem Modul
================================================== */
@media (min-width: 992px){
#t4-main-body .t4-row.row{
align-items: flex-start; /* optional, stabilisiert generell */
}
#t4-main-body .t4-col.sidebar-r{
align-self: flex-start; /* WICHTIG: beendet das Stretching */
height: auto !important;
padding-bottom: calc(var(--sb-pad) + 50px); /* ~50px nach letztem Modul */
}
}
/* ==================================================
MOBILE: Sidebar-R < 767.98px ausblenden
bis auf: "Direkter Kontakt" & "Weitere Leistungen"
================================================== */
@media (max-width: 767.98px){
/* Standard: alles in der Sidebar ausblenden */
#t4-main-body .t4-col.sidebar-r .t4-module.module{
display: none !important;
}
/* 1) Direkter Kontakt wieder einblenden */
#t4-main-body .t4-col.sidebar-r .t4-module.module.sb-contact{
display: block !important;
}
/* 2) Weitere Leistungen wieder einblenden
A) automatisch, wenn das Modul die ul.sb-services enthält (moderne Browser)
*/
#t4-main-body .t4-col.sidebar-r .t4-module.module:has(ul.sb-services){
display: block !important;
}
/* B) Fallback (falls :has nicht greift):
Gib dem "Weitere Leistungen"-Modul im Backend zusätzlich die Modulklasse: sb-services
*/
#t4-main-body .t4-col.sidebar-r .t4-module.module.sb-services{
display: block !important;
}
}
/*### EOF MAIN BODY (components | sidebar-r) ###*/
/* ==================================================
CONTENT / ARTICLE (Component) – Typo & Listen
(für den Content-Bereich im Component)
================================================== */
#t4-main-body .t4-col.component .com-content-article .article-body{
color: var(--color-text);
}
/* ------------------------------
Gemeinsame Textfarbe im Artikel
------------------------------ */
#t4-main-body .t4-col.component .com-content-article .article-body > h2:first-of-type,
#t4-main-body .t4-col.component .com-content-article .article-body h2,
#t4-main-body .t4-col.component .com-content-article .article-body h3,
#t4-main-body .t4-col.component .com-content-article .article-body h4,
#t4-main-body .t4-col.component .com-content-article .article-body h5,
#t4-main-body .t4-col.component .com-content-article .article-body h6,
#t4-main-body .t4-col.component .com-content-article .article-body p{
color: var(--color-text);
}
/* ------------------------------
Gemeinsame Gewichtung H3–H6
------------------------------ */
#t4-main-body .t4-col.component .com-content-article .article-body h3,
#t4-main-body .t4-col.component .com-content-article .article-body h4,
#t4-main-body .t4-col.component .com-content-article .article-body h5,
#t4-main-body .t4-col.component .com-content-article .article-body h6{
font-weight: 400;
}
/* ------------------------------
TOP-H2 (erstes H2 im Artikel)
- keine Punkte
- gelbe, aufziehende Linie (länger)
- clamp + weight 400
------------------------------ */
#t4-main-body .t4-col.component .com-content-article .article-body > h2:first-of-type{
font-size: clamp(1.4rem, 3.0vw, 2.2rem);
font-weight: 400;
margin: 0 0 1.2rem 0;
position: relative;
padding-bottom: .9rem;
letter-spacing: 0.2px;
background: none !important;
}
#t4-main-body .t4-col.component .com-content-article .article-body > h2:first-of-type::before{
content: none !important;
}
/* Gelbe Linie (aufziehend) */
#t4-main-body .t4-col.component .com-content-article .article-body > h2:first-of-type::after{
content:"";
position:absolute;
left:0;
bottom:0;
width: clamp(110px, 18vw, 230px);
height: 3px;
background: var(--accent);
border-radius:2px;
transform-origin:left;
transform: scaleX(0);
animation: content-line 0.65s ease-out forwards;
animation-delay: .15s;
}
@keyframes content-line{
to{ transform: scaleX(1); }
}
/* ------------------------------
Weitere H2 (ruhig/clean)
------------------------------ */
#t4-main-body .t4-col.component .com-content-article .article-body h2{
font-weight: 500;
font-size: clamp(1.2rem, 2.1vw, 1.9rem);
margin: 2.0rem 0 0.9rem;
}
#t4-main-body .t4-col.component .com-content-article .article-body h2::before{
content:none !important;
}
/* ------------------------------
H3–H6 blau + Größen
------------------------------ */
#t4-main-body .t4-col.component .com-content-article .article-body h3{
font-size: clamp(1.25rem, 1.7vw, 1.7rem);
margin: 2.0rem 0 .7rem;
}
#t4-main-body .t4-col.component .com-content-article .article-body h4{
font-size: clamp(1.12rem, 1.35vw, 1.35rem);
margin: 1.6rem 0 .6rem;
}
#t4-main-body .t4-col.component .com-content-article .article-body h5{
font-size: clamp(1.02rem, 1.15vw, 1.18rem);
margin: 1.4rem 0 .5rem;
}
#t4-main-body .t4-col.component .com-content-article .article-body h6{
font-size: clamp(.95rem, 1.05vw, 1.08rem);
margin: 1.2rem 0 .45rem;
}
/* ------------------------------
Paragraphs – kein Blocksatz, clamp
------------------------------ */
#t4-main-body .t4-col.component .com-content-article .article-body p{
text-align: left !important;
font-size: clamp(1.02rem, 1.05vw, 1.12rem);
line-height: 1.75;
margin: 0 0 1rem;
hyphens: auto;
}
/* ==================================================
LISTEN
- UL: gelber Kreis + Check (wie Screen)
- OL: gelber Kreis + Zahl
(Ausschluss: Navigationen/Sidebar-Menüs)
================================================== */
/* gemeinsame Abstände */
#t4-main-body .t4-col.component .com-content-article .article-body ul:not(.nav):not(.navbar-nav):not(.sb-services),
#t4-main-body .t4-col.component .com-content-article .article-body ol{
margin: .6rem 0 1.3rem;
padding: 0;
}
/* ------------------------------
Gemeinsame Typo für Artikel-Listen
------------------------------ */
#t4-main-body .t4-col.component .com-content-article
.article-body ul:not(.nav):not(.navbar-nav):not(.sb-services) li,
#t4-main-body .t4-col.component .com-content-article
.article-body ol li{
font-size: clamp(1.0rem, 1.0vw, 1.1rem);
line-height: 1.65;
color: var(--color-text);
margin: .55rem 0;
}
/* ------------------------------
UL – Check Icon (zuverlässig auf Textlinie)
-> wichtig: hier KEIN flex-centering am Icon, sondern line-height=height
------------------------------ */
#t4-main-body .t4-col.component .com-content-article
.article-body ul:not(.nav):not(.navbar-nav):not(.sb-services) li{
list-style:none;
}
#t4-main-body .t4-col.component .com-content-article
.article-body ul:not(.nav):not(.navbar-nav):not(.sb-services) li::before{
/* globaler Check-Kreis aus BASICS */
}
/* ------------------------------
OL – gelber Kreis mit Zahl (Counter)
-> Zahl vertikal zentriert via line-height=height
------------------------------ */
#t4-main-body .t4-col.component .com-content-article .article-body ol{
counter-reset: step;
}
#t4-main-body .t4-col.component .com-content-article .article-body ol li{
counter-increment: step;
list-style:none;
}
#t4-main-body .t4-col.component .com-content-article .article-body ol li::before{
content: counter(step);
font-family: inherit;
font-weight: 700;
width:18px;
height:18px;
border-radius:999px;
display:inline-block;
text-align:center;
line-height:18px; /* zentriert Zahl im Kreis */
background: var(--accent);
color: var(--color-text-inverse);
font-size:.75rem;
}
/* LISTEN-FIX: li nicht als Flex -> sonst werden / eigene Flex-Items */
#t4-main-body .t4-col.component .com-content-article
.article-body ul:not(.nav):not(.navbar-nav):not(.sb-services) li{
display: block !important;
}
#t4-main-body .t4-col.component .com-content-article
.article-body ol li{
display: block !important;
position: relative;
padding-left: calc(18px + .7rem); /* Kreisbreite + Abstand */
}
/* OL Kreis/Zahl absolut links */
#t4-main-body .t4-col.component .com-content-article
.article-body ol li::before{
position: absolute !important;
left: 0;
top: .55em !important; /* ggf. feinjustieren */
}
/*### EOF CONTENT Artikel ###*/
/* ===========================================================
NEXT STEP
=========================================================== */
.next-step{
border-radius: 0;
/* rechts 80px für Flucht zur Sidebar, links wie Main-Content */
padding: 22px 80px 22px 60px;
}
.next-step__row{
display:flex;
align-items:center;
gap: 22px;
}
.next-step__copy{
flex: 1 1 auto;
min-width: 0;
}
/* --- TITLE: Margin-Bombe killen + Größe wie „Betreuung“ --- */
.next-step__title{
margin: 0 0 10px !important; /* entfernt dein 4rem sicher */
padding: 0 0 10px !important; /* Raum für Linie */
font-size: clamp(1.25rem, 1.7vw, 1.7rem) !important;
font-weight: 400 !important;
line-height: 1.12;
letter-spacing: -0.01em;
position: relative;
display: inline-block; /* Linie nur unter Titelbreite */
}
/* --- aufziehende Linie --- */
.next-step__title::after{
content:"";
position:absolute;
left:0;
bottom:0;
height: var(--line-h);
width: 96px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform .6s ease;
}
/* AOS hängt .aos-animate an das Element */
.next-step__title.aos-animate::after{
transform: scaleX(1);
}
/* Text bündig mit Titel */
.next-step__text{
margin: 0 !important;
max-width: 85ch;
line-height: 1.55;
}
/* Button rechts */
.next-step .custom-btn-tec{
flex: 0 0 auto;
white-space: nowrap;
}
/* Tablet: weniger Luft rechts */
@media (max-width: 1199.98px){
.next-step{ padding-right: 40px; }
}
/* Mobile: normaler Rand + Button unter Text */
@media (max-width: 767.98px){
.next-step{
padding: 18px 18px;
}
.next-step__row{
flex-direction: column;
align-items: stretch;
gap: 14px;
}
.next-step .custom-btn-tec{
width: 100%;
text-align: center;
}
}
/*** EOF NEXT STEP ***/
/* ===========================================================
3-SPALTER – Module: .t4-module.module.drei-spalter
=========================================================== */
/* --- Abstand zum vorherigen Modul (Primär) --- */
div[id*="t4-section-"] .t4-module.module.drei-spalter .module-inner{
padding-top: clamp(2.25rem, 3.2vw, 3.25rem) !important;
}
/* Falls dein Template statt .module-inner eher .module-ct nutzt */
div[id*="t4-section-"] .t4-module.module.drei-spalter .module-ct{
padding-top: clamp(2.25rem, 3.2vw, 3.25rem) !important;
}
/* --- Ultra-Fallback: Spacer (falls Wrapper Padding irgendwo überschrieben wird) --- */
div[id*="t4-section-"] .t4-module.module.drei-spalter .module-ct::before{
content:"";
display:block;
height: clamp(2.25rem, 3.2vw, 3.25rem);
}
/* ===========================================================
TILES (Inhalt)
=========================================================== */
.t4-module.module.drei-spalter .tiles-3__grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px;
}
.t4-module.module.drei-spalter .tiles-3__card{
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Bild 3:2, füllt die Card */
.t4-module.module.drei-spalter .tiles-3__media{
width: 100%;
overflow: hidden;
background: var(--color-surface-soft);
}
.t4-module.module.drei-spalter .tiles-3__media img{
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
object-position: center;
}
.t4-module.module.drei-spalter .tiles-3__body{
padding: 20px 22px 22px;
}
/* Headline (wie von dir vorgegeben) */
.t4-module.module.drei-spalter .tiles-3__h{
margin: 0 0 10px;
font-size: clamp(1.25rem, 0.9vw + 1.05rem, 1.5rem);
line-height: 1.1;
color: var(--body-text-color);
font-weight: 400;
letter-spacing: -.01em;
}
/* ===========================================================
UL – gelbe Check-Punkte (wie Hauptcontent)
=========================================================== */
.t4-module.module.drei-spalter .tiles-3__list{
margin: 0;
padding: 0;
list-style: none;
}
.t4-module.module.drei-spalter .tiles-3__list li{
list-style: none;
font-size: clamp(1rem, 1vw, 1.1rem);
line-height: 1.65;
color: var(--color-text);
margin: .55rem 0;
}
.t4-module.module.drei-spalter .tiles-3__list li::before{
/* globaler Check-Kreis aus BASICS */
}
/* ===========================================================
Responsive
=========================================================== */
@media (max-width: 991px){
.t4-module.module.drei-spalter .tiles-3__grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
}
@media (max-width: 767.98px){
div[id*="t4-section-"] .t4-module.module.drei-spalter .module-inner,
div[id*="t4-section-"] .t4-module.module.drei-spalter .module-ct{
padding-top: clamp(1.75rem, 6vw, 2.5rem) !important;
}
div[id*="t4-section-"] .t4-module.module.drei-spalter .module-ct::before{
height: clamp(1.75rem, 6vw, 2.5rem);
}
.t4-module.module.drei-spalter .tiles-3__grid{
grid-template-columns: 1fr;
gap: 18px;
}
.t4-module.module.drei-spalter .tiles-3__body{
padding: 18px 18px 20px;
}
}
/*** EOF - 3-Spalter ***/
/*
==================================================
PHOCAMAPS
==================================================
*/
/* -------------------------------------------------
PhocaMaps: Frame / Card-Style
------------------------------------------------- */
.frame-light{
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 0.5rem;
margin-top: 2.5rem;
overflow: hidden;
background: var(--color-surface);
box-shadow: var(--shadow-card-lg);
}
/* Mobile: Karte optisch auf Höhe der Inputs ziehen */
@media (max-width: 991.98px){
.frame-light{ margin-top: 0; }
}
/* Leaflet-Container */
.frame-light .leaflet-container{
width: 100%;
height: 100%;
border-radius: calc(var(--radius-lg) - 0.5rem);
}
/* Standard-Abstand von PhocaMaps entfernen */
.phocamaps-box{ margin-top: 0 !important; }
/* Responsive: Mobile bekommt feste Höhe */
@media (max-width: 991px){
#phocaMapPlgPM1{
height: 50vh !important;
min-height: 320px;
}
}
/* -------------------------------------------------
Leaflet Controls im CI
------------------------------------------------- */
.frame-light .leaflet-control{
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card-lg);
}
.frame-light .leaflet-bar a{
color: var(--color-text);
}
.frame-light .leaflet-bar a:hover{
background: var(--color-surface-muted);
}
/* -------------------------------------------------
Leaflet Popup: Card / Typografie / Touch Targets
------------------------------------------------- */
.frame-light .leaflet-popup-content-wrapper{
background: var(--color-surface);
color: var(--color-text);
border-radius: 14px;
box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
.frame-light .leaflet-popup-content{
width: auto !important;
min-width: 250px;
margin: 16px 18px;
color: var(--color-text);
font: 400 0.875rem/1.5 var(--body-font-family);
}
.frame-light .leaflet-popup-content .map-popup{
display: flex;
flex-direction: column;
gap: 10px;
}
.frame-light .leaflet-popup-content .map-popup__title{
margin: 0;
font-size: 1.15rem;
line-height: 1.2;
font-weight: 700;
color: var(--color-brand-400);
}
.frame-light .leaflet-popup-content .map-popup__address{
color: var(--color-text);
line-height: 1.55;
}
.frame-light .leaflet-popup-content .map-popup__label{
margin-top: 2px;
font-weight: 700;
color: var(--color-brand-400);
}
.frame-light .leaflet-popup-content .map-popup__link{
display: flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 8px 10px;
border-radius: 10px;
background: var(--color-surface-soft);
color: var(--color-brand-550);
text-decoration: none;
line-height: 1.35;
}
.frame-light .leaflet-popup-content .map-popup__link i{
flex: 0 0 18px;
width: 18px;
text-align: center;
color: var(--accent);
}
.frame-light .leaflet-popup-content .map-popup__link:hover,
.frame-light .leaflet-popup-content .map-popup__link:focus{
background: var(--color-surface-muted);
color: var(--color-brand-400);
text-decoration: none;
}
.frame-light .leaflet-popup-content .map-popup__link:focus-visible{
outline: 2px solid rgba(36, 59, 83, 0.22);
outline-offset: 2px;
}
/*
==================================================
VISFORMS
==================================================
*/
/* -------------------------------------------------
Visforms: Theme Tokens (hell, CI passend)
------------------------------------------------- */
.visforms{
--vf-text: var(--color-text); /* Schriftfarbe */
--vf-accent: var(--accent); /* CI Gelb */
--vf-bg: var(--color-surface); /* Feld / Card */
--vf-bg-soft: var(--color-surface-muted); /* Hover/Soft */
--vf-border: rgba(10,25,40,0.18); /* Border normal */
--vf-border-soft: var(--color-border); /* Border soft */
--vf-shadow: var(--shadow-card-lg); /* Card Shadow */
--vf-error: #b3001b; /* Error Rot */
--vf-radius-control: 0.55rem;
--vf-radius-error: 0.35rem;
--vf-radius-alert: 0.6rem;
--vf-btn-hover-shadow: 0 10px 22px rgba(0,0,0,0.10);
}
/* -------------------------------------------------
Template Overrides (Grid/Widths)
------------------------------------------------- */
.visforms .form-control,
.visforms .inputbox{
max-width: none !important;
width: 100% !important;
display: block !important;
}
.visforms .row{
margin-left: 0 !important;
margin-right: 0 !important;
}
.visforms [class*="col-"]{
padding-left: 0 !important;
padding-right: 0 !important;
}
/* -------------------------------------------------
Typografie & Texte (CI)
------------------------------------------------- */
.visforms label,
.visforms legend,
.visforms .vis_mandatory,
.visforms .form-check-label,
.visforms .form-text,
.visforms .field-description{
color: var(--vf-text) !important;
line-height: 1.55;
}
/* Pflichtstern / Mandatory etwas dezenter */
.visforms .vis_mandatory{
opacity: 0.85;
}
/* Datenschutz-Link */
.visforms .form-check a{
color: var(--vf-accent) !important;
text-decoration: none;
transition: opacity 220ms ease;
}
.visforms .form-check a:hover,
.visforms .form-check a:focus{
opacity: 0.75;
text-decoration: underline;
text-underline-offset: 3px;
}
/* -------------------------------------------------
Inputs & Textarea (hell, clean)
------------------------------------------------- */
.visforms .form-control{
background-color: var(--vf-bg) !important;
color: var(--vf-text) !important;
border: 1px solid var(--vf-border) !important; /* statt Neon/Grün */
border-radius: var(--vf-radius-control) !important;
height: calc(2.55rem + 2px) !important; /* etwas ruhiger */
padding: 0.55rem 0.75rem;
transition:
background-color 220ms ease,
border-color 220ms ease,
box-shadow 260ms ease;
}
/* Hover */
.visforms .form-control:hover{
background-color: var(--vf-bg-soft) !important;
border-color: var(--vf-border) !important;
}
/* Fokus (gelb, wie CI) */
.visforms .form-control:focus,
.visforms .form-control:focus-visible{
background-color: var(--vf-bg) !important;
border-color: var(--vf-accent) !important;
box-shadow: 0 0 0 4px rgba(233,186,55,0.25) !important;
outline: none !important;
}
/* Textarea */
.visforms textarea.form-control{
min-height: calc(5 * 1.55em + 1.2rem);
resize: vertical;
padding-top: 0.65rem;
}
/* -------------------------------------------------
Autofill (Browser) – sauber hell
------------------------------------------------- */
.visforms input:-webkit-autofill,
.visforms textarea:-webkit-autofill{
-webkit-text-fill-color: var(--vf-text) !important;
-webkit-box-shadow: 0 0 0 1000px var(--vf-bg) inset !important;
box-shadow: 0 0 0 1000px var(--vf-bg) inset !important;
border: 1px solid var(--vf-border) !important;
}
/* -------------------------------------------------
Checkbox / DSGVO (hell + gelb)
------------------------------------------------- */
.visforms .form-check{
display: flex !important;
align-items: flex-start !important;
gap: 0.75rem !important;
}
.visforms input[type="checkbox"]{
appearance: none !important;
background-color: var(--vf-bg) !important;
width: 1.05rem !important;
height: 1.05rem !important;
border: 2px solid var(--vf-accent) !important;
border-radius: 0.25rem !important;
cursor: pointer !important;
position: relative !important;
margin-top: 0.15rem !important;
}
.visforms input[type="checkbox"]::before{
content: "" !important;
position: absolute !important;
inset: 20% !important;
background-color: var(--vf-accent) !important;
opacity: 0 !important;
transform: scale(0) !important;
transition: opacity 120ms ease, transform 120ms ease !important;
}
.visforms input[type="checkbox"]:checked::before{
opacity: 1 !important;
transform: scale(1) !important;
}
/* -------------------------------------------------
Buttons (im Stil eurer Site-Buttons)
------------------------------------------------- */
.visforms .btn{
padding: 0.55rem 1.8rem !important;
border-radius: var(--vf-radius-control) !important;
font-weight: 600;
letter-spacing: 0.02em;
transition:
background 220ms ease,
color 220ms ease,
border-color 220ms ease,
box-shadow 260ms ease;
}
/* SENDEN (Primary Blau wie Readmore) */
.visforms .btn-primary{
background-color: #374e66 !important;
border-color: var(--color-brand-700) !important;
color: var(--color-text-inverse) !important;
}
.visforms .btn-primary:hover{
background-color: rgba(55, 78, 102, 0.85) !important;
box-shadow: var(--vf-btn-hover-shadow) !important;
}
/* LÖSCHEN (dezent als Outline) */
.visforms .btn-danger{
background: transparent !important;
border: 1px solid var(--vf-border) !important;
color: var(--vf-text) !important;
}
.visforms .btn-danger:hover{
background: var(--vf-bg-soft) !important;
border-color: var(--vf-border) !important;
}
/* Buttons: Desktop wie gehabt, mobil sauber umbrechen + Abstand + zentriert */
.visforms .pbBtnCon{
display: flex !important;
flex-wrap: wrap !important;
align-items: center;
justify-content: flex-start !important; /* desktop */
}
/* Abstand nebeneinander (damit er bei Bedarf auch wieder umbricht) */
.visforms .pbBtnCon .col-auto{
margin-right: 1.4rem !important;
}
.visforms .pbBtnCon .col-auto:last-child{
margin-right: 0 !important;
}
/* iPhone/klein: zentrieren + untereinander + Abstand zwischen den Zeilen */
@media (max-width: 480px){
.visforms .pbBtnCon{
justify-content: center !important;
}
.visforms .pbBtnCon .col-auto{
flex: 0 0 100% !important; /* erzwingt Umbruch */
margin-right: 0 !important;
display: flex;
justify-content: center; /* Buttons mittig */
}
.visforms .pbBtnCon .col-auto + .col-auto{
margin-top: .8rem !important; /* Abstand Löschen ↔ Senden */
}
}
/* -------------------------------------------------
Visforms: Field Spacing (minimal größer)
------------------------------------------------- */
.visforms{
--vf-field-gap: 14px; /* Abstand zwischen den Feldern */
--vf-label-gap: 6px; /* Abstand Label -> Input */
}
.visforms label{
display: block;
margin-bottom: var(--vf-label-gap);
}
.visforms .form-control,
.visforms .inputbox,
.visforms textarea,
.visforms select{
margin-bottom: var(--vf-field-gap);
}
/* Checkbox/Datenschutz-Block etwas luftiger, ohne zu übertreiben */
.visforms .form-check{
margin-top: calc(var(--vf-field-gap) * 0.5) !important;
}
/* -------------------------------------------------
Fehler & Pflichtfeld-Hinweise
------------------------------------------------- */
.visforms .errorcontainer{ margin-top: 0.4rem !important; }
.visforms label.error{
display: inline-block;
font-size: 0.95rem;
color: var(--color-text-inverse) !important;
background-color: var(--vf-error);
padding: 0.4rem 0.6rem;
border-radius: var(--vf-radius-error);
}
/* Kleiner Pointer optional (kann bleiben, wirkt nicht „dotted“) */
.visforms label.error::before{
content: "";
display: block;
margin-bottom: 0.2rem;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid var(--vf-error);
}
/* -------------------------------------------------
Alerts (Visforms)
------------------------------------------------- */
.visforms .alert-success,
.visforms .alert-danger{
background-color: var(--vf-bg) !important;
border: 1px solid var(--vf-border-soft) !important;
color: var(--vf-text) !important;
padding: 1rem 1.25rem;
border-radius: var(--vf-radius-alert);
box-shadow: var(--vf-shadow);
}
/* -------------------------------------------------
In Bearbeitung ausblenden (bei euch so gewünscht)
------------------------------------------------- */
/* #mod-visform1_processform { display: none !important; } */
/*
==================================================
SYSTEMMELDUNGEN
==================================================
*/
/* Container */
#system-message-container{
margin: 4rem 0;
}
/* Alert: clean (ohne dashed) */
joomla-alert[type="info"],
joomla-alert[type="success"]{
background: var(--color-surface) !important;
border: 1px solid var(--color-border) !important;
border-radius: var(--radius-lg);
padding: 0.9rem 1.15rem;
margin-top: 2rem;
box-shadow: var(--shadow-card-lg);
}
/* Texte */
joomla-alert[type="info"],
joomla-alert[type="success"],
joomla-alert[type="info"] *,
joomla-alert[type="success"] *{
color: var(--color-text) !important;
}
/* Textgröße */
joomla-alert .alert-message{
font-size: clamp(1rem, 0.35vw + 0.95rem, 1.05rem);
line-height: 1.55;
}
/* Überschrift / Icon aus */
joomla-alert .alert-heading{ display: none; }
/* Close Button im CI-Gelb */
joomla-alert .joomla-alert--close,
joomla-alert .joomla-alert--close span{
color: var(--accent) !important;
opacity: 1 !important;
transition: opacity var(--transition-fast);
}
joomla-alert .joomla-alert--close:hover,
joomla-alert .joomla-alert--close:hover span{
opacity: 0.7 !important;
}
/*EOF VisForms*/
/*
==================================================
IMPRESSUM / DATENSCHUTZ
==================================================
*/
.legal-contact{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
margin-top: .35rem;
}
.legal-contact a{
display: inline-flex;
align-items: center;
gap: .5rem;
color: var(--color-cta-500);
text-decoration: none;
line-height: 1.35;
padding: 2px 0;
transition: color var(--transition-fast);
}
.legal-contact a i{
flex: 0 0 18px;
width: 18px;
text-align: center;
color: var(--color-brand-400);
transition: color var(--transition-fast);
}
.legal-contact a:hover,
.legal-contact a:focus{
color: var(--color-cta-400);
text-decoration: none;
}
.legal-contact a:hover i,
.legal-contact a:focus i{
color: var(--color-cta-500);
}
/*
==================================================
UTILITIES
==================================================
*/
/* .size-0-9: Utility Fontsize */
.size-0-9{ font-size: clamp(0.83rem, 0.25vw + 0.75rem, 0.9rem) !important; }
/* no-sidebar: Component auf 100% */
#t4-main-body.no-sidebar .t4-col.component{
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
}
.bold {
font-weight: 700;
}