/* Ergänzungen für Ghost-Inhalte (Koenig-Editor), im Stil der selobia Blog-Detailseite */

.blog-detail { --sl-wide: 85vw; }

/* Bilder, Galerien, Embeds */
.blog-detail figure { margin: 2em 0; }
.blog-detail img { max-width: 100%; height: auto; border-radius: 1em; display: block; }
.blog-detail figcaption,
.blog-detail .kg-card figcaption { color: #6b6b7b; font-size: .88em; line-height: 1.5; text-align: center; margin-top: .75em; }
.blog-detail .kg-image-card img { margin: 0 auto; }

.blog-detail .kg-width-wide { position: relative; width: min(var(--sl-wide), 75rem); left: 50%; transform: translateX(-50%); max-width: none; }
.blog-detail .kg-width-full { position: relative; width: 100vw; left: 50%; transform: translateX(-50%); max-width: none; }
.blog-detail .kg-width-full img { border-radius: 0; width: 100%; }

.blog-detail .kg-gallery-container { display: flex; flex-direction: column; gap: .75em; }
.blog-detail .kg-gallery-row { display: flex; gap: .75em; }
.blog-detail .kg-gallery-image img { width: 100%; height: 100%; object-fit: cover; }

.blog-detail .kg-embed-card { display: flex; flex-direction: column; align-items: center; }
.blog-detail .kg-embed-card iframe { max-width: 100%; border-radius: 1em; }

/* Zitate, Code, Tabellen */
.blog-detail blockquote { border-left: 3px solid #8d85f4; margin: 2em 0; padding: .25em 0 .25em 1.25em; font-size: 1.13em; line-height: 1.5; color: var(--black, #0e0e1b); }
.blog-detail blockquote.kg-blockquote-alt { border-left: 0; text-align: center; font-size: 1.4em; padding: 0 1em; }
.blog-detail hr { border: 0; border-top: 1px solid #dcdaf9; margin: 3em 0; }
.blog-detail code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; background: #f1f0fe; color: #3b33b8; padding: .12em .35em; border-radius: .3em; }
.blog-detail pre { background: #12111f; color: #e8e6ff; padding: 1.25em 1.5em; border-radius: 1em; overflow-x: auto; margin: 2em 0; font-size: .9em; line-height: 1.6; }
.blog-detail pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
.blog-detail table { width: 100%; border-collapse: collapse; margin: 2em 0; font-size: .95em; }
.blog-detail th, .blog-detail td { border-bottom: 1px solid #dcdaf9; padding: .7em .8em; text-align: left; vertical-align: top; }
.blog-detail th { font-weight: 600; background: #f6f5ff; }

/* Callout, Button, Bookmark, Toggle in selobia-Farben */
.blog-detail .kg-callout-card { border-radius: 1em; margin: 2em 0; }
.blog-detail .kg-callout-card-purple { background: #f1f0fe; }
.blog-detail .kg-button-card a.kg-btn { border-radius: 100em; text-decoration: none; }
.blog-detail .kg-button-card a.kg-btn-accent { background-color: #ef8b6e; color: #fff; }
.blog-detail .kg-bookmark-card a { text-decoration: none; }
.blog-detail .kg-bookmark-container { border-radius: 1em; }

/* statische Seiten (Impressum o. ä.) ohne Inhaltsverzeichnis-Spalte */
.content-wrapper.is-page .sl-toc { display: none; }

@media screen and (max-width: 767px) {
    .blog-detail .kg-width-wide { width: 100%; left: 0; transform: none; }
    .blog-detail .kg-gallery-row { flex-direction: column; }
}

/* Logo als Text, falls in Ghost kein Logo hochgeladen ist */
.sl-nav-wordmark { display: block; color: #fff; font-family: Nohemi, sans-serif; font-weight: 600; font-size: 1.6em; line-height: 1; letter-spacing: .02em; white-space: nowrap; }
.nav-logo .img { max-height: 2.4em; width: auto; }

/* Themen-Icons im Dropdown */
.sl-dd-icon { width: 32px; height: 32px; object-fit: contain; display: block; }

/* Großer Schriftzug im Footer (ersetzt das Logo-Bild, Bögen bleiben) */
.sl-footer-mark { display: flex; flex-direction: column; }
.sl-footer-word { width: 100%; overflow: hidden; line-height: .82; }
.sl-footer-word span { display: inline-block; white-space: nowrap; font-family: Nohemi, sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .01em; font-size: 10em;
  background: linear-gradient(180deg, rgba(121,112,242,.09), rgba(121,112,242,.25)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .04em; }
.sl-footer-arches { width: 100%; display: block; margin-top: .5em; }

/* Verlaufstext: Fläche nach oben erweitern, damit Umlaut-Punkte (Ö, Ä, Ü) sichtbar bleiben */
.span-purple { padding-top: .2em; padding-bottom: .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Themen-Dropdown: zwei Spalten mit je zwei Themen */
@media (min-width: 992px) {
  .drop-down .dropdown-navigation.sl-themen, .dropdown-navigation.sl-themen.w--open { width: 34em; margin-left: -12em; }
  .sl-themen .dropdown-inner-wrapper { justify-content: flex-start; align-items: stretch; grid-column-gap: 6em; column-gap: 6em; }
  .sl-themen .links-content-wrapper.is-dropdown.down { justify-content: flex-end; }
}

/* Name plus rundes Profilbild oben links */
.nav-logo.sl-brand { display: flex; align-items: center; gap: .75em; max-width: none; width: auto; text-decoration: none; }
.sl-brand .sl-nav-wordmark { font-size: 1.35em; }
.sl-avatar { position: relative; flex: none; width: 2.6em; height: 2.6em; border-radius: 50%; padding: 2px;
  background: linear-gradient(135deg, #a39df6, #7970f2 45%, #5044ee); box-shadow: 0 0 0 4px #7970f21f, 0 6px 18px -6px #5044ee99;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.sl-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: 2px solid #17161e; }
.sl-brand:hover .sl-avatar { transform: scale(1.06) rotate(-3deg); box-shadow: 0 0 0 6px #7970f229, 0 8px 22px -6px #5044eebb; }
@media screen and (max-width: 479px) { .sl-brand .sl-nav-wordmark { font-size: 1.15em; } .sl-avatar { width: 2.3em; height: 2.3em; } }

/* ---------- Newsletter-Anmeldung ---------- */
.sl-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sl-signup-section { position: relative; padding: 7.5em 0 2.5em; }
.sl-signup { position: relative; overflow: hidden; border-radius: .75em; border: 1px solid #ffffff14;
  background: url(../images/cta.webp) center / cover no-repeat, #17161e;
  padding: 7em 5em; display: flex; flex-direction: column; align-items: center; gap: 2.5em; }
.sl-signup::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 50% 120%, rgba(121,112,242,.35), transparent 70%); }
.sl-signup > * { position: relative; z-index: 1; }
.sl-signup-content { display: flex; flex-direction: column; align-items: center; gap: 1.5em; max-width: 48em; }
.sl-signup-title { font-size: 3.5em; }
.sl-signup-text { max-width: 36em; font-size: 1.25em; color: #ffffffcc; }
.sl-signup-form { width: 100%; max-width: 40em; display: flex; flex-direction: column; align-items: center; gap: 1em; }
.sl-signup-row { width: 100%; display: flex; gap: .5em; padding: .5em; border-radius: .75em;
  background: #ffffff14; border: 1px solid #ffffff2b; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  transition: border-color .35s var(--ease-io), background-color .35s var(--ease-io); }
.sl-signup-row:focus-within { border-color: #8d85f4; background: #ffffff1f; }
.sl-signup-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff;
  font-family: Nohemi, Arial, sans-serif; font-size: 1.13em; letter-spacing: .04em; padding: 0 1em; min-height: 3.25em; }
.sl-signup-input::placeholder { color: #ffffff80; }
.sl-signup-button { border: 0; cursor: pointer; flex: none; padding: .5em .5em .5em 1.5em; justify-content: space-between; font-family: Nohemi, Arial, sans-serif; transition: opacity .3s; }
.sl-signup-button:hover { opacity: .92; }
.sl-signup-hint { color: #ffffff80; font-size: .88em; letter-spacing: .04em; margin: 0; }
.sl-signup-message { display: none; margin: 0; text-align: center; font-size: 1em; line-height: 1.5; border-radius: .5em; padding: .9em 1.25em; }
.sl-signup-success { color: #fff; background: #7970f233; border: 1px solid #8d85f480; }
.sl-signup-error { color: #ffd6cc; background: #ef8b6e26; border: 1px solid #ef8b6e80; }
.sl-signup-loading { display: none; width: 1em; height: 1em; border-radius: 50%; border: 2px solid #ffffff55; border-top-color: #fff; animation: sl-spin .8s linear infinite; }
@keyframes sl-spin { to { transform: rotate(360deg); } }
/* Zustände, die Ghost am Formular setzt */
.sl-signup-form.loading .sl-signup-loading { display: block; }
.sl-signup-form.loading .sl-signup-button { pointer-events: none; opacity: .8; }
.sl-signup-form.success .sl-signup-row, .sl-signup-form.success .sl-signup-hint { display: none; }
.sl-signup-form.success .sl-signup-success { display: block; }
.sl-signup-form.error .sl-signup-error { display: block; }
@media screen and (max-width: 991px) {
  .sl-signup { padding: 5em 2.5em; }
  .sl-signup-title { font-size: 2.6em; }
}
@media screen and (max-width: 479px) {
  .sl-signup-section { padding-top: 4em; }
  .sl-signup { padding: 3.5em 1.25em; gap: 2em; }
  .sl-signup-title { font-size: 2em; }
  .sl-signup-text { font-size: 1.05em; }
  .sl-signup-row { flex-direction: column; }
  .sl-signup-input { padding: 0 .75em; text-align: center; }
  .sl-signup-button { width: 100%; }
}

/* ---------- Themen-Seiten ---------- */
.sl-thema-head { display: flex; flex-direction: column; align-items: center; gap: 1.5em; text-align: center; max-width: 52em; margin: 0 auto; }
.sl-thema-icon { position: relative; width: 7.5em; height: 7.5em; border-radius: 1.5em; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #ffffff1a, #ffffff05); border: 1px solid #ffffff1f; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: 0 30px 80px -30px #5044eeaa, inset 0 1px 0 #ffffff26; }
.sl-thema-icon::before { content: ""; position: absolute; inset: -40%; z-index: -1; background: radial-gradient(closest-side, #7970f259, transparent); }
.sl-thema-icon img { width: 70%; height: 70%; object-fit: contain; }
.sl-thema-text { max-width: 38em; color: #ffffffcc; font-size: 1.25em; }
.sl-thema-count { color: #ffffff99; font-size: .95em; letter-spacing: .08em; text-transform: uppercase; }

.sl-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .75em; margin-top: 3.5em; }
.sl-chip { display: inline-flex; align-items: center; gap: .6em; padding: .55em 1.2em .55em .6em; border-radius: 100em; color: #fff; text-decoration: none;
  font-size: 1em; letter-spacing: .04em; background: #ffffff0f; border: 1px solid #ffffff1f; transition: background-color .35s var(--ease-io), border-color .35s var(--ease-io), transform .45s var(--ease-out); }
.sl-chip img { width: 1.9em; height: 1.9em; object-fit: contain; }
.sl-chip:hover { background: #ffffff1f; transform: translateY(-2px); }
.sl-chip.is-active { background: linear-gradient(265deg, #8d85f4, #6a60f1); border-color: transparent; box-shadow: 0 10px 30px -12px #6a60f1; }

.sl-rows { display: flex; flex-direction: column; max-width: 75em; margin: 0 auto; }
.sl-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5em; align-items: center; padding: 3em 0; border-bottom: 1px solid #1a1a1a14; }
.sl-row:first-child { padding-top: 0; }
.sl-row:last-child { border-bottom: 0; }
.sl-row-img { display: block; aspect-ratio: 16 / 10; border-radius: .75em; overflow: hidden; background: #ece9ff; }
.sl-row-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease-out); }
.sl-row-img-fallback { display: block; width: 100%; height: 100%; background: linear-gradient(223deg, #a39df6, #7970f2 51%, #5044ee 102%); }
.sl-row:hover .sl-row-img img { transform: scale(1.04); }
.sl-row-body { display: flex; flex-direction: column; align-items: flex-start; gap: 1em; }
.sl-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; color: #1a1a1a99; font-size: .95em; letter-spacing: .03em; }
.sl-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .6; }
.sl-row-tag { color: #6a60f1; }
.sl-row-title { margin: 0; font-size: 2em; line-height: 1.2; font-weight: 500; letter-spacing: .01em; }
.sl-row-title a { color: #1a1a1a; text-decoration: none; background-image: linear-gradient(#7970f2, #7970f2); background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .5s var(--ease-out), color .35s; }
.sl-row:hover .sl-row-title a { background-size: 100% 2px; }
.sl-row-excerpt { margin: 0; color: #1a1a1acc; font-size: 1.1em; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sl-row-more { display: inline-flex; align-items: center; gap: .5em; color: #6a60f1; text-decoration: none; font-weight: 500; letter-spacing: .03em; margin-top: .25em; }
.sl-row-more svg { width: 1.1em; height: 1.1em; transition: transform .45s var(--ease-out); }
.sl-row:hover .sl-row-more svg { transform: translateX(4px); }

.sl-empty { max-width: 40em; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.25em; padding: 4em 2em; border-radius: 1em; background: #f6f5ff; border: 1px dashed #c9c5fb; }
.sl-empty-icon { width: 5em; height: 5em; border-radius: 1.2em; background: #17161e; display: flex; align-items: center; justify-content: center; }
.sl-empty-icon img { width: 72%; height: 72%; object-fit: contain; }
.sl-empty-title { margin: 0; color: #1a1a1a; font-size: 2em; font-weight: 500; }
.sl-empty-text { margin: 0; color: #1a1a1acc; font-size: 1.1em; line-height: 1.55; }

@media screen and (max-width: 991px) {
  .sl-row { gap: 2em; }
  .sl-row-title { font-size: 1.6em; }
}
@media screen and (max-width: 767px) {
  .sl-row { grid-template-columns: 1fr; gap: 1.25em; padding: 2.25em 0; }
  .sl-row-title { font-size: 1.45em; }
  .sl-thema-icon { width: 6em; height: 6em; }
  .sl-chips { margin-top: 2.5em; }
}

/* Themen-Seiten: Abstände */
.sl-thema-hero .main-content-wrapper.is-hero { row-gap: 0; grid-row-gap: 0; }
.sl-thema-hero .padding-vertical.is-career-hero { padding-top: 11em; padding-bottom: 6em; }
.sl-thema-list-section .padding-vertical.is-blog { padding-top: 6em; padding-bottom: 8em; }
.sl-chips { margin-top: 3em; }
@media screen and (max-width: 767px) {
  .sl-thema-hero .padding-vertical.is-career-hero { padding-top: 8em; padding-bottom: 4em; }
  .sl-thema-list-section .padding-vertical.is-blog { padding-top: 3em; padding-bottom: 5em; }
}
.sl-themen .dropdown-icons { flex: none; }
.sl-themen .dropdown-links { white-space: nowrap; }

.sl-signup-hint a { color: #ffffffb3; text-decoration: underline; text-underline-offset: .15em; }
.sl-signup-hint a:hover { color: #fff; }
/* statische Seiten: volle Textbreite, kein Inhaltsverzeichnis */
.content-wrapper.is-blog-detail.is-page, .content-wrapper.is-blog-detail.is-page.sl-toc-on { display: block; max-width: 52em; margin-left: auto; margin-right: auto; }
.content-wrapper.is-page .blog-detail { max-width: none; width: 100%; }