/* KT-SEO – neutrales Erscheinungsbild. Farben als Variablen, damit das KreativVolt-Design später
   nur hier eingetragen werden muss (Logo, Farben, Schriften liegen noch nicht vor). */
:root {
  --ink: #1b2430;
  --muted: #5d6978;
  --line: #d9dee5;
  --soft: #f3f6f9;
  --bg: #f7f9fb;
  --card: #ffffff;
  --navy: #12263f;
  --accent: #0f7c8a;
  --accent-soft: #e3f2f4;
  --good: #1f6a37;
  --good-soft: #dcf1e1;
  --bad: #a8402f;
  --bad-soft: #f8e1dc;
  --warn: #8a5a00;
  --warn-soft: #fdebc8;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; font: 15px/1.5 var(--font); color: var(--ink); background: var(--bg); }
a { color: var(--accent); }
h1 { font-size: 1.6rem; margin: 0.4rem 0 0.8rem; color: var(--navy); }
h2 { font-size: 1.15rem; margin: 0 0 0.6rem; color: var(--navy); }
h3 { font-size: 1rem; margin: 1.1rem 0 0.4rem; color: var(--accent); }
code { font: 0.85em Consolas, monospace; background: var(--soft); padding: 0.1em 0.35em; border-radius: 4px; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.nodata { color: #8a94a3; font-style: italic; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 24px; background: var(--navy); color: #fff; }
.brand { color: #fff; text-decoration: none; font-weight: 650; letter-spacing: 0.02em; display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 14px; height: 14px; background: var(--accent); border-radius: 3px; display: inline-block; transform: rotate(45deg); }
.topnav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.topnav a, .topnav .linklike { color: #cfd9e6; text-decoration: none; }
.topnav a.on, .topnav a:hover { color: #fff; }
.banner { padding: 8px 24px; font-size: 0.9rem; }
.banner-test { background: var(--warn-soft); color: var(--warn); border-bottom: 1px solid #f0d89c; }
.page { max-width: 1320px; margin: 0 auto; padding: 20px 24px 40px; }
.foot { text-align: center; color: var(--muted); font-size: 0.8rem; padding: 16px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; margin: 0 0 18px; }
.card.narrow { max-width: 460px; margin: 40px auto; }
.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid.two > .card { margin: 0; }

.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.row .grow { flex: 1; min-width: 200px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; color: var(--muted); }
input, textarea, select { font: inherit; color: var(--ink); padding: 8px 10px; border: 1px solid #c4ccd6; border-radius: 7px; background: #fff; width: 100%; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
textarea { resize: vertical; }
form.inline { display: inline; margin: 0; }
.btn { display: inline-block; font: inherit; padding: 8px 16px; border-radius: 7px; border: 1px solid #b9c3cf; background: #fff; color: var(--navy); cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--soft); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: #0c6a76; }
.btn.small { padding: 5px 12px; font-size: 0.85rem; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; }
.linklike.danger { color: var(--bad); }

.flash { padding: 10px 14px; border-radius: 8px; margin: 0 0 16px; border: 1px solid; }
.flash-ok { background: var(--good-soft); border-color: #b5dcc0; color: var(--good); }
.flash-error { background: var(--bad-soft); border-color: #e9b9af; color: var(--bad); }
.flash-info { background: var(--accent-soft); border-color: #b6dde2; color: #0c5560; }

.crumbs { color: var(--muted); font-size: 0.9rem; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid var(--line); margin: 8px 0 14px; }
.tabs a { padding: 8px 14px; text-decoration: none; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabs a.on { color: var(--navy); border-bottom-color: var(--accent); font-weight: 600; }
.tabs a:hover { color: var(--navy); }

.list { list-style: none; margin: 0 0 12px; padding: 0; }
.list li { padding: 6px 0; border-bottom: 1px solid var(--soft); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.steps { padding-left: 20px; }
.qr { text-align: center; margin: 12px 0; }
.secret { letter-spacing: 0.1em; font-size: 1rem; }

.meter { height: 12px; background: var(--soft); border-radius: 6px; overflow: hidden; margin: 6px 0 10px; border: 1px solid var(--line); }
.meter span { display: block; height: 100%; background: var(--accent); }

.group { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 0 0 14px; background: #fcfdfe; }
.group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.group-head h3 { margin: 0 0 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-soft); color: #0c5560; border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 0.85rem; }
.chip-x { background: none; border: 0; cursor: pointer; font-size: 1.1rem; line-height: 1; color: #0c5560; padding: 0 6px; }

.snap-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.table-wrap { overflow-x: auto; margin: 0 0 8px; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th { background: var(--navy); color: #fff; text-align: left; font-weight: 600; padding: 8px 10px; white-space: nowrap; }
td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:nth-child(even) td { background: var(--soft); }
th.num, td.num { text-align: right; white-space: nowrap; }
td.wide { min-width: 320px; }
td code { white-space: normal; }
table.compact td, table.compact th { padding: 5px 8px; }
tr.own td { background: var(--good-soft) !important; }
tr.comp td { background: var(--warn-soft) !important; }

.trend { font-weight: 600; white-space: nowrap; }
.trend-steigend { color: var(--good); }
.trend-fallend { color: var(--bad); }
.trend-stabil { color: var(--muted); }
.spark { display: block; }
.spark polyline { fill: none; stroke: #6b7686; stroke-width: 1.4; stroke-linejoin: round; }
.spark-steigend polyline { stroke: #1f7a3d; }
.spark-fallend polyline { stroke: #b3402f; }

.status { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; background: var(--soft); color: var(--muted); }
.status-ok { background: var(--good-soft); color: var(--good); }
.status-kein-ranking, .status-mehrere-pruefen { background: var(--bad-soft); color: var(--bad); }
.status-andere-seite, .status-ziel-offen { background: var(--warn-soft); color: var(--warn); }
.tag { display: inline-block; font-size: 0.72rem; padding: 1px 7px; border-radius: 999px; background: var(--soft); color: var(--muted); margin-left: 6px; }
.tag-own { background: var(--good-soft); color: var(--good); }
.tag-comp { background: var(--warn-soft); color: var(--warn); }

.tabs.sub { border-bottom-width: 1px; margin-top: 4px; }
.tabs.sub a { padding: 6px 12px; font-size: 0.92rem; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 0 0 18px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; }
.kpi-label { color: var(--muted); font-size: 0.85rem; }
.kpi-value { font-size: 1.6rem; font-weight: 650; color: var(--navy); }
svg.chart { width: 100%; height: 90px; display: block; }
svg.chart polyline { stroke-width: 1.8; vector-effect: non-scaling-stroke; }

.assistant-layout { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: start; }
.assistant-layout > .card { margin: 0; }
.conv-list li { flex-direction: column; align-items: flex-start; gap: 0; border-radius: 6px; padding: 6px 8px; }
.conv-list li.on { background: var(--accent-soft); }
.conv-list a { text-decoration: none; font-weight: 600; color: var(--navy); overflow-wrap: anywhere; }
.chat { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 14px; max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.msg { padding: 10px 14px; border-radius: 10px; max-width: 92%; overflow-wrap: anywhere; }
.msg p { margin: 0 0 8px; }
.msg p:last-child, .msg ul:last-child, .msg ol:last-child { margin-bottom: 0; }
.msg ul, .msg ol { margin: 0 0 8px; padding-left: 20px; }
.msg h3, .msg h4, .msg h5 { margin: 10px 0 4px; font-size: 1rem; color: var(--navy); }
.msg pre { background: var(--soft); padding: 8px 10px; border-radius: 6px; overflow-x: auto; }
.msg .table-wrap { margin: 6px 0; }
.msg-user { align-self: flex-end; background: var(--accent-soft); border: 1px solid #b6dde2; }
.msg-assistant { align-self: flex-start; background: #fff; border: 1px solid var(--line); }
.msg-note { align-self: center; background: var(--warn-soft); border: 1px solid #f0d89c; color: var(--warn); font-size: 0.9rem; }
.tool-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 !important; }
.tool-chips li { background: var(--soft); color: var(--muted); border-radius: 999px; padding: 2px 10px; font-size: 0.8rem; }
.chat-status { color: var(--accent); font-weight: 600; }
.pending { border: 2px solid var(--warn); background: var(--warn-soft); border-radius: 10px; padding: 12px 16px; margin: 0 0 14px; }
.pending h3 { margin-top: 0; color: var(--warn); }
.chat-form { margin-top: 8px; }

@media (max-width: 900px) {
  .assistant-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .page { padding: 14px 12px 30px; }
  .topbar { padding: 10px 12px; }
  h1 { font-size: 1.35rem; }
}

/* Rank Tracking */
.rank-note { margin-bottom: 18px; }
.rank-setup fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.rank-setup legend { font-weight: 600; color: var(--navy); padding: 0 6px; }
label.check { flex-direction: row; align-items: center; gap: 8px; color: inherit; font-size: 0.95rem; }
details > summary { cursor: pointer; font-weight: 600; color: var(--navy); margin: 10px 0; }
.dist { display: flex; flex-direction: column; gap: 6px; }
.dist-item { display: grid; grid-template-columns: 48px minmax(80px, 1fr) 190px; gap: 10px; align-items: center; }
.dist-count { font-weight: 650; text-align: right; }
.dist-bar { background: var(--soft); border-radius: 4px; height: 10px; overflow: hidden; }
.dist-bar > span { display: block; height: 100%; background: var(--accent); }
.rank-chart { height: 170px; background: var(--soft); border-radius: 8px; }
.rank-axis { display: flex; justify-content: space-between; margin: 4px 0 12px; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; }
svg.spark { display: block; }
table.ctr th, table.ctr td { padding: 4px 6px; font-size: 0.85rem; }
svg.chart.rank-chart polyline.own { stroke-width: 3; }
/* Site Audit */
.sev { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; margin: 0 4px 2px 0; background: var(--soft); color: var(--muted); }
.sev-critical { background: var(--bad-soft); color: var(--bad); }
.sev-warning { background: var(--warn-soft); color: var(--warn); }
.sev-info { background: var(--accent-soft); color: #0c5560; }
.delta-schlechter { color: var(--bad); font-weight: 600; }
.delta-besser { color: var(--good); font-weight: 600; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: 4px 0; border-bottom: 1px solid var(--line); }
label.check { flex-direction: row; display: flex; align-items: center; gap: 6px; padding-bottom: 8px; }
/* Domain-Überblick und Backlinks */
fieldset.checks { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
fieldset.checks legend { color: var(--muted); font-size: 0.85rem; padding: 0 6px; }
label.check { display: inline-flex; gap: 6px; align-items: center; }
table.compare td.leader { font-weight: 700; color: var(--good); }
th a { color: inherit; text-decoration: none; }
th a:hover { text-decoration: underline; }
details.more { margin: 12px 0 0; }
details.more summary { cursor: pointer; color: var(--navy); font-weight: 600; }
.adopt { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--soft); }

/* Auswahlknöpfe und Häkchen: nicht auf volle Breite ziehen, neben dem Text anzeigen */
input[type="radio"], input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; }
label:has(> input[type="radio"]), label:has(> input[type="checkbox"]) { flex-direction: row; align-items: center; gap: 8px; color: inherit; font-size: 0.95rem; }