/* Casa Kismet v8 — warm elegance: sand/cream + warm olive + bronze accent */
:root{
  --cream:#f5efe3;
  --sand:#ece2cf;
  --sand-deep:#e3d6bd;
  --olive:#3c3f31;
  --olive-2:#4a4d3c;
  --olive-soft:#5b5e49;
  --bronze:#a9824e;
  --bronze-light:#c49a63;
  --ink:#2c2a22;
  --muted:#7a7363;
  --line:rgba(60,63,49,.14);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost','Segoe UI',sans-serif;
  --shadow:0 18px 50px -22px rgba(44,42,34,.45);
  --maxw:1180px;
  /* Zettelfarben der Notizen (v16). Eine bewusste, eng begrenzte Ergänzung
     der Palette: gedeckte Papiertöne, die nur als Fläche eines Notizzettels
     vorkommen — nirgends sonst. */
  --zettel-gelb:#f4e6b4;
  --zettel-apricot:#f5d5b3;
  --zettel-rose:#efc9c0;
  --zettel-flieder:#e2d2e3;
  --zettel-blau:#cbdcea;
  --zettel-salbei:#cfe2d4;
  --zettel-oliv:#dde2bd;
  --zettel-stein:#e6e0d4;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);
  font-size:17px;line-height:1.7;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.serif{font-family:var(--serif)}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:.01em}
.eyebrow{font-family:var(--sans);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--bronze);font-weight:500;margin-bottom:1.1rem}
.kicker{font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--bronze);font-weight:500}

/* NAV */
header.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .4s ease;
  padding:22px 0;background:transparent}
header.nav.scrolled{background:rgba(245,239,227,.96);backdrop-filter:blur(14px);
  padding:14px 0;box-shadow:0 1px 0 var(--line)}
/* Subseiten ohne Hero → sofort opakes Menü */
header.nav.solid{background:rgba(245,239,227,.98);padding:14px 0;box-shadow:0 1px 0 var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.brand{font-family:var(--serif);font-size:1.5rem;font-weight:600;letter-spacing:.02em;color:var(--cream)}
header.nav.scrolled .brand,header.nav.solid .brand{color:var(--olive)}
.brand span{color:var(--bronze)}
.nav-links{display:flex;gap:2.2rem;align-items:center}
.nav-links a{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;font-weight:400;
  color:var(--cream);opacity:.9;transition:opacity .25s,color .25s;position:relative;padding:4px 0}
header.nav.scrolled .nav-links a,header.nav.solid .nav-links a{color:var(--olive)}
.nav-links a:hover{opacity:1;color:var(--bronze)}
.nav-links a.cta{border:1px solid currentColor;padding:8px 18px;border-radius:30px;opacity:1}
.nav-links a.cta:hover{background:var(--bronze);border-color:var(--bronze);color:var(--cream)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;z-index:110}
.burger span{width:26px;height:2px;background:var(--cream);transition:.3s;display:block}
header.nav.scrolled .burger span,header.nav.solid .burger span{background:var(--olive)}
.burger.open span{background:var(--cream) !important}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* HERO */
.hero{position:relative;height:100vh;min-height:620px;display:flex;align-items:center;overflow:hidden}
.hero-slides{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease;background-size:cover;background-position:center;
  animation:kenburns 14s ease-out infinite alternate}
.hero-slide.active{opacity:1}
@keyframes kenburns{from{transform:scale(1.04)}to{transform:scale(1.14)}}
.hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(44,42,34,.5) 0%,rgba(44,42,34,.22) 40%,rgba(44,42,34,.62) 100%)}
.hero-content{position:relative;z-index:2;color:var(--cream);max-width:760px}
.hero-content h1{font-size:clamp(3rem,9vw,6.4rem);color:var(--cream);margin:1.2rem 0 1.4rem;font-weight:500;
  display:block;line-height:1.05}
.hero-content h1 em{font-style:italic;color:var(--bronze-light);display:block}
.hero-kicker{color:rgba(245,239,227,.85)}
.hero-sub{font-size:clamp(1.22rem,3vw,1.66rem);font-weight:300;max-width:600px;color:rgba(245,239,227,.96);text-shadow:0 1px 12px rgba(28,27,22,.35)}
.hero-coords{position:absolute;bottom:32px;left:0;right:0;z-index:2;text-align:center;
  color:rgba(245,239,227,.7);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase}
.scroll-dot{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);z-index:2;width:1px;height:44px;
  background:linear-gradient(var(--bronze-light),transparent)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sans);font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;font-weight:400;padding:14px 30px;border-radius:32px;
  border:1px solid var(--bronze);color:var(--bronze);background:transparent;cursor:pointer;transition:.3s}
.btn:hover{background:var(--bronze);color:var(--cream)}
.btn.solid{background:var(--bronze);color:var(--cream)}
.btn.solid:hover{background:var(--olive)}
.btn.light{border-color:rgba(245,239,227,.85);color:var(--cream)}
.btn.light:hover{background:var(--cream);color:var(--olive);border-color:var(--cream)}

/* SECTIONS */
section{position:relative}
.sec{padding:clamp(64px,11vw,130px) 0}
.sec-head{max-width:680px;margin-bottom:3.4rem}
.sec-head h2{font-size:clamp(2rem,5vw,3.2rem)}
.sec-head p{color:var(--muted);font-size:1.08rem;margin-top:1rem}
.center{text-align:center;margin-left:auto;margin-right:auto}
.olive{background:var(--olive);color:var(--cream)}
.olive h2,.olive h3{color:var(--cream)}
.olive .sec-head p,.olive p{color:rgba(245,239,227,.94)}
.olive .eyebrow{color:var(--bronze-light)}

/* TEASER CARDS (homepage) */
.teasers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.tcard{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:3/4;box-shadow:var(--shadow);
  display:flex;align-items:flex-end}
.tcard .mini{position:absolute;inset:0}
.tcard .mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.tcard .mini img.active{opacity:1}
.tcard::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(44,42,34,0) 35%,rgba(44,42,34,.82) 100%)}
.tcard .body{position:relative;z-index:2;padding:2rem 1.8rem;color:var(--cream)}
.tcard .body h3{font-size:1.9rem;color:var(--cream);margin-bottom:.4rem}
.tcard .body p{font-size:.95rem;color:rgba(245,239,227,.85);font-weight:300}
.tcard .arrow{margin-top:1rem;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-light)}
.tcard:hover .mini img.active{transform:scale(1.05);transition:transform 6s ease,opacity 1.4s ease}

/* SPLIT (text + image) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.split.rev .split-text{order:2}
.split-img{border-radius:6px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5}
.split-img img{width:100%;height:100%;object-fit:cover}
.split-text h2{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:1.4rem}
.split-text p{margin-bottom:1rem;color:var(--muted)}
.olive .split-text p{color:rgba(245,239,227,.94)}

/* FEATURES */
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:3rem}
.feat{padding:1.8rem 1.4rem;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.35)}
.olive .feat{border-color:rgba(245,239,227,.18);background:rgba(255,255,255,.05)}
.feat h3{font-size:1.25rem;margin-bottom:.3rem}
.feat p{font-size:.86rem;color:var(--muted)}
.olive .feat p{color:rgba(245,239,227,.86)}

/* GALLERY */
.gallery{columns:3;column-gap:1rem}
.gallery img{width:100%;margin-bottom:1rem;border-radius:5px;cursor:pointer;transition:.4s;break-inside:avoid;
  box-shadow:0 10px 30px -18px rgba(44,42,34,.5)}
.gallery img:hover{transform:translateY(-4px);box-shadow:var(--shadow)}

/* QUOTE */
.quote{text-align:center;max-width:860px;margin:0 auto}
.quote p{font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,4vw,2.6rem);line-height:1.3;color:var(--cream)}
.quote .m{margin-top:1.6rem;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze-light)}

/* PLACES grid (geniessen) */
.places{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.place{padding:1.8rem;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.4);
  display:flex;flex-direction:column}
.place-link{display:block;text-decoration:none;color:inherit;transition:.25s}
.place-link:hover .place{box-shadow:0 8px 28px -10px rgba(44,42,34,.25);transform:translateY(-3px)}
.place h3{font-size:1.5rem;margin-bottom:.6rem}
.place p{font-size:.92rem;color:var(--muted);margin-bottom:1rem;flex:1}
.place .tags{display:flex;flex-wrap:wrap;gap:.4rem}
.place .tags span{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--bronze);
  border:1px solid var(--line);padding:4px 10px;border-radius:20px}
.place .place-cta{margin-top:1.2rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bronze);display:inline-flex;align-items:center;gap:.4rem}
.olive .place{background:rgba(245,239,227,.97);border-color:rgba(60,63,49,.10)}
.olive .place h3{color:var(--olive)}
.olive .place p{color:#564f41}
.olive .place .tags span{color:#8a672f;border-color:rgba(60,63,49,.22)}

/* CARDS 3-col */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.card3 h3{font-size:1.4rem;margin-bottom:.5rem}
.card3 p{font-size:.92rem;color:rgba(245,239,227,.8)}

/* CTA band */
.cta-band{text-align:center;padding:clamp(60px,9vw,110px) 0}
.cta-band h2{font-size:clamp(1.8rem,4.5vw,3rem);margin-bottom:1.8rem;max-width:680px;margin-left:auto;margin-right:auto}

/* FREUNDE / LOGIN */
.login-box{max-width:420px;margin:0 auto;text-align:center;background:rgba(255,255,255,.55);
  border:1px solid var(--line);border-radius:10px;padding:3rem 2.4rem;box-shadow:var(--shadow)}
.login-box h2{font-size:2.2rem;margin-bottom:.8rem}
.login-box p{color:var(--muted);margin-bottom:1.8rem;font-size:.95rem}
.login-box input{width:100%;padding:14px 18px;border:1px solid var(--line);border-radius:30px;
  font-family:var(--sans);font-size:1rem;text-align:center;margin-bottom:1rem;background:var(--cream)}
.login-box input:focus{outline:none;border-color:var(--bronze)}
.login-err{color:#b1503c;font-size:.85rem;min-height:1.2em;margin-bottom:.6rem}
.dash{display:none}
.dash.show{display:block}
.dash-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:2.5rem}
.dash-card{border:1px solid var(--line);border-radius:8px;padding:1.8rem;background:rgba(255,255,255,.45)}
.dash-card h3{font-size:1.4rem;margin-bottom:.6rem}
.dash-card a{color:var(--bronze);font-size:.9rem;letter-spacing:.04em}
.dash-card iframe{width:100%;border:0;border-radius:6px;margin-top:1rem}
.cal-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:.8rem;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--bronze)}
.cal-link:hover{color:var(--olive)}

/* UNDER CONSTRUCTION */
.uc-box{text-align:center;padding:5rem 2rem;max-width:560px;margin:0 auto}
.uc-icon{font-size:4rem;margin-bottom:1.5rem}
.uc-box h2{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:1rem}
.uc-box p{color:var(--muted);font-size:1.05rem;margin-bottom:2rem}

/* IMPRESSUM / DATENSCHUTZ */
.legal-content{max-width:760px;margin:0 auto}
.legal-content h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:2rem 0 .8rem}
.legal-content h3{font-size:1.2rem;margin:1.4rem 0 .5rem;color:var(--olive)}
.legal-content p,.legal-content li{color:var(--muted);font-size:.97rem;margin-bottom:.8rem;line-height:1.75}
.legal-content ul{padding-left:1.5rem;margin-bottom:1rem}
.legal-content a{color:var(--bronze)}

/* LIGHTBOX */
.lb{position:fixed;inset:0;background:rgba(28,27,22,.94);z-index:200;display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:88vh;border-radius:4px}
.lb .x{position:absolute;top:24px;right:30px;color:var(--cream);font-size:2.4rem;cursor:pointer;line-height:1}
.lb .nav-arrow{position:absolute;top:50%;transform:translateY(-50%);color:var(--cream);font-size:2.6rem;
  cursor:pointer;padding:20px;opacity:.7;user-select:none}
.lb .nav-arrow:hover{opacity:1}
.lb .prev{left:10px}.lb .next{right:10px}

/* FOOTER */
footer{background:var(--olive-2);color:rgba(245,239,227,.9);padding:64px 0 36px;text-align:center}
footer .fbrand{font-family:var(--serif);font-size:1.8rem;color:var(--cream);margin-bottom:1rem}
footer .fbrand span{color:var(--bronze-light)}
footer .ftag{font-size:1rem;font-weight:300;white-space:pre-line;margin-bottom:1.6rem}
footer .flinks{display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
footer .flinks a:hover{color:var(--bronze-light)}
footer .fhint{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,239,227,.62);
  padding-top:1.6rem;border-top:1px solid rgba(245,239,227,.12)}

/* REVEAL animation */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

/* MOBILE */
@media(max-width:880px){
  body{font-size:16px}

  /* ── Korrektur v8 ──────────────────────────────────────────────────────
     backdrop-filter am Header MUSS mobil weg. Ein Element mit
     backdrop-filter, filter oder transform wird zum Bezugsrahmen für alle
     position:fixed-Kinder. Das Mobilmenü ist ein Kind des Headers und will
     sich mit inset:0 am Bildschirm ausrichten — mit dem Filter richtet es
     sich stattdessen am Header aus und ist nur so hoch wie dieser. Es wirkt
     dann durchsichtig oder ist gar nicht zu sehen.
     Der Header wird dafür vollständig deckend statt weichgezeichnet.     */
  header.nav.scrolled,header.nav.solid{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:var(--cream);
  }
  .nav-links{position:fixed;inset:0;background:var(--olive);flex-direction:column;justify-content:center;
    gap:2rem;transform:translateX(100%);transition:transform .4s ease;z-index:105}
  .nav-links.open{transform:none}
  .nav-links a{color:var(--cream) !important;font-size:1.1rem}
  .burger{display:flex}

  /* ── Korrektur v8 ──────────────────────────────────────────────────────
     Teaser-Kacheln: festes Seitenverhältnis raus. Der Text braucht mehr
     Höhe, als 16:10 hergibt, und lief oben über den Bildrand hinaus.
     Die Kachel wächst jetzt mit ihrem Inhalt; das Bild liegt ohnehin
     absolut darunter und füllt jede Höhe.                                */
  .teasers{grid-template-columns:1fr;gap:1.2rem}
  .tcard{aspect-ratio:auto;min-height:300px}
  .tcard .body{padding:1.6rem 1.4rem}

  .split{grid-template-columns:1fr;gap:2rem}
  .split.rev .split-text{order:0}
  .feats{grid-template-columns:repeat(2,1fr)}
  .gallery{columns:2;column-gap:.7rem}
  .places{grid-template-columns:1fr}
  .cards3{grid-template-columns:1fr}
  .dash-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .feats{grid-template-columns:1fr}
  .gallery{columns:1}
  .tcard{min-height:260px}
}

/* fiesta cards on light section */
.card3[data-light]{border:1px solid var(--line);border-radius:6px;padding:1.7rem;background:rgba(255,255,255,.45)}
.card3[data-light] h3{color:var(--ink)}
.card3[data-light] p{color:var(--muted)}

/* ── RÜCKLEISTE in den Freunde-Bereich (v10) ──────────────────────────────
   Auf allen internen Seiten die erste und die letzte Zeile des Inhalts.
   Bewusst zurückhaltend: kleine Versalien, ein bronzefarbenes Winkelzeichen,
   eine Haarlinie. Sie soll auffindbar sein, ohne dem Seitentitel den Rang
   abzulaufen. Beim Überfahren rückt der Pfeil ein Stück nach links.
   Im Druck fällt sie weg — auf Papier führt kein Link irgendwohin.        */
.ck-zurueck{
  display:flex;align-items:center;
  padding:0 0 .7rem;margin-bottom:2.2rem;
  border-bottom:1px solid var(--line);
}
.ck-zurueck--unten{
  margin:3.4rem 0 0;padding:1rem 0 0;
  border-bottom:0;border-top:1px solid var(--line);
}
.ck-zurueck a{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--sans);font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
  padding:6px 2px;transition:color .25s;
}
.ck-zurueck a::before{
  content:'\2039';font-size:1.35rem;line-height:1;color:var(--bronze);
  position:relative;top:-1px;transition:transform .25s;
}
.ck-zurueck a:hover,.ck-zurueck a:focus-visible{color:var(--bronze)}
.ck-zurueck a:hover::before{transform:translateX(-3px)}
@media print{.ck-zurueck{display:none}}

/* Abmelden an der Rückleiste (v17) — gesetzt von CK.sitzungsleiste().
   Rechts in derselben Zeile; am Telefon rutscht es darunter. */
.ck-zurueck{flex-wrap:wrap;gap:.2rem 1rem}
.ck-sitzung{
  margin-left:auto;display:inline-flex;align-items:center;flex-wrap:wrap;gap:.3rem .9rem;
  font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.ck-sitzung-wer{opacity:.8}
.ck-sitzung-knopf{
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--bronze);
  background:none;border:1px solid var(--line);border-radius:20px;padding:6px 14px;
  cursor:pointer;transition:.25s;min-height:34px;
}
.ck-sitzung-knopf:hover,.ck-sitzung-knopf:focus-visible{border-color:var(--bronze);background:var(--bronze);color:var(--cream)}
/* v20: statt "Abmelden" für Freunde ein ehrlicher Hinweis — die Anmeldung an
   Tor 1 (Anmeldefenster des Browsers) kann keine Webseite zuverlässig löschen. */
.ck-sitzung-hinweis{text-transform:none;letter-spacing:.02em;font-size:.76rem}
.ck-zurueck--nur-sitzung{margin-bottom:2.6rem}
.ck-zurueck--nur-sitzung:empty{display:none}

/* Der feste Benutzername im Anmeldetor (v17). Er muss für den
   Passwortspeicher des Browsers im Formular stehen, soll aber nicht zu
   sehen sein. Bewusst NICHT display:none — manche Browser übergehen solche
   Felder; deshalb aus dem Bild geschoben. */
input.ck-benutzer[readonly]{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.login-box form,.hb-tor form{margin:0}

/* Fassung im Seitenfuß (v16) — gesetzt von js/kismet-core.js auf jeder Seite,
   die den Kern lädt. Zeigt nach einer Veröffentlichung, welcher Stand läuft. */
footer .fversion{font-size:.7rem;letter-spacing:.14em;color:rgba(245,239,227,.62);margin-top:.9rem}
footer .fversion strong{font-weight:500;color:var(--bronze-light)}