/* ki-etablieren.de — site-specific overrides. Reuses shared/css/base.css tokens
   (--storm-dark-teal, --storm-teal, --storm-white, --storm-off-white, --storm-light-gray,
   --storm-dark-gray, --storm-gradient, --aws-orange) directly — no parallel token set here. */

html { scroll-behavior: smooth; }

.top-bar { height: 4px; background: var(--storm-gradient); }

.nav { background: var(--storm-white); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px rgba(0,0,0,.05); }
.nav-inner { max-width: 1140px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { height: 40px; width: auto; }
.nav-links { list-style: none; display: flex; gap: 28px; align-items: center; }
.nav-links a { color: var(--storm-dark-gray); font-size: .9rem; font-weight: 600; }
.nav-links a:hover { color: var(--storm-teal); }
.nav-cta { display: inline-block; padding: 9px 20px; background: var(--storm-teal); color: var(--storm-white) !important; border-radius: 2px; }
.nav-cta:hover { background: var(--storm-dark-teal); color: var(--storm-white) !important; }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 8px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--storm-dark-teal); }
.mobile-menu { display: none; position: fixed; top: 68px; left: 0; width: 100%; background: var(--storm-white); box-shadow: 0 8px 24px rgba(0,0,0,.08); padding: 20px 24px; z-index: 99; }
.mobile-menu.active, .mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: 12px 0; color: var(--storm-dark-gray); font-weight: 600; border-bottom: 1px solid var(--storm-off-white); }

.kick { display: inline-block; color: var(--storm-dark-teal); font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .6em; }

.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 1.5em 0; }
.hero-badge { display: block; margin: 2em auto .8em; height: auto; }
.btn-secondary.on-dark { border-color: var(--storm-white); color: var(--storm-white) !important; }
.btn-secondary.on-dark:hover { background: var(--storm-white); color: var(--storm-dark-teal) !important; }

/* Challenge cards (REQ-005 M26/M27): the key sentence carries the weight, the body sits at the
   same indent underneath, so the three blocks read as one hierarchy when skimmed. */
.challenge-card .challenge-key { font-weight: 700; color: var(--storm-dark-teal); font-size: 1rem;
  line-height: 1.6; margin: 0 0 12px; padding-left: 16px; border-left: 3px solid var(--storm-teal); }
.challenge-card .challenge-body { padding-left: 19px; margin: 0; }

/* Dimension tiles (REQ-005 M28): the 8x5 matrix moved to /reifegradmodell.html; the home page
   shows one tile per dimension with a five-step ramp along the Storm gradient as the stage scale. */
/* REQ-006 E8: the frame under the 8x5 matrix — stage 5 is an option, not the end of a ladder. */
.stage-frame { margin: 1.4em 0 0; font-size: .92rem; line-height: 1.7; color: #5a6a72;
  border-left: 3px solid var(--storm-teal); padding-left: 16px; }

.dim-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dim-tile { display: flex; flex-direction: column; gap: 10px; background: var(--storm-white);
  border-radius: 12px; border-top: 4px solid var(--storm-teal); padding: 24px 22px;
  box-shadow: 0 2px 12px rgba(0,0,0,.04); color: var(--storm-dark-gray);
  transition: transform .25s, box-shadow .25s; }
.dim-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.08); }
.dim-num { font-size: .75rem; font-weight: 900; color: var(--storm-dark-teal); letter-spacing: .08em; }
.dim-name { font-size: 1.05rem; font-weight: 700; color: var(--storm-dark-teal); line-height: 1.3; }
.dim-gq { font-size: .88rem; line-height: 1.6; flex: 1; }
.dim-scale { display: flex; gap: 3px; margin-top: 6px; }
.dim-scale i { flex: 1; height: 8px; border-radius: 2px; }
.dim-scale .s1 { background: var(--storm-dark-teal); }
.dim-scale .s2 { background: color-mix(in srgb, var(--storm-dark-teal) 75%, var(--storm-teal)); }
.dim-scale .s3 { background: color-mix(in srgb, var(--storm-dark-teal) 50%, var(--storm-teal)); }
.dim-scale .s4 { background: color-mix(in srgb, var(--storm-dark-teal) 25%, var(--storm-teal)); }
.dim-scale .s5 { background: var(--storm-teal); }
.dim-legend { margin-top: 18px; text-align: center; font-size: .78rem; color: var(--storm-dark-gray); opacity: .7; }

.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.number-tile .num { font-size: 2.2rem; font-weight: 900; color: var(--storm-dark-teal); line-height: 1.1; }
.number-tile .label { font-size: .8rem; font-weight: 600; color: #7a8a92; text-transform: uppercase; letter-spacing: .05em; margin-top: 6px; }

.table-scroll { overflow-x: auto; }
.model-table, .foundations-table { border-collapse: collapse; width: 100%; min-width: 720px; }
.model-table th, .model-table td, .foundations-table th, .foundations-table td { border: 1px solid var(--storm-light-gray); padding: 12px 14px; text-align: left; font-size: .88rem; vertical-align: top; }
.model-table thead th, .foundations-table thead th { background: var(--storm-off-white); color: var(--storm-dark-teal); font-weight: 700; }
.model-table th[scope="row"] { background: var(--storm-off-white); white-space: nowrap; }
.model-more { text-align: center; margin-top: 32px; }

.reading-rule { border-left: 4px solid var(--storm-teal); padding: 8px 24px; font-size: 1.1rem; font-style: italic; color: var(--storm-dark-teal); margin: 0; }

.limits-list { margin: 0; padding-left: 1.2em; line-height: 1.8; }

.faq-dl dt { font-weight: 700; color: var(--storm-dark-teal); margin-top: 20px; font-size: 1.02rem; }
.faq-dl dd { margin: 6px 0 0; color: #555; line-height: 1.7; }

.ladder { list-style: none; margin: 0; }
.ladder li { position: relative; padding: 8px 0 28px 56px; border-left: 2px solid var(--storm-light-gray); margin-left: 18px; }
.ladder li:last-child { border-left-color: transparent; padding-bottom: 0; }
.ladder-step { position: absolute; left: -19px; top: 4px; width: 36px; height: 36px; border-radius: 50%; background: var(--storm-gradient); color: var(--storm-white); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tile-meta { font-weight: 600; color: var(--storm-dark-teal); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }

@media (max-width: 1024px) { .dim-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .numbers { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) { .dim-grid { grid-template-columns: 1fr; } }

/* Roadshow promo block (registry/sites.json -> roadshow). Lives in every site style.css that
   renders one, so there is exactly one source for the rules. */
/* The card is one building block and has one width across all three sites: the content column
   (--content-col, declared in PROSE_CSS and in shared/css/reifecheck.css). At 660px it used to be
   wider than the column it stands in on every content page. */
.roadshow { background: var(--storm-white); border: 1px solid var(--storm-light-gray);
  border-left: 4px solid var(--storm-teal); border-radius: 8px; padding: 28px 32px;
  margin: 2.5em 0; max-width: min(var(--content-col), 100%); text-align: left; }
/* In a centred context (the check start screen) the card centres with its section; everywhere
   else it keeps the left edge of the surrounding text, otherwise it floats out of the column
   and breaks the page's alignment spine. */
.hero .roadshow, [style*="text-align:center"] .roadshow { margin-inline: auto; }
/* Teal reaches 2.85:1 on white — below the 4.5:1 the label's size demands. Dark teal is 12.6:1
   and is the same brand token family. */
.roadshow-kicker { color: var(--storm-dark-teal); font-weight: 700; font-size: .78rem;
  letter-spacing: .04em; text-transform: uppercase; margin: 0 0 .5em; }
.roadshow-h { margin: 0 0 .5em; color: var(--storm-dark-teal); font-size: 1.25rem; line-height: 1.35; }
.roadshow-body { margin: 0 0 .9em; line-height: 1.7; }
.roadshow-cities { margin: 0 0 1.2em; font-weight: 600; font-size: .9rem; color: var(--storm-dark-teal); }
.roadshow-dates { list-style: none; margin: 0 0 1.2em; padding: 0; display: flex; flex-wrap: wrap;
  gap: .4em 1.4em; font-weight: 600; font-size: .9rem; color: var(--storm-dark-teal); }
.roadshow-dates .rd-date { font-variant-numeric: tabular-nums; margin-right: .4em; }
.roadshow.on-dark .roadshow-dates { color: var(--storm-white); }
.roadshow-cta { margin: 0; }
.roadshow-cta a { display: inline-block; background: var(--storm-teal); color: var(--storm-white);
  padding: 12px 26px; border-radius: 4px; font-weight: 700; text-decoration: none; }
.roadshow-cta a:hover { background: var(--storm-dark-teal); color: var(--storm-white); }
.roadshow.on-dark { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28);
  border-left-color: var(--storm-light-teal); color: var(--storm-white); }
.roadshow.on-dark .roadshow-kicker { color: var(--storm-light-teal); }
.roadshow.on-dark .roadshow-cities { color: var(--storm-white); }
/* base.css sets an explicit colour on <p>, so inheriting from the aside is not enough here. */
.roadshow.on-dark .roadshow-h, .roadshow.on-dark .roadshow-body { color: var(--storm-white); }
.roadshow.on-dark .roadshow-cta a { background: var(--storm-white); color: var(--storm-dark-teal); }
.roadshow.on-dark .roadshow-cta a:hover { background: var(--storm-light-teal); color: var(--storm-dark-teal); }

@media (max-width: 560px) { .roadshow { padding: 22px 20px; } }

/* An event advert has no business on a printed maturity profile. */
@media print { .roadshow { display: none; } }

/* Reading measure and section rhythm — appended to every site style.css that renders long-form
   copy, so there is exactly one source for the rules (same pattern as ROADSHOW_CSS).

   Sven, 30.08.2026, first pass: at 1440px the body paragraphs filled the whole 1090px container,
   about 140 characters per line at line-height 1.5 — roughly twice what the eye tracks back
   reliably. That pass capped the measure element by element.

   Sven, 30.08.2026, second pass: capping elements was the wrong level. It left three alignments
   on one page — the h2 across the full 1092px container, the paragraph 548px wide flush left, the
   stage list 529px wide floating in the middle, and 500px of nothing to the right of every
   paragraph. The cap belongs to the column, not to the elements standing in it.

   Every content section is therefore a three-track grid: a centred reading column plus an outer
   track on each side. Children sit in the reading column by default, so heading, paragraph, list,
   definition list and quote share one left edge and one width. Only blocks that genuinely need
   the room opt into the outer track (see the break-out rule below). */
:root {
  /* 36rem = 576px at the 16px body, measured 71 characters per line. One number for the whole
     cluster: the same column on every page of all three sites, so the same building block looks
     the same everywhere. A length, not `ch`, on purpose — `ch` resolves per element, which is
     exactly what put footnote-sized text on a different edge than the paragraph above it. */
  --content-col: 36rem;
}

:is(.section-white, .section-light, .section-dark) > .container:not(.numbers) {
  display: grid;
  grid-template-columns:
    [wide-start] minmax(0, 1fr)
    [col-start] min(var(--content-col), 100%)
    [col-end] minmax(0, 1fr) [wide-end];
}
:is(.section-white, .section-light, .section-dark) > .container:not(.numbers) > * {
  grid-column: col;
  min-width: 0;
}
/* Deliberate break-outs. A 5-column matrix needs its columns, a tile grid its four tracks, and
   the caption or button row directly underneath belongs to that figure, not to the text column. */
:is(.section-white, .section-light, .section-dark) > .container
  > :is(.table-scroll, .dim-grid, .dim-legend, .features-grid, .model-more, .ampel-legend) {
  grid-column: wide;
}
/* A grid item is stretched to its track, and the closing band's button is not a block element. */
.section-dark > .container > a { justify-self: center; }

/* Small print packs more characters into the same 576px than body copy does, so the few blocks
   set below body size keep their own measure in `ch`. The left edge stays the column's — only the
   right edge comes in, which is what a footnote is supposed to do. */
.stage-frame { max-width: 58ch; }

/* The challenges band is shared markup styled in base.css: its own 1200px wrap (40px padding)
   and a 640px centred lead, both a hair wider than this cluster's container. Pulled onto the
   same two edges here rather than in base.css, which 11 further sites share. */
.challenges-section .wrap { max-width: 1140px; padding: 0 24px; }
.challenges-section .section-head p { max-width: min(var(--content-col), 100%); }

/* The looser leading that came with the measure stays with it. */
:is(.section-white, .section-light, .section-dark) > .container > :is(p, ul),
.section-head p,
.faq-dl dd,
.ladder li p { line-height: 1.7; }

/* Tables: eight rows of three cells separated only by hairlines made the eye lose the row on the
   way across. A tint on every second row carries it; the row-header column keeps its own tone so
   the first column still reads as a header. */
.model-table tbody tr:nth-child(even) td,
.foundations-table tbody tr:nth-child(even) td { background: rgba(0, 65, 73, .035); }
.model-table tbody tr:hover td,
.foundations-table tbody tr:hover td { background: rgba(0, 164, 134, .07); }

/* Section eyebrows: ki-etablieren.de used the .overline markup without ever styling it, so half
   the page had uppercase teal kickers and the other half unstyled grey words. One rule for both
   sites. Dark teal, not teal, for the same contrast reason as .roadshow-kicker. */
.section-head { margin-bottom: 40px; }
.section-head .overline { display: block; font-size: .75rem; font-weight: 700;
  color: var(--storm-dark-teal); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 10px; }
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; color: var(--storm-dark-teal); margin-bottom: 12px; }

/* Centred running text is only comfortable while it stays short: both edges move, so every line
   starts somewhere new. The hero lead ran four lines at 1440px and nine at 390px. It keeps its
   centred column, but the text inside it is set flush left again. */
.hero p { max-width: min(var(--content-col), 100%); margin-inline: auto; text-align: left; }
.hero .kick, .hero h1, .hero .hero-actions, .hero .hero-badge { text-align: center; }
.section-dark > .container > p { line-height: 1.7; }

/* Three services in one row: check, assessment, implementation. It was four until the
   pre-assessment left the offering; at three the row still fills the width, and the two-column
   breakpoint would strand the third card, so it drops straight to one. */
.features-grid.grid-3 { grid-template-columns: repeat(3, 1fr); }
.features-grid.grid-3 .feature-card { padding: 28px 24px; }
@media (max-width: 900px) { .features-grid.grid-3 { grid-template-columns: 1fr; } }

/* base.css's reduced-motion block shortens the transition but the card still jumps by its
   translate. Reduced motion means no movement, not fast movement. */
@media (prefers-reduced-motion: reduce) {
  .dim-tile:hover, .feature-card:hover { transform: none; }
}

/* The hero's own 80px bottom padding stacked on the badge's margin and the next section's 60px
   top padding: about 150px of nothing between the badge and whatever followed, which read as an
   accident rather than a rhythm. */
.hero { padding-bottom: 44px; }
.hero-badge { margin: 1.6em auto 0; }

/* The menu button was 38x40 — below the 44x44 a thumb needs. */
.hamburger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }

/* On a 390px column a centred paragraph runs five lines with both edges moving. Same reason as
   the hero lead: the block stays where it is, the text inside it goes flush left. */
@media (max-width: 720px) {
  .hero p, .section-dark .container p { text-align: left; }
}