.ki-scan-callout {
  display: grid;
  /* Die Textspalte nimmt nur so viel Breite, wie ihre Copy braucht. Alles,
     was danach frei bleibt, geht an das Drop-Feld. Bei langer Copy faellt es
     auf seine 154 Pixel zurueck, damit die Zeilenzahl unveraendert bleibt. */
  grid-template-columns: 40px minmax(0, auto) minmax(154px, 1fr);
  align-items: center;
  gap: 12px 28px;
  width: min(820px, calc(100% - 3rem));
  margin: .2rem auto 1.6rem;
  padding: 9px 10px 9px 12px;
  border: 1px solid #d8e5f5;
  border-radius: 9px;
  background: #f9fbfe;
  color: #1f2937;
  box-sizing: border-box;
}

/* Im Werkzeugkasten fuellt der Callout die Spalte des Kastens darunter aus:
   gleiche Breite, gleiche Kante, nur ein schmaler Spalt dazwischen. */
.ki-scan-callout--in-box {
  width: auto;
  margin: 0 0 .5rem;
}

/* Bleibt der Callout im Kopfband ueber dem Themenbaum, hat er keinen Kasten,
   dessen Breite er erben koennte. Dann spiegelt er die Inhaltsspalte samt der
   1,5rem Polsterung, mit der dort jeder Kasten eingerueckt ist. Die Werte
   stammen aus `main.has-topicnav` der Site-Shell; die drei Sprungmarken sind
   deren Breakpoints und in `_tests.test_ki_tool_scan_callout_browser`
   nachgemessen. */
main.has-topicnav > .topicnav-lead > .ki-scan-callout {
  width: auto;
  margin-left: calc(226px + 3.95rem + 1.5rem);
  margin-right: 1.5rem;
}

/* Ab 1440 steht die Inhaltsspalte mittig und ist auf 800 Pixel gedeckelt. */
@media (min-width: 1440px) {
  main.has-topicnav > .topicnav-lead > .ki-scan-callout {
    width: min(752px, calc(100% - 3rem));
    margin-left: auto;
    margin-right: auto;
  }
}

/* Ab 1720 haengt der Themenbaum am Seitenrand und der Inhalt geht auf 1120. */
@media (min-width: 1720px) {
  main.has-topicnav > .topicnav-lead > .ki-scan-callout {
    width: min(1072px, calc(100% - 3rem));
  }
}

@media (max-width: 900px) {
  main.has-topicnav > .topicnav-lead > .ki-scan-callout {
    margin-left: calc(210px + 1.1rem + 1.5rem);
  }
}

@media (max-width: 770px) {
  main.has-topicnav > .topicnav-lead > .ki-scan-callout {
    width: min(820px, calc(100% - 3rem));
    margin-left: auto;
    margin-right: auto;
  }
}

.ki-scan-callout__icon {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.ki-scan-callout__copy {
  min-width: 0;
}

.ki-scan-callout__title {
  display: inline-block;
  color: #1d4ed8;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.ki-scan-callout__title:hover,
.ki-scan-callout__title:focus-visible {
  text-decoration: underline;
}

.ki-scan-callout__copy p {
  margin: 3px 0 0;
  color: #526071;
  font-size: .78rem;
  line-height: 1.35;
}

.ki-scan-callout__drop {
  display: flex;
  min-height: 44px;
  padding: 5px 9px;
  align-items: center;
  justify-content: center;
  border: 1px dashed #8fb2df;
  border-radius: 7px;
  background: #fff;
  color: #35577f;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  transition: border-color .15s ease, background-color .15s ease;
}

.ki-scan-callout__drop:hover,
.ki-scan-callout__drop:focus-within,
.ki-scan-callout__drop.is-dragging {
  border-color: #2563eb;
  background: #f1f6ff;
}

.ki-scan-callout__drop-text {
  font-size: .72rem;
  font-weight: 650;
  line-height: 1.25;
}

.ki-scan-callout__drop-text small {
  display: block;
  color: #738297;
  font-size: .64rem;
  font-weight: 500;
}

.ki-scan-callout__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Liegt eine Datei im Upload, braucht die Seitenauswahl den Platz: die drei
   Scan-Bubbles verschwinden, der schmale Kasten geht auf Inhaltsbreite und die
   Seitenvorschau nutzt dieselbe Kachelgroesse wie der KI-Detektor. */
.kd-upload-filled .kd-scan-badges {
  display: none;
}

section[aria-label="Plagiat- oder KI-Scan starten"].kd-upload-filled {
  max-width: min(820px, 100%) !important;
}

.kd-upload-filled #up-grid {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
}

html[data-theme="dark"] .ki-scan-callout {
  border-color: #334b68;
  background: #172235;
  color: #e5edf7;
}

html[data-theme="dark"] .ki-scan-callout__copy p {
  color: #b9c5d5;
}

html[data-theme="dark"] .ki-scan-callout__drop {
  border-color: #58789f;
  background: #111c2c;
  color: #d8e8fb;
}

@media (max-width: 720px) {
  .ki-scan-callout {
    grid-template-columns: 34px minmax(0, 1fr);
    width: min(820px, calc(100% - 2rem));
    gap: 9px 10px;
    padding: 9px;
  }

  /* Im Kasten bleibt die Breite die des Kastens, sonst steht der Callout
     auf dem Handy 32 Pixel schmaler als der Inhalt darunter. */
  .ki-scan-callout--in-box {
    width: auto;
  }

  .ki-scan-callout__icon {
    width: 34px;
    height: 34px;
  }

  .ki-scan-callout__drop {
    grid-column: 1 / -1;
    min-height: 38px;
  }

  .ki-scan-callout__drop-text small {
    display: inline;
    margin-left: 4px;
  }
}