/* 1) Brand & Theme */
:root{
  /* Brandfarben */
  --brand-black:#111111;
  --brand-red:#e11d48;    /* Rot */
  --brand-orange:#f59e0b; /* Orange */
  --brand-yellow:#facc15; /* Gelb */

  /* UI-Farben */
  --bg:#fafafa;
  --surface:#ffffff;
  --border:#e5e7eb;
  --text:#171717;
  --muted:#525252;

  /* States */
  --focus:#f59e0b;
  --shadow:0 10px 30px rgba(17,17,17,.08);

  /* Layout */
  --radius:14px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px;
  --container:1100px;
}

/* 2) Reset & Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:16px/1.6 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-black);text-decoration:none}
a:hover{opacity:.9}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--space-4)}
.section{padding:var(--space-12) 0}
.section__head{margin-bottom:var(--space-6)}
.lead{color:var(--muted);max-width:65ch}
.eyebrow{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-size:.85rem}

/* 3) Header & Navigation */
.site-header{
  position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.9);backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:12px var(--space-4)
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  color: var(--brand-black);
}

.logo img {
  width: 100%;
  max-width: 180px; /* Passe diesen Wert bei Bedarf an */
  height: auto;
  object-fit: contain;
  display: block;
}

.kw-mark {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kw {
  font-size: 1.2rem;
  letter-spacing: .02em;
}

.swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid #d4d4d4;
}

@media (max-width: 500px) {
  .logo img {
    max-width: 140px;
  }
}


.swatch--r { background: var(--brand-red); }
.swatch--o { background: var(--brand-orange); }
.swatch--y { background: var(--brand-yellow); }

.site-nav ul{display:flex;gap:18px;list-style:none;padding:0;margin:0}
.site-nav a{padding:8px 12px;border-radius:8px;border:1px solid transparent}
.site-nav a.is-active, .site-nav a[aria-current="page"]{
  border-color:transparent;
  background:linear-gradient(90deg, rgba(225,29,72,.12), rgba(245,158,11,.12) 50%, rgba(250,204,21,.12));
}
.nav-toggle{background:none;border:1px solid var(--border);border-radius:10px;padding:8px;display:none}
.nav-toggle__bar{display:block;width:20px;height:2px;background:#404040;margin:4px 0}

@media (max-width: 800px){
  .nav-toggle{display:block}
  .site-nav{position:absolute;top:58px;right:10px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:8px;box-shadow:var(--shadow);display:none}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;gap:4px}
}
.h1kw{

  color:#111; text-decoration: underline;text-decoration-color: linear-gradient(90deg, var(--brand-red), var(--brand-orange) 50%, var(--brand-yellow));
}
/* 4) Hero */
.hero{padding:clamp(48px,6vw,96px) 0}
.hero__content{display:grid;gap:var(--space-4);max-width:720px}

/* 5) Buttons & Cards */
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;font-weight:700;border:1px solid transparent;cursor:pointer}
.btn--primary{
  color:#111; background:linear-gradient(90deg, var(--brand-red), var(--brand-orange) 50%, var(--brand-yellow));
  border-color:#00000010; box-shadow:0 6px 16px rgba(245,158,11,.25)
}
.btn--primary:focus{outline:3px solid var(--focus);outline-offset:2px}
.btn--ghost{border-color:#d4d4d4}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-6);box-shadow:var(--shadow)}

/* 6) Grid */
.grid{display:grid;gap:var(--space-4)}
.cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* 7) Slider */


.slider{position:relative;border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow)}
.slides{position:relative}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.slide.is-active{opacity:1;position:relative}
.slide img {
  width: 100%;
  height: auto;              /* Höhe passt sich an Bildverhältnis an */
  object-fit: contain;       /* Kein Beschnitt – alles sichtbar */
  display: block;
  background-color: #f3f4f6; /* Optional: dezenter Hintergrund bei ungenutztem Raum */
  max-height: 520px;         /* Damit große Bilder nicht den Slider sprengen */
  margin: 0 auto;            /* Zentriert, falls Bild kleiner als Container */
}

.slide figcaption{
  position:absolute;left:12px;bottom:12px;background:rgba(17,17,17,.7);color:#fff;
  padding:6px 10px;border-radius:8px;font-size:.9rem
}
.slider__ctrl{
  position:absolute;top:50%;transform:translateY(-50%);
  border:none;background:linear-gradient(90deg,var(--brand-red),var(--brand-orange),var(--brand-yellow));
  color:#111;width:40px;height:40px;border-radius:999px;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow)
}
.slider__ctrl.prev{left:10px}
.slider__ctrl.next{right:10px}
.slider__dots{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:8px;justify-content:center}
.slider__dots button{
  width:10px;height:10px;border-radius:999px;border:1px solid #bdbdbd;background:transparent
}
.slider__dots button[aria-selected="true"]{
  background:linear-gradient(90deg,var(--brand-red),var(--brand-orange),var(--brand-yellow));border-color:transparent
}

/* 8) Galerie & Lightbox */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.gallery__item{border-radius:12px;overflow:hidden;border:1px solid var(--border);background:#fff}
.gallery__item img{aspect-ratio:4/3;object-fit:cover;transition:transform .3s ease}
.gallery__item:hover img{transform:scale(1.03)}
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  padding: 160px 16px;
  display: flex;
  flex-direction: column; /* Stack children vertically */
  align-items: center;     /* Center horizontally */
}



.lightbox[hidden]{display:none}
.lightbox__img {
  max-width: min(1200px, 90vw);
  max-height: 80vh;
  border-radius: 12px;
  box-shadow: var(--shadow);
  align-self: center;
}
.lightbox__close{
  position:absolute;top:160px;right:16px;border:none;background:linear-gradient(90deg,var(--brand-red),var(--brand-orange),var(--brand-yellow));
  color:#111;border-radius:999px;width:40px;height:40px;font-size:22px;cursor:pointer;box-shadow:var(--shadow)
}
.lightbox__caption {
  text-align: center;
  color: #f5f5f5;
  margin-top: 8px;
  align-self: center; /* Optional: center caption */
}

/* 9) Formulare */
.form{max-width:720px;margin:0 auto}
.form__group{display:grid;gap:6px;margin-bottom:14px}
.form__group--inline{display:flex;align-items:center}
label{font-weight:700;color:#222}
input, textarea{
  background:#fff;color:var(--text);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;font:inherit
}
input:focus, textarea:focus, .btn:focus, a:focus{outline:3px solid var(--focus);outline-offset:2px}
.checkbox{display:flex;gap:10px;align-items:center}
.error{color:#b91c1c;min-height:1.2em}
.toast{margin-top:12px;background:#f7fee7;color:#3f6212;border:1px solid #d9f99d;padding:10px 12px;border-radius:10px}

/* 10) Footer */
.site-footer{display:flex;align-items:center;justify-content:space-between;padding:24px 0;border-top:1px solid var(--border);margin-top:var(--space-12)}
/* Öffnungszeiten-Tabelle */
.opening-hours {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
  font-family: inherit;
  font-size: 1rem;
  background-color: #fff;
  border: 1px solid #ddd;
}

.opening-hours th,
.opening-hours td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.opening-hours th {
  background-color: #f7f7f7;
  font-weight: bold;
  color: #333;
}

.opening-hours tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.opening-hours caption {
  caption-side: top;
  text-align: left;
  font-weight: bold;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

/* Optional: Responsive Anpassung für mobile Geräte */
@media (max-width: 600px) {
  .opening-hours th,
  .opening-hours td {
    padding: 0.5rem;
    font-size: 0.9rem;
  }
}

/* Typo scale */
h1{font-size:clamp(28px,4.8vw,44px);line-height:1.2;margin:.5em 0 .2em}
h2{font-size:clamp(22px,3.4vw,32px);line-height:1.25;margin:.8em 0 .3em}
h3{font-size:clamp(18px,2.6vw,24px);line-height:1.3;margin:.8em 0 .3em}
.page-head{padding:32px 0}
.form__hint{color:#6b7280;font-size:.9rem}

/* Prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}