/*
 * Raum für uns | Typografie und Gestaltung
 *
 * Eine ruhige, lesbare Hierarchie statt künstlicher Versalien, Laufweiten
 * und wiederholter Schmucklinien. Diese Ebene liegt bewusst zuletzt:
 * site.css -> identity.css -> Fachseiten -> design-system.css.
 *
 * Rollen:
 *   --type-context : Einordnung und Abschnittsbezeichnungen
 *   --type-caption : Kategorien und sachliche Zusatzangaben
 *   --type-prose   : Fließtext
 *   --type-display : redaktionelle Überschriften
 *
 * Alle Änderungen betreffen allein das Aussehen; kein Routing, kein JS.
 */
:root {
  --bg: #f1ece4;
  --paper: #fcf9f3;
  --paper-2: #eae4dc;
  --ink: #233a32;
  --green: #29453b;
  --rust: #a45d48;
  --rust-dark: #884733;
  --line: rgba(35, 58, 50, .20);
  --muted: #53655c;
  --type-context: 400 19px/1.35 var(--serif);
  --type-caption: 550 13px/1.5 var(--sans);
  --type-prose: 400 16px/1.72 var(--sans);
}

body { background: var(--bg); color: var(--ink); }

/* Einordnungen werden gesetzt statt aus dem Text herausgeschrien.
 * Keine Versalien, keine Spreizung, kein künstlich vorgestellter Strich. */
.eyebrow,
.kicker,
.block .mini,
.post-category,
.mode-kicker,
.status-label,
.profile-facts strong,
.trust-points h3,
.brand-text small,
.panel-top,
.admin-table th {
  text-transform: none;
  letter-spacing: normal;
}
.eyebrow,
.kicker {
  display: block;
  width: fit-content;
  max-width: 100%;
  font: var(--type-context);
  font-style: italic;
  font-weight: 400;
  color: var(--rust-dark);
  margin: 0;
}
.eyebrow::before { content: none; display: none; }

/* Das leise Seitenetikett ist anders als die redaktionelle Abschnittsmarke. */
.page-head .eyebrow,
.form-wrap .eyebrow,
.auth-form .eyebrow,
.community-intro .kicker,
.article-meta .kicker,
.member-tile .kicker,
.membership-copy .kicker,
.admin-worklist .kicker,
.paper-panel .kicker,
.status-tile .kicker,
.article-meta .mode-kicker {
  font: var(--type-caption);
  font-style: normal;
  color: var(--rust-dark);
}

/* Die beiden Motive des Screenshots: klares Lesen statt Buchstabenabständen. */
.hero-copy > .eyebrow {
  font: italic 400 clamp(18px, 1.55vw, 21px)/1.35 var(--serif);
  color: var(--green);
  padding: 0;
}
.section-head > .kicker {
  position: relative;
  font: italic 400 clamp(18px, 1.65vw, 22px)/1.35 var(--serif);
  color: var(--green);
  border-top: 1px solid var(--line);
  padding: 17px 10px 0 0;
  width: min(100%, 225px);
}

/* Alle öffentlichen Sektionen verwenden denselben Typ der Einordnung. */
.topics-copy > .eyebrow,
.community-copy > .eyebrow,
.trust-copy > .eyebrow,
.closing .eyebrow {
  font: var(--type-context);
  font-style: italic;
}
.trust-copy > .eyebrow { color: #f4dfbf; }

/* Navigation und Marke: keine zweite, überinszenierte Mikrotypografie. */
.topbar { background: rgba(249, 246, 239, .98); box-shadow: none; }
.topbar::before { content: none; display: none; }
.nav { min-height: 82px; }
.brand-text { letter-spacing: -.06em; }
.brand-text small {
  font: 500 11px/1.3 var(--sans);
  color: var(--muted);
  margin-top: 6px;
}
.navigation { font-size: 13px; font-weight: 540; letter-spacing: normal; }
.navigation > a:not(.nav-cta) { padding-top: 28px; padding-bottom: 26px; }
.navigation > a:not(.nav-cta)::after { bottom: 17px; }

/* Ruhe und Kontrast statt dekorativer Kreise und Farbbänder. */
.hero { background: #f4f0e9; }
.hero-copy { padding-top: 90px; padding-bottom: 80px; }
.hero-copy::after,
.hero-copy::before,
.hero-panel::before,
.block.rust::after,
.page-head::after,
.community-intro::after,
.article-item:first-child::after,
.member-tile::before,
.form-wrap::before,
.statement-mark::after,
.site-footer::before { content: none; display: none; }
.hero-copy h1 { margin-top: 28px; letter-spacing: -.065em; line-height: 1.0; }
.hero-copy p { color: var(--muted); line-height: 1.7; }
.hero-panel { background: #264338; }
.hero-panel::after { border-color: rgba(255, 249, 235, .22); }
.panel-top {
  font: 500 12px/1.5 var(--sans);
  color: #efe7d7;
}
.panel-top span:last-child { color: #d6dfd2; }
.panel-bottom { font-size: 13px; }

.section { padding-top: clamp(76px, 8vw, 110px); padding-bottom: clamp(78px, 8vw, 112px); }
.section-head { grid-template-columns: minmax(170px, .32fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 76px); }
.section-head h2, .topics-copy h2, .community-copy h2, .trust-copy h2, .closing h2 {
  letter-spacing: -.055em;
  line-height: 1.08;
}
.section-head p, .topics-copy p, .community-copy p { line-height: 1.72; }
.manifesto { margin-top: clamp(42px, 5vw, 66px); gap: 14px; }
.block { border-color: var(--line); padding: 32px; }
.block.paper { background: #fcf9f3; }
.block.sage { background: #e3e8df; }
.block.lilac { background: #efe6df; }
.block.rust { background: #dfc2b3; color: var(--ink); border: 1px solid var(--line); }
.block.rust h3 { color: var(--ink); }
.block.rust p { color: #40574c; }
.block .mini,
.block.rust .mini {
  font: var(--type-caption);
  color: var(--rust-dark);
}
.block .mini { margin-bottom: 12px; }
.block h3 { margin-top: 7px; letter-spacing: -.04em; }
.block .bar, .block.rust .bar {
  color: #516259;
  border-color: var(--line);
  font-size: 13px;
  font-weight: 400;
}
.statement-band { background: #e9dbc0; }
.statement-mark {
  border: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
  height: auto;
  width: 110px;
  min-height: 52px;
  transform: none;
  font: italic 400 18px/1.3 var(--serif);
  letter-spacing: normal;
  text-transform: none;
}
.topics { background: #eae4dc; }
.topics-copy h2 { margin-top: 20px; }
.topic-link { grid-template-columns: 1fr auto; gap: 20px; }
.topic-link .label { letter-spacing: -.045em; }
.community { background: #f8f5ef; }
.community-copy h2 { margin-top: 18px; }
.sample-label {
  background: transparent;
  border: 0;
  padding: 0 0 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 450;
  white-space: normal;
}
.post-category,
.mode-kicker,
.status-label,
.profile-facts strong,
.trust-points h3 {
  font: var(--type-caption);
  color: var(--rust-dark);
}
.post-top { margin-bottom: 20px; }
.post { border-color: var(--line); }
.post.wide { background: #e3e8df; }
.post.wide:hover { background: #dde5d9; }
.post:not(.wide):hover { background: #f2ece4; }
.trust { background: #264338; }
.trust-points h3 { color: #efdeb9; padding-top: 3px; }
.membership-panel { box-shadow: none; }
.membership-price { background: #e8d2a5; }
.closing { padding-top: 93px; padding-bottom: 98px; }

/* Auch die eigentliche Anwendung nutzt das gleiche typografische System. */
.page-head { padding-bottom: 36px; min-height: 0; }
.page-head h1 { margin-top: 18px; letter-spacing: -.06em; }
.page-head p { line-height: 1.65; }
.community-intro { background: #e5e8df; padding: 33px 36px; }
.community-intro p { letter-spacing: -.035em; }
.article-meta .kicker { margin: 0 0 5px; }
.article-item:first-child { background: #e5e8df; border-left: 2px solid #a45d48; }
.article-item h2 { letter-spacing: -.045em; }
.member-tile { background: var(--paper); }
.member-tile:nth-child(3n+2) { background: #e9eae1; }
.member-tile:nth-child(3n+3) { background: #f1e9e0; }
.member-tile .kicker { padding: 0; }
.member-tile h2 { margin-top: 22px; }
.paper-panel { background: var(--paper); }
.form-field label, .form-label { letter-spacing: normal; font-size: 13px; }
.form-field input, .form-field textarea, .form-field select { background: #fffdf9; }
.admin-table th {
  font: 600 13px/1.4 var(--sans);
  color: var(--green);
  background: #e9eae1;
}
.site-footer { background: #213c32; }

/* Schaltflächen bleiben Bedienflächen, keine animierten Magazin-Kacheln. */
.button { letter-spacing: normal; font-size: 13px; font-weight: 650; }
.button:hover, .page-head > .button:hover { transform: none; }
.button.primary { background: #264338; }
.button.primary:hover { background: #3c5a4c; }
.button.outline { border-color: var(--green); }
.button.outline:hover { color: var(--paper); background: var(--green); }
.nav-cta { font-weight: 550; }

/* Der Installer trägt denselben Ton, ohne die Formularbedienung zu verlieren. */
.install-wrap { color: var(--ink); }
.install-kicker {
  font: italic 400 19px/1.35 var(--serif);
  text-transform: none;
  letter-spacing: normal;
  color: var(--rust-dark);
}
.install-check > span:first-child,
.install-number { letter-spacing: normal; text-transform: none; }
.install-number { font: italic 400 20px/1.4 var(--serif); }
.install-wrap h1 { letter-spacing: -.055em; }
.install-section h2 { letter-spacing: -.035em; }
.install-field span, .install-field label { letter-spacing: normal; }
.install-check-item { border-radius: 3px; }
.install-check > span:first-child { font-weight: 550; }

@media (max-width: 1000px) {
  .section-head { grid-template-columns: 1fr; gap: 23px; }
  .section-head > .kicker { width: min(100%, 270px); }
}
@media (max-width: 620px) {
  .hero-copy > .eyebrow { font-size: 18px; }
  .hero-copy h1 { margin-top: 23px; }
  .section { padding-top: 77px; padding-bottom: 82px; }
  .section-head > .kicker { padding-top: 11px; }
  .block { padding: 25px 23px; }
  .community-intro { padding: 27px 22px; }
  .sample-label { padding-top: 12px; }
  .statement-mark { display: none; }
  .page-head { padding-bottom: 29px; }
  .install-kicker { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .post, .member-tile, .article-item, .topic-link { transition: none; }
}

/* Wohnregion: kein künstlicher Versalsatz, kein unnötig breites Zahlenfeld. */
.form-field.region-field input { max-width: 13rem; font-variant-numeric: tabular-nums; }
.form-field.region-field .helper { max-width: 65ch; line-height: 1.6; }

/* 2026-11 | Einheitliches Interface: Layout und Bedienung. Diese Datei wird
 * nach den Fachseiten geladen. Öffentliches Editorial bleibt getrennt von
 * kompakten Aufgaben und von Listen-/Entscheidungsansichten.
 * Die früheren übergroßen .page-head-, .form-wrap- und .member-tile-Regeln
 * wurden aus identity.css entfernt. Hier liegen ihre gemeinsamen Regeln. */
:root {
  --ui-space-1: 8px;
  --ui-space-2: 16px;
  --ui-space-3: 24px;
  --ui-space-4: 36px;
  --ui-border: 1px solid var(--line);
}
.site-main .content-page.page-shell {
  padding-top: clamp(30px, 4vw, 54px);
  padding-bottom: clamp(64px, 6vw, 92px);
}
.content-page .page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  min-height: 0;
  padding: 0 0 22px;
  margin: 0 0 28px;
  position: relative;
  border-bottom: var(--ui-border);
}
.content-page .page-head::before,
.content-page .page-head::after { content: none; display: none; }
.content-page .page-head h1 {
  font: 400 clamp(31px, 3.25vw, 48px)/1.13 var(--serif);
  letter-spacing: -.045em;
  max-width: 19ch;
  margin: 9px 0 8px;
}
.content-page .page-head p { max-width: 70ch; font: 400 15px/1.6 var(--sans); color: var(--muted); }
.content-page .page-head > .button,
.content-page .page-head > a {
  position: static;
  align-self: flex-end;
  white-space: normal;
  transform: none;
}

/* Aufgabenansicht: eine Handlung, lesbare Einführung, keine Hero-Fläche. */
.task-page {
  width: min(100% - 34px, 760px);
  margin: 0 auto;
  padding: clamp(28px, 4.5vw, 53px) 0 clamp(56px, 6vw, 90px);
  min-width: 0;
}
.task-page--wide { width: min(100% - 34px, 1136px); }
.task-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  margin: 0 0 25px;
  padding-bottom: 22px;
  border-bottom: var(--ui-border);
}
.task-header > div { min-width: 0; }
.task-eyebrow {
  margin: 0 0 8px;
  font: 600 13px/1.5 var(--sans);
  color: var(--rust-dark);
  text-transform: none;
  letter-spacing: normal;
}
.task-header h1 {
  font: 400 clamp(32px, 3.35vw, 47px)/1.11 var(--serif);
  letter-spacing: -.045em;
  margin: 0 0 9px;
}
.task-intro { color: var(--muted); max-width: 72ch; font: 400 15px/1.65 var(--sans); margin: 0; }
.task-header .button { flex-shrink: 0; }
.task-page > .paper-panel, .task-form.paper-panel { max-width: 100%; }
.task-page .paper-panel,
.task-page .settings-panel,
.task-page .account-control { padding: clamp(19px, 2.7vw, 29px); }
.task-page .paper-panel h2,
.task-page .admin-section h2 { font: 400 clamp(24px, 2.4vw, 32px)/1.18 var(--serif); letter-spacing: -.03em; }
.task-page .admin-section { margin-top: 31px; }
.task-page .admin-section > h2 { margin: 0 0 6px; }
.task-page .admin-section > p { margin: 0 0 14px; }
.task-page .form-grid, .auth-form-long .form-grid { gap: 16px; }
.form-field label, .form-label { font: 650 14px/1.45 var(--sans); letter-spacing: 0; }
.form-field .helper, .helper { line-height: 1.55; }
.form-field :is(input,textarea,select) { font-size: 16px; }
.form-field :is(input,select) { min-height: 48px; }
.form-field textarea { min-height: 118px; }
.button { min-height: 44px; }
:where(a,button,input,select,textarea,summary):focus-visible {
  outline: 3px solid var(--rust-dark);
  outline-offset: 3px;
}

/* Anmeldefamilie: gleiche Spaltenbreite für Anmeldung, Antrag und Passwort. */
.auth-access-wrap { max-width: 650px; padding-top: clamp(26px, 4vw, 48px); }
.auth-access-panel { padding: clamp(22px, 3.9vw, 37px); }
.auth-form-long { display: grid; gap: 15px; }
.auth-form-long .form-grid { min-width: 0; }
.auth-form-long :is(input,textarea) { width: 100%; }
.auth-form-long .button.primary { width: 100%; justify-content: center; }
.auth-inline-helper { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 18px; }
.auth-access-panel .consent-panel { padding: 18px; background: rgba(42,68,54,.045); border: var(--ui-border); }
.auth-access-panel .consent-panel h2 { font: 400 24px/1.25 var(--serif); margin: 0 0 8px; }
.auth-access-panel .consent-panel p { font: 400 14px/1.6 var(--sans); margin: 0 0 15px; }
.auth-access-panel .consent-line { display: flex; align-items: flex-start; gap: 12px; margin-top: 13px; line-height: 1.55; }
.auth-access-panel .consent-line input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; }

/* Mitgliederkarten: vergleichbare Informationen statt großformatiger Deko. */
.member-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.member-tile,
.member-tile:nth-child(3n+2),
.member-tile:nth-child(3n+3) {
  background: var(--paper);
  border: var(--ui-border);
  padding: clamp(20px, 2vw, 26px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  transform: none;
  transition: border-color .15s ease;
}
.member-tile::before { content: none; display: none; }
.member-tile:hover { background: var(--paper); transform: none; border-color: var(--green); }
.member-tile .kicker { padding: 0; margin: 0; font: 550 12px/1.5 var(--sans); color: var(--muted); }
.member-tile h2 { font: 400 clamp(23px, 2.3vw, 29px)/1.2 var(--serif); letter-spacing: -.035em; margin: 10px 0 9px; max-width: none; overflow-wrap: anywhere; }
.member-tile p { font: 400 14px/1.6 var(--sans); color: var(--muted); max-width: none; margin: 0 0 7px; overflow-wrap: anywhere; }
.member-tile .button { align-self: flex-start; margin: 0; min-height: 44px; }
.member-tile--circle { border-top: 2px solid var(--green); }

/* Inhalt ohne visuelles Übergewicht des ersten Eintrags. */
.article-item:first-child { background: transparent; border-left: 0; }
.article-item:first-child::after { content: none; }
.article-item:first-child h2 { font-size: clamp(27px, 2.55vw, 36px); line-height: 1.15; max-width: 30ch; }
.article-item h2 { font-size: clamp(25px, 2.45vw, 34px); }

/* Einstellungen: Freigaben und Daten getrennt; destruktive Schritte bewusst. */
.settings-layout { grid-template-columns: minmax(0, 1.4fr) minmax(260px, .75fr); gap: 19px; align-items: start; }
.settings-side { gap: 15px; }
.account-control h2 { font-size: 25px !important; margin: 0 0 8px; }
.account-control .text-button { display: inline-block; margin: 12px 0 0; }
.account-inline-action { margin-top: 18px; border-top: var(--ui-border); padding-top: 17px; }
.account-inline-action .form-grid { gap: 10px; }
.danger-area { border-top: 2px solid var(--rust-dark); }
.danger-area .button.primary { background: var(--rust-dark); }
.danger-area .button.primary:hover { background: #703a29; }
.quiet-disclosure { border: var(--ui-border); background: var(--paper); padding: 0 17px; margin: 16px 0 0; min-width: 0; }
.quiet-disclosure > summary { min-height: 47px; cursor: pointer; font: 650 14px/1.5 var(--sans); padding: 12px 0; color: var(--green); }
.quiet-disclosure[open] > summary { border-bottom: var(--ui-border); margin-bottom: 16px; }
.quiet-disclosure > .form-grid { padding-bottom: 18px; }
.quiet-disclosure .checkline { margin: 12px 0; }
.manage-disclosure { max-width: 880px; margin-top: 26px; }
.manage-disclosure > .helper { display: block; margin: 0 0 16px; }
.manage-disclosure .form-grid { max-width: 700px; }

/* Verwaltung: lesbare Status und kompakte, vergleichbare Vorgänge. */
.task-page .admin-quicklinks { padding: 0 0 16px; gap: 8px; }
.task-page .admin-quicklinks .button { min-height: 44px; }
.task-page .admin-worklist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.task-page .admin-worklist .paper-panel { padding: 21px; }
.task-page .admin-worklist .paper-panel h3 { font: 400 25px/1.2 var(--serif); margin: 7px 0; overflow-wrap: anywhere; }
.task-page .admin-worklist .form-grid { margin-top: 14px; padding-top: 14px; gap: 12px; }
.task-page .admin-worklist .kicker { font: 600 12px/1.5 var(--sans); font-style: normal; }
.task-page .admin-worklist .choice-fieldset { min-width: 0; }
.task-page .admin-worklist .decision-choices { grid-template-columns: 1fr; }
.task-page .admin-advanced { margin-top: 12px; }
.task-page .admin-advanced .form-grid { border-top: 0; margin-top: 0; padding-top: 0; }
.task-page .voucher-editorial-panel { margin-top: 18px; }
.task-page .voucher-panel-head h2, .task-page .voucher-records h2 { font: 400 29px/1.2 var(--serif); letter-spacing: -.035em; }
.task-page .voucher-panel-head .eyebrow { font: 550 12px/1.5 var(--sans); }
.task-page .voucher-records { margin-top: 28px; }

/* Technische Einrichtung und Sicherheit als nachvollziehbare Schritte. */
.settings-accordion { border: var(--ui-border); padding: 0 17px 16px; margin: 10px 0; min-width: 0; }
.settings-accordion > summary { cursor: pointer; font: 650 15px/1.5 var(--sans); padding: 14px 0; min-height: 48px; }
.settings-accordion > .form-field { margin: 14px 0; }
.settings-accordion > p { overflow-wrap: anywhere; line-height: 1.65; }
.readiness-list { padding: 0; margin: 13px 0 18px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px 19px; list-style: none; }
.readiness-item { display: flex; gap: 10px; align-items: flex-start; font: 400 14px/1.6 var(--sans); }
.readiness-item > span { flex: none; font-weight: 750; }
.readiness-item.is-ready > span { color: var(--green); }
.readiness-item.is-missing > span { color: var(--rust-dark); }
.security-steps { list-style: none; margin: 0; padding: 0; counter-reset: steps; display: grid; gap: 12px; }
.security-steps > li { background: var(--paper); border: var(--ui-border); padding: 20px; counter-increment: steps; }
.security-steps > li > strong::before { content: counter(steps, decimal-leading-zero) '  '; color: var(--rust-dark); font: 600 13px/1.5 var(--sans); }
.security-steps > li > strong { font: 650 16px/1.5 var(--sans); }
.security-steps > li > p { margin: 8px 0 13px; color: var(--muted); line-height: 1.6; }
.secret-key { padding: 15px; background: #f5f0e7; border: var(--ui-border); }
.secret-key code { display: block; overflow-wrap: anywhere; word-break: break-word; font: 600 15px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .08em; user-select: all; }
.task-form { max-width: 760px; }

@media (max-width: 900px) {
 .settings-layout { grid-template-columns: 1fr; }
 .task-page .admin-worklist { grid-template-columns: 1fr; }
 .readiness-list { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
 .site-main .content-page.page-shell { padding-top: 23px; }
 .content-page .page-head { margin-bottom: 20px; padding-bottom: 17px; }
 .content-page .page-head h1 { font-size: clamp(29px, 8vw, 38px); }
 .task-page { width: min(100% - 28px, 760px); padding-top: 22px; }
 .task-page--wide { width: min(100% - 28px, 1136px); }
 .task-header { margin-bottom: 19px; padding-bottom: 17px; }
 .task-header h1 { font-size: clamp(29px, 8vw, 37px); }
 .member-grid { grid-template-columns: 1fr; }
 .member-tile .button { width: 100%; justify-content: center; }
 .auth-access-panel { padding: 20px; }
 .auth-access-header h1 { font-size: clamp(33px, 9vw, 43px); }
 .task-page .paper-panel { padding: 18px; }
 .task-page .admin-worklist .paper-panel { padding: 17px; }
}
@media (prefers-reduced-motion: reduce) {
 .member-tile { transition: none; }
}

/* Ergänzende Arbeitsflächen und Mobilbreiten */
.task-composer { max-width: 920px; margin: 0 auto; }
.task-composer .form-grid { gap: 0; }
.task-composer .form-section:first-child { padding-top: 0; }
.task-page .voucher-editorial-panel {
  background: var(--paper);
  color: var(--ink);
  border: var(--ui-border);
  padding: clamp(19px, 3vw, 32px);
}
.task-page .voucher-editorial-panel .form-field label,
.task-page .voucher-editorial-panel .checkline { color: var(--ink); }
.task-page .voucher-editorial-panel .voucher-panel-head p { color: var(--muted); }
.task-page .voucher-editorial-panel .form-grid > .button[type=submit] { background: var(--green); color: #fffaf3; }
.task-page .voucher-editorial-panel .form-grid > .button[type=submit]:hover { background: #355b4d; }
@media (max-width: 620px) {
 .auth-access-wrap { padding-left: 14px; padding-right: 14px; }
 .task-page .voucher-editorial-panel>.form-grid { grid-template-columns: 1fr; }
}

/* 2026-11: gemeinsame, kompakte Seiteneinstiege für redaktionelle Übersichten.
 * Der Inhalt bildet eine Einheit: Kontext, Titel, Erklärung und nächste Aktion.
 * Keine großflächigen Hero-Flächen, Schmuckkreise oder CTA am fernen Rand. */
.content-page .page-head {
  display: grid;
  grid-template-columns: minmax(120px, 178px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
  width: 100%;
  max-width: 1050px;
  margin: 0 0 clamp(26px, 3.5vw, 40px);
  padding: 0 0 clamp(24px, 3vw, 34px);
  min-height: 0;
  border-bottom: 1px solid rgba(35, 58, 50, .18);
  background: transparent;
}
.content-page .page-head .editorial-heading__rail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
  padding-top: 3px;
}
.editorial-heading__symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #e4e9e1;
  color: var(--green);
  border: 1px solid rgba(35, 58, 50, .10);
  border-radius: 3px;
}
.editorial-heading__symbol .ui-icon { width: 22px; height: 22px; }
.content-page .page-head .editorial-heading__main { min-width: 0; }
.content-page .page-head .editorial-heading__main h1 {
  max-width: 31ch;
  margin: 0 0 12px;
  font: 400 clamp(34px, 3.4vw, 49px)/1.12 var(--serif);
  letter-spacing: -.047em;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.content-page .page-head .editorial-heading__main .editorial-heading__intro {
  max-width: 62ch;
  margin: 0;
  font: 400 16px/1.65 var(--sans);
  color: var(--muted);
  overflow-wrap: anywhere;
}
.editorial-heading__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 19px;
  min-width: 0;
}
.content-page .page-head .editorial-heading__actions .button {
  position: static;
  transform: none;
  align-self: auto;
  min-height: 44px;
  padding: 10px 17px;
  font: 600 14px/1.4 var(--sans);
  white-space: normal;
  border-radius: 2px;
  max-width: 100%;
}
.content-page .page-head .editorial-heading__actions .button.outline {
  border-color: rgba(35, 58, 50, .4);
  background: rgba(255, 253, 249, .44);
}
.content-page .page-head .editorial-heading__actions .button.outline:hover {
  background: #e7eee5;
  color: var(--ink);
  border-color: var(--green);
}
@media (max-width: 680px) {
  .content-page .page-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 17px;
    padding-bottom: 23px;
    margin-bottom: 26px;
  }
  .content-page .page-head .editorial-heading__rail {
    flex-direction: row;
    align-items: center;
    gap: 11px;
    padding: 0;
  }
  .editorial-heading__symbol { width: 36px; height: 36px; }
  .editorial-heading__symbol .ui-icon { width: 20px; height: 20px; }
  .content-page .page-head .editorial-heading__main h1 {
    font-size: clamp(32px, 8vw, 40px);
    margin-bottom: 9px;
  }
  .content-page .page-head .editorial-heading__main .editorial-heading__intro {
    font-size: 15px;
    line-height: 1.62;
  }
  .editorial-heading__actions { margin-top: 17px; }
  .content-page .page-head .editorial-heading__actions .button {
    min-height: 46px;
  }
}
@media (max-width: 390px) {
  .content-page .page-head .editorial-heading__actions,
  .content-page .page-head .editorial-heading__actions > .button { width: 100%; }
  .content-page .page-head .editorial-heading__actions .button { justify-content: center; }
}

/* Redaktionelle Miniaturen: eine eigene, zurückhaltende Zeichnung je Thema.
   Keine Icons in kleinen grauen Quadraten mehr. */
.editorial-heading__rail .editorial-heading__symbol { display: none; }
.content-page .page-head .editorial-heading__rail {
  gap: 14px;
  padding-top: 0;
}
.editorial-heading__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 164px;
  height: 145px;
  max-width: 100%;
  flex: none;
  isolation: isolate;
}
/* Die schmale Bogenkontur gibt den Zeichnungen eine gemeinsame visuelle Grammatik. */
.editorial-heading__art::before {
  content: "";
  position: absolute;
  inset: 7px 12px 8px 7px;
  border: 1px solid rgba(45,79,66,.25);
  border-radius: 76px 76px 13px 13px;
  background: rgba(245,249,241,.28);
  z-index: -1;
}
.editorial-heading__art::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 14px;
  width: 9px;
  height: 9px;
  background: var(--rust);
  border-radius: 50%;
  border: 3px solid var(--bg);
  box-sizing: content-box;
}
.editorial-heading__art--circles::before { background: rgba(221,230,219,.32); }
.editorial-heading__art--connections::before { background: rgba(237,230,219,.36); }
.editorial-heading__art--conversation::before { background: rgba(234,226,211,.30); }
.editorial-heading__art--reading::before { background: rgba(224,231,225,.25); }
.editorial-heading__art--safety::before { background: rgba(217,228,220,.35); }
.rfu-motif { display: block; width: 146px; height: 125px; overflow: visible; }
.rfu-motif__ink, .rfu-motif__fine, .rfu-motif__accent {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.rfu-motif__ink { stroke: #315348; stroke-width: 2.15; }
.rfu-motif__fine { stroke: rgba(49,83,72,.46); stroke-width: 1.25; }
.rfu-motif__accent { stroke: #a75d45; stroke-width: 2.35; }
.rfu-motif__dot { fill: #a75d45; stroke: none; }
.rfu-motif__dash { stroke-dasharray: 3 6; }

@media (max-width: 680px) {
  .content-page .page-head .editorial-heading__rail {
    align-items: center;
    gap: 14px;
  }
  .editorial-heading__art { width: 78px; height: 72px; }
  .editorial-heading__art::before { inset: 2px 5px 5px 2px; border-radius: 37px 37px 8px 8px; }
  .editorial-heading__art::after { right: 0; bottom: 5px; width: 6px; height: 6px; border-width: 2px; }
  .rfu-motif { width: 72px; height: 62px; }
}

/* 2026-11: Einheitliche Einstiege ohne rote Vorzeilen.
   Auf Inhaltsseiten trägt die Illustration die Orientierung; auf Formularseiten
   bleibt der Titel die wichtigste Information. */
.content-page .page-head .editorial-heading__rail {
  justify-content: flex-start;
}
.task-page .task-header--illustrated {
  display: grid;
  grid-template-columns: minmax(112px, 166px) minmax(0, 1fr);
  align-items: start;
  justify-content: start;
  gap: clamp(21px, 3.2vw, 40px);
  max-width: 1060px;
  margin-bottom: clamp(23px, 3vw, 34px);
  padding: 0 0 clamp(22px, 3vw, 32px);
}
.task-header--illustrated .task-header__rail {
  display: flex;
  align-items: flex-start;
  min-width: 0;
}
.task-header--illustrated .editorial-heading__art {
  flex: 0 0 auto;
  width: 150px;
  height: 135px;
}
.task-header--illustrated .rfu-motif { width: 133px; height: 116px; }
.task-header--illustrated .task-header__main { min-width: 0; }
.task-page .task-header--illustrated h1 {
  font: 400 clamp(34px, 3.5vw, 48px)/1.12 var(--serif);
  letter-spacing: -.047em;
  margin: 1px 0 11px;
  max-width: 27ch;
}
.task-header--illustrated .task-intro {
  max-width: 62ch;
  margin: 0;
  font: 400 16px/1.65 var(--sans);
}
.task-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 17px;
}
.task-header__actions :is(a,button) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  line-height: 1.5;
}
/* Die ehemaligen roten Vorzeilen werden in den Shells nicht mehr erzeugt. */
@media (max-width: 680px) {
  .task-page .task-header--illustrated {
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
    padding-bottom: 22px;
    margin-bottom: 24px;
  }
  .task-header--illustrated .editorial-heading__art { width: 76px; height: 70px; }
  .task-header--illustrated .rfu-motif { width: 70px; height: 61px; }
  .task-header--illustrated .editorial-heading__art::before {
    inset: 2px 5px 5px 2px;
    border-radius: 37px 37px 8px 8px;
  }
  .task-header--illustrated .editorial-heading__art::after {
    right: 0; bottom: 5px; width: 6px; height: 6px; border-width: 2px;
  }
  .task-page .task-header--illustrated h1 {
    font-size: clamp(31px, 8vw, 40px);
    margin: 0 0 9px;
  }
  .task-header--illustrated .task-intro { font-size: 15px; }
  .task-header__actions { margin-top: 12px; }
}

/* Der Rückweg ist eine funktionale Nebenaktion, kein rotes Abschnittsetikett. */
.task-header--illustrated .task-header__actions .text-button {
  color: var(--green);
  border-bottom-color: rgba(35, 58, 50, .38);
  font: 600 14px/1.45 var(--sans);
}
.task-header--illustrated .task-header__actions .text-button:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* Startseite: ausgewogene Leseflächen statt übergroßer Display-Typografie.
   Ausschließlich die beiden redaktionellen Module der öffentlichen Startseite. */
.manifesto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 18px);
  border: 0;
  align-items: stretch;
}
.manifesto > .block,
.manifesto > .block.paper,
.manifesto > .block.rust,
.manifesto > .block.sage,
.manifesto > .block.lilac {
  grid-column: auto;
  min-width: 0;
  min-height: 270px;
  padding: clamp(24px, 2.5vw, 34px);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.manifesto > .block > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.manifesto .block .mini {
  font: 550 13px/1.45 var(--sans);
  color: var(--rust-dark);
  margin-bottom: 12px;
}
.manifesto .block h3,
.manifesto .block.rust h3 {
  font: 400 clamp(29px, 2.5vw, 38px)/1.15 var(--serif);
  letter-spacing: -.045em;
  max-width: 24ch;
  margin: 0 0 14px;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.manifesto .block p,
.manifesto .block.rust p {
  font: 400 15px/1.68 var(--sans);
  max-width: 56ch;
  margin: 0;
  color: #40574c;
}
.manifesto > .block.paper { background: #fcf9f3; }
.manifesto > .block.rust { background: #dfc2b3; color: var(--ink); }
.manifesto > .block.sage { background: #e3e8df; }
.manifesto > .block.lilac { background: #efe6df; }

/* Redaktionelle Leitsatz-Fläche: typografischer Auftakt, bewusst dezentes Linienmotiv.
 * Die Zierform ist rein dekorativ und wird auf schmalen Bildschirmen ausgeblendet. */
.statement-band {
  background: #e9dbc0;
  padding: clamp(60px, 6.8vw, 100px) 0;
}
.statement-band .wrap.statement-band__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 235px);
  align-items: center;
  gap: clamp(36px, 6vw, 100px);
  max-width: 1280px;
}
.statement-band__text {
  position: relative;
  min-width: 0;
  padding-left: clamp(50px, 5.2vw, 75px);
}
.statement-band__opening {
  position: absolute;
  top: -17px;
  left: 0;
  font: normal 400 clamp(78px, 7.5vw, 118px)/1 var(--serif);
  letter-spacing: -.08em;
  color: #9c5740;
  user-select: none;
}
.statement-band .statement-band__text p {
  margin: 0;
  max-width: 30ch;
  font: normal 400 clamp(32px, 3.3vw, 50px)/1.21 var(--serif);
  letter-spacing: -.043em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.statement-band .statement-mark {
  display: flex;
  align-items: center;
  width: auto;
  height: auto;
  min-height: 0;
  gap: 14px;
  margin-top: clamp(22px, 2.8vw, 34px);
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  transform: none;
  text-transform: none;
  letter-spacing: normal;
  font: italic 400 19px/1.35 var(--serif);
  color: var(--rust-dark);
}
.statement-band .statement-mark::before {
  content: "";
  position: static;
  display: block;
  flex: 0 0 30px;
  height: 1px;
  background: var(--rust-dark);
  border: 0;
  opacity: .7;
}
.statement-band .statement-mark::after { content: none; }
.statement-band__art {
  width: min(100%, 235px);
  justify-self: end;
  opacity: .76;
}
.statement-band__art svg { display: block; width: 100%; height: auto; overflow: visible; }
.statement-band__art path {
  fill: none;
  stroke: #637a68;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.statement-band__art circle { fill: #9c5740; }
@media (max-width: 780px) {
  .statement-band .wrap.statement-band__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .statement-band__art { display: none; }
}
@media (max-width: 780px) {
  .manifesto > .block,
  .manifesto > .block.paper,
  .manifesto > .block.rust,
  .manifesto > .block.sage,
  .manifesto > .block.lilac {
    min-height: 250px;
    padding: 24px;
  }
  .manifesto .block h3,
  .manifesto .block.rust h3 { font-size: clamp(26px, 3.7vw, 33px); }
}
@media (max-width: 620px) {
  .manifesto { grid-template-columns: minmax(0, 1fr); }
  .manifesto > .block,
  .manifesto > .block.paper,
  .manifesto > .block.rust,
  .manifesto > .block.sage,
  .manifesto > .block.lilac {
    min-height: 0;
    padding: 26px 24px;
  }
  .manifesto .block h3,
  .manifesto .block.rust h3 { font-size: clamp(28px, 7vw, 34px); }
  .statement-band { padding: 52px 0; }
  .statement-band__text { padding-left: 0; padding-top: 39px; }
  .statement-band__opening { top: -13px; left: 0; font-size: 78px; }
  .statement-band .statement-band__text p { font-size: clamp(29px, 7.6vw, 36px); line-height: 1.25; }
  .statement-band .statement-mark { font-size: 18px; margin-top: 21px; }
}