/* ---------- Schriften (lokal eingebunden, keine externen Anfragen) ---------- */
@font-face{
  font-family:"Rotis Semi Sans";
  src:url("fonts/rotis-semi-sans.woff2") format("woff2"),
      url("fonts/rotis-semi-sans.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Roboto";
  src:url("fonts/roboto-v30-latin-300.woff2") format("woff2"),
      url("fonts/roboto-v30-latin-300.woff") format("woff");
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Roboto";
  src:url("fonts/roboto-v30-latin-regular.woff2") format("woff2"),
      url("fonts/roboto-v30-latin-regular.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Roboto";
  src:url("fonts/roboto-v30-latin-500.woff2") format("woff2"),
      url("fonts/roboto-v30-latin-500.woff") format("woff");
  font-weight:500;font-style:normal;font-display:swap;
}

/* ---------- Farben & Grundlagen ---------- */
:root{
  --gold:#AC8753; --gold-dark:#876724;
  --red:#8B2200;
  --text:#555554; --muted:#8f8a83;
  --cream:#F6F1E8; --paper:#FFFDF9; --line:#E8E0D2;
  --head:"Rotis Semi Sans","Gill Sans","Gill Sans MT","Optima","Segoe UI",sans-serif;
  --body:"Roboto","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--body);font-weight:300;color:var(--text);background:#fff;line-height:1.65;font-size:18px;-webkit-font-smoothing:antialiased}
a{color:inherit}

.sun{width:64px;height:auto;display:block;margin:0 auto 14px}
.kicker{font-family:var(--head);letter-spacing:.18em;text-transform:uppercase;font-size:12px;color:var(--muted);margin:0 0 8px}
h1{font-family:var(--head);font-weight:400;color:var(--gold-dark);line-height:1.12;margin:0 0 16px}

/* ---------- Startseite: Bild-Split ---------- */
.split{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:100vh}

.side{position:relative;display:flex;align-items:flex-end;padding:48px;color:#fff;text-decoration:none;overflow:hidden;min-height:340px}
.side .img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02);transition:transform .8s ease}
.side::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,var(--shade) 100%);opacity:.92;transition:opacity .4s}
.side:hover .img{transform:scale(1.06)}
.side:hover::before{opacity:1}
.kur{--shade:rgba(120,90,45,.96);--c:var(--gold-dark)}
.aka{--shade:rgba(110,27,0,.96);--c:var(--red);justify-content:flex-end;text-align:right}
.kur .img{background-image:url("img/kurlounge.webp")}
.aka .img{background-image:url("img/akademie-garten.jpg")}

.label{position:relative;z-index:2;display:flex;align-items:center;gap:18px;max-width:440px}
.aka .label{flex-direction:row-reverse}
.label small{display:block;font-size:13px;letter-spacing:.18em;text-transform:uppercase;opacity:.85;margin-bottom:4px}
.label strong{display:block;font-family:var(--head);font-weight:400;font-size:clamp(24px,2.5vw,32px);line-height:1.15;margin-bottom:4px}
.label span.desc{display:block;font-size:16px;opacity:.92}
.arrow{flex:none;width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.8);display:grid;place-items:center;font-size:22px;transition:background .25s,color .25s}
.side:hover .arrow{background:#fff;color:var(--c)}

.msg{position:absolute;z-index:3;left:50%;top:44%;transform:translate(-50%,-50%);width:min(540px,calc(100% - 32px));background:var(--paper);padding:40px 44px 34px;text-align:center;box-shadow:0 24px 60px -20px rgba(0,0,0,.45)}
.msg::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--gold) 0 50%,var(--red) 50% 100%)}
.msg h1{font-size:clamp(30px,3.4vw,40px)}
.msg p{margin:0 0 12px;font-size:17px}
.msg .ps{font-size:14px;color:var(--muted);margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.msg .sign{font-family:var(--head);font-size:20px;color:var(--text);margin:16px 0 0}

.site-footer{position:absolute;z-index:3;left:0;right:0;bottom:0;text-align:center;padding:12px;font-size:13px;color:rgba(255,255,255,.85)}
.site-footer a{text-decoration:none;margin:0 10px}
.site-footer a:hover{color:#fff;text-decoration:underline}

@media (max-width:860px){
  .split{display:flex;flex-direction:column;min-height:0}
  .msg{position:relative;left:auto;top:auto;transform:none;width:auto;box-shadow:none;padding:44px 22px 32px;order:-1}
  .kicker{font-size:11px;letter-spacing:.12em}
  .side{min-height:300px;padding:28px 22px}
  .side::before{background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,var(--shade) 62%);opacity:1}
  .aka{justify-content:flex-start;text-align:left}
  .aka .label{flex-direction:row}
  .label{justify-content:space-between;width:100%;max-width:none}
  .site-footer{position:static;background:#3a2a1a;padding:16px}
}
@media (max-height:760px) and (min-width:861px){
  .msg{top:42%;padding:30px 36px 26px}
  .msg p{font-size:16px}
}

/* ---------- Unterseite (Impressum) ---------- */
.page{background:var(--cream);min-height:100vh;display:flex;flex-direction:column}
.page .bar{height:5px;background:linear-gradient(90deg,var(--gold) 0 50%,var(--red) 50% 100%)}
.page main{flex:1;padding:56px 16px 40px}
.page article{max-width:680px;margin:0 auto;background:var(--paper);padding:48px 52px;box-shadow:0 1px 0 var(--line),0 18px 40px -24px rgba(110,80,40,.25)}
.page article h1{font-size:clamp(30px,4.6vw,42px);margin-bottom:24px}
.page article h2{font-family:var(--head);font-weight:400;color:var(--gold-dark);font-size:22px;margin:30px 0 8px}
.page article p{margin:0 0 14px}
.page article strong{font-weight:500;color:#4a4a49}
.page .back{display:inline-block;margin-bottom:22px;text-decoration:none;color:var(--muted);font-size:15px}
.page .back:hover{color:var(--gold-dark)}
.page article a{color:var(--red)}
.page footer{text-align:center;padding:10px 16px 32px;font-size:14px;color:var(--muted)}
.page footer a{text-decoration:none;margin:0 10px}
.page footer a:hover{color:var(--text)}
@media (max-width:640px){
  body{font-size:17px}
  .page main{padding:28px 12px 28px}
  .page article{padding:34px 22px}
}