:root {
  --sw-ink: #171717;
  --sw-muted: #65635d;
  --sw-paper: #f3f0e9;
  --sw-card: #fffefa;
  --sw-red: #d52b1e;
  --sw-blue: #2d78ae;
  --sw-forest: #29443a;
  --sw-line: #d8d3c8;
  --sw-shadow: 0 18px 45px rgba(24, 22, 18, .10);
  --sw-radius: 1.25rem;
}

html { scroll-behavior: smooth; }
body {
  color: var(--sw-ink);
  background: var(--sw-paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
a { text-underline-offset: .18em; }
img { max-width: 100%; }
::selection { color: #fff; background: var(--sw-red); }

.skip-link {
  position: fixed; z-index: 2000; top: .75rem; left: .75rem;
  transform: translateY(-160%); padding: .75rem 1rem;
  border-radius: .5rem; color: #fff; background: var(--sw-red);
}
.skip-link:focus { transform: translateY(0); }

.site-navbar {
  background: rgba(19, 19, 19, .96);
  border-bottom: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(14px);
}
.navbar-brand { text-decoration: none; }
.site-wordmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12.5rem;
  padding: .38rem 1rem .42rem;
  color: #171717;
  background: #f7f5ef;
  border: 2px solid #171717;
  border-radius: .42rem;
  box-shadow: 0 2px 0 rgba(255,255,255,.14), 0 3px 8px rgba(0,0,0,.22);
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  font-weight: 850;
  line-height: 1;
  letter-spacing: .035em;
  white-space: nowrap;
}
.navbar-brand:hover .site-wordmark,
.navbar-brand:focus .site-wordmark { background: #fff; }
.site-wordmark-footer {
  width: fit-content;
  min-width: 15rem;
  font-size: 1.55rem;
  box-shadow: none;
}
.site-navbar .nav-link {
  color: rgba(255,255,255,.76); font-weight: 650;
  border-radius: 999px; padding: .55rem .85rem !important;
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus,
.site-navbar .nav-link.active { color: #fff; background: rgba(255,255,255,.11); }
.navbar-toggler { border-color: rgba(255,255,255,.34); }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255,255,255,.18); }

.hero-home {
  position: relative; min-height: clamp(590px, 76vh, 820px);
  display: grid; align-items: center; overflow: hidden; color: #fff;
  background: #121212;
}
.hero-home::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11,11,11,.96) 0%, rgba(11,11,11,.82) 45%, rgba(11,11,11,.28) 78%, rgba(11,11,11,.1) 100%),
    url('../images/installation-schilderwald.webp') center right / cover no-repeat;
  transform: scale(1.02);
}
.hero-home::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.13) .7px, transparent .7px);
  background-size: 14px 14px; opacity: .16; pointer-events: none;
}
.hero-content { position: relative; z-index: 1; max-width: 760px; padding-block: 7rem 5rem; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.eyebrow::before { content:""; width: 2.25rem; height: 3px; background: var(--sw-red); }
.display-title {
  max-width: 13ch; margin: 1.15rem 0 1.3rem;
  font-size: clamp(3rem, 7vw, 6.4rem); line-height: .96; letter-spacing: -.055em; font-weight: 900;
}
.hero-lead { max-width: 64ch; font-size: clamp(1.05rem, 2vw, 1.3rem); color: rgba(255,255,255,.82); }
.btn-sw-primary, .btn-sw-light, .btn-sw-outline {
  display: inline-flex; align-items: center; gap: .55rem; border-radius: 999px;
  padding: .82rem 1.2rem; font-weight: 760; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-sw-primary { color: #fff; background: var(--sw-red); border: 1px solid var(--sw-red); }
.btn-sw-primary:hover, .btn-sw-primary:focus { color:#fff; background:#b92118; border-color:#b92118; transform: translateY(-2px); box-shadow: 0 12px 24px rgba(213,43,30,.24); }
.btn-sw-light { color: var(--sw-ink); background:#fff; border:1px solid #fff; }
.btn-sw-light:hover, .btn-sw-light:focus { color:var(--sw-ink); background:#f0eee8; border-color:#f0eee8; transform:translateY(-2px); }
.btn-sw-outline { color: inherit; background: transparent; border: 1px solid currentColor; }
.btn-sw-outline:hover, .btn-sw-outline:focus { color:#fff; background:var(--sw-ink); border-color:var(--sw-ink); transform:translateY(-2px); }

.section-space { padding-block: clamp(4.5rem, 9vw, 8rem); }
.section-heading { max-width: 820px; margin-bottom: 2.4rem; }
.section-kicker { color: var(--sw-red); font-size: .78rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.section-title { margin: .5rem 0 1rem; font-size: clamp(2.1rem, 4.4vw, 4rem); line-height: 1.04; letter-spacing: -.04em; font-weight: 900; }
.section-lead { color: var(--sw-muted); font-size: 1.12rem; }

.portal-card {
  position: relative; min-height: 520px; overflow: hidden; isolation: isolate;
  border: 0; border-radius: var(--sw-radius); box-shadow: var(--sw-shadow); color:#fff; background:#e7e3da;
}
.portal-card::before { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(0,0,0,.02) 15%, rgba(0,0,0,.9) 92%); }
.portal-card img { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:contain; padding:2rem; background:#fff; transition:transform .6s ease; }
.portal-card:hover img { transform:scale(1.045); }
.portal-card.velo img { object-fit: contain; background:#fff; padding:2rem; }
.portal-card.velo::before { background: linear-gradient(180deg, rgba(255,255,255,.02) 25%, rgba(0,0,0,.93) 92%); }
.portal-card-body { position:absolute; z-index:2; inset:auto 0 0; padding:clamp(1.6rem,4vw,2.6rem); }
.portal-card h2 { font-size:clamp(2rem,4vw,3.25rem); font-weight:900; letter-spacing:-.035em; }
.portal-card p { max-width:48ch; color:rgba(255,255,255,.82); }
.portal-link { color:#fff; text-decoration:none; font-weight:800; }
.portal-link::after { content:""; position:absolute; inset:0; }
.portal-link:focus-visible { outline:4px solid #fff; outline-offset:-8px; border-radius:var(--sw-radius); }

.info-panel { background: var(--sw-card); border:1px solid var(--sw-line); border-radius:var(--sw-radius); box-shadow:var(--sw-shadow); overflow:hidden; }
.info-panel img { width:100%; height:100%; min-height:360px; object-fit:cover; }
.info-panel-copy { padding:clamp(2rem,5vw,4.5rem); }

.page-hero {
  position:relative; overflow:hidden; background:var(--sw-ink); color:#fff; padding-block:clamp(5.5rem,10vw,8rem) clamp(3.5rem,7vw,5.5rem);
}
.page-hero::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 88% 18%, rgba(45,120,174,.34), transparent 38%), radial-gradient(circle at 72% 78%, rgba(213,43,30,.22), transparent 35%); }
.page-hero .container { position:relative; z-index:1; }
.page-hero h1 { max-width:16ch; font-size:clamp(2.7rem,6vw,5.5rem); font-weight:900; line-height:.99; letter-spacing:-.05em; }
.page-hero p { max-width:68ch; color:rgba(255,255,255,.78); font-size:1.15rem; }
.hero-object {
  min-height:360px; display:flex; align-items:center; justify-content:center; padding:1.5rem;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:var(--sw-radius); box-shadow:0 22px 60px rgba(0,0,0,.28);
}
.hero-object img { max-height:320px; object-fit:contain; filter:drop-shadow(0 18px 25px rgba(0,0,0,.28)); }

.anchor-nav { position:sticky; top:92px; z-index:10; background:rgba(243,240,233,.92); backdrop-filter:blur(12px); border-block:1px solid var(--sw-line); }
.anchor-nav .nav { gap:.35rem; padding-block:.7rem; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:thin; }
.anchor-nav .nav-link { flex:0 0 auto; color:var(--sw-ink); border:1px solid var(--sw-line); border-radius:999px; padding:.4rem .75rem; font-size:.88rem; font-weight:760; background:rgba(255,255,255,.7); }
.anchor-nav .nav-link:hover, .anchor-nav .nav-link:focus { color:#fff; background:var(--sw-ink); border-color:var(--sw-ink); }

.timeline { position:relative; margin-top:2.5rem; }
.timeline::before { content:""; position:absolute; top:0; bottom:0; left:1.45rem; width:2px; background:linear-gradient(var(--sw-red), var(--sw-blue)); }
.timeline-era { position:relative; padding-left:4.75rem; padding-bottom:clamp(4rem,8vw,7rem); scroll-margin-top:160px; }
.timeline-era:last-child { padding-bottom:0; }
.timeline-dot { position:absolute; left:.63rem; top:.25rem; width:1.7rem; height:1.7rem; border:.35rem solid var(--sw-paper); border-radius:50%; background:var(--sw-red); box-shadow:0 0 0 2px var(--sw-red); }
.timeline-era:nth-child(even) .timeline-dot { background:var(--sw-blue); box-shadow:0 0 0 2px var(--sw-blue); }
.timeline-year { display:block; margin-bottom:.25rem; color:var(--sw-red); font-size:.82rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.timeline-era:nth-child(even) .timeline-year { color:#1f6699; }
.timeline-title { font-size:clamp(1.9rem,3.6vw,3.2rem); font-weight:900; letter-spacing:-.035em; }
.timeline-intro { max-width:78ch; color:var(--sw-muted); font-size:1.08rem; }

.archive-card { height:100%; overflow:hidden; background:var(--sw-card); border:1px solid var(--sw-line); border-radius:1rem; box-shadow:0 12px 28px rgba(27,25,20,.07); transition:transform .25s ease, box-shadow .25s ease; }
.archive-card:hover { transform:translateY(-4px); box-shadow:0 20px 42px rgba(27,25,20,.12); }
.archive-media { position:relative; min-height:260px; display:flex; align-items:center; justify-content:center; padding:1.5rem; background:linear-gradient(145deg,#e7e3da,#f9f7f1); border-bottom:1px solid var(--sw-line); }
.archive-media.square { min-height:330px; }
.archive-media img { width:100%; max-height:290px; object-fit:contain; filter:drop-shadow(0 13px 13px rgba(0,0,0,.14)); }
.archive-media.square img { max-height:310px; }
.zoom-button { width:100%; padding:0; border:0; background:transparent; cursor:zoom-in; }
.zoom-badge { position:absolute; right:.75rem; bottom:.75rem; display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .55rem; border-radius:999px; color:#fff; background:rgba(18,18,18,.78); font-size:.75rem; font-weight:760; pointer-events:none; }
.archive-body { padding:1.45rem; }
.archive-body h3 { font-size:1.3rem; font-weight:850; letter-spacing:-.015em; }
.archive-body p:last-child { margin-bottom:0; }
.meta-list { display:flex; flex-wrap:wrap; gap:.45rem; padding:0; margin:0 0 1rem; list-style:none; }
.meta-list li { padding:.3rem .55rem; border-radius:999px; color:#4f4d48; background:#ede9df; font-size:.78rem; font-weight:700; }
.note-card { padding:clamp(1.5rem,4vw,2.5rem); border-left:5px solid var(--sw-red); border-radius:0 1rem 1rem 0; background:#fff; box-shadow:0 10px 25px rgba(0,0,0,.06); }

.cta-band { color:#fff; background:var(--sw-forest); border-radius:var(--sw-radius); padding:clamp(2rem,5vw,4.5rem); box-shadow:var(--sw-shadow); }
.cta-band h2 { max-width:17ch; font-size:clamp(2rem,4vw,3.6rem); font-weight:900; letter-spacing:-.04em; }

.modal-content { border:0; border-radius:1rem; overflow:hidden; background:#f4f1ea; }
.modal-image-wrap { min-height:320px; display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal-image-wrap img { max-height:78vh; object-fit:contain; }

.legal-copy { max-width:850px; }
.legal-copy h2 { margin-top:2.5rem; font-size:1.65rem; font-weight:850; }
.legal-copy h3 { margin-top:1.75rem; font-size:1.2rem; font-weight:800; }

.site-footer { margin-top:0; color:rgba(255,255,255,.72); background:#151515; }
.site-footer a { color:#fff; }
.footer-rule { border-color:rgba(255,255,255,.12); }

.back-to-top { position:fixed; right:1rem; bottom:1rem; z-index:1040; width:3rem; height:3rem; display:grid; place-items:center; border:0; border-radius:50%; color:#fff; background:var(--sw-red); box-shadow:0 10px 25px rgba(0,0,0,.24); opacity:0; visibility:hidden; transform:translateY(12px); transition:.2s ease; }
.back-to-top.visible { opacity:1; visibility:visible; transform:none; }
.back-to-top:focus-visible { outline:3px solid #fff; outline-offset:3px; }

@media (max-width: 991.98px) {
  .site-navbar .navbar-collapse { padding-block:1rem; }
  .hero-home::before { background:linear-gradient(180deg, rgba(11,11,11,.68), rgba(11,11,11,.97) 80%), url('../images/installation-schilderwald.webp') center / cover no-repeat; }
  .hero-content { padding-top:8rem; }
  .page-hero h1 { max-width:18ch; }
  .hero-object { min-height:280px; }
}
@media (max-width: 575.98px) {
  .site-wordmark { min-width: 10.5rem; padding-inline: .75rem; font-size: 1.1rem; }
  .site-wordmark-footer { min-width: 13rem; font-size: 1.35rem; }
  .timeline::before { left:.8rem; }
  .timeline-era { padding-left:2.7rem; }
  .timeline-dot { left:.14rem; width:1.35rem; height:1.35rem; border-width:.28rem; }
  .archive-media, .archive-media.square { min-height:230px; }
  .archive-media img, .archive-media.square img { max-height:230px; }
  .portal-card { min-height:440px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
@media (max-width: 575.98px) {
  .display-title { font-size: clamp(2rem, 10.2vw, 2.6rem); max-width: 100%; }
}