/* ── TOKENS ── */
:root {
  --rosa: #f6e6d7;
  --blau: #0000ff;
  --r:    0px 20px 0px 20px;
  --rh:   12px 20px 12px 20px;
  --hh:   68px;
  --max:  1520px;
  --font-headline: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:     'Helvetica Neue', Helvetica, Arial, sans-serif;
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background: var(--rosa);
  color: var(--blau);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img  { max-width:100%; display:block; }
img.doodle { max-width: none; }
a    { color:var(--blau); text-decoration:none; }

h1 {
  font-family: var(--font-headline);
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.0;
  letter-spacing: 0.01em;
}
h2 {
  font-family: var(--font-headline);
  font-size: clamp(1.9rem, 4vw, 3.5rem);
  font-weight: 600;
  line-height: 1.05;
}
h3 {
  font-family: var(--font-headline);
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
}
h4 {
  font-family: var(--font-headline);
  font-size: clamp(.95rem, 1.5vw, 1.2rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
}
p { margin-bottom: .9em; }

.eyebrow {
  font-family: var(--font-headline);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-block;
  border-bottom: 2px solid var(--blau);
  padding-bottom: 2px;
  margin-bottom: .9rem;
}
.caption {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.75rem;
  opacity: .6;
  margin-top: .35rem;
  text-align: right;
}

/* ── BUTTONS ── */
.btn   {
  display:inline-block; background:var(--blau); color:var(--rosa);
  font-family: var(--font-headline);
  font-size:.95rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.6em 1.6em;
  border-radius: 0 1.32em 0 1.32em;
  border:2px solid var(--blau); cursor:pointer; transition:all .2s;
}
.btn:hover { background:transparent; color:var(--blau); }
.btn-o {
  display:inline-block; background:transparent; color:var(--blau);
  font-family: var(--font-headline);
  font-size:.88rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.5em 1.2em;
  border-radius: 0 1.32em 0 1.32em;
  border:2px solid var(--blau); cursor:pointer; transition:all .2s;
}
.btn-o:hover { background:var(--blau); color:var(--rosa); }
.btn-r {
  display:inline-block; background:var(--rosa); color:var(--blau);
  font-family: var(--font-headline);
  font-size:.9rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.6em 1.5em;
  border-radius: 0 1.32em 0 1.32em;
  border:2px solid var(--rosa); cursor:pointer; transition:all .2s;
}
.btn-r:hover { background:transparent; color:var(--rosa); }

/* ── LAYOUT ── */
.wrap   { width:100%; max-width:var(--max); margin:0 auto; padding:0 2rem; }
.sec    { padding:5rem 0; }
.sec-sm { padding:3rem 0; }
.rule   { border:none; border-top:2px solid rgba(0,0,255,.25); }

/* ── HEADER ── */
#hdr { position:fixed; top:0; left:0; right:0; height:var(--hh); background:var(--rosa); border-bottom:1px solid rgba(0,0,255,.1); z-index:1000; display:flex; align-items:center; }
.logo-img  { height:44px; width:auto; }
.logo-text { font-family:'Barlow Condensed',sans-serif; font-size:2rem; font-weight:800; color:var(--blau); text-transform:lowercase; }
.nav-ul    { display:flex; gap:2rem; list-style:none; }
.nav-ul a  { font-family:'Barlow Condensed',sans-serif; font-size:.88rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blau); transition:opacity .2s; }
.nav-ul a:hover, .nav-ul a.active { opacity:.5; }
.burger    { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.burger span { display:block; width:24px; height:2px; background:var(--blau); }
.mob-nav   { display:none; position:fixed; top:var(--hh); left:0; right:0; bottom:0; background:var(--rosa); z-index:999; padding:3rem 2rem; flex-direction:column; gap:1.5rem; }
.mob-nav.open { display:flex; }
.mob-nav .nav-ul { flex-direction:column; gap:1rem; }
.mob-nav .nav-ul a { font-size:2.2rem; }
main { padding-top:var(--hh); }

/* ── GRIDS ── */
.vg    { display:grid; grid-template-columns:40fr 60fr; gap:5rem; align-items:start; }
.vg-50 { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }

/* ── VISION LIST ── */
.vlist { list-style:none; }
.vi    { padding:1.5rem 0; display:grid; grid-template-columns:140px 1fr; gap:1.5rem; align-items:start; }
.vi:not(:last-child) { border-bottom:2px solid rgba(0,0,255,.25); }
.vi-icon { display:flex; align-items:flex-start; justify-content:flex-start; flex-shrink:0; }
.vi-icon img { object-fit:contain; display:block; }
.vi-content h4 { margin-bottom:.35rem; }
.vi-content p  { font-size:.9rem; margin-bottom:.55rem; }

/* ── HERO ── */
.hero-img-wrap { width:100%; height:460px; border-radius:var(--rh); overflow:hidden; background:rgba(0,0,255,.05); display:flex; align-items:center; justify-content:center; margin-top:2rem; }

/* ── EVENT BANNER ── */
.ebanner { display:grid; grid-template-columns:60fr 40fr; border-radius:var(--rh); overflow:hidden; min-height:300px; }
.ebanner.blue { background:var(--blau); }
.eb-c  { padding:3.5rem; display:flex; flex-direction:column; justify-content:center; }
.blue .eb-c h1, .blue .eb-c h3, .blue .eb-c p { color:var(--rosa); }
.eb-img { background:rgba(0,0,255,.07); display:flex; align-items:center; justify-content:center; overflow:hidden; padding:2rem; }

/* ── EVENTS SECTION ── */
.ev-section { display:grid; grid-template-columns:260px 1fr; gap:4rem; align-items:start; }
.ev-left     { position:sticky; top:calc(var(--hh) + 2rem); }
.ev-left h3  { margin:.4rem 0 .8rem; }
.ev-grid     { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.ev-card     { cursor:pointer; }
.ec-img      { aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; background:var(--blau); display:flex; align-items:center; justify-content:center; transition:opacity .2s; position:relative; }
.ec-img:hover { opacity:.82; }
.ec-img img { opacity:.35; transition:opacity .25s; }
.ec-img:hover img { opacity:1; }
.ec-title    { font-family:'Barlow Condensed',sans-serif; font-size:1rem; font-weight:700; text-transform:uppercase; margin-top:.5rem; }
.ec-date     { font-size:.78rem; opacity:.6; }

/* ── KALENDER ── */
.kal   { border-bottom:1px solid rgba(0,0,255,.12); cursor:pointer; }
.kal-h { display:grid; grid-template-columns:130px 1fr 30px; align-items:center; padding:1rem 0; gap:1rem; }
.kal-d { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.83rem; text-transform:uppercase; }
.kal-t { font-family:'Barlow Condensed',sans-serif; font-size:1.1rem; font-weight:700; text-transform:uppercase; }
.kal-a { font-size:2.2rem; line-height:1; transition:transform .3s; text-align:right; }
.kal.open .kal-a { transform:rotate(180deg); }
.kal-b { display:none; padding-bottom:1.5rem; }
.kal.open .kal-b { display:block; padding-bottom:1.5rem; }

/* ── ROOMS ── */
.rooms { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; }
.room-card { cursor:pointer; transition:transform .2s; text-decoration:none; }
.room-card:hover { transform:translateY(-4px); }
.room-img img { opacity:.35; transition:opacity .25s; }
.room-card:hover .room-img img { opacity:1; }
.room-img  { aspect-ratio:4/3; border-radius:var(--r); background:rgba(0,0,255,.06); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.room-name  { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1rem; text-transform:uppercase; margin-top:.6rem; }
.room-size  { font-size:.83rem; opacity:.65; }
.room-price { font-family:'Barlow Condensed',sans-serif; font-weight:700; margin-top:.25rem; }

/* ── PRICE TABLE ── */
.price-t { width:100%; border-collapse:collapse; }
.price-t th { font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase; font-size:.82rem; letter-spacing:.1em; border-bottom:2px solid rgba(0,0,255,.2); padding:.8em 1em .8em 0; text-align:left; color:var(--blau); }
.price-t td { padding:.65em 1em .65em 0; font-size:.9rem; border-bottom:1px solid rgba(0,0,255,.1); }
.price-t .p { font-weight:700; }
.tabs-c .tabs-nav { display:flex; border-bottom:2px solid rgba(0,0,255,.2); margin-bottom:1.5rem; }
.tab-btn { font-family:'Barlow Condensed',sans-serif; font-size:.9rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:.6em 1.4em; background:none; border:none; color:rgba(0,0,255,.3); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; transition:color .2s; }
.tab-btn.on { color:var(--blau); border-bottom-color:var(--blau); }
.tab-p { display:none; }
.tab-p.on { display:block; }

/* ── BLUE SECTIONS ── */
.blue-sec { background:var(--blau); color:var(--rosa); }
.blue-sec h1,.blue-sec h2,.blue-sec h3,.blue-sec h4,.blue-sec .eyebrow { color:var(--rosa); }
.blue-sec .eyebrow { border-color:rgba(246,230,215,.5); }
.cow-p { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin:1.5rem 0; }
.cow-p-item { border-top:2px solid var(--blau); padding-top:.8rem; }
.dm { background:var(--blau); padding:3.5rem; border-radius:var(--rh); display:grid; grid-template-columns:1fr 1fr 1fr; gap:3rem; color:var(--rosa); }
.dm h1,.dm h4,.dm p { color:var(--rosa); }
.dm-col { border-left:2px solid rgba(246,230,215,.35); padding-left:2.5rem; }
.dm-col:first-child { border:none; padding-left:0; }
.dm-row { display:flex; justify-content:space-between; padding:.4em 0; border-bottom:1px solid rgba(246,230,215,.1); font-size:.88rem; }
.dm-row .d { font-weight:700; font-family:'Barlow Condensed',sans-serif; }
.op-g { display:grid; grid-template-columns:repeat(3,1fr); gap:3rem; }
.op-row { display:flex; justify-content:space-between; padding:.35em 0; border-bottom:1px solid rgba(246,230,215,.12); font-size:.88rem; }
.op-day { font-weight:700; font-family:'Barlow Condensed',sans-serif; }
.mem-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.mem-card { border:1px solid rgba(246,230,215,.2); border-radius:var(--rh); padding:2.5rem; position:relative; }
.mem-card.featured { border:2px solid var(--rosa); }

/* ── MODAL ── */
.mo { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:2000; align-items:center; justify-content:center; padding:2rem; }
.mo.open { display:flex; }
.modal { background:var(--rosa); border-radius:var(--rh); max-width:700px; width:100%; padding:3rem; position:relative; max-height:90vh; overflow-y:auto; }
.mo-close { position:absolute; top:1rem; right:1rem; background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--blau); }
.mo-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:1.5rem; }
.stoerer { position:absolute; top:-1rem; left:-1rem; background:var(--blau); color:var(--rosa); padding:.7em 1.1em; border-radius:var(--r); font-family:'Barlow Condensed',sans-serif; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; z-index:10; max-width:150px; line-height:1.3; }

/* ── MAPS / FOOTER ── */
.maps-b { width:100%; padding:2rem; background:rgba(0,0,255,.05); border-top:1px solid rgba(0,0,255,.1); border-bottom:1px solid rgba(0,0,255,.1); display:flex; align-items:center; justify-content:center; }
.maps-b a { font-family:'Barlow Condensed',sans-serif; font-size:1.1rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; display:flex; align-items:center; gap:.6rem; }
#ftr { background:var(--blau); color:var(--rosa); padding:5rem 0 2rem; }
#ftr .wrap { display:grid; grid-template-columns:1fr 1fr 1fr; gap:4rem; }
#ftr h4 { color:var(--rosa); margin-bottom:1rem; }
#ftr p, #ftr a { color:var(--rosa); font-size:.88rem; }
#ftr a:hover { opacity:.65; }
.ftr-logo-img { height:50px; width:auto; margin-bottom:1rem; }
.ftr-logo-txt { font-family:'Barlow Condensed',sans-serif; font-size:2.5rem; font-weight:800; color:var(--rosa); display:block; margin-bottom:.8rem; }
.cf input,.cf textarea { width:100%; background:transparent; border:none; border-bottom:1px solid rgba(246,230,215,.28); color:var(--rosa); font-family:inherit; font-size:.88rem; padding:.6em 0; margin-bottom:.7em; outline:none; }
.cf input::placeholder,.cf textarea::placeholder { color:rgba(246,230,215,.38); }
.cf textarea { resize:vertical; min-height:68px; }
.ftr-nav { display:flex; flex-direction:column; gap:.45rem; margin-top:1rem; }
.ftr-bottom { border-top:1px solid rgba(246,230,215,.13); margin-top:3rem; padding-top:1.5rem; display:flex; justify-content:space-between; font-size:.75rem; color:rgba(246,230,215,.4); }
.ftr-bottom a { color:rgba(246,230,215,.4); font-size:.75rem; }
.chatbot { position:fixed; bottom:2rem; right:2rem; width:52px; height:52px; background:var(--blau); border-radius:50%; border:none; cursor:pointer; font-size:1.3rem; z-index:900; box-shadow:0 4px 20px rgba(0,0,255,.3); transition:transform .2s; display:flex; align-items:center; justify-content:center; }
.chatbot:hover { transform:scale(1.1); }
.img-ph { width:100%; background:rgba(0,0,255,.05); border-radius:var(--r); display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed',sans-serif; color:rgba(0,0,255,.2); font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; }
.doodle { pointer-events:none; user-select:none; display:block; }

/* ── DOODLE CONTAINERS ── */
#hero-doodle, #vg-doodle, #ev-left-doodle, #hub-doodle, #ort-doodle,
#ang-vision-doodle, #ang-vorteile-doodle, #wir-doodle-l, #wir-doodle-r,
#banner-doodle-wrap, #spielplatz-doodle {
  overflow: visible !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
}
#hero-doodle img, #vg-doodle img, #ev-left-doodle img, #hub-doodle img, #ort-doodle img,
#ang-vision-doodle img, #ang-vorteile-doodle img, #wir-doodle-l img, #wir-doodle-r img {
  height: auto !important;
  max-width: none !important;
}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  #hdr .wrap { display:flex !important; justify-content:space-between; align-items:center; }
  #hdr .wrap > div:first-child { display:none; }
  #hdr nav { display:none !important; }
  #hdr .burger { display:flex !important; }
  .burger { display:flex; }
  h1 { font-size:clamp(2.2rem,9vw,3rem); }
  .vg,.vg-50 { grid-template-columns:1fr !important; gap:2rem !important; }
  .ebanner { grid-template-columns:1fr; }
  .eb-img { display:none; }
  .ev-section { grid-template-columns:1fr; }
  .ev-left { position:static; }
  .ev-grid { grid-template-columns:1fr !important; }
  .rooms { grid-template-columns:1fr; }
  .dm { grid-template-columns:1fr; }
  .dm-col { border:none; padding:0; border-top:2px solid rgba(246,230,215,.35); padding-top:1.5rem; }
  .dm-col:first-child { border:none; padding-top:0; }
  .cow-p { grid-template-columns:1fr; }
  .op-g { grid-template-columns:1fr; gap:2rem; }
  .mo-grid { grid-template-columns:1fr; }
  .mem-grid { grid-template-columns:1fr; }
  #ftr .wrap { grid-template-columns:1fr; gap:2.5rem; }
  .ftr-bottom { flex-direction:column; gap:.4rem; }

  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns:3fr 2fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  [style*="grid-column:2/4"],
  [style*="grid-column: 2/4"] { grid-column: auto !important; }

  [style*="grid-template-columns:2fr 1fr"] > div:last-child { order: -1; }

  [style*="height:520px"] { height: 240px !important; }
  [style*="height:460px"] { height: 210px !important; }
  [style*="height:350px"] { height: 200px !important; }
  [style*="height:320px"] { height: 200px !important; }

  .tabs-c { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .price-t { min-width: 380px; }

  .ebanner.blue .eb-c { padding: 2rem; }
  .eb-c h1 { font-size: clamp(1.8rem,7vw,2.8rem); }
}