/* teilen.css – Knopf und Dialog „Teilen und exportieren“ (teilen.js); Farben aus den Tokens der Seite und entwurf.css */
.tl-start{margin-left:auto;align-self:end;display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--f,system-ui);color:var(--ink);
  background:var(--card);border:1px solid var(--ink);border-radius:2px;padding:9px 14px;cursor:pointer;transition:transform 160ms cubic-bezier(.23,1,.32,1),background-color 160ms,color 160ms}
.tl-start:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.tl-start:hover{background:var(--ink);color:var(--bg)}}
#teilen-dlg{width:min(860px,calc(100vw - 24px));max-height:calc(100vh - 24px);padding:0;border:1px solid var(--bd);border-radius:4px;
  background:var(--bg);color:var(--ink);font:15px/1.5 var(--f,system-ui);overflow:auto}
#teilen-dlg::backdrop{background:rgba(10,12,16,.55)}
#teilen-dlg[open]{animation:tl-auf 220ms cubic-bezier(.23,1,.32,1)}
@keyframes tl-auf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tl-kopf{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;background:#10151c;color:#eef1f3}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tl-kopf{background:#05070a}}:root[data-theme="dark"] .tl-kopf{background:#05070a}
:root[data-theme="dark"] .tl-kopf{background:#05070a}
.tl-kopf h2{margin:0;font:700 22px/1.1 var(--f,system-ui);font-stretch:75%}
.tl-zu{font:600 13px/1 var(--f,system-ui);letter-spacing:.06em;text-transform:uppercase;background:none;color:inherit;border:1px solid currentColor;border-radius:2px;padding:7px 10px;cursor:pointer}
.tl-hinweis{margin:14px 20px 0;color:var(--ink2);font-size:14px}
.tl-meldung{margin:10px 20px 0;min-height:1.5em;font-size:14px;color:var(--ink)}
.tl-meldung.warn{color:#c42e2a}
#teilen-dlg section{margin:0 20px;padding:16px 0 18px;border-top:2px solid var(--ink)}
#teilen-dlg section:first-of-type{margin-top:12px}
#teilen-dlg h3{margin:0 0 10px;font:700 20px/1.1 var(--f,system-ui);font-stretch:75%}
.tl-feld{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink2)}
.tl-feld textarea,.tl-feld input,#teilen-embed{font:14px/1.45 var(--f,system-ui);color:var(--ink);background:var(--card);border:1px solid var(--bd);border-radius:2px;padding:8px 10px;width:100%;min-width:0;resize:vertical}
#teilen-embed{font-family:ui-monospace,Consolas,monospace;font-size:12.5px}
.tl-schmal{flex:0 1 240px}
.tl-zahl{font-variant-numeric:tabular-nums;color:var(--muted)}
.tl-zahl.warn{color:#c42e2a;font-weight:600}
.tl-zahl .warn{color:#c42e2a;font-weight:600}
#teilen-url{font-size:12px;word-break:break-all;color:var(--ink2)}
.tl-netze{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:12px 0}
.tl-netz{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--bd);border-radius:2px;background:var(--card);color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.tl-netz span{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font:700 12px/1 system-ui;flex:none}
.tl-netz:active{transform:scale(.98)}
.tl-reihe{display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin-top:10px}
.tl-knopf{font:600 13.5px/1.2 var(--f,system-ui);color:var(--ink);background:var(--card);border:1px solid var(--bd);border-radius:2px;padding:8px 12px;cursor:pointer;transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.tl-knopf.haupt{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tl-knopf.ok{border-color:#1e873d;color:#1e873d}
.tl-knopf:active{transform:scale(.98)}
.tl-knopf:disabled{opacity:.55;cursor:progress}
@media (hover:hover) and (pointer:fine){.tl-knopf:hover,.tl-netz:hover{border-color:var(--ink)}}
.tl-klein{font-size:13px;color:var(--muted);margin:8px 0 0}
.tl-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.tl-preset{position:relative;display:flex;flex-direction:column;gap:2px;padding:9px 10px 9px 32px;border:1px solid var(--bd);border-radius:2px;background:var(--card);cursor:pointer;font-size:13px;color:var(--ink2)}
.tl-preset input{position:absolute;left:10px;top:11px;margin:0;min-width:0;width:auto;padding:0}
#teilen-dlg input,#teilen-dlg textarea{min-width:0;max-width:100%}
#teilen-dlg{overflow-x:hidden}
.tl-preset b{color:var(--ink);font-size:14px}
.tl-preset small{font-size:12px;color:var(--muted);line-height:1.35}
.tl-preset:has(input:checked){border-color:var(--ink);box-shadow:inset 3px 0 0 var(--ink)}
.tl-vorschau{margin:12px 0 0;background:repeating-conic-gradient(var(--card) 0 25%,var(--bg) 0 50%) 0 0/16px 16px;border:1px solid var(--bd);padding:10px;text-align:center}
#teilen-vorschau{display:inline-block;max-width:100%;max-height:420px;width:auto;height:auto;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.tl-alt{border:1px solid var(--bd);background:var(--card);border-radius:2px;padding:10px 12px;margin:0 0 8px}
.tl-alt p{margin:6px 0 8px;font-size:14px}
.tl-grenzen{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
.tl-grenzen th,.tl-grenzen td{text-align:left;padding:5px 8px;border-bottom:1px solid var(--bd)}
.tl-grenzen th{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tl-karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:10px}
.tl-karten>div{display:flex;flex-direction:column;gap:6px;align-items:flex-start;border:1px solid var(--bd);background:var(--card);border-radius:2px;padding:12px}
.tl-karten span{font-size:13.5px;color:var(--ink2)}
.tl-karten .tl-reihe{margin-top:4px}
#teilen-druck{display:none}
@media print{
  @page{size:A4;margin:0}
  body>*:not(#teilen-druck){display:none!important}
  #teilen-druck{display:block}
  #teilen-druck svg{width:210mm;height:297mm;display:block}
}
@media (prefers-reduced-motion:reduce){#teilen-dlg[open]{animation:none}.tl-start,.tl-knopf,.tl-netz{transition:none}}
html.tl-export,html.tl-export body{margin:0;padding:0;background:#fff;overflow:hidden}
