/* Toerdle site — the subpages (FAQ, Partner, legal and help pages, Methodik, Presse, Changelog,
 * Rechner, Ratgeber, Beta-Test) and the invite and challenge landers.
 *
 * Loads after kreide.css and only lays things out: every color, type style, button, chip and
 * card role comes from there, so this sheet names roles (var(--iron-…)), never a raw color.
 */

/* ---------- Frame ---------- */
.shell--doc { width: min(100% - 2 * var(--gutter), 880px); margin-inline: auto; }

/* Mobile menu without script: a details element in the pill, opening below it */
.nav__drawer { display: block; flex: none; }
.nav__drawer > summary { list-style: none; }
.nav__drawer > summary::-webkit-details-marker { display: none; }
.nav__drawer[open] .nav__menu span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__drawer[open] .nav__menu span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.nav__drawer .nav__mobile {
  position: absolute; top: calc(100% + 8px); left: var(--gutter); right: var(--gutter);
  margin: 0; max-width: none;
}
.nav__links a[aria-current="page"] { background: var(--nav-plate); color: var(--iron-ink); }
.nav__mobile a[aria-current="page"] { background: var(--nav-plate); }
.nav__pill--solo { padding-right: 14px; max-width: 560px; }

/* ---------- Page head on the floor ---------- */
.page-head { display: grid; gap: 14px; justify-items: start; padding: clamp(40px, 7vw, 88px) 0 clamp(24px, 4vw, 40px); }
.page-title {
  font-family: var(--font-narrow); font-weight: 1000; font-stretch: 47%;
  font-size: clamp(40px, 6vw, 68px); line-height: 0.96; letter-spacing: 0;
  text-wrap: balance; max-width: 15ch;
}
.page-title--legal { font-size: clamp(36px, 4.8vw, 52px); max-width: 18ch; }
.page-head .lede { max-width: 42em; }
.updated { color: var(--iron-muted); font-size: 14px; font-variant-numeric: tabular-nums; }

/* Head with a facts card beside it */
.doc-hero { padding: clamp(40px, 7vw, 88px) 0 clamp(24px, 4vw, 40px); }
.doc-hero-grid { display: grid; gap: 16px; align-items: end; }
.doc-hero-grid > div:first-child { display: grid; gap: 14px; justify-items: start; }
@media (min-width: 1020px) { .doc-hero-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; } }

.facts { background: var(--iron-chalk); border-radius: var(--r-hero); padding: 22px; }
.facts img { width: 84px; height: 84px; object-fit: contain; margin: 0 0 10px; }
.facts img.facts__icon { border-radius: 19px; }
.facts dl, .facts ul { margin: 0; padding: 0; list-style: none; display: grid; }
.facts dl > div, .facts li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 12px 0; border-top: 1px solid var(--iron-line);
}
.facts dl > div:first-child, .facts li:first-child { border-top: 0; padding-top: 4px; }
.facts dt, .facts li > b {
  white-space: nowrap;
  font-size: 13px; font-weight: 860; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--iron-muted);
}
.facts dd, .facts li > span {
  margin: 0; text-align: right;
  font-family: var(--font-narrow); font-weight: 760; font-stretch: 60%; font-size: 19px; line-height: 1.15;
}

/* ---------- Long text: one chalk card ---------- */
.prose {
  background: var(--iron-chalk);
  border-radius: var(--r-hero);
  padding: clamp(22px, 4.5vw, 52px);
  font-size: 17px; line-height: 1.6;
}
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p, .prose ul, .prose ol { max-width: 70ch; }
.prose h2 {
  font-family: var(--font-narrow); font-weight: 1000; font-stretch: 47%;
  font-size: clamp(26px, 3vw, 34px); line-height: 1.02; text-wrap: balance;
  margin: 52px 0 14px;
}
.prose h3 {
  font-family: var(--font-narrow); font-weight: 870; font-stretch: 60%;
  font-size: 23px; line-height: 1.15; margin: 30px 0 8px;
}
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 22px; }
.prose li { margin: 8px 0; }
.prose li::marker { color: var(--iron-muted); }
.prose strong { font-weight: 700; }
.prose a:not(.btn) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) { .prose a:not(.btn):hover { text-decoration-thickness: 2px; } }
.prose hr { border: 0; border-top: 1px solid var(--iron-line); margin: 44px 0; }
.prose .muted, .prose small { color: var(--iron-muted); }
.prose small { font-size: 15px; }
.prose .key { font-size: 20px; font-weight: 700; line-height: 1.5; }

/* Cards inside the chalk card get a line; a calm card sits on the floor's tone */
.prose .card, .doc-card {
  background: var(--iron-chalk); border: 1px solid var(--iron-line);
  border-radius: var(--r-card); padding: 20px 22px; margin: 0 0 16px;
}
.prose .card > :last-child, .doc-card > :last-child { margin-bottom: 0; }
.prose .card h2, .prose .card h3, .doc-card h3 { margin-top: 0; }
.prose .card.tonal, .doc-card--calm { background: var(--iron-floor); border-color: transparent; }
.prose .card.warn, .doc-card--warn { border: 2px solid var(--iron-ink); }
.doc-contact-list { display: grid; gap: 12px; margin: 0 0 20px; }
.doc-contact-list .doc-card { margin: 0; }
@media (min-width: 720px) { .doc-contact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Prose beside a stack of side notes */
.doc-layout { display: grid; gap: 16px; align-items: start; }
.doc-side-stack { display: grid; gap: 8px; }
.doc-side-card { background: var(--iron-chalk); border-radius: var(--r-card); padding: 20px; }
.doc-side-card b {
  display: block; margin-bottom: 6px;
  font-family: var(--font-narrow); font-weight: 870; font-stretch: 60%; font-size: 21px; line-height: 1.1;
}
.doc-side-card p { color: var(--iron-muted); font-size: 15px; line-height: 1.5; }
.doc-side-card a { color: var(--iron-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1020px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
  .doc-side-stack { position: sticky; top: 96px; }
}

/* Tables: chalk with a line */
.table-scroll {
  overflow-x: auto; margin: 0 0 20px;
  background: var(--iron-chalk); border: 1px solid var(--iron-line); border-radius: var(--r-card);
}
table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.5; }
.table-scroll table:has(th:nth-child(4)) { min-width: 640px; }
th, td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--iron-line); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
th {
  font-family: var(--font-narrow); font-weight: 870; font-stretch: 60%; font-size: 17px; line-height: 1.2;
  white-space: nowrap;
}
thead th { color: var(--iron-muted); }
td a { text-decoration: underline; text-underline-offset: 3px; }

.pill-label {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
  border-radius: var(--r-chip); border: 1px solid var(--iron-line); background: var(--iron-chalk);
  font-family: var(--font-narrow); font-weight: 760; font-stretch: 60%; font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.page-gap { height: clamp(8px, 2vw, 16px); }

/* ---------- FAQ ---------- */
.tldr { display: grid; gap: 8px; max-width: 62ch; margin-top: 8px; padding: 20px 22px; border-radius: var(--r-card); background: var(--iron-chalk); }
.tldr p { font-size: 18px; line-height: 1.5; }
.faq-list { padding-bottom: 8px; }
.faq-list > * { max-width: 880px; }
.faq-group { margin: 0 0 48px; }
.faq-group > h2 {
  font-family: var(--font-narrow); font-weight: 1000; font-stretch: 47%;
  font-size: clamp(28px, 3.6vw, 40px); line-height: 1; margin: 0 0 16px;
}
.faq-item { background: var(--iron-chalk); border-radius: var(--r-card); margin: 0 0 8px; }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 16px 16px 16px 20px;
  font-family: var(--font-narrow); font-weight: 870; font-stretch: 60%; font-size: 21px; line-height: 1.15;
  list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 32px; height: 32px; border-radius: 10px;
  border: 1px solid var(--iron-line);
  background:
    linear-gradient(var(--iron-ink), var(--iron-ink)) center / 12px 2px no-repeat,
    linear-gradient(var(--iron-ink), var(--iron-ink)) center / 2px 12px no-repeat;
  transition: background-size var(--dur-value) var(--ease-value);
}
.faq-item[open] summary::after { background-size: 12px 2px, 2px 0; }
.faq-item summary:focus-visible { outline-offset: -2px; border-radius: var(--r-card); }
.faq-item .a { padding: 0 20px 20px; }
.faq-item .a p { max-width: 70ch; font-size: 17px; line-height: 1.6; margin: 0 0 12px; }
.faq-item .a p:last-child { margin-bottom: 0; }
.faq-item .a a { text-decoration: underline; text-underline-offset: 3px; }
.cta-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
  background: var(--iron-chalk); border-radius: var(--r-hero); padding: clamp(22px, 4vw, 40px);
}
.cta-card h2 { font-family: var(--font-narrow); font-weight: 1000; font-stretch: 47%; font-size: clamp(28px, 3.6vw, 40px); line-height: 1; margin: 0 0 8px; }
.cta-card p { color: var(--iron-muted); max-width: 52ch; }

/* ---------- Partner ---------- */
.p-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.p-section { padding: clamp(48px, 7vw, 88px) 0 0; }
.p-section > h2 {
  font-family: var(--font-narrow); font-weight: 1000; font-stretch: 47%;
  font-size: clamp(32px, 4.4vw, 50px); line-height: 0.98; margin: 0 0 12px;
}
.p-section > .sub { color: var(--iron-muted); max-width: 60ch; margin: 0 0 24px; font-size: 18px; }
.model-grid, .why-grid, .steps-list { display: grid; gap: 8px; }
.model-card, .why-card, .step2 { background: var(--iron-chalk); border-radius: var(--r-card); padding: 22px; }
.model-card .ic {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px;
  border-radius: var(--r-chip); background: var(--iron-ink); color: var(--iron-action-ink);
}
.model-card .ic svg { width: 22px; height: 22px; }
.model-card h3, .step2 h3 {
  font-family: var(--font-narrow); font-weight: 870; font-stretch: 60%; font-size: 25px; line-height: 1.1; margin: 0 0 10px;
}
.model-card p, .step2 p { font-size: 16px; line-height: 1.55; margin: 0 0 14px; }
.step2 p { margin: 0; }
.model-card .eg { color: var(--iron-muted); font-size: 14px; margin: 0; }
.why-card b { display: block; margin-bottom: 8px; font-family: var(--font-narrow); font-weight: 870; font-stretch: 60%; font-size: 22px; line-height: 1.1; }
.why-card span { color: var(--iron-muted); font-size: 15px; line-height: 1.5; }
.step2 .n { margin-bottom: 10px; }
.contact-card {
  display: grid; gap: 20px 32px; align-items: center; margin-top: clamp(48px, 7vw, 88px);
  background: var(--iron-chalk); border-radius: var(--r-hero); padding: clamp(22px, 4vw, 40px);
}
.contact-card h2 { font-family: var(--font-narrow); font-weight: 1000; font-stretch: 47%; font-size: clamp(30px, 4vw, 44px); line-height: 1; margin: 0 0 10px; }
.contact-card p { color: var(--iron-muted); max-width: 52ch; }
@media (min-width: 640px) { .model-grid, .why-grid, .steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px) { .contact-card { grid-template-columns: minmax(0, 1fr) auto; } }
@media (min-width: 1020px) {
  .model-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .why-grid, .steps-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Rechner ---------- */
.calc { display: grid; gap: 16px; align-items: start; margin: 0 0 16px; }
@media (min-width: 900px) {
  .calc { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr); gap: 24px; }
  .calc-out { position: sticky; top: 96px; }
}
.calc-form { display: grid; gap: 22px; background: var(--iron-chalk); border-radius: var(--r-hero); padding: clamp(20px, 3.5vw, 32px); }
.calc-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.calc-field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.calc-field > label, .calc-field > legend {
  padding: 0; margin-bottom: 0;
  font-family: var(--font-narrow); font-weight: 760; font-stretch: 60%; font-size: 18px; line-height: 1.15;
}
.calc-field > legend { margin-bottom: 8px; }
.calc-field input[type="number"] {
  width: 100%; min-height: 56px; padding: 0 14px;
  border: 1px solid var(--iron-line); border-radius: var(--r-chip);
  background: var(--iron-chalk); color: var(--iron-ink);
  font-family: var(--font-narrow); font-weight: 870; font-stretch: 60%; font-size: 26px;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
  transition: border-color var(--dur-value) var(--ease-value);
}
.calc-field input[type="number"]::-webkit-inner-spin-button,
.calc-field input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.calc-field input[type="number"]:focus { outline: none; border-color: var(--iron-ink); box-shadow: inset 0 0 0 1px var(--iron-ink); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.choice-input:checked + .chip { background: var(--iron-ink); color: var(--iron-action-ink); border-color: var(--iron-ink); }
.choice-input:focus-visible + .chip { outline: 2px solid var(--iron-ink); outline-offset: 3px; }
.chip small { font-family: var(--font-body); font-stretch: 100%; font-weight: 600; font-size: 13px; opacity: 0.72; }
.calc-out { display: grid; gap: 4px; background: var(--iron-chalk); border-radius: var(--r-hero); padding: clamp(20px, 3.5vw, 32px); }
.calc-out .figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 14px; }
.calc-out .unit { font-family: var(--font-narrow); font-weight: 760; font-stretch: 60%; font-size: 22px; color: var(--iron-muted); }
.calc-out .row {
  display: flex; justify-content: space-between; gap: 12px; padding: 12px 0;
  border-top: 1px solid var(--iron-line); font-size: 16px;
}
.calc-out .row > span:last-child { font-family: var(--font-narrow); font-weight: 870; font-stretch: 60%; font-size: 20px; font-variant-numeric: tabular-nums; }
.floor-note {
  margin-top: 12px; padding: 14px 16px; border-radius: var(--r-chip);
  background: var(--iron-ink); color: var(--iron-action-ink);
  font-size: 15px; font-weight: 700; line-height: 1.45;
}
@media (max-width: 899px) { .calc-out { order: -1; } }
@media (max-width: 420px) { .calc-out .figure { font-size: 80px; } }

/* ---------- Invite and challenge landers ---------- */
.lander {
  width: min(100% - 2 * var(--gutter), 560px); margin-inline: auto;
  min-height: calc(100svh - 72px);
  display: flex; flex-direction: column; gap: 16px;
  padding: clamp(32px, 8vh, 96px) 0 24px;
}
.lander__q {
  font-family: var(--font-narrow); font-weight: 1000; font-stretch: 47%;
  font-size: clamp(44px, 11vw, 72px); line-height: 0.94; text-wrap: balance;
}
.lander .lede { margin-bottom: 8px; }
.code-box {
  background: var(--iron-chalk); border-radius: var(--r-card); padding: 22px 16px;
  font-family: var(--font-narrow); font-weight: 1000; font-stretch: 47%; font-size: 40px; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: 0.06em; text-align: center;
  overflow-wrap: anywhere;
}
.code-hint { color: var(--iron-muted); font-size: 15px; line-height: 1.5; }
.lander-actions { display: grid; gap: 10px; margin-top: auto; padding-top: 16px; }
.lander-foot { color: var(--iron-muted); font-size: 14px; text-align: center; }
.lander-foot a { color: var(--iron-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) {
  .lander { min-height: 0; padding-top: clamp(48px, 10vh, 120px); }
  .lander-actions { margin-top: 8px; }
}

/* ---------- Beta-Test (testing.html) ---------- */
.beta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.p-section[id] { scroll-margin-top: 88px; }
@media (min-width: 860px) { .steps-list.steps-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.beta-link { display: inline-block; margin-top: 8px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.invite-card {
  display: grid; gap: 20px 32px; align-items: center; margin-top: 8px;
  background: var(--iron-chalk); border-radius: var(--r-hero); padding: clamp(20px, 3.5vw, 32px);
}
.invite-card__text { display: grid; gap: 12px; }
.invite-card .code-box { background: var(--iron-floor); }
.invite-card__link { font-size: 16px; overflow-wrap: anywhere; }
.invite-card__link a { text-decoration: underline; text-underline-offset: 3px; }
.invite-qr { display: none; margin: 0; justify-items: center; gap: 10px; text-align: center; }
.invite-qr__paper { display: block; padding: 10px; border-radius: var(--r-chip); background: var(--iron-code-paper); }
.invite-qr__paper img { width: 132px; height: 132px; }
.invite-qr figcaption { color: var(--iron-muted); font-size: 14px; line-height: 1.4; max-width: 18ch; }
@media (min-width: 860px) and (hover: hover) {
  .invite-card { grid-template-columns: minmax(0, 1fr) auto; }
  .invite-qr { display: grid; }
}

/* The one ask that matters most: an inverted card, ink on the floor */
.focus-card {
  background: var(--iron-ink); color: var(--iron-action-ink);
  border-radius: var(--r-hero); padding: clamp(24px, 4.5vw, 52px);
}
.focus-card .eyebrow { color: inherit; opacity: 0.72; }
.focus-card h2 {
  font-family: var(--font-narrow); font-weight: 1000; font-stretch: 47%;
  font-size: clamp(32px, 4.4vw, 50px); line-height: 0.98; text-wrap: balance;
  margin: 10px 0 14px;
}
.focus-card__lede { font-size: 18px; line-height: 1.5; max-width: 60ch; opacity: 0.86; }
.focus-steps { list-style: none; counter-reset: focus; margin: 28px 0 0; padding: 0; display: grid; gap: 8px; }
.focus-steps li {
  counter-increment: focus; position: relative;
  padding: 18px 0 0 54px; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  font-size: 17px; line-height: 1.55;
}
.focus-steps li::before {
  content: counter(focus);
  position: absolute; left: 0; top: 18px;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-chip);
  background: var(--iron-action-ink); color: var(--iron-ink);
  font-family: var(--font-narrow); font-weight: 1000; font-stretch: 47%; font-size: 24px; line-height: 1;
}
.focus-steps b { display: block; margin-bottom: 2px; font-family: var(--font-narrow); font-weight: 870; font-stretch: 60%; font-size: 21px; line-height: 1.15; }
.focus-steps a, .focus-card__note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.focus-card__note { margin-top: 28px; font-size: 15px; line-height: 1.5; max-width: 70ch; opacity: 0.72; }
@media (min-width: 860px) { .focus-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; } }

/* Feedback steps: text on top, the phone screenshot below, screenshots aligned across cards */
.shot-grid { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.shot {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--iron-chalk); border-radius: var(--r-card); padding: 22px;
}
.shot h3 { font-family: var(--font-narrow); font-weight: 870; font-stretch: 60%; font-size: 25px; line-height: 1.1; }
.shot p { font-size: 16px; line-height: 1.55; }
.shot img {
  width: 100%; max-width: 300px; height: auto; margin: auto auto 0;
  border-radius: var(--r-card); border: 1px solid var(--iron-line);
}
@media (min-width: 860px) { .shot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tip-grid { display: grid; gap: 8px; }
.tip-card { background: var(--iron-chalk); border-radius: var(--r-card); padding: 22px; }
.tip-card b { display: block; margin-bottom: 8px; font-family: var(--font-narrow); font-weight: 870; font-stretch: 60%; font-size: 22px; line-height: 1.1; }
.tip-card p, .tip-card ul { color: var(--iron-muted); font-size: 15px; line-height: 1.5; }
.tip-card ul { margin: 0; padding-left: 18px; }
.tip-card li { margin: 4px 0; }
@media (min-width: 860px) { .tip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.beta-extra { margin-top: 16px; color: var(--iron-muted); font-size: 16px; }

/* ---------- Footer ---------- */
.footer--sub .footer__grid { border-top: 1px solid var(--iron-line); }
.footer__social { display: flex; gap: 8px; margin-top: 16px; }
.footer__social a {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--r-chip); background: var(--iron-chalk); border: 1px solid var(--iron-line);
}
.footer__social svg { width: 20px; height: 20px; }

@media (min-width: 960px) { .nav__drawer { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after { transition: none; }
}