@import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&family=Open+Sans:wght@300;400;600&family=Dancing+Script:wght@600&display=swap');

:root {
  --sand:      #f4f4f4;
  --white:     #ffffff;
  --header:    #2b2b2b;
  --nav:       #222222;
  --pink:      #ca4476;
  --pink-dark: #a8305c;
  --pink-light:#fdf0f5;
  --gray:      #a3a3a3;
  --text:      #333333;
  --border:    #dddddd;
  --radius:    4px;
  --shadow:    0 1px 4px rgba(0,0,0,0.12);
  --nav-h:     80px;
  --max-w:     1060px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; background:var(--header); }
body { font-family:'Open Sans',sans-serif; font-size:15px; line-height:1.7; color:var(--text); background:var(--sand); }

/* PAGE WRAPPER */
.page-wrapper { max-width:1920px; margin:0 auto; background:var(--sand); box-shadow:0 0 40px rgba(0,0,0,0.15); }

/* CONTAINER */
.container { max-width:var(--max-w); margin:0 auto; padding:0 20px; }
.section    { padding:48px 0; }
.section-alt { background:var(--white); }

/* TYPOGRAPHY */
h1,h2,h3 { font-family:'PT Serif',serif; font-weight:700; line-height:1.3; }
h1 { font-size:clamp(1.6rem,3.5vw,2.4rem); margin-bottom:12px; }
h2 { font-size:clamp(1.2rem,2.5vw,1.7rem); margin-bottom:14px; }
h3 { font-size:1.05rem; margin-bottom:8px; }
a  { color:var(--pink); text-decoration:none; }
a:hover { color:var(--pink-dark); text-decoration:underline; }
p  { margin-bottom:1em; }
p:last-child { margin-bottom:0; }

/* LOADING SCREEN */
.loading-screen {
  position:fixed; inset:0; z-index:9999;
  background:var(--header);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:24px;
  transition:opacity 0.6s ease, visibility 0.6s ease;
}
.loading-screen.done { opacity:0; visibility:hidden; }
.loading-logo { width:clamp(180px,40vw,320px); height:auto; }
.loading-bar-wrap {
  width:clamp(200px,40vw,360px);
  height:4px; background:rgba(255,255,255,0.15);
  border-radius:2px; overflow:hidden;
}
.loading-bar {
  height:100%; width:0%; background:var(--pink);
  border-radius:2px;
  transition:width 0.3s ease;
}
.loading-text {
  font-family:'Open Sans',sans-serif;
  font-size:0.82rem; color:rgba(255,255,255,0.4);
  letter-spacing:0.1em; text-transform:uppercase;
}

/* PHONE BAR */
.phone-bar { background:#1a1a1a; color:#aaa; text-align:center; padding:5px 20px; font-size:0.82rem; }
.phone-bar a { color:var(--pink); font-weight:600; }

/* HEADER */
.site-header { background:var(--header); position:sticky; top:0; z-index:100; border-bottom:3px solid var(--pink); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); max-width:var(--max-w); margin:0 auto; padding:0 20px; }
.site-logo { display:flex; align-items:center; text-decoration:none; padding:8px 0; }
.site-logo img { height:58px; width:auto; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.35)); transition:opacity 0.15s; }
.site-logo:hover img { opacity:0.88; }

/* NAV */
.main-nav { display:flex; align-items:center; gap:2px; }
.main-nav a { padding:6px 13px; font-size:0.88rem; color:#ddd; border-radius:var(--radius); transition:background 0.15s,color 0.15s; }
.main-nav a:hover,.main-nav a.active { background:var(--pink); color:#fff; text-decoration:none; }
.main-nav a.btn-book { background:var(--pink); color:#fff; font-weight:600; margin-left:6px; }
.main-nav a.btn-book:hover { background:var(--pink-dark); }
.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span { display:block; width:22px; height:2px; background:#fff; margin:5px 0; }

/* HERO SLIDER */
.hero-slider-outer { background:var(--header); padding:20px 20px 0; }
.hero-slider-outer-inner { max-width:var(--max-w); margin:0 auto; }
.hero-slider {
  position:relative; overflow:hidden;
  width:100%; height:55vh;
  background:#555;
  border-radius:10px;
  box-shadow:0 4px 24px rgba(0,0,0,0.35);
}
.slider-track { position:relative; width:100%; height:100%; }
.slide { position:absolute; inset:0; overflow:hidden; opacity:0; transition:opacity 1.2s ease-in-out; pointer-events:none; }
.slide.active { opacity:1; pointer-events:auto; }
.slide img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.slider-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.25);
  color:#fff; border-radius:var(--radius);
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1.3rem; z-index:2; transition:background 0.15s;
}
.slider-btn:hover { background:var(--pink); border-color:var(--pink); }
.slider-btn.prev { left:12px; }
.slider-btn.next { right:12px; }
.slider-dots { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:6px; }
.slider-dots span { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.45); cursor:pointer; transition:background 0.2s; }
.slider-dots span.active { background:var(--pink); }

/* HAUS SLIDER */
.haus-slider-outer { margin-top:16px; }
.haus-slider-outer .hero-slider { background:var(--white); box-shadow:0 2px 12px rgba(0,0,0,0.12); height:55vh; max-width:100%; }

/* LOGO WELCOME */
.logo-welcome { background:var(--header); border-bottom:3px solid var(--pink); text-align:center; padding:28px 20px 24px; }
.logo-hero { width:clamp(200px,38vw,400px); height:auto; filter:drop-shadow(0 2px 10px rgba(202,68,118,0.3)); }
.logo-welcome-text { font-family:'PT Serif',serif; font-size:clamp(0.85rem,1.8vw,1.05rem); color:#bbb; font-style:italic; margin-top:12px; }

/* HIGHLIGHTS */
.highlights { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; padding:36px 0; }
.highlight-card { background:var(--white); border-radius:var(--radius); padding:20px 18px; box-shadow:var(--shadow); border-top:3px solid var(--pink); }
.highlight-card .icon { font-size:1.6rem; margin-bottom:8px; display:block; }

/* INTRO */
.intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.wohnung-features { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; margin:14px 0; }
.wohnung-features li { display:flex; align-items:flex-start; gap:7px; font-size:0.9rem; }
.wohnung-features li::before { content:"▸"; color:var(--pink); font-size:0.8rem; flex-shrink:0; margin-top:3px; }
.hinweis-box { background:#fff8ee; border-left:4px solid var(--pink); padding:10px 14px; font-size:0.88rem; margin-top:14px; border-radius:0 var(--radius) var(--radius) 0; }

/* AUSZEICHNUNGEN */
.auszeichnungen { background:var(--white); border-top:3px solid var(--pink); border-bottom:3px solid var(--pink); text-align:center; }
.auszeichnungen > .container > p { color:var(--gray); font-size:0.95rem; margin-bottom:32px; }
.awards-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:32px; align-items:center; justify-items:center; }
.award-card { display:flex; flex-direction:column; align-items:center; gap:14px; }
.award-card img { max-width:200px; max-height:200px; width:100%; height:auto; object-fit:contain; filter:drop-shadow(0 2px 8px rgba(0,0,0,0.12)); transition:transform 0.2s; }
.award-card img:hover { transform:scale(1.04); }
.award-card p { font-size:0.9rem; color:var(--gray); text-align:center; margin:0; line-height:1.5; }
.award-card p strong { color:var(--text); }

/* GALERIE */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:8px; }
.gallery-item { position:relative; width:100%; padding-top:75%; overflow:hidden; border-radius:var(--radius); border:1px solid var(--border); cursor:pointer; }
.gallery-item img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:opacity 0.2s,transform 0.3s; }
.gallery-item:hover img { opacity:0.82; transform:scale(1.03); }

/* LIGHTBOX */
.lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:999; align-items:center; justify-content:center; }
.lightbox.open { display:flex; }
.lightbox img { max-width:94vw; max-height:92vh; border-radius:var(--radius); object-fit:contain; }
.lightbox-close { position:absolute; top:14px; right:18px; color:#fff; font-size:2rem; background:none; border:none; cursor:pointer; }
.lightbox-prev,.lightbox-next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.12); color:#fff; border:none; font-size:2rem; cursor:pointer; padding:8px 16px; border-radius:var(--radius); }
.lightbox-prev:hover,.lightbox-next:hover { background:var(--pink); }
.lightbox-prev { left:10px; }
.lightbox-next { right:10px; }

/* PREISE */
.price-card { background:var(--white); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); border-top:3px solid var(--pink); max-width:620px; }
.price-main { font-family:'PT Serif',serif; font-size:2.4rem; color:var(--pink); font-weight:700; line-height:1; }
.price-label { font-size:0.88rem; color:var(--gray); margin-bottom:18px; }
.price-list { list-style:none; margin:18px 0; }
.price-list li { display:flex; align-items:flex-start; gap:9px; padding:7px 0; border-bottom:1px solid var(--border); font-size:0.93rem; }
.price-list li:last-child { border-bottom:none; }
.price-list li::before { content:"▸"; color:var(--pink); font-size:0.75rem; flex-shrink:0; margin-top:5px; }
.payment-info { background:#f9f9f9; border:1px solid var(--border); border-radius:var(--radius); padding:18px 22px; margin-top:20px; font-size:0.9rem; }
.payment-info h3 { color:var(--pink); margin-bottom:8px; }

/* UMGEBUNG */
.umgebung-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:22px; }
.umgebung-card { background:var(--white); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); border-left:3px solid var(--pink); }

/* KONTAKT */
.kontakt-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.contact-info p { display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; }
.contact-info .ci-label { font-weight:600; min-width:78px; color:var(--gray); font-size:0.88rem; }
.contact-form { display:flex; flex-direction:column; gap:13px; }
.contact-form label { font-size:0.85rem; font-weight:600; color:var(--gray); display:block; margin-bottom:3px; }
.contact-form input,.contact-form textarea { width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius); font-family:inherit; font-size:0.93rem; background:var(--white); color:var(--text); transition:border-color 0.15s; }
.contact-form input:focus,.contact-form textarea:focus { outline:none; border-color:var(--pink); }
.contact-form textarea { min-height:110px; resize:vertical; }
.btn-primary { background:var(--pink); color:#fff; border:none; border-radius:var(--radius); padding:11px 26px; font-family:inherit; font-size:0.95rem; font-weight:600; cursor:pointer; transition:background 0.15s; align-self:flex-start; }
.btn-primary:hover { background:var(--pink-dark); }

/* BUCHUNGSBANNER */
.buchung-banner { background:var(--nav); color:#fff; text-align:center; padding:36px 24px; border-top:3px solid var(--pink); }
.buchung-banner h2 { color:#fff; margin-bottom:8px; }
.buchung-banner p { opacity:0.75; margin-bottom:18px; font-size:0.93rem; }
.btn-buchung { display:inline-block; background:var(--pink); color:#fff; font-weight:700; font-size:1rem; padding:12px 28px; border-radius:var(--radius); transition:background 0.15s; text-decoration:none; }
.btn-buchung:hover { background:var(--pink-dark); color:#fff; text-decoration:none; }

/* FOOTER */
.site-footer { background:#2b2b2b; color:#aaa; padding:36px 0 16px; font-size:0.88rem; border-top:3px solid var(--pink); }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:28px; margin-bottom:28px; }
.footer-col h4 { font-family:'PT Serif',serif; color:#fff; font-size:0.95rem; margin-bottom:10px; border-bottom:1px solid #444; padding-bottom:6px; }
.footer-col a { color:#aaa; display:block; margin-bottom:4px; }
.footer-col a:hover { color:var(--pink); text-decoration:none; }
.footer-bottom { border-top:1px solid #3d3d3d; padding-top:14px; text-align:center; color:#666; font-size:0.8rem; }

/* SIGNATURE */
.signature { font-family:'Dancing Script',cursive; font-size:1.45rem; font-weight:600; color:var(--pink); line-height:1.3; display:inline-block; }
.site-footer .signature { color:#e87aaa; }

/* LEGAL */
.legal-content { max-width:780px; background:var(--white); border-radius:var(--radius); padding:36px; box-shadow:var(--shadow); }
.legal-content h1 { margin-bottom:20px; font-size:1.8rem; }
.legal-content h2 { font-size:1.2rem; margin:24px 0 8px; }
.legal-content h3 { font-size:1rem; margin:16px 0 6px; }
.legal-content p,.legal-content li { font-size:0.9rem; line-height:1.7; }
.legal-content ul { margin-left:18px; margin-bottom:1em; }
.legal-content hr { border:none; border-top:1px solid var(--border); margin:22px 0; }

/* BACK TO TOP */
.back-top { position:fixed; bottom:18px; right:18px; background:var(--pink); color:#fff; border:none; border-radius:var(--radius); width:38px; height:38px; font-size:1.1rem; cursor:pointer; display:none; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,0.25); z-index:50; }
.back-top.visible { display:flex; }

/* RESPONSIVE */
@media (max-width:768px) {
  .main-nav { display:none; position:absolute; top:var(--nav-h); left:0; right:0; background:var(--nav); flex-direction:column; align-items:stretch; padding:10px 14px; border-bottom:2px solid var(--pink); z-index:99; }
  .main-nav.open { display:flex; }
  .main-nav a { padding:10px 12px; }
  .nav-toggle { display:block; }
  .intro-grid,.kontakt-grid { grid-template-columns:1fr; }
  .wohnung-features { grid-template-columns:1fr; }
  .site-logo img { height:44px; }
  .hero-slider { height:40vw; min-height:200px; }
}