/* ===== BASIS ===== */
:root{
  --text:#141414;
  --muted:#303030;
}

*{ box-sizing:border-box }

html,body{
  margin:0;
  min-height:100%;
}

body{
  font-family:-apple-system,BlinkMacSystemFont,
              "SF Pro Display","SF Pro Text",
              system-ui,sans-serif;
  color:var(--text);
  background:#f3f5fb;
  overflow-x:hidden;
  overflow-y:auto;
}

/* ===== ATOM CANVAS ===== */
#atomBg{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:-6;
  pointer-events:none;
}

/* ===== HINTERGRUND ===== */
.stage{
  position:fixed;
  inset:0;
  z-index:-5;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.88),
    rgba(238,242,255,.88)
  );
}

.mesh{
  position:fixed;
  inset:-20%;
  z-index:-4;
  background:
    radial-gradient(900px 700px at 10% 20%, rgba(0,255,215,.85), transparent 55%),
    radial-gradient(900px 700px at 40% 25%, rgba(120,135,255,.85), transparent 56%),
    radial-gradient(900px 700px at 80% 30%, rgba(255,190,80,.85), transparent 58%),
    radial-gradient(900px 700px at 80% 80%, rgba(255,110,170,.85), transparent 58%),
    radial-gradient(900px 700px at 20% 85%, rgba(140,255,170,.80), transparent 58%);
  filter:saturate(1.35) blur(0.5px);
  animation:mesh 7s ease-in-out infinite;
}

@keyframes mesh{
  0%{transform:translate(-3%,-2%) scale(1.05)}
  50%{transform:translate(3%,2%) scale(1.12)}
  100%{transform:translate(-3%,-2%) scale(1.05)}
}

/* ===== BLOBS ===== */
.blob{
  position:fixed;
  width:55vmax;
  height:55vmax;
  border-radius:50%;
  filter:blur(40px) saturate(1.55);
  opacity:.75;
  z-index:-3;
}

.blob.b1{left:-12vmax; top:-14vmax; background:radial-gradient(circle at 30% 30%, rgba(0,255,230,.95), transparent 60%);}
.blob.b2{right:-18vmax; top:-12vmax; background:radial-gradient(circle at 40% 40%, rgba(160,120,255,.95), transparent 60%);}
.blob.b3{right:-20vmax; bottom:-18vmax; background:radial-gradient(circle at 35% 35%, rgba(255,170,70,.95), transparent 62%);}
.blob.b4{left:-15vmax; bottom:-18vmax; background:radial-gradient(circle at 35% 35%, rgba(255,110,170,.95), transparent 62%);}

/* ===== SHIMMER / GRAIN ===== */
.shimmer{
  position:fixed;
  inset:-30%;
  z-index:-2;
  background:
    radial-gradient(closest-side at 30% 40%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(closest-side at 70% 60%, rgba(255,255,255,.16), transparent 62%);
  filter:blur(18px);
  animation:shimmer 5s ease-in-out infinite;
  pointer-events:none;
}

@keyframes shimmer{
  0%{opacity:.55}
  50%{opacity:.75}
  100%{opacity:.55}
}

.grain{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.10;
  mix-blend-mode:soft-light;
}

/* ===== LAYOUT ===== */
.wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}

.container{
  width:min(1120px,100%);
}

/* ===== NAV ===== */
.nav{
  position:fixed;
  top:24px;
  left:24px;
  right:24px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  z-index:10;
}

/* ===== BRAND ===== */
.brand{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-top:28px;
  margin-left:36px;
}

.dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:linear-gradient(135deg,#00ffd5,#ff6eb1);
  margin-top:6px;
}

.brand-text{
  display:flex;
  flex-direction:column;
  transform:scale(2.0);   /* wie bei dir */
  transform-origin:left top;
}

.brand-name{
  font-weight:800;
  font-size:1.5em;
  letter-spacing:-0.02em;
}

.brand-sub{
  margin-top:6px;
  font-size:13px;
  color:#444;
  opacity:.85;
}

/* ===== LINKS (oben rechts) ===== */
.links{
  position:relative;
}

.links a{
  margin-left:12px;
  text-decoration:none;
  font-size:13px;
  padding:8px 10px;
  border-radius:12px;
  color:#222;
  opacity:.75;
}

.links a:hover{
  background:rgba(255,255,255,.45);
  opacity:1;
}

.links a[aria-current="page"]{
  font-weight:700;
  text-decoration:underline;
  opacity:1;
}

/* ===== HERO ===== */
.hero{
  padding:38px;
  text-align:center;

  /* === FIX (Version 1): Platz für FIXED Nav + skalierte Brand reservieren === */
  /* Dadurch kann der Haupttext NICHT mehr mit dem Brand links überlappen. */
  padding-top: 100px;
}

/* Optional: etwas weniger Abstand auf kleineren Desktop-Breiten */
@media (max-width: 1100px){
  .hero{ padding-top: 210px; }
}

.hero h2{ margin-bottom:6px; }

/* ===== CTA ===== */
.cta{
  margin-top:18px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.btn{
  padding:18px 32px;
  font-size:16px;
  font-weight:700;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 14px 40px rgba(0,0,0,.18);
  text-decoration:none;
  color:#000;
  transition:transform .2s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btn:hover{
  transform:translateY(-2px) scale(1.03);
}

/* ===== RAINBOW BOXES ===== */
.info-box,
.side-box{
  position:relative;
  background:none;
  border-radius:16px;
  padding:18px 22px;
  font-size:14px;
  line-height:1.45;
  color:#6b7cff;
  z-index:1;
}

.info-box::after,
.side-box::after{
  content:"";
  position:absolute;
  inset:0;
  padding:3px;
  border-radius:inherit;
  background:linear-gradient(
    90deg,
    #00ffd5,
    #6b7cff,
    #b46bff,
    #ff6eb1,
    #ffb86b,
    #00ffd5
  );
  box-shadow:
    0 0 14px rgba(0,255,213,.40),
    0 0 28px rgba(255,110,177,.30);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}

/* ===== INFO-BOX unten ===== */
.info-box{
  margin:16px auto 0;
  max-width:520px;
  display:inline-block;
  text-align:center;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ===== SIDE-BOX oben rechts ===== */
.side-box{
  position:fixed;
  top:96px;
  right:24px;
  width:300px;
  text-align:left;
  font-weight:500;
  letter-spacing:normal;
  text-transform:none;
}

/* ===== FINAL FIX: Side-Box wirklich nicht weiß wirkend ===== */
.side-box{
  background: rgba(0,0,0,0.04) !important;
  box-shadow: none;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ===== FOOTER (inkl. 2x größer integriert) ===== */
.footer-links{
  position:fixed;
  left:40px;
  right:24px;
  bottom:24px;

  display:flex;
  justify-content:space-between;
  align-items:baseline;

  z-index:10;

  padding:24px 0;
  font-size:26px;
}

.footer-right{
  display:flex;
  gap:18px;
}

.footer-address{
  font-weight:600;
  font-size:26px;
}

.footer-right a{
  font-size:26px;
}

/* ===== NUR MITTLERE CTA-BUTTONS GRÖSSER ===== */
.cta .btn{
  padding:32px 72px;
  font-size:24px;
  font-weight:800;
}

/* ===== HERO TITLE ===== */
.hero h1{
  font-size:clamp(48px, 4.8vw, 72px);
  letter-spacing:-0.03em;
  font-weight:800;
}

.hero h3{
  font-size:clamp(24px, 2.4vw, 36px);
  letter-spacing:-0.015em;
  font-weight:400;
}

/* ===== PHONE BUTTON 20% GRÖSSER (falls benutzt) ===== */
.phone-big{
  font-size:19px;
  padding:22px 38px;
  font-weight:700;
  letter-spacing:.01em;
}

/* ===== Buttons nur auf Seiten mit .cta-contact ===== */
.cta-contact .btn{
  background:#5fa8ff;
  color:#000;                 /* Schrift schwarz */
  border:2px solid #5fa8ff;

  font-size:18px;
  font-weight:700;
  padding:18px 32px;

  border-radius:999px;        /* <-- rund / pillenförmig */
  display:inline-block;       /* wichtig bei <a>-Buttons */
}

/* Hover */
.cta-contact .btn:hover{
  background:#000;
  color:#fff;
  border-color:#000;
}

/* Mobile */
@media (max-width: 640px){
  .cta-contact .btn{
    font-size:22px;
    padding:22px 28px;
  }
}


/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce){
  .mesh,.blob,.shimmer{animation:none}
  .btn{ transition:none }
  #atomBg{ display:none }
}





/* ======================================================
   MOBILE PORTRAIT (Hochkant)
   ====================================================== */
@media (max-width: 640px) and (orientation: portrait){

  /* Seite nicht mehr vertikal zentrieren */
  .wrap{
    align-items: flex-start;
    padding: 20px;
    padding-bottom: 110px; /* Platz für festen Footer */
  }

  /* Kopfzeile mittig */
  .nav{
    position: static;
    margin: 0 0 8px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
  }

  .brand{
    margin: 0;
    gap: 8px;
    align-items: center;
    text-align: center;
  }

  .brand-text{
    transform: scale(1);
    transform-origin: center top;
    align-items: center;
  }

  .brand-name{
    font-size: 28px;
    line-height: 1.05;
  }

  .brand-sub{
    font-size: 12px;
    line-height: 1.3;
  }

  .brand-sub div{
    white-space: normal;
  }

  /* Links (My Account / DE / EN) – mittig */
  .links{
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap; /* verhindert Umbruch-Probleme */
  }

  /* Hero */
  .hero{
    padding: 6px 0 0;
    text-align: center;
  }

  .hero h1{
    margin: 12px 0 8px;
    font-size: 42px;
  }

  /* Buttons untereinander */
  .cta{
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .cta .btn{
    width: min(86vw, 340px);
    padding: 16px 18px;
    font-size: 18px;
  }

  /* Footer sichtbar & lesbar */
  .footer-links{
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;

    display: flex;
    justify-content: space-between;
    align-items: baseline;

    font-size: 13px;
    line-height: 1.3;
    z-index: 50;
  }

  .footer-address{
    font-size: 13px;
    font-weight: 600;
  }

  .footer-right{
    display: flex;
    gap: 12px;
  }

  .footer-right a{
    font-size: 13px;
  }

  /* Side-Box auf Mobile aus */
  .side-box{
    display: none;
  }
}

/* ======================================================
   MOBILE LANDSCAPE (Quer) – Footer ausblenden
   ====================================================== */
@media (max-height: 500px) and (orientation: landscape){

  .footer-links{
    display: none !important;
  }

  /* etwas mehr Luft unten */
  .wrap{
    padding-bottom: 20px;
  }
}


/* ======================================================
   TABLET / iPAD FIX (ohne Desktop & Phone zu ändern)
   Ziel: alles etwas kleiner auf ~768–1024px
   ====================================================== */
@media (min-width: 641px) and (max-width: 1024px){

  /* etwas weniger Außenabstand */
  .wrap{
    padding: 24px;
  }

  /* Brand nicht mehr 2.0x, sonst wirkt alles riesig */
  .brand{
    margin-top: 18px;
    margin-left: 18px;
    gap: 12px;
  }

  .brand-text{
    transform: scale(1.35);     /* vorher 2.0 */
    transform-origin: left top;
  }

  /* Hero: weniger Top-Padding, damit es nicht "zu groß" wirkt */
  .hero{
    padding: 26px;
    padding-top: 120px;         /* war 100/210 – Tablet braucht oft weniger */
  }

  /* Side-Box: kleiner + etwas weiter nach oben */
  .side-box{
    top: 84px;
    right: 18px;
    width: 260px;
    padding: 14px 16px;
    font-size: 13px;
  }

  /* CTA Buttons: deine globale Regel macht sie riesig -> tablet runter */
  .cta .btn{
    padding: 18px 34px;         /* statt 32px 72px */
    font-size: 18px;            /* statt 24px */
    font-weight: 800;
  }

  /* Titel/Subtitel etwas kompakter */
  .hero h1{
    font-size: clamp(40px, 4.2vw, 56px);
  }
  .hero h3{
    font-size: clamp(20px, 2.2vw, 28px);
  }

  /* Footer: 26px ist auf iPad zu groß */
  .footer-links{
    left: 24px;
    right: 24px;
    bottom: 20px;
    padding: 14px 0;
    font-size: 16px;
  }
  .footer-address{
    font-size: 16px;
  }
  .footer-right a{
    font-size: 16px;
  }
}

/* Optional: iPad im Hochformat noch etwas kompakter */
@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait){
  .cta .btn{
    padding: 16px 28px;
    font-size: 17px;
  }
  .brand-text{
    transform: scale(1.25);
  }
}