/* Kennzeichnung sichtbar — 17.09.2026
 * Anlass: assets/geteilt/fussleiste-2026-09-11.css Zeile 13 versteckt jede Kennzeichnung ohne .mk-sichtbar.
 * Auf 410 Seiten traegt keine Kennzeichnung diese Klasse -> dort war keine KI-Kennzeichnung sichtbar.
 * .mk-sichtbar selbst macht aus einem Schild einen festen Eck-Chip; fuer Schilder direkt am Bild ist das
 * falsch (alle wuerden sich unten stapeln). Darum eine eigene Klasse .mk-am-medium, gesetzt von
 * kennzeichnung-sichtbar-2026-09-17.js, und hier ein eigenes Aussehen: kleines, deckendes Schild in der
 * oberen rechten Ecke des Bildes oder Films (Beispiel im EU-Verhaltenskodex) — sichtbar ohne Klick, beim ersten Anblick, nach dem Muster
 * des EU-Verhaltenskodex (sichtbare Kennzeichnung direkt am Inhalt).
 * Spezifitaet: html plus sieben :root-Stufen, damit die Versteck-Regel (fussleiste, vier Stufen) und die
 * Zeichen-Sperre in ai-origin-20260915.css (html plus sechs Stufen) sicher unterliegen.
 */

html:root:root:root:root:root:root:root .mk-am-medium-traeger {
  position: relative !important;
}

html:root:root:root:root:root:root:root .mk-schild.mk-am-medium {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  position: absolute !important;
  inset: 10px 10px auto auto !important;
  z-index: 30 !important;
  width: auto !important;
  max-width: calc(100% - 20px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 5px 10px 5px 6px !important;
  border-radius: 999px !important;
  background: rgba(8, 10, 16, 0.9) !important;
  border: 1px solid rgba(216, 189, 114, 0.55) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
  color: #f4efe2 !important;
  font: 600 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: none !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* das kleine goldene Kennzeichen vor dem Text: "AI" auf allen Sprachfassungen (EU-Verhaltenskodex, Abschnitt 2, Massnahme 1.1:
   das grossgeschriebene englische "AI" ist Hauptbestandteil des Symbols); der Text daneben steht in der Seitensprache */
html:root:root:root:root:root:root:root .mk-schild.mk-am-medium::before {
  content: "AI" !important;
  display: inline-grid !important;
  place-items: center !important;
  min-width: 22px !important;
  height: 18px !important;
  padding: 0 4px !important;
  border-radius: 5px !important;
  background: #d8bd72 !important;
  color: #14100a !important;
  font: 800 11px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: 0.04em !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  opacity: 1 !important;
}
html:root:root:root:root:root:root:root .mk-schild.mk-am-medium:lang(en)::before {
  content: "AI" !important;
}

/* echte Fotos und berechnete Darstellungen: gleiches Schild, aber ohne KI-Kennzeichen und in ruhigerer Farbe */
html:root:root:root:root:root:root:root .mk-schild.mk-am-medium.mk-echt::before,
html:root:root:root:root:root:root:root .mk-schild.mk-am-medium.mk-berechnet::before,
html:root:root:root:root:root:root:root .mk-schild.mk-am-medium[data-ai-disclosure="photo"]::before,
html:root:root:root:root:root:root:root .mk-schild.mk-am-medium[data-ai-disclosure="computed"]::before {
  content: none !important;
  display: none !important;
}
html:root:root:root:root:root:root:root .mk-schild.mk-am-medium.mk-echt,
html:root:root:root:root:root:root:root .mk-schild.mk-am-medium[data-ai-disclosure="photo"] {
  padding-left: 10px !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

/* Hintergrund-Kennzeichnung: eine je Hintergrund-Ebene (das Skript waehlt sie), oben rechts im Hintergrundbereich */
html:root:root:root:root:root:root:root .mk-schild.mk-am-hintergrund {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  position: absolute !important;
  inset: 10px 10px auto auto !important;
  z-index: 30 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 5px 10px 5px 6px !important;
  border-radius: 999px !important;
  background: rgba(8, 10, 16, 0.9) !important;
  border: 1px solid rgba(216, 189, 114, 0.55) !important;
  color: #f4efe2 !important;
  font: 600 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: none !important;
}
html:root:root:root:root:root:root:root .mk-schild.mk-am-hintergrund::before {
  content: "AI" !important;
  display: inline-grid !important;
  place-items: center !important;
  min-width: 22px !important;
  height: 18px !important;
  padding: 0 4px !important;
  border-radius: 5px !important;
  background: #d8bd72 !important;
  color: #14100a !important;
  font: 800 11px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
html:root:root:root:root:root:root:root .mk-schild.mk-am-hintergrund:lang(en)::before {
  content: "AI" !important;
}

/* sehr kleine Bilder: Schild nur als Kennzeichen, der volle Text steht im aria-label und im Titel */
html:root:root:root:root:root:root:root .mk-schild.mk-am-medium.mk-kompakt {
  padding: 3px !important;
  font-size: 0 !important;
  gap: 0 !important;
}

/* Druckansicht: Schilder bleiben sichtbar, aber im Textfluss */
@media print {
  html:root:root:root:root:root:root:root .mk-schild.mk-am-medium,
  html:root:root:root:root:root:root:root .mk-schild.mk-am-hintergrund {
    position: static !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Ecken-Varianten: das Skript waehlt die erste Ecke, in der das Schild keinen Text im Bild verdeckt */
html:root:root:root:root:root:root:root .mk-schild.mk-am-medium[data-mk-ecke="or"],
html:root:root:root:root:root:root:root .mk-schild.mk-am-hintergrund[data-mk-ecke="or"] {
  inset: 10px 10px auto auto !important;
}
html:root:root:root:root:root:root:root .mk-schild.mk-am-medium[data-mk-ecke="ur"],
html:root:root:root:root:root:root:root .mk-schild.mk-am-hintergrund[data-mk-ecke="ur"] {
  inset: auto 10px 10px auto !important;
}
html:root:root:root:root:root:root:root .mk-schild.mk-am-medium[data-mk-ecke="ul"],
html:root:root:root:root:root:root:root .mk-schild.mk-am-hintergrund[data-mk-ecke="ul"] {
  inset: auto auto 10px 10px !important;
}
html:root:root:root:root:root:root:root .mk-schild.mk-am-medium[data-mk-ecke="ol"],
html:root:root:root:root:root:root:root .mk-schild.mk-am-hintergrund[data-mk-ecke="ol"] {
  inset: 10px auto auto 10px !important;
}

/* Die vorhandenen festen Eck-Chips (.mk-sichtbar, Welle 11.09.) waren teils nur 12 bis 13 px gross.
   Mindestgroesse 14 px, voll deckend — gleiche Stufe wie die Schilder am Bild. */
html:root:root:root:root:root:root:root .mk-schild.mk-sichtbar {
  font-size: 14px !important;
  opacity: 1 !important;
  background-color: rgba(8, 10, 16, 0.92) !important;
  color: #f4efe2 !important;
}

/* ballscience: die Seitenleiste "Bilder und Filme: mit KI erzeugt" war 13 px -> Mindestgroesse 14 px, voll deckend */
html:root:root:root:root:root:root:root body #bewegung-knopf::after {
  font-size: 14px !important;
  opacity: 1 !important;
  color: #e9e1d2 !important;
}