/* Content pages (news) on top of event.css */
.page { padding: 7rem 0 4rem; }
.page h1 { margin-bottom: 0.4rem; }
.page .eyebrow { margin-bottom: 0.5rem; }
.news-group { margin-top: 3rem; }
.news-group > h2 { font-size: 24px; margin-bottom: 1.2rem; }
.news-list { list-style: none; display: grid; gap: 1.2rem; }
.news-card { display: grid; grid-template-columns: 200px 1fr; gap: 1.4rem; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.news-card.no-image { grid-template-columns: 1fr; }
/* The picture of a teaser fills the height of its card (the width stays at 200 px); it is cropped, portraits show the top. */
.news-card > a:not(.edit-link) { display: block; position: relative; min-height: 134px; }
.news-card .frame { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.news-card .frame.narrow img { object-fit: cover; object-position: center 20%; }
.news-card { position: relative; }
.news-card .text { padding: 1.2rem 4.2rem 1.2rem 0; }
/* The circle with the plus in the top right corner: behind the teaser an article follows. */
.news-card .card-more { position: absolute; top: 1.1rem; right: 1.2rem; }
.news-card .card-more a, .prize-winners .plus { display: block; position: relative; width: 32px; height: 32px; border: 1.5px solid var(--c-rust); border-radius: 50%; transition: background 0.2s ease; }
.news-card .card-more span::before, .news-card .card-more span::after, .prize-winners .plus::before, .prize-winners .plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--c-rust); transform: translate(-50%, -50%); transition: background 0.2s ease; }
.news-card .card-more span::before, .prize-winners .plus::before { width: 14px; height: 1.5px; }
.news-card .card-more span::after, .prize-winners .plus::after { width: 1.5px; height: 14px; }
.news-card:hover .card-more a, .news-card .card-more a:hover, .prize-winners li:hover .plus { background: var(--c-rust); }
.news-card:hover .card-more span::before, .news-card:hover .card-more span::after, .news-card .card-more a:hover span::before, .news-card .card-more a:hover span::after, .prize-winners li:hover .plus::before, .prize-winners li:hover .plus::after { background: #FAF9F5; }
.news-card .edit-link { right: 3.8rem; }
.news-card.no-image .text { padding-left: 1.4rem; }
.news-card h3 a { text-decoration: none; }
.news-card h3 a:hover { text-decoration: underline; }
.news-card time, .post time { font-size: 13px; color: var(--text-secondary); display: block; margin-bottom: 0.3rem; }
.news-card p { margin: 0.5rem 0 0; color: var(--text-secondary); }
.teaser-box { border-left: 4px solid var(--c-rust); padding-left: 1.2rem; margin-top: 2rem; }
@media (max-width: 640px) { .news-card { grid-template-columns: 1fr; } .news-card .text { padding-right: 1.2rem; } .news-card .card-more { position: static; display: flex; justify-content: flex-end; margin-top: 0.8rem; } .news-card .edit-link { right: 0.7rem; } .news-card > a:not(.edit-link) { min-height: 0; } .news-card .frame { position: relative; inset: auto; aspect-ratio: 3 / 2; } .news-card .text { padding: 0 1.2rem 1.2rem; } .news-card.no-image .text { padding-top: 1.2rem; } }
.post .frame.cover { margin: 1.5rem 0; }
/* A single article uses the grid of the homepage and of "Über uns": the container of 1080 px, the text in a column of 820 px on its left edge,
   and it starts close below the navigation (there is no head with a picture above it). */
.page.article { padding-top: 3rem; }
.article .container.post { max-width: 1080px; }
.article .post > :is(h1, .eyebrow, time, .lead, .body, .post-intro, .frame.cover) { max-width: 820px; }
.post-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; margin: 1.5rem 0; }
.post-intro .lead { margin: 0; }
.post-intro .frame.cover { margin: 0; }
@media (max-width: 760px) { .post-intro { grid-template-columns: 1fr; gap: 1rem; } .post-intro .frame.cover { order: -1; } }
/* Cover pictures: one fixed landscape frame. Wide pictures fill it; portrait and square pictures take the full
   height on the left, the rest shows a grey of the palette (adapts to light and dark mode). */
.frame { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: color-mix(in srgb, var(--text-secondary) 28%, var(--bg)); }
/* Across the whole picture, so the dark gradient shows no edge on bright pictures. */
.frame .credit { right: 0; margin: 0; color: #FAF9F5; font-size: 10px; }
/* The small pictures of the list of posts leave less room for the credit. */
.news-card .frame .credit { padding: 1rem 0.7rem 0.45rem; }
.frame.r16x9 { aspect-ratio: 16 / 9; border-radius: 0; }
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame.narrow img { object-fit: contain; object-position: left center; }
.post .body blockquote, .prize-info .body blockquote { font-family: var(--font-serif); font-style: italic; font-size: 22px; line-height: 1.45; border-left: 3px solid var(--c-rust); padding-left: 1.25rem; margin: 1.8rem 0; }
.post .body blockquote p, .prize-info .body blockquote p { margin: 0 0 0.6em; }
.post .body blockquote p:last-child, .prize-info .body blockquote p:last-child { margin-bottom: 0; }
.post .body { margin-top: 1.5rem; line-height: 1.7; }
.post .body h2 { margin: 1.6em 0 0.5em; font-size: 26px; }
.post .body h3 { margin: 1.4em 0 0.4em; }
/* Impressum and Datenschutz: small, set in the sans like the text, so the long list of headings stays calm. */
.legal .body { font-size: 15.5px; }
.legal .body h3 { font-family: var(--font-sans, inherit); font-size: 16px; font-weight: 600; margin: 1.6em 0 0.3em; }
.post .body ul, .post .body ol { margin: 0 0 1em 1.4em; }
.post .body img { border-radius: var(--radius); }
.post .body a { color: var(--c-rust); }
.post .back { display: inline-block; margin-top: 2rem; }

/* Über uns */
.about .group-title { font-size: 17px; margin: 1.6rem 0 0.7rem; color: var(--text-secondary); font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; }
.about .container { max-width: 1080px; }
.about .container > p, .about .container > .lead { max-width: 820px; }
/* Deutschlandpreis: same grid as Über uns and Organisation (the single post pages keep their narrow column). */
.prize .container { max-width: 1080px; }
.prize-info > h2 { max-width: 820px; }
.prize-info .body { max-width: 820px; }
.prize-info .frame.cover { max-width: 820px; }
/* The years of the winners: the list of the homepage, but the whole row is the link, and the list closes the page with a line of its own. */
.about-section.prize-winners { padding-bottom: 0; }
.about-section.prize-winners > ol.items:last-child { border-bottom: 1px solid var(--field-border); }
.prize-winners ol.items li { position: relative; display: block; padding: 0; }
.prize-winners ol.items li > a:not(.edit-link) { display: grid; grid-template-columns: var(--mark) 1fr auto; column-gap: 0.8rem; align-items: center; padding: 1.3rem 0; color: inherit; text-decoration: none; }
.prize-winners ol.items h3 { margin: 0; }
.prize-winners .edit-link { top: 50%; right: 3.2rem; transform: translateY(-50%); }
.people { list-style: none; display: grid; gap: 0.8rem; }
.people.grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.people li { background: var(--surface); border-radius: var(--radius); padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: 0.25rem; font-size: 15px; overflow-wrap: anywhere; }
.people li .eyebrow { margin: 0; }
.people li a { color: var(--c-rust); }
.people .logo { height: 44px; width: auto; max-width: 160px; object-fit: contain; object-position: left; margin-bottom: 0.4rem; background: #fff; border-radius: 6px; padding: 4px; }
.people .contact { margin-top: 0.3rem; font-size: 14px; }
.wg { background: var(--surface); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin-bottom: 1rem; }
.wg h3 { margin-bottom: 0.6rem; }
.wg dl { display: grid; grid-template-columns: 7rem 1fr; gap: 0.4rem 1rem; font-size: 15px; }
.wg dt { font-weight: 600; }
.wg dd { margin: 0; }
@media (max-width: 560px) { .wg dl { grid-template-columns: 1fr; } .wg dd { margin-bottom: 0.5rem; } }

/* Deutschlandpreis */
.hero { position: relative; display: block; min-height: 0; background: #151515; color: #FAF9F5; overflow: hidden; }
/* With a picture there is no band behind it: picture and dark tile stand on the colour of the page (off-white or, in the dark mode, graphite). */
.hero:not(.plain) { background: none; }
/* Picture and text keep to the text column: the picture fills it from the left to the right edge, on a dark tile of
   the same shape. The tile shows through the picture from the left edge: along an S-curve the picture rises from 26 % to
   full at the end of the text, without a plateau or a visible edge, most of it within the first third.
   --gap is the margin of the container (event.css). */
.hero-box { --gap: 2rem; position: relative; min-height: 520px; display: flex; align-items: center;
  --fade: linear-gradient(90deg, rgb(0 0 0 / 0.26) 0, rgb(0 0 0 / 0.28) 3.4rem, rgb(0 0 0 / 0.33) 6.75rem, rgb(0 0 0 / 0.42) 10.1rem, rgb(0 0 0 / 0.54) 13.5rem, rgb(0 0 0 / 0.68) 16.9rem, rgb(0 0 0 / 0.82) 20.25rem, rgb(0 0 0 / 0.94) 23.6rem, #000 27rem); }
.hero-box > img { position: absolute; left: var(--gap); right: var(--gap); top: 0; width: calc(100% - 2 * var(--gap)); height: 100%; object-fit: cover; object-position: 55% 50%;
  border-radius: 0 0 var(--radius) var(--radius);
  -webkit-mask-image: var(--fade); mask-image: var(--fade); }
.hero:not(.plain) .hero-box::before { content: ''; position: absolute; top: 0; bottom: 0; left: var(--gap); right: var(--gap); background: #151515; border-radius: 0 0 var(--radius) var(--radius); }
.hero-text { position: relative; padding-top: 3rem; padding-bottom: 3rem; width: 100%; }
.hero-text > * { max-width: 24rem; }
/* On the picture the text keeps a margin from the edge of the tile. */
.hero:not(.plain) .hero-text { padding-left: 2.5rem; }
/* The fade ends at the text, so a soft shadow carries the last words over bright pictures; the overline is off-white, rust gets lost on a picture. */
.hero:not(.plain) :is(.eyebrow, h1, .hero-lead) { text-shadow: 0 0 1.5rem rgb(20 20 19 / 0.6), 0 1px 3px rgb(20 20 19 / 0.4); }
.hero:not(.plain) .eyebrow { color: #FAF9F5; }
.hero h1 { color: #FAF9F5; margin-bottom: 0.6rem; }
.hero .eyebrow { color: var(--c-rust); }
.hero-lead { font-size: 18px; margin: 0; color: #ECEAE3; }
/* The photo credit keeps to the left edge of the text. */
.hero-box > .credit { left: var(--gap); margin: 0; padding-left: 2.5rem; z-index: 1; }
/* Narrower screens have the smaller margin of the container (event.css). */
@media (max-width: 860px) { .hero-box { --gap: 1.1rem; } }
@media (max-width: 820px) {
  /* Phones: the picture hangs below the navigation as on the desktop, the text lies on it, across the whole width, so the
     picture has no side fade here. Below the text some of the picture stays free. */
  .hero-box { min-height: 0; align-items: flex-start; }
  .hero-text { padding-top: 2rem; padding-bottom: 0; }
  .hero:not(.plain) .hero-text { padding: 2rem 1rem 32vw; }
  .hero-box > .credit { padding-left: 1rem; }
  /* All heads with a picture are equally high (not depending on the number of lines of the headline); the lead stays out so the
     height holds. The head with buttons (homepage) is as high as its text and ends a little below the buttons. */
  .hero:not(.plain):not(.has-actions) .hero-box { min-height: min(82vw, 24rem); }
  /* A dark veil from the top over the picture where the text lies: along an S-curve it fades out towards the bottom, so the picture stays visible there. */
  .hero:not(.plain) .hero-box::after { content: ''; position: absolute; top: 0; bottom: 0; left: var(--gap); right: var(--gap); border-radius: 0 0 var(--radius) var(--radius); pointer-events: none;
    background: linear-gradient(180deg, rgb(20 20 19 / 0.6) 0, rgb(20 20 19 / 0.58) 12%, rgb(20 20 19 / 0.52) 25%, rgb(20 20 19 / 0.42) 38%, rgb(20 20 19 / 0.3) 50%, rgb(20 20 19 / 0.18) 62%, rgb(20 20 19 / 0.08) 75%, rgb(20 20 19 / 0.02) 88%, rgb(20 20 19 / 0) 100%); }
  .hero:not(.plain) .hero-text { z-index: 1; }
  .hero:not(.plain):not(.has-actions) .hero-lead { display: none; }
  .hero.has-actions:not(.plain) .hero-text { padding-bottom: 1.6rem; }
  .hero-box > img { -webkit-mask-image: none; mask-image: none; }
}
.hero + .page, .prize.page { padding-top: 3rem; }
.hero + .home .section:first-child { border-top: 0; }
/* The Fachtagung page: its sections follow the head directly. */
.hero + .section { border-top: 0; }
/* A head without a picture: the same dark head as a slim band of text. */
.hero.plain .hero-box { min-height: 300px; }
.hero.plain .hero-text > * { max-width: 40rem; }
@media (max-width: 820px) { .hero.plain .hero-box { min-height: 0; } .hero.plain .hero-text { padding-bottom: 2.2rem; } }
.page-actions { margin: 0 0 1.2rem; }
.prize-info { margin-bottom: 2.4rem; }
.prize-info h2 { margin-bottom: 0.8rem; }
.prize-info .body, .prize-info .cover { margin-top: 0.4rem; }
.prize-info .body a, .post .body a { color: var(--c-rust); }
.news-group .group-title { font-size: 17px; margin: 1.6rem 0 0.7rem; color: var(--text-secondary); font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; }

/* Startseite */
a.lead-link { color: var(--c-rust); text-decoration: none; font-weight: 500; }
a.lead-link:hover { text-decoration: underline; }
:root { --cta-bg: var(--c-graphit); --cta-text: var(--c-offwhite); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cta-bg: #FAF9F5; --cta-text: #141413; } }
:root[data-theme="dark"] { --cta-bg: #FAF9F5; --cta-text: #141413; }
.home { padding-top: 0; }
.home h1 em { font-style: italic; color: var(--c-rust); }
.home-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; padding-top: 4.5rem; padding-bottom: 4rem; }
.home-hero h1 { font-weight: 300; margin-bottom: 1.25rem; }
.home-hero .lead { margin-bottom: 2rem; }
.home-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.home-hero img { width: 100%; height: auto; border-radius: 16px; display: block; }
.home .section h2 { margin-bottom: 1rem; }
.home .section .lead { margin-bottom: 2.2rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-top: 1.5rem; }
.two-col img { width: 100%; height: auto; border-radius: 16px; display: block; }
.two-col p { line-height: 1.8; }
.home blockquote { font-family: var(--font-serif); font-style: italic; font-size: 20px; line-height: 1.5; border-left: 3px solid var(--c-rust); padding-left: 1.25rem; margin: 1.5rem 0; }
.tri-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.tri-card { background: var(--surface); border-radius: 16px; padding: 1.75rem; border-top: 3px solid var(--tri); --tri: var(--c-blue); }
.tri-card.green { --tri: var(--c-green); }
.tri-card.orange { --tri: var(--c-orange); }
.tri-card .tri-eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tri); margin-bottom: 0.7rem; }
.tri-card h3 { font-family: var(--font-sans); font-size: 18px; font-weight: 600; letter-spacing: 0; margin-bottom: 0.6rem; }
.tri-card p:last-child { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tri-card { --tri: #5B8FE0; } :root:not([data-theme="light"]) .tri-card.green { --tri: #3FB8C7; } :root:not([data-theme="light"]) .tri-card.orange { --tri: #FF7A47; } }
:root[data-theme="dark"] .tri-card { --tri: #5B8FE0; } :root[data-theme="dark"] .tri-card.green { --tri: #3FB8C7; } :root[data-theme="dark"] .tri-card.orange { --tri: #FF7A47; }
.bridge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.bridge-grid figure { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 4; margin: 0; }
.bridge-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bridge-grid figcaption { position: absolute; inset: auto 0 0 0; background: linear-gradient(transparent, rgba(20, 20, 19, 0.75)); color: #FAF9F5; font-size: 13px; font-weight: 500; padding: 1.5rem 1.25rem 1rem; }
.teasers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.teaser-card { background: var(--surface); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.teaser-card .teaser-text { padding: 1.4rem 1.6rem 1.6rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.teaser-card .eyebrow { margin: 0; font-size: 12px; color: var(--c-rust); }
.teaser-card h3 a { text-decoration: none; }
.teaser-card h3 a:hover { text-decoration: underline; }
.teaser-card p { color: var(--text-secondary); font-size: 15px; margin: 0; }
.teaser-card .teaser-foot { margin-top: auto; padding-top: 1rem; min-height: 4.2rem; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; flex-wrap: wrap; }
.teaser-card .more { color: var(--c-rust); text-decoration: none; font-weight: 500; font-size: 14px; }
.teaser-card .all { margin-left: auto; color: var(--text-secondary); text-decoration: none; font-size: 14px; text-align: right; }
.frame.cal-frame { background: var(--c-graphit); color: var(--c-offwhite); container-type: size; border-radius: 0; }
/* The calendar picture of a date: sizes follow the width of the card (cqw). */
.cal { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 9cqw; padding: 4cqw 6cqw; box-sizing: border-box; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .frame.cal-frame { background: #0b0b0a; } }
:root[data-theme="dark"] .frame.cal-frame { background: #0b0b0a; }
.teaser-card > a:has(.cal) { display: block; text-decoration: none; color: inherit; }
.cal .cal-year { margin: 0; flex: 0 0 auto; font-family: var(--font-serif); font-size: 12cqw; line-height: 1; letter-spacing: -0.02em; color: #FAF9F5; font-variant-numeric: tabular-nums; }
.cal-month { flex: 0 0 auto; width: 46cqw; }
.cal .cal-name { margin: 0 0 2.2cqw; text-align: center; font-size: 4.6cqw; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-rust); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 0.4cqw; }
.cal-grid span { display: block; text-align: center; font-size: 3.4cqw; line-height: 5.8cqw; height: 5.8cqw; color: #FAF9F5; font-variant-numeric: tabular-nums; }
.cal-grid .cal-head { color: #8a887f; font-size: 3cqw; }
.cal-grid .we { color: #8a887f; }
.cal-grid .on { background: var(--c-rust); color: #fff; font-weight: 600; }
.cal-grid .solo { border-radius: 99px; }
.cal-grid .run-start { border-radius: 99px 0 0 99px; box-shadow: 1px 0 0 var(--c-rust); }
.cal-grid .run-end { border-radius: 0 99px 99px 0; }
.cal-grid .run { border-radius: 0; box-shadow: 1px 0 0 var(--c-rust); }
.teaser-card.event .all { color: #D9D6CC; }
.teaser-card.event { background: var(--c-graphit); color: var(--c-offwhite); }
.teaser-card.event p { color: #D9D6CC; }
.cta-band { background: var(--cta-bg); color: var(--cta-text); border-radius: 20px; padding: 3rem; text-align: center; }
.cta-band h2 { color: inherit; font-weight: 300; font-size: 28px; }
.cta-band p { opacity: 0.8; max-width: 480px; margin: 0 auto 1.75rem; }
@media (max-width: 760px) { .home-hero, .two-col, .tri-grid, .bridge-grid { grid-template-columns: 1fr; } .home-hero { padding-top: 2.5rem; } .cta-band { padding: 2rem 1.4rem; } }

/* Termine */
.dates { list-style: none; display: grid; gap: 1rem; margin-top: 2rem; }
.dates li { display: grid; grid-template-columns: 84px 1fr; gap: 1.4rem; background: var(--surface); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.dates .when { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-right: 1px solid var(--field-border); padding-right: 1.2rem; }
.dates .d { font-family: var(--font-serif); font-size: 34px; line-height: 1; }
.dates .m { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-rust); margin-top: 0.3rem; }
.dates h2 { font-size: 20px; margin-bottom: 0.2rem; }
.dates .meta { color: var(--text-secondary); font-size: 14px; margin-bottom: 0.5rem; }
.dates .what p:last-child { margin-bottom: 0; }
.dates a.more { color: var(--c-rust); text-decoration: none; font-weight: 500; font-size: 14px; }

/* Navigation on small screens: burger button and full-screen menu */
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--text);
  flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.nav-toggle:focus-visible { outline: 2px solid var(--c-rust); outline-offset: 2px; }
.site-menu { position: fixed; inset: 68px 0 0 0; z-index: 99; background: var(--bg); padding: 1.5rem 1.4rem 2.5rem; overflow-y: auto; display: flex; flex-direction: column; gap: 2rem; }
.site-menu[hidden] { display: none; }
.site-menu ul { list-style: none; display: flex; flex-direction: column; }
.site-menu li a { display: block; padding: 1rem 0; border-bottom: 1px solid var(--border); font-family: var(--font-serif); font-size: 28px; text-decoration: none; letter-spacing: -0.3px; }
.site-menu li a[aria-current="page"] { color: var(--c-rust); }
html.menu-open { overflow: hidden; }
/* Seven links plus the brand no longer fit side by side, so the burger menu serves every screen size (without JavaScript the links stay visible). */
.has-menu .site-links { display: none; }
.nav-toggle:not([hidden]) { display: flex; }
.site-links a { white-space: nowrap; }
/* On wide screens the menu content lines up with the 1080 px container. */
@media (min-width: 861px) { .site-menu { padding-left: max(2rem, calc((100% - 1080px) / 2 + 2rem)); padding-right: max(2rem, calc((100% - 1080px) / 2 + 2rem)); } }

.people .faculty { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--field-border); display: flex; flex-direction: column; gap: 0.2rem; font-size: 14px; }
.people .faculty-name { font-weight: 500; }
.people .contact-person-entry { display: flex; flex-direction: column; margin-top: 0.3rem; }
.people .contact-person-entry .contact { margin-top: 0; }
.people .faculty .muted { font-weight: 400; }

/* Edit mode: pencils for logged-in people only */
.edit-link { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 5; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--c-rust); color: #FAF9F5; text-decoration: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); opacity: 0.92; }
.edit-link:hover, .edit-link:focus-visible { opacity: 1; transform: scale(1.08); outline: 2px solid var(--text); outline-offset: 2px; }
h1 .edit-link, h2 .edit-link { position: static; vertical-align: middle; margin-left: 0.6rem; width: 30px; height: 30px; }
.edit-add { display: inline-block; vertical-align: middle; margin-left: 0.8rem; font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--c-rust);
  border: 1.5px dashed var(--c-rust); border-radius: 99px; padding: 3px 12px; text-decoration: none; }
.edit-add:hover, .edit-add:focus-visible { background: var(--c-rust); color: #FAF9F5; border-style: solid; }
.people li, .news-card, .teaser-card, .dates li, .wg, .prize-info, .post { position: relative; }
.prize-info .edit-link { top: 0.2rem; }
.edit-flash { position: sticky; top: 68px; z-index: 90; max-width: 1080px; margin: 0 auto; padding: 0 2rem; }
.edit-flash .message { margin: 0.8rem 0 0; padding: 0.7rem 1rem; border-radius: var(--radius); background: #e3f2f1; color: #0d5b59; font-size: 14px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.edit-flash .message.error { background: #fdf0ec; color: #8a2a12; }
.edit-flash .message.hidden { display: none; }
.edit-pill { position: fixed; right: 16px; bottom: 16px; z-index: 120; display: inline-flex; align-items: center; gap: 8px; background: var(--c-graphit); color: var(--c-offwhite); font-size: 13px; font-weight: 500;
  padding: 9px 16px; border-radius: 99px; text-decoration: none; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
.edit-pill:hover { background: var(--c-rust); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .edit-pill { background: var(--c-offwhite); color: var(--c-graphit); } :root:not([data-theme="light"]) .edit-pill:hover { background: var(--c-rust); color: #FAF9F5; } }
:root[data-theme="dark"] .edit-pill { background: var(--c-offwhite); color: var(--c-graphit); } :root[data-theme="dark"] .edit-pill:hover { background: var(--c-rust); color: #FAF9F5; }
@media print { .edit-link, .edit-add, .edit-pill, .edit-flash { display: none !important; } }
/* Wins over the link colours inside cards (.people li a, .teaser-card ... a) */
html body a.edit-link { color: #FAF9F5; text-decoration: none; opacity: 0.92; }
html body a.edit-link:hover, html body a.edit-link:focus-visible { opacity: 1; color: #FAF9F5; }
html body a.edit-add { color: var(--c-rust); text-decoration: none; }
html body a.edit-add:hover, html body a.edit-add:focus-visible { color: #FAF9F5; }

/* Kontakt */
.contact h1 { margin-bottom: 2.4rem; font-size: clamp(26px, 5.4vw, 40px); }
.contact-block { padding: 2rem 0; border-top: 1px solid var(--field-border); }
.contact-block .lead { max-width: 820px; margin-bottom: 1.2rem; color: var(--text); }
.contact-person { display: flex; flex-direction: column; gap: 0.2rem; font-size: 17px; margin: 0; }
.contact-person strong { font-weight: 600; }
.contact-person a { color: var(--c-rust); }
.contact-block { position: relative; }

/* The edit pill for logged-in people sits on the left so that it never covers the navigation */
.edit-pill { right: auto; left: 16px; }

/* News overview: one list under the headline; the small label of other categories */
.news-list { margin-top: 2.2rem; }
.news-card .tag { margin: 0 0 0.3rem; color: var(--c-rust); }

/* Über uns: sections with intro, divider lines, and the bottom navigation with the arrow to the top */
.about-section { border-top: 1px solid var(--field-border); padding: 4rem 0; }
.about-section:first-of-type { margin-top: 3rem; border-top: 0; }
.about-text .about-section:first-of-type, .hero + .about .about-section:first-of-type { margin-top: 0; padding-top: 0; }
.section-intro { position: relative; margin-bottom: 2.2rem; max-width: 820px; }
.section-intro .eyebrow { margin-bottom: 0.6rem; }
.section-intro h2 { margin-bottom: 0.8rem; }
.section-intro .lead { margin-bottom: 0; }
.section-intro .edit-link { top: 0; }
.section-tools { margin: 0.8rem 0 0; }
.section-tools .edit-add { margin-left: 0; }
.section-nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 80; max-width: calc(100% - 20px); }
.section-nav-inner { display: flex; align-items: center; gap: 2px; padding: 5px; background: rgba(250, 249, 245, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--field-border); border-radius: 99px; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.16); }
.section-nav-links { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.section-nav-links::-webkit-scrollbar { display: none; }
.section-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 99px; font-size: 14px; font-weight: 500;
  color: var(--text); text-decoration: none; white-space: nowrap; }
.section-nav a.active { background: var(--c-rust); color: #FAF9F5; }
.section-nav a:focus-visible { outline: 2px solid var(--c-rust); outline-offset: 1px; }
.section-nav .short { display: none; }
.section-nav .sep { width: 1px; height: 24px; background: var(--field-border); margin: 0 4px; flex: none; }
.section-nav .to-top-link { width: 40px; padding: 0; color: var(--c-rust); flex: none; }
.section-nav .to-top-link svg { width: 30px; height: 30px; fill: currentColor; display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .section-nav-inner { background: rgba(32, 31, 29, 0.94); } :root:not([data-theme="light"]) .section-nav a { color: #FAF9F5; } :root:not([data-theme="light"]) .section-nav a.active { color: #FAF9F5; } :root:not([data-theme="light"]) .section-nav .to-top-link { color: #F1825F; } }
:root[data-theme="dark"] .section-nav-inner { background: rgba(32, 31, 29, 0.94); } :root[data-theme="dark"] .section-nav a { color: #FAF9F5; } :root[data-theme="dark"] .section-nav a.active { color: #FAF9F5; } :root[data-theme="dark"] .section-nav .to-top-link { color: #F1825F; }
@media (max-width: 560px) {
  .section-nav .full { display: none; }
  .section-nav .short { display: inline; }
  .section-nav a { padding: 0 9px; font-size: 12.5px; }
  .section-nav .sep { margin: 0 2px; }
}
.has-section-nav footer { padding-bottom: 6rem; }
.has-section-nav .edit-pill { bottom: 78px; }
@media print { .section-nav { display: none; } }

/* Mitglieder: hint, search field and the accordion by federal state */
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.section-hint { max-width: 62ch; margin: 1rem 0 0; color: var(--text-secondary); font-size: 15px; line-height: 1.6; }
.member-search { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1.2rem; margin: 0 0 1.6rem; }
.member-search input { flex: 1 1 320px; max-width: 520px; font: inherit; font-size: 16px; padding: 0.8rem 1.1rem; border: 1.5px solid var(--field-border); border-radius: var(--radius); background: var(--field-bg); color: var(--text); }
.member-search input:focus { outline: 2px solid var(--c-rust); outline-offset: 1px; }
.member-count { margin: 0; color: var(--text-secondary); font-size: 14px; }
.member-empty { margin: 0 0 1.4rem; color: var(--text-secondary); }
.states { border-bottom: 0; }
details.state { border-top: 1px solid var(--field-border); }
details.state > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: 1.05rem 0; font-size: 18px; font-weight: 500; }
details.state > summary::-webkit-details-marker { display: none; }
details.state > summary:focus-visible { outline: 2px solid var(--c-rust); outline-offset: 2px; border-radius: 4px; }
details.state > summary .state-count { margin-left: auto; color: var(--text-secondary); font-size: 14px; font-weight: 400; font-variant-numeric: tabular-nums; }
details.state > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: -4px 0.3rem 0 0.2rem; border-right: 2px solid var(--c-rust); border-bottom: 2px solid var(--c-rust); transform: rotate(45deg); transition: transform 0.2s ease; }
details.state[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
details.state[open] > summary .state-name { color: var(--c-rust); }
details.state > .people { padding: 0.4rem 0 2.2rem; }

/* Über uns: the long texts */
/* On the homepage the same texts follow the hero; the last one ends on the line of the next area. */
.home-texts { padding: 3rem 0 0; }
.home-texts .about-section:last-of-type { padding-bottom: 4rem; }
.open { display: inline-block; padding: 0 0.35em; border-radius: 4px; background: var(--c-rust); color: #FAF9F5; font-size: 0.85em; font-weight: 600; font-style: normal; line-height: 1.5; vertical-align: baseline; cursor: help; }
.about-text .section-intro { max-width: 820px; }
.about-text .frame.cover { max-width: 820px; margin: 1.5rem 0 2.2rem; }
.about-text .section-intro h2 { font-size: clamp(28px, 4vw, 40px); }
.prose { max-width: 820px; }
.prose p { line-height: 1.75; }
.aside { margin-top: 1.6rem; max-width: 820px; color: var(--text-secondary); }
.about-text .tri-grid { margin: 2rem 0 0; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.about-text .tri-card p:last-child { font-size: 15px; }
/* Texts of "Über uns": prose from the editor, and one list design for all lists (numbers, years, names). */
.prose h2, .prose h3 { font-size: 24px; margin: 2.4rem 0 0.8rem; }
.prose h3:first-child, .prose h2:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1.2em 1.4em; line-height: 1.7; }
.prose li { margin-bottom: 0.5em; }
.prose blockquote { margin: 1.8rem 0; font-family: var(--font-serif); font-style: italic; font-size: 24px; line-height: 1.4; border-left: 3px solid var(--c-rust); padding-left: 1.3rem; }
.prose blockquote p { margin: 0; }
.prose a { color: var(--c-rust); }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); }
.prose.after { margin-top: 1.8rem; }
.prose.after p:not(:first-child) { color: var(--text-secondary); }
ol.items { list-style: none; counter-reset: n; max-width: 820px; margin: 2rem 0 0; border-bottom: 1px solid var(--field-border); --mark: 3.2rem; }
ol.items.marked { --mark: 6rem; }
ol.items.marked.long { --mark: 11rem; }
ol.items li { counter-increment: n; display: grid; grid-template-columns: var(--mark) 1fr; column-gap: 0.8rem; padding: 1.3rem 0; border-top: 1px solid var(--field-border); }
ol.items:not(.marked) li::before { content: counter(n, decimal-leading-zero); font-family: var(--font-serif); font-size: 22px; line-height: 1.25; color: var(--c-rust); font-variant-numeric: tabular-nums; }
ol.items .mark { font-family: var(--font-serif); font-size: 22px; line-height: 1.25; color: var(--c-rust); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
ol.items .mark.long { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.6; padding-top: 0.35rem; }
ol.items h3 { font-size: 21px; margin-bottom: 0.3rem; }
ol.items p { margin: 0; color: var(--text-secondary); line-height: 1.65; }
ol.items li.plain p { color: var(--text); }
/* A list that ends its section needs no closing line of its own: the next section brings one. With a closing text after it, the line stays. */
.about-section > ol.items:last-child { border-bottom: 0; }
.about-section .items-intro { margin-top: 0; }
.stage-figure { margin: 1.6rem 0 0; }
/* In the texts of Über uns the animation needs air above and below. */
.about-section .stage-figure { margin: 2.2rem 0 3rem; }
.stage-figure .stage { position: relative; border: 1px solid var(--field-border); border-radius: 16px; overflow: hidden; aspect-ratio: 1 / 1; background: var(--bg); }
@media (min-width: 700px) { .stage-figure .stage { aspect-ratio: 16 / 9; } }
.stage-figure iframe { width: 100%; height: 100%; border: 0; display: block; }
.stage-figure figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 1.5rem; margin-top: 0.8rem; font-size: 14px; color: var(--text-secondary); }
.stage-figure figcaption a { color: var(--c-rust); }
ul.link-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
ul.link-cards a { display: flex; flex-direction: column; gap: 0.3rem; height: 100%; padding: 1.3rem 1.4rem; background: var(--surface); border-radius: var(--radius); text-decoration: none; color: inherit; border: 1px solid transparent; }
ul.link-cards a:hover, ul.link-cards a:focus-visible { border-color: var(--c-rust); }
ul.link-cards strong { font-size: 18px; font-weight: 600; }
ul.link-cards span { color: var(--text-secondary); font-size: 14px; }
@media (max-width: 640px) {
  ol.items.marked, ol.items.marked.long { --mark: 4.6rem; }
  ol.items:not(.marked) { --mark: 2.6rem; }
}
.more-link { margin-top: 2rem; }

/* Kontakt: each person in a card with the photo on the left */
.contact-list { display: grid; gap: 1.2rem; }
.contact-block.has-photo, .contact-list .contact-block { border-top: 0; padding: 0; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.contact-block.has-photo { display: grid; grid-template-columns: 200px 1fr; gap: 1.6rem; align-items: center; }
.contact-block.has-photo img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.contact-text { padding: 1.6rem 1.8rem; }
.contact-block:not(.has-photo) .contact-text { padding: 1.6rem 1.8rem; }
@media (max-width: 600px) { .contact-block.has-photo { grid-template-columns: 1fr; gap: 0; } .contact-block.has-photo img { max-height: 320px; } .contact-block.has-photo .contact-text { padding: 1.2rem 1.4rem; } }

/* A centred quote between two texts (kind "Zitat zentriert" of a text) */
.about-section.quote { text-align: center; padding: clamp(3.5rem, 8vw, 6rem) 0; }
.about-text .about-section.quote:first-of-type { padding-top: clamp(1rem, 3vw, 2rem); }
.about-section.quote blockquote { font-family: var(--font-serif); font-style: normal; font-size: clamp(26px, 4vw, 40px); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; max-width: 820px; margin: 0 auto; border: 0; padding: 0; }
.about-section.quote blockquote::before { content: "“"; display: block; color: var(--c-rust); font-size: 1.6em; line-height: 0.8; }
.about-section.quote .source { margin: 1.2rem auto 0; font-size: 16px; color: var(--text-secondary); max-width: 820px; }
.about-section.quote .edit-link { position: static; vertical-align: middle; margin-left: 0.6rem; width: 30px; height: 30px; }

/* Über uns: plus sign top right in the link cards */
ul.link-cards a { position: relative; }
ul.link-cards a::after { content: "+"; position: absolute; top: 0.9rem; right: 1.1rem; font-size: 26px; line-height: 1; font-weight: 300; color: var(--c-rust); }

/* Two link styles. Links that lead on ("Weiterlesen →", "Im Vollbild öffnen →") are rust, never underlined, with an arrow behind the name; this covers arrow links, contact links and downloads (buttons and the footer keep their own). */
.post .back, .post .body a.back, .contact-person a, .people li a, .stage-figure figcaption a, .jubilee .stage-caption a,
.post .body a.download, .prize-info .body a.download, .prose a.download, .jubilee .body a.download { color: var(--c-rust); text-decoration: none; }
.contact-person a:hover, .people li a:hover,
.post .body a.download:hover, .prize-info .body a.download:hover, .prose a.download:hover, .jubilee .body a.download:hover { text-decoration: none; opacity: 0.8; }
.post .back, .stage-figure figcaption a, .jubilee .stage-caption a { font-weight: 500; }
/* Download link: arrow pointing down onto a line, drawn in the colour of the text */
.post .body a.download, .prize-info .body a.download, .prose a.download, .jubilee .body a.download { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; }
.post .body a.download::before, .prize-info .body a.download::before, .prose a.download::before, .jubilee .body a.download::before { content: ""; flex: none; width: 1.15em; height: 1.15em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M5 21h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M5 21h14'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Mitglieder: the logo sits in a white band at the top of the card, centred both ways (as the picture of a teaser), twice as high as before. */
.people.members li { padding: 0 0 1rem; gap: 0.25rem; }
.people.members li:not(:has(> .logo)) { padding-top: 1rem; }
.people.members li > :not(.logo):not(.edit-link) { margin-inline: 1.2rem; }
.people.members .logo { display: block; box-sizing: border-box; width: 100%; max-width: none; height: 88px; margin: 0 0 0.6rem; padding: 10px 16px; border-radius: var(--radius) var(--radius) 0 0; background: #fff; object-fit: contain; object-position: center; }

/* Links set in the texts of the editor are arrow links too: rust, not underlined, no hover effect, an arrow behind the name.
   Email and phone links stay plain; downloads keep their arrow pointing down (above). */
:is(.prose, .post .body, .prize-info .body, .jubilee .body) a:not(.download):not(.btn):not(.back) { color: var(--c-rust); text-decoration: none; }
:is(.prose, .post .body, .prize-info .body, .jubilee .body) a:not(.download):not(.btn):not(.back):not([href^="mailto:"]):not([href^="tel:"])::after { content: "\00a0→"; }
/* Links that stand alone in a paragraph sit next to each other, with a gap, and wrap on narrow screens (several links in a row: one link per paragraph). */
:is(.prose, .post .body, .prize-info .body, .jubilee .body) p:has(> a:only-child:not(.download)) { display: inline-block; margin: 0.4rem 2.2rem 0.4rem 0; }

/* Words in a headline set in italics or in rust (backend: headline field) */
h1 em, h2 em, h3 em { font-style: italic; }
.rust { color: var(--c-rust); }

/* Pictures placed in a text stand on their own line, with room before and a clear gap to the text that follows. */
:is(.prose, .post .body, .prize-info .body, .jubilee .body) img { display: block; margin: 1.2rem 0 2.2rem; }

/* Map of the federal states (Ländervertreter): three layers - areas (react to the pointer), fixed rust outlines, names */
.state-map { position: relative; max-width: 760px; margin: 2.2rem auto 0; container-type: inline-size; }
.state-stage { position: relative; }
.state-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.state-map .map-fills path { fill: var(--surface); stroke: none; transition: fill 0.25s ease, opacity 0.7s ease var(--d, 0s); }
.state-map .map-fills path.has-rep { cursor: pointer; }
.state-map .map-fills path.has-rep:hover, .state-map .map-fills path.hover { fill: color-mix(in srgb, var(--c-rust) 22%, var(--surface)); }
.state-map .map-fills path.active { fill: color-mix(in srgb, var(--c-rust) 32%, var(--surface)); }
.state-map .map-lines path { fill: none; stroke: var(--c-rust); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.state-map.armed .map-lines path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.state-map.armed .map-fills path { opacity: 0; }
.state-map.drawn .map-fills path { opacity: 1; }
.state-names { list-style: none; margin: 0; padding: 0; pointer-events: none; }
.state-names li { position: absolute; transform: translate(-50%, -0.96em); font-size: 12px; font-size: calc(12 / 591.5 * 100cqw); line-height: 1.2; text-align: center; white-space: nowrap; transition: opacity 0.6s ease var(--d, 0s); }
.state-names button, .state-names .plain { display: block; padding: 0; border: 0; background: none; font: inherit; font-weight: 500; line-height: inherit; color: var(--text); text-align: center; pointer-events: auto; }
.state-names .plain { pointer-events: none; }
.state-names button { cursor: pointer; }
.state-names button:hover { color: var(--c-rust); }
.state-names button:focus-visible { outline: 2px solid var(--c-rust); outline-offset: 3px; border-radius: 4px; }
.state-names .short { display: none; }
.state-map.armed .state-names li { opacity: 0; }
.state-map.drawn .state-names li { opacity: 1; }
.state-map-note { margin: 1.4rem 0 0; text-align: center; font-size: 13.5px; color: var(--text-secondary); }
.state-map-note span { display: block; margin-top: 0.2rem; font-size: 12px; }
.state-map-note a { text-decoration: underline; text-underline-offset: 0.15em; }
.has-map [data-state-reps] { display: none; }
@media (max-width: 640px) {
  .state-map .map-lines path { stroke-width: 2.4; }
  .state-names li { font-size: 11px; transform: translate(-50%, calc(-50% - 0.35em + var(--half, 0cqw))); line-height: 1; }
  .state-names button { padding: 6px; font-weight: 600; letter-spacing: 0.02em; }
  .state-names .full { display: none; }
  .state-names .short { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .state-map .map-fills path, .state-names li { transition: none; } }
@media print { .state-map { display: none; } .has-map [data-state-reps] { display: grid; } }

/* The card of a representative: light in the dark mode too, so it stands out from the dark page. */
.rep-card { --bg: #FAF9F5; --text: #141413; --text-secondary: #68665C; --surface: #ECEAE3; --field-border: #D9D6CC; color-scheme: light; margin: auto; border: 0; border-radius: 16px; padding: 2.2rem 2rem 1.9rem; width: min(440px, calc(100% - 2rem)); max-height: calc(100vh - 3rem); overflow: auto; background: var(--bg); color: var(--text); box-shadow: 0 18px 60px rgba(20, 20, 19, 0.35); }
.rep-card::backdrop { background: rgba(20, 20, 19, 0.55); }
.rep-card[open] { animation: rep-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes rep-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rep-card[open] { animation: none; } }
.rep-close { position: absolute; top: 0.7rem; right: 0.7rem; width: 40px; height: 40px; border: 1.5px solid var(--c-rust); border-radius: 50%; background: var(--bg); color: var(--c-rust); font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 0 3px; transition: background 0.2s ease, color 0.2s ease; z-index: 2; }
.rep-close:hover, .rep-close:focus-visible { background: var(--c-rust); color: #FAF9F5; outline: none; }
.rep-body li { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; padding: 0; background: none; font-size: 15px; line-height: 1.5; }
.rep-body li + li { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--field-border); }
.rep-body a { color: var(--c-rust); text-decoration: none; }
.rep-body .eyebrow { margin: 0 2.8rem 0 0; font-size: 12px; color: var(--c-rust); }
.rep-body strong { font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 1.2; letter-spacing: -0.3px; margin-right: 2.4rem; }
.rep-body .edit-link { right: 3.6rem; }
.rep-body .rep-photo { order: -1; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 25%; border-radius: var(--radius); margin-bottom: 0.9rem; background: var(--surface); }
.people .rep-photo { display: block; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: center 25%; margin-bottom: 0.5rem; }

/* Page not found */
.not-found { padding-top: 6rem; padding-bottom: 8rem; }