.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;
}

/* Seit dem 01.09.2026 steht der Callout im Kopfband selbst, direkt unter der
   Ueberschriftenzeile. Dort erbt er den Innenraum des Hero und braucht weder
   eigene Breite noch eigene Seitenraender; den Abstand nach unten setzt die
   Hero-Polsterung. */
.ki-scan-callout--in-hero {
  width: auto;
  max-width: var(--max);
  margin: 0 auto;
}

/* Seit dem 01.09.2026 steht der Callout in der linken Kopfbandspalte, direkt
   unter der Verlaufsueberschrift, und nicht mehr unter dem gesamten Kopfband:
   dort stuende er auch unterhalb der Karte rechts. Diese Spalte ist je nach
   Layout und Fensterbreite nur 235 bis 620 Pixel breit, gemessen auf den vier
   Bauarten der Seiten. Die dreispaltige Zeile der Grundregel braeche darin auf
   ein Wort je Zeile um, deshalb liegt das Ablagefeld hier immer in einer
   eigenen Zeile unter Symbol und Text: dieselbe Aufteilung, die unterhalb von
   720 Pixeln ohnehin greift.
   Die Regel --in-hero darueber bleibt stehen, bis der Rollout durch ist: das
   Stylesheet geht vor den Seiten live, und in diesem Fenster tragen die Seiten
   noch die alte Klasse. */
.ki-scan-callout--in-hero-col {
  width: auto;
  max-width: none;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 9px 12px;
  margin: 1rem 0 0;
}

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

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

/* Ab 1440 Pixeln ist die Kopfbandspalte mindestens 504 Pixel breit. Dort steht
   das Ablagefeld neben der Copy statt darunter und nimmt die rechte Haelfte
   ueber die volle Hoehe des Blocks ein: es wird dadurch hoeher statt schmal
   und lang. Unterhalb bleibt die gestapelte Fassung, denn bei 359 Pixeln
   Spaltenbreite blieben der Copy daneben nur rund 116 Pixel. */
@media (min-width: 1440px) {
  .ki-scan-callout--in-hero-col {
    grid-template-columns: 40px minmax(0, 1fr) minmax(170px, 38%);
    align-items: center;
    row-gap: 0;
  }

  .ki-scan-callout--in-hero-col .ki-scan-callout__drop {
    grid-column: 3;
    grid-row: 1;
    align-self: stretch;
  }
}

/* Zwischen dem Mobilbruch der Seite und rund 1240 Pixeln bleibt vom
   Kopfbandraster `1fr 460px` neben dem Themenbaum nur eine sehr schmale linke
   Spalte uebrig: auf roter-faden-check bei 950 Pixeln gemessene 137. Das
   trifft die Ueberschrift dort ohnehin, der Callout soll es nicht
   verschlimmern, deshalb faellt in diesem Band das Symbol weg und der Text
   bekommt die ganze Zeile. Ueber die Fensterbreite und nicht ueber die
   Spaltenbreite: `container-type: inline-size` waere der genauere Weg,
   nimmt der Spalte aber ihren Mindestinhalt und liess sie im Test von 137
   auf 57 Pixel zusammenfallen. */
@media (min-width: 721px) and (max-width: 1240px) {
  .ki-scan-callout--in-hero-col {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .ki-scan-callout--in-hero-col .ki-scan-callout__icon {
    display: none;
  }
}

/* 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;
  background: url("../images/ki-scanner-icon-ki-scanner-uni.png?v=20260717k") center / contain no-repeat;
}

.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-icon {
  flex: 0 0 auto;
  color: #7c93ad;
}

.ki-scan-callout__drop {
  display: flex;
  gap: 8px;
  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;
  /* #738297 auf Weiss sind 3,91:1 und damit unter der WCAG-AA-Schwelle von
     4,5:1 (im Browser gemessen, 10,24px, nicht fett). Genau daran hing
     text-kuerzen-ki-online seit Wochen bei Accessibility 96, und der
     automatische Fix griff nicht: seine Liste kennt nur ganze Farbwerte in
     der Seite, diese Farbe steht aber in dieser gemeinsamen Datei.
     text-umschreiben-paraphrasieren-ki-online trug deshalb einen
     seitenlokalen Style-Override. #4b5563 hat 7,56:1 und dieselbe Grautoenung
     und wirkt hier fuer alle 28 einbindenden Seiten. */
  color: #4b5563;
  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 und in der Kopfbandspalte bleibt die Breite die des
     umgebenden Blocks, sonst steht der Callout auf dem Handy 32 Pixel
     schmaler als der Inhalt darunter und haengt neben der Ueberschrift. */
  .ki-scan-callout--in-box,
  .ki-scan-callout--in-hero-col {
    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;
  }
}