/* =====================================================================
π¨ MTC COMPUTERS β PREMIUM SHOP CUSTOM.CSS
=====================================================================
Eine Datei. Eine Quelle. Sauber.
ARCHITEKTUR (1:1 zu deinen TPL-Dateien):
00 β FOUNDATION (Design-Tokens, Reset, Typo, Layout)
01 β HERO β _hero.tpl
02 β TRUST-STRIP β _trust-strip.tpl
03 β SCHNELLZUGRIFF β _schnellzugriff.tpl
04 β TOP-ANGEBOTE β _top-angebote.tpl
05 β BANNERS β _banners.tpl
06 β KOMPONENTEN β _komponenten.tpl
07 β QUALITΓT β _qualitaet.tpl
08 β SERVICES β _services.tpl
09 β MTC AI β _mtc-ai.tpl
10 β MARKEN β _marken.tpl
11 β FOOTER β _footer.tpl
12 β GLOBAL POLISH (Reduced-Motion, Print, Touch)
PRINZIPIEN:
β Mobile-First (Base = Mobile, Media-Queries skalieren nach oben)
β App-DNA (Touch-Tap-Feedback, Premium-Lift, iOS-Glass)
β Bilder IMMER auf weiΓem Hintergrund (mix-blend-mode multiply)
β Kein !important (saubere SpezifitΓ€t via .mtc-shop-Scope)
β Keine Doubletten β eine Wahrheit pro Klasse
β Smarty/JTL unverΓ€ndert β nur CSS, kein TPL-Eingriff
EINBAU:
1. Aktuelle custom.css β custom.OLD.css umbenennen (Sicherheit)
2. Diese Datei als neue custom.css speichern
3. Browser-Cache leeren (Cmd/Ctrl + Shift + R)
===================================================================== */
/* =====================================================================
00 β FOUNDATION
===================================================================== */
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββ
00.1 DESIGN TOKENS
βββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.mtc-shop {
/* ββ Brand Colors ββ */
--mtc-orange: #FF6B35;
--mtc-orange-dark: #E5572C;
--mtc-orange-soft: #FFF1EC;
--mtc-orange-glow: rgba(255, 107, 53, .30);
--mtc-cyan: #0891B2;
--mtc-cyan-dark: #0E7490;
--mtc-cyan-soft: #E0F7FA;
--mtc-cyan-glow: rgba(8, 145, 178, .18);
--mtc-green: #16A172;
--mtc-green-dark: #0E7A56;
--mtc-green-soft: #E6F7F0;
--mtc-green-glow: rgba(22, 161, 114, .18);
--mtc-purple: #7C3AED;
--mtc-purple-dark: #5B21B6;
--mtc-purple-soft: #F3F0FF;
--mtc-blue: #2563EB;
--mtc-blue-dark: #1D4ED8;
--mtc-blue-soft: #EFF6FF;
--mtc-gold: #D4A656;
--mtc-gold-dark: #A8842F;
--mtc-gold-soft: #FAF6EE;
--mtc-red: #DC2626;
/* ββ Neutrals ββ */
--mtc-ink: #0F1419;
--mtc-ink-2: #1F2937;
--mtc-text: #4B5563;
--mtc-mute: #6B7280;
--mtc-line: #E5E7EB;
--mtc-line-2: #F3F4F6;
--mtc-mist: #F4F5F7;
--mtc-mist-2: #F9FAFB;
--mtc-white: #FFFFFF;
/* ββ Semantic ββ */
--mtc-bg: var(--mtc-white);
--mtc-bg-alt: var(--mtc-mist);
--mtc-bg-product: var(--mtc-white); /* β
Produktbilder IMMER weiΓ */
/* ββ Typography ββ */
--mtc-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--mtc-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
--mtc-fs-eyebrow: 11px;
--mtc-fs-caption: 13px;
--mtc-fs-body: 15px;
--mtc-fs-lead: 17px;
--mtc-fs-h4: 20px;
--mtc-fs-h3: 24px;
--mtc-fs-h2: 28px;
--mtc-fs-h1: 34px;
--mtc-fs-display: 44px;
--mtc-lh-tight: 1.15;
--mtc-lh-snug: 1.3;
--mtc-lh-base: 1.55;
--mtc-lh-relaxed: 1.7;
--mtc-fw-regular: 400;
--mtc-fw-medium: 500;
--mtc-fw-semi: 600;
--mtc-fw-bold: 700;
--mtc-fw-black: 800;
--mtc-track-tight: -0.02em;
--mtc-track-wide: 0.12em;
/* ββ Spacing (8pt grid) ββ */
--mtc-s-1: 4px;
--mtc-s-2: 8px;
--mtc-s-3: 12px;
--mtc-s-4: 16px;
--mtc-s-5: 20px;
--mtc-s-6: 24px;
--mtc-s-7: 32px;
--mtc-s-8: 40px;
--mtc-s-9: 48px;
--mtc-s-10: 64px;
--mtc-s-11: 80px;
--mtc-s-12: 96px;
/* ββ Radius ββ */
--mtc-r-sm: 10px;
--mtc-r-md: 16px;
--mtc-r-lg: 22px;
--mtc-r-xl: 28px;
--mtc-r-2xl: 32px;
--mtc-r-pill: 999px;
/* ββ Shadows ββ */
--mtc-shadow-xs: 0 1px 2px rgba(15, 20, 25, .04);
--mtc-shadow-sm: 0 2px 6px rgba(15, 20, 25, .05);
--mtc-shadow: 0 4px 12px rgba(15, 20, 25, .06);
--mtc-shadow-md: 0 6px 16px rgba(15, 20, 25, .07);
--mtc-shadow-lg: 0 8px 24px rgba(15, 20, 25, .08), 0 16px 48px rgba(15, 20, 25, .04);
--mtc-shadow-xl: 0 12px 32px rgba(15, 20, 25, .12), 0 24px 64px rgba(15, 20, 25, .06);
/* ββ Motion ββ */
--mtc-ease: cubic-bezier(.4, 0, .2, 1);
--mtc-ease-out: cubic-bezier(.16, 1, .3, 1);
--mtc-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
--mtc-speed-fast: 0.15s;
--mtc-speed: 0.30s;
--mtc-speed-slow: 0.50s;
/* ββ Layout ββ */
--mtc-container: 1440px;
--mtc-section-py: var(--mtc-s-9);
--mtc-section-px: var(--mtc-s-4);
/* ββ Z-Index ββ */
--mtc-z-base: 1;
--mtc-z-card: 10;
--mtc-z-sticky: 100;
--mtc-z-nav: 900;
--mtc-z-modal: 1000;
}
@media (min-width: 768px) {
.mtc-shop {
--mtc-section-py: var(--mtc-s-10);
--mtc-section-px: var(--mtc-s-7);
--mtc-fs-h2: 32px;
--mtc-fs-h1: 40px;
--mtc-fs-display: 52px;
}
}
@media (min-width: 1024px) {
.mtc-shop {
--mtc-section-py: var(--mtc-s-11);
--mtc-section-px: var(--mtc-s-8);
--mtc-fs-h2: 36px;
--mtc-fs-h1: 48px;
--mtc-fs-display: 60px;
}
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββ
00.2 GLOBAL RESET (gescoped)
βββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.mtc-shop,
.mtc-shop *,
.mtc-shop *::before,
.mtc-shop *::after {
box-sizing: border-box;
}
.mtc-shop {
background: var(--mtc-white);
color: var(--mtc-text);
font-family: var(--mtc-font);
font-size: var(--mtc-fs-body);
line-height: var(--mtc-lh-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.mtc-shop img,
.mtc-shop svg {
display: block;
max-width: 100%;
height: auto;
}
.mtc-shop a {
color: inherit;
text-decoration: none;
transition: color var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop button {
font-family: inherit;
cursor: pointer;
border: 0;
background: transparent;
color: inherit;
}
.mtc-shop input,
.mtc-shop textarea,
.mtc-shop select {
font-family: inherit;
font-size: inherit;
}
.mtc-shop ul {
list-style: none;
margin: 0;
padding: 0;
}
.mtc-shop :focus-visible {
outline: 2px solid var(--mtc-orange);
outline-offset: 3px;
border-radius: 4px;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββ
00.3 GLOBAL TYPOGRAPHY
βββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.mtc-shop .accent {
background: linear-gradient(135deg, var(--mtc-orange) 0%, var(--mtc-orange-dark) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββ
00.4 SECTION CONTAINER (alle Sections gleiche Logik)
βββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.mtc-shop section {
padding: var(--mtc-section-py) 0;
}
.mtc-shop .hero-inner,
.mtc-shop .usp-inner,
.mtc-shop .sz-wrap,
.mtc-shop .top-angebote-wrap,
.mtc-shop .mb-wrap,
.mtc-shop .kmp-wrap,
.mtc-shop .qlt-wrap,
.mtc-shop .svc-wrap,
.mtc-shop .mtc-ai-wrap,
.mtc-shop .mk-wrap,
.mtc-shop .mtc-footer-inner {
max-width: var(--mtc-container);
margin: 0 auto;
padding-left: var(--mtc-section-px);
padding-right: var(--mtc-section-px);
}
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββ
00.5 β
PRODUKTBILDER β IMMER WEISS
βββββββββββββββββββββββββββββββββββββββββββββββββββββ */
.mtc-shop .slide-image,
.mtc-shop .ta-media,
.mtc-shop .kmp-media,
.mtc-shop .qlt-product-media,
.mtc-shop .sz-tile-media {
background: var(--mtc-bg-product);
position: relative;
overflow: hidden;
}
.mtc-shop .slide-image img,
.mtc-shop .ta-media img,
.mtc-shop .kmp-media img,
.mtc-shop .qlt-product-media img,
.mtc-shop .sz-tile-media img {
background: var(--mtc-bg-product);
object-fit: contain;
mix-blend-mode: multiply; /* β
killt JPG-RestweiΓ */
}
/* Brand-Logos auch weiΓ */
.mtc-shop .ta-brand-logo,
.mtc-shop .mb-logo,
.mtc-shop .mk-tile {
background: var(--mtc-bg-product);
}
/* =====================================================================
01 β HERO β _hero.tpl
=====================================================================
FINAL Layout: 80% Slider links / 20% Werbe-Banner rechts
- Slider links: MTC Deals (Wawi 68), Auto 7s
- Werbe-Banner rechts: 5 Werbungen rotierend (Auto 7s)
* WEISSER Background (clean, einheitlich mit MTC Deals)
* Subtiler Decor-Blob als Farb-Akzent pro Kategorie
* Echte farbige Marken-Pills (HP-Blau, Dell-Blau, NVIDIA-GrΓΌn, etc.)
* Statement-Titel dunkel
* Subline + CTA
===================================================================== */
/* ββ 01.0 HERO CONTAINER + BACKGROUND ββ */
.mtc-shop .hero {
position: relative;
background: var(--mtc-white);
padding-top: var(--mtc-s-7);
padding-bottom: var(--mtc-s-9);
overflow: hidden;
}
.mtc-shop .hero-bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse 800px 600px at 80% 0%, rgba(255, 107, 53, .08) 0%, transparent 60%),
radial-gradient(ellipse 600px 500px at 0% 100%, rgba(8, 145, 178, .05) 0%, transparent 70%),
linear-gradient(180deg, #FAFBFD 0%, #FFFFFF 100%);
}
.mtc-shop .hero-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
gap: var(--mtc-s-5);
}
@media (min-width: 1024px) {
.mtc-shop .hero-inner {
grid-template-columns: 4fr 1fr;
gap: var(--mtc-s-5);
align-items: stretch;
}
}
/* ββ 01.1 SLIDER LINKS (80%) β MTC Deals ββ */
.mtc-shop .slider-main {
background: var(--mtc-white);
border: 1px solid var(--mtc-line);
border-radius: var(--mtc-r-xl);
box-shadow: var(--mtc-shadow);
overflow: hidden;
position: relative;
}
.mtc-shop .slider-track {
position: relative;
min-height: 540px;
}
@media (min-width: 768px) {
.mtc-shop .slider-track { min-height: 520px; }
}
@media (min-width: 1024px) {
.mtc-shop .slider-track { min-height: 580px; }
}
.mtc-shop .mslide {
position: absolute;
inset: 0;
display: grid;
grid-template-rows: auto auto auto auto auto;
gap: var(--mtc-s-2);
padding: var(--mtc-s-4);
padding-bottom: 90px;
opacity: 0;
visibility: hidden;
transition: opacity .6s var(--mtc-ease);
pointer-events: none;
}
.mtc-shop .mslide.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
@media (min-width: 768px) {
.mtc-shop .mslide {
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
align-items: center;
padding: var(--mtc-s-8);
gap: var(--mtc-s-7);
}
}
@media (min-width: 1280px) {
.mtc-shop .mslide {
grid-template-columns: 1.1fr 1fr;
padding: var(--mtc-s-9);
gap: var(--mtc-s-8);
}
}
.mtc-shop .slide-image {
display: flex;
align-items: center;
justify-content: center;
background: var(--mtc-white);
border-radius: var(--mtc-r-lg);
min-height: 160px;
order: 1;
position: relative;
padding: 12px;
}
@media (min-width: 768px) {
.mtc-shop .slide-image { order: 2; min-height: 320px; padding: 20px; }
}
@media (min-width: 1024px) {
.mtc-shop .slide-image { min-height: 380px; }
}
.mtc-shop .slide-image img {
max-height: 160px;
width: auto;
object-fit: contain;
background: var(--mtc-white);
mix-blend-mode: multiply;
}
@media (min-width: 768px) {
.mtc-shop .slide-image img { max-height: 340px; }
}
@media (min-width: 1024px) {
.mtc-shop .slide-image img { max-height: 380px; }
}
.mtc-shop .slide-decor-fallback {
font-size: 100px;
font-weight: var(--mtc-fw-black);
color: var(--mtc-mist);
line-height: 1;
}
.mtc-shop .slide-text {
display: flex;
flex-direction: column;
gap: var(--mtc-s-3);
order: 2;
}
@media (min-width: 768px) {
.mtc-shop .slide-text { order: 1; }
}
.mtc-shop .slide-tag {
display: inline-flex;
align-self: flex-start;
align-items: center;
height: 28px;
padding: 0 var(--mtc-s-3);
background: var(--mtc-orange-soft);
color: var(--mtc-orange-dark);
border-radius: var(--mtc-r-pill);
font-size: var(--mtc-fs-eyebrow);
font-weight: var(--mtc-fw-bold);
letter-spacing: var(--mtc-track-wide);
text-transform: uppercase;
}
.mtc-shop .slide-title {
font-size: 24px;
font-weight: var(--mtc-fw-black);
color: var(--mtc-ink);
letter-spacing: var(--mtc-track-tight);
line-height: 1.15;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (min-width: 768px) { .mtc-shop .slide-title { font-size: 32px; } }
@media (min-width: 1024px) { .mtc-shop .slide-title { font-size: 38px; line-height: 1.1; } }
@media (min-width: 1280px) { .mtc-shop .slide-title { font-size: 44px; } }
.mtc-shop .slide-pricing {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: var(--mtc-s-2);
}
.mtc-shop .slide-price-new {
font-size: 28px;
font-weight: var(--mtc-fw-black);
color: var(--mtc-orange);
line-height: 1;
}
@media (min-width: 768px) { .mtc-shop .slide-price-new { font-size: 36px; } }
.mtc-shop .slide-price-hint {
font-size: var(--mtc-fs-caption);
color: var(--mtc-mute);
}
.mtc-shop .btn-buy {
display: inline-flex;
align-self: flex-start;
align-items: center;
justify-content: center;
gap: var(--mtc-s-2);
height: 52px;
padding: 0 var(--mtc-s-7);
background: linear-gradient(135deg, var(--mtc-orange) 0%, var(--mtc-orange-dark) 100%);
color: var(--mtc-white);
border-radius: var(--mtc-r-pill);
font-size: var(--mtc-fs-body);
font-weight: var(--mtc-fw-bold);
box-shadow: 0 8px 22px var(--mtc-orange-glow);
transition: transform var(--mtc-speed) var(--mtc-ease), box-shadow var(--mtc-speed) var(--mtc-ease);
position: relative;
overflow: hidden;
margin-top: var(--mtc-s-3);
text-decoration: none;
}
.mtc-shop .btn-buy svg {
width: 18px !important; height: 18px !important;
max-width: 18px !important; max-height: 18px !important;
}
.mtc-shop .btn-buy::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform .6s var(--mtc-ease);
pointer-events: none;
}
.mtc-shop .btn-buy:hover { transform: translateY(-2px); box-shadow: 0 14px 30px var(--mtc-orange-glow); }
.mtc-shop .btn-buy:hover::before { transform: translateX(100%); }
.mtc-shop .btn-buy:active { transform: scale(.96); }
.mtc-shop .slider-controls {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: var(--mtc-s-3);
background: rgba(255, 255, 255, .96);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(229, 231, 235, .8);
border-radius: var(--mtc-r-pill);
padding: 6px var(--mtc-s-3);
z-index: 5;
box-shadow: 0 4px 20px rgba(15, 20, 25, .08);
}
.mtc-shop .slider-dots { display: flex; gap: 6px; align-items: center; }
.mtc-shop .mtc-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--mtc-line);
border: 0;
padding: 0;
cursor: pointer;
transition: all var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .mtc-dot.active {
background: var(--mtc-orange);
width: 24px;
border-radius: var(--mtc-r-pill);
}
.mtc-shop .slider-arrows { display: flex; gap: 4px; }
.mtc-shop .arrow {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--mtc-white);
border: 1px solid var(--mtc-line);
display: inline-flex;
align-items: center;
justify-content: center;
transition: all var(--mtc-speed) var(--mtc-ease);
cursor: pointer;
padding: 0;
}
.mtc-shop .arrow svg {
width: 16px !important; height: 16px !important;
max-width: 16px !important; max-height: 16px !important;
color: var(--mtc-ink);
}
.mtc-shop .arrow:hover { background: var(--mtc-orange); border-color: var(--mtc-orange); transform: translateY(-1px); }
.mtc-shop .arrow:hover svg { color: var(--mtc-white); }
/* ββ 01.2 WERBE-BANNER RECHTS (20%) β 5 Premium mit Fotos ββ */
.mtc-shop .hero-promo {
position: relative;
border-radius: var(--mtc-r-xl);
box-shadow: var(--mtc-shadow);
overflow: hidden;
display: flex;
flex-direction: column;
border: 1px solid var(--mtc-line);
background: var(--mtc-white);
}
.mtc-shop .promo-track {
position: relative;
flex: 1;
min-height: 540px;
}
@media (min-width: 768px) { .mtc-shop .promo-track { min-height: 520px; } }
@media (min-width: 1024px) { .mtc-shop .promo-track { min-height: 580px; } }
/* Promo-Slide β Premium Banner mit Bild + Text */
.mtc-shop .promo-slide {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: var(--mtc-s-6);
text-decoration: none;
color: var(--mtc-white);
opacity: 0;
visibility: hidden;
transition: opacity .7s var(--mtc-ease), transform .7s var(--mtc-ease);
transform: translateX(20px);
pointer-events: none;
overflow: hidden;
}
@media (min-width: 1024px) {
.mtc-shop .promo-slide {
padding: var(--mtc-s-7) var(--mtc-s-5);
}
}
.mtc-shop .promo-slide.active {
opacity: 1;
visibility: visible;
transform: translateX(0);
pointer-events: auto;
}
/* WEISSER Background fΓΌr ALLE 5 Promo-Kategorien (clean & einheitlich) */
.mtc-shop .promo--mini,
.mtc-shop .promo--note,
.mtc-shop .promo--gaming,
.mtc-shop .promo--work,
.mtc-shop .promo--server {
background: var(--mtc-white);
}
css/* Decor-Blob deaktiviert (clean weiΓ) */
.mtc-shop .promo-decor-blob {
display: none;
}
/* Promo Text-Container (oben) */
.mtc-shop .promo-text {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
gap: var(--mtc-s-3);
}
/* Eyebrow-Pill */
.mtc-shop .promo-eyebrow {
display: inline-flex;
align-self: flex-start;
align-items: center;
height: 28px;
padding: 0 var(--mtc-s-4);
border-radius: var(--mtc-r-pill);
font-size: 11px;
font-weight: var(--mtc-fw-bold);
letter-spacing: var(--mtc-track-wide);
text-transform: uppercase;
color: var(--mtc-white);
border: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
/* Eyebrow-Farbe pro Kategorie */
.mtc-shop .promo--mini .promo-eyebrow {
background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);
}
.mtc-shop .promo--note .promo-eyebrow {
background: linear-gradient(135deg, #16A172 0%, #0D7A55 100%);
}
.mtc-shop .promo--gaming .promo-eyebrow {
background: linear-gradient(135deg, #FF6B35 0%, #E5572C 100%);
}
.mtc-shop .promo--work .promo-eyebrow {
background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
}
.mtc-shop .promo--server .promo-eyebrow {
background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
}
/* Statement-Titel */
.mtc-shop .promo-title {
font-size: 24px;
font-weight: var(--mtc-fw-black);
color: var(--mtc-ink);
letter-spacing: var(--mtc-track-tight);
line-height: 1.05;
margin: var(--mtc-s-2) 0 0 0;
}
@media (min-width: 1024px) { .mtc-shop .promo-title { font-size: 30px; } }
@media (min-width: 1280px) { .mtc-shop .promo-title { font-size: 34px; } }
.mtc-shop .promo-sub {
font-size: 12px;
color: var(--mtc-mute);
font-weight: var(--mtc-fw-medium);
line-height: 1.45;
margin: 0;
max-width: 90%;
}
@media (min-width: 1024px) {
.mtc-shop .promo-sub { font-size: 13px; }
}
/* Marken-Pills (Brand-Color) */
.mtc-shop .promo-brands {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: var(--mtc-s-3);
}
.mtc-shop .promo-brand-pill {
display: inline-flex;
align-items: center;
height: 26px;
padding: 0 12px;
background: var(--mtc-white);
color: var(--mtc-ink);
border-radius: var(--mtc-r-pill);
font-size: 11px;
font-weight: var(--mtc-fw-black);
letter-spacing: 0.04em;
text-transform: uppercase;
border: 1px solid var(--mtc-line);
box-shadow: 0 2px 8px rgba(15, 20, 25, .06);
}
/* Promo-Image (Foto rechts/zentral) */
.mtc-shop .promo-image {
position: absolute;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
width: 80%;
max-width: 260px;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
pointer-events: none;
}
@media (min-width: 1024px) {
.mtc-shop .promo-image {
bottom: 90px;
height: 200px;
max-width: 280px;
}
}
@media (min-width: 1280px) {
.mtc-shop .promo-image {
height: 220px;
max-width: 300px;
}
}
.mtc-shop .promo-image img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
background: transparent;
filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .35));
transition: transform .5s var(--mtc-ease-out);
}
.mtc-shop .promo-slide:hover .promo-image img {
transform: scale(1.06);
}
/* Decorative SVG fΓΌr Gaming (kein Foto) */
.mtc-shop .promo-image-decor svg {
width: 200px !important;
height: 200px !important;
max-width: 200px !important;
max-height: 200px !important;
color: rgba(255, 107, 53, .5);
}
/* CTA β WeiΓer Pill-Button */
.mtc-shop .promo-cta {
position: absolute;
bottom: var(--mtc-s-7);
left: var(--mtc-s-6);
display: inline-flex;
align-items: center;
gap: var(--mtc-s-2);
height: 44px;
padding: 0 var(--mtc-s-5);
background: var(--mtc-ink);
color: var(--mtc-white);
border-radius: var(--mtc-r-pill);
font-size: 13px;
font-weight: var(--mtc-fw-bold);
z-index: 4;
transition: transform .25s var(--mtc-ease), background .25s var(--mtc-ease), box-shadow .25s var(--mtc-ease);
white-space: nowrap;
box-shadow: 0 6px 18px rgba(15, 20, 25, .18);
}
@media (min-width: 1024px) {
.mtc-shop .promo-cta {
bottom: var(--mtc-s-8);
left: var(--mtc-s-5);
}
}
.mtc-shop .promo-cta svg {
width: 14px !important;
height: 14px !important;
max-width: 14px !important;
max-height: 14px !important;
transition: transform .25s var(--mtc-ease);
}
.mtc-shop .promo-slide:hover .promo-cta {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(15, 20, 25, .25);
}
/* CTA-Hover-Color pro Kategorie */
.mtc-shop .promo--mini:hover .promo-cta { background: #0891B2; }
.mtc-shop .promo--note:hover .promo-cta { background: #16A172; }
.mtc-shop .promo--gaming:hover .promo-cta { background: #FF6B35; }
.mtc-shop .promo--work:hover .promo-cta { background: #7C3AED; }
.mtc-shop .promo--server:hover .promo-cta { background: #2563EB; }
.mtc-shop .promo-slide:hover .promo-cta svg { transform: translateX(4px); }
/* Promo Controls (Dots am Boden) β heller BG, dunkle Dots */
.mtc-shop .promo-controls {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(229, 231, 235, .8);
border-radius: var(--mtc-r-pill);
padding: 6px 10px;
z-index: 5;
box-shadow: 0 4px 16px rgba(15, 20, 25, .08);
}
.mtc-shop .promo-dots {
display: flex;
gap: 6px;
align-items: center;
}
.mtc-shop .promo-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--mtc-line);
border: 0;
padding: 0;
cursor: pointer;
transition: all var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .promo-dot.active {
background: var(--mtc-orange);
width: 22px;
border-radius: var(--mtc-r-pill);
}
/* =====================================================================
02 β TRUST-STRIP β _trust-strip.tpl
=====================================================================
Premium-Glass App-Style:
- Edge-to-Edge subtler Background mit Gradient
- 4 Cards Premium Glassmorphism + Hover-Lift
- Mobile: horizontal Scroll-Snap
- Desktop: 4 Spalten gleichmΓ€Γig
===================================================================== */
.mtc-shop .usp-strip {
position: relative;
background:
linear-gradient(180deg, rgba(255, 107, 53, .025) 0%, rgba(8, 145, 178, .015) 100%),
linear-gradient(180deg, #FAFBFD 0%, #F4F5F7 100%);
border-top: 1px solid rgba(229, 231, 235, .8);
border-bottom: 1px solid rgba(229, 231, 235, .8);
padding: var(--mtc-s-5) 0;
overflow: hidden;
}
.mtc-shop .usp-strip::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255, 107, 53, .25) 50%, transparent 100%);
pointer-events: none;
z-index: 1;
}
.mtc-shop .usp-inner {
position: relative;
display: flex;
gap: var(--mtc-s-3);
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
z-index: 2;
}
.mtc-shop .usp-inner::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
.mtc-shop .usp-inner {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--mtc-s-4);
overflow: visible;
}
}
/* USP-Card Premium-Glass */
.mtc-shop .usp {
display: flex;
align-items: center;
gap: var(--mtc-s-3);
flex-shrink: 0;
min-width: 240px;
padding: var(--mtc-s-4) var(--mtc-s-5);
background: rgba(255, 255, 255, .95);
backdrop-filter: blur(10px) saturate(150%);
-webkit-backdrop-filter: blur(10px) saturate(150%);
border: 1px solid rgba(229, 231, 235, .9);
border-radius: var(--mtc-r-lg);
scroll-snap-align: start;
transition:
transform .3s var(--mtc-ease-out),
box-shadow .3s var(--mtc-ease-out),
border-color .25s var(--mtc-ease);
text-decoration: none;
color: inherit;
position: relative;
overflow: hidden;
}
@media (min-width: 1024px) {
.mtc-shop .usp { min-width: 0; }
}
/* Subtle Glow on Hover */
.mtc-shop .usp::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--mtc-r-lg);
background: radial-gradient(circle at top right, var(--mtc-orange-glow), transparent 60%);
opacity: 0;
pointer-events: none;
transition: opacity .35s var(--mtc-ease);
z-index: 0;
}
@media (hover: hover) {
.mtc-shop .usp:hover {
transform: translateY(-3px);
border-color: rgba(255, 107, 53, .3);
box-shadow:
0 12px 28px rgba(15, 20, 25, .08),
0 4px 8px rgba(15, 20, 25, .04);
}
.mtc-shop .usp:hover::after { opacity: .4; }
}
@media (hover: none) {
.mtc-shop .usp:active { transform: scale(.98); }
}
/* USP-Icon Squircle App-Style */
.mtc-shop .usp-icon {
width: 44px; height: 44px;
flex-shrink: 0;
border-radius: 12px;
background: linear-gradient(135deg, var(--mtc-orange-soft) 0%, #FFE8DA 100%);
color: var(--mtc-orange);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
transition: transform .3s var(--mtc-ease-spring);
}
.mtc-shop .usp-icon svg {
width: 22px !important;
height: 22px !important;
max-width: 22px !important;
max-height: 22px !important;
}
.mtc-shop .usp:hover .usp-icon {
transform: scale(1.08) rotate(-3deg);
}
.mtc-shop .usp-text {
display: flex;
flex-direction: column;
line-height: 1.3;
min-width: 0;
position: relative;
z-index: 1;
}
.mtc-shop .usp-text strong {
font-size: var(--mtc-fs-caption);
font-weight: var(--mtc-fw-bold);
color: var(--mtc-ink);
letter-spacing: -0.01em;
}
.mtc-shop .usp-text span {
font-size: 12px;
color: var(--mtc-mute);
font-weight: var(--mtc-fw-medium);
}
/* USP Phone β Green Variant */
.mtc-shop .usp-phone .usp-icon {
background: linear-gradient(135deg, var(--mtc-green-soft) 0%, #D1F5E5 100%);
color: var(--mtc-green-dark);
}
.mtc-shop .usp-phone:hover {
border-color: rgba(22, 161, 114, .3);
}
.mtc-shop .usp-phone::after {
background: radial-gradient(circle at top right, var(--mtc-green-glow), transparent 60%);
}
/* =====================================================================
03 β SCHNELLZUGRIFF β _schnellzugriff.tpl
=====================================================================
Mobile: 2 Spalten
Tablet: 3 Spalten
Desktop: 6 Spalten
===================================================================== */
.mtc-shop .sz {
background: var(--mtc-white);
}
.mtc-shop .sz-head {
text-align: center;
margin-bottom: var(--mtc-s-7);
}
.mtc-shop .sz-eyebrow {
display: inline-block;
font-size: var(--mtc-fs-eyebrow);
font-weight: var(--mtc-fw-bold);
letter-spacing: var(--mtc-track-wide);
text-transform: uppercase;
color: var(--mtc-orange);
margin-bottom: var(--mtc-s-3);
}
.mtc-shop .sz-title {
font-size: var(--mtc-fs-h2);
font-weight: var(--mtc-fw-black);
color: var(--mtc-ink);
letter-spacing: var(--mtc-track-tight);
line-height: var(--mtc-lh-tight);
margin: 0;
}
@media (min-width: 1024px) {
.mtc-shop .sz-title { font-size: var(--mtc-fs-h1); }
}
.mtc-shop .sz-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--mtc-s-3);
}
@media (min-width: 768px) {
.mtc-shop .sz-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--mtc-s-4);
}
}
@media (min-width: 1024px) {
.mtc-shop .sz-grid {
grid-template-columns: repeat(6, 1fr);
}
}
.mtc-shop .sz-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--mtc-s-3);
padding: var(--mtc-s-4) var(--mtc-s-3);
background: var(--mtc-white);
border: 1px solid var(--mtc-line);
border-radius: var(--mtc-r-lg);
transition: all var(--mtc-speed) var(--mtc-ease);
text-align: center;
}
.mtc-shop .sz-tile:hover {
border-color: var(--mtc-orange);
transform: translateY(-4px);
box-shadow: var(--mtc-shadow-lg);
}
.mtc-shop .sz-tile-media {
width: 100%;
aspect-ratio: 1;
background: var(--mtc-white);
border-radius: var(--mtc-r-md);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.mtc-shop .sz-tile-media img {
max-width: 80%;
max-height: 80%;
object-fit: contain;
background: var(--mtc-white);
mix-blend-mode: multiply;
transition: transform var(--mtc-speed-slow) var(--mtc-ease);
}
.mtc-shop .sz-tile:hover .sz-tile-media img {
transform: scale(1.08);
}
.mtc-shop .sz-tile-label {
font-size: var(--mtc-fs-caption);
font-weight: var(--mtc-fw-bold);
color: var(--mtc-ink);
letter-spacing: -0.01em;
line-height: 1.2;
}
@media (min-width: 1024px) {
.mtc-shop .sz-tile-label { font-size: var(--mtc-fs-body); }
}
/* =====================================================================
04 β TOP-ANGEBOTE β _top-angebote.tpl
=====================================================================
Mobile: 1-2 Spalten
Tablet: 3 Spalten
Desktop: 5 Spalten
===================================================================== */
.mtc-shop .top-angebote {
background: var(--mtc-mist-2);
position: relative;
}
.mtc-shop .top-angebote::before {
content: "";
position: absolute;
top: 0; left: 50%;
width: 600px; height: 600px;
background: radial-gradient(circle, var(--mtc-orange-soft) 0%, transparent 70%);
transform: translate(-50%, -30%);
pointer-events: none;
z-index: 0;
filter: blur(60px);
opacity: .5;
}
.mtc-shop .top-angebote-wrap {
position: relative;
z-index: 1;
}
.mtc-shop .top-angebote-head {
display: flex;
flex-direction: column;
gap: var(--mtc-s-3);
margin-bottom: var(--mtc-s-7);
}
@media (min-width: 768px) {
.mtc-shop .top-angebote-head {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
}
}
.mtc-shop .top-angebote-head-left { flex: 1; }
.mtc-shop .top-angebote-eyebrow {
display: inline-block;
font-size: var(--mtc-fs-eyebrow);
font-weight: var(--mtc-fw-bold);
letter-spacing: var(--mtc-track-wide);
text-transform: uppercase;
color: var(--mtc-orange);
margin-bottom: var(--mtc-s-3);
}
.mtc-shop .top-angebote-title {
font-size: var(--mtc-fs-h2);
font-weight: var(--mtc-fw-black);
color: var(--mtc-ink);
letter-spacing: var(--mtc-track-tight);
line-height: var(--mtc-lh-tight);
margin: 0;
}
@media (min-width: 1024px) {
.mtc-shop .top-angebote-title { font-size: var(--mtc-fs-h1); }
}
.mtc-shop .top-angebote-link {
display: inline-flex;
align-items: center;
gap: var(--mtc-s-2);
font-size: var(--mtc-fs-caption);
font-weight: var(--mtc-fw-bold);
color: var(--mtc-orange);
align-self: flex-start;
}
.mtc-shop .top-angebote-link svg {
width: 16px; height: 16px;
transition: transform var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .top-angebote-link:hover svg { transform: translateX(4px); }
.mtc-shop .ta-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--mtc-s-3);
}
@media (min-width: 768px) {
.mtc-shop .ta-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--mtc-s-4);
}
}
@media (min-width: 1280px) {
.mtc-shop .ta-grid {
grid-template-columns: repeat(5, 1fr);
}
}
/* TA-Card */
.mtc-shop .ta-card {
display: flex;
flex-direction: column;
background: var(--mtc-white);
border: 1px solid var(--mtc-line);
border-radius: var(--mtc-r-lg);
overflow: hidden;
transition: all var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .ta-card:hover {
transform: translateY(-4px);
border-color: transparent;
box-shadow: var(--mtc-shadow-lg);
}
.mtc-shop .ta-card-link {
display: flex;
flex-direction: column;
flex: 1;
}
.mtc-shop .ta-media {
aspect-ratio: 1;
background: var(--mtc-white);
position: relative;
overflow: hidden;
}
.mtc-shop .ta-media img {
width: 100%;
height: 100%;
object-fit: contain;
padding: var(--mtc-s-4);
background: var(--mtc-white);
mix-blend-mode: multiply;
transition: transform var(--mtc-speed-slow) var(--mtc-ease);
}
.mtc-shop .ta-card:hover .ta-media img { transform: scale(1.06); }
/* Brand-Logo Glass-Pill */
.mtc-shop .ta-brand-logo {
position: absolute;
top: var(--mtc-s-2);
left: var(--mtc-s-2);
height: 28px;
padding: 0 10px;
background: rgba(255, 255, 255, .9);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--mtc-line);
border-radius: var(--mtc-r-pill);
display: inline-flex;
align-items: center;
z-index: 2;
}
.mtc-shop .ta-brand-logo img {
max-height: 14px;
width: auto;
object-fit: contain;
background: transparent;
mix-blend-mode: normal;
padding: 0;
filter: grayscale(0%) opacity(.85);
}
.mtc-shop .ta-brand-text {
position: absolute;
top: var(--mtc-s-2);
left: var(--mtc-s-2);
height: 24px;
padding: 0 10px;
background: rgba(255, 255, 255, .9);
backdrop-filter: blur(8px);
border-radius: var(--mtc-r-pill);
font-size: 11px;
font-weight: var(--mtc-fw-bold);
color: var(--mtc-ink-2);
display: inline-flex;
align-items: center;
z-index: 2;
}
/* Badges */
.mtc-shop .ta-badges {
position: absolute;
bottom: var(--mtc-s-2);
left: var(--mtc-s-2);
display: flex;
gap: 4px;
z-index: 2;
}
.mtc-shop .ta-badge {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 8px;
border-radius: var(--mtc-r-pill);
font-size: 10px;
font-weight: var(--mtc-fw-bold);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.mtc-shop .ta-badge-new {
background: var(--mtc-green);
color: var(--mtc-white);
}
.mtc-shop .ta-badge-stock {
background: var(--mtc-white);
color: var(--mtc-ink);
border: 1px solid var(--mtc-line);
}
/* Wishlist */
.mtc-shop .ta-wishlist {
position: absolute;
top: var(--mtc-s-2);
right: var(--mtc-s-2);
width: 32px; height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(8px);
border: 1px solid var(--mtc-line);
color: var(--mtc-mute);
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: all var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .ta-wishlist svg { width: 16px; height: 16px; }
.mtc-shop .ta-wishlist:hover {
color: var(--mtc-red);
border-color: var(--mtc-red);
transform: scale(1.08);
}
/* Info */
.mtc-shop .ta-info {
display: flex;
flex-direction: column;
gap: var(--mtc-s-2);
padding: var(--mtc-s-4);
flex: 1;
}
.mtc-shop .ta-title {
font-size: var(--mtc-fs-caption);
font-weight: var(--mtc-fw-bold);
color: var(--mtc-ink);
line-height: 1.35;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 36px;
}
@media (min-width: 768px) {
.mtc-shop .ta-title { font-size: var(--mtc-fs-body); min-height: 42px; }
}
.mtc-shop .ta-price-row {
display: flex;
align-items: baseline;
gap: var(--mtc-s-2);
}
.mtc-shop .ta-price {
font-size: var(--mtc-fs-h4);
font-weight: var(--mtc-fw-black);
color: var(--mtc-orange);
letter-spacing: var(--mtc-track-tight);
line-height: 1;
}
.mtc-shop .ta-shipping-wrap {
display: flex;
flex-direction: column;
gap: 2px;
padding-top: var(--mtc-s-2);
border-top: 1px solid var(--mtc-line-2);
margin-top: auto;
}
.mtc-shop .ta-shipping {
font-size: 11px;
color: var(--mtc-mute);
line-height: 1.4;
}
.mtc-shop .ta-shipping-time {
color: var(--mtc-green-dark);
font-weight: var(--mtc-fw-semi);
}
/* Cart-CTA */
.mtc-shop .ta-cart {
display: flex;
align-items: center;
justify-content: center;
gap: var(--mtc-s-2);
height: 44px;
margin: 0 var(--mtc-s-3) var(--mtc-s-3);
background: var(--mtc-orange);
color: var(--mtc-white);
border-radius: var(--mtc-r-pill);
font-size: var(--mtc-fs-caption);
font-weight: var(--mtc-fw-bold);
transition: all var(--mtc-speed) var(--mtc-ease);
position: relative;
overflow: hidden;
}
.mtc-shop .ta-cart svg { width: 14px; height: 14px; }
.mtc-shop .ta-cart::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.6s var(--mtc-ease);
}
.mtc-shop .ta-cart:hover {
background: var(--mtc-orange-dark);
}
.mtc-shop .ta-cart:hover::before { transform: translateX(100%); }
/* Empty Premium Fallback */
.mtc-shop .ta-empty-premium {
text-align: center;
padding: var(--mtc-s-10) var(--mtc-s-4);
background: var(--mtc-white);
border: 1px dashed var(--mtc-line);
border-radius: var(--mtc-r-xl);
}
.mtc-shop .ta-empty-premium-eyebrow {
display: inline-block;
font-size: var(--mtc-fs-eyebrow);
font-weight: var(--mtc-fw-bold);
letter-spacing: var(--mtc-track-wide);
text-transform: uppercase;
color: var(--mtc-orange);
margin-bottom: var(--mtc-s-3);
}
.mtc-shop .ta-empty-premium h3 {
font-size: var(--mtc-fs-h2);
font-weight: var(--mtc-fw-black);
color: var(--mtc-ink);
margin: 0 0 var(--mtc-s-3);
}
.mtc-shop .ta-empty-premium p {
font-size: var(--mtc-fs-body);
color: var(--mtc-mute);
margin: 0 auto var(--mtc-s-5);
max-width: 480px;
}
.mtc-shop .ta-empty-premium a {
display: inline-flex;
align-items: center;
gap: var(--mtc-s-2);
height: 48px;
padding: 0 var(--mtc-s-7);
background: var(--mtc-orange);
color: var(--mtc-white);
border-radius: var(--mtc-r-pill);
font-weight: var(--mtc-fw-bold);
font-size: var(--mtc-fs-caption);
transition: transform var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .ta-empty-premium a:hover { transform: translateY(-2px); }
/* =====================================================================
05 β BANNERS β _banners.tpl
=====================================================================
3 Banner-Karten: Workstations (Purple) Β· Refurbished (Blau) Β· eBay (Gold)
Mobile: 1 Spalte
Tablet: 2 Spalten
Desktop: 3 Spalten
===================================================================== */
.mtc-shop .mtc-banners {
background: var(--mtc-white);
}
.mtc-shop .mb-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--mtc-s-4);
}
@media (min-width: 768px) {
.mtc-shop .mb-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--mtc-s-5);
}
}
@media (min-width: 1024px) {
.mtc-shop .mb-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* MB-Card Base */
.mtc-shop .mb-card {
display: flex;
flex-direction: column;
gap: var(--mtc-s-4);
padding: var(--mtc-s-6);
background: var(--mtc-white);
border: 1px solid var(--mtc-line);
border-radius: var(--mtc-r-xl);
transition: all var(--mtc-speed) var(--mtc-ease);
position: relative;
overflow: hidden;
min-height: 320px;
}
.mtc-shop .mb-card::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 4px;
background: var(--mtc-line);
transition: background var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .mb-card--purple::before { background: linear-gradient(90deg, var(--mtc-purple) 0%, var(--mtc-purple-dark) 100%); }
.mtc-shop .mb-card--blue::before { background: linear-gradient(90deg, var(--mtc-blue) 0%, var(--mtc-blue-dark) 100%); }
.mtc-shop .mb-card--gold::before { background: linear-gradient(90deg, var(--mtc-gold) 0%, var(--mtc-gold-dark) 100%); }
.mtc-shop .mb-card:hover {
transform: translateY(-4px);
border-color: transparent;
box-shadow: var(--mtc-shadow-lg);
}
/* MB-Head */
.mtc-shop .mb-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mtc-s-3);
}
.mtc-shop .mb-badge {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 var(--mtc-s-3);
border-radius: var(--mtc-r-pill);
font-size: var(--mtc-fs-eyebrow);
font-weight: var(--mtc-fw-bold);
letter-spacing: var(--mtc-track-wide);
text-transform: uppercase;
}
.mtc-shop .mb-badge svg { width: 14px; height: 14px; }
.mtc-shop .mb-badge--purple { background: var(--mtc-purple-soft); color: var(--mtc-purple-dark); }
.mtc-shop .mb-badge--blue { background: var(--mtc-blue-soft); color: var(--mtc-blue-dark); }
.mtc-shop .mb-badge--gold { background: var(--mtc-gold-soft); color: var(--mtc-gold-dark); }
/* Logos in Banner */
.mtc-shop .mb-logos {
display: flex;
gap: var(--mtc-s-2);
align-items: center;
}
.mtc-shop .mb-logo {
height: 22px;
width: auto;
background: transparent;
filter: none;
opacity: 1;
transition: transform var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .mb-card:hover .mb-logo {
transform: scale(1.05);
}
/* Stars (Banner 3) */
.mtc-shop .mb-stars-wrap { display: inline-flex; }
.mtc-shop .mb-stars {
font-size: var(--mtc-fs-body);
color: var(--mtc-gold);
letter-spacing: 2px;
}
/* MB-Body */
.mtc-shop .mb-card-body {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--mtc-s-3);
}
.mtc-shop .mb-title {
font-size: var(--mtc-fs-h3);
font-weight: var(--mtc-fw-black);
color: var(--mtc-ink);
letter-spacing: var(--mtc-track-tight);
line-height: 1.15;
margin: 0;
}
@media (min-width: 1024px) {
.mtc-shop .mb-title { font-size: var(--mtc-fs-h2); }
}
.mtc-shop .mb-subline {
font-size: var(--mtc-fs-caption);
color: var(--mtc-mute);
line-height: 1.55;
margin: 0;
}
/* Trust-Liste (Banner 3) */
.mtc-shop .mb-trust-list {
display: flex;
flex-direction: column;
gap: var(--mtc-s-2);
}
.mtc-shop .mb-trust-list li {
display: flex;
align-items: center;
gap: var(--mtc-s-2);
font-size: var(--mtc-fs-caption);
color: var(--mtc-ink-2);
font-weight: var(--mtc-fw-medium);
}
.mtc-shop .mb-trust-list svg {
width: 16px; height: 16px;
color: var(--mtc-gold-dark);
flex-shrink: 0;
}
/* MB-Foot */
.mtc-shop .mb-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mtc-s-3);
padding-top: var(--mtc-s-4);
border-top: 1px solid var(--mtc-line-2);
}
.mtc-shop .mb-price {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.mtc-shop .mb-price-from {
font-size: 11px;
color: var(--mtc-mute);
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: var(--mtc-fw-bold);
}
.mtc-shop .mb-price-value {
font-size: var(--mtc-fs-h3);
font-weight: var(--mtc-fw-black);
color: var(--mtc-ink);
letter-spacing: var(--mtc-track-tight);
}
.mtc-shop .mb-rating { display: flex; flex-direction: column; }
.mtc-shop .mb-rating-label {
font-size: var(--mtc-fs-caption);
font-weight: var(--mtc-fw-bold);
color: var(--mtc-gold-dark);
}
.mtc-shop .mb-cta {
display: inline-flex;
align-items: center;
gap: var(--mtc-s-2);
height: 42px;
padding: 0 var(--mtc-s-5);
background: var(--mtc-orange);
color: var(--mtc-white);
border-radius: var(--mtc-r-pill);
font-size: var(--mtc-fs-caption);
font-weight: var(--mtc-fw-bold);
transition: all var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .mb-cta svg { width: 14px; height: 14px; }
.mtc-shop .mb-card:hover .mb-cta {
background: var(--mtc-orange-dark);
transform: translateX(4px);
}
/* =====================================================================
06 β KOMPONENTEN β _komponenten.tpl
=====================================================================
10 Karten (CPU, GPU, RAM, SSD, MB, PSU, RAID, Server-Board/RAM/PSU)
Mobile: 2 Spalten
Desktop: 5 Spalten Γ 2 Reihen
===================================================================== */
.mtc-shop .kmp {
background: var(--mtc-mist-2);
}
.mtc-shop .kmp-head {
display: flex;
flex-direction: column;
gap: var(--mtc-s-3);
margin-bottom: var(--mtc-s-7);
}
@media (min-width: 768px) {
.mtc-shop .kmp-head {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
}
}
.mtc-shop .kmp-head-left { flex: 1; }
.mtc-shop .kmp-eyebrow {
display: inline-block;
font-size: var(--mtc-fs-eyebrow);
font-weight: var(--mtc-fw-bold);
letter-spacing: var(--mtc-track-wide);
text-transform: uppercase;
color: var(--mtc-orange);
margin-bottom: var(--mtc-s-3);
}
.mtc-shop .kmp-title {
font-size: var(--mtc-fs-h2);
font-weight: var(--mtc-fw-black);
color: var(--mtc-ink);
letter-spacing: var(--mtc-track-tight);
line-height: var(--mtc-lh-tight);
margin: 0;
}
@media (min-width: 1024px) {
.mtc-shop .kmp-title { font-size: var(--mtc-fs-h1); }
}
.mtc-shop .kmp-link {
display: inline-flex;
align-items: center;
gap: var(--mtc-s-2);
font-size: var(--mtc-fs-caption);
font-weight: var(--mtc-fw-bold);
color: var(--mtc-orange);
align-self: flex-start;
}
.mtc-shop .kmp-link svg {
width: 16px; height: 16px;
transition: transform var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .kmp-link:hover svg { transform: translateX(4px); }
.mtc-shop .kmp-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--mtc-s-3);
}
@media (min-width: 768px) {
.mtc-shop .kmp-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--mtc-s-4);
}
}
@media (min-width: 1280px) {
.mtc-shop .kmp-grid {
grid-template-columns: repeat(5, 1fr);
}
}
/* KMP-Card */
.mtc-shop .kmp-card {
display: flex;
flex-direction: column;
background: var(--mtc-white);
border: 1px solid var(--mtc-line);
border-radius: var(--mtc-r-lg);
overflow: hidden;
transition: all var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .kmp-card:hover {
transform: translateY(-4px);
border-color: transparent;
box-shadow: var(--mtc-shadow-lg);
}
.mtc-shop .kmp-card-link {
display: flex;
flex-direction: column;
flex: 1;
}
.mtc-shop .kmp-media {
aspect-ratio: 1;
background: var(--mtc-white);
position: relative;
overflow: hidden;
}
.mtc-shop .kmp-media img {
width: 100%;
height: 100%;
object-fit: contain;
padding: var(--mtc-s-4);
background: var(--mtc-white);
mix-blend-mode: multiply;
transition: transform var(--mtc-speed-slow) var(--mtc-ease);
}
.mtc-shop .kmp-card:hover .kmp-media img { transform: scale(1.06); }
.mtc-shop .kmp-badges {
position: absolute;
top: var(--mtc-s-2);
left: var(--mtc-s-2);
display: flex;
gap: 4px;
z-index: 2;
}
.mtc-shop .kmp-badge {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 10px;
border-radius: var(--mtc-r-pill);
font-size: 10px;
font-weight: var(--mtc-fw-bold);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.mtc-shop .kmp-badge-cat {
background: var(--mtc-ink);
color: var(--mtc-white);
}
.mtc-shop .kmp-info {
display: flex;
flex-direction: column;
gap: 6px;
padding: var(--mtc-s-3) var(--mtc-s-4) var(--mtc-s-2);
flex: 1;
}
.mtc-shop .kmp-brand {
font-size: 11px;
font-weight: var(--mtc-fw-bold);
color: var(--mtc-mute);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.mtc-shop .kmp-name {
font-size: var(--mtc-fs-caption);
font-weight: var(--mtc-fw-bold);
color: var(--mtc-ink);
line-height: 1.35;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 36px;
}
.mtc-shop .kmp-price-row { margin-top: auto; }
.mtc-shop .kmp-price {
font-size: var(--mtc-fs-h4);
font-weight: var(--mtc-fw-black);
color: var(--mtc-orange);
letter-spacing: var(--mtc-track-tight);
line-height: 1;
}
.mtc-shop .kmp-shipping {
font-size: 11px;
color: var(--mtc-green-dark);
font-weight: var(--mtc-fw-semi);
}
.mtc-shop .kmp-cart {
display: flex;
align-items: center;
justify-content: center;
gap: var(--mtc-s-2);
height: 40px;
margin: 0 var(--mtc-s-3) var(--mtc-s-3);
background: var(--mtc-orange);
color: var(--mtc-white);
border-radius: var(--mtc-r-pill);
font-size: 12px;
font-weight: var(--mtc-fw-bold);
transition: background var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .kmp-cart svg { width: 14px; height: 14px; }
.mtc-shop .kmp-cart:hover { background: var(--mtc-orange-dark); }
/* Empty Fallback */
.mtc-shop .kmp-empty {
text-align: center;
padding: var(--mtc-s-10) var(--mtc-s-4);
background: var(--mtc-white);
border: 1px dashed var(--mtc-line);
border-radius: var(--mtc-r-xl);
}
.mtc-shop .kmp-empty-eyebrow {
display: inline-block;
font-size: var(--mtc-fs-eyebrow);
font-weight: var(--mtc-fw-bold);
letter-spacing: var(--mtc-track-wide);
text-transform: uppercase;
color: var(--mtc-orange);
margin-bottom: var(--mtc-s-3);
}
.mtc-shop .kmp-empty h3 {
font-size: var(--mtc-fs-h2);
font-weight: var(--mtc-fw-black);
color: var(--mtc-ink);
margin: 0 0 var(--mtc-s-3);
}
.mtc-shop .kmp-empty p {
font-size: var(--mtc-fs-body);
color: var(--mtc-mute);
margin: 0 auto var(--mtc-s-5);
max-width: 480px;
}
.mtc-shop .kmp-empty a {
display: inline-flex;
align-items: center;
gap: var(--mtc-s-2);
height: 48px;
padding: 0 var(--mtc-s-7);
background: var(--mtc-orange);
color: var(--mtc-white);
border-radius: var(--mtc-r-pill);
font-weight: var(--mtc-fw-bold);
font-size: var(--mtc-fs-caption);
transition: transform var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .kmp-empty a:hover { transform: translateY(-2px); }
/* =====================================================================
07 β QUALITΓT β _qualitaet.tpl
=====================================================================
3 Karten: Neuware (GrΓΌn) Β· B-Ware (Blau) Β· Refurbished (Orange)
Mobile: 1 Spalte
Desktop: 3 Spalten
===================================================================== */
.mtc-shop .qlt {
background: var(--mtc-white);
}
.mtc-shop .qlt-head {
text-align: center;
margin-bottom: var(--mtc-s-7);
}
.mtc-shop .qlt-eyebrow {
display: inline-block;
font-size: var(--mtc-fs-eyebrow);
font-weight: var(--mtc-fw-bold);
letter-spacing: var(--mtc-track-wide);
text-transform: uppercase;
color: var(--mtc-orange);
margin-bottom: var(--mtc-s-3);
}
.mtc-shop .qlt-title {
font-size: var(--mtc-fs-h2);
font-weight: var(--mtc-fw-black);
color: var(--mtc-ink);
letter-spacing: var(--mtc-track-tight);
line-height: var(--mtc-lh-tight);
margin: 0;
}
@media (min-width: 1024px) {
.mtc-shop .qlt-title { font-size: var(--mtc-fs-h1); }
}
.mtc-shop .qlt-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--mtc-s-4);
}
@media (min-width: 1024px) {
.mtc-shop .qlt-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--mtc-s-5);
}
}
/* QLT-Card */
.mtc-shop .qlt-card {
display: flex;
flex-direction: column;
gap: var(--mtc-s-4);
padding: var(--mtc-s-6);
background: var(--mtc-white);
border: 1px solid var(--mtc-line);
border-radius: var(--mtc-r-xl);
transition: all var(--mtc-speed) var(--mtc-ease);
position: relative;
overflow: hidden;
}
.mtc-shop .qlt-card::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 4px;
transition: height var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .qlt-card-neu::before { background: linear-gradient(90deg, var(--mtc-green) 0%, var(--mtc-green-dark) 100%); }
.mtc-shop .qlt-card-bw::before { background: linear-gradient(90deg, var(--mtc-blue) 0%, var(--mtc-blue-dark) 100%); }
.mtc-shop .qlt-card-ref::before { background: linear-gradient(90deg, var(--mtc-orange) 0%, var(--mtc-orange-dark) 100%); }
.mtc-shop .qlt-card:hover {
transform: translateY(-4px);
border-color: transparent;
box-shadow: var(--mtc-shadow-lg);
}
.mtc-shop .qlt-card:hover::before { height: 6px; }
/* QLT-Card-Head */
.mtc-shop .qlt-card-head {
display: flex;
flex-direction: column;
gap: var(--mtc-s-2);
}
.mtc-shop .qlt-tag {
display: inline-flex;
align-self: flex-start;
align-items: center;
height: 28px;
padding: 0 var(--mtc-s-3);
border-radius: var(--mtc-r-pill);
font-size: var(--mtc-fs-eyebrow);
font-weight: var(--mtc-fw-bold);
letter-spacing: var(--mtc-track-wide);
text-transform: uppercase;
}
.mtc-shop .qlt-tag-neu { background: var(--mtc-green-soft); color: var(--mtc-green-dark); }
.mtc-shop .qlt-tag-bw { background: var(--mtc-blue-soft); color: var(--mtc-blue-dark); }
.mtc-shop .qlt-tag-ref { background: var(--mtc-orange-soft); color: var(--mtc-orange-dark); }
.mtc-shop .qlt-card-title {
font-size: var(--mtc-fs-h3);
font-weight: var(--mtc-fw-black);
color: var(--mtc-ink);
letter-spacing: var(--mtc-track-tight);
margin: 0;
}
.mtc-shop .qlt-card-desc {
font-size: var(--mtc-fs-caption);
color: var(--mtc-mute);
line-height: 1.55;
margin: 0;
}
/* QLT-Product */
.mtc-shop .qlt-product {
display: flex;
align-items: center;
gap: var(--mtc-s-3);
padding: var(--mtc-s-3);
background: var(--mtc-mist-2);
border-radius: var(--mtc-r-md);
transition: all var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .qlt-product:hover {
background: var(--mtc-white);
box-shadow: var(--mtc-shadow);
}
.mtc-shop .qlt-product-media {
width: 64px;
height: 64px;
background: var(--mtc-white);
border-radius: var(--mtc-r-sm);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.mtc-shop .qlt-product-media img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
background: var(--mtc-white);
mix-blend-mode: multiply;
}
.mtc-shop .qlt-product-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.mtc-shop .qlt-product-brand {
font-size: 10px;
font-weight: var(--mtc-fw-bold);
color: var(--mtc-mute);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.mtc-shop .qlt-product-name {
font-size: var(--mtc-fs-caption);
font-weight: var(--mtc-fw-bold);
color: var(--mtc-ink);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mtc-shop .qlt-product-price {
font-size: var(--mtc-fs-caption);
font-weight: var(--mtc-fw-black);
color: var(--mtc-orange);
margin-top: 2px;
}
/* Savings */
.mtc-shop .qlt-savings {
display: inline-flex;
align-items: center;
gap: var(--mtc-s-2);
padding: var(--mtc-s-2) var(--mtc-s-3);
border-radius: var(--mtc-r-md);
font-size: var(--mtc-fs-caption);
align-self: flex-start;
}
.mtc-shop .qlt-savings svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.mtc-shop .qlt-savings strong {
font-weight: var(--mtc-fw-bold);
}
.mtc-shop .qlt-savings-neu {
background: var(--mtc-green-soft);
color: var(--mtc-green-dark);
}
.mtc-shop .qlt-savings-bw {
background: var(--mtc-blue-soft);
color: var(--mtc-blue-dark);
}
.mtc-shop .qlt-savings-ref {
background: var(--mtc-orange-soft);
color: var(--mtc-orange-dark);
}
/* QLT-CTA */
.mtc-shop .qlt-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--mtc-s-2);
height: 48px;
background: var(--mtc-orange);
color: var(--mtc-white);
border-radius: var(--mtc-r-pill);
font-size: var(--mtc-fs-caption);
font-weight: var(--mtc-fw-bold);
transition: all var(--mtc-speed) var(--mtc-ease);
margin-top: auto;
}
.mtc-shop .qlt-cta svg { width: 14px; height: 14px; }
.mtc-shop .qlt-cta:hover {
background: var(--mtc-orange-dark);
transform: translateY(-2px);
}
/* =====================================================================
08 β SERVICES β _services.tpl
=====================================================================
6 Service-Karten + CTA-Banner am Ende
Mobile: 1 Spalte
Tablet: 2 Spalten
Desktop: 3 Spalten Γ 2 Reihen
===================================================================== */
.mtc-shop .svc {
background: var(--mtc-mist-2);
}
.mtc-shop .svc-head {
text-align: center;
max-width: 720px;
margin: 0 auto var(--mtc-s-7);
}
.mtc-shop .svc-eyebrow {
display: inline-block;
font-size: var(--mtc-fs-eyebrow);
font-weight: var(--mtc-fw-bold);
letter-spacing: var(--mtc-track-wide);
text-transform: uppercase;
color: var(--mtc-orange);
margin-bottom: var(--mtc-s-3);
}
.mtc-shop .svc-title {
font-size: var(--mtc-fs-h2);
font-weight: var(--mtc-fw-black);
color: var(--mtc-ink);
letter-spacing: var(--mtc-track-tight);
line-height: var(--mtc-lh-tight);
margin: 0 0 var(--mtc-s-3);
}
@media (min-width: 1024px) {
.mtc-shop .svc-title { font-size: var(--mtc-fs-h1); }
}
.mtc-shop .svc-sub {
font-size: var(--mtc-fs-body);
color: var(--mtc-mute);
line-height: var(--mtc-lh-base);
margin: 0;
}
.mtc-shop .svc-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--mtc-s-4);
margin-bottom: var(--mtc-s-7);
}
@media (min-width: 768px) {
.mtc-shop .svc-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--mtc-s-5);
}
}
@media (min-width: 1024px) {
.mtc-shop .svc-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* SVC-Card */
.mtc-shop .svc-card {
display: flex;
flex-direction: column;
gap: var(--mtc-s-3);
padding: var(--mtc-s-6);
background: var(--mtc-white);
border: 1px solid var(--mtc-line);
border-radius: var(--mtc-r-xl);
transition: all var(--mtc-speed) var(--mtc-ease);
position: relative;
overflow: hidden;
}
.mtc-shop .svc-card::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 3px;
background: var(--mtc-line);
transition: background var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .svc-card-azure::before { background: linear-gradient(90deg, #0078D4 0%, #50E6FF 100%); }
.mtc-shop .svc-card-dev::before { background: linear-gradient(90deg, var(--mtc-purple) 0%, var(--mtc-purple-dark) 100%); }
.mtc-shop .svc-card-rollout::before { background: linear-gradient(90deg, var(--mtc-orange) 0%, var(--mtc-orange-dark) 100%); }
.mtc-shop .svc-card-support::before { background: linear-gradient(90deg, var(--mtc-green) 0%, var(--mtc-green-dark) 100%); }
.mtc-shop .svc-card-security::before { background: linear-gradient(90deg, var(--mtc-cyan) 0%, var(--mtc-cyan-dark) 100%); }
.mtc-shop .svc-card-consulting::before { background: linear-gradient(90deg, var(--mtc-gold) 0%, var(--mtc-gold-dark) 100%); }
.mtc-shop .svc-card:hover {
transform: translateY(-4px);
border-color: transparent;
box-shadow: var(--mtc-shadow-lg);
}
/* SVC-Card-Top */
.mtc-shop .svc-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mtc-s-3);
}
.mtc-shop .svc-icon {
width: 48px; height: 48px;
border-radius: var(--mtc-r-md);
background: var(--mtc-mist);
display: inline-flex;
align-items: center;
justify-content: center;
transition: all var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .svc-icon svg { width: 24px; height: 24px; }
.mtc-shop .svc-card-azure .svc-icon { background: #E0F2FE; color: #0078D4; }
.mtc-shop .svc-card-dev .svc-icon { background: var(--mtc-purple-soft); color: var(--mtc-purple-dark); }
.mtc-shop .svc-card-rollout .svc-icon { background: var(--mtc-orange-soft); color: var(--mtc-orange-dark); }
.mtc-shop .svc-card-support .svc-icon { background: var(--mtc-green-soft); color: var(--mtc-green-dark); }
.mtc-shop .svc-card-security .svc-icon { background: var(--mtc-cyan-soft); color: var(--mtc-cyan-dark); }
.mtc-shop .svc-card-consulting .svc-icon { background: var(--mtc-gold-soft); color: var(--mtc-gold-dark); }
.mtc-shop .svc-card:hover .svc-icon { transform: scale(1.08) rotate(-3deg); }
.mtc-shop .svc-tag {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 10px;
background: var(--mtc-mist);
border-radius: var(--mtc-r-pill);
font-size: 10px;
font-weight: var(--mtc-fw-bold);
letter-spacing: var(--mtc-track-wide);
text-transform: uppercase;
color: var(--mtc-ink-2);
}
.mtc-shop .svc-card-title {
font-size: var(--mtc-fs-h4);
font-weight: var(--mtc-fw-black);
color: var(--mtc-ink);
letter-spacing: var(--mtc-track-tight);
margin: 0;
}
.mtc-shop .svc-card-desc {
font-size: var(--mtc-fs-caption);
color: var(--mtc-mute);
line-height: 1.55;
margin: 0;
flex: 1;
}
.mtc-shop .svc-card-features {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.mtc-shop .svc-card-features span {
display: inline-flex;
align-items: center;
height: 26px;
padding: 0 var(--mtc-s-3);
background: var(--mtc-mist);
border-radius: var(--mtc-r-pill);
font-size: 11px;
font-weight: var(--mtc-fw-semi);
color: var(--mtc-ink-2);
letter-spacing: -0.01em;
}
.mtc-shop .svc-card-cta {
display: inline-flex;
align-items: center;
gap: var(--mtc-s-2);
font-size: var(--mtc-fs-caption);
font-weight: var(--mtc-fw-bold);
color: var(--mtc-orange);
margin-top: var(--mtc-s-2);
padding-top: var(--mtc-s-3);
border-top: 1px solid var(--mtc-line-2);
}
.mtc-shop .svc-card-cta svg {
width: 16px; height: 16px;
transition: transform var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .svc-card:hover .svc-card-cta svg { transform: translateX(4px); }
/* SVC CTA-Banner */
.mtc-shop .svc-cta-banner {
display: flex;
flex-direction: column;
gap: var(--mtc-s-5);
padding: var(--mtc-s-7) var(--mtc-s-6);
background: linear-gradient(135deg, var(--mtc-ink) 0%, var(--mtc-ink-2) 100%);
border-radius: var(--mtc-r-xl);
color: var(--mtc-white);
}
@media (min-width: 768px) {
.mtc-shop .svc-cta-banner {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: var(--mtc-s-8) var(--mtc-s-9);
}
}
.mtc-shop .svc-cta-banner-left { flex: 1; }
.mtc-shop .svc-cta-banner-eyebrow {
display: inline-block;
font-size: var(--mtc-fs-eyebrow);
font-weight: var(--mtc-fw-bold);
letter-spacing: var(--mtc-track-wide);
text-transform: uppercase;
color: var(--mtc-orange);
margin-bottom: var(--mtc-s-3);
}
.mtc-shop .svc-cta-banner-title {
font-size: var(--mtc-fs-h3);
font-weight: var(--mtc-fw-black);
color: var(--mtc-white);
letter-spacing: var(--mtc-track-tight);
margin: 0 0 var(--mtc-s-2);
}
@media (min-width: 1024px) {
.mtc-shop .svc-cta-banner-title { font-size: var(--mtc-fs-h2); }
}
.mtc-shop .svc-cta-banner-desc {
font-size: var(--mtc-fs-body);
color: rgba(255, 255, 255, .75);
margin: 0;
line-height: 1.55;
}
.mtc-shop .svc-cta-banner-right {
display: flex;
flex-direction: column;
gap: var(--mtc-s-3);
}
@media (min-width: 480px) {
.mtc-shop .svc-cta-banner-right { flex-direction: row; }
}
.mtc-shop .svc-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--mtc-s-2);
height: 52px;
padding: 0 var(--mtc-s-7);
border-radius: var(--mtc-r-pill);
font-size: var(--mtc-fs-caption);
font-weight: var(--mtc-fw-bold);
transition: all var(--mtc-speed) var(--mtc-ease);
white-space: nowrap;
}
.mtc-shop .svc-cta-btn svg { width: 16px; height: 16px; }
.mtc-shop .svc-cta-btn-primary {
background: var(--mtc-orange);
color: var(--mtc-white);
}
.mtc-shop .svc-cta-btn-primary:hover {
background: var(--mtc-orange-dark);
transform: translateY(-2px);
}
.mtc-shop .svc-cta-btn-ghost {
background: rgba(255, 255, 255, .1);
color: var(--mtc-white);
border: 1px solid rgba(255, 255, 255, .2);
}
.mtc-shop .svc-cta-btn-ghost:hover {
background: rgba(255, 255, 255, .2);
transform: translateY(-2px);
}
/* =====================================================================
09 β MTC AI β _mtc-ai.tpl
=====================================================================
Dark Cyan Premium Β· WOW Β· OpenAI/Anthropic Style
Mobile: 1 Spalte (Visual unten)
Desktop: 2 Spalten (Content links, Visual rechts)
===================================================================== */
.mtc-shop .mtc-ai {
background: var(--mtc-white);
}
.mtc-shop .mtc-ai-card {
display: grid;
grid-template-columns: 1fr;
gap: var(--mtc-s-6);
padding: var(--mtc-s-8) var(--mtc-s-6);
background: linear-gradient(135deg, #020617 0%, #0F172A 50%, #0C4A6E 100%);
border-radius: var(--mtc-r-2xl);
position: relative;
overflow: hidden;
color: var(--mtc-white);
isolation: isolate;
}
@media (min-width: 1024px) {
.mtc-shop .mtc-ai-card {
grid-template-columns: 1.3fr 1fr;
align-items: center;
padding: var(--mtc-s-10) var(--mtc-s-9);
gap: var(--mtc-s-9);
}
}
/* Glow-Akzente */
.mtc-shop .mtc-ai-glow {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
z-index: 0;
}
.mtc-shop .mtc-ai-glow-1 {
width: 400px; height: 400px;
background: radial-gradient(circle, var(--mtc-cyan) 0%, transparent 70%);
top: -150px; right: -100px;
opacity: .35;
animation: mtcAiGlow1 12s ease-in-out infinite;
}
.mtc-shop .mtc-ai-glow-2 {
width: 350px; height: 350px;
background: radial-gradient(circle, #06B6D4 0%, transparent 70%);
bottom: -150px; left: -50px;
opacity: .25;
animation: mtcAiGlow2 14s ease-in-out infinite;
}
@keyframes mtcAiGlow1 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-30px, 30px) scale(1.1); }
}
@keyframes mtcAiGlow2 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(40px, -20px) scale(1.15); }
}
/* Animated Grid Background */
.mtc-shop .mtc-ai-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(34, 211, 238, .08) 1px, transparent 1px),
linear-gradient(90deg, rgba(34, 211, 238, .08) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);
-webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);
pointer-events: none;
z-index: 0;
}
/* Content */
.mtc-shop .mtc-ai-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: var(--mtc-s-4);
}
.mtc-shop .mtc-ai-badge {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 var(--mtc-s-3);
background: rgba(34, 211, 238, .12);
border: 1px solid rgba(34, 211, 238, .3);
border-radius: var(--mtc-r-pill);
color: #67E8F9;
font-size: var(--mtc-fs-eyebrow);
font-weight: var(--mtc-fw-bold);
letter-spacing: var(--mtc-track-wide);
text-transform: uppercase;
}
.mtc-shop .mtc-ai-pulse {
width: 8px; height: 8px;
border-radius: 50%;
background: #22D3EE;
animation: mtcPulse 1.6s ease-in-out infinite;
box-shadow: 0 0 12px #22D3EE;
}
.mtc-shop .mtc-ai-title {
font-size: var(--mtc-fs-h2);
font-weight: var(--mtc-fw-black);
color: var(--mtc-white);
letter-spacing: var(--mtc-track-tight);
line-height: 1.1;
margin: 0;
}
@media (min-width: 1024px) {
.mtc-shop .mtc-ai-title { font-size: var(--mtc-fs-display); }
}
.mtc-shop .mtc-ai-gradient {
background: linear-gradient(120deg, #67E8F9 0%, #06B6D4 50%, #0891B2 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
background-size: 200% 200%;
animation: mtcAiGradient 6s ease infinite;
}
@keyframes mtcAiGradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.mtc-shop .mtc-ai-lead {
font-size: var(--mtc-fs-body);
color: rgba(255, 255, 255, .75);
line-height: 1.55;
margin: 0;
max-width: 540px;
}
.mtc-shop .mtc-ai-features {
display: flex;
flex-wrap: wrap;
gap: var(--mtc-s-2);
margin: var(--mtc-s-2) 0;
}
.mtc-shop .mtc-ai-feature {
display: inline-flex;
align-items: center;
height: 30px;
padding: 0 var(--mtc-s-3);
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: var(--mtc-r-pill);
font-size: var(--mtc-fs-caption);
font-weight: var(--mtc-fw-semi);
color: rgba(255, 255, 255, .85);
}
.mtc-shop .mtc-ai-cta {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: var(--mtc-s-2);
height: 52px;
padding: 0 var(--mtc-s-7);
background: var(--mtc-white);
color: #0C4A6E;
border-radius: var(--mtc-r-pill);
font-size: var(--mtc-fs-caption);
font-weight: var(--mtc-fw-bold);
margin-top: var(--mtc-s-3);
transition: all var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .mtc-ai-cta svg {
width: 16px; height: 16px;
transition: transform var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .mtc-ai-card:hover .mtc-ai-cta {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(34, 211, 238, .3);
}
.mtc-shop .mtc-ai-card:hover .mtc-ai-cta svg { transform: translateX(4px); }
/* Visual */
.mtc-shop .mtc-ai-visual {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.mtc-shop .mtc-ai-orb {
width: 220px;
height: 220px;
position: relative;
color: #22D3EE;
animation: mtcAiOrb 20s linear infinite;
}
@media (min-width: 1024px) {
.mtc-shop .mtc-ai-orb { width: 320px; height: 320px; }
}
@keyframes mtcAiOrb {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.mtc-shop .mtc-ai-orb svg {
width: 100%;
height: 100%;
filter: drop-shadow(0 0 20px rgba(34, 211, 238, .5));
}
/* =====================================================================
10 β MARKEN β _marken.tpl
=====================================================================
8 Marken-Logos: HP, Dell, Lenovo, Microsoft, Intel, AMD, Samsung, NVIDIA
Mobile: 2 Spalten Γ 4 Reihen
Tablet: 4 Spalten Γ 2 Reihen
Desktop: 8 Spalten Γ 1 Reihe (oder 4 Γ 2)
===================================================================== */
.mtc-shop .mk {
background: var(--mtc-white);
border-top: 1px solid var(--mtc-line);
}
.mtc-shop .mk-head {
text-align: center;
max-width: 720px;
margin: 0 auto var(--mtc-s-7);
}
.mtc-shop .mk-eyebrow {
display: inline-block;
font-size: var(--mtc-fs-eyebrow);
font-weight: var(--mtc-fw-bold);
letter-spacing: var(--mtc-track-wide);
text-transform: uppercase;
color: var(--mtc-orange);
margin-bottom: var(--mtc-s-3);
}
.mtc-shop .mk-title {
font-size: var(--mtc-fs-h2);
font-weight: var(--mtc-fw-black);
color: var(--mtc-ink);
letter-spacing: var(--mtc-track-tight);
line-height: var(--mtc-lh-tight);
margin: 0 0 var(--mtc-s-3);
}
@media (min-width: 1024px) {
.mtc-shop .mk-title { font-size: var(--mtc-fs-h1); }
}
.mtc-shop .mk-sub {
font-size: var(--mtc-fs-body);
color: var(--mtc-mute);
line-height: var(--mtc-lh-base);
margin: 0;
}
.mtc-shop .mk-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--mtc-s-3);
}
@media (min-width: 768px) {
.mtc-shop .mk-grid {
grid-template-columns: repeat(4, 1fr);
gap: var(--mtc-s-4);
}
}
@media (min-width: 1280px) {
.mtc-shop .mk-grid {
grid-template-columns: repeat(8, 1fr);
}
}
.mtc-shop .mk-tile {
aspect-ratio: 16/9;
background: var(--mtc-white);
border: 1px solid var(--mtc-line);
border-radius: var(--mtc-r-md);
display: flex;
align-items: center;
justify-content: center;
padding: var(--mtc-s-4);
transition: all var(--mtc-speed) var(--mtc-ease);
}
@media (min-width: 1280px) {
.mtc-shop .mk-tile { aspect-ratio: 1; }
}
.mtc-shop .mk-tile img {
max-height: 32px;
max-width: 80%;
width: auto;
height: auto;
object-fit: contain;
filter: none;
opacity: 1;
transition: transform var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .mk-tile:hover {
border-color: var(--mtc-orange);
transform: translateY(-3px);
box-shadow: var(--mtc-shadow-md);
}
.mtc-shop .mk-tile:hover img {
transform: scale(1.06);
}
/* =====================================================================
11 β FOOTER β _footer.tpl (FINAL Β· Pay OBEN Β· Shipping UNTEN)
=====================================================================
Newsletter-CTA + Brand + Cols + Pay + Shipping + Bottom
Dark Premium-Anker
===================================================================== */
.mtc-shop .mtc-footer {
background: var(--mtc-ink);
color: rgba(255, 255, 255, .8);
padding: var(--mtc-s-9) 0 var(--mtc-s-5);
position: relative;
overflow: hidden;
}
.mtc-shop .mtc-footer::before {
content: "";
position: absolute;
top: 0; left: 50%;
width: 800px; height: 400px;
background: radial-gradient(circle, rgba(255, 107, 53, .12) 0%, transparent 70%);
transform: translate(-50%, -50%);
filter: blur(80px);
pointer-events: none;
}
.mtc-shop .mtc-footer-inner {
position: relative;
z-index: 1;
}
/* Newsletter-CTA */
.mtc-shop .mtc-footer-newsletter {
display: flex;
flex-direction: column;
gap: var(--mtc-s-5);
padding: var(--mtc-s-7) var(--mtc-s-6);
background: linear-gradient(135deg, rgba(255, 107, 53, .12) 0%, rgba(255, 107, 53, .04) 100%);
border: 1px solid rgba(255, 107, 53, .2);
border-radius: var(--mtc-r-xl);
margin-bottom: var(--mtc-s-9);
}
@media (min-width: 1024px) {
.mtc-shop .mtc-footer-newsletter {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: var(--mtc-s-8) var(--mtc-s-9);
}
}
.mtc-shop .mtc-footer-newsletter-left { flex: 1; max-width: 540px; }
.mtc-shop .mtc-footer-newsletter-eyebrow {
display: inline-block;
font-size: var(--mtc-fs-eyebrow);
font-weight: var(--mtc-fw-bold);
letter-spacing: var(--mtc-track-wide);
text-transform: uppercase;
color: var(--mtc-orange);
margin-bottom: var(--mtc-s-3);
}
.mtc-shop .mtc-footer-newsletter-title {
font-size: var(--mtc-fs-h3);
font-weight: var(--mtc-fw-black);
color: var(--mtc-white);
letter-spacing: var(--mtc-track-tight);
margin: 0 0 var(--mtc-s-2);
}
.mtc-shop .mtc-footer-newsletter-desc {
font-size: var(--mtc-fs-caption);
color: rgba(255, 255, 255, .65);
margin: 0;
line-height: 1.55;
}
.mtc-shop .mtc-footer-newsletter-form {
display: flex;
flex-direction: column;
gap: var(--mtc-s-3);
width: 100%;
max-width: 480px;
}
@media (min-width: 480px) {
.mtc-shop .mtc-footer-newsletter-form {
flex-direction: row;
}
}
.mtc-shop .mtc-footer-newsletter-form input {
flex: 1;
height: 52px;
padding: 0 var(--mtc-s-5);
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .15);
border-radius: var(--mtc-r-pill);
color: var(--mtc-white);
font-size: var(--mtc-fs-caption);
outline: none;
transition: border-color var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .mtc-footer-newsletter-form input::placeholder {
color: rgba(255, 255, 255, .4);
}
.mtc-shop .mtc-footer-newsletter-form input:focus {
border-color: var(--mtc-orange);
background: rgba(255, 255, 255, .12);
}
.mtc-shop .mtc-footer-newsletter-form button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--mtc-s-2);
height: 52px;
padding: 0 var(--mtc-s-7);
background: var(--mtc-orange);
color: var(--mtc-white);
border-radius: var(--mtc-r-pill);
font-size: var(--mtc-fs-caption);
font-weight: var(--mtc-fw-bold);
white-space: nowrap;
transition: all var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .mtc-footer-newsletter-form button svg { width: 16px; height: 16px; }
.mtc-shop .mtc-footer-newsletter-form button:hover {
background: var(--mtc-orange-dark);
transform: translateY(-2px);
}
/* Main Grid */
.mtc-shop .footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--mtc-s-7);
margin-bottom: var(--mtc-s-7);
}
@media (min-width: 768px) {
.mtc-shop .footer-grid {
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: var(--mtc-s-6);
}
}
/* Brand-Section */
.mtc-shop .footer-brand {
display: flex;
flex-direction: column;
gap: var(--mtc-s-4);
}
.mtc-shop .footer-logo {
font-size: var(--mtc-fs-h3);
font-weight: var(--mtc-fw-black);
color: var(--mtc-white);
letter-spacing: var(--mtc-track-tight);
}
.mtc-shop .footer-logo span { color: var(--mtc-orange); }
.mtc-shop .footer-claim {
font-size: var(--mtc-fs-caption);
color: rgba(255, 255, 255, .6);
line-height: 1.55;
margin: 0;
max-width: 380px;
}
.mtc-shop .footer-contact {
display: flex;
flex-direction: column;
gap: var(--mtc-s-3);
margin-top: var(--mtc-s-3);
}
.mtc-shop .footer-contact-item {
display: flex;
align-items: flex-start;
gap: var(--mtc-s-3);
font-size: var(--mtc-fs-caption);
color: rgba(255, 255, 255, .75);
line-height: 1.45;
transition: color var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .footer-contact-item svg {
width: 18px; height: 18px;
flex-shrink: 0;
color: var(--mtc-orange);
margin-top: 1px;
}
.mtc-shop a.footer-contact-item:hover { color: var(--mtc-white); }
.mtc-shop .footer-contact-hours { color: rgba(255, 255, 255, .55); }
/* Cols */
.mtc-shop .footer-col h4 {
font-size: var(--mtc-fs-caption);
font-weight: var(--mtc-fw-bold);
color: var(--mtc-white);
letter-spacing: var(--mtc-track-wide);
text-transform: uppercase;
margin: 0 0 var(--mtc-s-4);
}
.mtc-shop .footer-col ul {
display: flex;
flex-direction: column;
gap: var(--mtc-s-2);
}
.mtc-shop .footer-col a {
font-size: var(--mtc-fs-caption);
color: rgba(255, 255, 255, .65);
transition: color var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .footer-col a:hover { color: var(--mtc-orange); }
/* =====================================================================
PAY (OBEN Β· Premium Logo-Tiles Β· v2 grΓΆsser 08.05.2026)
===================================================================== */
.mtc-shop .footer-pay {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--mtc-s-3);
padding: var(--mtc-s-5) 0;
border-top: 1px solid rgba(255, 255, 255, .08);
}
@media (max-width: 767px) {
.mtc-shop .footer-pay {
align-items: center;
text-align: center;
}
}
.mtc-shop .footer-pay-label {
font-size: var(--mtc-fs-eyebrow);
font-weight: var(--mtc-fw-bold);
letter-spacing: var(--mtc-track-wide);
text-transform: uppercase;
color: rgba(255, 255, 255, .55);
white-space: nowrap;
}
.mtc-shop .footer-pay-tiles {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
@media (max-width: 767px) {
.mtc-shop .footer-pay-tiles { justify-content: center; }
}
.mtc-shop .footer-pay-tile {
display: inline-flex;
align-items: center;
justify-content: center;
width: 80px;
height: 50px;
border-radius: var(--mtc-r-sm, 5px);
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
transition: transform var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .footer-pay-tile:hover { transform: translateY(-2px); }
.mtc-shop .footer-pay-tile svg { width: 100%; height: 100%; display: block; }
.mtc-shop .footer-pay-trust {
display: inline-flex;
align-items: center;
gap: var(--mtc-s-2);
font-size: var(--mtc-fs-caption);
color: var(--mtc-green);
font-weight: var(--mtc-fw-semi);
white-space: nowrap;
margin-top: 4px;
}
.mtc-shop .footer-pay-trust svg { width: 16px; height: 16px; }
/* =====================================================================
SHIPPING-PARTNER (UNTEN Β· Premium Tiles Β· v2 grΓΆsser 08.05.2026)
===================================================================== */
.mtc-shop .footer-shipping {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--mtc-s-3);
padding: var(--mtc-s-5) 0;
border-top: 1px solid rgba(255, 255, 255, .08);
border-bottom: 1px solid rgba(255, 255, 255, .08);
margin-bottom: var(--mtc-s-5);
}
@media (max-width: 767px) {
.mtc-shop .footer-shipping {
align-items: center;
text-align: center;
}
}
.mtc-shop .footer-shipping-label {
font-size: var(--mtc-fs-eyebrow);
font-weight: var(--mtc-fw-bold);
letter-spacing: var(--mtc-track-wide);
text-transform: uppercase;
color: rgba(255, 255, 255, .55);
white-space: nowrap;
}
.mtc-shop .footer-shipping-tiles {
display: flex;
flex-wrap: wrap;
gap: var(--mtc-s-2);
align-items: center;
}
@media (max-width: 767px) {
.mtc-shop .footer-shipping-tiles { justify-content: center; }
}
.mtc-shop .footer-ship-tile {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100px;
height: 56px;
border-radius: var(--mtc-r-md);
overflow: hidden;
background: var(--mtc-white);
box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
transition: transform var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .footer-ship-tile:hover { transform: translateY(-2px); }
.mtc-shop .footer-ship-tile svg { width: 100%; height: 100%; display: block; }
/* Bottom */
.mtc-shop .footer-bottom {
display: flex;
flex-direction: column;
gap: var(--mtc-s-3);
align-items: center;
text-align: center;
}
@media (min-width: 768px) {
.mtc-shop .footer-bottom {
flex-direction: row;
justify-content: space-between;
text-align: left;
}
}
.mtc-shop .footer-copyright {
font-size: 12px;
color: rgba(255, 255, 255, .45);
}
.mtc-shop .footer-legal {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--mtc-s-4);
}
.mtc-shop .footer-legal a {
font-size: 12px;
color: rgba(255, 255, 255, .55);
transition: color var(--mtc-speed) var(--mtc-ease);
}
.mtc-shop .footer-legal a:hover { color: var(--mtc-orange); }
/* Mobile feinschliff */
@media (max-width: 639px) {
.mtc-shop .footer-ship-tile { width: 76px; height: 42px; }
.mtc-shop .footer-pay-tile { width: 60px; height: 36px; }
}
/* =====================================================================
12 β GLOBAL POLISH (Touch Β· Reduced-Motion Β· Print)
===================================================================== */
/* Touch-GerΓ€te: Hover deaktivieren, Tap-Feedback aktivieren */
@media (hover: none) {
.mtc-shop .ta-card:hover,
.mtc-shop .kmp-card:hover,
.mtc-shop .mb-card:hover,
.mtc-shop .qlt-card:hover,
.mtc-shop .svc-card:hover,
.mtc-shop .sz-tile:hover,
.mtc-shop .mk-tile:hover,
.mtc-shop .btn-buy:hover,
.mtc-shop .ta-cart:hover,
.mtc-shop .kmp-cart:hover,
.mtc-shop .mb-cta:hover,
.mtc-shop .qlt-cta:hover,
.mtc-shop .svc-cta-btn:hover,
.mtc-shop .mtc-ai-card:hover .mtc-ai-cta {
transform: none;
}
/* iOS-App-Tap-Feedback */
.mtc-shop .ta-card:active,
.mtc-shop .kmp-card:active,
.mtc-shop .mb-card:active,
.mtc-shop .qlt-card:active,
.mtc-shop .svc-card:active,
.mtc-shop .sz-tile:active,
.mtc-shop .mk-tile:active {
transform: scale(0.98);
transition: transform 0.1s var(--mtc-ease);
}
.mtc-shop .btn-buy:active,
.mtc-shop .ta-cart:active,
.mtc-shop .kmp-cart:active,
.mtc-shop .mb-cta:active,
.mtc-shop .qlt-cta:active {
transform: scale(0.96);
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.mtc-shop *,
.mtc-shop *::before,
.mtc-shop *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Print */
@media print {
.mtc-shop .ad-rotator,
.mtc-shop .slider-controls,
.mtc-shop .ta-wishlist,
.mtc-shop .mtc-footer-newsletter {
display: none !important;
}
}
/* Iframe-Sicherheit fΓΌr eBay-Links */
.mtc-shop .mb-card--gold[target="_blank"] {
position: relative;
}
/* =====================================================================
13 β MOBILE BOTTOM-NAV KILL (Desktop + CMS-Seiten + SVG-Constraint)
=====================================================================
Schutz vor:
1. Desktop: .mtc-mobile-nav komplett ausblenden
2. CMS-Seiten ohne .mtc-shop-Wrapper: Bottom-Nav wegblenden
3. SVG-Riesen-Symbol: feste GrΓΆΓen mit !important
4. Alte HTML-Reste in CMS/Wawi (auch ohne mtc-mobile-nav-Klasse)
===================================================================== */
/* SVG-Constraint GLOBAL β verhindert Riesen-Symbole */
.mtc-mobile-nav svg,
.mtc-fab-help svg,
.mtc-fab-top svg {
width: 22px !important;
height: 22px !important;
max-width: 22px !important;
max-height: 22px !important;
}
/* Desktop: Bottom-Nav komplett aus */
@media (min-width: 768px) {
.mtc-mobile-nav,
.mtc-mobile-nav * {
display: none !important;
}
}
/* Mobile (iPhone): Bottom-Nav klein nebeneinander, App-Style */
@media (max-width: 767px) {
/* Universeller Selektor: catch ALLE mΓΆglichen Bottom-Nav-Container */
body .mtc-mobile-nav,
body nav.mtc-mobile-nav,
body nav:has(> a[href$="/Warenkorb"]):has(> a[href$="/Wunschliste"]),
body div:has(> a[href$="/Warenkorb"]):has(> a[href$="/Wunschliste"]):has(> a[href*="navi"]),
body section:has(> a[href$="/Warenkorb"]):has(> a[href$="/Wunschliste"]):has(> a[href*="navi"]) {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
z-index: 990 !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: space-around !important;
align-items: stretch !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
padding: 8px 0 calc(8px + env(safe-area-inset-bottom)) 0 !important;
margin: 0 !important;
background: rgba(255, 255, 255, .96) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
border-top: 1px solid rgba(229, 231, 235, .8) !important;
box-shadow: 0 -4px 20px rgba(15, 20, 25, .06) !important;
list-style: none !important;
transform: none !important;
}
/* Items nebeneinander, gleichmΓ€Γig verteilt */
body .mtc-mobile-nav > *,
body .mtc-mobile-nav > a,
body .mtc-mobile-nav > li,
body .mtc-mobile-nav li > a,
body nav.mtc-mobile-nav > a,
body nav:has(> a[href$="/Warenkorb"]):has(> a[href$="/Wunschliste"]) > a,
body div:has(> a[href$="/Warenkorb"]):has(> a[href$="/Wunschliste"]):has(> a[href*="navi"]) > a {
flex: 1 1 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
padding: 6px 4px !important;
margin: 0 !important;
width: auto !important;
text-decoration: none !important;
color: #6B7280 !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: none !important;
line-height: 1.1 !important;
min-height: 56px !important;
background: transparent !important;
border: 0 !important;
text-align: center !important;
}
/* Icons innerhalb */
body .mtc-mobile-nav svg,
body .mtc-mobile-nav img,
body nav.mtc-mobile-nav svg,
body nav:has(> a[href$="/Warenkorb"]):has(> a[href$="/Wunschliste"]) svg,
body div:has(> a[href$="/Warenkorb"]):has(> a[href$="/Wunschliste"]):has(> a[href*="navi"]) svg {
width: 22px !important;
height: 22px !important;
max-width: 22px !important;
max-height: 22px !important;
color: inherit !important;
fill: none !important;
stroke: currentColor !important;
flex-shrink: 0 !important;
margin: 0 !important;
display: block !important;
}
/* Text unter Icon */
body .mtc-mobile-nav span,
body .mtc-mobile-nav > a > span,
body .mtc-mobile-nav li > a > span,
body nav.mtc-mobile-nav span,
body nav:has(> a[href$="/Warenkorb"]):has(> a[href$="/Wunschliste"]) span,
body div:has(> a[href$="/Warenkorb"]):has(> a[href$="/Wunschliste"]):has(> a[href*="navi"]) span {
font-size: 10px !important;
font-weight: 600 !important;
color: inherit !important;
text-transform: none !important;
letter-spacing: 0 !important;
line-height: 1.1 !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
width: auto !important;
text-align: center !important;
}
/* Active/Hover State */
body .mtc-mobile-nav a:hover,
body .mtc-mobile-nav a:active,
body .mtc-mobile-nav a.active,
body .mtc-mobile-nav .active,
body nav.mtc-mobile-nav a.active {
color: #FF6B35 !important;
}
/* Body padding-bottom damit Content nicht hinter Bottom-Nav verschwindet */
body {
padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
}
/* Cookie-Plugin Touch-ID-Icon auf Mobile NUR den Button umpositionieren */
/* WICHTIG: Kein scale auf #consent-manager (wΓΌrde auch Modal-Buttons schrumpfen!) */
/* WICHTIG: NUR wenn .mini (Icon-Modus) β beim ausgeklappten Modal NICHT eingreifen */
body #consent-manager.mini {
position: fixed !important;
bottom: auto !important;
top: calc(72px + env(safe-area-inset-top)) !important;
left: 8px !important;
right: auto !important;
z-index: 980 !important;
width: auto !important;
height: auto !important;
max-width: 48px !important;
}
/* Beim aktiven Modal (nicht .mini) Default-Position lassen */
body #consent-manager:not(.mini) {
position: fixed !important;
}
/* Den Icon-Button selber kleiner aber GANZ NORMAL groΓ */
body #consent-manager.mini #consent-settings-btn {
width: 40px !important;
height: 40px !important;
padding: 8px !important;
opacity: .65 !important;
transition: opacity .2s ease !important;
}
body #consent-manager.mini #consent-settings-btn:active,
body #consent-manager.mini #consent-settings-btn:hover {
opacity: 1 !important;
}
body #consent-manager.mini .consent-icon svg {
width: 22px !important;
height: 22px !important;
max-width: 22px !important;
max-height: 22px !important;
}
}
/* Auf CMS-Seiten ohne .mtc-shop-Wrapper: alle Bottom-Nav-artigen Container wegblenden
FIX 30.04.2026: unsere offizielle .mtc-mobile-nav wird IMMER ausgenommen,
auch wenn sie per JS direkt am body injiziert wurde (Kategorie-/Service-Seiten). */
nav:not(.mtc-mobile-nav):has(a[href$="/Warenkorb"]):has(a[href$="/Wunschliste"]):has(a[href*="navi.php"]):not(.mtc-shop):not(.mtc-shop *):not(.mtc-footer *),
div:not(.mtc-mobile-nav):has(> a[href$="/Warenkorb"]):has(> a[href$="/Wunschliste"]):has(> a[href*="navi.php"]):not(.mtc-shop):not(.mtc-shop *):not(.mtc-footer *),
section:not(.mtc-mobile-nav):has(> a[href$="/Warenkorb"]):has(> a[href$="/Wunschliste"]):has(> a[href*="navi.php"]):not(.mtc-shop):not(.mtc-shop *) {
display: none !important;
}
/* Sicherheits-Override 30.04.2026:
unsere offizielle Bottom-Nav darf NIE versteckt werden β egal wo im DOM. */
@media (max-width: 767px) {
html body nav.mtc-mobile-nav {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
}
/* =====================================================================
ENDE 13 β BOTTOM-NAV KILL
===================================================================== */
/* =====================================================================
14 β APP-DNA PREMIUM-LAYER (MTC SHOP wie iOS/macOS-App)
=====================================================================
Macht den Shop auf Desktop UND iPhone wie eine echte App:
- Sticky Glass-Header beim Scrollen
- Scroll-Reveal-Animations (Sections faden ein)
- Glass-Cards Hover-Lift global
- Floating Help-Pill + Pull-to-Top FAB
- iOS-Tap-Feedback Touch
- Smooth-Scroll global
- Suchfeld-Button Brand-Orange
- Bilder weiΓ ΓΌberall (auch JTL-Listings)
===================================================================== */
/* ββ 14.1 STICKY GLASS-HEADER (App-Top-Bar) ββ */
@media (min-width: 768px) {
body header,
body .nova-header,
body #header,
body #nova-header {
position: sticky;
top: 0;
z-index: 900;
background: rgba(255, 255, 255, .85);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
transition: box-shadow .3s var(--mtc-ease);
}
body.is-scrolled header,
body.is-scrolled .nova-header,
body.is-scrolled #header,
body.is-scrolled #nova-header {
box-shadow: 0 1px 12px rgba(15, 20, 25, .06);
border-bottom: 1px solid rgba(229, 231, 235, .6);
}
}
/* ββ 14.2 SCROLL-REVEAL ANIMATIONEN ββ */
.mtc-shop .mtc-reveal {
opacity: 0;
transform: translateY(24px);
transition:
opacity .8s var(--mtc-ease-out),
transform .8s var(--mtc-ease-out);
will-change: opacity, transform;
}
.mtc-shop .mtc-revealed {
opacity: 1;
transform: translateY(0);
}
/* Staggered Reveal in Grids */
.mtc-shop .ta-grid .mtc-reveal:nth-child(1),
.mtc-shop .kmp-grid .mtc-reveal:nth-child(1),
.mtc-shop .mb-grid .mtc-reveal:nth-child(1),
.mtc-shop .qlt-grid .mtc-reveal:nth-child(1),
.mtc-shop .svc-grid .mtc-reveal:nth-child(1),
.mtc-shop .sz-grid .mtc-reveal:nth-child(1),
.mtc-shop .mk-grid .mtc-reveal:nth-child(1),
.mtc-shop .hero-tiles .mtc-reveal:nth-child(1) { transition-delay: 0s; }
.mtc-shop .ta-grid .mtc-reveal:nth-child(2),
.mtc-shop .kmp-grid .mtc-reveal:nth-child(2),
.mtc-shop .mb-grid .mtc-reveal:nth-child(2),
.mtc-shop .qlt-grid .mtc-reveal:nth-child(2),
.mtc-shop .svc-grid .mtc-reveal:nth-child(2),
.mtc-shop .sz-grid .mtc-reveal:nth-child(2),
.mtc-shop .mk-grid .mtc-reveal:nth-child(2),
.mtc-shop .hero-tiles .mtc-reveal:nth-child(2) { transition-delay: .08s; }
.mtc-shop .ta-grid .mtc-reveal:nth-child(3),
.mtc-shop .kmp-grid .mtc-reveal:nth-child(3),
.mtc-shop .mb-grid .mtc-reveal:nth-child(3),
.mtc-shop .qlt-grid .mtc-reveal:nth-child(3),
.mtc-shop .svc-grid .mtc-reveal:nth-child(3),
.mtc-shop .sz-grid .mtc-reveal:nth-child(3),
.mtc-shop .mk-grid .mtc-reveal:nth-child(3),
.mtc-shop .hero-tiles .mtc-reveal:nth-child(3) { transition-delay: .16s; }
.mtc-shop .ta-grid .mtc-reveal:nth-child(4),
.mtc-shop .kmp-grid .mtc-reveal:nth-child(4),
.mtc-shop .qlt-grid .mtc-reveal:nth-child(4),
.mtc-shop .svc-grid .mtc-reveal:nth-child(4),
.mtc-shop .sz-grid .mtc-reveal:nth-child(4),
.mtc-shop .mk-grid .mtc-reveal:nth-child(4),
.mtc-shop .hero-tiles .mtc-reveal:nth-child(4) { transition-delay: .24s; }
.mtc-shop .ta-grid .mtc-reveal:nth-child(5),
.mtc-shop .kmp-grid .mtc-reveal:nth-child(5),
.mtc-shop .svc-grid .mtc-reveal:nth-child(5),
.mtc-shop .sz-grid .mtc-reveal:nth-child(5),
.mtc-shop .mk-grid .mtc-reveal:nth-child(5) { transition-delay: .32s; }
.mtc-shop .svc-grid .mtc-reveal:nth-child(6),
.mtc-shop .sz-grid .mtc-reveal:nth-child(6),
.mtc-shop .mk-grid .mtc-reveal:nth-child(6) { transition-delay: .40s; }
/* ββ 14.3 GLASS-CARDS POLISH (App-Lift ΓΌberall) ββ */
.mtc-shop .ta-card,
.mtc-shop .kmp-card,
.mtc-shop .qlt-card,
.mtc-shop .svc-card,
.mtc-shop .mb-card,
.mtc-shop .mk-tile,
.mtc-shop .sz-tile,
.mtc-shop .htile,
.mtc-shop .usp {
transition:
transform .35s var(--mtc-ease-out),
box-shadow .35s var(--mtc-ease-out),
border-color .25s var(--mtc-ease);
}
@media (hover: hover) {
.mtc-shop .ta-card:hover,
.mtc-shop .kmp-card:hover,
.mtc-shop .qlt-card:hover,
.mtc-shop .svc-card:hover,
.mtc-shop .mb-card:hover {
transform: translateY(-6px);
box-shadow:
0 12px 32px rgba(15, 20, 25, .10),
0 4px 8px rgba(15, 20, 25, .04);
}
.mtc-shop .sz-tile:hover,
.mtc-shop .mk-tile:hover {
transform: translateY(-3px);
box-shadow:
0 8px 20px rgba(15, 20, 25, .08),
0 2px 4px rgba(15, 20, 25, .03);
}
}
/* ββ 14.4 iOS-TAP-FEEDBACK (Touch-Cards) ββ */
@media (hover: none) {
.mtc-shop .ta-card:active,
.mtc-shop .kmp-card:active,
.mtc-shop .qlt-card:active,
.mtc-shop .svc-card:active,
.mtc-shop .mb-card:active,
.mtc-shop .sz-tile:active,
.mtc-shop .mk-tile:active,
.mtc-shop .htile:active,
.mtc-shop .usp:active {
transform: scale(0.97);
transition: transform .12s var(--mtc-ease);
}
}
/* ββ 14.5 SMOOTH-SCROLL GLOBAL ββ */
html {
scroll-behavior: smooth;
}
/* ββ 14.6 SUCHFELD-BUTTON BRAND-ORANGE ββ */
#search-header button[type="submit"],
.header-search button[type="submit"],
form[action*="navi"] button[type="submit"],
.search-submit,
button.search-button {
background: var(--mtc-orange, #FF6B35) !important;
color: #fff !important;
border-color: var(--mtc-orange, #FF6B35) !important;
transition: background .25s ease, transform .25s ease !important;
}
#search-header button[type="submit"]:hover,
.header-search button[type="submit"]:hover,
.search-submit:hover {
background: var(--mtc-orange-dark, #E5572C) !important;
transform: translateY(-1px);
}
/* ββ 14.7 BILDER WEISS GLOBAL (auch JTL-Listings) ββ */
.mtc-shop img,
body .productbox img,
body .product-image img,
body .article-image img,
body .productbox-image img,
body .gallery-image img,
body #productGallery img,
body .product-gallery img,
body .image-zoom img {
background: #FFFFFF;
}
body .productbox img,
body .product-image img,
body .article-image img,
body .productbox-image img {
mix-blend-mode: multiply;
}
/* ββ 14.8 FLOATING APP-FAB: HELP-PILL (links unten) ββ */
.mtc-fab-help {
position: fixed;
left: 16px;
bottom: 16px;
z-index: 950;
display: inline-flex;
align-items: center;
gap: 10px;
height: 56px;
padding: 0 18px 0 14px;
background: linear-gradient(135deg, #FF6B35 0%, #E5572C 100%);
color: #fff;
border-radius: 999px;
text-decoration: none;
box-shadow:
0 8px 24px rgba(255, 107, 53, .35),
0 2px 6px rgba(15, 20, 25, .12);
transition:
transform .25s cubic-bezier(.16, 1, .3, 1),
box-shadow .25s ease;
}
.mtc-fab-help:hover,
.mtc-fab-help:focus-visible {
transform: translateY(-3px);
box-shadow:
0 14px 32px rgba(255, 107, 53, .45),
0 4px 10px rgba(15, 20, 25, .15);
}
.mtc-fab-help:active { transform: scale(.96); }
.mtc-fab-help-icon {
width: 36px; height: 36px;
background: rgba(255, 255, 255, .18);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.mtc-fab-help-icon svg {
width: 18px !important;
height: 18px !important;
max-width: 18px !important;
max-height: 18px !important;
}
.mtc-fab-help-text {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.mtc-fab-help-label {
font-size: 13px;
font-weight: 700;
letter-spacing: -0.01em;
}
.mtc-fab-help-sub {
font-size: 10px;
opacity: .85;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
}
@media (max-width: 767px) {
/* Mobile: rechts unten, Icon-only (App-Style) */
.mtc-fab-help {
left: auto;
right: 16px;
bottom: calc(100px + env(safe-area-inset-bottom));
height: 52px;
width: 52px;
padding: 0;
justify-content: center;
border-radius: 50%;
box-shadow:
0 6px 18px rgba(255, 107, 53, .35),
0 2px 6px rgba(15, 20, 25, .15);
}
.mtc-fab-help-icon {
width: 100%;
height: 100%;
background: transparent;
}
.mtc-fab-help-icon svg {
width: 22px !important;
height: 22px !important;
max-width: 22px !important;
max-height: 22px !important;
}
.mtc-fab-help-text {
display: none;
}
}
/* ββ 14.9 PULL-TO-TOP FAB (rechts unten) ββ */
.mtc-fab-top {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 950;
width: 48px; height: 48px;
background: rgba(255, 255, 255, .96);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
color: #0F1419;
border: 1px solid rgba(229, 231, 235, .8);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow:
0 6px 18px rgba(15, 20, 25, .12),
0 2px 4px rgba(15, 20, 25, .04);
opacity: 0;
transform: translateY(20px) scale(.8);
pointer-events: none;
transition:
opacity .3s cubic-bezier(.16, 1, .3, 1),
transform .3s cubic-bezier(.16, 1, .3, 1);
}
.mtc-fab-top.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.mtc-fab-top svg {
width: 20px !important;
height: 20px !important;
max-width: 20px !important;
max-height: 20px !important;
color: #0F1419;
}
.mtc-fab-top:hover {
background: #FF6B35;
border-color: #FF6B35;
transform: translateY(-3px) scale(1.05);
}
.mtc-fab-top:hover svg { color: #fff; }
.mtc-fab-top:active { transform: scale(.92); }
@media (max-width: 767px) {
/* Pull-to-Top auf Mobile komplett aus (User scrollt einfach mit Finger) */
.mtc-fab-top,
.mtc-fab-top.is-visible {
display: none !important;
}
}
/* ββ 14.10 REDUCED MOTION ββ */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.mtc-shop .mtc-reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.mtc-shop *,
.mtc-shop *::before,
.mtc-shop *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
/* =====================================================================
ENDE 14 β APP-DNA PREMIUM-LAYER
===================================================================== */
/* =====================================================================
15 β LANDING-PAGES (CMS-Seiten ausserhalb der .mtc-shop Welt)
=====================================================================
Diese Section deckt 5 CMS/Wawi-Seiten ab:
1. /Wir-ueber-uns β .mtc-about (Gruen)
2. /Cloud-Microsoft-Azure β .lp-page.lp-azure (Blau)
3. /Softwareentwicklung β .sw-page (Lila)
4. /IT-Beratung-Strategie β .lp-page.lp-consulting (Gold)
5. /IT-Support-Wartung β .lp-page.lp-support (Orange)
Scope-Schutz: Alle Styles unter .mtc-about, .sw-page oder .lp-page
- Kein Konflikt mit Startseite (.mtc-shop)
- SVG-Constraints verhindern Riesen-Symbole
===================================================================== */
/* === SVG-Constraint GLOBAL fuer Landing-Pages (verhindert Riesen-Symbole) === */
.mtc-about svg,
.sw-page svg,
.lp-page svg {
max-width: 48px;
max-height: 48px;
}
.mtc-about .about-icon svg,
.sw-page .sw-card-icon svg,
.lp-page .lp-card svg {
width: 24px !important;
height: 24px !important;
max-width: 24px !important;
max-height: 24px !important;
}
/* =====================================================================
15.1 β WIR UEBER UNS (.mtc-about)
===================================================================== */
12 β WIR ΓBER UNS (About Page)
===================================================== */
.mtc-about {
font-family: "Inter", sans-serif;
color: #0F1419;
line-height: 1.55;
}
.mtc-about * {
box-sizing: border-box;
}
.mtc-about .about-wrap {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
@media (min-width: 768px) {
.mtc-about .about-wrap { padding: 0 32px; }
}
.mtc-about .about-eyebrow {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: #16A172;
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.mtc-about .about-eyebrow::before {
content: "";
width: 24px;
height: 2px;
background: #16A172;
}
.mtc-about .about-eyebrow-light { color: #2ECC9A; }
.mtc-about .about-eyebrow-light::before { background: #2ECC9A; }
.mtc-about .about-h2 {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: clamp(26px, 4vw, 40px);
font-weight: 700;
letter-spacing: -.025em;
color: #0F1419;
line-height: 1.1;
margin: 0 0 16px;
}
.mtc-about .about-h2 .accent { color: #16A172; }
.mtc-about .about-h2-light { color: #fff; }
.mtc-about .about-head {
text-align: center;
margin-bottom: 40px;
}
.mtc-about .about-head .about-eyebrow {
justify-content: center;
}
.mtc-about .about-head .about-eyebrow::after {
content: "";
width: 24px;
height: 2px;
background: #16A172;
}
.mtc-about .about-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 24px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: all .2s cubic-bezier(.4,0,.2,1);
min-height: 48px;
border: 1.5px solid transparent;
cursor: pointer;
}
.mtc-about .about-btn svg {
width: 16px;
height: 16px;
transition: transform .2s;
}
.mtc-about .about-btn-primary { background: #16A172; color: #fff; }
.mtc-about .about-btn-primary:hover {
background: #0E7A56; color: #fff;
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(22,161,114,.35);
text-decoration: none;
}
.mtc-about .about-btn-primary:hover svg { transform: translateX(4px); }
.mtc-about .about-btn-ghost {
background: #F5F7F9; color: #0F1419; border-color: #EAEDF0;
}
.mtc-about .about-btn-ghost:hover {
background: #fff; border-color: #16A172; color: #16A172;
text-decoration: none;
}
.mtc-about .about-btn-outline-light {
background: transparent; color: #fff; border-color: rgba(255,255,255,.25);
}
.mtc-about .about-btn-outline-light:hover {
background: rgba(255,255,255,.08); border-color: #2ECC9A; color: #fff;
text-decoration: none;
}
/* 1. HERO */
.mtc-about .about-hero {
position: relative;
padding: 48px 0 56px;
background:
radial-gradient(circle at 20% 30%, rgba(22,161,114,.06) 0%, transparent 50%),
radial-gradient(circle at 80% 60%, rgba(22,161,114,.04) 0%, transparent 50%),
linear-gradient(180deg, #FFFFFF 0%, #F9FBFA 100%);
overflow: hidden;
}
@media (min-width: 768px) {
.mtc-about .about-hero { padding: 80px 0 88px; }
}
.mtc-about .about-hero-inner {
position: relative;
z-index: 1;
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.mtc-about .about-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: #E8F8F1;
color: #0A5E42;
border-radius: 999px;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
margin-bottom: 20px;
}
.mtc-about .about-hero-eyebrow::before {
content: "";
width: 6px; height: 6px;
background: #16A172;
border-radius: 50%;
box-shadow: 0 0 10px #16A172;
animation: mtcPulse 2s infinite;
}
@keyframes mtcPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .6; transform: scale(1.3); }
}
.mtc-about .about-hero-title {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: clamp(30px, 6vw, 56px);
font-weight: 800;
letter-spacing: -.03em;
line-height: 1.05;
color: #0F1419;
margin: 0 0 20px;
}
.mtc-about .about-hero-title .accent { color: #16A172; }
.mtc-about .about-hero-sub {
font-size: clamp(15px, 2vw, 18px);
line-height: 1.6;
color: #6E7681;
max-width: 640px;
margin: 0 auto 32px;
}
.mtc-about .about-hero-badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 36px;
}
.mtc-about .about-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: #fff;
border: 1px solid #EAEDF0;
border-radius: 999px;
font-size: 13px;
color: #0F1419;
transition: all .2s;
}
.mtc-about .about-badge:hover {
border-color: #16A172;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(22,161,114,.12);
}
.mtc-about .about-badge svg { width: 16px; height: 16px; color: #16A172; }
.mtc-about .about-badge strong { color: #0F1419; font-weight: 700; }
.mtc-about .about-hero-cta {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
/* 2. STORY */
.mtc-about .about-story { padding: 56px 0; background: #fff; }
@media (min-width: 768px) { .mtc-about .about-story { padding: 80px 0; } }
.mtc-about .about-story-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
align-items: start;
}
@media (min-width: 900px) {
.mtc-about .about-story-grid {
grid-template-columns: 1fr 1.3fr;
gap: 80px;
}
}
.mtc-about .about-story-right p {
font-size: 15.5px;
line-height: 1.75;
color: #2C3338;
margin: 0 0 20px;
}
.mtc-about .about-story-right p:last-child { margin-bottom: 0; }
.mtc-about .about-story-right strong { color: #0F1419; font-weight: 700; }
/* 3. ZAHLEN-BAND */
.mtc-about .about-stats {
padding: 32px 0;
background:
radial-gradient(circle at 30% 50%, rgba(22,161,114,.04) 0%, transparent 50%),
#F9FBFA;
border-top: 1px solid #EAEDF0;
border-bottom: 1px solid #EAEDF0;
}
@media (min-width: 768px) { .mtc-about .about-stats { padding: 48px 0; } }
.mtc-about .about-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
text-align: center;
}
@media (min-width: 768px) {
.mtc-about .about-stats-grid {
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
}
.mtc-about .about-stat {
padding: 16px 12px;
border-right: 1px solid #EAEDF0;
}
.mtc-about .about-stat:nth-child(2n) { border-right: none; }
@media (min-width: 768px) {
.mtc-about .about-stat { border-right: 1px solid #EAEDF0; }
.mtc-about .about-stat:nth-child(2n) { border-right: 1px solid #EAEDF0; }
.mtc-about .about-stat:last-child { border-right: none; }
}
.mtc-about .about-stat-num {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: clamp(36px, 6vw, 56px);
font-weight: 800;
letter-spacing: -.03em;
color: #0F1419;
line-height: 1;
margin-bottom: 4px;
}
.mtc-about .about-stat-num span { color: #16A172; }
.mtc-about .about-stat-label {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: #6E7681;
}
/* 4. SΓULEN */
.mtc-about .about-pillars { padding: 56px 0; background: #fff; }
@media (min-width: 768px) { .mtc-about .about-pillars { padding: 88px 0; } }
.mtc-about .about-pillars-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 640px) {
.mtc-about .about-pillars-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (min-width: 1024px) {
.mtc-about .about-pillars-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.mtc-about .about-pillar {
position: relative;
background: #fff;
border: 1.5px solid #EAEDF0;
border-radius: 16px;
padding: 28px 24px;
transition: all .3s cubic-bezier(.4,0,.2,1);
display: flex;
flex-direction: column;
gap: 14px;
overflow: hidden;
}
.mtc-about .about-pillar::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, #16A172, #2ECC9A);
transform: scaleX(0);
transform-origin: left;
transition: transform .3s;
}
.mtc-about .about-pillar:hover {
border-color: #16A172;
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(22,161,114,.12);
}
.mtc-about .about-pillar:hover::before { transform: scaleX(1); }
.mtc-about .about-pillar-icon {
width: 48px; height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, #E8F8F1 0%, #F0FDF8 100%);
display: grid;
place-items: center;
color: #16A172;
}
.mtc-about .about-pillar-icon svg { width: 24px; height: 24px; }
.mtc-about .about-pillar h3 {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 18px;
font-weight: 700;
color: #0F1419;
letter-spacing: -.01em;
margin: 0;
}
.mtc-about .about-pillar p {
font-size: 13.5px;
line-height: 1.6;
color: #6E7681;
margin: 0;
flex: 1;
}
.mtc-about .about-pillar-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: #16A172;
text-decoration: none;
margin-top: auto;
}
.mtc-about .about-pillar-link svg { width: 14px; height: 14px; transition: transform .2s; }
.mtc-about .about-pillar-link:hover svg { transform: translateX(4px); }
/* 5. USPs */
.mtc-about .about-usps { padding: 56px 0; background: #F9FBFA; }
@media (min-width: 768px) { .mtc-about .about-usps { padding: 88px 0; } }
.mtc-about .about-usps-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 640px) {
.mtc-about .about-usps-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (min-width: 1024px) {
.mtc-about .about-usps-grid {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
}
.mtc-about .about-usp {
background: #fff;
border: 1px solid #EAEDF0;
border-radius: 14px;
padding: 28px 24px;
transition: all .3s cubic-bezier(.4,0,.2,1);
}
.mtc-about .about-usp:hover {
border-color: #16A172;
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(15,20,25,.06);
}
.mtc-about .about-usp-num {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
color: #16A172;
margin-bottom: 12px;
}
.mtc-about .about-usp h4 {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 17px;
font-weight: 700;
color: #0F1419;
letter-spacing: -.01em;
margin: 0 0 10px;
}
.mtc-about .about-usp p {
font-size: 13.5px;
line-height: 1.6;
color: #6E7681;
margin: 0;
}
/* 6. KONTAKT */
.mtc-about .about-contact {
position: relative;
padding: 56px 0;
background:
radial-gradient(circle at 15% 30%, rgba(22,161,114,.12) 0%, transparent 50%),
radial-gradient(circle at 85% 70%, rgba(22,161,114,.08) 0%, transparent 50%),
linear-gradient(135deg, #0A0E14 0%, #13181E 100%);
color: #fff;
overflow: hidden;
}
@media (min-width: 768px) { .mtc-about .about-contact { padding: 88px 0; } }
.mtc-about .about-contact-inner {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
}
@media (min-width: 1024px) {
.mtc-about .about-contact-inner {
grid-template-columns: 1fr 1.1fr;
gap: 64px;
align-items: start;
}
}
.mtc-about .about-contact-text {
font-size: 15.5px;
line-height: 1.65;
color: rgba(255,255,255,.7);
margin: 0 0 28px;
max-width: 420px;
}
.mtc-about .about-contact-ctas {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.mtc-about .about-contact-right {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (min-width: 640px) {
.mtc-about .about-contact-right { grid-template-columns: 1fr 1fr; }
}
.mtc-about .about-contact-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1);
border-radius: 14px;
transition: all .25s cubic-bezier(.4,0,.2,1);
text-decoration: none;
color: #fff;
}
.mtc-about .about-contact-card:hover {
background: rgba(22,161,114,.1);
border-color: rgba(22,161,114,.4);
transform: translateY(-3px);
text-decoration: none;
color: #fff;
}
.mtc-about .about-contact-icon {
width: 40px; height: 40px;
border-radius: 10px;
background: rgba(22,161,114,.15);
display: grid;
place-items: center;
color: #2ECC9A;
margin-bottom: 4px;
}
.mtc-about .about-contact-icon svg { width: 20px; height: 20px; }
.mtc-about .about-contact-label {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.5);
}
.mtc-about .about-contact-value {
font-size: 14.5px;
font-weight: 600;
color: #fff;
line-height: 1.4;
}
.mtc-about .about-contact-cta {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
color: #2ECC9A;
margin-top: 4px;
transition: transform .2s;
}
.mtc-about .about-contact-card:hover .about-contact-cta { transform: translateX(4px); }
.mtc-about .about-contact-card-hours { cursor: default; }
.mtc-about .about-contact-card-hours:hover {
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.1);
transform: none;
}
/*
* =========================================================
* MTC PDP Template A v4 β Shop (Premium Multi-Color)
* =========================================================
* FARB-JOBS:
* GrΓΌn #16A172 β Marke, Features, Versand, Beratung
* Orange #FF6B35 β CTAs, Deals, B2B-Highlight, Action
* Blau #2B4A7A β B2B, Enterprise, GPSR, Rechtliches
* Amber #FFB020 β Warnungen
* Ink #0F1419 β Schrift
* WeiΓ β Basis
* Hellgrau β Card-Backgrounds
*
* An custom.css UNTEN ANHΓNGEN (ersetzt .mtc-pdp-Regeln).
/* =====================================================================
15.2 β SOFTWAREENTWICKLUNG (.sw-page) β Lila
===================================================================== */
In custom.css einfΓΌgen β ganz ans Ende oder
in eigenem Block "Landingpages".
Farbschema: Purple #7C3AED (konsistent mit Home-Card)
Scope: .sw-page (verhindert Konflikte)
===================================================== */
.sw-page {
font-family: "Open Sans", "Inter", sans-serif;
color: #0F1419;
background: #ffffff;
}
.sw-page *,
.sw-page *::before,
.sw-page *::after {
box-sizing: border-box;
}
.sw-page a {
text-decoration: none;
}
.sw-page .sw-wrap {
max-width: 1280px;
margin: 0 auto;
padding: 0 16px;
}
@media (min-width: 768px) {
.sw-page .sw-wrap { padding: 0 32px; }
}
/* ===== HERO ===== */
.sw-page .sw-hero {
background: linear-gradient(135deg, #FAFAFF 0%, #F5F0FF 100%);
padding: 48px 16px 56px;
position: relative;
overflow: hidden;
border-radius: 0 0 24px 24px;
}
@media (min-width: 768px) {
.sw-page .sw-hero {
padding: 80px 32px 88px;
}
}
.sw-page .sw-hero::before {
content: "";
position: absolute;
top: -120px;
right: -120px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(124,58,237,.15) 0%, rgba(124,58,237,0) 70%);
filter: blur(60px);
pointer-events: none;
}
.sw-page .sw-hero-inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: center;
position: relative;
z-index: 1;
}
@media (min-width: 1024px) {
.sw-page .sw-hero-inner {
grid-template-columns: 1.2fr 1fr;
gap: 60px;
}
}
.sw-page .sw-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: #F5F0FF;
color: #7C3AED;
font-family: "JetBrains Mono", monospace;
font-size: 12px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
border-radius: 100px;
margin-bottom: 20px;
border: 1px solid rgba(124,58,237,.2);
}
.sw-page .sw-eyebrow svg {
width: 14px;
height: 14px;
}
.sw-page .sw-hero-title {
font-family: "Plus Jakarta Sans", "Open Sans", sans-serif;
font-size: clamp(32px, 5vw, 52px);
font-weight: 800;
line-height: 1.1;
letter-spacing: -.03em;
color: #0F1419;
margin: 0 0 20px 0;
}
.sw-page .sw-hero-title span {
color: #7C3AED;
display: inline-block;
}
.sw-page .sw-hero-lead {
font-size: 17px;
line-height: 1.6;
color: #4A5568;
margin: 0 0 32px 0;
max-width: 580px;
}
.sw-page .sw-hero-ctas {
display: flex;
flex-direction: column;
gap: 12px;
}
@media (min-width: 640px) {
.sw-page .sw-hero-ctas {
flex-direction: row;
gap: 14px;
}
}
/* ===== BUTTONS ===== */
.sw-page .sw-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 24px;
font-family: "Plus Jakarta Sans", "Open Sans", sans-serif;
font-size: 14px;
font-weight: 700;
border-radius: 100px;
line-height: 1;
transition: all .2s ease;
white-space: nowrap;
cursor: pointer;
border: none;
}
.sw-page .sw-btn svg {
width: 16px;
height: 16px;
transition: transform .2s ease;
}
.sw-page .sw-btn-primary {
background: #FF6B35;
color: #ffffff;
box-shadow: 0 4px 14px rgba(255,107,53,.3);
}
.sw-page .sw-btn-primary:hover {
background: #E85A25;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255,107,53,.45);
}
.sw-page .sw-btn-primary:hover svg {
transform: translateX(3px);
}
.sw-page .sw-btn-ghost {
background: #ffffff;
color: #0F1419;
border: 1px solid #EAEDF0;
}
.sw-page .sw-btn-ghost:hover {
background: #F5F0FF;
border-color: #7C3AED;
color: #7C3AED;
}
.sw-page .sw-btn-outline {
background: transparent;
color: #ffffff;
border: 1px solid rgba(255,255,255,.25);
}
.sw-page .sw-btn-outline:hover {
background: rgba(255,255,255,.1);
border-color: rgba(255,255,255,.5);
color: #ffffff;
}
.sw-page .sw-btn-outline:hover svg {
transform: translateX(3px);
}
/* ===== HERO VISUAL (Code-Snippet) ===== */
.sw-page .sw-hero-visual {
display: flex;
justify-content: center;
align-items: center;
}
.sw-page .sw-hero-code {
width: 100%;
max-width: 440px;
background: #0F1419;
border-radius: 16px;
padding: 20px 24px 24px;
font-family: "JetBrains Mono", "Courier New", monospace;
font-size: 14px;
line-height: 1.7;
color: #E2E8F0;
box-shadow: 0 20px 50px rgba(124,58,237,.2), 0 10px 30px rgba(15,20,25,.15);
position: relative;
overflow: hidden;
}
.sw-page .sw-hero-code::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #7C3AED, #A78BFA, #FF6B35);
}
.sw-page .sw-code-dots {
display: flex;
gap: 6px;
margin-bottom: 16px;
}
.sw-page .sw-code-dots span {
width: 12px;
height: 12px;
border-radius: 50%;
background: #2D3748;
}
.sw-page .sw-code-dots span:nth-child(1) { background: #FF5F56; }
.sw-page .sw-code-dots span:nth-child(2) { background: #FFBD2E; }
.sw-page .sw-code-dots span:nth-child(3) { background: #27C93F; }
.sw-page .sw-code-line {
color: #E2E8F0;
}
.sw-page .sw-code-indent {
padding-left: 20px;
}
.sw-page .sw-code-keyword { color: #A78BFA; }
.sw-page .sw-code-fn { color: #FF6B35; }
.sw-page .sw-code-string { color: #34D399; }
.sw-page .sw-code-comment {
color: #6B7280;
font-style: italic;
margin-top: 8px;
}
/* ===== SECTIONS GENERAL ===== */
.sw-page .sw-section {
padding: 56px 0;
}
@media (min-width: 768px) {
.sw-page .sw-section { padding: 80px 0; }
}
.sw-page .sw-section-head {
text-align: center;
max-width: 720px;
margin: 0 auto 40px;
}
@media (min-width: 768px) {
.sw-page .sw-section-head { margin-bottom: 56px; }
}
.sw-page .sw-section-eyebrow {
display: inline-block;
font-family: "JetBrains Mono", monospace;
font-size: 12px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: #7C3AED;
margin-bottom: 12px;
padding: 4px 14px;
background: #F5F0FF;
border-radius: 100px;
border: 1px solid rgba(124,58,237,.2);
}
.sw-page .sw-section-title {
font-family: "Plus Jakarta Sans", "Open Sans", sans-serif;
font-size: clamp(26px, 3.5vw, 40px);
font-weight: 800;
line-height: 1.15;
letter-spacing: -.02em;
color: #0F1419;
margin: 0 0 14px 0;
}
.sw-page .sw-section-sub {
font-size: 16px;
line-height: 1.6;
color: #5A6472;
margin: 0;
}
/* ===== FEATURES GRID ===== */
.sw-page .sw-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 640px) {
.sw-page .sw-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (min-width: 1024px) {
.sw-page .sw-grid {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
}
.sw-page .sw-card {
background: #ffffff;
border: 1px solid #EAEDF0;
border-radius: 16px;
padding: 28px 24px;
transition: all .3s cubic-bezier(.4,0,.2,1);
position: relative;
overflow: hidden;
}
.sw-page .sw-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: transparent;
transition: background .3s ease;
}
.sw-page .sw-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(124,58,237,.08);
border-color: #7C3AED;
}
.sw-page .sw-card:hover::before {
background: linear-gradient(90deg, #7C3AED, #A78BFA);
}
.sw-page .sw-card-icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: #F5F0FF;
color: #7C3AED;
border-radius: 14px;
margin-bottom: 20px;
transition: all .3s ease;
}
.sw-page .sw-card-icon svg {
width: 28px;
height: 28px;
}
.sw-page .sw-card:hover .sw-card-icon {
background: #7C3AED;
color: #ffffff;
transform: scale(1.05);
}
.sw-page .sw-card-title {
font-family: "Plus Jakarta Sans", "Open Sans", sans-serif;
font-size: 20px;
font-weight: 800;
line-height: 1.25;
letter-spacing: -.01em;
color: #0F1419;
margin: 0 0 10px 0;
}
.sw-page .sw-card-desc {
font-size: 14px;
line-height: 1.6;
color: #5A6472;
margin: 0;
}
/* ===== APPROACH (3 Steps) ===== */
.sw-page .sw-approach {
background: #FAFAFF;
border-radius: 24px;
margin: 0 16px;
}
@media (min-width: 768px) {
.sw-page .sw-approach {
margin: 0 32px;
}
}
.sw-page .sw-approach-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
max-width: 1100px;
margin: 0 auto;
}
@media (min-width: 768px) {
.sw-page .sw-approach-grid {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
}
.sw-page .sw-approach-step {
background: #ffffff;
border: 1px solid rgba(124,58,237,.12);
border-radius: 16px;
padding: 32px 28px;
position: relative;
transition: all .3s ease;
}
.sw-page .sw-approach-step:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(124,58,237,.1);
border-color: #7C3AED;
}
.sw-page .sw-step-num {
font-family: "Plus Jakarta Sans", "Open Sans", sans-serif;
font-size: 48px;
font-weight: 800;
line-height: 1;
color: #7C3AED;
letter-spacing: -.03em;
margin-bottom: 16px;
background: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.sw-page .sw-step-title {
font-family: "Plus Jakarta Sans", "Open Sans", sans-serif;
font-size: 22px;
font-weight: 800;
line-height: 1.25;
letter-spacing: -.01em;
color: #0F1419;
margin: 0 0 12px 0;
}
.sw-page .sw-step-desc {
font-size: 15px;
line-height: 1.6;
color: #5A6472;
margin: 0;
}
/* ===== TECH PILLS ===== */
.sw-page .sw-tech-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
max-width: 800px;
margin: 0 auto;
}
.sw-page .sw-tech-pill {
display: inline-flex;
align-items: center;
padding: 12px 22px;
background: #ffffff;
border: 1px solid #EAEDF0;
color: #0F1419;
font-family: "JetBrains Mono", monospace;
font-size: 14px;
font-weight: 600;
border-radius: 100px;
transition: all .2s ease;
}
.sw-page .sw-tech-pill:hover {
background: #F5F0FF;
border-color: #7C3AED;
color: #7C3AED;
transform: translateY(-2px);
}
/* ===== CTA BANNER (Dark) ===== */
.sw-page .sw-cta-section {
padding-bottom: 80px;
}
.sw-page .sw-cta-banner {
background: linear-gradient(135deg, #0F1419 0%, #1F2937 100%);
border-radius: 24px;
padding: 40px 28px;
display: flex;
flex-direction: column;
gap: 28px;
position: relative;
overflow: hidden;
}
@media (min-width: 768px) {
.sw-page .sw-cta-banner {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 56px 56px;
gap: 40px;
}
}
.sw-page .sw-cta-banner::before {
content: "";
position: absolute;
top: -100px;
right: -100px;
width: 320px;
height: 320px;
background: radial-gradient(circle, rgba(124,58,237,.2) 0%, rgba(124,58,237,0) 70%);
filter: blur(50px);
pointer-events: none;
}
.sw-page .sw-cta-banner::after {
content: "";
position: absolute;
bottom: -100px;
left: -100px;
width: 280px;
height: 280px;
background: radial-gradient(circle, rgba(255,107,53,.15) 0%, rgba(255,107,53,0) 70%);
filter: blur(50px);
pointer-events: none;
}
.sw-page .sw-cta-left {
position: relative;
z-index: 1;
flex: 1;
}
.sw-page .sw-cta-eyebrow {
display: inline-block;
font-family: "JetBrains Mono", monospace;
font-size: 12px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: #A78BFA;
margin-bottom: 10px;
padding: 4px 12px;
background: rgba(124,58,237,.15);
border-radius: 100px;
line-height: 1;
}
.sw-page .sw-cta-title {
font-family: "Plus Jakarta Sans", "Open Sans", sans-serif;
font-size: clamp(24px, 3vw, 34px);
font-weight: 800;
line-height: 1.2;
letter-spacing: -.02em;
color: #ffffff;
margin: 0 0 10px 0;
}
.sw-page .sw-cta-desc {
font-size: 15px;
line-height: 1.6;
color: #CBD5E1;
margin: 0;
max-width: 540px;
}
.sw-page .sw-cta-right {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 12px;
flex-shrink: 0;
}
@media (min-width: 640px) {
.sw-page .sw-cta-right {
flex-direction: row;
}
}
/* ===== MOBILE TUNING ===== */
@media (max-width: 639px) {
.sw-page .sw-hero {
padding: 40px 16px 48px;
}
.sw-page .sw-hero-title {
font-size: 32px;
}
.sw-page .sw-hero-lead {
font-size: 15px;
}
.sw-page .sw-hero-code {
font-size: 12px;
padding: 16px 20px 20px;
}
.sw-page .sw-section {
padding: 40px 0;
}
.sw-page .sw-card {
padding: 24px 20px;
}
.sw-page .sw-approach-step {
padding: 24px 20px;
}
.sw-page .sw-step-num {
font-size: 40px;
}
.sw-page .sw-cta-banner {
padding: 32px 24px;
}
.sw-page .sw-tech-pill {
font-size: 13px;
padding: 10px 18px;
}
}
/* =====================================================
SERVICE LANDINGPAGES (5 Seiten - einfach & ehrlich)
=====================================================
EINMAL in custom.css einfΓΌgen β gilt fΓΌr alle 5 Seiten:
- Cloud & Azure β .lp-azure (Blau)
- IT-Support & Wartung β .lp-support (Orange)
- IT-Beratung & Strategie β .lp-consulting (Gold)
- Netzwerk & IT-Security β .lp-security (Rot)
/* =====================================================================
15.3 β LANDING-PAGES Service (.lp-page)
- .lp-azure (Blau) β /Cloud-Microsoft-Azure
- .lp-consulting (Gold) β /IT-Beratung-Strategie
- .lp-support (Orange) β /IT-Support-Wartung
- .lp-about (Gruen) β /Wir-ueber-uns (Variante)
===================================================================== */
- Netzwerk & IT-Security β .lp-security (Rot)
- Hardware-Rollout β .lp-rollout (GrΓΌn)
Scope: .lp-page (verhindert Konflikte)
===================================================== */
/* ===== BASE ===== */
.lp-page {
font-family: "Open Sans", "Inter", sans-serif;
color: #0F1419;
background: #ffffff;
}
.lp-page *,
.lp-page *::before,
.lp-page *::after {
box-sizing: border-box;
}
.lp-page a {
text-decoration: none;
}
.lp-page .lp-wrap {
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
}
@media (min-width: 768px) {
.lp-page .lp-wrap { padding: 0 32px; }
}
/* ===== COLOR VARIANTS (per Service) ===== */
.lp-page.lp-azure { --lp-color: #0078D4; --lp-color-dark: #005A9E; --lp-color-bg: #E8F3FC; }
.lp-page.lp-support { --lp-color: #FF6B35; --lp-color-dark: #D9541C; --lp-color-bg: #FFF0E8; }
.lp-page.lp-consulting { --lp-color: #D97706; --lp-color-dark: #B45309; --lp-color-bg: #FFFBEB; }
.lp-page.lp-security { --lp-color: #DC2626; --lp-color-dark: #B91C1C; --lp-color-bg: #FEE8E8; }
.lp-page.lp-rollout { --lp-color: #16A172; --lp-color-dark: #0D7A55; --lp-color-bg: #E6F7EF; }
/* ===== HERO ===== */
.lp-page .lp-hero {
background: linear-gradient(135deg, #FAFBFC 0%, var(--lp-color-bg) 100%);
padding: 48px 16px 56px;
position: relative;
overflow: hidden;
border-radius: 0 0 24px 24px;
}
@media (min-width: 768px) {
.lp-page .lp-hero { padding: 72px 32px 80px; }
}
.lp-page .lp-hero::before {
content: "";
position: absolute;
top: -120px;
right: -120px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 70%);
filter: blur(60px);
pointer-events: none;
}
.lp-page .lp-hero-inner {
max-width: 900px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 1;
}
.lp-page .lp-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: #ffffff;
color: var(--lp-color);
font-family: "JetBrains Mono", monospace;
font-size: 12px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
border-radius: 100px;
margin-bottom: 20px;
border: 1px solid var(--lp-color-bg);
}
.lp-page .lp-eyebrow svg {
width: 14px;
height: 14px;
}
.lp-page .lp-hero-title {
font-family: "Plus Jakarta Sans", "Open Sans", sans-serif;
font-size: clamp(30px, 5vw, 48px);
font-weight: 800;
line-height: 1.1;
letter-spacing: -.03em;
color: #0F1419;
margin: 0 0 18px 0;
}
.lp-page .lp-hero-title span {
color: var(--lp-color);
display: inline-block;
}
.lp-page .lp-hero-lead {
font-size: 17px;
line-height: 1.6;
color: #4A5568;
margin: 0 0 32px 0;
max-width: 680px;
margin-left: auto;
margin-right: auto;
}
.lp-page .lp-hero-ctas {
display: flex;
flex-direction: column;
gap: 12px;
justify-content: center;
align-items: center;
}
@media (min-width: 640px) {
.lp-page .lp-hero-ctas {
flex-direction: row;
gap: 14px;
}
}
/* ===== BUTTONS ===== */
.lp-page .lp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 24px;
font-family: "Plus Jakarta Sans", "Open Sans", sans-serif;
font-size: 14px;
font-weight: 700;
border-radius: 100px;
line-height: 1;
transition: all .2s ease;
white-space: nowrap;
cursor: pointer;
border: none;
}
.lp-page .lp-btn svg {
width: 16px;
height: 16px;
transition: transform .2s ease;
}
.lp-page .lp-btn-primary {
background: #FF6B35;
color: #ffffff;
box-shadow: 0 4px 14px rgba(255,107,53,.3);
}
.lp-page .lp-btn-primary:hover {
background: #E85A25;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255,107,53,.45);
}
.lp-page .lp-btn-primary:hover svg { transform: translateX(3px); }
.lp-page .lp-btn-ghost {
background: #ffffff;
color: #0F1419;
border: 1px solid #EAEDF0;
}
.lp-page .lp-btn-ghost:hover {
background: var(--lp-color-bg);
border-color: var(--lp-color);
color: var(--lp-color);
}
.lp-page .lp-btn-outline {
background: transparent;
color: #ffffff;
border: 1px solid rgba(255,255,255,.25);
}
.lp-page .lp-btn-outline:hover {
background: rgba(255,255,255,.1);
border-color: rgba(255,255,255,.5);
color: #ffffff;
}
.lp-page .lp-btn-outline:hover svg { transform: translateX(3px); }
/* ===== SECTIONS ===== */
.lp-page .lp-section {
padding: 48px 0;
}
@media (min-width: 768px) {
.lp-page .lp-section { padding: 72px 0; }
}
.lp-page .lp-section-head {
text-align: center;
max-width: 680px;
margin: 0 auto 36px;
}
@media (min-width: 768px) {
.lp-page .lp-section-head { margin-bottom: 48px; }
}
.lp-page .lp-section-eyebrow {
display: inline-block;
font-family: "JetBrains Mono", monospace;
font-size: 12px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--lp-color);
margin-bottom: 12px;
padding: 4px 12px;
background: var(--lp-color-bg);
border-radius: 100px;
}
.lp-page .lp-section-title {
font-family: "Plus Jakarta Sans", "Open Sans", sans-serif;
font-size: clamp(24px, 3.2vw, 34px);
font-weight: 800;
line-height: 1.15;
letter-spacing: -.02em;
color: #0F1419;
margin: 0;
}
/* ===== LEISTUNGEN GRID ===== */
.lp-page .lp-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 640px) {
.lp-page .lp-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (min-width: 1024px) {
.lp-page .lp-grid {
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
}
.lp-page .lp-card {
background: #ffffff;
border: 1px solid #EAEDF0;
border-radius: 14px;
padding: 24px 22px;
transition: all .3s cubic-bezier(.4,0,.2,1);
position: relative;
overflow: hidden;
}
.lp-page .lp-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: transparent;
transition: background .3s ease;
}
.lp-page .lp-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(15,20,25,.08);
border-color: var(--lp-color);
}
.lp-page .lp-card:hover::before {
background: var(--lp-color);
}
.lp-page .lp-card-title {
font-family: "Plus Jakarta Sans", "Open Sans", sans-serif;
font-size: 17px;
font-weight: 800;
line-height: 1.3;
letter-spacing: -.01em;
color: #0F1419;
margin: 0 0 8px 0;
}
.lp-page .lp-card-desc {
font-size: 13px;
line-height: 1.55;
color: #5A6472;
margin: 0;
}
/* ===== WHY MTC (3 Steps) ===== */
.lp-page .lp-why {
background: #FAFBFC;
border-radius: 24px;
margin: 0 16px;
}
@media (min-width: 768px) {
.lp-page .lp-why {
margin: 0 32px;
}
}
.lp-page .lp-why-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
max-width: 1000px;
margin: 0 auto;
}
@media (min-width: 768px) {
.lp-page .lp-why-grid {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
}
.lp-page .lp-why-item {
background: #ffffff;
border: 1px solid #EAEDF0;
border-radius: 16px;
padding: 28px 24px;
transition: all .3s ease;
}
.lp-page .lp-why-item:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(15,20,25,.08);
border-color: var(--lp-color);
}
.lp-page .lp-why-num {
font-family: "Plus Jakarta Sans", "Open Sans", sans-serif;
font-size: 40px;
font-weight: 800;
line-height: 1;
color: var(--lp-color);
letter-spacing: -.03em;
margin-bottom: 14px;
}
.lp-page .lp-why-title {
font-family: "Plus Jakarta Sans", "Open Sans", sans-serif;
font-size: 18px;
font-weight: 800;
line-height: 1.3;
letter-spacing: -.01em;
color: #0F1419;
margin: 0 0 8px 0;
}
.lp-page .lp-why-desc {
font-size: 14px;
line-height: 1.55;
color: #5A6472;
margin: 0;
}
/* ===== CTA BANNER (Dark) ===== */
.lp-page .lp-cta-section {
padding-bottom: 72px;
}
.lp-page .lp-cta-banner {
background: linear-gradient(135deg, #0F1419 0%, #1F2937 100%);
border-radius: 20px;
padding: 36px 24px;
display: flex;
flex-direction: column;
gap: 24px;
position: relative;
overflow: hidden;
}
@media (min-width: 768px) {
.lp-page .lp-cta-banner {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 48px 48px;
gap: 36px;
}
}
.lp-page .lp-cta-banner::before {
content: "";
position: absolute;
top: -100px;
right: -100px;
width: 320px;
height: 320px;
background: radial-gradient(circle, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 70%);
filter: blur(50px);
pointer-events: none;
}
.lp-page .lp-cta-left {
position: relative;
z-index: 1;
flex: 1;
}
.lp-page .lp-cta-title {
font-family: "Plus Jakarta Sans", "Open Sans", sans-serif;
font-size: clamp(22px, 2.8vw, 28px);
font-weight: 800;
line-height: 1.2;
letter-spacing: -.02em;
color: #ffffff;
margin: 0 0 10px 0;
}
.lp-page .lp-cta-desc {
font-size: 15px;
line-height: 1.6;
color: #CBD5E1;
margin: 0;
max-width: 540px;
}
.lp-page .lp-cta-right {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 12px;
flex-shrink: 0;
}
@media (min-width: 640px) {
.lp-page .lp-cta-right {
flex-direction: row;
}
}
/* ===== MOBILE ===== */
@media (max-width: 639px) {
.lp-page .lp-hero {
padding: 40px 16px 48px;
}
.lp-page .lp-hero-title {
font-size: 28px;
}
.lp-page .lp-hero-lead {
font-size: 15px;
}
.lp-page .lp-section {
padding: 40px 0;
}
.lp-page .lp-card {
padding: 20px 18px;
}
.lp-page .lp-why-item {
padding: 24px 20px;
}
.lp-page .lp-cta-banner {
padding: 28px 22px;
}
}
/* =====================================================
ΓBER UNS - Kompletter CSS-Block (v3 Final)
=====================================================
WICHTIG: Diesen kompletten Block in custom.css einfΓΌgen.
Falls bereits alter ΓBER UNS Block vorhanden:
β Alten Block komplett lΓΆschen (von "ΓBER UNS" Kommentar
bis zum Ende des Blocks) β mit diesem NEUEN ersetzen.
EnthΓ€lt:
- GrΓΌn-Variante fΓΌr .lp-about
- 2-Spalten Hardware/Software
- eBay-Trust-Sektion (WEISS - nicht mehr gelb!)
- Standort mit Karte
- Hero Trust-Stats
- Icon-Fixes (verhindert riesige Icons in JTL)
===================================================== */
/* ===== About-Variante: MTC-GrΓΌn ===== */
.lp-page.lp-about {
--lp-color: #16A172;
--lp-color-dark: #0D7A55;
--lp-color-bg: #E6F7EF;
}
/* =====================================================================
ENDE 15 β LANDING-PAGES
===================================================================== */
/* =====================================================================
15.4 β COMPATIBILITY-BRIDGE
=====================================================================
FIX: HTMLs verwenden gemischte Klassen-Wrapper:
- .sw-page Wrapper aber .lp-section/.lp-card/.lp-btn Kinder
- .lp-page.lp-about Wrapper aber Wir-ΓΌber-uns nutzt about-* Klassen
LΓΆsung: Doppelt scopen (.sw-page UND .lp-page) fΓΌr alle .lp-* Sub-Selektoren
===================================================================== */
/* ββ 15.4.1 β Alle .lp-* Sub-Klassen auch unter .sw-page erlauben ββ */
.sw-page .lp-wrap,
.sw-page .lp-section,
.sw-page .lp-section-head,
.sw-page .lp-section-eyebrow,
.sw-page .lp-section-title,
.sw-page .lp-grid,
.sw-page .lp-card,
.sw-page .lp-card-title,
.sw-page .lp-card-desc,
.sw-page .lp-why,
.sw-page .lp-why-grid,
.sw-page .lp-why-item,
.sw-page .lp-why-num,
.sw-page .lp-why-title,
.sw-page .lp-why-desc,
.sw-page .lp-cta-section,
.sw-page .lp-cta-banner,
.sw-page .lp-cta-left,
.sw-page .lp-cta-right,
.sw-page .lp-cta-title,
.sw-page .lp-cta-desc,
.sw-page .lp-btn,
.sw-page .lp-btn-primary,
.sw-page .lp-btn-ghost,
.sw-page .lp-btn-outline {
/* Erbt vom .sw-page Wrapper, Lila-Theme */
--lp-color: #7C3AED;
--lp-color-dark: #5B21B6;
--lp-color-bg: #F3EBFF;
}
/* ββ 15.4.2 β .lp-wrap Container ββ */
.sw-page .lp-wrap {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
@media (min-width: 768px) {
.sw-page .lp-wrap { padding: 0 32px; }
}
/* ββ 15.4.3 β .lp-section ββ */
.sw-page .lp-section {
padding: 64px 0;
background: #ffffff;
}
@media (min-width: 1024px) {
.sw-page .lp-section { padding: 96px 0; }
}
.sw-page .lp-section.lp-why {
background: #FAFBFD;
}
.sw-page .lp-section-head {
text-align: center;
margin-bottom: 48px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.sw-page .lp-section-eyebrow {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #7C3AED;
padding: 6px 14px;
background: #F3EBFF;
border-radius: 999px;
}
.sw-page .lp-section-title {
font-size: 32px;
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1.1;
color: #0F1419;
margin: 0;
}
@media (min-width: 768px) {
.sw-page .lp-section-title { font-size: 40px; }
}
@media (min-width: 1024px) {
.sw-page .lp-section-title { font-size: 48px; }
}
/* ββ 15.4.4 β .lp-grid + .lp-card ββ */
.sw-page .lp-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 640px) {
.sw-page .lp-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
.sw-page .lp-grid { grid-template-columns: repeat(4, 1fr); }
}
.sw-page .lp-card {
position: relative;
padding: 32px 24px;
background: #ffffff;
border: 1px solid #E5E7EB;
border-radius: 16px;
transition: transform .3s, box-shadow .3s, border-color .3s;
overflow: hidden;
}
.sw-page .lp-card::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, #7C3AED 0%, #5B21B6 100%);
transition: width .25s;
}
.sw-page .lp-card:hover {
transform: translateY(-4px);
border-color: transparent;
box-shadow: 0 12px 32px rgba(15, 20, 25, .08);
}
.sw-page .lp-card:hover::before { width: 6px; }
.sw-page .lp-card-title {
font-size: 20px;
font-weight: 800;
color: #0F1419;
margin: 0 0 8px 0;
letter-spacing: -0.01em;
}
.sw-page .lp-card-desc {
font-size: 14px;
color: #6B7280;
line-height: 1.55;
margin: 0;
}
/* ββ 15.4.5 β .lp-why (Vorgehen-Steps) ββ */
.sw-page .lp-why-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
margin-top: 16px;
}
@media (min-width: 768px) {
.sw-page .lp-why-grid { grid-template-columns: repeat(3, 1fr); }
}
.sw-page .lp-why-item {
text-align: center;
padding: 32px 24px;
background: #ffffff;
border-radius: 16px;
border: 1px solid #E5E7EB;
transition: transform .3s, box-shadow .3s;
}
.sw-page .lp-why-item:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(15, 20, 25, .08);
}
.sw-page .lp-why-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
color: #ffffff;
border-radius: 14px;
font-family: "JetBrains Mono", monospace;
font-size: 18px;
font-weight: 800;
margin: 0 auto 16px auto;
box-shadow: 0 8px 20px rgba(124, 58, 237, .25);
}
.sw-page .lp-why-title {
font-size: 20px;
font-weight: 800;
color: #0F1419;
margin: 0 0 8px 0;
letter-spacing: -0.01em;
}
.sw-page .lp-why-desc {
font-size: 14px;
color: #6B7280;
line-height: 1.55;
margin: 0;
}
/* ββ 15.4.6 β .lp-cta (Schwarzer Banner) ββ */
.sw-page .lp-cta-section {
padding: 64px 0;
background: #ffffff;
}
.sw-page .lp-cta-banner {
position: relative;
background: linear-gradient(135deg, #0F1419 0%, #1F2937 100%);
border-radius: 24px;
padding: 48px 32px;
display: flex;
flex-direction: column;
gap: 32px;
overflow: hidden;
}
@media (min-width: 1024px) {
.sw-page .lp-cta-banner {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 64px;
}
}
.sw-page .lp-cta-banner::before {
content: "";
position: absolute;
top: -50%;
right: -20%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(124, 58, 237, .25) 0%, transparent 70%);
pointer-events: none;
}
.sw-page .lp-cta-left {
position: relative;
z-index: 1;
flex: 1;
}
.sw-page .lp-cta-title {
font-size: 28px;
font-weight: 900;
color: #ffffff;
margin: 0 0 8px 0;
letter-spacing: -0.02em;
line-height: 1.1;
}
@media (min-width: 1024px) {
.sw-page .lp-cta-title { font-size: 36px; }
}
.sw-page .lp-cta-desc {
font-size: 16px;
color: rgba(255, 255, 255, .8);
line-height: 1.5;
margin: 0;
}
.sw-page .lp-cta-right {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
/* ββ 15.4.7 β .lp-btn ββ */
.sw-page .lp-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 24px;
height: 48px;
border-radius: 999px;
font-size: 15px;
font-weight: 700;
text-decoration: none;
transition: transform .25s, box-shadow .25s, background .25s;
white-space: nowrap;
}
.sw-page .lp-btn svg {
width: 18px !important;
height: 18px !important;
max-width: 18px !important;
max-height: 18px !important;
}
.sw-page .lp-btn-primary {
background: #ffffff;
color: #0F1419;
}
.sw-page .lp-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(255, 255, 255, .25);
}
.sw-page .lp-btn-outline {
background: transparent;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, .3);
}
.sw-page .lp-btn-outline:hover {
background: rgba(255, 255, 255, .1);
transform: translateY(-2px);
}
/* ββ 15.4.8 β Wir-ΓΌber-uns Bridge: .lp-about Wrapper ohne mtc-about ββ */
/* HTML 1_Wir-ueber-uns nutzt nur .lp-page.lp-about, NICHT .mtc-about */
/* Color-Variante ist schon definiert (Zeile 5646), aber falls die HTMLs about-* Klassen verwenden: */
.lp-page.lp-about .about-wrap,
.lp-page.lp-about .about-eyebrow,
.lp-page.lp-about .about-h2,
.lp-page.lp-about .about-stat,
.lp-page.lp-about .about-card,
.lp-page.lp-about .about-icon,
.lp-page.lp-about .about-cta {
/* Falls about-* Klassen vorkommen, mit lp-Theme rendern */
color: inherit;
}
/* ββ 15.4.9 β Wir-ΓΌber-uns spezifische .about-* Sub-Klassen ββ */
/* Hero-Stats unter dem Lead-Text */
.lp-page.lp-about .about-hero-stats {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-top: 32px;
}
.lp-page.lp-about .about-hero-stat {
display: flex;
flex-direction: column;
gap: 4px;
}
.lp-page.lp-about .about-hero-stat-value {
font-size: 18px;
font-weight: 800;
color: #16A172;
letter-spacing: -0.01em;
}
.lp-page.lp-about .about-hero-stat-label {
font-size: 12px;
color: #6B7280;
font-weight: 500;
}
/* Two-Cols Layout β was wir machen */
.lp-page.lp-about .about-two-cols {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 768px) {
.lp-page.lp-about .about-two-cols {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
}
.lp-page.lp-about .about-col {
position: relative;
padding: 40px 32px;
background: #ffffff;
border: 1px solid #E5E7EB;
border-radius: 16px;
transition: transform .3s, box-shadow .3s, border-color .3s;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
}
.lp-page.lp-about .about-col::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #16A172 0%, #0D7A55 100%);
transition: height .25s;
border-radius: 16px 16px 0 0;
}
.lp-page.lp-about .about-col:hover {
transform: translateY(-4px);
border-color: transparent;
box-shadow: 0 12px 32px rgba(15, 20, 25, .08);
}
.lp-page.lp-about .about-col:hover::before { height: 6px; }
.lp-page.lp-about .about-col-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: linear-gradient(135deg, #E6F7EF 0%, #D1F0E2 100%);
color: #16A172;
border-radius: 14px;
margin: 0 auto 8px auto;
box-shadow: 0 4px 12px rgba(22, 161, 114, .15);
}
.lp-page.lp-about .about-col-icon svg {
width: 28px !important;
height: 28px !important;
max-width: 28px !important;
max-height: 28px !important;
}
.lp-page.lp-about .about-col-title {
font-size: 22px;
font-weight: 800;
color: #0F1419;
margin: 0;
letter-spacing: -0.01em;
text-align: center;
}
.lp-page.lp-about .about-col-desc {
font-size: 15px;
color: #6B7280;
line-height: 1.55;
margin: 0;
text-align: center;
max-width: 400px;
}
.lp-page.lp-about .about-col-list {
list-style: none;
margin: 12px auto 0 auto;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
}
.lp-page.lp-about .about-col-list li {
position: relative;
padding-left: 24px;
font-size: 14px;
color: #374151;
line-height: 1.45;
text-align: left;
}
.lp-page.lp-about .about-col-list li::before {
content: "β";
position: absolute;
left: 0;
top: 0;
color: #16A172;
font-weight: 800;
}
/* Trust-Section (Bewertungen) */
.lp-page.lp-about .about-trust {
background: linear-gradient(180deg, #F0FAF6 0%, #FFFFFF 100%);
}
.lp-page.lp-about .about-trust-inner {
text-align: center;
}
.lp-page.lp-about .about-trust-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
margin-top: 32px;
}
@media (min-width: 768px) {
.lp-page.lp-about .about-trust-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.lp-page.lp-about .about-trust-stat {
text-align: center;
padding: 32px 24px;
background: #ffffff;
border-radius: 16px;
border: 1px solid #E5E7EB;
transition: transform .3s, box-shadow .3s;
}
.lp-page.lp-about .about-trust-stat:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(22, 161, 114, .12);
}
.lp-page.lp-about .about-trust-value {
font-size: 36px;
font-weight: 900;
color: #16A172;
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 8px;
}
.lp-page.lp-about .about-trust-label {
font-size: 13px;
color: #6B7280;
font-weight: 500;
}
.lp-page.lp-about .about-trust-stars {
font-size: 24px;
color: #FFA500;
letter-spacing: 4px;
margin-bottom: 16px;
}
.lp-page.lp-about .about-trust-title {
font-size: 24px;
font-weight: 800;
color: #0F1419;
margin: 16px 0 8px 0;
}
.lp-page.lp-about .about-trust-desc {
font-size: 14px;
color: #6B7280;
margin: 0 0 24px 0;
}
.lp-page.lp-about .about-trust-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 24px;
height: 48px;
background: #0F1419;
color: #ffffff;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: transform .25s, box-shadow .25s;
}
.lp-page.lp-about .about-trust-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(15, 20, 25, .25);
}
/* Location-Section (Sindelfingen + Map) */
.lp-page.lp-about .about-location {
background: #FAFBFD;
}
.lp-page.lp-about .about-location-inner {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
align-items: center;
}
@media (min-width: 1024px) {
.lp-page.lp-about .about-location-inner {
grid-template-columns: 1fr 1fr;
gap: 48px;
}
}
.lp-page.lp-about .about-location-left {
display: flex;
flex-direction: column;
gap: 16px;
}
.lp-page.lp-about .about-location-desc {
font-size: 16px;
color: #6B7280;
line-height: 1.55;
margin: 0 0 16px 0;
}
.lp-page.lp-about .about-location-info {
display: flex;
flex-direction: column;
gap: 8px;
background: #ffffff;
padding: 24px;
border-radius: 12px;
border: 1px solid #E5E7EB;
}
.lp-page.lp-about .about-location-item {
font-size: 14px;
color: #374151;
display: flex;
gap: 8px;
align-items: baseline;
}
.lp-page.lp-about .about-location-item strong {
color: #0F1419;
font-weight: 700;
min-width: 110px;
}
.lp-page.lp-about .about-location-right {
position: relative;
}
.lp-page.lp-about .about-map {
width: 100%;
height: 320px;
border-radius: 16px;
overflow: hidden;
border: 1px solid #E5E7EB;
box-shadow: 0 4px 16px rgba(15, 20, 25, .08);
}
.lp-page.lp-about .about-map iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
/*
* =========================================================
* MTC PDP Template A v4 β Shop (Premium Multi-Color)
* =========================================================
* FARB-JOBS:
* GrΓΌn #16A172 β Marke, Features, Versand, Beratung
* Orange #FF6B35 β CTAs, Deals, B2B-Highlight, Action
* Blau #2B4A7A β B2B, Enterprise, GPSR, Rechtliches
* Amber #FFB020 β Warnungen
* Ink #0F1419 β Schrift
* WeiΓ β Basis
* Hellgrau β Card-Backgrounds
*
* An custom.css UNTEN ANHΓNGEN (ersetzt .mtc-pdp-Regeln).
* =========================================================
*/
/* ==== BASIS ==== */
.mtc-pdp {
font-family: "Inter", -apple-system, sans-serif;
color: #0F1419;
line-height: 1.6;
background: #fff;
}
.mtc-pdp * { box-sizing: border-box; }
.mtc-pdp section {
padding: 40px 0;
border-top: 1px solid #EAEDF0;
background: #fff;
}
.mtc-pdp section:first-child {
border-top: none;
padding-top: 0;
}
.mtc-pdp section:last-child {
padding-bottom: 0;
}
.mtc-pdp .mtc-pdp-h3 {
font-family: "Plus Jakarta Sans", "Inter", sans-serif;
font-size: 22px;
font-weight: 700;
letter-spacing: -.02em;
color: #0F1419;
margin: 0 0 20px;
}
@media (min-width: 768px) {
.mtc-pdp .mtc-pdp-h3 { font-size: 26px; margin-bottom: 24px; }
}
/* ==== EYEBROW SYSTEM ==== */
.mtc-pdp-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: 14px;
}
.mtc-pdp-eyebrow::before {
content: "";
width: 28px;
height: 2px;
background: currentColor;
}
.mtc-pdp-eyebrow--green { color: #16A172; }
.mtc-pdp-eyebrow--blue { color: #2B4A7A; }
.mtc-pdp-eyebrow--orange{ color: #FF6B35; }
/* ==== PILL SYSTEM ==== */
.mtc-pdp-hero-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.mtc-pdp-pill {
display: inline-flex;
align-items: center;
padding: 6px 13px;
border-radius: 999px;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: .01em;
line-height: 1;
}
.mtc-pdp-pill--green {
background: #E8F8F1;
color: #0A5E42;
border: 1px solid rgba(22, 161, 114, .2);
}
.mtc-pdp-pill--orange {
background: linear-gradient(135deg, #FF6B35, #FF8A5C);
color: #fff;
box-shadow: 0 4px 12px -4px rgba(255, 107, 53, .4);
}
.mtc-pdp-pill--blue {
background: #E8EFF8;
color: #1A3658;
border: 1px solid rgba(43, 74, 122, .2);
}
/* ==== 1. HERO ==== */
.mtc-pdp-claim {
font-family: "Plus Jakarta Sans", "Inter", sans-serif;
font-size: clamp(24px, 3.2vw, 32px);
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.15;
color: #0F1419;
margin: 0 0 16px;
}
.mtc-pdp-intro {
font-size: 15px;
line-height: 1.7;
color: #2C3338;
margin: 0 0 28px;
max-width: 820px;
}
.mtc-pdp-intro strong { color: #0F1419; font-weight: 700; }
/* Key Features β Premium Cards */
.mtc-pdp-keyfeatures {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
@media (min-width: 640px) {
.mtc-pdp-keyfeatures { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}
.mtc-pdp-feature {
position: relative;
background: #fff;
border: 1px solid #EAEDF0;
border-radius: 12px;
padding: 16px 16px 14px;
display: flex;
flex-direction: column;
gap: 10px;
transition: all .2s ease;
overflow: hidden;
}
.mtc-pdp-feature::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, #16A172, #2ECC9A);
}
.mtc-pdp-feature:hover {
transform: translateY(-2px);
border-color: rgba(22, 161, 114, .3);
box-shadow: 0 8px 24px -12px rgba(15, 20, 25, .12);
}
/* Abwechselnde Feature-Farben */
.mtc-pdp-feature:nth-child(2)::after {
background: linear-gradient(90deg, #FF6B35, #FF8A5C);
}
.mtc-pdp-feature:nth-child(2) .mtc-pdp-feature-icon {
background: linear-gradient(135deg, #FFF2EC, #FFE5D6);
color: #FF6B35;
}
.mtc-pdp-feature:nth-child(3)::after {
background: linear-gradient(90deg, #2B4A7A, #4166A0);
}
.mtc-pdp-feature:nth-child(3) .mtc-pdp-feature-icon {
background: linear-gradient(135deg, #EEF3F9, #DDE6F0);
color: #2B4A7A;
}
.mtc-pdp-feature-icon {
width: 38px;
height: 38px;
background: linear-gradient(135deg, #F0FDF8, #E8F8F1);
border-radius: 10px;
display: grid;
place-items: center;
color: #16A172;
}
.mtc-pdp-feature-icon svg { width: 18px; height: 18px; }
.mtc-pdp-feature-label {
font-family: "Plus Jakarta Sans", "Inter", sans-serif;
font-size: 16px;
font-weight: 700;
color: #0F1419;
line-height: 1.15;
}
.mtc-pdp-feature-value {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
font-weight: 600;
color: #6E7681;
letter-spacing: .02em;
}
/* ==== 2. SPECS ==== */
.mtc-pdp-specs-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (min-width: 640px) {
.mtc-pdp-specs-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (min-width: 1024px) {
.mtc-pdp-specs-grid { grid-template-columns: repeat(3, 1fr); }
}
.mtc-pdp-spec-group {
background: #F9FBFC;
border: 1px solid #EAEDF0;
border-radius: 12px;
padding: 18px 20px;
transition: border-color .2s ease;
}
.mtc-pdp-spec-group:hover {
border-color: rgba(22, 161, 114, .25);
}
.mtc-pdp-spec-group h4 {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #16A172;
margin: 0 0 12px;
padding-bottom: 10px;
border-bottom: 1px solid #EAEDF0;
}
.mtc-pdp-spec-group table {
width: 100%;
border-collapse: collapse;
font-size: 13.5px;
}
.mtc-pdp-spec-group td {
padding: 5px 0;
vertical-align: top;
line-height: 1.45;
}
.mtc-pdp-spec-group td:first-child {
color: #6E7681;
width: 45%;
font-weight: 500;
padding-right: 10px;
}
.mtc-pdp-spec-group td:last-child {
color: #0F1419;
font-weight: 600;
}
/* ==== 3. LIEFERUMFANG ==== */
.mtc-pdp-delivery-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
@media (min-width: 640px) {
.mtc-pdp-delivery-list { grid-template-columns: repeat(2, 1fr); }
}
.mtc-pdp-delivery-list li {
position: relative;
padding: 12px 14px 12px 44px;
background: #F9FBFC;
border: 1px solid #EAEDF0;
border-radius: 10px;
font-size: 14px;
color: #0F1419;
transition: all .2s ease;
}
.mtc-pdp-delivery-list li::before {
content: "";
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background: #16A172;
border-radius: 50%;
background-image: url("data:image/svg+xml;utf8,");
background-size: 12px;
background-position: center;
background-repeat: no-repeat;
}
.mtc-pdp-delivery-list li:hover {
border-color: rgba(22, 161, 114, .3);
background: #F5FCF9;
}
/* ==== 4. CONDITION & GEWΓHRLEISTUNG ==== */
.mtc-pdp-condition-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
@media (min-width: 640px) {
.mtc-pdp-condition-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}
.mtc-pdp-condition-card {
position: relative;
background: #F9FBFC;
border: 1px solid #EAEDF0;
border-radius: 12px;
padding: 22px 22px 20px;
overflow: hidden;
}
.mtc-pdp-condition-card::before {
content: "";
position: absolute;
top: 0; bottom: 0; left: 0;
width: 3px;
background: #EAEDF0;
}
.mtc-pdp-condition-new {
background: linear-gradient(135deg, #F5FCF9, #F9FBFC);
}
.mtc-pdp-condition-new::before { background: #16A172; }
.mtc-pdp-condition-warranty {
background: linear-gradient(135deg, #F5F8FC, #F9FBFC);
}
.mtc-pdp-condition-warranty::before { background: #2B4A7A; }
.mtc-pdp-condition-tag {
display: inline-block;
font-family: "JetBrains Mono", monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
padding: 5px 11px;
border-radius: 6px;
margin-bottom: 12px;
}
.mtc-pdp-tag--green { background: #16A172; color: #fff; }
.mtc-pdp-tag--blue { background: #2B4A7A; color: #fff; }
.mtc-pdp-tag--orange { background: #FF6B35; color: #fff; }
.mtc-pdp-condition-card p {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: #2C3338;
}
.mtc-pdp-condition-card p strong { color: #0F1419; }
/* ==== 5. TRUST β mit Multi-Color Icons ==== */
.mtc-pdp-trust-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
@media (min-width: 640px) {
.mtc-pdp-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (min-width: 1024px) {
.mtc-pdp-trust-grid { grid-template-columns: repeat(4, 1fr); }
}
.mtc-pdp-trust-item {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
background: #F9FBFC;
border: 1px solid #EAEDF0;
border-radius: 12px;
transition: all .2s ease;
}
.mtc-pdp-trust-item:hover {
border-color: rgba(22, 161, 114, .3);
background: #fff;
box-shadow: 0 4px 12px -6px rgba(15, 20, 25, .08);
transform: translateY(-1px);
}
.mtc-pdp-trust-icon {
width: 42px;
height: 42px;
border-radius: 11px;
display: grid;
place-items: center;
flex-shrink: 0;
}
.mtc-pdp-trust-icon svg { width: 20px; height: 20px; }
.mtc-pdp-trust-icon--green {
background: linear-gradient(135deg, #F0FDF8, #E8F8F1);
color: #16A172;
}
.mtc-pdp-trust-icon--blue {
background: linear-gradient(135deg, #EEF3F9, #DDE6F0);
color: #2B4A7A;
}
.mtc-pdp-trust-icon--orange {
background: linear-gradient(135deg, #FFF2EC, #FFE5D6);
color: #FF6B35;
}
.mtc-pdp-trust-item strong {
display: block;
font-size: 14px;
font-weight: 700;
color: #0F1419;
line-height: 1.2;
margin-bottom: 2px;
}
.mtc-pdp-trust-item span {
font-size: 12.5px;
color: #6E7681;
}
/* ==== 6. GPSR (Blau Enterprise) ==== */
.mtc-pdp-gpsr-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin-bottom: 20px;
}
@media (min-width: 640px) {
.mtc-pdp-gpsr-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
}
.mtc-pdp-gpsr-block {
position: relative;
background: #F9FBFC;
border: 1px solid #EAEDF0;
border-radius: 12px;
padding: 18px 20px;
overflow: hidden;
}
.mtc-pdp-gpsr-block::before {
content: "";
position: absolute;
top: 0; bottom: 0; left: 0;
width: 3px;
background: #2B4A7A;
}
.mtc-pdp-gpsr-block h4 {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #2B4A7A;
margin: 0 0 10px;
}
.mtc-pdp-gpsr-block p {
margin: 0;
font-size: 13px;
line-height: 1.6;
color: #2C3338;
}
.mtc-pdp-gpsr-block strong { color: #0F1419; font-weight: 700; }
.mtc-pdp-gpsr-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.mtc-pdp-badge {
display: inline-flex;
align-items: center;
padding: 7px 13px;
border-radius: 999px;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
border: 1px solid transparent;
}
.mtc-pdp-badge--green {
background: #E8F8F1;
color: #0A5E42;
border-color: rgba(22, 161, 114, .2);
}
.mtc-pdp-badge--amber {
background: #FFF7E6;
color: #8A5A00;
border-color: rgba(255, 176, 32, .25);
}
.mtc-pdp-gpsr-note {
font-size: 12.5px;
color: #6E7681;
margin: 10px 0 0;
font-style: italic;
}
/* ==== 7. BATTERY ==== */
.mtc-pdp-battery p {
font-size: 13px;
line-height: 1.65;
color: #2C3338;
margin: 0 0 12px;
}
.mtc-pdp-battery strong { color: #0F1419; font-weight: 700; }
.mtc-pdp-battery-symbols {
padding: 16px 18px;
background: #F9FBFC;
border: 1px solid #EAEDF0;
border-left: 3px solid #2B4A7A;
border-radius: 10px;
margin-top: 8px;
}
.mtc-pdp-battery-symbols p {
font-size: 12.5px !important;
margin-bottom: 8px;
}
.mtc-pdp-battery-symbols p:last-child { margin-bottom: 0; }
/* ==== MOBILE FEINSCHLIFF ==== */
@media (max-width: 639px) {
.mtc-pdp section { padding: 32px 0; }
.mtc-pdp .mtc-pdp-h3 { font-size: 20px; }
.mtc-pdp-claim { font-size: 24px; }
.mtc-pdp-feature { padding: 14px; }
.mtc-pdp-spec-group { padding: 16px 18px; }
}
/* =========================================================
* STICKY BUY BAR β Mobile Only
* =========================================================
* Zeigt sich beim Scrollen unten am iPhone-Rand.
* Orange CTA Β· Premium Β· iOS-Feeling
* ========================================================= */
.mtc-sticky-buy {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9000;
background: #fff;
border-top: 1px solid #EAEDF0;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -8px 24px -12px rgba(15, 20, 25, .15);
display: none; /* nur mobile */
transform: translateY(100%);
transition: transform .3s ease;
}
.mtc-sticky-buy.is-visible {
transform: translateY(0);
}
.mtc-sticky-buy-inner {
display: flex;
align-items: center;
gap: 12px;
max-width: 780px;
margin: 0 auto;
}
.mtc-sticky-buy-info {
flex: 0 0 auto;
min-width: 0;
}
.mtc-sticky-buy-label {
display: block;
font-family: "JetBrains Mono", monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: #6E7681;
line-height: 1;
margin-bottom: 4px;
}
.mtc-sticky-buy-price {
display: block;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 18px;
font-weight: 800;
color: #0F1419;
line-height: 1;
white-space: nowrap;
}
.mtc-sticky-buy-cta {
flex: 1 1 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 20px;
background: linear-gradient(135deg, #FF6B35, #FF8A5C);
color: #fff !important;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 15px;
font-weight: 700;
letter-spacing: -.01em;
text-decoration: none;
border: none;
border-radius: 12px;
box-shadow: 0 6px 18px -6px rgba(255, 107, 53, .5);
transition: all .2s ease;
cursor: pointer;
min-height: 48px;
}
.mtc-sticky-buy-cta:hover {
background: linear-gradient(135deg, #F5601E, #FF7A45);
box-shadow: 0 8px 22px -6px rgba(255, 107, 53, .55);
transform: translateY(-1px);
color: #fff !important;
text-decoration: none;
}
.mtc-sticky-buy-cta:active {
transform: translateY(0);
}
.mtc-sticky-buy-cta svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
/* Nur auf Mobile anzeigen */
@media (max-width: 767px) {
.mtc-sticky-buy { display: block; }
/* Damit Inhalt nicht vom Sticky verdeckt wird */
body.has-sticky-buy { padding-bottom: 80px; }
}
/* Nicht sichtbar auf Desktop */
@media (min-width: 768px) {
.mtc-sticky-buy { display: none !important; }
}
/*
* =========================================================
* MTC β ORANGE WARENKORB-BUTTON v4 (SIMPLE & SAFE)
* =========================================================
* Kein Button wird versteckt.
* Nur farbliche Anpassung.
* =========================================================
*/
/* ===================================================
HAUPT "IN WARENKORB" BUTTON (alle submit-buttons in buy_form)
=================================================== */
form[name="buy_form"] button[type="submit"],
form[id^="buy_form"] button[type="submit"],
#buy_form button[type="submit"],
#buy_form_wrapper button[type="submit"],
button[name="inWarenkorbLegen"],
#inWarenkorbButton {
background-color: #FF6B35 !important;
background-image: none !important;
border: 1px solid #FF6B35 !important;
color: #fff !important;
font-family: "Plus Jakarta Sans", "Inter", sans-serif !important;
font-weight: 700 !important;
font-size: 15px !important;
padding: 12px 22px !important;
border-radius: 10px !important;
box-shadow: 0 2px 6px rgba(255, 107, 53, .18) !important;
transition: all .2s ease !important;
min-height: 48px !important;
cursor: pointer !important;
text-shadow: none !important;
}
/* Hover */
form[name="buy_form"] button[type="submit"]:hover,
form[id^="buy_form"] button[type="submit"]:hover,
#buy_form button[type="submit"]:hover,
button[name="inWarenkorbLegen"]:hover,
#inWarenkorbButton:hover {
background-color: #F5601E !important;
border-color: #F5601E !important;
box-shadow: 0 4px 10px rgba(255, 107, 53, .28) !important;
color: #fff !important;
}
/* ===================================================
PCARD-CART (Startseiten Produktkarten)
=================================================== */
.mtc-shop .pcard-cart,
a.pcard-cart {
background-color: #FF6B35 !important;
color: #fff !important;
}
.mtc-shop .pcard-cart:hover,
a.pcard-cart:hover {
background-color: #F5601E !important;
color: #fff !important;
}
/* ===================================================
FRAGE ZUM ARTIKEL β neutral
=================================================== */
a[href*="question_on_item"] {
color: #6E7681 !important;
background: transparent !important;
}
a[href*="question_on_item"]:hover {
color: #FF6B35 !important;
}
/* =====================================================================
SECTION 19 β NAVBAR HOVER (Logo-Mint)
---------------------------------------------------------------------
Stand: 30.04.2026
Zweck: NOVAChild Default-Gelb auf MTC Logo-Mint ΓΌberschreiben
Scope: Hauptnavigation Hover + Aktiv-Indikator + Burger-MenΓΌ
===================================================================== */
/* Standard: Indikator-Linien transparent (sonst dauerhaft sichtbar) */
.navbar-nav .nav-link::after,
.navbar-nav .nav-link::before,
.navbar-nav .nav-item.has-children > .nav-link::after,
.navbar-nav .dropdown-toggle::after {
background-color: transparent !important;
border-color: transparent !important;
color: inherit !important;
}
/* HOVER: Logo-Mint Farbe */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-item:hover > .nav-link,
.navbar-nav .nav-link:focus {
color: #16B886 !important;
}
/* HOVER: Indikator-Linie unter MenΓΌpunkt */
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-item:hover > .nav-link::after,
.navbar-nav .nav-link:focus::after {
background-color: #16B886 !important;
border-color: #16B886 !important;
}
/* Dropdown-Pfeil bei Kategorien mit UntermenΓΌ */
.navbar-nav .dropdown-toggle .caret,
.navbar-nav .nav-item.has-children .toggle-icon {
color: #6E7681 !important;
}
.navbar-nav .nav-item:hover .dropdown-toggle .caret,
.navbar-nav .nav-item:hover .toggle-icon {
color: #16B886 !important;
}
/* Burger-MenΓΌ: alle aktiven Items auf Mint statt NOVA-Gelb */
.navigation-mobile a.active,
.navigation-mobile .nav-link.active,
.navigation-mobile li.active > a,
.mobile-nav a.active,
.mobile-nav-item.active,
.mobile-nav-item.active > a,
.menu-overlay a.active,
.menu-overlay .active > a,
.offcanvas a.active,
.offcanvas .active,
nav.mobile-menu a.active {
color: #16B886 !important;
}
/* Submenu / UntermenΓΌ aktive Highlights */
.navigation-mobile .submenu .active,
.navigation-mobile .submenu a.active,
.mobile-nav .submenu a.active,
.menu-overlay .submenu a.active {
color: #16B886 !important;
background-color: rgba(22, 184, 134, 0.08) !important;
}
/* =====================================================================
SECTION 20 β FOOTER ZAHLUNGSARTEN MOBILE-FIX
---------------------------------------------------------------------
Stand: 30.04.2026
Zweck: Mobile zerrissenes Layout der Zahlungsarten beheben
Scope: .footer-pay, .footer-pay-tiles, .footer-pay-trust
===================================================================== */
@media (max-width: 767px) {
.footer-pay {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 14px !important;
padding: 20px 0 !important;
text-align: center !important;
}
.footer-pay-label {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: rgba(255, 255, 255, 0.5) !important;
display: block !important;
margin: 0 !important;
}
.footer-pay-tiles {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
margin: 0 !important;
}
.footer-pay-tiles .pay-tile {
flex: 0 0 auto !important;
padding: 8px 14px !important;
font-size: 12px !important;
font-weight: 600 !important;
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 999px !important;
color: rgba(255, 255, 255, 0.85) !important;
white-space: nowrap !important;
margin: 0 !important;
}
.footer-pay-trust {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 12px !important;
color: #16B886 !important;
font-weight: 600 !important;
margin: 0 !important;
}
.footer-pay-trust svg {
width: 14px !important;
height: 14px !important;
flex-shrink: 0 !important;
}
}
/* =====================================================================
SECTION 21 β WARTUNGSMODUS-BANNER (Premium Dark)
---------------------------------------------------------------------
Stand: 30.04.2026
Zweck: 1Γ Premium-Banner statt 3 Werbe-Banner
Scope: .mb-maintenance (innerhalb .mtc-banners > .mb-wrap)
HTML: templates/NOVAChild/snippets/mtc/home/_banners.tpl
===================================================================== */
.mb-maintenance {
position: relative;
display: block;
padding: 48px 36px;
margin: 0;
background: linear-gradient(135deg, #0F1419 0%, #1A2330 50%, #0E8A6B 130%);
border-radius: 24px;
overflow: hidden;
text-decoration: none !important;
color: #fff;
box-shadow:
0 12px 40px -12px rgba(15, 20, 25, 0.5),
0 0 0 1px rgba(31, 207, 160, 0.12);
transition: transform .35s cubic-bezier(.2,.7,.3,1),
box-shadow .35s cubic-bezier(.2,.7,.3,1);
cursor: pointer;
isolation: isolate;
}
.mb-maintenance:hover {
transform: translateY(-3px);
box-shadow:
0 20px 50px -10px rgba(15, 20, 25, 0.55),
0 0 0 1px rgba(31, 207, 160, 0.25);
}
.mb-maint-glow {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
z-index: 0;
}
.mb-maint-glow-1 {
top: -100px;
right: -100px;
width: 320px;
height: 320px;
background: radial-gradient(circle, rgba(31, 207, 160, 0.45) 0%, transparent 70%);
}
.mb-maint-glow-2 {
bottom: -120px;
left: -120px;
width: 380px;
height: 380px;
background: radial-gradient(circle, rgba(168, 85, 247, 0.18) 0%, transparent 70%);
}
.mb-maint-inner {
position: relative;
z-index: 1;
max-width: 760px;
}
.mb-maint-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: rgba(31, 207, 160, 0.15);
border: 1px solid rgba(31, 207, 160, 0.35);
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #1FCFA0;
margin-bottom: 22px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.mb-maint-pulse {
width: 8px;
height: 8px;
background: #1FCFA0;
border-radius: 50%;
position: relative;
display: inline-block;
box-shadow: 0 0 10px #1FCFA0;
animation: mtcMaintPulse 2s infinite;
}
@keyframes mtcMaintPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.2); }
}
.mb-maint-title {
font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
font-size: 36px;
line-height: 1.15;
font-weight: 800;
color: #fff;
margin: 0 0 18px 0;
letter-spacing: -0.8px;
}
.mb-maint-gradient {
background: linear-gradient(90deg, #1FCFA0, #5EEACE);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: #1FCFA0;
}
.mb-maint-lead {
font-size: 16px;
line-height: 1.65;
color: #C4CDD7;
margin: 0 0 26px 0;
max-width: 640px;
}
.mb-maint-features {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 28px 0;
}
.mb-maint-feature {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 14px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
font-size: 13px;
font-weight: 600;
color: #fff;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.mb-maint-feature svg {
width: 14px;
height: 14px;
color: #1FCFA0;
flex-shrink: 0;
}
.mb-maint-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.mb-maint-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 22px;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.2px;
text-decoration: none !important;
transition: all .25s cubic-bezier(.2,.7,.3,1);
cursor: pointer;
}
.mb-maint-cta svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.mb-maint-cta--primary {
background: linear-gradient(135deg, #FF6B35, #E5460F);
color: #fff !important;
box-shadow: 0 8px 20px -4px rgba(255, 107, 53, 0.45);
}
.mb-maint-cta--primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px -6px rgba(255, 107, 53, 0.55);
}
.mb-maint-cta--secondary {
background: rgba(255, 255, 255, 0.08);
color: #fff !important;
border: 1px solid rgba(255, 255, 255, 0.18);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.mb-maint-cta--secondary:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(31, 207, 160, 0.4);
color: #1FCFA0 !important;
}
@media (max-width: 767px) {
.mb-maintenance {
padding: 32px 22px;
border-radius: 18px;
}
.mb-maint-title {
font-size: 26px;
line-height: 1.2;
letter-spacing: -0.4px;
}
.mb-maint-lead {
font-size: 15px;
line-height: 1.6;
margin-bottom: 22px;
}
.mb-maint-features {
gap: 6px;
margin-bottom: 22px;
}
.mb-maint-feature {
padding: 7px 11px;
font-size: 12px;
}
.mb-maint-actions {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.mb-maint-cta {
justify-content: center;
padding: 14px 20px;
font-size: 14px;
}
.mb-maint-glow-1 { width: 200px; height: 200px; top: -60px; right: -60px; }
.mb-maint-glow-2 { width: 240px; height: 240px; bottom: -80px; left: -80px; }
}
/* =====================================================================
SECTION 22 β BOTTOM-NAV GLOBAL Β· ALLE SEITEN
---------------------------------------------------------------------
Stand: 30.04.2026
Zweck: Bottom-Nav auf ALLEN Seiten sichtbar (Service-Pages,
CMS-Pages, Kategorien, Standort)
AUSSER: Artikel-Detail + Checkout
HTML: templates/NOVAChild/layout/footer.tpl
Scope: Mobile only (Desktop deaktiviert)
===================================================================== */
@media (max-width: 767px) {
/* GLOBAL: Bottom-Nav immer sichtbar auf Mobile */
body .mtc-mobile-nav,
html body nav.mtc-mobile-nav {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
z-index: 990 !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: space-around !important;
align-items: stretch !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
padding: 8px 0 calc(8px + env(safe-area-inset-bottom)) 0 !important;
margin: 0 !important;
background: rgba(255, 255, 255, 0.96) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
border-top: 1px solid rgba(229, 231, 235, 0.8) !important;
box-shadow: 0 -4px 20px rgba(15, 20, 25, 0.06) !important;
list-style: none !important;
transform: none !important;
}
/* Items im Nav: Flex-Layout */
body .mtc-mobile-nav > a,
body .mtc-mobile-nav .mtc-mn-item,
html body nav.mtc-mobile-nav > a {
flex: 1 1 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
padding: 6px 4px !important;
margin: 0 !important;
width: auto !important;
text-decoration: none !important;
color: #4A5560 !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.2px !important;
transition: color 0.2s ease !important;
}
/* Icons im Nav */
body .mtc-mobile-nav svg,
body .mtc-mobile-nav .mtc-mn-item svg {
width: 22px !important;
height: 22px !important;
max-width: 22px !important;
max-height: 22px !important;
color: #4A5560 !important;
flex-shrink: 0 !important;
}
/* Span-Label */
body .mtc-mobile-nav span,
body .mtc-mobile-nav .mtc-mn-item span {
color: #4A5560 !important;
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1 !important;
}
/* Hover/Active: Mint */
body .mtc-mobile-nav a:hover,
body .mtc-mobile-nav a:active,
body .mtc-mobile-nav a.active {
color: #16B886 !important;
}
body .mtc-mobile-nav a:hover svg,
body .mtc-mobile-nav a:active svg,
body .mtc-mobile-nav a.active svg,
body .mtc-mobile-nav a:hover span,
body .mtc-mobile-nav a:active span,
body .mtc-mobile-nav a.active span {
color: #16B886 !important;
}
/* Body-Padding: Platz fΓΌr fixed Bottom-Nav */
body {
padding-bottom: 70px !important;
}
}
/* Desktop: Bottom-Nav komplett aus */
@media (min-width: 768px) {
.mtc-mobile-nav,
body .mtc-mobile-nav {
display: none !important;
}
body {
padding-bottom: 0 !important;
}
}
/* AUSNAHMEN: Artikel-Detail + Checkout β Bottom-Nav AUS */
@media (max-width: 767px) {
body.product-details .mtc-mobile-nav,
body.product-detail .mtc-mobile-nav,
body[class*="product-details"] .mtc-mobile-nav,
body[class*="produkt-detail"] .mtc-mobile-nav,
body[class*="artikel-detail"] .mtc-mobile-nav,
body[class*="article-detail"] .mtc-mobile-nav,
body.checkout-page .mtc-mobile-nav,
body.checkout .mtc-mobile-nav,
body[class*="bestellvorgang"] .mtc-mobile-nav,
body[class*="checkout"] .mtc-mobile-nav {
display: none !important;
}
body.product-details,
body.product-detail,
body[class*="product-details"],
body[class*="produkt-detail"],
body[class*="artikel-detail"],
body[class*="checkout"],
body[class*="bestellvorgang"] {
padding-bottom: 0 !important;
}
}
/* =====================================================================
SECTION 23 β PDP APP-DNA Β· MOBILE-FIRST
=====================================================================
Stand: 30.04.2026
Pfad: templates/NOVAChild/themes/my-nova/custom.css
Mode: ANHΓNGEN ans Ende der custom.css
Zweck: JTL-Standard-PDP-Elemente in App-DNA ΓΌberlagern
(Mobile-First, Desktop = App-Frame max-width)
Scope: Alle Artikel-Detail-Seiten
Selektor-Robust: matcht NOVA-Standard + Varianten
Komponenten:
A. Container & App-Frame
B. Bildergalerie Edge-to-Edge
C. Title-Block (H1 + Brand)
D. Preis-Block (App-Style)
E. Stock-Status mit Pulse
F. Add-to-Cart App-CTA (Orange Pill)
G. "Frage zum Artikel" SekundΓ€r-Button
H. Trust-Row (per JS injiziert)
I. Tabs β Akkordeon Mobile + Desktop
J. Cross-Sell App-Style
K. Sticky-Bar Padding-Bottom
===================================================================== */
/* =====================================================
A. CONTAINER & APP-FRAME
===================================================== */
/* Body-Klasse fΓΌr Detail-Seite β JTL setzt body.product-details o.Γ€. */
@media (min-width: 1024px) {
/* Desktop: App-Frame zentriert mit Glow-Background */
body[class*="product-detail"] #content-wrapper,
body[class*="produkt-detail"] #content-wrapper,
body[class*="productdetails"] #content-wrapper {
background:
radial-gradient(circle at 20% 0%, rgba(22,161,114,0.05) 0%, transparent 40%),
radial-gradient(circle at 80% 100%, rgba(255,107,53,0.04) 0%, transparent 40%),
transparent;
}
body[class*="product-detail"] .product-detail-wrapper,
body[class*="produkt-detail"] .product-detail-wrapper,
body[class*="productdetails"] .product-detail-wrapper,
body[class*="product-detail"] #result-wrapper,
body[class*="produkt-detail"] #result-wrapper,
body[class*="productdetails"] #result-wrapper {
max-width: 720px !important;
margin: 24px auto !important;
background: #fff !important;
border-radius: 28px !important;
overflow: hidden !important;
box-shadow:
0 0 0 1px rgba(15,20,25,0.04),
0 24px 64px rgba(15,20,25,0.08),
0 8px 24px rgba(15,20,25,0.04) !important;
}
}
/* =====================================================
B. BILDERGALERIE β Edge-to-Edge App-Style
===================================================== */
@media (max-width: 1023px) {
/* Mobile: Bildergalerie Edge-to-Edge */
body[class*="product-detail"] .product-detail-image,
body[class*="produkt-detail"] .product-detail-image,
body[class*="productdetails"] .product-detail-image,
body[class*="product-detail"] .product-image-wrapper,
body[class*="produkt-detail"] .product-image-wrapper,
body[class*="productdetails"] .product-image-wrapper,
body[class*="product-detail"] .product-images,
body[class*="produkt-detail"] .product-images {
margin-left: -16px !important;
margin-right: -16px !important;
border-radius: 0 !important;
background: linear-gradient(135deg, #FAFBFC 0%, #F1F3F5 100%) !important;
position: relative;
}
body[class*="product-detail"] .product-detail-image img,
body[class*="produkt-detail"] .product-detail-image img,
body[class*="productdetails"] .product-detail-image img,
body[class*="product-detail"] .product-image-wrapper img,
body[class*="produkt-detail"] .product-image-wrapper img,
body[class*="productdetails"] .product-image-wrapper img {
padding: 32px !important;
filter: drop-shadow(0 30px 40px rgba(15,20,25,0.10));
}
}
/* =====================================================
C. TITLE-BLOCK β App-Typo
===================================================== */
body[class*="product-detail"] h1.product-name,
body[class*="produkt-detail"] h1.product-name,
body[class*="productdetails"] h1.product-name,
body[class*="product-detail"] .product-detail h1,
body[class*="produkt-detail"] .product-detail h1,
body[class*="productdetails"] .product-detail h1,
body[class*="product-detail"] .product-info h1,
body[class*="produkt-detail"] .product-info h1 {
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
font-size: clamp(20px, 4vw, 28px) !important;
font-weight: 800 !important;
line-height: 1.2 !important;
letter-spacing: -.02em !important;
color: #0F1419 !important;
margin: 18px 0 12px !important;
}
/* Artikelnummer/Kategorie kleiner und subtiler */
body[class*="product-detail"] .product-attribute-list,
body[class*="produkt-detail"] .product-attribute-list,
body[class*="productdetails"] .product-attribute-list,
body[class*="product-detail"] .product-id,
body[class*="produkt-detail"] .product-id {
font-size: 12px !important;
color: #6B7280 !important;
margin-bottom: 18px !important;
}
/* =====================================================
D. PREIS-BLOCK β App-Style (groΓ, klar)
===================================================== */
body[class*="product-detail"] .price-box .product-price,
body[class*="produkt-detail"] .price-box .product-price,
body[class*="productdetails"] .price-box .product-price,
body[class*="product-detail"] .price,
body[class*="produkt-detail"] .price,
body[class*="product-detail"] .h2.price,
body[class*="produkt-detail"] .h2.price {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: clamp(28px, 6vw, 38px) !important;
font-weight: 800 !important;
letter-spacing: -.03em !important;
color: #0F1419 !important;
line-height: 1 !important;
}
body[class*="product-detail"] .price-info,
body[class*="produkt-detail"] .price-info,
body[class*="productdetails"] .price-info,
body[class*="product-detail"] .tax-info,
body[class*="produkt-detail"] .tax-info {
font-size: 12px !important;
color: #6B7280 !important;
margin-top: 4px !important;
}
/* =====================================================
E. STOCK-STATUS β mit Pulse
===================================================== */
body[class*="product-detail"] .stock-info,
body[class*="produkt-detail"] .stock-info,
body[class*="productdetails"] .stock-info,
body[class*="product-detail"] .availability-info,
body[class*="produkt-detail"] .availability-info,
body[class*="product-detail"] .delivery-status,
body[class*="produkt-detail"] .delivery-status {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 10px 14px !important;
background: rgba(22,161,114,0.08) !important;
border-radius: 999px !important;
margin: 12px 0 !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #0E7A56 !important;
position: relative !important;
}
/* Pulsierender grΓΌner Dot */
body[class*="product-detail"] .stock-info::before,
body[class*="produkt-detail"] .stock-info::before,
body[class*="productdetails"] .stock-info::before,
body[class*="product-detail"] .availability-info::before,
body[class*="produkt-detail"] .availability-info::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #16A172;
box-shadow: 0 0 0 0 rgba(22,161,114,0.5);
animation: mtc-pdp-pulse 2s ease-out infinite;
flex-shrink: 0;
}
@keyframes mtc-pdp-pulse {
0% { box-shadow: 0 0 0 0 rgba(22,161,114,0.5); }
70% { box-shadow: 0 0 0 8px rgba(22,161,114,0); }
100% { box-shadow: 0 0 0 0 rgba(22,161,114,0); }
}
/* Bei nicht verfΓΌgbar: Rot statt GrΓΌn */
body[class*="product-detail"] .stock-info[class*="not-available"],
body[class*="produkt-detail"] .stock-info[class*="not-available"],
body[class*="product-detail"] .stock-info.text-danger,
body[class*="produkt-detail"] .stock-info.text-danger {
background: rgba(220,38,38,0.08) !important;
color: #B91C1C !important;
}
body[class*="product-detail"] .stock-info[class*="not-available"]::before,
body[class*="produkt-detail"] .stock-info[class*="not-available"]::before,
body[class*="product-detail"] .stock-info.text-danger::before,
body[class*="produkt-detail"] .stock-info.text-danger::before {
background: #DC2626 !important;
animation: none !important;
}
/* =====================================================
F. ADD-TO-CART β App-CTA (Orange Pill)
===================================================== */
body[class*="product-detail"] #buy_form button[type="submit"],
body[class*="produkt-detail"] #buy_form button[type="submit"],
body[class*="productdetails"] #buy_form button[type="submit"],
body[class*="product-detail"] .product-add-to-cart,
body[class*="produkt-detail"] .product-add-to-cart,
body[class*="product-detail"] .btn-add-to-cart,
body[class*="produkt-detail"] .btn-add-to-cart,
body[class*="product-detail"] #inWarenkorbButton,
body[class*="produkt-detail"] #inWarenkorbButton {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
width: 100% !important;
padding: 16px 20px !important;
background: #FF6B35 !important;
color: #fff !important;
border: none !important;
border-radius: 999px !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: .01em !important;
cursor: pointer !important;
box-shadow: 0 8px 20px rgba(255,107,53,0.32) !important;
transition: all .2s cubic-bezier(.4,0,.2,1) !important;
text-transform: none !important;
}
body[class*="product-detail"] #buy_form button[type="submit"]:hover,
body[class*="produkt-detail"] #buy_form button[type="submit"]:hover,
body[class*="product-detail"] .product-add-to-cart:hover,
body[class*="produkt-detail"] .product-add-to-cart:hover {
background: #E5572C !important;
transform: translateY(-1px) !important;
box-shadow: 0 10px 24px rgba(255,107,53,0.4) !important;
}
body[class*="product-detail"] #buy_form button[type="submit"]:active,
body[class*="produkt-detail"] #buy_form button[type="submit"]:active {
transform: scale(0.98) !important;
}
/* MengenwΓ€hler-Container clean */
body[class*="product-detail"] .product-quantity,
body[class*="produkt-detail"] .product-quantity,
body[class*="productdetails"] .product-quantity,
body[class*="product-detail"] .input-group-quantity,
body[class*="produkt-detail"] .input-group-quantity {
margin-bottom: 12px !important;
}
/* =====================================================
G. "FRAGE ZUM ARTIKEL" β SekundΓ€r-Button (Outline)
===================================================== */
body[class*="product-detail"] a[href*="produktanfrage"],
body[class*="produkt-detail"] a[href*="produktanfrage"],
body[class*="productdetails"] a[href*="produktanfrage"],
body[class*="product-detail"] .product-question,
body[class*="produkt-detail"] .product-question,
body[class*="product-detail"] .btn-question,
body[class*="produkt-detail"] .btn-question {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
padding: 14px 20px !important;
background: transparent !important;
color: #0F1419 !important;
border: 1.5px solid #E5E7EB !important;
border-radius: 999px !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
text-decoration: none !important;
margin-top: 10px !important;
transition: all .2s cubic-bezier(.4,0,.2,1) !important;
}
body[class*="product-detail"] a[href*="produktanfrage"]:hover,
body[class*="produkt-detail"] a[href*="produktanfrage"]:hover {
background: #F4F5F7 !important;
border-color: #6B7280 !important;
text-decoration: none !important;
}
/* =====================================================
H. TRUST-ROW (per JS injiziert) β Style
===================================================== */
.mtc-pdp-trust {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
margin: 16px 0 0 !important;
}
.mtc-pdp-trust-item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 6px !important;
padding: 14px 8px !important;
background: #FAFBFC !important;
border-radius: 16px !important;
text-align: center !important;
}
.mtc-pdp-trust-icon {
width: 32px;
height: 32px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
}
.mtc-pdp-trust-icon.green { background: rgba(22,161,114,0.12); color: #0E7A56; }
.mtc-pdp-trust-icon.orange { background: rgba(255,107,53,0.12); color: #E5572C; }
.mtc-pdp-trust-icon.cyan { background: rgba(8,145,178,0.12); color: #0891B2; }
.mtc-pdp-trust-icon svg { width: 16px; height: 16px; }
.mtc-pdp-trust-label {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 11px;
font-weight: 600;
color: #0F1419;
line-height: 1.3;
}
/* =====================================================
I. TABS β AKKORDEON (Mobile + Desktop)
===================================================== */
@media (max-width: 767px) {
/* Tab-Liste auf Mobile: vertikal stacken */
body[class*="product-detail"] .nav-tabs,
body[class*="produkt-detail"] .nav-tabs,
body[class*="productdetails"] .nav-tabs {
display: flex !important;
flex-direction: column !important;
border-bottom: 0 !important;
margin: 16px -16px 0 !important;
}
body[class*="product-detail"] .nav-tabs .nav-item,
body[class*="produkt-detail"] .nav-tabs .nav-item,
body[class*="productdetails"] .nav-tabs .nav-item {
width: 100% !important;
border-bottom: 1px solid #F1F3F5 !important;
}
body[class*="product-detail"] .nav-tabs .nav-link,
body[class*="produkt-detail"] .nav-tabs .nav-link,
body[class*="productdetails"] .nav-tabs .nav-link {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
padding: 18px 20px !important;
background: #fff !important;
border: 0 !important;
border-radius: 0 !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
color: #0F1419 !important;
text-align: left !important;
}
/* Chevron-Icon rechts (per pseudo) */
body[class*="product-detail"] .nav-tabs .nav-link::after,
body[class*="produkt-detail"] .nav-tabs .nav-link::after,
body[class*="productdetails"] .nav-tabs .nav-link::after {
content: '';
width: 12px;
height: 12px;
border-right: 2px solid #6B7280;
border-bottom: 2px solid #6B7280;
transform: rotate(45deg);
transition: transform .3s cubic-bezier(.4,0,.2,1);
}
body[class*="product-detail"] .nav-tabs .nav-link.active::after,
body[class*="produkt-detail"] .nav-tabs .nav-link.active::after {
transform: rotate(-135deg);
}
/* Tab-Content unter dem aktiven Tab */
body[class*="product-detail"] .tab-content,
body[class*="produkt-detail"] .tab-content,
body[class*="productdetails"] .tab-content {
padding: 0 !important;
}
body[class*="product-detail"] .tab-pane,
body[class*="produkt-detail"] .tab-pane,
body[class*="productdetails"] .tab-pane {
padding: 16px 20px !important;
background: #FAFBFC !important;
}
}
/* =====================================================
J. CROSS-SELL β Horizontaler Swipe (Mobile)
===================================================== */
@media (max-width: 767px) {
body[class*="product-detail"] .similar-products,
body[class*="produkt-detail"] .similar-products,
body[class*="productdetails"] .similar-products,
body[class*="product-detail"] .product-list-similar,
body[class*="produkt-detail"] .product-list-similar,
body[class*="product-detail"] .crossselling,
body[class*="produkt-detail"] .crossselling {
margin: 24px -16px !important;
}
body[class*="product-detail"] .similar-products .row,
body[class*="produkt-detail"] .similar-products .row,
body[class*="productdetails"] .similar-products .row,
body[class*="product-detail"] .product-list-similar .row,
body[class*="produkt-detail"] .product-list-similar .row {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
padding: 4px 16px 8px !important;
gap: 12px !important;
margin: 0 !important;
}
body[class*="product-detail"] .similar-products .row::-webkit-scrollbar,
body[class*="produkt-detail"] .similar-products .row::-webkit-scrollbar,
body[class*="productdetails"] .similar-products .row::-webkit-scrollbar,
body[class*="product-detail"] .product-list-similar .row::-webkit-scrollbar {
display: none !important;
}
body[class*="product-detail"] .similar-products [class*="col-"],
body[class*="produkt-detail"] .similar-products [class*="col-"],
body[class*="productdetails"] .similar-products [class*="col-"],
body[class*="product-detail"] .product-list-similar [class*="col-"],
body[class*="produkt-detail"] .product-list-similar [class*="col-"] {
flex: 0 0 175px !important;
max-width: 175px !important;
scroll-snap-align: start !important;
padding: 0 !important;
}
}
/* =====================================================
K. STICKY-BAR Β· BODY-PADDING (damit Content nicht ΓΌberdeckt)
===================================================== */
@media (max-width: 767px) {
body[class*="product-detail"],
body[class*="produkt-detail"],
body[class*="productdetails"] {
padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
}
}
/* =====================================================
L. WISHLIST-FLOAT + BRAND-PILL (per JS injiziert)
===================================================== */
.mtc-pdp-image-wrap {
position: relative !important;
}
.mtc-pdp-brand-pill {
position: absolute !important;
top: 16px !important;
left: 16px !important;
z-index: 10 !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 14px !important;
background: rgba(255,255,255,0.95) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border: 1px solid rgba(255,255,255,0.6) !important;
border-radius: 999px !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
color: #0F1419 !important;
box-shadow: 0 4px 12px rgba(15,20,25,0.08) !important;
}
.mtc-pdp-brand-pill::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: #16A172;
box-shadow: 0 0 0 3px rgba(22,161,114,0.2);
}
.mtc-pdp-wish-float {
position: absolute !important;
top: 16px !important;
right: 16px !important;
z-index: 10 !important;
width: 44px !important;
height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(255,255,255,0.95) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border: 1px solid rgba(255,255,255,0.6) !important;
border-radius: 999px !important;
box-shadow: 0 4px 12px rgba(15,20,25,0.08) !important;
cursor: pointer !important;
transition: all .2s cubic-bezier(.4,0,.2,1) !important;
}
.mtc-pdp-wish-float:active { transform: scale(0.92); }
.mtc-pdp-wish-float svg { width: 22px; height: 22px; color: #0F1419; fill: none; stroke: currentColor; stroke-width: 2; transition: all .2s; }
.mtc-pdp-wish-float.is-active svg { color: #FF6B35; fill: #FF6B35; }
/* ===== ENDE SECTION 23 ===== */
/* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
MTC HINWEISSEITEN Β· STYLES (V3)
- JTL Standard-H1 ausblenden
- JTL automatischen "Versandkosten ermittelt"-Text ausblenden
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
/* JTL Standard-H1 ausblenden wenn Custom-Hero vorhanden */
body:has(.mtc-info) main h1:not(.mtc-info-h1),
body:has(.mtc-info) .page-header h1:not(.mtc-info-h1) {
display: none !important;
}
/* JTL automatischen Versandkosten-Hinweistext (alert/info) ausblenden */
body:has(.mtc-info) .alert-info,
body:has(.mtc-info) .alert.alert-info,
body:has(.mtc-info) main > .alert,
body:has(.mtc-info) #content > .alert {
display: none !important;
}
/* Falls JTL den Hinweis als mit Klasse rendert (NOVA Theme) */
body:has(.mtc-info) .shipping-info-notice,
body:has(.mtc-info) .versandhinweis {
display: none !important;
}
/* MTC Info Container */
.mtc-info { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: #0F1419; line-height: 1.6; max-width: 720px; margin: 24px auto; padding: 0 16px; }
.mtc-info * { box-sizing: border-box; }
.mtc-info svg { display: inline-block; flex-shrink: 0; }
.mtc-info-hero { padding: 28px 24px; background: linear-gradient(180deg,#FAFBFC 0%,#fff 100%); border: 1px solid #EAEDF0; border-radius: 22px; margin-bottom: 20px; }
.mtc-info-eyebrow { display: inline-block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #16A172; margin-bottom: 12px; }
.mtc-info-h1 { font-size: clamp(22px,5vw,28px); font-weight: 800; letter-spacing: -.02em; color: #0F1419; margin: 0 0 12px; line-height: 1.15; }
.mtc-info-lead { font-size: 14px; color: #4B5563; margin: 0; }
.mtc-info-section { padding: 22px 0; border-top: 1px solid #F1F3F5; }
.mtc-info-section:first-of-type { border-top: 0; padding-top: 0; }
.mtc-info-section h2 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: #0F1419; margin: 0 0 14px; }
.mtc-info-cards { display: flex; flex-direction: column; gap: 10px; }
.mtc-info-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #E5E7EB; border-radius: 14px; padding: 14px 16px; }
.mtc-info-card-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.mtc-info-card-icon svg { width: 22px; height: 22px; }
.mtc-info-card-body { flex: 1; min-width: 0; }
.mtc-info-card-title { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6B7280; margin-bottom: 2px; }
.mtc-info-card-value { font-size: 15px; font-weight: 800; color: #0F1419; letter-spacing: -.01em; margin-bottom: 2px; }
.mtc-info-card-desc { font-size: 12px; color: #6B7280; line-height: 1.45; }
.mtc-info-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.mtc-info-tag { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: #F4F5F7; border: 1px solid #E5E7EB; border-radius: 999px; font-size: 13px; font-weight: 600; color: #0F1419; }
.mtc-info-rows { display: flex; flex-direction: column; gap: 8px; }
.mtc-info-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; }
.mtc-info-row-label { font-size: 13px; color: #6B7280; }
.mtc-info-row-value { font-size: 14px; font-weight: 700; color: #0F1419; }
.mtc-info-note { padding: 14px 16px; background: #FAFBFC; border: 1px solid #E5E7EB; border-radius: 12px; font-size: 13px; color: #4B5563; line-height: 1.55; margin-top: 12px; }
.mtc-info-note strong { color: #0F1419; }
@media (max-width:639px) {
.mtc-info { padding: 0 12px; }
.mtc-info-hero { padding: 22px 18px; border-radius: 16px; }
}
/* =====================================================================
SECTION 24 β APP-SHELL PREMIUM (Phase 1 Β· Level 2)
---------------------------------------------------------------------
Stand: 01.05.2026
Pfad: templates/NOVAChild/themes/my-nova/custom.css
Mode: ANS ENDE der custom.css anhΓ€ngen (NACH Section 23)
FEATURES:
24.1 β Scroll-Progress-Bar (oben, Coral, dΓΌnn)
24.2 β Scroll-Aware Header (schrumpft beim Scrollen)
24.3 β Spotlight-Search Pill (βK, nur Desktop, im Header)
24.4 β Unified Desktop Dock (Floating Pill, 6 Items + Anrufen)
24.5 β Help-FAB Mobile-only (Desktop-Override fΓΌr _app-fab.tpl)
PRINZIPIEN:
β Mobile bleibt 100% identisch β nur 1 kleines Override (24.5)
β Desktop bekommt App-Look β alle 4 Features
β Konflikt-Frei mit Section 13/14/22 (Bottom-Nav)
β Konflikt-Frei mit _app-fab.tpl (Help-Pill bleibt Mobile)
β Saubere SpezifitΓ€t, kein !important wo nicht nΓΆtig
===================================================================== */
/* =====================================================
24.1 β SCROLL-PROGRESS-BAR
===================================================== */
.mtc-scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
background: linear-gradient(90deg, #FF6B35 0%, #E5572C 100%);
z-index: 1000;
pointer-events: none;
box-shadow: 0 0 8px rgba(255, 107, 53, .6);
transition: width 0.1s ease-out;
}
@media (prefers-reduced-motion: reduce) {
.mtc-scroll-progress { transition: none; }
}
/* =====================================================
24.2 β SCROLL-AWARE HEADER
Wirkt auf den NOVA-Header (existing in Section 14.1)
und unseren App-Header β schrumpft beim Scrollen.
===================================================== */
@media (min-width: 768px) {
/* Header bekommt sanfte HΓΆhen-Transition */
body header,
body .nova-header,
body #header,
body #nova-header {
transition:
height 0.3s cubic-bezier(.4, 0, .2, 1),
padding 0.3s cubic-bezier(.4, 0, .2, 1),
background 0.25s ease,
box-shadow 0.25s ease;
}
/* Beim Scrollen: kompakter + stΓ€rkerer Schatten */
body.is-scrolled header,
body.is-scrolled .nova-header,
body.is-scrolled #header,
body.is-scrolled #nova-header {
box-shadow: 0 1px 12px rgba(15, 20, 25, .08);
border-bottom: 1px solid rgba(229, 231, 235, .8);
}
/* Falls Header eine min-height hat, kompakter machen beim Scroll */
body.is-scrolled header,
body.is-scrolled .nova-header,
body.is-scrolled #nova-header {
--header-shrink: 0.85;
}
}
/* =====================================================
24.3 β SPOTLIGHT-SEARCH (Desktop only)
Wird per JS in den Header injiziert (siehe custom.js Erweiterung)
===================================================== */
.mtc-spotlight {
display: none;
}
@media (min-width: 1024px) {
.mtc-spotlight {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 9px 16px;
background: #F4F5F7;
border: 1px solid #E5E7EB;
border-radius: 999px;
font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
font-size: 13px;
font-weight: 500;
color: #6B7280;
text-decoration: none;
cursor: pointer;
transition:
background .2s ease,
border-color .2s ease,
color .2s ease,
box-shadow .2s ease;
min-width: 280px;
max-width: 480px;
flex: 1;
}
.mtc-spotlight:hover,
.mtc-spotlight:focus-visible {
background: #fff;
border-color: #FF6B35;
color: #0F1419;
box-shadow: 0 4px 12px rgba(255, 107, 53, .15);
text-decoration: none;
}
.mtc-spotlight svg {
width: 16px;
height: 16px;
flex-shrink: 0;
color: #6B7280;
}
.mtc-spotlight:hover svg {
color: #FF6B35;
}
.mtc-spotlight-text {
flex: 1;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mtc-spotlight-shortcut {
background: #fff;
border: 1px solid #E5E7EB;
padding: 1px 7px;
border-radius: 5px;
font-size: 10px;
font-family: 'JetBrains Mono', monospace;
font-weight: 600;
color: #6B7280;
line-height: 1.4;
flex-shrink: 0;
}
}
/* =====================================================
24.4 β UNIFIED DESKTOP DOCK
Floating Pill-Nav unten zentriert (β₯1024px)
Mobile: ausgeblendet (.mtc-mobile-nav ΓΌbernimmt)
===================================================== */
.mtc-dock {
display: none;
}
@media (min-width: 1024px) {
.mtc-dock {
display: flex;
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 950;
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(229, 231, 235, .8);
border-radius: 999px;
padding: 6px;
gap: 4px;
box-shadow:
0 16px 48px rgba(15, 20, 25, .14),
0 4px 12px rgba(15, 20, 25, .06);
transition:
transform .35s cubic-bezier(.16, 1, .3, 1),
box-shadow .35s cubic-bezier(.16, 1, .3, 1),
opacity .25s ease;
}
/* Hover-Lift des gesamten Docks */
.mtc-dock:hover {
box-shadow:
0 20px 56px rgba(15, 20, 25, .18),
0 6px 16px rgba(15, 20, 25, .08);
}
/* Auto-Hide beim Scrollen nach unten */
.mtc-dock.is-hidden {
transform: translateX(-50%) translateY(120px);
opacity: 0;
pointer-events: none;
}
/* Dock Item */
.mtc-dock-item {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 999px;
font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
font-size: 13px;
font-weight: 600;
color: #6B7280;
text-decoration: none;
background: transparent;
border: none;
cursor: pointer;
transition:
background .2s ease,
color .2s ease,
transform .15s ease;
position: relative;
white-space: nowrap;
}
/* Dock Item Icon */
.mtc-dock-item svg {
width: 17px;
height: 17px;
stroke-width: 2;
flex-shrink: 0;
}
/* Hover */
.mtc-dock-item:hover {
background: rgba(15, 20, 25, .04);
color: #0F1419;
text-decoration: none;
}
/* Active (aktuelle Seite) */
.mtc-dock-item.is-active {
background: #0F1419;
color: #fff;
}
.mtc-dock-item.is-active:hover {
background: #1F2937;
color: #fff;
}
/* Click feedback */
.mtc-dock-item:active {
transform: scale(.96);
}
/* Cart Badge */
.mtc-dock-cart-badge {
display: inline-flex;
align-items: center;
justify-content: center;
background: #FF6B35;
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 700;
padding: 2px 7px;
border-radius: 999px;
min-width: 18px;
height: 18px;
line-height: 1;
margin-left: 2px;
}
/* Active state Badge wird invertiert */
.mtc-dock-item.is-active .mtc-dock-cart-badge {
background: #fff;
color: #0F1419;
}
/* Divider zwischen Nav-Items und Anrufen */
.mtc-dock-divider {
width: 1px;
background: rgba(15, 20, 25, .08);
margin: 6px 4px;
align-self: stretch;
}
/* Help/Anrufen Item β Coral Highlight */
.mtc-dock-item.is-help {
background: linear-gradient(135deg, #FF6B35 0%, #E5572C 100%);
color: #fff;
}
.mtc-dock-item.is-help:hover {
background: linear-gradient(135deg, #E5572C 0%, #C84818 100%);
color: #fff;
transform: translateY(-1px);
}
.mtc-dock-item.is-help:active {
transform: scale(.96);
}
}
/* =====================================================
24.5 β HELP-FAB Override (Desktop ausblenden)
Existing _app-fab.tpl Help-Pill ist auf Mobile + Desktop sichtbar.
Auf Desktop: ausblenden β Anrufen ist im Dock.
Auf Mobile: bleibt wie es ist.
===================================================== */
@media (min-width: 1024px) {
.mtc-fab-help {
display: none;
}
}
/* =====================================================
24.6 β PRINT (alle Floating-Elemente aus)
===================================================== */
@media print {
.mtc-scroll-progress,
.mtc-spotlight,
.mtc-dock {
display: none !important;
}
}
/* =====================================================================
ENDE SECTION 24 β APP-SHELL PREMIUM
===================================================================== */
/* =====================================================================
SECTION 25 β SMART MEGA-DRAWER v3.4 (FINAL CLEAN)
---------------------------------------------------------------------
Stand: 01.05.2026 (v3.4)
Mode: ERSETZT die alte Section 25
ΓNDERUNGEN ggΓΌ v3.3:
β MTC Deals: nur Name, KEIN Untertext "Aktuelle Top-Angebote"
β Anrufen-CTA komplett WEG (Coral-FAB rechts macht das)
β Drawer wieder kompakt (kein langer Text mehr)
===================================================================== */
/* 25.1 β BURGER BUTTON */
.mtc-burger-btn {
width: 40px; height: 40px;
background: #F4F5F7;
border: 1px solid #E5E7EB;
border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, transform 0.15s;
flex-shrink: 0;
padding: 0;
margin-right: 12px;
}
.mtc-burger-btn:hover { background: #fff; border-color: #FF6B35; transform: scale(1.05); }
.mtc-burger-btn:active { transform: scale(0.95); }
.mtc-burger-btn svg { width: 18px; height: 18px; color: #0F1419; transition: transform 0.25s; }
body.mtc-drawer-open .mtc-burger-btn svg { transform: rotate(90deg); }
@media (max-width: 767px) {
.mtc-burger-btn { width: 36px; height: 36px; border-radius: 10px; margin-right: 8px; }
.mtc-burger-btn svg { width: 16px; height: 16px; }
}
/* 25.2 β DRAWER */
.mtc-drawer-overlay {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
background: transparent;
z-index: 990;
opacity: 0;
pointer-events: none;
}
body.mtc-drawer-open .mtc-drawer-overlay {
opacity: 1;
pointer-events: auto;
}
.mtc-drawer {
position: fixed;
top: 0; left: 0; bottom: 0;
width: 340px; /* β noch kompakter: 360 β 340 */
max-width: 82vw;
background: #fff;
z-index: 1000;
overflow-y: auto;
overflow-x: hidden;
box-shadow: 12px 0 48px rgba(15, 20, 25, 0.18);
transform: translateX(-100%);
transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(15, 20, 25, 0.12) transparent;
}
body.mtc-drawer-open .mtc-drawer { transform: translateX(0); }
.mtc-drawer::-webkit-scrollbar { width: 5px; }
.mtc-drawer::-webkit-scrollbar-track { background: transparent; }
.mtc-drawer::-webkit-scrollbar-thumb { background: rgba(15, 20, 25, 0.12); border-radius: 999px; }
/* 25.3 β DRAWER HEADER */
.mtc-drawer-header {
position: sticky;
top: 0;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid #EAEDF0;
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 10;
}
.mtc-drawer-title {
display: flex; align-items: center; gap: 7px;
font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
font-size: 14px; font-weight: 800;
color: #0F1419;
letter-spacing: -0.4px;
}
.mtc-drawer-title-dot {
width: 6px; height: 6px;
border-radius: 999px;
background: #16A172;
box-shadow: 0 0 0 3px rgba(22, 161, 114, 0.18);
}
.mtc-drawer-close {
width: 30px; height: 30px;
background: #F4F5F7;
border: 1px solid #E5E7EB;
border-radius: 9px;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.2s;
padding: 0;
}
.mtc-drawer-close:hover {
background: #fff;
border-color: #FF6B35;
color: #FF6B35;
transform: rotate(90deg);
}
.mtc-drawer-close svg { width: 12px; height: 12px; }
.mtc-drawer-content { padding: 16px 18px 28px; }
/* 25.4 β SECTION TITLE */
.mtc-drawer-section { margin-bottom: 18px; }
.mtc-drawer-section:last-child { margin-bottom: 0; }
.mtc-drawer-section-title {
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px; font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #0F1419;
margin-bottom: 4px;
padding: 9px 0;
border-bottom: 1px solid #EAEDF0;
display: flex; align-items: center; gap: 8px;
}
.mtc-drawer-section-title-dot {
width: 5px; height: 5px;
border-radius: 999px;
background: #FF6B35;
flex-shrink: 0;
box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);
}
.mtc-drawer-section-title::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(15, 20, 25, 0.08), transparent);
}
/* 25.5 β MTC DEALS HIGHLIGHT (NUR NAME, kein Untertext) */
.mtc-drawer-deals {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: linear-gradient(135deg, #FF6B35 0%, #E5572C 100%);
color: #fff;
border-radius: 12px;
text-decoration: none;
margin-bottom: 18px;
box-shadow: 0 6px 18px rgba(255, 107, 53, 0.28);
transition: all 0.25s ease;
position: relative;
overflow: hidden;
}
.mtc-drawer-deals::before {
content: '';
position: absolute;
top: -50%; right: -10%;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%);
pointer-events: none;
}
.mtc-drawer-deals:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(255, 107, 53, 0.4);
color: #fff;
text-decoration: none;
}
.mtc-drawer-deals-icon {
width: 30px; height: 30px;
background: rgba(255, 255, 255, 0.22);
border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
position: relative; z-index: 1;
}
.mtc-drawer-deals-icon svg { width: 15px; height: 15px; color: #fff; stroke-width: 2; }
.mtc-drawer-deals-text { flex: 1; position: relative; z-index: 1; min-width: 0; }
.mtc-drawer-deals-name {
font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
font-size: 14px;
font-weight: 800;
letter-spacing: -0.2px;
}
/* β Untertext "Aktuelle Top-Angebote" KOMPLETT VERSTECKEN */
.mtc-drawer-deals-sub {
display: none !important;
}
.mtc-drawer-deals-arrow { flex-shrink: 0; position: relative; z-index: 1; transition: transform 0.25s; }
.mtc-drawer-deals:hover .mtc-drawer-deals-arrow { transform: translateX(3px); }
.mtc-drawer-deals-arrow svg { width: 14px; height: 14px; color: #fff; stroke-width: 2.5; }
/* 25.6 β ACCORDION ITEMS */
.mtc-acc-item { border-bottom: 1px solid #F1F3F5; }
.mtc-acc-item:last-child { border-bottom: none; }
.mtc-acc-row {
display: flex;
align-items: center;
padding: 11px 4px;
}
.mtc-acc-text {
flex: 1;
font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
font-size: 14px;
font-weight: 700;
color: #0F1419;
letter-spacing: -0.2px;
cursor: pointer;
padding: 4px 0;
text-decoration: none;
transition: color 0.2s ease;
}
.mtc-acc-text:hover { color: #FF6B35; text-decoration: none; }
.mtc-acc-toggle {
width: 30px; height: 30px;
background: transparent;
border: 1px solid #EAEDF0;
border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.25s ease;
flex-shrink: 0;
padding: 0;
}
.mtc-acc-toggle:hover { background: #F4F5F7; border-color: #FF6B35; }
.mtc-acc-toggle svg { width: 12px; height: 12px; color: #6B7280; stroke-width: 2.5; transition: transform 0.3s, color 0.2s; }
.mtc-acc-toggle:hover svg { color: #FF6B35; }
.mtc-acc-item.is-open .mtc-acc-toggle { background: #FFF1EC; border-color: #FF6B35; }
.mtc-acc-item.is-open .mtc-acc-toggle svg { color: #FF6B35; transform: rotate(180deg); }
.mtc-acc-item.is-open .mtc-acc-text { color: #FF6B35; }
.mtc-acc-subs {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.mtc-acc-item.is-open .mtc-acc-subs { max-height: 800px; }
.mtc-acc-sub-list {
padding: 4px 0 12px 12px;
border-left: 2px solid #FFF1EC;
margin-left: 4px;
}
.mtc-acc-sub-link {
display: block;
padding: 7px 11px;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 500;
color: #4B5563;
text-decoration: none;
border-radius: 7px;
transition: all 0.2s ease;
}
.mtc-acc-sub-link:hover {
background: #FFF8F4;
color: #FF6B35;
transform: translateX(2px);
text-decoration: none;
}
/* 25.7 β SINGLE ITEMS */
.mtc-single-item {
display: flex;
align-items: center;
padding: 11px 4px;
border-bottom: 1px solid #F1F3F5;
cursor: pointer;
text-decoration: none;
transition: padding 0.2s ease;
}
.mtc-single-item:last-child { border-bottom: none; }
.mtc-single-item:hover { padding-left: 8px; text-decoration: none; }
.mtc-single-item:hover .mtc-single-text { color: #FF6B35; }
.mtc-single-item:hover .mtc-single-arrow { color: #FF6B35; transform: translateX(3px); }
.mtc-single-text {
flex: 1;
font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
font-size: 14px;
font-weight: 700;
color: #0F1419;
letter-spacing: -0.2px;
transition: color 0.2s ease;
}
.mtc-single-arrow {
color: #9CA3AF;
flex-shrink: 0;
transition: color 0.2s, transform 0.2s;
}
.mtc-single-arrow svg { width: 12px; height: 12px; stroke-width: 2.5; }
/* 25.8 β ACCOUNT LINKS */
.mtc-drawer-links {
display: flex;
flex-direction: column;
gap: 2px;
}
.mtc-drawer-link {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 11px;
border-radius: 9px;
cursor: pointer;
font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
font-size: 12.5px;
font-weight: 600;
color: #4B5563;
text-decoration: none;
transition: all 0.2s ease;
}
.mtc-drawer-link:hover {
background: #F4F5F7;
color: #0F1419;
text-decoration: none;
transform: translateX(2px);
}
.mtc-drawer-link svg {
width: 15px; height: 15px;
flex-shrink: 0;
color: #6B7280;
stroke-width: 2;
transition: color 0.2s;
}
.mtc-drawer-link:hover svg { color: #FF6B35; }
/* 25.9 β ANRUFEN CTA KOMPLETT VERSTECKEN
(Coral-FAB rechts macht das schon) */
.mtc-drawer-call {
display: none !important;
}
/* 25.10 β BODY-SCROLL-LOCK */
body.mtc-drawer-open { overflow: hidden; }
/* 25.11 β REDUCED MOTION + PRINT */
@media (prefers-reduced-motion: reduce) {
.mtc-drawer, .mtc-acc-toggle svg, .mtc-acc-subs,
.mtc-drawer-deals, .mtc-burger-btn svg,
.mtc-drawer-close, .mtc-single-item, .mtc-drawer-link,
.mtc-acc-sub-link, .mtc-acc-text {
transition: none !important;
animation: none !important;
}
}
@media print {
.mtc-burger-btn, .mtc-drawer-overlay, .mtc-drawer { display: none !important; }
}
/* ENDE SECTION 25 v3.4 */
/* =====================================================================
SECTION 26 β NOVA SIDEBAR + DOPPELUNGEN AUSBLENDEN (v3.2)
---------------------------------------------------------------------
Stand: 01.05.2026 (v3.2)
Pfad: templates/NOVAChild/themes/my-nova/custom.css
Mode: ERSETZT die alte Section 26
ΓNDERUNGEN ggΓΌ v3.1:
β NOVA-Kategorie-Sidebar auf Listing-Seiten KOMPLETT ausblenden
(Drawer ΓΌbernimmt Navigation)
β Mehr Platz fΓΌr Produkte (4 Spalten statt 3)
β Cleaner Premium-Look
STRATEGIE:
- Drawer (Burger links) ist die einzige Navigation
- Sidebar-Boxen "Kategorien" werden ausgeblendet
- Hauptcontent nimmt die volle Breite ein
===================================================================== */
/* =====================================================
26.1 β NOVA-SIDEBAR komplett ausblenden auf Listing-Seiten
===================================================== */
/* Linke Sidebar Container */
.left-sidebar,
.sidebar-left,
aside.left-sidebar,
#sidebar-left,
.col-left,
.left-column,
.product-list-sidebar,
.category-sidebar {
display: none !important;
}
/* Sidebar-Boxen (Bootstrap-Grid) */
[class*="col-"] > .left-sidebar,
[class*="col-"] > .sidebar-left,
[class*="col-"] > aside {
display: none !important;
}
/* Wenn Sidebar in Bootstrap-Grid: Container-Spalte auch ausblenden */
.row > div:has(> .left-sidebar),
.row > div:has(> .sidebar-left),
.row > div:has(> aside.left-sidebar) {
display: none !important;
}
/* =====================================================
26.2 β Hauptcontent volle Breite (Sidebar weg)
===================================================== */
/* Wenn Sidebar weg ist: rechte Spalte volle Breite */
@media (min-width: 992px) {
.row > .col-lg-9,
.row > .col-lg-10,
.row > .col-md-9,
.row > .col-md-10,
.right-column,
.col-right,
.product-list-content,
.category-content {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
}
}
/* =====================================================
26.3 β KATEGORIE-LISTING auf Listing-Seiten zentriert
===================================================== */
/* Optional: Container etwas einrΓΌcken */
@media (min-width: 992px) {
.product-list-wrapper,
.category-products,
.category-content > .product-list,
.product-list-container {
max-width: 1400px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 24px !important;
padding-right: 24px !important;
}
}
/* =====================================================
26.4 β DOPPELTE KATEGORIEN-HEADLINES ausblenden
Falls trotzdem irgendwo "Kategorien" Box auftaucht
===================================================== */
.box-categories,
.box-title-categories,
.categories-box,
.sidebar-categories,
.widget-categories,
nav.category-tree,
.category-tree {
display: none !important;
}
/* =====================================================
26.5 β BREADCRUMB Premium-Styling (bleibt sichtbar)
===================================================== */
.breadcrumb,
.breadcrumbs,
nav[aria-label="breadcrumb"] {
background: transparent !important;
padding: 14px 0 !important;
margin-bottom: 16px !important;
font-family: 'Inter', sans-serif !important;
font-size: 12.5px !important;
font-weight: 500 !important;
color: #6B7280 !important;
}
.breadcrumb a,
.breadcrumbs a,
nav[aria-label="breadcrumb"] a {
color: #6B7280 !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.breadcrumb a:hover,
.breadcrumbs a:hover,
nav[aria-label="breadcrumb"] a:hover {
color: #FF6B35 !important;
}
.breadcrumb .active,
.breadcrumb-item.active,
.breadcrumbs .active {
color: #0F1419 !important;
font-weight: 600 !important;
}
.breadcrumb-item + .breadcrumb-item::before {
color: #D1D5DB !important;
}
/* =====================================================
26.6 β KATEGORIE-TITEL Premium
===================================================== */
.category-title,
.products-list-title,
h1.category-name,
.product-list h1 {
font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif !important;
font-size: 32px !important;
font-weight: 800 !important;
letter-spacing: -0.6px !important;
color: #0F1419 !important;
margin-bottom: 20px !important;
}
@media (max-width: 767px) {
.category-title,
.products-list-title,
h1.category-name,
.product-list h1 {
font-size: 24px !important;
}
}
/* =====================================================
26.7 β PRODUKT-GRID auf 4 Spalten Desktop
(nutzt jetzt vollen Platz da keine Sidebar)
===================================================== */
@media (min-width: 1200px) {
.product-list .row,
.products-grid .row,
.product-listing .row {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 20px !important;
}
.product-list .row > [class*="col-"],
.products-grid .row > [class*="col-"],
.product-listing .row > [class*="col-"] {
width: 100% !important;
max-width: 100% !important;
flex: none !important;
padding: 0 !important;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.product-list .row,
.products-grid .row,
.product-listing .row {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 16px !important;
}
.product-list .row > [class*="col-"],
.products-grid .row > [class*="col-"],
.product-listing .row > [class*="col-"] {
width: 100% !important;
max-width: 100% !important;
flex: none !important;
padding: 0 !important;
}
}
/* ENDE SECTION 26 v3.2 */
/* =====================================================================
SECTION 27 β COOKIE-ICON ausblenden (bleibt von v3.3)
===================================================================== */
.cookie-consent-toggle,
.cookie-icon-fixed,
.cookie-fingerprint,
.privacy-fab,
.dsgvo-icon,
#cookie-toggle-btn,
.consent-toggle,
.cc-revoke,
.cc-revoke-custom,
.cookieconsent-toggle,
.osano-cm-widget,
.cookie-bar-toggle,
button.cc-revoke,
[class*="cookie-consent"][class*="toggle"],
[class*="cookie"][class*="fingerprint"],
[id*="cookie-consent-toggle"],
.cookie-bar-revoke,
#cookie-bar-revoke,
.cookieBarRevoke {
display: none !important;
}
/* ENDE SECTION 27 */
/* =====================================================================
SECTION 28 β MULTI-LEVEL DRAWER (iOS Settings Pattern Β· v3.7.1)
---------------------------------------------------------------------
Stand: 01.05.2026 (v3.7.1 mit z-index Fix)
Pfad: templates/NOVAChild/themes/my-nova/custom.css
Mode: ANHΓNGEN ans Ende der custom.css (NACH /* ENDE SECTION 27 */)
ΓNDERUNGEN ggΓΌ v3.7:
β z-index Fix: Drawer ΓΌber NOVA-Header
β Drawer-Header bleibt sichtbar auf Kategorie-Seiten
β Funktioniert auf Mobile (iPhone/Android/iPad) + Desktop
ZWECK:
β Click "Notebooks" β slidet zu Sub-Panel
β Header wird "β Notebooks" mit Back-Button
β Click Back / ESC β zurΓΌck zum HauptmenΓΌ
β iOS Settings App Pattern
PRINZIP:
- Section 25 (Drawer Base) bleibt 100% unverΓ€ndert
- Section 28 OVERRIDED nur Body-Layout fΓΌr Multi-Level
- Snippet rendert beide Panels (Level 1 + Level 2)
- Sub-Items werden per JS Block 4 in Level-2 injiziert
WICHTIG:
- Sections 19-27 unverΓ€ndert
- Bottom-Nav (22) unverΓ€ndert
- Coral-FAB Anrufen unverΓ€ndert
- NOVA Top-Nav unverΓ€ndert
===================================================================== */
/* =====================================================
28.1 β Z-INDEX FIX (Drawer ΓΌber NOVA-Header)
===================================================== */
/* Drawer hΓΆher als NOVA-Header (Sticky Header Section 24) */
.mtc-drawer-overlay {
z-index: 9998 !important;
}
.mtc-drawer {
z-index: 9999 !important;
}
/* =====================================================
28.2 β DRAWER ALS FLEX-CONTAINER (fΓΌr Panel-Stack)
===================================================== */
/* mtc-drawer wird Flex-Container damit Content flex:1 wirkt */
.mtc-drawer {
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
/* =====================================================
28.3 β DRAWER HEADER (sticky bleibt, wird flex-shrink:0)
===================================================== */
.mtc-drawer-header {
position: relative !important;
flex-shrink: 0 !important;
z-index: 5 !important;
}
/* =====================================================
28.4 β DRAWER CONTENT WIRD STACK-CONTAINER
===================================================== */
.mtc-drawer-content {
position: relative !important;
overflow: hidden !important;
padding: 0 !important;
flex: 1 1 auto !important;
min-height: 0 !important;
}
/* =====================================================
28.5 β PANELS (Level 1 + Level 2 stehen ΓΌbereinander)
===================================================== */
.mtc-drawer-panel {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #FFFFFF;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
padding: 16px 18px 28px 18px;
transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
scrollbar-width: thin;
scrollbar-color: rgba(15, 20, 25, 0.12) transparent;
}
.mtc-drawer-panel::-webkit-scrollbar { width: 5px; }
.mtc-drawer-panel::-webkit-scrollbar-track { background: transparent; }
.mtc-drawer-panel::-webkit-scrollbar-thumb {
background: rgba(15, 20, 25, 0.12);
border-radius: 999px;
}
/* Level 1 (HauptmenΓΌ) β sichtbar by default */
.mtc-drawer-panel.is-level-1 {
transform: translateX(0);
z-index: 2;
}
/* Level 2 (Sub-Kategorien) β versteckt rechts by default */
.mtc-drawer-panel.is-level-2 {
transform: translateX(100%);
z-index: 1;
}
/* Wenn Drawer auf Level 2 ist */
.mtc-drawer.is-level-2 .mtc-drawer-panel.is-level-1 {
transform: translateX(-30%);
pointer-events: none;
opacity: 0.6;
}
.mtc-drawer.is-level-2 .mtc-drawer-panel.is-level-2 {
transform: translateX(0);
z-index: 3;
}
/* =====================================================
28.6 β BACK-BUTTON im Header
===================================================== */
.mtc-drawer-back {
width: 32px;
height: 32px;
display: none; /* Standard: versteckt */
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: 8px;
color: #0F1419;
cursor: pointer;
flex-shrink: 0;
margin-right: 8px;
padding: 0;
transition: background 0.15s ease;
}
.mtc-drawer-back:hover,
.mtc-drawer-back:focus-visible {
background: #F4F5F7;
outline: none;
}
.mtc-drawer-back:active {
transform: scale(0.92);
}
.mtc-drawer-back svg {
width: 18px;
height: 18px;
stroke-width: 2.5;
}
/* Back-Button NUR auf Level 2 sichtbar */
.mtc-drawer.is-level-2 .mtc-drawer-back {
display: inline-flex;
}
/* Drawer-Title-Dot ausblenden auf Level 2 */
.mtc-drawer.is-level-2 .mtc-drawer-title-dot {
display: none;
}
/* =====================================================
28.7 β SUB-PANEL HEADER (Titel oben im Sub-Panel)
===================================================== */
.mtc-sub-header {
margin: -16px -18px 12px -18px;
padding: 16px 18px 14px 18px;
background: linear-gradient(180deg, #FAFBFC 0%, #FFFFFF 100%);
border-bottom: 1px solid #EAEDF0;
}
.mtc-sub-header-title {
font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
font-size: 18px;
font-weight: 800;
color: #0F1419;
letter-spacing: -0.4px;
line-height: 1.2;
margin-bottom: 4px;
}
.mtc-sub-header-desc {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #6B7280;
}
/* =====================================================
28.8 β SUB-ITEM (Card mit Icon + Name + Desc)
===================================================== */
.mtc-sub-item {
display: flex;
align-items: center;
padding: 14px 12px;
border-bottom: 1px solid #F1F3F5;
text-decoration: none;
color: #0F1419;
cursor: pointer;
transition: background 0.18s ease, padding 0.18s ease;
}
.mtc-sub-item:last-child { border-bottom: none; }
.mtc-sub-item:hover {
background: #FFF8F4;
padding-left: 16px;
text-decoration: none;
}
.mtc-sub-item:active {
background: #FFF1EC;
}
/* Icon-Box */
.mtc-sub-item-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: #FFF1EC;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 12px;
flex-shrink: 0;
transition: background 0.18s ease, transform 0.18s ease;
}
.mtc-sub-item:hover .mtc-sub-item-icon {
background: #FFE5D6;
transform: scale(1.05);
}
.mtc-sub-item-icon svg {
width: 16px;
height: 16px;
color: #FF6B35;
stroke-width: 2;
}
/* Text */
.mtc-sub-item-text {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.mtc-sub-item-name {
font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
font-size: 14px;
font-weight: 700;
color: #0F1419;
letter-spacing: -0.2px;
line-height: 1.3;
}
.mtc-sub-item:hover .mtc-sub-item-name { color: #FF6B35; }
.mtc-sub-item-desc {
font-size: 11px;
color: #6B7280;
font-weight: 500;
margin-top: 2px;
line-height: 1.3;
}
/* Arrow rechts */
.mtc-sub-item-arrow {
width: 14px;
height: 14px;
color: #9CA3AF;
flex-shrink: 0;
margin-left: 8px;
transition: color 0.18s ease, transform 0.18s ease;
}
.mtc-sub-item:hover .mtc-sub-item-arrow {
color: #FF6B35;
transform: translateX(3px);
}
.mtc-sub-item-arrow svg {
width: 100%;
height: 100%;
stroke-width: 2.5;
}
/* =====================================================
28.9 β SUB-TRIGGER Button (im HauptmenΓΌ)
===================================================== */
.mtc-sub-trigger {
display: flex;
align-items: center;
width: 100%;
padding: 11px 4px;
background: transparent;
border: none;
border-bottom: 1px solid #F1F3F5;
cursor: pointer;
text-align: left;
font-family: inherit;
transition: padding 0.18s ease;
}
.mtc-sub-trigger:last-child { border-bottom: none; }
.mtc-sub-trigger:hover {
padding-left: 8px;
}
.mtc-sub-trigger .mtc-single-text {
flex: 1;
font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
font-size: 14px;
font-weight: 700;
color: #0F1419;
letter-spacing: -0.2px;
transition: color 0.18s ease;
}
.mtc-sub-trigger:hover .mtc-single-text {
color: #FF6B35;
}
.mtc-sub-trigger .mtc-single-arrow {
color: #9CA3AF;
flex-shrink: 0;
transition: color 0.18s ease, transform 0.18s ease;
}
.mtc-sub-trigger:hover .mtc-single-arrow {
color: #FF6B35;
transform: translateX(3px);
}
.mtc-sub-trigger .mtc-single-arrow svg {
width: 12px;
height: 12px;
stroke-width: 2.5;
}
/* =====================================================
28.10 β ALTE ACCORDION-KLASSEN ausblenden (falls vorhanden)
===================================================== */
/* Falls altes Snippet noch irgendwo Accordion rendert: ausblenden */
.mtc-acc-toggle,
.mtc-acc-subs,
.mtc-acc-sub-list {
display: none !important;
}
/* Anrufen-CTA im Drawer auch ausblenden (Coral-FAB rechts macht das) */
.mtc-drawer-call {
display: none !important;
}
/* =====================================================
28.11 β MOBILE FEINSCHLIFF (β€767px iPhone/Android)
===================================================== */
@media (max-width: 767px) {
/* Drawer-Header etwas kompakter */
.mtc-drawer-header {
padding: 12px 14px !important;
}
/* Panel-Padding auf Mobile */
.mtc-drawer-panel {
padding: 14px 14px 28px 14px;
}
/* Sub-Header an kleines Padding anpassen */
.mtc-sub-header {
margin: -14px -14px 10px -14px;
padding: 14px 14px 12px 14px;
}
/* Sub-Item-Text auf Mobile */
.mtc-sub-item-name {
font-size: 13.5px;
}
}
/* =====================================================
28.12 β TABLET (β₯768px β€1023px iPad)
===================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
/* Drawer auf iPad etwas breiter */
.mtc-drawer {
width: 380px !important;
}
}
/* =====================================================
28.13 β DESKTOP (β₯1024px)
===================================================== */
@media (min-width: 1024px) {
/* Drawer auf Desktop Standard-Breite */
.mtc-drawer {
width: 360px !important;
}
}
/* =====================================================
28.14 β REDUCED MOTION
===================================================== */
@media (prefers-reduced-motion: reduce) {
.mtc-drawer-panel,
.mtc-drawer-back,
.mtc-sub-item,
.mtc-sub-trigger {
transition: none !important;
}
}
/* =====================================================
28.15 β PRINT
===================================================== */
@media print {
.mtc-drawer-panel.is-level-2 {
display: none !important;
}
}
/* =====================================================================
ENDE SECTION 28 β MULTI-LEVEL DRAWER v3.7.1
===================================================================== */
/* =====================================================================
SECTION 28.X β KATEGORIEN-BUTTON SYNC (v3.8)
---------------------------------------------------------------------
Stand: 02.05.2026 (v3.8)
Zweck: "Kategorien"-Button (Bottom-Nav + Desktop-Dock) ΓΆffnet Drawer
Active-State wenn Drawer offen ist (Premium UX)
ΓNDERUNGEN:
β Button-Reset fΓΌr mtc-mn-item--button + mtc-dock-item--button
β Active-State wenn Drawer auf ist (.mtc-drawer-open am body)
β Funktioniert Mobile (Bottom-Nav) + Desktop (Dock)
===================================================================== */
/* =====================================================
28.X.1 β BUTTON RESET (damit