/* The base of the pages (colours in the light and the dark scheme, links, tables, code, buttons) is the page base of the
   site frame (lernapps-page.css, linked before this file). Here: what only this site has. */
.zurueck { margin: 0.5rem 0 0; font-size: 0.95rem; }
img { max-width: 100%; height: auto; }

/* The journey on the start page: vertical on a phone, rows of three from 48rem; the colour says who acts. */
.flow { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 1.25rem; counter-reset: flow; }
.flow-step { position: relative; padding-left: 2.75rem; counter-increment: flow; overflow-wrap: anywhere; --flow: #475569; --flow-bg: #f1f5f9; --flow-fg: #334155; }
.flow-step[data-who="you"] { --flow: #1d4ed8; --flow-bg: #dbeafe; --flow-fg: #1e3a8a; }
.flow-step[data-who="assistant"] { --flow: #6d28d9; --flow-bg: #ede9fe; --flow-fg: #4c1d95; }
.flow-step[data-who="platform"] { --flow: #047857; --flow-bg: #d1fae5; --flow-fg: #065f46; }
.flow-step::before { content: counter(flow); position: absolute; left: 0; top: 0; z-index: 1; width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center; font-weight: 700; background: #fff; color: var(--flow); border: 2px solid var(--flow); box-sizing: border-box; }
.flow-step:not(:last-child)::after { content: ""; position: absolute; left: calc(1rem - 1px); top: 2rem; bottom: -1.25rem; width: 2px; background: #94a3b8; }
.flow-who { display: inline-block; font-size: 0.8rem; font-weight: 600; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--flow-bg); color: var(--flow-fg); }
.flow-step h3 { margin: 0.25rem 0 0; font-size: 1rem; line-height: 1.3; }
.flow-step p { margin: 0.25rem 0 0; font-size: 0.9rem; }
@media (min-width: 48rem) {
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .flow-step { padding-left: 0; padding-top: 2.75rem; }
  .flow-step:not(:last-child)::after { left: 2rem; right: -1rem; top: calc(1rem - 1px); bottom: auto; width: auto; height: 2px; }
  .flow-step:nth-child(3n)::after { display: none; }
}
.flow-step[data-who="both"] { --flow: #1d4ed8; --flow-fg: #1e293b; }
.flow-step[data-who="both"]::before { border-color: #1d4ed8 #047857 #047857 #1d4ed8; }
.flow-step[data-who="both"] .flow-who { background: linear-gradient(90deg, #dbeafe, #d1fae5); }

/* The example of the start page: three cards, each a picture and what it shows, each leading to its proof. */
.cards { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.card { border: 1px solid var(--la-line); border-radius: 0.75rem; overflow: hidden; background: var(--la-box); }
.card a { display: block; color: inherit; text-decoration: none; height: 100%; }
.card a:hover, .card a:focus-visible { outline: 2px solid var(--la-link); outline-offset: -2px; }
.card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; background: #0f172a; }
.card h3 { margin: 0.75rem 0.9rem 0; font-size: 1rem; line-height: 1.3; }
.card p { margin: 0.25rem 0.9rem 0.9rem; font-size: 0.9rem; color: var(--la-muted); }