@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-300.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-garamond-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-garamond-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@media (max-width:980px){
  .review-grid{
    grid-template-columns:1fr;
  }
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-garamond-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
:root{
  --bg:#F7F5F2;
  --surface:#FFFFFF;
  --text:#1F1F1F;
  --muted:#4F4F4F;
  --line:#E7E1D6;
  --gold:#C8A24A;
  --radius:14px;
  --shadow:0 18px 40px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text)}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.55}
a{color:inherit;text-decoration:none}
a:hover{opacity:.85}
.header{position:sticky;top:0;background:rgba(247,245,242,.88);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line);z-index:50}
.header__inner{max-width:1180px;margin:0 auto;padding:14px 18px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand__logo{width:44px;height:44px;object-fit:contain}
.brand__name{font-family:"Cormorant Garamond",serif;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:14px}
.brand__tag{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.nav{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;flex:1}
.nav__link{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-radius:999px}
.nav__link.is-active{color:var(--text);border:1px solid var(--line);background:rgba(255,255,255,.6)}
.lang{display:flex;align-items:center;gap:8px}
.lang__link{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lang__link.is-active{color:var(--text)}
.lang__sep{color:var(--line)}
.hero{max-width:1180px;margin:0 auto;padding:64px 18px 10px}
.hero__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:start}
.kicker{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.h1{font-family:"Cormorant Garamond",serif;font-size:54px;line-height:1.02;margin:10px 0 14px;font-weight:600}
.lead{font-size:18px;color:var(--muted);max-width:60ch}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.75);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.btn--gold{background:var(--gold);border-color:var(--gold);color:white}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero__card{padding:18px}
.hero__img{width:100%;height:320px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.section{max-width:1180px;margin:0 auto;padding:54px 18px}
.section__head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:18px}
.h2{font-family:"Cormorant Garamond",serif;font-size:34px;margin:0;font-weight:600}
.h3{
  font-family:"Cormorant Garamond",serif;
  font-weight:600;
  font-size:24px;
  line-height:1.25;
  margin:28px 0 10px;
  letter-spacing:.02em;
}
.small{font-size:13px;color:var(--muted)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.p{margin:0;color:var(--muted)}
.card__pad{padding:20px}
.card__title{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--text);margin:0 0 8px}
.list{margin:10px 0 0;padding-left:18px;color:var(--muted)}
.divider{height:1px;background:var(--line);max-width:1180px;margin:0 auto}
.accordion details{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.accordion summary{cursor:pointer;list-style:none;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.accordion summary::-webkit-details-marker{display:none}
.songgrid{columns:2;column-gap:18px;margin-top:12px}
.songgrid li{break-inside:avoid;list-style:none;margin:0 0 6px;color:var(--muted)}
.form{max-width:780px}
.input, textarea, select{width:100%;padding:14px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.75);font-size:15px}
label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin:16px 0 8px}
.footer{border-top:1px solid var(--line);padding:34px 18px;margin-top:40px}
.footer__inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:start}
.footer__brand{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:18px}
.footer__small{font-size:13px;color:var(--muted);margin-top:6px}
.footer__links{font-size:13px;color:var(--muted)}

.reviews{
  margin-top:60px;
}

.review-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:22px;
}

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

.review-stars{
  color:var(--gold);
  letter-spacing:2px;
  font-size:18px;
  margin-bottom:8px;
}

.review-text{
  font-style:italic;
  color:var(--muted);
  margin-bottom:14px;
}

.review-author{
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text);
}



.wa{position:fixed;right:18px;bottom:18px;background:#25D366;color:white;padding:12px 14px;border-radius:8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 18px 40px rgba(0,0,0,.12)}
@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr}
  .h1{font-size:42px}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .nav{display:none}
  .songgrid{columns:1}
  .footer__inner{grid-template-columns:1fr}
}


/* --- Image integration v7 --- */
.hero__img{object-position:center 35%}
.media-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background: #000;
  min-height: 240px;
}
.media-card__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(1.02) contrast(1.02);
  transform:scale(1.02);
}
.media-card__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.55));
}
.media-card__content{
  position:relative;
  padding:18px 18px 16px;
  color:white;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  height:100%;
}
.media-card__title{
  font-family:"Cormorant Garamond",serif;
  font-weight:600;
  font-size:22px;
  margin:0 0 6px;
}
.media-card__text{
  margin:0;
  font-size:13px;
  color:rgba(255,255,255,.86);
}
.page-hero{
  margin-top:0;
  padding-top:48px;
}
.page-hero__banner{
  border-radius:var(--radius);
  border:1px solid var(--line);
  overflow:hidden;
  background:#000;
  position:relative;
  height: 360px;
}
.page-hero__banner img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.page-hero__banner::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.55));
}
.page-hero__banner .page-hero__copy{
  position:absolute; left:18px; bottom:18px; right:18px;
  color:white; z-index:2;
}
.page-hero__banner .page-hero__copy .kicker{color:rgba(255,255,255,.82)}
.page-hero__banner .page-hero__copy .h1{color:white;margin:8px 0 0;font-size:44px}
@media (max-width:980px){
  .page-hero__banner{height: 260px}
  .page-hero__banner .page-hero__copy .h1{font-size:34px}
}


/* --- v15 Header brand: stronger readability without affecting hero images --- */
.brand__name{ font-size:18px; letter-spacing:.2px; }
@media (max-width: 980px){ .brand__name{ font-size:16px; } }

.brand{
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.90);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 14px 34px rgba(0,0,0,.10);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.brand__logo{
  height:44px;
  width:auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
}

/* If logo is an <img> inside .brand__logo */
.brand__logo img{
  height:44px;
  width:auto;
}


/* --- v16 Brand home button consistency --- */
.brand__by{font-size:12px; font-style:italic; color:var(--muted); margin-top:2px; line-height:1.1}
@media (max-width:980px){.brand__by{font-size:11px}}

/* Footer alignment fix */
footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
footer p, footer a {
    margin: 0;
}


/* Footer PDF download buttons */
.footer-downloads--buttons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.footer-download-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  letter-spacing:.02em;
  background:rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}
.footer-download-btn:hover{
  background:rgba(255,255,255,.12);
  text-decoration:none;
}


/* --- Premium Footer (v43) --- */
.site-footer{
  border-top:1px solid rgba(255,255,255,.08);
  padding:56px 20px 28px;
  margin-top:80px;
  background: transparent;
}
.site-footer .footer-wrap{
  max-width:1200px;
  margin:0 auto;
}
.site-footer .footer-grid{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
}
.site-footer .footer-col{
  flex:1;
  min-width:240px;
}
.site-footer .footer-center{
  text-align:center;
}
.site-footer .footer-right{
  text-align:right;
}
.site-footer .footer-label{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.75;
  margin-bottom:14px;
}
.site-footer a.footer-link{
  display:inline-block;
  margin:6px 0;
  text-decoration:none;
}
.site-footer a.footer-link:hover{
  text-decoration:underline;
}
.site-footer .footer-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  margin:6px 0;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  text-decoration:none;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
  width:fit-content;
}
.site-footer .footer-btn:hover{
  transform:translateY(-1px);
  border-color: rgba(255,255,255,.38);
  background: rgba(255,255,255,.06);
}
.site-footer .muted{
  opacity:.75;
  font-size:.95em;
}
.site-footer .footer-bottom{
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:13px;
  opacity:.7;
  text-align:center;
}
@media (max-width: 820px){
  .site-footer .footer-right{ text-align:left; }
  .site-footer .footer-center{ text-align:left; }
}


/* --- Refined Footer Buttons (v44) --- */
.site-footer .footer-btn{
  padding:6px 12px;
  font-size:13px;
  border-radius:999px;
}

/* --- Footer Buttons Uniform (v47) --- */
.site-footer .footer-btn{
  padding:7px 12px;
  font-size:13px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: transparent;
}
.site-footer .footer-btn:hover{
  transform:translateY(-1px);
  border-color: rgba(255,255,255,.38);
  background: rgba(255,255,255,.06);
}


/* YouTube 2-click embeds (privacy-friendly) */
.yt2click{margin:60px 0;}
.yt2click__thumb{position:relative;cursor:pointer;border-radius:18px;overflow:hidden;outline:none;}
.yt2click__thumb img{width:100%;display:block;}
.yt2click__overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(0,0,0,0.45);color:#fff;}
.yt2click__play{font-size:34px;line-height:1; font-weight:700;}
.yt2click__text{font-size:18px;font-weight:600;letter-spacing:0.05em;}

.yt2click__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}




/* --- YouTube 2-click embeds: sizing aligned 1:1 with Live-Impressionen --- */
.yt2click__thumb{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
}
.yt2click__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.yt2click__frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
}
.yt2click__frame iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Ensure video containers in ThomasGindl cards don't constrain the iframe */
.videoCard .yt2click,
.videoCard .yt2click__frame,
.videoCard .yt2click__thumb{
  width: 100%;
}



/* --- Mobile Navigation Fix --- */

.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  padding:10px;
  cursor:pointer;
}

.nav-toggle__bar{
  display:block;
  width:26px;
  height:2px;
  margin:6px 0;
  background:#1a1a1a;
}

@media (max-width: 900px){

  .nav-toggle{ display:block; }

  .nav{
    display:none;
    position:absolute;
    top:72px;
    left:12px;
    right:12px;
    background:#fff;
    z-index:9999;
    padding:14px;
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:0 18px 40px rgba(0,0,0,.10);
  }

  .nav.nav-open{
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .nav__link{
    display:block;
    width:100%;
    padding:12px 14px;
    border-radius:12px;
    font-size:13px;
    letter-spacing:.05em;
    background:rgba(247,245,242,.65);
  }

  .nav__link.is-active{
    background:rgba(255,255,255,.95);
  }

}

/* --- Mobile overflow fix --- */

html, body{
  max-width:100%;
  overflow-x:hidden;
}

img, video, iframe{
  max-width:100%;
  height:auto;
}

/* --- Mobile layout refinement --- */

@media (max-width:900px){

  .header__inner{
    padding:12px 14px;
    min-height:72px;
    gap:10px;
  }

  .brand{
    min-width:0;
    max-width:calc(100% - 120px);
  }

  .brand__text{
    min-width:0;
  }

  .brand__name,
  .brand__tag,
  .brand__by{
    overflow-wrap:anywhere;
  }

  .hero{
    padding:34px 16px 8px;
  }

  .section{
    padding:34px 16px;
  }

  .h1{
    font-size:36px;
    line-height:1.08;
  }

  .h2{
    font-size:30px;
  }

  .h3,
  h3{
    font-size:22px;
  }

  p,
  .p{
    font-size:15px;
    line-height:1.65;
  }

  .lead{
    font-size:17px;
    max-width:100%;
  }

  .card__pad{
    padding:18px;
  }

  .cta{
    gap:10px;
  }

  .btn{
    width:100%;
    justify-content:center;
  }

  .wa{
    right:12px;
    bottom:12px;
  }

}

/* --- Mobile: Homebutton / Brand optimieren --- */

@media (max-width:900px){

  .brand{
    padding:6px 8px;
    gap:8px;
    border-radius:12px;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
  }

  .brand__logo{
    width:34px;
    height:34px;
  }

  .brand__name{
    font-size:14px;
    letter-spacing:.02em;
  }

  .brand__tag{
    font-size:10px;
    letter-spacing:.10em;
  }

  .brand__by{
    font-size:10px;
  }

}

/* Formularfelder Breite korrigieren */

.input,
.form input,
.form textarea,
.form select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Datumfeld speziell korrigieren */

input[type="date"],
input[name="date"]{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

/* Formular optisch hochwertiger */

.input,
.form input,
.form textarea,
.form select {

  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;

  padding: 14px 16px;

  font-size: 15px;
  line-height: 1.4;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

/* Fokus (wenn man hineinklickt) */

.input:focus,
.form input:focus,
.form textarea:focus,
.form select:focus{

  outline:none;
  border-color: rgba(184,148,78,.6);

  box-shadow:
    0 0 0 3px rgba(184,148,78,.12);

  background:#fff;
}

/* Labels etwas eleganter */

label{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#6f675e;

  display:block;
  margin-top:18px;
  margin-bottom:6px;
}

/* Datumfeld auf Mobile/Tablet sauber begrenzen */

input[type="date"]{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  -webkit-appearance:none;
  appearance:none;
}

/* zusätzliche Sicherheit innerhalb des Formulars */
.form input[type="date"]{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

/* iPhone / Safari / manche Android-Browser */
input[type="date"]::-webkit-date-and-time-value{
  text-align:left;
}

input[type="date"]::-webkit-calendar-picker-indicator{
  margin:0;
}

/* ---------- Homebutton: gleiche Größe, aber neue Optik ---------- */

@media (min-width:901px){

  .brand{
    background:rgba(255,255,255,.92);
    border:1px solid rgba(0,0,0,.08);
    border-radius:14px;
    box-shadow:0 8px 20px rgba(0,0,0,.07);

    /* Größe unverändert lassen */
    padding:10px 14px;
    gap:12px;
  }

}

/* ---------- Navigation: gemeinsamer Rahmen ---------- */

@media (min-width:901px){

  .nav{

    display:flex;
    flex-wrap:wrap;

    justify-content:flex-start;   /* linksbündig */

    gap:14px;

    padding:10px 16px;

    background:rgba(255,255,255,.75);
    border:1px solid rgba(0,0,0,.08);
    border-radius:14px;

    box-shadow:0 6px 18px rgba(0,0,0,.05);

  }

}

/* ---------- Links normal darstellen ---------- */

.nav__link{

  background:none;
  border:none;
  box-shadow:none;

  padding:6px 4px;

  text-align:left;

}

.nav__link:hover{
  opacity:.8;
}

/* ---------- Header final polish ---------- */

/* Header wieder fix/sticky machen */
.header{
  position: sticky;
  top: 0;
  z-index: 1000;

  background: rgba(246,242,236,.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);

  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* subtile goldene Linie unten */
.header::after{
  content:"";
  display:block;
  height:1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(184,148,78,.10) 18%,
    rgba(184,148,78,.35) 50%,
    rgba(184,148,78,.10) 82%,
    transparent 100%
  );
}

/* Desktop / Tablet */
@media (min-width:901px){

  .header__inner{
    align-items: stretch;
    gap: 18px;
  }

  /* Homebutton: gleiche Höhe wie Navigations-Kästchen */
  .brand{
    display:flex;
    align-items:center;

    padding:12px 14px;
    gap:12px;

    min-width:0;

    background:rgba(255,255,255,.92);
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    box-shadow:0 8px 20px rgba(0,0,0,.07);
  }

  /* Navigation als gemeinsames Kästchen */
  .nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:center;

    gap:16px;

    padding:12px 18px;

    background:rgba(255,255,255,.72);
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
  }

  /* Links ohne einzelne Kästchen */
  .nav__link{
    padding:4px 0;
    background:none;
    border:none;
    box-shadow:none;
    text-align:left;
    color:var(--muted);
    letter-spacing:.05em;
  }

  .nav__link:hover{
    color:var(--text);
    opacity:1;
  }

  .nav__link.is-active{
    color:var(--text);
    font-weight:500;
    background:none;
    border:none;
    box-shadow:none;
  }
}

/* ---------- Header wirklich fixieren + aktiven Link wieder kapseln ---------- */

/* Header dauerhaft oben fixiert */
.header{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 2000;

  background: rgba(246,242,236,.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);

  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* damit der fixe Header den Seiteninhalt nicht überdeckt */
body{
  padding-top: 115px;
}

/* goldene Linie unten */
.header::after{
  content:"";
  display:block;
  height:1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(184,148,78,.10) 18%,
    rgba(184,148,78,.35) 50%,
    rgba(184,148,78,.10) 82%,
    transparent 100%
  );
}

/* Desktop / Tablet */
@media (min-width:901px){

  .header__inner{
    align-items:stretch;
    gap:18px;
  }

  /* Homebutton: gleiche Höhe wie Navigationsbox */
  .brand{
    display:flex;
    align-items:center;
    padding:12px 14px;
    gap:12px;
    min-width:0;

    background:rgba(255,255,255,.92);
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    box-shadow:0 8px 20px rgba(0,0,0,.07);
  }

  /* gemeinsamer Rahmen um alle Links */
  .nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:center;
    gap:16px;

    padding:12px 18px;

    background:rgba(255,255,255,.72);
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
  }

  /* normale Links ohne Einzelkästchen */
  .nav__link{
    padding:4px 0;
    background:none;
    border:none;
    box-shadow:none;
    text-align:left;
    color:var(--muted);
    letter-spacing:.05em;
  }

  .nav__link:hover{
    color:var(--text);
    opacity:1;
  }

  /* aktiver Link wieder mit eigenem Kästchen */
  .nav__link.is-active{
    padding:8px 12px;
    border-radius:12px;
    background:rgba(255,255,255,.98);
    border:1px solid rgba(0,0,0,.10);
    box-shadow:0 6px 16px rgba(0,0,0,.05);
    color:var(--text);
    font-weight:500;
  }
}

/* Handy etwas niedriger */
@media (max-width:900px){
  body{
    padding-top: 84px;
  }
}

/* ---------- Header auf Desktop etwas flacher machen ---------- */

@media (min-width:901px){

  .header__inner{
    padding-top:10px;
    padding-bottom:10px;
  }

  .brand{
    padding-top:8px;
    padding-bottom:8px;
  }

  .brand__name{
    line-height:1.05;
  }

  .brand__tag{
    line-height:1.1;
    margin-top:1px;
  }

  .brand__by{
    line-height:1.1;
    margin-top:1px;
  }

  .nav{
    padding-top:10px;
    padding-bottom:10px;
  }

}

/* ---------- Navigation kompakter machen ---------- */

@media (min-width:901px){

  .nav{
    gap:10px;              /* vorher 16px */
    padding:8px 14px;      /* vorher 12px 18px */
  }

  .nav__link{
    padding:2px 0;
    letter-spacing:.04em;
  }

}

/* ======================================================
   FINAL HEADER – 2 ZEILEN IN DEN GRUPPENKÄSTCHEN
   ====================================================== */

.header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:2000;

  background:rgba(246,242,236,.92);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);

  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}

.header::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.55) 40%,
    rgba(255,255,255,.55) 60%,
    transparent 100%
  );
  pointer-events:none;
}

.header::after{
  content:"";
  display:block;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(184,148,78,.10) 18%,
    rgba(184,148,78,.35) 50%,
    rgba(184,148,78,.10) 82%,
    transparent 100%
  );
}

/* Desktop/Tablet: du hast dafür schon 115px gewählt */
body{
  padding-top:95px;
}

@media (min-width:901px){

  .header__inner{
    max-width:1200px;
    margin:0 auto;
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    gap:16px;
    padding-top:8px;
    padding-bottom:8px;
  }

  /* Homebutton */
  .brand{
    display:flex;
    align-items:center;
    padding:8px 14px;
    gap:12px;
    min-width:0;

    background:rgba(255,255,255,.92);
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    box-shadow:0 8px 20px rgba(0,0,0,.07);
  }

  .brand__name{
    line-height:1.05;
  }

  .brand__tag{
    line-height:1.1;
    margin-top:1px;
  }

  .brand__by{
    line-height:1.1;
    margin-top:1px;
  }

  /* Navigation-Gesamtbereich */
  .nav{
    display:flex;
    align-items:stretch;
    gap:12px;
    flex:1;
    padding:0;
    background:none;
    border:none;
    box-shadow:none;
    min-width:0;
  }

  /* Boxen für Start / Events / Infos */
  .nav-group{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    padding:10px 14px;

    background:rgba(255,255,255,.72);
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
    min-width:0;
  }

  /* Start separat und schmal */
  .nav-group--home{
    flex:0 0 auto;
    padding:10px 12px;
  }

  /* Events und Infos gleich breit */
  .nav-group--events,
  .nav-group--infos{
    flex:1 1 0;
    min-width:0;
  }

  .nav-group__label{
    font-size:10px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--muted);
    line-height:1;
  }

  .nav-group__links{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    min-width:0;
  }

  .nav__link{
    padding:2px 0;
    background:none;
    border:none;
    box-shadow:none;
    text-align:left;
    color:var(--muted);
    letter-spacing:.04em;
  }

  .nav__link:hover{
    color:var(--text);
    opacity:1;
  }

  .nav__link.is-active{
    padding:6px 10px;
    border-radius:10px;
    background:rgba(255,255,255,.98);
    border:1px solid rgba(0,0,0,.10);
    box-shadow:0 6px 16px rgba(0,0,0,.05);
    color:var(--text);
    font-weight:500;
  }

  /* Sprachbox */
  .lang{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;

    background:rgba(255,255,255,.72);
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
  }

  .lang__link{
    padding:4px 6px;
    color:var(--muted);
    letter-spacing:.05em;
  }

  .lang__link:hover{
    color:var(--text);
  }

  .lang__link.is-active{
    padding:4px 8px;
    border-radius:8px;
    background:rgba(255,255,255,.95);
    border:1px solid rgba(0,0,0,.10);
    color:var(--text);
    font-weight:500;
  }
}

@media (max-width:900px){
  body{
    padding-top:96px;
  }
}

/* ======================================================
   HEADER NAVIGATION – ZWEI GLEICH BREITE, KOMPAKTE BOXEN
   ====================================================== */

@media (min-width:901px){

  .nav{
    display:flex;
    flex-direction:column;
    gap:8px;
    width:100%;
  }

  .nav-group{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:7px 12px;
    background:rgba(255,255,255,.72);
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
  }

  .nav-group__label{
    font-size:9px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted);
    line-height:1;
    margin:0;
  }

  .nav-group__links{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    line-height:1.1;
  }

  .nav__link{
    padding:1px 0;
    background:none;
    border:none;
    box-shadow:none;
    color:var(--muted);
    letter-spacing:.03em;
    line-height:1.1;
  }

  .nav__link:hover{
    color:var(--text);
    opacity:1;
  }

  .nav__link.is-active{
    padding:4px 8px;
    border-radius:9px;
    background:rgba(255,255,255,.98);
    border:1px solid rgba(0,0,0,.10);
    box-shadow:0 6px 16px rgba(0,0,0,.05);
    color:var(--text);
    font-weight:500;
    line-height:1.1;
  }

  /* Sprachbox ebenfalls kompakter */
  .lang{
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 12px;
    background:rgba(255,255,255,.72);
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
  }

  .lang__link{
    padding:3px 5px;
    color:var(--muted);
    letter-spacing:.04em;
    line-height:1.1;
  }

  .lang__link:hover{
    color:var(--text);
  }

  .lang__link.is-active{
    padding:3px 7px;
    border-radius:8px;
    background:rgba(255,255,255,.95);
    border:1px solid rgba(0,0,0,.10);
    color:var(--text);
    font-weight:500;
  }
}

/* Nur am Handy die 3. Kundenstimmen-Box ausblenden */
@media (max-width:600px){
  .review-grid > :nth-child(3){
    display:none;
  }
}

/* ======================================================
   Kundenstimmen – nur am Handy anpassen
   ====================================================== */

/* Desktop / Tablet: normale 3 Spalten */
@media (min-width:601px){
  .review-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
  }

  .review-grid > *{
    display:block;
    width:100%;
  }
}

/* Handy: nur 2 Boxen zeigen */
@media (max-width:600px){
  .review-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
  }

  .review-grid > *{
    display:block;
    width:100%;
  }

  .review-grid > :nth-child(3){
    display:none;
  }
}


/* ======================================================
   Größeres Logo im Homebutton – nur Handy
   ====================================================== */

@media (max-width:600px){

  .brand__logo{
    height:25px;
    width:auto;
  }

}

.brand__logo{
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
}

/* ======================================================
   Premium Shadow System
   ====================================================== */

:root{

  --shadow-soft:
    0 2px 6px rgba(0,0,0,0.05),
    0 10px 28px rgba(0,0,0,0.08);

  --shadow-card:
    0 6px 16px rgba(0,0,0,0.06),
    0 18px 38px rgba(0,0,0,0.10);

  --shadow-photo:
    0 12px 28px rgba(0,0,0,0.12),
    0 30px 60px rgba(0,0,0,0.15);

}

.card,
.card__pad,
.review,
.box,
.form{
  box-shadow:var(--shadow-card);
}

img{
  box-shadow:var(--shadow-photo);
  border-radius:10px;
}

/* ======================================================
   Premium Gold Colors
   ====================================================== */

:root{

  --gold-main:#c6a55c;
  --gold-light:#e6d2a0;
  --gold-dark:#9f7f3a;

}

/* ======================================================
   Gold Button
   ====================================================== */

.btn--gold{

  background:linear-gradient(
    145deg,
    var(--gold-light),
    var(--gold-main)
  );

  color:#111;

  border:1px solid rgba(0,0,0,.15);

  box-shadow:
    0 4px 12px rgba(0,0,0,.12),
    0 10px 26px rgba(0,0,0,.15);

}

.btn--gold:hover{

  transform:translateY(-2px);

  background:linear-gradient(
    145deg,
    #f0dfb3,
    var(--gold-main)
  );

  box-shadow:
    0 10px 26px rgba(0,0,0,.18),
    0 20px 50px rgba(0,0,0,.25),
    0 0 0 1px rgba(198,165,92,.35);

}

.btn{

  transition:
  transform .25s ease,
  box-shadow .25s ease,
  background .25s ease;

}

.wa{

  box-shadow:
  0 12px 28px rgba(0,0,0,.18),
  0 4px 10px rgba(0,0,0,.12);

}

/* ======================================================
   Premium polish – Hero, Divider, Typography
   ====================================================== */

/* 1) Hero-Bilder edler */
.hero img,
.hero__img,
.page-hero__banner img{
  filter: contrast(1.03) saturate(1.04);
}

.hero__img,
.page-hero__banner{
  box-shadow:
    0 10px 24px rgba(0,0,0,.10),
    0 28px 60px rgba(0,0,0,.14);
}

/* 2) Divider-Linien eleganter */
.divider{
  height:1px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(198,165,92,.10) 18%,
    rgba(198,165,92,.35) 50%,
    rgba(198,165,92,.10) 82%,
    transparent 100%
  );
}

/* 3) Typografie ruhiger und hochwertiger */
.h1,
.h2,
.h3,
h3{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

.h1{
  letter-spacing:-0.01em;
  line-height:1.02;
}

.h2{
  letter-spacing:-0.005em;
  line-height:1.08;
}

.lead{
  line-height:1.72;
  color:#5f584f;
}

.p,
p{
  line-height:1.68;
}

/* ======================================================
   Premium Testimonials
   ====================================================== */

.review{

  position:relative;

  padding:22px 22px 20px 22px;

  background:rgba(255,255,255,.92);

  border-radius:14px;

  border:1px solid rgba(0,0,0,.06);

  box-shadow:
    0 6px 18px rgba(0,0,0,.06),
    0 18px 38px rgba(0,0,0,.10);

  transition:all .35s ease;

}

.review:hover{

  transform:translateY(-3px);

  box-shadow:
    0 14px 30px rgba(0,0,0,.12),
    0 30px 70px rgba(0,0,0,.18);

}

.review:hover{

  transform:translateY(-3px);

  box-shadow:
    0 14px 30px rgba(0,0,0,.12),
    0 30px 70px rgba(0,0,0,.18);

}

.review p{

  font-style:italic;

  line-height:1.6;

  color:#444;

}

.review::before{

  content:"“";

  position:absolute;

  top:10px;
  left:14px;

  font-family:"Cormorant Garamond", serif;

  font-size:48px;

  color:rgba(198,165,92,.25);

}

/* ======================================================
   Premium Reviews Section
   ====================================================== */

.reviews-section{
  position:relative;
}

.reviews-section__head{
  align-items:end;
}

.reviews-section .kicker{
  margin-bottom:6px;
}

.reviews-section__cta{
  margin-top:22px;
}

/* Grid */
.review-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
  margin-top:18px;
}

/* einzelne Bewertung */
.review{
  position:relative;
  padding:24px 22px 20px 22px;
  background:rgba(255,255,255,.94);
  border-radius:16px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:
    0 6px 18px rgba(0,0,0,.06),
    0 18px 38px rgba(0,0,0,.10);
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
  overflow:hidden;
}

.review:hover{
  transform:translateY(-3px);
  box-shadow:
    0 14px 30px rgba(0,0,0,.12),
    0 30px 70px rgba(0,0,0,.18);
}

.review::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(
    90deg,
    rgba(198,165,92,.15),
    rgba(198,165,92,.55),
    rgba(198,165,92,.15)
  );
}

.review::before{
  content:"“";
  position:absolute;
  top:8px;
  left:14px;
  font-family:"Cormorant Garamond", serif;
  font-size:50px;
  line-height:1;
  color:rgba(198,165,92,.18);
  pointer-events:none;
}

/* Sterne */
.review-stars{
  display:flex;
  gap:3px;
  margin-bottom:10px;
  color:#f4b400;
  font-size:15px;
  line-height:1;
  position:relative;
  z-index:1;
}

/* Text */
.review p{
  position:relative;
  z-index:1;
  margin:0;
  padding-top:12px;
  font-style:italic;
  line-height:1.65;
  color:#47413a;
}

/* Autor */
.review strong{
  display:block;
  margin-top:12px;
  font-weight:600;
  letter-spacing:.02em;
  color:#111;
  position:relative;
  z-index:1;
}

/* Quelle */
.review-source{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  font-size:12px;
  color:#666;
  letter-spacing:.02em;
  position:relative;
  z-index:1;
}

.review-source::before{
  content:"";
  width:14px;
  height:14px;
  border-radius:50%;
  background:conic-gradient(
    #4285F4 0 25%,
    #34A853 25% 50%,
    #FBBC05 50% 75%,
    #EA4335 75% 100%
  );
  display:inline-block;
}

/* Tablet */
@media (max-width:980px){
  .review-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

/* Handy */
@media (max-width:600px){
  .review-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:12px;
  }

  .review{
    padding:18px 16px 16px 16px;
    border-radius:14px;
  }

  .review p{
    font-size:14px;
    line-height:1.55;
  }

  .review strong{
    font-size:13px;
  }

  .review-source{
    font-size:11px;
  }
}

/* Logo im Homebutton ohne Schatten */

.brand__logo{
  box-shadow:none !important;
  filter:none !important;
}

/* WhatsApp Hover Zoom */

.btn[href*="wa.me"],
.wa{
  transition:transform .25s ease, box-shadow .25s ease;
}

.btn[href*="wa.me"]:hover,
.wa:hover{
  transform:scale(1.05);
}

/* Link Hover Zoom */

a{
  transition:transform .18s ease;
}

a:hover{
  transform:scale(1.04);
}

/* ======================================================
   CTA Button Shadows (WhatsApp + Email)
   ====================================================== */

/* WhatsApp Button unten rechts */
.wa{
  box-shadow:
    0 8px 18px rgba(0,0,0,.18),
    0 20px 40px rgba(0,0,0,.22);
}

/* WhatsApp Button im Inhalt */
.btn[href*="wa.me"]{
  box-shadow:
    0 6px 14px rgba(0,0,0,.14),
    0 16px 34px rgba(0,0,0,.18);
}

/* Email Button */
.btn[href^="mailto"]{
  box-shadow:
    0 6px 14px rgba(0,0,0,.14),
    0 16px 34px rgba(0,0,0,.18);
}

.wa:hover,
.btn[href*="wa.me"]:hover,
.btn[href^="mailto"]:hover{

  box-shadow:
    0 12px 26px rgba(0,0,0,.20),
    0 30px 60px rgba(0,0,0,.25);

}

/* ======================================================
   WhatsApp Pulse Effekt
   ====================================================== */

.wa{
  position:fixed;
  animation:waPulse 3.6s ease-in-out infinite;
}

@keyframes waPulse{

  0%{
    box-shadow:
      0 10px 22px rgba(0,0,0,.18),
      0 0 0 0 rgba(37,211,102,.35);
  }

  50%{
    box-shadow:
      0 14px 30px rgba(0,0,0,.22),
      0 0 0 12px rgba(37,211,102,0);
  }

  100%{
    box-shadow:
      0 10px 22px rgba(0,0,0,.18),
      0 0 0 0 rgba(37,211,102,0);
  }

}

/* ======================================================
   Premium Header – Glass Effect
   ====================================================== */

.header{

  background:rgba(246,242,236,.92);

  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);

}

/* ======================================================
   Gold Divider unter Header
   ====================================================== */

.header::after{

  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:1px;

  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(198,165,92,.18) 20%,
    rgba(198,165,92,.55) 50%,
    rgba(198,165,92,.18) 80%,
    transparent 100%
  );

}

img {
filter: contrast(1.05) saturate(1.05);
}

.btn{
  border-radius:12px;
}

.wa{
  position:fixed;
  right:18px;
  bottom:18px;
  background:#25D366;
  color:white;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}