:root{
  --bg:#06070a;
  --bg-alt:#0b0d13;
  --card:#151823;
  --card-soft:#11131b;
  --text:#f5f7fa;
  --muted:#b7bcc6;
  --border:rgba(255,255,255,.12);
  --primary:#d0002a;
  --primary-soft:rgba(208,0,42,.14);
  --shadow:0 18px 55px rgba(0,0,0,.65);
  --radius:14px;
  --max:1160px;
  --surface-soft:rgba(27,29,33,.35);
}

[data-theme="light"]{
  --bg:#ffffff;
  --bg-alt:#ffffff;
  --card:#ffffff;
  --card-soft:#fff5f7;
  --text:#111111;
  --muted:#3b3b3b;
  --border:rgba(15,23,42,.12);
  --primary:#d0002a;
  --primary-soft:rgba(208,0,42,.10);
  --shadow:0 18px 40px rgba(15,23,42,.12);
  --surface-soft:#fff6f8;
}

*{box-sizing:border-box}
html,body{height:100%}
html,body{overflow-x:hidden}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 800px at 10% 0%, #15192c 0, transparent 55%),
    radial-gradient(1000px 700px at 90% 100%, #1b0b14 0, transparent 60%),
    linear-gradient(180deg,#050509,#050608);
  color:var(--text);
  line-height:1.6;
}

body[data-theme="light"]{
  background:
    radial-gradient(1200px 800px at 0% 0%, #ffffff 0, transparent 55%),
    radial-gradient(900px 700px at 100% 100%, #fff2f5 0, transparent 60%),
    linear-gradient(180deg,#ffffff,#fff8fa);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(100% - 2.4rem, var(--max)); margin-inline:auto}

/* Header / Nav */
.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(90deg, rgba(5,6,10,.96), rgba(10,8,12,.94));
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.brand{
  font-family:Montserrat, Inter, system-ui, sans-serif;
  font-weight:800;
  letter-spacing:-.02em;
  display:flex; align-items:center; gap:.75rem;
}
.brand-logo{
  height:56px;
  width:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.brand-logo img{
  width:auto;
  height:100%;
  object-fit:contain;
  filter:none;
  border-radius:inherit;
  display:block;
}
.brand-text{display:none}
.nav-links{
  display:flex; align-items:center; gap:1.4rem;
}
.nav-links a{
  font-family:Montserrat, Inter, system-ui, sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.78rem;
  color:var(--muted);
  padding:.35rem .2rem;
}
.nav-links .cta:hover{
  color:var(--text);
}
.nav-links a.active, .nav-links a:hover{color:var(--text)}
.nav-links a:hover{color:var(--primary)}
.cta{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--primary);
  color:var(--text);
  border:1px solid rgba(208,0,42,.55);
  padding:.6rem .9rem;
  border-radius:999px;
  font-weight:700;
  font-size:.9rem;
  box-shadow:0 12px 30px rgba(208,0,42,.28);
  transform:translateY(0);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.cta.secondary{
  background:transparent;
  border-color:rgba(255,255,255,.22);
  box-shadow:none;
}
.cta:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 40px rgba(0,0,0,.6);
  color:var(--text);
}
.cta.secondary:hover{
  background:rgba(255,255,255,.04);
}
.menu-btn{
  display:none;
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:.55rem .65rem;
}

.theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:999px;
  padding:.55rem .75rem;
  font-family:Montserrat, Inter, system-ui, sans-serif;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.72rem;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.theme-toggle:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.22);
}
.theme-fab{
  position:fixed;
  right:1.1rem;
  top:50%;
  transform:translateY(-50%);
  z-index:90;
  background:rgba(5,6,10,.92);
  border-color:rgba(208,0,42,.55);
  box-shadow:0 12px 32px rgba(0,0,0,.45);
}
.theme-fab:hover{
  transform:translateY(calc(-50% - 1px));
  background:rgba(12,13,18,.95);
}
body[data-theme="light"] .theme-toggle{
  color:var(--text);
  background:rgba(255,255,255,.65);
  border-color:rgba(15,23,42,.18);
}
body[data-theme="light"] .theme-fab{
  background:#ffffff;
  border-color:rgba(208,0,42,.55);
  color:#111111;
  box-shadow:0 12px 28px rgba(208,0,42,.14);
}
body[data-theme="light"] .theme-fab:hover{
  background:#fff7f9;
}
.mobile-panel{
  display:none;
  border-top:1px solid var(--border);
  background:rgba(10,10,11,.95);
}
.mobile-panel a{
  display:block;
  padding:1rem 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  color:var(--muted);
  font-family:Montserrat, Inter, system-ui, sans-serif;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.8rem;
}
.mobile-panel a:last-child{border-bottom:none}
.mobile-panel a.active{color:var(--primary)}
.mobile-panel .mobile-cta{padding:1rem 0}

/* Sections */
.section{padding:72px 0}
.section.compact{padding:48px 0}
.card{
  background:rgba(27,29,33,.72);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.grid{
  display:grid;
  gap:1rem;
}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.muted{color:var(--muted)}
.kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--primary);
  background:rgba(208,0,42,.09);
  border:1px solid rgba(208,0,42,.30);
  padding:.45rem .75rem;
  border-radius:999px;
  font-family:Montserrat, Inter, system-ui, sans-serif;
  font-weight:700;
  font-size:.9rem;
}
.h1,.h2,.h3{
  font-family:Montserrat, Inter, system-ui, sans-serif;
  line-height:1.1;
  margin:0 0 .8rem 0;
}
.h1{font-size:clamp(2.2rem, 5vw, 3.6rem); font-weight:800}
.h2{font-size:clamp(1.6rem, 3vw, 2.2rem); font-weight:800}
.h3{font-size:1.2rem; font-weight:800}
.lead{font-size:1.1rem}
.btn-row{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.2rem}

/* Hero */
.hero{
  position:relative;
  padding:92px 0 82px;
  overflow:hidden;
  min-height:72vh;
}
.hero::before{
  content:"";
  position:absolute; inset:-2px;
  background:radial-gradient(900px 520px at 5% 5%, rgba(208,0,42,.35), transparent 60%);
  opacity:.8;
  z-index:0;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg, rgba(6,7,10,.88), rgba(6,7,10,.8), rgba(6,7,10,.9)),
    url("./assets/hero-banner.jpg") center center/cover no-repeat;
  mix-blend-mode:normal;
  filter:blur(0.7px);
  transform:scale(1.03);
  opacity:.85;
  z-index:-1;
}
.hero-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:2rem;
}
.hero-copy{
  animation: hero-fade-up .7s ease-out both;
}
.hero-panel{
  padding:1.35rem 1.3rem 1.2rem;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.20);
  background:linear-gradient(145deg, rgba(5,6,10,.96), rgba(13,16,24,.96));
  box-shadow:0 22px 60px rgba(0,0,0,.8);
}
.hero-panel .stat{display:flex; justify-content:space-between; gap:1rem; padding:.65rem 0; border-bottom:1px solid rgba(255,255,255,.08)}
.hero-panel .stat:last-child{border-bottom:none}
.pill{display:inline-flex; gap:.5rem; align-items:center; padding:.35rem .6rem; border-radius:999px; border:1px solid rgba(255,255,255,.16); color:var(--muted); font-size:.9rem}
/* Keep hero banner contrast stable in both themes */
.hero .h1,
.hero .h2,
.hero .h3,
.hero .lead,
.hero .stat strong,
.hero .stat a{
  color:#f5f7fa;
}
.hero .muted,
.hero .pill{
  color:#d3d8e1;
}

/* Service cards */
.service{
  padding:1.25rem 1.2rem 1.15rem;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(145deg, var(--card-soft), var(--card));
  box-shadow:0 14px 38px rgba(0,0,0,.7);
  position:relative;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.service h4{
  margin:.25rem 0 .35rem 0;
  font-family:Montserrat, Inter, system-ui, sans-serif;
  font-weight:800;
}
.service .icon{
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:12px;
  background:var(--primary-soft);
  border:1px solid rgba(208,0,42,.40);
  color:var(--primary);
  font-weight:900;
}
.service::after{
  content:"";
  position:absolute;
  inset:auto -30%;
  top:-55%;
  height:70%;
  background:radial-gradient(circle at 10% 0, rgba(255,255,255,.12), transparent 60%);
  opacity:0;
  transition:opacity .22s ease;
  pointer-events:none;
}
.service:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.24);
  box-shadow:0 22px 55px rgba(0,0,0,.85);
}
.service:hover::after{
  opacity:1;
}

/* Heading */
.section-heading{
  text-align:center;
  max-width:760px;
  margin:0 auto 1.4rem auto;
}
.section-heading .sub{margin:0; color:var(--muted)}

/* Hours */
.hours{
  padding:1.4rem;
  background:linear-gradient(145deg, rgba(10,11,16,.96), rgba(20,21,30,.96));
  border:1px solid var(--border);
  border-radius:var(--radius);
  max-width:560px;
  margin-inline:auto;
}
.hours-row{display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0}
.hours-row strong{font-weight:800}
.hours-row + .hours-row{
  border-top:1px dashed rgba(255,255,255,.14);
}

/* Prose pages */
.page{padding-top:24px}
.prose{
  background:rgba(27,29,33,.55);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.2rem;
}
.prose h3{
  margin:1.2rem 0 .5rem;
  font-family:Montserrat, Inter, system-ui, sans-serif;
}
.prose p{margin:.55rem 0}
.prose ul{margin:.5rem 0 .7rem 1.2rem}
.prose a{color:var(--primary); text-decoration:underline; text-underline-offset:2px}

/* Forms */
label{display:block; font-size:.92rem; color:var(--muted); margin:0 0 .35rem}
input, textarea{
  width:100%;
  border:1px solid var(--border);
  background:rgba(27,29,33,.7);
  color:var(--text);
  border-radius:12px;
  padding:.8rem .9rem;
  outline:none;
}
textarea{resize:vertical; min-height:140px}
input:focus, textarea:focus{border-color:rgba(208,0,42,.55); box-shadow:0 0 0 4px rgba(208,0,42,.12)}
.form-card{padding:1.2rem}
.form-grid{display:grid; gap:1rem}

/* Contact layout */
.contact-grid{
  max-width:1000px;
  margin:0 auto;
  align-items:start;
  width:100%;
  justify-items:stretch;
  min-width:0;
}
.contact-grid > *{
  min-width:0; /* Allow grid items to shrink on mobile */
}
.contact-grid *{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Footer */
.site-footer{
  margin-top:40px;
  border-top:1px solid var(--border);
  background:radial-gradient(900px 600px at 10% 0%, rgba(208,0,42,.38), transparent 60%), #050509;
}
.footer-grid{display:grid; gap:1.6rem; grid-template-columns:2fr 1.2fr 1.4fr 1.2fr}
.footer-title{
  font-family:Montserrat, Inter, system-ui, sans-serif;
  font-weight:800;
  margin:0 0 .7rem 0;
}
.footer-col h4{
  font-family:Montserrat, Inter, system-ui, sans-serif;
  font-weight:800;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin:0 0 .65rem;
}
.footer-col a{color:var(--muted)}
.footer-col a:hover{color:var(--primary)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:1rem 0;
  text-align:center;
  font-size:.85rem;
  color:var(--muted);
}

.section-soft{
  background:var(--surface-soft);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

body[data-theme="light"] .site-header{
  background:linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,247,250,.95));
}
body[data-theme="light"] .mobile-panel{
  background:rgba(255,255,255,.98);
}
body[data-theme="light"] .mobile-panel a{
  border-bottom:1px solid rgba(15,23,42,.08);
}
body[data-theme="light"] .card{
  background:#ffffff;
}
body[data-theme="light"] .prose{
  background:#ffffff;
}
body[data-theme="light"] .hours{
  background:linear-gradient(145deg, #ffffff, #fff6f8);
}
body[data-theme="light"] .hours-row + .hours-row{
  border-top:1px dashed rgba(15,23,42,.18);
}
body[data-theme="light"] input,
body[data-theme="light"] textarea{
  background:#ffffff;
  color:#111111;
}
body[data-theme="light"] .site-footer{
  background:radial-gradient(900px 600px at 10% 0%, rgba(208,0,42,.22), transparent 60%), #fff8fa;
}
body[data-theme="light"] .footer-bottom{
  border-top:1px solid rgba(15,23,42,.12);
}

/* Responsive */
@media (max-width: 900px){
  .hero-inner{gap:1.8rem}
  .footer-grid{grid-template-columns:1fr 1fr}
  .brand-logo{
    height:50px;
  }
  .hero{
    min-height:64vh;
  }
  /* Contact: auch auf Tablets nicht zu breit */
  .contact-grid{
    max-width:780px;
  }
}
@media (max-width: 760px){
  .nav-links{display:none}
  .menu-btn{display:inline-flex; align-items:center; gap:.5rem}
  .mobile-panel{display:none}
  .mobile-panel.open{display:block}
  .grid.cols-3{grid-template-columns:1fr}
  .grid.cols-2{grid-template-columns:1fr}
  .section{padding:56px 0}
  .brand-logo{
    height:46px;
  }
  /* Mobile: Footer nicht 2-spaltig "quetschen" */
  .footer-grid{
    grid-template-columns:1fr;
    gap:1.1rem;
  }
  .footer-col{
    padding:0.1rem 0;
  }
  .footer-col h4{
    font-size:.92rem;
    letter-spacing:.1em;
  }
  .footer-bottom{
    padding:0.85rem 0;
  }

  /* Mobile: Öffnungszeiten lesbarer (nicht nebeneinander) */
  .hours{
    padding:1.05rem;
  }
  .hours-row{
    flex-direction:column;
    align-items:flex-start;
    gap:.25rem;
    padding:.45rem 0;
  }
  .hours-row strong{
    font-size:1rem;
  }

  /* Etwas mehr Luft unter dem Sticky-Header auf schmalen Screens */
  .page{
    padding-top:34px;
  }

  .hero{
    min-height:60vh;
  }
  /* Contact: Formular-/Kartenbreite sauber zentriert */
  .contact-grid{
    width:100%;
    max-width:620px;
    margin-inline:auto;
  }
  .contact-grid .form-card{
    width:100%;
    max-width:100%;
    margin-inline:auto;
  }
  .contact-grid .form-card form,
  .contact-grid .form-card .form-grid{
    max-width:100%;
  }
  /* Maps/Iframe: falls Embed auf Mobile minimal zu breit rendert */
  iframe{max-width:100%; display:block}
  .theme-fab{
    top:auto;
    right:1rem;
    bottom:1rem;
    transform:none;
  }
  .theme-fab:hover{
    transform:translateY(-1px);
  }
}

@keyframes hero-fade-up{
  0%{opacity:0; transform:translateY(18px)}
  100%{opacity:1; transform:translateY(0)}
}