:root {
  --ivory: #f4f0e8; --porcelain: #fbfaf6; --espresso: #2d211c; --stone: #aaa39a;
  --taupe: #d8d0c4; --charcoal: #3e3935; --olive: #69745a; --terracotta: #b9654e; --brass: #aa8d55;
  --line: rgba(45,33,28,.22); --serif: Georgia, 'Times New Roman', serif; --sans: 'Trebuchet MS', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--espresso); background: var(--ivory); font-family: var(--sans); line-height: 1.65; word-break: break-word; overflow-wrap: anywhere; hyphens: auto; }
h1,h2,h3,p,a,button,label,input,select,textarea { word-break: break-word; overflow-wrap: anywhere; hyphens: auto; }
h1,h2,h3 { font-family: var(--serif); font-weight: 400; line-height: 1.03; margin: 0; }
h1 { font-size: clamp(3.8rem, 10vw, 5.2rem); letter-spacing: -.07em; }
h2 { font-size: clamp(2.6rem, 6vw, 6rem); letter-spacing: -.06em; }
h3 { font-size: clamp(1.7rem, 3vw, 2.8rem); }
p { max-width: 62ch; margin: 0 0 1rem; }
a { color: inherit; text-underline-offset: .25em; }
.site-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 4vw; border-bottom: 1px solid var(--line); position: relative; z-index: 5; background: var(--ivory); }
.logo { text-decoration: none; font-family: var(--serif); font-size: 1.55rem; letter-spacing: -.05em; display: flex; align-items: center; gap: .65rem; } .logo img { width: 2.8rem; height: 2.8rem; object-fit: contain; flex: 0 0 auto; } .logo span { display: block; }
.logo small { display: block; font: .58rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--olive); }
.nav-toggle { display: none; background: none; border: 1px solid var(--espresso); padding: .5rem .75rem; font: inherit; }
.site-nav { display: flex; gap: 1.25rem; align-items: center; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; }
.site-nav a { text-decoration: none; }
.site-nav a:hover { color: var(--terracotta); }
.hero { min-height: 76vh; display: grid; grid-template-columns: 1.15fr .85fr; position: relative; padding: 7vw 8vw 5vw 10vw; gap: 5vw; overflow: hidden; }
.hero-copy { align-self: center; position: relative; z-index: 2; }
.kicker { color: var(--olive); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1.5rem; }

.hero-intro { font-size: 1.15rem; max-width: 32rem; margin: 2rem 0; }
.actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.button { display: inline-block; padding: .85rem 1.3rem; text-decoration: none; border: 1px solid var(--espresso); transition: .2s; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.button.primary { background: var(--espresso); color: var(--porcelain); }
.button:hover,.button:focus-visible { background: var(--terracotta); border-color: var(--terracotta); color: white; }
.hero-media, .image-placeholder { min-height: 30rem; background: linear-gradient(135deg, var(--taupe), var(--stone)); position: relative; isolation: isolate; }
.hero-media:before, .image-placeholder:before { content: 'BILDPLATZHALTER · FOTOGRAFIE FOLGT'; position: absolute; inset: 1rem; border: 1px solid rgba(45,33,28,.45); display: grid; place-items: center; color: var(--charcoal); font-size: .65rem; letter-spacing: .15em; text-align: center; }
.hero-media { transform: rotate(2.5deg); margin-top: 3vw; } .hero-media img { width: 100%; height: 100%; min-height: 30rem; display: block; object-fit: cover; }
.hero-media:after { content: '01 / TAFEL'; position: absolute; left: -2.5rem; top: 2rem; writing-mode: vertical-rl; font-size: .65rem; letter-spacing: .2em; color: var(--terracotta); }
.editorial-section { padding: 9vw 10vw; border-top: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: .4fr 1fr; gap: 4vw; margin-bottom: 4rem; }
.section-label { color: var(--terracotta); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; padding-top: .6rem; }
.section-heading h2 { max-width: 10ch; }
.manifesto { display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; margin-left: 16%; }
.manifesto blockquote { font: 2.1rem/1.2 var(--serif); margin: 0; border-top: 1px solid var(--espresso); padding-top: 1rem; }
.rule-list { border-top: 1px solid var(--line); }
.rule-list div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding: 1.25rem 0; }
.rule-list strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }
.worlds { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; align-items: start; }
.world { border-top: 1px solid var(--espresso); padding: 1rem 0 2rem; grid-column: span 4; }
.world:nth-child(2) { grid-column: 5 / span 4; margin-top: 5rem; }
.world:nth-child(3) { grid-column: 9 / span 4; margin-top: 10rem; }
.world:nth-child(4) { grid-column: 2 / span 4; margin-top: -1rem; }
.world:nth-child(5) { grid-column: 7 / span 5; margin-top: 3rem; }
.world em { color: var(--olive); font-size: .8rem; }
.composition { background: var(--espresso); color: var(--porcelain); padding: 10vw 8vw; }
.composition .section-label { color: var(--brass); }
.composition h2 { max-width: 8ch; }
.sequence { display: flex; align-items: center; gap: 1.5rem; margin: 5rem 0 1rem; flex-wrap: wrap; }
.sequence span { font: clamp(1.4rem, 3vw, 3rem) var(--serif); }
.sequence i { display: block; width: 4rem; height: 1px; background: var(--brass); }
.visual-ribbon { display: flex; gap: 1rem; padding: 2rem 0 3rem; overflow-x: auto; background: var(--taupe); } .visual-ribbon img { flex: 0 0 clamp(12rem, 23vw, 22rem); height: clamp(15rem, 28vw, 25rem); object-fit: cover; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: center; }
.split.reverse > :first-child { order: 2; }
.tall-placeholder { min-height: 34rem; background: linear-gradient(160deg, var(--olive), var(--taupe)); position: relative; }
.tall-placeholder:after { content: 'RAUM · ABLAUF · GÄSTE'; position: absolute; bottom: 1.5rem; left: 1.5rem; color: var(--porcelain); letter-spacing: .15em; font-size: .65rem; } .tall-placeholder img { width: 100%; height: 100%; min-height: 34rem; display: block; object-fit: cover; } .editorial-photo { margin: 0 0 4rem; width: min(100%, 42rem); } .editorial-photo-offset { margin-left: 12%; } .editorial-photo-wide { width: 100%; } .editorial-photo-small { width: min(100%, 24rem); } .editorial-photo img { display: block; width: 100%; max-height: 30rem; object-fit: cover; filter: saturate(.88); } .editorial-photo figcaption { border-bottom: 1px solid var(--line); padding: .65rem 0; color: var(--olive); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.address-block { border-left: 3px solid var(--terracotta); padding-left: 1.5rem; font-size: 1.15rem; }
.cta-band { background: var(--terracotta); color: var(--porcelain); padding: 10vw; display: flex; justify-content: space-between; align-items: end; gap: 2rem; }
.cta-band h2 { max-width: 8ch; }
.cta-band .button { border-color: var(--porcelain); }
.page-intro { padding: 8vw 10vw 5vw; display: grid; grid-template-columns: .35fr 1fr; gap: 5vw; border-bottom: 1px solid var(--line); }
.page-intro h1 { font-size: clamp(3.8rem, 9vw, 8rem); max-width: 8ch; }
.page-body { padding: 6vw 17vw 9vw; }
.page-body h2 { margin: 4rem 0 1.25rem; font-size: clamp(2.2rem, 4vw, 4rem); }
.page-body h3 { margin: 2rem 0 .5rem; }
.page-body p { font-size: 1.05rem; }
.process { display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--espresso); margin: 3rem 0; }
.process div { padding: 1.2rem .7rem; border-right: 1px solid var(--line); }
.process b { display: block; color: var(--terracotta); font: 1.3rem var(--serif); margin-bottom: 1rem; }
.contact-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; }
form { border-top: 1px solid var(--espresso); padding-top: 1rem; }
.field { margin-bottom: 1rem; } label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .35rem; } input,select,textarea { width: 100%; padding: .85rem; border: 1px solid var(--stone); background: var(--porcelain); color: var(--espresso); font: inherit; } textarea { min-height: 8rem; resize: vertical; } .error { color: var(--terracotta); font-size: .76rem; min-height: 1.3em; display: block; } .submit-button { cursor: pointer; margin-top: 1rem; } .submit-button:disabled { opacity: .4; cursor: not-allowed; }
.site-footer { padding: 3rem 4vw; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; font-size: .78rem; } .site-footer strong { font: 1.4rem var(--serif); } .footer-links { display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; } .footer-links a { color: var(--charcoal); }
.modal { position: fixed; inset: 0; background: rgba(45,33,28,.7); display: none; place-items: center; padding: 1rem; z-index: 10; } .modal.open { display: grid; } .modal-content { background: var(--porcelain); padding: 2.5rem; max-width: 30rem; width: min(100%, 30rem); position: relative; } .modal-close { position: absolute; right: 1rem; top: 1rem; border: 0; background: none; font: 1.5rem var(--sans); cursor: pointer; }
@media (max-width: 800px) { .site-header { align-items: flex-start; } .nav-toggle { display: block; } .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 1rem 4vw; background: var(--ivory); border-bottom: 1px solid var(--line); flex-direction: column; align-items: flex-start; } .site-nav.open { display: flex; } .hero,.split,.contact-layout,.page-intro { grid-template-columns: 1fr; } .hero { padding: 5rem 7vw; } .hero-media { min-height: 22rem; margin: 0; } .hero-media img { min-height: 22rem; } .tall-placeholder img { min-height: 26rem; } .editorial-photo-offset { margin-left: 0; } .section-heading { grid-template-columns: 1fr; gap: 1rem; } .manifesto { grid-template-columns: 1fr; margin-left: 0; gap: 3rem; } .worlds { display: block; } .world,.world:nth-child(n) { margin: 0 0 2rem; } .split.reverse > :first-child { order: 0; } .process { grid-template-columns: 1fr; } .process div { border-right: 0; border-bottom: 1px solid var(--line); } .cta-band { display: block; } .cta-band .button { margin-top: 2rem; } .site-footer { grid-template-columns: 1fr; } .page-body { padding: 3rem 7vw 5rem; } }
@media (max-width: 360px) { .hero { padding-left: 5vw; padding-right: 5vw; } h1 { font-size: 3.3rem; } .modal-content { padding: 2rem 1.2rem; } }