/* himmelblau-blumen.ch – Nachbildung der Wix-Seite. Schriften lokal (Open Sans Condensed, Poppins, beide SIL OFL). */
@font-face{font-family:"Open Sans Condensed";font-weight:300;font-style:normal;src:url(../fonts/opensans-condensed-300.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Open Sans Condensed";font-weight:700;font-style:normal;src:url(../fonts/opensans-condensed-700.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Poppins ExtraLight";font-weight:400;font-style:normal;src:url(../fonts/poppins-extralight.woff2) format("woff2");font-display:swap}

:root{--brown:#7c6c50;--f:"Open Sans Condensed","Arial Narrow",Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#000;-webkit-text-size-adjust:100%}
body{margin:0;background:#000;color:#fff;font-family:var(--f);font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
h1,h2,h3,h4,p{margin:0}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:#000;padding:8px 12px;z-index:200}
.skip:focus{left:8px;top:8px}

/* ---------- absolut positionierte Elemente (Wix-Koordinaten) ---------- */
.a{position:absolute;left:calc(50% + var(--x)*1px);top:calc(var(--y)*1px);width:calc(var(--w)*1px)}

/* ---------- feste Elemente ---------- */
.logo{position:fixed;top:30px;right:65px;width:136px;z-index:60;display:block}
.logo img{width:100%;height:auto}
.menu{position:fixed;left:65px;top:150px;z-index:60;display:flex;flex-direction:column;align-items:flex-start}
.menu a{font-size:27px;line-height:39px;color:#fff;text-decoration:none;font-weight:300;transition:color .2s}
.menu a.on,.menu a:hover,.menu a:focus-visible{color:var(--brown)}
.burger,.mmenu{display:none}

/* ---------- Hero ---------- */
.hero{position:relative;height:calc(var(--h)*1px);background-color:#000;background-position:var(--pos);background-size:cover;background-repeat:no-repeat}
@media(min-width:1000px){.hero{background-attachment:fixed}}
.grp{position:absolute;inset:0;will-change:transform}
#home{z-index:3}
.box{height:calc(var(--h)*1px);background:var(--bg)}
.h4{font-weight:700;font-size:32.2px;line-height:44px;text-align:center}
.h3{font-weight:300;font-size:25.5px;line-height:35px;text-align:center}
.btn{display:flex;align-items:center;justify-content:center;height:calc(var(--bh)*1px);font-size:calc(var(--bfs)*1px);background:var(--brown);color:#faf8f1;text-decoration:none;font-weight:300;transition:filter .2s}
.btn:hover,.btn:focus-visible{filter:brightness(1.18)}
.badge{aspect-ratio:1;border-radius:50%;background:#bf147a;transform:rotate(10deg);box-shadow:3.44px 4.91px 11px 6px rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;text-decoration:none;font-family:"Poppins ExtraLight",var(--f);font-weight:400;font-size:22px;line-height:1.3;transition:transform .25s;z-index:4}
.badge span{display:block;width:153px}
.badge:hover{transform:rotate(10deg) scale(1.05)}

/* ---------- Bänder ---------- */
.band{position:relative;height:calc(var(--h)*1px)}
.band::before{content:"";position:absolute;left:calc(50% + var(--bl)*1px);right:0;top:0;bottom:0;background:var(--c)}
.bt{font-size:30px;line-height:42px;text-align:center;white-space:nowrap}
.bt.right,.bt.left{font-size:32px}
.bt.right{text-align:right}
.bt.left{text-align:left}

/* ---------- Galerien ---------- */
.gal{position:relative;height:calc(var(--h)*1px);background:#000;overflow:hidden}
.gv{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden}
.gt{display:flex;gap:21px;height:100%;padding-left:calc(50% - 498.5px);will-change:transform;width:max-content}
.gi{margin:0;flex:none;width:calc(var(--h)*1px);height:100%}
.gi img{width:100%;height:100%;object-fit:cover}
.ga{position:absolute;top:calc(50% - 19.5px);width:23px;height:39px;padding:0;border:0;background:none;color:#fff;opacity:.9;cursor:pointer;z-index:2;transition:opacity .2s}
.ga:hover{opacity:1}
.ga.prev{left:calc(50% - 522px)}
.ga.next{right:23px}
.ga.next svg{transform:scaleX(-1)}
.team .gt{gap:46px}
.team .gi{width:auto;height:auto}
.team .gi img{width:auto;height:531px;max-width:none}
.team .tm figcaption{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:13px;color:var(--brown);font-size:21px;line-height:26px}
.team .ga{top:246px}

/* ---------- Kontakt ---------- */
.contact{position:relative;height:calc(var(--h)*1px);background:#000}
.form h3{font-weight:300;font-size:30px;line-height:41px;padding-top:10px}
.form .grid{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;margin-top:39px}
.fld{display:flex;flex-direction:column;margin-bottom:20px;min-width:0}
.fld:nth-child(5){grid-column:1/3}
.fld label{font-size:17px;line-height:17px;font-style:italic;color:#e8e6e6;margin-bottom:8px}
.fld input,.fld textarea{width:100%;height:55px;border:0;border-radius:0;background:rgba(177,211,187,.6);color:#fff;font:300 17px/1.3 var(--f);padding:0 12px;outline:0}
.fld textarea{height:65px;padding:8px 12px;resize:vertical}
.fld input:focus,.fld textarea:focus{background:rgba(177,211,187,.78)}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.send{display:block;width:100%;height:56px;margin-top:5px;border:0;background:#323232;color:#fff;font:300 30px var(--f);cursor:pointer;transition:background .2s}
.send:hover,.send:focus-visible{background:#4a4a4a}
.send:disabled{opacity:.6;cursor:wait}
.msg{text-align:center;font-size:24px;line-height:33px;margin-top:24px;min-height:33px}
.msg.err{color:#f3a78f}

/* ---------- Öffnungszeiten ---------- */
.hours{position:relative;height:calc(var(--h)*1px);background:#000;overflow:hidden}
.ht{font-weight:300;font-size:26px;line-height:36px}
.tbl .row{display:flex;justify-content:space-between;align-items:center;height:55px;border-bottom:1px solid rgba(255,255,255,.35)}
.tbl .row:last-child{border-bottom:0}
.tbl h2{font-weight:300;font-size:17.4px;line-height:24px}
.tbl .t{text-align:right}
.himg{height:calc(var(--ih)*1px);object-fit:cover;max-width:none}

/* ---------- Fusszeile ---------- */
.foot{position:relative;height:calc(var(--h)*1px);background:#000}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}
.so{display:block;height:25px;color:#fff}
.so:hover{text-decoration:none;opacity:.75}
.ficon svg{display:block;width:100%;height:auto}
.fbrand{font-size:24px;line-height:29px}
.faddr{font-style:normal;font-size:14px;line-height:21px}
.fl{font-size:14px;line-height:21px}
.flk{font-size:13.1px;line-height:15.72px}
.bank{font-size:15px;line-height:21px}
.bank strong{font-weight:300;font-size:16px}
.qr{height:auto}

/* ---------- Unterseiten ---------- */
.sub .top{display:flex;justify-content:space-between;align-items:flex-start;padding:30px 65px}
.sub .logo{position:static;width:136px}
.sub .back{font-size:22.6px;line-height:31px;text-decoration:none;color:#fff;transition:color .2s}
.sub .back:hover{color:var(--brown)}
.sm{max-width:920px;margin:40px auto 90px;padding:0 24px;min-height:50vh}
.sm h1{font-weight:300;font-size:32px;line-height:1.3;text-transform:uppercase;margin-bottom:28px}
.sm h2{font-weight:700;font-size:21px;margin:30px 0 8px}
.sm p{font-size:18px;line-height:1.5;margin-bottom:12px}
.sm a{text-decoration:underline;text-underline-offset:3px}
.cats{display:flex;gap:30px;font-size:15px;margin-bottom:60px}
.cats .on{color:#5aa0ff}
.empty{text-align:center;margin-top:80px}
.empty .e1{font-size:24px;margin-bottom:10px}
.sf{border-top:1px solid rgba(255,255,255,.25);padding:34px 65px 40px;display:flex;flex-wrap:wrap;gap:20px 60px;justify-content:space-between;font-size:14px;line-height:21px}
.sf a{text-decoration:none}
.sf a:hover{text-decoration:underline}

/* ---------- Mobil / Tablet ---------- */
@media(max-width:999px){
  .a{left:calc(50% + var(--mx)*1px);top:calc(var(--my)*1px);width:calc(var(--mw)*1px)}
  .menu{display:none}
  .logo{top:7px;right:23px;width:157px}
  .burger{display:block;position:fixed;left:29px;top:14px;width:50px;height:50px;border-radius:50%;background:#7fa88b;border:0;z-index:70;cursor:pointer;padding:0}
  .burger i{position:absolute;left:10px;width:30px;height:1.5px;background:#fff}
  .burger i:first-child{top:21px}
  .burger i:last-child{top:27px}
  .mmenu{position:fixed;inset:0;background:#000;z-index:100;display:block;overflow:auto}
  .mmenu[hidden]{display:none}
  .mmenu nav{display:flex;flex-direction:column;align-items:center;padding-top:135px}
  .mmenu a{font:400 24px/43.7px "Open Sans","Segoe UI",Helvetica,Arial,sans-serif;color:var(--brown);text-decoration:none;text-align:center}
  .mclose{position:absolute;right:30px;top:30px;background:none;border:0;color:var(--brown);padding:6px;cursor:pointer}
  .hero{height:calc(var(--mh)*1px)}
  .box{height:calc(var(--mh)*1px)}
  .h4{font-size:15.14px;line-height:21px}
  .h3{font-size:13.49px;line-height:18.5px}
  .btn{height:32px;font-size:11px}
  .badge{font-family:var(--f);font-weight:700;font-size:20px;line-height:1.1}
  .badge span{width:96px}
  .band{height:calc(var(--mh)*1px)}
  .band::before{left:0;background:var(--mc)}
  .bt,.bt.right,.bt.left{font-size:14px;line-height:19.5px;white-space:normal}
  .gal{height:calc(var(--mh)*1px)}
  .gt{gap:10px;padding-left:0}
  .gi{width:calc(var(--mh)*1px)}
  .ga{display:none}
  .team .gt{gap:20px}
  .team .gi{width:auto}
  .team .gi img{height:340px}
  .team .tm figcaption{font-size:16px;line-height:20px;margin-top:8px}
  .contact{height:calc(var(--mh)*1px)}
  .form .grid{column-gap:20px}
  .hours{height:calc(var(--mh)*1px)}
  .tbl h2{font-size:16.09px}
  .himg{width:calc(var(--mw)*1px);height:calc(var(--mih)*1px)}
  .foot{height:calc(var(--mh)*1px)}
  .ficon svg{display:block;width:100%;height:auto}
.fbrand{font-size:21.65px;line-height:26px}
  .faddr,.fl{font-size:21.65px;line-height:31px}
  .flk{font-size:17.49px;line-height:24px}
  .bank{font-size:17.5px;line-height:26px}
  .bank strong{font-size:18px}
  .so{width:25px}
  .sub .top{padding:14px 20px}
  .sub .logo{width:140px}
  .sub .back{font-size:17px;margin-top:6px}
  .sf{padding:30px 24px 36px}
}
@media(max-width:999px) and (min-width:560px){
  /* Tablet: Inhalt bleibt als Mobil-Spalte mittig, Hintergründe laufen über die volle Breite */
  .burger{left:40px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.badge,.btn{transition:none}}