:root{
  --cream:#fff8ed;
  --ink:#25160f;
  --text:#5f4635;
  --muted:#8a705c;
  --copper:#c96c32;
  --copper-dark:#994d2f;
  --line:rgba(90,54,37,.15);
  --shadow:0 28px 80px rgba(37,22,15,.20);
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    linear-gradient(90deg, rgba(37,22,15,.88) 0%, rgba(58,35,24,.78) 44%, rgba(37,22,15,.22) 100%),
    url("assets/hero-main.png") center/cover no-repeat fixed,
    var(--cream);
}

.site-texture{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.18;
  background-image:
    radial-gradient(rgba(255,248,237,.35) .7px, transparent .7px),
    linear-gradient(90deg, rgba(255,248,237,.07) 1px, transparent 1px);
  background-size:22px 22px,80px 80px;
}

img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}

.maintenance-page{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:42px 20px;
}

.maintenance-card{
  width:min(1040px,100%);
  padding:48px;
  border-radius:38px;
  background:rgba(255,248,237,.88);
  border:1px solid rgba(255,255,255,.46);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
  text-align:center;
  overflow:hidden;
  position:relative;
}

.maintenance-card::before{
  content:"";
  position:absolute;
  inset:-120px auto auto -120px;
  width:260px;
  height:260px;
  border-radius:50%;
  background:rgba(201,108,50,.18);
}

.maintenance-card::after{
  content:"";
  position:absolute;
  inset:auto -90px -120px auto;
  width:280px;
  height:280px;
  border-radius:50%;
  background:rgba(111,127,94,.16);
}

.logo-wrap,.kicker,h1,.intro,.countdown,.info-box,.actions,.small-note{
  position:relative;
  z-index:2;
}

.logo-wrap{
  width:116px;
  height:116px;
  margin:0 auto 22px;
  display:grid;
  place-items:center;
  border-radius:28px;
  background:#fff;
  box-shadow:0 18px 40px rgba(37,22,15,.16);
}

.logo-wrap img{width:92px;height:auto}

.kicker{
  display:inline-flex;
  margin-bottom:14px;
  padding:8px 13px;
  border-radius:999px;
  background:rgba(201,108,50,.12);
  color:var(--copper-dark);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1.5px;
}

h1{
  margin:0;
  font-family:"Bebas Neue",sans-serif;
  font-size:clamp(70px,9vw,128px);
  line-height:.9;
  letter-spacing:.4px;
}

.intro{
  max-width:760px;
  margin:22px auto 34px;
  color:var(--text);
  font-size:18px;
  line-height:1.75;
}

.countdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin:0 auto 28px;
  max-width:760px;
}

.countdown div{
  min-height:128px;
  padding:22px 14px;
  border-radius:26px;
  background:linear-gradient(180deg,#fffaf2,#f3dfbd);
  border:1px solid rgba(90,54,37,.13);
  box-shadow:0 14px 34px rgba(37,22,15,.10);
}

.countdown strong{
  display:block;
  font-family:"Bebas Neue",sans-serif;
  font-size:64px;
  line-height:.9;
  color:var(--copper-dark);
}

.countdown span{
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1.2px;
}

.info-box{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:0 auto 26px;
}

.info-box div{
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.56);
  border:1px solid rgba(90,54,37,.12);
}

.info-box span{
  display:block;
  margin-bottom:6px;
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1.2px;
}

.info-box strong{
  display:block;
  font-size:15px;
  line-height:1.45;
}

.actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
}

.btn{
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 24px;
  border-radius:999px;
  font-weight:900;
  transition:.2s ease;
}

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

.btn.primary{
  color:#fffaf2;
  background:linear-gradient(135deg,var(--copper),var(--copper-dark));
  box-shadow:0 16px 34px rgba(153,77,47,.26);
}

.btn.secondary{
  background:#fff;
  border:1px solid var(--line);
}

.small-note{
  margin:20px 0 0;
  color:var(--muted);
  font-size:14px;
  font-weight:700;
}

@media(max-width:760px){
  body{
    background:
      linear-gradient(180deg, rgba(37,22,15,.70) 0%, rgba(58,35,24,.62) 46%, rgba(37,22,15,.30) 100%),
      url("assets/hero-main.png") center/cover no-repeat fixed,
      var(--cream);
  }

  .maintenance-card{
    padding:34px 18px;
    border-radius:28px;
  }

  .logo-wrap{
    width:96px;
    height:96px;
    border-radius:24px;
  }

  .logo-wrap img{width:76px}

  .countdown{grid-template-columns:repeat(2,1fr)}
  .countdown div{min-height:108px}
  .countdown strong{font-size:52px}
  .info-box{grid-template-columns:1fr}
  .intro{font-size:16px}
}


/* V2 Logo-Fix + Countdown 18. Juli 2026 */
.logo-wrap{
  width:132px !important;
  height:132px !important;
  margin-bottom:24px !important;
}

.logo-wrap img{
  width:106px !important;
  height:auto !important;
  object-fit:contain !important;
}

@media(max-width:760px){
  .logo-wrap{
    width:108px !important;
    height:108px !important;
  }

  .logo-wrap img{
    width:86px !important;
  }
}


/* V3 Logo-Placement hochwertiger */
.brand-lockup{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  width:100%;
  margin:0 auto 22px;
}

.brand-line{
  flex:1 1 auto;
  max-width:120px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(153,77,47,.42), transparent);
}

.logo-wrap{
  position:relative;
  z-index:2;
  width:min(540px, 100%);
  height:auto !important;
  margin:0 !important;
  padding:10px 14px 14px;
  display:flex !important;
  justify-content:center;
  align-items:center;
  border-radius:28px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,250,242,.14)) !important;
  border:1px solid rgba(153,77,47,.08);
  box-shadow:
    0 18px 38px rgba(37,22,15,.10),
    inset 0 1px 0 rgba(255,255,255,.42) !important;
  backdrop-filter:blur(10px);
  overflow:visible;
}

.logo-wrap::before{
  content:"";
  position:absolute;
  inset:18% 10%;
  border-radius:999px;
  background:radial-gradient(circle, rgba(201,108,50,.16) 0%, rgba(201,108,50,.06) 45%, transparent 72%);
  filter:blur(18px);
  z-index:0;
}

.logo-wrap img{
  position:relative;
  z-index:1;
  width:min(440px, 92%) !important;
  max-width:100%;
  height:auto !important;
  object-fit:contain !important;
  filter:drop-shadow(0 8px 20px rgba(37,22,15,.18));
}

@media(max-width:760px){
  .brand-lockup{
    gap:10px;
    margin-bottom:18px;
  }

  .brand-line{
    max-width:52px;
  }

  .logo-wrap{
    width:min(360px, 100%);
    padding:8px 10px 10px;
    border-radius:22px !important;
  }

  .logo-wrap img{
    width:min(300px, 92%) !important;
  }
}