:root{
  --text:#2b3138;
  --muted:#4a5460;
  --green:#007a47;
  --green-dark:#005f37;
  --blue:#1a63a5;
  --blue-dark:#134d82;
  --bg:#f3f6f8;
  --card:#fff;
  --field:#eef2f5;
  --line:#d5dde3;
  --head:#eaf6fb;
  --warn:#9a6a00;
  --radius:10px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:1.0625rem/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.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}
.skip{position:absolute;left:-999px;top:0;background:var(--green);color:#fff;padding:.6rem 1rem;z-index:10}
.skip:focus{left:0}
a{color:var(--blue);text-underline-offset:.15em}
a:hover{color:var(--blue-dark)}
:focus-visible{outline:3px solid #0b57d0;outline-offset:2px}
.site-header{background:var(--head);padding:2rem 1rem 1.5rem;text-align:center}
.brand{display:inline-flex;flex-direction:column;align-items:center;gap:.75rem;text-decoration:none;color:var(--text)}
.brand img{width:96px;height:96px}
.brand-name{font:600 clamp(1.5rem,5vw,2.25rem)/1.2 Georgia,"Roboto Slab","Times New Roman",serif}
main{max-width:860px;margin:0 auto;padding:1.5rem 1rem 2rem}
.card{background:var(--card);border-radius:var(--radius);padding:1.5rem 1.25rem;margin:0 0 1.5rem;box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06)}
@media (min-width:640px){.card{padding:2rem}}
h1,h2,h3{overflow-wrap:anywhere;font-family:Georgia,"Roboto Slab","Times New Roman",serif;line-height:1.25;margin:0 0 .75rem}
h2{color:var(--green);font-size:1.5rem}
h3{color:var(--text);font-size:1.125rem;margin-top:1.5rem}
h1{font-size:clamp(1.5rem,7vw,2rem);color:var(--green);overflow-wrap:anywhere;hyphens:auto}
.legal h2{font-size:1.25rem;margin-top:1.75rem}
.legal h1+h2{margin-top:1rem}
p,li{overflow-wrap:anywhere}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
code{background:var(--field);padding:.1em .35em;border-radius:4px;font-size:.92em}

/* Generator */
.generator{padding-top:1.75rem}
.row-length{display:grid;grid-template-columns:auto 1fr 2.5rem;align-items:center;gap:.75rem;margin-bottom:1rem}
.row-length output{text-align:right;font-weight:700}
@media (max-width:479px){.row-length{grid-template-columns:minmax(0,1fr) 2.5rem;gap:.25rem .75rem}.row-length label{grid-column:1/-1}}
input[type=range]{width:100%;height:44px;background:transparent;-webkit-appearance:none;appearance:none;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:6px;background:#c3ccd3;border-radius:3px}
input[type=range]::-moz-range-track{height:6px;background:#c3ccd3;border-radius:3px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;background:var(--green);border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px var(--green)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;background:var(--green);border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px var(--green)}
fieldset.classes{border:0;margin:0 0 1rem;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1rem}
@media (min-width:768px){fieldset.classes{grid-template-columns:repeat(4,auto);justify-content:space-between}}
.check{display:flex;align-items:center;gap:.6rem;min-height:44px;cursor:pointer}
.check input{width:24px;height:24px;margin:0;accent-color:var(--green);flex:none}
.check span{min-width:0;overflow-wrap:break-word;hyphens:auto}
@media (max-width:429px){fieldset.classes{grid-template-columns:minmax(0,1fr)}}
.password{display:block;width:100%;font:700 1.125rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--field);color:var(--text);border:2px solid transparent;border-radius:6px;padding:.9rem .75rem;margin-bottom:.5rem;resize:none;overflow:hidden;word-break:break-all;overflow-wrap:anywhere;white-space:pre-wrap}
.meter{height:6px;background:#dde4e9;border-radius:3px;overflow:hidden}
.meter-bar{height:100%;width:0;background:var(--green);transition:width .2s}
.meter-bar[data-level="0"]{width:20%;background:#b3261e}
.meter-bar[data-level="1"]{width:40%;background:#a85d00}
.meter-bar[data-level="2"]{width:60%;background:#6b7a00}
.meter-bar[data-level="3"]{width:80%;background:var(--green)}
.meter-bar[data-level="4"]{width:100%;background:var(--green-dark)}
.strength{margin:.5rem 0 1rem;font-size:.95rem;color:var(--muted);min-height:1.5em}
.buttons{display:flex;flex-direction:column;gap:.5rem}
@media (min-width:640px){.buttons{flex-direction:row}.buttons .btn{flex:1}}
.btn{font:inherit;font-size:1.0625rem;color:#fff;border:0;border-radius:6px;padding:.85rem 1rem;min-height:48px;cursor:pointer}
.btn-green{background:var(--green)}.btn-green:hover{background:var(--green-dark)}
.btn-blue{background:var(--blue)}.btn-blue:hover{background:var(--blue-dark)}
.status{margin:.75rem 0 0;min-height:1.5em;font-weight:600;color:var(--green-dark)}
.status.is-error{color:#b3261e}

/* Listen */
.icon-list,.plain-list{list-style:none;margin:0 0 1rem;padding:0}
.icon-list li{position:relative;padding-left:2.5rem;margin-bottom:.9rem;min-height:1.75rem}
.icon-list li::before{content:"";position:absolute;left:0;top:.15rem;width:1.6rem;height:1.6rem;background:center/contain no-repeat}
.icon-list.shield li::before{background-image:url(/assets/shield.svg)}
.icon-list.warning li::before{background-image:url(/assets/warning.svg)}
.plain-list li{position:relative;padding-left:1.25rem;margin-bottom:.4rem}
.plain-list li::before{content:"";position:absolute;left:0;top:.7em;width:.5rem;height:.5rem;border-radius:50%;background:var(--green)}

.site-footer{max-width:860px;margin:0 auto;padding:1rem 1rem 3rem;text-align:right}
.site-footer nav{display:flex;gap:1.5rem;justify-content:flex-end;flex-wrap:wrap}
.site-footer a{color:var(--muted);text-decoration:none;padding:.5rem 0;display:inline-block}
.site-footer a:hover{color:var(--text);text-decoration:underline}
@media (pointer:coarse){input[type=range]::-webkit-slider-thumb{width:34px;height:34px;margin-top:-14px}input[type=range]::-moz-range-thumb{width:28px;height:28px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.meter-bar{transition:none}}
#faq h3{position:relative;padding-left:2.25rem}
#faq h3::before{content:"";position:absolute;left:0;top:.05rem;width:1.5rem;height:1.5rem;background:url(/assets/question.svg) center/contain no-repeat}
.gen-titel{font-size:clamp(1.35rem,5vw,1.75rem);margin:0 0 1rem}

/* Vergleichstabelle Passwortmanager */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.table-hint{margin:0 0 .5rem;font-size:.9rem;color:var(--muted)}
.table-scroll{overflow-x:auto;max-width:100%;border:1px solid var(--line);border-radius:var(--radius);-webkit-overflow-scrolling:touch}
.table-scroll:focus-visible{outline-offset:0}
table.vergleich{border-collapse:separate;border-spacing:0;width:100%;min-width:44rem;font-size:.95rem;line-height:1.45}
.vergleich th,.vergleich td{padding:.6rem .75rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);background:var(--card);overflow-wrap:break-word}
.vergleich thead th{background:var(--head);color:var(--text);font-weight:700;border-bottom:2px solid var(--line)}
.vergleich th.crit{position:sticky;left:0;z-index:1;width:9.5rem;min-width:9.5rem;max-width:9.5rem;font-weight:600;border-right:1px solid var(--line)}
.vergleich thead th.crit{z-index:2;background:var(--head)}
.vergleich tr.grp th{background:var(--field);color:var(--green-dark);font-size:.85rem;letter-spacing:.02em;text-transform:uppercase;padding:.45rem .75rem}
.vergleich tr.grp th span{position:sticky;left:.75rem}
.vergleich tbody:last-of-type tr:last-child>*{border-bottom:0}
.vergleich .v{display:flex;align-items:center;gap:.4rem;font-weight:600}
.vergleich .d{display:block;margin-top:.15rem;font-size:.85rem;color:var(--muted)}
.vergleich .num{display:block;font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums}
.ic{width:1.15rem;height:1.15rem;flex:none}
.s-yes .ic,.ic.s-yes{color:var(--green)}
.s-no .ic,.ic.s-no{color:#b3261e}
.s-partial .ic,.ic.s-partial{color:var(--warn)}
.s-unclear .ic,.ic.s-unclear,.s-na .ic,.ic.s-na{color:var(--muted)}
.legend{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;margin:.75rem 0 1rem;padding:0;font-size:.9rem;color:var(--muted)}
.legend li{display:flex;align-items:center;gap:.35rem}
.stand{font-size:.95rem}
.einordnung li{margin-bottom:.7rem}
@media (max-width:639px){
table.vergleich{min-width:36rem;font-size:.875rem;line-height:1.4}
.vergleich th,.vergleich td{padding:.45rem .5rem}
.vergleich th.crit{width:7.5rem;min-width:7.5rem;max-width:7.5rem;hyphens:auto}
.vergleich tr.grp th{padding:.4rem .5rem}
.vergleich tr.grp th span{left:.5rem}
.vergleich .num{font-size:1rem}
}