:root { --bg: #fff; --soft: #f5f6f3; --ink: #17211d; --muted: #5c6661; --rule: #e2e5e0; --brand: #0f5f4a; --btn: #0f5f4a; --btn-hover: #0b4a3a; --btn-ink: #fff;
  --tint: #e8f2ee; --warn: #9a3b1e; --shadow: 0 1px 2px rgba(23, 33, 29, .05), 0 8px 28px rgba(23, 33, 29, .07);
  --serif: "Newsreader", Georgia, serif; --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif }
@media (prefers-color-scheme: dark) { :root { --bg: #111513; --soft: #171c19; --ink: #e9ece9; --muted: #9ba49f; --rule: #2a322e; --brand: #62c7aa; --btn: #1a7a61; --btn-hover: #1f8c70;
  --tint: #17271f; --warn: #f0a488; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 28px rgba(0, 0, 0, .35); color-scheme: dark } }
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16.5px; line-height: 1.55; min-height: 100vh; display: flex; flex-direction: column }
main { flex: 1 }
a { color: var(--brand); text-underline-offset: 2px }
img { max-width: 100%; display: block }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.12; letter-spacing: -.012em; margin: 0; text-wrap: balance }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.2rem); overflow-wrap: anywhere }
h2 { font-size: 1.65rem }
h3 { font-size: 1.18rem; letter-spacing: 0 }
p { margin: 0 }
ul { list-style: none; margin: 0; padding: 0 }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px }
.wrap { max-width: 1120px; margin-inline: auto; padding-inline: 24px }
.col { max-width: 808px; margin-inline: auto; padding-inline: 24px }
.band { padding: 56px 0 }
.band.soft { background: var(--soft); border-block: 1px solid var(--rule) }
.band.tight { padding: 36px 0 }
.muted, .src, .when { color: var(--muted) }
.src, .when { font-size: 13.5px }
.lead { font-size: 1.2rem; line-height: 1.45; color: var(--muted); margin-top: 14px; max-width: 56ch }
.label { font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px }
.fine { font-size: 13.5px; color: var(--muted) }
.more { margin-top: 18px; font-weight: 600; font-size: 15.5px }
.more a { text-decoration: none } .more a:hover { text-decoration: underline }
.note2 { color: var(--muted); max-width: 62ch }

/* Header, town tabs, footer. */
.top { border-bottom: 1px solid var(--rule); background: var(--bg) }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px }
.top.bare { border: 0 } .top.bare .wrap { justify-content: center; min-height: 72px }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 700; font-size: 21px; letter-spacing: -.01em; color: var(--ink); text-decoration: none }
.mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: #0f5f4a; color: #fbfaf6; font-family: var(--serif); font-weight: 700; font-size: 21px; line-height: 1; padding-bottom: 1px; flex: none }
.top nav { display: flex; align-items: center; gap: 22px; font-size: 15px; font-weight: 500 }
.top nav a:not(.button) { color: var(--muted); text-decoration: none } .top nav a:not(.button):hover, .top nav a[aria-current="page"]:not(.button) { color: var(--ink) }
.tabsbar { border-bottom: 1px solid var(--rule); background: var(--bg) }
.tabsbar .wrap { display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; font-size: 15px; font-weight: 500 }
.tabsbar a { color: var(--muted); text-decoration: none; padding: 13px 0 11px; border-bottom: 2px solid transparent; white-space: nowrap }
.tabsbar a:hover { color: var(--ink) } .tabsbar a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand) }
.foot { border-top: 1px solid var(--rule); background: var(--soft); margin-top: 72px; padding: 40px 0 28px; font-size: 14.5px }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 28px 40px }
.foot .about p { color: var(--muted); max-width: 40ch; margin-top: 10px }
.foot h2 { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px }
.foot li { margin-bottom: 6px } .foot li a { color: var(--ink); text-decoration: none } .foot li a:hover { text-decoration: underline }
.foot .legal { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 18px; color: var(--muted); font-size: 13.5px }
.foot.bare { margin-top: 48px; padding: 20px 0; background: none } .foot.bare .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; font-size: 13.5px } .foot.bare a { color: var(--muted) }

/* Buttons and forms. */
.button, .signup button, .consent button { font: inherit; font-size: 16.5px; font-weight: 600; line-height: 1.2; padding: 14px 22px; border: 1px solid var(--btn); border-radius: 8px; background: var(--btn); color: var(--btn-ink); cursor: pointer; text-decoration: none; display: inline-block; white-space: nowrap }
.button:hover, .signup button:hover, .consent button:hover { background: var(--btn-hover); border-color: var(--btn-hover) }
.button.small { font-size: 14.5px; padding: 9px 14px }
.signup { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; max-width: 540px }
.signup label { flex: 1 1 230px; min-width: 0 }
.signup label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
.signup input[type="email"], .signup input[name="stadt"] { width: 100%; font: inherit; font-size: 16.5px; line-height: 1.2; padding: 14px 15px; border: 1px solid #b9c0ba; border-radius: 8px; background: var(--bg); color: var(--ink) }
.signup input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--tint) }
.signup .hp { position: absolute; left: -9999px; width: 1px; height: 1px }
.signup .fine { flex-basis: 100%; margin-top: 2px }
.hero .fine { margin-top: 12px }
.chips, .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px }
.chips a, .pills a { font-size: 14.5px; padding: 7px 13px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--ink); text-decoration: none }
.chips a:hover, .pills a:hover { border-color: var(--brand) }
.pills a[aria-current="page"] { background: var(--btn); color: var(--btn-ink); border-color: var(--btn) }
a.on::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); margin-right: 7px; vertical-align: 2px }
.card { background: var(--bg); border: 1px solid var(--rule); border-radius: 12px }

/* Home. */
.hero { background: var(--soft); border-bottom: 1px solid var(--rule); padding: 64px 0 0; overflow: hidden }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: start }
.hero .pitch { padding: 28px 0 72px }
.hero.plain { padding-bottom: 56px } .hero.plain .wrap { display: block }
.preview { background: var(--bg); border: 1px solid var(--rule); border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: var(--shadow); padding: 26px 28px 0; max-height: 500px; overflow: hidden; position: relative; font-size: 15px; color: var(--ink); text-decoration: none; display: block }
.preview::after { content: ""; position: absolute; inset: auto 0 0; height: 90px; background: linear-gradient(to bottom, transparent, var(--bg)) }
.preview .head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); margin-bottom: 16px }
.preview .brand { font-size: 18px } .preview .mark { width: 24px; height: 24px; font-size: 17px; border-radius: 6px }
.preview .hello { font-family: var(--serif); font-size: 18px; line-height: 1.4 }
.preview h3 { margin: 18px 0 8px }
.preview li { margin-bottom: 9px }
.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px }
.features svg { width: 30px; height: 30px; color: var(--brand); margin-bottom: 14px; display: block }
.features p { color: var(--muted); font-size: 15.5px; margin-top: 6px }
.sechead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 22px }
.sechead .more { margin: 0 }
.editions { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px }
.edcard { display: block; color: var(--ink); text-decoration: none; overflow: hidden }
.edcard:hover { border-color: var(--brand) }
.editions.single { grid-template-columns: minmax(0, 1fr) } .single .edcard { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) } .single .edcard img { height: 100%; aspect-ratio: auto; min-height: 240px } .single .edcard .body { padding: 28px 32px; align-self: center }
.edcard img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover }
.edcard .body { padding: 18px 20px 20px }
.edcard h3 { font-size: 1.4rem } .edcard h3 span { font-family: var(--sans); font-weight: 400; letter-spacing: 0 }
.edcard ul { margin-top: 10px; display: grid; gap: 4px; font-size: 15.5px } .edcard li::before { content: "·"; margin-right: 8px; color: var(--muted) }
.edcard .go { display: inline-block; margin-top: 14px; font-weight: 600; font-size: 15px; color: var(--brand) }

/* Town pages. */
.crumbs { font-size: 13.5px; color: var(--muted); margin-bottom: 14px } .crumbs a { color: var(--muted); text-decoration: none } .crumbs a:hover { text-decoration: underline } .crumbs span { margin: 0 6px }
.pagehead { padding-top: 36px }
.pagehead .lead { margin-top: 10px }
.pagehead + .col { margin-top: 36px }
.photo { margin: 24px 0 0; position: relative }
.photo img { width: 100%; aspect-ratio: 5 / 2; object-fit: cover; border-radius: 12px }
.photo figcaption, .credit { font-size: 11.5px; color: var(--muted); margin-top: 6px } .photo figcaption a, .credit a { color: inherit; text-decoration: none }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 24px 0 0; overflow: hidden }
.photo + .stats { margin: -44px 20px 0; position: relative; box-shadow: var(--shadow) }
.photo + .stats + .credit { text-align: right }
.stats a { display: block; padding: 14px 18px 13px; color: var(--ink); text-decoration: none; border-left: 1px solid var(--rule); height: 100% } .stats li:first-child a { border-left: 0 }
.stats a:hover { background: var(--soft) }
.stats b { display: block; font-family: var(--serif); font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums } .stats span { font-size: 13px; color: var(--muted) }
.subbox { background: var(--tint); border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent); border-radius: 12px; padding: 26px 28px; margin-top: 28px }
.subbox .signup { margin-top: 16px; max-width: none }
.block { margin-top: 52px }
.block > h2 { margin-bottom: 4px }
.block > h2 + .muted { margin-bottom: 14px }
.block > h2 small { font-family: var(--sans); font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-left: 6px }
.rows > li { padding: 15px 0; border-bottom: 1px solid var(--rule) } .rows > li:first-child { border-top: 1px solid var(--rule) }
.block > h2 + .rows, .block > .label + .rows { margin-top: 14px }
.rows .src { display: block; margin-top: 3px }
.event { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 14px }
.event .time { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--brand); padding-top: 1px }
.event .title { font-weight: 600; color: var(--ink); text-decoration: none } .event .title:hover { text-decoration: underline }
.event .src a { color: var(--muted) }
.tag { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 14px }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.place { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15.5px }
.place .facts { color: var(--muted); flex: 1 }
.place a { font-weight: 600; font-size: 14.5px; text-decoration: none } .place a:hover { text-decoration: underline }
.cols { columns: 4 170px; column-gap: 28px; font-size: 15.5px; margin-top: 14px } .cols li { break-inside: avoid; padding: 3px 0 } .cols a { color: var(--ink); text-decoration: none } .cols a:hover { text-decoration: underline }
.prose h2 { font-size: 1.2rem; margin: 26px 0 6px; letter-spacing: 0 } .prose p { margin: 0 0 10px; max-width: 70ch }

/* Sign-up page of a town, and the pages after it. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh }
.split .side { padding: 40px clamp(24px, 6vw, 88px) 32px; display: flex; flex-direction: column; justify-content: center; gap: 0 }
.split .side > .brand { margin-bottom: 44px }
.split h1 { font-size: clamp(2rem, 4vw, 2.9rem) }
.split .signup { flex-direction: column; max-width: 440px } .split .signup label { flex: none } .split .signup .fine { flex-basis: auto } .split .signup button { width: 100% }
.split .shot { position: sticky; top: 0; height: 100vh; margin: 0 }
.split .shot img { width: 100%; height: 100%; object-fit: cover }
.split .shot figcaption { position: absolute; right: 10px; bottom: 8px; font-size: 11px; color: #fff; text-shadow: 0 0 4px rgba(0, 0, 0, .7) } .split .shot figcaption a { color: inherit; text-decoration: none }
.split .sample { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--rule); max-width: 520px; font-size: 15px }
.split .sample li { margin-top: 10px }
.split .links { margin-top: 36px; display: flex; gap: 18px; font-size: 13px } .split .links a { color: var(--muted) }
.split.nophoto { display: block; min-height: 0; background: var(--soft) } .split.nophoto .side { max-width: 620px; margin-inline: auto; min-height: 100vh; justify-content: flex-start; padding-top: 64px }
.center { text-align: center; padding: 72px 0 8px }
.center .lead { margin-inline: auto }
.center .signup { margin-inline: auto; justify-content: center }
.center .tick { width: 52px; height: 52px; border-radius: 50%; background: var(--tint); color: var(--brand); display: grid; place-items: center; margin: 0 auto 20px } .center .tick svg { width: 26px; height: 26px }

/* An edition on the site. */
.letter { background: var(--bg); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); padding: 34px 40px 30px; max-width: 680px; margin-inline: auto }
.letter .head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-bottom: 18px; border-bottom: 1px solid var(--rule) }
.letter .hello { font-family: var(--serif); font-size: 1.28rem; line-height: 1.42; margin-top: 22px }
.letter section { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--rule) }
.letter h2 { font-size: 1.5rem; margin-bottom: 14px }
.letter h2 + .muted { margin: -8px 0 14px }
.letter h3 { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px }
.letter ul { display: grid; gap: 14px } .letter ul.tight { gap: 7px }
.letter .events li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px } .emoji { font-size: 20px; line-height: 1.35 }
.wx { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px } .wx div { background: var(--soft); border-radius: 10px; padding: 14px 16px; font-size: 15px } .wx b { font-family: var(--serif); font-size: 1.15rem }
.letter footer { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--muted) }
.notice { max-width: 680px; margin: 0 auto 16px; background: var(--tint); border-radius: 10px; padding: 12px 16px; font-size: 14.5px }
.under { max-width: 680px; margin: 22px auto 0 }
.archive { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; font-size: 14px } .archive > span { color: var(--muted); margin-right: 4px }

/* Werkstatt. */
.scroll { overflow-x: auto } table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums }
td, th { text-align: left; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--rule); white-space: nowrap }
th { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600 }
.flag { color: var(--warn); font-size: 14px; margin-top: 6px }

.consent { position: fixed; left: 12px; right: 12px; bottom: 12px; max-width: 520px; margin-inline: auto; background: var(--bg); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow); padding: 16px 18px; font-size: 14px; z-index: 10 }
.consent p { margin: 0 0 12px } .consent p:last-child { margin: 0; display: flex; gap: 10px; flex-wrap: wrap }
.consent button { font-size: 14.5px; padding: 9px 16px }
.consent button.quiet { background: transparent; color: var(--ink); border-color: #b9c0ba }

@media (max-width: 900px) {
  .hero { padding-top: 40px } .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 0 } .hero .pitch { padding: 0 0 40px }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .single .edcard { display: block } .single .edcard img { min-height: 0; aspect-ratio: 16 / 7 } .single .edcard .body { padding: 18px 20px 20px }
  .cards { grid-template-columns: minmax(0, 1fr) } .cards.two { grid-template-columns: minmax(0, 1fr) }
  .split { display: block; min-height: 0 } .split .shot { position: relative; height: 210px } .split .side { display: block; padding: 28px 24px 32px } .split .side > .brand { margin-bottom: 26px }
  .split { display: flex; flex-direction: column-reverse }
  .split.nophoto .side { min-height: 0; padding-top: 32px }
}
@media (max-width: 600px) {
  body { font-size: 16px }
  .wrap, .col { padding-inline: 16px }
  .band { padding: 40px 0 }
  .top .wrap { min-height: 56px } .brand { font-size: 19px } .top nav { gap: 14px } .top nav a.plain { display: none }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) } .stats li:nth-child(3) a { border-left: 0 } .stats li:nth-child(n+3) a { border-top: 1px solid var(--rule) }
  .photo img { aspect-ratio: 16 / 9 } .photo + .stats { margin: -28px 10px 0 }
  .subbox { padding: 20px 18px }
  .event { grid-template-columns: 58px minmax(0, 1fr); gap: 10px }
  .letter { padding: 22px 18px; border-radius: 12px }
  .foot .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) } .foot .about { grid-column: 1 / -1 }
  .signup button { flex: 1 1 100% }
  .preview { padding: 20px 18px 0; max-height: 380px }
  .center { padding-top: 44px }
}
.preview .head .src { white-space: nowrap }
.facts { display: grid; grid-template-columns: minmax(110px, 190px) minmax(0, 1fr); margin: 24px 0 0; font-size: 15.5px }
.facts dt, .facts dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--rule) } .facts dt { color: var(--muted); padding-right: 16px }
.facts dt:first-of-type, .facts dt:first-of-type + dd { border-top: 1px solid var(--rule) }