/*
Theme Name: Entwicklung Buchmatt
Theme URI: https://www.burgdorf.ch/
Author: Stadt Burgdorf / Projektteam
Description: Präsentations-Theme für die Projektwebseite Entwicklung Buchmatt. Inhalte werden durch das Plugin «Entwicklung Buchmatt – Projektinhalte» gepflegt.
Version: 1.0.0
Text Domain: buchmatt-theme
*/

:root{--ink:#172825;--green:#173b32;--yellow:#f6e443;--paper:#fff;--soft:#eef2ed;--muted:#647269;--line:#d9e0da}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;color:var(--ink);background:var(--paper);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6}a{color:inherit;text-decoration:none}button,input{font:inherit}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #c58013;outline-offset:4px}.skip{position:fixed;top:-100px;left:0;z-index:50;background:var(--yellow);padding:12px 20px}.skip:focus{top:0}.draft-bar{display:flex;justify-content:space-between;gap:20px;padding:7px 4%;background:var(--ink);color:#fff;font-size:11px;letter-spacing:.03em}.draft-bar span{opacity:.65}.site-header{height:106px;padding:0 4%;display:flex;align-items:center;gap:38px;background:#fff;position:relative;z-index:10}.project-mark{display:flex;flex-direction:column;font-size:15px;line-height:1;letter-spacing:-.4px;white-space:nowrap}.project-mark strong{font-size:32px;letter-spacing:-1.7px;margin-top:3px}.dot{color:#c7ab00}nav{display:flex;align-items:center;gap:26px;margin-left:auto}nav a{font-size:13px;font-weight:700;white-space:nowrap;border-bottom:3px solid transparent;padding:8px 0}nav a:hover,nav a:focus-visible{border-color:var(--yellow)}.header-actions{display:flex;align-items:center;gap:18px}.city-logo{width:108px;height:auto;display:block}.newsletter-button{width:72px;height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:var(--yellow);border-radius:50%;font-size:11px;font-weight:700;text-align:center;line-height:1.05;transition:transform .2s,background .2s}.newsletter-button b{font-size:20px;font-weight:400;line-height:1}.newsletter-button:hover{transform:scale(1.05);background:#fff17b}.menu-toggle{display:none;border:0;background:transparent;padding:8px}.hero{height:min(710px,75vw);min-height:560px;position:relative;color:#fff;overflow:hidden}.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,35,27,.74),rgba(12,35,27,.08) 80%),linear-gradient(0deg,rgba(12,35,27,.5),transparent 50%)}.hero-content{position:relative;z-index:1;padding:100px 7%;max-width:720px}.eyebrow,.section-label{font-size:11px;letter-spacing:.14em;font-weight:700;line-height:1.4}.yellow-text{color:var(--yellow)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(54px,6.2vw,92px);font-weight:500;line-height:1;letter-spacing:-4px;margin:25px 0 30px}h1 em,h2 em{font-family:Georgia,'Times New Roman',serif;font-weight:400}h1 em{color:var(--yellow)}.hero-intro{font-size:19px;line-height:1.5;max-width:480px}.hero-meta{position:absolute;z-index:1;left:7%;right:7%;bottom:25px;display:flex;justify-content:space-between;gap:25px;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.section{padding:94px 7%}.section-label{color:#738179;margin-bottom:30px}.intro{background:#fff}.intro-layout{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:start}.intro h2,.documents h2,.participation h2,.newsletter h2{font-size:clamp(38px,4vw,60px);font-weight:500;line-height:1.06;letter-spacing:-2.5px;margin:0}.copy-column{max-width:570px}.lead{font-size:20px;line-height:1.5}.copy-column p:not(.lead){color:var(--muted)}.goal-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:70px;border-top:1px solid var(--line);padding-top:26px}.goal-strip article{display:grid;grid-template-columns:38px 1fr;gap:15px;align-items:start}.goal-number{width:34px;height:34px;border-radius:50%;background:var(--yellow);font-size:11px;text-align:center;line-height:34px;font-weight:700}.goal-strip h3{font-size:18px;margin:2px 0 6px}.goal-strip p{font-size:14px;color:var(--muted);margin:0}.process{background:var(--green);color:#fff}.process .section-label{color:#d0ddd5}.section-intro-row{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:end}.section-intro-row h2{font-size:clamp(38px,4vw,60px);font-weight:500;letter-spacing:-2.5px;line-height:1.06;margin:0}.section-intro-row>p{max-width:480px;color:#c6d3cb;margin:0}.phases{display:grid;grid-template-columns:repeat(3,1fr);margin-top:65px}.phase{position:relative;border:1px solid #668176;border-right:0;background:transparent;color:#fff;text-align:left;padding:26px 25px 30px;min-height:150px}.phase:last-child{border-right:1px solid #668176}.phase span{font-size:12px;letter-spacing:.1em;color:#c5d4cb}.phase strong{display:block;font-size:22px;line-height:1.2;font-weight:500;margin-top:22px}.phase b{position:absolute;right:22px;bottom:22px;font-weight:400;font-size:23px}.phase:hover{background:#245043}.phase.active{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}.phase.active span{color:var(--ink)}.phase-detail{display:grid;grid-template-columns:1fr 1fr;gap:10%;border-top:1px solid #668176;margin-top:36px;padding:34px 25px 0}.phase-kicker{font-size:11px;letter-spacing:.1em;color:#bfd0c6}.phase-detail h3{font-size:32px;font-weight:500;margin:8px 0 0}.phase-detail p{color:#d2ddd6;margin-bottom:13px}.phase-detail p:last-child{font-size:14px;color:#bfd0c6}.phase-detail strong{color:#fff}.documents{background:#f1f4f0}.documents-layout{display:grid;grid-template-columns:1fr 1.35fr;gap:10%}.documents-layout>div>p{max-width:380px;color:var(--muted)}.document-list{border-top:1px solid #bdc9c0}.document-row{display:grid;grid-template-columns:35px 1fr auto;gap:17px;align-items:start;border-bottom:1px solid #bdc9c0;padding:21px 0}.document-row>span{font-size:11px;color:#75847a;margin-top:5px}.document-row h3{font-size:19px;font-weight:500;margin:0 0 5px}.document-row p{font-size:13px;color:var(--muted);margin:0}.document-row em{font-style:normal;font-size:10px;border:1px solid #b7c5ba;border-radius:20px;padding:3px 9px;color:#69786e;white-space:nowrap}.participation{background:var(--yellow)}.participation-layout{display:grid;grid-template-columns:1fr 1fr;gap:10%}.participation .lead{max-width:530px}.participation-layout>div>p:not(.lead){max-width:510px}.accordion{border-top:1px solid #ada235}.accordion details{border-bottom:1px solid #ada235;padding:20px 0}.accordion summary{display:flex;justify-content:space-between;gap:20px;cursor:pointer;font-size:18px;font-weight:500;list-style:none}.accordion summary::-webkit-details-marker{display:none}.accordion summary::after{content:'+'}.accordion details[open] summary::after{content:'–'}.accordion details p{font-size:14px;max-width:430px;margin:13px 0 0}.newsletter{display:grid;grid-template-columns:1fr 1fr;gap:12%;background:var(--soft)}.newsletter-copy>p{max-width:430px;color:var(--muted);font-size:18px}.form-note{background:#dfe7df;padding:10px 13px;font-size:12px;margin:0 0 21px}label{display:block;font-size:13px;margin-bottom:18px}label small{color:var(--muted)}input:not([type=checkbox]){width:100%;height:40px;display:block;border:0;border-bottom:1px solid #9eafa1;background:transparent;font-size:17px;margin-top:2px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.consent{display:flex;gap:10px;font-size:12px;line-height:1.4;margin-top:25px}.consent input{width:17px;height:17px;flex:0 0 auto;accent-color:var(--green)}.submit-button{display:inline-flex;align-items:center;gap:28px;border:0;background:var(--ink);color:#fff;padding:15px 22px;font-size:13px;font-weight:700}.submit-button span{font-size:20px}.submit-button:hover{background:#2a4c40}#form-message{font-size:13px;margin:14px 0 0}.footer{padding-top:58px;padding-bottom:25px}.footer-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:35px}.footer-grid h3{font-size:19px;margin:0 0 4px}.footer-grid p:not(.section-label){font-size:13px;color:var(--muted)}.footer-link{font-size:13px;font-weight:700;border-bottom:1px solid #87978d;padding-bottom:4px}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:54px;padding-top:19px;font-size:11px;color:var(--muted)}.footer-bottom a{color:var(--ink)}
@media(max-width:1100px){.site-header{gap:20px}.site-header nav{gap:15px}.site-header nav a{font-size:11px}.city-logo{width:90px}.newsletter-button{width:64px;height:64px}.section{padding-left:6%;padding-right:6%}.hero-content{padding-left:6%}.hero-meta{left:6%;right:6%}}
@media(max-width:760px){html{scroll-padding-top:20px}.draft-bar{font-size:10px}.draft-bar span{max-width:58%;text-align:right}.site-header{height:83px;padding:0 6%;gap:12px}.project-mark{font-size:12px}.project-mark strong{font-size:28px}.site-header nav{display:none;position:absolute;top:83px;left:0;right:0;padding:14px 6%;background:#fff;border-top:1px solid var(--line);box-shadow:0 10px 22px #17282518}.site-header nav.open{display:flex;flex-direction:column;align-items:stretch;gap:4px}.site-header nav a{font-size:15px}.city-logo{display:none}.newsletter-button{width:60px;height:60px;font-size:10px}.menu-toggle{display:block}.hero{height:640px;min-height:0}.hero-image{object-position:49% center}.hero-content{padding:76px 8% 40px}.hero h1{font-size:54px;letter-spacing:-2.8px}.hero-intro{font-size:16px;max-width:330px}.hero-meta{left:8%;right:8%;bottom:22px;font-size:8px;line-height:1.4}.hero-meta span:last-child{text-align:right}.section{padding:62px 7%}.intro-layout,.section-intro-row,.documents-layout,.participation-layout,.newsletter{grid-template-columns:1fr;gap:28px}.intro h2,.documents h2,.participation h2,.newsletter h2,.section-intro-row h2{font-size:40px}.lead{font-size:18px}.goal-strip{grid-template-columns:1fr;gap:22px;margin-top:40px}.goal-strip article{grid-template-columns:36px 1fr}.phases{grid-template-columns:1fr;margin-top:36px}.phase,.phase:last-child{border-right:1px solid #668176;border-bottom:0;min-height:0;padding:19px 18px;display:grid;grid-template-columns:45px 1fr;gap:0 12px}.phase:last-child{border-bottom:1px solid #668176}.phase span{grid-row:1 / 3}.phase strong{font-size:19px;margin-top:0}.phase b{right:16px;bottom:17px}.phase-detail{grid-template-columns:1fr;gap:12px;padding:27px 0 0}.phase-detail h3{font-size:27px}.document-row{grid-template-columns:25px 1fr}.document-row em{grid-column:2;justify-self:start;margin-top:-7px}.form-grid{grid-template-columns:1fr;gap:0}.footer-grid{grid-template-columns:1fr 1fr;gap:30px 20px}.footer-grid>.project-mark{grid-column:1 / -1}.footer-bottom{flex-wrap:wrap}.footer-bottom span{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Hero navigation variant: no separate header, controls sit on the image. */
.hero-top{position:absolute;z-index:3;top:28px;left:4%;right:4%;display:flex;align-items:center;gap:18px}.hero-top .city-logo{width:134px;height:auto;background:rgba(255,255,255,.94);padding:10px 13px;border-radius:12px;box-shadow:0 5px 18px rgba(8,27,21,.16)}.hero-top nav{margin-left:auto;display:flex;gap:9px;align-items:center}.hero-top nav a{background:#fff;color:var(--ink);border:0;border-radius:999px;padding:11px 15px;font-size:12px;line-height:1.15;box-shadow:0 4px 14px rgba(8,27,21,.12)}.hero-top nav a:hover,.hero-top nav a:focus-visible{background:var(--yellow);border:0}.hero-top .menu-toggle{display:none}.hero-newsletter{position:absolute;z-index:3;right:7%;bottom:27px;display:flex;align-items:center;gap:22px;background:var(--yellow);color:var(--ink);border-radius:999px;padding:15px 21px;font-size:13px;font-weight:700;box-shadow:0 5px 18px rgba(8,27,21,.18);transition:transform .2s,background .2s}.hero-newsletter b{font-size:22px;font-weight:400;line-height:1}.hero-newsletter:hover{transform:translateY(-2px);background:#fff17b}.hero .hero-meta{right:225px}.hero .hero-content{padding-top:148px}
@media(max-width:1100px){.hero-top{left:6%;right:6%}.hero-top nav{gap:6px}.hero-top nav a{padding:10px 11px;font-size:10px}.hero-top .city-logo{width:118px}.hero .hero-meta{right:200px}.hero-newsletter{right:6%}}
@media(max-width:760px){.hero-top{top:18px;left:7%;right:7%;align-items:flex-start}.hero-top .city-logo{width:118px;padding:8px 10px;border-radius:9px}.hero-top nav{display:none}.hero-top .menu-toggle{display:block;margin-left:auto;border:0;background:#fff;color:var(--ink);border-radius:999px;padding:12px 15px;font-size:12px;font-weight:700;box-shadow:0 4px 14px rgba(8,27,21,.14)}.hero-top .menu-toggle span{font-size:17px;margin-left:6px}.hero-top nav.open{position:absolute;top:54px;left:0;right:0;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:13px;background:#fff;border-radius:14px;box-shadow:0 10px 22px rgba(8,27,21,.18)}.hero-top nav.open a{font-size:14px;padding:10px 12px}.hero .hero-content{padding-top:155px}.hero .hero-meta{right:8%;bottom:24px}.hero .hero-meta span:last-child{display:none}.hero-newsletter{right:7%;bottom:20px;padding:13px 17px;font-size:12px;gap:16px}.hero-newsletter b{font-size:19px}}

/* Final placement requested for the city mark and newsletter control. */
.hero-top .city-logo{width:148px;padding:0;background:transparent;border-radius:0;box-shadow:none;filter:drop-shadow(0 2px 3px rgba(8,27,21,.25))}
.hero-newsletter{position:fixed;z-index:30;right:28px;bottom:28px;width:170px;height:170px;padding:20px;border-radius:50%;display:flex;flex-direction:column;justify-content:center;gap:7px;text-align:center;font-size:14px;line-height:1.15;box-shadow:0 8px 22px rgba(8,27,21,.24)}
.hero-newsletter b{font-size:27px}
.hero-meta{display:none}
@media(max-width:760px){.hero-top .city-logo{width:125px;padding:0}}

.hero-newsletter{left:var(--newsletter-left,75%);top:var(--newsletter-top,calc(min(710px,100svh) - 198px));right:auto;bottom:auto}
.image-slider{margin-top:48px;position:relative}
.slider-frame{aspect-ratio:4 / 3;overflow:hidden;background:var(--soft);touch-action:pan-y}
.slide{width:100%;height:100%;overflow:hidden}
.slide[hidden]{display:none}
.slide img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.slide-detail img{transform:scale(1.7);transform-origin:46% 90%}
.slider-controls{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:18px}
.slider-controls button{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:white;color:var(--ink);font-size:23px;cursor:pointer}
.slider-controls button:hover{background:var(--yellow)}
.slide-count{font-size:14px;min-width:42px;text-align:center;color:var(--muted)}
.process .section-intro-row{display:block}
.process .section-intro-row>p{margin-top:24px;max-width:760px}
.process .phase-detail{display:block}
.process .phase-detail h3{margin-bottom:20px}
.process .phase-detail>div:last-child{max-width:820px}
@media(min-width:761px){
 .process .process-timeline{display:flex;justify-content:space-between;width:100%}
 .process .process-timeline::before{left:16px;right:16px}
 .process .process-timeline .phase{width:30%;padding-right:0}
 .process .process-timeline .phase:nth-child(2){text-align:center}
 .process .process-timeline .phase:nth-child(2)>span{margin-inline:auto}
 .process .process-timeline .phase:last-child{text-align:right}
 .process .process-timeline .phase:last-child>span{margin-left:auto}
}
.contact-card{margin-top:38px;padding:28px;background:white;border:1px solid var(--line);border-radius:8px;scroll-margin-top:30px}
.contact-card h3{font-size:22px;line-height:1.35;font-weight:500;margin-bottom:14px}
.contact-card p{margin:0;font-size:16px;line-height:1.6}
.contact-card a{text-decoration:underline;text-underline-offset:3px;font-weight:700}
.intro-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6%;align-items:start}
.intro-media{min-width:0}
.intro-media .image-slider{margin-top:28px}
.intro-media .slider-frame{aspect-ratio:4 / 3}
.intro-layout .copy-column{padding-top:calc(clamp(38px,4vw,60px)*1.06 + 28px)}
.process-timeline{position:relative;gap:0;margin-top:52px;align-items:start}
.process-timeline::before{content:'';position:absolute;left:16px;right:calc(33.333% - 16px);top:16px;height:2px;background:#76968a}
.process-timeline .phase,.process-timeline .phase:last-child{position:relative;display:block;min-height:0;border:0;background:transparent;color:white;padding:0 28px 20px 0;text-align:left;cursor:pointer}
.process-timeline .phase>span{position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;border:2px solid #96afa4;border-radius:50%;background:var(--green);font-size:12px;letter-spacing:0;color:white}
.process-timeline .phase strong{font-size:21px;line-height:1.4;margin-top:18px;font-weight:500}
.process-timeline .phase b{display:none}
.process-timeline .phase.active>span{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.process-timeline .phase.active strong{color:var(--yellow)}
.process-timeline .phase:hover strong{text-decoration:underline;text-underline-offset:5px}
.process .phase-detail{padding:28px 0 0;margin-top:16px;border-top:1px solid #76968a;grid-template-columns:1fr 1fr;gap:6%}
.participation>h2{margin-bottom:40px}
.participation-layout{align-items:start;gap:7%;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.participation-information>h3{font-size:24px;line-height:1.35;font-weight:500;max-width:440px;margin-bottom:24px}
.participant-list{margin:0}
.participant-list>div{padding:16px 0;border-top:1px solid #b9ac40}
.participant-list dt{font-size:16px;font-weight:700;margin-bottom:5px}
.participant-list dd{font-size:16px;line-height:1.55;margin:0}
.participation-event{background:#fffef2;padding:34px;border-radius:8px;color:var(--ink)}
.participation-event{background:#eaf1e7;border:1px solid #cfdccc}
.participation .participant-list>div,.participation .accordion,.participation .accordion details{border-color:#76968a}
.participation-event{background:#e3efe9;border-color:#76968a}
.event-label{font-size:12px;letter-spacing:.09em;color:#5c665a;margin-bottom:22px}
.participation-event h3{font-size:28px;line-height:1.2;font-weight:500;margin:0 0 25px}
.event-title{font-weight:700;font-size:18px;margin-bottom:10px}
.event-facts{margin:25px 0}
.event-facts>div{padding:12px 0;border-top:1px solid #d5d9c8}
.event-facts dt{font-size:13px;color:var(--muted)}
.event-facts dd{font-size:16px;margin:3px 0 0}
.event-link{font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:16px;border-top:1px solid #d5d9c8;padding-top:18px}
.event-link:hover{text-decoration:underline}
.legal-bar{display:flex;align-items:center;gap:32px;flex-wrap:wrap;background:#303332;color:#fff;padding:24px 7%;font-size:14px}
.legal-bar nav{margin-left:auto;gap:25px;display:flex}
.legal-bar nav a{color:white;font-size:14px;border:0;padding:4px 0;font-weight:400}
.legal-bar a:hover{text-decoration:underline;text-underline-offset:4px}
.legal-bar .back-top{font-size:14px}
@media(max-width:760px){
  .intro-layout{grid-template-columns:1fr;gap:26px}
  .intro-layout .copy-column{padding-top:0}
  .process-timeline{grid-template-columns:1fr;padding-left:0;margin-top:35px}
  .process-timeline::before{left:16px;top:16px;bottom:30px;width:2px;height:auto;right:auto}
  .process-timeline .phase,.process-timeline .phase:last-child{display:grid;grid-template-columns:34px minmax(0,1fr);gap:18px;padding:12px 0 22px;align-items:center}
  .process-timeline .phase>span{grid-row:auto}
  .process-timeline .phase strong{margin:0;font-size:19px}
  .process-timeline .phase strong br{display:none}
  .process .phase-detail{display:block;margin:0 0 26px 52px;padding:0;border:0}
  .phase-detail h3{font-size:22px;margin-bottom:16px}
  .participation-layout{grid-template-columns:1fr;gap:30px}
  .participation-event{padding:25px}
  .participation>h2{margin-bottom:30px}
  .legal-bar{padding:25px 7% 105px;gap:18px}
  .legal-bar>span{width:100%}
  .legal-bar nav{margin:0;gap:24px}
  .legal-bar .back-top{margin-left:auto}
}
@media(max-width:760px){.hero-newsletter{left:auto;top:var(--newsletter-mobile-top,auto);right:12px;bottom:12px;width:76px;height:76px;padding:7px;font-size:11px;gap:3px;box-shadow:0 3px 12px #08201530}.hero-newsletter b{font-size:18px}.slider-frame{aspect-ratio:4 / 3}.image-slider{margin-top:30px}.footer{padding-bottom:108px}}
.participation{background:#f1f4f0}
.documents{background:var(--yellow)}
.newsletter-side{min-width:0}
.buchmatt-tabs{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap;margin:0 0 36px;border-bottom:1px solid var(--line)}
.buchmatt-heading{font-size:clamp(38px,4vw,60px);font-weight:500;line-height:1.06;letter-spacing:-2.5px;margin:0 0 28px}
.buchmatt-tab{appearance:none;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--muted);padding:0 0 12px;font-size:clamp(20px,2vw,28px);line-height:1.2;letter-spacing:-.6px;cursor:pointer;text-align:left}
.buchmatt-tab:hover{color:var(--ink)}
.buchmatt-tab.active{color:var(--ink);border-bottom-color:var(--yellow)}
.buchmatt-panel{padding-top:0}
.buchmatt-panel[hidden]{display:none}
.buchmatt-panels{min-height:320px}
.buchmatt-panel:focus-visible{outline-offset:8px}
@media(max-width:760px){.buchmatt-heading{font-size:40px;margin-bottom:22px}.buchmatt-tabs{gap:18px;margin-bottom:28px}.buchmatt-tab{font-size:18px;padding-bottom:9px}.buchmatt-panel{padding-top:0}.buchmatt-panels{min-height:0}}

/* Planning timeline: years on the line, concise phase summaries and a clear current phase. */
.process-timeline{width:100%;align-items:stretch}
.process-timeline::before{left:4%;right:4%;top:28px;background:#76968a}
.process-timeline .phase,.process-timeline .phase:last-child{width:auto;flex:1;min-height:0;padding:16px 22px 22px;border:0;background:transparent;color:#fff;border-radius:10px;text-align:center;transition:background .2s,color .2s}
.process-timeline .phase:hover{background:#245043}
.process-timeline .phase-year{position:relative;z-index:2;display:grid;place-items:center;width:56px;height:56px;margin:0 auto;border:2px solid #96afa4;border-radius:50%;background:var(--green);color:#fff;font-size:15px;letter-spacing:.02em}
.process-timeline .phase strong{display:block;margin:17px 0 0;font-size:21px;line-height:1.3;font-weight:500}
.process-timeline .phase-short{margin:12px auto 0;max-width:280px;color:#bfd0c6;font-size:14px;line-height:1.45}
.process-timeline .phase.active{background:var(--yellow);color:var(--ink);padding-top:18px;padding-bottom:24px}
.process-timeline .phase.active:hover{background:var(--yellow)}
.process-timeline .phase.active .phase-year{background:var(--ink);border-color:var(--ink);color:var(--yellow)}
.process-timeline .phase.active .phase-short{color:var(--ink)}
.process-timeline .phase.active strong{color:var(--ink)}
.process-timeline .phase b{display:none}
@media(max-width:760px){
  .process-timeline{display:grid!important;grid-template-columns:1fr;padding-left:0;margin-top:35px}
  .process-timeline::before{left:27px;right:auto;top:28px;bottom:32px;width:2px;height:auto}
  .process-timeline .phase,.process-timeline .phase:last-child{display:grid!important;grid-template-columns:56px minmax(0,1fr);gap:0 18px;width:auto;min-height:0;padding:14px 0 26px;align-items:start;text-align:left;border:0;background:transparent;border-radius:0}
  .process-timeline .phase:hover{background:transparent}
  .process-timeline .phase-year{grid-row:1 / span 3;width:56px;height:56px;margin:0}
  .process-timeline .phase strong{margin:2px 0 0;font-size:19px}
  .process-timeline .phase-short{grid-column:2;max-width:none;margin:8px 0 0;font-size:14px;color:#bfd0c6}
  .process-timeline .phase.active{padding:14px 12px 20px;margin:0 -12px 0;background:var(--yellow);border-radius:10px}
  .process-timeline .phase.active .phase-year{margin-left:0}
  .process-timeline .phase.active .phase-short{color:var(--ink)}
}

/* Contact section and newsletter dialog. */
.contact-section{background:var(--soft)}
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:12%;align-items:start}
.contact-section h2{font-size:clamp(38px,4vw,60px);font-weight:500;line-height:1.06;letter-spacing:-2.5px;margin:0 0 26px}
.contact-section .lead{max-width:430px}
.contact-copy{max-width:520px;padding-top:8px}
.contact-copy>p{font-size:18px;line-height:1.6;margin-bottom:28px}
.contact-copy a:not(.contact-newsletter){text-decoration:underline;text-underline-offset:3px;font-weight:700}
.contact-newsletter{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid #9eafa1;padding-top:15px;font-size:14px;font-weight:700;width:min(100%,360px)}
.contact-newsletter:hover{text-decoration:underline;text-underline-offset:4px}
.documents-empty{border-top:1px solid #bdc9c0;padding:24px 0 28px;color:var(--muted);font-size:17px;margin:0}
.documents-note{text-align:right;border-top:1px solid #bdc9c0;padding-top:14px;margin:0;color:#65736a;font-size:13px}
.newsletter-modal[hidden]{display:none}
.newsletter-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px}
.newsletter-backdrop{position:absolute;inset:0;background:rgba(23,40,37,.72);backdrop-filter:blur(4px)}
.newsletter-dialog{position:relative;z-index:1;width:min(100%,640px);max-height:calc(100vh - 48px);overflow:auto;background:#fff;color:var(--ink);padding:42px 44px 38px;box-shadow:0 22px 70px rgba(0,0,0,.28)}
.newsletter-dialog h2{font-size:clamp(34px,4vw,52px);font-weight:500;letter-spacing:-2px;line-height:1.08;margin:8px 0 14px}
.newsletter-dialog>p{max-width:480px;color:var(--muted);font-size:17px}
.newsletter-dialog .section-label{color:#738179}
.newsletter-dialog .form-note{background:#dfe7df}
.modal-confirmation{display:grid;gap:22px;min-height:180px;align-content:center;justify-items:start}.modal-confirmation p{margin:0;font-size:22px;line-height:1.35;color:var(--ink)}
.modal-close{position:absolute;right:18px;top:14px;width:40px;height:40px;border:0;background:transparent;color:var(--ink);font-size:32px;line-height:1;cursor:pointer}
.modal-close:hover{background:var(--yellow)}
body.modal-open{overflow:hidden}
@media(max-width:760px){
  .contact-layout{grid-template-columns:1fr;gap:24px}
  .contact-copy{padding-top:0}
  .contact-copy>p{font-size:17px}
  .newsletter-modal{padding:12px}
  .newsletter-dialog{max-height:calc(100vh - 24px);padding:34px 22px 26px}
  .newsletter-dialog h2{font-size:36px}
}

/* Replace the hero navigation with a compact menu trigger after the title image. */
.hero-top{position:absolute;top:28px;z-index:60}
.hero-top.compact{position:fixed;top:18px;left:auto;right:28px;width:auto;z-index:70}
.hero-top.compact .city-logo,.hero-top.compact>nav{display:none}
.hero-top.compact .menu-toggle{display:block;margin:0;border:0;border-radius:999px;background:#fff;color:var(--ink);padding:13px 16px;font-size:0;line-height:1;box-shadow:0 5px 18px rgba(8,27,21,.2);cursor:pointer}
.hero-top.compact .menu-toggle span{display:block;margin:0;font-size:21px;line-height:1}
.hero-top.compact nav.open{position:fixed;top:72px;right:28px;left:auto;display:flex;flex-direction:column;align-items:stretch;gap:5px;width:min(300px,calc(100vw - 56px));padding:13px;background:#fff;border-radius:14px;box-shadow:0 10px 24px rgba(8,27,21,.2)}
.hero-top.compact nav.open a{font-size:14px;padding:10px 12px}
.contact-image{width:100%;aspect-ratio:4 / 3;overflow:hidden}
.contact-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 62%}
@media(max-width:760px){
  .hero-top{position:absolute;top:18px;z-index:60}
  .hero-top.compact{position:fixed;top:12px;right:12px;left:auto}
  .hero-top.compact nav.open{top:62px;right:12px;width:min(290px,calc(100vw - 24px))}
  .contact-image{width:100%;aspect-ratio:4 / 3}
}

/* Repeatable timeline phases with a speech-bubble explanation for each step. */
.process-timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;width:100%;position:relative;align-items:start}
.process-timeline::before{left:7%;right:7%;top:28px;height:2px;background:#76968a}
.process-timeline .phase-item{position:relative;z-index:1;min-width:0}
.process-timeline .phase-item .phase{position:relative;display:block;width:100%;min-height:0;padding:0;border:0;background:transparent;color:#fff;text-align:center;cursor:pointer}
.process-timeline .phase-item .phase:hover{background:transparent}
.process-timeline .phase-item .phase-year{position:relative;z-index:2;display:grid;place-items:center;width:56px;height:56px;margin:0 auto;border:2px solid #96afa4;border-radius:50%;background:var(--green);color:#fff;font-size:15px;letter-spacing:.02em}
.process-timeline .phase-item .phase strong{display:block;margin:16px 0 0;color:#fff;font-size:21px;line-height:1.3;font-weight:500}
.process-timeline .phase-item .phase:hover strong{text-decoration:underline;text-underline-offset:5px}
.process-timeline .phase-item.active .phase-year{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.process-timeline .phase-item.active .phase strong{color:var(--yellow)}
.phase-bubble{position:relative;margin-top:30px;padding:22px 22px 20px;background:#fff;color:var(--ink);border:1px solid #d9e0da;border-top:4px solid #76968a;border-radius:8px;text-align:left;box-shadow:0 7px 18px rgba(8,27,21,.14)}
.phase-bubble::before{content:'';position:absolute;top:-16px;left:calc(50% - 13px);border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:13px solid #76968a}
.phase-bubble::after{content:'';position:absolute;top:-11px;left:calc(50% - 11px);border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:11px solid #fff}
.phase-bubble .phase-kicker{margin:0 0 9px;color:#647269;font-size:11px;letter-spacing:.1em;font-weight:700}
.phase-bubble>p:not(.phase-kicker){font-size:15px;line-height:1.5;margin:0 0 12px}
.phase-bubble .phase-product{font-size:13px!important;color:#647269;margin:0!important}
.phase-item.active .phase-bubble{background:var(--yellow);border-color:#d3c630;border-top-color:var(--yellow)}
.phase-item.active .phase-bubble::before{border-bottom-color:var(--yellow)}
.phase-item.active .phase-bubble::after{border-bottom-color:var(--yellow)}
.phase-item.active .phase-bubble .phase-kicker,.phase-item.active .phase-bubble .phase-product{color:var(--ink)}
@media(max-width:760px){
  .process-timeline{display:grid!important;grid-template-columns:1fr;gap:0;padding-left:0}
  .process-timeline::before{left:27px;right:auto;top:28px;bottom:32px;width:2px;height:auto}
  .process-timeline .phase-item{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 18px;padding:14px 0 28px}
  .process-timeline .phase-item .phase{grid-column:1 / -1;display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 18px;align-items:start;text-align:left}
  .process-timeline .phase-item .phase-year{grid-row:1 / span 2;margin:0}
  .process-timeline .phase-item .phase strong{margin:3px 0 0;font-size:19px}
  .process-timeline .phase-item .phase strong br{display:none}
  .phase-bubble{grid-column:2;margin:17px 0 0;padding:20px 18px 18px}
  .phase-bubble::before{top:22px;left:-16px;border-top:13px solid transparent;border-bottom:13px solid transparent;border-right:13px solid #76968a;border-left:0}
  .phase-bubble::after{top:24px;left:-11px;border-top:11px solid transparent;border-bottom:11px solid transparent;border-right:11px solid #fff;border-left:0}
  .phase-item.active .phase-bubble::before{border-bottom-color:transparent;border-right-color:var(--yellow)}
  .phase-item.active .phase-bubble::after{border-bottom-color:transparent;border-right-color:var(--yellow)}
}

/* Keep each speech bubble anchored directly to its own timeline point. */
.process-timeline .phase-item .phase{width:56px;height:56px;min-height:56px;margin:0 auto;padding:0}
.phase-bubble .phase-title{font-size:22px;line-height:1.2;font-weight:500;margin:0 0 14px;color:var(--ink)}
.phase-item.active .phase-bubble .phase-title{color:var(--ink)}
@media(max-width:760px){
  .process-timeline .phase-item{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 18px;align-items:start}
  .process-timeline .phase-item .phase{grid-column:1;grid-row:1;display:block!important;width:56px;height:56px;min-height:56px;margin:0}
  .process-timeline .phase-item .phase-year{margin:0}
  .phase-bubble{grid-column:2;grid-row:1;margin:0}
  .phase-bubble .phase-title{font-size:20px}
}

.phase-bubble{display:block;width:100%;font:inherit;appearance:none;cursor:pointer;transition:transform .2s,box-shadow .2s}
.phase-bubble:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(8,27,21,.18)}
.phase-bubble .phase-kicker,.phase-bubble .phase-title,.phase-bubble .phase-text{display:block}
.phase-bubble .phase-text{font-size:15px;line-height:1.5;margin:0;color:var(--ink)}

/* Participation graphic placeholder and repeatable tab register. */
.participation-graphic{min-height:220px;display:grid;place-items:center;border:2px dashed #76968a;background:#e3efe9;color:#52685e;text-align:center;padding:24px;margin-bottom:30px}
.participation-graphic span{font-size:14px;letter-spacing:.04em}
.participation-tabs{border-top:1px solid #76968a}
.participation-tab-list{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end;padding-top:8px;border-bottom:1px solid #76968a}
.participation-tab{appearance:none;border:1px solid transparent;border-bottom:0;border-radius:7px 7px 0 0;background:transparent;color:var(--ink);padding:10px 12px;font-size:14px;line-height:1.3;text-align:left;cursor:pointer}
.participation-tab:hover{background:#e3efe9}
.participation-tab.active{background:#76968a;color:#fff;border-color:#76968a}
.participation-tab-panel{padding:20px 4px 0;max-width:520px}
.participation-tab-panel p{font-size:16px;line-height:1.55;margin:0}
@media(max-width:760px){
  .participation-graphic{min-height:180px;margin-bottom:24px}
  .participation-tab-list{gap:4px}
  .participation-tab{font-size:13px;padding:9px 10px}
  .participation-tab-panel{padding-top:17px}
}

/* Final alignment refinements for the register and document column. */
.participation-tab-panel{max-width:none;width:100%;padding-left:0;padding-right:0}
.documents-empty{border-top:0}
.documents-note{border-top:0;padding-top:12px}

/* Optional project-team portraits. The editor can show or hide the complete block. */
.projectteam-portraits{margin-top:32px;padding-top:24px;border-top:1px solid #76968a}
.projectteam-portraits-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 18px}
.projectteam-person{margin:0;text-align:center;min-width:0}
.projectteam-portrait{width:min(100%,120px);aspect-ratio:1;margin:0 auto 10px;border-radius:50%;overflow:hidden;background:#d9e4de;display:grid;place-items:center;color:#52685e;font-size:28px;font-weight:700}
.projectteam-portrait img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.projectteam-person figcaption{font-size:13px;line-height:1.35;font-weight:700;overflow-wrap:anywhere}
.projectteam-person figcaption strong{display:block;font-weight:700}.projectteam-person figcaption span{display:block;color:#52685e;font-size:12px;font-weight:400}
@media(max-width:760px){.projectteam-portraits{margin-top:26px;padding-top:20px}.projectteam-portraits-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}.projectteam-portrait{width:min(100%,100px)}}
@media(min-width:761px){.documents-layout{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:7%}}

/* Mitwirkungsergebnisse: prepared for repeatable document cards in WordPress. */
.participation-results{margin-top:72px;padding-top:30px;border-top:1px solid #76968a}
.participation-results-header{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:22px}
.participation-results-header .section-label{margin-bottom:12px;color:#52685e}
.participation-results h3{font-size:32px;line-height:1.1;font-weight:500;margin:0;letter-spacing:-1px}
.participation-results-intro{margin:0;max-width:520px;color:#52685e;font-size:16px;line-height:1.5}
.results-empty{display:flex;align-items:center;gap:18px;min-height:120px;padding:22px 24px;border:2px dashed #76968a;background:#e3efe9;color:#52685e}
.results-empty-mark{width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;border-radius:50%;background:#76968a;color:#fff;font-size:25px;line-height:1}
.results-empty strong{display:block;color:var(--ink);margin-bottom:4px;font-size:16px}
.results-empty p{margin:0;font-size:15px;line-height:1.5}
@media(max-width:760px){
  .participation-results{margin-top:48px;padding-top:24px}
  .participation-results-header{display:block}
  .participation-results-intro{margin-top:12px}
  .results-empty{align-items:flex-start;min-height:0;padding:18px}
}

/* WordPress output helpers. */
.hero-top nav ul{display:contents;list-style:none;margin:0;padding:0}
.result-list{border-top:1px solid #76968a}
.result-card{display:grid;grid-template-columns:35px 1fr auto;gap:17px;align-items:start;border-bottom:1px solid #76968a;padding:21px 0}
.result-card>span{font-size:11px;color:#52685e;margin-top:5px}
.result-card h3{font-size:19px;font-weight:500;margin:0 0 5px}
.result-card p{font-size:13px;color:#52685e;margin:0}
.result-card em{font-style:normal;font-size:10px;border:1px solid #76968a;border-radius:20px;padding:3px 9px;color:#52685e;white-space:nowrap}
.participation-graphic img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain}
.event-register{display:inline-flex;align-items:center;gap:20px;margin:20px 0 12px;padding:12px 18px;border:0;border-radius:9px;background:var(--ink);color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s,transform .2s}
.event-register span{font-size:20px;font-weight:400;line-height:1}
.event-register:hover{background:#2a4c40;transform:translateY(-1px)}
.participation-note{padding:13px 15px;background:#dfe7df;color:var(--muted);font-size:13px;line-height:1.5}
.contact-newsletter-prompt{margin-top:34px;padding:28px;background:#e3efe9;border:1px solid #76968a;border-radius:8px;color:var(--ink);max-width:470px;box-shadow:0 7px 18px rgba(8,27,21,.08)}
.contact-newsletter-label{margin:0 0 9px;color:#52685e;font-size:11px;letter-spacing:.1em;font-weight:700}
.contact-newsletter-prompt h3{font-size:28px;line-height:1.2;font-weight:500;margin:0 0 12px}
.contact-newsletter-prompt>p:not(.contact-newsletter-label){margin:0;color:#52685e;font-size:16px;line-height:1.55}
.contact-newsletter-link{display:inline-flex;align-items:center;gap:12px;margin-top:18px;color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.contact-newsletter-link span{font-size:19px;font-weight:400;text-decoration:none}
.newsletter-notice{padding:13px 15px;background:#dfe7df;color:var(--muted);font-size:13px;line-height:1.5}
.newsletter-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:10px}
.newsletter-actions .submit-button{margin:0}
.remind-later{border:0;background:transparent;color:var(--muted);padding:9px 0;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.remind-later:hover{color:var(--ink)}
@media(max-width:760px){.result-card{grid-template-columns:25px 1fr}.result-card em{grid-column:2;justify-self:start;margin-top:-7px}}

/* The selected title image keeps its original aspect ratio. This avoids the
   strong vertical crop that occurred with a fixed, wide hero container while
   retaining a readable minimum height for the overlaid title and navigation. */
.hero{height:auto;min-height:var(--hero-min-height,560px);aspect-ratio:var(--hero-ratio,1.777778)}
.hero-image{object-fit:cover}
@media(max-width:760px){.hero{height:auto;min-height:var(--hero-min-height,560px);aspect-ratio:var(--hero-ratio,1.777778)}}

/* Final preview alignment: a transparent full-width scroll cue, a compact
   tab hint, equal desktop timeline columns and a compact group title. */
.scroll-cue{position:fixed;z-index:45;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:18px;width:100%;padding:43px 20px;color:var(--ink);background:rgba(255,255,255,.26);border:0;border-radius:0;box-shadow:none;font-size:12px;font-weight:700;backdrop-filter:blur(3px);transition:opacity .2s,visibility .2s}
.scroll-cue.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.scroll-cue.is-arrow-only{padding:0 20px 16px;background:transparent;backdrop-filter:none;gap:0}
.scroll-cue.is-arrow-only .scroll-cue-label{display:none}
.scroll-arrow{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--yellow);font-size:22px;line-height:1;animation:buchmatt-bob 1.8s ease-in-out infinite}
@keyframes buchmatt-bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}
.buchmatt-heading-row{display:block;margin-bottom:22px}
.buchmatt-heading-row .buchmatt-heading{margin:0}
.buchmatt-tabs{position:relative}
.buchmatt-tab-hint{flex:0 1 auto;max-width:min(100%,240px);margin:0 0 12px auto;color:var(--muted);font-size:12px;letter-spacing:.03em;text-align:right;white-space:normal;overflow-wrap:anywhere;line-height:1.25}
.participation-group-title{font:700 italic 16px/1.55 Arial,Helvetica,sans-serif;color:var(--ink);margin:0 0 9px}
.event-location-image{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;margin:18px 0 16px}
@media(min-width:761px){
  .process .process-timeline{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;align-items:start}
  .process .process-timeline::before{left:7%;right:7%;top:28px}
  .process .process-timeline .phase-item{width:auto}
  .process .process-timeline .phase-item .phase{width:56px;margin:0 auto;padding:0}
  .process .process-timeline .phase-bubble{width:100%}
}
@media(max-width:760px){
  .scroll-cue{bottom:0;padding:24px 14px;font-size:11px}
  .buchmatt-heading-row{display:block;margin-bottom:16px}
  .buchmatt-tab-hint{font-size:11px;margin-left:auto}
}

/* Clickable participation graphic with a lightweight accessible lightbox. */
.participation-graphic-link{position:relative;display:block;width:100%;cursor:zoom-in}
.participation-graphic-link:focus-visible{outline:3px solid #c58013;outline-offset:4px}
.participation-graphic-action{position:absolute;right:12px;bottom:12px;padding:7px 10px;border-radius:999px;background:rgba(23,40,37,.84);color:#fff;font-size:12px;font-weight:700;opacity:0;transition:opacity .2s}
.participation-graphic-link:hover .participation-graphic-action,.participation-graphic-link:focus-visible .participation-graphic-action{opacity:1}
.image-lightbox[hidden]{display:none}
.image-lightbox{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:24px}
.image-lightbox-backdrop{position:absolute;inset:0;background:rgba(23,40,37,.82);backdrop-filter:blur(4px)}
.image-lightbox-dialog{position:relative;z-index:1;display:grid;place-items:center;max-width:calc(100vw - 48px);max-height:calc(100vh - 48px);margin:0}
.image-lightbox-dialog img{display:block;max-width:calc(100vw - 48px);max-height:calc(100vh - 48px);width:auto;height:auto;background:#fff;box-shadow:0 22px 70px rgba(0,0,0,.36)}
.image-lightbox-close{position:absolute;z-index:2;top:-18px;right:-18px;width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:var(--ink);font-size:30px;line-height:1;cursor:pointer;box-shadow:0 5px 18px rgba(0,0,0,.22)}
.image-lightbox-close:hover{background:var(--yellow)}
@media(max-width:760px){
  .participation-graphic-action{opacity:1;font-size:11px}
  .image-lightbox{padding:12px}
  .image-lightbox-dialog,.image-lightbox-dialog img{max-width:calc(100vw - 24px);max-height:calc(100vh - 24px)}
  .image-lightbox-close{top:-8px;right:-8px}
}

/* Responsive layout pass: on tablets and phones the title image keeps its
   own ratio, while the title and introduction move into a readable block
   below it. Desktop styles above remain unchanged. */
@media (max-width: 900px){
  html,body{width:100%;max-width:none;overflow-x:hidden}
  main#top{width:100%;max-width:none;margin-left:0;margin-right:0}
  .hero{display:flex;flex-direction:column;height:auto;min-height:0;aspect-ratio:auto;overflow:hidden;background:#14291f}
  .hero-image{position:relative;inset:auto;display:block;flex:0 0 auto;width:100%;height:auto;aspect-ratio:var(--hero-ratio,1.5);object-fit:cover;object-position:center center}
  .hero .hero-content{position:relative;z-index:1;flex:0 0 auto;max-width:none;padding:28px 7% 116px;background:#14291f}
  .hero-overlay{z-index:0}
  .hero-top{top:18px;left:6%;right:6%;align-items:flex-start}
  .hero-top .city-logo{width:118px;padding:0;background:transparent;border-radius:0;box-shadow:none}
  .hero-top nav{display:none}
  .hero-top .menu-toggle{display:block;margin-left:auto;border:0;background:#fff;color:var(--ink);border-radius:999px;padding:11px 14px;font-size:12px;font-weight:700;box-shadow:0 4px 14px rgba(8,27,21,.14)}
  .hero-top .menu-toggle span{font-size:17px;margin-left:6px}
  .hero-top nav.open{position:absolute;top:54px;left:0;right:0;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:13px;background:#fff;border-radius:14px;box-shadow:0 10px 22px rgba(8,27,21,.18)}
  .hero-top nav.open a{font-size:14px;padding:10px 12px}
  .hero h1{font-size:clamp(48px,8vw,66px);letter-spacing:-3px;margin:0 0 20px}
  .hero-intro{max-width:520px;font-size:17px}
  .intro-layout,.participation-layout,.contact-layout,.documents-layout{grid-template-columns:1fr;gap:34px}
  .intro-layout .copy-column{padding-top:0}
  .process .section-intro-row{display:block}
  .process .section-intro-row>p{margin-top:18px;max-width:none}
  .process-timeline{display:grid!important;grid-template-columns:1fr;gap:0;padding-left:0}
  .process-timeline::before{left:27px;right:auto;top:28px;bottom:32px;width:2px;height:auto}
  .process-timeline .phase-item{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 18px;padding:14px 0 28px;align-items:start}
  .process-timeline .phase-item .phase{grid-column:1;grid-row:1;display:block!important;width:56px;height:56px;min-height:56px;margin:0;padding:0;text-align:center}
  .process-timeline .phase-item .phase-year{margin:0}
  .process-timeline .phase-item .phase strong{margin:3px 0 0;font-size:19px}
  .phase-bubble{grid-column:2;grid-row:1;margin:0;padding:20px 18px 18px}
  .phase-bubble::before{top:22px;left:-16px;border-top:13px solid transparent;border-bottom:13px solid transparent;border-right:13px solid #76968a;border-left:0}
  .phase-bubble::after{top:24px;left:-11px;border-top:11px solid transparent;border-bottom:11px solid transparent;border-right:11px solid #fff;border-left:0}
  .phase-item.active .phase-bubble::before{border-bottom-color:transparent;border-right-color:var(--yellow)}
  .phase-item.active .phase-bubble::after{border-bottom-color:transparent;border-right-color:var(--yellow)}
  .participation-layout{display:flex;flex-direction:column;align-items:stretch;gap:34px}
  .participation-information,.participation-event{width:100%;min-width:0}
  .participation-graphic{width:100%;min-height:0;overflow:hidden;padding:0}
  .participation-graphic img{width:100%;height:auto;max-height:none;object-fit:contain}
  .participation-tab-list{width:100%;flex-wrap:wrap;overflow:visible;justify-content:flex-start;align-items:flex-end;padding-bottom:2px}
  .participation-tab{flex:0 1 auto;max-width:100%;white-space:normal;overflow-wrap:anywhere}
  .participation-tab-panel{width:100%;max-width:none;overflow-wrap:anywhere}
  .participation-event{box-sizing:border-box}
  .contact-image{order:2}
  .contact-copy{order:1}
}

@media (max-width: 600px){
  .hero .hero-content{padding:24px 8% 116px}
  .hero h1{font-size:clamp(42px,13vw,56px);letter-spacing:-2.5px}
  .hero-intro{font-size:16px;max-width:330px}
  .hero-top{left:7%;right:7%}
  .hero-top .city-logo{width:105px}
  .section{padding:58px 7%}
  .intro h2,.documents h2,.participation h2,.newsletter h2,.section-intro-row h2{font-size:40px}
  .buchmatt-tabs{gap:12px;margin-bottom:28px;overflow:visible;flex-wrap:wrap;align-items:flex-end}
  .buchmatt-tab{flex:0 0 auto;font-size:18px}
  .buchmatt-tab-hint{flex:1 1 100%;max-width:100%;margin:0 0 10px;text-align:right}
  .scroll-cue{padding:24px 14px}
  .scroll-cue.is-arrow-only{padding:0 14px 14px}
}

@media (orientation: landscape) and (max-width: 900px){
  main#top,.hero{width:100%;max-width:none;margin-left:0;margin-right:0}
  .hero-image{aspect-ratio:var(--hero-ratio,1.5)}
  .hero .hero-content{padding:22px 7% 104px}
  .hero h1{font-size:clamp(40px,7vw,58px)}
  .hero-intro{max-width:620px;font-size:16px}
  .hero-top{left:5%;right:5%}
  .hero-top .city-logo{width:96px}
  .hero-top .menu-toggle{padding:9px 12px}
  .scroll-cue{padding:16px 14px}
  .scroll-cue.is-arrow-only{padding:0 14px 14px}
}

/* On portrait tablets the horizontal timeline turns vertical before the
   boxes become cramped.  The same geometry is used on phones. */
@media (orientation: portrait) and (max-width: 1100px){
  .process .process-timeline{display:grid!important;grid-template-columns:1fr;gap:0;padding-left:0}
  .process .process-timeline::before{left:27px;right:auto;top:28px;bottom:32px;width:2px;height:auto}
  .process-timeline .phase-item{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 18px;padding:14px 0 28px;align-items:start}
  .process-timeline .phase-item .phase{grid-column:1;grid-row:1;display:block!important;width:56px;height:56px;min-height:56px;margin:0;padding:0;text-align:center}
  .process-timeline .phase-item .phase-year{margin:0}
  .process-timeline .phase-item .phase strong{margin:3px 0 0;font-size:19px}
  .phase-bubble{grid-column:2;grid-row:1;margin:0;padding:20px 18px 18px}
  .phase-bubble::before{top:22px;left:-16px;border-top:13px solid transparent;border-bottom:13px solid transparent;border-right:13px solid #76968a;border-left:0}
  .phase-bubble::after{top:24px;left:-11px;border-top:11px solid transparent;border-bottom:11px solid transparent;border-right:11px solid #fff;border-left:0}
  .phase-item.active .phase-bubble::before{border-bottom-color:transparent;border-right-color:var(--yellow)}
  .phase-item.active .phase-bubble::after{border-bottom-color:transparent;border-right-color:var(--yellow)}
}

/* Keep the group register readable at every width instead of forcing a
   horizontal scroll strip. */
.participation-tab-list{flex-wrap:wrap;overflow:visible}
.participation-tab{flex:0 1 auto;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.hero-top.compact nav.open{position:fixed;top:72px;right:28px;left:auto;display:flex;flex-direction:column;align-items:stretch;gap:5px;width:min(300px,calc(100vw - 56px));padding:13px;background:#fff;border-radius:14px;box-shadow:0 10px 24px rgba(8,27,21,.2)}
.hero-top.compact nav.open a{font-size:14px;padding:10px 12px}
@media(max-width:760px){.hero-top.compact nav.open{top:62px;right:12px;left:auto;width:min(290px,calc(100vw - 24px))}}

/* In every single-column view the contact heading remains first, followed
   immediately by its image. The copy then follows below the image. */
@media (max-width: 900px){
  .contact-layout{display:flex;flex-direction:column;gap:24px;min-width:0}
  .contact-copy{display:contents;max-width:none;padding-top:0}
  .contact-section h2{order:1;margin-bottom:0}
  .contact-image{order:2;width:100%;max-width:100%;margin:0;aspect-ratio:4 / 3}
  .contact-copy>.lead{order:3;margin:0;min-width:0}
  .contact-copy>p:not(.lead){order:4;min-width:0;overflow-wrap:anywhere;word-break:break-word}
  .contact-newsletter-prompt{order:5;max-width:100%;min-width:0;overflow-wrap:anywhere}
  .participation-tab-list{min-width:0;max-width:100%;display:flex;flex-flow:row wrap;overflow:visible}
  .participation-tab{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word}
  .participation-tab-panel{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word}
}

/* Landscape phones have enough width for the page, but not enough height for
   the desktop typography. Keep every content column shrinkable and let long
   labels wrap instead of pushing the viewport sideways. */
@media (orientation: landscape) and (max-width: 900px){
  html,body{width:100%;max-width:none;overflow-x:hidden}
  main#top,.hero{width:100%;max-width:none;margin-left:0;margin-right:0}
  .section{padding:44px 6%}
  .section-label{margin-bottom:17px}
  .hero .hero-content{padding:20px 7% 96px}
  .hero h1{font-size:clamp(38px,7.5vw,58px);letter-spacing:-2px}
  .hero-intro{max-width:560px;font-size:15px}
  .hero-top{left:5%;right:5%}
  .hero-top .city-logo{width:96px}
  .buchmatt-heading{font-size:clamp(34px,6vw,48px);letter-spacing:-1.7px}
  .buchmatt-tabs{gap:11px;margin-bottom:22px;min-width:0}
  .buchmatt-tab{min-width:0;max-width:100%;font-size:clamp(17px,3vw,22px);overflow-wrap:anywhere;word-break:break-word}
  .buchmatt-tab-hint{flex:1 1 100%;max-width:100%;margin:0 0 8px;font-size:11px;line-height:1.25}
  .process .section-intro-row>p{font-size:15px;line-height:1.45;overflow-wrap:anywhere;word-break:break-word}
  .process-timeline,.process-timeline .phase-item,.phase-bubble{min-width:0;max-width:100%}
  .phase-bubble{overflow-wrap:anywhere;word-break:break-word}
  .phase-bubble .phase-kicker,.phase-bubble .phase-title,.phase-bubble .phase-text{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
  .participation-information,.participation-event,.participation-graphic,.participation-tabs,.participation-tab-panels{min-width:0;max-width:100%}
  .participation-tab-list{gap:5px}
  .participation-tab{flex:0 1 auto;max-width:100%;padding:8px 9px;font-size:12px;line-height:1.25}
  .participation-group-title,.participation-tab-panel p,.participation-event p,.participation-event dd{overflow-wrap:anywhere;word-break:break-word}
  .documents-layout,.document-list,.document-row,.document-row>div{min-width:0;max-width:100%}
  .document-row{grid-template-columns:24px minmax(0,1fr);gap:12px}
  .document-row em{grid-column:2;justify-self:start;margin-top:5px}
  .document-row h3,.document-row p{overflow-wrap:anywhere;word-break:break-word}
  .event-register,.contact-newsletter-link{max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
  .contact-newsletter-prompt,.participation-event{padding:22px}
  .scroll-cue-label{min-width:0;text-align:center;overflow-wrap:anywhere;word-break:break-word}
  .hero-top.compact nav.open{width:min(300px,calc(100vw - 28px));right:14px}
}

/* Hamburger menu: simple full-screen green overlay. The regular top
   navigation keeps the v1.19.0 styling; these rules apply only while the
   hamburger is open. */
.hero-top.menu-open nav.open{position:fixed;top:0;right:0;bottom:0;left:auto;z-index:101;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;width:min(33.333vw,560px);min-width:320px;height:100dvh;max-width:100vw;padding:clamp(96px,14vh,150px) clamp(28px,4vw,68px) clamp(42px,8vh,92px);background:var(--green);color:#fff;border:0;border-radius:0;box-shadow:-14px 0 32px rgba(8,27,21,.18);overflow-y:auto}
.hero-top.menu-open .menu-toggle{position:fixed;top:28px;right:28px;z-index:102;margin:0;background:#fff;color:var(--ink);border-radius:999px;padding:13px 16px;box-shadow:0 5px 18px rgba(8,27,21,.2)}
.hero-top.menu-open .menu-toggle span{font-size:21px;margin-left:6px}
.hero-top.menu-open nav.open a{position:relative;background:transparent!important;color:#fff;border:0;border-bottom:1px solid rgba(255,255,255,.22)!important;border-radius:0;padding:14px 6px;font-size:clamp(20px,3.1vw,36px);font-weight:500;line-height:1.2;box-shadow:none;width:min(100%,560px)}
.hero-top.menu-open nav.open a:last-child{border-bottom:0!important}
.hero-top.menu-open nav.open a::after{content:"";position:absolute;left:4px;right:4px;bottom:5px;height:2px;border-radius:999px;background:var(--yellow);transform:scaleX(0);transform-origin:left center;transition:transform .18s ease}
.hero-top.menu-open nav.open a:hover,.hero-top.menu-open nav.open a:focus-visible{background:rgba(255,255,255,.08)!important;color:#fff}
.hero-top.menu-open nav.open a:hover::after,.hero-top.menu-open nav.open a:focus-visible::after{transform:scaleX(1)}
@media(max-width:760px){.hero-top.menu-open nav.open{width:min(88vw,420px);min-width:0;padding:88px 24px 34px}.hero-top.menu-open .menu-toggle{top:18px;right:18px;padding:11px 14px}.hero-top.menu-open nav.open a{padding:12px 4px;font-size:clamp(20px,6vw,28px)}}

/* The file-type badge is an actual download/open link, including on touch screens. */
.document-row .file-type-link{display:inline-flex;align-items:center;color:inherit;text-decoration:none}
.document-row .file-type-link:hover em,.document-row .file-type-link:focus-visible em{border-color:var(--green);background:var(--green);color:#fff}
@media(max-width:760px){.document-row .file-type-link{grid-column:2;justify-self:start;margin-top:-7px}}