/* ==========================================================
   SEORCH Keyword Monitor – Design „Kontrast“
   Liegt über km-app.css (Layout der App) und nutzt die Tokens aus /css/base.css.
   ========================================================== */

/* ---------- Grundgerüst ---------- */
.km-body { font: 400 16px/1.55 var(--font); color: var(--text); }
.km { padding-block: clamp(20px, 3vw, 36px) 56px; }
/* Eine Breite für Kopf, Inhalt und Footer: Projektseiten (screenwrapper-max) sind insgesamt breiter */
.km-wide { --max: 1440px; }
.km-wrap { width: min(var(--max), calc(100% - 2 * var(--gutter))); margin-inline: auto; padding: 0; }
.km-body--app .km-footer { width: min(var(--max), calc(100% - 2 * var(--gutter))); max-width: none; padding-inline: 0; }
.km a { color: var(--text); text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent); text-underline-offset: 3px; }
.km a:hover { color: var(--red); text-decoration-color: var(--red); }
.km h1, .km h2, .km h3, .km h4 { font-family: var(--font); color: var(--text); letter-spacing: -.02em; line-height: 1.15; font-weight: 800; }
.km h1 { font-size: clamp(30px, 4vw, 48px); margin: 0 0 18px; }
.km h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 14px; }
.km h3 { font-size: 19px; margin: 0 0 10px; }
.km h4 { font-size: 16px; margin: 0 0 8px; }
.km p { margin: 0 0 12px; color: var(--text-2); }
.km strong, .km b { font-weight: 700; color: var(--text); }
.km .h_fancy { background: none; -webkit-text-fill-color: currentColor; color: var(--text); }

/* Kopf: Logo-Zusatz */
.km-logo { white-space: nowrap; align-items: baseline; }
.km-logo span { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--red); margin-left: 5px; }
@media (max-width: 1100px) { .km-logo span { display: none; } }

/* ---------- Raster der App ---------- */
/* Flex-Raster statt Float-Spalten: feste Abstände, Kanten bündig mit dem Kopf */
.km .row { --km-gap: 24px; display: flex; flex-wrap: wrap; gap: var(--km-gap); margin: 0 0 var(--km-gap); width: 100%; }
.km .row::after { display: none; }
.km .row > * { flex: 1 1 100%; min-width: 0; }
.km .row > .column { float: none; width: auto; margin: 0 !important; }
.km .row > .col-1-6 { flex: 0 0 calc((100% + var(--km-gap)) * 1 / 6 - var(--km-gap)); }
.km .row > .col-1-5 { flex: 0 0 calc((100% + var(--km-gap)) * 1 / 5 - var(--km-gap)); }
.km .row > .col-1-4 { flex: 0 0 calc((100% + var(--km-gap)) * 1 / 4 - var(--km-gap)); }
.km .row > .col-1-3, .km .row > .col-2-6 { flex: 0 0 calc((100% + var(--km-gap)) * 1 / 3 - var(--km-gap)); }
.km .row > .col-2-5 { flex: 0 0 calc((100% + var(--km-gap)) * 2 / 5 - var(--km-gap)); }
.km .row > .col-1-2, .km .row > .col-2-4, .km .row > .col-3-6 { flex: 0 0 calc((100% + var(--km-gap)) * 1 / 2 - var(--km-gap)); }
.km .row > .col-3-5 { flex: 0 0 calc((100% + var(--km-gap)) * 3 / 5 - var(--km-gap)); }
.km .row > .col-2-3, .km .row > .col-4-6 { flex: 0 0 calc((100% + var(--km-gap)) * 2 / 3 - var(--km-gap)); }
.km .row > .col-3-4 { flex: 0 0 calc((100% + var(--km-gap)) * 3 / 4 - var(--km-gap)); }
.km .row > .col-4-5 { flex: 0 0 calc((100% + var(--km-gap)) * 4 / 5 - var(--km-gap)); }
.km .row > .col-5-6 { flex: 0 0 calc((100% + var(--km-gap)) * 5 / 6 - var(--km-gap)); }
.km .row > .col-1-1, .km .row > .col-2-2, .km .row > .col-3-3, .km .row > .col-4-4, .km .row > .col-5-5, .km .row > .col-6-6 { flex: 0 0 100%; }
.km .marged { margin: 0; }
.km .padded { padding: clamp(16px, 2vw, 24px); }

/* ---------- Karten ---------- */
.km .gridbox, .km .indexbox {
  background: var(--glass-2); border: 1px solid var(--stroke); border-radius: var(--r-lg);
  box-shadow: var(--shadow); height: 100%;
}
.km .gridbox:hover { border-color: var(--stroke-2); }
.km h3.domainlink { margin: 6px 0 12px; font-size: 22px; letter-spacing: -.02em; }
.km h3.domainlink a { text-decoration: none; }
.km h3.domainlink a:hover { color: var(--red); }
.km .km-project { position: relative; transition: border-color .2s, transform .3s var(--spring); }
.km .km-project:hover { border-color: var(--text); transform: translateY(-2px); }
.km .km-project h3.domainlink a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.km .km-project:hover h3.domainlink a { color: var(--red); }
.km a.back { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; margin: 8px 0 16px; padding: 6px 14px 6px 11px; border: 1px solid var(--stroke); border-radius: 8px; background: var(--glass-2); color: var(--text); font: 600 14px var(--font); text-decoration: none; transition: border-color .2s; }
.km a.back::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--back-ico) center / contain no-repeat; mask: var(--back-ico) center / contain no-repeat; --back-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); transition: transform .3s var(--spring); }
.km a.back:hover { border-color: var(--text); color: var(--text); }
.km a.back:hover::before { transform: translateX(-3px); }
@media print { .km a.back { display: none; } }
.km .static { color: var(--muted); font-size: 14px; margin-right: 6px; }
.km .dynamic { font-weight: 600; font-size: 14px; color: var(--text); }

.km .errorbox { background: color-mix(in srgb, var(--red) 8%, var(--glass-2)); border: 1px solid color-mix(in srgb, var(--red) 35%, transparent); border-radius: var(--r-lg); padding: 16px 20px; margin: 12px 0; }
.km .errorbox p { color: var(--text); margin: 0; }

/* ---------- Unternavigation eines Projekts ---------- */
.km .submenu {
  display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; gap: 4px; padding: 6px; margin: 16px 0 20px; border-radius: 12px;
  background: var(--glass-2); border: 1px solid var(--stroke); box-shadow: var(--shadow);
}
.km .submenu a, .km .submenu b {
  float: none; display: inline-flex; align-items: center; height: 38px; padding: 0 14px; margin: 0; width: auto;
  border-radius: 8px; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; color: var(--text-2);
  background: none; white-space: nowrap;
}
.km .submenu a:hover { background: var(--bg-2); color: var(--text); }
.km .submenu b { background: var(--text); color: #fff; }

/* ---------- Buttons ---------- */
.km .cta, .km input[type='submit'], .km button.cta, .km a.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: auto; min-height: 46px; padding: 10px 22px;
  border: 0; border-radius: 8px; background: var(--grad); color: #fff; font: 700 15px var(--font); letter-spacing: .02em; line-height: 1.2;
  text-transform: none; text-decoration: none; cursor: pointer; box-shadow: 0 10px 24px -12px rgba(222, 18, 18, .7);
  transition: transform .3s var(--spring), filter .2s;
}
.km .cta:hover, .km input[type='submit']:hover, .km a.cta:hover { transform: translateY(-1px); filter: brightness(1.05); color: #fff; }
.km .cta-small, .km a.cta-small, .km input[type='submit'].cta-small, .km button.cta-small {
  min-height: 32px; height: 32px; padding: 0 12px; font-size: 12px; letter-spacing: .04em; border-radius: 6px; box-shadow: none;
  background: var(--glass-2); color: var(--text); border: 1px solid var(--stroke-2);
}
.km .cta-small:hover, .km a.cta-small:hover { border-color: var(--text); color: var(--text); filter: none; }
.km .download a, .km a.download { font: 700 11px var(--mono); letter-spacing: .06em; }

/* ---------- Formulare ---------- */
.km label { font-size: 14px; font-weight: 600; color: var(--text); }
.km .fieldclass, .km .fieldclass2, .km select, .km textarea,
.km input[type='text'], .km input[type='email'], .km input[type='password'], .km input[type='number'], .km input[type='url'], .km input[type='search'] {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; max-width: 100%; height: auto; min-height: 48px;
  padding: 10px 14px; border: 1px solid var(--stroke-2); border-radius: 8px; background: var(--glass-2); color: var(--text);
  font: 500 16px var(--font); box-shadow: none; transition: border-color .2s, box-shadow .2s;
}
.km .fieldclass { width: 100%; font-size: 18px; }
.km textarea { min-height: 120px; line-height: 1.5; resize: vertical; width: 100%; }
.km select {
  padding-right: 40px; cursor: pointer;
  background: var(--glass-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c7c7c' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;
}
.km #domainselect { width: 100%; font-size: 18px; font-weight: 600; min-height: 56px; }
.km .fieldclass:focus, .km .fieldclass2:focus, .km select:focus, .km textarea:focus, .km input:focus {
  outline: 0; border-color: var(--text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--text) 12%, transparent);
}
.km .formsection { margin: 14px 0; }
.km .formsection textarea:focus + label, .km .formsection input:focus + label { background: none; color: var(--muted); opacity: 1; }
.km input[type='checkbox'], .km input[type='radio'] { width: 18px; height: 18px; accent-color: var(--red); vertical-align: -3px; }

/* ---------- Tabellen ---------- */
.km table { border-collapse: collapse; width: 100%; font-size: 14px; background: var(--glass-2); }
.km table th { font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--bg-2); border-bottom: 1px solid var(--stroke); padding: 10px 12px; text-align: left; }
.km table td { padding: 10px 12px; border-bottom: 1px solid var(--stroke); color: var(--text); vertical-align: middle; }
.km table tr:last-child td { border-bottom: 0; }
.km table tbody tr:hover td, .km table.kwm tr:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.km table.kwm, .km table.keywordmonitor, .km table.rankingchange, .km table.datatable {
  border: 1px solid var(--stroke); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow);
}
.km table.keywordmonitor td.first { background: var(--bg-2); font-weight: 700; }
.km table.keywordmonitor td.keyword, .km table.keywordmonitor td.keyword a { font-weight: 700; }
.km table.keywordmonitor td.rank { font: 700 15px var(--font); font-variant-numeric: tabular-nums; }
.km small { color: var(--muted); }

/* DataTables */
.km .dataTables_wrapper { font-size: 14px; }
.km .dataTables_wrapper .dataTables_filter input { min-height: 38px; padding: 6px 12px; }
.km .dataTables_wrapper .dataTables_length select { min-height: 38px; padding: 4px 32px 4px 10px; }
.km .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 6px !important; border: 1px solid var(--stroke) !important; background: var(--glass-2) !important; margin: 0 2px; color: var(--text) !important; }
.km .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--text) !important; color: #fff !important; border-color: var(--text) !important; }
.km table.dataTable thead th { cursor: pointer; }
.km .colsearch, .km input.colsearch { min-height: 32px; padding: 4px 8px; font-size: 13px; }

/* ---------- Statusfarben (Rankings) ---------- */
.km .green, .km td.compgood, .km .up { color: var(--c4) !important; }
.km .red, .km td.compbad, .km .down { color: var(--red) !important; }
.km .orange, .km .yellow { color: var(--c3) !important; }

/* ---------- Lightbox / Hilfe ---------- */
.km .background-overlay { background: rgba(10, 10, 10, .5); backdrop-filter: blur(6px); }

/* ---------- FAQ / Hinweise ---------- */
.km .faq h3, .km .hints h3 { margin-top: 18px; }

/* ---------- Footer ---------- */
.km-footer { margin-top: 0; }

/* ---------- Mobile ---------- */
@media (max-width: 960px) {
  .km .row { --km-gap: 16px; }
  .km .row > .column { flex: 0 0 100% !important; }
  .km .submenu { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .km .submenu::-webkit-scrollbar { display: none; }
  .km table { font-size: 13px; }
}

/* alte Button-/Formular-Regeln der App nicht auf den Seitenrahmen anwenden */
.km-body .nav button, .km-body .nav a, .km-body .drawer button, .km-body .footer a { text-transform: none; letter-spacing: normal; font-family: var(--font); }
.km-body .nav .pillbtn { font-weight: 600; font-size: 15px; height: 44px; line-height: 1; padding: 0 18px 0 14px; border: 0; }
.km-body .nav .loginbtn { height: 44px; line-height: 1; }

/* ---------- Korrekturen Projekt-Übersicht ---------- */
/* Unternavigation: Reiter als waagerechte Pills */
.km .submenu a, .km .submenu b { flex-direction: row; justify-content: center; padding: 0 14px; margin: 0; }

/* Vergleichstabellen (drei nebeneinander) */
.km table.kwm th.first, .km table th[colspan] {
  font: 700 15px var(--font); letter-spacing: -.01em; text-transform: none; color: var(--text);
  text-align: left; background: var(--glass-2); padding: 14px 16px;
}
.km table.rankingchange tr:nth-child(2) td { font: 600 12px var(--font); color: var(--muted); background: var(--bg-2); padding: 8px; }
.km table.rankingchange td { font-size: 15px; font-weight: 600; padding: 10px 8px; }
.km .gold { color: #b88600 !important; }

/* Eingabefelder mit Beschriftung: Beschriftung über dem Feld statt darüberliegend */
.km .formsection:has(> textarea + label, > input.fieldclass + label, > input.fieldclass2 + label) { display: flex; flex-direction: column; }
.km .formsection > textarea + label, .km .formsection > input.fieldclass + label, .km .formsection > input.fieldclass2 + label {
  order: -1; position: static; display: block; margin: 0 0 6px; padding: 0; background: none; color: var(--muted);
  font-size: 13px; font-weight: 600; line-height: 1.3; opacity: 1;
}
.km .formsection textarea { min-height: 140px; }

/* Datenexport */
.km ul.download { display: flex; flex-wrap: wrap; gap: 6px; height: auto; margin: 6px 0 12px; list-style: none; }
.km ul.download li { float: none; margin: 0; }
.km ul.download li a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 34px; padding: 0 12px;
  border-radius: 6px; border: 1px solid var(--stroke-2); background: var(--glass-2); color: var(--text);
  font: 700 12px var(--mono); letter-spacing: .06em; line-height: 1; text-decoration: none;
}
.km ul.download li a:hover { border-color: var(--red); background: var(--glass-2); color: var(--red); }
@media (max-width: 960px) {
}

/* Kommentarfelder in der Keyword-Tabelle: klein und unauffällig */
.km textarea.comment { min-height: 0; height: 34px; width: 140px; padding: 6px 8px; font-size: 12px; line-height: 1.3; resize: vertical; border: 1px solid transparent; background: transparent; }
.km textarea.comment:hover, .km textarea.comment:focus { border-color: var(--stroke-2); background: var(--bg); }
.km textarea.commentlarge { min-height: 0; }

/* Filter im Tabellenkopf (Spaltensuche, min./max.) */
.km input.columnsearch, .km input.rangefilter {
  min-height: 0; height: 26px; margin: 6px 0 0; padding: 2px 6px; border-radius: 5px;
  font: 500 11px var(--font); letter-spacing: 0; text-transform: none; box-shadow: none;
}
.km input.columnsearch { width: 100%; max-width: 110px; }
.km input.rangefilter { width: 38px; margin-right: 2px; text-align: center; }
.km input.columnsearch::placeholder, .km input.rangefilter::placeholder { text-transform: none; color: var(--muted); opacity: .8; }
.km .tablewrap { overflow-x: auto; }

/* URL-Rankings: Zellen mit eingebetteten Keyword-Listen oben ausrichten */
.km tr:has(> td.top) > td { vertical-align: top; }
.km tr:has(> td.top) > td.keyword { padding-top: 16px; font-size: 13px; word-break: break-all; }
.km table.kwsmall { margin: 0; font-size: 12px; }
.km table.kwsmall td { padding: 5px 8px; }
.km table.kwsmall tr:first-child td { font: 600 11px var(--font); color: var(--muted); background: var(--bg-2); }

/* Datumsvergleich: Schaltflächen-Gruppe ohne alte Inline-Abstände */
.km .gridbox form.right, .km .gridbox form:not([id]):has(> input[type=hidden] + input.cta-small) { float: none; display: inline-block; vertical-align: top; margin: 12px 8px 0 0; }
.km .gridbox form#date_compare { overflow: hidden; margin-bottom: 4px; }
.km .gridbox form#date_compare input.cta-small { float: none; }
.km input.cta-small { text-transform: none; }

.km .fieldclass2 { width: 100%; }
.km .row > .gridbox { width: 100%; }
.km #linechart-first, .km #linechart-second, .km #linechart-third, .km #linechart { border: 1px solid var(--stroke); border-radius: 10px; background: #fff; font-size: 12px; }

/* Highcharts: globale Icon-Regel für svg (base.css) aufheben */
svg.highcharts-root { width: auto; height: auto; fill: initial; stroke: initial; stroke-width: initial; stroke-linecap: initial; stroke-linejoin: initial; flex: initial; }
.km .formsection select, .km .formsection textarea, .km .formsection2 select, .km .gridbox select.fieldclass, .km .gridbox select { width: 100%; max-width: none; }
.km table.kwm th:first-child:not(.first):not([colspan]) { font-size: 11px; padding: 10px 12px; }

/* ---------- Marketing-Seiten (Start, Funktionen, FAQ, Preise) ---------- */
.km-mkt .km-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--stroke); background: #000; box-shadow: var(--shadow); }
.km-mkt .km-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.km-mkt .km-cta { margin: 28px 0 0; }
.km-mkt .grid-2 > .ticks { margin: 0; }
.km-mkt .tile { height: 100%; }
@media (max-width: 760px) { .km-mkt .grid-2 { grid-template-columns: minmax(0, 1fr); } }
.km-mkt .offer p { color: color-mix(in srgb, var(--bg) 78%, transparent); }
.km-mkt .offer h3 { color: var(--bg); }
.km-mkt .wl-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
@media (max-width: 960px) { .km-mkt .wl-intro { grid-template-columns: minmax(0, 1fr); } }
.km-mkt .km-shot { margin: 0; position: sticky; top: 100px; }
.km-mkt .km-shot a { display: block; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--stroke); box-shadow: var(--shadow); background: #fff; }
.km-mkt .km-shot img { display: block; width: 100%; height: auto; }
.km-mkt .km-shot figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }

/* Keyword-Monitor-Navigation im „Alle Tools“-Drawer (nur mobil, dort fehlt die Kopfnavigation) */
.km-drawer-nav { display: none; }
@media (max-width: 1000px) {
  .km-drawer-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--stroke); }
  .km-drawer-nav__title { flex: 1 0 100%; margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .km-drawer-nav a { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--stroke-2); background: var(--glass-2); color: var(--text); font-weight: 600; font-size: 14px; text-decoration: none; }
  .km-drawer-nav a[aria-current] { background: var(--text); border-color: var(--text); color: #fff; }
}

/* versteckte App-Dialoge (Wettbewerber, Analytics …) dürfen die Seite nicht verbreitern */
.km-mkt .km-feature .wl-intro { align-items: center; }
.km-mkt .km-feature h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 16px; }
.km-mkt .km-feature .tile__ico { margin-bottom: 18px; }
.km-mkt .km-feature .km-shot { position: static; }
@media (min-width: 961px) {
  .km-mkt .km-feature--rev .wl-intro { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .km-mkt .km-feature--rev .km-shot { order: -1; }
}
.km-mkt .grid-2 > .ticks { align-content: start; }
.km-mkt .offer strong { color: var(--bg); }
.km-mkt .panel > .callout { margin-top: 28px; }
.km-mkt .km-prices tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .km-mkt .km-prices tbody { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .km-mkt .km-prices tbody { grid-template-columns: minmax(0, 1fr); } }
.km-mkt .km-cta .btn--grad, .km-mkt .panel p a.btn--grad { color: #fff; text-decoration: none; }
.km-mkt .page-hero + .tips { margin-top: 28px; }

/* Untermenü: nie umbrechen, Reiter füllen die Breite, bei Platzmangel seitlich scrollen */
.km .submenu a, .km .submenu b { flex: 1 0 auto; justify-content: center; padding: 0 12px; }

/* ---------- Tabellen-Ausrichtung: Text links, Zahlen rechts (Zahlenspalten markiert km.js mit .is-num) ---------- */
.km table td, .km table th { text-align: left !important; }
.km table .is-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.km table td.print:has(input[type=checkbox]), .km table td:has(> input[type=checkbox]:only-child) { text-align: center !important; }
/* Kennzahl-Kacheln (Vergleich gestern/Vorwoche …) bleiben zentriert */
.km table.rankingchange td, .km table.rankingchange th:not(.first) { text-align: center !important; }
.km table.rankingchange th.first { text-align: left !important; }

/* ---------- Kennzahl-Tabellen (Vergleich gestern/Vorwoche/Vormonat …) als Raster ---------- */
.km .km-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.km .km-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.km .km-stats > h4 { grid-column: 1 / -1; margin: 0; }
.km .km-stats table.rankingchange { float: none; width: 100%; margin: 0; }
@media (max-width: 960px) { .km .km-stats, .km .km-stats--2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Klassen statt Inline-Styles (App-Ausgabe) ---------- */
.km .km-hidden { display: none; }
.km .kwcomment--full { width: 100%; }
.km table.kwm-compact { font-size: 13px; }
.km td.is-wrap { white-space: break-spaces; }
.km td.is-small, .km .km-small { font-size: 13px; }
.km .km-lead { font-size: 20px; line-height: 1.5; }
.km .km-links { line-height: 1.9; }
.km .km-mt { margin-top: 24px; }
.km .km-loader { display: block; margin: 0 auto; }
.km .km-clip { overflow: hidden; width: 260px; }
.km .gridbox select.km-select-sm { width: 150px; margin: 0; flex: none; }
.km form.urlmonitor .formsection:has(> select.km-select-sm) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.km form.urlmonitor .formsection:has(> select.km-select-sm) input.number { width: 120px; margin: 0; flex: none; }
@media (max-width: 600px) {
  .km .gridbox select.km-select-sm { flex: 1 1 120px; width: auto; min-width: 0; }
  .km form.urlmonitor .formsection:has(> select.km-select-sm) input.number { flex: 1 1 90px; width: auto; min-width: 0; }
  .km form.urlmonitor .formsection:has(> select.km-select-sm) > span { flex: 1 0 100%; }
  .km form.urlmonitor input.cta { max-width: 100%; }
}
.km .km-textarea-tall { min-height: 620px; }
.km textarea#keywords { min-height: 20rem; }
.km .whitelabel img { width: 300px; max-width: 100%; height: auto; }
.km tr.km-row-head > * { background: var(--bg-2); }
.km .km-badge { margin-top: 8px; padding: 4px 8px; border-radius: 6px; background: var(--red); color: #fff; font: 700 13px var(--font); font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; }
.km .km-badge--dark { background: var(--text); }
.km td.km-sep-row { text-align: center !important; background: color-mix(in srgb, var(--red) 75%, #fff); color: #fff; font-size: 10px; padding: 2px 8px; height: auto; }
/* Analytics: Details ein-/ausblenden */
.km button.toggle { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; height: auto; min-height: 38px; margin: 24px 0 0; padding: 6px 14px; border: 1px solid var(--stroke); border-radius: 8px; background: var(--glass-2); color: var(--text); font: 600 14px/1.25 var(--font); letter-spacing: 0; text-align: left; text-transform: none; white-space: normal; transition: border-color .2s; }
.km button.toggle:hover, .km button.toggle:focus { border-color: var(--text); background: var(--glass-2); color: var(--text); }
.km button.toggle::after { content: ""; flex: none; width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .3s var(--spring), margin .3s; }
.km button.toggle:has(+ .km-hidden[style*="block"])::after { margin-top: 3px; transform: rotate(225deg); }
.km button.toggle + .km-hidden { margin-top: 28px; }
.km button.toggle + .km-hidden > h4 { margin: 0 0 16px; }

/* URL Monitor: Mini-Buttons (Vergleich) und Lupe (Quelltext) */
.km td:has(> span.inlinelink) { position: relative; padding-right: 44px; }
.km table.diff td:has(> span.inlinelink) { padding-right: 12px; padding-bottom: 42px; }
.km span.inlinelink { right: 8px; bottom: 8px; width: 26px; height: 26px; margin: 0; border: 1px solid var(--stroke); border-radius: 6px; background: var(--glass-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.8-3.8'/%3E%3C/svg%3E") no-repeat center / 14px; transition: border-color .2s; }
.km span.inlinelink:hover { border-color: var(--text); }
.km span.inlinelink a { display: block; width: 100%; height: 100%; }
.km table.comparisson span.inlinelink { top: 50%; bottom: auto; transform: translateY(-50%); }
.km .showdiff { position: static; }
.km a.diffbutton, .km a.diffbutton2 { display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 0; line-height: 0; transition: background-color .2s, color .2s; }
.km a.diffbutton { right: -24.5px; top: 50%; transform: translateY(-50%); width: 22px; height: 26px; }
.km .showdiff2 { left: 8px; bottom: 8px; }
.km a.diffbutton2 { position: static; width: 26px; height: 26px; }
.km a.diffbutton::before, .km a.diffbutton2::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--diff-ico) center / contain no-repeat; mask: var(--diff-ico) center / contain no-repeat; }
.km a.diffbutton { --diff-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); }
.km a.diffbutton2 { --diff-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E"); }
.km a.diffbutton.bgreen, .km a.diffbutton2.bgreen { background: color-mix(in srgb, var(--c4) 14%, #fff); color: var(--c4); }
.km a.diffbutton.bred, .km a.diffbutton2.bred { background: color-mix(in srgb, var(--red) 12%, #fff); color: var(--red); }
.km a.diffbutton.bgreen:hover, .km a.diffbutton2.bgreen:hover { background: var(--c4); color: #fff; }
.km a.diffbutton.bred:hover, .km a.diffbutton2.bred:hover { background: var(--red); color: #fff; }
.km .diff-add { background: color-mix(in srgb, var(--c4) 22%, transparent); color: var(--text); }
.km .diff-cell { padding: 10px; }
.km .diff-text { color: var(--text-2); }
.km .Differences { font: 12.5px/1.55 var(--mono); font-variant-ligatures: none; }
.km .Differences thead th { padding: 12px 16px; }
.km .DifferencesSideBySide thead th { font-size: 12.5px; color: var(--text); }
.km .DifferencesSideBySide thead th:first-child:not(:last-child) { background: color-mix(in srgb, var(--red) 14%, #fff); box-shadow: inset 0 -2px 0 var(--red); }
.km .DifferencesSideBySide thead th:last-child:not(:first-child) { background: color-mix(in srgb, var(--c4) 16%, #fff); box-shadow: inset 0 -2px 0 var(--c4); }
.km .Differences tbody { border: 0; background: none; color: var(--text-2); }
.km .Differences td { padding: 3px 16px; border: 0; color: inherit; font: inherit; vertical-align: top; overflow-wrap: anywhere; word-break: break-word; }
.km .Differences .ChangeEqual td { background: transparent; color: var(--muted); }
.km .DifferencesSideBySide .ChangeInsert td.Left, .km .DifferencesSideBySide .ChangeDelete td.Right { background: var(--bg-2); }
.km .DifferencesSideBySide .ChangeInsert td.Right, .km .DifferencesSideBySide .ChangeReplace td.Right { background: color-mix(in srgb, var(--c4) 12%, transparent); color: var(--text); }
.km .DifferencesSideBySide .ChangeDelete td.Left, .km .DifferencesSideBySide .ChangeReplace td.Left { background: color-mix(in srgb, var(--red) 9%, transparent); color: var(--text); }
.km .Differences ins, .km .Differences del { background: none; color: inherit; text-decoration: none; }
.km .DifferencesSideBySide .ChangeReplace ins { background: color-mix(in srgb, var(--c4) 28%, transparent); }
.km .DifferencesSideBySide .ChangeReplace del { background: color-mix(in srgb, var(--red) 22%, transparent); text-decoration: line-through; }
.km .km-tableactions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.km .km-tableactions .selectall { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.km .km-tableactions .cta { margin: 0; }
/* übrige Floats der App (z. B. #complb) vor dem Footer aufheben */
.km-wrap::after { content: ""; display: block; clear: both; }
.km #complb { float: right; margin-top: 20px; }
.km td.col-metric { width: 80px; }
.km td.col-comment { width: 145px; }

/* ---------- Tabellen-Scrollbereich mit stehendem Kopf (ersetzt das DataTables-FixedHeader-Plugin) ---------- */
.km .tablewrap { clear: both; overflow: auto; border-radius: var(--r-lg); border: 1px solid var(--stroke); background: var(--glass-2); box-shadow: var(--shadow); }
.km .tablewrap > table { margin: 0; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.km .tablewrap--tall { max-height: calc(100dvh - 120px); overscroll-behavior: contain; }
.km .tablewrap thead th, .km .tablewrap thead td,
.km .tablewrap table:not(:has(thead)) > tbody > tr:first-child > th {
  position: sticky; top: 0; z-index: 2; background: var(--bg-2); box-shadow: inset 0 -1px 0 var(--stroke);
}
.km .gridbox .tablewrap, .km td .tablewrap { box-shadow: none; }
.km table.keywordmonitor td.keyword { white-space: nowrap; }
.km .dataTables_filter label, .km .dataTables_length label { position: static; background: none; padding: 0; color: var(--text-2); font-weight: 600; font-size: 13px; }

/* Rangzellen: Zahl rechtsbündig, „AI“-Marker fest am linken Zellrand (statt float mit negativem Rand) */
.km table.keywordmonitor td.rank { position: relative; padding-left: 34px; white-space: nowrap; }
.km table.keywordmonitor td.rank .ai_static {
  float: none; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); margin: 0;
  padding: 1px 5px; border-radius: 4px; border: 1px solid var(--stroke-2); background: var(--bg-2); color: var(--text-2);
  font: 700 9px/1.4 var(--font); letter-spacing: .04em;
}
.km table.keywordmonitor td.rank .ai_static b { font-weight: 700; }
/* #-Spalte: Nummer und Auswahl-Checkbox nebeneinander */
.km table.keywordmonitor td.small:has(> input.removekeyword) { white-space: nowrap; text-align: right !important; font-size: 12px; color: var(--muted); }
.km table.keywordmonitor td.small:has(> input.removekeyword) br { display: none; }
.km table.keywordmonitor td.small > input.removekeyword { margin: 0 0 0 8px; vertical-align: middle; }
.km .status-success { color: var(--c4) !important; font-weight: 600; }
.km .status-error { color: var(--red) !important; font-weight: 600; }

/* ---------- App-Dialoge (CSS-:target-Lightboxen): über der Navigation, zentriert, Kartenoptik ---------- */
.km .background-overlay { z-index: 1000; background: rgba(10, 10, 10, .35); }
.km .background-overlay:target { background: rgba(10, 10, 10, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.km .lightbox-container { z-index: 1001; pointer-events: none; }
.km .background-overlay:target + .lightbox-container { position: fixed; inset: 0; height: auto; display: grid; place-items: center; padding: 24px; }
.km .lightbox-content {
  pointer-events: auto; display: block; position: relative; margin: 0; padding: 28px; border: 1px solid var(--stroke); border-radius: var(--r-lg);
  background: #fff; box-shadow: var(--shadow-lg); width: min(640px, 100%); max-height: calc(100dvh - 48px); overflow: auto; text-align: left;
}
.km .background-overlay:target + .lightbox-container .lightbox-content { animation: drop .45s var(--spring); }
.km .lightbox-content:has(> .analytics) { width: min(880px, 100%); }
.km .lightbox-content > div, .km .lightbox-content > div.analytics, .km .lightbox-innerwrapper--tall { width: auto; height: auto; padding: 0; overflow: visible; }
.km .lightbox-content h4 { margin: 0 0 16px; padding-right: 44px; font-size: 20px; letter-spacing: -.02em; }
.km .lightbox-content p { color: var(--text-2); }
.km .lightbox-content .cta, .km .lightbox-content input[type='submit'] { margin: 8px 0 12px; }
.km .lightbox-close {
  position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 8px; border: 1px solid var(--stroke-2); background: var(--glass-2); font-size: 0; text-decoration: none; color: var(--text);
}
.km .lightbox-close::before { content: "×"; font-size: 22px; line-height: 1; font-weight: 400; }
.km .lightbox-close:hover { border-color: var(--text); color: var(--text); }
.km #changecustomlocresult { height: 9rem; width: 100%; margin-bottom: 16px; border: 1px solid var(--stroke-2); border-radius: 8px; overflow: auto; padding: 8px 12px; }
.km textarea.km-textarea-tall { min-height: 620px; }

/* ---------- Kompakte Datentabellen (weniger seitliches Scrollen) ---------- */
.km table.keywordmonitor td, .km table.keywordmonitor th { padding: 6px 8px; }
.km table.keywordmonitor thead td, .km table.keywordmonitor thead th { padding: 8px; font-size: 12px; line-height: 1.25; }
.km table.keywordmonitor td.rank { width: auto; min-width: 0; padding-left: 26px; font-size: 14px; }
.km table.keywordmonitor td.rank .ai_static { left: 5px; padding: 0 3px; font-size: 8px; }
.km table.keywordmonitor td:not([class]), .km table.keywordmonitor td.is-num:not(.rank) { font-size: 12px; }
.km table.keywordmonitor small.status-success, .km table.keywordmonitor small.status-error { font-size: 12px; }
.km table.keywordmonitor td.keyword { font-size: 14px; }
.km table.keywordmonitor td.keyword .gicon { width: 10px; padding-left: 3px; }
.km table.keywordmonitor input.rangefilter { width: 32px; height: 22px; padding: 1px 3px; margin: 4px 1px 0 0; font-size: 10px; }
.km table.keywordmonitor input.columnsearch { height: 24px; max-width: 120px; margin-top: 4px; font-size: 11px; }
.km table.keywordmonitor td.col-metric { width: auto; }
/* Spalten auf Inhaltsbreite: Rang/Delta/Kennzahlen schrumpfen, der Rest geht an die Keyword-Spalte */
.km table.keywordmonitor td.rank, .km table.keywordmonitor td:not([class]), .km table.keywordmonitor td.is-num, .km table.keywordmonitor td.small { width: 1%; white-space: nowrap; }
.km table.keywordmonitor td.rank { min-width: 64px; }
.km table.keywordmonitor td:not([class]) { min-width: 36px; }
.km table.keywordmonitor textarea.comment { height: 26px; padding: 3px 6px; }

/* ---------- Hinweiskästen der App (accountinfo): Info-Stil der Website statt grünem Kasten ---------- */
.km .accountinfo, .km .accountinfosmall {
  position: relative; display: block; margin: 0 0 24px; padding: 16px 20px 16px 56px;
  border: 1px solid color-mix(in srgb, var(--c3) 30%, transparent); border-left: 4px solid var(--c3); border-radius: var(--r);
  background: color-mix(in srgb, var(--c3) 7%, var(--glass-2)); color: var(--text); font: 500 15px/1.55 var(--font); box-shadow: var(--shadow);
}
.km .accountinfosmall { font-size: 14px; padding-block: 12px; }
.km .accountinfo::before, .km .accountinfosmall::before {
  content: "i"; position: absolute; left: 18px; top: 16px; width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; background: var(--c3); color: #fff; font: 800 14px/1 var(--font);
}
.km .accountinfosmall::before { top: 12px; }
.km .accountinfo a, .km .accountinfosmall a { color: var(--c3); text-decoration-color: color-mix(in srgb, var(--c3) 45%, transparent); font-weight: 600; }
.km .accountinfo b, .km .accountinfo strong { font-weight: 700; }
.km .accountinfo :is(h1, h2, h3, h4), .km .accountinfosmall :is(h1, h2, h3, h4) { margin: 0; font: inherit; letter-spacing: 0; color: inherit; }
.km .km-stats + .km-stats { margin-top: 16px; }
/* Rangpositionen: normale Schriftstärke, ohne Unterstreichung (Link bleibt per Hover erkennbar) */
.km table.keywordmonitor td.rank, .km table.keywordmonitor td.rank a.rankings { font-weight: 400; text-decoration: none; color: var(--text); }
.km table.keywordmonitor td.rank a.rankings:hover { color: var(--red); text-decoration: underline; text-decoration-color: var(--red); }

/* ---------- Überweisung: Kurse als Kacheln, Bankdaten als Liste ---------- */
.km .km-rates { list-style: none; margin: 4px 0 20px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.km .km-rates li { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--stroke); border-radius: var(--r); background: var(--bg-2); font-variant-numeric: tabular-nums; }
.km .km-rates b { font-weight: 700; color: var(--text); }
.km .km-rates span { color: var(--muted); }
.km .km-bank { margin: 0 0 16px; border: 1px solid var(--stroke); border-radius: var(--r-lg); overflow: hidden; }
.km .km-bank > div { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; border-bottom: 1px solid var(--stroke); }
.km .km-bank > div:last-child { border-bottom: 0; }
.km .km-bank dt { margin: 0; padding: 12px 16px; background: var(--bg-2); color: var(--muted); font-size: 13px; font-weight: 600; }
.km .km-bank dd { margin: 0; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text); font-weight: 600; }
.km .km-bank dd.mono { font-family: var(--mono); letter-spacing: .04em; }
.km .km-copy { margin: 0; height: 28px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--stroke-2); background: var(--glass-2); color: var(--text-2); font: 600 12px var(--font); letter-spacing: 0; text-transform: none; line-height: 1; cursor: pointer; }
.km .km-copy:hover, .km .km-copy:focus { border-color: var(--text); background: var(--glass-2); color: var(--text); }
.km .km-copy.is-done { border-color: var(--c4); color: var(--c4); }
@media (max-width: 600px) { .km .km-bank > div { grid-template-columns: 1fr; } .km .km-bank dt { padding-bottom: 4px; } }
.km .km-rates li { padding: 8px 12px; }
.km .km-rates span { margin: 0; line-height: 1.4; }
.km .km-bank dt { display: flex; align-items: center; }
.km .km-bank dd { justify-content: flex-start; flex-wrap: wrap; gap: 6px 12px; }
.km .km-bank dd .km-copy { margin-left: auto; }
/* Zahlen und ihre Spaltenköpfe zentriert; „AI“-Marker am rechten Zellrand */
.km table .is-num { text-align: center !important; }
.km table.keywordmonitor td.rank { text-align: center !important; padding-left: 8px; padding-right: 28px; }
.km table.keywordmonitor td.rank .ai_static { left: auto; right: 5px; }
.km table.keywordmonitor td.rank { padding-left: 28px; }
.km table.keywordmonitor td.keyword .gicon { float: none; display: inline-block; vertical-align: middle; }
.km table.keywordmonitor td.keyword:has(a > .gicon) { position: relative; padding-right: 58px; }
.km table.keywordmonitor td.keyword a:has(> .gicon) { position: absolute; top: 50%; display: flex; transform: translateY(-50%); }
.km table.keywordmonitor td.keyword a > .gicon { display: block; margin: 0; padding: 0; }
.km table.keywordmonitor td.keyword a:has(> .gicon):last-child { right: 10px; }
.km table.keywordmonitor td.keyword a:has(> .gicon):nth-last-child(2) { right: 32px; }
/* Aktionsleiste unter der Tabelle: Auswahl oben, Schaltfläche darunter, linksbündig */
.km .km-tableactions { flex-direction: column; align-items: flex-start; gap: 12px; }

/* ---------- Wettbewerbsmodus-Leiste ---------- */
.km .versus {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px;
  margin: 0 0 24px; padding: 16px 20px; text-align: left; font-size: 15px; font-weight: 400;
  border: 1px solid var(--stroke); border-left: 4px solid var(--red); border-radius: var(--r-lg); background: var(--glass-2); box-shadow: var(--shadow);
}
.km .versus__info { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-width: 0; }
.km .versus__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.km .versus__pair { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.km .versus__pair b { font-size: 17px; font-weight: 700; color: var(--text); word-break: break-all; }
.km .versus .versus__vs { font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: var(--red); color: #fff; }
.km .versus form { margin: 0; }
.km .versus .cta-small { margin: 0; }
/* Wertespalten einheitlich breit: alle Datums-/Rangspalten gleich, alle Veränderungsspalten (+/-) gleich (schmaler) */
.km table.keywordmonitor td.rank { width: 96px; min-width: 96px; max-width: 96px; }
.km table.keywordmonitor tbody td[data-order]:is(:not([class]), [class="is-num"]) { width: 52px; min-width: 52px; max-width: 52px; }

/* ---------- Datumsauswahl (PickMeUp): helle Karte im Design der Website ---------- */
body .pickmeup {
  z-index: 1100; margin-top: 6px; padding: 10px; border: 1px solid var(--stroke); border-radius: var(--r-lg);
  background: #fff; box-shadow: var(--shadow-lg); font: 500 14px/1.4 var(--font); color: var(--text); box-sizing: border-box;
}
body .pickmeup .pmu-instance { height: auto; width: 17.5em; padding: 2px; }
body .pickmeup .pmu-instance nav { align-items: center; margin-bottom: 6px; line-height: 2.2em; color: var(--text); }
body .pickmeup .pmu-instance nav .pmu-month { flex: 1; font-weight: 700; }
body .pickmeup .pmu-instance nav .pmu-prev, body .pickmeup .pmu-instance nav .pmu-next {
  width: 2.2em; height: 2.2em; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); font-size: 12px;
}
body .pickmeup .pmu-instance nav .pmu-prev:hover, body .pickmeup .pmu-instance nav .pmu-next:hover, body .pickmeup .pmu-instance nav .pmu-month:hover { background: var(--bg-2); color: var(--text); }
body .pickmeup .pmu-instance .pmu-day-of-week { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
body .pickmeup .pmu-instance .pmu-day-of-week *, body .pickmeup .pmu-instance .pmu-days * { width: 2.5em; line-height: 2.3em; }
body .pickmeup .pmu-instance .pmu-days .pmu-button, body .pickmeup .pmu-instance .pmu-months .pmu-button, body .pickmeup .pmu-instance .pmu-years .pmu-button { border-radius: 8px; color: var(--text); }
body .pickmeup .pmu-instance .pmu-button:hover { background: var(--bg-2); color: var(--text); }
body .pickmeup .pmu-instance .pmu-not-in-month { color: color-mix(in srgb, var(--text) 35%, transparent); }
body .pickmeup .pmu-instance .pmu-disabled, body .pickmeup .pmu-instance .pmu-disabled:hover { color: color-mix(in srgb, var(--text) 18%, transparent); background: none; }
body .pickmeup .pmu-instance .pmu-today { background: none; color: var(--red); font-weight: 800; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 40%, transparent); }
body .pickmeup .pmu-instance .pmu-selected, body .pickmeup .pmu-instance .pmu-not-in-month.pmu-selected { background: var(--red); color: #fff; font-weight: 700; }
body .pickmeup .pmu-instance nav .pmu-month, body .pickmeup .pmu-instance nav .pmu-month.pmu-disabled { color: var(--text); }
body .pickmeup .pmu-instance nav .pmu-disabled:not(.pmu-month) { opacity: .25; }
body .pickmeup .pmu-instance .pmu-days .pmu-button.pmu-not-in-month { color: color-mix(in srgb, var(--text) 35%, transparent); }
body .pickmeup .pmu-instance .pmu-days .pmu-button.pmu-disabled, body .pickmeup .pmu-instance .pmu-days .pmu-button.pmu-disabled:hover { color: color-mix(in srgb, var(--text) 18%, transparent); background: none; cursor: default; }
body .pickmeup .pmu-instance .pmu-days .pmu-button.pmu-today { color: var(--red); }
body .pickmeup .pmu-instance .pmu-days .pmu-button.pmu-selected { background: var(--red); color: #fff; }
/* Rangwerte in allen Ranking-Tabellen (auch Datumsvergleich): normal, ohne Unterstrich */
.km table a.rankings { font-weight: 400; text-decoration: none; color: var(--text); }
.km table a.rankings:hover { color: var(--red); text-decoration: underline; }
/* Datumsvergleich: Trend-Pfeil mittig links neben der Zahl; Werte ohne Unterstrich */
.km table.keywordmonitor td.rank img.kw-posneg { float: none; position: static; display: inline-block; vertical-align: middle; margin: -2px 4px 0 0; width: 8px; height: auto; }
.km table.keywordmonitor td.rank a { font-weight: 400; text-decoration: none; color: var(--text); white-space: nowrap; vertical-align: middle; }
.km table.keywordmonitor td.rank a:hover { color: var(--red); text-decoration: underline; }

/* Hinweiszeile unter Formularkarten (Login: Passwort vergessen / registrieren) */
.km .km-formfoot { margin: 24px 0 0; padding: 0 4px; }
.km .km-formnote { margin: 4px 0 0; color: var(--muted, #6b6b6b); }

/* Kommentarfelder in den Keyword-Tabellen */
.km td .kwcomment { display: block; width: 100%; min-width: 150px; }
.km table.keywordmonitor .kwcomment textarea.comment { display: block; width: 100%; height: 30px; min-height: 0; margin: 0; padding: 6px 44px 6px 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text); font: 12.5px/1.3 var(--font); resize: none; overflow: hidden; transition: height .2s, border-color .2s, background-color .2s; }
.km table.keywordmonitor .kwcomment textarea.comment::placeholder { color: var(--muted); opacity: 0; transition: opacity .2s; }
.km table.keywordmonitor tr:hover .kwcomment textarea.comment::placeholder, .km table.keywordmonitor .kwcomment textarea.comment:focus::placeholder { opacity: 1; }
.km table.keywordmonitor tr:hover .kwcomment textarea.comment { border-color: var(--stroke); background: var(--glass-2); }
.km table.keywordmonitor .kwcomment textarea.comment:not(:empty) { border-color: var(--stroke); background: var(--bg-2); }
.km table.keywordmonitor .kwcomment textarea.comment:focus { height: 76px; padding-right: 44px; border-color: var(--text); outline: 0; background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent); overflow: auto; }
.km .kwcomment .kwcommentdelete, .km .kwcomment .kwsaved, .km .kwcomment .kwsaving { top: 8px; width: 14px; height: 14px; padding: 0; float: none; }
.km .kwcomment .kwcommentdelete { right: 7px; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); opacity: 0; transition: opacity .2s; }
.km .kwcomment:hover .kwcommentdelete, .km .kwcomment:focus-within .kwcommentdelete { opacity: 1; }
.km .kwcomment .kwcommentdelete:hover { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23de1212' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }
.km .kwcomment:has(textarea:empty) .kwcommentdelete { display: none; }
.km .kwcomment .kwsaved, .km .kwcomment .kwsaving { right: 25px; }
.km .kwcomment .kwsaved { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }

/* Keyword-Tabellen: Position/Auswahl und Keyword bleiben beim seitlichen Scrollen stehen */
@media screen and (min-width: 761px) {
  .km table#datatableoverview > * > tr > :nth-child(-n+2) { position: sticky; background: #fff; box-shadow: inset 0 -1px 0 var(--stroke); }
  .km table#datatableoverview > * > tr > :nth-child(1) { left: 0; z-index: 1; width: 84px; min-width: 84px; max-width: 84px; }
  .km table#datatableoverview > * > tr > :nth-child(2) { left: 83px; z-index: 1; box-shadow: inset 0 -1px 0 var(--stroke), inset -1px 0 0 var(--stroke-2); }
  .km table#datatableoverview > tbody > tr:hover > :nth-child(-n+2) { background: color-mix(in srgb, var(--text) 3%, #fff); }
  .km table#datatableoverview > thead > tr > :nth-child(-n+2) { top: 0; z-index: 3; background: var(--bg-2); }
}