/* DeclutterData · Seite mit eingebettetem Browser-Werkzeug (Rahmen). Alles andere kommt aus site.css.
   Das Werkzeug selbst steckt in einer eigenen Datei (assets/tools/<slug>.html) und bringt sein Aussehen mit. */
.te{padding-block:0;position:relative}
.te-lade{position:absolute;inset:48px 16px auto;margin:0;text-align:center;font-weight:600;color:var(--muted)}
.te-frame{position:relative;display:block;width:100%;height:1400px;border:0;background:transparent}
.js .te-frame{transition:opacity .2s ease}
.js .te-frame:not(.te-bereit){opacity:0}
@media (prefers-reduced-motion:reduce){.js .te-frame{transition:none}}
.te-noscript{margin:0;padding:28px 16px;text-align:center;font-weight:600}
.te-schritte code,.te-gut code{font:14px/1.5 var(--font-mono);background:color-mix(in srgb,var(--secondary) 10%,transparent);color:var(--heading);padding:1px 6px;border-radius:6px;overflow-wrap:break-word}
.te-gut ul{margin:.6em 0 0;padding-left:1.2em;font-size:15.5px;line-height:1.65}
.te-gut li+li{margin-top:.35em}

/* ---------- Gemeinsame Teile aller Werkzeugseiten (19.10.2026, Runde 7) ----------
   Kompakter Kopf: das Werkzeug beginnt bei 1280 x 800 ohne Scrollen sichtbar (Kopf bis etwa 360 px).
   Anleitung als Overlay (<dialog class="ovl te-anl">, Öffnen über data-ovl in main.js), ohne Skript als Abschnitt im Fluss.
   Fuß mit Feedback-Link und LinkedIn-Empfehlung (Teil tool-feedback). */
.p-hero.te-kopf .in{padding-block:16px 18px}
.p-hero.te-kopf .crumbs{margin:0 0 8px}
.p-hero.te-kopf .te-zeile{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px}
.p-hero.te-kopf h1{font-size:clamp(26px,2.9vw,37px);letter-spacing:.8px;line-height:1.15;margin:0;flex:1 1 0;min-width:min(100%,360px)}
.p-hero.te-kopf .sub{font-size:16px;line-height:1.6;max-width:56em;margin:10px 0 0}
.p-hero.te-kopf .ptags{margin:12px 0 0}
.p-hero.te-kopf .te-so{padding:7px 20px;font-size:15.5px;line-height:1.5;white-space:nowrap}
.p-hero.te-kopf .te-so .ic{width:20px;height:20px}
.p-hero.te-kopf + .te .wv,.p-hero.te-kopf .wv{height:clamp(34px,4.4vw,56px)}
@media (max-width:640px){.p-hero.te-kopf .sub{font-size:15px}.p-hero.te-kopf h1{font-size:27px}}

dialog.te-anl{width:min(94vw,760px)}
dialog.te-anl .sh2{margin:6px 0 14px;font-size:clamp(26px,3vw,34px)}
dialog.te-anl .te-intro{margin:0 0 16px;font-size:16px;line-height:1.65}
dialog.te-anl .schritte,dialog.te-anl .tg-schritte{margin-top:6px}
dialog.te-anl .te-zu-x{margin-top:22px;display:flex;justify-content:flex-end}
html:not(.js) dialog.te-anl:not([open]){display:block;position:static;width:auto;max-width:960px;margin:40px auto;box-shadow:none;border:1px solid var(--hairline)}
html:not(.js) dialog.te-anl .x{display:none}

.te-aktion{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;margin:0 0 26px;padding:16px 20px;border-radius:16px;background:var(--box);box-shadow:0 8px 26px var(--shadow-soft)}
.te-fb{display:flex;align-items:center;gap:12px;margin:0;font-weight:600;color:var(--heading)}
.te-fb .ic{flex:none;width:26px;height:26px;color:var(--primary)}
.te-fb a{color:var(--blue-text);text-underline-offset:.2em}
.te-teilen{padding:8px 20px;font-size:15.5px;line-height:1.5}
.te-teilen .ic{width:22px;height:22px}
@media (max-width:560px){.te-teilen{width:100%;justify-content:center}}
.faq details.gut .ans ul{margin:.4em 0 .6em}