/* custom.css — Ergänzungen zu style.min.css */

/* ── GOLDENE QUADRATE – stärkere Bewegung + 2 neue links ── */
@keyframes shapeF1 {
  0%, 100% { transform: rotate(20deg) translateY(0); }
  50%       { transform: rotate(24deg) translateY(-50px); }
}
@keyframes shapeF2 {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50%       { transform: rotate(51deg) translateY(-44px); }
}
@keyframes shapeF3 {
  0%, 100% { transform: rotate(-15deg) translateY(0); }
  50%       { transform: rotate(-19deg) translateY(-55px); }
}
@keyframes shapeF4 {
  0%, 100% { transform: rotate(30deg) translateY(0); }
  50%       { transform: rotate(35deg) translateY(-48px); }
}
@keyframes shapeF5 {
  0%, 100% { transform: rotate(-30deg) translateY(0); }
  50%       { transform: rotate(-25deg) translateY(-38px); }
}

.v2-shape.s1 { animation: shapeF1 9s ease-in-out infinite !important; }
.v2-shape.s2 { animation: shapeF2 7s ease-in-out infinite reverse !important; }
.v2-shape.s3 { animation: shapeF3 11s ease-in-out infinite !important; }

.v2-shape.s4 {
  width: 140px; height: 140px;
  top: 18%; left: 8%;
  transform: rotate(30deg);
  opacity: 0.65;
  animation: shapeF4 8s ease-in-out infinite !important;
}
.v2-shape.s5 {
  width: 60px; height: 60px;
  top: 48%; left: 20%;
  transform: rotate(-30deg);
  opacity: 0.4;
  animation: shapeF5 10s ease-in-out infinite reverse !important;
}

/* ── HERO BROWSER MOCKUPS ── */
.v2-hero-visual {
  position: relative;
  height: 520px;
}

.mwp-browser {
  position: absolute;
  background: var(--navy-light, #13233F);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(196,154,60,0.12);
}

.mwp-browser-bar {
  height: 36px;
  background: var(--navy-mid, #1C3059);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  border-bottom: 1px solid rgba(196,154,60,0.08);
  flex-shrink: 0;
}

.mwp-dots {
  display: flex;
  gap: 6px;
}
.mwp-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
}
.mwp-d1 { background: #ff5f57; }
.mwp-d2 { background: #ffbd2e; }
.mwp-d3 { background: #28c840; }

.mwp-url {
  flex: 1;
  height: 20px;
  background: rgba(0,0,0,0.25);
  border-radius: 4px;
  margin-left: 8px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 10px;
  color: rgba(248,244,238,0.35);
  font-family: monospace;
  gap: 4px;
}

.mwp-screen {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
  background: var(--navy-mid, #1C3059);
}

@keyframes mwpFloatA {
  0%, 100% { transform: perspective(1400px) rotateY(-4deg) rotateX(1deg) translateY(0px); }
  50%       { transform: perspective(1400px) rotateY(-4deg) rotateX(1deg) translateY(-10px); }
}
.mwp-browser-back {
  width: 520px;
  top: 0;
  right: -40px;
  animation: mwpFloatA 6s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes mwpFloatB {
  0%, 100% { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg) translateY(0px); }
  50%       { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg) translateY(-14px); }
}
.mwp-browser-front {
  width: 480px;
  top: 180px;
  left: -30px;
  z-index: 2;
  animation: mwpFloatB 7s ease-in-out infinite 1s;
  transform-origin: center center;
}

@media (max-width: 900px) {
  .v2-hero-visual {
    height: 320px;
  }
  .mwp-browser-back {
    width: 340px;
    right: -10px;
  }
  .mwp-browser-front {
    width: 300px;
    top: 120px;
    left: -10px;
  }
}

@media (max-width: 640px) {
  .v2-hero-visual {
    display: none;
  }
}

/* Logo-Bilder (Header & Footer) */
.logo-img {
  height: 70px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .logo-img {
    height: 50px;
  }
}

/* Kontakt-CTA-Button im Kontakt-Bereich */
.kontakt-cta-btn {
  margin-top: 2rem;
  display: inline-flex;
}

/* ── COOKIE BANNER – LCP-Fix ── */
/* Standard: versteckt. Per Inline-Script wird mwp-cpend gesetzt wenn kein Consent vorhanden → sofort sichtbar */
#cookie-banner { display: none; }
.mwp-cpend #cookie-banner { display: flex !important; }

/* Skip-to-Content-Link (Accessibility) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  background: var(--navy, #0A1628);
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 0 0 8px 8px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
}

/* ── AVATAR FOTO ── */
.v2-avatar {
  width: 280px !important;
  height: 280px !important;
}

.v2-avatar-photo {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 12%;
  border: 2px solid rgba(196,154,60,.4);
  position: relative;
  z-index: 1;
  display: block;
}

@media (max-width: 640px) {
  .v2-avatar {
    width: 220px !important;
    height: 220px !important;
  }
  .v2-avatar-photo {
    width: 188px;
    height: 188px;
  }
}

/* Shake-Animation für Formular-Validierung */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-5px); }
  80%       { transform: translateX(5px); }
}

/* Fehler-Highlighting für Formularfelder */
input.error,
textarea.error,
select.error {
  border-color: #e53e3e !important;
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.12) !important;
}
input[type="checkbox"].error {
  outline: 2px solid #e53e3e;
  outline-offset: 2px;
}