/* VS Agency — Hero V2 (nach Figma, Frame 1:8, 1440x1024)
   Quelle: https://www.figma.com/design/5QdrdhFXMwSr0Q1dvwZME8/?node-id=1-8
   Groessen-Anpassungen ggue. Figma auf Kundenwunsch (2026-08-27):
   Headline 0.8x, Badges 0.8x, Header 0.85x, CTA 0.85x */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #fdfdff;
  overflow-x: hidden;
  font-family: 'Inter', -apple-system, sans-serif;
}

img {
  display: block;
}

/* Canvas: 1440px breites Design, alle Sections stapeln sich normal darin,
   das ganze .page wird per JS proportional auf Viewport-Breite skaliert
   (kein eigenes Mobile-Layout in Figma — alles skaliert mit) */
.hero-backdrop {
  display: none;
}

/* Volle Viewport-Breite — kein Max-Width-Deckel, sonst entstehen links und
   rechts sichtbare Raender neben dem gedeckelten Canvas. */
.hero-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  transform-origin: top left;
}

.page > section {
  position: relative;
  width: 1440px;
  overflow: hidden;
  background: #fdfdff;
}

.hero {
  height: 1024px;
}

/* ===== blur blue: Hintergrund-Blobs (2:31) ===== */

.bg-blobs {
  position: absolute;
  left: -228px;
  top: -613px;
  width: 1896px;
  height: 1295px;
}

/* Der SVG-Export enthaelt 200px Blur-Rand auf allen Seiten */
.bg-blobs .bleed {
  position: absolute;
  inset: -15.44% -10.55%;
}

.bg-blobs .bleed img {
  width: 100%;
  height: 100%;
  max-width: none;
}

/* ===== Headline-Gruppe (1:14 + 1:26) =====
   Gruppe sitzt auf dem Figma-Mittelpunkt (50%+13px, 327) und wird
   als Ganzes verkleinert, damit Headline + Akzent zusammen skalieren. */

.headline-group {
  position: absolute;
  left: calc(50% + 13px);
  top: 327px;
  width: 0;
  height: 0;
  transform: scale(0.8);
}

.headline-underline {
  position: absolute;
  left: -376px;
  top: -3px;
  width: 259px;
  height: 95px;
}

.headline-underline img {
  width: 100%;
  height: 100%;
}

.headline {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  width: 1072px;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-weight: 800;
  font-size: 85px;
  line-height: 1.03;
  text-align: center;
  color: #ffffff;
  text-shadow: 1px 6px 34.3px #080808;
  white-space: pre-wrap;
}

.headline span {
  display: block;
}

/* ===== insta Badge (3:42) ===== */

.badge-insta {
  position: absolute;
  left: 743px;
  top: 478px;
  width: 194px;
  height: 63px;
  transform: scale(0.8);
}

.badge-insta .pill {
  position: absolute;
  left: 2px;
  top: 6px;
  width: 192px;
  height: 51px;
}

.badge-insta .icon-bg {
  position: absolute;
  left: 17px;
  top: 16px;
  width: 30px;
  height: 31px;
  background: #ffffff;
}

.badge-insta .icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 63px;
  height: 63px;
  object-fit: cover;
}

.badge-insta .label {
  position: absolute;
  left: 118px;
  top: 32px;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.03;
  white-space: nowrap;
  background-image: linear-gradient(90deg,
    rgba(193, 53, 132, 0.85) 0%,
    rgba(225, 48, 108, 0.85) 27.399%,
    rgba(247, 119, 55, 0.85) 63.594%,
    rgba(252, 175, 69, 0.85) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===== tiktok Badge (3:46) ===== */

.badge-tiktok {
  position: absolute;
  left: 496px;
  top: 457px;
  width: 192px;
  height: 116px;
  transform: scale(0.8);
}

.badge-tiktok .pill {
  position: absolute;
  left: 0;
  top: 27px;
  width: 192px;
  height: 51px;
}

.badge-tiktok .icon {
  position: absolute;
  left: 6px;
  top: 23px;
  width: 60px;
  height: 60px;
  object-fit: cover;
}

/* Schatten auf der Glyph-Form statt als Rechteck-Box ("Glas-Kachel"-Fix) */
.badge-tiktok .icon {
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

.badge-tiktok .label {
  position: absolute;
  left: 58px;
  top: 0;
  width: 116px;
  height: 116px;
  object-fit: cover;
}

/* ===== bilder: Collage unten links (3:78) =====
   Exakter Figma-Mask: Schnittmenge zweier rotierter, geblurter Ellipsen
   (ein gemeinsames Mask-Sheet, Ursprung Hero(-260, 290), 970x850).
   mask-position je Element = Sheet-Ursprung minus Element-Position. */

.collage-group {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 1024px;
  -webkit-mask-image: url("img/v2-collage-mask.svg");
  mask-image: url("img/v2-collage-mask.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 970px 850px;
  mask-size: 970px 850px;
  -webkit-mask-position: -260px 290px;
  mask-position: -260px 290px;
  mask-mode: alpha;
}

.collage-photo img,
.rot-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collage-1 {
  position: absolute;
  left: 148px;
  top: 573px;
  width: 135px;
  height: 135px;
}

.collage-2 {
  position: absolute;
  left: 148px;
  top: 708px;
  width: 373px;
  height: 150px;
}

.collage-3 {
  position: absolute;
  left: -10px;
  top: 858px;
  width: 414px;
  height: 166px;
}

/* Rotierte Collage-Teile: Wrapper = Bounding-Box, innen unrotiertes Element.
   Der Mask liegt auf dem WRAPPER (unrotiert, wie in Figma) —
   auf dem rotierten Element wuerde er mitdrehen. */
.rot-wrap {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rot {
  flex: none;
}

.collage-4-wrap {
  left: -1px;
  top: 521px;
  width: 149.284px;
  height: 337.44px;
}

.collage-4-rot {
  transform: rotate(-89.83deg);
}

.collage-4 {
  position: relative;
  width: 336.999px;
  height: 148.28px;
}

.collage-5-wrap {
  left: 232px;
  top: 667px;
  width: 415.615px;
  height: 415.615px;
}

.collage-5-rot {
  transform: rotate(-11.7deg);
}

.collage-5 {
  position: relative;
  width: 351.635px;
  height: 351.635px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.collage-6-wrap {
  left: -10px;
  top: 380px;
  width: 315.649px;
  height: 315.649px;
}

.collage-6-rot {
  transform: rotate(-19.16deg);
}

.collage-6 {
  position: relative;
  width: 248px;
  height: 248px;
  box-shadow: 0 4px 30px 1px rgba(0, 0, 0, 0.3);
}

/* ===== vladik: Portrait rechts (3:40) =====
   Alpha-Mask = geblurte Ellipse (Ellipse 4) — weicher Auslauf unten */

.vladik {
  position: absolute;
  left: 976px;
  top: 327px;
  width: 456px;
  height: 587px;
}

.vladik-photo {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 433px;
  height: 577px;
  -webkit-mask-image: url("img/v2-vladik-mask.svg");
  mask-image: url("img/v2-vladik-mask.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 674.6px 553.6px;
  mask-size: 674.6px 553.6px;
  -webkit-mask-position: -125.3px 11.7px;
  mask-position: -125.3px 11.7px;
  mask-mode: alpha;
}

.vladik-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== header (3:55) ===== */

/* Traeger fuer den mitscrollenden Header.
 * Eigenes Element, weil .header sein `translate` schon fuer die
 * Einblend-Animation braucht — eine laufende Animation schlaegt Inline-Styles,
 * das Sticky-Offset wuerde also wirkungslos verpuffen.
 * Liegt auf 0/0 mit Hoehe 0, damit die Figma-Koordinaten von .header
 * unveraendert dagegen aufloesen. */
.header-dock {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  z-index: 60;
  will-change: translate;
}

.header {
  position: absolute;
  left: 296px;
  top: 45px;
  width: 893px;
  height: 83px;
  transform: scale(0.85);
  transform-origin: top center;
  border: 1px solid #c1c1c1;
  border-radius: 15px;
  overflow: hidden;
  /* Figma: radialer Gradient (SVG, userSpaceOnUse) mit Fill-Opacity 0.24,
     Alpha hier in die Stops gebacken */
  background-image: radial-gradient(485.5px 45.125px at 446.5px 41.5px,
    rgba(255, 255, 255, 0.24) 0%,
    rgba(212, 232, 254, 0.24) 25%,
    rgba(169, 208, 253, 0.24) 50%,
    rgba(126, 185, 251, 0.24) 75%,
    rgba(83, 161, 250, 0.24) 100%);
}

.header .logo {
  position: absolute;
  left: 19px;
  top: -12px;
  width: 106px;
  height: 106px;
  object-fit: cover;
  box-shadow: 0 4px 23.5px -18px rgba(255, 255, 255, 0.25);
}

.nav-link {
  position: absolute;
  top: 40.5px;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.03;
  white-space: nowrap;
  color: rgba(255, 243, 243, 0.87);
  text-decoration: none;
}

.nav-home {
  left: 295px;
}

.nav-leistungen {
  left: 422.5px;
}

.nav-kontakt {
  left: 558.5px;
}

/* ===== Buttons (3:64 Header / 18:87 CTA) ===== */

.btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  overflow: hidden;
  background: #53a1fa;
  box-shadow:
    0 -2px 2.8px rgba(0, 0, 0, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.25),
    inset 0 -2px 4px rgba(0, 0, 0, 0.1),
    inset 0 4px 3.6px rgba(255, 255, 255, 0.25);
  font-weight: 700;
  line-height: 1.03;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.76);
  text-decoration: none;
}

.btn-header {
  left: 680px;
  top: 19px;
  width: 196px;
  height: 46px;
  font-size: 15px;
}

.btn-cta {
  left: 588px;
  top: 583px;
  width: 264.174px;
  height: 62px;
  font-size: 21px;
  transform: scale(0.85);
  transform-origin: top center;
}

/* ===== Hero-Intro-Animation (Seitenaufruf) =====
   Nutzt die eigenstaendige CSS-`translate`-Property statt `transform`,
   damit sie sich mit den schon vorhandenen transform:scale()/rotate()
   auf denselben Elementen ueberlagert statt sie zu ersetzen. */

@keyframes vsIn {
  from { opacity: 0; }
  to { opacity: 1; translate: 0 0; }
}

.header,
.headline-group,
.badge-insta,
.badge-tiktok,
.collage-group,
.vladik,
.btn-cta {
  animation: vsIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Sobald der Header die Hero verlaesst, steht er ueber hellen Sections.
 * Die Nav-Links sind fast weiss (fuer den blauen Hero gebaut) — ohne eigene
 * Flaeche waeren sie dort unlesbar. Nur Farben/Schatten animieren, NICHT
 * translate: das gehoert der Einblend-Animation. */
.header {
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.header-dock.ist-gescrollt .header {
  background-image: none;
  background-color: rgba(31, 88, 163, 0.88);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px rgba(14, 44, 88, 0.22);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Die Wortmarke ist schwarz und verschwindet auf dem dunklen Blau.
   brightness(0) macht sie komplett schwarz, invert(1) dreht sie auf Weiss —
   funktioniert unabhaengig davon, welche Graustufen im PNG stecken. */
.header .logo {
  transition: filter 0.25s ease;
}

.header-dock.ist-gescrollt .logo {
  filter: brightness(0) invert(1);
}

.header { translate: 0 -30px; animation-delay: 0.05s; }
.collage-group { translate: -60px 0; animation-delay: 0.2s; }
.vladik { translate: 60px 0; animation-delay: 0.2s; }
.headline-group { translate: 0 24px; animation-delay: 0.35s; }
.badge-tiktok { translate: 0 20px; animation-delay: 0.55s; }
.badge-insta { translate: 0 20px; animation-delay: 0.62s; }
.btn-cta { translate: 0 20px; animation-delay: 0.7s; }

.header,
.headline-group,
.badge-insta,
.badge-tiktok,
.collage-group,
.vladik,
.btn-cta {
  animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
  .header,
  .headline-group,
  .badge-insta,
  .badge-tiktok,
  .collage-group,
  .vladik,
  .btn-cta {
    animation: none;
    translate: 0 0;
  }
}

/* ===== Scroll-Reveal fuer Karten =====
   Lange Dauer + weiche Ease-Out-Kurve, damit es ruhig wirkt statt zu poppen.
   Nutzt die eigenstaendige translate-Property (kollidiert nicht mit transform). */

.reveal {
  opacity: 0;
  translate: 0 48px;
  transition:
    opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    translate 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, translate;
}

.reveal.is-in {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
}

/* ===== section-leistungen (3:81, 1440x1545) ===== */

.leistungen {
  height: 1545px;
}

.lst-headline {
  position: absolute;
  left: 50%;
  top: 73px;
  transform: translateX(-50%);
  width: 1072px;
  margin: 0;
  font-weight: 900;
  font-size: 59px;
  line-height: 1.03;
  text-align: center;
  color: #ffffff;
  text-shadow: 1px 6px 34.3px #080808;
}

.lst-subheadline {
  position: absolute;
  left: 50%;
  top: 139px;
  transform: translateX(-50%);
  width: 1072px;
  margin: 0;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.03;
  text-align: center;
  color: #a4a4a4;
}

/* ---- Karten-Grundgeruest ---- */

.svc-card {
  position: absolute;
  width: 1208px;
  height: 355px;
  border: 0.3px solid #000000;
  border-radius: 15px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.93);
}

.svc-card-1 { left: 116px; top: 249px; }
.svc-card-2 { left: 124px; top: 657px; }
.svc-card-3 { left: 132px; top: 1065px; }

.svc-inner {
  position: absolute;
  overflow: hidden;
  border-radius: 15px;
  background-image: linear-gradient(180deg, rgba(83, 161, 250, 0.01) 20.149%, #53a1fa 100%);
}

.svc-inner-1 { left: 8px; top: 10px; width: 1192px; height: 335px; }
.svc-inner-2 { left: 8px; top: 8px; width: 1192px; height: 340px; }
.svc-inner-3 { left: 7.7px; top: 9.7px; width: 1192px; height: 335px; }

.svc-title {
  position: absolute;
  margin: 0;
  text-align: center;
  font-weight: 900;
  font-size: 44px;
  line-height: 1.15;
  color: #ffffff;
  text-shadow: 0 4px 9.5px rgba(0, 0, 0, 0.71);
  /* Einzeilig erzwingen. Zwei der Boxen aus Figma sind 3 bzw. 5 Pixel zu
     schmal fuer ihren Text — sie brachen um und schoben sich in den Absatz
     darunter. Die Box zu verbreitern wuerde den Titel verschieben (er ist
     zentriert); nowrap laesst die optische Mitte exakt stehen und ist
     unabhaengig davon, wie breit die Schrift auf dem Geraet des Besuchers
     rendert. Platz nach rechts ist reichlich da (gemessen 692-1148px). */
  white-space: nowrap;
}

.svc-text {
  position: absolute;
  margin: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
  color: #ffffff;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

.svc-checklist {
  position: absolute;
}

.svc-col {
  position: absolute;
  top: 0;
}

.svc-row {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 24px;
  margin-bottom: 23px;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.03;
  color: #ffffff;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

.svc-row:last-child {
  margin-bottom: 0;
}

.svc-row .chk {
  width: 26px;
  height: 24px;
  flex: none;
}

/* Bounding-Box (unrotiert) + rotiertes Element darin zentriert,
   gleiches Prinzip wie die Hero-Collage. */
.svc-imgbox,
.svc-icon-black {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svc-imgrot {
  flex: none;
}

.svc-imgbox img {
  object-fit: cover;
}

.svc-photo-blur {
  filter: blur(2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
}

.svc-photo-border {
  border: 1px solid #53a1fa;
  filter: blur(2px);
}

/* Schatten folgt der Icon-Silhouette statt der rechteckigen Bildbox
   (sonst zeigt sich bei transparenten PNGs ein sichtbares Schatten-Quadrat) */
.svc-icon-shadow {
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

.svc-icon-black-shape {
  width: 182px;
  height: 178.78px;
  border-radius: 41px;
  background: #000000;
  box-shadow: 0 4px 4.8px rgba(255, 255, 255, 0.25);
}

/* Facebook-Icon-PNG hat undurchsichtige weisse Ecken -> auf den Kreis clippen */
.svc-icon-circle {
  border-radius: 50%;
  overflow: hidden;
  filter: drop-shadow(0 4px 8.8px rgba(0, 0, 0, 0.25));
}

/* ---- Play-Button auf den Video-Vorschaubildern (Karte 2) ---- */

.svc-play {
  position: absolute;
  width: 70px;
  height: 70px;
}

.svc-play .play-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.svc-play .play-icon {
  position: absolute;
  left: 26px;
  top: 22px;
  width: 23px;
  height: 26px;
}

.btn-leistungen-cta {
  left: 615px;
  top: 1473px;
  width: 234px;
  height: 55px;
  font-size: 20px;
}

/* ===== section-ueber-uns (18:85, 1440x922) ===== */

.ueber-uns {
  height: 922px;
}

/* Wrapper um Foto + Visitenkarte — wird per JS mitgescrollt (sticky) */
.au-person {
  position: absolute;
  left: 101px;
  top: 139px;
  width: 285px;
  height: 414px;
  will-change: transform;
}

.au-photo {
  position: absolute;
  left: 0;
  top: 0;
  width: 285px;
  height: 414px;
  border: 1px solid #000000;
  border-radius: 10px;
  overflow: hidden;
}

.au-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.au-card {
  position: absolute;
  left: 0;
  top: 233px;
  width: 285px;
  height: 181px;
  border: 1px solid rgba(255, 255, 255, 0.27);
  border-radius: 10px;
  overflow: hidden;
  background: #53a1fa;
  box-shadow: inset 0 4px 4.7px rgba(255, 255, 255, 0.57);
}

.au-tag {
  position: absolute;
  left: 29px;
  top: 22px;
  height: 13px;
  padding: 0 7px;
  display: flex;
  align-items: center;
  border-radius: 26px;
  background: #53a1fa;
  box-shadow: inset 0 3px 4px rgba(255, 255, 255, 0.25);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: -0.4px;
  color: #ffffff;
  white-space: nowrap;
}

.au-name {
  position: absolute;
  left: 33px;
  top: 53px;
  margin: 0;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.4px;
  color: #ffffff;
  white-space: nowrap;
}

.au-role {
  position: absolute;
  left: 33px;
  top: 77px;
  margin: 0;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.28px;
  color: #ffffff;
  white-space: nowrap;
}

.au-divider {
  position: absolute;
  left: 37px;
  top: 104px;
  width: 211.5px;
}

.au-divider img {
  width: 100%;
  display: block;
}

.au-cta {
  position: absolute;
  left: 33px;
  top: 118px;
  width: 204px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: #000000;
  box-shadow:
    0 -2px 2.8px rgba(0, 0, 0, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.25),
    inset 0 -5px 4.7px rgba(0, 0, 0, 0.22),
    inset 0 4px 3.6px rgba(255, 255, 255, 0.54);
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
  text-decoration: none;
  text-align: center;
}

.au-quote {
  position: absolute;
  left: 498px;
  margin: 0;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.25;
  letter-spacing: -1.08px;
  color: #000000;
  white-space: nowrap;
}

/* Wort-fuer-Wort-Reveal beim Scrollen: grau -> schwarz.
   Startfarbe nur, wenn JS das Splitting uebernommen hat (.is-split),
   sonst bleibt der Text normal schwarz lesbar. */
.au-quote.is-split {
  color: #c9cdd3;
}

.au-quote .w {
  color: inherit;
  transition: color 120ms linear;
}

/* ===== section-testimonials (24:143, 1440x902) ===== */

.testimonials {
  height: 902px;
}

.tm-card {
  position: absolute;
  width: 1140px;
  height: 336px;
  border: 1px solid #ffffff;
  border-radius: 9px;
  overflow: hidden;
  background-image: linear-gradient(73.75deg, rgba(38, 139, 254, 0.95) 0%, rgba(67, 155, 255, 0.95) 99.957%);
  box-shadow:
    inset 0 -4px 4px 2px rgba(255, 255, 255, 0.25),
    inset 0 5px 7.5px 3px rgba(255, 255, 255, 0.25);
}

.tm-imgbox {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tm-imgrot {
  flex: none;
}

.tm-imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tm-masked {
  position: absolute;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-mode: alpha;
}

.tm-masked img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tm-stars {
  position: absolute;
  width: 168px;
  height: 58px;
}

.tm-stars img {
  position: absolute;
  top: 0;
  width: 58px;
  height: 58px;
}

.tm-quote {
  position: absolute;
  width: 900px;
  margin: 0;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.55;
  letter-spacing: -0.57px;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 4px 4px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

.tm-name {
  position: absolute;
  margin: 0;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.57px;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

.tm-role {
  position: absolute;
  margin: 0;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.45px;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

/* ===== section-google-bewertungen (48:60) — normales Auto-Layout, kein Fixed-Canvas ===== */

.google-bewertungen {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 56px;
  padding: 64px 80px;
  background: #ffffff;
}

.gr-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.gr-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gr-logo {
  width: 64px;
  height: 32px;
  object-fit: cover;
}

.gr-brand-name {
  margin: 0;
  font-weight: 700;
  font-size: 22px;
  color: #1a1a1a;
}

.gr-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.gr-stars-black {
  font-size: 20px;
  color: #000000;
}

.gr-rating-text {
  font-weight: 500;
  font-size: 15px;
  color: #555555;
}

.gr-headline {
  margin: 0;
  font-weight: 900;
  font-size: 32px;
  color: #111111;
}

.gr-cards {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

.gr-card {
  width: 374px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid #e8eaed;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.07);
}

.gr-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.gr-avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
  color: #ffffff;
}

.gr-who {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.gr-name {
  margin: 0;
  font-weight: 600;
  font-size: 15px;
  color: #1a1a1a;
}

.gr-src {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #666666;
}

.gr-src img {
  width: 14px;
  height: 14px;
}

.gr-stars-row {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.gr-stars-gold {
  font-size: 16px;
  color: #fbbc05;
}

.gr-stars-meta {
  font-size: 12px;
  color: #888888;
}

.gr-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #3c3c3c;
}

/* ===== section-kontakt (28:187, 1440x982) ===== */

.kontakt {
  height: 982px;
}

.kt-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 1024px;
  background-image: linear-gradient(7.94deg, #fdfdff 16.702%, #62acff 67.16%);
}

.kt-headline {
  position: absolute;
  left: 114px;
  top: 220px;
  width: 483px;
  margin: 0;
  font-weight: 900;
  font-size: 50px;
  line-height: 1.03;
  color: #ffffff;
  text-shadow: 1px 6px 34.3px #080808;
}

.kt-contact {
  position: absolute;
  left: 121px;
  top: 352px;
  width: 460px;
  margin: 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.41;
  color: #ffffff;
  text-shadow: 1px 6px 34.3px #080808;
  white-space: nowrap;
}

.kt-contact a {
  color: #ffffff;
  text-decoration: underline;
}

.kt-feature {
  position: absolute;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(2px);
}

.kt-feature-icon {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

/* Text sitzt auf gleicher Hoehe wie sein Icon und wird darin zentriert —
   so bleibt es mittig, egal ob der Text zwei oder drei Zeilen braucht. */
.kt-feature-text {
  position: absolute;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.41;
  color: #ffffff;
  text-shadow: 1px 6px 34.3px #080808;
}

.kt-card {
  position: absolute;
  left: 790px;
  top: 137px;
  width: 559px;
  height: 750px;
  border-radius: 19px;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    0 0 4px rgba(0, 0, 0, 0.25),
    inset 0 -2px 4px #6b6b6b,
    inset 0 2px 2.2px 1px #6b6b6b;
}

.kt-field {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 477px;
}

.kt-field-half {
  width: 213px;
}

.kt-field label {
  font-weight: 800;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.82);
}

.kt-field input,
.kt-field textarea {
  border: 1px solid #989393;
  border-radius: 9px;
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.7);
  padding: 0 14px;
  background: #ffffff;
}

.kt-field input::placeholder,
.kt-field textarea::placeholder {
  color: rgba(0, 0, 0, 0.46);
}

.kt-field input {
  height: 35px;
}

.kt-field-textarea {
  height: 185px;
}

.kt-field textarea {
  height: 185px;
  padding: 10px 14px;
  resize: none;
  line-height: 1.4;
}

.kt-submit {
  position: absolute;
  left: 40px;
  top: 606.8px;
  width: 477px;
  height: 42px;
  font-size: 21px;
  border: none;
  cursor: pointer;
}

.kt-legal {
  position: absolute;
  left: 49px;
  top: 660px;
  width: 459px;
  margin: 0;
  font-weight: 700;
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
  color: #000000;
}

/* ===== section-footer (24:167, 1440x302) ===== */

/* Am Desktop bewusst ohne eigenen Verlauf — der Footer nimmt den Grundton
   aus .page > section (#fdfdff). Der Blau-Verlauf gilt nur auf dem Handy. */
.footer {
  height: 302px;
}

/* Rechtliches ueber dem Wortmark — der Schriftzug laeuft unten aus dem Bild,
   darunter waere kein Platz mehr. */
.footer-legal {
  position: absolute;
  left: 0;
  top: 56px;
  width: 1440px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  font-size: 16px;
  color: #8c9bb0;
}

.footer-legal a {
  color: #6f8199;
  text-decoration: none;
  transition: color 180ms ease;
}

.footer-legal a:hover {
  color: #2c3e56;
  text-decoration: underline;
}

.footer-wordmark {
  position: absolute;
  left: 64px;
  top: 171px;
  width: 1346px;
  margin: 0;
  font-weight: 800;
  font-size: 215px;
  line-height: 1.03;
  text-align: center;
  white-space: nowrap;
  background-image: linear-gradient(180deg, #ffffff 0.2%, #53a1fa 99.8%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================================================================
   HANDY-VERSION (bis 860px)
   Das feste 1440er-Canvas wird hier aufgeloest: .page skaliert nicht mehr,
   die Sections laufen im normalen Fluss und alles stapelt sich untereinander.
   ========================================================================= */

@media (max-width: 860px) {

  /* --- Grundgeruest --- */
  .hero-backdrop { display: none; }

  .hero-viewport {
    height: auto !important;
    overflow: visible;
  }

  .page {
    position: static;
    width: 100%;
    transform: none !important;
  }

  .page > section {
    width: 100%;
    height: auto;
  }

  /* Manuelle Zeilenumbrueche raus — auf dem Handy bricht der Text selbst um */
  .lst-subheadline br,
  .svc-text br,
  .au-quote br,
  .tm-quote br,
  .tm-role br,
  .kt-contact br,
  .kt-feature-text br,
  .kt-legal br { display: none; }

  .svc-text,
  .au-quote,
  .tm-quote,
  .tm-role,
  .kt-contact,
  .headline,
  .svc-row { white-space: normal; }

  /* --- Hero --- */
  /* .page > section ist spezifischer als .hero -> hier ebenfalls qualifizieren */
  .page > section.hero {
    height: 752px;
    background-image: linear-gradient(180deg, #4f9cf7 0%, #7fb6fb 46%, #cfe3ff 78%, #fdfdff 100%);
  }

  .bg-blobs,
  .collage-group,
  .headline-underline { display: none; }

  .header {
    left: 12px;
    top: 14px;
    width: calc(100% - 24px);
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 0 4px;
    transform: none;
    border-radius: 14px;
  }

  .header nav { display: none; }

  .header .logo {
    position: static;
    width: 54px;
    height: 54px;
  }

  .btn-header {
    position: static;
    width: auto;
    height: 38px;
    padding: 0 14px;
    font-size: 13px;
  }

  .headline-group {
    left: 16px;
    top: 128px;
    width: calc(100% - 32px);
    transform: none;
  }

  .headline {
    position: static;
    transform: none;
    width: 100%;
    font-size: 34px;
    line-height: 1.12;
    text-shadow: 0 4px 18px rgba(8, 8, 8, 0.45);
  }

  .badge-tiktok,
  .badge-insta {
    top: 268px;
    transform: scale(0.62);
    transform-origin: top left;
  }

  .badge-tiktok { left: calc(50% - 130px); }
  /* Die Insta-Box ist flacher als die TikTok-Box (kein grosses Icon oben),
     daher 13px tiefer ansetzen, damit beide Pillen auf einer Linie sitzen. */
  .badge-insta  { left: calc(50% + 8px); top: 281px; }

  .btn-cta {
    left: 50%;
    top: 338px;
    width: 236px;
    height: 52px;
    font-size: 17px;
    transform: translateX(-50%);
  }

  /* Seitenverhaeltnis exakt wie die Bilddatei (1082x1442 = 0.75), damit die
     Figur inkl. verschraenkter Arme komplett zu sehen ist und nichts abschneidet */
  .vladik {
    left: 50%;
    top: auto;
    bottom: 0;
    width: 262px;
    height: 349px;
    transform: translateX(-50%);
  }

  /* Der Figma-Mask ist auf 433x577 ausgelegt — mobil stattdessen weicher Auslauf */
  .vladik-photo {
    left: 0;
    top: 0;
    width: 262px;
    height: 349px;
    /* Dieselbe weiche Ellipsen-Maske wie am Desktop, nur proportional
       herunterskaliert (Faktor 262/433 = 0.605) — ein linearer Verlauf ergibt
       eine sichtbare waagerechte Kante, die Ellipse loest sich rundum auf. */
    -webkit-mask-image: url("img/v2-vladik-mask.svg");
    mask-image: url("img/v2-vladik-mask.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 408.2px 335px;
    mask-size: 408.2px 335px;
    -webkit-mask-position: -75.8px 7.1px;
    mask-position: -75.8px 7.1px;
    mask-mode: alpha;
  }

  .vladik-photo img {
    object-fit: contain;          /* nichts beschneiden */
    object-position: bottom center;
  }

  /* --- Leistungen --- */
  .leistungen { padding: 52px 16px 58px; }

  .lst-headline,
  .lst-subheadline {
    position: static;
    transform: none;
    width: 100%;
  }

  .lst-headline {
    font-size: 30px;
    text-shadow: 0 3px 14px rgba(8, 8, 8, 0.5);
  }

  .lst-subheadline {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.4;
  }

  .svc-card {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 22px;
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.12);
  }

  .svc-inner {
    position: static;
    width: auto;
    height: auto;
    padding: 0 16px 22px;
    border-radius: 12px;
    /* Der Desktop-Verlauf ist auf 335px Kartenhoehe gerechnet — mobil ist die
       Karte dreimal so hoch, sonst liefe das Blau komplett ins Weisse. */
    background-image: linear-gradient(180deg, #8dc0fb 0%, #6aaefa 45%, #53a1fa 100%);
    display: flex;
    flex-direction: column;
  }

  /* In Karte 2 stehen die Bilder im HTML hinter dem Text — mobil immer nach oben */
  .svc-media { order: -1; }

  /* Deko-Bilder: Original-Koordinaten bleiben, Gruppe wird per JS skaliert */
  .svc-media {
    position: relative;
    width: calc(100% + 32px);
    margin: 0 -16px 16px;
    overflow: hidden;
  }

  .svc-media-inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 1192px;
    height: 335px;
    transform-origin: top left;
  }

  .svc-title,
  .svc-text,
  .svc-checklist {
    position: static;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
  }

  .svc-title {
    font-size: 25px;
    line-height: 1.15;
    text-align: left;
    /* Auf dem Handy muss der Titel umbrechen duerfen — das nowrap vom Desktop
       wuerde ihn aus der Karte schieben. */
    white-space: normal;
  }

  .svc-text {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.4;
  }

  .svc-checklist {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .svc-col {
    position: static;
    left: auto !important;
  }

  .svc-row {
    height: auto;
    margin-bottom: 12px;
    gap: 12px;
    font-size: 15px;
    align-items: flex-start;
  }

  .svc-row .chk { width: 20px; height: 19px; margin-top: 2px; }

  .btn-leistungen-cta {
    position: static;
    display: flex;
    width: 236px;
    height: 52px;
    margin: 26px auto 0;
    font-size: 17px;
  }

  /* --- Ueber uns --- */
  .ueber-uns { padding: 52px 16px 56px; }

  /* Volle Spaltenbreite wie die Zitat-Karte darunter. Statt fester Offsets
     laeuft der Block hier im Fluss: Foto oben, Info-Karte ueberlappt es unten
     um ihre volle Hoehe (181px) — derselbe Versatz wie im Figma-Entwurf. */
  .au-person {
    position: relative;
    left: auto;                /* sonst wirkt der Desktop-Versatz (101px) weiter */
    top: auto;
    width: 100%;
    height: auto;
    margin: 0 0 26px;
    transform: none !important;
  }

  .au-photo {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 285 / 414;
  }

  .au-card {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin-top: -181px;
  }

  .au-divider { width: calc(100% - 74px); }
  .au-divider img { width: 100%; }

  .au-quote {
    position: static;
    width: 100% !important;
    font-size: 17px;
    line-height: 1.45;
    letter-spacing: -0.3px;
    margin-bottom: 18px;
  }

  /* --- Testimonials --- */
  .testimonials { padding: 8px 16px 44px; }

  .tm-item {
    position: relative;
    margin-top: 18px;
    padding: 18px 16px 22px;
    border-radius: 14px;
    overflow: hidden;
    background-image: linear-gradient(160deg, rgba(38, 139, 254, 0.97) 0%, rgba(67, 155, 255, 0.97) 100%);
    box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.22);
  }

  .tm-card {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: 100%;
    height: 165px;
    margin-bottom: 12px;
    border: 0;
    border-radius: 10px;
    background: none;
    box-shadow: none;
    overflow: hidden;
  }

  /* Die grossen Mockups sind fuer 1140px Kartenbreite gebaut — mobil nur das Portraet */
  .tm-card .tm-imgbox { display: none; }

  .tm-card > .tm-masked {
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%);
  }

  .tm-stars,
  .tm-quote,
  .tm-name,
  .tm-role {
    position: static;
    left: auto !important;
    top: auto !important;
    width: auto;
  }

  .tm-stars { width: 130px; height: 46px; margin-bottom: 6px; }
  .tm-stars img { width: 46px; height: 46px; }
  .tm-stars img:nth-child(1) { left: 0; }
  .tm-stars img:nth-child(2) { left: 21px; }
  .tm-stars img:nth-child(3) { left: 44px; }
  .tm-stars img:nth-child(4) { left: 67px; }
  .tm-stars img:nth-child(5) { left: 88px; }

  .tm-quote { font-size: 15px; line-height: 1.5; }
  .tm-name  { margin-top: 14px; font-size: 17px; }
  .tm-role  { margin-top: 4px; font-size: 14px; }

  /* --- Google-Bewertungen --- */
  .google-bewertungen { padding: 44px 16px; gap: 30px; }
  .gr-headline { font-size: 24px; text-align: center; }
  .gr-rating { flex-wrap: wrap; justify-content: center; white-space: normal; text-align: center; }
  .gr-cards { flex-direction: column; gap: 14px; }
  .gr-card { width: 100%; padding: 20px; }

  /* --- Kontakt --- */
  .kontakt { padding: 0; }

  .kt-bg {
    position: static;
    width: 100%;
    height: auto;
    /* Unten bewusst knapp: darunter kommt sofort der Footer mit eigenem
       Innenabstand. Mit den urspruenglichen 56px klaffte zwischen Formular
       und Impressum-Zeile ein leeres, fast weisses Band. */
    padding: 52px 16px 20px;
    background-image: linear-gradient(180deg, #8fc3ff 0%, #bcdaff 55%, #f3f8ff 100%);
  }

  .kt-headline,
  .kt-contact {
    position: static;
    width: 100%;
  }

  .kt-headline { font-size: 30px; line-height: 1.1; }

  .kt-contact {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.45;
  }

  /* Icon + Text als saubere Flex-Zeile statt Float-Gebastel */
  .kt-feature-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 22px;
  }

  .kt-feature {
    position: static;
    flex: none;
    width: 46px !important;
    height: 46px !important;
    border-radius: 13px;
    margin: 2px 0 0;
  }

  .kt-feature-text {
    position: static;
    width: auto !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    display: block;
    font-size: 15px;
    line-height: 1.45;
    text-shadow: none;          /* der Glow matscht auf hellem Blau */
  }

  .kt-card {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 34px;
    padding: 20px 16px 24px;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
  }

  .kt-field {
    position: static;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    margin-bottom: 14px;
  }

  .kt-submit {
    position: static;
    width: 100%;
    height: 50px;
    margin-top: 4px;
    font-size: 17px;
  }

  .kt-legal {
    position: static;
    width: 100%;
    margin-top: 12px;
    font-size: 11px;
  }

  /* --- Footer --- */
  /* Beim Ueberscrollen unten zeigt das Handy die Flaeche hinter der Seite.
     Ohne das hier ist die weiss und blitzt als heller Streifen unter dem
     blauen Footer auf.
     Bewusst auf html UND body: welches der beiden ein mobiler Browser fuer
     die Flaeche ausserhalb des Dokuments heranzieht, ist nicht ueberall
     gleich. Gefahrlos, weil jede Section einen eigenen deckenden Hintergrund
     hat — sichtbar wird die Farbe nur unterhalb des Footers. */
  html,
  body {
    background: #c9ddff;
  }

  .page > section.footer {
    height: auto;
    padding: 18px 16px 10px;
    background-image: linear-gradient(180deg, #f3f8ff 0%, #e4eeff 55%, #c9ddff 100%);
  }

  .footer-legal {
    position: static;
    width: 100%;
    font-size: 14px;
    gap: 10px;
  }

  .footer-wordmark {
    position: static;
    width: 100%;
    margin-top: 16px;
    font-size: 12.5vw;          /* skaliert mit dem Geraet, klebt nie am Rand */
    letter-spacing: -1.5px;
  }
}

/* --- Handy-Feinschliff: Typo ruhiger, weniger Glow, weniger Umbrueche --- */
@media (max-width: 860px) {

  /* Der starke Figma-Glow ist fuer weisse Schrift auf kraeftigem Blau gedacht.
     Auf den hellen Mobil-Flaechen wirkt er nur schmutzig — dort reduzieren. */
  .lst-headline,
  .kt-headline,
  .kt-contact,
  .kt-feature-text,
  .au-quote {
    text-shadow: none;
  }

  .lst-headline {
    color: #10233d;             /* weiss auf fast-weiss war kaum lesbar */
    font-size: 28px;
    letter-spacing: -0.6px;
  }

  .lst-subheadline {
    max-width: 30em;
    margin-inline: auto;
    color: #7b8798;
  }

  .kt-headline {
    font-size: 29px;
    letter-spacing: -0.5px;
  }

  .kt-contact {
    font-size: 15px;
    line-height: 1.5;
  }

  /* Ueberschriften in den Karten duerfen etwas enger stehen */
  .svc-title {
    font-size: 24px;
    letter-spacing: -0.4px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  }

  .svc-text {
    font-size: 14.5px;
    line-height: 1.45;
    text-shadow: none;
    opacity: 0.95;
  }

  .svc-row {
    font-size: 14.5px;
    text-shadow: none;
  }

  /* Zitate: etwas kleiner, dafuer ruhigerer Zeilenfall */
  .au-quote {
    font-size: 16.5px;
    line-height: 1.5;
  }

  .tm-quote {
    text-shadow: none;
    line-height: 1.55;
  }

  .tm-name,
  .tm-role { text-shadow: none; }

  /* Buttons: bequeme Tap-Groesse */
  .btn-header { height: 40px; }
  .au-cta { height: 46px; }
  .kt-field input { height: 42px; }
}

/* --- Handy: Testimonials als richtiges Zitat-Layout --------------------
   Vorher schwebte das Portrait frei in der Karte. Jetzt Raster:
   Sterne -> Zitat -> Person (rundes Bild links, Name/Rolle rechts daneben). */
@media (max-width: 860px) {

  .tm-item {
    display: grid;
    grid-template-columns: 118px 1fr;
    grid-template-rows: auto auto auto auto;
    column-gap: 16px;
    padding: 20px 18px 22px;
    border-radius: 16px;
  }

  .tm-stars {
    position: relative;
    grid-area: 1 / 1 / 2 / 3;
    width: 170px;
    height: 46px;
    margin-bottom: 10px;
  }

  .tm-stars img { width: 46px; height: 46px; }
  .tm-stars img:nth-child(1) { left: 0; }
  .tm-stars img:nth-child(2) { left: 30px; }
  .tm-stars img:nth-child(3) { left: 61px; }
  .tm-stars img:nth-child(4) { left: 92px; }
  .tm-stars img:nth-child(5) { left: 121px; }

  .tm-quote {
    grid-area: 2 / 1 / 3 / 3;
    margin-bottom: 20px;
    font-size: 15.5px;
    line-height: 1.55;
  }

  /* Portrait steht frei (kein Kreis) und blendet nach unten weich aus */
  .tm-card {
    grid-area: 3 / 1 / 5 / 2;
    align-self: end;
    width: 118px;
    height: 132px;
    margin: 0;
    border-radius: 0;
    overflow: visible;
    background: none;
  }

  /* Achtung: Die Masken-Werte stehen inline am Element (Desktop-Layout).
     Ohne !important auf JEDER Eigenschaft gewinnt die Inline-Angabe und der
     Verlauf wird in Originalgroesse an falscher Stelle gezeichnet — genau das
     ergab die harte Kante. Weiche Ellipse wie beim Hero-Portrait. */
  .tm-card > .tm-masked {
    position: absolute;
    left: 0 !important;
    top: 0 !important;
    width: 118px !important;
    height: 132px !important;
    transform: none;
    -webkit-mask-image: radial-gradient(130% 68% at 50% 30%, #000 54%, rgba(0, 0, 0, 0) 100%) !important;
    mask-image: radial-gradient(130% 68% at 50% 30%, #000 54%, rgba(0, 0, 0, 0) 100%) !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    -webkit-mask-position: 0 0 !important;
    mask-position: 0 0 !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
  }

  .tm-card > .tm-masked img {
    width: 100%;
    height: 100%;
    object-fit: contain;          /* freigestellte Figur nicht beschneiden */
    object-position: bottom center;
  }

  .tm-name {
    grid-area: 3 / 2 / 4 / 3;
    align-self: end;
    position: relative;
    top: 16px;                  /* sitzt sonst zu weit oben neben dem Portrait */
    margin: 0;
    font-size: 17px;
  }

  .tm-role {
    grid-area: 4 / 2 / 5 / 3;
    align-self: start;
    position: relative;
    top: 16px;
    margin: 3px 0 0;
    font-size: 14px;
    opacity: 0.9;
  }
}

/* --- Handy: harte Bildkante weich auslaufen lassen ---------------------
   Die Deko-Bilder werden oben in der Karte beschnitten — ohne Verlauf
   entsteht unten eine harte Schnittkante quer durchs Bild. */
@media (max-width: 860px) {
  .svc-media {
    -webkit-mask-image: linear-gradient(180deg, #000 62%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(180deg, #000 62%, rgba(0, 0, 0, 0) 100%);
  }
}

/* --- Handy: Ueber-uns als Karte statt nackter Text ---------------------
   Wort-fuer-Wort-Reveal ist auf dem kleinen Schirm unruhig — dort steht
   der Text ruhig in einem hellen Widget, in voller Lesefarbe. */
@media (max-width: 860px) {

  .ueber-uns {
    background-image: linear-gradient(180deg, #fdfdff 0%, #eef4ff 100%);
  }

  .au-quotes {
    padding: 22px 20px 24px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(28, 56, 96, 0.10);
    border: 1px solid rgba(28, 56, 96, 0.07);
  }

  /* Kein Graustufen-Reveal auf dem Handy */
  .au-quote,
  .au-quote.is-split,
  .au-quote .w {
    color: #16233a !important;
    transition: none;
  }

  .au-quote {
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 16px;
  }

  .au-quote:last-child { margin-bottom: 0; }
}

/* =========================================================================
   HERO-LEBEN: driftende Lichtschleier, Lichtkegel, schwebende Badges
   Alles rein additive Ebenen — das Figma-Layout bleibt unangetastet.
   ========================================================================= */

.hero-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: soft-light;
  opacity: 0.85;
}

.hero-aurora .au-blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}

.au-blob-1 {
  left: 4%;
  top: -18%;
  width: 780px;
  height: 620px;
  background: radial-gradient(circle at 40% 40%, #ffffff 0%, rgba(255, 255, 255, 0) 68%);
  animation: auDrift1 26s ease-in-out infinite;
}

.au-blob-2 {
  right: -6%;
  top: 6%;
  width: 700px;
  height: 640px;
  background: radial-gradient(circle at 50% 50%, #bfe0ff 0%, rgba(191, 224, 255, 0) 70%);
  animation: auDrift2 32s ease-in-out infinite;
}

.au-blob-3 {
  left: 26%;
  bottom: -22%;
  width: 900px;
  height: 560px;
  background: radial-gradient(circle at 50% 50%, #7fc4ff 0%, rgba(127, 196, 255, 0) 72%);
  animation: auDrift3 38s ease-in-out infinite;
}

@keyframes auDrift1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(70px, 40px, 0) scale(1.12); }
}

@keyframes auDrift2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
  50%      { transform: translate3d(-60px, 50px, 0) scale(0.94); }
}

@keyframes auDrift3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(50px, -40px, 0) scale(1.1); }
}

/* Lichtkegel unter dem Portrait — gibt der freigestellten Figur Boden */
.hero-spot {
  position: absolute;
  left: 1204px;
  top: 620px;
  width: 640px;
  height: 420px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at center,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.22) 42%,
    rgba(255, 255, 255, 0) 72%);
}

/* Badges atmen leicht — unterschiedliche Phasen, damit es nicht synchron wirkt.
   Laeuft ueber die eigenstaendige translate-Property, der Figma-scale bleibt. */
/* Badges stehen still — nur das Eintreten ist animiert */
.badge-tiktok {
  animation: vsIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

.badge-insta {
  animation: vsIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.62s both;
}

/* Sanfte Maus-Parallaxe (per JS gesetzt, hier nur der Uebergang) */
.hero-parallax {
  transition: translate 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .hero-aurora .au-blob,
  .badge-tiktok,
  .badge-insta { animation: none; }
  .hero-parallax { transition: none; }
}

@media (max-width: 860px) {
  /* Mobil kleinere Schleier, kein Lichtkegel (Portrait steht ohnehin unten auf) */
  .hero-aurora { opacity: 0.7; }
  .au-blob-1 { width: 420px; height: 340px; filter: blur(60px); }
  .au-blob-2 { width: 380px; height: 340px; filter: blur(60px); }
  .au-blob-3 { width: 460px; height: 300px; filter: blur(60px); }
  .hero-spot { display: none; }
}

/* --- Handy: Kontakt-Text auf die gleiche Kante wie der Formular-Inhalt ----
   Die weisse Formularkarte sitzt bei 16px, ihre Felder durch die Innenab-
   staende aber bei 32px. Ohne Angleichung springt die linke Kante im Blick. */
@media (max-width: 860px) {
  .kt-headline,
  .kt-contact {
    width: auto !important;
    margin-left: 16px;
    margin-right: 16px;
  }

  .kt-feature-row {
    margin-left: 16px;
    margin-right: 16px;
  }
}

/* --- Handy-only: Anpassungen, die am Desktop bewusst NICHT gelten ---------
   Der Desktop bleibt exakt auf dem Figma-Stand. */
@media (max-width: 860px) {

  /* Play-Buttons auf die Mitte ihres Thumbnails (Desktop behaelt Figma-Position) */
  .svc-play-1 { left: 831.2px !important; top: 148.6px !important; }
  .svc-play-2 { left: 1022.2px !important; top: 35.9px !important; }
  .svc-play-3 { left: 998.2px !important; top: 247.5px !important; }

  /* Google-Kopf: Markenzeile weg, Bewertung unter die Headline */
  .gr-brand { display: none; }
  .gr-headline { order: 1; }
  .gr-rating { order: 2; }
}

/* =========================================================================
   Schwebende Glas-Widgets im Hero (um das Portrait)
   Optik angelehnt an die TikTok/Instagram-Pillen, nur blau getoent.
   Eintritt laeuft ueber opacity, das Schweben ueber transform, die
   Maus-Parallaxe ueber translate — drei getrennte Properties, kein Konflikt.
   ========================================================================= */

.wg {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background-image: linear-gradient(155deg,
    rgba(255, 255, 255, 0.46) 0%,
    rgba(190, 222, 255, 0.30) 48%,
    rgba(120, 180, 250, 0.24) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    0 14px 34px rgba(16, 60, 120, 0.20),
    0 2px 6px rgba(16, 60, 120, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  color: #10305c;
  text-align: left;
  animation:
    wgIn 0.9s ease both,
    wgFloat 7s ease-in-out infinite;
}

.wg-value {
  font-weight: 800;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: #0d2b52;
}

.wg-label {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.25;
  color: rgba(13, 43, 82, 0.72);
}

/* --- Positionen (1440er Canvas) --- */

/* Nur auf dem Handy im Einsatz */
.wg-projekte { display: none; }

.wg-google {
  left: 1214px;
  top: 700px;
  width: 172px;
  height: 172px;
  gap: 1px;
  animation-delay: 1.05s, 2.2s;
}

.wg-google-logo {
  width: 26px;
  height: 26px;
  margin-bottom: 6px;
}

.wg-google .wg-value { font-size: 34px; }

.wg-stars {
  font-size: 15px;
  letter-spacing: 1px;
  color: #fbbc05;
}

@keyframes wgIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes wgFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

@media (prefers-reduced-motion: reduce) {
  .wg { animation: none; opacity: 1; }
}

/* Handy: nur das Google-Widget, kompakter und ueber der Schulter */
@media (max-width: 860px) {
  .wg-projekte {
    display: flex;
    left: 14px;
    top: 588px;
    width: 108px;
    height: 108px;
    padding: 12px 13px;
    border-radius: 17px;
    animation-delay: 1.15s, 2.9s;
  }

  .wg-projekte .wg-value { font-size: 24px; }
  .wg-projekte .wg-label { font-size: 11px; }

  .wg-google {
    left: auto;
    right: 14px;
    top: 470px;
    width: 128px;
    height: 128px;
    padding: 12px 13px;
    border-radius: 18px;
  }

  .wg-google-logo { width: 20px; height: 20px; margin-bottom: 4px; }
  .wg-google .wg-value { font-size: 26px; }
  .wg-google .wg-stars { font-size: 12px; }
  .wg-google .wg-label { font-size: 11px; }
}

/* --- Handy: Widgets erscheinen erst beim Scrollen ------------------------
   Startzustand versteckt, per .is-revealed eingeblendet. Bewusst ueber
   translate/scale/filter statt transform — so bleibt transform frei fuer das
   Schweben, beide laufen ohne sich zu ueberschreiben. */
@media (max-width: 860px) {
  .wg {
    animation: wgFloat 7s ease-in-out infinite;   /* kein wgIn mehr */
    opacity: 0;
    translate: 0 34px;
    scale: 0.82;
    filter: blur(8px);
    transition:
      opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
      translate 0.95s cubic-bezier(0.16, 1, 0.3, 1),
      scale 0.95s cubic-bezier(0.16, 1, 0.3, 1),
      filter 0.7s ease-out;
  }

  .wg.is-revealed {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    filter: blur(0);
  }

  /* Google zuerst, das kleinere kurz danach */
  .wg-google { transition-delay: 0s; }
  .wg-projekte { transition-delay: 0.14s; }

  @media (prefers-reduced-motion: reduce) {
    .wg {
      opacity: 1;
      translate: 0 0;
      scale: 1;
      filter: none;
      transition: none;
      animation: none;
    }
  }
}

/* ===== Kontaktformular: Honeypot + Rueckmeldung ===== */

/* Fuer Menschen unsichtbar, fuer Bots ein Koeder. Kein display:none —
   manche Bots ueberspringen versteckte Felder gezielt. */
.kt-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.kt-status {
  position: absolute;
  left: 40px;
  top: 690px;
  width: 477px;
  margin: 0;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.kt-status.ist-gut { color: #0f7a3d; }
.kt-status.ist-fehler { color: #b4242b; }

.kt-legal a { color: inherit; }

.kt-submit:disabled { opacity: 0.65; cursor: default; }

@media (max-width: 860px) {
  .kt-status {
    position: static;
    width: 100%;
    margin-top: 10px;
    font-size: 13px;
  }
}