/* Tools-Bereich */
.tools-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.tools-grid .card{grid-column:auto}
.tool-card{display:block;text-decoration:none;color:inherit}
.tool-card .card-core{display:flex;flex-direction:column;gap:14px;height:100%;padding:28px;border-radius:var(--r);background:#140f18}
.tool-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:rgba(217,143,203,.12);color:var(--accent)}
.tool-ico svg{width:22px;height:22px}
.tool-card h3{margin:0;font-size:22px;letter-spacing:-.02em}
.tool-card p{margin:0;color:var(--muted)}
.tool-meta{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:6px;font-size:14px;font-weight:600}
.tool-badge{padding:4px 12px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--line-2);color:var(--accent-hi)}
.tool-badge.premium{background:var(--accent);color:#1d0b1a;border-color:transparent}
.tool-more{margin-left:auto;color:var(--accent)}
.tool-soon .card-core{border:1px dashed var(--line-2);background:transparent}

.pg{display:grid;gap:28px}
.pg-out{display:flex;gap:12px;align-items:center;padding:16px 18px;border:1px solid var(--line-2);border-radius:16px;background:rgba(255,255,255,.03)}
.pg-pass{flex:1;min-width:0;margin:0;font:600 clamp(18px,3.2vw,26px)/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all;user-select:all;letter-spacing:.02em}
.pg-out .pg-icon{flex:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--accent);display:grid;place-items:center;cursor:pointer}
.pg-out .pg-icon:hover{background:rgba(217,143,203,.12)}
.pg-out .pg-icon svg{width:20px;height:20px}
.pg-meter{display:grid;gap:8px}
.pg-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.pg-bar i{display:block;height:100%;width:0;border-radius:inherit;background:#e5484d;transition:width .4s var(--ease),background .4s}
.pg-bar i[data-l="2"]{background:#f5a524}.pg-bar i[data-l="3"]{background:#9fd34b}.pg-bar i[data-l="4"]{background:#3dd68c}
.pg-meter p{margin:0;font-size:14px;color:var(--muted)}
.pg-tabs{display:inline-flex;gap:6px;padding:5px;border:1px solid var(--line-2);border-radius:999px;justify-self:start}
.pg-tabs button{min-height:44px;padding:0 20px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:600 15px var(--sans);cursor:pointer}
.pg-tabs button[aria-pressed="true"]{background:var(--accent);color:#1d0b1a}
.pg-row{display:grid;gap:12px}
.pg-row .t{font-weight:600}
.pg-range{display:flex;align-items:center;gap:16px}
.pg-range input[type=range]{flex:1;min-height:44px;accent-color:var(--accent)}
.pg-len{min-width:52px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.06);text-align:center;font-weight:700}
.pg-checks{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.pg-check{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 14px;border:1px solid var(--line-2);border-radius:14px;cursor:pointer}
.pg-check input{width:20px;height:20px;accent-color:var(--accent)}
.pg-check:has(input:checked){border-color:var(--accent);background:rgba(217,143,203,.08)}
.pg-input{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--line-2);border-radius:14px;background:rgba(255,255,255,.03);color:inherit;font:inherit}
.pg-actions{display:flex;flex-wrap:wrap;gap:14px}
.pg-msg{min-height:1.4em;margin:0;font-size:14px;color:var(--accent-hi)}
.pg-msg.err{color:#ff8a8a}
.pg-hint{margin:0;font-size:14px;color:var(--muted)}
.tool-prose{max-width:760px;margin-inline:auto}
.tool-prose h2{margin-top:0}
.tool-prose li{margin-bottom:8px}
[data-mode-panel][hidden]{display:none}
@media (max-width:520px){.pg-actions .btn{width:100%;justify-content:space-between}}

/* Gemeinsame Bausteine für alle Tools */
.tl{display:grid;gap:26px;padding:clamp(20px,4vw,36px)}
.tl-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.tl-field{display:grid;gap:8px;align-content:start}
.tl-field>label,.tl-label{font-weight:600;font-size:15px}
.tl-field small{color:var(--muted);font-size:13px}
.tl input[type=text],.tl input[type=number],.tl input[type=url],.tl input[type=email],.tl input[type=tel],.tl select,.tl textarea{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--line-2);border-radius:14px;background:rgba(255,255,255,.03);color:inherit;font:inherit}
.tl textarea{min-height:140px;resize:vertical;line-height:1.5}
.tl input:focus-visible,.tl select:focus-visible,.tl textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tl input[type=color]{width:56px;height:48px;padding:3px;border:1px solid var(--line-2);border-radius:12px;background:transparent;cursor:pointer}
.tl input[type=range]{width:100%;min-height:44px;accent-color:var(--accent)}
.tl input[type=checkbox],.tl input[type=radio]{accent-color:var(--accent)}
.tl-color{display:flex;gap:10px;align-items:center}
.tl-color input[type=text]{flex:1;min-width:0}
.tl-stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.tl-stat{padding:16px 18px;border:1px solid var(--line-2);border-radius:16px;background:rgba(255,255,255,.03)}
.tl-stat b{display:block;font-size:clamp(24px,4vw,32px);line-height:1.1;letter-spacing:-.02em}
.tl-stat span{font-size:13px;color:var(--muted)}
.tl-stat.big{grid-column:1/-1;border-color:var(--accent);background:rgba(217,143,203,.08)}
.tl-stat.big b{font-size:clamp(32px,6vw,48px)}
.tl-box{padding:18px 20px;border:1px solid var(--line-2);border-radius:16px;background:rgba(255,255,255,.03)}
.tl-note{margin:0;font-size:14px;color:var(--muted)}
.tl-badges{display:flex;flex-wrap:wrap;gap:8px}
.tl-badge{padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;border:1px solid var(--line-2)}
.tl-badge.ok{background:rgba(61,214,140,.14);border-color:rgba(61,214,140,.5);color:#7ee8b2}
.tl-badge.no{background:rgba(229,72,77,.14);border-color:rgba(229,72,77,.5);color:#ff9a9d}
.tl-badge.mid{background:rgba(245,165,36,.14);border-color:rgba(245,165,36,.5);color:#ffcc7a}
.tl-drop{position:relative;display:grid;place-items:center;align-content:center;gap:8px;min-height:160px;padding:24px;border:2px dashed var(--line-2);border-radius:20px;text-align:center;cursor:pointer;transition:border-color .3s,background .3s}
.tl-drop:hover,.tl-drop.over{border-color:var(--accent);background:rgba(217,143,203,.06)}
.tl-drop input{position:absolute;opacity:0;width:1px;height:1px}
.tl-drop:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.tl-tabs{display:inline-flex;flex-wrap:wrap;gap:6px;padding:5px;border:1px solid var(--line-2);border-radius:24px;justify-self:start}
.tl-tabs button{min-height:44px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:600 15px var(--sans);cursor:pointer}
.tl-tabs button[aria-pressed="true"]{background:var(--accent);color:#1d0b1a}
.tl [hidden]{display:none!important}
.tl-split{display:grid;gap:26px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
@media (max-width:760px){.tl-split{grid-template-columns:1fr}}
.tl-table{width:100%;border-collapse:collapse;font-size:15px}
.tl-table th,.tl-table td{padding:10px 8px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tl-table th{font-size:13px;color:var(--muted);font-weight:600}
.tl-wrapx{overflow-x:auto}
.tl-row-act{display:flex;flex-wrap:wrap;gap:12px}
.tl .btn[disabled]{opacity:.5;pointer-events:none}
.btn-sm{--h:44px;font-size:15px;padding-left:18px}
.btn-sm .ico{width:34px;height:34px}
.tl-check-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.tl-check-list li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line-2);border-radius:14px}
.tl-check-list li.ok{border-color:rgba(61,214,140,.45)}
.tl-check-list li.no{border-color:rgba(229,72,77,.5)}
.tl-check-list li.mid{border-color:rgba(245,165,36,.5)}
.tl-check-list .st{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:700;background:rgba(255,255,255,.08)}
.ok .st{background:#3dd68c;color:#06281a}.no .st{background:#e5484d;color:#fff}.mid .st{background:#f5a524;color:#2d1c00}
.tl-check-list b{display:block}
.tl-check-list small{color:var(--muted);font-size:14px}
.tl-score{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.tl-ring{--p:0;--c:#3dd68c;width:112px;height:112px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(255,255,255,.08) 0)}
.tl-ring i{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:#140f18;font:700 28px var(--sans);font-style:normal}
.tl-serp{padding:18px 20px;border-radius:16px;background:#fff;color:#202124;font-family:Arial,sans-serif}
.tl-serp .u{display:flex;align-items:center;gap:10px;font-size:14px;color:#202124;margin-bottom:4px}
.tl-serp .u i{flex:none;width:28px;height:28px;border-radius:50%;background:#f1f3f4;display:grid;place-items:center;font-size:13px;font-style:normal;color:#5f6368}
.tl-serp .u small{display:block;font-size:12px;color:#4d5156}
.tl-serp .t{font-size:20px;line-height:1.3;color:#1a0dab;margin:0 0 4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tl-serp .d{font-size:14px;line-height:1.58;color:#4d5156;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tl-serp.m{max-width:380px}.tl-serp.m .t{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.tl-serp.m .d{-webkit-line-clamp:3}
.tl-meter{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.tl-meter i{display:block;height:100%;width:0;border-radius:inherit;background:#3dd68c;transition:width .3s}
.tl-meter i.warn{background:#f5a524}.tl-meter i.bad{background:#e5484d}
.tl-qr{display:grid;place-items:center;padding:20px;border-radius:20px;background:#fff;min-height:260px}
.tl-qr canvas,.tl-qr img,.tl-qr svg{max-width:100%;height:auto}
.tl-pal{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr))}
.tl-sw{display:grid;border-radius:16px;overflow:hidden;border:1px solid var(--line-2);cursor:pointer;background:transparent;color:inherit;font:inherit;text-align:left;padding:0}
.tl-sw i{display:block;height:84px}
.tl-sw span{padding:8px 12px;font:600 14px ui-monospace,Menlo,Consolas,monospace}
.tl-sw:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tl-contrast{padding:26px;border-radius:16px;border:1px solid var(--line-2)}
.tl-sig-prev{padding:20px;border-radius:16px;background:#fff;color:#222;overflow:auto}
.tl-code{padding:14px;border-radius:14px;background:rgba(0,0,0,.35);font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;max-height:220px;overflow:auto;white-space:pre-wrap;word-break:break-all}
.tl-group-title{margin:44px 0 18px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* Dropdowns: dunkel, eigener Pfeil, lesbare Optionsliste */
select.pg-input,.tl select{-webkit-appearance:none;appearance:none;color-scheme:dark;cursor:pointer;padding-right:46px;background-color:rgba(255,255,255,.04);background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2718%27 height=%2718%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23d98fcb%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:18px}
select.pg-input:hover,.tl select:hover{border-color:var(--accent)}
select.pg-input option,.tl select option{background:#17111c;color:#f4eef6;padding:10px}

/* Tool-Hinweise in Ratgeber-Artikeln */
.tool-hints{margin-top:clamp(40px,6vw,64px);padding:clamp(20px,3vw,32px);border:1px solid var(--line-2);border-radius:24px;background:rgba(255,255,255,.03)}
.tool-hints-grid{display:grid;gap:14px;margin-top:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.tool-hint{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:16px;border:1px solid var(--line-2);border-radius:18px;text-decoration:none;color:inherit;transition:border-color .3s,background .3s}
.tool-hint:hover{border-color:var(--accent);background:rgba(217,143,203,.06)}
.tool-hint b{display:block;font-size:17px}
.tool-hint small{display:block;color:var(--muted);font-size:14px;line-height:1.45;margin-top:2px}
.tool-hint .tool-more{margin:0;white-space:nowrap}
@media (max-width:520px){.tool-hint{grid-template-columns:auto 1fr}.tool-hint .tool-more{grid-column:1/-1}}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Zwei-Spalten-Layout: Spalten dürfen schrumpfen, lange Inhalte dehnen sie nicht */
.tl-split>*{min-width:0;grid-template-columns:minmax(0,1fr)}
.tl-serp{min-width:0;max-width:100%;box-sizing:border-box}
.tl-serp .u>div{min-width:0}
.tl-serp .u span,.tl-serp .u small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}

/* Website-Check-Eingabe in Ratgebern */
.check-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;margin-top:clamp(40px,6vw,64px);padding:clamp(22px,3.5vw,36px);border:1px solid var(--accent);border-radius:24px;background:radial-gradient(80% 140% at 100% 0%,rgba(112,41,99,.4),transparent 60%),#110c15}
.check-band-title{margin:10px 0 6px;font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.check-band-text{margin:0;color:var(--muted)}
.check-band-form{display:flex;gap:12px;flex-wrap:wrap}
.check-band-form input{flex:1;min-width:200px;min-height:56px;padding:10px 18px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.04);color:inherit;font:inherit}
.check-band-form input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:760px){.check-band{grid-template-columns:1fr}.check-band-form .btn{width:100%;justify-content:space-between}}