/* landing.css — hybridsystems.at + maps.hybridsystems.at/ (2026-10-26). Loaded after styles.css + article.css. */
.landing .principle__body { grid-column: 7 / -1; grid-row: 3; margin-top: var(--s2); max-width: none; } /* David 2026-10-26: content gets six columns, never squeezed into 10–12 */
@media (max-width: 1024px) { .landing .principle__body { grid-column: 2 / -1; grid-row: auto; } }
@media (max-width: 640px)  { .landing .principle__body { grid-column: 1 / -1; } }
.landing .principle__body p:not(.t-label) { max-width: 62ch; }
/* chapter heads + numbers in Aeonik at the H1 size (David 2026-10-26: the 144 px Saol heads are not useful in an overview); the hero word stays Saol */
.landing .principle__head.t-display, .landing .principle__num.t-display { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-h1); line-height: calc(var(--base) * 4); letter-spacing: -0.04em; }
@media (max-width: 640px) { .landing .principle__head.t-display, .landing .principle__num.t-display { line-height: calc(var(--base) * 2); } }
/* NAVIGATION dropdown under the brand */
.site-header .brand-cell { grid-column: 1 / span 2; display: grid; gap: 4px; align-content: start; }
.nav-dd { position: relative; }
.nav-dd summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; }
.nav-dd summary::-webkit-details-marker { display: none; }
.nav-dd summary::after { content: "▾"; }
.nav-dd[open] summary::after { content: "▴"; }
.nav-dd ul { position: absolute; left: 0; top: calc(100% + 6px); width: max-content; min-width: 22em; max-width: calc(100vw - 2 * var(--margin)); background: var(--c-bg); border: var(--rule); z-index: 60; white-space: nowrap; }
.nav-dd li a { display: grid; grid-template-columns: auto auto; justify-content: space-between; column-gap: calc(var(--gutter) * 2); padding: 6px 10px; border-top: var(--rule); text-transform: uppercase; }
.nav-dd li:first-child a { border-top: 0; }
.nav-dd li a:hover { background: var(--c-accent); color: #000; text-decoration: none; }
.nav-dd li a .url { color: var(--c-mute); text-transform: none; }
.nav-dd li a:hover .url { color: #000; }
.nav-dd li.sub a { padding-left: 24px; text-transform: none; }
.nav-dd li.grp { border-top: 2px solid currentColor; padding: 8px 10px 2px; color: var(--c-mute); text-transform: uppercase; }
@media (max-width: 640px) { .site-header .brand-cell { grid-column: 1 / -1; } .nav-dd ul { width: calc(100vw - 2 * var(--margin)); min-width: 0; } .nav-dd li a { grid-template-columns: minmax(0, 1fr) auto; white-space: normal; } }
.landing .principle__body .rows { margin-top: var(--s1); }
.landing .rows li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--gutter); align-items: baseline; }
.landing .rows li a:hover { text-decoration: none; background: var(--c-accent); color: #000; }
.landing .rows li a .url { color: var(--c-mute); text-transform: none; white-space: nowrap; }
.section--dark .rows li a .url { color: #9A9A9A; }
.landing .rows li a:hover .url { color: #000; }
.landing .principle__body > p.t-label.t-mute { max-width: 42em; }
.landing .map figure.f-portrait { grid-column: 5 / span 3; aspect-ratio: 9 / 19.5; }
.landing .map figure.f-portrait img { object-position: top; }
.landing .map figure.f-wide { grid-column: 8 / -1; grid-row: 1; }
.landing .a-head__sub { max-width: 30em; }
.landing .a-head__links { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding-top: var(--s2); }
.landing .a-head__links a { grid-column: span 2; border-top: var(--rule); padding-top: 8px; }
@media (max-width: 1024px) { .landing .a-head__links a { grid-column: span 4; } .landing .map figure.f-portrait { grid-column: 1 / span 3; grid-row: 1; } .landing .map figure.f-wide { grid-column: 4 / -1; grid-row: 1; } }
@media (max-width: 640px)  { .landing .a-head__links a { grid-column: span 2; } .landing .rows li a { grid-template-columns: 1fr; } .landing .rows li a .url { white-space: normal; } .landing .map figure.f-portrait, .landing .map figure.f-wide { grid-column: 1 / -1; grid-row: auto; } }
/* phone: the chapter number sits in the 1-row (base) track of .principle and overflows the kicker + heading (same on the live article pages) —
   stack number, kicker, heading, body in auto rows and give the number the heading's 4-row line box */
@media (max-width: 640px) {
  .landing .principle { grid-template-rows: auto; }
  .landing .principle__num.t-display { line-height: calc(var(--base) * 4); }
  .landing .principle__num, .landing .principle__kicker, .landing .principle__head, .landing .principle__body { grid-column: 1 / -1; grid-row: auto; }
}
/* anleitung (maps.hybridsystems.at/anleitung, 2026-10-26): numbered steps, term rows, on-screen labels, phone figure rows */
.landing .ui { font-family: var(--font-mono); font-size: .92em; letter-spacing: 0; white-space: normal; background: color-mix(in srgb, currentColor 8%, transparent); padding: 0 .25em; }
.landing .anl-sub { margin-top: var(--s2); }
.landing .principle__body > .anl-sub:first-of-type { margin-top: var(--s1); }
.landing .principle__body > p + p, .landing .principle__body > .rows + p { margin-top: var(--s1); }
.landing .anl-steps { counter-reset: anl; margin-top: var(--s1); }
.landing .anl-steps li { counter-increment: anl; display: grid; grid-template-columns: 3ch minmax(0, 1fr); column-gap: var(--gutter); }
.landing .anl-steps li::before { content: counter(anl, decimal-leading-zero); color: var(--c-mute); }
.section--dark .anl-steps li::before { color: #9A9A9A; }
.landing .anl-defs { margin-top: var(--s1); }
.landing .anl-defs li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--gutter); }
.landing .anl-defs li > span:first-child { font-weight: 700; }
.landing .map figure.figrow.anl-phone img { max-height: 80vh; }
.landing .map + .map { padding-top: var(--s2); }
@media (max-width: 640px) {
  .landing .anl-defs li { grid-template-columns: 1fr; row-gap: 2px; }
  .landing .map figure.figrow.anl-phone { flex-wrap: nowrap; overflow-x: auto; }
  .landing .map figure.figrow.anl-phone img { flex: 0 0 78%; max-height: none; }
}