/* aiity.de
   Typographic, near-monochrome, no gradients. Headings are set in a system
   serif — the one deliberate choice that keeps this from looking like every
   other product page. One accent colour, used on links and nothing else.
   No webfonts: the site's own CSP forbids external requests. */

:root{
  --paper:#faf8f5;
  --ink:#191714;
  --ink-soft:#5d574e;
  --ink-faint:#8c857a;
  --rule:#e2ddd4;
  --accent:#4a3fb5;
  --measure:34rem;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#131211;
    --ink:#ece8e1;
    --ink-soft:#a49d92;
    --ink-faint:#79726a;
    --rule:#2c2926;
    --accent:#9b90ff;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{max-width:62rem; margin:0 auto; padding:0 2rem}
@media (max-width:640px){ .wrap{padding:0 1.4rem} }

a{color:var(--accent); text-decoration:none; text-underline-offset:.18em}
a:hover{text-decoration:underline}

/* ---- header ------------------------------------------------------------ */

header{border-bottom:1px solid var(--rule)}
.bar{display:flex; align-items:baseline; gap:2rem; padding-top:1.5rem; padding-bottom:1.5rem}
.wordmark{
  font:600 1.15rem/1 var(--sans);
  letter-spacing:-.02em; color:var(--ink);
}
.bar nav{margin-inline-start:auto; display:flex; gap:1.6rem; font-size:.95rem}
.bar nav a{color:var(--ink-soft)}
.bar nav a:hover{color:var(--ink)}

/* ---- opening ----------------------------------------------------------- */

.lede-block{padding:5.5rem 0 4.5rem; border-bottom:1px solid var(--rule)}
h1{
  font:400 clamp(2.1rem, 5.4vw, 3.55rem)/1.14 var(--serif);
  letter-spacing:-.012em;
  margin:0 0 2rem;
  max-width:21ch;
  text-wrap:balance;
}
.standfirst{
  max-width:var(--measure);
  margin:0 0 1.15rem;
  font-size:1.115rem;
  color:var(--ink-soft);
}
.status{
  margin:2.4rem 0 0;
  font:400 .85rem/1 var(--mono);
  letter-spacing:.02em;
  color:var(--ink-faint);
}

/* ---- sections: label left, prose right --------------------------------- */

section{border-bottom:1px solid var(--rule)}
section:last-of-type{border-bottom:0}
.two-col{
  display:grid;
  grid-template-columns:13rem 1fr;
  gap:0 3.5rem;
  padding:3.6rem 2rem;
}
@media (max-width:760px){
  .two-col{grid-template-columns:1fr; gap:1.1rem; padding-left:1.4rem; padding-right:1.4rem}
}
.two-col h2{
  margin:.35rem 0 0;
  font:600 .8rem/1.4 var(--sans);
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.col-body{max-width:var(--measure)}
.col-body p{margin:0 0 1.15rem}
.col-body p:last-child{margin-bottom:0}

/* ---- the run-through list ---------------------------------------------- */

dl.run{margin:0}
dl.run dt{
  font:500 1.06rem/1.4 var(--sans);
  margin:0 0 .3rem;
}
dl.run dd{
  margin:0 0 1.6rem;
  color:var(--ink-soft);
}
dl.run dd:last-child{margin-bottom:0}

/* ---- provider table ---------------------------------------------------- */

table.spec{
  width:100%;
  border-collapse:collapse;
  margin:1.7rem 0;
  text-align:start;
}
table.spec th{
  width:9.5rem;
  padding-block:.95rem;
  padding-inline:0 1.2rem;
  border-top:1px solid var(--rule);
  vertical-align:baseline;
  font:500 1rem/1.5 var(--sans);
  color:var(--ink);
}
table.spec td{
  padding:.95rem 0;
  border-top:1px solid var(--rule);
  vertical-align:baseline;
  color:var(--ink-soft);
}
table.spec tr:last-child th,
table.spec tr:last-child td{border-bottom:1px solid var(--rule)}
@media (max-width:560px){
  table.spec, table.spec tr, table.spec th, table.spec td{display:block; width:auto}
  table.spec th{border-top:1px solid var(--rule); padding-bottom:.15rem}
  table.spec td{border-top:0; padding-top:0}
  table.spec tr:last-child td{border-bottom:1px solid var(--rule); padding-bottom:.95rem}
}
.mono{
  display:block;
  margin-top:.4rem;
  font:400 .83rem/1.65 var(--mono);
  color:var(--ink-faint);
}

.aside{
  font-size:.95rem;
  color:var(--ink-faint);
}

/* ---- the one loud line ------------------------------------------------- */

.pull{
  font:400 2.6rem/1 var(--serif);
  margin:0 0 1.25rem !important;
  letter-spacing:-.015em;
}
.more{font-size:.98rem}

/* ---- footer ------------------------------------------------------------ */

footer{border-top:1px solid var(--rule); margin-top:0}
footer .wrap{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:1rem 1.8rem;
  padding-top:2.2rem; padding-bottom:3.4rem;
}
footer .mark{margin:0; font-size:.92rem; color:var(--ink-faint)}
footer nav{margin-inline-start:auto; display:flex; gap:1.6rem; font-size:.92rem}
footer nav a{color:var(--ink-soft)}

/* ---- long-form pages (Datenschutz / Impressum) -------------------------- */

.doc{padding:4rem 2rem 5rem; max-width:44rem; margin:0 auto}
@media (max-width:640px){ .doc{padding:3rem 1.4rem 4rem} }
.doc h1{
  font:400 clamp(1.9rem,4.6vw,2.6rem)/1.15 var(--serif);
  letter-spacing:-.012em;
  margin:0 0 .5rem;
  max-width:none;
}
.doc h2{
  font:600 1.02rem/1.45 var(--sans);
  letter-spacing:0; text-transform:none; color:var(--ink);
  margin:2.6rem 0 .6rem;
}
.doc p, .doc ul{margin:0 0 1.05rem}
.doc ul{padding-inline-start:1.15rem}
.doc li{margin-bottom:.55rem}
.meta{
  color:var(--ink-faint); font:400 .85rem/1.6 var(--mono);
  margin-bottom:2.4rem !important;
}
.tldr{
  border-inline-start:2px solid var(--accent);
  padding-block:.15rem;
  padding-inline-start:1.3rem;
  margin:0 0 2.6rem;
  color:var(--ink-soft);
}
.tldr b{color:var(--ink)}
.warn{
  border-inline-start:2px solid #c8862a;
  padding-block:.15rem;
  padding-inline-start:1.3rem;
  margin:0 0 2.4rem;
  font-size:.98rem;
  color:var(--ink-soft);
}
.warn b{color:var(--ink)}
.address{
  font:400 .95rem/1.85 var(--sans);
  color:var(--ink);
  border-inline-start:2px solid var(--rule);
  padding-inline-start:1.3rem;
}
.placeholder{
  font:400 .9rem/1.95 var(--mono);
  color:var(--ink-faint);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:1rem 0;
}
.back{margin-top:3.2rem !important; font-size:.95rem}

/* ---- footer: legal row + language row ---------------------------------- */

.foot-top{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:1rem 1.8rem;
  width:100%;
}
footer .wrap{flex-direction:column; align-items:stretch}
.langs{
  display:flex; flex-wrap:wrap; gap:.35rem 1.15rem;
  margin-top:1.5rem; padding-top:1.4rem;
  border-top:1px solid var(--rule);
  font-size:.9rem;
}
.langs a{color:var(--ink-faint)}
.langs a:hover{color:var(--ink)}
.langs [aria-current]{color:var(--ink)}

/* ---- right-to-left ------------------------------------------------------ */
/* Arabic. Layout mirrors through logical properties above; these are the few
   places where a value has to flip rather than a property name. Latin runs
   inside the page (the wordmark, the provider names) carry dir="ltr" in the
   markup so they are not reordered. */

.rtl h1, .rtl .pull{letter-spacing:0}
.rtl .status, .rtl .meta{letter-spacing:0}
.rtl .two-col h2{letter-spacing:.02em}
.rtl .mono{direction:ltr; text-align:start}