Update300820252359
This commit is contained in:
parent
af6021b9cf
commit
4055e3ae54
17 changed files with 293 additions and 227 deletions
|
|
@ -445,10 +445,6 @@ section {
|
|||
}
|
||||
}
|
||||
|
||||
.mehrwert-icon {
|
||||
filter: invert(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%);
|
||||
}
|
||||
|
||||
/* ========== Gründerteam & Intro-Text ========== */
|
||||
.container-fluid {
|
||||
max-width: 100%;
|
||||
|
|
@ -649,21 +645,22 @@ body {
|
|||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
gap:clamp(1.25rem, 3vw, 3.5rem);
|
||||
flex-wrap:wrap; /* bricht sauber um */
|
||||
margin-top:clamp(4rem, 4vw, 6rem);
|
||||
gap:clamp(1rem, 3vw, 3rem); /* etwas enger */
|
||||
flex-wrap:wrap;
|
||||
margin-top:clamp(3rem, 3vw, 5rem); /* kompakter */
|
||||
}
|
||||
|
||||
.aff-group{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:clamp(.75rem, 2vw, 1.25rem);
|
||||
justify-content:center;
|
||||
gap:clamp(.5rem, 1.5vw, 1rem);
|
||||
}
|
||||
|
||||
/* Linker Block (Ingenieurbüros etc.) */
|
||||
.aff-caption{
|
||||
margin:0 0 .5rem 0;
|
||||
font-size:clamp(.9rem, 1.2vw, 1rem);
|
||||
font-size:clamp(.85rem, 1vw, .95rem);
|
||||
color:#6b7280;
|
||||
text-align:left;
|
||||
}
|
||||
|
|
@ -671,37 +668,32 @@ body {
|
|||
.aff-logos{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:clamp(.5rem, 1.2vw, 1rem);
|
||||
gap:clamp(.5rem, 1vw, .75rem);
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
.aff-logos img{
|
||||
max-height:clamp(100px, 3.2vw, 180px);
|
||||
/* Beide Logos gleich groß machen */
|
||||
.aff-logos img,
|
||||
.aff-right .aff-pva-logo{
|
||||
height:120px; /* Desktop-Höhe */
|
||||
width:auto;
|
||||
height:auto;
|
||||
display:block;
|
||||
object-fit:contain;
|
||||
}
|
||||
|
||||
/* Rechter Block: Nur Logo (klickbar) */
|
||||
/* Rechter Block: Nur Logo */
|
||||
.aff-right{
|
||||
display:flex; /* zentriert das Logo im Link */
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
text-decoration:none;
|
||||
color:inherit;
|
||||
}
|
||||
|
||||
.aff-right .aff-pva-logo{
|
||||
max-height:clamp(60px, 6vw, 120px); /* Logo-Größe hier steuern */
|
||||
width:auto;
|
||||
height:auto;
|
||||
display:block;
|
||||
}
|
||||
|
||||
/* Dezente Trennlinie zwischen links/rechts (nur Desktop) */
|
||||
@media (min-width: 900px){
|
||||
.aff-right{
|
||||
padding-left:clamp(1rem, 2.5vw, 3rem);
|
||||
padding-left:clamp(0.75rem, 2vw, 2rem);
|
||||
border-left:1px solid #e5e7eb;
|
||||
}
|
||||
}
|
||||
|
|
@ -714,6 +706,15 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
/* Mobile-Optimierung für sehr kleine Screens */
|
||||
@media (max-width: 480px){
|
||||
.aff-logos img,
|
||||
.aff-right .aff-pva-logo{
|
||||
height:60px; /* kleinere Höhe auf Handy */
|
||||
width:auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fokus-Style für Tastaturbedienung */
|
||||
.aff-right:focus-visible{
|
||||
outline:2px dashed var(--amp-accent);
|
||||
|
|
@ -722,6 +723,7 @@ body {
|
|||
|
||||
|
||||
|
||||
|
||||
/* ========================================
|
||||
CTA SECTION - HYBRID DESIGN
|
||||
======================================== */
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
<div class="intro-media ratio ratio-16x9 shadow-sm overflow-hidden">
|
||||
<video id="aboutVideo"
|
||||
class="intro-video"
|
||||
autoplay
|
||||
muted
|
||||
loop
|
||||
playsinline
|
||||
|
|
@ -34,28 +35,26 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const vid = document.getElementById("aboutVideo");
|
||||
if (!vid) return;
|
||||
|
||||
const srcWebm = '{{ "images/Imagevideo_Short.webm" | relURL }}';
|
||||
const srcMp4 = '{{ "images/Imagevideo_Short.mp4" | relURL }}';
|
||||
const srcWebm = '{{ "images/Imagevideo_Short.webm" | relURL }}';
|
||||
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
vid.innerHTML = `
|
||||
<source src="${srcWebm}" type="video/webm">
|
||||
<source src="${srcMp4}" type="video/mp4">
|
||||
<source src="${srcWebm}" type="video/webm">
|
||||
`;
|
||||
vid.play().catch(() => {});
|
||||
observer.disconnect();
|
||||
}
|
||||
});
|
||||
}, { rootMargin: "200px" });
|
||||
|
||||
observer.observe(vid);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -142,7 +141,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
{{ $step := 100 }}
|
||||
|
||||
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
|
||||
<img src="/icons/stamp.svg" alt="Staatlich geprüft" class="service-icon mb-3" style="filter: invert(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%);">
|
||||
<img src="/icons/stamp.svg" alt="Staatlich geprüft" class="service-icon mb-3">
|
||||
<h4 class="service-card-title">Staatlich geprüft & konessioniert</h4>
|
||||
<p class="service-card-description">
|
||||
<strong>Ingenieurbüro und Elektrotechnikbetrieb –</strong> Planung und Prüfung mit Qualität & Sicherheit.
|
||||
|
|
@ -150,7 +149,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
</article>
|
||||
|
||||
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
|
||||
<img src="/icons/brain.svg" alt="Erfahrung & Innovation" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);">
|
||||
<img src="/icons/brain.svg" alt="Erfahrung & Innovation" class="service-icon mb-3">
|
||||
<h4 class="service-card-title">Erfahrung & Innovation</h4>
|
||||
<p class="service-card-description">
|
||||
<strong>Über 10 Jahre Praxis –</strong> kombiniert mit modernen Methoden und Tools.
|
||||
|
|
@ -158,15 +157,16 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
</article>
|
||||
|
||||
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
|
||||
<img src="/icons/earth.svg" alt="Ganzheitlicher Ansatz" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);">
|
||||
<img src="/icons/earth.svg" alt="Ganzheitlicher Ansatz" class="service-icon mb-3">
|
||||
<h4 class="service-card-title">Ganzheitlicher Ansatz</h4>
|
||||
<p class="service-card-description">
|
||||
<strong>Technik, Wirtschaft & Umwelt –</strong> von Beginn an zukunftssicher gedacht.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
|
||||
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
|
||||
<img src="/icons/briefcase-business.svg" alt="Unabhängige Beratung" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);">
|
||||
<img src="/icons/briefcase-business.svg" alt="Unabhängige Beratung" class="service-icon mb-3">
|
||||
<h4 class="service-card-title">Unabhängige Beratung</h4>
|
||||
<p class="service-card-description">
|
||||
<strong>Herstellerneutral –</strong> wir empfehlen, was zu Ihrem Projekt wirklich passt.
|
||||
|
|
|
|||
|
|
@ -167,9 +167,8 @@
|
|||
|
||||
|
||||
|
||||
|
||||
<!-- =========================
|
||||
FEATURES CAROUSEL (Große Cards mit Auto-Play)
|
||||
FEATURES CAROUSEL (Mobile-optimiert)
|
||||
Quelle: .Params.features (array of {title, text, icon?})
|
||||
========================= -->
|
||||
{{ with .Params.features }}
|
||||
|
|
@ -198,19 +197,27 @@
|
|||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
/* Verhindert, dass andere Cards sichtbar sind */
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.sf-track {
|
||||
display: flex;
|
||||
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: transform 0.3s ease-out;
|
||||
will-change: transform;
|
||||
/* Touch-optimiert */
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Cards - Always one card visible */
|
||||
/* Cards - Immer nur eine Card sichtbar */
|
||||
.sf-card {
|
||||
flex: 0 0 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.sf-card-inner {
|
||||
|
|
@ -223,13 +230,9 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
|
||||
.sf-carousel.is-dragging .sf-card-inner {
|
||||
cursor: grabbing;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
/* Touch-Feedback entfernt für bessere Performance */
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/* Icon */
|
||||
|
|
@ -255,21 +258,25 @@
|
|||
.sf-card h3 {
|
||||
margin: 0 0 16px;
|
||||
line-height: 1.3;
|
||||
/* font-size entfernt - verwendet Standard */
|
||||
}
|
||||
|
||||
.sf-card p {
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
/* font-size entfernt - verwendet Standard */
|
||||
}
|
||||
|
||||
/* Navigation Dots */
|
||||
.sf-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
gap: 12px;
|
||||
margin-top: 32px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
/* Touch-Target vergrößert */
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.sf-dot {
|
||||
|
|
@ -281,6 +288,17 @@
|
|||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
padding: 0;
|
||||
/* Touch-Target vergrößert */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sf-dot::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
right: -10px;
|
||||
bottom: -10px;
|
||||
}
|
||||
|
||||
.sf-dot:hover {
|
||||
|
|
@ -294,7 +312,7 @@
|
|||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* Arrow Navigation */
|
||||
/* Arrow Navigation - nur Desktop */
|
||||
.sf-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
|
@ -306,7 +324,7 @@
|
|||
border-radius: 50%;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
display: none; /* Standardmäßig ausgeblendet */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
|
|
@ -321,6 +339,11 @@
|
|||
transform: translateY(-50%) scale(1.1);
|
||||
}
|
||||
|
||||
.sf-arrow:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.sf-arrow.prev {
|
||||
left: 20px;
|
||||
}
|
||||
|
|
@ -329,40 +352,76 @@
|
|||
right: 20px;
|
||||
}
|
||||
|
||||
/* Hide arrows on mobile */
|
||||
@media (max-width: 767px) {
|
||||
/* Arrows nur auf Desktop anzeigen */
|
||||
@media (min-width: 768px) {
|
||||
.sf-arrow {
|
||||
display: none;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch feedback */
|
||||
@media (hover: none) {
|
||||
.sf-card-inner:active {
|
||||
transform: scale(0.98);
|
||||
/* Mobile-Optimierungen */
|
||||
@media (max-width: 767px) {
|
||||
.sf-carousel {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.sf-card {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.sf-card-inner {
|
||||
padding: 30px 20px;
|
||||
min-height: 280px;
|
||||
}
|
||||
|
||||
/* Schriftgrößen beibehalten - nicht verkleinern auf Mobile */
|
||||
|
||||
.sf-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.sf-icon svg {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
/* Swipe-Indikator */
|
||||
.sf-viewport::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 40px;
|
||||
height: 4px;
|
||||
background: rgba(0,0,0,0.1);
|
||||
border-radius: 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Progress bar for autoplay */
|
||||
/* Progress bar für Autoplay */
|
||||
.sf-progress {
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 3px;
|
||||
background: #F5A623;
|
||||
border-radius: 3px;
|
||||
width: 0;
|
||||
transition: width 8s linear;
|
||||
z-index: 3;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.sf-carousel.autoplay .sf-progress {
|
||||
width: 100%;
|
||||
/* Dragging State */
|
||||
.sf-carousel.is-dragging .sf-track {
|
||||
transition: none;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* Pause on hover */
|
||||
.sf-carousel:hover .sf-progress {
|
||||
animation-play-state: paused;
|
||||
.sf-carousel.is-dragging .sf-card-inner {
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -440,100 +499,72 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
(function() {
|
||||
const carousel = document.getElementById('sfCarousel');
|
||||
if (!carousel) return;
|
||||
|
||||
const track = document.getElementById('sfTrack');
|
||||
const cards = track.querySelectorAll('.sf-card');
|
||||
const cards = Array.from(track.querySelectorAll('.sf-card'));
|
||||
const dots = carousel.querySelectorAll('.sf-dot');
|
||||
const prevBtn = carousel.querySelector('.sf-arrow.prev');
|
||||
const nextBtn = carousel.querySelector('.sf-arrow.next');
|
||||
const progress = carousel.querySelector('.sf-progress');
|
||||
|
||||
const AUTOPLAY_DELAY = 5000; // 5Sekunden
|
||||
const SWIPE_THRESHOLD = 50;
|
||||
|
||||
let currentIndex = 0;
|
||||
let autoplayInterval;
|
||||
let touchStartX = 0;
|
||||
let touchEndX = 0;
|
||||
let isDragging = false;
|
||||
let isAnimating = false; // blockiert neue Aktionen
|
||||
const AUTOPLAY_DELAY = 20000;
|
||||
let autoplayInterval = null;
|
||||
|
||||
function setupInfiniteLoop() {
|
||||
let isDragging = false;
|
||||
let startX = 0;
|
||||
let currentTranslate = 0;
|
||||
let prevTranslate = 0;
|
||||
|
||||
// --- Infinite Loop: Klone erste und letzte Karte ---
|
||||
const firstClone = cards[0].cloneNode(true);
|
||||
const lastClone = cards[cards.length - 1].cloneNode(true);
|
||||
firstClone.setAttribute('aria-hidden', 'true');
|
||||
lastClone.setAttribute('aria-hidden', 'true');
|
||||
track.appendChild(firstClone);
|
||||
track.insertBefore(lastClone, cards[0]);
|
||||
}
|
||||
const allCards = Array.from(track.children);
|
||||
const totalSlides = allCards.length;
|
||||
|
||||
function updateCarousel(animate = true) {
|
||||
const translateX = -(currentIndex + 1) * 100;
|
||||
track.style.transition = animate
|
||||
? 'transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)'
|
||||
: 'none';
|
||||
track.style.transform = `translateX(${translateX}%)`;
|
||||
|
||||
const realIndex = (currentIndex + cards.length) % cards.length;
|
||||
dots.forEach((dot, index) => {
|
||||
dot.classList.toggle('active', index === realIndex);
|
||||
dot.setAttribute('aria-selected', index === realIndex);
|
||||
});
|
||||
|
||||
// Buttons während Animation blockieren
|
||||
prevBtn.disabled = animate;
|
||||
nextBtn.disabled = animate;
|
||||
}
|
||||
|
||||
track.addEventListener('transitionend', () => {
|
||||
if (currentIndex === cards.length) currentIndex = 0;
|
||||
if (currentIndex === -1) currentIndex = cards.length - 1;
|
||||
currentIndex = 1;
|
||||
updateCarousel(false);
|
||||
isAnimating = false;
|
||||
prevBtn.disabled = false;
|
||||
nextBtn.disabled = false;
|
||||
|
||||
// --- Funktionen ---
|
||||
function updateCarousel(animate = true) {
|
||||
track.style.transition = animate ? 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)' : 'none';
|
||||
track.style.transform = `translateX(${-currentIndex * 100}%)`;
|
||||
|
||||
// Dots nur für echte Slides
|
||||
dots.forEach((dot, i) => {
|
||||
const slideIndex = (currentIndex - 1 + cards.length) % cards.length;
|
||||
dot.classList.toggle('active', i === slideIndex);
|
||||
dot.setAttribute('aria-selected', i === slideIndex);
|
||||
});
|
||||
|
||||
function goToSlide(index) {
|
||||
if (isAnimating) return;
|
||||
isAnimating = true;
|
||||
prevTranslate = -currentIndex * 100;
|
||||
}
|
||||
|
||||
function goToSlide(index, animate = true) {
|
||||
currentIndex = index;
|
||||
updateCarousel();
|
||||
resetAutoplay();
|
||||
updateCarousel(animate);
|
||||
}
|
||||
|
||||
function nextSlide() {
|
||||
if (isAnimating) return;
|
||||
isAnimating = true;
|
||||
currentIndex++;
|
||||
updateCarousel();
|
||||
}
|
||||
|
||||
function prevSlide() {
|
||||
if (isAnimating) return;
|
||||
isAnimating = true;
|
||||
currentIndex--;
|
||||
updateCarousel();
|
||||
}
|
||||
function nextSlide() { goToSlide(currentIndex + 1); }
|
||||
function prevSlide() { goToSlide(currentIndex - 1); }
|
||||
|
||||
// --- Autoplay ---
|
||||
function startAutoplay() {
|
||||
carousel.classList.add('autoplay');
|
||||
progress.style.transition = 'none';
|
||||
progress.style.width = '0%';
|
||||
requestAnimationFrame(() => {
|
||||
progress.style.transition = `width ${AUTOPLAY_DELAY}ms linear`;
|
||||
progress.style.width = '100%';
|
||||
});
|
||||
if (autoplayInterval) return;
|
||||
autoplayInterval = setInterval(nextSlide, AUTOPLAY_DELAY);
|
||||
}
|
||||
|
||||
function stopAutoplay() {
|
||||
carousel.classList.remove('autoplay');
|
||||
clearInterval(autoplayInterval);
|
||||
progress.style.transition = 'none';
|
||||
progress.style.width = '0%';
|
||||
autoplayInterval = null;
|
||||
}
|
||||
|
||||
function resetAutoplay() {
|
||||
|
|
@ -541,54 +572,85 @@
|
|||
startAutoplay();
|
||||
}
|
||||
|
||||
// Touch/Swipe
|
||||
function handleTouchStart(e) {
|
||||
if (isAnimating) return;
|
||||
touchStartX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
|
||||
// --- Buttons und Dots ---
|
||||
dots.forEach((dot, i) => dot.addEventListener('click', () => goToSlide(i + 1)));
|
||||
if (prevBtn) prevBtn.addEventListener('click', prevSlide);
|
||||
if (nextBtn) nextBtn.addEventListener('click', nextSlide);
|
||||
|
||||
// --- Pointer Events für Drag/Swipe ---
|
||||
carousel.addEventListener('pointerdown', pointerStart);
|
||||
carousel.addEventListener('pointermove', pointerMove);
|
||||
carousel.addEventListener('pointerup', pointerEnd);
|
||||
carousel.addEventListener('pointercancel', pointerEnd);
|
||||
carousel.addEventListener('pointerleave', pointerEnd);
|
||||
|
||||
function pointerStart(e) {
|
||||
// Buttons und Dots sollen Drag nicht auslösen
|
||||
if (e.target.closest('.sf-arrow') || e.target.closest('.sf-dot')) return;
|
||||
|
||||
isDragging = true;
|
||||
carousel.classList.add('is-dragging');
|
||||
startX = e.clientX;
|
||||
stopAutoplay();
|
||||
carousel.setPointerCapture(e.pointerId);
|
||||
}
|
||||
|
||||
function handleTouchEnd(e) {
|
||||
function pointerMove(e) {
|
||||
if (!isDragging) return;
|
||||
const diffX = e.clientX - startX;
|
||||
currentTranslate = prevTranslate + (diffX / carousel.offsetWidth) * 100;
|
||||
|
||||
// Sanfte Drag-Begrenzung für Looping
|
||||
const maxTranslate = 0 + 20; // leichtes Stretch nach rechts
|
||||
const minTranslate = -(totalSlides - 1) * 100 - 20; // leichtes Stretch nach links
|
||||
currentTranslate = Math.max(minTranslate, Math.min(maxTranslate, currentTranslate));
|
||||
|
||||
track.style.transition = 'none';
|
||||
track.style.transform = `translateX(${currentTranslate}%)`;
|
||||
}
|
||||
|
||||
function pointerEnd(e) {
|
||||
if (!isDragging) return;
|
||||
isDragging = false;
|
||||
carousel.classList.remove('is-dragging');
|
||||
touchEndX = e.type.includes('mouse')
|
||||
? e.clientX
|
||||
: e.changedTouches[0]?.clientX || touchStartX;
|
||||
handleSwipe();
|
||||
|
||||
const diffX = startX - e.clientX;
|
||||
if (Math.abs(diffX) > SWIPE_THRESHOLD) {
|
||||
diffX > 0 ? nextSlide() : prevSlide();
|
||||
} else {
|
||||
updateCarousel();
|
||||
}
|
||||
|
||||
resetAutoplay();
|
||||
}
|
||||
|
||||
function handleSwipe() {
|
||||
const diff = touchStartX - touchEndX;
|
||||
if (Math.abs(diff) > 50) diff > 0 ? nextSlide() : prevSlide();
|
||||
// --- Infinite Loop Adjustments ---
|
||||
track.addEventListener('transitionend', () => {
|
||||
if (currentIndex === 0) {
|
||||
currentIndex = cards.length;
|
||||
updateCarousel(false);
|
||||
} else if (currentIndex === totalSlides - 1) {
|
||||
currentIndex = 1;
|
||||
updateCarousel(false);
|
||||
}
|
||||
|
||||
// Events
|
||||
prevBtn.addEventListener('click', () => prevSlide());
|
||||
nextBtn.addEventListener('click', () => nextSlide());
|
||||
dots.forEach((dot, i) => dot.addEventListener('click', () => goToSlide(i)));
|
||||
|
||||
track.addEventListener('touchstart', handleTouchStart, { passive: true });
|
||||
track.addEventListener('touchend', handleTouchEnd, { passive: true });
|
||||
track.addEventListener('mousedown', handleTouchStart);
|
||||
track.addEventListener('mouseup', handleTouchEnd);
|
||||
|
||||
carousel.addEventListener('mouseenter', stopAutoplay);
|
||||
carousel.addEventListener('mouseleave', startAutoplay);
|
||||
carousel.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'ArrowLeft') prevSlide();
|
||||
if (e.key === 'ArrowRight') nextSlide();
|
||||
});
|
||||
|
||||
setupInfiniteLoop();
|
||||
// --- Keyboard ---
|
||||
carousel.addEventListener('keydown', e => {
|
||||
if (e.key === 'ArrowLeft') prevSlide();
|
||||
else if (e.key === 'ArrowRight') nextSlide();
|
||||
});
|
||||
|
||||
// --- Visibility change ---
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
document.hidden ? stopAutoplay() : startAutoplay();
|
||||
});
|
||||
|
||||
// --- Init ---
|
||||
updateCarousel(false);
|
||||
startAutoplay();
|
||||
})();
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -2896,9 +2896,6 @@ section {
|
|||
color: #000 !important;
|
||||
transition: color 0.3s ease; }
|
||||
|
||||
.mehrwert-icon {
|
||||
filter: invert(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%); }
|
||||
|
||||
/* ========== Gründerteam & Intro-Text ========== */
|
||||
.container-fluid {
|
||||
max-width: 100%;
|
||||
|
|
@ -3072,55 +3069,52 @@ body {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: clamp(1.25rem, 3vw, 3.5rem);
|
||||
gap: clamp(1rem, 3vw, 3rem);
|
||||
/* etwas enger */
|
||||
flex-wrap: wrap;
|
||||
/* bricht sauber um */
|
||||
margin-top: clamp(4rem, 4vw, 6rem); }
|
||||
margin-top: clamp(3rem, 3vw, 5rem);
|
||||
/* kompakter */ }
|
||||
|
||||
.aff-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: clamp(0.75rem, 2vw, 1.25rem); }
|
||||
justify-content: center;
|
||||
gap: clamp(0.5rem, 1.5vw, 1rem); }
|
||||
|
||||
/* Linker Block (Ingenieurbüros etc.) */
|
||||
.aff-caption {
|
||||
margin: 0 0 .5rem 0;
|
||||
font-size: clamp(0.9rem, 1.2vw, 1rem);
|
||||
font-size: clamp(0.85rem, 1vw, 0.95rem);
|
||||
color: #6b7280;
|
||||
text-align: left; }
|
||||
|
||||
.aff-logos {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: clamp(0.5rem, 1.2vw, 1rem);
|
||||
gap: clamp(0.5rem, 1vw, 0.75rem);
|
||||
flex-wrap: wrap; }
|
||||
|
||||
.aff-logos img {
|
||||
max-height: clamp(100px, 3.2vw, 180px);
|
||||
/* Beide Logos gleich groß machen */
|
||||
.aff-logos img,
|
||||
.aff-right .aff-pva-logo {
|
||||
height: 120px;
|
||||
/* Desktop-Höhe */
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: block; }
|
||||
display: block;
|
||||
object-fit: contain; }
|
||||
|
||||
/* Rechter Block: Nur Logo (klickbar) */
|
||||
/* Rechter Block: Nur Logo */
|
||||
.aff-right {
|
||||
display: flex;
|
||||
/* zentriert das Logo im Link */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
color: inherit; }
|
||||
|
||||
.aff-right .aff-pva-logo {
|
||||
max-height: clamp(60px, 6vw, 120px);
|
||||
/* Logo-Größe hier steuern */
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: block; }
|
||||
|
||||
/* Dezente Trennlinie zwischen links/rechts (nur Desktop) */
|
||||
@media (min-width: 900px) {
|
||||
.aff-right {
|
||||
padding-left: clamp(1rem, 2.5vw, 3rem);
|
||||
padding-left: clamp(0.75rem, 2vw, 2rem);
|
||||
border-left: 1px solid #e5e7eb; } }
|
||||
|
||||
/* Mobil: keine Trennlinie / kein Einzug */
|
||||
|
|
@ -3129,6 +3123,14 @@ body {
|
|||
border-left: 0;
|
||||
padding-left: 0; } }
|
||||
|
||||
/* Mobile-Optimierung für sehr kleine Screens */
|
||||
@media (max-width: 480px) {
|
||||
.aff-logos img,
|
||||
.aff-right .aff-pva-logo {
|
||||
height: 60px;
|
||||
/* kleinere Höhe auf Handy */
|
||||
width: auto; } }
|
||||
|
||||
/* Fokus-Style für Tastaturbedienung */
|
||||
.aff-right:focus-visible {
|
||||
outline: 2px dashed var(--amp-accent);
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-brain-icon lucide-brain"><path d="M12 18V5"/><path d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"/><path d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"/><path d="M17.997 5.125a4 4 0 0 1 2.526 5.77"/><path d="M18 18a4 4 0 0 0 2-7.464"/><path d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"/><path d="M6 18a4 4 0 0 1-2-7.464"/><path d="M6.003 5.125a4 4 0 0 0-2.526 5.77"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f5a623" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-brain-icon lucide-brain"><path d="M12 18V5"/><path d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"/><path d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"/><path d="M17.997 5.125a4 4 0 0 1 2.526 5.77"/><path d="M18 18a4 4 0 0 0 2-7.464"/><path d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"/><path d="M6 18a4 4 0 0 1-2-7.464"/><path d="M6.003 5.125a4 4 0 0 0-2.526 5.77"/></svg>
|
||||
|
Before Width: | Height: | Size: 594 B After Width: | Height: | Size: 589 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-briefcase-business-icon lucide-briefcase-business"><path d="M12 12h.01"/><path d="M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/><path d="M22 13a18.15 18.15 0 0 1-20 0"/><rect width="20" height="14" x="2" y="6" rx="2"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f5a623" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-briefcase-business-icon lucide-briefcase-business"><path d="M12 12h.01"/><path d="M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/><path d="M22 13a18.15 18.15 0 0 1-20 0"/><rect width="20" height="14" x="2" y="6" rx="2"/></svg>
|
||||
|
Before Width: | Height: | Size: 423 B After Width: | Height: | Size: 418 B |
Binary file not shown.
|
Before Width: | Height: | Size: 330 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-earth-icon lucide-earth"><path d="M21.54 15H17a2 2 0 0 0-2 2v4.54"/><path d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17"/><path d="M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05"/><circle cx="12" cy="12" r="10"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f5a623" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-earth-icon lucide-earth"><path d="M21.54 15H17a2 2 0 0 0-2 2v4.54"/><path d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17"/><path d="M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05"/><circle cx="12" cy="12" r="10"/></svg>
|
||||
|
Before Width: | Height: | Size: 478 B After Width: | Height: | Size: 473 B |
Binary file not shown.
|
Before Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 478 B |
Binary file not shown.
|
Before Width: | Height: | Size: 284 B |
Binary file not shown.
|
Before Width: | Height: | Size: 350 B |
Binary file not shown.
|
Before Width: | Height: | Size: 374 B |
Binary file not shown.
|
Before Width: | Height: | Size: 284 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-stamp-icon lucide-stamp"><path d="M14 13V8.5C14 7 15 7 15 5a3 3 0 0 0-6 0c0 2 1 2 1 3.5V13"/><path d="M20 15.5a2.5 2.5 0 0 0-2.5-2.5h-11A2.5 2.5 0 0 0 4 15.5V17a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1z"/><path d="M5 22h14"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f5a623" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-stamp-icon lucide-stamp"><path d="M14 13V8.5C14 7 15 7 15 5a3 3 0 0 0-6 0c0 2 1 2 1 3.5V13"/><path d="M20 15.5a2.5 2.5 0 0 0-2.5-2.5h-11A2.5 2.5 0 0 0 4 15.5V17a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1z"/><path d="M5 22h14"/></svg>
|
||||
|
Before Width: | Height: | Size: 423 B After Width: | Height: | Size: 418 B |
Binary file not shown.
|
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 1.4 MiB |
Loading…
Add table
Add a link
Reference in a new issue