/* Modern, responsive styles for Reifen Boxler */
:root{
  --bg: #0b0d10;
  --surface: #14181d;
  --muted: #8aa0b2;
  --text: #e8f0f7;
  --accent: #22d3ee;
  --accent-2: #60a5fa;
  --pill: #1f2937;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
  color: var(--text, #e8f0f7);
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #0b1120 100%);
  line-height:1.6;
  min-height:100vh;
}

/* etwas mehr Platz auf Desktop */
.container{width:min(1200px, 92vw); margin-inline:auto}

/* ===== Header & Branding ===== */
.site-header{
  position:sticky; top:0; z-index:10;
  background:rgba(20,24,29,.85);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  display:flex; align-items:center;
  gap: clamp(.6rem, 2vw, 1rem);
  padding: clamp(.5rem, 1.5vw, .9rem) 0;
  flex-wrap: nowrap; /* verhindert Desktop-Wrapping */
}
.brand{
  display:flex; align-items:center;
  gap: clamp(.5rem, 1.8vw, .8rem);
  min-width:0;
  flex: 1 1 auto;           /* Brand darf schrumpfen */
  max-width: 60%;           /* schiebt die Nav nicht vom Tisch */
}

/* Logo skaliert flüssig über Viewports */
.brand-img{
  height: clamp(40px, 8.5vw, 64px);
  width:auto;
  border-radius:.6rem;
  object-fit:cover;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}

/* Text neben Logo skaliert ebenfalls */
.brand-text{
  display:flex; flex-direction:column; line-height:1.1; min-width:0;
}
.brand-title{
  font-weight:800;
  font-size: clamp(1rem, 3.4vw, 1.45rem);
  letter-spacing:.2px;
  white-space: nowrap;
  overflow:hidden; text-overflow: ellipsis; /* Mobil: schützt vor Überlauf */
}
.brand-sub{
  font-size: clamp(.78rem, 2.4vw, .95rem);
  opacity:.78;
  white-space: nowrap;
  overflow:hidden; text-overflow: ellipsis;
}

/* Navigation */
.nav{
  margin-left:auto; display:flex; gap:.8rem; flex-wrap:wrap; align-items:center;
  flex: 0 0 auto;
}
.nav a{
  color:var(--text); text-decoration:none; padding:.5rem .8rem;
  border-radius:.6rem; background:transparent; border:1px solid transparent;
}
.nav a:hover{border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.03)}
.nav-toggle{
  display:none; margin-right:.4rem;
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  padding: clamp(.3rem, 1.4vw, .45rem) clamp(.55rem, 2.2vw, .7rem);
  border-radius:.6rem; background:var(--surface); color:var(--text);
  border:1px solid rgba(255,255,255,.08); line-height:1; cursor:pointer;
}

/* ===== Hero ===== */
.hero{
  position: relative;
  padding: clamp(1.2rem, 4vw, 2rem) 0 2.4rem;
  background: linear-gradient(160deg, rgba(34,211,238,.15) 0%, rgba(96,165,250,.1) 40%, rgba(15,23,42,.9) 100%);
}
.hero-grid{display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1rem, 5vw, 3rem); align-items:center}
.hero-image{width:100%; height:auto; border-radius:1.2rem; box-shadow:0 10px 40px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08)}
.hero-copy h1{font-size: clamp(1.9rem, 4.2vw, 3rem); line-height:1.15; margin:0 0 .6rem}
.kicker{font-size: clamp(.95rem, 2.4vw, 1.1rem); text-transform:uppercase; letter-spacing:.15em; opacity:.8; margin:.2rem 0 1rem}
.hero-copy p{margin:.4rem 0; color:var(--text)}
.lead{opacity:.9}
.important-date .pill{display:inline-block; margin-top:1rem; padding:.5rem .8rem; border-radius:999px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#02131a; font-weight:800}

/* ===== Galerie ===== */
.gallery-section{padding: 2.2rem 0 2.6rem}
.gallery-section h2{margin:0 0 .2rem}
.gallery-grid{display:grid; grid-template-columns: repeat(12, 1fr); gap:.6rem; margin-top:1rem}
.gallery-grid figure{grid-column: span 4; margin:0; border-radius:.8rem; overflow:hidden; background:var(--surface); border:1px solid rgba(255,255,255,.06); box-shadow:0 6px 20px rgba(0,0,0,.25)}
.gallery-grid img{display:block; width:100%; height:220px; object-fit:cover;}
.gallery-grid figcaption{padding:.5rem .7rem; font-size:.85rem; color:var(--muted)}

/* ===== Kontakt ===== */
.contact-section{padding:2.2rem 0 3rem; background:linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
.contact-card{
  display:grid; grid-template-columns: 1fr; gap:1rem; padding: clamp(1rem, 2.2vw, 1.4rem);
  border:1px solid rgba(255,255,255,.08); border-radius:1rem; background:rgba(20,24,29,.6); box-shadow:0 10px 30px rgba(0,0,0,.25)
}
.contact-section .meta{list-style:none; padding:0; margin:.6rem 0 0; display:grid; gap:.3rem}
.contact-section .meta a{color:var(--text)}

/* ===== Footer ===== */
.site-footer{
  padding: 1.2rem 0 1.6rem;
  border-top: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(15,23,42,0.9) 0%, #0b0d10 100%);
}
.footer-inner{display:flex; gap:1rem; justify-content:space-between; align-items:center; flex-wrap:wrap}
.footer-links{display:flex; gap:1rem}
.footer-links a{color:var(--muted); text-decoration:none}
.footer-links a:hover{color:var(--text)}

/* ===== Desktop-Feinschliff: kein Abschneiden/unnötiges Ellipsis ===== */
@media (min-width: 901px){
  /* Brand-Bereich begrenzen und echtes Umbruchverhalten erlauben */
  .brand{max-width:60%;}
  .brand-text{max-width: clamp(260px, 40vw, 560px);}
  .brand-title,
  .brand-sub{
    white-space: normal;      /* darf über 2 Zeilen laufen */
    overflow: visible;
    text-overflow: clip;      /* kein Ellipsis auf Desktop */
  }

  /* Nav bleibt einzeilig und rückt zusammen, wenn’s eng wird */
  .nav{flex-wrap: nowrap; gap: clamp(.4rem, 1.2vw, .8rem);}
  .nav a{padding: .45rem clamp(.6rem, 1.2vw, .8rem);}
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .hero-grid{grid-template-columns: 1fr;}
  .nav{display:none}
  .nav.open{
    display:flex; margin-left:0; flex-direction:column; gap:.4rem; width:100%;
    position:absolute; left:0; top:100%;
    background: rgba(20,24,29,.98);
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: .6rem clamp(.8rem, 3.5vw, .9rem) .9rem;
  }
  .nav-toggle{display:block}
  .gallery-grid figure{grid-column: span 6}
  .header-inner{align-items:flex-start;}
  .brand{align-items:flex-start;}
}

@media (max-width: 560px){
  .gallery-grid figure{grid-column: span 12}
  .hero-image{border-radius:.9rem}
  .brand{flex-direction:column; align-items:flex-start; gap:.35rem;}
  .brand-title{white-space:normal;}
}