/* Verlängerungs-Countdown für Aufenthaltstitel.
   Ergänzt assets/tools.css. Durchgängig logische Eigenschaften
   (inline-start/-end statt left/right), damit dieselbe Datei für Deutsch
   und für Arabisch und Persisch funktioniert und kein zweites,
   gespiegeltes Stylesheet nötig ist. */

/* ---- Sprachumschalter ---- */
.sprachen{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 14px;font-size:12px}
.sprachen a,.sprachen span{padding:4px 11px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);
  color:var(--ink-3);text-decoration:none;white-space:nowrap}
.sprachen span[aria-current="true"]{color:var(--ink);background:var(--surface-2);font-weight:600}
.sprachen a:hover{color:var(--accent);border-color:var(--accent)}

/* ---- Hinweis, dass es die Seite auch in der Browsersprache gibt ---- */
.sprachhinweis{display:flex;align-items:center;gap:10px;margin:0 0 12px;
  padding:9px 12px;border-radius:var(--radius-sm);
  background:var(--accent-soft);border:1px solid var(--line);font-size:13px}
.sprachhinweis a{color:var(--accent);text-decoration:underline;
  text-underline-offset:2px;flex:1 1 auto}
.sprachhinweis .zu{flex:0 0 auto;padding:0 7px;line-height:1.4;font-size:15px;
  background:none;border:0;color:var(--ink-4);cursor:pointer}
.sprachhinweis .zu:hover{color:var(--ink-2)}

/* ---- Glossar der deutschen Begriffe ---- */
.glossar{margin-top:30px}
.glossarliste{margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px 20px}
.glossarliste li{padding-block:6px;border-block-end:1px solid var(--line-soft)}
.glossarliste b{display:block;font-size:13.6px;font-weight:600;color:var(--ink);
  unicode-bidi:isolate}
.glossarliste span{display:block;font-size:12.4px;color:var(--ink-3);line-height:1.5}

.uebersetzt{margin:0 0 12px;font-size:12.2px;color:var(--ink-4);line-height:1.5}
.uebersetzt a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.uebersetzt a:hover{color:var(--accent)}

/* ---- Zeitleiste ---- */
.zeitleiste{margin:0;padding:0;list-style:none}
.zeitleiste li{position:relative;padding-block:0 20px;padding-inline-start:30px;
  border-inline-start:2px solid var(--line);margin-inline-start:7px}
.zeitleiste li:last-child{border-inline-start-color:transparent;padding-block-end:0}
.zeitleiste li::before{content:"";position:absolute;inset-inline-start:-8px;top:3px;
  width:14px;height:14px;border-radius:50%;background:var(--surface);
  border:2px solid var(--line-soft);box-shadow:0 0 0 3px var(--paper)}
.zeitleiste li.ist-jetzt::before{border-color:var(--accent);background:var(--accent)}
.zeitleiste li.ist-vorbei::before{background:var(--line);border-color:var(--line)}
.zeitleiste li.ist-hart::before{border-color:var(--hit);background:var(--hit)}

.zl-datum{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;font-weight:600;
  color:var(--ink);display:block;letter-spacing:-.01em}
.zeitleiste li.ist-vorbei .zl-datum{color:var(--ink-4)}
.zeitleiste li.ist-vorbei .zl-datum bdi,
.zeitleiste li.ist-vorbei .zl-datum{text-decoration:line-through}
.zl-was{display:block;font-size:13.6px;color:var(--ink-2);margin-top:2px;line-height:1.5}
.zl-dazu{display:block;font-size:12.2px;color:var(--ink-4);margin-top:3px;
  line-height:1.55;max-width:62ch}
.zl-tage{display:inline-block;margin-inline-start:8px;padding:1px 8px;border-radius:999px;
  font-size:11px;font-weight:600;background:var(--surface-2);color:var(--ink-3);
  font-family:"IBM Plex Sans",sans-serif;vertical-align:1px}

/* ---- Unterlagenliste ---- */
.liste{margin:0;padding:0;list-style:none;columns:2;column-gap:26px}
@media (max-width:640px){.liste{columns:1}}
.liste li{break-inside:avoid;padding-block:7px;padding-inline-start:25px;position:relative;
  font-size:13.5px;color:var(--ink-2);line-height:1.5;
  border-block-end:1px solid var(--line-soft)}
.liste li::before{content:"";position:absolute;inset-inline-start:2px;top:11px;
  width:11px;height:11px;border:1.5px solid var(--ink-4);border-radius:3px}
.liste li b{color:var(--ink);font-weight:600}
.liste li span{display:block;font-size:12px;color:var(--ink-4);margin-top:1px}
/* Der deutsche Begriff steht auf den übersetzten Seiten daneben. Am Schalter
   wird nach dem deutschen Wort gefragt, nicht nach der Übersetzung. */
.liste li .deutsch{display:inline-block;margin-inline-start:6px;padding:0 6px;
  border-radius:4px;background:var(--surface-2);color:var(--ink-3);
  font-size:11.5px;font-weight:400;vertical-align:1px}

/* ---- Merksätze ---- */
.merksatz{margin:14px 0 0;padding:13px 15px;border-radius:var(--radius-sm);
  background:var(--caution-soft);border:1px solid var(--line);
  font-size:13px;line-height:1.6;color:var(--ink-2)}
.merksatz b{color:var(--ink)}
.merksatz.warn{background:var(--hit-soft)}

.behoerde{margin:14px 0 0;font-size:12.8px;color:var(--ink-3);line-height:1.6}
.behoerde a{color:var(--accent)}

/* ---- Rechts nach links ----
   Die Schriften des Grundgerüsts decken Arabisch und Persisch nicht ab.
   Deshalb hier eine eigene Kette; der Systemfont der Plattform ist für
   diese Schriften fast immer die bessere Wahl als ein nachgeladener. */
[dir="rtl"] body,[dir="rtl"] .wrap{
  font-family:"Noto Naskh Arabic","Geeza Pro","Segoe UI",Tahoma,
    "IBM Plex Sans",-apple-system,sans-serif}
[dir="rtl"] h1,[dir="rtl"] .kopf{font-family:inherit;letter-spacing:0}
[dir="rtl"] .big{letter-spacing:0}
/* Zahlen und lateinische Bruchstücke bleiben von links nach rechts. bdi
   isoliert sie, sonst zieht der Bidi-Algorithmus Punkte und Paragraphen
   ans falsche Zeilenende. */
[dir="rtl"] bdi{unicode-bidi:isolate}
[dir="rtl"] .zl-datum{font-family:"IBM Plex Mono",ui-monospace,monospace}
[dir="rtl"] .liste li .deutsch{unicode-bidi:isolate}
/* Der Pfeil auf den Kacheln zeigt in Leserichtung. */
[dir="rtl"] .kachel .pfeil{transform:scaleX(-1)}

/* ---- Drucken: die Checkliste ist zum Mitnehmen gedacht ---- */
@media print{
  .tnav,.sprachen,.uebersetzt,.aktionsleiste,.weitere,footer,
  .garantie,#formBox,.druckweg{display:none !important}
  body{background:#fff;font-size:11pt}
  .liste{columns:2}
  .zeitleiste li{break-inside:avoid}
  .result{border:1px solid #ccc;box-shadow:none}
}