/* SUMAX Werkzeug: SERP-Snippet-Generator (23.09.2026)
   Baut auf assets/werkzeug.css auf (dunkles Messpult, Gold = Messung).
   Signatur: Pixel-Lineal ueber der hellen Vorschau. Gold = gemessene
   Title-Breite, Rot = Richtwert-Grenze (600 px), an der Google kuerzt.
   Die Vorschau hat feste Pixelmasse (Desktop 680 px, Mobil 360 px) und
   wird per CSS zoom auf die verfuegbare Breite verkleinert. */

.smx-wz--serp {
  --serp-blau: #1a0dab;
  --serp-text: #4d5156;
  --serp-dunkel: #202124;
  --serp-datum: #70757a;
  --serp-linie: #dadce0;
  --serp-grenze: #d93025;
  --serp-leer: #9aa0a6;
  --serp-schrift: Arial, "Liberation Sans", Arimo, Helvetica, sans-serif;
  --serp-zoom: 1;
}

/* ---- Theme-Einfluesse neutralisieren (Label, Buttons, Absaetze) ------- */
.smx-wz--serp label,
.smx-wz--serp button,
.smx-wz--serp summary { text-transform: none; letter-spacing: normal; }
.smx-wz--serp .smx-wz_etikett label { font: inherit; letter-spacing: inherit; color: inherit; margin: 0; padding: 0; }
.smx-wz--serp .smx-wz_titel { max-width: 22ch; }

/* ---- Eingabespalte ---------------------------------------------------- */
.wz-serp_optional {
  font-family: var(--wz-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: #8a8a8a;
}
.smx-wz--serp textarea { height: auto; min-height: 112px; }   /* Theme setzt feste Hoehe */

/* URL mit "Von URL laden" */
.wz-serp_urlzeile { display: flex; gap: 10px; align-items: stretch; }
.wz-serp_urlzeile input { flex: 1 1 auto; min-width: 0; }
.smx-wz--serp .wz-serp_laden { flex: 0 0 auto; min-height: 52px; padding: 12px 18px; font-size: 15px; }
.smx-wz--serp .wz-serp_laden[aria-busy="true"] { cursor: progress; }
@media (max-width: 479px) {
  .wz-serp_urlzeile { flex-direction: column; }
  .smx-wz--serp .wz-serp_laden { width: 100%; }
}
.wz-serp_ladestatus { font-size: 14px; line-height: 1.45; color: var(--wz-text); }
.wz-serp_ladestatus:empty { margin-top: -8px; }
.wz-serp_ladestatus[data-zustand="schlecht"] { color: var(--wz-schlecht); }
.wz-serp_ladestatus[data-zustand="gut"]::before { content: "✓ "; color: var(--wz-gut); }

/* Messbalken mit Grenzstrich: die Grenze sitzt bei 80 % der Balkenbreite,
   alles rechts davon ist Ueberlauf (JS setzt --wz-anteil = Wert / Grenze / 1,25). */
.wz-serp_messung { position: relative; margin-top: 4px; }
.wz-serp_grenze {
  position: absolute; left: 80%; top: -4px; width: 2px; height: 14px; margin-left: -1px;
  border-radius: 1px; background: var(--wz-text); opacity: .7; pointer-events: none;
}
.wz-serp_zahlen {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px;
  font-family: var(--wz-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--wz-leise);
}
.wz-serp_urteil {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  min-height: 24px; font-size: 14px; line-height: 1.45; color: var(--wz-text);
}
.wz-serp_urteil .smx-wz_marke { flex: 0 0 auto; }
.wz-serp_urteil .smx-wz_marke:not([data-zustand])::before { background: #6f6f6f; }
.wz-serp_urteiltext { flex: 1 1 14em; }
.wz-serp_andere { flex: 0 0 auto; font-family: var(--wz-mono); font-size: 12px; color: var(--wz-leise); }
.wz-serp_andere:empty { display: none; }
.wz-serp_urteil--keyword { gap: 6px; }
.wz-serp_urteil--keyword .smx-wz_klein { flex: 1 1 100%; }

.wz-serp_datumwahl { margin-top: 2px; }

/* Bausteine: Symbole, Nutzen, Handlungsaufforderungen */
.wz-serp_bausteine { margin-top: 24px; border-top: 1px solid var(--wz-linie); border-bottom: 1px solid var(--wz-linie); }
.wz-serp_bausteine summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 12px 2px; list-style: none; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--wz-text);
}
.wz-serp_bausteine summary::-webkit-details-marker { display: none; }
.wz-serp_bausteine summary::after {
  content: "+"; flex: 0 0 auto; font-family: var(--wz-mono); font-size: 22px; font-weight: 400; line-height: 1;
  color: var(--wz-gold-text); transition: transform 200ms var(--wz-ease);
}
.wz-serp_bausteine[open] summary::after { transform: rotate(45deg); }
.wz-serp_bausteine summary:focus-visible { outline: 2px solid var(--wz-gold); outline-offset: 2px; border-radius: 6px; }
.wz-serp_bausteine-inhalt { display: grid; gap: 10px; padding: 2px 0 20px; }
.wz-serp_bausteine[open] .wz-serp_bausteine-inhalt { animation: smx-wz-ein 220ms var(--wz-ease) both; }
.wz-serp_ziel { color: var(--wz-text); font-weight: 600; }
.wz-serp_gruppe {
  margin-top: 8px !important; font-family: var(--wz-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--wz-leise);
}
.wz-serp_chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wz-serp_chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; margin: 0; padding: 8px 14px;
  border: 1px solid var(--wz-linie-stark); border-radius: 10px;
  background: var(--wz-karte); color: var(--wz-text);
  font: inherit; font-size: 14px; line-height: 1.2; cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms var(--wz-ease);
}
.wz-serp_chip--symbol { width: 44px; padding: 0; font-size: 18px; line-height: 1; }
.wz-serp_chip:active { transform: scale(.97); }
.wz-serp_chip:focus-visible { outline: 2px solid var(--wz-gold); outline-offset: 2px; }
@media (hover: hover) {
  .wz-serp_chip:hover { border-color: var(--wz-gold); background: var(--wz-hauch); }
}

.smx-wz--serp .smx-wz_knopfzeile { margin-top: 20px; }
.smx-wz--serp .smx-wz_knopfzeile .smx-wz_knopf { min-height: 44px; padding: 10px 20px; font-size: 15px; }
.wz-serp_status { margin-top: 12px; font-size: 14px; color: var(--wz-leise); }
.wz-serp_status:empty { margin-top: 0; }
.wz-serp_rueck {
  margin: 0; padding: 0 2px; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--wz-gold-text); text-decoration: underline; text-underline-offset: 3px;
}
.wz-serp_rueck:focus-visible { outline: 2px solid var(--wz-gold); outline-offset: 2px; border-radius: 4px; }

/* ---- Ausgabespalte ---------------------------------------------------- */
.wz-serp_ausgabe { min-width: 0; }
@media (min-width: 900px) {
  .wz-serp_ausgabe { position: sticky; top: 108px; align-self: start; }   /* unter der festen Kopfleiste (94 px) */
}
.wz-serp_vorschaukopf, .wz-serp_codekopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
}
.wz-serp_vorschaukopf { margin-bottom: 14px; }
.wz-serp_vorschautitel {
  font-family: var(--wz-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--wz-leise);
}
.smx-wz--serp .smx-wz_schalter button:focus-visible { outline: 2px solid var(--wz-gold); outline-offset: 2px; }

/* Bildschirm: hell wie die Google-Ergebnisseite */
.wz-serp_bildschirm {
  position: relative; overflow: hidden; overflow-x: auto;
  border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--wz-linie);
}
.smx-wz--serp[data-ansicht="mobil"] .wz-serp_bildschirm { padding: 20px 16px; background: #eceef1; }

.wz-serp_rahmen {
  position: relative; width: 680px; zoom: var(--serp-zoom);
  font-family: var(--serp-schrift); font-size: 14px; line-height: 22px; font-weight: 400;
  color: var(--serp-text); text-align: left; letter-spacing: normal;
}
.smx-wz--serp[data-ansicht="mobil"] .wz-serp_rahmen {
  width: 360px; margin: 0 auto; border-radius: 24px; background: #fff;
  box-shadow: 0 0 0 1px var(--serp-linie), 0 12px 32px -18px rgba(0, 0, 0, .35);
}

/* Lineal (nur Desktop): Nullpunkt bei 20 px = Textanfang der Vorschau */
.wz-serp_lineal { position: relative; height: 36px; background: #f4f4f2; border-bottom: 1px solid var(--wz-linie); overflow: hidden; }
.wz-serp_lineal::before, .wz-serp_lineal::after {
  content: ""; position: absolute; left: 20px; bottom: 0; width: 641px; pointer-events: none;
}
.wz-serp_lineal::before { height: 6px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.21) 0 1px, transparent 1px 20px); }
.wz-serp_lineal::after { height: 11px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0 1px, transparent 1px 100px); }
.wz-serp_lineal-zahl {
  position: absolute; top: 5px; transform: translateX(-50%);
  font-family: var(--wz-mono); font-size: 10px; line-height: 12px; font-variant-numeric: tabular-nums; color: #6f6f6f;
}
.wz-serp_lineal-zahl.ist-null { transform: none; }
.wz-serp_lineal-zahl.ist-grenze { color: var(--wz-schlecht); font-weight: 600; }
.wz-serp_lineal-balken, .wz-serp_lineal-ueber {
  position: absolute; bottom: 0; height: 3px; transform-origin: left center; transform: scaleX(0);
  transition: transform 200ms var(--wz-ease);
}
.wz-serp_lineal-balken { left: 20px; width: 600px; background: var(--wz-gold); }
.wz-serp_lineal-ueber { left: 620px; width: 40px; background: var(--wz-schlecht); }
.wz-serp_lineal-marke {
  position: absolute; left: 19px; top: 18px; bottom: 0; width: 2px; background: var(--wz-gold);
  transform: translateX(0); transition: transform 200ms var(--wz-ease), background-color 160ms ease;
}
.wz-serp_lineal-marke::before {
  content: ""; position: absolute; left: -4px; top: -6px;
  border: 5px solid transparent; border-top-color: inherit; border-top: 6px solid var(--wz-gold);
}
.wz-serp_lineal.ist-drueber .wz-serp_lineal-marke { background: var(--wz-schlecht); }
.wz-serp_lineal.ist-drueber .wz-serp_lineal-marke::before { border-top-color: var(--wz-schlecht); }
.wz-serp_lineal.ist-leer .wz-serp_lineal-marke { opacity: 0; }

/* Schnittlinie bei 600 px, vom Lineal bis unter die Title-Zeile */
.wz-serp_schnitt {
  position: absolute; left: 620px; top: 26px; height: 106px; width: 0;
  border-left: 1px dashed var(--serp-grenze); opacity: .75; pointer-events: none;
}
.smx-wz--serp[data-ansicht="mobil"] .wz-serp_lineal,
.smx-wz--serp[data-ansicht="mobil"] .wz-serp_schnitt { display: none; }

/* Treffer. Das Theme setzt "* { font-family: Inter }" direkt auf jedes Element;
   geerbt kaeme Arial dort nie an. Die Vorschau muss aber in genau der Schrift
   stehen, in der gemessen wird -> Arial auf jedes Element im Treffer. */
.wz-serp_treffer, .wz-serp_treffer * { font-family: var(--serp-schrift); }
.wz-serp_treffer { padding: 18px 60px 24px 20px; }
.smx-wz--serp[data-ansicht="mobil"] .wz-serp_treffer { padding: 16px 16px 18px; }
.smx-wz--serp .wz-serp_treffer p { margin: 0; }
.wz-serp_quelle { display: flex; align-items: center; gap: 12px; height: 38px; }
.wz-serp_favicon {
  display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  background: #f1f3f4; box-shadow: 0 0 0 1px #e3e5e8; color: #5f6368;
  font: 700 13px/1 var(--serp-schrift);
}
.wz-serp_quelle-text { display: flex; flex-direction: column; min-width: 0; max-width: 520px; }
.wz-serp_seitenname, .wz-serp_pfad { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wz-serp_seitenname { font-size: 14px; line-height: 20px; color: var(--serp-dunkel); }
.wz-serp_pfad { font-size: 12px; line-height: 18px; color: var(--serp-text); }
.wz-serp_punkte { flex: 0 0 auto; align-self: flex-end; margin-left: -4px; font-size: 13px; line-height: 18px; color: var(--serp-text); }
.smx-wz--serp .wz-serp_titelzeile {
  margin-top: 6px; font-size: 20px; line-height: 26px; font-weight: 400; color: var(--serp-blau); white-space: nowrap;
}
.smx-wz--serp .wz-serp_textzeile {
  margin-top: 4px; font-size: 14px; line-height: 22px; color: var(--serp-text); overflow-wrap: anywhere;
}
.smx-wz--serp[data-ansicht="mobil"] .wz-serp_titelzeile { white-space: normal; }
.wz-serp_zeile { display: block; white-space: nowrap; }
.wz-serp_textzeile b { font-weight: 700; color: var(--serp-text); }
.wz-serp_datum { color: var(--serp-datum); }
.smx-wz--serp .ist-platzhalter { color: var(--serp-leer); }

.wz-serp_richtwerte { margin-top: 12px; }

/* HTML-Ausgabe */
.wz-serp_codekarte { margin-top: 20px; }
.wz-serp_codekopf { margin-bottom: 14px; }
.smx-wz--serp .wz-serp_kopieren { min-width: 172px; min-height: 44px; padding: 10px 20px; font-size: 15px; }
.smx-wz--serp .wz-serp_kopieren.ist-kopiert { background: var(--wz-gut); border-color: var(--wz-gut); }
.smx-wz--serp .wz-serp_kopieren[disabled] { cursor: not-allowed; }
.wz-serp_code {
  max-height: 240px; margin: 0; padding: 14px 16px; overflow: auto;
  border-radius: 10px; border: 1px solid var(--wz-linie); background: var(--wz-grund);
  font-family: var(--wz-mono); font-size: 13px; line-height: 1.65; color: var(--wz-text);
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; tab-size: 2;
}
.wz-serp_code:focus-visible { outline: 2px solid var(--wz-gold); outline-offset: 2px; }
.wz-serp_code code { font: inherit; color: inherit; background: none; padding: 0; white-space: inherit; }
.wz-serp_tag { color: var(--wz-leise); }
.wz-serp_kopierstatus { margin-top: 10px; }
.wz-serp_kopierstatus:empty { margin-top: 0; }

@media (max-width: 599px) {
  .wz-serp_codekopf .wz-serp_kopieren { width: 100%; }
  .smx-wz--serp .smx-wz_knopfzeile .smx-wz_knopf { flex: 1 1 auto; }
}