/* Design-Tokens */
:root{
  --color-bg: #FFFFFF;
  --color-fg: #0b0f12;
  --color-accent: #089dd9; /* Hellblau */
  --color-muted: #7A7A7A;  /* Mittelgrau */
  --max-w: 1200px;
  --radius: 12px;
  --shadow: 0 2px 24px rgba(0,0,0,.08);
  --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem;
  --space-4: 2rem; --space-5: 3rem; --space-6: 5rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--color-bg); color:var(--color-fg);
  font-family: Calibri, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height:1.6; font-size:1.05rem;
}

.container{max-width:var(--max-w); margin-inline:auto; padding-inline:var(--space-2)}
a{color:inherit}
img{max-width:100%; height:auto; display:block}

/* Skip-Link */
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{
  position:fixed; left: var(--space-2); top: var(--space-2); width:auto; height:auto;
  background:#fff; color:#000; padding:.5rem .75rem; border:2px solid #000; z-index:10000
}

/* Header / Nav */
header{
  position:sticky; top:0; z-index:999; background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid #e5e7eb;
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.5rem}
.brand{display:flex; align-items:center; gap:.75rem; font-weight:700; letter-spacing:.02em}
.brand .dot{width:10px; height:10px; border-radius:999px; background:var(--color-accent); display:inline-block}
nav ul{display:flex; gap:1rem; list-style:none; margin:0; padding:0; flex-wrap:wrap}
nav a{display:block; padding:.6rem .8rem; border-radius:8px; text-decoration:none}
nav a:focus, nav a:hover{outline:2px solid var(--color-accent); outline-offset:2px}

/* Hero */
.hero{
  min-height:70vh; display:grid; place-items:center; position:relative; color:#0b0f12;
  background: url("../img/Banner.png") center/cover no-repeat;
}
.hero::after{content:""; position:absolute; inset:0; } /*background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.85))*/
.hero-inner{position:relative; z-index:1; text-align:center; padding: var(--space-6) var(--space-2)}
.hero h1{font-size:clamp(1.8rem, 3.2vw, 3rem); margin:.5rem 0; color: white;}
.hero p{ color: white;max-width: 900px; margin: 0 auto var(--space-3) auto}

/* Button */
.button{
  display:inline-block; border-radius:999px; padding:.85rem 1.2rem; text-decoration:none; font-weight:600;
  background:var(--color-accent); color:#0b0f12; border:1px solid rgba(0,0,0,.08); box-shadow: var(--shadow)
}
.button:hover, .button:focus{background:var(--color-muted); color:#0b0f12; outline:2px solid #000; outline-offset:2px}

/* Sections */
section{scroll-margin-top:5rem; padding-block: var(--space-6)}
section h2{font-size:clamp(1.4rem, 2.2vw, 2rem); margin:0 0 var(--space-2) 0}
.lead{color:#111827}

/* Two-column intro */
.grid-2{display:grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-4)}
@media (max-width: 900px){ .grid-2{grid-template-columns:1fr} }

/* Gallery */
.gallery{display:grid; gap: .6rem; grid-template-columns: repeat(4, 1fr)}
@media (max-width: 1100px){ .gallery{grid-template-columns: repeat(3, 1fr)} }
@media (max-width: 760px){ .gallery{grid-template-columns: repeat(2, 1fr)} }
.gallery figure{margin:0; border-radius:10px; overflow:hidden; border:1px solid #e5e7eb; background:#fff}
.gallery figcaption{font-size:.85rem; color:var(--color-muted); padding:.3rem .5rem}

/* Cards grid */
.cards{display:grid; gap:1rem; grid-template-columns: repeat(3, 1fr)}
@media (max-width: 960px){ .cards{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 640px){ .cards{grid-template-columns: 1fr} }
.card{padding:1rem; border:1px solid #e5e7eb; border-radius:12px; background:#fff; box-shadow: var(--shadow)}
.card .icon{width:28px; height:28px; border:2px solid var(--color-accent); border-radius:6px; display:inline-block; margin-right:.5rem}

/* Capacity boxes */
.capacity{display:grid; gap:1rem; grid-template-columns: repeat(4, 1fr)}
@media (max-width: 900px){ .capacity{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 520px){ .capacity{grid-template-columns: 1fr} }
.capacity .box{padding:1rem; border:2px solid var(--color-accent); border-radius:12px; background:#fff}
.capacity .box h3{margin:.2rem 0 .6rem 0}

/* Contact */
form{display:grid; gap:.8rem; max-width:760px}
label{font-weight:600}
input, select, textarea{width:100%; padding:.7rem .8rem; border:1px solid #d1d5db; border-radius:10px; background:#fff}
input:focus, select:focus, textarea:focus{outline:3px solid var(--color-accent); outline-offset:1px}
textarea{min-height:140px; resize:vertical}

/* Footer */
footer{padding: var(--space-4) 0; border-top:1px solid #e5e7eb; color:#374151}
footer h2{margin-top:0}
footer address{font-style:normal; line-height:1.7}

/* Utility */
.hr{height:1px; background:linear-gradient(90deg, transparent, #e5e7eb, transparent); margin: var(--space-5) 0}
.center{text-align:center}
.muted{color:var(--color-muted)}
.badge{display:inline-block; background:var(--color-accent); color:#0b0f12; border-radius:6px; padding:.1rem .4rem; font-size:.85rem}
.shadow{box-shadow: var(--shadow)}

/* Lightbox */
.lightbox{
  position: fixed; inset:0; background: rgba(0,0,0,.9); display:none; z-index:10000;
  align-items: center; justify-content: center; padding: 1rem;
}
.lightbox.open{display:flex}
.lightbox img{max-width: 92vw; max-height: 88vh; border-radius: 10px}
.lb-close{position:absolute; top:1rem; right:1rem; font-size:1rem; padding:.4rem .7rem; border-radius:8px; background:#fff; border:1px solid #e5e7eb}
.lightbox .lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px; border:2px solid #fff; background:rgba(0,0,0,.25); color:#fff;
  font-size:28px; line-height:1; cursor:pointer
}
#lb-prev{left:1rem}
#lb-next{right:1rem}
.lb-caption{
  position:absolute; left:0; right:0; bottom:1rem; text-align:center; color:#fff; font-size:.95rem; text-shadow:0 1px 2px rgba(0,0,0,.6);
  padding:0 .5rem
}

/* Reveal on scroll */
.reveal{opacity:0; transform: translateY(14px); will-change: opacity, transform}
.reveal.is-visible{opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.is-visible{opacity:1; transform:none}
}


/* Burger-Button */
.nav-toggle{
  display:none; /* Desktop ausblenden */
  border:1px solid #d1d5db; background:#fff; border-radius:10px;
  padding:.55rem .7rem; line-height:0; cursor:pointer;
}
.nav-toggle:focus{ outline:3px solid var(--color-accent); outline-offset:2px }
.nav-toggle-bar{
  display:block; width:22px; height:2px; background:#0b0f12; margin:4px 0; border-radius:2px
}


/* Mobile Navigation */
@media (max-width: 900px){
  .nav{ position:relative }
  .nav-toggle{ display:inline-block }

  /* Panel */
  #primary-nav[hidden]{ display:none !important }
  #primary-nav{
    position:absolute; right:0; top:100%;
    width:min(92vw, 320px);
    background:#fff; border:1px solid #e5e7eb; border-radius:12px;
    box-shadow: var(--shadow);
    padding:.4rem; z-index:1000;

    /* Punkt 4: sanfter Slide-Down */
    transform: translateY(6px) scale(.98);
    transform-origin: top right;
    opacity:0;
    transition: transform .18s ease, opacity .18s ease;
    will-change: transform, opacity;
  }
  /* geöffnetes Panel (Body hat .nav-open, JS entfernt hidden am Nav) */
  .nav-open #primary-nav{
    transform: none;
    opacity: 1;
  }

  #primary-nav ul{
    display:flex; flex-direction:column; gap:.25rem; margin:0; padding:0; list-style:none;
  }
  #primary-nav a{
    padding:.75rem .8rem; border-radius:8px; text-decoration:none;
  }
  #primary-nav a:focus, #primary-nav a:hover{
    outline:2px solid var(--color-accent); outline-offset:2px;
  }

  /* Wenn geöffnet: visuelles „X“ anstelle von drei Balken */
  .nav-open .nav-toggle-bar:nth-child(1){ transform: translateY(6px) rotate(45deg) }
  .nav-open .nav-toggle-bar:nth-child(2){ opacity:0 }
  .nav-open .nav-toggle-bar:nth-child(3){ transform: translateY(-6px) rotate(-45deg) }
  .nav-open .nav-toggle-bar{ transition: transform .2s ease, opacity .2s ease }
}

/* Desktop: Standardlayout wie bisher */
@media (min-width: 901px){
  #primary-nav{
    position:static; display:block !important; border:none; box-shadow:none;
    width:auto; padding:0; transform:none; opacity:1; transition:none;
  }
  #primary-nav ul{ display:flex; gap:1rem }
}

/* Bewegungsreduktion beachten */
@media (prefers-reduced-motion: reduce){
  #primary-nav{ transition:none; transform:none; opacity:1 }
}


/* CTA-Banner */
.cta-banner{
  background: var(--color-accent); /* Hellblau */
  color: #fff;
  padding-block: var(--space-5);
  text-align:center;
}
.cta-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  flex-wrap:wrap;
}
.cta-banner h2{
  margin:0 0 .5rem 0;
  font-size:clamp(1.4rem,2vw,1.9rem);
}
.cta-banner p{margin:0;font-size:1.05rem}

.cta-buttons{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  justify-content:center;
}
.button-light{
  background:#fff;
  color:#0b0f12;
  border:1px solid #fff;
}
.button-light:hover,
.button-light:focus{
  background:#f3f3f3;
  color:#000;
}
.button-outline{
  background:transparent;
  color:#fff;
  border:2px solid #fff;
}
.button-outline:hover,
.button-outline:focus{
  background:rgba(255,255,255,.15);
  color:#fff;
  outline:2px solid #fff;
  outline-offset:2px;
}

/* Responsive Anpassung */
@media (max-width:900px){
  .cta-content{
    flex-direction:column;
    text-align:center;
  }
}


/* Footer kompakt mit hellgrauem Hintergrund */
footer {
  background: #f5f5f5;
  color: #333;
  padding: 1.5rem 0;              /* sehr kompakt */
  border-top: 1px solid #ddd;
}

footer .container {
  padding-inline: 1rem;           /* reduziert Standardinnenabstand */
}

footer h2 {
  margin: 0 0 .4rem 0;
  font-size: 1.2rem;
  color: #000;
  font-weight: 600;
  text-align: left;
}

.impressum-grid {
  display: block;
  margin: 0;
  padding: 0;
}

.impressum-columns {
  display: grid;
  grid-template-columns: auto auto;
  gap: 1rem;
  align-items: start;              /* verhindert vertikale Streckung */
  margin: 0;
  padding: 0;
}

.impressum-left,
.impressum-right {
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 0;
}

.impressum-left address {
  font-style: normal;
  margin: 0;
}

.impressum-right p {
  margin: 0;
}

footer p.muted {
  margin-top: .8rem;
  font-size: 0.85rem;
  color: #555;
  text-align: center;
}

/* Responsive: untereinander */
@media (max-width: 720px) {
  .impressum-columns {
    grid-template-columns: 1fr;
  }
  .impressum-right {
    margin-top: .6rem;
  }
}

/* Impressum zweispaltig, kompakt */
.impressum-grid { display: block; }

.impressum-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);                   /* kleineres Spalten-Gap */
  margin-top: var(--space-2);            /* weniger Abstand */
}

.impressum-left,
.impressum-right {
  font-size: 0.95rem;
  line-height: 1.5;
}

.impressum-right p {
  margin: 0;
}

.impressum-grid .muted {
  margin-top: var(--space-2);
  font-size: 0.9rem;
  color: #555;
  text-align: center;
}

/* Responsive: einspaltig auf Mobil */
@media (max-width: 700px) {
  .impressum-columns {
    grid-template-columns: 1fr;
  }
  .impressum-right {
    margin-top: var(--space-2);
  }
}


/* Impressum – zweispaltiges Layout */
.impressum-grid{
  display:block;
}
.impressum-columns{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.impressum-left,
.impressum-right{
  font-size:1rem;
  line-height:1.6;
}
.impressum-left address{
  font-style:normal;
}
.impressum-right p{
  margin:0;
}

/* Responsive: untereinander bei kleiner Breite */
@media (max-width: 700px){
  .impressum-columns{
    grid-template-columns:1fr;
  }
  .impressum-right{margin-top: var(--space-3)}
}