/* Long-form guides: a readable measure, clear hierarchy, quiet furniture. */

/* ONE column, one right edge. Prose and cards previously stopped in two
   different places on the same page (859px vs 1232px), which read as broken.
   Every direct child of .article now shares a single measure: wide enough to
   use the page, short enough that a line of text is still comfortable. */
:root { --col: min(100%, 62rem); }

.article { max-width: none; margin: 0; padding-top: 3rem; }
.article > * { max-width: var(--col); }

.article .crumbs { font: 400 .8125rem/1.4 var(--sans); letter-spacing: 0; color: var(--dim); margin-bottom: 1.2rem; }
.article .crumbs a { color: var(--dim); }
.article .crumbs a:hover { color: var(--text); }

.article h1 { font-size: clamp(2rem, 4.4vw, 2.75rem); letter-spacing: -.032em; line-height: 1.1; }
.article .standfirst { color: var(--muted); font-size: 1.125rem; margin-top: 1rem; }
.article .meta { color: var(--dim); font-size: .8125rem; margin-top: 1rem; display: flex; gap: .8125rem; flex-wrap: wrap; }

.article h2 { font-size: 1.5rem; letter-spacing: -.022em; margin: 2.6rem 0 .7rem; }
.article h3 { font-size: 1.125rem; margin: 1.75rem 0 .5rem; }
.article p { color: var(--muted); margin: .85rem 0; }
.article strong { color: var(--text); font-weight: 600; }
/* Indent from padding, not margin: a left margin pushed the list past the
   shared right edge, because max-width sizes the content box. */
.article ul, .article ol { color: var(--muted); margin: .9375rem 0; padding-left: 1.3rem; display: grid; gap: .45rem; }
.article li::marker { color: var(--dim); }
.article code {
  background: rgba(94, 106, 210, .12); border: 1px solid rgba(94, 106, 210, .2);
  border-radius: var(--r-xs); padding: .1rem .35rem; font: 400 .875em/1.4 var(--mono); color: var(--accent-hi);
}

.article pre {
  margin: 1.3rem 0; padding: .95rem 1.125rem; border-radius: var(--r-lg);
  background: rgba(94, 106, 210, .07); border: 1px solid rgba(94, 106, 210, .2);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.article pre code {
  background: none; border: 0; padding: 0; display: block;
  white-space: pre; font: 400 .875rem/1.6 var(--mono); color: var(--accent-hi);
}

.article .dimnote { color: var(--dim); font-size: .875rem; font-family: var(--mono); }
.article p:has(> .dimnote) { margin-top: -.55rem; }

.article blockquote {
  margin: 1.4rem 0; padding: .2rem 0 .2rem 1.125rem;
  border-left: 2px solid rgba(94, 106, 210, .5); color: var(--muted); font-style: italic;
}

.article .callout {
  margin: 1.6rem 0; padding: 1.125rem 1.3rem; border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(94, 106, 210, .10), rgba(94, 106, 210, .03));
  border: 1px solid rgba(94, 106, 210, .3);
}
.article .callout p { margin: .3rem 0 0; font-size: .9375rem; }
.article .callout strong { color: var(--accent-hi); }

.article figure { margin: 1.75rem 0; }
.article figure img {
  width: 100%; border-radius: var(--r-lg); border: 1px solid var(--line); display: block;
  background: var(--surface-1);
}
.article figcaption { color: var(--dim); font-size: .8125rem; margin-top: .55rem; }

/* Wide content scrolls inside its own box; the page body never scrolls sideways. */
.article .tablewrap { overflow-x: auto; margin: 1.4rem 0; -webkit-overflow-scrolling: touch; }
.article .tablewrap table { margin: 0; min-width: 34rem; }
.article table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .9375rem; }

/* German compounds (Auftragsverarbeitungsvertrag) outrun a 390px viewport. */
.article p, .article li, .article td, .article th, .article h1, .article h2, .article h3 {
  overflow-wrap: break-word;
}
.article th, .article td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line); }
.article th { color: var(--dim); font: 500 .8125rem/1.4 var(--sans); letter-spacing: 0; }
.article td { color: var(--muted); }

.cta-band {
  margin: 3rem 0; padding: var(--s-6); border-radius: var(--r-lg);
  background: var(--surface-1); border: 1px solid var(--line);
}
.cta-band h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.022em; margin-bottom: .4rem; }
.cta-band p { color: var(--dim); font-size: .9375rem; margin-bottom: var(--s-5); }

/* Same grid and same card as .card-grid.cols-3 / .surface on the homepage. */
.next { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr)); gap: 1rem; margin-top: 2.2rem; }
.next a {
  display: block; padding: var(--s-5) var(--s-5) var(--s-6);
  border-radius: var(--r-lg); text-decoration: none;
  background: var(--surface-1); border: 1px solid var(--line);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.next a:hover { border-color: var(--line-strong); background: var(--surface-2); }
.next a b { display: block; color: var(--text); font-size: 1.0625rem; font-weight: 500; letter-spacing: -.018em; margin-bottom: .4rem; }
.next a span { color: var(--muted); font-size: .9rem; line-height: 1.5; }

/* Homepage cards dropped into an article: article prose rules would otherwise
   override the card's own type, so restate the card values here. */
/* Article cards carry very uneven copy, so let them size to their content
   instead of stretching every card to the tallest one in the row. */
.article .card-grid { margin-top: 2.2rem; align-items: start; }
/* The grid is an <ol> so the sequence survives for screen readers; strip the
   list furniture that .article ul/ol would otherwise apply. */
ol.card-grid { list-style: none; padding: 0; margin-left: 0; }
ol.card-grid > li::marker { content: none; }
.article .step h3 { font-size: 1.0625rem; font-weight: 500; letter-spacing: -.018em; margin: 0 0 .4rem; max-width: none; }
.article .step p { color: var(--muted); font-size: .9rem; line-height: 1.5; margin: 0; max-width: none; }
.article .step .num { margin-bottom: var(--s-4); }