/* Passwort-Generator – Tempteria
   Markenfarben: Blau #2872fa, Gelb #ffd800, Dark #1f1f1f
   Erzeugt aus tempteria-mvc/public/assets/css/app.css (Tool-UI + Passwort-Generator).
   Änderungen bitte dort vornehmen und diese Datei neu ableiten. */

.pg-app{max-width:820px;margin:0 auto;padding:28px;background:#fff;border:1px solid #e5e7ea;border-radius:20px;box-shadow:0 24px 60px rgba(15,23,42,.08);font-family:inherit;box-sizing:border-box}
.pg-app *,.pg-app *::before,.pg-app *::after{box-sizing:border-box}
/* ============================================================
   Bausteine: Tabs, Regler, Schalter, Chips, Buttons, Tabelle, FAQ
   ============================================================ */
.pg-app,.pg-prose{--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace}

.pg-tabs{display:flex;gap:6px;padding:6px;margin:0 0 22px;background:#f7f8fb;border:1px solid #e5e7ea;border-radius:16px}
.pg-tab{flex:1;display:flex;flex-direction:column;gap:2px;padding:11px 14px;border:0;border-radius:11px;background:transparent;color:#5a5a5a;font:inherit;font-weight:700;font-size:15px;cursor:pointer;transition:background .18s,color .18s,box-shadow .18s}
.pg-tab span{font-weight:500;font-size:12.5px;opacity:.85}
.pg-tab:hover{color:#1f1f1f}
.pg-tab.is-active{background:#ffffff;color:#1f1f1f;box-shadow:0 2px 10px rgba(15,23,42,.10)}

.pg-panel{display:flex;flex-direction:column;gap:22px}
.pg-panel[hidden]{display:none}

.pg-field label{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;font-size:14px;font-weight:600;color:#5a5a5a}
.pg-field label b{font-family:inherit;font-size:22px;font-weight:700;color:#1f1f1f}
.pg-legend{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;padding:0;font-size:13px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#5a5a5a}
.pg-legend span{font-weight:500;letter-spacing:0;text-transform:none;font-size:12.5px;opacity:.8}

.pg-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:#e5e7ea;outline:none;cursor:pointer}
.pg-range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#2872fa;border:4px solid #ffffff;box-shadow:0 2px 10px rgba(40,114,250,.45);cursor:grab;transition:transform .12s}
.pg-range::-webkit-slider-thumb:active{transform:scale(1.12);cursor:grabbing}
.pg-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#2872fa;border:4px solid #ffffff;box-shadow:0 2px 10px rgba(40,114,250,.45);cursor:grab}
.pg-range:focus-visible{box-shadow:0 0 0 4px #eaf1ff}

.pg-select{width:100%;box-sizing:border-box;padding:13px 16px;font:inherit;font-size:15px;color:#1f1f1f;background:#f7f8fb;border:1px solid #e5e7ea;border-radius:12px;cursor:pointer}
.pg-select:focus-visible{outline:none;border-color:#2872fa;box-shadow:0 0 0 4px #eaf1ff}

.pg-chip{--c:#2872fa;position:relative;display:inline-flex;align-items:center;padding:10px 16px;border:1px solid #e5e7ea;border-radius:12px;background:#f7f8fb;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.pg-chip input{position:absolute;opacity:0;width:0;height:0}
.pg-chip span{font-family:var(--mono);font-size:15px;font-weight:600;color:#5a5a5a;letter-spacing:.5px}
.pg-chip:hover{border-color:var(--c)}
.pg-chip:has(input:checked){background:color-mix(in srgb,var(--c) 12%,transparent);border-color:var(--c)}
.pg-chip:has(input:checked) span{color:var(--c)}
.pg-chip:has(input:focus-visible){box-shadow:0 0 0 4px #eaf1ff}

.pg-switch{position:relative;display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.pg-switch input{position:absolute;opacity:0;width:0;height:0}
.pg-switch>span{flex:1;font-size:14.5px;font-weight:600;color:#1f1f1f;line-height:1.4}
.pg-switch>span em{display:block;margin-top:2px;font-style:normal;font-size:13px;font-weight:400;color:#5a5a5a}
.pg-switch::before{content:"";flex:0 0 auto;width:42px;height:24px;margin-top:1px;border-radius:99px;background:#e5e7ea;transition:background .18s}
.pg-switch::after{content:"";position:absolute;left:3px;top:4px;width:18px;height:18px;border-radius:50%;background:#ffffff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .18s}
.pg-switch:has(input:checked)::before{background:#2872fa}
.pg-switch:has(input:checked)::after{transform:translateX(18px)}
.pg-switch:has(input:focus-visible)::before{box-shadow:0 0 0 4px #eaf1ff}

.pg-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 22px;font:inherit;font-size:15px;font-weight:700;color:#1f1f1f;background:#f7f8fb;border:1px solid #e5e7ea;border-radius:13px;cursor:pointer;transition:background .15s,border-color .15s,transform .1s,color .15s}
.pg-btn svg{width:18px;height:18px;flex:0 0 auto}
.pg-btn:hover{border-color:#2872fa;color:#2872fa}
.pg-btn:active{transform:scale(.98)}
.pg-btn:disabled{opacity:.45;pointer-events:none}
.pg-btn-primary{background:#2872fa;border-color:#2872fa;color:#fff}
.pg-btn-primary:hover{background:#175cd3;border-color:#175cd3;color:#fff}
.pg-btn.is-copied{background:#16a34a;border-color:#16a34a;color:#fff}
.pg-btn.is-copied svg{display:none}
.pg-btn.is-copied span{font-size:0}
.pg-btn.is-copied span::before{content:"Kopiert";font-size:15px}

/* Ratgeber-Text unter einem Werkzeug */
/* Breite und Abstände gibt im WordPress-Beitrag der Theme-Content vor. */
.pg-prose{max-width:none}
.pg-prose h2{margin:46px 0 14px;font-size:clamp(22px,3vw,28px)}
.pg-prose h2:first-child{margin-top:0}
.pg-prose h3{margin:0 0 8px;font-size:17px}
.pg-prose p{margin:0 0 16px;line-height:1.72;color:#5a5a5a}
.pg-prose b{color:#1f1f1f}
.pg-prose .pg-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.pg-prose .pg-list li{position:relative;padding-left:26px;line-height:1.68;color:#5a5a5a}
.pg-prose .pg-list li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:3px;background:#ffd800}
.pg-prose .pg-callout{margin:26px 0;padding:18px 22px;background:#eaf1ff;border-left:4px solid #2872fa;border-radius:0 12px 12px 0}
.pg-prose .pg-table-wrap{overflow-x:auto;margin:0 0 8px}
.pg-prose .pg-table{width:100%;border-collapse:collapse;font-size:15px}
.pg-prose .pg-table th{padding:12px 14px;text-align:left;font-size:12.5px;letter-spacing:.4px;text-transform:uppercase;color:#5a5a5a;border-bottom:1px solid #e5e7ea}
.pg-prose .pg-table td{padding:13px 14px;border-bottom:1px solid #e5e7ea;color:#5a5a5a}
.pg-prose .pg-table td:first-child{font-weight:700;color:#1f1f1f;white-space:nowrap}
.pg-prose .pg-table td:nth-child(2){font-family:var(--mono);white-space:nowrap}
.pg-prose .pg-table tr:last-child td{border-bottom:0}
.pg-prose .pg-faq details{border-bottom:1px solid #e5e7ea}
.pg-prose .pg-faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-weight:700;color:#1f1f1f;cursor:pointer;list-style:none}
.pg-prose .pg-faq summary::-webkit-details-marker{display:none}
.pg-prose .pg-faq summary::after{content:"+";flex:0 0 auto;font-family:inherit;font-size:22px;font-weight:400;color:#2872fa;transition:transform .2s}
.pg-prose .pg-faq details[open] summary::after{transform:rotate(45deg)}
.pg-prose .pg-faq details p{margin:0 0 18px;padding-right:36px}
.pg-prose .pg-faq code{padding:2px 6px;font-family:var(--mono);font-size:13.5px;background:#f3f4f6;border-radius:5px}

/* ============================================================
   Passwort-Generator
   ============================================================ */
.pg{--pg-upper:#175cd3;--pg-lower:#1f1f1f;--pg-number:#b45309;--pg-symbol:#0e7490}

/* Steuerung und Ausgabe teilen sich die Farbcodierung der Zeichenarten. */
.pg-sets{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;border:0}
.pg-sets .pg-chip:nth-of-type(1){--c:var(--pg-upper)}
.pg-sets .pg-chip:nth-of-type(2){--c:var(--pg-lower)}
.pg-sets .pg-chip:nth-of-type(3){--c:var(--pg-number)}
.pg-sets .pg-chip:nth-of-type(4){--c:var(--pg-symbol)}

.pg-display{display:block;min-height:96px;padding:24px 22px;margin-bottom:14px;background:#f7f8fb;border:1px solid #e5e7ea;border-radius:16px;font-family:var(--mono);font-size:clamp(19px,3.4vw,27px);line-height:1.55;letter-spacing:1px;word-break:break-all;overflow-wrap:anywhere}
.pg-char{animation:pg-in .32s cubic-bezier(.2,.8,.3,1) backwards;animation-delay:calc(var(--i) * 14ms)}
.pg-char.is-upper{color:var(--pg-upper)}
.pg-char.is-lower{color:var(--pg-lower)}
.pg-char.is-number{color:var(--pg-number)}
.pg-char.is-symbol{color:var(--pg-symbol)}
.pg-empty{font-family:inherit;font-size:16px;color:#5a5a5a}
@keyframes pg-in{from{opacity:0;transform:translateY(-6px) scale(.92)}}

.pg-actions{display:flex;gap:10px}
.pg-actions .pg-btn{flex:1}

.pg-strength{display:flex;flex-direction:column;gap:10px;margin:22px 0 26px}
.pg-meter{display:flex;gap:5px}
.pg-meter span{flex:1;height:7px;border-radius:99px;background:#e5e7ea;transition:background .25s}
.pg-meter[data-step="1"] span:nth-child(-n+1){background:#d63637}
.pg-meter[data-step="2"] span:nth-child(-n+2){background:#e08c00}
.pg-meter[data-step="3"] span:nth-child(-n+3){background:#2872fa}
.pg-meter[data-step="4"] span:nth-child(-n+4){background:#16a34a}
.pg-meter[data-step="5"] span{background:linear-gradient(135deg,#06b6d4 0%,#3b82f6 45%,#8b5cf6 100%)}
.pg-strength-text{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-size:14px;color:#5a5a5a}
.pg-strength-text strong{font-family:inherit;font-size:16px}
.pg-strength-text strong[data-step="1"]{color:#d63637}
.pg-strength-text strong[data-step="2"]{color:#e08c00}
.pg-strength-text strong[data-step="3"]{color:#2872fa}
.pg-strength-text strong[data-step="4"]{color:#16a34a}
.pg-strength-text strong[data-step="5"]{color:#8b5cf6}
.pg-strength-text span{font-variant-numeric:tabular-nums}

.pg-options{display:flex;flex-direction:column;gap:16px}

.pg-history-box{margin-top:26px;padding-top:22px;border-top:1px solid #e5e7ea}
.pg-history{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.pg-history-item{width:100%;padding:9px 12px;font-family:var(--mono);font-size:14px;text-align:left;color:#5a5a5a;background:transparent;border:1px dashed #e5e7ea;border-radius:9px;cursor:pointer;word-break:break-all;transition:color .15s,border-color .15s}
.pg-history-item:hover{color:#1f1f1f;border-color:#2872fa}
.pg-history-item.is-copied{color:#16a34a;border-color:#16a34a;border-style:solid}

.pg-note{margin:22px 0 0;font-size:13px;color:#5a5a5a;text-align:center}

.pg-prose .pg-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:24px 0 8px}
.pg-prose .pg-compare-card{padding:22px;background:#f7f8fb;border:1px solid #e5e7ea;border-radius:15px}
.pg-prose .pg-compare-card p:last-child{margin:0;font-size:14.5px}
.pg-prose .pg-sample{font-family:var(--mono);font-size:15px;color:#2872fa !important;word-break:break-all;margin-bottom:12px !important}

@media(max-width:560px){
  .pg-actions{flex-direction:column}
  .pg-tab{font-size:14px}
  .pg-display{padding:20px 16px;letter-spacing:.5px}
}
@media(prefers-reduced-motion:reduce){
  .pg-char{animation:none}
  .pg-range::-webkit-slider-thumb,.pg-switch::after,.pg-faq summary::after{transition:none}
}