/* ===================  TOKENS  =================== */
:root{
  --bg:#fffefc;
  --bg-soft:#fff9f6;
  --text:#2a2b2f;
  --muted:#6d6f79;

  /* feminine Pastellpalette */
  --rose:#e6a7b8;
  --apricot:#ffd5b1;
  --sage:#cde8dd;
  --lav:#e6dbff;

  --line:#ece8f1;
  --shadow:0 14px 32px rgba(22,22,22,.08);
  --radius:22px;
}

/* ===================  BASE  =================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  background:
    radial-gradient(1100px 520px at 10% -15%, #fff3f8 20%, transparent 60%),
    radial-gradient(900px 360px at 110% 0%, #f3fff9 12%, transparent 70%),
    var(--bg);
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.7;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

h1,h2,h3{font-family:"Fraunces", serif; color:#221f23; letter-spacing:.2px; margin:0 0 .35em}
h1{font-size:clamp(1.8rem,4.8vw,2.8rem); font-weight:600}
h2{font-size:clamp(1.4rem,3vw,2rem); font-weight:600}
h3{font-size:clamp(1.05rem,2vw,1.25rem); font-weight:600}
.lead{font-size:clamp(1rem,1.6vw,1.15rem); color:#4e505a}
.container{width:min(1100px,92%); margin:auto}
.center{text-align:center}

/* ===================  HEADER & DROPDOWN  =================== */
.header{position:relative; z-index:50; background:transparent}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; /* kompakter Header */
  position:relative; z-index:50;
}
.logo{height:85px; width:auto}

.dropdown{position:relative}
.dropdown-btn{
  padding:8px 12px; border-radius:14px; border:1px solid var(--line); background:#fff; cursor:pointer;
  box-shadow:var(--shadow); font-weight:600
}
.dropdown-panel{
  position:absolute; right:0; top:44px; width:min(300px,90vw);
  background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 26px 60px rgba(14,14,18,.12);
  padding:10px; display:grid; gap:8px; transform:scale(.96); opacity:0; visibility:hidden; transition:.2s ease;
  z-index:60;
}
.dropdown-panel.open{transform:scale(1); opacity:1; visibility:visible}
.dropdown-panel a{padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:#fff}
.dropdown-panel a:hover{background:linear-gradient(135deg, rgba(230,167,184,.16), rgba(255,213,177,.16)); border-color:#efdeea}

/* ===================  HERO  =================== */
.hero{
  position:relative; min-height:56vh; /* kompakter */
  display:grid; place-items:center;
}

.hero .hero-media{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  /* nur noch das Bild – KEIN weißer Verlauf mehr */
  background-image: var(--img, url('../img/header.jpg'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-center{position:relative; z-index:1; width:100%}
.hero-card{
  width:min(840px,92%); margin:auto; padding:22px 22px;
  background:rgba(255,255,255,.66); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:24px; box-shadow:0 20px 44px rgba(14,14,18,.12);
}

/* Buttons */
.cta{display:flex; gap:10px; flex-wrap:wrap}
.btn-primary,.btn-ghost{display:inline-flex; align-items:center; gap:8px; padding:11px 16px; border-radius:14px; font-weight:600}
.btn-primary{background:linear-gradient(135deg, var(--rose), var(--apricot)); color:#3a2c33; box-shadow:0 10px 24px rgba(230,167,184,.35)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:#fff; border:1px solid var(--line); color:#3a3b41}
.btn-ghost:hover{box-shadow:0 8px 20px rgba(20,20,20,.06)}
.big{font-size:1.05rem; padding:14px 18px; border-radius:16px}

/* ===================  SUBHERO  =================== */
.subhero{
  position:relative; height:34vh; display:grid; place-items:center; text-align:center;
  background-image: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.85)), var(--img, url('../img/header.jpg'));
  background-size: 100% 100%, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
}

/* ===================  CARDS / LAYOUT  =================== */
.grid-3{display:grid; gap:20px; grid-template-columns:repeat(3,1fr); margin:34px auto}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px;
}
.card .emo{font-size:22px; margin-bottom:6px}

/* Bilder automatisch kleiner, card-bündig */
.media{overflow:hidden; border-radius:16px}
.card .media img,
.split .media img,
.prose .media img,
.content-img{
  width:100%;
  height:220px;              /* kompakte Höhe */
  object-fit:cover;          /* sauber beschnitten */
  border-radius:16px;
}

/* geteilte Sektion */
.split{display:grid; grid-template-columns:1.1fr 1fr; gap:22px; align-items:center; margin:54px auto}
@media (max-width:980px){.split{grid-template-columns:1fr}}

/* Story Layout: Text links, Bild rechts */
.story-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:22px; margin:34px auto}
.story-text{align-self:center}
.story-media{align-self:start}
@media (max-width:960px){.story-grid{grid-template-columns:1fr}}

/* Listen */
.tick{list-style:none; padding-left:0}
.tick li{position:relative; padding-left:26px; margin:6px 0}
.tick li:before{content:"✓"; position:absolute; left:0; color:var(--rose)}

/* ===================  REVIEWS  =================== */
.reviews{padding:56px 0; background:linear-gradient(180deg,#fff,#fffdfc)}
.carousel{position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:22px; min-height:140px}
.slide{position:absolute; inset:22px; opacity:0; transform:translateY(16px) scale(.985); transition:opacity .7s ease, transform .7s ease; color:#3f4049}
.slide.active{opacity:1; transform:none; position:relative}
.stars{display:inline-flex; gap:2px; margin-left:8px; color:#ffb703; font-size:1rem}
.dots{display:flex; gap:8px; justify-content:center; margin-top:12px}
.dots button{width:8px; height:8px; border-radius:999px; border:0; background:#e6e6ea}
.dots button.active{background:linear-gradient(135deg, var(--rose), var(--apricot))}

/* ===================  MENU (schöner) =================== */
.menu{margin:24px auto 50px}
.menu-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:980px){.menu-cards{grid-template-columns:1fr}}
.menu-card{background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:18px}
.menu-card h2{margin-bottom:8px}
.menu-card ul{list-style:none; padding:0; margin:0}
.menu-card li{
  display:grid; grid-template-columns:1fr 1fr auto; gap:6px 12px; align-items:center;
  padding:12px 6px; border-bottom:1px dashed #eeeaf2;
}
.menu-card li:last-child{border-bottom:0}
.menu-card span{font-weight:600}
.menu-card em{font-style:normal; color:#7a7b85}
.menu-card b{color:#3a2c33}
.badge{display:inline-block; font-size:.72rem; padding:3px 7px; border-radius:999px; margin-left:6px; background:linear-gradient(135deg, var(--lav), #fff); color:#4b3d6b; border:1px solid #e9e2ff}
.badge.pastel{background:linear-gradient(135deg, var(--sage), #fff); color:#294f45; border:1px solid #cfeee6}
.badge.new{background:linear-gradient(135deg, #fff2c7, #fff); color:#6b5413; border:1px solid #ffe39b}
.hint{color:#7a7b85; margin:8px 2px}

/* ===================  KONTAKT  =================== */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:34px auto}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
.contact-choice .choice{text-align:center}
.choice-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px}
@media (max-width:700px){.choice-grid{grid-template-columns:1fr}}
.input{display:grid; gap:6px; margin:8px 0}
.input input,.input textarea{width:100%; padding:11px 14px; border-radius:14px; border:1px solid #e7e3ec; background:#fff}
.input input:focus,.input textarea:focus{outline:2px solid var(--rose)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:900px){.two{grid-template-columns:1fr}}
.err{color:#c04462; height:18px}
.ok{color:#256a5c; font-weight:600}

.map-embed iframe{width:100%; height:320px; border:0; border-radius:16px; box-shadow:var(--shadow)}

/* ===================  INFO + FOOTER  =================== */
.info{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:30px auto; padding:16px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
@media (max-width:780px){.info{grid-template-columns:1fr}}

.footer{margin-top:50px; background:#fff; border-top:1px solid var(--line)}
.foot{display:flex; flex-direction:column; gap:8px; padding:18px 0}
.links{display:flex; gap:14px; flex-wrap:wrap}
.footer .legal{color:var(--muted)}

/* ===================  GLOBAL LOADER + CUTE LOADER  =================== */
.loader{position:fixed; inset:0; display:grid; place-items:center; background:rgba(255,255,255,.8); z-index:100; transition:opacity .4s, visibility .4s}
.loader .dot{width:10px; height:10px; border-radius:999px; background:linear-gradient(135deg,var(--rose),var(--apricot)); margin:4px; display:inline-block; animation:bounce .6s infinite alternate}
.loader.hidden{opacity:0; visibility:hidden}
@keyframes bounce{to{transform:translateY(-8px)}}

/* Herzige Ladeanimation (Reservation/Auskunft) */
.cute-loader{
  position:fixed; inset:0; display:none; place-items:center; gap:12px;
  background:rgba(255,255,255,.85); z-index:120; text-align:center;
}
.cute-loader.show{display:grid}
.cute-loader p{margin:0; color:#6b5a60}
.cute-loader .cup{
  position:relative; width:72px; height:44px;
  border:3px solid #534e52; border-radius:10px 10px 18px 18px; background:#fff;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
}
.cute-loader .cup:after{
  content:""; position:absolute; right:-18px; top:8px; width:26px; height:26px;
  border:3px solid #534e52; border-left-color:transparent; border-radius:0 18px 18px 0;
}
.steam{position:absolute; width:2px; height:18px; left:18px; top:-22px; background:linear-gradient(to top, transparent, #7a6b72); filter:blur(.2px); animation:steam 2s infinite ease-in}
.s2{left:32px; animation-delay:.25s} .s3{left:46px; animation-delay:.5s}
@keyframes steam{0%{opacity:0; transform:translateY(12px)}50%{opacity:1}100%{opacity:0; transform:translateY(-16px)}}
.heart{
  position:absolute; width:14px; height:14px; left:50%; top:-18px; transform:translateX(-50%) rotate(45deg);
  background:linear-gradient(135deg, var(--rose), var(--apricot));
  animation:pop 1s infinite ease-in-out;
}
.heart:before,.heart:after{
  content:""; position:absolute; width:14px; height:14px; background:inherit; border-radius:50%;
}
.heart:before{left:-7px; top:0}
.heart:after{left:0; top:-7px}
@keyframes pop{0%,100%{transform:translateX(-50%) rotate(45deg) scale(1)}50%{transform:translateX(-50%) rotate(45deg) scale(1.15)}}

/* Utility */
.parallax{will-change:transform}


/* Full-page background image for the home page */
body[data-page="home"]{ position: relative; background: none !important; }
body[data-page="home"]::before{
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('../img/background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  /* Ensures smooth scrolling visual */
  will-change: transform;
}

.header{
  position: sticky;        /* bleibt oben stehen */
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.72);     /* leicht transparentes Weiß */
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
          backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid rgba(0,0,0,.06);  /* klare Kante */
  box-shadow: 0 8px 24px rgba(15,16,23,.06); /* dezenter Schatten */
  margin-bottom: 18px;                      /* ❗ Abstand zum Inhalt darunter */
}


/* deine bestehende Regel */
body[data-page="home"]::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:url('../img/background.jpg'); /* oder .jpg, was du nutzt */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:-1;
  opacity:.85;              /* ← Bild leicht ausbleichen (0–1) */
}


/* --- Menü-Subhero mit Bildtitel + Farbstreifen --- */
.subhero--menu{
  position:relative;
  display:grid;
  place-items:center;
  text-align:center;
  padding:64px 0 56px;     /* etwas Luft oben/unten */
}

.subhero--menu .menu-title{
  width:min(620px, 80vw);
  height:auto;
  display:block;
  position:relative;
  z-index:1;
  filter: drop-shadow(0 12px 24px rgba(15,16,23,.12)); /* subtiler Lift */
}

/* farbiger Streifen hinter dem Bild */
.subhero--menu::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  /* Breite und Höhe des Streifens */
  width:min(720px, 88vw);
  height:78px;
  /* Verlauf in deiner Pastellpalette */
  background:linear-gradient(90deg, var(--rose), var(--apricot));
  opacity:.35;                    /* Transparenz justieren (0.2–0.45) */
  border-radius:999px;            /* pillenförmig */
  filter:blur(6px);               /* weiche Kanten */
  z-index:0;
}

/* Mobil etwas schlanker */
@media (max-width:600px){
  .subhero--menu::before{ height:58px }
}


/* Geschichte: Bild soll so hoch sein wie die Textspalte */
body[data-page="story"] .story-grid{
  grid-template-columns: 1fr 1fr;   /* gleiche Breite */
  align-items: stretch;              /* beide Spalten volle Höhe */
}

body[data-page="story"] .story-text{ align-self: auto; }
body[data-page="story"] .story-media{ align-self: stretch; }

body[data-page="story"] .story-media.card{
  height: 100%;
  display: flex;
}

body[data-page="story"] .story-media .media{
  height: 100%;
}

body[data-page="story"] .story-media .content-img{
  height: 100%;          /* überschreibt die 220px */
  object-fit: cover;     /* schön gefüllt, ohne zu verzerren */
  border-radius: 16px;
}


/* --- Geschichte-Subhero mit Bildtitel + Farbstreifen --- */
.subhero--story{
  position:relative;
  display:grid;
  place-items:center;
  text-align:center;
  padding:40px 0 56px;
}

.subhero--story .story-title{
  width:min(350px, 80vw);
  height:auto;
  display:block;
  position:relative;
  z-index:1;
  filter: drop-shadow(0 12px 24px rgba(15,16,23,.12));
}

/* weicher, farbiger Streifen passend zur Story-Seite */
.subhero--story::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:min(450px, 88vw);
  height:78px;
  background:linear-gradient(90deg, var(--sage), var(--lav));
  opacity:.45;             /* 0.25–0.45 nach Geschmack */
  border-radius:500px;
  filter:blur(3px);
  z-index:0;
}

@media (max-width:600px){
  .subhero--story::before{ height:58px }
}