@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@600&text=Tap%26Order&display=swap");   /* the wordmark beside the logo */
/* Legal pages (Impressum, Datenschutz): the landing page's header and footer around one plain column of text.
   The admin portal rewrites parts of these files in place, so the selectors below follow ITS markup:
   <article class="legal-article"> with plain h2, p, ul, li, a, strong inside, and on the Impressum
   <div class="impressum-grid"> with <div class="impressum-block"><h3>…</h3><p>…</p></div>. */
:root {
  --p-bg: #eff0f1; --p-surface: #e3e5e7; --p-ink: #1b1e22; --p-muted: #565c64;
  --p-accent: #235ae8; --p-accent-ink: #eff0f1; --p-action: #235ae8; --p-action-ink: #eff0f1;
  --p-inv-bg: #1b1e22; --p-inv-surface: #272a2e; --p-inv-ink: #eff0f1; --p-inv-muted: #97999b;
  --p-inv-accent: #eff0f1; --p-inv-accent-ink: #1b1e22; --p-inv-action: #eff0f1; --p-inv-action-ink: #1b1e22;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-weight: 400; --display-tracking: -0.03em; --display-tracking-xl: -0.04em;
}
.nav__logo img { height: 32px; width: 32px; }
body { display: flex; flex-direction: column; min-height: 100svh; }
.legal-hero { padding-top: calc(var(--nav) + var(--s-9)); padding-bottom: var(--s-7); }
.legal-hero-inner, .legal-wrapper { width: 100%; max-width: 820px; margin-inline: auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.legal-hero h1 { font-size: clamp(36px, 6vw, 56px); line-height: 1.05; }
.legal-hero-sub { margin-top: var(--s-3); color: var(--muted); font-size: var(--t-lead); }
.legal-wrapper { flex: 1 0 auto; padding-bottom: var(--s-10, 96px); }
.legal-article { padding: var(--s-8); border-radius: var(--r-lg); background: var(--p-surface); font-size: var(--t-body); line-height: 1.7; overflow-wrap: anywhere; }
.legal-article h2 { margin: var(--s-7) 0 var(--s-3); font: 500 22px/1.25 var(--font-display); letter-spacing: -0.02em; }
.legal-article > h2:first-child { margin-top: 0; }
.legal-article h3 { margin: var(--s-5) 0 var(--s-2); font: 500 var(--t-card, 18px)/1.3 var(--font-text); }
.legal-article p { margin: 0 0 var(--s-4); color: var(--muted); max-width: 70ch; }
.legal-article > :last-child, .legal-article li:last-child { margin-bottom: 0; }
.legal-article ul, .legal-article ol { margin: 0 0 var(--s-4); padding-left: 1.3em; color: var(--muted); max-width: 70ch; }
.legal-article li { margin-bottom: var(--s-2); }
.legal-article strong { color: var(--ink); font-weight: 600; }
.legal-article a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, var(--ink) 35%, transparent); }
.legal-article a:hover { text-decoration-color: var(--p-action); color: var(--p-action); }
.legal-article a:focus-visible { outline: 3px solid var(--p-action); outline-offset: 2px; }
.impressum-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-6); }
.impressum-block h3 { margin: 0 0 var(--s-3); font: 500 var(--t-small)/1.4 var(--font-text); color: var(--muted); }
.impressum-block p { margin: 0; color: var(--ink); line-height: 1.7; }
@media (max-width: 767px) { .impressum-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } .legal-article { padding: var(--s-5); } .legal-hero { padding-top: calc(var(--nav) + var(--s-7)); padding-bottom: var(--s-5); } }
footer.closing { height: auto !important; min-height: 0 !important; padding-top: var(--s-8) !important; }
footer.closing > .wrap { gap: var(--s-7) !important; }
.closing__links { gap: var(--s-6); }
.footer.closing :is(h3, h4):not(.closing__cta *) { font-size: var(--t-body); margin-bottom: var(--s-3); }
.footer.closing ul { font-size: var(--t-body); gap: var(--s-2); }
.footer.closing .footer__legal { font-size: var(--t-small); }
.closing__cta .section-head--split > div { min-width: 0; }
.closing__cta .t-lead { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  .legal-hero-inner > *, .legal-article { animation: legal-in .6s cubic-bezier(.22, 1, .36, 1) both; }
  .legal-article { animation-delay: 90ms; }
  @keyframes legal-in { from { opacity: 0; transform: translateY(12px); } }
}
/* Mietbedingungen: the download link the admin portal keeps up to date (<a href="…" download class="legal-download">) */
.legal-article a.legal-download { display: inline-flex; align-items: center; justify-content: center; min-height: var(--btn-h, 44px); margin-top: var(--s-5); padding: 0 var(--s-5);
  border-radius: var(--r-btn, 8px); background: var(--p-action); color: var(--p-action-ink); font-weight: 500; text-decoration: none; }
.legal-article a.legal-download:hover { background: color-mix(in oklab, var(--p-action) 88%, #000); color: var(--p-action-ink); }
.legal-article a.legal-download i { display: none; }
/* Gebühren: the table of payment methods and the lines under it */
.legal-article hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }
.fees-table-wrap { margin: var(--s-5) 0 var(--s-3); overflow-x: auto; border-radius: var(--r-md); background: var(--p-bg); border: 1px solid var(--line); }
.fees-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: var(--t-body); line-height: 1.45; }
.fees-table th { text-align: left; padding: var(--s-3) var(--s-4); font: 500 var(--t-small)/1.4 var(--font-text); color: var(--muted); border-bottom: 1px solid var(--line-strong); }
.fees-table td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink); }
.fees-table td:last-child { color: var(--muted); }
.fees-table tr:last-child td { border-bottom: 0; }
.fees-table .grp td { padding-top: var(--s-4); font-weight: 600; color: var(--ink); background: color-mix(in oklab, var(--p-ink) 4%, transparent); }
.legal-article .fees-table-note, .legal-article .fees-source { font-size: var(--t-small); }
.legal-article ul.scheme-links { list-style: none; padding-left: 0; }
@media (max-width: 639px) { .fees-table { min-width: 0; } .fees-table th, .fees-table td { padding: var(--s-3); } }
/* Installationsseite: two cards (iPhone, Android), then the explanations */
.inst-wrapper { width: 100%; max-width: 980px; margin-inline: auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); padding-bottom: var(--s-10, 96px); flex: 1 0 auto; display: grid; gap: var(--s-5); }
.legal-hero-inner.inst-head { max-width: 980px; }
.inst-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.inst-card, .inst-block { padding: var(--s-7); border-radius: var(--r-lg); background: var(--p-surface); }
.inst-card { display: flex; flex-direction: column; gap: var(--s-4); }
.inst-card h2, .inst-block h2 { font: 500 24px/1.2 var(--font-display); letter-spacing: -0.02em; }
.inst-card .sub { font-size: var(--t-small); color: var(--muted); margin-top: 2px; }
.inst-card p, .inst-block p, .inst-block li { color: var(--muted); line-height: 1.65; max-width: 70ch; }
.inst-card .foot { margin-top: auto; display: grid; gap: var(--s-4); }
.inst-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--t-small); color: var(--muted); }
.inst-card .btn { justify-content: center; }
.inst-block { display: grid; gap: var(--s-4); }
.inst-block h3 { margin-top: var(--s-3); font: 500 var(--t-card, 18px)/1.3 var(--font-text); }
.inst-block strong { color: var(--ink); font-weight: 600; }
.inst-block ul, .inst-block ol { margin: 0; padding-left: 1.3em; display: grid; gap: var(--s-3); }
.inst-block ol { padding-left: 0; list-style: none; counter-reset: schritt; }
.inst-block ol li { counter-increment: schritt; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s-3); max-width: none; }
.inst-block ol li::before { content: counter(schritt); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line-strong); font: 500 var(--t-small)/1 var(--font-text); color: var(--ink); }
.inst-block ol li strong { display: block; }
.inst-quote { color: var(--ink); background: var(--p-bg); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.inst-check, .inst-warn { padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--p-bg); border: 1px solid var(--line); }
.inst-check .lbl { display: block; font-size: var(--t-small); color: var(--muted); margin-bottom: var(--s-2); }
.inst-check code { font: 400 14px/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; overflow-wrap: anywhere; color: var(--ink); }
.inst-warn { border-color: color-mix(in oklab, #b45309 55%, var(--line)); color: var(--ink); }
.inst-help { text-align: center; justify-items: center; }
.inst-help .mail { font: 500 var(--t-lead)/1.4 var(--font-text); color: var(--p-action); text-decoration: underline; text-underline-offset: 4px; }
.inst-block a, .inst-card p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) { .inst-grid { grid-template-columns: minmax(0, 1fr); } .inst-card, .inst-block { padding: var(--s-5); } }
.inst-block ul { list-style: disc; } .inst-block ul li::marker { color: var(--p-action); }
/* the two platform marks on the installation page */
.inst-kopf { display: flex; align-items: center; gap: var(--s-4); }
.inst-badge { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--p-ink); color: var(--p-bg); }
.inst-badge .inst-ic { width: 26px; height: 26px; }
.inst-card .btn { gap: var(--s-2); }
.inst-card .btn .inst-ic { width: 18px; height: 18px; flex: none; }

/* the name beside the logo is set in a rounder face than the text, to go with the mark */
.nav__logo { font-family: "Outfit", var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; }