/* 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)}

/* ---- Ratgeberseiten ----
   Die kurze Antwort steht ganz oben in einem eigenen Kasten, weil die meisten
   Menschen nur die lesen und dann wieder weg sind. Wer bleibt, findet darunter
   die Begründung. */
.kurzantwort{background:var(--accent-soft);border:1px solid var(--line);
  border-inline-start:4px solid var(--accent);border-radius:var(--radius);
  padding:18px 22px;margin:0 0 26px}
/* Nur die Beschriftung „Kısa cevap" ist ein eigener Block. Ein deutscher
   Fachbegriff im Antwortsatz ist ein <b> mitten im Text und muss inline
   bleiben, sonst zerreißt jeder Begriff den Satz in drei Zeilen. */
.kurzantwort > b:first-child{display:block;font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:7px}
.kurzantwort p b{font-weight:600;color:var(--ink)}
.kurzantwort p{margin:0;font-size:16.5px;line-height:1.55;color:var(--ink)}
.kurzantwort strong{font-weight:600}

.rehber{max-inline-size:66ch}
.rehber h2{font-size:19px;font-weight:600;line-height:1.3;margin:30px 0 10px;
  color:var(--ink)}
.rehber p{margin:0 0 13px;font-size:15.5px;line-height:1.65;color:var(--ink-2)}
.rehber p b{color:var(--ink);font-weight:600}
.rehber p strong{color:var(--ink);font-weight:600}
.rehber .striche{list-style:none;margin:0 0 15px;padding:0;display:grid;gap:7px}
.rehber .striche li{position:relative;padding-inline-start:18px;font-size:15.5px;
  line-height:1.6;color:var(--ink-2)}
.rehber .striche li::before{content:"·";position:absolute;inset-inline-start:4px;
  color:var(--ink-4);font-weight:600}
.rehber .striche li b{color:var(--ink);font-weight:600}
.rehber .striche li strong{color:var(--ink);font-weight:600}

.quellen{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.quellen li{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:11px 14px;font-size:13.5px}
.quellen a{color:var(--accent);text-decoration:none;display:block}
.quellen a:hover{text-decoration:underline}
.quellen .wo{display:block;margin-top:3px;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11.5px;color:var(--ink-4);word-break:break-all}

/* ---- 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. */
}

/* Änderungsprotokoll */
ol.verlauf{list-style:none;margin:22px 0 0;padding:0}
ol.verlauf li{border-left:2px solid var(--line);padding:0 0 18px 16px;margin:0}
ol.verlauf li:last-child{padding-bottom:0}
ol.verlauf time{display:block;font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3)}
ol.verlauf b{display:block;margin:2px 0 4px;font-size:16px}
ol.verlauf p{margin:0;color:var(--ink-2)}

/* Teilen und Antragsmappe */
.teilen{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;margin:26px 0}
.teilen h2{margin:0 0 6px;font-size:19px}
.teilen>p{margin:0 0 12px;color:var(--ink-2)}
.teilenkarte ul{margin:0 0 14px;padding-left:20px;color:var(--ink)}
.teilenkarte li{margin-bottom:4px}
.teilenzeile{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 10px}
.teilenzeile input{flex:1;min-width:220px;padding:9px 11px;border:1px solid var(--line);
  border-radius:9px;background:var(--paper);color:var(--ink-2);font-size:13px}
.mappe-inhalt{margin-top:22px;border-top:1px solid var(--line);padding-top:20px}
.mappe-teil{margin-bottom:26px}
.mappe-teil h3{font-size:17px;margin:0 0 8px}
.mappe-teil h4{font-size:15px;margin:16px 0 6px}
.mappe-hinweis{color:var(--ink-3);font-size:13px;margin:0 0 10px}
ul.hakenliste{list-style:none;margin:0 0 12px;padding:0}
ul.hakenliste li{padding-left:26px;position:relative;margin-bottom:6px}
ul.hakenliste li::before{content:"";position:absolute;left:0;top:3px;width:13px;
  height:13px;border:1px solid var(--ink-3);border-radius:3px}
@media print{.teilen,.kauf>p,.kauf>h2{display:none}.mappe-inhalt{border:0}}

/* Die Verweise am Fuß einer Weg-Karte. Als Zeile, nicht als Liste, damit
   die Karte nicht noch länger wird. */
.wegmehr{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-size:13.5px}
.wegmehr b{font-weight:600;color:var(--ink-3);margin-right:2px}
.wegmehr a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
.wegmehr a:hover,.wegmehr a:focus-visible{border-bottom-color:currentColor}
.wegmehr a:not(:last-child)::after{content:" ·";color:var(--ink-4);border:0}

/* ---- Woertliches Zitat. Meist der Gesetzestext selbst, deshalb abgesetzt
   und nicht kursiv: es soll nachschlagbar aussehen, nicht literarisch. -- */
.rehber blockquote,.ratgeber blockquote{margin:0 0 16px;padding:12px 16px;
  border-inline-start:3px solid var(--accent);background:var(--surface-2);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:15px;
  line-height:1.62;color:var(--ink-2)}
.rehber blockquote b,.ratgeber blockquote b{color:var(--ink);font-weight:600}

/* ---- Alle Wege als Text ---- */
h2.sec-head{line-height:1.4}
.allewege .weg h3{margin:0;font-size:16px;font-weight:600;line-height:1.3}
.allewege .weg h3 b{font-size:inherit}
.wegdaten{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:0;
  font-size:13.5px;line-height:1.5}
.wegdaten dt{color:var(--ink-4);font-weight:600}
.wegdaten dd{margin:0;color:var(--ink-2)}
@media (max-width:560px){.wegdaten{grid-template-columns:1fr}.wegdaten dd{margin-bottom:6px}}