/* LA JALOUSIE – V9.1
   Einheitlicher animierter Schriftzug auf PC, iPhone und Tablet.
*/
:root{--wine:#660000;--red:#660000;--white:#fff;--text:#5f5f5f;--max-width:1360px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;background:var(--wine);font-family:Verdana,Arial,Helvetica,sans-serif}
img{display:block;max-width:100%;height:auto}

.site-header{width:100%;background:var(--wine)}
.hero-image{width:min(100%,1600px);margin:0 auto}

.site-main{
  width:min(calc(100% - 32px),var(--max-width));
  margin:0 auto;
  padding:34px clamp(24px,4vw,64px) 52px;
  background:var(--white)
}

.brand-intro{margin-bottom:42px}

/* The lettering is now an image, not a system font.
   Therefore it looks identical on Windows, Mac, iPhone and Android. */
.jalousie-stage{
  position:relative;
  width:100%;
  height:clamp(105px,12vw,170px);
  overflow:hidden;
  background:var(--red);
  display:grid;
  place-items:center
}

.jalousie-word{
  width:min(72%,900px);
  height:auto;
  transform:translateX(-1%);
  animation:jalousie-flow 14s ease-in-out infinite;
  will-change:transform,opacity
}

@keyframes jalousie-flow{
  0%,18%{transform:translateX(-2.5%) scale(1.025);opacity:.9}
  32%,60%{transform:translateX(0) scale(1);opacity:1}
  76%{transform:translateX(2.5%) scale(1.025);opacity:.95}
  100%{transform:translateX(-2.5%) scale(1.025);opacity:.9}
}

.tagline{
  margin:18px 0 0;
  text-align:center;
  color:var(--text);
  font-size:clamp(.78rem,1.2vw,1rem);
  letter-spacing:.24em;
  text-transform:uppercase
}

.button-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,128px));
  justify-content:center;
  align-items:center;
  gap:clamp(18px,2vw,34px)
}

.round-button{
  display:block;
  width:100%;
  border-radius:50%;
  overflow:hidden;
  line-height:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.02);
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease
}

.round-button:hover,.round-button:focus-visible{
  transform:translateY(-5px) scale(1.035);
  filter:brightness(1.06);
  box-shadow:0 10px 22px rgba(70,0,0,.14)
}

.round-button:focus-visible{outline:3px solid #333;outline-offset:5px}

.secondary-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,190px));
  justify-content:center;
  gap:28px;
  margin-top:48px
}

.secondary-links a{display:block;overflow:hidden;transition:transform .2s ease,filter .2s ease}
.secondary-links a:hover,.secondary-links a:focus-visible{transform:translateY(-4px);filter:brightness(1.04)}

.social-links{display:flex;justify-content:center;margin-top:38px}
.social-links a{display:block;transition:transform .2s ease}
.social-links a:hover,.social-links a:focus-visible{transform:scale(1.06)}
.social-links img{width:76px}

.site-footer{
  width:min(calc(100% - 32px),var(--max-width));
  margin:0 auto;
  padding:22px 16px 30px;
  background:var(--wine);
  text-align:center;
  font-size:.8rem
}
.site-footer a{color:#fff;text-decoration:underline;text-underline-offset:3px}

@media(max-width:1080px){
  .button-grid{grid-template-columns:repeat(3,minmax(0,142px));gap:30px 48px}
  .jalousie-word{width:min(78%,760px)}
}

@media(max-width:760px){
  .site-main{width:100%;padding:24px 24px 46px}
  .button-grid{grid-template-columns:repeat(2,minmax(0,158px));gap:28px 46px}
  .secondary-links{grid-template-columns:repeat(2,minmax(0,165px))}
  .jalousie-word{width:82%}
}

@media(max-width:560px){
  .site-main{padding:24px 16px 42px}
  .brand-intro{margin-bottom:32px}
  .jalousie-stage{height:84px}
  .jalousie-word{width:88%}
  .tagline{margin-top:13px;font-size:.67rem;letter-spacing:.18em}
  .button-grid{grid-template-columns:165px;gap:20px}
  .secondary-links{grid-template-columns:repeat(2,minmax(0,138px));gap:14px;margin-top:38px}
  .social-links{margin-top:32px}
  .social-links img{width:72px}
}

@media(max-width:380px){
  .button-grid{grid-template-columns:155px}
  .secondary-links{grid-template-columns:minmax(0,190px)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .jalousie-word{animation:none}
  .round-button,.secondary-links a,.social-links a{transition:none}
}


/* =========================================================
   V9 – statischer Schriftzug, kein Animationsbalken
   ========================================================= */

.brand-intro-static{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:clamp(34px,5vw,64px) 20px clamp(26px,4vw,44px);
  background:#fff;
}

.jalousie-static-logo{
  display:block;
  width:min(72%,900px);
  height:auto;
  margin:0 auto;
}

.brand-intro-static .tagline{
  margin:0;
  color:var(--text);
  font-size:clamp(.78rem,1.2vw,.95rem);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.22em;
  text-align:center;
}

/* Alte Animationsklassen werden in V9 nicht mehr verwendet. */
.jalousie-stage,
.jalousie-word{
  animation:none!important;
}

@media(max-width:760px){
  .brand-intro-static{
    padding:34px 16px 26px;
  }
  .jalousie-static-logo{
    width:min(82%,620px);
  }
}

@media(max-width:560px){
  .brand-intro-static{
    padding:28px 12px 22px;
    gap:10px;
  }
  .jalousie-static-logo{
    width:88%;
  }
  .brand-intro-static .tagline{
    font-size:.68rem;
    letter-spacing:.18em;
  }
}

@media(max-width:380px){
  .jalousie-static-logo{
    width:91%;
  }
}