/* =========================
   Handy Reparatur Ebermannstadt – style.css
   ========================= */

/* ------ Design-Variablen ------ */
:root{
  --bg:#121212;
  --surface:#1e1e1e;
  --surface-soft:#191919;
  --text:#e0e0e0;
  --muted:#9aa0a6;
  --link:#4db6ac;
  --link-2:#82e9de;
  --accent:#4db6ac;
  --whatsapp:#25D366;
  --error:#e57373;
  --success:#81c784;
}

/* ------ Reset/Grundlagen ------ */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  display:flex;
  flex-direction:column;
  font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.site-main{ flex:1 }

.center{ text-align:center }
.small{ font-size:.95rem }

h1,h2,h3{ color:#fff; margin:0 0 .5rem }
p{ margin:.5rem 0 1rem }
a{ color:var(--link); text-decoration:none }
a:hover{ color:var(--link-2) }

/* =========================
   HEADER / NAVIGATION
   ========================= */
.site-header{
  position:sticky; top:0; z-index:1000;
  display:grid; grid-template-columns:auto 1fr auto; /* Logo | Mitte | Nav */
  align-items:center; gap:1rem;
  padding:.6rem 1rem;
  background:var(--surface);
  border-bottom:1px solid #2a2a2a;
}
.logo img{
  height:64px; width:auto; display:block;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.05));
}

/* Mittige Desktop-Info – absolut zentriert, blockiert keine Klicks */
.nav-extra{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -50%);
  text-align:center;
  color:#b7dcd8; opacity:.95; font-weight:700;
  font-size:.95rem; white-space:nowrap;
  pointer-events:none;
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}

/* Nav rechts ausrichten */
.main-nav{
  position:relative;
  justify-self:end;
}
.nav-toggle{
  display:none; background:none; border:1px solid #333; color:#fff;
  padding:.4rem .6rem; border-radius:6px; font-size:1.1rem; cursor:pointer;
}
.nav-links{
  list-style:none; display:flex; gap:1rem; margin:0; padding:0;
  justify-content:flex-end;
}
.nav-links a{
  color:#eee; font-weight:600; padding:.4rem .6rem; border-radius:6px;
}
.nav-links a.active, .nav-links a:hover{ background:#2b2b2b }

/* Mobil: Zusatz ausblenden, Burger-Menü anzeigen */
@media (max-width:820px){
  .nav-extra{ display:none }
  .nav-toggle{ display:inline-block }
  .nav-links{
    position:absolute; right:0; top:calc(100% + .5rem);
    background:var(--surface); border:1px solid #333; border-radius:8px;
    width:min(85vw,320px); padding:.5rem; box-shadow:0 10px 30px rgba(0,0,0,.4);
    display:none; flex-direction:column; gap:.25rem; justify-content:flex-start;
  }
  .nav-links[data-collapsed="false"]{ display:flex }
  .nav-links li a{ width:100% }
}

/* =========================
   HERO
   ========================= */
.hero{
  position:relative; text-align:center; color:#fff;
  background:url('images/hero.jpg') center/cover no-repeat;
  padding:clamp(3rem,6vw,6rem) 1rem;
}
.hero-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.5) }
.hero-content{ position:relative; max-width:900px; margin:0 auto }
.hero h1{ font-size:clamp(1.6rem,3.2vw,2.6rem) }
.hero p{ font-size:clamp(1rem,2.2vw,1.2rem); opacity:.95 }
.hero-actions{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:1rem }

.button{
  display:inline-block; padding:.8rem 1.2rem; font-weight:700; border-radius:8px;
  border:none; cursor:pointer; transition:transform .2s,opacity .2s; text-align:center;
}
.button.cta{ background:var(--accent); color:#000 }
.button.whatsapp{ background:var(--whatsapp); color:#fff }
.button.ghost{ background:transparent; border:1px solid #3a3a3a; color:#fff }
.button.block{ display:block; width:100% }
.button:hover{ transform:translateY(-2px); opacity:.95 }

/* =========================
   SECTIONS & CARDS
   ========================= */
section{ padding:2.5rem 1rem }
.cards{ display:grid; gap:1rem }
/* Karten mittig & nicht über volle Breite */
.cards--center{
  max-width:1100px; margin:0 auto;
  grid-template-columns:repeat(3, minmax(260px,1fr));
}
@media (max-width:900px){ .cards--center{ grid-template-columns:repeat(2, minmax(260px,1fr)) } }
@media (max-width:600px){ .cards--center{ grid-template-columns:1fr } }

.card{
  background:var(--surface);
  border:1px solid #2a2a2a;
  border-radius:12px;
  padding:1.1rem;
}
.card--soft{ background:var(--surface-soft) }
.note{ color:var(--muted) }
.note.center{ text-align:center }

/* =========================
   GALERIE / SLIDESHOW
   ========================= */
.gallery h2{ text-align:center; margin-bottom:1rem }
.slideshow{
  position:relative; max-width:1100px; margin:0 auto;
  border-radius:14px; overflow:hidden; background:#0f0f0f; border:1px solid #2a2a2a;
}
.slides{ position:relative; height:0; padding-bottom:52% }   /* ~16:9 */
.slide{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease }
.slide.is-active{ opacity:1 }
.slide img{ width:100%; height:100%; object-fit:cover; display:block }
.slide figcaption{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
  color:#fff; padding:1rem; font-weight:600;
}
.slideshow .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.45); border:1px solid #3a3a3a; color:#fff;
  font-size:2rem; line-height:1; border-radius:50%;
  width:44px; height:44px; display:grid; place-items:center; cursor:pointer; z-index:5;
}
.slideshow .prev{ left:10px }
.slideshow .next{ right:10px }
.slideshow .nav:hover{ background:rgba(0,0,0,.6) }
.dots{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; gap:.4rem; justify-content:center; z-index:6;
}
.dots button{
  width:10px; height:10px; border-radius:50%;
  border:1px solid #e0e0e0; background:transparent; opacity:.6; cursor:pointer;
}
.dots button[aria-current="true"]{ background:#e0e0e0; opacity:1 }

/* =========================
   PAGE CONTAINERS
   ========================= */
.page{ max-width:980px; margin:0 auto; padding:1rem }
.page.narrow{ max-width:760px }
.page-head{ margin:1rem auto 1.2rem }

/* Kontakt-Seite: breiter Seitencontainer */
.page.contact-wide{
  max-width:none; width:100%;
  padding-left:1rem; padding-right:1rem;
}

/* =========================
   KONTAKT-FORMULAR (max. 50% Viewport auf Desktop)
   ========================= */
.contact-form{
  max-width:720px; margin:1rem auto 3rem; display:grid; gap:1rem;
}
.contact-form.wide-xxl{
  width: min(50vw, 1100px);
  max-width: none;
  margin-left:auto; margin-right:auto;
}
.field{ display:grid; gap:.35rem }
label{ font-weight:700 }
input, textarea{
  width:100%; padding:1rem; border-radius:10px;
  border:1px solid #3a3a3a; background:#1d1d1d; color:#eee; font:inherit;
}
textarea{ min-height:360px; resize:none }
input::placeholder, textarea::placeholder{ color:#8a8a8a }
input:focus, textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(77,182,172,.2);
}
@media (max-width:900px){
  .contact-form.wide-xxl{ width:100% }
}

/* =========================
   IMPRESSUM – Breite & Handyfix
   ========================= */
.impressum p,
.impressum h2,
.impressum h3,
.impressum a{
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:normal !important;
  word-break:normal;
  overflow-wrap:anywhere;
}
/* Impressum so breit wie das Kontaktformular */
.page.narrow.impressum{
  max-width:none; width:100%;
  padding-left:1rem; padding-right:1rem;
}
.page.narrow.impressum .page-head,
.page.narrow.impressum > .card{
  width:min(50vw, 1100px);
  margin-left:auto; margin-right:auto;
}
@media (max-width:900px){
  .page.narrow.impressum .page-head,
  .page.narrow.impressum > .card{ width:100% }
}

/* =========================
   FOOTER & CORNER BADGE
   ========================= */
.site-footer{
  background:#1a1a1a; color:#9aa0a6; text-align:center;
  padding:1.2rem; border-top:1px solid #2a2a2a;
}
.site-footer a{ color:#9aa0a6 }
.site-footer a:hover{ color:#fff }

.corner-badge{
  position:fixed; left:16px; bottom:16px; z-index:9999;
  width:56px; height:56px;
  background:url('images/hre-logo-badge-64.png') center/contain no-repeat;
  opacity:.9; transition:transform .2s, opacity .2s;
}
.corner-badge:hover{ transform:scale(1.06); opacity:1 }
@media (max-width:600px){
  .corner-badge{ width:48px; height:48px; left:12px; bottom:12px }
}