/* ============================================================
   FARBGATSCHEREI · Simona Lercher
   Build: Pignitter Webdesign
   ------------------------------------------------------------
   >>> FARBPALETTE — NUR DIESEN BLOCK TAUSCHEN <<<
   Alle Farben der gesamten Seite hängen an diesen 7 Variablen.
   ============================================================ */
:root{
  /* Farbwelt: NATURELL (kontrastgeprüft, min. 5.6:1) */
  --bg:        #FBFAF7;   /* Seitenhintergrund            */
  --bg-alt:    #F1EEE6;   /* Wechsel-Sektionen / Karten   */
  --ink:       #23211C;   /* Text dunkel                  */
  --ink-soft:  #5C564A;   /* Fließtext / sekundär         */
  --accent:    #6B5B41;   /* Akzent (Links, Eyebrows)     */
  --cta:       #23211C;   /* Buttons                      */
  --cta-text:  #FBFAF7;   /* Buttontext                   */
  --line: color-mix(in srgb, var(--ink) 12%, transparent);
  --maxw: 1140px;
  --r: 4px;
}

/* ---------- fonts (self-host im Livegang, CDN im Entwurf) ---------- */

@font-face{font-family:'Fraunces';src:url('fonts/fraunces-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap;}
@font-face{font-family:'Manrope';src:url('fonts/manrope-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Manrope';src:url('fonts/manrope-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap;}
@font-face{font-family:'Manrope';src:url('fonts/manrope-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap;}

/* ---------- base ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Manrope',sans-serif;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px;}
h1,h2,h3,h4{font-family:'Fraunces',serif;font-weight:400;line-height:1.08;margin:0 0 .45em;letter-spacing:-0.01em;}
h1{font-size:clamp(2.1rem,5.6vw,4.2rem);overflow-wrap:break-word;}
h2{font-size:clamp(1.8rem,3.6vw,2.5rem);}
h3{font-size:clamp(1.25rem,2.4vw,1.5rem);}
p{margin:0 0 1.1em;color:var(--ink-soft);}
p.lede{font-size:1.15rem;line-height:1.6;max-width:56ch;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
@media(max-width:640px){.wrap{padding:0 22px;}}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.eyebrow{
  font-size:.74rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;color:var(--accent);margin:0 0 14px;
}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:28px;}
.brand{font-family:'Fraunces',serif;font-size:1.35rem;text-decoration:none;color:var(--ink);letter-spacing:.01em;}
.brand em{font-style:italic;color:var(--accent);}

nav.main-nav > ul{list-style:none;display:flex;gap:6px;margin:0;padding:0;align-items:center;}
nav.main-nav a{
  display:block;padding:9px 13px;border-radius:var(--r);
  font-size:.9rem;font-weight:600;text-decoration:none;color:var(--ink-soft);
}
nav.main-nav a:hover{color:var(--ink);background:var(--bg-alt);}
nav.main-nav a.active{color:var(--ink);}
nav.main-nav a.active::after{content:'';display:block;height:2px;background:var(--accent);margin-top:2px;border-radius:2px;}

/* dropdown */
.has-sub{position:relative;}
.has-sub > a::after{content:' ▾';font-size:.7em;}
.sub{
  position:absolute;top:100%;left:0;min-width:250px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  list-style:none;margin:6px 0 0;padding:8px;display:none;
}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:block;}
.sub a{padding:10px 12px;font-weight:400;}

.nav-cta{margin-left:8px;}
.btn{
  display:inline-block;padding:13px 28px;border-radius:var(--r);
  font-weight:700;font-size:.92rem;text-decoration:none;
  border:1px solid transparent;transition:opacity .15s ease;
}
.btn:hover{opacity:.85;}
.btn-primary{background:var(--cta);color:var(--cta-text);}
.btn-ghost{border-color:var(--ink);color:var(--ink);}

.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);padding:9px 14px;font:600 .85rem 'Manrope',sans-serif;color:var(--ink);}
@media(max-width:1020px){
  nav.main-nav{position:fixed;inset:76px 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line);display:none;max-height:calc(100vh - 76px);overflow:auto;}
  nav.main-nav.open{display:block;}
  nav.main-nav > ul{flex-direction:column;align-items:stretch;padding:16px 22px 26px;gap:2px;}
  .sub{position:static;display:block;border:none;box-shadow:none;background:transparent;padding:0 0 0 16px;margin:0;}
  .has-sub > a::after{content:'';}
  .nav-toggle{display:block;}
  .nav-cta{margin:10px 0 0;}
}

/* ---------- hero ---------- */
.hero{padding:110px 0 100px;border-bottom:1px solid var(--line);}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px;}}
.hero-media img{border-radius:var(--r);width:100%;object-fit:cover;}
.hero .btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;}

.page-hero{padding:80px 0 64px;border-bottom:1px solid var(--line);}

/* ---------- sections ---------- */
section{padding:96px 0;}
section.alt{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
section.tight{padding:64px 0;}
.section-head{max-width:62ch;margin-bottom:52px;}

.grid{display:grid;gap:28px;}
.g2{grid-template-columns:1fr 1fr;}
.g3{grid-template-columns:repeat(3,1fr);}
@media(max-width:900px){.g2,.g3{grid-template-columns:1fr;}}

.card{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:36px 32px;display:flex;flex-direction:column;gap:6px;
}
section.alt .card{background:var(--bg);}
section:not(.alt) .card{background:var(--bg-alt);border-color:transparent;}
.card h3{margin-bottom:2px;}
.card .more{margin-top:auto;padding-top:14px;font-weight:700;font-size:.88rem;text-decoration:none;}
.card .more::after{content:' →';}

/* checklist */
.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;max-width:72ch;}
.checklist li{
  padding:18px 4px;border-bottom:1px solid var(--line);
  display:flex;gap:16px;align-items:baseline;color:var(--ink-soft);
}
.checklist li:first-child{border-top:1px solid var(--line);}
.checklist li::before{content:'—';color:var(--accent);font-weight:700;flex:0 0 auto;}
.checklist strong{color:var(--ink);font-weight:600;}

/* two-col text feature */
.feature{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start;}
@media(max-width:900px){.feature{grid-template-columns:1fr;gap:32px;}}
.feature img{border-radius:var(--r);}

/* stats / facts strip */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
@media(max-width:760px){.facts{grid-template-columns:1fr;}}
.fact{background:var(--bg);padding:30px 28px;}
.fact .k{font-family:'Fraunces',serif;font-size:1.7rem;display:block;margin-bottom:4px;}
.fact .v{font-size:.86rem;color:var(--ink-soft);}

/* price table */
.pricelist{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.pricelist .row{display:flex;justify-content:space-between;gap:18px;padding:22px 26px;background:var(--bg);}
.pricelist .row + .row{border-top:1px solid var(--line);}
.pricelist .n{font-family:'Fraunces',serif;font-size:1.15rem;}
.pricelist .d{font-size:.85rem;color:var(--ink-soft);text-align:right;}

/* quote */
blockquote{
  margin:0;font-family:'Fraunces',serif;font-style:italic;
  font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.35;color:var(--ink);max-width:38ch;
}
blockquote footer{font-family:'Manrope',sans-serif;font-style:normal;font-size:.85rem;color:var(--ink-soft);margin-top:16px;}

/* CTA band */
.cta-band{background:var(--ink);color:var(--bg);}
.cta-band h2{color:var(--bg);}
.cta-band p{color:color-mix(in srgb, var(--bg) 75%, var(--ink));}
.cta-band .btn-primary{background:var(--bg);color:var(--ink);}

/* breadcrumb */
.crumb{font-size:.8rem;color:var(--ink-soft);padding:22px 0 0;}
.crumb a{color:var(--ink-soft);}

/* forms */
.form{display:grid;gap:18px;max-width:560px;}
.form label{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);display:block;margin-bottom:6px;}
.form input,.form textarea{
  width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg);font:400 1rem 'Manrope',sans-serif;color:var(--ink);
}
.form textarea{min-height:140px;resize:vertical;}
.form .hint{font-size:.8rem;color:var(--ink-soft);}

/* ---------- footer ---------- */
footer.site-footer{border-top:1px solid var(--line);padding:64px 0 34px;font-size:.9rem;color:var(--ink-soft);}
.f-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px;}
@media(max-width:900px){.f-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.f-grid{grid-template-columns:1fr;}}
.f-grid h4{font-family:'Manrope',sans-serif;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--ink);margin:0 0 16px;}
.f-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.f-grid a{color:var(--ink-soft);text-decoration:none;}
.f-grid a:hover{color:var(--ink);text-decoration:underline;}
.f-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding-top:26px;border-top:1px solid var(--line);align-items:center;}
.webdesign-credit{display:inline-flex;align-items:center;gap:8px;color:var(--ink-soft);text-decoration:none;font-size:.85rem;}
.webdesign-credit:hover{color:var(--ink);}

.small{font-size:.84rem;color:var(--ink-soft);}
.center{text-align:center;}
.mt0{margin-top:0;}

/* ---------- Feinschliff ---------- */
h1,h2,h3{text-wrap:balance;}
p{text-wrap:pretty;max-width:68ch;}
::selection{background:var(--accent);color:var(--bg);}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bg);padding:10px 18px;z-index:100;border-radius:0 0 var(--r) 0;}
.skip-link:focus{left:0;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}*{transition:none!important;}}
.cal-embed{width:100%;min-height:640px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden;}
@media print{.site-header,.site-footer,.cta-band,.btn{display:none!important;}body{background:#fff;}}

/* ---------- Buchungs-UI ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{
  padding:10px 18px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg);font:600 .9rem 'Manrope',sans-serif;color:var(--ink);cursor:pointer;
}
.chip:hover{border-color:var(--accent);}
.chip.aktiv{background:var(--cta);color:var(--cta-text);border-color:var(--cta);}

/* ---------- Überschriften auf kleinen Screens bändigen ---------- */
@media (max-width:640px){
  h1{font-size:clamp(1.9rem,8.5vw,2.6rem);line-height:1.1;}
  h2{overflow-wrap:break-word;}
}