@charset "UTF-8";
/* Startseite www: Tokens und Schrift aus der App (Symlinks nach web/), siehe docs/betrieb/ARCHITEKTUR.md. */

@font-face {
  font-family: Inter; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(../fonts/inter.woff2) format("woff2");
}
@font-face {
  font-family: "Inter Fallback"; src: local("Arial");
  size-adjust: 107.4%; ascent-override: 90.2%; descent-override: 22.48%; line-gap-override: 0%;
}

:root { --page-width: var(--layout-width); --page-gutter: var(--space-lg); }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  display: flex; flex-direction: column; min-height: 100vh;
  background: var(--color-canvas); color: var(--color-text);
  font-family: var(--type-family-sans); font-size: var(--type-prose); line-height: var(--type-leading);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--color-text-strong); font-weight: 600; line-height: var(--type-leading-heading); text-wrap: balance; }
p, ul { margin-bottom: var(--space-sm); }
ul { padding-left: var(--space-lg); }
a { color: var(--color-link); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset-text); }

.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }

.page { width: 100%; max-width: calc(var(--page-width) + 2 * var(--page-gutter)); margin: 0 auto; padding: 0 var(--page-gutter); }

main { flex: 1; }

.skip { position: absolute; left: var(--space-sm); top: -100px; z-index: var(--z-dropdown); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-3); background: var(--color-surface); }
.skip:focus { top: var(--space-sm); }

.site-header { border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.site-header .page {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-xs) var(--space-lg); min-height: var(--layout-header); padding-block: var(--space-sm);
}

.brand { display: flex; align-items: center; gap: 6px; color: var(--color-text-strong); text-decoration: none; }
.brand:is(:link, :visited, :hover) { color: var(--color-text-strong); text-decoration: none; }
.brand-mark { flex: none; --logo-ring: var(--color-text-strong); --logo-kreuz: var(--color-logo); }
.brand-name { font-family: "Myriad Pro", "Segoe UI", "Open Sans", "Helvetica Neue", Arial, sans-serif; font-size: 27px; line-height: 36px; white-space: nowrap; }

.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); font-size: var(--type-base); }
.site-nav a:not(.button) { color: var(--color-text); text-decoration: none; }
.site-nav a:not(.button):hover { color: var(--color-text-strong); text-decoration: underline; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: calc(var(--form-control-height) + 2 * var(--space-2xs)); padding: 0 var(--space-md);
  border: 1px solid var(--color-border); border-radius: var(--radius-control);
  background: var(--color-surface); color: var(--color-text-strong);
  font-size: var(--type-base); font-weight: 500; line-height: 1.25rem; text-decoration: none;
  transition: background-color var(--motion-fast), border-color var(--motion-fast);
}
.button:is(:link, :visited, :hover) { color: var(--color-text-strong); text-decoration: none; }
.button:is(:hover, :focus-visible) { background: var(--color-surface-control-hover); }
.button:active { background: var(--color-surface-control-active); }
.button:focus-visible { outline-offset: var(--focus-ring-offset); }
.button--primary { border-color: var(--color-action); background: var(--color-action); font-weight: 600; }
.button--primary:is(:link, :visited, :hover) { color: var(--color-action-text); }
.button--primary:is(:hover, :focus-visible) { border-color: var(--color-action-hover); background: var(--color-action-hover); }
.button--primary:active { border-color: var(--color-action-active); background: var(--color-action-active); }
.button--lg { min-height: 2.75rem; padding: 0 var(--space-lg); font-size: var(--type-prose); }

.hero .page {
  display: grid; grid-template-columns: minmax(0, 1fr) 24rem; align-items: center; gap: var(--space-2xl) calc(2 * var(--space-2xl));
  padding-block: calc(2 * var(--space-2xl));
}
.hero h1 { margin-bottom: var(--space-md); font-size: 2.25rem; letter-spacing: -0.01em; }
.hero-lead { max-width: 30rem; margin-bottom: var(--space-xl); color: var(--color-text); font-size: var(--type-xl); line-height: var(--type-leading-prose); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); margin: 0; }

.box { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-box); background: var(--color-surface); box-shadow: var(--shadow-1); }

.unis { padding: var(--space-lg); scroll-margin-top: var(--space-lg); }
.unis h2 { margin-bottom: var(--space-2xs); font-size: var(--type-lg); }
.unis-hint { margin-bottom: var(--space-md); color: var(--color-text-muted); font-size: var(--type-base); }
.unis-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin: 0 0 var(--space-md); padding: 0; list-style: none; }
.unis-list .button { justify-content: space-between; width: 100%; }
.unis-list .icon { color: var(--color-text-muted); }
.unis-missing { margin: 0; padding-top: var(--space-md); border-top: 1px solid var(--color-border-subtle); font-size: var(--type-base); }

.features { border-block: 1px solid var(--color-border-subtle); background: var(--color-surface); }
.features .page { padding-block: calc(2 * var(--space-2xl)); }
.features h2 { margin-bottom: calc(1.5 * var(--space-2xl)); font-size: var(--type-3xl); text-align: center; }
.feature-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xl); margin: 0 0 calc(1.5 * var(--space-2xl)); padding: 0; list-style: none; }
.feature h3 { margin-bottom: var(--space-xs); font-size: var(--type-lg); }
.feature p { margin: 0; color: var(--color-text); }
.feature-icon {
  display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: var(--space-md);
  border-radius: 50%; background: var(--color-surface-control); color: var(--color-text-strong);
}
.feature-icon .icon { width: 1.5rem; height: 1.5rem; }
.features .actions { justify-content: center; }

.site-footer { color: var(--color-text-muted); font-size: var(--type-base); }
.site-footer .page { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-lg); padding-block: var(--space-xl); }
.site-footer ul { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: 0; padding: 0; list-style: none; }
.site-footer p { margin: 0; }

.legal { padding-block: var(--space-2xl); }
.legal .box { max-width: 48rem; padding: var(--space-2xl); }
.legal h1 { margin-bottom: var(--space-lg); font-size: var(--type-3xl); }
.legal h2 { margin: var(--space-xl) 0 var(--space-xs); font-size: var(--type-lg); }
.legal p, .legal li { line-height: var(--type-leading-prose); overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .hero .page { grid-template-columns: 1fr; padding-block: var(--space-2xl); }
  .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  :root { --page-gutter: var(--space-md); }
  .hero h1 { font-size: 1.75rem; }
  .hero-lead { font-size: var(--type-lg); }
  .feature-list { grid-template-columns: 1fr; }
  .legal .box { padding: var(--space-lg); }
}