/* SEO-Prüfung: Chip in der Kopfleiste und Prüffenster */
body.creator-workspace header .actions > .seo-chip { display: inline-flex !important; }
.seo-chip { --seo-dot: #c9a227; }
.seo-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--seo-dot); margin-right: 6px; align-self: center; flex: none; }
.seo-chip[data-level="gut"] { --seo-dot: #2f9e6b; }
.seo-chip[data-level="fehler"] { --seo-dot: #d0453a; }
.seo-chip small { color: #b2392f !important; font-weight: 600; }
.seo-chip::before { margin-right: 0; }
/* Schmale Kopfleiste: nur Punktzahl, Kalkulation ohne Monatsbetrag */
@media (max-width: 1180px) { .seo-chip small, .hwc-price-chip:not(.seo-chip) small { display: none; } }
#seoDialog { width: min(1080px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 22px; background: #fbfaf7; color: #1f2b30; box-shadow: 0 30px 90px #0b182040; overflow: hidden; display: none; flex-direction: column; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
#seoDialog[open] { display: flex; }
#seoDialog::backdrop { background: #0b1820a6; backdrop-filter: blur(3px); }
#seoDialog button { font: inherit; cursor: pointer; border-radius: 10px; border: 1px solid #d7dee2; background: #fff; color: #1f2b30; padding: 8px 14px; min-height: 0; height: auto; box-shadow: none; }
#seoDialog button.primary { background: #1d5c55; border-color: #1d5c55; color: #fff; font-weight: 600; }
#seoDialog button:hover { border-color: #1d5c55; }

.seo-head { display: flex; align-items: center; gap: 18px; padding: 22px 26px; background: linear-gradient(120deg, #182c3a, #1d4a52); color: #fff; }
.seo-head h2 { margin: 2px 0; font-size: 21px; line-height: 1.25; color: #fff; }
.seo-head p { margin: 0; opacity: .75; font-size: 13px; }
.seo-kicker { font-size: 11px; letter-spacing: .16em; color: #e7c9a2; font-weight: 700; }
.seo-score { --seo-c: #c9a227; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.seo-score[data-level="gut"] { --seo-c: #3fbf86; }
.seo-score[data-level="fehler"] { --seo-c: #ef6a5e; }
.seo-score span { width: 54px; height: 54px; border-radius: 50%; background: #182c3a; display: grid; place-items: center; font-size: 20px; font-weight: 700; color: #fff; }
#seoDialog .seo-close { margin-left: auto; background: #ffffff1f; border-color: #ffffff33; color: #fff; width: 36px; height: 36px; padding: 0; }

.seo-body { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 0; overflow: auto; min-height: 0; flex: 1; }
.seo-snippet { padding: 20px 22px; border-right: 1px solid #e3e8eb; display: grid; gap: 12px; align-content: start; background: #fff; }
.seo-pages { display: flex; flex-wrap: wrap; gap: 6px; }
#seoDialog .seo-pages button { padding: 5px 11px; font-size: 12px; border-radius: 999px; }
#seoDialog .seo-pages button[aria-pressed="true"] { background: #1d5c55; border-color: #1d5c55; color: #fff; }
.seo-google { border: 1px solid #e3e8eb; border-radius: 14px; padding: 14px 16px; background: #fff; font-family: Arial, sans-serif; box-shadow: 0 6px 20px #10203010; }
.seo-google small { color: #4d5156; font-size: 12px; display: block; }
.seo-google b { display: block; color: #1a0dab; font-size: 18px; font-weight: 400; line-height: 1.3; margin: 3px 0; }
.seo-google p { margin: 0; color: #4d5156; font-size: 13px; line-height: 1.5; }
#seoDialog .seo-snippet label { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 6px; align-items: end; margin: 0; padding: 0; font-size: 12px; font-weight: 600; color: #4a5a61; }
#seoDialog .seo-snippet input, #seoDialog .seo-snippet textarea { font: inherit; font-weight: 400; font-size: 14px; padding: 9px 11px; border: 1px solid #d6dde0; border-radius: 10px; background: #fbfcfc; color: #1f2b30; width: 100%; box-sizing: border-box; resize: vertical; grid-column: 1 / -1; }
.seo-count { white-space: nowrap; font-weight: 600; color: #b07d12; }
.seo-count[data-ok="true"] { color: #2f8a5f; }
#seoDialog #seoSave { justify-self: start; }

.seo-list { padding: 16px 20px; display: grid; gap: 8px; align-content: start; }
.seo-list article { display: grid; grid-template-columns: 78px 1fr auto; gap: 12px; align-items: center; padding: 11px 14px; border-radius: 12px; background: #fff; border: 1px solid #e6ebee; border-left: 4px solid #c9a227; }
.seo-list article[data-level="fehler"] { border-left-color: #d0453a; }
.seo-list article[data-level="tipp"] { border-left-color: #6b8fa3; }
.seo-list article > span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9a7413; }
.seo-list article[data-level="fehler"] > span { color: #b2392f; }
.seo-list article[data-level="tipp"] > span { color: #4f6f80; }
.seo-list b { font-size: 12px; color: #6a7a81; font-weight: 600; }
.seo-list p { margin: 1px 0 0; }
#seoDialog .seo-list button { white-space: nowrap; font-size: 12px; padding: 6px 10px; }
.seo-ok { margin: 20px 0; font-size: 15px; color: #2f8a5f; font-weight: 600; }

.seo-foot { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid #e3e8eb; background: #fff; }
.seo-foot small { margin-right: auto; color: #6a7a81; font-size: 12px; }

@media (max-width: 820px) {
  .seo-body { grid-template-columns: 1fr; }
  .seo-snippet { border-right: 0; border-bottom: 1px solid #e3e8eb; }
  .seo-list article { grid-template-columns: 1fr; gap: 4px; }
  #seoDialog .seo-list button { justify-self: start; }
  .seo-foot { flex-wrap: wrap; }
  .seo-head { padding: 16px; gap: 12px; }
  .seo-head h2 { font-size: 17px; }
}