/* SEO-Aufwand-Check (was-kostet-seo.html, 23.09.2026)
Baut auf assets/werkzeug.css auf. Bewusst ohne Preise, Stunden oder
Punktwerte: Ausgabe sind Aufgabenbloecke, qualitative Skalen
(niedrig/mittel/hoch) und Fragen fuers Erstgespraech. */
/* --- Theme-Lecks neutralisieren -----------------------------------------
Das Theme setzt ".p,div,li,p" auf #000/16px/400, "label>span" auf
Versalien mit 100 % Breite und 20 px Innenabstand oben, jedem "li:before"
einen Pfeil und "#page h2/h3" einen Abstand unten. :where() haelt die
Spezifitaet niedrig, damit die Klassen aus werkzeug.css weiter gewinnen. */
:where(.smx-aw) :is(div, li) { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
:where(.smx-aw) li::before { content: none; }
.smx-aw ul { margin: 0; padding: 0; list-style: none; }
#aufwand-check .smx-wz_titel { margin: 6px 0 0; }
#aufwand-check h3 { margin: 0; }
.smx-aw fieldset { min-width: 0; }
.smx-aw .smx-wz_wahl input { margin: 0; padding: 0; }
.smx-aw .smx-wz_wahl label > span {
width: auto; max-width: 100%; margin: 0; padding: 8px 16px;
text-transform: none; letter-spacing: 0; line-height: 1.3;
}
/* --- Panel: volle Inhaltsbreite wie die Textspalte der Seite ----------- */
.smx-aw.smx-wz { max-width: none; }
.smx-aw .smx-wz_hinweis { color: var(--wz-leise); }
/* --- Linke Spalte: Ausgangslage ----------------------------------------- */
.smx-aw_fragen { display: grid; gap: 22px; align-content: start; }
.smx-aw_spaltenkopf {
display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
padding-bottom: 12px; border-bottom: 1px solid var(--wz-linie);
}
.smx-aw h3 { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--wz-text); }
.smx-aw_zaehler {
font-family: var(--wz-mono); font-size: 13px; font-variant-numeric: tabular-nums;
color: var(--wz-leise); white-space: nowrap;
}
.smx-aw[data-anzahl="6"] .smx-aw_zaehler { color: var(--wz-gold-text); }
.smx-aw .smx-aw_tipp { width: 100%; margin: -4px 0 2px; font-size: 13px; line-height: 1.45; color: var(--wz-leise); }
.smx-aw_zumergebnis { display: none; }
@media (max-width: 899px) {
.smx-aw .smx-aw_zumergebnis {
display: inline-flex; align-items: center; gap: 8px; justify-self: start;
min-height: 44px; font-size: 15px; font-weight: 600;
}
.smx-aw[data-anzahl="0"] .smx-aw_zumergebnis { display: none; }
}
/* --- Rechte Spalte: Messkarte ------------------------------------------- */
.smx-aw_ausgabe { display: grid; gap: 26px; align-content: start; align-self: start; scroll-margin-top: 90px; }
/* Desktop: die Messkarte bleibt beim Durchgehen der Fragen im Blick */
@media (min-width: 900px) and (min-height: 880px) {
.smx-aw_ausgabe { position: sticky; top: 90px; }
}
.smx-aw_ausgabe:focus { outline: none; }
.smx-aw_ausgabe:focus-visible { outline: 2px solid var(--wz-gold); outline-offset: 3px; }
.smx-aw_kartenkopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.smx-aw .smx-aw_leer { margin-top: -12px; font-size: 15px; color: var(--wz-leise); }
.smx-aw[data-anzahl]:not([data-anzahl="0"]) .smx-aw_leer { display: none; }
.smx-aw_abschnittkopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.smx-aw .smx-aw_abschnitt {
font-family: var(--wz-mono); font-size: 12px; font-weight: 500; letter-spacing: .12em;
text-transform: uppercase; color: var(--wz-leise);
}
.smx-aw .smx-aw_skalatext { font-family: var(--wz-mono); font-size: 12px; color: #6f6f6f; }
/* Aufgabenbloecke */
.smx-aw_bloecke { border-top: 1px solid var(--wz-linie); }
.smx-aw_block {
padding: 14px 0 14px 16px; border-bottom: 1px solid var(--wz-linie);
box-shadow: inset 2px 0 0 var(--wz-linie-stark);
transition: box-shadow 200ms var(--wz-ease);
}
.smx-aw_block[data-schwerpunkt="true"] { box-shadow: inset 3px 0 0 var(--wz-gold); }
.smx-aw_blockkopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; }
.smx-aw_blockname { font-size: 16px; font-weight: 700; color: var(--wz-text); transition: color 160ms ease; }
.smx-aw_marken { display: flex; flex-wrap: wrap; gap: 6px; }
.smx-aw .smx-aw_satz { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--wz-leise); }
.smx-aw_block[data-aktiv="false"] { box-shadow: inset 2px 0 0 var(--wz-linie); }
.smx-aw_block[data-aktiv="false"] .smx-aw_blockname { color: var(--wz-leise); }
.smx-aw_block[data-aktiv="false"] .smx-aw_marken { display: none; }
.smx-aw .smx-aw_block[data-aktiv="false"] .smx-aw_satz { font-family: var(--wz-mono); font-size: 13px; color: #6f6f6f; }
.smx-aw .smx-wz_marke[data-rolle="sumax"] { color: var(--wz-gold-text); background: rgba(230, 179, 80, .12); }
.smx-aw .smx-wz_marke[data-rolle="offen"] { color: var(--wz-leise); }
.smx-aw_schwer {
display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
border: 1px solid rgba(230, 179, 80, .55);
font-family: var(--wz-mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--wz-gold-text);
}
.smx-aw .smx-aw_bleibt { margin-top: 12px; font-size: 13px; color: var(--wz-leise); }
/* Aufwand im Angebot: dreistufige Skala. Gold fuer jede Stufe - hoher
Aufwand ist kein Maengelbefund, deshalb nicht gut/warn/schlecht. */
.smx-aw_treiberliste { display: grid; gap: 18px 28px; }
@media (min-width: 600px) { .smx-aw_treiberliste { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.smx-aw_treiber { display: grid; gap: 8px; padding: 2px 0; border-radius: 8px; }
.smx-aw_treiberkopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.smx-aw_treibername { font-size: 14px; font-weight: 600; color: var(--wz-text); }
.smx-aw_stufe { font-family: var(--wz-mono); font-size: 13px; font-weight: 600; color: var(--wz-gold-text); white-space: nowrap; }
.smx-aw_treiber[data-stufe="offen"] .smx-aw_stufe { color: #6f6f6f; font-weight: 500; }
.smx-aw_basis { font-family: var(--wz-mono); font-size: 12px; line-height: 1.45; color: var(--wz-leise); }
.smx-aw_treiber[data-stufe="offen"] .smx-aw_basis { color: #6f6f6f; }
.smx-aw .smx-wz_mess { height: 8px; }
.smx-aw .smx-wz_mess::before, .smx-aw .smx-wz_mess::after {
content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 3px; background: var(--wz-karte);
}
.smx-aw .smx-wz_mess::before { left: calc(100% / 3 - 1px); }
.smx-aw .smx-wz_mess::after { left: calc(200% / 3 - 1px); }
/* --- Erstgespraech ------------------------------------------------------ */
.smx-aw_gespraech { margin-top: clamp(24px, 3vw, 36px); }
.smx-aw_fragenliste { display: grid; gap: 10px; margin-top: 12px !important; }
@media (min-width: 900px) { .smx-aw_fragenliste { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; } }
.smx-aw_fragenliste li {
padding: 14px 16px 14px 18px; border-radius: 12px;
background: var(--wz-karte); border: 1px solid var(--wz-linie);
box-shadow: inset 3px 0 0 var(--wz-gold);
font-size: 15px; line-height: 1.5; color: var(--wz-text);
}
/* --- Abschluss ---------------------------------------------------------- */
/* Im Quelltext steht der Hauptknopf zuerst (Fokusreihenfolge); breit
rechts daneben, schmal darueber. */
.smx-aw .smx-wz_weiter .smx-wz_knopfzeile { margin-top: 0; }
.smx-aw[data-anzahl="0"] .smx-aw_neu { display: none; }
@media (min-width: 600px) { .smx-aw .smx-wz_weiter .smx-wz_knopfzeile { flex-direction: row-reverse; } }
@media (max-width: 599px) {
.smx-aw .smx-wz_weiter .smx-wz_knopfzeile { width: 100%; }
.smx-aw .smx-wz_weiter .smx-wz_knopf { width: 100%; white-space: normal; text-align: center; }
/* Messkarte schmal: mehr Zeilenbreite, Marken einzeilig */
.smx-aw .smx-aw_ausgabe { padding: 16px 14px; }
.smx-aw .smx-aw_block { padding-left: 12px; }
.smx-aw .smx-aw_marken .smx-wz_marke, .smx-aw .smx-aw_schwer { font-size: 11px; letter-spacing: 0; }
}
/* --- Messung aktualisiert: kurzer Goldschimmer ---------------------------- */
.smx-aw .ist-neu { animation: smx-aw-mess 280ms var(--wz-ease); }
@keyframes smx-aw-mess {
from { background-color: rgba(230, 179, 80, .16); }
to { background-color: transparent; }
}
.smx-aw_fragenliste li.ist-neu { animation-name: smx-aw-frage; }
@keyframes smx-aw-frage {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
/* --- Ohne JavaScript: nur Einleitung und Knopf -------------------------- */
.smx-aw_ohnejs { display: none; }
@media (scripting: none) {
.smx-aw .smx-aw_js { display: none !important; }
.smx-aw p.smx-aw_ohnejs { display: block; max-width: 70ch; color: var(--wz-leise); }
.smx-aw span.smx-aw_ohnejs { display: inline; }
}