/* ================================================================
   FACHTAP — VOLLSTÄNDIGE CSS (CLEAN, KEINE DOPPLUNGEN)
   ================================================================ */

/* ── BASE ── */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  font-family: "helvetica neue", helvetica, sans-serif;
  color: #fff;
  position: static;
  width: auto;
}
a { color: #fff; text-decoration: none; }
ul, li { list-style: none; padding: 0; margin: 0; }
img { max-width: 100%; height: auto; }
figure { margin: 0; padding: 0; }
.page-padding { padding: 2rem; }
.hide { display: none; }
.grid { display: grid; }

/* ── CSS VARIABLES ── */
:root {
  /* Marquee */
  --marquee-width: 50vw;
  --marquee-height: 7vh;
  --marquee-elements: 12;
  --marquee-elements-displayed: 6;
  --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
  --marquee-animation-duration: calc(var(--marquee-elements) * 3s);

  /* Design Tokens */
  --text: #EAF0FF;
  --muted: #B8C0D9;
  --border: rgba(255,255,255,.12);
  --primary: goldenrod;
  --primary-2: gold;
  --gold-12: rgba(218,165,32,.12);
  --gold-22: rgba(218,165,32,.22);
  --gold-30: rgba(218,165,32,.30);
  --radius: 14px;
  --shadow-btn: 0 10px 22px rgba(172,162,31,0.35);
  --shadow-lg: 0 30px 80px rgba(0,0,0,.55);
  --star-size: 12px;
  --star-gap: 4px;
  --visual-max: 560px;
  --phone-max: 280px;
  --phone-rotate: -6deg;

  /* Carousel transforms */
  --item1-transform: translateX(-100%) translateY(-5%) scale(1.5);
  --item1-filter: none;
  --item1-zIndex: 11;
  --item1-opacity: 0;
  --item2-transform: translateX(0);
  --item2-filter: none;
  --item2-zIndex: 10;
  --item2-opacity: 1;
  --item3-transform: translate(50%,10%) scale(0.8);
  --item3-filter: none;
  --item3-zIndex: 9;
  --item3-opacity: 0.75;
  --item4-transform: translate(90%,20%) scale(0.5);
  --item4-filter: none;
  --item4-zIndex: 8;
  --item4-opacity: 0.45;
  --item5-transform: translate(120%,30%) scale(0.3);
  --item5-filter: none;
  --item5-zIndex: 7;
  --item5-opacity: 0;

  /* ft-benefits */
  --ft-bg: rgba(20,20,22,.60);
  --ft-border: rgba(255,255,255,.12);
  --ft-text: #ffffff;
  --ft-muted: rgba(255,255,255,.80);
  --ft-accent: #f5c400;
  --ft-shadow: 0 16px 60px rgba(0,0,0,.55);
}

/* ── MARQUEE: Mobile Variable Fix ── */
@media (max-width: 767px) {
  :root {
    --marquee-height: 7vh;
    --marquee-elements-displayed: 4;
  }
}
@media (max-width: 420px) {
  :root {
    --marquee-height: 6vh;
    --marquee-elements-displayed: 3;
  }
}

/* ── SLIDER CORE ── */
.js-slider {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
}
/* Alle Slides vor JS-Init verstecken → verhindert FOUC */
.js-slide {
  opacity: 0;
  visibility: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform, opacity;
  contain: layout style paint;
}
.js-slider canvas {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
}
.js-slider__inner { transform: translateZ(0); will-change: transform; }

.slider { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.slider__text {
  position: absolute; bottom: calc(6rem + 5vw); left: calc(2rem + 3vw);
  z-index: 10; font-size: calc(1rem + 4vw); text-transform: uppercase;
  transform-origin: top; line-height: 1.075; color: #fff; font-weight: 500;
  pointer-events: none; opacity: 0.18;
}
.slider__text-line { overflow: hidden; }
.slider__inner { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.slider__nav {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 10;
}
.slider-bullet { display: flex; align-items: center; padding: 1rem 0; }
.slider-bullet__text { color: #fff; font-size: 0.65rem; margin-right: 1rem; }
.slider-bullet__line { background-color: #fff; height: 1px; width: 1rem; }
.slider canvas { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }

.slide {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden;
}
/* News-Slide: overflow visible damit Marquee (position:fixed) durchscheint */
.js-slide:nth-child(2) { overflow: visible; }
.js-slide:nth-child(2) .slide__content { overflow: visible; }
.slide__content {
  display: flex; align-items: center; justify-content: center;
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
}
.slide__img {
  position: relative; padding: 0; margin: 0; min-width: 12.5rem; transform-origin: top;
}
.slide__img:first-child { top: -1.5rem; }
.slide__img:last-child { bottom: -1.5rem; }

.karussel {
  position: relative; width: 100%; height: 100%; padding: 0; margin: 0;
}
.vorteile { width: 100%; height: 100%; }

.scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.5); font-family: "font-2"; font-size: calc(0.5rem + 0.35vw); z-index: 10;
}
@media (max-width: 680px) {
  .scroll { bottom: 5.5rem; }
}

/* ── NAVIGATION ── */
.nav {
  position: absolute; top: 0; z-index: 10;
  display: flex; align-items: center; height: 48px;
}
.nav--left { left: 1rem; }
.nav--right { right: 1rem; }
.nav ul {
  display: flex; align-items: center; height: 100%;
  gap: clamp(10px, 1.8vw, 18px); flex-wrap: wrap;
}
.nav li { margin: 0; padding: 0; display: flex; align-items: center; height: 100%; }
.nav a {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0; padding: 6px; height: 100%;
  font-family: "helvetica neue", helvetica, sans-serif;
  white-space: nowrap; color: rgba(255,255,255,0.55);
  text-decoration: none; transition: color 0.3s ease;
}
.nav a.is-active, .nav a:hover { color: #fff; }
.nav a span { position: relative; }
.nav a span:before {
  content: ""; position: absolute; left: 0; bottom: -0.35rem;
  width: 100%; height: 1px; background-color: rgba(255,255,255,0.25);
  transition: transform 0.75s ease; transform-origin: right; transform: scaleX(0);
}
.nav a:hover span:before, .nav a.is-active span:before {
  transform: scaleX(1); transform-origin: left;
}
.nav a i, .nav a .fa, .nav a .fas, .nav a .far, .nav a .fab,
.nav a [class^="fa"], .nav a [class*=" fa"] {
  font-size: 16px; display: block; line-height: 1; color: inherit;
}

/* ── LOGO ── */
.logo {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  padding: 0; margin: 0; z-index: 10;
  height: 48px; display: flex; align-items: center;
}
.logo img { display: block; height: 2rem; width: auto; }

/* ── VERT TEXT ── */
.vert-text {
  position: absolute; bottom: 2rem; right: 2rem; width: 15rem;
  display: flex; align-items: center; z-index: 10;
}
.vert-text span {
  display: block; color: #fff; text-transform: uppercase; line-height: 1.1;
  transform: rotate(-90deg) translateY(15rem); transform-origin: bottom left;
  font-size: 2.35rem; transition: font-size 0.3s ease, transform 0.3s ease;
}

/* ── HERO ── */
.hero {
  display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: center;
  min-height: 86vh; padding: 24px max(5vw,28px) 72px; position: relative; isolation: isolate;
  padding-top: 0; margin-top: 0;
}
.hero h1 {
  font-size: clamp(36px,5.6vw,68px); color: #fff;
  line-height: 1.04; letter-spacing: -.3px; margin: 0 0 16px;
}
.hero p {
  margin: 0 0 24px; color: rgba(255,255,255,.88);
  font-size: clamp(16px,2.0vw,18px); max-width: 56ch; line-height: 1.65;
}
.hero-mini {
  font-size: 9.5px; line-height: 1.5; opacity: .60; margin-top: 12px; letter-spacing: .3px;
  white-space: nowrap;
}
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-radius: 14px; border: 1px solid transparent; font-weight: 800; color: #fff;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, outline .18s ease;
  outline: 2px solid transparent; outline-offset: 2px;
}
.btn--primary { background: linear-gradient(180deg,var(--primary),var(--primary-2)); box-shadow: var(--shadow-btn); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(217,231,13,0.45); }
.btn--ghost { color: var(--text); background: transparent; border-color: var(--border); }
.btn--ghost:hover { background: rgba(255,255,255,.06); }
.btn:focus-visible { outline-color: var(--gold); }
.rating { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 14px; }
.stars { display: inline-flex; gap: var(--star-gap); }
.star { width: var(--star-size); height: var(--star-size); }
.star svg { width: 100%; height: 100%; display: block; fill: #fff; }
.text { font-size: 20px; }

/* Visual */
.visual { position: relative; display: grid; place-items: end center; min-height: 520px; }
.figure-wrap {
  position: relative; width: min(var(--visual-max),42vw); aspect-ratio: 3/4;
}
.figure-wrap::before {
  content: ""; position: absolute; inset: -6%;
  background: radial-gradient(58% 48% at 60% 30%, var(--gold-22), transparent 62%);
  /* blur durch größeres gradient ersetzt – kein layout-paint mehr */
  border-radius: 50%;
  z-index: -1; mix-blend-mode: screen;
}
.figure-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center bottom;
}
.phone-img {
  position: absolute; right: -3%; top: 6%;
  width: min(var(--phone-max),42%); height: auto; transform: rotate(var(--phone-rotate));
  filter: drop-shadow(0 16px 40px rgba(0,0,0,.45)); will-change: transform;
  animation: float 6s ease-in-out infinite;
}
.phone-img:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; border-radius: 16px; }

/* Search bar */
.container {
  background: white; width: 319px; margin-left: 0; margin-right: auto;
  border: 1px solid #ddd; border-radius: 100px; padding: 10px;
  color: #505060; box-shadow: 0 3px 7px rgba(0,0,0,0.15);
}
.cursor { position: relative; }
.cursor::after {
  content: ""; display: inline-block; height: 100%; position: absolute;
  border-left: 2px solid #505060; width: 2px;
}
#search {
  display: inline-flex; align-items: center; justify-content: center;
  height: 1em; position: absolute; left: 24rem;
}
#search svg { color: gold; }
#search.active::before {
  content: ""; display: block; height: 150px; width: 150px; background: gold;
  position: absolute; animation: appear 0.7s both 0.2s;
}
#search.active svg { color: gold; animation: click 0.6s 0.2s; }
#search.active { color: gold; background-color: transparent; }

@keyframes appear { 0% { transform: scale(0); } 100% { opacity: 0; } }
@keyframes click { 25% { transform: scale(0.9); fill: gold; stroke: gold; } }
@keyframes float { 0%,100% { transform: translateY(0) rotate(var(--phone-rotate)); } 50% { transform: translateY(-8px) rotate(var(--phone-rotate)); } }
@keyframes aurora { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(1.6%,-1.6%,0); } }
@keyframes sweep { 0% { transform: translateX(0); } 100% { transform: translateX(-1.4%); } }
@media (prefers-reduced-motion:reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Hero slide setup */
.js-slide:first-child .slide__content {
  align-items: flex-start; justify-content: flex-start; padding: 0;
}
.js-slide:first-child figure.slide__img, .js-slide:first-child .slide__img {
  margin: 0; padding: 0; width: 100%; height: 100%;
}

@media (min-width: 681px) {
  .hero { padding-top: 68px; padding-bottom: 50px; min-height: 100vh; align-items: center; margin-top: 0; }
  .visual { min-height: 480px; }
}

/* ── MARQUEE ── */
.marquee {
  display: none !important;
  visibility: hidden !important;
}
/* Marquee nur sichtbar wenn Klasse gesetzt (per JS auf News-Slide) */
.marquee.marquee--visible {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.marquee-content li {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  flex-shrink: 0; width: var(--marquee-element-width);
  font-size: calc(var(--marquee-height) * 0.25); white-space: nowrap;
  color: rgba(255,255,255,0.6); padding: 0 0.5rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.marquee-content li i {
  font-size: calc(var(--marquee-height) * 0.5); margin-bottom: 0.3rem;
  color: rgba(212,175,55,0.6); text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.marquee:before, .marquee:after {
  position: absolute; top: 0; width: 5rem; height: 100%; content: ""; z-index: 1;
}
.marquee:before { left: 0; background: linear-gradient(to right, #111 0%, transparent 100%); }
.marquee:after { right: 0; background: linear-gradient(to left, #111 0%, transparent 100%); }
.marquee-content {
  list-style: none; height: 100%; display: flex;
  animation: scrolling var(--marquee-animation-duration) linear infinite;
  margin: 0; padding: 0;
}
@keyframes scrolling {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); }
}

/* ── NEWS CAROUSEL (Slide 2) ── */
.carousel1 { position: relative; width: 100%; height: 60vh; overflow: hidden; }
.progress-bar { position: absolute; top: 0; left: 0; height: 5px; width: 100%; z-index: 5; }
.progress-bar__fill { width: 0; height: inherit; background: rgba(212,175,55,0.8); transition: all 0.16s; }
.progress-bar--primary { z-index: 6; }
.main-post-wrapper { position: relative; width: 100%; height: 100%; }
.slides { width: 100%; height: 100%; position: relative; overflow: hidden; }
.main-post { position: absolute; top: 100%; left: 0; width: 100%; height: 100%; transition: top 0.9s 0.4s ease-out; }
.main-post--active { top: 0; z-index: 1; }
.main-post--not-active { top: 100%; z-index: 0; }
.main-post__image { position: absolute; inset: 0; width: 100%; height: 100%; }
.main-post__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.main-post__image::before { content: ""; position: absolute; inset: 0; background: rgba(14,13,14,0.35); }
.main-post__content {
  position: absolute; bottom: 22%; left: 5%; color: #fff; width: 90%; font-size: 1em;
  text-align: left;
}
.main-post__tag-wrapper { margin: 0; display: inline-flex; overflow: hidden; justify-content: flex-start; }
.main-post__tag { font-size: 0.85em; padding: 4px 12px; background: rgba(0,0,0,0.4); border-radius: 3px; margin-right: 6px; }
.main-post__title {
  font-weight: 700; font-size: 2em; line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6); margin: 0.3em 0; text-align: left;
}
.main-post__link { font-size: 0.9em; letter-spacing: 1px; display: inline-flex; align-items: center; margin-top: 6px; justify-content: flex-start; }
.main-post__link-text { font-size: 0.9em; }
.main-post__link-icon--arrow { margin-left: 8px; }
.main-post__link-icon--play-btn { margin-right: 8px; }

/* News animations */
.main-post.main-post--active .main-post__tag-wrapper { width: 25%; transition: all 0.98s 1.9s; }
.main-post.main-post--not-active .main-post__tag-wrapper { width: 0; transition: width 0.3s 0.2s; }
.main-post.main-post--active .main-post__title { opacity: 1; transform: translateY(0); transition: opacity 0.8s 1.42s, transform 0.5s 1.4s; }
.main-post.main-post--not-active .main-post__title { transform: translateY(40px); opacity: 0; transition: transform 0.2s 0.35s, opacity 0.5s 0.2s; }
.main-post.main-post--active .main-post__link { opacity: 1; transition: opacity 0.9s 2.2s; }
.main-post.main-post--not-active .main-post__link { opacity: 0; transition: opacity 0.5s 0.2s; }

/* Posts */
.posts-wrapper {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  width: 100%; max-width: 95%; padding: 18px 16px; margin: 0 auto;
}
.post {
  background: rgba(14,13,14,0.55); opacity: 0.3; color: #fff;
  position: relative; padding: 16px 20px; transition: opacity 0.2s linear;
}
.post__header { display: flex; justify-content: space-between; align-items: center; font-size: 0.8em; }
.post__tag { color: #80837e; }
.post__title { font-weight: 400; font-size: 0.95em; line-height: 1.5; }
.post--active { opacity: 1; background: rgba(14,13,14,0.75); }
.post:hover { cursor: pointer; opacity: 1; }

/* Slide 2 layout */
.js-slide:nth-child(2) .slide__content {
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  padding: 0; overflow: visible; position: absolute; inset: 0;
}
.js-slide:nth-child(2) figure.slide__img {
  width: 100%; height: 100%; margin: 0; padding: 0;
  display: flex; flex-direction: column; position: relative;
}
.main-post-wrapper {
  position: relative; width: 100%; height: 60vh; min-height: 260px;
  flex-shrink: 0; overflow: hidden;
}
.carousel1 {
  height: 100%; transform: none; overflow: hidden; position: relative; display: block;
}
/* posts-wrapper layout handled by mobile media queries below */
/* ── PRODUKT-CAROUSEL ── */
.carousel {
  position: relative; height: 800px; overflow: hidden; margin-top: 100px; left: -37px;
}
.carousel .list {
  position: absolute; width: 1140px; max-width: 90%; height: 80%;
  left: 50%; transform: translateX(-50%);
}
.carousel .list .item {
  position: absolute; left: 0%; width: 70%; height: 100%;
  will-change: transform, opacity;
  font-size: 15px; transition: left 0.5s ease, opacity 0.5s ease, width 0.5s ease;
}
.carousel .list .item:nth-child(n + 6) { opacity: 0; }
.carousel .list .item:nth-child(2) { z-index: 10; transform: translateX(0); }
.carousel .list .item img {
  width: 50%; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  transition: right 0.55s ease;
  will-change: right;
}
.carousel .list .item .introduce { opacity: 0; pointer-events: none; }
.carousel .list .item:nth-child(2) .introduce {
  opacity: 1; pointer-events: auto; width: 400px;
  position: absolute; top: 50%; transform: translateY(-50%);
  /* wait for item width + image to finish animating back (0.55s) */
  transition: opacity 0.35s ease 0.6s;
}
.carousel .list .item .introduce .title { font-size: clamp(1rem,2.2vw,2em); font-weight: 500; line-height: 1.15; color: white; }
.carousel .list .item .introduce .topic { font-size: clamp(1.6rem,4.5vw,4em); font-weight: 500; line-height: 1.05; color: white; }
.carousel .list .item .introduce .des { font-size: clamp(11px,1.1vw,14px); line-height: 1.5; color: white; }
.carousel .list .item .introduce .seeMore {
  font-family: Poppins; color: white; font-size: clamp(9px,0.9vw,12px);
  margin-top: 1.2em; padding: 5px 0; border: 0; background-color: transparent;
  font-weight: 700; letter-spacing: 3px; cursor: pointer;
  position: relative; display: inline-block;
}
.carousel .list .item .introduce .seeMore::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: white; transform: scaleX(0); transform-origin: left;
  animation: underlineIn 0.6s ease forwards 1.6s;
}
.carousel .list .item .introduce .seeMore:hover { opacity: 0.9; }
.carousel .list .item .introduce .seeMore i,
.carousel .list .item .introduce .seeMore svg { transform: translateX(120px); }

@keyframes underlineIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Carousel transforms */
.carousel .list .item:nth-child(1) { transform: var(--item1-transform); filter: var(--item1-filter); z-index: var(--item1-zIndex); opacity: var(--item1-opacity); pointer-events: none; }
.carousel .list .item:nth-child(3) { transform: var(--item3-transform); filter: var(--item3-filter); z-index: var(--item3-zIndex); }
.carousel .list .item:nth-child(4) { transform: var(--item4-transform); filter: var(--item4-filter); z-index: var(--item4-zIndex); }
.carousel .list .item:nth-child(5) { transform: var(--item5-transform); filter: var(--item5-filter); opacity: var(--item5-opacity); pointer-events: none; }

/* Text animations */
.carousel .list .item:nth-child(2) .introduce .title,
.carousel .list .item:nth-child(2) .introduce .topic,
.carousel .list .item:nth-child(2) .introduce .des,
.carousel .list .item:nth-child(2) .introduce .seeMore { opacity: 0; animation: showContent 0.4s 0.35s ease-out 1 forwards; }
.carousel .list .item:nth-child(2) .introduce .topic { animation-delay: 0.5s; }
.carousel .list .item:nth-child(2) .introduce .des { animation-delay: 0.65s; }
.carousel .list .item:nth-child(2) .introduce .seeMore { animation-delay: 0.8s; }

@keyframes showContent { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Carousel nav animations */
.carousel.next .item:nth-child(1) { animation: transformFromPosition2 0.5s ease-in-out 1 forwards; }
.carousel.next .item:nth-child(2) { animation: transformFromPosition3 0.7s ease-in-out 1 forwards; }
.carousel.next .item:nth-child(3) { animation: transformFromPosition4 0.9s ease-in-out 1 forwards; }
.carousel.next .item:nth-child(4) { animation: transformFromPosition5 1.1s ease-in-out 1 forwards; }
.carousel.prev .list .item:nth-child(5) { animation: transformFromPosition4 0.5s ease-in-out 1 forwards; }
.carousel.prev .list .item:nth-child(4) { animation: transformFromPosition3 0.7s ease-in-out 1 forwards; }
.carousel.prev .list .item:nth-child(3) { animation: transformFromPosition2 0.9s ease-in-out 1 forwards; }
.carousel.prev .list .item:nth-child(2) { animation: transformFromPosition1 1.1s ease-in-out 1 forwards; }

@keyframes transformFromPosition2 { from { transform: var(--item2-transform); filter: var(--item2-filter); opacity: var(--item2-opacity); } }
@keyframes transformFromPosition3 { from { transform: var(--item3-transform); filter: var(--item3-filter); opacity: var(--item3-opacity); } }
@keyframes transformFromPosition4 { from { transform: var(--item4-transform); filter: var(--item4-filter); opacity: var(--item4-opacity); } }
@keyframes transformFromPosition5 { from { transform: var(--item5-transform); filter: var(--item5-filter); opacity: var(--item5-opacity); } }
@keyframes transformFromPosition1 { from { transform: var(--item1-transform); filter: var(--item1-filter); opacity: var(--item1-opacity); } }

/* Detail view */
.carousel .list .item .detail { opacity: 0; pointer-events: none; color: white; }
.carousel.showDetail .list .item:nth-child(3), .carousel.showDetail .list .item:nth-child(4) { left: 100%; opacity: 0; pointer-events: none; }
.carousel.showDetail .list .item:nth-child(2) { width: 100%; }
.carousel.showDetail .list .item:nth-child(2) .introduce {
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease;
}
.carousel.showDetail .list .item:nth-child(2) img { right: 50%; }
.carousel.showDetail .list .item:nth-child(2) .detail {
  opacity: 1; width: 50%; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%); text-align: right; pointer-events: auto;
  overflow: hidden; box-sizing: border-box; padding: 0 18px 0 0; max-width: 48%;
  transition: none;
}
.carousel.showDetail .list .item:nth-child(2) .detail .title { font-size: clamp(1.2rem,2.8vw,2.6rem); line-height: 1.1; margin-bottom: 10px; word-break: break-word; }
.carousel.showDetail .list .item:nth-child(2) .detail .des { font-size: clamp(10px,0.9vw,12px); line-height: 1.5; word-break: break-word; }
.carousel.showDetail .list .item:nth-child(2) .detail .specifications { display: flex; gap: 8px; width: 100%; color: white; border-top: 1px solid white; margin-top: 20px; flex-wrap: wrap; }
.carousel.showDetail .list .item:nth-child(2) .detail .specifications div { width: 90px; text-align: center; flex-shrink: 0; min-width: 60px; max-width: 110px; }
.carousel.showDetail .list .item:nth-child(2) .detail .specifications div p:nth-child(1) { font-weight: bold; }
.carousel.carousel.showDetail .list .item:nth-child(2) .checkout button { font-family: Poppins; color: white; background-color: transparent; border: 1px solid white; margin-left: 5px; padding: 5px 10px; letter-spacing: 2px; font-weight: 500; font-size: 10px; }
.carousel.showDetail .list .item:nth-child(2) .detail .title,
.carousel.showDetail .list .item:nth-child(2) .detail .des,
.carousel.showDetail .list .item:nth-child(2) .detail .specifications,
.carousel.showDetail .list .item:nth-child(2) .detail .checkout { opacity: 0; animation: showContent 0.4s 0.5s ease-out 1 forwards; }
.carousel.showDetail .list .item:nth-child(2) .detail .des { animation-delay: 0.62s; }
.carousel.showDetail .list .item:nth-child(2) .detail .specifications { animation-delay: 0.74s; }
.carousel.showDetail .list .item:nth-child(2) .detail .checkout { animation-delay: 0.86s; }
.carousel.showDetail #back { opacity: 1; }
.carousel.showDetail #prev, .carousel.showDetail #next { opacity: 0; pointer-events: none; }

/* Arrows */
.arrows { position: absolute; bottom: 10px; width: 1140px; max-width: 90%; display: flex; justify-content: space-between; left: 50%; transform: translateX(-50%); }
#prev, #next { width: 40px; color: white; height: 40px; border-radius: 50%; font-family: monospace; border: 1px solid white; background-color: transparent; font-size: large; }
#back { position: absolute; z-index: 100; color: white; bottom: 0%; left: 50%; transform: translateX(-50%); border: none; border-bottom: 1px solid white; background-color: transparent; font-family: Poppins; font-weight: bold; letter-spacing: 3px; padding: 10px; transition: opacity 0.5s; }
.carousel::before { content: none; }

/* ── FT-BENEFITS (Vorteile) ── */
.ft-benefits { padding: 18px; max-width: 900px; width: 100%; margin: 0 auto; }
.ft-card { background: var(--ft-bg); border: 1px solid var(--ft-border); border-radius: 20px; box-shadow: var(--ft-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; }
.ft-tabs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border-bottom: 1px solid var(--ft-border); padding: 10px 10px 0; }
.ft-tab { appearance: none; border: 0; background: transparent; color: rgba(255,255,255,.70); font-weight: 600; font-size: 1rem; padding: 14px 10px 12px; cursor: pointer; position: relative; letter-spacing: .2px; }
.ft-tab.is-active { color: var(--ft-accent); }
.ft-tab.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 999px; background: var(--ft-accent); }
.ft-tab:focus-visible { outline: 2px solid rgba(245,196,0,.55); outline-offset: 2px; border-radius: 12px; }
.ft-content { padding: 24px 24px 20px; }
.ft-title { margin: 10px 0 22px; text-align: center; color: var(--ft-accent); font-size: clamp(26px,4vw,42px); line-height: 1.05; letter-spacing: .2px; }
.ft-panel { display: none; animation: ftFade .22s ease; }
.ft-panel.is-active { display: block; }
@keyframes ftFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.ft-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ft-item { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; border: 1px solid var(--ft-border); background: rgba(0,0,0,.22); transition: border-color .2s ease, background .2s ease; }
.ft-item:hover { border-color: rgba(245,196,0,.30); background: rgba(0,0,0,.32); }
.ft-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(245,196,0,.12); border: 1px solid rgba(245,196,0,.28); color: var(--ft-accent); font-weight: 800; font-size: 18px; flex-shrink: 0; }
.ft-head { color: #fff; font-weight: 700; font-size: 16px; line-height: 1.15; }
.ft-sub { margin-top: 4px; color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.3; }

/* ── DSGVO CHECKBOX ── */
.dsgvo-row {
  margin: 18px 0 10px;
}
.dsgvo-label {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer; color: rgba(255,255,255,0.55); font-size: 12px; line-height: 1.5;
}
.dsgvo-check {
  flex-shrink: 0; margin-top: 2px;
  width: 16px; height: 16px;
  accent-color: goldenrod; cursor: pointer;
}
.dsgvo-label a {
  color: goldenrod; text-decoration: underline;
}
.dsgvo-label a:hover { color: #e6b800; }

/* ── CONTACT SUB ── */
.contact-sub {
  text-align: center; color: rgba(255,255,255,0.58);
  font-size: 13px; margin: 6px 0 18px;
}
@media (max-width: 680px) {
  .contact-sub { font-size: 12px; margin: 8px 0 20px; }
}

/* ── CONTACT ── */
.contact { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; width: 100%; background: transparent; overflow-x: hidden; }
.container3 { position: relative; width: 100%; max-width: 1000px; padding: 50px; background: rgba(8,6,2,0.80); box-shadow: 0 25px 45px rgba(0,0,0,0.45), 0 0 0 1px rgba(212,160,23,0.1) inset; border: 1px solid rgba(212,160,23,0.22); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border-radius: 14px; z-index: 1; overflow: hidden; color: #f5f5f0; }
.container3:before { content: ''; position: absolute; top: 0; left: -40%; width: 100%; height: 100%; background: rgba(212,160,23,0.04); transform: skewX(-15deg); pointer-events: none; }
h2 { width: 100%; color: #fff; text-align: center; font-size: 36px; margin-bottom: 20px; }
.container3 h2 { color: #f5e6b8; }
.container3 .row { position: relative; width: 100%; display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); }
.container3 .row .col { position: relative; width: 100%; padding: 0 10px; margin: 30px 0 20px; transition: 0.5s; }
.container3 .row .inputBox { position: relative; width: 100%; height: 40px; color: #f5f5f0; }
.container3 .row .inputBox input, .container3 .row .inputBox textarea { position: absolute; width: 100%; height: 100%; background: transparent; box-shadow: none; border: none; outline: none; font-size: 18px; padding: 0 10px; z-index: 1; color: #f5f5f0; caret-color: goldenrod; }
.container3 .row .inputBox .text { position: absolute; top: 0; left: 0; line-height: 40px; font-size: 18px; padding: 0 10px; display: block; transition: 0.5s; pointer-events: none; color: rgba(255,255,255,0.45); }
.container3 .row .inputBox input:focus + .text, .container3 .row .inputBox textarea:focus + .text { top: -35px; left: -10px; }
.container3 .row .inputBox input[required]:valid + .text, .container3 .row .inputBox textarea[required]:valid + .text { top: -35px; left: -10px; }
.container3 .row .inputBox .line { position: absolute; bottom: 0; display: block; width: 100%; height: 2px; background: rgba(255,255,255,0.2); transition: 0.5s; border-radius: 2px; pointer-events: none; }
.container3 .row .inputBox input:focus ~ .line, .container3 .row .inputBox input[required]:valid ~ .line { height: 100%; background: rgba(212,160,23,0.15); }
.container3 .row .inputBox.textarea { position: relative; width: 100%; height: 100px; padding: 10px 0; }
.container3 .row .inputBox textarea { height: 100%; resize: none; }
.container3 .row .inputBox textarea:focus ~ .line, .container3 .row .inputBox textarea[required]:valid ~ .line { height: 100%; background: rgba(212,160,23,0.15); }
.container3 .row .inputBox textarea:focus + .text, .container3 .row .inputBox textarea:valid + .text { top: -35px; left: -10px; }
input[type="submit"] { border: none; padding: 10px 40px; cursor: pointer; outline: none; background: #fff; color: #000; font-weight: 600; font-size: 18px; border-radius: 2px; }

/* Send button */
.button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 12.5rem; margin: 0; padding: 1.5rem 3.125rem; background-color: #111; border: none; border-radius: 0.3125rem; box-shadow: 0 12px 24px 0 rgba(0,0,0,0.2); color: white; font-weight: 300; text-transform: uppercase; overflow: hidden; }
.button:before { position: absolute; content: ""; bottom: 0; left: 0; width: 0%; height: 100%; background-color: gold; }
.button span { position: absolute; line-height: 0; }
.button span i { transform-origin: center center; }
.button span:nth-of-type(1) { top: 50%; transform: translateY(-50%); }
.button span:nth-of-type(2) { top: 100%; transform: translateY(0%); font-size: 24px; }
.button span:nth-of-type(3) { display: none; }
.active { background-color: gray; }
.active:before { width: 100%; transition: width 3s linear; }
.active span:nth-of-type(1) { top: -100%; transform: translateY(-50%); }
.active span:nth-of-type(2) { top: 50%; transform: translateY(-50%); }
.active span:nth-of-type(2) i { animation: loading 500ms linear infinite; }
.finished { background-color: gold; }
.finished .submit { display: none; }
.finished .loading { display: none; }
.finished .check { display: block !important; font-size: 24px; animation: scale 0.5s linear; }
@keyframes loading { 100% { transform: rotate(360deg); } }
@keyframes scale { 0% { transform: scale(10); } 50% { transform: scale(0.2); } 70% { transform: scale(1.2); } 90% { transform: scale(0.7); } 100% { transform: scale(1); } }
.form-msg { margin-top: 12px; font-size: 14px; line-height: 1.3; opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease; }
.form-msg.is-show { opacity: 1; transform: translateY(0); }
.form-msg.is-success { color: #2ecc71; }
.form-msg.is-error { color: #ff4d4d; }

/* ── PRICING ── */
.slide--pricing .slide__content { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.slide--pricing .karussel { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.slide--pricing .pricing-wrap { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.slide--pricing .pricing { width: min(1160px,92vw); height: 100%; overflow: hidden; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding-top: clamp(56px,9vh,90px); padding-bottom: clamp(86px,12vh,120px); }
.slide--pricing .pricing .container1 { width: 100%; max-width: 100%; margin: 0 auto; padding: 0; }
.slide--pricing .pricing .card__container { width: 100%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; align-items: stretch; }
.slide--pricing .pricing .card__content { position: relative; box-sizing: border-box; background: linear-gradient(180deg,rgba(26,26,26,0.88),rgba(12,12,12,0.88)); border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; box-shadow: 0 18px 45px rgba(0,0,0,0.45); padding: 22px 18px 18px; overflow: hidden; display: flex; flex-direction: column; min-height: clamp(440px,55vh,520px); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, opacity .25s ease; }
.slide--pricing .pricing .card__content::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 28% 10%, rgba(255,215,0,0.10), transparent 48%); pointer-events: none; }
.slide--pricing .pricing .card__pricing { position: absolute; top: 16px; right: 6px; width: 76px; height: 96px; color: #fff; padding: 10px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.slide--pricing .pricing .card__pricing-number { font-weight: 900; font-size: 22px; line-height: 1; }
.slide--pricing .pricing .card__pricing-month { font-size: 13px; opacity: .9; }
.slide--pricing .pricing .card__header { margin-top: 104px; }
.slide--pricing .pricing .card__header-circle { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.06); display: grid; place-items: center; margin-bottom: 10px; }
.slide--pricing .pricing .card__header-img { width: 34px; height: 34px; object-fit: contain; display: block; }
.slide--pricing .pricing .card__header-subtitle { display: block; font-size: 0.95rem; opacity: .80; margin-bottom: 6px; }
.slide--pricing .pricing .card__header-title { margin: 0 0 14px; font-size: 1.35rem; font-weight: 900; line-height: 1.1; }
.slide--pricing .pricing .card__list { margin: 0; padding: 0; display: grid; gap: 10px; }
.slide--pricing .pricing .card__list-item { display: flex; gap: 10px; align-items: flex-start; }
.slide--pricing .pricing .card__list-icon { color: gold; font-size: 16px; margin-top: 2px; }
.slide--pricing .pricing .card__list-description { margin: 0; font-size: 0.98rem; line-height: 1.25; opacity: .95; }
.slide--pricing .pricing .card__button { margin-top: auto; height: 50px; border-radius: 14px; border: 0; background: linear-gradient(157deg,goldenrod -12%,gold 109%); color: white; font-weight: 900; font-size: 1rem; box-shadow: 0 16px 34px rgba(218,165,32,0.18); }
.slide--pricing .pricing .card__container > .card__content:nth-child(2) { transform: scale(1.04); border-color: rgba(218,165,32,0.58); box-shadow: 0 28px 70px rgba(0,0,0,0.55), 0 20px 55px rgba(218,165,32,0.14); animation: pricingTapLoopDesktop 2.8s ease-in-out infinite; }
@keyframes pricingTapLoopDesktop { 0% { transform: scale(1.04); } 12% { transform: scale(1.065); } 26% { transform: scale(1.035); } 40% { transform: scale(1.052); } 55% { transform: scale(1.04); } 100% { transform: scale(1.04); } }
.slide--pricing .pricing .card__container > .card__content:nth-child(2)::after { content: ""; position: absolute; inset: -45%; background: radial-gradient(circle at 50% 25%, rgba(255,215,0,0.14), transparent 60%); opacity: 0; transform: scale(.85); pointer-events: none; animation: pricingGlowLoopDesktop 2.8s ease-in-out infinite; }
@keyframes pricingGlowLoopDesktop { 0% { opacity: 0; transform: scale(.85); } 14% { opacity: .85; } 42% { opacity: 0; transform: scale(1.0); } 100% { opacity: 0; } }
.slide--pricing .pricing details > summary { list-style: none; }
.slide--pricing .pricing details > summary::marker { content: ""; }
.slide--pricing .pricing details > summary::-webkit-details-marker { display: none; }

/* ── TAPRATE / FACHTAP MENU ── */
#taprate-container { position: fixed; top: 14px; right: 14px; bottom: auto; left: auto; transform: none; z-index: 999; display: flex; flex-direction: row; align-items: center; gap: 10px; backdrop-filter: blur(6px); }
#taprate-header { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.taprate-text { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 700; letter-spacing: 2px; font-size: 1.1rem; color: #fff; }
.arrow { font-size: 1.3rem; transition: transform .35s cubic-bezier(.4,0,.2,1); color: #fff; }
.arrow.open { transform: rotate(90deg); }
#taprate-panel { position: absolute; right: 0; top: calc(100% + 10px); flex-direction: column; gap: 10px; margin-top: 10px; display: flex; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .35s ease, transform .35s cubic-bezier(.4,0,.2,1); }
#taprate-panel.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* FIX: keine Drehung bei hover/tap */
#taprate-panel a { writing-mode: initial; transform: none; text-decoration: none; color: #fff; font-size: .95rem; opacity: .8; transition: opacity 0.2s ease, color 0.2s ease; display: block; }
#taprate-panel a:hover, #taprate-panel a:active, #taprate-panel a:focus { transform: none; opacity: 1; color: gold; }

/* ── COOKIE BANNER ── */
#cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99999; background: rgba(10,10,10,0.92); backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,0.12); padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; transform: translateY(0); transition: transform 0.4s ease; }
#cookie-banner.is-hidden { transform: translateY(100%); }
#cookie-banner p { margin: 0; font-size: 13px; color: rgba(255,255,255,0.75); max-width: 700px; line-height: 1.5; }
#cookie-banner a { color: gold; text-decoration: underline; }
.cookie-btns { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-btn { padding: 9px 20px; border-radius: 999px; font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity 0.2s ease, transform 0.15s ease; min-width: 110px; text-align: center; }
.cookie-btn--accept { background: linear-gradient(135deg,goldenrod,gold); color: #000; border: 1px solid goldenrod; }
.cookie-btn--decline { background: transparent; color: goldenrod; border: 1px solid goldenrod; }
.cookie-btn:hover { opacity: 0.85; transform: translateY(-1px); }

/* ── GLOBAL COLOR FIXES ── */
h1, h2, h3, h4, h5, h6 { color: #fff; }
p, span, li, label, div { color: inherit; }
.slide--pricing .pricing .card__content, .slide--pricing .pricing .card__content * { color: #fff; }
.post__title, .post__tag, .post__published, .main-post__title, .main-post__tag, .main-post__link-text { color: #fff; }
.carousel .list .item .introduce .title, .carousel .list .item .introduce .topic,
.carousel .list .item .introduce .des, .carousel .list .item .introduce .seeMore,
.carousel .list .item .detail, .carousel .list .item .detail * { color: #fff; }
/* ================================================================
   RESPONSIVE — alle Breakpoints, EINE Stelle, keine Dopplungen
   ================================================================ */

/* ── TABLET (max 1024px) ── */
@media (max-width: 1024px) {
  .slider__text { font-size: calc(1rem + 3vw); left: 1.5rem; bottom: 2.5rem; opacity: 0.14; }
  .slide__img { width: 35vw; height: 60vh; }
  /* Slide 2 braucht volle Breite – 35vw Override aufheben */
  .js-slide:nth-child(2) .slide__img,
  .js-slide:nth-child(2) figure.slide__img {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    inset: 0 !important;
  }
  .vert-text span { font-size: 1.1rem; transform: rotate(-90deg) translateY(12rem); }
  .main-post-wrapper { height: 55vh; }
  .main-post__content { font-size: 0.9em; bottom: 18%; }
  .main-post__title { font-size: 1.7em; }
  .posts-wrapper { grid-template-columns: repeat(2, 1fr); }
  .slide--pricing .pricing { width: min(980px,94vw); }
  .slide--pricing .pricing .card__content { padding: 20px 16px 16px; min-height: clamp(420px,52vh,500px); }
  .slide--pricing .pricing .card__container > .card__content:nth-child(2) { transform: scale(1.03); animation: pricingTapLoopTablet 2.8s ease-in-out infinite; }
  @keyframes pricingTapLoopTablet { 0% { transform: scale(1.03); } 12% { transform: scale(1.055); } 26% { transform: scale(1.025); } 40% { transform: scale(1.04); } 55% { transform: scale(1.03); } 100% { transform: scale(1.03); } }
  .carousel .list .item .introduce .title { font-size: clamp(0.9rem,2vw,1.6em); }
  .carousel .list .item .introduce .topic { font-size: clamp(1.4rem,4vw,3em); }
  .carousel .list .item .introduce .des { font-size: clamp(10px,1vw,13px); }
}

/* ── MOBILE (max 767px) ── */
@media (max-width: 767px) {
  body { padding: 0; }

  /* iOS Input Zoom Fix */
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="url"], input[type="search"], input[type="password"], input[type="submit"],
  textarea, select { font-size: 16px; touch-action: manipulation; }

  /* Logo */
  .logo { height: 48px; top: 0; z-index: 10000; }
  .logo img { height: 1.8rem; }
  .nav { height: 48px; top: 0; }

  /* Taprate */
  #taprate-container { top: 12px; right: 12px; }
  #taprate-panel { right: 0; top: calc(100% + 10px); }
  .taprate-text { font-size: 0.85rem; letter-spacing: 1px; }
  .arrow { font-size: 1.05rem; }

  /* Marquee sizing on mobile (visibility controlled by .marquee--visible class) */
  .marquee {
    height: 7vh; min-height: 40px; max-height: 55px;
  }
  .marquee-content li { padding: 0 0.6rem; font-size: 0.65rem; }
  .marquee-content li i { font-size: 0.85rem; margin-bottom: 0.1rem; }
  .marquee:before, .marquee:after { width: 2rem; }

  /* Carousel */
  .carousel { left: 0; margin-top: 60px; height: 560px; overflow: visible; }
  .carousel .list { width: 100%; max-width: 96%; height: 100%; }
  .carousel .list .item { width: 92%; font-size: 12px; }
  .carousel .list .item img { width: 46%; }
  .carousel .list .item:nth-child(2) .introduce { width: min(52vw,280px); }
  .carousel .list .item .introduce .title { font-size: clamp(0.75rem,3.5vw,1.1rem); }
  .carousel .list .item .introduce .topic { font-size: clamp(1.2rem,6vw,2rem); }
  .carousel .list .item .introduce .des { font-size: clamp(9px,2.2vw,12px); line-height: 1.4; }
  .carousel .list .item .introduce .seeMore { font-size: clamp(8px,2vw,11px); }
  .carousel .list .item .introduce .seeMore i, .carousel .list .item .introduce .seeMore svg { transform: translateX(80px); }
  .arrows { width: 100%; max-width: 96%; left: 50%; transform: translateX(-50%); bottom: 14px; }
  :root {
    --item1-transform: translateX(-90%) translateY(-2%) scale(1.25);
    --item3-transform: translate(38%,8%) scale(0.78);
    --item4-transform: translate(72%,16%) scale(0.55);
    --item5-transform: translate(105%,24%) scale(0.35);
  }

  /* Detail view mobile */
  .carousel.showDetail .list .item:nth-child(2) img { right: 56%; }
  .carousel.showDetail .list .item:nth-child(2) .detail { width: 44%; max-width: 44%; right: 2%; padding: 0 6px; }
  .carousel.showDetail .list .item:nth-child(2) .detail .title { font-size: clamp(0.9rem,3.5vw,1.4rem); }
  .carousel.showDetail .list .item:nth-child(2) .detail .des { font-size: 8px; }
  .carousel.showDetail .list .item:nth-child(2) .detail .specifications { flex-direction: column; }
  .carousel.showDetail .list .item:nth-child(2) .detail .specifications div { width: 100%; max-width: 100%; text-align: left; }
  .carousel.showDetail .list .item:nth-child(2) .checkout button { font-size: 9px; padding: 4px 7px; margin-left: 0; }

  /* ft-benefits */
  .ft-benefits { max-width: 100%; padding: 4px; font-size: 0.92rem; line-height: 1.25; }
  .ft-card { border-radius: 12px; }
  .ft-tabs { padding: 6px 6px 0; }
  .ft-tab { font-size: 0.72rem; padding: 7px 5px 6px; line-height: 1.15; }
  .ft-content { padding: 8px 8px 8px; }
  .ft-title { font-size: clamp(14px,4vw,20px); margin: 4px 0 10px; }
  .ft-list { gap: 6px; grid-template-columns: 1fr; }
  .ft-item { padding: 8px; gap: 8px; border-radius: 10px; }
  .ft-icon { width: 28px; height: 28px; font-size: 13px; border-radius: 7px; }
  .ft-head { font-size: 12.5px; }
  .ft-sub { font-size: 11px; margin-top: 3px; line-height: 1.4; }

  /* Pricing mobile */
  .slide--pricing .pricing { position: relative; overflow: hidden; padding-top: calc(env(safe-area-inset-top) + 22px); padding-bottom: calc(env(safe-area-inset-bottom) + 90px); }
  .slide--pricing .pricing .pricing-carousel { display: flex; gap: 14px; width: 100%; padding: 0 18px; transform: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .slide--pricing .pricing .pricing-carousel::-webkit-scrollbar { display: none; }
  .slide--pricing .pricing .pricing-carousel .card__content { scroll-snap-align: center; border-radius: 24px; padding: 16px 16px 14px; flex: 0 0 72%; transform: scale(0.90) translateY(22px); opacity: .72; transition: transform .22s ease, opacity .22s ease; pointer-events: auto; }
  .slide--pricing .pricing .pricing-carousel .card__content.is-active { flex: 0 0 72%; transform: scale(1) translateY(0); opacity: 1; border-radius: 28px; }
  .slide--pricing .pricing .card__list-description { hyphens: none; word-break: normal; overflow-wrap: normal; }
  .slide--pricing .pricing { overflow: visible; }
  .slide--pricing .pricing .pricing-carousel { overflow: visible; }
  .slide--pricing .slide__content { overflow: visible; }
  .slide--pricing .pricing .pricing-carousel .card__content .card__list, .slide--pricing .pricing .pricing-carousel .card__content .card__button { display: none; }
  .slide--pricing .pricing .pricing-carousel .card__content.is-open .card__list, .slide--pricing .pricing .pricing-carousel .card__content.is-open .card__button { display: block; }

  /* Mobile dropdown */
  .mobile-drop { position: absolute; top: 12px; right: 12px; z-index: 10001; }
  .mobile-drop__btn { background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.9); padding: 10px 12px; border-radius: 999px; backdrop-filter: blur(10px); font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
  .mobile-drop__arrow { transition: transform .2s ease; }
  .mobile-drop.open .mobile-drop__arrow { transform: rotate(180deg); }
  .mobile-drop__menu { position: absolute; right: 0; margin-top: 10px; width: 180px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; backdrop-filter: blur(12px); overflow: hidden; transform-origin: top right; transform: scale(0.98) translateY(-6px); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
  .mobile-drop.open .mobile-drop__menu { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
  .mobile-drop__menu a { display: block; padding: 12px; color: rgba(255,255,255,0.9); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .mobile-drop__menu a:last-child { border-bottom: 0; }
  .mobile-drop__menu a:hover { background: rgba(255,255,255,0.06); }

  /* Pricing hint */
  #pricingHint { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 55px); z-index: 999999; font-size: 12px; color: rgba(255,255,255,0.78); padding: 8px 12px; border-radius: 999px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(8px); white-space: nowrap; pointer-events: none; opacity: 0; animation: pricingHintAnim 3.2s ease-in-out infinite; }
  #pricingHint.is-hidden { display: none; }
  @keyframes pricingHintAnim { 0% { opacity: 0; transform: translateX(-50%) translateY(6px); } 18% { opacity: 1; transform: translateX(-50%) translateY(0); } 55% { opacity: 1; } 75% { opacity: 0; transform: translateX(-50%) translateY(-4px); } 100% { opacity: 0; } }

  /* Cookie banner mobile */
  #cookie-banner { flex-direction: column; align-items: flex-start; padding: 14px 16px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .cookie-btns { width: 100%; }
  .cookie-btn { flex: 1; text-align: center; }

  /* CONTACT MOBILE — FIX: kein Scrollen, kein Verschieben */
  .slide .contact, .js-slide .contact, section.contact {
    position: absolute; inset: 0; width: 100%; height: 100%;
    min-height: unset; max-height: 100%; display: flex;
    align-items: center; justify-content: center;
    padding: 52px 12px 8vh; margin: 0;
    overflow: hidden; box-sizing: border-box;
    -webkit-transform: translateZ(0); transform: translateZ(0);
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    overscroll-behavior: none;
  }
  .slide .contact input, .slide .contact textarea,
  section.contact input, section.contact textarea {
    touch-action: manipulation;
    -webkit-user-select: text; user-select: text;
  }
  .slide .container3, .js-slide .container3, section.contact .container3 {
    position: relative; width: 92%; max-width: 420px;
    max-height: calc(100% - 8px);
    padding: 16px 16px 12px; margin: 0 auto;
    overflow: hidden; overflow-y: hidden; overflow-x: hidden;
    -webkit-overflow-scrolling: auto;
    overscroll-behavior: contain;
    box-sizing: border-box; border-radius: 12px;
    -webkit-transform: translateZ(0); transform: translateZ(0);
  }
  .slide .container3 h2, section.contact .container3 h2 { font-size: 18px; margin-bottom: 6px; }
  .slide .container3 .row, section.contact .container3 .row { grid-template-columns: 1fr; gap: 0; }
  .slide .container3 .row .col, section.contact .container3 .row .col { margin: 6px 0 4px; padding: 0 4px; }
  .slide .container3 .row .inputBox, section.contact .container3 .row .inputBox { height: 32px; }
  .slide .container3 .row .inputBox .text, section.contact .container3 .row .inputBox .text { font-size: 13px; line-height: 32px; }
  .slide .container3 .row .inputBox.textarea, section.contact .container3 .row .inputBox.textarea { height: 46px; }
  .slide .container3 input[type="submit"], .slide .container3 .button,
  section.contact input[type="submit"], section.contact .button { width: 100%; padding: 8px 20px; font-size: 16px; }

  .hero-mini { display: none; }
}

/* ── MOBILE HERO (max 680px) ── */
@media (max-width: 680px) {
  .text { font-size: 10px; }
  .hero {
    display: flex; flex-direction: column; align-items: center;
    justify-content: flex-start; padding: 52px 16px 12px 16px;
    margin: 0; min-height: 100svh; gap: 0; text-align: center;
    box-sizing: border-box; overflow: hidden;
  }
  /* hide spacer <br> tags inside hero on mobile */
  .hero > div:first-child br { display: none; }

  .visual { order: 0; min-height: unset; width: 100%; display: flex; justify-content: center; margin: 0 0 6px; }
  .figure-wrap { width: min(180px,48vw); aspect-ratio: 3/4; position: relative; margin: 0 auto; }
  .figure-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; margin: 0; }
  .phone-img { width: min(85px,25%); position: absolute; right: -4%; top: 8%; margin: 0; }
  .hero > div:first-child { order: 1; width: 100%; margin: 0; }
  .hero h1 { font-size: clamp(1.3rem, 5.8vw, 1.7rem); line-height: 1.18; margin: 0 0 7px; }
  .hero p { font-size: clamp(0.78rem, 3.2vw, 0.9rem); line-height: 1.5; margin-bottom: 8px; color: rgba(255,255,255,.85); }
  .container { margin: 0 auto 6px; transform: scale(0.80); transform-origin: center center; }
  #search { left: auto; right: 10px; top: 50%; transform: translateY(-50%); position: absolute; }
  .ctas { gap: 6px; justify-content: center; margin-bottom: 8px; flex-wrap: wrap; }
  .btn { padding: 7px 12px; font-size: 0.76rem; }
  .hero-proof-strip {
    margin: 6px auto 0;
    max-width: 100%;
    flex-wrap: nowrap;
  }
  .hero-proof-quote { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; }
  .hero-mini { display: none; }

  /* NEWS CAROUSEL MOBILE – Großes Bild + 3 Kacheln absolut positioniert */
  .js-slide:nth-child(2) {
    overflow: visible;
  }
  .js-slide:nth-child(2) .slide__content {
    padding: 0;
    overflow: visible;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
  }
  /* Override the 35vw from tablet breakpoint */
  .slide__img,
  figure.slide__img,
  .js-slide:nth-child(2) .slide__img,
  .js-slide:nth-child(2) figure.slide__img {
    width: 100% !important;
    height: 100% !important;
  }
  .js-slide:nth-child(2) figure.slide__img {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    inset: 0 !important;
    overflow: visible;
  }

  /* Progress-Bar: sichtbar, oben im Bild-Container */
  .progress-bar {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 4px !important;
    z-index: 10 !important;
  }

  /* BILD: groß und breit */
  .main-post-wrapper {
    position: absolute !important;
    top: 106px;
    left: 12px;
    right: 46px;
    bottom: 110px;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.55);
  }
  .carousel1 { height: 100%; overflow: hidden; }
  .main-post__image img { object-fit: cover; object-position: center center; }
  .main-post__content {
    bottom: 6%; left: 5%; width: 88%; font-size: 0.9em;
  }
  .main-post__title { font-size: 1.2em; line-height: 1.3; }
  .main-post__tag { font-size: 0.72em; padding: 3px 10px; border-radius: 6px; }
  .main-post__link-text { font-size: 0.78em; }
  .main-post.main-post--active .main-post__tag-wrapper { width: auto; }

  /* 3 KACHELN: absolut am unteren Rand, gleichmäßig verteilt */
  .posts-wrapper {
    position: absolute !important;
    bottom: 16px !important;
    left: 8px !important;
    right: 38px !important;
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    z-index: 5;
  }
  .post {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 10px 4px !important;
    min-height: 48px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 14px !important;
    background: rgba(20,20,20,0.7) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    opacity: 0.5;
    transition: opacity 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .post--active {
    background: rgba(212,175,55,0.18) !important;
    border-color: rgba(212,175,55,0.4) !important;
    opacity: 1 !important;
    transform: scale(1.03);
  }
  .post__header { display: none !important; }
  .post__title {
    font-size: 0.6em !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    font-weight: 500 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    color: #fff !important;
    word-break: break-word !important;
  }
  .post--active .post__title { color: rgba(212,175,55,0.95) !important; }

  .marquee { height: 7vh; }
}

/* ── EXTRA SMALL (max 420px) ── */
@media (max-width: 420px) {
  .carousel { height: 520px; }
  .carousel .list .item img { width: 50%; }
  .carousel .list .item:nth-child(2) .introduce { width: min(300px,60vw); }
  .carousel .list .item .introduce .title { font-size: clamp(0.65rem,3vw,0.9rem); }
  .carousel .list .item .introduce .topic { font-size: clamp(1rem,5.5vw,1.6rem); }
  .carousel .list .item .introduce .des { font-size: 9px; }
  .slide--pricing .pricing .card__container { width: min(92vw,370px); transform: scale(0.81); gap: 10px; }

  .main-post-wrapper { border-radius: 14px; top: 66px; left: 4px; right: 34px; bottom: 100px; }
  .main-post__title { font-size: 1.05em; }
  .main-post__content { bottom: 5%; font-size: 0.78em; }
  .posts-wrapper { bottom: 46px !important; left: 4px !important; right: 34px !important; gap: 5px !important; }
  .post { padding: 8px 5px !important; min-height: 42px !important; border-radius: 12px !important; }
  .post__title { font-size: 0.56em !important; }

  .slide .container3, section.contact .container3 { width: 94%; padding: 14px 12px 10px; }

  .marquee { height: 6vh; min-height: 35px; max-height: 45px; }
  .marquee-content li { font-size: 0.58rem; padding: 0 0.4rem; }
  .marquee-content li i { font-size: 0.75rem; }
}

@media screen and (min-width: 968px) {
  :root {
    --biggest-font-size: 2.125rem;
    --h2-font-size: 1.5rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
    --tiny-font-size: .688rem;
  }
}
.container1 { max-width: 1024px; margin-left: var(--mb-1-5); margin-right: var(--mb-1-5); }

/* ═══════════════════════════════════════════════════════════
   SLIDE 5 – SOCIAL PROOF + SO FUNKTIONIERT'S + FAQ
   ══════════════════════════════════════════════════════════ */

.proof-section {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; max-width: 1080px; margin: 0 auto;
  padding: 32px max(3vw, 24px) 24px; gap: 36px;
  height: 100%; overflow-y: auto; box-sizing: border-box;
}

/* ── Reviews ── */
.proof-heading, .faq-heading {
  color: goldenrod; font-size: clamp(18px, 2.4vw, 28px); font-weight: 700;
  text-align: center; margin: 0; letter-spacing: -.2px;
}
.proof-heading { margin-bottom: -16px; }

.reviews-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%;
}

.review-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(212,160,23,0.22);
  border-top: 2px solid goldenrod;
  border-radius: 16px; padding: 22px 20px 18px;
  display: flex; flex-direction: column; gap: 12px;
  backdrop-filter: blur(8px); transition: border-color .2s, background .2s;
  position: relative; overflow: hidden;
}
.review-card::before {
  content: '\201C';
  position: absolute; top: -6px; right: 16px;
  font-size: 88px; line-height: 1; color: rgba(212,160,23,0.13);
  font-family: Georgia, serif; pointer-events: none; user-select: none;
}
.review-card:hover { border-color: rgba(212,160,23,0.60); background: rgba(255,255,255,0.09); }

.review-card__header { display: flex; align-items: center; gap: 12px; }

.review-avatar { position: relative; width: 48px; height: 48px; flex-shrink: 0; }
.review-avatar__img {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  display: none; position: relative; z-index: 1;
}
.review-avatar__img[src]:not([src=""]) { display: block; }
.review-avatar__img[src]:not([src=""]) + .review-avatar__initial { display: none; }
.review-avatar__initial {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(135deg, goldenrod, #a0720a);
  color: #000; font-size: 19px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

.review-name { color: #fff; font-size: 13.5px; font-weight: 700; display: block; }
.review-stars { color: goldenrod; font-size: 13px; letter-spacing: 2px; margin-top: 1px; }
.review-text {
  color: rgba(255,255,255,0.82); font-size: 13.5px; line-height: 1.65;
  flex: 1; font-style: italic;
}

/* ── So funktioniert's ── */
.how-steps {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.how-steps__title {
  color: goldenrod; font-size: clamp(16px, 2.2vw, 26px); font-weight: 700;
  text-align: center; margin: 0;
}
.steps-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  width: 100%; max-width: 680px; position: relative; gap: 8px;
}
.steps-row::before {
  content: ''; position: absolute; top: 22px;
  left: 16.67%; right: 16.67%; height: 2px;
  background: linear-gradient(90deg, goldenrod, rgba(212,160,23,0.35), goldenrod); z-index: 0;
}
.step-item {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 9px; position: relative; z-index: 1; padding: 0 8px;
}
.step-num {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, goldenrod, #a0720a);
  color: #000; font-size: 17px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 4px 18px rgba(212,160,23,0.30);
}
.step-label { color: #fff; font-size: 13px; font-weight: 700; display: block; }
.step-desc { color: rgba(255,255,255,0.55); font-size: 11.5px; line-height: 1.45; }

/* ── FAQ ── */
.faq-section { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.faq-heading { margin-bottom: -4px; }
.faq-grid { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 680px; }
.proof-section--faq { justify-content: center; min-height: 100%; }

/* accordion */
.faq-item {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-left: 3px solid goldenrod;
  border-radius: 0 12px 12px 0;
  overflow: hidden;
  transition: border-color .2s, background .2s;
}
.faq-item[open] {
  background: rgba(255,255,255,0.08);
  border-color: rgba(212,160,23,0.50);
  border-left-color: goldenrod;
}
.faq-q {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 16px;
  color: #fff; font-size: 13.5px; font-weight: 700; margin: 0;
  user-select: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: '+'; color: goldenrod; font-size: 20px; font-weight: 300;
  line-height: 1; flex-shrink: 0; transition: transform .2s;
}
.faq-item[open] .faq-q::after { content: '\2212'; }
.faq-a {
  color: rgba(255,255,255,0.70); font-size: 13px; line-height: 1.65;
  margin: 0; padding: 0 16px 14px 16px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

/* ── proof-section CTA ── */
.proof-cta { margin-top: 4px; }

/* ── Hero social proof strip ── */
.hero-proof-strip {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; padding: 6px 14px 6px 6px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(212,160,23,0.25);
  border-radius: 999px; width: fit-content;
  backdrop-filter: blur(6px);
  cursor: pointer; text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.hero-proof-strip:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(212,160,23,0.5);
}
.hero-proof-avatars { display: flex; }
.hero-proof-avatar {
  position: relative; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, goldenrod, #a0720a);
  color: #000; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(10,10,8,0.85); margin-left: -7px; flex-shrink: 0;
  overflow: hidden;
}
.hero-proof-avatar:first-child { margin-left: 0; }
.hero-proof-avatar img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%; display: none;
}
.hero-proof-avatar img[src]:not([src=""]) { display: block; }
.hero-proof-avatar img[src]:not([src=""]) ~ span { display: none; }
.hero-proof-text { display: flex; flex-direction: column; gap: 2px; padding-left: 4px; }
.hero-proof-stars { color: goldenrod; font-size: 10px; letter-spacing: 2px; }
.hero-proof-quote { color: rgba(255,255,255,0.72); font-size: 11px; line-height: 1.3; }

/* ── PROOF MOBILE (≤680px) ── */
@media (max-width: 680px) {
  /* Slide 5 */
  .proof-section {
    padding: 110px 14px 12px;
    gap: 10px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }

  .proof-heading, .how-steps__title {
    font-size: 14px; margin-bottom: 0;
  }

  /* So funktioniert's – compact 3-col */
  .how-steps { gap: 8px; width: 100%; }
  .steps-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%; gap: 4px; position: relative;
  }
  .steps-row::before {
    top: 16px; left: 16.67%; right: 16.67%;
    height: 2px; width: auto; bottom: auto;
    background: linear-gradient(90deg, goldenrod, rgba(212,160,23,0.35), goldenrod);
  }
  .step-item {
    flex-direction: column; text-align: center;
    gap: 4px; align-items: center; padding: 0 2px;
  }
  .step-num { width: 32px; height: 32px; font-size: 13px; flex-shrink: 0; }
  .step-label { font-size: 10px; font-weight: 700; }
  .step-desc { display: none; }

  .proof-cta {
    font-size: 0.72rem; padding: 7px 12px;
    text-align: center; width: 100%; box-sizing: border-box;
  }

  /* "Was Kundinnen sagen" heading – small gap above */
  .proof-heading { margin-top: 4px; }

  /* Reviews: vertical stack, all 3 visible */
  .reviews-grid {
    display: flex; flex-direction: column;
    gap: 5px; width: 100%; flex-shrink: 0;
    overflow: visible; margin-top: 0;
  }
  .review-card {
    min-width: unset; width: 100%; flex-shrink: 0;
    padding: 8px 10px; gap: 4px;
    border-radius: 10px;
  }
  .review-card::before { font-size: 42px; top: -3px; right: 8px; }
  .review-card__header { gap: 7px; }
  .review-avatar { width: 40px; height: 40px; }
  .review-avatar__initial { font-size: 14px; }
  .review-avatar__img { width: 40px; height: 40px; }
  .review-name { font-size: 11px; }
  .review-stars { font-size: 9px; letter-spacing: 1px; margin-top: 0; }
  .review-text {
    font-size: 9.5px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
  }

  /* Slide 6 – FAQ narrower + centered */
  .proof-section--faq {
    justify-content: center;
    padding: 40px 20px 20px;
    gap: 14px;
    overflow-y: auto;
  }
  .faq-grid {
    max-width: min(100%, 340px);
    align-self: center;
  }
  .faq-heading { font-size: 15px; }
  .faq-q { font-size: 12px; padding: 11px 12px; }
  .faq-a { font-size: 11px; padding: 0 12px 11px; line-height: 1.55; }
}

/* ── PAGE LOADER ─────────────────────────────────────────── */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #050503;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  pointer-events: none;
}
#page-loader .loader-logo {
  width: clamp(80px, 18vw, 120px);
  height: auto;
  opacity: 0;
  animation: loaderFadeIn 0.5s ease 0.1s forwards;
}
#page-loader .loader-bar {
  width: clamp(80px, 18vw, 120px);
  height: 2px;
  background: rgba(212,160,23,0.18);
  border-radius: 999px;
  overflow: hidden;
  opacity: 0;
  animation: loaderFadeIn 0.5s ease 0.2s forwards;
}
#page-loader .loader-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, goldenrod, gold);
  border-radius: 999px;
  animation: loaderProgress 0.8s cubic-bezier(0.4,0,0.2,1) 0.25s forwards;
}
@keyframes loaderFadeIn {
  to { opacity: 1; }
}
@keyframes loaderProgress {
  to { width: 100%; }
}

/* ── FIX: Kontakt Mobile – kein Scrollen ─────────────── */
@media (max-width: 767px) {
  .contact .container3,
  .slide .contact .container3,
  .js-slide .contact .container3,
  section.contact .container3,
  form.container3 {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: auto !important;
    overscroll-behavior: none !important;
    max-height: calc(100svh - 52px - 8vh) !important;
  }
  .contact .container3 .row .col { margin: 5px 0 3px !important; padding: 0 3px !important; }
  .contact .container3 .row .inputBox { height: 30px !important; }
  .contact .container3 .row .inputBox .text { font-size: 12px !important; line-height: 30px !important; }
  .contact .container3 .row .inputBox.textarea { height: 42px !important; }
  .contact .container3 h2 { font-size: 16px !important; margin-bottom: 4px !important; }
  .contact .container3 { padding: 14px 14px 10px !important; }
}

/* ── CONTACT FOOTER (index.html – Kontakt-Slide) ───────── */
.contact-wrap {
  width: 100%; max-width: 1000px;
  display: flex; flex-direction: column; gap: 0;
}
.contact-footer {
  padding: .7rem 0 0;
  border-top: 1px solid rgba(212,160,23,.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .3rem .8rem;
}
.contact-footer__brand {
  display: flex; flex-direction: column; gap: .1rem;
}
.cf-name {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: .78rem; font-weight: 700; letter-spacing: .5px;
  background: linear-gradient(135deg, #f5e6b8, var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.cf-copy { font-size: .6rem; color: rgba(255,255,255,.18); letter-spacing: .02em; }
.cf-links {
  display: flex; flex-wrap: wrap; gap: .25rem .75rem;
}
.cf-links a {
  font-size: .6rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
  color: rgba(255,255,255,.22); transition: color .2s;
}
.cf-links a:hover { color: var(--gold); }

@media (max-width: 600px) {
  .contact-footer { flex-direction: column; align-items: flex-start; gap: .25rem;
    padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom)); }
}