:root{--brown:#3B291C; --cream:#F6F0E5; --navy:#091821; --gold:#FAB623; --white:#FFFFFF; --silver:#C3C6C5; color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:var(--cream); color:var(--brown); font:400 18px/1.6 "DM Serif Text", Georgia, serif; -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px}
.in{max-width:1240px; margin-inline:auto; padding-inline:max(20px, env(safe-area-inset-left,0px))}
.msg{padding-block:clamp(40px,6vw,80px) clamp(48px,6vw,80px); text-align:center}
.msg h1{margin:0; font:400 clamp(40px,5.4vw,76px)/1.05 "DM Serif Display", Georgia, serif; letter-spacing:-.01em; max-width:18ch; margin-inline:auto}
.msg p{margin:22px auto 0; max-width:46ch; font-size:21px}
.split{display:grid; grid-template-columns:1fr 1fr}
.half{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:clamp(48px,7vw,96px) 24px; text-align:center; min-height:52vh}
.lz{background:var(--brown); color:var(--cream)}
.fc{background:var(--navy); color:var(--white)}
.lz img{width:min(340px,80%)}
.fc img{width:min(340px,80%)}
.lz .what{font:400 26px/1.2 "DM Serif Display", Georgia, serif}
.fc .what{font:700 18px/1.2 "Lato", sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--silver)}
.btn{display:inline-flex; align-items:center; min-height:50px; padding:0 26px; text-decoration:none; border:3px solid currentColor; transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.lz .btn{border-radius:999px; font:400 18px/1 "DM Serif Display", Georgia, serif}
.fc .btn{font:700 15px/1 "Lato", sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--gold)}
.maiolica{height:72px; background:url(img/majolica-band.jpg) center/auto 100% repeat-x}
footer{padding-block:28px 36px; text-align:center; font-size:17px}
footer nav{display:flex; justify-content:center; flex-wrap:wrap; gap:8px 26px; margin-top:8px}
@media (max-width:760px){ .split{grid-template-columns:1fr} .half{min-height:0} .msg p{font-size:19px} }
.legal{max-width:760px; margin-inline:auto; padding:48px 20px 72px}
.legal h1{font:400 44px/1.1 "DM Serif Display", Georgia, serif; margin:0 0 8px}
.legal h2{font:400 30px/1.15 "DM Serif Display", Georgia, serif; margin:48px 0 8px}
.legal p{margin:14px 0 0}

/* Baustellen-Animation */
.scene{max-width:1000px; margin:clamp(16px,3vw,40px) auto 0; padding-inline:12px}
.scene svg{display:block; width:100%; height:auto; overflow:visible}
.swing,.cable,.load{transform-box:view-box}
.swing{transform-origin:500px 113px}
.cable{transform-origin:500px 122px}
.tape{height:34px; background:repeating-linear-gradient(-45deg,var(--gold) 0 26px,var(--navy) 26px 52px); background-size:73.5px 34px}
.ig{display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin-top:32px}
.b-lz{border-radius:999px; font:400 18px/1 "DM Serif Display", Georgia, serif; background:var(--brown); border-color:var(--brown); color:var(--cream)}
.b-fc{font:700 15px/1 "Lato", sans-serif; letter-spacing:.08em; text-transform:uppercase; background:var(--navy); border-color:var(--navy); color:var(--gold)}
@media (prefers-reduced-motion:no-preference){
  .load{animation:lower 2.2s cubic-bezier(.45,0,.2,1) .3s both}
  .cable{animation:cable 2.2s cubic-bezier(.45,0,.2,1) .3s both}
  .swing{animation:swing 2.6s ease-out 2.3s both}
  .blink{animation:blink 1.4s steps(1) infinite}
  .tape{animation:tape 1.6s linear infinite}
  .rise{animation:rise .8s cubic-bezier(.2,.7,.1,1) both}
  h1.rise{animation-delay:2.4s} p.rise{animation-delay:2.6s} .ig.rise{animation-delay:2.8s}
  @keyframes lower{from{transform:translateY(-170px)}to{transform:none}}
  @keyframes cable{from{transform:scaleY(.045)}to{transform:none}}
  @keyframes swing{0%{transform:rotate(0)}15%{transform:rotate(1.6deg)}38%{transform:rotate(-1.1deg)}60%{transform:rotate(.6deg)}80%{transform:rotate(-.25deg)}100%{transform:rotate(0)}}
  @keyframes blink{50%{opacity:.2}}
  @keyframes tape{to{background-position:73.5px 0}}
  @keyframes rise{from{opacity:0; transform:translateY(20px)}to{opacity:1; transform:none}}
}