/* Wege von der Türkei nach Deutschland.
   Ergänzt assets/tools.css und benutzt dessen Farben und Maße.
   Durchgängig logische Eigenschaften, damit später eine Sprache mit
   anderer Leserichtung ohne zweites Stylesheet dazukommen kann. */

/* ---- Formular ---- */
.fgruppe{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:14px}
.fgruppe h3{margin:0 0 14px;font-size:15px;font-weight:600;display:flex;align-items:center;gap:10px}
.fgruppe h3 .zahl{display:inline-flex;align-items:center;justify-content:center;
  inline-size:22px;block-size:22px;border-radius:999px;background:var(--accent-soft);
  color:var(--accent);font-size:12px;font-weight:600;flex:0 0 auto}
.fgruppe h3 .dazu{font-weight:400;color:var(--ink-4);font-size:12.5px}

.felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.felder label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink-3)}
.felder select,.felder input{font:inherit;font-size:14px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:9px 10px;inline-size:100%}
.felder select:focus,.felder input:focus{outline:2px solid var(--accent);outline-offset:1px}
.felder .opt{color:var(--ink-4)}
.felder input::placeholder{color:var(--platzhalter)}

.aktionsleiste{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px}
.aktionsleiste .fuellt{flex:1 1 auto}
button.primary{font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  background:var(--accent);color:#fff;border:0;border-radius:var(--radius-sm);padding:10px 18px}
button.ghost{font:inherit;font-size:13px;cursor:pointer;background:transparent;
  color:var(--ink-3);border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 14px}
button.ghost:hover{color:var(--ink);background:var(--surface-2)}

/* ---- Punkte ---- */
.punkte{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;margin-top:22px;box-shadow:var(--shadow)}
.punkte .summe{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.punkte .zahl{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:44px;
  font-weight:600;line-height:1;color:var(--ink)}
.punkte .zahl.reicht{color:var(--clean)}
.punkte .zahl.reicht-nicht{color:var(--caution)}
.punkte .von{color:var(--ink-4);font-size:13px}
.punkte .satz{margin:0 0 14px;color:var(--ink-2);font-size:13.5px}
.punkteliste{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-soft)}
.punkteliste li{display:flex;gap:12px;align-items:baseline;padding:8px 0;
  border-bottom:1px solid var(--line-soft);font-size:13.5px}
.punkteliste li:last-child{border-bottom:0}
.punkteliste .p{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:600;
  inline-size:34px;flex:0 0 auto;color:var(--clean)}
.punkteliste .p.null{color:var(--ink-4);font-weight:400}
.punkteliste .was{color:var(--ink-2)}
.punkteliste li.aus .was{color:var(--ink-4)}

/* ---- Wege ---- */
.wege{margin-top:26px}
.weg{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  border-inline-start:4px solid var(--line);padding:18px 20px;margin-bottom:12px}
.weg.offen{border-inline-start-color:var(--clean)}
.weg.unklar{border-inline-start-color:var(--accent)}
.weg.fast{border-inline-start-color:var(--caution)}
.weg.zu{border-inline-start-color:var(--line);opacity:.72}
.weg .kopfzeile{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:4px}
.weg b{font-size:16px;font-weight:600;line-height:1.3}
.weg .norm{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;color:var(--ink-4);
  white-space:nowrap}
.weg .marke{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px}
.weg.offen .marke{background:var(--clean-soft);color:var(--clean)}
.weg.unklar .marke{background:var(--accent-soft);color:var(--accent)}
.weg.fast .marke{background:var(--caution-soft);color:var(--caution)}
.weg.zu .marke{background:var(--surface-2);color:var(--ink-4)}
.weg .beschreibung{margin:0 0 12px;color:var(--ink-2);font-size:13.5px;line-height:1.55}
.weg ul{list-style:none;margin:0;padding:0}
.weg ul li{display:flex;gap:9px;align-items:baseline;padding:5px 0;font-size:13.5px;
  color:var(--ink-2);line-height:1.5}
.weg ul li .zeichen{inline-size:15px;flex:0 0 auto;font-weight:600}
.weg ul li.ja .zeichen{color:var(--clean)}
.weg ul li.nein .zeichen{color:var(--caution)}
.weg ul li.offen .zeichen{color:var(--ink-4)}
.weg ul li.nein .was{color:var(--ink)}
.weg .fakten{display:flex;gap:22px;flex-wrap:wrap;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--ink-3)}
.weg .fakten b{font-size:12.5px;font-weight:600;color:var(--ink-2);display:block}

/* ---- Schrittfolge je Weg ---- */
.schritte{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft)}
.schritte summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--accent);
  list-style:none}
.schritte summary::-webkit-details-marker{display:none}
.schritte summary::before{content:"▸ ";color:var(--ink-4)}
.schritte[open] summary::before{content:"▾ "}
.schritte ol{margin:12px 0 0;padding-inline-start:0;counter-reset:schritt;
  list-style:none;display:grid;gap:10px}
.schritte ol li{counter-increment:schritt;position:relative;
  padding-inline-start:30px;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.schritte ol li::before{content:counter(schritt);position:absolute;inset-inline-start:0;
  top:1px;inline-size:21px;block-size:21px;border-radius:999px;
  background:var(--surface-2);color:var(--ink-3);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;
  font-weight:600;display:flex;align-items:center;justify-content:center}
.schritte ol li b{font-weight:600;color:var(--ink)}
.schritte ol li strong{font-weight:600;color:var(--hit)}

/* ---- Statische Blöcke ---- */
.sec-head{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-4);margin:34px 0 12px}
.sec-head.eng{margin-top:22px}

.faktenliste{list-style:none;margin:0;padding:0}
.faktenliste li{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;margin-bottom:10px}
.faktenliste b{display:block;font-size:14.5px;font-weight:600;margin-bottom:5px;line-height:1.35}
.faktenliste p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.faktenliste .norm{display:inline-block;margin-top:8px;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11.5px;color:var(--ink-4)}
.faktenliste li.warnung{border-inline-start:4px solid var(--hit)}
.faktenliste li.warnung b{color:var(--hit)}

.tabelle{inline-size:100%;border-collapse:collapse;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:13.5px}
.tabelle th{text-align:start;font-size:11.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-4);padding:11px 14px;background:var(--surface-2);
  border-bottom:1px solid var(--line)}
.tabelle td{padding:11px 14px;border-bottom:1px solid var(--line-soft);color:var(--ink-2);
  vertical-align:top;line-height:1.5}
.tabelle tr:last-child td{border-bottom:0}
.tabelle td.betrag{font-family:"IBM Plex Mono",ui-monospace,monospace;white-space:nowrap;
  color:var(--ink);font-weight:600}
.tabellenrahmen{overflow-x:auto}
.tabelle td b{color:var(--ink);font-weight:600}
.tabelle td strong{font-weight:600;color:var(--hit)}
.tabelle .wo{display:inline-block;margin-top:4px;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px;word-break:break-all}
.tabelle .wo a{color:var(--accent);text-decoration:none}
.tabelle .wo a:hover{text-decoration:underline}
.tabelle .ohne{color:var(--ink-4);font-style:italic}
.tabelle.adressen td:first-child{inline-size:72%}
.tabelle.formular .bsp{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;
  color:var(--ink);white-space:normal;word-break:break-word}
.tabelle.formular td:first-child{inline-size:26%}
.tabelle.formular td:last-child{inline-size:26%}

/* Der Zeichensatzhinweis ist der wertvollste einzelne Satz auf dieser Seite,
   deshalb steht er in einem eigenen Kasten und nicht im Fließtext. */
.warnkasten{background:var(--hit-soft);border:1px solid var(--line);
  border-inline-start:4px solid var(--hit);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:12px;font-size:13.5px;line-height:1.6;
  color:var(--ink-2)}
.warnkasten strong{color:var(--hit);font-weight:600}
.warnkasten b{color:var(--ink);font-weight:600}

.glossarliste{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px}
.glossarliste li{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:10px 12px;font-size:13px}
.glossarliste b{display:block;font-weight:600;color:var(--ink);margin-bottom:2px}
.glossarliste span{color:var(--ink-3)}

/* ---- Aufklappbarer Block ----
   Die Adress- und Kostentabelle hängt nicht von der Eingabe ab und ist auch
   allein nützlich. Sie steht deshalb weiter im Quelltext, damit Google sie
   sieht, ist aber zugeklappt, damit die Seite vor der ersten Eingabe nicht
   nach einer Wand aus Tabellen aussieht. */
.block{margin-top:34px}
.block > summary{cursor:pointer;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-4);list-style:none;padding:8px 0}
.block > summary::-webkit-details-marker{display:none}
.block > summary::before{content:"+ ";font-size:13px}
.block[open] > summary::before{content:"– "}
.block > summary:hover{color:var(--ink-2)}
.block[open] > summary{margin-bottom:10px}

/* ---- Häufige Fragen ----
   details und summary statt eigener Klapplogik. Das braucht kein JavaScript,
   funktioniert mit Tastatur und Screenreader von allein, und die Antwort steht
   im Quelltext, auch wenn sie zugeklappt ist. Google verlangt für die
   Fragenauszeichnung, dass die Antwort auf der Seite steht. */
.fragen{display:grid;gap:8px}
.frage{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 18px}
.frage summary{cursor:pointer;font-size:14.5px;font-weight:600;color:var(--ink);
  line-height:1.4;list-style:none}
.frage summary::-webkit-details-marker{display:none}
.frage summary::before{content:"+";display:inline-block;inline-size:16px;
  color:var(--ink-4);font-weight:600}
.frage[open] summary::before{content:"–"}
.frage[open] summary{margin-bottom:9px}
.frage p{margin:0 0 0 16px;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.frage p b{color:var(--ink)}

.behoerde{font-size:12.5px;color:var(--ink-4);margin:10px 0 0;line-height:1.55}
.kostenlos{background:var(--clean-soft);color:var(--clean);border-radius:var(--radius-sm);
  padding:10px 14px;font-size:13px;font-weight:600;margin:0 0 14px}
.uebersetzt{font-size:12.5px;color:var(--ink-4);margin:0 0 12px}
.uebersetzt a{color:var(--accent)}

.sprachen{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px;font-size:12.5px}
.sprachen a{color:var(--ink-3);text-decoration:none;padding:4px 10px;border-radius:999px;
  border:1px solid var(--line)}
.sprachen a[aria-current="true"]{color:var(--ink);background:var(--surface)}

.hinweis{background:var(--surface);border:1px solid var(--line);
  border-inline-start:4px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.hinweis h3{margin:0 0 10px;font-size:14.5px;font-weight:600}
.hinweis p{margin:0 0 9px;font-size:13px;color:var(--ink-3);line-height:1.6}
.hinweis p:last-child{margin-bottom:0}

.weitere{margin-top:38px}
.weitere h2{font-size:15px;font-weight:600;margin:0 0 12px}
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.kachel{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px;text-decoration:none}
.kachel b{display:block;font-size:14px;color:var(--ink);margin-bottom:3px}
.kachel span{font-size:12.5px;color:var(--ink-3);line-height:1.5}
.kachel:hover{border-color:var(--accent)}

footer{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--ink-4);font-size:11.5px;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
footer a{color:var(--ink-4);margin-inline-start:14px;text-decoration:none}
footer a:hover{color:var(--ink-3)}

@media print{
  .tnav,.sprachen,.aktionsleiste,.weitere,footer,.uebersetzt{display:none}
  body{background:#fff}
  .weg,.punkte,.faktenliste li,.frage{break-inside:avoid}
  .frage summary::before,.schritte summary::before{content:""}
  .schritte ol li{break-inside:avoid}
  /* Aufgeklappt werden die Fragen vor dem Druck in almanya.js. Über CSS
     allein geht das nicht zuverlässig, weil der Browser den Inhalt eines
     geschlossenen details nicht über display steuert. */
}