:root{

  --pagnia-red:#e30613;
  --pagnia-red-dark:#b4000a;

  --ink:#2b2b2b;
  --anthracite:#3f3f3f;
  --anthracite-soft:#555;
  --muted:#747474;

  --line:#e8e8e6;
  --soft:#f6f6f3;
  --soft-warm:#f1f0ed;

  --white:#fff;

  --shadow:
    0 24px 70px
    rgba(40,40,40,.09);

  --radius:30px;

  --container:1180px;

}


*{
  box-sizing:border-box;
}


html{

  scroll-behavior:smooth;

  scroll-padding-top:90px;

}


body{

  margin:0;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

  color:var(--ink);

  background:#fff;

  line-height:1.58;

  overflow-x:hidden;

}


a{

  color:inherit;

  text-decoration:none;

}


img{

  display:block;

  max-width:100%;

  height:auto;

}


button,
a{

  -webkit-tap-highlight-color:transparent;

}


.container{

  width:min(
    var(--container),
    calc(100% - 40px)
  );

  margin-inline:auto;

}


.skip-link{

  position:absolute;

  left:12px;

  top:-80px;

  z-index:9999;

  padding:10px 14px;

  background:#fff;

  color:#222;

  border-radius:10px;

  box-shadow:var(--shadow);

}


.skip-link:focus{

  top:12px;

}



/* =========================================================
   HEADER
========================================================= */


.site-header{

  position:sticky;

  top:0;

  z-index:1000;

  background:
    rgba(255,255,255,.96);

  backdrop-filter:
    blur(14px);

  border-bottom:
    1px solid
    rgba(232,232,230,.9);

}


.header-inner{

  min-height:84px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

}


.brand{

  display:flex;

  align-items:center;

}


.header-logo{

  width:180px;

  height:68px;

  object-fit:contain;

}


.site-nav{

  display:flex;

  align-items:center;

  gap:5px;

}


.site-nav a{

  padding:
    11px
    14px;

  border-radius:999px;

  font-size:.93rem;

  font-weight:800;

  color:#494949;

  transition:.2s ease;

}


.site-nav a:hover{

  background:#fff0f1;

  color:var(--pagnia-red);

}



/* =========================================================
   MOBILE MENU
========================================================= */


.menu-toggle{

  display:none;

  width:46px;

  height:46px;

  border:
    1px solid
    var(--line);

  border-radius:14px;

  background:#fff;

  cursor:pointer;

  align-items:center;

  justify-content:center;

  flex-direction:column;

  gap:5px;

}


.menu-toggle span{

  width:21px;

  height:2px;

  border-radius:3px;

  background:
    var(--anthracite);

  transition:.25s;

}


.menu-toggle.is-open span:nth-child(1){

  transform:
    translateY(7px)
    rotate(45deg);

}


.menu-toggle.is-open span:nth-child(2){

  opacity:0;

}


.menu-toggle.is-open span:nth-child(3){

  transform:
    translateY(-7px)
    rotate(-45deg);

}



/* =========================================================
   FULL WIDTH SLIDER
========================================================= */


.hero-slider{

  position:relative;

  width:100%;

  overflow:hidden;

  background:#ececea;

  aspect-ratio:
    2400 / 870;

}


.slider-track{

  position:absolute;

  inset:0;

}


.hero-slide{

  position:absolute;

  inset:0;

  opacity:0;

  visibility:hidden;

  transition:
    opacity .8s ease,
    visibility .8s ease;

}


.hero-slide.is-active{

  opacity:1;

  visibility:visible;

  z-index:1;

}


.hero-slide picture{

  display:block;

  width:100%;

  height:100%;

}


.hero-slide img{

  display:block;

  width:100%;

  height:100%;

  object-fit:cover;

  object-position:center;

}


.hero-slide.is-linked{

  cursor:pointer;

}



/* =========================================================
   SLIDER PFEILE
========================================================= */


.slider-arrow{

  position:absolute;

  top:50%;

  transform:
    translateY(-50%);

  z-index:5;

  width:52px;

  height:52px;

  border:
    1px solid
    rgba(255,255,255,.58);

  border-radius:999px;

  background:
    rgba(68,68,68,.38);

  color:#fff;

  font-size:2rem;

  line-height:1;

  cursor:pointer;

  backdrop-filter:
    blur(8px);

  transition:.2s;

}


.slider-arrow:hover{

  background:
    rgba(68,68,68,.62);

}


.slider-prev{

  left:24px;

}


.slider-next{

  right:24px;

}



/* =========================================================
   SLIDER DOTS
========================================================= */


.slider-dots{

  position:absolute;

  left:50%;

  bottom:20px;

  transform:
    translateX(-50%);

  z-index:5;

  display:flex;

  align-items:center;

  gap:9px;

  padding:
    8px
    11px;

  border-radius:999px;

  background:
    rgba(67,67,67,.32);

  backdrop-filter:
    blur(8px);

}


.slider-dot{

  width:10px;

  height:10px;

  border:0;

  border-radius:999px;

  background:
    rgba(255,255,255,.65);

  padding:0;

  cursor:pointer;

  transition:.2s;

}


.slider-dot.is-active{

  width:28px;

  background:#fff;

}



/* =========================================================
   GENERAL
========================================================= */


.section{

  padding:
    94px
    0;

}


.eyebrow{

  margin:
    0
    0
    12px;

  color:
    var(--pagnia-red);

  font-size:.77rem;

  font-weight:900;

  text-transform:uppercase;

  letter-spacing:.14em;

}


.eyebrow.light{

  color:#fff;

  opacity:.8;

}


h1,
h2,
h3{

  text-wrap:balance;

}


h1{

  margin:0;

  font-size:
    clamp(
      2.5rem,
      5vw,
      4.8rem
    );

  line-height:1;

  letter-spacing:-.05em;

  color:#323232;

}


h2{

  margin:0;

  font-size:
    clamp(
      2rem,
      3.5vw,
      3.25rem
    );

  line-height:1.05;

  letter-spacing:-.04em;

  color:#353535;

}


h3{

  margin:0;

}



/* =========================================================
   INTRO / UMBAU
========================================================= */


.intro{

  background:#fff;

}


.intro-grid{

  display:grid;

  grid-template-columns:
    .9fr
    1.1fr;

  gap:72px;

  align-items:start;

}


.intro-title{

  position:sticky;

  top:120px;

}


.intro-copy{

  color:
    var(--muted);

  font-size:1.08rem;

}


.intro-copy p{

  margin-top:0;

}


.lead{

  margin:
    0
    0
    20px;

  font-size:
    clamp(
      1.18rem,
      2vw,
      1.45rem
    );

  line-height:1.48;

  color:#444;

}


.notice-box{

  display:grid;

  gap:5px;

  margin-top:28px;

  padding:
    22px
    24px;

  border-left:
    5px solid
    var(--pagnia-red);

  border-radius:
    0
    18px
    18px
    0;

  background:#fff4f5;

  color:#474747;

}


.notice-box strong{

  color:#323232;

  font-size:1.05rem;

}



/* =========================================================
   STANDORT
========================================================= */


.location-section{

  background:var(--soft);

}


.location-layout{

  display:grid;

  grid-template-columns:
    .9fr
    1.1fr;

  gap:70px;

  align-items:center;

}


.location-copy p{

  max-width:580px;

  color:var(--muted);

  font-size:1.06rem;

}


.location-actions{

  display:flex;

  flex-wrap:wrap;

  gap:12px;

  margin-top:28px;

}


.location-card{

  padding:36px;

  background:#fff;

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius);

  box-shadow:
    var(--shadow);

}


.card-kicker{

  margin:
    0
    0
    6px;

  color:
    var(--pagnia-red);

  font-size:.75rem;

  font-weight:900;

  text-transform:uppercase;

  letter-spacing:.12em;

}


.location-card h3{

  margin-bottom:14px;

  font-size:1.8rem;

  color:#3d3d3d;

}


.location-card address{

  margin-bottom:28px;

  color:
    var(--muted);

  font-style:normal;

}


.location-card dl{

  margin:0;

  display:grid;

  gap:18px;

}


.location-card dl > div{

  display:grid;

  grid-template-columns:
    120px
    1fr;

  gap:18px;

  align-items:start;

}


.location-card dt{

  color:#4a4a4a;

  font-weight:850;

}


.location-card dd{

  margin:0;

  min-width:0;

  color:
    var(--muted);

  overflow-wrap:anywhere;

}


.location-card dd a{

  color:
    var(--pagnia-red);

  font-weight:750;

}



/* =========================================================
   ÖFFNUNGSZEITEN
========================================================= */


.opening-hours{

  display:grid;

  grid-template-columns:
    90px
    1fr;

  gap:
    5px
    14px;

  padding:
    13px
    15px;

  border-radius:14px;

  background:#f5f5f2;

}


.opening-hours strong{

  color:#383838;

}



/* =========================================================
   BUTTONS
========================================================= */


.btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:52px;

  padding:
    13px
    21px;

  border:
    1px solid
    transparent;

  border-radius:999px;

  font-weight:850;

  transition:.2s;

}


.btn:hover{

  transform:
    translateY(-2px);

}


.btn-primary{

  background:
    var(--pagnia-red);

  color:#fff;

  box-shadow:
    0
    12px
    28px
    rgba(227,6,19,.17);

}


.btn-secondary{

  background:#fff;

  border-color:#dcdcd9;

  color:#414141;

}



/* =========================================================
   KONTAKT
========================================================= */


.contact-section{

  padding-top:0;

  background:var(--soft);

}


.contact-box{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:36px;

  padding:44px;

  border-radius:30px;

  background:
    linear-gradient(
      135deg,
      #5b5b5b,
      #444
    );

  color:#fff;

}


.contact-box h2{

  color:#fff;

}


.contact-box p{

  margin-bottom:0;

  color:
    rgba(
      255,
      255,
      255,
      .77
    );

}


.contact-actions{

  display:flex;

  flex-wrap:wrap;

  gap:12px;

}


.btn-light{

  background:#fff;

  color:#3d3d3d;

}


.btn-outline-light{

  border-color:
    rgba(
      255,
      255,
      255,
      .48
    );

  color:#fff;

}



/* =========================================================
   MODERNER FOOTER
========================================================= */


.site-footer{

  background:
    linear-gradient(
      135deg,
      #4c4c4c,
      #373737
    );

  color:#fff;

  padding:
    56px
    0
    24px;

}


.footer-modern{

  display:grid;

  gap:34px;

}


.footer-top{

  display:grid;

  grid-template-columns:
    1.1fr
    .9fr
    1.2fr;

  gap:40px;

  align-items:start;

}


.footer-logo{

  width:160px;

  max-height:70px;

  object-fit:contain;

  margin-bottom:18px;

  background:#fff;

  padding:8px;

  border-radius:12px;

}


.footer-brand p,
.footer-contact p{

  margin:0;

  color:
    rgba(
      255,
      255,
      255,
      .72
    );

  line-height:1.7;

}


.footer-contact{

  display:grid;

  gap:8px;

}


.footer-contact h3{

  margin-bottom:8px;

  color:#fff;

  font-size:1rem;

  text-transform:uppercase;

  letter-spacing:.08em;

}


.footer-contact a{

  color:#fff;

  font-weight:700;

  transition:.2s;

}


.footer-contact a:hover{

  color:#ffb7bb;

}



/* IMPRESSUM IM FOOTER */


.footer-impressum{

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      .16
    );

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      .16
    );

}


.footer-impressum summary{

  list-style:none;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  padding:
    14px
    0;

  cursor:pointer;

  color:#fff;

  font-weight:800;

}


.footer-impressum summary::-webkit-details-marker{

  display:none;

}


.footer-impressum summary span{

  display:grid;

  place-items:center;

  width:34px;

  height:34px;

  border-radius:999px;

  background:
    var(--pagnia-red);

  color:#fff;

  font-size:1.35rem;

  transition:.25s;

}


.footer-impressum[open] summary span{

  transform:
    rotate(45deg);

}


.footer-impressum-content{

  display:grid;

  gap:16px;

  padding:
    6px
    0
    20px;

}


.footer-impressum-content p{

  margin:0;

  color:
    rgba(
      255,
      255,
      255,
      .70
    );

  font-size:.92rem;

  line-height:1.65;

  overflow-wrap:anywhere;

}


.footer-impressum-content strong{

  color:#fff;

}



/* FOOTER UNTEN */


.footer-bottom{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  padding-top:20px;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      .12
    );

  color:
    rgba(
      255,
      255,
      255,
      .55
    );

  font-size:.85rem;

}



/* =========================================================
   BACK TO TOP
========================================================= */


.back-to-top{

  position:fixed;

  right:20px;

  bottom:20px;

  z-index:1100;

  width:48px;

  height:48px;

  border:0;

  border-radius:999px;

  background:
    var(--pagnia-red);

  color:#fff;

  font-size:1.35rem;

  font-weight:900;

  cursor:pointer;

  box-shadow:
    0
    14px
    34px
    rgba(40,40,40,.20);

  opacity:0;

  visibility:hidden;

  transform:
    translateY(10px);

  transition:.25s;

}


.back-to-top.is-visible{

  opacity:1;

  visibility:visible;

  transform:
    translateY(0);

}



/* =========================================================
   TABLET
========================================================= */


@media (max-width:980px){


  .menu-toggle{

    display:flex;

  }


  .site-nav{

    position:fixed;

    top:92px;

    left:20px;

    right:20px;

    display:grid;

    gap:4px;

    padding:12px;

    background:#fff;

    border:
      1px solid
      var(--line);

    border-radius:22px;

    box-shadow:
      var(--shadow);

    opacity:0;

    visibility:hidden;

    transform:
      translateY(-10px);

    transition:.22s;

  }


  .site-nav.is-open{

    opacity:1;

    visibility:visible;

    transform:
      translateY(0);

  }


  .site-nav a{

    padding:
      14px
      16px;

  }


  .intro-grid,
  .location-layout{

    grid-template-columns:1fr;

    gap:32px;

  }


  .intro-title{

    position:static;

  }


  .section{

    padding:
      72px
      0;

  }


  .footer-top{

    grid-template-columns:
      1fr
      1fr;

    gap:30px;

  }


  .footer-legal{

    grid-column:
      1 / -1;

  }

}



/* =========================================================
   MOBILE
========================================================= */


@media (max-width:640px){


  .container{

    width:min(
      var(--container),
      calc(100% - 28px)
    );

  }


  .header-inner{

    min-height:72px;

  }


  .header-logo{

    width:145px;

    height:56px;

  }


  .site-nav{

    top:80px;

    left:14px;

    right:14px;

  }


  .hero-slider{

    aspect-ratio:auto;

    min-height:0;

    background:#fff;

  }


  .slider-track{

    position:relative;

  }


  .hero-slide{

    position:absolute;

    inset:0;

  }


  .hero-slide.is-active{

    position:relative;

  }


  .hero-slide picture{

    display:block;

    width:100%;

    height:auto;

  }


  .hero-slide img{

    width:100%;

    height:auto;

    object-fit:contain;

    object-position:center;

  }


  .slider-arrow{

    width:42px;

    height:42px;

    font-size:1.6rem;

  }


  .slider-prev{

    left:10px;

  }


  .slider-next{

    right:10px;

  }


  .slider-dots{

    bottom:9px;

  }


  h1{

    font-size:
      clamp(
        2.15rem,
        11vw,
        3.3rem
      );

  }


  h2{

    font-size:
      clamp(
        1.8rem,
        8vw,
        2.4rem
      );

  }


  .section{

    padding:
      58px
      0;

  }


  .location-card{

    padding:22px;

    border-radius:22px;

  }


  .location-card dl > div{

    grid-template-columns:1fr;

    gap:4px;

  }


  .opening-hours{

    grid-template-columns:
      82px
      1fr;

  }


  .location-actions,
  .contact-actions{

    display:grid;

    grid-template-columns:1fr;

    width:100%;

  }


  .btn{

    width:100%;

  }


  .contact-box{

    align-items:flex-start;

    flex-direction:column;

    padding:24px;

    border-radius:22px;

  }


  .site-footer{

    padding:
      42px
      0
      20px;

  }


  .footer-top{

    grid-template-columns:1fr;

    gap:28px;

  }


  .footer-legal{

    grid-column:auto;

  }


  .footer-logo{

    width:145px;

  }


  .footer-bottom{

    flex-direction:column;

    align-items:flex-start;

    gap:6px;

  }


  .back-to-top{

    right:14px;

    bottom:14px;

    width:44px;

    height:44px;

  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */


@media (prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{

    animation-duration:.01ms!important;

    animation-iteration-count:1!important;

    scroll-behavior:auto!important;

    transition-duration:.01ms!important;

  }

}