:root{--muted:#6b7280}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#f4f6f8;color:#111;line-height:1.55}

/* ===== Klickbares Logo oben links ===== */
/*
  WICHTIG:
  Das Top-Menü (.site-menu) hat z-index:3500.
  Damit das Logo auf iPad/Tablet nicht von der Menüleiste verdeckt wird,
  muss das Logo darüber liegen.
*/
.site-logo{position:fixed;top:20px;left:28px;z-index:5001;display:block}
.site-logo img{width:120px;height:auto;border-radius:50%;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:.25s ease}
.site-logo img:hover{transform:scale(1.08)}
@media(max-width:700px){.site-logo{top:14px;left:14px}.site-logo img{width:56px}}

/* ===== Social Media oben rechts ===== */
.social-bar{position:fixed;top:15px;right:20px;display:flex;gap:12px;z-index:9999}
.social-bar a{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25);transition:.25s}
.social-bar a:hover{transform:scale(1.15)}
.social-bar img{width:22px;height:22px}

/* ===== HERO ===== */




.hero{
  position:relative;
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#fff;
  padding:clamp(60px,10vh,120px) 20px;
  overflow:hidden;
}
.hero--compact{min-height:45vh;padding:110px 20px 70px}
.hero::before{
  content:"";position:absolute;inset:0;
  background:var(--hero-bg, url("/bilder/index.png")) center/cover no-repeat;
  z-index:-2;
}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.58),rgba(0,0,0,.58));z-index:-1}
.hero h1{font-size:44px;margin:10px 0}
.hero h2{margin:0 0 10px;font-weight:800}
.hero p{opacity:.92;margin:0 0 18px;max-width:860px}

.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.cta{
  display:inline-block;background:#fff;color:#111;padding:14px 20px;border-radius:12px;
  font-weight:800;text-decoration:none;transition:.2s
}
.cta:hover{background:#e5e5e5}
.cta.dark{background:#111;color:#fff}
.cta.dark:hover{background:#333}

/* Trust pills (optional) */
.trust{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:920px}
.trust span{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  padding:8px 12px;border-radius:999px;font-weight:700;font-size:14px
}

/* ===== MAIN CARD ===== */
.container{max-width:980px;margin:40px auto;padding:0 16px}
.container--overlay{margin:-40px auto 40px}
.card{background:#fff;border-radius:16px;padding:35px;box-shadow:0 10px 40px rgba(0,0,0,.12)}
h1,h2,h3{line-height:1.2}
h2{margin-top:28px;border-left:4px solid #111;padding-left:10px}
ul{padding-left:18px}
li{margin:6px 0}
.muted{margin:0;color:var(--muted);font-size:13px}

.notice{background:#f1f3f5;padding:12px;border-radius:10px;font-size:14px;margin-top:14px}

/* Two-column info boxes */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.box{border:1px solid #eef0f2;border-radius:14px;padding:14px;background:#fbfcfd}
@media(max-width:860px){.two-col{grid-template-columns:1fr}}

/* ===== Gallery ===== */
.gallery{margin:18px 0 6px;padding:14px;border:1px solid #eef0f2;border-radius:14px;background:#fbfcfd}
.gallery-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.gallery h3{margin:0;font-size:18px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.shot{margin:0;border-radius:14px;overflow:hidden;border:1px solid #eef0f2;background:#fff}
.shot img{display:block;width:100%;height:170px;object-fit:cover;background:#e9edf1}
.shot figcaption{padding:10px 12px;font-size:13px;color:#374151}
@media (max-width:820px){.gallery-grid{grid-template-columns:1fr}.shot img{height:220px}}

/* ===== Footer ===== */
footer{text-align:center;color:#777;padding:30px 20px}
footer a{color:#111;text-decoration:none;margin:0 8px}
footer a:hover{text-decoration:underline}

/* ===== Floating WhatsApp Button ===== */
.whatsapp-float{
  position:fixed;right:18px;bottom:18px;z-index:9998;
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:999px;
  background:#25D366;color:#0b1b10;text-decoration:none;font-weight:800;
  box-shadow:0 10px 30px rgba(0,0,0,.18)
}
.whatsapp-float:hover{filter:brightness(.95)}
.whatsapp-float svg{width:20px;height:20px;flex:0 0 20px}
.whatsapp-float .label{color:#073014}
@media (max-width:520px){.whatsapp-float{right:14px;bottom:14px;padding:12px}.whatsapp-float .label{display:none}}

/* ===== Cookie Banner (injected by JS) ===== */
.cookie-banner{
  position:fixed;left:16px;right:16px;bottom:16px;
  max-width:980px;margin:auto;background:#111;color:#fff;
  padding:16px;border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  z-index:9999;display:none;
}
.cookie-banner h4{margin:0 0 6px;font-size:16px}
.cookie-banner p{margin:0 0 10px;font-size:14px;line-height:1.4;opacity:.92}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cookie-actions button{
  border:0;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:800;
  font-family:inherit;
}
.cookie-actions .primary{background:#fff;color:#111}
.cookie-actions button:not(.primary){background:rgba(255,255,255,.14);color:#fff}
.cookie-actions button:not(.primary):hover{background:rgba(255,255,255,.2)}

.cookie-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;z-index:10000}
.cookie-modal{
  position:fixed;left:16px;right:16px;top:50%;transform:translateY(-50%);
  max-width:650px;margin:auto;background:#fff;border-radius:14px;padding:16px;
  display:none;z-index:10001;box-shadow:0 20px 60px rgba(0,0,0,.25)
}
.cookie-modal h4{margin:0 0 10px;color:#111}
.cookie-row{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #eee;padding:10px 0}
.cookie-row:first-of-type{border-top:none}
.cookie-row small{color:#555}

/* Forms */
input,button,textarea,select{font:inherit}
input[type="text"],input[type="number"],input[type="email"],textarea{
  width:100%;padding:10px;margin:10px 0;border:1px solid #e5e7eb;border-radius:10px;background:#fff
}
button.btn{padding:12px 20px;background:#111;color:#fff;border:none;border-radius:10px;cursor:pointer;font-weight:800}
button.btn:hover{background:#333}

/* Legacy button classes used on some pages */
.hero-content{max-width:980px}
.hero-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.btn{
  display:inline-block;
  padding:12px 16px;
  border-radius:12px;
  font-weight:800;
  text-decoration:none;
  transition:.2s;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.14);
  color:#fff;
}
.btn:hover{background:rgba(255,255,255,.2)}
.btn-outline{background:rgba(255,255,255,.14)}
.btn-main{background:#fff;color:#111;border-color:#fff}
.btn-main:hover{background:#e5e5e5}
.btn-whatsapp{background:#25D366;color:#0b1b10;border-color:#25D366}
.btn-whatsapp:hover{filter:brightness(.95)}

/* Page header + sections */
.page-header{max-width:980px;margin:24px auto 0;padding:0 16px}
.page-header h1{margin:0}
.page-wrap{max-width:980px;margin:18px auto 40px;padding:0 16px}
.section{background:#fff;border-radius:16px;padding:20px;border:1px solid #eef0f2;box-shadow:0 10px 30px rgba(0,0,0,.06);margin-top:14px}
.section h2{margin-top:0}

/* FAQ accordion */
.faq-list{margin:0;padding:0;list-style:none}
.faq-item{background:#fff;border:1px solid #eef0f2;border-radius:14px;padding:0;margin:12px 0;overflow:hidden}
.faq-q{padding:14px 16px;font-weight:800;cursor:pointer;display:flex;justify-content:space-between;gap:12px}
.faq-a{padding:0 16px 14px;color:#333}
.faq-a p{margin:10px 0 0}
details.faq-item > summary{list-style:none}
details.faq-item > summary::-webkit-details-marker{display:none}
details.faq-item[open] .faq-q{border-bottom:1px solid #eef0f2;background:#fbfcfd}

/* Content helpers (Info/Impressum pages) */
.subtitle{color:#555;margin-bottom:20px}
.container section{padding-top:28px;margin-top:28px;border-top:1px solid #efefef}
.container section:first-of-type{border-top:none;margin-top:0;padding-top:0}

/* FAQ page */
.search{display:flex;gap:12px;align-items:flex-start;margin:16px 0;padding:14px;border:1px solid #eef0f2;border-radius:14px;background:#fbfcfd}
.faq{margin-top:10px}
.faq-item{border:1px solid #eef0f2;border-radius:14px;background:#fff;overflow:hidden;margin:12px 0}
.faq-question{
  width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  padding:14px 16px;font-weight:900;display:flex;justify-content:space-between;gap:12px;
}
.faq-question:hover{background:#fbfcfd}
.faq-answer{padding:0 16px 14px;color:#333}
.faq-answer p{margin:10px 0 0}
.faq-item.open .faq-question{border-bottom:1px solid #eef0f2;background:#fbfcfd}
.arrow{opacity:.7}
.tagline{background:#fff;border:1px solid #eef0f2;border-radius:14px;padding:14px;margin-top:14px}


/* ===== Top Menu (einheitlich auf allen Seiten) ===== */
.site-menu{
  position:fixed;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  z-index:3500;
  width:min(980px, calc(100% - 170px));
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.site-menu-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.site-menu-brand{
  font-weight:900;
  text-decoration:none;
  color:#111;
  padding:10px 12px;
  border-radius:999px;
  white-space:nowrap;
}
.site-menu-toggle{
  display:none;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  padding:10px 12px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
}
.site-menu-links{
  display:flex;
  gap:10px;
  align-items:center;
}
.site-menu-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  color:#111;
  white-space:nowrap;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  transition:.2s;
}
.site-menu-links a:hover{transform:translateY(-1px); filter:brightness(.98)}
.site-menu-links a.is-active{
  background:#111;
  color:#fff;
  border-color:#111;
}
.site-menu-links a.wa{
  background:#25D366;
  border-color:#25D366;
  color:#0b1b10;
}

/* Mobile: Hamburger + Dropdown statt Scroll-Menü */
@media (max-width:820px){
  .site-menu{
    top:74px;
    width:calc(100% - 24px);
    padding:10px;
    border-radius:18px;
  }
  .site-menu-toggle{display:inline-flex}
  .site-menu-links{
    display:none;
    position:absolute;
    left:12px;
    right:12px;
    top:calc(100% + 10px);
    background:rgba(255,255,255,.98);
    border:1px solid rgba(0,0,0,.10);
    border-radius:16px;
    box-shadow:0 16px 40px rgba(0,0,0,.18);
    padding:10px;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .site-menu.is-open .site-menu-links{display:flex}
  .site-menu-links a{
    justify-content:flex-start;
    padding:12px 14px;
  }
}



/* Sprungmarken (Impressum) */
.toc{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.toc a{display:inline-block;background:#fff;border:1px solid #eef0f2;border-radius:999px;padding:8px 12px;text-decoration:none;color:#111;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.toc a:hover{filter:brightness(.97)}


/* Fix: Impressum/Datenschutz Layout - verhindert Überdeckung durch Menü/Logo */
.page-legal .hero {
  padding-top: 110px; /* ggf. 90-140px anpassen */
}

.page-legal .page-header {
  margin-top: 10px;
}

/* Falls dein Logo fixed ist und Text verdeckt: etwas runter */
.page-legal .site-logo {
  top: 10px; /* anpassen */
}

/* Falls die Social Icons drüber liegen: ebenfalls anpassen */
.page-legal .social-bar {
  top: 10px; /* anpassen */
}

/* ===== Legal pages (Impressum/Datenschutz) - Sections als Cards ===== */
.page-legal main.page-wrap section{
  background:#fff;
  border-radius:16px;
  padding:20px;
  border:1px solid #eef0f2;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  margin-top:14px;
}
.page-legal main.page-wrap section:first-of-type{margin-top:0;}