/* Compact homepage topics. Deep Blue follows the selected Originalnah direction. */
.idx-topics { color: #f7f9fc; background: radial-gradient(ellipse at 82% 50%, #104c7080, transparent 56%), linear-gradient(130deg, var(--deep-blue), #062a49); }
.idx-topics .container { padding-block: 32px 24px; }
.idx-topics [hidden] { display: none !important; }
.idx-topics svg { display: block; flex-shrink: 0; width: 20px; height: 20px; }
.idx-topics .idx-topics-category { margin: 0 0 24px; color: #a9dcfa; font: 600 12px/1.6 'Open Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.idx-topics-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 64px; min-height: 400px; }
.idx-topics-panel + .idx-topics-panel { border-top: 1px solid #6eafd447; margin-top: 32px; padding-top: 32px; }
/* Desktop slides share one grid cell: natural maximum height from first paint, no JS collapse.
   Without the early hint (no JS / script failure), the editorial stack stays readable. */
.has-topic-hero .idx-topics-panels { display: grid; }
.has-topic-hero .idx-topics-panels > .idx-topics-panel { grid-area: 1 / 1; border: 0; margin: 0; padding: 0; }
.has-topic-hero .idx-topics:not([data-enhanced]) .idx-topics-panels > .idx-topics-panel:not(:first-child),
.has-topic-hero .idx-topics-panels > .idx-topics-panel[hidden] { display: grid !important; visibility: hidden; pointer-events: none; }
.has-topic-hero .idx-topics-controls[hidden] { display: flex !important; visibility: hidden; }
.idx-topics-copy { min-width: 0; }
.idx-topics-eyebrow { margin: 0 0 18px; color: #b8d2e5; font-size: 14px; line-height: 1.6; }
.idx-topics-dummy-label { padding: 5px 10px; border: 1px dashed #90b6ce; border-radius: 4px; font-size: 12px; }
.idx-topics h2 { margin: 0; color: #f7f9fc; font: 700 clamp(36px, 4.1vw, 58px)/1.1 'Montserrat', sans-serif; letter-spacing: -.045em; }
.idx-topics h2 span { display: block; color: #c0e4f7; }
.idx-topics-lead { max-width: 540px; min-height: 5.1em; margin: 24px 0 0; color: #c3d8e7; font-size: 17px; line-height: 1.7; }
.idx-topics-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.idx-topics .idx-primary-button { gap: 12px; border-radius: 99px; }
.idx-topics-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #eff7fd; font-size: 14px; line-height: 1.5; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.idx-topics-link:hover { color: #9fe5fa; }
.idx-topics :is(a, button):focus-visible { outline: 3px solid #9fe5fa; outline-offset: 4px; }
.idx-topics-visual { position: relative; min-width: 0; width: 100%; max-width: 560px; margin: 0 auto; padding: 24px 16px; }
.idx-topics-visual figcaption { margin-top: 24px; color: #b2ccdf; font-size: 12px; line-height: 1.6; text-align: center; }
.idx-topics .idx-topics-visual--artwork { padding: 0; }
.idx-topics-artwork { display: block; width: 100%; height: auto; border-radius: 8px; }

/* A concrete event-media handover gives the DAM topic its work context. */
.idx-dam-scene { min-width: 0; width: 100%; max-width: 608px; margin: 0 auto; }
.idx-dam-scene img { display: block; width: 100%; height: auto; border-radius: 8px; }
.idx-dam-scene figcaption { margin-top: 12px; color: #b2ccdf; font-size: 12px; line-height: 1.6; }

/* Medienwelt shows an individually designed access point in use. */
.idx-mw-scene { min-width: 0; width: 100%; max-width: 608px; margin: 0 auto; }
.idx-mw-scene img { display: block; width: 100%; height: auto; border-radius: 8px; }
.idx-mw-scene figcaption { margin-top: 12px; color: #b2ccdf; font-size: 12px; line-height: 1.6; }

/* Prepared semantic-search examples: readable queries and actual image results. */
#idx-topic-secure-ai { scroll-margin-top: 120px; }
.idx-ai-search { width: 100%; max-width: 608px; min-width: 0; margin: 0 auto; }
.idx-ai-search-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.idx-ai-examples, .idx-ai-languages { display: flex; gap: 4px; }
.idx-ai-search button { min-height: 44px; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #c3d8e7; font: 600 14px/1.4 'Open Sans', sans-serif; cursor: pointer; }
.idx-ai-examples button[aria-pressed="true"] { color: #fff; border-bottom-color: #b7ff3c; }
.idx-ai-languages button { min-width: 40px; padding-inline: 8px; font-size: 12px; border-radius: 4px; }
.idx-ai-languages button[aria-pressed="true"] { color: #03213d; background: #e2eef4; }
.idx-ai-search button:hover { color: #fff; background: #ffffff12; }
.idx-ai-languages button[aria-pressed="true"]:hover { color: #03213d; background: #fff; }
.idx-ai-example { margin: 0; }
.idx-ai-example + .idx-ai-example { margin-top: 28px; }
.idx-ai-search[data-ai-search-ready] .idx-ai-example { margin-top: 0; }
/* Reserve the initial example before enhancement; script failure keeps it readable. */
.has-topic-hero .idx-ai-search:not([data-ai-search-ready]) .idx-ai-example ~ .idx-ai-example { display: none; }
.has-topic-hero .idx-ai-search-controls[hidden] { display: flex !important; visibility: hidden; }
.has-topic-hero .idx-ai-example-fallback { display: none; }
.idx-ai-search[data-ai-search-ready] .idx-ai-example-fallback { display: none; }
.idx-ai-example-fallback { margin: 0 0 12px; font-size: 18px; }
.idx-ai-query { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 8px; background: #fff; color: #03213d; }
.idx-ai-query > svg { width: 24px; height: 24px; }
.idx-ai-query > div { min-width: 0; }
.idx-ai-query-label { display: block; margin-bottom: 4px; color: #37617b; font-size: 12px; }
.idx-ai-query p { min-height: 2.8em; margin: 0; font: 600 20px/1.4 'Open Sans', sans-serif; }
.idx-ai-search[data-query-language="de"] [data-ai-query="en"],
.idx-ai-search[data-query-language="en"] [data-ai-query="de"] { display: none; }
.idx-ai-results { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.idx-ai-results img { display: block; width: 100%; height: auto; border-radius: 6px; background: #e2eef4; color: #03213d; font-size: 13px; }
.idx-ai-example figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: 12px; color: #b2ccdf; font-size: 12px; line-height: 1.6; }
.idx-ai-security { margin-top: 20px; color: #c3d8e7; font-size: 14px; line-height: 1.65; }
.idx-ai-security summary { width: fit-content; padding-block: 10px; color: #9bd3f3; cursor: pointer; }
.idx-ai-security p { margin: 12px 0; }
.idx-ai-security ul { margin: 12px 0; padding-left: 20px; }
.idx-ai-security a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #eff7fd; text-underline-offset: 4px; }
.idx-ai-security summary:focus-visible { outline: 3px solid #9fe5fa; outline-offset: 4px; }

/* Canva media exchange through CI HUB. */
#idx-topic-canva { scroll-margin-top: 120px; }
/* Separate original brands; the editor is a CSS-framed detail of CI HUB's Canva app preview. */
.idx-canva-demo { width: 100%; max-width: 608px; min-width: 0; margin: 0 auto; container-type: inline-size; }
.idx-canva-exchange { display: grid; grid-template-columns: clamp(78px, 18cqi, 112px) minmax(0, 1fr) clamp(78px, 18cqi, 112px); align-items: center; gap: clamp(12px, 3cqi, 24px); margin: 0 0 28px; }
.idx-canva-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #f3f8ff; font-size: 13px; line-height: 1.5; }
.idx-canva-logo { display: flex; align-items: center; justify-content: center; width: clamp(78px, 16cqi, 96px); height: clamp(78px, 16cqi, 96px); }
.idx-canva-logo .brand-logo--symbol { display: block; width: clamp(62px, 14cqi, 84px); height: auto; color: #fff; }
.idx-canva-logo img { display: block; width: clamp(60px, 13cqi, 80px); height: auto; }
.idx-canva-connection { display: flex; flex-direction: column; align-items: stretch; gap: 8px; text-align: center; }
.idx-canva-direction { color: #bee2f1; font-size: clamp(11px, 2.1cqi, 12px); line-height: 1.5; }
.idx-canva-direction svg { display: block; width: 100%; height: 16px; margin-top: 5px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.idx-canva-direction--return { color: #b7ff3c; }
.idx-canva-direction--return svg { margin-top: 0; margin-bottom: 5px; }
.idx-canva-via { color: #fff; font: 600 13px/1.5 'Open Sans', sans-serif; }
.idx-canva-product { position: relative; overflow: hidden; aspect-ratio: 2 / 1; border: 1px solid #9ab8cc; border-radius: 6px; background: #eef0f4; }
.idx-canva-product > img { position: absolute; display: block; width: 111.111%; max-width: none; height: auto; left: -5.556%; top: -45.9%; }
.idx-canva-demo > figcaption { margin-top: 12px; color: #b2ccdf; font-size: 12px; line-height: 1.6; }

/* License terms take priority; the photo is a small, single reference. */
#idx-topic-rights { scroll-margin-top: 120px; }
.idx-rights-example { width: 100%; max-width: 608px; min-width: 0; margin: 0 auto; container-type: inline-size; }
.idx-rights-sheet { padding: clamp(20px, 5.3cqi, 32px); border: 1px solid #c3dae8; border-radius: 8px; background: #f4f8fb; color: #03213d; }
.idx-rights-asset { display: flex; align-items: center; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid #c3d7e3; }
.idx-rights-asset img { display: block; flex: 0 0 56px; width: 56px; height: 42px; border-radius: 3px; }
.idx-rights-asset > div { flex: 1; min-width: 0; }
.idx-rights-filename { display: block; margin-bottom: 5px; color: #47667a; font-size: 12px; line-height: 1.4; }
.idx-rights-sheet-title { margin: 0; font: 700 clamp(22px, 4.8cqi, 28px)/1.2 'Montserrat', sans-serif; letter-spacing: -.035em; }
.idx-rights-example-label { align-self: flex-start; color: #47667a; font-size: 11px; line-height: 1.5; }
.idx-rights-field-label { margin: 0 0 16px; color: #47667a; font-size: 12px; line-height: 1.5; }
.idx-rights-permissions { padding: 24px 0; border-bottom: 1px solid #c3d7e3; }
.idx-rights-permission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.idx-rights-permission { display: flex; align-items: center; gap: 12px; min-width: 0; }
.idx-rights-permission > div { min-width: 0; }
.idx-topics .idx-rights-permission svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.idx-rights-permission--web { color: #216183; }
.idx-rights-permission--print { color: #975111; }
.idx-rights-permission strong { display: block; margin-bottom: 4px; font: 700 clamp(17px, 3.5cqi, 21px)/1.2 'Montserrat', sans-serif; }
.idx-rights-permission span { display: block; font-size: 12px; line-height: 1.5; }
.idx-rights-term { padding: 24px 0; }
.idx-rights-dates { display: flex; justify-content: space-between; gap: 16px; width: 82%; }
.idx-rights-dates > span { color: #47667a; font-size: 11px; line-height: 1.5; }
.idx-rights-dates > span:last-child { text-align: right; color: #975111; }
.idx-rights-dates strong { display: block; margin-top: 4px; color: #03213d; font-size: 14px; font-weight: 600; }
.idx-rights-timeline { position: relative; height: 16px; margin-top: 14px; border-radius: 3px; background: repeating-linear-gradient(120deg, #e1e9ef 0 4px, #f4f8fb 4px 8px); }
.idx-rights-timeline > span { display: block; width: 82%; height: 100%; border-radius: 3px 0 0 3px; background: #27759b; }
.idx-rights-timeline > span::after { position: absolute; top: -5px; bottom: -5px; left: calc(82% - 2px); width: 3px; background: #975111; content: ''; }
.idx-rights-evidence { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid #b9d1e1; border-radius: 4px; background: #e2eef4; }
.idx-topics .idx-rights-evidence > svg { width: 28px; height: 34px; fill: none; stroke: #47667a; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.idx-rights-evidence > div { flex: 1; min-width: 0; }
.idx-rights-evidence span { display: block; margin-bottom: 5px; color: #47667a; font-size: 11px; line-height: 1.5; }
.idx-rights-evidence strong { display: block; font-size: 13px; line-height: 1.5; font-weight: 600; overflow-wrap: anywhere; }
.idx-topics .idx-rights-evidence > .idx-rights-attachment { width: 20px; height: 20px; }
.idx-rights-example > figcaption { margin-top: 12px; color: #b2ccdf; font-size: 12px; line-height: 1.6; }

/* Deliberately unfinished topic proposals, not product screenshots. */
.idx-topics-placeholder { padding: 32px; border: 1px dashed #98b9cf; border-radius: 12px; background: #ffffff04; }
.idx-topics-placeholder-label { margin: 0 0 20px; color: #bad6e7; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.idx-topics-placeholder-title { display: block; max-width: 340px; color: #e0edf8; font: 400 26px/1.4 'Montserrat', sans-serif; letter-spacing: -.025em; }
.idx-topics-placeholder-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.idx-topics-placeholder-steps li { min-width: 0; padding: 16px 8px; border-top: 1px solid #8caec180; color: #d6e6f2; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.idx-topics-placeholder-steps li > span { display: block; margin-bottom: 12px; color: #91cbe8; font-size: 12px; }
.idx-topics-placeholder-steps--rights { grid-template-columns: 1fr; gap: 0; }
.idx-topics-placeholder-steps--rights li { display: flex; align-items: baseline; gap: 20px; padding: 12px 0; }
.idx-topics-placeholder-steps--rights li > span { margin: 0; }
.idx-topics-placeholder-note { margin: 22px 0 0; color: #bad6e7; font-size: 13px; line-height: 1.7; }

/* Visible topic names, selection state and explicit previous/next controls. */
.idx-topics-controls { display: flex; align-items: stretch; gap: 32px; margin-top: 28px; border-top: 1px solid #6eafd447; }
.idx-topics-picker { display: flex; flex: 1 1 auto; min-width: 0; gap: 8px; overflow-x: auto; padding: 5px; scrollbar-width: thin; scrollbar-color: #78a9c3 #03213d; }
.idx-topics-picker button { display: flex; align-items: baseline; gap: 10px; flex: 1 0 auto; min-height: 64px; padding: 16px 10px; border: 0; border-bottom: 2px solid transparent; background: none; color: #c2d8e7; font: 600 14px/1.5 'Open Sans', sans-serif; text-align: left; cursor: pointer; }
.idx-topics-picker button[aria-pressed="true"] { border-bottom-color: #99e0f4; color: #fff; background: #71c6f00c; }
.idx-topics-picker button:hover { color: #fff; background: #71c6f015; }
.idx-topics-picker small { display: block; margin-top: 2px; color: #a9c5d8; font-size: 11px; font-weight: 400; }
.idx-topics-number { color: #a9c5d8; font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.idx-topics-pagination { display: flex; align-items: center; gap: 8px; }
.idx-topics-count { min-width: 60px; margin-right: 8px; color: #c2d8e7; font-size: 12px; font-variant-numeric: tabular-nums; }
.idx-topics-pagination button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #79abc3; border-radius: 50%; background: transparent; color: #e7f4fc; cursor: pointer; }
.idx-topics-pagination button:hover { background: #71c6f022; border-color: #b5e4f5; }
.idx-topics-prev svg { transform: rotate(180deg); }
.idx-topics-footer { display: flex; justify-content: flex-end; margin-top: 8px; }
.idx-topics-footer .idx-topics-link { color: #bedbee; font-size: 13px; font-weight: 400; }
.idx-topics-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .idx-topics[data-enhanced] .idx-topics-panel[data-entering] { animation: idx-topic-enter .25s ease-out; }
  @keyframes idx-topic-enter { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 1100px) {
  .idx-topics-panel { gap: 32px; }
  .idx-topics h2 { font-size: 42px; }
  .idx-topics-lead { font-size: 16px; }
  .idx-topics-visual { padding-inline: 8px; }
  .idx-topics-placeholder { padding: 24px; }
  .idx-topics-controls { gap: 20px; }
  .idx-topics-picker button { gap: 8px; font-size: 13px; }
  .idx-topics-count { display: none; }
}
@media (max-width: 800px) {
  .idx-topics-panel.idx-rights-topic { row-gap: 0; }
  .idx-rights-topic .idx-topics-copy { display: contents; }
  .idx-rights-topic .idx-topics-eyebrow { order: 1; }
  .idx-rights-topic h2 { order: 2; }
  .idx-rights-example { order: 3; margin-top: 28px; }
  .idx-rights-topic .idx-topics-lead { order: 4; }
  .idx-rights-topic .idx-topics-actions { order: 5; }
  #idx-topic-rights { scroll-margin-top: 90px; }

  .idx-topics-panel.idx-canva-topic { row-gap: 0; }
  .idx-canva-topic .idx-topics-copy { display: contents; }
  .idx-canva-topic .idx-topics-eyebrow { order: 1; }
  .idx-canva-topic h2 { order: 2; }
  .idx-canva-demo { order: 3; margin-top: 24px; }
  .idx-canva-topic .idx-topics-lead { order: 4; }
  .idx-canva-topic .idx-topics-actions { order: 5; }
  #idx-topic-canva { scroll-margin-top: 90px; }

  .idx-topics-panel.idx-ai-topic { row-gap: 0; }
  .idx-ai-topic .idx-topics-copy { display: contents; }
  .idx-ai-topic .idx-topics-eyebrow { order: 1; }
  .idx-ai-topic h2 { order: 2; }
  .idx-ai-search { order: 3; margin-top: 24px; }
  .idx-ai-topic .idx-topics-lead { order: 4; }
  .idx-ai-topic .idx-topics-actions { order: 5; }
  .idx-ai-security { order: 6; }
  #idx-topic-secure-ai { scroll-margin-top: 90px; }

  .idx-topics-panel.idx-mw-topic { row-gap: 0; }
  .idx-mw-topic .idx-topics-copy { display: contents; }
  .idx-mw-topic .idx-topics-eyebrow { order: 1; }
  .idx-mw-topic h2 { order: 2; }
  .idx-mw-scene { order: 3; margin-top: 24px; }
  .idx-mw-topic .idx-topics-lead { order: 4; }
  .idx-mw-topic .idx-topics-actions { order: 5; }
  .idx-topics-panel.idx-dam { row-gap: 0; }
  .idx-dam .idx-topics-copy { display: contents; }
  .idx-dam .idx-topics-eyebrow { order: 1; }
  .idx-dam h2 { order: 2; }
  .idx-dam-scene { order: 3; margin-top: 24px; }
  .idx-dam .idx-topics-lead { order: 4; }
  .idx-dam .idx-topics-actions { order: 5; }
  /* Stacked mobile slides use their own height instead of the longest topic's height. */
  .has-topic-hero .idx-topics:not([data-enhanced]) .idx-topics-panels > .idx-topics-panel:not(:first-child),
  .has-topic-hero .idx-topics-panels > .idx-topics-panel[hidden] { display: none !important; }
  .idx-topics-panel { grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; }
  .idx-topics-copy { max-width: 620px; }
  .idx-topics h2 { font-size: clamp(34px, 6.5vw, 50px); }
  .idx-topics-lead { min-height: 0; margin-top: 20px; }
  .idx-topics-visual { max-width: 500px; }
  .idx-topics-controls { flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .idx-topics-picker { flex-basis: 100%; }
  .idx-topics-pagination { margin-left: auto; }
  .idx-topics-count { display: inline; }
  .idx-topics-footer { justify-content: flex-start; margin-top: -44px; padding-right: 180px; }
}
@media (max-width: 480px) {
  .idx-rights-asset { gap: 12px; flex-wrap: wrap; padding-bottom: 20px; }
  .idx-rights-asset img { flex-basis: 40px; width: 40px; height: 30px; }
  .idx-rights-example-label { width: 100%; margin-top: -2px; }
  .idx-rights-permissions { padding-block: 20px; }
  .idx-rights-permission-grid { gap: 16px; }
  .idx-rights-permission { flex-direction: column; align-items: flex-start; gap: 8px; }
  .idx-topics .idx-rights-permission svg { width: 36px; height: 36px; }
  .idx-rights-term { padding-block: 20px; }
  .idx-rights-dates strong { font-size: 12px; }
  .idx-rights-evidence { padding: 12px; gap: 10px; }
  .idx-topics .idx-rights-evidence > .idx-rights-attachment { display: none; }

  .idx-canva-exchange { grid-template-columns: 78px minmax(0, 1fr) 78px; gap: 12px; margin: 0 0 22px; }
  .idx-canva-brand { font-size: 11px; }
  .idx-canva-logo { width: 78px; height: 78px; }
  .idx-canva-logo .brand-logo--symbol { width: 62px; }
  .idx-canva-logo img { width: 60px; height: 60px; }
  .idx-canva-direction { font-size: 11px; }
  .idx-canva-via { font-size: 12px; }

  .idx-ai-search button { font-size: 13px; padding-inline: 8px; }
  .idx-ai-query { padding: 14px; gap: 12px; }
  .idx-ai-query p { min-height: 4.2em; font-size: 17px; }
  .idx-ai-languages button { font-size: 12px; }

  .idx-topics .container { padding-block: 28px 24px; }
  .idx-topics .idx-topics-category { max-width: 26ch; margin-bottom: 24px; font-size: 11px; }
  .idx-topics h2 { font-size: clamp(30px, 8.4vw, 40px); }
  .idx-topics-eyebrow { margin-bottom: 16px; font-size: 13px; }
  .idx-topics-actions { align-items: flex-start; flex-direction: column; gap: 12px; margin-top: 24px; }
  .idx-topics-visual { padding: 22px 8px 8px; }
  .idx-topics-visual figcaption { margin-top: 20px; font-size: 11px; }
  .idx-topics-placeholder { padding: 20px 16px; }
  .idx-topics-placeholder-title { font-size: 23px; }
  .idx-topics-placeholder-steps { gap: 8px; margin-top: 20px; }
  .idx-topics-placeholder-steps li { font-size: 12px; padding-inline: 0; }
  .idx-topics-footer { padding-right: 148px; }
  .idx-topics-footer .idx-topics-link { font-size: 12px; }
  .idx-topics-count { min-width: 44px; margin-right: 0; font-size: 11px; }
}