/* Google-Vorschau (Toolbox): seiteneigene Regeln. Reihenfolge im <head>: toolbox.css, diese Datei, darkmode.css. */
main{max-width:64rem}
.lead{margin-bottom:1.75rem}
:root{--ok:#2f855a; --warn:#b7791f; --rot:#c53030;
  --g-titel:#1a0dab; --g-text:#4d5156; --g-name:#202124; --g-flaeche:#fff; --g-rand:#dadce0}

.feld{background:#fff; border:1px solid var(--linie); border-radius:1rem; padding:1.4rem; box-shadow:0 10px 30px rgba(38,40,91,.08); text-align:left; margin-bottom:1.2rem}
.feld h2{margin:0 0 .7rem; font-size:1.25rem; color:var(--nacht)}
.feld h3{margin:0 0 .4rem; font-size:.95rem; color:var(--nacht)}
label{display:block; font-weight:600; color:var(--nacht); margin-bottom:.35rem}
label.abstand{margin-top:.9rem}
input[type=text],textarea{width:100%; font:inherit; font-size:1rem; padding:.55rem .8rem; border:2px solid #dbe3ef; border-radius:.6rem; color:var(--text); background:#fff}
textarea{min-height:6.5rem; resize:vertical}
input:focus,textarea:focus{outline:3px solid var(--gelb); outline-offset:2px; border-color:var(--violett)}
button:focus-visible,a:focus-visible{outline:3px solid var(--gelb); outline-offset:2px}
.mit-knopf{display:flex; gap:.5rem; flex-wrap:wrap}
.mit-knopf input{flex:1 1 16rem}
.mit-knopf button{font-size:1rem; padding:.6rem 1.2rem}
button.link{background:none; border:0; padding:0; font:inherit; font-size:inherit; font-weight:700; color:var(--beere); text-decoration:underline; cursor:pointer}
.klein{font-size:.88rem; color:var(--muted); margin:.6rem 0 0}
.meldung{margin:.6rem 0 0; font-weight:600; color:var(--violett); min-height:0}
.meldung:empty{display:none}
.meldung.fehler{color:var(--rot)}
.reihe{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.9rem}
.reihe > div{flex:1 1 12rem}
.zwei{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:1.4rem; align-items:start}
@media (max-width:820px){.zwei{grid-template-columns:minmax(0,1fr)} .vorschauen{order:-1}}
.vorschauen h3 + div{margin-bottom:1rem}
.hinweis{font-size:.9rem; color:var(--muted); text-align:left; margin:1.4rem 0}

/* Suchergebnis wie bei Google */
.serp{background:var(--g-flaeche); border:1px solid var(--g-rand); border-radius:.8rem; padding:.9rem 1rem; font-family:Arial,Helvetica,sans-serif; min-width:0; text-align:left}
.serp .kopfzeile{display:flex; align-items:center; gap:.6rem; margin-bottom:.35rem; min-width:0}
.serp .kd{min-width:0}
.serp .icon{width:1.75rem; height:1.75rem; border-radius:50%; background:var(--zart); color:var(--violett); display:grid; place-items:center; font-weight:700; font-size:.8rem; flex:0 0 auto; border:1px solid var(--g-rand)}
.serp .name{font-size:14px; color:var(--g-name); line-height:20px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.serp .pfad{font-size:12px; color:var(--g-text); line-height:18px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.serp .gtitel{font-size:20px; line-height:26px; color:var(--g-titel); margin:0 0 .2rem; overflow-wrap:anywhere}
.serp .gmeta{font-size:14px; line-height:22px; color:var(--g-text); margin:0; overflow-wrap:anywhere}
.serp .gmeta.leer{font-style:italic}
.serp .weg{color:var(--rot); text-decoration:line-through; opacity:.75}
.serp.handy{max-width:22.5rem}
.serp.handy .gtitel{font-size:18px; line-height:24px}

/* Messung und Prüfungen */
.mess{display:grid; gap:.35rem; margin:1rem 0 0}
.mess .zeile{display:flex; align-items:center; gap:.5rem; font-size:.84rem; color:var(--muted); flex-wrap:wrap}
.mess .was{flex:0 0 6.5rem; font-weight:700; color:var(--nacht)}
.mess .balken{flex:1 1 7rem; height:.5rem; background:#e2e8f0; border-radius:99px; overflow:hidden; position:relative; min-width:5rem}
.mess .balken i{position:absolute; inset:0 auto 0 0; background:var(--ok); border-radius:99px}
.mess .balken i.mittel{background:var(--warn)}
.mess .balken i.zuviel{background:var(--rot)}
ul.checks{list-style:none; margin:.8rem 0 0; padding:0; display:grid; gap:.3rem; font-size:.92rem}
ul.checks li{display:flex; gap:.45rem; align-items:flex-start}
ul.checks .z{flex:0 0 1.1rem; font-weight:800; text-align:center}
ul.checks .gut .z{color:var(--ok)}
ul.checks .warn .z{color:var(--warn)}
ul.checks .schlecht .z{color:var(--rot)}

/* Darkside */
html[data-theme="dunkel"]{--g-titel:#99c3ff; --g-text:#bdc1c6; --g-name:#dadce0; --g-flaeche:#202124; --g-rand:#3c4043}
html[data-theme="dunkel"] .feld,html[data-theme="dunkel"] :is(input[type=text],textarea){background:var(--flaeche-2,#262a5e)}
html[data-theme="dunkel"] :is(.feld h2,.feld h3,label,.mess .was){color:var(--text)}
html[data-theme="dunkel"] .serp .icon{background:#303134; color:#d9b6f2}
html[data-theme="dunkel"] .serp .weg{color:#f28b82}
html[data-theme="dunkel"] .mess .balken{background:#3c4043}
html[data-theme="dunkel"] button.link{color:#ff8fb1; background:none}
html[data-theme="dunkel"] .meldung{color:#d6b8ff}
html[data-theme="dunkel"] .meldung.fehler{color:#fc8181}
html[data-theme="dunkel"] ul.checks .gut .z{color:#68d391}
html[data-theme="dunkel"] ul.checks .warn .z{color:#f6c25b}
html[data-theme="dunkel"] ul.checks .schlecht .z{color:#fc8181}