:root{--bg:#f2efe9;--paper:#fbfaf7;--ink:#171816;--muted:#6e716b;--accent:#9c5a37;--dark:#171a18;--line:#d8d4cc;--radius:24px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;max-width:1280px;margin:auto;padding:0 34px}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}.brand-mark{display:grid;place-items:center;width:43px;height:43px;border:1px solid var(--ink);border-radius:50%;font-weight:800;letter-spacing:-1px}.brand b,.brand small{display:block}.brand b{font-size:15px}.brand small{font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:2px}.contact-link{font-size:13px;color:var(--ink);text-decoration:none;border-bottom:1px solid}.section{max-width:1280px;margin:auto;padding:105px 34px}.hero{min-height:720px;display:grid;grid-template-columns:1.25fr .75fr;gap:75px;align-items:center;padding-top:70px}.eyebrow{font-size:12px;letter-spacing:.18em;font-weight:750;color:var(--accent)}h1,h2,h3,p{margin-top:0}h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(64px,7.8vw,118px);line-height:.86;letter-spacing:-.055em;margin:24px 0 38px}h1 em{font-weight:400;color:var(--accent)}.lead{font-size:19px;line-height:1.65;max-width:660px;color:#4e514c}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px}.btn{display:inline-flex;padding:15px 21px;border-radius:999px;text-decoration:none;font-size:14px;font-weight:700;border:1px solid var(--ink);transition:.2s}.btn.primary{background:var(--ink);color:white}.btn.ghost{color:var(--ink)}.btn:hover{transform:translateY(-2px)}.portrait-card{justify-self:end;width:min(100%,420px);transform:rotate(1.5deg)}.portrait-placeholder{aspect-ratio:4/5;border-radius:4px;background:linear-gradient(145deg,#ccc4b8,#ece8df);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;box-shadow:0 25px 65px #0000001c}.portrait-monogram{font-family:Georgia,serif;font-size:72px;border:1px solid #7d776f;border-radius:50%;width:145px;height:145px;display:grid;place-items:center}.portrait-placeholder span{font-size:12px;letter-spacing:.12em;text-transform:uppercase}.portrait-caption{display:flex;justify-content:space-between;gap:20px;padding:15px 5px;font-size:12px}.portrait-caption span{color:var(--muted)}.dark-section{max-width:none;background:var(--dark);color:#f6f3ed}.dark-section>*{max-width:1212px;margin-left:auto;margin-right:auto}.arrival{display:grid;grid-template-columns:70px .8fr 1.4fr;gap:50px;align-items:start}.section-no{font-family:Georgia,serif;color:var(--accent);font-size:13px}.arrival h2,.about h2,.projects h2,.contact h2{font-family:Georgia,serif;font-size:clamp(42px,5vw,72px);font-weight:400;line-height:1;letter-spacing:-.04em}.arrival-copy p,.about-head p,.projects-head p{color:#aeb1aa;line-height:1.7;max-width:570px}.music-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.sound-card{min-height:165px;padding:23px;border:1px solid #ffffff24;border-radius:18px;text-align:left;background:#ffffff08;color:#f7f4ee;cursor:pointer;transition:.2s}.sound-card:hover,.sound-card.active{background:#ffffff12;transform:translateY(-3px);border-color:#ffffff55}.sound-card .note{display:block;font-size:29px;color:#d18d68;margin-bottom:24px}.sound-card b,.sound-card small{display:block}.sound-card b{font-size:15px}.sound-card small{color:#aeb1aa;margin-top:7px}.stop-sound{grid-column:3;border:0;background:none;color:#aaa;font-size:12px;text-decoration:underline;cursor:pointer}.about{display:grid;grid-template-columns:70px 1fr}.about-head{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}.about-head p,.projects-head p{color:var(--muted)}.principles{grid-column:2;display:grid;grid-template-columns:repeat(3,1fr);margin-top:75px;border-top:1px solid var(--line)}.principles article{padding:28px 30px 0 0;border-right:1px solid var(--line);min-height:190px}.principles article+article{padding-left:30px}.principles article:last-child{border-right:0}.principles span{font-family:Georgia,serif;color:var(--accent);font-size:12px}.principles h3{font-size:18px;margin:45px 0 12px}.principles p{color:var(--muted);line-height:1.6;font-size:14px}.projects{padding-top:70px}.projects-head{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end;margin:18px 0 55px 70px}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.project-card{background:var(--paper);border-radius:var(--radius);overflow:hidden;border:1px solid #e4e0d8}.project-card.featured{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr}.project-art{min-height:330px;position:relative;overflow:hidden}.featured .project-art{min-height:430px}.project-body{padding:31px 33px 36px}.project-body small{font-size:10px;letter-spacing:.16em;color:var(--accent);font-weight:800}.project-body h3{font-family:Georgia,serif;font-size:31px;font-weight:400;margin:15px 0}.project-body p{color:var(--muted);line-height:1.65;max-width:560px}.project-body a{color:var(--ink);font-size:13px;font-weight:700}.art-me{background:linear-gradient(135deg,#1d201d,#3b4139);display:grid;place-items:center}.mini-window{width:70%;height:66%;background:#f3f0e8;border-radius:18px;padding:30px;display:flex;align-items:center;gap:32px;transform:rotate(-3deg);box-shadow:0 30px 50px #0005}.mini-logo{display:grid;place-items:center;border:1px solid;width:95px;height:95px;border-radius:50%;font-family:Georgia,serif;font-size:42px}.mini-lines{flex:1}.mini-lines i{display:block;height:10px;background:#bbb6aa;margin:15px 0;border-radius:20px}.mini-lines i:nth-child(2){width:75%}.mini-lines i:nth-child(3){width:48%}.art-map{background:#dad5c8}.map-road{position:absolute;background:#f2eee4;width:140%;height:36px;transform:rotate(-18deg);left:-20%;top:34%}.map-road.r2{transform:rotate(28deg);top:61%}.map-line{position:absolute;height:7px;width:75%;background:#9c5a37;left:10%;top:49%;transform:rotate(-11deg);border-radius:9px}.map-pin{position:absolute;width:23px;height:23px;background:#171816;border-radius:50% 50% 50% 0;transform:rotate(-45deg)}.map-pin:after{content:"";position:absolute;width:7px;height:7px;background:white;border-radius:50%;top:8px;left:8px}.p1{left:16%;top:46%}.p2{right:13%;top:33%}.map-label{position:absolute;right:8%;bottom:8%;font-family:Georgia,serif;font-size:48px;line-height:.8;text-align:right;color:#6f6c63}.art-trampoline{background:linear-gradient(#e7e3da,#c7c1b4);display:flex;gap:15px;align-items:center;justify-content:center}.tramp{width:120px;height:120px;border-radius:50%;background:#1b1c1a;border:13px solid #585c55;box-shadow:inset 0 0 0 4px #aaa59b}.t2{transform:translateY(-25px)}.t3{transform:translateY(17px)}.ticket{position:absolute;right:25px;bottom:24px;background:#9c5a37;color:white;padding:15px 18px;transform:rotate(-7deg);font-family:Georgia,serif;font-size:32px}.ticket span{font-family:inherit;font-size:10px;display:block;letter-spacing:.15em}.art-web{background:#2a2e2a;display:grid;place-items:center}.browser{width:79%;height:70%;background:#f5f2ea;border-radius:15px;overflow:hidden;transform:rotate(2deg);box-shadow:0 25px 45px #0005}.browser-bar{height:35px;background:#dedad0;display:flex;align-items:center;gap:6px;padding:0 12px}.browser-bar i{width:7px;height:7px;border-radius:50%;background:#7e7b73}.browser-page{padding:35px}.browser-page span{display:block;width:46%;height:42px;background:#9c5a37;margin-bottom:30px}.browser-page b{display:block;width:100%;height:9px;background:#c9c4ba;margin:13px 0}.browser-page b:nth-child(3){width:78%}.browser-page b:nth-child(4){width:58%}.contact{display:grid;grid-template-columns:70px 1.2fr .8fr;gap:50px;align-items:end}.contact h2{font-size:clamp(54px,6vw,88px);margin-bottom:0}.contact-box{background:#ffffff0a;border:1px solid #ffffff20;padding:32px;border-radius:20px}.contact-box p{color:#b9bbb5;line-height:1.7;margin-bottom:28px}.btn.light{background:#f6f3ed;color:#171816;border-color:#f6f3ed}.contact-box small{display:block;color:#777d76;margin-top:15px}footer{max-width:1280px;margin:auto;padding:28px 34px 45px;display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}footer a{color:inherit}@media(max-width:850px){.topbar{padding:0 20px}.contact-link{display:none}.section{padding:75px 20px}.hero{grid-template-columns:1fr;gap:35px;min-height:auto}.portrait-card{justify-self:start;width:75%;margin-left:15%}.arrival,.contact{grid-template-columns:40px 1fr}.arrival-copy,.music-grid,.contact>div{grid-column:2}.music-grid{grid-template-columns:1fr;margin-top:20px}.about{grid-template-columns:40px 1fr}.about-head{grid-template-columns:1fr;gap:10px}.principles{grid-template-columns:1fr}.principles article{border-right:0;border-bottom:1px solid var(--line);padding-left:0!important}.projects-head{margin-left:40px;grid-template-columns:1fr;gap:10px}.project-grid{grid-template-columns:1fr}.project-card.featured{grid-column:auto;display:block}.project-art,.featured .project-art{min-height:300px}.contact-box{margin-top:20px}h1{font-size:clamp(58px,18vw,92px)}footer{padding:25px 20px;gap:15px;flex-direction:column}.mini-window{width:82%}}

/* Anfrage / SQLite */
.inquiry{display:grid;grid-template-columns:70px .8fr 1.2fr;gap:50px;align-items:start}.inquiry-head h2{font-family:Georgia,serif;font-size:clamp(42px,5vw,72px);font-weight:400;line-height:1;letter-spacing:-.04em;margin:8px 0 22px}.inquiry-head>p:last-child{color:var(--muted);line-height:1.7;max-width:460px}.inquiry-form{background:var(--paper);border:1px solid #e4e0d8;border-radius:var(--radius);padding:32px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.inquiry-form label span{display:block;font-size:12px;font-weight:750;margin-bottom:8px}.inquiry-form input,.inquiry-form select,.inquiry-form textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;padding:13px 14px;font:inherit;color:var(--ink);outline:none}.inquiry-form input:focus,.inquiry-form select:focus,.inquiry-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #9c5a3714}.message-field{display:block;margin-top:18px}.inquiry-form textarea{resize:vertical;min-height:150px}.privacy-check{display:flex!important;gap:10px;align-items:flex-start;margin:18px 0}.privacy-check input{width:auto;margin-top:3px}.privacy-check span{font-weight:400!important;line-height:1.5;color:var(--muted)}.privacy-check a{color:inherit}.form-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.form-actions button{cursor:pointer}.form-actions small{color:var(--muted)}.form-status{margin-top:18px;padding:0;font-size:13px}.form-status.success,.form-status.error{padding:13px 15px;border-radius:12px}.form-status.success{background:#e7f2e9;color:#315a39}.form-status.error{background:#f7e8e5;color:#7e3f34}.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}@media(max-width:850px){.inquiry{grid-template-columns:40px 1fr}.inquiry-head,.inquiry-form{grid-column:2}.inquiry-form{padding:24px;margin-top:10px}.form-grid{grid-template-columns:1fr}}

/* Austauschbare Bilder aus /bilder */
.brand-logo{width:54px;height:38px;object-fit:contain;display:block;flex:0 0 auto}
.project-photo{background:#ddd8cd}
.project-photo img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;display:block}
.featured .project-photo img{object-position:center}
@media(max-width:850px){.brand-logo{width:46px;height:32px}}


/* Musik bei Seitenwechseln: dezente Steuerung auf Impressum/Datenschutz bzw. Autoplay-Fallback */
.music-dock{position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;align-items:stretch;background:#171a18ee;color:#f6f3ed;border:1px solid #ffffff24;border-radius:999px;box-shadow:0 14px 38px #0003;overflow:hidden;backdrop-filter:blur(8px)}
.music-dock button{border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.music-dock-main{padding:10px 14px;font-size:12px;white-space:nowrap}
.music-dock-main:disabled{cursor:default;opacity:.9}
.music-dock-stop{width:38px;border-left:1px solid #ffffff20!important;font-size:11px}
.music-dock-stop:hover,.music-dock-main:not(:disabled):hover{background:#ffffff10}
@media(max-width:600px){.music-dock{right:10px;bottom:10px}.music-dock-main{max-width:210px;overflow:hidden;text-overflow:ellipsis}}

/* Klickbares Projektbeispiel */
a.project-demo-link{display:block;text-decoration:none;color:inherit;cursor:pointer}
a.project-demo-link img{display:block;width:100%}